SELFHTML: Editorial

SELFHTML

Editorial
Kapitelseite

Im Editorial finden Sie Impressum und Kontaktmöglichkeit sowie wichtige Hinweise und Wissenswertes rund um das Dokument.

Seite Wichtige Hinweise zu SELFHTML
Seite Copyright zu SELFHTML
Seite Häufig gestellte Fragen zu SELFHTML
Seite Hinweise zum Arbeiten mit SELFHTML
Seite Fehler in SELFHTML melden
Seite Unterstützung von SELFHTML
Seite Impressum zu SELFHTML
Seite SELFHTML sagt "Danke"
Seite SELFHTML 8.1.2 als Windows-Hilfedatei

nach oben

© 2007 Seite Impressum


SELFHTML: Editorial / Wichtige Hinweise zu SELFHTML

SELFHTML

Wichtige Hinweise zu SELFHTML
Informationsseite

nach unten Haftung
nach unten Zielgruppen
nach unten Neu in Version 8.1.2
nach unten Neu in Version 8.1.1
nach unten Neu in Version 8.1
nach unten SELFHTML im Web
nach unten Technische Hinweise
nach unten SELFHTML anpassen
nach unten Risiken und Nebenwirkungen
nach unten

Haftung

Dieses Dokument ist keine Publikation einer offiziellen Stelle. Das Dokument erhebt weder den Anspruch auf Vollständigkeit noch auf Fehlerfreiheit. Für Fehler in kommerziellen Web-Seiten, die auf falsche oder falsch verstandene Beschreibungen in diesem Dokument zurückzuführen sind, übernehmen Autor und Redaktion keine Haftung.

Zielgruppen

Zielgruppe sind alle Computer-Anwender, die einen Web-Browser ihr Eigen nennen, die möglichst schon einige "Surf"-Erfahrungen im Web gesammelt haben und die nun wissen möchten, wie man selbst Web-Seiten erstellt. Alle Menschen, die sich privat, ehrenamtlich oder beruflich mit dem Erstellen von Web-Seiten beschäftigen, sind angesprochen. Erklärtes Ziel des Dokuments ist es, Menschen Mut zu machen, das, was sie zu sagen haben, selbst im Web zu publizieren und dadurch aktiv an der World Wide Web Revolution teilzunehmen. Denn das Motto des Web lautet: "Everyone's a publisher".

SELFHTML enthält sowohl einführende Kapitel für Anfänger als auch reine Nachschlagekapitel für Profis. Die Dokumentation ist eine Mischung aus Tutorial und Referenz.

Das Motto - die Energie des Verstehens - ist ernst gemeint. SELFHTML richtet sich nicht an Leute, die mit dem Anspruch antreten, alles fertig vorgesetzt zu bekommen und dann damit prahlen zu können, was sie tolles Eigenes geschaffen haben. Diese Dokumentation ist kein "Ihre-Homepage-in-zehn-Minuten"-Quickie. Das Dokument möchte erreichen, dass seine Anwender verstehen was sie lernen und wissen was sie tun, wenn sie an eigenen Web-Seiten arbeiten. Es richtet sich an Lernwillige, die bereit sind, sich mit einer faszinierenden Materie auseinander zu setzen, die aber immer wieder neue Fragen aufwirft, mitunter zur Verzweiflung treibt und viel Zeit zum Entdecken und Ausprobieren erfordert.

Neu in Version 8.1.2

Gegenüber der Version 8.1.1 hat sich folgendes geändert:

  • Es wurden zahlreiche Tippfehler, Ungenauigkeiten und fachlich fehlerhafte Abschnitte korrigiert. In unserer Fehlerdatenbank finden Sie eine (unvollständige) Online-Seite Auflistung der behobenen Fehler.
  • Die Seite Symbole für die Browserunterstützung wurden abermals vervollständigt. Insbesondere wurden Internet Explorer 7, Firefox 1.5 und 2.0, Opera 8.54, 9.00 und 9.10 sowie Safari 1.0, 2.0 und WebKit (Entwicklerversion) eingepflegt.
  • In das gesamte CSS-Kapitel wurde CSS 2.1 eingearbeitet, was die Änderung einiger Beispiele nach sich zog.
  • Die CSS-Eigenschaft Seite outline wurde ergänzt, ebenso die Beschreibung von Seite @charset.
  • Die CSS-Sidebar wurde um bereits verfügbare Entwürfe von CSS3-Modulen erweitert.
  • Die Erläuterungen zum CGI-Modul (Perl-Kapitel) wurden erheblich erweitert und modernisiert.
  • Die Richtlinien hinsichtlich Seite Weitergabe und Wiederveröffentlichung von SELFHTML wurden modifiziert.

Neu in Version 8.1.1

Gegenüber der Version 8.1 hat sich folgendes geändert:

  • Es wurden zahlreiche Tippfehler, Ungenauigkeiten und fachlich fehlerhafte Abschnitte korrigiert. In unserer Fehlerdatenbank finden Sie eine (unvollständige) Online-Seite Auflistung der behobenen Fehler.
  • Die Seite Symbole für die Browserunterstützung wurden korrigiert und vervollständigt. Insbesondere wurde mit Konqueror von Version 3.1 bis 3.4 und mit Safari von Version 1.0 bis 2.0 getestet (letzterer allerdings nicht vollständig).
  • Die Thematik Kapitel Internationalisierung, Zeichenkodierungen und Seite Unicode wurde überarbeitet.
  • In der Kapitel JavaScript-Objektreferenz wurden zahlreiche Objekt-Beschreibungen und Anzeigebeispiele verbessert und einige Objekte ergänzt.
  • Navigationshilfen: Neu dazu gekommen sind Seite Sidebars für JavaScript/DOM, XSLT/XPath und CGI/Perl mit Verweisen innerhalb von SELFHTML, zu W3C-Spezifikationen und Hersteller-Referenzen sowie eine Sidebar für Online-Kapitel SELFHTML aktuell.
  • Die Seite über Seite CSS-Sprachausgabe wurden um englischsprachige Beispiele erweitert, um Operas Sprachausgabe Opera Voice zu demonstrieren.

Neu in Version 8.1

Gegenüber der Version 8.0 hat sich folgendes geändert:

  • Neu dazu gekommen ist das Unterkapitel Kapitel CSS-basierte Layouts. Das Kapitel wurde dringend nötig, nachdem CSS als Basis für Webseitenlayouts immer mehr Bedeutung gewinnt.
  • Neu dazu gekommen ist das Hauptkapitel Kapitel Webserver/CGI. In das Kapitel sind teilweise Informationen eingeflossen, die vorher in den Kapiteln über Perl und in den diversen technischen Ergänzungen standen. Es sind aber auch neue Seiten zum Apache-Webserver dazu gekommen. Diese Informationen sind wichtig, da der Apache-Server immer stärker zum defacto-Standard für Webserver im Internet wird.
  • Die Symbolauszeichnungen, welcher Browser welche Features unterstützt und zu welchem Standard diese gehören oder nicht gehören, wurden aktualisiert.
  • Die gesamte Dokumentation wurde mit Seite logischen Beziehungen versehen.
  • Navigationshilfen: Neu dazu gekommen sind Seite Sidebars für HTML und CSS mit Verweisen innerhalb von SELFHTML, zu W3-Spezifikationen und Hersteller-Referenzen. Verbessert wurde außerdem die eingebaute Seite Suche: Die Suchergebnisse sind nun mittels Karteireiter übersichtlicher aufbereitet und besonders gute Treffer sind den Volltext-Suchergebnissen vorangestellt. Die Suche ist nun nicht nur lokal, sondern auch online verwendbar.
  • Im Laufe der Monate und Jahre nach Erscheinen der SELFHTML-Version 8.0 wurden hunderte von Fehlern gemeldet, unter denen die meisten der Kategorie "Tippfehler" angehörten, aber auch diverse fachliche Fehler in Beispielen, sowie lückenhafte oder missverständliche Darstellungen. Die SELFHTML-Redaktion hat viel Aufwand betrieben, um diese Fehler und Mängel zu beseitigen. SELFHTML hat dadurch mit der vorliegenden Version deutlich an Detailgenauigkeit gewonnen.

Die weitere Entwicklung von SELFHTML

Seit Version 8.1 ist SELFHTML kein reines Autorenprojekt von Stefan Münz mehr. Das gesamte SELFHTML-Projekt mit den angeschlossenen Online-Angeboten ist so umfangreich und anspruchsvoll geworden, dass längst ein ganzes Team von Developern für den laufenden Betrieb sorgt. Für die Dokumentation SELFHTML ist jetzt ein Seite Redaktionsteam verantwortlich, dem der bisherige Alleinautor Stefan Münz selbstverständlich angehört und beratend zur Seite steht. Ferner ist der Verein Online-Kapitel SELFHTML e.V. gegründet worden, der das SELFHTML-Projekt vertritt und sich für sein Weiterbestehen einsetzt.

Frühere Versionen

Frühere Versionen von SELFHTML finden Sie im Online-Angebot von SELFHTML aktuell unter Online-Kapitel SELFHTML (alte Versionen).

SELFHTML im Web

SELFHTML steht an vielen Adressen im Web. Bitte haben Sie Verständnis dafür, dass nicht an jeder Adresse die neueste Dokumentversion steht. Das Redaktions-Team pflegt nur die offizielle Adresse. Deshalb finden Sie auch nur auf den SELFHTML-Servern mit Sicherheit die jeweils neueste Version des Dokuments.

Die Original-Online-Version der Dokumentation SELFHTML hat die Adresse:

Online-Kapitel http://de.selfhtml.org/

Im Zweifelsfall ist maßgeblich, was dort steht.

Neben der Dokumentation SELFHTML gibt es auch noch den erweiterten Raum von SELFHTML aktuell. Die Einstiegsseite zu SELFHTML aktuell ist zugleich die "Portalseite" zu allem rund um SELFHTML.

Die Portalseite von SELFHTML hat die Adresse:

Online-Kapitel http://aktuell.de.selfhtml.org/

Wenn Sie einen Link auf SELFHTML setzen wollen, empfiehlt es sich, den Link auf die Adresse der Portalseite zu setzen.
Über die Portalseite erreichen Sie über einen Verweis sowohl die Original-Online-Version der Dokumentation SELFHTML als auch die zahlreichen Angebote des erweiterten Angebots von SELFHTML aktuell.
Wichtige Seiten und Bereiche im erweiterten Angebot von SELFHTML aktuell sind:

Online-Seite SELFHTML-Download zum Offline-Lesen
Online-Seite SELFHTML als Buch für Bildschirmmuffel
Online-Kapitel SELFHTML-Linkverzeichnis mit Links zu anderen Informationsquellen
Online-Kapitel Artikel diverser Autoren zu einzelnen Fachthemen
Online-Seite SELFHTML-Forum zum Diskutieren von Fachthemen und Anderem

Technische Hinweise

Allgemeines

Diese Version von SELFHTML verwendet den HTML-Standard 4.01 zur Darstellung. Bei veralteten oder textbasierten Browsern können in einigen Fällen Anzeigeprobleme auftreten, die meisten Informationen sollten jedoch auch mit solchen Browsern lesbar sein.

Bei der Seite Quickbar, der Seite Suche und bei den Kapitel Kleinen Helferlein wird JavaScript eingesetzt. Diese Teile funktionieren also nur, wenn JavaScript verfügbar und aktiviert ist.

Windows XP SP2

Die Installation des Service Pack 2 für Windows XP führt zu einer Beeinträchtigung der Benutzbarkeit von SELFHTML im Internet Explorer, wenn Sie die Dokumentation von der Festplatte oder von einer CD/DVD aus lesen. Lokale HTML-Seiten, die JavaScript-Elemente enthalten, lösen im Internet Explorer bei jedem Aufruf eine Warnmeldung aus. Wie Sie diese Warnmeldung umgehen können, erläutert der Beitrag Online-Kapitel Tipps und Tricks: Umgehen der Sperrung der lokalen Zone auf Online-Kapitel SELFHTML aktuell.

SELFHTML anpassen

Wenn Sie SELFHTML lokal nutzen und Ihnen einzelne Details des Layouts nicht passen, können Sie das Stylesheet von SELFHTML ändern:

  1. Wechseln Sie dazu auf Betriebssystemebene in das Verzeichnis, in dem Sie SELFHTML abgelegt haben und von da aus in das Unterverzeichnis src. Dort finden Sie unter anderem die beiden Dateien selfhtml.css und selfnosize.css.
  2. Benennen Sie die Datei selfhtml.css um in selfnormal.css.
  3. Benennen Sie die Datei selfnosize.css um in selfhtml.css.
  4. Wählen Sie in Ihrem Browser bei angezeigtem SELFHTML die Reload-Funktion.

Nun wird ein Stylesheet verwendet, in dem keine fixen Angaben zur Schriftgröße enthalten sind. Der Browser zeigt die bei Ihnen eingestellten Normalschriftgrößen an.

Bevor Sie SELFHTML an andere Personen weitergeben oder im Web oder auf Datenträger veröffentlichen, stellen Sie jedoch bitte den Originalzustand wieder her. Benennen Sie dazu Ihre Datei selfhtml.css wieder um in selfnosize.css und selfnormal.css wieder um in selfhtml.css.

Risiken und Nebenwirkungen

Dieses Dokument hat bereits etlichen Lebensläufen eine neue Richtung gegeben. Manche Menschen haben über Nacht ihren bisherigen Job geschmissen und sich ins Abenteuer "Web-Publishing" gestürzt. Sicher war es niemals nur dieses Dokument allein - eine entsprechende innere Bereitschaft war und bleibt stets die Voraussetzung für entscheidende berufliche oder persönliche Veränderungen. Doch die Initialzündung, die das Dokument bei vielen Menschen ausgelöst hat, soll zumindest nicht verschwiegen werden - nicht aus Autoreneitelkeit, sondern als gutgemeinte Warnung. Das Gebiet, auf das Sie sich mit dieser Dokumentation begeben, ist riesig, hat viele verschiedene Facetten und kann süchtig machen. Um darin erfolgreich zu sein, ist jedoch viel Erfahrung erforderlich, die nicht in ein paar Tagen, auch nicht in ein paar Wochen zu haben ist. In den Weiten des "Landesinneren" werden Sie viel Geduld brauchen, und Sie müssen mit Pannen, Raubrittern und Irrwegen rechnen. Als Belohnung dafür können Sie Ihr eigenes Stück Land beackern, neue Menschen kennen lernen und zu einem aktiven "Webber" werden.

nach oben
weiter | Seite Copyright zu SELFHTML
zurück | Seite SELFHTML-Suche
Teil von SELFHTML/Navigationshilfen Teil von Editorial

© 2007 Seite Impressum


SELFHTML: Editorial / Copyright zu SELFHTML

SELFHTML

Copyright zu SELFHTML
Informationsseite

nach unten Urheberrecht / Copyright
nach unten Weitergabe und Wiederveröffentlichung
nach unten Allgemeine Richtlinien für Mirrors
nach unten Veränderung der Dokumentation durch Fremdhoster
nach unten Download einer SELFHTML-Variante speziell für Mirrors
nach unten Vorbehalt
nach unten

Urheberrecht / Copyright

Die Texte von SELFHTML sind durch das Urheberrecht geschützt. Das Verwenden von Texten aus SELFHTML auf eigenen Web-Seiten oder in anderen Medien verletzt das Urheberrecht und wird bei Entdecken zunächst durch die SELFHTML-Redaktion abgemahnt (kostenlos). Sollte das nichts bewirken, wird anwaltlich abgemahnt (kostenpflichtig). Sollte auch das nichts bewirken, werden gerichtliche Schritte eingeleitet. Da SELFHTML auch als Buch erscheint, entstehen im Falle von Textklau außerdem Rechtsansprüche des Buchverlags.

Web-Anwender werden dazu ermutigt, entdeckte Verstöße an die SELFHTML-Redaktion Seite zu melden. Sie helfen dadurch, die Qualität von SELFHTML zu sichern und das Rechtsbewusstsein von Leuten zu schärfen, die meinen, es sei alles erlaubt, wenn man nur wisse, wie "Copy & Paste" funktioniert.

Einzelne Dinge aus SELFHTML dürfen allerdings durchaus kopiert und übernommen werden. Einzelheiten dazu finden Sie auf der Seite Seite Häufig gestellten Fragen zu SELFHTML.

Weitergabe und Wiederveröffentlichung

Das Kopieren und Weitergeben des Dokuments ist erlaubt. Bedingung ist, dass das Dokument stets in vollständiger Form (mit allen Dateien) und in unveränderter Form kopiert und weitergegeben wird. Die Anzahl erlaubter Kopien ist unbegrenzt.

Das Veröffentlichen im Web, in Intranets, in Online-Diensten, Mailboxen oder ähnlichen Medien ist erlaubt. Ebenfalls erlaubt ist das Veröffentlichen auf Datenträgern wie CD-ROMs oder DVDs, auch wenn diese Datenträger kommerziell orientiert sind. Bei kommerziellen Datenträgern besteht jedoch die Einschränkung, dass SELFHTML dort nur Teil einer Sammlung sein darf (z.B. "alles für die eigene Homepage" - mit Software, Dokumentation usw.), nicht jedoch der zentral vertriebene Inhalt. Bei nichtkommerziellen Datenträgern (z.B. Schüler-Distributionen zum Selbstkostenpreis) darf SELFHTML dagegen auch zentraler Datenträgerinhalt sein.

Bedingung bei allen Veröffentlichungen ist, dass das Dokument stets in vollständiger Form (mit allen Dateien) und in unveränderter Form veröffentlicht wird. Nicht erlaubt ist das Einbetten in fremde Framesets oder fremde Seiten. Ebenfalls nicht erlaubt ist das Einfügen von Fremdwerbung in SELFHTML, z.B. Banner-Werbung.

Das Ändern des Dokuments ist generell nicht erlaubt. Das gilt sowohl für den Inhalt als auch für das Dateiformat. Auch das Entfernen unliebsamer Passagen ist nicht erlaubt. Einzige Ausnahme: siehe Seite SELFHTML anpassen. Weitere Ausnahmen wie z.B. Änderungen aufgrund juristischer Probleme sind mit der SELFHTML-Redaktion Seite abzuklären.

Allgemeine Richtlinien für Mirrors

Ein zentrales Merkmal der SELFHTML-Dokumentation ist, dass sie kostenlos kopiert, verteilt und weitergegeben werden darf. Als Folge wurde SELFHTML im Laufe der Zeit von Hunderten auf ihrem Webspace zu verschiedenen Zwecken wiederveröffentlicht. Diese Kopien von SELFHTML werden im folgenden "Mirrors" (zu Deutsch "Spiegel") genannt. Damit sind nicht die Online-Seite Download-Mirrors gemeint, welche die nicht entpackte, offizielle Zip-Datei beherbergen, sondern Websites, die die entpackten HTML-Dateien von SELFHTML enthalten.

Beim Kopieren von SELFHTML auf andere Websites sind einige Praktiken aufgekommen, die der SELFHTML-Redaktion mitunter übel aufstoßen. Laut nach oben Weitergabe und Wiederveröffentlichung ist das Verändern von SELFHTML grundsätzlich nicht gestattet. Insbesondere ist das Einbinden von Werbung ausdrücklich untersagt. Dennoch wird die Redaktion regelmäßig mit Mirror-Betreibern konfrontiert, die SELFHTML als kostenlose Basis für deren kommerzielle Interessen ansehen.

Ein weiteres Problem aus Sicht der Redaktion ist, dass sich immer mehr veraltete SELFHTML-Versionen im Web finden. Denn viele Webmaster, die einmal eine SELFHTML-Kopie veröffentlicht haben, aktualisieren sie nicht, wenn eine neue SELFHTML-Version erscheint. Suchmaschinen-Nutzer werden dadurch auf Mirrors gelenkt, die veraltete oder fehlerhafte Informationen enthalten. Eine Suche nach SELFHTML + Suchbegriff liefert mittlerweile unzählige irrelevante Treffer. Dies konterkariert die Bestrebungen der Redaktion, Irrtümer und Ungenauigkeiten zu beheben und hilfreiche Erweiterungen zu erarbeiten.

Aus diesen und weiteren Gründen steht die SELFHTML-Redaktion Mirrors allgemein kritisch gegenüber und möchte das Verteilen von SELFHTML in dieser Form langfristig nicht mehr unterstützen. Bei zukünftigen SELFHTML-Versionen wird die Erlaubnis für das Fremdhosting wohl nicht mehr gegeben sein – von einigen gerechtfertigten Ausnahmen abgesehen. Wir ersuchen daher um Verständnis für folgende Anliegen:

  • Wir bitten Site-Betreiber, vom Anlegen weiterer öffentlicher SELFHTML-Mirrors abzusehen.
  • So Sie auf Ihrem Webspace bereits einen SELFHTML-Mirror betreiben und dieser nicht unbedingt benötigt wird, ersuchen wir darum, den Mirror zu entfernen und eine Weiterleitung zur offiziellen SELFHTML-Adresse bereichsübergreifendes Kapitel http://de.selfhtml.org/ einzurichten.
  • Sollten Sie trotz der oben angeführten Gründe weiterhin einen Mirror betreiben wollen, aktualisieren Sie diesen bitte möglichst zeitnah auf die jeweils aktuelle Version.

Zur Erklärung: Mirrors der Version 8.1.2 sind weiterhin erlaubt. Allerdings gibt es gewisse nach unten Bedingungen, die an diese Erlaubnis geknüpft sind.

Mit diesen Maßnahmen wollen wir keinesfalls die freie Nutzung und Verbreitung von SELFHTML einschränken. Die Verbreitung der Dokumentation im Zip-Format sowie das Anlegen von Kopien für private und interne Zwecke werden wir immer erlauben und begrüßen. Wir möchten lediglich, dass sich langfristig die SELFHTML-Mirrors im öffentlichen Web reduzieren.

Veränderung der Dokumentation durch Fremdhoster

Ein nachvollziehbarer Grund für Veränderungen an der Dokumentation ist die Einbindung eines rechtlich relevanten Impressum-Verweises durch Fremdhoster. Dies ist unter Einhaltung der im Folgenden beschriebenen Richtlinien erlaubt.

Gewünschtes Verhalten von Fremdhostern:

  • Ein dezenter Verweis auf den Hoster selber. Dezent bedeutet einen Textlink und keine ausufernde Grafik. Idealerweise geschieht dies mit einer der beiden unten vorgeschlagenen SELFHTML-Varianten. Popup-Seite Beispiel
  • Eine Indizierung der gehosteten SELFHTML-Kopie durch Suchmaschinen ist ausdrücklich zu vermeiden. Dies geschieht z.B. mit der Datei bereichsübergreifende Seite robots.txt. In allen Download-Varianten sind Meta-Angaben zur Vermeidung der Indizierung enthalten – diese dürfen keinesfalls entfernt werden.
  • Eine zeitnahe Aktualisierung auf die jeweils neueste Version von SELFHTML.

Ausdrücklich nicht erlaubt sind:

  • Das Einbinden von Fremdwerbung, beispielsweise Google AdSense.
  • Das Einbinden von SELFHTML in ein Frameset.
  • Jegliche Veränderungen am Aussehen von SELFHTML.
  • Jegliche Veränderungen am Inhalt von SELFHTML.

Die Redaktion beabsichtigt keinesfalls, dem grassierenden Abmahnwahn Vorschub zu leisten, sondern ersucht um Verständnis für die Tatsache, dass veraltete oder verunstaltete Spiegelungen nicht im Sinne des Projekts sind und appelliert daher an die Fairness aller Betreiber, sich an die genannten Richtlinien zu halten.

Download einer SELFHTML-Variante speziell für Mirrors

Bei den folgenden Vorlagen handelt es sich um Zip-Dateien, die wie gewohnt alle Dateien der SELFHTML-Dokumentation 8.1.2 enthalten. Darüber hinaus wurde in beiden Vorlagen für alle inhaltstragenden Seiten ein Absatz mit der ID #mirror-impressum eingefügt, der in der Standard-Download-Version von SELFHTML nicht enthalten ist.

<p id="mirror-impressum">gehostet von <a href="http://example.org/">example.org</a></p>

Der Inhalt dieses Absatzes kann auf zwei unterschiedliche Arten an Ihre Bedürfnisse angepasst werden. Beide hier vorgestellten Vorlagen sind im Prinzip gleich, allein die Variante der Anpassung ist für den Fremdhoster entscheidend.

Anpassung mittels Suchen und Ersetzen (SuE)

ZIP-Datei Download der SuE-Variante von SELFHTML

Gute Texteditoren oder andere Programme bieten es an, dateiübergreifend bestimmte Textstücke durch andere zu ersetzen. In obigem Download-Archiv befindet sich innerhalb des Absatzes mit der ID #mirror-impressum dieser Text:

8cd8b420-79e7-11db-9fe1-0800200c9a66

So seltsam der Text auch aussieht, ist er doch in SELFHTML einmalig. Wird dann über alle Dateien von SELFHTML nach dieser Zeichenkette gesucht, kann man genau innerhalb dieses Absatzes HTML-Quellcode einbinden, genauer den dezenten Verweis auf das Impressum.

Anpassung mittels Server Side Includes

ZIP-Datei Download der SSI-Variante von SELFHTML

bereichsübergreifende Seite Server Side Includes bieten eine bequeme Variante, auf Seiten des Servers bestimmte Seitenteile zentral vorzuhalten. In den meisten kommerziellen Webhosting-Angeboten sind diese aktiviert. In obigem Download-Archiv ist eine .htaccess-Datei enthalten, die dem Webserver Apache mitteilt, dass alle *.htm-Dateien von SELFHTML als Server Side Includes behandelt werden sollen.

Options Includes
AddHandler server-parsed .htm

Die Unterstützung von SSI ist also davon abhängig, ob der Hoster es erlaubt, Server Side Includes zu aktiviereren und diese auf *.htm-Dateien anzuwenden. Um dies zu eruieren, kontaktieren Sie bitte Ihren Hoster.

Sollte SSI-Unterstützung vorhanden sein, geschieht die Anpassung des Impressum-Verweises durch das Editieren der Datei mirror-impressum.shtml in obigem Archiv. In der Datei befindlicher HTML-Quellcode wird dann mittels SSI auf allen Seiten von SELFHTML zwischen <p id="mirror-impressum und dem End-Tag </p> eingebunden.

Vorbehalt

Die Redaktion behält sich vor, die Zustimmung zur Wiederveröffentlichung oder Spiegelung im Einzelfall zu widerrufen.

nach oben
weiter | Seite Häufig gestellte Fragen zu SELFHTML
zurück | Seite Wichtige Hinweise zu SELFHTML
Teil von SELFHTML/Navigationshilfen Teil von Editorial

© 2007 Seite Impressum


SELFHTML: Editorial / Häufig gestellte Fragen zu SELFHTML

SELFHTML

Häufig gestellte Fragen zu SELFHTML
Informationsseite

nach unten Darf ich Fachfragen per E-Mail stellen?
nach unten Kann ich bei neuen SELFHTML-Versionen informiert werden?
nach unten Kann ich SELFHTML auch in gedruckter Form haben?
nach unten Gibt es SELFHTML auch auf Englisch (oder in anderen Sprachen)?
nach unten Darf ich Texte aus SELFHTML in meine Homepage einbauen?
nach unten Darf ich Code-Beispiele aus SELFHTML auf meiner Homepage einsetzen?
nach unten Darf ich Grafiken aus SELFHTML auf meiner Homepage einsetzen?
nach unten Darf ich das SELFHTML-Layout für meine Homepage verwenden?
nach unten Darf ich SELFHTML als Lehrmittel im Unterricht benutzen?
nach unten

Darf ich Fachfragen per E-Mail stellen?

Dürfen schon - aber solche E-Mails werden schon seit längerer Zeit nicht mehr beantwortet. Die Anzahl von E-Mails mit Fragen ist leider derartig hoch geworden, dass die Beantwortung allein schon ein Fulltime-Job und mehr wäre. Und SELFHTML ist kein Produkt, das mit irgendeinem Support-Anspruch vertrieben wird - es ist ja selber nur der Versuch, ein wenig Support zu leisten. Es gibt im Internet viele Newsgroups, Foren und Mailing-Listen, in denen Fachfragen rund um die eigene Homepage und um Web-Programmierung gestellt werden können - Anfängerfragen ebenso wie Profi-Fragen. Lesen Sie dazu auch den Abschnitt über Seite Support.

Kann ich bei neuen SELFHTML Versionen informiert werden?

Einen automatischen Update-Service gibt es nicht. Was Sie vor sich haben, ist die SELFHTML-Version 8.1.1. Um zu sehen, ob diese Version noch aktuell ist, rufen Sie im Online-Angebot von SELFHTML die Seite Online-Seite Aktuelle Version, Hinweise zur nächsten Version auf.

Kann ich SELFHTML auch in gedruckter Form haben?

Es gibt eine Buchumsetzung von SELFHTML. Alle Informationen zu dem Buch, zu aktuellen Auflagen, Preisen, Bestellmöglichkeiten usw. finden Sie im Online-Angebot von SELFHTML aktuell auf der Seite:

Online-Seite SELFHTML als Buch

Andere Formen druckbarer Dokumente, also beispielsweise Fassungen des Dokuments für MS Word oder in PDF-Form, werden nicht angeboten. SELFHTML ist so umfangreich, dass ein vollständiger Ausdruck des gesamten Dokuments je nach Druckertyp teuerer wäre als das Buch. Und das Ausdrucken einzelner, intensiv genutzter Seiten ist ja auch in den heute verbreiteten Browsern möglich.

Gibt es SELFHTML auch auf Englisch (oder in anderen Sprachen)?

Es gibt keine vom Autor ausgehende Übersetzungsinitiative. Solche Initiativen müssen von SELFHTML-Fans kommen, die zweisprachig sind und Interesse und Zeit haben, SELFHTML in ihre andere Sprache zu übersetzen. Welche Übersetzungsaktivitäten aktuell sind, darüber berichten wir im Online-Angebot von SELFHTML aktuell auf der Seite:

Online-Seite SELFHTML in anderen Sprachen

Wenn Sie selber Interesse haben, SELFHTML in eine andere Sprache zu übersetzen, dann schreiben Sie an die SELFHTML-Redaktion (siehe Seite Impressum).

Darf ich Texte aus SELFHTML in meine Homepage einbauen?

Wichtig ist zu dem Thema zunächst alles, was im Abschnitt Seite Copyright steht.

Darüber hinaus gelten die Gepflogenheiten der gewachsenen geistigen Kultur. Das bedeutet im Klartext: Das wörtliche Übernehmen von einzelnen Aussagen aus SELFHTML in eigene Texte ist in Form eines Zitats erlaubt. Das Zitat muss die Quelle des Dokuments eindeutig benennen. Für diesen Zweck gibt es im Web die URIs, also die Web-Adressen. Um aus SELFHTML zu zitieren, nennen Sie als Quellenangabe http://de.selfhtml.org - gefolgt vom Pfad der jeweiligen Seite. Angenommen, Sie möchten diese Passage hier notieren, dann sollte das Zitat den URI http://de.selfhtml.org/editorial/selfhtmlfaq.htm enthalten. Wenn Sie bis auf Anker-Ebene genau zitieren möchten, können Sie das ebenfalls tun (z.B. http://de.selfhtml.org/editorial/selfhtmlfaq.htm#selfhtmltexte). Die Anker der Unterabschnitte werden in der Adresszeile des Browsers angezeigt, wenn Sie am Anfang einer Seite auf den Link zum gewünschten Unterabschnitt klicken.

Zitieren ist jedoch nur für die Wiedergabe einzelner, markanter Aussagen gedacht. Nicht erlaubt ist das Kopieren kompletter SELFHTML-Abschnitte oder SELFHTML-Seiten in eigene Seiten in Ermangelung eigener Inhalte, auch nicht, wenn irgendwo versteckt und verschämt der Hinweis auf das Original steht.

Darf ich Code-Beispiele aus SELFHTML auf meiner Homepage einsetzen?

Ja. Alle Code-Beispiele in gelben Kästen und/oder blauer Courier-Schrift dürfen Sie in Ihre eigenen Seiten kopieren und dort ohne Herkunftsangabe für eigene Zwecke verwenden und weiterverarbeiten. Dies ist sogar ausdrücklich erwünscht und unterstützt beim effizienten Erstellen eigener Web-Seiten.

Eine Ausnahme ist es, wenn Sie selber eine Fachdokumentation oder ein Buch zu einem der in SELFHTML behandelten Themen schreiben und ein oder mehrere Beispiele aus SELFHTML in Ihrer eigenen Dokumentation wiederverwenden möchten. In diesem Fall wenden Sie sich bitte an die SELFHTML-Redaktion (siehe Seite Impressum), und schildern Sie Ihr Vorhaben genau. Eine "automatische Erlaubnis" für ein solches Vorhaben besteht nicht.

Darf ich Grafiken aus SELFHTML auf meiner Homepage einsetzen?

Einzelne Grafiken, die in SELFHTML vorkommen, dürfen Sie für eigene Seiten verwenden. Das gilt auch für die kleinen Symbolgrafiken mit Dokumentsymbolen, Pfeilen, Flaggen usw.

Ausnahme ist das SELFHTML-Logo (Datei logo.gif) im src-Verzeichnis. Die Grafik selbst ist zwar nicht geschützt, doch ihre über Jahre hinweg etablierte Logo-Bedeutung für SELFHTML und ihre Bekanntheit im Zusammenhang mit SELFHTML bewirkt, dass bei Verwendung eine Verwechselungsgefahr besteht, die juristisch ungünstig für Sie ist.

Darf ich das SELFHTML-Layout für meine Homepage verwenden?

Nein. Das SELFHTML-Layout kennzeichnet SELFHTML und den SELFHTML-Raum optisch zur Unterscheidung von anderen Web-Angeboten. Es ist das "Corporate Design" von SELFHTML, und deshalb ist es unerwünscht, dieses Layout in einem wiedererkennbaren Sinne für eigene Seiten zu verwenden. Im Kapitel Kapitel Fertige Layouts finden Sie Layoutvorschläge, die Sie für eigene Seiten frei verwenden können. Darunter ist auch eines (Layout Nummer 6), das eine ähnliche Navigation wie SELFHTML besitzt.

Darf ich SELFHTML als Lehrmittel im Unterricht benutzen?

Sie dürfen SELFHTML "as is", also als elektronisches Dokument in seiner Originalfassung gerne im Unterricht einsetzen, egal ob im Informatikunterricht an Schulen oder in kommerziellen Kursen zur beruflichen Weiterbildung. Sie dürfen SELFHTML auch gerne in dieser Form auf CD-ROM an Schüler oder Kursteilnehmer verteilen.

Wenn Sie einzelne Seiten aus SELFHTML ausdrucken und im Unterricht einsetzen, sollte jeder Ausdruck einen Hinweis auf die Originalquelle haben. Es genügt, auf die erste Seite eines Ausdrucks handschriftlich so etwas zu notieren wie "aus SELFHTML (http://de.selfhtml.org/)".

Unerwünscht ist das Kopieren von kompletten Abschnitten aus SELFHTML in eigene Schulungsunterlagen. Dies verstößt gegen den urheberrechtlichen Schutz von SELFHTML.

nach oben
weiter | Seite Hinweise zum Arbeiten mit SELFHTML
zurück | Seite Copyright zu SELFHTML
Teil von SELFHTML/Navigationshilfen Teil von Editorial

© 2007 Seite Impressum


SELFHTML: Editorial / Hinweise zum Arbeiten mit SELFHTML

SELFHTML

Hinweise zum Arbeiten mit SELFHTML
Informationsseite

nach unten Verwendete Symbole
nach unten Tipps und Tricks zum Arbeiten mit SELFHTML
nach unten

Verwendete Symbole

Die folgenden Symbole werden in SELFHTML verwendet.

Symbol | Bedeutung
Kapitel | Geschlossener kleiner Ordner - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zur Übersichtsseite eines größeren Abschnitts innerhalb von SELFHTML.
Teil von | Geöffneter kleiner Ordner - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einem übergeordneten Bereich von SELFHTML. Verweise dieser Art finden Sie in der Kopf- und Fußleiste auf den einzelnen Seiten. Mehrere übergeordnete Ebenen werden von links an eingerückt dargestellt.
Kapitelseite | Geschlossener großer Ordner - Dieses Symbol kommt im hellgrauen Kopfbereich von Seiten vor und bedeutet: die aktuelle Seite ist eine Kapitelübersichtsseite. Die Seite enthält selbst keine besonderen Informationen, sondern lediglich Verweise zu untergeordneten Seiten, in denen die eigentlichen Informationen enthalten sind.
Seite | Kleines Seitensymbol. Datei oder Textstelle innerhalb des Dokuments - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Stelle mit konkreter Information. Das Symbol wird auch bei Querverweisen verwendet.
Beispiel-Seite | Kleines Seitensymbol für Beispiel-Seiten, z.B. Seiten mit Anzeigebeispielen oder Quellenhinweisen. Wenn Sie den daneben stehenden Verweis anklicken, wird die entsprechende Seite geladen.
Informationsseite | Großes Seitensymbol - Dieses Symbol kommt im hellgrauen Kopfbereich von Seiten vor und bedeutet: die aktuelle Seite ist eine informationstragende Seite.
nach unten | Pfeilsymbol für eine Textstelle auf der gleichen Seite weiter unten - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Stelle innerhalb der gleichen Datei weiter unten. In hellgrauen Balken ohne nebenstehenden Verweis: anklicken, um zum Seitenende zu springen.
nach oben | Pfeilsymbol für eine Textstelle auf der gleichen Seite weiter oben - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Stelle innerhalb der gleichen Datei weiter oben. In hellgrauen Balken ohne nebenstehenden Verweis: anklicken, um zum Seitenanfang zu springen.
zurück | Pfeilsymbol für die vorhergehende Seite. Steht am Ende von Informationsseiten und bedeutet: zur vorhergehenden Seite blättern.
weiter | Pfeilsymbol für die nächste Seite. Steht am Ende von Informationsseiten und bedeutet: zur nächsten Seite blättern.
E-Mail | Symbol für E-Mail. Wenn Sie den daneben stehenden Verweis anklicken, können Sie eine E-Mail an die betreffende Person absetzen.
Online-Kapitel | Geschlossener kleiner Ordner; hautfarben - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Übersichtsseite eines größeren Abschnitts im Online-Angebot von SELFHTML aktuell oder im Online-Angebot eines Partnerprojekts von SELFHTML. Das Verweisziel hat das gleiche Layout wie die Seiten von SELFHTML. Um solche Verweise ausführen zu können, ist eine Internet-Verbindung erforderlich.
Online-Seite | Geschlossenes kleines Seitensymbol; hautfarben - wenn Sie den daneben stehenden Verweis anklicken, gelangen Sie zu einer Informationsseite im Online-Angebot von SELFHTML aktuell oder im Online-Angebot eines Partnerprojekts von SELFHTML. Das Verweisziel hat das gleiche Layout wie die Seiten von SELFHTML. Um solche Verweise ausführen zu können, ist eine Internet-Verbindung erforderlich.
deutschsprachige Seite | Symbol für deutschsprachige Seite. Steht vor Verweisen zu externen, deutschsprachigen Web-Angeboten (wird also als Sprachensymbol verwendet, nicht als Ländersymbol).
englischsprachige Seite | Symbol für englischsprachige Seite. Steht vor Verweisen zu externen, englischsprachigen Web-Angeboten (wird also als Sprachensymbol verwendet, nicht als Ländersymbol).
französischsprachige Seite | Symbol für französischsprachige Seite. Steht vor Verweisen zu externen, französischsprachigen Web-Angeboten (wird also als Sprachensymbol verwendet, nicht als Ländersymbol).
HTML 2.0 | Symbol für HTML 2.0. Bedeutet, dass das beschriebene Feature seit der Version 2.0 zum HTML-Standard gehört.
HTML 3.2 | Symbol für HTML 3.2. Bedeutet, dass das beschriebene Feature seit der Version 3.2 zum HTML-Standard gehört.
HTML 4.0 | Symbol für HTML 4.0. Bedeutet, dass das beschriebene Feature seit der Version 4.0 zum HTML-Standard gehört.
XHTML 1.0 | Symbol für XHTML 1.0. Bedeutet, dass das beschriebene Feature zur Version 1.0 des XHTML-Standard gehört.
deprecated (missbilligt) | Symbol für deprecated (missbilligt). Bedeutet, dass das beschriebene Feature noch zum HTML-Standard gehört, in Zukunft jedoch entfallen soll. In der Regel gibt es andere HTML-Elemente oder andere Ergänzungssprachen wie Stylesheets, durch die das entsprechende Feature in Zukunft realisiert werden soll.
CSS 1.0 | Symbol für CSS1. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum CSS-Standard gehört.
CSS 2.0 | Symbol für CSS2. Bedeutet, dass das beschriebene Feature seit der Version 2.0 zum CSS-Standard gehört.
XML 1.0 | Symbol für XML 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum XML-Standard gehört.
XSLT 1.0 | Symbol für XSLT 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum XSLT-Standard gehört.
XPath 1.0 | Symbol für XPath 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum XPath-Standard gehört.
DOM 1.0 | Symbol für DOM 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 zum DOM-Standard (Document Object Model) gehört.
DOM 2.0 | Symbol für DOM 2.0. Bedeutet, dass das beschriebene Feature seit der Version 2.0 zum DOM-Standard (Document Object Model) gehört.
JavaScript 1.0 | Symbol für JavaScript 1.0. Bedeutet, dass das beschriebene Feature seit der Version 1.0 von JavaScript verfügbar ist.
JavaScript 1.1 | Symbol für JavaScript 1.1. Bedeutet, dass das beschriebene Feature seit der Version 1.1 von JavaScript verfügbar ist.
JavaScript 1.2 | Symbol für JavaScript 1.2. Bedeutet, dass das beschriebene Feature seit der Version 1.2 von JavaScript verfügbar ist.
JavaScript 1.3 | Symbol für JavaScript 1.3. Bedeutet, dass das beschriebene Feature seit der Version 1.3 von JavaScript verfügbar ist.
JavaScript 1.5 | Symbol für JavaScript 1.5. Bedeutet, dass das beschriebene Feature seit der Version 1.5 von JavaScript verfügbar ist.
MS JScript | Symbol für JScript, der Microsoft-eigenen Implementierung von JavaScript. Bedeutet in der Regel, dass das beschriebene Feature nur im Internet Explorer verfügbar ist.
MS IE 1.0 | Symbol für Internet Explorer 1.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
MS IE 2.0 | Symbol für Internet Explorer 2.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
MS IE 3.0 | Symbol für Internet Explorer 3.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
MS IE 4.0 | Symbol für Internet Explorer 4.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
MS IE 5.0 | Symbol für Internet Explorer 5.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
MS IE 5.5 | Symbol für Internet Explorer 5.5. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
MS IE 6 | Symbol für Internet Explorer 6.0. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird. Das Symbol gilt auch für nach unten Netscape 8.
MS IE 7 | Symbol für Internet Explorer 7. Bedeutet, dass das beschriebene Feature von dem Microsoft-Browser seit dieser Produktversion unterstützt wird.
Netscape 1.0 | Symbol für Netscape 1.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Netscape 1.1 | Symbol für Netscape 1.1. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Netscape 2.0 | Symbol für Netscape 2.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Netscape 3.0 | Symbol für Netscape 3.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Netscape 4.0 | Symbol für Netscape 4.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Netscape 4.x | Symbol für Netscape 4.01, 4.5, 4.6, 4.7 usw. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit einer dieser Produktzwischenversionen unterstützt wird.
Netscape 6.0 | Symbol für Netscape 6.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Netscape 6.1 | Symbol für Netscape 6.1. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Netscape 6.2 | Symbol für Netscape 6.2. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
Netscape 7.0 | Symbol für Netscape 7.0. Bedeutet, dass das beschriebene Feature von dem Netscape-Browser seit dieser Produktversion unterstützt wird.
 | Mit Netscape 8 wurden keine Tests durchgeführt, da diese Version die Möglichkeit bietet, die Rendering-Engine (Komponente zur Darstellung von Webseiten) von Firefox oder Internet Explorer einzusetzen. Deren Symbole gelten somit je nach Einstellung des Browsers auch für Netscape 8.
Opera 5.12 | Symbol für Opera 5.12. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird. Ältere Versionen wurden bei Tests nicht berücksichtigt.
Opera 6 | Symbol für Opera 6. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Opera 7 | Symbol für Opera 7. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Opera 7.10 | Symbol für Opera 7.10. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Opera 7.20 | Symbol für Opera 7.20. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Opera 7.50 | Symbol für Opera 7.50. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Opera 7.60 | Symbol für Opera 7.60. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Opera 8 | Symbol für Opera 8. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Opera 9 | Symbol für Opera 9. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Opera 9.10 | Symbol für Opera 9.10. Bedeutet, dass das beschriebene Feature seit dieser Produktversion unterstützt wird.
Mozilla Firefox 1 | Symbol für Mozilla Firefox 1. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird. Ältere bzw. Mozilla-Versionen wurden bei Tests nicht berücksichtigt. Das Symbol gilt auch für nach oben Netscape 8..
Mozilla Firefox 1.5 | Symbol für Mozilla Firefox 1.5. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Mozilla Firefox 2 | Symbol für Mozilla Firefox 2. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Safari 1.0 | Symbol für Safari 1.0. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird. Ältere Versionen wurden bei Tests nicht berücksichtigt.
Safari 1.1 | Symbol für Safari 1.1. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Safari 1.2 | Symbol für Safari 1.2. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Safari 1.3 | Symbol für Safari 1.3. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Safari 2.0 | Symbol für Safari 2.0.x. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Safari WebKit (Entwicklerversion) | Symbol für Safari WebKit (Entwicklerversion). Bedeutet, dass das beschriebene Feature in der nächsten offiziellen Produktversion unterstützt werden wird.
Konqueror 3.1 | Symbol für Konqueror 3.1. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird. Ältere Versionen wurden bei Tests nicht berücksichtigt.
Konqueror 3.2 | Symbol für Konqueror 3.2. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Konqueror 3.3 | Symbol für Konqueror 3.3. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.
Konqueror 3.4 | Symbol für Konqueror 3.4. Bedeutet, dass das beschriebene Feature spätestens seit dieser Produktversion unterstützt wird.

Tipps und Tricks zum Arbeiten mit SELFHTML

Die folgenden Hinweise sollen Ihnen helfen, SELFHTML optimal zu nutzen.

  • Falls Sie das Dokument gerade online lesen und für Ihre Online-Verbindung Zeit- oder Volumengebühren zahlen: laden Sie sich das Dokument besser auf Ihren Rechner. Sie können dieses Dokument herunterladen (siehe Seite SELFHTML im Web). So können Sie das Dokument ohne Stress lesen.
  • Kopieren Sie sich Beispiele zu Quelltexten, die Sie verwenden wollen, einfach über die Datenaustausch-Schnittstelle (Zwischenablage) Ihres Rechners direkt aus diesem Dokument in Ihren Editor. Dann brauchen Sie den Code nur noch anzupassen und vermeiden entscheidende Tippfehler. Dies gilt jedoch nur, wenn Sie code-basiert, also mit einem Texteditor oder einem textorientierten HTML-Editor arbeiten, nicht bei Verwendung eines grafischen WYSIWYG-Editors.
  • Machen Sie sich mit den verschiedenen Kapitel Navigationshilfen vertraut, um schneller mit SELFHTML arbeiten zu können und schneller an gewünschte Information heranzukommen.
nach oben
weiter | Seite Fehler in SELFHTML melden
zurück | Seite Häufig gestellte Fragen zu SELFHTML
Teil von SELFHTML/Navigationshilfen Teil von Editorial

© 2007 Seite Impressum


SELFHTML: Editorial / Fehler in SELFHTML melden

SELFHTML

Fehler in SELFHTML melden
Informationsseite

nach unten Fehler sind menschlich
nach unten Formular für Fehlermeldungen
nach unten

Fehler sind menschlich

SELFHTML besteht aus mehr als 1.500 Buchseiten. Bei solchen Datenmassen ist es ganz normal, dass viele kleine, zum Teil versteckte Fehler im Text oder in Beispielen enthalten sind. Die SELFHTML-Redaktion hat sich bemüht, so viele wie möglich aus dem Weg zu räumen. Aber absolute Fehlerfreiheit ist bei einem Projekt dieses Umfangs leider nicht im Bereich des Menschenmöglichen.

Doch Fehler kann man korrigieren. Damit alle Korrekturen eine einheitliche Form haben, die das Bearbeiten erleichtert, werden Meldungen zu Fehlern in SELFHTML über das Formular auf dieser Seite abgewickelt. Gemeldete Fehler werden gesammelt und Korrekturen in kommende SELFHTML-Versionen eingearbeitet.

Formular für Fehlermeldungen

Dieses Formular ist nicht für allgemeine Anfragen und Verbesserungsvorschläge gedacht. Bitte benutzen Sie dafür den Seite Kontakt-Assistenten.

Zum Absenden des Formulars ist eine Verbindung ins Internet erforderlich. Die Daten werden in einer öffentlich zugänglichen Datenbank auf Online-Seite bugs.selfhtml.org gespeichert. Dort können Sie die Bearbeitung der Fehlermeldung verfolgen und um doppelte Meldungen zu vermeiden Online-Seite bereits gemeldete Fehler durchstöbern.

Name und E-Mail-Adresse werden für eventuelle Rückfragen benötigt. In der Regel bekommen Sie keine Antwort der Redaktion, wenn der gemeldete Fehler behoben ist. Bitte beachten Sie, dass diese Kontaktdaten ebenfalls öffentlich zugänglich sein werden. Sie müssen Name und E-Mail-Adresse daher nicht angeben.

Mit * gekennzeichnete Felder müssen ausgefüllt werden.
Absende-Button:

Sie müssen online sein, um das Formular abschicken zu können.

Vielen Dank für Ihre Unterstützung!

nach oben
weiter | Seite Unterstützung für SELFHTML
zurück | Seite Hinweise zum Arbeiten mit SELFHTML
Teil von SELFHTML/Navigationshilfen Teil von Editorial

© 2007 Seite Impressum


SELFHTML: Editorial / Unterstützung für SELFHTML

SELFHTML

Unterstützung für SELFHTML
Informationsseite

nach unten Wann Sie SELFHTML unterstützen sollten
nach unten Privat spenden
nach unten Buch kaufen
nach unten Inhalte beitragen
nach unten SELFHTML verlinken
nach unten

Wann Sie SELFHTML unterstützen sollten

Arbeiten Sie ohne schlechtes Gewissen mit dem Dokument. Obwohl es das Fachwissen mehrerer teuerer Fachbücher enthält, können Sie es frei und kostenlos benutzen. Denn SELFHTML versteht sich selber primär als "technisches Aufklärungswerk" und nicht als Verkaufsschlager.

Dennoch gibt es gute Gründe, SELFHTML zu unterstützen. Je umfangreicher die Dokumentation und das Web-Angebot von SELFHTML werden, desto mehr redaktionelle und technische Power ist für die Pflege erforderlich. Das fängt an bei einem guten Server-Rechner und endet bei den Unmengen von Zeit, die für die Pflege der Dokumentation und des Web-Angebots investiert werden müssen.

Es gibt verschiedene Möglichkeiten, wie Sie SELFHTML unterstützen können. Nachfolgend werden die einzelnen Möglichkeiten beschrieben.

Privat spenden

Diese Möglichkeit ist geeignet, wenn Sie einfach einen Betrag Ihrer Wahl als Dank für das Projekt spenden möchten.

Ihre Spende geht an das Vereinskonto des SELFHTML e.V. - einer der beiden Vorsitzenden des Vereins ist der frühere SELFHTML-Alleinautor Stefan Münz. Der Verein setzt sich für die Belange von SELFHTML ein (Details finden Sie auf der Seite Online-Seite Häufig gestellte Fragen zum SELFHTML e.V.).

Die Bankverbindungsdaten für Spendenüberweisungen lauten:

Empfänger: Swen Wacker
Kontonummer: 2541180602
Bank: SEB Kiel
Bankleitzahl: 21010111

IBAN: DE78210101112541180602
IBAN postalisch: IBAN DE78 2101 0111 2541 1806 02
BIC ("SWIFT-Code"): ESSEDE5F210

Buch kaufen

SELFHTML erscheint auch als Buch. Durch den Kauf des Buches unterstützen Sie Stefan Münz und die SELFHTML-Redaktion. Alle weiteren Informationen zu diesem Thema - also aktuelle Ausgaben, Preise und Bestellmöglichkeiten - finden Sie im Online-Angebot von SELFHTML aktuell auf der Seite Online-Seite SELFHTML als Buch.

Inhalte beitragen

Sie können SELFHTML auch ohne finanzielle Mittel unterstützen - wenn Sie über spezielles und hohes Fachwissen verfügen. In diesem Fall können Sie zur größeren Attraktivität des Online-Angebots von Online-Seite SELFHTML aktuell beitragen, indem Sie einen oder mehrere Artikel schreiben. Interessant ist diese Möglichkeit der Unterstützung besonders für Web-Profis, die aufgrund ihrer beruflichen Tätigkeit zu speziellen Aspekten des Web-Designs, der Web-Programmierung oder des Web-Projektmanagements tiefere Kenntnisse oder umfangreiche Erfahrungen gesammelt haben. Geben Sie Ihr Wissen in Form von Artikeln weiter! Sie selbst profitieren wiederum davon, dass diese Artikel von vielen Leuten gelesen werden, was Ihnen Anerkennung und neue, interessante Kontakte verschaffen kann.

Alle weiteren Einzelheiten erfahren Sie auf der Seite Online-Seite Haben Sie einen Beitrag? bei den Artikeln im Online-Angebot von SELFHTML aktuell.

SELFHTML verlinken

Last but not least ist es ausdrücklich erlaubt und erwünscht, SELFHTML von Ihren Seiten aus zu verlinken. Setzen Sie einen Link auf http://www.selfhtml.org/, http://de.selfhtml.org/ oder eine beliebige andere selfhtml.org-Seite, um das Projekt zu unterstützen. Deep-Links (Verweise auf Unterseiten) sind selbstverständlich ebenfalls gestattet.

nach oben
weiter | Seite Impressum zu SELFHTML
zurück | Seite Fehler in SELFHTML melden
Teil von SELFHTML/Navigationshilfen Teil von Editorial

© 2007 Seite Impressum


SELFHTML: Editorial / Impressum zu SELFHTML

SELFHTML

Impressum zu SELFHTML
Informationsseite

nach unten Impressum
nach unten Kontakt
nach unten Die SELFHTML-Redaktion
nach unten

Impressum

SELFHTML wird durch den Verein Online-Kapitel SELFHTML e.V. vertreten. Die Postanschrift des Vereins und damit des Projekts SELFHTML lautet:

SELFHTML e.V.
c/o Swen Wacker
Martenshofweg 102
D-24109 Kiel

Diese Adresse ist jedoch nur für Schriftverkehr gedacht, der nicht anders als auf postalischem Weg abgewickelt werden kann.

Kontakt

Über das Internet können Sie mit dem nachfolgenden Assistenten Kontakt mit uns aufnehmen.

Bitte geben Sie im zunächst die Art der Anfrage an, um zum richtigen Formular zu gelangen:

  • Fachfrage zur Webseiten-Erstellung

    Ich habe eine Frage zum Webdesign.
    Ich habe ein Problem beim Erstellen meiner Homepage und suche Hilfe.
    Ich habe eine Frage zu HTML, CSS, JavaScript, PHP oder anderen Webtechniken.
    Ich brauche Meinungen zu meiner Webseite.
    oder ähnliches

  • Feedback zur SELFHTML-Dokumentation

    Ich möchte Verbesserungsvorschläge zur SELFHTML-Dokumentation geben.
    Ich möchte die Redaktion bei ihrer Arbeit untersttzen.
    Ich habe eine allgemeine Frage die SELFHTML-Dokumentation betreffend.
    oder ähnliches

  • Fehler in SELFHTML melden

    Ich habe einen Fehler in SELFHTML gefunden und möchte ihn melden.

  • Danksagung oder Grüße

    Ich möchte einfach nur Danke sagen.

Die SELFHTML-Redaktion

Die aktuell vorliegende Ausgabe basiert auf Online-Seite SELFHTML 8.0 von Stefan Münz und wird seit 2004 von einer Redaktion weiterentwickelt. Die SELFHTML-Redaktion besteht aus Mitarbeitern, die über die SELFHTML-Community miteinander bekannt wurden und über hohe Fachkenntnisse und redaktionelle Erfahrung verfügen. Es handelt sich teilweise um Mitglieder der Online-Seite SELFHTML-Developer. Die SELFHTML-Developer betreuen das Umfeld von SELFHTML, z.B. den Server-Betrieb, die Entwicklung von CGI-/Datenbanklösungen und eben auch redaktionelle und organisatorische Aufgaben wie Qualitätssicherung und Kontakte mit Anwendern.

Nachfolgende Redaktionsmitglieder haben an SELFHTML seit Version 8.1 mitgewirkt:

Redakteur | Mitarbeit vorwiegend im Bereich
deutschsprachige Seite Götz Bürkle | XML/DTDs
deutschsprachige Seite Patrick Canterino | Perl, Fehlerkorrekturen
deutschsprachige Seite Oliver García | Suche
Detlef Graff | Fehlerkorrekturen
deutschsprachige Seite Christian Kruse | Technische Betreuung des Redaktionsteams
deutschsprachige Seite Matti Mäkitalo | Perl, Webserver/CGI
Online-Seite Stefan Münz | Editorial, Allgemeines
deutschsprachige Seite Henryk Plötz | Einführung, Fehlerkorrekturen
Sven Rautenberg | Fehlerkorrekturen
deutschsprachige Seite Mathias Schäfer | JavaScript/DOM, Dynamisches HTML
deutschsprachige Seite Jonathan Schlegel | Browsertests
deutschsprachige Seite Christoph Schnauß | Perl, Webserver/CGI
deutschsprachige Seite Thomas J. Sebestyen | XML/DTDs
Christian Seiler | Technische Betreuung des Redaktionsteams
deutschsprachige Seite Roland Skop | HTML/XHTML, CSS
Joachim Strübig | JavaScript/DOM, Dynamisches HTML
deutschsprachige Seite Ingo Turski | HTML/XHTML, CSS, CSS-basierte Layouts
deutschsprachige Seite Tim Tepaße | Fehlerkorrekturen, Browsertests

nach oben
weiter | Seite SELFHTML sagt "Danke"
zurück | Seite Unterstützung für SELFHTML
Teil von SELFHTML/Navigationshilfen Teil von Editorial

© 2007 Seite Impressum


SELFHTML: Editorial / SELFHTML sagt "Danke"

SELFHTML

SELFHTML sagt "Danke"
Informationsseite

nach unten der SELFHTML-Community
nach unten den Übersetzern
nach unten den treuen Benutzern
nach unten

der SELFHTML-Community

Die Online-Seite SELFHTML-Community, das ist die Gemeinschaft aller, die sich regelmäßig in Foren und Chats rund um SELFHTML herumtreiben und auch vor Live-Treffen nicht zurückschrecken. Damit geben sie dem SELF-Raum sein Gepräge und verleihen ihm erst richtig Leben. Danke an all diese Wissens- und Lebensspender.

den Übersetzern

Danke vor allem an französische Seite Serge François für die französische Seite französische Übersetzung von SELFHTML, aber auch an die Übersetzer von unfertigen Versionen (spanisch, japanisch, englisch). Eine Übersicht über den Stand der Dinge finden Sie auf der Seite Online-Seite SELFHTML in anderen Sprachen.

den treuen Benutzern

Danke an alle, die SELFHTML benutzt, weiterempfohlen oder im Unterricht eingesetzt haben. Danke vor allem auch noch einmal an jene, die SELFHTML im Kampf gegen den Abmahnwahn durch Spenden oder Know-How unterstützt haben (siehe auch Online-Seite Recht und Links), an jene, die durch ihre Spende dazu beigetragen haben, dass SELFHTML sich eine den Erfordernissen des Projekts gerecht werdende Online-Seite Server-Hardware zulegen konnte, sowie an die vielen Menschen, die sich für SELFHTML engagiert haben (siehe Online-Seite SELFHTML bedankt sich ...).

nach oben
weiter | Seite Entstehung des Internet
zurück | Seite Impressum zu SELFHTML
Teil von SELFHTML/Navigationshilfen Teil von Editorial

© 2007 Seite Impressum


SELFHTML: Einführung

SELFHTML

Einführung
Kapitelseite

Dieser Abschnitt vermittelt einführendes Wissen rund ums Internet, das World Wide Web (WWW), sowie zu HTML und seinen Ergänzungen. Außerdem finden Sie hier Hinweise zu wichtigen Originalquellen und Software-Produkten zum Web-Publishing.
Der Abschnitt besteht aus folgenden Unterabschnitten:

Kapitel Internet und WWW
Kapitel Web-Technologien
Kapitel Schnittstellen
Kapitel Hilfsmittel
Kapitel Hypertext

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie Links zu anderen Quellen im Web, die für Einsteiger geeignet sind. Folgende Inhalte kommen in Frage:

Online-Seite WWW-Links: Einsteiger/Anfänger

nach oben

© 2007 Seite Impressum


SELFHTML: Einführung / Internet und WWW

SELFHTML

Internet und WWW
Kapitelseite

Dieser Abschnitt beschreibt, wie das Internet entstand, woraus es besteht, und welche Rolle das World Wide Web darin spielt.
Der Abschnitt besteht aus folgenden Seiten:

Seite Entstehung des Internet
Seite Basis-Standards im Internet
Seite Dienste im Internet
Seite Entstehung des World Wide Web

nach oben

© 2007 Seite Impressum


SELFHTML: Einführung / Internet und WWW / Entstehung des Internet

SELFHTML

Entstehung des Internet
Informationsseite

nach unten Das ARPA-Net
nach unten Wissenschaftliche Einrichtungen
nach unten Das Netz der Netze
nach unten

Das ARPA-Net

Die Ursprünge des heutigen Internet reichen in die 60er Jahre zurück. Es war die Zeit des Kalten Krieges zwischen den beiden Weltmächten USA und UdSSR. Neue Impulse in der Elektronischen Datenverarbeitung (EDV) kamen in jener Zeit hauptsächlich durch militärische Initiativen zustande. Mittlerweile gibt es im Internet Proteste gegen die Auffassung, militärische Interessen hätten das Internet geboren. Das ist insofern berechtigt, als es keine unmittelbare Ursachen-Wirkungs-Verhältnisse gibt. Doch die technologischen Ideen und Entwicklungen der Vorläufernetze kamen definitiv aus dem militärnahen Umfeld in den USA, und es ist deshalb auch nicht verkehrt, das so darzustellen.

Im Department of Defense, dem amerikanischen Verteidigungsministerium, wurde seit den frühen 60er Jahren überlegt, wie man wichtige militärische Daten besser schützen könnte. Selbst bei einem atomaren Angriff des Gegners sollten die Daten nicht zerstört werden können. Als Lösung kam nur ein elektronisches Datennetz in Frage. Die gleichen Daten sollten dabei auf mehreren, weit entfernten Rechnern abgelegt werden. Bei neuen oder geänderten Daten sollten sich alle angeschlossenen Rechner binnen kürzester Zeit den aktuellen Datenstand zusenden. Jeder Rechner sollte dabei über mehrere Wege mit jedem anderen Rechner kommunizieren können. So würde das Netz auch dann funktionieren, wenn ein einzelner Rechner oder eine bestimmte Leitung durch einen Angriff zerstört würde. So gab die US Air Force 1964 bei der RAND Corporation das so genannte "dezentrale Netzwerk" in Auftrag. Bei dem, was da entwickelt werden sollte, handelt es sich noch nicht um den direkten Vorläufer des heutigen Internet. Nach vielem Hin und Her scheiterte dieses Projekt auch und wurde nie realisiert. Die Idee des "dezentralen Netzwerks" mit der paketweisen Datenübertragung blieb jedoch in den Köpfen hängen.

Die Advanced Research Projects Agency (ARPA), eine seit 1958 bestehende wissenschaftliche Einrichtung, deren Forschungsergebnisse in militärische Zwecke einflossen, entschloss sich 1966 zur Vernetzung der ARPA-eigenen Großrechner. Dabei wurde die Idee des "dezentralen Netzwerks" wieder aufgegriffen. Ende 1969 waren die ersten vier Rechner an das ARPA-Net angeschlossen. Drei Jahre später waren es bereits 40 Rechner. In dieser Zeit war es jedoch das ARPA-eigene Netz. In den ersten Jahren wurde das Netz deshalb auch ARPA-Net genannt. Aus ihm sollte später das Internet entwachsen.

Die Geschichte des Internet beginnt also in der Zeit der ersten Mondlandung und in jener Zeit, als die Hippies das Zeitalter des Wassermanns heraufziehen sahen.

Informationen zum ARPA-Net im WWW:

englischsprachige Seite Defense Advanced Research Projects Agency (DARPA)

Wissenschaftliche Einrichtungen

Das Prinzip der vernetzten Rechner war aber nicht nur für militärische Zwecke interessant. Man erkannte schnell, dass auch der akademische Betrieb vom ARPA-Net profitieren würde. Für Wissenschaftler war allerdings weniger das Synchronisieren von gleichen Daten auf mehreren Rechnern interessant, sondern eher die Möglichkeit, Daten von einem anderen Rechner abzurufen. Wegen der offenen Architektur des ARPA-Net stand einer solchen Verwendung nichts im Wege. Wissenschaftler konnten von den frühen 70er Jahren an Forschungsergebnisse anderer Institute über das ARPA-Net abrufen oder anderen angeschlossenen Instituten eigene Daten zur Verfügung stellen.

Die Anzahl der angeschlossenen Rechner stieg an. Es handelte sich um sehr unterschiedliche Rechnertypen mit nicht kompatiblen Betriebssystemen und unterschiedlichem Netzzugang. Großrechner verschiedener Fabrikate, Unix-Rechner und später auch Personal Computer drängten ins Netz. Einige hatten eine Standleitung, also eine ständige Internet-Verbindung, andere wählten sich über Telefon und Modem ein. Um die unterschiedlichen Voraussetzungen unter einen Hut zu bringen, entstand die Notwendigkeit, ein neues Datenübertragungsprotokoll für das Netz zu entwickeln. Das Protokoll sollte nicht an bestimmte Computersysteme, Übertragungswege oder Übertragungsgeschwindigkeiten gebunden sein. Aus den Bemühungen um ein solches Protokoll ging schließlich das TCP/IP-Protokoll hervor. Datenübertragungen im ARPA-Net liefen nach Einführung von TCP/IP nach einem einheitlichen und standardisierten Schema ab.

Zu den wissenschaftlichen Einrichtungen gehörten natürlich auch Studenten. Die entdeckten das Netz auf ihre Weise. Eine Art "black board" war ihr Wunsch, ein Nachrichtenbrett wie in Universitäten üblich, für Mitfahrgelegenheiten, Jobs, Wohnmöglichkeiten, Reisepartner oder die Möglichkeit, einfach nur zu diskutieren und zu labern. So entstand das Usenet, die Hauptader der heutigen Newsgroups. Viele eingefleischte "Internetter" halten die Newsgroups auch heute noch für den spannendsten und lebendigsten Teil des Internet.

Das Netz der Netze

Der Anschluss der akademischen Welt ans Netz erforderte eine Trennung zwischen militärischem und zivilem Teil, da die Militärs ihre eigenen Interessen wahren wollten. So kam es, dass Anfang der 80er Jahre ein neues militärisches Datennetz, das Milnet, vom ARPA-Net abgekoppelt wurde. Das ARPA-Net selbst wurde dem wissenschaftlichen Betrieb überlassen.

In diesem zivilen Teil des Netzes nahm die Anzahl der angeschlossenen Rechner im Laufe der 80er Jahre sprunghaft zu. Eine wichtige Rolle spielte dabei die amerikanische National Science Foundation (NSF). Diese Organisation schaffte ein Leitungs-Verbundsystem, das alle bedeutenden wissenschaftlichen Rechenzentren des Landes miteinander verband. Einzelne Universitätsrechner oder kleinere Rechnernetze konnten sich mit einem Rechenzentrum verbinden und darüber in andere Netze gelangen. So entstand buchstäblich ein Netz der Netze. Alsbald bürgerte sich denn auch der Name "Internet" dafür ein. Die Bezeichnung "ARPA-Net" wurde Ende der 80er Jahre verworfen. Das Leitungs-Verbundsystem, über das die kleineren Einzelnetze zu einem Gesamtnetz wurden, erhielt die treffende Bezeichnung Backbone (Rückgrat).

In Europa gab es zeitgleich ähnliche Entwicklungen. Auf dem alten Kontinent setzte man jedoch zunächst auf ISO-Normen. Von dem amerikanischen TCP/IP-Modell, das nicht ISO-normiert war, wollte man deshalb nichts wissen. 1986 wurde die Organisation RARE (Réseaux Associés pour la Recherche Européenne) gegründet. Diese Organisation sollte alle Initiativen zur systemübergreifenden Rechnervernetzung europaweit koordinieren. RARE rief dazu ein Projekt namens COSINE (Cooperation for an Open Systems Interconnection Networking in Europe) ins Leben.

Der Siegeszug des TCP/IP-Protokolls war jedoch nicht mehr aufzuhalten. Unter dem Druck des Erfolgs in Amerika entstand schließlich ein europäisches Datennetz, das multiprotokollfähig war und unter anderem TCP/IP unterstützte. Dieses Netz lief zunächst unter der Bezeichnung EuropaNET. Verschiedene nationale wissenschaftliche Netzwerke, etwa das Deutsche Forschungsnetz (DFN), wurden daran angeschlossen.

Mittlerweile sorgt eine transatlantische Leitung für die Anbindung Europas an den Backbone in den USA. Die Koordination des Internet-Verkehrs innerhalb Europas wurde der Organisation RIPE (Réseaux IP Européens) übertragen. Auch in Europa gibt es seit 1992 ein Leitungs-Verbundsystem: dieses System nennt sich Ebone (Europäischer Internet-Backbone) (welches aufgrund der Pleite des neuen Besitzers im Jahre 2002 den Betrieb einstellen musste). Auf anderen Kontinenten gab und gibt es vergleichbare Entwicklungen.

Was wir also heute unter "Internet" verstehen, ist nicht ein einziges homogenes Netz, sondern ein Verbund aus vielen kleinen, territorial oder organisatorisch begrenzten Netzen. Diese Netze besitzen eine Anbindung an die Backbones und damit an das Gesamtnetz. Auch kommerzielle Internet-Provider hängen an entsprechenden Netzen. Und Endanwender, die ihren Internet-Zugang in Form einer Verbindung zu einem solchen Provider haben, können über diese Brücke das gesamte Internet nutzen.

Ein paar Adressen im WWW zu diesen Themen:

englischsprachige Seite National Science Foundation (NSF)
deutschsprachige Seite Deutsches Forschungsnetz (DFN)
englischsprachige Seite Réseaux IP Européens (RIPE)

nach oben
weiter | Seite Basis-Standards im Internet
zurück | Seite SELFHTML sagt "Danke"
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Internet und WWW

© 2007 Seite Impressum


SELFHTML: Einführung / Internet und WWW / Basis-Standards im Internet

SELFHTML

Basis-Standards im Internet
Informationsseite

nach unten Das TCP/IP-Protokoll
nach unten IP-Adressierung
nach unten Client-Server-Technologie
nach unten DNS - Domain Name Service
nach unten Routing und Gateways
nach unten Selbstorganisation im Internet
nach unten

Das TCP/IP-Protokoll

TCP/IP ist der kleinste gemeinsame Nenner des gesamten Datenverkehrs im Internet. Erst durch dieses Protokoll wurde historisch gesehen aus einem begrenzten Netz ein Netz der Netze. Egal, ob Sie Web-Seiten aufrufen, E-Mails versenden, mit FTP Dateien downloaden oder mit Telnet auf einem entfernten Rechner arbeiten: stets werden die Daten auf gleiche Weise adressiert und transportiert. TCP bedeutet Transmission Control Protocol (Protokoll für Übertragungskontrolle), IP bedeutet Internet Protocol.

Wenn Sie eine E-Mail verschicken oder eine HTML-Datei im Web aufrufen, werden die Daten bei der Übertragung im Netz in kleine Pakete zerstückelt. Jedes Paket enthält eine Angabe dazu, an welche Adresse es geschickt werden soll, und das wievielte Paket innerhalb der Sendung es ist.

Die Adressierung besorgt das IP. Dazu gibt es ein Adressierungsschema, die so genannten nach unten IP-Adressen.

Damit die Datenpakete auch wirklich beim Empfänger ankommen, und zwar in der richtigen Reihenfolge, dafür sorgt das TCP. Das TCP verwendet Sequenznummern für die einzelnen Pakete einer Sendung. Erst wenn alle Pakete einer Sendung vollständig beim Empfänger angekommen sind, gilt die Übertragung der Daten als abgeschlossen.

Jeder Rechner, der am Internet teilnimmt, ist mit einer IP-Adresse im Netz angemeldet. Rechner, die ans Internet angeschlossen sind, werden als Hosts oder Host-Rechner bezeichnet. Wenn Sie also mit Ihrem PC im Web surfen oder neue E-Mails abholen, sind Sie mit einer IP-Adresse im Internet angemeldet. Ihr Zugangs-Provider, über dessen Host-Rechner Sie sich einwählen, kann feste IP-Adressen für Sie einrichten. Große Zugangs-Provider, etwa Online-Dienste wie T-Online oder AOL, vergeben auch personenunabhängig dynamische IP-Adressen für jede Internet-Einwahl. Damit ein Rechner am Internet teilnehmen kann, muss er über eine Software verfügen, die das TCP/IP-Protokoll unterstützt. Unter MS Windows ist das beispielsweise die Datei winsock.dll im Windows-Verzeichnis.

IP-Adressierung

Eine IP-Adresse besteht aus vier Bytes, also 32 Bits, und man notiert sie üblicherweise als vier Dezimalzahlen zwischen 0 und 255, die durch Punkte getrennt sind. Eine typische IP-Adresse sieht in dieser Dezimalschreibweise, die auch dotted quad notation oder dotted decimal notation genannt wird, so aus: 149.174.211.5. Die Punkte dienen dabei einfach der Übersichtlichkeit.

Mehrere benachbarte IP-Adressen fasst man zu logischen Netzen zusammen. Der vordere Teil der IP-Adresse, die Netzwerknummer, bezeichnet das Netz und der Rest, die Hostnummer den Host in diesem Netz, ähnlich wie eine vollständige Telefonnummer zum Teil aus einer Ortsvorwahl besteht. Welcher Teil zur Netzwerknummer gehört wird durch die Netzmaske bestimmt.

Früher waren die IP-Adressen nach der ersten Zahl in eine Hand voll Klassen eingeteilt und jeder Klasse war eine feste Subnetzmaske zugewiesen. Dieses Verfahren war jedoch zu starr und es ist heute bestenfalls noch historisch relevant. Seit etwa Mitte der 90er Jahre verwendet man stattdessen das CIDR-Verfahren (Classless Inter-Domain Routing, klassenloses domainübergreifendes Routing). Die Netzmaske wird dann durch ein Präfix in der Form /x (wobei x eine Zahl zwischen 32 und 0 ist) angegeben. Die Zahl bestimmt die Größe der Netznummer in Bit, entspricht also quasi der Länge der Vorwahl in einer Telefonnummer. Je größer die Zahl ist, desto länger ist die Netznummer, umso mehr verschiedene Netznummern kann es also mit dieser Länge geben. Da die Länge der IP-Adresse fest ist, bedeutet eine längere Netznummer aber gleichzeitig, dass es weniger verschiedene Hostnummern pro Netz gibt.

Durch die Vergabe dynamischer IP-Adressen pro Einwahl können Netzbetreiber die Anzahl der tatsächlich internet-fähigen Anschlüsse deutlich höher halten, als wenn wirklich nur jeder Rechner eine feste Adresse erhalten würde, egal ob er online ist oder nicht. Auf diese Weise werden auch als kostbar angesehene IP-Adressen gespart. Zwar gibt es keinen wirklich akuten Adressmangel - 2004 waren gerade einmal etwas mehr als die Hälfte aller möglichen IP-Adressen vergeben -, doch man arbeitet trotzdem bereits an einer neuen Version des Internet-Protokolls, die unter anderem einen wesentlich größeren Adressraum bietet. Dieses Internet Protocol version 6 (IPv6) benutzt 128 Bit große Adressen und bietet noch andere lang ersehnte Verbesserungen. Es wird zur Zeit zunehmend parallel zur alten Version 4 (IPv4) verbreitet.

Client-Server-Technologie

Für die einzelnen Internet-Dienste wie World Wide Web, Gopher, E-Mail, FTP usw. muss auf einem Host-Rechner, der anderen Rechnern diese Dienste anbieten will, eine entsprechende Server-Software laufen. Ein Host-Rechner kann einen Internet-Dienst nur anbieten, wenn eine entsprechende Server-Software auf dem Rechner aktiv ist, wenn der Rechner "online" ist und wenn keine schützende Software (Firewall) den Zugriff von außen verhindert bzw. einschränkt.

Server sind Programme, die permanent darauf warten, dass eine Anfrage eintrifft, die ihren Dienst betreffen. So wartet etwa ein Web-Server darauf, dass Anfragen eintreffen, die Web-Seiten auf dem Server-Rechner abrufen wollen.

Clients sind dagegen Software-Programme, die typischerweise Daten von Servern anfordern. Ihr Web-Browser ist beispielsweise ein Client. Wenn Sie etwa auf einen Verweis klicken, der zu einer HTTP-Adresse führt, startet der Browser, also der Client, eine Anfrage an den entsprechenden Server auf dem entfernten Host-Rechner. Der Server wertet die Anfrage aus und sendet die gewünschten Daten. Um die Kommunikation zwischen Clients und Servern zu regeln, gibt es entsprechende Protokolle. Client-Server-Kommunikation im Web etwa regelt das HTTP-Protokoll. Ein solches Protokoll läuft oberhalb des TCP/IP-Protokolls ab.

Dass ein Client Daten anfordert und ein Server die Daten sendet, ist der Normalfall. Es gibt jedoch auch "Ausnahmen". So kann ein Client nicht nur Daten anfordern, sondern auch Daten an einen Server schicken: zum Beispiel, wenn Sie per FTP eine Datei auf den Server-Rechner hochladen, wenn Sie eine E-Mail versenden oder im Web ein Formular ausfüllen und abschicken. Bei diesen Fällen redet man auch von Client-Push ("Client drängt dem Server Daten auf").

Ein anderer Ausnahmefall ist es, wenn der Server zuerst aktiv wird und dem Client etwas ohne dessen Anforderung zuschickt. Das nennt man Server-Push ("Server drängt dem Client Daten auf"). Einige Technologien wollten diesen Ausnahmefall vor einigen Jahren zu einer Regel erheben mit den so genannten Push-Technologien. Diese Technologien sollten ermöglichen, dass ein Client regelmäßig Daten empfangen kann, ohne diese eigens anzufordern. Das ermöglicht Broadcasting-Dienste wie aktuelle Nachrichten. Netscape und Microsoft Internet Explorer (beide ab Version 4.0) bauten entsprechende Schnittstellen, um solche Dienste in Anspruch zu nehmen. Man kann jedoch von Glück sagen, dass sie sich nicht durchsetzten. Das Internet ist eben nicht Fernsehen, sondern ein Medium, das von der Aktivität der Anwender lebt, nicht von deren Konsumbeflissenheit.

DNS - Domain Name Service

Computer können mit Zahlen besser umgehen, Menschen in der Regel besser mit Namen. Deshalb hat man ein System ersonnen, das die nummerischen IP-Adressen für die Endanwender in anschauliche Namensadressen übersetzt.

Dieses System ist ähnlich wie das der IP-Adressen hierarchisch aufgebaut. Eine Namensadresse (Domain-Name) in diesem System gehört zu einer Top-Level-Domain. Die einzelnen Teile solcher Namensadressen sind wie bei IP-Adressen durch Punkte voneinander getrennt. Namensadressen (Domains) sind beispielsweise yahoo.com, mozilla.org oder denic.de.

Top-Level-Domains stehen in so einem Domain-Namen an letzter Stelle. Es handelt sich um einigermaßen sprechende Abkürzungen. Die Abkürzungen, die solche Top-Level-Domains bezeichnen, sind entweder Landeskennungen oder Typenkennungen. Beispiele sind:
de = Deutschland
at = Österreich
ch = Schweiz
it = Italien
my = Malaysia
com = Kommerziell orientierter Namensinhaber
org = Organisation
net = Allgemeines Netz
edu = amerikanische Hochschulen
gov = amerikanische Behörden
mil = amerikanische Militäreinrichtungen

Im Jahre 2000 wurden sieben neue Top-Level-Domains ausgewählt und danach bis 2002 für die Nutzung aktiviert. Diese sind:
biz = Unternehmen
pro = Professionals (Anwälte, Steuerberater, Ärzte usw., die eine staatliche Zulassung nachweisen können)
name = Privatpersonen
info = Informationsdienste aller Art
museum = Museen
aero = Flugunternehmen, Flughäfen, Reiseveranstalter usw.
coop = Genossenschaften, Verbände, Organisationen

Jede Top-Level-Domain stellt einen Verwaltungsbereich dar, für den es eine "Verwaltungsbehörde" gibt, die für die Namensvergabe von Domains innerhalb ihres Verwaltungsbereichs zuständig ist. Wenn Sie beispielsweise einen Domain-Namen wie MeineFirma.de beantragen wollen, muss der Antrag an das DENIC (Deutsches Network Information Center) gestellt werden. Kommerzielle Provider erledigen das für Sie, wenn Sie dort einen entsprechenden Service in Anspruch nehmen. Ihren Wunschnamen erhalten Sie aber nur, wenn die Namensadresse noch nicht anderweitig vergeben wurde. Schlaufüchse sind daher auf die Idee gekommen, tausende Domain-Namen für sich zu reservieren, um sie dann an Interessenten weiterzuverkaufen. Mittlerweile gibt es um die Domain-Namen leider schon eine ganze Latte von Schauergeschichten und Rechtsstreitigkeiten. Wenn etwa zwei zufällig gleichnamige Firmen, die sonst nichts miteinander zu tun haben, den gleichen Domain-Namen reservieren lassen wollen, kann nur eine der Firmen den Zuschlag erhalten. Beliebt geworden sind angesichts der Namensknappheit mittlerweile auch längere Namensadressen wie heute-geh-ich-ins-kino.de.

Inhaber von Domain-Namen können nochmals Sub-Level-Domains vergeben. So gibt es beispielsweise eine Domain namens seite.net. Die Betreiber dieser Domain haben nochmals Sub-Domains vergeben, wodurch Domain-Adressen wie java.seite.net oder javascript.seite.net entstanden.

Routing und Gateways

Im Internet als dem Netz der Netze ist es zunächst nur innerhalb des eigenen Subnetzes möglich, Daten direkt von einer IP-Adresse zu einer anderen zu schicken. In allen anderen Fällen, wenn die Daten an eine andere Netzwerknummer geschickt werden sollen, treten Rechner auf den Plan, die den Verkehr zwischen den Netzen regeln. Solche Rechner werden als Gateways bezeichnet. Diese Rechner leiten Daten von Host-Rechnern aus dem eigenen Subnetz an Gateways in anderen Subnetzen weiter und ankommende Daten von Gateways anderer Subnetze an die darin adressierten Host-Rechner im eigenen Subnetz. Ohne Gateways gäbe es gar kein Internet.

Das Weiterleiten der Daten zwischen Subnetzen wird als Routing bezeichnet. Die Beschreibung der möglichen Routen vom eigenen Netzwerk zu anderen Netzwerken sind in Routing-Tabellen auf den Gateway-Rechnern festgehalten.

Zu den Aufgaben eines Gateways gehört auch, eine Alternativ-Route zu finden, wenn die übliche Route nicht funktioniert, etwa, weil bei der entsprechenden Leitung eine Störung oder ein Datenstau aufgetreten ist. Gateways senden sich ständig Testpakete zu, um das Funktionieren der Verbindung zu testen und für Datentransfers "verkehrsarme" Wege zu finden.

Wenn also im Internet ein Datentransfer stattfindet, ist keinesfalls von vorneherein klar, welchen Weg die Daten nehmen. Sogar einzelne Pakete einer einzigen Sendung können völlig unterschiedliche Wege nehmen. Wenn Sie beispielsweise von Deutschland aus eine Web-Seite aufrufen, die auf einem Rechner in den USA liegt, kann es sein, dass die Hälfte der Seite über den Atlantik kommt und die andere über den Pazifik, bevor Ihr Web-Browser sie anzeigen kann. Weder Sie noch Ihr Browser bekommen davon etwas mit.

Selbstorganisation im Internet

In Anbetracht der Teilnehmerzahl im Internet ist der Verwaltungsaufwand im Netz vergleichsweise klein. Die meisten Endanwender wissen nicht einmal, dass es solche Verwaltungsstellen überhaupt gibt.

Eine gesetzgeberische Institution, wie es sie etwa innerhalb des Verfassungsbereichs eines Staates gibt, gibt es im Internet als weltweitem Verbund nicht. Der Versuch, die ICANN-Behörde als oberste Vergabestelle für Domains und IPs zu etablieren, hat viel Staub aufgewirbelt, aber die Befürchtungen, dass da eine zentralistische Internet-Diktatur entsteht, haben sich bislang nicht bestätigt. Viele Bereiche im Internet beruhen faktisch auf Selbstorganisation. Bei Diensten wie E-Mail galt beispielsweise lange Zeit das stille Abkommen, dass jeder beteiligte Gateway alle E-Mails weiterleitete, auch wenn weder Sender noch Empfänger dem eigenen Subnetz angehörten. In der Anfangszeit des Internets konnten nämlich noch nicht alle angeschlossenen Server jederzeit jeden anderen Server direkt erreichen - diese Weiterleitung galt als eine Art freundlicher Nachbarschaftshilfe. Die Kosten trug der weiterleitende Netzbetreiber, der aber seinerseits von der Weiterleitung anderer Server auch für die eigenen E-Mails profitierte. Heutzutage ist das unkontrollierte Weiterleiten beliebiger E-Mails zu einem ernsten Ärgernis geworden, weil Spammer diesen Mechanismus zur Verbreitung ihrer unerwünschten Werbebotschaften mißbrauchen - und da mittlerweile jeder Mailserver direkt jeden anderen Mailserver erreichen kann, ist es zum Glück überflüssig geworden, die E-Mails auf diese Weise über mehrere Stationen weiterleiten zu müssen.

Die Funktionsfähigkeit des Internet basiert also auf der Bereitschaft der Beteiligten, keine Pfennigfuchserei zu betreiben! Großzügigkeit hat das Internet geschaffen, und Kleingeisterei ist der größte Feind der Internet-Idee.

Das Usenet, also der größte Teil der Newsgroups, organisiert sich sogar vollständig selbst, weshalb leidenschaftliche Anhänger dieses System gerne als real existierendes Beispiel für Herrschaftsfreiheit anführen. Die "Verwaltung" findet im Usenet in speziellen Newsgroups statt (solchen, die mit news. beginnen). Dort können beispielsweise Vorschläge für neue Gruppen eingebracht werden, und in Abstimmungen wird darüber entschieden, ob eine Gruppe eingerichtet oder abgeschafft wird.

Offizielle Anlaufstellen gibt es für die Vergabe von Netzwerkadressen (IP) und für Namensadressen (DNS). Für die Vergabe von IP-Adressen innerhalb eines Netzwerks ist der jeweilige Netzbetreiber verantwortlich. Dazu kommen Organisationen, die sich um Standards innerhalb des Internets kümmern.

Die Kosten für die Datenübertragungen im Internet tragen die Betreiber der Subnetze. Diese Kosten pflanzen sich nach unten fort zu Providern innerhalb der Subnetze bis hin zu Endanwendern, die über Provider Zugang zum Internet haben oder Internet-Services wie eigene Web-Seiten nutzen.

Die folgende Liste enthält einige Verweise zu den wichtigsten internationalen und nationalen Organisationen im Internet:

deutschsprachige Seite Deutsches Network Information Center (DENIC)
Vergabestelle für Domain-Namen unterhalb der Top-Level-Domain .de

englischsprachige Seite International Network Information Center (InterNIC)
Zentralstelle für diverse Top-Level-Domains, geführt von der ICANN.

englischsprachige Seite The Internet Corporation for Assigned Names and Numbers (ICANN)
Oberste Organisation für die technische Regulierung des Internets (z.B. Schaffung von neuen Top-Level-Domains).

englischsprachige Seite Internet Architecture Board (IAB)
Organisation zur Dokumentation der Netzstruktur und der grundsätzlichen Abläufe im Internet.

englischsprachige Seite Internet Assigned Numbers Authority (IANA)
Zentrale Koordinationsstelle für Internet-Protokolle und die Vergabe von IP-Adressräumen an regionale Verwaltungen (z.B. ARIN (Nordamerika), RIPE (Europa), APNIC (Asien)).

englischsprachige Seite Internet Engineering Task Force (IETF)
Internationale Gemeinschaft von kommerziellen und nichtkommerziellen Aktiven im Internet mit dem Ziel, technische Standards im Internet vorzuschlagen.

englischsprachige Seite Internet Society
Internationale Organisation für die Kooperation und Koordination von Technologien und Anwendungen im Internet.

englischsprachige Seite W3-Konsortium
Organisation, die speziell die Weiterentwicklung technischer Standards des World Wide Web koordiniert, etwa HTML oder das HTTP-Protokoll.

Vor allem jene Organisationen, die sich um die technische Weiterentwicklung im Internet kümmern, werden zunehmend von großen Software-Firmen wie Microsoft, Netscape oder Sun bestürmt, da diese Firmen ein Interesse daran haben, ihren Software-Produkten und hauseigenen Standards bei Server-Technologien, Programmiersprachen usw. zum Status weltweiter Internet-Standards zu verhelfen. Ob und wie weit es gelingt, im Internet angesichts des entstehenden Milliardenmarkts neue, firmenunabhängige Standards durchzusetzen, die so erfolgreich werden wie HTML oder HTTP, muss die Zukunft zeigen. Derzeit sieht es gar nicht schlecht aus. Die meisten Computer-Konzerne haben begriffen, dass firmenunabhängige Standards ihnen selber letztlich auch mehr bringen. Und der Druck aufgeklärter Anwender, die keine Lust mehr haben, wegen allem und jedem eine neue, proprietäre Software kaufen zu müssen, die nach ein paar Jahren wieder "out" ist und vom Markt verschwindet, wächst ebenfalls.

nach oben
weiter | Seite Dienste im Internet
zurück | Seite Entstehung des Internet
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Internet und WWW

© 2007 Seite Impressum


SELFHTML: Einführung / Internet und WWW / Dienste im Internet

SELFHTML

Dienste im Internet
Informationsseite

nach unten E-Mail
nach unten Telnet und SSH
nach unten File Transfer (FTP)
nach unten Gopher
nach unten Chat (IRC)
nach unten Newsgroups (News)
nach unten World Wide Web (WWW)
nach unten

E-Mail

E-Mail (elektronische Post) ist wohl der am meisten genutzte Internet-Dienst. E-Mail erlaubt die persönliche Übermittlung von Nachrichten und Dateien von einem Sender an einen Empfänger. Wer an diesem Dienst teilnehmen will, braucht eine eigene E-Mail-Adresse. Solche Adressen sind an dem berühmten @ (sprich: englisch "at", also "bei" - das Zeichen wird im deutschen Sprachraum auch als "Klammeraffe" bezeichnet) in der Mitte erkennbar. Provider, über die Sie Zugang zum Internet haben oder bei denen Sie Ihr Web-Angebot hosten, richten Ihnen normalerweise E-Mail-Adressen auf Wunsch ein.

Vor allem im Business-Bereich verdrängt E-Mail nach und nach die herkömmliche Briefpost (von E-Mail-Anhängern liebevoll oder verächtlich als "Schneckenpost" oder "snail mail" bezeichnet). Auch das Fax ist eine durch E-Mail gefährdete Gattung. Die Vorteile liegen auf der Hand:

  • E-Mails brauchen meist nur wenige Minuten vom Sender zum Empfänger, egal ob einige wenige oder mehrere tausend Kilometer zwischen ihnen liegen.
  • E-Mails sind preiswert. Im Vergleich zum Brief fallen für E-Mails nur Bruchteile von Cent-Beträgen an.
  • Gegenüber einem Telefonat bieten sie den Vorteil, dass Vereinbarungen oder dergleichen darin schriftlich festgehalten werden.
  • Moderne E-Mail-Programme können E-Mails in einer durchsuchbaren Datenbank speichern, sodass Sie vor längerer Zeit gesendete oder empfangene E-Mails leicht wiederfinden.
  • Der Seite MIME-Standard, der sich bei E-Mails durchgesetzt hat, erlaubt das bequeme Anhängen beliebiger Computerdateien an eine E-Mail, sodass E-Mail auch für den individuellen Austausch von Dateien immer mehr Bedeutung gewinnt.
  • E-Mail zwingt Sender und Empfänger nicht, gleichzeitig online zu sein. Sie holen sich Ihre E-Mails ab, wenn Sie gerade Zeit haben.
  • Neben der Möglichkeit, mit bestimmten anderen Internet-Teilnehmern Nachrichten und Daten auszutauschen, können Sie mit einer eigenen E-Mail-Adresse auch an Mailing-Listen teilnehmen, die Sie interessieren.

Das heutige E-Mail-System hat aber auch noch mit einigen Problemen zu kämpfen. Eine normale E-Mail ist auf dem Weg vom Sender zum Empfänger etwa so geheim wie eine Ansichtskarte. Für vertrauliche Mitteilungen oder sensible Daten ist sie ungeeignet. Mittlerweile gibt es Verschlüsselungsverfahren wie PGP (Pretty Good Privacy), die das individuelle Kodieren und Dekodieren von E-Mails und angehängten Dateien erlauben. Voraussetzung ist dazu jedoch, dass sowohl Sender als auch Empfänger über eine entsprechende Zusatzsoftware verfügen und zuvor ihre öffentlichen Kodierschlüssel austauschen.

Ein weiterer Nachteil von E-Mails ist auch noch, dass sie nicht als "dokumentenecht" gelten. Zwar wächst allmählich ihre juristische Akzeptanz, doch unterschriftspflichtige Dokumente sind durch E-Mail bislang nicht ersetzbar. Deshalb können Sie z.B. noch nicht "einfach so" per E-Mail einen Wohnsitzwechsel mitteilen oder Ihre Steuererklärung ans Finanzamt schicken.

Allerdings existiert in Deutschland bereits die gesetzliche Grundlage für die "elektronische Signatur", mit der man elektronische Daten sehr fälschungssicher digital "unterschreiben" kann. Einziger Wermutstropfen: Der technische Aufwand mit speziellen Kartenlesegeräten für eine auch gerichtlich anerkannte digitale Signatur ist leider so hoch, dass deren Anschaffung derzeit nur lohnt, wenn man regelmäßig und mit Gegenstellen, die diese Signatur auch akzeptieren, kommuniziert.

Telnet und SSH

Telnet ist dazu gedacht, einen fernen Rechner im Internet durch die Kommandozeile (Eingabeaufforderung) so zu bedienen, als säße man direkt davor. Telnet ist damit eine einfache Lösung für Teleworker. Und diese Lösung ist schon wesentlich älter als der Begriff des "Teleworkings".

Telnet erlaubt das betriebssystemeigene Login (Anmelden) eines Benutzers an einem ans Internet angeschlossenen Host-Rechner. Das Anmelden ist nur möglich, wenn Sie Username und Passwort kennen, d.h. auf dem angewählten Host-Rechner als Benutzer eingetragen sind. Nach dem Einloggen erhalten Sie eine Shell (Eingabeaufforderung) und können auf dem entfernten Rechner Betriebssystembefehle eingeben, Programme starten usw.

PC-Anwender, die nicht direkt mit der Verwaltung von Server-Rechnern im Internet zu tun haben, werden mit Telnet kaum in Berührung kommen. Es gibt jedoch auch für PC-Benutzer von Systemen wie MS Windows oder Macintosh Telnet-Clients. Diese Programme erlauben es, vom eigenen PC aus auf einem entfernten Host-Rechner zu arbeiten. Ohne Kenntnis der Befehle des Host-Rechner-Betriebssystems ist ein solches Programm allerdings recht sinnlos.

SSH (Secure Shell) ist eine wesentlich bessere Variante von Telnet. Der Unterschied ist, dass bei SSH die gesamte Datenübertragung verschlüsselt wird. Das ist wichtig, weil schon beim Anmelden Benutzername und Passwort verschlüsselt übertragen werden - überdies werden beim Arbeiten auf einem entfernten Rechner häufig sensible Daten wie Konfigurationsdateien oder Passwörter bearbeitet. All diese Daten werden - auch wenn es einem beim Arbeiten kaum bewusst ist - über viele Rechner im Internet bis zum Zielrechner übertragen und könnten auf den Zwischenstationen abgefangen werden - verschlüsselt nützen sie dem Spion aber nichts. Manche moderneren Telnet-Clients bieten mittlerweile auch das SSH-Protokoll an.

File Transfer Protocol (FTP)

FTP ist ein Internet-Dienst, der speziell dazu dient, sich auf einem bestimmten Server-Rechner im Internet einzuloggen und von dort Dateien auf den eigenen Rechner zu übertragen (Download) oder eigene Dateien an den Server-Rechner zu übertragen (Upload). Ferner bietet das FTP-Protokoll Befehle an, um auf dem entfernten Rechner Operationen durchzuführen wie Verzeichnisinhalte anzeigen, Verzeichnisse wechseln, Verzeichnisse anlegen oder Dateien löschen.

Beim Einloggen in einen FTP-Server gilt es, zwei Arten zu unterscheiden: es gibt "normales" FTP und anonymes FTP.

Beim normalen FTP haben Sie nur Zugriff auf den Server, wenn Sie beim Einloggen einen Usernamen und ein Passwort angeben. Mit diesen Zugangsdaten muss der FTP-Serververwalter Sie am Server als berechtigten Anwender eingetragen haben.

Bei anonymem FTP handelt es sich um öffentlich zugängliche Bereiche auf Server-Rechnern. Dazu brauchen Sie keine Zugangsberechtigung. Wenn Ihre FTP-Software Sie dennoch nach Username und Passwort fragt, loggen Sie sich einfach mit dem Usernamen anonymous ein - als Passwort sollte jede beliebige Zeichenkombination funktionieren. Traditionell war es früher üblich, als Passwort die eigene E-Mail-Adresse einzugeben - da man aber nie genau weiß, ob diese Information nicht in falsche Hände gelangt, ist diese Angabe mittlerweile unüblich geworden.

Es gibt etliche öffentliche FTP-Server im Internet, die umfangreiche Dateibestände zum Download anbieten. Dort finden Sie Software, Hilfetexte, Grafiksammlungen usw.

Für öffentliche, anonyme FTP-Server gibt es Regeln. Da Sie beim Besuch solcher Server nur Gast sind, sollten Sie sich auch entsprechend verhalten. Bleiben Sie nicht länger als nötig. Laden Sie sich nicht unnötig viele Dateien herunter. Lesen Sie zuerst die Readme-Dateien, die es in fast jedem Verzeichnis gibt und die den Inhalt des Verzeichnisses erläutern.

Wenn Sie lediglich hin und wieder öffentlich zugängliche FTP-Server besuchen, um von dort Dateien herunterzuladen, können Sie das auch mit modernen WWW-Browsern wie Netscape oder dem Internet Explorer tun. Solche Browser zeigen die Dateilisten auf FTP-Servern als anklickbare Verweise an. Je nach Dateityp können Sie Dateien dann downloaden oder direkt im Browser-Fenster anzeigen.

Für anspruchsvollere Arbeiten, vor allem, wenn Sie die Dateien Ihres eigenen Web-Projekts verwalten wollen, brauchen Sie ein FTP-Programm. Solche Programme gibt es für alle Betriebssysteme, und einige Betriebssysteme, etwa alle Unix-Derivate oder OS/2, haben bereits einen eingebauten FTP-Client.

Gopher

Gopher gilt als der Vorläufer des World Wide Web, ist aber mittlerweile in der Bedeutungslosigkeit versunken. Nahezu alle Gopher-Server haben ihren Betrieb mittlerweile eingestellt, nur einige wenige werden aus historischen Gründen weiterbetrieben und vermutlich nur noch von Nostalgikern besucht. Der Name kommt von "go for" und drückt damit aus, was der wichtigste Zweck dieses Dienstes war: nämlich große Informationsbestände leichter durchsuchbar zu machen.

Gopher ist eine menübasierte Bedienoberfläche zum Auffinden von Information, aber auch zum Nutzen anderer Internet-Dienste wie FTP oder Telnet. Einem Eintrag in einem Gopher-Menü ist nicht anzusehen, wo sich die damit verbundenen Dateien oder Programme befinden. Anwender mit text- und tastaturorientierten Rechnern können aus den Menüs, die das Gophersystem am Bildschirm anzeigt, mit Buchstaben- oder Zifferntasten Einträge auswählen. Bei grafischen Benutzeroberflächen sind die Menüs mit der Maus anklickbar. In dieser Hinsicht gleicht Gopher dem World Wide Web, denn auch bei diesem Dienst müssen Sie keine Insider-Befehle kennen, um im Informationsbestand zu navigieren.

Der Nachteil von Gopher gegenüber dem WWW ist, dass es keine Standards wie HTML gibt. Es gibt lediglich die Gopher-Menüs und die damit verknüpften Dateiaufrufe oder Befehle. Ein guter Gopher-Client kann zwar diverse Dateiformate anzeigen, doch es gibt kein Mittel, um Bildschirmseiten zu gestalten und dadurch eigenständige Präsentationen von Information zu schaffen.

Moderne Web-Browser sind auch Gopher-fähig. Das bedeutet, dass Sie mit einem solchen Browser problemlos Gopher-Adressen aufrufen können. Die Gopher-Menüs erscheinen im Browser wie Listen mit Verweisen in HTML.

Internet Relay Chat (IRC)

Wer sich einsam fühlt oder einfach "in" sein will, geht im Internet chatten (tratschen, quatschen). Am Bildschirm erscheint dann ein zweigeteiltes Fenster. In den einen Teil werden wie von Geisterhand allerlei ganze und halbe Sätze, Kommentare und solche Dinge wie Emoticons hineingeschrieben. Das sind Beiträge von Teilnehmern, die gerade an der gleichen Stelle online sind. Im anderen Fenster können Sie selbst etwas eintippen. Auf diese Weise können Sie an der Unterhaltung teilnehmen. Es gibt auch grafische Oberflächen, bei denen sich jeder Chat-Teilnehmer eine Figur aussucht, die dann als Teilnehmer in einer Szenerie erscheint.

Kaum jemand erscheint dort mit seinem wahren Namen, und nicht wenige geben sich als etwas ganz anderes aus, als sie wirklich sind. Männer spielen Frau, um herauszufinden, wie es ist, als Frau von einem Mann angemacht zu werden. Erwachsene spielen Jugendliche, um sich mal wieder richtig pubertär benehmen zu dürfen. Hin und wieder kommen interessante Gespräche zustande, aber oft haben die Chat-Beiträge auch das Niveau von Kindergestammel. Über Chats entstehen aber auch ernstzunehmende Kontakte, Freundschaften und Beziehungen.

IRC ist einer der Internet-Dienste, die teuer werden können, wenn man seinen Internetzugang pro Zeit bezahlen muss. Denn während der ganzen Teilnahmedauer muss man online sein, und viele merken beim Quatschen nicht, wie die Zeit vergeht (das ist nicht anders als im "real life"). Es gibt nur wenige, die eine ganze Nacht lang im Web surfen, aber viele, die eine ganze Nacht lang chatten. Viele der hochgradig Internet-Süchtigen treiben sich vor allem in den Chat-Bereichen herum.

Newsgroups (News)

Eine Newsgroup ist einem schwarzen Brett vergleichbar, an das Sie Nachrichten heften (posten) können, die alle Besucher lesen können. Jede Newsgroup behandelt einen Themenbereich. Insgesamt sind mehrere zigtausend Newsgroups registriert. Es gibt praktisch nichts, zu dem es nicht eine Newsgroup gibt. Egal ob Sie sich für die Konfiguration Ihres PCs interessieren, für Origami oder für vermisste Kinder - für alles finden sich eine oder mehrere Newsgroups. Täglich werden zigtausend Nachrichten in Newsgroups gepostet. Es werden Fragen gestellt und Antworten gegeben, es wird debattiert und geflachst. Die Newsgroups gelten allgemein als der verrückteste Teil des Internet. Manchen Leuten sind sie aber auch ein Dorn im Auge, denn es gibt auch etliche Newsgroups mit pornographischen und extremistischen Inhalten.

Das System der Newsgroups ist auf verschiedene Netze verteilt. Das größte und bekannteste ist das Usenet. Hier finden Sie Newsgroups mit Adressen wie alt.music.pinkfloyd oder de.soc.weltanschauung. Die wichtigsten Abkürzungen in solchen Newsgroup-Adressen sind:

  • alt = alternativ (ohne regelnde obere Instanz) - inhaltlich oft bunt, verrückt, abgefahren
  • biz = Kommerzielles, jedoch keine Werbung
  • comp = Computer
  • de = deutschsprachig
  • misc = Sonstiges
  • news = Newsgroups zum Thema Newsgroups
  • rec = Freizeit, Hobby und Kunst
  • sci = Wissenschaften
  • soc = Soziales, Kultur, Politik
  • talk = Klatsch und Tratsch

Um Newsgroups lesen und daran teilnehmen zu können, brauchen Sie ein Newsreader-Programm. Web-Browser wie Netscape (ab V3.0) oder der Internet Explorer (ab V4.0) haben einen eingebauten News-Client, sodass Sie kein separates Programm mehr benötigen. Um Newsgroups empfangen zu können, müssen Sie in den Einstellungen des verwendeten Programms einen News-Server angeben. Fragen Sie den Provider, über den Sie Ihren Internet-Zugang haben, danach, ob er auch einen Newsgroup-Server anbietet, und mit welchen Daten Sie sich dort anmelden können!

Es empfiehlt sich, zunächst einmal alle verfügbaren Newsgroups einzulesen. Das kann eine Weile dauern, aber anschließend haben Sie eine sortierte Liste aller Gruppen und können sich einen Überblick verschaffen. Newsgroups, die Sie interessieren, können Sie abonnieren.

Nachrichten in Newsgroups sind hierarchisch organisiert. Irgendjemand postet eine Nachricht mit einem neuen Subject (Thema). Ein anderer antwortet auf die Nachricht und bezieht sich dadurch auf das gleiche Thema. Ein dritter antwortet ebenfalls, und ein vierter antwortet dem Dritten. Auf diese Weise entsteht eine Baumstruktur von Nachrichten zu einem einmal begonnenen Thema. Diese Baumstruktur wird auch als Thread bezeichnet. Sie können selbst einen neuen Thread beginnen oder auf eine Nachricht antworten und sich dadurch den betreffenden Thread einschalten.

World Wide Web (WWW)

Das World Wide Web (WWW) ist der jüngste, aber auch bekannteste Dienst innerhalb des Internet. Das Web zeichnet sich dadurch aus, dass es auch ungeübteren Anwendern erlaubt, sich im Informationsangebot zu bewegen. Wer etwa mit einem FTP-Programm einen FTP-Server aufruft, muss sich in komplexen, unbekannten Verzeichnisstrukturen zurechtfinden und sich an Dateinamen orientieren. Interessante Dateien kann er auf seinen Rechner downloaden, um sie später zu öffnen. Im WWW dagegen erscheinen Informationen gleich beim Aufruf am Bildschirm. Wenn Sie mit einem Browser im Web unterwegs sind, brauchen Sie sich nicht um Dateinamen oder um komplizierte Eingabebefehle zu kümmern. Das bequeme Navigieren mit Hilfe einfacher Mausklicks kann ein Hochgefühl erzeugen, weshalb sich auch die Redewendung vom "Surfen im Netz" eingebürgert hat.

HTTP

Im Web werden die Daten in der Regel über das Hypertext Transfer Protocol (HTTP) zwischen dem Server und dem Browser übertragen. HTTP verwendet ein Frage-Antwort-Schema, das heißt, der Browser sendet eine Anfrage (Request) und bekommt eine Antwort (Response) vom Server. Der Server sendet aber nie von sich aus Antworten an den Client. Unter normalen Umständen werden alle Anfragen eines Clients beantwortet.

nach oben
weiter | Seite Entstehung des World Wide Web
zurück | Seite Basis-Standards im Internet
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Internet und WWW

© 2007 Seite Impressum


SELFHTML: Einführung / Internet und WWW / Entstehung des World Wide Web

SELFHTML

Entstehung des World Wide Web
Informationsseite

nach unten Tim Berners-Lee und die Anfänge
nach unten Marc Andreessen, Netscape und der Boom
nach unten Die Arbeit des W3-Konsortiums
nach unten

Tim Berners-Lee und die Anfänge

Tim Berners Lee Der gebürtige Brite Tim Berners-Lee, in den 80er und bis in die 90er Jahren Informatiker am Genfer Forschungszentrum fuer Teilchenphysik CERN, beschreibt in seinem Buch "Weaving the Web", wie er dort am CERN in den 80er Jahren ein selbstgeschriebenes Programm als Produktivitäts-Tool nutzte. Das Programm, von Berners-Lee in Pascal geschrieben, lief auf einem Computersystem mit dem Betriebssystem "Norsk Data SYNTRAN III". Die 8-Zoll-Diskette, auf der die Sourcen gespeichert waren, ging irgendwann verloren.

Mit heutiger Software hatte das Tool sicher nicht viel zu tun. Grafische Oberflächen gab es nicht, kommandozeilenorientierte Systeme dominierten, und grüne Schrift auf schwarzem Grund beherrschte die Bildschirme. Auf einem solchen System also hatte Tim Berners-Lee sein Pascal-Programm zum Laufen gebracht. Er nannte das Programm Enquire, was auf Deutsch so viel bedeutet wie "sich erkundigen".

"Enquire" war ein Kapitel Hypertext-Programm. Man konnte Textdateien editieren, die - vermutlich durch irgendwelche Steuerzeichenfolgen markiert - in "nodes" (Knoten) unterteilt waren. Ein Knoten konnte alles sein, was so an Daten anfiel - Adressen, Gesprächsnotizen, spontante Ideen, Erlebnisse, Arbeitsergebnisse. Zu jedem Knoten gab es eine zugehörige Liste mit Links zu anderen Knoten. Man konnte auf jegliche Art von Querbeziehung linken, die man kannte oder fand. Links auf Ziele innerhalb einer Datei wurden vom Enquire-Programm automatisch bidirektional dargestellt - das heißt, auch wenn der Link nur von A nach B gesetzt war, fand man bei B in der Liste den Rückverweis auf A.

Ende 1988 entschloss sich Berners-Lee, aus der Weiterentwicklung von "Enquire" ein Computer-übergreifendes System zu entwickeln. Für CERN sollte er zu diesem Zweck einen entsprechenden Projektvorschlag einreichen und darin sein Vorhaben detailliert beschreiben. Das war die Zeit, als Berners-Lee mit verschiedenen Fachleuten Kontakt aufnahm, um technische Wege der Realisierung seiner Ideen zu finden. Ben Segal, ein Kollege von Berners-Lee, der sich mit den Grundlagen des Internet auskannte, überzeugte den Hypertext-Entwickler von den einzigartigen Möglichkeiten des Netzes der Netze. 1989 reichte er seinen Vorschlag bei CERN ein. Es vergingen jedoch viele Monate, und Berners-Lee erhielt keine Reaktion auf den Vorschlag. Robert Cailliau, ein alter Bekannter, ließ sich von den Ideen des Briten begeistern und setzte sich fortan für die Forcierung des Projekts am CERN ein. In dieser Zeit - es war das Jahr 1990 - erhielt das Projekt auch seinen endgültigen Namen: World Wide Web. Im Herbst des Jahres 1990 schrieb Berners-Lee eigenhändig die ersten Versionen der drei Säulen seines Konzepts:

  1. die Spezifikation für die Kommunikation zwischen Web-Clients und Web-Servern - das so genannte HTTP-Protokoll (HTTP = Hypertext Transfer Protocol)
  2. die Spezifikation für die Adressierung beliebiger Dateien und Datenquellen im Web und im übrigen Internet - das Schema der sogenannten URIs (URI = Universal Resource Identifier, universeller Quellenbezeichner).
  3. die Spezifikation einer Auszeichnungssprache für Web-Dokumente, der Berners-Lee den Namen HTML gab (HTML = Hypertext Markup Language, Hypertext Auszeichnungssprache).

Berners-Lee schrieb auch die erste Web-Server-Software. Der Rechner, auf dem diese Software installiert wurde, war unter dem Namen info.cern.ch erreichbar. Dort stellte Berners-Lee an Weihnachten 1990 die ersten, in HTML geschriebenen Web-Seiten der Welt zur Verfügung. Seine Ideen wichen dabei ursprünglich durchaus von dem ab, was schließlich aus dem Web wurde. So setzte sich Berners-Lee immer dafür ein, Web-Seiten online editierbar zu machen, sodass Web-Seiten-Besucher Texte fortschreiben konnten, sofern der Anbieter entsprechende öffentliche Schreibrechte für die Dateien vergab. Doch die Web-Browser, die sich schließlich durchsetzten, waren reine Lese-Software.

Das Web entwickelte sich zunächst nicht unbedingt von allein. Berners-Lee und seine Projektmitstreiter waren unermüdlich bei der Arbeit, das Web bekannt zu machen und zu etablieren. Auf einer internationalen Hypertext-Konferenz im Jahre 1991 stellten sie das Projekt vor. Kontakte zu Programmierern für verschiedene Systeme entstanden, und nur so entstanden die ersten Web-Browser. Denn erst die Verfügbarkeit solcher Browser ermöglichte es anderen Menschen mit Internet-Zugang, Web-Seiten aufzurufen. Nicola Pellow, eine junge Mitarbeiterin und Mathematikerin am CERN, schrieb den ersten einigermaßen benutzbaren textmodus-orientierten Browser. 1992 entstanden auch die ersten Browser für grafische Benutzeroberflächen, mit den Namen Erwise und Viola. Gleichzeitig stieg die Zahl von Web-Servern, über die Web-Seiten angeboten wurden. Zunächst waren es vor allem wissenschaftliche Institutionen.

Marc Andreessen, Netscape und der Boom

Marc Andreessen Für programmierende Studenten wurde es zunehmend zu einer interessanten Herausforderung, Browser fürs Web zu schreiben. Besonders hervor tat sich dabei ein junger Mann namens Marc Andreessen. Er entwickelte einen Web-Browser für grafische Benutzeroberflächen namens Mosaic. Tim Berners-Lee, der Marc Andreessen auch selber kennenlernte, beschreibt ihn als jemanden, der nicht mehr wie alle Browser-Entwickler vor ihm eine Software fürs Web entwickeln wollte, sondern als jemanden, der mit dem Anspruch auftrat, das Web überhaupt erst verfügbar zu machen - eben mit seinem Browser.

Andreessen und seine angeheuerten Mit-Programmierer hatten mit den philosophischen Ideen von Berners-Lee nicht sehr viel am Hut. Sie dachten von Beginn an in kommerziellen Kategorien. Bei der Entwicklung des Mosaic-Browsers erfanden die Programmierer nach ihrem Belieben neue Features, die sie in den Web-Browser implementierten, ohne dass diese Features standardisiert waren. Aber auch wenn Berners-Lee durch die Zeilen seines Buches deutlich durchscheinen lässt, wie wenig er von Andreessen hielt - durch den Mosaic-Browser kam die Lawine Web erst richtig ins Rollen. Das Mosaic-Projekt war dem ehrgeizigen Marc Andreessen jedoch alsbald zu klein geworden. Er wollte mehr, er wollte einen Browser, der die Welt erobert. Andreessen stieg schließlich aus dem Mosaic-Projekt aus und wurde Mitbegründer einer neuen Firma für Web-Software: Netscape. Wer heute den "guten" Netscape-Browser gegen den "bösen" Microsoft-Browser verteidigt, weiß also meistens gar nicht, dass Netscape in den Anfangszeiten genauso unverblümte Markteroberungs- und Monopolgelüste hatte wie Microsoft.

Das Konzept von Netscape ging zunächst auch voll auf. Eine völlig neue Zunft entstand: die Web-Designer. Träumend saßen sie in den Jahren 1995 und 1996 vor ihren ersten Web-Seiten, die dank Netscape bunte Hintergrund- und Schriftfarben, Hintergrundtapeten, Tabellenlayouts, mehrgeteilte Bildschirmfenster (Frames) und Multimedia-Plugins enthalten konnten. Zigtausende von Privatanwendern begannen, eigene Homepages zu erstellen (woran die deutschsprachige Seite damals erschienenen Versionen von SELFHTML möglicherweise nicht ganz unschuldig sind). Nach und nach drängten alle Firmen, Organisationen, Regierungen und Behörden mit eigenen Angeboten ins Web - weltweit. Die Wachstumsraten glichen einer Explosion. Es war aber auch die Stunde jener Marketing-Strategen, die am liebsten aus der ganzen Welt eine Plakatwand machen würden. Mit Feuereifer und Finanzen stürzten sie sich auf das neue, aufstrebende Medium, ohne den geringsten Schimmer einer Ahnung von dessen wahrem Wesen zu haben. Kein Wunder, dass viele Versuche, die Sahnetorte Web aufzurollen, kläglich scheiterten und schließlich wieder für Katerstimmung am Werbemarkt und an der Börse sorgten.

In den Jahren 1995 und 1996 erreichte der Netscape-Browser unter den Web-Benutzern zeitweise einen Marktanteil von 90%. Der Microsoft-Konzern schlief zunächst noch den Schlaf der Seligen und fraß sich an den Umsatzzahlen seiner Betriebssysteme MS DOS und MS Windows und der Textverarbeitung MS Word satt. Mitte der 90er Jahre, als der Online-Boom allmählich breitere Schichten der Bevölkerung der westlichen Länder erreichte, setzte man bei Microsoft zunächst auf einen eigenen, proprietären Online-Dienst namens MSN. Vom Internet und dem Web behauptete Bill Gates, das sei nichts für Microsoft. Als man jedoch sah, wie Netscape binnen weniger Monate die EDV-Landschaft veränderte, wie die Firma Netscape an der Börse einen bis dahin noch nie dagewesenen Traumstart hinlegte und die Implementierungen des Netscape-Browsers sich vermehrten wie ein Computer-Virus, da begann man plötzlich hastig zu reagieren. Mit einem gewaltigen Aufwand an Manpower wurde Versäumtes aufgeholt. Innerhalb von etwas mehr als einem Jahr erschienen die ersten vier Versionen des Internet Explorers, wobei Microsoft im Frühjahr 1997 mit der 4er-Version ein ähnlicher technologischer Durchbruch gelang wie Netscape mit den 1995 erschienenen Versionen 1.1 und 2.0 seines Browsers. Microsoft war alles andere als zimperlich, was den Kampf gegen Netscape betraf. So erklärte man den eigenen Browser einfach als Teil des Betriebssystems MS Windows und sorgte über diesen vorhandenen Vertriebskanal für die gewaltige Verbreitung des Internet Explorers. Nun ist dagegen eigentlich nichts einzuwenden, denn schließlich gehört Internet-Client-Software seit jeher zum Umfang von Betriebssystemen, gerade auch in der Unix-Welt. Die Absichten von Microsoft waren jedoch nur allzuleicht durchschaubar und sorgten in der Internet-Gemeinde für eine Welle des Hasses gegen den Konzern aus Redmond.

Die Arbeit des W3-Konsortiums

Logo des W3-Konsortiums Der Browser-Krieg tobt bis heute - zumindest überall dort, wo diskutiert wird. Microsoft strebt heute im Browser-Markt eine ähnliche Machtstellung an wie im Bereich der Betriebssysteme, hat aber insbesondere mit dem Firefox eine ernst zu nehmende Konkurrenz bekommen. Doch es gibt auch gute Nachrichten: das Bewusstsein für die technischen Grundlagen des Web ist gewachsen, und die Ideen von Tim Berners-Lee werden mittlerweile durch ein vielköpfiges Konsortium vertreten: dem W3-Konsortium (W3C). Dieses Konsortium ist trotz der millionenfach verbreiteten Browser der mächtigste Faktor für die Weiterentwicklung des Web geworden. Nicht zuletzt deshalb, weil es nicht gegen die Marktinteressen der Software-Firmen gerichtet ist, sondern seine Mitglieder zu großen Teilen aus eben jenen Software-Firmen rekrutiert.

Ende 1994 traf ein erstes Beratungs-Kommittee zusammen, um die Grundlagen für eine Institution zu schaffen, die sich um die technischen Grundlagen und Standards im Web kümmern sollte. Das CERN war mit dieser Aufgabe, die nicht seinem eigentlichen Beschäftigungsgegenstand entsprach, einfach überfordert.

Im Sommer 1995 traten namhafte Firmen dem W3-Konsortium bei. Gleichzeitig eröffnete die europäische Präsenz des Konsortiums ihre Pforten. Mitglieder des W3-Konsortiums sind Firmen oder Organisationen, keine Einzelpersonen. Sie unterschreiben einen 3-Jahres-Vertrag und zahlen Mitgliedsbeiträge, aus denen sich das Gremium finanziert. Als Gegenleistung erhalten sie Zugang zu nichtöffentlichen Informationen und können an der Entwicklung der vom W3C betreuten Standards wie HTML, CSS, XML usw. mitwirken.

Die Arbeit des W3-Konsortiums unterteilt sich in so genannte Aktivitäten (Activities). Es gibt mehrere Dutzend solcher Aktivitäten. So gibt es Aktivitäten für HTML, XML, CSS usw. Für jede der Aktivitäten gibt es Arbeitsgruppen (Working Groups) und Interessengruppen (Interest Groups). Während die Interessengruppen eher einflussnehmenden Charakter haben, befassen sich die Arbeitsgruppen mit der eigentlichen Ausarbeitung der Inhalte. Beide Gruppenarten setzen sich aus Mitgliedern des W3C zusammen. In den Arbeitsgruppen sitzen also auch viele Vertreter von Software-Herstellern. Das unabhängige Kern-Team des W3-Konsortiums überwacht die Aktivitäten.

Beim Entwickeln von Standards besteht die Ausarbeitung im Erstellen und Publizieren von technischer Referenz- Seite Dokumentation zu dem betreffenden Standard.

Über die englischsprachige Seite Einstiegsseite des W3-Konsortiums können Sie alle Aktivitäten der Organisation mitverfolgen. Mittlerweile gibt es auch ein deutschsprachige Seite Deutsches Büro des W3-Konsortiums, das in deutscher Sprache über die Arbeit des W3-Konsortiums berichtet. Für alle, die sich professionell mit Web-Design beschäftigen, sind regelmäßige Besuche auf den Web-Seiten des W3-Konsortiums mittlerweile Pflicht.

nach oben
weiter | Seite HTML
zurück | Seite Dienste im Internet
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Internet und WWW

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien

SELFHTML

Web-Technologien
Kapitelseite

Dieser Abschnitt geht auf verschiedene Sprachen und Technologien ein, die heute im Web eingesetzt werden, um letztlich Inhalte für Web-Browser zu erzeugen.
Der Abschnitt besteht aus folgenden Seiten:

Seite HTML
Seite Stylesheets
Seite XML und XML-Derivate
Seite JavaScript/DOM
Seite Perl
Seite PHP
Seite Java
Seite ActiveX
Seite Flash

nach oben

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien / HTML

SELFHTML

HTML
Informationsseite

nach unten HTML als "lingua franca" des Web
nach unten HTML als software-unabhängiges Klartextformat
nach unten HTML als Auszeichnungssprache
nach unten HTML für Hypertext
nach unten HTML-Versionen
nach unten

HTML als "lingua franca" des Web

Unter einer "lingua franca" versteht man eine "Brot- und Buttersprache", eine Sprache, die jeder kennt, jeder spricht, jeder leicht erlernen kann und jeder braucht. HTML ist eine solche Sprache. Vom Web-Gründer Tim Berners-Lee entwickelt, wurde HTML im Zuge des Web-Booms zum erfolgreichsten und verbreitetsten Dateiformat der Welt. Immer wieder rümpfen Entwickler, die gerne alles, was einfach sein könnte, durch tausend Filter und Übersetzer jagen, um es kompliziert zu machen und ihren technischen Durst zu stillen, über HTML die Nase - eben weil es so einfach ist. Aber erstens ist es bei genauerem Hinsehen gar nicht so einfach - fast kein namhaftes Web-Angebot - egal ob Suchmaschine, Online-Magazin oder Firmenauftritt - ist bis heute in der Lage, fehlerfreies und standardkonformes HTML auf seinen Web-Seiten zu realisieren. Und zweitens reicht HTML für die Mehrzahl der Inhalte, die heute im Web angeboten werden, vollkommen aus. Denn HTML ist eine Sprache zur Strukturierung von Texten, wobei aber auch die Möglichkeit besteht, Grafiken und multimediale Inhalte in Form einer Referenz einzubinden und in den Text zu integrieren.

Mit HTML können Sie Überschriften, Textabsätze, Listen und Tabellen erzeugen. Sie können anklickbare Verweise auf beliebige andere Web-Seiten oder Datenquellen im Internet erzeugen. Nicht-textuelle Inhalte können Sie wie bereits erwähnt referenzieren. Sie können Formulare in den Text integrieren. Und last but not least bietet HTML Schnittstellen für Erweiterungssprachen wie Seite Stylesheets oder Seite JavaScript an, mit deren Hilfe Sie HTML-Elemente nach Wunsch gestalten und formatieren oder Interaktion mit dem Anwender realisieren können.

HTML ist also sehr durchdacht und in ein Gesamtkonzept an weiteren Sprachen eingebunden. Wer behauptet, HTML sei nichts mehr für professionelles Web-Publishing, outet sich meistens nur als feuchtäugiger Technik-Junkie und behauptet letztlich nur, normale Texte seien nichts mehr für professionelles Web-Publishing. Und wer das behauptet, stellt sich selber ins Abseits der gewachsenen schriftlichen Kultur. Solange es Autoren gibt, die Texte schreiben und dazu die üblichen Mittel zur Textstrukturierung benötigen, wird es aus web-technischer Sicht Leute geben, die HTML gut brauchen können.

Als "lingua franca" ist HTML allerdings mit diversen spezielleren Anforderungen schlichtweg überfordert. HTML allein kann weder Grafik-Designer befriedigen, die jeden Pixel am Bildschirm kontrollieren wollen, noch Daten-Designer, die aus der Welt der relationalen Datenbanken kommen und sich anwendungsspezifische Lösungen wünschen. Deshalb gibt es heute Style-Sprachen wie CSS, und es gibt Lösungen wie Seite XML, um anwendungsspezifisches Daten-Design zu ermöglichen.

All das ändert aber nichts daran, dass HTML eine hervorragend geeignete, standardisierte und wegen der weiten Verbreitung der Web-Browser praktisch überall verfügbare Sprache für Text und Hypertext darstellt. Das Seite W3-Konsortium, das für die Standardisierung von HTML zuständig ist, ist zwar bemüht, HTML von allen Sünden der Anfangsjahre zu reinigen und es als einfache, reine Text-Strukturierungssprache zu etablieren. Doch in der Praxis dient HTML heute auch als Basis zum Erstellen von Web-Seiten-Layouts, und daran wird sich wohl auch so schnell nichts ändern.

HTML als software-unabhängiges Klartextformat

HTML ist ein so genanntes Klartextformat. HTML-Dateien können Sie mit jedem beliebigen Texteditor bearbeiten, der Daten als reine Textdateien abspeichern kann. Es gibt also keine bestimmte Software, die man zum Erstellen von HTML-Dateien benötigt. Zwar gibt es längst mächtige Programme, die auf das Editieren von HTML spezialisiert sind, doch das ändert nichts an der entscheidenden Eigenschaft: HTML ist nicht an irgendein bestimmtes, kommerzielles Software-Produkt gebunden. Diese wichtige, vielleicht sogar wichtigste Eigenschaft von HTML sollten Sie immer im Auge behalten, wenn man Ihnen erzählen will, dass Web Publishing nur mit bestimmten Software-Produkten möglich sei.

Da HTML ein Klartextformat ist, lässt es sich auch hervorragend mit Hilfe von Programmen generieren. Von dieser Möglichkeit machen beispielsweise Seite CGI-Scripts Gebrauch. Wenn Sie im Web zum Beispiel einen Suchdienst benutzen und nach einer Suchanfrage die Ergebnisse präsentiert bekommen, dann ist das, was Sie am Bildschirm sehen, HTML-Code, der von einem Script generiert wurde.

HTML als Auszeichnungssprache

HTML bedeutet HyperText Markup Language. Es handelt sich dabei um eine Sprache, die mit Hilfe von SGML (Standard Generalized Markup Language) definiert wird. SGML ist als ISO-Norm 8879 festgeschrieben. Mittlerweile gibt es einen Ableger von HTML namens XHTML. In der Sprachversion 1.0 ist XHTML eine Redefinition von HTML mit Hilfe von XML. XML hat nämlich ähnliche Aufgaben wie SGML.

HTML ist eine so genannte Auszeichnungssprache (Markup Language). Sie hat die Aufgabe, die logischen Bestandteile eines textorientierten Dokuments zu beschreiben. Als Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische Elemente eines textorientierten Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen.

Das Auszeichnungsschema von HTML geht von einer hierarchischen Gliederung aus. HTML zeichnet Inhalte von Dokumenten aus. Dokumente haben globale Eigenschaften wie zum Beispiel Kopfdaten. Der eigentliche Inhalt besteht aus Elementen, zum Beispiel einer Überschrift 1. Ordnung, Textabsätzen, Tabellen und Grafiken. Einige dieser Elemente haben wiederum Unterelemente. So enthält ein Textabsatz zum Beispiel eine als betont oder fett markierte Textstelle, eine Aufzählungsliste besteht aus einzelnen Listenpunkten, und eine Tabelle gliedert sich in einzelne Tabellenzellen.

Die meisten dieser Elemente haben einen fest definierbaren Erstreckungsraum. So geht eine Überschrift vom ersten bis zum letzten Zeichen, eine Aufzählungsliste vom ersten bis zum letzten Listenpunkt, oder eine Tabelle von der ersten bis zur letzten Zelle. Auszeichnungen markieren Anfang und Ende von Elementen. Um etwa eine Überschrift auszuzeichnen, lautet das Schema:

[Überschrift] Text der Überschrift [Ende Überschrift]

Bei einem Element, das wiederum Unterelemente besitzt, etwa einer Aufzählungsliste, lässt sich das gleiche Schema anwenden:

[Liste]
[Listenpunkt] Text des Listenpunkts [Ende Listenpunkt]
[Listenpunkt] Text des Listenpunkts [Ende Listenpunkt]
[Ende Liste]

Web-Browser, die HTML-Dateien am Bildschirm anzeigen, lösen die Auszeichnungsmarkierungen auf und stellen die Elemente dann in optisch gut erkennbarer Form am Bildschirm dar. Dabei ist die Bildschirmdarstellung aber nicht die einzige denkbare Ausgabeform. HTML kann beispielsweise genauso gut mit Hilfe synthetisch erzeugter Stimmen auf Audio-Systemen ausgegeben werden.

HTML für Hypertext

Eine der wichtigsten Eigenschaften von HTML ist die Möglichkeit, Verweise zu definieren. Verweise ("Hyperlinks") können zu anderen Stellen im eigenen Projekt führen, aber auch zu beliebigen anderen Adressen im World Wide Web und sogar zu Internet-Adressen, die nicht Teil des Web sind.

Durch diese einfache Grundeigenschaft eröffnet HTML völlig neue Welten. Das Bewegen zwischen räumlich weit entfernten Rechnern wird bei modernen grafischen Web-Browsern auf einen Mausklick reduziert. In Ihren eigenen HTML-Dateien können Sie Verweise notieren und dadurch inhaltliche Verknüpfungen zwischen Ihren eigenen Inhalten und denen anderer Anbieter herstellen. Auf dieser Grundidee beruht letztlich das gesamte World Wide Web, und dieser Grundidee verdankt es seinen Namen.

Im Zeitalter der Kommerzialisierung des Internet sind natürlich auch die Verweise zu einem kommerziellen Gegenstand geworden. Anklickbare Werbe-Grafiken ("Banner") auf häufig besuchten Seiten führen zu Anbietern, die für die Platzierung der Banner Miete bezahlen. Auch das sind Verweise. Glücklicherweise gibt es daneben aber weiterhin genügend "herkömmliche" Verweise im WWW, die einfach nur die Grundidee des Web verfolgen und zur weltweiten Vernetzung von Information beitragen wollen.

HTML-Versionen

Die erste Sprachversion von HTML gilt heute nicht mehr als erwähnenswert. Die Spezifikation zu dieser HTML-Version ist auf den Seiten des W3-Konsortiums, das für die Standardisierung von HTML verantwortlich ist, auch gar nicht mehr verfügbar.

HTML 1.0 enthielt Auszeichnungen für Standard-Elemente wie Überschriften, Textabsätze, für Grafikreferenzen und natürlich für Verweise.

HTML 2.0 wurde im November 1995 offizieller Sprachstandard. Die Spezifikation für HTML 2.0 ist beim W3-Konsortium noch verfügbar:

englischsprachige Seite HTML 2.0 Spezifikation

Die Version 2.0 von HTML gilt heute als der allerkleinste gemeinsame Nenner. Allerdings enthält HTML 2.0 durchaus Sprachelemente, die bis auf den heutigen Tag von den großen Browsern nicht oder nicht vollständig unterstützt werden, etwa das <link>-Element.

HTML 2.0 wurde allgemein als Enttäuschung empfunden, da gerade Netscape in seiner Entwicklung schon viel weiter war: So war HTML 2.0 Standard, als der Navigator in seiner überwältigenden Produktversion 2.0 auf den Markt kam. Darin waren bereits solche Dinge wie Frames (Mehrfenstertechnik) und Multimedia-Referenzen implementiert, die meilenweit über den offiziellen HTML-Standard hinausgingen. Die meisten Ersteller von Web-Seiten berauschten sich damals an den neuen Möglichkeiten von Netscape und hatten wenig Verständnis für die Restriktionen von HTML 2.0.

HTML 3.2 wurde nach langen Diskussionen am 14.1.1997 offizieller Sprachstandard. Die Spezifikation zu HTML 3.2 ist auf den Seiten des W3-Konsortiums verfügbar:

englischsprachige Seite HTML 3.2 Spezifikation

Dass diese Version eine schwere Geburt war, lässt sich schon an der merkwürdigen Versionsnummer erahnen. Das W3-Konsortium, von den Erfolgen eines Netscape-Browsers unbeeindruckt, entwickelte zunächst eine geplante Version 3.0. Die Vorschläge zu HTML 3.0 enthielten zwar etliche interessante Bestandteile. Doch insgesamt liefen die Vorschläge völlig an den neuen Realitäten im Web vorbei. HTML 3.2 ist das Ergebnis einer völligen Umarbeitung der Vorschläge zu dem niemals offiziell gewordenen HTML 3.0. Endlich wurden zumindest Tabellen offizieller Bestandteil von HTML. Daneben aber auch diverse Elemente zur physischen Textauszeichnung. Aus letzterem Grund stellt HTML 3.2 aus heutiger Sicht ein mittleres Unglück für die Entwicklung von HTML dar. Denn in dieser Version wurde versucht, HTML als Sprache für optisches Design zu etablieren, was jedoch nicht dem Wesen der Sprache entsprach und auch nur halbherzig implementiert war. Viele Sprachbestandteile, die in HTML 3.2 eingeführt wurden, sind mittlerweile als deprecated (missbilligt) eingestuft und sollen künftig wieder aus dem HTML-Sprachstandard entfallen, weil sie durch andere, ergänzende Technologien wie Seite CSS realisierbar sind.

HTML 4.0 wurde erstmals am 18.2.1998 als Sprachstandard verabschiedet. Diese Sprachversion wurde jedoch mehrfach überarbeitet und liegt mittlerweile in einer Version 4.01 vor. Die jeweils aktuelle Version von HTML 4.x finden Sie auf den Seiten des W3-Konsortiums:

englischsprachige Seite HTML 4.x Spezifikation

HTML 4.0 stellt den Versuch dar, sich auf die Kernaufgaben von HTML zurückzubesinnen. Das Arsenal der Sprachbestandteile dieser Version regelt vor allem die Einbindung von Cascading Style Sheets (CSS) und von Script-Sprachen wie JavaScript in HTML. Ein weiterer wichtiger Schwerpunkt ist das Thema Kapitel Internationalisierung. HTML 4.0 setzt im Gegensatz zu seinen Vorläufern voll auf das Unicode-System und erlaubt damit, Texte in allen nur erdenklichen Sprachen der Welt HTML-gerecht zu notieren. Es gibt allerdings auch viel Verwirrendes in HTML 4.0. Dazu gehören vor allem die drei Sprachvarianten, die das W3-Konsortium anbietet: "HTML Strict", "HTML Transitional" und "HTML Frameset". Für Anfänger ist die Politik, die hinter dieser Aufteilung steckt, kaum nachvollziehbar, und so ist es kein Wunder, dass sich die meisten Web-Entwickler bis heute wenig Gedanken über diese Feinheiten machen. Das ist zwar schade, weil es sich durchaus lohnt, sich mit den Bestrebungen des W3-Konsortiums eingehender auseinanderzusetzen. Andererseits ist es verständlich, dass jemand, der "mal eben" seine Homepage im Web veröffentlichen will, keine Lust hat, sich mit konzept-theoretischen Aspekten des Designs von Auszeichnungssprachen auseinanderzusetzen. Mit diesem Widerspruch lebt HTML 4.0 leider.

Verkompliziert wurde die Sache außerdem noch dadurch, dass HTML im Zuge der Etablierung von Seite XML in Gestalt von XHTML neu definiert wurde. So existiert heute neben dem SGML-basierten, klassischen HTML das XML-basierte XHTML. Letzteres ist zwar auch "nur" HTML, aber aufgrund XML-bedingter Gegebenheiten gibt es einige Unterschiede zu HTML. Von XHTML gibt es mittlerweile auch schon zwei Versionen: eine Version 1.0 und eine Version 1.1:

englischsprachige Seite XHTML 1.0 Spezifikation
englischsprachige Seite XHTML 1.1 Spezifikation

Angesichts dieser verwirrenden Versionen-Politik, die einen Kompromiss aus den Vorstellungen verschiedener Seiten und Interessen darstellt, gilt es für HTML-Anfänger vor allem, Ruhe zu bewahren und nicht gleich angewidert davonzurennen. Es ist durchaus möglich, HTML-4.0- oder XHTML-1.0-gerechte Web-Seiten zu erstellen, die richtig gut aussehen. Es gehört einfach ein wenig Kenntnis der Sachlage dazu. Innerhalb des HTML-Kapitels der vorliegenden Dokumentation wird versucht, die "Philosophie" des heutigen HTML so zu vermitteln, dass keine Entmutigungs-Effekte eintreten.

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere relevante und aktuelle Verweise, z.B. zu deutschen Übersetzungen und weiteren Quellen:

Online-Seite SELFHTML-Linkverzeichnis: HTML/XHTML

Innerhalb der vorliegenden Dokumentation werden HTML 4.0 und XHTML 1.0 im Kapitel Kapitel HTML beschrieben.

nach oben
weiter | Seite Stylesheets
zurück | Seite Entstehung des World Wide Web
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Web-Technologien

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien / Stylesheets (CSS)

SELFHTML

Stylesheets
Informationsseite

nach unten Formatsprache für HTML-Elemente
nach unten CSS-Versionen
nach unten

Formatsprache für HTML-Elemente

Mit HTML definieren Sie den grundsätzlichen Aufbau Ihrer Web-Seiten, die Elemente, die Strukturen, die Verweise, die referenzierten Elemente wie Grafiken, Multimedia usw. Aber HTML ist eigentlich nicht dazu gedacht, um exakt anzugeben, wie ein Element genau aussehen soll. So können Sie in HTML eine Überschrift definieren und dabei angeben, dass es sich um eine Überschrift 1. Ordnung handeln soll. Sie können innerhalb von HTML aber nicht bestimmen, wie groß, in welcher Schriftart usw. die Überschrift dargestellt werden soll. Das übernimmt der Web-Browser bei der Anzeige. Er benutzt dabei eine Mischung aus Grundeinstellungen, die der Anwender vornehmen kann, und fest programmierten Darstellungen einzelner HTML-Elemente.

An diesem Punkt setzen die Cascading Stylesheets ein. Es handelt sich dabei um eine unmittelbare Ergänzungssprache, die vorwiegend für HTML entwickelt wurde. Sie klinkt sich nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise festlegen, dass alle Überschriften 1. Ordnung 24 Punkt groß sind, in roter Helvetica-Schrift, mit einem Nachabstand von 16 Punkt und mit einer grünen doppelten Rahmenlinie oberhalb dargestellt werden. Sie können aber genauso gut auch für einen beliebigen Text festlegen, dass nur dieser Text 3 Zentimeter groß sein soll und eine gelbe Hintergrundfarbe erhält. Daneben hält CSS auch Möglichkeiten zum punktgenauen Platzieren von Elementen am Bildschirm und für andere Ausgabemedien wie Drucker oder Audio-Systeme bereit.

CSS erlaubt es, zentrale Formate zu definieren, beispielsweise für alle Überschriften erster Ordnung, oder für alle Textabsätze mit einem bestimmten Klassennamen, oder für kursiv ausgezeichneten Text, der innerhalb einer Tabellenzelle vorkommt. Die zentralen Formate können sich auf eine HTML-Datei beziehen, aber auch in eine externe Style-Datei ausgelagert werden, die Sie dann in allen gewünschten HTML-Dateien einbinden können. So werden einheitliche Formatvorgaben möglich, und der HTML-Code wird von unnötigem Ballast befreit.

CSS ist mit HTML eng verzahnt. Es lohnt sich daher, beide Sprachen gleichzeitig zu erlernen. Im HTML-Kapitel der vorliegenden Dokumentation werden Sie bei den Beschreibungen zu einzelnen HTML-Elementen deshalb immer auch auf die Möglichkeiten hingewiesen, wie Sie diese Elemente mit Hilfe von CSS gestalten können.

CSS ist ebenso wie HTML eine Klartextsprache. Auch für CSS brauchen Sie keine bestimmte Software, es genügt ein Texteditor. CSS ist wie HTML eine offen dokumentierte und vom W3-Konsortium standardisierte Sprache, die Sie frei und ohne Lizenzprobleme verwenden können.

Vom Internet Explorer wurde CSS schon recht früh unterstützt, da Microsoft sein Know How aus dem Bereich der visuellen Textverarbeitung in den Browser einfließen lassen konnte. Netscape tat sich dagegen schwer mit der Implementierung. Was die immer noch verbreitete Version 4.x an CSS beherrscht, ist insgesamt wenig ermutigend, und Web-Designer müssen alle Augenblicke lang wieder mit bösen Überraschungen bei diesem Browser rechnen. Erst in der von Grund auf neu programmierten 6er-Version des Netscape-Browsers ist CSS sauber umgesetzt. Aber auch beim Internet Explorer gab es lange Zeit eigenwillige Interpretationen einzelner CSS-Eigenschaften. Auch hier kann man erst seit der 5er-Version eine ausgereifte Umsetzung erwarten.

Das Verhalten der Browser ist der Grund, warum CSS bis heute eher vorsichtig eingesetzt wird. Dennoch setzt mittlerweile die Mehrzahl der Angebote im Web CSS mit Erfolg ein, und solange Sie Ihre Seiten mit verschiedenen Browsern austesten - was Sie ohnehin tun sollten - besteht kein Grund mehr, auf CSS und seine Vorteile zu verzichten.

CSS-Versionen

Das Standardisierungsverfahren bei CSS folgt den gleichen Regeln wie das von HTML. Die erste CSS-Sprachversion in Form einer offiziellen Empfehlung (Recommendation) stammt bereits vom 17.12.1996, wurde allerdings 1999 noch mal in überarbeiteter Form herausgegeben. Die Spezifikation zu CSS1 ist auf den Seiten des W3-Konsortiums verfügbar:

englischsprachige Seite CSS1-Spezifikation

Seitdem wurde CSS fleißig weiterentwickelt. Viele CSS-Eigenschaften, die längst beliebt geworden sind - etwa das absolute Positionieren von Elementen - gehören zum "CSS Level 2". Die Version 2.0 stammt vom 12.05.1998. Auch diese Version können Sie aufrufen:

englischsprachige Seite CSS2-Spezifikation

Obwohl schon 1998 veröffentlicht, ist CSS2 noch immer nicht vollständig in allen verbreiteten Browsern umgesetzt. Beim W3-Konsortium wird indessen längst an den Versionen 2.1 und 3.0 gearbeitet. Über die englischsprachige Seite Einstiegsseite zu CSS beim W3-Konsortium können Sie sich über die laufende Weiterentwicklung informieren.

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere relevante und aktuelle Verweise, z.B. zu deutschen Übersetzungen und weiteren Quellen:

Online-Seite SELFHTML-Linkverzeichnis: CSS Stylesheets

Innerhalb der vorliegenden Dokumentation werden CSS1, CSS2 und CSS 2.1 im Kapitel Kapitel Stylesheets beschrieben.

nach oben
weiter | Seite XML und XML-Derivate
zurück | Seite HTML
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Web-Technologien

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien / XML und XML-Derivate

SELFHTML

XML und XML-Derivate
Informationsseite

nach unten XML als Definitionssprache für Auszeichnungssprachen
nach unten XML-Derivate
nach unten XML-Versionen
nach unten

XML als Definitionssprache für Auszeichnungssprachen

Stellen Sie sich vor, irgendjemand hätte irgendwann für ein weit verbreitetes Textverarbeitungsprogramm wie MS Word eine bestimmte Dokumentvorlage erstellt. Stellen Sie sich weiter vor, diese Dokumentvorlage würde sich irgendwie immer mehr verbreiten, jeder Word-Anwender hätte sie, und jeder Word-Anwender würde seine Dokumente fortan nur noch mit dieser einen Dokumentvorlage erstellen.

Genau das ist im Grunde bei HTML der Fall. HTML ist eine Sprache, die mit Hilfe von SGML definiert wird und eine Reihe von festen Elementen enthält. Es ist zwar eine Sprache, die eigentlich alle wichtigen Elemente enthält, die ein Web-Autor heute so braucht, doch es bleiben genügend Wünsche offen. Denn es gibt viele Texte, die anwendungsspezifische Datenstrukturen haben. Nehmen Sie beispielsweise E-Mails. Eine E-Mail hat bestimmte Kopfdaten wie Absender, Empfänger, Thema, Absendezeit, sowie den eigentlichen Text. Wenn Sie eine solche E-Mail mit allen Feldern auf einer Web-Seite wiedergeben möchten, können Sie natürlich für die Felder "Absender", "Empfänger" usw. einfach normale Textabsätze verwenden. Sinnvoller wäre es allerdings, Auszeichnungselemente mit Namen wie "Absender" oder "Empfänger" zu haben. Nur so würde die semantische Datenstruktur der E-Mail erhalten bleiben.

Und genau dies ist der Unterschied zwischen HTML und XML. XML wird auch mit Hilfe von SGML, der Mutter aller Auszeichnungssprachen, definiert. Doch es ist keine "SGML-Anwendung", so wie HTML, sondern ein "SGML-Profil". Das ist eine Stufe abstrakter, man spricht dabei auch von "generalized markup", also von "verallgemeinerter Auszeichnung".

Im Grunde ist XML auch gar keine Konkurrenz zu HTML, sondern vielmehr zu SGML. Denn mit Hilfe von XML können Sie wie mit SGML eigene, neue Sprachen "erfinden". XML selbst ist also nur dazu da, um Auszeichnungssprachen zu definieren. Eine solche Auszeichnungssprache muss bestimmte Grundkonventionen einhalten. Die Bestandteile der Auszeichnungssprache müssen nach einem vorgeschriebenen Schema definiert werden. XML ist dabei das "Regelwerk", das Schema. Beim Definieren eigener Auszeichnungssprachen mit XML können Sie eigene Namen vergeben. So können Sie zum Beispiel Elemente definieren, um Bereiche eines Dokuments als Lexikonartikel auszuzeichnen, als Musiknote oder als Bestandteil einer chemischen Formel. Sie müssen bei der Definition der Elemente jedoch exakt festlegen, welche Eigenschaften das Element hat, zum Beispiel, innerhalb welcher anderen Elemente es vorkommen kann und innerhalb welcher nicht. Wenn Sie dann ein XML-Dokument mit der Definition einer eigenen Sprache erstellt haben, können Sie Dateien in dieser Sprache erstellen und im Dateikopf angeben, auf welche XML-Definitionen Sie sich in dieser Datei beziehen.

Auszeichnungssprachen, die Sie mit XML definieren, sind wie HTML logisch/semantische Sprachen. Denn mit XML können Sie Elemente und deren grundsätzliche Eigenschaften definieren, aber Sie können nicht angeben, wie eine interpretierende Software ein Element bei der Darstellung formatieren soll. Da ein Browser bei selbst "erfundenen" Elementen nicht mal auf Voreinstellungen zurückgreifen kann, so wie bei HTML, ist eigentlich überhaupt keine sinnvolle Anzeige möglich. XML ist deshalb noch viel stärker als HTML auf die Ergänzung durch eine Style-Sprache angewiesen. Durch Formatierung von Elementen wird bei XML-Sprachen eine optisch brauchbare Darstellung überhaupt erst möglich. Dazu gibt es, genau wie bei HTML, eine ergänzende Stylesheet-Sprache. Diese Sprache heißt XSL (Extensible Stylesheet Language - erweiterbare Formatsprache). XSL ist noch leistungsfähiger als Seite CSS. Denn XSL besteht nicht nur aus Formateigenschaften wie Schriftgröße, Farbe, Zeilenabstand usw. XSL übernimmt auch erweiterte Aufgaben der Textverarbeitung wie das sortierte Ausgeben von listenartigen Daten, automatische Nummerierung usw. Ein Ableger von XSL namens XSLT (XSL Transformation) erlaubt es sogar, Daten von einer XML-basierten Auszeichnungssprache in eine andere zu konvertieren. Das Konzept dazu ist ziemlich genial - XSLT können Sie sich vorstellen wie einen "Universal-Konverter", einen Babelfish für Auszeichnungssprachen. Er kann von einer in die andere Sprache übersetzen. So ist es beispielsweise möglich, Daten in einer XML-basierten eigenen Sprache zu speichern, diese aber beim Präsentieren im Web auf dem Server, also bevor die Daten zum Browser gelangen, mit Hilfe von XSLT in HTML zu übersetzen. Beim Browser kommt dann lupenreines HTML an, und er bekommt gar nichts davon mit, dass die Daten eigentlich in einer für ihn möglicherweise unverständlichen XML-Sprache gespeichert sind.

Für normales Homepage-Design ist XML bis heute relativ uninteressant. HTML und CSS sind für normale Texte und deren Gestaltung am Bildschirm hervorragend geeignet und meistens ausreichend. Doch im professionellen Bereich gibt es genügend Fälle, in denen der Einsatz von XML seine Berechtigung hat. Eigentlich überall dort, wo anwendungsspezifische Datenstrukturen vorliegen und der Wunsch besteht, diese beim Speichern der Daten nicht aufzugeben (siehe E-Mail-Beispiel weiter oben).

Der Internet Explorer ist seit Version 5.x in der Lage, Dateien mit XML-basierten Sprachen zu erkennen und zu verarbeiten. Von XSL und XSLT versteht er allerdings noch recht wenig, gerade mal genug, um ein paar grobe Aufgaben der Darstellung damit zu lösen. Netscape erkennt XML seit der Produktversion 6.x. Angesichts dieser Tatsache ist es heute nicht sehr ratsam, XML direkt auf die Browser loszulassen. In der Praxis wird XML heute vor allem eingesetzt, um Daten semantisch optimal und frei von allem Layout-Ballast zu speichern. Für die Präsentation als Web-Seiten werden die Daten dann serverseitig mit Hilfe von XSLT oder mit Hilfe eines selbstgeschriebenen Seite CGI-Scripts in HTML übersetzt.

XML-Derivate

Auszeichnungssprachen, die mit Hilfe von XML definiert sind, werden auch als XML-Derivate, also als XML-Ableger bezeichnet. XML ist also vorstellbar wie der Stamm eines Baumes, der sich in lauter Äste entfaltet, wobei alle Äste die "Gene" des Stamms enthalten.

Neben Auszeichnungssprachen, die Sie mit XML für Ihre eigenen Zwecke definieren können, gibt es aber auch XML-basierte Sprachen, die für die allgemeine Verwendung vorgesehen sind. So bietet beispielsweise auch das W3-Konsortium gleich mehrere, mit Hilfe von XML definierte Auszeichnungssprachen öffentlich an in der Hoffnung, dass diese eine breitere Anwendung finden. Es handelt sich um Sprachen mit ganz unterschiedlichen Aufgaben. So gibt es beispielsweise ein Dateiformat namens SVG, mit dessen Hilfe sich Vektorgrafiken erzeugen lassen, oder eine Sprache namens MathML zum exakten Auszeichnen mathematisch-wissenschaftlicher Formeln. Wenn von XML die Rede ist, dann ist damit meistens nicht nur der Kern von XML gemeint, sondern auch eine ganze Familie von XML-basierten Sprachen - eben die XML-Derivate.

XML-Versionen

Genau wie Seite HTML und Seite CSS wird XML vom W3-Konsortium standardisiert. Die offizielle Dokumentation zu XML beschreibt dabei, nach welchen Regeln XML-basierte Auszeichnungssprachen definiert werden. Zum Redaktionsschluss des vorliegenden Dokuments lag die dritte Auflage der Empfehlung zu XML 1.0 vor, veröffentlicht am 04.02.2004. Auf den Seiten des W3-Konsortiums können Sie die jeweils aktuelle Version aufrufen:

englischsprachige Seite Aktuelle XML-Spezifikation

Auch XSL und XSLT werden vom W3-Konsortium standardisiert. Die entsprechenden aktuellen Dokumente finden Sie ebenfalls im Web:

englischsprachige Seite Aktuelle Spezifikation für XSL

englischsprachige Seite Aktuelle Spezifikation für XSL Transformations (XSLT)

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere relevante und aktuelle Verweise, z.B. zu deutschen Übersetzungen und weiteren Quellen:

Online-Seite SELFHTML-Linkverzeichnis: XML, DTDs und XSL(T)

Innerhalb der vorliegenden Dokumentation wird XML 1.0 im Kapitel Kapitel XML/DTDs behandelt. Dabei wird auch XSLT beschrieben.

nach oben
weiter | Seite JavaScript/DOM
zurück | Seite Stylesheets
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Web-Technologien

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien / JavaScript/DOM

SELFHTML

JavaScript/DOM
Informationsseite

nach unten Web-Seiten als Anwendungen
nach unten JavaScript-Informationen
nach unten

Web-Seiten als Anwendungen

In HTML können Sie unter anderem Formulare definieren. Solche Formulare können Eingabefelder, Auswahllisten, Buttons usw. enthalten. Der Anwender kann ein Formular ausfüllen und über das Web absenden. Das ist für viele Zwecke eine segensreiche Erfindung. Doch HTML erlaubt Ihnen als Formularanbieter beispielsweise nicht, die Eingaben des Anwenders vor dem Absenden des Formulars auf Vollständigkeit und Plausibilität zu prüfen. Mit JavaScript ist das jedoch möglich.

Oder ein anderer Fall: Sie können in HTML zwar Multimedia-Dateien einbinden, aber wenn diese HTML-Datei im Web steht, können Sie nicht wissen, ob Ihre Seitenbesucher einen Browser besitzen, der das entsprechende Multimediaformat anzeigen kann. Da wäre es praktisch, das Einbinden der Multimedia-Datei davon abhängig zu machen, ob der Browser des Anwenders das entsprechende Format anzeigen kann oder nicht. Auch so etwas ist mit JavaScript möglich.

Für diese und unzählige andere nützliche, allerdings auch weniger nützliche Zwecke erfand Netscape eine Programmiersprache namens JavaScript. Durch JavaScript können Web-Seiten, die mit Hilfe von Seite HTML aus strukturiertem Text bestehen und mit Seite CSS gestaltet sind, ihren reinen "Dokument-Charakter" aufgeben und eher wie Programme, wie Anwendungen wirken. JavaScript erlaubt es, Maus- und Tastatureingaben des Anwenders zu verarbeiten und darauf mit Bildschirmausgaben oder dynamischen Änderungen innerhalb der angezeigten Web-Seite zu reagieren. So lässt sich mit JavaScript beispielsweise ein HTML-Formular zu einem Zinseszinsberechner umfunktionieren. Der Anwender gibt ein paar Werte ein, JavaScript berechnet etwas und gibt das Ergebnis aus.

All diese Dinge laufen im Web-Browser des Anwenders ab, während eine Web-Seite am Bildschirm angezeigt wird. Es ist keine zusätzliche Kommunikation zwischen Web-Browser und Web-Server erforderlich. Wenn die Web-Seite zum Browser übertragen wurde und sich damit im Arbeitsspeicher des Anwender-Rechners befindet, sind JavaScripts, die in die Web-Seite integriert sind, lokal ausführbar. Damit Programmierer auf dem Rechner des Anwenders keinen Unfug treiben können, ist JavaScript allerdings in seinen Möglichkeiten stark beschränkt. Es ist mit JavaScript beispielsweise nicht möglich, mal eben eine Datei auf dem Rechner des Anwenders auszulesen oder diese gar zu löschen. Die Möglichkeiten von JavaScript sind auf das Umfeld der Web-Seite eingeschränkt, in die so ein Script eingebettet ist.

JavaScripts können Sie ebenso wie Stylesheets direkt innerhalb von HTML-Dateien notieren oder wahlweise als separate Datei einbinden. Damit bezieht sich ein solches JavaScript auf die Seite, in die es eingebunden ist und kann auf das unmittelbare Umfeld und die Elemente dieser Seite zugreifen. Was den Zugriff auf Elemente einer HTML-Datei betrifft, muss man jedoch einen wichtigen Unterschied machen: mit klassischem JavaScript, wie es Netscape zunächst einführte, lässt sich nur auf bestimmte Elemente zugreifen, beispielsweise auf Formularelemente. Mittlerweile setzen sich jedoch Ansätze durch, bei denen der Script-Sprachen-Zugriff auf beliebige HTML-Elemente möglich ist, und zwar lesend und schreibend. So wird es beispielsweise möglich, den Text eines Textabsatzes dynamisch auszutauschen, wenn der Anwender an eine bestimmte Stelle klickt. Auf diese Weise werden HTML-Dateien zu richtigen interaktiven Anwendungen - was sich etwa hervorragend für didaktische Zwecke nutzen lässt. Für das dynamische Verändern von am Bildschirm angezeigten Web-Seiten hat sich auch der Begriff Dynamic HTML eingebürgert.

Den Zugriff auf beliebige Elemente regelt das Document Object Model (DOM). Dabei handelt es sich nicht um eine Programmiersprache, sondern um ein Schema für Programmiersprachen, das beschreibt, wie auf die Elemente von HTML- und auch auf die Elemente von beliebigen Seite XML-basierten Dokumenten zugegriffen werden kann. Das DOM regelt also beispielsweise, welche Möglichkeiten eine Sprache wie JavaScript bereitstellen muss, um dem Programmierer zu erlauben, den Text einer Überschrift erster Ordnung in einer HTML-Datei zu ermitteln und durch einen anderen Text zu ersetzen. Das DOM ist im Gegensatz zu JavaScript keine konkrete Programmiersprache. Es ist lediglich eine Vorgabe, die in modernen Script-Sprachen für Web-Seiten umgesetzt werden sollte. Denn das DOM wird wie HTML, CSS und JavaScript vom W3-Konsortium standardisiert und hat damit einen normativen Charakter. In den JavaScript-Modulen der verbreiteten Browser wird das DOM allmählich umgesetzt. Der Internet Explorer unterstützt DOM-gerechtes JavaScript seit Version 5.x, Netscape seit Version 6.x.

Die Mehrzahl der heutigen Web-Seiten setzt JavaScript in irgendeiner Form ein - die meisten so wie es gedacht ist, nämlich als Unterstützung für bestimmte Aufgaben, die sich mit HTML einfach nicht lösen lassen. Einige Seiten sind aber auch komplett JavaScript-basiert. Anwender, die in ihrem Browser JavaScript deaktiviert haben (was bei allen Browsern möglich ist), sehen von solchen Seiten rein gar nichts.

JavaScript-Informationen

JavaScript ist anders als HTML, CSS oder XML keine unabhängige Technologie, sondern eine von Netscape lizenzierte Programmiersprache. Obwohl JavaScript im Internet Explorer genauso funktioniert wie im Netscape-Browser, steckt in Wirklichkeit beim Internet Explorer eine andere Sprache namens JScript dahinter. JScript ist die Microsoft-Antwort auf JavaScript, was den Web-Seiten-Entwickler allerdings nicht kümmern muss, denn der JScript-Interpreter des Internet Explorers kommt mit JavaScript zurecht. Als Ersteller von Web-Seiten können Sie also in JavaScript programmieren, was Sie wollen, ohne sich um Lizenzfragen kümmern zu müssen. Die Weiterentwicklung von JavaScript liegt jedoch in den Händen des Lizenzinhabers und nicht in denen einer unabhängigen Organisation wie dem W3-Konsortium. In den Händen des W3-Konsortiums liegt dagegen die Standardisierung des DOM, das eine wichtige Grundlage für modernes JavaScript ist. Das Dokument für das DOM in der Version 1.0 finden Sie auf den Web-Seiten des W3-Konsortiums:

englischsprachige Seite Document Object Model (DOM) 1.0 Spezifikation

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere relevante und aktuelle Verweise, z.B. zu Original-Dokumentationen von Netscape und weiteren Quellen:

Online-Seite SELFHTML-Linkverzeichnis: JavaScript und DOM

Innerhalb der vorliegenden Dokumentation werden JavaScript und DOM im Kapitel Kapitel JavaScript/DOM behandelt. Relevant ist darüber hinaus das Kapitel Kapitel Dynamisches HTML, in dem bestimmte Techniken für den Zugriff auf Elemente einer Web-Seite eingehender beschrieben werden.

nach oben
weiter | Seite Perl
zurück | Seite XML und XML-Derivate
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Web-Technologien

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien / Perl

SELFHTML

Perl
Informationsseite

nach unten Perl und HTML
nach unten Perl-Informationen
nach unten

Perl und HTML

Perl ist eine Programmiersprache, die eine Mischung aus klassischen Programmiersprachen wie C und Script-Sprachen wie Unix-Shell-Script darstellt. Perl ist extrem leistungsfähig, und der Perl-Interpreter hochgradig ausgereift. Perl hat deshalb auf zahllosen Gebieten die Herzen der Programmierer erobert. Unter anderem eben auch auf dem Gebiet der Seite CGI-Programmierung. Aus diesem Grund werden CGI-Programmierung und Perl mittlerweile oft in einem Atemzug genannt und als zusammengehörig dargestellt. Es ist nur wichtig zu wissen, dass die Verbindung von CGI und Perl nichts Naturgegebenes oder Notwendiges ist. CGI ist lediglich eine Norm für eine Programmier-Schnittstelle, die Web-Server-Software unterstützen sollte, und Perl ist eine universell einsetzbare Script-Sprache, die sich allerdings auf Grund ihrer Charakteristik hervorragend für die CGI-Programmierung eignet.

Perl steht für Practical Extraction and Report Language (wegen der Bedeutung dieser Abkürzung sind viele der Meinung, dass die Sprache PERL heißen müsste, was aber laut englischsprachige Seite perlfaq1 falsch ist). Die Sprache stammt aus der Unix-Welt und wurde 1987 in der ersten Version veröffentlicht. Perl ist das Werk einer Einzelperson: der Erfinder, Larry Wall, hat auch heute noch die Oberhand über die Fortentwicklung der Syntax. Er gilt deshalb als Kultfigur.

Entsprechend der Unix-Philosophie ist Perl eine offene Sprache. Ihr Umfang und ihre Möglichkeiten wachsen mit neuen Versionen des Perl-Interpreters. Seit der heute üblichen Versions-Serie 5.x unterstützt Perl z.B. auch den Ansatz der objektorientierten Programmierung. Jedoch ist es eine Script-Sprache, deren Haupteinsatz nicht umfangreiche Anwendungen sind, sondern trickreiche Automatismen in der täglichen Datenverarbeitung. Einen wahren Boom erlebt die Sprache aber vor allem als Lieblingswerkzeug der CGI-Programmierer im World Wide Web.

Perl gilt als Hacker-Sprache, als eine Sprache, in der man unglaubliche Dinge mit einer einzigen Programmanweisung erledigen kann. Uneingeweihten erscheint der Quellcode eines Perl-Scripts häufig wie das Ergebnis eines verunglückten Konvertierversuchs oder wie ein zufälliger Dump aus dem Arbeitsspeicher. Wie bei anderen vergleichbaren Sprachen auch liegt es jedoch letztlich am individuellen Programmierstil, ob ein Programm unleserlich ist oder transparent - Perl-Code kann auch richtig schön sein. Perl hat eine eigenwillige Syntax, die sich an Sprachen wie C, sed, awk und Englisch anlehnt. Perl basiert zwar auf C, ist aber nicht direkt mit C vergleichbar und ebenso wenig mit Pascal oder modernen 4GL-Sprachen. Wer andere Programmiersprachen kennt und sich auf Perl einlässt, muss viel umlernen, wird aber auch viel Spannendes entdecken.

Dateien mit Perl-Anweisungen werden nicht für bestimmte Betriebssystemumgebungen zu ausführbaren Dateien gelinkt, sondern vom Seite Perl-Interpreter beim Aufruf auf Syntax überprüft, dann im Arbeitsspeicher zu Maschinencode compiliert und ausgeführt. Der Nachteil dieses Prinzips: Scripts sind nicht ganz so schnell ausführbar wie compilierte und gelinkte Programme. Der Vorteil: Scripts brauchen nicht für jede Betriebssystemumgebung neu compiliert und gelinkt zu werden; daher sind sie problemlos portabel und laufen überall, wo ein Perl-Interpreter installiert ist (sofern sie keine betriebssystemspezifischen Dinge tun).

Perl-Scripts sind einfache Textdateien, die Programmanweisungen in der Syntax von Perl enthalten. Solche Dateien können Sie mit jedem Texteditor erstellen und bearbeiten. Zum Ausführen von Dateien mit Perl-Programmanweisungen ist jedoch der Perl-Interpreter erforderlich.

Anders als z.B. bei PHP und JavaScript können Sie Perl-Code nicht unmittelbar in einem HTML-Dokument notieren (es gibt Ausnahmen, auf die hier nicht eingegangen wird). Sie benötigen beispielsweise ein Kapitel Formular oder eine andere Methode, um Ihr Script Seite aufzurufen.

Perl-Informationen

Der Perl-Interpreter ist Freeware nach dem Recht der Artistic License ( englischsprachige Seite http://www.perl.com/language/misc/Artistic.html) und für etliche Betriebssystemumgebungen verfügbar. Außerdem ist der C-Quellcode des Interpreters verfügbar, sodass Sie ihn, wenn Sie einen C-Compiler haben, für Ihren Rechner compilieren können. Sie können Perl und den Perl-Interpreter aus dem WWW downloaden. Die Web-Adresse für alles rund um Perl ist englischsprachige Seite http://www.perl.com/.

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere relevante und aktuelle Verweise, z.B. zu Original-Dokumentationen und weiteren Quellen:

Online-Seite SELFHTML-Linkverzeichnis: CGI/Perl

Innerhalb der vorliegenden Dokumentation wird Perl im Kapitel Kapitel Perl behandelt.

nach oben
weiter | Seite PHP
zurück | Seite JavaScript/DOM
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Web-Technologien

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien / PHP

SELFHTML

PHP
Informationsseite

nach unten PHP und HTML
nach unten PHP-Informationen
nach unten

PHP und HTML

Mit Seite HTML alleine lassen sich keine dynamisch generierten Inhalte erzeugen. Dazu brauchen Sie irgendeine Form von Script-Sprache. Seite JavaScript ist für viele kleinere Fälle recht praktisch, beispielsweise, um an einer bestimmten Stelle im Text immer das jeweils aktuelle Tagesdatum auszugeben. Der Vorteil von JavaScript ist, dass es sich problemlos in HTML-Dateien einbetten lässt. Mit Seite Perl ist wesentlich mehr möglich als mit JavaScript - vor allem all jene Dinge, die eine Datenverarbeitung auf dem Server-Rechner erfordern. Die Datenverarbeitung eines Gästebuchs für ein Web-Projekt beispielsweise muss auf dem Server-Rechner stattfinden. Der Grund ist, dass Daten zentral gespeichert werden müssen, damit sie allen Seitenbesuchern zur Verfügung stehen - im Fall des Gästebuchs die vorhandenen Gästebucheinträge. Der Nachteil von Perl ist, dass Perl-Scripts separate Dateien sind, die aufgrund der Charakteristik der CGI-Schnittstelle meistens in ganz anderen Verzeichnissen abgelegt werden müssen als die HTML-Dateien des Web-Projekts. Ein weiteres Problem ist, dass Perl als Universalsprache ausgelegt ist und nicht speziell für dynamische Web-Seiten entwickelt wurde. Manche Dinge, die sich ein Entwickler von dynamischen Web-Seiten wünscht, sind in Perl nur schwer und über Umwege zu erreichen. Gute Perl-Programmierer bekommen zwar jedes Problem in den Griff - aber der Weg zum guten Perl-Programmierer ist weit und lang.

An diesen "Problemzonen" von Perl setzt PHP an. Die rekursive Abkürzung steht für PHP: Hypertext Preprocessor. Das Konzept dahinter ist, dass PHP-Code ähnlich wie JavaScript direkt in HTML-Dateien an einer dafür geeigneten Stelle notiert werden kann. Wenn die HTML-Datei dann im Web abgelegt ist und von einem Web-Browser aufgerufen wird, erkennt der Web-Server, der die Datei zum Browser übermittelt, aufgrund bestimmter Konventionen, dass es sich nicht um eine gewöhnliche HTML-Datei handelt, sondern um eine HTML-Datei mit eingebettetem PHP-Code. Eine solche Datei lässt er dann zunächst von dem server-seitig installierten PHP-Interpreter verarbeiten. Dieser liest in der HTML-Datei die PHP-Code-Passagen aus, führt den Code aus und erzeugt daraus den endgültigen HTML-Code, der schließlich an den Browser gesendet wird.

PHP kann alles, was mit Perl auch möglich ist. Und manches ist mit PHP durchaus einfacher als mit Perl, weil der PHP-Interpreter viel stärker als etwa der Perl-Interpreter auf aktuelle Belange des Web-Publishings ausgerichtet wurde. So ist es beispielsweise mit PHP auch möglich, PDF-Dateien dynamisch zu generieren, um druckreife Daten an den Browser zu senden. Mit Perl geht so etwas zwar auch, doch dazu muss der Programmierer sich erst mal nach einem geeigneten Modul umsehen, dieses installieren und sich dann mit der modul-eigenen Dokumentation beschäftigen. Beim PHP-Interpreter ist dagegen alles inklusive und fest eingebaut. Allerdings platzt der PHP-Interpreter aufgrund seines Feature-Umfangs allmählich aus allen Nähten und wird durch die "Alles-inklusive"-Philosophie nicht gerade schneller - auch wenn er mittlerweile die gleiche interne Technik wie der Perl-Interpreter verwendet, nämlich Scripts erst einmal zu kompilieren und sie dann auszuführen. Letztendlich aber bestimmen immer eine ganze Reihe von Faktoren mit darüber, wie performant eine dynamische Web-Seite wirklich ist - unter anderem die Anzahl der Seitenaufrufe, die Leistungsfähigkeit der Server-Hardware, die Netzanbindung des Servers usw. In der Praxis hat sich PHP jedenfalls bestens bewährt und wird von vielen großen Web-Angeboten mit Erfolg eingesetzt.

PHP-Informationen

PHP und der PHP-Interpreter sind frei verfügbar und lizenzfrei benutzbar. Entwickelt werden Sprache und Interpreter von der so genannten PHP Group, einem Projektzusammenschluss von Programmierern. Die Einstiegsseite zu allen Belangen rund um PHP ist englischsprachige Seite php.net.

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere relevante und aktuelle Verweise, z.B. zu Original-Dokumentationen und weiteren Quellen:

Online-Seite SELFHTML-Linkverzeichnis: PHP

Innerhalb der vorliegenden Dokumentation wird PHP nicht behandelt, ein entsprechendes Kapitel ist aber fest für die Version 9.0 eingeplant. Bis dahin empfehlen wir Ihnen einige bewährte Werke über dieses Thema. Nähere Einzelheiten dazu auf der Kapitelseite zu Kapitel PHP.

nach oben
weiter | Seite Java
zurück | Seite Perl
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Web-Technologien

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien / Java

SELFHTML

Java
Informationsseite

nach unten Java und HTML
nach unten Java-Informationen
nach unten

Java und HTML

Java ist eine von Sun Microsystems entwickelte, vollkommen plattformunabhängige Programmiersprache. Die Sprache lehnt sich in Aufbau und Syntax an C/C++ an.

Java wurde zunächst hauptsächlich als Programmiersprache für Internet-Anwendungen gefeiert. Nach einigen Jahren zeichnet sich jedoch ab, dass Java für alle möglichen Zwecke gut geeignet ist, und dass es aber im Web nicht die Dominanz erreicht hat, die von Sun ursprünglich mal erhofft wurde. Im Web wird Java heute vor allem im Zusammenhang mit Online-Banking, Online-Broking, web-basierten Chats und für didaktische Zwecke eingesetzt. Im Bereich der Animationen, Effekte, Online-Spiele usw. wird Java dagegen immer stärker von Seite Flash verdrängt. Eine sehr elegante Möglichkeit, Webapplikationen (so genannte Servlets) einzusetzen, ergibt sich durch die Nutzung von Seite JSP und die Verwendung des Webservers Seite Tomcat.

Java zeichnet sich u.a. durch folgende Eigenschaften aus:

  • Objekt-Orientierung
    Java ist objektorientiert und stellt dem Programmierer eine Fülle elementarer und komplexer Objekte bereit.
  • Sichere Speicherverwaltung
    Unter Java ist die Arbeitsspeicherverwaltung aus Programmierersicht wesentlich unkritischer als beispielsweise unter C. Es gibt keine durch Zeiger adressierten Speicherbereiche von unbestimmter Größe, sondern nur Speichervektoren von fest definierter Länge. Die fehlerarme Speicherverwaltung ist besonders wichtig, da Java-Programme ohne Portierungsaufwand in verschiedenen Rechnerumgebungen ablaufen sollen.
  • Plattformunabhängige Programmdateien
    Java-Programme werden wie herkömmliche Programme zu Objektcode compiliert, jedoch nicht in eine bestimmte Prozessor- oder Betriebssystemumgebung eingebunden, also nicht "gelinkt". Java-Programme laufen daher auf allen Plattformen, wenn ein Java-Objektcode-Interpreter installiert ist. Web-Browser, die Java ausführen, starten ihre eigene "Java-Konsole" zu diesem Zweck.

Java-Programme, die für den Einsatz im Internet gedacht sind, heißen Applets. Sie können Java-Applets in HTML-Dateien so referenzieren, dass die Anwendung innerhalb der Web-Seite in einem dazu geeigneten Bereich erscheint. Die Bildschirmausgaben bzw. die Interaktionen zwischen Anwender und Programm finden also im Anzeigefenster des WWW-Browsers statt. Applets sind eine Sonderform von Java-Programmen, die in ihren Möglichkeiten beschränkt sind. Auf diese Weise wird sichergestellt, dass Java-Applets nicht ohne das Einverständnis des Anwenders irgendetwas auf dessen Rechner tun können, z.B. Dateien verändern oder löschen. Java-Applets laufen also in einer so genannten Sandbox, einem Sicherheitskäfig.

Innerhalb des Client-Server-Modells im Web kann Java auf beiden Seiten vorkommen. Applets, die im Browser ausgeführt werden, sind client-seitig, laufen also auf dem Rechner des Anwenders. Häufig kommunizieren solche Applets aber über eigene Protokolle online mit entsprechenden, in Java programmierten "Gegenstellen" auf einem Server. Bei einer Anwendung wie einem Chat beispielsweise gibt es einerseits ein Applet, das im Browser läuft und dem Anwender die Chat-Oberfläche präsentiert - doch damit tatsächlich ein Mehr-Personen-Chat möglich ist, muss natürlich auch auf dem Server irgendetwas laufen, was die Chat-Teilnehmer verwaltet und in den Client-Anwendungen anzeigt. Hinter Java-Applets verbergen sich deshalb häufig verteilte Anwendungen, die aus einem Applet und zugehörigen Server-Programmen bestehen.

Um selbst ausführbare Java-Applets erstellen zu können, brauchen Sie einen Texteditor, um den Java-Quellcode zu erstellen, und das Java Entwickler-Kit von Sun. Das Entwickler-Kit enthält alle Klassenbibliotheken der Programmiersprache Java, einen Applet-Viewer und einen Compiler. Neben einem Compiler, der speziell Java-Applets zum Einsatz im WWW erzeugt, gibt es im Java Developer's Kit aber noch einen Compiler, der internet-unabhängige Programme für beliebige PCs oder andere Software-Träger erzeugt. Dieser Compiler erlaubt alle Möglichkeiten, um web-unabhängige Software zu erstellen.

Für größere Software-Projekte mit Java gibt es ausgereifte Java-Entwicklungsumgebungen, ähnlich wie für C++, Visual Basic oder Delphi.

Java-Informationen

Das Java-Entwickler-Kit ist bei Sun zum Download frei erhältlich. Über die folgende Seite finden Sie im Web den Einstieg zu Software und Dokumentation rund um Java:

englischsprachige Seite Java-Entwicklerseiten (Sun).

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere relevante und aktuelle Verweise, z.B. zu Original-Dokumentationen und weiteren Quellen:

Online-Seite SELFHTML-Linkverzeichnis: Java

Innerhalb der vorliegenden Dokumentation wird Java nicht behandelt.

nach oben
weiter | Seite ActiveX
zurück | Seite PHP
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Web-Technologien

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien / ActiveX

SELFHTML

ActiveX
Informationsseite

nach unten ActiveX und HTML
nach unten ActiveX-Informationen
nach unten

ActiveX und HTML

ActiveX ist eine von Microsoft eingeführte Technologie für ausführbaren Programmcode auf Web-Seiten und dem Anspruch nach eine Alternative oder Konkurrenz zu Seite Java. ActiveX ist dabei ein Überbegriff für verschiedene Software-Komponenten. Alle diese Komponenten basieren auf dem so genannten Component Object Model (COM). ActiveX ist jedoch kein Internet-Standard im herkömmlichen Sinn, sondern der Versuch, spezifische Eigenschaften des MS-Windows-Betriebssystems für Web-Seiten nutzbar zu machen. So ist es mit Hilfe von ActiveX beispielsweise möglich, Eingaben aus HTML-Formularen einer Web-Seite über die OLE-Schnittstelle von Windows direkt in eine Excel-Tabelle oder eine Access-Datenbank einzulesen (oder umgekehrt). ActiveX-Controls benutzen nämlich die OLE-Schnittstelle von Windows, um mit ihrer Umgebung zu kommunizieren. Microsoft bemüht sich zwar um Lösungen, die sich auch auf Macintosh- und Unix-Rechner übertragen lassen. Doch letztendlich ist ActiveX für MS-Windows optimiert, und das mit Absicht.

Ein wesentlicher Bestandteil von ActiveX sind die so genannten ActiveX-Controls. Solche Controls sind Programme oder Programm-Module, die sich in HTML-Dateien als Objekt einbinden lassen, ähnlich wie Java-Applets. Der Programmcode wird im Arbeitsspeicher des Client-Rechners (also des Anwenders, der eine Web-Seite aufruft) ausgeführt. Normalerweise wird dabei auch eine so genannte ActiveX-Layoutdatei auf dem Rechner des Anwenders installiert. Mit ActiveX-Controls lassen sich alle Arten von Anwendungen usw. realisieren.

Es gibt keine festen Vorschriften dafür, in welcher Programmiersprache ActiveX-Code geschrieben ist. Der Compiler muss jedoch das Component Object Model (COM) unterstützen. Um ActiveX-Controls zu erstellen, brauchen Sie also keine bestimmte Software, aber Sie brauchen einen COM-fähigen Compiler. Das kann Visual Basic sein, Microsoft C++ usw.

ActiveX wird derzeit nur vom Internet Explorer direkt ausgeführt. Für Netscape gibt es ein ActiveX-Plugin zum Downloaden. Bei Netscape-Anwendern, die das Plugin installiert haben, sind ActiveX-Controls dann auch ausführbar.

Diskutiert wird häufig über das Sicherheitskonzept von ActiveX. Wenn Sie als Anwender erlauben, dass ein ActiveX-Control auf Ihren Rechner geladen wird, kann dieses Programm auf dem Rechner so ziemlich tun und lassen was es will. Es gibt also keine "Sandbox"-Beschränkungen bei ActiveX, sondern nur eine "Vertrauensbarriere" (nämlich die Abfrage des Web-Browsers, ob der Anwender mit der Ausführung des Programms auf seinem Rechner einverstanden ist oder nicht). Dadurch ist mit ActiveX aus Programmierersicht zwar viel mehr realisierbar als mit Java-Applets, doch aus Anwendersicht sind ActiveX-Module tendenziell unsicherer als Java-Applets.

ActiveX-Informationen

Auf den englischsprachige Seite Web-Seiten von Microsoft können Sie nach Informationen zu ActiveX suchen. Microsoft bietet an verschiedenen Stellen Informationen dazu an. Über die Domain englischsprachige Seite activex.com werden Sie auf eine Adresse weitergeleitet, an der Sie geeignete Software und vorhandene ActiveX-Controls finden.

Innerhalb der vorliegenden Dokumentation wird die ActiveX-Technologie nicht weiter behandelt.

nach oben
weiter | Seite Flash
zurück | Seite Java
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Web-Technologien

© 2007 Seite Impressum


SELFHTML: Einführung / Web-Technologien / Flash

SELFHTML

Flash
Informationsseite

nach unten Flash und HTML
nach unten Flash-Informationen
nach unten

Flash und HTML

Flash bietet die Möglichkeit, Multimedia-Effekte auf Web-Seiten zu bringen, aber auch Anwendungen wie Spiele, Simulationen oder Navigations-Unterstützung für Web-Seiten.

Flash ist jedoch der jüngste Hype und der neueste Vertreter der Techniken, die HTML zumindest teilweise aus dem WWW verdrängen und ersetzen wollen - zumindest ist es von jenen so hochstilisiert worden, die sich mit HTML und den offenen Standards noch nie abfinden konnten. Da hinter Flash ein kommerzielles Software-Produkt steckt, das in keiner Weise mit den offenen Internet-Standards vergleichbar ist, werden also Äpfel mit Birnen verglichen. Genauso könnte man sagen "ich brauche kein HTML für Tabellen, ich habe schließlich Microsoft Excel". Und es spricht wenig dagegen, eine Excel-Datei als Objekt in HTML einzubinden, oder einfach so ins Web zu stellen und die Besucher auf diese Datei zu lenken - bei installiertem Excel oder Excel-Viewer wird der Browser die Anwendung öffnen und die Datei darin anzeigen. Nicht anders ist es bei Flash. Es handelt sich um ein Binärformat, das Sie wahlweise als Multimediaobjekt in HTML einbinden können, oder Sie bieten Flash-Dateien direkt an. Die neueren Browser besitzen von Haus aus ein Plugin für Flash und können solche Dateien direkt anzeigen. Mit Internet-Standards hat das jedoch nichts zu tun, denn die Weiterentwicklung hängt ganz alleine an Macromedia, dem Software-Hersteller von Flash. Wenn diesem morgen einfällt, dass Flash völlig umgekrempelt wird, dann ist das eben so, und niemand kann etwas dagegen tun.

Flash steht vor allem dort hoch im Kurs, wo man der Meinung ist, auf einer Web-Seite müsse es zugehen wie im Fernsehen. Dauernde Bewegung, schicke Überblendungen, Licht-Effekte, Geräusche, Musik usw. Manche Kreativlinge unterliegen diesem Glauben, aber noch mehr die Marketing-Abteilungen von Firmen, die bei Agenturen ihren Web-Auftritt gestalten lassen und dafür am Bildschirm etwas sehen wollen, von dem sie glauben, es sei besonders schwierig und atemberaubend. Dabei schaden solche - von der Mehrheit der Seitenbesucher übrigens als sehr nervig empfundenen - Effekthaschereien, für die Flash nach wie vor vorwiegend eingesetzt wird, dieser Technologie mehr als sie ihr nutzen. Denn eigentlich ist Flash durchaus sinnvoll einsetzbar. Flash basiert auf bewegter Vektorgrafik. Beim Erstellen der so genannten Flash-Filmen arbeiten Sie mit der Flash-Autoren-Software, mit der Sie grafische Darstellungen, Text und eingebundene Elemente wie Pixelgrafiken oder Sound an einer Zeitleiste positionieren. Dadurch bestimmen Sie einen zeitlichen Ablauf. Flash kann Übergänge zwischen zwei Zuständen auf der Zeitleiste berechnen. Angenommen, Sie haben bei 0 Sekunden einen blauen Punkt und bei 1 Sekunde an der gleichen Stelle einen roten Punkt, dann können Sie für den Punkt einen fließenden Farbübergang von Blau nach Rot definieren, der 1 Sekunde lang dauert. Nicht jeder "Film" hat jedoch Anfang und Ende. Ebenso sind Schleifen-Effekte möglich, durch die sich mit Flash dialogorientierte Anwendungen wie Spiele oder Navigationshilfen realisieren lassen. Flash bietet auch web-spezifische Schnittstellen an. So ist es problemlos möglich, in Flash anklickbare Verweise zu anderen Web-Seiten einzubauen. Im didaktischen Bereich ist Flash beispielsweise gut einsetzbar, weil es sich hervorragend zur Visualisierung von Abläufen und Zusammenhängen eignet. Vereinzelt wird es auch für solche sinnvollen Zwecke eingesetzt - doch im Web dominieren leider vorwiegend die dümmlich daherfliegenden Schriftzüge und Blitz-Effekte.

Für anspruchsvollere Anwendungen reicht die visuelle Oberfläche der Flash-Autoren-Software alleine oft nicht aus. Flash hat deshalb zusätzlich eine integrierte Programmiersprache, die es Entwicklern erlaubt, komplexere Aufgaben zu lösen.

Alles in allem ist Flash also ein mächtiges Werkzeug, um Inhalte zu visualisieren. Nicht unerwähnt bleiben sollte jedoch, dass es auch frei verfügbare, offen dokumentierte und letztlich noch leistungsfähigere Internet-Standards für das gibt, was Flash leistet. So werden beim W3-Konsortium zwei Seite XML-basierte Sprachen namens englischsprachige Seite SVG und englischsprachige Seite SMIL standardisiert, die in Verbindung mit Seite JavaScript und DOM ähnliche Möglichkeiten eröffnen. Doch leider werden die modernen Browser mit Flash-Plugins ausgeliefert, sind aber noch nicht ohne weiteres in der Lage, SVG oder SMIL zu verarbeiten. Und solange es kein Autorenwerkzeug dafür gibt, das auch solche Web-Entwickler anspricht, die keinen Quelltext am Bildschirm ertragen können, werden es diese Standards schwer haben gegen Erscheinungen wie Flash.

Flash-Informationen

Auf den englischsprachige Seite Web-Seiten von Macromedia können Sie nach Informationen zu Flash suchen. In allen großen Suchmaschinen im Web finden Sie zahlreiche Web-Angebote, die sich mit Flash auseinandersetzen. Die Autoren-Software, die zum Erstellen von Flash-Movies erforderlich ist, ist kosten- und lizenzpflichtig. Die Flash-Player-Software, die auch als Plugin bei vielen Browsern mit ausgeliefert wird, ist dagegen frei verwendbar.

Innerhalb der vorliegenden Dokumentation wird Flash nicht weiter behandelt.

nach oben
weiter | Seite Die CGI-Schnittstelle
zurück | Seite ActiveX
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Web-Technologien

© 2007 Seite Impressum


SELFHTML: Einführung / Schnittstellen

SELFHTML

Schnittstellen
Kapitelseite

Dieser Abschnitt enthält Erläuterungen zu verschiedenen Schnittstellen, die für die Client-Server-Kommunikation von Bedeutung sein können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Die CGI-Schnittstelle
Seite Andere Schnittstellen

nach oben

© 2007 Seite Impressum


SELFHTML: Einführung / Schnittstellen / Die CGI-Schnittstelle

SELFHTML

Die CGI-Schnittstelle
Informationsseite

nach unten Die CGI-Schnittstelle
nach unten CGI-Informationen
nach unten

Die CGI-Schnittstelle

Die CGI-Schnittstelle (Common Gateway Interface - Allgemeine Vermittlungsrechner-Schnittstelle) ist eine Möglichkeit, Programme oder Scripts im Web bereitzustellen, die von HTML-Dateien aus aufgerufen werden und die selbst HTML-Code erzeugen und an einen Web-Browser senden können. Im Unterschied zu Seite JavaScript werden solche Scripts oder Programme aber nicht nach dem Übertragen einer Web-Seite im Browser des Anwenders ausgeführt, sondern bevor der Browser vom Server Daten übertragen bekommt. Deshalb sind CGI-Programme auch nur ausführbar, wenn eine HTTP-basierte Kommunikation zwischen Web-Browser und Web-Server stattfindet. CGI ist dabei auf der Server-Seite angesiedelt.

Die Datenverarbeitung geschieht ebenfalls auf dem Server-Rechner. CGI-Programme können auf dem Server-Rechner Daten speichern, zum Beispiel, wie oft auf eine Web-Seite zugegriffen wurde, oder, was ein Anwender in ein Gästebuch geschrieben hat. Ein CGI-Programm kann auf dem Server-Rechner auch installierte Datenbanken abfragen. Bei entsprechendem Aufruf kann ein CGI-Programm gespeicherte Daten auslesen und daraus HTML-Code generieren. Dieser "dynamisch" erzeugte HTML-Code wird an den aufrufenden Web-Browser eines Anwenders übertragen und kann dort individuelle Daten in HTML-Form anzeigen, zum Beispiel den aktuellen Zugriffszählerstand einer Web-Seite, die bisherigen Einträge in einem Gästebuch oder Ergebnisse einer Datenbanksuche.

Es gibt keine Vorschriften dafür, in welcher Programmiersprache ein CGI-Programm geschrieben ist. Damit das Programm auf dem Server-Rechner ausführbar ist, muss es entweder für die Betriebssystemumgebung des Server-Rechners als ausführbares Programm kompiliert worden sein, oder es muss auf dem Server ein Laufzeitinterpreter vorhanden sein, der das Programm ausführt. Der Server führt z.B. C-, Pascal- oder auch Visual-Basic-Programme aus, die mit einem jeweiligen Compiler zu einer ausführbaren Datei kompiliert wurden. Die meisten heutigen CGI-Programme sind jedoch keine kompilierten Programme, sondern lediglich Scripts, die von einem Interpreter beim Aufruf ausgeführt werden. Der bekannteste und beliebteste Interpreter ist dabei der Seite Perl-Interpreter.

Die CGI-Schnittstelle steht zur Verfügung, wenn ein Web-Server installiert ist, der CGI unterstützt und das Ausführen von CGI-Programmen erlaubt. Sie können sich selbst auf Ihrem PC Seite lokal einen Web-Server einrichten, um dort mit CGI-Programmen zu testen. Wenn Sie bei einem Provider auf einem öffentlichen Web-Server im Internet Speicherplatz für eigene Web-Seiten erhalten, können Sie die Funktionalität dieses Web-Servers benutzen, um eigene CGI-Programme im Web einzusetzen. Wie gesagt muss Ihr Provider Ihnen die Nutzung der CGI-Schnittstelle ermöglichen. Bei manchen preiswerten oder gar kostenlosen Homepage-Vermittlern ist dies nicht der Fall. Fragen Sie den Provider im Zweifelsfall danach!

Um die CGI-Schnittstelle nutzen zu können, benötigen Sie Zugriff auf ein bestimmtes Verzeichnis auf dem Server-Rechner, das CGI-Programme enthalten darf. Meist trägt dieses Verzeichnis den Namen cgi-bin. CGI-Programme werden nur dann ausgeführt, wenn sie in diesem Verzeichnis liegen. Welches das CGI-Verzeichnis sein soll und wie Sie es ansprechen wollen, können Sie beim Seite Einrichten des eigenen Web-Servers festlegen. Je nach Server können Sie auch mehrere CGI-Verzeichnisse einrichten. Bei einem Provider, der Ihnen öffentlichen Web-Speicher mit CGI-Schnittstelle eingerichtet hat, finden Sie das CGI-Verzeichnis bereits vor. Sie brauchen dann nur noch Ihre CGI-Programme in dieses Verzeichnis hochzuladen (siehe auch Seite CGI-Scripts auf öffentlichem Web-Server installieren).

Die CGI-Schnittstelle ruft nicht nur das jeweils auszuführende Programm auf und leitet dessen Antwort weiter, sondern stellt auch eine Reihe von Daten bereit, die der Web-Server speichert und die ein CGI-Programm auslesen kann (und zum Teil auslesen muss), um Daten verarbeiten zu können. Diese Daten speichert der Web-Server in so genannten Seite CGI-Umgebungsvariablen.

Die Spezifikation (verbindliche Beschreibung) für die CGI-Schnittstelle wird zur Zeit von der englischsprachige Seite NCSA Software Development Group betreut. Derzeit liegt diese Definition in der Version 1.1 vor. Andere Schnittstellen für ausführbare Programme im Web, die von kommerziellen Herstellern wie Netscape oder Microsoft eingeführt wurden, machen der klassischen CGI-Schnittstelle Konkurrenz. Von Netscape stammt beispielsweise die API-Schnittstelle (auch NSAPI genannt), von Microsoft die ISAPI-Schnittstelle. Beide Schnittstellen sind für die Server-Software-Produkte der jeweiligen Hersteller optimiert und erreichen eine Performance bei der Datenverarbeitung, die ein Mehrfaches der CGI-Schnittstelle beträgt. Ein entscheidender Vorteil der CGI-Schnittstelle bleibt jedoch die Tatsache, dass es sich - ähnlich wie bei HTML - um einen kommerziell unabhängigen, kostenlosen und produktübergreifenden Standard handelt.

Die meistbenutzte Programmiersprache für CGI-Programme ist noch immer die Scriptsprache Kapitel Perl. Der Grund dafür ist, dass Perl sehr mächtige Funktionen besitzt, z.B. für Zeichenkettenoperationen oder für das Lesen und Schreiben von Daten. Der Perl-Interpreter, der zum Ausführen eines Perl-Scripts erforderlich ist, ist für fast alle Betriebssysteme als Freeware verfügbar und auf fast allen Server-Rechnern im Web installiert.

CGI-Informationen

Für CGI gibt es keinen Standard, der dem Status von HTML, CSS oder XML vergleichbar wäre. Das W3-Konsortium, bei dem es zwar auch eine Arbeitsgruppe gibt, die sich um das HTTP-Protokoll kümmert, klammert die CGI-Schnittstelle aus den HTTP-Dokumenten aus. Die CGI-Schnittstelle wurde mit einem der ersten und seinerzeit erfolgreichsten Web-Server-Produkte eingeführt, nämlich mit dem NCSA-Web-Server (NCSA = National Center for Supercomputing, eine akademische Institution). Die Original-Spezifikation für die CGI-Schnittstelle von NCSA ist auf den Web-Seiten von NCSA noch verfügbar:

englischsprachige Seite The CGI Specification

Allzuviel gehört eigentlich gar nicht dazu - es muss lediglich vom Web-Server unterstützt werden. Der NCSA-Server spielt mittlerweile keine Rolle mehr, die klare Führungsrolle unter den Web-Server-Produkten hat mittlerweile der frei verfügbare Apache Web-Server übernommen. Dieser unterstützt die CGI-Schnittstelle selbstverständlich auch.

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere relevante und aktuelle Verweise, z.B. zu Original-Dokumentationen und weiteren Quellen:

Online-Seite SELFHTML-Linkverzeichnis: CGI/Perl

Innerhalb der vorliegenden Dokumentation wird CGI im Kapitel Kapitel CGI behandelt.

nach oben
weiter | Seite Andere Schnittstellen
zurück | Seite Flash
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Schnittstellen

© 2007 Seite Impressum


SELFHTML: Einführung / Schnittstellen / Andere

SELFHTML

Andere Schnittstellen
Informationsseite

nach unten .NET/ASP
nach unten .NET/ASP-Informationen
nach unten FrontPage-Erweiterungen
nach unten JSP
nach unten JSP-Informationen
nach unten

.NET/ASP

ASP ist eine Erfindung von Microsoft und steht für Active Server Pages (Aktive Server-Seiten). Es stellt ähnlich wie Seite PHP eine Alternative zu Seite Perl dar. Auch bei ASP geht es also darum, serverseitig dynamische Web-Seiten zu erzeugen, beispielsweise um Suchtreffer, die sich aufgrund einer Datenbankabfrage ergeben, in HTML-Form aufgelistet an den aufrufenden Browser zu senden. Ähnlich wie PHP-Code können Sie Script-Code bei ASP direkt in HTML einbetten - es sind also nicht wie bei Perl und CGI separate Scripts erforderlich, die in speziellen Verzeichnissen abgelegt werden müssen. Im Unterschied zu PHP ist ASP jedoch stärker an die Welt von Microsoft und Windows gekoppelt. Zwar gibt es ASP durchaus auch für Linux und andere Unix-basierte Systeme, und neben Microsoft Web-Servern werden auch der ApacheServer und viele andere unterstützt. Doch die ASP-Integration ist für Webserver von Microsoft optimiert und wird daher vorwiegend unter Windows eingesetzt.

ASP ist im Gegensatz zu PHP nur eine "Umgebung", keine eigene Script-Sprache. Als Script-Sprachen kommen vor allem die Microsoft-eigenen Sprachen JScript und VBScript (Visual Basic Script) in Frage. Aber auch der Einsatz von Perl für ASP ist möglich. VBScript ist allerdings die Standard-Script-Sprache für ASP.

Das ASP-Prinzip ist das Gleiche wie bei PHP. Aufgrund bestimmter Konventionen erkennt der Webserver, dass eine HTML-Datei eine ASP-Datei ist. Der Server mit integrierter ASP-Umgebung führt dann den in der Datei enthaltenen Script-Code aus und sendet am Ende den dadurch erzeugten, gesamten HTML-Code an den aufrufenden Browser.

.NET stellt eine jüngere, modifizierte und stark erweiterte Version dieser "Umgebung" dar. Es können Compiler für Visual Basic und C# (eine von Microsoft erweiterte Variante von C++) und weitere Elemente in diese Umgebung integriert werden, daher wird bei der .NET-Technologie auch oft von einem Framework gesprochen.

.NET/ASP-Informationen

Die ASP-Umgebung ist standardmäßig im Seite Internet Information Service (IIS) von Microsoft integriert. Es existieren außerdem Implementierungen von Drittherstellern z.B. für den Apache-Webserver. Inwiefern diese zu 100% kompatibel zum von Microsoft gesetzten Standard sind, und welche Lizenzbedingungen bei deren Verwendung zu beachten sind, sollten Sie im Einzelfall selbst erfragen.

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere relevante und aktuelle Verweise, z.B. zu Original-Dokumentationen und weiteren Quellen:

Online-Seite SELFHTML-Linkverzeichnis: ASP/.Net-Sprachen

Innerhalb der vorliegenden Dokumentation wird .NET/ASP nicht behandelt.

FrontPage-Erweiterungen

FrontPage ist der von Microsoft entwickelte und in Microsoft Office enthaltene WYSIWYG-Editor (What You See Is What You Get). Er ist nicht nur daraufhin konzipiert worden, einzelne Webseiten zu erstellen oder zu bearbeiten, sondern soll insbesondere zur Verwaltung ganzer "Webs" eingesetzt werden und deren einzelne Dokumente unmittelbar auf dem Server bearbeiten können. Um dieses Konzept zu verwirklichen, entstanden die "Erweiterungen", die aus einer kleinen Gruppe eigener Programme bestehen. Sie können unmittelbar mit dem Seite IIS zusammenarbeiten, es gibt jedoch, ähnlich wie für ASP, auch für die FrontPage-Erweiterungen Implementationen von Drittanbietern, sodass sie auch mit Apache eingesetzt werden können. Die FrontPage-Erweiterungen lassen sich anstelle eines FTP-Clients nutzen, sodass Sie gegebenenfalls auf die Installation eines eigenen Seite FTP-Clients zum Hochladen Ihrer Dokumente verzichten können.

Beachten Sie:

In jüngeren Microsoft Office-Ausgaben (Office XP, Office 2003) wird davon ausgegangen, dass auch andere Office-Programme (Word, Exel) so genannte "webtaugliche Dokumente" erstellen und verwalten können. Daher werden die FrontPage-Erweiterungen auch von diesen Programmteilen angesprochen und bei einer unbeaufsichtigten Installation ebenfalls auf Ihrem Rechner installiert. Das kann dazu führen, dass in vielen Dokument-Verzeichnissen Ihres Rechners unerwünschte versteckte Unterverzeichnisse mit Namen wie _vti-inf angelegt werden.

Innerhalb der vorliegenden Dokumentation werden die FrontPage-Erweiterungen nicht behandelt.

JSP

JSP steht für Java Server Pages (Java-Serverseiten). Das Konzept entstand bei englischsprachige Seite Sun in Opposition zu ASP und beruht auf dem Einsatz von Seite Java auf dem Server-Rechner. Ähnlich wie bei Seite PHP können Sie innerhalb eines JSP-Dokuments spezielle Tags in der Form <%= application.getServerInfo() %> notieren. Solche Anweisungen werden vom Webserver interpretiert, der die angesprochene Java-Applikation anfordert, womit zusätzliche dynamische Inhalte in den HTML-Code, den der aufrufende Browser erhält, übernommen werden können. Es ist dazu nötig, dass der Webserver selbst in der Lage ist, Java-Applikationen anzusprechen. Ein speziell für diese Aufgabe konzipierter Webserver ist Seite Tomcat. Java-Applikationen können Servlets oder JavaBeans sein oder beliebige andere. JSP stellt eine sehr schnelle und zuverlässige Technologie dar, die den Einsatz von Java-Applets überflüssig macht. Da es sich um eine serverseitige Technologie handelt, kann jeder Browser JSP-Inhalte darstellen, ohne dass auf dem Rechner selbst Java installiert sein muss.

JSP-Informationen

Um mit JSP zu arbeiten, müssen Sie nicht gleich die gesamte Sprache Java lernen. Aber wenn Sie sich mit Java bereits auskennen, haben Sie auch die Möglichkeit, vollständige Servlets zu erstellen und beliebigen Java-Code unmittelbar in einem JSP-Dokument zu notieren.

Beachten Sie:

Innerhalb der vorliegenden Dokumentation wird JSP nicht behandelt. Weiterführende Informationen finden Sie unter anderem an folgenden Stellen:

englischsprachige Seite http://java.sun.com/products/jsp/overview.html
englischsprachige Seite http://java.sun.com/products/jsp/docs.html
englischsprachige Seite http://java.sun.com/developer/technicalArticles/Programming/jsp/

nach oben
weiter | Seite Dokumente und Dokumentationen
zurück | Seite Die CGI-Schnittstelle
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Schnittstellen

© 2007 Seite Impressum


SELFHTML: Einführung / Hilfsmittel

SELFHTML

Hilfsmittel
Kapitelseite

Dieser Abschnitt behandelt, welche Informationsquellen für Entwickler von Web-Seiten von Bedeutung sind, welche Art von Software und Tools zum Handwerkszeug gehört, und welche anderen Möglichkeiten der technischen Unterstützung bestehen.
Der Abschnitt besteht aus folgenden Seiten:

Seite Dokumente und Dokumentationen
Seite Software
Seite Services im Web
Seite Support

nach oben

© 2007 Seite Impressum


SELFHTML: Einführung / Hilfsmittel / Dokumente und Dokumentationen

SELFHTML

Dokumente und Dokumentationen
Informationsseite

nach unten Allgemeines zu Dokumenten und Dokumentationen
nach unten Recommendations des W3-Konsortiums
nach unten Requests For Comments (RFCs)
nach unten Frequently Asked Questions (FAQs)
nach unten Anbieter-Dokumentationen
nach unten Freie Dokumentationen
nach unten Bücher
nach unten

Allgemeines zu Dokumenten und Dokumentationen

Die Fülle der Techniken und Technologien, die im Web und im Internet allgemein kursieren und eingesetzt werden, ist gewaltig. Kein Mensch ist in der Lage, alles, was dazugehört, zu kennen und zu beherrschen. Es ist deshalb essentiell wichtig, dass alle eingesetzten Techniken und Technologien möglichst gut und vollständig dokumentiert sind, und dass diese Dokumentationen offen zugänglich und einsehbar sind. Technische Dokumentation ist im Internet das Salz der Erde. Ohne Dokumentation gäbe es kein Internet - denn die Techniken und Technologien allein würden an die Köpfe derer gebunden bleiben, die sie beherrschen, sich nicht verbreiten und schnell in Vergessenheit geraten. Dokumentation ist also die Schriftkultur des Internet und die Basis für die Stabilität des Internet. Die meisten Menschen, die sich wirklich tiefer auf das Internet einlassen, begreifen das auch früher oder später. In den Jahrzehnten, die das Netz nun schon an Erfahrung gewinnen konnte, haben sich gewisse Standards beim Dokumentieren etabliert. Das betrifft sowohl die Art und Weise der Beschreibungen, als auch den Verbindlichkeits-Charakter.

Als Entwickler von Web-Seiten werden Sie kaum mit einer Dokumentation wie der vorliegenden alleine auskommen, auch wenn diese noch so umfangreich und ausführlich erscheinen mag. Denn es gibt einerseits Dokumente, die spezielle Themen einfach vollständig behandeln, was im Rahmen einer übergreifenden Dokumentation wie der vorliegenden niemals möglich ist. Und andererseits gibt es Dokumente, die einen höheren Verbindlichkeits-Charakter haben als die Dokumentation, die Sie hier lesen. Denn nicht, was hier steht, ist beispielsweise der Maßstab dafür, wie HTML auszusehen hat, sondern das, was in dem dafür vorgesehenen offiziellen Dokument des W3-Konsortiums steht. Die verschiedenen Dokumentationsformen haben alle ihren Zweck und ihre Daseinsberechtigung. Aber Sie sollten die Unterschiede kennen und wissen, welche Dokumentationsform welche Aufgaben hat. Und schließlich müssen Sie natürlich auch wissen, wie Sie an die entsprechenden Dokumente herankommen.

Praktisch alle wichtigen Dokumente im Internet liegen in englischer Sprache vor. Viele davon sind auch nicht in Übersetzungen verfügbar, und wenn, dann gelten die englischsprachigen Versionen als die normative Grundlage. Der Einsatz automatischer Übersetzungshilfen führt bei solchen Texten in der Regel zu erheiternden Momenten, hilft aber beim Verständnis der Texte kaum weiter. Gute Kenntnisse der englischen Sprache sind also eine wichtige Voraussetzung, um die Originaldokumente lesen zu können.

Recommendations des W3-Konsortiums

Das W3-Konsortium ist ein unabhängiges, sich selber überwachendes Gremium für die technischen Standards im Web. Recommendations (Empfehlungen) des W3-Konsortiums sind Dokumente mit dem höchsten im Web verfügbaren Verbindlichkeits-Charakter. Es handelt sich um technische Beschreibungen einzelner Web-Technologien wie beispielsweise Seite HTML, Seite CSS oder Seite XML. Die Recommendations haben die Aufgabe, die jeweilige Technologie vollständig und unmissverständlich darzustellen. Die Zielgruppen dieser Beschreibungen sind einerseits Web-Autoren, aber auch Software-Hersteller, z.B. von Web-Browsern, die angehalten sind, diese Standards so genau und vollständig wie möglich in ihren Produkten zu implementieren. Der Anspruch der Exaktheit und Vollständigkeit macht die Recommendations für Anfänger nicht unbedingt zu einer leichten Lektüre. Denn nicht selten leidet die Allgemeinverständlichkeit unter den Zwängen der Terminologie. Das W3-Konsortium ist sich aber bewusst, dass diese Dokumente zum Teil auch von weniger spezialisierten Leuten und Nicht-Informatikern gelesen werden oder gelesen werden müssen. Die neueren Recommendations sind daher reichhaltiger erläuternd als die früheren. Auch mit erhellenden Beispielen wird nicht mehr so gespart.

Jede Recommendation durchläuft ein längeres Verfahren, in dessen Verlauf das Dokument mehrmals von verschiedenen Seiten gereviewt wird. Aus losen technischen Notizen entstehen zunächst Working Drafts (Arbeitsentwürfe), von denen es eine oder mehrere geben kann. Arbeitsentwürfe lassen das geplante End-Dokument bereits gut erkennen. Verbindlich sind sie jedoch noch nicht. Nach diversen Reviews innerhalb der Arbeitsgruppe und nach Abstimmung mit der Interessengruppe erlangt das Dokument schließlich den Status einer Candidate Recommendation (Empfehlungskandidat). In diesem Stadium wird noch Feedback aus der Öffentlichkeit erwartet und gegebenenfalls eingearbeitet. Daraus entsteht die Proposed Recommendation (Empfehlungsvorschlag). Nach einem abschließenden Review erhält das Dokument schließlich den Status einer offiziellen Recommendation.

Die Entwicklung der jeweiligen Technologie ist damit natürlich nicht abgeschlossen. Es handelt sich lediglich um festgeschriebene Entwicklungsstadien, damit Entwickler Fixpunkte haben, an die sie sich halten können. Die Recommendations erhalten aus diesem Grund Versionsnummern, ähnlich wie bei Software-Produkten üblich. So gibt es beispielsweise HTML 4.01, CSS2 oder XML 1.0. Für neue Dokumentversionen wird das Review-Verfahren ganz oder teilweise wiederholt.

Sämtliche Recommendations des W3-Konsortiums, auch in ihren vorausgehenden Review-Stufen, sind über folgende Web-Adresse erreichbar:

englischsprachige Seite http://www.w3.org/TR/

Das "TR" steht dabei für Technical Reports (technische Berichte). Sämtliche Dokumente werden in englischer Sprache veröffentlicht, und die englischsprachige Version ist die normative Version. Viele der Dokumente sind aber auch bereits in andere Sprachen übersetzt worden, auch ins Deutsche. Über die folgende Adresse können Sie verfügbare Übersetzungen aufrufen:

englischsprachige Seite http://www.w3.org/Consortium/Translation/

Alle wichtigen Recommendations des W3-Konsortiums liegen im HTML-Format vor und können von den Web-Seiten des W3-Konsortiums in gezippter Form heruntergeladen werden. Auf diese Weise kann sich jeder Web-Entwickler lokale Kopien derjenigen Dokumente besorgen, die er für seine tägliche Arbeit benötigt. Wenn Sie sich ernsthaft mit HTML, CSS, XML usw. beschäftigen wollen, ist es dringend zu empfehlen, sich diese Dokumente zu besorgen und sich damit zu beschäftigen.

Requests For Comments (RFCs)

Während die Recommendations des W3-Konsortiums speziell für das World Wide Web gelten, gibt es auch Dokumente für technische Standards im Internet allgemein. Das Verfahren für diese Standards ist nicht ganz so straff organisiert wie es durch die Organisation des W3-Konsortiums möglich ist. Doch das Verfahren hat sich bewährt, und die Dokumente gelten für Entwickler als verbindliche Grundlagen.

Die Requests for Comments (RFCs) (wörtlich: "Antrag auf Kommentierung") sind der Dokumenttyp für solche Beschreibungen. Die Sammlung der RFCs wird seit den Anfangstagen des ARPANET, also seit 1969, geführt. Neue RFCs erhalten fortlaufende Nummern. So entstehen Dokumentnamen wie RFC 959 oder RFC 1867. Einer der RFCs, der RFC mit der Nummer 1543, beschreibt, wie RFCs auszusehen haben. Denn nur wenn ein einheitliches Schema eingehalten wird, ist sichergestellt, dass die RFCs eine gleichbleibende Qualität haben. Verwaltet werden die RFCs heute von der Organisation englischsprachige Seite Internet Engineering Task Force (IETF) und dem englischsprachige Seite RFC-Editor.

Jeder Internet-Teilnehmer kann zu neuen RFCs beitragen. Wer einen neuen Standard vorschlagen möchte, z.B. ein bestimmtes Dateiformat oder ein bestimmtes technisches Ablaufverfahren, der kann einen so genannten Internet Draft (Internet-Entwurf) verfassen. Dabei hält er sich bereits an die im RFC 1543 festgelegten Regeln, wie die Beschreibung auszusehen hat. Den fertigen Internet-Draft reicht er bei der IETF-Organisation ein. Dort gibt es eine Mailing-Liste, die alle an technischen Standards interessierten Internet-Teilnehmer abonnieren können. Neue Internet-Drafts werden in dieser Mailing-Liste bekannt gemacht und können diskutiert werden. Aus den Diskussionen ergeben sich in der Regel noch Korrekturen, Verbesserungsvorschläge usw., die der Verfasser des Internet Drafts in sein Dokument einbringt. Nach einer angemessenen Diskussionsphase entscheidet schließlich die IETF-Organisation darüber, ob das Dokument ein offizieller RFC wird. Wenn ja, erhält es eine RFC-Nummer und wird in die Sammlung der RFCs aufgenommen.

RFCs enthalten viel Wissen, mitunter aber auch persönliche Ansichten der Autoren oder humorvolle Passagen. Viele wichtige Defacto-Standards im Internet, etwa das HTTP-Protokoll oder die MIME-Technik für E-Mails, liegen in Gestalt einer oder mehrerer RFCs vor. Aus RFCs sind auch schon häufig Teile von W3C-Recommendations hervorgegangen. So liegen etwa den heute im HTML-Standard verankerten Elementen für Multimediaobjekte oder Tabellen ursprünglich RFCs zugrunde.

RFCs sind im Original reine Textdateien und durchgängig in englischer Sprache verfasst. Über die Web-Adresse englischsprachige Seite http://www.rfc-editor.org/rfc.html können Sie die aktuelle Sammlung der RFCs aufrufen.

Es ist sehr empfehlenswert, sich die Liste der RFCs mal in Ruhe anzusehen und einzelne RFCs daraus aufzurufen. Als Web-Entwickler sollten Sie den Dokumenttyp der RFCs kennen und wissen, dass in dieser Sammlung etliche Standards beschrieben sind, die Sie möglicherweise mal brauchen.

Frequently Asked Questions (FAQs)

Frequently Asked Questions (häufig gestellte Fragen) sind keine offiziellen Dokumente in dem Sinn, dass sie von einer Organisation herausgegeben und verwaltet werden. Es handelt sich einfach um einen Dokumentationstyp, der sich im Internet etabliert hat und eine lange Tradition hat. Es gibt FAQs zu allen nur erdenklichen Themen - von Tieren über Politik und Religion bis hin zu technischen Fragen zum Internet. Im Web gibt es unter der Domain englischsprachige Seite faqs.org eine Sammelstelle für FAQs. Es handelt sich dabei um eine Sammlung mit Verweisen zu FAQs.

FAQs basieren auf Fragen, die in Mailing-Listen, Newsgroups oder Foren - eben überall dort, wo Internet-Teilnehmer sich gegenseitig austauschen können - immer wieder auftauchen und gestellt werden. Eine beliebte Frage in Foren für Web-Seiten-Entwickler lautet beispielsweise: "Wie programmiere ich einen Passwortschutz für meine Seiten?". Anstatt eine Dokumentation zu schreiben, die sich inhaltlich in Kapitel, Themen, Unterthemen usw. aufgliedert, enthält eine FAQ als Unterüberschriften genau diese Fragen, als Frage formuliert. Unterhalb davon wird dann eine ordentliche und zielführende Antwort gegeben. In den Diskussionsbereichen, wo solche Fragen immer wieder auftauchen, können die "alten Hasen" dann, bevor sie nervlich explodieren, weil die gleiche Frage schon zum dritten mal innerhalb von zwei Tagen gestellt wurde, einfach auf die FAQ verweisen. FAQs sind deshalb mittlerweile auch meistens im Web in Form von Web-Seiten verfügbar - denn das ist die bequemste Form, den Fragesteller direkt auf die Antwort zu seiner Frage zu verweisen.

Gerade wenn Sie im Netz auf der Suche nach Seite Support sind und sich noch nicht sonderlich auskennen, sollten Sie auf jeden Fall folgsam sein, wenn man Sie auf eine FAQ verweist. Denn FAQs sind aus der Praxis entstanden und tragen dazu bei, dass sich Hilfestellungen auf Probleme konzentrieren können, die nicht so alltäglich sind.

Anbieter-Dokumentationen

Alle Kapitel Web-Technologien, die nicht vom W3-Konsortium standardisiert werden, sind trotzdem irgendwo "im Original" dokumentiert. Denn hinter solchen Technologien, sei es nun Java, Perl, PHP usw., stecken Anbieter, die ein Interesse an der Verbreitung ihrer Technologie haben. Verbreiten kann sich eine Technologie aber nur, wenn sie ordentlich dokumentiert ist. Deshalb finden Sie normalerweise auf den Web-Seiten der Technologie-Anbieter die verbindlichen Dokumentationen für die jeweilige Technologie.

Wichtig sind für Web-Entwickler auch die Entwicklerseiten der großen Browser-Anbieter. Die beiden folgenden Angebote sollte jeder, der sich mit dem Erstellen von Web-Seiten beschäftigt, kennen:

englischsprachige Seite Entwicklerseiten von Netscape (archivierte Version) (Anmerkung: AOL als Besitzer von Netscape hat den Originalserver im Oktober 2004 abgeschaltet. Im Februar 2005 schloss die Mozilla Foundation mit AOL eine Vereinbarung, um die Inhalte bald wieder verfügbar zu machen. Bis dahin führt dieser Link zu einer Ende 2003 archivierten Version.)
Dort finden Sie beispielsweise die Original-Dokumentationen zu JavaScript, aber auch Informationen, welche HTML-Elemente von welcher Netscape-Version unterstützt werden. Zahlreiche technische Notizen und Artikel verraten bestimmte Tricks und Kniffe, wie man so programmiert, dass der Netscape-Browser es korrekt interpretiert.

englischsprachige Seite Entwicklerseiten von Microsoft
Dort finden Sie beispielsweise die Original-Dokumentationen zu JScript, der Microsoft-Implementierung von JavaScript. Ein wenig suchen müssen Sie allerdings, denn dort werden auch andere Technologien beschrieben, die nichts mit Web-Entwicklung zu tun haben. Der Informationsbestand ist gewaltig.

Freie Dokumentationen

Freie Dokumentationen sind solche wie die, die Sie gerade lesen. Solche Dokumentationen können von jedem Autor, der sich dazu bemüßigt fühlt, im Netz veröffentlicht werden. Es gibt jedoch keinerlei kontrollierende Instanz dafür, und deshalb gibt es auch keine Garantie dafür, wie vollständig und sachlich richtig solche Beschreibungen sind. In der Regel entscheidet allerdings die Netzgemeinde über den Wert solcher Dokumentationen. Gute Dokumentationen werden von vielen anderen Web-Seiten aus verlinkt, werden dadurch immer bekannter und erreichen auf diese Weise den Status einer anerkannt brauchbaren Informationsquelle.

Eine wichtige Aufgabe der freien Dokumentationen ist es vor allem, das Wissen über Technologien in die einzelnen Landessprachen zu tragen. Denn gerade Anfänger tun sich nun mal leichter damit, eine neue, komplizierte Materie erst mal in der eigenen Sprache vermittelt zu bekommen. Und Menschen, die des Englischen nicht oder kaum mächtig sind, haben gar keine andere Wahl, als das Wissen über vermittelnde Quellen der eigenen Sprache zu erwerben.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie aktuelle Verweise auf freie Dokumentationen in folgenden Seiten:

Online-Seite SELFHTML-Linkverzeichnis: HTML/XHTML
Online-Seite SELFHTML-Linkverzeichnis: CSS Stylesheets
Online-Seite SELFHTML-Linkverzeichnis: XML, DTDs und XSL(T)
Online-Seite SELFHTML-Linkverzeichnis: JavaScript und DOM
Online-Seite SELFHTML-Linkverzeichnis: Dynamisches HTML (DHTML)
Online-Seite SELFHTML-Linkverzeichnis: CGI/Perl
Online-Seite SELFHTML-Linkverzeichnis: PHP
Online-Seite SELFHTML-Linkverzeichnis: ASP/.Net-Sprachen
Online-Seite SELFHTML-Linkverzeichnis: Java

Bücher

Wenn Sie die EDV-Fachabteilung einer Großstadt-Buchhandlung betreten, können Sie so viele Bücher rund um Themen zum Entwickeln von Web-Seiten mit nach Hause nehmen, dass Sie mehrere Regalwände damit füllen können. Vorausgesetzt, der Geldbeutel lässt es zu, denn preiswert sind solche Fachbücher fast nie. Dafür sind viele dieser Bücher schlecht. Aber nicht alle, manche sind auch hervorragend. Der Grund, warum es so viele schlechte Computer-Fachbücher gibt, liegt darin, dass es einerseits einen riesigen Lesermarkt für diese Fachliteratur gibt, aber nicht genügend Autoren mit echtem "Tiefenwissen". Es gibt zwar jede Menge gute Programmierer und Fachleute mit dem nötigen Wissen, doch die sind meistens mit Projekten ausgelastet und auch oft nicht in der Lage, ein Buch zu schreiben. Also suchen die EDV-Verlage, den großen Absatzmarkt im Auge, oft händeringend nach Autoren und gehen dabei nicht selten das Risiko ein, einen Titel zu produzieren, bei dem die Qualität zu kurz kommt. Meistens haben die Autoren auch nicht mehr als zwei, drei Monate Zeit, um Bücher von mehreren hundert Seiten aus dem Boden zu stampfen. Das verleitet natürlich dazu, woanders abzukupfern, ohne den Stoff wirklich zu durchdringen, Inhalte mit "Füllmaterial" zu strecken, uneinheitliche Terminologie zu verwenden usw. - vor allem dann, wenn der Autor nicht aus einem vorhandenen Praxiswissen schöpfen kann, sondern sich während der Erstellungsphase die Materie selber erst erarbeiten muss. Viele Bücher werden auch für den "schnellen Markt" produziert, d.h. sie werden ein paar Monate vom Verlag lang stark beworben, und dann verschwinden sie wieder, weil die Kalkulation des Verlags aufgegangen ist und ein weiteres Bewerben zu aufwendig wäre.

Bevor Sie sich Fachbücher anschaffen, sollten Sie daher nach Rezensionen suchen. Ganz hervorragend dazu geeignet sind die großen Internet-Buchanbieter wie deutschsprachige Seite Amazon. Auch wenn Sie lieber in einer realen Buchhandlung kaufen, lohnt es sich, dort Vorab-Informationen einzuholen. Denn Leser können dort zu Büchern, die sie gelesen haben, Rezensionen schreiben. Bei vielen Büchern kommen auf diese Weise mehrere Rezensionen zusammen, die sehr authentisch sind, weil sie unmittelbare Erfahrungen von Lesern widerspiegeln. Suchen Sie einfach nach Büchern zu einem gewünschten Thema, z.B. zu Büchern über HTML oder Perl, und lesen Sie, was andere darüber zu berichten wissen. Das ist zumindest sinnvoller, als sich nur von den Klappentexten der Bücher leiten zu lassen.

Generell lässt sich sagen, dass Fachbücher um so besser werden, je ausgereifter eine Technologie ist. Wenn neue, von der Fachszene als bedeutsam eingeschätzte Technologien entstehen, wie es in den letzten Jahren beispielsweise bei Java oder XML der Fall war, dann überstürzen sich viele Verlage geradezu, um bei den ersten zu sein, die etwas zu dem betreffenden Thema publizieren. Was dabei herauskommt, ist aber fast immer mangelhaft, da die Technologien meist selber noch nicht ordentlich dokumentiert und noch in Entwicklung begriffen sind. In solchen Phasen ist es allemal besser, sich an kostenlose Dokumente im Internet zu halten. Ist eine Technologie dagegen gut eingeführt und etabliert, wie es mittlerweile etwa bei HTML der Fall ist, dann gibt es in der Regel auch ausgereifte Fachbücher dazu.

nach oben
weiter | Seite Software
zurück | Seite Andere Schnittstellen
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Hilfsmittel

© 2007 Seite Impressum


SELFHTML: Einführung / Hilfsmittel / Software

SELFHTML

Software
Informationsseite

nach unten Allgemeines zu Software für Web-Entwickler
nach unten HTML-Editoren
nach unten Web-Browser
nach unten XML-Werkzeuge
nach unten FTP-Programme
nach unten Webserver
nach unten Grafik-Programme
nach unten Diverse Tools
nach unten

Allgemeines zu Software für Web-Entwickler

Das wichtigste, was es zum Thema Software in Bezug auf das Entwickeln von Web-Seiten zu sagen gibt, ist, dass es "die Software" nicht gibt und hoffentlich auch nie geben wird. Lediglich bei proprietären Technologien wie Seite Flash sind Sie auf bestimmte Software-Produkte angewiesen. Alle internet-genuinen Technologien sind dagegen bewusst software-unabhängig ausgelegt. Das hat gute Gründe. Im Internet treffen alle nur erdenklichen Betriebssysteme und Rechnertypen aufeinander, und Technologien, die für alle verfügbar sein sollen, haben keine große Chancen, wenn sie systemspezifisch sind oder spezielle Anforderungen stellen, die Teile der Internet-Nutzer ausschließen.

Die Software-Unabhängigkeit der Technologien führt auch dazu, dass Software-Hersteller keine Kundenbindung mehr über Dateiformate erzwingen können und dem Kunden dafür unflexible und unpraktische Anwendungsoberflächen zumuten. Software-Produkte können sich bei software-unabhängigen Daten nur dadurch gegenüber der Konkurrenz profilieren, indem sie den Anwender durch mehr Effizienz, bessere Übersichtlichkeit und eine intelligentere Oberfläche überzeugen. Software-Hersteller werden dadurch gezwungen, sich mehr Gedanken über Anwender-Ergonomie und intelligentes Oberflächen-Design zu machen.

Immer wieder treten Software-Produkte allerdings mit dem Anspruch an, dem Anwender ein Rundum-Sorglos-Paket anzubieten, das ihm das Erstellen, Verwalten und Überwachen der eigenen Web-Seiten mit dem Zusatz "kinderleicht und ohne tiefere Kenntnisse bedienbar" anpreist. Das stimmt aber meistens nicht. Gerade solche Software-Pakete sind meist hoffnungslos mit Funktionen, Menüs, Assistenten und Dialogen überladen. Der Anwender verbringt dann erst mal viel Zeit damit, sich den Umgang mit der Software anzueignen. Diese Zeit könnte in vielen Fällen sinnvoller darin investiert werden, sich direkt mit den dahintersteckenden Technologien zu beschäftigen.

Genauso dumm ist jedoch die Behauptung, sauber arbeiten könne man nur mit archaischen Werkzeugen wie dem Windows-Notepad-Editor oder der FTP-Kommandozeile. Software ist dazu da, um Aufgaben zu erleichtern, und wo sie das tut, ist sie auch angebracht. Es gibt eine Menge ausgereifter Tools, die beim Erstellen von Web-Seiten Zeit sparen und Fehler vermeiden helfen. Es ist jedoch sinnlos, bestimmte Produkte zu empfehlen. Denn der persönliche Arbeitsstil und die Einschätzung des "Look and Feel" einer Software sind von Mensch zu Mensch verschieden. Verschiedene Produkte einmal auszuprobieren und zu versuchen, damit warm zu werden, bleibt Ihnen nicht erspart. Glücklicherweise sind die meisten Produkte, auch wenn sie kostenpflichtig sind, als Ausprobierversion im Internet downloadbar. So können Sie ein Produkt unverbindlich testen, bevor Sie sich entschließen, es zu erwerben. Von dieser Möglichkeit sollten Sie unbedingt Gebrauch machen.

HTML-Editoren

Grundsätzlich kann man bei Seite HTML-Editoren zwischen Quelltext basierten Editoren und WYSIWYG-Editoren unterscheiden (WYSIWYG = What You See Is What You Get - Was Sie sehen ist das, was rauskommt). Bei Quelltext basierten Editoren arbeiten Sie direkt mit den HTML-Auszeichnungen. Solche Editoren verfügen in der Regel über eine Werkzeugleiste und diverse Menübefehle oder Dialoge, um die HTML-Auszeichnungen in den Text einzufügen. Die HTML-Auszeichnungen erscheinen sichtbar im Text, in der Regel andersfarbig und optisch gut erkennbar dargestellt ("Syntax-Highlighting"). WYSIWYG-Editoren bieten ebenfalls Werkzeugleisten, Menübefehle und Dialoge an, um das Setzen der HTML-Auszeichnungen zu unterstützen. Der Unterschied ist jedoch, dass die Auszeichnungen nicht angezeigt werden (bzw. nur auf Wunsch). Stattdessen wird der Text bereits so am Bildschirm angezeigt wie später im Web-Browser. Das bedeutet aber umgekehrt nicht unbedingt, dass der Text nachher in allen Web-Browsern genauso erscheint wie im Fenster des WYSIWYG-Editors - "WYSIWYG" ist eigentlich eine gefährliche Irreführung und ein Versprechen, das nur schwer einhaltbar ist angesichts der Browser-Vielfalt und der vielen Tücken in den Browsern.

Lassen Sie sich nicht zu sehr von dem häufig anzutreffenden Glaubenskrieg zwischen Anhängern und Gegnern der WYSIWYG-Editoren beeindrucken. Versuchen Sie herauszufinden, womit Sie persönlich am besten arbeiten können.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie aktuelle Verweise zu HTML-Editoren:

Online-Seite SELFHTML-Linkverzeichnis: HTML-Editoren

Web-Browser

Web-Browser sind Visualisierungsprogramme für Web-Seiten. Web-Browser beherrschen das HTTP-Protokoll und können mit Web-Servern kommunizieren, um etwa die Daten einer Web-Adresse anzufordern. Alle Web-Browser beherrschen mehr oder weniger gut HTML, die meisten mittlerweile auch die ergänzenden Technologien CSS und JavaScript, allerdings uneinheitlich vollständig. Server-seitig dynamische Anwendungen wie CGI-Scripts oder PHP-Anweisungen sind für Browser unproblematisch, solange sie HTML-Code für den Browser erzeugen. Große Unterschiede gibt es dagegen noch bei der Unterstützung von Multimedia. Mit Web-Browsern können Sie auch offline HTML-Dateien auf Ihrem Rechner öffnen. Das ist z.B. wichtig, wenn Sie Web-Seiten lokal und ohne Internet-Verbindung austesten wollen.

Als Entwickler von Web-Seiten sollten Sie nicht nur einen Browser auf Ihrem Rechner installiert haben, sondern so viele Produkte wie nur möglich. Mit welchem Browser Sie persönlich am liebsten surfen, bleibt Ihnen überlassen. Aber die Besucher Ihrer Seiten verwenden nun mal unterschiedliche Produkte, und deshalb sollten Sie Ihre Seiten stets mit mehreren Produkten überprüfen. Denn leider gibt es immer noch viele ärgerliche Unterschiede zwischen den Browsern im Detail. Und Ihr Ehrgeiz sollte sein, attraktive Web-Seiten anzubieten, die aber trotzdem keine Anwender ausschließen, nur weil diese nicht den gleichen Browser verwenden wie Sie selbst.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie aktuelle Verweise zu Web-Browsern:

Online-Seite SELFHTML-Linkverzeichnis: Web-Browser

XML-Werkzeuge

Viele HTML-Editoren sind nicht nur für HTML geeignet, sondern auch gut als Texteditoren für andere Sprachen verwendbar. Dennoch gibt es spezielle Seite XML-Editoren, da es beim Bearbeiten von XML-Daten häufig auf andere Dinge ankommt als beim Bearbeiten von HTML-Daten. Denn XML hat zunächst mal nichts mit Seiten-Layouts zu tun. Und XML-Daten müssen auch keine textorientierten Daten sein. Ebensogut lassen sich mit XML auch grafische, akustische oder formale Daten beschreiben. Dabei kommt es stärker darauf an, die Baumstruktur der Daten optimal dargestellt zu bekommen, und bei Verwendung von DTDs (Dokumenttyp-Definitionen, deren Regeln die eingegebenen Daten entsprechen müssen) ist es hilfreich, wenn der Editor gar keine Eingaben zulässt, die nicht den Regeln entsprechen.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie aktuelle Verweise zu XML-Werkzeugen:

Online-Seite SELFHTML-Linkverzeichnis: XML-Software

FTP-Programme

Um die Dateien eines Web-Projekts ins Web auf den Server zu laden, wo Sie Speicherplatz zur Verfügung gestellt bekommen haben, brauchen Sie in der Regel Software, die das Seite File-Transfer-Protokoll (FTP) unterstützt. Mit solchen Programmen können Sie ihre Projektdateien hochladen und auf dem Server-Rechner verwalten (umbenennen, löschen usw.).

Die meisten modernen FTP-Programme unterscheiden sich äußerlich kaum von allseits bekannten Datei-Commandern oder Explorern. In einem Bereich zeigen sie die lokale Verzeichnisstruktur an, in einem anderen Bereich die Verzeichnisstruktur des aufgerufenen Server-Rechners. Durch Markieren und Ziehen mit der Maus lassen sich Dateien uploaden oder downloaden. Ebenso einfach lassen sich Dateien löschen oder umbenennen. FTP-Programme verfügen in der Regel auch über eine "Site"-Verwaltung. Dort können Sie für jede benutzte FTP-Adresse die Zugangsdaten und technische Einstellungen speichern.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie aktuelle Verweise zu FTP-Programmen:

Online-Seite SELFHTML-Linkverzeichnis: FTP-Programme und SFTP/SCP-Programme

Webserver

Viele PC-Anwender mit Internet-Zugang verbinden mit dem Begriff "Webserver" eine Art Großrechner, auf dem die Daten liegen, die im Internet zu sehen sind. Eigentlich ist ein Webserver jedoch eine gar nicht besonders umfangreiche Software, die im Prinzip auf jedem Rechner laufen kann, also nicht nur auf Server-Rechnern im Internet, sondern auch auf jedem PC bei Ihnen zuhause. Es ist nicht einmal eine Internet-Verbindung erforderlich, um einen Webserver zu betreiben. Es müssen lediglich TCP/IP-Sockets unterstützt werden. Wenn Ihr Betriebssystem also TCP/IP-Sockets unterstützt, sind bereits alle Voraussetzungen erfüllt, um einen Webserver offline und ohne Verbindungskosten zu betreiben. Webbrowser und Webserver laufen dann auf dem gleichen Rechner, können aber so miteinander kommunizieren wie es bei Online-Verbindungen ins Internet üblich ist.

Ein Webserver übermittelt Daten mit Hilfe des auf das TCP/IP-Protokoll aufsetzenden HTTP-Protokolls. Über dieses Protokoll können Sie sich in einem RFC (Request for comments - eine normierende Empfehlung) des W3C informieren. Der zur Zeit im Internet dominierende Webserver ist der Apache HTTP-Webserver der englischsprachige Seite Apache Software Foundation.

Im Online-Angebot von SELFHTML aktuell finden Sie einige Artikel zur Konfiguration eines Webservers:

Online-Seite Artikel zur Serverkonfiguration

Grafik-Programme

Grafikprogramme sind eine wichtige Ergänzung zum Erstellen aussagekräftiger Web-Seiten. Es gibt eine Reihe guter bis hervorragender Shareware-Programme zum Erstellen, Konvertieren und Nachbearbeiten von Grafiken. Wer professionelle grafische Ansprüche hat, wird allerdings kaum um ein teures Profi-Programm herumkommen, und sei es nur für Spezialaufgaben.

Auf jeden Fall müssen die eingesetzten Programme die Dateiformate Seite GIF, Seite JPEG und Seite PNG unterstützen, denn das sind die verbreiteten Grafikformate im Web, die praktisch alle Browser direkt anzeigen können. Zum Entstehungsprozess einer Grafik tragen jedoch häufig auch andere Programme bei, etwa vektororientierte Programme oder Raytraycing-Programme.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie aktuelle Verweise zu Grafikprogrammen:

Online-Seite SELFHTML-Linkverzeichnis: Grafikprogramme

Diverse Tools

Es gibt eine Menge anderer Programme und Software-Typen, die Web-Entwickler sinnvoll einsetzen können. Dazu gehören auf jeden Fall Standard-Tools wie Pack- und Entpackprogramme für Dateiformate wie ZIP, RAR usw. Denn oft werden Sie beispielsweise Daten Ihres Web-Projekts per E-Mail übertragen, sei es an Kunden, Freunde usw. Um dabei die Datenmengen klein zu halten und statt viele Dateien nur eine an die E-Mail anhängen zu müssen, sind Packer-Programme wichtig. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie aktuelle Verweise zu Packprogrammen:

Online-Seite SELFHTML-Linkverzeichnis: Packer-/Entpackerprogramme

Weiterhin sind oft andere Internet-Client-Programme wichtig. So können Sie bei vielen Providern auch mit Seite Telnet/SSH auf Ihre Daten auf dem Server zugreifen. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie aktuelle Verweise zu Programmen für Telnet und SSH:

Online-Seite SELFHTML-Linkverzeichnis: Telnet- und SSH-Programme

Gute Software für verschiedene Zwecke finden Sie schließlich auf dieser Seite:

Online-Seite SELFHTML-Linkverzeichnis: Diverse Software-Tools

nach oben
weiter | Seite Services im Web
zurück | Seite Dokumente und Dokumentationen
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Hilfsmittel

© 2007 Seite Impressum


SELFHTML: Einführung / Hilfsmittel / Services im Web

SELFHTML

Services im Web
Informationsseite

nach unten Allgemeines zu Web-Services
nach unten Provider-Übersichten
nach unten CGI-Services für eigene dynamische Web-Seiten
nach unten Services zur Optimierung des eigenen Web-Angebots
nach unten

Allgemeines zu Web-Services

Was hier unter Web-Services verstanden wird, sind Web-Angebote, die anderen Web-Anbietern helfen, ihr eigenes Web-Angebot ins Web zu bringen oder um Features zu erweitern, die im Rahmen des eigenen Web-Angebots aufgrund fehlender Möglichkeiten nicht realisierbar sind. Solche Web-Services bieten beispielsweise fertige Seite CGI-Scripts an, die Sie von Ihren eigenen Seiten aus aufrufen können. Auf diese Weise können Sie etwa Foren, Chats, Gästebücher oder Zugriffszähler in Ihre Web-Seiten integrieren, auch wenn Sie selber keine Möglichkeit haben, CGI-Scripts zu installieren, oder wenn Sie sich dem Selberprogrammieren nicht gewachsen fühlen. Einige dieser Web-Services sind werbefinanziert, d.h. es werden automatisch Werbe-Banner eingeblendet, wenn Sie sie verwenden. Andere sind für eine geringe monatliche oder jährliche Gebühr nutzbar, und wieder andere sind völlig frei.

Provider-Übersichten

Die Providerfrage (Provider = Anbieter) steht normalerweise am Beginn jedes Vorhabens, eigene Seiten ins Web zu bringen. Falls Sie sich über die grundsätzlichen Möglichkeiten und Unterschiede informieren wollen, können Sie den Abschnitt Seite Web-Projekte publizieren durchlesen. Bereits für die Entscheidung, wie Sie Ihr Angebot hosten lassen wollen, wie viel Sie bereit sind dafür zu zahlen, und welche Leistungen Sie für welche Kosten erwarten können, gibt es Web-Services - nämlich Provider-Übersichten. Dort werden aktuelle Preis-/Leistungsinformationen zu etlichen Providern gesammelt und so bereitgestellt, dass Sie Preise und Leistungen direkt vergleichen können. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu Web-Seiten, auf denen Provider-Angebote aller hier vorgestellten Typen aufgelistet und verglichen werden:

Online-Seite SELFHTML-Linkverzeichnis: Provider

CGI-Services für eigene dynamische Web-Seiten

Viele Homepage-Anbieter wünschen sich zumindest ein Gästebuch, in dem sich Benutzer eintragen und ihren Kommentar zu den Seiten abgeben können. Die Kommentare sind dann in die Seiten selbst eingebunden und einsehbar. Dazu ist jedoch ein Seite CGI-Script oder eine CGI vergleichbare Technologie erforderlich. Ähnlich ist es, wenn Sie einen der mittlerweile allerdings nicht mehr so beliebten "Counter" auf Ihre Einstiegsseite einbinden wollen, also einen Zähler, der anzeigt, wie viele Besucher schon auf der Seite waren. Immer beliebter werden auch eigene, web-basierte Foren, wo die Besucher untereinander diskutieren können. Dazu noch einen Chat, und schon kann die Homepage als Kommunikationsplattform für Besucher dienen. Sinnvoll ist so etwas natürlich erst, wenn Sie genügend Besucher auf Ihren Seiten haben. Eine weitere wichtige, häufig benötigte Anwendung ist ein so genannter Form-Mailer. So etwas können Sie gut gebrauchen, wenn Sie eigene Formulare auf Ihren Web-Seiten anbieten, beispielsweise, um von den Seitenbesuchern Feedback, Anfragen oder Vorbestellungen einzuholen.

All diese Features erfordern fortgeschrittene Web-Technologien wie Seite Perl, Seite PHP oder Seite Java.

Es gibt Web-Services, bei denen Sie sich selber und ohne weitere Programmierkenntnisse ein Gästebuch, ein Forum oder dergleichen einrichten können. Vom Anbieter erhalten Sie dann normalerweise Informationen, was Sie in Ihre eigenen Web-Seiten einbauen müssen, damit der Fremd-Service innerhalb Ihres eigenen Angebots funktioniert. In der Regel sind das bestimmte Seite HTML-Quelltextbausteine, die Sie in Ihre HTML-Dateien an bestimmten Stellen einfügen müssen.

Einige dieser Dienste sind kostenlos, andere können Sie nur gegen Gebühr in Anspruch nehmen. Die Gebühren sind jedoch meist sehr gering (z.B. 10.- Euro/Jahr für Zugriffszähler und Statistik für die eigene Homepage).

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu Web-Seiten, auf denen solche Web-Services angeboten werden:

Online-Seite SELFHTML-Linkverzeichnis: Homepage-Services / Counter und Statistiken
Online-Seite SELFHTML-Linkverzeichnis: Homepage-Services / Gästebücher und Foren
Online-Seite SELFHTML-Linkverzeichnis: Homepage-Services / diverse Services

Services zur Optimierung des eigenen Web-Angebots

Diese Sorte von Web-Services hilft Ihnen beim Optimieren Ihrer Web-Seiten und bei der Fehlersuche. Der bekannteste Service dieser Art ist zweifellos der englischsprachige Seite Validator des W3-Konsortiums, mit dessen Hilfe Sie online Ihre Web-Seiten auf fehlerfreie HTML-Syntax überprüfen können. Im Online-Angebot von SELFHTML aktuell gibt es auch einen eigenen Online-Seite HTML/XHTML/XML/WML Validierungsservice. Ähnliche Services gibt es auch für andere Sprachen. Ferner gibt es Services wie "Link-Checker", wo Sie Ihre Seiten daraufhin überprüfen können, ob alle darin enthaltenen Verweise funktionieren, aber auch Services, bei denen Sie testen lassen können, wie gut oder schlecht Ihre Web-Seiten für Besucher erreichbar sind (die Internet-Anbindung kann von Provider zu Provider sehr unterschiedlich sein), oder wie lange die durchschnittlichen Ladezeiten Ihrer Seiten bei verschiedenen Internet-Zugangsverbindungen sind.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu Services dieser Art:

Online-Seite SELFHTML-Linkverzeichnis: Homepage-Services / Seiten-Checker

nach oben
weiter | Seite Support
zurück | Seite Software
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Hilfsmittel

© 2007 Seite Impressum


SELFHTML: Einführung / Hilfsmittel / Support

SELFHTML

Support
Informationsseite

nach unten Wo es Support gibt
nach unten Wie freiwillige Hilfeleistung funktioniert
nach unten

Wo es Support gibt

Wenn Sie sich stundenlang mit Problemen von der Art herumschlagen, dass Netscape eine Tabelle anders darstellt als der Internet Explorer, oder dass Sie bei einem JavaScript Fehlermeldungen erhalten, die Sie nicht verstehen, dann werden Sie sich wahrscheinlich "den entscheidenden Tipp" wünschen. Denn oft genügt ja nur ein Hinweis, um einen auf die richtige Fährte zu bringen und ein Problem zu lösen.

Mit solchen Problemen sind Sie allerdings nicht allein. Zigtausend andere haben gleiche, ähnliche oder wieder andere Probleme beim Erstellen ihrer Seiten. Nun gibt es aber gleichzeitig auch zahlreiche Menschen, die Gefallen daran finden, andere zu unterstützen. Diese Konstellation führt dazu, dass es im Netz sehr gut besuchte Orte gibt, an denen Erfahrungsaustausch über das Erstellen von Web-Seiten, über Programmierung usw. möglich ist.

Das größte und vermutlich auch kompetenteste Know-How-System für Fragen und Antworten im Internet ist wohl das Usenet mit seinen Seite Newsgroups. In deutscher Sprache gibt es Newsgroups zu HTML/CSS, zu JavaScript, zu CGI/Perl, zu XML usw.

Die Teilnahme ist kostenlos, jedoch benötigen Sie einen News-Reader (unter Windows genügt beispielsweise das E-Mail-Programm Outlook Express, das zum erweiterten Lieferumfang des Internet Explorers gehört). Außerdem benötigen Sie einen News-Server, von dem Sie die Diskussionsgruppen empfangen können. Fragen Sie, wenn Sie keinen solchen News-Server kennen, Ihren Internet-Zugangsprovider danach, ob er einen solchen Server anbietet. Achten Sie, falls Sie ohnehin einen neuen Zugangs-Provider suchen, gegebenenfalls darauf, dass dieser auch einen Newsgroup-Server anbietet. Bei den meisten News-Servern müssen Sie sich mit Kennwort und Passwort einwählen. Beides erhalten Sie vom Anbieter des News-Servers, in der Regel also vom Zugangs-Provider.

Immer wichtiger werden neben den Newsgroups auch web-basierte Diskussionsforen. Es gibt sogar Web-Angebote, die nichts anderes anbieten als Foren zu bestimmten Themen. Andere wieder bieten Informationen zu diesen Themen an und haben ein angeschlossenes Forum.

Web-basierte Foren haben meist noch keine so lange Tradition wie die Newsgroups, und die Anbieter sind häufig unerfahren in der Rolle eines "virtuellen Kneipenwirts". Die Qualität, das Flair und die Besucherfrequenz solcher Foren kann sehr unterschiedlich sein. Die meisten Foren sind kostenlos benutzbar, einige erfordern allerdings eine namentliche Anmeldung.

Falls Sie nicht so gerne öffentlich posten, gibt es auch noch die Möglichkeit, Mailing-Listen zu abonnieren, die sich mit einem Fachgebiet befassen. Um an einer Mailing-Liste teilzunehmen, genügt ein E-Mail-Programm. Sie abonnieren eine Mailing-Liste, indem Sie eine E-Mail mit einem bestimmten Inhalt an eine bestimmte E-Mail-Adresse senden - viele Mailing-Listen erlauben mittlerweile aber auch das Abonnieren via Web-Formular. Wenn Sie eine Mailing-Liste abonniert haben, erhalten Sie alle E-Mails, die an die Liste gesendet werden. Selber können Sie ebenfalls E-Mails an die Liste senden, die dann an alle anderen Listenteilnehmer versendet werden.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu einschlägigen Newsgroups, web-basierten Foren und Mailing-Listen, die sich mit Themen rund um das Erstellen von Web-Seiten befassen:

Online-Seite WWW-Links: Foren, Newsgroups, Mailing-Listen

Alle diese Diskussionsorte im Netz sind vorwiegend für Probleme mit software-unabhängigen Technologien wie HTML, CSS, XML usw. oder für Probleme mit freeware-basierten Technologien wie Perl, PHP usw. gedacht. Wenn Sie Software käuflich erworben haben und Probleme mit dem Produkt haben, ist immer noch der Produktanbieter die erste Anlaufstelle für Fragen. So unterhalten beispielsweise große Software-Anbieter wie Microsoft, Macromedia oder Adobe neben den üblichen Call-Centern eigene Diskussionsforen auf ihren Web-Seiten oder in Form von Newsgroups.

Wie freiwillige Hilfeleistung funktioniert

Freiwillige Hilfe, wie sie an den weiter oben genannten Diskussionsorten geleistet wird, basiert auf Geben und Nehmen. Wenn Sie als Anfänger an einem solchen Diskussionsort mehrfach Hilfe suchen und auch finden, dann ist es nur fair gegenüber den anderen Teilnehmern, wenn Sie später auch mal ein paar Fragen anderer beantworten, sofern Sie die Antwort wissen. Solche Diskussionsorte leben von der Bereitschaft aller Teilnehmer, sich gegenseitig zu helfen. Mit einer Mentalität vom Typ "Hilfe, aber plötzlich bitte!" werden Sie dort schnell anecken, und an den meisten der genannten Orte werden die Dinge, die Sie dann zu hören bekommen, nicht gerade zimperlich formuliert. Bei offenen Standards und Technologien wie HTML sind Sie nun mal kein behüteter Verbraucher mit Rechten auf Rückgabe, Funktionsgarantie und Rundum-Service. Eine Newsgroup oder ein Diskussionsforum ist kein Geschäft, wo Sie ein Gerät gekauft haben. Wenn Sie allerdings den richtigen Ton treffen, erhalten Sie an solchen Diskussionsorten häufig wesentlich umfassendere und engagiertere Hilfe als dort, wo Sie einen vertraglichen Support-Anspruch haben.

"Den richtigen Ton treffen" betrifft allerdings weniger das rhetorische Geschick. Sprachliche Höchstleistungen werden nicht erwartet, wenn Sie etwas fragen, wohl aber ein paar andere Dinge:

  • Versuchen Sie zunächst alles was in Ihrer Macht steht, um ein Problem selber zu lösen. Für erfahrene Forenleser ist leicht erkennbar, ob Sie bereits selber nach Lösungen gesucht haben oder aus Bequemlichkeit fragen.
  • Wählen Sie einen angemessenen Titel für Ihren Beitrag. Titel wie "JavaScript-Problem!" sind nicht gerade sehr erhellend in einem Forum, in dem es um nichts anderes als um JavaScript geht. Der Titel sollte den Problembereich erkennen lassen, aber auch nicht zu lang sein. Das Problem selber gehört im Text des Beitrags geschildert.
  • Beschreiben Sie Ihr Problem so exakt wie möglich. Beschreiben Sie, mit welcher Testumgebung das Problem besteht, welche Fehlermeldungen Sie eventuell erhalten, und was Sie bereits ausprobiert haben, um das Problem zu lösen. Fügen Sie gegebenenfalls auch Ausschnitte aus Quelltexten bei, von denen Sie wissen, dass dort das Problem steckt - kopieren Sie aber andererseits nicht seitenweise Quelltext in einen Diskussionsbeitrag, damit verärgern Sie die Leser nur. Eine ideale Lösung ist, wenn Sie problematische Seiten an eine sonst unverlinkte Stelle ins Web hochladen und die Adresse dann in der Frage angeben.
  • Bringen Sie ein wenig Freundlichkeit in die Diskussionsgruppe und etwas Respekt vor der Tatsache mit, dass Sie es mit anderen Menschen und nicht mit einer anonymen Antwortmaschine zu tun haben. Sparen Sie nicht an einer lockeren, aber netten Anrede wie "liebe Leute!" - an Diskussionsorten mit jüngerem Publikum reicht auch ein schlichtes "hi!". Benutzen Sie Ihren echten Namen und geben Sie, falls Sie z.B. im Formular eines Beitrags zu einem Web-Forum dazu gezwungen werden, Ihre echte E-Mail-Adresse an. Das schafft Vertrauen und erhöht die Chancen auf brauchbare Antworten. An den meisten Diskussionsorten reden sich grundsätzlich alle mit Du an. Solche Dinge werden Sie allerdings selber schnell feststellen, wenn Sie ein wenig mitlesen - was Sie auf jeden Fall tun sollten, bevor Sie selber etwas beitragen.
  • Lesen Sie, bevor Sie zum ersten Mal etwas beitragen, auch die Seite FAQs, die es zu den meisten Newsgroups, Foren und Mailing-Listen gibt. Dort steht nämlich genau, was in der jeweiligen Diskussionsgruppe erwünscht und unerwünscht ist, welche Quellen Sie kennen sollten, bevor Sie fragen usw. Die tatsächlich am häufigsten gestellten Fachfragen werden dort meist ebenfalls genannt und beantwortet.

Eigentlich sollten diese paar Grundregeln selbstverständlich sein, doch leider wird immer wieder und massenhaft gegen sie verstoßen. In Diskussionsforen und Newsgroups tauchen auch nicht selten sozial geschädigte, sonst kontaktarme Menschen auf, die zu Extremverhalten neigen, bewusst versuchen die Gruppe zu provozieren oder Gefallen daran finden, Diskussionen durch einsilbige und unpassende Bemerkungen zu zerstören. Dagegen hilft in der Regel, Ruhe zu bewahren und sich nicht provozieren zu lassen.

nach oben
weiter | Seite Definitionen zu "Hypertext"
zurück | Seite Services im Web
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Hilfsmittel

© 2007 Seite Impressum


SELFHTML: Einführung / Hypertext

SELFHTML

Hypertext
Kapitelseite

Dieser Abschnitt behandelt ein Thema, das leider viele, die sich mit dem Erstellen von Web-Seiten beschäftigen, links liegen lassen. Dabei ist es ein sehr wichtiges Thema, um die Funktionsweise und die Möglichkeiten des Web zu begreifen. Dieses Kapitel beleuchtet die historischen und gedanklichen Hintergründe dessen, was unter "Hypertext" zu verstehen ist. Der Stil in diesem Kapitel ist etwas akademischer als sonst in diesem Dokument, da die Grundgedanken nun mal aus der akademischen Welt stammen.
Der Abschnitt besteht aus folgenden Seiten:

Seite Definitionen zu "Hypertext"
Seite Begriffe rund um Hypertext
Seite Geschichte von Hypertext
Seite Hypertext und menschliches Verstehen

nach oben

© 2007 Seite Impressum


SELFHTML: Einführung / Hypertext / Definitionen zu "Hypertext"

SELFHTML

Definitionen zu "Hypertext"
Informationsseite

nach unten Hypertext und Text
nach unten Hypertext, Hypermedia und Multimedia
nach unten Hypertext, Kapitel, Verzeichnisse und Querverweise
nach unten Hypertext, Computer und Computernetze
nach unten Grundsätzliche Positionen zu Hypertext
nach unten

Hypertext und Text

Text wird "der Reihe nach" geschrieben und gelesen. Diese Linearität liegt jedoch nicht in der Natur des Mediums "Text", sondern an den bisher üblichen Text-Präsentationsmedien. Angefangen von der Papyrus-Rolle bis hin zum modernen Buch: Text wird wie selbstverständlich als Buchstabenwurm an einem langen Spieß aufgereiht. Frederic Vester beschreibt dies am Ende seines Buchs Quellenhinweis Neuland des Denkens folgendermaßen: "Das Medium »Buch« mit der linearen Anordnung eines in diesem Falle ca. 1,9 Kilometer langen Buchstabenwurms ist, wie letztlich die Sprache überhaupt, nur bedingt geeignet für das Thema, das ich mir hier vorgenommen habe. Der Versuch, ein Gesamtbild der vernetzten Wirklichkeit zu geben, die eigentlich nur simultan erfasst werden kann, muss daher zwangsläufig unvollkommen bleiben."

Ohne auf die metaphysische Verzweiflung, die in diesem Zitat zum Ausdruck kommt, näher einzugehen, lässt sich feststellen: es gibt eine moderne Kritik an der Linearität. Nicht unbedingt an der Linearität auf der Ebene einzelner Sätze oder Passagen, sondern auf der Ebene eines größeren Textes, der aus vielen, in sich erkennbaren Teilen besteht und aufgrund seines Präsentationsmediums dazu verdammt ist, von vorne bis hinten wahrgenommen zu werden.

Hypertext ist ein nichtlineares Medium zur Präsentation von solchen Texten. An die Stelle des Buchstabenwurms treten vernetzte Seite Einheiten von Text. Durch die Unterstützung der Computer schwindet die Abhängigkeit von der Rolle, vom rein linearen Medium. Bei Weiterdenkern hat das die Hoffnung ausgelöst, man könne das Verfassen und Lesen von Texten dem menschlichen Denken und Verstehen besser anpassen als bisher.

Hypertext, Hypermedia und Multimedia

Hypertext ist nicht etwas anderes als Text. Hypertext ist nach wie vor Text, nur kein Text mehr, der dem Leser durch sein reines Erscheinungsbild suggeriert, man müsse ihn von vorne bis hinten lesen. Vermittelt wird auch bei Hypertext Information, Unterhaltung usw. Unter den Medien geht der Trend allerdings hin zu visuell auffälligeren Medien, also zu Bildern, Videos, und simulierten, bewegten Welten. Die konsequente Weiterentwicklung von Hypertext ist deshalb "Hypermedia". Hypermedia ist jedoch etwas anderes als "Multimedia", das in aller Munde ist. "Multimedia" heißt nichts anderes als: "viele Medien zugleich". "Hypermedia" bedeutet dagegen: "viele Medien, jedoch in einer Weise organisiert, wie es von Hypertext her bekannt ist". Das Präfix "Hyper-" steht also für eine bestimmte Art von Organisation. Diese Art von Organisation zeichnet sich aus durch Seite Fragmentierung einzelner Einheiten einerseits und intelligente Vernetzung dieser Einheiten andererseits.

Nicht der Unterschied zwischen "Hypertext" und "Hypermedia" ist entscheidend, sondern der Unterschied zwischen "Hyper-" und "Multi-". Alles auf einmal serviert zu bekommen führt lediglich zu Reizüberflutung. Entscheidend ist für den Rezipienten, alles so serviert zu bekommen, wie er es sich jeweils wünscht. Dieses Versprechen versuchen Hypertext und Hypermedia einzulösen.

Hypertext, Kapitel, Verzeichnisse und Querverweise

Stark strukturierte Bücher enthalten im Prinzip alles, was Hypertexte auch enthalten: hierarchische Strukturen (Kapitel und Unterkapitel), verbindende Elemente (Querverweise), sowie unterschiedliche Informationszugänge (Inhaltsverzeichnisse, Stichwortverzeichnisse). Der Unterschied liegt allein in der Präsentation: das Buch "empfiehlt" sich rein äußerlich trotz der nichtlinearen Angebote letztlich, linear bewältigt zu werden - "Seite für Seite". Bei Hypertexten, die am Bildschirm präsentiert werden, wird diese stillschweigende "Recommendation" von Büchern aufgebrochen.

Überspitzt kann man es so ausdrücken: Text in Büchern, auch in stark strukturierten Büchern, liest man; Hypertext dagegen liest man nicht, sondern man "navigiert" darin. Ob das Lesen dabei tatsächlich zu kurz kommt, ist eine durchaus ernstzunehmende Frage, der sich das Medium Hypertext stellen muss.

Es gibt durchaus auch Bücher, die nicht von vorne nach hinten gelesen werden. Lexika beispielsweise, oder auch Fachbücher mit Nachschlage-Charakter. Und genau bei dieser Sorte Literatur hat sich Hypertext bislang auch am erfolgreichsten bewährt. Kaum vorstellbar ist Hypertext dagegen bei literarischen Gattungen wie klassischen, aus einem klaren Handlungsstrang bestehenden Romanen. Andererseits besitzen die meisten modernen Romane eben keinen solchen klaren Handlungsstrang mehr. Seit mindestens hundert Jahren schon bewegt sich auch die schöngeistige Literatur weg von der Linearität. Damit wird sie ebenfalls relevant für Hypertext, auch wenn sich auf diesem Gebiet alles eher noch in der Experimentierphase befindet.

Hypertext, Computer und Computernetze

Hypertext wird heute ausschließlich auf Computern realisiert, weil Computer die spezifischen Anforderungen von Hypertext hervorragend unterstützen. In der Vergangenheit gab es jedoch auch Versuche, so etwas wie Hypertext mit herkömmlichen Mitteln zu realisieren. So kam in den frühen siebziger Jahren ein didaktisches Konzept in Mode, das sich "programmierte Unterweisung" nannte. Es handelte sich um Bücher, die man nicht sequentiell lesen konnte, sondern die so aufgebaut waren, dass der Schüler kleine Informationshäppchen oder Fragen angeboten bekam und dazu eine Auswahl an Querverweisen zu anderen Stellen im Buch. Auch die Verweisziele waren Informationshäppchen oder Kommentare zu der ausgewählten Antwort mit neuen Querverweisangeboten zu anderen Stellen.

Es zeigte sich jedoch, dass das viele Blättern in solchen Büchern nicht gerade die Konzentration auf den Lehrstoff förderte. Hier sind Computer weit überlegen. Ein Klick mit der Maus auf einen Verweis, und das gewünschte Verweisziel wird angezeigt. Diese Tatsache kann gar nicht hoch genug eingeschätzt werden. Unterbrechungszeiten von mehr als drei Sekunden zerstören nachweislich eine anhaltende Konzentration. Blättern dauert meist länger und erfordert außerdem Gehirn-Reserven. Klicken und warten bis der neue Inhalt da ist geht in der Regel schneller und verbraucht keine oder viel weniger Reserven.

Elektronische Präsentation von Text hat allerdings auch Nachteile (es geht hier nicht um die Zwangsvorstellungen von Leuten, die meinen, nicht ohne Papier leben zu können): einem elektronischen Hypertext kann man nicht ansehen, wie groß er ist, d.h. man kann sich keine rechte Vorstellung davon machen. Das kann beängstigend oder beruhigend wirken, je nachdem, wie der Anwender gegenüber dem Medium eingestellt ist. Es kann angenehm sein, nicht zu wissen, wie groß "das Ganze" ist, weil man ja zunächst mal eh nicht alles zu überblicken imstande ist. Es kann aber auch unangenehm sein, so gar keine Vorstellung über das Ganze zu haben. Hypertext-interne Techniken wie Seite Web-Views versuchen entsprechenden Ängsten beim Anwender entgegenzutreten.

Aber es bleibt nicht bei dem Problem, die Größe eines einzelnen Hypertextes zu erfassen. Hypertexte neigen nämlich ferner dazu, sich untereinander zu vernetzen und dadurch immer größere "Ganzheiten" hervorzubringen. Deshalb sind lokal auf einem Computer oder Speichermedium verfügbare Hypertexte auf die Dauer unbefriedigend. Schon früh (bereits 1965 bei Seite Ted Nelson) kam deshalb der Wunsch auf, Hypertext-Einzelprojekte weltweit zu vernetzen. Doch erst Ende der achtziger Jahre, als das Thema Hypertext in weiteren Kreisen diskutiert wurde, wurde die Idee geboren, das weltweite Internet für einen Hypertext-orientierten Dienst zu nutzen. Aus diesen Überlegungen entstand Anfang der neunziger Jahre schließlich das World Wide Web.

Grundsätzliche Positionen zu Hypertext

Folgende grundsätzliche Positionen zu "Hypertext" lassen sich unterscheiden:

  • Jene Position, die in Hypertext die konsequente Weiterentwicklung von stark strukturierten Texten sieht. Zitat Quellenhinweis Kuhlen: "Wir kommen zu dem Ergebnis, dass Hypertext die auch schon in Texten verwendeten nichtlinearen Gestaltungsmittel zum Prinzip erhebt...".
  • Jene Position, die in Hypertext eine neue, besonders benutzerfreundliche Recherche in großen Informations- und Datenbeständen sieht. Zitat Quellenhinweis Schnupp: "Hypertext spannt über Textdokumente eine Hyperstruktur zur Unterstützung von Recherchen auf".
  • Jene Position, die in Hypertext die Schaffung neuer kreativer Freiräume und Dimensionen für Autoren und Leser sowie das Verschwimmen der Grenzen zwischen Autor und Leser sieht. Zitat Quellenhinweis Joyce: "Hypertext narratives become virtual storytellers and narrative is no longer disseminated irreversibly from singer to listener or writer to reader" ("Hypertext-Erzählungen werden virtuelle Geschichtenerzähler, und Erzähltes wird nicht mehr unumkehrbar nur von Sänger zu Zuhörer oder von Autor zu Leser verbreitet").

Rainer Kuhlen vertritt die erste Position am deutlichsten. Über die Linearität von Text schreibt er: "Linearität beruht aus texttheoretischer Sicht auch auf der richtigen Verwendung mikrotextueller, Seite Kohäsion erzeugender Mittel". Dazu gehören z.B. ausdrückliche Leseanweisungen wie "dies ist so zu verstehen, dass...", oder hinweisende Ausdrücke wie "dies wurde ja schon im ersten Kapitel problematisiert". Die Zusammenhänglichkeit linearer Texte benutzt also immer auch Mittel, welche die Linearität sprengen. Diese Linearität sprengenden Mittel werden in Hypertexten einfach zum Prinzip erhoben. Aus Texten mit textimmanenten, Kohäsion erzeugenden Mitteln werden Seite informationelle Einheiten ( Quellenhinweis Kuhlen), die durch ausführbare Verweise untereinander vernetzt werden. Die Verweise leisten dabei nichts grundsätzlich Neues. Es sind keine willkürlichen, sondern semantisch begründbare, argumentative Verknüpfungen, die zur Navigation oder zum Herstellen von Querbezügen dienen. Neu ist nur deren computer-unterstützte Ausführbarkeit.

Im Web gibt es beispielsweise unzählige kleine, in sich abgeschlossene Projekte, die bewusst die Mittel von HTML nutzen, um eine Hypertext-Struktur zu realisieren (die Homepage, bestehend aus ein paar Web-Seiten). Solche Projekte sind jedoch zu klein, um darin umfangreiche Daten-Recherchen durchzuführen. Sie sind am ehesten durch die Position zu beschreiben, die Rainer Kuhlen einnimmt.

P. Schnupp betont dagegen die Recherche-Position am deutlichsten - wohl auch deshalb, weil er kleinen Projekten gar keinen Hypertext-Charakter zubilligt. Seine Einführung zum Thema beginnt mit den Worten: "Das Bedürfnis, aus dem Hypertext entstand, ist das gleiche, welches von der Datei zur Datenbank führte". So wie die Datenbank bei strukturierten Daten gegenüber der Einzeldatei neue Möglichkeiten der Datenabfrage erschloss, will Hypertext "die interaktive Recherche in umfangreichen Textbeständen erleichtern und beschleunigen".

Neu sind für Schnupp bei Hypertext vor allem die intuitiven, kein tieferes EDV-Wissen voraussetzenden Recherche-Techniken: "Ähnlich wie die Spreadsheets dem individuellen Benutzer die Programmierung numerischer Anwendungsaufgaben zugänglich machten, bringt Hypertext ihm die selbständige Erstellung und Pflege umfangreicher Textarchive. Wie bei Daten wird auch bei Texten erst durch deren Verknüpfung ein großer Teil des in ihnen gespeicherten 'Wissens' zugänglich".

Bei Projekten mit großen Textbeständen stößt eine Realisierung mit lauter einzelnen, statisch abgespeicherten und aufrufbaren Texteinheiten in der Tat irgendwann an Grenzen. Bei solchen Datenbeständen erwartet der Anwender zu Recht eine Suchmöglichkeit, die den Datenbestand nach Ausdrücken oder Kriterien durchforstet und die Suchergebnisse "on demand" aufbereitet.

Die Auffassung vom kreativen Grundwesen von Hypertext hält sich ebenfalls noch immer. Gerade im literarischen Bereich wird - zumindest dort, wo die Autoren mit Computern umgehen können - mittlerweile viel mit Hypertext experimentiert. Dabei steht jedoch nicht unbedingt die Transparenz bei der Informationsbeschaffung im Vordergrund, sondern im Gegenteil sogar eher das "Locken des Lesers in lauter interessante Teilwelten". Der Rezipient wird dabei bewusst dem Stress ausgesetzt, an einer anderen Stelle, die er bereits verfolgt, aber per Verweis wieder verlassen hat, etwas zu verpassen. Ob dieses bewusste Unter-Stress-Gesetzt-Werden allerdings vom Rezipienten als spannend oder eher als nervig empfunden wird, gehört zur künstlerischen Kritik. Hypertext ist jedenfalls in der Lage dazu, solche Dinge mit Lesern zu treiben, und vernetzte Texte, die für sich selbst in Anspruch nehmen, ein künstlerischer Ausdruckswille zu sein, lassen sich nicht mit informationswissenschaftlichen Methoden messen.

nach oben
weiter | Seite Begriffe rund um Hypertext
zurück | Seite Support
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Hypertext

© 2007 Seite Impressum


SELFHTML: Einführung / Hypertext / Begriffe rund um Hypertext

SELFHTML

Begriffe rund um Hypertext
Informationsseite

nach unten Nodes, Units, Items, Informationelle Einheiten
nach unten n:m-Relation, kohäsive Geschlossenheit
nach unten Web-Views
nach unten Fish-Eye-Views
nach unten Information Retrieval
nach unten Orientierung, Navigation, "Lost in Hyperspace"
nach unten Pfade, Trails, Guided Tours
nach unten Backtracking, Historie, Lesezeichen
nach unten Browsing, Authoring
nach unten Sharks, Holy Scrollers, Karteisysteme, Buchmetapher
nach unten Hypertext Abstract Machines
nach unten World Wide Web
nach unten

Nodes, Units, Items, Informationelle Einheiten

Hypertexte sind so konzipiert, dass sie nicht zum sequentiellen Lesen gedacht sind. Was aber soll das sequentielle Lesen ersetzen? Die Antwort: Texteinheiten, die in sich abgeschlossen sind und jeweils einen kleinen "Informationshappen" anbieten. Durch die intelligente Vernetzung solcher Texteinheiten entsteht dann jener Informationsraum, den man als Hypertext bezeichnet.

Für die Texteinheiten hat man in der Vergangenheit viele Namen gefunden. Hier eine Auswahl:

  • node (beim Datenmodell nach unten HAM)
  • unit oder item
  • document (beim Software-Produkt Intermedia)
  • card (bei den Software-Produkten NoteCards und HyperCard)
  • information blocks
  • frame (beim Software-Produkt KMS)
  • statement (beim Software-Produkt Augment)
  • message (beim Software-Produkt KnowledgePRO)
  • article (beim Software-Produkt HyperTies)
  • hyper-molecule (beim Software-Produkt HyperCOSTOC)
  • guideline (bei den Software-Produkten Guide und NaviTextSAM)

Einige der genannten Software-Produkte sind historisch und nicht mehr auf dem Markt. Die Liste lässt jedoch erkennen, dass all diese Produkte so etwas wie informationelle Einheiten kennen. Nur das Seite World Wide Web lässt etwas Derartiges vermissen, und auch in Seite HTML gibt es nichts, wodurch sich eine informationelle Einheit definieren lässt. Für diese Zurückhaltung gibt es allerdings gute Gründe. Das Definieren informationeller Einheiten kann nämlich leicht zu Einschränkungen in Bezug auf deren Inhalt führen. Eine "card" oder eine "message" ist im Grunde kein leerer Behälter, sondern ein Behälter, der schon in seinem Namen, aber auch meist durch seine technische Umsetzung gewisse Vorstellungen von dem ausdrückt, was er als Inhalt erwartet. Auf solche Vorgaben wollte man im Web verzichten. In der Regel ist eine HTML-Datei eine sinnvolle informationelle Einheit. Manchmal sind es aber auch Teile einer HTML-Datei, die per Anker anspringbar sind. Auch kann ein ganzes, überschaubares und in sich geschlossenes Projekt, das aus mehreren Dateien besteht, als informationelle Einheit betrachtet werden. Bei dynamisch erzeugten Inhalten sind die Grenzen einer Einheit wieder andere. Im Web ist auch Text möglich, der gar nicht wie "typischer Hypertext" wirkt. Auch die Dokumentation, die Sie hier lesen, hat zum Teil eher klassisch-sequentiellen Lese-Charakter als das, was man von typischem Hypertext erwartet. Dennoch gibt es auch in dieser Dokumentation und im Web allgemein zweifellos einzelne, erkennbare Topics. Es gibt nur kein vorgegebenes Schema, in das sich solche Topics einpassen müssen.

n:m-Relation, kohäsive Geschlossenheit

Eine Hypertext-Einheit muss dem Anspruch genügen, von ganz verschiedenen Kontexten aus gesehen ein sinnvolles Verweisziel zu sein. Wenn der Anwender an irgendeiner anderen Stelle auf einen Verweis klickt, der zu dieser Texteinheit hier führt, muss die Texteinheit so gestaltet sein, dass sie in jedem Fall den Gedankensprung, den der Anwender mit dem Verweis "gewagt" hat, belohnt. Da der Kontext, also der Informationszusammenhang, von dem aus der Anwender zu dieser Texteinheit springt, ganz verschieden sein kann, muss diese Texteinheit so konzipiert sein, dass sie alle denkbaren Kontexte befriedigt. Das kann sie nur leisten, indem sie sich gewissermaßen "einigelt" und sich radikal auf ihre eigene Aussage konzentriert. Diese Einigelung bezeichnet man als "kohäsive Geschlossenheit". Die Konstellation, dass viele verschiedene andere Texteinheiten zu ein und derselben Texteinheit verweisen können, gilt als n:m-Relation (n = viele, m = irgendein Ziel, aber ein bestimmtes Ziel).

Mit dem Begriff der "informationellen Einheit" versucht Quellenhinweis Kuhlen, einen informationswissenschaftlich diskutierten Begriff für die "Einheiten" eines Hypertextes zu etablieren. Dabei geht er auch auf die Problematik der kohäsiven Geschlossenheit solcher Hypertext-Einheiten ein, denn:

"Wissen bzw. aktuelle Information ist immer in einen größeren semantischen und/oder argumentativen Kontext eingebunden" ( Quellenhinweis Kuhlen, S.81). Es gibt kein "autonomes Stück Information". Wie kann dann in Hypertexteinheiten, die dem Anspruch genügen müssen, kohäsiv geschlossen zu sein, Information angeboten werden? "Obgleich die Kunst zweifellos darin besteht, informationelle Einheiten so festzulegen, dass sie aus sich heraus verstanden werden können, müssen sie doch gleichzeitig auf ihren informationellen Kontext verweisen" ( Quellenhinweis Kuhlen, S.81).

Eine Hypertext-Einheit muss demzufolge inhaltlich in sich geschlossen sein und gleichzeitig ausdrücklich auf übergeordnete oder verwandte Information verweisen, um dem Leser/Anwender so ihren Informationskontext zu zeigen. Dies kann durch ausführbare Querverweise, durch Verweise auf übergeordnete Ebenen, oder durch Verweise auf besondere Navigationshilfen geschehen.

Web-Views

Einem elektronisch gespeicherten Hypertext kann man - im Gegensatz zu einem Buch etwa - nicht unmittelbar ansehen, wie umfangreich er ist. Der Leser/Anwender tut sich mit der Navigation im Informationsangebot jedoch leichter, wenn er sich eine plastische Vorstellung des Informationsangebots machen, sich also einen "Informationsraum" mit dieser oder jener Größe und Komplexität vorstellen kann. Das verringert die Gefahr des nach unten "Lost in Hyperspace"-Gefühls.

Web-Views sind Gesamtsichten auf einen Hypertext mit der Absicht, den dargebotenen Informationsraum zu visualisieren. Ein Web-View soll dem navigierenden Anwender den gesamten Hypertext als eine Art Stadtplan zeigen und möglichst in jeder beliebigen Situation ein "Sie befinden sich hier!" ausgeben können. Dazu bedarf es allerdings ausgereifter grafischer Darstellungsmöglichkeiten. Man stelle sich einen Hypertext mit zigtausend Texteinheiten und noch mehr Verknüpfungen vor. Die Visualisierung eines solchen Netzes wirft Probleme auf, und es ist fraglich, wie groß der Orientierungsgewinn für den Navigierenden dabei ist. Sinnvoller sind in der Praxis lokale Web-Views, die den aktuellen Dokumentteil im Zusammenhang darstellen, oder ferne Web-Views, die vor dem Ausführen eines Verweises zu einem anderen Dokumentteil diesen Dokumentteil auf Wunsch in Form einer Übersicht präsentieren.

Fish-Eye-Views

Ein Fish-Eye-View ist das Angebot, per Verweis zu näherer Information über ein angeschnittenes Thema zu gelangen. Die Möglichkeit, sich in ein beliebiges Thema unverzüglich und beliebig weit vertiefen zu können, gehört zu den Hypertext-Visionen. Kein langes Blättern, kein Griff in ein anderes Regal, kein Gerenne in eine andere Bibliothek mehr, sondern nur ein Mausklick oder ein Tastendruck. Verfügbarkeit der Information im Moment der Konzentration und des spontanen Interesses. Das soll den "informationellen Mehrwert" ( Quellenhinweis Kuhlen) von Hypertext gegenüber herkömmlicher Informationsbeschaffung begründen.

Voraussetzung sind Hypertext-Netze von gigantischen Ausmaßen. Als der große Vordenker solcher Netze gilt Seite Ted Nelson. Mit seinem Projekt Xanadu hat er solch ein Netz schaffen wollen. Der Durchbruch wurde dem Projekt jedoch verwehrt. Stattdessen haben wir heute mit dem World Wide Web ein Netz, dessen Wachstum selbst die kühnsten Träume der Hypertext-Visionäre in den Schatten stellt. Doch gerade das unkontrollierte Wuchern dieses Netzes macht es schwer, Fish-Eye-Views zu realisieren. Da hier auch die Qualität der Information so unterschiedlich ist, ist ein organisiertes System von Fish-Eye-Views allenfalls in Teilen des WWW realisierbar, etwa zwischen bestimmten wissenschaftlich orientierten Informationsbereitstellern.

Information Retrieval

Information Retrieval ist die Art und Weise, wie ein Anwender in einem großen Datenbestand letztendlich an konkrete Informationen herankommt.

Ein ausgereiftes Hypertext-Projekt erreicht vom Umfang her leicht vielbändige Werke. Ein solcher Hypertext wird wohl eher zur gezielten Informationssuche genutzt, nicht zum gemütlichen Schmökern. In klassischen Datenbanken gelangt der Informationssuchende zu seiner gewünschten Information über entsprechende Suchabfragen. Diese Suchabfragen muss er formulieren, z.B. "zeige mir alle Kunden, die in Monaco wohnen, ledig sind und mehr als 10000 Mark im Monat verdienen". Dabei muss man jedoch vorher wissen, wonach man sucht. Bei textorientierten Informationsbeständen ist die Formulierung einer Suchabfrage schwieriger als bei strukturierten Daten. Stichwortsuchen in einer Volltextdatenbank können - zumindest ohne Einsatz von künstlicher Intelligenz - niemals so aufschlussreiche und exakte Suchergebnisse liefern wie Suchabfragen in einer feldorientierten Datenbank.

In textorientierten Informationsbeständen muss der Informationszugang deshalb idealerweise mehrgleisig organisiert werden. Die programmunterstützte Stichwortsuche sollte ebenso möglich sein wie der Zugang über ein fein gegliedertes System von Verweisen.

Orientierung, Navigation, "Lost in Hyperspace"

Wenn man einen Hypertext "aus der Vogelperspektive" betrachtet, gibt es darin nach oben n:m-Relationen. Aus Sicht des Lesers eines Hypertextes gibt es jedoch keine n:m-Relationen. In einer gegebenen Situation gibt es höchstens eine 1:n-Relation, also mehrere Verweise, die von der aktuellen Texteinheit wegführen. Diese Verweise stellen - gemeinsam mit immer verfügbaren Hypertext-Funktionen wie nach unten Backtracking und Lesezeichen - das Arsenal an Orientierungsmöglichkeiten dar, die der Anwender nutzen kann, um sich im Informationsangebot sinnvoll zu bewegen.

Was sich aus der Vogelperspektive als freies Bewegen in einem faszinierenden Netz darstellen mag, ist aus der Sicht eines konkreten Benutzers dieses Netzes die Aufgabe, sich in dem Netz, das er nicht unmittelbar überschaut, zurechtzufinden, zu orientieren. Sich in einem nicht komplett übersehbaren Hypertext-Netz bewegen heißt, darin zu navigieren. Die Anleihe aus der Welt der Hochseeschifffahrt ist bewusst gewählt und hat den Browser-Anbieter Netscape dazu bewegt, sein berühmtes Programm zunächst Netscape Navigator zu nennen.

Der Navigierende orientiert sich an den angebotenen Verweisen. Wenn die Verweise nicht intelligent sind, keinen kontextuellen Zusammenhang herstellen, droht der Navigierende die Orientierung zu verlieren und in jenen Zustand zu geraten, den man in der Hypertextliteratur als Lost in Hyperspace - verloren im Hyperraum - bezeichnet.

Pfade, Trails, Guided Tours

Die meisten Hypertext-Anwender sind noch keine erfahrenden "Navigatoren". Sie sind die Informationsaufnahme von Büchern gewöhnt und wünschen sich neben den waschechten Hypertext-Sprüngen auch die Möglichkeit, das Informationsangebot nach einer vorgegebenen Schrittfolge durchzugehen. Solche Ketten von aneinandergereihten Einheiten eines Hypertextes bezeichnet man als Pfad - engl. trail - oder auch als geführte Touren - engl. guided tours.

Die vorliegende Dokumentation bietet Ihnen auf Seiten wie dieser hier beispielsweise am Seitenende Sprünge zur nächsten und vorhergehenden Seite an. Dabei ist es gewiss nicht immer so, dass das nächstliegende Thema dem aktuellen Thema inhaltlich besonders nah steht. Es handelt sich vielmehr um ein Angebot, das auch in kritischen Situationen zum Weiternavigieren ermutigen soll - also in Situationen von der Art: "Ich weiß ja gar nicht, was mich als nächstes interessiert" (das typische Gefühl des nach oben Lost in Hyperspace).

Backtracking, Historie, Lesezeichen

Backtracking meint das Rückwärtsverfolgen eines eingeschlagenen Lesepfads. Historie ist das, was dazu nötig ist: ein Protokoll der bis zu einem Zeitpunkt besuchten Hypertext-Einheiten.

Lesezeichen - engl. bookmarks - sind Marken, die der Leser an für ihn besonders interessanten oder zentralen Texteinheiten setzt, und zu denen er jederzeit springen kann.

Im Hypertext selbst sind solche Funktionen nicht realisierbar, höchstens ansprechbar (so kann der Autor einer Web-Seite mit Seite JavaScript beispielsweise die besuchten Web-Seiten des Anwenders abfragen). Zunächst einmal muss jedoch die verwendete Navigations-Software diese Funktionen dem Anwender zur Verfügung stellen, da es sich in beiden Fällen um sessionspezifische Navigationsdaten bzw. anwenderspezifische Navigationsschwerpunkte handelt.

Bei einigen Software-Produkten ist die Lebensdauer von Lesezeichen und Historie auf eine Sitzung (Session) begrenzt, d.h. die Daten werden nur im Arbeitsspeicher gehalten und gehen nach Beenden des Navigationsprogramms verloren, oder sie sind dauerhaft in Dateiform speicherbar. Die meisten modernen Browser erlauben dem Anwender, selber einzustellen, wie weit die Historie zurückverfolgbar sein soll.

Browsing, Authoring

Browsing bedeutet Herumstöbern, und zwar mit kreativem oder informationellem Mehrwert. Das ist es, was sich begeisterte Hypertext-Anhänger für den Leser eines Hypertextes erhoffen. Doch solange es noch keine Hyper-Computer gibt, werden die Verweise, die der Leser entdecken soll, von Autoren eingerichtet.

Authoring ist der eigentlich unmögliche Versuch, einen Hypertext mit all der Intelligenz auszustatten, die dem Leser den Mehrwert gegenüber sequentiellem Text erst vermitteln soll. Eigentlich müssten also hyper-intelligente Autoren für normal-intelligente Leser schreiben. Doch nicht nur, dass normal-intelligente Autoren an Hypertexten schreiben - nein, auch Leser selbst schreiben Hypertexte fort. Denn auch das Fortschreiben durch Anwender gehört zum Authoring in manchen Hypertext-Systemen. Die Trennung zwischen Autor und Rezipient ist im Hypertext-Bereich zumindest theoretisch fließend und zum Teil aufgehoben, weil printmedienbedingte Zwänge wie Auflagenhöhen, Neuauflagenkalkulationen usw. weitgehend entfallen.

Bei Hypertext-Systemen unterscheidet man generell zwischen reinen Browsern (Nur-Lese-Zugriff) und Systemen, die das Editieren bzw. Fortschreiben erlauben. Ein Fortschreiben von allem seitens aller ist jedoch in der Praxis nur in geschlossenen Benutzerkreisen möglich, um rechtlichen Missbrauch von geistigem Eigentum zu vermeiden und Qualität zu wahren. Im Web herrscht deshalb - obwohl Gründervater Tim Berners-Lee sich dagegen lange wehrte - eine klare Trennung zwischen Anbietern und Lesern von Web-Seiten. Über technische Umwege wie die Seite CGI-Schnittstelle ist es allerdings möglich, interaktiv wachsende Web-Projekte, an denen mehrere Personen online arbeiten können, zu realisieren. Ein Diskussionsforum ist beispielsweise eine derartige Anwendung, und Diskussionsforen mit vielen, hochwertigen Beiträgen gehören deshalb wohl auch zu den spannendsten, modernen Formen von Hypertext.

Sharks, Holy Scrollers, Karteisysteme, Buchmetapher

In der Hypertext-Fachwelt geht ein Streit zwischen jenen, die das Scrollen (Hoch- oder Runterfahren im Text) verboten haben wollen, und solchen, die es erlauben möchten. Sharks (Haie) nennt man jene, die dafür plädieren, dass eine Texteinheit immer auf einen Blick erfassbar sein sollte; Holy Scrollers sind jene, die dem Umfang einer Texteinheit keine bildschirmbedingten Grenzen aufzwingen wollen. Sharks tendieren dazu, Hypertexte als Karteisysteme zu kreieren. Grundelement ist dabei die Karteikarte mit ihrer unveränderlichen Größe. Holy Scrollers bevorzugen dagegen die Buchmetapher beim Design von Hypertexten. Grundelement sind dabei Textabschnitte von variabler, den Gegebenheiten angepasster Länge.

Heute haben sich weitgehend Systeme durchgesetzt, die einer Texteinheit keine Längenbeschränkungen auferlegen. Auch Web-Seiten können beliebig lang sein. Dennoch wird gerade im WWW mit Hilfe von Techniken wie Kapitel Frames häufig auch eine scroll-freie Informationsdarbietung angestrebt, denn das Erfassen eines gesamten Informationszusammenhangs auf einen Blick hat unbestreitbare Vorteile.

Hypertext Abstract Machines

In vielen Bereichen der Programmierung hat es sich oft als die beste Implementierungsmethode erwiesen, mit software-technischen Mitteln eine abstrakte oder virtuelle Maschine...für eine Klasse von Anwendungsprogrammen zu realisieren, auf der dann die eigentliche Software aufbaut ( Quellenhinweis Schnupp, S.85).

Ein Beispiel dafür sind Datenbanken wie dBase, FoxPro u.v.a., die an die Stelle spezieller Einzelsoftware treten, etwa für Kundenverwaltung, Bibliotheksbestand-Verwaltung usw. Für Hypertext gilt das Gleiche: man kann einen Hypertext fest programmieren, oder man programmiert eine unabhängige, abstrakte Software, die das Implementieren von Hypertexten unterstützt, indem sie geeignete Mittel und Funktionen zur Verfügung stellt. Als professionelle Systeme dieser Art nennt Schnupp z.B. das Produkt HAM (Hypertext Abstract Machine) oder HyperBase.

Noch einen Schritt weiter geht jedoch das Konzept, lediglich ein Hypertext-Datenformat zu standardisieren, ohne es an eine bestimmte Software zu binden. Das bisher anspruchsvollste Format dieser Art ist SGML (Structured Generalized Markup Language), heute eher in seiner moderateren Ableitung Seite XML verbreitet. Eine Unterklasse von SGML und neuerdings auch von XML ist Seite HTML, das Datenformat für Hypertext im World Wide Web. Hierbei handelt es sich genau genommen nicht mehr um eine Hypertext Abstract Machine, sondern um eine Hypertext Abstract Form - es ist nicht nur anwendungs-ungebunden, sondern auch maschinen-ungebunden.

World Wide Web

Hypertext im Web geht in zwei Punkten über die an bestimmte Software-Produkte gebundenen Hypertext-Realisierungen in der Seite Geschichte von Hypertext hinaus:

  • Hypertext im Web setzt auf einer software-unabhängige Hypertext-Beschreibungssprache auf, nämlich auf HTML (Hypertext Markup Language).
  • Hypertext im Web setzt auf einem weltweiten, bereits vorhandenen und etablierten Computernetz-Verbund auf, dem Internet.

Lediglich Ted Nelson's Xanadu-Projekt verfolgt einen ähnlich weitreichenden und globalen Ansatz, wurde jedoch von der Entwicklung des Web überholt. Das Web ist eine möglichst allgemein gehaltene Plattform für weltweiten Hypertext, indem es nur Formalien wie Datenformate, Adressierung und Software-Kommunikationsprotokolle festlegt.

Die Realität im heutigen Web sieht allerdings etwas anders aus als in den Träumen der weltweiten Informationsvernetzer. Es dominieren Kommerzialisierung, egozentrische Angebote und Null-Informationen. "Echter" Hypertext führt im Web eher ein Nischendasein. Doch solange die "echten" Hyper-Links ihren Weg durchs Netz finden, ist eine Mehrfachnutzung des Web nicht unbedingt schädlich. Die Kommerzialisierung inklusive Konkurrenzkampf kann auch dazu beitragen, dass finanziell problematische Aspekte wie höhere Bandbreiten bei der Datenübertragung in Zukunft leichter lösbar sind.

nach oben
weiter | Seite Geschichte von Hypertext
zurück | Seite Definitionen zu "Hypertext"
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Hypertext

© 2007 Seite Impressum


SELFHTML: Einführung / Hypertext / Geschichte von Hypertext

SELFHTML

Geschichte von Hypertext
Informationsseite

nach unten Vannevar Bush und sein "Memex"
nach unten Douglas C. Engelbart und sein "Augment"
nach unten Ted Nelson und sein "Xanadu"
nach unten Hypertext-Konferenzen
nach unten Gegenwart und tiefere Gründe für Hypertext
nach unten

Vannevar Bush und sein "Memex"

"Bush's 'Memex' ist ein (auf dem Papier entworfenes, nicht experimentell realisiertes) Informationssystem, das auf dem methodischen und technischen Stand dokumentarischen Wissens (Indexieren, kontrollierte Vokabularien, Relationierung und Mikroverfilmung) von 1945 aufsetzte, dieses allerdings mit der Radikalisierung der Idee der Verknüpfung ('association') kritisierte und erweiterte und damit einen richtungsweisenden Entwurf vorlegte, der bis heute die Ideen von Systemgestaltern befruchtet. Memex war als eine Maschine konzipiert, welche das menschliche Gedächtnis und sein Assoziationsvermögen erweitern und unterstützen sollte...Bush stellte sich eine Kamera vor, die an der Stirn befestigt sein sollte, und durch die alles, was im Verlaufe eines Tages das Interesse des Besitzers weckte, sofort aufgenommen und im Memex verfügbar gemacht werden sollte" ( Quellenhinweis Kuhlen, S.67).

Vannevar Bushs Memex (1945) gehört in den Bereich des technisch-wissenschaftlichen Utopismus. Doch die Memex-Utopie gehört zu jenen Utopien, deren Grundgedanke zu überzeugend ist, um sie einfach ins Reich der Fabeln zu verbannen:

"The human mind...operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain" (Bush) - "der menschliche Geist ... arbeitet mit Hilfe von Verknüpfung. Gerade mal einen Inhalt in seiner Reichweite, schnappt er sich sogleich den nächsten, der von der Assoziation der Gedanken vorgeschlagen wird, entsprechend einem undurchsichtigen Netz aus Pfaden, die von den Gehirnzellen getragen werden.".

Für diesen Grundzug menschlichen Denkens und Verstehens stellte sich Bush eine adäquate maschinelle Unterstützung vor. Diese Vorstellung befruchtet bis heute die Begeisterung für Hypertext.

Douglas C. Engelbart und sein "Augment"

Augment ist das Hypertext-System mit der längsten Vergangenheit. "Augment" wurde schon ab 1963 am SRI International in Stanford entwickelt, und ab 1978 wurden die kommerziellen Rechte an Tymshare übertragen.

"AUGMENT wurde ursprünglich auf Time-sharing-Großrechnern in einer Netzumgebung entwickelt. Richtungsweisend wurden die eingesetzten Werkzeuge, die den heutigen Standards von Personalcomputern und individuellen Arbeitsplatzrechnern bestimmen: Maus als Eingabemedium, Mehrfenstertechnik mit 'paralleler' Verarbeitung, ... Verknüpfung heterogener Materialien über Zeiger, intensiver, integrierter Einsatz von Graphik...Engelbart sah die durch AUGMENT zu erzielenden Mehrwerteffekte gegenüber linearen Formen wie Bücher in aller Deutlichkeit... AUGMENT war von Anfang an in eine elektronische Kommunikationsumgebung eingebettet, die z.B. verteiltes Publizieren und Editieren, elektronische Dokumentauslieferung, elektronische Post, Telekonferenzen erlauben sollte." ( Quellenhinweis Kuhlen, S.69).

Die meisten Hypertext-Designer der Vergangenheit unterschätzten im Gegensatz zu Engelbart die Bedeutung des "Look and Feel" für den Endanwender. Auch die Seite Entstehung des World Wide Web hat gezeigt, dass der Durchbruch erst mit den modernen, für grafische Benutzeroberflächen verfügbaren Browsern gelang, nicht mit den Ideen und Konzepten allein, so überzeugend diese auch sein mochten. Engelbart dachte schon an grafische Oberflächen und Mäuse, als Steve Jobs und andere, die gemeinhin als die Begründer der grafischen Benutzeroberflächen gelten, noch Kinder waren. Doch die Zeit war einfach noch nicht reif für die grafischen Vorstellungen von Engelbart. Science-Fiction-Filme aus den 60er Jahren belegen nur allzu deutlich, wie sich die Menschen die Computer der Zukunft vorstellten: als schrankartige Gebilde, die zwar mühelos mit Menschen reden können, aber ansonsten nur aus Kontroll-Lämpchen, Knöpfchen und maximal einer Primitiv-Konsole mit einzeiligem Text-Display bestehen. Engelbarts Bedeutung für die Geschichte von Hypertext besteht also vor allem in seiner Erkenntnis, dass Hypertext an visuell attraktive Darstellungstechniken und ergonomische Interaktionsformen gebunden ist.

Ted Nelson und sein "Xanadu"

Die Arbeiten von Ted Nelson - besser, seine Visionen - sind das Fundament heutiger Hypertextforschung und -begeisterung. "Nicht nur, dass die beiden Bezeichnungen 'Hypertext' und 'Hypermedia' auf ihn zurückgingen, sondern vor allem seine unkonventionellen und über Jahrzehnte verfolgten Ideen eines universalen Wissensverwaltungs- und Informationsbereitstellungssystems, Xanadu, machten ihn zu einem der kreativsten Hypertextforscher. Bemerkenswert an Nelson ist weiterhin, dass er sich nicht an etablierte Institutionen und kommerzielle Firmen hat binden lassen, sondern eher immer alternative Wege gegangen ist, verbunden mit einem aufklärerischen Sendungsbewusstsein, das in den letzten Jahren allerdings durchaus die Chance für ökonomische Verwertung gesehen hat" ( Quellenhinweis Kuhlen, S.69). Nelsons Xanadu-Idee lässt sich bis ins Jahr 1965 zurückverfolgen. Seit Ende der 80er und dem Beginn der 90er Jahre wird "Xanadu" kommerziell vertrieben.

Nelson stellt sich unter Xanadu eine Informationsbank von unbegrenzter Größe vor. "Das auch heute noch utopisch anmutende Endziel ist dabei die Verwaltung des gesamten Weltwissens über ein riesiges, computer-unterstütztes Begriffsnetz, das den Zugriff auf die entsprechenden informationellen Einheiten gestattet. Durch die Möglichkeit der simultanen und kollektiven Bearbeitung eines Dokuments soll der tendenzielle Gegensatz zwischen Autor und Leser aufgehoben werden. Die Aufgabe solcher Systeme beschränkt sich nicht allein auf die Verwaltung der vielfältigen und komplexen Beziehungen zwischen einzelnen Hypertexteinheiten. Es sind darüber hinaus auch Mechanismen erforderlich, die bei extensivem Mehrbenutzerbetrieb die Integrität, Aktualität und auch das Rückverfolgen der Entstehungshistorie eines Dokuments gewährleisten sowie den Schutz von Urheber-, Nutzungs- und Vervielfältigungsrechten unterstützen ( Quellenhinweis Kuhlen, S.217). Nelsons Xanadu stellt für diese Aufgaben verschiedene Features zur Verfügung.

Über Workstations und leistungsfähige PCs ist der Online-Zugriff auf den Xanadu-Informationsbestand seit 1989/90 möglich. Das System erlaubt neben dem Informationsabruf auch das Einbinden und Vernetzen eigener Daten in den Informationsbestand. Dabei entscheidet der Autor, ob es sich um seine privaten Daten (Zugriff nur durch den Autor selbst möglich) oder um öffentliche Daten (Zugriff für alle möglich) handelt. Der Online-Zugriff auf den Informationsbestand ist kostenpflichtig. Autoren erhalten - computergesteuert - Tantiemen, wenn ihre Daten von anderen Benutzern über Verweise aufgerufen werden. Auf diese Weise kann jeder Benutzer zum Autor werden, und jeder Autor ist immer auch Benutzer. Xanadu hält ferner Werkzeuge zur Versionenkontrolle von Dokumenten bereit. Es bereitet die gespeicherten Daten für den Endbenutzer jedoch nicht selbst auf. Dazu ist eine "Front-End-Browsing-Software" nötig, die für die Bildschirmausgaben sorgt, die Verweise ausführt usw.

Damit hat Ted Nelson die Technologie des World Wide Web schon 25 Jahre vor dessen Entstehen vorweggenommen, und seine Konzepte sind zum Teil ausgereifter (z.B. das Tantiemensystem oder die Dokument-Versionenkontrolle). Verständlicherweise ist Ted Nelson erbost über den Siegeszug des Web, der einfach über ihn hinwegfegte.

Hypertext-Konferenzen

Seit Ende der 80er Jahre ist "Hypertext" keine Sache einzelner, namhaft zu machender Pioniere mehr. Die Techniken von Hypertext wurden seit Mitte der 80er Jahre zunehmend in der Praxis eingesetzt - vor allem in der Online-Dokumentation. Hypertext wurde zu einem anerkannten Gegenstand für Fachkonferenzen. Die ersten wichtigen Hypertext-Konferenzen waren:

  • 1. Hypertext-ACM-Workshop, 1987, University of North Carolina at Chapel Hill
  • AI (Artificial Intelligence) and Hypertext, 1988
  • Hypertext I, Aberdeen 1989
  • Hypertext '89, Pittsburgh, PA
  • Hypertext II, New York 1990
  • ECHT (erste europäische Hypertext-Konferenz), Paris 1990
  • Hypertext/Hypermedia-Fachtagung, Basel 1990

Gegenwart und tiefere Gründe für Hypertext

Die Ideen von Tim Berners-Lee, aus denen Anfang der 90er Jahre das World Wide Web entstand, sind also nicht im luftleeren Raum entstanden. Hypertext hat eine Tradition. Denn Hypertext ist eine Konsequenz aus der Vorstellungswelt, die sich im Laufe des 20. Jahrhunderts herausgebildet hat und alle Bereiche des modernen Alltags der Industriegesellschaften durchdrungen hat. Das moderne Leben darin ist gekennzeichnet durch Fragmentierung. Berufsleben, Familienleben, Vereinsleben erfordern verschiedene Rollen von ein und demselben Menschen und berühren sich nicht oder kaum. Der Broterwerb findet meist woanders statt als dort, wo die Früchte genossen werden. Auch für Erholung und Konsum sind Zonen entstanden, die eigens dafür aufgesucht werden. Der moderne Mensch hat gelernt, Dinge im Leben und im Kopf klar auseinanderzuhalten. Genau das aber ist das Prinzip der fragmentierten Einheiten, das auch Hypertext zugrunde liegt. Und Hypertext lässt sich als der Wunsch begreifen, diese fragmentierten Einheiten zumindest wieder sinnvoll zu verknüpfen, die Verbindungen zwischen ihnen sichtbar und ausführbar zu machen.

Man kann nur Brücken schlagen zwischen Ufern, die man auseinanderhält. Schon Friedrich Nietzsche sah menschliche Stärke darin, Gegensätze in sich auszuhalten. Der Mensch hat die Fragmentierung gewollt, um sich weiterzuentwickeln. Aber ebenso bleibt der Wunsch nach Einheit. Manche versuchen es mit Rückzug in einfache, traditionelle Lebensformen. Und andere eben damit, dem Gedanken der Vernetzung zu folgen. Sie spinnen das Netz ("Weaving the Web"!).

nach oben
weiter | Seite Hypertext und menschliches Verstehen
zurück | Seite Begriffe rund um Hypertext
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Hypertext

© 2007 Seite Impressum


SELFHTML: Einführung / Hypertext / Hypertext und menschliches Verstehen

SELFHTML

Hypertext und menschliches Verstehen
Informationsseite

nach unten Vernetzte Texte für vernetztes Denken
nach unten Integrationskonflikt bei "Netz zu Netz"
nach unten Interaktion und Reaktionsspielraum
nach unten Unkontrollierte Informationsaufnahme
nach unten "Vom Hundertsten ins Tausendste": Vor- und Nachteile
nach unten Studien zu Hypertext
nach unten Resümee: Hypertext und menschliches Verstehen
nach unten

Vernetzte Texte für vernetztes Denken

"Hypertext scheint unter der Annahme kognitiv plausibel zu sein, dass Wissen...im menschlichen Gehirn in vernetzt topologischen, nichtlinearen Strukturen organisiert sei. Unter dieser Annahme könnte die Wissensaufnahme über eine vergleichbare Organisationsform, wie sie durch Hypertext gegeben ist, effizienter sein als eine Aufnahme, die den 'Umweg' über lineare Präsentationsformen (Vorlesungen, Texte) nimmt" ( Quellenhinweis Kuhlen, S.182).

Wenn der Lernende, so die Argumentation, einen neuen Wissensgegenstand in einer vernetzten Umgebung kennenlernt, fällt ihm die Einordnung dieses Wissensgegenstandes in sein eigenes, vernetztes Wissen leichter. Wenn z.B. von dem isolierten Wissensgegenstand "Quesenbandwurm" Verweise zu "Bandwürmer allgemein", "Wirte und Zwischenwirte", "Bandwürmer bei Menschen", "Drehkrankheit" und "Krankheiten durch Bandwürmer allgemein" führen, helfen diese Verweise bei der Einordnung des "Quesenbandwurms" in das vorhandene Wissen.

Integrationskonflikt bei "Netz zu Netz"

Gegen die Annahme, dass vernetzte Wissenspräsentation die Aufnahme von Wissen erleichtert, lassen sich zwei Argumente anführen:

Das erste Gegenargument führt ins Feld, dass sich der Hypertext-Leser seine Leselinie erst selbst bahnen muss, was Zeit und Energie kostet. Wobei die Wissensaufnahme letztlich nicht anders funktioniert als bei "herkömmlichem" Text: sie "findet..., auch durch die Navigation in Hypertext, in einer zeitlich sequentiellen Reihenfolge statt, sodass jeder faktische Weg letztlich doch wieder linear ist" ( Quellenhinweis Kuhlen, S.56) - siehe hierzu auch das Thema Seite n:m-Relationen und kohäsive Geschlossenheit.

Dem zweiten Gegenargument zufolge ist gerade die Integration von vernetztem Wissen in ein Wissensnetz problematischer als die Integration "einfachen" Wissens in das Wissensnetz. Dahinter steht die Annahme, "dass zwei Netze, zumal wenn sie polyhierarchisch strukturiert sind, schwieriger zu integrieren sind als eine lineare Struktur in ein bestehendes Netz" ( Quellenhinweis Kuhlen, S.56).

Interaktion und Reaktionsspielraum

Fein strukturierte Hypertexte bieten die Möglichkeit, Information nicht nur auf eine Art, sondern auf verschiedene Arten, über verschiedene Ebenen, in unterschiedlichen Zusammenhängen zu vermitteln. Der Hypertext-Leser, so die Argumentation, hat also einen Reaktionsspielraum bei der Informationsaufnahme. Durch Zoomen ( Seite Fish-Eye-Views), zwangloses Browsen ("Herumstöbern"), Seite Web-Views usw. kann er in Interaktion mit dem Hypertext-System verschiedene Strategien ausprobieren, um bei Verstehensprozessen zu den gewünschten Aha-Effekten zu gelangen.

Denn jeder kennt den Effekt: man versteht etwas nicht, obwohl man es ausführlich erklärt bekommt. Und plötzlich versteht man es - ohne viel Erklärung, einfach, weil man den gesuchten Bezugspunkt, das vermisste Stichwort, die individuell richtige Stelle zum Einordnen ins eigene Gedächtnis gefunden hat.

Unkontrollierte Informationsaufnahme

Gegen Mehrschichtigkeit und Angebotsfülle von Hypertexten wird im Zusammenhang mit Wissenserwerb folgendes Gegenargument angebracht: Der Lernende befindet sich in einem "anomalous state of knowledge" (Brooks). In dieser unsicheren Situation ist das Angebot der freien Navigation gerade das Verkehrte. Gerade in diesem Zustand, in dem der Lernende den Stoff noch nicht überschaut, noch nicht viel versteht, noch nicht entscheiden kann, welche Information wichtig und welche unwichtig ist, muss das vermittelnde Medium (Lehrer, Professor, Buch) die Kontrolle übernehmen. Hypertext verlockt zu freiem Navigieren und damit zu Ablenkung, zu unkontrollierter Informationsaufnahme.

"Vom Hundertsten ins Tausendste": Vor- und Nachteile

"Vom Hundertsten ins Tausendste kommen" ist eine Redewendung mit negativer Bedeutung. Abstrahiert man diese jedoch, bedeutet die Redewendung einfach, dem freien Fluss der Gedanken zu folgen, ohne sich rationalen oder sonstigen Beschränkungen zu unterwerfen. Hypertext unterstützt diese Art zu denken.

Ein Vorteil scheint diese Art zu denken in zwei Situationen zu sein:

1. Zu Beginn der Beschäftigung mit einem neuen Gebiet. In diesem Stadium unterstützt die freie Navigation das Erwachen von Interesse und damit die geistige Bereitschaft, sich näher auf das Gebiet einzulassen.

2. In einem fortgeschrittenen Stadium des Wissens. Wer sich auf einem Gebiet erst einmal auskennt, wird die Möglichkeiten von Hypertext gezielt und souverän nutzen können, da er weiß, wonach er sucht, wenn er ein solches System benutzt.

Ein Nachteil ist die von Hypertext favorisierte Art zu denken während der konzentrierten Wissensaufnahme, während des Lernstadiums, während jener Phase, in der sich der Aufnehmende mentale Modelle vom aufgenommenen Wissen macht. In dieser Phase sind Ablenkung und Angebotsfülle nur hinderlich. Um diese Phase der Informationsaufnahme elektronisch zu unterstützen, kann Hypertext allerdings die Technik der Seite Guided Tours anbieten.

Studien zu Hypertext

Die Schnotz-Studie (1987) untersucht die Wirkung von kontinuierlichen kontra diskontinuierlichen Texten auf den Lernerfolg. Das vermittelte Wissen war in beiden Fällen das gleiche. In den diskontinuierlichen Texten wurde der Textzusammenhang, das heißt alle argumentativen, verbindenden Strukturen entfernt. Die Studie, die an 34 Studenten durchgeführt wurde, ergab, dass die Gesamtinformation durch den kontinuierlichen Text tendenziell besser vermittelt wurde als durch die diskontinuierliche Version. Eine differenzierte Auswertung ergab: Personen mit höherem Vorwissen ziehen aus diskontinuierlichen Texten größeren Nutzen. Personen mit geringerem Vorwissen bevorzugen eindeutig kontinuierliche Texte. Die Schnotz-Studie war jedoch nicht als Vergleich von Hypertext und Text ausgelegt. Die Kohärenz und Kontinuität schaffende Leistung von Verweisen in Hypertexten wurde nicht berücksichtigt. Auf technische Dokumentation übertragen, könnte man sagen, dass die Studie eher den Unterschied zwischen Tutorial und Referenz untersucht hat.

Die Intermedia-Studie (1987) bezieht sich auf zwei Kurse, einen über englische Literatur, und einen über Biomedizin. Zu beiden Kursen wurde das Lehrmaterial mit dem Software-Produkt Intermedia als Hypertext organisiert. Die Ergebnisse der Studie waren keine Messungen des Lernerfolgs, sondern Auswertungen der Einschätzungen befragter Studenten. Die Hypertext-Unterstützung wurde insgesamt als wertvoller angesehen als die Unterstützung durch konventionelle Lehrmaterialien. Die Streuung zeigt allerdings, dass die Bewertungen von "much better" bis "much worse" reichen. Bei den Biomedizinern war die Resonanz positiver als bei den Literaturstudenten. Nach Aussagen der Dozenten wurden bei den Abschlussprüfungen deutlich höhere Leistungen erzielt.

Weitere Studien zum Thema:

  • Gordon und andere präsentierten 1988 insgesamt 24 Studenten technische Texte am Bildschirm, und zwar jeweils in einer linearen und einer nichtlinearen Version. Tests zu den behaltenen Fakten ergaben eine Präferenz zugunsten der linearen Darbietung.
  • McKnight/Dillon/Richardson präsentierten Versuchspersonen einen Text ("HYPTEXTduction to wines") in 4 Versionen: 2 linearen (Papier und Texteditor) sowie 2 nichtlinearen (Hypertext-Software-Produkte HyperTIES und Hypercard). Tests zu den behaltenen Fakten ergaben auch hier Präferenzen zugunsten der linearen Textpräsentation.
  • Weitere Studien von Allinson/Hammond (1988/89) und Vickers/Gaines (1988) gehen der Frage nach, wie eine Hypertext-Basis beschaffen sein muss, um Lernen effektiv zu unterstützen.

Resümee: Hypertext und menschliches Verstehen

Naive Überhöhung des Mediums Hypertext ist sicher unbegründet. Zu allen Argumenten für das neue Medium lassen sich Gegenargumente finden. Empirische Studien ergeben ein uneinheitliches Bild: zum Teil zugunsten von Hypertext, zum Teil zugunsten linearer Wissensdarbietung.

Am erfolgreichsten wird Hypertext derzeit in der technischen Dokumentation eingesetzt. Das ist nicht weiter verwunderlich, denn technische Dokumentation ist eine Sorte Literatur, die kaum jemand gerne freiwillig von vorne bis hinten liest. Auch in dem Dokument, das Sie gerade lesen, werden Sie Kapitel finden, die Sie sicherlich nicht auf die gleiche Weise lesen werden, wie Sie es hier in der Einführung vielleicht tun. Hypertext spielt immer dann seine Stärken aus, wenn sich der darzustellende Inhalt sinnvoll fragmentieren lässt. Ein gewaltsames Fragmentieren jeglicher Inhalte nach dem Motto "aber es soll doch Hypertext sein!" wird dagegen sein Ziel verfehlen. HTML, das Basisformat für Web-Seiten, zwingt Sie nicht zu gewaltsamer Fragmentierung, erlaubt sie jedoch. Insofern sind Sie bei der Informationsverteilung auf Web-Seiten frei und können selbst entscheiden, in welchem Ausmaß Sie Inhalte fragmentieren. Die Art der jeweiligen Inhalte sollte dabei das Maß sein. Wenn sich Inhalte gut fragmentieren lassen, dann sollte das Web-Design solcher Inhalte die Möglichkeiten von Fragmentierung und Vernetzung auch nutzen. Bei Inhalten, die sich nicht sinnvoll fragmentieren lassen, darf ein Text dagegen ruhig ein zusammenhängender Text bleiben.

nach oben
weiter | Seite Textauszeichnung
zurück | Seite Geschichte von Hypertext
Teil von SELFHTML/Navigationshilfen Teil von Einführung Teil von Hypertext

© 2007 Seite Impressum


SELFHTML: HTML/XHTML

SELFHTML

HTML/XHTML
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Einführung.
Dieser Abschnitt dokumentiert den Aufbau von HTML-Dateien und die einzelnen HTML-Elemente.
Der Abschnitt besteht aus folgenden Unterabschnitten:

Kapitel Allgemeine Regeln für HTML
Kapitel HTML-Kopfdaten
Kapitel Dateiweite Einstellungen
Kapitel Elemente zur Textstrukturierung
Kapitel Tabellen
Kapitel Verweise (Links)
Kapitel Grafiken
Kapitel Formulare
Kapitel Frames
Kapitel Multimediaobjekte
Kapitel Layer (Netscape)
Kapitel Weiterführende HTML-Elemente
Kapitel Universalattribute
Kapitel XHTML und HTML
Kapitel HTML-Referenz

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zu HTML
Online-Seite WWW-Links zu anderen Seiten über HTML/XHTML

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML

SELFHTML

Allgemeine Regeln für HTML
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Die einführenden Bemerkungen zu Seite HTML.
Dieser Abschnitt beschreibt, wie eine HTML-Datei aufgebaut ist, wie HTML grundsätzlich funktioniert und welche wichtigen Regeln Sie bei der Texteingabe kennen müssen.
Der Abschnitt besteht aus folgenden Seiten:

Seite Textauszeichnung
Seite Grundgerüst einer HTML-Datei
Seite Regeln beim Editieren von HTML
Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen
Seite Farben definieren in HTML
Seite Referenzieren in HTML
Seite Kommentare und Credits
Seite Konventionen für Dateinamen
Seite Informationsverteilung und Dateiorganisation
Seite Guter HTML-Stil

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Textauszeichnung

SELFHTML

Textauszeichnung
Informationsseite

nach unten Elemente und Tags in HTML
nach unten Verschachtelung von Elementen
nach unten Attribute in Tags
nach unten HTML-Parser
nach unten

Elemente und Tags in HTML

HTML-Dateien bestehen aus Text. Zur Textauszeichnung gibt es bestimmte Zeichen aus dem normalen Zeichenvorrat.

Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Der Inhalt dazwischen ist der "Gültigkeitsbereich" des entsprechenden Elements. Tags werden in spitzen Klammern notiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<h1>HTML - die Sprache des Web</h1>

Erläuterung:

Das Beispiel zeigt eine Seite Überschrift 1. Ordnung. Das einleitende Tag <h1> signalisiert, dass eine Überschrift 1. Ordnung folgt (h = heading = Überschrift). Das abschließende Tag </h1> signalisiert das Ende der Überschrift. Ein abschließendes Tag beginnt mit einer öffnenden spitzen Klammer und einem Schrägstrich "</".

Beachten Sie:

Bei herkömmlichem HTML spielt es keine Rolle, ob die Elementnamen in den Tags in Klein- oder Großbuchstaben notiert werden. Dort bedeuten z.B. <h1> und <H1> das Gleiche. In der neueren HTML-Variante, in XHTML, müssen die Elementnamen dagegen klein geschrieben werden. Es ist deshalb zu empfehlen, die Elementnamen immer klein zu schreiben, egal ob Sie HTML oder XHTML schreiben wollen.

Es gibt auch einige Elemente mit "Standalone-Tags", d.h. Elemente, die keinen Inhalt haben und deshalb nur aus einem Tag bestehen statt aus Anfangs- und End-Tag.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Eine Zeile, ein manueller Zeilenumbruch<br>
und die nächste Zeile

Erläuterung:

Am Ende der ersten Zeile signalisiert <br>, dass ein manueller Seite Zeilenumbruch eingefügt werden soll (br = break = Umbruch).

Beachten Sie:

Wenn Sie XHTML-gerecht schreiben wollen, müssen Sie Elemente mit Standalone-Tags anders notieren: anstelle von <br> müssen Sie dann <br /> notieren - also den Elementnamen mit einem abschließenden Schrägstrich. Alternativ dazu können Sie auch <br></br> notieren, also ein Element mit Anfangs- und End-Tag, aber ohne Inhalt. Mehr darüber erfahren Sie im Unterkapitel Kapitel XHTML und HTML.

Verschachtelung von Elementen

Elemente können ineinander verschachtelt werden. Auf diese Weise entsteht eine hierarchische Struktur. Komplexere HTML-Dateien enthalten sehr viele Verschachtelungen. Deshalb sprechen Fachleute auch von strukturiertem Markup.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<h1><i>HTML</i> - die Sprache des Web</h1>

Erläuterung:

Das i-Element steht für italic (= kursiver Text). Der Text zwischen <i> und </i> wird als kursiv interpretiert, abhängig von der eingestellten Schriftart und Schriftgröße für die Überschrift 1. Ordnung.

Attribute in Tags

Einleitende Tags und Standalone-Tags können zusätzliche Angaben enthalten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<h1 align="center">HTML - die Sprache des Web</h1>

Erläuterung:

Durch align="center" wird bewirkt, dass der Text zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert).

Es gibt folgende Arten von Attributen in HTML-Elementen:

  • Attribute mit Wertzuweisung, wobei es bestimmte erlaubte Werte gibt, z.B. bei <h1 align="center"> (Überschrift 1. Ordnung zentriert ausgerichtet - hier sind nur die Werte left, center, right und justify erlaubt).
  • Attribute mit freier Wertzuweisung, wobei jedoch ein bestimmter Datentyp oder eine bestimmte Konvention erwartet wird, z.B. <style type="text/css"> (Bereich für Stylesheets definieren - hier wird ein so genannter Seite MIME-Typ als Wert erwartet, und MIME-Typen haben immer den Aufbau Typ/Untertyp). Oder <table border="1"> (Tabelle mit Rahmen von einem Pixel Stärke - hier wird eine numerische Angabe erwartet)
  • Attribute mit freier Wertzuweisung ohne weitere Konventionen, z.B. <p title="Aussage mit Vorbehalt"> - hier kann ein ganzer Text zugewiesen werden.
  • Alleinstehende Attribute, z.B. <hr noshade> (Trennlinie ohne Schatten). Alleinstehende Attribute gibt es allerdings nur in herkömmlichem HTML. Wenn Sie XHTML-gerecht schreiben wollen, müssen Sie <hr noshade="noshade"> notieren. Mehr darüber erfahren Sie im Unterkapitel Kapitel XHTML und HTML.

Obwohl es vom HTML-Standard her zulässig wäre, dass bestimmte Attributwerte auch ohne Anführungszeichen geschrieben werden können, sollten Sie diese Möglichkeit nicht nutzen. Es verringert die Wahrscheinlichkeit von Fehlern, wenn Sie grundsätzlich alle Werte, die Sie Attributen zuweisen, in einfache ' oder doppelte " Anführungszeichen setzen. Sie können diese zwei Arten innerhalb einer Datei beliebig mischen, lediglich für ein einzelnes Attribut müssen an Anfang und Ende dieselben Zeichen benutzt werden. Welches Zeichen Sie wählen, ist im Prinzip egal.

Wie bei Elementnamen, so gilt auch bei Attributnamen: bei herkömmlichem HTML spielt es keine Rolle, ob die Attributnamen in Klein- oder Großbuchstaben notiert werden. In der neueren HTML-Variante, in XHTML, müssen die Attributnamen dagegen durchgehend klein geschrieben werden. Bei den Wertzuweisungen an Attribute kann Groß- und Kleinschreibung abhängig von der Art des Wertes unterschieden werden oder auch nicht.

Neben Attributen, die nur in bestimmten HTML-Elementen vorkommen können, gibt es auch so genannte Universalattribute, die in vielen bzw. fast allen HTML-Elementen erlaubt sind.

Beispiel:

<p id="Einleitung">Text</p>

Erläuterung:

Das Beispiel definiert einen Seite Textabsatz mit den HTML-Tags <p> und </p>. Im einleitenden <p>-Tag wird ein Universalattribut notiert, nämlich das Attribut id. Damit können Sie dokumentweit eindeutige Namen für einzelne HTML-Elemente vergeben. Einzelheiten über solche Attribute erfahren Sie im Abschnitt über Kapitel Universalattribute.

HTML-Parser

Unter einem HTML-Parser versteht man eine Software, die HTML-Auszeichnungen erkennt und in strukturierten Text umsetzt. Jeder Web-Browser verfügt über einen HTML-Parser, um überhaupt mit HTML klarzukommen. Solche HTML-Parser werden nun leider auf den meisten Web-Seiten mit Syntaxfehlern in der Textauszeichnung konfrontiert. Oft sind es kleinere, nicht allzu tragische Fehler, doch es gibt auch viele Web-Seiten, deren HTML-Quelltext nur das Prädikat "ungenügend" verdient, weil darin übelste Verunstaltungen der HTML-Regeln vorkommen. Strenge Parser, die genau auf Einhaltung der HTML-Regeln prüfen, müssten die Anzeige solcher Web-Seiten eigentlich abbrechen, und anstelle der Seite würden die Browser dann nur eine lapidare Fehlermeldung anzeigen. Da ein solcher Browser am breiten Markt jedoch keine Chance hätte, weil er kaum eine bekannte Web-Seite anzeigen würde, sind die HTML-Parser der heute verbreiteten Browser ziemlich gutmütige Wesen, die so ziemlich alles fressen, was ihnen vorgesetzt wird und irgendetwas daraus machen, meistens sogar durchaus das, was der Autor der Web-Seite erreichen wollte. Am weitesten in dieser Kunst hat es der HTML-Parser des Internet Explorers gebracht. Das hat dem Internet Explorer einerseits den Ruf beschert, "am besten" HTML zu beherrschen, aber Fachleute rümpfen aus dem gleichen Grund gerne die Nase über diesen Browser mit dem Argument, dass er durch sein Verhalten das schlampige und fehlerhafte Kodieren von HTML nur fördere.

Angesichts der wachsenden Komplexität der verschiedenen Sprachen, also HTML in Verbindung mit eingebettetem CSS, JavaScript, PHP usw., wird es immer wichtiger, die Syntax-Regeln von HTML einzuhalten. Diese Regeln finden Sie in der Kapitel HTML-Referenz genauer beschrieben.

Wenn Sie selbst prüfen wollen, ob Ihre selbst erstellte HTML-Seite alle Regeln einhält, können Sie das mit einem sogenannten Validator tun. Ein Validator liest die Seite komplett ein, stellt fest, welcher Seite Dokumententyp für die Seite angegeben ist, und prüft dann streng auf die Einhaltung der damit verbundenen Regeln.

Das älteste Angebot stammt vom W3C: englischsprachige Seite validator.w3.org. Dort haben Sie die Möglichkeit, entweder eine Datei von Ihrem Rechner zur Prüfung hochzuladen, oder eine im Internet erreichbare Adresse anzugeben.

Alternativ bietet SELFHTML unter der Adresse deutschsprachige Seite validator.de.selfhtml.org einen deutschsprachigen Service an, der dieselben Prüfmöglichkeiten bietet, und bei Fehlern direkt Links auf die SELFHTML-Dokumentation liefert, sodass Sie direkt nachsehen können, wie die Stelle korrekt lauten muss.

nach oben
weiter | Seite Grundgerüst einer HTML-Datei
zurück | Seite Hypertext und menschliches Verstehen
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei

SELFHTML

Grundgerüst einer HTML-Datei
Informationsseite

nach unten Grundgerüst einer HTML-Datei
nach unten Grundgerüst einer XHTML-Datei
nach unten Dokumenttyp-Deklaration
nach unten Hinweis für die Praxis
nach unten

Grundgerüst einer HTML-Datei

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:

  • Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
  • Header (Kopfdaten. z.B. Angaben zu Titel u.ä.)
  • Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

Schema:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
</head>
<body>

</body>
</html>

Erläuterung:

Die erste Zeile sieht für Anfänger zunächst verwirrend aus. Diese etwas komplizierte Angabe ist eine Dokumenttyp-Deklaration. Einzelheiten dazu weiter unten bei nach unten Dokumenttyp-Deklaration.

Der gesamte übrige Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen. Das html-Element wird auch als Wurzelelement einer HTML-Datei bezeichnet. Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden die Kapitel Kopfdaten einer HTML-Datei notiert. Die wichtigste dieser Angaben ist der Seite Titel der HTML-Datei, markiert durch <title> bzw. </title>. Unterhalb davon folgt der Textkörper, begrenzt durch <body> bzw. </body>. Dazwischen wird dann der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des WWW-Browsers angezeigt werden soll.

Beachten Sie:

Wenn Sie Kapitel Frames (mehrere Bildschirmfenster) einsetzen wollen, sieht das Grundgerüst von Dateien, in denen ein Frameset definiert wird, anders aus. Dies wird im Abschnitt Seite Grundgerüst einer HTML-Datei mit Framesets beschrieben. Befassen Sie sich mit Frames aber erst, wenn Sie mit den Grundlagen von HTML schon etwas vertrauter sind.

Grundgerüst einer XHTML-Datei

Wenn Sie XHTML-gerechtes HTML schreiben wollen, sieht das Grundgerüst ähnlich aus. Nur am Anfang ist einiges anders.

Schema:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beschreibung der Seite</title>
</head>
<body>

</body>
</html>

Erläuterung:

Noch vor der Dokumenttyp-Deklaration sollte bei XHTML-Dateien der Bezug zu XML hergestellt werden. Dazu dient die erste Zeile mit den Fragezeichen hinter der öffnenden spitzen Klammer und vor der schließenden spitzen Klammer. Notieren Sie diese Zeile so wie im Beispiel angegeben. Es handelt sich um eine so genannte XML-Deklaration.

Bei der Dokumenttyp-Deklaration muss ein für XHTML gültiger Dokumenttyp angegeben werden. Einzelheiten dazu weiter unten im Abschnitt nach unten Dokumenttyp-Deklaration.

Im einleitenden <html>-Tag muss der verwendete XML-Namensraum mit einem Attribut namens xmlns angegeben werden. Benutzen Sie die Angabe wie im obigen Beispiel.

Damit ist die Datei als XHTML-Datei deklariert. Der weitere Quelltext ist im Prinzip normales HTML, allerdings müssen Sie die Seite Unterschiede zwischen XHTML und HTML beachten. Befassen Sie sich mit diesen Unterschieden aber erst, wenn Sie schon etwas vertrauter mit HTML sind.

Dokumenttyp-Deklaration

HTML ist innerhalb der Familie der Auszeichnungssprachen nur eine von vielen, wenn auch die prominenteste. HTML selbst hat außerdem bereits eine mehrjährige Geschichte und ist in verschiedenen, recht unterschiedlichen Versionen normiert worden. Mit der Dokumenttyp-Deklaration bestimmen Sie, welche Auszeichnungssprache in welcher Version Sie verwenden. Eine auslesende Software, etwa ein Web-Browser, kann sich an dieser Angabe orientieren.

Die Regeln für HTML sind mit Hilfe von SGML formuliert, die Regeln für XHTML mit Hilfe von XML. Nach den Regeln einer SGML- oder XML-basierten Auszeichnungssprache ist eine HTML-Datei oder eine XHTML-Datei erst dann eine gültige (valide) Datei, wenn sie einen bestimmten Dokumenttyp angibt und sich dann innerhalb des restlichen Quelltextes genau an die Regeln hält, die für diesen Dokumenttyp definiert sind. Denn hinter jeder Dokumenttyp-Deklaration stecken so genannte Dokumenttyp-Definitionen (DTD). Auch für HTML gibt es solche Dokumenttyp-Definitionen. Dort ist geregelt, welche Elemente ein Dokument vom Typ HTML enthalten darf, welche Elemente innerhalb von welchen anderen vorkommen dürfen, welche Attribute zu einem Element gehören, ob die Angabe dieser Attribute Pflicht ist oder freiwillig usw.

Als HTML-Anfänger mag Ihnen der Aufwand, der da betrieben wird, vielleicht nicht ganz einleuchten. Doch genau diese Dokumenttypen, mit deren Hilfe sich Regeln für Sprachen wie HTML genau definieren lassen, sind ein riesiger Fortschritt in der EDV. Denn nur so lässt sich das Konzept der software-unabhängigen, aber regelgerechten Dateiformate konsequent durchsetzen. Ohne den Bezug auf die offiziellen Regeln wären Sprachen wie HTML unverbindliche Konventionen, die schnell in Dialekten verwässern würden. Das ist genauso wie bei natürlichen Sprachen: ohne eine gewisse Regelung der "Rechtschreibung" würde eine Schriftsprache im Laufe der Zeit so stark zersetzt, dass am Ende kaum jemand mehr verstehen kann, was der andere mit dem, was er geschrieben hat, meint. Da Software außerdem noch viel dümmer ist, als Menschen, und viel genauere Vorgaben benötigt, um zu "verstehen", was man ihr mitteilt, ist das Beziehen auf Regeln dort sogar noch wesentlich wichtiger.

Beispiel einer Dokumenttyp-Deklaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

Erläuterung:

Notieren Sie die Dokumenttyp-Deklaration am Anfang der HTML-Datei vor dem einleitenden <html>-Tag in Großbuchstaben so, wie angegeben. Hinter der startenden spitzen Klammer folgt ein Ausrufezeichen. Dahinter folgt die Angabe DOCTYPE HTML PUBLIC. Das bedeutet, dass Sie sich auf die öffentlich verfügbare HTML-DTD beziehen. Die folgende Angabe, die in Anführungszeichen steht, ist wie folgt zu verstehen:

W3C ist der Herausgeber der DTD, also das W3-Konsortium. Eine Angabe wie DTD HTML 4.01 Transitional bedeutet, dass Sie in der Datei den Dokumenttyp "HTML" verwenden, und zwar in der Sprachversion 4.01 und deren Variante Transitional. Das EN ist ein Sprachenkürzel und steht für die Sprache, in diesem Fall Englisch. Die Angabe bezieht sich darauf, in welcher natürlichen Sprache die Element- und Attributnamen der Tagsprache definiert wurden, nicht auf den Inhalt Ihrer Datei. Benutzen Sie also immer EN, da die Namen von HTML-Elementen und -Attributen auf der englischen Sprache basieren. Die Schrägstriche notieren Sie so wie im obigen Beispiel.

Ferner enthält die Dokumenttyp-Deklaration die Web-Adresse der Dokumenttyp-Definition (DTD). Die Angabe dieser Adresse ist nicht zwingend nötig. Eine Angabe wie:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

ist also ebenfalls erlaubt. Über die angegebene Web-Adresse kann eine auslesende Software die Dokumenttyp-Definitionen aufrufen und in den darin notierten Regeln "nachgucken". Die meisten heutigen Browser tun das bei HTML allerdings nicht, weil die verbreiteten Dokumenttypen bereits implementiert sind. Da sie ferner bei vielen Web-Seiten mit übelsten Sprachverunstaltungen rechnen müssen, besitzen sie die Fähigkeit, auch nicht regelgerechtes HTML halbwegs ordentlich auf den Bildschirm zu bringen, allerdings oft mit nicht unerheblichen Abweichungen. Das eigentlich gewünschte Verhalten ist allerdings, dass ein Browser dann, wenn eine HTML-Datei eine Dokumenttyp-Deklaration enthält, auch auf der Einhaltung der Regeln dieses Dokumenttyps besteht. Bei XML-Dokumenten ist es durchaus üblich, dass ein Seite Parser bei einem Regelverstoß abbricht - anstelle der Web-Seite erscheint dann nur eine trockene Fehlermeldung, dass das Dokument nicht gültig (valide) sei. Bei XHTML-Seiten, die mit dem Seite MIME-Typ application/xhtml+xml ausgeliefert werden, ist das bereits der Fall.

Zum Redaktionszeitpunkt dieses Dokuments ist die HTML-Version 4.01 aktuell. Bei dieser HTML-Version gibt es drei Sprachvarianten. Für eine davon müssen Sie sich entscheiden und den entsprechenden Dokumenttyp angeben:

Die Variante Strict für HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

Benutzen Sie diese Angabe, wenn Sie gemäß bestimmte Elemente und Attribute nicht mehr verwenden wollen, die in früheren HTML-Standards eingefügt wurden, aber mittlerweile durch andere Möglichkeiten (vor allem durch Kapitel Stylesheets) ersetzbar sind. Ferner sind die Verschachtelungsregeln für HTML-Elemente in der Strict-Variante strenger und im Sinne strukturierter Inhalte sauberer formuliert. So ist es in dieser Variante beispielsweise nicht erlaubt, zwischen <body> und </body> einfach nur Text zu notieren. Alle Inhalte müssen in so genannten Block-Elementen stehen, z.B. in Überschriften, Textabsätzen, Tabellen usw.

Die Variante Transitional für HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

Benutzen Sie diese Angabe, wenn Sie einige der in der Strict-Variante nicht erlaubten Elemente und Attribute verwenden wollen oder müssen. In der Variante Transitional sind zum Beispiel die Regeln für die Elementverschachtelung etwas milder. Es ist nach dieser Variante erlaubt, zwischen <body> und </body> "nackten Text" außerhalb eines weiteren Elements zu notieren. Außerdem benötigen Sie diese Variante, wenn Sie in Seite Links mit dem target-Attribut arbeiten wollen, beispielsweise um Seite Framesets korrekt anzusteuern.

Die Variante Frameset für HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">

Diese Angabe ist nur für spezielle HTML-Dateien gedacht, in denen Framesets definiert werden. Siehe dazu den Abschnitt Seite Framesets und Frames definieren.

Entsprechende Dokumenttyp-Deklarationen für XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Auch für XHTML 1.0 gibt es die drei Varianten Strict, Transitional und Frameset. Am Beginn der Dokumenttyp-Deklaration wird "html" klein geschrieben, im Mittelteil muss bei Version 1.0 von XHTML XHTML 1.0 notiert werden. Auch die Web-Adressen der DTDs sind andere als bei HTML.

Es gibt auch eine Sprachversion 1.1 von XHTML, die intern anders organisiert ist als XHTML 1.0. In XHTML 1.1 gibt es keine Sprachvarianten mehr. XHTML 1.1 entspricht nur noch der Sprachvariante Strict von XHTML 1.0.

Dokumenttyp-Deklaration für XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ältere Dokumenttyp-Deklarationen:

In manchen Ausnahmefällen kann es sinnvoll sein, sich auch auf eine ältere HTML-Version zu beziehen. Tun Sie dies jedoch nur, wenn irgendwelche technischen Gründe es erfordern. Folgende ältere Angaben gibt es:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

Benutzen Sie diese Dokumenttyp-Deklaration, wenn Sie sich auf HTML 2.0 beziehen wollen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Benutzen Sie diese Dokumenttyp-Deklaration, wenn Sie sich auf HTML 3.2 beziehen wollen.

Dokumenttyp-Deklarationen anderer HTML-Versionen sind nicht mehr im Gebrauch.

Hinweis für die Praxis

Wenn Sie nun entmutigt sind durch das ganze Wirrwarr von HTML und XHTML, HTML-Sprachvarianten, XML- und Dokumenttyp-Deklarationen - lassen Sie sich davon nicht zu sehr beeindrucken. Das Wirrwarr ist dadurch entstanden, dass es auf dem Gebiet der Auszeichnungssprachen viele Entwicklungen gibt und dass bei dieser Entwicklung auch nur mit Wasser gekocht wird. Vieles war zunächst unausgereift, und heute ist man bemüht, einen Spagat zu machen zwischen den fröhlichen Anfängen von HTML und den wachsenden Anforderungen, die an HTML gestellt werden, wenn es für professionelle Datenverarbeitung verwendet werden soll.

Benutzen Sie für Ihre ersten Schritte in HTML zunächst einfach mal das oben vorgestellte nach oben Grundgerüst einer HTML-Datei so wie es dort notiert ist, und lernen Sie den Umgang mit weiteren HTML-Elementen und ihren Attributen, sowie den Umgang mit Stylesheets. Wenn Sie erst einmal vertrauter sind mit diesen Sprachen, werden Sie auch besser verstehen, welchen Sinn und Zweck die Unterschiede zwischen HTML und XHTML und die Unterschiede zwischen Sprachvarianten wie Strict, Transitional und Frameset haben.

Beachten Sie:

Die Darstellung ist in den meisten Browsern in vielen Belangen von den hier vorgestellten Dokumenttyp-Deklarationen abhängig. Beim Erlernen von Stylesheets kann es von Vorteil sein, sich vorzugsweise mit Dokumenten der Variante Strict zu beschäftigen. Weitere Informationen hierzu finden Sie im Abschnitt über das Seite CSS-Box-Modell.

nach oben
weiter | Seite Regeln beim Editieren von HTML
zurück | Seite Textauszeichnung
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Regeln beim Editieren von HTML

SELFHTML

Regeln beim Editieren von HTML
Informationsseite

nach unten Regeln bei der Texteingabe
nach unten

Regeln bei der Texteingabe

Wenn Sie einen Texteditor oder einen quelltextorientierten Seite HTML-Editor zur Erstellung Ihrer HTML-Dateien verwenden, sollten Sie folgende Regeln kennen und beachten:

  • Notieren Sie in einer neuen Datei immer zuerst das Seite Grundgerüst einer HTML-Datei.
  • Beachten Sie bei der Texteingabe die Maskierungsvorschriften für Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen.
  • Setzen Sie Zeilenumbrüche und Leerzeilen so, dass Sie im Quelltext eine optimale Übersicht behalten. Beachten Sie aber auch, dass Zeilenumbrüche und Absatzschaltungen im Web-Browser nicht so angezeigt werden, wie sie im Quelltext eingegeben wurden. Für Zeilenumbrüche und Absatzschaltungen, die im WWW-Browser wirksam sein sollen, müssen Sie die entsprechenden HTML-Elemente verwenden, zum Beispiel diejenigen für Seite Textabsätze (Absatzschaltungen) oder Seite Zeilenumbrüche. Wenn Sie aus besonderen Gründen Text im Web-Browser so anzeigen wollen wie Sie ihn eingeben (mit allen Einrückungen, Umbrüchen usw.), können Sie das HTML-Element für Seite präformatierten Text verwenden.
  • Beachten Sie, dass es in HTML keine Tabulatoren gibt. Ein im Quelltext eingegebener Tabulator wird bei der Anzeige im Web-Browser in ein Leerzeichen umgewandelt. Zeilenumbruch-Zeichen, Tabulator-Zeichen und einfache Leerzeichen bilden in HTML die Klasse der so genannten White-Space-Zeichen (white space = "weißer Raum"). Die Browser setzen in der Regel ein Tabulator-Zeichen oder Zeilenumbruch-Zeichen im Editor als Leerzeichen im HTML-Text um. Mehrere solcher White-Space-Zeichen hintereinander werden ignoriert und zu einem einzigen Leerzeichen zusammengefasst. Um mehrere Leerzeichen hintereinander zu erzwingen, können Sie anstelle der normalen Leerzeicheneingabe die Zeichenfolge &#160; ( Seite geschütztes Leerzeichen) eingeben, und zwar so oft hintereinander wie gewünscht.
nach oben
weiter | Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen
zurück | Seite Grundgerüst einer HTML-Datei
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen

SELFHTML

Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen
Informationsseite

nach unten Allgemeines zu Zeichen in HTML
nach unten Deutsche Umlaute und scharfes S
nach unten Das Euro-Zeichen in HTML
nach unten HTML-eigene Zeichen maskieren
nach unten

Allgemeines zu Zeichen in HTML

Wenn Sie Ihre Texte - sagen wir in deutscher Sprache - einfach in einen HTML-Editor eintippen, den Text mit Hilfe von HTML-Elementen strukturieren und sich das Ganze dann im Web-Browser anzeigen lassen, wird in der Regel der gesamte eingegebene Text korrekt angezeigt. Das klingt selbstverständlich - ist es aber nicht. In der HTML-Datei stehen nämlich nicht Ihre eingegebenen Buchstaben und anderen Zeichen, sondern nur Bytes, also letztlich Einsen und Nullen.

Beim Speichern der Buchstaben muss Ihr HTML-Editor nun einen bestimmten Algorithmus anwenden, um die Zeichen in Bytes umzuwandeln. Der Web-Browser muss dieselbe Methode rückwärts anwenden, um alle Zeichen im HTML-Dokument korrekt zu erkennen. Diese Methode wird Zeichenkodierung genannt. Es gibt viele verschiedene davon, z.B. speziell zur Speicherung von westeuropäischen, kyrillischen oder arabischen Zeichen. Genaueres über Zeichenkodierungen erfahren Sie im Kapitel Seite Computer und geschriebene Sprache.

Eine solche Zeichenkodierung greift auf eine Übersetzungstabelle (Codetabelle) zurück, die jedem Zeichen, das verwendet werden kann, eine fortlaufende Nummer (einen Code) zuweist. So hat z.B. der lateinische Buchstabe "a" in der Seite Unicode-Zeichentabelle die (dezimale) Nummer 97, "b" 98, "c" 99 und so weiter. Die Menge der Zeichen in einer solchen Tabelle wird Zeichenvorrat genannt.

Da unzählige Kodierungen für HTML-Dateien verwendet werden können, ist es unbedingt notwendig, dass der Browser diejenige Kodierung anwendet, mit welcher der Editor die HTML-Datei gespeichert hat. Sie sollten daher einen Editor verwenden, in dem Sie beim Speichern die Kodierung wählen können. Zudem sollte die HTML-Datei eine Angabe zur verwendeten Zeichenkodierung enthalten oder sie sollte zumindest durch den Webserver in der HTTP-Antwort übermittelt werden. Wenn eine solche Angabe fehlt, dann ist die HTML-Datei gemäß dem HTML-Standard fehlerhaft. Ein Web-Browser darf die verwendete Kodierung strenggenommen nicht "erraten".

Allerdings sind die Browser in diesem Punkt äußerst tolerant und greifen zumeist auf die voreingestellte Kodierung zurück. In Ihrem Browser, der wahrscheinlich eine englische oder deutschsprachige Benutzerführung hat, ist vermutlich Seite ISO 8859-1 (Latin-1) eingestellt, die verbreitete Kodierung für westeuropäische Sprachen. Weil der Editor, den Sie beim Eintippen benutzen, vermutlich ebenfalls ISO 8859-1 beim Abspeichern verwendet, klappt scheinbar alles problemlos. Nun kann es aber, wenn Ihre Seiten im Web stehen, auch passieren, dass Besucher aus Osteuropa, Asien usw. vorbeikommen, deren Browser standardmäßig eine andere Kodierung annehmen. Solche Besucher werden dann lauter Zeichen aus der Codetabelle ihres eigenen, vertrauten Zeichencodes sehen - aber es wird ein wilder, sinnloser Zeichensalat sein.

HTML bietet Ihnen deshalb die Möglichkeit an, dem Browser mitzuteilen, welche Zeichenkodierung die Datei verwendet. Im Kopf einer HTML-Datei notieren Sie dazu in einem so genannten Meta-Tag eine Seite Angabe zur Zeichenkodierung. Eine solche Angabe ist unbedingt zu empfehlen, da Sie dem Browser die Entscheidung leichter macht, wie die Bytes der HTML-Datei in Zeichen umzuwandeln sind. Dann liegt es am Browser, die von Ihnen gemeinten Zeichen auf dem Bildschirm beispielsweise eines Seitenbesuchers aus Fernost so anzuzeigen, wie Sie sie eingetippt haben.

Die verbreiteten ISO-Kodierungen arbeiten mit einem Zeichenvorrat von 256 Zeichen. Dies hat den Vorteil, dass ein Zeichen immer genau mit einem Byte dargestellt wird. Somit lassen sich mit solchen Kodierungen nur 256 unterschiedliche Zeichen speichern. Trotzdem ist der Zeichenvorrat von HTML - das heißt die Menge aller verwendbaren Zeichen, unabhängig von der Art, wie sie in Bytes gespeichert werden - nicht auf den Zeichenvorrat der verwendeten Kodierung beschränkt. In einem HTML-Dokument können grundsätzlich alle Zeichen aus Seite Unicode verwendet werden. Fortschrittliche Kodierungen wie UTF-8 können alle Zeichen des Unicode-Standards direkt in Bytes bzw. Byteketten kodieren.

Wenn Sie im Text einzelne Zeichen eingeben wollen, die nicht im Zeichenvorrat der verwendeten Kodierung enthalten sind, können Sie zwischen zwei Möglichkeiten wählen: Entweder Sie verwenden eine spezielle numerische Notation. Für häufiger verwendete Sonderzeichen stellt HTML aber auch so genannte benannte Zeichen zur Verfügung. Für beide Möglichkeiten sollten Sie sich mit der Seite HTML-Zeichenreferenz beschäftigen.

Deutsche Umlaute und scharfes S

Wenn Sie Kodierungen wie ISO 8859-1 oder UTF-8 verwenden, können Sie die deutschen Umlaute direkt in Ihrem Editor eintippen. Sofern Sie die besagte Angabe zur Zeichenkodierung im Kopf der HTML-Datei notieren, können Sie davon ausgehen, dass aktuelle und auch ältere Browser die Datei korrekt verarbeiten.

Dennoch gibt es einige Sonderfälle, in denen es sinnvoll ist, sich auf die Seite ASCII-Zeichen zu beschränken, um mögliche Probleme bei der Verarbeitung zu vermeiden. In diesem Fall können Sie deutsche Umlaute sowie das scharfe S durch benannte Zeichen umschreiben. Das gilt für den gesamten Inhalt einer HTML-Datei.

Zeichen | Ersetzung
ä | &auml;
Ä | &Auml;
ö | &ouml;
Ö | &Ouml;
ü | &uuml;
Ü | &Uuml;
ß | &szlig;

Beispiel:

In M&uuml;nchen steht ein Hofbr&auml;uhaus.
Dort gibt es Bier aus Ma&szlig;kr&uuml;gen.

Erläuterung:

Die deutschen Sonderzeichen werden durch die entsprechenden benannten Zeichen ersetzt. Auch wenn die Zeichenfolgen irritieren mögen - keine Sorge, die Web-Browser verstehen das und zeigen die Zeichen korrekt an.

Beachten Sie:

Es gibt eine Menge weiterer Sonderzeichen, die durch solche Umschreibungen dargestellt werden sollten. Diese finden Sie in der Seite HTML-Zeichenreferenz aufgelistet.

Das Euro-Zeichen in HTML

Auch für das Euro-Zeichen gibt es ein benanntes Zeichen in HTML. Das Euro-Zeichen ist nicht im Zeichenvorrat von ISO 8859-1 enthalten, sodass Sie das benannte Zeichen an dessen Stelle nutzen müssen, wenn Sie diese Kodierung verwenden möchten.

Beispiel:

Preis: &euro; 199,-

Erläuterung:

Notieren Sie an der Stelle, wo das Euro-Zeichen stehen soll, die Zeichenfolge &euro;.

Beachten Sie:

Wenn Sie unter Microsoft Windows das Euro-Zeichen über die Tastenkombination AltGr + e in die HTML-Datei eintippen, sollten Sie vorsichtig sein. Einige Editoren nutzen standardmäßig die Kodierung Windows 1252. Diese gleicht ISO 8859-1 weitestgehend. Doch an der Stelle der Codetabelle, wo in ISO 8859-1 einige in HTML nicht verwendete Steuerzeichen liegen, liegen in Windows 1252 unter anderem typographische Anführungszeichen, Gedankenstriche und eben das Euro-Zeichen. Ein Browser, der Windows-1252-kodierte HTML-Dateien gemäß ISO 8859-1 verarbeitet, wird nämlich kein Euro-Zeichen anzeigen, sondern z.B. ein Fragezeichen oder ein kleines Quadrat. Denn an der Stelle des Euro-Zeichens in Windows 1252 liegt in der Codetabelle von ISO 8859-1 ein nicht druckbares Steuerzeichen.

Wenn Sie ISO 8859-1 verwenden wollen und Ihre HTML-Dateien eine entsprechende Angabe zu Kodierung enthalten, sollten Sie es daher vermeiden, das Euro-Zeichen direkt einzugeben. Verwenden Sie entweder beim Speichern eine Kodierung, in deren Zeichenvorrat das Euro-Zeichen vorkommt (z.B. UTF-8 oder ISO 8859-15), sowie einen Editor, der diese Kodierungen korrekt anwendet. Andernfalls können Sie einfach das oben beschriebene &euro; notieren. Eine weitere Alternative ist die numerische Notation. Im Unicode-Standard hat das Euro-Zeichen den Dezimalwert 8364 oder den Hexadezimalwert 20AC. In HTML können Sie das Euro-Zeichen demnach numerisch so referenzieren: &#8364; oder &#x20AC;.

HTML-eigene Zeichen maskieren

Wenn in Ihrem Text Zeichen vorkommen, die in HTML eine bestimmte Bedeutung haben, müssen Sie diese Zeichen maskieren. Die folgenden Zeichen müssen Sie wie folgt maskieren:

Ersetzen Sie das Zeichen & durch die Zeichenfolge &amp; ("Ampersand")
Ersetzen Sie das Zeichen < durch die Zeichenfolge &lt; ("lower than")
Ersetzen Sie das Zeichen > durch die Zeichenfolge &gt; ("greater than")

Des Weiteren ist es ratsam, an bestimmten Stellen das Zeichen " durch die Zeichenfolge &quot; ("Quote") zu ersetzen. Dies ist vor allem in Attributwerten sinnvoll.

Beispiel:

Das ist ein &lt;HTML-Tag&gt;
GmbH &amp; Co. KG
<strong title="bekannt durch den Ausspruch &quot;Ich wei&szlig;, dass ich nichts wei&szlig;!&quot;">
der griechische Philosoph Sokrates</strong>

Erläuterung:

Ersetzen Sie die HTML-eigenen Zeichen wie im obigen Beispiel durch die entsprechenden Zeichenfolgen.

Beachten Sie:

Am gefährlichsten ist die spitze öffnende Klammer (<). Wenn Sie dieses Zeichen nicht wie vorgeschrieben maskieren, bringen Sie den Web-Browser mit ziemlicher Sicherheit durcheinander, weil er glaubt, nun würde ein HTML-Tag folgen. Die anderen HTML-eigenen Zeichen führen zwar meistens nicht zu Anzeigefehlern, dennoch sollten Sie sie möglichst maskieren.

nach oben
weiter | Seite Farben definieren in HTML
zurück | Seite Regeln beim Editieren von HTML
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Farben definieren in HTML

SELFHTML

Farben definieren in HTML
Informationsseite

nach unten Allgemeines zu Farben in HTML
nach unten Hexadezimale Angabe von Farben
nach unten Farbnamen für die 16 Grundfarben
nach unten Netscape-Farbnamen
nach unten

Allgemeines zu Farben in HTML

Farben können Sie in HTML in vielen Zusammenhängen definieren, zum Beispiel:

  • bei Seite dateiweiten Hinter- und Vordergrundfarben
  • bei Seite Schriftfarben für Textabschnitte
  • bei Seite Hintergrundfarben in Tabellen

Allerdings sind all diese Angaben in HTML vom W3-Konsortium mittlerweile als deprecated (missbilligt) gekennzeichnet, d.h. sie sollen künftig nicht mehr zum Sprachstandard gehören. Der Grund ist, dass sich all diese Farben auch mit Hilfe von Kapitel Stylesheets definieren lassen. Denn CSS ist die Sprache für die Optik, nicht mehr HTML. Allerdings lohnt es, sich trotzdem mit dem Definieren von Farben in HTML zu befassen, weil in CSS die gleichen Farbangaben möglich sind, dort aber darüber hinaus noch weitere Möglichkeiten bestehen. Im Abschnitt über Seite Farbangaben in CSS wird das Thema aus CSS-Sicht behandelt.

Grundsätzlich gibt es zwei Möglichkeiten, Farben in HTML zu definieren:

  • durch Angabe der RGB-Werte der gewünschten Farbe in Hexadezimalform (RGB = Rot/Grün/Blau-Wert der Farbe)
  • durch Angabe eines Farbnamens

Wenn Sie hexadezimale Werte angeben, arbeiten Sie Browser-unabhängig, und Sie haben die volle Freiheit zwischen 16,7 Millionen Farben.

Wenn Sie Farbnamen angeben, umgehen Sie die etwas schwierige Definition einer Farbe im Hexadezimal-Modus. Derzeit sind jedoch nur 16 Farbnamen offiziell standardisiert. Weitere Farbnamen gibt es, sie sind jedoch Browser-abhängig.

Hexadezimale Angabe von Farben

Wenn Sie Farben direkt im Hexadezimal-Modus definieren, müssen Sie die gewünschte Farbe aus Angaben zu den drei Grundfarben Rot, Grün und Blau (RGB-Werte) zusammenstellen.

Beispiele:

<body bgcolor="#808080"> <!-- dunkelgrauer Dateihintergrund -->
<table bgcolor="#00C0C0"> <!-- blaugrüner Tabellenhintergrund -->
<hr color="#CC00CC">  <!-- violette Trennlinie -->

Erläuterung:

Jede hexadezimale Farbdefinition ist 6stellig und hat das Schema: #RRGGBB.
Zunächst notieren Sie also ein Gatter #. Dahinter folgen 6 Stellen für die Farbdefinition. Die ersten beiden Stellen stellen den Rot-Wert der Farbe dar, die zweiten beiden Stellen den Grünwert, und die letzten beiden Stellen den Blau-Wert.

Hexadezimale Angabe von Farben

Hexadezimale Ziffern sind:

0 (entspricht dezimal 0)
1 (entspricht dezimal 1)
2 (entspricht dezimal 2)
3 (entspricht dezimal 3)
4 (entspricht dezimal 4)
5 (entspricht dezimal 5)
6 (entspricht dezimal 6)
7 (entspricht dezimal 7)
8 (entspricht dezimal 8)
9 (entspricht dezimal 9)
A (entspricht dezimal 10)
B (entspricht dezimal 11)
C (entspricht dezimal 12)
D (entspricht dezimal 13)
E (entspricht dezimal 14)
F (entspricht dezimal 15)

Eine hexadezimale Ziffer kann also 16 Zustände haben. Für jeden Farbwert (Rot, Grün, Blau) stehen 2 Ziffern zur Verfügung. Das macht 16 x 16 (= 256) mögliche Zustände pro Farbwert.

Beachten Sie:

Es gibt 16 Grundfarben, die von jedem VGA-kompatiblen Bildschirm angezeigt werden können.

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Es gibt ferner 216 Standardfarben, die Netscape intern und plattformübergreifend zur Verfügung stellt. Diese Farbpalette hat sich im WWW zu einer Art Quasi-Standard entwickelt.

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Mehr über diese Paletten und ihre Bedeutung erfahren Sie im Dokumentabschnitt über Seite Standard-Farbpaletten.

Um Ihnen das Definieren von Farben zu erleichtern, gibt es innerhalb dieser Dokumentation einen Seite Farbauswähler.

Farbnamen für die 16 Grundfarben

Um eine Farbe mit Hilfe eines Farbnamens zu definieren, geben Sie anstelle des hexadezimalen RGB-Werts einfach den gewünschten Farbnamen an. Die folgenden Farbnamen sind Bestandteil von HTML seit Version 3.2 und werden von vielen WWW-Browsern verstanden.

Beispiele:

<body bgcolor="black"> <!-- schwarzer Dateihintergrund -->
<table bgcolor="aqua"> <!-- hellblauer Tabellenhintergrund -->
<hr color="red">  <!-- rote Trennlinie -->

Erläuterung:

Geben Sie den gewünschten Farbnamen an einer Stelle an, an der eine Farbangabe erlaubt ist.
Um eine Übersicht über alle erlaubten Farben zu erhalten, rufen Sie das folgende Anzeigebeispiel auf. Dort sind auch die Hexadezimalwerte verzeichnet, die den Farbnamen entsprechen.

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Netscape-Farbnamen

Um eine Farbe mit Hilfe eines Farbnamens zu definieren, geben Sie anstelle des hexadezimalen RGB-Werts einfach den gewünschten Farbnamen an. Die spezielleren Farbnamen werden von Netscape und dem Internet Explorer interpretiert.

Beispiele:

<body bgcolor="brown"> <!-- brauner Dateihintergrund -->
<table bgcolor="darkblue"> <!-- dunkelblauer Tabellenhintergrund -->
<hr color="pink">  <!-- pinkfarbene Trennlinie -->

Erläuterung:

Geben Sie den gewünschten Farbnamen an einer Stelle an, an der eine Farbangabe erlaubt ist.
Um eine Übersicht über alle erlaubten Farben zu erhalten, rufen Sie das folgende Anzeigebeispiel auf. Dort sind auch die Hexadezimalwerte verzeichnet, die den Farbnamen entsprechen.

Beispiel-Seite Anzeigebeispiel: So sieht's aus

nach oben
weiter | Seite Referenzieren in HTML
zurück | Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Referenzieren in HTML

SELFHTML

Referenzieren in HTML
Informationsseite

nach unten Allgemeines zum Referenzieren in HTML
nach unten Mit vollständigen URIs referenzieren
nach unten Mit absoluten Pfadangaben relativ zum Basis-URI referenzieren
nach unten Mit relativen Pfadangaben relativ zum Basis-URI referenzieren
nach unten

Allgemeines zum Referenzieren in HTML

HTML-Dateien bestehen bekanntlich nur aus Text. Dennoch enthalten viele Web-Seiten Grafiken, Hintergrundgrafiken, Multimedia-Elemente, Java-Applets, Flash-Animationen und dergleichen. Solche Elemente werden in HTML in Form einer Referenz auf eine entsprechende Datenquelle notiert. Auch ein ausführbarer Verweis zu einer anderen eigenen oder fremden Web-Seite ist nur ausführbar, wenn er sein Verweisziel benennt. Für all diese Zwecke wird das Referenzieren in HTML benötigt.

Ebenso gibt es in Ergänzungssprachen wie Kapitel Stylesheets oder Kapitel JavaScript Stellen, an denen Sie andere Datenquellen referenzieren müssen.

Die Regeln zum Referenzieren sind dabei immer die gleichen. Der Grund ist das zentrale und einheitliche Adressierungsschema im Web, das unabhängig von der Syntax einzelner Betriebssysteme gilt und die genaue Adressierung beliebiger Quellen im Web erlaubt.

Mit vollständigen URIs referenzieren

Mit vollständigen URIs müssen Sie dann referenzieren, wenn sich die gewünschte Datenquelle grob gesagt nicht im aktuellen eigenen Web-Angebot befindet.

Ein URI (Universal Resource Identifier - universelle Quellenbezeichnung) ist beispielsweise so etwas wie http://www.selfhtml.org/ oder http://de.selfhtml.org/html/allgemein/referenzieren.htm. Beide Beispieladressen sind aber gleichzeitig auch so genannte URLs (Uniform Resource Locators - einheitliche Quellenorter). Und dann gibt es - um die Verwirrung komplett zu machen - auch noch so genannte URNs (Uniform Resource Names - einheitlichen Quellennamen). Letztere sind dazu gedacht, um nicht wirklich existierende Datenquellen oder Quellen, die zwar existieren, aber durch kein bekanntes Internet-Protokoll im Netz abrufbar sind, dennoch eindeutig zu benennen. Ein URI ist also der Oberbegriff für URL und URN, wobei URI und URL bei typischen Adressen, hinter denen sich konkrete Dateien oder Datenquellen verbergen, und um die es hier geht, faktisch das Gleiche sind. Im HTML-Standard wird aber von URIs geredet.

Beispiele für URIs:

http://www.example.org/
http://www.example.org/index.htm
http://www.example.org/index.htm#impressum
http://www.example.org/hintergrund.gif
http://www.example.org/praesentation.pdf
http://www.example.org/cgi-bin/suche.cgi?ausdruck=Hasenjagd
http://www.google.com/search?hl=de&safe=off&q=Stefan+M%FCnz&lr=
ftp://www.example.org/praesentation.pdf
http://192.168.78.10/
http://www.example.org:8082/geheim.htm

Erläuterung:

Ein vollständiger URI besteht aus der Angabe eines Internet-Protokolls, z.B. http oder ftp, gefolgt von einem Doppelpunkt. Dahinter kann - das ist von Protokoll zu Protokoll verschieden - eine Zusatzangabe zu einem lokalen Netzwerknamen möglich sein. Diese Angabe wird in zwei Schrägstriche // eingeschlossen. Bei den meisten Adressen gibt es keine solche Angabe, weshalb die beiden Schrägstriche dort einfach ohne Inhalt nebeneinanderstehen.

Hinter diesen Angaben folgt die Adresse des Host-Rechners im Netz, auf dem sich die Datenquelle befindet. Das kann ein Domain-Name oder eine numerische IP-Adresse sein. Der Domain-Name ist übrigens in den obigen Beispielen example.org. Das www davor ist eine im Web typische und bei Web-Servern einstellbare Voreinstellung für Sub-Domains.

Hinter der Adressierung des Host-Rechners kann - durch einen Doppelpunkt abgetrennt, eine so genannte Portnummer folgen, wie im letzten der obigen Beispiele bei :8082. Das ist immer dann erforderlich, wenn die Datenquelle nicht über den Standard-Port des angegebenen Protokolls wie etwa http erreichbar ist, sondern über einen anderen Port. In der Praxis benötigen Sie die Portangabe eher selten, aber kennen sollten Sie sie.

Dahinter folgt schließlich die lokale Pfadangabe zur gewünschten Datenquelle. Egal um welches Betriebssystem es sich dabei handelt - Verzeichnispfade werden stets durch einfache Schrägstriche getrennt. Es ist Aufgabe der Server-Software auf dem Rechner, die Pfadangaben korrekt aufzulösen. Auf diese Weise brauchen Sie sich keine Gedanken zu machen, welches System der angesprochene Rechner benutzt.

Auf dem Rechner können beliebige Dateien und Datenquellen angesprochen werden. Voraussetzung ist, dass sie über das angegebene Protokoll wie z.B. http unter der Adressierung erreichbar sind. Es muss sich nicht unbedingt um Dateien handeln. So kann mit # und einem Namen dahinter etwa ein bestimmter Zielanker in einer HTML-Datei angesprochen werden. Wie solche Zielanker definiert werden, ist im Abschnitt Seite Anker definieren und Verweise zu Ankern beschrieben. Auch Aufrufe von CGI-Scripts mit Parametern sind URIs, wie im obigen Beispiel suche.cgi?ausdruck=Hasenjagd.

Zeichen, die nicht in der Seite ASCII-Codetabelle vorkommen oder in URIs Bedeutung haben (z.B. der Schrägstrich, der Doppelpunkt oder das Prozentzeichen) müssen Sie innerhalb von URIs maskieren. Das geschieht durch Angabe eines Prozentzeichens % mit anschließendem Hexadezimalwert für das Zeichen. Im obigen Beispiel sehen Sie das z.B. bei M%FCnz, wobei FC die hexadezimale Angabe der Zahl 252 ist. Die Zahl 252 ist wiederum in der Codetabelle von Seite ISO 8859-1 die Nummer für den Buchstaben "ü".

Beachten Sie:

Die voranstehenden Beschreibungen richten sich an Praktiker und erheben keinen Anspruch auf Vollständigkeit. Das Konzept der URIs ist noch wesentlich differenzierter als hier dargestellt. Bei Interesse können Sie es nachlesen: im englischsprachige Seite RFC 1630, welcher sich mit URIs im WWW-Kontext befasst, und im englischsprachige Seite RFC 3986, welcher sich mit der allgemeinen Syntax von URIs befasst.

Datenquellen im eigenen Web-Angebot können Sie natürlich auch mit vollständigen URIs referenzieren. Damit schränken Sie sich jedoch ein (siehe die einleitenden Bemerkungen des nächsten Abschnitts).

Mit absoluten Pfadangaben relativ zum Basis-URI referenzieren

Diese Variante der Referenzierung können Sie wählen, wenn die gewünschte Datenquelle auf dem gleichen Host-Rechner liegt und über das aktuelle Protokoll und den Standard-Port erreichbar ist. Das klingt komplizierter als es ist. In dem vollständigen URI http://de.selfhtml.org/html/allgemein/referenzieren.htm ist der Teil /html/allgemein/referenzieren.htm eine absolute Pfadangabe relativ zur Basis-URI http://de.selfhtml.org. Innerhalb des eigenen Web-Angebots und der eigenen Domain oder Sub-Domain können Sie also mit solchen Pfadangaben arbeiten.

Beispiele:

/
/index.htm
/index.htm#impressum
/hintergrund.gif
/praesentation.pdf
/cgi-bin/suche.cgi?ausdruck=Hasenjagd
/search?hl=de&safe=off&q=Stefan+M%FCnz&lr=

Erläuterung:

Der erste Schrägstrich hinter dem Basis-URI steht für das Wurzelverzeichnis des jeweiligen Internet-Services. Es handelt sich meistens nicht um das tatsächliche Wurzelverzeichnis des Rechners oder der Festplatte, auf die Sie da zugreifen. Bei Web-Servern ist beispielsweise einstellbar, welches tatsächliche Verzeichnis dem Web-Wurzelverzeichnis entsprechen soll.

Hinter dem Basis-URI kann alles folgen, was schon im Abschnitt nach oben Mit vollständigen URIs referenzieren angesprochen wurde.

Mit relativen Pfadangaben relativ zum Basis-URI referenzieren

Diese Variante können Sie wählen, wenn Sie den jeweils aktuellen URI als Bezugs-URI wählen. Dann können Sie von hieraus relativ adressieren. Die HTML-Datei mit dem URI http://de.selfhtml.org/html/allgemein/referenzieren.htm enthält beispielsweise zum Referenzieren einer Grafik folgende Angabe: ../../src/logo.gif. Das bedeutet: gehe zwei Verzeichnisse nach oben, von dort aus ins Unterverzeichnis src und dort findest du die Datei logo.gif. Absolut gesehen hat diese Datei also den URI http://de.selfhtml.org/src/logo.gif.

Diese Form der relativen Adressierung ist innerhalb von Web-Projekten sehr zu empfehlen. Der Grund ist, dass Sie das Web-Projekt auf diese Weise problemlos an eine andere Adresse verschieben können, und trotzdem funktionieren noch alle projektinternen Verweise und Grafikreferenzen. Gerade wenn Sie Ihr Projekt auch mal auf CD-ROM oder anderen Medien veröffentlichen wollen, ist die relative Adressierung ein Muss.

Beispiele:

./
farben.htm
./farben.htm
bilder/grafik.gif
./bilder/grafik.gif
../
../../../../woanders/datei.htm

Erläuterung:

Eine Datei im gleichen Verzeichnis wie dem aktuellen können Sie einfach durch Angabe des Dateinamens referenzieren - im obigen Beispiel etwa die Datei farben.htm. Das aktuelle Verzeichnis referenzieren Sie durch ./ - also einem Punkt, gefolgt von einem Schrägstrich. Die Adressierung von farben.htm und ./farben.htm im obigen Beispiel hat also den gleichen Effekt.

Eine Angabe wie bilder/grafik.gif referenziert eine Datei namens grafik.gif im Verzeichnis bilder, das ein Unterverzeichnis des aktuellen Verzeichnisses ist. Die Notation ./bilder/grafik.gif hat wieder den gleichen Effekt wie bilder/grafik.gif.

Mit ../ referenzieren Sie das Verzeichnis über dem aktuellen Verzeichnis, egal wie es heißt. Mit ../../ referenzieren Sie das Verzeichnis über dem Verzeichnis über dem aktuellen Verzeichnis usw. Von jedem der so adressierten Verzeichnisse können Sie wieder auf deren Unterverzeichnisse zugreifen, wie im letzten der obigen Beispiele gezeigt.

nach oben
weiter | Seite Kommentare und Credits
zurück | Seite Farben definieren in HTML
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Kommentare und Credits

SELFHTML

Kommentare und Credits
Informationsseite

nach unten Nicht angezeigter Text (Kommentar)
nach unten Credits
nach unten

Nicht angezeigter Text (Kommentar)

HTML beinhaltet die Möglichkeit, an beliebigen Stellen innerhalb einer HTML-Datei Kommentare einzufügen. Kommentare werden von Web-Browsern ignoriert, d.h. bei der Präsentation nicht angezeigt. Kommentare sind z.B. sinnvoll, um interne Angaben zu Autor und Erstelldatum in einer Datei zu platzieren, um interne Anmerkungen zu bestimmten Textstellen zu machen oder um verwendete HTML-Tags intern auszukommentieren.

Beispiel:

<h1>Willkommen!</h1>

<!-- Kommentar: das obendrüber ist eine Überschrift -->

<p>viel Text</p>

<!-- und das ist ein mehrzeiliger Kommentar
zu dem Text mit <p>...</p>
Letzte Zeile des Kommentars -->

Erläuterung:

Kommentare werden durch die Zeichenfolge <!-- eingeleitet. Dahinter folgt beliebig langer Kommentartext. Innerhalb des Kommentartextes können Sie auch HTML-Elemente notieren. Alles, was zwischen der einleitenden Zeichenfolge und der beendenden Zeichenfolge --> steht, wird bei der Anzeige im Browser unterdrückt. Speziell gekennzeichnete Kommentare, sogenannte Seite Conditional Comments werden vom Internet Explorer jedoch interpretiert.

Beachten Sie:

Bereits die Zeichenfolge -- startet und beendet den Kommentar. Wenn Sie zur deutlichen Hervorhebung eines Kommentars Sonderzeichen als Trennlinie einsetzen wollen, dann verwenden Sie am besten nicht das Minuszeichen -, sondern irgendein anderes Zeichen, beispielsweise das Gleichheitszeichen = oder das Sternchen *.

Während Sie an Ihren HTML-Dateien basteln, werden Sie häufig Varianten testen und ausprobieren. Dabei ist es hilfreich, bisherige Lösungen vor dem Ausprobieren einer neuen Lösung nicht einfach zu überschreiben, sondern in einen Kommentar zu setzen. Dadurch wird dieser Bereich für den Browser "deaktiviert", und er ist sehr leicht wieder reaktivierbar. So müssen Sie sich nicht ärgern, wenn Sie etwas überschreiben, das eigentlich doch besser war als das, womit Sie es überschrieben haben.

Credits

Folgende Hinweise sollten Sie beachten, wenn Sie beabsichtigen, HTML-Dateien fürs Web zu erstellen:

  • Weisen Sie sich als Verfasser aus:
    Weisen Sie darauf hin, wer die Web-Seiten erstellt hat. Anwender haben ein Recht zu erfahren, wer für eine Web-Seite verantwortlich ist.
  • Weisen Sie das Erstelldatum aus:
    Schreiben Sie das Erstelldatum an eine geeignete Stelle im Text. Besonders bei schnell veraltenden Informationen ist dies wichtig. Eine Preisliste für PC-Hardware etwa, die seit zwei Jahren nicht mehr aktualisiert wurde, wird ihren Nutzen für heutige Anwender dann bereits im Erstelldatum verraten.
  • Weisen Sie Autorenrechte aus:
    Weisen Sie auf Ihre Urheberrechte hin, bzw. nennen Sie ausdrücklich die Bedingungen, was mit Ihrem Text geschehen darf und was nicht. Das Kopieren des Textes können Sie kaum verbieten, wohl aber die Weitergabe des Textes nach darin vorgenommenen Änderungen. Auch für Grafiken, z.B. Logos, sollten Sie entsprechende Angaben machen.
  • Bieten Sie die Möglichkeit zum Feedback an:
    Dazu können Sie zum Beispiel einen Seite E-Mail-Verweis oder ein Kapitel Formular verwenden.
nach oben
weiter | Seite Konventionen für Dateinamen
zurück | Seite Referenzieren in HTML
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Konventionen für Dateinamen

SELFHTML

Konventionen für Dateinamen
Informationsseite

nach unten Dateinamen im Hinblick auf Server-Rechner
nach unten Dateinamen im Hinblick auf Kompatibilität
nach unten Dateiendungen
nach unten Default-Dateinamen bei Web-Servern
nach unten

Dateinamen im Hinblick auf Server-Rechner

Die meisten Server-Rechner im heutigen Web haben ein Unix- oder von Unix abgeleitetes Betriebssystem. Unix unterscheidet strikt zwischen Groß- und Kleinschreibung bei Dateinamen. Wer sein Web-Projekt beispielsweise in einer DOS-/Windows-Umgebung erstellt, wo dies keine Rolle spielt, kann bittere Erfahrungen machen, wenn plötzlich die lokal funktionierenden Kapitel Verweise und Kapitel Grafikreferenzen nach dem Hochladen auf den Server-Rechner nicht mehr funktionieren. Der Grund ist in solchen Fällen, dass beispielsweise in den HTML-Dateien kleingeschriebene Verweisziele oder Grafikdateinamen notiert wurden, während das DOS-/Windows-System großgeschriebene Dateinamen an den Server übertragen hat.

Es bleibt Ihnen in einem solchen Fall kaum eine andere Möglichkeit, als entweder die Dateien auf dem Server-Rechner mit Hilfe von FTP-Befehlen so umzubenennen, wie sie in den Verweisen und Grafikreferenzen notiert sind, oder die Verweise und Grafikreferenzen so anzupassen, dass die referenzierten Ziele korrekt gefunden werden. Wenn Sie mit einem System arbeiten, das Groß-/Kleinschreibung bei Dateinamen zwar für die Optik, aber nicht intern unterscheidet (z.B. Windows seit Version 95), ist es am sichersten, Sie erzeugen Dateinamen, die nur aus Kleinbuchstaben bestehen, und in Verweisen und Grafikreferenzen notieren Sie ebenfalls alle Dateinamen in Kleinbuchstaben.

Dateinamen im Hinblick auf Kompatibilität

Wenn Sie Ihr Web-Projekt ausschließlich für den Einsatz im Web erstellen, müssen Sie nur darauf achten, dass die Dateien vom Server-Rechner akzeptiert werden. Bei modernen Unix-Systemen, wie sie die meisten Web-Server einsetzen, sind Dateinamen bis zu 256 Zeichen Länge erlaubt. Vermeiden Sie aber nach Möglichkeit deutsche Umlaute und scharfes S in den Dateinamen. Als Sonderzeichen ist in jedem Fall der Unterstrich "_" erlaubt. Andere Satzzeichen sollten Sie vermeiden. Fragezeichen "?" und Sternzeichen "*" sollten Sie auf jeden Fall vermeiden, da diese Zeichen bei fast allen Systemen eine besondere Bedeutung haben. Auch auf Leerzeichen sollten Sie unbedingt verzichten.

Eventuell kann es im speziellen Einzelfall notwendig sein, dass Sie für die Dateibenennung die engen Grenzen von MS-DOS einhalten (maximal 1 Punkt zur Trennung von Dokumentname und Dateiendung, 8 Zeichen vor dem Punkt und 3 Zeichen dahinter). Wenn solch eine Begrenzung existiert, sollte Ihnen das aber von vornherein bekannt sein oder gemacht werden, weil es heutzutage äußerst ungewöhnlich ist. Nahezu alle Systeme beherrschen lange Dateinamen - selbst Microsoft hat 1995 mit Windows 95 nachgezogen.

Dateiendungen

Hierbei gilt generell: halten Sie unbedingt die üblichen Dateiendungen ein. Der Webserver muss anhand der Dateiendung entscheiden, welchen Seite MIME-Typ er dem Browser sendet. Und der Browser entscheidet anhand des MIME-Typs, wie er die Datei behandelt.

  • Gewöhnliche HTML-Dateien erhalten entweder die Endung .html oder .htm.
  • HTML-Dateien mit enthaltenen Seite Server Side Includes erhalten die Endung .shtml oder .shtm.
  • HTML-Dateien mit enthaltenen Kapitel PHP-Abschnitten erhalten die Endung .php.
  • HTML-Dateien mit enthaltenen Seite ASP-Abschnitten erhalten die Endung .asp.

Default-Dateinamen bei Web-Servern

Die meisten heutigen Web-Server sehen einen oder mehrere bestimmte Dateinamen als Datei für die "Einstiegsseite" vor. Meistens ist das der Name index.html oder index.htm, manchmal auch welcome.html bzw. welcome.htm oder default.html bzw. default.htm. Bei einigen Providern können Sie auch selbst einen beliebigen Dateinamen als Default-Dateinamen bestimmen. Und wenn Sie selbst Zugriff auf die Konfiguration des Web-Servers haben, können Sie die Default-Dateinamen dort einstellen.

Default-Dateinamen haben den Vorteil, dass die Web-Adresse keinen HTML-Dateinamen mehr braucht und kürzer wird. Viele Adressen lauten ja einfach http://www.example.org/ oder http://www.example.org/verzeichnis/ - ohne weitere Angabe einer bestimmten HTML-Datei. Dass beim Aufruf einer solchen Adresse dennoch eine bestimmte HTML-Datei geladen wird, liegt eben daran, dass es eine Datei mit einem Namen gibt, die der Web-Server als Default-Dateiname gespeichert hat.

Erkundigen Sie sich bei Ihrem Provider, ob er einen Default-Dateinamen für Verzeichnisse anbietet, und wenn ja, welchen. Erstellen Sie Ihr Projekt dann so, dass die Einstiegsseite diesen Dateinamen hat und untergeordnete Seiten auf diese Datei zurückverweisen.

nach oben
weiter | Seite Informationsverteilung und Dateiorganisation
zurück | Seite Kommentare und Credits
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Informationsverteilung und Dateiorganisation

SELFHTML

Informationsverteilung und Dateiorganisation
Informationsseite

nach unten Hypertext schreiben - Information verteilen
nach unten Dateiorganisation
nach unten

Hypertext schreiben - Information verteilen

HTML steht für Hypertext Markup Language. Die Sprache ist ausgelegt für hypertext-gerechte Informationsverteilung. Der Anwender soll zwischen Informationen "navigieren", die ihn interessieren. Wenn Sie dieser Themenkomplex näher interessiert, sollten Sie in der Einführung des vorliegenden Dokuments das Unterkapitel über Kapitel Hypertext lesen.

Bei der Hypertext-Informationsverteilung ist es nötig, dass die angebotene Information auf kleine, in sich abgeschlossene Informationseinheiten verteilt wird, die untereinander auf eine nachvollziehbare und einsichtige Weise vernetzt sind.

Wenn Sie beispielsweise Ihren Fußballverein im WWW präsentieren wollen, gehört dazu die übliche Einstiegsseite mit Verweisen zu den Unterseiten. Die Unterseiten sollten jeweils an gleicher Stelle einen Rückverweis auf die Einstiegsseite enthalten. Je eine Unterseite könnten Sie in diesem Beispiel etwa für die Geschichte, für die Vereinsberichte, für die aktuellen Tabellenstände, und für die derzeitigen Spieler spendieren. Die Seite für Spieler könnte nochmals Verweise zu Seiten enthalten, auf denen jeweils ein einzelner der Spieler vorgestellt wird. Bei solchen Unter-Unter-Seiten ist ein Rückverweis zur nächsthöheren Ebene wie auch zur Einstiegsseite angebracht. Wichtig sind auch die Querverweise. Wenn ein Spieler bereits lange dabei ist, findet sich bestimmt auch ein Querverweis zu einem wichtigen Ereignis der Vereinsgeschichte. Bei den Erläuterungen zum aktuellen Tabellenstand sind wiederum Querverweise zu den besten Torschützen usw. denkbar.
So entsteht ein sinnvolles Netz aus Einzelinformationen. Zusätzliche Verlinkungen sollten die Navigationsmöglichkeiten ergänzen. So ist es in vielen Fällen sinnvoll, so genannte Guided Tours anzubieten, also eine Abfolge von Seiten, die der Anwender bequem durchblättern kann.
Egal welche Art von Projekt Sie in Angriff nehmen: immer sollten Sie den hier skizzierten Blick für die Strukturierung und Vernetzung der Information im Auge behalten.

Was hier als "Seite" oder "Unterseite" bezeichnet wird, sollte in einem Web-Projekt jeweils eine HTML-Datei sein. Schrecken Sie nicht vor der Anzahl der entstehenden Dateien zurück. Die saubere Strukturierung der Information sollte oberstes Gebot sein.

Die Technik der Vernetzung zwischen Projektdateien mit HTML wird im Abschnitt über Kapitel Verweise beschrieben. Weitere Tips für die Konzeption Ihres WWW-Projekts erhalten Sie im Abschnitt Seite Web-Projekte planen.

Dateiorganisation

Bei jedem etwas größeren Projekt werden Sie schnell feststellen, wie viele HTML-, Grafik- und andere Dateien sich dabei ansammeln. Um den Überblick zu behalten, sollten Sie sich entweder ein sinnvolles Dateinamenschema überlegen, oder Sie legen Unterverzeichnisse an, etwa für Dateien zu einem Themengebiet, oder für Grafiken usw. Wenn Sie Ihr Projekt im Web veröffentlichen wollen, müssen Sie beim Einsatz von Unterverzeichnissen vorher klären, ob Sie auf dem Web-Server, wo das Projekt einmal abgelegt werden soll, die Berechtigung bzw. Möglichkeit haben, Unterverzeichnisse anzulegen. Denn Sie werden in diesem Fall auf dem Server-Rechner die gleiche Verzeichnisstruktur erstellen müssen, die Sie lokal beim Erstellen gewählt haben, damit alle Verweise und Referenzen funktionieren.

nach oben
weiter | Seite Guter HTML-Stil
zurück | Seite Konventionen für Dateinamen
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Guter HTML-Stil

SELFHTML

Guter HTML-Stil
Informationsseite

nach unten Allgemeine Hinweise
nach unten Nicht für bestimmten Browser schreiben
nach unten Nicht für bestimmte Bildschirmauflösung schreiben
nach unten HTML-Elemente nicht zweckentfremden
nach unten Ehrliche und aussagekräftige Verweistexte verwenden
nach unten Grafiken richtig einsetzen
nach unten

Allgemeine Hinweise

Definitive Richtlinien für "richtiges" HTML gibt es nicht. Wohl aber gibt es Regeln, wie ein gültiges HTML-Dokument auszusehen hat. Auf jeden Fall ist es empfehlenswert, sich so weit wie möglich an den HTML-Sprachstandards des W3-Konsortiums zu orientieren. Mittlerweile hat das W3-Konsortium auch erkannt, dass seine Aufgabe nicht nur im Ausarbeiten technischer Spezifikationen besteht, sondern auch in deren Vermittlung an "normalsterbliche" Anwender, die kein abgeschlossenes Informatikstudium haben. Wenn Sie sich intensiv und dauerhaft mit dem Erstellen eigener Web-Seiten beschäftigen, sollten Sie deshalb regelmäßig mal auf den englischsprachige Seite Web-Seiten des W3-Konsortiums nach Neuigkeiten und nach aktuellen Trends und Richtlinien umsehen. Es gibt auch ein deutschsprachige Seite deutsches Büro des W3-Konsortiums, das wichtige Informationen des W3-Konsortiums in deutscher Sprache anbietet.

Für HTML-Autoren bietet das W3-Konsortium ferner einen Service an, um erstellte Dateien auf syntaktische Korrektheit zu überprüfen: den so genannten englischsprachige Seite Validator. Damit können Sie Ihre Seiten, wenn diese im Web über eine HTTP-Adresse erreichbar sind, überprüfen lassen.

Was die Frage nach "gutem HTML-Stil" betrifft, ist es eigentlich viel besser zu beschreiben, wie man es auf keinen Fall machen sollte. Dazu gibt es eine zwar schon etwas betagte, aber immer noch lesenswerte Anleitung im Web: die deutschsprachige Seite Goldenen Regeln für schlechtes HTML von Stefan Karzauninkat.

Nicht für bestimmten Browser schreiben

Wenn Sie Dateien im Web platzieren wollen, sollten Sie zum Testen Ihrer Dateien mehr als einen Web-Browser verwenden. Verwenden Sie die weit verbreiteten Produkte wie Netscape und den Internet Explorer, wenn es irgendwie geht auch in mehreren Versionen, aber auch mal ein älteres Produkt wie etwa Mosaic. Wenn Sie die Möglichkeit haben, auf mehreren Plattformen (MS-Windows, Macintosh, Sun usw.) zu testen, machen Sie unbedingt Gebrauch davon. Und vielleicht schauen Sie sich Ihre Seiten auch mal mit einem Handheld-Computer an oder mit einer Brille, durch die Sie alles undeutlich sehen.

Nun kann Ihnen niemand verbieten, HTML-Dateien zu schreiben, die nur von Netscape oder nur vom Internet Explorer korrekt angezeigt werden. Aber wenn Sie solche Seiten ins Netz stellen, sollten Sie wissen, dass Sie damit letztlich Ihrem Image schaden.

Nicht für bestimmte Bildschirmauflösung schreiben

Das Erzwingen von festen Breiten durch Einsatz von verschachtelten Tabellen und "blinden Pixeln" ist mittlerweile so verbreitet im Web, dass manche Homepage-Autoren schon gar nicht mehr wissen, dass einfaches HTML normalen Fließtext erzeugt, der sich der Fenstergröße des Browsers anpasst. Nun hat es keinen Sinn, das Erzwingen von Mindestbreiten völlig zu verteufeln. Tabellen mit mehreren Spalten und entsprechendem Inhalt benötigen nun mal eine gewisse Breite, und HTML ist auch nicht WML (eine Sprache speziell zum Erstellen von Web-Seiten für Handy-Displays). Wenn Sie aber vor der Frage stehen, ob Sie Ihre Web-Seiten für eine 1024er- oder eine 800er-Bildschirmauflösung "optimieren" sollen - dann stehen Sie vor der falschen Frage. Denn viele Anwender surfen mit mehreren Instanzen des Web-Browsers und öffnen Verweise zu anderen Seiten gerne in neuen Browser-Fenstern. Diese Fenster werden oft nicht im Vollbildmodus angezeigt. Auch haben viele Anwender Programme offen, die grundsätzlich einen Teil des Bildschirms einnehmen und immer angezeigt werden - z.B. Instant-Messaging-Programme wie ICQ. All diese Anwender machen Ihnen also ohnehin nicht die Freude, das Browser-Fenster extra wegen Ihren Seiten auf maximale Bildschirmgröße zu bringen. Grübeln Sie daher nicht lange über anzunehmende Durchschnittswerte von Bildschirmgrößen. Ein paar hundert Pixel (also eine sehr unbestimmte Angabe) in der Breite können Sie voraussetzen, aber das ist auch alles.

Verwenden Sie bei Tabellen oder Frames tendenziell eher prozentuale Breiten- und Höhenangaben. Absolute Pixelangaben haben nur dort einen Sinn, wo beispielsweise die erste Spalte einer blinden Tabelle über einem farblich zweigeteilten Hintergrundbild liegen soll. Ansonsten sollten Sie sich nicht zu sehr auf solche Vorstellungen wie die versteifen, dass eine Grafik oder ein Absatz bei jedem Anwender genau 10,8 cm vom linken Rand entfernt beginnt. Wenn das bei Ihnen gut aussieht, bedeutet das noch lange nicht, dass es bei jemand anderem gut aussieht, und in einigen Fällen könnte es auch ausgesprochen schlecht aussehen.

HTML-Elemente nicht zweckentfremden

Besonders die logisch-semantischen Elemente von HTML sollten Sie nicht benutzen, um bestimmte Formatier-Effekte zu erzielen. So verwenden einige Leute z.B. das blockquote-Element, um Absätze einzurücken, nur weil die Mehrzahl der Browser den Text, der in <blockquote> ... </blockquote> eingeschlossen ist, als eigenen, eingerückten Absatz darstellen. Das blockquote-Element ist jedoch für Zitate gedacht und sollte auch nur dafür verwendet werden.

Noch häufiger wird mit Überschriften und Tabellen Schindluder getrieben. Überschriften sind nicht dazu da, um Text groß und fett zu machen, sondern dazu, logische Hierarchieverhältnisse zwischen Textabschnitten zu markieren. Tabellen sollten zur Gliederung tabellarischer Daten und nicht für Layout-Zwecke eingesetzt werden. Wenn Sie Text auffällig formatieren oder positionieren wollen, dann benutzen Sie dazu Kapitel Stylesheets.

Ehrliche und aussagekräftige Verweistexte verwenden

Generell gilt: das Ziel eines Verweises sollte das halten, was der Verweis verspricht. Das bedeutet beim Setzen des Verweises: der Verweistext sollte weder zu viel noch zu wenig versprechen. Wenn Sie beispielsweise Information über ein Software-Produkt anbieten, ohne es zum Download anzubieten, ist es unfair, dem Anwender mit einem Verweis auf die Information zu suggerieren, er könne das Produkt auch gleich downloaden.

Verweise können in HTML an jeder beliebigen Stelle im Text stehen. Wenn Sie jedoch einmal Text lesen, in dem jedes zweite Wort ein Verweis ist, werden Sie schnell merken, dass dies den Lesefluss ungemein stört. Der Grund dafür ist, dass Verweise immer gleich die Aufmerksamkeit auf sich ziehen und den Leser von seiner eigentlichen Aufgabe, dem geistigen Erfassen des im Text Gemeinten, ablenken. Um so wichtiger ist es, dass Verweise innerhalb des Fließtextes dem Anwender keine Rätsel aufgeben, sondern sofort erfassbar sind.

Verwenden Sie einen Verweis innerhalb des Fließtextes also nur dann, wenn der Verweistext sinnvoll ist. Und formulieren Sie Sätze, in denen verweis-sensitiver Text vorkommt, so, dass der Verweistext aussagekräftig ist.

Schreiben Sie z.B. nicht:
"Für weitere Information klicken Sie hier",
sondern:
"Weitere Informationen sind ebenfalls verfügbar".

Grafiken richtig einsetzen

Wenn Sie nicht gerade eine virtuelle Kunstausstellung in HTML erstellen, sollten Sie sich mit großen Grafikdateien zurückhalten. Bedenken Sie bei Dateien, die Sie fürs Web erstellen, dass viele Anwender entweder einen volumenabhängigen Internet-Zugang haben, d.h. sie zahlen dafür, wie viel Daten sie in den Arbeitsspeicher ihres Rechners laden, oder zeitbasiert bezahlen müssen und sich an langen Ladezeiten ebenfalls nicht erfreuen. Zwar erlauben die meisten Browser, das Laden von Grafiken auszuschalten, doch falls der Anwender keinen Gebrauch von dieser Funktion macht, heißt das noch lange nicht, dass er bereit ist, ohne Ankündigung eine 1-Megabyte-Grafik zu laden.

Versuchen Sie es daher lieber mit kleinen, wohlplatzierten Grafiken. Oft genügen 16 Farben statt 256 oder gar 16,7 Mio. Das macht die Grafiken deutlich kleiner.

Andererseits sollten Sie keinesfalls auf den Einsatz von Grafiken verzichten. Reiner Text ist am Bildschirm nämlich wesentlich ermüdender zu lesen als in Printmedien. Deshalb sollten Sie längere Texte möglichst reichhaltig strukturieren und auflockern. Dazu gehört auch die Verwendung von Grafiken.

Ideal sind kleine Grafiken in Icon-Größe. Die sind schnell geladen, und Sie können bedenkenlos mehrere davon pro HTML-Datei referenzieren.

Kleine Grafiken können auch bestimmte Corporate-Identity-Funktionen oder Orientierungsfunktionen übernehmen. Der Vorteil solcher mehrfach verwendeter Grafiken ist, dass die meisten Browser sie nur einmal laden und dann im Speicher halten.

nach oben
weiter | Seite Titel einer HTML-Datei
zurück | Seite Informationsverteilung und Dateiorganisation
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Allgemeine Regeln für HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / HTML-Kopfdaten

SELFHTML

HTML-Kopfdaten
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei
Dieser Abschnitt beschreibt Angaben, die im Kopfteil einer HTML-Datei notiert werden und Anweisungen für den Web-Browser, für Robots von Suchmaschinen oder für den Web-Server darstellen.
Der Abschnitt besteht aus folgenden Seiten:

Seite Titel einer HTML-Datei
Seite Meta-Angaben zum Inhalt
Seite Adressbasis und Zielfensterbasis
Seite Logische Beziehungen
Seite Durchsuchbarkeit mit Server-Kommunikation

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / HTML-Kopfdaten / Titel einer HTML-Datei

SELFHTML

Titel einer HTML-Datei
Informationsseite

nach unten Titel angeben
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Titel angeben

Jede HTML-Datei muss einen Titel erhalten. Das ist aus folgenden Gründen besonders wichtig:

  • Der Titel der Datei wird bei der Anzeige im Web-Browser in der Titelzeile des Anzeigefensters angezeigt.
  • Der Titel der Datei wird bei der Anzeige im Web-Browser in Karteireitern (tabs) angezeigt.
  • Der Titel der Datei wird vom Web-Browser beim Setzen von Lesezeichen (Bookmarks, Favoriten) auf die Datei verwendet.
  • Der Titel der Datei wird im Web-Browser in der Liste der bereits besuchten Seiten angezeigt.
  • Der Titel der Datei dient im Web vielen automatischen Suchprogrammen als wichtiger Input. Wenn die Datei zu den Suchtreffern einer Suche gehört, bieten viele Suchmaschinen den Titel der Datei als anklickbaren Verweis an.

Beispiel:

<head>
<title>Ausblick vom Hamburger Michel</title>
  <!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Innerhalb des Seite Grundgerüsts einer HTML-Datei wird der Titel im Dateikopf notiert. <title> leitet die Angabe des Titels ein. Dahinter folgt der Text des Titels. Mit </title> wird die Titelangabe abgeschlossen (title = Titel).

Beachten Sie:

Der Titeltext sollte nicht zu lang sein. Für beschreibende Angaben zur Datei gibt es die Seite Meta-Angaben zum Inhalt.

Für den Titeltext gelten alle Regeln für Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen.

nach oben
weiter | Seite Meta-Angaben zum Inhalt
zurück | Seite Guter HTML-Stil
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von HTML-Kopfdaten

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / HTML-Kopfdaten / Meta-Angaben zum Inhalt

SELFHTML

Meta-Angaben zum Inhalt
Informationsseite

nach unten Allgemeines zu Meta-Angaben
nach unten Beschreibung, Autor, Stichwörter, Datum
nach unten Mehrsprachige Meta-Angaben
nach unten Metadaten-Profil in separater Datei
nach unten Schema zu einer Meta-Angabe
nach unten Meta-Angaben nach Dublin Core
nach unten Auslesen erlauben/verbieten
nach unten Angabe zur Zeichenkodierung
nach unten Angaben zu Default-Sprachen für Scripts und Stylesheets
nach unten Datei von Originaladresse laden
nach unten Automatische Weiterleitung zu anderer Adresse (Forwarding)
nach unten Angaben zu PICS
nach unten Diverse Meta-Angaben
nach unten

HTML 2.0 XHTML 1.0 Allgemeines zu Meta-Angaben

In Meta-Angaben können Sie verschiedene nützliche Anweisungen für Web-Server, Web-Browser und automatische Suchprogramme im Internet ("Robots") notieren. Meta-Angaben können Angaben zum Autor und zum Inhalt der Datei enthalten. Sie können aber auch HTTP-Befehle absetzen, zum Beispiel zum automatischen Weiterleiten des Web-Browsers zu einer anderen Adresse.

Meta-Angaben sind nicht für persönliche Anmerkungen oder Kommentare zum Quelltext der HTML-Datei gedacht. Für solche Angaben können Sie Seite Kommentare definieren.

Der HTML-Standard seit Version 4.0 schreibt keine konkreten Meta-Angaben mehr vor, sondern definiert lediglich den grundsätzlichen Aufbau einer Meta-Angabe. Zur Standardisierung von Meta-Angaben arbeitet das W3-Konsortium stattdessen an einer Sprache namens Resource Description Framework (RDF). Auf den Web-Seiten des W3-Konsortiums finden Sie englischsprachige Seite Informationen zum Resource Description Framework.

Für jede Meta-Angabe notieren Sie ein Meta-Tag im HTML-Dateikopf. Es ist also kein Problem, mehrere Meta-Tags zu notieren.

Beispiele:

<head>
<meta name="author" content="Anna Lyse">
<meta http-equiv="expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
  <!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Eine Meta-Angabe steht in einem Standalone-Tag namens meta. Jedes Meta-Tag hat dann in der Regel zwei Attribute. Das eine Attribut lautet entweder name oder http-equiv, und das andere lautet stets content. Durch die beiden Attribute lassen sich typische "Konfigurationsdaten" vom Typ "Eigenschaft=Wert" erzeugen. Im obigen Beispiel wird auf diese Weise z.B. mit name eine Eigenschaft "author" angegeben, der mit content ein Wert Anna Lyse zugewiesen wird. In der zweiten Meta-Angabe des Beispiels wird einer Eigenschaft namens expires der Wert Sat, 01 Dec 2001 00:00:00 GMT zugewiesen. In dem zweiten Beispiel wird die Eigenschaft jedoch mit http-equiv definiert.

Eigenschaften, die mit name definiert werden, richten sich überwiegend an auslesende Client-Programme, also an Web-Browser, aber auch an Suchmaschinen-Robots, die Web-Seiten zum Füttern ihrer Suchmaschinendatenbank auslesen.

Eigenschaften, die mit http-equiv definiert werden, sind dagegen ursprünglich für den Web-Server gedacht. Die Idee dahinter ist, dass der Web-Server, wenn er von einem aufrufenden Browser die Anfrage erhält, diese HTML-Datei zu übermitteln, die Meta-Tags vorher ausliest und Angaben, die mit http-equiv definiert wurden, in den HTTP-Header einbaut, den er an den aufrufenden Web-Browser schickt. Dies soll dem Autor der HTML-Datei ermöglichen, die Kommunikation zwischen Web-Server und Web-Browser zu beeinflussen. Angaben dieser Art bewirken jedoch selten das Gewünschte, da die gängigen Web-Server die Daten vor dem Übertragen der Datei an den Browser standardmäßig nicht auslesen. Somit liegt es am Browser, solche Meta-Angaben wie HTTP-Header zu interpretieren.

Für Wertzuweisungen an content gelten alle Regeln für Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen.

Beachten Sie:

Mit Meta-Angaben wird leider auch viel Missbrauch getrieben. Da die meisten Meta-Angaben keine unmittelbar nachvollziehbare Wirkung am Bildschirm haben und andererseits mit Suchdiensten zu tun haben, regen sie offenbar magisch die Phantasie mancher Geister an, die meinen, mit einem Mammutaufgebot irgendwo aufgeschnappter Meta-Angaben würden sie über Nacht zum Superstar, da ihre Homepage dann immer ganz oben bei den Suchtreffern eines Suchdienstes erscheint. Nachdem Seitenautoren massenhaft widersinnige und irreführende Meta-Angaben verwendet hatten, sind die namhaften Suchdienste dazu übergegangen, Meta-Angaben keine besondere Bedeutung mehr zuzumessen. Stattdessen legen sie Wert auf den Inhalt und berechnen die Relevanz einer Seite anhand der Anzahl der fremden Seiten, die auf diese verweisen. Eine Homepage kann daher nicht durch Meta-Angaben, sondern durch die Qualität der Inhalte erfolgreich werden. Zu einer sauber gemachten Homepage gehört aber auch der sinnvolle Einsatz von Meta-Angaben.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das meta-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <meta name="Eigenschaft" content="Wert" />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

Beschreibung, Autor, Stichwörter, Datum

Die hier beschriebenen Meta-Angaben sind am verbreitetsten, sie wurden einst von fast allen großen Suchmaschinen im Web ausgelesen. Die heutigen populären Suchmaschinen berücksichtigen sie teilweise immer noch. Insbesondere für seiteninterne Suchprogramme, die sich auf die Korrektheit der Metadaten verlassen können, sind die Angaben nach wie vor wichtig.

Sie können Ihre Autorenschaft, eine Kurzbeschreibung des Inhalts, charakteristische Stichwörter und das Publikationsdatum notieren. Insbesondere die Kurzbeschreibung wird in manchen Suchmaschinen angezeigt, wenn ein Anwender nach etwas sucht und diese Datei zu den Treffern gehört. Es ist also sinnvoll, diese Meta-Angaben in allen inhaltlich relevanten HTML-Dateien zu notieren und dabei redaktionell genauso sorgfältig zu sein wie bei dem Text, der im Browser-Fenster angezeigt wird.

Beispiel:

<head>
<meta name="description" content="Dieser Beschreibungstext soll einem
Anwender im Suchdienst bei Auffinden dieser Datei erscheinen.">
<meta name="author" content="Rainer Wahnsinn">
<meta name="keywords" content="HTML, Meta-Informationen,
Suchprogramme, HTTP-Protokoll">
<meta name="date" content="2001-12-15T08:49:37+02:00">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Mit <meta name="description" content="Beschreibungstext"> bestimmen Sie einen Beschreibungstext (meta = "über", name = Name, description = Beschreibung, content = Inhalt).

Mit <meta name="author" content="Autorenname"> teilen Sie den Namen des Autors (d.h.: des inhaltlich Verantwortlichen) für die HTML-Datei mit (author = Autor).

Mit <meta name="keywords" content="[Wortliste]"> bestimmen Sie Stichwörter für ein Suchprogramm. Ein Anwender, der in der Suchdatenbank des Suchprogramms nach einem dieser Stichwörter sucht, soll die aktuelle HTML-Datei bevorzugt als Suchtreffer angezeigt bekommen, da das Stichwort in dieser Datei ein zentrales Thema ist (keywords = Schlüsselwörter). Trennen Sie die einzelnen Schlüsselwörter durch Kommata. Ein Schlüsselwort kann durchaus aus zwei oder mehreren Einzelwörtern bestehen. Halbe oder ganze Sätze gehören hier allerdings nicht hin, denn dafür gibt es den Beschreibungstext, den Sie bei name="description" notieren können.

Mit <meta name="date" content="[Datum/Uhrzeit]"> geben Sie an, wann die Datei publiziert wurde. Die Zeitangabe sollte einem standardisierten Schema folgen. Im obigen Beispiel ist 2001 die Jahreszahl, 12 der Monat (Dezember), 15 der Tag, 08 die Stunden, 49 die Minuten und 37 die Sekunden. Die Angabe 02:00 hinter dem Pluszeichen ist die Abweichung von der koordinierten Weltzeit (UTC) in Stunden und Minuten, im Beispiel zwei Stunden. Dies entspricht der Mitteleuropäischen Sommerzeit. Wenn Sie nur das Datum, aber keine Uhrzeit angeben wollen, notieren Sie nur den Teil der Datumsangabe bis vor dem großen T (für Time).

Mehrsprachige Meta-Angaben

Sie können mehrere gleichartige Meta-Angaben notieren und dabei zwischen verschiedenen Sprachen trennen. Inbesondere Stichwörter und Kurzbeschreibungen des Inhalts können Sie mehrsprachig angeben.

Beispiel:

<head>
<meta name="keywords" lang="de" content="Ferien, Griechenland, Sonnenschein">
<meta name="keywords" lang="en-us" content="vacation, Greece, sunshine">
<meta name="keywords" lang="en" content="holiday, Greece, sunshine">
<meta name="keywords" lang="fr" content="vacances, Gr&egrave;ce, soleil">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Im Beispiel werden die gleichen Stichwörter in den Sprachen Deutsch, US-Englisch, Britisch-Englisch und Französisch definiert. Dabei wird das Attribut lang benutzt, um die Sprache anzugeben. Als Angabe ist ein Seite Sprachenkürzel erlaubt, z.B. de für deutsch, en für englisch, fr für französisch, it für italienisch oder es für spanisch.

Beachten Sie:

Das Attribut lang gehört zu den Kapitel Universalattributen in HTML. Wenn Sie Kapitel XHTML-konform arbeiten, sollten Sie zusätzlich das XML-Universalattribut xml:lang angeben.

Metadaten-Profil in separater Datei

Sie können ein externes "Profil" bzw. Schema für Meta-Angaben angeben, an das Sie sich halten.

Es kann sich dabei um allgemein bekannte Profile handeln, die bestimmte Internet-Adressen als Heimat haben. Denkbar ist eine solche Adresse beispielsweise für nach unten Dublin Core. Ebenso ist es aber auch möglich, ein eigenes Profil mit eigenen Meta-Definitionen anzugeben.

Beispiel:

<head profile="http://example.org/profil.html">
<meta name="Kategorie" content="A.1.B">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Um ein Profil einzubinden, notieren Sie im einleitenden <head>-Tag das Attribut profile. Als Wert weisen Sie einen URI zu, unter dem die Profildatei abgelegt ist. Wie diese Profildatei auszusehen hat, ist nicht vorgeschrieben. Üblicherweise wird eine HTML-Datei angegeben, die die Meta-Eigenschaften tabellarisch auflistet und definiert. Das W3-Konsortium möchte die angegebene Adresse eher als "global eindeutigen Namen" verstanden wissen. Web-Browser oder Suchmaschinen, die das entsprechende Profil kennen, brauchen dann gar nichts auszulesen, sondern erfahren auf diese Weise einfach, dass die nachfolgenden Meta-Angaben diesem Profil gemäß zu interpretieren sind.

In dem Beispiel wird ein Profil zugrunde gelegt, das auf der Internet-Adresse http://example.org/profil.html abgelegt ist. Es wird angenommen, dass in dem Profil eine Meta-Eigenschaft mit dem Namen Kategorie definiert wird. Diese Eigenschaft kann dann mit <meta name="Kategorie" content="..."> benutzt werden.

Beachten Sie:

Die Meta-Angaben selbst können Sie nicht auslagern, nur das Schema, nach dem diese Angaben erfolgen.

Schema zu einer Meta-Angabe

Damit Ihre Metadaten automatisch verarbeitet werden können, sollten die Werte, die Sie beim content-Attribut einer Meta-Angabe notieren, in einem bekannten Format abgefasst sein - vorausgesetzt, ein passendes existiert. Mit Hilfe eines zusätzlichen Attributs können Sie ein solches Schema angeben.

Beispiel:

<head profile="http://example.org/profil.html">
<meta name="Typ" scheme="MIME-Typ" content="image/svg+xml">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

In dem Beispiel wird ein Profil zugrunde gelegt, das auf der Internet-Adresse http://example.org/profil.html abgelegt ist. Es wird angenommen, dass in dem Profil eine Eigenschaft mit dem Namen Typ definiert wird. Diese Eigenschaft kann dann in einer Meta-Angabe mit name="Typ" bezeichnet werden. Das scheme-Attribut stellt den Versuch dar, der auslesenden Software einen Hinweis zu geben, wie der zugehörige Wert beim content zu verstehen ist. Im Beispiel wird mit scheme="MIME-Typ" versucht, der Software mitzuteilen, dass die Angabe bei content einen Seite MIME-Typ meint.

Beachten Sie:

Die Art und Weise, wie auf ein Schema verwiesen wird, ist nicht festgelegt. Dadurch entsteht das Problem, das die Schema-Angabe lösen soll, letztlich auch beim scheme-Attribut selbst. Moderne Metadaten-Profile wie nach unten Dublin Core definieren daher nicht nur Eigenschaften, sondern geben gleichzeitig Bezeichner für mögliche Schemata vor.

Meta-Angaben nach Dublin Core

Eine internationale Gruppe von Experten, unter dem Namen englischsprachige Seite Dublin Core Metadata Initiative vereint, hat ein allgemeines System für Meta-Angaben entwickelt. Damit lassen sich nicht nur Informationen über HTML-Dokumente ausdrücken, es ist auch möglich, zum Beispiel Bilder, Filme, Termine und sogar physische Gegenstände damit zu beschreiben. Das System ist einfach zu handhaben und berücksichtigt alle wichtigen Angaben, die zu einem Dokument im WWW gemacht werden können. Die Meta-Angaben von Dublin Core werden auch vom W3-Konsortium begrüßt, welches vor allem bei RDF Gebrauch davon macht.

Dublin Core definiert im Wesentlichen 15 Eigenschaften, sogenannte Elemente, denen gewisse Werte zugeordnet werden können. Zusätzliche Unterelemente erlauben speziellere Meta-Angaben. Eine vollständige Auflistung und Beschreibung der Elemente finden Sie unter englischsprachige Seite DCMI Metadata Terms. Der Dublin-Core-Standard schlägt für einige Angaben passende nach oben Schemata vor, unter anderem für Seite Medientypen, Seite Sprachenkürzel und Datumsangaben.

Die Spezifikation englischsprachige Seite Expressing Dublin Core in HTML/XHTML meta and link elements beschreibt, wie Sie solche Meta-Angaben in HTML-Dateien einbinden können: Der Elementname wird im name-Attribut des Meta-Tags untergebracht, der zugehörige Wert wie gewohnt im content-Attribut. Optional können Sie im scheme-Attribut das Datenformat angeben, dem der Wert entspricht.

Beispiel:

<head profile="http://dublincore.org/documents/dcq-html/">
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/">
<meta name="DC.title" content="SELFHTML: Meta-Angaben">
<meta name="DC.creator" content="Stefan M&uuml;nz">
<meta name="DC.subject" content="Meta-Angaben">
<meta name="DC.description" content="Heute bekannte Meta-Angaben in HTML">
<meta name="DC.publisher" content="TeamOne">
<meta name="DC.contributor" content="Wolfgang Nefzger">
<meta name="DC.date" content="2001-12-15T08:49:37+02:00" scheme="DCTERMS.W3CDTF">
<meta name="DC.type" content="Text" scheme="DCTERMS.DCMIType">
<meta name="DC.format" content="text/html" scheme="DCTERMS.IMT">
<meta name="DC.identifier"
      content="http://de.selfhtml.org/html/kopfdaten/meta.htm"
      scheme="DCTERMS.URI">
<meta name="DC.source"
      content="http://www.w3.org/TR/html401/struct/global.html#h-7.4.4"
      scheme="DCTERMS.URI">
<meta name="DC.language" content="de" scheme="DCTERMS.RFC3066">
<meta name="DC.relation" content="http://dublincore.org/" scheme="DCTERMS.URI">
<meta name="DC.coverage" content="Munich" scheme="DCTERMS.TGN">
<meta name="DC.rights" content="Alle Rechte liegen beim Autor">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Für verarbeitete Programme wie Suchmaschinen können Sie ausdrücklich angeben, dass Ihr Dokument der Dublin-Core-Spezifikation zum Einbetten von Metadaten in HTML entspricht. Dazu geben Sie die Adresse http://dublincore.org/documents/dcq-html/ als nach oben Metadaten-Profil an.

Bei Meta-Angaben, die einem bestimmten öffentlichen System angehören, wird dem Namen einer Meta-Angabe eine Kurzbezeichnung für das System vorangestellt. Bei den 15 wichtigsten Elementen von Dublin Core lautet dieses Präfix DC, bei den Unterelementen und den Schemata müssen Sie DCTERMS notieren. Dahinter folgt, durch einen Punkt getrennt, der Elementname beziehungsweise der Bezeichner des Datenformates. Um eindeutig herauszustellen, dass alle Meta-Angaben mit diesem Präfix zum Dublin-Core-System gehören, wird mittels link-Verweisen auf die sogenannten Namensräume für Dublin Core verwiesen. Somit ist Eindeutigkeit gewährleistet, selbst wenn andere Metadaten-System ebenfalls mit diesen Kürzeln arbeiten sollten.

Mit <meta name="DC.title" content="Titel"> können Sie einen Titel für die Datei angeben, ähnlich wie im title-Element von HTML (title = Titel).

Mit <meta name="DC.creator" content="Name"> weisen Sie den geistigen Urheber des Inhalts der Datei aus (Creator = Ersteller).

Mit <meta name="DC.subject" content="Text"> geben Sie das Thema an, das in der Datei behandelt wird (Subject = Thema).

Mit <meta name="DC.description" content="Text"> können Sie eine Kurzbeschreibung des Datei-Inhalts notieren (Description = Beschreibung).

Mit <meta name="DC.publisher" content="Name"> können Sie angeben, wer für die Publikation der Datei verantwortlich ist. Das kann der Autor selbst sein, aber auch etwa ein Verlag oder der Nachfahre eines verstorbenen Autors (Publisher = Veröffentlicher).

Mit <meta name="DC.contributor" content="Name"> können Sie Co-Autoren oder Personen angeben, die neben dem Hauptautor maßgeblich am Inhalt beteiligt sind, z.B. Grafiker, Musiker, Übersetzer (Contributor = Beitragender). Falls mehrere Co-Autoren beteiligt waren, notieren Sie mehrere Meta-Tags mit name="DC.contributor".

Mit <meta name="DC.date" content="Datum"> können Sie angeben, wann die Datei publiziert wurde. Das Datum sollte einem der in englischsprachige Seite Date and Time Formats angegebenen Formate entsprechen. Das im Beispiel verwendete Format wird im Zusammenhang mit der nach oben herkömmlichen Datums-Angabe beschrieben. Mit dem Attribut scheme="DCTERMS.W3CDTF" können Sie ausdrücklich notieren, dass die Zeitangabe einem solchen standardisierten Schema entspricht.

Mit <meta name="DC.type" content="Typ"> können Sie den Typ des Inhalts angeben, über den Sie die Meta-Angaben machen. Folgende Typen sind erlaubt:
Collection = wenn der Inhalt ein Verzeichnis mit Verweisen zu Unterseiten ist und die Meta-Angaben das Verzeichnis als solches beschreiben.
Dataset = wenn die enthaltene Information datensatzartig vorliegt, z.B. in einer Tabelle.
Event = wenn der Inhalt für ein zeitliches Ereignis steht, z.B. eine Ausstellung oder eine Hochzeitsfeier.
Image = wenn der Inhalt eine visuelle Darstellung ist, z.B. ein Foto, eine Zeichnung oder auch eine Animation oder ein Film.
InteractiveResource = wenn der Zweck der Seite in der Interaktion mit dem Anwender liegt, z.B. wenn es sich um ein Anmeldeformular handelt oder ein Java-Applet eingebettet ist, das einen Chat realisiert.
PhysicalObject = wenn es sich beim Inhalt der Seite um einen beliebigen physischen Gegenstand handelt. Da dies bei HTML-Dateien nicht möglich ist, hat es wenig Sinn, diesen Typ zu notieren. Falls es sich um eine visuelle Wiedergabe eines solchen Gegenstandes handelt, wählen Sie den Typ Image, bei einer textuellen Beschreibung den Typ Text und bei einer Audio-Aufnahme den Type Sound.
Service = wenn die Seite eine Dienstleistung realisiert, z.B. einen Online-Banking-Dienst.
Software = wenn der Inhalt Software anbietet, z.B. zum Download, und sich die Meta-Angaben auf diese Software beziehen.
Sound = wenn der Inhalt primär akustisch ist, z.B. ein eingebettetes MP3-Musikstück zum Abspielen anbietet oder einen laufenden Radiosender über Real Audio einbettet.
Text = wenn der Inhalt textorientiert ist - egal ob es sich um Sachtexte, Literatur, Witze, Nachrichten oder wissenschaftliche Abhandlungen handelt.
Um ausdrücklich anzugeben, dass Sie einen dieser vordefinierten Typen verwenden, notieren Sie das Attribut scheme="DCTERMS.DCMIType".

Mit <meta name="DC.format" content="Typ"> können Sie das Datenformat bzw. den Medientyp der Datei angeben. Als Wert können Sie einen Seite MIME-Typ angeben. Der MIME-Typ für HTML lautet text/html. Mit dem Attribut scheme="DCTERMS.IMT" können Sie verdeutlichen, dass es sich bei der Angabe um einen Medientyp nach dem offiziellen Schema handelt.

Mit <meta name="DC.identifier" content="Wert"> können Sie eine eindeutige Nummer oder Bezugsadresse für die Datei angeben (identifier = eindeutiger Bezeichner). Bei Web-Seiten ist das beispielsweise der Original-URI. Mit dem Zusatz scheme="DCTERMS.URI" machen Sie darauf aufmerksam, dass der Wert ein gültiger URI ist.

Mit <meta name="DC.source" content="Quelle"> können Sie eine Quelle nennen, von der die aktuelle Datei abgeleitet ist (source = Quelle). Im obigen Beispiel wurde eine Webseite als Quelle angegeben. Sie können jedoch auch den Titel einer Offline-Publikation nennen. Das kann beispielsweise der Fall sein, wenn eine HTML-Datei Auszüge aus einem Buch beinhaltet. Wenn es sich bei der Quellenangabe um einen URI handelt, können Sie dies mit dem Attribut scheme="DCTERMS.URI" betonen.

Mit <meta name="DC.language" content="Sprache"> können Sie die Sprache angeben, in der der Inhalt der Datei verfasst ist (language = Sprache). Als Angabe bei content wird ein Seite Sprachenkürzel nach RFC 3066 erwartet.

Mit <meta name="DC.relation" content="Quelle"> können Sie angeben, welche Beziehung zwischen der aktuellen Datei und einem zugehörigen Editionsprojekt bestehen (Relation = Bezug). Der Wert bei content kann z.B. eine verbale Beschreibung sein, welcher Art der Bezug ist.

Mit <meta name="DC.coverage" content="Text"> können Sie einen zeitlichen oder geografischen Bezugspunkt für den Inhalt der Datei angeben (coverage = Erfassung, Berichterstattung). Das kann bei geografischen Angaben etwa ein Ort, eine Längen-/Breitengradangabe oder eine Region sein, bei zeitlichen Angaben ein Datum oder ein Zeitalter. Im obigen Beispiel wird ein Stadtname aus dem englischsprachige Seite Getty Thesaurus of Geographic Names verwendet. Als Datenformat ist daher scheme="DCTERMS.TGN" notiert.

Mit <meta name="DC.rights" content="Text"> können Sie eine Angabe zum Copyright des Datei-Inhalts machen (rights = Rechte). Sie können dabei aber auch einen URI angeben, unter dem die genauen rechtlichen Bestimmungen aufgeführt sind. In diesem Fall sollten Sie mit scheme="DCTERMS.URI" darauf hinweisen, dass es sich bei dem Wert um einen URI handelt.

Beachten Sie:

Sie müssen nicht alle Meta-Angaben des Dublin-Core-Satzes verwenden. Es ist kein Problem, wenn Sie nur zu denjenigen etwas notieren, wo Sie sinnvolle Angaben machen können. Auch die Angabe der Datenformate im scheme-Attribut ist nicht unbedingt notwendig, aber empfehlenswert, sofern ein entsprechendes Schema existiert.

Obwohl Dublin Core ein bekanntes und ausgereiftes Metadaten-System darstellt, erscheint der praktische Nutzen solcher Meta-Angaben auf den ersten Blick gering. Die führenden Suchmaschinen im Web ignorieren sie mittlerweile völlig. Dies ist als Reaktion auf den Missbrauch zu verstehen, der mit Meta-Angaben in der Vergangenheit getrieben wurde. Der Nutzen von Dublin-Core-Metadaten ist also eher dort anzusiedeln, wo verarbeitende Programme den Metadaten vertrauen können. Bei umfangreichen Web-Angeboten eignen sich derartige Metadaten zum Beispiel für die interne Verwaltung, für dynamisch generierte Inhaltsverzeichnisse und für seiteninterne Suchfunktionen.

Auslesen erlauben/verbieten

Die folgenden Angaben werden von den meisten Suchmaschinen-Robots beachtet.

Wenn Sie eine HTML-Datei zwar im Web anbieten, aber trotzdem verhindern möchten, dass die Datei über öffentliche Suchdienste auffindbar sein soll, können Sie eine entsprechende Anweisung als Meta-Information für Suchprogramme notieren. Sie können solchen Suchprogrammen aber auch mit einer entsprechenden Eingabe signalisieren, dass Sie ein Auslesen der Datei und aller Dateien, die darin über Verweise erreichbar sind, ausdrücklich wünschen.

Beispiel:

<head>
<meta name="robots" content="noindex">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Mit <meta name="robots" content="noindex"> verbieten Sie einem Suchprogramm, Inhalte aus der HTML-Datei an seine Suchdatenbank zu übermitteln (robots = Suchprogramme, content = Inhalt, noindex = keine Indizierung).

Daneben sind folgende weitere Angaben möglich:

<meta name="robots" content="index">. Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen HTML-Datei an seine Suchdatenbank zu übermitteln (index = Indizierung).
<meta name="robots" content="nofollow">. Damit verbieten dem Suchprogramm, untergeordnete Dateien Ihres Projekts, zu denen Verweise führen, zu besuchen (nofollow = nicht folgen). Inhalte aus der aktuellen HTML-Datei darf es jedoch an seine Suchdatenbank übermitteln. Um auch dies zu verbieten, können Sie <meta name="robots" content="noindex, nofollow"> notieren.
<meta name="robots" content="all">. Damit erlauben Sie einem Suchprogramm ausdrücklich, Inhalte aus der aktuellen HTML-Datei und aus untergeordneten Dateien Ihres Projekts, zu denen Verweise führen, zu besuchen und an seine Suchdatenbank zu übermitteln.

Beachten Sie:

Wenn Sie sich für das Erlauben und Verbieten von Inhalten für Such-Robots interessieren, sollten Sie auch den Abschnitt Seite robots.txt - Robots kontrollieren lesen.

Angabe zur Zeichenkodierung

Sie können mit Hilfe einer Meta-Angabe angeben, welche Zeichenkodierung die HTML-Datei verwendet. Diese Angabe ist für den Web-Browser besonders wichtig, denn sie teilt ihm mit, nach welcher Kodierung die Bytes der Datei in Zeichen umgewandelt werden müssen. Näheres zu Zeichenkodierungen finden Sie unter Seite Allgemeines zu Zeichen in HTML und Seite Computer und geschriebene Sprache.

Wichtig ist die Angabe vor allem dann, wenn Sie innerhalb der HTML-Datei z.B. deutsche Umlaute nicht Seite über benannte Zeichen maskieren.

Beispiel:

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Die Angabe der verwendeten Zeichenkodierung wird mit http-equiv="content-type" definiert. Dies weist darauf hin, dass eine Angabe gemacht wird, die normalerweise vom Web-Server in dem HTTP-Header Content-Type an den Web-Browser gesendet wird. Bei content geben Sie zunächst den Seite MIME-Typ an, der für HTML-Dateien immer text/html lautet. Darauf folgt, durch einen Strichpunkt getrennt, die Angabe der Kodierung nach dem Schema charset zusammen mit dem eindeutigen Namen der Kodierung. Im obigen Beispiel wird die Kodierung ISO-8859-1 angegeben, die für westeuropäische Sprachen, darunter Deutsch genutzt wird. Erlaubt sind Kodierungsangaben, wie sie auf der Web-Adresse englischsprachige Seite http://www.iana.org/assignments/character-sets angegeben sind. Informationen über ISO 8859-1 und andere Kodierungen finden Sie im Abschnitt Seite Zeichenkodierungen (ISO-8859-Familie und andere).

Beachten Sie:

Sie werden sich vielleicht fragen, warum die Angabe zur Kodierung hinter charset erfolgt. Aus historischen Gründen wird in vielen technischen Standards, darunter HTTP, der Begriff "Zeichensatz" (englisch character set, abgekürzt charset) anstelle von "Kodierung" verwendet. Diese Bezeichnung wird in SELFHTML vermieden. Diese Begrifflichkeiten werden unter Seite Bits, Bytes und Zeichen erklärt.

Im Konfliktfall, also wenn der Webserver im HTTP-Header eine hiervon abweichende Angabe sendet, wird üblicherweise die Angabe des HTTP-Headers verwendet.

Angaben zu Default-Sprachen für Scripts und Stylesheets

Über das Attribut Seite style sowie die Seite Event-Handler-Attribute bietet HTML die Möglichkeit, Formatierungen und Scriptcode direkt in einzelnen Elementen zu notieren. Auch wenn CSS die übliche Stylesprache und JavaScript die übliche Script-Sprache ist, lässt der HTML-Standard offen, welche Ergänzungssprachen in diesen Attributen notiert werden können. Damit ein Web-Browser sicher weiß, welche Stylesheet-Sprache bzw. welche Script-Sprache Sie nutzen, können Sie angeben, welche Sprachen Sie innerhalb der HTML-Datei verwenden.

Beispiel:

<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Die Angaben der Default-Script-Sprache und der Default-Stylesprache haben einen einheitlichen Aufbau. Die Angabe zur bevorzugten Script-Sprache leiten Sie mit <meta http-equiv="Content-Script-Type" ein, die Angabe zur bevorzugten Stylesprache mit http-equiv="Content-Style-Type". Bei dem Attribut content müssen Sie dann den Seite MIME-Typ der gewünschten Sprache angeben. Beispiele sind text/css für Kapitel Stylesheets und text/javascript für Kapitel JavaScript.

Wenn eine Angabe zur Stylesprache fehlt und Sie dennoch style-Attribute verwenden, so muss ein Browser standardmäßig von CSS als Stylesprache ausgehen. Eine ausdrückliche Angabe der Default-Stylesprache ist daher in der Regel nicht nötig. Anders verhält es sich bei der Script-Sprache in Event-Handler-Attributen: Ein Browser darf strenggenommen nicht JavaScript annehmen, wenn keine Angabe gemacht wurde. Gemäß dem HTML-Standard müssen Sie die Default-Script-Sprache wie erläutert angeben, sobald Sie Event-Handler-Attribute einsetzen. In der Praxis wird darauf aber meist verzichtet - auch SELFHTML verzichtet konsequent auf eine solche Angabe.

Datei von Originaladresse laden

Häufig abgerufene Web-Seiten werden im Web auf so genannten Proxy-Servern zwischengespeichert. Das ist dann ein so genannter Proxy-Cache. Auch Browser speichern aufgerufene Seiten, und zwar lokal auf dem Rechner des Anwenders. Dabei spricht man vom Browser-Cache. Die Cache-Speicher sparen in vielen Fällen Leitungswege und Ressourcen. Ein Nachteil ist jedoch, dass dem Anwender möglicherweise Daten angezeigt werden, die gar nicht mehr aktuell sind, weil auf der Originaladresse mittlerweile neue Daten liegen. Sie können mit Hilfe einer Meta-Angabe erzwingen, dass die Daten nicht aus einem Cache-Speicher serviert werden, sondern vom Original-Server. Zu empfehlen ist diese Angabe, wenn Sie die Daten einer HTML-Datei häufig ändern und neu ins Web hochladen.

Beispiel:

<head>
<meta http-equiv="expires" content="0">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Mit <meta http-equiv="expires" content="0"> veranlassen Sie, dass diese HTML-Datei in jedem Fall von der Originaladresse geladen wird (expires = fällig werden).

Bei content können Sie anstelle der 0 in diesem Zusammenhang aber auch ein bestimmtes Datum und eine bestimmte Uhrzeit angeben. Dadurch bewirken Sie, dass die Daten dieser Datei nach dem angegebenen Zeitpunkt auf jeden Fall vom Original-Server geladen werden sollen. Datum und Uhrzeit müssen Sie im internationalen Format angeben. Beispiel: content="Sat, 15 Dec 2001 12:00:00 GMT". Notieren Sie den Zeitpunkt so wie im Beispiel mit allen Leerzeichen, Doppelpunkten zwischen Stunden, Minuten und Sekunden sowie der Angabe GMT am Ende. Als Wochentagnamen sind erlaubt Mon (Montag), Tue (Dienstag), Wed (Mittwoch), Thu (Donnerstag), Fri (Freitag), Sat (Samstag) und Sun (Sonntag). Als Monatsnamen sind erlaubt Jan (Januar), Feb (Februar), Mar (März), Apr (April), May (Mai), Jun (Juni), Jul (Juli), Aug (August), Sep (September), Oct (Oktober), Nov (November) und Dec (Dezember).

Anstelle der 0 können Sie auch eine Zahl angeben. Diese Zahl bedeutet dann die Anzahl Sekunden, nach deren Ablauf der Web-Browser eine Datei, die er im Cache hat, auf jeden Fall wieder vom Server lädt. Mit content="43200" stellen Sie beispielsweise einen Wert von 12 Stunden ein.

Automatische Weiterleitung zu anderer Adresse (Forwarding)

Diese Angabe ist zwar ziemlich eingebürgert, weshalb sie hier auch beschrieben wird. Automatische Weiterleitungen dieser Art werden jedoch oft kritisiert mit dem Argument, dass die Zielseite für einige Besucher unzugänglich sei. Die meisten Browser unterstützen solche Weiterleitungen zwar, dennoch können verschiedene Browser sie je nach Einstellung ignorieren. Ebenso folgen viele Suchmaschinen-Robots den Weiterleitungen nicht. Eine weiteres Problemfeld ist die Zeitdauer, nach der die Weiterleitung erfolgen soll. Enthält die Seite mit der Weiterleitung noch einen erklärenden Hinweis, benötigen die Besucher eine unbestimmte Zeit zum lesen, bevor sie der Weiterleitung folgen können. In vielen Fällen ohne einen solchen Hinweis wird die ohne Wartezeit auf 0 gesetzt, sodass die Weiterleitung sofort erfolgt. Dies ist besonders problematisch: Nutzt der Besucher nämlich die Zurück-Navigationsfunktion (Back-Button), wird er direkt wieder nach vorne katapultiert. Somit hängt er auf einer Seite fest.

Benutzt wird diese Angabe in der Praxis oft für das automatische Weiterleiten eines Seitenbesuchers von einer alten Adresse Ihres Web-Projekts zu einer neuen Adresse. In den meisten Fällen ist es allerdings vorteilhafter, eine "echte" Weiterleitung mit Seite HTTP-Status-Codes zu benutzen. Dies ist allerdings nur mit serverseitigen Techniken möglich, siehe etwa Seite Automatische Umleitungen (Redirects) mit dem CGI-Modul und das Apache-Modul englischsprachige Seite mod_alias.

Beispiel:

<head>
<meta http-equiv="refresh" content="5; URL=http://de.selfhtml.org/">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Mit <meta http-equiv="refresh" content="..."> veranlassen Sie die Weiterleitung zu einer anderen Adresse. Mit content="5; bestimmen Sie, nach wie viel Sekunden die Weiterleitung starten soll. Die 5 im Beispiel bedeutet also, dass die aktuelle Seite, nachdem sie geladen ist, 5 Sekunden lang angezeigt wird. Danach wird die Adresse aufgerufen, die mit url=..." angegeben wird. Notieren Sie das gesamte Element inklusive der etwas ungewohnten Stellung der Anführungszeichen so wie im Beispiel oben angegeben. Setzen Sie Ihre gewünschte Anzeigedauer und den Namen der aufzurufenden Adresse ein. Bei lokalen Adressen auf dem gleichen Server können Sie absolute oder relative Pfadangaben ohne Angabe von http:// und Domain notieren. Bei Weiterleitung zu Dateien im gleichen Verzeichnis genügt der Dateiname. Bei einer Wartezeit von 0 wird die angegebene nächste Datei sofort geladen.

Beachten Sie:

Verlassen Sie sich nicht darauf, dass diese Angabe funktioniert. Wenn Sie etwa eine Weiterleitung zu einer neuen Adresse eingeben, notieren Sie am besten auf der gleichen Seite zur Sicherheit noch einen normalen Verweis zu der neuen Adresse. So finden auch Anwender, bei denen die Meta-Angabe nicht funktioniert, über den Verweis den Weg zu Ihrer neuen Heimat. Achten Sie auch darauf, keine zu kurze Wartezeit anzugeben. Nutzen Sie möglichst Weiterleitungen über HTTP anstelle eines solchen Meta-Tags.

Angaben zu PICS

PICS steht für "Platform for Internet Content Selection". Es handelt sich dabei um ein standardisiertes Schema zum Bezeichnen von Internet-Inhalten. Das Schema wurde ins Leben gerufen, um jugendfreie Internet-Inhalte als solche auszuzeichnen. Es gibt so genannte PICS-Labels, also Auszeichnungen. Anbieter von Web-Seiten können ihre Seiten entweder freiwillig und nach eigenem Ermessen mit einem PICS-Label versehen, oder - und das ist wohl eher Sinn der Sache - sie nehmen einen unabhängigen PICS-Service in Anspruch, der PICS-Zertifikate für Inhalte ausstellt.

Auf Einzelheiten des PICS-Systems wird hier nicht näher eingegangen. Informationen im Web finden Sie auf der englischsprachige Seite PICS-Seite des W3-Konsortiums. Moderne Browser können PICS-Inhalte erkennen. Dazu lassen sich software-seitig Einstellungen vornehmen, zum Beispiel durch Eltern von surfenden Kindern. So kann der Browser bei Seiten mit PICS-Labeln durch Vergleichen der Konfiguration mit dem Label erkennen, ob der Inhalt angezeigt werden darf oder nicht.

Beispiel:

<head>
<meta http-equiv="PICS-Label" content='
 (PICS-1.1 "http://www.gcf.org/v2.5"
  labels on "1994.11.05T08:15-0500"
  until "1995.12.31T23:59-0000"
  for "http://w3.org/PICS/Overview.html"
  ratings (suds 0.5 density 0 color/hue 1))'>
  <!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Durch die Meta-Angabe http-equiv="PICS-Label" können Sie eine PICS-Auszeichnung für eine HTML-Datei notieren. Hinter content folgt die PICS-Auszeichnung. Die gesamte Auszeichnung wird in einfache Anführungszeichen gesetzt. Die Syntax der PICS-Auszeichnung wird innerhalb davon in runde Klammern eingeschlossen. Innerhalb der runden Klammern stehen zunächst die Pflichtangabe zur PICS-Version und die Angabe des URI, wo die Inhaltskategorisierung definiert wird, auf die hier Bezug genommen wird. Die Angaben labels on, until und for sind optional. Entscheidend ist aber auf jeden Fall die Angabe ratings, in der die eigentliche Inhaltskategorisierung notiert wird. Die Kategorisierung wird dabei nochmals in runde Klammern eingeschlossen. Die einzelnen dort möglichen Angaben und ihre Bedeutung muss der PICS-Service bereitstellen, der die PICS-Zertifikate verteilt.

Diverse Meta-Angaben

Die folgenden Meta-Angaben sind verstreute "Sammlerstücke". Oft sind es Angaben, die mit bestimmten Web-Servern oder Browsern oder Suchmaschinen-Robots funktionieren, oder Angaben, die von Bearbeitungs-Software eingetragen werden. Manchmal sind es aber möglicherweise auch nur Erfindungen von Leuten, die an magische Kräfte in ihren HTML-Dateien glauben. Hier eine kleine Auswahl solcher Meta-Angaben:

<meta http-equiv="content-language" content="de">
Sprache des Datei-Inhalts. Im content-Attribut wird ein Seite Sprachenkürzel nach RFC 1766 angegeben.

<meta name="generator" content="MS FrontPage 2000">
<meta name="generator" content="Netscape Composer">
Wird von HTML-Editoren, vor allem von WYSIWYG-Editoren, ohne Wissen des Autors eingefügt. Software-Hersteller können so prima das Web durchsuchen und feststellen, wo und wie viel mit ihrer Software gearbeitet wird.

<meta http-equiv="set-cookie" content="cookiename=cookiewert; expires=Sun, 01 Jan 2006 00:00:00 GMT; path=/;">
Cookie setzen

<meta http-equiv="cache-control" content="no-cache">
Anweisung an den Browser: keinen Cache benutzen, sondern von Originalseite laden.

<meta http-equiv="pragma" content="no-cache">
An Proxy-Agenten: Datei bitte nicht auf Proxy-Server speichern!

nach oben
weiter | Seite Adressbasis und Zielfensterbasis
zurück | Seite Titel einer HTML-Datei
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von HTML-Kopfdaten

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / HTML-Kopfdaten / Adressbasis und Zielfensterbasis

SELFHTML

Adressbasis und Zielfensterbasis
Informationsseite

nach unten Adressbasis
nach unten Zielfensterbasis
nach unten

HTML 3.2 XHTML 1.0 MS IE 3.0 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Adressbasis

Sie können innerhalb einer HTML-Datei, die Sie auf einem WWW-Server ablegen, nochmals deren internet-weit eindeutigen, genauen URI notieren. Ein Web-Browser, der diese Information ausliest, kann in Fehlersituationen besser auf verknüpfte oder referenzierte Dateien zugreifen. Bei Seite Projektverweisen zu anderen HTML-Dateien und bei Referenzen von Kapitel Grafiken oder Kapitel Multimedia gilt die hier definierbare Basis als Bezug.

Beispiel:

<head>
<base href="http://aktuell.de.selfhtml.org">
  <!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Die Angabe der Dateibasis erfolgt im Dateikopf mit <base href= ... > und dem genauen URI der Datei (base = Basis, href = hyper reference = Hyper(text)-Referenz).

Wenn nun in der Datei beispielsweise folgende Grafikreferenz steht:
<img src="/src/logo.gif">
... so ermittelt der WWW-Browser diese Grafik mit dem absoluten URI:
<img src="http://aktuell.de.selfhtml.org/src/logo.gif">.

Beachten Sie:

Wenn es wichtig für Sie ist, dass Ihre Projekte leicht auf andere Server-Rechner, in andere Verzeichnisstrukturen usw. übertragbar bleiben, sollten Sie auf die Definition einer Adressbasis verzichten. Denn mit der Angabe einer absoluten Adressbasis wird der WWW-Browser stets versuchen, Verweisziele und referenzierte Dateien von der hier angegebenen Adresse zu laden. Dies macht das Austesten der Dateien auf einem lokalen PC unmöglich!

Die Angabe der Adressbasis ist dagegen ein gewisser Schutz vor HTML-unkundigen Anwendern, die sich eine HTML-Datei lokal abspeichern oder das Cache-Verzeichnis ihres WWW-Browsers durchsuchen. Beim lokalen Aufruf der HTML-Datei wird der WWW-Browser stets eine Online-Verbindung verlangen und die Datei von der angegebenen Adresse laden wollen.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das base-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <base ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 3.2 XHTML 1.0 MS IE 3.0 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zielfensterbasis

Diese Angabe ist z.B. in Verbindung mit Kapitel Frames sinnvoll. Sie können für eine HTML-Datei, die innerhalb eines Framesets in einem Frame-Fenster angezeigt wird, festlegen, dass alle Kapitel Verweise dieser Datei in einem bestimmten anderen Frame-Fenster angezeigt werden, solange bei einem Verweis kein anderes Frame-Fenster angegeben wird. Da häufig alle Verweisziele einer Datei, die in einem Frame-Fenster angezeigt wird, in einem bestimmten anderen Frame-Fenster angezeigt werden sollen, spart diese einmalige Angabe im Dateikopf viel Tipparbeit und hilft, den Dateiumfang zu verkleinern.
Siehe auch Seite Verweise bei Frames.

Beispiel:

<head>
<base target="RechtesFenster">
  <!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Mit <base target= ... > legen Sie das Default-Fenster fest, in dem Verweisziele angezeigt werden sollen. Voraussetzung ist in dem obigen Beispiel, dass Sie ein Frameset mit Frame-Fenstern definiert haben. Bei dem gewünschten Frame-Fenster müssen Sie mit dem Attribut name den Fensternamen vergeben haben, den Sie hier bei <base target= ... > angeben.

Anstelle eines selbst vergebenen Frame-Fensternamens können Sie aber auch eine der folgenden festen Angaben notieren, die auch für HTML-Dateien außerhalb von Framesets interessant sind:
<base target="_blank"> öffnet jeden Verweis der Datei in einem neuen Browser-Fenster.
<base target="_top"> öffnet jeden Verweis der Datei im gesamten Browser-Fenster und befreit die Anzeige aus allen eventuell angezeigten Framesets (z.B. auch aus fremden, feindlichen Framesets - siehe Abschnitt über Seite Schaufenster-Effekte).
<base target="_parent"> öffnet jeden Verweis der Datei im übergeordneten Frameset und befreit die Anzeige aus dem inneren Frameset. _parent und _top sind dann verschieden, wenn ein Frame-Fenster nochmals ein komplettes Frameset enthält, also eher etwas für Mikro-Freaks.

nach oben
weiter | Seite Logische Beziehungen
zurück | Seite Meta-Angaben zum Inhalt
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von HTML-Kopfdaten

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / HTML-Kopfdaten / Logische Beziehungen

SELFHTML

Logische Beziehungen
Informationsseite

nach unten Beziehung zu anderen Quellen
nach unten Rückbeziehungen
nach unten

HTML 2.0 XHTML 1.0 Beziehungen zu anderen Quellen

Hinweis für HTML-Einsteiger: Das hier beschriebene Element hat nichts mit normalen, anklickbaren Verweisen innerhalb einer HTML-Datei zu tun. Solche Verweise werden im Kapitel über Kapitel Verweise - Hyperlinks beschrieben.

Die auf dieser Seite beschriebenen Möglichkeiten sind zwar seit Urzeiten (1995) Bestandteil von HTML, werden aber leider nicht von allen populären heutigen Web-Browsern unterstützt. Sie stellen jedoch eine hervorragende Möglichkeit dar, um intern die hypertextuellen Abhängigkeiten einer HTML-Datei, etwa die vorherige und nächste Seite, die übergeordnete Seite usw. explizit anzugeben. Suchdienste oder Software-Programme können dann beispielsweise ganze "Site-Maps" Ihres Projekts erstellen, also grafische Darstellungen der Seitenstruktur. Noch machen zwar kaum Suchmaschinen davon Gebrauch, doch es ist zu hoffen, dass sich dies noch ändern wird.

Web-Browser sollten, wenn sie solche Tags in einer HTML-Datei vorfinden, eine entsprechende Button-Leiste oder vergleichbare Bedienelemente anzeigen. Mit dem Anklicken der Buttons sollte der Anwender dann Sprungverweise zu den verknüpften Verweiszielen ausführen. Microsoft ist bis heute nicht auf diese sinnvollen Navigations-Vorschläge eingegangen, die Browser iCab, Mozilla, Netscape und Opera blenden auf Wunsch eine Leiste ein. Im Mozilla Firefox wurde die Unterstützung zugunsten einer individuell zu installierenden Erweiterung ( englischsprachige Seite Link Toolbar) eingespart. Auch der Textbrowser Lynx unterstützt link-Elemente.

Navigationsleiste in Opera 7

Sie können pro HTML-Datei ein Set solcher Tags notieren. Sie können alle, aber auch nur einzelne, gerade benötigte Tags verwenden. Das folgende Beispiel zeigt die für diese Seite definierten link-Elemente.

Beispiel:

<head>
<!-- ... andere Angaben im Dateikopf ... -->
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="HTML-Kopfdaten" href="index.htm">
<link rel="next" title="Durchsuchbarkeit mit Server-Kommunikation" href="durchsuchbarkeit.htm">
<link rel="prev" title="Adressbasis und Zielfensterbasis" href="basis.htm">
<link rel="first" title="Titel einer HTML-Datei" href="titel.htm">
<link rel="last" title="Durchsuchbarkeit mit Server-Kommunikation" href="durchsuchbarkeit.htm">
</head>

Erläuterung:

Mit <link rel leiten Sie eine logische Dateibeziehung ein. Dahinter folgt der Typ der Dateibeziehung (link = Verweis, rel = relationship = Verwandtschaft). Anerkannte Attributwerte sind:

rel="contents" steht für: Bezug zum Inhaltsverzeichnis (contents = Inhaltsverzeichnis)
rel="chapter" steht für: Bezug zum Kapitel (chapter = Kapitel)
rel="section" steht für: Bezug zum Abschnitt (section = Abschnitt)
rel="subsection" steht für: Bezug zum Unterabschnitt (subsection = Unterabschnitt)
rel="index" steht für: Bezug zum Stichwortverzeichnis
rel="glossary" steht für: Bezug zum Glossar
rel="appendix" steht für: Bezug zum Anhang (appendix = Anhang)
rel="search" steht für: Bezug zur Suchfunktion
rel="author" steht für: Bezug zum Autor
rel="copyright" steht für: Bezug zur Copyright-Angabe
rel="next" steht für: Bezug zur nächsten Datei in der "Guided tour" (next = nächste Seite)
rel="prev" steht für: Bezug zur vorherigen Datei in der "Guided tour" (prev = previous = vorherige Seite)
rel="first" steht für: Bezug zur ersten Datei in der "Guided tour" (first = erste Seite)
rel="last" steht für: Bezug zur letzten Datei in der "Guided tour" (last = letzte Seite)
rel="up" steht für: Bezug zur übergeordneten Kapitelseite
rel="top" und rel="start" steht für: Bezug zur Startseite
rel="help" steht für: Bezug zum Hilfekontext (help = Hilfe)
rel="bookmark" steht für: Bezug zu einem allgemeinen Orientierungspunkt (bookmark = Lesezeichen)
rel="stylesheet" steht für: Bezug zu einer Datei mit Style-Definitionen, die zur Darstellung herangezogen werden.
rel="alternate" steht für: Bezug zu einer Datei mit dem gleichen Inhalt wie der aktuellen, jedoch in einer anderen Dokumentversion (alternate = alternierend).
rel="alternate stylesheet" steht für: Bezug zu einer Datei mit alternativen Style-Definitionen, die auf Wunsch des Benutzers zur Darstellung herangezogen werden.
rel="shortcut icon" steht für: Bezug zu einem in der Adressleiste oder in den Lesezeichen angezeigten Icon (Favicon).

Von link-Elementen mit den Attributwerten chapter, section, subsection, appendix, bookmark, stylesheet, alternate und alternate stylesheet können Sie bei Bedarf auch mehrere notieren.

Das Attribut href dient zur Bestimmung, wohin ein Verweis zum Verknüpfungsziel führen soll. Bei der Wertzuweisung gelten die gleichen Regeln wie bei normalen Kapitel Verweisen.

Mit dem Attribut title können Sie die Beschriftung definieren, die verwendet wird, wenn der Browser Verweis-Buttons anzeigt. Die Angabe sollte das Verknüpfungsziel bezeichnen.

Weitere mögliche Attribute im <link>-Tag sind:
media zur Bestimmung des Ausgabemediums (mehr dazu im Abschnitt Seite Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien).
target zur Angabe des Zielfensters, in dem das Verknüpfungsziel ausgegeben werden soll. Bei Kapitel Frames kann das eines der definierten Frame-Fenster sein. Es kann aber auch einer der reservierten Fensternamen angegeben werden: target="_blank" öffnet den Verweis in einem neuen Browser-Fenster, target="_top" im gesamten Browser-Fenster und befreit die Anzeige aus allen eventuell angezeigten Framesets, target="_parent" im übergeordneten Frameset und befreit die Anzeige aus dem inneren Frameset.
hreflang erlaubt die Angabe der Landessprache des Verknüpfungsziels mit Hilfe eines Seite Sprachenkürzels.
charset ermöglicht die Angabe der Kodierung, die das Verknüpfungsziel verwendet, z.B. ISO-8859-1 - erlaubt sind dabei Kodierungsangaben, wie sie unter englischsprachige Seite http://www.iana.org/assignments/character-sets angegeben sind.

Ferner kann das link-Element Kapitel Universalattribute haben.

Beachten Sie:

Neben diesen im HTML-Standard erwähnten Ausprägungen des link-Elements gibt es noch eine weitere, die zum Einbinden downloadbarer Schriftarten in HTML dient. Beispiel:
<link rel="fontdef" src="http://www.meine.com/fonts/chianti.pfr">
Damit binden Sie eine Schriftart namens chianti.pfr ein. Näheres zu diesem Thema erfahren Sie im Abschnitt Seite Downloadbare Schriftarten.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das link-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <link ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 2.0 XHTML 1.0 Rückbeziehungen

Rückbeziehungen sind für "bidirektionale" Beziehungen zweier HTML-Dateien gedacht. Das ist der Fall, wenn sowohl Datei A auf Datei B verweist als auch Datei B auf Datei A, wenn also beide logisch gesehen ein sinnvolles Verweisziel von der jeweils anderen sind.

Ebenso wie logische Beziehungen zu anderen Dateien sollten Rückbeziehungen als Buttons oder in vergleichbarer Form dargestellt werden Die verbreiteten Browser bleiben hierbei allerdings stumm. Suchmaschinen können aus Rückbeziehungsangaben interessante Schlüsse über die Hypertext-Struktur eines Projekts ziehen.

Beispiel aus datei_1.htm:

<head>
<link rel="alternate" href="datei_2.htm" title="zweite Lesart">
</head>

Beispiel aus datei_2.htm:

<head>
<link rev="alternate" href="datei_1.htm" title="erste Lesart">
</head>

Erläuterung:

Mit <link rev leiten Sie eine Rückbeziehung ein. Ansonsten ist die Funktionalität identisch mit <link rel für nach oben logische Beziehungen zu anderen Quellen. Es sind auch die gleichen anderen Attribute möglich. Im obigen Beispiel sehen Sie, wie zwei HTML-Dateien, deren angenommener Inhalt zwei verschiedene Betrachtungsweisen ein und derselben Sache behandelt, durch Rückbeziehungen logisch miteinander verknüpft werden.

nach oben
weiter | Seite Durchsuchbarkeit mit Server-Kommunikation
zurück | Seite Adressbasis und Zielfensterbasis
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von HTML-Kopfdaten

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / HTML-Kopfdaten / Durchsuchbarkeit mit Server-Kommunikation

SELFHTML

Durchsuchbarkeit mit Server-Kommunikation
Informationsseite

nach unten Datei als durchsuchbar definieren
nach unten

HTML 2.0 XHTML 1.0 deprecated (missbilligt) Datei als durchsuchbar definieren

Heute spielt dieses Element in der Praxis keine Rolle mehr, da moderne WWW-Browser bequemes und schnelles Suchen nach Text in einer angezeigten HTML-Datei erlauben. Das Element ist mittlerweile auch als deprecated eingestuft und soll künftig aus dem HTML-Standard entfallen. Die folgenden Informationen haben daher eher "historischen" Charakter.

Eine HTML-Datei kann eine durchsuchbare Datei sein. Das bedeutet, dass ihr Inhalt auf dem Server-Rechner nach allen vorkommenden Wörtern indiziert wurde. Es hat jedoch nur einen Sinn, eine HTML-Datei als durchsuchbar zu definieren, wenn ihr Inhalt tatsächlich in indizierter Form, also in einer Suchindexdatei auf dem Server-Rechner vorliegt.

Bei einer als durchsuchbar definierten HTML-Datei erscheint bei der Anzeige im Web-Browser am Anfang der Datei ein Eingabefeld, das dem Anwender die Eingabe eines Suchbegriffs erlaubt.

Beispiel:

<head>
<isindex prompt="Geben Sie einen Suchbegriff ein: ">
  <!-- ... andere Angaben im Dateikopf ... -->
</head>

Erläuterung:

Mit isindex deklarieren Sie eine HTML-Datei als durchsuchbar. Mit dem Attribut prompt bestimmen Sie einen Eingabeaufforderungstext. Der Text muss in Anführungszeichen stehen (prompt = Aufforderung).

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das isindex-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <isindex ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

nach oben
weiter | Seite Farben für Hintergrund, Text und Verweise
zurück | Seite Logische Beziehungen
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von HTML-Kopfdaten

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Dateiweite Einstellungen

SELFHTML

Dateiweite Einstellungen
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei
Dieser Abschnitt beschreibt, wie Sie Textfarbe, Verweisfarben, Hintergrundfarbe und Hintergrundbild (Wallpaper) einer HTML-Datei bestimmen können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Farben für Hintergrund, Text und Verweise
Seite Hintergrundbild (Wallpaper)
Seite Seitenränder
Seite Hintergrundmusik

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Dateiweite Einstellungen / Farben für Hintergrund, Text und Verweise

SELFHTML

Farben für Hintergrund, Text und Verweise
Informationsseite

nach unten Farbe für den Hintergrund
nach unten Farben für Text und Verweise
nach unten Weitere Möglichkeiten
nach unten

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Farbe für den Hintergrund

Sie können eine Farbe für den Hintergrund des Anzeigefensters bestimmen. Die gesamte HTML-Datei wird auf dieser Hintergrundfarbe angezeigt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dateiweite Farbe f&uuml;r den Hintergrund</title>
</head>
<body bgcolor="#CCFFFF">
<h1>Text, Verweise, Grafikreferenzen usw.</h1>
</body>
</html>

Erläuterung:

Die Angabe zur Hintergrundfarbe erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit dem Attribut bgcolor bestimmen Sie die Farbe für den Bildschirmhintergrund (bgcolor = background color = Hintergrundfarbe). Die gesamte HTML-Datei wird auf der hier definierten Hintergrundfarbe angezeigt. Für die Farbauswahl gelten die Regeln zum Seite Definieren von Farben in HTML.

Beachten Sie:

Das Attribut bgcolor ist als deprecated eingestuft und soll künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von Kapitel Stylesheets, z.B. so:
<body style="background-color:#CCFFFF">

Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund und Textvordergrund haben soll, müssen Sie die Hintergrundfarbe in jeder HTML-Datei neu definieren. Natürlich können Sie auch für jede HTML-Datei andere Farben definieren.

Wenn Sie eine Hintergrundfarbe definieren, sollten Sie auch passende (kontrastierende) Textvordergrundfarben definieren (siehe hierzu folgender Abschnitt).

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Farben für Text und Verweise

Sie können dateiweite Farben definieren:

  • für Text (gültig für alle Elemente wie Überschriften, normalen Fließtext, Listen usw.),
  • für Kapitel Verweise zu noch nicht besuchten Stellen,
  • für Verweise zu bereits besuchten Stellen,
  • für Verweise, während sie angeklickt werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Farbe f&uuml;r Text und Verweise</title>
</head>
<body bgcolor="#663333" text="#FFCC99" link="#FF9966" vlink="#FF9900" alink="#FFFFFF">
<h1>Text</h1>
<a href="http://de.yahoo.com/">Verweis zu Yahoo</a>
</body>
</html>

Erläuterung:

Die Angaben erfolgen im einleitenden <body>-Tag der HTML-Datei. Für die Farbauswahl gelten die Regeln zum Seite Definieren von Farben in HTML.

Mit text definieren Sie eine Farbe für den Text.
Mit link definieren Sie eine Farbe für Verweise zu noch nicht besuchten Dateien (link = Verweis).
Mit vlink definieren Sie eine Farbe für Verweise zu bereits besuchten Dateien (vlink = visited link = besuchter Verweis).
Mit alink definieren Sie eine Farbe für Verweise, die der Anwender gerade anklickt (alink = activated link = aktivierter Verweis).

Beachten Sie:

Alle diese Attribute sind als deprecated eingestuft und sollen künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von Kapitel Stylesheets, z.B. im Dateikopf zwischen <head> und </head> mit dem folgenden Quelltext:
<style type="text/css">
body { background-color:#663333; color:#FFCC99; }
a:link { color:#FF9966; }
a:visited { color:#FF9900; }
a:active { color:#FFFFFF; }
</style>

Die definierten Textvordergrundfarben sollten mit der definierten Hintergrundfarbe kontrastieren. Wenn Sie z.B. eine dunkle Hintergrundfarbe definieren, sollten Sie helle Textvordergrundfarben wählen (z.B. Weiß, Gelb, Hellgrün und Hellblau).

Weitere Möglichkeiten

Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite background-color
Seite color
Seite Pseudoklassen für Verweise

Das <body>-Tag kann auch Kapitel Universalattribute enthalten.

nach oben
weiter | Seite Hintergrundbild (Wallpaper)
zurück | Seite Durchsuchbarkeit mit Server-Kommunikation
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Dateiweite Einstellungen

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Dateiweite Einstellungen / Hintergrundbild (Wallpaper)

SELFHTML

Hintergrundbild (Wallpaper)
Informationsseite

nach unten Hintergrundbild einbinden
nach unten Weitere Möglichkeiten
nach unten

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Hintergrundbild einbinden

Sie können für die Anzeige einer HTML-Datei ein Hintergrundbild bestimmen. Dabei wird das Bild über das ganze Anzeigefenster hinweg immer wiederholt, sodass ein Tapeteneffekt (Wallpaper) entsteht. Besonders geeignet für Wallpaper-Effekte sind relativ kleine Grafiken, die irgendein abstraktes Muster darstellen. Typische Beispiele finden Sie im Kapitel über Grafiken im Abschnitt Seite Wallpapers (Hintergrundbilder)

Die Hintergrundgrafik sollte als Grafikdatei im Seite GIF-Format oder Seite JPEG-Format vorliegen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hintergrundbild einbinden</title>
</head>
<body background="background.jpg" text="#990000" link="#0000CC" vlink="#000066" alink="#000000">
<h1>Text</h1>
<a href="http://de.yahoo.com/"><b>Verweis zu Yahoo</b></a>
</body>
</html>

Erläuterung:

Die Angabe zum Einbinden eines Hintergrundbildes erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit dem Attribut background bestimmen Sie eine Grafikdatei als Hintergrundbild (background = Hintergrund). Die gesamte HTML-Datei wird auf dem hier definierten Hintergrundbild angezeigt.

Beachten Sie:

Das Attribut background ist als deprecated eingestuft und soll künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von Kapitel Stylesheets, z.B. so:
<body style="background-image:url(background.jpg)">

Bei der Adressierung des Hintergrundbildes gelten die Regeln zum Seite Referenzieren in HTML.

Das Hintergrundbild gilt jeweils für die HTML-Datei, in der es definiert wird. Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund haben soll, müssen Sie die Angabe in jeder HTML-Datei wiederholen.

Wenn Sie ein Hintergrundbild definieren, sollten Sie auch passende Seite Farben für Text und Verweise definieren.

Verwenden Sie bei textorientierten WWW-Seiten unauffällige Hintergrundbilder, bei denen die Lesbarkeit des Textes nicht leidet. Auffällige Hintergrundfarben sollten Sie nur verwenden, wenn die gesamte WWW-Seite grafisch aufgebaut ist und wenn die Grafiken im Vordergrund zu dem auffälligen Hintergrund passen.

Netscape ab Version 4.x und Internet Explorer ab Version 4.x interpretieren auch Seite animierte GIF-Grafiken als Hintergrundbilder.

Der Internet Explorer kennt ein zusätzliches Attribut bgproperties="fixed" im einleitenden <body>-Tag, mit dem Sie ein unbewegliches Hintergrundbild erzeugen können. Dieses Attribut gehörte jedoch nie zum HTML-Standard und lässt sich auch durch eine CSS-Angabe ersetzen, z.B. so:
<body style="background-image:url(background.jpg); background-attachment:fixed;">

Weitere Möglichkeiten

Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite background-image
Seite background-repeat
Seite background-attachment
Seite background-position
Seite background
Seite color
Seite Pseudoklassen für Verweise

Das <body>-Tag kann auch Kapitel Universalattribute enthalten.

nach oben
weiter | Seite Seitenränder
zurück | Seite Farben für Hintergrund, Text und Verweise
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Dateiweite Einstellungen

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Dateiweite Einstellungen / Seitenränder

SELFHTML

Seitenränder
Informationsseite

nach unten Seitenränder definieren
nach unten

MS IE 2.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Seitenränder definieren

Bitte benutzen Sie die hier beschriebenen HTML-Attribute nur in begründeten Ausnahmefällen - sie werden an dieser Stelle nur der Vollständigkeit halber erwähnt. Diese Attribute gehörten nie zum HTML-Standard und sind ein typisches Beispiel dafür, welcher Wirrwarr entsteht, wenn Browser ihr eigenes Süppchen kochen. Benutzen Sie auf jeden Fall Stylesheets zum Definieren von Seitenrändern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Seitenr&auml;nder</title>
</head>
<body marginwidth="50" marginheight="100" topmargin="100" leftmargin="50">
<h1>Text</h1>
viel Text usw.
</body>
</html>

Erläuterung:

Die Angabe für Seitenränder erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit dem Attribut leftmargin bestimmen Sie den Abstand zwischen linkem bzw. rechtem Fensterrand und Inhalt der Datei (leftmargin = linker Rand) für den Internet Explorer. Mit topmargin bestimmen Sie den Abstand zwischen oberem bzw. unterem Fensterrand und dem Inhalt der Datei (topmargin = oberer Rand) für den Internet Explorer. Mit marginwidth und marginheight bestimmen Sie die entsprechenden Abstände für Netscape. Alle Angaben erfolgen in Pixeln. Linke und rechte Ränder sind immer gleich groß, ebenso obere und untere.

Beachten Sie:

Die definierten Seitenränder gelten jeweils für die HTML-Datei, in der sie definiert werden. Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einheitliche Seitenränder haben soll, müssen Sie die Seitenränder in jeder HTML-Datei neu definieren. Natürlich können Sie auch für alle Dateien unterschiedliche Seitenränder definieren.

Seitenränder mit Stylesheets:

Hier noch ein Beispiel, wie Sie die gleichen Seitenränder wie im obigen Beispiel auch mit Hilfe von Stylesheets erreichen können:

Beispiel:

<head>
<style type="text/css">
body { margin-left:50px; margin-right:50px; margin-top:100px; margin-bottom:100px }
</style>
</head>

Erläuterung:

Mit den obigen Angaben im HTML-Dateikopf erreichen Sie die gleiche Wirkung. Diese Angaben werden von Netscape seit Version 4.0 und vom Internet Explorer seit Version 3.0 interpretiert. Außerdem sind diese Angaben vom W3-Konsortium standardisiert.

Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite margin-top
Seite margin-bottom
Seite margin-left
Seite margin-right
Seite margin

nach oben
weiter | Seite Hintergrundmusik
zurück | Seite Hintergrundbild (Wallpaper)
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Dateiweite Einstellungen

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Dateiweite Einstellungen / Hintergrundmusik

SELFHTML

Hintergrundmusik
Informationsseite

nach unten Hintergrundmusik einbinden
nach unten

MS IE 2.0 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Hintergrundmusik einbinden

Sie können bestimmen, dass beim Aufruf einer HTML-Datei eine Hintergrundmusik ertönt. Dazu gibt es zwei Lösungen. Beide der im folgenden beschriebenen Lösungen - die eine für Microsofts Internet Explorer, die andere für Netscape - sind proprietär. Beide Lösungen gehören nicht zum HTML-Standard.

Ferner sollten Sie sich beim Wunsch, Hintergrundmusik einzubinden, darüber im Klaren sein, dass die Mehrzahl der Anwender im Web genervt ist von dem Gedudel und sehr schnell wieder von solchen Seiten verschwindet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So hört sich's an

<html>
<head>
<title>Hintergrundmusik</title>
<!-- Microsoft: -->
<bgsound src="background.mid" loop="infinite">
</head>
<body>
<!-- Netscape: -->
<embed src="background.mid" autostart="true" loop="true" hidden="true" height="0" width="0">
<h1>Inhalt der Seite</h1>
</body>
</html>

Erläuterung:

Mit <bgsound ...> definieren Sie im Kopf einer HTML-Datei eine Hintergrundmusik nach Microsoft-Syntax für die Anzeige der Datei (bgsound = background sound = Hintergrundmusik). Mit <embed ...> erreichen Sie das Gleiche für Netscape (embed = einbetten). Im Attribut src folgt in beiden Fällen die Angabe der gewünschten Musikdatei (src = source = Quelle). Es sollte sich möglichst um Dateien der Typen MID, AU oder WAV handeln. Um eine sichtbare Anzeige des Abspiel-Players zu unterdrücken, sind bei der Netscape-Syntax die Angaben hidden="true" height="0" width="0" erforderlich (width = Breite, height = Höhe, hidden = versteckt). Auch den automatischen Start des Abspielvorgangs müssen Sie in der Netscape-Syntax explizit angeben - durch autostart="true". Schließlich können Sie noch bestimmen, ob die Musikdatei nur einmal, mehrmals oder endlos oft (bis zum Aufrufen einer anderen HTML-Datei) abgespielt wird. Nach der Microsoft-Syntax können Sie mit loop="infinite" eine Endloswiederholung erzwingen. Wenn Sie die Wiederholungszahl begrenzen wollen, geben Sie anstelle von infinite einfach die gewünschte Anzahl der Wiederholungen an. Bei der Netscape-Syntax haben Sie nur die Wahl zwischen Endloswiederholung und keiner Wiederholung. Um eine Endloswiederholung zu erzwingen, notieren Sie die Angabe loop="true". Ansonsten lassen Sie die Angabe einfach weg.

Beachten Sie:

Im obigen Beispiel wird vorausgesetzt, dass sich die Musikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Datei in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Seite Einbinden von Grafiken.

Die Ausgabe einer Hintergrundmusik setzt beim Anwender natürlich entsprechende Hardware (Soundkarte, Lautsprecher) voraus. Ferner muss der Web-Browser die Möglichkeit haben, die Ausgabe der Musikdatei zu steuern.

nach oben
weiter | Seite Überschriften
zurück | Seite Seitenränder
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Dateiweite Einstellungen

© 2007 Seite Impressum


SELFHTML: HTML / Elemente zur Textstrukturierung

SELFHTML

Elemente zur Textstrukturierung
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei.
In diesem Abschnitt werden die HTML-Elemente beschrieben, mit deren Hilfe Sie den Text Ihrer Seiten gestalten können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Überschriften
Seite Textabsätze
Seite Zeilenumbruch
Seite Listen
Seite Zitate und Adressen
Seite Präformatierter Text (wie im Editor eingegeben)
Seite Logische Auszeichnungen im Text
Seite Physische Auszeichnungen im Text
Seite Allgemeine Elemente für Textbereiche
Seite Trennlinien
Seite Ältere Elemente zur Schriftformatierung
Seite Ältere browser-proprietäre Elemente

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Überschriften

SELFHTML

Überschriften
Informationsseite

nach unten Überschriften definieren
nach unten Überschriften ausrichten
nach unten Überschriften formatieren mit CSS
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Überschriften definieren

HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>&Uuml;berschriften definieren</title>
</head>
<body>
<h1>&Uuml;berschrift 1. Ordnung</h1>
<h2>&Uuml;berschrift 2. Ordnung</h2>
<h3>&Uuml;berschrift 3. Ordnung</h3>
<h4>&Uuml;berschrift 4. Ordnung</h4>
<h5>&Uuml;berschrift 5. Ordnung</h5>
<h6>&Uuml;berschrift 6. Ordnung</h6>
</body>
</html>

Erläuterung:

<h[1-6]> (h = heading = Überschrift) leitet eine Überschrift ein. Die Nummer steht für die Überschriftenebene. 1 ist die höchste Ebene, 6 die niedrigste. Dahinter folgt der Text der Überschrift.
</h[1-6]> beendet die Überschrift und steht am Ende des Überschriftentextes.

Beachten Sie:

Die Nummern bei einleitendem und abschließendem Tag müssen gleich sein.

Jede Überschrift ist ein eigener Absatz, d.h. vor und nach Überschriften sind keine Seite Absatzschaltungen nötig. Beim Überschriftentext gelten die Aussagen zu Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen.

Konqueror 3.1 behandelt <h5> und <h6> genauso wie <h4>.

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Überschriften ausrichten

Überschriften werden linksbündig ausgerichtet, wenn Sie nichts anderes angeben. Sie können eine Überschrift zentriert oder rechtsbündig ausrichten. Auch Blocksatz ist möglich.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>&Uuml;berschriften ausrichten</title>
</head>
<body>
<h1 align="center">&Uuml;berschrift 1. Ordnung zentriert</h1>
<h2 align="center">&Uuml;berschrift 2. Ordnung zentriert</h2>
<h3 align="center">&Uuml;berschrift 3. Ordnung zentriert</h3>
<h1 align="right">&Uuml;berschrift 1. Ordnung rechtsb&uuml;ndig</h1>
<h2 align="right">&Uuml;berschrift 2. Ordnung rechtsb&uuml;ndig</h2>
<h3 align="left">&Uuml;berschrift 3. Ordnung linksb&uuml;ndig</h3>
<h1 align="justify">Sehr lange &Uuml;berschrift 1. Ordnung im Blocksatz, welcher
allerdings erst gut sichtbar wird, sobald mehrere Zeilen erforderlich sind.</h1>
</body>
</html>

Erläuterung:

Durch die Angabe align="center" im einleitenden Überschriften-Tag erreichen Sie, dass die Überschrift zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert). Mit der Angabe align="right" wird die Überschrift rechtsbündig ausgerichtet (right = rechts). Mit align="justify" erzwingen Sie den Blocksatz für die Überschrift (justify = justieren). Mit der Angabe align="left" können Sie die Normaleinstellung (linksbündige Ausrichtung) angeben.

Beachten Sie:

Nicht alle Browser beherrschen den Blocksatz. Blocksatz ist im Zusammenhang mit Überschriften auch nur bedingt praxistauglich, da Blocksatz erst bei mehrzeiligen Texten zum Tragen kommt.

align ist im HTML-4-Standard als deprecated (missbilligt) eingestuft. Stattdessen wird empfohlen, Stylesheets zu benutzen, z.B.: <h1 style="text-align:center">...</h1>. Weitere Hinweise siehe folgender Abschnitt.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Überschriften formatieren mit CSS

Wie eine Überschrift vom Browser genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um Überschriften darzustellen. Mit Kapitel Stylesheets können Sie Überschriften jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>&Uuml;berschriften formatieren mit CSS</title>
</head>
<body>
<h1 style="font-size:300%; color:red">&Uuml;berschrift 1. Ordnung</h1>
</body>
</html>

Erläuterung:

Im Beispiel wird eine Überschrift 1. Ordnung definiert, die 300 Prozent Schriftgröße hat und in roter Farbe dargestellt wird.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo Überschriften vorkommen dürfen, welche anderen Elemente sie enthalten dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Überschriften
Seite Attribut-Referenz für Überschriften

nach oben
weiter | Seite Textabsätze
zurück | Seite Hintergrundmusik
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Textabsätze

SELFHTML

Textabsätze
Informationsseite

nach unten Textabsätze definieren
nach unten Textabsätze ausrichten
nach unten Textabsätze formatieren mit CSS
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Textabsätze definieren

Absätze dienen der optischen Gliederung eines Textes. Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen harten Umbruch einzufügen. WWW-Browser ignorieren solche Umbrüche (siehe auch Seite Regeln beim Editieren von HTML).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textabs&auml;tze definieren</title>
</head>
<body>
<h1>Textabs&auml;tze definieren</h1>
<p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p>
<p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>
</body>
</html>

Erläuterung:

<p> (p = paragraph = Absatz) leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes.

Beachten Sie:

Das End-Tag </p> ist in HTML optional, d.h. es muss nicht zwingend angegeben werden. In XHTML hingegen ist es Pflicht. Es ist außerdem auch in HTML guter Stil, das schließende </p>-Tag anzugeben. Das verdeutlicht zugleich auch die Bedeutung dieses Tags: Es umfaßt einen Textblock - es steht nicht für den Zwischenraum zwischen zwei Absätzen. Sofern Sie das <p>-Element mit Kapitel Stylesheets formatieren, bedeutet das, dass schon vor dem ersten Textblock ein <p> notieren müssen, damit alle Textabsätze gleich formatiert werden.

Das <p>-Element darf keine anderen blockerzeugenden Elemente wie z.B. Überschriften, Textabsätze oder Listen enthalten. Das bedeutet für HTML: Beim ersten Auftreten eines Tags, welches nicht mehr im akuellen Textabsatz erlaubt ist (beispielsweise <ul> oder <table>), wird der Textabsatz vom Browser implizit (mit einem intern hinzugefügten </p>) geschlossen - ein eventuell später folgendes schließendes </p> steht dann ohne Start-Tag allein und ist ein Fehler. In XHTML muss das schließende </p> zwingend vor den blockerzeugenden anderen Elementen kommen.

Beim Absatztext gelten die Aussagen zu Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen.

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Textabsätze ausrichten

Textabsätze werden linksbündig ausgerichtet, wenn Sie nichts anderes angeben. Sie können einen Textabsatz auch zentriert oder rechtsbündig ausrichten. Auch Blocksatz ist möglich.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Textabs&auml;tze ausrichten</title>
</head>
<body>
<h1>Textabs&auml;tze ausrichten</h1>
<p align="center">Dies ist ein zentrierter Absatz.</p>
<p align="right">Dies ist ein Absatz, der rechtsb&uuml;ndig ausgerichtet ist.</p>
<p align="left">Dies ist ein Absatz, der linksb&uuml;ndig ausgerichtet ist ...</p>
<p align="justify">Dies ist ein Absatz, der im Blocksatz ausgerichtet ist ...</p>
</body>
</html>

Erläuterung:

Durch die Angabe align="center" im
einleitenden <p>-Tag erreichen Sie, dass der Textabsatz zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert). Mit align="right"
wird der Absatz rechtsbündig ausgerichtet (right = rechts). Mit align="justify" erzwingen Sie den Blocksatz für den Absatz (justify = justieren). Mit align="left" können Sie die Normaleinstellung (linksbündige Ausrichtung) angeben.

Beachten Sie:

Nicht alle Browser beherrschen den Blocksatz. Auch eignet er sich nicht für schmale Textpassagen, da hierbei die relativ großen Wortabstände den Lesefluss stören.

align ist im HTML-4-Standard als deprecated (missbilligt) eingestuft. Stattdessen wird empfohlen, Stylesheets zu benutzen, z.B.: <p style="text-align:center">...</p>. Weitere Hinweise siehe folgender Abschnitt.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Textabsätze formatieren mit CSS

Wie der Text eines Absatzes genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um den Text darzustellen. Mit Kapitel Stylesheets können Sie Ihre Textabsätze jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textabs&auml;tze formatieren mit CSS</title>
</head>
<body>
<h1>Textabs&auml;tze formatieren mit CSS</h1>
<p style="font-family:Arial,sans-serif; font-size:18px; color:blue">Ein formatierter Absatz.</p>
<p style="background-color:yellow">Ein anderer formatierter Absatz.</p>
</body>
</html>

Erläuterung:

Im Beispiel sind zwei Absätze definiert. Für den ersten wird bestimmt, dass er in der Schriftart Arial oder einer anderen serifenlosen Schrift dargestellt wird, 18 Pixel Schriftgröße hat und in blauer Farbe erscheint. Der zweite Absatz erhält eine gelbe Hintergrundfarbe.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo Textabsätze vorkommen dürfen, welche anderen Elemente sie enthalten dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Textabsätze
Seite Attribut-Referenz für Textabsätze

nach oben
weiter | Seite Zeilenumbruch
zurück | Seite Überschriften
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Zeilenumbruch

SELFHTML

Zeilenumbruch
Informationsseite

nach unten Zeilenumbruch erzwingen
nach unten Automatischen Zeilenumbruch verhindern
nach unten Geschützte Leerzeichen
nach unten Zeilenumbruch erlauben
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zeilenumbruch erzwingen

Text innerhalb von normalen Absätzen, Listen, sowie in Überschriften oder Tabellenzellen wird vom Web-Browser bei der Anzeige automatisch umbrochen. Sie können jedoch an einer gewünschten Stelle einen Zeilenumbruch erzwingen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus ( Beispiel-Seite Quelle zum Beispieltext)

<html>
<head>
<title>Zeilenumbruch erzwingen</title>
</head>
<body>

<h1>Ottos Brief an die Mutter</h1>
<p>Liebe Mama!</p>
<p>Vor drei Wochen habe ich erfahren,<br>
dass Du krank bist.<br>
Mach' Dir keine Sorgen.<br>
Mir geht es gut.</p>

</body>
</html>

Erläuterung:

<br> (br = break = Umbruch) fügt an der gewünschten Stelle einen Zeilenumbruch ein. Dabei ist es egal, ob das alleinstehende Tag am Ende der vorherigen Zeile steht (wie im Beispiel), oder in einer eigenen Zeile, oder am Anfang der folgenden Zeile.

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das br-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <br />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

Netscape 1.1 MS IE 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Automatischen Zeilenumbruch verhindern

Sie können einen Textbereich bestimmen, in dem kein automatischer Zeilenumbruch erfolgt. Alles, was innerhalb dieses Bereichs steht, wird in einer langen Zeile angezeigt. Der Anwender kann dann mit der horizontalen Scroll-Leiste die überlangen Textzeile anzeigen.

Diese Möglichkeit gehört jedoch nicht zum offiziellen HTML-Sprachstandard. Sie sollten sie daher vermeiden und die CSS-Eigenschaft Seite white-space verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Zeilenumbruch verhindern</title>
</head>
<body>

<h1>ARD und ZDF</h1>
<nobr>Die vom ZDF sagen, die vom ARD senden st&auml;ndig Wiederholungen,
und die vom ARD sagen, die vom ZDF senden st&auml;ndig Wiederholungen,
und so wiederholen sich ARD und ZDF st&auml;ndig, ohne überhaupt etwas zu senden.</nobr>

</body>
</html>

Erläuterung:

<nobr> bewirkt, dass der auf das Tag folgende Text nicht umbrochen wird (nobr = no break = kein Umbruch). Am Ende des Textabschnitts, der nicht umbrochen werden soll, notieren Sie das abschließende Tag </nobr>.

Beachten Sie:

Wenn Sie Textzeilen unabhängig vom Anzeigefenster des Anwenders genau kontrollieren wollen und nach HTML-Standard arbeiten wollen, können Sie Seite präformatierten Text einsetzen.

HTML 3.2 XHTML 1.0 Netscape 1.0 MS IE 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Geschützte Leerzeichen

Sie können verhindern, dass bei einem Leerzeichen ein automatischer Zeilenumbruch erfolgen darf.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Gesch&uuml;tzte Leerzeichen</title>
</head>
<body>

<h1>Es gibt vieles, worin sich HTML&nbsp;2.0 und HTML&nbsp;4.0 unterscheiden.</h1>
<p>(Versuchen Sie zur Kontrolle einmal, das Anzeigefenster so schmal zu machen,
dass der Text des obigen Satzes bei &quot;HTML 2.0&quot; oder &quot;HTML 4.0&quot;
umbrochen wird.)</p>

</body>
</html>

Erläuterung:

Die Zeichenfolge &nbsp; erzeugt ein geschütztes Leerzeichen (nbsp =nonbreaking space = Leerzeichen ohne Umbruch). Es wird ein normales Leerzeichen angezeigt, doch an dieser Stelle kann kein Zeilenumbruch erfolgen. Notieren Sie die Zeichenfolge inklusive dem "kaufmännischen Und" (&) am Beginn und dem Strichpunkt am Ende. Die gleiche Wirkung erzielen Sie durch Notieren der Zeichenfolge &#160;.

Beachten Sie:

Zu dieser Art von Zeichennotation siehe auch Seite benannte Zeichen für die Zeichenkodierung ISO 8859-1.

Durch Notieren mehrerer solcher benannter Zeichen hintereinander können Sie auch mehrere Leerzeichen in Folge erzwingen.

Zeilenumbruch erlauben

Web-Browser brechen Text normalerweise nur bei Leerzeichen um, weil durch Leerzeichen Wörter voneinander abgegrenzt werden. Sie können explizit weitere Stellen markieren, an denen er den Text umbrechen darf. Sinnvoll ist dies bei langen Wörtern. Dies gilt für alle Absatzarten in HTML.

Beachten Sie bitte die Browserhinweise am Ende dieses Abschnitts.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Zeilenumbruch erlauben</title>
</head>
<body>
<h1>Langes Wort mit bedingtem Umbruch</h1>

<h2>Bedingte Trennung mit <code>&amp;shy;</code></h2>

<p>Donaudampfschiffahrts&shy;kapitänsmütze Donaudampfschiffahrts&shy;kapitänsmütze ... </p>

<h2>Bedingte Trennung mit <code>&lt;wbr&gt;</code></h2>

<p>Donaudampfschiffahrts<wbr>kapitänsmütze Donaudampfschiffahrts<wbr>kapitänsmütze ... </p>

<h2>Bedingte Trennung mit <code>&amp;#8203;</code></h2>

<p>Donaudampfschiffahrts&#8203;kapitänsmütze Donaudampfschiffahrts&#8203;kapitänsmütze ... </p>

</body></html>

Erläuterung:

Mit &shy; (= soft hyphen = bedingter Trennstrich) markieren Sie eine Stelle, an der getrennt werden darf, falls das Wort bei der Bildschirmanzeige am Ende der Zeile steht und der Platz für eine vollständige Darstellung nicht mehr ausreicht. Der Browser sollte das Wort an dieser Stelle mit einem Umbruch trennen und einen Trennstrich einfügen.

<wbr> (wbr = word break = Umbruch innerhalb eines Wortes) bewirkt ebenfalls einen optionalen Umbruch, fügt jedoch keinen Trennstrich ein. Innerhalb von nach oben Abschnitten mit verhindertem Zeilenumbruch bewirkt <wbr>, dass an der betreffenden Stelle trotzdem ein Umbruch erfolgen darf. <wbr> gehört nicht zum offiziellen HTML-Sprachstandard. Sie sollten dieses Element daher vermeiden.

Als Alternative wäre &#8203; (zero width space = Leerzeichen ohne Breite) denkbar, da bei Leerzeichen grundsätzlich ein Umbruch erfolgen darf. Allerdings erzeugt auch dieses Zeichen keinen Trennstrich und es ist nicht in jeder Schriftart enthalten, was dann zur Darstellung eines Kästchens führt.

Beachten Sie:

Leider ist die Browserunterstützung mangelhaft und es kommt teilweise sogar zu Fehldarstellungen, sodass vom Einsatz in der Praxis abzuraten ist:

 | &shy; | <wbr> | &#8203;
Netscape 2.0 - Netscape 4.x | fehlerhaft | kein Trennstrich | fehlerhaft
Netscape 6.0 | nein | kein Trennstrich | nein
Netscape 7.0 | nein | kein Trennstrich | kein Trennstrich
MS IE 3.0 | fehlerhaft | nein | fehlerhaft
MS IE 4.0 | fehlerhaft | kein Trennstrich | fehlerhaft
MS IE 5.0 | ja | nein | fehlerhaft
MS IE 5.0 Mac | fehlerhaft | kein Trennstrich | fehlerhaft
MS IE 5.5 - MS IE 6 | ja | kein Trennstrich | fehlerhaft
MS IE 7.0 | ja | kein Trennstrich | kein Trennstrich
Opera 5.12 - Opera 7 | nein | nein | fehlerhaft
Opera 7.10 - Opera 7.50 | ja | nein | fehlerhaft
Opera 8 - Opera 9.10 | ja | nein | kein Trennstrich
Mozilla Firefox 1 - Mozilla Firefox 2 | nein | kein Trennstrich | kein Trennstrich
Konqueror 3.1 - Konqueror 3.4 | fehlerhaft | kein Trennstrich | fehlerhaft
Safari 1.0 | fehlerhaft | nein | nein
Safari 2.0 | Ja | nein | kein Trennstrich

ja bedeutet, dass ein Umbruch erfolgt und ein Trennstrich sichtbar ist
nein bedeutet, dass die Notation keinerlei Auswirkung auf die Darstellung hat
kein Trennstrich bedeutet, dass zwar ein Umbruch erfolgt, jedoch kein Trennstrich sichtbar ist
fehlerhaft bedeutet, dass immer ein Trennstrich oder ein unerwünschtes Zeichen erscheint und/oder nicht umbrochen wird

Somit existiert derzeit keine Möglichkeit, bedingte Zeilenumbrüche zuverlässig und fehlerfrei einzusetzen.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie genaue Angaben darüber, wo Zeilenumbrüche vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Zeilenumbrüche
Seite Attribut-Referenz für Zeilenumbrüche

nach oben
weiter | Seite Listen
zurück | Seite Textabsätze
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen

SELFHTML

Listen
Informationsseite

nach unten Aufzählungsliste definieren
nach unten Nummerierte Liste definieren
nach unten Definitionsliste definieren
nach unten Verzeichnis- oder Menüliste definieren
nach unten HTML-Eigenschaften für Listen
nach unten Listen formatieren mit CSS
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Aufzählungsliste definieren

Aufzählungslisten sind z.B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aufz&auml;hlungslisten definieren</title>
</head>
<body>
<h1>Liste wichtiger Reime</h1>

<ul>
  <li>Probieren geht &uuml;ber Studieren</li>
  <li>Liebe geht &uuml;ber Triebe</li>
  <li>Tante f&auml;llt &uuml;ber Kante</li>
</ul>

</body>
</html>

Erläuterung:

<ul> leitet eine Aufzählungsliste ein (ul = unordered list = unsortierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag. Es ist zwar nach HTML-Standard erlaubt, das abschließende </li>-Tag wegzulassen, doch davon ist abzuraten. </ul> beendet die Liste.

Wie das Bullet dargestellt wird, bestimmt dabei der Web-Browser.

Das Verschachteln von Listen ist ebenfalls möglich.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Verschachtelte Listen</title>
</head>
<body>
<h1>Dies und das im Web</h1>

<ul>
  <li>Suchmaschinen
    <ul>
      <li>Google</li>
      <li>AltaVista</li>
      <li>Fireball</li>
    </ul>
  </li>
  <li>Verzeichnisse
    <ul>
      <li>Yahoo</li>
      <li>Web.de</li>
      <li>Dino-Online</li>
    </ul>
  </li>
  <li>Was anderes</li>
  <li>Noch was anderes</li>
</ul>

</body>
</html>

Erläuterung:

Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Nummerierte Liste definieren

Nummerierte Listen sind z.B. von Bedeutung, um nacheinander auszuführende Aktionen oder Rangfolgen übersichtlich darzustellen. Bei einer nummerierten Liste werden alle Listeneinträge automatisch durchnummeriert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nummerierte Liste definieren</title>
</head>
<body>
<h1>Todo-Liste</h1>

<ol>
  <li>bei Anette vorbeischauen</li>
  <li>bei Bianca vorbeischauen</li>
  <li>bei Christine vorbeischauen</li>
  <!-- usw. -->
</ol>

</body>
</html>

Erläuterung:

<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag. Es ist zwar nach HTML-Standard erlaubt, das abschließende </li>-Tag wegzulassen, doch davon ist abzuraten. </ol> beendet die Liste.

Beachten Sie:

nach oben Verschachteln von nummerierten Listen ist ebenfalls möglich, bewirkt aber keine Gesamtnummerierung. Automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1, sind mit HTML alleine nicht möglich.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Definitionsliste definieren

Definitionslisten sind für Glossare gedacht. Glossare bestehen aus einer Liste von Einträgen. Die Einträge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Definitionslisten definieren</title>
</head>
<body>
<h1>DF&Uuml;-Abkürzungen</h1>

<dl>
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
  <!-- usw. -->
</dl>

</body>
</html>

Erläuterung:

<dl> leitet eine Definitionsliste ein (dl = definition list = Definitionsliste).
<dt> leitet einen zu definierenden Ausdruck ein (dt = definition (list) term = Ausdruck in der Definitionsliste).
<dd> leitet eine Definition eines Ausdrucks ein (dd = definition (list) definition = Definition in der Definitionsliste).
</dl> beendet die Liste. Die End-Tags </dt> und </dd> dürfen zwar auch fehlen, doch davon ist abzuraten.

Beachten Sie:

Das nach oben Verschachteln von Definitionslisten ist ebenfalls möglich. Dadurch können Sie baumartige Strukturen im Text abbilden. Netscape verwendet beispielsweise beim Aufbau seiner Lesezeichendatei verschachtelte Definitionslisten, um die baumartig strukturierbaren Lesezeichen zu verwalten. "Innere" Listen müssen dabei innerhalb des dd-Elements notiert werden.

Die Abfolge von dt- und dd-Elementen innerhalb einer dl-Liste ist nicht streng geregelt. Es dürfen auch mehrere dt- oder dd-Elemente hintereinander folgen.

HTML 2.0 XHTML 1.0 deprecated (missbilligt) MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verzeichnis- oder Menüliste definieren

Verzeichnis- und Menülisten werden in der Praxis kaum verwendet und sind auch mittlerweile als deprecated gekennzeichnet, sollen also künftig aus dem HTML-Standard entfallen. Sie werden von den heutigen Browsern entweder nicht mehr oder nicht anders dargestellt als gewöhnliche Aufzählungslisten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Verzeichnis- oder Men&uuml;liste definieren</title>
</head>
<body>
<h1>Verzeichnisse und Men&uuml;s</h1>

<dir>
  <li>/usr/home/</li>
  <li>/usr/home/web/</li>
  <li>/usr/home/web/data/</li>
</dir>

<menu>
  <li>Datei</li>
  <li>Bearbeiten</li>
  <li>Ansicht</li>
</menu>

</body>
</html>

Erläuterung:

Eine Verzeichnisliste leiten Sie mit <dir> ein und beenden sie durch </dir> (dir = directory = Verzeichnis). <menu> leitet eine Menüliste ein, </menu> beendet die Menüliste. Mit <li> beginnt in beiden Listentypen ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). Das End-Tag </li> am Ende eines Listeneintrags ist nicht zwingend erforderlich, aber zu empfehlen.

Beachten Sie:

Verzeichnis- und Menülisten dürfen - im Gegensatz zu Aufzählungslisten - keine absatzerzeugenden Elemente zwischen <li> und </li> enthalten. Sie sind nur für zeilenartige Listen gedacht.

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 HTML-Eigenschaften für Listen

Es gibt eine Reihe von Attributen, die das Erscheinungsbild von Listen beeinflussen. So lassen sich beispielsweise nummerierte Listen auch alphabetisch und römisch nummerieren, und für Aufzählungslisten lässt sich der Typ des Bullet-Zeichens festlegen. Doch all diese HTML-Attribute sind mittlerweile als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Stattdessen sollten Sie nach unten Listen mit CSS formatieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eigenschaften von Listen</title>
</head>
<body>
<h1>Listen mit HTML-Attributen</h1>

<h2>Aufzählungsliste</h2>

<ul type="square">
  <li>Probieren geht über Studieren</li>
  <li>Liebe geht über Triebe</li>
  <li>Tante fällt über Kante</li>
</ul>

<h2>Nummerierte Liste, römisch</h2>

<ol type="I">
  <li value="10">bei Anette vorbeischauen (Wert 10)</li>
  <li>bei Bianca vorbeischauen</li>
  <li>bei Christine vorbeischauen</li>
</ol>

<h2>Nummerierte Liste mit Startwert 7</h2>

<ol start="7">
  <li>bei Anette vorbeischauen</li>
  <li>bei Bianca vorbeischauen</li>
  <li>bei Christine vorbeischauen</li>
</ol>

<h2>Definitionsliste</h2>

<dl compact>
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
</dl>

</body>
</html>

Erläuterung:

Für Aufzählungslisten können Sie das Symbol bestimmen, das vor den Listeneinträgen angezeigt wird:
<ul type="circle"> für nicht ausgefüllte Kreise (circle = Kreis).
<ul type="disc"> für ausgefüllte Kreise (disc = Scheibe)
<ul type="square"> für Rechtecke (square = Rechteck).

Für nummerierte Listen können Sie die Art der Nummerierung bestimmen:
Mit <ol type="I"> werden die Listeneinträge mit I., II., III., IV. usw. nummeriert.
Mit <ol type="i"> werden die Listeneinträge mit i., ii., iii., iv. usw. nummeriert.
Mit <ol type="A"> werden die Listeneinträge mit A., B., C. usw. nummeriert.
Mit <ol type="a"> werden die Listeneinträge mit a., b., c. usw. nummeriert.

Mit start innerhalb des einleitenden Tags von <ol> können Sie einen beliebigen Startwert setzen, z.B. <ol start="7">. Die Nummerierung beginnt dann bei 7.

Mit value innerhalb des Tags von <li> in einer nummerierten Liste können Sie den Startwert beliebig neu setzen, z.B. auf <li value="15">. Die Nummerierung fährt dann bei 15 fort.

Mit dem Attribut compact innerhalb des einleitenden Tags einer beliebigen Liste können Sie die kompaktere Darstellung bestimmen. Dies wurde allerdings von den Browsern noch nie oder nur vorübergehend mal interpretiert.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Listen formatieren mit CSS

Wie eine Liste genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um Listen darzustellen. Mit Kapitel Stylesheets können Sie ganze Listen und ihre Listenpunkte jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite Listenformatierung
Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Listen formatieren mit CSS</title>
</head>
<body>
<h1>Listen mit CSS</h1>

<h2>Aufz&auml;hlungsliste</h2>

<ul style="list-style-type:disc; color:red; font-weight:bold;">
  <li>Probieren geht &uuml;ber Studieren</li>
  <li>Liebe geht &uuml;ber Triebe</li>
  <li>Tante f&auml;llt &uuml;ber Kante</li>
</ul>

<h2>Nummerierte Liste</h2>

<ol style="list-style-type:upper-roman; font-weight:bold;">
  <li style="color:blue">bei Anette vorbeischauen</li>
  <li style="color:maroon">bei Bianca vorbeischauen</li>
  <li style="color:olive">bei Christine vorbeischauen</li>
</ol>

<h2>Definitionsliste</h2>

<dl style="font-size:0.7em; font-family:Verdana,Arial,sans-serif">
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
</dl>

</body>
</html>

Erläuterung:

Im Beispiel wird für eine Aufzählungsliste (<ul>...</ul>) bestimmt, dass sie ein Disk-Symbol als Bullet-Zeichen erhält, fett und in roter Farbe erscheint. Für eine nummerierte Liste (<ol>...</ol>) wird bestimmt, dass sie in römischen großen Ziffern zählt, und dass ihre Einträge fett dargestellt werden. Ihre einzelnen Listenpunkte werden zudem in unterschiedlichen Farben dargestellt. Für eine Definitionsliste (<dl>...</dl>) wird eine kleinere Schriftgröße als normal und eine bestimmte Schriftart bestimmt.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die verschiedenen Listentypen vorkommen dürfen, welche anderen Elemente sie enthalten dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Aufzählungslisten (<ul>...</ul>)
Seite Attribut-Referenz für Aufzählungslisten (<ul>...</ul>)
Seite Element-Referenz für nummerierte Listen (<ol>...</ol>)
Seite Attribut-Referenz für nummerierte Listen (<ol>...</ol>)
Seite Element-Referenz für Definitionslisten (<dl>...</dl>)
Seite Attribut-Referenz für Definitionslisten (<dl>...</dl>)
Seite Element-Referenz für Verzeichnislisten (<dir>...</dir>)
Seite Attribut-Referenz für Verzeichnislisten (<dir>...</dir>)
Seite Element-Referenz für Menülisten (<menu>...</menu>)
Seite Attribut-Referenz für Menülisten (<menu>...</menu>)

nach oben
weiter | Seite Zitate und Adressen
zurück | Seite Zeilenumbruch
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Zitate und Adressen

SELFHTML

Zitate und Adressen
Informationsseite

nach unten Zitate definieren
nach unten Zitate mit URI-Quellenangabe
nach unten Adressen definieren
nach unten Zitate und Adressen formatieren mit CSS
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zitate definieren

Sie können Zitate von Fremdautoren in einem eigenen, anders formatierten (zumeist eingerückten) Absatz hervorheben.

Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt letztlich der Web-Browser. Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text unterscheidbar anzuzeigen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zitate definieren</title>
</head>
<body>
<h1>Franz Kafka</h1>

<p>Über die Krähen und den Himmel schreibt Franz Kafka:</p>

<blockquote>
  <p>Die Krähen behaupten, eine einzige Krähe könne den Himmel
  zerstören; das ist zweifellos, beweist aber nichts gegen
  den Himmel, denn Himmel bedeutet eben: Unmöglichkeit von
  Krähen.</p>
</blockquote>

</body>
</html>

Erläuterung:

<blockquote> leitet einen eigenen Absatz für Zitate ein (blockquote = geblocktes Zitat). </blockquote> beendet den Absatz. In den Seite strict-Varianten von HTML/XHTML muss der Inhalt des Elements, wie in den Beispielen angeführt, von einem Seite Block-Element umschlossen sein.

Beachten Sie:

Das blockquote-Element wird gerne verwendet, um Einrückungen zu realisieren. Da es sich jedoch um eine logische Textauszeichnung handelt, die keine bestimmte Art der Formatierung vorschreibt, ist der Einrück-Effekt nicht garantiert.

Um Zitate im Text ohne Einrückung auszuzeichnen, verwenden Sie das unter Seite HTML-Elemente für logische Auszeichnung im Text aufgeführte Inline-Element q.

HTML 4.0 XHTML 1.0 Zitate mit URI-Quellenangabe

Wenn ein Zitat im Internet verfügbar ist, können Sie den URI, also die Internet-Adresse der Quelle angeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zitate mit URI-Quellenangabe</title>
</head>
<body>
<h1>Die Energie des Verstehens</h1>

<p>Geben Sie nicht auf, denn Sie haben sie:</p>

<blockquote cite="http://de.selfhtml.org/">
  <p>Die Energie des Verstehens</p>
</blockquote>

</body>
</html>

Erläuterung:

Mit dem Attribut cite im einleitenden <blockquote>-Tag können Sie den URI der zitierten Quelle angeben (cite = Zitat).

Beachten Sie:

Dieses Attribut dient lediglich der Information über die Quelle des Zitats und die Spezifikation gibt auch keine Empfehlung zur Visualisierung (in diesem Beispiel werden Sie daher vermutlich keinen Effekt sehen).

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Adressen definieren

Sie können Internet-Adressen von Personen oder Dateien in einem eigenen, anders formatierten (zumeist kursiv dargestellten, eingerückten) Absatz hervorheben. Auch dies ist eine logische Textauszeichnung, für deren tatsächliche Formatierung bei der Ausgabe es keine festen Vorschriften gibt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Adressen</title>
</head>
<body>
<h1>Das HTML-Element f&uuml;r Adressen wird kaum verwendet.</h1>

<address>Max Mustermann, max.mustermann@example.org</address>

</body>
</html>

Erläuterung:

<address> leitet einen eigenen Absatz für Internet-Adressen ein. </address> beendet den Absatz.

Beachten Sie:

Das address-Element darf keine anderen blockerzeugenden Elemente wie z.B. Überschriften, Textabsätze, Listen, Zitate oder Adressen enthalten.

Das address-Element ist auch in Verbindung mit Seite E-Mail-Verweisen sinnvoll.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zitate und Adressen formatieren mit CSS

Wie Zitate und Adressen genau dargestellt werden, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit Kapitel Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
Seite Schriftformatierung
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zitate und Adressen formatieren mit CSS</title>
</head>
<body>
<h1>Zitat und Adresse</h1>

<blockquote style="padding:10px; border:thin solid blue;">
  <p>Klarheit ist, wenn man so will, nur die anschaulichere Variante der Wahrheit.</p>
</blockquote>

<address style="color:blue;">Brigitte Beispiel, beispiel@example.org</address>

</body>
</html>

Erläuterung:

Das blockquote-Element im Beispiel erhält einen dünnen durchgezogenen blauen Rahmen und der Text darin einen Innenabstand von 10 Pixeln zum Rahmen. Das address-Element erhält eine blaue Schriftfarbe.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo Zitate und Adressen vorkommen dürfen, welche anderen Elemente sie enthalten dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Zitate (<blockquote>...</blockquote>)
Seite Attribut-Referenz für Zitate (<blockquote>...</blockquote>)
Seite Element-Referenz für Adressen (<address>...</address>)
Seite Attribut-Referenz für Adressen (<address>...</address>)

nach oben
weiter | Seite Präformatierter Text (wie im Editor eingegeben)
zurück | Seite Listen
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Präformatierter Text (wie im Editor eingegeben)

SELFHTML

Präformatierter Text (wie im Editor eingegeben)
Informationsseite

nach unten Textabschnitt mit präformatiertem Text definieren
nach unten Breite eines Bereichs mit präformatiertem Text
nach unten Ältere HTML-Elemente für präformatierten Text
nach unten Präformatierten Text formatieren mit CSS
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Textabschnitt mit präformatiertem Text definieren

Beispielsweise für Programmlistings ist es wichtig, dass sie in dicktengleicher Schrift dargestellt werden, und dass Einrückungen so wiedergegeben werden, wie sie beim Editieren eingegeben wurden. Zu diesem Zweck bietet HTML die Möglichkeit der "präformatierten Textabschnitte" an. Auch wenn Sie tabellarische Daten darstellen müssen und auf Kapitel Tabellen verzichten wollen, können Sie präformatierten Text benutzen. Und dann ist präformatierter Text auch noch dazu geeignet, um andere Elemente auszurichten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textabschnitt mit pr&auml;formatiertem Text definieren</title>
</head>
<body>
<h1>Ostern mit Pascal</h1>

<pre>
 <code>
  FUNCTION Osterberechnung(year : INTEGER) : INTEGER;
  VAR  a, b, c, d, e, f, g, h, i, k, l, m : INTEGER;
  BEGIN
     a  :=  year MOD 19;
     b  :=  year DIV 100;
     c  :=  year MOD 100;
     d  :=  b DIV 4;
     e  :=  b MOD 4;
     f  :=  ( b + 8 ) DIV 25;
     g  :=  ( b  f + 1 ) DIV 3;
     h  :=  ( 19 * a + b  d  g + 15 ) MOD 30;
     i  :=  c DIV 4;
     k  :=  c MOD 4;
     l  :=  ( 32 + 2 * e + 2 * i  h  k ) MOD 7;
     m  :=  ( a + 11 * h + 22 * l ) DIV 451;
     Easter :=  h + l - 7 * m + 22;
  END{FUNC};
 </code>
</pre>

</body>
</html>

Erläuterung:

<pre> leitet einen Textabschnitt mit präformatiertem Text ein (pre = preformatted = vorformatiert). </pre> beendet den Abschnitt. Alles, was dazwischen steht, wird so angezeigt, wie es eingegeben wurde, und zwar in dicktengleicher Schrift.

Beachten Sie:

Innerhalb von <pre> und </pre> gelten wie in anderen Textabschnitten die Aussagen zu Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen. HTML-Elemente innerhalb von <pre> und </pre> werden interpretiert.

pre-Elemente werden häufig eingesetzt, um Quelltext darzustellen. In diesem Fall ist es semantisch korrekt, den Inhalt mit einem Seite code-Element zu umfassen:<pre><code>...</code></pre>

HTML 4.0 XHTML 1.0 deprecated (missbilligt) Netscape 6.0 Mozilla Firefox 1 Breite eines Bereichs mit präformatiertem Text

Sie können eine Breite für einen Abschnitt mit präformatiertem Text erzwingen. "Breite" bedeutet dabei: die maximale Anzahl von Zeichen in einer Zeile.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Breite eines Bereichs mit pr&auml;formatiertem Text</title>
</head>
<body>
<h1>MIDI-Dateien</h1>

<pre width="30">
YBREEZE  MID        17.845  15.06.97   6:01 ybreeze.mid
YGLADTR  MID        34.552  15.06.97   6:01 ygladtr.mid
YHASTE   MID        27.834  15.06.97   6:01 yhaste.mid
YRAG     MID        18.540  15.06.97   6:01 yrag.mid
YRITMO   MID        29.056  15.06.97   6:01 yritmo.mid
         5 Datei(en)               127.827 Bytes
</pre>

</body>
</html>

Erläuterung:

Mit dem Attribut width im einleitenden <pre>-Tag geben Sie eine maximale Breite für die Zeilen des Bereichs vor. Im obigen Beispiel kann keine Zeile mehr als 30 Zeichen haben.

Bei längeren Zeilen kann der Browser entweder eine kleinere Schrift wählen, um die Breite einzuhalten, oder er bricht überlange Zeilen um.

Beachten Sie:

Die Angabe zur Breite eines präformatierten Bereichs wird nur von Netscape 6 und Mozilla Firefox interpretiert und ist mittlerweile auch als deprecated gekennzeichnet, soll also künftig aus dem HTML-Standard entfallen.

HTML 2.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Ältere HTML-Elemente für präformatierten Text

Der Vollständigkeit halber sollten einige ältere Elemente erwähnt werden, die allesamt nicht mehr zum HTML-Standard gehören.

<xmp>...</xmp> (xmp = example = Beispiel) war einmal als logische Auszeichnung für Quellcode-Beispiele gedacht.
<plaintext>...</plaintext> (plaintext = nackter Text) war zum Darstellen von reinem Text gedacht, etwa zum Zitieren aus einer unformatierten Textdatei.
Das inline-Element ist deprecated und erfordert kein schließendes Tag.
<listing>...</listing> (listing = zeilenorientierter Quelltext) war für Quelltext von Programmen gedacht.

Beachten Sie:

<xmp> und <listing> wurden in HTML 2.0 spezifiziert, <plaintext> in HTML 3.2. Alle drei Elemente entfielen mit HTML 4 und finden in der Praxis praktisch keine Verwendung mehr. Wenn Sie keine besonderen Gründe haben, sollten Sie <pre> zur Darstellung von nach oben präformatiertem Text verwenden.

Der Unterschied zwischen <xmp>...</xmp> und <listing>...</listing> liegt in der Schriftweite. <xmp>...</xmp> bewirkt eine weitere Schrift (ausgehend von 80 Zeichen/Zeile beim Ausdruck), <listing>...</listing> eine engere Schrift (ausgehend von 132 Zeichen/Zeile beim Ausdruck). <listing>...</listing> wird von Netscape etwa auch anders dargestellt als <pre>...</pre>. Firefox und Konqueror stellen allerdings beide Elemente mit der gleichen Schriftformatierung dar.

Netscape, Firefox, Konqueror und Safari akzeptieren zu <plaintext> kein abschließendes Tag </plaintext>, während andere Browser das End-Tag interpretieren. Microsoft gibt an, das Element nicht mehr zu unterstützen. Netscape stellt alles in dicktengleicher Schrift dar, was Sie bis zum nächsten Block-Element (z.B. Überschrift, Textabsatz, Liste usw.) an Text eingeben.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Präformatierten Text formatieren mit CSS

In welcher Schriftart und Schriftgröße präformatierter Text genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit Kapitel Stylesheets können Sie ein solches Element jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:

Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pr&auml;formatierten Text formatieren mit CSS</title>
</head>
<body>
<h1>Software-Entwicklung</h1>

<pre style="background-color:#009; color:#ff0; font-family:Fixedsys,Courier,monospace; padding:10px;">
#include &lt;nonsense.h&gt;
#include &lt;lies.h&gt;
#include &lt;spyware.h&gt; /* Microsoft Network Connectivity library */
#include &lt;process.h&gt; /* For the court of law */
<!-- usw. -->
</pre>

</body>
</html>

Erläuterung:

Das pre-Element im Beispiel erhält einen blauen Hintergrund, gelbe Schriftfarbe, und als Schriftart wird "Fixedsys" gewünscht, oder, falls nicht verfügbar, eine Courier-Schrift. Damit der Text nicht so am Rand klebt, wird außerdem ein Innenabstand von 10 Pixeln definiert.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo präformatierter Text vorkommen darf, welche anderen Elemente er enthalten darf, welche Attribute das pre-Element haben kann und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für präformatierten Text (<pre>...</pre>)
Seite Attribut-Referenz für präformatierten Text (<pre>...</pre>)

nach oben
weiter | Seite Logische Auszeichnungen im Text
zurück | Seite Zitate und Adressen
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Logische Auszeichnungen im Text

SELFHTML

Logische Auszeichnungen im Text
Informationsseite

nach unten Allgemeines zur logischen Auszeichnung im Text
nach unten HTML-Elemente für logische Auszeichnung im Text
nach unten Änderungsmarkierungen im Dokument
nach unten Textrichtung ändern
nach unten Logische Elemente für Textauszeichnung formatieren mit CSS
nach unten Weitere Informationen
nach unten

Allgemeines zur logischen Auszeichnung im Text

In HTML gibt es logische und Seite physische Elemente zur Auszeichnung von Text. Logische Textauszeichnungen haben Bedeutungen wie "betont" oder "emphatisch". Bei logischen Elementen entscheidet der Web-Browser, wie ein solcher Text hervorgehoben wird (z.B. fett, kursiv oder andersfarbig). In Verbindung mit Stylesheets können Sie logische Textauszeichnungen allerdings nach Wunsch formatieren.

Im Unterschied zu Elementen wie Überschriften, Textabsätzen, Listen usw., die ja auch der logischen Strukturierung von Text dienen, sind die hier beschriebenen Elemente jedoch so genannte Seite Inline-Elemente, während Überschriften, Textabsätze, Listen usw. als Seite Block-Elemente bezeichnet werden. Inline-Elemente erzeugen keinen Absatz (genauer: keine neue Zeile) im Textfluss.

HTML-Elemente für logische Auszeichnung im Text

Es stehen verschiedene HTML-Elemente zur Verfügung, um Text logisch auszuzeichnen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML-Elemente f&uuml;r logische Auszeichnung im Text</title>
</head>
<body>
<h1>Alles logisch</h1>

<p>Die Kreter sagen, da&szlig; <strong>alle Kreter l&uuml;gen</strong>.
Das stimmt aber nicht, weil alle Kreter l&uuml;gen.</p>

</body>
</html>

Erläuterung:

Inline-Elemente für Auszeichnungen im Text müssen - zumindest in der HTML-Variante "Strict" - innerhalb anderer Block-Elemente vorkommen. Im obigen Beispiel ist ein Seite Textabsatz notiert und innerhalb davon eine logische Textauszeichnung. Am Anfang des Textbereichs, der ausgezeichnet werden soll, wird ein einleitendes Tag (im Beispiel das Tag <strong>) eingefügt. Am Ende des gewünschten Textbereichs wird ein entsprechendes Abschluss-Tag eingefügt (im Beispiel </strong>).

Folgende Elemente dieser Art stehen zur Verfügung:

Element (Notation) | Status | Bedeutung
<em>...</em> | MS IE 2.0 Mozilla Firefox 1 | zeichnet einen Text aus als betonten, wichtigen Text ("emphatisch")
<strong>...</strong> | MS IE 1.0 Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "stark betont" (Steigerung von "em")
<code>...</code> | MS IE 1.0 Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "dies ist Quelltext"
<samp>...</samp> | MS IE 2.0 Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "Dies ist ein Beispiel". Im engeren Sinne können auch Beispiel-Ausgaben von Programmen und Scripten auf diese Weise ausgezeichnet werden.
<kbd>...</kbd> | MS IE 2.0 Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "dies stellt eine Benutzereingabe dar"
<var>...</var> | MS IE 1.0 Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "dies ist eine Variable oder ein variabler Name"
<cite>...</cite> | MS IE 2.0 Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "dies ist die Quelle oder der Autor". Das eigentliche Zitat wird mit q oder Seite blockquote ausgezeichnet.
<dfn>...</dfn> | MS IE 2.0 Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "dies ist eine Definition".
<abbr>...</abbr> | Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "dies ist eine Abkürzung"
<acronym>...</acronym> | MS IE 4.0 Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "dies ist ein Akronym". Akronyme sind besondere Abkürzungen, die aus den Anfangsbuchstaben mehrerer (Teil-)Wörter gebildet werden. Sie werden im Deutschen in der Regel ohne Punkte gebildet ("Lkw"). Akronyme lassen sich darüber hinaus meist als Wort aussprechen (z.B. "NATO").
<q cite="Quelle">...</q> | MS IE 4.0 Mozilla Firefox 1 | zeichnet einen Text aus mit der Bedeutung "dies ist ein Zitat mit Quellenangabe"

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Änderungsmarkierungen im Dokument

Wenn Sie Dokumente in HTML bearbeiten, bei denen es wichtig ist, Änderungen zu protokollieren, dann können Sie logische Textauszeichnungen für gelöschte und eingefügte Textpassagen verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>&Auml;nderungsmerkierungen im Dokument</title>
</head>
<body>
<h1>Viel falsch</h1>

<p>Goethe wurde im Jahre <del>1768</del><ins>1749</ins> geboren
und war ein begnadeter <del>Sportler</del><ins>Schriftsteller</ins>.</p>

</body>
</html>

Erläuterung:

Mit <del>...</del> zeichnen Sie Text aus, der nicht mehr gültig ist (del = delete = löschen). Mit <ins>...</ins> können Sie Text auszeichnen, der neu dazugekommen ist (ins = insert = einfügen).

Zur exakteren Auszeichnung sind noch zwei Attribute in beiden einleitenden Tags erlaubt:

Mit dem Attribut datetime im einleitenden Tag von <ins> oder <del> können Sie den Zeitpunkt der Änderung festhalten. Eine Angabe wie <ins datetime="2001-06-25T10:59+01:00"> bedeutet: "eingefügt am 25.6.2001 um 10 Uhr 59" nach Zeitzone UTC-Zeit plus 1 Stunde. Die Uhrzeit/Zeitzonenangabe können Sie auch weglassen, etwa so: <ins datetime="2001-06-25">. UTC bedeutet "Coordinated Universal Time".

Mit dem Attribut cite können Sie einen URI angeben, der als der Grund für die Änderung gelten kann - beispielsweise ein verbindliches Dokument, auf dem Ihr Dokument beruht, und das mittlerweile geändert wurde. Eine Angabe wie <ins cite="http://www.w3.org/TR/1999/REC-html401-19991224"> bedeutet: dieser Text wurde aufgrund der HTML-Spezifikation 4.01 vom 24.12.1999 eingefügt (der angegebene URI ist die Adresse, an der die HTML-Spezifikation zu finden ist).

Beachten Sie:

Die beiden Elemente ins und del haben eine Sonderstellung, was ihr Vorkommen betrifft. Diese beiden Elemente dürfen entweder innerhalb von Seite Block-Elementen vorkommen - dann fungieren sie selber als Inline-Elemente. Oder sie werden außerhalb von Block-Elementen notiert - dann fungieren sie selber als Block-Elemente und können mehrere andere Block-Elemente und deren gesamten Inhalt einschließen.

HTML 4.0 XHTML 1.0 MS IE 5.5 Netscape 6.0 Opera 7.20 Mozilla Firefox 1 Safari WebKit (Entwicklerversion) Textrichtung ändern

Wenn Sie HTML in Verbindung mit Sprachen benutzen, die eine andere Textrichtung als von links nach rechts haben, kann es zu Konflikten bei der Textrichtung kommen, vor allem, wenn Sie zwei Sprachen mit unterschiedlicher Textrichtung im Text gemischt verwenden. Wenn Sie Unicodes in HTML notieren, wird dabei normalerweise automatisch auch die Textrichtung der Sprache berücksichtigt. Wenn Sie etwa die Unicodes für ein arabisches Wort von links nach rechts notieren, sollte die Software die Zeichenkette dennoch so auflösen, dass die Darstellung von rechts nach links erfolgt, weil das die Textrichtung im Arabischen ist. Sollte das aus irgendwelchen Gründen nicht funktionieren, können Sie mit Hilfe eines HTML-Elements nachhelfen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textrichtung &auml;ndern</title>
</head>
<body>
<h1>Umgekehrt</h1>

<p>Hier wird das Wort &quot;umgekehrt&quot; einfach <bdo dir="rtl">umgekehrt</bdo>.</p>

</body>
</html>

Erläuterung:

Mit <bdo dir="rtl"> leiten Sie einen Text ein, der von rechts nach links dargestellt wird, und mit <bdo dir="ltr"> einen Text, der von links nach rechts dargestellt wird. </bdo> beendet den Text mit der anderen Schreibrichtung (bdo = bidirectional overwrite = Überschreiben der automatischen Bidirektionalität). Mit dem Attribut dir erzwingen Sie die Textrichtung (rtl = right to left = rechts nach links).

Das Attribut dir gehört zu den Kapitel Universalattributen und darf in allen einleitenden HTML-Tags stehen, in denen Text vorkommen kann. Das bdo-Element ist für solche Fälle gedacht, in denen dir in anderen HTML-Elementen zu Problemen führt, beispielsweise bei verschachtelten Tags mit widersprüchlichen Anweisungen zur Textrichtung.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Logische Elemente für Textauszeichnung formatieren mit CSS

Wie logische Elemente zur Textauszeichnung genau dargestellt werden, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit Kapitel Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
Seite Schriftformatierung
Seite Hintergrundfarben und -bilder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Logische Elemente für Textauszeichnung formatieren mit CSS</title>
</head>
<body>
<h1>Viele viele bunte Logis</h1>

<p>
Text mit dem <em style="color:blue">em-Element</em><br>
Text mit dem <strong style="color:red">strong-Element</strong><br>
Text mit dem <code style="color:purple">code-Element</code><br>
<!-- usw. -->
</p>

</body>
</html>

Erläuterung:

Die verschiedenen logischen Elemente im Beispiel erhalten unterschiedliche Schriftfarben. Formatieren können die Browser allerdings nur jene Elemente, die sie kennen.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die logischen Textauszeichnungen vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz und Seite Attribut-Referenz für <em>...</em>
Seite Element-Referenz und Seite Attribut-Referenz für <strong>...</strong>
Seite Element-Referenz und Seite Attribut-Referenz für <code>...</code>
Seite Element-Referenz und Seite Attribut-Referenz für <samp>...</samp>
Seite Element-Referenz und Seite Attribut-Referenz für <kbd>...</kbd>
Seite Element-Referenz und Seite Attribut-Referenz für <var>...</var>
Seite Element-Referenz und Seite Attribut-Referenz für <cite>...</cite>
Seite Element-Referenz und Seite Attribut-Referenz für <dfn>...</dfn>
Seite Element-Referenz und Seite Attribut-Referenz für <acronym>...</acronym>
Seite Element-Referenz und Seite Attribut-Referenz für <abbr>...</abbr>
Seite Element-Referenz und Seite Attribut-Referenz für <q>...</q>
Seite Element-Referenz und Seite Attribut-Referenz für <ins>...</ins>
Seite Element-Referenz und Seite Attribut-Referenz für <del>...</del>
Seite Element-Referenz und Seite Attribut-Referenz für <bdo>...</bdo>

nach oben
weiter | Seite Physische Auszeichnungen im Text
zurück | Seite Präformatierter Text (wie im Editor eingegeben)
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Physische Auszeichnungen im Text

SELFHTML

Physische Auszeichnungen im Text
Informationsseite

nach unten Allgemeines zur physischen Auszeichnung im Text
nach unten HTML-Elemente für physische Auszeichnung im Text
nach unten Physische Elemente für Textauszeichnung zusätzlich formatieren mit CSS
nach unten Weitere Informationen
nach unten

Allgemeines zur physischen Auszeichnung im Text

In HTML gibt es physische und Seite logische Elemente zur Auszeichnung von Text. Physische Textauszeichnungen haben Bedeutungen wie "fett" oder "kursiv", stellen also direkte Angaben zur gewünschten Schriftformatierung dar. Bei physischen Elementen sollte der Web-Browser eine Möglichkeit finden, den so ausgezeichneten Text entsprechend darzustellen.

Ebenso wie die logischen Elemente zur Auszeichnung von Text gehören die hier beschriebenen Elemente zu den Seite Inline-Elementen.

HTML-Elemente für physische Auszeichnung im Text

Es stehen verschiedene HTML-Elemente zur Verfügung, um Text physisch auszuzeichnen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML-Elemente f&uuml;r physische Auszeichnung im Text</title>
</head>
<body>
<h1>Fett und schief</h1>

<p>Das Schwein ist <b>fett</b> und der Turm von Pisa ist <i>schief</i>.<br>
Und was ist <b><i>fett und schief</i></b>?</p>

</body>
</html>

Erläuterung:

Inline-Elemente für Auszeichnungen im Text müssen - zumindest in der HTML-Variante "Strict" - innerhalb anderer Block-Elemente vorkommen. Im obigen Beispiel ist ein Seite Textabsatz notiert und innerhalb davon stehen mehrere physische Textauszeichnungen. Am Anfang des Textbereichs, der ausgezeichnet werden soll, wird ein einleitendes Tag (im Beispiel die Tags <b> und <i>) eingefügt. Am Ende des gewünschten Textbereichs wird ein entsprechendes Abschluss-Tag eingefügt (z.B. </b> bzw. </i>).

Folgende Elemente dieser Art stehen zur Verfügung:

Element (Notation) | Status | Bedeutung
<b>...</b> | MS IE 2.0 Mozilla Firefox 1 | zeichnet einen Text als fett aus
<i>...</i> | MS IE 1.0 Mozilla Firefox 1 | zeichnet einen Text als kursiv aus
<tt>...</tt> | MS IE 1.0 Mozilla Firefox 1 | zeichnet einen Text als dicktengleich formatiert aus (tt = Teletyper = Fernschreiber)
<u>...</u> | MS IE 3.0 Mozilla Firefox 1 | zeichnet einen Text als unterstrichen aus
<strike>...</strike> | MS IE 2.0 Mozilla Firefox 1 | zeichnet einen Text als durchgestrichen aus
<s>...</s> | MS IE 4.0 Mozilla Firefox 1 | zeichnet einen Text als durchgestrichen aus
<big>...</big> | MS IE 3.0 Mozilla Firefox 1 | zeichnet einen Text größer als normal aus
<small>...</small> | MS IE 3.0 Mozilla Firefox 1 | zeichnet einen Text kleiner als normal aus
<sup>...</sup> | MS IE 3.0 Mozilla Firefox 1 | zeichnet einen Text als hochgestellt aus
<sub>...</sub> | MS IE 3.0 Mozilla Firefox 1 | zeichnet einen Text als tiefgestellt aus

Beachten Sie:

Sie können auch - wie im obigen Beispiel - Elemente dieser Art verschachteln. Dadurch sollten sich die Effekte addieren. Ein Text der also beispielsweise als fett und innerhalb davon als kursiv ausgezeichnet wird, sollte fettkursiv dargestellt werden.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Physische Elemente für Textauszeichnung zusätzlich formatieren mit CSS

Mit Kapitel Stylesheets können Sie auch physische Elemente nach weiteren Wünschen formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
Seite Schriftformatierung
Seite Hintergrundfarben und -bilder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Physische Elemente f&uuml;r Textauszeichnung zus&auml;tzlich formatieren mit CSS</title>
</head>
<body>
<h1>Fett und schief mit Stil</h1>

<p>Das Schwein ist <b style="background-color:#FFCCCC">fett</b> und der Turm
von Pisa ist <i style="font-weight:bold; background-color:#FFFF00">schief</i>.</p>

</body>
</html>

Erläuterung:

Die beiden Elemente für fette und kursive Schriftauszeichnung erhalten im Beispiel zusätzlich unterschiedliche Hintergrundfarben. Das i-Element wird außerdem fett ausgezeichnet - aber mit Hilfe von CSS.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die physischen Textauszeichnungen vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz und Seite Attribut-Referenz für <b>...</b>
Seite Element-Referenz und Seite Attribut-Referenz für <i>...</i>
Seite Element-Referenz und Seite Attribut-Referenz für <tt>...</tt>
Seite Element-Referenz und Seite Attribut-Referenz für <u>...</u>
Seite Element-Referenz und Seite Attribut-Referenz für <strike>...</strike>
Seite Element-Referenz und Seite Attribut-Referenz für <s>...</s>
Seite Element-Referenz und Seite Attribut-Referenz für <big>...</big>
Seite Element-Referenz und Seite Attribut-Referenz für <small>...</small>
Seite Element-Referenz und Seite Attribut-Referenz für <sup>...</sup>
Seite Element-Referenz und Seite Attribut-Referenz für <sub>...</sub>

nach oben
weiter | Seite Allgemeine Elemente für Textbereiche
zurück | Seite Logische Auszeichnungen im Text
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Allgemeine Elemente für Textbereiche

SELFHTML

Allgemeine Elemente für Textbereiche
Informationsseite

nach unten Allgemeines Block-Element
nach unten Älteres Block-Element für zentrierte Bereiche
nach unten Allgemeines Inline-Element
nach unten Allgemeine Elemente formatieren mit CSS
nach unten Weitere Informationen
nach unten

HTML 3.2 XHTML 1.0 MS IE 3.0 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Allgemeines Block-Element

Sie können mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe von nach unten CSS formatiert zu werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Allgemeines Block-Element</title>
</head>
<body>

<div align="center">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li>alles!</li>
</ul>
</div>

<div align="right">
<h1>Alles rechts am Rand</h1>
<ul>
<li>alles rechts am Rand</li>
<li>alles?</li>
<li>alles!</li>
</ul>
</div>

</body>
</html>

Erläuterung:

Mit <div> leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Block-Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert.

Einen solchen Bereich und alle seine enthaltenen Elemente können Sie mit dem Attribut align im einleitenden <div>-Tag ausrichten. Mit align="center" richten Sie den Bereich mit allen seinen Elementen zentriert aus (align = Ausrichtung, center = zentriert), mit align="right" rechtsbündig (right = rechts). Mit align="justify" werden innere Elemente wie freistehender Text, Textabsätze oder Überschriften als Blocksatz ausgerichtet. Mit align="left" erzwingen Sie die linksbündige Ausrichtung von Elementen (Voreinstellung).

Beachten Sie:

Das div-Element wird weiterhin zum HTML-Standard gehören. Das Attribut align ist jedoch als deprecated eingestuft und soll künftig entfallen. Statt dessen sollten Sie mit Stylesheets arbeiten.

Konqueror und Safari zentrieren bzw. positionieren im Beispiel zwar die Listeninhalte, nicht jedoch das davor stehende Bullet-Zeichen.

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 3.0 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Älteres Block-Element für zentrierte Bereiche

Sie können mehrere Absätze, bestehend aus ganz verschiedenen Elementen wie Text, Grafiken, Tabellen usw. gemeinsam zentriert ausrichten. Dieses Element ist jedoch als deprecated eingestuft. Es ist mittlerweile eigentlich überflüssig und sollte nur noch in begründeten Ausnahmefällen (z.B. Abwärtskompatibilität zu Netscape 1.1) benutzt werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>&Auml;lteres Block-Element f&uuml;r zentrierte Bereiche</title>
</head>
<body>

<center>
<h1>Zentrierter Kunsttext</h1>
<pre>.:*A*:._.:*S*:._.:*C*:._.:*I*:._.:*I*:._.:*~*:._.:*A*:._.:*R*:._.:*T*:.</pre>
</center>

</body>
</html>

Erläuterung:

Mit <center> leiten Sie einen Bereich ein, in dem alles, was folgt, zentriert ausgerichtet wird (center = zentriert). Das können z.B. Überschriften, Text, Grafiken oder Tabellen sein. Mit dem abschließenden Tag </center> beenden Sie die Zentrieranweisung.

Beachten Sie:

Konqueror zentriert im Beispiel zwar die Überschrift, aber nicht das pre-Element.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Allgemeines Inline-Element

Analog zum div-Element, das andere Block-Elemente enthalten kann, gibt es ein Element, das Text und andere Inline-Elemente enthalten kann, selbst aber keinerlei Eigenschaften hat und nichts bewirkt. Es ist dazu gedacht, um mit Hilfe von nach unten CSS formatiert zu werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Allgemeines Inline-Element</title>
</head>
<body>

<h1 style="font-size:500%">
<span style="color:blue">A</span>
<span style="color:red">B</span>
<span style="color:green">C</span>
</h1>

</body>
</html>

Erläuterung:

<span> leitet einen allgemeinen Inline-Bereich ein. </span> beendet diesen Bereich. Das Beispiel zeigt eine Überschrift 1. Ordnung, die selbst bereits mit CSS formatiert ist und dadurch auf 500% Schriftgröße gebracht wird. Innerhalb der Überschrift sind die drei Buchstaben ABC notiert. Jeder davon ist in ein span-Element eingeschlossen, und bei jedem span-Element wird mit Hilfe von CSS eine andere Schriftfarbe zugewiesen.

Beachten Sie:

In der "Strict"-Variante dürfen Inline-Elemente nur innerhalb von Block-Elementen notiert werden. Im obigen Beispiel ist das der Fall, da die span-Elemente innerhalb eines Überschriftenelements vorkommen.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Allgemeine Elemente formatieren mit CSS

Allgemeine Elemente für Textbereiche erwachen durch Formatierung erst zum Leben. Mit Kapitel Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:

Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder
Seite Positionierung und Anzeige von Elementen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Allgemeine Elemente formatieren mit CSS</title>
</head>
<body>

<div style="text-align:center; padding:20px; border:thin solid red; margin:25px">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li><span style="font-weight:bold; color:red">alles!</span></li>
</ul>
</div>

<div style="text-align:right; padding:20px; border:thin solid blue; margin:25px">
<h1>Alles rechts am Rand</h1>
<ul>
<li>alles rechts am Rand</li>
<li>alles?</li>
<li><span style="font-weight:bold; color:blue">alles!</span></li>
</ul>
</div>

</body>
</html>

Erläuterung:

Das Beispiel bewirkt eine ähnliche Ausgabe wie das im Abschnitt nach oben Allgemeines Block-Element, diesmal jedoch mit Stylesheets formatiert und damit auch geeignet für die HTML-Variante "Strict". Beide div-Bereiche erhalten einen dünnen durchgezogenen Rahmen, der erste rot, der zweite blau. Ein Innenabstand von 20 Pixeln sorgt dafür, dass der Text nicht am Rahmen klebt, und ein Außenabstand von 25 Pixeln stellt sicher, dass links, rechts über und unter den Rahmen Platz entsteht. Der letzte Listenpunkt in beiden Aufzählungslisten wird jeweils mit dem leeren Inline-Element span ausgezeichnet und erhält jeweils eine fette Schrift und eine Schriftfarbe zugewiesen.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Behälter-Elemente vorkommen dürfen, welche anderen Elemente sie enthalten dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für allgemeines Block-Element (<div>...</div>)
Seite Attribut-Referenz für allgemeines Block-Element (<div>...</div>)
Seite Element-Referenz für allgemeines zentriertes Block-Element (<center>...</center>)
Seite Attribut-Referenz für allgemeines zentriertes Block-Element (<center>...</center>)
Seite Element-Referenz für allgemeines Inline-Element (<span>...</span>)
Seite Attribut-Referenz für allgemeines Inline-Element (<span>...</span>)

nach oben
weiter | Seite Trennlinien
zurück | Seite Physische Auszeichnungen im Text
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Trennlinien

SELFHTML

Trennlinien
Informationsseite

nach unten Trennlinien definieren
nach unten Trennlinien mit HTML gestalten
nach unten Trennlinien mit CSS gestalten
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 2.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Trennlinien definieren

Trennlinien dienen der optischen Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten oder allgemein zur Auflockerung. Eine Trennlinie erzeugt einen eigenen Absatz.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trennlinien definieren</title>
</head>
<body>

<p>Hier ist ein Abschnitt zu Ende.</p>
<hr>
<p>Und hier beginnt etwas Neues.</p>

</body>
</html>

Erläuterung:

<hr> fügt eine Trennlinie ein (hr = horizontal rule = Querlinie). Dabei ist es egal, ob das Tag am Ende der Zeile des vorherigen Absatzes steht, oder in einer eigenen Zeile (wie im Beispiel), oder am Anfang des folgenden Absatzes.

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das hr-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <hr />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 3.2 deprecated (missbilligt) XHTML 1.0 Netscape 1.1 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Trennlinien mit HTML gestalten

Mit Hilfe diverser HTML-Attribute im <hr>-Tag können Sie eine Trennlinie auffälliger gestalten. Diese Attribute sind allerdings allesamt als deprecated eingestuft und sollen künftig aus dem HTML-Standard entfallen. Empfohlen wird die Gestaltung von Trennlinien mit CSS.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Trennlinien mit HTML gestalten</title>
</head>
<body>

<p>Hier ist ein Abschnitt zu Ende.</p>
<hr noshade width="300" size="3" align="left">
<p>Hier beginnt etwas Neues.</p>

</body>
</html>

Erläuterung:

Durch das Attribut noshade erreichen Sie, dass der Browser die Trennlinie massiv und durchgezogen, also nicht-schattiert anzeigt (noshade = unschattiert). Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das Attribut in der Form noshade="noshade" notieren, da XML-basierte Sprachen keine Attribute ohne Wertzuweisung erlauben.
Weitere Informationen dazu im Kapitel Kapitel XHTML und HTML.

Durch das Attribut width (width = Breite) erreichen Sie, dass der Browser die Trennlinie so breit anzeigt wie angegeben. Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 300, erzwingen Sie, dass die Trennlinie so viel Pixel breit dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, dass die Trennlinie maximal so viel Breite des Anzeigefensters einnimmt wie angegeben. Für eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein Prozentzeichen (%).

Durch das Attribut size (size = Größe) können Sie die Höhe (Dicke) der Trennlinie bestimmen. Die Voreinstellung beträgt 2 Punkt. Mit dem Wert 1 erzwingen Sie also eine besonders dünne Trennlinie, mit Werten über 2 können Sie dickere als die normalen Trennlinien erzeugen.

Mit align="left" erreichen Sie, dass die Trennlinie linksbündig ausgerichtet wird (align = Ausrichtung, left = links). Mit align="right" wird die Trennlinie rechtsbündig ausgerichtet (right = rechts) und mit align="center" zentriert (Voreinstellung). Das Ausrichten von Trennlinien ist allerdings nur in Verbindung mit dem Attribut width sinnvoll, da die Trennlinie ansonsten stets über die gesamte verfügbare Breite geht.

Der Internet Explorer interpretiert darüber hinaus noch das Attribut color. Erlaubt ist dabei eine Seite Farbangabe. Dieses Attribut hat jedoch nie zum HTML-Standard gehört.

HTML 4.0 XHTML 1.0 Netscape 6.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Trennlinien mit CSS gestalten

Das <hr>-Tag können Sie auch mit CSS gestalten. Das ist strikt HTML-Standard-konform und Sie haben noch deutlich mehr Gestaltungsmöglichkeiten als mit HTML-Attributen.
Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:

Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Rahmen
Seite Positionierung und Anzeige von Elementen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trennlinien mit CSS gestalten</title>
</head>
<body>

<p>Hier ist ein Abschnitt zu Ende.</p>

<hr style="width:300px; color:yellow; background-color:yellow; height:5px;
  margin-right:0; text-align:right; border:1px dashed blue;">

<p>Hier beginnt etwas Neues.</p>

</body>
</html>

Erläuterung:

Das hr-Element erhält im Beispiel eine Breite von 300 Pixeln, eine Höhe von 5 Pixeln, wird rechtsbündig ausgerichtet (mittels margin-right:0 und text-align:right für Browser, die ersteres nicht umsetzen), wird in gelber Farbe dargestellt (mittels color und background-color) und erhält noch einen gestrichelten blauen Rahmen drumherum.

Beachten Sie:

Internet Explorer 5.0 stellt den Rahmen nicht dar.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie genaue Angaben darüber, wo Trennlinien vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Trennlinien
Seite Attribut-Referenz für Trennlinien

nach oben
weiter | Seite Ältere Elemente zur Schriftformatierung
zurück | Seite Allgemeine Elemente für Textbereiche
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Ältere Elemente zur Schriftformatierung

SELFHTML

Ältere Elemente zur Schriftformatierung
Informationsseite

nach unten Schriftart, Schriftgröße und Schriftfarbe
nach unten CSS-Entsprechungen
nach unten Weitere Informationen
nach unten

HTML 3.2 HTML 4.0 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Schriftart, Schriftgröße und Schriftfarbe

Die hier beschriebenen HTML-Elemente sind als deprecated eingestuft, das heißt, sie sollen in Zukunft aus dem HTML-Standard entfernt werden. Da es sich bei diesen Elementen um die schlimmste "Verunreinigung" von HTML als reiner Struktursprache handelt, die bisher passiert ist, gibt es richtige Kampfschriften und Hetzkampagnen gegen die weitere Verwendung dieser Elemente im Web. Diese Elemente stellten eine Notlösung in jener Zeit dar, als HTML noch keine Formatiersprache wie CSS zur Seite stand.

Im Hinblick auf die Rückwärtskompatibilität zu Netscape 3.x kann der Gebrauch der hier beschriebenen Elemente noch nicht grundsätzlich verdammt werden. Aber bevor Sie auf Style-Angaben verzichten, verzichten Sie mittlerweile lieber auf die hier beschriebenen Elemente und benutzen Sie die nach unten CSS-Entsprechungen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Schriftart, Schriftgr&ouml;&szlig;e und Schriftfarbe</title>
</head>
<body>

<p>
  <font size="7">Ziemlich riesiger Text</font><br>
  <font size="1">Ziemlich winziger Text</font><br>
  <font size="+1">Text etwas gr&ouml;&szlig;er als normal</font><br>
  <font size="-2">Text deutlich kleiner als normal</font>
</p>

<p>
  <font color="#FF0000">Knallroter Text</font><br>
  <font color="#00C000">Gr&uuml;ner Text</font><br>
  <font color="#0000FF">Blauer Text</font>
</p>

<p>
  <font face="Avalon,Wide Latin">Das ist Text in Schriftart Avalon,
  oder, falls Avalon nicht darstellbar, in Wide Latin</font>
</p>

<basefont size="2" color="#CC00CC" face="Verdana">

<h2>Da komme was wolle</h2>
<p>Alles kleiner als normal, lila und in Schriftart Verdana</p>

</body>
</html>

Erläuterung:

<font>...</font> definieren Sie einen Bereich für Schriftformatierung. Das Element darf selber nur Seite Inline-Elemente enthalten, keine Seite Block-Elemente. Wenn Sie also beispielsweise Textabsätze damit auszeichnen wollen, müssen Sie das font-Element jedesmal innerhalb von <p>...</p> notieren. Die Browser sehen es zwar nicht so eng, wenn Sie es schlampiger verwenden, aber dann ist es nicht mehr HTML-Standard-konform.

Durch Attribute im einleitenden <font>-Tag können Sie Schrift formatieren.

size bestimmt die Schriftgröße (font size = Schriftgröße). Sie können den Wert in Zahlen zwischen 1 und 7 angeben, oder relativ im Verhältnis zur Normalschriftgröße mit +Zahl bzw. -Zahl. Die Normalschriftgröße ist 3. Mit </font> beenden Sie den Abschnitt mit anderer Schriftgröße. Bei den Angaben zu <font size=...> handelt es sich um relative Werte. Wenn der Anwender eine 12-Punkt-Schrift eingestellt hat, hat beispielsweise <font size="5"> eine andere Wirkung, als wenn der Anwender eine 9-Punkt-Schrift eingestellt hat. Die Schriftgröße, die Sie mit <font size="..."> bestimmen können, ist auch relativ zu der Schriftgröße des Absatztyps.

<font color="..."> bestimmt die Schriftfarbe (font color = Schriftfarbe). Erlaubt ist eine Seite Farbangabe.

<font face="..."> bestimmt die Schriftart (font face = Schriftart). Als Wert können Sie die Namen einer oder mehrerer Schriftarten zuweisen. Wenn Sie mehrere Schriftarten angeben, trennen Sie die Schriftartnamen durch Kommata. Bei mehreren angegebenen Schriftarten versucht der WWW-Browser zuerst, den Text in der ersten angegebenen Schriftart darzustellen (im Beispiel in Avalon). Wenn diese Schrift beim Anwender nicht installiert ist, wird versucht, die zweite angegebene Schrift (im Beispiel Wide Latin) zu nehmen. Wenn keine der angegebenen Schriftarten beim Anwender darstellbar ist, bleibt die Angabe wirkungslos, d.h. der Text wird in der vom Anwender eingestellten Schrift angezeigt. Verwenden Sie exakte Schriftartnamen. Unter MS-Windows können Sie eingestellte Schriftarten und ihre genauen Namen beispielsweise über die Systemsteuerung ermitteln.

Das zweite Element zur Schriftformatierung ist das basefont-Element. Es ist ein alleinstehendes Tag und bewirkt, dass die darin definierten Formatierungen für alle weiteren Elemente in der Datei gelten, solange, bis ein neues basefont-Element notiert ist, oder bis zum Ende des Dokuments. Attribute und Werte sind die gleichen wie beim font-Element.

Beachten Sie:

Das font-Element ist HTML 3.2, basefont dagegen HTML 4.0

Im einleitenden <font>-Tag können Sie ebenso wie im <basefont>-Tag mehrere Attribute notieren, also size, color und face mischen.

Firefox 1.0, Konqueror und Safari interpretieren <basefont> nicht.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das basefont-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <basefont ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 4.0 XHTML 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 CSS-Entsprechungen

Mit Kapitel Stylesheets können Sie alle Block- und Inline-Elemente nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang die CSS-Eigenschaften: zur Seite Schriftformatierung.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Schriftart, Schriftgr&ouml;&szlig;e und Schriftfarbe - CSS-Entsprechungen</title>
</head>
<body>

<p>
  <span style="font-size:250%">Ziemlich riesiger Text</span><br>
  <span style="font-size:50%">Ziemlich winziger Text</span><br>
  <span style="font-size:1.2em">Text etwas gr&ouml;&szlig;er als normal</span><br>
  <span style="font-size:1em">Text, der der gew&uuml;nschten Einstellung des Besuchers entspricht</span><br>
  <span style="font-size:0.8em">Text deutlich kleiner als normal</span>
</p>

<p>
  <span style="color:#FF0000">Knallroter Text</span><br>
  <span style="color:#00C000">Gr&uuml;ner Text</span><br>
  <span style="color:#0000FF">Blauer Text</span>
</p>

<p>
  <span style="font-family:Avalon,Wide Latin">Das ist Text in Schriftart Avalon,
  oder, falls Avalon nicht darstellbar, in Wide Latin</span>
</p>

<div style="font-size:70%; color:#CC00CC; font-family:Verdana">
  <h2>Da komme was wolle</h2>
  <p>Alles kleiner als normal, lila und in Schriftart Verdana</p>
</div>

</body>
</html>

Erläuterung:

Das Beispiel bewirkt in etwa die gleiche Ausgabe wie das Beispiel zuvor, jedoch ohne die Elemente font und basefont. Für die CSS-Schriftformatierungen innerhalb der Textabsätze wird das Seite allgemeine Inline-Element span eingesetzt. Anstelle des alleinstehenden <basefont>-Tags wird der restliche Abschnitt in ein Seite allgemeine Block-Element div eingeschlossen, das die CSS-Formatierungen zugewiesen bekommt.

Beachten Sie:

Konqueror 3.1 interpretiert <font size=...> nur dann, wenn die Schrift vergrößert wird.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie genaue Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für das font-Element
Seite Attribut-Referenz für das font-Element
Seite Element-Referenz für das basefont-Element
Seite Attribut-Referenz für das basefont-Element

nach oben
weiter | Seite Ältere browser-proprietäre Elemente
zurück | Seite Trennlinien
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Ältere browser-proprietäre Elemente

SELFHTML

Ältere browser-proprietäre Elemente
Informationsseite

nach unten Lauftext - Marquee (Microsoft)
nach unten Mehrspaltiger Textfluss (Netscape)
nach unten Raumschaffer (Netscape)
nach unten Blinkender Text (Netscape)
nach unten

MS IE 2.0 Netscape 7.0 Opera 7.20 Mozilla Firefox 1 Konqueror 3.3 Safari 1.2 Lauftext - Marquee (Microsoft)

Sie können erreichen, dass ein Text mitten im übrigen Text automatisch horizontal scrollt, so wie in dem von Windows bekannten Bildschirmschoner "Marquee". Diese Angaben gehören nicht zum HTML-Standard und wurden ursprünglich nur vom Internet Explorer interpretiert. Mittlerweile setzen auch andere Browser das marquee-Element um.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Lauftext</title>
</head>
<body>

<marquee scrollamount="50" scrolldelay="5">
  <b>Dieser Text wird ziemlich schnell bewegt</b>
</marquee>

<marquee behavior="alternate">
  <b>Dieser Text wird hin und her bewegt</b>
</marquee>

</body>
</html>

Erläuterung:

Mit <marquee> leiten Sie den zu scrollenden Inhalt ein. Dahinter folgt der Inhalt, der gescrollt werden soll. Am Ende notieren Sie ein abschließendes </marquee>.

Mit direction="right" im einleitenden Tag erzwingen Sie die Laufrichtung von links nach rechts (direction = Richtung, right = rechts). Mit direction="left" stellen Sie die Laufrichtung auf rechts nach links (Voreinstellung). Mit direction="up" stellen Sie die Laufrichtung von unten nach oben und mit direction="down" von oben nach unten.

Durch das Attribut scrollamount bestimmen Sie die Pixelanzahl zwischen den Scroll-Zuständen. Mit scrolldelay legen Sie die Verzögerung zwischen zwei Scroll-Zuständen in Millisekunden fest (amount = Zustand, delay = Verzögerung).

Mit behavior="alternate" erzwingen Sie den Wechseleffekt (behavior = Verhalten, alternate = wechselnd).

Durch das Attribut bgcolor erzwingen Sie, dass der gescrollte Text in einem andersfarbigen Rahmen erscheint (bgcolor = background color = Hintergrundfarbe). Für die Farbauswahl gelten die Regeln zum Seite Definieren von Farben in HTML.

Mit align="top" erreichen Sie, dass der umgebende Text obenbündig zu dem Marquee-Text ausgerichtet wird. Mit align="middle" wird der umgebende Text mittig ausgerichtet, mit align="bottom" untenbündig (align = Ausrichtung, top = oben, middle = mittig, bottom = unten).

Mit height bestimmen Sie die Höhe des Marquee-Bereichs (height = Höhe). Diese Angabe ist vor allem interessant, wenn Sie für den Marquee-Bereich eine eigene Hintergrundfarbe bestimmen. Mit der Höhe des Marquee-Bereichs legen Sie dann die Höhe des andersfarbigen Kastens fest, in dem der Marquee-Text gescrollt wird. Die Angabe erfolgt entweder absolut in Pixeln, oder in Prozent relativ zur Höhe des Anzeigefensters.

Mit hspace bestimmen Sie den Abstand zwischen Marquee-Text und dem Text davor bzw. dahinter (hspace = horizontal space = horizontaler Abstand). Dieses Attribut ist nur von Bedeutung, wenn Sie den Marquee-Bereich mitten im Text definieren. Der Wert erfolgt in Pixeln. Der angegebene Abstand gilt sowohl für den Text davor als auch für den Text dahinter.

Beachten Sie:

Es gibt mehrere Alternativen zum marquee-Element. Eine davon ist, mit Hilfe von Kapitel Dynamischem HTML einen Lauftext-Effekt zu programmieren. Eine andere ist, so etwas mit Java oder Flash zu tun. Sie können ein Beispiel-Seite Beispiel mit Java aufrufen und ZIP-Datei Beispiel mit Java downloaden. In jedem Fall sollten Sie bedenken, dass zappeliger Text vom restlichen Inhalt ablenkt und bei übertriebener Verwendung sehr schnell störend wirkt.

Netscape 3.0 Mehrspaltiger Textfluss (Netscape)

Netscape unterstützt in den Versionen 3.x und 4.x (nicht mehr in 6.x!) eine Methode, mehrspaltigen Fließtext im Zeitungsstil in HTML zu realisieren. Dieses Feature gehört jedoch nicht zum HTML-Standard.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus ( Beispiel-Seite Quelle zum Beispieltext)

<html>
<head>
<title>Mehrspaltiger Text</title>
</head>
<body>

<multicol cols="3" gutter="10">
  <p>Lesen des folgenden Textes ... usw.</p>
</multicol>

</body>
</html>

Erläuterung:

Mit <multicol> leiten Sie einen mehrspaltigen Abschnitt ein (multicol = multiple columns = mehrere Spalten). Zwingend erforderlich ist das Attribut cols, mit dem Sie die Anzahl der gewünschten Spalten festlegen. Daran anschließend können beliebige andere Elemente folgen. Mit </multicol> wird der mehrspaltige Abschnitt beendet.

Alles, was zwischen dem einleitenden Tag <multicol> und dem abschließenden </multicol> steht, wird automatisch so verteilt, dass es sich optimal über die angegebene Anzahl Spalten erstreckt. Bei Bildern, Java-Applets usw. kann es allerdings zu unschönen Anzeigen kommen. Denn anders als bei Tabellen richtet sich die Breite einer Spalte nicht nach dem breitesten Inhalt, sondern nach der rechnerischen Spaltenbreite. Das kann dazu führen, dass Grafiken, die breiter sind als die Spalte, in die Nachbarspalte hineinreichen und sich mit dem dort stehenden Inhalt überlappen.

Mit dem Attribut width können Sie die Gesamtbreite der Spalten beeinflussen. Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 500, erzwingen Sie, dass alle Spalten zusammengenommen so viel Pixel breit sind wie angegeben. Mit einem Prozentwert erreichen Sie, dass alle Spalten zusammengenommen maximal so viel Breite des Anzeigefensters einnehmen wie angegeben. Für eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein Prozentzeichen.

Mit dem Attribut gutter können Sie den Abstand zwischen den Spalten vergrößern oder verkleinern. Die Voreinstellung ist ein Abstand von 10 Pixeln. Mit einem höheren Wert erreichen Sie einen größeren Spaltenabstand, mit einem niedrigeren Wert einen geringeren Spaltenabstand.

Beachten Sie:

Eine Alternative zu diesem HTML-Element gibt es derzeit nicht. In CSS war mehrspaltiger Textfluss einmal vorgesehen, wurde dann jedoch wieder verworfen und wird erst in künftigen Spezifikationen voraussichtlich wieder zu finden sein. Mehrere Spalten nebeneinander können Sie durch Kapitel Tabellen ohne sichtbaren Rahmen erzwingen. Dabei bricht jedoch der Text nicht automatisch zwischen den Spalten um.

Netscape 3.0 Raumschaffer (Netscape)

Ein HTML-Element, das von Netscape 3.x und 4.x (nicht mehr 6.x!) interpretiert wird, erlaubt es, horizontale und vertikale Leerräume zu schaffen. Dadurch lassen sich beispielsweise Absatzabstände vergrößern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Raumschaffer (Netscape)</title>
</head>
<body>

<p>Wer nichts wagt, kann nichts verlieren.</p>
<spacer type="vertical" size="50">
<p>Wer sich nicht sicher ist, kann sich nicht irren.</p>

</body>
</html>

Erläuterung:

Mit <spacer> leiten Sie einen Zwischenraum ein (spacer = Raumschaffer). Notieren Sie das Tag genau an der Stelle, wo Sie den Zwischenraum wünschen. Mit type="vertical" geben Sie an, dass es ein vertikaler Zwischenraum sein soll, wie es für Absatzabstände erforderlich ist. Mit type="horizontal" können Sie auch horizontale Abstände erzeugen. Mit dem Attribut size bestimmen Sie die Größe des Abstands. Die Angabe erfolgt in Pixeln (size=Größe).

Durch type="block" (block = Rechteck), width (width=Breite) und height (height=Höhe) definieren Sie einen rechteckigen Leerraum. Mit width bestimmen Sie die Breite des Rechtecks, mit height die Höhe. Beide Angaben erfolgen in Pixeln. Wenn Text um das Rechteck fließen soll, sollten Sie die Ausrichtung festlegen. Mit der Angabe align="left" fließt der folgende Text rechts um das links ausgerichtete Rechteck, mit der Angabe align="right" fließt er links um das rechts ausgerichtete Rechteck.

Beachten Sie:

Für das, was dieses Element leistet, benutzt man heute Kapitel Stylesheets. Maßgeblich sind die CSS-Eigenschaften für Seite Außenrand und Abstand.

Netscape 1.1 Opera 7.20 Mozilla Firefox 1 Blinkender Text (Netscape)

Netscape führte in seinen Frühzeiten die Möglichkeit ein, Text blinken zu lassen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Blinkender Text</title>
</head>
<body>

<h1><blink>Warnung!</blink></h1>

</body>
</html>

Beachten Sie:

Blinkenden Text können Sie ganz offiziell mit der CSS-Eigenschaft Seite text-decoration erzeugen.

nach oben
weiter | Seite Aufbau einer Tabelle
zurück | Seite Ältere Elemente zur Schriftformatierung
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Elemente zur Textstrukturierung

© 2007 Seite Impressum


SELFHTML: HTML / Tabellen

SELFHTML

Tabellen
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei.
In diesem Abschnitt werden die HTML-Elemente beschrieben, mit deren Hilfe Sie Tabellen mit und ohne Gitternetzlinien in Ihre Web-Seiten einbauen können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Aufbau einer Tabelle
Seite Gestaltung einer Tabelle
Seite Zellen verbinden
Seite Tabellenbeschriftung und Tabellenausrichtung
Seite Tabellen als Mittel für Web-Seiten-Layouts
Seite Tabellen und nicht-visuelle Medien

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Tabellen / Aufbau einer Tabelle

SELFHTML

Aufbau einer Tabelle
Informationsseite

nach unten Tabellen definieren
nach unten Spalten vordefinieren
nach unten Kopf, Körper und Fuß einer Tabelle definieren
nach unten Weitere Informationen
nach unten

HTML 3.2 XHTML 1.0 MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Tabellen definieren

Sie können in HTML Tabellen definieren, um tabellarische Daten darzustellen, oder um Text und Grafik attraktiver am Bildschirm zu verteilen. Obwohl Tabellen natürlich vornehmlich zur Darstellung tabellarischer Daten geschaffen wurden, sind sie in der heutigen Praxis des Web-Designs vor allem als Grundgestaltungsmittel für Seiten-Layouts nicht mehr wegzudenken. Mehr dazu im Abschnitt Seite Tabellen als Mittel für Web-Seiten-Layouts. Puristen, die HTML so weit wie möglich von gestalterischen Aufgaben befreit sehen wollen, rümpfen darüber zwar die Nase - aber so klar sind die Grenzen zwischen Struktur und Gestaltung nicht immer. Die saubere Verteilung von Information auf einer Web-Seite ist durchaus ein Aspekt der Strukturierung, obwohl sie zugleich ein Aspekt der Gestaltung ist. Rein optisch lässt sich also grundsätzlich unterscheiden zwischen Tabellen, die Gitternetzlinien haben (für tabellarische Daten), und Tabellen ohne sichtbare Gitternetzlinien (so genannte "blinde Tabellen" für mehrspaltigen Text oder für Verteilung von Inhalten auf einer Web-Seite).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aufbau einer Tabelle</title>
</head>
<body>

<h1>Tabelle mit Gitternetzlinien</h1>

<table border="1">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

<h1>Tabelle ohne Gitternetzlinien (blinde Tabelle)</h1>

<table border="0">
  <tr>
    <td><h2>ARQ</h2></td>
    <td><p>Automatic Repeat Request. Eine allgemeine Bezeichnung
    f&uuml;r Fehlerprotokolle, die &Uuml;bertragungsfehler erkennt und
    defekte Bl&ouml;cke selbst&auml;ndig wiederholt</p></td>
  </tr>
  <tr>
    <td><h2>HDLC</h2></td>
    <td><p>High Level Data Link Control. Ein Standard-Protokoll, das
    von der Kommission f&uuml;r internationale Standards f&uuml;r
    Softwareanwendungen in synchronen Anlagen verwendet wird.</p></td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Die folgende Grafik zeigt die Wirkung der HTML-Elemente, die eine Tabelle erzeugen:

Aufbau einer Tabelle

<table> leitet eine Tabelle ein (table = Tabelle). Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, müssen Sie im einleitenden <table>-Tag das Attribut border notieren und ihm einen Wert größer 0 zuweisen. Der angegebene Wert ist dann die Breite des Rahmens in Pixeln. Um eine blinde Tabelle ohne sichtbaren Rahmen und Gitternetzlinien zu erzeugen, lassen Sie die Angabe zu border entweder weg, oder - was sauberer ist - Sie notieren border="0".

<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag </tr> notiert.

Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten. Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet). <th> leitet eine Kopfzelle ein, <td> eine normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert. Obwohl die zugehörigen End-Tags </th> bzw. </td> offiziell optional sind, ist dringend zu empfehlen, sie immer und in jedem Fall zu notieren.

In einer Tabellenzelle können beliebige Elemente stehen, d.h. außer normalem Text z.B. auch andere Block- und Inline-Elemente. Sogar eine weitere Tabelle können Sie innerhalb einer Zelle definieren.

Beachten Sie:

Die Anzahl der Zellen sollte bei jeder Zeile gleich sein, sodass die Tabelle durchweg die gleiche Anzahl Spalten pro Zeile hat. In der ersten Zeile, die Sie definieren, legen Sie deshalb durch die Anzahl der dort definierten Zellen die Anzahl der Spalten Ihrer Tabelle fest.

Tabellenzellen dürfen auch leer sein. Wenn Sie in einer Zeile für eine Spalte keine Daten eingeben wollen, notieren Sie ein einfaches <td></td>. Beachten Sie dabei jedoch, dass viele Web-Browser die Zelle in diesem Fall als "nicht vorhanden" darstellt. Probieren Sie deshalb auch mal die Notation <td>&#160;</td> für leere Tabellenzellen aus.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Spalten vordefinieren

Die Darstellung einer Tabelle ergibt sich zwar automatisch aus den definierten Zeilen und Spalten. Doch für einen Web-Browser ist es nicht ganz einfach, die Darstellung frühzeitig zu ermitteln. Er muss erst die gesamte Tabelle einlesen, bevor er irgendetwas davon darstellen kann. Bei großen Tabellen kann das zu unschönen leeren Bildschirminhalten während des Seitenaufbaus führen.

HTML 4.0 bietet eine Syntax an, um dem Browser gleich zu Beginn der Tabelle mitzuteilen, wie viele Spalten die Tabelle hat, und wie breit diese sind. Dadurch kann der Browser die Tabelle schneller aufbauen, d.h. bereits Teile der Tabelle anzeigen, bevor die gesamte Tabelle eingelesen ist. Ältere Browser ignorieren diese Angaben allerdings. Netscape-Browser können erst ab Version 6 korrekt mit den Beispielen umgehen. Beispielschema 3 wird vom Internetexplorer nicht korrekt verarbeitet.

Beispielschema 1:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<table border="1">
  <colgroup>
    <col width="80">
    <col width="100">
    <col width="320">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

Beispielschema 2:

<table border="1">
  <colgroup width="200" span="3"></colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

Beispielschema 3:

<table border="1" width="100%">
  <colgroup>
    <col width="4*">
    <col width="2*">
    <col width="1*">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

Erläuterung:

Mit <colgroup> leiten Sie hinter dem einleitenden <table>-Tag eine Vorab-Definition der Tabellenspalten ein (colgroup = column group = Spaltengruppe). Dabei haben Sie zwei Möglichkeiten: entweder Sie möchten unterschiedlich breite Tabellenspalten haben. Dann gehen Sie so vor wie im obigen Beispielschema 1. Oder Sie haben eine Tabelle, in der alle Spalten die gleiche einheitliche Breite haben sollen. Dann können Sie so vorgehen wie im obigen Beispielschema 2.

Im Beispielschema 1 enthält das <colgroup>-Tag keine weiteren Attribute. Dafür notieren Sie im Anschluss an <colgroup> für jede einzelne gewünschte Tabellenspalte je ein <col>-Tag. Das erste <col>-Tag definiert die erste Spalte, das zweite die zweite Spalte usw. Wenn Sie keine weiteren Angaben machen, wird die Breite der Spalten automatisch aufgrund des Tabelleninhalts ermittelt. Mit width [Pixel/Prozent] können Sie jedoch eine Spaltenbreite für die einzelnen Spalten vorgeben (width = Breite). Mit width="100" erzwingen Sie beispielsweise eine Spaltenbreite von 100 Pixeln, und mit width=33% eine Breite von einem Drittel der Breite der Gesamttabelle.

Im Beispielschema 2 werden keine <col>-Tags notiert. Stattdessen notieren Sie im einleitenden <colgroup>-Tag das Attribut span (span = spannen). Als Wert weisen Sie die Anzahl der Spalten zu, die Sie wünschen. Mit dem Attribut width können Sie in diesem Fall eine einheitliche Spaltenbreite für alle Spalten definieren.

Bei width haben Sie neben der Möglichkeit, Pixel oder Prozentwerte anzugeben, auch noch eine dritte Möglichkeit: Sie können das relative Breitenverhältnis der Spalten untereinander bestimmen, unabhängig davon, wie breit die Tabelle im Verhältnis zum Anzeigefenster ist. Eine solche Möglichkeit stellt das obige Beispielschema 3 vor. Bei Breitenangaben dieser Art weisen Sie width eine Zahl und dahinter ein Sternzeichen zu. Das Sternzeichen ist dabei nur ein Signalzeichen für den Browser, dass er die Zahlen davor nicht als Pixel interpretieren soll. Wichtig sind die Zahlen. Im obigen Beispiel 3 werden drei Spalten definiert, bei denen die relativen Zahlen 4, 2 und 1 in der Summe 7 ergeben. Damit definieren Sie eine Tabelle, bei der die erste Spalte vier Siebtel der Tabellenbreite einnimmt, die zweite Spalte zwei Siebtel, und die dritte Spalte ein Siebtel.
Zur Geltung kommt ein relatives Spaltenverhältnis aber erst, wenn Sie außerdem eine Breite für die gesamte Tabelle angeben. Im obigen Beispielschema 3 geschieht das durch die Angabe width="100%" im einleitenden <table>-Tag.

Beachten Sie:

<col>-Tags dürfen in HTML kein Abschluss-Tag haben. Das abschließende </colgroup>-Tag ist dagegen optional. In Kapitel XHTML ist das schließende <col>-Tag aber erforderlich. Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie daher das col-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <col ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

Auch das <col>-Tag darf das Attribut span erhalten. Dadurch gruppieren Sie jedoch nicht mehrere Spalten zu einer, sondern Sie geben lediglich an, dass Attribute dieser Spalte auch für die nächsten soundsoviel Spalten gelten sollen. Wenn Sie beispielsweise <col span="3" width="100"> notieren, erhalten diese und die nächsten zwei Spalten die Breite von 100 Pixeln.

Das <colgroup>-Tag darf die Attribute span und width auch dann enthalten, wenn unterhalb davon <col>-Tags definiert werden. Dabei überschreibt die Anzahl der definierten <col>-Tags jedoch die Angabe, die mit <colgroup span=> gemacht wurde, und das Attribut width innerhalb eines <col>-Tags hat Vorrang vor der Angabe width im <colgroup>-Tag.

Es ist auch erlaubt, mehrere <colgroup>-Tags zu notieren. So können Sie beispielsweise mit <colgroup width="100" span="3"> und <colgroup width="50" span="5"> hintereinander notiert insgesamt 8 Spalten für die Tabelle definieren, wobei die ersten drei Spalten eine Breite von 100 Pixeln erhalten und die nachfolgenden fünf Spalten eine Breite von 50 Pixeln.

Für die Breite der Tabellenspalten gelten die gleichen Hinweise wie beim Seite Erzwingen von Spaltenbreiten auf herkömmliche Weise.

Zu Beispielschema 2: Safari bis Version 2.0.4 vergrößert Spalten nach dem Schema width="200" span="3" nicht.

Zu Beispielschema 3: Internet Explorer, Opera, Konqueror und Safari interpretieren relative Angaben nach dem Schema width="4*" nicht. Diese Möglichkeit beschränkt sich daher auf Mozilla Firefox.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Kopf, Körper und Fuß einer Tabelle definieren

Sie können eine Tabelle logisch in Bereiche aufteilen: einen Kopfbereich, einen oder mehrere Datenbereiche und einen Fußbereich. Interessant ist dies zum Beispiel in Verbindung mit der Möglichkeit, Seite Regeln für Gitternetzlinien zu bestimmen. Beim Ausdruck langer Tabellen sollte der Browser Tabellenkopf und Tabellenfuß auf jeder Seite wiederholen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kopf, K&ouml;rper und Fu&szlig; einer Tabelle definieren</title>
</head>
<body>

<h1>Betroffene Menschen</h1>

<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Erläuterung:

Den Tabellenkopf leiten Sie mit <thead> ein (thead = table head = Tabellenkopf). Daran anschließend können Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Kopfbereich gehören sollen. Mit </thead> schließen Sie den Tabellenkopf ab (das End-Tag ist bei allen Elementen für Tabellenkopf, Tabellenfuß und Tabellenkörper optional, aber dringend zu empfehlen).

Wenn Sie einen Tabellenfuß notieren möchten, müssen Sie diesen vor den Tabellenkörper-Elementen notieren. Den Tabellenfuß leiten Sie mit <tfoot> ein (tfoot = table foot = Tabellenfuß). Daran anschließend können Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Fußbereich gehören sollen. Mit </tfoot> schließen Sie den Tabellenfuß ab.

Einen Tabellenkörper leiten Sie mit <tbody> ein (tbody = table body = Tabellenkörper). Daran anschließend notieren Sie den Datenbereich mit einer oder mehreren Tabellenzeilen. Mit </tbody> schließen Sie den Tabellenkörper ab.

Beachten Sie:

Die Aufteilung einer Tabelle mittels thead, tfoot und tbody ist freiwillig. Wenn Sie kein solches Element angeben, gelten alle Zeilen der Tabelle als Tabellenkörper. Falls Sie jedoch mit den Elementen arbeiten, müssen Sie die Reihenfolge thead → tfoot → tbody beachten. Die Elemente thead und tfoot dürfen pro Tabelle nur einmal vorkommen, das tbody-Element einmal oder beliebig oft. In vielen Fällen ist die Aufteilung in thead und einen oder mehrere tbody sinnvoll. Auf diese Weise können Sie bequem inhaltlich zusammenhängende Tabellezeilen gruppieren, zum Beispiel um deren Zellen später mit Seite Stylesheets unterschiedlich zu formatieren.

Weitere Informationen

Alle hier vorgestellten Elemente können Kapitel Universalattribute enthalten.

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die hier vorgestellten HTML-Elemente vorkommen dürfen, welche anderen Elemente sie enthalten dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz und Seite Attribut-Referenz für Tabellen (<table>...</table>)
Seite Element-Referenz und Seite Attribut-Referenz für Tabellenzeilen (<tr>...</tr>)
Seite Element-Referenz und Seite Attribut-Referenz für Kopfzellen (<th>...</th>)
Seite Element-Referenz und Seite Attribut-Referenz für Datenzellen (<td>...</td>)
Seite Element-Referenz und Seite Attribut-Referenz für Spaltengruppen (<colgroup>...</colgroup>)
Seite Element-Referenz und Seite Attribut-Referenz für Spalten (<col>)
Seite Element-Referenz und Seite Attribut-Referenz für Tabellenkopf (<thead>...</thead>)
Seite Element-Referenz und Seite Attribut-Referenz für Tabellenfuß (<tfoot>...</tfoot>)
Seite Element-Referenz und Seite Attribut-Referenz für Tabellenkörper (<tbody>...</tbody>)

nach oben
weiter | Seite Gestaltung einer Tabelle
zurück | Seite Ältere browser-proprietäre Elemente
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Tabellen

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Tabellen / Gestaltung einer Tabelle

SELFHTML

Gestaltung einer Tabelle
Informationsseite

nach unten Zellenabstand und Zelleninnenabstand
nach unten Regeln für den Außenrahmen
nach unten Regeln für Gitternetzlinien
nach unten Breiten- und Höhenangaben
nach unten Zeilenumbruch in Zellen verhindern
nach unten Ausrichtung von Zellen
nach unten Hintergrundfarben und Hintergrundbilder
nach unten Farben für Rand und Gitternetzlinien (Microsoft)
nach unten Tabellen mit CSS gestalten
nach unten Weitere Informationen

nach unten

HTML 3.2 XHTML 1.0 MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zellenabstand und Zelleninnenabstand

Sie können den Abstand zwischen den Zeilen und Spalten einer Tabelle in Pixeln bestimmen. Ferner können Sie den Abstand zwischen Zellenrand und Zelleninhalt bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zellenabstand und Zelleninnenabstand in Tabellen</title>
</head>
<body>

<h1>Weit auseinander</h1>

<table border="8" cellspacing="10" cellpadding="20">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Die folgende Grafik zeigt die Wirkungsweise der Attribute im einleitenden <table>-Tag:

cellspacing und cellpadding

Mit cellpadding bestimmen Sie den Innenabstand einer Zelle, also den Abstand zwischen Zellenrand und Zelleninhalt in Pixeln (cellpadding = Zelleninnenabstand). Mit cellspacing bestimmen Sie den Abstand der Zellen untereinander in Pixeln (cellspacing = Zellenabstand). Wenn Sie mit border einen sichtbaren Rahmen und sichtbare Gitternetzlinien in der Tabelle erzeugen, ist die Wirkungsweise von cellpadding und cellspacing besser nachvollziehbar. Bei blinden Tabellen erzeugen beide Attribute optisch gesehen einfach nur "Abstand".

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 7.20 Mozilla Firefox 1 Safari WebKit (Entwicklerversion) Regeln für den Außenrahmen

Wenn Sie mit border einen sichtbaren Tabellenrahmen erzeugen, erhalten automatisch alle Seiten einen Rahmen. Sie können aber auch genau bestimmen, welche Seiten eines Außenrahmens angezeigt werden und welche nicht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Regeln f&uuml;r den Au&szlig;enrahmen bei Tabellen</title>
</head>
<body>

<h1>Rahmenvereinbarung</h1>

<table border="3" frame="void">
  <tr>
    <td><b>Assoziation 1</b></td>
    <td><b>Assoziation 2</b></td>
    <td><b>Assoziation 3</b></td>
  </tr>
  <tr>
    <td>Berlin</td>
    <td>Hamburg</td>
    <td>M&uuml;nchen</td>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Voraussetzung für all diese Angaben ist das Attribut border im einleitenden <table>-Tag. Dadurch wird ein Außenrahmen angezeigt.

Mit dem Attribut frame können Sie dann bestimmen, an welchen Seiten der Tabellenrahmen gezogen werden soll (frame = Rahmen).

Mit frame="box" (box = Rechteck) erreichen Sie, dass der Tabellenrahmen oben, links, rechts und unten sichtbar dargestellt wird (die Angabe ist identisch mit dem, was die Angabe border bewirkt - auch frame="border" ist erlaubt und bewirkt das Gleiche).
Folgende andere Angaben sind möglich:
Mit frame="void" (void = nichts) wird überhaupt kein Tabellenrahmen angezeigt. Wenn Sie border angeben, werden jedoch die Gitternetzlinien der Tabelle sichtbar angezeigt. Die Tabelle sieht dann also aus wie ein an allen Seiten offenes Gitter (das obige Beispiel benutzt diese Variante).
Mit frame="above" (above = oberhalb) wird nur am oberen Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="below" (below = unterhalb) wird nur am unteren Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="hsides" (hsides = horizontal sides = horizontale Seiten) wird nur am oberen und am unteren Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="vsides" (vsides = vertical sides = vertikale Seiten) wird nur am linken und am rechten Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="lhs" (lhs = left hand side = links) wird nur am linken Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="rhs" (rhs = right hand side = rechts) wird nur am rechten Rand der Tabelle eine Rahmenlinie angezeigt.

Beachten Sie:

Netscape 4.x und Konqueror interpretieren diese Angaben noch nicht.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 7.20 Mozilla Firefox 1 Regeln für Gitternetzlinien

Sie können Regeln aufstellen, welche Gitternetzlinien einer Tabelle angezeigt werden sollen und welche nicht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Regeln f&uuml;r Gitternetzlinien bei Tabellen</title>
</head>
<body>

<h1>Gruppendynamik</h1>

<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr>
    <tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr>
    <tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Erläuterung:

Voraussetzung für all diese Angaben ist das Attribut border im einleitenden <table>-Tag. Dadurch werden Gitternetzlinien angezeigt.

Mit rules können Sie im einleitenden <table>-Tag Regeln für die Gitternetzlinien bestimmen (rules = Regeln).

Folgende Angaben sind dabei möglich:
Mit rules="none" (none = keine) werden überhaupt keine Linien gezogen, der Außenrahmen der Tabelle wird jedoch angezeigt.
Mit rules="rows" (rows = Reihen) werden Linien zwischen allen Tabellenzeilen gezogen, nicht jedoch zwischen den Spalten der Tabelle.
Mit rules="cols" (cols = columns = Spalten) werden Linien zwischen allen Tabellenspalten gezogen, nicht jedoch zwischen den Zeilen der Tabelle.
Mit rules="groups" (groups = Gruppen) werden Linien zwischen Kopf, Körper und Fuß einer Tabelle gezogen (siehe Seite Kopf, Körper und Fuß einer Tabelle definieren - das obige Beispiel verwendet diese Angabe).
Mit rules="all" (all = alle) werden Linien zwischen allen Tabellenzellen gezogen (Voreinstellung).

Beachten Sie:

Netscape 4.x, Konqueror und Safari interpretieren diese Angaben noch nicht.

Breiten- und Höhenangaben

Sie können für die gesamte Tabelle, sowie für einzelne Spalten und Zeilen geeignete Angaben zu Breite und Höhe notieren. Dadurch schaffen Sie "Raum".

Breitenangaben werden durch das Attribut width notiert, Höhenangaben durch das Attribut height (width = Breite, height = Höhe). Bei allen Angaben sind absolute Zahlenangaben erlaubt, die Breite bzw. Höhe als Anzahl Pixel bestimmen, sowie prozentuale Angaben, die am Ende ein Prozentzeichen (%) haben.

Die einzige von allen Angaben, die nach der HTML-Variante Strict erlaubt ist, ist die Gesamtbreite der Tabelle. Andere Angaben sind als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Solche Angaben sind auch mit Hilfe von Stylesheets möglich. Und schließlich gibt es auch noch Angaben, die zwar von einigen Browsern interpretiert werden, aber nicht mal zum HTML-Standard in der Variante Transitional gehören. Die folgende Tabelle listet auf, welche Angaben möglich sind, und welchen Status die Angabe in Bezug auf HTML-Standard und Browser-Kompatibilität hat.

Angabe (Notation) | Status | Bedeutung
<table width="..."> | MS IE 2.0 Mozilla Firefox 1 | Bestimmt die Breite der gesamten Tabelle in Bezug auf den verfügbaren Raum im Elternelement. Das Elternelement kann das "Dokument" sein, also das body-Element, oder auch ein anderes Element, innerhalb dessen eine Tabelle vorkommen kann, z.B. ein div-Element oder eine Tabellenzelle einer äußeren Tabelle.
<table height="..."> | MS IE 2.0 Mozilla Firefox 1 | Bestimmt die Höhe der gesamten Tabelle in Bezug auf das Anzeigefenster. Diese Angabe wird zwar von den Browsern schon lange unterstützt und wird in der Praxis häufig benutzt, gehörte jedoch nie zum HTML-Standard.
<th width="..."> oder <td width="..."> | MS IE 2.0 Mozilla Firefox 1 | Bestimmt die Breite einer Tabellenzelle und damit die Breite aller Zellen der gleichen Spalte. Als deprecated eingestuft. Ersetzbar durch CSS-Notationen wie <th style="width:100px">. Solche Angaben werden allerdings nur von neueren Browsern interpretiert.
<th height=> oder <td height=> | MS IE 2.0 Mozilla Firefox 1 | Bestimmt die Höhe einer Tabellenzelle und damit die Höhe aller Zellen der gleichen Tabellenzeile. Als deprecated eingestuft. Ersetzbar durch CSS-Notationen wie <td style="height:100px">. Solche Angaben werden allerdings nur von neueren Browsern interpretiert.

Einige Browser interpretieren darüber hinaus weitere Angaben wie <tr height=>. Solche Angaben sind allesamt nicht HTML-Standard-konform und sollten nicht mehr verwendet werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Breiten- und H&ouml;henangaben bei Tabellen</title>
</head>
<body>

<h1>Breit und hoch mit HTML</h1>

<table border="1" width="60%">
  <tr>
    <td width="50%" height="100">Berlin</td>
    <td>Hamburg</td>
    <td>M&uuml;nchen</td>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

<h1>Breit und hoch mit CSS</h1>

<table border="1" style="width:60%">
  <tr>
    <td style="width:50%; height:100px">Berlin</td>
    <td>Hamburg</td>
    <td>M&uuml;nchen</td>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Im Beispiel wird zweimal die gleiche Tabelle notiert - im ersten Fall kommen die HTML-Attribute width und height an erlaubten Stellen zum Einsatz - nach der HTML-Variante Transitional. Die zweite Tabelle benutzt entsprechende CSS-Eigenschaften zur Angabe von Breite und Höhe und genügt damit auch den Anforderungen an die HTML-Variante Strict. Interpretiert wird die zweite Tabelle allerdings erst vom Internet Explorer ab Version 4.x und von Netscape ab Version 6.

Beachten Sie:

Die Angaben zu Breite und Höhe sind nur wirksam, wenn der Tabellen- bzw. Zelleninhalt kleiner ist, sodass leerer Raum entsteht. Wenn der Tabelleninhalt größer ist, werden die Angaben zu Breite und Höhe außer Kraft gesetzt. Die Tabelle bzw. Zelle (und mit ihr Spalte und Zeile) werden dann so dimensioniert, dass der gesamte Inhalt angezeigt wird. Einige Browser - z.B. Netscape bis einschließlich Version 4.x - setzen Angaben zu Breite und Höhe allerdings leider je nach Tabelleninhalt stärker außer Kraft als es nötig wäre.

Da die Angabe zu width in einer Tabellenzelle spaltenweit gilt, brauchen Sie sie nur einmal pro Spalte zu notieren. Am sinnvollsten ist es, die Angabe in der ersten Zeile der Tabelle zu notieren. Ebenso ist es mit der Angabe zu height in einer Tabellenzelle. Da diese Angabe für die ganze zugehörige Tabellenzeile gilt, ist es am sinnvollsten, sie in der ersten Zelle der Zeile zu notieren. Im obigen Beispiel wird durch <td width="50%" height="100"> in der ersten Zelle also sowohl die Breite der ersten Spalte als auch die Höhe der ersten Zeile definiert.

Verwenden Sie Pixelangaben und Prozentangaben immer so, dass keine Konflikte entstehen. Im obigen Beispiel werden etwa alle Breiten prozentual bestimmt, und nur die Höhe wird mit Pixeln festgelegt. So kann der Browser im Beispiel für die gesamte Tabelle eine Breite von 60% Prozent zum Elternelement ermitteln und für die erste Spalte wiederum 50% davon. Die Angabe von 100 Pixeln Zeilenhöhe kommt damit nicht in Konflikt.

Eine übersichtlichere Lösung, die Breite von Tabellenspalten zu definieren, steht mit der Möglichkeit zur Verfügung, Seite Spalten vorzudefinieren. Die hier beschriebene Möglichkeit hat dagegen den Vorteil, auch von älteren Browsern interpretiert zu werden.

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 3.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zeilenumbruch in Zellen verhindern

Sie können festlegen, dass beim Inhalt einer Zelle kein automatischer Zeilenumbruch erfolgen darf. Die Spalte der Tabelle wird bei der Anzeige entsprechend breit dimensioniert. Das entsprechende Attribut ist jedoch als deprecated eingestuft und soll künftig aus dem HTML-Standard entfallen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Zeilenumbruch in Tabellenzellen verhindern</title>
</head>
<body>

<h1>Lange N&auml;chte</h1>

<table border="1">
  <tr>
    <td nowrap>
    Die langen HTML-N&auml;chte von Berlin sind die l&auml;ngsten N&auml;chte &uuml;berhaupt.
    Die langen CSS-N&auml;chte von Berlin sind ebenfalls die l&auml;ngsten N&auml;chte und sogar
    noch l&auml;nger als die HTML-N&auml;chte.
    </td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Mit dem Attribut nowrap (ohne weitere Wertzuweisung) in einem einleitenden <th>- oder <td>-Tag verhindern Sie, dass der Text innerhalb der Zelle automatisch umbrochen wird. Die Zelle und damit ihre gesamte zugehörige Spalte wird so breit wie erforderlich.

Die entsprechende Eigenschaft in CSS lautet Seite white-space. Diese wird jedoch erst ab Internet Explorer 5.5 und Netscape 6 interpretiert.

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das nowrap-Attribut in der Form nowrap="nowrap" notieren.
Weitere Informationen dazu im Kapitel Kapitel XHTML und HTML.

HTML 3.2 XHTML 1.0 MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Ausrichtung von Zellen

Zelleninhalte von Tabellen können aufgrund unterschiedlicher Inhalte oder durch Angaben zu Breite und Höhe mehr Raum in Anspruch nehmen, als es ihr Inhalt erfordert. Für diesen Fall können Sie Zelleninhalte sowohl horizontal (linksbündig, zentriert, rechtsbündig) als auch vertikal (obenbündig, mittig, untenbündig) am Zellenrand ausrichten. Die entsprechenden Angaben sind sowohl auf einzelne Zellen (also th- und td-Elemente) anwendbar, als auch auf Tabellenbereiche wie Tabellenzeilen (tr), Tabellenkopf (thead), Tabellenkörper (tbody) und Tabellenfuß (tfoot). In diesem Fall gelten die Angaben für alle Zellen des jeweiligen Bereichs.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ausrichtung von Zelleninhalten</title>
</head>
<body>

<h1>Richtungsweisend</h1>

<table border="1">
  <tr>
    <th align="left"   valign="top" width="200" height="75">links oben</th>
    <th align="center" valign="top" width="200">zentriert oben</th>
    <th align="right"  valign="top" width="200">rechts oben</th>
  </tr>
  <tr>
    <td align="left"   valign="middle" height="75">links mittig</td>
    <td align="center" valign="middle">zentriert mittig</td>
    <td align="right"  valign="middle">rechts mittig </td>
  </tr>
  <tr>
    <td align="left"   valign="bottom" height="75">links unten</td>
    <td align="center" valign="bottom">zentriert unten</td>
    <td align="right"  valign="bottom">rechts unten</td>
  </tr>
  <tr align="center" valign="middle">
    <td height="75">alles ...</td>
    <td>... zentriert ...</td>
    <td>... mittig</td>
  </tr>
</table>

<h2>Auch am Dezimalzeichen?</h2>

<table border="1">
  <colgroup>
    <col>
    <col align="char" char=",">
  </colgroup>
  <tr>
    <th>Element</th>
    <th>Anteil in mg</th>
  </tr>
  <tr>
    <td>Nitrat</td>
    <td>0,117126</td>
  </tr>
  <tr>
    <td>Hydrogencarbonat</td>
    <td>330,0</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Mit align="left" können Sie eine Kopfzelle in ihrem einleitenden <th>-Tag linksbündig ausrichten, mit align="right" rechtsbündig. Datenzellen können Sie in ihrem einleitenden <td>-Tag mit align="center" zentriert ausrichten und durch align="right" rechtsbündig. Die Angaben align="center" bei Kopfzellen und align="left" bei Datenzellen sind natürlich auch erlaubt, bewirken aber lediglich die Voreinstellung und sind deshalb nicht nötig (align = Ausrichtung, left = links, center = zentriert, right = rechts). Diese Angaben können Sie auch in einleitenden <tr>-Tags, einleitenden <thead>-Tags, einleitenden <tbody>-Tags und <tfoot>-Tags notieren. Dann werden alle Zellen im entsprechenden Bereich so ausgerichtet wie angegeben. Widersprechende Angaben in einzelnen Zellen haben allerdings Vorrang vor bereichsweiten Angaben. Ab HTML 4.0 ist auch die Angabe align="justify" erlaubt. Dadurch erzwingen Sie einen Blocksatz innerhalb der Zelle.

Mit valign="top" können Sie eine Zelle in ihrem einleitenden Tag obenbündig ausrichten, durch die Angabe valign="bottom" untenbündig. Auch die Angabe valign="middle" (nicht "center"!) ist möglich. Dies ist jedoch die Voreinstellung und deshalb nicht unbedingt nötig (valign = vertical align = vertikale Ausrichtung, top = oben, bottom = unten, middle = mittig). Auch das valign-Attribut können Sie in einleitenden <tr>-Tags, einleitenden <thead>-Tags, einleitenden <tbody>-Tags und <tfoot>-Tags notieren. Ab HTML 4.0 ist auch die Angabe valign="baseline" erlaubt. Dann werden alle Zellen innerhalb einer Zeile, die diese Angaben erhalten, an einer gemeinsamen Basislinie ausgerichtet. Und zwar so, dass die erste Textzeile aller dieser Zellen immer auf gleicher Höhe beginnt.

Ferner ist seit HTML 4.0 die Angabe align="char" in Verbindung mit den Attributen char und charoff erlaubt. Mit align="char" können Sie erzwingen, dass die Spalteninhalte an einem Dezimalzeichen ausgerichtet werden. Außerdem benötigen Sie noch das Attribut char (char = character = Zeichen). Diesem weisen Sie als Wert ein Zeichen zu, das Sie als Dezimalzeichen verwenden. Die Ausrichtung erfolgt dann so, dass das Dezimalzeichen immer an der gleichen Stelle steht. Neben dem Attribut char zur Bestimmung des Dezimalzeichens können Sie zusätzlich noch das Attribut charoff angeben (charoff = character offset = Zeichenposition). Damit können Sie angeben, an welcher Position das Zeichen frühestens vorkommen kann. Im obigen Beispiel wird ein Komma als Dezimalzeichen definiert. Die Werte der betreffenden - im Beispiel Seite vordefinierten Spalten - werden dann so ausgerichtet, dass das Dezimalzeichen immer an der gleichen Stelle steht. Die HTML-Spezifikation gibt jedoch an, dass die Unterstützung der Dezimalzeichenausrichtung durch Browser freiwillig ist. Und tatsächlich interpretiert auch keiner der weit verbreiteten Browser diese Angaben.

HTML 4.0 XHTML 1.0 MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Hintergrundfarben und Hintergrundbilder

Sie können sowohl für eine gesamte Tabelle als auch für einzelne Zeilen oder Zellen eine Hintergrundfarbe definieren. Die verbreiteten Web-Browser unterstützen auch die Angabe von Hintergrundbildern mit Wallpaper-Effekt, doch diese Angaben gehörten nie zum HTML-Standard. Auch die Angaben zur Hintergrundfarbe sind als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Sowohl das Definieren von Hintergrundfarben als auch das von Hintergrundbildern ist mit Stylesheets möglich.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hintergrundfarben und Hintergrundbilder</title>
</head>
<body text="#000099">

<h1>Gro&szlig;e Worte mit HTML</h1>

<table border="1" bgcolor="#FFFF00">
  <tr>
    <td width="200" height="100"><h2>Traum</h2></td>
    <td width="200" bgcolor="#00FFFF"><h2>Zeit</h2></td>
    <td width="200"><h2>Luft</h2></td>
  </tr>
  <tr bgcolor="#FF00FF">
    <td height="100"><h2>Licht</h2></td>
    <td><h2>Himmel</h2></td>
    <td><h2>Leben</h2></td>
  </tr>
</table>

<h1>Gro&szlig;e Worte mit CSS</h1>

<table border="1" style="background-color:#FFFF00">
  <tr>
    <td width="200" height="100"><h2>Traum</h2></td>
    <td width="200" style="background-color:#00FFFF"><h2>Zeit</h2></td>
    <td width="200"><h2>Luft</h2></td>
  </tr>
  <tr style="background-color:#FF00FF">
    <td height="100"><h2>Licht</h2></td>
    <td><h2>Himmel</h2></td>
    <td style="background-image:url(background.jpg)"><h2>Leben</h2></td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Durch das Attribut bgcolor im einleitenden Tag der Tabelle können Sie eine Hintergrundfarbe für die gesamte Tabelle bestimmen (bgcolor = background-color = Hintergrundfarbe). Beim Angeben der Farbe gelten die Regeln zum Seite Definieren von Farben in HTML. Ebenso können Sie das Attribut bgcolor im einleitenden Tag einer Tabellenzeile (<tr>) notieren, um die Hintergrundfarbe für alle Zellen in dieser Zeile zu bestimmen. Wenn Sie bgcolor im einleitenden Tag einer Datenzelle (<td>) oder einer Kopfzelle (<th>) angeben, gilt die Hintergrundfarbe für diese eine Zelle. Im Konfliktfall hat die Farbangabe in einzelnen Zellen Vorrang vor der Angabe für ganze Zeilen oder Tabellen. Die Angabe für eine Zeile hat im Konfliktfall Vorrang vor der Angabe für die ganze Tabelle.

Das Gleiche ist mit dem Attribut background möglich, um eine Hintergrundgrafik für die Tabelle oder einzelne Zellen einzubinden. Dieses Attribut ist jedoch im Zusammenhang mit Tabellen nicht HTML-Standard-konform und kommt im obigen Beispiel auch nicht vor. Die zweite im Beispiel notierte Tabelle zeigt, wie es HTML-Standard-konform gemacht wird. Dagegen spricht eigentlich nur noch die Existenz von Netscape 4.x, der keine CSS-Angaben bei Tabellen interpretiert.
Im obigen Beispiel wird angenommen, dass sich die Grafik background.jpg im gleichen Verzeichnis befindet. Sie können jedoch auch Grafiken aus anderen Verzeichnissen (z.B. /daten/grafik/hintergrund/background.gif oder ../gif/back.gif) oder von entfernten URIs (z.B. http://www.mein-anderer-server.de/grafik/back.jpg) angeben.

Beachten Sie:

Wenn Sie eine Hintergrundfarbe definieren oder eine Hintergrundgrafik einbinden, sollten Sie für den Text eine geeignete Kontrastfarbe definieren.

MS IE 3.0 Netscape 4.0 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Farben für Rand und Gitternetzlinien (Microsoft)

Sie können auch für Rahmen und Gitternetzlinien Farbangaben machen. Diese Angaben sind jedoch Microsoft-Syntax und gehören nicht zum HTML-Standard. Benutzen Sie stattdessen nach unten CSS zur Gestaltung der Rahmen.

Durch das Attribut bordercolor im einleitenden <table>-Tag der Tabelle können Sie eine einheitliche Farbe für den Tabellenrahmen und die Gitternetzlinien bestimmen (bordercolor = Randfarbe).

Anstelle der einfachen Rahmenfarbe können Sie auch einen Schattier-Effekt in den Rahmen bringen, indem Sie zwei verschiedene Farben definieren - eine dunklere und eine hellere. Dazu notieren Sie im einleitenden Tag der Tabelle die beiden Attribute bordercolordark (bordercolordark = dunkle Randfarbe) und bordercolorlight (bordercolorlight = helle Randfarbe).

Netscape, Firefox, Konqueror und Safari interpretieren nur das Attribut bordercolor.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Tabellen mit CSS gestalten

Gerade bei Tabellen sind Kapitel Stylesheets eine große Hilfe zur Gestaltung. Denn mit CSS können Sie alle Elemente einer Tabelle nach Wunsch formatieren - sei es einzeln oder gruppenweise. Dazu kommen ausgereifte CSS-Eigenschaften für Tabellenrahmen. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite Tabellenformatierung
Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder
Seite Positionierung und Anzeige von Elementen

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, welche der hier beschriebenen Attribute wo genau vorkommen können:
Seite Attribut-Referenz für Tabellen (<table>...</table>)
Seite Attribut-Referenz für Tabellenzeilen (<tr>...</tr>)
Seite Attribut-Referenz für Kopfzellen (<th>...</th>)
Seite Attribut-Referenz für Datenzellen (<td>...</td>)
Seite Attribut-Referenz für Tabellenkopf (<thead>...</thead>)
Seite Attribut-Referenz für Tabellenkörper (<tbody>...</tbody>)
Seite Attribut-Referenz für Tabellenfuß (<tfoot>...</tfoot>)

nach oben
weiter | Seite Zellen verbinden
zurück | Seite Aufbau einer Tabelle
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Tabellen

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Tabellen / Zellen verbinden

SELFHTML

Zellen verbinden
Informationsseite

nach unten Zellen in einer Zeile spaltenweise verbinden
nach unten Zellen in einer Spalte zeilenweise verbinden
nach unten Zellen spalten- und zeilenweise zugleich verbinden
nach unten

HTML 3.2 XHTML 1.0 MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zellen in einer Zeile spaltenweise verbinden

Sie können mehrere Zellen innerhalb einer Zeile verbinden, sodass sich eine Spalte in dieser Zeile über mehrere Spalten hinweg erstreckt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zellen in einer Zeile spaltenweise verbinden</title>
</head>
<body>

<h1>Zoologie</h1>

<table border="1">
  <tr>
    <th colspan="2">Die Menschheit besteht aus</th>
  </tr>
  <tr>
    <td>Eseln</td>
    <td>Affen</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Durch das Attribut colspan [Anzahl Spalten] erreichen Sie, dass sich eine Zelle über mehrere Spalten hinweg erstreckt (colspan = column span = Spalten spannen). Die Angabe ist nur wirksam, wenn die Tabelle mindestens so viele Spalten besitzt wie angegeben.

Beachten Sie:

Wenn Sie in einer Tabellenzeile eine Zelle beispielsweise über vier Spalten hinweg "spannen", sollten Sie in den anderen Zeilen der Tabelle anstelle dieser einen Zelle vier eigene Zellen definieren. Die Summe der Zellen sollte in jeder Zeile der Tabelle gleich sein.

HTML 3.2 XHTML 1.0 MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zellen in einer Spalte zeilenweise verbinden

Sie können mehrere Zellen in einer Spalte verbinden, sodass sich eine Zeile in dieser Spalte über mehrere Zeilen hinweg erstreckt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zellen in einer Spalte zeilenweise verbinden</title>
</head>
<body>

<h1>Zoologie (II)</h1>

<table border="1">
  <tr>
    <th rowspan="2">Die Eselheit besteht aus</th>
    <td>echten Eseln</td>
  </tr>
  <tr>
    <td>verkappten Eseln (Menschen)</td>
  </tr>
  <tr>
    <th rowspan="2">Die Affenheit besteht aus</th>
    <td>echten Affen</td>
  </tr>
  <tr>
    <td>verkappten Affen (Menschen)</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Durch das Attribut rowspan [Anzahl Zeilen] erreichen Sie, dass sich eine Zelle in einer Spalte über mehrere Zeilen hinweg erstreckt (rowspan = Zeilen spannen). Die Angabe ist nur wirksam, wenn die Tabelle mindestens so viele Zeilen besitzt wie angegeben.

Beachten Sie:

Wenn Sie in einer Tabellenzeile eine Zelle beispielsweise über vier Zeilen hinweg "spannen", sollten Sie in der gleichen Zeile den Inhalt der ersten danebenstehenden Zelle definieren. In den drei folgenden Zeilen sollten Sie an gleicher Stelle die drei übrigen Zellen definieren, die neben der gestreckten Zelle stehen sollen.

HTML 3.2 XHTML 1.0 MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zellen spalten- und zeilenweise zugleich verbinden

Sie können Zellen definieren, die sich gleichzeitig über mehrere Zeilen und Spalten hinweg erstrecken.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zellen spalten- und zeilenweise zugleich verbinden</title>
</head>
<body>

<h1>Zoologie (III)</h1>

<table border="1">
  <tr>
    <th colspan="2" rowspan="2">Der Mensch ist...</th>
    <td>zum einen Teil ein Esel</td>
  </tr>
  <tr>
    <td>zum anderen Teil ein Affe</td>
  </tr>
  <tr>
    <td>weder ein richtiger Esel</td>
    <td>noch ein richtiger Affe</td>
    <td><b>menschlich, allzumenschlich</b></td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Sie können die Attribute colspan [Anzahl Spalten] und rowspan [Anzahl Zeilen] in einer Zelle kombinieren. Dadurch erreichen Sie, dass sich die Zelle über mehrere Spalten und Zeilen zugleich erstreckt.

nach oben
weiter | Seite Tabellenbeschriftung und Tabellenausrichtung
zurück | Seite Gestaltung einer Tabelle
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Tabellen

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Tabellen / Tabellenbeschriftung und Tabellenausrichtung

SELFHTML

Tabellenbeschriftung und Tabellenausrichtung
Informationsseite

nach unten Tabellenüberschrift / Tabellenunterschrift definieren
nach unten Tabellenausrichtung
nach unten Weitere Informationen
nach unten

HTML 3.2 XHTML 1.0 MS IE 2.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Tabellenüberschrift / Tabellenunterschrift definieren

Sie können für eine Tabelle eine von der Tabelle getrennte, aber ihr zugehörige Über- oder Unterschrift definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabellen&uuml;berschrift / Tabellenunterschrift definieren</title>
</head>
<body>

<table border="1">
  <caption>Assoziationen</caption>
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

<caption>...</caption> definiert eine Tabellenüberschrift. Das Element muss unmittelbar nach dem einleitenden <table>-Tag notiert werden. Es bewirkt normalen Fließtext. Um den enthaltenen Text auffällig zu gestalten, darf das caption-Element Seite Inline-Elemente als weitere Elemente enthalten. Eine andere Möglichkeit besteht darin, das caption-Element mit Stylesheets zu formatieren.

Wenn Sie nichts anderes angeben, bewirkt das caption-Element eine Tabellenüberschrift. Um eine Tabellenunterschrift zu erzwingen, können Sie <caption align="bottom"> notieren. Ferner sind die Angaben align="left" für seitliche Überschrift links und align="right" für seitliche Überschrift rechts erlaubt. Während align="bottom" von den Browsern interpretiert wird, werden align="left" und align="right" meistens nicht oder nicht korrekt unterstützt. Das Attribut align ist darüberhinaus als deprecated gekennzeichnet, soll also künftig aus dem HTML-Standard entfallen. Alternativangaben in CSS werden von den weit verbreiteten Browsern aber im Zusammenhang mit dem caption-Element bislang nicht unterstützt.

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Tabellenausrichtung

Sie können eine Tabelle links, zentriert oder rechts ausrichten. Die bekannten Browser reagieren dabei so, dass eine links oder rechts ausgerichtete Tabelle, die nicht die gesamte zur Verfügung stehende Breite beansprucht, bewirkt, dass nachfolgende Inhalte um die Tabelle herumfließen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabellenausrichtung</title>
</head>
<body>

<table border="1" align="left">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
</table>

<p>Die Tabelle sagt zwar schon eine Menge aus, aber nat&uuml;rlich
nicht alles. Deshalb sollten Sie die drei St&auml;dte lieber mal selbst
besuchen.<br clear="all"></p>
<p>Keine Zeit, kein Geld? Na, dann tun Sie's doch im Web!</p>

<table border="1" style="float:left; margin-right:10px; margin-bottom:6px">
  <tr>
    <th colspan="2">Menschen</th>
  </tr>
  <tr>
    <td>Esel</td>
    <td>Affen</td>
  </tr>
</table>

<p>Die Tabelle sagt zwar schon eine Menge aus, aber nat&uuml;rlich
nicht alles. Deshalb sollten Sie sich selbst von der Richtigkeit ihrer Aussagen
&uuml;berzeugen.</p>
<p style="clear:left">Gehen Sie einfach mal in den Zoo, gucken
Sie sich Esel und Affen an und vergleichen Sie dann selbst!</p>

</body>
</html>

Erläuterung:

Im Beispiel sind zwei Tabellen und unterhalb davon jeweils zwei Textabsätze notiert. Die obere Tabelle ist mit align="left" im einleitenden <table>-Tag linksbündig ausgerichtet. Bei Netscape und beim Internet Explorer hat das die Wirkung, dass nachfolgender Text rechts um die Tabelle fließt. Mit align="right" können Sie eine Tabelle rechtsbündig ausrichten und mit align="center" zentriert. Das align-Attribut ist jedoch als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die zweite Tabelle im obigen Beispiel zeigt daher, wie sich der gleiche Effekt mit CSS-Formaten erzielen lässt.

Bei der Variante mit den CSS-Formaten sind außerdem noch Angaben zum Abstand rechts und unten angegeben, sodass der nachfolgende Text nicht so sehr an der Tabelle "klebt". Die Browser interpretieren auch vergleichbare HTML-Attribute dafür: mit <table align="center" hspace="10" vspace="6"> erreichen Sie beispielsweise, dass zwischen Tabelle und umfließendem Text ein Horizontalabstand von 10 Pixeln und ein Vertikalabstand von 6 Pixeln erzwungen wird. Die Attribute hspace und vspace im Zusammenhang mit Tabellen gehörten jedoch nie zum HTML-Standard.

Die beiden obigen Beispiele zeigen außerdem, wie Sie den Textumfluss abbrechen und die Textfortsetzung unterhalb der Tabelle erzwingen können. In der ersten Tabelle des Beispiels, wo alles mit HTML realisiert ist, ist dazu das Tag <br clear="all"> notiert - also ein Zeilenumbruch mit einem Attribut, das für die Fortsetzung unterhalb des Umflussbereichs sorgt. Das clear-Attribut in HTML ist jedoch ebenfalls als deprecated gekennzeichnet. Der Text unterhalb der zweiten Tabelle im Beispiel zeigt, wie der gleiche Effekt mit CSS-Formaten erreichbar ist.

Beachten Sie:

Wenn die Tabelle selbst größere Inhalte hat, müssen Sie eine Seite Gesamtbreite der Tabelle erzwingen (<table width=>), damit links bzw. rechts noch Platz bleibt für den umfließenden Text.

Wenn Sie eine Tabelle zwar linksbündig oder rechtsbündig ausrichten wollen, aber zugleich verhindern wollen, dass nachfolgende Inhalte um die Tabelle fließen, dann schließen Sie die gesamte Tabelle in ein Seite allgemeines Block-Element (div) ein und richten Sie dieses mit align oder einer entsprechenden CSS-Eigenschaft (style="text-align:") aus.

Weitere Informationen

Das caption-Element kann auch Kapitel Universalattribute enthalten.

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die hier vorgestellten HTML-Elemente und Attribute vorkommen dürfen, und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz und Seite Attribut-Referenz für Tabellenüberschrift (<caption>...</caption>)
Seite Element-Referenz und Seite Attribut-Referenz für Tabellen (<table>...</table>)

nach oben
weiter | Seite Tabellen als Mittel für Web-Seiten-Layouts
zurück | Seite Zellen verbinden
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Tabellen

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Tabellen / Tabellen als Mittel für Web-Seiten-Layouts

SELFHTML

Tabellen als Mittel für Web-Seiten-Layouts
Informationsseite

nach unten Allgemeines zu Tabellen für Web-Seiten-Layouts
nach unten Beispiel eines typischen Tabellen-Layouts
nach unten

Allgemeines zu Tabellen für Web-Seiten-Layouts

Wenn Sie bei Web-Seiten auf sauber ausgerichtete, aber relativ frei verteilte Elemente mit meist farbigen Flächen stoßen, wurde in vielen Fällen mit der Technik der "blinden Tabellen" gearbeitet. Blinde Tabellen haben keine sichtbaren Gitternetzlinien. Dadurch merkt der Betrachter gar nicht, dass es sich in Wirklichkeit um eine Tabelle handelt.

Einen Nachteil sollten Sie jedoch beachten, wenn Sie beabsichtigen, den gesamten anzuzeigenden Inhalt einer Web-Seite mit Hilfe einer blinden Tabelle anzuordnen: Tabellen werden vom Web-Browser erst angezeigt, nachdem ihr kompletter Inhalt eingelesen wurde bzw. erst in dem Augenblick, wo der Web-Browser genau weiß, wie groß und wie breit die Tabelle angezeigt werden muss. Das bedeutet bei der Datenübertragung aus dem Web, dass ein Anwender am Bildschirm länger wartet, bis überhaupt etwas angezeigt wird. Es sei denn, Sie benutzen die Möglichkeit, um Seite Spalten vorzudefinieren.

Ein weiteres Problem besteht darin, dass Browser mit gewünschten Breiten- und Höhenangaben nicht unbedingt so umgehen, wie Sie es wünschen. Inhalte werden dann plötzlich gestaucht, auseinandergezogen usw. Dies hat zur Erfindung des so genannten "blinden Pixels" geführt, einer kleinen GIF-Grafik, die nur aus einer einfarbigen Fläche besteht, deren Farbe wiederum als transparent definiert ist. Zusammen mit der Möglichkeit, Seite Breite und Höhe einer Grafik in HTML unabhängig von der tatsächlichen Größe der Grafik anzugeben, lässt sich eine solche Grafik scheinbar unsichtbar und unauffällig einbauen. So lassen sich vor allem feste Mindestbreiten für einzelne Spalten einer Tabelle erzwingen, und der Browser kann die Inhalte darin nicht mehr stauchen. Diese Technik gilt einerseits als unsaubere Trickserei, ist aber andererseits Ausdruck für fehlende Formatiermöglichkeiten. Mittlerweile stellen Kapitel Stylesheets solche Möglichkeiten zwar bereit (vgl. die CSS-Eigenschaft Seite min-width), doch das nutzt nicht viel, solange die weit verbreiteten Browser noch keine Unterstützung dafür anbieten.

In diesem Abschnitt wird anhand eines Beispiels gezeigt, wie Seiten-Layouts mit blinden Tabellen im Prinzip funktionieren. Auf die Technik des blinden Pixels wird hier verzichtet. Doch eine andere, typische Technik kommt zum Einsatz: das Verschachteln von Tabellen. Denn meistens lassen sich saubere Tabellenlayouts nur erreichen, wenn man mit Tabellen innerhalb von Tabellen arbeitet.

HTML 2.0 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Beispiel eines typischen Tabellen-Layouts

Das folgende Beispiel zeigt ein Layout, wie man es auf vielen Web-Seiten findet: oben eine farbige Fläche, wo die Seitenüberschrift steht und andere Elemente wie Grafiken für Logos, Banner oder dergleichen Platz haben, unterhalb davon links eine gleichfarbige, direkt angeschlossene, schmale Fläche für Navigationsverweise innerhalb des Web-Projekts, und rechts davon eine breite Fläche für den eigentlichen Inhalt der Seite.

Das Beispiel ist gültiges HTML 4.0, benutzt aber diverse Attribute, die als deprecated gekennzeichnet sind, weshalb als HTML-Variante Transitional gewählt werden muss.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beispiel eines typischen Tabellen-Layouts</title>
</head>
<body bgcolor="#FFFFFF" link="#FFFF00" vlink="#FFCC00" alink="#FFFFFF" text="#000000">

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#A050A0">
  <colgroup>
    <col width="200">
    <col>
  </colgroup>
  <tr>
    <td colspan="2">
      <table border="0" cellpadding="10" cellspacing="0">
        <tr>
          <td><h1 style="color:#FFFFFF">Willkommen</h1></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td valign="top" width="200">
      <table border="0" cellpadding="10" cellspacing="0">
        <tr>
          <td>
            <h3 style="color:#FFFFFF">Navigation</h3>
            <p><a href="table_tr_th_td.htm">Tabelle</a><br>
            <a href="bgcolor.htm">Hintergrund</a><br>
            <a href="colspan.htm">Zellen verbinden</a><br>
            <a href="width_height.htm">Breite und Höhe</a></p>
            <h3 style="color:#FFFFFF">News</h3>
            <p style="color:#FFFFFF">Die Neuigkeiten stehen stets an dieser Stelle.
            Viel Neues gibt es nicht. Nur so viel: diese Seite ist neu.</p>
          </td>
        </tr>
      </table>
    </td>
    <td valign="top" bgcolor="#FFFFFF">
      <table border="0" cellpadding="10" cellspacing="0">
        <tr>
          <td>
            <h2>Worum geht es hier eigentlich?</h2>
            <p>Ach, um Web-Design, halt das Übliche.</p>
            <p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p>
            <p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p><p>viel Inhalt</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Das Beispiel bestimmt im einleitenden <body>-Tag zunächst dateiweite Seite Farben für Hintergrund, Text und Verweise.

Innerhalb des Dateikörpers wird die übergeordnete Tabelle definiert. Sie erhält die Attribute border="0", damit kein Rahmen und keine Gitternetzlinien angezeigt werden, sowie cellpadding="0" und cellspacing="0", damit sich die einzelnen Zellen der Tabelle nahtlos aneinanderfügen. Das ist wichtig, damit zwischen den Farbflächen keine sichtbaren Lücken entstehen.

Weil es sich um eine die ganze Seite überspannende Tabelle handelt, werden für Browser, die das verstehen, die gewünschten Spalten mit <col>-Tags vordefiniert. Die Tabelle soll zwei Spalten haben, wobei die erste eine Breite von 200 Pixeln haben soll. Das soll die Spalte für Navigationsverweise werden. Die zweite Spalte soll den Rest des verfügbaren Platzes in Anspruch nehmen. Die gesamte Tabelle soll sich über die volle verfügbare Breite erstrecken - angegeben durch width="100%" im einleitenden <table>-Tag der übergeordneten Tabelle.

Die gesamte übergeordnete Tabelle bekommt ferner mit Hilfe von bgcolor="#A050A0" einen matt-violetten Hintergrund zugewiesen. Damit erhalten erst mal alle ihre Inhalte diese Hintergrundfarbe. Um andersfarbige Flächen innerhalb der Tabelle zu erzeugen, sind bei den einzelnen Zellen weitere Angaben zur Hintergrundfarbe erforderlich, die dann diese globale Hintergrundfarbe überschreiben.

Die erste Zelle der ersten Zeile der übergeordneten Tabelle ist zugleich die einzige Zelle in dieser Zeile, da durch das Attribut colspan="2" erreicht wird, dass sich die Zelle über zwei Spalten erstreckt. Der Inhalt dieser Zelle steht nun für den Überschriftenteil zur Verfügung. Da mit cellpadding="0" und cellspacing="0" gearbeitet wird, würde der Inhalt allerdings ganz am Außenrand der Tabelle kleben, was unsauber aussieht. Deshalb kommt bereits bei der Überschrift zum ersten Mal die Technik der Tabelle in der Tabelle zum Einsatz:
<table border="0" cellpadding="10" cellspacing="0"> definiert innerhalb der über zwei Spalten gestreckten Tabellenzelle eine weitere Tabelle. Auch diese ist wiederum rahmenlos (border="0"). Durch cellpadding="10" wird jedoch ein Innenabstand von 10 Pixeln zum Zellenrand erzwungen. Diese Angabe ist der eigentliche Grund, warum die innere Tabelle definiert wird. Denn die innere Tabelle hat nur eine einzige Zeile mit einer einzigen Spalte, also nur eine Zelle, und darin ist die h1-Überschrift für die Seite notiert (Willkommen). Die Überschrift erhält mit Hilfe der CSS-Eigenschaft color: eine weiße Farbe, um sich ordentlich von dem violetten Hintergrund der Tabelle abzuheben.

In der zweiten Zeile der übergeordneten Tabelle werden für beide definierten Spalten je eine Zelle definiert. Die erste (linke) Zelle ist dann der Behälter für die gesamte linke Spalte - also für die Spalte, in der die Navigationsverweise stehen. Die zweite (rechte) Zelle ist der Behälter für den gesamten Inhalt des Hauptbereichs, also des Bereichs für den eigentlichen Seiteninhalt. Die zweite Zelle, also die für den Hauptbereich, erhält mit bgcolor="#FFFFFF" als Hintergrundfarbe weiß zugewiesen. So entsteht letztlich der optische Eindruck, als ob die Seite nur oben und links einen farbigen Balken enthalten würde, während der gesamte Rest der Seite einen weißen Hintergrund hat.

In beiden Zellen der zweiten Zeile der übergeordneten Tabelle wird auch wieder je eine innere Tabelle definiert, die mit den gleichen Attributen wie im Fall der Überschrift für saubere Abstände zum Rand sorgt. So werden auch alle Inhalte ordentlich auf einer Höhe ausgerichtet. Mit valign="top" wird in beiden Zellen dafür gesorgt, dass die Inhalte, die ja unterschiedlich groß sein können, auf jeden Fall obenbündig ausgerichtet werden.

Die Verweise in der linken Spalte heben sich durch ihre dateiweit definierten Farben gut von dem violetten Hintergrund ab. Normaler Text, der in der linken Spalte steht, also Überschriften, Textabsätze usw., erhalten im Beispiel wieder mit Hilfe von CSS eine weiße Textfarbe, um sich vom Hintergrund abzuheben.

Beachten Sie:

Sie können Stylesheets noch wesentlich konsequenter einsetzen, als es im obigen Beispiel der Fall ist. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder
Seite Positionierung und Anzeige von Elementen

nach oben
weiter | Seite Tabellen und nicht-visuelle Medien
zurück | Seite Tabellenbeschriftung und Tabellenausrichtung
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Tabellen

© 2007 Seite Impressum


Tabellen und nicht-visuelle Medien
Informationsseite

nach unten Allgemeines
nach unten Zusammenfassung des Tabelleninhalts
nach unten Kurzbeschreibung für Zellen definieren
nach unten Kopfzellen in Zellen referenzieren
nach unten Tabellen-Kategorien definieren
nach unten

Allgemeines

Die folgenden Beschreibungen sind für die Ausgabe von Tabellen auf nicht-visuellen Medien gedacht. Vor allem bei Sprachausgabesystemen, die HTML-Dateien für Sehbehinderte ausgeben, stellen Tabellen normalerweise ein Problem dar. Denn die optische Eindeutigkeit einer Tabelle am Bildschirm oder auf Papier lässt sich in einem Medium, das Daten hintereinander ausgeben muss, nicht abbilden. Was beispielsweise in der optischen Abbildung einer Tabelle durch Gitternetzlinien ganz einfach ist, ist bei der Sprachausgabe ein echtes Problem: wie soll akustisch verdeutlicht werden, wo eine Zelle beginnt und endet, und zu welcher Spalte oder Zeile sie gehört? Das W3-Konsortium hat zu diesem Zweck eine Reihe von Attributen in HTML eingeführt, die speziell solche Probleme lösen helfen sollen.

HTML 4.0 XHTML 1.0 Mozilla Firefox 1 Zusammenfassung des Tabelleninhalts

Sie können einen zusammenfassenden Kurztext für die Tabelle definieren. Ein Sprachausgabesystem könnte diesen Text als Einleitung zur Tabelle ausgeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kurzbeschreibung des Tabelleninhalts</title>
</head>
<body>

<table border="1" summary="Die folgende Tabelle ordnet St&auml;dten typische Begriffe zu.">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Mit dem Attribut summary können Sie im einleitenden <table>-Tag eine Zusammenfassung der Tabelle definieren (summary = Zusammenfassung).

Beachten Sie:

In Mozilla Firefox ist der Inhalt des summary-Attributs nach einem Klick auf die Tabelle über das Kontextmenü (Punkt Eigenschaften) zugänglich.

HTML 4.0 XHTML 1.0 Kurzbeschreibung für Zellen definieren

Sie können für einzelne Tabellenzellen eine Kurzbeschreibung im einleitenden Tag der Zelle definieren. Ein Sprachausgabesystem könnte diesen Kurztext vor dem eigentlichen Inhalt ausgeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kurzbeschreibung f&uuml;r Zellen definieren</title>
</head>
<body>

<table border="1">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td abbr="Es folgen Infos zu Berlin">Hier eine Menge Inhalt</td>
    <td abbr="Es folgen Infos zu Hamburg">Hier eine Menge Inhalt</td>
    <td abbr="Es folgen Infos zu München">Hier eine Menge Inhalt</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Mit dem Attribut abbr im einleitenden Tag einer Datenzelle (<td>) oder einer Kopfzelle (<th>) können Sie eine Kurzinformation zu der entsprechenden Zelle voranschicken (abbr = abbreviated = verkürzt).

HTML 4.0 XHTML 1.0 Kopfzellen in Zellen referenzieren

Für nicht-visuelle Ausgabemedien, etwa für Sprachausgabesysteme, können Sie bestimmen, dass bei der Ausgabe einer Datenzelle ein expliziter Bezug zu einer oder mehreren Kopfzellen hergestellt wird. Das System könnte den Inhalt der Kopfzelle(n) dann bei der Datenzelle wiederholen. Ansonsten ist es bei der Sprachausgabe sehr schwer, den Bezug zwischen einer Datenzelle und den zugehörigen Kopfzellen herzustellen, da die optische Eindeutigkeit einer Tabelle dort nicht vorhanden ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kopfzellen in Zellen referenzieren</title>
</head>
<body>

<table border="1">
  <tr>
    <th id="Stadt_1">Berlin</th>
    <th id="Stadt_2">Hamburg</th>
    <th id="Stadt_3">M&uuml;nchen</th>
  </tr>
  <tr>
    <td headers="Stadt_1">Buletten</td>
    <td headers="Stadt_2">Frikadellen</td>
    <td headers="Stadt_3">Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Um Bezüge zwischen Datenzellen und Kopfzellen nach dem obigen Beispiel herzustellen, müssen Sie für die Kopfzellen mit dem Kapitel Universalattribut id individuelle Namen vergeben (im obigen Beispiel Stadt_1, Stadt_2 und Stadt_3). Innerhalb einer Datenzelle können Sie dann mit dem Attribut headers auf Kopfzellen Bezug nehmen (headers = Kopfzellen). Im obigen Beispiel könnte ein Sprachausgabesystem durch den Bezug also etwa ausgeben: "Berlin ist gleich Bulletten".

Falls Sie eine Kreuztabelle haben, bei der zwei Kopfzellen zu einer Datenzelle gehören, können Sie hinter headers auch weitere id-Namen von Kopfzellen angeben. Trennen Sie die id-Namen durch Leerzeichen. Die Angabe hinter headers sollte in jedem Fall in Anführungszeichen stehen.

Der umgekehrte Weg - nämlich das Wiederholen der Kopfzelleninformation in jeder zugehörigen Datenzelle zu wiederholen - ist ebenfalls möglich:

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kopfzelleninformation in jeder zugehörigen Datenzelle wiederholen</title>
</head>
<body>

<table border="1">
  <tr>
    <th scope="col">Berlin</th>
    <th scope="col">Hamburg</th>
    <th scope="col">M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

</body>
</html>

Erläuterung:

Um Bezüge zwischen Datenzellen und Kopfzellen nach dem obigen Beispiel herzustellen, müssen Sie in den Kopfzellen das Attribut scope notieren (scope = Geltungsbereich). Dabei sind folgende Angaben erlaubt:
scope="col" ist für Spaltenüberschriften gedacht und bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen dieser Spalte wiederholt wird (col = Spalte).
scope="row" ist für Zeilenüberschriften (z.B. links als erste Tabellenspalte) gedacht und bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen dieser Zeile wiederholt wird (row = Zeile).
scope="colgroup" ist für Spaltenüberschriften von Spaltengruppen gedacht und bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen aller Spalten der Spaltengruppe wiederholt wird (colgroup = Spaltengruppe). Voraussetzung ist, dass Seite Spaltengruppen mit Hilfe von <colgroup> vordefiniert werden.
scope="rowgroup" ist für Spaltenüberschriften von Zeilengruppen gedacht und bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen aller Zeilen der Zeilengruppe wiederholt wird (rowgroup = Zeilengruppe). Voraussetzung ist, dass Zeilengruppen in Form von Seite Kopf, Körper, Fuß definiert werden.

HTML 4.0 XHTML 1.0 Tabellen-Kategorien definieren

Bei komplexeren Tabellen können Sie gemeinsame Kategoriennamen für Zellen vergeben. Dazu eine Grafik zur Veranschaulichung (das Beispiel stammt ursprünglich vom W3-Konsortium).

Tabelle mit Kategorien

In einem interaktiven Sprachausgabe-/Sprachbefehlssystem könnte ein Anwender zu einer solchen Tabelle etwa Fragen stellen wie solche:
wie viel habe ich insgesamt für Speisen ausgegeben?
wie viel habe ich am 13.8.1998 für Speisen ausgegeben?
wie viel habe ich in Hamburg insgesamt ausgegeben?

Um zu etwa zu entscheiden, wie viel am 13.08.1998 für Speisen ausgegeben wurden, muss der Computer wissen, welche Zellen zum Typ "Datum" gehören, und welche zum Typ "Speisen". Solche Kategoriennamen können Sie für Tabellenzellen in HTML vergeben.

Beispiel (nur Details):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<td id="a7" axis="Datum">12.08.98</td>
<td headers="a6 a7 a2">37.74</td>
<td headers="a6 a7 a3">112.00</td>
<td headers="a6 a7 a4">45.00</td>
<td></td>

Erläuterung:

Das Beispiel nur Definition einiger Kopfzellen (vergleiche Grafik weiter oben). Mit id erhalten die Zellen unterschiedliche individuelle Namen, im Beispiel a4 und a5. Das ist für die spätere nach oben Referenzierung wichtig. Ferner erhalten die Zellen aber auch noch einen gemeinsamen Kategoriennamen. Solche Kategoriennamen können Sie mit dem Attribut axis vergeben (axis = Achse).

Durch die Kategoriennamen hat ein elektronisches System alle Informationen, um Fragen von der Art "wie viel habe ich am Datum=13.8.98 für Ausgaben=Speisen ausgegeben?" zu beantworten.

nach oben
weiter | Seite Verweise definieren und gestalten
zurück | Seite Tabellen als Mittel für Web-Seiten-Layouts
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Tabellen

© 2007 Seite Impressum


SELFHTML: HTML / Verweise (Links)

SELFHTML

Verweise (Links)
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei und zum Seite Referenzieren in HTML.
In diesem Abschnitt wird beschrieben, wie Sie die Seiten Ihres Web-Projekts untereinander verlinken, und wie Sie Verweise auf andere Quellen im Internet definieren können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Verweise definieren und gestalten
Seite Projekt-interne Verweise
Seite Projekt-externe Verweise
Seite E-Mail-Verweise
Seite Download-Verweise und Verweise auf beliebige Dateien
Seite Typisierte Verweise
Seite Tabulator-Reihenfolge und Tastaturkürzel für Verweise

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Verweise (Links) / Verweise definieren und gestalten

SELFHTML

Verweise definieren und gestalten
Informationsseite

nach unten Allgemeines zu Verweisen
nach unten Beispiele für Verweise
nach unten Verweise optisch gestalten mit CSS
nach unten Zielfenster für Verweise bestimmen
nach unten

Allgemeines zu Verweisen

Verweise sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der "intelligente Mehrwert" des World Wide Web.

Mit Hilfe von Verweisen strukturieren Sie Ihr Projekt. Wenn Sie beispielsweise eine HTML-Datei mit einer Projekt-Einstiegsseite und verschiedene HTML-Dateien für Themenseiten planen, brauchen Sie in der Einstiegsseite Verweise zu allen Themenseiten und in jeder Themenseite einen Rücksprungverweis zur Einstiegsseite. Erst dadurch wird aus der losen Dateisammlung ein zusammenhängendes Web-Projekt, eine Homepage. In komplexeren Projekten wie dem vorliegenden Dokument finden Sie auch Verweise mit bestimmter Bedeutung - Verweise zu übergeordneten oder untergeordneten Ebenen, Verweise zum Blättern, Verweise zum Wechseln zwischen Beschreibungen und Anzeigebeispielen, Querverweise, Verweise zu anderen Web-Adressen usw.

Alle Verweise in HTML haben den gleichen Aufbau. Das vereinfacht die Syntax, hat aber auch Nachteile: es gibt nämlich keine Verweise für bestimmte Aufgaben. Mittlerweile gibt es zwar auch Attribute für solche Zwecke, aber in der Praxis ist es Ihnen überlassen, wie Sie zum Beispiel Verweise so gestalten, dass dem Anwender klar wird, ob es sich um einen Rückverweis zur Einstiegsseite, um einen Querverweis zu einem assoziativ verwandten Thema, oder etwa um einen Verweis zu einer ganz anderen Web-Adresse handelt.

Wichtig ist in allen Fällen ein aussagekräftiger Verweistext.
Schlecht ist: zurück (wohin eigentlich?)
Besser ist: zurück zur Einstiegsseite (ah ja!)

Verweise lenken die Aufmerksamkeit des Anwenders sofort auf sich. Wenn Sie Verweise mitten im Text notieren, sollten Sie als Verweistext inhaltlich beschreibende Wörter anbieten, keine Wörter ohne Inhalt
Schlecht ist: Für weitere Information klicken Sie hier (worum geht es "hier" eigentlich?)
Gut ist: Weitere Information können Sie ebenfalls aufrufen (ah ja!)

Bei komplexeren Projekten sollten Sie sich überlegen, wie Sie dem Anwender die Vielzahl der Verweise mit unterschiedlicher Bedeutung intuitiv zugänglich machen. Ein sinnvoller Weg ist, den Verweisen kleine Symbolgrafiken voranzustellen, so wie es im vorliegenden Dokument auch der Fall ist (siehe auch Seite Grafiken einbinden). Durch aussagekräftige Symbole können Sie dem Anwender sofort signalisieren, um welche Art von Verweis es sich handelt. Die Symbolgrafiken sollten jedoch in der Höhe nicht größer sein als normaler Fließtext - normalerweise etwa 10-12 Pixel. Auch Seite Grafiken als Verweise tragen häufig zu einer besseren Verweiskennzeichnung bei.

Zu wenige Verweise erschweren das Navigieren in einem Projekt und zeugen von wenig Kreativität beim Anbieter des Projekts. Zu viele Verweise verwirren den Anwender und können ein "Lost-in-Hyperspace-Gefühl" erzeugen - auch das wirft kein gutes Licht auf den Projektanbieter. Setzen Sie deshalb alle Verweise, die zum bequemen Navigieren nötig sind, und denken Sie auch an Querverweise sowie an sinnvolle Verweise zu anderen WWW-Adressen. Übertreiben Sie die Querverweistechnik aber nicht.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Beispiele für Verweise

Alle Verweise in HTML haben einen einheitlichen Aufbau, egal ob sie zu einem Verweisziel in der gleichen Datei, zu einer anderen Datei im eigenen Projekt, zu einer beliebigen WWW-Adresse oder zu einer beliebigen Datei eines anderen Dateityps im Internet oder lokal auf dem eigenen Rechner führen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Beispiele für Verweise</title>
</head>
<body>

<h1>Eine kleine Verweissammlung</h1>

<p>
  <a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten<br>
  <a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrichten<br>
  <a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br>
  <a href="http://www.oneworld.net/section/current">OneWorld News</a> Nachrichten (en)
</p>

<p>
  <a href="/">Wohin der wohl f&uuml;hren mag?</a><br>
  <a href="./">Und der hier?</a>
</p>

</body>
</html>

Erläuterung:

Für Verweise in HTML gibt es das a-Element (a = anchor = Anker). Damit jedoch ein Verweis aus diesem Element wird, ist das Attribut href erforderlich (href = hyper reference = Hyper(text)-Referenz). Als Wert an das href-Attribut weisen Sie das gewünschte Verweisziel zu. Als Inhalt des a-Elements, also zwischen <a> und </a>, notieren Sie den Text, der dem Anwender als Verweis angeboten wird (bei den meisten Web-Browsern andersfarbig, meist unterstrichen).

Im obigen Beispiel führen die ersten vier Verweise zu anderen Web-Angeboten. Die letzten beiden Verweise führen zu "lokalen" Zielen. Um die Syntax möglicher Verweisziele zu verstehen, müssen Sie sich mit dem Seite Referenzieren in HTML vertraut machen.

Beachten Sie:

Als Inhalt des a-Elements, also bei Verweisen der Verweistext, ist nicht nur reiner Text erlaubt. Sie können im Verweistext auch andere Seite Inline-Elemente notieren. Unter anderem können Sie anstelle von Text auch eine Grafik referenzieren und auf diese Weise Seite Grafiken als Verweise fungieren lassen, was in der Praxis des Web-Designs recht häufig vorkommt.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verweise optisch gestalten mit CSS

Wenn Sie nichts anderes angeben, erhalten Verweise bei der Darstellung die im Browser voreingestellten Farben, z.B. blau für Verweise zu noch nicht besuchten Seiten und violett für Verweise zu bereits besuchten Seiten. Um dateiweit eigene Verweisfarben zu bestimmen, können Sie die Attribute verwenden, die im Abschnitt Seite Farben für Text und Verweise beschrieben werden. Darüber hinaus gibt es aber die Möglichkeit, Verweise mit Hilfe von CSS individueller zu gestalten. Unter anderem ist es auch möglich, die meist voreingestellte Unterstreichung des Verweistextes zu unterdrücken.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Verweise gestalten mit CSS</title>
<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#e00000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#ff0; }
a:active { text-decoration:none; font-weight:bold; background-color:#cff; }
a:focus { text-decoration:none; font-weight:bold; background-color:#080; }
</style>
</head>
<body>

<h1>Eine kleine Verweissammlung</h1>

<p>
  <a href="http://www.tagesschau.de/">ARD Tagesschau</a> Nachrichten<br>
  <a href="http://www.heise.de/newsticker/">Heise Newsticker</a> Computer-Nachrichten<br>
  <a href="http://de.news.yahoo.com/">Yahoo Nachrichtenticker</a> Nachrichten<br>
  <a href="http://www.oneworld.net/section/current">OneWorld News</a> Nachrichten (en)
</p>

<p>
  <a href="/" style="color:green">Wohin der wohl f&uuml;hren mag?</a><br>
  <a href="./" style="color:green">Und der hier?</a>
</p>

</body>
</html>

Erläuterung:

Das Beispiel arbeitet konsequent mit Stylesheets. Dazu ist im Dateikopf der HTML-Datei ein eigener zentraler Bereich zum Definieren von CSS-Formaten notiert (<style>...</style>). Näheres dazu im CSS-Kapitel im Abschnitt Seite Zentrale Formate definieren. Der vielfache Wunsch von Web-Designern, die Unterstreichung des Verweistextes zu unterdrücken, wird durch die CSS-Angabe text-decoration:none erzielt (text-decoration:underline würde übrigens die Voreinstellung, also unterstrichenen Verweistext bewirken). Weitere im Beispiel verwendete Formatdefinitionen sind font-weight:bold (fette Schrift) sowie Angaben zur Farbe (color:) und zur Hintergrundfarbe (background-color:). Die entsprechenden CSS-Eigenschaften werden in den Abschnitten über Seite Schriftformatierung und Seite Hintergrundfarben und -bilder beschrieben.

Was im obigen Beispiel auffällt, ist, dass für insgesamt fünf "Verweistypen" CSS-Formate definiert werden. Mit a:link sind Verweise zu noch nicht besuchten Seiten gemeint, mit a:visited Verweise zu bereits besuchten Seiten, mit a:hover Verweise, während der Anwender mit der Maus über den Verweistext fährt, mit a:active Verweise, während sie angeklickt werden und mit a:focus Verweise, wenn diese mit der Tastatur angesprungen werden. Weitere Einzelheiten dazu werden im Abschnitt Seite :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise) beschrieben.

Die beiden letzten Verweise im obigen Beispiel werden individuell formatiert. Sie übernehmen die zentral definierten CSS-Formate, erhalten aber zusätzlich eine eigene Verweistextfarbe zugewiesen. Dazu wird im einleitenden <a>-Tag das Attribut style notiert.

HTML 4.0 XHTML 1.0 deprecated (missbilligt) MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zielfenster für Verweise bestimmen

Per Voreinstellung werden alle Verweise im aktuellen Fenster geöffnet. Es sei denn, Sie haben in den Kopfdaten der HTML-Datei eine Seite Zielfensterbasis angegeben und dort etwas anderes bestimmt. Bei einzelnen Verweisen können Sie jedenfalls unabhängig davon entscheiden, ob ein Verweisziel im aktuellen Browser-Fenster ausgegeben werden soll, oder ob ein neues Fenster dafür geöffnet werden soll. Bei Verweisen zu fremden Web-Angeboten kann es beispielsweise sinnvoll sein, das Verweisziel in einem neuen Fenster zu öffnen. So braucht der Anwender das eigene Web-Angebot nicht zu verlassen, sondern bekommt das andere Angebot einfach in einem neuen Fenster angezeigt. Die Seite Ihres Angebots mit dem Verweis bleibt in einem Fenster im Hintergrund erhalten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Zielfenster für Verweise bestimmen</title>
</head>
<body>

<h1>SELFHTML aktuell</h1>

<p>immer wieder neu:
  <a href="http://aktuell.de.selfhtml.org/" target="_blank">SELFHTML aktuell</a>
</p>

</body>
</html>

Erläuterung:

Mit dem Attribut target im einleitenden <a>-Tag können Sie ein Zielfenster für den Verweis festlegen. Der im Wert zugewiesene Name muss mit einem Buchstaben (A-Z, a-z) beginnen, außer in den folgenden Ausnahmen, die durch einen führenden Unterstrich gekennzeichnet sind:

_blank, um den Verweis in einem neuen Fenster zu öffnen,
_self, um den Verweis im aktuellen Fenster zu öffnen,
_parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um bei verschachtelten Framesets alle Framesets zu sprengen.

Bei Kapitel Frames geben Sie hier einen Fensternamen an, der im Frameset definiert ist. Einzelheiten zur Definition von Zielfenstern bei Verwendung von Frames finden Sie im Abschnitt Seite Verweise zu anderen Frames und zum Sprengen von Framesets.

Beachten Sie:

Sie können mit dieser Methode lediglich auf eine Datei verweisen. Sollen mit einem Klick auf einen Link gleich mehrere Dateien geladen werden, dann ist dafür Kapitel JavaScript notwendig. Im Anwendungsbeispiel wird erklärt, wie Sie hiermit Seite zwei Frames gleichzeitig ändern können; um eine Navigation auch ohne JavaScript zu ermöglichen, sollte stattdessen auf ein neues, angepasstes Frameset mit target="_top" verwiesen werden.

Das target-Attribut ist zwar nicht als deprecated gekennzeichnet, doch um es einzusetzen, müssen Sie die HTML-Variante Transitional verwenden. Der Grund ist, dass dieses Attribut vorwiegend für Verweise bei Verwendung von Frames gedacht ist und Frames eine eigene HTML-Variante haben, die von der Einstufung her der Variante Transitional entspricht.

Viele Anwender verwenden statt target="_blank" irgendeinen nicht existenten Framenamen oder sogar unzulässig target="_new", um einen Verweis in einem neuen Fenster zu öffnen. Das erzielt nicht den gewünschten Effekt, da das neue Fenster nicht fokussiert wird und der Anwender es unter Umständen nicht sieht (bei target="_blank" wird das Fenster sehr wohl fokussiert). Außerdem werden andere Verweise, die diesen eigentlich nicht verwendeten Framenamen verwenden, ebenfalls in diesem neuen Fenster geöffnet.

nach oben
weiter | Seite Projekt-interne Verweise
zurück | Seite Tabellen und nicht-visuelle Medien
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Verweise (Links)

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Verweise (Links) / Projekt-interne Verweise

SELFHTML

Projekt-interne Verweise
Informationsseite

nach unten Verweise zu Dateien oder Quellen im Projekt
nach unten Anker definieren und Verweise zu Ankern
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verweise zu Dateien oder Quellen im Projekt

Ein Web-Projekt besteht typischerweise aus mehreren bis vielen Einzelseiten, die miteinander verlinkt sind. Einleitende Bemerkungen dazu finden Sie im Abschnitt Seite Informationsverteilung und Dateiorganisation.

Um Verweise auf andere Projektdateien zu definieren, empfiehlt es sich, relative Angaben zum Verweisziel zu machen. Das Projekt bleibt dadurch flexibler, und die Verweise funktionieren auch in anderen Umgebungen (z.B. solange Sie das Projekt lokal auf Ihrem PC erstellen und austesten wollen, oder wenn Sie es mal auf CD-ROM präsentieren möchten).

Beispiel Teil 1 - index.htm:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Relative Verweise zu Dateien oder Quellen im Projekt</title>
</head>
<body>

<h1>Homepage</h1>

<p>Dies ist eine ganz einfache Homepage mit einem
  <a href="zweiteseite.htm">Verweis zu einer anderen Seite des Projekts</a>.
  Eine <a href="../../tabellen/anzeige/layout.htm">aufwendigere Homepage
  mit projektinternen Verweisen</a> k&ouml;nnen Sie aber ebenfalls aufrufen.
</p>

</body>
</html>

Beispiel Teil 2 - zweiteseite.htm:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Relative Verweise zu Dateien oder Quellen im Projekt</title>
</head>
<body>

<div style="width:100%; border:thin solid gray; padding:5px">
  <a href="index.htm">Homepage</a>
</div>

<h1>Zweite Seite</h1>

<p>Ja, hurra, geschafft!</p>

</body>
</html>

Erläuterung:

Das Beispiel zeigt zwei kleinere HTML-Dateien. Die erste - mit Namen index.htm - enthält einen Verweis zur zweiten Datei. Der Dateiname der zweiten Datei lautet zweiteseite.htm. Beide Dateien sind im gleichen Verzeichnis abgelegt. Deshalb genügt bei href die Angabe des Dateinamens ohne weitere Zusätze. Im Beispiel der Datei index.htm wird aber auch noch gezeigt, wie Verweise zu Dateien in anderen Verzeichnissen definiert werden. Die genaue Syntax solcher relativen Angaben wird im Abschnitt Seite Mit relativen Pfadangaben relativ zum Basis-URI referenzieren beschrieben.

Die zweite Datei im Beispiel (zweiteseite.htm) enthält einen typischen "Rückverweis" auf die erste Seite, also auf die "Einstiegsseite". Ein Rückverweis ist kein spezieller Verweis, sondern einfach wieder ein Verweis auf die gewünschte Datei. Da beide Dateien im gleichen Verzeichnis liegen, genügt auch in diesem Fall wieder die Angabe des Dateinamens, also href="index.htm"

Beachten Sie:

Der "Rückverweis" in der zweiten Datei wird im obigen Beispiel mit Hilfe eines Seite allgemeinen Bereichs, dem ein paar CSS-Formate zugewiesen sind, optisch etwas aufgewertet. Er steht am Anfang des sichtbaren Dateikörpers und durch den Rahmen, den er dank CSS erhält, wirkt der Bereich wie eine Navigationsleiste. Es ist sehr empfehlenswert, solche typischen Navigationsverweise immer an der gleichen Stelle einer Seite zu notieren und optisch so zu gestalten, dass der Navigationszweck ersichtlich ist. HTML bietet keine speziellen Verweise oder gestalterischen Möglichkeiten für Navigationsleisten und Navigationsverweise an. Navigationsleisten müssen Sie mit den zur Verfügung stehenden Bordmitteln selbst kreieren. (Genaugenommen ist diese Aussage falsch: HTML bietet sehr wohl so etwas an, nämlich mit der Möglichkeit, Seite logische Beziehungen zu definieren. Leider wird dies jedoch von den Browsern bis heute nicht unterstützt.)

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Anker definieren und Verweise zu Ankern

Sie können innerhalb einer HTML-Datei Anker definieren. Dann können Sie Verweise zu solchen Ankern setzen, um einen Sprung genau an die Ankerstelle innerhalb der Datei zu veranlassen. Der Verweis kann in der gleichen Datei stehen. Dann wird einfach ein Sprung innerhalb der angezeigten Seite ausgeführt. Der Verweis kann aber auch in einer anderen Datei stehen. Dann wird die Zieldatei geladen, und der Browser springt, sobald er die Stelle mit dem Anker geladen hat, an die entsprechende Stelle innerhalb der Datei.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Anker definieren und Verweise zu Ankern</title>
</head>
<body>

<h1><a name="anfang">Lange Seite</a></h1>

<h2><a name="kapitel1" href="#kapitel1">Kapitel 1</a></h2>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<!-- usw. lauter Trennlinien, um Raum zu schaffen -->

<h2><a name="kapitel2">Kapitel 2</a></h2>

<p><a href="#anfang">Seitenanfang</a>, <a href="#kapitel2">Kapitel 2</a> oder
<a href="../projektintern.htm#anker">Anker definieren und Verweise zu Ankern</a></p>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<!-- usw. lauter Trennlinien, um Raum zu schaffen -->

</body>
</html>

Erläuterung:

Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt. Der Unterschied besteht darin, dass kein Attribut href notiert wird, sondern stattdessen ein Attribut name. Ein kompletter Anker sieht also so aus:
<a name="ankername">...</a>

Wahl eines geeigneten Ankernamens

Den Ankernamen können Sie frei vergeben. Vergeben Sie möglichst kurze, aber prägnante und lesbare Namen. Sie sollten im Ankernamen lediglich die lateinischen Buchstaben, die arabischen Ziffern sowie als Sonderzeichen höchstens den Unterstrich (_), den Bindestrich (-) und den Punkt (.) benutzen. Als erstes Zeichen des Namens sollten Sie einen Buchstaben wählen.

Diese Empfehlung ist eine Faustregel, die sich in der Praxis als sicher herausgestellt hat. Es gibt nämlich keine klaren und eindeutigen Vorschriften für Ankernamen. HTML 4 schränkt nicht ein, welche Zeichen Sie in Ankernamen verwenden dürfen. Demnach dürfen im name-Attribut alle in HTML zugelassenen Zeichen und Sonderzeichen notiert werden, z.B. <a name="Ein ♥ für Kinder">...</a> rein formal zulässig.

Trotzdem gelten einige Regeln dadurch, dass Ankernamen in einer Seite URI auftauchen, sobald Sie einen Verweis mit dem Anker als Ziel notieren. Diese Regeln der technischen Standards RFC 2396 und RFC 3986 sind aber immer noch sehr freizügig: Neben lateinischen Buchstaben (a-z bzw. A-Z) und arabischen Ziffern (0-9) sind zahlreiche Sonderzeichen erlaubt (/?:@.-_~!$&'()*+,;=). Alle anderen Zeichen, darunter das Leerzeichen und deutsche Umlaute, können nicht direkt notiert werden, sondern müssen kompliziert umschrieben werden. Das Zeichen wird mittels der Kodierung UTF-8 mit ein oder mehreren Bytes ausgedrückt. Die zweistelligen Hexadezimalwerte der Bytes werden nacheinander notiert, indem ihnen jeweils ein Prozentzeichen % vorangestellt wird. Zum Beispiel wird das Gatterzeichen # mit %23 umschrieben und der Umlaut ö mit %C3%B6.

Soweit die graue Theorie - denn die Praxis sieht ganz anders aus. Fast kein Browser unterstützt all diese Sonderzeichen in Ankernamen und verarbeitet Verweise auf solche Anker korrekt. Sie sollten sich daher auf die wenigen genannten Zeichen beschränken, die den verbreiteten Browsern keine Probleme machen.

Die Zurückhaltung beim Wählen geeigneter Ankernamen ist auch für die "Zukunftsfähigkeit" Ihrer HTML-Dateien sinnvoll. Denn seit HTML 4 können Anker alleine mit dem Seite Universalattribut id anstelle eines a-Elements mit name-Attribut notiert werden. Dies hat einige Vorteile, denn Sie können bereits vorhandenen Elementen, z.B. Überschriften, id-Attribute zuweisen. Somit kann das a-Element eingespart werden:

<h2 id="ankername">Text der &Uuml;berschrift</h2>

Manche alte Browser wie Netscape 4 verstehen jedoch nur die Notation <a name="ankername">...</a>. Der entscheidende Punkt ist nun, dass für das id-Attribut in HTML 4 sehr strenge Regeln gelten: Neben den lateinischen Buchstaben A-Z und den arabischen Ziffern sind nur der Unterstrich, der Bindestrich, der Punkt und der Doppelpunkt erlaubt. Sie sehen, diese Anforderungen stimmen mit der oben genannten Faustregel nahezu überein. Wenn Sie also momentan oder in Zukunft Anker mit dem id-Attribut realisieren möchten, sollten Sie diese Regel berücksichtigen.

Für Seite XHTML gelten wieder andere Regeln für das Attribut name beim a-Element sowie das Universalattribut id. XHTML 1.0 erlaubt im Gegensatz zu HTML 4.x zwar unzählige Zeichen aus allen Schriftkulturen der Welt im name-Attribut (darunter deutsche Umlaute). Aber von den genannten Sonderzeichen sind lediglich der Unterstrich, der Bindestrich, der Punkt und der Doppelpunkt erlaubt. Gleichzeitig werden Anker in XHTML nicht mehr über das name-, sondern nur noch über das id-Attribut definiert, für das ähnliche Einschränkungen gelten. In abwärtskompatiblen XHTML-Dokumenten können Sie beide Attribute mit identischem Attributwert notieren, wie es unter Seite Unterschiede zwischen XHTML und HTML: Verweise zu Ankern beschrieben ist:

<h2><a name="ankername" id="ankername">Text der &Uuml;berschrift</a></h2>

Inhalt des Ankers

Was Sie zwischen <a name="ankername"> und </a> als Inhalt notieren, ist das Sprungziel für Verweise, die zu diesem Anker führen. Es ist durchaus erlaubt, einen leeren Anker zu notieren, also <a name="ankername"></a>. Einige ältere Browser führen Verweise zu leeren Ankern jedoch nicht aus, weshalb es besser ist, den Anker immer um einen konkreten Inhalt zu setzen. Beachten Sie dabei aber, dass das a-Element selber ein Seite Inline-Element ist und keine Seite Block-Elemente als Inhalt haben darf. Wenn Sie also beispielsweise eine Überschrift als Anker definieren wollen, was ja durchaus typisch ist, dann notieren Sie wie im obigen Beispiel in der Überschrift den Anker und darin den Text der Überschrift.

Verweise zu Ankern in der aktuellen Datei und anderen Dateien

Um innerhalb einer Datei einen Verweis zu einem in der Datei vorhandenen Anker zu notieren, gilt folgendes Schema:

<a href="#ankername">Verweistext</a>

Das Verweisziel beginnt also mit einem Gatterzeichen #, unmittelbar gefolgt vom Ankernamen.

Wenn der Verweis zu einem Anker in einer anderen Datei führen soll, wird zuerst die Datei adressiert. Hinter dem Dateinamen folgt das Gatterzeichen # und dahinter der Ankername.

Beachten Sie:

Beim Definieren von Ankern sowie in Verweisen dorthin müssen Sie auf die gleiche Groß- und Kleinschreibung bei der Ankernamen achten. Denn gemäß dem HTML-Standard müssen Browser den Anker namens ankername nicht anspringen, wenn der Verweis auf einen Anker namens Ankername zeigt. Auch wenn dies viele Browser nicht so streng sehen, sollten Sie auf einheitliche Groß-/Kleinschreibung achten. Verzichten Sie möglichst auf Großschreibung und nutzen Sie einheitlich Kleinbuchstaben.

Wenngleich Browser beim Anspringen von Ankern zwischen Groß- und Kleinschreibung unterscheiden sollen, darf ein Anker unabhängig von seiner Groß- und Kleinschreibung nur einmal im Dokument vorkommen. Das heißt, dass die Anker <a name="Ankername">...</a> und <a name="ankername">...</a> nicht gleichzeitig in einem Dokument vorkommen dürfen, denn sie unterscheiden sich nur in der Groß-/Kleinschreibung. Zudem dürfen Sie <a name="ankername">...</a> nur einmal im Dokument notieren.

Daran anschließend gilt die Regel, dass das name-Attribut beim a-Element (und anderen) denselben Namensraum wie das id-Attribut besitzt. Das bedeutet, dass Sie z.B. den Anker ankername nicht gleichzeitig einmal mit <a name="ankername"> und einmal mit id="ankername" an einem anderen Elementen definieren dürfen. Wenn Sie also gleichzeitig beide Methoden nutzen, um einen Anker zu notieren, sollten Sie das id-Attribut direkt beim a-Element notieren: <a name="ankername" id="ankername">...</a>. Dies ist wie beschrieben vor allen Dingen in XHTML-Dokumenten wichtig.

Bei Verweisen innerhalb einer Datei erzeugt der Web-Browser, wenn die Datei in einer HTTP-Umgebung angezeigt wird, keinen neuen Server-Zugriff, sofern er die Datei so vollständig in den Arbeitsspeicher geladen hat, dass er den Sprung ausführen kann.

Einige Browser, z.B. der Internet Explorer, kennen auch "intern reservierte" Ankernamen wie top. Wenn Sie also einen Verweis <a href="#top">...</a> notieren und kein Anker dieses Namens in der Datei existiert, springt der Browser beim Ausführen des Verweises an den Anfang der Seite.

Manche Browser haben Schwierigkeiten, zu Ankern zu springen, die innerhalb einer Kapitel Tabelle notiert sind.

Es ist durchaus möglich, a-Elemente zu notieren, die sowohl ein href- als auch ein name-Attribut haben. Absichtlich selbstbezügliche Verweise können Sie beispielsweise so erzeugen:

<a name="hier" href="#hier">immer sch&ouml;n hierbleiben!</a>
nach oben
weiter | Seite Projekt-externe Verweise
zurück | Seite Verweise definieren und gestalten
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Verweise (Links)

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Verweise (Links) / Projekt-externe Verweise

SELFHTML

Projekt-externe Verweise
Informationsseite

nach unten Allgemeines zu projekt-externen Verweisen
nach unten Beispiele für projekt-externe Verweise
nach unten

Allgemeines zu projekt-externen Verweisen

Aus technischer Sicht stellen projekt-externe Verweise kein großes Problem dar. Im Abschnitt Seite Referenzieren in HTML wird beschrieben, welche Möglichkeiten zur Referenzierung bestehen. Diese Möglichkeiten sind beim href-Attribut des <a>-Tags erlaubt.

Dennoch sollten Sie einiges mehr über projekt-externe Verweise wissen:

Im Normalfall dürfen Sie ungefragt Verweise auf fremde Web-Angebote setzen. Sie brauchen also keine E-Mail an den Anbieter mit Bitte um Genehmigung zu schreiben, wenn Sie auf sein Angebot einen Link setzen wollen. Jeder Anbieter, der mit seinem Web-Projekt online geht, muss sich im Klaren darüber sein, dass er Teil eines weltweiten Hypertext-Systems ist, in dem er nicht allein ist. Wenn er das nicht akzeptieren kann, ist er im Web fehl am Platz und hat das falsche Medium gewählt. Die Grundregeln des Web werden von den Ideen des Web bestimmt, nicht von den hermetischen Zwangsvorstellungen einiger Zuspätgekommener.

Es gibt jedoch Ausnahmen von der Regel. Wenn Sie beispielsweise selbst ein sehr stark frequentiertes Web-Angebot haben und auf dessen Einstiegsseite einen Verweis auf die Homepage eines kleinen, unbekannten Anbieters setzen, dann sollten Sie ihn vorher fragen. Der Grund: durch die vielen zu erwartenden Besucher, die über Ihren Verweis auf das fremde Angebot finden, wird dort plötzlich sehr viel Traffic (Besucherverkehr und Datenübertragung) erzeugt. Viele Anbieter haben bei ihrem Provider eine Volumenbegrenzung, und wenn diese überschritten wird, entstehen den Anbietern unkalkulierbare Kosten. Auch könnte es sein, dass der fremde Server nicht sehr belastungsfähig ist und durch die vielen plötzlichen Besucher zusammenbrechen könnte.

Eine andere Ausnahme ist, wenn Sie den Verweis in einem negativen Kontext setzen. Wenn Sie also auf einen Anbieter verweisen, nur weil Sie ihn auf Ihren eigenen Seiten heftig kritisieren, dann ist es sicherer, sich dort eine Bestätigung einzuholen, dass ein solcher Verweis gebilligt wird. Juristisch sicher ist eine solche Bestätigung aber nur, wenn sie mit Unterschrift in dokumentenechter Form von einer dafür zuständigen Person geleistet wird.

Eine Sache, gegen die man sich im Sinne der Zivilcourage wehren sollte, ist der Versuch von Anbietern, juristisch gegen so genannte Deeplinks (Verweise in die Tiefe eines fremden Angebots) vorzugehen. Weltweiter Hypertext im Web bedeutet, dass auf vorhandene URIs verwiesen werden darf. Schließlich kann sich auch jeder Anwender auf jeden URI ein Lesezeichen (Bookmark, Favoriten) in seinem Browser setzen. Das kann auch eine Datei tief in einem fremden Web-Angebot sein. Es gibt von Anbieterseite aus technische Möglichkeiten, Deeplinks auf eine allgemeinere Seite umzulenken. Wenn er also nicht will, dass Deeplinks auf sein Angebot gesetzt werden, dann soll er von diesen technischen Möglichkeiten Gebrauch machen.

Weitere Informationen und Bemerkungen zu Diskussionen, die Sie zu diesen Themenkomplexen kennen sollten, finden Sie im Abschnitt Seite Rechtliche Aspekte von Web-Projekten.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Beispiele für projekt-externe Verweise

Die einzige Bedingung, die beim Anwender erfüllt sein muss, damit er projekt-externe Verweise ausführen kann, ist eine bestehende Internet-Verbindung.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Beispiele f&uuml;r projekt-externe Verweise</title>
</head>
<body>

<h1>Besuchen Sie doch mal...</h1>

<p>
  <a href="http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view">
  das SELF<i>spezial</i>-G&auml;stebuch</a><br>
  <a href="http://babelfish.altavista.com/">den Babelfish</a><br>
  <a href="ftp://ftp.uni-augsburg.de/">den FTP-Server der Universit&auml;t Augsburg</a><br>
  <a href="gopher://ftp.std.com/1">die ganze Welt auf einem Gopher-Server</a><br>
  <a href="telnet://locis.loc.gov/">die &ouml;ffentliche Telnet-Anwendung der Library of Congress</a><br>
  <a href="news:de.comm.infosystems.www.authoring.misc">die deutschsprachige Newsgroup f&uuml;r HTML/CSS</a>
</p>

</body>
</html>

Erläuterung:

Web-Adressen beginnen mit http://, manchmal auch mit https:// (letzteres sind Server, bei denen die Datenübertragung von und zum Browser verschlüsselt stattfindet, z.B. bei Internet-Banking).

Andere Internet-Protokolle können Sie ebenfalls adressieren, beispielsweise FTP-Adressen mit ftp://, Adressen auf Gopher-Servern mit gopher:// oder Telnet-Adressen mit telnet://. Auch Newsgroups im Usenet können Sie adressieren, nämlich mit news: (ohne die beiden sonst charakteristischen Schrägstriche). Bei anderen als http-Adressen kommt es auf den Web-Browser an, wie er damit umgeht. Die modernen Browser beherrschen meistens FTP und Gopher und stellen entsprechende Adressen in ihrem Anzeigefenster dar. Bei Protokollen, die der Browser nicht unterstützt, versucht er, auf dem Rechner des Anwenders ein Programm auszuführen, das für das entsprechende Internet-Protokoll zuständig ist. Bei Telnet wird beispielsweise ein auf dem Rechner installierter Telnet-Client aufgerufen, und bei Verweisen auf Newsgroups ein Newsreader oder das Newsreader-Modul eines E-Mail-Programms. Bei Newsgroups muss jedoch ein News-Server im Newsreader des Anwenders eingerichtet sein, der die adressierte Newsgroup anbietet. Auch Seite E-Mail-Verweise sind möglich.

Beachten Sie:

Viele Adressen bestehen nur aus dem Namen einer "WWW-Domain", etwa http://www.selfhtml.org/. Trotzdem führt der Verweis auf eine konkrete HTML-Datei. Das liegt daran, dass es bei vielen Web-Servern einen so genannten Default-Dateinamen gibt - meistens index.htm, index.html oder welcome.htm bzw. welcome.html. Das Projekt muss natürlich auch eine entsprechende Datei besitzen. Im Verweis braucht die HTML-Datei aber nicht mit angegeben zu werden.

Viele solcher Adressen werden immer wieder ohne abschließenden Schrägstrich angegeben, etwa http://www.selfhtml.org. Es ist jedoch sauberer, wenn Sie noch den Schrägstrich dahinter setzen. Nur so kann der Web-Browser bereits am Verweis erkennen, dass es sich um ein Verzeichnis handelt, in dem eine Default-Datei steht, deren Namen der Web-Server zur Verfügung stellt. Es ist deshalb besser zu notieren: http://www.selfhtml.org/.

Noch wichtiger ist es, bei Unterverzeichnissen einen abschließenden Schrägstrich zu notieren. Zwar klappt es auch, wenn Sie eine Adresse wie http://de.selfhtml.org/editorial notieren. Doch dann findet unnötig viel Kommunikation zwischen Browser und Server statt, denn intern fordert der Browser vom Server im Beispiel erst mal eine Datei namens editorial, was den Server zunächst zu einer Fehlermeldung veranlasst, da diese Datei nicht existiert. Erst im zweiten Schritt wird erkannt, dass es sich um den Namen eines Verzeichnisses handelt. Notieren Sie deshalb also immer Angaben wie http://de.selfhtml.org/editorial/, also mit abschließendem Schrägstrich.

Es gibt neben den angesprochenen Internet-Protokollen auch noch andere, etwa wais oder irc. Ferner gibt es das "Un-Protokoll" file, über das sich lokale Rechner und Netzwerkadressen absolut adressieren lassen, mit Angaben wie <a href="file://localhost/">...</a>. Dies wird von moderneren Browsern jedoch aus Sicherheitsgründen nicht mehr oder nur noch eingeschränkt unterstützt und ist auch nicht besonders sinnvoll, da es heute wirklich kein Problem mehr ist, für lokale Zwecke einen Seite Web-Server lokal einzurichten.

nach oben
weiter | Seite E-Mail-Verweise
zurück | Seite Projekt-interne Verweise
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Verweise (Links)

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Verweise (Links) / E-Mail-Verweise

SELFHTML

E-Mail-Verweise
Informationsseite

nach unten Verweis zu E-Mail-Adresse definieren
nach unten Optionen bei E-Mail-Verweisen
nach unten

HTML 2.0 XHTML 1.0 MS IE 4.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verweis zu E-Mail-Adresse definieren

Sie können auf jede beliebige E-Mail-Adresse im Internet-Format einen Verweis setzen. Eine Internet-gerechte E-Mail-Adresse erkennen Sie an dem Zeichen @ in der Mitte der Adresse. Wenn der Anwender auf den Verweis klickt, kann er eine E-Mail an den betreffenden Empfänger absetzen. Normalerweise benutzen Anbieter von WWW-Seiten diese Möglichkeit, um Besuchern die Möglichkeit zu bieten, eine E-Mail an die eigene Adresse zu senden, zum Beispiel wegen Feedback zum Angebot. Sie können aber auch Verweise zu anderen E-Mail-Adressen anbieten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>E-Mail-Verweise definieren</title>
</head>
<body>

<h1>Impressum</h1>

<p>Verantwortlich f&uuml;r den Inhalt dieser Seiten ist:<br>
  <a href="mailto:fritz.eierschale@example.org">Fritz Eierschale, fritz.eierschale@example.org</a>
</p>

</body>
</html>

Erläuterung:

Verweise auf E-Mail-Adressen funktionieren nach dem gleichen Schema wie alle anderen Verweise. Beim href-Attribut des einleitenden <a>-Tags wird das Verweisziel angegeben. Verweisziele vom Typ "E-Mail" beginnen immer mit mailto: (ohne // dahinter!).

Der Verweis ist bei Anwendern nur ausführbar, wenn der Web-Browser das Erstellen und Absenden von E-Mails unterstützt (z.B. Netscape), oder wenn bei solchen Verweisen automatisch ein E-Mail-Programm gestartet wird (dies ist z.B. beim Internet Explorer der Fall).

Beachten Sie:

Es ist sinnvoll, im Verweistext die E-Mail-Adresse noch einmal explizit zu nennen, so wie im obigen Beispiel, damit Anwender, bei denen der E-Mail-Verweis nicht ausführbar ist, auf Wunsch separat eine E-Mail senden können.

MS IE 4.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Optionen bei E-Mail-Verweisen

Die hier beschriebenen Optionen sind nicht im HTML-Standard verankert, widersprechen diesem aber auch nicht unbedingt, solange die Kodierungsregeln für URIs eingehalten werden. Da sie von vielen Browsern interpretiert werden, sollen sie hier erwähnt werden.

Sie können:

  • E-Mail-Verweise an mehrere Empfänger senden, wahlweise cc (sichtbare Kopienempfänger) oder bcc (unsichtbare Kopienempfänger),
  • anstelle einer einfachen E-Mail-Adresse ein vollständiges Empfängerschema angeben von der Art:
    Fritz Eierschale <fritz.eierschale@example.org>
  • ein Subject vordefinieren, sodass beim Öffnen des E-Mail-Editors das Betreff-Feld bereits mit einem Text Ihrer Wahl ausgefüllt ist,
  • einen Body-Inhalt vordefinieren, sodass beim Öffnen des E-Mail-Editors bereits Text im Nachrichtentext der E-Mail steht, z.B. eine Anrede,
  • alle Optionen kombinieren.

Es besteht jedoch keinerlei Garantie, dass alle Möglichkeiten in allen Browsern und allen Kombinationen mit E-Mail-Programmen funktionieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Optionen bei E-Mail-Verweisen</title>
</head>
<body>

<h1>Tolle E-Mails</h1>

<p>Mail an einen Hauptempf&auml;nger und einen sichtbaren Kopienempf&auml;nger:<br>
  <a href="mailto:beispiel@example.org?cc=heidi.bratze@example.org">Mail mit Kopie</a>
</p>
<p>Mail an einen Hauptempf&auml;nger und einen unsichtbaren Kopienempf&auml;nger:<br>
  <a href="mailto:beispiel@example.org?bcc=heidi.bratze@example.org">Mail mit Geheimkopie</a>
</p>
<p>Mail mit vordefiniertem Subject (Betreff):<br>
  <a href="mailto:beispiel@example.org?subject=eine%20Mail%20von%20deinen%20Web-Seiten">Mail mit Betreff</a>
</p>
<p>Mail mit vordefiniertem Body (Nachrichtentext):<br>
  <a href="mailto:beispiel@example.org?body=Hallo%20Fritz,%0D%0A%0D%0Aich%20wollte%20nur%20sagen,%20dass%20">Mail mit Body</a>
</p>
<p>Mail mit kombinierten Optionen:<br>
  <a href="mailto:fritz.eierschale@example.org?cc=heidi.bratze@example.org&amp;subject=Hallo%20Fritz,%20hallo%20Heidi">cc und Subject</a>
</p>
<p>Mail an zwei Hauptempf&auml;nger:<br>
  <a href="mailto:beispiel@example.org,%20heidi.bratze@example.org">Mail an zwei</a>
</p>
<p>Mail mit vollst&auml;ndigem Adressierungsschema:<br>
  <a href="mailto:Fritz%20Eierschale%20%3Cfritz.eierschale@example.org%3E">Mail mit Adressierungsschema</a>
</p>

</body>
</html>

Erläuterung:

Die Optionen werden in dem Wert notiert, der dem href-Attribut zugewiesen wird. Es gibt also keine speziellen HTML-Attribute für diese Optionen, und deshalb ist die Handhabung auch etwas umständlich. Zuerst wird wie üblich der Empfänger notiert. In den obigen Beispielen (mit Ausnahme des letzten) geschieht das jeweils durch mailto:beispiel@example.org. Dahinter wird ein Fragezeichen ? notiert. Das ist in der URI-Syntax das übliche Zeichen, um Parameter an eine aufgerufene Adresse zu übergeben. Hinter dem Fragezeichen folgen die Parameter. Jede Option ist so ein Parameter und besteht aus einem Namen, einem Istgleichzeichen und einem zugewiesenen Wert. Als Optionsnamen sind erlaubt:
cc (sichtbarer Kopienempfänger),
bcc (unsichtbarer Kopienempfänger),
subject (Betreff) und
body (Nachrichtentext).
Ein Konstrukt wie cc=heidi.bratze@example.org ist also ein vollständiger Parameter und bedeutet: "sichtbare Kopie an heidi.bratze@example.org".

Bei den Wertzuweisungen an die Parameter können Zeichen vorkommen, die nicht zu einer gültigen URI gehören. Damit die URI gültig bleibt (andernfalls wäre das Dokument auch kein gültiges HTML mehr), müssen diverse Zeichen maskiert werden. Die Maskierung besteht darin, ein Prozentzeichen % zu notieren, gefolgt von der hexadezimal ausgedrückten Zeichennummer des gewünschten Zeichens.

Die folgende Tabelle listet Zeichen auf, die maskiert werden müssen, weil sie innerhalb von URIs nicht vorkommen dürfen oder eine bestimmte Bedeutung haben. Links steht das Zeichen, rechts die Zeichenkette, mit der Sie das Zeichen maskieren müssen:

Zeichen | Zeichenkette für Maskierung
[neue Zeile] | %0A
[Wagenrücklauf] | %0D
[Leerzeichen] | %20
! | %21
# | %23
% | %25
* | %2A
/ | %2F
< | %3C
> | %3E
? | %3F

Ferner müssen Sie alle Zeichen maskieren, die nicht in der Seite ASCII-Zeichentabelle vorkommen, also z.B. deutsche Umlaute und scharfes S. Die folgende Tabelle listet die wichtigsten Zeichen und ihre Maskierung auf:

Zeichen | Zeichenkette für Maskierung | Zeichen | Zeichenkette für Maskierung
Ä | %C4 | ä | %E4
Ö | %D6 | ö | %F6
Ü | %DC | ü | %FC
ß | %DF |  |

Zur Ermittlung weiterer Zeichen können Sie beispielsweise in der Seite Codetabelle der ISO-8859-1-Kodierung die dezimale Nummer des gewünschten Zeichens ermitteln, von dieser Dezimalzahl dann mit dem Seite Dezimal/Hexadezimal-Umrechner den Hexadezimalwert ermitteln, und noch ein Prozentzeichen davor notieren.

Wenn Sie mehrere Optionen kombinieren wollen, müssen Sie die Optionen durch ein kaufmännisches Und (&) voneinander trennen. Nun darf ein solches Zeichen in HTML - auch nicht bei einer Wertzuweisung an ein Attribut - nicht unmaskiert vorkommen. Deshalb sollten Sie es wie in HTML üblich mit &amp; maskieren. Leider gibt es einige ältere Browser (z.B. Netscape 3.x), die damit nicht klarkommen. Die E-Mail-Clients von Netscape 4.x, Outlook Express 5.x und Outlook 97/2000 (sowie eventuell auch neuere Versionen) interpretieren das maskierte & sogar völlig falsch. Hier muss ein unmaskiertes & im Link verwendet werden, da sonst die Optionen ab dieser Stelle einfach ignoriert werden.

Die folgende Zeichenkette:
cc=heidi.bratze@example.org&amp;subject=Hallo%20Fritz,%20hallo%20Heidi
kombiniert im obigen Beispiel also die Optionen für cc und subject. Um weitere Optionen hinzufügen, notieren Sie ein weiteres &amp; und dahinter eine weitere Option, bestehend aus Optionsname, Istgleichzeichen und zugewiesenem Wert.

Das letzte der obigen Beispiele zeigt, wie Sie ein vollständiges Adressierungsschema gemäß RFC 822 als mailto-Adresse angeben. Ein solches Schema, wie Sie es vermutlich aus Ihrer E-Mail-Korrespondenz kennen, lautet beispielsweise:
Fritz Eierschale <fritz.eierschale@example.org>
In einem E-Mail-Verweis muss die Zuweisung an das href-Attribut jedoch so aussehen:
mailto:Fritz%20Eierschale%20%3Cfritz.eierschale@example.org%3E
Auch in diesem Fall müssen Sie also alle weiter oben erwähnten Zeichen einschließlich < und > maskieren.

Um Browserprobleme zu vermeiden, sollten Sie auch das Zeichen "-" durch "%2D" kodieren.

nach oben
weiter | Seite Download-Verweise und Verweise auf beliebige Dateien
zurück | Seite Projekt-externe Verweise
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Verweise (Links)

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Verweise (Links) / Download-Verweise und Verweise auf beliebige Dateien

SELFHTML

Download-Verweise und Verweise auf beliebige Dateien
Informationsseite

nach unten Download-Verweise
nach unten Verweise zu beliebigen Dateien
nach unten MIME-Typ des Verweisziels angeben
nach unten

Download-Verweise

Es gibt keine spezifische Notation in HTML, um Dateien beim Anklicken zum Downloaden anzubieten. Es gibt lediglich Dateitypen, die (fast) jeder Web-Browser so interpretiert, dass er dem Anwender anbietet, die Datei downzuloaden. Das bekannteste Dateiformat dafür ist heute das ZIP-Format (*.zip). ZIP-Dateien sind Archivdateien, die mehrere andere Dateien enthalten können, sogar ganze Verzeichnisstrukturen. Die enthaltenen Dateien werden außerdem komprimiert. Der Anwender muss die ZIP-Datei nach dem Download mit einem geeigneten Programm entpacken ("Unzip"-Programm).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Download-Verweise</title>
</head>
<body>

<h1>Download-Ecke</h1>

<p>
  <a href="wavetext.zip">WaveText</a><br>
  Ein Java-Applet f&uuml;r Textanimationen (wavetext.zip, 2.106 Bytes)
</p>

</body>
</html>

Erläuterung:

Verweise auf typische Download-Dateien wie ZIP-Dateien unterscheiden sich nicht von anderen Verweisen. Das Verweisziel ist die Datei, die zum Download angeboten wird. Wenn die Datei zum eigenen Projekt gehört, gelten die gleichen Regeln wie bei Seite projektinternen Verweisen, bei entfernten Dateien die Regeln von Seite projekt-externen Verweisen.

Beachten Sie:

Wenn Sie Dateien anbieten, die nur für bestimmte Rechnerumgebungen gedacht sind, können Sie natürlich auch Formate verwenden, die speziell für diese Umgebungen gedacht sind. Für DOS/Windows-Umgebungen können das beispielsweise selbstentpackende EXE-Archive sein, oder für Macintosh HQX-Archive. Wenn der Web-Browser mit der Dateiendung nichts anfangen kann, sollte er den Anwender im Dialog entscheiden lassen, was er mit der Datei tun möchte - dabei sollte auch die Download-Möglichkeit angeboten werden.

Verweise zu beliebigen Dateien

Sie können auf jede beliebige Datei einen Verweis setzen. Es kann sich um Audio-Dateien, Tabellenkalkulations-Dateien, CAD-Dateien, Videodateien, Grafikdateien, Textverarbeitungs-Dateien, Programmdateien, Datenbankdateien handeln - was Sie wollen. Sie können auch jede beliebige Datei in Ihr eigenes Web-Projekt mit auf den Internet-Server laden und einen Verweis darauf setzen. Aus Sicht von HTML ist das kein Problem. Das Problem besteht darin, was der Web-Browser des Anwenders mit den Dateien anfangen kann, bzw. wie er ihren Inhalt korrekt anzeigen oder abspielen lassen kann.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Verweise auf beliebige Dateien</title>
</head>
<body>

<h1>Stuff</h1>

<p>
  <a href="buch.url">buch.url</a><br>
  Eine Favoritendatei, wie der Internet Explorer sie anlegt
</p>

<p>
  <a href="fritz.vcf">fritz.vcf</a><br>
  Eine Visitenkartendatei (Adressenaustauschformat)
</p>

<p>
  <a href="einsundeins.xls">einsundeins.xls</a><br>
  Eine Excel-Datei
</p>

</body>
</html>

Erläuterung:

Verweise auf beliebige Dateien unterscheiden sich nicht von anderen Verweisen. Das Verweisziel ist die gewünschte Datei. Wenn die Datei zum eigenen Projekt gehört, gelten die gleichen Regeln wie bei Seite projektinternen Verweisen, bei entfernten Dateien die Regeln von Seite projekt-externen Verweisen.

Beachten Sie:

Dateitypen wie reine Textdateien (*.txt) kann der Web-Browser selbst anzeigen.

Moderne Web-Browser haben eine Plugin-Schnittstelle. Wenn der Anwender ein Plugin zur Darstellung des Dateityps besitzt, kann der Browser die Datei mit Hilfe des Plugins selbst anzeigen bzw. abspielen.

Wenn der Anwender ein Programm besitzt, das den Dateityp verarbeiten kann, und dem Web-Browser ist die Verknüpfung zwischen Dateien mit der Endung des Verweisziels und einem Programm bekannt, das solche Dateien verarbeitet, dann kann der Browser das Programm starten. Wenn das Betriebssystem, der Web-Browser und das andere Programm den dynamischen Datenaustausch zwischen Programmen erlauben, kann das Anzeigefenster des Fremdprogramms in das Browser-Fenster eingebettet werden. Es gibt jedoch keine Möglichkeit, solche Dinge in irgendeiner Weise als Web-Autor zu beeinflussen.

Wenn der Browser mit dem Dateityp gar nichts anfangen kann, sollte er dem Anwender einen Dialog anbieten, um zu entscheiden, was mit der Datei geschehen soll. Der Anwender sollte die Datei z.B. downloaden können.

HTML 4.0 MIME-Typ des Verweisziels angeben

Um dem Browser die Aufgabe zu erleichtern, um welche Art von Datei es sich handelt, können Sie den Seite MIME-Typ der Datei angeben, auf die Sie verweisen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Verweise mit MIME-Typ-Angabe</title>
</head>
<body>

<h1>Stuff mit Typ</h1>

<p>
  <a href="einsundeins.xls" type="application/msexcel">einsundeins.xls</a><br>
  Eine Excel-Datei
</p>

</body>
</html>

Erläuterung:

Mit dem zusätzlichen Attribut type können Sie den MIME-Typ der Zieldatei bestimmen, im obigen Beispiel application/msexcel für Excel-Dateien.

nach oben
weiter | Seite Typisierte Verweise
zurück | Seite E-Mail-Verweise
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Verweise (Links)

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Verweise (Links) / Typisierte Verweise

SELFHTML

Typisierte Verweise
Informationsseite

nach unten Logische Beziehung zum Verweisziel angeben
nach unten Sprache und Zeichenkodierung des Verweisziels angeben
nach unten

HTML 4.0 XHTML 1.0 Logische Beziehung zum Verweisziel angeben

Ein Feature, das Hypertext-Enthusiasten an HTML bislang vermisst haben, ist seit HTML 4.0 Bestandteil der Sprache. Sie können bei einem Verweis angeben, in welcher logischen Beziehung er zu seinem Verweisziel steht. Dazu gibt es eine Reihe vorgegebener Beziehungstypen. Ein Browser könnte beispielsweise beim Überfahren des Verweises mit der Maus ein kleines Icon anzeigen, welches das Verweisziel symbolisiert. Doch kein verbreiteter Browser bietet etwas Derartiges bislang an.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Logische Beziehung zum Verweisziel angeben</title>
</head>
<body>

<h1>Viel Information</h1>

<div style="width:100%; background-color:#eee; padding:5px">
  <a href="../../../index.htm" rev="contents">Inhalt</a> |
  <a href="../tastatur.htm" rel="next">weiter</a> |
  <a href="../dateitypen.htm" rel="prev">zur&uuml;ck</a> |
  <a href="../index.htm" rev="chapter">zum Kapitelanfang</a>
</div>

<p>Hoffentlich nicht zu viel...</p>

</body>
</html>

Erläuterung:

Mit dem Attribut rel bestimmen Sie eine logische Vorwärtsbeziehung zum Verweisziel, mit rev eine logische Rückwärtsbeziehung (rel = relation = Bezug, rev = reverse = Umkehr). Beide Angaben sind nur in Verbindung mit dem Attribut href sinnvoll - dort geben Sie wie üblich das eigentliche Verweisziel an. Im obigen Beispiel werden diese Attribute auf Verweise einer typischen Navigationsleiste angewendet. Die Navigationsleiste im Beispiel wird mit Hilfe von Stylesheets gestaltet.

Folgende logische Bezüge können Sie angeben:

rel="contents" bedeutet: Verweis zum Inhaltsverzeichnis (contents = Inhaltsverzeichnis)
rev="contents" bedeutet: Rückverweis vom Inhaltsverzeichnis
rel="chapter" bedeutet: Verweis zum Kapitel (chapter = Kapitel)
rev="chapter" bedeutet: Rückverweis vom Kapitel
rel="section" bedeutet: Verweis zum Abschnitt (section = Abschnitt)
rev="section" bedeutet: Rückverweis vom Abschnitt
rel="subsection" bedeutet: Verweis zum Unterabschnitt (subsection = Unterabschnitt)
rev="subsection" bedeutet: Rückverweis vom Unterabschnitt
rel="index" bedeutet: Verweis zum Stichwortverzeichnis
rev="index" bedeutet: Rückverweis vom Stichwortverzeichnis
rel="glossary" bedeutet: Verweis zum Glossar
rev="glossary" bedeutet: Rückverweis vom Glossar
rel="appendix" bedeutet: Verweis zum Anhang (appendix = Anhang)
rev="appendix" bedeutet: Rückverweis vom Anhang
rel="author" bedeutet: Verweis zum Autor, z.B. in Form einer E-Mail-Adresse oder persönlichen Informationen
rev="author" bedeutet: Rückverweis vom Autor, z.B. von einer privaten Homepage
rel="copyright" bedeutet: Verweis zur Copyright-Angabe
rev="copyright" bedeutet: Rückverweis von einer Copyright-Angabe
rel="next" bedeutet: Verweis zur nächsten Datei in der "Guided tour" (next = nächste Seite)
rev="next" bedeutet: Rückverweis von der nächsten Datei
rel="prev" bedeutet: Verweis zur vorherigen Datei in der "Guided tour" (prev = previous = vorherige Seite)
rev="prev" bedeutet: Rückverweis von der vorherigen Datei
rel="first" bedeutet: Verweis zur ersten Datei in der "Guided tour" (first = erste Seite)
rev="first" bedeutet: Rückverweis von der ersten Datei
rel="last" bedeutet: Verweis zur letzten Datei in der "Guided tour" (last = letzte Seite)
rev="last" bedeutet: Rückverweis von der letzten Datei
rel="up" bedeutet: Verweis zur übergeordneten Kapitelseite
rel="up" bedeutet: Rückverweis von der übergeordneten Kapitelseite
rel="top" und rel="start" bedeutet: Verweis zur Startseite
rel="top" und rel="start" bedeutet: Rückverweis von der Startseite
rel="help" bedeutet: Verweis zum Hilfekontext (help = Hilfe)
rev="help" bedeutet: Rückverweis zum Hilfekontext
rel="bookmark" bedeutet: Verweis zu einem allgemeinen Orientierungspunkt (bookmark = Lesezeichen)
rev="bookmark" bedeutet: Rückverweis von einem allgemeinen Orientierungspunkt
rel="alternate" bedeutet: Verweis zu einer Datei mit dem gleichen Inhalt wie der aktuellen, jedoch in einer anderen Dokumentversion (alternate = alternierend).
rev="alternate" bedeutet: Rückverweis von einer Datei mit dem gleichen Inhalt wie der aktuellen, jedoch in einer anderen Dokumentversion

HTML 4.0 XHTML 1.0 Sprache und Zeichenkodierung des Verweisziels angeben

Sie können auch angeben, in welcher Landessprache das Verweisziel geschrieben ist, und welche Seite Zeichenkodierung die Zieldatei benutzt. Die Angabe zur Landessprache kann für den Anwender ein nützlicher Hinweis sein. Die Angabe zur Kodierung ist interessant, um den Browser auf die Internationalisierungshürden vorzubereiten, die ihn beim Verweisziel erwarten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sprache und Zeichenkodierung des Verweisziels angeben</title>
</head>
<body>

<h1>Aus der weiten Welt</h1>

<p>
  <a href="http://www.asharqalawsat.com/" hreflang="ar" charset="ISO-8859-6">Asharq Al-Awsat</a><br>
  Saudi-Arabische Zeitung in arabischer Sprache
</p>

</body>
</html>

Erläuterung:

Mit dem Attribut hreflang können Sie die Sprache angeben (hreflang = hyper reference language = Verweiszielsprache), und zwar in Form eines Seite Sprachenkürzels. Im obigen Beispiel wird ar für "arabisch" angegeben.

Mit charset können Sie die Zeichenkodierung angeben, die die Datei unter der Zieladresse verwendet. Erlaubt sind Kodierungsangaben, wie sie unter der Web-Adresse englischsprachige Seite http://www.iana.org/assignments/character-sets aufgelistet sind.
Mehr zu diesem Thema finden Sie auf der Seite Seite Zeichenkodierungen (ISO-8859-Familie und andere). Im obigen Beispiel wird ISO-8859-6 angegeben - das ist die ISO-Kodierung für arabische Schrift.

Beachten Sie:

Ob und wie ein Browser solche Angaben für den Anwender sichtbar macht, ist nicht festgelegt. Ein Browser könnte beispielsweise beim Überfahren des Verweises mit der Maus ein kleines Icon oder Kürzel anzeigen, das die Landessprache kenntlich macht. Bei der Angabe zur Kodierung könnte der Browser beim Anklicken des Verweises beispielsweise eine Warnung ausgeben, dass die Kodierung nicht unterstützt wird, und den Anwender in einem Dialog fragen, ob er den Verweis wirklich ausführen will. Keiner der verbreiteten Browser bietet bislang etwas Derartiges an.

nach oben
weiter | Seite Tabulator-Reihenfolge und Tastaturkürzel für Verweise
zurück | Seite Download-Verweise und Verweise auf beliebige Dateien
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Verweise (Links)

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Verweise (Links) / Tabulator-Reihenfolge und Tastaturkürzel für Verweise

SELFHTML

Tabulator-Reihenfolge und Tastaturkürzel für Verweise
Informationsseite

nach unten Tabulator-Reihenfolge für Verweise
nach unten Tastaturkürzel für Verweise
nach unten

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.2 Tabulator-Reihenfolge für Verweise

Modernere Browser erlauben es, mit Hilfe der Tabulator-Taste an der Tastatur nacheinander die Verweise einer HTML-Datei anzuspringen (mit der Return-Taste ist der Verweis dann ausführbar).

Normalerweise werden die Verweise dabei in der Reihenfolge angesprungen, in der sie in der Datei definiert sind. Sie können in HTML jedoch eine andere Reihenfolge festlegen, zum Beispiel, um beim Anspringen von Verweisen zuerst Projektverweise und erst dann Verweise zu anderen WWW-Seiten anzubieten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabulator-Reihenfolge für Verweise</title>
</head>
<body>

<h1>Steppen Sie mal mit <kbd>[Tab]</kbd> durch</h1>

<p>
  <a href="http://german.imdb.com/" tabindex="4">Movie Database</a><br>
  <a href="http://www.theonlineblues.com/" tabindex="2">Chart Lyrics</a><br>
  <a href="http://www.meinestadt.de/" tabindex="1">Meine Stadt</a><br>
  <a href="http://http://paperball.fireball.de/" tabindex="3">Paperball</a>
</p>

</body>
</html>

Erläuterung:

Mit dem Attribut tabindex im einleitenden Verweis-Tag können Sie Angaben zur Tabulator-Reihenfolge machen. Notieren Sie die Angabe in allen Verweisen und vergeben Sie bei jeder Angabe eine Zahl. Beim Anspringen der Verweise mit der Tabulator-Taste wird zuerst der Verweis mit der niedrigsten Tabindex-Nummer angesprungen, dann der mit der zweitniedrigsten usw. und als letztes der Verweis mit der höchsten Tabindex-Nummer. Im obigen Beispiel wird also zuerst der dritte Verweis angesprungen, dann der zweite, dann der vierte und zuletzt der erste.

Es sind Zahlen zwischen 0 und 32767 erlaubt.

Beachten Sie:

Die Tabindizes beziehen sich stets auf die gesamte angezeigte Datei. Dabei werden auch Kapitel Formulare, Seite Verweisbereiche in verweis-sensitiven Grafiken und Seite Objekte mit einbezogen. Wenn Sie außer normalen Verweisen auch solche Elemente in Ihrer Datei haben, sollten Sie die Tabulator-Reihenfolge für alle Elemente gemeinsam festlegen. Siehe auch Seite Tabulator-Reihenfolge bei Formularen.

In der Mac-Version unterstützt bereits Opera 6 tabindex-Attribute. In Safari ist deren Anwendung auf Formular-Elemente beschränkt.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 7 Mozilla Firefox 1 Safari 1.2 Tastaturkürzel für Verweise

Sie können dem Anwender anbieten, mit einem Tastendruck zu einem bestimmten Verweis zu springen. Der Verweis wird damit angesprungen - ausgeführt werden kann er anschließend durch Betätigen der Return-Taste.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tastaturkürzel für Verweise</title>
</head>
<body>

<h1>Greifen Sie in die Tasten!</h1>

<p>
  <a href="http://www.selfhtml.org/" accesskey="s">SELFHTML</a> [Alt]+[s]<br>
  <a href="http://www.polylog.org/" accesskey="p">Polylog</a> [Alt]+[p]<br>
  <a href="http://hrw.org/" accesskey="h">Human Rights Watch</a> [Alt]+[h]
</p>

</body>
</html>

Erläuterung:

Mit dem Attribut accesskey im einleitenden Verweis-Tag können Sie ein Zeichen auf der Tastatur bestimmen, das der Anwender drücken kann, um den Verweis direkt anzuspringen (accesskey = Zugriffstaste). Bei den meisten Browsern ist es so geregelt, dass Sie bei accesskey einen Buchstaben angeben können, der dann mit [Alt] und der Taste für den Buchstaben direkt anwählbar ist. In Opera erreichen Sie die Ziele, indem Sie zuvor die Tastenkombination [Shift][Esc] betätigen. Safari benutzt statt der [Alt]-Taste die Taste [Ctrl].

Beachten Sie:

Benutzen Sie Tasten, die auf jeder Tastatur zu finden sind. Funktionstasten etwa, wie es sie auf MF-II-Tastaturen für MS Windows gibt, können Sie mit dieser Angabe auch gar nicht ansprechen.

Weisen Sie den Anwender im Text auf die Möglichkeit des Tastaturzugriffs hin. Benutzen Sie dann auch einheitliche Tastaturkürzel, beispielsweise auf jeder Seite ein h für den Rückverweis zur Homepage.

nach oben
weiter | Seite Grafiken einbinden
zurück | Seite Typisierte Verweise
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Verweise (Links)

© 2007 Seite Impressum


SELFHTML: HTML / Grafiken

SELFHTML

Grafiken
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei und zum Seite Referenzieren in HTML.
In diesem Abschnitt wird beschrieben, wie Sie Grafiken in Ihre Web-Seiten einbinden können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Grafiken einbinden
Seite Grafiken ausrichten
Seite Grafiken als Verweise
Seite Verweis-sensitive Grafiken (Image Maps)

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Grafiken / Grafiken einbinden

SELFHTML

Grafiken einbinden
Informationsseite

nach unten Allgemeines zu Grafiken
nach unten Grafikreferenz definieren
nach unten Breite und Höhe von Grafiken
nach unten Rahmen um Grafiken
nach unten Namen für Grafiken
nach unten Langbeschreibung für Grafiken
nach unten Weitere Informationen
nach unten

Allgemeines zu Grafiken

Um Grafiken in Ihre HTML-Dateien einzubinden, referenzieren Sie die Grafikdateien an gewünschten Stellen im HTML-Quelltext. Geeignete Dateiformate für Web-gerechte Grafiken sind vor allem GIF und JPEG, allmählich aber auch PNG (Einzelheiten zu diesen Formaten siehe Seite Grafikformate für Web-Seiten).

Wenn Sie HTML-Dateien fürs Web erstellen, sollten Sie darauf achten, dass die darin referenzierten Grafiken nicht zu groß sind, denn aufwendige Grafiken verursachen lange Ladezeiten und Missmut beim Anwender. Reduzieren Sie in Ihren Grafiken gegebenenfalls die Anzahl der Farben, verringern Sie die Bildgröße und stopfen Sie nicht zu viele Grafik-Referenzen in eine einzige HTML-Datei. In jedem Fall sollten Sie nach unten Breite und Höhe mit angeben.

Grafiken sind aus HTML-Sicht Seite Inline-Elemente. In der "Strict"-Variante von HTML müssen solche Elemente innerhalb von Seite Block-Elementen vorkommen, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.

Unter grafischen Benutzeroberflächen wie MS-Windows, Macintosh, KDE und anderen können Web-Browser die referenzierten Grafiken direkt im Anzeigefenster anzeigen. Web-Browser für textorientierte Oberflächen (z.B. DOS-Textmodus, Unix-Textmodus) müssen ein separates Grafik-Betrachtungsprogramm aufrufen, um eine Grafik anzuzeigen.

Wenn Sie wichtige HTML-Dateien Ihres Web-Projekts, etwa die Einstiegsseite, vollständig grafisch gestalten, also fast keinen Text, dafür nur Grafikreferenzen verwenden, erschweren Sie automatischen Suchprogrammen, die von vielen Suchdiensten im Web eingesetzt werden, die Identifizierung des Inhalts Ihres Projekts. Im Zweifelsfall müssen Sie abwägen, was Ihnen wichtiger ist: das grafische Erscheinungsbild oder die inhaltliche Identifizierbarkeit. Falls Sie wichtige HTML-Dateien Ihres Web-Projekts vorwiegend durch Grafikreferenzen gestalten, sollten Sie zumindest die Möglichkeit der Seite Meta-Angaben zum Inhalt nutzen.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Grafikreferenz definieren

An einer gewünschten Stelle können Sie eine Grafik referenzieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Grafikreferenz definieren</title>
</head>
<body>

<h1>Tanzmaus</h1>

<p><img src="tanzmaus.png" alt="Tanzmaus"></p>

</body>
</html>

Erläuterung:

Für Grafikreferenzen gibt es in HTML das <img>-Tag (img = image = Bild, src = source = Quelle). Es handelt sich um ein Standalone-Tag ohne Elementinhalt und ohne End-Tag. Mit Hilfe von Attributen bestimmen Sie nähere Einzelheiten der Grafikreferenz. Zwei Attribute sind Pflicht und müssen immer angegeben werden:

Mit dem Attribut src bestimmen Sie die gewünschte Grafikdatei. Dabei gelten die Regeln zum Seite Referenzieren in HTML. Wenn sich die Grafikdatei also beispielsweise im gleichen Verzeichnis wie die HTML-Datei befindet, in der die Grafikreferenz steht, dann genügt einfach die Angabe des Dateinamens der Grafik - so wie im obigen Beispiel. Das Referenzieren mit relativen oder absoluten Pfadangaben ist jedoch ebenso möglich, z.B.:
<img src="verzeichnis/datei.gif" alt="Grafik">
<img src="verzeichnis/unterverz/datei.gif" alt="Grafik">
<img src="../datei.gif" alt="Grafik">
<img src="../../../datei.gif" alt="Grafik">
<img src="../woanders/datei.gif" alt="Grafik">
Auch das Referenzieren von einem vollständigen URI ist möglich, z.B.:
<img src="http://www.example.org/grafiken/taggi01.gif" alt="Taggi">

Das Attribut alt ist Pflichtangabe für jede Grafikeinbindung. Geben Sie darin einen Alternativtext an für den Fall, dass die Grafik nicht angezeigt werden kann. Das sollte bei rein illustrierenden Schmuckgrafiken in der Form alt="" geschehen, um die Grafik als inhaltslos zu kennzeichnen. Vermeiden Sie es in solchen Fällen, die alt-Attribute von Grafiken mit unsinnigen Inhalten wie "spacer.gif" o.ä. zu befüllen.

Es gibt viele Gründe, warum eine Grafik nicht angezeigt werden kann, z.B. weil der Anwender das Anzeigen von Grafiken in seinem Browser deaktiviert hat, oder weil der Anwender das Laden der Seite abgebrochen hat, bevor die Grafik übertragen wurde. Der Alternativtext kann ein einzelnes Wort sein, aber auch eine Kurzbeschreibung, etwa so:
<img src="luftbild.jpg" alt="Luftaufnahme des Grundst&uuml;cks vom 27.05.2001 aus ca. 300m H&ouml;he">
Welcher Alternativtext der jeweils passendste ist, hängt von den jeweilgen Umständen ab. Grafiken, welche Text enthalten, sollten beispielsweise als Alternativtext auf jeden Fall diesen Text erhalten.

Beachten Sie:

Der Internet Explorer zeigt den Alternativtext als Tooltip an, wenn man mit dem Mauszeiger länger über der Grafik verweilt. Dieses Verhalten ist zwar nicht verboten, stört aber häufig den Seitenautor. Und es verleitet zu der Annahme, das alt-Attribut wäre für diesen Tooltip grundsätzlich zuständig, was aber vollkommen falsch ist. Wenn Sie ihre Grafiken mit erklärenden Tooltips versehen wollen, nutzen Sie das Attribut title. Da es ein Seite Universalattribut ist, können Sie title auch in fast jedem anderen Tag verwenden und so beispielsweise auch einzelne Worte oder Textabsätze mit Tooltips versehen.

Der Internet Explorer gibt dem title-Attribut für die Tooltip-Anzeige Vorrang vor dem alt-Attribut. Verwenden Sie deshalb beispielsweise title="", um die Tooltip-Anzeige des alt-Attributs im Internet Explorer abzuschalten.

Sie können ohne weiteres Grafiken von fremden Adressen in Ihre Seiten einbinden. Fragen Sie in diesem Fall jedoch in jedem Fall den Anbieter der Grafik um Erlaubnis, denn das Einbinden von Grafiken ist - im Gegensatz zu Verweisen auf fremde Inhalte - ein Zueigenmachen von fremden Inhalten. Auch besteht keine Garantie, dass die Grafikreferenz jederzeit bis in alle Zukunft funktioniert, denn wenn der Fremdanbieter die Grafik bei sich entfernt oder umbenennt, wird auf Ihrer Seite nur noch ein so genanntes Beispiel-Seite broken image angezeigt.

Achten Sie bei der Wertzuweisung an das src-Attribut unbedingt auf Groß-/Kleinschreibung von Dateinamen und Verzeichnisnamen. Die meisten Server-Rechner laufen mit Betriebssystemen, bei denen streng zwischen Groß- und Kleinschreibung unterschieden wird. Am einfachsten und sichersten ist es, wenn Sie alle Datei- und Verzeichnisnamen kleinschreiben - sowohl beim Vergeben der Namen als auch beim Referenzieren in der HTML-Datei.

Netscape interpretiert ein proprietäres Attribut lowsrc, das Sie zusätzlich zum src-Attribut notieren können, und bei dem Sie eine Grafikdatei angeben, die weniger Speicher benötigt als die bei src referenzierte Grafik. Die lowsrc-Grafik lädt der Browser dann zuerst und kann sie schon anzeigen, während die andere Grafik noch geladen wird. Dieses Attribut erzeugt jedoch ungültiges HTML und hat sich in der Praxis auch als überflüssig erwiesen.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das img-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <img ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Breite und Höhe von Grafiken

Wenn Sie Grafiken in HTML-Dateien einbinden, die Sie im Web anbieten wollen, sollten Sie stets die Breite und Höhe der Grafik mit angeben. Dadurch entnimmt der Web-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muss nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Web-Seite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen. Wenn Sie Breite und Höhe nicht angeben, wartet der Browser dagegen mit der Anzeige der Web-Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr schön aussieht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breite und Höhe von Grafiken</title>
</head>
<body>

<h1>Tanzb&auml;r</h1>

<p><img src="tanzbaer.png" width="368" height="383" alt="Tanzb&auml;r"></p>

</body>
</html>

Erläuterung:

Mit dem Attribut width geben Sie die Breite der Grafik an, und mit height die Höhe (width = Breite, height = Höhe). Notieren Sie die Maße ohne Einheiten, wird automatisch px für Pixel herangezogen.

Es existieren mehrere Möglichkeiten, die genaue Breite und Höhe einer Grafik zu ermitteln. Entweder Sie nutzen ein Grafikprogramm, das diese Werte anzeigt, oder einen HTML-Editor, der beim Einbinden einer Grafik im Dialog auch gleich den Dateikopf der Grafik ausliest und die entsprechenden Angaben in das <img>-Tag automatisch einfügt. Ferner sind diese Eigenschaften zumeist via Kontext-Menü in Dateimanagern und Browsern abrufbar.

Beachten Sie:

Sie können auch Angaben zu Breite und Höhe einer Grafik machen, die absichtlich von den tatsächlichen Abmessungen der Grafik abweichen. Dadurch können Sie interessante Verzerrungseffekte erreichen, wie man sie von Cartoons kennt.

Neben Pixelangaben sind bei width und height auch Prozentangaben erlaubt. Solche Angaben beziehen sich auf den zur Verfügung stehenden Raum. Wenn sich die Grafik also beispielsweise in einem normalen Textabsatz befindet, bewirkt die Angabe width="100%", dass die Grafik über die gesamte Breite des Anzeigefensters (abzüglich der Seitenränder der angezeigten Webseite) dargestellt wird. Die Höhe wird hierbei zwar proportional angepasst, aber da Browser keine Bildbearbeitungsprogramme sind, kann die Qualität darunter leiden. Sinnvoll ist eine Prozentangabe beispielsweise bei Grafiken, die eine Linie darstellen (vgl. Seite Bars), um diese über die gesamte verfügbare Breite zu strecken.

Wenn Sie eine Grafik haben, die Sie an anderer Stelle in kleinerer Form wiederholen möchten (zum Beispiel ein Logo, das auf der Einstiegsseite groß angezeigt werden soll und auf den Unterseiten kleiner), brauchen Sie keine zwei Grafiken. Es genügt, wenn Sie, um eine Grafik kleiner darzustellen, die Angaben zu Breite und/oder Höhe proportional verkleinern. Wenn Ihr Logo beispielsweise die Ausmaße 300 Pixel breit und 200 Pixel hoch hat, können Sie es halb so groß darstellen, indem Sie beim Einbinden der Grafik width="150" height="100" angeben. Sinnvoll ist das aber nur, wenn die große Grafik bereits angezeigt wurde und sich im Cache-Speicher des Browsers befindet und wenn sich der Qualitätsverlust durch die fehlende Nachschärfung nicht negativ auswirkt.

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Rahmen um Grafiken

Sie können festlegen, dass der Browser einen Rahmen um die Grafik zeichnet. Das entsprechende Attribut ist jedoch als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Umrahmung ist auch mit Hilfe von Stylesheets möglich, und dort mit viel mehr Möglichkeiten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rahmen um Grafiken</title>
</head>
<body>

<h1>Baum am Abend</h1>

<p><img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum"></p>

</body>
</html>

Erläuterung:

Mit dem Attribut border innerhalb der Grafikreferenz wird ein Rahmen um die Grafik definiert (border = Rand). Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke. Die Rahmenfarbe ist diejenige, die Text an der gleichen Stelle haben würde.

HTML 3.2 XHTML 1.0 MS IE 4.0 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Namen für Grafiken

Sie können festlegen, dass eine Grafik einen Namen erhält. Dies ist in Verbindung mit JavaScript sinnvoll. Der Name einer Grafik kann zum Beispiel beim JavaScript-Objekt Seite images von Bedeutung sein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Namen f&uuml;r Grafiken</title>
</head>
<body>

<h1>Baum</h1>

<p><img src="baum.jpg" width="320" height="400" name="Baumbild" alt="Abendbaum"></p>

</body>
</html>

Erläuterung:

Mit name vergeben Sie einen Namen für die Grafik.

HTML 4.0 XHTML 1.0 Netscape 6.0 Mozilla Firefox 1 Langbeschreibung für Grafiken

Wenn Ihnen die Möglichkeit, mit dem alt-Attribut einen gewöhnlichen Alternativtext für eine Grafik zu notieren, nicht genügt, können Sie seit HTML 4.0 auch zu einer anderen Stelle oder Datei verweisen, wo sich nähere Textinformation zu der Grafik befindet. Der Browser könnte beispielsweise nur dann einen Verweis zu dieser Stelle anbieten, wenn die Grafik nicht anzeigbar ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Langbeschreibung f&uuml;r Grafiken</title>
</head>
<body>

<h1>Alte Zeiten</h1>

<p><img src="altezeiten.jpg" width="271" height="265" alt="alte Zeiten" longdesc="altezeiten.htm"></p>

</body>
</html>

Erläuterung:

Mit dem Attribut longdesc können Sie auf eine Stelle verweisen, wo die Grafik in Textform näher beschrieben wird. Erlaubt ist ein URI, d.h. bei der Angabe gelten die Regeln zum Seite Referenzieren in HTML.

Beachten Sie:

Lediglich Netscape ab 6.0 und Firefox unterstützen dieses Attribut bislang, und auch nur sehr versteckt: mit der rechten Maustaste über der Grafik klicken, aus dem Kontextmenü die Option Eigenschaften wählen, und in dem Dialog, der dann erscheint, auf die Adresse zu Beschreibung klicken bzw. die dort angegebene Adresse in die Adressenzeile des Browsers kopieren.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo das <img>-Tag vorkommen darf, welche Attribute es haben kann und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Grafikreferenzen (<img>)
Seite Attribut-Referenz für Grafikreferenzen (<img>)

Das Kapitel Kapitel Grafik enthält eine Einführung in web-gerechte Grafik, mit Beispielen und Beschreibungen zu einzelnen grafischen Techniken.

nach oben
weiter | Seite Grafiken ausrichten
zurück | Seite Tabulator-Reihenfolge und Tastaturkürzel für Verweise
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Grafiken

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Grafiken / Grafiken ausrichten

SELFHTML

Grafiken ausrichten
Informationsseite

nach unten Grafik zum umgebenden Text ausrichten
nach unten Text um Grafik fließen lassen
nach unten Grafik und andere Inhalte ausrichten mit Tabellen
nach unten Grafiken ausrichten mit CSS
nach unten

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Grafik zum umgebenden Text ausrichten

Da das img-Element ein Seite Inline-Element ist, können Grafiken mitten in einem Text platziert werden. Wenn nun aber die Grafik höher ist als die Zeilenhöhe, dann muss der Text der gleichen Zeile in irgendeiner Weise zur Grafik ausgerichtet werden. Wenn Sie nichts anderes angeben, wird der Text untenbündig zur Grafik ausgerichtet. Sie können jedoch mit Hilfe eines Attributs selbst bestimmen, wie der Text zur Grafik ausgerichtet werden soll. Dieses Attribut ist allerdings als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit nach unten CSS Stylesheets erzielen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Grafik zum umgebenden Text ausrichten</title>
</head>
<body>

<h1>Woran der Denker denkt</h1>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" align="top" alt="Denker">
  an das Oben?
</p>

<hr>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" align="middle" alt="Denker">
  an die Mitte?
</p>

<hr>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" align="bottom" alt="Denker">
  an das Unten?
</p>

</body>
</html>

Erläuterung:

Das Beispiel enthält drei kurze, normalerweise in eine Zeile passende Textabsätze, bei denen jeweils die gleiche Grafik mitten im Text platziert ist. In allen drei Absätzen wird die darin notierte Grafik mit Hilfe von HTML zum Text davor und dahinter ausgerichtet.

Mit dem HTML-Attribut align im <img>-Tag können Sie Text in der gleichen Zeile zur Grafik ausrichten (align = Ausrichtung):
Mit align="top" wird der Text obenbündig zur Grafik ausgerichtet (top = oben).
Mit align="middle" wird der Text mittig zur Grafik ausgerichtet (middle = mittig).
Mit align="bottom" wird der Text untenbündig zur Grafik ausgerichtet (bottom = unten).

Beachten Sie:

Die Browser interpretieren zum Teil noch weitere Angaben. Diese sind jedoch nicht im HTML-Standard verzeichnet und führen deshalb zu ungültigem HTML. Erwähnt seien sie trotzdem:
Mit align="texttop" richten Sie den Text obenbündig zur Grafik aus, und zwar an der Oberkante des kleinsten Textes in der Zeile (texttop = oben am Text).
Mit align="absmiddle" richten Sie den Text absolut mittig zur Grafik aus, auch bei unterschiedlichen Textgrößen (absmiddle = absolute middle = in jedem Fall mittig).
Mit align="absbottom" richten Sie den Text untenbündig zur Grafik aus, und zwar an der Unterkante des kleinsten Textes in der Zeile (absbottom = absolute bottom = in jedem Fall untenbündig).
Mit align="baseline" richten Sie den Text genauso aus wie mit der Standardangabe align="bottom". Benutzen Sie deshalb besser die Standardangabe.

HTML 3.2 XHTML 1.0 deprecated (missbilligt) MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Text um Grafik fließen lassen

Grafiken, die Sie mit dem <img>-Tag referenzieren, können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um die Grafik. Mit zwei weiteren Attributen können Sie Abstand zum umfließenden Text erzeugen, damit der Text nicht direkt an der Grafik "klebt". Den automatischen Textumfluss können Sie auch abbrechen und die Textfortsetzung unterhalb der Grafik erzwingen. Alle dazu notwendigen Attribute sind allerdings als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit nach unten Stylesheets erzielen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text um Grafik fließen lassen</title>
</head>
<body>

<h1><img src="text.png" width="311" height="194" align="left" vspace="10" hspace="20" alt="Text?">Ein Text</h1>

<p>Manche Texte erschlie&szlig;en sich nur aus der n&ouml;tigen Distanz. <!-- usw. -->
Aber das hier, das ist richtiger Text. Und er flie&szlig;t sogar, n&auml;mlich um die
Grafik.<br clear="all"></p>

</body>
</html>

Erläuterung:

Mit align="left" richten Sie eine Grafik linksbündig aus. Nachfolgend notierter Text fließt rechts um die Grafik.
Mit align="right" können Sie die Grafik rechtsbündig ausrichten. Der nachfolgend notierte Text fließt dann links um die Grafik.
Von "nachfolgend notiertem Text" wird hier nur der Einfachheit halber gesprochen. Es kann sich um beliebige Elemente handeln, also z.B. auch andere Grafiken, Tabellen, Multimedia-Referenzen usw.

Um Abstand zwischen Grafik und umfließendem Text zu erzeugen, stehen die Attribute hspace und vspace zur Verfügung.
Mit hspace [Pixel] bestimmen Sie den Abstand zwischen Grafik und anderen Elementen links bzw. rechts davon (hspace = horizontal space = horizontaler Abstand).
Mit vspace [Pixel] bestimmen Sie den Abstand zwischen Grafik und anderen Elementen darüber bzw. darunter (vspace = vertical space = vertikaler Abstand).
Das Attribut hspace betrifft immer den linken und den rechten Randabstand von der Grafik, vspace immer den oberen und den unteren Randabstand. Wenn Sie also beispielsweise bei einer links ausgerichteten Grafik hspace definieren, wird nicht nur rechts der Grafik zum nebenstehenden Text ein Abstand erzeugt, sondern auch links zum Rand des Anzeigefensters hin. Um dies zu verhindern, können Sie exakter arbeiten, indem Sie nach unten Stylesheets verwenden.
Sie können beide Attribute notieren oder auch nur eines davon.

Um den automatischen Textumfluss zu unterbrechen und zu erzwingen, dass alles was folgt unterhalb der Grafik angezeigt wird, können Sie einen Seite Zeilenumbruch mit dem Attribut clear notieren.
Mit <br clear="all"> erreichen Sie, dass der Textfluss ab der nächsten Zeile in jedem Fall unterhalb der Grafik fortgesetzt wird.
Mit <br clear="left"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb einer linksbündig ausgerichteten Grafik fortgesetzt wird.
Mit <br clear="right"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb einer rechtsbündig ausgerichteten Grafik fortgesetzt wird.

HTML 3.2 XHTML 1.0 MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Grafik und andere Inhalte ausrichten mit Tabellen

In der Praxis kommt es häufig vor, dass Sie Grafiken sauber nebeneinander oder untereinander platzieren und mit Text beschriften wollen. In solchen Fällen bietet sich das Arbeiten mit "blinden", also unsichtbaren Kapitel Tabellen an.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Grafik und andere Inhalte ausrichten mit Tabellen</title>
</head>
<body>

<div align="center">
  <table border="0" cellpadding="4" width="600">
    <tr>
      <th><h3>Schadenfreude</h3></th>
      <th><h3>Erstaunen</h3></th>
      <th><h3>Skepsis</h3></th>
      <th><h3>Betretenheit</h3></th>
    </tr>
    <tr>
      <td align="center"><img src="ausdruck_1.gif" width="100" height="100" alt="Schadenfreude"></td>
      <td align="center"><img src="ausdruck_2.gif" width="100" height="100" alt="Erstaunen"></td>
      <td align="center"><img src="ausdruck_3.gif" width="100" height="100" alt="Skepsis"></td>
      <td align="center"><img src="ausdruck_4.gif" width="100" height="100" alt="Betretenheit"></td>
    </tr>
    <tr>
      <td align="center" valign="top">ist die sch&ouml;nste Freude, kann aber Feinde schaffen</td>
      <td align="center" valign="top">gebar die Philosophie und wird von Rechthabern immer wieder untersch&auml;tzt</td>
      <td align="center" valign="top">ist bisweilen angebracht, sollte aber nicht das weitere Dazulernen behindern</td>
      <td align="center" valign="top">ist sehr unangenehm, w&auml;hrt aber nicht ewig</td>
    </tr>
  </table>
</div>

</body>
</html>

Erläuterung:

Im Beispiel wird eine blinde Tabelle (border="0") mit vier Spalten definiert. In der ersten Zeile stehen vier Überschriften, in der zweiten vier entsprechende Grafiken, und in der dritten vier zugehörige Texte. Die Tabelle ist innerhalb eines allgemeinen Bereichs zentriert ausgerichtet (<div align="center">...</div>) und hat eine Breite von 600 Pixeln.

Mit cellpadding="4" im einleitenden <table>-Tag wird sichergestellt, dass sich die Zelleninhalte nicht zu nahe kommen.

Mit align="center" werden die Inhalte der Datenzellen zentriert ausgerichtet. Da die Beschreibungstexte unterschiedlich lang sein können, wird mit valign="top" in deren Datenzellen erreicht, dass sie alle obenbündig ausgerichtet werden.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Grafiken ausrichten mit CSS

Stylesheets bieten Eigenschaften an, mit deren Hilfe die beiden Funktionen nach oben Grafik zum umgebenden Text ausrichten und nach oben Text um Grafik fließen lassen ebenso realisierbar sind wie mit HTML. Das "Fein-Tuning" ist mit Hilfe von CSS sogar deutlich genauer. Mit CSS müssen Sie arbeiten, wenn Sie die in diesem Abschnitt beschriebenen Effekte erzielen und dabei aber mit der HTML-Variante "Strict" arbeiten wollen.
Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite vertical-align (Vertikale Ausrichtung)
Seite float (Textumfluss)
Seite clear (Fortsetzung bei Textumfluss)
Seite Außenrand und Abstand

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Grafiken ausrichten mit CSS</title>
</head>
<body>

<h1>Woran der Denker denkt</h1>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" style="vertical-align:text-top" alt="Denker">
  an das Oben?
</p>

<hr>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" style="vertical-align:middle" alt="Denker">
  an die Mitte?
</p>

<hr>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" style="vertical-align:text-bottom" alt="Denker">
  an das Unten?
</p>

<hr>

<h2>
  <img src="text.png" width="311" height="194" style="float:left; margin-right:20px;
  margin-bottom:10px" alt="Text?">Oder denkt er an ...?
</h2>

<p>
  Manche Texte erschlie&szlig;en sich nur aus der n&ouml;tigen Distanz. <!-- usw. -->
  Aber das hier, das ist richtiger Text. Und er flie&szlig;t sogar,
  n&auml;mlich um die Grafik.<br style="clear:both">
</p>

</body>
</html>

Erläuterung:

Mit style="vertical-align:text-top" erreichen Sie in einem <img>-Tag das Gleiche wie mit align="top",
mit style="vertical-align:middle" das Gleiche wie in standardkonformen Browsern mit align="middle",
und mit style="vertical-align:text-bottom" das Gleiche wie mit align="bottom".
Mit style="float:left; margin-right:20px; margin-bottom:10px" wird erreicht, dass die Grafik links ausgerichtet wird und nachfolgender Text rechts um die Grafik fließt. Dabei wird zwischen Grafik und Text ein Abstand von 20 Pixeln gehalten (links von der Grafik wird dagegen, anders als beim HTML-Attribut hspace, kein Abstand von 20 Pixeln erzeugt). Nach unten hin, also zum Text unterhalb wird ein Abstand von 10 Pixeln definiert.

nach oben
weiter | Seite Grafiken als Verweise
zurück | Seite Grafiken einbinden
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Grafiken

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Grafiken / Grafiken als Verweise

SELFHTML

Grafiken als Verweise
Informationsseite

nach unten Grafiken anstelle von Verweistext definieren
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Grafiken anstelle von Verweistext definieren

Wenn Sie Verweise setzen, müssen Sie immer auch einen Verweistext definieren, also den Text, der dem Anwender als anklickbar dargestellt wird. Anstelle eines Verweistextes können Sie jedoch auch eine Grafikreferenz notieren. Dann ist die gesamte Grafik anklickbar, und beim Anklicken der Grafik wird der Verweis ausgeführt. Von dieser Möglichkeit wird in der Praxis sehr oft Gebrauch gemacht, bei Werbe-Bannern zum Beispiel, aber auch bei grafischen Navigationsleisten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Grafiken anstelle von Verweistext definieren</title>
</head>
<body>

<h1>Navigationsleisten</h1>

<p>
  <a href="home.htm"><img src="button1.jpg" width="160" height="34" border="0" alt="Home"></a>
  <a href="seite.htm"><img src="button2.jpg" width="160" height="34" border="0" alt="zurück"></a>
  <a href="seite.htm"><img src="button3.jpg" width="160" height="34" border="0" alt="weiter"></a>
  <a href="thema.htm"><img src="button4.jpg" width="160" height="34" border="0" alt="THEMA"></a>
</p>

<p>Was w&auml;re das Web ohne sie!</p>

</body>
</html>

Erläuterung:

Das Beispiel zeigt eine horizontale Navigationsleiste. Die vier Buttons der Leiste liegen in Form der Grafiken button1.jpg bis button4.jpg vor. Alle Grafiken sind gleich groß und haben ein einheitliches Aussehen. Sie unterscheiden sich lediglich durch die Beschriftung.

Definiert wird eine Zeile mit vier Zellen. In jeder der Zellen wird ein Verweis notiert. Zwischen <a href=> und </a> wird jedoch kein Verweistext notiert, sondern die Grafikreferenz für je einen der Buttons. Auf diese Weise wird die jeweilige Grafik anklickbar und führt beim Anklicken zu dem Ziel, das in href notiert ist.

Wichtig ist auch die Angabe border="0" in den Grafikreferenzen (siehe auch Seite Rahmen um Grafiken). Würde diese Angabe fehlen, dann würde der Browser einen Rahmen um die Grafik anzeigen, und zwar in der Farbe für Verweise, um diese als Verweis zu kennzeichnen. Da die Buttons im Beispiel aber für den Anwender eindeutig als Grafiken mit Verweis-Funktion identifizierbar sind, wird der Rahmen unterdrückt.

Beachten Sie:

Wenn Sie mit border="0" den Rahmen um eine als Verweis dienende Grafik unterdrücken, kann der Anwender die Grafik nicht mehr unmittelbar als Verweis erkennen. Nur wenn er mit dem Mauszeiger über die Grafik fährt, kann er an dem Mauszeigersymbol erkennen, dass es sich um einen Verweis handelt. Deshalb sollten Sie den verweiskennzeichnenden Rahmen nur dann unterdrücken, wenn die Grafik auf den ersten Blick als Verweis erkennbar ist.

Wegen der Angabe border="0" benutzt das obige Beispiel die HTML-Variante Transitional, denn das border-Attribut ist im HTML-Standard als deprecated gekennzeichnet. Mit einem Seite zentralen CSS-Format img { border:none } wäre dieses Problem allerdings elegant zu umgehen, und in allen <img>-Tags innerhalb von Verweisen könnte auf das border-Attribut verzichtet werden. Bei nicht CSS-fähigen Browsern würde dann aber doch der Rahmen angezeigt.

Nur zum Verständnis: am obigen Anzeigebeispiel sind in Wirklichkeit vier Dateien beteiligt, die alle den gleichen Aufbau und immer an der gleichen Stelle die Navigationsleiste haben. Nur sind die anklickbaren Grafiken in jeder der Dateien mit unterschiedlichen Verweiszielen verknüpft. Damit zeigt das Beispiel, wie sich mit verschiedenen Dateien, die ein einheitliches Layout und die Navigationsleiste stets an der gleichen Stelle haben, ein in sich geschlossenes Web-Projekt realisieren lässt.

nach oben
weiter | Seite Verweis-sensitive Grafiken (Image Maps)
zurück | Seite Grafiken ausrichten
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Grafiken

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

SELFHTML

Verweis-sensitive Grafiken (Image Maps)
Informationsseite

nach unten Verweis-sensitive Grafiken definieren
nach unten Server-seitige verweis-sensitive Grafiken
nach unten

HTML 3.2 XHTML 1.0 MS IE 2.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verweis-sensitive Grafiken definieren

Verweis-sensitive Grafiken sind Grafiken, in denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt. Auf diese Weise kann der Anwender in einigen Fällen wesentlich intuitiver und schneller zu Information gelangen als durch lange verbale Verweislisten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Verweis-sensitive Grafiken definieren - map, area, usemap</title>
</head>
<body>

<h1>Schnell zur Stadt oder Region Ihrer Wahl!</h1>

<p>
  <img src="karte.png" width="345" height="312" border="0" alt="Karte" usemap="#Landkarte">
  <map name="Landkarte">
    <area shape="rect" coords="11,10,59,29"
          href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
    <area shape="rect" coords="42,36,96,57"
          href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
    <area shape="rect" coords="42,59,78,80"
          href="http://www.mainz.de/" alt="Mainz" title="Mainz">
    <area shape="rect" coords="100,26,152,58"
          href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
    <area shape="rect" coords="27,113,93,134"
          href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
    <area shape="rect" coords="100,138,163,159"
          href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
    <area shape="rect" coords="207,77,266,101"
          href="http://www.wuerzburg.de/" alt="W&uuml;rzburg" title="W&uuml;rzburg">
    <area shape="rect" coords="282,62,344,85"
          href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">
    <area shape="rect" coords="255,132,316,150"
          href="http://www.nuernberg.de/" alt="N&uuml;rnberg" title="N&uuml;rnberg">
    <area shape="rect" coords="78,182,132,200"
          href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
    <area shape="rect" coords="142,169,200,193"
          href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
    <area shape="rect" coords="140,209,198,230"
          href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
    <area shape="rect" coords="187,263,222,281"
          href="http://www.ulm.de/" alt="Ulm" title="Ulm">
    <area shape="rect" coords="249,278,304,297"
          href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
    <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
          href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
  </map>
</p>

</body>
</html>

Erläuterung:

Mit <map name="[Name]"> leiten Sie die Definition der verweis-sensitiven Flächen einer Grafik ein. Beim name-Attribut vergeben Sie einen Namen für die verweis-sensitive Grafik. Dieser Name muss nichts mit dem Dateinamen der Grafik zu tun haben. Es handelt sich vielmehr um einen Ankernamen, der die gleiche Bedeutung hat wie der Name in einem Seite Anker innerhalb einer HTML-Datei. Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).

Das map-Element kann an einer beliebigen Stelle innerhalb des Körpers einer HTML-Datei und erzeugt selbst keine Bildschirmausgabe. Es empfiehlt sich jedoch, das Element an einer markanten, gesonderten Stelle innerhalb der Datei zu notieren, z.B. am Anfang oder am Ende des Dateikörpers.

Zwischen dem einleitenden <map...> und dem abschließenden </map> definieren Sie die verweis-sensitiven Flächen. Mit <area...> definieren Sie einzelne verweis-sensitive Flächen einer bestimmten Grafik, die Sie an einer anderen Stelle einbinden.

Mit shape="rect" bestimmen Sie eine viereckige Fläche, mit shape="circle" einen Kreis, und mit shape="poly" können Sie ein beliebiges Vieleck als verweis-sensitiv definieren.

Bei coords geben Sie die Koordinaten der verweis-sensitiven Flächen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll. Trennen Sie alle Pixelwerte durch Kommata.

  • Ein Viereck (shape="rect") definieren Sie mit den Koordinaten für x1,y1,x2,y2
    wobei bedeuten:
    x1 = linke obere Ecke, Pixel von links
    y1 = linke obere Ecke, Pixel von oben
    x2 = rechte untere Ecke, Pixel von links
    y2 = rechte untere Ecke, Pixel von oben
  • Einen Kreis (shape="circle") definieren Sie mit den Koordinaten für x,y,r
    wobei bedeuten:
    x = Mittelpunkt, Pixel von links
    y = Mittelpunkt, Pixel von oben
    r = Radius in Pixel
  • Ein Polygon (shape="poly") definieren Sie mit den Koordinaten x1,y1,x2,y2 ... xn,yn
    wobei bedeuten:
    x = Pixel einer Ecke von links
    y = Pixel einer Ecke von oben
    Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.

Mit dem Attribut href bestimmen Sie das Verweisziel, das aufgerufen werden soll, wenn der Anwender die verweis-sensitive Fläche anklickt. Dabei gelten die Regeln zum Seite Referenzieren in HTML - es kann sich also um beliebige Verweisziele innerhalb oder außerhalb des eigenen Web-Projekts handeln. Wenn Sie eine Fläche explizit als nicht anklickbar ausweisen wollen, können Sie dies mit dem Attribut nohref tun (ohne Wertzuweisung). Nötig ist dies allerdings nicht, denn Flächen, die nicht durch href abgedeckt sind, sind automatisch nicht anklickbar.

Mit dem alt-Attribut notieren Sie Alternativtext für den Fall, dass die verweis-sensitive Fläche nicht angezeigt werden kann. Dieses Attribut ist ein Pflichtattribut, d.h. Sie müssen es notieren, um gültiges HTML zu erzeugen.

Damit beim Überfahren einer verweis-sensitiven Fläche mit der Maus ein kleines Info-Fenster ("Tooltip") erscheint, können Sie in jeweils das Kapitel Universalattribut title="angezeigter Text" verwenden. Im Beispiel haben die title-Attribute jeweils dieselben Werte wie die alt-Attribute.

Die Grafik, die verweis-sensitive Flächen haben soll, referenzieren Sie auf herkömmliche Weise mit Hilfe des <img>-Tags. Um die Grafik als verweis-sensitiv zu kennzeichnen, müssen Sie das Attribut usemap notieren. Dieses Attribut erwartet als Wertzuweisung einen URI, der zu der Stelle führt, an der das zugehörige map-Element notiert ist. Normalerweise ist dieses Element in der gleichen Datei notiert. Deshalb besteht die Zuweisung einfach in einem Gatterzeichen # und dem Namen des Ankers, der bei <map name=> definiert wurde.

Beachten Sie:

Um die gewünschten Pixelkoordinaten für verweis-sensitive Flächen einer Grafik zu erhalten, können Sie beispielsweise ein Grafikprogramm benutzen, bei dem Sie mit der Maus in der angezeigten Grafik herumfahren können und dabei die genauen Pixelkoordinaten des Mauszeigers angezeigt bekommen.

Innerhalb eines jeden <area>-Tags ist auch das Attribut tabindex erlaubt. Die Wirkung ist die gleiche wie bei der Seite Tabulator-Reihenfolge bei Verweisen und wird dort näher beschrieben. Ebenfalls erlaubt ist das Attribut accesskey. Dies funktioniert genau wie bei Seite Tastaturkürzeln für Verweise und wird dort näher beschrieben.

Im <area>-Tag kommen häufig auch JavaScript- Seite Event-Handler zum Einsatz. Beim Aufruf von JavaScript-Funktionen mit Event-Handlern darf jedoch im <area>-Tag das href-Attribut nicht fehlen, sonst streikt der Netscape Navigator. Um das Problem zu lösen, können Sie eine Angabe notieren wie:
<area shape="rect" coords="1,1,249,49" href="#" onclick="IhreFunktion()" alt="Kurze Beschreibung">
Durch die Wertzuweisung "#" an das href-Attribut wird ein "leerer" Verweis erzeugt, und Netscape führt dann auch den Event-Handler (hier: onclick) aus.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das area-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <area  ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 2.0 XHTML 1.0 MS IE 2.0 Netscape 1.1 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Server-seitige verweis-sensitive Grafiken

Bei dieser Methode übermittelt der Browser lediglich die Klickposition der Maus in Pixeln an den Server, indem diese Information als normaler GET-Parameter an die URL angehängt wird, welche in dem Link definiert ist. Welche Aktion der Server daraufhin startet, hängt komplett von ihm ab.

Im Gegensatz zu dem Anschein, den die früher für diese Technik enthaltene Beschreibung von SELFHTML erweckt hat, ist für die Nutzung keinerlei Spezialprogramm erforderlich. Jede serverseitige Programmiersprache kann genutzt werden, um den URL-Parameter auszuwerten und entsprechend zu reagieren.

Die tatsächlich schlechteste Nutzung wäre in der Tat, die oben beschriebenen verweis-sensitiven Grafiken serverseitig zu realisieren. Als Nutzung denkbar wäre alles, was serverseitig einen pixelgenauen Klick auf einer Grafik erfassen muss, beispielsweise um auf einer Landkarte eine Position zu erfassen (mit zwei Klicks die Entfernung zwischen den beiden Punkten berechnen).

Die Klickkoordinaten werden in der Form ?xzahlwert,yzahlwert an die im Link aufgeführte URL angehängt (beispielsweise ?23,16. Beachten Sie bei der serverseitigen Auswertung, dass diese Form von der üblichen Methode ?x=23&y=16 abweicht und sich deshalb den üblichen Zugriffsmethoden (z.B. in PHP über das Array $_GET) entziehen kann.

Beispiel:

<a href="skriptname.ext"><img src="datei.gif" ismap alt="Grafik"></a>

Erläuterung:

Es handelt sich also um eine schlichte Seite Grafik als Verweis. Im Beispiel wird die Datei datei.gif auf diese Weise notiert. Das <img>-Tag muss das zusätzliche Attribut ismap enthalten. Hierdurch wird dem Server-Rechner mitgeteilt, dass es sich um eine verweis-sensitive Grafik handelt.

Das Ziel des Verweises bei href ist ein auswertendes Serverprogramm, welches in der Lage ist, auf die übermittelten Klickkoordinaten zu reagieren.

Da serverseitige verweissensitive Grafiken historisch gesehen die zuerst entwickelte Form verweissensitiver Grafiken waren, gab es früher diverse Programme, denen man durch Einbindung einer passenden Definitionsdatei sagen konnte, welche Klickbereiche auf welche URL verlinken sollten. Derartige Programme sind heute ausgestorben.

Eine Alternative zur serverseitigen verweissensitiven Grafik zur Übermittlung der Klickposition ist die Verwendung von Seite Grafischen Formularbuttons (<input type="image">). Die Klickposition auf so einen Grafikbutton wird im Formular übermittelt, überdies auch etwas mundgerechter in klassischer Formularform.

nach oben
weiter | Seite Formulare definieren
zurück | Seite Grafiken als Verweise
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Grafiken

© 2007 Seite Impressum


SELFHTML: HTML / Formulare

SELFHTML

Formulare
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei.
In diesem Abschnitt wird beschrieben, wie Sie Formulare in Ihre Web-Seiten einbauen können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Formulare definieren
Seite Eingabefelder und Eingabebereiche
Seite Auswahllisten, Radio-Buttons und Checkboxen
Seite Felder für Datei-Upload
Seite Versteckte Elemente
Seite Gruppierung von Elementen und Label für Elemente
Seite Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
Seite Klick-Buttons
Seite Buttons zum Absenden oder Abbrechen
Seite Formulare mit CSS formatieren
Seite Formulare verarbeiten

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Formulare definieren

SELFHTML

Formulare definieren
Informationsseite

nach unten Allgemeines zu Formularen
nach unten Formularbereich definieren
nach unten Zielfenster für Server-Antwort
nach unten Zeichenkodierung der Formulardaten
nach unten Weitere Informationen
nach unten

Allgemeines zu Formularen

HTML stellt die Möglichkeit zur Verfügung, Formulare zu erstellen. In Formularen kann der Anwender Eingabefelder ausfüllen, in mehrzeiligen Textfeldern Text eingeben, aus Listen Einträge auswählen usw. Wenn das Formular fertig ausgefüllt ist, kann der Anwender auf einen Button klicken, um das Formular abzusenden.

Dazu geben Sie beim Erstellen eines Formulars an, was mit den Daten des ausgefüllten Formulars passieren soll. Sie können die Daten dann von einem CGI-Programm auf dem Server-Rechner weiterverarbeiten lassen.

Formulare können sehr unterschiedliche Aufgaben haben. So werden sie zum Beispiel eingesetzt:

  • um bestimmte, gleichartig strukturierte Auskünfte von Anwendern einzuholen,
  • um Anwendern das Suchen in Datenbeständen zu ermöglichen,
  • um Anwendern die Möglichkeit zu geben, selbst Daten für einen Datenbestand beizusteuern,
  • um dem Anwender die Möglichkeit individueller Interaktion zu bieten, etwa um aus einer Produktpalette etwas Bestimmtes zu bestellen.

Ein Software-Hersteller könnte z.B. ein Formular zur Verfügung stellen, in dem der Anwender angeben kann, welche Produkte der Firma er besitzt, wie er Kenntnis von den Produkten erhalten hat, welchen Beruf er ausübt, auf welchem Rechnertyp die Software bei ihm läuft usw. Auf diese Weise könnte er gleichartig strukturiertes und daher gut vergleichbares Feedback von Anwendern einholen.

Viele Suchdienste im Internet bieten dem aufrufenden Web-Browser Eingabeformulare an, in denen der Anwender seinen Suchwunsch spezifizieren kann. Ohne solche Formulare wäre das Durchsuchen gar nicht möglich. Die meisten Suchdienste bieten darüber hinaus auch die Möglichkeit an, eigene Internet-Adressen in die Datenbank einzuspeisen. Das Einholen der dazu nötigen Information geschieht ebenfalls mit Hilfe von Formularen.

Immer zahlreicher werden auch die Online-Shops im Internet. Egal ob Bücher, Tickets oder Unterwäsche - um solche Bestell-Services zu realisieren, sind Formulare erforderlich, in denen der Anwender seine Bestellwünsche genau angeben kann.

Wenn Sie dem Anwender auf Ihren Web-Seiten einfach nur eine Möglichkeit anbieten wollen, direkt mit Ihnen in Kontakt zu treten, genügt allerdings auch ein einfacher Seite E-Mail-Verweis an die eigene E-Mail-Adresse.

Beachten Sie:

Nicht wenige Anbieter versuchen über Formulare, Anwenderadressen zu sammeln, um diese dann zu verkaufen, oder um Auskünfte einzuholen, zu denen ein Anwender nicht verpflichtet ist. Dazu wird häufig ein Anwenderbegehren als Köder benutzt - beispielsweise ein Gewinnspiel oder die Downloadmöglichkeit der kostenlosen Ausprobierversion einer teueren Software.

Dieser Missbrauch hat einige selbsternannte Hüter des Datenschutzes auf den Plan gerufen, die aber leider an der falschen Ecke kehren und sich nicht an die rechtlich meist gut abgesicherten Datenjäger wenden, sondern an ahnungslose Homepage-Besitzer, die ein kleines Formular im Web haben und plötzlich dafür abgemahnt werden. Dabei wird mit dem Prinzip der so genannten "Datensparsamkeit" argumentiert (siehe auch Hinweise zum Teledienste-Datenschutzgesetz (TDDSG) im Abschnitt Seite Gesetze für "neue Medien" (in Deutschland)). Versuchen Sie also nicht, den Anwender mit Hilfe von Formularen wie eine Zitrone auszuquetschen. Beschränken Sie sich auf solche Formularfelder, die für den Formularzweck erkennbar nötig sind.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Formularbereich definieren

Sie können an einer beliebigen Stelle innerhalb des Dateikörpers einer HTML-Datei ein Formular definieren.

Beispiel:

<form action="http://www.example.org/cgi-bin/feedback.pl" method="get">
<!-- hier folgen die Formularelemente -->
</form>

Erläuterung:

Mit <form>...</form> definieren Sie ein Formular (form = Formular). Alles, was zwischen dem einleitenden <form>-Tag und dem abschließenden Tag </form> steht, gehört zum Formular. Das sind hauptsächlich Elemente des Formulars wie Eingabefelder, Auswahllisten oder Buttons.

Um die Formularelemente zu platzieren und zu beschriften, können Sie dazwischen aber auch andere HTML-Elemente notieren. Dabei müssen Sie folgendes beachten: Gemäß der Seite HTML-Variante Strict dürfen Sie innerhalb eines Formulars nur Seite Block-Elemente (und Script-Bereiche) notieren, also etwa Überschriften, Textabsätze, allgemeine Bereiche oder Tabellen. In der HTML-Variante Transitional ist es dagegen außerdem erlaubt, zwischen <form> und </form> auch gemischten Inhalt aus Text und Seite Inline-Elementen zu notieren. Innerhalb des form-Elements können Sie auch mit einem fieldset-Element arbeiten, um Formularelemente zu umschließen (siehe dazu Seite Elemente gruppieren).

Im einleitenden <form>-Tag geben Sie mit dem Pflichtattribut action an, an welchen URI die Formulardaten beim Absenden des Formular übertragen werden sollen (action = Aktion). Der URI sollte die Adresse eines Programmes auf dem Server-Rechner sein, das die Formulardaten weiterverarbeitet. Üblicherweise handelt es sich dabei um ein CGI-Script, das z.B. in Perl und PHP geschrieben wurde.

Für den Wert des action-Attributes gelten die Regeln zum Seite Referenzieren in HTML. Das Referenzieren mit relativen oder absoluten Pfadangaben ist also ebenso möglich wie das oben im Beispiel gezeigte Referenzieren mit einem absoluten URI:

<form action="/cgi-bin/auswertung.pl">
<form action="../../cgi-bin/suche.cgi">
<form action="konktakt.php">

Eine weiteres wichtiges Attribut bei der Formulardefinition ist das Attribut method. Dabei bestimmen Sie, nach welcher HTTP-Übertragungsmethode die Formulardaten an ihr Ziel gelangen. Dabei gibt es zwei mögliche Werte:

  • Wenn Sie method="get" wählen, hängt der Browser die Formulardaten als Parameter an die Aufrufadresse an (diese Angabe ist nicht zwingend erforderlich, da get als Default-Einstellung definiert ist). Beachten Sie, dass die Anzahl der übergebenen Zeichen je nach Browser auf ca. 2000 limitiert sein kann. Die Anfrage, die beim Server eintrifft, sieht dann beispielsweise so aus:
    http://www.example.org/cgi-bin/feedback.cgi?AnwenderName=Stefan+M%FCnz&AnwenderMail=beispiel@example.org&Text=Das+ist+ein+kleiner+Text. Das verarbeitende CGI-Programm kann diese als Parameter übergebene Zeichenkette auslesen und für die Datenverarbeitung auseinanderdröseln. Wenn Sie sich näher dafür interessieren, können Sie den Abschnitt Seite HTML-Formulare und CGI lesen.
  • Wenn Sie method="post" wählen, überträgt der Web-Browser die Formulardaten mit einer speziellen POST-Anfrage an den Web-Server (post = verschicken). Der Web-Server stellt die Daten dem CGI-Programm über den Standardeingabekanal zur Verfügung. Bei CGI-Scripts müssen Sie diese POST-Methode auf jeden Fall dann verwenden, wenn die Formulardaten zu umfangreich für die GET-Methode sind.

Das W3-Konsortium empfiehlt, die Methode get dann zu wählen, wenn das auswertende Programm die Daten nur zur Ablaufsteuerung benötigt (z.B. für eine Suche oder zum Weiterblättern), während die Methode post für Fälle empfohlen wird, in denen die Daten über das auswertende Programm hinaus weiterverarbeitet werden (z.B. Speicherung in einer Datenbank oder Auslösung einer Bestellung).

Beachten Sie:

Es ist möglich, als Wert für das Attribut action eine E-Mail-Adresse anzugeben, z.B. action="mailto:fritz.eierschale@example.org" zusammen mit den Attributen method="post" enctype="text/plain". Das erwünschte Ziel davon ist, dass der Web-Browser die Formulardaten an die angegebene E-Mail-Adresse versendet. Bei solchen E-Mail-Formularen besteht keine Garantie auf Erfolg. Es hängt vom Browser und anderen Einstellungen auf dem Rechner des Anwenders ab, ob der Formularversand klappt. E-Mail-Formulare gelten deshalb mittlerweile als überholt, zumal es Alternativen gibt. Mehr dazu im Abschnitt Seite Formulare verarbeiten.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zielfenster für Server-Antwort

Wenn Sie mit Kapitel Frames arbeiten und in einem Frame-Fenster ein Formular haben, nach dessen Absenden die Server-Antwort bzw. die Antwort eines CGI-Scripts in einem anderen Frame-Fenster angezeigt werden soll, können Sie das gewünschte Zielfenster angeben.

Beispiel:

<form action="/cgi-bin/auswertung.pl" method="get" target="Daten">
<!-- hier folgen die Formularelemente -->
</form>

Erläuterung:

Mit dem Attribut target können Sie im einleitenden <form>-Tag den Namen des Frame-Fensters angeben, in dem die Server-Antwort ausgegeben werden soll. Es muss sich entweder um einen Fensternamen handeln, der für ein Frame-Fenster dem name-Attribut im <frame>-Tag vergeben wurde, oder um einen der folgenden reservierten Fensternamen:
_self, um die Server-Antwort im aktuellen Fenster auszugeben,
_parent, um für die Server-Antwort bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um für die Server-Antwort bei verschachtelten Framesets alle Framesets zu sprengen.

Beachten Sie:

Das target-Attribut ist zwar nicht als deprecated gekennzeichnet, doch um es einzusetzen, müssen Sie die HTML-Variante Transitional verwenden. Der Grund ist, dass dieses Attribut vorwiegend für Verweise bei Verwendung von Frames gedacht ist und Frames eine eigene HTML-Variante haben, die von der Einstufung her der Variante Transitional entspricht.

HTML 4.0 XHTML 1.0 Zeichenkodierung der Formulardaten

Sie können angeben, mit welcher Zeichenkodierung der Browser die eingegebenen Formulardaten an den Web-Server senden soll. Dabei können Sie eine oder mehrere Kodierungen angeben, aus denen der Browser eine unterstützte auswählen kann. Näheres zu Zeichenkodierungen können Sie auf der Seite Seite Computer und geschriebene Sprache nachlesen.

Beispiel:

<form action="/cgi-bin/auswertung.pl" method="post" accept-charset="ISO-8859-1">
<!-- hier folgen die Formularelemente -->
</form>

Erläuterung:

Mit dem Attribut accept-charset können Sie Kodierungen angeben. Trennen Sie mehrere Angaben durch Leerzeichen oder Kommata. Erlaubt sind Kodierungsangaben, wie sie auf der Web-Adresse englischsprachige Seite http://www.iana.org/assignments/character-sets angegeben sind. Die im Beispiel genannte Kodierung ISO-8859-1 wird insbesondere auf der Seite Seite Zeichenkodierungen (ISO-8859-Familie und andere) beschrieben.

Beachten Sie:

Die Implementierung der Zeichenkodierung beim Formulardatenversand ist in den einzelnen Browsern unterschiedlich gelöst. Daraus resultieren diverse Probleme bei der Erkennung, welche Kodierung tatsächlich benutzt wurde.

Um Problemen absolut aus dem Weg zu gehen und sicherzustellen, dass die gesendeten Daten in einer verarbeitungsfähigen Form bei Ihnen ankommen, beachten Sie die folgenden Hinweise:

  • Verwenden Sie nur eine einzige Kodierungsangabe im Attribut, keine Liste von mehreren Alternativen. Ein Browser ist nicht gezwungen, die "passendste" Kodierung zu verwenden, er kann auch einfach die allererste verwenden. Da die meisten Browser nicht mitsenden, welche Kodierung tatsächlich verwendet wurde, wäre es Ihnen unmöglich zu erkennen, welche Kodierung verwendet wurde. Bei nur einer eingetragenen Möglichkeit sind keine Zweifel möglich.
  • Setzen Sie die Angaben für die Kodierung im HTTP-Header (per Serverkonfiguration - wird derzeit in SELFHTML nicht behandelt), im Seite Meta-Tag und im Attribut accept-charset auf identische Werte. Manche Browser werden verwirrt und verhalten sich u.U. unvorhersehbar, wenn sich diese drei Angaben widersprechen.
  • Um wirklich alle eingebbaren Zeichen der Benutzer erhalten zu können, benutzen Sie die Unicode-Kodierung Seite UTF-8. Da UTF-8 relativ neu ist und erst in den letzten Jahren Verbreitung gefunden hat, könnten alte Browser mit dieser Kodierung Probleme haben - diese werden allerdings zum Glück immer seltener eingesetzt.

Probleme mit unpassender Kodierungsangabe im Formular zeigen sich durch die folgenden möglichen Indizien:

  • Umlaute werden "zerstört", d.h. anstelle des Umlauts stehen ein oder mehrere anscheinend sinnlose Zeichen, die normalen Buchstaben von A bis Z erscheinen jedoch problemlos. Dieses Problem tritt auf, wenn die Kodierung der eingegebenen Daten eine andere ist, als die der ausgegebenen Daten, ohne dass eine entsprechende Umkodierung erfolgt.
  • Anstelle von Zeichen tauchen numerische Zeichenreferenzen der Form &#1234; im Text auf. Alternativ erscheinen anstelle der Zeichen auch Fragezeichen. In beiden Fällen hat der Benutzer ein Zeichen in das Formular eingegeben, welches sich mit der Kodierung laut accept-charset des Formulars nicht kodieren lässt.

Wenn Sie Ihre Formulare und die serverseitigen Skripte in die Lage versetzen, UTF-8 zu verarbeiten, können alle diese Probleme umgangen werden. Die Verwendung von UTF-8 bzw. generell Unicode ist daher sehr empfehlenswert - auch wenn Sie keine internationale Website planen.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo das form-Element vorkommen darf, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Formulare (<form>...</form>)
Seite Attribut-Referenz für Formulare (<form>...</form>)

Zur Datenverarbeitung von Formularen mit Hilfe von CGI-Scripts gibt es innerhalb der vorliegenden Dokumentation das Kapitel Kapitel CGI/Perl.

nach oben
weiter | Seite Eingabefelder und Eingabebereiche
zurück | Seite Verweis-sensitive Grafiken (Image Maps)
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Eingabefelder und Eingabebereiche

SELFHTML

Eingabefelder und Eingabebereiche
Informationsseite

nach unten Einzeilige Eingabefelder definieren
nach unten Textvorbelegung bei einzeiligen Eingabefeldern
nach unten Eingabefelder für Passwörter
nach unten Mehrzeilige Eingabebereiche definieren
nach unten Textvorbelegung bei mehrzeiligen Eingabebereichen
nach unten Zeilenumbruch bei mehrzeiligen Eingabebereichen
nach unten Eingabefelder und Eingabebereiche auf "nur lesen" setzen
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Einzeilige Eingabefelder definieren

Einzeilige Eingabefelder dienen zur Aufnahme von einem oder wenigen Wörtern oder einer Zahl.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Einzeilige Eingabefelder definieren</title>
</head>
<body>

<h1>Formular f&uuml;r Namenseingabe</h1>

<form action="input_text.htm">
  <p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30"></p>
  <p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40"></p>
</form>

</body>
</html>

Erläuterung:

<input> definiert ein einzeiliges Eingabefeld (input = Eingabe). Der Vollständigkeit halber sollten Sie die Angabe type="text" dazusetzen.

Jedes Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Der vergebene Name wird bei CGI-Scripts benötigt, um auf die Daten des Eingabefeldes zugreifen zu können. Bei E-Mail-Formularen taucht der Name als Feldname auf. Und auch bei dem Formularfeldzugriff mit JavaScript ist der Name von Bedeutung.

Ferner sollten Sie bei einzeiligen Eingabefeldern immer die Anzeigelänge in Zeichen mit size sowie die interne Feldlänge in Zeichen mit maxlength bestimmen. Beide Angaben bedeuten die Anzahl Zeichen (size = Größe, maxlength = maximal length = maximale Länge). Wenn die interne Feldlänge maxlength größer ist als die angezeigte Feldlänge size (wie im zweiten Eingabefeld des obigen Beispiels), dann wird bei längeren Eingaben automatisch gescrollt (im Beispiel also ab dem 31. eingegebenen Zeichen).

Um Beschriftung und Eingabefelder ordentlich zu positionieren, empfiehlt sich übrigens der Einsatz einer "blinden" Kapitel Tabelle.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Einzeilige Eingabefelder definieren</title>
</head>
<body>

<h1>Formular f&uuml;r Namenseingabe</h1>

<form action="input_text_tabelle.htm">
  <table border="0" cellpadding="0" cellspacing="4">
    <tr>
      <td align="right">Vorname:</td>
      <td><input name="vorname" type="text" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td align="right">Zuname:</td>
      <td><input name="zuname" type="text" size="30" maxlength="40"></td>
    </tr>
  </table>
</form>

</body>
</html>

Erläuterung:

Das Beispiel zeigt das gleiche Formular wie im Beispiel weiter oben. Diesmal stehen jedoch Beschriftung und zugehöriges Formularfeld in je einer Tabellenzeile sauber nebeneinander. Die Beschriftungstexte werden dabei rechtsbündig ausgerichtet und erscheinen dadurch bündig zu den Eingabefeldern hin orientiert.

Wichtig ist, dass das form-Element außerhalb der Tabelle steht, oder andersherum, dass die Tabelle als Element innerhalb des Formulars notiert wird.

Beachten Sie:

Das <input>-Tag ist ein so genanntes Standalone-Tag. Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das input-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <input ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

Mit Hilfe von JavaScript können Sie die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. So können Sie zum Beispiel erzwingen, dass in einem Eingabefeld eine Zahl in einem bestimmten Wertebereich eingegeben wird usw. Innerhalb dieser Dokumentation finden Sie ein Anwendungsbeispiel Seite Formulareingaben überprüfen.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Textvorbelegung bei einzeiligen Eingabefeldern

Sie können ein einzeiliges Eingabefeld mit einem Inhalt vorbelegen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textvorbelegung bei einzeiligen Eingabefeldern</title>
</head>
<body>

<h1>Einfach &uuml;berschreiben...</h1>

<form action="input_text.htm">
  <p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30" value="Michaela"></p>
  <p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40" value="Mustermann"></p>
</form>

</body>
</html>

Erläuterung:

Mit dem zusätzlichen Attribut value können Sie einen Text bestimmen, mit dem das Feld vorbelegt wird (value = Wert).

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Eingabefelder für Passwörter

Für die Eingabe von Geheimnummern, Passwörtern usw. gibt es einen speziellen Typ von Eingabefeld. Die eingegebenen Zeichen werden dabei durch Platzhalter (meistens Sternchen) dargestellt, sodass Personen im Raum des Anwenders nicht zufällig das eingegebene Passwort mitlesen können.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Eingabefelder für Passwörter</title>
</head>
<body>

<h1>Nur nicht auf die Tastatur gucken lassen ... :-)</h1>

<form action="input_password.htm">
  <p>Kennwort:<br><input name="kennwort" type="password" size="12" maxlength="12"></p>
</form>

</body>
</html>

Erläuterung:

Eingabefelder für Passwörter werden mit type="password" im <input>-Tag definiert.

Beachten Sie:

Passwörter werden beim normalen HTTP-Protokoll trotz der verdeckten Eingabe im Klartext über das Internet übertragen. Weisen Sie Anwender in ernsthaften Zusammenhängen auf diese Tatsache bitte explizit hin. Für eine verschlüsselte Kommunikation zwischen Browser und Server gibt es das HTTPS-Protokoll, das der Web-Server unterstützen muss. Fragen Sie gegebenenfalls Ihren Provider oder Webmaster danach.

Ein Passwortfeld in HTML ist keine Abfrage für geschützte Web-Seiten. Lesen Sie zu diesem Thema den Abschnitt über Seite .htaccess - Server-Reaktionen kontrollieren.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Mehrzeilige Eingabebereiche definieren

Mehrzeilige Eingabefelder dienen zur Aufnahme von Kommentaren, Nachrichten usw.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mehrzeilige Eingabebereiche definieren</title>
</head>
<body>

<h1>Ganz spontan</h1>

<form action="textarea.htm">
  <p>Welche HTML-Elemente fallen Ihnen ein, und was bewirken sie:<br>
    <textarea name="user_eingabe" cols="50" rows="10"></textarea>
  </p>
</form>

</body>
</html>

Erläuterung:

<textarea ...> leitet ein mehrzeiliges Eingabefeld ein (textarea = Textbereich). Jedes mehrzeilige Eingabefeld sollte ebenso wie ein nach oben einzeiliges Eingabefeld einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.

Pflicht ist die Angabe zur Höhe und Breite des Eingabebereichs. Das Attribut rows bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Höhe, während cols die Anzahl der angezeigten Spalten (cols = columns = Spalten) festlegt. "Spalten" bedeutet dabei die Anzahl Zeichen (pro Zeile).

Mit </textarea> schließen Sie das mehrzeilige Eingabefeld ab. Das End-Tag ist unbedingt notwendig und darf nicht weggelassen werden - auch in XHTML sollte es immer separat geschrieben werden.

Beachten Sie:

Die Attribute rows und cols bestimmen lediglich die Anzeigegröße des Eingabebereichs, nicht die Länge des erlaubten Textes. Die ist theoretisch unbegrenzt. Web-Browser statten die mehrzeiligen Eingabefelder bei der Anzeige üblicherweise mit Scrollbalken aus, sodass der Anwender bei längeren Eingaben scrollen kann.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Textvorbelegung bei mehrzeiligen Eingabebereichen

Sie können ein mehrzeiliges Eingabefeld mit Inhalt vorbelegen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mehrzeilige Eingabebereiche mit Text vorbelegen</title>
</head>
<body>

<h1>Schreiben Sie eine Geschichte!</h1>

<form action="textarea.htm">
  <p>Hier der Anfang der Geschichte:<br>
    <textarea name="user_eingabe" cols="50" rows="10">Es war dunkel, feucht und neblig ...</textarea>
  </p>
</form>

</body>
</html>

Erläuterung:

Im Gegensatz zu den einzeiligen Eingabefeldern hat <textarea> kein value-Attribut. Um mehrzeilige Eingabefelder mit Text vorzubelegen, notieren Sie den gewünschten Text einfach als Elementinhalt zwischen den Tags <textarea> und </textarea>. Leerzeichen und Zeilenumbrüche im Quelltext werden als solche dargestellt.

Beachten Sie außerdem, dass innerhalb von <textarea> keine weiteren HTML-Elemente erlaubt sind. Sämtliche Zeichen, die in HTML eine Sonderbedeutung haben, wie <, > und &, müssen zwingend als Entity &lt;, &gt; und &amp; geschrieben werden (siehe Benannte Zeichen für HTML-eigene Zeichen).

MS IE 4.0 Netscape 2.0 Zeilenumbruch bei mehrzeiligen Eingabebereichen

Dies gehört nicht zum HTML-Standard, weil das W3-Konsortium wohl davon ausgeht, dass Text innerhalb eines mehrzeiligen Eingabebereichs bei der Eingabe automatisch umbrochen wird. Nicht so jedoch bei Netscape bis einschließlich Version 4.x. Dort wird automatisch quer gescrollt, solange der Anwender keine Return-Taste drückt, um eine neue Zeile zu beginnen. Um die Option des automatischen Zeilenumbruchs zu erlauben, hat Netscape seinerzeit ein Attribut eingeführt, um den Zeilenumbruch kontrollierbar zu machen. Der Internet Explorer interpretiert dieses Attribut ebenfalls. Aber wie es bei proprietären Sprachbestandteilen so ist - mittlerweile ist ein Wildwuchs an Wertzuweisungen entstanden. Und wenn Sie das Attribut verwenden, erzeugen Sie in jedem Fall ungültiges HTML.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Textumbruch in mehrzeiligen Eingabebereichen</title>
</head>
<body>

<h1>Brechen Sie um, aber nicht ab!</h1>

<form action="textarea_wrap.htm">
  <p>einmal soft:<br><textarea name="soft" cols="30" rows="3" wrap="soft"></textarea></p>
  <p>einmal hard:<br><textarea name="hard" cols="30" rows="3" wrap="hard"></textarea></p>
  <p>einmal physical:<br><textarea name="physical" cols="30" rows="3" wrap="physical"></textarea></p>
  <p>einmal virtual:<br><textarea name="virtual" cols="30" rows="3" wrap="virtual"></textarea></p>
  <p>und einmal off:<br><textarea name="off" cols="30" rows="3" wrap="off"></textarea></p>
</form>

</body>
</html>

Erläuterung:

Mit dem nicht-standardisierten Attribut wrap können Sie den Zeilenumbruch steuern (wrap = Umbruch). Die folgenden Angaben sind "ohne Gewähr":
wrap="soft" wird von Netscape 4.x interpretiert und bewirkt automatischen Zeilenumbruch bei der Anzeige. Beim Absenden des Formulars werden an Stellen, wo der Text umbrochen ist, jedoch keine Zeilenumbruch-Zeichen übertragen.
wrap="hard" wird von Netscape 4.x interpretiert und bewirkt automatischen Zeilenumbruch bei der Anzeige. Beim Absenden des Formulars werden die Zeilenumbruch-Zeichen an Stellen, wo der Text automatisch umbrochen ist, übertragen.
wrap="virtual" wird vom Internet Explorer ab Version 4.x und den Netscape-Versionen 2.x und 3.x interpretiert und ist gleichbedeutend mit wrap="soft".
wrap="physical" wird vom Internet Explorer ab Version 4.x und den Netscape-Versionen 2.x und 3.x interpretiert und ist gleichbedeutend mit wrap="hard".
wrap="off" wird vom Internet Explorer ab Version 4.x, Opera ab Version 7, Netscape, Konqueror, Safari und Firefox interpretiert und ist gleichbedeutend mit der Voreinstellung von Netscape bis einschließlich Version 4.x - nämlich keinen Text automatisch umzubrechen.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Eingabefelder und Eingabebereiche auf "nur lesen" setzen

Sie können erzwingen, dass ein Eingabefeld kein Eingabefeld mehr ist, sondern eigentlich nur ein Ausgabefeld, und ein Eingabebereich nur ein Ausgabebereich. Das kann beispielsweise interessant sein, wenn Sie Kapitel JavaScript-ermittelte Werte in einem Formularfeld ausgeben möchten, oder wenn Sie Felder mit einem Wert vorbelegen möchten, den der Anwender aber nicht ändern können soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Eingabefelder und Eingabebereiche auf "nur lesen" setzen</title>
</head>
<body>

<h1>Kein Rabatt und keine Gnade</h1>

<form action="input_text_value.htm">
  <p>Preis:<br><input name="preis" type="text" size="8" value="&euro; 699.-" readonly></p>
  <p>Lizenzvereinbarung:<br>
    <textarea name="lizenz" cols="50" rows="10" readonly>Mit dem Absenden ...</textarea>
  </p>
</form>

</body>
</html>

Erläuterung:

Mit dem Attribut readonly können Sie ein einzeiliges Eingabefeld oder einen mehrzeiligen Eingabebereich auf "nur lesen" setzen.

Beachten Sie:

Bei älteren Browsern funktioniert diese Angabe nicht, und der Feldeintrag ist für den Anwender überschreibbar!

Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie das Attribut in der Form readonly="readonly" notieren. Weitere Informationen dazu im Kapitel Kapitel XHTML und HTML.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Input-Formularelemente (<input>)
Seite Attribut-Referenz für Input-Formularelemente (<input>)
Seite Element-Referenz für mehrzeilige Eingabebereiche (<textarea>...</textarea>)
Seite Attribut-Referenz für mehrzeilige Eingabebereiche (<textarea>...</textarea>)

nach oben
weiter | Seite Auswahllisten, Radio-Buttons und Checkboxen
zurück | Seite Formulare definieren
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Auswahllisten, Radio-Buttons und Checkboxen

SELFHTML

Auswahllisten, Radio-Buttons und Checkboxen
Informationsseite

nach unten Auswahllisten definieren
nach unten Auswahllisten mit Mehrfachauswahl
nach unten Einträge vorselektieren
nach unten Absendewert von Einträgen bestimmen
nach unten Verschachtelte Auswahllisten (Menüstruktur) definieren
nach unten Radio-Buttons definieren
nach unten Checkboxen definieren
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Auswahllisten definieren

Sie können dem Anwender eine Liste mit festen Einträgen anbieten, aus der er einen Eintrag auswählen kann. Der Text des ausgewählten Eintrags wird übertragen, wenn der Anwender das Formular abschickt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Auswahllisten definieren</title>
</head>
<body>

<h1>W&auml;hlen Sie Ihren Favoriten!</h1>

<form action="select.htm">
  <p>
    <select name="top5" size="3">
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>

</body>
</html>

Erläuterung:

<select ...> leitet eine Auswahlliste ein. Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.

Mit dem Attribut size bestimmen Sie die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. Wenn die Liste mehr Einträge enthält als angezeigt werden, kann der Anwender in der Liste scrollen. Wenn Sie size="1" angeben, definieren Sie eine so genannte "Dropdown-Liste".

Mit <option>...</option> definieren Sie zwischen dem einleitenden <select>-Tag und dem Abschluss-Tag </select> jeweils einen Eintrag der Auswahlliste. Hinter <option> muss der Text des Listeneintrags stehen. Sie können so viele Listeneinträge definieren wie Sie wollen.

Ein Abschluss-Tag </option> ist zwar optional, im Hinblick auf verarbeitende Programmiersprachen aber dringend zu empfehlen.

Beachten Sie:

Die Breite der Listenanzeige wird automatisch ermittelt, abhängig vom längsten Eintrag (es sei denn, Sie wenden das nach unten Formatieren mit CSS) an.

Mit Hilfe von Kapitel JavaScript können Sie Auswahllisten auch "zweckentfremden", um Verweise innerhalb Ihres Projekts zu realisieren. Innerhalb dieser Dokumentation finden Sie ein Beispiel dazu: Seite Verweisliste als Auswahlliste.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Auswahllisten mit Mehrfachauswahl

Wenn Sie nichts anderes angeben, kann der Anwender aus einer Auswahlliste genau einen Eintrag auswählen. Sie können eine Mehrfachauswahl erlauben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Auswahllisten mit Mehrfachauswahl</title>
</head>
<body>

<h1>W&auml;hlen Sie so viele Favoriten wie Sie wollen!</h1>

<form action="select.htm">
  <p>
    <select name="top5" size="5" multiple>
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>

</body>
</html>

Erläuterung:

Die Mehrfachauswahl einer Auswahlliste erlauben Sie durch das zusätzliche Attribut multiple im einleitenden <select>-Tag.

Beachten Sie:

Eine Mehrfachauswahl ist für Anwender nicht unmittelbar erkennbar. Deshalb sollten Sie darauf hinweisen, wenn mehrere Einträge auswählbar sind. Auch ist nicht allen Anwendern klar, wie sie mehrere Einträge selektieren können. Auf modernen PC-Tastaturen geschieht das normalerweise durch Halten der [Strg]-Taste bei gleichzeitigem Anklicken der gewünschten Listeneinträge. Macintosh-Benutzer verwenden dafür die Befehlstaste.

Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie das Attribut in der Form multiple="multiple" notieren. Weitere Informationen dazu im Kapitel Kapitel XHTML und HTML.

Für PHP-Nutzer der Hinweis: Das automatische Anlegen eines Arrays funktioniert nur, wenn der Name des Feldes mit eckigen Klammern endet: name="zutaten[]". Beachten Sie wegen dieses Namens auch die Hinweise für den nach oben Zugriff mit JavaScript (Beispiel 4).

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Einträge vorselektieren

Wenn Sie nichts anderes angeben, ist zunächst kein Eintrag einer Auswahlliste vorselektiert. Sie können einen Eintrag vorselektieren. In Verbindung mit nach oben Mehrfachauswahl können Sie auch mehrere Einträge vorselektieren. Vorselektierte Einträge haben einen sichtbaren Markierungsbalken.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Einträge vorselektieren</title>
</head>
<body>

<h1>Sie k&ouml;nnen auch einen anderen Favoriten w&auml;hlen!</h1>

<form action="select.htm">
  <p>
    <select name="top5" size="5">
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option selected>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>

</body>
</html>

Erläuterung:

Um einen Eintrag der Auswahlliste vorzuselektieren, geben Sie im einleitenden <option>-Tag des betreffenden Eintrags das Attribut selected an.

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie das Attribut in der Form selected="selected" notieren. Weitere Informationen dazu im Kapitel Kapitel XHTML und HTML.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Absendewert von Einträgen bestimmen

Normalerweise wird beim Absenden des Formulars der Text eines ausgewählten Listeneintrags übertragen, der zwischen <option> und </option> notiert ist. Sie können jedoch bestimmen, dass intern ein anderer Text übertragen wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Absendewert von Einträgen bestimmen</title>
</head>
<body>

<h1>Pizzeria Fantasia</h1>

<form action="select.htm">
  <p>Ihre Pizza-Bestellung:</p>
  <p>
    <select name="Pizza" size="5"
        onchange="alert(this.form.Pizza.options[this.form.Pizza.selectedIndex].value)">
      <option value="P101">Pizza Napoli</option>
      <option value="P102">Pizza Funghi</option>
      <option value="P103">Pizza Mare</option>
      <option value="P104">Pizza Tonno</option>
      <option value="P105">Pizza Mexicana</option>
      <option value="P106">Pizza Regina</option>
      <option value="P107">Pizza de la Casa</option>
      <option value="P108">Pizza Calzone</option>
      <option value="P109">Pizza con tutti</option>
    </select>
  </p>
</form>

</body>
</html>

Erläuterung:

Um für einen Eintrag der Auswahlliste einen anderen Absendewert zu bestimmen, geben Sie im einleitenden <option>-Tag des betreffenden Eintrags das Attribut value an (value = Wert). Als Wert weisen Sie den gewünschten Absendewert zu. Beim Absenden des Formulars wird dann der hier bestimmte Text eines ausgewählten Eintrags übertragen, nicht der Text, der dem Anwender beim Listeneintrag angeboten wurde.

Im obigen Beispiel ist im einleitenden <select>-Tag ein so genannter Seite Event-Handler notiert. Diesem wird im Beispiel eine JavaScript-Anweisung zugewiesen, die bewirkt, dass ein Meldungsfenster den internen Absendewert des Eintrags zur Kontrolle ausgibt, sobald der Anwender einen Eintrag selektiert.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 7.00 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verschachtelte Auswahllisten (Menüstruktur) definieren

Eine verschachtelte Auswahlliste sollte ein Web-Browser nicht wie üblich als einfache Auswahlliste anzeigen, sondern als verschachtelte Menüstruktur. Anwender moderner grafischer Oberflächen kennen solche verschachtelten Menüs. Das Startmenü vieler Betriebssysteme ist beispielsweise ein solches Menü. So in etwa ist es gedacht:

Die meisten aktuellen Browser beschränken sich bei der Darstellung jedoch auf eine visuelle Unterscheidung der Untergruppen (als Beispiel ein Screenshot aus Opera 8.5):

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Verschachtelte Auswahllisten (Menüstruktur) definieren</title>
</head>
<body>

<h1>W&auml;hlen Sie Ihren Lieblingsnamen!</h1>

<form action="select_optgroup.htm">
  <p>Zur Auswahl stehen:</p>
  <p>
    <select name="Namen" size="6">
      <optgroup label="Namen mit A">
        <option label="Anna">Anna</option>
        <option label="Achim">Achim</option>
        <option label="August">August</option>
      </optgroup>
      <optgroup label="Namen mit B">
        <option label="Berta">Berta</option>
        <option label="Barbara">Barbara</option>
        <option label="Bernhard">Bernhard</option>
      </optgroup>
      <optgroup label="Namen mit C">
        <option label="Caesar">Caesar</option>
        <option label="Christiane">Christiane</option>
        <option label="Christian">Christian</option>
      </optgroup>
    </select>
  </p>
</form>

</body>
</html>

Erläuterung:

Für eine verschachtelte Menüstruktur definieren Sie Untergruppen von Auswahllisten. Dazu notieren Sie innerhalb von <select> und </select> für jede gewünschte Untergruppe ein optgroup-Element. Zwischen dem einleitenden <optgroup>-Tag und dem Abschluss-Tag </optgroup> notieren Sie jeweils eine Untergruppe von Einträgen. Im einleitenden <optgroup>-Tag vergeben Sie mit dem Attribut label eine Menübeschriftung für die Gruppe von Einträgen. Diese wird als Menüauswahl (wie im oberen Grafikbeispiel) oder als nicht selbst auswählbare Überschrift (wie im unteren Grafikbeispiel) angezeigt.

Für die Einträge innerhalb einer Untergruppe notieren Sie jeweils ein option-Element. Auch hierbei können Sie den anzuzeigenden Menüeintrag mit dem Attribut label bestimmen.

Die Werte, die Sie hinter <option> notieren, sind für die Menüdarstellung ohne Belang. Es ist jedoch wichtig, sie zu notieren, denn Browser, welche die Menüdarstellung nicht beherrschen, zeigen stattdessen eine gewöhnliche Auswahlliste mit den Einträgen an, die Sie hinter den <option>-Tags angeben.

Beachten Sie:

Mit <optgroup> ist in HTML und XHTML nur eine einzige tiefere Ebene möglich, innerhalb eines optgroup-Elements darf kein weiteres optgroup-Element vorkommen. Eine Menüverschachtelung über mehrere Ebenen ist daher derzeit nicht realisierbar, auch wenn diese Möglichkeit mit den Worten "könnte eventuell später mal kommen" im HTML-Standard eingeräumt wird.

Nur der Internet Explorer 5.x auf Mac stellt eine gruppierte Auswahlliste wie im ersten Bild gezeigt als Menü dar. Alle anderen Browser zeigen lediglich eine hervorgehobene Überschrift, wie im zweiten Bild.

Die meisten Browser ignorieren die Angabe des label-Attributs innerhalb von <option> und zeigen nur den normalen Text an.

Browser, die <optgroup> nicht kennen, sollten die zusätzlichen Gruppierungen normalerweise ignorieren. Leider hat der Opera-Browser bis Version 6 einen Bug: Wählt man den ersten Eintrag nach einem optgroup aus (in unserem Codebeispiel Anna, Berta oder Caesar), wird diese Auswahl nicht mit dem Formular abgesendet.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Radio-Buttons definieren

Radio-Buttons sind eine Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann. Es kann immer nur einer der Radio-Buttons ausgewählt sein. Der Wert des ausgewählten Radio-Buttons wird beim Absenden des Formulars mit übertragen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Radio-Buttons definieren</title>
</head>
<body>

<h1>Hier wird abkassiert!</h1>

<form action="input_radio.htm">
  <p>Geben Sie Ihre Zahlungsweise an:</p>
  <p>
    <input type="radio" name="Zahlmethode" value="Mastercard"> Mastercard<br>
    <input type="radio" name="Zahlmethode" value="Visa"> Visa<br>
    <input type="radio" name="Zahlmethode" value="AmericanExpress"> American Express
  </p>
</form>

</body>
</html>

Erläuterung:

Radio-Buttons werden durch <input type="radio"> definiert (input = Eingabe). Jeder Radio-Button sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Alle Radio-Buttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren. Der vergebene Name wird bei CGI-Scripts benötigt, um auf die Daten des Eingabefeldes zugreifen zu können. Bei E-Mail-Formularen taucht der Name als Feldname auf. Und auch bei dem Formularfeldzugriff mit JavaScript ist der Name von Bedeutung.

Mit dem Attribut value bestimmen Sie einen internen Bezeichnerwert für jeden Radio-Button (value = Wert). Wenn der Anwender das Formular abschickt, wird der Bezeichnerwert des markierten Buttons übertragen.

Vor oder hinter dem <input>-Tag können Sie den Text notieren, der als Beschriftung der jeweiligen Option erscheint.

Wenn Sie eine der Auswahlmöglichkeiten vorselektieren wollen, dann notieren Sie in dem <input>-Tag des entsprechenden Radio-Buttons das alleinstehende Attribut checked, also z.B.:
<input type="radio" name="Typ" value="Kassenpatient" checked>
Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie dieses Attribut in der Form checked="checked" notieren. Mehr als eine Auswahlmöglichkeit dürfen Sie bei Radio-Buttons nicht vorselektieren.

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Checkboxen definieren

Checkboxen sind eine Gruppe von ankreuzbaren Quadraten, bei denen der Anwender keine, eins oder mehrere auswählen kann. Die Werte von ausgewählten Checkboxen werden beim Absenden des Formulars mit übertragen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Checkboxen definieren</title>
</head>
<body>

<h1>Pizzabelag nach Wahl!</h1>

<form action="input_checkbox.htm">
  <p>Kreuzen Sie die gew&uuml;nschten Zutaten an:</p>
  <p>
    <input type="checkbox" name="zutat" value="salami"> Salami<br>
    <input type="checkbox" name="zutat" value="pilze"> Pilze<br>
    <input type="checkbox" name="zutat" value="sardellen"> Sardellen
  </p>
</form>

</body>
</html>

Erläuterung:

Checkboxen werden durch <input type="checkbox"> definiert (input = Eingabe). Jede Checkbox muss einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Alle Checkboxen, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Elementen kann der Anwender keines, eines oder mehrere ankreuzen. Für den Namen gelten die gleichen Bemerkungen wie bei nach oben Radio-Buttons.

Mit dem Attribut value bestimmen Sie einen internen Bezeichnerwert für jede Checkbox (value = Wert). Wenn der Anwender das Formular abschickt, werden die Bezeichnerwerte des oder der angekreuzten Buttons übertragen.

Vor oder hinter dem <input>-Tag können Sie den Text notieren, der als Beschriftung der jeweiligen Option erscheint.

Wenn Sie Auswahlmöglichkeiten vorselektieren wollen, dann notieren Sie in dem <input>-Tag der entsprechenden Checkbox das alleinstehende Attribut checked, also z.B.:
<input type="checkbox" name="Kenntnisse_in" value="HTML" checked>
Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie dieses Attribut in der Form checked="checked" notieren.
Bei Checkboxen dürfen Sie mehrere Einträge vorselektieren.

Beachten Sie:

Im Gegensatz zu Radiobuttons müssen Checkboxen keine identische Namen haben, um zu funktionieren. Es ist aber hinsichtlich des auswertenden Skripts eventuell sehr sinnvoll, identische Namen zu verwenden, weil das Skript dann automatisch ein Array anlegt.

Für PHP-Nutzer der Hinweis: Das automatische Anlegen eines Arrays funktioniert nur, wenn der Name des Feldes mit eckigen Klammern endet: name="zutaten[]". Beachten Sie wegen dieses Namens auch die Hinweise für den nach oben Zugriff mit JavaScript (Beispiel 4).

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Input-Formularelemente (<input>)
Seite Attribut-Referenz für Input-Formularelemente (<input>)
Seite Element-Referenz für Auswahllisten (<select>...</select>)
Seite Attribut-Referenz für Auswahllisten (<select>...</select>)
Seite Element-Referenz für Auswahllisten-Optionen (<option>...</option>)
Seite Attribut-Referenz für Auswahllisten-Optionen (<option>...</option>)
Seite Element-Referenz für verschachtelte Menüs (<optgroup>...</optgroup>)
Seite Attribut-Referenz für verschachtelte Menüs (<optgroup>...</optgroup>)

nach oben
weiter | Seite Felder für Datei-Upload
zurück | Seite Eingabefelder und Eingabebereiche
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Felder für Datei-Upload

SELFHTML

Felder für Datei-Upload
Informationsseite

nach unten Felder für Datei-Uploads definieren
nach unten Weitere Informationen
nach unten

HTML 3.2 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Felder für Datei-Upload definieren

Diese Sorte Formularelement erlaubt dem Anwender, eine Datei von seinem lokalen Rechner zusammen mit dem Formular zu übertragen. Wenn ein CGI-Script die ankommenden Formulardaten auf dem Server-Rechner verarbeitet, ist es dadurch möglich, dem Anwender das Uploaden (Hochladen) von Dateien auf den Server-Rechner zu ermöglichen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Felder f&uuml;r Datei-Upload definieren</title>
</head>
<body>

<h1>Schicken Sie uns was Schickes!</h1>

<form action="input_file.htm" method="post" enctype="multipart/form-data">
  <p>W&auml;hlen Sie eine Textdatei (txt, html usw.) von Ihrem Rechner aus:<br>
    <input name="Datei" type="file" size="50" maxlength="100000" accept="text/*">
  </p>
</form>

</body>
</html>

Erläuterung:

Mit <input type="file"> definieren Sie ein Element für Datei-Upload (input = Eingabe, file = Datei). Der Web-Browser sollte dann ein Eingabefeld anzeigen, das die Eingabe einer Datei (in den meisten Fällen mit Pfadnamen) erlaubt. Rechts daneben sollte der Browser einen Button anzeigen, bei dessen Anklicken ein lokaler Dateiauswahl-Dialog am Bildschirm erscheint. Die Größe des Eingabefeldes (Anzahl Zeichen) können Sie mit dem Attribut size bestimmen (size = Größe).

Das Attribut maxlength wurde in HTML 3.2 definiert als Hinweis an den Browser, nur Dateien bis zu einer Bytegröße dieser Angabe zur Auswahl zuzulassen. In HTML 4.01 wird auf diese Funktion nicht mehr eingegangen. Uns ist auch kein Browser bekannt, der diese Angabe in irgendeiner Weise einschränkend umsetzt.

Wenn Sie nur bestimmte Dateitypen zulassen wollen, können Sie mit der Angabe von accept die erlaubten Dateitypen eingrenzen (accept = akzeptieren). Hinter dem Istgleichzeichen können Sie einen Seite MIME-Typ angeben. Dabei ist auch das Wildcard-Zeichen (*) bei Subtypen erlaubt. Im obigen Beispiel werden mit text/* alle Textdateien akzeptiert. Dazu gehören reine Textdateien (*.txt), aber z.B. auch HTML-Dateien (*.html,*.htm). Auch bei dieser Angabe ist uns kein Browser bekannt, der die Auswahl des Benutzers in irgendeiner Form kontrolliert.

Beachten Sie:

Datei-Uploads funktionieren nur mit method="post". Wichtig ist außerdem, dass Sie im einleitenden <form>-Tag die Angabe enctype="multipart/form-data" notieren. Andernfalls erhalten Sie lediglich den Dateinamen der ausgewählten Datei übermittelt, nicht jedoch die Datei selbst.

Im Online-Angebot von SELFHTML aktuell finden Sie einen Artikel, der beschreibt, wie das serverseitige Verarbeiten solcher Datei-Uploads aussehen kann:
Online-Seite Fileupload per Perl/CGI
Um das dort beschriebene CGI-Script zu verstehen, benötigen Sie allerdings Kenntnisse in Kapitel Perl.

Das Attribut value in Verbindung mit <input type="file">, mit dem das Vorbelegen der Dateiauswahl möglich wäre, wird von aktuellen Browsern aus Sicherheitsgründen nicht unterstützt.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo das hier beschriebene Formularelement vorkommen darf, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Input-Formularelemente (<input>)
Seite Attribut-Referenz für Input-Formularelemente (<input>)

nach oben
weiter | Seite Versteckte Elemente
zurück | Seite Auswahllisten, Radio-Buttons und Checkboxen
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Versteckte Elemente

SELFHTML

Versteckte Elemente
Informationsseite

nach unten Versteckte Elemente in Formularen definieren
nach unten Weitere Informationen
nach unten

HTML 3.2 XHTML 1.0 MS IE 3.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Versteckte Elemente in Formularen definieren

Sie können Felder in einem Formular definieren, die dem Anwender nicht angezeigt werden. Versteckte Felder können Daten enthalten. Beim Absenden des Formulars werden die Daten versteckter Felder mit übertragen. Auf diese Weise können Sie beispielsweise zusätzliche Informationen an Kapitel CGI-Scripts übergeben oder erläuternden Text einfügen, der bei der E-Mail-Übertragung der Formulardaten in der E-Mail mit enthalten ist.

Auch für Kapitel JavaScript ist diese Möglichkeit interessant. Da ein JavaScript Formularfelder problemlos auslesen und deren Werte auch ändern kann, ist es auf diese Weise bequem möglich, interne Daten zu speichern, die nicht am Bildschirm angezeigt werden. So könnte ein JavaScript beispielsweise, nachdem die Seite mit dem Formular beim Anwender geladen ist, Informationen zur Bildschirmauflösung beim Anwender sammeln (siehe Seite Screen-Objekt) und die Ergebnisse in ein verstecktes Formularfeld schreiben. Die Daten werden dann, wenn der Anwender das Formular abschickt, mit übertragen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Versteckte Elemente in Formularen definieren</title>
</head>
<body>

<h1>Feedback</h1>

<form name="Feedback" action="input_hidden.htm">
  <p>
    <input type="hidden" name="UserBrowser" value="">
    Ihr Kommentar:<br>
    <textarea name="UserKommentar" rows="2" cols="20"></textarea><br>
    <input type="submit" value="senden"><br>
  </p>
  <script type="text/javascript">
    document.Feedback.UserBrowser.value = navigator.appName;
  </script>
</form>

</body>
</html>

Erläuterung:

Mit <input type="hidden"> definieren Sie versteckte Felder in einem Formular (input = Eingabe, hidden = versteckt). Die Daten selbst bestimmen Sie beim Attribut value (value = Wert).

Im obigen Beispiel erhält das versteckte Formularfeld zunächst keine Daten (value=""). Unterhalb des Formulars ist jedoch ein JavaScript notiert. Dieses Script ermittelt den Browser, den der Anwender verwendet, und schreibt den ermittelten Wert in das versteckte Formularfeld. Wenn der Anwender das Formular absendet, wird also der verwendete Browser als Formularinhalt mit übertragen. Das Ergebnis wird in der Adresszeile sichtbar.

Auf die JavaScript-Anweisung wird hier nicht weiter eingegangen. Innerhalb der JavaScript-Dokumentation in diesem Dokument finden Sie die entsprechenden Befehle in der Objektreferenz beschrieben. Maßgeblich sind das Seite navigator-Objekt und das Seite forms-Objekt mit seinen Unterobjekten.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo das hier beschriebene Formularelement vorkommen darf, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Input-Formularelemente (<input>)
Seite Attribut-Referenz für Input-Formularelemente (<input>)

nach oben
weiter | Seite Gruppierung von Elementen und Label für Elemente
zurück | Seite Felder für Datei-Upload
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Gruppierung von Elementen und Label für Elemente

SELFHTML

Gruppierung von Elementen und Label für Elemente
Informationsseite

nach unten Elemente gruppieren
nach unten Label für Elemente
nach unten Weitere Informationen
nach unten

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Elemente gruppieren

Größere Formulare bestehen häufig aus Gruppen von Elementen. Ein typisches Bestellformular besteht beispielsweise aus Elementgruppen wie "Absender", "bestellte Produkte" und "Formular absenden/abbrechen". Solche Elementgruppen können Sie ab HTML 4.0 eigens auszeichnen. Ein Web-Browser kann Elementgruppen durch Linien oder ähnliche Effekte optisch sichtbar machen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Elemente gruppieren</title>
</head>
<body>

<h1>W&uuml;nschen Sie sich was!</h1>

<form action="fieldset_legend.htm">
  <fieldset>
    <legend>Absender</legend>
    <table>
      <tr>
        <td>Ihr Vorname:</td>
        <td><input type="text" size="40" maxlength="40" name="Vorname"></td>
      </tr><tr>
        <td>Ihr Zuname:</td>
        <td><input type="text" size="40" maxlength="40" name="Zuname"></td>
      </tr>
    </table>
  </fieldset>
  <fieldset>
    <legend>Wunsch</legend>
    <table>
      <tr>
        <td>Ihr Hauptwunsch:</td>
        <td><input type="text" size="40" maxlength="40" name="Hauptwunsch"></td>
      </tr><tr>
        <td>Ihr Zusatzwunsch:</td>
        <td><input type="text" size="40" maxlength="40" name="Zusatzwunsch"></td>
      </tr>
    </table>
  </fieldset>
</form>

</body>
</html>

Erläuterung:

Eine zusammengehörige Gruppe von Formularelementen schließen Sie in die Tags <fieldset>...</fieldset> ein (fieldset = Feldgruppe). Dazwischen können Sie beliebige Teile Ihres Formulars definieren.

Unterhalb des einleitenden <fieldset>-Tags und vor den ersten Formularinhalten der Gruppe sollten Sie ferner eine Gruppenüberschrift (Legende) für die Elementgruppe vergeben. Schließen Sie den Gruppenüberschriftentext in die Tags <legend>...</legend> ein. Den Text innerhalb davon können Sie mit Hilfe von HTML/CSS nach Wunsch formatieren.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Label für Elemente

Für Formularelemente wie Eingabefelder oder Auswahllisten gibt es normalerweise keine logische Beschriftungsmöglichkeit. Sie können zwar Text vor ein solches Element setzen wie "E-Mail-Adresse:", aber ein solcher Text ist normaler HTML-Text, der keinen definierten Bezug zu dem Element hat, für das er als Beschriftung dient. Mit Hilfe von Labels können Sie jedoch einen solchen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Label für Elemente</title>
<style type="text/css">
label { cursor:pointer; }
</style>
</head>
<body>

<h1>Meine Beschriftung geh&ouml;rt zu mir wie mein Name an der T&uuml;r!</h1>

<form action="label.htm">
  <fieldset>
    <legend>Formular</legend>
    <table>
      <tr>
        <td><label for="vorname">Vorname:</label></td>
        <td><input type="text" id="vorname" name="Vorname" value="Ihr Vorname"></td>
      </tr>
      <tr>
        <td><label for="nachname">Zuname:</label></td>
        <td><input type="text" id="nachname" name="Zuname" value="Ihr Nachname"></td>
      </tr>
      <tr>
        <td><label for="auswahl">Auswahl:</label></td>
        <td><input type="checkbox" id="auswahl" name="Auswahl"></td>
      </tr>
    </table>
  </fieldset>
</form>

</body>
</html>

Erläuterung:

Das Beispiel zeigt, wie Sie mit Hilfe einer "blinden" Kapitel Tabelle Beschriftung und Eingabefelder eines Formulars ordentlich formatieren können. Das Besondere dabei ist, dass ein logischer Bezug zwischen Beschriftung und Eingabefeld hergestellt wird.

Dazu muss das Formularelement selbst, im obigen Beispiel zwei Eingabefelder, mit Hilfe des Kapitel Universalattributs id einen eindeutigen Namen erhalten. Vergeben Sie keine zu langen Namen. Die Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).

Den Beschriftungstext, den Sie einem solchen Formularelement zuordnen, notieren Sie als Inhalt zwischen <label> und</label>. Der Beschriftungstext kann auch jede Art von HTML/CSS-Formatierung enthalten. Das label-Element selbst hat keine sichtbare Wirkung am Bildschirm, es dient lediglich dem Zweck, den logischen Bezug zum Formularelement herzustellen. Diesen Bezug definieren Sie innerhalb des einleitenden <label>-Tags mit dem Attribut for (for = für). Dahinter geben Sie, in Anführungszeichen, exakt den id-Namen des Formularelements an, auf das sich das Label beziehen soll.

Beim Klick auf den Inhalt eines Labels (im Beispiel Vorname, Zuname, Auswahl) wird in aktuellen Browsern das Formularelement fokussiert bzw. ausgewählt, auf das sich das Label bezieht. Diese Funktion erleichtert unter anderem die Auswahl von Checkboxen.

Beachten Sie:

Das label-Element ist auch auf andere Formularelemente, zum Beispiel auf textarea oder select, anwendbar.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Elementgruppierung (<fieldset>...</fieldset>)
Seite Attribut-Referenz für Elementgruppierung (<fieldset>...</fieldset>)
Seite Element-Referenz für Gruppenüberschriften (<legend>...</legend>)
Seite Attribut-Referenz für Gruppenüberschriften (<legend>...</legend>)
Seite Element-Referenz für Label (<label>...</label>)
Seite Attribut-Referenz für Label (<label>...</label>)

nach oben
weiter | Seite Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
zurück | Seite Versteckte Elemente
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen

SELFHTML

Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
Informationsseite

nach unten Tabulator-Reihenfolge
nach unten Tastaturkürzel
nach unten Elemente ausgrauen
nach unten

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Tabulator-Reihenfolge

Modernere Browser erlauben es, mit Hilfe der Tabulator-Taste an der Tastatur nacheinander die Elemente eines Formulars anzuspringen.

Normalerweise werden die Formularelemente dabei in der Reihenfolge angesprungen, in der sie in der Datei definiert sind. Sie können jedoch eine andere Reihenfolge festlegen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabulator-Reihenfolge</title>
</head>
<body>

<h1>Steppen Sie mit <kbd>[Tab]</kbd> durch!</h1>

<form action="tabindex.htm">
  <p>
    Feld 1: <input type="text" size="40" maxlength="40" tabindex="4"><br>
    Feld 2: <input type="text" size="40" maxlength="40" tabindex="1"><br>
    Feld 3: <input type="text" size="40" maxlength="40" tabindex="3"><br>
    <input type="button" tabindex="2" value="Klick mich">
  </p>
</form>

</body>
</html>

Erläuterung:

Mit dem Attribut tabindex in einem der Formular-Tags <input>, <textarea>, <select> oder <button> können Sie Angaben zur Tabulator-Reihenfolge machen. Notieren Sie die Angabe in allen entsprechenden Tags des Formulars und vergeben bei jeder Angabe eine Zahl. Beim Anspringen der Formularelemente mit der Tabulator-Taste wird zuerst das Formularelement mit der niedrigsten Tabindex-Nummer angesprungen, danach dasjenige mit der zweitniedrigsten usw. und als letztes dasjenige mit der höchsten Tabindex-Nummer. Im obigen Beispiel wird also zuerst Feld 2 angesprungen, dann der Button am Ende, dann Feld 3 und zuletzt Feld 1.

Es sind Zahlen zwischen 0 und 32767 erlaubt.

Beachten Sie:

Die Tabindizes beziehen sich stets auf die gesamte angezeigte Datei. Dabei werden auch Seite Verweise, Seite Verweisbereiche in verweis-sensitiven Grafiken und Seite Objekte mit einbezogen. Wenn Sie solche Elemente neben dem Formular auch noch in Ihrer Datei haben, sollten Sie die Tabulator-Reihenfolge für alle Elemente gemeinsam festlegen. Siehe auch Seite Tabulator-Reihenfolge bei Verweisen.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 7 Mozilla Firefox 1 Safari 1.2 Tastaturkürzel

Sie können dem Anwender anbieten, mit einem Tastendruck zu einem bestimmten Formularelement zu springen. Das Element wird damit angesprungen - "ausgeführt", also zum Beispiel angeklickt oder angekreuzt - wird es dadurch nicht. Ankreuzen von Radio-Buttons und Checkboxen funktioniert meist mit der Leertaste, und Anklicken/Ausführen von Buttons mit der Return-Taste.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tastaturkürzel</title>
</head>
<body>

<h1>Greifen Sie in die Tasten!</h1>

<form action="accesskey.htm">
  <p>Ein Feld mit [Alt]+f:<br>
    <input type="text" size="40" value="Feld" accesskey="f"></p>

  <p>Ein Button mit [Alt]+b:<br>
    <input type="button" value="Button" accesskey="b"></p>

  <p>Ein Texteingabebereich mit [Alt]+t:<br>
    <textarea cols="50" rows="5" accesskey="t">Text</textarea></p>
</form>

</body>
</html>

Erläuterung:

Mit dem Attribut accesskey können Sie ein Zeichen auf der Tastatur bestimmen, das der Anwender drücken kann, um ein Formularelement direkt anzuspringen (accesskey = Zugriffstaste). Bei den meisten Browsern ist es so geregelt, dass Sie bei accesskey einen Buchstaben angeben können, der dann mit [Alt] und der Taste für den Buchstaben direkt anwählbar ist. In Opera erreichen Sie die Ziele, indem Sie zuvor die Tastenkombination [Shift][Esc] betätigen. Safari benutzt statt der [Alt]-Taste die Taste [Ctrl] und Firefox 2.x die Tastenkombination [Alt]-[Shift].

Erlaubt ist das Attribut accesskey in den Formular-Tags <input>, <textarea>, <label>, <legend> oder <button>.

Beachten Sie:

Benutzen Sie Tasten, die auf jeder Tastatur zu finden sind. Funktionstasten etwa, wie es sie auf MF-II-Tastaturen für MS Windows gibt, können Sie mit dieser Angabe auch gar nicht ansprechen.

Weisen Sie den Anwender im Text auf die Möglichkeit des Tastaturzugriffs hin.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Elemente ausgrauen

Sie können Elemente ausgrauen, um zu signalisieren, dass das Element im aktuellen Zusammenhang ohne Bedeutung ist. Ausgegraute Elemente werden auch bei Tabulator-Sprüngen übergangen.

Sinnvoll ist diese Angabe allerdings vor allem als HTML-Grundlage für Script-Sprachen, die Elemente je nach Eingaben oder Auswahl in anderen Elementen dynamisch ausgrauen. So wäre es beispielsweise sinnvoll, Angaben zum Typ des gefahrenen Autos dynamisch auszugrauen, wenn der Anwender ankreuzt, dass er gar kein Auto besitzt. Als statische Angabe hat das Ausgrauen von Elementen dagegen wohl selten Sinn, denn Formularelemente, die man definiert, definiert man schließlich aus gutem Grund.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Elemente ausgrauen</title>
</head>
<body>

<h1>Ein Formular f&uuml;r sp&auml;ter mal!</h1>

<form action="disabled.htm">
  <p>Ihr Name:<br><input type="text" size="40" disabled></p>
  <p>Ihr Kommentar:<br><textarea cols="50" rows="5" disabled></textarea></p>
</form>

</body>
</html>

Erläuterung:

Mit dem Attribut disabled grauen Sie ein Element aus. Erlaubt ist das Attribut in den Formular-Tags <input>, <textarea>, <select>, <option>, <optgroup> oder <button>. Beim Internet Explorer und bei Netscape ist der Effekt, dass das Element einfach nicht editierbar bzw. anklickbar ist.

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie dieses Attribut in der Form disabled="disabled" notieren. Weitere Hinweise im Kapitel über Kapitel XHTML und HTML.

Im Konqueror 3.1 und Safari 2.0 sind ausgegraute Seite Klick-Buttons optisch nicht von funktionsfähigen zu unterscheiden. Das Attribut disabled wirkt jedoch, sodass z.B. bei einem Klick auf <button type="submit" disabled>Absenden</button> das zugehörige Formular nicht abgesendet wird.

nach oben
weiter | Seite Klick-Buttons
zurück | Seite Gruppierung von Elementen und Label für Elemente
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Klick-Buttons

SELFHTML

Klick-Buttons
Informationsseite

nach unten Klick-Buttons definieren (herkömmlich)
nach unten Klick-Buttons definieren (Bild)
nach unten Weitere Informationen
nach unten

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Klick-Buttons definieren (herkömmlich)

Klick-Buttons haben in reinem HTML keine sinnvolle Funktion. Man kann sie anklicken, so oft man will, und wird dennoch keine Reaktion feststellen. Ihren Sinn haben sie nur im Zusammenspiel mit Script-Sprachen wie Kapitel JavaScript, um eine Schaltfläche zu definieren, die z.B. auf Klick eine JavaScript-Aktion auslöst. Dennoch werden diese Buttons nur äußerst selten eingesetzt, weil ihr Einsatzzweck auch durch optisch besser gestaltbare HTML-Elemente wie Kapitel Verweise (Links) oder durch die weiter unten beschriebenen Seite Buttons zum Absenden oder Abbrechen verwirklicht werden kann.

Die hier beschriebene, herkömmliche Methode hat den Vorteil, dass sie auch von älteren Browsern (Netscape seit Version 2.x, Internet Explorer seit Version 3.x) interpretiert wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Klick-Buttons definieren (herkömmlich)</title>
</head>
<body>

<h1>Verweise einmal anders</h1>

<form action="input_button.htm">
  <p>
    <textarea cols="20" rows="4" name="textfeld"></textarea>
    <input type="button" name="Text 1" value="Text 1 anzeigen"
      onclick="this.form.textfeld.value='Text 1 und rückwärts seltsam geschrieben ich bin.'">
    <input type="button" name="Text 2" value="Text 2 anzeigen"
      onclick="this.form.textfeld.value='Ich bin Text 2 - ganz normal'">
  </p>
</form>

</body>
</html>

Erläuterung:

Mit <input type="button"> definieren Sie einen Button (input = Eingabe). Die Beschriftung des Buttons bestimmen Sie mit dem Attribut value (value = Wert). Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie beispielsweise den Seite Event-Handler onclick verwenden, um auf das Anklicken mit JavaScript zu reagieren. Als Wertzuweisung an das Event-Handler-Attribut können Sie dann JavaScript-Code notieren. Im obigen Beispiel wird auf Klick der <textarea> jeweils der definierte Text zugewiesen.

Mit dem Attribut name können Sie einen Namen für den Button vergeben. Unter diesem Namen ist der Button beispielsweise in JavaScript ansprechbar.

Wie eingangs erwähnt: Solche Funktionen lassen sich problemlos auch mit allen anderen HTML-Elementen verwirklichen. Der Vorteil des Klick-Buttons ist, dass er standardmäßig schon direkt wie ein klickbarer Button aussieht. Unser JavaScript-Anwendungsbeispiel Seite Taschenrechner nutzt diese Buttons beispielsweise, um das Tastenfeld zu realisieren. Der Nachteil des Klick-Buttons ist, dass er standardmäßig schon direkt wie ein klickbarer Button aussieht - oft wird aber eine grafisch ansprechendere optische Darstellung gewünscht.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 Klick-Buttons definieren (Bild)

Ab HTML 4.0 dürfen anklickbare Buttons endlich so heißen wie sie heißen: nämlich <button>. Solche Buttons sind flexibler als herkömmliche Buttons, denn sie dürfen auch einen durch HTML definierten Inhalt haben, etwa eine Grafik.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Klick-Buttons definieren (Bild)</title>
</head>
<body>

<h1>Verweise einmal anders</h1>

<form action="button.htm">
  <div>
    <button name="Klickmich" type="button"
      value="Überraschung" onclick="alert('Überraschung!');">
      <p>
        <img src="selfhtml.gif" width="106" height="109" alt="SELFHTML Logo"><br>
        <b>Was passiert wohl?</b>
      </p>
    </button>
  </div>
</form>

</body>
</html>

Erläuterung:

Die Definition eines solchen Buttons leiten Sie mit <button> ein. Dieses Element hat ein End-Tag </button>, mit dem Sie die Definition des Buttons abschließen.

Zwischen dem einleitenden Tag und dem End-Tag können HTML-formatierte Inhalte stehen. Alles, was Sie innerhalb von <button>...</button> notieren, wird als "Beschriftung" des Buttons angezeigt. Das dürfen durchaus auch eingebundene Kapitel Grafiken sein, so wie im obigen Beispiel.

Im einleitenden <button>-Tag notieren Sie verschiedene Angaben zum Button. Etwas seltsam erscheint die Angabe type="button", sie ist aber notwendig, um diesen Typ von Buttons zu unterscheiden von den Seite Buttons zum Absenden und Abbrechen.

Mit dem Attribut name können Sie einen Namen für den Button vergeben. Für den Namen gelten die gleichen Bemerkungen wie bei nach oben Klick-Buttons (herkömmlich).

Mit dem Attribut value können Sie eine Beschriftung für den Button bestimmen, falls Sie keinen Inhalt innerhalb von <button>...</button> notieren. Beachten Sie jedoch, dass die Browser dies ignorieren und bei leerem Inhalt einen mickrigen leeren Button anzeigen.

Um anzugeben, was passieren soll, wenn der Button angeklickt wird, können Sie beispielsweise den Seite Event-Handler onclick verwenden. Als Wertzuweisung an das Event-Handler-Attribut können Sie dann JavaScript-Code notieren.

Im übrigen gilt für diese Buttons das gleiche, was schon für ihre herkömmlichen Kollegen gesagt wurde: Ohne JavaScript sind sie komplett funktionslos, und sie treten deshalb in der Realität äußerst selten auf.

Beachten Sie:

Da der Button bereits anklickbar ist, sind alle HTML-Elemente darin verboten, die Verweis-Funktion erzeugen. Es sind also keine Kapitel Verweise beim Inhalt erlaubt, und Grafiken, die als Button-Inhalt angezeigt werden, dürfen kein Attribut usemap für verweis-sensitive Flächen enthalten.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Input-Formularelemente (<input>)
Seite Attribut-Referenz für Input-Formularelemente (<input>)
Seite Element-Referenz für Buttons (<button>...</button>)
Seite Attribut-Referenz für Buttons (<button>...</button>)

nach oben
weiter | Seite Buttons zum Absenden oder Abbrechen
zurück | Seite Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Buttons zum Absenden oder Abbrechen

SELFHTML

Buttons zum Absenden oder Abbrechen
Informationsseite

nach unten Buttons zum Absenden oder Abbrechen definieren (herkömmlich)
nach unten Grafische Buttons zum Absenden definieren
nach unten Buttons zum Absenden oder Abbrechen definieren (Bild)
nach unten Weitere Informationen
nach unten

HTML 2.0 XHTML 1.0 MS IE 1.0 Netscape 1.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Buttons zum Absenden oder Abbrechen definieren (herkömmlich)

Zwei Standard-Buttons stellt HTML zur Verfügung, um Formulareingaben zu handhaben: einen Button zum "Absenden" und einen zum "Abbrechen". Mit dem Absendebutton kann der Anwender das ausgefüllte Formular losschicken. Mit den Formulardaten geschieht dann das, was im einleitenden <form>-Tag mit dem Attribut action festgelegt wurde (siehe hierzu Seite Formular definieren). Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das Formular wird nicht abgeschickt, Eingaben werden gelöscht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Buttons zum Absenden oder Abbrechen definieren (herkömmlich)</title>
</head>
<body>

<h1>Das hier k&ouml;nnen Sie absenden!</h1>

<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>

<form action="http://de.selfhtml.org/cgi-bin/comments.pl">
  <table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
    <tr>
      <td align="right">Vorname:</td>
      <td><input name="Vorname" type="text" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td align="right">Zuname:</td>
      <td><input name="Zuname" type="text" size="30" maxlength="40"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Kommentar:</td>
      <td><textarea name="Text" rows="10" cols="50"></textarea></td>
    </tr>
    <tr>
      <td align="right">Formular:</td>
      <td>
        <input type="submit" value=" Absenden ">
        <input type="reset" value=" Abbrechen">
      </td>
    </tr>
  </table>
</form>

</body>
</html>

Erläuterung:

Mit <input type="submit"> definieren Sie einen Absendebutton (input = Eingabe, submit = bestätigen). Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt, und es wird die Adresse aufgerufen, die im einleitenden <form>-Tag beim Attribut action angegeben ist. Zur unterschiedlichen weiteren Behandlung der übermittelten Daten können Sie mehrere Absendebuttons mit name-Attribut verwenden.
Mit <input type="reset"> definieren Sie einen Abbrechen-Button (reset = zurücksetzen). Eingegebene Daten werden verworfen und nicht abgeschickt.

Mit dem Attribut value bestimmen Sie die Beschriftung der Buttons (value = Wert).

Beachten Sie:

Mit Hilfe von Kapitel JavaScript können Sie die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. Innerhalb dieser Dokumentation finden Sie ein Anwendungsbeispiel Seite Formulareingaben überprüfen.

HTML 3.2 XHTML 1.0 MS IE 3.0 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Grafische Buttons zum Absenden definieren

Sie können innerhalb von Formularen Grafiken referenzieren und diese als Absendebutton definieren. Solche grafische Buttons können Sie als Alternative zu Buttons vom Typ <input type="submit"> verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Grafische Buttons zum Absenden definieren</title>
</head>
<body>

<h1>Absenden mit Komfort!</h1>

<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>

<form action="http://de.selfhtml.org/cgi-bin/comments.pl">
  <table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
    <tr>
      <td align="right">Ihre E-Mail-Adresse:</td>
      <td><input name="Mail" type="text" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td align="right">Formular:</td>
      <td><input type="image" src="absende.gif" alt="Absenden"></td>
    </tr>
  </table>
</form>

</body>
</html>

Erläuterung:

Mit <input type="image"> definieren Sie einen grafischen Button (input = Eingabe). Die gewünschte Grafikdatei bestimmen Sie mit dem Attribut src (src = source = Quelle). Weisen Sie eine geeignete Grafik vom Typ GIF, JPEG oder PNG zu. Im obigen Beispiel wird vorausgesetzt, dass sich die Grafik absende.gif im gleichen Verzeichnis befindet wie die HTML-Datei mit dem Formular. Für das Adressieren der Grafik gelten die Regeln zum Seite Referenzieren in HTML

Beachten Sie:

Bei grafischen Buttons wird nicht nur der eventuell vorhandene Wert im value Attribut übertragen, sondern zusätzlich auch die Koordinaten des Klicks auf das Bild. Das heißt es werden zwei zusätzlich Werte abgeschickt in der Form name.x und name.y (in PHP wird daraus name_x/name_y). Der IE sendet nur die Koordinaten.

HTML 4.0 XHTML 1.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.0 Buttons zum Absenden oder Abbrechen definieren (Bild)

Dies funktioniert genauso wie das Definieren von Seite Klick-Buttons (Bild). Dort wird erklärt, wie solche Buttons definiert werden.

Um einen Button zum Absendebutton (Submit-Button) zu erklären, müssen Sie im einleitenden <button>-Tag type="submit" notieren. Um den Button zu einem Abbrechen-Button (Reset-Button) zu erklären, müssen Sie type="reset" notieren.

Beachten Sie:

Der Internet Explorer (getestet bis Version 6.0) verhält sich bei dieser Art Button leider falsch. Er sendet die Buttonbeschriftung, nicht den Inhalt des value-Attributes. Existieren mehrere Absende-Buttons, werden die Beschriftungen aller Buttons gesendet, nicht nur die des geklickten. Deshalb muss man dem IE leider attestieren, dass er dieses Feature derzeit noch nicht korrekt unterstützt.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo das hier beschriebene Formularelement vorkommen darf, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Input-Formularelemente (<input>)
Seite Attribut-Referenz für Input-Formularelemente (<input>)

nach oben
weiter | Seite Formulare formatieren mit CSS
zurück | Seite Klick-Buttons
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Formulare formatieren mit CSS

SELFHTML

Formulare formatieren mit CSS
Informationsseite

nach unten Formulare und Formularelemente gestalten mit CSS
nach unten

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Formulare und Formularelemente gestalten mit CSS

Mit Kapitel Stylesheets können Sie Formulare und Formularelemente optisch gestalten. Welche Gestaltungsmöglichkeiten funktionieren, ist jedoch noch ein Glücksspiel. Diejenigen Browser, die das Formatieren von Formularelementen mit CSS unterstützen, unterstützen es noch nicht konsequent. Ausprobieren ist also angesagt.
Für das gesamte Formular können Sie beispielsweise Angaben zur Schriftformatierung oder zum Hintergrund bestimmen. Für einzelne Formularelemente können Sie ebenfalls Angaben zur Schriftformatierung machen, oder auch den vorgegebenen Feldrahmen abändern.
Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Interessant sind zur Gestaltung von Formularen und Formularelementen folgende CSS-Eigenschaften:
Seite Schriftformatierung
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder

Das folgende Beispiel zeigt ein vollständiges, absendbares Formular, das mit Stylesheets gestaltet wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Formulare und Formularelemente gestalten mit CSS</title>
<style type="text/css">
form { background-image:url(background.gif); padding:20px; border:6px solid #ddd; }
td, input, select, textarea { font-size:13px; font-family:Verdana,sans-serif; font-weight:bold; }
input, select, textarea { color:#00c; }
.Bereich, .Feld { background-color:#ffa; width:300px; border:6px solid #ddd; }
.Auswahl { background-color:#dff; width:300px; border:6px solid #ddd; }
.Check, .Radio { background-color:#ddff; border:1px solid #ddd; }
.Button { background-color:#aaa; color:#fff; width:200px; border:6px solid #ddd; }
</style>
</head>
<body>

<h1>Das hier können Sie absenden!</h1>

<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>

<form action="http://de.selfhtml.org/cgi-bin/comments.pl">
  <table border="0" cellpadding="3" cellspacing="0">
    <tr>
      <td align="right">Vorname:</td>
      <td><input name="Vorname" type="text" class="Feld" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td align="right">Zuname:</td>
      <td><input name="Zuname" type="text" class="Feld" size="30" maxlength="40"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Geschlecht:</td>
      <td>
        <input type="radio" class="Radio" name="Geschlecht" value="m"> männlich<br>
        <input type="radio" class="Radio" name="Geschlecht" value="w"> weiblich
      </td>
    </tr>
    <tr>
      <td align="right" valign="top">Eigenschaften:</td>
      <td>
        <input type="checkbox" class="Check" name="Eigenschaft" value="Raucher"> Raucher<br>
        <input type="checkbox" class="Check" name="Eigenschaft" value="Autofahrer"> Autofahrer<br>
        <input type="checkbox" class="Check" name="Eigenschaft" value="HTMLFreak"> HTML-Freak
      </td>
    </tr>
    <tr>
      <td align="right" valign="top">Nächste Großstadt:</td>
      <td>
      <select name="Grossstadt" class="Auswahl" size="1">
        <option value="Hamburg">Hamburg</option>
        <option value="Berlin">Berlin</option>
        <option value="Frankfurt">Frankfurt</option>
        <option value="Muenchen">München</option>
      </select>
      </td>
    </tr>
    <tr>
      <td align="right" valign="top">Kommentar:</td>
      <td><textarea name="Text" class="Bereich" rows="10" cols="50"></textarea></td>
    </tr>
    <tr>
      <td align="right">Formular:</td>
      <td>
        <input type="submit" class="Button" value="Absenden">
        <input type="reset" class="Button" value="Abbrechen">
      </td>
    </tr>
  </table>
</form>

</body>
</html>

Erläuterung:

Im Beispiel werden die CSS-Formate für die Formularelemente Seite zentral für eine HTML-Datei definiert in einem Style-Bereich im Dateikopf. Für die einzelnen Formularfeldtypen werden Seite Formate für Klassen definiert - das sind im Beispiel die Einträge im Style-Bereich, die mit einem Punkt (.) beginnen.

Das Formular selber, also das form-Element, erhält im Beispiel eine Hintergrundgrafik zugewiesen, die ein Tapetenmuster bewirkt, sowie einen hellgrauen, 6 Pixel dicken Rahmen. Ein Innenabstand von 20 Pixeln sorgt für ein saubereres Aussehen.

Für Tabellenzellen (td) und die Formularelemente input, select und textarea wird eine Schriftgröße von 13 Pixeln, die bevorzugte Schriftart Verdana und Fettschrift bestimmt. Für die drei Formularelementtypen wird ferner eine blaue Textfarbe festgelegt.

Eingabefelder und Eingabebereiche mit der Klasse Eingabe (die einleitenden HTML-Tags haben dazu das Kapitel Universalattribut class notiert) erhalten eine hellgelbe Hintergrundfarbe, eine feste Breite von 300 Pixeln, und der Rahmen um die Felder erhält die gleichen Eigenschaften wie der um das Formular.

Auswahlelemente erhalten alle ein helles Zyan-Blau als Hintergrundfarbe. Auswahllisten der Klasse Auswahl ebenfalls eine feste Breite von 300 Pixeln. Bei den Auswahlelementen dieser Klasse wird versucht, einen hellgrauen Rahmen der Dicke 1 Pixel zuzuweisen.

Buttons schließlich, die im Beispiel für die beiden Buttons zum Absenden und Abbrechen benötigt werden, bekommen eine graue Hintergrundfarbe und weiße Schrift zugewiesen und sollen 200 Pixel breit sein. Auch die Buttons erhalten wieder den dicken hellgrauen Rahmen.

nach oben
weiter | Seite Formulare verarbeiten
zurück | Seite Buttons zum Absenden oder Abbrechen
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Formulare / Formulare verarbeiten

SELFHTML

Formulare verarbeiten
Informationsseite

nach unten Formulare als E-Mail
nach unten Formulare und CGI
nach unten

Formulare als E-Mail

Viele Anwender, die von großen Discount-Providern Speicherplatz für eigene Web-Seiten erhalten, haben keine Möglichkeit, eigene CGI-Scripts zur Datenverarbeitung auf dem Server-Rechner einzusetzen. Dazu kommt, dass viele Homepage-Besitzer sich nicht in der Lage fühlen, sich in Programmiersprachen, fremde Betriebssystemumgebungen, Umgebungsvariablen und Datenübertragungsprotokolle einzuarbeiten. Dennoch möchten viele Seitenanbieter die Möglichkeit nutzen, mit Hilfe von HTML-Formularen gezielte und einheitlich strukturierte Daten von Besuchern ihrer Web-Seiten einzuholen. Zu diesem Zweck besteht die Möglichkeit, sich ausgefüllte Formulare als E-Mail zuschicken zu lassen.

Ein Problem stellen bei dieser Lösung jedoch Web-Browser dar, die nicht in der Lage sind, Formulare mit action="mailto:..." zu versenden. Dazu gehören Standalone-Browser, die kein eigenes E-Mail-Modul besitzen und darauf angewiesen sind, ein anderes E-Mail-Programm auf dem Rechner des Anwenders zu starten. Dabei klappt aber nicht unbedingt immer die Kommunikation zwischen Browser und E-Mail-Programm so, dass die Formulardaten übergeben und vom E-Mail-Programm anstandslos versendet werden. Bei vielen Anwendern tritt beispielsweise das Problem auf, dass das E-Mail-Programm einfach ein leeres E-Mail-Fenster öffnet, statt direkt die vom Browser übergebenen Formulardaten zu versenden. Gegen diese Probleme können Sie als Anbieter von Web-Seiten nichts unternehmen. Es ist also ein Glücksspiel, ob der Formularversand via E-Mail bei Ihren Seitenbesuchern klappt oder nicht. Um das Problem zu umgehen, können Sie einen öffentlichen CGI-Service für so genannte Form-Mailer in Anspruch nehmen. Dort werden die Formulardaten von einem CGI-Programm verarbeitet und Ihnen dann als E-Mail zugeschickt. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie auf der Seite Online-Seite Homepage-Services Verweise zu Anbietern solcher Form-Mailer.

Ein anderes Problem bei mailto-Formularen besteht darin, dass die Formulardaten beim Abschicken per Voreinstellung nach einem bestimmten MIME-Typ kodiert werden, dem MIME-Typ application/x-www-form-urlencoded. Dabei werden alle Leerzeichen, verschiedene Sonderzeichen und Umlaute durch spezielle Zeichenfolgen ersetzt. So lautet beispielsweise der Satz Danke für die Hilfe! nach der Umwandlung: Danke+f%FCr+die+Hilfe%21. Für Menschen ist das ziemlich ungenießbarer Lesestoff. Um die Kodierung zu verhindern, können Sie im einleitenden <form>-Tag zwar die Angabe enctype="text/plain" angeben. Von Anwendern, deren Web-Browser diese Angabe jedoch nicht interpretiert, werden Sie dennoch kodierte Formulardaten erhalten.

Benutzen Sie die Möglichkeit, sich Formulare direkt per E-Mail zuschicken zu lassen, also nur im Notfall und nur dann, wenn es nicht um wirklich wichtige Dinge geht. In allen anderen Fällen ist auf jeden Fall eine server-seitige Datenverarbeitung über ein CGI-Script oder vergleichbares Script vorzuziehen.

Formulare und CGI

Viele Anwendungsfälle für Formulare in HTML benötigen eine Datenverarbeitung auf dem Server-Rechner im Web. Wenn Sie beispielsweise Ihr gesamtes Web-Projekt nach einem Begriff durchsuchbar machen wollen, können Sie dem Anwender ein Formular anbieten, in dem er den Suchbegriff eingeben kann. Nach dem Abschicken des Formulars muss ein Script oder Programm auf dem Server-Rechner alle Dateien des Projekts nach dem gewünschten Begriff oder einen zuvor erzeugten Index oder eine Datenbank absuchen und eine dynamische HTML-Datei erzeugen, in der Verweise auf alle Seiten enthalten sind, die den Suchbegriff enthalten.

Für solche Fälle, aber auch für Anwendungsfälle wie automatische Gästebücher, Diskussionsforen, elektronische Einkaufskörbe usw. benötigen Sie ein Script oder Programm auf dem Server-Rechner, das die in einem Formular eingegebenen oder ausgewählten Daten sofort verarbeitet und dem Anwender echte Interaktion bietet.

Die Standard-Programmierschnittstelle auf Web-Servern hierfür ist CGI (Common Gateway Interface). Manche Web-Server haben - je nach installierter HTTP-Software - auch noch andere Programmierschnittstellen. Der Provider, bei dem Sie Ihre Web-Seiten speichern, muss Ihnen Zugriff auf diese Programmierschnittstelle erlauben, damit Sie solche Anwendungen selbst realisieren können. Viele Discount-Provider erlauben ihren Mitgliedern jedoch keinen solchen Zugriff.

Die meist verwendete Programmiersprache für CGI-Scripts ist Perl. Fragen Sie jedoch vor dem Programmieren eines eigenen CGI-Scripts Ihren Provider, welche Art von Programmen auf dem Server ausführbar sind. Wenn Sie in Perl programmieren wollen, fragen Sie den Provider, ob der Server über einen Perl-Interpreter verfügt, und wo genau der Interpreter auf dem Server liegt. In diesem Dokument finden Sie eine ausführliche Dokumentation zu Kapitel Perl.

nach oben
weiter | Seite Framesets und Frames definieren
zurück | Seite Formulare formatieren mit CSS
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Formulare

© 2007 Seite Impressum


SELFHTML: HTML / Frames

SELFHTML

Frames
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML.
Dieser Abschnitt beschreibt die Möglichkeit, ein Web-Projekt in mehrere Bildschirmfenster aufzuteilen, um die Navigationsmöglichkeiten zu optimieren.
Der Abschnitt besteht aus folgenden Seiten:

Seite Framesets und Frames definieren
Seite Eigenschaften von Frames
Seite Verweise bei Frames
Seite Eingebettete Frames
Seite Frames als Mittel für Seiten-Layouts

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Frames / Framesets und Frames definieren

SELFHTML

Framesets und Frames definieren
Informationsseite

nach unten Allgemeines zu Frames
nach unten Grundgerüst einer HTML-Datei mit Framesets
nach unten Framesets definieren
nach unten Frames zu einem Frameset definieren
nach unten Noframes-Bereich definieren
nach unten Langbeschreibung für Frame-Fenster
nach unten Weitere Informationen
nach unten

Allgemeines zu Frames

Mit Hilfe von Frames können Sie den Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufteilen. Jedes Segment kann eigene Inhalte enthalten. Die einzelnen Anzeigesegmente (also die Frames) können wahlweise einen statischen Inhalt (= "non scrolling regions") oder einen wechselnden Inhalt haben. Verweise in einem Frame können Dateien aufrufen, die dann in einem anderen Frame angezeigt werden.

Frames sind kein weiteres Element, um typische Aufgaben der Textverarbeitung zu bewältigen, sondern ein Element, das die spezifischen Eigenschaften der Bildschirmanzeige konsequent nutzt. Frames eröffnen völlig neue Möglichkeiten, um Information hypertextuell (d.h. nichtlinear) aufzubereiten.

Frames werden ab Netscape 2.0 und ab Internet Explorer 3.0 unterstützt. Seit HTML 4.0 gehören die Frames auch zum HTML-Standard. Dort allerdings nicht zur HTML-Variante Strict, sondern stattdessen mit einer eigenen Variante Frameset ausgestattet. Die nebenstehende Abbildung zeigt, wie Frames im Anzeigefenster des Browsers wirken:

Das Bild stellt den Inhalt des gesamten Anzeigefensters des Browsers schematisch dar. Das Anzeigefenster ist in drei unabhängige Bereiche aufgeteilt. Die Verweise links und unten können beispielsweise immer eingeblendet bleiben, während sich der Inhalt des Hauptfensters je nach ausgewähltem Verweis ändern kann. Dabei werden im Beispiel der Abbildung immer drei verschiedene HTML-Dateien gleichzeitig angezeigt: links und unten immer die gleiche Datei, im Hauptfenster jeweils eine wechselnde Datei, je nach ausgewähltem Verweis.

In jedem Frame stehen alle Anzeige-Features zur Verfügung - so ist es z.B. denkbar, in einem Frame Textinformation anzuzeigen, während in einem anderen Frame gleichzeitig ein passendes Video abläuft.

Durch den Einsatz von Frames wachsen die Gestaltungsmöglichkeiten außerordentlich. Frames stellen an das Design von HTML-Seiten aber auch besonders hohe Ansprüche und haben einige nicht zu bestreitende Nachteile. Einige Tips, die Sie beachten sollten, finden Sie im Abschnitt Seite Frames als Mittel für Seiten-Layouts.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Grundgerüst einer HTML-Datei mit Framesets

Um Frames zu definieren, brauchen Sie eine spezielle HTML-Datei, in der ein Frameset definiert wird. Das Frameset bestimmt die Fensteraufteilung. Für eine solche Datei ist ein anderes Grundgerüst erforderlich als das sonst übliche Grundgerüst von HTML-Dateien.

Schema:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Beschreibung des Frameset-Inhalts</title>
</head>
<frameset ...>  <!-- Frameset-Definition -->
  <frame ...>   <!-- Frame-Fenster-Definition -->
  <noframes>
    <body>
      <h1>Alternativ-Inhalt</h1>
      <p>Wird angezeigt, wenn der Browser keine Frames darstellen kann.</p>
      <p>Mindest-Inhalt sollten eine Kurzbeschreibung und eine Sitemap sein.</p>
    </body>
  </noframes>
</frameset>
</html>

Erläuterung:

Die Unterschiede zu anderen HTML-Dateien beginnen bei der Seite Dokumenttyp-Deklaration. Bei Dateien, in denen Sie Framesets und Frames definieren, müssen Sie die oben gezeigte Dokumenttyp-Deklaration zur HTML-Variante Frameset notieren.

Ein weiterer wichtiger Unterschied zu anderen HTML-Dateien ist, dass Dateien mit Frameset-Definitionen kein body-Element besitzen. Anstelle des body-Elements, also nach dem abschließenden </head>-Tag für den Dateikopf, werden die Frames definiert. Dabei können Sie:
nach unten Framesets definieren
nach unten Frames zu einem Frameset definieren
nach unten Noframes-Bereich definieren

Mit Framesets bestimmen Sie die Aufteilung der Frame-Fenster, mit Frames die Datenquellen der einzelnen Frame-Fenster, und der Noframes-Bereich ist für Browser gedacht, die keine Frames anzeigen können, oder bei denen die Anzeige von Frames deaktivierbar ist und vom Anwender deaktiviert wurde.

Beachten Sie:

Der Titel (<title>...</title>), den Sie in der Datei mit der Frameset-Definition angeben, wird während der gesamten Dauer des Frame-Sets angezeigt, auch wenn andere Dateien innerhalb des Frame-Sets aufgerufen werden. Leider gibt es bislang keine Möglichkeit, den Titel zu aktualisieren. Wählen Sie in der Datei mit der Frame-Set-Definition, deshalb einen allgemeinen, aussagekräftigen Titel, der für das gesamte Projekt Gültigkeit hat.

Der URI der Datei mit der Frameset-Definition, also beispielsweise http://www.example.org/, bleibt in der gleichen Form in der Adresszeile des Browsers stehen, auch wenn der Anwender durch Navigieren innerhalb des Framesets andere Seiten des Projekts in eines der Frame-Fenster lädt.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Framesets definieren

Beim Definieren von Framesets bestimmen Sie, wie das Anzeigefenster des Browsers in verschiedene Frame-Fenster aufgeteilt werden soll. Dabei müssen Sie sich das Anzeigefenster wie den leeren Rahmen einer Tabelle vorstellen. Damit die Tabelle Gestalt annimmt, definieren Sie Reihen und Spalten für die Frame-Fenster. Ebenso, wie es möglich ist, Tabellen in HTML zu verschachteln, ist das auch bei Framesets möglich. Anstelle eines Frames können Sie auch ein untergeordnetes Frameset notieren. Auf diese Weise können Sie beliebige Fensteraufteilungen erreichen.

Detailbeispiel 1:

<frameset rows="20%,80%">
  <!-- Dadurch ergeben sich zwei Frame-Fenster, deren Inhalt hier bestimmt wird -->
</frameset>

Erläuterung:

Die Frameset-Definition im Detailbeispiel 1 ergibt folgende Frame-Fenster-Konstellation:

Frameset mit Reihen zu 20% und 80%

Im einleitenden Tag <frameset...> bestimmen Sie die Aufteilung. Mit dem Attribut rows teilen Sie das Anzeigefenster in Reihen auf (rows = Reihen). Dahinter bestimmen Sie, wie die Aufteilung genau aussehen soll. Im Beispiel wird mit Hilfe von rows="20%,80%" eine Aufteilung in zwei Reihen erzwungen, wobei die obere Reihe 20% des Anzeigefensters in Anspruch nimmt, die untere 80%.

Trennen Sie die Angaben zur Aufteilung durch Kommata!

Detailbeispiel 2:

<frameset rows="100,*,60">
  <!-- Dadurch ergeben sich drei Frame-Fenster, deren Inhalt hier bestimmt wird -->
</frameset>

Erläuterung:

Die Frameset-Definition im Detailbeispiel 2 ergibt folgende Frame-Fenster-Konstellation:

Frameset mit Reihen zu 100 Pixeln, automatisch und 60 Pixeln

Mit der Angabe rows="100,*,60" werden drei untereinanderliegende Reihen für Frame-Fenster erzeugt. Die obere Reihe wird genau 100 Pixel hoch, die untere Reihe genau 60 Pixel hoch, und die mittlere Reihe erhält den Rest des Anzeigefensters, abhängig von der Größe des Anzeigefensters beim Anwender.
Mit Zahlenangaben, die ein Prozentzeichen enthalten, wird die Aufteilung also prozentual (relativ zur Größe des Anzeigefensters) interpretiert. Bei Zahlenangaben ohne Prozentzeichen wird die Angabe als absoluter Pixelwert interpretiert. Mit dem Sternzeichen * definieren Sie Bereiche von relativer Größe, abhängig von den übrigen Angaben.
Sie können auch vier oder mehrere Reihen definieren. So definieren Sie beispielsweise mit rows="10%,25%,30%,25%,10%" fünf Reihen.

Detailbeispiel 3:

<frameset cols="200,*">
  <!-- Dadurch ergeben sich zwei Frame-Fenster, deren Inhalt hier bestimmt wird -->
</frameset>

Erläuterung:

Die Frameset-Definition im Detailbeispiel 3 ergibt folgende Frame-Fenster-Konstellation:

Frameset mit Spalten 200 Pixeln und automatisch

Mit dem Attribut cols teilen Sie das Anzeigefenster in Spalten auf (cols = columns = Spalten). Dahinter bestimmen Sie, wie die Aufteilung genau aussehen soll. Im Beispiel wird mit Hilfe von cols="200,*" eine Aufteilung in zwei Spalten erzwungen, wobei die linke Spalte 200 Pixel des Anzeigefensters in Anspruch nimmt, die rechte den Rest. Bei cols sind die gleichen Angaben möglich wie bei rows.

Detailbeispiel 4:

<frameset cols="40%,60%">
  <!-- Dadurch ergeben sich zwei Frame-Fenster, deren Inhalt hier bestimmt wird.
       Das erste Frame-Fenster wird normal definiert, anstelle des zweiten
       folgt jedoch das folgende untergeordnete Frameset: -->
  <frameset rows="20%,80%">
    <!-- Noch mal zwei Frame-Fenster, deren Inhalt hier bestimmt wird. -->
  </frameset>
</frameset>

Erläuterung:

Die Frameset-Definition im Detailbeispiel 4 ergibt folgende Frame-Fenster-Konstellation:

Frameset mit Spalten zu 40% und 60%, wobei die zweite Spalte aufgeteilt wird in ein Frameset zu 20% und 80%

In diesem Beispiel werden Reihen und Spalten für eine komplexere Aufteilung von Frame-Fenstern definiert. Bei solchen Aufteilungen müssen Sie zunächst das gesamte Fenster im Auge behalten. Dieses Fenster wird im Beispiel zunächst mit cols="40%,60%" in zwei Spalten aufgeteilt. Das erste Frame-Fenster für die linke Spalte (im obigen Beispiel nicht explizit definiert, dort steht nur der längere Kommentar) wird ein ganz normales Frame-Fenster mit Inhalt. Anstelle des zweiten Frame-Fensters für die rechte Spalte wird jedoch ein neues, untergeordnetes Frameset definiert. Mit der Angabe rows="20%,80%" erhält es eine Aufteilung in zwei Reihen, also für zwei untereinanderliegende Frame-Fenster, wobei das obere 20% der zur Verfügung stehenden Fläche einnimmt, und das untere 80%.

Detailbeispiel 5:

<frameset rows="50%,50%">
  <frameset cols="50%,50%">
    <!-- Zwei Frames, deren Inhalt hier bestimmt wird. -->
  </frameset>
  <frameset cols="50%,50%">
    <!-- Noch mal zwei Frames, deren Inhalt hier bestimmt wird. -->
  </frameset>
</frameset>

Erläuterung:

Die Frameset-Definition im Detailbeispiel 5 ergibt folgende Frame-Fenster-Konstellation:

Frameset mit zwei Reihen zu je 50%, wobei beide Reihen aufgeteilt werden in zwei Spalten zu je 50%

Das Beispiel zeigt eine komplexere Aufteilung in vier Bereiche. Da in einem solchen Fall alle Bereiche gleich groß sind, ist es egal, ob Sie mit der Definition der Spalten oder Reihen beginnen. Wichtig ist die durchgängige Logik. Wenn Sie - wie im Beispiel - mit der Definition der Reihen beginnen, müssen Sie anstelle von Frames untergeordnete Frame-Sets definieren, in denen Sie jede der beiden Reihen in zwei Spalten aufteilen. Erst innerhalb dieser untergeordneten Frame-Sets werden dann die eigentlichen Frames definiert.

Beachten Sie:

Frame-Sets sollten immer so definiert sein, dass das gesamte Anzeigefenster abgedeckt wird. Verwenden Sie dazu Prozentangaben, die in der Summe 100 ergeben, oder das Sternzeichen *.

Neben der prozentualen Aufteilung ist noch eine weitere relative Angabe zur Frame-Fenster-Aufteilung erlaubt. Sie können das relative Verhältnis bei rows oder cols auch durch Zahlen, gefolgt von einem Sternzeichen, bestimmen.
Mit einer Aufteilung wie rows="1*,5*,3*" definieren Sie drei Reihen, also Platz für drei untereinanderliegende Frame-Fenster, wobei das oberste Frame-Fenster ein Neuntel einnimmt, das zweite fünf Neuntel und das dritte drei Neuntel (also ein Drittel). Die "9" ergibt sich durch Zusammenzählen von 1, 3 und 5, wodurch das relative Verhältnis ermittelt wird.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Frames zu einem Frameset definieren

Nachdem Sie durch die Definition von Framesets die gewünschte Aufteilung des Anzeigefensters bestimmt haben, geben Sie mit der Definition der Frames an, welche Inhalte in den einzelnen Frame-Fenstern zunächst angezeigt werden sollen.

Beispiel Teil 1 - Datei mit Frameset:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset mit Sitemap</title>
</head>
<frameset cols="250,*">
  <frame src="verweise.htm" name="Navigation">
  <frame src="startseite.htm" name="Daten">
  <noframes>
    <body>
      <p><a href="verweise.htm">Navigation</a> <a href="startseite.htm">Daten</a></p>
    </body>
  </noframes>
</frameset>
</html>

Beispiel Teil 2 - Datei verweise.htm für linkes Frame-Fenster:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Navigation</title>
</head>
<body bgcolor="#E0C0FF" text="#000000" link="#804080" vlink="#603060" alink="#804080">

<h1>Navigation</h1>
<p>
  <a href="../index.htm" target="Daten"><b>&Uuml;ber Frames</b></a><br>
  <a href="../../index.htm" target="Daten"><b>&Uuml;ber HTML</b></a><br>
  <a href="../../../index.htm" target="Daten"><b>Noch viel mehr</b></a>
</p>

</body>
</html>

Beispiel Teil 3 - Datei startseite.htm für rechtes Frame-Fenster:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Startseite</title>
</head>
<body bgcolor="#FFF0C0" text="#000000" link="#A00000" vlink="#600000" alink="#A00000">

<h1>Willkommen</h1>

<p>W&auml;hlen Sie links einen Verweis aus!</p>

</body>
</html>

Erläuterung:

Mit je einem <frame>-Tag definieren Sie innerhalb eines Framesets die zugehörigen Frames (frame = Rahmen). Theoretisch können Sie das frame-Element ohne weitere Attribute notieren. In diesem Fall zeigt der Browser in dem entsprechenden Frame-Fenster eine leere Fläche an. Normalerweise werden Sie jedoch die Frame-Fenster mit Inhalt füllen wollen. Dazu dient das Attribut src (src = source = Quelle). Bei der Wertzuweisung an dieses Attribut können Sie die Datei oder Datenquelle angeben, die im entsprechenden Frame-Fenster zunächst angezeigt werden soll. Dabei gelten die Regeln zum Seite Referenzieren in HTML - mit einer Ausnahme: Sie dürfen keine Anker innerhalb der Datei mit Framesets adressieren. Eine Wertzuweisung wie src="#weiter_unten" ist also nicht erlaubt - widerspricht allerdings auch sowieso aller Logik.
Sie können also andere HTML-Dateien des eigenen Projekts in das Frame-Fenster laden, aber auch andere Dateitypen wie z.B. Grafiken. Auch Dateien oder Datenquellen von entfernten Servern können Sie - mit absoluter http://-Adressierung beispielsweise - in ein Frame-Fenster laden. Doch dabei ist höchste Vorsicht geboten: damit machen Sie sich fremde Inhalte zueigen und können sich schnell juristischen Ärger einhandeln.

Ferner sollten Sie gleich für jedes definierte Frame-Fenster mit name einen Namen vergeben. Diese Namen brauchen Sie, um Verweise zu definieren, die in diesem Frame-Fenster angezeigt werden sollen. Ferner sind die Namen wichtig, wenn Sie zusätzlich Kapitel JavaScript einsetzen und damit auf einzelne Frame-Fenster zugreifen wollen.

Definieren Sie für jede "Zelle" Ihrer durch das Frameset definierten "Tabelle" ein Frame-Fenster. Im obigen Beispiel wird ein Frameset für zwei Frame-Fenster definiert, mit der Aufteilung, die durch die Angabe cols="250,*"> bestimmt wird. Ins linke Frame-Fenster, also dem mit 250 Pixeln Breite, soll im Beispiel eine Datei namens verweise.htm geladen werden, und ins rechte Frame-Fenster eine Datei namens startseite.htm. So wie im Beispiel bei src notiert, müssen sich beide Dateien im gleichen Verzeichnis befinden.

Die beiden HTML-Dateien selbst sind gewöhnliche HTML-Dateien. An der Datei verweise.htm können Sie bei den darin notierten Verweisen sehen, wozu die Namen der Frame-Fenster gut sind: mit target="Daten" wird dort bei den Verweisen bestimmt, dass das Verweisziel in dem Frame-Fenster angezeigt wird, das bei der Frame-Fenster-Definition mit name="Daten" den entsprechenden Namen erhalten hat. Weitere Einzelheiten zu diesem Thema finden Sie im Abschnitt Seite Verweise bei Frames.

Beachten Sie:

Das frame-Element besteht nur aus dem Standalone-Tag <frame>. Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das frame-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <frame />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Noframes-Bereich definieren

Für Anwender, deren Browser keine Frames unterstützen, können Sie Ihr Projekt so gestalten, dass solche Anwender dennoch Daten aufrufen können. Noframes-Bereiche haben dabei zwei Aufgaben: zum einen können sie in der Datei stehen, in der das Frameset definiert ist. Dort können Sie für Browser, die keine Frames anzeigen können, oder bei denen der Anwender die Anzeige von Frames abgeschaltet hat, einen alternativen Inhalt anbieten. Es kann sich um beliebige, mit HTML strukturierte Inhalte handeln.

Darüber hinaus können Sie Noframes-Bereiche aber auch in HTML-Dateien verwenden, die innerhalb des Framesets als Inhalte in Frame-Fenstern angezeigt werden sollen. Browser, bei denen die Frames angezeigt werden, sollten den Inhalt solcher Noframes-Bereiche unterdrücken. Browser, bei denen die Frames nicht angezeigt werden können oder keine Frames angezeigt werden, zeigen den Inhalt an. Auf diese Weise können Sie z.B. eine einfache Alternativ-Navigation für nicht-frame-fähige Browser anbieten. Das folgende Beispiel zeigt die Verwendungsweisen für Noframes-Bereiche.

Beispiel Teil 1 - Datei mit Frameset:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Der universelle Titel</title>
</head>
<frameset cols="250,*">
  <frame src="verweise2.htm" name="Navigation">
  <frame src="startseite2.htm" name="Daten">
  <noframes>
    <body>
      <h1>Willkommen!</h1>
      <p>Dieses Projekt verwendet Frames.</p>
      <p>W&auml;hlen Sie einen der Verweise aus:<br>
      <a href="verweise2.htm">Navigation</a><br>
      <a href="startseite2.htm"><b>Startseite</b></a><br>
      <!-- weitere Verweise usw. --></p>
    </body>
  </noframes>
</frameset>
</html>

Beispiel Teil 2 - Datei startseite2.htm für rechtes Frame-Fenster:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Startseite</title>
</head>
<body bgcolor="#FFF0C0" text="#000000" link="#A00000" vlink="#600000" alink="#A00000">

<h1>Willkommen</h1>
<p>W&auml;hlen Sie links einen Verweis aus!</p>

<noframes>
  <p>Dieses Projekt verwendet Frames.</p>
  <p>
    <a href="frames2.htm">zur&uuml;ck zur Startseite</a>
    <!-- weitere Verweise -->
  </p>
</noframes>

</body>
</html>

Erläuterung:

Das Beispiel zeigt die Datei mit der Frameset-Definition und die Datei, die im rechten Frame-Fenster angezeigt wird. Die Datei verweise.htm, die ins linke Frame-Fenster geladen wird, ist in diesem Zusammenhang hier unerheblich und ist deshalb nicht nochmal dargestellt.

Innerhalb von Dateien, die Framesets definieren, sollte ein Noframes-Bereich, markiert durch <noframes> und </noframes>, am Ende des äußersten Framesets vor dem letzten abschließenden </frameset>-Tag notiert werden. Im obigen Beispiel wird nur ein einfaches Frameset definiert, das aus zwei Frame-Fenstern besteht. In diesem Fall werden also die beiden Frame-Fenster notiert und unterhalb davon, vor dem abschließenden </frameset>, der Noframes-Bereich.

Innerhalb des Noframes-Bereichs können Sie alles notieren, was Sie sonst auch zwischen <body> und </body> notieren können, also z.B. Überschriften, Textabsätze, Tabellen, Grafikreferenzen usw. Da es sich bei Browsern, die keine Frames anzeigen können, in der Regel um sehr einfach gestrickte Browser handelt, oder um solche, die unter nicht-grafischen Oberflächen laufen (ausgenommen Opera, in dem sich Frames deaktivieren lassen), brauchen Sie keinen übermäßigen Aufwand für die Optik des Inhalts im Noframes-Bereich zu betreiben. Eine saubere Strukturierung genügt.

Im obigen Beispiel ist innerhalb des Noframes-Bereichs der Datei mit der Frameset-Definition eine Willkommens-Überschrift notiert, ein Hinweis, dass es sich um ein Projekt mit Frames handelt, und es werden Verweise angeboten. Beispielsweise der Verweis auf die Seite startseite2.htm, die bei Anzeige von Frames im rechten Frame-Fenster erscheint. Ferner könnten Sie an dieser Stelle all jene Verweise anbieten, die bei Anzeige von Frames in der links angezeigten Datei verweise2.htm stehen. Solch eine Verweissammlung wird auch Sitemap genannt. Auf diese Weise können Anwender ohne frame-fähigen Browser dennoch alle Verweise ausführen, die sonst im Frameset angeboten werden. Ein Hinweis, dass die Seite Frames verwendet und diese im Browser nicht funktionieren ist nicht ausreichend und kann die Benutzbarkeit erheblich einschränken.

In der Datei startseite2.htm taucht im obigen Beispiel jedoch auch ein Noframes-Bereich auf. Für Browser, die keine Frames anzeigen können, können Sie in solchen Bereichen Inhalte anbieten, die sonst über das Frameset erledigt werden - beispielsweise einen Rückverweis auf die Startseite. Diese Möglichkeit wird auch im Beispiel benutzt: durch den Rückverweis auf die Datei mit den Frameset-Definitionen, die ja auch einen Noframes-Bereich enthält und dort Verweise auf die übrigen Projektseiten anbietet, können Sie eine vollständige, wenn auch etwas simple Alternativ-Navigation für Anwender ohne frame-fähigen Browser realisieren.

Beachten Sie:

Noframes-Bereiche in Projektdateien außerhalb der Datei mit Frameset-Definitionen sind allerdings mit Vorsicht zu genießen: denn leider werden sie nicht nur von nicht-frame-fähigen Browsern angezeigt, sondern auch von älteren frame-fähigen. So zeigt beispielsweise Netscape 4.x den Verweis im Noframes-Bereich in der Datei startseite2.htm des obigen Beispiels gnadenlos an und verwirrt damit Anwender, bei denen das Frameset angezeigt wird. Internet Explorer 5.x und Netscape 6 unterdrücken dagegen Noframes-Bereiche in solchen Projektdateien.

Wenn Sie in Projektdateien, die in einem Frame-Fenster angezeigt werden, Noframes-Bereiche notieren, müssen Sie für solche Projektdateien die HTML-Variante Transitional wählen, denn in der Strict-Variante gibt es keine Frames und auch keine Noframes-Bereiche.

Wenn Sie XHTML-Standard-konform arbeiten, muss das noframes-Element innerhalb einer Frameset-Definition zwingend ein body-Element enthalten:

<noframes>
  <body>
    <p>Alternativ-Inhalt</p>
  </body>
</noframes>

Da dies in HTML Seite optional und somit erlaubt ist, empfiehlt es sich, das body-Element immer zu notieren. Davon ausgenommen sind allerdings Noframes-Bereiche außerhalb von frameset-Elementen wie in oben angeführtem nach oben Beispiel. Diese dürfen kein body-Element enthalten.

HTML 4.0 XHTML 1.0 Langbeschreibung für Frame-Fenster

Sie können bei der Definition von Frames angeben, wo eine ausführliche Beschreibung des Inhalts des betreffenden Frame-Fensters zu finden ist. Browser, die zwar Frames erkennen, aber bei denen die Anzeige von Frames nicht möglich ist, z.B. akustische Ausgabesysteme, können z.B. das bei der Langbeschreibung angegebene Ziel ausgeben.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Langbeschreibung für Frame-Fenster</title>
</head>
<frameset cols="250,*">
  <frame src="verweise.htm" name="Navigation">
  <frame src="startseite.htm" name="Daten" longdesc="startseite_extra.htm">
  <noframes>
    <body>
      <p>Alternativ-Inhalt (Zusammenfassung, Sitemap ...)</p>
    </body>
  </noframes>
</frameset>
</html>

Erläuterung:

Mit dem Attribut longdesc in einem <frame>-Tag können Sie auf eine Stelle verweisen, wo der Inhalt dieses Frame-Fensters in einer längeren Beschreibung zusammengefasst wird. Erlaubt ist ein URI, d.h. bei der Angabe gelten die Regeln zum Seite Referenzieren in HTML.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Framesets (<frameset>...</frameset>)
Seite Attribut-Referenz für Framesets (<frameset>...</frameset>)
Seite Element-Referenz für Frames (<frame>...</frame>)
Seite Attribut-Referenz für Frames (<frame>...</frame>)
Seite Element-Referenz für Noframes-Bereiche (<noframes>...</noframes>)
Seite Attribut-Referenz für Noframes-Bereiche (<noframes>...</noframes>)

nach oben
weiter | Seite Eigenschaften von Frames
zurück | Seite Formulare verarbeiten
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Frames

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Frames / Eigenschaften von Frames

SELFHTML

Eigenschaften von Frames
Informationsseite

nach unten Scrollbars (Bildlaufleisten) erzwingen/verhindern
nach unten Mindestabstände zwischen Fensterrand und Fensterinhalt
nach unten Unveränderbare Fenstergröße
nach unten Rahmendicke bzw. unsichtbare Fensterrahmen
nach unten Farbige Fensterrahmen
nach unten Weitere Informationen
nach unten

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Scrollbars (Bildlaufleisten) erzwingen/verhindern

Der Web-Browser verwaltet die Scrollbars (Bildlaufleisten) eines jeden Frame-Fensters normalerweise automatisch. Wenn kein Blättern erforderlich ist, um den gesamten Fensterinhalt anzuzeigen, erhält das Fenster keine Scrollbars. Wenn der Inhalt größer ist, werden die Frame-Fenster automatisch mit Scrollbars ausgestattet. Sie können jedoch erzwingen, dass ein Frame-Fenster in jedem Fall Scrollbars bzw. keine Scrollbars hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Scrollbars (Bildlaufleisten) erzwingen/verhindern</title>
</head>
<frameset cols="250,*">
  <frame src="verweise3.htm" name="Navigation" scrolling="no">
  <frame src="startseite.htm" name="Daten" scrolling="yes">
  <noframes>
    <body>
    <p><a href="verweise3.htm">Navigation</a> <a href="startseite.htm">Daten</a></p>
    </body>
  </noframes>
</frameset>
</html>

Erläuterung:

Durch die Angabe scrolling="yes" in einem <frame>-Tag erzwingen Sie, dass das Anzeigefenster dieses Frame-Fensters in jedem Fall Scrollbars besitzt. Durch scrolling="no" verhindern Sie, dass das Frame-Fenster Scrollbars erhält, selbst wenn der Inhalt länger ist. Ebenfalls möglich ist die Angabe scrolling="auto", die jedoch mit der Voreinstellung (Scrollbars bei Bedarf anzeigen) identisch ist und daher weggelassen werden kann.

Beachten Sie:

Wenn Sie das Scrollen des Fensterinhalts verhindern, können Inhalte, die größer sind als das Fenster, nicht vollständig angezeigt werden. Verwenden Sie scrolling="no" daher nur, wenn Sie sicher sind, dass der Fensterinhalt vollständig in das Frame-Fenster passt. Die Angabe ist zum Beispiel sinnvoll, wenn in einem Frame-Fenster dauerhaft ein Logo angezeigt werden soll und sonst nichts. Bei größeren Inhalten, vor allem in Frame-Fenstern mit relativer Größe, sollten Sie mit dem Ausschalten der Scrollbars vorsichtig sein - bedenken Sie, dass nicht alle Anwender die gleiche Bildschirmauflösung wie Sie haben.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Mindestabstände zwischen Fensterrand und Fensterinhalt

Sie haben die Möglichkeit, den Abstand zwischen Fensterrand und dem angezeigten Inhalt eines Frame-Fensters genau zu justieren. Auf diese Weise können Sie zum Beispiel breitere Seitenränder in einem Frame-Fenster erzeugen. Wenn Sie einen festen Inhalt, etwa ein Logo, in einem Frame-Fenster anzeigen wollen, können Sie das Logo durch Justage der Abstände exakt in einem Frame-Fenster platzieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Mindestabstände zwischen Fensterrand und Fensterinhalt</title>
</head>
<frameset cols="250,*">
  <frame src="verweise4.htm" name="Navigation" scrolling="no" marginwidth="3" marginheight="30">
  <frame src="startseite.htm" name="Daten" marginwidth="60" marginheight="30">
  <noframes>
    <body>
    <p><a href="verweise4.htm">Navigation</a> <a href="startseite.htm">Daten</a></p>
    </body>
  </noframes>
</frameset>
</html>

Erläuterung:

Durch das Attribut marginwidth [Pixel] in einem <frame>-Tag bestimmen Sie den Abstand zwischen rechtem bzw. linkem Fensterrand und dem Fensterinhalt in diesem Frame-Fenster (margin = Rand, width = Breite). Durch das Attribut marginheight [Pixel] bestimmen Sie den Abstand zwischen oberem bzw. unterem Fensterrand und dem Fensterinhalt (height = Höhe). Linke und rechte Ränder sind immer gleich groß, ebenso obere und untere.

Beachten Sie:

Sie können zu beiden Werten Angaben machen, aber auch nur zu einem der beiden.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Unveränderbare Fenstergröße

Normalerweise kann der Anwender in einem angezeigten Frameset die Größe der einzelnen Frame-Fenster verändern, indem er mit der Maus auf die Rahmen zwischen Frame-Fenstern positioniert und durch "Ziehen" die Größenverhältnisse der Frame-Fenster einstellt. In vielen Fällen ist das auch sinnvoll, und Sie sollten dem Anwender diese Freiheit lassen. Wenn Sie aber beispielsweise ein Frame-Fenster mit einem fixen Inhalt, etwa einem Logo, haben, können Sie verhindern, dass der Anwender die Fenstergröße verändern kann.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Unveränderbare Fenstergröße</title>
</head>
<frameset cols="250,*">
  <frame src="verweise5.htm" name="Navigation" scrolling="no" noresize>
  <frame src="startseite.htm" name="Daten">
  <noframes>
    <body>
    <p><a href="verweise5.htm">Navigation</a> <a href="startseite.htm">Daten</a></p>
    </body>
  </noframes>
</frameset>
</html>

Erläuterung:

Durch das Attribut noresize in einem <frame>-Tag verhindern Sie, dass der Anwender die Größe des Frame-Fensters verändern kann (noresize = no resize = keine Größenveränderung).

Beachten Sie:

Nicht nur das Frame-Fenster, für das Sie das Attribut notieren, kann dann nicht mehr in der Größe verändert werden, sondern auch alle benachbarten Frame-Fenster nicht. Im obigen Beispiel kann der Anwender also weder das linke noch das rechte Frame-Fenster verändern. Das ist eigentlich logisch, aber Sie sollten diese Folgewirkung berücksichtigen, wenn Sie erwägen, in einem Frame-Fenster das Verändern der Größe zu verhindern.

Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie das hier beschriebene Attribut in der Form noresize="noresize" notieren. Weitere Informationen dazu im Kapitel über Kapitel XHTML und HTML.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Rahmendicke bzw. unsichtbare Fensterrahmen

Sie können die normalerweise sichtbaren Rahmen zwischen Frame-Fenstern unterdrücken. Bei unsichtbaren Fensterrahmen wirken die Frame-Fenster wie nahtlos aneinander gefügte Flächen am Bildschirm. Leider gibt es hierbei bis auf den heutigen Tag Differenzen zwischen den Browsern, die dieses Feature seit langem unterstützen, und dem W3-Konsortium, das eine andere Variante durchsetzen will, an die sich die Browser aber nicht halten. Sie haben also die Auswahl, HTML-Standard-konform zu schreiben, und die weit verbreiteten Browser ignorieren Ihre Angaben, oder Sie schreiben für die Browser und verzichten auf die HTML-Konformität.

Beispiel 1 (HTML-Standard-konform):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Rahmendicke bzw. unsichtbare Fensterrahmen</title>
</head>
<frameset cols="250,*">
  <frame src="verweise6.htm" name="Navigation" scrolling="no" frameborder="0">
  <frame src="startseite.htm" name="Daten" frameborder="0">
  <noframes>
    <body>
    <p><a href="verweise6.htm">Navigation</a> <a href="startseite.htm">Daten</a></p>
    </body>
  </noframes>
</frameset>
</html>

Beispiel 2 (Browser-gerecht):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Rahmendicke bzw. unsichtbare Fensterrahmen</title>
</head>
<frameset cols="250,*" frameborder="0" framespacing="0" border="0">
  <frame src="verweise7.htm" name="Navigation" scrolling="no">
  <frame src="startseite.htm" name="Daten">
  <noframes>
    <body>
    <p><a href="verweise7.htm">Navigation</a> <a href="startseite.htm">Daten</a></p>
    </body>
  </noframes>
</frameset>
</html>

Erläuterung:

Wenn Sie HTML-Standard-konform arbeiten wollen, notieren Sie in einem gewünschten <frame>-Tag das Attribut frameborder. Mit frameborder="0" unterdrücken Sie die sichtbaren Rahmen zwischen dem betroffenen Frame-Fenster und allen seinen Nachbarfenstern, und mit frameborder="1" zeigen Sie die sichtbaren Rahmen explizit an (letzteres entspricht allerdings der Voreinstellung).

Bei der Syntax, die von den Browsern unterstützt wird, werden die dazu nötigen Attribute im einleitenden <frameset>-Tag desjenigen Framesets notiert, für das die Angaben dann gelten - sie betreffen dann also alle Rahmen innerhalb des Framesets.
border [Pixel] ist Netscape-Syntax und bestimmt die Breite der Rahmen in Pixel. Erlaubt sind Zahlenwerte von 0 (keine Rahmen anzeigen) und größer (border = Rahmen).
frameborder [1/0 oder yes/no] bedeutet nach Microsoft-Syntax die Angabe, ob 3D-Rahmen angezeigt werden sollen oder nicht. Dieses Attribut ist also gleichnamig mit dem HTML-Standard-konformen Attribut, bedeutet jedoch etwas anderes.
framespacing [Pixel] ist Microsoft-Syntax und bestimmt den Abstand zwischen Frame-Fenstern, mithin also die Breite der Rahmen in Pixel (spacing = Abstand).

Beachten Sie:

Nur mit frameborder="0" framespacing="0" (also mit beiden Angaben) unterdrücken Sie beim Internet Explorer die Rahmen konsequent. Wenn Sie nur frameborder="0" angeben, zeigt der Internet Explorer sichtbare Abstände zwischen den Frame-Fenstern an, allerdings nicht die üblichen 3D-Rahmen, sondern flache Zwischenräume. Um die Rahmen beim Internet Explorer und bei Netscape zu unterdrücken, müssen Sie alle drei Angaben frameborder="0" framespacing="0" border="0" notieren (wie im obigen Beispiel 2).

Wenn Sie die Rahmen zwischen den Frame-Fenstern unterdrücken, hat der Anwender keine Möglichkeit, die Größe der Frame-Fenster zu verändern. Testen Sie Projekte mit rahmenlosen Frames deshalb möglichst unter mehreren Bildschirmauflösungen und mit unterschiedlich großem Anzeigefenster.

MS IE 4.0 Netscape 3.0 Mozilla Firefox 1 Farbige Fensterrahmen

Sie können erzwingen, dass Rahmen zwischen den Frame-Fenstern farbig dargestellt werden. Diese Angaben gehören jedoch nicht zum HTML-Standard und erzeugen ungültiges HTML.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Farbige Fensterrahmen</title>
</head>
<frameset cols="250,*" bordercolor="#FFFF00">
  <frame src="verweise8.htm" name="Navigation" scrolling="no">
  <frame src="startseite.htm" name="Daten">
  <noframes>
    <body>
    <p><a href="verweise8.htm">Navigation</a> <a href="startseite.htm">Daten</a></p>
    </body>
  </noframes>
</frameset>
</html>

Erläuterung:

Mit den Attribut bordercolor im obersten <frameset>-Tag können Sie eine Rahmenfarbe für alle Fensterrahmen bestimmen. Dabei gelten die Regeln zum Seite Definieren von Farben in HTML.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Seite Attribut-Referenz für Framesets (<frameset>...</frameset>)
Seite Attribut-Referenz für Frames (<frame>...</frame>)

nach oben
weiter | Seite Verweise bei Frames
zurück | Seite Framesets und Frames definieren
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Frames

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Frames / Verweise bei Frames

SELFHTML

Verweise bei Frames
Informationsseite

nach unten Verweise zu anderen Frames
nach unten Verweise zum Beenden von Framesets
nach unten

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verweise zu anderen Frames

Wenn Sie mit Frame-Sets arbeiten, werden Sie häufig in einem Frame-Fenster Verweise anbieten wollen, bei derem Anklicken das Verweisziel in einem anderen Frame-Fenster angezeigt werden soll.

Detailbeispiel Teil 1 - Frame-Definitionen:

<frameset cols="250,*">
  <frame src="verweise.htm" name="links">
  <frame src="startseite.htm" name="rechts">
  <noframes>
    <body>
    <p>Alternativ-Inhalt (Zusammenfassung, Sitemap ...)</p>
    </body>
  </noframes>
</frameset>

Detailbeispiel Teil 2 - Verweise in verweise.htm:

<a href="startseite.htm" target="rechts">Startseite</a><br>
<a href="news.htm" target="rechts">News</a><br>
<a href="feedback.htm" target="rechts">Feedback</a><br>
<a href="impressum.htm" target="rechts">Impressum</a><br>

Erläuterung:

Voraussetzung für Verweise zu anderen Frames ist, dass die Frame-Fenster eines Framesets Namen erhalten. Im obigen Beispiel wird ein Frameset mit zwei Frame-Fenstern definiert, die mit dem Attribut name im <frame>-Tag die Namen links und rechts erhalten.
Für das Setzen eines Verweises zu einem anderen Frame-Fenster gelten beim href-Attribut wie üblich die Regeln zum Seite Referenzieren in HTML. Damit das Verweisziel jedoch in einem anderen Frame-Fenster angezeigt wird, notieren Sie im einleitenden Verweis-Tag zusätzlich das Attribut target (target = Ziel). Dahinter folgt der Name des Frame-Fensters, in dem das Verweisziel angezeigt werden soll.

Beachten Sie:

Beim Namen, den Sie bei name und dann bei target angeben, soll zwar laut HTML-Standard nicht zwischen Groß- und Kleinschreibung unterschieden werden. Doch achten Sie in der Praxis unbedingt darauf, bei target den Namen exakt so zu schreiben, wie Sie ihn mit name vergeben haben. Die Browser unterscheiden nämlich sehr wohl zwischen Groß-/Kleinschreibung - allein schon im Hinblick auf JavaScript!

Wenn Sie eine Datei mit Verweisen haben, deren Verweisziele alle in einem bestimmten anderen Frame-Fenster angezeigt werden sollen, sparen Sie Ressourcen, indem Sie eine Seite Zielfensterbasis definieren.

Für Verweise zu Zielen, die im gleichen Frame-Fenster angezeigt werden sollen wie der Verweis, benötigen Sie normalerweise keine zusätzliche Angabe im Verweis. Nur wenn Sie eine Zielfensterbasis in der Datei mit dem Verweis definiert haben, müssen Sie explizit angeben, dass die Datei im gleichen Frame-Fenster angezeigt werden soll. Dies erreichen Sie durch die Angabe target="_self" im einleitenden Verweis-Tag.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verweise zum Beenden von Framesets

Wenn Sie mit Framesets arbeiten, werden Sie in einem Frame-Fenster manchmal auch Verweise anbieten wollen, bei deren Anklicken das Verweisziel nicht mehr in Ihrem Frame-Set angezeigt werden soll. Besonders bei Verweisen zu fremden Web-Projekten ist es dringend angebracht, das eigene Frameset zu beenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Verweise zum Beenden von Framesets</title>
</head>
<body bgcolor="#FFF0C0" text="#000000" link="#A00000" vlink="#600000" alink="#A00000">

<h1>Willkommen</h1>

<p>W&auml;hlen Sie links einen Verweis aus! Oder probieren Sie mal diesen hier:<br>
<a href="http://aktuell.de.selfhtml.org/" target="_parent"><b>SELFHTML aktuell</b></a></p>

</body>
</html>

Erläuterung:

Das Beispiel zeigt eine HTML-Datei, die innerhalb eines Framesets zum Einsatz kommt. Darin ist ein Verweis notiert, bei dessen Anklicken das Frameset "gesprengt" werden soll. Zu diesem Zweck ist im einleitenden Verweis-Tag target="_parent" notiert.

target="_parent" bewirkt, dass das Verweisziel in dem Zustand des Anzeigefensters angezeigt wird, der vor dem Start Ihres Frame-Sets aktuell war. target="_top" bewirkt, dass das Verweisziel in jedem Fall im gesamten Anzeigefenster angezeigt wird, selbst dann, wenn das aktuelle Frameset in ein Frame-Fenster eines übergeordneten Framesets geladen wurde.

Weiterhin gibt es noch target="_blank", wodurch das Verweisziel in einem neuen Instanzfenster des WWW-Browsers angezeigt wird. Das Anzeigefenster mit Ihrem Frameset bleibt im Hintergrund erhalten. Der Anwender kann wieder zu diesem Fenster wechseln, wenn er möchte.

Beachten Sie:

Anstelle von target="_blank" können Sie auch target="Halligalli" oder sonst irgendeinen Unsinn notieren. Wenn es kein Fenster mit diesem Namen gibt, öffnen die Web-Browser das Verweisziel in einem neuen Browser-Fenster.

Das target-Attribut ist zwar nicht als deprecated gekennzeichnet, doch um es einzusetzen, müssen Sie in der betreffenden Datei die HTML-Variante Transitional verwenden. Der Grund ist, dass dieses Attribut für Verweise bei Verwendung von Frames gedacht ist und Frames eine eigene HTML-Variante haben, die von der Einstufung her der Variante Transitional entspricht.

nach oben
weiter | Seite Eingebettete Frames
zurück | Seite Eigenschaften von Frames
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Frames

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Frames / Eingebettete Frames

SELFHTML

Eingebettete Frames
Informationsseite

nach unten Eingebettete Frames definieren
nach unten Eigenschaften eingebetteter Frames
nach unten Verweise zu eingebetteten Frames
nach unten

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Eingebettete Frames definieren

Eingebettete Frames werden vom MS Internet Explorer ab Version 3.x interpretiert, von Netscape bis einschließlich Version 4.x dagegen nicht. Seit HTML 4.0 gehören sie zum HTML-Standard. Eingebettete Frames sind ein eigenständiges Gestaltungsmittel zur Informationsaufbereitung, das anders funktioniert als "normale" Frames. Eingebettete Frames erzeugen keine Aufteilung des Bildschirms, sondern sind ähnlich wie Grafiken Bereiche innerhalb einer HTML-Datei, in denen fremde Quellen, vor allem andere HTML-Dateien angezeigt werden können.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingebettete Frames definieren</title>
</head>
<body>

<h1>Fenstergucker</h1>

<p>Gucken Sie mal SELFHTML im Fenster an:</p>

<iframe src="../../../index.htm" width="90%" height="400" name="SELFHTML_in_a_box">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
  aufrufen: <a href="../../../index.htm">SELFHTML</a></p>
</iframe>

</body>
</html>

Erläuterung:

Für HTML-Dateien mit eingebetteten Frames gilt das gewöhnliche Seite Grundgerüst einer HTML-Datei. Eingebettete Frames können dann im Textkörper der HTML-Datei an einer gewünschten Stelle vorkommen. Mit <iframe...> leiten Sie einen eingebetteten Frame ein (iframe = inline frame = Rahmen im Textfluss). Mit dem Attribut src bestimmen Sie, was in dem eingebetteten Frame angezeigt werden soll. Es kann sich um eine andere HTML-Datei oder eine beliebige andere lokale oder entfernte Datenquelle handeln. Bei der Wertzuweisung gelten die Regeln zum Seite Referenzieren in HTML.
Ferner sollten Sie für den eingebetteten Frame mit name einen Namen vergeben. Diese Namen brauchen Sie, um nach unten Verweise zu dem eingebetteten Frame zu definieren.

Dringend zu empfehlen ist das Bestimmen der gewünschten Breite und Höhe des eingebetteten Frame-Fensters. Die Breite geben Sie im einleitenden <iframe>-Tag mit dem Attribut width an, die Höhe mit height. Erlaubt sind Pixelangaben oder Prozentwerte, die sich auf die Größe des Elternelements (bei fehlender oder prozentualer Angabe unter Berücksichtigung auch dessen Elternelements) beziehen.

Zwischen dem einleitenden <iframe> und dem erforderlichen, abschließenden </iframe> können Sie Text und andere Elemente notieren, die von Web-Browsern angezeigt werden, die den eingebetteten Frame nicht interpretieren.

Beachten Sie:

Wenn Sie das iframe-Element in einer HTML-Datei notieren, müssen Sie in dieser Datei die HTML-Variante Transitional wählen.

Andere Möglichkeiten, um Inhalte aus anderen Dateien innerhalb einer HTML-Datei anzuzeigen, sind Seite Datendateien als Objekt (ebenfalls HTML-Standard), Seite Layer mit Inhalt aus anderer Datei (Netscape-spezifisch) sowie Seite Server Side Includes (HTML-Standard-konform, jedoch nur in HTTP-Umgebung ausführbar).

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Eigenschaften eingebetteter Frames

Sie können verschiedene weitere Eigenschaften definieren, um ein eingebettetes Frame-Fenster zur Umgebung auszurichten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eigenschaften eingebetteter Frames</title>
</head>
<body>

<h1>Bild zum Scrollen</h1>

<iframe src="bild.jpg" name="Bildframe" width="300" height="200" align="left"
        scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
    <img src="bild.jpg" width="464" height="580" border="0" alt="Bild">
  </p>
</iframe>

<p>Dieses Bild wurde auf dem Karwendelstein bei Mittenwald aufgenommen,
in ca. 2400 Meter H&ouml;he. Es demonstriert, was einem in einem
Freistaat so alles passieren kann ...</p>

</body>
</html>

Erläuterung:

Das Beispiel zeigt, wie Sie ein eingebettetes Frame-Fenster dazu verwenden können, um eine größere Grafik anzuzeigen und diese mit eigenen Scrollbars auszustatten.

Mit align="left" richten Sie den eingebetteten Frame links aus. Nachfolgende Inhalte fließen dann rechts um den Frame. Mit align="right" richten Sie den eingebetteten Frame rechts aus und nachfolgende Inhalte fließen links um den Frame.

Mit scrolling="yes" können Sie Scrollbars (Bildlaufleisten) in dem eingebetteten Frame erzwingen, mit scrolling="no" unterdrücken. scrolling="auto" können Sie ebenfalls angeben, doch dies entspricht der Voreinstellung.

Mit frameborder="0" können Sie den sichtbaren Außenrahmen des eingebetteten Frames unterdrücken. frameborder="1" ist die Voreinstellung.

Zwei weitere Attribute, nämlich hspace und vspace, werden vom Internet Explorer ebenfalls interpretiert, sind aber im Zusammenhang mit eingebetteten Frames nicht im HTML-Standard verzeichnet - was etwas inkonsistent ist, da das align-Attribut bei solchen Frame-Fenstern genauso wirkt wie etwa bei Grafiken oder Objekten. Mit hspace [Pixel] bestimmen Sie den Abstand zum Text neben dem eingebetteten Frame, mit vspace [Pixel] den Abstand zum Text über bzw. unter dem Frame (hspace = horizontal space = horizontaler Abstand, vspace = vertical space = vertikaler Abstand). Beide Angaben erzeugen jedoch ungültiges HTML.

Beachten Sie:

Genau wie bei normalen Frames besteht auch bei eingebetteten Frames die Möglichkeit, mit dem Attribut longdesc eine Seite Langbeschreibung zu referenzieren.

Konqueror 3.1 unterstützt die Ausrichtung (align) von iframe nicht.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verweise zu eingebetteten Frames

In einer HTML-Datei, in der Sie einen eingebetteten Frame definieren, können Sie mit Verweisen auch den Inhalt des eingebetteten Frames ändern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Verweise zu eingebetteten Frames</title>
</head>
<body>

<h1>Fernsteuerung</h1>

<iframe src="startseite.htm" name="Fensterlein" width="500" height="400"
        marginheight="10" marginwidth="10" align="right">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>

<p>
  <a href="willkommen.htm" target="Fensterlein"><b>andere Seite</b></a><br>
  <a href="startseite.htm" target="Fensterlein"><b>erste Seite</b></a>
</p>

</body>
</html>

Erläuterung:

Voraussetzung für Verweise zu einem eingebetteten Frame ist, dass der eingebettete Frame mit name einen Namen erhalten hat. Im obigen Beispiel ist das der Name Fensterlein.
Für das Setzen eines Verweises zu dem eingebetteten Frame gelten die üblichen Regeln zum Seite Referenzieren in HTML. Damit das Verweisziel in dem Frame angezeigt wird, notieren Sie im einleitenden Verweis-Tag zusätzlich die Angabe target (target = Ziel). Dahinter folgt der Name des Frame-Fensters, in dem das Verweisziel angezeigt werden soll.

nach oben
weiter | Seite Frames als Mittel für Seiten-Layouts
zurück | Seite Verweise bei Frames
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Frames

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Frames / Frames als Mittel für Seiten-Layouts

SELFHTML

Frames als Mittel für Seiten-Layouts
Informationsseite

nach unten Sinnvolle Einsatzmöglichkeiten für Frames
nach unten Unfaire Schaufenster-Effekte
nach unten

Sinnvolle Einsatzmöglichkeiten für Frames

Frames - Informationsverteilung auf mehrere, voneinander unabhängige Fenster - sind ein faszinierendes Werkzeug, aber auch ein Werkzeug, mit dem man viel verkehrt machen kann. Generell gilt: jeder Einsatz von Frames muss gerechtfertigt sein. Das bedeutet: die Verwendung der Frame-Technik muss dem Anwender als sinnvoll und vorteilhaft erscheinen. Wer Frames aus purem Selbstzweck einsetzt, muss damit rechnen, als technikverliebter HTML-Novize statt als souveräner Web-Designer betrachtet zu werden.

Der Grund dafür ist, dass Frames nicht wegzudiskutierende Nachteile haben:

  • Probleme bei nicht Frame-fähigen Web-Browsern:
    Frames werden nicht von allen Web-Browsern angezeigt. Da die gesamte Struktur eines auf Frames basierenden Projekts von der Struktur herkömmlicher Projekte entscheidend abweicht, kann ein Anbieter von Frames solchen Anwendern, die keine Frames anzeigen können, entweder gar keine Alternative anbieten, oder eine "zweigleisige" Alternative, die sehr aufwendig zu realisieren und zu pflegen ist.
  • Frames und Bildschirmauflösung
    Bei kleineren Bildschirmen, z.B. bei Notebooks oder Handheld-Computern, sind mehr als zwei Frame-Fenster bereits eine Zumutung fürs Auge und die Übersicht.
  • Ladezeiten
    Frames verlangen mehr HTTP-Kommunikation zwischen Browser und Server, da insgesamt mehr Dateien geladen werden müssen. Andererseits werden Ladezeiten verkürzt, da das Menü und andere fixe Elemente nicht auf jeder Seite neu geladen werden müssen.
  • Problematisches Direktansteuern von untergeordneten Seiten
    Es ist zwar theoretisch möglich, aber meistens nicht im Sinne des Anbieters, wenn andere Anwender ein Lesezeichen oder einen Verweis auf eine HTML-Datei setzen, die Teil eines Framesets ist. Das ist in vielen Fällen ärgerlich. So wird beispielsweise anderen Informationsanbietern die Möglichkeit genommen, in einem bestimmten Informationszusammenhang auf eine bestimmte Seite in einem fremden Projekt zu verweisen.

In folgenden Fällen ist der Einsatz von Frames für den Anwender am ehesten nachvollziehbar:

  • zum schnellen Wechseln zwischen Informationseinheiten
    In diesem Fall enthält ein Frame-Fenster ein umfangreiches Verzeichnis mit anklickbaren Verweisen auf einzelne Informationsseiten, die in einem anderen, festen Frame-Fenster angezeigt werden. Das "Inhaltsverzeichnis" bleibt also jederzeit eingeblendet, und der Anwender kann zu jedem Zeitpunkt einen neuen Verweis daraus auswählen. Das erspart dem Anwender den wiederholten Rücksprung von den einzelnen Informationsseiten auf das übergeordnete Verzeichnis.
    Beispiel: ein Anbieter von Ferienappartements kann alle zur Verfügung stehenden Objekte in einem Verweis-Verzeichnis auflisten und das jeweils ausgewählte Objekt in einem festen anderen Frame-Fenster anzeigen.
  • zum ständigen Einblenden projektglobaler Steuerverweise
    Bei umfangreichen Projekten, in denen dem Anwender das Gefühl des "lost in hyperspace" droht, ist es sinnvoll, in einem separaten Frame-Fenster immer gültige Steuerverweise anzubieten, z.B. zur Homepage, zur nächsthöheren logischen Ebene, zum Stichwortverzeichnis oder zur Suchdatenbank. Bei kleinen Projekten, die nur aus einer Handvoll Seiten bestehen, wirkt diese Technik dagegen übertrieben und vermittelt dem Anwender eine falsche Vorstellung von der Größe des Projekts. Wenn der Anwender in einem solchen Fall nach wenigen Mausklicks feststellt, dass er bereits alles gesehen hat, wird er um so enttäuschter sein.
    Beispiel: Eine Zeitung, die im Web ein großes Archiv mit älteren Artikeln anbietet, könnte mit Hilfe der Frame-Technik ständige Verweise zu einem thematisch sortierten Zugangsverzeichnis, zu einem Stichwortverzeichnis und einer Volltext-Suchdatenbank für die einzelnen Artikel anbieten.
  • zum gleichzeitigen Anzeigen von zu vergleichenden Informationen
    Hypertext bedeutet nicht nur, dem Anwender per Mausklick weitere Informationen zur Verfügung zu stellen, sondern auch, dem Anwender die Möglichkeit zu bieten, sich selbst Informationen so zusammenzustellen, dass er sie optimal miteinander vergleichen und daraus Schlüsse oder Entscheidungen ableiten kann. Zu diesem Zweck eignet sich die Frame-Technik hervorragend, da sie es erlaubt, verschiedene, getrennt voneinander gespeicherte Informationen auf Anwenderwunsch gleichzeitig anzuzeigen.
    Beispiel: Eine Verbraucherberatung könnte in einem viergeteilten Frameset in zwei Frames zwei gleichartig aufgebaute Verweis-Verzeichnisse zu Produkttests anbieten. Im dritten Frame-Fenster wird der Produkttest angezeigt, den der Anwender im ersten Frame-Fenster mit Verweisen auswählt; im vierten Frame-Fenster kann der Anwender einen Produkttest anzeigen, den er im zweiten Frame-Fenster mit Verweisen auswählt. Auf diese Weise kann der Anwender beliebige getestete Produkte direkt miteinander vergleichen. Voraussetzung hierzu ist natürlich, dass alle Produkttests einen einheitlichen Aufbau und ein einheitliches Bewertungsschema haben, um direkte Vergleiche zu erlauben.
  • bei besonders kunstvoller Seitengestaltung
    In diesem Fall muss der Anwender auf den ersten Blick erkennen können, dass die Frame-Technik eine bestimmte künstlerische Aussage unterstützen soll.

Bei Verwendung von Frames besteht auch noch eher als bei "einfachen" Seiten die Gefahr eines gestalterischen Overkills. Achten Sie bei Frames unbedingt darauf, dass die Farben der Inhalte in den verschiedenen Frame-Fenstern insgesamt miteinander harmonieren. Das Gleiche gilt auch für andere optische Eigenschaften wie Schriftarten, Schriftgrößen usw. Ein Navigationsfenster muss nicht krampfhaft "anders" aussehen als ein inhaltstragendes Fenster, damit auch ja jeder Besucher sieht, dass es sich um Frames handelt. Kontraste zwischen Frame-Fenstern dürfen nicht die Regeln einer homogenen Gesamtgestaltung verletzen.

Unfaire Schaufenster-Effekte

Mit Hilfe von Frames ist es auch möglich, fremde Web-Seiten innerhalb eines Frame-Fensters im eigenen Web-Projekt darzustellen. Dies ist jedoch sehr problematisch und in den meisten Fällen unfair. Denn auf diese Weise verkommen fremde Web-Seiten zu "Schaufenstern" innerhalb des eigenen Web-Projekts. Das ist eine unfeine Geste gegenüber den Fremdanbietern, weil es das eigene Web-Projekt in den Augen des Anwenders als "Mega-Projekt" erscheinen lässt. Es ist auch juristisch bedenklich, da Sie sich leicht eine Klage wegen Urheberrechtsverletzung einhandeln können, wenn Sie Fremdinhalte "vereinnahmen".

Ferner kann es auch passieren, dass in einem Frame-Fenster eine Fremdanbieter-Seite angezeigt wird, die ihrerseits Frames einsetzt. So kommt es zu einem ärgerlichen "Fraktal-Effekt" von Frame-Fenstern auf dem Bildschirm des Anwenders.

Wenn Sie innerhalb eines Frame-Projekts auf fremde Seiten verweisen, sollten Sie eine der folgenden Möglichkeiten wählen:

  • Ursprünglichen Fensterzustand wiederherstellen
    Setzen Sie den Verweis so, dass der Anwender Ihr definiertes Frameset verlässt und wieder den Fensterzustand erhält, den er vor Aufruf Ihres Projekts hatte. Dies erreichen Sie durch Verweise von der Art
    <a href="http://..." target="_parent">Verweistext</a>
  • Seite in neuem Fenster öffnen
    Setzen Sie den Verweis so, dass die Seite in einem neuen Browser-Fenster geöffnet wird. Hierbei handelt es sich um eine sehr weit verbreitete Methode, die allerdings in Zeiten des sogenannten "Tabbed-Browsing" als überholt zu beurteilen ist. Der Quelltext für solche Verweise kann so aussehen:
    <a href="http://..." target="_blank">Verweistext</a>
  • Doppelverweis anbieten
    Dadurch überlassen Sie dem Anwender die Entscheidung, wie er die fremde Seite angezeigt bekommen will. Notieren Sie zwei Verweise direkt unter- oder nebeneinander, die das gleiche Ziel haben, etwa in der Weise
    <a href="http://..." target="RechtsUnten">Fremde Seite im Frame rechts unten anzeigen</a><br>
    <a href="http://..." target="_parent">Fremde Seite voll anzeigen</a>
  • Anwender auf Möglichkeit zum Verändern der Frames hinweisen
    Wenn Sie keine der beiden anderen Möglichkeiten anbieten wollen, sollten Sie wenigstens das Verändern der Frame-Fenstergrößen durch den Anwender erlauben und den Anwender auf diese Möglichkeit explizit hinweisen. Um das Verändern der Frame-Fenster durch den Anwender zu erlauben, verzichten Sie einfach auf das Attribut "noresize" im <frame>-Tag.

Mit Hilfe von JavaScript ist es möglich, die Seite Seitenanzeige in Frames zu verhindern.

nach oben
weiter | Seite Objekte einbinden
zurück | Seite Eingebettete Frames
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Frames

© 2007 Seite Impressum


SELFHTML: HTML / Multimedia

SELFHTML

Multimedia
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei und zum Seite Referenzieren in HTML.
Dieser Abschnitt beschreibt, wie Sie Multimedia-Elemente wie Video, Sound, Flash oder Java-Applets in HTML einbetten können.
Hinweis: die Anzeigebeispiele in diesem Abschnitt erfordern zum Teil hohe System-Ressourcen, installierte Plugins usw. Da die Anzeige von Multimedia noch sehr unausgereift ist, kann es beim Aufruf von Anzeigebeispielen zu unvorhersehbaren Problemen kommen.
Der Abschnitt besteht aus folgenden Seiten:

Seite Objekte einbinden
Seite Eigenschaften von Objekten
Seite Java-Applets einbinden (herkömmlich)
Seite Multimedia einbinden (Netscape herkömmlich)

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Multimedia / Objekte einbinden

SELFHTML

Objekte einbinden
Informationsseite

nach unten Allgemeines zu Objekten in HTML
nach unten Datendateien als Objekt einbinden
nach unten Verweis-sensitive Grafiken als Objekt einbinden
nach unten Java-Applets als Objekt einbinden
nach unten ActiveX-Controls als Objekt einbinden
nach unten Flash-Anwendungen als Objekt einbinden
nach unten Rahmen um Objekte
nach unten Namen für Objekte
nach unten Weitere Informationen
nach unten

Allgemeines zu Objekten in HTML

Unter "Objekt" wird hier jede Art von Datei oder Datenquelle verstanden, die sich außerhalb einer HTML-Datei befindet und in diese HTML-Datei eingebunden werden soll. Es kann sich um eine Datendatei handeln, also etwa um eine Excel-Tabelle, eine AutoCad-Datei, eine Midi-Musikdatei, ein Flash-Movie, eine Streaming-Quelle für Rundfunkübertragung und vieles andere mehr. Es kann sich aber auch um eine vom Web-Browser ausführbare Datei handeln, also um ein Programm. Das können zum Beispiel Java-Applets oder ActiveX-Controls sein.

Damit nicht für jede neue Form der Einbindung anderer Ressourcen ein neues HTML-Element benötigt wird, soll ein einziges, mächtiges HTML-Element für alle Multimedia- und Fremdprogrammreferenzen genügen: das object-Element. Dieses Element kann zwar nicht das Problem lösen, wie eine beliebige Datei beim Anwender angezeigt werden kann, aber es bietet zumindest eine einheitliche Syntax und trägt dadurch zur Vereinfachung von HTML bei.

Das object-Element wird jedoch immer noch nicht vollständig von den Web-Browsern unterstützt. Das liegt zum Teil allerdings auch an der Vielzahl der proprietären Multimediaformate und ihren unterschiedlichen Schnittstellen. Das object-Element ist jedoch so ausgelegt, dass es möglichst flexibel auf alle denkbaren Anforderungen reagieren kann und dem Browser genügend Information liefert, um mit der ausführenden Anwendung zu kommunizieren und sie in sein Anzeigefenster einzubetten.

Objekte sind aus HTML-Sicht Seite Inline-Elemente. In der "Strict"-Variante von HTML müssen solche Elemente innerhalb von Seite Block-Elementen vorkommen, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.

Beachten Sie:

Wenn Sie mit Versuchen, das object-Element zu verwenden, keinen Erfolg haben, probieren Sie folgende herkömmlichen Möglichkeiten:

Seite Multimedia einbinden (Netscape)
Seite Java-Applets einbinden

Das object-Element wird vom Internet Explorer seit Version 3.x und von Netscape seit Version 4.x unterstützt. Von einer ernstzunehmenden Implementierung kann bei diesen Produktversionen aber noch keine Rede sein. Deshalb ist bei den Beispielen auf dieser Seite in der Regel Internet Explorer 5.0 und Netscape 6.0 angegeben. Aber auch das bedeutet noch lange nicht, dass mit diesen Browsern alles reibungslos funktioniert.

Binden Sie Multimedia-Dateien im Normalfall nicht kommentarlos in Ihre Web-Seiten ein, sondern weisen Sie den Anwender darauf hin, um welche Art von Daten es sich handelt, und unter welchen Voraussetzungen eine korrekte Anzeige möglich ist.

Wenn Sie große Dateien einbetten, weisen Sie den Anwender im umgebenden Text auf die Größe der Datei hin.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Datendateien als Objekt einbinden

Sie können eine beliebige Datendatei als Objekt in eine HTML-Datei einbinden, also z.B. ein Video, eine Konstruktionszeichnung, eine als fertige Datei vorliegende 3D-Welt, eine Musikdatei oder dergleichen. Auch einfache Textdateien und andere HTML-Dateien können Sie auf diese Weise einbinden. Ein Web-Browser kann solche Dateien anzeigen, wenn er entweder selber in der Lage ist, das Dateiformat anzuzeigen, oder wenn der Anwender ein entsprechendes Plugin installiert hat. Wenn das Plugin installiert ist, kann der Web-Browser die Datei so in seinem Anzeigefenster präsentieren, wie sie von dem Ursprungsprogramm erstellt wurde. Bei Abspielvorgängen, etwa von Videos oder Sound, wird ein entsprechender Player angezeigt - je nachdem, wie das Plugin beschaffen ist.

Wenn dem Browser eine Verknüpfung zwischen dem Datentyp und einem Fremdprogramm bekannt ist, kann er das Fremdprogramm mit der betreffenden Datei starten. Ob die Daten dann jedoch innerhalb des Bereichs auf der Web-Seite angezeigt werden, der für das Objekt definiert ist, hängt davon ab, ob der Browser und das andere Programm entsprechende Kommunikationsmöglichkeiten, z.B. vom Betriebssystem bereitgestellte Kommunikationsschnittstellen, nutzen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Beispiel erfordert installierten Seite SVG-Viewer und Seite DOM-fähigen Browser, also mindestens Internet Explorer 5.x oder Netscape 6; mit dem Plugin englischsprachige Seite Adobe SVG Viewer funktioniert es auch schon im Netscape 4.7)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Datendateien als Objekt einbinden</title>
</head>
<body>

<h1>Analoguhr als SVG-Grafik mit eingebettetem JavaScript</h1>

<p>
  <object data="uhr.svg" type="image/svg+xml" width="200" height="200">
    <param name="src" value="uhr.svg">
    Ihr Browser kann das Objekt leider nicht anzeigen!
  </object>
</p>

</body>
</html>

Erläuterung:

Mit <object> leiten Sie die Referenz auf die einzubindende Datei ein, mit </object> wird das Element beendet. Das object-Element hat keine Pflichtattribute. Je nachdem, was Sie damit einbinden, müssen Sie selbst herausfinden oder auf Herstellerhinweise achten, welche der nach HTML-Standard möglichen Attribute Sie angeben sollten oder müssen. Zwischen dem einleitenden <object>-Tag und dem abschließenden </object>-Tag kann "beliebiger" HTML-Quelltext notiert werden. Im obigen Beispiel ist einfach ein Text notiert, dass der Browser das Objekt nicht anzeigen kann. Ebensogut könnte an dieser Stelle auch eine alternative Kapitel Grafik notiert werden oder ein alternativer Versuch, das Objekt einzubinden, beispielsweise nach der Seite herkömmlichen Netscape-Syntax. Es ist sogar erlaubt, als Inhalt eines object-Elements ein anderes object-Element zu notieren, um damit beispielsweise ein alternatives Objekt in einem anderen Dateiformat einzubinden.

Um eine Datendatei einzubinden, ist das Attribut data vorgesehen. Damit referenzieren Sie die gewünschte Datei (data = Daten). Bei der Wertzuweisung an dieses Attribut gelten die Regeln zum Seite Referenzieren in HTML. Wenn sich die Datei also beispielsweise im gleichen Verzeichnis wie die HTML-Datei befindet, dann genügt einfach die Angabe des Dateinamens - so wie im obigen Beispiel. Das Referenzieren mit relativen oder absoluten Pfadangaben ist jedoch ebenso möglich, z.B.:
<object data="verzeichnis/datei.xy">
<object data="../datei.xy">
<object data="../woanders/datei.xy">
Auch das Referenzieren von einem vollständigen URI ist möglich, z.B.:
<object data="http://www.example.org/datei.xy">

Zusätzlich können Sie den Seite MIME-Typ der Datei angeben. Bei Datendateien, die mit data referenziert werden, notieren Sie dazu das Attribut type - so wie im obigen Beispiel. Als Wert weisen Sie einen gültigen MIME-Typ zu. Wenn Sie den MIME-Typ nicht kennen, lassen Sie die Angabe type weg. Wenn Sie den MIME-Typ kennen und angeben, helfen Sie dem Web-Browser durch die Angabe, schneller zu reagieren.

Bei eingebundenen Objekten sollten Sie stets Angaben zu Breite und Höhe notieren. Mit dem Attribut width legen Sie die Breite in Pixel oder in Prozent in Bezug auf die verfügbare Breite fest, und mit height die Höhe.
Manche Daten, zum Beispiel Videos, haben eine Originalbreite und Originalhöhe. Um so ein Video optimal einzubinden, sollten Sie dessen genaue Breite und Höhe kennen und mit width und height beim Einbinden der Videodatei angeben.
Manche Plugins, zum Beispiel Sound-Player, haben eine bestimmte Größe. Wenn Sie die genaue Größe kennen, sollten Sie beim Einbinden von Sound-Dateien, die mit dem betreffenden Plugin wiedergegeben werden sollen, die genaue Höhe und Breite des Players angeben. So können Sie den Player vollständig und optimal innerhalb der Bildschirmanzeige der HTML-Datei platzieren. Die Größenangaben sind bei solchen Plugins normalerweise bei der Software dokumentiert.
Wenn Sie zunächst nicht wissen, wie viel Breite oder Höhe das Objekt benötigt, müssen Sie verschiedene Werte ausprobieren.
Mit den Angaben width="0" und height="0" können Sie die sichtbare Anzeige auch ganz unterdrücken. Das kann zum Beispiel bei Hintergrundmusik erwünscht sein.

Beachten Sie:

Um Anzeigeprobleme mit verschiedenen Versionen des englischsprachige Seite Adobe SVG Viewers bei Einbinden von SVG-Dateien zu vermeiden, sollten Sie im object-Element die Datenquelle zusätzlich als Paramter angeben: <param name="src" value="uhr.svg">.

Das object-Element darf auch im Kapitel Dateikopf einer HTML-Datei, also zwischen <head> und </head> notiert werden. Das ist dann sinnvoll, wenn die Datendatei nicht angezeigt werden soll, z.B. wenn einfach eine Hintergrundmusik abgespielt werden soll. In diesem Fall empfiehlt es sich, die Angaben width="0" und height="0" im einleitenden <object>-Tag zu notieren. Bei Objekten, die im HTML-Dateikopf eingebunden werden, darf jedoch zwischen <object> und </object> kein alternativer Inhalt stehen, der visuelle Ausgaben erzeugt.

Das W3-Konsortium sieht im HTML-Standard auch die Möglichkeit vor, das object-Element innerhalb eines Kapitel Formulars zu notieren, um beispielsweise in visueller Interaktion mit dem Anwender Werte zu ermitteln, die dann beispielsweise in Seite versteckten Formularfeldern gespeichert und zusammen mit den Formulardaten übertragen werden. Vorgaben, wie genau die Kommunikation zwischen Objekt und Formularelementen funktionieren soll, gehören jedoch nicht zur HTML-Spezifikation.

Konqueror 3.1 interpretiert zwar das object-Element, stellt das Beispiel aber nicht dar. Konqueror 3.3 benötigt keinen zusätzlichen Viewer (abgesehen davon, daß Adobe nur Viewer für Windows anbietet), kann jedoch den in die SVG-Datei eingebetteten JavaScript-Code nicht ausführen.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das param-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <param ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 4.0 XHTML 1.0 Verweis-sensitive Grafiken als Objekt einbinden

Diese Möglichkeit des object-Elements ist vor allem für Grafiken vorgesehen, die nicht einem der Standardtypen GIF, JPEG oder PNG entsprechen, die üblicherweise mit dem <img>-Tag eingebunden werden. Gedacht ist die Möglichkeit beispielsweise für vektorgrafische CAD-Zeichnungen oder andere Grafikformate, die Sie mit Hilfe des object-Elements einbinden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Beispiel erfordert installierten Seite LuraWave-Viewer)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Verweis-sensitive Grafiken als Objekt einbinden</title>
</head>
<body>

<h1>Zur Stadt oder Region Ihrer Wahl!</h1>

<p>Klicken Sie, falls Sie die LuraWave-Grafik sehen können, auf die Stadt
oder Region Ihrer Wahl. Falls nichts passiert, unterstützt der Browser zwar
die Anzeige des Objekts, aber nicht das Feature verweis-sensitiver Grafiken
für Objekte.</p>

<p>
  <map name="Landkarte">
    <area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Koblenz">
    <area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden">
    <area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/" alt="Mainz">
    <area shape="rect" coords="100,26,152,58" href="http://www.frankfurt.de/" alt="Frankfurt">
    <area shape="rect" coords="27,113,93,134" href="http://www.mannheim.de/" alt="Mannheim">
    <area shape="rect" coords="100,138,163,159" href="http://www.heidelberg.de/" alt="Heidelberg">
    <area shape="rect" coords="207,77,266,101" href="http://www.wuerzburg.de/" alt="Würzburg">
    <area shape="rect" coords="282,62,344,85" href="http://www.bamberg.de/" alt="Bamberg">
    <area shape="rect" coords="255,132,316,150" href="http://www.nuernberg.de/" alt="Nürnberg">
    <area shape="rect" coords="78,182,132,200" href="http://www.karlsruhe.de/" alt="Karlsruhe">
    <area shape="rect" coords="142,169,200,193" href="http://www.heilbronn.de/" alt="Heilbronn">
    <area shape="rect" coords="140,209,198,230" href="http://www.stuttgart.de/" alt="Stuttgart">
    <area shape="rect" coords="187,263,222,281" href="http://www.ulm.de/" alt="Ulm">
    <area shape="rect" coords="249,278,304,297" href="http://www.augsburg.de/" alt="Augsburg">
    <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
          href="http://www.baden-aktuell.de/" alt="Baden">
  </map>
  <object data="karte.lwf" type="image/x-wavelet" width="345" height="312" usemap="#Landkarte">
    Ihr Browser kann das Objekt leider nicht anzeigen!
  </object>
</p>
</body>
</html>

Erläuterung:

Um eine verweis-sensitive Grafik als Objekt einzubinden, notieren Sie im einleitenden <object>-Tag das Attribut usemap. Das restliche Verfahren ist dann das gleiche wie bei Seite verweis-sensitiven Grafiken (siehe Beschreibung dort).

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das area-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <area ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 Java-Applets als Objekt einbinden

Java-Applets sind ausführbare Programme, deren Bildschirmausgaben ein Web-Browser innerhalb seines Anzeigefensters darstellen kann. Applets können z.B. bewegte Animationen (Tricksequenzen) enthalten, Echtzeitabläufe in bewegten Grafiken darstellen (Stichwort: Börsenticker), oder Interaktionen mit dem Anwender austauschen. So werden Java-Applets etwa häufig bei Online-Banking eingesetzt.

Java-Applets müssen in compilierter Form vorliegen, um bei der Referenzierung in einer HTML-Datei ausgeführt werden zu können. Normalerweise haben compilierte Java-Applets die Dateinamenerweiterung .class.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Java-Applets als Objekt einbinden</title>
</head>
<body>

<h1>Wagen Sie sich durchs Labyrinth!</h1>

<p>
  <object classid="java:zmaze3d.class" codetype="application/java-vm"
          width="600" height="400"></object>
</p>

</body>
</html>

Erläuterung:

Mit dem Attribut classid im einleitenden <object>-Tag referenzieren Sie die Implementierung des JavaApplets (classid = class identifier = Klassenbezeichner). Erlaubt ist ein spezieller URI: Die Wertzuweisung besteht aus der festen Zeichenfolge java: - gefolgt von dem Namen der .class-Datei (also der ausführbaren Applet-Datei). Im obigen Beispiel wird auf diese Weise die Datei zmaze3d.class in der Form classid="java:zmaze3d.class" eingebunden.

Wenn sich die Applet-Datei in einem anderen Verzeichnis befindet als die HTML-Datei, in der sie referenziert wird, oder auf einem anderen Internet-Server, dann müssen Sie den Pfad bzw. die Adresse des Server-Rechners und das Verzeichnis angeben, wo sich die Programmdatei befindet (nur das Verzeichnis, nicht mehr den Namen der Programmdatei). Dazu verwenden Sie - ebenfalls im einleitenden <object>-Tag - das Attribut codebase. Bei der Wertzuweisung an dieses Attribut gelten die Regeln zum Seite Referenzieren in HTML. Die Angabe von codebase kann in einigen Fällen auch erforderlich sein, um Teile eines Java-Applets von einem bestimmten Internet-Server nachzuladen.

Ähnlich wie für Datendateien gibt es auch für ausführbare Programmdateien Seite MIME-Typen. Bei Java-Applets sind die Angaben codetype="application/java" oder codetype="application/java-vm" gebräuchlich.

Zwischen <object> und </object> können Sie im Zusammenhang mit Java-Applets Aufrufparameter notieren. Viele Java-Applets erwarten einen oder mehrere solche Parameter beim Aufruf.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Java-Applets als Objekt einbinden</title>
</head>
<body>

<h1>Ein Lauftext mit Java</h1>

<p>
  <object classid="java:zticker.class" codetype="application/java" width="600" height="60">
    <param name="msg" value="Die Energie des Verstehens">
    <param name="href" value="../../../index.htm">
    <param name="speed" value="5">
    <param name="bgco" value="255,255,255">
    <param name="txtco" value="000,000,255">
    <param name="hrefco" value="255,255,255">
  </object>
</p>

</body>
</html>

Erläuterung:

Jeder Parameter wird durch <param name= value=> angegeben. Beim Attribut name geben Sie den Namen des Parameters an. Bei value geben Sie den gewünschten Wert des Parameters an, der dem Applet übergeben werden soll.

Beachten Sie:

Bei Java-Applets, die aus mehreren class-Dateien bestehen, müssen Sie die Datei angeben, die den Programmstart enthält. Näheres dazu entnehmen Sie der Dokumentation, die solchen Java-Programmen beigefügt sein sollte. Auch die genauen Anweisungen zum Einbinden eines Java-Applets - z.B. zu erwarteten oder erlaubten Parametern - finden Sie normalerweise in der Dokumentation zu dem Java-Applet.

Beachten Sie auch die Seite herkömmliche Methode zum Einbinden von Java-Applets.

Internet Explorer 5 interpretiert das Beispiel problemlos, während Internet Explorer 6 auf Windows XP nach einem Update auf ServicePack 2 das Applet nicht mehr darstellt.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das param-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <param  ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 4.0 XHTML 1.0 MS IE 5.0 ActiveX-Controls als Objekt einbinden

ActiveX-Controls können ähnliche Aufgaben wahrnehmen wie Java-Applets. Jedoch sind sie stärker als Java-Applets in der Windows-Welt und der Welt von Microsoft verankert und werden nur vom Microsoft Internet Explorer interpretiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus ( Beispiel-Seite Quelle zum Beispieltext)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ActiveX-Controls als Objekt einbinden</title>
</head>
<body>

<h1>Eine MIDI-Datei</h1>

<p>
  <object width="267" height="175" classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
    <param name="filename" value="ritmo.mid">
  </object>
</p>

</body>
</html>

Erläuterung:

Mit dem Attribut classid referenzieren Sie die Implementierung des gewünschten ActiveX-Controls (classid = class identifier = Klassenbezeichner). Die Angabe besteht aus der festen Zeichenfolge CLSID: - gefolgt von der Bezeichner-ID. Diese ID müssen Sie kennen. Im obigen Beispiel wird ein recht bekanntes ActiveX-Control referenziert, nämlich dasjenige, das unter Windows zum Abspielen von Multimedia-Dateien zuständig ist. Es bindet den Media-Player von Windows in den Bereich des definierten Objekts ein. Mit classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" binden Sie also ein ActiveX-Control ein, das es erlaubt, Sound- und Videodateien aller bekannten Formate wie WAV, AU, MID, MP3, AVI, MPEG usw. abzuspielen.

Mit dem Attribut codebase können Sie die Internet-Adresse angeben, von der das ActiveX-Control geladen werden kann, falls der WWW-Browser es auf dem Rechner des Anwenders nicht findet (ActiveX-Controls werden nach dem Laden normalerweise in einem Windows-Unterverzeichnis abgespeichert - *.ocx-Dateien - und beim erneuten Aufruf auch wieder von dort geladen).

ActiveX-Controls können genauso wie Java-Applets Parameter übergeben bekommen. Diese werden auch genauso notiert, nämlich mit <param name= value=> zwischen <object> und </object>. Das ActiveX-Control im obigen Beispiel erwartet einen Parameter namens filename, der bei value die Angabe des gewünschten Dateinamens der abzuspielenden Datei erwartet.

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das param-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <param  ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Flash-Anwendungen als Objekt einbinden

Zum Einbinden von Flash (*.swf-Dateien) gibt es verschiedene Ansätze. Die beiden ältesten Ansätze entsprechen den Techniken zur Einbindung von Plugins, die Netscape und Microsoft unabhängig voneinander für ihre Browser entwickelten. Der Netscape Navigator erwartete ursprünglich die Einbindung über das Netscape-eigene embed-Element, welches unter Seite Multimedia einbinden (Netscape) näher beschrieben wird. Der Microsoft Internet Explorer (Windows) hingegen erwartete, dass die Flash-Anwendung als nach oben ActiveX-Control eingebunden wird. Lange Zeit wurden beide Techniken parallel verwendet, sodass soviele Browser wie möglich die Flash-Anwendungen ausführen konnten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Flash-Anwendungen als Objekt einbinden</title>
</head>
<body>

<h1>Das gute alte Wurm-Spiel in Flash!</h1>

<p>Erst auf "Start" klicken. Dann Leertaste drücken. Mit dem Wurm die
angezeigte Zahl ansteuern und treffen. Außenränder und Hindernisse nicht
berühren!</p>

<p>
  <object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="400"
          codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0">
    <param name="movie" value="nibbles.swf">
    <param name="quality" value="high">
    <param name="scale" value="exactfit">
    <param name="menu" value="true">
    <param name="bgcolor" value="#000040">
    <embed src="nibbles.swf" quality="high" scale="exactfit" menu="false"
           bgcolor="#000000" width="600" height="400" swLiveConnect="false"
           type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">
    </embed>
  </object>
</p>

</body>
</html>

Erläuterung:

Das Beispiel enthält ein object-Element, mit dem die Flash-Anwendung auf die Microsoft-Art eingebunden wird. Mit dem Attribut classid referenzieren Sie die gewünschte Implementierung (classid = class identifier = Klassenbezeichner). Die Angabe besteht aus der festen Zeichenfolge CLSID: - gefolgt von der Bezeichner-ID. Für das Macromedia-Flash-Plugin müssen Sie stets classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000" notieren.

Mit dem Attribut codebase können Sie die Internet-Adresse angeben, von der das Flash-Plugin geladen werden kann, falls es beim Anwender nicht vorhanden ist. Im obigen Beispiel ist die Adresse für Flash Version 4 angegeben. Wenn Sie Flash-Anwendungen einsetzen, die mit Flash 5 erstellt wurden, geben Sie codebase="http://active.macromedia.com/flash5/cabs/ swflash.cab#version=5,0,0,0" an.

Flash-Anwendungen können genauso wie Java-Applets Parameter übergeben bekommen. Diese werden auch genauso notiert, nämlich mit <param name= value=> zwischen <object> und </object>. Der wichtigste Parameter ist der namens movie, bei dem Sie bei value die Adresse der gewünschten *.swf-Datei angeben.

Immerhalb des object-Elements befindet sich ferner ein embed-Element als Alternativinhalt für diejenigen Browser, die die Microsoft-Methode nicht unterstützen. Die Adresse der Flash-Anwendungen geben Sie im src-Attribut an.

Diese umständliche doppelte Einbindung mit object und einem darin verschachtelten embed hat sich als robust erwiesen und wird auch offiziell vom Flash-Hersteller Macromedia empfohlen. Der Nachteil dabei ist jedoch, dass Sie ein HTML-Element verwenden müssen, das nicht zum HTML-Standard gehört. Sie erzeugen damit also ungültiges HTML.

Die im HTML-4-Standard geschaffene allgemeine Möglichkeit des nach oben Einbindens von Datendateien als Objekt ist zum Glück auch zum Einbinden von Flash-Anwendungen zu gebrauchen. Damit existiert eine einheitliche, browserübergreifende Schreibweise.

Beispiel:

<object data="nibbles.swf" type="application/x-shockwave-flash" width="600" height="400">
  <param name="movie" value="nibbles.swf">
  <param name="quality" value="high">
  <param name="scale" value="exactfit">
  <param name="menu" value="true">
  <param name="bgcolor" value="#000040">
</object>

Erläuterung:

Zum Einbinden der Flash-Anwendung wird ein object-Element verwendet. Damit die Browser die eingebundene Datei als Flash-Anwendung erkennen, müssen Sie das Attribut type="application/x-shockwave-flash" angeben. Die Angabe der Adresse der swf-Datei erfolgt im Attribut data und gleichzeitig im bekannten Parameter <param name="movie" value="...">. Weitere Parameter werden wie gewohnt innerhalb des object-Elements notiert.

Beachten Sie:

Diese neuartige Methode benutzt zwar validen Code und folgt dem HTML-Standard, funktioniert allerdings erst in neueren Browsern und zieht einige weitere Probleme nach sich. Ein gravierender Nachteil ist die Tatsache, dass der Internet Explorer die Flash-Anwendung erst dann startet, wenn sie komplett vom Server übertragen wurde. Bei der Einbindung mithilfe der herkömmlichen Microsoft-Methode oder embed wird die swf-Datei normalerweise gestreamt. Das heißt, die Flash-Anwendung kann bereits starten, wenn die Datei teilweise heruntergeladen wurde. Das Manko des fehlenden Streamings kann nur recht kompliziert durch eine zusätzliche Flash-Datei umgangen werden, die als Container fungiert. Genauere Informationen und weitere Fallstricke finden Sie unter englischsprachige Seite Flash Satay: Embedding Flash While Supporting Standards. Seien Sie sich der potenziellen Schwierigkeiten bewusst, wenn Sie Flash auf diese Weise in Ihre Seiten einbinden.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das param-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <param ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 7.0 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Rahmen um Objekte

Sie können festlegen, dass der Browser einen Rahmen um ein eingebundenes Objekt zeichnet. Das kann zur Verdeutlichung beitragen, dass es sich um ein eingebettetes Objekt handelt. Das Attribut dafür ist jedoch als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen, da es durch die CSS-Eigenschaft Seite border ersetzbar ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rahmen um Objekte</title>
</head>
<body>

<h1>Eine eingerahmte eingebundene Text-Datei!</h1>

<p>
  <object data="html.txt" type="text/plain" width="300" height="400" border="2">
    Ihr Browser kann das Objekt leider nicht anzeigen!
  </object>
</p>

</body>
</html>

Erläuterung:

Durch das Attribut border innerhalb des einleitenden <object>-Tags wird ein Rahmen um das Objekt definiert (border = Rand). Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke.

Beachten Sie:

Das obige Beispiel zeigt, wie Sie einfache Textdateien "in a box" einbinden können - ebenso geht es mit HTML-Dateien und dem MIME-Typ text/html. Der Internet Explorer 5.0, Opera 6 und Konqueror und Safari zeigen die Dateien an, allerdings keinen Rahmen. Netscape kann erst ab Version 7.0 die Textdatei als Objekt anzeigen. Opera ab Version 7.20 und Firefox zeigen den Rahmen an.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Namen für Objekte

Sie können einen Namen für ein Objekt vergeben.

Detailbeispiel:

<object name="MIDI_Datei" width="267" height="175"
        classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
  <param name="filename" value="ritmo.mid">
</object>

Erläuterung:

Mit name vergeben Sie einen Namen für das Objekt.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo das object-Element vorkommen darf, welche Attribute es haben kann und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Objektreferenzen (<object> ... </object>)
Seite Attribut-Referenz für Objektreferenzen (<object> ... </object>)

nach oben
weiter | Seite Eigenschaften von Objekten
zurück | Seite Frames als Mittel für Seiten-Layouts
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Multimedia

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Multimedia / Eigenschaften von Objekten

SELFHTML

Eigenschaften von Objekten
Informationsseite

nach unten Objekt zum umgebenden Text ausrichten
nach unten Text um Objekt fließen lassen
nach unten Meldungstext während des Ladevorgangs anzeigen
nach unten Instanz eines Objekts nur bei Aufruf durch Anwender anzeigen
nach unten Objekte formatieren mit Stylesheets
nach unten

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.0 Objekt zum umgebenden Text ausrichten

Da das object-Element ein Seite Inline-Element ist, können Objekte mitten in einem Text platziert werden. Wenn das höher ist als die Zeilenhöhe, dann muss der Text der gleichen Zeile vertikal zum Objekt ausgerichtet werden. Wenn Sie nichts anderes angeben, wird der Text untenbündig zum Objekt ausgerichtet. Sie können jedoch mit Hilfe eines Attributs selbst bestimmen, wie der Text zum Objekt ausgerichtet werden soll. Dieses Attribut ist allerdings als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit nach unten Stylesheets erzielen.

Die Angaben sind jedoch nur von Bedeutung, wenn die Anzeige mit Hilfe eines Plugins erfolgt und direkt im Anzeigefenster des WWW-Browsers möglich ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Objekt zum umgebenden Text ausrichten</title>
</head>
<body>

<h1>HIER SPIELT
  <object data="haste.mid" type="audio/x-midi" width="200" height="100" align="middle">
    Ihr Browser kann das Objekt leider nicht anzeigen!
  </object>
  DIE MUSIK
</h1>

</body>
</html>

Erläuterung:

Mit dem Attribut align können Sie umgebenden Text vertikal zum Objekt ausrichten (align = Ausrichtung).

Mit align="top" wird der Text obenbündig zum eingebundenen Objekt ausgerichtet (top = oben).
Mit align="middle" wird der Text mittig zum eingebundenen Objekt ausgerichtet (middle = mittig).
Mit align="bottom" wird der Text untenbündig zum eingebundenen Objekt ausgerichtet (bottom = unten).

Beachten Sie:

Um Objekte und Texte sauber zueinander auszurichten, können Sie auch mit rahmenlosen ("blinden") Kapitel Tabellen arbeiten.

Netscape interpretiert noch weitere Wertzuweisungen, die jedoch nicht zum HTML-Standard gehören und ungültiges HTML erzeugen:

Mit align="texttop" richten Sie den Text obenbündig zum Objekt aus, und zwar an der Oberkante des kleinsten Textes (texttop = oben am Text).
Mit align="absmiddle" richten Sie den Text absolut mittig zum Objekt aus, auch bei unterschiedlichen Textgrößen (absmiddle = absolute middle = in jedem Fall mittig).
Mit align="absbottom" richten Sie den Text untenbündig zum Objekt aus, und zwar an der Unterkante des kleinsten Textes (absbottom = absolute bottom = in jedem Fall untenbündig).
Mit align="baseline" richten Sie den Text genauso aus wie mit der Standardangabe align="bottom". Benutzen Sie deshalb besser die Standardangabe.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.0 Text um Objekt fließen lassen

Objekte können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um das Objekt. Mit zwei weiteren Attributen können Sie Abstand zum umfließenden Text erzeugen, damit der Text nicht direkt am Objekt "klebt". Den automatischen Textumfluss können Sie auch abbrechen und die Textfortsetzung unterhalb des Objekts erzwingen. Alle dazu notwendigen Attribute sind allerdings als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit nach unten Stylesheets erzielen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text um Objekt fließen lassen</title>
</head>
<body bgcolor="#333333" text="#FFFFFF">

<h1>
  <object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
          codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
          width="200" height="200" align="left" hspace="10" vspace="7">
    <param name="movie" VALUE="neucler.swf">
  </object>
  Animation!
</h1>

<p>Kann sch&ouml;n sein, wenn sie nicht zu aufdringlich ist.
Dies ist ein Flash-Filmchen von gerade mal einem Kilobyte Gr&ouml;&szlig;e.
<br clear="all"></p>

<h2>Gratulation!</h2>

<p>Der Text geht unterhalb weiter.</p>

</body>
</html>

Erläuterung:

Mit den Angaben align="left" bzw. align="right" veranlassen Sie den Browser, das Objekt linksbündig bzw. rechtsbündig auszurichten und den darauffolgenden Fließtext rechts bzw. links neben dem Objekt anzuzeigen und um das Objekt herumfließen zu lassen (align = Ausrichtung, left = links, right = rechts). Der umgebende Text kann verschiedene Elemente enthalten, zum Beispiel auch Überschriften oder Listen.

Um Abstand zwischen Objekt und umfließendem Text zu erzeugen, stehen die Attribute hspace und vspace zur Verfügung.
Mit hspace [Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen links bzw. rechts davon (hspace = horizontal space = horizontaler Abstand).
Mit vspace [Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen darüber bzw. darunter (vspace = vertical space = vertikaler Abstand).
Das Attribut hspace betrifft immer den linken und den rechten Randabstand vom Objekt, vspace immer den oberen und den unteren Randabstand. Wenn Sie also beispielsweise bei einem links ausgerichteten Objekt hspace definieren, wird nicht nur rechts vom Objekt zum nebenstehenden Text ein Abstand erzeugt, sondern auch links zum Rand des Anzeigefensters hin. Um dies zu verhindern, können Sie exakter arbeiten, indem Sie nach unten Stylesheets verwenden.
Sie können beide Attribute notieren oder auch nur eines davon.

Um den automatischen Textumfluss zu unterbrechen und zu erzwingen, dass alles was folgt unterhalb des Objekts angezeigt wird, können Sie einen Seite Zeilenumbruch mit dem Attribut clear notieren.
Mit <br clear="all"> erreichen Sie, dass der Textfluss ab der nächsten Zeile in jedem Fall unterhalb des Objekts fortgesetzt wird.
Mit <br clear="left"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb eines linksbündig ausgerichteten Objekts fortgesetzt wird.
Mit <br clear="right"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb eines rechtsbündig ausgerichteten Objekts fortgesetzt wird.

HTML 4.0 XHTML 1.0 Meldungstext während des Ladevorgangs anzeigen

Multimediaobjekte oder ausführbare Programme wie Java-Applets können zum Teil längere Ladezeiten verursachen. Auch dann, wenn die Dateien selbst nicht größer als durchschnittliche HTML- oder Grafikdateien sind, müssen beim Anwender in der Regel Plugins oder Laufzeitinterpreter aktiviert werden. Das kostet Zeit.

Um den Anwender nicht im Unklaren über die Wartezeit und die Ladevorgänge an seinem Rechner zu lassen, können Sie einen Meldungstext angeben, der dem Anwender bis zur fertigen Anzeige des eingebundenen Objekts angezeigt wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meldungstext während des Ladevorgangs anzeigen</title>
</head>
<body>

<h1>Bauen Sie eine Br&uuml;cke!</h1>

<p>
  <object classid="java:Bridges.class" codetype="application/java-vm" width="350" height="420"
          standby="Das Spiel wird geladen. Bitte einen Moment Geduld...">
    <param name="Color" value="white">
  </object>
</p>

<p>Klicken Sie auf wei&szlig;e Felder. Mit Rot versuchen Sie Ihre Br&uuml;cke
zwischen oberem und unterem Spielfeldrand zu bauen. Blau versucht Sie daran zu
hindern.</p>

</body>
</html>

Erläuterung:

Innerhalb eines einleitenden <object>-Tags können Sie mit dem Attribut standby einen Meldungstext für den Ladevorgang angeben.

HTML 4.0 XHTML 1.0 Instanz eines Objekts nur bei Aufruf durch Anwender anzeigen

Sie können ein Objekt definieren, das zunächst nur deklariert wird. Damit es angezeigt oder ausgeführt wird, muss es erst aktiviert werden. Das kann z.B. mit Hilfe eines Verweises auf das deklarierte Objekt geschehen, oder durch ein anderes Objekt, das die Initialisierung anstößt.
Browser, die diese Option nicht kennen (darunter auch Netscape, Internet Explorer), starten den Abspielvorgang sofort.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Instanz eines Objekts nur bei Aufruf durch Anwender anzeigen</title>
</head>
<body>

<h1>Wollen Sie oder wollen Sie nicht?</h1>

<p>
  <object declare id="Marquee" classid="java:zticker.class" codetype="application/java"
          width="600" height="60">
    <param name="msg" value="Sie wissen was Sie wollen!">
    <param name="href" value="../../../index.htm">
    <param name="speed" value="5">
    <param name="bgco" value="255,255,0">
    <param name="txtco" value="255,000,000">
    <param name="hrefco" value="255,255,255">
  </object>
</p>

<p><a href="#Marquee">Animierten Text anzeigen</a></p>

</body>
</html>

Erläuterung:

Innerhalb eines einleitenden <object>-Tags können Sie mit dem Standalone-Attribut declare ein Objekt als lediglich deklariert definieren (declare = erklären, angeben).

Mit dem Kapitel Universalattribut id können Sie einen Zielanker innerhalb des Objekts definieren, im Beispiel: "Marquee" (id = identifier = Bezeichner). Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.). Groß- und Kleinschreibung wird unterschieden.

Mit einem Verweis auf den Zielanker (siehe obiges Beispiel) können Sie den Anwender das Objekt aktivieren lassen. Beim href-Attribut notieren Sie das führende Gatterzeichen (#) und dahinter den id-Namen des Objekts.

HTML 4.0 XHTML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.0 Objekte formatieren mit CSS

Stylesheets bieten Eigenschaften an, mit deren Hilfe die beiden Funktionen nach oben Objekt zum umgebenden Text ausrichten und nach oben Text um Objekt fließen lassen ebenso realisierbar sind wie mit HTML. Das "Fein-Tuning" ist mit Hilfe von CSS sogar deutlich genauer. Mit CSS müssen Sie arbeiten, wenn Sie die in diesem Abschnitt beschriebenen Effekte erzielen und dabei aber mit der HTML-Variante "Strict" arbeiten wollen.
Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite vertical-align (Vertikale Ausrichtung)
Seite float (Textumfluss)
Seite clear (Fortsetzung bei Textumfluss)
Seite Außenrand und Abstand

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Objekte formatieren mit CSS</title>
</head>
<body>

<h1>
  HIER SPIELT
  <object data="breeze.mid" type="audio/x-midi" width="200" height="100"
          style="vertical-align:middle; margin-left:30px; margin-right:30px;">
    Ihr Browser kann das Objekt leider nicht anzeigen!
  </object>
  DIE MUSIK
</h1>

</body>
</html>

Erläuterung:

Mit style="vertical-align:middle" erreichen Sie in einem <object>-Tag das Gleiche wie mit align="middle",
mit style="vertical-align:text-top" das Gleiche wie mit align="top",
und mit style="vertical-align:text-bottom" das Gleiche wie mit align="bottom".

Mit den CSS-Angaben margin-left:30px; und margin-right:30px; wird im obigen Beispiel rechts und links zum Text hin ein Abstand von 30 Pixeln geschaffen. Wenn Sie Text um ein Objekt fließen lassen wollen (im obigen Beispiel nicht realisiert), können Sie mit einer Angabe wie style="float:left; margin-right:20px; margin-bottom:10px" erreichen, dass das Objekt links ausgerichtet wird und nachfolgender Text rechts um das Objekt fließt. Dabei wird zwischen Objekt und Text ein Abstand von 20 Pixeln gehalten (links vom Objekt wird dagegen, anders als beim HTML-Attribut hspace, kein Abstand von 20 Pixeln erzeugt). Nach unten hin, also zum Text unterhalb wird ein Abstand von 10 Pixeln definiert.

nach oben
weiter | Seite Java-Applets einbinden (herkömmlich)
zurück | Seite Objekte einbinden
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Multimedia

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Multimedia / Java-Applets einbinden (herkömmlich)

SELFHTML

Java-Applets einbinden (herkömmlich)
Informationsseite

nach unten Java-Applets einbinden
nach unten Java-Applets ausrichten
nach unten

HTML 3.2 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Java-Applets einbinden

Java hat - zumindest im Web - nicht ganz das gebracht, was die Marketing-Strategen anfangs prophezeit hatten. Aber eines kann man sagen: es hat eine Menge Staub aufgewirbelt. Sun, der Entwickler von Java, hatte in den wilden Anfangsjahren von HTML zunächst eine eigene Syntax zum Einbinden von Java-Applets in seinen WWW-Browser "HotJava" integriert. Doch Netscape implementierte eine andere Syntax. Diese Syntax wurde dann auch seinerzeit in den HTML-Standard 3.2 übernommen. Angesichts von Flash und all den anderen "Nachfolgern" von Java erkannte man aber, dass man eine allgemeinere "Media"-Syntax benötigte, und so entstand für HTML 4.0 das Konzept der Seite Objekte mit dem object-Element, das unter anderem auch das Seite Einbinden von Java-Applets erlaubt.

Vor allem wegen der mangelhaften HTML-4.0-Unterstützung des inzwischen aber kaum noch verwendeten Netscape 4.x ist jedoch bis heute noch die HTML-3.2-Syntax verbreitet und auch nur schwer tot zu kriegen. Bei vielen Dokumentationen zu Java-Applets wird diese Syntax wie selbstverständlich als die übliche genannt - und was die Rückwärtskompatibilität zu älteren Browsern betrifft, nicht ganz zu Unrecht. Dennoch sollte man als Web-Designer allmählich ein gewisses Bauchgrimmen bekommen bei der Verwendung dieser älteren Syntax. Denn im HTML-Standard ist sie auch längst als deprecated gekennzeichnet und soll künftig entfallen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Java-Applets einbinden</title>
</head>
<body>

<h1>Ein HTML-Farbw&auml;hler mit Java</h1>

<p>Schieben Sie einfach mit der Maus die Schieberegler an eine gew&uuml;nschte Position.</p>

<p>
  <applet code="HexColor.class" width="640" height="200" alt="Java-Applets mit HTML-Farbw&auml;hler">
    <param name="TestText" value="SELFHTML">
  </applet>
</p>

</body>
</html>

Erläuterung:

Mit <applet> leiten Sie die Referenz eines Java-Programms ein, mit </applet> wird sie abgeschlossen (applet = application snippet = Anwendungsschnipsel).

Mit dem Attribut code referenzieren Sie das ausführbare Java-Applet, das normalerweise die Dateinamenerweiterung .class hat. Bei dieser Angabe dürfen Sie nur den Dateinamen notieren, auch, wenn sich das Applet in einem anderen Verzeichnis oder auf einem anderen Server befindet.

Falls sich das Applet in einem anderen Verzeichnis als die einbindende HTML-Datei oder auf einem anderen Server befindet, können Sie mit codebase den URI des Verzeichnisses angeben. Mit codebase="../" beispielsweise adressieren Sie das Verzeichnis oberhalb des aktuellen Verzeichnisses usw. Wenn sich Ihr Java-Applet im gleichen Verzeichnis befindet wie die HTML-Datei, dann lassen Sie dieses Attribut weg.

Für den Fall, dass das Java-Applet beim Anwender nicht ausführbar ist, können Sie mit der Angabe alt einen Alternativtext definieren. Der Text muss in Anführungszeichen stehen. Er wird nur dann angezeigt, wenn das Applet nicht anzeigbar ist.

Während bei Grafiken die Angabe des alt-Attributs im HTML-Standard Pflicht ist und die Angabe von Breite und Höhe zwar empfohlen, aber nicht erzwungen wird, ist es beim applet-Element genau umgekehrt. Dort ist das alt-Attribut freiwillig, aber die Angaben zu Breite und Höhe sind Pflicht. Mit width [Pixel/Prozent] bestimmen Sie die Anzeigebreite des Java-Applets, mit height die Höhe (width = Breite, height = Höhe). Angegebene Prozentwerte beziehen sich auf die Breite bzw. Höhe des zur Verfügung stehenden Raums.

Zwischen dem einleitenden <applet>-Tag und dem abschließenden </applet> notieren Sie in vielen Fällen Parameter, die dem Applet beim Aufruf übergeben werden. Welche Parameter ein Java-Applet erwartet, entnehmen Sie der Dokumentation zu dem Applet. Jeder Parameter wird durch <param name= value=> angegeben (param = parameter = Parameter, value = Wert). Beim Attribut name geben Sie den Namen des Parameters an. Bei value geben Sie den gewünschten Wert des Parameters an, der dem Programm übergeben werden soll.

Mit dem Attribut archive (im obigen Beispiel nicht verwendet) können Sie eine oder mehrere Archivdateien (z.B. *.zip) als URI angeben. Verwenden Sie dieses Attribut nur, wenn es in der Dokumentation des Java-Applets verlangt wird.

Mit dem Standalone-Attribut mayscript (im obigen Beispiel nicht verwendet) erlauben Sie JavaScript, auf den Programmablauf des Java-Applets Einfluss zu nehmen. Mehr zu diesem Thema finden Sie im JavaScript-Kapitel im Abschnitt Seite Zugriff auf Code in Java-Applets. Dieses Attribut gehört jedoch nicht zum HTML-Standard.

Für den Zugriff mit JavaScript ist es auch sinnvoll, dem Java-Applet einen Namen zu geben. Dazu können Sie im einleitenden <applet>-Tag das Attribut name notieren.

Schließlich gibt es im HTML-Standard noch das Attribut object, das ebenfalls im einleitenden <applet>-Tag notiert werden kann. Machen Sie davon jedoch nur Gebrauch, wenn es beim Java-Applet dokumentiert ist. Bei diesem Attribut kann ein Wert zugewiesen werden, der eine Ressource benennt, mit deren Hilfe das Applet erst "zum Leben erwacht" (z.B. Freischalt-Funktion). Dies ist bei Applets der Fall, deren init()-Methode beim Start nicht ausgeführt wird und dazu eine externe Ressource benötigt.

HTML 3.2 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Java-Applets ausrichten

Java-Applets können Sie durch weitere Angaben im Verhältnis zum umgebenden Text ausrichten. Dabei können Sie den Abstand zum Text festlegen und auch die Textfortsetzung unterhalb des Applet-Bereichs erzwingen. Ferner können Sie auf den Programmablauf des Java-Applets Einfluss nehmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eigenschaften von Java-Applets</title>
</head>
<body>

<p style="color:#000080; font-size:26px">
  <applet width="300" height="433" code="Nature.class" align="left" hspace="20" vspace="12">
    <param name="accumulate" value="yes">
    <param name="background" value="FFFFFF">
    <param name="backimg" value="pixel.gif">
    <param name="DeveloperInfo" value="Michael Chancey Jr.">
    <param name="speed" value="75">
    <param name="foreground" value="FFFFFF">
    <param name="graphic" value="winterbild.jpg">
    <param name="randomdir" value="yes">
    <param name="season" value="winter">
    <param name="fallcount" value="400">
  </applet>
  Im Internet ist der Winter nett, weil im Hinternet ist das Bett!<br clear="all">
</p>

<p>Das Applet zeigt ein normales JPEG-Bild und l&auml;&szlig;t Schnee dar&uuml;ber fallen.</p>

</body>
</html>

Erläuterung:

Mit dem Attribut align können Sie umgebenden Text vertikal zum Java-Applet ausrichten (align = Ausrichtung), und zwar mit align="top" obenbündig, mit align="middle" mittig und mit align="bottom" untenbündig.
Ferner können Sie mit den Angaben align="left" bzw. align="right" den Browser veranlassen, das Java-Applet linksbündig bzw. rechtsbündig auszurichten und den darauffolgenden Fließtext rechts bzw. links neben dem Applet anzuzeigen und um das Objekt herumfließen zu lassen. Um Abstand zwischen Applet und umfließendem Text zu erzeugen, stehen die Attribute hspace und vspace [Pixel oder Prozent] zur Verfügung. Um den automatischen Textumfluss zu unterbrechen und zu erzwingen, dass alles was folgt unterhalb des Applets angezeigt wird, können Sie einen Seite Zeilenumbruch mit dem Attribut clear="all" (bei links- oder rechtsbündiger Ausrichtung), clear="left" (bei linksbündiger Ausrichtung) oder clear="right" (bei rechtsbündiger Ausrichtung) notieren.

nach oben
weiter | Seite Multimedia einbinden (Netscape herkömmlich)
zurück | Seite Eigenschaften von Objekten
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Multimedia

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Multimedia / Multimedia einbinden (Netscape herkömmlich)

SELFHTML

Multimedia einbinden (Netscape herkömmlich)
Informationsseite

nach unten Multimedia-Bereich definieren
nach unten Multimedia-Bereich ausrichten
nach unten Alternativer Inhalt für Browser
nach unten

MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Multimedia-Bereich definieren

In seiner damals Furore machenden Produktversion 2.0 führte Netscape neben anderen bahnbrechenden Neuerungen wie dem font-Element, den Frames und der Möglichkeit, Java-Applets einzubinden, auch ein Element namens embed ein, um andere Multimedia-Inhalte in HTML zu referenzieren. Damit einhergehend implementierte Netscape die so genannte Plugin-Schnittstelle in seinem Browser. Schnell entstand ein Wildwuchs an Plugin-Software, mit deren Hilfe und dem hier beschriebenen Element sich beliebige multimediale oder proprietäre Binärformate in HTML einbinden ließen.

Aus heutiger Sicht gilt für dieses Element jedoch noch stärker als für das Element zum Einbinden von Java-Applets: Es ist ein Relikt und sollte allmählich fallengelassen werden. Denn im Unterschied zum applet-Element hat das embed-Element nie zum HTML-Standard gehört. Es wird hier noch beschrieben, weil es heute leider immer noch sehr verbreitet ist und beispielsweise bei Netscape 4.x die einzig sinnvolle und halbwegs funktionierende Möglichkeit ist, Multimedia einzubinden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Multimedia-Bereich definieren</title>
</head>
<body>

<h1>Da kommt Freude auf!</h1>

<embed src="yippee.wav" width="140" height="60">

</body>
</html>

Erläuterung:

Mit <embed src=> definieren Sie eine Plugin-Referenz (embed = einbetten, src = source = Quelle). Beim src-Attribut notieren Sie die gewünschte Datei. Dabei gelten die Seite Regeln zum Referenzieren in HTML.

Mit den Attributen width und height sollten Sie stets die Größe des eingebundenen Bereichs bestimmen, damit der Browser die Seite schneller aufbauen kann. Beide Attribute erlauben als Wertzuweisung Pixel (absolut) oder Prozentangaben (relativ in Bezug auf die zur Verfügung stehende Fläche). Wenn Sie beide Werte auf 0 setzen, können Sie die sichtbare Anzeige des Bereichs unterdrücken - z.B. für Sound-Dateien, die automatisch abspielen.

Das embed-Element kann mit oder ohne End-Tag notiert werden.

Ob und wie die Datei letztendlich beim Anwender "angezeigt" wird, hängt von vielen Faktoren ab, zum Beispiel von der Art der Datei, von den Hardware-Voraussetzungen des Anwenders, von den installierten Plugins und von vorhandenen, dem Browser bekannten Fremdprogrammen. Bei Dateitypen, zu denen der Netscape-Browser ein Plugin kennt, fragt er den Anwender, falls dieser das Plugin nicht hat, ob er das Plugin haben möchte, und erlaubt das Downloaden des erforderlichen Plugins. Wenn der Web-Browser die Datei nicht verarbeiten kann, sollte er eine Fehlermeldung ausgeben und anstelle der Datei ein Symbol für nicht darstellbare Daten anzeigen.

Mit dem Attribut pluginurl können Sie aber auch einen URI im Internet bestimmen, wo ein Plugin zum Anzeigen oder Abspielen der eingebundenen Datei bereitsteht. Es muss sich nach dem Plugin-Konzept von Netscape um eine Java-Archivdatei (Dateien *.jar) handeln. Diese Angabe startet den in Netscape 4.x integrierten JAR-Installationsmanager (JIM). Der Anwender kann das Plugin online von der angegebenen Adresse installieren. Netscape führt die Installation durch und kann anschließend sofort die eingebundene Multimedia-Datei anzeigen. Das Attribut pluginurl ist erst seit Netscape 4.x verfügbar.
Mit pluginspage können Sie einen URI bestimmen, wo Installationshinweise für ein Plugin hinterlegt sind, das die eingebundene Multimedia-Datei anzeigen bzw. abspielen kann. Dies ist nicht ganz so elegant wie die Technik, die hinter pluginurl steckt. Aber wenn das Plugin in einem anderen Format als dem Java-Archivformat vorliegt, sollten Sie die Angabe pluginspage wählen, sofern Ihnen eine Internet-Adresse mit einem geeigneten Plugin bekannt ist.

Es gibt einen phantastischen Wildwuchs an weiteren Attributen für das embed-Element. Dies stammt alles aus einer Zeit, wo keinerlei Bewusstsein für die Notwendigkeit einer Standardisierung von HTML herrschte. Es liegt aber auch am schlecht durchdachten Konzept des embed-Elements. Um eingebundene Multimedia-Elemente zu steuern, bleibt eigentlich nur der Weg, dies über proprietäre Attribute zu tun. Eine kleine Auswahl:
Mit hidden="true" können Sie die sichtbare Anzeige des eingebundenen Objekts verhindern. Das kann zum Beispiel sinnvoll sein, wenn Sie einen Sound abspielen wollen, aber keinen Sound-Player anzeigen wollen.
Mit autostart="true" können Sie erzwingen, dass eine abspielbare Datei, also etwa ein Sound oder ein Video, sofort abgespielt werden, ohne dass der Anwender in der Abspiel-Software eine Funktion zum Start der Wiedergabe wählen muss.
Mit loop="true" können Sie erzwingen, dass eine abspielbare Datei endlos wiederholt wird.
Mit palette="foreground" können Sie erzwingen, dass das Plugin bei der Anzeige die Vordergrundfarben des Anwenderrechners benutzt, mit palette="background" erzwingen Sie, dass das Plugin die eingestellte Hintergrundfarbe benutzt.
All diese Attribute sind jedoch produktspezifisch und verschwinden genauso schnell wieder, wie sie entstanden sind.

MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Safari 1.0 Multimedia-Bereiche ausrichten

Zum Ausrichten von Multimedia-Bereichen können Sie im <embed>-Tag die Attribute align, hspace und vspace notieren. Die Wirkungsweise ist die gleiche wie bei Seite Objekt zum umgebenden Text ausrichten und bei Seite Text um Objekt fließen lassen beschrieben.

MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Alternativer Inhalt für Browser

Sie können einen Bereich definieren, der nur von Browsern angezeigt wird, die das <embed>-Tag nicht kennen. Netscape, der das <embed>-Tag interpretiert, ignoriert einen solchen Bereich.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Alternativer Inhalt für Browser</title>
</head>
<body>

<h1>Einfach noch mal 'ne Runde &quot;nibbeln&quot; mit Flash!</h1>

<noembed>
  <p>Sie verpassen was!</p>
</noembed>

<embed src="nibbles.swf" quality="high" scale="exactfit" menu="false"
  bgcolor="#000080" width="600" height="400" swLiveConnect="false"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">

</body>
</html>

Erläuterung:

Mit <noembed>...</noembed> definieren Sie einen Bereich, der von Netscape ab Version 2.0 nicht angezeigt wird, wohl aber von Browsern, die das <embed>-Tag nicht kennen. Diese Browser kennen zwar auch das <noembed>-Tag nicht, aber sie stellen einfach alles dar, was dazwischen notiert ist. Es kann sich um Text, Grafik, Tabellen usw. handeln.

nach oben
weiter | Seite Layer definieren und positionieren
zurück | Seite Java-Applets einbinden (herkömmlich)
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Multimedia

© 2007 Seite Impressum


SELFHTML: HTML / Layer (Netscape)

SELFHTML

Layer (Netscape)
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei.
In diesem Abschnitt werden die Netscape-spezifischen HTML-Elemente zum Definieren von Layern in HTML besprochen.
Hinweis: Diese HTML-Elemente gehören nicht zum HTML-Standard und funktionieren nur mit Netscape 4.x, sonst mit keinem Browser - auch nicht mehr mit Netscape 6.
Der Abschnitt besteht aus folgenden Seiten:

Seite Layer definieren und positionieren
Seite Layer anordnen und kontrollieren

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Layer (Netscape)/ Layer definieren und positionieren

SELFHTML

Layer definieren und positionieren
Informationsseite

nach unten Allgemeines zu Layern
nach unten Layer definieren
nach unten Inline-Layer definieren
nach unten Anzeigebereich von Layern beschneiden
nach unten Layer mit Inhalt aus anderer Datei
nach unten Layer verschachteln
nach unten Hintergrundfarbe für Layer
nach unten Hintergrundbild (Wallpaper) für Layer
nach unten

Allgemeines zu Layern

Layer (Schichten) sind ein Sprachelement von HTML, das Netscape mit der Version 4.0 seines Browsers einführte. Mit Hilfe der beiden HTML-Elemente, die dazugehören, ist es möglich, beliebige Bereiche einer HTML-Datei als exakt positionierte Bereiche auszuzeichnen. So können Sie zum Beispiel eine Überschrift, eine Grafik und erklärenden Text dazu als Layer definieren. Diese definierte Einheit lassen Sie 100 Pixel von links und 50 Pixel von oben - gemessen am Anzeigefenster des Browsers - beginnen. Für die gesamte Einheit definieren Sie eine maximale Breite, zum Beispiel 200 Pixel.

In HTML allein haben die Layer jedoch nicht allzuviel Bedeutung, sieht man einmal von der Möglichkeit der absoluten Positionierung von Elementen ab. Der eigentliche Zweck der Layer ist es, die HTML-Grundlage für Seite Dynamisches HTML nach dem Modell von Netscape zu bilden. Bei diesem Modell lassen sich Layer-Bereiche mit Hilfe von Kapitel JavaScript auf vielfältige Weise verändern. So können Layer-Bereiche über den Bildschirm wandern, auf-/zuklappen, anderen Inhalt annehmen usw.

Sie können beliebig viele Layer innerhalb einer HTML-Datei definieren. Layer können sich dabei auch überlappen. Wenn Sie beispielsweise zwei Überschriften mit anschließender Grafik und erklärendem Text zu je einem Layer zusammenfassen, können beide Layer die gleichen Pixelpositionen erhalten. Mit Hilfe von JavaScript können Sie dann dynamisch einen der Layer ausschalten und den anderen einschalten. Sie können aber auch beide Layer gleichzeitig anzeigen und bestimmen, welcher über dem anderen liegen soll.

Layer können eigene Hintergrundfarben und sogar eigene Hintergrundbilder (Wallpapers) haben. Dadurch ergeben sich viele zusätzliche Gestaltungsmöglichkeiten beim Verteilen von Farben und Formen am Bildschirm.

Wenn Sie eine GIF-Grafik mit transparentem Hintergrund als eigenen Layer definieren, können Sie diese Grafik über oder unter Texte oder andere Grafiken legen und dadurch interessante Effekte erzeugen.

Das einzige Problem mit den Layern ist: sie kamen zu spät. Das W3-Konsortium hatte sich bereits darauf eingeschossen, die Möglichkeit des absoluten Positionierens nicht in HTML, sondern in den Kapitel Stylesheets zu verankern. In den HTML-Sprachstandard 4.0 fanden die hier vorgestellten Elemente deshalb keinen Einlass. Angesichts der Tatsache, dass die neuen Seite CSS-Eigenschaften zum Positionieren von Elementen offizieller Standard sind und sowohl von Netscape als auch vom Internet Explorer interpretiert werden, ist die Layer-Technik in HTML ins Abseits geraten. Wegen der starken Verknüpfung zwischen Layer-Technik und Dynamischem HTML nach Netscape 4.x werden sie an dieser Stelle jedoch noch beschrieben.

Netscape 4.0 Layer definieren

Sie können innerhalb des Körpers einer HTML-Datei fest positionierte Layer definieren. Solche Layer haben eine definierte obere linke Ecke im Anzeigefenster. Außerdem können Sie eine bestimmte Breite erzwingen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Layer definieren</title>
</head>
<body>

<layer id="Beispiel_ID" name="Beispielname" top="150" left="250" width="300">

  <h1>Irgendwo auf Ihrem Bildschirm ...</h1>
  <p>Alles, was Sie hier sehen, ist in einen Layer integriert. Auch das folgende Bild:</p>
  <p>
    <img src="bild.png" width="68" height="68" border="0"
         alt="Was der Mond alles mit ansehen mu&szlig;">
  </p>

</layer>

</body>
</html>

Erläuterung:

Mit <layer> leiten Sie die Definition eines Layer-Bereichs innerhalb einer HTML-Datei ein (layer = Schicht). Mit der Angabe name können Sie einen Namen für den definierten Bereich vergeben. Zwischen dem einleitenden <layer>-Tag und dem abschließenden </layer> können Sie beliebige andere Elemente einer HTML-Datei notieren, also zum Beispiel Überschriften, Textabsätze, Tabellen, Grafik- oder Multimedia-Referenzen, Verweise usw. Alle Elemente, die Sie innerhalb eines Layers definieren, verhalten sich entsprechend der Eigenschaften, die Sie für den entsprechenden Layer definieren. Den Layer selbst müssen Sie sich dabei vorstellen wie ein eigenes Anzeigefenster ohne sichtbare Umrandungen, das in das normale Anzeigefenster des Web-Browsers eingebettet ist.

Mit dem Attribut left bestimmen Sie die Anzahl Pixel vom linken Rand des Anzeigefensters, mit top die Anzahl Pixel vom oberen Rand des Anzeigefensters (left = links, top = oben). Mit width können Sie eine Anzeigebreite für den Layer-Bereich erzwingen, mit height die Höhe (width = Breite, height = Höhe). Elemente innerhalb des Layers werden dann so umbrochen, dass die angegebene Breite eingehalten wird.

Mit dem Attribut id können Sie einen Namen für den Layer-Bereich vergeben. Unter diesem Namen können Sie den Layer in JavaScript mit Hilfe des Objekts Seite layers ansprechen. Neben id wird bei Layern auch die Angabe name für diesen Zweck interpretiert.

Beachten Sie:

Wenn Sie mit Layern arbeiten und diese absolut im Anzeigebereich positionieren, wird es in den meisten Fällen sinnvoll sein, innerhalb einer HTML-Datei alle anzuzeigenden Elemente innerhalb von fest positionierten Layern zu notieren. Denn andernfalls gerät Ihnen die Anzeige leicht außer Kontrolle.

Wenn es der Inhalt erfordert, werden Angaben zur Breite außer Kraft gesetzt. Wenn beispielsweise eine Grafik oder eine Tabelle mehr Platz in Anspruch nimmt als die angegebene Breite, wird die Grafik bzw. die Tabelle in jedem Fall in voller Breite angezeigt. Dies können Sie allerdings verhindern - siehe nach unten Anzeigebereich von Layern beschneiden.

Die Angaben zu linker und oberer Ecke sowie zur Breite sind zwar in den meisten Fällen erwünscht, jedoch nicht zwingend erforderlich. Wenn Sie keine Angaben dazu machen, beginnt der Layer einfach oben links, so wie das erste Element im Dateikörper der HTML-Datei.

Netscape 4.0 Inline-Layer definieren

Inline-Layer beginnen relativ an der Stelle, an der sie innerhalb der HTML-Datei stehen. Solche Layer erzeugen keinen eigenen Absatz im Fließtext. Ansonsten können sie aber alle Eigenschaften von Layern haben, also beispielsweise eine eigene Hintergrundfarbe.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Inline-Layer definieren</title>
</head>
<body>

<p>Das ist <ilayer bgcolor="#FFEECC" top="3">Layer-Text</ilayer> mitten im
Text. Das Wort &quot;Layer-Text&quot; ist dabei in einen Inline-Layer
eingebunden und hat eine Hintergrundfarbe erhalten. Au&szlig;erdem wurde
der Inline-Layer 3 Pixel tiefer dargestellt als der normale Text.</p>

</body>
</html>

Erläuterung:

Mit <ilayer> leiten Sie die Definition eines Inline-Layer-Bereichs ein, mit </ilayer> schließen Sie sie ab (ilayer = inline layer).

Sie können auch Attribute wie top oder left auf einen <ilayer>-Bereich anwenden. Die Angaben werden dann jedoch nicht als Werte gemessen vom Fensterrand interpretiert, sondern als Werte gemessen von der normalen Position des Inline-Layers. So können Sie beispielsweise mitten in einem Text eine Anweisung notieren wie:
<ilayer top="3">Wort</ilayer>. Dann erscheint dieses eine Wort um genau 3 Pixel tiefer als der übrige Text.

Auch die Attribute id und name sind bei Inline-Layern erlaubt.

Netscape 4.0 Anzeigebereich von Layern beschneiden

Sie können einen Bereich erzwingen, innerhalb dessen der Inhalt eines Layers angezeigt werden muss. Wenn der Inhalt mehr Platz in Anspruch nimmt (z.B. weil eine Grafik breiter ist), wird er abgeschnitten. Mit diesem Merkmal können Sie Effekte erzeugen, dass der Inhalt eines Layers wie durch ein Fenster gesehen erscheint, wobei beim Blick durch das Fenster nur ein Ausschnitt des Inhalts sichtbar ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Anzeigebereich von Layern beschneiden</title>
</head>
<body>

<h1>Halbmond</h1>

<layer top="100" left="150" clip="0,0,68,34">
  <img src="bild.png" width="68" height="68" border="0" alt="Mond">
</layer>

</body>
</html>

Erläuterung:

Mit dem Attribut clip können Sie einen Anzeigebereich erzwingen (clip = Ausschnitt). Als Wert notieren Sie zwei oder vier Zahlenwerte zum Bestimmen des gewünschten Bereichs. Trennen Sie die Zahlenwerte durch Kommata.

Wenn Sie vier Zahlenwerte angeben, bedeuten die Zahlen die Koordinaten des gewünschten Rechtecks (in dieser Reihenfolge):
clip="Pixel für links, Pixel für oben, Pixel für rechts, Pixel für unten"
und zwar relativ zur oberen linken Ecke des Layers. Wenn also im ersten der obigen Beispiele etwa durch left="30" und top="20" eine absolute obere linke Ecke für den Layer definiert wird, so bedeutet etwa die erste Angaben bei clip - 20 - so viel wie: der erzwungene Anzeigebereich beginnt 20 Pixel links vom linken Rand des Layers (der bei 30 Pixeln liegt), absolut gesehen also bei 50 Pixeln.

Wenn Sie zwei Zahlenwerte angeben, bedeuten die Zahlen die Breite und Höhe des gewünschten Rechtecks (in dieser Reihenfolge):
clip="Pixel für Breite, Pixel für Höhe"
und zwar beginnend bei der oberen linken Ecke des Layers. Wenn Sie etwa wie im zweiten der obigen Beispiele mit width eine bestimmte Breite des Layers erzwingen und sicherstellen wollen, dass die Breite auch eingehalten wird, wenn der Inhalt des Layers breiter ist, können Sie mit clip="200,[Höhe]" erzwingen, dass die Breite eingehalten wird.

Netscape 4.0 Layer mit Inhalt aus anderer Datei

Es ist möglich, innerhalb eines Layers eine andere HTML-Datei anzuzeigen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Anzeigebereich von Layern beschneiden</title>
</head>
<body>

<h1>SELFHTML im Layer</h1>

<layer top="80" left="40" src="../../../index.htm"></layer>

</body>
</html>

Erläuterung:

Mit dem Attribut src können Sie eine andere HTML-Datei in einen Layer einbinden. Dabei gelten die Regeln zum Seite Referenzieren in HTML. Die Datei nimmt dabei den üblichen Raum im Anzeigefenster ein, beginnend bei den angegebenen Positionen zu top und left. Angaben zu width und height werden nur eingehalten, wenn der Inhalt der Datei in Breite und Höhe weniger Platz in Anspruch nimmt.

Netscape 4.0 Layer verschachteln

Sie können innerhalb von Layer-Bereichen andere Layer definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Layer verschachteln</title>
</head>
<body>

<layer top="100" left="100" bgcolor="#FF99FF">
  <h1>Die Macht</h1>
  <layer pagex="80" left="40" bgcolor="#99FFFF">
    <h1>kommt aus der Nacht</h1>
  </layer>
</layer>

</body>
</html>

Erläuterung:

Wichtig ist dabei die unterschiedliche Wirkung der Positionsangaben. Im obigen Beispiel erhält der innere Layer die gleichen Angaben zu left und top wie der äußere Layer. Der äußere Layer ist dabei der Bezugspunkt für die Startposition des inneren Layers, nicht das Anzeigefenster! Der innere Layer beginnt im Beispiel also 100 Pixel von oben und 100 Pixel von links, gemessen an der linken oberen Ecke des äußeren Layers.

Es gibt jedoch auch die Möglichkeit, einen inneren Layer absolut zu positionieren. Dazu stehen die zusätzlichen Attribute pagey=100 und pagex=100 (pagex = page x = Seite x-Wert, pagey = page y = Seite y-Wert). Diese Angaben bewirken, dass als Bezugspunkt das Anzeigefenster und nicht der übergeordnete Layer verwendet wird.

Netscape 4.0 Hintergrundfarbe für Layer

Sie können für jeden definierten fest positionierten oder fließenden Layer eine eigene Hintergrundfarbe definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Hintergrundfarbe für Layer</title>
</head>
<body>

<layer top="0" left="0" width="50" height="40" bgcolor="#000000"></layer>
<layer top="0" left="50" width="50" height="40" bgcolor="#000033"></layer>
<layer top="0" left="100" width="50" height="40" bgcolor="#000066"></layer>
<layer top="0" left="150" width="50" height="40" bgcolor="#000099"></layer>
<layer top="0" left="200" width="50" height="40" bgcolor="#0000CC"></layer>
<layer top="0" left="250" width="50" height="40" bgcolor="#0000FF"></layer>

</body>
</html>

Erläuterung:

Mit dem Attribut bgcolor im einleitenden Tag von <layer> oder <ilayer> bestimmen Sie die Hintergrundfarbe (bgcolor = background color = Hintergrundfarbe). Dabei gelten die Regeln zum Seite Definieren von Farben in HTML.

Beachten Sie:

Wenn Sie eine Hintergrundfarbe für einen Layer definieren, sollten Sie für Text, der in den Layern erscheint, eine kontrastierende Schriftfarbe wählen.

Netscape 4.0 Hintergrundbild (Wallpaper) für Layer

Sie können für jeden definierten fest positionierten oder fließenden Layer ein eigenes Hintergrundmuster (Wallpaper) definieren. Das funktioniert genauso wie bei Seite Hintergrundbildern (Wallpapers) für den gesamten Dateikörper.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Hintergrundbild für  Layer</title>
</head>
<body background="back1.jpg">

<layer top="0" left="0" width="400" height="300" background="back2.png">
  <h1>Bunte Zeiten</h1>
</layer>

</body>
</html>

Erläuterung:

Durch die Angabe von background im einleitenden Layer-Tag können Sie ein Hintergrundbild für den Layer bestimmen (background = Hintergrund). Dabei gelten die Regeln zum Seite Referenzieren in HTML.

Beachten Sie:

Innerhalb dieses Dokuments finden Sie im Abschnitt über typische Grafiksorten für Web-Seiten ein paar typische Seite Hintergrundbilder.

Netscape interpretiert auch Seite animierte GIF-Grafiken als Hintergrundbilder.

nach oben
weiter | Seite Layer anordnen und kontrollieren
zurück | Seite Multimedia einbinden (Netscape herkömmlich)
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Layer (Netscape)

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Layer (Netscape)/ Layer anordnen und kontrollieren

SELFHTML

Layer anordnen und kontrollieren
Informationsseite

nach unten Angaben zur Schichtposition mit Layer-Namen
nach unten Angaben zur Schichtposition mit Indexnummern
nach unten Layer verstecken und anzeigen
nach unten

Netscape 4.0 Angaben zur Schichtposition mit Layer-Namen

Wenn Sie mehrere Layer in einer HTML-Datei definieren, deren Anzeigebereiche sich überlappen, werden die Layer normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Sie können jedoch die Reihenfolge ändern und angeben, welcher andere Layer unmittelbar über oder unter dem aktuellen Layer liegen soll. Auf diese Weise können Sie das Überdecken von Layern kontrollieren. Voraussetzung ist, dass Sie für jeden Layer einen Namen vergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Angaben zur Schichtposition mit Layer-Namen</title>
</head>
<body>

<layer name="erster" top="0" left="0" width="300" height="200" bgcolor="FFFF99">
  <h1>ERSTER</h1>
</layer>

<layer name="zweiter" top="50" left="100" width="300" height="200" bgcolor="99FF99">
  <h1>ZWEITER</h1>
</layer>

<layer name="dritter" above="zweiter" top="100" left="200" width="300" height="200" bgcolor="9999FF">
  <h1>DRITTER</h1>
</layer>

<layer name="vierter" below="erster" top="150" left="300" width="300" height="200" bgcolor="FF99FF">
  <h1>VIERTER</h1>
</layer>

</body>
</html>

Erläuterung:

Mit dem Attribut above im einleitenden <layer>- oder <ilayer>-Tag können Sie bestimmen, dass ein zuvor definierter, benannter Layer unmittelbar über dem aktuellen Layer liegt (above = oberhalb). Das heißt, der aktuelle Layer soll bei Überschneidung von dem genannten Layer überdeckt werden.
Mit dem Attribut below im einleitenden <layer>- oder <ilayer>-Tag können Sie bestimmen, dass ein zuvor definierter, benannter Layer unmittelbar unter dem aktuellen Layer liegt (below = unterhalb). Das heißt, der aktuelle Layer soll bei Überschneidung den genannten Layer überdecken.
Die Layer-Namen hinter above und below sollten in Anführungszeichen stehen.

Beachten Sie:

Bei above und below dürfen Sie nur Namen von Layern angeben, die in der Datei bereits zuvor definiert wurden. Die Angabe von Layern, die erst nach dem aktuellen Layer definiert werden, kann zu Anzeigefehlern führen. Im ersten definierten Layer einer HTML-Datei sollten deshalb keine Angaben zu above oder below vorkommen.

Es ist nur je eine Angabe für above und below bei der Definition eines Layers erlaubt. Denn mit diesen Angaben legen Sie immer nur fest, welcher andere Layer direkt unter oder über dem aktuellen Layer.

Netscape 4.0 Angaben zur Schichtposition mit Indexnummern

Wenn Sie mehrere Layer in einer HTML-Datei definieren, deren Anzeigebereiche sich überlappen, werden die Layer normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Layer Nummern vergeben. Layer mit höherer Nummer überdecken Layer mit niedrigerer Nummer.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Angaben zur Schichtposition mit Indexnummern</title>
</head>
<body>

<layer z-index="3" top="0" left="0" width="300" height="200" bgcolor="FFFF99">
  <h1>ERSTER</h1>
</layer>

<layer z-index="1" top="50" left="100" width="300" height="200" bgcolor="99FF99">
  <h1>ZWEITER</h1>
</layer>

<layer z-index="4" top="100" left="200" width="300" height="200" bgcolor="9999FF">
  <h1>DRITTER</h1>
</layer>

<layer z-index="2" top="150" left="300" width="300" height="200" bgcolor="FF99FF">
  <h1>VIERTER</h1>
</layer>

</body>
</html>

Erläuterung:

Mit dem Attribut z-index im einleitenden <layer>- oder <ilayer>-Tag bestimmen Sie die Reihenfolge der Layer bei Überlappungen (z-index = Reihenfolge). Geben Sie bei jedem definierten Layer z-index und dahinter eine Nummer an. Der Layer mit der höchsten Nummer überdeckt alle anderen. Der Layer mit der niedrigsten Nummer wird von allen anderen überdeckt.

Beachten Sie:

Bei den Angaben zu z-index sind auch negative Werte erlaubt. Dadurch bewirken Sie bei Seite verschachtelten Layern, dass Layer, die innerhalb eines anderen Layers definiert werden, von ihren Eltern-Layern überdeckt werden. Bei positiven Zahlen ist dies umgekehrt.

Netscape 4.0 Layer verstecken und anzeigen

Sie können bei der Definition von Layern festlegen, ob diese zunächst angezeigt werden sollen oder nicht. Das ist von Bedeutung, wenn Sie die Anzeige der Layer mit Hilfe von Kapitel JavaScript dynamisch ein-/ausschalten wollen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Layer verstecken und anzeigen</title>
<script type="text/javascript">
function hideLayer (nr) {
  document.layers[nr].visibility = "hide";
}

function showLayer (nr) {
  document.layers[nr].visibility = "show";
}
</script>
</head>
<body>

<layer top="10" left="10" bgcolor="#DDFFDD">
  <p><a href="javascript:showLayer(1)"><b>Anderen Layer anzeigen</b></a><br>
  (dazu wird ein einfaches JavaScript eingesetzt)</p>
</layer>

<layer top="60" left="60" bgcolor="#CCEEFF" visibility="hide">
  <p><a href="javascript:hideLayer(1)"><b>Diesen Layer verstecken</b></a><br>
  (dazu wird ein einfaches JavaScript eingesetzt)</p>
</layer>

</body>
</html>

Erläuterung:

Mit dem Attribut visibility im einleitenden <layer>- oder <ilayer>-Tag können Sie die Anzeige des Layers explizit erzwingen oder verhindern (visibility = Sichtbarkeit).
Mit visibility="show" legen Sie fest, dass der Layer in jedem Fall angezeigt wird (show = zeigen).
Mit visibility="hide" legen Sie fest, dass der Layer nicht angezeigt, also versteckt wird (hide = verstecken).
Mit visibility="inherit" legen Sie fest, dass der Layer nur dann angezeigt wird, wenn sein Elternelement ebenfalls angezeigt wird (inherit = erben). Diese Angabe ist nur bei inneren Layern in Seite verschachtelten Layern von Bedeutung.

Das obige Beispiel zeigt, wozu das Verstecken von Layern gut ist: erst mit Hilfe von JavaScript wird dieses Attribut verständlich.

nach oben
weiter | Seite Stylesheet-Bereiche in HTML
zurück | Seite Layer definieren und positionieren
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Layer (Netscape)

© 2007 Seite Impressum


SELFHTML: HTML / Weiterführende HTML-Elemente

SELFHTML

Weiterführende HTML-Elemente
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML, besonders zum Seite Grundgerüst einer HTML-Datei.
In diesem Abschnitt werden HTML-Elemente zum Einbinden von Ergänzungssprachen zu HTML beschrieben.
Hinweis: Die Kenntnis dieser Elemente reicht nicht aus, um die damit verbundenen Technologien zu nutzen. Entsprechende Technologien werden in den Kapiteln Kapitel Stylesheets und Kapitel JavaScript/DOM behandelt.
Der Abschnitt besteht aus folgenden Seiten:

Seite Stylesheet-Bereiche in HTML
Seite Script-Bereiche in HTML

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Weiterführende HTML-Elemente / Stylesheet-Bereiche in HTML

SELFHTML

Stylesheet-Bereiche in HTML
Informationsseite

nach unten Stylesheet-Bereiche definieren
nach unten Weitere Informationen
nach unten

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Stylesheet-Bereiche definieren

Um mit Hilfe von Stylesheets Seite zentrale Formate zu definieren, können Sie im Kopf einer HTML-Datei einen oder mehrere Stylesheet-Bereiche definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Stylesheet-Bereiche definieren</title>
<style type="text/css" media="screen">
body { background-image:url(back.jpg); padding:10px; }
#GrosserText { font-size:150px; font-family:"Arial Black",Arial,sans-serif; color:#73FBE7; }
#KleinererText { font-size:90px; font-family:"Arial Black",Arial,sans-serif; color:#fff; }
</style>
</head>
<body>

<h1 id="GrosserText">CSS</h1>

<h2 id="KleinererText">Cascading Stylesheets</h2>

</body>
</html>

Erläuterung:

Mit <style> leiten Sie innerhalb des HTML-Dateikopfs, also zwischen <head> und </head>, einen Bereich zum Definieren von Formaten ein (style = Stil), mit </style> beenden Sie den Abschnitt. Die Formate, die Sie innerhalb des Bereichs nach der Syntax der Stylesheet-Sprache definieren, gelten dann für die gesamte Datei.

Innerhalb des einleitenden <style>-Tags müssen Sie mit dem Attribut type angeben, welche Stylesheet-Sprache Sie innerhalb des Bereichs zum Definieren der Formate benutzen möchten. Die Wertzuweisung besteht im Seite MIME-Typ der gewünschten Stylesheet-Sprache. Die gängigste Angabe ist dabei type="text/css". Mit dieser Angabe bestimmen Sie Stylesheets als Sprache für die Formatdefinitionen. Sie können aber auch andere Sprachen benutzen. Falls Sie mehrere Style-Sprachen innerhalb der gleichen HTML-Datei einsetzen möchten, definieren Sie einfach für jede Sprache einen style-Bereich. Alle Bereiche müssen jedoch im Dateikopf stehen.

Mit dem Attribut media, das im Gegensatz zu type kein Pflichtattribut ist, können Sie den Typ des Ausgabemediums bestimmen. Neben der im obigen Beispiel angegebenen Wertzuweisung screen (für das Medium "Bildschirm") gibt es weitere mögliche Angaben - siehe hierzu den Abschnitt Seite Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien. Sie können, indem Sie mehrere style-Bereiche definieren, die jeweils unterschiedliche media-Attribute haben, Stylesheets für verschiedene Ausgabemedien definieren.

Beachten Sie:

Auf die Seite Stylesheet-Angaben wird hier noch nicht näher eingegangen. Lesen Sie dazu die entsprechenden Abschnitte innerhalb dieser Dokumentation.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie genaue Angaben darüber, wo Style-Bereiche vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Style-Bereiche
Seite Attribut-Referenz für Style-Bereiche

nach oben
weiter | Seite Script-Bereiche in HTML
zurück | Seite Layer anordnen und kontrollieren
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Weiterführende HTML-Elemente

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Weiterführende HTML-Elemente / Script-Bereiche in HTML

SELFHTML

Script-Bereiche in HTML
Informationsseite

nach unten Script-Bereich definieren
nach unten Noscript-Bereich definieren
nach unten Weitere Angaben zum Script
nach unten Weitere Informationen
nach unten

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Script-Bereich definieren

Sie können im Dateikopf, also zwischen <head> und </head>, oder auch innerhalb des Dateikörpers, also zwischen <body> und </body>, einen oder mehrere Script-Bereiche definieren. Innerhalb von Script-Bereichen können Sie Anweisungen der verwendeten Script-Sprache notieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Script-Bereiche definieren</title>
<script type="text/javascript">
function Zeit () {
  var Jetzt = new Date();
  var Tag = Jetzt.getDate();
  var Monat = Jetzt.getMonth() + 1;
  var Jahr = Jetzt.getYear();
  if (Jahr < 999)
    Jahr += 1900;
  var Vortag = ((Tag < 10) ? "0" : "");
  var Vormon = ((Monat < 10) ? ".0" : ".");
  var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
  document.write("<h1>" + Datum + "<\/h1>")
}
</script>
</head>
<body>

<script type="text/javascript">
  Zeit();
</script>

<p>Aktuelle Nachrichten ...</p>

</body>
</html>

Erläuterung:

Mit <script> leiten Sie einen Script-Bereich ein, mit </script> beenden Sie den Bereich. Innerhalb des Bereichs können Sie Anweisungen der verwendeten Script-Sprache notieren. Aus Sicht von HTML wird alles, was innerhalb des Bereichs steht, als "nackter Text" betrachtet. Dabei kann es allerdings zu Konflikten zwischen einer Sprache wie JavaScript und einem streng SGML-konformen Seite HTML-Parser kommen. Ein solcher Parser betrachtet den Script-Bereich als beendet, sobald er auf die nächste Zeichenfolge </ stößt. Wenn Sie innerhalb von JavaScript diese Zeichenfolge benötigen, wie im obigen Beispiel in der letzten Anweisung, wo mit Hilfe von document.write eine Überschrift erster Ordnung ins Dokument geschrieben wird. Am Ende des ausgegebenen Textes ist dort <\/h1> notiert statt </h1>. Der Backslash dient in JavaScript dazu, ein nachfolgendes Zeichen zu maskieren, was im Beispiel an der Stelle aus JavaScript-Sicht aber keine weitere Bedeutung hat und nichts weiter bewirkt. Der Backslash ist auch nicht für den JavaScript-Interpreter gedacht, sondern für penible HTML-Parser.

Innerhalb des einleitenden <script>-Tags geben Sie mit dem Pflichtattribut type an, welche Script-Sprache Sie innerhalb des Bereichs benutzen möchten. Als Wert weisen Sie den Seite MIME-Typ der Script-Sprache zu. Die gängigste Angabe ist dabei text/javascript für JavaScript.

Beachten Sie:

Das immer noch oft genutzte Attribut language, mit dem viele Web-Designer im einleitenden <script>-Tag die Script-Sprache angeben (z.B. language="JavaScript"), wurde als veraltet ("deprecated") eingestuft und ist damit nicht in der Seite Strict-Variante von HTML enthalten. Die Browser erkennen Scripte mit language="JavaScript" zwar als JavaScript, aber für modernere Browser reicht auch das Attribut type zur Erkennung der Sprache aus. Sie sollten daher möglichst auf das language-Attribut verzichten. Näheres findet Sie im Abschnitt Seite JavaScript-Bereiche in HTML definieren.

Auf die Script-Befehle wird hier nicht näher eingegangen. Lesen Sie dazu das Kapitel JavaScript-Kapitel innerhalb dieser Dokumentation.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Noscript-Bereich definieren

Sie können einen Bereich definieren, der nur angezeigt wird, wenn die verwendete Script-Sprache nicht verfügbar ist, das Script also nicht ausführbar ist. Dies ist der Fall, wenn der Browser die Script-Sprache nicht kennt, oder wenn der Anwender das Interpretieren der Script-Sprache in den Einstellungen seines Browsers ausgeschaltet hat.

Wichtig ist eine solche Angabe beispielsweise, wenn Ihre Seiten intensiv JavaScript benutzen, um Inhalte anzuzeigen oder Verweise auszuführen. In solchen Fällen ist ein Projekt ohne JavaScript kaum nutzbar. Mit einem Noscript-Bereich können Sie einen entsprechenden Hinweis einbauen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Noscript-Bereiche definieren</title>
<script type="text/javascript">
function Zeit () {
  var Jetzt = new Date();
  var Tag = Jetzt.getDate();
  var Monat = Jetzt.getMonth() + 1;
  var Jahr = Jetzt.getYear();
  if (Jahr < 999)
    Jahr += 1900;
  var Vortag = ((Tag < 10) ? "0" : "");
  var Vormon = ((Monat < 10) ? ".0" : ".");
  var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
  document.write("<h1>" + Datum + "<\/h1>")
}
</script>
</head>
<body>

<script type="text/javascript">
  Zeit();
</script>

<noscript>
  <h1>Guten Tag!</h1>
</noscript>

<p>Aktuelle Nachrichten ...</p>

</body>
</html>

Erläuterung:

Das Beispiel enthält genau die gleichen Scripts wie weiter oben bei nach oben Script-Bereich definieren beschrieben. Diesmal wurde jedoch zusätzlich an Browser gedacht, die kein JavaScript kennen, oder bei denen JavaScript ausgeschaltet ist. Für solche Browser wird an der Stelle, an der bei script-fähigen Browsern die script-erzeugte h1-Überschrift mit dem aktuellen Datum eingesetzt wird, einfach eine gewöhnliche h1-Überschrift mit dem Inhalt Guten Tag! notiert.

Mit <noscript> leiten Sie einen Noscript-Bereich ein, mit </noscript> beenden Sie ihn. Dazwischen werden Seite Block-Elemente erwartet, also beispielsweise Überschriften, Textabsätze oder div-Bereiche.

Web-Browser, die das noscript-Element kennen, zeigen den Inhalt dazwischen nur dann an, wenn der Anwender die benutzte Script-Sprache, etwa JavaScript, deaktiviert hat. Web-Browser, die gar keine Script-Sprachen kennen, kennen zwar auch das noscript-Element nicht, aber einer alten Regel gemäß ignorieren sie die Auszeichnung einfach und zeigen den Inhalt des Elements ganz normal an.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Weitere Angaben zum Script

Es gibt in HTML eine Reihe weiterer Optionen für Script-Bereiche, die als Attribute im einleitenden <script>-Tag notiert werden können:

Mit dem Attribut src können Sie ein Script einbinden, das in einer separaten Datei notiert ist. Das ist von Vorteil, wenn Sie ein Script auf vielen Seiten verwenden wollen. Dann brauchen Sie das Script nur noch zu referenzieren, statt es jedesmal in der Datei zu notieren. Dieser Script-Bereich in der Datei sollte dann leer bleiben und kein zusätzliches lokales Script enthalten, um Probleme mit älteren Browsern zu vermeiden. Ein Beispiel für das Einbinden externer JavaScript-Dateien und genauere Hinweise dazu finden Sie im Abschnitt Seite JavaScript in separaten Dateien.

Wenn Sie mit src ein externes Script einbinden, können Sie zusätzlich mit dem Attribut charset die Seite Kodierung angeben, nach der die externe Quelle verarbeitet werden soll. Das ist beispielsweise wichtig, wenn Sie in einem Script deutsche Umlaute und Sonderzeichen nicht maskieren, z.B. bei HTML-Ausgaben. In diesem Fall können Sie charset="ISO-8859-1" angeben, um dem Browser mitzuteilen, dass er die Kodierung Seite ISO-8859-1 verwenden soll. Erlaubt sind Kodierungsangaben, wie sie unter der Web-Adresse englischsprachige Seite http://www.iana.org/assignments/character-sets angegeben sind.

Ein weiteres Attribut namens defer (Standalone-Attribut) soll verhindern, dass ein Script dynamisch Text schreibt. Einzelne JavaScript-Anweisungen wie document.write() werden dadurch unterbunden. Beachten Sie, dass dieses Attribut bislang jedoch nur von neueren Versionen des Internet Explorers interpretiert wird.

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie genaue Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Script-Bereiche
Seite Attribut-Referenz für Script-Bereiche
Seite Element-Referenz für Noscript-Bereiche
Seite Attribut-Referenz für Noscript-Bereiche

nach oben
weiter | Seite Allgemeine Universalattribute
zurück | Seite Stylesheet-Bereiche in HTML
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Weiterführende HTML-Elemente

© 2007 Seite Impressum


SELFHTML: HTML / Universalattribute

SELFHTML

Universalattribute
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML.
In diesem Abschnitt werden Attribute beschrieben, die in vielen oder allen einleitenden HTML-Tags vorkommen können. Es handelt sich einerseits um allgemeine Attribute und andererseits um Attribute, die eine Schnittstelle zu Script-Sprachen wie JavaScript herstellen.
Der Abschnitt besteht aus folgenden Seiten:

Seite Allgemeine Universalattribute
Seite Event-Handler für Scripts

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Universalattribute / Allgemeine Universalattribute

SELFHTML

Allgemeine Universalattribute
Informationsseite

nach unten Universalattribute notieren
nach unten Übersicht der Universalattribute
nach unten

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Universalattribute notieren

Unter " allgemeinen Universalattributen" werden hier solche Attribute verstanden, die in der Mehrzahl aller einleitenden HTML-Tags erlaubt sind und dort nicht als individuelle Attribute behandelt werden. Solche Attribute haben verschiedene Aufgaben. Es gibt beispielsweise Attribute, um einer bestimmten HTML-Auszeichnung einen individuellen Namen zu geben. Andere Universalattribute enthalten wichtige Angaben zur verwendeten Landessprache.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Universalattribute notieren</title>
</head>
<body>

<h1 style="color:black" lang="de">Willkommen!</h1>
<h1 style="color:blue" lang="en">Welcome!</h1>
<h1 style="color:red" lang="fr">Bienvenue!</h1>
<h1 style="color:green" lang="it">Benvenuto!</h1>
<h1 style="color:olive" lang="pt">Boa vinda!</h1>

<p title="Der Text steht hier, im Titel!">Und der Text?</p>

</body>
</html>

Erläuterung:

Universalattribute notieren Sie wie gewöhnliche Attribute im einleitenden HTML-Tag. Im Beispiel werden mehrere Überschriften notiert. Alle haben ein Attribut style, das CSS-Formatierungen für das entsprechende HTML-Element erlaubt. Ferner haben alle Überschriften ein Attribut lang, das die Sprache des Inhalts bezeichnet. Der Textabsatz unten im Beispiel hat ein Attribut title, das für Meta-Informationen zum Element gedacht ist. Neuere Browser zeigen solche Informationen in einem kleinen "Tooltip"-Fenster an, wenn der Anwender mit der Maus über den Inhalt des Elements fährt.

HTML 4.0 XHTML 1.0 MS IE 4.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Übersicht der Universalattribute

Die folgende Tabelle listet die allgemeinen Universalattribute von HTML auf.

Attribut Bedeutung Beispiel Erlaubt bei HTML-Elementen
class Gibt an, dass das HTML-Element einer bestimmten oder mehreren Stylesheet-Klassen angehört. Das Element übernimmt Formate, die zentral für diese Klasse(n) definiert wurden. Unterschiedliche Klassen sind mit einem Leerzeichen zu trennen. Einzelheiten dazu im CSS-Kapitel im Abschnitt Seite Formate für Klassen definieren. <h1 class="NeueSeite">
<h1 class="NeueSeite Hinweis"> 		siehe HTML-Referenz:
Seite Universalattribute
dir Gibt die Textrichtung der Landessprache an, die innerhalb des HTML-Elements verwendet wird. Interessant beispielsweise bei Sprachen wie Arabisch oder Hebräisch, wo die Textrichtung von rechts nach links geht. Erlaubt sind die Angaben ltr (links nach rechts) und rtl (rechts nach links). <td dir="rtl"> siehe HTML-Referenz:
Seite Universalattribute
id Ein dateiweit eindeutiger Bezeichnername für ein Element - wenn Sie Elemente damit auszeichnen, sollten Sie keinen id-Namen innerhalb einer HTML-Datei mehr als einmal vergeben. Interessant ist das id-Attribut beispielsweise im Zusammenhang mit neuerem JavaScript nach DOM-Syntax, wo es die Objektmethode Seite getElementById() gibt. Auch bei Stylesheets spielt dieses Attribut eine Rolle, nämlich dann, wenn Sie zentrale Seite Individualformate definieren. Gleichzeitig wirken Elemente mit id-Namen als Seite Sprunganker, die Sie in einem Link direkt adressieren können. Achten Sie beim zugewiesenen Namen auf Groß-/Kleinschreibung! Für Sprunganker sowie beim Zugriff über JavaScript sind Namen wie Beispiel und beispiel unterschiedlich. <div id="einleitung"> siehe HTML-Referenz:
Seite Universalattribute
lang Gibt die Landessprache an, die innerhalb des HTML-Elements verwendet wird. Interessant bei mehrsprachigen Dateien - aber auch für Suchmaschinen im Internet. Als Angabe ist ein standardisiertes Sprachenkürzel erlaubt, z.B. de für deutsch, en für englisch, fr für französisch, it für italienisch oder es für spanisch. Einzelheiten dazu und eine vollständige Übersicht finden Sie im Abschnitt Seite Sprachen- und Länderkürzel. <p lang="it"> siehe HTML-Referenz:
Seite Universalattribute
style Erlaubt es, den Inhalt eines Elements individuell mit Stylesheets bzw. der im Dateikopf angegebenen Seite Default-Sprache für Stylesheets zu formatieren. Einzelheiten dazu werden im CSS-Kapitel im Abschnitt Seite HTML-Elemente direktformatieren behandelt. <p style="color:red"> siehe HTML-Referenz:
Seite Universalattribute
title Erlaubt es, HTML-Elemente mit kommentierendem Text bzw. Meta-Information auszustatten. Der kommentierende Text wird gängigerweise vom Browser in einem kleinen Fenster ("Tooltip") oder in der Statusleiste angezeigt, wenn der Anwender mit der Maus über den Anzeigebereich des HTML-Elements fährt. <p title="ironisch!"> siehe HTML-Referenz:
Seite Universalattribute

nach oben
weiter | Seite Event-Handler für Scripts
zurück | Seite Script-Bereiche in HTML
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Universalattribute

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Universalattribute / Event-Handler für Scripts

SELFHTML

Event-Handler für Scripts
Informationsseite

nach unten Event-Handler notieren
nach unten Übersicht der universalen Event-Handler
nach unten

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Event-Handler notieren

Event-Handler (Ereignisbehandler) sind HTML-Attribute, die eine Verknüpfung zu einer Script-Sprache herstellen. Ein Ereignis ist zum Beispiel ein Mausklick oder ein Tastendruck des Anwenders. Ein Element, das einen Event-Handler enthält, kann auf ein solches Ereignis reagieren, wenn das Ereignis im Anzeigebereich des Elements stattfindet. Mit dem Event-Handler können Sie beispielsweise eine JavaScript-Funktion aufrufen, die das Ereignis verarbeitet und reagiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Event-Handler notieren</title>
<script type="text/javascript">
function Ergebnis () {
  document.Formular.Eingabe.value = eval(document.Formular.Eingabe.value);
}
</script>
</head>
<body>

<form name="Formular" action="">
  <p>Geben Sie eine Rechenoperation mit Grundrechenarten ein und klicken Sie dann
  auf den Button neben dem Eingabefeld:</p>
  <p>
    <input type="text" name="Eingabe" size="30">
    <input type="button" value=" = " onclick="Ergebnis()">
  </p>
</form>

</body>
</html>

Erläuterung:

Das Beispiel enthält ein Kapitel Formular mit einem Eingabefeld und einem Klick-Button. Beim Klick-Button ist der Event-Handler onclick notiert, der beim Anklicken des Buttons die JavaScript-Funktion Ergebnis() aufruft, die im Dateikopf in einem Seite Script-Bereich notiert ist. Diese Funktion holt sich den Inhalt aus dem Eingabefeld, berechnet ihn und schreibt das Ergebnis wieder in das Eingabefeld.

Beachten Sie:

Das obige Beispiel funktioniert auch mit älteren, JavaScript-fähigen Browsern. Solche Browser interpretieren Event-Handler nur in sehr eingeschränkter Form, nämlich bei Formularelementen und einigen wenigen anderen Elementen. Das Konzept der Event-Handler geht jedoch viel weiter. So kann beispielsweise auch eine Tabellenzelle beim Anklicken ihre Hintergrundfarbe wechseln usw. Solche dynamischen Änderungen am Dokument funktionieren aber erst mit neueren Browsern (Internet Explorer ab Version 4.x, Netscape ab Version 6.x).

In HTML ist nicht festgelegt, dass Event-Handler-Attribute standardmäßig JavaScript-Code enthalten. Andere Scriptsprachen wären genauso möglich, z.B. Seite VBScript. Deshalb erfordert es der HTML-Standard, dass beim Gebrauch von Event-Handler-Attributen die verwendete Scriptsprache zentral angegeben wird. Dies ist durch eine Seite Angabe zur Default-Sprache für Scripts im Kopf der HTML-Datei möglich:

<meta http-equiv="Content-Script-Type" content="text/javascript">

Ohne diese Angabe soll ein Browser die Attributwerte nicht als Code einer bestimmten Scriptsprache behandeln. Über den Sinn oder Unsinn dieser Regelung lässt sich trefflich streiten. Da sich JavaScript als Standard-Scriptsprache in HTML-Dokumenten durchgesetzt hat, gibt es momentan keine praktische Notwendigkeit einer solchen Angabe. Es ist daher allgemein akzeptierte Praxis, diese Angabe wegzulassen - in SELFHTML wird konsequent darauf verzichtet. Seien Sie sich aber im Klaren darüber, dass dies strenggenommen ein Verstoß gegen die W3C-Empfehlung ist.

HTML 4.0 XHTML 1.0 MS IE 3.0 Netscape 2.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Übersicht der universalen Event-Handler

Die folgende Tabelle listet nur solche Event-Handler auf, die im HTML-Standard als weitgehend universell und für die meisten HTML-Elemente einsetzbar festgehalten sind. Es gibt noch weitere Event-Handler, die jedoch nur für bestimmte Elemente gültig sind. Lesen Sie dazu auch den Abschnitt im JavaScript-Kapitel über Seite Event-Handler.

Attribut | Bedeutung | Beispiel | Erlaubt bei HTML-Elementen
onclick | Für den Fall, dass der Anwender ein Element anklickt. | siehe JavaScript-Kapitel: Seite onclick | siehe HTML-Referenz: Seite Universalattribute
ondblclick | Für den Fall, dass der Anwender ein Element doppelt anklickt. | siehe JavaScript-Kapitel: Seite ondblclick | siehe HTML-Referenz: Seite Universalattribute
onmousedown | Tritt ein, wenn der Anwender die Maustaste gedrückt hält. | siehe JavaScript-Kapitel: Seite onmousedown | siehe HTML-Referenz: Seite Universalattribute
onmouseup | Tritt ein, wenn der Anwender die Maustaste gedrückt hat und sie nun wieder loslässt. | siehe JavaScript-Kapitel: Seite onmouseup | siehe HTML-Referenz: Seite Universalattribute
onmouseover | Tritt ein, wenn der Anwender mit der Maus über ein Element fährt. | siehe JavaScript-Kapitel: Seite onmouseover | siehe HTML-Referenz: Seite Universalattribute
onmousemove | Tritt ein, wenn der Anwender die Maus bewegt, unabhängig davon, ob die Maustaste gedrückt ist oder nicht. | siehe JavaScript-Kapitel: Seite onmousemove | siehe HTML-Referenz: Seite Universalattribute
onmouseout | Tritt ein, wenn der Anwender mit der Maus über ein Element fährt und dieses dabei verlässt. | siehe JavaScript-Kapitel: Seite onmouseout | siehe HTML-Referenz: Seite Universalattribute
onkeypress | Tritt ein, wenn der Anwender eine Taste drückt und diese gedrückt hält. | siehe JavaScript-Kapitel: Seite onkeypress | siehe HTML-Referenz: Seite Universalattribute
onkeydown | Tritt ein, wenn der Anwender, während er ein Element aktiviert hat, eine Taste drückt. | siehe JavaScript-Kapitel: Seite onkeydown | siehe HTML-Referenz: Seite Universalattribute
onkeyup | Tritt ein, wenn der Anwender, eine Taste gedrückt hat und diese wieder loslässt. | siehe JavaScript-Kapitel: Seite onkeyup | siehe HTML-Referenz: Seite Universalattribute

nach oben
weiter | Seite Unterschiede zwischen XHTML und HTML
zurück | Seite Allgemeine Universalattribute
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Universalattribute

© 2007 Seite Impressum


SELFHTML: HTML / XHTML und HTML

SELFHTML

XHTML und HTML
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Allgemeine Regeln für HTML sowie alle HTML-Elemente.
Dieser Abschnitt geht auf XHTML ein, die neue, mit Hilfe von Kapitel XML redefinierte Fassung von HTML. Der Abschnitt richtet sich an Anwender, die mit HTML vertraut sind und Einzelheiten zu XHTML erfahren wollen.
Der Abschnitt besteht aus folgenden Seiten:

Seite Unterschiede zwischen XHTML und HTML
Seite Modularisierung von XHTML und XHTML 1.1

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / XHTML und HTML / Unterschiede zwischen XHTML und HTML

SELFHTML

Unterschiede zwischen XHTML und HTML
Informationsseite

nach unten Allgemeines zu XHTML
nach unten Unterschied: MIME-Typen
nach unten Unterschied: Dateinamen
nach unten Unterschied: Die XML-Deklaration und die Zeichenkodierung
nach unten Unterschied: Dokumenttyp-Deklaration
nach unten Unterschied: HTML-Wurzelelement mit Namensraumangabe
nach unten Unterschied: Strengeres Einhalten des HTML-Grundgerüsts
nach unten Unterschied: Kleinschreibung
nach unten Unterschied: Leere Elemente
nach unten Unterschied: Attributwerte in Anführungszeichen
nach unten Unterschied: Elemente mit optionalem Abschluss-Tag
nach unten Unterschied: Alleinstehende (leere) Attribute
nach unten Unterschied: Leerraum in Wertzuweisungen
nach unten Unterschied: Verweise zu Ankern
nach unten Unterschied: Das Universalattribut lang
nach unten Unterschied: Inhalt von Script- und Style-Bereichen
nach unten Unterschied: Ausnahmen von Verschachtelungsregeln
nach unten Beispiel eines XHTML-Dokuments
nach unten

Allgemeines zu XHTML

Während HTML eine relativ neue Erfindung ist, existiert das zugrunde liegende Konzept der Auszeichnungssprachen schon viel länger. HTML ist lediglich eine Auszeichnungssprache unter vielen, allerdings die bislang weltweit erfolgreichste und bekannteste. Ein Merkmal des Konzepts solcher Auszeichnungssprachen ist, dass ihre Bestandteile nicht einfach "frei erfunden" sind, sondern dass es Meta-Sprachen gibt, mit deren Hilfe die Regeln und Bestandteile solcher Auszeichnungssprachen definiert werden.

Bereits seit 1986 gibt es die als ISO 8879 standardisierte Meta-Sprache SGML (Standard Generalized Markup Language = standardisierte verallgemeinerte Auszeichnungssprache). Diese Meta-Sprache erlaubt das Definieren von Auszeichnungssprachen mit Hilfe so genannter DTDs (Document Type Definitions = Dokumenttyp-Definitionen). In den DTDs wird festgelegt, welche Elemente eine Auszeichnungssprache hat, welche zugehörigen Attribute, sowie Regeln, welche Elemente innerhalb welcher anderen Elemente vorkommen können usw. Nun ist SGML sehr ausgereift, gilt aber gemeinhin als ziemlich "sophisticated". So entschloss man sich dazu, eine reduziertere Variante von SGML zu etablieren, und zwar unter dem Namen XML (Extensible Markup Language = erweiterbare Auszeichnungssprache). XML erlaubt ebenso wie SGML das Definieren von Auszeichnungssprachen mit Hilfe von DTDs.

HTML, das Anfang der 90er-Jahre entstand, wurde mit Hilfe von SGML definiert. Bis einschließlich HTML 4.x ist das auch heute noch der Fall. Im Zuge von XML und seiner wachsenden Bedeutung für immer mehr Dateiformate, die auch im Web ihren Einsatz finden, entstand der Wunsch, auch HTML mit Hilfe von XML zu definieren anstatt wie bisher mit SGML. Damit kein Versionenwirrwarr entsteht, entschloss man sich dazu, dieses neue, XML-basierte HTML mit einem neuen Namen und eigener Versionenkontrolle auszustatten. Heraus kam dabei XHTML (Extensible HyperText Markup Language = erweiterbare Hypertext-Auszeichnungssprache).

Seit Januar 2000 liegt XHTML 1.0 als Empfehlung des W3-Konsortiums vor und hat damit den gleichen verbindlichen Stellenwert wie etwa HTML 4.0. XHTML 1.0 ist nichts anderes als der Versuch, das SGML-basierte HTML 4.0 mit Hilfe von XML "nachzubauen". Dahinter steckt keine Spielerei von Designern künstlicher Sprachen, sondern es gibt gute Gründe dafür:

  • XHTML ist syntaktisch hundertprozentig kompatibel zu Seite wichtigen XML-Standardsprachen wie SVG, WML, SMIL usw.
  • XHTML kann dadurch als Seite Dateninsel innerhalb anderer Sprachen eingebunden werden, und ebenso ist es möglich, diese anderen Sprachen wieder als Dateninsel innerhalb von XHTML einzubinden. So ist es beispielsweise problemlos möglich, eine SVG-Grafik als Dateninsel in eine XHTML-Datei einzubetten. Die SVG-Grafik muss dadurch nicht mehr referenziert werden, sondern ist Bestandteil der XHTML-Datei.
  • Durch die gemeinsame syntaktische Grundlage auf der Basis von XML ist es auch möglich, das Auslesen und Verarbeiten über Programmiersprachen zu vereinheitlichen. Genau das geschieht beim DOM (Document Object Model = Dokument-Objektmodell). Das DOM definiert Objekte, Eigenschaften und Methoden für den Zugriff auf Dokumente, die in einer XML-basierten Sprache abgefasst sind. Möglich ist eine solche Anwendung aber nur, weil alle diese Sprachen denselben, XML-bedingten syntaktischen Grundmustern folgen. Da die syntaktischen Grundmuster von HTML denen von XHTML sehr ähnlich sind, ist das DOM in der Praxis auch auf HTML anwendbar. Doch der Wunsch ist verständlich, ein HTML zu haben, das sich exakt an die Syntax von XML hält.
  • Was für Script-Sprachen gilt, gilt ebenso auch für Stylesheet-Sprachen. Die selbst XML-basierte allgemeine Stylesheet-Sprache XSL (Extensible Stylesheet Language = erweiterbare Formatsprache) ist genau für diese Zwecke entworfen worden. Sie stellt eine einheitliche Grundlage für alle XML-basierten Sprachen zur Verfügung.

XHTML ist also XML-gerechtes HTML. Der "Nachbau" von HTML 4.0 in XHTML 1.0 ist so weit gelungen, dass es in XHTML die gleichen Elemente, Attribute und Verschachtelungsregeln gibt wie in HTML. Systembedingt durch die Syntax von XML gibt es jedoch diverse Unterschiede im Detail, die Sie kennen müssen, wenn Sie Ihre Web-Seiten in XHTML statt in HTML schreiben wollen.

XHTML hat einen zwiespältigen Charakter, denn einerseits soll es alle Vorteile einer XML-Sprache bieten. Andererseits soll XHTML eine praktische anwendbare Sprache für Webseiten sein. XHTML wurde deshalb so angelegt, dass eine Kompatibilität mit Browsern, die lediglich auf HTML-Syntax ausgelegt sind oder nicht über die nötigen XML-Fähigkeiten verfügen, möglich ist. Tatsächlich verarbeiten die verbreiteten Browser XHTML-Dokumente und stellen sie genauso wie HTML-Dokumente am Bildschirm dar. Die Voraussetzung ist, dass Sie einige Unterschiede beim Schreiben des Codes beachten, die auf dieser Seite aufgelistet sind. Einzelne Probleme, besonders mit älteren Browsern, sind dennoch nicht auszuschließen.

Durch diese Kompatibilität zu HTML-Browsern ergeben sich zwei Arten der Verarbeitung von XHTML. Bei der Verarbeitung als HTML machen sich die Besonderheiten von XHTML beim Betrachten Ihrer Webseite nicht bemerkbar. Viele der Unterschiede zwischen HTML und XHTML kommen nämlich erst dann zum tragen, wenn das XHTML-Dokument nach den Regeln von XML verarbeitet wird. Ebenso entfalten sich die Vorteile von XHTML erst dann, wenn beim Erstellen, Ändern oder Lesen tatsächlich XML-Techniken genutzt werden. Neuere Browser, die XHTML korrekt verarbeiten und darstellen können, sollten ein XHTML-Dokument daher sinnvollerweise als XML verarbeiten. Der Abschnitt nach unten MIME-Typen erläutert, wie sich der Verarbeitungsmodus unter Berücksichtigung der Browserfähigkeiten bestimmen lässt.

Unterschied: MIME-Typen

Der Seite MIME-Typ für gewöhnliche HTML-Dokumente lautet stets text/html. XHTML-Dokumente können diesen MIME-Typ ebenfalls haben, wenn sie die Empfehlungen des W3-Konsortiums zur Abwärtskompatibilität beachten. Gleichzeitig sind jedoch auch die allgemeinen MIME-Typen text/xml und application/xml erlaubt, die für alle von XML abgeleiteten Sprachen gedacht sind. Das W3-Konsortium hat zusätzlich den MIME-Typ application/xhtml+xml speziell für XHTML etabliert und empfiehlt, diesen neben text/html zu benutzen. Für das Erstellen von XHTML-Dokumenten hat dies direkt zunächst keine Bedeutung. Wohl aber für die Kommunikation zwischen Web-Browser und Web-Server. Wenn der Server dem Browser die angeforderte XHTML-Datei mit dem Typ application/xhtml+xml sendet, muss der Browser in der Lage sein, diesen MIME-Typ zu verarbeiten und Dateien dieses Typs am Bildschirm anzuzeigen. Anderenfalls kann es beispielsweise passieren, dass der Browser dem Anwender die Datei zum Download anbietet, statt sie ins Anzeigefenster zu laden. Das W3-Konsortium hat eine englischsprachige Seite Übersicht über die Browserunterstützung der verschiedenen MIME-Typen zusammengestellt.

In der Praxis hat es sich durchgesetzt, XHTML-Dokumente mit dem MIME-Typ text/html auszuliefern. Nur in den Fällen, in denen der Browser dem Server bei der HTTP-Anfrage über die Accept-Angabe ausdrücklich mitteilt, dass er application/xhtml+xml verarbeiten kann, sollte die Datei mit diesem MIME-Typ gesendet werden. Auf der Seite deutschsprachige Seite Mit dem Apache XHTML-Seiten ausliefern werden Möglichkeiten vorgestellt, wie Sie XHTML-Dateien je nach Fähigkeiten des verwendeten Browsern entweder mit text/html oder application/xhtml+xml ausliefern können.

Der Unterschied der MIME-Typen ist kein rein theoretischer, denn der MIME-Typ bestimmt die Art der Verarbeitung des XHTML-Dokuments. Bei text/html nutzen die Browser den herkömmlichen Seite HTML-Parser bei der Verarbeitung des Quellcodes. Die heute üblichen HTML-Parser der Browser lassen syntaktische Fehler im Dokument einfach durchgehen und versuchen das Dokument "irgendwie" anzuzeigen. Bei application/xhtml+xml behandelt ein Browser, der den MIME-Typ korrekt verarbeitet, die XHTML-Datei als echtes XML-Dokument und benutzt daher seinen Seite XML-Parser. Der XML-Parser arbeitet im Gegensatz zum HTML-Parser nach festen, vorgegebenen Regeln. Er erwartet, dass das Dokument die strengen Syntaxregeln von XML einhält. Wenn er auf einen syntaktischen Fehler stößt, muss er die Verarbeitung abbrechen. Im Anzeigefenster des Browsers erscheint dann entweder nur eine Fehlermeldung anstelle des Dokuments, oder, wie bei vielen aktuellen Browsern, das Dokument nur bis zur Stelle des Fehlers. Wenn Sie also den MIME-Typ application/xhtml+xml verwenden, müssen Sie peinlichst darauf achten, dass Ihre XHTML-Dateien Seite wohlgeformt sind. Dies können Sie beispielsweise mit dem englischsprachige Seite Validator des W3-Konsortiums prüfen.

Unterschied: Dateinamen

Neuere, XML-fähige Browser (Internet Explorer ab Version 5.x, Netscape ab Version 6.x) behandeln Dateien je nach Systemkonfiguration abhängig von der Dateinamenerweiterung unterschiedlich, wenn sie sonst keine Hinweise (MIME-Typ) darauf haben, wie die Datei zu behandeln ist. Wenn Sie in einer Datei zwar alle Regeln von XHTML einhalten, die Datei aber mit den typischen Endungen .htm oder .html abspeichern, benutzen diese Browser ihre HTML-Parser. Speichern Sie die Datei dagegen mit einer anderen Endung ab, z.B. .xhtml, dann benutzen die Browser unter Umständen ihre XML-Parser. Dies wirkt sich genauso aus wie bei den nach oben verschiedenen MIME-Typen.

Bei der Darstellung XML-geparster, fehlerfreier XHTML-Dokumente ohne CSS oder andere Stylesheets reagieren die Browser unterschiedlich. Netscape 6 zeigt das Dokument wie ein HTML-Dokument an, also mit den voreingestellten Darstellungen etwa für Überschriften, Textabsätze, Listen, Tabellen usw. Der Internet Explorer stellt solche Dokumente dagegen als reine Element-Baumstruktur dar. Erst wenn Sie die verwendeten Elemente mit Stylesheets formatieren, zeigt der Internet Explorer das Dokument in nicht-schematischer Form an.

Solange Sie also XHTML-Standard-konforme Dateien mit den HTML-typischen Endungen .htm oder .html abspeichern, erreichen Sie eine "normale" Darstellung im Browser, verhindern aber auch, dass die Dateien im Browser auf XML-Basis verarbeitet werden. Speichern Sie die Dateien dagegen unter einer anderen, dem Browser unbekannten oder mit dem MIME-Typ application/xml verknüpften Dateiendung ab, werden die Dateien auf XML-Basis verarbeitet - in diesem Fall dürfen sie jedoch keine syntaktischen Fehler enthalten. Wenn im Anzeigefenster des Internet Explorers etwas anderes als ein Strukturbaum erscheinen soll, müssen Sie außerdem Stylesheets verwenden, um die Elemente zu formatieren.

Der Unterschied hinsichtlich der Dateinamen ist mit dem der MIME-Typen verknüpft. Ein Web-Server unterscheidet eine HTML-Datei für gewöhnlich über dessen Dateinamenerweiterung von einer XHTML-Datei. Dementsprechend wählt er einen geeigneten MIME-Typ, also etwa text/html, application/xml oder application/xhtml+xml. Beim verbreiteten Seite Web-Server Apache können Sie unter der Voraussetzung, dass der Server eine aktuelle Konfiguration besitzt, mit der Dateinamenerweiterung .html für MIME-Typ text/html arbeiten. Für application/xhtml+xml können Sie die Erweiterung .xhtml verwenden. Bei veralteten Konfigurationen müssen Sie hingegen damit rechnen, dass der Web-Server die Erweiterung .xhtml nicht erkennt und die Datei stattdessen als Nur-Text sendet.

Unterschied: Die XML-Deklaration und die Zeichenkodierung

Das allererste, was am Anfang einer XHTML-Datei notiert werden sollte, ist eine so genannte Seite XML-Deklaration. Damit geben Sie an, dass die folgende Datei XML-gerechte Daten enthält und welche Seite Zeichenkodierung die Datei verwendet (siehe auch Seite Computer und geschriebene Sprache). Eine solche Deklaration gibt es in HTML 4.0 nicht, sie ist also XHTML-spezifisch.

Beispiel für XHTML 1.0:

<?xml version="1.0" encoding="ISO-8859-1" ?>

Erläuterung:

Notieren Sie diese Angabe so wie in dem Beispiel gezeigt in der ersten Zeile einer XHTML-Datei. Derzeit ist beim Attribut version der Wert 1.0 sinnvoll. Zwar gibt es bereits Version 1.1 des XML-Standards, Sie sollten jedoch 1.0 angeben, sofern Sie nicht aus bestimmten Gründen XML 1.1 verwenden wollen.

Beim Attribut encoding können Sie die Zeichenkodierung angeben, nach der die die XHTML-Datei zu verarbeiten ist.
encoding="ISO-8859-1" steht für die Seite Kodierung ISO-8859-1 (Latin-1) für westeuropäische Sprachen. Ein Zeichen belegt in der Datei immer ein Byte.
encoding="UTF-8" steht für eine internationale Kodierung auf Basis der ISO/IEC-10646-Norm ( Seite Unicode). Ein Zeichen belegt in der Datei eine variable Breite, z.B. ein Byte, aber auch zwei, drei oder vier Bytes.
encoding="UTF-16" steht ebenfalls für eine internationale Kodierung auf Basis der ISO/IEC-10646-Norm (Unicode). Ein Zeichen belegt in der Datei je nach Unicode-Position entweder zwei oder vier Bytes.

Beachten Sie:

Die Angabe einer XML-Deklaration ist nicht grundsätzlich notwendig, aber in Fällen äußerst ratsam. Denn bei der Verarbeitung als XML kommt der Angabe zur Zeichenkodierung eine besondere Wichtigkeit zu. Wenn Sie nämlich keine solche Angabe machen, nehmen XML-Parser per Voreinstellung die Unicode-Kodierung UTF-8 an (siehe dazu Seite Standard-Zeichenkodierung und Unicode-Unterstützung). Wenn die Kodierung Ihres Dokuments von UTF-8 abweicht, sollten Sie unbedingt eine XML-Deklaration verwenden, um die verwendete Kodierung anzugeben. Ansonsten bricht ein XML-Parser die Verarbeitung mit einer Fehlermeldung ab. Es ist zwar möglich, die Kodierung der XHTML-Datei dem Web-Browser über die Kopfzeilen der HTTP-Antwort mitzuteilen. Dies erfordert allerdings eine spezielle Konfiguration des Web-Servers. Außerdem ist eine solche Angabe in der Regel nutzlos, wenn der Anwender das Dokument auf seiner Festplatte speichert und ansieht.

Wenn das Dokument hingegen als HTML verarbeitet wird, kann die XML-Deklaration die Seite Dokumenttyp-Weiche des Internet Explorers negativ beeinflussen, sodass Sie sie gegebenenfalls weglassen sollten. In jedem Fall sollten Sie eine Seite Kodierungsangabe in einem Meta-Element im Kopf des Dokuments einfügen, damit das Dokument von HTML-Parsern korrekt verarbeitet werden kann.

Unterschied: Dokumenttyp-Deklaration

XHTML 1.0 und HTML 4.0 haben unterschiedliche Seite Dokumenttyp-Deklarationen. Die Dokumenttyp-Deklaration ("Doctype") nimmt Bezug auf die DTD (Dokumenttyp-Definition) und Sprachversion, die Sie in der Datei verwenden und an die Sie sich halten wollen. Ein strenger Seite Parser kann die Anzeige der Datei z.B. im Browser verhindern, wenn die Datei syntaktische Fehler enthält. Maßgeblich dafür, was ein syntaktischer Fehler ist, ist die DTD, auf die Sie mit der Dokumenttyp-Deklaration Bezug nehmen.

Beispiel für HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

Entsprechendes Beispiel für XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Erläuterung:

Die Beispiele zeigen, wie Dokumenttypen für HTML 4.01 und XHTML 1.0 für die Seite HTML-Variante Strict notiert werden. Auch in XHTML 1.0 gibt es die drei Varianten Strict, Transitional und Frameset, genau wie in HTML 4.0. Die beiden anderen Varianten für XHTML lauten:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Beachten Sie:

So wie oben notiert, kann ein strenger XML-Parser eine bestehende Internet-Verbindung erfordern und sich die DTD von der angegebenen Web-Adresse laden, um das Dokument gegen die darin formulierten Regeln zu prüfen. Sie können die DTDs in Ihr eigenes Web-Projekt integrieren. Angenommen, Sie haben eine Startdatei namens index.htm und die xhtml1-strict.dtd in einem eigenen Unterverzeichnis namens html-dtd abgelegt, dann können Sie in der index.htm notieren:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "html-dtd/xhtml1-strict.dtd">

Sie können die ZIP-Datei erforderlichen DTDs für XHTML downloaden. Die Zip-Datei (31 KByte) enthält die DTDs für alle drei Varianten Strict, Transitional und Frameset sowie drei zusätzliche Dateien mit Definitionen für benannte Zeichen.

Unterschied: HTML-Wurzelelement mit Namensraumangabe

Das einleitende <html>-Tag hat in HTML meistens keine Attribute. In XHTML müssen Sie jedoch den Seite Namensraum für XHTML explizit angeben.

Beispiel für HTML 4.01:

<html>
<!-- Inhalt der Datei -->
</html>

Entsprechendes Beispiel für XHTML 1.0:

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Inhalt der Datei -->
</html>

Erläuterung:

Notieren Sie in XHTML im einleitenden <html>-Tag immer das Attribut xmlns, das einen XML-Namensraum bezeichnet, und weisen Sie ihm den Wert http://www.w3.org/1999/xhtml zu. Dies ist ein spezieller URI, der nicht dazu gedacht ist, eine aufrufbare Web-Adresse anzugeben, sondern lediglich das Schema der Web-Adressierung nutzt, um einen weltweit eindeutigen Namen für den Namensraum zu vergeben. Die Web-Adresse existiert zwar, weil das W3-Konsortium so freundlich war, damit die Häufung unnötiger Aufruffehler auf ihrem Server zu vermeiden - doch die Adresse bedeutet nichts anderes als ein beliebiger eindeutiger Name.

Unterschied: Strengeres Einhalten des HTML-Grundgerüsts

Wenn Sie in HTML die Elemente html, head und body weglassen, jedoch das Element title und ansonsten gültiges HTML notieren, dann ist es aus Sicht von HTML ein fehlerfreies und vollständiges Dokument. In XHTML besteht diese Freiheit nicht. Hier muss eine HTML-Datei zwingend das übliche Grundgerüst einhalten und ein head- und ein body-Element enthalten.

Beispiel für HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Titel</title>
<h1>Text</h1>

Entsprechendes Beispiel für XHTML 1.0:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text</title>
<!-- gegebenenfalls andere Elemente im Kopfbereich -->
</head>
<body>
<h1>Text</h1>
</body>
</html>

Erläuterung:

Zwar ist die gezeigte Form, ein HTML-4.0-Dokument zu notieren, für die Praxis alles andere als empfehlenswert, aber zumindest ist sie nicht verkehrt. Bei einem XHTML-Dokument muss dagegen immer das vollständige Grundgerüst notiert werden.

Unterschied: Kleinschreibung

In HTML 4.0 ist es egal, ob Sie <TABLE BORDER="0">, <TABLE border="0"> oder <Table Border="0"> notieren. HTML unterscheidet bei Namen von HTML-Elementen und Attributnamen nicht zwischen Groß- und Kleinschreibung. Nur bei der Wertzuweisung an manche Attribute wird Groß-/Kleinschreibung unterschieden - aber auch nur im Hinblick etwa auf Script-Sprachen. Bei Attributen mit festen erlaubten Werten, wie etwa align, ist es egal, ob Sie CENTER oder center notieren. Nicht so bei XHTML. XML unterscheidet nämlich strikt zwischen Groß- und Kleinschreibung. Das bedeutet, <TABLE> ist etwas anderes als <table>. Für XHTML wurde festgelegt, dass alle Elementnamen und Attributnamen klein geschrieben werden. Das Gleiche gilt auch für die festen Wertzuweisungen wie center.

Beispiel für HTML 4.01:

<OBJECT DATA="Video.mpg" TYPE="video/mpeg" ALIGN="LEFT"></OBJECT>

Entsprechendes Beispiel für XHTML 1.0:

<object data="Video.mpg" type="video/mpeg" align="left"></object>

Erläuterung:

Schreiben Sie in XHTML immer alle Elementnamen wie object oder Attributnamen wie data oder type klein. Schreiben Sie Wertzuweisungen im Zweifelsfall ebenfalls immer klein, also beispielsweise bei align="left". Nur dort, wo in einer Wertzuweisung die Großschreibung von bestimmten Buchstaben erforderlich ist, wie im Beispiel beim Dateinamen Video.mpg, können Sie den Wert so schreiben wie es erforderlich ist.

Unterschied: Leere Elemente

In HTML 4.0 gibt es diverse leere Elemente. Das sind Elemente ohne Inhalt. Das Abschluss-Tag ist deshalb verboten, weil die Elemente als inhaltsleer definiert sind. Beispiele:
<img>, <br>, <input>, <hr>.
In XML-basierten Sprachen, also auch in XHTML, müssen solche leeren Elemente gesondert gekennzeichnet werden.

Beispiel für HTML 4.01:

<p>Text mit<br>Zeilenumbruch</p>
<p><img src="bild.png" alt="ein Bild"></p>

Entsprechendes Beispiel für XHTML 1.0:

<p>Text mit<br />Zeilenumbruch</p>
<p><img src="bild.png" alt="ein Bild" /></p>

Erläuterung:

Notieren Sie unmittelbar vor der schließenden spitzen Klammer des alleinstehenden Tags einen Schrägstrich, sodass am Ende die Zeichenfolge /> steht. Vor dem Schrägstrich sollte ein Leerzeichen stehen, um die Funktionalität in alten Browsern zu gewährleisten. Alternativ dazu können Sie auch ein Element mit Anfangs- und End-Tag notieren, z.B. <br></br>. Dabei darf jedoch nichts, auch kein Leerzeichen und kein Zeilenumbruch, zwischen dem Anfangs- und dem End-Tag stehen, ansonsten ist es ungültiges XHTML.

Wenn Sie Elemente, die Inhalt haben können, ohne Inhalt verwenden, z.B. <p></p>, dann notieren Sie sie in XHTML jedoch besser in dieser Form und nicht in der Form <p />. Denn die verbreiteten HTML-Parser behandeln <p /> wie <p>.

Unterschied: Elemente mit optionalem Abschluss-Tag

In HTML 4.0 gibt es diverse Elemente mit optionalem Abschluss-Tag. Beispiele:
<body>, <td>, <dd>, <dt>, <option>.
Notieren Sie solche Elemente in XHTML immer mit Anfangs- und Abschluss-Tag.

Beispiel für HTML 4.01:

<select name="Auswahl" size="1">
  <option>1. Eintrag
  <option>2. Eintrag
  <option>3. Eintrag
</select>

Entsprechendes Beispiel für XHTML 1.0:

<select name="Auswahl" size="1">
  <option>1. Eintrag</option>
  <option>2. Eintrag</option>
  <option>3. Eintrag</option>
</select>

Erläuterung:

Alle Elemente, die Inhalt haben können, müssen in XHTML mit Anfangs- und Abschluss-Tag gekennzeichnet werden.

Unterschied: Attributwerte in Anführungszeichen

In HTML dürfen Sie Attributen Werte zuweisen, ohne diese mit Hochkommata zu umschließen. In XHTML ist dies zwingend erforderlich.

Beispiel für HTML 4.01:

<a name=anker>Anker</a>

Entsprechendes Beispiel für XHTML 1.0:

<a name="anker">Anker</a>

Erläuterung:

Alle Attributwerte müssen in XHTML innerhalb von Anführungszeichen notiert werden.

Unterschied: Alleinstehende (leere) Attribute

In HTML 4.0 gibt es diverse Attribute, die keine Wertzuweisung erhalten. Beispiele:
<input checked>, <textarea readonly>, <input disabled>, <select multiple>, <hr noshade>, <td nowrap>, <script defer>.
In XML-basierten Sprachen dagegen muss allen Attributen ausdrücklich ein Wert zugewiesen werden. Da diese Attribute nur einen möglichen Wert annehmen können, hat man sich darauf verständigt, als Wert einfach den Attributnamen zu nehmen.

Beispiel für HTML 4.01:

<td nowrap>Inhalt</td>
<p>Text mit<hr noshade>Trennlinie</p>

Entsprechendes Beispiel für XHTML 1.0:

<td nowrap="nowrap">Inhalt</td>
<p>Text mit<hr noshade="noshade" />Trennlinie</p>

Erläuterung:

Weisen Sie leeren Attributen in XHTML einfach ihren eigenen Namen als Wert zu. Bei den meisten bekannten Browsern gibt es damit keine Probleme.

Unterschied: Leerraum in Wertzuweisungen

Bei Wertzuweisungen an Attribute müssen Sie in XHTML besser aufpassen als in HTML. Leerzeichen sind erlaubt wo erforderlich, doch Zeilenumbrüche sollten Sie vermeiden.

Beispiel für empfohlenes XHTML 1.0:

<p title="Anfang der Geschichte">Text Text Text</p>

Beispiel für problematisches XHTML 1.0:

<p title="Anfang
der
Geschichte">Text Text Text</p>

Erläuterung:

Sie sollten sich nicht darauf verlassen, dass die Browser mit Zeilenumbrüchen in Attributwerten so umgehen, wie Sie es erwarten. Verwenden Sie möglichst keine Zeilenumbrüche.

Unterschied: Verweise zu Ankern

In HTML können Sie Seite Verweise zu Ankern notieren, z.B. <a href="#anker">Verweis</a>. Der entsprechende Anker ist dann notiert mit <a name="anker">irgendwas</a>. Auch andere Attribute verwenden diese Technik, wie etwa das usemap-Attribut beim img-Element zum Verweis auf ein map-Element, bei dem ein entsprechendes name-Attribut notiert ist.

In XHTML funktionieren solche Verweise nicht. XML benötigt Namen vom Typ "ID", also dokumentweit eindeutige Bezeichner, um solche Beziehungen auflösen zu können. In XHTML können Sie das Kapitel Universalattribut id verwenden, um solche Verweise zu realisieren. Es ist zwar bereits in HTML 4 möglich, einen Anker alleine mit dem id-Attribut zu realisieren, z.B. <h2 id="anker">Überschrift</h2>, aber dennoch interpretieren manche alte Browser wie Netscape 4 nur <a name="anker">irgendwas</a> als Anker. Sie sollten daher beide Attribute notieren, damit sowohl ältere als auch neueren Browser den Anker verstehen und der Anker auch dannn funktioniert, wenn der Browser den XHTML-Verarbeitungsmodus einsetzt.

Beispiel für HTML 4.01:

<a href="#anker">Verweis</a>
<p>viel Inhalt</p>
<a name="anker">irgendwas</a>

Entsprechendes Beispiel für XHTML 1.0:

<a href="#anker">Verweis</a>
<p>viel Inhalt</p>
<a id="anker" name="anker">irgendwas</a>

Entsprechendes Beispiel für XHTML 1.1:

<a href="#anker">Verweis</a>
<p>viel Inhalt</p>
<a id="anker">irgendwas</a>

Erläuterung:

Notieren Sie in dem a-Element für den Anker beide Attribute id und name. Weisen Sie beiden Attributen exakt den gleichen Namen zu. Ein Browser, der den Verweis nach XHTML-Logik ausführt, benötigt das id-Attribut, während ein Browser, der den Verweis nach HTML-Logik ausführt, das name-Attribut zur Ermittlung des Ankers verwendet. In XHTML 1.1 darf das name-Attribut nicht mehr verwendet werden.

Unterschied: Das Universalattribut lang

XML-basierte Sprachen benutzen normalerweise anstelle von lang das XML-Universalattribut xml:lang. Da das lang-Attribut in XHTML jedoch ebenfalls zur Verfügung steht, existieren also zwei Attribute für die gleiche Sache. XHTML-Parser bevorzugen im Zweifelsfall das Attribut xml:lang, das aber von reinen HTML-Parsern nicht erkannt wird. Notieren Sie deshalb in der Praxis stets beide Varianten, falls Sie das Attribut verwenden.

Beispiel für HTML 4.01:

<html lang="de">
<!-- Inhalt der Datei -->
</html>

Entsprechendes Beispiel für XHTML 1.0:

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<!-- Inhalt der Datei -->
</html>

Entsprechendes Beispiel für XHTML 1.1:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<!-- Inhalt der Datei -->
</html>

Erläuterung:

Die Sprache des Dokuments wird durch die Angabe lang="de" im html-Element dokumentweit festgelegt. Im XHTML 1.0-Beispiel kommt, neben der nach oben Namensraumangabe, zusätzlich das Attribut xml:lang="de" hinzu. Die Reihenfolge der Attribute spielt keine Rolle. In XHTML 1.1 entfällt das lang-Attribut zugunsten von xml:lang.

Unterschied: Inhalt von Script- und Style-Bereichen

In HTML 4.0 ist der Inhalt der Elemente Seite script und Seite style als "CDATA" festgelegt, während er in XHTML als "PCDATA" behandelt wird. Im Klartext bedeutet das, dass bei HTML 4.0 innerhalb eines Seite Script-Bereichs oder Seite Style-Bereichs HTML-eigene Zeichen wie <, >, & und " nicht Seite maskiert werden müssen. Nicht so in XHTML. Wenn Sie beispielsweise in einem JavaScript innerhalb einer Bedingung vergleichen, ob ein Wert kleiner oder größer als ein anderer Wert ist, müssen Sie die spitzen Klammern außerhalb einer Zeichenkette notieren und können sie daher an der Stelle auch nicht maskieren. Um das Problem zu lösen, können Sie das Script in einen Seite CDATA-Abschnitt anschließen. Dies ist eine XML-typische Notation.

Da XML-Parser HTML-Kommentare (und damit auch den enthaltenen JavaScript-Code) entfernen dürfen, sollte auf die früher übliche Auskommentierung des Scripts verzichtet werden, die für die heute verwendeten Browser auch nicht mehr erforderlich ist.

Beispiel für HTML 4.01:

<script type="text/javascript">
<!--
  /* JavaScript-Kommentar: jetzt folgt ein kleines Script */
  if (parseInt(navigator.appVersion) < 5)
    alert("Oh, ein sehr alter Browser");
  /* und damit ist das Script auch schon zu ende */
//-->
</script>

Entsprechendes Beispiel für XHTML 1.0:

<script type="text/javascript">
/* <![CDATA[ */
  /* JavaScript-Kommentar: jetzt folgt ein kleines Script */
  if (parseInt(navigator.appVersion) < 5)
    alert("Oh, ein sehr alter Browser");
  /* und damit ist das Script auch schon zu ende */
/* ]]> */
</script>

Erläuterung:

Der "CDATA"-Abschnitt beginnt mit <![CDATA[ und endet mit ]]>. Ohne diese Umklammerung würde ein XML-Parser das <-Zeichen innerhalb des Scripts als Fehler ankreiden. Damit der Browser die Anfang- und Endmarkierung des CDATA-Abschnitts nicht als JavaScript-Code zu interpretieren versucht, werden sie durch Seite JavaScript-Kommentare vor ihm versteckt. Den Inhalt von style-Elementen können Sie ebenso umschließen und analog die Markierungen mit Seite CSS-Kommentaren vor dem CSS-Parser verbergen.

Beachten Sie:

Um Fehler bei JavaScript-Interpretern zu vermeiden, bleibt die Möglichkeit, Seite JavaScript in separaten Dateien zu notieren. Auch bei Stylesheets besteht die Möglichkeit, Seite Formate zentral in einer separaten CSS-Datei zu definieren.

Unterschied: Ausnahmen von Verschachtelungsregeln

In der Dokumenttyp-Definition von HTML 4.0 sind einige Ausnahmen bei Verschachtelungsregeln für Elemente definiert. Dies ist beispielsweise bei dem a-Element nötig, das kein anderes a-Element enthalten darf. Die DTD kann zwar festgelegen, dass ein a-Element nicht direkt ein a-Element enthalten darf, sodass <a><a>...</a></a> nicht erlaubt ist. Ein a-Element darf jedoch andere Elemente enhalten, die ihrerseits ein a-Element enthalten dürfen, z.B. span. In diesem Fall greifen die normalen Regeln nicht und es ist eine Ausnahmeregel nötig, um z.B. <a><span><a>...</a></span></a> zu verbieten.

Mit Hilfe von SGML ist die Formulierung solcher Ausnahmen möglich. So ist beispielsweise festgelegt, dass ein a-Element auch als indirektes Kindelement kein anderes a-Element enthalten darf. XML dagegen bietet keine Möglichkeit, solche Ausnahmen zu formulieren. In den XML-basierten Dokumenttyp-Definitionen von XHTML fehlen solche Verschachtelungsverbote daher. Somit ist z.B. <a><a>...</a></a> gemäß den Regeln der DTDs von XHTML zunächst erlaubt. Um eine möglichst hunderprozentige Kompatibilität zwischen HTML und XHTML zu erreichen, blieb dem W3-Konsortium nur der Ausweg, diese Verschachtelungsverbote verbal als "normativen Anhang" zu den DTDs zu erklären.

Folgende Verschachtelungsregeln sind betroffen:

  • a-Elemente dürfen keine weiteren a-Elemente enthalten.
  • pre-Elemente dürfen keine Elemente img, object, big, small, sub oder sup enthalten.
  • button-Elemente dürfen keine Elemente input, select, textarea, label, button, form, fieldset, iframe oder isindex enthalten.
  • label-Elemente dürfen keine weiteren label-Elemente enthalten.
  • form-Elemente dürfen keine weiteren form-Elemente enthalten.

Beachten Sie:

Wenn Sie Ihr XHTML-Dokument z.B. mit dem englischsprachige Seite W3C-Validator auf syntaktische Korrektheit prüfen, werden solche Verschachtelungsfehler nicht gefunden, denn dieser Validator prüft das Dokument unter Berücksichtigung der Dokumenttyp-Definition. Alternativ können Sie den englischsprachige Seite XHTML 1.0 Schema-Validator verwenden, der neben anderen strengeren Tests die Einhaltung der genannten Verschachtelungsregeln überprüft.

XHTML 1.0 Beispiel eines XHTML-Dokuments

Das folgende Beispiel zeigt ein vollständiges XHTML-Dokument, in dem Sie die Unterschiede zu HTML noch einmal im Zusammenhang sehen können. Sie können das zugehörige Anzeigebeispiel einmal als Datei mit der Endung .htm, einmal als Datei mit der Endung .xhtml und einmal als Datei mit der Endung .xml aufrufen, um selber zu testen, was in Ihrem Browser dann passiert. Es handelt sich um exakt den gleichen Inhalt, nur die Dateinamen sind unterschiedlich.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (beispiel.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (beispiel.xhtml)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (beispiel.xml)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Wenn HTML zu XHTML wird</title>
</head>
<body>

<h1><a name="start" id="start">Wenn HTML zu XHTML wird</a></h1>

<p>Dann m&uuml;ssen alle Elemente mit Inhalt ein End-Tag haben.</p>

<p>Leere Elemente<br />m&uuml;ssen einen Schr&auml;gstrich am Ende haben.</p>

<hr noshade="noshade" />
<p>Leere Attribute erhalten ihren eigenen Namen als Wert zugewiesen.</p>

<p><a href="#start">Verweise zu Ankern</a> springen zum Zielelement
aufgrund des id-Attributs, nicht das name-Attributs.</p>

<script type="text/javascript" src="zeitstempel.js"></script>
<!-- So werden Scripts am sichersten eingebunden. -->

</body>
</html>

Erläuterung:

Bei der Dokumenttyp-Deklaration ist nur xhtml1-transitional.dtd als URI notiert, ohne weitere Web-Adresse oder Pfadangabe. Das liegt daran, dass die DTD mit dem Namen xhtml1-transitional.dtd im gleichen Verzeichnis wie das Dokument selber liegt.

nach oben
weiter | Seite Modularisierung von XHTML und XHTML 1.1
zurück | Seite Event-Handler für Scripts
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von XHTML und HTML

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / XHTML und HTML / Modularisierung von XHTML und XHTML 1.1

SELFHTML

Modularisierung von XHTML und XHTML 1.1
Informationsseite

nach unten Allgemeines zur Modularisierung von XHTML
nach unten Die Module von XHTML 1.1
nach unten

Allgemeines zur Modularisierung von XHTML

HTML 4.0 und XHTML 1.0 sind - auch wenn sie von Unwissenden gerne wegen ihrer Schlichtheit belächelt werden - eigentlich sehr umfangreiche Sprachen mit einem nicht ganz einfachen Regelwerk aus über 80 Elementen, ihren möglichen Attributen, Verschachtelungsregeln, und einer ganzen Reihe benannter Zeichen. Beide Sprachen bieten damit ein brauchbares Arsenal für Hypertext-Dokumente an. Egal ob einfache Portrait-Homepages oder wissenschaftliche Abhandlungen - der Strukturvorrat von HTML/XHTML ist durchaus reichhaltig und für die meisten Zwecke ausreichend. Allerdings nicht für alle Zwecke.

Der Umfang beider Sprachen und ihre nicht ganz trivialen Regeln stellen andererseits hohe Anforderungen an die auslesende Software und deren Darstellungsfähigkeiten. Von einem modernen Web-Browser, der auf einem modernen PC läuft, kann man diese Fähigkeiten verlangen. Aber von Software, die beispielsweise in einem Handy, einem Pocket-Computer oder einem simplen Sprachwiedergabegerät läuft, kann man nicht unbedingt die gleichen Fähigkeiten erwarten.

HTML/XHTML decken also einerseits trotz ihres beträchtlichen Sprachumfangs nicht alle denkbaren Wünsche ab, und andererseits sind sie für manche Zwecke schlichtweg überdimensioniert. Aus diesem Grund gehen die Überlegungen des W3-Konsortiums in die Richtung, zumindest bei XHTML zu ermöglichen, dass sowohl abgespecktere als auch erweiterte Sprachvarianten davon möglich sind. Handy-Software könnte dann beispielsweise eine abgespecktere Sprachvariante interpretieren, während ein Mathematiker, der seine Arbeit publizieren möchte, XHTML um Elemente aus einer speziellen Auszeichnungssprache für mathematische Formeln erweitern kann.

Das Konzept zum Abspecken und Erweitern von XHTML wird als Modularisierung bezeichnet. Dass es nur bei XHTML und nicht bei HTML angewendet werden soll, liegt daran, dass für die Modularisierung XML-typische Techniken angewendet werden sollen. Die Modularisierung stellt nämlich bestimmte formale Regeln zur Verfügung, die abgespeckte oder erweiterte Varianten von XHTML einhalten müssen.

Das W3-Konsortium bietet Beschreibungen an, wie Sie zum Erstellen regelkonformer eigener Module vorgehen müssen. Über die englischsprachige Seite W3-Einstiegsseite zu HTML/XHTML können Sie entsprechende aktuelle Beschreibungen aufrufen. Um die Beschreibungen zu verstehen, benötigen Sie allerdings gute Kenntnisse im Erstellen eigener DTDs. Im vorliegenden Dokument werden im XML-Unterkapitel Kapitel Dokumenttyp-Definitionen (DTDs) die nötigen Grundlagen dazu beschrieben.

Neben der Möglichkeit, XHTML für eigene Zwecke zu modularisieren, macht das W3-Konsortium aber auch selber von dieser Möglichkeit Gebrauch. Dazu hat man zunächst die normativen Grundlagen zur Modularisierung geschaffen. Das entsprechende Dokument mit dem Titel englischsprachige Seite Modularization of XHTML liegt als Empfehlung (Recommendation) des W3-Konsortiums vor. Ausgehend davon hat man XHTML 1.1 als modul-basiertes Sprachensystem entworfen. Auch XHTML 1.1 liegt als Empfehlung des W3-Konsortiums vor, unter dem Titel englischsprachige Seite XHTML 1.1 - Module-based XHTML. XHTML 1.1 trennt sich endgültig von den in XHTML 1.0 und HTML 4.0 als deprecated (missbilligt) eingestuften Elementen und Attributen. Es entspricht nur noch der Sprachvariante Strict. Damit fallen zugleich auch die Frames wieder aus dem Konzept.

Inwieweit sich das Konzept der Modularisierung durchsetzen wird, bleibt abzuwarten. Denn wer sich mit dem Design eigener Auszeichnungssprachen befasst, kann schließlich auch direkt die Möglichkeiten von XML nutzen, um entsprechende Sprachen zu entwerfen. Und "einfacher" als XML ist das Konzept der Modularisierung sicher nicht - im Gegenteil: es setzt im Grunde die Beherrschung von XML voraus und reizt dessen Möglichkeiten aus.

Die Module von XHTML 1.1

Die folgende Tabelle listet die Module auf, aus denen XHTML 1.1 besteht. Für die Praxis als XHTML-Anwender hat diese Modularisierung keinen Einfluss. Sie können Ihre XHTML-Dokumente schreiben wie gewohnt - mit der Einschränkung, dass Sie nichts mehr verwenden dürfen, was noch aus den Seite HTML-Varianten Transitional und Frameset stammt.

Name des Moduls | Elemente | Erläuterung
Structure | body head html title | Modul für die Elemente, die das Grundgerüst eines XHTML-Dokuments bilden.
Text | abbr acronym address blockquote br cite code dfn div em h1 h2 h3 h4 h5 h6 kbd p pre q samp span strong var | Modul für alle Block- und Inline-Elemente, die Text enthalten können und logische Auszeichnungen darstellen, also keinen Hinweis auf ihre visuelle Darstellung enthalten.
Hypertext | a | Modul für Anker und Verweise innerhalb des Dokuments.
List | dl dt dd ol ul li | Modul für nummerierte Listen, Aufzählungslisten und Definitionslisten (Glossarlisten).
Object | object param | Modul für Multimedia-Referenzen.
Presentation | b big hr i small sub sup tt | Modul für Elemente, die Text enthalten können und physische Auszeichnungen darstellen, also einen Hinweis auf ihre visuelle Darstellung enthalten.
Edit | del ins | Modul für Änderungsmarkierungen im Text.
Bidirectional Text | bdo | Modul für mehrsprachige Dokumente, die Text in Sprachen mit unterschiedlicher Schreibrichtung enthalten.
Forms | button fieldset form input label legend select optgroup option textarea | Modul für Formulare und Formularelemente.
Table | caption col colgroup table tbody td tfoot th thead tr | Modul für Tabellen und Tabellenelemente.
Image | img | Modul für Grafikreferenzen.
Client-side Image Map | area map | Modul für Grafiken mit verweis-sensitiven Flächen, vom Browser allein darzustellen.
Server-side Image Map | ismap (bei img) | Modul für Grafiken mit verweis-sensitiven Flächen, vom Browser in Kommunikation mit dem Web-Server darzustellen.
Intrinsic Events | on* (Event-Handler-Attribute) | Modul für alle Event-Handler, die als Attribut in Elementen notiert werden können und eine Schnittstelle für Script-Sprachen bilden.
Meta-Information | meta | Modul für Meta-Daten für Suchmaschinen und Browser.
Scripting | noscript script | Modul für Script-Bereiche und Bereiche für Browser, die keine Scripts ausführen können.
Stylesheet | style (Element) | Modul für Bereiche, in denen zentrale Stylesheet-Formate definiert werden.
Style Attribute | style (Attribut) | Modul für das style-Attribut.
Link | link | Modul für logische Beziehungen zu anderen Dateien.
Base | base | Modul für Adressbasis und Zielfensterbasis.
Ruby Annotation | ruby rbc rtc rb rt rp | Modul für Ruby-Text. Die entsprechenden Elemente sind neu. Ruby-Text ist eine Textform, die in fernöstlichen Sprachen verwendet wird, um Silben- oder Wortzeichen mit zusätzlichen Bedeutungshinweisen zu versehen.

nach oben
weiter | Seite HTML-Elementreferenz
zurück | Seite Unterschiede zwischen XHTML und HTML
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von XHTML und HTML

© 2007 Seite Impressum


SELFHTML: HTML / Referenz

SELFHTML

HTML-Referenz
Kapitelseite

Dieser Abschnitt enthält wichtige Übersichten, die im beschreibenden Teil der Dokumentation in dieser Vollständigkeit nicht möglich sind. Der Abschnitt eignet sich nur zum Nachschlagen, nicht zum Einarbeiten in die Materie.
Der Abschnitt besteht aus folgenden Seiten:

Seite HTML-Elementreferenz
Seite HTML-Attribut-Referenz
Seite HTML-Zeichenreferenz
Seite HTML-Varianten (Strict, Transitional, Frameset)

nach oben

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Referenz /HTML-Elementreferenz

SELFHTML

HTML-Elementreferenz
Informationsseite

nach unten Allgemeines zur HTML-Elementreferenz
nach unten Block-Elemente
nach unten Inline-Elemente
nach unten #PCDATA

Elemente

nach unten a
nach unten abbr
nach unten acronym
nach unten address
nach unten applet
nach unten area
nach unten b
nach unten base
nach unten basefont
nach unten bdo
nach unten big 		nach unten blockquote
nach unten body
nach unten br
nach unten button
nach unten caption
nach unten center
nach unten cite
nach unten code
nach unten col
nach unten colgroup
nach unten dd 		nach unten del
nach unten dfn
nach unten dir
nach unten div
nach unten dl
nach unten dt
nach unten em
nach unten fieldset
nach unten font
nach unten form
nach unten frame 		nach unten frameset
nach unten h1-h6
nach unten head
nach unten hr
nach unten html
nach unten i
nach unten iframe
nach unten img
nach unten input
nach unten ins
nach unten isindex 		nach unten kbd
nach unten label
nach unten legend
nach unten li
nach unten link
nach unten map
nach unten menu
nach unten meta
nach unten noframes
nach unten noscript
nach unten object 		nach unten ol
nach unten optgroup
nach unten option
nach unten p
nach unten param
nach unten pre
nach unten q
nach unten s
nach unten samp
nach unten script
nach unten select 		nach unten small
nach unten span
nach unten strike
nach unten strong
nach unten style
nach unten sub
nach unten sup
nach unten table
nach unten tbody
nach unten td
nach unten textarea 		nach unten tfoot
nach unten th
nach unten thead
nach unten title
nach unten tr
nach unten tt
nach unten u
nach unten ul
nach unten var
nach unten

Allgemeines zur HTML-Elementreferenz

Ein HTML-Element besteht meistens aus einem Anfangs- und einem End-Tag. So besteht z.B. das Element body aus einem Anfangs-Tag <body> und einem End-Tag </body>. Der Bereich zwischen Anfangs- und End-Tag nimmt den Inhalt des Elements auf. Er kann weitere HTML-Elemente enthalten.

Die HTML-Elementreferenz listet für jedes HTML-Element auf, in welchen anderen HTML-Elementen es vorkommen kann, und welche anderen HTML-Elemente es enthalten kann. Bei jedem aufgeführten Element führt ein Verweis zu den jeweiligen Attributen des Elements, die in der Attribut-Referenz behandelt werden.

In der HTML-Elementreferenz wird nur der HTML-Standard nach Version 4.01 berücksichtigt. Browser-eigene Abweichungen sowie browser-spezifische HTML-Elemente, die im Standard nicht vorkommen, sind in der Referenz nicht berücksichtigt.

Block-Elemente

Bedeutung | Block-Elemente erzeugen einen eigenen Absatz im Textfluss. Je nach Elementtyp kann der Browser dabei automatisch einen größeren Abstand zum vorangehenden Inhalt einfügen. So erzeugen die Browser beispielsweise beim p-Element einen sichtbaren Abstand, damit die Absatzschaltung vom einfachen Zeilenumbruch unterscheidbar ist. Beim div-Element dagegen wird beispielsweise einfach eine neue Zeile begonnen. Block-Elemente können in der Regel normalen Text und nach unten Inline-Elemente enthalten. Einige Block-Elemente können auch andere Block-Elemente enthalten. Ausnahmen von der Regel werden bei den Beschreibungen zu den einzelnen Elementen behandelt.
Elemente | Folgende Elemente gehören zu den Block-Elementen: address | blockquote | center | del | dir | div | dl | fieldset | form | h1-6 | hr | ins | isindex | menu | noframes | noscript | ol | p | pre | table | ul (center, dir, isindex, menu und noframes nur bei Seite HTML Transitional)

Inline-Elemente

Bedeutung | Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Inline-Elemente sind als untergeordnete, "innere" Elemente für nach oben Block-Elemente gedacht. Sie können in den meisten Fällen normalen Text und weitere Inline-Elemente enthalten, jedoch keine Block-Elemente. Ausnahmen oder Einschränkungen werden bei den Beschreibungen zu den einzelnen Elementen behandelt.
Elemente | Folgende Elemente gehören zu den Inline-Elementen: a | abbr | acronym | applet | b | basefont | bdo | big | br | button | cite | code | del | dfn | em | font | i | img | ins | input | iframe | kbd | label | map | object | q | samp | script | select | small | span | strong | sub | sup | textarea | tt | var (applet, basefont, font, iframe, u, s und strike nur bei Seite HTML Transitional)

#PCDATA

#PCDATA steht für parsed character data, zu deutsch: vom Seite HTML-Parser analysierte Zeichendaten. Es handelt sich in HTML normalerweise um Text, der innerhalb eines Elements, also zwischen Anfangs- und End-Tag notiert werden kann. Solcher Text kann aus Zeichen bestehen, die in der Seite Zeichenreferenz genannt sind. Benannte Zeichen wie &uuml; sind also ebenso erlaubt wie numerische Notationen von der Art &#x20AC; oder &#8364;. Solche Notationen werden erkannt und umgesetzt. PCDATA-Zeichendaten dürfen jedoch selbst nicht aus Tags bestehen. Ein Element, welches nur solche Zeichendaten enthalten darf, darf also keine HTML-Elemente enthalten. Dies gilt zum Beispiel für die Elemente nach unten title und nach unten textarea.

a

Bedeutung | Definiert einen Anker oder einen Hyperlink - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] (außer a | button) | td | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente] (außer a)
Attribute | siehe Seite Attribute

abbr

Bedeutung | Markiert eine Abkürzung - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

acronym

Bedeutung | Markiert eine Abkürzung - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

address

Bedeutung | Markiert eine Adresse - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente] | p (p nur bei Seite HTML Transitional)
Attribute | siehe Seite Attribute

applet

Bedeutung | Fügt ein Java-Applet ein - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] (außer pre) | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf folgende anderen HTML-Elemente enthalten: [Block-Elemente] | [Inline-Elemente] | param
Attribute | siehe Seite Attribute

area

Bedeutung | Definiert einen Ausschnitt für eine verweis-sensitive Grafik - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: map
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

b

Bedeutung | Markiert fett gedruckten Text - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

base

Bedeutung | Definiert dokumentweit gültige Angaben für Zielfenster und Basis-URIs von Verweisen - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: head
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

basefont

Bedeutung | Bestimmt Basis-Schriftmerkmale für nachfolgenden Text - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] (außer pre) | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

bdo

Bedeutung | Markiert eine Änderung der Textrichtung bei Sprachen mit anderer Schreibrichtung - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

big

Bedeutung | Markiert Text, der größer dargestellt werden soll als normal - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] (außer pre) | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

blockquote

Bedeutung | Markiert ein Zitat - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf enthalten: 1. nach Seite HTML Strict: [Block-Elemente] | script 2. nach Seite HTML Transitional: #PCDATA und [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

body

Bedeutung | Markiert den Dokumentkörper und damit den Bereich der darzustellenden Daten - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: html | noframes (noframes nur bei Seite HTML Frameset)
Kindelemente | Darf enthalten: 1. nach Seite HTML Strict: [Block-Elemente] | script 2. nach Seite HTML Transitional: #PCDATA und [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

br

Bedeutung | Erzeugt einen Zeilenumbruch - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

button

Bedeutung | Erzeugt einen Klick-Button - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] (außer button)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: abbr | acronym | address | applet | b | basefont | bdo | big | blockquote | br | center | cite | code | dfn | dl | dir | div | em | font | h1-6 | hr | i | img | kbd | map | menu | noframes | noscript | object | ol | p | pre | q | samp | script | small | span | strong | sub | sup | table | tt | ul | var
Attribute | siehe Seite Attribute

caption

Bedeutung | Setzt eine Tabellenüberschrift/Tabellenunterschrift - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: table
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

center

Bedeutung | Markiert einen Bereich, der zentriert dargestellt wird - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

cite

Bedeutung | Markiert ein Zitat - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

code

Bedeutung | Markiert Text als Quelltext einer Computersprache - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

col

Bedeutung | Definiert Daten für eine Tabellenspalte - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: colgroup | table
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

colgroup

Bedeutung | Definiert eine Gruppe von Tabellenspalten - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: table
Kindelemente | Darf nur folgendes andere HTML-Element (einfach oder mehrfach) enthalten: col
Attribute | siehe Seite Attribute

dd

Bedeutung | Markiert in einer Definitionsliste eine Definition zu einem Term - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: dl
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

del

Bedeutung | Markiert Text als gelöscht im Sinne von Änderungsmarkierung - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente] bei Verwendung als Block-Element | [Inline-Elemente]
Attribute | siehe Seite Attribute

dfn

Bedeutung | Markiert eine Definition - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

dir

Bedeutung | Markiert eine Verzeichnisliste - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Muss folgendes andere HTML-Element enthalten (ein- oder mehrmal): li (Hinweis: li darf in diesem Zusammenhang keine Block-Elemente enthalten)
Attribute | siehe Seite Attribute

div

Bedeutung | Markiert einen allgemeinen Bereich - siehe Seite Beschreibung.
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

dl

Bedeutung | Markiert eine Definitionsliste - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf folgende anderen HTML-Elemente enthalten: dd | dt
Attribute | siehe Seite Attribute

dt

Bedeutung | Markiert in einer Definitionsliste einen zu definierenden Term - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: dl
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

em

Bedeutung | Markiert Text als emphatisch - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

fieldset

Bedeutung | Markiert eine Gruppe von Formularelementen - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf neben #PCDATA folgende HTML-Elemente enthalten: legend, gefolgt von: [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

font

Bedeutung | Markiert Text mit Schriftgröße, Schriftfarbe und Schriftart - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] (außer pre) | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

form

Bedeutung | Definiert ein Formular - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | 1. nach Seite HTML Strict: [Block-Elemente] (außer form) | script 2. nach Seite HTML Transitional: [Block-Elemente] (außer form) | [Inline-Elemente]
Attribute | siehe Seite Attribute

frame

Bedeutung | Definiert ein Frame-Fenster - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in der Variante Seite frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: frameset
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

frameset

Bedeutung | Definiert ein Frameset - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in der Variante Seite frameset
Elternelemente | Darf innerhalb des folgenden HTML-Elements vorkommen: html
Kindelemente | Darf folgende HTML-Elemente enthalten: frame | frameset | noframes
Attribute | siehe Seite Attribute

h1-h6

Bedeutung | Markiert eine Überschrift 1. bis 6. Ordnung - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

head

Bedeutung | Markiert den Kopfbereich einer HTML-Datei - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb des folgenden HTML-Elements vorkommen: html
Kindelemente | muss folgendes HTML-Element enthalten: title Kann darüber hinaus folgende HTML-Elemente enthalten: base | isindex | link | meta | object | script | style (isindex nur bei Seite HTML Transitional)
Attribute | siehe Seite Attribute

hr

Bedeutung | Erzeugt eine horizontale Trennlinie - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

html

Bedeutung | Wurzelelement einer HTML-Datei - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Hat keine möglichen Elternelemente
Kindelemente | 1. nach Seite HTML Strict und Seite HTML Transitional folgende HTML-Elemente: head, gefolgt von body 2. nach Seite HTML Frameset folgende HTML-Elemente: head, gefolgt von frameset
Attribute | siehe Seite Attribute

i

Bedeutung | Markiert kursiv gedruckten Text - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

iframe

Bedeutung | Definiert ein eingebettetes Fenster - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] (außer button) | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

img

Bedeutung | Referenziert eine Grafik - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] (außer pre) | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

input

Bedeutung | Erzeugt ein Formularelement, Typ wird durch Attribut bestimmt - siehe Seite Beschreibung (Eingabefelder), Seite Beschreibung (Radio-Buttons), Seite Beschreibung (Checkboxen), Seite Beschreibung (Klick-Buttons), Seite Beschreibung (Datei-Upload-Felder), Seite Beschreibung (versteckte Elemente), Seite Beschreibung (Submit-/Resetbuttons).
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] (außer button) | body (body nur bei Seite HTML Transitional)
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

ins

Bedeutung | Markiert Text als eingefügt im Sinne von Änderungsmarkierung - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente] bei Verwendung als Block-Element | [Inline-Elemente]
Attribute | siehe Seite Attribute

isindex

Bedeutung | Erzeugt ein einzeiliges Eingabefeld - siehe Seite Beschreibung
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | center | dd | del | div | fieldset | form | head | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

kbd

Bedeutung | Markiert Text als Tastatureingabe - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

label

Bedeutung | Ordnet Text einem bestimmten Formularfeld zu - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] (außer button) | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente] (außer label)
Attribute | siehe Seite Attribute

legend

Bedeutung | Definiert eine Überschrift für eine Gruppe von Formularelementen - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb der folgenden HTML-Elements vorkommen: fieldset
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

li

Bedeutung | Markiert einen Listeneintrag - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: dir | menu | ol | ul
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: 1. bei dir und menu: [Inline-Elemente] 2. bei ol und ul: [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

link

Bedeutung | Definiert logische Beziehungen zu anderen Dateien - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: head
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

map

Bedeutung | Markiert einen Definitionsbereich für verweis-sensitive Grafiken - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente]
Kindelemente | Muss eines der folgenden anderen HTML-Elemente enthalten: [Block-Elemente] | area
Attribute | siehe Seite Attribute

menu

Bedeutung | Markiert eine Menüliste - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Muss folgendes andere HTML-Element enthalten (ein- oder mehrmal): li (Hinweis: li darf in diesem Zusammenhang keine Block-Elemente enthalten)
Attribute | siehe Seite Attribute

meta

Bedeutung | Definiert Meta-Daten wie Kurzbeschreibung und Stichwörter für eine Datei - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: head
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

noframes

Bedeutung | Markiert einen Bereich für den Fall, dass keine Frames angezeigt werden können - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | frameset | iframe | ins | li | map | noscript | object | td | th
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: 1. nach Seite HTML Frameset: body 2. nach Seite HTML Transitional: [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

noscript

Bedeutung | Markiert einen Bereich für den Fall, dass ein Script nicht ausgeführt werden kann - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf enthalten: 1. nach Seite HTML Strict: [Block-Elemente] 2. nach Seite HTML Transitional: #PCDATA und [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

object

Bedeutung | Definiert ein Multimediaobjekt - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] (außer pre) | [Inline-Elemente] | head
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente] | [Inline-Elemente] | param
Attribute | siehe Seite Attribute

ol

Bedeutung | Markiert eine nummerierte Liste - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf folgendes andere HTML-Element enthalten (ein- oder mehrmal): li
Attribute | siehe Seite Attribute

optgroup

Bedeutung | Markiert eine Gruppe von Einträgen in einer Menüstruktur - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: select
Kindelemente | Darf folgendes andere HTML-Element enthalten (ein- oder mehrmal): option
Attribute | siehe Seite Attribute

option

Bedeutung | Markiert einen Eintrag in einer Auswahlliste - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: select | optgroup
Kindelemente | Darf nichts als #PCDATA enthalten.
Attribute | siehe Seite Attribute

p

Bedeutung | Markiert einen Textabsatz - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: address | applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

param

Bedeutung | Definiert Parameter eines Multimediaobjekts oder Java-Applets - siehe Seite Beschreibung (Objekte), Seite Beschreibung (Java-Applets).
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | object
Kindelemente | Leeres Element (Standalone-Tag), darf keinen Inhalt haben
Attribute | siehe Seite Attribute

pre

Bedeutung | Formatiert einen Bereich wie im Editor eingegeben (präformatierter Text) - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: a | abbr | acronym | applet | b | bdo | br | button | cite | code | dfn | em | i | input | iframe | kbd | label | map | q | samp | script | select | span | strong | textarea | tt | var
Attribute | siehe Seite Attribute

q

Bedeutung | Markiert ein Zitat - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

s

Bedeutung | Markiert Text als durchgestrichen - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

samp

Bedeutung | Markiert Text als Beispiel - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

script

Bedeutung | Definiert einen Bereich für Scripts (z.B. JavaScript) - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | head | body
Kindelemente | Darf nichts als #PCDATA enthalten, die als Script-Code zu interpretieren sind
Attribute | siehe Seite Attribute

select

Bedeutung | Definiert eine Auswahlliste - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] (außer button) | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: optgroup | option
Attribute | siehe Seite Attribute

small

Bedeutung | Markiert Text, der kleiner dargestellt wird als normal - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] (außer pre) | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

span

Bedeutung | Markiert einen inline-Bereich zur Formatierung, z.B. mit CSS - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

strike

Bedeutung | Markiert einen Text als durchgestrichen - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

strong

Bedeutung | Markiert einen Text als betont - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

style

Bedeutung | Markiert einen Bereich für Stylesheet-Definitionen, z.B. in CSS - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: head
Kindelemente | Darf nichts als #PCDATA enthalten, die als Style-Definitionen interpretiert werden
Attribute | siehe Seite Attribute

sub

Bedeutung | Markiert einen Text als tiefgestellt - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] (außer pre) | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

sup

Bedeutung | Markiert einen Text als hochgestellt - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] (außer pre) | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

table

Bedeutung | Erzeugt eine Tabelle - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf folgende anderen HTML-Elemente (in dieser Reihenfolge) enthalten: caption (optional), col oder colgroup (optional), thead (optional), tfoot (optional), tbody (ein oder mehrere - wenn nur einmal benötigt, darf tbody auch entfallen, weshalb die herkömmliche Konstruktion, wonach table direkt aus tr-Elementen besteht, ebenfalls zulässig ist)
Attribute | siehe Seite Attribute

tbody

Bedeutung | Bestimmt in einer Tabelle den Tabellenkörper - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: table
Kindelemente | Darf nur folgendes andere HTML-Element (einfach oder mehrfach) enthalten: tr
Attribute | siehe Seite Attribute

td

Bedeutung | Markiert eine Tabellenzelle - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: tr
Kindelemente | Darf folgende andere HTML-Elemente enthalten: [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

textarea

Bedeutung | Definiert ein mehrzeiliges Eingabefeld - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] (außer button) | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf nichts als #PCDATA enthalten
Attribute | siehe Seite Attribute

tfoot

Bedeutung | Bestimmt in einer Tabelle den Tabellenfuß - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: table
Kindelemente | Darf nur folgendes andere HTML-Element (einfach oder mehrfach) enthalten: tr
Attribute | siehe Seite Attribute

th

Bedeutung | Markiert eine Tabellenkopfzelle - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: tr
Kindelemente | Darf folgende andere HTML-Elemente enthalten: [Block-Elemente] | [Inline-Elemente]
Attribute | siehe Seite Attribute

thead

Bedeutung | Bestimmt in einer Tabelle den Tabellenkopf - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: table
Kindelemente | Darf nur folgendes andere HTML-Element (einfach oder mehrfach) enthalten: tr
Attribute | siehe Seite Attribute

title

Bedeutung | Definiert den Titel einer HTML-Datei - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf nur innerhalb des folgenden HTML-Elements vorkommen: head
Kindelemente | Darf nichts als #PCDATA enthalten.
Attribute | siehe Seite Attribute

tr

Bedeutung | Definiert eine Tabellenzeile - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: table | tbody | tfoot | thead
Kindelemente | Darf folgende anderen HTML-Elemente enthalten: td | th
Attribute | siehe Seite Attribute

tt

Bedeutung | Markiert einen Text, der im Schreibmaschinenstil dargestellt wird - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

u

Bedeutung | Markiert einen Text als unterstrichen - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

ul

Bedeutung | Markiert eine Aufzählungsliste - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: applet | blockquote | body | button | center | dd | del | div | fieldset | form | iframe | ins | li | map | noframes | noscript | object | td | th
Kindelemente | Darf folgendes andere HTML-Element enthalten (ein- oder mehrmal): li
Attribute | siehe Seite Attribute

var

Bedeutung | Markiert einen Text als Variable - siehe Seite Beschreibung.
HTML-Varianten | Erlaubt in den Varianten Seite Strict, Transitional, Frameset
Elternelemente | Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente] | [Inline-Elemente] | body (body nur bei Seite HTML Transitional)
Kindelemente | Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente]
Attribute | siehe Seite Attribute

nach oben
weiter | Seite HTML-Attribut-Referenz
zurück | Seite Modularisierung von XHTML und XHTML 1.1
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von HTML-Referenz

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Referenz /HTML-Attribut-Referenz

SELFHTML

HTML-Attribut-Referenz
Informationsseite

nach unten Allgemeines zur HTML-Attribut-Referenz
nach unten #CDATA
nach unten ID, IDREF oder Name
nach unten Zahl
nach unten Universalattribute

Elemente

nach unten a
nach unten abbr
nach unten acronym
nach unten address
nach unten applet
nach unten area
nach unten b
nach unten base
nach unten basefont
nach unten bdo
nach unten big 		nach unten blockquote
nach unten body
nach unten br
nach unten button
nach unten caption
nach unten center
nach unten cite
nach unten code
nach unten col
nach unten colgroup
nach unten dd 		nach unten del
nach unten dfn
nach unten dir
nach unten div
nach unten dl
nach unten dt
nach unten em
nach unten fieldset
nach unten font
nach unten form
nach unten frame 		nach unten frameset
nach unten h1-h6
nach unten head
nach unten hr
nach unten html
nach unten i
nach unten iframe
nach unten img
nach unten input
nach unten ins
nach unten isindex 		nach unten kbd
nach unten label
nach unten legend
nach unten li
nach unten link
nach unten map
nach unten menu
nach unten meta
nach unten noframes
nach unten noscript
nach unten object 		nach unten ol
nach unten optgroup
nach unten option
nach unten p
nach unten param
nach unten pre
nach unten q
nach unten s
nach unten samp
nach unten script
nach unten select 		nach unten small
nach unten span
nach unten strike
nach unten strong
nach unten style
nach unten sub
nach unten sup
nach unten table
nach unten tbody
nach unten td
nach unten textarea 		nach unten tfoot
nach unten th
nach unten thead
nach unten title
nach unten tr
nach unten tt
nach unten u
nach unten ul
nach unten var
nach unten

Allgemeines zur HTML-Attribut-Referenz

Die meisten Attribute in HTML sind implied (optional), nur einige wenige sind required (im einleitenden HTML-Tag erforderlich). Bei den erforderlichen Attributen gibt es logisch notwendige (das img-Element würde beispielsweise ohne das src-Attribut wenig Sinn haben), aber auch welche, die zum guten HTML-Stil gehören (dass das W3-Konsortium etwa das alt-Attribut beim img-Element als notwendig einstuft, ist ein erzieherischer Akt).

Nicht wenige HTML-Attribute haben die Aufgabe, Elemente zu formatieren, z.B. Attribute wie align (Ausrichtung) oder bgcolor (Hintergrundfarbe). Solche Attribute sind jedoch als deprecated (missbilligt) eingestuft und nur noch in der Seite HTML-Variante Transitional erlaubt. Sie sollen allmählich aus dem HTML-Standard verschwinden, da solche Aufgaben durch Kapitel Stylesheets besser zu lösen sind.

#CDATA

#CDATA steht für character data, zu deutsch: Zeichendaten. Es handelt sich um Text, der keine weiteren HTML-Elemente enthalten kann. In HTML ist das typischerweise Text, der bei einer Wertzuweisung an ein Attribut vorkommt. Solcher Text darf bei HTML 4.0 aus allen Zeichen bestehen, die in der Seite Zeichenreferenz genannt sind. Benannte Zeichen wie &uuml; sind also ebenso erlaubt wie numerische Notationen von der Art &#x20AC; oder &#8364;. Solche Notationen werden erkannt und umgesetzt. HTML-Auszeichnungen, also die Notation von HTML-Elementen, wird in CDATA-Bereichen dagegen nicht erkannt. Das einzige, wonach gesucht wird und was erkannt wird, ist die Zeichenfolge </. Deshalb müssen Sie das Zeichen < in Wertzuweisungen an Attribute unbedingt wie üblich durch &lt; maskieren. Leerzeichen am Beginn oder Ende eines #CDATA-Textbereichs wird normalerweise abgeschnitten.

#CDATA schränkt zwar in keiner Weise ein, welcher Text einem Attribut als Wert zugewiesen wird. Dennoch sind in vielen Fällen nur bestimmte typische Angaben üblich. So fallen Seite Sprachenkürzel beispielsweise auch unter #CDATA, aber erwünscht ist an der entsprechenden Stelle eine Angabe nach einem bestimmten Schema. Meistens werden solche Schemata durch Seite RFCs geregelt. In dieser Attribut-Referenz wird auf solche RFCs hingewiesen.

ID, IDREF oder Name

Der Wert eines solchen Attributs muss mit einem Buchstaben A-Z oder a-z beginnen, und darf in der weiteren Zeichenkette ebenfalls nur Buchstaben A-Z und a-z, Ziffern 0-9, Bindestriche (-), Unterstriche (_), Doppelpunkte (:) und Punkte (.) enthalten. Nicht erlaubt sind Sonderzeichen, Leerzeichen oder andere Interpunktionszeichen.

Werte vom Typ IDREF müssen als Wert den identisch geschriebenen Namen erhalten, der in einem anderen Element, auf das mit dem IDREF-Attribut Bezug genommen wird, mit dem Attribut id vergeben wurde.

Zahl

Als Wert eines solchen Attributs sind nur einfache ganzzahlige Werte erlaubt, die aus mindestens einer Ziffer 0-9 bestehen.

Universalattribute

Universalattribute sind Attribute, die in der Mehrzahl aller HTML-Elemente vorkommen dürfen. Weitere Einzelheiten dazu bei den Beschreibungen zu Kapitel Universalattributen.

Allgemeine Universalattribute

Attribut | Wert | erforderlich? | Bedeutung
class | #CDATA | nein | ordnet dem Element eine Stylesheet-Klasse zu verwendbar in allen Elementen außer: base, basefont, head, html, meta, param, script, style, title
id | [ID] | nein | ordnet dem Element einen individuellen Namen zu verwendbar in allen Elementen außer: base, head, html, meta, script, style, title
style | #CDATA | nein | definiert CSS-Angaben zur Formatierung des Elements verwendbar in allen Elementen außer: base, basefont, head, html, meta, param, script, style, title
title | #CDATA | nein | definiert einen Titel oder eine kurze Beschreibung für das Element, wird in den meisten Browsern bei Mausberührung als "Tooltip" angezeigt verwendbar in allen Elementen außer: base, basefont, head, html, meta, param, script, style, title

Universalattribute zur Internationalisierung

Attribut | Wert | erforderlich? | Bedeutung
dir | ltr | rtl | nein | gibt die Schreibrichtung der im Element verwendeten Landessprache an verwendbar in allen Elementen außer: applet, base, basefont, br, frame, frameset, hr, iframe, param, script
lang | #CDATA | nein | gibt die im Element verwendete Landessprache (nach RFC 1766) an verwendbar in allen Elementen außer: applet, base, basefont, br, frame, frameset, hr, iframe, meta, param, script

Universalattribute für Event-Handler

Attribut | Wert | erforderlich? | Bedeutung
onclick | #CDATA | nein | beim Anklicken des Elements... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
ondblclick | #CDATA | nein | beim doppelten Anklicken des Elements... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmousedown | #CDATA | nein | bei gedrückter Maustaste über dem Element... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmouseup | #CDATA | nein | bei Loslassen der Maustaste über dem Element... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmouseover | #CDATA | nein | beim Überfahren des Elements mit der Maus... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmousemove | #CDATA | nein | beim Ziehen des Elements mit der Maus... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmouseout | #CDATA | nein | beim Verlassen des Elements mit der Maus... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onkeypress | #CDATA | nein | beim Drücken und wieder Loslassen einer Taste... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onkeydown | #CDATA | nein | beim Drücken einer Taste... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onkeyup | #CDATA | nein | beim Loslassen einer Taste... (Script-Code) verwendbar in allen Elementen außer: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title

a

Bedeutung | Definiert einen Anker oder einen Hyperlink - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
accesskey | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt ein einzelnes Zeichen als Hotkey für den Hyperlink
charset | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Kodierung des Verweisziels (nach RFC 2045) an
coords | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | verweis-sensitive Bereiche bei Objekten
href | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja (bei Hyperlinks) | gibt das Verweisziel (nach RFC 2396) an
hreflang | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Landessprache des Verweisziels (nach RFC 1766) an
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja (bei Ankern) | bestimmt den Ankernamen
onblur | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | beim Verlassen des Elements... (Script-Code)
onfocus | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn das Element den Fokus hat... (Script-Code)
rel | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt das Verweisziel als "Vorwärtsverknüpfung"
rev | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt das Verweisziel als "Rückwärtsverknüpfung"
shape | rect | circle | poly | default | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: rect) | verweis-sensitive Bereiche bei Objekten
tabindex | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Tabulator-Reihenfolge für Hyperlinks durch Angabe einer Zahl
target | #CDATA | _blank | _parent | _self | _top | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den Fensternamen des Verweisziels
type | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt den Kapitel MIME-Typ des Verweisziels (laut RFC 2045)
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

abbr

Bedeutung | Markiert eine Abkürzung - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

acronym

Bedeutung | Markiert eine Abkürzung - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

address

Bedeutung | Markiert eine Adresse - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

applet

Bedeutung | Fügt ein Java-Applet ein - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | top | middle | bottom | left | right | Erlaubt in den Varianten Seite Transitional, Frameset | nein | richtet das Applet aus
alt | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt einen Alternativtext, falls das Applet nicht anzeigbar ist
archive | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt eine kommaseparierte Liste mit Archivdateien für das Applet an
code | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Klassendatei des Applets an
codebase | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt den Basis-URI für das Applet an, wenn sich dieses nicht im gleichen Verzeichnis wie die HTML-Datei befindet
height | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | ja | gibt die Anzeigehöhe des Applets in Pixeln oder Prozent an
hspace | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den horizontalen Abstand zwischen Applet und umfließendem Text in Pixeln oder Prozent
name | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt einen Namen für das Applet an
object | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt einen Wert an, der eine Ressource benennt, die das Applet zum Starten benötigt
vspace | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den vertikalen Abstand zwischen Applet und umfließendem Text in Pixeln oder Prozent
width | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | ja | gibt die Anzeigebreite des Applets in Pixeln oder Prozent an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

area

Bedeutung | Definiert einen Ausschnitt für eine verweis-sensitive Grafik - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
alt | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | Kurzbeschreibung des Verweisziels
accesskey | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt ein einzelnes Zeichen als Hotkey für den Hyperlink
coords | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Koordinaten des verweis-sensitiven Bereichs, abhängig von shape
href | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt das Verweisziel (nach RFC 2396) an
nohref | (nohref) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt für einen verweis-sensitiven Bereich, dass keine Aktion damit verbunden ist
onblur | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | beim Verlassen des verweis-sensitiven Bereichs... (Script-Code)
onfocus | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn verweis-sensitiver Bereich den Fokus hat... (Script-Code)
shape | rect | circle | poly | default | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: rect) | bestimmt den Typ eines verweis-sensitiven Bereichs
tabindex | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Tabulator-Reihenfolge für Hyperlinks
target | #CDATA | _blank | _parent | _self | _top | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den Fensternamen des Verweisziels
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

b

Bedeutung | Markiert fett gedruckten Text - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

base

Bedeutung | Definiert dokumentweit gültige Angabe für Basis-URI und Zielfenster von Verweisen - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
href | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | gibt den Basis-URI an
target | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt das Default Zielfenster für Verweise an
Abhängigkeiten | siehe Seite Elemente

basefont

Bedeutung | Bestimmt Basis-Schriftmerkmale für nachfolgenden Text - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
color | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Basis-Schriftfarbe hexadezimal oder als Farbwort an
face | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Basis-Schriftart an
size | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | ja | gibt die Basis-Schriftgröße als Zahl absolut oder relativ mit Vorzeichen an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

bdo

Bedeutung | Markiert eine Änderung der Textrichtung bei Sprachen mit anderer Schreibrichtung - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
dir | ltr | rtl | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | gibt die Schreibrichtung an
Universalattribute class | id | lang | style | title
Abhängigkeiten | siehe Seite Elemente

big

Bedeutung | Markiert Text, der größer dargestellt werden soll als normal - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

blockquote

Bedeutung | Markiert ein Zitat - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
cite | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den URI der Zitatquelle (nach RFC 2396) an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

body

Bedeutung | Markiert den Dokumentkörper und damit den Bereich der darzustellenden Daten - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
alink | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die dokumentweite Farbe für aktivierte Links hexadezimal (in der Form #XXXXXX) oder als Farbwort an
background | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt den URI einer dokumentweiten Hintergrundgrafik (nach RFC 2396) an
bgcolor | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die dokumentweite Hintergrundfarbe hexadezimal (in der Form #XXXXXX) oder als Farbwort an
link | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die dokumentweite Farbe für Links zu noch nicht besuchten Seiten hexadezimal (in der Form #XXXXXX) oder als Farbwort an
onload | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn die Datei geladen ist... (Script-Code)
onunload | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn die Datei verlassen wird... (Script-Code)
text | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die dokumentweite Textfarbe hexadezimal (in der Form #XXXXXX) oder als Farbwort an
vlink | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die dokumentweite Farbe für Links zu bereits besuchten Seiten hexadezimal (in der Form #XXXXXX) oder als Farbwort an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

br

Bedeutung | Erzeugt einen Zeilenumbruch - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
clear | left | all | right | none | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: none) | bestimmt bei Text, der um eine Grafik oder ein Objekt fließt, die Fortsetzungsposition
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

button

Bedeutung | Erzeugt einen Klick-Button - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
accesskey | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt ein einzelnes Zeichen als Hotkey für den Tastaturzugriff auf den Button
disabled | disabled (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt, dass der Button nicht betätigt werden kann
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt einen Namen für den Button
onblur | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | beim Verlassen des verweis-sensitiven Bereichs... (Script-Code)
onfocus | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn verweis-sensitiver Bereich den Fokus hat... (Script-Code)
tabindex | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Tabulator-Reihenfolge für Buttons durch Angabe einer Zahl
type | button | submit | reset | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: submit) | bestimmt den Typ des Buttons
value | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt den Absendewert des Buttons
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

caption

Bedeutung | Setzt eine Tabellenüberschrift/Tabellenunterschrift - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | top | bottom | left | right | Erlaubt in den Varianten Seite Transitional, Frameset | nein | richtet die Tabellenüberschrift aus
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

center

Bedeutung | Markiert einen Bereich, der zentriert dargestellt wird - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

cite

Bedeutung | Markiert ein Zitat - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

code

Bedeutung | Markiert Text als Quelltext einer Computersprache - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

col

Bedeutung | Bestimmt Eigenschaften für eine oder mehrere Tabellenspalten - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | justify | char | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet Tabellenspalten horizontal aus
char | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" das Ausrichtungszeichen
charoff | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" die Position des Ausrichtungszeichens
span | Zahl | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt an, für wie viele Spalten die Angaben gelten
valign | top | middle | bottom | baseline | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet Tabellenspalten vertikal aus
width | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Spaltenbreite
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

colgroup

Bedeutung | Bestimmt Default-Eigenschaften für eine Gruppe von Tabellenspalten - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | justify | char | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt einen Wert für die horizontale Ausrichtung der Tabellenspalten vor
char | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt einen Wert für das Ausrichtungszeichen in Verbindung mit align="char" vor
charoff | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt einen Wert für die Position des Ausrichtungszeichens in Verbindung mit align="char" vor
span | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt an, für wie viele Spalten die Angaben per Default gelten
valign | top | middle | bottom | baseline | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt einen Wert für die vertikale Ausrichtung der Tabellenspalten vor
width | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt einen Wert für die Breite der Tabellenspalten vor
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

dd

Bedeutung | Markiert in einer Definitionsliste eine Definition zu einem Term - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

del

Bedeutung | Markiert Text als gelöscht im Sinne von Änderungsmarkierung - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
cite | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den URI (nach RFC 2396) an, wo Gründe für die Änderung angegeben sind
datetime | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt Datum und Uhrzeit der Änderung nach ISO-Format an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

dfn

Bedeutung | Markiert eine Definition - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

dir

Bedeutung | Markiert eine Verzeichnisliste - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
compact | compact (leeres Attribut) | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt, dass die Liste in engerer Schrift dargestellt wird
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

div

Bedeutung | Markiert einen allgemeinen Bereich - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | justify | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: left) | richtet den Inhalt des Bereichs aus
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

dl

Bedeutung | Markiert eine Definitionsliste - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
compact | compact (leeres Attribut) | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt, dass die Liste in engerer Schrift dargestellt wird
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

dt

Bedeutung | Markiert in einer Definitionsliste einen zu definierenden Term - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

em

Bedeutung | Markiert Text als emphatisch - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

fieldset

Bedeutung | Markiert eine Gruppe von Formularelementen - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

font

Bedeutung | Markiert Text mit Schriftgröße, Schriftfarbe und Schriftart - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
color | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Schriftfarbe hexadezimal (#XXXXXX) oder als Farbwort an
face | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Schriftart an
size | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | ja | gibt die Schriftgröße als Zahl als Zahl absolut oder relativ mit Vorzeichen an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

form

Bedeutung | Definiert ein Formular - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
action | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | gibt einen URI (nach RFC 2396) für die Verarbeitung der Formulardaten an
accept | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | Listet erlaubte MIME-Typen für File-Upload (nach RFC 2045) auf
accept-charset | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | Listet mögliche Kodierungen (nach RFC 2045) für die Formulardaten auf
enctype | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: application/x-www-form-urlencoded) | gibt den MIME-Typ (nach RFC 2045) an, mit dem das Formular übertragen wird
method | get | post | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: get) | bestimmt, wie Formulardaten auf dem Server zur Verfügung stehen
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset (nicht in XHTML 1.0 Strict) | nein | bestimmt einen Namen für das Formular
onreset | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | beim Zurücksetzen des Formulars (Script-Code)
onsubmit | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | beim Absenden des Formulars (Script-Code)
target | #CDATA | _blank | _parent | _self | _top | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den Fensternamen für Antwortausgaben
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

frame

Bedeutung | Definiert ein Frame-Fenster - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
frameborder | 1 | 0 | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: 1) | gibt an, ob das Frame-Fenster einen sichtbaren Rahmen haben soll oder nicht
longdesc | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt einen URI (nach RFC 2396) an, wo eine längere Beschreibung zum Inhalt des Frame-Fensters zu finden ist
marginwidth | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Anzahl Pixel für den Abstand des Fensterinhalts zum linken und rechten Fensterrand an
marginheight | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Anzahl Pixel für den Abstand des Fensterinhalts zum oberen und unteren Fensterrand an
name | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt einen Namen für das Frame-Fenster
noresize | noresize (leeres Attribut) | Erlaubt in den Varianten Seite Transitional, Frameset | nein | wenn angegeben, kann der Anwender die Größe des Frame-Fensters nicht verändern
scrolling | yes | no | auto | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: auto) | bestimmt, ob das Frame-Fenster Scrollbars erhält
src | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt einen URI (nach RFC 2396), die in dem Frame-Fenster angezeigt wird
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

frameset

Bedeutung | Definiert ein Frame-Fenster - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
cols | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: 100%) | bestimmt für ein oder mehrere spaltenartig angeordnete Frame-Fenster die Breitenverhältnisse
onload | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | wenn das Frameset geladen ist... (Script-Code)
onunload | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | wenn das Frameset verlassen wird... (Script-Code)
rows | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: 100%) | bestimmt für ein oder mehrere reihenartig angeordnete Frame-Fenster die Höhenverhältnisse
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

h1-h6

Bedeutung | Markiert eine Überschrift 1. bis 6. Ordnung - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | justify | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: left) | richtet den Inhalt der Überschrift aus
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

head

Bedeutung | Markiert den Kopfbereich einer HTML-Datei - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
profile | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt ein Verzeichnis für Meta-Informationen als URI (nach RFC 2396) an
Universalattribute dir | lang
Abhängigkeiten | siehe Seite Elemente

hr

Bedeutung | Erzeugt eine horizontale Trennlinie - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: left) | richtet die Trennlinie aus
noshade | noshade (leeres Attribut) | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt, dass die Trennlinie flach und ohne 3D-Effekt dargestellt wird
size | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt die Dicke der Trennlinie in Pixeln
width | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt die Länge der Trennlinie in Pixeln oder Prozent
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

html

Bedeutung | Wurzelelement einer HTML-Datei - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
version | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die verwendete HTML-Version an
Universalattribute dir | lang
Abhängigkeiten | siehe Seite Elemente

i

Bedeutung | Markiert kursiv gedruckten Text - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

iframe

Bedeutung | Definiert ein eingebettetes Fenster - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | top | middle | bottom | left | right | Erlaubt in den Varianten Seite Transitional, Frameset | nein | richtet das Frame-Fenster aus
frameborder | 1 | 0 | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: 1) | gibt an, ob das Frame-Fenster einen sichtbaren Rahmen haben soll oder nicht
height | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt die Höhe des Frame-Fensters in Pixeln oder Prozent
longdesc | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt einen URI (nach RFC 2396) an, wo eine längere Beschreibung zum Inhalt des Frame-Fensters zu finden ist
marginwidth | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Anzahl Pixel für den Abstand des Fensterinhalts zum linken und rechten Fensterrand an
marginheight | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Anzahl Pixel für den Abstand des Fensterinhalts zum oberen und unteren Fensterrand an
name | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt einen Namen für das Frame-Fenster
scrolling | yes | no | auto | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: auto) | bestimmt, ob das Frame-Fenster Scrollbars erhält
src | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt einen URI (nach RFC 2396), die in dem Frame-Fenster angezeigt wird
width | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt die Breite des Frame-Fensters in Pixeln oder Prozent
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

img

Bedeutung | Referenziert eine Grafik - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | top | middle | bottom | left | right | Erlaubt in den Varianten Seite Transitional, Frameset | nein | richtet die Grafik aus
alt | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | bestimmt einen Alternativtext, falls die Grafik nicht anzeigbar ist
border | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bewirkt einen Rahmen um die Grafik - Dicke in Pixeln oder Prozent
height | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Anzeigehöhe der Grafik in Pixeln oder Prozent an
hspace | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den horizontalen Abstand zwischen Grafik und umfließendem Text in Pixeln oder Prozent
ismap | ismap (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | Grafik benutzt ein serverseitiges Handling für verweis-sensitive Flächen
longdesc | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt einen URI (nach RFC 2396) an, wo eine Langbeschreibung der Grafik zu finden ist
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset (nicht in XHMTL 1.0 Strict) | nein | bestimmt einen Namen für die Grafik
src | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | gibt die Quelldatei der Grafik an
usemap | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den URI/den Ankernamen eines map-Elements an
vspace | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den vertikalen Abstand zwischen Grafik und umfließendem Text in Pixeln oder Prozent
width | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Anzeigebreite der Grafik an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

input

Bedeutung | Erzeugt ein Formularelement, Typ wird durch Attribut bestimmt - siehe Seite Beschreibung (Eingabefelder), Seite Beschreibung (Radio-Buttons), Seite Beschreibung (Checkboxen), Seite Beschreibung (Klick-Buttons), Seite Beschreibung (Datei-Upload-Felder), Seite Beschreibung (versteckte Elemente), Seite Beschreibung (Submit-/Resetbuttons).
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
accept | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | Listet bei input type="file" erlaubte MIME-Typen für File-Upload (nach RFC 2045) auf
accesskey | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt ein einzelnes Zeichen als Hotkey für das Element
align | top | middle | bottom | left | center | right | Erlaubt in den Varianten Seite Transitional, Frameset | nein | richtet das Element aus
alt | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt einen Alternativtext, falls das Element nicht anzeigbar ist
checked | checked (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt bei type="radio" oder type="checkbox", dass das Element ausgewählt ist
disabled | disabled (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt, dass das Element nicht verändert werden kann
ismap | ismap (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset von HTML 4.01, nicht mehr in XHTML enthalten | nein | Grafik bei input type="image" benutzt ein serverseitiges Handling für verweis-sensitive Flächen
maxlength | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die maximale Anzahl erlaubter Zeichen im Element
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt einen Namen für das Element
onblur | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | beim Verlassen des Elements... (Script-Code)
onchange | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn das Element geändert wurde... (Script-Code)
onfocus | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn das Element den Fokus hat... (Script-Code)
onselect | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn das Element ausgewählt ist... (Script-Code)
readonly | readonly (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt, dass der Wert des Elements nicht verändert werden kann
size | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Anzeigebreite des Elements
src | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt bei input type="image" die Quelldatei der Grafik an
tabindex | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Tabulator-Reihenfolge für Formularelemente durch Angabe einer Zahl
type | text | password | checkbox | radio | submit | reset | file | hidden | image | button | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: text) | bestimmt den Typ des Formularelements
usemap | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt bei input type="image" den URI/den Ankernamen eines map-Elements an
value | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt den Wert des Elements
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

ins

Bedeutung | Markiert Text als eingefügt im Sinne von Änderungsmarkierung - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
cite | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den URI (nach RFC 2396) an, wo Gründe für die Änderung angegeben sind
datetime | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt Datum und Uhrzeit der Änderung nach ISO-Format an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

isindex

Bedeutung | Erzeugt ein einzeiliges Eingabefeld - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
prompt | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den Labeltext des Elements
Universalattribute id | class | style | title | dir | lang
Abhängigkeiten | siehe Seite Elemente

kbd

Bedeutung | Markiert Text als Tastatureingabe - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

label

Bedeutung | Ordnet Text einem bestimmten Formularfeld zu - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
accesskey | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt ein einzelnes Zeichen als Hotkey für das zugehörige Element
for | [IDREF] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die ID des Elements an, zu dem das Label gehört
onblur | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | beim Verlassen des zugehörigen Elements... (Script-Code)
onfocus | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn das zugehörige Element den Fokus hat... (Script-Code)
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

legend

Bedeutung | Definiert eine Überschrift für eine Gruppe von Formularelementen - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
accesskey | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt ein einzelnes Zeichen als Hotkey für die Elementgruppe
align | left | top | right | bottom | Erlaubt in den Varianten Seite Transitional, Frameset | nein | richtet den Inhalt der Überschrift aus
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

li

Bedeutung | Markiert einen Listeneintrag - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
type | disc | square | circle | 1 | a | A | i | I | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt das Aufzählungszeichen oder den Nummerierungstyp des Listeneintrags
value | [Zahl] | Erlaubt in den Varianten Seite Transitional, Frameset | nein | setzt den Wert der laufenden Nummerierung neu
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

link

Bedeutung | Definiert logische Beziehungen zu anderen Dateien - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
charset | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Kodierung der Verknüpfung (nach RFC 2045) an
href | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den URI der Verknüpfung (nach RFC 2396) an
hreflang | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Landessprache der Verknüpfung (nach RFC 1766) an
media | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: screen) | bestimmt das Ausgabemedium
rel | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Verknüpfung als "Vorwärtsverknüpfung"
rev | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Verknüpfung als "Rückwärtsverknüpfung"
target | #CDATA | _blank | _parent | _self | _top | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den Fensternamen zur Ausgabe des Verknüpfungsziels
type | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt den Kapitel MIME-Typ des Verknüpfungsziels (laut RFC 2045)
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

map

Bedeutung | Markiert einen Definitionsbereich für verweis-sensitive Grafiken - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | bestimmt einen Ankernamen für den Bereich
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

menu

Bedeutung | Markiert eine Menüliste - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
compact | compact (leeres Attribut) | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt, dass die Liste in engerer Schrift dargestellt wird
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

meta

Bedeutung | Definiert Meta-Daten wie Kurzbeschreibung und Stichwörter für eine Datei - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
name | [Name] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | benennt eine bestimmte Eigenschaft für Meta-Informationen
content | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | definiert den Wert für die Eigenschaft, die bei http-equiv oder name definiert wird
http-equiv | [Name] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | benennt eine bestimmte Eigenschaft für Meta-Informationen (für HTTP-Kopfdaten)
scheme | [Name] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt ein Schema für den Wert der Eigenschaft
Universalattribute dir | lang
Abhängigkeiten | siehe Seite Elemente

noframes

Bedeutung | Markiert einen Bereich für den Fall, dass keine Frames angezeigt werden können - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

noscript

Bedeutung | Markiert einen Bereich für den Fall, dass ein Script nicht ausgeführt werden kann - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

object

Bedeutung | Definiert ein Multimediaobjekt - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | top | middle | bottom | left | right | Erlaubt in den Varianten Seite Transitional, Frameset | nein | richtet das Objekt aus
archive | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt eine kommaseparierte Liste mit Archivdateien für das Objekt an
border | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bewirkt einen Rahmen um das Objekt - Dicke in Pixeln oder Prozent
classid | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt einen URI (nach RFC 2396) oder eine eindeutige Bezeichnung für das Objekt an
codebase | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den Basis-URI für Angaben zu classid, data und archive (nach RFC 2396) an
codetype | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den MIME-Typ des Quelltextes der Datenquelle (nach RFC 2045) an
data | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den URI der Datenquelle (nach RFC 2396) an
declare | declare (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bewirkt, dass das Objekt zwar geladen, aber nicht initialisiert (z.B. nicht abgespielt) wird
height | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Anzeigehöhe des Objekts in Pixeln oder Prozent an
hspace | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den horizontalen Abstand zwischen Objekt und umfließendem Text in Pixeln oder Prozent
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt einen Namen für das Objekt an
standby | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert einen Meldungstext, der angezeigt wird, während das Objekt geladen wird
tabindex | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Tabulator-Reihenfolge für Objekte durch Angabe einer Zahl
type | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den MIME-Typ der Datenquelle (nach RFC 2045) an
usemap | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt bei Objekten, die verweis-sensitive Grafiken behandeln, den URI/den Ankernamen eines map-Elements an
vspace | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt den vertikalen Abstand zwischen Objekt und umfließendem Text in Pixeln oder Prozent
width | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Anzeigebreite des Objekts in Pixeln oder Prozent an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

ol

Bedeutung | Markiert eine nummerierte Liste - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
compact | compact (leeres Attribut) | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt, dass die Liste in engerer Schrift dargestellt wird
start | [Zahl] | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt einen Startwert für die Nummerierung (Dezimalwert)
type | 1 | a | A | i | I | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt die Art der Nummerierung
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

optgroup

Bedeutung | Markiert eine Gruppe von Einträgen in einer Menüstruktur - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
disabled | disabled (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt, dass die Gruppe von Einträgen nicht ausgewählt werden kann
label | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | bestimmt den Text des Gruppeneintrags
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

option

Bedeutung | Markiert einen Eintrag in einer Auswahlliste - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
disabled | disabled (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt, dass der Eintrag nicht ausgewählt werden kann
label | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt den Text des Eintrags im Zusammenhang mit Menüstrukturen
selected | selected (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt, dass vorausgewählt ist
value | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt den Absendewert des Eintrags
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

p

Bedeutung | Markiert einen Textabsatz - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | justify | Erlaubt in den Varianten Seite Transitional, Frameset | nein (Default: left) | richtet den Inhalt des Textabsatzes aus
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

param

Bedeutung | Definiert Parameter eines Multimediaobjekts oder Java-Applets - siehe Seite Beschreibung (Objekte), Seite Beschreibung (Java-Applets).
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
id | [ID] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt eine eindeutige Bezeichnung für den Parameter an
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | gibt einen Namen für den Parameter an
value | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt einen Initialisierungswert für den Parameter an
valuetype | data | ref | object | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Deafault: data) | gibt an, wie der Initialisierungswert von value zu interpretieren ist
type | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den MIME-Typ des Wertes (nach RFC 2045) im Fall von valuetype="ref" an
Abhängigkeiten | siehe Seite Elemente

pre

Bedeutung | Formatiert einen Bereich wie im Editor eingegeben (präformatierter Text) - siehe siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
width | [Zahl] | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt eine Anzahl Zeichen pro Zeile an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

q

Bedeutung | Markiert ein Zitat - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
cite | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt den URI der Zitatquelle (nach RFC 2396) an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

s

Bedeutung | Markiert Text als durchgestrichen - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

samp

Bedeutung | Markiert Text als Beispiel - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

script

Bedeutung | Definiert einen Bereich für Scripts (z.B. JavaScript) - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
charset | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Kodierung einer mit src angegebenen externen Scriptdatei (nach RFC 2045) an
defer | defer (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | verhindert, dass das Script irgendwelche Inhalte im Dokumentfenster erzeugen kann
event | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | führt das Script abhängig davon aus, ob ein bestimmtes Ereignis eingetreten ist
language | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die verwendete Script-Sprache an
for | [IDREF] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die ID des Elements an, für das das Script gelten soll
src | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt einen URI (nach RFC 2396), die den Script-Code enthält
type | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | bestimmt den Kapitel MIME-Typ des Scripts (laut RFC 2045)
Abhängigkeiten | siehe Seite Elemente

select

Bedeutung | Definiert eine Auswahlliste - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
disabled | disabled (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt, dass die Auswahlliste nicht benutzt werden kann
multiple | multiple (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | erlaubt es, mehrere Einträge zu selektieren
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt einen Namen für die Auswahlliste
onblur | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | beim Verlassen der Auswahlliste... (Script-Code)
onchange | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn ein (anderer) Eintrag ausgewählt wurde... (Script-Code)
onfocus | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn die Auswahlliste den Fokus hat... (Script-Code)
size | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Anzahl der gleichzeitig sichtbaren Einträge
tabindex | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Tabulator-Reihenfolge für Formularelemente durch Angabe einer Zahl
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

small

Bedeutung | Markiert Text, der kleiner dargestellt wird als normal - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

span

Bedeutung | Markiert einen inline-Bereich zur Formatierung, z.B. mit CSS - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

strike

Bedeutung | Markiert einen Text als durchgestrichen - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

strong

Bedeutung | Markiert einen Text als betont - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

style

Bedeutung | Markiert einen Bereich für Stylesheet-Definitionen, z.B. in CSS - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
media | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: screen) | bestimmt das Ausgabemedium
title | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt einen Titel für den Style-Bereich
type | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | bestimmt den Kapitel MIME-Typ der Style-Sprache (laut RFC 2045)
Universalattribute dir | lang
Abhängigkeiten | siehe Seite Elemente

sub

Bedeutung | Markiert einen Text als tiefgestellt - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

sup

Bedeutung | Markiert einen Text als hochgestellt - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

table

Bedeutung | Erzeugt eine Tabelle - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | Erlaubt in den Varianten Seite Transitional, Frameset | nein | richtet die Tabelle aus
border | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bewirkt einen sichtbaren Rahmen um die Tabelle - Dicke in Pixeln
bgcolor | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die tabellenweite Hintergrundfarbe hexadezimal (in der Form #XXXXXX) oder als Farbwort an
cellpadding | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt den Innenabstand zwischen Zellenrand und Zelleninhalt in Pixeln oder Prozent
cellspacing | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt den Abstand zwischen den Zellen untereinander in Pixeln oder Prozent
frame | void | above | below | hsides | lhs | rhs | vsides | box | border | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt an, welche Rahmen der Tabelle sichtbar sein sollen
rules | none | groups | rows | cols | all | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt an, welche Gitternetzlinien innerhalb der Tabelle sichtbar sein sollen
summary | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert einen Text, der Sehbehinderten die Tabelle im Fall von Sprachausgabe erläutert
width | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | gibt die Anzeigebreite der Tabelle in Pixeln oder Prozent an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

tbody

Bedeutung | Bestimmt in einer Tabelle den Tabellenkörper - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | justify | char | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet die Tabellenzellen des Bereichs horizontal aus
char | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" das Ausrichtungszeichen
charoff | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" die Position des Ausrichtungszeichens
valign | top | middle | bottom | baseline | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet Tabellenzellen des Bereichs vertikal aus
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

td

Bedeutung | Markiert eine Tabellenzelle - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
abbr | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert einen kurzen Hinweistext für die Zuordnung der Tabellenzelle, die z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen wird
align | left | center | right | justify | char | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet die Tabellenzelle horizontal aus
axis | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert eine Liste von Kategorien, zu der die Zelle gehört, und die z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen werden
bgcolor | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Hintergrundfarbe der Zelle hexadezimal (in der Form #XXXXXX) oder als Farbwort an
char | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" das Ausrichtungszeichen
charoff | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" die Position des Ausrichtungszeichens
colspan | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: 1) | bestimmt, über wie viele Spalten sich die aktuelle Zelle erstrecken soll
headers | [IDREFS] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert eine Liste von ID-Namen von Zeilen- oder Spaltenüberschriften, zu denen die Zelle gehört, was z.B. für Sprachausgabe der Tabelle von Bedeutung ist
height | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Anzeigehöhe der Zelle in Pixeln oder Prozent an
nowrap | nowrap (leeres Attribut) | Erlaubt in den Varianten Seite Transitional, Frameset | nein | verhindert automatischen Zeilenumbruch innerhalb der Zelle
rowspan | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: 1) | bestimmt, über wie viele Zeilen sich die aktuelle Zelle erstrecken soll
scope | row | col | rowgroup | colgroup | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert, für welche restlichen Zeilen oder Spalten die aktuelle Zelle Überschriftencharakter hat, was z.B. für Sprachausgabe der Tabelle von Bedeutung ist
valign | top | middle | bottom | baseline | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet Tabellenzelle vertikal aus
width | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Anzeigebreite der Zelle in Pixeln oder Prozent an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

textarea

Bedeutung | Definiert ein mehrzeiliges Eingabefeld - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
accesskey | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt ein einzelnes Zeichen als Hotkey für das Element
cols | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | bestimmt die Anzahl Zeichen pro Zeile
disabled | disabled (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt, dass das Element nicht verändert werden kann
name | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt einen Namen für das Element
onblur | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | beim Verlassen des Elements... (Script-Code)
onchange | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn das Element geändert wurde... (Script-Code)
onfocus | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn das Element den Fokus hat... (Script-Code)
onselect | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | wenn das Element ausgewählt ist... (Script-Code)
readonly | readonly (leeres Attribut) | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt, dass der Wert des Elements nicht verändert werden kann
rows | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | ja | bestimmt die Anzahl sichtbarer Zeilen
tabindex | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt die Tabulator-Reihenfolge für Formularelemente durch Angabe einer Zahl
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

tfoot

Bedeutung | Bestimmt in einer Tabelle den Tabellenfuß - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | justify | char | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet die Tabellenzellen des Bereichs horizontal aus
char | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" das Ausrichtungszeichen
charoff | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" die Position des Ausrichtungszeichens
valign | top | middle | bottom | baseline | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet Tabellenzellen des Bereichs vertikal aus
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

th

Bedeutung | Markiert eine Tabellenkopfzelle - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
abbr | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert einen kurzen Hinweistext für die Zuordnung der Tabellenzelle, die z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen wird
align | left | center | right | justify | char | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet die Tabellenkopfzelle horizontal aus
axis | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert eine Liste von Kategorien, zu der die Zelle gehört, und die z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen werden
bgcolor | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Hintergrundfarbe der Zelle hexadezimal (in der Form #XXXXXX) oder als Farbwort an
char | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" das Ausrichtungszeichen
charoff | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" die Position des Ausrichtungszeichens
colspan | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: 1) | bestimmt, über wie viele Spalten sich die aktuelle Zelle erstrecken soll
headers | [IDREFS] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert eine Liste von ID-Namen von Zeilen- oder Spaltenüberschriften, zu denen die Zelle gehört, was z.B. für Sprachausgabe der Tabelle von Bedeutung ist
height | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Anzeigehöhe der Zelle in Pixeln oder Prozent an
nowrap | nowrap (leeres Attribut) | Erlaubt in den Varianten Seite Transitional, Frameset | nein | verhindert automatischen Zeilenumbruch innerhalb der Zelle
rowspan | [Zahl] | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein (Default: 1) | bestimmt, über wie viele Zeilen sich die aktuelle Zelle erstrecken soll
scope | row | col | rowgroup | colgroup | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | definiert, für welche restlichen Zeilen oder Spalten die aktuelle Zelle Überschriftencharakter hat, was z.B. für Sprachausgabe der Tabelle von Bedeutung ist
valign | top | middle | bottom | baseline | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet Tabellenkopfzelle vertikal aus
width | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Anzeigebreite der Zelle in Pixeln oder Prozent an
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

thead

Bedeutung | Bestimmt in einer Tabelle den Tabellenkopf - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | justify | char | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet die Tabellenzellen des Bereichs horizontal aus
char | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" das Ausrichtungszeichen
charoff | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" die Position des Ausrichtungszeichens
valign | top | middle | bottom | baseline | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet Tabellenzellen des Bereichs vertikal aus
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

title

Bedeutung | Definiert den Titel einer HTML-Datei - siehe Seite Beschreibung.
[Universalattribute zur Internationalisierung]
Abhängigkeiten | siehe Seite Elemente

tr

Bedeutung | Definiert eine Tabellenzeile - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
align | left | center | right | justify | char | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet die Tabellenzellen der Zeile horizontal aus
bgcolor | #CDATA | Erlaubt in den Varianten Seite Transitional, Frameset | nein | gibt die Hintergrundfarbe der Tabellenzeile hexadezimal (in der Form #XXXXXX) oder als Farbwort an
char | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" das Ausrichtungszeichen
charoff | #CDATA | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | bestimmt in Verbindung mit align="char" die Position des Ausrichtungszeichens
valign | top | middle | bottom | baseline | Erlaubt in den Varianten Seite Strict, Transitional, Frameset | nein | richtet Tabellenzellen der Zeile vertikal aus
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

tt

Bedeutung | Markiert einen Text, der im Schreibmaschinenstil dargestellt wird - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

u

Bedeutung | Markiert einen Text als unterstrichen - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

ul

Bedeutung | Markiert eine Aufzählungsliste - siehe Seite Beschreibung.
Attribut | Wert | HTML-Varianten | erforderlich? | Bedeutung
compact | compact (leeres Attribut) | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt, dass die Liste in engerer Schrift dargestellt wird
type | disc | square | circle | Erlaubt in den Varianten Seite Transitional, Frameset | nein | bestimmt die Art des Aufzählungszeichens
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

var

Bedeutung | Markiert einen Text als Variable - siehe Seite Beschreibung.
[Universalattribute]
Abhängigkeiten | siehe Seite Elemente

nach oben
weiter | Seite HTML-Zeichenreferenz
zurück | Seite HTML-Elementreferenz
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von HTML-Referenz

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Referenz /HTML-Zeichenreferenz

SELFHTML

HTML-Zeichenreferenz
Informationsseite

nach unten Allgemeines zur HTML-Zeichenreferenz
nach unten Benannte Zeichen für HTML-eigene Zeichen
nach unten Benannte Zeichen für die Kodierung ISO 8859-1
nach unten Benannte Zeichen für griechische Buchstaben
nach unten Benannte Zeichen für mathematische Symbole
nach unten Benannte Zeichen für technische Symbole
nach unten Benannte Zeichen für Pfeil-Symbole
nach unten Benannte Zeichen für diverse Symbole
nach unten Benannte Zeichen lateinisch erweitert
nach unten Benannte Zeichen für Interpunktion
nach unten Benannte Zeichen diakritische Zeichen
nach unten

Allgemeines zur HTML-Zeichenreferenz

In der Zeichenreferenz geht es um Zeichen, die zwischen dem Anfangs- und dem End-Tag eines HTML-Elements als Text stehen können (siehe auch Seite #PCDATA), sowie um Zeichen, die bei Wertzuweisungen an viele Attribute notiert werden können (siehe auch Seite #CDATA). Bei einem HTML-Konstrukt wie <p class="Aussage">Zeichen können viel bedeuten</p> ist zum einen die Zeichenfolge Zeichen können viel bedeuten relevant, und zum anderen die Zeichenfolge Aussage.

Seit HTML 4.0 kann jedes Zeichen aus dem Zeichenvorrat nach ISO 10646 (deckungsgleich mit dem Unicode-Standard) notiert werden. Beliebige Zeichen aus diesem gewaltigen Zeichenvorrat können durch eine spezielle numerische Notation erzeugt werden. Das Schema für solche numerischen Notationen lautet:
&#[x][Nummer];
Beispiele einer Notation in HTML:
&#945;
&#x3B1;
Das x notieren Sie dann, wenn Sie die Nummer hexadezimal angeben. Bei dezimaler Angabe lassen Sie das x weg. Die Unicode-Nummer eines gewünschten Zeichens können Sie aus den Codetabellen ermitteln (siehe Abschnitt über Seite das Unicode-System).

Neben der numerischen Unicode-Notation gibt es in HTML für häufiger verwendete Sonderzeichen auch so genannte named entities, benannte Zeichen. Alle benannten Zeichen werden nach dem folgenden Schema notiert:
&[Name];
Beispiel einer Notation in HTML:
&alpha;
Die verfügbaren benannten Zeichen können Sie den folgenden Tabellen entnehmen.

In der jeweils ersten Spalte der Tabellen wird versucht, das Zeichen mit Hilfe des HTML-Namens darzustellen. Ein WWW-Browser muss jedoch HTML 4.0 interpretieren, und auch dann kann er nur solche Zeichen darstellen, für die er eine geeignete Schriftart vorfindet.

Benannte Zeichen für HTML-eigene Zeichen

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
" | Anführungszeichen oben | &quot; | &#34;
& | Ampersand-Zeichen, kaufmännisches Und | &amp; | &#38;
< | öffnende spitze Klammer | &lt; | &#60;
> | schließende spitze Klammer | &gt; | &#62;

Benannte Zeichen für die Kodierung ISO 8859-1

siehe auch: Seite Codetabelle der Kodierung ISO 8859-1. Die HTML-Namen dieser Zeichen sind seit HTML 3.2 verfügbar.

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
 | Erzwungenes Leerzeichen | &nbsp; | &#160;
¡ | umgekehrtes Ausrufezeichen | &iexcl; | &#161;
¢ | Cent-Zeichen | &cent; | &#162;
£ | Pfund-Zeichen | &pound; | &#163;
¤ | Währungszeichen | &curren; | &#164;
¥ | Yen-Zeichen | &yen; | &#165;
¦ | durchbrochener Strich | &brvbar; | &#166;
§ | Paragraph-Zeichen | &sect; | &#167;
¨ | Pünktchen oben | &uml; | &#168;
© | Copyright-Zeichen | &copy; | &#169;
ª | Ordinal-Zeichen weiblich | &ordf; | &#170;
« | angewinkelte Anführungszeichen links | &laquo; | &#171;
¬ | Verneinungs-Zeichen | &not; | &#172;
 | bedingter Trennstrich | &shy; | &#173;
® | Registriermarke-Zeichen | &reg; | &#174;
¯ | Überstrich | &macr; | &#175;
° | Grad-Zeichen | &deg; | &#176;
± | Plusminus-Zeichen | &plusmn; | &#177;
² | Hoch-2-Zeichen | &sup2; | &#178;
³ | Hoch-3-Zeichen | &sup3; | &#179;
´ | Akut-Zeichen | &acute; | &#180;
µ | Mikro-Zeichen | &micro; | &#181;
¶ | Absatz-Zeichen | &para; | &#182;
· | Mittelpunkt | &middot; | &#183;
¸ | Häkchen unten | &cedil; | &#184;
¹ | Hoch-1-Zeichen | &sup1; | &#185;
º | Ordinal-Zeichen männlich | &ordm; | &#186;
» | angewinkelte Anführungszeichen rechts | &raquo; | &#187;
¼ | ein Viertel | &frac14; | &#188;
½ | ein Halb | &frac12; | &#189;
¾ | drei Viertel | &frac34; | &#190;
¿ | umgekehrtes Fragezeichen | &iquest; | &#191;
À | A mit accent grave (Gravis) | &Agrave; | &#192;
Á | A mit accent aigu (Akut) | &Aacute; | &#193;
Â | A mit Zirkumflex | &Acirc; | &#194;
Ã | A mit Tilde | &Atilde; | &#195;
Ä | A Umlaut | &Auml; | &#196;
Å | A mit Ring | &Aring; | &#197;
Æ | A mit legiertem E | &AElig; | &#198;
Ç | C mit Häkchen | &Ccedil; | &#199;
È | E mit accent grave (Gravis) | &Egrave; | &#200;
É | E mit accent aigu (Akut) | &Eacute; | &#201;
Ê | E mit Zirkumflex | &Ecirc; | &#202;
Ë | E Umlaut | &Euml; | &#203;
Ì | I mit accent grave (Gravis) | &Igrave; | &#204;
Í | I mit accent aigu (Akut) | &Iacute; | &#205;
Î | I mit Zirkumflex | &Icirc; | &#206;
Ï | I Umlaut | &Iuml; | &#207;
Ð | großes Eth (isländisch) | &ETH; | &#208;
Ñ | N mit Tilde | &Ntilde; | &#209;
Ò | O mit accent grave (Gravis) | &Ograve; | &#210;
Ó | O mit accent aigu (Akut) | &Oacute; | &#211;
Ô | O mit Zirkumflex | &Ocirc; | &#212;
Õ | O mit Tilde | &Otilde; | &#213;
Ö | O Umlaut | &Ouml; | &#214;
× | Mal-Zeichen | &times; | &#215;
Ø | O mit Schrägstrich | &Oslash; | &#216;
Ù | U mit accent grave (Gravis) | &Ugrave; | &#217;
Ú | U mit accent aigu (Akut) | &Uacute; | &#218;
Û | U mit Zirkumflex | &Ucirc; | &#219;
Ü | U Umlaut | &Uuml; | &#220;
Ý | Y mit accent aigu (Akut) | &Yacute; | &#221;
Þ | großes Thorn (isländisch) | &THORN; | &#222;
ß | scharfes S | &szlig; | &#223;
à | a mit accent grave (Gravis) | &agrave; | &#224;
á | a mit accent aigu (Akut) | &aacute; | &#225;
â | a mit Zirkumflex | &acirc; | &#226;
ã | a mit Tilde | &atilde; | &#227;
ä | a Umlaut | &auml; | &#228;
å | a mit Ring | &aring; | &#229;
æ | a mit legiertem e | &aelig; | &#230;
ç | c mit Häkchen | &ccedil; | &#231;
è | e mit accent grave (Gravis) | &egrave; | &#232;
é | e mit accent aigu (Akut) | &eacute; | &#233;
ê | e mit Zirkumflex | &ecirc; | &#234;
ë | e Umlaut | &euml; | &#235;
ì | i mit accent grave (Gravis) | &igrave; | &#236;
í | i mit accent aigu (Akut) | &iacute; | &#237;
î | i mit Zirkumflex | &icirc; | &#238;
ï | i Umlaut | &iuml; | &#239;
ð | kleines Eth (isländisch) | &eth; | &#240;
ñ | n mit Tilde | &ntilde; | &#241;
ò | o mit accent grave (Gravis) | &ograve; | &#242;
ó | o mit accent aigu (Akut) | &oacute; | &#243;
ô | o mit Zirkumflex | &ocirc; | &#244;
õ | o mit Tilde | &otilde; | &#245;
ö | o Umlaut | &ouml; | &#246;
÷ | Divisions-Zeichen | &divide; | &#247;
ø | o mit Schrägstrich | &oslash; | &#248;
ù | u mit accent grave (Gravis) | &ugrave; | &#249;
ú | u mit accent aigu (Akut) | &uacute; | &#250;
û | u mit Zirkumflex | &ucirc; | &#251;
ü | u Umlaut | &uuml; | &#252;
ý | y mit accent aigu (Akut) | &yacute; | &#253;
þ | kleines Thorn (isländisch) | &thorn; | &#254;
ÿ | y Umlaut | &yuml; | &#255;

Benannte Zeichen für griechische Buchstaben

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfügbar.

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
Α | Alpha groß | &Alpha; | &#913;
α | alpha klein | &alpha; | &#945;
Β | Beta groß | &Beta; | &#914;
β | beta klein | &beta; | &#946;
Γ | Gamma groß | &Gamma; | &#915;
γ | gamma klein | &gamma; | &#947;
Δ | Delta groß | &Delta; | &#916;
δ | delta klein | &delta; | &#948;
Ε | Epsilon groß | &Epsilon; | &#917;
ε | epsilon klein | &epsilon; | &#949;
Ζ | Zeta groß | &Zeta; | &#918;
ζ | zeta klein | &zeta; | &#950;
Η | Eta groß | &Eta; | &#919;
η | eta klein | &eta; | &#951;
Θ | Theta groß | &Theta; | &#920;
θ | theta klein | &theta; | &#952;
Ι | Iota groß | &Iota; | &#921;
ι | iota klein | &iota; | &#953;
Κ | Kappa groß | &Kappa; | &#922;
κ | kappa klein | &kappa; | &#954;
Λ | Lambda groß | &Lambda; | &#923;
λ | lambda klein | &lambda; | &#955;
Μ | My groß | &Mu; | &#924;
μ | my klein | &mu; | &#956;
Ν | Ny groß | &Nu; | &#925;
ν | ny klein | &nu; | &#957;
Ξ | Xi groß | &Xi; | &#926;
ξ | xi klein | &xi; | &#958;
Ο | Omikron groß | &Omicron; | &#927;
ο | omikron klein | &omicron; | &#959;
Π | Pi groß | &Pi; | &#928;
π | pi klein | &pi; | &#960;
Ρ | Rho groß | &Rho; | &#929;
ρ | rho klein | &rho; | &#961;
Σ | Sigma groß | &Sigma; | &#931;
ς | Schluss-Sigma | &sigmaf; | &#962;
σ | sigma klein | &sigma; | &#963;
Τ | Tau groß | &Tau; | &#932;
τ | tau klein | &tau; | &#964;
Υ | Ypsilon groß | &Upsilon; | &#933;
υ | ypsilon klein | &upsilon; | &#965;
Φ | Phi groß | &Phi; | &#934;
φ | phi klein | &phi; | &#966;
Χ | Chi groß | &Chi; | &#935;
χ | chi klein | &chi; | &#967;
Ψ | Psi groß | &Psi; | &#936;
ψ | psi klein | &psi; | &#968;
Ω | Omega groß | &Omega; | &#937;
ω | omega klein | &omega; | &#969;
ϑ | theta Symbol | &thetasym; | &#977;
ϒ | ypsilon mit Haken | &upsih; | &#978;
ϖ | pi Symbol | &piv; | &#982;

Benannte Zeichen für mathematische Symbole

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfügbar.

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
∀ | für alle | &forall; | &#8704;
∂ | partiell | &part; | &#8706;
∃ | existiert | &exist; | &#8707;
∅ | leere Menge | &empty; | &#8709;
∇ | Nabla | &nabla; | &#8711;
∈ | Element von | &isin; | &#8712;
∉ | kein Element von | &notin; | &#8713;
∋ | Element von (gespiegelt) | &ni; | &#8715;
∏ | Produkt | &prod; | &#8719;
∑ | Summe | &sum; | &#8721;
− | minus | &minus; | &#8722;
∗ | Asterisk | &lowast; | &#8727;
√ | Wurzel | &radic; | &#8730;
∝ | proportional zu | &prop; | &#8733;
∞ | unendlich | &infin; | &#8734;
∠ | Winkel | &ang; | &#8736;
∧ | und | &and; | &#8743;
∨ | oder | &or; | &#8744;
∩ | Schnittmenge | &cap; | &#8745;
∪ | Vereinigungsmenge | &cup; | &#8746;
∫ | Integral | &int; | &#8747;
∴ | deshalb | &there4; | &#8756;
∼ | ähnlich wie | &sim; | &#8764;
≅ | kongruent | &cong; | &#8773;
≈ | beinahe gleich | &asymp; | &#8776;
≠ | ungleich | &ne; | &#8800;
≡ | identisch mit | &equiv; | &#8801;
≤ | kleiner gleich | &le; | &#8804;
≥ | größer gleich | &ge; | &#8805;
⊂ | Untermenge von | &sub; | &#8834;
⊃ | Obermenge von | &sup; | &#8835;
⊄ | keine Untermenge von | &nsub; | &#8836;
⊆ | Untermenge von oder gleich mit | &sube; | &#8838;
⊇ | Obermenge von oder gleich mit | &supe; | &#8839;
⊕ | Restklassenaddition | &oplus; | &#8853;
⊗ | Kronecker-Produkt | &otimes; | &#8855;
⊥ | senkrecht zu | &perp; | &#8869;
⋅ | Punkt-Operator | &sdot; | &#8901;
◊ | Raute | &loz; | &#9674;

Benannte Zeichen für technische Symbole

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfügbar.

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
⌈ | links oben | &lceil; | &#8968;
⌉ | rechts oben | &rceil; | &#8969;
⌊ | links unten | &lfloor; | &#8970;
⌋ | rechts unten | &rfloor; | &#8971;
⟨ | spitze Klammer links | &lang; | &#9001;
⟩ | spitze Klammer rechts | &rang; | &#9002;

Benannte Zeichen für Pfeil-Symbole

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfügbar.

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
← | Pfeil links | &larr; | &#8592;
↑ | Pfeil oben | &uarr; | &#8593;
→ | Pfeil rechts | &rarr; | &#8594;
↓ | Pfeil unten | &darr; | &#8595;
↔ | Pfeil links/rechts | &harr; | &#8596;
↵ | Pfeil unten-Knick-links | &crarr; | &#8629;
⇐ | Doppelpfeil links | &lArr; | &#8656;
⇑ | Doppelpfeil oben | &uArr; | &#8657;
⇒ | Doppelpfeil rechts | &rArr; | &#8658;
⇓ | Doppelpfeil unten | &dArr; | &#8659;
⇔ | Doppelpfeil links/rechts | &hArr; | &#8660;

Benannte Zeichen für diverse Symbole

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfügbar.

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
• | Bullet-Zeichen | &bull; | &#8226;
′ | Minutenzeichen | &prime; | &#8242;
″ | Sekundenzeichen | &Prime; | &#8243;
‾ | Überstrich | &oline; | &#8254;
⁄ | Bruchstrich | &frasl; | &#8260;
℘ | Weierstraß p | &weierp; | &#8472;
ℑ | Zeichen für "imaginär" | &image; | &#8465;
ℜ | Zeichen für "real" | &real; | &#8476;
™ | Trademark-Zeichen | &trade; | &#8482;
€ | Euro-Zeichen | &euro; | &#8364;
ℵ | Alef-Symbol | &alefsym; | &#8501;
♠ | Pik-Zeichen | &spades; | &#9824;
♣ | Kreuz-Zeichen | &clubs; | &#9827;
♥ | Herz-Zeichen | &hearts; | &#9829;
♦ | Karo-Zeichen | &diams; | &#9830;

Benannte Zeichen lateinisch erweitert

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfügbar.

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
Œ | OE-Ligatur | &OElig; | &#338;
œ | oe-Ligatur | &oelig; | &#339;
Š | S mit Hatschek (Caron) | &Scaron; | &#352;
š | s mit Hatschek (Caron) | &scaron; | &#353;
Ÿ | Y Umlaut | &Yuml; | &#376;
ƒ | Funktion | &fnof; | &#402;

Benannte Zeichen für Interpunktion

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfügbar.

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
 | Leerzeichen Breite n | &ensp; | &#8194;
 | Leerzeichen Breite m | &emsp; | &#8195;
 | Schmales Leerzeichen | &thinsp; | &#8201;
‌ | null breiter Nichtverbinder | &zwnj; | &#8204;
‍ | null breiter Verbinder | &zwj; | &#8205;
‎ | links-nach-rechts-Zeichen | &lrm; | &#8206;
‏ | rechts-nach-links-Zeichen | &rlm; | &#8207;
– | Gedankenstrich Breite n | &ndash; | &#8211;
— | Gedankenstrich Breite m | &mdash; | &#8212;
‘ | einfaches Anführungszeichen links | &lsquo; | &#8216;
’ | einfaches Anführungszeichen rechts | &rsquo; | &#8217;
‚ | einfaches low-9-Zeichen | &sbquo; | &#8218;
“ | doppeltes Anführungszeichen links | &ldquo; | &#8220;
” | doppeltes Anführungszeichen rechts | &rdquo; | &#8221;
„ | doppeltes low-9-Zeichen rechts | &bdquo; | &#8222;
† | Kreuz | &dagger; | &#8224;
‡ | Doppelkreuz | &Dagger; | &#8225;
… | Horizontale Ellipse (Auslassungszeichen) | &hellip; | &#8230;
‰ | Promille | &permil; | &#8240;
‹ | angewinkeltes einzelnes Anf.zeichen links | &lsaquo; | &#8249;
› | angewinkeltes einzelnes Anf.zeichen rechts | &rsaquo; | &#8250;

Benannte Zeichen für diakritische Zeichen

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfügbar.

Zeichen | Beschreibung | Name in HTML | Unicode in HTML
ˆ | Zirkumflex | &circ; | &#710;
˜ | kleine Tilde | &tilde; | &#732;
nach oben
weiter | Seite HTML-Varianten (Strict, Transitional, Frameset)
zurück | Seite HTML-Attribut-Referenz
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von HTML-Referenz

© 2007 Seite Impressum


SELFHTML: HTML/XHTML / Referenz / HTML-Varianten

SELFHTML

HTML-Varianten
Informationsseite

nach unten HTML-Varianten Strict, Transitional und Frameset
nach unten Nicht erlaubte Elemente und Attribute bei Variante Strict
nach unten

HTML-Varianten Strict, Transitional und Frameset

Damit eine HTML-Datei gültig ist, muss sie vollständig den Regeln entsprechen, die in der HTML-DTD (DTD = document type definition) festgelegt sind. Diese Regeln legen fest, welche Elemente verwendet werden dürfen, wie diese Elemente verschachtelt sein dürfen, welche Attribute zu welchen Elementen erlaubt sind, und welche Wertzuweisungen an diese Attribute erlaubt sind.

Nun gibt es in HTML 4.0 und auch in HTML 4.01 gleich drei HTML-DTDs. Es handelt sich um verschiedene Varianten.

Variante Strict

Die Variante Strict ist die vom W3-Konsortium empfohlene und präferierte Variante. Sie zeichnet sich dadurch aus, dass sie nur sehr schlankes HTML erlaubt. Viele Elemente und Attribute zur Formatierung und Visualisierung von Texten fehlen in dieser Variante. Stattdessen sollen Web-Seiten-Autoren Kapitel Stylesheets zur Formatierung verwenden.
Eine weitere Besonderheit der Strict-Variante ist, dass innerhalb von <body> und </body> alle Inhalte in Seite Block-Elementen stehen müssen.
Die Variante Strict eignet sich vor allem für neu zu erstellende Web-Seiten, bei denen zur Formatierung konsequent auf CSS gesetzt wird.
Einzelheiten finden Sie weiter unten in der Übersicht der nach unten nicht erlaubten Elemente und Attribute bei Variante Strict.

Um die Variante Strict mit HTML 4.01 explizit zu verwenden, ist ganz zu Beginn einer HTML-Datei folgende Notation erforderlich:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Variante Transitional

Die Variante Transitional ist ein Kompromiss, den das W3-Konsortium angesichts eigener Fehler der Vergangenheit (Definitionen aus der HTML-Version 3.2) und angesichts der hohen Verbreitung von Web-Seiten, die jene Features nutzen, anbietet. Die Variante Transitional erlaubt die Verwendung diverser Elemente und Attribute, die als deprecated (missbilligt) gekennzeichnet sind, und die in der Strict-Variante nicht mehr vorkommen. Darunter fallen so beliebte HTML-Elemente wie font oder häufig verwendete Attribute wie align oder bgcolor.
Bei der Transitional-Variante ist es auch erlaubt, direkt innerhalb von <body> und </body> einfach nur Text oder Seite Inline-Elemente zu notieren.
Die Variante Transitional ist daher vor allem für bereits bestehende Web-Seiten zu empfehlen, die ohne allzugroßen Änderungsaufwand auf einen Stand gebracht werden sollen, der gültiges HTML 4.0 oder 4.01 darstellt.

Um die Variante Transitional in HTML 4.01 explizit zu verwenden, ist ganz zu Beginn einer HTML-Datei folgende Notation erforderlich:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Hinweis: Da sich in dieser Variante der Name der Variante und der Name der DTD unterscheiden, ist mitunter auch von einer "loose"-Variante die Rede. Damit ist die Transitional-Variante gemeint.

Variante Frameset

Die Variante Frameset ist in HTML 4.01 identisch mit der Variante Transitional, mit dem einzigen Unterschied, dass die erforderliche Elementverschachtelung unterhalb des Wurzelelements html eine andere ist. Anstelle eines body-Elements ist in dieser Variante ein frameset-Element erforderlich.

Um die Variante Frameset explizit zu verwenden, ist ganz zu Beginn einer HTML-Datei folgende Notation erforderlich:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Nicht erlaubte Elemente und Attribute bei Variante Strict

Die folgende Tabelle listet auf, welche Elemente und Attribute in der Strict-Variante nicht vorkommen dürfen, weil sie entweder als deprecated (missbilligt) gekennzeichnet sind, oder weil sie zum Thema Frames gehören. Nur in der Transitional-Variante dürfen Elemente und Attribute verwendet werden, die deprecated sind. Frame-Definitionen dürfen nur in der Frameset-Variante verwendet werden.

Element | Attribut | Bemerkung
Seite a | Seite target | Attribut ist deprecated.
Seite applet |  | Element ist deprecated. Java-Applets sollen stattdessen mit dem Seite object-Element eingebunden werden.
Seite basefont |  | Element ist deprecated. Die Seite Schriftformatierung kann mit Stylesheets Seite zentral definiert und hierbei die Vererbung in verschachtelten HTML-Elementen genutzt werden.
Seite body | Seite alink | Attribut ist deprecated. Die Seite Pseudoklassen für Verweise können mit Stylesheets definiert werden.
Seite body | Seite background | Attribut ist deprecated. Der Seite Hintergrund kann mit Stylesheets definiert werden.
Seite body | Seite bgcolor | Attribut ist deprecated. Die Seite Hintergrundfarbe kann mit Stylesheets definiert werden.
Seite body | Seite link | Attribut ist deprecated. Die Seite Pseudoklassen für Verweise können mit Stylesheets definiert werden.
Seite body | Seite text | Attribut ist deprecated. Die Seite Textfarbe kann mit Stylesheets definiert werden.
Seite body | Seite vlink | Attribut ist deprecated. Die Seite Pseudoklassen für Verweise können mit Stylesheets definiert werden.
Seite br | Seite clear | Attribut ist deprecated. Die Seite Fortsetzung bei Textumfluss kann mit Stylesheets definiert werden.
Seite caption | Seite align | Attribut ist deprecated. Die Tabellenüberschrift kann über die CSS-Eigenschaften Seite caption-side und Seite text-align ausgerichtet werden.
Seite center |  | Element ist deprecated. Block-Elemente können über die CSS-Eigenschaft Seite margin mit dem Wert auto horizontal zentriert werden und hierin enthaltener Text und Inline-Elemente über Seite text-align mit dem Wert center.
Seite dir |  | Element ist deprecated. Als Alternative wird das Seite ul-Element empfohlen.
Seite div | Seite align | Attribut ist deprecated. Das Element kann über die CSS-Eigenschaft Seite margin mit dem Wert auto horizontal zentriert oder über Seite float links oder rechts platziert werden. Die enthaltenen Inline-Elemente können über die CSS-Eigenschaft Seite text-align horizontal ausgerichtet werden.
Seite dl | Seite compact | Attribut ist deprecated. Für die kompakte Darstellung ist die CSS-Eigenschaft Seite display mit dem Wert compact für die dt-Elemente zusammen mit einer entsprechenden Seite margin für die dd-Elemente vorgesehen.
Seite font |  | Element ist deprecated. Seite Schriftgröße, Seite Schriftfarbe und Seite Schriftart können mit Stylesheets definiert werden.
Seite frame |  | Element gehört zum Themenbereich Frames.
Seite frameset |  | Element gehört zum Themenbereich Frames.
Seite h1-h6 | Seite align | Attribut ist deprecated. Die Seite horizontale Ausrichtung des Inhalts kann mit Stylesheets definiert werden.
Seite hr | Seite align | Attribut ist deprecated. Das Element kann über die CSS-Eigenschaft Seite margin mit dem Wert auto horizontal zentriert oder über Seite float links oder rechts platziert werden.
Seite hr | Seite size | Attribut ist deprecated. Die Seite Höhe kann mit Stylesheets definiert werden.
Seite hr | Seite noshade | Attribut ist deprecated. Die Gestaltung kann stattdessen mit Stylesheets definiert werden.
Seite hr | Seite width | Attribut ist deprecated. Die Seite Breite kann mit Stylesheets definiert werden.
Seite html | Seite version | Attribut ist deprecated. Die HTML-Versionsangabe geht aus einer DTD-Deklaration (<!DOCTYPE...>) hervor.
Seite iframe |  | Element kommt in der Strict-Variante nicht vor. Andere HTML-Dokumente sollen stattdessen mit dem Seite object-Element eingebunden werden.
Seite img | Seite align | Attribut ist deprecated. Der Seite Textumfluss des Bildes kann mit Stylesheets definiert werden.
Seite img | Seite hspace | Attribut ist deprecated. Die Seite Außenabstände können mit Stylesheets definiert werden.
Seite img | Seite vspace | Attribut ist deprecated. Die Seite Außenabstände können mit Stylesheets definiert werden.
Seite img | Seite border | Attribut ist deprecated. Der Seite Rahmen kann mit Stylesheets definiert werden.
Seite input | Seite align | Attribut ist deprecated. Die Seite horizontale Ausrichtung des Inhalts kann mit Stylesheets definiert werden.
Seite isindex |  | Element ist deprecated. Als Alternative wird das Seite input-Element mit dem Attribut type="text" empfohlen.
Seite legend | Seite align | Attribut ist deprecated.
Seite li | Seite type | Attribut ist deprecated. Der Seite Darstellungstyp kann mit Stylesheets definiert werden.
Seite li | Seite value | Attribut ist deprecated.
Seite menu |  | Element ist deprecated. Als Alternative wird das Seite ul-Element empfohlen.
Seite noframes |  | Element kommt in der Strict-Variante nicht vor.
Seite object | Seite align | Attribut ist deprecated. Das Element kann über die CSS-Eigenschaft Seite margin mit dem Wert auto horizontal zentriert oder über Seite float links oder rechts platziert werden.
Seite object | Seite border | Attribut ist deprecated. Der Seite Rahmen kann mit Stylesheets definiert werden.
Seite object | Seite hspace | Attribut ist deprecated. Die Seite Außenabstände können mit Stylesheets definiert werden.
Seite object | Seite vspace | Attribut ist deprecated. Die Seite Außenabstände können mit Stylesheets definiert werden.
Seite ol | Seite compact | Attribut ist deprecated.
Seite ol | Seite start | Attribut ist deprecated.
Seite ol | Seite type | Attribut ist deprecated. Der Seite Darstellungstyp kann mit Stylesheets definiert werden.
Seite p | Seite align | Attribut ist deprecated. Die Seite horizontale Ausrichtung des Inhalts kann mit Stylesheets definiert werden.
Seite pre | Seite width | Attribut ist deprecated. Die Seite Breite kann mit Stylesheets definiert werden.
Seite s |  | Element ist deprecated. Markieren Sie einen Text als gelöscht mit dem Element Seite del oder verwenden Sie die CSS-Eigenschaft Seite text-decoration zur ausschließlich optischen Formatierung.
Seite script | Seite language | Attribut ist deprecated. Stattdessen wird das Attribut type empfohlen.
Seite strike |  | Element ist deprecated. Markieren Sie einen Text als gelöscht mit dem Element Seite del oder verwenden Sie die CSS-Eigenschaft Seite text-decoration zur ausschließlich optischen Formatierung.
Seite table | Seite align | Attribut ist deprecated. Das Element kann über die CSS-Eigenschaft Seite margin mit dem Wert auto horizontal zentriert oder über Seite float links oder rechts platziert werden.
Seite table | Seite bgcolor | Attribut ist deprecated. Die Seite Hintergrundfarbe kann mit Stylesheets definiert werden.
Seite td | Seite bgcolor | Attribut ist deprecated. Die Seite Hintergrundfarbe kann mit Stylesheets definiert werden.
Seite td | Seite height | Attribut ist deprecated. Die Seite Höhe kann mit Stylesheets definiert werden.
Seite td | Seite nowrap | Attribut ist deprecated. Der Seite Textumbruch kann mit Stylesheets kontrolliert werden.
Seite td | Seite width | Attribut ist deprecated. Die Seite Breite kann mit Stylesheets definiert werden.
Seite th | Seite bgcolor | Attribut ist deprecated. Die Seite Hintergrundfarbe kann mit Stylesheets definiert werden.
Seite th | Seite height | Attribut ist deprecated. Die Seite Höhe kann mit Stylesheets definiert werden.
Seite th | Seite nowrap | Attribut ist deprecated. Der Seite Textumbruch kann mit Stylesheets kontrolliert werden.
Seite th | Seite width | Attribut ist deprecated. Die Seite Breite kann mit Stylesheets definiert werden.
Seite tr | Seite bgcolor | Attribut ist deprecated. Die Seite Hintergrundfarbe kann mit Stylesheets definiert werden.
Seite u |  | Element ist deprecated. Unterstrichener Text kann mit der CSS-Eigenschaft Seite text-decoration definiert werden.
Seite ul | Seite compact | Attribut ist deprecated.
Seite ul | Seite type | Attribut ist deprecated. Der Seite Darstellungstyp kann mit Stylesheets definiert werden.

nach oben
weiter | Seite Stylesheets und HTML
zurück | Seite HTML-Zeichenreferenz
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von HTML-Referenz

© 2007 Seite Impressum


SELFHTML: Stylesheets (CSS)

SELFHTML

Stylesheets (CSS)
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML.
Dieses Kapitel beschreibt die HTML-Ergänzungssprache der Cascading Stylesheets, mit der Sie HTML-Elemente exakt formatieren und positionieren können.
Der Abschnitt besteht aus folgenden Seiten und Unterabschnitten:

Seite Stylesheets und HTML
Kapitel CSS-Formate definieren
Kapitel CSS-Eigenschaften
Kapitel CSS-basierte Layouts

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zu CSS
Online-Seite WWW-Links zu CSS

nach oben

© 2007 Seite Impressum


SELFHTML: Stylesheets / Stylesheets und HTML

SELFHTML

Stylesheets und HTML
Informationsseite

nach unten Sinn und Zweck von Stylesheets
nach unten Stylesheet-Sprachen, Versionen und Informationen
nach unten Stylesheets, Web-Browser und Anwender
nach unten CSS-Formate und CSS-Eigenschaften
nach unten

Sinn und Zweck von Stylesheets

Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise bestimmen, dass Überschriften 1. Ordnung einen großen Schriftgrad aufweisen, in der Schriftart Helvetica, aber nicht fett erscheinen und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben dieser Art sind mit reinem HTML nicht möglich.

Das ist aber nur der Anfang. Stylesheets bieten noch viel mehr Möglichkeiten. So können Sie HTML-Elemente - egal ob Textabsätze, Listen oder Formulare - mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen ausstatten. Sie können Elemente im Anzeigefenster des WWW-Browsers positionieren und Abstände definieren. Für Print-Layouts stehen Möglichkeiten zur Definition von Seiten-Layout und Textflusskontrolle bereit. Für die akustische Wiedergabe von Web-Seiten gibt es ein ganzes Arsenal an Eigenschaften, um die künstliche Sprachausgabe zu steuern. Einige CSS-Eigenschaften sind auch in der Lage, das Anzeigefenster des Browsers zu beeinflussen, so etwa das Aussehen des Cursors.

Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So können Sie beispielsweise in einer externen Datei zentrale Definitionen zum Aussehen eines Elements notieren und dieses Stylesheet in viele HTML-Seiten parallel einbinden. Alle Elemente der entsprechenden HTML-Dateien erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner. Sie können Ihre Stylesheet-Definitionen sogar in separaten Dateien notieren. Die Stylesheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren. Auf diese Weise können Sie für große Projekte einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken.

Stylesheets unterstützen also die professionelle Gestaltung beim Web-Design und helfen beim Corporate Design für große Projekte oder für unternehmensspezifische Layouts.

Stylesheet-Sprachen, Versionen und Informationen

Genau wie HTML wird auch CSS vom W3-Konsortium normiert. Es handelt sich also um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Für CSS gibt es genau wie für HTML eine Arbeitsgruppe beim W3-Konsortium, die sich um die Weiterentwicklung der Sprache kümmert und sich dabei dem Regelwerk zur Entstehung der so genannten Recommendations (Empfehlungen) des W3-Konsortiums unterzieht.

Wie bei HTML, so gibt es auch bei CSS Sprachversionen, die auf den Neuauflagen der Recommendations basieren. Die Version 1.0 von CSS wurde bereits im Jahr 1996 herausgegeben und 1999 nochmals überarbeitet. 1998 erhielt die Version 2.0 den Status einer Empfehlung. Mittlerweile wird an den Versionen 2.1 und 3.0 parallel gearbeitet. Bei CSS 2.1 handelt es sich um eine korrigierte und geringfügig ergänzte Fassung der zweiten Ausgabe, deren vollständige Bezeichnung CSS Level 2 Revision 1 lautet. Sie ersetzt CSS 2, wird voraussichtlich im Laufe des Jahres 2007 den Status einer Empfehlung erlangen und in der vorliegenden Dokumentation bereits berücksichtigt. Folgende Symbole werden zur Auszeichnung der Sprachversionen verwendet:

Symbol | Bedeutung
CSS 1.0 | Bestandteil der ersten CSS-Version.
CSS 2.0 | Bestandteil der zweiten CSS-Version.
CSS 2.1 | Bestandteil der aktualisierten zweiten CSS-Version.

Es gibt mehrere Sprachen zum Definieren von Stylesheets, CSS ist nur eine davon. Aber es ist diejenige Sprache, die speziell als Ergänzung für HTML geschaffen wurde und deshalb für HTML-basierte Web-Seiten optimiert ist. CSS steht für "Cascading Style Sheets". Andere Style-Sprachen sind die "Document Style Semantics and Specification Language" (DSSSL), die für SGML konzipiert wurde und ebenso wie SGML etwas "sophisticated" ist und die mittlerweile bekanntere "Extensible Stylesheet Language" (XSL), die als Formatierungssprache für XML entwickelt wurde (zu XSL siehe auch Kapitel Darstellung von XML-Daten).

Im Web können Sie die bisherige Entwicklung und die Weiterentwicklung von CSS auf den Seiten des W3-Konsortiums verfolgen:

englischsprachige Seite Einstiegsseite zu Stylesheets beim W3-Konsortium
Über diese Seite gelangen Sie zu Informationen über CSS, XSL und DSSSL sowie über Software-Projekte rund um Style-Unterstützung.

englischsprachige Seite Einstiegsseite zu CSS beim W3-Konsortium
Über diese Seite gelangen Sie direkt zu aktuellen Nachrichten und Informationen über CSS.

englischsprachige Seite CSS2-Spezifikation beim W3-Konsortium
Über diese Seite gelangen Sie direkt zur aktuellen CSS-Spezifikation.

englischsprachige Seite CSS 2.1-Entwurf beim W3-Konsortium
Über diese Seite gelangen Sie zum Arbeitsentwurf der künftigen CSS-Spezifikation.

englischsprachige Seite CSS3 - aktueller Entwicklungsstand beim W3-Konsortium
Über diese Seite gelangen Sie zu Arbeitsentwürfen der künftigen CSS-Spezifikation.

Stylesheets, Web-Browser und Anwender

Netscape 4.x, der mittlerweile als ausgestorben gelten darf, interpretierte viele Eigenschaften der CSS-Version 1.0 und einen Teil der Eigenschaften der CSS-Version 2.0. Der Internet Explorer kennt weite Teile der CSS-Version 1.0 bereits seit seiner Produktversion 3.0 aus dem Jahr 1996. In der Version 4.0 interpretiert er einen Teil der CSS-Version 2.0 und einige spezielle, von Microsoft eingeführte Eigenschaften. Auf dem Niveau der 4er-Generation beider Browser ist die CSS-Implementierung jedoch noch äußerst unvollständig und recht unterschiedlich, und speziell beim 4er-Netscape gibt es zum Teil noch haarsträubende Fehler. Seit der 5er-Version des Internet Explorer ist die Situation zwar etwas besser geworden, allerdings weist der Microsoft-Browser bis einschließlich Version 6 viele gravierende Schwächen auf. Opera befindet sich in Sachen CSS spätestens seit seiner 5er-Version ebenfalls auf hohem Niveau.

Die umfassendste Implementierung bieten derzeit die aus dem Mozilla-Projekt hervorgegangenen Browser (Mozilla, Firefox, Camino und Netscape ab Version 6), Opera 9 und die beiden auf dem quelloffenen Darstellungsmodul WebKit basierenden Browser Safari (Mac OS X) und Konqueror (Linux). Microsoft machte mit der Veröffentlichung des Internet Explorer 7 einiges an Boden gut, verfehlt das Niveau der Konkurrenz jedoch immer noch deutlich.

Dieser Umstand gebietet es daher, Web-Seiten ausführlich mit verschiedenen Browsern auszutesten. Die CSS-Implementierungen sind einfach noch nicht so einheitlich oder vollständig, als dass Sie darauf vertrauen können, dass alles in jedem Browser genauso aussieht wie in dem, mit dem Sie bevorzugt arbeiten. Schließlich entwickeln Sie für Ihre Besucher und nicht für sich selbst. Ferner sollte Ihnen bewusst sein, dass die optische Wirkung von Web-Seiten auch stark von der eingesetzten Hardware abhängig ist. Web-Seiten werden nun mal nicht nur auf High-End-Computern mit 22-Zoll-Bildschirmen und 16,7 Millionen Farben gelesen. Sie werden auch mit Sub-Notebooks, Handheld-Computern sowie Handys gelesen und mit veralteten PCs angezeigt. Gerade die unterschiedlichen Technologien, die heute im Bereich der Bildschirme auf dem Markt sind, sorgen für sehr unterschiedliche Wirkungen etwa von Farben. Was auf dem einen Bildschirm als beige wirkt, sieht auf dem nächsten aus wie schweinchenrosa. Zwar lassen sich Bildschirme kalibrieren, doch Sie können ja schlecht vom Anwender verlangen, dass er vor dem Betrachten Ihrer Web-Seiten erst seinen Bildschirm neu einstellt. Immerhin besteht ab CSS2 die Möglichkeit, unterschiedliche CSS-Formate für unterschiedliche Ausgabemedien zu definieren. Damit lassen sich viele, jedoch nicht alle Klippen umschiffen.

Zu bedenken ist weiterhin, dass Schriftgrößenangaben in CSS am Bildschirm nicht zwingend zu einheitlichen Ergebnissen führen. Während im Print-Bereich eine 10-Punkt-Schrift immer gleich groß ist, weil nun mal definiert ist, wie groß ein Punkt ist, werden solche Angaben am Bildschirm in Pixel umgerechnet. Dabei ist aber wiederum nicht festgelegt, wie groß ein Pixel ist. Und nicht einmal die Umrechnungsfaktoren sind die gleichen. So rechnet etwa Windows Schriftgrößenangaben anders in Pixel um als etwa grafische Oberflächen unter Linux oder als das Macintosh-Betriebssystem OS X. Ferner bieten moderne Browser die Möglichkeit, Schriftgrade an die Bedürfnisse des Nutzers anzupassen, worauf ebenfalls Bedacht zu nehmen ist. Kurzum - vieles in CSS steht nur genau in der Datei, aber die Ergebnisse am Bildschirm können doch recht unterschiedlich und nicht selten unbefriedigend sein. Testen Sie daher mit möglichst vielen Browsern, um keine Besucher zu verärgern. Idealerweise entwickeln Sie unter Zuhilfenahme der obgenannten qualitativ hochwertigen Browser und korrigieren anschließend Darstellungsfehler in fehlerbehafteten Exemplaren.

Ein ganz wichtiger Aspekt beim Entwerfen von Stylesheets für Web-Seiten sind aber auch die Menschen, die diese Web-Seiten als Besucher betrachten sollen. Es gibt nicht wenige Menschen, die Farben und Formen oder kleine Schrift aufgrund visueller Schwächen nur eingeschränkt wahrnehmen können. Was Sie beim Designen vielleicht als "edel" empfinden, empfinden solche Menschen nur noch als "unleserlich". Und "unleserlich" bedeutet: Sie haben wieder einen Besucher weniger auf Ihren Seiten. Stylesheets verführen aufgrund ihrer Möglichkeiten leicht zur Verwendung ungewöhnlicher Schriftarten oder zu Dingen wie Ton-in-Ton-Farbgebung. So "schön" das auch aussehen mag - es kann je nach Anzeigegerät und visuellem Auflösungsvermögen beim Betrachter schnell auf Kosten der "Usability" (Benutzbarkeit) und damit der Zweckmäßigkeit gehen. Andererseits können Sie Stylesheets auch explizit dafür nutzen, um Seiten für sehschwache Menschen zu optimieren. Ordentliche Farbkontraste, Schriftarten im normalgroßen Bereich, übliche Schriftweiten und Zeilenhöhen, Vermeidung von kritischen Farbkombinationen wie rot/grün bei Hintergrund/Vordergrund - das sind Eigenschaften, die gut besuchte Web-Seiten aufweisen sollten.

Wenn Sie Web-Seiten gestalten, müssen Sie daraus Ihre eigenen Konsequenzen ziehen. Stylesheets erlauben Ihnen völlig neue Möglichkeiten beim Web-Seiten-Layout. Je intensiver Sie Ihre Layouts jedoch von ungewöhnlichen Stylesheet-Effekten abhängig machen, desto problematischer können die Seiten auf schwacher Hardware, bei sehschwachen Menschen oder Nutzern veralteter Browser wirken. Zwar gibt es außer textbasierten Browsern wie Lynx kaum noch Browser mit nennenswerter Verbreitung, die Stylesheets gar nicht unterstützen, doch gerade der Internet Explorer als Browser mit dem bislang höchsten Marktanteil sorgt hinsichtlich CSS für die eine oder andere Überraschung. Bedenken Sie auch, dass das Publikum Ihre Vorstellungen von gutem Design nicht immer teilen muss und CSS eventuell gar gänzlich deaktiviert. Was bleibt, ist die reine HTML-Darstellung. Zu diesem "Härtetest" sollten Sie sich auf jeden Fall zwingen, um zu begutachten, ob die Reihenfolge der Inhalte deren Wichtigkeit entspricht.

CSS-Formate und CSS-Eigenschaften

Stylesheets bestehen aus Formaten, die Sie für bestimmte HTML-Elemente oder für eine bestimmte Auswahl von HTML-Elementen definieren. Zum Auswählen einer bestimmten Gruppe von HTML-Elementen, für die ein Format gelten soll, gibt es in CSS die Syntax der so genannten Selektoren. CSS-Formate lassen sich entweder in einem zentralen Style-Bereich definieren, in einer externen CSS-Datei oder direkt im einleitenden Tag eines HTML-Elements.

CSS-Formate bestehen aus einer oder mehreren Eigenschaften und Wertzuweisungen an diese Eigenschaften. So können Sie beispielsweise ein Format für Überschriften 3. Ordnung definieren, bei dem Sie für Eigenschaften wie Schriftgröße, Schriftfarbe und Absatz-Abstand entsprechende Werte bestimmen.

CSS-Begriffe

Die nachfolgende Regel setzt sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt) und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:

Selektor { Eigenschaft:Wert; }

Die Kombination aus Eigenschaft und Wert wird als Deklaration bezeichnet.

Im Kapitel Kapitel CSS-Formate definieren wird beschrieben, an welchen Stellen Sie CSS in HTML einbinden können, wie die Selektion von HTML-Elementen funktioniert und welche generellen Regeln für Format-Definitionen gelten. Das Kapitel Kapitel CSS-Eigenschaften beschreibt dagegen systematisch die einzelnen möglichen Eigenschaften für die Element-Formatierung, die Sie innerhalb von Formaten notieren können, und mögliche Wertzuweisungen für diese Eigenschaften. Im Kapitel Kapitel CSS-basierte Layouts schließlich wird gezeigt, wie die Möglichkeiten von CSS praktisch zur Gestaltung von Web-Seiten genutzt werden können.

nach oben
weiter | Seite Stylesheets in HTML einbinden
zurück | Seite HTML-Varianten
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Formate definieren

SELFHTML

CSS-Formate definieren
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML und Seite Stylesheets und HTML.
Dieser Abschnitt beschreibt, wie Sie Stylesheets in HTML definieren können. Ferner werden die allgemeinen Regeln für Stylesheets angesprochen.
Der Abschnitt besteht aus folgenden Seiten:

Seite Stylesheets in HTML einbinden
Seite Zentrale Formate definieren
Seite HTML-Elemente direktformatieren
Seite Kaskade - Anwendung von Stylesheets auf Dokumente
Seite Maßeinheiten, Farbangaben und Wertzuweisung
Seite Das Box-Modell

nach oben

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Formate definieren / Stylesheets in HTML einbinden

SELFHTML

Stylesheets in HTML einbinden
Informationsseite

nach unten Formate zentral für eine HTML-Datei definieren
nach unten Formate zentral in separater CSS-Datei definieren
nach unten Formate innerhalb eines HTML-Elements definieren
nach unten Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien
nach unten Format-Definitionen für unterschiedliche Ausgabemedien
nach unten Kommentare innerhalb von Stylesheet-Bereichen
nach unten Stylesheet-Sprache ausdrücklich festlegen

nach unten

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Formate zentral für eine HTML-Datei definieren

Sie können im head-Element einer HTML-Datei einen Bereich für CSS-Formate definieren.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das style-Element</title>
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>
<body>
<h1>Das style-Element</h1>
</body>
</html>

Erläuterung:

Mit <style...> ... </style> notieren Sie einen Bereich für Stylesheet-Formatdefinitionen (style = Stil, Format). Im einleitenden <style>-Tag müssen Sie den Seite MIME-Typ der Stylesheet-Sprache angeben. Für CSS ist das die Angabe type="text/css". Zwischen dem einleitenden Tag und dem abschließenden </style> können Sie dann zentrale CSS-Formate definieren. Lesen Sie dazu den Abschnitt Seite zentrale Formate definieren.

Beachten Sie:

Damit ältere Web-Browser, die keine Stylesheets kennen, den Inhalt des style-Elements nicht irrtümlich als anzuzeigenden Text interpretieren, können Sie den Inhalt in einen Seite HTML-Kommentar (<!-- ... -->) einbinden, so wie im obigen Beispiel. Obwohl dieses Auskommentieren von Stylesheet-Bereichen eine gängige Praxis ist, wird in den Codebeispielen in SELFHTML darauf verzichtet, denn die Browser aus den Anfangstagen des WWW, die CSS-Bereiche nicht erkennen können, sind weitestgehend zu vernachlässigen. Beachten Sie in diesem Zusammenhang die Seite Unterschiede zwischen XHTML und HTML.

Formate, die Sie auf diese Weise definieren, sind für diese eine HTML-Datei gültig.

Es ist durchaus erlaubt, mehrere style-Bereiche innerhalb des HTML-Dateikopfs zu notieren. Sinnvoll ist das beispielsweise, wenn Sie mal Style-Definitionen mit unterschiedlichen Style-Sprachen und entsprechend unterschiedlichem MIME-Typ in einer HTML-Datei notieren möchten.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Formate zentral in separater CSS-Datei definieren

In vielen Fällen werden Sie einheitliche Formate für alle HTML-Dateien Ihres Projekts haben wollen. Dann brauchen Sie die Angaben nicht in jeder Datei zu wiederholen. Stattdessen können Sie die Formate in einer separaten Textdatei definieren und diese Datei einfach in jeder gewünschten HTML-Datei einbinden. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen die separate CSS-Datei eingebunden ist.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das link-Element f&uuml;r Stylesheets</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
/* ... hier sind dateispezifische Formate erlaubt ... */
</style>
</head>
<body>
<h1>Das link-Element f&uuml;r Stylesheets</h1>
</body>
</html>

Erläuterung:

Im Dateikopf einer HTML-Datei können Sie mit <link...> eine CSS-Datei referenzieren, die CSS-Formatdefinitionen enthält (link = Verweis). Innerhalb des <link>-Tags müssen die Angaben rel="stylesheet" type="text/css" stehen (rel = relation = Bezug, type = MIME-Typ). Beim Attribut href geben Sie die gewünschte Datei an (href = hyper reference = Hypertext-Referenz). Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, müssen Sie an dieser Stelle Pfadangaben oder absolute Seite URIs notieren. Das funktioniert genauso wie etwa beim Seite Einbinden von Grafiken.

Bei der referenzierten Datei muss es sich um eine reine Textdatei handeln, die die Endung .css haben sollte. Die Datei darf nichts anderes als Definitionen Seite zentraler Formate und nach unten Kommentare enthalten. Eine solche CSS-Datei können Sie mit jedem einfachen Texteditor erstellen. In SELFHTML wird beispielsweise eine separate CSS-Datei für alle Dokumentdateien verwendet. Sie können diese Beispiel-Seite CSS-Datei als Text betrachten (der Verweis führt zu einer Datei namens selfhtmlcss.txt, damit die Datei in jedem Fall im Browser angezeigt wird - die CSS-Datei heißt eigentlich selfhtml.css).

Kodierung von externen Stylesheets mittels @charset

Wie auch in Seite HTML-Dateien können Sie in externen Stylesheets optional angeben, welche Zeichenkodierung die CSS-Datei verwendet. Diese Angabe ist für den Web-Browser besonders wichtig, denn sie teilt ihm mit, nach welcher Kodierung die Bytes der Datei in Zeichen umgewandelt werden müssen. Informationen über ISO 8859-1 und andere Kodierungen finden Sie im Abschnitt Seite Zeichenkodierungen (ISO-8859-Familie und andere). Die CSS-Syntax lautet:

@charset "ISO-8859-1";

Diese Angabe muss zwingend als absolut erste im externen Stylesheet stehen und darf nur einmal vorkommen. Im Konfliktfall, also wenn der Webserver im HTTP-Header eine hiervon abweichende Angabe sendet, wird üblicherweise die Angabe des HTTP-Headers verwendet. Innerhalb von style-Bereichen, die im nach oben Dateikopf einer HTML-Datei notiert werden ist diese Angabe nicht gestattet, da in diesem Fall die Kodierung der HTML-Datei herangezogen wird.

Beachten Sie:

Wenn Sie mit <link...> eine Datei mit CSS-Formatdefinitionen referenzieren, brauchen Sie keinen Bereich <style...>...</style>. Im obigen Beispiel wird dennoch ein solcher Bereich definiert. Das soll zeigen, dass Sie beide Arten, Formate zu definieren, miteinander kombinieren können. Wenn Sie beide Arten benutzen, haben Formate, die direkt innerhalb von <style...>...</style> definiert werden, im Konfliktfall Vorrang vor den referenzierten Formaten. So können Sie etwa immer wieder verwendete Formate als Basis-Stylesheet importieren und einige davon mit dateispezifischen Formaten ergänzen oder überschreiben. Ebenfalls möglich ist die Einbindung mehrerer Stylesheets mit link-Elementen.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Formate innerhalb eines HTML-Elements definieren

Unabhängig davon, ob Sie Formate zentral definieren oder aus einer separaten CSS-Datei einbinden, können Sie einzelne HTML-Elemente formatieren.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das style-Attribut</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
/* ... hier sind dateispezifische Formate erlaubt ... */
</style>
</head>
<body>
<h1 style="[element-spezifische Formate]">Das style-Attribut</h1>
</body>
</html>

Erläuterung:

Mit dem Kapitel Universalattribut style im einleitenden Tag eines Elements können Sie CSS-Formate für dieses eine Element notieren. Weitere Einzelheiten dazu werden im Abschnitt Seite HTML-Elemente direktformatieren beschrieben.

Beachten Sie:

HTML-Elemente müssen HTML-4.0 konform mit Start- und End-Tag notiert sein, damit CSS-Formatierungen darin angezeigt werden. Dies gilt vor allem für Elemente, bei denen früher mal nur die Notation des Start-Tags genügte, etwa bei p, li, option, td und th.

Das obige Beispiel zeigt, dass Sie parallel zu den Formatdefinitionen im HTML-Element auch die Methoden zur zentralen Formatdefinition verwenden können. Im Konfliktfall haben stets die "inneren" Formatdefinitionen Vorrang vor den "äußeren". Wenn Sie also im einleitenden <h1>-Tag eine andere Schriftart angeben, als Sie im zentralen style-Bereich für h1-Elemente festlegen, dann hat die Definition im einleitenden <h1>-Tag Vorrang vor der zentralen Definition, genauso, wie diese wiederum Vorrang vor den Definitionen der eingebundenen externen CSS-Datei hat.

CSS 2.0 Netscape 6.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien

Bildschirm und Drucker beispielsweise sind sehr unterschiedliche Ausgabemedien für ansprechend gestaltete Daten. Beide Ausgabemedien haben ihre eigenen Gesetze. Während am Bildschirm etwa helle Schriften auf dunklen Hintergründen attraktiv aussehen, ist das für die Ausgabe am Drucker keine gute Lösung. Bei der Druckerausgabe sehen dagegen Absatzeinzüge von mindestens 2cm besser aus, während durch entsprechende Angaben am Bildschirm möglicherweise kostbarer Präsentationsraum verschenkt wird. Deshalb können Sie für verschiedene Ausgabemedien verschiedene externe CSS-Dateien einbinden, die unterschiedliche Formatdefinitionen enthalten können. Die Software muss beim Präsentieren der Seiten entscheiden, welche der eingebundenen CSS-Dateien maßgeblich ist. Wenn der Web-Browser also beispielsweise die Seiten am Bildschirm anzeigt, sollte er die CSS-Datei verwenden, die Sie explizit für das Medium "Bildschirm" bestimmen, und wenn der Anwender eine Seite ausdruckt, sollte der Browser stattdessen die CSS-Datei verwenden, die Sie für das Medium "Drucker" angeben.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Stylesheets f&uuml;r unterschiedliche Ausgabemedien</title>
<link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print, embossed" href="druck.css">
<link rel="stylesheet" media="aural" href="speaker.css">
</head>
<body>
<p>Stylesheets f&uuml;r unterschiedliche Ausgabemedien</p>
</body>
</html>

Erläuterung:

Zunächst benötigen Sie für jedes Ausgabemedium eine Textdatei mit der Endung .css, die nichts anderes als die gewünschten CSS-Formatdefinitionen für das gewünschte Ausgabemedium enthält. In einer HTML-Datei können Sie alle CSS-Dateien wie im obigen Beispiel einbinden. Das Einbinden funktioniert genauso wie bei nach oben Formate zentral in separater CSS-Datei definieren beschrieben. Neu ist hierbei nur, dass gleich mehrere <link>-Tags zum Einbinden notiert sind, und dass diese zusätzlich das Attribut media enthalten. Mit diesem Attribut bestimmen Sie, für welches Ausgabemedium die Datei verwendet werden soll, die Sie dann bei der Angabe href einbinden. Sie können einen oder mehrere Medientypen bei media angeben. Mehrere Angaben werden durch Kommata getrennt.

Medientypen:

In CSS2 werden folgende möglichen Angaben genannt:

Angabe | Bedeutung
media="all" | CSS-Datei gilt für alle Medientypen.
media="aural" | CSS-Datei gilt für computergesteuerte synthetische Sprachausgabe. Beachten Sie in diesem Zusammenhang auch die Seite CSS-Eigenschaften für Sprachausgabe.
media="braille" | CSS-Datei gilt für Ausgabegeräte mit so genannter "Braille-Zeile". Dabei wird Text eine veränderbare Oberflächenstruktur des Materials der Braille-Zeile umgewandelt und über Abtasten mit dem Finger gelesen. Diese Form des Ausgabemediums ist für blinde Menschen gedacht.
media="embossed" | CSS-Datei gilt für Braille-Drucker. Dabei wird Text in Form von abtastbaren Oberflächenstrukturen in Papier oder ein vergleichbares Material gestanzt. Wie braille ist embossed für blinde Menschen gedacht.
media="handheld" | CSS-Datei gilt für die Anzeige auf tragbaren Kleinstcomputern. Web-fähige elektronische Organizer sind typische Vertreter dieser Gattung.
media="print" | CSS-Datei gilt für den Ausdruck auf Papier. Web-Browser sollten diese Formatdefinitionen verwenden, wenn der Anwender die Web-Seite ausdrucken möchte. Beachten Sie dazu auch die Seite CSS-Eigenschaften für Printmedien.
media="projection" | CSS-Datei gilt für die Datenprojektion mit Beamern und ähnlichen Geräten.
media="screen" | CSS-Datei gilt für die Bildschirmanzeige.
media="tty" | CSS-Datei gilt für nicht-grafische Ausgabemedien mit fixer Zeichenbreite, beispielsweise Fernschreiber. Aber auch für text-orientierte Browser wie Lynx ist dieser Medientyp interessant.
media="tv" | CSS-Datei gilt für TV-ähnliche Ausgabegeräte, die sich durch grobe Bildschirmauflösung und mangelnde Unterstützung beim Scrollen in Text, dafür aber durch Sound-Unterstützung auszeichnen.

Beachten Sie:

Der Internet Explorer interpretiert diese Angaben ab Version 4 zu einem gewissen Teil.

Der Medientyp aural wird in CSS 2.1 "missbilligt", da hierfür der neue Medientyp speech in CSS 3 vorgesehen ist.

Einbindung mittels @import

Die Syntax mit <link...> zum Einbinden weiterer Stylesheet-Dateien ist HTML-Syntax. Daneben gibt es auch noch eine CSS-Syntax, die den gleichen Zweck hat:

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Stylesheets mittels @import einbinden</title>
<style type="text/css">
@import "allgemein.css";
@import url("erweitert.css");
@import url("druck.css") print, embossed;
@import url("pocketcomputer.css") handheld;
@import url("normal.css") screen;
</style>
</head>
<body>
<h1>Stylesheets mittels @import einbinden</h1>
</body>
</html>

Erläuterung:

Eine CSS-spezifische Einbindung wird innerhalb eines style-Bereichs im Dateikopf oder zwingend am Beginn eines externen Stylesheets notiert. Mit @import oder @import url(…) starten Sie die Angabe. In Hochkommata notieren Sie dahinter den Dateinamen bzw. die Adresse der separaten CSS-Datei. Hinter der Dateiangabe notieren Sie optional, durch Leerraum getrennt, das gewünschte Ausgabemedium. Es dürfen auch mehrere sein, getrennt durch Kommata. Dabei sind die gleichen Medientypen erlaubt wie im HTML-Attribut media. Am Ende der @import-Angabe muss ein Strichpunkt stehen.

Beachten Sie:

Der Internet Explorer 5.x unterstützt die Einbindung über @import nur bezüglich der Ausgabemedien screen und all.

CSS 2.0 Netscape 6.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Format-Definitionen für unterschiedliche Ausgabemedien

Neben der Möglichkeit, nach oben Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien in HTML einzubinden, steht auch die Möglichkeit zur Verfügung, innerhalb eines style-Bereichs zwischen unterschiedlichen Ausgabemedien zu unterscheiden.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Beschr&auml;nkung auf Medientypen</title>
<style type="text/css">
@media print {
  /* ... Formatdefinitionen zum Drucken ... */
  selektor { eigenschaft:wert; }
}
@media screen, handheld {
  /* ... Formatdefinitionen zur Bildschirmausgabe ... */
  selektor { eigenschaft:wert; }
}
</style>
</head>
<body>
<h1>Beschr&auml;nkung auf Medientypen</h1>
</body>
</html>

Erläuterung:

Mit @media definieren Sie innerhalb eines style-Bereichs einen Bereich für Formatdefinitionen für ein bestimmtes Ausgabemedium. Für jede Mediensorte, die Sie unterscheiden wollen, können Sie eine solche Einschränkung notieren. Hinter der Regel @media folgt, durch Leerraum getrennt, das gewünschte Ausgabemedium. Sie können auch mehrere Ausgabemedien durch Kommata getrennt in Folge notieren. Erlaubte Angaben sind die gleichen wie im HTML-Attribut media (siehe nach oben Medientypen).

Im Anschluss an die @media-Angabe müssen Sie geschweifte Klammern { und } notieren. Alle Formatdefinitionen, die Sie innerhalb dieser geschweiften Klammern notieren, sind dann nur für das oder die angegebenen Medien gültig.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Kommentare innerhalb von Stylesheet-Bereichen

Um Ihre Formatdefinitionen intern auszukommentieren, steht eine spezielle, an die Programmiersprache C angelehnte Syntax zur Verfügung.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS-Syntax für Kommentare</title>
<style type="text/css">
/*
  Basis-Stylesheet
*/

  h1 { color:blue; } /* Format für blaue Überschrift, ergänzt am 19.07.2001 */
</style>
</head>
<body>
<h1>CSS-Syntax für Kommentare</h1>
</body>
</html>

Erläuterung:

Innerhalb von <style...>...</style> können Sie mit /* - also einem Schrägstrich und einem Sternzeichen in Folge - einen Kommentar einleiten. Mit der umgekehrten Zeichenfolge - also mit */ - beenden Sie den Kommentar. Anfang und Ende des Kommentars müssen nicht in der gleichen Zeile stehen, auch beliebig viele Leerzeilen sind erlaubt. Kommentare dürfen jedoch nicht verschachtelt werden. Einzeilige Kommentare wie in JavaScript // existieren in CSS nicht.

HTML 4.0 Stylesheet-Sprache ausdrücklich festlegen

Sie können dem Browser in einer HTML-Datei mit Hilfe einer Seite Meta-Angabe ausdrücklich mitteilen, dass diese Datei Stylesheet-Definitionen in einer bestimmten Definitionssprache enthält. Die Angabe ist in der gegenwärtigen Praxis und für die CSS-Sprache nicht zwingend erforderlich. Die Angabe dient dazu, um dem Client (also etwa dem Web-Browser), aber auch dem Web-Server eine Möglichkeit zur Verfügung zu stellen, der beiden Seiten helfen soll, sich vor dem Interpretieren der Datei über die zu verwendende Stylesheet-Syntax zu einigen.

Beispiel:

<head>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>

Erläuterung:

Mit <meta http-equiv="Content-Style-Type" content="text/css"> im Kopf einer HTML-Datei erzwingen Sie die CSS-Syntax als verbindlich für Formatdefinitionen innerhalb dieser Datei. Wenn Sie eine andere Stylesheet-Sprache als CSS verwenden wollen, müssen Sie anstelle von "text/css" den Seite MIME-Typ der betreffenden Formatdefinitionssprache angeben.

nach oben
weiter | Seite Zentrale Formate definieren
zurück | Seite Stylesheets und HTML
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-Formate definieren

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Formate definieren / Zentrale Formate definieren

SELFHTML

Zentrale Formate definieren
Informationsseite

nach unten Aufbau zentraler Formate
nach unten Formate für HTML-Elemente definieren
nach unten Formate für verschachtelte HTML-Elemente definieren
nach unten Attributbedingte Formate definieren
nach unten Formate für Klassen definieren
nach unten Klassen in Verbindung mit den Elementen div und span
nach unten Individualformate definieren
nach unten Pseudoelemente und Pseudoklassen definieren
nach unten

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Aufbau zentraler Formate

Die hier beschriebenen Möglichkeiten gelten, wenn Sie:
Seite Formate zentral für eine HTML-Datei definieren oder
Seite Formate zentral in separater CSS-Datei definieren

Zentrale Formate folgen einem bestimmten Grundmuster:

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Zentrale Formate</title>
<style type="text/css">
h1 { color:red; font-size:48px; }
</style>
</head>
<body>
<h1>48 Pixel und Rot!</h1>
</body>
</html>

Erläuterung:

Das Beispiel enthält in einem style-Bereich eine Formatdefinition für h1-Elemente der Datei, also für Überschriften 1. Ordnung. Solche Formatdefinitionen haben immer den gleichen Aufbau und bestehen aus folgenden Teilen:

Selektor:

Als "Selektoren" wird das bezeichnet, was vor den geschweiften Klammern steht. Ein Selektor wählt aus, wofür die folgenden Definitionen gelten sollen. Im obigen Beispiel gelten die Formate für alle Überschriften 1. Ordnung (h1-Elemente). Es sind jedoch auch komplexere Selektoren möglich sowie mehrere, durch Komma getrennte Selektoren.

Definitionen:

Die eigentlichen Definitionen zum Format stehen stets in geschweiften Klammern { und }. Sie bestehen darin, dass eine oder mehrere CSS-Eigenschaften notiert werden und einen Wert erhalten. Im obigen Beispiel werden etwa die CSS-Eigenschaften color (Schriftfarbe) und font-size (Schriftgröße) verwendet. Der Eigenschaft color wird der Wert red zugewiesen, und der Eigenschaft font-size der Wert 48px. Zwischen Eigenschaft und Wertzuweisung muss stets ein Doppelpunkt stehen. Abgeschlossen wird eine Definition mit einem Strichpunkt (;). Nur bei der letzten Definition vor der schließenden geschweiften Klammer darf der Strichpunkt auch entfallen.

Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe Kapitel CSS-Eigenschaften.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Formate für HTML-Elemente definieren

In einem style-Bereich oder in einer externen CSS-Datei können Sie für HTML-Elementtypen, zum Beispiel zu Kapitel Absatztypen und Textgestaltung oder für Kapitel Tabellen-Elementtypen, CSS-Formate definieren. Wenn Sie entsprechende HTML-Elemente dann in der HTML-Datei verwenden, werden alle Formate angewendet, die Sie für den Elementtyp definiert haben. So können Sie beispielsweise für Überschriften 1. Ordnung definieren, dass diese in der Schriftart Helvetica, 26 Pixel, rot, fett und kursiv mit einem Absatznachabstand von 20 Pixel angezeigt werden. Wenn Sie dann im Text der HTML-Datei eine Überschrift 1. Ordnung wie gewohnt definieren, werden diese Formateigenschaften dabei berücksichtigt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Element-Selektor</title>
<style type="text/css">
body { background-color:#FFFFCC;
       margin-left:100px; }
* { color:blue; }
h1 { font-size:300%;
     color:#FF0000;
     font-style:italic;
     border-bottom:solid thin black; }
p,li  { font-size:110%;
        line-height:140%;
        font-family:Helvetica,Arial,sans-serif;
        letter-spacing:0.1em;
        word-spacing:0.3em; }
</style>
</head>
<body>
<h1>&Uuml;berschrift 1. Ordnung</h1>
<p>ein normaler Textabsatz</p>
<ul>
<li>Ein Listenpunkt</li>
<li>Ein anderer Listenpunkt</li>
</ul>
</body>
</html>

Erläuterung:

Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor den Namen des HTML-Elementtyps, und zwar ohne spitze Klammern. Im obigen Beispiel werden body (Dokument), h1 (Überschriften 1. Ordnung), p (Textabsätze) und li (Listeneinträge) auf diese Weise notiert. Über den Universalselektor * haben Sie die Möglichkeit, Eigenschaften für alle Elemente zu definieren, wobei jedem Element natürlich nur die jeweils zulässigen Eigenschaften zugewiesen werden.
Wenn Sie ein Format für mehrere HTML-Elementtypen definieren wollen, geben Sie alle gewünschten Elementtypen an und trennen Sie diese durch Kommata, so wie im obigen Beispiel p,li.

Es bedeutet also das gleiche, wenn Sie notieren:
h1 { font-family:Helvetica,sans-serif; }
h2 { font-family:Helvetica,sans-serif; }
oder wenn Sie notieren:
h1, h2 { font-family:Helvetica,sans-serif; }

Dahinter folgen die gewünschten Definitionen. Im obigen Beispiel wird dem body-Element eine hellgelbe Hintergrundfarbe (background-color:#FFFFCC;) und ein linker Randabstand von 100 Pixeln (margin-left:100px;) zugewiesen. Über den Universalselektor wird für alle Elemente zunächst blaue Schriftfarbe (color:blue;) definiert. Überschriften 1. Ordnung (h1) erhalten eine Schriftgröße von 300 Prozent (font-size:300%;), die abweichende Schriftfarbe rot (color:#FF0000;) und den Schriftstil kursiv (font-style:italic;). Textabsätze (p) und Listenpunkte (li) sollen in 110 Prozent Schriftgröße (font-size:110%;) mit einer Zeilenhöhe von 140 Prozent (line-height:140%;) in Schriftart Helvetica, oder wenn nicht verfügbar, dann in Arial, und wenn ebenfalls nicht verfügbar, in irgendeiner Sans-Serif-Schrift dargestellt werden (font-family:Helvetica,Arial,sans-serif;). Außerdem werden auch noch Angaben zum Zeichenabstand (letter-spacing), Wortabstand (word-spacing) und zur Textfarbe gemacht.

Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe Kapitel CSS-Eigenschaften.

CSS 1.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Formate für verschachtelte HTML-Elemente definieren

Wenn Sie nichts anderes angeben, übernimmt ein HTML-Element, das innerhalb eines anderen HTML-Elements vorkommt, dessen Eigenschaften und fügt seine eigenen Eigenschaften nur hinzu. Wenn Sie beispielsweise für Überschriften 1. Ordnung die Schriftart Times und die Farbe rot definieren, erscheint Text, der innerhalb einer solchen Überschrift mit <i>...</i> formatiert wird, ebenfalls rot und in Times, aber zusätzlich kursiv.

Sie können mit Hilfe von Stylesheets jedoch bestimmen, dass ein HTML-Element bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Elements vorkommt. So können Sie etwa bestimmen, dass <i>...</i> innerhalb von Überschriften nicht kursiv, stattdessen aber in blauer Farbe dargestellt wird, während das gleiche Element innerhalb anderer HTML-Tags nach wie vor nichts anderes als eine kursive Darstellung bewirkt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Nachfahren-Selektor</title>
<style type="text/css">
h1 { color:red; }
h1 i { color:blue; font-style:normal; }
</style>
</head>
<body>
<h1>Wir lernen <i>Stylesheets</i></h1>
<p>Wir lernen <i>Stylesheets</i></p>
</body>
</html>

Erläuterung:

Im Beispiel wird festgelegt, dass Textabschnitte, die mit <i> ... </i> ausgezeichnet sind, nicht wie sonst üblich kursiv, sondern normal (font-style:normal;), stattdessen aber mit blauer Farbe (color:blue;) dargestellt werden. Aber nur dann, wenn das i-Element innerhalb einer Überschrift 1. Ordnung (h1) vorkommt. Dazu notieren Sie zuerst den Namen des übergeordneten Elementtyps, im Beispiel h1, und dahinter, durch Leerraum getrennt, den Namen des inneren Elementtyps, im Beispiel i.

In der ersten Zeile innerhalb des <body>-Bereichs im obigen Beispiel kommt diese spezielle Definition zum Tragen. In der zweiten Zeile dagegen, wo <i>...</i> innerhalb eines Textabsatzes vorkommt, hat es die übliche Wirkung.

Bei mehreren, durch Komma getrennten Selektoren wird häufig übersehen, dass eine für den ersten Selektor angegebene Verschachtelung die folgenden Selektoren nicht betrifft; über h1 i, b würden alle b-Elemente selektiert.

CSS 2.0 Netscape 6.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Weitere Möglichkeiten für verschachtelte HTML-Elemente bei CSS2

Ab CSS2 gibt es weitere Möglichkeiten für Selektoren-Angaben zu verschachtelten Elementen:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Nachfahren-Selektor, Kind-Selektor, Nachbar-Selektor</title>
<style type="text/css">
div i { color:red; }
div * b { color:violet; }
div > p { color:blue; }
div + p { margin-top:5em; }
</style>
</head>
<body>
<div>

Text in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.

<p>Textabsatz in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.</p>

<table border="1">
 <tr>
  <td><p>Textabsatz in einer Tabellenzelle.</p></td>
 </tr>
</table>

</div>

<p>Textabsatz außerhalb eines div-Bereichs mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.</p>
<p>Noch ein Textabsatz.</p>

</body>
</html>

Erläuterung:

Die Selektoren im Beispiel haben folgende Bedeutung:

Nachfahren-Selektoren

div i { color:red; }

Damit wird wie nach CSS-1.0-Syntax bekannt festgelegt, dass i-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, rote Textfarbe (color:red;) erhalten. Dabei wird das i-Element auch dann rot formatiert, wenn es z.B. in dieser Form vorkommt: <div><ul><li><i></i></li></ul></div>. Deshalb gibt es ab CSS2 die Möglichkeit, genauer festzulegen, für welche Verschachtelung die Formatdefinition gelten soll.

div * b { color:violet; }

Der Universalselektor * wird hier als Platzhalter für ein beliebiges Element und damit für eine weitere Verschachtelungsebene verwendet. Im obigen Beispiel wird festgelegt, dass b-Elemente, die innerhalb eines div-Bereichs vorkommen, nur dann violette Textfarbe (color:violet;) erhalten, wenn das b-Element in dieser oder einer vergleichbaren Form vorkommt: <div><p><b></b></p></div>, also mindestens zwei Ebenen unterhalb des div-Elements. Im obigen Beispiel sind verschiedene Textstellen an verschiedenen Stellen mit <b>...</b> ausgezeichnet. Das erste b-Element in dem Text, der zuerst und direkt innerhalb des div-Bereichs notiert ist, erhält noch keine violette Farbe, wohl aber das nächste b-Element im gleichen Satz, da dieses Element bereits zwei Ebenen unterhalb des div-Elements liegt (das i-Element liegt dazwischen).

Kind-Selektor

div > p { color:blue; }

Mit dem Zeichen > wird in diesem Selektor festgelegt, dass p-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, nur dann blaue Textfarbe (color:blue;) erhalten, wenn das p-Element in dieser Form vorkommt: <div><p></p></div>, also eine Ebene unterhalb des div-Elements. Im obigen Beispiel ist innerhalb des div-Bereichs unter anderem auch eine Tabelle notiert, in der noch mal ein p-Element vorkommt. Dort greift die Formatierung der blauen Farbe nicht, weil das p-Element mehr als eine Verschachtelungsebene unterhalb des div-Elements liegt (die Tabellenelemente sind dazwischen).

Nachbar-Selektor

div + p { margin-top:100px; }

Mit dem Zeichen + wird in diesem Selektor festgelegt, dass p-Elemente, die unmittelbar auf ein div-Element hin folgen, einen Abstand von 100 Pixeln nach oben hin erhalten (margin-top:100px;). Im obigen Beispiel ist das bei dem vorletzten p-Element der Fall. Dieses folgt unmittelbar hinter dem div-Bereich.

Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe Kapitel CSS-Eigenschaften.

Beachten Sie:

Der Internet Explorer 6.0 interpretiert die Selektoren > und + noch nicht.

CSS 2.0 Netscape 6.0 MS IE 7.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Attributbedingte Formate definieren

Mit Hilfe attributbedingter Formate können Sie in Selektoren angeben, dass Formatdefinitionen nur für Elemente mit bestimmten Attributen oder sogar nur für Elemente mit bestimmten Wertzuweisungen an Attribute gelten sollen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Attribut-Selektoren</title>
<style type="text/css">
p { font-weight:bold; font-family:Tahoma,sans-serif; font-size:1.2em; }
p[align] { color:red; }
p[align=center] { color:blue; text-align:left; }
td[abbr~=Berlin] { background-color:#FFFF00 }
*[lang|=en] { background-color:#FF0000; color:#FFFFFF; }
</style>
</head>
<body>
<p>Das ist ein Textabsatz, ein stinknormaler.</p>
<p align="right">Das ist ein Textabsatz, rechts ausgerichtet.</p>
<p align="center">Das ist ein Textabsatz, zentriert? Wirklich zentriert?</p>
<table border="1"><tr>
  <th>Berlin</th>
  <th>Hamburg</th>
</tr><tr>
  <td abbr="Es folgen Infos zu Berlin">Eine Menge Inhalt zu Berlin</td>
  <td abbr="Es folgen Infos zu Hamburg">Eine Menge Inhalt zu Hamburg</td>
</tr></table>
<p>Ein Textabsatz <span lang="fr">avec</span> Text <span lang="en">about</span>
einen <span lang="en-US">English man in New York</span></p>
</body>
</html>

Erläuterung:

In dem Beispiel ist zunächst eine Formatdefinition für alle p-Elemente notiert. Dann folgen jedoch zwei weitere Formatdefinitionen - ebenfalls für p-Elemente, aber nur für solche, die ein Attribut align haben. Mit der Syntax p[align] werden alle p-Elemente erfasst, die ein align-Attribut haben. Mit p[align=center] werden alle p-Elemente erfasst, die ein align="center" im einleitenden Tag haben. Mit td[abbr~=Berlin] werden alle Tabellenzellen des Typs td erfasst, die ein Attribut abbr besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort Berlin vorkommt. Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten Wörtern in Wertzuweisungen an Attribute. Mit *[lang|=en] schließlich werden alle Elemente erfasst, die ein Universalattribut lang mit einem Wert, der mit en beginnt aufweisen und danach eventuell einen Bindestrich enthalten (wie en oder en-US).

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Formate für Klassen definieren

Sie können Formate für Klassen definieren. Anwenden können Sie solche Klassen in HTML mit dem Kapitel Universalattribut class. So können Sie beispielsweise für Überschriften 1. Ordnung zwei Varianten erzeugen. Dazu vergeben Sie Namen für die Klassen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Klassen-Selektor</title>
<style type="text/css">
h1 { font-family:Arial,sans-serif; font-size:2em; font-weight:normal; }
h1.hinterlegt { background-color:#FFFF00 }
*.hinterlegt { background-color:#00FFFF }
.extra { background-color:#FF99FF }
.extra.hinterlegt { background-color:#FF0000 }
</style>
</head>
<body>
<h1>H1 ganz normal nur etwas formatiert</h1>
<h1 class="hinterlegt">H1 knallgelb hinterlegt</h1>
<h2>H2 ganz normal, <span class="hinterlegt"> türkis <b class="extra">lila</b> hinterlegt</span></h2>
<h3 class="extra hinterlegt">H3, rot hinterlegt</h3>
</body>
</html>

Erläuterung:

Es gibt zwei Möglichkeiten, Klassen für HTML-Elemente zu notieren: entweder für einen bestimmten HTML-Elementtyp, oder für keinen bestimmten. In jedem Fall bestimmen Sie eine Formatdefinition für eine Klasse, indem Sie im Selektor einen Punkt notieren und unmittelbar dahinter einen Namen für die Klasse angeben. Im obigen Beispiel wird mit h1.hinterlegt eine Klasse namens hinterlegt angesprochen, die aber nur für HTML-Elemente vom Typ h1 gilt: also z.B. auf HTML-Elemente wie <h1 class="hinterlegt"> anwendbar ist. Mit *.hinterlegt wird im Beispiel demonstriert, dass Sie durchaus den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden können. Der Stern gilt als Universalselektor und bedeutet so viel wie "für alle Elemente". Er kann auch ganz entfallen. Im Beispiel .extra können Sie das sehen. Ein h1-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor h1.hinterlegt bestimmt werden. Ein p-Element mit <p class="hinterlegt"> erhält dagegen die Formatierungen, die mit *.hinterlegt bestimmt werden. Es ist auch möglich, ausschließlich Elemente zu selektieren, die mehrere Klassennamen aufweisen. Notieren Sie in diesem Fall beide Klassenselektoren direkt hintereinander.

Die Namen hinter dem Punkt können Sie frei vergeben, Sie dürfen jedoch

  • keine Leerzeichen und deutsche Umlaute enthalten,
  • nicht mit einer Ziffer oder einem Bindestrich beginnen
  • und sollten keinen Unterstrich enthalten und nicht zu lang sein.

Beachten Sie:

Der Internet Explorer bis Version 6 versagt leider bei der Definition von .extra.hinterlegt und wendet diese Definition auf alle Elemente an, die der Klasse hinterlegt zugewiesen wurden, nicht nur dem Abschnitt, der mit class="extra hinterlegt" explizit beiden Klassen zugewiesen wurde.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Klassen in Verbindung mit den Elementen div und span

Die beiden HTML-Elemente Seite div und Seite span haben besondere Bedeutung für Stylesheets. Der Grund dafür ist, dass sie selber relativ eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt. Die Darstellung, nicht jedoch die mögliche Verschachtelung, lässt sich mit der Eigenschaft Seite display beeinflussen. Das div-Element eignet sich vor allem dafür, mehrere Elemente zu gruppieren und in ihrer Gesamtheit zu formatieren. Mit dem span-Element hingegen lassen sich kleinere Teilbereiche definieren, deren Darstellung mit CSS gestaltet werden kann.

Das folgende Beispiel zeigt, wie Sie mit <div>, <span> und Klassen Bereiche formatieren können, für die keine speziell dafür vorgesehenen HTML-Elemente existieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Klassen-Selektor</title>
<style type="text/css">
.beitrag { border:1px outset gray; margin:.5em; padding:.5em; background-color:#efd;}
.uebersetzung { border-bottom:1px dotted #900; }
.autor { font-style:italic; }
.datum { font-size:80%; color:#444; }
</style>
</head>
<body>

<div class="beitrag">
  <p>Wo finde ich weitere Information über HTML?
  <p class="autor">Moritz Ratlos, <span class="datum">21.05.2006</span></p>
</div>

<div class="beitrag">
  <p>Beispielsweise in der
    <a href="http://www.w3.org/TR/REC-html40/">HTML 4.01-
    <span lang="en" title="Empfehlung" class="uebersetzung">Recommendation</span></a>.
  </p>
  <p class="autor">Max Hilfreich, <span class="datum">22.05.2006</span></p>
</div>

<div class="beitrag">
  <p>Vielen Dank für den <span lang="en" title="Verweis" class="uebersetzung">Link!</span></p>
  <p class="autor">Moritz Ratlos, <span class="datum">22.05.2006</span></p>
</div>

</body>
</html>

Erläuterung:

Im style-Bereich des Beispiels werden Klassen für beliebige Elemente definiert, die diese Klassen mit class="beitrag", class="datum" usw. verwenden können und damit die entsprechenden Formate annehmen.

Im sichtbaren Bereich der Datei, also zwischen <body> und </body>, wurden Elemente der Typen div, p und span um class-Attribute erweitert. Die einzelnen Beiträge wurden mittels <div class="beitrag">…</div> gruppiert und im Stylesheet mit Rahmen, Abständen und einer Hintergrundfarbe versehen. Die Namen der Verfasser sowie das jeweilige Datum befinden sich in einem mit <p class="autor">…</p> ausgezeichneten Bereich, welcher zur Gänze kursiv angezeigt wird. Das Datum selbst wird aufgrund von class="datum" zusätzlich kleiner und heller dargestellt. Im Verweis des zweiten und im Text des dritten Abschnitts wurden fremdsprachige Bestandteile um die Attribute lang="en", title="…" und class="uebersetzung" ergänzt. Der über die Klasse .uebersetzung zugewiesene untere Rahmen verdeutlicht, dass zusätzliche Information, in diesem Fall die Übersetzung eines Begriffes im title-Attribut, verfügbar ist – grafische Browser stellen dessen Inhalt im Allgemeinen per Tooltip bereit.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Individualformate definieren

So wie Sie Formate für Klassen definieren können, die in HTML mit dem Kapitel Universalattribut class angesprochen werden, können Sie auch Formate definieren, die über das Universalattribut id angesprochen werden. Da die Wertzuweisung an ein solches Attribut ein dokumentweit eindeutiger Name sein sollte, handelt es sich also einfach um eine zentrale Formatdefinition für das eine Element mit diesem id-Namen. In CSS werden die id-Namen allerdings nicht nur wie beispielsweise in JavaScript als dokumentweit eindeutige Bezeichner betrachtet, sondern auch als elementtypweit eindeutige Bezeichner.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>ID-Selektor</title>
<style type="text/css">
#roterBereich {
   position:absolute;
   top:130px;
   left:30px;
   width:320px;
   padding:10px;
   margin:0px;
   border:4px solid #EE0000;
}
#blauerBereich {
   position:absolute;
   top:130px;
   left:400px;
   width:320px;
   padding:10px;
   margin:0px;
   border:4px solid #0000EE;
}
h1#Titel {
   font-family:Arial,sans-serif;
   font-size:2em;
   font-weight:normal;
   color:green;
}
</style>
</head>
<body>
<h1 id="Titel">Diese &Uuml;berschrift und zwei positionierte Bereiche</h1>
<div id="roterBereich"><h1>Der rote Bereich</h1></div>
<div id="blauerBereich"><h1>Der blaue Bereich</h1></div>
</body>
</html>

Erläuterung:

In dem Beispiel werden drei Individualformate definiert: zunächst einmal zwei Individualformate mit den Namen #roterBereich und #blauerBereich. Solche Formate beginnen also mit dem Gatterzeichen #, gefolgt von dem Namen. Ein HTML-Element, das diesen Namen als Wertzuweisung an das id-Attribut benutzt, bekommt dann die entsprechenden Formate zugewiesen. Das obige Beispiel zeigt einen typischen Anwendungsfall für Individualformate, nämlich das Definieren von Formaten für absolut positionierte Bereiche (position:absolute;).

Weiterhin wird ein Individualformat mit dem Selektor h1#Titel definiert. Das ist eine Syntax, die erst seit CSS2 zur Verfügung steht. Dabei wird vor dem Gatterzeichen, das ein Individualformat kennzeichnet, ein HTML-Elementtyp notiert, im Beispiel also h1 für Überschriften erster Ordnung. Hinter dem Gatterzeichen dann wieder der Name des Individualformats. Im Beispiel wird die Formatdefinition nur dann angewendet, wenn es in der HTML-Datei ein h1-Element mit dem Attribut id="Titel" gibt. Wenn es dagegen etwa ein Element div mit id="Titel" gäbe, würde die Formatdefinition dort ignoriert.

Beachten Sie:

Individualformate mit vorangestelltem Elementtyp werden von Internet Explorer 5.x und Netscape 6.0 erkannt, nicht aber von älteren Versionen.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Pseudoelemente und Pseudoklassen definieren

Mittels Pseudoklassen und Pseudoelementen können Sie Deklarationen für HTML-Bestandteile definieren, die sich nicht durch ein eindeutiges HTML-Element ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der "erste Buchstabe eines Absatzes". Zum Definieren solcher Pseudoelemente und Pseudoklassen gibt es eine spezielle Syntax.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Pseudoklassen für Verweise</title>
<style type="text/css">
 body { font-family:Arial,sans-serif; }
 a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
 a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
 a:focus { color:#00AA00; background-color:#FFFF77; font-weight:bold; }
 a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
 a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }
</style>
</head>
<body>
<p>
Vermutlich kennen Sie die <a href="../../index.htm">Kapiteleinstiegsseite zu CSS</a><br>
Und wohl auch die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a><br>
Aber kennen Sie auch die <a href="../../../intro/hypertext/geschichte.htm">Geschichte von Hypertext</a>?<br>
Oder die <a href="../../../xml/regeln/baumstruktur.htm">Baumstruktur einer XML-Datei</a>?
</p>
</body>
</html>

Erläuterung:

Bei Pseudoelementen und Pseudoklassen notieren Sie zuerst das betroffene HTML-Element, im Beispiel das a-Element für Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa link (für noch nicht besuchte Verweisziele), visited (für bereits besuchte Verweisziele), focus (für z.B. mit der Tastatur ausgewählte Verweise), hover (für Verweise, während der Anwender mit der Maus darüber fährt) und active (für angeklickte Verweise). Beachten Sie, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter, und dass auch die Reihenfolge von Bedeutung ist, da später notierte Angaben die zuvor notierten überschreiben und sich z.B. a:hover für einen mit der Tastatur ausgewählten Verweis nicht auswirken könnte, wenn a:focus später notiert wird.

Es gibt eine Reihe fester, erlaubter Pseudoelemente und Pseudoklassen. Diese werden werden im Zusammenhang mit den CSS-Eigenschaften im Abschnitt über Seite Pseudoelemente und Pseudoklassen beschrieben.

nach oben
weiter | Seite HTML-Elemente direktformatieren
zurück | Seite Stylesheets in HTML einbinden
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-Formate definieren

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Formate definieren / HTML-Elemente direktformatieren

SELFHTML

HTML-Elemente direktformatieren
Informationsseite

nach unten Formatdefinitionen mit dem style-Attribut
nach unten

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Formatdefinitionen mit dem style-Attribut

Sie können einzelne HTML-Elemente innerhalb des sichtbaren HTML-Dokuments mit Hilfe von Stylesheet-Eigenschaften formatieren. Die Formatdefinitionen gelten dann genau für den Geltungsbereich des betreffenden HTML-Elements und nach den Regeln der natürlichen Formatvererbung auch für Kindelemente des betreffenden Elements. Sinnvoll ist diese Möglichkeit, wenn Sie entweder sonst auf CSS verzichten und es nur mal für ein paar Ausnahmen benötigen, oder wenn Sie Seite zentrale Formate verwenden, einzelne Elemente aber anders als mit den dort definierten Formatdefinitionen gestalten möchten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>style-Attribut</title>
<style type="text/css">
body { background-color:#000000; color:#E0E0E0 }
</style>
</head>
<body>
<h1>Die Seite mit dem besonderen Element</h1>
<p>Hier sind zwar zentrale Formatdefinitionen vorhanden,
aber das folgende Element soll etwas Besonderes sein:</p>

<p style="background-color:#808040; color:#D8FD02;
font-family:'Century Schoolbook',serif; font-size:2em; letter-spacing:3px;
padding:40px; border:double #D8FD02 4px;"
title="Zitat von Francis Picabia">
Unser Kopf ist rund, damit das Denken die Richtung wechseln kann!
</p>

</body>
</html>

Erläuterung:

Sie können Formate für ein HTML-Element definieren, indem Sie innerhalb des einleitenden HTML-Tags das Attribut style und dahinter die gewünschten Formatdefinitionen notieren. Innerhalb der Formatdefinitionen sind Kapitel CSS-Eigenschaften erlaubt. Dabei gilt die gleiche Syntax wie innerhalb der geschweiften Klammern bei zentralen Formaten. Jede Eigenschaft besteht aus einem Namen, z.B. color (Schriftfarbe) und einem Wert, z.B. #D8FD02, getrennt durch einen Doppelpunkt. Schließen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei der letzten Formatdefinition vor dem abschließenden Anführungszeichen darf der Strichpunkt entfallen.

Im obigen Beispiel werden die individuellen Formatangaben auf ein gewöhnliches p-Element angewendet. Es erhält mit Hilfe der CSS-Eigenschaften für Hintergrundfarbe (background-color), Schriftfarbe (color), Schriftart (font-family), Schriftgröße (font-size), Zeichenabstand (letter-spacing), Innenabstand zum Rand (padding) und einem Rahmen (border) ein Aussehen, das überhaupt nicht mehr an einen "Textabsatz" erinnert.

nach oben
weiter | Seite Kaskade - Anwendung von Stylesheets auf Dokumente
zurück | Seite Zentrale Formate definieren
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-Formate definieren

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Formate definieren / Kaskade - Anwendung von Stylesheets auf Dokumente

SELFHTML

Kaskade - Anwendung von Stylesheets auf Dokumente
Informationsseite

nach unten Arten von Stylesheets
nach unten Ermittlung aller selektierten Elemente
nach unten Sortierung nach Ursprung und Priorität
nach unten Spezifität - Gewichtung der Selektoren
nach unten Sortierung nach der Reihenfolge des Vorkommens

nach unten

CSS 1.0 Arten von Stylesheets

Wird ein HTML-Dokument, das kein Stylesheet referenziert und auch selbst keinerlei HTML- oder CSS-Formatierungen enthält im Browser aufgerufen, so wird es dennoch mit einem Basis-Layout dargestellt. Überschriften weisen in grafischen Browsern beispielsweise einen größeren Schriftgrad auf, werden fett dargestellt und erzeugen einen neuen Absatz. Dies bedingt ein Browser-Stylesheet, das grundlegende Informationen über darzustellende Elemente für die Anzeige im Browser enthält. Beim W3-Konsortium ist ein englischsprachige Seite Beispiel-Stylesheet für HTML 4 dokumentiert.

Wenn Sie nun Seite Stylesheets in HTML einbinden, ergänzen oder übersteuern Sie damit das Browser-Stylesheet. Autorenseitig definierte Stylesheets werden als Autoren-Stylesheets bezeichnet.

Darüber hinaus besteht für Besucher Ihrer Seiten die Möglichkeit, ein sogenanntes Benutzer-Stylesheet einzubinden, das zusätzliche Definitionen enthält, wie Elemente idealerweise darzustellen sind; es legt beispielsweise eine Mindestschriftgröße oder eine Darstellung mit hohem Farbkontrast fest.

In allen Arten von Stylesheets - auch in ein und demselben - können wiederum widersprüchliche Angaben notiert sein.

Beispiel:

<ul id="nav">
   <li>Listenpunkt mit <a class="xy" href="ziel.htm">Verweis</a></li>
</ul>

a:link { eigenschaft:wert; }
.xy { eigenschaft:wert; }
#nav a.xy { eigenschaft:wert; }
li a { eigenschaft:wert; }
#nav li a { eigenschaft:wert; }

Erläuterung:

Alle genannten Selektoren wirken für sich genommen auf das im HTML-Quelltext notierte a-Element. Darüber hinaus enthält bereits das Browser-Stylesheet Deklarationen für Verweise - in grafischen Browsern werden diese für gewöhnlich blau und unterstrichen dargestellt. Ein etwaiges Benutzer-Stylesheet muss ebenso berücksichtigt werden.

Um herauszufinden, wie Elemente letztendlich darzustellen sind, folgen Browser den im Folgenden beschriebenen Regeln.

Ermittlung aller selektierten Elemente

Im ersten Schritt wird ermittelt, ob für ein Element CSS-Eigenschaften definiert wurden, die für den aktuell dargestellten Seite Medientyp gelten. Dies umfasst Browser-, Autoren- und Benutzer-Stylesheets. Wird nur ein zutreffender Selektor gefunden, werden die darin enthaltenen Eigenschaften auf das Element angewandt und die Bearbeitung beim nächsten Element fortgesetzt. Exisitieren jedoch in unterschiedlichen Stylesheets verschieden lautende Angaben, wird im folgenden Schritt deren nach unten Ursprung und Prioriät ermittelt.

Sortierung nach Ursprung und Prioriät

Definitionen in eingebundenen Stylesheets unterschiedlicher Herkunft werden gemäß folgender Reihenfolge absteigender Wichtigkeit sortiert:

Benutzer-Stylesheet mit !important
Autoren-Stylesheet mit !important
Autoren-Stylesheet
Benutzer-Stylesheet
Browser-Stylesheet

Die Basis für die Darstellung bildet das Browser-Stylesheet. Enthält ein Benutzer-Stylesheet jedoch anders lautende Deklarationen, überschreiben diese das Browser-Stylesheet und legen somit die Darstellung einer Seite ohne jedwede autorenseitige Vorschläge fest. Definieren Sie nun im Autoren-Stylesheet Formatierungen, werden diese höher gewichtet als das Benutzer-Stylesheet. Dies gilt allerdings nicht für Angaben in Benutzer-Stylesheets, die mittels nachfolgend beschriebener !important-Regel festgelegt wurden.

Findet ein Browser nun abweichende Wertzuweisungen an dieselben Eigenschaften in Stylesheets unterschiedlichen Ursprungs, wird diejenige angewandt, die im Stylesheet mit der höchsten Wichtigkeit definiert wurde. Die Bearbeitung wird anschließend beim nächsten Element fortgesetzt. Existieren darüber hinaus in Stylesheets gleicher Wichtigkeit mehrere Selektoren, die das aktuelle Element erfassen, wird im nächsten Schritt die nach unten Spezifität der Selektoren ermittelt.

Die !important-Regel

Mit !important ausgezeichnete Deklarationen überschreiben gleichlautende ohne diese Kennzeichnung. Der Einsatz ist sowohl in Autoren- als auch in Benutzer-Stylesheets möglich.

Beispiel:

p { font-size:1em !important; }

Erläuterung:

Die Zeichenkette "!important" wird durch ein Leerzeichen getrennt hinter dem Wert notiert.

Beachten Sie:

In der ersten CSS-Spezifikation wurde die Verwendung der !important-Regel in Autoren-Stylesheets höher bewertet als eine gleichlautende in Benutzer-Stylesheets. Dies wurde mit CSS2 korrigiert, um Benutzern die Möglichkeit zu geben, die Anzeige an ihre Bedürfnisse anzupassen. Somit existiert auf Autorenseite keine Möglichkeit, von Benutzern explizit gewünschte Eigenschaften zu überschreiben.

CSS 2.1 Spezifität - Gewichtung der Selektoren

Alle Selektoren werden zunächst in ihre Bestandteile zerlegt und diese in folgende Kategorien unterteilt:

A enthält den Wert 1, wenn CSS-Deklarationen dem Element direkt per Seite style-Attribut zugewiesen wurden.
B entspricht der Anzahl der selektierten Seite ID-Attribute (#id)
C entspricht der Anzahl der selektierten anderen Attribute (z.B. Seite Klassen) und Seite Pseudoklassen (.klasse, :pseudoklasse)
D entspricht der Anzahl der selektierten Elementnamen (e) und Seite Pseudoelemente (:pseudoelement)

Beispiele:

Selektor | A | B | C | D
style="…" (HTML) | 1 | 0 | 0 | 0
#nav a.xy | 0 | 1 | 1 | 1
#nav li a | 0 | 1 | 0 | 2
#nav a | 0 | 1 | 0 | 1
#nav | 0 | 1 | 0 | 0
ul li .xy | 0 | 0 | 1 | 2
a:link | 0 | 0 | 1 | 1
a.xy | 0 | 0 | 1 | 1
ul[id="nav"] | 0 | 0 | 1 | 1
*.xy | 0 | 0 | 1 | 0
li a | 0 | 0 | 0 | 2
a:first-line | 0 | 0 | 0 | 2
a | 0 | 0 | 0 | 1

Erläuterung:

Die Tabelle zeigt die Kategorisierung aller Bestandteile der angeführten Selektoren in absteigender Reihenfolge ihrer Spezifität. Zunächst werden alle Selektoren nach ihrem in Spalte A angeführten Wert absteigend sortiert, danach nach dem in den Spalten B, C und zuletzt nach Spalte D. Ein Wert von "1 0 0 0" ist daher höher als "0 1 2 0" oder "0 0 1 2". Im oben angeführten nach unten Beispiel erreicht der Selektor #nav a.xy die höchste Spezifität (0 1 1 1) und überschreibt damit die vorangegangenen Deklarationen. Die nachfolgend notierten Selektoren li a (0 0 0 2) und #nav li a (0 1 0 2) weisen eine geringere Spezifität auf und werden daher übergangen:

Selektor | A | B | C | D
a:link | 0 | 0 | 1 | 1
*.xy | 0 | 0 | 1 | 0
#nav a.xy | 0 | 1 | 1 | 1
li a | 0 | 0 | 0 | 2
#nav li a | 0 | 1 | 0 | 2

Existiert im Stylesheet nur ein Selektor mit der höchsten ermittelten Spezifität, wird die Regel angewandt und die Bearbeitung beim nächsten Element fortgesetzt. Andernfalls entscheidet die nach unten Reihenfolge des Vorkommens.

Beachten Sie:

Der Universalselektor * und HTML-Formatierungen finden keine Berücksichtigung. Die Berechnung erfolgt nicht nach dem Zehnersystem, "0 0 1 2" ist daher spezifischer als beispielsweise "0 0 0 42".

Hinweis:

CSS 2.1 weicht in folgenden Punkten von CSS2 ab:

Direkt in HTML notierte Seite style-Attribute waren in CSS2 noch ID-Attributen gleichgestellt und erhöhten den (nun) unter B angeführten Wert, die nunmehrige Spalte A existierte noch nicht.
Seite Pseudoelemente (:first-line, :first-letter, :before und :after), die nun unter D subsumiert werden, wurden bei der Berechnung der Spezifität ignoriert.

Sortierung nach der Reihenfolge des Vorkommens

Existieren zwei oder mehrere Selektoren mit identischer Gewichtung bezüglich nach unten Ursprung und Priorität sowie identischer nach unten Spezifität, entscheidet die Reihenfolge des Vorkommens - später notierte Selektoren überschreiben vorangegangene. Deklarationen aus Seite importierten Stylesheets werden hierbei als zuerst vorkommend betrachtet.

nach oben
weiter | Seite Maßeinheiten, Farbangaben und Wertzuweisung
zurück | Seite HTML-Elemente direktformatieren
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-Formate definieren

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Formate definieren / Maßeinheiten, Farbangaben und Wertzuweisung

SELFHTML

Maßeinheiten, Farbangaben und Wertzuweisung
Informationsseite

nach unten Numerische Angaben
nach unten Farbangaben
nach unten Erlaubte feste Werte und Zeichenkettenangaben
nach unten Numerische Angaben für Sprachausgabe
nach unten

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Numerische Angaben

Bei numerischen Angaben zu CSS-Eigenschaften, also etwa bei Schriftgrößen, Absatzabständen oder Rändern, stehen Ihnen die weit verbreiteten Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und relative Angaben (z.B. Prozent gegenüber "normal") möglich. Benutzen Sie für Ihre Angaben die folgenden Abkürzungen:

Abkürzung Angabetyp Bedeutung Beispiele
pt absolut Steht für Punkt. Typografische Maßeinheit. 1 Punkt entspricht 1/72 Inches. font-size:12pt;
line-height:14pt;
pc absolut Steht für Pica. Typografische Maßeinheit. 1 Pica entspricht 12 Punkt. font-size:1pc;
line-height:1.2pc;
in absolut Steht für Inch. Allgemeines Längenmaß im angelsächsischen Raum. 1 Inch entspricht 2.54 Zentimetern. border-width:0.1in;
margin-left:1in;
mm absolut Steht für Millimeter. Allgemeines Längenmaß. 1000. Teil des Urmeters. margin-bottom:10mm;
width:70mm;
cm absolut Steht für Zentimeter. Allgemeines Längenmaß. 100. Teil des Urmeters. font-size:1cm;
top:2.54cm;
px absolut/relativ Steht für Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, relativ also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und das selbe Ausgabegerät bezogen. border-width:3px;
margin-right:60px;
em relativ Steht für bezogen auf die Schriftgröße des Elements. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Schriftgröße des Elternelements. font-size:1.2em;
line-height:1.5em;
ex relativ Steht für bezogen auf die Höhe des Kleinbuchstaben x in diesem Element. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Höhe des Kleinbuchstaben x im Elternelement. text-transform:uppercase;
font-size:1.3ex;
% relativ Steht für Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext. Bei nebenstehendem Beispiel ist die Angabe zur Zeilenhöhe (line-height) relativ zur Schriftgröße (font-size) zu interpretieren. font-size:10pt;
line-height:120%;

Benutzen Sie bei numerischen Bruchzahlen stets den Punkt als Dezimalzeichen, nicht das deutsche Komma, also etwa 0.2cm und nicht 0,2cm. Auch Minuswerte sind bei einigen Wertzuweisungen möglich, markiert wie üblich durch das Minuszeichen.

Sie können also sehr exakte Angaben notieren, doch Web-Seiten werden in der Regel auf Bildschirmen ausgegeben, und Bildschirme bestehen heutzutage aus Pixeln, wobei die Pixeldichte der einzelnen Bildschirme sehr unterschiedlich sein kann. Der Computer muss Ihre Angaben für die Ausgabe am Bildschirm letztlich in Pixel umrechnen. Dabei kann es zu enttäuschenden Ergebnissen kommen. So erscheinen Schriftgrößen, die an einem Bildschirm gut lesbar sind, in einer anderen Umgebung eventuell als zu klein. Leider sind daran auch die unterschiedlichen Basiseinstellungen der Betriebssysteme mit schuld. So wird unter Windows-Systemen eine Berechnungsgrundlage von 96dpi (Dots per Inch) für die Darstellung von Schriftarten verwendet (bei der Einstellung "große Schriftarten" gar 120dpi), unter Systemen wie Linux und Macintosh sind es dagegen 72dpi. Deshalb erscheinen Schriftgrößen, die unter Windows sauber aussehen, unter den anderen genannten Systemen oft mickrig, während Schriftgrößen, die dort angenehm aussehen, unter Windows wiederum klobig wirken. Aber auch direkte Angaben in Pixeln lösen das Problem nicht unbedingt. Ein Pixel auf einem 13-Zoll-Notebook-Bildschirm mit 1024×768 Pixeln Bildschirmauflösung wirkt ganz anders als ein Pixel auf einem 19-Zoll-Desktop-Bildschirm mit der gleichen Bildschirmauflösung. Andere Angaben wie em oder Prozentwerte umgehen zwar das Problem der unterschiedlichen Bildschirmdarstellungen - aber erstens kann man bei einer Angabe wie 1.2em kaum von "Formatierung" reden, und zweitens bereiten solche Angaben auch andere Probleme. So kann es beispielsweise durch das Prinzip der natürlichen Vererbung passieren, dass Schriftarten bei mehrfach verschachtelten Elementen (etwa bei Listen oder Tabellen) immer kleiner oder größer werden. CSS2 bietet zwar mit den erweiterten Möglichkeiten, Seite Formate für verschachtelte Elemente zu definieren, Maßnahmen zur Abhilfe an, doch das nutzt vorläufig auch nichts, solange es in vielen noch verbreiteten Browsern nicht funktioniert.

Um die "richtigen" und "falschen" Maßangaben ist angesichts all dieser Probleme in einigen Kreisen schon ein richtiger Glaubenskrieg ausgebrochen. Die einen behaupten, man solle sich an Angaben wie pt halten, weil ein Punkt immer gleich groß zu sein hat, die anderen beschwören die em-Angabe wie einen Erlösergott. Fakt ist in jedem Fall, dass Sie niemals darauf vertrauen sollten, dass Größen, die auf Ihrem Bildschirm wunderbar aussehen, woanders genauso wunderbar wirken. Vermeiden Sie deshalb vor allem bei Angaben, die für die Leserlichkeit von Text relevant sind, "extreme" Werte, und reagieren Sie, wenn Sie von mehreren Stellen zu hören bekommen, Ihre Seiten seien schwer lesbar.

Beachten Sie:

Wenn Sie zwischen einzelnen Maßen umrechnen wollen, können Sie den Seite Punkt/Inch/Millimeter-Umrechner benutzen.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Farbangaben

Farbangaben in Stylesheets nach CSS-Syntax sind nach den Regeln zum Seite Definieren von Farben in HTML möglich. CSS1 und CSS2 nennen die Beispiel-Seite 16 Farbnamen der VGA-Palette, CSS 2.1 ergänzt diese um den Wert orange, hexadezimal #ffa500.

Sie können Farbwerte also hexadezimal nach dem Schema #RRGGBB angeben; R ist der Rotwert, G der Grünwert und B der Blauwert der Farbe. Anders als in HTML existiert auch eine Kurzschreibweise der Form #RGB. Hier werden die einzelnen Farbangaben intern verdoppelt, #08a steht demnach für #0088aa. Die hexadezimale Schreibweise erlaubt Groß- und Kleinschreibung.

Eine weitere Möglichkeit, Farben zu definieren, stellt die Stylesheet-Sprache CSS jedoch auch noch zur Verfügung. Das Schema dazu lautet rgb(rrr,ggg,bbb). Der Ausdruck rgb(...) ist dabei immer gleich. Innerhalb der Klammern müssen drei Dezimalwerte oder drei Prozentwerte stehen, durch Kommata voneinander getrennt. Für alle drei Werte sind entweder absolute Zahlen zwischen 0 (kein Anteil der entsprechenden Farbe) und 255 (maximaler Anteil der entsprechenden Farbe) oder Prozentwerte von 0% (kein Anteil an der entsprechenden Farbe) bis 100% (maximaler Anteil der entsprechenden Farbe) erlaubt.

Beispiele:

<style type="text/css">
h1 { color:#FFCCDD; background-color:black }
body  { background-color:rgb(51,0,102) }
p { color:#223; background-color:#ddf }
blockquote  { background-color:rgb(60%,90%,75%) }
</style>

CSS 2.0 Netscape 6.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Anwender-relative Farbwörter (Systemfarben)

Ab der CSS-Version 2.0 gibt es ferner die Möglichkeit, anwender-relative Farbwörter zu verwenden, hinter denen sich Farben verbergen, die der Anwender an seinem Rechner als Arbeitsumgebung eingestellt hat. Auf diese Weise können Sie zur Gestaltung Ihrer Inhalte Farben verwenden, die auf die Bildschirmumgebungsfarben des Anwenderrechners abgestimmt sind, ohne dass Sie diese Farben kennen. Die erlaubten anwender-relativen Farbwörter werden im Folgenden erläutert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Abkürzung | Bedeutung
ActiveBorder | Rahmenfarbe des aktiven Fensters.
ActiveCaption | Hintergrundfarbe der aktiven Fenstertitelzeile.
AppWorkspace | Farbe des Hintergrunds der aktiven Anwendung.
Background | Farbe des Desktop-Hintergrunds.
ButtonFace | Farbe von Buttons in Dialogfenstern.
ButtonHighlight | Farbe für 3D-Lichteffekt von Buttons in Dialogfenstern.
ButtonShadow | Farbe für 3D-Schatten von Buttons in Dialogfenstern.
ButtonText | Farbe von Texten beschrifteter Buttons in Dialogfenstern.
CaptionText | Farbe von Überschriften in Dialogfenstern.
GrayText | Farbe von deaktiviertem Text in Dialogfenstern.
Highlight | Farbe von ausgewählten Einträgen in Auswahllisten.
HighlightText | Farbe von selektiertem Text.
InactiveBorder | Rahmenfarbe eines nicht aktiven Fensters.
InactiveCaption | Hintergrundfarbe einer nicht aktiven Fenstertitelzeile.
InactiveCaptionText | Farbe der Überschrift in einer nicht aktiven Fenstertitelzeile.
InfoBackground | Farbe für Tooltips und Hints (kleine Popup-Hilfen).
InfoText | Textfarbe für Tooltips und Hints (kleine Popup-Hilfen).
Menu | Farbe für Menüleisten.
MenuText | Farbe für Menüeinträge.
Scrollbar | Farbe der Scroll-Leiste in Fenstern.
ThreeDDarkShadow | Dunkle Farbe bei Schatten von 3D-Elementen.
ThreeDFace | Farbe von 3D-Elementen.
ThreeDHighlight | Farbe von gerade angeklickten 3D-Elementen.
ThreeDLightShadow | Helle Farbe bei Schatten von 3D-Elementen.
ThreeDShadow | Dunkle Farbe bei Schatten von 3D-Elementen.
Window | Hintergrundfarbe von Dokumentfenstern.
WindowFrame | Farbe von Fensterrahmen.
WindowText | Farbe von normalem Text in Dokumentfenstern.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Erlaubte feste Werte und Zeichenkettenangaben

Bei vielen CSS-Eigenschaften steht eine Auswahl erlaubter Werte zur Verfügung. Das ist nicht anders als bei vielen HTML-Attributen. Genau so, wie Sie etwa eine Überschrift oder einen Textabsatz in HTML mit den Angaben align="left", align="center" oder align="right" ausrichten können, gibt es CSS-Eigenschaften, die bestimmte Schlüsselwörter erwarten. So gibt es etwa die Stylesheet-Angabe text-align zur Ausrichtung von Text, die die gleichen Angaben erwartet, also left, center oder right.

Manche Stylesheet-Angaben erwarten die Zuordnung eines Namens oder auch mehrerer Schlüsselwörter. So können Sie hinter der Stylesheet-Angabe font-family Namen von einer oder mehreren Schriftarten notieren, die Sie für die Formatierung verwenden möchten. Andere CSS-Eigenschaften sind Zusammenfassungen von Einzeleigenschaften. So gibt es beispielsweise die Angabe border (Rahmen), hinter der Sie eine Angabe wie thin solid red notieren können. Trennen Sie solche Angaben zu einer Sammeleigenschaft durch Leerzeichen. Wenn die Angaben selbst Leerzeichen enthalten können, wie etwa bei Namen von Schriftarten, können Sie Kommata zum Trennen verwenden. Für solche Fällen können auch Anführungszeichen empfohlen sein.

Bei Namen wie Schriftartangaben oder Angaben wie left, center usw. ist es zumindest bei der CSS-Anwendung auf HTML-Elemente egal, ob Sie die Angaben groß oder klein schreiben. Das gilt auch für die Stylesheet-Eigenschaften selbst. Wenn Sie CSS allerdings auf XHTML oder gültige XML-Dokumente anwenden, müssen Elementnamen, Attributnamen und Attributzuweisungen so geschrieben werden, wie es in der XML-DTD festgelegt ist. Bei XHTML muss alles klein geschrieben werden.

Beispiele:

<style type="text/css">
p { font-family:"Comic Sans MS",Arial; text-align:center; }
body  { border:thin dashed silver; background-color:black; }
DIV.SPEZIAL { BORDER:THICK DOUBLE RGB(0,64,128); }
blockquote[title="Zitat von Goethe"] { color:#000080; }
</style>

CSS 2.0 Numerische Angaben für Sprachausgabe

Für CSS-Eigenschaften der Seite Sound-Kontrolle für Sprachausgabe, die von den Browsern jedoch bislang nicht unterstützt wird, werden die folgenden Maßangaben aus dem Bereich der Akustik und Zeitmessung verwendet:

Abkürzung | Bedeutung
deg | Kreisgrad, wobei der Kreis in 360 Grad aufgeteilt ist Ein rechter Winkel hat z.B. 90deg
grad | Gradient, Maßangabe für Steigungen und Gefälle
rad | Radiant, geometrische Maßangabe
ms | Millisekunden, Maßangabe für Zeiteinheit
s | Sekunden, Maßangabe für Zeiteinheit
Hz | Hertz, Maßangabe für Frequenzen
kHz | kiloHertz, Maßangabe für Frequenzen

nach oben
weiter | Seite Das Box-Modell
zurück | Seite Kaskade - Anwendung von Stylesheets auf Dokumente
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-Formate definieren

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell

SELFHTML

Das Box-Modell
Informationsseite

nach unten Berechnung von Breite und Höhe
nach unten Der Box-Modell-Fehler des Internet Explorer
nach unten Dokumenttyp-Weiche ("Doctype Switch")
nach unten Beispiele unterschiedlicher Darstellung
nach unten Browser mit Dokumenttyp-Weiche
nach unten Dokumenttyp-Deklarationen für den standardkonformen Modus
nach unten Umgehungsstrategien für mangelhafte Browser
nach unten Verzicht auf pixelgenaue Ausrichtung
nach unten Trennung der Breite und Höhe von Rahmen und Innenabstand
nach unten Browserweichen (CSS-Hacks)
nach unten Tan-Hack
nach unten Tantek-Hack
nach unten HTML-Kommentar

nach unten

CSS 1.0 Berechnung von Breite und Höhe

Das Box-Modell definiert die Berechnung der Breite und Höhe von Elementen. Seit der CSS1-Spezifikation des W3-Konsortiums aus dem Jahre 1996 errechnet sich die Gesamtbreite eines Elements aus einer Addition

der Seite Breite des Elementinhalts (width),
des Seite Innenabstands (padding),
der Seite Rahmenstärke (border-width) und
des Seite Außenabstands (margin).

Dies gilt analog für die Seite Höhe (height) sowie generell für alle Seite Maßeinheiten; diese dürfen auch gemischt angewandt werden.

Grafische Darstellung des Box-Modells:

Darstellung des Box-Modells

Beispiel:

Wird ein Element mit einer Breite von 200 Pixel, einer Höhe von 100 Pixel und einem Innenabstand und Rahmen von je 20 Pixel Stärke auf allen Seiten definiert, beträgt die tatsächliche Breite letztendlich 280 Pixel (20 für border-left, 20 für padding-left, 200 für width, 20 für padding-right und 20 für border-right), die Höhe 180 Pixel (20 für border-top, 20 für padding-top, 100 für height, 20 für padding-bottom und 20 für border-bottom). Ein zusätzlich definierter Außenabstand müsste zu diesen Werten nochmals addiert werden.

Der Box-Modell-Fehler des Internet Explorer

Als "Box Model Bug" wird der Fehler in älteren Windows-Versionen des Internet Explorer (einschließlich 5.5) bezeichnet, die Innenabstände und Rahmenstärken entgegen der Spezifikation nicht zur Gesamtbreite zu addieren - dies ist nur beim Außenabstand korrekt der Fall. In oben angeführtem Beispiel ergibt sich damit eine Gesamtbreite von 200 Pixel, also lediglich die mittels width definierte Breite. Dem Inhalt stehen nach Subtraktion von 40 Pixel für den Rahmen und weiteren 40 Pixel für den Innenabstand (jeweils 20 Pixel links und rechts) demnach nur mehr 120 Pixel zur Verfügung, was vor allem in vermeintlich pixelgenauen Layouts störende Abweichungen verursacht.

Dokumenttyp-Weiche ("Doctype Switch")

Microsoft bereinigte den Fehler und führte mit Version 6 des Browsers eine Möglichkeit ein, die Darstellung zwischen der falschen und der korrekten Variante umzuschalten. Ein grundsätzlicher Wechsel hin zu einer korrekten Darstellung hätte es mit sich gebracht, dass sehr viele Seiten zwar im Grunde korrekt, aber dennoch anders als vom Ersteller beabsichtigt dargestellt worden wären. Es musste daher eine Möglichkeit gefunden werden, dem Browser mitzuteilen, welchen Modus er benutzen soll.

Man ging davon aus, dass vor allem alte Seiten, die auf Basis des falschen Box-Modells erstellt und nur mit dem Internet Explorer einschließlich Version 5.5 getestet worden waren, keine oder eine Seite Dokumenttyp-Deklaration einer weniger strengen HTML-Variante aufweisen und knüpfte die korrekte Darstellung an die Verwendung spezieller Varianten. Diese Notlösung bot den Vorteil, auf zusätzliche Elemente verzichten zu können.

Dokumente, die als syntaktisch strenge (X)HTML-Variante deklariert sind, werden vom Internet Explorer 6 unter Berücksichtigung des korrekten Box-Modells dargestellt - im sogenannten "standard mode". Auf Seiten, die keine oder eine weniger strenge Deklaration aufweisen, wird das fehlerhafte Microsoft-Box-Modell angewandt, um Abwärtskompatibilität zu gewährleisten. Dieser Modus wird als "quirks mode" bezeichnet.

Auch das Fehlen der Adresse, unter welcher die Seite Dokumenttyp-Definition (DTD) beim W3-Konsortium abgerufen werden kann, bewirkt bei HTML 4.01 teilweise einen Rückfall in den Quirks-Modus.

Beispiele unterschiedlicher Darstellung

Box-Modell mit Dokumenttyp-Deklaration HTML 4.01 Transitional ohne URI

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Box-Modell: Dokumenttyp HTML 4.01 Transitional ohne URI</title>
</head><body>

<p style="width:200px; padding:20px; border:20px solid #66a">
  Soll-Breite: 280px
</p>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>

</body></html>

Das Beispiel zeigt in allen Versionen des Internet Explorer und Opera 7 die Anwendung des Microsoft-Box-Modells. Dies gilt nicht für Browser, die auf dem Gecko-Kern basieren (Mozilla, Firefox, Netscape ab Version 6), Konqueror und Opera bis Version 6, welche alle Seiten mit standardkonformer Auslegung des Box-Modells darstellen.

Box-Modell mit Dokumenttyp-Deklaration HTML 4.01 Transitional mit URI

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Box-Modell: Dokumenttyp HTML 4.01 Transitional mit URI</title>
</head><body>

<p style="width:200px; padding:20px; border:20px solid #66a">
  Soll-Breite: 280px
</p>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>

</body></html>

Die Ergänzung um die Adresse der DTD bewirkt in den meisten Browsern bereits eine standardkonforme Darstellung.

Box-Modell mit Dokumenttyp-Deklaration HTML 4.01 Strict

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<title>Box-Modell: Dokumenttyp HTML 4.01 Strict</title>
</head><body>

<p style="width:200px; padding:20px; border:20px solid #66a">
  Soll-Breite: 280px
</p>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>

</body></html>

Dieses Beispiel wird von allen Browsern korrekt dargestellt. Davon ausgenommen sind, wie bereits erwähnt, lediglich Internet Explorer für Windows bis zu Version 5.5 - die Mac-Versionen des Browsers sind nicht betroffen. Diese HTML-Variante führt am ehesten zu einer gleichen Darstellung und sollte daher bevorzugt eingesetzt werden.

Erläuterung:

Alle drei Beispiele weisen im p-Element identische Eigenschaften auf, der Unterschied in der Darstellung ergibt sich einzig aus der Dokumenttyp-Deklaration.

Netscape 6.0 MS IE 6 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Browser mit Dokumenttyp-Weiche

Wie bei den Beispielen angeführt, übernahmen auch andere Hersteller diese Methode und so weisen im Grunde alle aktuellen Versionen verbreiteter Browser ebenfalls einen "Doctype Switch" auf. Opera 7 orientiert sich am Internet Explorer 6, um größtmögliche Kompatibilität zu erreichen. Netscape ab Version 6, Mozilla Firefox, Konqueror und Safari dagegen orientieren sich diesbezüglich immer am Standard. Der Dokumenttyp wirkt sich in diesen Browsern hauptsächlich auf die Fehlerkorrektur, nicht aber auf das Box-Modell aus.

Beachten Sie:

Netscape 4.x berechnet Dimensionen ebenso falsch wie der Internet Explorer 5.x. für Windows.

Dokumenttyp-Deklarationen für den standardkonformen Modus

Um aktuelle Browser in den standardkonformen Anzeigemodus zu schalten, empfiehlt es sich, einen der folgenden "sicheren" Dokumenttypen zu notieren:

HTML 4.01 Transitional mit URI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Strict mit und ohne URI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Bezüglich XHTML ist zu beachten, dass der Internet Explorer 6 die Dokumenttyp-Deklaration nur in der ersten Zeile eines Dokuments auswertet. Dies hat zur Folge, dass bei Notation einer Seite XML-Deklaration in den Quirks-Modus geschaltet wird.

<?xml version="1.0" encoding="UTF-8"?>

Diese Zeile ist beim Einsatz von XHTML nicht zwingend erforderlich, Sie können sie unter bestimmten Umständen, die in der oben genannten Erläuterung beschrieben sind, weglassen.

Umgehungsstrategien für mangelhafte Browser

Verzicht auf pixelgenaue Ausrichtung

Die einfachste Variante, den Box-Modell-Fehler zu umgehen, besteht darin, auf den Versuch, ein pixelgenaues Layout zu erreichen, zu verzichten und allen Elementen etwas Freiraum zu lassen, sodass etwaige Abweichungen zwar vorhanden sind, aber die Darstellung nicht beeinträchtigen. Sollte dies nicht möglich sein, setzen Sie eine der im folgenden beschriebenen Methoden ein, um eine korrekte Darstellung zu erreichen.

Trennung der Breite und Höhe von Rahmen und Innenabstand

Eine Möglichkeit, eine einheitliche Darstellung zu erreichen, besteht darin, auf die gleichzeitige Angabe von width bzw. height und border/padding bei ein und demselben Element zu verzichten. Dies erreichen Sie mittels eines zusätzlichen Elements, das mit der gewünschten Gesamtbreite entsprechend dem korrekten Box-Modell definiert wird. Dem inneren Element können Sie nun problemlos border und padding zuweisen, da die Berechnung der Breite des äußeren Elements davon nicht beeinflusst wird.

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Box-Modell: Workaround bei Dokumenttyp HTML 4.01 Transitional ohne URI</title>
</head><body>

<div style="width:280px;">
  <p style="padding:20px; border:20px solid #66a">Soll-Breite: 280px</p>
  <p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>
</div>

</body></html>

Erläuterung:

Das äußere Element weist eine Breite von 280px auf, dies ist der Wert, der sich aus einer korrekten Berechnung ergibt. Die im inneren Element definierten Werte für border und padding wirken sich darauf nicht aus.

Browserweichen (CSS-Hacks)

Es ist möglich, Browsern die gewünschten CSS-Eigenschaften zukommen zu lassen und problematische Deklarationen vor anderen Browsern mit Hilfe einer Seite CSS-Browserweiche zu "verstecken" - dies wird als "Hack" bezeichnet. Die in diesem Kapitel angeführten Beispiele eignen sich zur Korrektur des Box-Modell-Fehlers.

Beachten Sie bitte den Hinweis bezüglich der Seite Verwendung von CSS-Hacks am Ende des Kapitels.

Tan-Hack

Speziell zur Umgehung des Box-Modell-Fehlers im Internet Explorer 5.x für Windows eignet sich der "Tan-Hack" (auch "Modified Simplified Box Model Hack" genannt).

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Box-Modell: Workaround mittels Modified Simplified Box Model Hack</title>
<style type="text/css">

#bereich {
  width:200px; padding:20px; border:20px solid #66a;
}

* html #bereich {  /* nur fuer Internet Explorer */
  width:280px;     /* Version 5.x */
  w\idth:200px;    /* Version 6 */
}

</style>
</head><body>

<div id="bereich">Soll-Breite: 280px</div>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>

</body></html>

Erläuterung:

Nachdem mit dem Selektor #bereich die gewünschten Eigenschaften wie gewohnt definiert wurden, wird ein gleichlautender Selektor, nun allerdings mit voranstehendem * html notiert. Dabei handelt es sich um den so genannten Seite Star-HTML-Hack, der alle Browser außer dem Internet Explorer bis zur Version 6 von der Interpretation der enthaltenen Deklarationen ausschließt. Zunächst wird für den Internet Explorer 5.x. die Breite gemäß Microsoft-Box-Modell angegeben, danach für den Internet Explorer 6 die korrekte Breite gemäß W3C-Box-Modell. Um den am Beginn für Version 5.x notierten Wert nicht zu überschreiben, wird die Eigenschaft width mit einem Backslash (CSS-Escape-Sequenz) notiert: w\idth. Dies hat zur Folge, dass die ältere Version die Deklaration ignoriert.

Das Kapitel über Browserweichen erläutert die Seite Funktionsweise des Tan-Hacks.

Tantek-Hack

Auch der sogenannte "Tantek-Hack" korrigiert die Darstellung im Internet Explorer 5.x für Windows.

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Box-Modell: Workaround mittels Tantek-Hack</title>
<style type="text/css">

#bereich {
  padding:20px; border:20px solid #66a;
  width:280px;
  voice-family:"\"}\""; /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
  voice-family:inherit;
  width:200px;
}

</style>
</head><body>

<div id="bereich">Soll-Breite: 280px</div>
<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>

</body></html>

Erläuterung:

Zunächst werden allen Eigenschaften Werte zugewiesen, die der Internet Explorer 5.x für eine korrekte Darstellung benötigt. Die Deklaration voice-family:"\"}\""; bewirkt, dass nachfolgende Angaben von diesem Browser ignoriert werden. Somit eignet sich dieser Bereich dafür, anderen Browsern die korrekten Werte zur Verfügung zu stellen. Das Ergebnis ist eine gleichwertige Darstellung trotz des Box-Modell-Fehlers des IE 5.x.

Das Kapitel über Browserweichen erläutert die Seite Funktionsweise des Tantek-Hacks.

HTML-Kommentar vor Dokumenttyp-Deklaration

Sollte ein im standardkompatiblen Modus neu hinzugekommener Fehler des Internet Explorer 6 oder 7 die Umschaltung in den Quirks-Modus erfordern, können Sie dies auch erreichen, indem Sie einen Seite HTML-Kommentar in die erste Zeile des Dokuments setzen. Andere Browser werden hierdurch nicht beeinflusst und wenden bei entsprechender Dokumenttyp-Deklaration das korrekte Box-Modell an, sodass eine Korrektur nur für die Windows-Variante des Internet Explorer erforderlich ist - dies allerdings für alle Versionen. Künftige Versionen des Internet Explorer könnten solche Dokumente jedoch standardkonform darstellen, sodass sich diese Methode nur dann eignet, wenn Sie bei Erscheinen neuer Browserversionen testen, um eine dann eventuell abweichende Darstellung abermals zu korrigieren.

nach oben
weiter | Seite Schriftformatierung
zurück | Seite Maßeinheiten, Farbangaben und Wertzuweisung
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-Formate definieren

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften

SELFHTML

CSS-Eigenschaften
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML und Kapitel CSS-Formate definieren.
Dieser Abschnitt behandelt die einzelnen CSS-Eigenschaften, mit deren Hilfe Sie HTML-Elemente nach Wunsch formatieren können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Schriftformatierung
Seite Schriftformatierung mit Schriftartendatei
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder
Seite Listenformatierung
Seite Tabellenformatierung
Seite Pseudoelemente und Pseudoklassen
Seite Positionierung und Anzeige von Elementen
Seite Layouts für Printmedien
Seite Sound-Kontrolle für Sprachausgabe
Seite Anzeigefenster
Seite Filter (nur Microsoft)

nach oben

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Schriftformatierung

SELFHTML

Schriftformatierung
Informationsseite

nach unten Allgemeines zur Schriftformatierung
nach unten font-family (Schriftart)
nach unten font-style (Schriftstil)
nach unten font-variant (Schriftvariante)
nach unten font-size (Schriftgröße)
nach unten font-weight (Schriftgewicht)
nach unten font (Schrift allgemein)
nach unten word-spacing (Wortabstand)
nach unten letter-spacing (Zeichenabstand)
nach unten text-decoration (Textdekoration)
nach unten text-transform (Text-Transformation)
nach unten color (Textfarbe)
nach unten text-shadow (Textschatten)
nach unten font-stretch (Schriftlaufweite)

nach unten

Allgemeines zur Schriftformatierung

Unter Schriftformatierung sind Angaben zu Schriftarten, Schriftgrößen, Schriftfarben, Schriftgewicht, Zeichen- und Wortabständen usw. zu verstehen. Sinnvoll sind solche Angaben für alle HTML-Elemente, die Text enthalten können. Dazu gehören alle Elemente, die im Kapitel Kapitel Absatztypen und Text beschrieben werden, aber auch beispielsweise Elemente für Kapitel Tabellen. Auch auf das html- und das body-Element lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall gelten die Angaben für alle Text-Elemente der HTML-Datei.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 font-family (Schriftart)

Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Auch Schriftfamilien wie Sans Serif usw. gehören dazu.

Bei der hier beschriebenen Eigenschaft können Sie Schriftarten angeben, ohne sich darum kümmern zu müssen, ob und wie die Schriftart beim Anwender angezeigt werden kann. Falls die angegebene Schriftart nicht angezeigt werden kann, bleibt die Angabe wirkungslos. Eine Möglichkeit, Schriftarten durch Angabe einer bestimmten Schriftarten-Datenquelle zu erzwingen, wird im Abschnitt Seite Schriftformatierung mit Schriftartendatei beschrieben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-family</title></head>
<body>

<p><span style="font-family:'Times New Roman',Times,serif">kleiner Beispieltext
in Times New Roman</span><br>
<span style="font-family:'Times New Roman',Times,serif; font-size:200%">großer Beispieltext
in Times New Roman</span></p>

<p><span style="font-family:Verdana">kleiner Beispieltext
in Verdana</span><br>
<span style="font-family:Verdana; font-size:200%">großer Beispieltext
in Verdana</span></p>

<!--usw.-->

</body></html>

Erläuterung:

Mit font-family: können Sie eine oder mehrere Schriftarten bestimmen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.

Trennen Sie mehrere Schriftartennamen durch Kommata. Das W3-Konsortium empfiehlt, Schriftartnamen, die Leerzeichen enthalten, in Anführungszeichen zu setzen, also z.B. font-family:"Century Schoolbook",Times. Sie können dazu die doppelten oder die einfachen Anführungszeichen (Hochkomma) verwenden. Falls die CSS-Eigenschaften wie im obigen Beispiel innerhalb eines style-Attributs im HTML-Quelltext vorkommen, dürfen Sie nicht die gleichen Anführungszeichen verwenden wie bei der HTML-Attributzuweisung. Im obigen Beispiel sehen Sie, dass die Wertzuweisung an das style-Attribut wie in doppelten Anführungszeichen steht. Innerhalb davon werden für 'Times New Roman' deshalb einfache Anführungszeichen verwendet, um Konflikte zu vermeiden.

Generische Schriftfamilien

Folgende generische Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben Schriftartnamen benutzen:

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

Es empfiehlt sich, solche generische Schriftarten als letzte Angabe einer Wertzuweisung an font-family zu notieren - wie im ersten der obigen Beispiele. Damit bieten Sie dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls diese auf dem System nicht vorhanden ist.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 font-style (Schriftstil)

Schriftstil bedeutet die Neigung der Schrift.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-style</title>
<style type="text/css">
.kursiv { font-style:italic; }
.grosskursiv { font-style:italic; font-size:200%; }
</style>
</head>
<body>

<p><span class="kursiv">kleiner Beispieltext mit Schriftstil italic</span><br>
<span class="grosskursiv">gro&szlig;er Beispieltext mit Schriftstil italic</span></p>

</body></html>

Erläuterung:

Mit font-style: können Sie den Schriftstil bestimmen. Folgende Angaben sind möglich:

italic = kursiver Schriftstil.
oblique = schräggestellter Schriftstil.
normal = normaler Schriftstil.

CSS 1.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 font-variant (Schriftvariante)

Als besondere Schriftvariante stehen Kapitälchen (kleine Großbuchstaben) zur Verfügung.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-variant</title></head>
<body>

<p><span style="font-variant:normal">kleiner Beispieltext
mit Schriftvariante normal</span><br>
<span style="font-variant:normal; font-size:200%">großer
Beispieltext mit Schriftvariante normal</span></p>

<p><span style="font-variant:small-caps">kleiner Beispieltext
mit Schriftvariante small-caps</span><br>
<span style="font-variant:small-caps; font-size:200%">gro&szlig;er
Beispieltext mit Schriftvariante small-caps</span></p>

</body></html>

Erläuterung:

Mit font-variant: können Sie die Schriftvariante bestimmen. Folgende Angaben sind möglich:

small-caps = Kapitälchen.
normal = normale Schriftvariante.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 font-size (Schriftgröße)

Schriftgröße ist die Darstellungsgröße der Schrift.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-size</title></head>
<body>
<p>
<span style="font-size:1.2em">Beispieltext mit Schriftgröße 1.2em</span><br>
<!-- usw. -->
</p></body></html>

Erläuterung:

Mit font-size: können Sie die Schriftgröße bestimmen. Erlaubt ist eine Seite numerische Angabe. Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich auf die Schriftgröße des Elternelements.

Alternativ zu numerischen Angaben sind auch absolute und relative Schlüsselworte möglich.

Absolut:
xx-small = winzig.
x-small = sehr klein.
small = klein.
medium = mittel.
large = groß.
x-large = sehr groß.
xx-large = riesig.

Relativ:
smaller = kleiner als im Elternelement.
larger = größer als im Elternelement.

Beachten Sie:

Für die Ausgabe auf dem Bildschirm sind vor allem relative Einheiten wie em, ex, Prozentwerte oder Schlüsselworte geeignet, absolute Einheiten wie pt, cm usw. sollten Seite Drucklayouts vorbehalten sein. Eine Sonderstellung nimmt die relative Einheit px ein, da sich bei deren Verwendung Schriftgrößen im Internet Explorer nicht mehr verändern lassen. Im Sinne der Benutzbarkeit sollten Sie daher auf diese Einheit nach Möglichkeit verzichten.

Sie können die Angabe zur Schriftgröße mit der Angabe zur Seite Zeilenhöhe kombinieren, indem Sie beide Angaben innerhalb der Eigenschaft nach unten font mit der folgenden Syntax notieren:

p { font:1.2em/1.5em }

In dem Beispiel ist 1.2em die Schriftgröße und 1.5em die Zeilenhöhe. Bei dieser Notationsweise bezeichnet der Wert vor dem Schrägstrich stets die Schriftgröße und der Wert hinter dem Schrägstrich stets die Zeilenhöhe.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 font-weight (Schriftgewicht)

Das Schriftgewicht bezeichnet die Dicke und Stärke einer Schrift.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-weight</title>
</head><body>

<p><span style="font-weight:bold">kleiner Beispieltext
mit Schriftgewicht bold</span><br>
<span style="font-weight:bold; font-size:200%">großer Beispieltext
mit Schriftgewicht bold</span></p>

<!--usw.-->

<p><span style="font-weight:100">kleiner Beispieltext
mit Schriftgewicht 100</span><br>
<span style="font-weight:100; font-size:200%">großer Beispieltext
mit Schriftgewicht 100</span></p>

<!--usw.-->
</body></html>

Erläuterung:

Mit font-weight: können Sie das Schriftgewicht bestimmen. Folgende Angaben sind möglich:

bold = fett.
bolder = extrafett.
lighter = dünner.
100,200,300,400,500,600,700,800,900 = extra-dünn (100) bis extrafett (900).
normal = normales Schriftgewicht.

Bei den numerischen Werten entspricht die Angabe 500 dem im DTP-Bereich üblichen Begriff medium, und die Angabe 700 entspricht dem Begriff bold.

Beachten Sie:

Wohl kaum eine installierte Schriftart unterstützt alle erlaubten Angaben zum Schriftgewicht.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 font (Schrift allgemein)

Diese Eigenschaft ist eine Zusammenfassung der folgenden fakultativen Einzelangaben:
nach oben font-style
nach oben font-variant
nach oben font-weight
nach oben font-size
Seite line-height
nach oben font-family

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font</title>
<style type="text/css">
#Text01 { font:bold .9em Times; }
#Text02 { font:italic 1cm Helvetica; }
#Text03 { font:small-caps 110% Verdana; }
#Text04 { font:2em/180% Courier; }
</style></head>
<body>

<p id="Text01">Beispieltext mit Schrift: bold .9em Times</p>
<p id="Text02">Beispieltext mit Schrift: italic 1cm Helvetica</p>
<p id="Text03">Beispieltext mit Schrift: small-caps 110% Verdana</p>
<p id="Text04">Beispieltext mit Schrift: 2em/180% Courier<br>und einem Zeilenumbruch</p>

</body></html>

Erläuterung:

Mit font: können Sie verschiedene Schriftformatierungen kombinieren. Erlaubt sind die üblichen Wertangaben zu den erlaubten Eigenschaften, die in font zusammengefasst sind. Es müssen nicht alle Eigenschaften angegeben werden, denn lediglich font-size und font-family sind verpflichtend. Die in der Zusammenfassung verwendete Reihenfolge ist aber einzuhalten; font-family wäre also beispielsweise als letzte Eigenschaft zu notieren. Die Eigenschaften font-size und line-height sind, sofern sie beide notiert werden, wie im vierten Beispiel mit einem Schrägstrich zu trennen. Der erste Wert definiert font-size, der zweite line-height. Wird an dieser Stelle lediglich ein Wert angegeben, so steht dieser für font-size, da line-height optional ist.

Beachten Sie:

Zunächst werden alle font-Eigenschaften auf ihren Ausgangswert zurückgesetzt und somit nur die ausdrücklich definierten Eigenschaften angewandt.

CSS 1.0 Netscape 6.0 MS IE 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 word-spacing (Wortabstand)

Mit dieser Eigenschaft können Sie den Abstand zwischen Wörtern im Text bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>word-spacing</title>
</head><body>
<p>
<span style="word-spacing:0.5em">Beispieltext mit Wortabstand 0.5em</span><br>
<span style="word-spacing:1em">Beispieltext mit Wortabstand 1em</span><br>
<!--usw.-->
</p>
</body></html>

Erläuterung:

Mit word-spacing: können Sie den Wortabstand bestimmen. Erlaubt sind Seite numerische Angaben, jedoch keine Prozentangaben.

CSS 1.0 Netscape 6.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 letter-spacing (Zeichenabstand)

Mit dieser Eigenschaft können Sie den Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>letter-spacing</title>
</head><body>
<p>
<span style="letter-spacing:0.1em">Beispieltext mit Zeichenabstand 0.1em</span><br>
<span style="letter-spacing:0.3em">Beispieltext mit Zeichenabstand 0.3em</span><br>
<!--usw.-->
</p>
</body></html>

Erläuterung:

Mit letter-spacing: können Sie den Zeichenabstand bestimmen. Erlaubt sind Seite numerische Angaben, jedoch keine Prozentangaben.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 text-decoration (Textdekoration)

Mit dieser Eigenschaft können Sie zusätzliche Textformatierungen wie unterstrichenen oder durchgestrichenen Text erzwingen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-decoration</title>
<style type="text/css">
a:link { text-decoration:none; }
a:visited { text-decoration:line-through; }
a:hover { text-decoration:underline; }
a:active { text-decoration:underline; }
a:focus { text-decoration:blink; }
</style>
</head><body>

<p>
Sie kennen sicher die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a>.<br>
Aber kennen Sie auch die <a href="../../../perl/module/cpanmodule.htm">CPAN-Module</a>?<br>
Oder die <a href="../../../diverses/sprachenlaenderkuerzel.htm">Sprachen- und Länderkürzel</a>?<br>
Mit der <a href="../schrift.htm#text_decoration">Textdekoration</a> sind Sie bereits vertraut?
</p>

</body>
</html>

Erläuterung:

Mit text-decoration: können Sie die zusätzliche Formatierung bestimmen. Folgende Angaben sind möglich:

underline = unterstrichen.
overline = überstrichen.
line-through = durchgestrichen.
blink = blinkend.
none = normal (keine Text-Dekoration).

Beachten Sie:

Internet Explorer und Konqueror interpretieren die Angabe blink nicht. Netscape 4.x interpretiert die Angabe overline noch nicht, Netscape 6.0 jedoch schon.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 text-transform (Text-Transformation)

Mit dieser Eigenschaft können Sie in einem Textbereich Klein- oder Großbuchstaben oder Kapitälchen erzwingen, unabhängig davon, wie die einzelnen Buchstaben tatsächlich in der Datei stehen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-transform</title>
</head><body>

<p><span style="text-transform:capitalize">kleiner Beispieltext
mit Text-Transformation capitalize</span><br>
<span style="text-transform:capitalize; font-size:200%">großer Beispieltext
mit Text-Transformation capitalize</span></p>

<!--usw.-->

</body>
</html>

Mit text-transform: können Sie die Transformation bestimmen. Folgende Angaben sind möglich:

capitalize = Wortanfänge als Großbuchstaben.
uppercase = Nur Großbuchstaben.
lowercase = Nur Kleinbuchstaben.
none = normal (keine Text-Transformation).

Beachten Sie:

Der Internet Explorer 4 interpretiert die Angabe capitalize noch nicht. Nicht jeder Browser kennt die korrekten Umformungsregeln für Großbuchstaben bei der Angabe uppercase, so kann es z.B. geschehen, dass das ß nicht zu SS umgewandelt wird.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 color (Textfarbe)

Mit dieser Angabe können Sie Textvordergrundfarbe bzw. Schriftfarbe bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>color</title>
</head><body>

<p><span style="color:blue">kleiner Beispieltext mit Farbe <strong>blue</strong></span><br>
<span style="color:blue;font-size:200%">großer Beispieltext
mit Farbe <strong>blue</strong></span></p>

<!--usw.-->
</body></html>

Erläuterung:

Mit color: können Sie die Textfarbe bestimmen. Erlaubt sind Seite Farbangaben.

Beachten Sie:

Zum Definieren von Farben können Sie den SELFHTML Seite Farbauswähler benutzen.

CSS 2.0 Konqueror 3.4 Safari 1.1 text-shadow (Textschatten)

In CSS2 war vorgesehen, hiermit einen Schatteneffekt für Text zu erzeugen.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-shadow</title>
<style type="text/css">
#rotschattig  { text-shadow:black 3px 2px; font-size:3em; color:red; }
#blauschattig { text-shadow:black 3px 2px 4px; font-size:3em; color:blue; }
</style>
</head><body>

<p id="rotschattig">Großer roter Text mit schwarzem Schatten</p>
<p id="blauschattig">Großer blauer Text mit schwarzem Schatten</p>

</body></html>

Erläuterung:

Mit text-shadow: können Sie einen Textschatten erzwingen. Erlaubt sind Seite Farbangaben oder der Wert none für "keinen Textschatten" sowie Seite numerische Angaben, jedoch keine Prozentangaben.

Der erste numerische Wert definiert die horizontale Position des Schattens unter dem Text, der zweite Wert die vertikale. Eine optionale dritte Längenangabe definiert den Unschärferadius, das heißt, wie weit der Schatten im Hintergrund verläuft. Es lassen sich mehrere Schatten für ein Element definieren, indem weitere Sätze dieser Angaben nach einem Komma hinzugefügt werden. Beispielsweise erzeugt text-shadow:black 0 0 5px, red 5px 5px 3px;. einen schwarzen sowie einen roten Schatten.

Beachten Sie:

Diese Eigenschaft, die zu CSS2 gehört, wird bislang nur von Safari ab Version 1.1 und Konqueror ab Version 3.4 interpretiert. Im Gegensatz zum Konqueror unterstützt Safari noch nicht die Möglichkeit mehrerer Schatten.

CSS 2.0 font-stretch (Schriftlaufweite)

In CSS2 war vorgesehen, hiermit die Schriftlaufweite angeben zu können, also wie schmal oder breit eine Schrift erscheint.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-stretch</title>
</head><body>

<p><span style="font-stretch:wider">kleiner Beispieltext mit Laufweite wider</span><br>
<span style="font-stretch:wider; font-size:200%">großer Beispieltext
mit Laufweite wider</span></p>

<p><span style="font-stretch:narrower">kleiner Beispieltext mit Laufweite narrower</span><br>
<span style="font-stretch:narrower; font-size:200%">großer Beispieltext
mit Laufweite narrower</span></p>

<!--usw.-->
</body></html>

Erläuterung:

Mit font-stretch: sollte die Laufweite der Schrift bestimmt werden. Folgende Angaben waren vorgesehen:

wider = weiter als normal.
narrower = enger als normal.
condensed = gedrängt.
semi-condensed = halb gedrängt.
extra-condensed = stark gedrängt.
ultra-condensed = extrastark gedrängt.
expanded = geweitet.
semi-expanded = halb geweitet.
extra-expanded = stark geweitet.
ultra-expanded = extrastark geweitet.
normal = normale Laufweite.

nach oben
weiter | Seite Schriftformatierung mit Schriftartendatei
zurück | Seite Das Box-Modell
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Schriftformatierung mit Schriftartendatei

SELFHTML

Schriftformatierung mit Schriftartendatei
Informationsseite

nach unten @font-face, src, font-family (Schriftformatierung mit Schriftartendatei)
nach unten Schriftformate eingrenzen
nach unten unicode-range (Unicode-Bereich eingrenzen)
nach unten Weitere Angaben zur Schriftquelle
nach unten

CSS 2.0 Netscape 4.0 MS IE 4.0 @font-face, src, font-family (Schriftformatierung mit Schriftartendatei)

Von diesen in CSS2 eingeführten Angaben wurde nur @font-face vom Internet Explorer und Netscape 4.x unterstützt. Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert sind, gehören sie in CSS 2.1 nicht mehr zum Standard! Sie sollten also stets auch passende Alternativ-Schriftarten angeben, wenn Ihre Seiten nicht ausschließlich von Nutzern des Internet Explorer besucht werden (die die Schriftart-Installation bei hoher Sicherheitsstufe auch bestätigen).

Über @font-face können Sie für den Internet Explorer eine Schriftart definieren und dabei direkt die Daten-Ressourcen der gewünschten Schriftarten ansprechen, also bestimmte Schriftartendateien. Vorgesehen war außerdem, mit Hilfe spezieller Definitionen die Charakteristika der gewünschten Schriftart exakt beschreiben zu können. Beim Definieren der Schriftart vergeben Sie einen Namen für die Schriftart. Unter diesem Namen können Sie sie anschließend mit der Eigenschaft Seite font-family verwenden.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-face</title>
<style type="text/css">
 @font-face { font-family:Garamond; src:url(garamond.eot), url(garamond.pfr); }
</style>
</head>
<body>
<p style="font-family:Garamond">Text in Garamond</p>
</body></html>

Erläuterung:

Mit @font-face starten Sie die Angabe einer exakten Schriftart in einem style-Bereich. Dahinter folgen, in geschweiften Klammern, die Daten. Die beiden wichtigsten sind der Schriftartenname font-family und der URI der Schriftartendatei src:url(Datei).

Den Schriftartennamen vergeben Sie mit der Angabe font-family: innerhalb des @font-face-Bereichs. Unter diesem Namen können Sie die Schriftart in HTML verwenden. Im obigen Beispiel gibt es einen Textabsatz, der mit Hilfe einer Stylesheet-Angabe die zuvor definierte Schriftart erzwingt.

Die Schriftartendatei, die Sie für die zugehörigen font-family-Angaben bestimmen, geben Sie mit src:url(Datei) an. Wenn sich die Schriftartendatei im gleichen Verzeichnis befindet wie die HTML-Datei, genügt die Angabe des Dateinamens. Andernfalls müssen Sie die genaue Lage der Schriftartendatei entweder durch eine relative Pfadangabe oder durch eine absolute Adressierung vom Typ http://... angeben.

Im obigen Beispiel sehen Sie, dass gleich zwei URI-Angaben notiert sind. Einmal wird eine eot-Datei als Schriftartenquelle angegeben, einmal eine pfr-Datei. Beide Formate sind browser-spezifisch: eot-Dateien sind Schriftartendateien, die der Internet Explorer (ab Version 4) als Web-Schriftarten erkennt; pfr-Dateien sind Schriftartendateien, die Netscape 4.x erkannte. Wenn Sie Ihre gewünschte Schriftart auch für diesen veralteten Browser zur Verfügung stellen wollen, können Sie beide Formate so einbinden wie im obigen Beispiel.

Einzelheiten zu eot- und pfr-Schriftarten und wie Sie diese selbst erstellen können, finden Sie im Kapitel über Kapitel Internationalisierung im Abschnitt Seite Downloadbare Schriftarten.

CSS 2.0 Schriftformate eingrenzen

In CSS2 war vorgesehen, bei der Einbindung einer Schriftartendatei auch Angaben zu den möglichen Formateigenschaften der Schrift zu machen, wie z.B. zu Seite Schriftstil (font-style), Seite Schriftvariante (font-variant), Seite Schriftgröße (font-size) oder Seite Schriftgewicht (font-weight). So sollte dem Browser bereits in der HTML-Datei mitgeteilt werden, welche Formateigenschaften die Schriftartendatei unterstützt. Der Browser sollte die Schriftartendatei in desem Fall nur dann zum Anwender übertragen, wenn Formatierungen in der HTML-Datei die Übertragung sinnvoll machen.
Wegen mangelnder Browserunterstützung werden diese Angaben jedoch in CSS 2.1 nicht übernommen.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-face</title>
<style type="text/css">
 @font-face { font-family:Garamond; src:url(garamond.eot); font-size:10pt,12pt,14pt; }
 @font-face { font-family:Garamond; src:url(garamond.pfr); font-size:10pt,12pt,14pt; }
</style>
</head><body>
<p style="font-family:Garamond; font-size:48pt">Text</p>
<!-- Datei wird nicht übertragen -->
</body></html>

Erläuterung:

Mit den dafür üblichen Stylesheet-Eigenschaften sollten bei der Definition einer Schriftart mit Schriftartendatei einschränkende Angaben zur Schrift gemacht werden können.

Folgende Besonderheiten sollten dabei beachtet werden:
Zu font-style, font-variant, font-weight und font-size konnten auch mehrere, durch Kommata getrennte Werte angegeben werden.
Bei font-weight waren die Angaben bolder und lighter nicht zulässig.
Bei font-size waren nur absolute Größenangaben und keine relativen wie Prozentangaben oder em-Angaben erlaubt.

CSS 2.0 unicode-range (Unicode-Bereich eingrenzen)

In CSS2 war vorgesehen, bei der Einbindung einer Schriftartendatei den Zeichenbereich einschränken zu können. So sollte dem Browser bereits in der HTML-Datei mitgeteilt werden, welchen Zeichenbereich die Schriftart unterstützt. Der Browser sollte die Schriftartendatei in desem Fall nur dann zum Anwender übertragen, wenn alle Zeichen eines Textes, der mit der Schriftart formatiert wird, innerhalb des definierten Seite Unicode-Bereichs liegen.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>unicode-range</title>
<style type="text/css">
 @font-face { font-family:System; src:url(system.eot); unicode-range:U+0000-007F; }
 @font-face { font-family:System; src:url(system.pfr); unicode-range:U+0000-007F; }
</style>
</head>
<body>
<p><tt style="font-family:System">Text mit ß und Ü</tt></p>
<!-- Datei wird nicht übertragen -->
</body>
</html>

Erläuterung:

Mit unicode-range: sollte der Zeichenbereich der Schriftartendatei vor dem Download bekannt gemacht werden. Im obigen Beispiel wird der Bereich U+0000-007F definiert. Das entspricht dem ASCII-Zeichenvorrat. Wenn nun in einem Bereich, der diese Schriftart benutzt, beispielsweise Umlaute oder andere Zeichen vorkommen, die nicht im ASCII-Zeichenvorrat vorkommen, sollte die Schriftartendatei nicht heruntergeladen werden.

Unicode-Angaben beginnen immer mit U+. Dahinter folgt eine Angabe der gewünschten Zeichennummer in hexadezimaler Form. Um einen Bereich zu definieren, der aus mehreren Unicode-Zeichen besteht, können Sie als Platzhalterzeichen (Wildcard) ein Fragezeichen ? benutzen. Bei einer Angabe wie unicode-range:U+00?? bewirken die zwei hintereinanderstehenden Fragezeichen am Ende der Angabe, dass der gewünschte Unicode-Bereich 16 hoch 2, also 256 Zeichen ab dem Zeichen U+00 beträgt. Da laut Unicode-System bei U+0000 die Zeichen des der Latin-1-Codetabelle beginnen, die 256 Zeichen umfasst, deckt die Angabe in dem Beispiel genau diesen Zeichenvorrat ab. Wenn Sie einen beliebigen Unicode-Bereich bestimmen möchten, können Sie dies mit einer Angabe tun wie z.B. U+AC00-D7FF

.

CSS 2.0 Weitere Angaben zur Schriftquelle

Die Version 2.0 der CSS-Sprache stellte einige Stylesheet-Angaben bereit, um Schriftartenquellen möglichst vielfältig definierbar und auffindbar zu machen, die wegen mangelnder Browserunterstützung jedoch in CSS 2.1 nicht übernommen werden.

Beispiel:

<style type="text/css">
 @font-face { font-family:Kino; src:local(Kino MT), url(kino.ttf) format(TrueType); }
 @font-face { font-family:MeineArt; url(http://www.example.org/cgi-bin/myfont.pl) format(intellifont) }
 @font-face { font-family:Alabama; url(alab.fon); panose-1: 2 4 5 2 5 4 5 9 3 3; }
</style>

Erläuterung:

Browser sollten zuerst auf dem Rechner des Anwenders nach der gewünschten Schriftart suchen und eine auf dem Server bereit liegende Schriftart nur dann herunterladen, wenn die Schriftart lokal nicht verfügbar ist. Dazu sollte bei der Quellenangabe der Schriftartendatei (src:) zuerst local und dahinter in Klammern der gewünschte Schriftartenname notiert werden. Für den Fall, dass der Browser diese Schriftart beim Anwender nicht findet, war durch ein Komma getrennt die Schriftartendatei auf der Internetseite anzugeben - im Beispiel url(kino.ttf).

Es sollten ferner Angaben zum Format der Schriftart gemacht werden können. Der Browser sollte die Schriftartendatei in diesem Fall nur dann herunterladen, wenn sie auf dem Rechner des Anwenders ausführbar ist. Dazu war die Angabe format() zu notieren, durch ein Leerzeichen getrennt von den Angaben zu src:local() und/oder src:url(). Innerhalb der Klammern sollte das Format der Schriftartendatei angeben werden. Im obigen Beispiel wird eine TrueType-Schriftart angegeben.

Folgende weitere Möglichkeiten waren vorgesehen, um die Schriftart genau einzugrenzen:

panose-1:, gefolgt von 10 durch Leerzeichen getrennten Zahlen, sollte eine Schriftart nach dem Panose-1-System bestimmen. Beispiel: panose-1: 2 4 5 2 5 4 5 9 3 3;
stemv: und stemh: für die vertikale und horizontale Stammbreite der Glyphen.
units-per-em: für die Anzahl der Einheiten pro em-Maßeinheit. Üblich sind die Werte 250 (bei Intellifont), 1000 (bei Type-1) oder 2048 (bei TrueType). Bei Angabe von stemv: und/oder stemh: war ebenfalls units-per-em: anzugeben.
slope: für den vertikalen Winkel der Glyphen.
cap-height: für die Höhe der Großbuchstaben der Glyphen.
x-height: für die Höhe der Kleinbuchstaben der Glyphen.
ascent: für die maximale Höhe der akzentlosen Glyphen.
descent: für die maximale Tiefe der akzentlosen Glyphen.
definition-src:url() für eine Datei mit Schriftartendefinitionen.
baseline: für die untere Grundlinie der Glyphen.
centerline: für die zentrale Grundlinie der Glyphen.
mathline: für die mathematische Grundlinie der Glyphen.
topline: für die obere Grundlinie der Glyphen.

nach oben
weiter | Seite Ausrichtung und Absatzkontrolle
zurück | Seite Schriftformatierung
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Ausrichtung und Absatzkontrolle

SELFHTML

Ausrichtung und Absatzkontrolle
Informationsseite

nach unten Allgemeines zu Ausrichtung und Absatzkontrolle
nach unten text-indent (Texteinrückung)
nach unten line-height (Zeilenhöhe)
nach unten vertical-align (Vertikale Ausrichtung)
nach unten text-align (Horizontale Ausrichtung)
nach unten white-space (Textumbruch)

nach unten

Allgemeines zu Ausrichtung und Absatzkontrolle

Für Textblöcke oder Textabsätze gibt es absatztypische Eigenschaften. Absätze können beispielsweise links- oder rechtsbündig ausgerichtet sein. Bei Tabellenzellen oder anderen Elementen, die eine berechnete oder definierte Höhe haben können und mehr Platz lassen als der Text darin einnimmt, wird häufig vertikale Ausrichtung oben, mittig oder untenbündig erforderlich.

Zu den typischen Eigenschaften der Absatzformatierung gehören ferner die Merkmale Einzug und Zeilenhöhe. Und schließlich auch noch die Angabe, wie der Fließtext innerhalb des Absatzes umbrochen werden soll: ob gar nicht, automatisch, oder so, wie er im Editor eingegeben wurde.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 text-indent (Texteinrückung)

Sie können für einen mehrzeiligen Fließtext bestimmen, dass die erste Zeile eingerückt wird. Dieses Gestaltungselement ist in Büchern und Zeitschriften sehr verbreitet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-indent</title>
</head><body>

<p style="text-indent:1em;">Dieser Textabsatz hat eine
Texteinr&uuml;ckung von 1em. Texteinr&uuml;ckungen dieser Art sind an
die &Auml;sthetik von B&uuml;chern oder Zeitungen angelehnt, wo
h&auml;ufig mit dieser Formatierung gearbeitet wird. Damit das auch
wirklich sichtbar wird, enth&auml;lt dieser Textabsatz
schlie&szlig;lich noch diesen &uuml;berfl&uuml;ssigen Satz, der
sich aber hoffentlich wenigstens fl&uuml;ssig liest.</p>

<!--usw.-->
</body></html>

Erläuterung:

Mit text-indent: können Sie eine Einrückung für die erste Zeile bestimmen. Erlaubt ist eine Seite numerische Angabe.

Beachten Sie:

Mit einem negativen Wert für text-indent bewirken Sie eine Textausrückung in der ersten Fließtextzeile.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 line-height (Zeilenhöhe)

Sie können für Elemente mit viel Fließtext die Zeilenhöhe bestimmen. Diese Angabe ist vor allem in Verbindung mit einer Angabe zur Seite Schriftgröße interessant.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>line-height</title>
</head><body>

<p style="line-height:1.4em; font-size:1em; margin-left:20%; margin-right:20%">
Die Zeilenh&ouml;he ist ein altbekanntes DTP-Feature zur Formatierung von
Abs&auml;tzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der
typografischen Wirkung von Text hilfreich. ... </p>

</body></html>

Erläuterung:

Mit line-height: können Sie die Zeilenhöhe bestimmen. Erlaubt ist eine Seite numerische Angabe. Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich dabei auf die Schriftgröße des Elements, für das die Zeilenhöhe bestimmt wird.

Beachten Sie:

Bei erzwungener Zeilenhöhe ist es möglich, dass ein interpretierendes Programm dieser Angabe den Vorrang einräumt und Elemente abschneidet, die höher sind, beispielsweise eine im Fließtext referenzierte Grafik.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 vertical-align (vertikale Ausrichtung)

Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile, im Verhältnis zueinander ausrichten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>vertical-align</title>
<style type="text/css">
td       { height:200px; }
.oben    { vertical-align:top; background-color:#CCCCCC; }
.mittig  { vertical-align:middle; background-color:#DDDDDD; }
.unten   { vertical-align:bottom; background-color:#EEEEEE; }
</style>
</head><body>

<table border="1"><tr>
<td class="oben"><b>Text oben</b></td>
<td class="mittig"><b>Text mittig</b></td>
<td class="unten"><b>Text unten</b></td>
</tr></table>

</body></html>

Erläuterung:

Mit vertical-align: können Sie die vertikale Ausrichtung bestimmen. Folgende Angaben sind möglich:

top = obenbündig ausrichten.
middle = mittig ausrichten.
bottom = untenbündig ausrichten.
baseline = an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie gibt).
sub = tieferstellen (ohne die Schriftgröße zu reduzieren).
super = höherstellen (ohne die Schriftgröße zu reduzieren).
text-top = am oberen Schriftrand ausrichten.
text-bottom = am unteren Schriftrand ausrichten.

Bei Fließtext ist auch eine prozentuale Angabe möglich. Die Ausrichtung orientiert sich dann an der elementeigenen Zeilenhöhe.

Das folgende Bild veranschaulicht das Modell der vertikalen Ausrichtung:

Die gelben Kästen stellen Kindelemente des großen Kastens dar, die freistehenden schwarzen Texte stellen Zeicheninhalt des großen Kastens dar.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 text-align (horizontale Ausrichtung)

Sie können Textabsätze und in anderen Block-Elementen enthaltenen Fließtext oder Inline-Elemente ausrichten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>text-align</title>
</head><body>

<p style="text-align:left; margin-left:50px; margin-right:50px">Der Absatz,
den Sie gerade lesen, wurde mit <b>text-align</b> linksbündig ausgerichtet.
Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch,
damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen.<br>
Noch eine Textzeile<br>
Noch eine Textzeile</p>

<!--usw.-->
</body></html>

Erläuterung:

Mit text-align: können Sie Textinhalte von Block-Elementen ausrichten. Folgende Angaben sind möglich:

left = linksbündig ausrichten (Voreinstellung).
center = zentriert ausrichten.
right = rechtsbündig ausrichten.
justify = als Blocksatz ausrichten.

Beachten Sie:

text-align bezieht sich nicht nur auf Textinhalte, sondern auf alle inline dargestellten Elemente (wie z.B. <img>). Der Internet Explorer wendet diese Eigenschaft jedoch fälschlich auch auf Block-Elemente an.
Block-Elemente selbst werden über Seite margin ausgerichtet, wobei gleiche Werte für margin-left und margin-right eine Zentrierung bewirken können.

Eine ehemals eingeführte CSS-Eigenschaft namens alignment ist mittlerweile aus dem CSS-Standard verschwunden. Verwenden Sie nur noch text-align.

CSS 2.0 Netscape 6.0 MS IE 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 white-space (Textumbruch)

Sie können festlegen, wie der Zeilenumbruch innerhalb von Elementen mit Text erfolgen soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>white-space</title>
<style type="text/css">
#editor      { white-space:pre; }
#langezeile  { white-space:nowrap; }
</style>
</head><body>

<p id="editor">
Der Absatz, den Sie gerade lesen,
   wurde als predefiniert definiert.
      Zeilenumbrüche sollten dabei so interpretiert
           werden, wie sie im Editor eingegeben wurden.</p>

<p id="langezeile">Der Absatz, den Sie gerade lesen, darf nicht
umbrochen werden. Es sollte kein automatischer Zeilenumbruch erfolgen. Bei
diesem l&auml;ngeren Text m&uuml;ssen Sie vermutlich quer scrollen, um alles zu lesen.</p>

</body></html>

Erläuterung:

Mit white-space: können Sie das Verhalten für den Zeilenumbruch festlegen. Folgende Angaben sind möglich:

normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>).
pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>).
nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags.

CSS 2.1 Mit CSS 2.1 werden noch die folgenden Werte eingeführt:

pre-wrap = wie pre, jedoch erfolgt ein Umbruch, wenn die Breite der Box zur Anzeige der Zeile nicht ausreicht.
pre-line = Mehrere Whitespaces werden wie bei normal zusammengefasst, es erfolgt aber ein Zeilenumbruch wie bei pre-wrap.

Beachten Sie:

Der Internet Explorer 5.5 interpretiert nur den Wert nowrap, nicht den Wert pre. Netscape 4.x interpretiert den Wert pre, nicht aber nowrap. Erst Internet Explorer 6 und Netscape 6 beherrschen alle Angaben.

nach oben
weiter | Seite Außenrand und Abstand
zurück | Seite Schriftformatierung mit Schriftartendatei
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Außenrand und Abstand

SELFHTML

Außenrand und Abstand
Informationsseite

nach unten Allgemeines zu Außenrand und Abstand
nach unten margin-top (Außenrand/Abstand oben)
nach unten margin-right (Außenrand/Abstand rechts)
nach unten margin-bottom (Außenrand/Abstand unten)
nach unten margin-left (Außenrand/Abstand links)
nach unten margin (Außenrand/Abstand allgemein)
nach unten

Allgemeines zu Außenrand und Abstand

Außenrand oder Abstand bedeutet: erzwungener Leerraum zwischen dem aktuellen Element und seinem Elternelement oder Nachbarelement. Für ein p-Element, also einen Textabsatz etwa, der direkt innerhalb des body-Elements notiert ist, markieren Angaben zu linkem und rechten Außenrand seinen Abstand zu den Elementgrenzen des body-Elements. Wenn mehrere solcher p-Absätze aufeinander folgen, markieren Angaben zum Außenrand oben und unten den Abstand zwischen den Absätzen. Das folgende Bild veranschaulicht die Möglichkeiten, Außenränder und Abstände zu definieren:

Außenrand und Abstand

Sinnvoll sind die hier beschriebenen CSS-Eigenschaften für alle HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address oder pre. Block-Elemente sind aber auch HTML-Elemente wie div und table. Auch auf body lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall werden Ränder für den gesamten sichtbaren Körper der HTML-Datei definiert.

Mit negativen Werten, also Angaben wie beispielsweise -50px, können Sie für besondere gestalterische Zwecke erreichen, dass sich Elemente überlappen.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 margin-top (Außenrand/Abstand oben)

Sie können bestimmen, wie viel Abstand ein Element zu seinem Vorgängerelement oder zu seinem Elternelement nach oben hin hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin-top</title>
<style type="text/css">
  h1,h2,h3 { margin-top:3em; }
  div.beispiel { margin-top:100px; margin-left:200px; }
</style>
</head><body>

<h1>&Uuml;berschrift erster Ordnung</h1>
<div class="beispiel">
Bereich mit der Beispiel-Klasse.
<h1>&Uuml;berschrift erster Ordnung</h1>
</div>

</body></html>

Erläuterung:

Mit margin-top: können Sie den Rand/Abstand oben bestimmen. Erlaubt ist eine Seite numerische Angabe oder der Wert auto oder inherit. Im obigen Beispiel wird für Überschriften 1., 2. und 3. Ordnung ein vorausgehender Abstand von 3em definiert. Ferner wird eine Klasse beispiel für das div-Element definiert. Solche Bereiche haben laut Definition im Beispiel 100 Pixel Abstand zu ihrem vorausgehenden Element (und 200 Pixel Abstand nach links, definiert mit margin-left).

Wenn das Vorgänger- oder Elternelement eine Angabe zu nach unten margin-bottom hat, gilt nur eine der beiden Angaben für den Gesamtabstand zwischen den beiden Elementen, und zwar diejenige, die den größten Abstand definiert. Wenn also ein erster Textabsatz margin-bottom:10px hat und ein folgender Textabsatz margin-top:15px, dann wird der Abstand zwischen beiden Absätzen auf 15px berechnet. Wenn eine der beiden Gegen-Angaben negativ ist, wird der tatsächliche Abstand zwischen den beiden Elementen aus dem Wert der positiven abzüglich der negativen Angabe berechnet.

Beachten Sie:

Bei Verwendung im body-Element bestimmt margin-top: den Abstand zum oberen Fensterrand.
Der Wert auto entspricht dem Ausgangswert 0 für diese Eigenschaft, setzt also lediglich einen zuvor definierten Wert zurück.

Einige frühe Netscape 4.x-Versionen beherrschen das Zusammenrechnen von Abstandsangaben oben und unten noch nicht und addieren beide Werte.

CSS 1.0 Netscape 6.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 margin-right (Außenrand/Abstand rechts)

Sie können den rechten Abstand/Rand eines Elements festlegen. Wenn das Element einen rechten Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die erste der beiden), dann bedeutet die Angabe den Abstand zum rechts davon liegenden Element. Wenn das Element keinen rechten Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z.B. zum Seitenrand, der für das body-Element festgelegt ist.). Wenn kein übergeordnetes Elternelement mehr da ist (also beim body-Element selbst), dann bezieht sich die Angabe auf den rechten Abstand des Dokumentinhalts vom Anzeigefenster.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin-right</title>
<style type="text/css">
  p { text-align:right; }
</style>
</head><body>

<p style="margin-right:1em">Dieser rechtsbündig ausgerichtete
 Textabsatz hat einen Abstand von 1em zum rechten Rand.</p>
<p style="margin-right:3em">Dieser rechtsbündig ausgerichtete
 Textabsatz hat einen Abstand von 3em zum rechten Rand.</p>

<!--usw.-->
</body></html>

Erläuterung:

Mit margin-right: können Sie den Rand/Abstand rechts bestimmen. Erlaubt ist eine Seite numerische Angabe oder der Wert auto oder inherit.

Beachten Sie:

Der Wert auto setzt den rechten Abstand auf die gesamte noch zur Verfügung stehende Breite, wirkt sich also ohne Angabe zu margin-left nicht aus. Über margin-left:auto; margin-right:auto können Block-Elemente zentriert werden. Der Internet Explorer unterstützt dies allerdings bis zur Version 5.x noch nicht; Sie können jedoch dessen fehlerhafte Umsetzung von Seite text-align zur Zentrierung von Block-Elementen ausnutzen.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 margin-bottom (Außenrand/Abstand unten)

Sie können bestimmen, wie viel Abstand ein Element zu seinem Nachfolgerelement nach unten hin hat, oder - wenn es das letzte Kindelement eines Elements ist - wie viel Abstand es zu dessen unterem Rand hin hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin-bottom</title></head>
<body>

<p style="margin-bottom:3em">Dieser Textabsatz hat einen
Abstand von 3em zum darauffolgenden.</p>

<p style="margin-bottom:10%">Dieser Textabsatz hat einen
Abstand von 10% zum darauffolgenden.</p>

<p style="margin-bottom:50px">Dieser Textabsatz hat einen
Abstand von 50px zum darauffolgenden.</p>

<p>Dieser Textabsatz dient nur noch zu Vergleichszwecken und hat keinen
definierten Nachabstand.</p>

</body></html>

Erläuterung:

Mit margin-bottom: können Sie den Rand/Abstand nach unten bestimmen. Erlaubt ist eine Seite numerische Angabe oder der Wert auto oder inherit. Für Hinweise zu addierenden Angaben für margin-bottom und margin-top bei aufeinanderfolgenden Elementen siehe nach oben margin-top.

Beachten Sie:

Bei Verwendung im body-Element bestimmt margin-bottom: den Abstand zum unteren Fensterrand.
Der Wert auto entspricht dem Ausgangswert 0 für diese Eigenschaft, setzt also lediglich einen zuvor definierten Wert zurück.

Bei Netscape 4.x hat die Angabe margin-top (für den Abstand oben) in jedem Fall Vorrang vor der Angabe margin-bottom (für den Abstand unten), weshalb dort das intelligente Addieren zwischen Angaben zu beiden Eigenschaften nicht so funktioniert wie es sollte.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 margin-left (Außenrand/Abstand links)

Sie können den linken Abstand/Rand eines Elements festlegen. Wenn das Element einen linken Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die zweite der beiden), dann bedeutet die Angabe den Abstand zum links davon liegenden Element. Wenn das Element keinen linken Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z.B. zum Seitenrand, der für das body-Element festgelegt ist). Wenn kein übergeordnetes Elternelement mehr da ist (also beim body-Tag selbst), dann bedeutet die Angabe den linken Abstand des Dokumentinhalts vom Anzeigefenster.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin-left</title>
<style type="text/css">
  body { margin-left:100px; }
  p,div,table,ul,ol { margin-left:30px; }
</style>
</head><body>

<h1>Eine &Uuml;berschrift erster Ordnung</h1>
<p>Ein Textabsatz, nochmals weiter eingezogen.</p>
<p>Noch einer davon.</p>
<h2>Eine &Uuml;berschrift zweiter Ordnung</h2>
<ul>
<li>Ein Listenpunkt</li>
<li>Noch ein Listenpunkt</li>
</ul>

</body></html>

Erläuterung:

Mit margin-left: können Sie den Rand/Abstand links bestimmen. Erlaubt ist eine Seite numerische Angabe oder der Wert auto oder inherit. Im obigen Beispiel wird zunächst ein globaler linker Seitenrand von 100 Pixeln definiert, indem diese Angabe dem body-Element zugewiesen wird. Für Fließtextabsätze, Bereiche, Tabellen, und Listen wird zusätzlich ein linker Rand von 30 Pixeln definiert, sodass sich bei diesen Elementen insgesamt ein linker Rand von 130 Pixeln zum linken Fensterrand ergibt. Überschriften etwa, für die nichts weiter festgelegt ist, erscheinen dann links ausgerückt.

Bei Nachbarelementen oder verschachtelten Elementen, bei denen Angaben zu margin-left und nach unten margin-right aufeinandertreffen, werden beide Angaben in jedem Fall addiert.

Beachten Sie:

Der Wert auto setzt den linken Abstand auf die gesamte noch zur Verfügung stehende Breite, kann also zur rechtsbündigen Ausrichtung von Block-Elementen verwendet werden. Der Internet Explorer setzt dies allerdings bis zur Version 5.x noch nicht um.

Wenn Sie beispielsweise zwei Grafiken nebeneinander referenzieren und dabei margin-leftangeben, reagiert Netscape 4.x zum Teil sehr unterschiedlich und nicht besonders nachvollziehbar.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 margin (Außenrand/Abstand allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden fakultativen Einzelangaben:
nach oben margin-top
nach oben margin-right
nach oben margin-bottom
nach oben margin-left

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin</title>
<style type="text/css">
.typA { margin: 1cm; background-color:#99FF99; }
.typB { margin: 1cm 2cm; background-color:#FFFF99; }
.typC { margin: 1cm 2cm 3cm; background-color:#99FFFF; }
.typD { margin: 1cm 2cm 3cm 4cm; background-color:#FF99FF; }
</style>
</head><body>

<div class="typA"><h1>typA mit margin: 1cm</h1></div>
<hr>
<div class="typB"><h1>typB mit margin: 1cm 2cm</h1></div>
<hr>
<div class="typC"><h1>typC mit margin: 1cm 2cm 3cm</h1></div>
<hr>
<div class="typD"><h1>typD mit margin: 1cm 2cm 3cm 4cm</h1></div>
<hr>
</body></html>

Erläuterung:

Mit margin: können Sie den Rand/Abstand für oben, rechts, unten und links bestimmen. Erlaubt sind ein bis vier Seite numerische Angaben oder die Werte auto und inherit.

Eine Angabe bedeutet: alle vier Ränder des Elements erhalten den gleichen Außenabstand.

Bei mehreren Angaben werden diese abhängig von deren Anzahl interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.

nach oben
weiter | Seite Innenabstand
zurück | Seite Ausrichtung und Absatzkontrolle
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Innenabstand

SELFHTML

Innenabstand
Informationsseite

nach unten Allgemeines zum Innenabstand
nach unten padding-top (Innenabstand oben)
nach unten padding-right (Innenabstand rechts)
nach unten padding-bottom (Innenabstand unten)
nach unten padding-left (Innenabstand links)
nach unten padding (Innenabstand allgemein)
nach unten

Allgemeines zum Innenabstand

Innenabstand bedeutet: erzwungener Leerraum zwischen dem Inhalt eines Elements und seinem eigenen Elementrand, also z.B. zwischen dem Text eines Elements und dem Rand dieses Elements. Das folgende Bild zeigt, wie Innenabstände zu verstehen sind (die blauen Pfeile stehen für definierte Innenabstände):

Sinnvoll sind die hier beschriebenen CSS-Eigenschaften für alle HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, div, address oder pre. Sinnvoll sind die Angaben zum Innenabstand ferner, wenn Sie außerdem CSS-Eigenschaften für Seite Rahmen oder für Farben oder Grafiken zum Seite Hintergrund eines Elements notieren. Denn erst dann werden die Abstände zwischen Elementgrenze und Elementinhalt richtig sichtbar. Besonders sinnvoll sind die hier beschriebenen Eigenschaften daher auch für HTML-Tabellenelemente, sofern die Tabelle sichtbare Gitternetzlinien hat.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 padding-top (Innenabstand oben)

Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und oberer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>padding-top</title>
</head><body>

<p style="padding-top:100px; border:thin solid black;">Textabsatz mit sichtbarem Rahmen und
mit Innenabstand 100px oben</p>

</body></html>

Erläuterung:

Mit padding-top: bestimmen Sie den Innenabstand zwischen Elementinhalt und der oberen Elementgrenze. Erlaubt ist eine Seite numerische Angabe.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 padding-right (Innenabstand rechts)

Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und rechter Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>padding-right</title>
<style type="text/css">
#d1 { padding-right: 50px; background-color:#FFFF99; font-size:1.2em; }
#d2 { padding-right: 100px; background-color:#99FFFF; }
#d3 { padding-right: 150px; background-color:#FF99FF; }
</style>
</head><body>

<div id="d1">der erste Bereich d1
<div id="d2">der zweite Bereich d2
<div id="d3">der dritte Bereich d3
</div></div></div>

</body></html>

Erläuterung:

Mit padding-right: bestimmen Sie den Innenabstand zwischen Elementinhalt und der rechten Elementgrenze. Erlaubt ist eine Seite numerische Angabe.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 padding-bottom (Innenabstand unten)

Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und unterer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>padding-bottom</title>
</head><body>

<div style="padding-bottom:4em; border:thin solid red;">div-Bereich mit
sichtbarem roten Rahmen und Innenabstand 4em unten. Das ist in diesem Fall der
Abstand zwischen dem unteren Rahmen des Textabsatzes und dem unteren Rahmen des
div-Bereichs.
<p style="padding-bottom:100px; border:thin solid black;">Textabsatz mit sichtbarem
Rahmen und mit Innenabstand 100px unten</p>
</div>

</body></html>

Erläuterung:

Mit padding-bottom: bestimmen Sie den Innenabstand zwischen Elementinhalt und der unteren Elementgrenze. Erlaubt ist eine Seite numerische Angabe.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 padding-left (Innenabstand links)

Mit dieser Eigenschaft können Sie den Zwischenraum zwischen Elementinhalt und linker Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>padding-left</title>
<style type="text/css">
#p1 { padding-left: 100px; background-color:#FFFF99; font-size:120%; }
#p2 { padding-left: 200px; background-color:#FFFF99; font-size:120%; }
#p3 { padding-left: 300px; background-color:#FFFF99; font-size:120%; }
</style>
</head><body>

<p id="p1">der erste Absatz p1</p>
<p id="p2">der zweite Absatz p2</p>
<p id="p3">der dritte Absatz p3</p>

</body></html>

Erläuterung:

Mit padding-left: bestimmen Sie den Innenabstand zwischen Elementinhalt und der linken Elementgrenze. Erlaubt ist eine Seite numerische Angabe.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 padding (Innenabstand allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden fakultativen Einzelangaben:
nach oben padding-top
nach oben padding-right
nach oben padding-bottom
nach oben padding-left

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>padding</title>
</head><body>

<p style="border:80px solid #DDFFCC; padding:50px; font-size:1.5em">Textabsatz mit
dickem Rahmen rundherum mit Innenabstand 50px</p>

</body></html>

Erläuterung:

Mit padding: bestimmen Sie den Innenabstand zwischen Elementinhalt und den vier Elementgrenzen oben, rechts, unten und links. Erlaubt sind ein bis vier Seite numerische Angaben.

Eine Angabe bedeutet: alle vier Ränder des Elements erhalten den gleichen Innenabstand.

Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge für 1=oben, 2=rechts, 3=unten, 4=links interpretiert.
Zwei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben und unten, die zweite den Abstand für rechts und links.
Drei Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts und links und die dritte den Abstand für unten.
Vier Angaben bedeuten: die erste Angabe bedeutet den Abstand für oben, die zweite den Abstand für rechts, die dritte den Abstand für unten und die vierte den Abstand für links.

nach oben
weiter | Seite Rahmen
zurück | Seite Außenrand und Abstand
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Rahmen

SELFHTML

Rahmen
Informationsseite

nach unten Allgemeines zu Rahmen
nach unten border[-top, -right, -bottom, -left]-width (Rahmendicke)
nach unten border[-top, -right, -bottom, -left]-color (Rahmenfarbe)
nach unten border[-top, -right, -bottom, -left]-style (Rahmentyp)
nach unten border[-top, -right, -bottom, -left] (Rahmen allgemein)
nach unten outline-width (Rahmendicke)
nach unten outline-color (Rahmenfarbe)
nach unten outline-style (Rahmentyp)
nach unten outline (Rahmen allgemein)
nach unten

Allgemeines zu Rahmen

Es gibt in CSS zwei Arten von Rahmen: Die erste Sorte läuft unter der Bezeichnung border und zeichnet immer rechteckige Rahmen um die Elemente. border ist schon seit CSS1 im Standard vertreten und wird von allen Browsern verstanden. Außerdem gibt es outline, welche erst seit CSS2 existiert und noch nicht von allen Browsern verstanden wird, obwohl diese Rahmenart andere und durchaus sinnvolle Eigenschaften hat.

Allgemeines zu border

Sinnvoll sind die hier beschriebenen Angaben für border besonders für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address, pre sowie div oder table. Anwendbar sind sie aber auf alle Elemente. So ist es beispielsweise möglich, in HTML eine Seite blinde Tabelle zu notieren, in der aber doch einzelne Zellen einen Rahmen nach Wunsch erhalten - nämlich mit Hilfe von CSS-Rahmeneigenschaften. Auch auf html und body lassen sich die hier aufgelisteten Eigenschaften anwenden - in diesem Fall wird um den gesamten sichtbaren Körper einer HTML-Datei ein Rahmen gezeichnet.

Wenn Sie bei Rahmendefinitionen nichts weiter angeben, kann es sein, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Seite Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.

In der Regel werden Sie mehrere Angaben zu Rahmen kombinieren. So ist es sinnvoll, nicht nur eine Rahmendicke anzugeben, sondern auch die gewünschte Rahmenfarbe. Auch verschiedene Rahmentypen stehen zur Auswahl. Alle Rahmeneigenschaften können Sie wahlweise auf alle vier Seiten eines Elements anwenden, aber auch nur auf eine oder mehrere bestimmte Seiten.

Beachten Sie:

Der Internet Explorer vor Version 5.5 zeichnet Rahmen nur um Blocklevel-Elemente.

Allgemeines zu outline

Die Eigenschaft outline orientiert sich, im Gegensatz zu border nicht an rechteckigen Blöcken, sondern ist explizit als "Rahmen für nicht-rechteckige Bereiche" definiert. Außerdem wird die Dicke der outline nicht zur Elementgröße hinzugerechnet, sondern als letzter Schritt "draufgemalt", ohne Platz wegzunehmen. Im Gegensatz zu den border-Rahmen können outline-Rahmen aber nur vollständig geschlossen zugewiesen werden, es fehlt die Möglichkeit, einzeln für oben, unten, links oder rechts separate Angaben zu machen. Vergleichen Sie am Besten die Beispiele zu outline und border, um den Unterschied zu verstehen.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 border[-top, -right, -bottom, -left]-width (Rahmendicke)

Sie können für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum nach unten Rahmentyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der nach unten Rahmenfarbe.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>border-width</title>
<style type="text/css">
#links {
  border-left-width:2.5em;
  border-left-style:solid;
  border-color:red;
  padding-left:2.5em;
  text-align:justify;
}

#linksrechts {
  border-left-width:2.5em;
  border-left-style:solid;
  border-left-color:red;
  padding-left:2.5em;
  border-right-width:2.5em;
  border-right-style:solid;
  border-right-color:green;
  padding-right:2.5em;
  text-align:justify;
}

#rundrum {
  border-width:1px;
  border-style:solid;
  border-color:blue;
  padding:2.5em;
  text-align:justify;
}
</style>
</head><body>

<p id="links">xxxxx xxxxx xxxxx usw.</p>
<p id="linksrechts">xxxxx xxxxx xxxxx usw.</p>
<p id="rundrum">xxxxx xxxxx xxxxx usw.</p>

</body></html>

Erläuterung:

Mit border-width: können Sie die Dicke des Rahmens um ein Element bestimmen. Erlaubt ist eine Seite numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:

thin = dünn.
medium = mittelstark.
thick = dick.

Um für einzelne Seiten des Elements eine unterschiedliche Rahmendicke zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei border-width mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: border-width:5px 5px;
Dabei gelten folgende Regeln:

Zwei Angaben: die erste Angabe bedeutet die Rahmendicke für oben und unten, die zweite Angabe die Rahmendicke für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts und links und die dritte die Rahmendicke für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts, die dritte die Rahmendicke für unten und die vierte die Rahmendicke für links.

Die zweite Möglichkeit besteht darin, die Untereigenschaften von border-width zu verwenden:
border-top-width definiert die Rahmendicke für oben,
border-right-width die Rahmendicke für rechts,
border-bottom-width die Rahmendicke für unten und
border-left-width die Rahmendicke für links.

Beachten Sie:

Die Angabe border-width wird nur interpretiert, wenn außerdem der Rahmentyp (border-style) angegeben wird, also etwa:
<p style="border-style:solid; border-width:thin">.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 border[-top, -right, -bottom, -left]-color (Rahmenfarbe)

Sie können für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum nach unten Rahmentyp und/oder einer Angabe zur nach oben Rahmendicke kombinieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>border-color</title>
</head><body>

<p style="border-color:#FFFF00; border-width:2px; border-style:solid; padding:4px">
xxxxx xxxxx xxxxx usw.</p>

<p style="border-top-color:#FF00FF; border-left-color:#00FF00;
border-right-color:#3333FF; border-bottom-color:#FFFF00; border-width:4px;
border-style:solid; padding:8px">
xxxxx xxxxx xxxxx usw.</p>

<p style="border-color:cyan yellow; border-width:8px; border-style:solid; padding:16px">
xxxxx xxxxx xxxxx usw.</p>

</body></html>

Erläuterung:

Mit border-color: können Sie die Rahmenfarbe bestimmen. Erlaubt ist eine Seite Farbangabe oder der Wert transparent (durchsichtiger Rahmen, interessant bei sich überlappenden Elementen, wie z.B. durch Seite Positionierung möglich).

Um für einzelne Seiten des Elements eine unterschiedliche Rahmenfarbe zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei border-color mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: border-color:#FFFF00 red;
Dabei gelten folgende Regeln:

Zwei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben und unten, die zweite Angabe die Rahmenfarbe für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts und links und die dritte die Rahmenfarbe für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts, die dritte die Rahmenfarbe für unten und die vierte die Rahmenfarbe für links.

Die zweite Möglichkeit besteht darin, die Untereigenschaften von border-color zu verwenden:
border-top-color definiert die Rahmenfarbe für oben,
border-right-color die Rahmenfarbe für rechts,
border-bottom-color die Rahmenfarbe für unten und
border-left-color die Rahmenfarbe für links.
Die Untereigenschaften von border-color stehen im Gegensatz zu den Untereigenschaften von border-width jedoch erst seit CSS2 zur Verfügung und werden von älteren Browsern ignoriert.

Beachten Sie:

Die Angabe border-color wird nur interpretiert, wenn außerdem der Rahmentyp (border-style) angegeben wird, also etwa:
<p style="border-style:solid; border-color:red">.

Netscape 4.x hat mit Angaben zur Rahmenfarbe zum Teil erhebliche Probleme und interpretiert teilweise augenscheinlich unsinniges Zeug. Das obige Beispiel etwa lässt ihn böse straucheln.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 border[-top, -right, -bottom, -left]-style (Rahmentyp)

Mit dem Rahmentyp können Sie verschiedene Schmuckrahmen definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur nach oben Rahmendicke und/oder zur nach oben Rahmenfarbe.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>border-style</title>
</head><body>

<p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ dotted.</p>
<p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ dashed.</p>
<p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ solid.</p>
<p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ double.</p>
<p style="border-width:12px; border-color:#9999FF; border-style:groove; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ groove.</p>
<p style="border-width:12px; border-color:#66CC66; border-style:ridge; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ ridge.</p>
<p style="border-width:12px; border-color:#FF9999; border-style:inset; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ inset.</p>
<p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ outset.</p>

</body></html>

Erläuterung:

Mit border-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben.

none = kein Rahmen (bzw. unsichtbarer Rahmen).
hidden = kein Rahmen (bzw. unsichtbarer Rahmen), siehe nach unten Hinweis.
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.

Um für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei border-style mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: border-style:solid double;
Dabei gelten folgende Regeln:

Zwei Angaben: die erste Angabe bedeutet den Rahmentyp für oben und unten, die zweite Angabe den Rahmentyp für rechts und links.
Drei Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts und links und die dritte den Rahmentyp für unten.
Vier Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts, die dritte den Rahmentyp für unten und die vierte den Rahmentyp für links.

Die zweite Möglichkeit besteht darin, die Untereigenschaften von border-style zu verwenden:
border-top-style definiert den Rahmentyp für oben,
border-right-style den Rahmentyp für rechts,
border-bottom-style den Rahmentyp für unten und
border-left-style den Rahmentyp für links.
Die Untereigenschaften von border-style stehen im Gegensatz zu den Untereigenschaften von border-width jedoch erst seit CSS2 zur Verfügung und werden von älteren Browsern ignoriert.

Beachten Sie:

Die Angabe hidden ist vor allem für benachbarte Tabellenzellen gedacht. Während die Angabe none nur den Rahmen des Elements unterdrückt, für das sie gilt, bewirkt hidden, dass auch Rahmen von Nachbarelementen unterdrückt werden, sofern diese Rahmen besitzen. Voraussetzung dafür ist allerdings, dass für das zugehörige table-Element die folgende CSS-Sondereigenschaft notiert ist:
border-collapse:collapse
Dies ist eine neuere CSS-Eigenschaft, die Rahmenregeln für Tabellen erlaubt. Beim Wert collapse fallen alle Rahmen der Zellen sauber übereinander, sprich, eine Zelle mit rechtem Rand von 1px und eine Zelle rechts davon mit einem linken Rand von 1px bilden einen gemeinsamen Rahmen von 1px. Der gegenteilige mögliche Wert, der allerdings auch der Voreinstellung entspricht, lautet separate. Damit "stoßen" die Rahmen benachbarter Zellen nur aneinander, überlappen sich aber nicht. Im Beispiel der zwei erwähnten Zellen würde also optisch ein Zwischenrahmen von 2px Dicke entstehen.

Netscape 4.x interpretiert border-style nicht vollständig und auch nur, wenn außerdem die eine Angabe zur Rahmendicke notiert wird, also etwa:
<p style="border-style:solid; border-width:thin">.

Einige der Effekte (z.B. groove) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von schwarz unterscheidet.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 border[-top, -right, -bottom, -left] (Rahmen)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
nach oben border-width
nach oben border-style
nach oben border-color

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>border</title>
<style type="text/css">
h1 { border-bottom:4px double blue; padding-bottom:4px; margin:0px; }
h2 { border-top:1px solid blue; margin:0px; }
p { line-height:150%; }
p.info { border:1px solid gray; background-color:#E0E0E0; padding:4px; margin:0px; }
span.rahmen { border:2px solid red; }
body { font-family:Tahoma,Helvetica,sans-serif; }
</style>
</head><body>

<h1>&Uuml;berschrift erster Ordnung</h1>

<p>xxxxx xxxxx usw... <span class="rahmen">xxxxx xxxxx xxxxx usw...</span> xxxxx
xxxxx</p>

<h2>&Uuml;berschrift zweiter Ordnung</h2>

<p>xxxxx xxxxx xxxxx usw.</p>

<p class="info">xxxxx xxxxx xxxxx usw.</p>

</body></html>

Erläuterung:

Mit border: können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie in den Beispielen oben. Die Reihenfolge der Einzelangaben ist egal.

Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen. Dazu sind die Untereigenschaften von border gedacht:
border-top definiert eine zusammenhängende Angabe für oben,
border-right für rechts,
border-bottom für unten und
border-left für links.

CSS 2.0 Opera 7.0 Mozilla Firefox 1 Konqueror 3.4 Safari 1.2 outline-width (Rahmendicke)

Die Angabe der outline-width ist identisch zur border-width. Erlaubt ist eine Seite numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:

thin = dünn.
medium = mittelstark.
thick = dick.

Kombinieren Sie outline-width stets mit einer Angabe für outline-style, um eine sichtbare Rahmenlinie zu definieren.

CSS 2.0 Opera 7.0 Mozilla Firefox 1 Konqueror 3.4 Safari 1.2 outline-color (Rahmenfarbe)

Die Angabe von outline-color ist nahezu identisch zu border-color. Erlaubt ist eine Seite Farbangabe oder der Wert invert (invertierte Farbe, die durch Umkehrung aller Bits einer hexadezimalen Farbangabe entsteht).

Beachten Sie:

Die Farbangabe invert wird von vielen Browsern nicht unterstützt.

CSS 2.0 Opera 7.0 Mozilla Firefox 1 Konqueror 3.4 Safari 1.2 outline-style (Rahmentyp)

Die Angabe outline-style ist identisch zu border-style. Erlaubt ist eine der folgenden Angaben.

none = kein Rahmen (bzw. unsichtbarer Rahmen).
hidden = kein Rahmen (bzw. unsichtbarer Rahmen), siehe nach unten Hinweis.
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.

CSS 2.0 Opera 7.0 Mozilla Firefox 1 Konqueror 3.4 Safari 1.2 outline (Rahmen allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
nach oben outline-width
nach oben outline-style
nach oben outline-color

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>outline</title>
<style type="text/css">
h1 { outline:4px double blue; padding-bottom:4px; margin:0px; }
h2 { outline:1px solid blue; margin:0px; }
p { line-height:150%; }
p.info { outline:4px solid invert; background-color:yellow; padding:4px; margin:0px; }
span.rahmen { outline:2px solid red; }
body { font-family:Tahoma,Helvetica,sans-serif; }
</style>
</head><body>

<h1>&Uuml;berschrift erster Ordnung</h1>

<p>xxxxx xxxxx usw... <span class="rahmen">xxxxx xxxxx xxxxx usw...</span> xxxxx
xxxxx</p>

<h2>&Uuml;berschrift zweiter Ordnung</h2>

<p>xxxxx xxxxx xxxxx usw.</p>

<p class="info">xxxxx xxxxx xxxxx usw.</p>

</body></html>

Erläuterung:

Das Beispiel ist nahezu eine identische Kopie von border.

Mit outline können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie in den Beispielen oben. Die Reihenfolge der Einzelangaben ist egal.

Beachten Sie das unterschiedliche Verhalten des Rahmens beim <span>, wenn der darin enthaltene Text sich auf mehrere Zeilen verteilt. outline sorgt dafür, dass jeder einzelne Textabschnitt vollständig von einem Rahmen umschlossen ist, auch wenn die einzelnen Stücke nicht zusammenhängend platziert werden können. Bei border hingegen wird eventuell eine Seite eines Teilstückes offengelassen.

nach oben
weiter | Seite Hintergrundfarben und -bilder
zurück | Seite Innenabstand
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

SELFHTML

Hintergrundfarben und -bilder
Informationsseite

nach unten Allgemeines zu Hintergrundfarben und -bildern
nach unten background-color (Hintergrundfarbe)
nach unten background-image (Hintergrundbild)
nach unten background-repeat (Wiederholungs-Effekt)
nach unten background-attachment (Wasserzeichen-Effekt)
nach unten background-position (Hintergrundposition)
nach unten background (Hintergrund allgemein)

nach unten

Allgemeines zu Hintergrundfarben und -bildern

Sinnvoll sind die hier beschriebenen CSS-Eigenschaften vor allem für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address oder pre. Block-Elemente sind aber auch div, table, tr, th und td. Auch auf <body> lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall beziehen sich die Angaben auf den gesamten sichtbaren Körper der HTML-Datei. Es ist aber ebenso möglich, einzelne Textpassagen, die durch ein Inline-Element wie span, b, strong usw. markiert sind, mit einem eigenen Hintergrund zu belegen.

Elementspezifische Hintergrundangaben heben sich von eventuellen HTML-Angaben zur Seite Hintergrundfarbe der HTML-Datei oder zu einer Seite dateiweiten Hintergrundgrafik ab. Sehr schöne Effekte können Sie erzielen, indem Sie Angaben zu Hintergrundfarben bzw. Hintergrundbildern einzelner Elemente mit Angaben zu Seite Rahmen und Seite Innenabstand kombinieren.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 background-color (Hintergrundfarbe)

Sie können für ein HTML-Element eine eigene Hintergrundfarbe definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-color</title>
<style type="text/css">
body { background-color:#E0E0E0; font-weight:bold; font-family:Arial; font-size:120%; }
.rosabox { background-color:#FFDDDD; padding:6px; margin:0px; }
.rosa { background-color:#FFDDDD; }
.gelbbox { background-color:#FFFF66; padding:6px; margin:0px; }
.gelb { background-color:#FFFF66; }
</style>
</head><body>

<h1>Hintergr&uuml;ndig!</h1>
<p class="rosabox">Hinter dem Internet ist das <span class="gelb">Hinternet</span>.</p>
<p>Dies hat nichts zu sagen.</p>
<p class="gelbbox">Im Kinderzimmer herrscht das <span class="rosa">Kindernet</span>.</p>

</body></html>

Erläuterung:

Mit background-color: können Sie eine Hintergrundfarbe bestimmen. Erlaubt ist eine Seite Farbangabe oder der Default-Wert transparent.

Beachten Sie:

Netscape 4.x bildet bei mehrzeiligen Textabsätzen keinen echten Farbblock, sondern dehnt die Hintergrundfarbe am Zeilenende nur bis zum zufälligen Ende des Textes. Um dies zu verhindern, können Sie zusätzlich die Angaben border:none; und margin:0px; notieren (in den meisten Fällen kommen Sie auch ohne das margin:0px; aus).

Wenn Ihnen der Abstand zwischen Textgrenzen und dem Farbblock, der durch die Hintergrundfarbe entsteht, zu klein ist, können Sie wie im obigen Beispiel mit Seite padding einen Innenabstand definieren.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 background-image (Hintergrundbild)

Sie können für einzelne HTML-Elemente ein eigenes Hintergrundbild definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-image</title>
</head><body style="background-image:url(background1.gif)">

<div style="background-image:url(background2.gif); margin:0px; padding:10px">
<h1 style="text-align:center;color:#FFFFCC">Willkommen im Reich der Texturen!</h1>

<div style="background-image:url(background3.jpg); margin:30px; padding:10px">
<h2 style="text-align:center;color:#804000">Willkommen im Reich der Texturen!</h2>

</div></div>

</body></html>

Erläuterung:

Mit background-image:url([URI]) können Sie eine Hintergrundgrafik bestimmen. Per Voreinstellung wird die Hintergrundgrafik als Wallpaper (Tapetenmuster) wiederholt, so wie bei der Angabe eines Hintergrundbildes im einleitenden HTML-Tag <body>. Text und referenzierte Grafiken erscheinen über dieser Hintergrundgrafik. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- oder JPG-Grafiken benutzen.

Im Beispiel wird vorausgesetzt, dass sich die Grafikdateien im gleichen Verzeichnis befinden wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Seite Einbinden von Grafiken in HTML. Wenn Sie background-image in einer Seite separaten CSS-Datei notieren, beziehen sich relative Pfadangaben auf das Verzeichnis, in dem diese Stylesheet-Datei liegt.

Beachten Sie:

Wenn das Element, für das die Hintergrundgrafik definiert wird, in der Höhe oder Breite kleiner ist als die Hintergrundgrafik, wird die Hintergrundgrafik in der Darstellung an den Grenzen des Elements abgeschnitten.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 background-repeat (Wiederholungs-Effekt)

Normalerweise wird eine Hintergrundgrafik im Wallpaper-Effekt über den gesamten zur Verfügung stehenden Raum wiederholt. Sie können jedoch ein anderes Verhalten erzwingen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-repeat</title>
</head><body>

<div style="background-image:url(background4.jpg); background-repeat:repeat-x;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der erste Bereich.<br>Ein Text, der sehr leicht<br>umbricht...usw.</p>
</div>
<div style="background-image:url(background4.jpg); background-repeat:repeat-y;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der zweite Bereich.<br>Ein Text, der auch leicht umbricht....usw.</p>
</div>
<div style="background-image:url(background4.jpg); background-repeat:no-repeat;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der dritte Bereich.<br>Ein Text, der auch leicht umbricht...usw.</p>
</div>

</body></html>

Erläuterung:

Mit background-repeat: können Sie das Wiederholungsverhalten einer Hintergrundgrafik, die Sie mit background-image einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben.

repeat = wiederholen (Voreinstellung).
repeat-x = nur "eine Zeile lang" waagerecht wiederholen.
repeat-y = nur "eine Spalte lang" senkrecht wiederholen.
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.

Beachten Sie:

Netscape 4.x interpretiert diese Eigenschaft zwar, hat aber massive Schwierigkeiten bei der Darstellung von Elementinhalten.

CSS 1.0 Netscape 6.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 background-attachment (Wasserzeichen-Effekt)

Bei längeren Elementen wandert ein Hintergrundbild beim Scrollen im Text optisch mit. Sie können jedoch erzwingen, dass der Hintergrund stehen bleibt (Wasserzeichen-Effekt).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-attachment</title>
<style type="text/css">
div.bgscroll {
  margin:20px 20px 20px 250px; width:35em; border:1px solid red;
  background-image:url(background1.gif); background-repeat:no-repeat; background-position:center center;
  background-attachment:scroll;
}

div.bgfixed {
  margin:20px 20px 20px 250px; border:1px solid red;
  background-image:url(background5.gif); background-repeat:no-repeat; background-position:center center;
  background-attachment:fixed;
}
</style>
</head><body>

<div class="bgscroll">
  <h1>viel Text <!--usw.--> <code>background-attachment:scroll</code></h1>
</div>

<div class="bgfixed">
  <h1>viel Text <!--usw.--> <code>background-attachment:fixed</code></h1>
</div>

</body></html>

Erläuterung:

Mit background-attachment: können Sie das Scroll-Verhalten einer Hintergrundgrafik, die Sie mit background-image einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben.

scroll = mitscrollen (Voreinstellung), orientiert sich an der Position des jeweiligen Elements
fixed = Hintergrundbild bleibt stehen, orientiert sich am Viewport

Das obige Beispiel demonstriert einen interessanten Anwendungsfall aus der Kombination der Eigenschaften background-attachment und background-position. Beiden div-Elementen werden mittels background-position:center center mittig positionierte Hintergrundgrafiken zugewiesen. Im ersten Fall wird das Bild aufgrund von background-attachment:scroll in der Mitte des Elements selbst dargestellt. Im zweiten Fall jedoch orientiert sich dessen Position aufgrund der Verwendung von background-attachment:fixed am Viewport und wird damit in der Mitte des Browserfensters dargestellt.

Beachten Sie:

Der Internet Explorer bis Version 6 interpretiert diese Eigenschaft nur bezogen auf scrollbare Elemente (dem body-Element oder anderen mit der CSS-Eigenschaft overflow:scroll bzw. overflow:auto).

CSS 1.0 Netscape 6.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 background-position (Hintergrundposition)

Diese Angabe ist vor allem dann interessant, wenn Sie mit einer entsprechenden Angabe zu background-repeat erzwingen, dass eine Hintergrundgrafik nur einmal angezeigt wird. Für diesen Fall können Sie mit der Hintergrundposition festlegen, wo genau die Hintergrundgrafik innerhalb des HTML-Elements platziert werden soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-position</title>
<style type="text/css">
#Tanz {
 background-image:url(background6.gif); background-repeat:no-repeat;
 background-position:30px 20px;
 background-color:white; height:400px;
}
</style>
</head><body>

<div id="Tanz">
<h1>Tanz der Bilder!</h1>
<img src="background_foreground.gif" width="321" height="262"
     alt="Ein transparentes Bild über dem Hintergrundbild">
</div>

</body></html>

Erläuterung:

Mit background-position: können Sie festlegen, wo die linke obere Ecke der Hintergrundgrafik sein soll. Der erste Wert steht für die horizontale, der zweite für die vertikale Position. Bezugspunkt ist das HTML-Element, für das die Hintergrundgrafik definiert wird. Etwaige Seite Innenabstände werden berücksichtigt. Erlaubt sind Seite numerische Angaben und folgende Angaben:

top = vertikal obenbündig.
bottom = vertikal untenbündig.
center = zentriert (horizontal oder vertikal, center center kann als center zusammengefasst werden).
left = horizontal linksbündig.
right = horizontal rechtsbündig.

Im obigen Beispiel enthält das div-Element eine GIF-Grafik mit transparentem Hintergrund. Diese wird im Beispiel über der Hintergrundgrafik angezeigt. Es sieht aus wie eine einzelne Grafik, sind aber zwei verschiedene.

Beachten Sie:

Prozentangaben beziehen sich anders als beispielsweise Pixelwerte nicht auf die linke obere Ecke des Hintergrundbildes. Bei einer Angabe von 40% 60% wird die Stelle der Grafik, die 40 % von deren linkem und 60 % von deren oberem Rand entfernt ist als Bezugspunkt herangezogen. Deklariert man demnach 50% 50%, wird der Punkt, der sich genau in der Mitte der Grafik befindet (also 50 % vom linken und oberen Rand entfernt ist) mittig platziert.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 background (Hintergrund allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
nach oben background-color (Hintergrundfarbe)
nach oben background-image (Hintergrundbild)
nach oben background-repeat (Wiederholungs-Effekt)
nach oben background-attachment (Wasserzeichen-Effekt)
nach oben background-position (Hintergrundposition)

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background</title>
</head><body>

<div style="background:url(background1.gif) repeat-x;">
<h1 style="font-family:Arial,sans-serif; color:maroon; font-size:80px">NEWS</h1>
<div style="margin-top:45px; font-size:1.2em">
<p>Hier folgen die News...</p>
</div></div>

</body></html>

Erläuterung:

Mit background: können Sie Angaben für den Hintergrund zusammenfassen. Notieren Sie Angaben zur Hintergrundfarbe, zum Hintergrundbild, zu Wiederholungs- und Wasserzeichen-Effekt sowie zur Position mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.

Beachten Sie:

Netscape 4.x interpretiert diese Angabe zwar, aber was er aus dem obigen Beispiel macht, spottet leider jeder Beschreibung.

nach oben
weiter | Seite Listenformatierung
zurück | Seite Rahmen
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Listenformatierung

SELFHTML

Listenformatierung
Informationsseite

nach unten Allgemeines zur Listenformatierung
nach unten list-style-type (Darstellungstyp)
nach unten list-style-position (Listeneinrückung)
nach unten list-style-image (eigene Bullet-Grafik)
nach unten list-style (Listendarstellung allgemein)
nach unten

Allgemeines zur Listenformatierung

Die Stylesheet-Angaben für Listen beziehen sich speziell auf die HTML-Elemente ul ( Seite Aufzählungslisten) und ol ( Seite nummerierte Listen).

Sie können mit Hilfe von Stylesheet-Angaben die gleichen Formatierungen erzwingen, wie es in den einleitenden HTML-Tags <ul> und <ol> mit Hilfe von zusätzlichen Attributen möglich ist. Die entsprechenden Attribute sind in HTML 4.0 jedoch alle als "deprecated" ausgewiesen, also als künftig unerwünscht. Stattdessen sollen die hier beschriebenen CSS-Eigenschaften verwendet werden, um solche Listen zu formatieren. Neben den Möglichkeiten, die HTML bietet, stehen auch erweiterte Möglichkeiten zum Formatieren von Listen zur Verfügung, etwa die Möglichkeit, Listen aus- statt einzurücken oder eine eigene Grafik als Aufzählungssymbol zu definieren.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 list-style-type (Darstellungstyp)

Für Aufzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für nummerierte Liste können Sie die Darstellung der Durchnummerierung beeinflussen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>list-style-type</title>
</head><body>

<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>disc</i></h4>
<ul style="list-style-type:disc">
<li>Probieren geht &uuml;ber Studieren</li>
<!--usw.-->
</ul>
<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>circle</i></h4>
<ul style="list-style-type:circle">
<li>Probieren geht &uuml;ber Studieren</li>
<!--usw.-->
</ul>
<!--usw.-->

<h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>decimal</i></h4>
<ol style="list-style-type:decimal">
<li>Tagesordnung</li>
<!--usw.-->
</ol>
<h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>lower-roman</i></h4>
<ol style="list-style-type:lower-roman">
<li>Tagesordnung</li>
<!--usw.-->
</ol>

<!--usw.-->
</body></html>

Erläuterung:

Mit list-style-type: können Sie das Aussehen von Listenzeichen kontrollieren. Erlaubt ist eine der folgenden Angaben.

decimal = für ol-Listen: Nummerierung 1.,2.,3.,4. usw.
lower-roman = für ol-Listen: Nummerierung i.,ii.,iii.,iv. usw.
upper-roman = für ol-Listen: Nummerierung I.,II.,III.,IV. usw.
lower-alpha oder lower-latin = für ol-Listen: Nummerierung a.,b.,c.,d. usw.
upper-alpha oder upper-latin = für ol-Listen: Nummerierung A.,B.,C.,D. usw.
disc = für ul-Listen: gefüllter Kreis als Bullet-Zeichen
circle = für ul-Listen: leerer Kreis als Bullet-Zeichen
square = für ul-Listen: rechteckiges Bullet-Zeichen
none = kein Bullet-Zeichen, keine Nummerierung

CSS 2.0 Netscape 6.0 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Die folgenden, neueren CSS-Angaben sind ebenfalls möglich, werden bislang jedoch nur von Netscape ab Version 6.0, Firefox und teilweise von Opera, Konqueror und Safari interpretiert:

lower-greek = für ol-Listen: Nummerierung mit den griechischen Buchstaben: α., β., γ., δ. usw.
hebrew = für ol-Listen: Nummerierung mit den hebräischen Buchstaben
decimal-leading-zero = für ol-Listen: Nummerierung mit führender 0: 01.,02.,03.,04., ... 98.,99. usw.
cjk-ideographic = für ol-Listen: Nummerierung mit ideographischen Zeichen
hiragana = für ol-Listen: Nummerierung in Japanisch (a, i, u, e, o, ka, ki, ... )
katakana = für ol-Listen: Nummerierung in Japanisch (A, I, U, E, O, KA, KI, ... )
hiragana-iroha = für ol-Listen: Nummerierung in Japanisch (i, ro, ha, ni, ho, he, to, ... )
katakana-iroha = für ol-Listen: Nummerierung in Japanisch (I, RO, HA, NI, HO, HE, TO, ... )

CSS 1.0 Netscape 6.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 list-style-position (Listeneinrückung)

Sie können bestimmen, wie sich Bullet-Zeichen oder Nummerierung mit dem Inhalt eines Listenpunktes in Bezug auf Einrückung verhalten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>list-style-position</title>
</head><body>

<h4>Nummerierte Liste &lt;ol&gt; mit Listeneinr&uuml;ckung <i>inside</i></h4>
<ol style="list-style-position:inside">
<li>Tagesordnung<br>
zweizeilig</li>
<!--usw.-->
</ol>

<h4>Nummerierte Liste &lt;ol&gt; mit Listeneinr&uuml;ckung <i>outside</i></h4>
<ol style="list-style-position:outside">
<li>Tagesordnung<br>
zweizeilig</li>
<!--usw.-->
</ol>

</body></html>

Erläuterung:

Mit list-style-position: können Sie das Einrückungsverhalten kontrollieren. Erlaubt ist eine der folgenden Angaben.

inside = eingerückt.
outside = ausgerückt (Voreinstellung).

CSS 1.0 Netscape 6.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 list-style-image (eigene Bullet-Grafik)

Sie können eine eigene geeignete Grafik als Bullet-Zeichen für Aufzählungslisten bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>list-style-image</title>
</head><body>

<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit eigener Bullet-Grafik</h4>
<ul style="list-style-image:url(list_style_image.gif)">
<li>&#160;<a href="../../../html/index.htm"><b>HTML/XHTML</b></a><br>
Die Sprache des Web</li>
<!--usw.-->
</ul>

</body></html>

Erläuterung:

Mit list-style-image:url([Dateiname]) können Sie eine Grafik für das eigene Bullet-Zeichen angeben. Anstatt einer Grafikreferenz ist auch der Wert none erlaubt. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF-, PNG- oder JPG-Grafiken benutzen.

Im Beispiel wird vorausgesetzt, dass sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Seite Einbinden von Grafiken in HTML.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 list-style (Listendarstellung allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
nach oben list-style-type (Darstellungstyp)
nach oben list-style-position (Listeneinrückung)
nach oben list-style-image (Eigene Bullet-Grafik)

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>list-style</title>
</head><body>

<h4>Nummerierte Liste &lt;ol&gt; mit den Angaben <i>lower-roman inside</i></h4>
<ol style="list-style:lower-roman inside">
<li>bei Anette vorbeischauen<br>
und Gr&uuml;&szlig;e an Gundula ausrichten</li>
<!--usw.-->
</ol>

</body></html>

Erläuterung:

Mit list-style: können Sie zusammenfassende Angaben zum Aussehen von Aufzählungslisten oder nummerierten Listen machen. Notieren Sie Angaben zum Darstellungstyp, zur Listeneinrückung sowie zur Bullet-Grafik mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.

Beachten Sie:

Netscape 4.x interpretiert nur einen Teil dieser Angaben.

nach oben
weiter | Seite Tabellenformatierung
zurück | Seite Hintergrundfarben und -bilder
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Tabellenformatierung

SELFHTML

Tabellenformatierung
Informationsseite

nach unten Allgemeines zur Tabellenformatierung
nach unten caption-side (Ausrichtung der Tabellenüberschrift)
nach unten table-layout (fixe/variable Breiten)
nach unten border-collapse (Rahmenmodell)
nach unten border-spacing (Rahmenabstand im Gitternetz)
nach unten empty-cells (Anzeige/Nichtanzeige leerer Zellen)
nach unten speak-header (Art der Sprachausgabeunterstützung)
nach unten

Allgemeines zur Tabellenformatierung

Tabellen werden erst seit CSS2 gesondert behandelt und haben eigene CSS-Eigenschaften. Dennoch gibt es auch eine Menge Eigenschaften von CSS1, die sich auf Tabellen, Spalten und Zeilen anwenden lassen. Auf die HTML-Elemente table, tr, colgroup, col, thead, tbody, tfoot, th und td lassen sich Formatierungen anwenden wie:

Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder

Vor allem aber bei Rahmen genügen die dafür üblichen CSS-Eigenschaften alleine nicht, um den Anforderungen an das Gitternetz einer Tabelle gerecht zu werden. Deshalb bietet CSS2 die Möglichkeit an, zwei verschiedene Rahmenmodelle zu unterscheiden. Dadurch kann dem Browser mitgeteilt werden, wie er die Außenrahmen zweier angrenzender Tabellenzellen behandeln soll.

Für Angaben zur Breite und Höhe von Tabellenspalten oder -zeilen sind die CSS-Eigenschaften Seite width und Seite height zwar geeignet, doch ist es wirklich manchmal wünschenswert, dass vorgegebene Breiten und Höhenangaben in jedem Fall und auch mal mit Priorität vor dem Inhalt der Zellen behandelt werden. Diese Option ist nun mit CSS2 für Tabellen einstellbar.

Andere tabellenspezifische Eigenschaften regeln Angaben, die auch in HTML in Form von Attributen möglich sind. Die entsprechenden Attribute sind in HTML 4.0 jedoch als "deprecated" gekennzeichnet, also als künftig unerwünscht. Stattdessen sollen die hier beschriebenen CSS-Eigenschaften verwendet werden.

Weiterhin wichtig im Zusammenhang mit Tabellen ist seit CSS2 die an anderer Stelle beschriebene CSS-Eigenschaft Seite display. Damit ist es möglich, Tabelleneigenschaften auf andere Elemente als Tabellenelemente anzuwenden. Das mag sich zwar für HTML komisch anhören, aber CSS ist ja auch eine mögliche Style-Sprache zur Darstellung von XML-Daten. Und da es in XML keine Möglichkeit gibt, ein Element mit semantischen Eigenschaften wie "Tabellenzelle" oder "Tabellenzeile" auszuzeichnen, muss das die Style-Sprache übernehmen, die solche Daten anzeigt.

CSS 2.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 caption-side (Ausrichtung der Tabellenüberschrift)

Sie können für Tabellen in HTML mit dem caption-Element eine Tabellenüberschrift bestimmen. Mit der hier beschriebenen Stylesheet-Angabe können Sie die Position dieser Überschrift festlegen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>caption-side</title>
</head><body>

<table border="1">
<caption style="caption-side:bottom">Assoziationen</caption>
<tr>
<th>Berlin</th><th>Hamburg</th><th>M&uuml;nchen</th>
</tr><tr>
<td>Milj&ouml;h</td><td>Kiez</td><td>Bierdampf</td>
</tr><tr>
<td>Buletten</td><td>Frikadellen</td><td>Fleischpflanzerl</td>
</tr></table>

</body></html>

Erläuterung:

Mit caption-side: können Sie die Position der Tabellenüberschrift bestimmen. Folgende Angaben sind erlaubt:

top = oberhalb der Tabelle.
bottom = unterhalb der Tabelle.

In CSS2 waren noch die folgenden Werte vorgesehen, die jedoch wegen mangelnder Browserunterstützung in CSS 2.1 nicht übernommen werden: left = links neben der Tabelle.
right = rechts neben der Tabelle.

Beachten Sie:

Diese Eigenschaft wird auch vom Internet Explorer 7 noch nicht interpretiert.

CSS 2.0 Netscape 6.0 MS IE 5.5 Opera 7.10 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 table-layout (fixe/variable Breiten)

Mit dieser Eigenschaft können Sie entscheiden, wie der Browser Breitenangaben zur Tabelle und zu Tabellenspalten behandeln soll, die Sie mit der CSS-Eigenschaft Seite width angeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>table-layout</title>
<style type="text/css">
table { width:100%; }
td { border:1px solid #000; vertical-align:top; overflow:hidden; }
</style>
</head><body>

<h1>table-layout</h1>

<h2>table-layout:auto ohne Breitenangabe</h2>

<table>
 <tr>
  <td>ohne Breitenangabe</td>
  <td>ohne Breitenangabe</td>
  <td>ohne Breitenangabe - Spalten mit höherem Platzbedarf wird [...] </td>
 </tr>
</table>

<h2>table-layout:fixed ohne Breitenangabe</h2>

<table style="table-layout:fixed">
 <tr>
  <td>ohne Breitenangabe</td>
  <td>ohne Breitenangabe</td>
  <td>ohne Breitenangabe - Der verfügbare Platz wird unabhängig [...] </td>
 </tr>
</table>

<h2>table-layout:fixed mit teilweiser Breitenangabe</h2>

<table style="table-layout:fixed">
 <tr>
  <td style="width:25%">width:25%</td>
  <td style="width:120px">width:120px Donaudampfschifffahrtsgesellschaft</td>
  <td>ohne Breitenangabe - Noch verfügbarer Platz wird auf alle Spalten ohne [...] </td>
 </tr>
</table>

<h2>table-layout:fixed mit Breitenangabe in allen Spalten</h2>

<table style="table-layout:fixed">
 <tr>
  <td style="width:25%">width:25%</td>
  <td style="width:25%">width:25%</td>
  <td style="width:25%">width:25% - Ist die Breite der gesamten Tabelle [...] </td>
 </tr>
</table>

</body></html>

Erläuterung:

Mit table-layout: beeinflussen Sie die Tabellenanzeige bei Breitenangaben. Folgende Angaben sind erlaubt:

auto = Zelleninhalt hat Vorrang vor Breitenangaben (Voreinstellung).
fixed = Breitenangaben haben Vorrang vor dem Zelleninhalt.

Der Einsatz des Wertes fixed hat zur Folge, dass sich die Zellenbreite nicht wie herkömmlich an deren Inhalt orientiert, sondern an der mittels width explizit vorgegebenen Breite der Spalten der ersten Zeile. Wurde für eine oder mehrere Spalten keine Breite definiert, wird noch verfügbarer Platz auf diese aufgeteilt. Wurden alle Spalten mit einer Breite versehen und ist für die Tabelle insgesamt eine größere Breite definiert, als sich aus der Addition aller Spaltenbreiten ergibt, wird zusätzlich vorhandener Platz unter Berücksichtigung von Rahmenbreiten und Zellabständen zu gleichen Teilen auf alle Spalten aufgeteilt. Wie ein für eine Zelle zu breiter Inhalt dargestellt wird, ergibt sich aus dem Wert der Eigenschaft Seite overflow.

Beachten Sie:

table-layout:fixed wird vom Internet Explorer 5.0 nur mit Breitenangaben für alle Spalten korrekt interpretiert. Ferner gilt für 5.0 und alle späteren Versionen, dass table-layout:fixed irrtümlich auch ohne der explizit notwendigen Angabe von width berücksichtigt wird. Safari hat Schwierigkeiten mit gemischten Breitenangaben.

CSS 2.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 border-collapse (Rahmenmodell)

Mit dieser Eigenschaft können Sie festlegen, ob Einzelrahmen von Tabellenzellen zusammenfallen sollen oder nicht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>border-collapse</title>
</head><body>

<table border="0"><tr>
<th colspan="3">Normaleinstellung</th>
</tr><tr>
<td style="border:medium solid blue">Haus</td>
<td style="border:medium dashed blue">Auto</td>
<td style="border:medium dotted blue">Boot</td>
</tr></table>
<table border="0" style="border-collapse:collapse"><tr>
<th colspan="3">Spezialeinstellung (collapse)</th>
</tr><tr>
<td style="border:medium solid blue">Haus</td>
<td style="border:medium dashed blue">Auto</td>
<td style="border:medium dotted blue">Boot</td>
</tr></table>

</body></html>

Erläuterung:

Mit border-collapse: beeinflussen Sie die Art, wie Einzelrahmen benachbarter Tabellenzellen reagieren. Folgende Angaben sind erlaubt:

separate = Zellenrahmen fallen nicht zusammen (Ausgangswert seit CSS 2.1).
collapse = Zellenrahmen fallen zusammen (Ausgangswert in CSS2).

Bei der Angabe collapse kommt es zu Konflikten zwischen Rahmenformatierungen einzelner Zellen. Rahmen, die dabei in jedem Fall Vorrang haben sollen und den gemeinsamen Grenzrahmen der Nachbarzelle überlagern sollen, müssen zu diesem Zweck die CSS-Angabe border-style:hidden erhalten. Rahmen, die in jedem Fall nachrangig sein sollen und von dem Grenzrahmen der Nachbarzelle überlagert werden sollen, müssen die CSS-Angabe border-style:none erhalten. Wenn keine der Zellen die Angabe border-style:hidden enthält, aber eine davon die Angabe border-style:none, entscheidet die Breitenangabe (border-width) zum Rahmen, welche Formatierung beim gemeinsamen Grenzrahmen Vorrang hat. Breitere Rahmen haben dann den Vorrang. Falls auch die Breitenangabe keine Konfliktlösung bringt, da die Breitenangaben gleich sind, dann entscheidet die folgende Reihenfolge von Rahmentypen (border-style:): double, solid, dashed, dotted, ridge, outset, groove, inset.

Das folgende Schaubild verdeutlicht den Zusammenhang:

Beachten Sie:

Netscape 6 interpretiert diese Angabe noch nicht.

CSS 2.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 border-spacing (Rahmenabstand im Gitternetz)

Mit dieser Eigenschaft bestimmen Sie den Abstand zwischen Rahmen im sichtbaren Gitternetz einer Tabelle.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>border-spacing</title>
<style type="text/css">
td { border:thin solid blue; }
</style>
</head><body>

<table style="border:thin solid red; border-spacing:10px">
<tr>
<td>Haus</td>
<td>Auto</td>
<td>Boot</td>
</tr></table>

</body></html>

Erläuterung:

Mit border-spacing: können Sie für ein table-Element den Abstand der Zellenrahmen voneinander bestimmen. Erlaubt ist eine Seite numerische Angabe.

Beachten Sie:

Diese Eigenschaft wird auch vom Internet Explorer 7 noch nicht interpretiert.

CSS 2.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 empty-cells (Anzeige/Nichtanzeige leerer Zellen)

Mit dieser Eigenschaft können Sie festlegen, ob Tabellenzellen ohne Inhalt bei sichtbarem Gitternetz einen Rahmen erhalten sollen oder nicht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>empty-cells</title>
<style type="text/css">
td { border:1px solid black; }
</style>
</head><body>

<h2>Tabelle 1</h2>
<table style="border:1px solid black; empty-cells:show"><tr>
<td>Inhalt</td><td>Inhalt</td><td></td>
</tr></table>

<h2>Tabelle 2</h2>
<table style="border:1px solid black; empty-cells:hide"><tr>
<td>Inhalt</td><td>Inhalt</td><td></td>
</tr></table>

</body></html>

Erläuterung:

Mit empty-cells: bestimmen Sie, ob Rahmen leerer Tabellenzellen angezeigt werden oder nicht. Folgende Angaben sind erlaubt:

show = Zellenrahmen leerer Tabellenzellen werden angezeigt.
hide = Zellenrahmen leerer Tabellenzellen werden unterdrückt (Voreinstellung).

Beachten Sie:

Diese Eigenschaft wird auch vom Internet Explorer 7 noch nicht interpretiert.

CSS 2.0 speak-header (Art der Sprachausgabeunterstützung)

Wenn eine HTML-Tabelle nicht am Bildschirm angezeigt oder ausgedruckt wird, sondern von einem Sprecher oder Sprachausgabesystem vorgelesen wird (z.B. für Sehbehinderte), entsteht das Problem, dass ein zweidimensionaler Raum eindimensional in der Zeit gelesen werden soll. Mit der hier beschriebenen Angabe können Sie für diesen Fall entscheiden, ob der Inhalt von Kopfzellen bei jeder ihr untergeordneten Datenzelle erneut wiedergegeben werden soll, oder ob der Kopfzelleninhalt nur einmal wiedergegeben werden soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>speak-header</title>
</head><body>

<table border="1">
 <tr>
  <th style="speak-header:always">Kopfzelle 1</th>
  <th style="speak-header:once">Kopfzelle 2</th>
 </tr>
 <tr>
  <td>Datenzelle 1</td>
  <td>Datenzelle 2</td>
 </tr>
 <tr>
  <td>Datenzelle 3</td>
  <td>Datenzelle 4</td>
 </tr>
</table>

</body></html>

Erläuterung:

Mit speak-header: können Sie das Wiedergabeverhalten für Kopfzelleninhalte bestimmen. Das obige Beispiel bewirkt, dass die Kopfzelle 1 vor den Datenzellen 1 und 3 jeweils wiederholt wird, während die Kopfzelle 2 nur einmal ausgegeben wird. Folgende Angaben sind erlaubt:

always = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen.
once = Kopfzelleninhalt nur einmal wiedergeben (Normaleinstellung).

nach oben
weiter | Seite Pseudoelemente und Pseudoklassen
zurück | Seite Listenformatierung
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen

SELFHTML

Pseudoelemente und Pseudoklassen
Informationsseite

nach unten Allgemeines zu Pseudoelementen und Pseudoklassen
nach unten :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente)
nach unten :first-child, :first-line, :first-letter (Pseudoklasse und Pseudoelemente für Absätze)
nach unten :lang (Pseudoklasse für Sprachauszeichnung)
nach unten :before, :after (Pseudoelemente für automatisch generierten Inhalt)
nach unten Automatische Anführungszeichen
nach unten Automatische Nummerierung
nach unten

Allgemeines zu Pseudoelementen und Pseudoklassen

Was Pseudoelemente und Pseudoklassen sind, wird im Abschnitt Seite Pseudoelemente und Pseudoklassen definieren beschrieben.

CSS 1.0 Netscape 4.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente)

Sie können das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits besuchten Seiten und zu Elementen, die per Tastatur selektiert, gerade mit der Maus überfahren oder angeklickt werden, bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>:link, :visited, :focus, :hover, :active</title>
<style type="text/css">
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

h1:focus { background-color:red; }
h1:hover { background-color:silver; }
h1:active { background-color:green; }
</style>
</head><body>

<h1>Bekannte Suchdienste</h1>
<p>
<a href="http://de.yahoo.com/">Yahoo! (Verzeichnis)</a><br>
<a href="http://www.google.de/">Google (Suchmaschine)</a><br>
<a href="http://web.de/">Web.de (Verzeichnis)</a><br>
<a href="http://www.multimeta.de/">Multimeta (Meta-Suchmaschine)</a>
</p>

</body></html>

Erläuterung:

Pseudoklassen werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoklassen gelten teilweise nur für das a-Element in HTML, daher wird vor dem Doppelpunkt das a notiert. In den Formatdefinitionen für die einzelnen Pseudoklassen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die folgenden Pseudoklassen bedeuten:

:link = für Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)
:hover = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)
:active = für gerade angeklickte Elemente

Beachten Sie:

Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.

Netscape 4.x und der Internet Explorer 3.0 interpretieren noch nicht alle Angaben. Insbesondere reagiert Netscape 4.x noch nicht auf die Pseudoklasse a:hover. Der Internet Explorer interpretiert :focus als :active. Opera ignoriert zunächst :focus und wendet die für diesen Zustand definierten Eigenschaften erst bei nachfolgendem :hover zusätzlich an.

Die Pseudoklassen :focus, :hover und :active gelten auch für andere Elemente als Verweise. Wenn Sie beispielsweise für h1:active CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maustaste gedrückt wird die definierten Eigenschaften an. Im Internet Explorer bis einschließlich Version 6 funktioniert keine dieser allgemeingültigen Pseudoklassen und in Version 7 lediglich :hover.

CSS 1.0 Netscape 6.0 MS IE 6.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 :first-child, :first-line, :first-letter (Pseudoklasse und Pseudoelemente für Absätze)

Sie können für Absätze mit längerem Fließtext für die erste Zeile des Absatzes ein separates Erscheinungsbild erzwingen. Ferner können Sie für das erste Zeichen der ersten Zeile ein separates Erscheinungsbild erzwingen. Und schließlich können Sie sogar bestimmen, dass ein erstes Kindelement eines Elements ein besonderes Aussehen erhält. Dies sind typografische Effekte, die von Druckschriften her bekannt sind.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>:first-line, :first-letter, :first-child</title>
<style type="text/css">
p:first-line { font-weight:bold }
p:first-letter { font-size:300%; color:red }
div { background-color:#E0E0E0 }
div p:first-child { background-color:#C0C0C0; }

</style>
</head><body>

<p>Man kann nur Br&uuml;cken schlagen zwischen Ufern die man
auseinanderh&auml;lt. Denn wo es keine Gr&auml;ben gibt, da gibt es
auch keine Unterschiede, und wo es keine Unterschiede gibt, da ist kein
Leben.</p>
<div>
<p>Und die Moral von der Geschicht:</p>
<p>Traue Philosophen nicht!</p>
</div>
</body></html>

Erläuterung:

Pseudoelemente und Pseudoklassen werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoelemente und Pseudoklassen sind für typische Absatz- oder Überschriftenelemente in HTML gedacht. In den Deklarationen können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die Pseudoelemente und Pseudoklassen bedeuten:

:first-child (Pseudoklasse) = das Element, das das erste Kindelement eines anderen Elements ist erhält die CSS-Eigenschaften
:first-line (Pseudoelement) = die erste Textzeile des Elements erhält die CSS-Eigenschaften
:first-letter (Pseudoelement) = das erste Zeichen des Textes erhält die CSS-Eigenschaften

Beachten Sie:

Der Internet Explorer interpretiert :first-child erst ab Version 7 und :first-line sowie :first-letter erst ab Version 6.

CSS 2.0 Netscape 6.0 Opera 7.50 Mozilla Firefox 1 Konqueror 3.4 Safari WebKit (Entwicklerversion) :lang (Pseudoklasse für Sprachauszeichnung)

Sie können Elemente, deren Sprache mit Hilfe des Seite lang-Universalattributs definiert wurde, speziell formatieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="de"><head><title>:lang</title>
<style type="text/css">
:lang(en) { background-color:#ddf; }
:lang(fr) { background-color:#dfd; }
</style>
</head><body>

<p>Viele <span lang="en">Websites</span> enthalten fremdsprachige Wörter.</p>
<p lang="fr">C'est la vie!</p>

</body></html>

Erläuterung:

Pseudoklassen werden zentral in einem style-Bereich notiert. Die hier beschriebene Pseudoklasse bedeutet:

:lang(en) = Elemente, deren Sprachinhalt als en (englisch) ausgezeichnet wurde
:lang(fr) = Elemente, deren Sprachinhalt als fr (französisch) ausgezeichnet wurde

Nach :lang ist innerhalb runder Klammern ein Seite Sprachenkürzel zu notieren. Der Selektor :lang(de) trifft auch auf Elemente zu, die mit lang="de-AT" oder lang="de-CH" ausgezeichnet wurden, da nur der Beginn des Attributwertes geprüft wird.

Beachten Sie:

Diese Angaben werden auch vom Internet Explorer 7 noch nicht interpretiert.

CSS 2.0 Netscape 6.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 :before, :after (Pseudoelemente für automatisch generierten Inhalt)

Sie können bestimmen, dass vor oder nach einem Element automatisch Inhalt eingefügt wird. Es kann sich um statischen Text, beliebige Ressourcen (meist Grafiken), aber auch um variable Inhalte handeln.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>:before, :after</title>
<style type="text/css">
h1:before { content:url(../../../src/dokx.gif)" "; }
h2:before { content:"\2022"; }
h2:hover:after { content:" #"attr(id); color:#888; font-size:70%; font-style:italic; }
*[title]:after { content:" ("attr(title)")"; color:#080; }
</style>
</head><body>

<h1>Thema</h1>

<h2 id="einleitung">Einleitung</h2>

<p title="Erläuterung...">Text mit <code>title</code>-Attribut</p>

</body></html>

Erläuterung:

Pseudoelemente werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoelemente bedeuten:

:before = Inhalt, der vor dem notierten Inhalt des Elements eingefügt werden soll
:after = Inhalt, der nach dem notierten Inhalt des Elements eingefügt werden soll

Innerhalb der geschweiften Klammern bestimmen Sie dann mit content:, was vor bzw. nach dem in HTML notierten Elementinhalt automatisch eingefügt werden soll.

Im obigen Beispiel wird für das h1-Element bestimmt, dass vor dem Elementinhalt eine Grafik und ein Leerzeichen eingebunden werden.
Vor dem h2-Element wird das Unicode-Zeichen U+2022 (Bullet-Grafik) eingefügt.
Für Überschriften zweiten Grades wird ferner bestimmt, dass beim Überfahren mit der Maus nach dem Element ein Gatterzeichen und der Inhalt des id-Attributs eingefügt werden.
Allen Elementen, die ein title-Attribut aufweisen, wird der Inhalt des Attributs mittels attr([Attributname]) von runden Klammern umschlossen angefügt.

Statischer Text hinter content: muss in Anführungszeichen stehen. Im obigen Beispiel können Sie auch sehen, dass es möglich ist, Angaben zu kombinieren. So bedeutet content:" #"attr(id), dass vor dem Attributwert noch ein statisches Leer- und ein Gatterzeichen eingefügt werden und content:url(../../../src/prev.gif)" ";, dass der Grafik ein Leerzeichen folgt.

CSS 2.1 CSS 2.1 ergänzt ferner folgende Werte, die erst in CSS3 Bedeutung erlangen werden:

content:none = das Pseudoelement wird nicht generiert
content:normal = wie none

Beachten Sie:

Generierter Inhalt wird auch vom Internet Explorer 7 noch nicht interpretiert, von Opera 5 und 6 nur teilweise.

CSS 2.0 Opera 7.50 Mozilla Firefox 1 Konqueror 3.4 Safari 1.0 Automatische Anführungszeichen

Eine erweiterte Syntax der Pseudoelemente nach oben :before, :after erlaubt auch die automatische Einfügung von Anführungszeichen, z.B. für Zitate.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>quotes:</title>
<style type="text/css">
:lang(de)    { quotes:"\201E" "\201C" "\201A" "\2018"; }
:lang(de-DE) { quotes:"\00BB" "\00AB" "\203A" "\2039"; }
:lang(de-CH) { quotes:"\00AB" "\00BB" "\2039" "\203A"; }
:lang(en)    { quotes:"\201C" "\201D" "\2018" "\2019"; }
:lang(fr)    { quotes:"\00AB\00A0" "\00A0\00BB" "\2039\00A0" "\00A0\203A"; }

q:before { content:open-quote; color:#a00; }
q:after { content:close-quote; color:#a00; }
q q:before { content:open-quote; color:#0a0; }
q q:after { content:close-quote; color:#0a0; }

q { font-size:40px; }
q q { color:#888; }
code { font-weight:bold; }
</style>
</head><body>

<p><q lang="de">Sie sagte <q>es geht mir gut</q></q> deutsch</p>
<p><q lang="de-de">Sie sagte <q>es geht mir gut</q></q> deutsch (franz&ouml;sische Variante)</p>
<p><q lang="de-ch">Sie sagte <q>es geht mir gut</q></q> deutsch (Schweiz)</p>
<p><q lang="en">She said <q>I am fine</q></q> englisch</p>
<p><q lang="fr">Elle dit <q>Je vais bien</q></q> franz&ouml;sisch</p>

</body></html>

Erläuterung:

Mittels der Eigenschaft quotes: ist es möglich, die gewünschte Form von Anführungszeichen zu definieren. Als Selektor dient die Pseudoklasse nach oben :lang, um der jeweiligen Sprache angepasste Anführungszeichen zu gewährleisten. Die Auszeichnung mittels de-DE dient im Beispiel nur der Unterscheidung der französischen Variante.

Nach quotes: folgen vier in Hochkommata eingefasste Zeichenreferenzen. Der erste Wert steht für das öffnende Zeichen, der zweite für das schließende. Die beiden folgenden stehen analog dazu für verschachtelte Zitate, wenn also innerhalb eines Zitats nochmals zitiert wird. Eingefügt werden die Anführungszeichen schließlich aufgrund der Eigenschaften nach oben :before, :after in Verbindung mit content:open-quote bzw. content:close-quote.

Die Seite Zeichen für Interpunktion wurden in hexadezimaler Form mit vorangestelltem Backslash notiert.

Deutsche Anführungszeichen

Zeichen | Hexadezimal
„ | \201E
“ | \201C
‚ | \201A
‘ | \2018

Deutsche Anführungszeichen (französische Variante)

Zeichen | Hexadezimal
» | \00BB
« | \00AB
› | \203A
‹ | \2039

Französische Anführungszeichen, gelten ebenso für die gesamte Schweiz

Zeichen | Hexadezimal
« | \00AB
» | \00BB
‹ | \2039
› | \203A

Der Abstand zwischen den Anführungszeichen und deren Inhalt findet nur in Frankreich Anwendung und wurde mittels \00A0 (entspricht in HTML &nbsp;) umgesetzt, um einen unerwünschten Zeilenumbruch zu vermeiden.

Englische Anführungszeichen

Zeichen | Hexadezimal
“ | \201C
” | \201D
‘ | \2018
’ | \2019

Beachten Sie:

Diese Angaben werden auch vom Internet Explorer 7 noch nicht interpretiert. Mozilla Firefox vor Version 1.5 ignoriert die Verschachtelungstiefe und stellt das gesamte Beispiel mit den ersten beiden definierten Zitatzeichen dar. Dies gilt auch für Opera-Versionen vor 7.50, die darüber hinaus nicht alle Arten von Anführungszeichen unterstützen. Safari fügt in allen Versionen lediglich verschachtelte Standard-Anführungszeichen ein.

CSS 2.0 Opera 5.12 Mozilla Firefox 1.5 Konqueror 3.4 Safari WebKit (Entwicklerversion) Automatische Nummerierung

Eine erweiterte Syntax der Pseudoelemente nach oben :before, :after erlaubt auch die automatische Nummerierung von Elementen, z.B. für Kapitelüberschriften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head>
<title>counter</title>
<style type="text/css">
body {
counter-reset: Ebene01;
}
h1:before {
content: counter(Ebene01) " ";
counter-increment: Ebene01;
}
h1 {
counter-reset: Ebene02;
}
h2:before {
content: counter(Ebene01) "." counter(Ebene02) " ";
counter-increment: Ebene02;
}
</style>
</head><body>

<h1>Überschrift erster Ordnung</h1>
<p>Text</p>
<h2>Überschrift zweiter Ordnung</h2>
<p>Text</p>
<h2>Überschrift zweiter Ordnung</h2>
<p>Text</p>
<h1>Überschrift erster Ordnung</h1>
<p>Text</p>
<h2>Überschrift zweiter Ordnung</h2>
<p>Text</p>
<h2>Überschrift zweiter Ordnung</h2>
<p>Text</p>
<h2>Überschrift zweiter Ordnung</h2>
<p>Text</p>
<h1>Überschrift erster Ordnung</h1>
<p>Text</p>

</body></html>

Erläuterung:

In der Regel werden Sie für die automatische Nummerierung Überschriftenelemente wie h1 oder h2 angeben und die Nummerierung vor dessen Text setzen. Dann müssen Sie zur Anzeige der Nummerierung im style-Bereich Selektoren wie h1:before oder h2:before notieren. In den geschweiften Klammern folgt dann, wie bei :before und :after üblich, die Eigenschaft content: gefolgt von counter([Name]), um den Wert des Zählers mit dem Namen Name an die aktuelle Stelle einzufügen.

Mit counter-increment:[Name] zählen Sie den Zähler mit dem angegebenen Namen um eins hoch. Sie können auch eine positive oder negative ganze Zahl angeben, mit der gezählt werden soll. So wird mit counter-increment:[Name] -2 um zwei heruntergezählt.
Mit counter-reset:[Name] setzen Sie einen Zähler auf einen Anfangswert von 1. Auch hierbei können Sie eine positive oder negative ganze Zahl anfügen. Damit setzen Sie den Zähler auf diese Zahl als Anfangswert.
Das Zurücksetzen des Zählers ist vor allem wichtig, wenn Sie mit Kapitel-Unterkapitel-Nummerierung arbeiten, wie im obigen Beispiel. Dort wird beim Vorkommen eines neuen h1-Elements der Zähler für h2-Elemente wieder auf 1 gesetzt.

Neben den Funktionen für die Zählerkontrolle kann auch statischer Text notiert werden. Im obigen Beispiel wird als statischer Text ein Leerzeichen und zwischen counter(Ebene01) und counter(Ebene02) jeweils ein Punkt notiert. So entsteht im Beispiel durch die Verwaltung der beiden Zähler für Überschriften erster und zweiter Ordnung ein Nummerierungsschema wie 1, 1.1, 1.2, 2, 2.1, 2.2, 2.3, 3 usw.

Beachten Sie:

Die automatische Nummerierung wird vom Internet Explorer in keiner Version unterstützt.

nach oben
weiter | Seite Positionierung und Anzeige von Elementen
zurück | Seite Tabellenformatierung
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

SELFHTML

Positionierung und Anzeige von Elementen
Informationsseite

nach unten Allgemeines zur Positionierung und Anzeige von Elementen
nach unten position (Positionsart)
nach unten top (Startposition von oben)
nach unten left (Startposition von links)
nach unten bottom (Startposition von unten)
nach unten right (Startposition von rechts)
nach unten width (Breite)
nach unten min-width (Mindestbreite)
nach unten max-width (Maximalbreite)
nach unten height (Höhe)
nach unten min-height (Mindesthöhe)
nach unten max-height (Maximalhöhe)
nach unten overflow (Elementbereich mit übergroßem Inhalt)
nach unten direction (Richtung)
nach unten float (Textumfluss)
nach unten clear (Fortsetzung bei Textumfluss)
nach unten z-index (Schichtposition bei Überlappung)
nach unten display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)
nach unten visibility (Anzeige bzw. Nichtanzeige mit Platzhalter)
nach unten clip (Anzeigebereich eingrenzen)

nach unten

Allgemeines zur Positionierung und Anzeige von Elementen

Ab der CSS-Version 2.0 gibt es verschiedene Eigenschaften, um Elemente einer WWW-Seite exakt im Anzeigefenster des WWW-Browsers zu positionieren und die Position von Elementen untereinander genau zu kontrollieren. Dazu gehören Angaben zum absoluten und relativen Positionieren von Elementen, Angaben zur Ausdehnung von Elementen, Angaben zum Umfließen von Elementen und Angaben zum Überlappen und Anzeigen von Elementen.

Absolutes und relatives Positionieren von Elementen bietet Ihnen die Möglichkeit, das Erscheinungsbild von Web-Seiten stärker medienorientiert zu gestalten. So können Sie für einzelne Bereiche festlegen, wo genau diese Bereiche beginnen sollen. Bereiche können sich überlappen usw. Im Wesentlichen decken diese Eigenschaften die Möglichkeiten der alten Netscape- Kapitel Layer ab. Im Gegensatz zu den Layern sind sie jedoch ein offizieller Vorschlag des W3-Konsortiums. Netscape und der Microsoft Internet Explorer interpretieren diese Angaben seit ihren 4er-Versionen - allerdings noch mit einigen Einschränkungen bzw. Besonderheiten.

Das Positionieren von Elementen ist eine wichtige Voraussetzung für viele Anwendungsfälle von Kapitel Dynamischem HTML. Mit Hilfe entsprechender Script-Unterstützung können Sie positionierte Elemente bewegen, ein-/ausblenden, anders überlappen usw.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 position (Positionsart)

Sie können für einen Bereich bestimmen, wie er positioniert werden soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }

#s1 { width:150px; height:35px; }
#s2 { width:150px; height:35px; }
#r3 { width:150px; height:35px; position:relative; top:5px; left:25px; background-color:#dfd; }
#s4 { width:150px; height:35px; }
#s5 { width:150px; height:35px; }
#r6 { width:150px; height:35px; position:relative; top:-15px; left:10px; background-color:#fdd; }
#s7 { width:150px; height:35px; }
#s8 { width:150px; height:35px; }

#a1 { position:absolute; top:35px; left:240px; width:150px; height:150px;
      z-index:1; background-color:#ddf; }
#a2 { position:absolute; top:90px; left:230px; width:120px; height:70px;
      z-index:2; background-color:#ccf; }
#a3 { position:absolute; top:220px; left:200px; width:250px; height:250px;
      z-index:3; background-color:#ffa; }
#a4 { position:absolute; top:20px; left:20px; width:70px; height:70px;
      z-index:1; background-color:#ff5; }
#a5 { position:absolute; top:20px; right:20px; width:70px; height:70px;
      z-index:2; background-color:#dd2; }
#a6 { position:absolute; top:130px; left:-50px; width:190px; height:70px;
      z-index:-1; background-color:#fdd; }
#a7 { position:absolute; top:530px; left:50px; bottom:50px; right:50px;
      background-color:#fdd; }

#f1 { position:fixed; top:45px; left:430px; width:150px; height:150px; background-color:#afa; }
</style>
</head><body>

<p>Um <code>position:fixed</code> zu demonstrieren, scrollen Sie an das Ende der Seite.</p>

<div id="s1">s1 static</div>
<div id="s2">s2 static</div>
<div id="r3">r3 relative</div>
<div id="s4">s4 static</div>
<div id="s5">s5 static</div>
<div id="r6">r6 relative</div>
<div id="s7">s7 static</div>

<div id="a1">a1 absolute</div>
<div id="a2">a2 absolute</div>
<div id="a3">a3 absolute
  <div id="a4">a4 absolute</div>
  <div id="a5">a5 absolute</div>
  <div id="a6">a6 absolute</div>
</div>

<div id="a7">a7 absolute</div>

<div id="f1">f1 fixed</div>

<div id="s8">s8 static</div>

</body></html>

Erläuterung:

Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:

static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
relative = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst.
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.
fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.

Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente a4 bis a6 des Beispiels zeigen: relativ nämlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit absolute, fixed oder relative positioniert. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element.

Die Angabe relative bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend (Elemente r3 und r6). Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente – wie die Elemente s4 und s7 demonstrieren – erhalten.

Mit absolute oder fixed positionierte Elemente werden aus dem normalen Elementfluss entfernt und haben damit keinen Einfluss auf nachfolgende Elemente. Im Beispiel folgt demnach s8 bei der Anzeige direkt auf s7, ohne sich an den im Quelltext dazwischen liegenden Elementen a1 bis a7 und f1 zu orientieren.

Die Angabe position: allein legt noch nicht fest, wo genau ein Element beginnen soll. Es bleibt standardmäßig erst einmal dort, wo es ohne Positionierung auch angezeigt würde. Die gewünschte abweichende Position müssen Sie zusätzlich angeben. Dies können Sie beispielsweise mit Angaben für nach unten top, nach unten left, nach unten bottom oder nach unten right tun.

Wenn Sie also beispielsweise position:absolute; top:30px angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines nächsten von static abweichend positionierten Vorfahrenelements beginnt.
Wenn Sie position:relative; top:5px notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre.

Beachten Sie:

Die Angabe fixed wird vom Internet Explorer für Windows bis Version 6 gar nicht und von Version 7 nur im Beispiel-Seite standardkonformen Modus unterstützt, Netscape unterstützt sie seit Version 6.1.
Der Internet Explorer 6 berücksichtigt ferner nur einen Eckpunkt, sodass es diesem Browser nicht möglich ist, einem Element bei Angabe mehrerer Eckpunkte unter Verzicht auf width/height eine zu berechnende Breite und/oder Höhe zuzuweisen, wie dies im Beispiel auf das Element a7 zutrifft. Der Internet Explorer 7 berechnet bei Angaben zu top und bottom die Höhe nicht.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 top (Startposition von oben)

Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu nach oben position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von oben beginnt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>top</title>
</head><body>

<div style="position:absolute; top:180px">
<img src="hund.gif" width="208" height="181" alt="Hund">
</div>

<div style="position:absolute; top:136px; width:208px; background-color:#FFFFE0;
border:1px solid #804000; padding:10px">Dies ist ein absolut positionierter Text
&uuml;ber einer absolut positionierten Grafik.</div>

</body></html>

Erläuterung:

Mit top: können Sie die Startposition von oben bestimmen. Erlaubt sind Seite numerische Angaben und der Wert auto für eine automatische Positionierung.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 left (Startposition von links)

Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu nach oben position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von links beginnt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>left</title>
</head><body>

<div style="position:absolute; top:100px; left:100px;">
<img src="hund.gif" width="208" height="181" alt="Hund"></div>

<div style="position:absolute; top:140px; left:350px; width:200px;
background-color:#FFFFE0; border:1px solid #804000; padding:10px">
Dies ist ein absolut positionierter Text neben einer absolut positionierten Grafik.</div>

</body></html>

Erläuterung:

Mit left: können Sie die Startposition von links bestimmen. Erlaubt ist eine Seite numerische Angabe oder der Wert auto für eine automatische Positionierung.

CSS 2.0 Netscape 6.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 bottom (Startposition von unten)

Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu nach oben position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von unten beginnt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>bottom</title>
</head><body>

<div style="position:absolute; bottom:0px; left:100px;">Dies ist ein untenbündiger Hund:<br>
<img src="hund.gif" width="208" height="181" alt="Hund"></div>

</body></html>

Erläuterung:

Mit bottom: können Sie die Startposition von unten bestimmen. Erlaubt ist eine Seite numerische Angabe oder der Wert auto für eine automatische Positionierung.

Beachten Sie:

Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht, Opera bis Version 6 benötigt zusätzlich die Angabe von nach unten height.

CSS 2.0 Netscape 6.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 right (Startposition von rechts)

Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu nach oben position. Sie können bestimmen, wo ein absolut oder relativ positioniertes Element von rechts beginnt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>right</title>
</head><body>

<div style="position:absolute; top:100px; right:0px;">Rechtsb&uuml;ndiger Hund:<br>
<img src="hund.gif" width="208" height="181" alt="Hund"></div>

</body></html>

Erläuterung:

Mit right: können Sie die Startposition von rechts bestimmen. Erlaubt ist eine Seite numerische Angabe oder der Wert auto für eine automatische Positionierung.

Beachten Sie:

Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht, Opera bis Version 6 benötigt zusätzlich die Angabe von nach unten width.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 width (Breite)

Sie können bestimmen, wie breit ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr Breite einnimmt als die hier angegebene Breite, können Sie zusätzlich die Eigenschaft nach unten overflow verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>width</title>
</head><body>

<p><code>width</code> mit <code>overflow:hidden</code></p>

<h1 style="width:200px; border:10px solid red; padding:10px; font-size:3em; overflow:hidden;">
Eine Überschrift, die möglicherweise breiter ist als erlaubt</h1>

<p><code>width</code> ohne <code>overflow</code></p>

<h1 style="width:200px; border:10px solid red; padding:10px; font-size:3em;">
Eine Überschrift, die möglicherweise breiter ist als erlaubt</h1>

</body></html>

Erläuterung:

Mit width: können Sie die Breite bestimmen. Erlaubt ist eine Seite numerische Angabe oder der Wert auto für automatische Breite.

Beachten Sie:

Dass im obigen Beispiel wo nötig in der Breite Text abgeschnitten wird, liegt nicht an der Eigenschaft width, sondern an der Angabe overflow:hidden. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht. Wird für overflow kein von visible abweichender Wert notiert, vergrößert der Internet Explorer bis zur Version 6 das Element so weit, bis der Inhalt vollständig sichtbar ist.

CSS 2.0 Netscape 6.0 MS IE 7.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 min-width (Mindestbreite)

Sie können bestimmen, wie breit ein Element oder Bereich mindestens sein soll, auch wenn der Inhalt weniger Breite in Anspruch nimmt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>min-width</title>
</head><body>

<div style="position:absolute; top:100px; left:100px; min-width:400px; border:solid 1px blue;
padding:10px">Fasse dich kurz!</div>

</body></html>

Erläuterung:

Mit min-width: können Sie die Mindestbreite bestimmen. Erlaubt ist eine Seite numerische Angabe.

Beachten Sie:

Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei nach oben positionierten Elementen ab Version 2.0.2.

CSS 2.0 Netscape 6.0 MS IE 7.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 max-width (Maximalbreite)

Sie können bestimmen, wie breit ein Element oder Bereich maximal sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr horizontalen Raum einnimmt als die hier angegebene Breite, können Sie zusätzlich die Eigenschaft nach unten overflow verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>max-width</title>
</head><body>

<h1 style="max-width:250px; overflow:hidden; border:solid 1px green; font-size:48px; padding:10px">
Eine &Uuml;berschrift, bei der das Wort 'm&ouml;glicherweise' m&ouml;glicherweise zu breit
f&uuml;r 250px ist</h1>

</body></html>

Erläuterung:

Mit max-width: können Sie die Maximalbreite bestimmen. Erlaubt ist eine Seite numerische Angabe.

Beachten Sie:

Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei nach oben positionierten Elementen ab Version 2.0.2.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 height (Höhe)

Sie können bestimmen, wie hoch ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene Höhe, können Sie zusätzlich die Eigenschaft nach unten overflow verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>height</title>
</head><body>

<p><code>height</code> mit <code>overflow:hidden</code></p>

<h1 style="height:240px; width:300px; border:10px solid red; padding:10px; font-size:3em; overflow:hidden;">
Eine Überschrift, die möglicherweise höher ist als erlaubt</h1>

<p><code>height</code> ohne <code>overflow</code></p>

<h1 style="height:240px; width:300px; border:10px solid red; padding:10px; font-size:3em;">
Eine Überschrift, die möglicherweise höher ist als erlaubt</h1>

</body></html>

Erläuterung:

Mit height: können Sie die Höhe bestimmen. Erlaubt ist eine Seite numerische Angabe oder der Wert auto für automatische Höhe.

Beachten Sie:

Dass im obigen Beispiel wo nötig in der Höhe Text abgeschnitten wird, liegt nicht an der Eigenschaft height, sondern an der Angabe overflow:hidden. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht. Wird für overflow kein von visible abweichender Wert notiert, vergrößert der Internet Explorer bis Version 6 das Element so weit, bis der Inhalt vollständig sichtbar ist.

CSS 2.0 Netscape 6.0 MS IE 7.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 min-height (Mindesthöhe)

Sie können bestimmen, wie hoch ein Element oder Bereich mindestens sein soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>min-height</title>
</head><body>

<div style="position:absolute; top:100px; left:100px; min-height:200px; border:solid 1px blue;
padding:10px"> Fasse dich kurz!</div>

</body></html>

Erläuterung:

Mit min-height: können Sie die Mindesthöhe bestimmen. Erlaubt ist eine Seite numerische Angabe.

Beachten Sie:

Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Konqueror 3.1 interpretiert diese Angabe noch nicht bei absolut positionierten Elementen, ab Konqueror 3.3 stellt er auch solche absolut positionierte Elemente korrekt dar. Safari interpretiert min-height bei nach oben positionierten Elementen ab Version 2.0.2.

CSS 2.0 Netscape 6.0 MS IE 7.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 max-height (Maximalhöhe)

Sie können bestimmen, wie hoch ein Element oder Bereich maximal sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene Höhe, können Sie zusätzlich die Eigenschaft nach unten overflow verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>max-height</title>
</head><body>

<h1 style="max-width:300px; max-height:300px; overflow:hidden; border:solid 1px green;
font-size:48px; padding:10px">Eine &Uuml;berschrift, die m&ouml;glicherweise zu hoch
ist f&uuml;r eine Box von 300 mal 300 Pixel</h1>

</body></html>

Erläuterung:

Mit max-height: können Sie die Maximalhöhe bestimmen. Erlaubt ist eine Seite numerische Angabe.

Beachten Sie:

Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei nach oben positionierten Elementen ab Version 2.0.2.

CSS 2.0 Netscape 6.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.4 Safari 1.0 overflow (Elementbereich mit übergroßem Inhalt)

Diese Angabe kann von Bedeutung sein, wenn Sie für ein Element oder einen Bereich eine feste oder maximale gewünschte Breite oder Höhe definieren. Angenommen, Sie definieren einen Bereich mit <div>...</div>, für den Sie mit Hilfe der Eigenschaft width eine Breite von effektiv 202 Pixel (da der Rahmen addiert wird) erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz (<img>) notieren, bei der das Bild eine Breite von mehr als 200 Pixel aufweist, können Sie mit der hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lösen soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>overflow</title>
</head><body>

<div style="width:200px; height:150px; overflow:auto; border:1px solid #840; margin:1em;">
  beliebiger Hund: <code>auto</code><br>
  <img src="hund.gif" width="208" height="181" alt="Hund">
</div>

<div style="width:200px; height:150px; overflow:hidden; border:1px solid #840; margin:1em;">
  abgeschnittener Hund: <code>hidden</code><br>
  <img src="hund.gif" width="208" height="181" alt="Hund">
</div>

<div style="width:200px; height:150px; overflow:scroll; border:1px solid #840; margin:1em;">
  scrollender Hund: <code>scroll</code><br>
  <img src="hund.gif" width="208" height="181" alt="Hund">
</div>

<div style="width:200px; height:150px; overflow:visible; border:1px solid #840; margin:1em;">
  sichtbarer Hund: <code>visible</code><br>
  <img src="hund.gif" width="208" height="181" alt="Hund">
</div>

</body>
</html>

Erläuterung:

Mit overflow: können Sie bestimmen, wie übergroße innere Elemente behandelt werden. Folgende Angaben sind möglich:

visible = Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
hidden = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet.
scroll = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie bei einem eingebetteten Frame-Fenster.
auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.

Beachten Sie:

Netscape 4.x beherrscht nur overflow:hidden korrekt. Der Internet Explorer bis Version 6 vergrößert bei visible das Element so weit, bis der Inhalt vollständig sichtbar ist. Opera bis Version 6 stellt auto wie visible und scroll wie hidden dar. Konqueror beherrscht die verschiedenen Angaben erst ab Version 3.4 korrekt.

CSS 2.0 Netscape 6.0 MS IE 5.0 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 direction (Richtung)

Mit dieser Angabe können Sie die Schreibrichtung bei Elementen erzwingen, und abhängig davon auch, in welche Richtung beispielsweise Breitenangaben berechnet werden, oder an welcher Seite überbreite Inhalte mit nach oben overflow abgeschnitten werden. Die Schreibrichtung ist vor allem für die Darstellung von Schriftkulturen wie der arabischen gedacht, wo von rechts nach links geschrieben wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>direction</title>
</head><body style="direction:rtl">

<h1>Hi Junkie!</h1>
<p>Hier k&ouml;nnte m&ouml;glicherweise alles anders aussehen als normal ...</p>

</body></html>

Erläuterung:

Mit direction: können Sie die Schreibrichtung bestimmen. Folgende Angaben sind möglich:

ltr = von links nach rechts.
rtl = von rechts nach links.

Beachten Sie:

Die Browser der 4er-Generation interpretieren diese Angabe noch nicht.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 float (Textumfluss)

Sie können für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>float</title>
</head><body>

<h1 style="width:400px; float:left; color:red">&Uuml;berschrift mal anders</h1>
<p style="font-size:120%">Eine &Uuml;berschrift
muss nicht immer einen langweiligen, &uuml;ber die ganze
Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal
seitlich vom Text stehen, und der Text flie&szlig;t um die
&Uuml;berschrift. Auch so kann man lange Texte mal anders gestalten als
sonst &uuml;blich.</p>

</body></html>

Erläuterung:

Mit float: können Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen. Folgende Angaben sind möglich:

left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
none = Kein Umfluss (Normaleinstellung).

Beachten Sie:

Wenn Sie für ein Element eine Angabe zu float notieren, mussten Sie gemäß CSS2 auch eine Angabe zu nach oben width definieren. Gemäß CSS 2.1 (und der tatsächlichen Umsetzung durch die Browser) ist dies nicht mehr erforderlich; die Breite richtet sich in diesem Fall nach dem Inhalt.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 clear (Fortsetzung bei Textumfluss)

Wenn Sie mit nach oben float einen Textumfluss definieren, möchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben einem umflossenen Element haben und den folgenden Text dann unterhalb des umflossenen Elements fortsetzen. Dazu dient die hier beschriebene Angabe.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>clear</title>
</head><body>

<div style="float:left; margin-right:20px; margin-bottom:20px;
border:solid 1px red; text-align:center">
Kapitel<br>
<span style="font-family:Algerian,serif; font-size:96px; color:red">
&nbsp;1&nbsp;</span></div>
<p style="font-size:120%">In diesem Kapitel geht es um Einf&uuml;hrendes.</p>
<p style="clear:left">Dann kommen wir mal zur Sache: ...</p>

</body></html>

Erläuterung:

Mit clear: können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. Folgende Angaben sind möglich:

left = Erzwingt bei float:left die Fortsetzung unterhalb.
right = Erzwingt bei float:right die Fortsetzung unterhalb.
both = Erzwingt in jedem Fall die Fortsetzung unterhalb.
none = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).

Im obigen Beispiel werden die Eigenschaften float und clear dazu genutzt, eine seitliche, große Kapitelnummer zu notieren, neben der Kapitelnummer einen kleinen Text, worum es in dem Kapitel geht, und unterhalb dieser beiden Elemente dann den normalen Text des Kapitels.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 z-index (Schichtposition bei Überlappung)

Diese Eigenschaft wirkt nur in Verbindung mit einer Angabe zu nach oben position. Wenn Sie mehrere Elemente positionieren, deren Anzeigebereiche sich überlappen, werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Im Quelltext später notierte Elemente überdecken vorhergehende. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Elemente Werte vergeben. Elemente mit höherem Wert überdecken Elemente mit niedrigerem.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>z-index</title>
</head><body>

<div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;">
  <b>A:2</b><img src="hund.gif" width="208" height="181" alt="Hund">
</div>

<div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;">
  <b>B:1</b><img src="hund.gif" width="208" height="181" alt="Hund">
</div>

<div style="position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3;
            border:1px solid #888; background:#eee;">
  <b>C:3</b>

  <div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;">
    <b>D:2</b><img src="hund.gif" width="208" height="181" alt="Hund">
  </div>

  <div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;">
    <b>E:3</b><img src="hund.gif" width="208" height="181" alt="Hund">
  </div>

  <div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;">
    <b>F:-1</b><img src="hund.gif" width="208" height="181" alt="Hund">
  </div>
</div>

</body></html>

Erläuterung:

Mit z-index: können Sie die Reihenfolge von überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter vorne liegt das Element, je niedriger, desto weiter hinten liegt das Element vom Betrachter aus gesehen. Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. Per z-index positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (z-index:-1) überdeckt trotz niedrigerem Wert Box B (z-index:1), da sie als Nachfahre von Box C (diese liegt mit z-index:3 über Box B) lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (A und B) können nicht zwischen diesen gestapelt werden.

Beachten Sie:

Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (z-index:-1) hinter deren Elternelement (Box C, deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird) und weicht damit von Opera und Internet Explorer ab, die Nachfahren nicht hinter dem kontexterzeugenden Element selbst darstellen. Diese Vorgangsweise entspricht CSS2, während die beiden letztgenannten Browser in diesem Zusammenhang bereits die Spezifikation gemäß CSS 2.1 umsetzen.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)

Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Ohne Platzhalter" bedeutet, dass bei Nichtanzeige des Elements auch kein Raum für das Element reserviert wird. In diesem Fall deutet bei der Anzeige also zunächst nichts darauf hin, dass das Element überhaupt existiert. Mit Hilfe von Kapitel Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.

Ferner können Sie mit der hier beschriebenen Angabe bestimmen, wie ein Element angezeigt werden soll. Sie können bestimmen, dass es einen eigenen (absatzerzeugenden) Block bilden soll, oder dass es mitten im Text (inline) angezeigt werden soll. So können Sie beispielsweise absatzerzeugende Elemente wie Überschriften in Elemente umdefinieren, die keinen eigenen Absatz erzeugen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>display</title>
</head><body>

<h1 style="display:inline">Ich bin ein inline-Element</h1>
<p style="display:inline">&nbsp;Dieser Text beweist es!</p>
<h1 id="versteckt" style="display:none">
Ich bin ein Block-Element, werde aber nicht angezeigt</h1>
<p>Und dieser Text tut so, als ob sonst nichts w&auml;re!</p>

</body></html>

Erläuterung:

Mit display: können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen. Folgende Angaben sind möglich:

block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss - ähnlich einem "inline replaced element" wie img. Dieser Wert wird erst mit CSS 2.1 eingeführt.
list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor.
run-in = bewirkt, dass das Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.

In CSS2 waren noch die folgenden Werte vorgesehen, die jedoch wegen mangelnder Browserunterstützung in CSS 2.1 nicht übernommen werden:
marker = sollte Seite automatisch generierten Inhalt für das Element deklarieren.
compact = sollte wie run-in bewirken, dass ein Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird.

Speziell für die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu display zur Verfügung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache übernehmen, mit deren Hilfe die XML-Daten angezeigt werden. In CSS hat man die display-Eigenschaft zu diesem Zweck auserkoren. Folgende Angaben sind in diesem Zusammenhang möglich:

table = Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML.
inline-table = Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline.
table-row = Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML.
table-cell = Das Element steht für eine Tabellenzelle. Wirkt wie die Elemente th und td in HTML.
table-row-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML.
table-header-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Kopfzeile einer Tabelle. Wirkt wie das thead-Element in HTML.
table-footer-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Fußzeile einer Tabelle. Wirkt wie das tfoot-Element in HTML.
table-column = Das Element beschreibt die Eigenschaften der Zellen in einer Spalte. Wirkt wie das col-Element in HTML.
table-column-group = Das Element enthält eine Gruppe von Elementen, die die Eigenschaft von Zellen in einer Spalte beschreiben. Wirkt wie das colgroup-Element in HTML.
table-caption. Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML (auch für th-Elemente).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body>

<div class="table">
 <div class="tr">
  <div class="td">ich</div>
  <div class="td">bin</div>
  <div class="td">eine</div>
  <div class="td">Tabelle</div>
 </div>
</div>

</body></html>

Erläuterung:

Das Beispiel definiert Klassen für div-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus div-Elementen mit class-Attributen zusammengebaut.

Beachten Sie:

Netscape 4.0 und der Internet Explorer 4.0 interpretieren die Angabe display:none korrekt. Die übrigen Angaben werden von der 4er-Versionen der beiden Browser jedoch nur unvollständig oder noch gar nicht interpretiert. Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer jedoch auch in der Version 7 noch nicht.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 visibility (Anzeige bzw. Nichtanzeige mit Platzhalter)

Sie können bestimmen, ob ein Element zunächst angezeigt werden soll oder nicht. "Mit Platzhalter" bedeutet, dass bei Nichtanzeige des Elements trotzdem Raum für das Element reserviert wird. Mit Hilfe von Kapitel Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>visibility</title>
<script type="text/javascript">
function onoff () {
  if (document.getElementById)
    document.getElementById("Ueberschrift").style.visibility = "visible";
    document.getElementById("Zeile").style.visibility = "collapse";
}
</script>
</head><body>

<h1 id="Ueberschrift" style="visibility:hidden">Die Überschrift zum Text</h1>
<p>Hier der Text. Aber fehlt da nicht was?</p>

<table border="1">
  <tr>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
  </tr>
  <tr id="Zeile">
    <td>B1</td>
    <td>B2</td>
    <td>B3</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
  </tr>
</table>

<p><a href="javascript:onoff()">Überschrift anzeigen, Zeile B verstecken!</a></p>

</body></html>

Erläuterung:

Mit visibility: können Sie bestimmen, ob ein Element anfangs angezeigt wird oder nicht. Folgende Angaben sind möglich:

visible = Der Inhalt des Element wird angezeigt (Normaleinstellung).
hidden = Der Inhalt des Element wird versteckt (nicht angezeigt).
collapse = Spalten oder Reihen einer Tabelle werden versteckt und geben den zuvor benötigten Platz frei. Wirkt auf alle anderen Elemente wie hidden.

Im obigen Beispiel wird die Überschrift zunächst nicht, die Tabelle jedoch vollständig angezeigt. Beim Anklicken des Verweises wird dies jedoch dynamisch geändert. Auf die dazu erforderlichen JavaScript-Befehle wird an dieser Stelle nicht näher eingegangen.

Beachten Sie:

Lediglich Mozilla Firefox gibt in obigem Beispiel den für Zeile B reservierten Platz frei.

CSS 2.0 Netscape 4.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 clip (Anzeigebereich eingrenzen)

Sie können bestimmen, dass nur ein Ausschnitt eines Elements sichtbar angezeigt wird, unabhängig davon, welche Angaben sonst zur Größe des Elements gemacht wurden und unabhängig von der automatischen Größe des Elements. Wenn das Element größer ist als der so definierte Anzeigebereich, wird es an den Seiten entsprechend abgeschnitten. Derzeit können Sie nur ein Rechteck für den Ausschnitt definieren. In Zukunft sollen jedoch auch Polygone, Kreise bzw. Ellipsen möglich sein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>clip</title>
</head><body>

<div style="position:absolute; top:100px; left:100px; clip:rect(0px, 130px, 130px, 0px);">
Etwas Hund:<br>
<img src="hund.gif" width="208" height="181" alt="Hund"></div>

</body></html>

Erläuterung:

Mit clip: können Sie einen Ausschnitt für die sichtbare Anzeige definieren. Dahinter folgt der Bezeichner rect (für rectangle, = Rechteck), und dahinter, in runde Klammern eingeschlossen, vier durch Beistriche getrennte numerische Werte oder das Schlüsselwort auto zur Bestimmung des Ausschnitts.

Der erste der vier Werte bezeichnet den Wert für "oben", gemessen an der oberen Elementgrenze
Der zweite der vier Werte bezeichnet den Wert für "rechts", gemessen an der linken Elementgrenze
Der dritte der vier Werte bezeichnet den Wert für "unten", gemessen an der oberen Elementgrenze
Der vierte der vier Werte bezeichnet den Wert für "links", gemessen an der linken Elementgrenze

Damit überhaupt ein Ausschnitt sichtbar ist, muss der Wert für "unten" größer sein als der für "oben" und der Wert für "rechts" größer als der für "links". Das Schlüsselwort auto bedeutet: keine Angabe zu dem betreffenden Wert, das Element soll an der entsprechenden Seite bis zu seiner Elementgrenze angezeigt werden. Negative Werte sind gemäß CSS 2.1 nicht mehr erlaubt.

Beachten Sie:

Die Eigenschaft clip wirkt nur auf absolut positionierte Elemente, deren Wert für nach unten overflow von visible abweicht.

Im Internet Explorer funktioniert clip im Beispiel-Seite standardkonformen Modus nur dann, wenn bei der Wertzuweisung auf die – gemäß CSS 2.1 nun zwingend vorgeschriebenen – Kommata verzichtet wird. Auch Version 7 ist von diesem Fehler betroffen.

nach oben
weiter | Seite Layouts für Printmedien
zurück | Seite Pseudoelemente und Pseudoklassen
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Layouts für Printmedien

SELFHTML

Layouts für Printmedien
Informationsseite

nach unten Allgemeines zu Seiten-Layout und Seitenumbruch
nach unten @page (Seiten-Layout definieren)
nach unten size (Seitengröße)
nach unten margin (Seitenränder)
nach unten marks (Schnitt- und Passermarken)
nach unten Seiten rechts/links und erste Seite
nach unten page-break-before (Seitenumbruch vor einem Element)
nach unten page-break-after (Seitenumbruch nach einem Element)
nach unten page-break-inside (Seitenumbruch innerhalb eines Elements)
nach unten orphans (Alleinstehende Zeilen am Seitenende)
nach unten widows (Alleinstehende Zeilen am Seitenanfang)
nach unten Benannte Seiten

nach unten

Allgemeines zu Seiten-Layout und Seitenumbruch

Die hier beschriebenen Stylesheet-Angaben eröffnen HTML und seiner Ergänzungssprache CSS völlig neue Räume, denn mit diesen Angaben wird es möglich, Druck-Layouts zu definieren. Die Möglichkeit des zweigleisigen Editierens wird auch durch die Möglichkeit unterstützt, verschiedene Stylesheets für unterschiedliche Ausgabemedien zu definieren, wie im Abschnitt Seite Stylesheets in HTML einbinden beschrieben.

Die Stylesheet-Angaben zu Seiten-Layout und Seitenumbruch sind jedoch nicht nur für Druckerzeugnisse interessant. Ein entsprechendes Präsentationswerkzeug bzw. ein entsprechend ausgerichteter Web-Browser könnte diese Angaben auch zur bildschirmseitenorientierten Präsentation benutzen.

Von den Eigenschaften interpretiert der Internet Explorer seit Version 4 lediglich diejenigen für den Seitenumbruch. Nur Opera unterstützt einen Großteil der Eigenschaften.

CSS 2.0 Opera 5.12 @page (Seiten-Layout definieren)

Ein Seiten-Layout wird in einem zentralen style-Bereich definiert.

Beispiel:

<style type="text/css">
@page { /* Angaben zum Seiten-Layout */ }
</style>

Erläuterung:

Mit @page können Sie ein Seiten-Layout erstellen. Die Angabe ist ein Behälter für die einzelnen Angaben zum Aussehen des Layouts. Dazu gehören Eigenschaften wie nach unten size (Seitengröße), nach unten margin (Seitenränder) und bei Bedarf auch Angaben zu nach unten marks (Registermarken). Diese Angaben stehen in den geschweiften Klammern im Anschluss an @page.

Beachten Sie:

@page stellt sicher, dass sich die Definitionen zum Seiten-Layout in den geschweiften Klammern nur auf "seiten-orientierte" Medien beziehen und vom WWW-Browser nicht irrtümlich als Definitionen für das normale Erscheinungsbild der HTML-Datei am Bildschirm interpretiert wird. So können Sie mit dieser Angabe z.B. völlig unabhängig von sonstigen Stylesheet-Angaben im gleichen Bereich ein Seiten-Layout für den Ausdruck Ihrer Web-Seiten erstellen.

CSS 2.0 Opera 5.12 size (Seitengröße)

In CSS2 war vorgesehen, hiermit die Breite und Höhe eines Seiten-Layouts festzulegen. Für Druckdokumente sollte das gewünschte Papierformat und für bildschirmseitenorientierte Präsentationen die Größe aller Bildschirmseiten festgelegt werden können.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>size</title>
<style type="text/css">
@page { size:landscape; }
</style>
</head><body>

<p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
Wenn Ihr Browser jedoch die Stylesheet-Angaben zum Seiten-Layout kennt,
versuchen Sie mal, diese Datei &uuml;ber den normalen Druckbefehl Ihres
Browsers auszudrucken.</p>

</body></html>

Erläuterung:

Mit size: sollte im Anschluss an @page die Seitengröße definiert werden können. Vorgesehen waren zwei Seite numerische Angaben, durch ein Leerzeichen voneinander getrennt; die erste Angabe für die Breite der Seite (z.B. 21.0cm) und die zweite für die Höhe (z.B. 29.7cm). Ferner waren folgende Angaben vorgesehen:

auto = Das normale Format des Ausgabemediums (Normaleinstellung).
landscape = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch querkant.
portrait = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch hochkant.

CSS 2.0 Opera 7 margin (Seitenränder)

Sie können die Abstände zwischen Seitenrand und Seiteninhalt festlegen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>margin (page)</title>
<style type="text/css">
@page { size:21.0cm 14.85cm; margin:5.7cm 2cm 1.4cm 1cm; }
</style>
</head><body>

<p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
F&uuml;r den Ausdruck wurden jedoch Abst&auml;nde zwischen
Seiteninhalt und Seitenrand festgelegt.</p>

</body></html>

Erläuterung:

Um die Seitenränder einzeln zu definieren, stehen folgende Angaben zur Verfügung:

margin-top = oberer Seitenrand.
margin-bottom = unterer Seitenrand.
margin-left = linker Seitenrand.
margin-right = rechter Seitenrand.

Wenn Sie für alle vier Seitenränder einen einheitlichen Wert definieren wollen, können Sie anstelle dieser Angaben auch die Angabe margin verwenden.

Für alle Seitenrandangaben ist eine eine Seite numerische Angabe erlaubt.

Beachten Sie:

Diese Angaben haben keinen Einfluss auf Seitenränder bei der normalen Browser-Präsentation am Bildschirm, da sie hinter der Seiten-Layout-Angabe @page stehen. Für die normale HTML-Präsentation im WWW-Browser gibt es entsprechende Stylesheet-Angaben zu Seite Abstand/Rand.

CSS 2.0 marks (Schnitt- und Passermarken)

In CSS2 war vorgesehen, Schnitt- und Passermarken für den Ausdruck angeben zu können.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

Schnittmarken (engl. crop marks) sind Hilfslinien, die bei der Weiterverarbeitung in Belichtung und Druck zum Zuschneiden von Seiten benutzt werden.
Passermarken, auch Registermarken (engl. cross marks oder register marks) sind Markierungen zum exakten Ausrichten des Satzspiegels bei Belichtung und Druck.

Wenn Sie also beispielsweise ein Seitenformat von 10.8cm mal 18.2cm definieren und dieses auf DIN A 4-Papier ausdrucken, sollten Sie solche Marken setzen können, die sichtbar im Ausdruck erscheinen und für die Satzspiegelvorbereitung in der Belichtung oder in der Druckerei das genaue Seitenformat anzeigen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>marks</title>
<style type="text/css">
@page { size:11.3cm 19.85cm; margin:1.7cm; marks:cross;  }
</style>
</head><body>

<p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
F&uuml;r Printmedienverarbeitung wurden jedoch Passermarken gesetzt.</p>

</body></html>

Erläuterung:

Mit marks: sollten im Anschluss an @page Schnitt- und Passermarken definiert werden können, wozu folgende Angaben vorgesehen waren:

none = Keine Marken (Normaleinstellung).
crop = Schnittmarken setzen.
cross = Passermarken setzen.

Die Angaben crop und cross sollten auch gemeinsam, durch Leerzeichen getrennt, angegeben werden können.

CSS 2.0 Opera 7 Seiten rechts/links und erste Seite

Sie können für linke und rechte Seiten sowie für die erste Dokumentseite unterschiedliche Angaben notieren. Dadurch können Sie beispielsweise Heft- oder Binderänder ausgleichen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Seiten rechts/links</title>
<style type="text/css">
@page { size:21.0cm 14.85cm; margin-top:1.5cm; margin-bottom:2cm  }
@page :left { margin-left:1.5cm; margin-right:2cm  }
@page :right { margin-left:2cm; margin-right:1.5cm  }
</style>
</head><body>

<p>Das hier ist die eine Seite.</p>
<p style="page-break-before:always">Das hier die andere (wegen erzwungenem Seitenumbruch)</p>
<p>Die beiden Seiten haben unterschiedliche Seitenr&auml;nder.</p>

</body></html>

Erläuterung:

Unterschiedliche Seiten für rechts und links erzeugen Sie, indem Sie hinter @page, getrennt durch ein Leerzeichen, einen Doppelpunkt norieren und sofort dahinter eines der Schlüsselwörter left (zur Bezeichnung linker Seiten), right (zur Bezeichnung rechter Seiten) oder first (zur Bezeichnung der ersten Seite) angeben. Dahinter können Sie in geschweiften Klammern Angaben zu Größe, Seitenrändern und Schnitt-/Passermarken für die beiden Seitentypen notieren. In der Praxis ist die Unterscheidung vor allem nützlich, um (wie im obigen Beispiel) spiegelverkehrte Werte zum rechten und linken Seitenrand anzugeben. So lassen sich Heft-/Binderänder ausgleichen.

CSS 2.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.4 Safari 1.2 page-break-before (Seitenumbruch vor einem Element)

Sie können einen Seitenumbruch vor einem HTML-Element erzwingen oder verhindern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>page-break-before</title>
</head><body>

<h1>Die erste Seite</h1>
<p>und ihr Text</p>
<h2 style="page-break-before:always">Und die zweite Seite</h2>
<p>und ihr Text</p>

</body></html>

Erläuterung:

Mit page-break-before: können Sie einen Seitenumbruch vor dem aktuellen Element erzwingen oder auch verhindern. Folgende Angaben sind erlaubt:

always = immer einen Seitenumbruch vor dem aktuellen Element einfügen.
avoid = nie einen Seitenumbruch vor dem aktuellen Element einfügen.
left = bei nach oben linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste linke Seite.
right = bei nach oben linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste rechte Seite.
inherit = Angabe zum Seitenumbruch vom Elternelement übernehmen (erben).
auto = keine Angabe zum Seitenumbruch (Normaleinstellung).

Beachten Sie:

Safari 1.2 interpretiert nur die Werte auto und always. Internet Explorer, Konqueror und Opera interpretieren die Werte left und right wie auto. Dies ist eine vom CSS-Standard erlaubte Umsetzung. Firefox und Safari ignorieren page-break-before mit den Werten left oder right gänzlich. Der Wert avoid wird ausschließlich von Opera unterstützt.

CSS 2.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.4 Safari 1.2 page-break-after (Seitenumbruch nach einem Element)

Sie können einen Seitenumbruch nach einem HTML-Element erzwingen oder verhindern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>page-break-after</title>
<style type="text/css">
h2 { page-break-after:avoid; }
</style>
</head><body>

<h1 style="margin-bottom:18cm;">
&Uuml;berschrift ersten Grades mit <code>18cm</code> Au&szlig;enabstand unten.
</h1>

<h2>&Uuml;berschrift zweiten Grades</h2>
<p>Direkt nach einer &Uuml;berschrift zweiten Grades darf kein Seitenumbruch erfolgen.</p>

</body></html>

Erläuterung:

Mit page-break-after: können Sie einen Seitenumbruch nach dem aktuellen Element erzwingen oder auch verhindern. Folgende Angaben sind erlaubt:

always = immer einen Seitenumbruch nach dem aktuellen Element einfügen.
avoid = nie einen Seitenumbruch nach dem aktuellen Element einfügen.
left = bei nach oben linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste linke Seite.
right = bei nach oben linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste rechte Seite.
inherit = Angabe zum Seitenumbruch vom Elternelement übernehmen (erben).
auto = keine Angabe zum Seitenumbruch (Normaleinstellung).

Beachten Sie:

Safari 1.2 interpretiert nur die Werte auto und always. Internet Explorer, Konqueror und Opera interpretieren die Werte left und right wie auto. Dies ist eine vom CSS-Standard erlaubte Umsetzung. Firefox und Safari ignorieren page-break-after mit den Werten left oder right gänzlich. Der Wert avoid wird ausschließlich von Opera unterstützt.

CSS 2.0 Opera 5.12 page-break-inside (Seitenumbruch innerhalb eines Elements)

Sie können einen Seitenumbruch innerhalb eines HTML-Elements verhindern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>page-break-inside</title>
</head><body>

<p style="height:90%; border:1px solid #f00">Platzhalter</p>

<p style="page-break-inside:avoid">
  Innerhalb<br>dieses<br>Abschnitts<br>darf<br>kein<br>Seitenumbruch<br>erfolgen.<br>
  Er wandert daher beim Ausdruck auf die n&auml;chste Seite.
</p>

</body></html>

Erläuterung:

Mit page-break-inside können Sie einen Seitenumbruch innerhalb eines Elements verhindern. Folgende Angaben sind erlaubt:

avoid = nie einen Seitenumbruch innerhalb des aktuellen Elements einfügen.
auto = keine Angabe zum Seitenumbruch (Normaleinstellung).

CSS 2.0 orphans (Alleinstehende Zeilen am Seitenende)

Sie können verhindern, dass Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, dass eine einzelne Zeile auf der einen Seite steht und alle anderen Absatzzeilen auf die nächsten Seite kommen (DTP-Fachjargon hierzulande: Schusterjungen).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>orphans</title>
<style type="text/css">
p { orphans:3; font: 50pt/100pt Verdana,sans-serif; margin:1cm 0 0; padding:0; }
</style>
</head><body>

<p>Absatz_1:_Zeile_1
Absatz_1:_Zeile_2
Absatz_1:_Zeile_3
Absatz_1:_Zeile_4
Absatz_1:_Zeile_5</p>

<p>Absatz_2:_Zeile_1
Absatz_2:_Zeile_2
Absatz_2:_Zeile_3
Absatz_2:_Zeile_4
Absatz_2:_Zeile_5
Absatz_2:_Zeile_6</p>

</body></html>

Erläuterung:

Mit orphans: können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite vor dem Umbruch mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.

Beachten Sie:

Nur Opera kennt diese Eigenschaft, setzt sie aber selbst in der Version 8 noch fehlerhaft und unbrauchbar um. Da in diesem Beispiel nur maximal zwei Zeilen des zweiten Absatzes auf die erste Druckseite passen, müsste der gesamte Absatz umbrochen werden, um die Eigenschaft orphans:3 zu erfüllen. Opera verhält sich merkwürdig und bricht den zweiten Absatz hier nur dann um, wenn z.B. orphans:4 oder widows:3 definiert oder die letzte Zeile des zweiten Absatzes gelöscht würde.

CSS 2.0 widows (Alleinstehende Zeilen am Seitenanfang)

Sie können verhindern, dass Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, dass eine einzelne Zeile auf der neuen Seite steht und alle anderen Absatzzeilen auf der Seite vor dem Seitenumbruch bleiben (DTP-Fachjargon hierzulande: Hurenkinder).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>widows</title>
<style type="text/css">
p { widows:4; font:50pt/100pt Verdana,sans-serif; margin:1cm 0 0; padding:0; }
</style>
</head><body>

<p>Absatz_1:_Zeile_1
Absatz_1:_Zeile_2
Absatz_1:_Zeile_3</p>

<p>Absatz_2:_Zeile_1
Absatz_2:_Zeile_2
Absatz_2:_Zeile_3
Absatz_2:_Zeile_4
Absatz_2:_Zeile_5
Absatz_2:_Zeile_6</p>

</body></html>

Erläuterung:

Mit widows: können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite nach dem Umbruch auf der neuen Seite mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.

Beachten Sie:

Nur Opera kennt diese Eigenschaft, setzt sie aber selbst in der Version 8 noch fehlerhaft und unbrauchbar um. In diesem Beispiel würden mindestens zwei Zeilen des zweiten Absatzes noch auf die erste Druckseite passen und gemäß orphans:4 müssten vier Zeilen umbrochen werden. Opera bricht jedoch den gesamten zweiten Absatz um bzw. bei kleineren Werten für widows stets drei Zeilen oder bei orphans:1 zwei Zeilen.

CSS 2.0 Opera 9 Benannte Seiten

In CSS2 war vorgesehen, für spezielle Seitenformate benannte Seitentypen definieren zu können.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Benannte Seiten</title>
<style type="text/css">
@page querformat { size:landscape; }
div.uebersicht { page:querformat; }
</style>
</head><body>

<div class="uebersicht">
  <p>Das mittels <code>page:querformat</code> benannte div-Element sollte im
  Querformat ausgedruckt werden und bei Bedarf einen Seitenumbruch erzeugen.</p>
</div>

</body></html>

Erläuterung:

Indem hinter @page ein selbst vergebenener Name notiert wird - im obigen Beispiel ist es der Name querformat - sollte ein spezielles Seiten-Layout erstellt werden können. Innerhalb der geschweiften Klammern waren die üblichen Angaben zum Seiten-Layout zu notieren. Benannte Seiten sollten nur dann verwendet werden, wenn ein Element vorkommt, für das eine CSS-Eigenschaft page: notiert ist. Im Beispiel wird für div-Elemente mit dem Klassennamen uebersicht bestimmt, dass solche Elemente den Seitentyp querformat erzwingen. Wenn nun also im HTML-Quelltext steht: <div class="uebersicht">...</div>, dann sollte für die Darstellung dieses Elements der Seitentyp querformat erzwungen werden.

nach oben
weiter | Seite Sound-Kontrolle für Sprachausgabe
zurück | Seite Positionierung und Anzeige von Elementen
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Sprachausgabe

SELFHTML

Sprachausgabe
Informationsseite

nach unten Allgemeines zur Sprachausgabe
nach unten volume (Lautstärke)
nach unten speak (Aussprache)
nach unten pause-before (Pause vor einem Element)
nach unten pause-after (Pause nach einem Element)
nach unten pause (Pause vor/nach einem Element)
nach unten cue-before (Erkennungssignal vor einem Element)
nach unten cue-after (Erkennungssignal nach einem Element)
nach unten cue (Erkennungssignal vor/nach einem Element)
nach unten play-during (Hintergrund-Sound)
nach unten azimuth (Raum-Effekt links/rechts/vorne/hinten)
nach unten elevation (Raum-Effekt oben/unten)
nach unten speech-rate (Sprechgeschwindigkeit)
nach unten voice-family (Sprechertyp)
nach unten pitch (Sprechhöhe)
nach unten pitch-range (Sprechweise)
nach unten stress (Sprechhast)
nach unten richness (Stimmgewalt)
nach unten speak-punctuation (Satzzeichen explizit mit ausgeben)
nach unten speak-numeral (Konvention für Zahlenausgabe)
nach unten Weitergehende Unterstützung - CSS3
nach unten

Allgemeines zur Sprachausgabe

Dank dieser CSS-Eigenschaften, die zur Version 2.0 des CSS-Sprachstandards gehören, wird es möglich, HTML-formatierten Text für die Sprachausgabe auf Audio-Systemen umzusetzen. Da bislang nur Opera die im Folgenden vorgestellten Eigenschaften interpretiert, werden sie in CSS 2.1 in den lediglich informativen Teil der Spezifikation verschoben. Browser sind daher nicht verpflichtet, sie zu unterstützen, um als CSS 2.1-konform zu gelten. Aurale (akustische) Stylesheets werden frühestens in CSS3 wieder normativer Bestandteil der Spezifikation sein.

Die CSS-Eigenschaften zur Sound-Kontrolle für Sprachausgabe erlauben es, Sprecherstimmen auf vielfältige Weise zu beeinflussen und den Einsatz von begleitenden Geräuschen oder Musikpassagen zu kontrollieren. Die hier vorgestellten Möglichkeiten sind jedoch nicht nur für Sehbehinderte eine Hoffnung. Sie sind auch interessant für schöngeistige Autoren, die Texte nicht nur schreiben, sondern auch für den Zweck des Vorlesens exakt formatieren wollen. Vor allem als Autorenanweisungen für Hör- und Bühnenstücke können diese Angaben sehr interessant sein.

Die computer-technische Umsetzung einer solchen akustischen Feinsteuerung von synthetischen Stimmen ist jedoch alles andere als trivial. "Ich hör ja gar nix" wird auch deshalb noch eine Weile lang das enttäuschende Erlebnis beim "Anhören" der Beispiele auf dieser Seite bleiben, denn die meisten heute verbreiteten Browser sind rein bildschirmorientiert und besitzen keine Programm-Module für Sprachausgabe. Zwar gibt es mittlerweile Software zur Sprachausgabe von Web-Seiten, doch auch bei solchen Produkten ist man in der Regel noch nicht so weit, die hier vorgestellten CSS-Eigenschaften zu unterstützen.

Als erster Browser beherrscht Opera ab Version 8 die Sprachausgabe und lässt sich darüber hinaus auch mit Sprachbefehlen steuern. Das von IBM entwickelte Sprachmodul wird nach Aktivierung in den Opera-Einstellungen (Menü Extras / Einstellungen / Erweitert / Sprache / Sprachgesteuerte Bedienung aktivieren) heruntergeladen. Wird nach erfolgter Installation der Inhalt einer Seite markiert, lässt sich er sich anschließend mit der Taste V vorlesen.

Ein Problem bei der Sprachausgabe ist die Vielzahl der Landessprachen. Eine synthetische Stimme, die auf "Englisch" getrimmt ist, wird sich bei der Ausgabe eines deutschen Textes schauerlich anhören. Es ist deshalb auf jeden Fall empfehlenswert, in Dateien, die CSS-Eigenschaften für die Sprachausgabe enthalten, die verwendete Landessprache auszuweisen. Dies kann beispielsweise mit Hilfe des Kapitel Universalattributs lang in einzelnen HTML-Elementen oder zentral im body-Element geschehen. Da das Opera-Sprachmodul derzeit ausschließlich die englische Sprache unterstützt, existiert für jedes der auf dieser Seite angeführten Beispiele eine englische Übersetzung.

CSS 2.0 volume (Lautstärke)

Sie können für ein HTML-Element oder einen Bereich angeben, in welcher Lautstärke er ausgegeben werden soll. Die Lautstärkeangabe ist eine relative Größe in Bezug auf die Grundlautstärke, die der Anwender eingestellt hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>volume</title>
</head><body lang="de">

<p style="volume:silent">Text wird mit der Lautst&auml;rke <b>silent</b> gesprochen</p>
<p style="volume:x-loud">Text wird mit der Lautst&auml;rke <b>x-loud</b> gesprochen</p>
<p style="volume:20">Text wird mit der Lautst&auml;rke <b>20</b> gesprochen</p>
<p style="volume:100">Text wird mit der Lautst&auml;rke <b>100</b> gesprochen</p>

</body></html>

Erläuterung:

Mit volume: können Sie die relative Lautstärke bestimmen. Erlaubt sind Werte zwischen 0 (sehr leise) und 100 (sehr laut) oder einer der folgenden Angaben:

silent = Ton aus, jedoch eine Sprechpause in der Länge der Passage.
x-soft = sehr leise, entspricht Wert 0.
soft = leise, entspricht Wert 25.
medium = mittel, entpricht Wert 50.
loud = laut, entpricht Wert 75.
x-loud = laut, entpricht Wert 100.

CSS 2.0 Opera 8 speak (Aussprache)

Sie können bestimmen, wie ein Element oder ein Bereich ausgesprochen wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>speak</title>
</head><body lang="de">

<p style="speak:normal">Das Wort &quot;Buchstabieren&quot; wird jetzt buchstabiert:</p>
<p style="speak:spell-out">Buchstabieren</p>

</body></html>

Erläuterung:

Mit speak: können Sie die Aussprache beeinflussen. Folgende Angaben sind erlaubt:

none = Ton aus und keine Sprechpause (Element wird quasi übergangen).
normal = Normale, sprachabhängige Aussprache.
spell-out = Buchstabierte Aussprache (sinnvoll z.B. für Abkürzungen).

CSS 2.0 Opera 8 pause-before (Pause vor einem Element)

Sie können eine Sprechpause vor einem Element erzwingen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pause-before</title>
</head><body lang="de">

<h1>Text mit Pausen</h1>
<p style="pause-before:300ms">Text mit 300ms Pause davor</p>
<p style="pause-before:600ms">Text mit 600ms Pause davor</p>
<p style="pause-before:1s">Text mit 1s Pause davor</p>
<p style="pause-before:2s">Text mit 2s Pause davor</p>

</body></html>

Erläuterung:

Mit pause-before: können Sie eine vorangehende Sprechpause erzwingen. Erlaubt ist eine Zeitangabe in Sekunden (s) oder Millisekunden (ms). Alternativ dazu können Sie auch Prozentwerte angeben. Dann ist die Sprechpause abhängig von der (ebenfalls einstellbaren) nach unten Sprechgeschwindigkeit.

CSS 2.0 Opera 8 pause-after (Pause nach einem Element)

Sie können eine Sprechpause nach einem Element erzwingen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pause-after</title>
</head><body lang="de">

<h1>Text mit Pausen</h1>
<p style="pause-after:200ms">Text mit 200ms Pause danach</p>
<p style="pause-after:400ms">Text mit 400ms Pause danach</p>
<p style="pause-after:1s">Text mit 1s Pause danach</p>
<p style="pause-after:3s">Text mit 3s Pause danach</p>
<p>Abschlie&szlig;ender Text</p>

</body></html>

Erläuterung:

Mit pause-after: können Sie eine nachfolgende Sprechpause erzwingen. Erlaubt ist eine Zeitangabe in Sekunden (s) oder Millisekunden (ms). Alternativ dazu können Sie auch Prozentwerte angeben. Dann ist die Sprechpause abhängig von der (ebenfalls einstellbaren) nach unten Sprechgeschwindigkeit.

CSS 2.0 Opera 8 pause (Pause vor/nach einem Element)

Sie können ein Element durch eine Sprechpause davor und eine Sprechpause danach abgrenzen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pause</title>
</head><body lang="de">

<h1>Text mit Pausen</h1>
<p style="pause:500ms">Text mit 500ms Pause davor und danach</p>
<p>Text</p>
<p style="pause:1300ms">Text mit 1300ms Pause davor und danach</p>
<p>Text</p>
<p style="pause:1s 2s">Text mit 1s Pause davor und 2s Pause danach</p>
<p>Abschlie&szlig;ender Text</p>

</body></html>

Erläuterung:

Mit pause: können Sie ein Element durch Sprechpausen davor und danach abgrenzen. Wenn Sie einen Wert angeben, bedeutet dieser Wert sowohl die Sprechpause vor dem Element als auch nach dem Element. Sie können auch zwei Werte angeben, durch ein Leerzeichen getrennt. Dann bedeutet der erste Wert die Sprechpause vor dem Element und der zweite die Sprechpause danach. Erlaubt sind Zeitangaben in Sekunden (s) oder Millisekunden (ms). Alternativ dazu können Sie auch Prozentwerte angeben. Dann sind die Sprechpause abhängig von der (ebenfalls einstellbaren) nach unten Sprechgeschwindigkeit.

CSS 2.0 Opera 8 cue-before (Erkennungssignal vor einem Element)

Sie können Elemente oder Bereiche mit einem Erkennungssignal einleiten. Das kann z.B. ein Geräusch oder eine Melodie sein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>cue-before</title>
</head><body lang="de">

<h1>Text mit Ger&auml;usch</h1>
<p style="cue-before:url(cue.wav)">Freuen Sie sich!</p>

</body></html>

Erläuterung:

Mit cue-before:url([Dateiname]) können Sie ein Erkennungssignal voranschicken. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage.

CSS 2.0 Opera 8 cue-after (Erkennungssignal nach einem Element)

Sie können Elemente oder Bereiche mit einem Erkennungssignal abschließen. Das kann z.B. ein Geräusch oder eine Melodie sein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>cue-after</title>
</head><body lang="de">

<p style="cue-after:url(cue.wav)">Und jetzt folgt ein:</p>

</body></html>

Erläuterung:

Mit cue-after:url([Dateiname]) können Sie ein Erkennungssignal an ein Element anschließen. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage.

CSS 2.0 Opera 8 cue (Erkennungssignal vor/nach einem Element)

Sie können vor und nach einem Element oder Bereich das gleiche Erkennungssignal ausgeben, etwa ein Geräusch oder eine Melodie.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>cue</title>
</head><body lang="de">

<h1>Text mit Ger&auml;usch</h1>
<p style="cue:url(cue.wav)">oh oh, so ein oh oh!</p>

</body></html>

Erläuterung:

Mit cue:url([Dateiname]) können Sie ein Element in zwei gleiche Erkennungssignale einschließen. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage.

CSS 2.0 play-during (Hintergrund-Sound)

Sie können für ein Element oder einen Bereich einen Hintergrund-Sound definieren, der so lange wiederholt wird, bis die Ausgabe des Elements oder Bereichs abgeschlossen ist. Das kann etwa eine Geräuschkulisse oder eine Melodie sein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>play-druring</title>
</head><body lang="de">

<p style="play-during:url(play_during.mid) mix">W&auml;hrend dieser Text gesprochen wird,
ert&ouml;nt im Hintergrund ein flotter Ragtime als MIDI-Datei. Damit Sie in den Genu&szlig;
des gesamten St&uuml;cks kommen, m&uuml;&szlig;te ich Ihnen jetzt eine lange Geschichte erz&auml;hlen.
Aber ich denke, Sie gewinnen auch ohne eine solche Geschichte einen Eindruck davon,
wie Hintergrundmusik w&auml;hrend der Sprachausgabe eines Textes wirkt.
Vielen Dank f&uuml;r Ihre Aufmerksamkeit!</p>

</body></html>

Erläuterung:

Mit play-during:url([Datei]) können Sie einen Hintergrund-Sound definieren. Damit ein echter Hintergrundeffekt zustande kommt, müssen Sie außerdem, durch ein Leerzeichen getrennt, das Wort mix dahinter notieren. Wenn Sie dieses Wort weglassen, übertönt der Hintergrund-Sound die Ausgabe des Inhalts. Wenn sich die Sound-Datei in einem anderen als dem aktuellen Verzeichnis befindet, müssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden.

Hinter der Angabe der Datei können Sie noch eine der folgenden Angaben notieren:

mix = Falls das Elternelement ebenfalls Hintergrund-Sound hat, werden beide Sounds vermischt.
repeat = Wenn die Sound-Datei kürzer ist als es dauert, den Text des Elements zu sprechen, wird der Abspielvorgang so oft wiederholt, bis der Text zuende gesprochen ist.
auto = Falls das Elternelement ebenfalls Hintergrund-Sound hat, wird dieser nicht neu abgespielt, sondern spielt weiter ab.

Anstelle einer Sound-Datei können Sie auch einfach nur none angeben. Das ist sinnvoll, wenn das Elternelement Hintergrund-Sound abspielt. Für die Sprachausgabe des aktuellen Elements können Sie die Ausgabe dann unterbrechen.

CSS 2.0 azimuth (Raum-Effekt links/rechts/vorne/hinten)

Wenn das Sprachausgabesystem räumliches Hören (mindestens stereophon, möglichst Surround-Sound) unterstützt, können Sie die Herkunftsrichtung der Sprechstimme bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>azimuth</title>
</head><body lang="de">

<p style="azimuth:left-side">Diese Stimme hier sollte von links kommen.</p>
<p style="azimuth:left-side behind">Diese Stimme hier sollte von links hinten kommen.</p>
<p style="azimuth:center">Diese Stimme hier sollte ganz aus der Mitte kommen.</p>
<p style="azimuth:right-side behind">Diese Stimme hier sollte von rechts hinten kommen.</p>
<p style="azimuth:right-side">Diese Stimme hier sollte von rechts kommen.</p>

</body></html>

Erläuterung:

Mit azimuth: können Sie die räumliche Herkunftsrichtung der Sprechstimme für ein Element oder einen Bereich bestimmen. Sie können dazu entweder eine Gradangabe für die gedachte Richtung notieren oder ein erlaubtes Schlüsselwort. Gradangaben haben Werte zwischen -360 und 360 und müssen mit der Einheitenbezeichnung deg (degree = Grad) abgeschlossen werden. Folgende Schlüsselwörter sind erlaubt:

left-side = Von ganz links (entspricht 270deg).
left-side behind = Von ganz links hinten (entspricht 270deg).
far-left = Von weiter links (entspricht 300deg).
far-left behind = Von weiter links hinten (entspricht 240deg).
left = Von links (entspricht 320deg).
left behind = Von links hinten (entspricht 220deg).
center-left = Von Mitte links (entspricht 340deg).
center-left behind = Von Mitte links hinten (entspricht 200deg).
center = Von der Mitte (entspricht 0deg).
center behind = Von Mitte hinten (entspricht 180deg).
center-right = Von Mitte rechts (entspricht 20deg).
center-right behind = Von Mitte rechts hinten (entspricht 160deg).
right = Von rechts (entspricht 40deg).
right behind = Von rechts hinten (entspricht 140deg).
far-right = Von weiter rechts (entspricht 60deg).
far-right behind = Von weiter rechts hinten (entspricht 120deg).
right-side = Von ganz rechts (entspricht 90deg).
right behind = Von ganz rechts hinten (entspricht 90deg).

Wenn Sie mit Gradangaben arbeiten, können Sie die genannten Angaben als Richtwerte für die exakt gewünschte Richtung verwenden. Anstelle des Schlüsselwortes behind können Sie auch die Schlüsselworte leftwards und rightwards benutzen. Mit leftwards richten Sie die Stimmherkunft weiter links aus (um 20deg gegen den Uhrzeigersinn), mit rightwards weiter rechts (um 20deg im Uhrzeigersinn).

CSS 2.0 elevation (Raum-Effekt oben/unten)

Wenn das Sprachausgabesystem räumliches Hören (möglichst Surround-Sound) unterstützt, können Sie die Herkunftsrichtung der Sprechstimme zwischen oben und unten bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>elevation</title>
</head><body lang="de">

<p style="elevation:below">Diese Stimme sollte von unten kommen.</p>
<p style="elevation:higher">Diese Stimme sollte von weiter oben kommen.</p>

</body></html>

Erläuterung:

Mit elevation: können Sie die vertikale Herkunftsrichtung der Sprechstimme bestimmen. Sie können dazu entweder eine Gradangabe für die gedachte Richtung notieren oder ein erlaubtes Schlüsselwort. Gradangaben haben Werte zwischen -90 (von ganz unten) und 90 (von ganz oben) und müssen mit der Einheitenbezeichnung deg (degree = Grad) abgeschlossen werden. Folgende Schlüsselwörter sind erlaubt:

below = Von unten (entspricht -90 deg).
level = Von der Mitte (entspricht 0 deg).
above = Von oben (entspricht 90 deg).
higher = Von weiter oben (entspricht 10 deg relativ zur aktuellen Position).
lower = Von weiter unten (entspricht -10 deg relativ zur aktuellen Position).

CSS 2.0 speech-rate (Sprechgeschwindigkeit)

Sie können die Schnelligkeit der gesprochenen Wiedergabe beeinflussen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>speech-rate</title>
</head><body lang="de">

<p style="speech-rate:fast">Das ist ein ziemlich schnell gesprochener Text.
Hoffentlich verstehen Sie alles, was da gesagt wird,
auch wenn es nicht von Belang ist.</p>
<p style="speech-rate:x-slow">Das ist ein gaaannnz langsam gesprochener Text. Gute Nacht!</p>

</body></html>

Erläuterung:

Mit speech-rate: können Sie die Sprechgeschwindigkeit bestimmen. Erlaubt sind folgende Angaben:

x-slow = Ganz langsam.
slow = Langsam.
slower = Etwas langsamer als normal.
medium = Normal.
faster = Etwas schneller als normal.
fast = Schnell.
x-fast = Ganz schnell.

Anstelle der Schlüsselwörter können Sie auch numerische Werte angeben. Ein numerischer Wert bedeutet die mittlere Anzahl Wörter pro Minute. Probieren Sie als Anhaltspunkt Werte um 100.

CSS 2.0 Opera 8 voice-family (Sprechertyp)

Sie können die Art der Stimme beeinflussen. Dies entspricht etwa dem Beeinflussen von Schriftarten bei visueller Darstellung. Ob die Angabe interpretiert werden kann, hängt neben der interpretierenden Software von den Hardware-Fähigkeiten des Sprachausgabesystems ab.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>voice-family</title>
</head><body lang="de">

<p style="voice-family:female">Dieser Text wird von einer Frau vorgelesen.</p>
<p style="voice-family:male">Dieser Text wird von einem Mann vorgelesen.</p>
<p style="voice-family:old female">Dieser Text wird von einer alten Frau vorgelesen.</p>
<p style="voice-family:old male">Dieser Text wird von einem alten Mann vorgelesen.</p>
<p style="voice-family:young female">Dieser Text wird von einer jungen Frau vorgelesen.</p>
<p style="voice-family:young male">Dieser Text wird von einem jungen Mann vorgelesen.</p>
<p style="voice-family:child female">Dieser Text wird von einem weiblichen Kind vorgelesen.</p>
<p style="voice-family:child male">Dieser Text wird von einem m&auml;nnlichen Kind vorgelesen.</p>

</body></html>

Erläuterung:

Mit voice-family: können Sie die Art der Sprechstimme festlegen. Folgende generische Angaben werden vom W3-Konsortium z.B. vorgeschlagen:

male = Männerstimme
female = Frauenstimme
old = alte Stimme
young = junge Stimme
child = Kinderstimme

Die Werte dürfen kombiniert werden. Daneben können Sie auch spezifische Angaben notieren, etwa MeineEhefrau. Die entsprechende Stimme muss dem Sprachausgabesystem in digitaler Form bekannt sein.

CSS 2.0 pitch (Sprechhöhe)

Sie können die Stimmhöhe der Aussprache bestimmen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pitch</title>
</head><body lang="de">

<p style="pitch:x-low">Diese Stimme spricht so tief wie m&ouml;glich zu Ihnen.
Lassen Sie sich trotzdem nicht einsch&uuml;chtern.</p>
<p style="pitch:4000Hz">Diese Stimme spricht so hoch wie m&ouml;glich zu Ihnen.
Schnatterdischnatterdischnatterdischnatt.</p>

</body></html>

Erläuterung:

Mit pitch: können Sie die Sprechhöhe festlegen. Erlaubt ist entweder die Angabe der mittleren Sprechhöhe als Frequenz (in hz für Hertz oder khz für Kilohertz) oder eine der folgenden Angaben:

x-low = Ganz tief.
low = Tief.
medium = Normal.
high = Hoch.
x-high = Ganz hoch.

CSS 2.0 pitch-range (Sprechweise)

Sie können die Modulation der Aussprache beeinflussen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>pitch-range</title>
</head><body lang="de">

<p style="pitch-range:20">Dies ist ein ziemlich &ouml;der Text,
deshalb wird der mit ziemlich monotoner Stimme gesprochen.</p>
<p style="pitch-range:80">Obwohl auch dies ein ziemlich &ouml;der Text ist,
wird er dennoch mit sehr angeregter Stimme vorgetragen.</p>

</body></html>

Erläuterung:

Mit pitch-range: können Sie die Sprechweise bestimmen. Normale Sprechweise entspricht einem Wert von 50. Ein tieferer Wert bedeutet eine monotone, modulationsarme Stimme, ein hoher Wert eine angeregte, modulationsreiche Stimme.

CSS 2.0 stress (Sprechhast)

Sie können die Emphatik der Stimme beeinflussen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>stress</title>
</head><body lang="de">

<p style="stress:10">Ich habe alle Zeit der Welt. Deshalb bin ich auch
ganz gelassen und spreche nur mit einem Stress-Wert von 10.</p>
<p style="stress:90">Immerzu ist alles gleich vorbei. Nie kommt man zu etwas.
Alles ist grausam. Deshalb rede ich auch so hastig.
Ein Stress-Wert von 90 wurde mir vorgegeben, stellen Sie sich das mal vor!</p>

</body></html>

Erläuterung:

Mit stress: können Sie festlegen, wie hastig die Stimme ist. Ein Wert von 50 ist normal. Ein höherer Wert bedeutet eine hastige, aufgeregte Stimme, ein niedriger Wert eine in sich ruhende, selbstsichere Stimme.

CSS 2.0 richness (Stimmgewalt)

Sie können die Gewichtigkeit der Stimme beeinflussen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>richness</title>
</head><body lang="de">

<p style="richness:85">Ich bin reich. Ich bin sch&ouml;n.
Deshalb rede ich laut und klar, mit einer Stimmgewalt von 85.</p>
<p style="richness:15">Ich bin arm. Ich bin h&auml;&szlig;lich.
Deshalb hab ich auch so eine d&uuml;nne Stimme. Ihre Gewalt hat nur einen Wert von 15.</p>

</body></html>

Erläuterung:

Mit richness: können Sie die Stimmgewalt festlegen. Normalwert ist 50. Ein höherer Wert bedeutet eine gewaltige, beherrschende Stimme, ein niedriger Wert eine dünne, unsichere Stimme.

CSS 2.0 speak-punctuation (Satzzeichen explizit mit ausgeben)

Sie können bestimmen, dass bei einem Textbereich alle darin vorkommenden Satzzeichen wie Punkt, Komma, Ausrufezeichen usw. explizit genannt werden, also z.B. "Dies ist ein Satz - Punkt".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>speak-punctuation</title>
</head><body lang="de">

<p style="speak-punctuation:code">H&ouml;ren Sie mal! - Oder sind Sie schwerh&ouml;rig?
Hier - und nur hier gibt's was zus&auml;tzlich auf die Ohren:
n&auml;mlich exklusiv ausgesuchte, explizit ausgesprochene Satzzeichen.</p>

</body></html>

Erläuterung:

Mit speak-punctuation: haben Sie Einfluss auf die Aussprache von Satzzeichen. Folgende Angaben sind erlaubt:

code = Satzzeichen mit aussprechen.
none = Satzzeichen nicht mit aussprechen (Normaleinstellung).

CSS 2.0 speak-numeral (Konvention für Zahlenausgabe)

Sie können bestimmen, in welcher Form größere Zahlen, z.B. 4256, ausgesprochen werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an ( Beispiel-Seite englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>speak-numeral</title>
</head><body lang="de">

<p>Rosis Telefonnummer lautet <b style="speak-numeral:digits">32168</b>.</p>
<p>Mit ihrem Gewerbe hat Rosi schon <b style="speak-numeral:continuous">32168</b> Dollar verdient.</p>

</body></html>

Erläuterung:

Mit speak-numeral: können Sie festlegen, wie Zahlenfolgen ausgesprochen werden. Erlaubt sind folgende Angaben:

digits = ziffernweise, 456 also etwa als "vier-fünf-sechs".
continuous = als Zahl, 456 also etwa "vierhundertsechsundfünfzig".

Opera 8 Weitergehende Unterstützung - CSS3

Als absehbar war, dass aurale Stylesheets kein normativer Bestandteil von CSS 2.1 werden würden, entschloss man sich bei Opera, zusätzlich unterstütze Eigenschaften mit einem herstellerspezifischen Kürzel zu versehen. Opera interpretiert folgende Eigenschaften:

-xv-voice-volume für nach oben volume
-xv-voice-rate für nach oben speech-rate
-xv-voice-pitch für nach oben pitch
-xv-voice-pitch-range für nach oben pitch-range
den Wert -xv-digits bei nach oben speak für nach oben speak-numeral

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus und hört sich's an (englisch)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>-xv-voice-*</title>
</head><body>

<p><code>-xv-voice-volume</code></p>

<p style="-xv-voice-volume:silent">This text is spoken with the volume setting <b>silent</b></p>
<p style="-xv-voice-volume:x-loud">This text is spoken with the volume setting <b>x-loud</b></p>
<p style="-xv-voice-volume:20">This text is spoken with the volume setting <b>20</b></p>
<p style="-xv-voice-volume:100">This text is spoken with the volume setting <b>100</b></p>

<p><code>-xv-voice-rate</code></p>

<p style="-xv-voice-rate:fast">This text is read out fairly quickly. I hope you can still
understand everything, even though, of course, it is nothing important.</p>
<p style="-xv-voice-rate:x-slow">This text is read out very slowly. Good night!</p>

<p><code>-xv-voice-pitch</code></p>

<p style="-xv-voice-pitch:x-low">This text is read out with a voice that is as deep as possible.
Please try not to be intimidated.</p>
<p style="-xv-voice-pitch:4000Hz">This text is read out with a voice that ist very high.
Does it get on your nerves?</p>

<p><code>-xv-voice-pitch-range</code></p>

<p style="-xv-voice-pitch-range:20">This text is very boring,
and that is why it is read with a fairly boring, monotonous voice.</p>
<p style="-xv-voice-pitch-range:4000">Although this text is also quite boring,
it is read with a very animated voice.</p>

<p><code>speak:-xv-digits</code></p>

<p>To get through to my stockbroker, I dial <b style="speak:-xv-digits">32168</b>.</p>
<p>In the past twelve months, I made a total of <b style="-xv-digits:continous">32168</b>
Dollars with shares.</p>

</body></html>

Beachten Sie:

Herstellerspezifische, noch nicht standardisierte Eigenschaften werden mittels Binde- oder Unterstrichen (Beispiel: -hersteller-eigenschaft:wert) als solche deklariert.

nach oben
weiter | Seite Anzeigefenster
zurück | Seite Layouts für Printmedien
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Anzeigefenster

SELFHTML

Anzeigefenster
Informationsseite

nach unten Allgemeines zum Anzeigefenster
nach unten cursor (Mauszeiger)
nach unten cursor:url() (Mauszeiger mit eigener Grafikdatei)
nach unten scrollbar (Microsoft-Eigenschaften für Scroll-Leisten)
nach unten

Allgemeines zum Anzeigefenster

Zum Anzeigefenster gibt es zunächst einmal zu sagen, dass es Teil der Arbeitsumgebung des Anwenders ist und deshalb kein Spiel- und Tummelplatz für Autoren von Web-Seiten. Die einzige Eigenschaft des Anzeigefensters, auf die das W3-Konsortium in der CSS-Spezifikation den Zugriff ermöglicht, ist das Aussehen des Mauszeigers. Das ist insofern sinnvoll, als es zur Funktionalität von Web-Seiten unterstützend beitragen kann.

Über den Sinn der CSS-Eigenschaften, die Microsoft in den Internet Explorer seit Version 5.5 eingebaut hat, kann man dagegen geteilter Meinung sein. Im Rahmen stimmiger Web-Designs kann es sinnvoll sein, dass auch die Scroll-Leisten des Browser-Fensters oder die von mehrzeiligen Formulareingabefeldern zu den übrigen Farben passen. Andererseits wecken solche Möglichkeiten wieder neue Begehrlichkeiten in jenen Leuten, die über ihre Web-Seiten am liebsten den Computer des Anwenders ein- und ausschalten würden. Denn natürlich wollen die als nächstes auch die Menü- und Werkzeugleiste des Browsers gestalten können.

CSS 2.0 Netscape 6.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 cursor (Mauszeiger)

Sie können für ein HTML-Element einen Cursor definieren. Wenn der Anwender mit der Maus über die Fläche fährt, die das Element einnimmt, nimmt der Mauszeiger die angegebene Gestalt an. Da Mauszeiger immer mit einer Bedeutung versehen sein sollten, ist es in der Praxis sinnvoll, solche Elemente etwa mit Hilfe von JavaScript Event-Handlern an ein Script zu binden, das bestimmte Befehle ausführt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>cursor</title>
</head><body>

<div style="background-color:#F8F8FF; padding:13px; border:thin solid black; cursor:crosshair;">
<p>Dies ist ein Bereich mit der Angabe <b>cursor:crosshair</b>.
Fahren Sie mit der Maus &uuml;ber diesen Bereich.</p></div>

<!--usw.-->
</body></html>

Erläuterung:

Mit cursor: können Sie das Aussehen des Mauszeigers für den Fall definieren, dass der Anwender mit der Maus über den entsprechenden Bereich fährt. Folgende Angaben sind erlaubt:

auto = automatischer Cursor (Normaleinstellung).
default = Plattformunabhängiger Standard-Cursor.
crosshair = Cursor in Form eines einfachen Fadenkreuzes.
pointer = Cursor in Form eines Zeigers.
move = Cursor in Form eines Kreuzes, das die Fähigkeit zum Bewegen des Elements signalisiert.
n-resize = Cursor in Form eines Pfeils, der nach oben zeigt (n = Norden).
ne-resize = Cursor in Form eines Pfeils, der nach rechts oben zeigt (ne = Nordost).
e-resize = Cursor in Form eines Pfeils, der nach rechts zeigt (e = Osten).
se-resize = Cursor in Form eines Pfeils, der nach rechts unten zeigt (se = Südost).
s-resize = Cursor in Form eines Pfeils, der nach unten zeigt (s = Süden).
sw-resize = Cursor in Form eines Pfeils, der nach links unten zeigt (sw = Südwest).
w-resize = Cursor in Form eines Pfeils, der nach links zeigt (w = Westen).
nw-resize = Cursor in Form eines Pfeils, der nach links oben zeigt (nw = Nordwest).
text = Cursor in einer Form, die normalen Text symbolisiert.
wait = Cursor in Form eines Symbols, das einen Wartezustand signalisiert.
help = Cursor in Form Symbols, das Hilfe zu dem Element signalisiert.
progress = Cursor in Form eines Symbols, das einen Programmfortschritt signalisiert, welcher aber anders als wait eine Interaktion zulässt. Dieser Wert wird erst mit CSS 2.1 eingeführt.

Beachten Sie:

Der Internet Explorer bis Version 5.5 kennt pointer nicht, jedoch den nicht standardisierten Wert hand.

Cursor-Symbole sollten Sie nicht zweckentfremden. Wenn Sie beispielsweise cursor:move für ein Element benutzen, sollte dieses Element auch tatsächlich beweglich sein (etwa mit Hilfe von Dynamischem HTML), und wenn Sie cursor:help benutzen, erwartet der Anwender beim Anklicken des Bereichs, dass am Bildschirm ein Fenster oder ein Bereich mit einem Hilfetext erscheint.

CSS 2.1 MS IE 6.0 Mozilla Firefox 1.5 Safari 1.2 cursor (Mauszeiger) mit eigener Grafik

Mit cursor:url([Datei]) können Sie eigene Bilddateien als Mauszeiger definieren.

Die Angabe einer externen Grafik wird uneinheitlich unterstützt: Zwingend ist für alle Browser, die das Feature überhaupt unterstützen, dass zusätzlich zur Grafikangabe auch eine Alternative in Form einer Standardangabe berücksichtigt wird. Es ist außerdem möglich, ähnlich wie bei Schriftarten mehrere externe Grafiken aufzulisten. Trennen Sie alle einzelnen Angaben durch ein Komma, beispielsweise cursor:url(cursor.gif), move;

Beachten Sie:

Nicht alle Browser unterstützen alle Grafikformate und auch nicht unter allen Betriebssystemen. So unterstützt z.B. der Internet Explorer nur .cur und .ani als Format, wärend Firefox .ani überhaupt nicht und unter Linux .cur nicht unterstützt.

MS IE 5.5 Opera 7.20 Konqueror 3.1 scrollbar (Microsoft-Eigenschaften für Scroll-Leisten)

Die hier beschriebenen Eigenschaften lassen sich auf HTML-Elemente wie beispielsweise html, body oder textarea anwenden. Mit html und body legen Sie die Farben der Fenster-Scroll-Leisten fest, bei textarea die Farben der Scroll-Leisten des Eingabebereichs.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>scrollbars</title>
<style type="text/css">
html, body, textarea {
  background-color:#8C8CC6;
  color:#FFFFFF;
  font-family:"Andale Mono",Arial,sans-serif;
  scrollbar-base-color:#8C8CC6;
  scrollbar-3d-light-color:#FFFFFF;
  scrollbar-arrow-color:#FFFFFF;
  scrollbar-darkshadow-color:#000000;
  scrollbar-face-color:#8C8CC6;
  scrollbar-highlight-color:#FFFFFF;
  scrollbar-shadow-color:#000000;
  scrollbar-track-color:#ACACE6;
}
</style>
</head><body>
<h1 style="text-decoration:underline">Ton in Ton</h1>

<form name="Seite" action="#">
 <p>Den Text dieser Seite können Sie selber schreiben:</p>
 <p><textarea name="Text" cols="80" rows="80"></textarea></p>
</form>

</body></html>

Erläuterung:

Mit den folgenden Eigenschaften können Sie die Einzelteile von Scroll-Leisten bestimmen:

scrollbar-base-color = Basisfarbe der Scroll-Leiste
scrollbar-3dlight-color = Farbe für 3D-Effekte
scrollbar-arrow-color = Farbe für Verschiebepfeile
scrollbar-darkshadow-color = Farbe für Schatten
scrollbar-face-color = Farbe für Oberfläche
scrollbar-highlight-color = Farbe für oberen und linken Rand
scrollbar-shadow-color = Farbe für unteren und rechten Rand
scrollbar-track-color = Farbe für freibleibenden Verschiebeweg

Bei all diesen Eigenschaften ist eine Seite Farbangabe möglich.

Beachten Sie:

Auch Opera und Konqueror kennen diese Eigenschaften. Der Internet Explorer 6 interpretiert die Angaben im Seite standardkonformen Modus nur dann, wenn Sie diese für html anstatt body definieren - sie sollten diese Angaben daher wie im obigen Beispiel für beide Elemente machen, wenn Sie die Umsetzung in den verschiedenen Versionen (bzw. Modi) des Internet Explorer ermöglichen wollen. Opera und Konqueror interpretieren diese Angaben ausschließlich im Quirks-Modus.

nach oben
weiter | Seite Filter (nur Microsoft)
zurück | Seite Sound-Kontrolle für Sprachausgabe
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-Eigenschaften / Filter (nur Microsoft)

SELFHTML

Filter (nur Microsoft)
Informationsseite

nach unten Allgemeines zu Filtern
nach unten filter:Alpha() (Vordergrund/Hintergrund verschmelzen)
nach unten filter:Blur() (Verwisch-Effekt)
nach unten filter:Chroma() (Transparenzfarbe)
nach unten filter:DropShadow() (Schattenwurf)
nach unten filter:FlipH() (Horizontal spiegeln)
nach unten filter:FlipV() (Vertikal spiegeln)
nach unten filter:Glow() (Glühender Rand)
nach unten filter:Gray() (Graustufen)
nach unten filter:Invert() (Invertieren)
nach unten filter:Mask() (Transparenzmaske)
nach unten filter:Shadow() (Schatten)
nach unten filter:Wave() (Wellenartige Störung)
nach unten filter:XRay() (Fotonegativ-Effekt)

nach unten

Allgemeines zu Filtern

Die hier vorgestellten Eigenschaften kommen aus dem Bereich der Bildbearbeitung. Die Filter berechnen Effekte, die sich auf geeignete Objekte anwenden lassen.

Durch diese Filter werden zwar sehr interessante optische Effekte möglich. Auch kunstvolle Textgestaltung ist damit möglich, was manche Grafik ersparen hilft. Dennoch sind all die Eigenschaften für Filter kein CSS-Standard und ein proprietäres Leistungsmerkmal des Internet Explorer. Andere Browser interpretieren diese Eigenschaften nicht.

Sie können für einzelne Elemente Filter angeben, die das Element dynamisch verändern. Das Prinzip ist immer das gleiche.

Beispiel:

<img src="grafik.gif" style="filter:Blur(strength=50)">
<img src="grafik.gif" style="filter:Blur(strength=50) FlipH();">

Erläuterung:

Mit filter: können Sie einen Effekt-Filter bestimmen. Hinter dem Doppelpunkt folgt der Aufruf eines Filters. Einige Filter erwarten Parameter, andere nicht. Die Parameter und Ihre Wertangaben zu den Filtern notieren Sie in Klammern unmittelbar hinter dem Filternamen, so wie im obigen Beispiel (strength=50) als Parameter an den Filter Blur() übergeben wird mit einem Gleichheitszeichen. Wenn ein Filter keine Parameter erwartet, notieren Sie trotzdem die Klammern, lassen den Inhalt dazwischen aber leer.

Sie können auch mehrere Filter kombinieren. Im zweiten der obigen Beispiele werden etwa die beiden Filter Blur() und FlipH() kombiniert. Dazu dürfen Sie nur einmal das Schlüssenwort filter: notieren. Zwischen diesem Schlüsselwort und dem nächsten Semikolon (;) zum Abschließen der Stylesheet-Angabe können Sie mehrere Filter notieren. Trennen Sie die Filter durch ein Leerzeichen vor dem Namen des nächsten Filters, so wie im Beispiel vor FlipH().

Die Filter sind für die folgenden HTML-Elemente gedacht (bei anderen funktionieren sie nicht):

body (Effekt betrifft die gesamte angezeigte Seite)
button (Effekt betrifft die Schaltfläche)
div (Effekt betrifft den Bereich in Verbindung mit den Stylesheet-Angaben width: und/oder height: und/oder position:)
img (Effekt betrifft die referenzierte Grafik)
input (Effekt betrifft das Eingabefeld)
marquee (Effekt betrifft den Lauftext)
span (Effekt betrifft den Bereich in Verbindung mit den Stylesheet-Angaben width: und/oder height: und/oder position:)
table (Effekt betrifft die Tabelle)
td (Effekt betrifft die Datenzelle einer Tabelle)
textarea (Effekt betrifft das mehrzeilige Eingabefeld)
tfoot (Effekt betrifft den Fußbereich einer Tabelle)
th (Effekt betrifft die Kopfzelle einer Tabelle)
thead (Effekt betrifft den Kopfbereich einer Tabelle)
tr (Effekt betrifft die Zeile einer Tabelle)

Beachten Sie:

Es gibt noch drei weitere Microsoft-Filter, die jedoch Script-Sprachen-Unterstützung benötigen. Überhaupt werden diese Filter erst so richtig interessant, wenn sie dynamisch verändert werden. Lesen Sie dazu im Kapitel über Kapitel Dynamisches HTML den Abschnitt Seite Dynamische Filter (nur Microsoft).

Auf dieser Seite werden die Filter beschrieben, die mit dem Internet Explorer 4.0 eingeführt wurden. Mit der Version 5.5 seines Browsers hat Microsoft wieder eine neue, erweiterte Syntax eingeführt.
An die Stelle des Syntax-Schemas: filter:filtername(Eigenschaften)
tritt das neue Syntax-Schema: filter:progid:DXImageTransform.Microsoft.filtername(Eigenschaften)

MS IE 4.0 filter:Alpha() (Vordergrund/Hintergrund verschmelzen)

Mit diesem Filter können Sie Vordergrundelemente mit Hintergrundelementen farblich verschmelzen. Der Filter erlaubt verschiedene Möglichkeiten, wie ein Vordergrundelement aus seinem Hintergrund "heraustreten" kann.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Alpha()</title>
</head><body>

<div style="background-image:url(background3.jpg); padding:20px; text-align:center">
<img src="filter_alpha.gif" style="filter:Alpha(opacity=100, finishopacity=0, style=2)" width="247" height="383" alt="Grafik"></div>

</body></html>

Erläuterung:

Mit filter:Alpha() können Sie Vordergrundelemente und Hintergrundelemente ineinander verschmelzen. Geeignet ist der Filter z.B. für Grafiken, die auf Hintergrundgrafiken erscheinen. Dieser Filter erwartet folgende Parameter:

opacity steht für den Deckgrad am Ursprung der Verschmelzung. Erlaubt sind Werte zwischen 0 und 100. Wert 0 bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100 bedeutet: vollkommen abdeckend (Hintergrund scheint nicht durch).

finishopacity steht für den Deckgrad am Ende der Verschmelzung. Erlaubt sind Werte zwischen 0 und 100. Wert 0 bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100 bedeutet: vollkommen abdeckend (Hintergrund scheint nicht durch).

style steht für die Art, in der der Filter wirkt. Erlaubt sind die Werte 0, 1, 2 und 3.
0 bedeutet: Hintergrund und Vordergrund werden farblich addiert. Das Vordergrundelement wird farblich entsprechend manipuliert. Keine Verschmelzung. Angaben zu den anderen Parametern sind in diesem Fall nicht erforderlich, d.h. Alpha(style=0) genügt.
1 bedeutet: linearer Verlauf von einem selbst definierbaren Anfangspunkt zu einem selbst definierbaren Endpunkt. Am Anfangspunkt gilt der Wert, der bei opacity angegeben wird. Ab dem Endpunkt verliert der Wert für opacity seinen Einfluss, und der Wert für finishopacity dominiert. Den Anfangspunkt bestimmen Sie durch startx und starty, den Endpunkt durch finishx und finishy.
2 bedeutet: radialer (elliptischer) Verlauf von innen nach außen. Ganz innen gilt der angegebene Wert für opacity, ganz außen der angegebene Wert für finishopacity. In diesem Fall können Sie Angaben zu startx, starty, finishx und finishy weglassen, so wie im obigen Beispiel.
3 bedeutet: rechteckiger Verlauf von innen nach außen. Ganz innen gilt der angegebene Wert für opacity, ganz außen der angegebene Wert für finishopacity. In diesem Fall können Sie Angaben zu startx, starty, finishx und finishy weglassen, so wie im obigen Beispiel.

startx steht für den Anfangspunkt vom linken Rand aus gesehen in Prozent relativ zur Breite des Elements. Nur in Verbindung mit style=1 von Bedeutung.

starty steht für den Anfangspunkt vom oberen Rand aus gesehen in Prozent relativ zur Höhe des Elements. Nur in Verbindung mit style=1 von Bedeutung.

finishx steht für den Endpunkt vom linken Rand aus gesehen in Prozent relativ zur Breite des Elements. Nur in Verbindung mit style=1 von Bedeutung.

finishy steht für den Endpunkt vom oberen Rand aus gesehen in Prozent relativ zur Höhe des Elements. Nur in Verbindung mit style=1 von Bedeutung.

MS IE 4.0 filter:Blur() (Verwisch-Effekt)

Dieser Filter erlaubt es, Grafiken in HTML mit Verwisch-Effekt auszustatten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Blur()</title>
</head><body>

<p>links das Bild in seiner normalen Form, rechts mit Blur()-Filter:</p>

<p><img src="filter_blur.jpg" width="91" height="177" alt="Bild">
<img src="filter_blur.jpg" width="91" height="177" alt="Bild"
          style="filter:Blur(direction=45, strength=40)"></p>

<p style="width:100%; padding:20px; font-size:56px; color:red;
  filter:Blur(direction=235, strength=6)">Text mit Blur-Effekt</p>

</body></html>

Erläuterung:

Mit filter:Blur() können Sie einen Verwisch-Effekt definieren. Geeignet ist der Filter für Grafiken. Dieser Filter erwartet folgende Parameter:

Den Parameter add brauchen Sie nur anzugeben, wenn Sie add=0 notieren wollen. Dann erscheinen die Konturen der Grafik gar nicht mehr, und am Bildschirm erscheint nur noch die Verwischspur. Der Effekt wird dadurch sehr stark, die eigentliche Grafik ist oft nicht mehr zu erkennen.

direction steht für die Richtung, in die die Verwischspur führt. Es wirkt dann so, als ob die Grafik aus dieser Richtung kommt. Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270, 315:
0 bedeutet: Die Verwischspur zeigt nach oben.
45 bedeutet: Die Verwischspur zeigt nach oben rechts.
90 bedeutet: Die Verwischspur zeigt nach rechts.
135 bedeutet: Die Verwischspur zeigt nach unten rechts.
180 bedeutet: Die Verwischspur zeigt nach unten.
225 bedeutet: Die Verwischspur zeigt nach unten links.
270 bedeutet: Die Verwischspur zeigt nach links.
315 bedeutet: Die Verwischspur zeigt nach oben links.

strength steht für die Stärke des Verwisch-Effektes. 0 bedeutet keinen Verwisch-Effekt, jeder höhere Wert die Verwischspur in Pixeln. Beachten Sie jedoch, dass die Grafik innerhalb ihrer normalen Bildgröße dargestellt wird. Verwischspuren von Konturen, die sehr nah am Bildrand sind, werden nur bis zum Bildrand gezogen.

MS IE 4.0 filter:Chroma() (Transparenzfarbe)

Mit diesem Filter können Sie bei Grafiken eine Farbe als transparent definieren. Anders als bei Seite transparenten GIF-Grafiken werden jedoch auch alle anderen Farben der Grafik betroffen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Chroma()</title>
</head><body>

<p>links das Bild in seiner normalen Form, rechts mit Chroma()-Filter:</p>

<p><img src="filter_chroma.gif" width="106" height="109" alt="Bild">
<img src="filter_chroma.gif" style="filter:Chroma(color=#DDBB99)" width="106" height="109" alt="Bild"></p>

</body></html>

Erläuterung:

Mit filter:Chroma() können Sie eine Farbe in einer Grafik als transparent definieren. Der Filter erwartet folgenden Parameter:

color steht für eine Seite Farbangabe.

MS IE 4.0 filter:DropShadow() (Schattenwurf)

Dieser Filter bewirkt einen Schatteneffekt für alle Konturen eines Elements. Bei Text bilden die Zeichen die Konturen, bei Grafiken sollten Sie nur solche für den Filter benutzen, die eindeutige Konturen haben, z.B. Cliparts.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:DropShadow()</title>
</head><body>

<div style="width:100%; font-size:85px; color:blue; filter:DropShadow(color=#C0C0C0, offx=3, offy=3)">
Text mit Schattenwurf</div>

</body></html>

Erläuterung:

Mit filter:DropShadow() können Sie einen Schattenwurf erzwingen. Der Filter erwartet folgende Parameter:

color steht für die Farbe, die als Schatten definiert werden soll (siehe Seite Farbangaben).

offx steht für die Anzahl an horizontalen Pixel für den Schatteneffekt. Positive Zahlen bewirken einen Schatteneffekt rechts, negative einen Schatteneffekt links.

offy steht für die Anzahl an vertikalen Pixel für den Schatteneffekt. Positive Zahlen bewirken einen Schatteneffekt unten, negative mit Minuszeichen davor einen Schatteneffekt oben.

Den Parameter positive sollten Sie nur angeben, wenn Sie nur für die transparenten Pixel einer Grafik (siehe Seite transparente GIF-Grafiken) einen Schatteneffekt erzwingen wollen. Dazu sollte dieser Parameter den Wert 1 erhalten.

Beachten Sie:

Für verlaufende Schatten können Sie den Filter für nach unten filter:Shadow() verwenden.

MS IE 4.0 filter:FlipH() (Horizontal spiegeln)

Mit diesem Filter können Sie eine Grafik horizontal spiegelverkehrt anzeigen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:FlipH()</title>
</head><body>

<p>Links die normale Grafik, rechts mit FlipH()-Filter:</p>

<p><img src="filter_flip.jpg" width="200" height="140" alt="Bild">
<img src="filter_flip.jpg" style="filter:FlipH()" width="200" height="140" alt="Bild"></p>

</body></html>

Erläuterung:

Mit filter:FlipH() bewirken Sie die horizontale Spiegelung. Geeignet ist der Filter für Grafiken in HTML. Dieser Filter erwartet keine Parameter.

MS IE 4.0 filter:FlipV() (Vertikal spiegeln)

Mit diesem Filter können Sie eine Grafik vertikal spiegelverkehrt anzeigen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:FlipV()</title>
</head><body>

<p>Links die normale Grafik, rechts mit FlipV()-Filter:</p>

<p><img src="filter_flip.jpg" width="200" height="140" alt="Bild">
<img src="filter_flip.jpg" style="filter:FlipV()" width="200" height="140" alt="Bild"></p>

</body></html>

Erläuterung:

Mit filter:FlipV() bewirken Sie die vertikale Spiegelung. Geeignet ist der Filter für Grafiken in HTML. Dieser Filter erwartet keine Parameter.

MS IE 4.0 filter:Glow() (Glühender Rand)

Dieser Filter bewirkt einen "Heiligenschein" um ein Text- oder Grafikobjekt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Glow()</title>
</head><body>

<div style="width:100%; font-size:85px; color:#9999CC;
    filter:Glow(color=#000000, strength=12)">Gl&uuml;hender Text</div>

</body></html>

Erläuterung:

Mit filter:Glow() können Sie einen glühenden Rand definieren. Dieser Filter erwartet folgende Parameter:

color steht für die Farbe, die als Glühfarbe definiert werden soll (siehe Seite Farbangaben).

strength steht für die Stärke der Wirkung. Erlaubt sind Werte zwischen 1 und 255, praxisgerecht sind aber in den meisten Fällen nur Werte zwischen 1 und etwa 20.

MS IE 4.0 filter:Gray() (Graustufen)

Dieser Filter entfernt alle Farbinformationen aus einem Element oder einer Grafik und wandelt sie stattdessen in Graustufen um.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Gray()</title>
</head><body>

<p>Links die normale Grafik, rechts mit Gray()-Filter:</p>

<p><img src="filter_gray.jpg" width="200" height="240" alt="Bild">
<img src="filter_gray.jpg" style="filter:Gray()" width="200" height="240" alt="Bild"></p>

</body></html>

Erläuterung:

Mit filter:Gray() können Sie Graustufen erzwingen. Geeignet ist der Filter besonders für Grafiken. Dieser Filter erwartet keine Parameter.

MS IE 4.0 filter:Invert() (Invertieren)

Dieser Filter invertiert farbige Elemente und Grafiken. Alle Farben werden bei der Anzeige in ihre Komplementärfarben verwandelt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Invert()</title>
</head><body>

<p>Links die normale Grafik, rechts mit Invert()-Filter:</p>

<p><img src="filter_invert.jpg" width="200" height="200" alt="Bild">
<img src="filter_invert.jpg" style="filter:Invert()" width="200" height="200" alt="Bild"></p>

</body></html>

Erläuterung:

Mit filter:Invert() können Sie invertieren. Geeignet ist der Filter besonders für Grafiken. Dieser Filter erwartet keine Parameter.

MS IE 4.0 filter:Mask() (Transparenzmaske)

Dieser Filter ist für Seite transparente GIF-Grafiken gedacht. Er ersetzt alle transparenten Pixel der Grafik durch eine gewünschte Farbe und stattdessen alle nicht-transparenten Pixel der Grafik durch die Farbe, die in der Grafik als transparent definiert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Mask()</title>
</head><body>

<p>Links die normale Grafik, rechts mit Mask()-Filter:</p>

<p><img src="filter_mask.gif" width="100" height="94" alt="Bild">
<img src="filter_mask.gif" style="filter:Mask(color=#000066)" width="100" height="94" alt="Bild"></p>

</body></html>

Erläuterung:

Mit filter:Mask() können Sie für eine transparente GIF-Grafik eine Transparenzmaske definieren. Der Filter erwartet folgenden Parameter:

color steht für eine Seite Farbangabe.

MS IE 4.0 filter:Shadow() (Schatten)

Dieser Filter bewirkt einen Verlaufsschatten um die Konturen eines Elements.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Shadow()</title>
</head><body>

<div style="width:100%; font-size:64px; color:magenta; filter:Shadow(color=#000000, direction=45)">
Text mit Schatten</div>

</body></html>

Erläuterung:

Mit filter:Shadow() können Sie einen Schatten erzeugen. Dieser Filter erwartet folgende Parameter:

color steht für eine Schattenfarbe (siehe Seite Farbangaben).

direction steht für die Richtung, in die der Schatteneffekt führt. Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270, 315:
0 bedeutet: Der Schatteneffekt zeigt nach oben.
45 bedeutet: Der Schatteneffekt zeigt nach oben rechts.
90 bedeutet: Der Schatteneffekt zeigt nach rechts.
135 bedeutet: Der Schatteneffekt zeigt nach unten rechts.
180 bedeutet: Der Schatteneffekt zeigt nach unten.
225 bedeutet: Der Schatteneffekt zeigt nach unten links.
270 bedeutet: Der Schatteneffekt zeigt nach links.
315 bedeutet: Der Schatteneffekt zeigt nach oben links.

MS IE 4.0 filter:Wave() (Wellenartige Störung)

Dieser Filter bewirkt eine wellenförmige Verzerrung des betroffenen Text- oder Grafikobjekts.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:Wave()</title>
</head><body>

<div style="width:100%; font-size:123px; font-weight:900; color:#FFCCFF;
 filter:Wave(freq=5, lightstrength=20, phase=50, strength=6) Shadow(color=#808080, direction=135);">
 Wave-Text</div>

</body></html>

Erläuterung:

Mit filter:Wave() können Sie eine wellenartige Verzerrung definieren. Dieser Filter erwartet folgende Parameter:

freq steht für die Wellenfrequenz. Je höher der Wert, desto kleiner die Wellen, je niedriger, desto größer die einzelnen Wellen. Praxisnah sind etwa Werte zwischen 5 und 50.

lightstrength steht für die Stärke des Lichts im Welleneffekt in Prozent. Werte zwischen 0 und 100.

phase steht für den Beginn der Sinus-Wellenphase in Prozent. Werte zwischen 0 und 100. Bei 0 beginnt der Welleneffekt normal, bei 25 etwa beginnt er bei 90°.

strength steht für die Stärke des gesamten Effekts. Praxisnah sind z.B. Werte zwischen 1 und 10.

add steht für die Anzeige der Originalgrafik. add=1 bewirkt, dass die Originalgrafik zu der verzerrten Grafik hinzugefügt wird. Bei add=0 wird die Originalgrafik nicht hinzugefügt.

MS IE 4.0 filter:XRay() (Fotonegativ-Effekt)

Dieser Filter konvertiert alle Farben eines Elements oder einer Grafik in Graustufen und bewirkt einen Effekt wie ein Fotonegativ.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>filter:XRay()</title>
</head><body>

<p>Links die normale Grafik, rechts mit XRay()-Filter:</p>

<p><img src="filter_x_ray.jpg" width="276" height="189" alt="">
<img src="filter_x_ray.jpg" style="filter:XRay()" width="276" height="189" alt=""></p>

</body></html>

Erläuterung:

Mit filter:XRay() können Sie den Fotonegativ-Effekt erzwingen. Dieser Filter erwartet keine Parameter.

nach oben
weiter | Seite Einführung in CSS-basierte Layouts
zurück | Seite Anzeigefenster
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets (CSS) Teil von CSS-Eigenschaften

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-basierte Layouts

SELFHTML

CSS-basierte Layouts
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML und Kapitel CSS-Eigenschaften.
Dieser Abschnitt beschreibt die praktische Anwendung von CSS-Eigenschaften zur Seitengestaltung ohne Verwendung von Tabellen.
Der Abschnitt besteht aus folgenden Seiten:

Seite Einführung in CSS-basierte Layouts
Seite Mehrspaltige CSS-basierte Layouts
Seite Fixe Bereiche mit CSS-basierten Layouts
Seite CSS-basierte Navigationsleisten
Seite CSS-Browserweichen zum Ausschliessen älterer Browser

nach oben

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-basierte Layouts / Einführung

SELFHTML

Einführung in CSS-basierte Layouts
Informationsseite

nach unten Trennung von Inhalt und Layout
nach unten Das Box-Modell als Grundlage CSS-basierter Layouts
nach unten Warum erst jetzt? Browserbedingte Hürden

nach unten

Trennung von Inhalt und Layout

Gratulation! Wenn Sie bis hierhin vorgedrungen sind, haben Sie vermutlich ausreichend Kenntnisse der in diesem Kapitel behandelten Kapitel CSS-Eigenschaften erworben und möchten diese nun auch konsequent für die Gestaltung Ihrer Seiten nutzen. Vielleicht haben Sie aber auch nur die Nachteile einer Fensteraufteilung in Seite Frames erkannt oder möchten Seite Tabellen lediglich der Auszeichnung tabellarischer Daten vorbehalten? In jedem Fall sollten Sie zumindest über Grundlagenwissen bezüglich Stylesheets verfügen.

Ein CSS-basiertes Layout setzt das CSS zugrunde liegende Konzept der Trennung des Inhalts und der Struktur einer Seite von deren Präsentation um. Layoutänderungen sind dadurch bereits mit nur geringer Modifikation der CSS-Definitionen zu realisieren und sofern diese in separaten Dateien notiert sind, können Sie das Layout für das gesamte Projekt hierüber einheitlich bestimmen.

Im Gegensatz zu Tabellen-Layouts wird die Seitenaufteilung nicht mehr ausschließlich per HTML-Auszeichnung festgelegt. Sie können die Anordnung der Elemente auf einer Seite über CSS flexibel definieren und sind nicht auf eine unflexible Einteilung in Zeilen und Spalten beschränkt. CSS-basierte Layouts eröffnen Ihnen Möglichkeiten der Seitengestaltung, die mit Tabellen nicht umsetzbar sind.

Durch eine Seite sinnvolle Auswahl der Elemente und schlüssige Anordnung der Inhalte mit nachfolgender Formatierung und Positionierung per CSS wird die Zugänglichkeit verbessert. Die Erstellung von barrierefreien Seiten gewinnt zunehmend an Bedeutung. Diese Entwicklung wird nicht zuletzt von der Gesetzgebung (betreffend Internetpräsenzen, die unter staatlicher Aufsicht stehen) gefördert. Darüber hinaus erleichtern CSS-Layouts die Pflege der Seiten und reduzieren den Umfang des HTML-Quelltextes und damit die Ladezeiten deutlich.

Das Box-Modell als Grundlage CSS-basierter Layouts

Versuchen Sie bitte nicht, die Struktur eines Tabellen-Layouts mit ineinander verschachtelten Seite div-Elementen nachzubauen. Sie können jedem Block-Element die erforderlichen CSS-Eigenschaften Seite float, Seite width und Seite margin zuweisen und benötigen div-Tags lediglich zur Gruppierung von Elementen.

Die CSS-Eigenschaft Seite position sollten Sie für CSS-Layouts nur im Ausnahmefall verwenden und die hierdurch mögliche Überlagerung von Elementen bei Schriftvergrößerung sowie die Platzierung außerhalb des sichtbaren Bereichs in kleinen Browserfenstern berücksichtigen.

Ein Block-Element nimmt die gesamte zur Verfügung stehende Breite ein, es sei denn, eine geringere Breite wird über width zugewiesen. Wenn in diesem Fall noch ausreichend Platz zur Verfügung steht, können weitere Elemente über float daneben platziert werden. Um dabei einen Textumfluss des Elements zu vermeiden, kann es über margin auf Abstand gehalten werden. Im Gegensatz zu den Zellen in einer Tabellenspalte stellt jedes Block-Element hier eine von den nebenstehenden Elementen unabhängige Seite Box dar, wie dieses Beispiel verdeutlicht:

<div style="float:left; width:5em; border:2px solid gray;">links floatende Box</div>
<div style="border:2px solid blue;">nachfolgende Box</div>
links floatende Box
nachfolgende Box

Erläuterung:

Für die linke Box ist float und width definiert. Der Textinhalt der nachfolgenden Box steht daneben, die Box selbst nimmt in diesem Beispiel die gesamte Fensterbreite ein. Auch die Höhe einer Box richtet sich - sofern sie nicht explizit zugewiesen ist - nach ihrem Inhalt und wird nicht von der Höhe einer nebenstehend platzieren Box beeinflusst. Eine Spaltenaufteilung mit durchgängigen Hintergrundfarben, die in Tabellen-Layouts leicht zu realisieren ist, lässt sich daher in einem CSS-Layout nur umständlich optisch simulieren. Stellen Sie sich die Frage, ob eine klassische Spaltenaufteilung wirklich erforderlich ist oder geringe Anpassungen des Layouts an die begrenzten Möglichkeiten des Box-Modells sinnvoller wären.

Beachten Sie:

Alle Beispiele in diesem Kapitel verwenden eine Seite Dokumenttyp-Deklarationen für standardkonformen Modus als Voraussetzung für eine korrekte Darstellung des Box-Modells und einiger nicht vermeidbarer Anpassungen für den Internet Explorer.

Warum erst jetzt? Browserbedingte Hürden

CSS Level 1 wurde bereits 1996 als eine unmittelbare Ergänzungssprache (vorwiegend) für HTML entwickelt. CSS Level 2, der weiterentwickelte aktuelle Standard, wurde bereits 1998 veröffentlicht und ermöglicht anspruchsvolle CSS-Layouts und Seitenaufteilungen, die zuvor nur durch Verwendung von Frames oder Tabellen möglich waren. Leider können selbst manche aktuellen Browser die neu hinzugekommenen Gestaltungsmöglichkeiten von CSS Level 2 noch immer nicht 100%ig umsetzen. Besonders der Internet Explorer weist diesbezüglich große Lücken und Abweichungen vom Standard auf. So verwendet er selbst in der aktuellen Version 7 im abwärtskompatiblen Seite Quirks-Modus ein anderes Box-Modell, das bei CSS-Layouts oft gesondert zu berücksichtigen ist.

Noch ältere Browser wie Netscape 4 setzen nur einen Bruchteil von CSS Level 2 korrekt um. Da diese aber weitgehend nicht mehr genutzt werden, gehen inzwischen immer mehr Autoren dazu über, fortschrittliche CSS-Layouts in Verbindung mit CSS-Browserweichen zum Seite Ausschließen veralteter Browser zu verwenden. Dies ist auch in den Beispielen dieses Kapitels der Fall!

nach oben
weiter | Seite Mehrspaltige CSS-basierte Layouts
zurück | Seite Filter (nur Microsoft)
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-basierte Layouts

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-basierte Layouts / Mehrspaltige Layouts

SELFHTML

Mehrspaltige CSS-basierte Layouts
Informationsseite

nach unten Zweispaltiges Layout
nach unten Dreispaltiges Layout
nach unten Mehrspaltiges Layout mit Kopf- und Fußzeile
nach unten Gestaltungstipps

nach unten

Zweispaltiges Layout

Die klassische Anwendung eines zweispaltigen Layouts ist die Anordnung einer Navigation neben dem Inhaltsbereich. Hierzu wird im HTML-Quelltext zunächst der Inhalt logisch ausgezeichnet und die Struktur vorgegeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's ohne CSS aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout - Struktur</title>
</head>
<body>

<ul id="Navigation">
  <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
  <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
  <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
  <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
  <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>

<div id="Inhalt">
  <h1>CSS-basierte Layouts</h1>
  <h2>HTML-Struktur ohne CSS</h2>
  <p>Diese Seite enthält zunächst nur die Struktur und den Inhalt.
     Das Aussehen wird erst im folgenden Beispiel über CSS definiert.</p>
  <p>Dennoch ist diese Seite schon nutzbar und wird vom Browser
     entsprechend dessen Voreinstellungen bereits sinnvoll angezeigt.</p>
</div>

</body>
</html>

Erläuterung:

Für die Navigationspunkte wird hier eine Seite Aufzählungsliste verwendet, deren Seite ID Navigation später als Selektor für die CSS-Definitionen dient. Die Elemente des Inhaltsbereichs werden mit einem Seite div-Element gruppiert, das ebenfalls eine ID (Inhalt) erhält und die spätere Formatierung des Inhaltsbereichs und seiner Elemente über CSS erleichtert.

Beachten Sie:

Im HTML-Quelltext sind Elemente, die Sie über die CSS-Eigenschaft float ausrichten wollen, zuerst zu notieren.
Verwenden Sie eine Seite Dokumenttyp-Deklaration für den standardkonformen Modus, um Anzeigefehler zu vermeiden.

Um die Navigation links neben dem Inhaltsbereich zu platzieren, aber auch die Aufzählungspunkte der Listenelemente zu entfernen und die Präsentation der übrigen Elemente selbst zu definieren und nicht den Voreinstellungen der Browser zu überlassen, wird das folgende Seite Stylesheet in die HTML-Datei eingebunden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's mit CSS aus

body {
  color: black; background-color: white;
  font-size: 100.01%;
  font-family: Helvetica,Arial,sans-serif;
  margin: 0; padding: 1em;
}

ul#Navigation {
  font-size: 0.91em;
  float: left; width: 22em;
  margin: 0; padding: 0;
  border: 1px dashed silver;
}
ul#Navigation li {
  list-style: none;
  margin: 0; padding: 0.5em;
}
ul#Navigation a {
  display: block;
  padding: 0.2em;
  font-weight: bold;
}
ul#Navigation a:link {
  color: black; background-color: #eee;
}
ul#Navigation a:visited {
  color: #666; background-color: #eee;
}
ul#Navigation a:hover {
  color: black; background-color: white;
}
ul#Navigation a:active {
  color: white; background-color: gray;
}

div#Inhalt {
  margin-left: 22em;
  padding: 0 1em;
  border: 1px dashed silver;
  min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}
div#Inhalt h1 {
  font-size: 1.5em;
  margin: 0 0 1em;
}
div#Inhalt h2 {
  font-size: 1.2em;
  margin: 0 0 1em;
}
div#Inhalt p {
  font-size:1em;
  margin: 1em 0;
}

Erläuterung:

Die Navigation wird hier links "gefloatet" und ihre Breite in em passend zum längsten Linktext angegeben, wodurch sie sich an eine Schriftgradänderung anpassen kann (dies ist übrigens auch bei Grafiken möglich, wenn für <img> die Breite und/oder Höhe in em wie im Beispiel zum Seite Layout mit fixem Bereich angegeben wird). Für den Inhaltsbereich wird über margin-left ein Seite Abstand zum linken Seitenrand definiert, der etwas größer als die Breite der Navigation ist. Die Seite relative Einheit em richtet sich hier nach der Seite Schriftgröße (font-size), die für die Navigation geringer angegeben ist.

Dem Inhaltsbereich ist keine Breite zugewiesen, wodurch eine Anpassung der Seite an die Fenstergröße ermöglicht und auch der Seite Box-Modell-Fehler des Internet Explorer kompensiert wird. Für moderne Browser, die min-width unterstützen, ist für den Inhaltsbereich eine Mindestbreite angegeben, um einen Umbruch der Überschrift zu vermeiden und sicherzustellen, dass der Inhaltsbereich in sehr kleinen Fenstern nicht zu schmal wird.

Beachten Sie:

Um Anzeigefehler - besonders bei einer Schriftgradänderung im Internet Explorer - zu vermeiden, ist bei der Verwendung von em die Schriftgröße für das äußerste Element in der Einheit % anzugeben und hierbei exakt 100% zu vermeiden. In diesen Beispielen wird daher body {font-size:100.01%} notiert.

Lässt man den Abstand weg, würde der Inhalt die Navigation umfließen, d.h. unterhalb der Navigation am Seitenrand fortgesetzt. Dies ermöglicht eine optimale Ausnutzung des Anzeigebereichs, wie dieses Anzeigebeispiel einer rechts-floatenden Navigation zeigt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

/* Folgende Modifikationen sind am vorherigen Beispiel vorgenommen: */

  ul#Navigation {
    font-size: 0.91em;
    float: right; width: 22em;
    margin: 0 0 1em 1em; padding: 0;
    border: 1px dashed silver;
  }

  div#Inhalt { }  /* keine Formatierungen (das div kann wegfallen) */
  body {
    min-width: 20em; /* Mindestbreite (der Navigation) verhindert Anzeigefehler in modernen Browsern */
  }

Erläuterung:

Die Navigation wird hier per float:right platziert, was sich besonders gut für einen Textumfluss eignet und über margin-left und margin-bottom auf Abstand zum Inhaltsbereich gehalten, für den selbst kein Abstand mehr definiert ist.

Um die Breite des Inhaltsbereichs zu begrenzen und zu lange Textzeilen zu vermeiden, werden im folgenden Beispiel alle Elemente der Seite in einem zusätzlichen div-Element gruppiert, welches eine feste Breite von 760px aufweist und zentriert wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout mit fester Breite</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0.5em;
    border: 2px ridge silver;
  }

  ul#Navigation {
    font-size: 0.91em;
    float: left; width: 22em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Inhalt {
    margin-left: 22em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 1em;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0 0 1em;
  }
  div#Inhalt p {
    font-size:1em;
    margin: 1em 0;
  }
</style>
</head>
<body>

<div id="Seite">
  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Inhalt">
    <h1>CSS-basierte Layouts</h1>
    <h2>Seite mit fester Breite</h2>
    <p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p>
    <p>Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal
       gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>
  </div>
</div>

</body>
</html>

Erläuterung:

Das zusätzliche Block-Element <div id="Seite"> ist erforderlich, um der Seite eine feste Breite zu geben und sie zu zentrieren; der Rahmen ist nur zur Verdeutlichung angeführt und kann weggelassen werden. Für <body> ist die CSS-Eigenschaft text-align:center angegeben (und für div#Seite wieder zurückgesetzt), da der Internet Explorer ab Version 6 im standardkonformen Modus zwar Block-Elemente über margin:auto zentriert, allerdings text-align fälschlich auch auf Block-Elemente anwendet.

Die Breite ist mit 760px angegeben, damit die Seite auch in ein 800px breites Fenster mit vertikalem Scrollbalken passt und auf einer DIN-A-4-Seite bei normalen Randeinstellungen vollständig ausgedruckt werden kann. Hierzu wurde auch auf einen seitlichen Randabstand verzichtet.

Dreispaltiges Layout

Häufig sieht man ein Layout mit einer linksseitigen Navigation, einem mittleren Inhaltsbereich mit flexibler Breite und rechts einer Spalte für zusätzliche Informationen. Dieses CSS-basiert umzusetzen erfordert lediglich eine weitere Box mit der CSS-Eigenschaft float:right und einer geeigneten Angabe zu width.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0; padding: 0;
    border: 1px dashed silver; background-color: #eee;
  }
  div#Info strong {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
    margin: 0 12em 0 16em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 0.5em;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }
</style>
</head>
<body>

  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Info">
    <strong>Info-Box</strong>
    <p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
       im Quelltext vor dem im Fluss belassenem Inhaltsbereich zu notieren.</p>
    <p>Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
       die Angabe einer Breite verzichtet werden und die Seite den ihr zur
       Verfügung stehenden Raum ausnutzen.</p>
    <p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
       Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
       durch das falsche Box-Modell des Internet Explorer auszugleichen.</p>
  </div>

  <div id="Inhalt">
    <h1>CSS-basierte Layouts</h1>
    <h2>3-spaltiges Layout</h2>
    <p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,
       um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
       die Schriftgröße der Navigation und Info-Box ist etwas verringert,
       um den relativ geringen Breiten Rechnung zu tragen.</p>
    <p>Nur für die äußeren Boxen ist eine Breite und float angegeben.
       Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
       können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>
    <p>Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
       gehalten und passt sich flexibel an die Fensterbreite an.</p>
  </div>

</body>
</html>

Erläuterung:

Um mehrere Boxen über float nebeneinander zu setzen, kann bei einer Box - hier dem Inhaltsbereich - auf die Definition von float und width verzichtet werden. Hierdurch nimmt sie den gesamten zur Verfügung stehenden Raum ein. Dies erfordert allerdings, die floatenden Boxen vorher in den Quelltext zu setzen, damit sie zuerst ihre definierte Breite reservieren können.

Damit der Inhaltsbereich die nebenstehenden Boxen nicht umfließt, wird er über margin-left und margin-right eingegrenzt. Die Werte für margin beziehen sich auf die Seitenränder und entsprechen den Breiten der nebenstehenden aus dem Fluss genommenen Boxen zuzüglich einem hierzu gewünschten Abstand. Falls Sie sich wundern, warum der Wert von margin hier gleich oder sogar kleiner als der Wert von width für die nebenstehenden Boxen ist und sich trotzdem ein Abstand ergibt: die verwendete Einheit em ist bei Längenangaben abhängig von der Schriftgröße des Elements - diese ist für den Inhaltsbereich größer definiert.
Über eine geeignete Angabe zu min-width kann in modernen Browsern bei zu schmalen Fenstern ein Umbruch der Boxen verhindert werden.

Anhand des Beispiels sehen Sie auch, dass sich Boxen nicht gegenseitig in ihrer Höhe beeinflussen. Dies muss kein Nachteil sein, sondern kann bewusst zur Gestaltung der Seite eingesetzt werden, erfordert allerdings ein Umdenken und die Abkehr vom althergebrachten "Spaltendenken" bei Tabellen-Layouts.

Beachten Sie:

Die für ein Element in em angegebene Schriftgröße wird an darin enthaltene Elemente vererbt.

In diesem Beispiel ist für div#Info die Schriftgröße mit font-size:0.9em angegeben. Der für div#Info strong erhöhte Wert font-size:1.33em ergibt nach Anwendung auf die zuvor notierte Größe von 0.9em als Resultat 1.197em (0.9 mal 1.33), was in etwa der für div#Inhalt h2 mit font-size:1.2em angegebenen Schriftgröße entspricht.

Berücksichtigen Sie die Vererbung bei allen verschachtelten Elementen, denen Sie eine von 1em oder 100% abweichende Schriftgröße mittels relativer Einheiten zuweisen. Sie können sich den Umrechnungsaufwand ersparen, wenn Sie nur für die äußersten oder nur für die innersten Elemente eine Schriftgröße angeben. Im ersten Fall wird die Schriftgröße an alle enthaltenen Elemente vererbt (wobei der Internet Explorer allerdings mit der Vererbung auf Tabellenzellen Probleme hat) und im zweiten Fall ist die Basis für die Schriftgröße der innersten Elemente dieselbe.

Die Problematik der Vererbung stellt sich nicht, wenn Sie die Einheit px für Schriftgrößen verwenden. Allerdings haben Sie dann auch nicht mehr die Möglichkeit, die Längenangaben passend zur Schriftgröße in em anzugeben, damit sich das Layout an den jeweils eingestellten Schriftgrad anpasst. Darüber hinaus unterbindet der Einsatz von px die Anpassung von Schriftgrößen im Internet Explorer, was eine Barriere für Benutzer darstellen kann.

Mehrspaltiges Layout mit Kopf- und Fußzeile

Viele Layouts werden von einem "Header" und einem "Footer" umschlossen, wobei in der Kopfzeile die Seitenüberschrift oder ein grafischer Banner platziert wird und die Fußzeile eine Copyright-Angabe oder allgemeine Links (z.B. 'nach oben', 'Impressum' oder 'Sitemap') enthält. Dies hat für CSS-Layouts auch praktische Vorteile:

Die Kopfzeile wird am Anfang des Quelltextes notiert und als Seitenüberschrift mit h1 ausgezeichnet, was in den folgenden Boxen die hierarchisch korrekte Verwendung von Überschriften zweiten Grades ermöglicht. Über die CSS-Eigenschaft clear der Fußzeile wird der Umfluss (float) der seitlich platzierten Elemente aufgehoben, was z.B. bei Verwendung eines Seitenhintergrundes erforderlich sein kann, wie das nach unten letzte Beispiel zeigen wird.
Außerdem beinhalten diese beiden Beispiele einen Workaround für den Internet Explorer bis Version 6 gegen die um 3px erweiterte Einrückung des Textes neben der Navigation.

Das folgende Beispiel erweitert das vorangegangene dreispaltige Layout um eine Kopf- und Fußzeile.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

  h1 {
    font-size: 1.5em;
    margin: 0 0 0.7em; padding: 0.3em;
    text-align: center;
    background-color: #fed;
    border: 2px ridge silver;
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed silver;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #eee; border: 1px dashed silver;
  }
  div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 1px solid silver;
  }
</style>
</head>
<body>

  <h1>CSS-basierte Layouts</h1>

  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Info">
    <h2>Info-Box</h2>
    <p>Hatten Sie sich im letzten Beispiel gewundert,
       warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
       Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
       und erst in diesem die Hauptüberschrift notiert war,
       wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
    <p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
       wodurch auch dieses semantische Problem gelöst ist.</p>
  </div>

  <div id="Inhalt">
    <h2>3-spaltiges Layout mit Kopf- und Fußzeile</h2>
    <p>Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.</p>
    <p>Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet
       und kann genauso gut wie ein <div> über CSS formatiert
       - hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
       Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
       oder über <img> eingebunden werden.</p>
    <p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
       Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
       und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
       experimentieren Sie mit den Größenangaben, Farben und Rändern
       und fügen Sie z.B. individuelle grafische Elemente ein.</p>
  </div>

  <p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
     den Elementenfluss wieder her.</p>

</body>
</html>

Erläuterung:

Über die sogenannte Seite Star-HTML-Browserweiche wird dem Inhaltsbereich nur für den Internet Explorer bis Version 6 eine Höhe zugewiesen. Die viel zu geringe Höhenangabe wird von diesem Browser erweitert und bewirkt, dass der Internet Explorer den neben der "gefloateten" Navigation stehenden Text nicht mehr wie bei den vorherigen Beispielen um weitere drei Pixel einrückt.

Sie können dieses Beispiel individuell anpassen und erweitern, um ein dreispaltiges Layout zu erstellen, das sich flexibel an Schriftgradänderungen und unterschiedliche Fenstergrößen anpasst. Diese Flexibilität bewirkt allerdings, dass sich die Elemente in zu schmalen Fenstern oder bei zu großer Schrifteinstellung untereinander platzieren und verhindert auch eine optische Aufteilung in Spalten mit unterschiedlicher Hintergrundfarbe, wie Sie es bei herkömmlichen Tabellen-Layouts oft sehen.

Das letzte Beispiel stellt Ihnen ein zweispaltiges Layout mit festen Breiten zur Verfügung, in dem die links platzierte Navigation optisch durch einen anders farbigen Hintergrund vom Inhaltsbereich abgegrenzt wird. Der Kopfzeile ist hier zur Demonstration als Hintergrundbild das SELFHTML-Logo zugewiesen, von welchem bei normalem Schriftgrad ein passender Ausschnitt dargestellt wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout mit grafischer Spaltenaufteilung</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0;
    background: #ffffe0 url(hintergrund.gif) repeat-y;
    border: 2px ridge silver;
  }

  h1 {
    font-size: 1.5em;
    margin: 0; padding: 0.3em;
    text-align: center;
    background: #fed url(../../../src/logo.gif) no-repeat 100% 45%;
    border-bottom: 1px solid silver;
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 200px;
    margin: 0 0 1.2em; padding: 0;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: white;
  }
  ul#Navigation a:visited {
    color: #666; background-color: white;
  }
  ul#Navigation a:hover {
    color: black; background-color: #eee;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }

  div#Inhalt {
    margin: 0 0 1em 220px;
    padding: 0 1em;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
    margin-bottom: 0;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    color: navy;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    clear: both;
    font-size: 0.83em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed;
    border-top: 1px solid silver;
  }
</style>
</head>
<body>

<div id="Seite">
  <h1>CSS-basierte Layouts</h1>

  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>

  <div id="Inhalt">
    <h2>2-spaltiges Layout mit Hintergrundgrafik</h2>
    <p>In diesem Beispiel wird eine Hintergrundgrafik
       zur optischen Trennung der Spalten verwendet.</p>
    <p>Dies erfordert leider, dass die Breite der links stehenden Navigation
       passend zur Hintergrundgrafik in 'px' angegeben wird.
       Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
       nicht anpassen.</p>
    <p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
       des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
       Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
       kein Hintergrund angegeben.<br>
       Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
       und ist unabhängig von deren Höhe.</p>
    <p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
       damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
  </div>

  <p id="Fusszeile">Diese Fußzeile stellt innerhalb des umschließenden DIVs
     den Elementenfluss wieder her.</p>
</div>

</body>
</html>

Erläuterung:

Da nebeneinander platzierte Elemente sich nicht in ihrer Höhe beeinflussen, wurden der Hintergrund der linken Spalte und die Trennlinie (zur Demonstration hier als Zierrahmen) über dieses Hintergrundbild realisiert:

[ Hintergrundbild]

Es ist nur wenige Pixel hoch und so breit wie die linke Navigationsbox einschließlich des Abstands zum rechten Inhaltsbereich. Als Hintergrundbild für das umschließende div#Seite definiert, wird es in der y-Achse wiederholt und passt sich so dessen Gesamthöhe an. Zusätzlich ist gelbe Farbe als Hintergrund angegeben und füllt den rechten Inhaltsbereich aus.

Diese optische Aufteilung der Seite erfordert eine feste Breitenangabe in px für die Navigation. Achten Sie daher darauf, dass die enthaltenen Linktexte auch bei Schriftvergrößerung noch in die Box passen oder ermöglichen Sie Textumbrüche durch Leerzeichen wie in diesem Beispiel im Menüpunkt "CSS-Browserweichen".

Durch Kombination der hier aufgeführten Beispiele sollte es Ihnen nun auch möglich sein, ein solches Layout mit durchgehendem Spaltenhintergrund ohne Begrenzung der Seitenbreite oder mit drei Spalten zu erstellen. Falls Sie mehr als drei Spalten benötigen, definieren Sie für die weiteren Boxen die CSS-Eigenschaften float und width. Sie können dabei stets die zuletzt im Quelltext notierte Box im Elementenfluss belassen und dadurch auf die Angabe einer Breite verzichten. Hierdurch vermeiden Sie auch Anzeigefehler und müssen den Seite Box-Modell-Fehler des Internet Explorer nicht über eine Seite CSS-Browserweiche korrigieren.

Gestaltungstipps

Während sich mit Tabellen erstellte Layouts oft durch gleich hohe, über unterschiedliche Hintergrundfarben voneinander abgesetzte Spalten auszeichnen, können CSS-basierte Layouts dazu verleiten, jede Seite Box mit einem durchgehenden, gestrichelten oder gar gepunkteten Rahmen abzugrenzen. Auch wenn dies bei den hier aufgeführten Beispielen zu Demonstrationszwecken der Fall ist: seien Sie kreativ und nutzen Sie die CSS-Eigenschaft border für Seite Rahmen sinnvoll und sparsam.

Wenn Sie Bereiche mit Rahmen, einfachen Linien oder über eine Hintergrundfarbe abgrenzen, setzen Sie für den enthaltenen Text auch einen passenden Seite Innenabstand.

Nutzen Sie die erweiterten Möglichkeiten, die ein CSS-basiertes Layout im Gegensatz zu Tabellen bietet und denken Sie nicht in Spalten, sondern lassen Sie ein Umfließen von Elementen zu. Tolerieren Sie auch, wenn sich floatende Elemente bei zu schmalen Fenstern untereinander anordnen - das kann benutzerfreundlicher sein, als einen Text horizontal zu scrollen. Andernfalls können Sie ein umschließendes Element mit ausreichender Breite wie im nach oben obigen Beispiel verwenden, um unterschiedliche Anordnungen zu verhindern oder einen Spalteneindruck zu erzeugen.

Bringen Sie Farbe in Ihre Seiten - aber übertreiben Sie es nicht. Wählen Sie zueinander passende, ähnliche Farbtöne. Darüber hinaus können Sie Akzente in Komplementärfarben setzen. Achten Sie aber bitte auf einen ausreichenden Farb- und Helligkeitskontrast, damit Ihre Texte auch ohne Anstrengung gelesen werden können. Hierzu eignet sich dunkle Schrift vor hellem Hintergrund am besten. Setzen Sie bitte auch nicht voraus, dass in jedem Browser Schwarz als Schriftfarbe und Weiß als Hintergrundfarbe voreingestellt ist. Wenn Sie den Hintergrund definieren, vergessen Sie auf keinen Fall, die Seite Vordergrundfarben und Seite Linkfarben anzugeben, da Sie hier nicht immer mit einheitlichen Voreinstellungen rechnen können. Hierbei ist es für Ihre Besucher hilfreich, wenn besuchte Links von unbesuchten zu unterscheiden sind.

nach oben
weiter | Seite Fixe Bereiche mit CSS-basierten Layouts
zurück | Seite Einführung in CSS-basierte Layouts
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-basierte Layouts

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-basierte Layouts / Fixe Bereiche

SELFHTML

Fixe Bereiche mit CSS-basierten Layouts
Informationsseite

nach unten Sinnvoller Einsatz fixer Bereiche
nach unten Layout mit fixem Bereich definieren
nach unten Workaround für den Internet Explorer

nach unten

Sinnvoller Einsatz fixer Bereiche

Sie möchten Ihr Logo oder Ihre Navigation ständig auf Ihrer Seite anzeigen, auch wenn der Seiteninhalt ein Scrollen erfordert? Die Nachteile des Einsatzes von Kapitel Frames bzw. Seite eingebetteten Frames hierzu haben Sie sicherlich schon entdeckt. Eine andere Möglichkeit wäre, die Seitenelemente passend für eine bestimmte Fenstergröße zu positionieren und hierin einen scrollbaren Bereich über die CSS-Eigenschaft Seite overflow für den Inhalt zur Verfügung zu stellen, was aber sehr unflexibel ist und seiteninterne Scrollbalken bedingt.

Über die CSS-Eigenschaft Seite position können Sie Seitenelemente an einer bestimmten Position im Fenster fixieren, sodass sie nicht mit dem übrigen Seiteninhalt wegscrollen. Dies ist jedoch nur eingeschränkt sinnvoll: Ein am oberen Fensterrand fixiertes Element schränkt den zur Verfügung stehenden scrollbaren Bereich ein. Der Inhalt kann weniger gut übersehen werden und übermäßiges Scrollen erfordern, was die Nutzbarkeit der Seite verschlechtert. Hinzu können Probleme mit seiteninternen Ankern kommen. Stellen Sie sich daher die Frage, ob z.B. ein ständig sichtbares Logo derart informativ ist, dass diese Einschränkungen gerechtfertigt sind.

Sinnvoll kann dagegen eine am linken (oder rechten) Fensterrand fixierte vertikale Navigationsleiste sein. Der zur Seitenanzeige genutzte Fensterbereich ist durch die Bedienelemente meist wesentlich breiter als hoch. Hinzu kommt, dass eine Beschränkung der Zeilenbreite sich positiv auf die Lesbarkeit des Textes auswirken kann und der freie Bereich unter einer seitlich platzierten Navigation meist ohnehin nicht genutzt wird. Ein ständig sichtbares Menü kann die Benutzerfreundlichkeit erhöhen und bei längeren Texten "nach oben"-Links entbehrlich machen.

Die fixierte Positionierung ist aber selbst hierfür nicht problemlos einzusetzen. Sie eignet sich nur für relativ kurze Navigationsleisten, die selbst in sehr kleinen Browserfenstern vollständig angezeigt werden können, da sie ja wie gewünscht nicht mit der Seite scrollen. Außerdem erfordert dies einen umständlichen nach unten Workaround für den Internet Explorer, der diese Technik erst ab Version 7 unterstützt.

Layout mit fixem Bereich definieren

Das folgende Beispiel demonstriert die Anwendung der CSS-Eigenschaft position:fixed, die über eine Seite spezielle CSS-Browserweiche ausschließlich modernen Browsern zugänglich gemacht wird. Für andere Browser ist position:absolute angegeben, sodass die Ausgangsposition der Elemente auch in veralteten Browsern wie Netscape 4 zwar gleich ist, der nicht fixierbare Bereich jedoch normal mit der Seite scrollt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fixierte Navigation nur für moderne Browser</title>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
    min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
  }
  p {
    margin: 3em 0 0 3em;  /* Positionierung des 'zurueck'-Links */
  }
  p  a {
    color:black;  /* Farbe des 'zurueck'-Links */
  }

  html {
    padding: 0;
  }
  body {
    margin: 0; padding: 0;
  }

  #fixiert {
    position: absolute;
    top: 2.8em; left: 2em;
    width: 18em;
    background-color: white;
    border: 1px solid silver;
  }
  html>body #fixiert {  /* nur fuer moderne Browser! */
    position: fixed;
  }
  #fixiert img {
    height: 6.8em; float: right;
  }

  #Inhalt {
    margin-left: 22em; padding: 0 1em;
    border-left: 2px ridge gray; border-top: 2px ridge gray;
  }
  * #Inhalt {  /* versteckt vor Netscape 4 */
    background-color: #ffffe0;
  }

  #Inhalt h2 {
    font-size: 1.2em;
    margin: 2em 5% 2em;
    color: maroon;
    border-bottom: 1px solid silver;
  }
  #Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }
  #Inhalt #Fusszeile {
    font-size: 0.9em;
    margin: 200em 0 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 1px solid silver;
  }

  h1 {
    font-size: 1.5em;
    margin: 0.5em; padding: 0.3em;
    text-align: center;
    background-color: #fed;
    border: 2px ridge gray;
  }

  #Navigation {
    font-size: 0.83em;
    margin: 0 0 1.2em; padding: 0;
  }
  #Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #eee;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #eee;
  }
  ul#Navigation a:hover {
    color: black; background-color: white;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }
</style>
</head>
<body>

<div id="Scrollbereich">  <!-- erst fuer den folgenden Workaround benoetigt -->
  <h1>Fixierte Navigation</h1>

  <div id="Inhalt">
    <h2>Beispiel nur für moderne Browser</h2>
    <p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
       und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
       Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
       diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
    <p>Für dieses Beispiel ist das &quot;mehrspaltige Layout mit Kopf-
       und Fußzeile&quot; der vorherigen Seite etwas modifiziert worden.
       Es passt sich der Fenster- und Schriftgröße an und sogar
       das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
       mit einer Schriftvergrößerung.</p>
    <p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
       wenn die Höhe des Browserfensters sehr stark verringert
       und/oder die Schriftgröße heraufgesetzt wird!</p>

    <p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
  </div>
</div>

<div id="fixiert">  <!-- verhindert auch Anzeigefehler einer fixierten ul -->
  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
    <li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
    <li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
    <li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
    <li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
  </ul>
  <img src="../../../src/logo.gif" alt="SELFHTML">
  <p><a href="../fixbereiche.htm#definieren">zurück</a></p>
</div>

</body>
</html>

Erläuterung:

Dieses Beispiel zeigt, wie simpel eine fixierte Navigation zu realisieren wäre, wenn der Internet Explorer den bereits 1998 veröffentlichten Standard CSS 2 nicht erst acht Jahre später ab Version 7 hinreichend unterstützen würde. Andererseits interpretiert der Internet Explorer schon seit Version 5.0 eine CSS-Eigenschaft, die für CSS3 zu erwarten ist und einen nach unten Workaround ermöglicht.

Dieses Beispiel demonstriert drei Vorteile sowohl fixierter als auch absoluter Positionierung:

Es sind Überlagerungen (hier des Kopfbereichs mit der Überschrift) möglich, die bei entsprechender Umsicht für gestalterische Zwecke sinnvoll eingesetzt werden können.
Später im Quelltext notierte Elemente (hier der Navigationsbereich) können dennoch vor anderen Elementen im Fenster platziert werden, wodurch der Inhaltsbereich von textbasierten Anwendungen wie Screenreadern oder Suchmaschinen günstiger zu erreichen ist.
Absolute Positionierung ist für ältere Browser weniger problematisch als auf der CSS-Eigenschaft float basierende Layouts.

Beachten Sie:

Fixierte oder absolute Positionierung ist nicht in jedem Fall sinnvoll einzusetzen und kann die zuvor bei den Seite mehrspaltigen CSS-basierten Layouts eingesetzte Eigenschaft float nicht in allen Belangen ersetzen.

Fixiert positionierte Elemente sind auch dann nicht scrollbar, wenn sie durch kleinere Fenstergröße oder größeren Schriftgrad nicht mehr in den Anzeigebereich passen. Diese Art der Positionierung eignet sich daher nur für Elemente, die relativ wenig Platz benötigen. So wäre es doch sehr ungünstig, wenn bei einer umfangreicheren Navigation ausgerechnet der oft zuletzt angegebene Link zum Impressum außerhalb des Anzeigebereiches unerreichbar positioniert werden würde.

Workaround für den Internet Explorer

Da der Internet Explorer bis zur Version 6 der einzige aktuelle (grafische) Browser ist, der position:fixed nicht unterstützt, reicht ein Workaround für diesen Browser, um diese CSS-Eigenschaft praxistauglich einzusetzen. Hierzu sind die folgenden Anweisungen zusätzlich im <head>-Bereich der HTML-Datei notiert:

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!--[if lt IE 7]><style type="text/css">
  @media screen {
    html, body {
      height: 100%; overflow-y: hidden;
    }
    #Scrollbereich {
      height: 100%; width: 100%; overflow: auto;
    }
    #Inhalt {
      position: static;
    }
  }
</style><![endif]-->

Erläuterung:

Um diese (noch) ungültigen CSS-Angaben nur dem Internet Explorer 5 und 6 zugänglich zu machen, werden sie über einen Seite conditional comment in der HTML-Datei eingebunden. Sie können die CSS-Definitionen in diesem <style>-Bereich auch mit @import auslagern oder das <link>-Element hierzu verwenden.

Zunächst wird für den Anzeigebereich eine Höhe von 100% definiert und über die erst für CSS 3 vorgesehene Eigenschaft overflow-y:hidden ein (doppelter) vertikaler Scrollbalken verhindert. Im HTML-Quelltext wurden die zu scrollenden Elemente bereits in einem div#Scrollbereich gruppiert, das nun den gesamten Anzeigebereich ausfüllen soll und über overflow:auto die Scrollfunktion übernimmt. Der hierin enthaltene Inhaltsbereich ist explizit position:static zu definieren, auch wenn dies eigentlich dem Initialisierungswert entspricht.
Das div#fixiert mit der Navigation ist im HTML-Quelltext außerhalb des nun scrollbaren Elementes notiert und (für den Internet Explorer bis zur Version 6) bereits absolut positioniert, wodurch es vom Scrollen ausgeschlossen wird und auf diese alternative Weise am Bildschirm fixiert ist.

Beachten Sie:

Wichtig ist, dass Sie diesen Workaround (über @media screen) ausschließlich für die Bildschirmdarstellung einsetzen, da Scrollbalken im Ausdruck funktionslos wären.

nach oben
weiter | Seite CSS-basierte Navigationsleisten
zurück | Seite Mehrspaltige CSS-basierte Layouts
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-basierte Layouts

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten

SELFHTML

CSS-basierte Navigationsleisten
Informationsseite

nach unten Navigationsleiste definieren
nach unten Vertikale Formatierung mit Überschriften
nach unten Horizontale Formatierung
nach unten Mehrere Navigationsebenen
nach unten Dynamische CSS-Navigation für moderne Browser

nach unten

Navigationsleiste definieren

In den vorangegangenen Beispielen wurde für die Navigationsleiste eine Seite Aufzählungsliste verwendet. Hiermit haben Sie nicht nur ein strukturelles Element, das dem Sinn einer Navigation, nämlich der Auflistung von Verweisen, recht gut entspricht, sondern auch gleich drei verschachtelte Elemente, die Sie über CSS formatieren können: <ul>, <li> und <a>.

Um eine einheitliche Darstellung zu erreichen, sind zunächst die unterschiedlichen Voreinstellungen der Browser für Listen zu überschreiben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleisten</title>
<style type="text/css">
  body, a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
  }

  ul#Navigation {
    margin: 0; padding: 0;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0;
  }

</style>
</head>
<body>
  <h1>Navigationsleiste ...</h1>

  <ul id="Navigation">
    <li><a href="nav_definieren.htm">Beispiel 1</a></li>
    <li><a href="nav_formatieren.htm">Beispiel 2</a></li>
    <li><a href="nav_rollover.htm">Beispiel 3</a></li>
  </ul>

</body>
</html>

Erläuterung:

Die Abstände werden für <ul> und <li> auf 0 gesetzt und das Aufzählungszeichen für <li> wird über list-style:none beseitigt. So erhalten Sie eine Darstellung der Links ohne erkennbare Listenformatierung, aufgrund der blockbildenden Eigenschaft der Listenpunkte jedoch untereinander angeordnet.

Im folgenden Beispiel werden nun die Abstände neu bestimmt, eine Breite für die Liste festgelegt sowie Rahmen und Farben hinzugefügt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

  ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0.2em;
    border: 1px solid gray;
    background-color: #eee;
  }

  ul#Navigation a {
    text-decoration: none; font-weight: bold;
    color: maroon; background-color: #ccc;
  }
  ul#Navigation a:hover {
    color: white; background-color: gray;
  }

Erläuterung:

Die Zuweisung von Rahmen und Hintergrundfarben macht hier die Struktur sichtbar. Solche komplexen Listen-Formatierungen erfordern für den Internet Explorer (besonders für ältere Versionen) leider nicht selten Korrekturen über eine Seite spezielle CSS-Browserweiche; in diesen Beispielen wird hierzu der Seite "Star-HTML-Hack" für ältere Versionen und später auch der Seite "Star-Plus-HTML-Hack" für den IE 7 verwendet.

Auch dem a-Element wurde eine Hintergrundfarbe zugewiesen und diese (sowie dazu passend die Schriftfarbe) über die Seite Pseudoklasse :hover geändert. Hierdurch ergibt sich ein Rollover-Effekt, der so einfacher als mit JavaScript erzeugt werden kann. Es fehlt allerdings noch das typische Balken-Aussehen, da <a> als Inline-Element nur den für seinen Inhalt erforderlichen Raum einnimmt.

Um den Linkbereich auf das ganze li-Element auszuweiten und typische Rollover-Balken zu erhalten, werden die Links mit display:block definiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

  ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation a {
    display:block;
    padding: 0.2em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a {  /* Breitenangaben nur fuer IE */
    width: 100%;
    w\idth: 8.8em;
  }
  ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }

Erläuterung:

Leider benötigt der Internet Explorer bis zur Version 6 abgesehen von display:block noch eine Breitenangabe zur Ausdehnung des Linkbereichs. Diese ist für den IE 6 im Seite standardkonformen Modus und frühere Versionen entsprechend des verwendeten Box-Modells unterschiedlich angegeben.

Rahmen und Innenabstand von <li> sind hier dem Link zugewiesen, damit der Rollover-Effekt über den gesamten Hintergrund des Balkens geht. Über unterschiedliche Rahmenfarben ist hier auch ein räumlicher Effekt hinzugekommen.

Vertikale Formatierung mit Überschriften

Eine größere Anzahl von Menüpunkten in einer vertikal dargestellten Navigation ist aufgeteilt in Rubriken mit Zwischenüberschriften übersichtlicher. Hierzu werden im folgenden Beispiel h2-Elemente in die Liste eingefügt und ihnen gemeinsam mit den Links zunächst dieselben CSS-Eigenschaften zugewiesen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit Überschriften</title>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.2em 0.8em 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
    display:block;
    padding: 0.2em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  ul#Navigation h2 {
    font-size: 1em;
    margin: 1.1em 0 0;
    border-color: gray;
    color: black; background-color: #eee;
  }

</style>
</head>
<body>
  <h1 id="Beispiel">Navigationsleiste mit Überschriften</h1>

  <ul id="Navigation">
    <li><h2>Rubrik 1</h2></li>
    <li><a href="#Beispiel">Seite 1</a></li>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a></li>

    <li><h2>Rubrik 2</h2></li>
    <li><span>aktuelle Seite</span></li>
    <li><a href="#Beispiel">Seite 5</a></li>
    <li><a href="#Beispiel">Seite 6</a></li>

    <li><h2>Rubrik 3</h2></li>
    <li><a href="#Beispiel">Seite 7</a></li>
    <li><a href="#Beispiel">Seite 8</a></li>
    <li><a href="#Beispiel">Seite 9</a></li>
  </ul>

</body>
</html>

Erläuterung:

Da Überschriften von den Browsern meist größer und mit voreingestellten Außenabständen dargestellt werden, sind diese Eigenschaften für <h2> explizit gesetzt. Hierbei ist für margin-top ein größerer Abstand gewählt, um die Rubriken optisch voneinander zu trennen. Hervorgehoben werden die Überschriften hier farblich.

Neu in diesem Beispiel hinzugekommen ist auch, dass die aktuelle Seite nicht verlinkt wird. Dies erleichtert die Benutzbarkeit, da der Standort erkennbar ist und nicht mit einem (in diesem Fall ja nutzlosen) Link verwechselt werden kann. Hierzu wird der aktuelle Menüpunkt als <span> ausgezeichnet, dem dieselben CSS-Eigenschaften wie Verweisen zugewiesen werden, wenn diese mit der Maus überfahren werden; Sie können ihn - ausgehend von der Basisformatierung - auch noch deutlicher hervorheben.

Horizontale Formatierung

Sie können eine Navigationsleiste mit wenigen Menüpunkten auch horizontal anordnen. Hierfür existieren zwei verschiedene Möglichkeiten mit unterschiedlichen Vor- und Nachteilen. Die einfachere Möglichkeit ist, die li-Elemente per display:inline darzustellen. Dies ermöglicht auch deren Zentrierung über eine auf das Eltern-Element angewandte Eigenschafts-/Wertkombination von text-align:center.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizontale Navigationsleiste zentriert</title>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  ul#Navigation {
    margin: 0; padding: 0.8em;
    text-align: center;
    border: 1px solid black;
    background-color: silver;
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation a, ul#Navigation span {
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }

</style>
</head>
<body>
  <h1 id="Beispiel">Horizontale Navigationsleiste zentriert</h1>

  <ul id="Navigation">
    <li><a href="#Beispiel">Seite&nbsp;1</a></li>
    <li><a href="#Beispiel">Seite&nbsp;2</a></li>
    <li><a href="#Beispiel">Seite&nbsp;3</a></li>
    <li><span>aktuelle&nbsp;Seite</span></li>
    <li><a href="#Beispiel">Seite&nbsp;5</a></li>
    <li><a href="#Beispiel">Seite&nbsp;6</a></li>
  </ul>

</body>
</html>

Erläuterung:

Da inline angezeigten Elementen keine Breite zugewiesen werden kann, richtet sich diese nach dem enthaltenen Text (die für den Internet Explorer angegebene Breite von nur 1em dient zur Fehlerkorrektur in Version 5.0). Nutzen Sie diese Formatierungs-Möglichkeit, wenn die Menüpunkte unterschiedlich breit dargestellt werden bzw. nur soviel Raum wie ihr Inhalt einnehmen sollen.

Einen Nachteil hat diese Methode jedoch: Bei einem Umbruch der Navigationsleiste in zu kleinen Browserfenstern kommt es zu Überlagerungen. Dieser Effekt kann zwar auch bewusst zu gestalterischen Zwecken eingesetzt werden, verschlechtert allerdings die Nutzbarkeit. Achten Sie darauf, in den Menütexten keine oder nur geschützte Leerzeichen (&nbsp;) zu verwenden, damit bei einem Umbruch der Menüpunkt nicht geteilt wird.

Einheitliche Breiten der Menüpunkte unabhängig von deren Inhalten können Sie in einer horizontalen Navigationsleiste angeben, wenn Sie die CSS-Eigenschaft float verwenden. Sie können diese entweder <li> oder den hierin enthaltenen Elementen zuweisen, wobei dann li {display:inline} zu definieren ist. Letzteres ist aus verschiedenen Gründen günstiger.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizontale Navigationsleiste mit gleichen Breiten</title>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  ul#Navigation {
    margin: 0; padding: 0.8em;
    text-align: center;
    border: 1px solid black;
    background-color: silver;
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
  }

  ul#Navigation a, ul#Navigation span {
    float: left; width: 6em;
    margin: 0.4em; padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* Korrektur fuer IE 5.x */
    width: 8em;
    w\idth: 6em;
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  ul#Navigation div {
     clear: left;
  }

</style>
</head>
<body>
  <h1 id="Beispiel">Horizontale Navigationsleiste mit gleichen Breiten</h1>

  <ul id="Navigation">
    <li><a href="#Beispiel">Seite&nbsp;1</a></li>
    <li><a href="#Beispiel">Seite&nbsp;2</a></li>
    <li><a href="#Beispiel">Seite&nbsp;3</a></li>
    <li><span>aktuelle&nbsp;Seite</span></li>
    <li><a href="#Beispiel">Seite&nbsp;5</a><div></div></li>
  </ul>

</body>
</html>

Erläuterung:

Auch in diesem Beispiel wird display:inline für die li-Elemente benötigt, um Zeilenumbrüche zu verhindern. Da die enthaltenen Menüpunkte über float Eigenschaften von Block-Elementen erhalten, können ihnen auch eine Breite (width) und Außenabstände (margin) zugewiesen werden, ferner kommt es bei einem Umbruch nicht mehr zu Überlagerungen. Um den Elementfluss wieder herzustellen und in diesem Beispiel die Menüpunkte mit Hintergrund und Rahmen der Liste zu umschließen, ist ein Element mit der CSS-Eigenschaft clear innerhalb der Liste erforderlich. Hierzu wird ein leeres div-Element ohne semantische Bedeutung verwendet. Beim Internet Explorer funktioniert dies allerdings nur, solange kein Umbruch der Navigationsleiste erfolgt.

Sie können der Navigationsleiste ul#Navigation auch eine passende Breite zuweisen, um in zu kleinen Browserfenstern statt eines Umbruchs Scrollbalken anzubieten. Gemäß CSS 2.1 können Sie float hier auch problemlos ohne Angabe einer Breite verwenden, um Überlagerungen bei einem Umbruch zu verhindern.

Mehrere Navigationsebenen

Eine Navigation, die wie in nach oben obigem Beispiel mit Zwischenüberschriften versehen ist, wird in vielen Fällen keine sequenzielle Auflistung von Links enthalten, sondern eher verschiedenen Navigationsebenen entsprechen. Die Überschriften stellen in diesem Fall die Hauptmenüpunkte dar und können selbst auch mit Übersichtsseiten für die jeweilige Rubrik verlinkt sein. Eine verschachtelte Liste eignet sich zur logischen Abbildung dieser Struktur jedoch besser.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit mehreren Ebenen</title>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation li ul {
    margin: 0 0 0 1em; padding: 0;
  }
  ul#Navigation li ul li {
    margin: 0.1em 0;
  }
  * html ul#Navigation li ul li {  /* Korrektur fuer IE 5.x */
    margin-left: 1em;
    ma\rgin-left: 0;
  }

  ul#Navigation a {
    display:block;
    padding: 0.2em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a {
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
  }
  * html ul#Navigation li ul li a {
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 7.8em;  /* Breitenangabe fuer IE 6 */
  }
  ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }

</style>
</head>
<body>
  <h1 id="Beispiel">Mehrere Navigationsebenen</h1>

  <ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>
    <li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
        <li><a href="#Beispiel">Seite 2c</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">Seite 3</a></li>
    <li><a href="#Beispiel">Seite 4</a></li>
  </ul>

</body>
</html>

Erläuterung:

In das zweite <li>-Element ist hier eine weitere Liste eingefügt, da <ul> selbst keine anderen Elemente als <li> enthalten darf.

Über die Nachkommen-Selektoren ul#Navigation li ul und ul#Navigation li ul li werden die CSS-Eigenschaften für die so verschachtelte Liste dahingehend geändert, dass die Menüpunkte dieser zweiten Ebene eingerückt und entsprechend schmaler sind und einen geringeren Abstand zueinander sowie zum dazugehörigen Menüpunkt der ersten Ebene aufweisen. Es sind natürlich auch andere CSS-Formatierungen möglich, um diese Struktur zu visualisieren.

Selbst ohne CSS wird die Struktur von verschachtelten Listen über die Browser-Voreinstellungen sehr gut deutlich, wie Beispiel-Seite dieses Beispiel zeigt.

Eine verschachtelte Liste lässt sich auch geteilt darstellen, sodass die Menüpunkte der ersten Ebene horizontal in einer Reihe und die der zweiten Ebene vertikal passend darunter angeordnet werden. Dazu ist es erforderlich, die li-Elemente der ersten Ebene per float nebeneinander anzuordnen und ihnen position:relative zuzuweisen, damit deren Positionen als Bezug für die über position:absolute aus dem Elementenfluss genommenen Listenpunkte der zweiten Ebene genutzt werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Geteilte Navigationsleisten</title>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    width: 8.6em;
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.7em; left: -0.4em;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

</style>
</head>
<body>
  <h1 id="Beispiel">Geteilte Navigationsleisten</h1>

  <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

    <li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Seite 3</a></li>

    <li><a id="aktuell" href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Seite 5</a></li>
  </ul><div></div></div>

</body>
</html>

Erläuterung:

Bei dieser Navigationsleiste muss ein Umbruch verhindert werden, um die richtige Reihenfolge der angezeigten Menüpunkte zu gewährleisten. Dazu ist eine ausreichend große Breite anzugeben, die allerdings nicht der Liste selbst zugewiesen werden sollte, da dies in einigen Browsern zu einer fehlerhaften Darstellung führt. Daher wird ein zusätzliches Element (div#Rahmen) um die Navigationsleiste gesetzt, welches auch die Definitionen für den Rahmen und die Hintergrundfarbe übernimmt. Als Element ohne semantische Bedeutung hat es ohne CSS keine Auswirkung auf die Darstellung. Da die Listenpunkte über float aus dem Elementfluss genommen sind, muss ein zusätzliches, innerhalb des Rahmens notiertes Element mit der CSS-Eigenschaft clear den Elementfluss wieder herstellen. Auch hierzu wird ein leeres div-Element (<div></div>) verwendet.

Die verschachtelten Listen der zweiten Ebene werden über den Nachkommen-Selektor ul#Navigation li ul absolut unterhalb des dazugehörigen Listenpunktes positioniert. Für die Listenpunkte der zweiten Ebene wird über den Nachkommen-Selektor ul#Navigation li ul li die Eigenschaft float aufgehoben.

In diesem Beispiel ist ein Menüpunkt der zweiten Ebene als aktuelle Seite nicht verlinkt, sondern mit dem Element <span> ausgezeichnet und über CSS gesondert formatiert. Um auch den dazugehörigen Menüpunkt der ersten Ebene über CSS hervorheben zu können, wird für diesen die id="aktuell" angegeben.

Moderne Browser ermöglichen auch, die Navigation der zweiten Ebene dynamisch einzublenden. Hierzu ist nur eine kleine Ergänzung im Stylesheet erforderlich:

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

  /* Erweiterung zur dynamischen Ein-/Ausblendung */
  ul#Navigation li>ul {
    display: none; top: 1.6em;
  }
  ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
  }

  /* Workaround fuer den IE 7 */
  *:first-child+html ul#Navigation ul {
    background-color:silver; padding-bottom:0.4em;
  }

Erläuterung:

Über den Kind-Selektor li>ul werden die Listen der zweiten Ebene zunächst mittels display:none ausgeblendet. Beim Überfahren mit der Maus werden sie über den Selektor ul#Navigation li:hover>ul mit display:block wieder angezeigt; ebenso die aktuell ausgewählte Liste über den komplexen Selektor ul#Navigation li>a#aktuell+ul, der nur die ul-Liste anspricht, die auf den Link a#aktuell folgt, welcher Kindelement eines li in der ul#Navigation ist. Damit die beim Überfahren mit der Maus eingeblendete Liste beim Ansteuern ihres ersten Menüpunktes nicht wieder ausgeblendet wird, muss sie etwas höher positioniert werden, sodass sie den Listenpunkt der ersten Ebene überlappt. Wenn Sie genau hinsehen, bemerken Sie hier einen etwas geringeren Abstand als den über margin für die verschachtelten Listenpunkte angegebenen.

Damit dieses Beispiel auch bei mehreren Untermenüpunkten im Internet Explorer 7 noch funktioniert, ist für den IE 7 eine Hintergrundfarbe für die Unternavigation angegeben.

Beachten Sie:

Dieses Beispiel funktioniert in modernen Browsern zufriedenstellend. Im Internet Explorer bis zur Version 6 und älteren Browsern sind rein auf CSS basierende dynamische Navigationsleisten grundsätzlich nicht möglich, da sie den Zustand :hover nur auf Links - genauer a-Elemente mit dem Attribut href - anwenden können und diese nicht ineinander verschachtelt werden dürfen. Da diese Browser aber auch die hier verwendeten Selektoren nicht interpretieren können, stellen sie dieses Beispiel wie das vorherige ohne Dynamik dar.

Dynamische CSS-Navigation für moderne Browser

Dieses Beispiel basiert ebenfalls auf der nach oben obigen geteilt dargestellten verschachtelten Liste. Die Unternavigation ist hier ausgeblendet und wird allen modernen Browsern beim Überfahren mit der Maus angezeigt. Sofern Sie die Menüpunkte der ersten Ebene mit Übersichtsseiten für ältere Browser verlinken und damit auch einer Tastatursteuerung zugänglich machen, ist eine solche dynamische Navigationsleiste auch praktisch einsetzbar. Die Übersichtsseiten könnten neben Verweisen auf die Menüpunkte der weiteren Ebenen auch eine Einleitung zur jeweiligen Rubrik enthalten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

Erläuterung:

Über den einfachen Nachkommen-Selektor ul#Navigation li ul wird die Unternavigation hier für alle nicht ganz veralteten Browser ausgeblendet. Eingeblendet wird sie dagegen nur noch von modernen Browsern beim Überfahren mit der Maus. Benutzer älterer oder diesbezüglich fehlerhafter Browser können jedoch über den Umweg der in der Hauptnavigation verlinkten Übersichtsseiten auch zum Ziel gelangen.

Die Breite der Menüpunkte ist hier nicht für <li> angegeben, sondern für die hierin enthaltenen Elemente. Diese nach CSS 2.1 gültige Möglichkeit, float ohne Angabe von width zu verwenden, beseitigt auch die fehlerhafte Darstellung des nach oben vorherigen Beispiels in Opera 7. Für den Internet Explorer 5.x ist die Breite nach dem fehlerhaften Microsoft-Boxmodell angegeben.

Beachten Sie:

Testen Sie eine solche Navigationsleiste in möglichst vielen Browsern, da die hier verwendete Methode einige Browser überfordern könnte!

Um ein dynamisches Einblenden der Unternavigation auch im Internet Explorer 5 und 6 und anderen Browsern ohne ausreichende CSS-Implementierung zu ermöglichen, bleibt Ihnen derzeit nur eine Realisierung über Kapitel JavaScript. Es ist jedoch sinnvoll, dies mit der hier gezeigten Möglichkeit zu kombinieren.

Die folgende, im <head>-Bereich des nach oben obigen Beispiels eingefügte JavaScript-Funktion ermöglicht die dynamische Anzeige der Unternavigation auch dem Internet Explorer 5 und 6.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

Erläuterung:

Um unerwünschte Auswirkungen in anderen Browsern zu vermeiden, wird das Script über eine Browserweiche nur dem Internet Explorer (auch der Macintosh-Version) zugänglich gemacht. Die Funktion hoverIE wird vom Script mittels Seite Event-Handler onload aufgerufen und erfordert keine weiteren Änderungen am HTML-Quelltext. Das Script durchsucht die in der ul id="Navigation" enthaltenen Knoten und blendet die hierin verschachtelten ul-Elemente über die CSS-Eigenschaft display beim Überfahren mit der Maus (onmouseover) ein bzw. beim Verlassen (onmouseout) wieder aus. Dies erfordert beim Internet Explorer jedoch zusätzlich eine Änderung der Seite Hintergrundfarbe (backgroundColor).

Um den Internet Explorer 7 von diesem Script auszuschließen, können Sie es in einen Seite conditional comment (<!--[if lt IE 7]> <![endif]-->) setzen, wenn Sie auf die Unterstützung der alten Macintosh-Version verzichten.

Beachten Sie:

Da die Interpretation von JavaScript nicht grundsätzlich vorausgesetzt werden kann und auch andere ältere Browser die Unternavigation nicht darstellen, ist diese Funktionalität nur ergänzend nutzbar und Sie sollten auf die beim nach oben obigen Beispiel angesprochene alternative Verlinkung nicht verzichten.

nach oben
weiter | Seite CSS-Browserweichen zum Ausschließen älterer Browser
zurück | Seite Fixe Bereiche mit CSS-basierten Layouts
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-basierte Layouts

© 2007 Seite Impressum


SELFHTML: Stylesheets / CSS-basierte Layouts / Browserweichen

SELFHTML

CSS-Browserweichen zum Ausschließen älterer Browser
Informationsseite

nach unten Veraltete Browser ausschließen
nach unten Alternative CSS-Dateien für den Internet Explorer (Conditional Comments)
nach unten Spezielle Browserweichen (CSS-Hacks)
nach unten Attribut-Selektor
nach unten Kind-Selektor
nach unten Star-HTML-Hack
nach unten Star-Plus-HTML-Hack
nach unten Kommentar-Hack
nach unten Medienangabe
nach unten Element-spezifischer Selektor
nach unten Tan-Hack
nach unten Tantek-Hack

nach unten

Veraltete Browser ausschließen

Eine Seite mit sinnvoller HTML-Auszeichnung ist auch ohne CSS nutzbar, wie das Seite erste Beispiel-Layout gezeigt hat. Die Verwendung von CSS-Eigenschaften wie float, besonders in Kombination mit margin, kann in älteren Browsern wie dem Netscape 4 zu fehlerhafter Darstellung bis hin zur Unbenutzbarkeit einer Seite führen. Es ist daher ratsam, diese fortschrittlichen CSS-Definitionen nur moderneren Browsern zukommen zu lassen. Hierzu bietet sich logisch an, die CSS-Definitionen nicht wie in den Beispielen im Stylebereich jeder HTML-Datei zu notieren, sondern in einer separaten CSS-Datei auszulagern und diese über die neuere Methode Seite @import einzubinden. Über die Angabe eines Ausgabemediums wie z.B. all würde auch der Internet Explorer für Windows ausgeschlossen.

Sie können die CSS-Definitionen auch in zwei verschiedene Dateien aufteilen: eine für die einfachen Farb- und Schriftzuweisungen, die auch ältere Browser problemlos umsetzen können, und eine weitere für die Definition des Layouts. Erstere binden Sie - auch für ältere Browser - über das Seite link-Element ein. Dies hat außerdem den Vorteil, dass beim Laden der über @import eingebundenen zweiten CSS-Datei die unschöne kurzzeitige Anzeige der Seite ohne Style-Definitionen im Internet Explorer vermieden wird.

Bestimmte CSS-Definitionen machen ein weiteres Stylesheet für den Ausdruck erforderlich, z.B. wenn Sie eine helle Schriftfarbe für einen dunklen Bildschirm-Hintergrund angegeben haben. Diese CSS-Datei binden Sie - ebenfalls für alle Browser - über das link-Element mit einer Seite Medienangabe ein. Hierin können Sie auch bestimmte Bereiche wie z.B. die Navigation, die für den Ausdruck wenig geeignet sind, über display:none ausblenden.

Ein HTML-Dokument, in dem auf diese Art unterschiedliche CSS-Dateien eingebunden sind, sieht folgendermaßen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>CSS-basiertes Layout</title>

  <link rel="stylesheet" type="text/css" href="basis.css">
  <style type="text/css">
    @import url(modern.css);
    /* evtl. seitenspezifische CSS-Definitionen */
  </style>
  <link rel="stylesheet" type="text/css" media="print" href="druck.css">

</head>
<body>
  <!-- HTML-Quelltext -->
</body>
</html>

Beachten Sie:

Netscape 4 unterstützt auch bei Einbindung über das link-Element nur das Ausgabemedium screen; Sie können ihn über die Angabe anderer Ausgabemedien wie z.B. all ebenfalls ausschließen.
@import-Anweisungen sind stets vor weiteren CSS-Definitionen einzutragen.

Um CSS-Dateien für bestimmte Ausgabemedien nur modernen Browsern einschließlich dem Internet Explorer zur Verfügung zu stellen, binden Sie eine CSS-Datei mit dem entsprechenden media-Attribut über das link-Element ein und referenzieren hierin eine weitere CSS-Datei über @import. Einzelne CSS-Anweisungen können Sie auch in einer über @import eingebundenen CSS-Datei mit Seite Format-Definitionen für unterschiedliche Ausgabemedien versehen.

Alternative CSS-Dateien für den Internet Explorer (Conditional Comments)

Der Internet Explorer setzt zwar die für CSS-basierte Layouts erforderlichen Definitionen größtenteils um und muss nicht wie andere ältere Browser hiervon ausgeschlossen werden; die Umsetzung ist aber oft fehlerhaft oder unvollständig, sodass eine Korrektur oder alternative Definitionen erforderlich werden können. Eine Möglichkeit hierfür ist, zunächst die nach den Spezifikationen des W3C korrekten CSS-Anweisungen zu notieren und anschließend eine spezielle CSS-Datei nur für den Internet Explorer einzubinden. Erfreulicher Weise bietet Microsoft dazu mit den 'conditional comments' eine valide Lösung für den Internet Explorer für Windows (die Mac-Versionen sind ohnehin bezüglich der CSS-Umsetzung nicht vergleichbar). Hierbei handelt es sich um spezielle HTML-Kommentare mit einer Bedingung, die der Internet Explorer ab der Version 5 auswertet und hiervon abhängig den im Kommentar enthaltenen HTML-Code ausführt oder nicht. Für alle anderen Browser handelt es sich lediglich um Kommentare, deren Inhalt ignoriert wird.

Die folgenden Beispiele zeigen die Einbindung einer CSS-Datei für alle Browser, einer CSS-Datei nur für moderne Browser mit Ausnahme des Internet Explorer (auch der Version 7) und nachfolgend einige über conditional comments eingebundene CSS-Dateien:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>CSS-basiertes Layout</title>
  <link rel="stylesheet" type="text/css" href="basis.css">

  <style type="text/css">@import url(modern_ohne_ie.css) all;</style>

  <!--[if IE]>
    <style type="text/css">@import url(ie.css);</style>
  <![endif]-->

  <!--[if IE 6]>
    <style type="text/css">@import url(ie6.css);</style>
  <![endif]-->

  <!--[if lt IE 7]>
    <style type="text/css">@import url(ie5-6.css);</style>
  <![endif]-->

  <!--[if lte IE 5.5999]>
    <style type="text/css">@import url(ie55-.css);</style>
  <![endif]-->

  <!--[if gte IE 5.5]>
    <style type="text/css">@import url(ie55+.css);</style>
  <![endif]-->

</head>
<body>
  <!-- HTML-Quelltext -->
</body>
</html>

Erläuterung:

Wie Sie an den Beispielen sehen, können auch Versionsangaben gemacht werden, die der Internet Explorer mit seiner im Windows-System eingetragenen Versionsnummer vergleicht (wenn Sie zum Testen mehrere Browserversionen installiert haben, wird daher immer die Version des Betriebssystems verwendet, sofern die Windows-Registry nicht manipuliert ist).

Die in den conditional comments referenzierten CSS-Dateien werden von folgenden Versionen des Internet Explorer geladen:

[if IE]: alle Versionen (ab 5.0),
[if IE 6]: alle 6er-Versionen,
[if lt IE 7]: alle Version vor 7 (less-than = kleiner als),
[if lte IE 5.5999]: alle Version bis 5.5 (less-than or equal = kleiner oder gleich),
[if gte IE 5.5]: alle Version ab 5.5 (greater-than or equal = größer oder gleich).

In der Praxis ist meist nur eine Unterscheidung zwischen Versionen ab 6 und älteren erforderlich, da der Internet Explorer ab der Version 6 im standardkonformen Modus einige Fehler der Vorgänger nicht mehr macht und insbesondere das vom W3C spezifizierte Seite Box-Modell korrekt anwendet. Eine Differenzierung erübrigt sich meist ganz, wenn der Internet Explorer 6 in den abwärtskompatiblen Quirks-Modus versetzt wird, was auch ein beliebiger HTML-Kommentar (oder bei XHTML die Angabe der Seite XML-Deklaration) in der ersten Zeile des Quelltextes bewirkt, da dieser Browser den folgenden Doctype dann nicht mehr erkennt. Der Internet Explorer 7 erkennt zwar eine XML-Deklaration, wird jedoch weiterhin durch einen HTML-Kommentar in den Quirks-Modus versetzt. Sofern Sie XHTML verwenden und nur die Version 7 des Internet Explorer im standardkonformen Modus eine korrekte Darstellung erreicht, bietet sich der Einsatz der ohnehin empfohlenen XML-Deklaration an.

Sie sollten den Internet Explorer grundsätzlich nicht über die Seite Dokumenttyp-Weiche in den Quirks-Modus versetzen, da dies auch andere Browser negativ beeinflusst und z.B. Opera ab Version 7 das falsche Box-Modell von Microsoft übernehmen würde.

Spezielle Browserweichen (CSS-Hacks)

Oft sind es nur kleine Korrekturen, die für die einheitliche Umsetzung eines CSS-basierten Layouts erforderlich werden und meist reicht es, über eine Browserweiche (auch "Hack" genannt) den Internet Explorer von anderen Browsern zu unterscheiden, da erstgenannter viele CSS-Definitionen nicht standardkonform interpretiert. Browserweichen nutzen spezielle Selektoren oder Schreibweisen, die von Browsern unterschiedlich interpretiert bzw. teilweise übergangen werden. Das folgende Beispiel demonstriert einige ausgewählte Browserweichen:

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Browserweichen</title>
<style type="text/css">
  body {
    color: white; background: black;
    font-family: Helvetica, Arial, sans-serif;
  }
  p {
    padding: 0.2em;
  }

  #attribut {
    color: red;
  }
  p[id]#attribut {
    color: lime;
  }
  p[id] {
    border: 1px solid green;
  }

  #childselector {
    color: red;
  }
  html>body #childselector {
    color: lime;
  }

  #starhtml {
    color: lime;
  }
  * html #starhtml {
    color: red;
  }

  #starplushtml {
    color: lime;
  }
  *:first-child+html #starplushtml {
    color: red;
  }

  #comment {
    color: red;
  }
  #comment/* */ {
    color: lime;
  }

  #atmedia {
    color: red;
  }
  @media all {
    #atmedia {
      color: lime;
    }
  }

  #element {
    color: red;
  }
  p#element {
    color: lime;
  }

  #tanhack {
    color: lime;
  }
  * html #tanhack {
    color: red;
    c\olor: lime;
  }
</style>

<style type="text/css">
  #tantek {
    color: red;
  }
  #tantek {
    voice-family: "\"}\"";
    voice-family: inherit;
    color: lime;
  }
</style>
</head>
<body>
<h1>CSS-Browserweichen</h1>
<p>Die folgenden Beispiele werden standardkonform mit grüner Schrift
   im Rahmen angezeigt, ansonsten mit roter Schrift ohne Rahmen.</p>

<p id="attribut">Attribut-Selektor:
   wird vom Internet Explorer ignoriert und definiert hier alle Rahmen.</p>
<p id="childselector">Kind-Selektor:
   wird vom Internet Explorer ignoriert.</p>
<p id="starhtml">Star-HTML:
   wird fälschlich vom Internet Explorer interpretiert.</p>
<p id="starplushtml">Star-Plus-HTML:
   wird fälschlich vom Internet Explorer 7 interpretiert.</p>
<p id="comment">Selektor-Kommentar:
   wird vom Internet Explorer bis Version 5 für Windows und Mac ignoriert.</p>
<p id="atmedia">Medienangabe:
   wird vom Internet Explorer 4 für Windows und den Mac-Versionen ignoriert.</p>
<p id="element">Element-spezifischer Selektor:
   wird vom Netscape 4 ignoriert.</p>

<p id="tantek">Tantek-Hack:
   wird vom Internet Explorer erst ab Version 6 korrekt interpretiert<br>
   - im Netscape 4 kommt es hierdurch zu Fehlern im gesamten Style-Bereich!</p>
<p id="tanhack">Tan-Hack:
   beeinflusst nur den Internet Explorer vor Version 6<br>
   - eine Kombination des Star-HTML- und Tantek-Hacks für einzelne Definitionen.</p>

</body>
</html>

Erläuterung:

Attribut-Selektor:

p[id] {
  eigenschaft:wert;
}

Selektiert ein Element (hier <p>), welches ein id-Attribut mit beliebigem Attributwert aufweist - und damit alle hier angeführten Beispiele. Gleichbedeutend zur Angabe der #ID ist dies im Grunde überflüssig, erfüllt aber den Zweck, alle Internet Explorer für Windows bis Version 6 und Netscape 4 auszuschließen.

Kind-Selektor:

html>body #ID {
  eigenschaft:wert;
}

Selektiert ein Element mit der ID "ID", das sich innerhalb des Elements body befindet, welches wiederum ein direktes Kind-Element von html ist. Dies extra anzugeben wäre an sich überflüssig, es schließt aber ebenfalls alle Internet Explorer für Windows bis Version 6 und Netscape 4 aus. Achtung: Der Selektor body>#ID würde von älteren Versionen des Internet Explorer falsch interpretiert werden.

Star-HTML-Hack:

* html #ID {
  eigenschaft:wert;
}

Dies ist zwar ein valider, aber unsinniger Selektor, da html kein Elternelement hat (der Universalselektor * steht für ein beliebiges Element). Alle Internet Explorer für Windows bis Version 6 akzeptieren diese Notation jedoch und interpretieren die nachfolgenden Deklarationen. Dieser Selektor schließt also alle übrigen Browser einschließlich Netscape 4 aus.

Star-Plus-HTML-Hack:

*:first-child+html #ID {
  eigenschaft:wert;
}

Dies ist ebenso ein valider wie unsinniger Selektor, der nur vom Internet Explorer 7 (und vielleicht auch künftigen Versionen) akzeptiert wird. Der einfachere Selektor *+html würde leider auch vom Opera fälschlich berücksichtigt. Beachten Sie, dass Sie diesen Selektor nicht mit dem Star-HTML-Hack in einer Regel kombinieren können und ggfls. zwei Regeln notieren müssen, um alle Internet-Explorer anzusprechen.

Selektor-Kommentar:

#ID/* */ {
  eigenschaft:wert;
}

Ein CSS-Kommentar unmittelbar nach dem Selektor schließt den Internet Explorer 4 und 5 für Windows und Mac aus.

Medienangabe:

@media all {
  #ID {
    eigenschaft:wert;
  }
}

Diese Variante selektiert hier ein Element mit der ID "ID" für alle Seite Medientypen, wodurch ältere Browser ausgeschlossen werden: der Internet Explorer 4 für Windows und alle Mac-Versionen sowie Netscape 4.

Element-spezifischer Selektor:

p#ID {
 eigenschaft:wert;
}

Selektiert ein Element (hier <p>) mit der ID "ID", was den Ausschluss von Netscape 4 zur Folge hat.

Tan-Hack (Modified Simplified Box Model Hack):

* html #id {
  e\igenschaft:wert;
}

Die angeführte Notation setzt die innerhalb der nach unten Star-HTML-Browserweiche zunächst an ältere Internet Explorer für Windows angepassten Eigenschaften für den Internet Explorer 6 wieder zurück. Setzen Sie das Escape-Zeichen \ an eine beliebige Stelle innerhalb der Eigenschaft, jedoch nicht direkt vor einen der Buchstaben a bis f, da dieser sonst als hexadezimaler Wert interpretiert werden würde. Diese Browserweiche eignet sich ebenfalls zur Korrektur des falschen Box-Modells für ältere Windows Internet Explorer, ist jedoch wegen der dreifachen Angabe eines jeden Wertes etwas aufwändig. Durch die Kombination mit der Star-HTML-Browserweiche werden Probleme mit anderen Browsern ausgeschlossen. Das Kapitel über die Behandlung des Box-Modells enthält ein Seite Beispiel.

Tantek-Hack:

selektor {
  eigenschaft:wert;      /* Deklaration fuer IE 5.x */
  voice-family:"\"}\"";  /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */
  voice-family:inherit;
  eigenschaft:wert;      /* Korrektur fuer andere Browser */
}

Diese Methode beruht auf der Ausnutzung eines Fehlers im Internet Explorer der Version 5.x. Zunächst wird die für den Internet Explorer 5.x vorgesehene Deklaration angeführt und anschließend der Sprachausgabe-Eigenschaft Seite voice-family der unsinnige, aber gültige Wert "}" zugewiesen - die inneren Hochkommata sind gemäß CSS-Syntax mit Backslashes maskiert (CSS-Escape-Sequenz) und daher Bestandteil des Wertes. Korrekt arbeitende Browser werden davon nicht negativ beeinflusst, von alten Versionen des Internet Explorer jedoch wird keine der nachfolgenden Angaben beachtet, da sie die geschweifte Klammer als Ende der Regel interpretieren. Die in der ersten Zeile definierte Deklaration wird zunächst von allen Browsern akzeptiert, die nachfolgende Korrektur für standardkonforme Browser übergeht der IE 5.x. Somit eignet sich diese Browserweiche zur Korrektur des falschen Box-Modells (siehe Seite Beispiel) von Microsoft bei Dokumenten, in denen der Internet Explorer 6 über die Seite Dokumenttyp-Deklaration in den Seite standardkonformen Modus versetzt wurde. Verwenden Sie den Tantek-Hack nur in einer vor Netscape 4 verborgenen CSS-Datei, da in diesem Browser ein schwerer Fehler bei der Interpretation des gesamten Style-Bereichs verursacht wird.

Beachten Sie:

Die auf fehlerhafter oder unzureichender CSS-Implementierung aufbauenden Browserweichen können in aktuellen Browsern unerwünschte Begleiterscheinungen haben. Auch ist nicht ausgeschlossen, dass künftige Browserversionen zwar weiterhin den Fehler enthalten, den Sie mittels eines Hacks korrigieren, dies jedoch nicht mehr funktioniert, da just die Programmstelle korrigiert wurde, die die Nutzung des Hacks erst ermöglicht hat. Sie sollten daher das über eine Browserweiche erzielte Ergebnis mit unterschiedlichen Browsern kritisch begutachten und dies in regelmäßigen Abständen mit neu erschienenen Versionen wiederholen.

Auf der sicheren Seite sind Sie, wenn Sie nach Möglichkeit weitestgehend auf den Einsatz von CSS-Hacks verzichten.

nach oben
weiter | Seite Einführung in XML
zurück | Seite CSS-basierte Navigationsleisten
Teil von SELFHTML/Navigationshilfen Teil von Stylesheets Teil von CSS-basierte Layouts

© 2007 Seite Impressum


SELFHTML: XML/DTDs

SELFHTML

XML/DTDs
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML, Kapitel Web-Technologien allgemein und speziell die einführenden Bemerkungen zu Seite XML.
Dieser Abschnitt behandelt den Aufbau von XML-Dateien, das Definieren eigener Auszeichnungssprachen mit Hilfe von XML-DTDs und die Möglichkeiten der Präsentation von XML-Daten.
Der Abschnitt besteht aus folgenden Seiten und Unterabschnitten:

Seite Einführung in XML
Kapitel Regeln für XML-Dateien
Kapitel Dokumenttyp-Definitionen (DTDs)
Kapitel Darstellung von XML-Daten

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zu XML/XSL/XML-basierten Sprachen
Online-Seite WWW-Links zu XML, DTDs und XSL(T)
Online-Seite WWW-Links zu XML-basierten Sprachen

nach oben

© 2007 Seite Impressum


SELFHTML: XML / Einführung in XML

SELFHTML

Einführung in XML
Informationsseite

nach unten XML - die standardisierte Datenfreiheit
nach unten XML, DTDs und Validierung
nach unten XSL oder CSS - Formatierung für XML-Elemente
nach unten Das W3-Konsortium und XML
nach unten XML und der Software-Markt
nach unten Die Aufgaben von XML-Parsern
nach unten XML und die Browser
nach unten Wichtige XML-Standardsprachen: SVG, MathML, SMIL, RDF, WML
nach unten

XML - die standardisierte Datenfreiheit

Die Fachpresse hat XML (Extensible Markup Language - zu deutsch: Erweiterbare Auszeichnungssprache) gefeiert, als sei damit ein völlig neues EDV-Zeitalter angebrochen. Nicht ganz zu Unrecht, denn zweifellos hat XML das Zeug, der EDV neue, entscheidende Impulse zu geben. Allerdings sollte man fairerweise hinzufügen, dass XML nichts Neues ist, sondern eine Untermenge von SGML, das seit 1986 international standardisiert ist. Im Gegensatz zu SGML ist XML nicht ganz so "akademisch", in der Praxis aber ähnlich leistungsfähig wie SGML.

Derzeit sieht es gar nicht schlecht für die weitere Ausbreitung von XML aus. Konzerne wie Microsoft und die damit verfeindete Unix-Welt sind sich weitgehend einig, dass XML die Zukunft gehört, was die einheitliche Speicherung von Daten betrifft. Doch es wird schnell deutlich, warum es schwierig ist, XML einer breiteren Anwenderschicht zu vermitteln. Denn XML ist eigentlich etwas für Leute, die Dateiformate definieren, und das ist naturgemäß eine Minderheit. "Normale" Anwender, auch professionelle, kommen mit XML wohl eher am Rande in Berührung. Sie sind eher diejenigen, die diese Auszeichnungssprachen anwenden müssen, sei es auf Quelltext-Ebene oder mit Hilfe von Software-Oberflächen, die visuelles Arbeiten erlauben und das XML-Format einfach zur Speicherung der Daten benutzen.

Die prominenteste der Sprachen, die mit Hilfe von XML definiert werden, ist derzeit zweifellos die neue Fassung von HTML, XHTML genannt. Aber auch andere bekannte Sprachen, wie etwa WML (Beschreibungssprache für das WAP-Protokoll, das Internet-Inhalte aufs Handy-Display bringt), kommen ins Gespräch. Welcher Erfolg all diesen Sprachen beschieden ist, entscheidet der Markt. Daneben bietet XML jedoch auch die Möglichkeit an, völlig neue Sprachen zu definieren, die für eigene Datenstrukturen optimal angepasst sind, und die aber trotzdem nicht proprietär sind, sondern einem standardisierten Regelwerk folgen.

XML ist für viele Anwender deshalb etwas schwer "greifbar", weil es eigentlich nicht viel tut. Seine Leistung besteht darin, dass man mit den Konzepten und Regeln, die es bereitstellt, eigene Auszeichnungssprachen definieren kann, die ähnlich funktionieren wie HTML. All diese Sprachen bestehen immer wieder aus Elementen, markiert durch Tags, deren Verschachtelungsregeln, und aus Attributen mit erlaubten Wertzuweisungen. Daneben gibt es Regeln, wie man solche Sprachen - in XML auch Namensräume genannt - in andere Sprachen importieren und somit eine Sprache innerhalb einer anderen Sprache benutzen kann.

Zwei einfache Einsatzbeispiele für Auszeichnungssprachen

<rechteck oben="100" links="185" breit="427" hoch="110">
  <hintergrund typ="verlauf" richtung="waagerecht" startfarbe="#0000FF" endfarbe="#FFFFFF">
   <inhalt typ="text" format="stil_6">
     Ein kleiner Text
   </inhalt>
  </hintergrund>
</rechteck>

<projekt sprache="perl" name="Performance-Test IC-Baustein TL410" typ="shell" stand="02-10-2001">
  <modul name="main" stand="02-10-2001" ablage="/usr/scripts/tl410/tl410.pl">
   <funktion name="datenversorgung" stand="14-09-2001">
    <beschreibung>
     versorgt den Speicherbaustein mit sinnvollen Anfangswerten aus Testreihe T3.
    </beschreibung>
   </funktion>
  </modul>
</projekt>

Erläuterung

Es wurden absichtlich zwei Beispiele gewählt, um zu verdeutlichen, wie beliebig sich das Auszeichnungssprachenkonzept einsetzen lässt. Im ersten Beispiel geht es um die Definition eines vektorgrafischen Elements, im zweiten Beispiel um die Dokumentation der Arbeits-Scripts eines Elektrotechnikers. Ebensogut lassen sich auf diese Weise Konstruktionszeichnungen, musikalische Kompositionen, Theaterstücke und biochemische Prozesse beschreiben. Eigentlich alles, was irgendwelche benennbaren und beschreibbaren Strukturen aufweist. Mit welcher Software man diese Daten visualisieren, abspielen oder anderweitig verarbeiten kann, ist damit noch nicht festgelegt. Es geht zunächst nur mal darum, Daten sinnvoll zu strukturieren und vollständig zu beschreiben.

Die beiden Beispiele enthalten ganz unterschiedliche Elemente, Attribute, Wertzuweisungen und typische Verschachtelungen. Gemeinsam ist ihnen jedoch, dass sie offensichtlich aus bestimmten erlaubten Elementen, Attributen, Wertzuweisungen und Regeln zur Verschachtelung bestehen. In den beiden Beispielen finden Sie diese Regeln nirgendwo beschrieben. Insofern sind es einfach Phantasiebeispiele. Es gibt jedoch ein standardisiertes Verfahren, um solche Regeln zu definieren und in den Auszeichnungssprachen anzugeben, auf welche Regeln man sich bezieht und wo diese Regeln definiert sind. Dieses standardisierte Verfahren ist XML.

Als Vorübung zu XML empfiehlt es sich durchaus, wenn Sie einfach mal versuchen, irgendeine Datenstruktur, mit der Sie viel zu tun haben, mit Hilfe solcher phantasierter Elemente, Attribute, Wertzuweisungen und Tag-Verschachtelungen zu beschreiben. Beschreiben Sie beispielsweise mal die Organisationsstruktur Ihres Unternehmens auf diese Weise, oder Ihren typischen Tagesablauf, oder den Grundriss Ihrer Wohnung. Dabei werden Sie schnell feststellen, dass es oft mehrere Wege gibt, um ein und dieselbe Struktur zu definieren. Im zweiten der obigen Beispiele hätte man beispielsweise das Element, das durch <beschreibung>...</beschreibung> definiert wird, auch als Attribut namens beschreibung innerhalb des <funktion>-Tags definieren können, sodass im Beispiel stehen würde:
<funktion name="datenversorgung" stand="14-09-2001" beschreibung="versorgt den Speicherbaustein mit sinnvollen Anfangswerten aus Testreihe T3"></funktion>
Für welchen Zweck Sie ein eigenes Element spendieren, oder was Sie in ein Attribut packen, gehört zu den Aufgaben des Sprachen-Designs. Wenn Sie sich diese Problematik einmal an eigenen, konkreten Beispielen klarmachen, haben Sie schon sehr viel von XML begriffen, ohne die einzelnen Details von XML zu kennen.

XML, DTDs und Validierung

Die Regeln für erlaubte Elemente, Attribute und Verschachtelungsmöglichkeiten einer XML-gerechten Auszeichnungssprache werden unabhängig von den eigentlichen Daten definiert. Die Daten mit den Definitionen stellen eine so genannte Dokumenttyp-Definition (engl. document type definition, Abkürzung DTD) dar. XML-fähige Software sollte idealerweise in der Lage sein, solche DTDs auszulesen und Daten, die auf diese DTD Bezug nehmen, nach den Regeln der DTD beurteilen zu können (siehe auch nach unten Aufgaben von XML-Parsern). Dabei kann die interpretierende Software feststellen, ob innerhalb der XML-Daten, die sich auf eine bestimmte DTD beziehen, ungültige Notationen vorkommen. Ungültige Notationen sind z.B. Element- oder Attributnamen, die in der DTD nicht definiert werden, oder Elemente an Stellen, an denen sie aufgrund der DTD-Regeln nicht erlaubt sind. Das Verfahren, um zu überprüfen, ob eine XML-Datei nach den Regeln ihrer zugehörigen DTD fehlerfrei ist, nennt man Validierung (von engl. valid = gültig).

Das Verfahren mit den DTDs und der Validierung mag Ihnen anfangs etwas umständlich und aufwendig erscheinen. Doch nur durch dieses Verfahren ist sichergestellt, dass XML-Sprachen nicht nur Phantasiegebilde sind, sondern Sprachen, die sich an bestimmte, genau definierte Regeln halten. Nur so ist es möglich, dass sich verschiedene Autoren und verschiedene Software-Produkte an die Konventionen einer Sprache halten und die Sprache nicht durch spontane, undefinierte Erweiterungen verwässert und für interpretierende Software unbrauchbar wird. Eine XML-Sprache zu erweitern ist durchaus möglich, aber wenn, dann auf dem dafür vorgesehenen Weg, nämlich durch Erweiterung der entsprechenden DTD.

Beispielauszug aus einer DTD

<!ELEMENT nachricht (titel,text,datum,redakteur)>
<!-- Eine Nachricht besteht aus Titel, Text, Datum und Redakteur -->

   <!ELEMENT titel (#PCDATA)>
   <!-- Der Titel enthaelt den Titeltext, sonst nichts -->

   <!ELEMENT text (#PCDATA)>
   <!-- Der Text enthält den Nachrichtentext, sonst nichts -->

   <!ELEMENT datum (#PCDATA)>
   <!-- Das Datum enthaelt die Datumsangabe, sonst nichts -->

   <!ELEMENT redakteur (#PCDATA)>
   <!-- "redakteur" enthaelt die Angabe zum Redakteur, sonst nichts -->

Erläuterung

Auf die genaue Syntax beim Definieren wird an dieser einführenden Stelle nicht weiter eingegangen. Das Beispiel möchte lediglich einen ersten Eindruck vermitteln, wie DTD-Definitionen aussehen, und welche Konsequenzen sie haben. In dem Beispiel werden verschiedene Elementtypen definiert. Das sind die "logischen Vorlagen" für Elemente, die in einer XML-Sprache, die sich auf diese DTD bezieht, vorkommen können. Eine Definition wie z.B. <!ELEMENT titel (#PCDATA)> bedeutet, dass es in dieser XML-Sprache ein Element titel gibt, das durch die Tags <titel>...</titel> ausgezeichnet wird. Aus den Regeln des Beispiels geht außerdem hervor, dass <titel>...</titel> (und ebenso <text>...</text>, <datum>...</datum> und <redakteur>...</redakteur>) nur innerhalb von <nachricht>...</nachricht> vorkommen darf. Alles, was im Beispiel zwischen <!-- und --> steht, ist ein Kommentar und gehört nicht zu den eigentlichen Definitionen.

Aufgrund der Definitionen im obigen Beispiel könnte eine XML-Datei, die sich auf diese Definitionen bezieht, folgende Daten enthalten:

Beispieldaten aufgrund der DTD

<nachricht>
 <titel>XML wird jetzt auch in SELFHTML beschrieben!</titel>
 <text>
 Nach langer Pause ist eine neue SELFHTML-Version erschienen. Eine der wichtigsten
 Neuerungen ist der XML-Teil, in dem die neue Definitionssprache für Auszeichnungssprachen
 behandelt wird. Der Anwender lernt, wie er Regeln definiert, und Beispiele
 ergänzen die Beschreibungen.
 </text>
 <datum>20.10.2001</datum>
 <redakteur>Ferdinand Schreiberling</redakteur>
</nachricht>

Erläuterung

Dem Beispiel können Sie entnehmen, dass die Regeln, die zuvor in der Beispiel-DTD definiert wurden, eingehalten wurden. Es gibt das übergreifende Element nachricht, ausgezeichnet durch die Tags <nachricht>...</nachricht>. Innerhalb davon sind die anderen Elemente, die eine Nachricht ausmachen, notiert und mit konkreten Daten versehen. Fragen, die Sie sich jetzt stellen mögen, etwa die, wie eine Datendatei sich auf eine DTD bezieht, werden an dieser Stelle ausgeklammert. Es geht hier nur darum, das Verständnis dafür zu entwickeln, dass das, was man "XML" nennt, immer aus dieser Zweiteilung besteht: nämlich aus der Definition von Regeln für eine bestimmte Auszeichnungssprache, und in der konkreten Anwendung dieser Regeln innerhalb dieser Auszeichnungssprache.

Das obige Beispiel ist natürlich nur sehr einfach. In der Praxis können Sie beliebig komplexe Datenstrukturen und deren Beziehungen mit Hilfe der DTD-Syntax definieren. Im Abschnitt Kapitel Dokumenttyp-Definitionen (DTDs) finden Sie detailliertere Erklärungen dazu, wie man eine XML-gerechte DTD erstellt.

XSL oder CSS - Formatierung für XML-Elemente

XML-basierte Dateien enthalten nichts anderes als logische Auszeichnungen (auch semantische Auszeichnungen genannt). Eine Auszeichnung wie <beschreibung>...</beschreibung> sagt nur etwas über die Bedeutung der an dieser Stelle gespeicherten Daten aus, aber nichts darüber, wie solche Daten darzustellen sind. Die so bezeichneten Daten sind völlig unabhängig vom Ausgabemedium (etwa Bildschirm, Display, Lautsprecher, Drucker), und sie enthalten keinerlei Angaben zur Formatierung (Schriftart, Schriftgröße, Farben usw.). Im Gegensatz zu HTML-Daten, für deren Darstellung ein Browser Default-Werte benutzt, hat er bei XML-Daten keine Anhaltspunkte, wie diese darzustellen sind. Bevor Sie solche Daten also präsentieren können, müssen Sie mit Hilfe einer Style-Sprache angeben, wie die Daten formatiert werden sollen.

Dazu stehen heute zwei Formatsprachen zur Verfügung: CSS und XSL. Kapitel CSS (Cascading Stylesheets), auch für HTML eingesetzt, ist dabei die "Brot- und Buttersprache". Sie genügt, um etwa einem Web-Browser mitzuteilen, wie er die Elemente einer XML-Datei darstellen soll. XSL ist dagegen wesentlich mächtiger und enger an den Konzepten von XML orientiert. Ganz besonders wichtig ist die so genannte Transformations-Komponente XSLT. Mit Hilfe von XSLT können Sie beispielsweise XML-Daten in HTML transformieren - und zwar, bevor der Browser überhaupt etwas davon mitbekommt, also server-seitig! Das hat den Vorteil, dass XML in Verbindung mit XSL auch mit älteren Browsern funktioniert, die gar kein XML kennen. Der Nachteil ist, dass es nur in einer HTTP-Umgebung funktioniert, aber nicht, wenn die Daten etwa lokal auf einer CD-ROM präsentiert werden. Außerdem muss der Web-Server eine entsprechende Schnittstelle besitzen, die das Einbinden eines XSL/XSLT-verarbeitenden Software-Moduls erlaubt.

Daneben stehen in XSL Möglichkeiten zur Verfügung, die in CSS unbekannt sind, zum Beispiel bedingte Formatierung (wie if-Bedingungen in Programmiersprachen) oder Sortierung von Daten.

Ein entscheidender Vorteil von XSL ist außerdem, dass es keine eigene, vom Auszeichnungssprachenschema abweichende Syntax benutzt, so wie CSS. Stattdessen ist XSL selbst eine mit Hilfe von XML definierte Auszeichnungssprache! Eine Stylesheet-Datei, die mit XSL erstellt ist, ist also selber eine XML-gerechte Datei. So sind Software-Tools, die für XML entwickelt wurden, auch für XSL anwendbar.

Beispieldefinition mit CSS:

kopfzeile { display:block; font-family:Helvetica; font-size:12px; font-weight:bold }

Beispieldefinition mit XSLT:

<xsl:template match="kopfzeile">
    <div style="font-family:Helvetica; font-size:12px; font-weight:bold;">
      <xsl:value-of select="." />
    </div>
  </xsl:template>

Erläuterung

Auf den ersten Blick wirkt die CSS-Definition natürlich einfacher - zumindest, wenn Sie sich mit CSS bereits beschäftigt haben. Die XSL-Definition ist dagegen vertrauter, wenn man sie vom Blickwinkel der Auszeichnungssprachen her betrachtet. Auszeichnungen wie <xsl:template>...</xsl:template> (Schablonen-Definition) oder <xsl:value-of select="." /> (Inhalt des aktuellen Elements einfügen) gehören zu XSL. Im Beispiel fällt Ihnen möglicherweise auf, dass für die eigentlichen Format-Definitionen von kopfzeile plötzlich ein HTML-Element verwendet wird, nämlich div, und dass das einleitende <div>-Tag sogar die vertrauten CSS-Definitionen enthält. Dahinter steckt das Konzept von XSLT. Denn mit Hilfe dieser Sprache können Sie nicht einfach nur Formatierangaben für Elemente notieren, sondern Sie können die Elemente in eine andere Sprache transformieren. In der Praxis wird derzeit hauptsächlich die Transformation von eigenen XML-Daten in HTML benutzt, so wie im obigen Beispiel.

Im Abschnitt Kapitel Darstellung von XML-Daten finden Sie detailliertere Erklärungen dazu, wie XSLT funktioniert.

Das W3-Konsortium und XML

XML geht auf die Anstrengungen des W3-Konsortiums zurück, und die Spezifikation und Weiterentwicklung liegt in der Hand dieser Organisation. Über die englischsprachige Seite W3-Einstiegsseite zu XML können Interessierte die aktuelle Weiterentwicklung verfolgen. Dadurch, dass die gleiche Organisation, die auch für die Spezifikation von HTML zuständig ist, den XML-Standard bestimmt, ist auch die vielfach vernommene Einschätzung entstanden, XML werde HTML "ablösen". Dabei ist das Potential von XML viel größer als der Bedarf des Web-Designers an Datenformaten. XML ist ein Universalkonzept für Datenspeicherung und deshalb nicht auf Internet und WWW beschränkt. Allerdings ist der XML-Standard beim W3-Konsortium offensichtlich in guten Händen. Denn die Leute um Dan Connolly, der das XML-Projekt leitet, haben sich über Jahre hinweg als weitsichtig und unbestechlich erwiesen, trotz aller versuchten Einflussnahme von seiten namhafter Software-Konzerne.

Die Ideen zu XML gehen in jene Jahre zurück, als das Web zu boomen begann. Im Oktober 1994 gründete Tim Berners-Lee, der Stammvater von HTTP und HTML, am Massachusetts Institute of Technology ein offenes Entwickler-Forum, zu dem Vertreter aus Industrie, Forschung, Internet-Technologie, Politik und Medien Zugang hatten. Es wurde klar, dass HTML den künftigen Anforderungen alleine nicht genügen kann, und dass aber ein Standard gefunden werden musste, in den HTML integrierbar war, und der den Erfolg von HTML ausnutzen sollte. Eine Definitionssprache für Auszeichnungssprachen war das Ziel. Zunächst waren Konzepte im Gespräch, die SGML außer acht ließen. Doch schließlich setzte sich eine Lösung durch, in der die neue, praxisorientierte Definitionssprache als Teilmenge von SGML konzipiert, also selbst mit Hilfe von SGML definiert wurde, aber Aufgaben von SGML selbst übernimmt, nämlich die Definition konkreter Anwendungs-Auszeichnungssprachen. Auf der SGML 96 Conference in Boston wurde der Erstentwurf zu XML vorgelegt.

Im Februar 1998 brachte das W3-Konsortium schließlich die erste Empfehlung (Recommendation) zu XML heraus. Danach bemühte sich die Organisation, XML zu etablieren und schuf Arbeitsgruppen, die verschiedene wichtige Auszeichnungssprachen mit Hilfe von XML standardisieren. Allen voran natürlich HTML, das mit Hilfe von XML zu dem neuen Standard XHTML umdefiniert wurde und auf dieser Basis weiterentwickelt wird. Andere wichtige Sprachen wie SVG (Vektorgrafikformat), die Mathematical Markup Language (MathML), oder das Resource Description Framework (RDF), ein Modell zur Beschreibung von Metadaten zu Dokumenten werden auf Basis von XML definiert und erhalten durch das W3-typische Standardisierungsverfahren Gewicht als allgemein verbreitete, software-unabhängige Beschreibungssprachen.

XML und der Software-Markt

Für den klassischen Software-Markt stellt XML eine gewaltige Provokation dar. Denn es ist ein Generalangriff auf alle proprietären Dateiformate, die an bestimmte, oft teuere Programme gebunden sind. Durch XML entsteht aus Anwendersicht etwas Neues: im Vordergrund steht nicht mehr das Software-Produkt als Einheit von Benutzeroberfläche und Dateiformat, sondern nur noch die Benutzeroberfläche, und gleichzeitig die Erwartung, dass die Daten, die zu erzeugen oder zu verarbeiten sind, in einem modernen, XML-basierten Dateiformat abgespeichert werden. Der Wettbewerb zwischen konkurrierenden Software-Produkten verlagert sich deshalb auf das "Interface-Design". Denn wenn vergleichbare Produkte die gleichen, standardisierten Dateiformate verwenden und den Anwender nicht mehr durch das Dateiformat an sich binden können, müssen sie den Anwender durch überlegene Benutzerführung und eine praxisnahe Arbeitsebene überzeugen. Durch die universelle Anwendbarkeit von XML gilt dies für fast alle Software-Typen, egal ob Textverarbeitung, Grafik, Tabellenkalkulation, Datenbank, CAD, Musik oder sogar Computer-Spiele.

Während die meisten Software-Hersteller noch im seligen Schlaf liegen, beweist der vielgehasste Microsoft-Konzern mal wieder seine Chamäleon-Qualitäten. Mit gewaltigem finanziellen Aufwand arbeitet das angeschlagene Unternehmen daran, die verbreitete Office-Familie, bestehend aus Word, Excel, Powerpoint und Access, komplett auf XML-basierte Dateiformate umzustellen. Aber auch andernorts wachen die Hersteller allmählich auf. Vor allem das vom W3-Konsortium entworfene, XML-basierte SVG-Dateiformat für Vektorgrafik erweist sich dabei als vielversprechend.

XML könnte dafür sorgen, dass es in Zukunft egal ist, womit Sie Ihre Briefe schreiben, Ihre Häuser konstruieren oder Ihre Plakatwerbung erstellen. Wenn die benutzte Software sich konsequent an den XML-Standard hält und nachweisbare Dokumenttypen (DTDs) benutzt, dann steht einem verlustfreien Portieren von Daten zwischen konkurrierenden Anwendungen mit gleichen Fähigkeiten eigentlich nicht mehr viel im Wege.

Ein wichtiger Pluspunkt von XML ist, dass Daten und Layout völlig voneinander getrennt sind. Nicht einmal die Ausgabeform der Daten ist festgelegt. Aus dem gleichen XML-Datenbestand lässt sich eine Web-Seite generieren, eine Druckvorlage oder eine akustische Ausgabe mit künstlichen Stimmen. Es gibt nur noch eine Datenquelle, und das Publizieren erfolgt mit Hilfe von Konvertern, die XML-Daten in andere Daten (z.B. in HTML oder in PostScript) übersetzen. Die klassischen, zuletzt immer monströser gewordenen Programme mit ihren hauseigenen Formaten werden deshalb zunehmend kleineren Software-Modulen weichen, deren Stärke das Zusammenspiel ist. Das Konzept dieser Modularisierung ist zwar schon älter, aber es fehlten zunächst die Schnittstellen. XML jedoch leistet eine solche Schnittstelle auf der Ebene der Datenformate.

Die Aufgaben von XML-Parsern

Was man in prozeduralen Sprachen, also in Programmiersprachen, als Interpreter bezeichnet, nennt man in beschreibenden Sprachen wie XML einen Parser (auch: Prozessor). Bei XML ist ein Parser diejenige Software, die XML-Strukturen ausliest, analysiert und nachgeschalteter Software zur Verfügung stellt. Ein XML-fähiger Browser beispielsweise besitzt ein eigenes Software-Modul, das den Parser darstellt. Im Parser wird die Seite Baumstruktur der XML-Daten analysiert. Ein erfolgreiches Analysieren dieser Struktur ist die Voraussetzung für eine korrekte Darstellung/Wiedergabe der Daten.

Ein Parser muss nicht auf der Client-Seite (im Browser) integriert sein. Er kann genausogut in die Umgebung eines Web-Servers eingebunden sein und Daten, die auf dem Server abgelegt sind und vom Browser über HTTP angefordert werden, schon umwandeln, bevor diese überhaupt übers Internet übertragen werden. Genau dies tut beispielsweise ein server-seitiger XSLT-Parser, der XML-Daten in HTML-Daten übersetzen kann. Ein Browser, der die XML-Daten über HTTP angefordert hat, erhält dann vom Server leicht verdaulichen HTML-Code.

Generell kann man unterscheiden zwischen Parsern, die den Quelltext validieren, und solchen, die das nicht tun. Validierende Parser erwarten zu allen XML-Daten eine DTD und prüfen den gesamten Inhalt der XML-Daten gegen die zugehörige DTD. Ergibt die Prüfung Fehler, geben solche Parser beispielsweise Fehlermeldungen aus und brechen die Verarbeitung ab.

XML und die Browser

Das entscheidende Problem beim Erfolg von XML ist die Fähigkeit von Software, XML-basierte Daten vollständig und adäquat zu repräsentieren. Egal, ob es sich um Textdaten, Grafikdaten, numerische Daten oder Multimediadaten handelt. Web-Browser sind heute der Software-Typ, der am stärksten mit unterschiedlichen Dateiformaten konfrontiert wird und für eine ansprechende Umsetzung dieser Daten am Bildschirm oder an anderen Ausgabegeräten zu sorgen hat. Außerdem sind Web-Browser von vorneherein internet-fähig, was für XML ebenfalls wichtig sein kann. Denn XML-fähige Software muss gegebenenfalls auf öffentlich im Internet hinterlegte Dokumenttyp-Definitionen zugreifen können, um eine Datei, die nach den Regeln eines bestimmten Dokumenttyps kodiert ist, interpretieren zu können. Insofern haben die Browser eine gewisse Vorreiterrolle, was die Umsetzung der XML-Philosophie in der Praxis betrifft.

Der Internet Explorer interpretiert beliebige, XML-basierte Auszeichnungssprachen seit der Produktversion 5.0, der Netscape-Browser ab seiner völlig neu programmierten Version 6.0. "Interpretieren" meint dabei, dass diese Browser XML-Daten als solche erkennen und parsen können. Schick darstellen können sie die Daten deshalb noch nicht - dazu sind Formatierungen mit CSS oder XSL oder Übersetzungen mit XSLT in HTML erforderlich.

Da Web-Designer meistens auch auf ältere Produktversionen oder andere Browser Rücksicht nehmen müssen, empfiehlt es sich vorläufig nicht, Web-Design unmittelbar mit XML-basierten Sprachen zu betreiben. Nur wenn XML in Verbindung mit XSLT und dessen serverseitigen Interpretation einsetzbar ist, ist die Verwendung im Web heute unbedenklich.

XML gewinnt auf jeden Fall mehr und mehr Bedeutung bei der Datenhaltung umfangreicher, reich strukturierter Datenbestände. Bei großen Web-Sites mit viel und einheitlich strukturiertem Inhalt werden die Daten immer häufiger in XML-basierten, eigenen Dateiformaten gespeichert. Bis es jedoch problemlos möglich sein wird, XML-Daten direkt an aufrufende Browser zu senden, wird noch einige Zeit vergehen.

Wichtige XML-Standardsprachen: SVG, MathML, SMIL, RDF, WML

XML bietet einerseits die Möglichkeit, eigene Datenformate zu erzeugen, die einem standardisierten Schema folgen und daher Kompatibilität garantieren. Andererseits lassen sich mit XML aber auch Datenformate erzeugen, die für eine breitere Verwendung im Software-Markt geeignet sind. Das W3-Konsortium arbeitet gleich an mehreren solcher XML-basierten Auszeichnungssprachen. Für jede dieser Auszeichnungssprachen gibt es eine eigene Arbeitsgruppe, die sich um eine saubere Spezifikation und eine praxisgerechte Weiterentwicklung der jeweiligen Sprache kümmert. Aber auch andere Hersteller und Anbieter versuchen, XML-basierten Sprachen zu einem Standard-Status zu verhelfen. Die folgenden Sprachen sind Beispiele solcher Standardsprachen. Jede Sprache wird anhand eines kleinen Beispiels verdeutlicht. Die Beispiele sind jedoch nur zum Hereinschnuppern gedacht.

SVG: Scalable Vector Graphics

englischsprachige Seite W3-Einstiegsseite zu SVG
SVG ist eine mit XML definierte Auszeichnungssprache zur Beschreibung 2-dimensionaler Vektorgrafik. Damit lassen sich grafische Daten beschreiben, wie sie von Programmen wie etwa Corel Draw erzeugbar sind. Ein einfaches Beispiel:

<svg width="4in" height="3in">
<g>
  <rect x="50" y="80" width="200" height="100" style="fill: #FFFFCC"/>
</g>
</svg>

Das Beispiel zeigt, wie in SVG ein "Canvas", also eine Bildfläche erzeugt wird mit Hilfe des zentralen svg-Elements. Mit Hilfe des Gruppierungs-Elements g lassen sich Elemente zu komplexen Einheiten verbinden. Im Beispiel wird in der einzigen definierten Gruppe nur ein einfaches Rechteck definiert. Dafür steht das rect-Element zur Verfügung.

MathML: Mathematical Markup Language

englischsprachige Seite W3-Einstiegsseite zu MathML
MathML hat die Aufgabe, technisch-wissenschaftliche Inhalte, die mathematische Formelsprache zur Darstellung benötigen, abzubilden. Ein einfaches Beispiel (übernommen vom W3-Konsortium):

<mfenced>
  <mrow>
    <mi>a</mi>
    <mo>+</mo>
    <mi>b</mi>
  </mrow>
</mfenced>
<msup>
  <mn>2</mn>
</msup>

Das Beispiel bewirkt die Ausgabe: (a+b)2
Der Aufwand dafür mag im ersten Augenblick übertrieben anmuten. Der Vorteil der Beschreibung in MathML ist jedoch, dass jedes einzelne Element des Ausdrucks eine eigene logische Auszeichnung erhält. Nur dadurch ist es möglich, auch beliebig komplexe Ausdrücke zu beschreiben.
Mit <mfenced>...</mfenced> wird die Klammer definiert, mit <mrow>...</mrow> ein horizontal notierter, zusammenhängender Ausdruck, mit <mi>...</mi> ein Bezeichner (Identifier), mit <mo>...</mo> ein Operator, mit <mn>...</mn> ein numerischer Wert, und mit <msup>...</msup> wird diese Zahl als hochgestellt (Superscript) definiert.

SMIL: Synchronized Multimedia Integration Language

(auszusprechen wie englisch smile - lächeln)
englischsprachige Seite W3-Einstiegsseite zu SMIL
SMIL ermöglicht es, Drehbücher für verschiedenste Medienelemente wie Text, Bilder, Video und Audio zu schreiben. Dadurch lassen sich TV-ähnliche, selbst ablaufende Präsentationen erstellen, z.B. für Messen, Ausstellungen, Produktpräsentationen, aber auch im künstlerischen Bereich für Multimedia-Clips. Ein einfaches Beispiel:

<par>
<text src="title.rt" type="text/html" region="title" dur="20s"/>
 <audio src="welcome.ra"/>
</par>

Im Beispiel wird mit <text> ein Text-Element definiert. Der Text selbst wird aus einer separaten Quelle entnommen (src="title.rt"). Er wird in einer bestimmten Region des Anzeigebereichs platziert (region="title"), die an einer anderen Stelle der SMIL-Datei definiert wird, und er wird 20 Sekunden lang eingeblendet (dur="20s"). Derweil wird eine Audio-Datei namens welcome.ra abgespielt. Beides - der Text und die Audio-Datei - werden in <par>...</par> eingeschlossen. Das steht für "parallel" und beschreibt die Anweisung, alles, was innerhalb davon notiert ist, gleichzeitig zu präsentieren.

RDF: Resource Description Framework

englischsprachige Seite W3-Einstiegsseite zu RDF
RDF ist eine Sprache zur Beschreibung von Metadaten für Dokumente. Metadaten können verschiedene Aufgaben haben: etwa Input für Robots von Suchmaschinen darzustellen, oder die Daten für die Aufnahme des Dokuments in das Katalogsystem einer bestimmten elektronischen Bibliothek zu liefern. Ein einfaches Beispiel:

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:dc="http://purl.org/dc/elements/1.0/">
  <rdf:Description rdf:about="http://localhost/doc"
      dc:creator="Fritz Fisch"
      dc:title="Fischfang heute"
      dc:description="Eine Dokumentation moderner Fischfangmethoden"
      dc:date="2001-03-30" />
</rdf:RDF>

Das Beispiel zeigt eine RDF-Namensraum-Instanz, eingeleitet durch <rdf:RDF... und beendet durch </rdf:RDF>. Für die Namensraum-Instanz werden jedoch zwei Bezugsquellen angegeben: einmal die Metadaten-Syntax-Definition nach dem RDF-Schema des W3-Konsortiums, und einmal diejenige nach dem RDF-Schema von Seite Dublin Core (dc). Dadurch lassen sich in der Folge mit rdf: Tags aus dem W3-Schema benutzen, und mit dc: Tags aus dem Dublin-Core-Schema.

WML: Wireless Markup Language

englischsprachige Seite Einstiegsseite zum WAP-Forum
WML ist - gemeinsam mit dem Übertragungsprotokoll WAP, das ähnliche Aufgaben wie HTTP hat - die Beschreibungssprache für Displayinhalte auf Handys oder anderen internet-fähigen Kleinstgeräten. WML ist auch ein Beispiel dafür, wie ein anderes Gremium als das W3-Konsortium sich um die XML-basierte Normierung der Sprache bemüht. WML hat im Prinzip ähnliche Aufgaben wie HTML, ist jedoch für die Display-Anzeige optimiert. Jedes Handy, das sich als WAP-fähig bezeichnet, hat einen integrierten WML-Browser, der die entsprechenden Daten aus dem Internet anzeigen kann. Ein einfaches Beispiel:

<wml>
<card id="card_1" title="Willkommen!">
<p align="left">hier unser aktuelles<br/>Angebot:</p>
<a href="#Card_2">Unterhosen</a><br/>
<a href="#Card_3">Baby-Schnuller</a>
</card>
</wml>

Charakteristisch für WML-Daten ist die Unterteilung in so genannte "Cards". Das sind kleine Einheiten, die jeweils einen Displayinhalt darstellen. Mit <card>...</card> wird eine solche Einheit definiert. Innerhalb der Karte sind Elemente notiert, die jedem, der HTML kennt, vertraut vorkommen. Da gibt es Absätze, Zeilenumbrüche und Verweise. Die Syntax dieser Elemente ist in WML von HTML übernommen worden. Auch Grafiken können in WML eingebunden werden, und Formulare lassen sich ebenfalls definieren. Abgesendete Formulare können analog zu HTML-Formularen z.B. durch CGI-Scripts auf dem WAP-Server verarbeitet werden.

nach oben
weiter | Seite XML-Deklaration und Verarbeitungsanweisungen
zurück | Seite CSS-Browserweichen zum Ausschließen älterer Browser
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs

© 2007 Seite Impressum


SELFHTML: XML / Regeln für XML-Dateien

SELFHTML

Regeln für XML-Dateien
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Seite Einführung in XML.
In diesem Abschnitt wird beschrieben, wie XML-Dateien aufgebaut sind, welches die wichtigen Merkmale von XML-Dateien sind, und welche Regeln eine XML-Datei befolgen muss.
Der Abschnitt besteht aus folgenden Seiten:

Seite XML-Deklaration und Verarbeitungsanweisungen
Seite Die Dokumenttyp-Deklaration
Seite Regeln für Tags, Attribute, Wertzuweisungen und Kommentare
Seite Wohlgeformtheit, Gültigkeit und Vollständigkeit einer XML-Datei
Seite Baumstruktur und Knoten einer XML-Datei
Seite XML-Namensräume
Seite Zeichen, Zeichenkodierungen und nicht interpretierte Abschnitte
Seite Regeln beim Editieren von XML und Dateinamenkonventionen

nach oben

© 2007 Seite Impressum


SELFHTML: XML / Regeln für XML-Dateien / XML-Deklaration und Verarbeitungsanweisungen

SELFHTML

XML-Deklaration und Verarbeitungsanweisungen
Informationsseite

nach unten Einfache XML-Deklaration
nach unten Zusätzliche Angaben zur Zeichenkodierung und zum DTD-Bezug
nach unten Verarbeitungsanweisungen innerhalb einer XML-Datei
nach unten

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.2 Einfache XML-Deklaration

Jede XML-Datei sollte mit einer Auszeichnung beginnen, die den Bezug zu XML herstellt. Dazu dient die XML-Deklaration am Beginn der Datei.

Beispiel:

<?xml version="1.0"?>
<!-- restliche XML-Datei folgt ab hier -->

Erläuterung:

Die XML-Deklaration ist also eine besondere, alleinstehende Auszeichnung, deren erstes und letztes Zeichen innerhalb der spitzen Klammern < und > ein Fragezeichen ? ist. Unmittelbar hinter dem Anfangsfragezeichen muss xml (kleingeschrieben) stehen. Dahinter können in Form von Attributen verschiedene Angaben folgen. Die Angabe der XML-Versionsnummer ist obligatorisch und deshalb auch in der einfachen Variante erforderlich. "Versionsnummer" bezieht sich dabei auf die Version der Sprachspezifikation von XML. Derzeit ist die Version 1.0 von XML maßgeblich. Es gibt zwar bereits eine Version 1.1, doch die gegenwärtigen XML-Parser unterstützen normalerweise nur die Version 1.0. Da das Konzept von XML syntaktisch weitgehend ausgereift ist, ist auch nicht mit einer Versionenflut zu rechnen. Benutzen Sie also außer in begründeten Ausnahmefällen die Angabe version="1.0".

Beachten Sie:

Die XML-Deklaration sieht vom Typ her aus wie eine nach unten Verarbeitungsanweisung. Sie gehört jedoch nicht zu den eigentlichen Daten der XML-Datei und wird in der Seite Baumstruktur der Daten auch nicht repräsentiert.

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.2 Zusätzliche Angaben zur Zeichenkodierung und zum DTD-Bezug

Neben der Versionsangabe kann die XML-Deklaration einer XML-Datei zwei weitere Attribute enthalten: eines zur verwendeten Zeichenkodierung, und ein Ja/Nein-Attribut, ob die zugehörige DTD in der aktuellen Datei steht oder in einer separaten Datei.

Beispiel:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>

Erläuterung:

Mit dem Attribut encoding geben Sie an, welchen Seite Zeichenkodierung Sie zum Speichern der XML-Datei verwenden. Folgende Angaben sollte jeder XML-Parser kennen:

Anweisung | Bedeutung | Hinweis
encoding="UTF-8" | internationaler Kodierung auf Basis der ISO/IEC-10646-Norm mit mindestens 8 Bit Zeichenbreite |
encoding="UTF-16" | internationale Kodierung auf Basis der ISO/IEC-10646-Norm mit mindestens 16 Bit Zeichenbreite |
encoding="ISO-8859-1" | ISO-Kodierung für westeuropäische Sprachen | siehe Seite ISO-8859-1
encoding="ISO-8859-2" | ISO-Kodierung für osteuropäische Sprachen | siehe Seite ISO-8859-2
encoding="ISO-8859-3" | ISO-Kodierung für südeuropäische Sprachen | siehe Seite ISO-8859-3
encoding="ISO-8859-4" | ISO-Kodierung für nordeuropäische Sprachen | siehe Seite ISO-8859-4
encoding="ISO-8859-5" | ISO-Kodierung für kyrillische Sprachen | siehe Seite ISO-8859-5
encoding="ISO-8859-6" | ISO-Kodierung für arabische Sprachen | siehe Seite ISO-8859-6
encoding="ISO-8859-7" | ISO-Kodierung für griechische Sprache | siehe Seite ISO-8859-7
encoding="ISO-8859-8" | ISO-Kodierung für hebräische Sprache | siehe Seite ISO-8859-8
encoding="ISO-8859-9" | ISO-Kodierung für türkische Sprache | siehe Seite ISO-8859-9
encoding="ISO-8859-10" | ISO-Kodierung für nordische Sprache | siehe Seite ISO-8859-10

Wenn Sie keine Angaben zur Kodierung der XML-Datei machen, wird per Voreinstellung UTF-8 angenommen (siehe dazu Seite Standard-Zeichenkodierung und Unicode-Unterstützung).

Mit dem Attribut standalone können Sie dem XML-Parser vorab mitteilen, ob die vorliegende Datei sich auf eine externe DTD bezieht oder nicht. Mit standalone="yes" geben Sie an, dass sich die DTD innerhalb der aktuellen Datei befindet. Mit standalone="no" teilen Sie mit, dass sich die DTD in einer separaten Datei befindet. Die Quelle müssen Sie in diesem Fall mit Hilfe der Dokumenttyp-Deklaration angeben.

Beachten Sie:

Obwohl die beiden Attribute standalone und encoding optional sind, müssen sie, wenn sie verwendet werden, in einer bestimmten Reihenfolge notiert werden, nämlich in dieser:
version - encoding - standalone

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.2 Verarbeitungsanweisungen innerhalb einer XML-Datei

Hin und wieder kann es notwendig sein, dass auch innerhalb der XML-Datei spezielle Anweisungen für die auslesende Software notiert werden müssen. Solche Anweisungen nennt man Verarbeitungsanweisungen (processing instructions).

Beispiel:

<?xml version="1.0"?>
<!-- Daten -->
<?xml-stylesheet type="text/css" href="styles.css"?>
<!-- Daten -->
<?PLZprozessor alertBox("es sind ungültige Postleitzahlen angegeben")?>
<!-- Daten -->

Erläuterung:

Die Verarbeitungsanweisung ist ein alleinstehendes Tag, dessen erstes und letztes Zeichen innerhalb der spitzen Klammern < und > ein Fragezeichen ? ist. Unmittelbar hinter dem Anfangsfrageziechen folgt ein symbolischer Name derjenigen Software, an die sich die Verarbeitungsanweisung richtet. Die auslesende Software muss diesen symbolischen Namen natürlich kennen und wissen, dass die Verarbeitungsanweisung an sie gerichtet ist. Das Beispiel zeigt zwei typische Verarbeitungsanweisungen innerhalb der XML-Daten. Mit xml-stylesheet wird beispielsweise ein Browser angesprochen, der die XML-Daten anzeigen soll und durch die entsprechende Verarbeitungsanweisung erfährt, wo die Stylesheet-Datei abgelegt ist, in der die Formatdefinitionen für die XML-Elemente dieser Datei notiert sind. Die zweite Verarbeitungsanweisung innerhalb der XML-Daten im Beispiel ist eine Phantasie-Anweisung, die zeigen soll, dass Verarbeitungsanweisungen ganz verschiedener Natur sein können.

Beachten Sie:

Die Browser reagieren nur auf die standardisierte Verarbeitungsanweisung <?xml-stylesheet?>.

nach oben
weiter | Seite Die Dokumenttyp-Deklaration
zurück | Seite Einführung in XML
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Regeln für XML-Dateien

© 2007 Seite Impressum


SELFHTML: XML / Regeln für XML-Dateien / Die Dokumenttyp-Deklaration

SELFHTML

Die Dokumenttyp-Deklaration
Informationsseite

nach unten Interne und externe DTDs
nach unten Dokumenttyp-Deklaration mit interner DTD
nach unten Dokumenttyp-Deklaration mit externer DTD
nach unten

Interne und externe DTDs

Die Dokumenttyp-Deklaration dient dazu, den Bezug zu einer Seite Document Type Definition (DTD) herzustellen.

Dabei gibt es zwei Möglichkeiten. Entweder Sie definieren die DTD-Regeln innerhalb der Dokumenttyp-Deklaration ( nach unten Dokumenttyp-Deklaration mit interner DTD), oder Sie geben eine separate Datei an, in der diese Regeln definiert sind ( nach unten Dokumenttyp-Deklaration mit externer DTD). Eine externe DTD können Sie lokal adressieren, sofern sich die DTD-Datei auf dem gleichen Rechner(system) befindet wie die Daten. Die externe DTD kann sich jedoch auch auf einem anderen Rechner im Internet befinden. Dann können Sie die DTD mit einem Seite URI adressieren.

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.2 Dokumenttyp-Deklaration mit interner DTD

Die Dokumenttyp-Deklaration muss zu Beginn einer XML-Datei hinter der Seite XML-Deklaration (<?xml...?>) folgen. Die internen DTD-Definitionen notieren Sie innerhalb der Dokumenttyp-Deklaration.

Beispiel:

<?xml version="1.0"?>
<!DOCTYPE Gruss [
  <!ELEMENT Gruss (#PCDATA)>
]>
<Gruss>Hallo Jupiter!</Gruss>

Erläuterung:

Die Dokumenttyp-Deklaration beginnt mit <!DOCTYPE. Dahinter folgt, durch Leerraum getrennt, der Name des Dokumenttyps - im Beispiel Gruss. Der Name des Dokumenttyps muss mit dem Namen des Dokument-Elements, also dem äußersten Element in der XML Datei, identisch sein. Die DTD notieren Sie hinter dem Namen des Dokumenttyps in eckigen Klammern. Die Definitionen können sich über mehrere Zeilen erstrecken. Am Ende muss eine schließende eckige Klammer stehen und das abschließende > der Dokumenttyp-Deklaration. Im Anschluss daran können Daten entsprechend der DTD notiert werden.

Zur Syntax von DTD-Definitionen siehe Kapitel Dokumenttyp-Definitionen (DTDs).

Beachten Sie:

Netscape, Opera, Firefox und Safari nehmen zwar von der internen DTD notiz, beachten aber dessen Angaben bis auf wenige Ausnahmen nicht.

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.2 Dokumenttyp-Deklaration mit externer DTD

Die Dokumenttyp-Deklaration muss auch hier zu Beginn einer XML-Datei hinter der Seite XML-Deklaration (<?xml...?>) folgen. Innerhalb der Dokumenttyp-Deklaration notieren Sie die Referenz zu der Datei mit den DTD-Definitionen.

Beispiele für Dokumenttyp-Deklaration mit externer DTD

<?xml version="1.0"?>
<!DOCTYPE EMail SYSTEM "../src/email.dtd">

<?xml version="1.0"?>
<!DOCTYPE EMail SYSTEM "http://www.example.org/xmlvorlagen/email.dtd">

<?xml version="1.0"?>
<!DOCTYPE EMail PUBLIC "-//MeineFirma Solutions//DTD EMail V 1.0//DE"
  "http://www.example.org/dtds/email.dtd">

Erläuterung

Die Dokumenttyp-Deklaration beginnt mit <!DOCTYPE. Dahinter folgt, durch Leerraum getrennt, der Name des Dokumenttyps - in allen drei obigen Beispielen EMail. Die nächste Angabe in den drei obigen Beispielen lautet entweder SYSTEM oder PUBLIC. Eine dieser beiden Angaben ist nötig, wenn sich die DTD-Definitionen in einer separaten Datei befinden. Verwenden Sie SYSTEM, wenn Sie den Speicherort der DTD explizit angeben, sei es auf dem eigenen Rechnersystem oder auf einem entfernten Rechner im Internet. Die ersten beiden der obigen Beispiele zeigen entsprechende Adressierungen. Verwenden Sie dagegen PUBLIC, wenn Sie den Speicherort der Datei mit den DTD-Definitionen nicht explizit, sondern durch einen so genannten öffentlichen Bezeichner (public identifier) angeben. Solche Angaben zu einem öffentlichen Bezeichner bestehen aus drei Teilen: erstens der Angabe zur veröffentlichenden Person oder Institution, zweitens einer Bezeichnung der DTD, beginnend mit DTD, gefolgt vom Namen der DTD und einer Versionsangabe, und drittens aus einer Angabe zur Sprache, in der die Namen der Elemente, Attribute usw. in der DTD definiert sind. DE steht für deutsch, EN für englisch usw. Hinter der Angabe zum öffentlichen Bezeichner kann dann noch - wie im obigen Beispiel - die Internet-Adresse mit dem tatsächlichen Speicherort der DTD folgen. Öffentliche Bezeichner sind für den Fall gedacht, dass der verarbeitende XML-Parser keine Möglichkeit hat, auf die entfernte DTD zuzugreifen (z.B. weil keine Internet-Verbindung besteht). Eine echte Gültigkeitsprüfung gegen die DTD ist in einem solchen Fall natürlich nur möglich, wenn der Parser die Regeln der DTD "kennt".

DTD-Dateien haben üblicherweise die Endung .dtd. Bei der Adressierung gelten die gleichen Regeln wie beim Seite Referenzieren in HTML.

Beachten Sie:

Netscape, Opera, Firefox und Safari nehmen zwar von der externen DTD Notiz, beachten aber dessen Angaben bis auf wenige Ausnahmen nicht.

nach oben
weiter | Seite Regeln für Tags, Attribute, Wertzuweisungen und Kommentare
zurück | Seite XML-Deklaration und Verarbeitungsanweisungen
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Regeln für XML-Dateien

© 2007 Seite Impressum


SELFHTML: XML / Regeln für XML-Dateien / Regeln für Tags, Attribute, Wertzuweisungen und Kommentare

SELFHTML

Regeln für Tags, Attribute, Wertzuweisungen und Kommentare
Informationsseite

nach unten Tags, Attribute und Wertzuweisungen
nach unten Kommentare
nach unten

Tags, Attribute und Wertzuweisungen

Für Tags, Attribute und ihre Wertzuweisungen gibt es in XML bestimmte Regeln, die Sie kennen müssen.

Groß-/Kleinschreibung von Element- und Attributnamen

XML unterscheidet im Gegensatz zu klassischem HTML strikt zwischen Groß- und Kleinschreibung. Die beiden folgenden Notationen sind beide XML-gerecht, aber aus Sicht von XML nicht das Gleiche:

<tier art="fisch">...</tier>
<Tier Art="Fisch">...</Tier>

Wenn Sie in einer DTD Tags und Attribute für eine XML-basierte Sprache definieren, sollten Sie also gleich auf die gewünschte Schreibweise achten. Wenn Sie im DTD-Bereich beispielsweise notieren:
<!ELEMENT Platinentyp (#PCDATA)>
Dann müssen Sie im Datenbereich notieren:
<Platinentyp>...</Platinentyp>.
Falsch sind dagegen Notierungen wie:
<platinentyp>...</platinentyp> oder
<PLATINENTYP>...</PLATINENTYP>.

Auch bei Wertzuweisungen gilt die Unterscheidung zwischen Groß- und Kleinschreibung. Das ist besonders dann von Bedeutung, wenn Sie in einer DTD nur bestimmte Wertzuweisungen für ein Attribut erlauben, z.B. links, rechts oder zentriert.

Anführungszeichen bei Wertzuweisungen

Bei XML gilt ohne Ausnahme: alle Wertzuweisungen an Attribute müssen in Anführungszeichen stehen.

<bereich sprache=deutsch dialekt=bayerisch>     <!-- falsch -->
<bereich sprache="deutsch" dialekt="bayerisch"> <!-- richtig -->

Innerhalb von Wertzuweisungen an Attribute können Sie auch das Apostroph-Zeichen ' und das Anführungszeichen " verwenden. Diese beiden Zeichen müssen Sie dann aber unbedingt maskieren, nämlich in der Form &apos; für ' und &quot; für ".

Elemente bestehen aus Tags und End-Tags

In XML gibt es keine alleinstehenden Tags wie in HTML beispielsweise <br>, <img> oder <hr> - jedes Element muss aus Anfangs- und End-Tag bestehen. Es gibt in XML auch keine optionalen End-Tags, wie es in HTML etwa bei </li> oder </option> der Fall ist.

Ausnahme: Leere Elemente

Ausnahmen sind so genannte leere Elemente, also Elemente ohne Inhalt. Solche Elemente können ohne zugehöriges End-Tag notiert werden, müssen jedoch als leer gekennzeichnet werden.

<linie>         <!-- falsch -->
<linie/>        <!-- richtig -->
<linie />       <!-- richtig -->

Um ein Element als leer zu kennzeichnen, muss am Ende vor der schließenden spitzen Klammer ein Schrägstrich notiert werden. Das Leerzeichen davor ist optional, aber zu empfehlen. Denn <linie/> könnte ein unausgereifter XML-Parser auch fälschlich als unerlaubtes Zeichen des Elementnamens linie interpretieren.

Alternativ zu dieser Notation können Sie leere Elemente auch in der Form <linie></linie> notieren. Der Grund ist, dass XML eigentlich für jedes Element einen Inhalt vorsieht, und dass ein leeres Element einfach ein Element ohne Inhalt ist. Wichtig ist dabei jedoch, dass Anfangs- und End-Tag unmittelbar in Folge notiert werden, ohne irgendwelche Zeichen dazwischen!

Elementnamen

Elementnamen müssen ein paar Regeln einhalten:

<xml-datei>         <!-- falsch -->
<datei-xml>         <!-- richtig -->
<1a>                <!-- falsch -->
<a1>                <!-- richtig -->
<gleich=gleich>     <!-- falsch -->
<gleich-gleich>     <!-- richtig -->
<mein element>      <!-- falsch -->
<mein-element>      <!-- richtig -->

Elementnamen dürfen nicht mit der Zeichenfolge xml und nicht mit Ziffern beginnen, und sie dürfen keine Gleichheitszeichen und keine Leerzeichen enthalten. Weitere Einzelheiten dazu im Abschnitt Seite Regeln für Namen.

Kommentare

Innerhalb von XML-Dateien - auch innerhalb von DTD-Dateien oder DTD-Bereichen innerhalb einer XML-Datei - können Sie Ihre Daten oder Definitionen zur allgemeinen Verständlichkeit kommentieren. Dabei gelten die gleichen Regeln wie in HTML.

Beispiel:

<lagertemp>4°</lagertemp>
<!-- empfohlene Aufbewahrungstemperatur -->

Ein Kommentar beginnt mit der Zeichenfolge <!-- und endet mit -->. Er kann sich über mehrere Zeilen erstrecken. Was innerhalb des Kommentars steht, wird nicht interpretiert.

nach oben
weiter | Seite Wohlgeformtheit, Gültigkeit und Vollständigkeit einer XML-Datei
zurück | Seite Die Dokumenttyp-Deklaration
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Regeln für XML-Dateien

© 2007 Seite Impressum


SELFHTML: XML / Regeln für XML-Dateien / Wohlgeformtheit, Gültigkeit und Vollständigkeit einer XML-Datei

SELFHTML

Wohlgeformtheit, Gültigkeit und Vollständigkeit einer XML-Datei
Informationsseite

nach unten Wohlgeformtheit eines XML-Dokuments
nach unten Gültigkeit eines XML-Dokuments / vollständiges XML-Dokument
nach unten

Wohlgeformtheit eines XML-Dokuments

Der Begriff "Wohlgeformtheit", der Ihnen im Zusammenhang mit XML immer wieder begegnen wird, bedeutet, dass eine Datei die Regeln von XML korrekt einhält.

Beispiel einer wohlgeformten XML-Datei:

<?xml version="1.0"?>
<Dialog>
  <Adam Emotion="heftig">ich liebe dich!</Adam>
  <Eva Emotion="heftig">ich dich auch!</Eva>
</Dialog>

Erläuterung:

Es handelt sich aus folgenden Gründen um eine wohlgeformte XML-Datei:

  • am Beginn steht die Seite XML-Deklaration, die den Bezug zu XML herstellt.
  • Es gibt mindestens ein Datenelement (im Beispiel sind es drei: <Dialog>...</Dialog>, <Adam>...</Adam> und <Eva>...</Eva>)
  • Es gibt bei den Datenelementen ein äußerstes Element (auch als Dokument-Element bezeichnet), das alle anderen Datenelemente enthält (im Beispiel: <Dialog>...</Dialog>).

Was jedoch fehlt, ist der Bezug zu einer DTD, in der die verwendeten Elemente definiert sind. Deshalb kann man über das Beispiel sagen, es ist wohlgeformt, aber nicht gültig.

Beachten Sie:

Elemente in wohlgeformten, aber nicht gültigen XML-Dateien können beliebigen Inhalt haben. So ist es problemlos möglich, so etwas wie <Adam>ich <betont>liebe</betont> dich</Adam> zu notieren. Wichtig ist nur, dass die Elemente korrekt verschachtelt sind, d.h. in der umgekehrten Reihenfolge beendet werden, in der sie geöffnet werden, und dass die übrigen Seite Regeln für Tags, Attribute, Wertzuweisungen und Kommentare eingehalten werden. Elemente können auch beliebig oft vorkommen. Einschränkende Regeln gibt es nur, wenn auf eine DTD Bezug genommen wird, in der solche Einschränkungen bei der Elementdefinition angegeben sind.

Gültigkeit eines XML-Dokuments / vollständiges XML-Dokument

Ein gültiges XML-Dokument enthält zu Beginn eine Seite XML-Deklaration und anschließend eine Seite Dokumenttyp-Deklaration, in der entweder eine externe DTD-Datei oder intern die nötigen DTD-Regeln angegeben werden. Man kann also sagen, ein gültiges XML-Dokument ist wohlgeformt und außerdem noch validierbar, also gegen die in einer DTD definierten Regeln überprüfbar.

Beispiel einer gültigen und vollständigen XML-Datei:

<?xml version="1.0"?>
<!DOCTYPE quelle [
  <!ELEMENT quelle (adresse, beschreibung)>
  <!ELEMENT adresse (#PCDATA)>
  <!ELEMENT beschreibung (#PCDATA)>
]>
<quelle>
  <adresse>http://www.willy-online.de/</adresse>
  <beschreibung>alles zum wichtigsten Teil am Manne</beschreibung>
</quelle>

Erläuterung:

Das Beispiel startet mit der üblichen XML-Deklaration. Danach folgt eine Dokumenttyp-Deklaration mit internen DTD-Regeln. Genausogut könnte an dieser Stelle auch eine Dokumenttyp-Deklaration stehen, die auf eine externe DTD verweist. Definiert wird im Beispiel ein Dokumenttyp namens quelle mit dem gleichnamigen Dokument-Element quelle und zwei davon abhängigen Elementen adresse und beschreibung. Zur genauen Syntax von DTD-Definitionen siehe Kapitel Dokumenttyp-Definitionen (DTDs).

Im Anschluss an die Dokumenttyp-Deklaration folgen die Daten. Der Name des Dokumenttyps, im Beispiel quelle, muss gleich dem Namen des Dokument-Elements sein. Das Dokument-Element ist das äußerste Element in der Hierarchie, dem alle anderen Elemente untergeordnet sind. Im Beispiel ist der gesamte Datenbereich in <quelle>...</quelle> eingeschlossen.

Innerhalb des Dokument-Elements werden die Daten nach den Regeln notiert, die von der DTD vorgegeben werden. Im Beispiel wurden im DTD-Bereich die beiden Elemente adresse und beschreibung als innere Elemente des Dokument-Elements quelle definiert. Im Datenbereich spiegelt sich das wider durch die Notationen <adresse>...</adresse> und <beschreibung>...</beschreibung>. Der DTD-Bereich im Beispiel erlaubt nichts anderes als die einmalige Verwendung dieser beiden Elemente.

Das Beispiel erfüllt damit alle Kriterien einer gültigen und vollständigen XML-Datei.

nach oben
weiter | Seite Baumstruktur und Knoten einer XML-Datei
zurück | Seite Regeln für Tags, Attribute, Wertzuweisungen und Kommentare
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Regeln für XML-Dateien

© 2007 Seite Impressum


SELFHTML: XML / Regeln für XML-Dateien / Baumstruktur und Knoten einer XML-Datei

SELFHTML

Baumstruktur und Knoten einer XML-Datei
Informationsseite

nach unten Die Baumstruktur von XML-Dokumenten
nach unten Knoten und Knoten-Sets in der Baumstruktur
nach unten

Die Baumstruktur von XML-Dokumenten

Ein XML-gerechtes Dokument besteht aus Elementen, Attributen, ihren Wertzuweisungen, und dem Inhalt der Elemente, der aus Text oder aus untergeordneten Elementen bestehen kann, die ihrerseits wieder Attribute mit Wertzuweisungen und Inhalt haben können. Es gibt Elemente mit und ohne Attribute, Elemente, innerhalb deren viele andere Elemente vorkommen können, und solche, innerhalb deren nur Text vorkommen kann, und sogar leere Elemente, die keinen Inhalt haben können. Die Struktur, die aus diesen Bestandteilen und ihren Grundregeln entsteht, lässt sich als Baumstruktur begreifen.

Beispiel-Code (XML):

<spielfilme>
 <film regie="Tom Tykwer" titel="Lola rennt">
  <beschreibung>
    <name typ="w">Lola</name> rennt für <name typ="m">Manni</name>, der 100000 Mark
    liegengelassen hat und noch 20 Minuten Zeit hat, das Geld auszuliefern.
  </beschreibung>
 </film>
</spielfilme>

Darstellung als Baumstruktur:

Beispiel-Code als Baumstruktur

Anstelle von "Baumstruktur" zu reden, könnte man auch den Vergleich zu einer Verzeichnis- und Dateistruktur verwenden.

Konsequenzen für die Datenverarbeitung:

Die Datenstruktur einer XML-Datei lässt sich nicht nur genauso abbilden wie eine Verzeichnis- und Dateistruktur, sie wird von der verarbeitenden Software auch ganz ähnlich gehandhabt.

Ein Seite XML-Parser arbeitet eine XML-Datei ab, indem er der Hierarchie folgt, die sich durch die Baumstruktur der Daten ergibt. Jedes Element, jedes Attribut, jede Wertzuweisung an ein Attribut, jeder Zeicheninhalt eines Elements wird dabei zu einem eigenen Bestandteil des Baums. Jeder dieser Bestandteile ist einzeln adressierbar.

Knoten und Knoten-Sets in der Baumstruktur

Um über die Bestandteile einer XML-Baumstruktur korrekt reden zu können, gibt es die beiden Begriffe Knoten und Knoten-Set. Beide Begriffe beleuchten die Baumstruktur einfach nur aus unterschiedlichen Blickwinkeln.

Knoten

Wenn man von Knoten redet, meint man die Bestandteile der Baumstruktur.
Jedes XML-Dokument beginnt mit einem Wurzelknoten. Dieser hat jedoch keine konkrete Ausprägung, sondern ist nur der abstrakte "Ursprung" der Daten. Erst sein unmittelbarer Abkömmling in der Baumstruktur hat eine konkrete Ausprägung: nämlich das Dokument-Element, also das äußerste, den gesamten übrigen Inhalt umfassende Element. Im obigen nach oben Beispiel ist dies das Element spielfilme. Dieser oberste Knoten unterhalb des abstrakten Wurzelknotens hat im Beispiel einen Kindknoten namens film. Aus Sicht des Knotens film ist der Knoten spielfilme der Elternknoten. Der Knoten film hat drei untergeordnete Knoten, nämlich die Attribute regie und titel sowie das Element beschreibung. In der XML-Praxis werden jedoch Attribute eines Elements anders eingestuft als der Inhalt des Elements. Bei Attributknoten spricht man von assoziierten Knoten, beim Inhalt dagegen von Kindknoten. Diese feine Unterscheidung bleibt in der obigen Abbildung unberücksichtigt.

Ein Attribut wie regie hat zwar selber noch mal einen eigenen Kindknoten, nämlich den Text Tom Tykwer, aber der Wert eines Attributes kann in XML nicht direkt adressiert werden. Jeder andere in der Baumstruktur abbildbare Bestandteil ist also ein Knoten.

Knoten-Sets

Wenn man von Knoten-Sets redet, denkt man aus Sicht der Wege zu den einzelnen Knoten.
Um einzelne Knoten zu adressieren, kann man den Pfad dorthin angeben, ganz ähnlich wie in einer Struktur aus Verzeichnissen, Unterverzeichnissen und Dateien. So hat im Beispiel das erste vorkommende Element name, das ja auch ein Knoten ist, den Pfad /spielfilme/film/beschreibung. Das zweite vorkommende Element name hat allerdings den gleichen Pfad, ebenso wie der restliche Text, der den Inhalt des Elements beschreibung bildet. Wenn man also aus Sicht eines Pfades in der Baumstruktur denkt, gibt es unterhalb eines solchen Pfades keinen, einen oder mehrere Knoten. Diese zunächst unbestimmte Anzahl Knoten, die unterhalb eines bestimmten Pfades liegen, bezeichnet man als Knoten-Set.

nach oben
weiter | Seite XML-Namensräume
zurück | Seite Wohlgeformtheit, Gültigkeit und Vollständigkeit einer XML-Datei
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Regeln für XML-Dateien

© 2007 Seite Impressum


SELFHTML: XML / Regeln für XML-Dateien / XML-Namensräume

SELFHTML

XML-Namensräume
Informationsseite

nach unten Universelle Eindeutigkeit von Elementen und Attributen
nach unten Dateninseln mit Namensraum definieren
nach unten Mehrere Namensräume gleichzeitig verwenden
nach unten

Universelle Eindeutigkeit von Elementen und Attributen

Ein XML-Dokument besteht im wesentlichen aus Elementen und Attributen. Durch die Zuordnung zu einer DTD gehören Elemente und Attribute dem Namensraum dieser DTD an. Fehlt jedoch die Dokumenttyp-Deklaration und das Dokument ist zwar Seite wohlgeformt, aber nicht Seite gültig, dann gibt es keine solche eindeutige Zuordnung. Es bleibt unklar, "woher" (aus welchem Namensraum) die verwendeten Element- und Attributnamen kommen. Dazu besteht die Möglichkeit, bei einem Elementnamen oder Attributnamen explizit einen Namensraum anzugeben.

Besonders wichtig ist die Bezeichnung des Namensraums, wenn sich Namen von Elementen oder Attributen aus unterschiedlichen Namensräumen in die Quere kommen. Angenommen, in einem XML-Dokument gibt es zweimal ein Element namens div. Einmal bezieht es sich auf einen eigenen Namensraum, und einmal soll es als HTML-Element fungieren. Nur durch die Zuordnung zu einem bestimmten Namensraum ist in dem Fall klar, in welchem "Kontext" das Element interpretiert werden soll.

Zu diesem Zweck hat das W3-Konsortium den Begriff der qualifizierten Namen (qualified names) eingeführt. Qualifizierte Namen bestehen immer aus einem Präfix, der den Namensraum bezeichnet, und einem lokalen Namensteil, der den Namen des Elements oder Attributs innerhalb des Namensraums bezeichnet. Beim Arbeiten mit mehreren Namensräumen gleichzeitig ist es wichtig, qualifizierte Namen zu notieren.

Dateninseln mit Namensraum definieren

Sie können innerhalb eines XML-Dokuments "Inseln" mit Daten aus bestimmten Namensräumen definieren.

Beispiel:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<buch xmlns="http://www.meinserver.de/XML/buch">
<kapitel nummer="1">
  <html xmlns="http://www.w3.org/TR/REC-html-40">
    <head><title>Einleitung</title></head>
    <body>
     <h1>Einleitung</h1>
     <p>Das Buch beginnt mit diesem Text...</p>
    </body>
   </html>
</kapitel>
</buch>

Erläuterung:

Das Beispiel zeigt ein XML-Dokument. Es enthält ein Dokument-Element namens buch. In dessen Einleitungs-Tag ist eine XML-Namensraumdeklaration enthalten. Dazu wird in dem einleitenden Tag das Attribut xmlns notiert (xmlns = XML name space, also XML-Namensraum). Dahinter folgt ein Seite URI, der angibt, auf welchen anderen Namensraum in diesem Element Bezug genommen wird. Dieser URI muss nicht unbedingt eine tatsächlich aufrufbare Adresse sein. Es handelt sich um eine reine Konvention, vergleichbar einer eindeutigen Namensvergabe. Bei eigenen XML-Sprachen können Sie diese Adressen selbst vergeben. Im Beispiel wird http://www.meinserver.de/XML/buch gewählt. Das buch-Element selbst und seine untergeordneten Elemente (Kindelemente) - z.B. das Element kapitel - beziehen sich nun auf den definierten Namensraum. Unterhalb des kapitel-Elements ist im Beispiel jedoch wieder ein Element mit Namensraumdeklaration enthalten: ein html-Element mit xmlns-Attribut. Im Fall von HTML 4.0 sieht das W3-Konsortium dazu die Angabe http://www.w3.org/TR/REC-html-40 vor. Alle Kindelemente, die nun zwischen <html> und </html> stehen, gehören zum HTML-Namensraum (oder: zur HTML-Dateninsel).

Das Beispiel enthält also ineinander verschachtelte Namensräume. Seine Grobstruktur lässt sich optisch so darstellen:

Mehrere Namensräume gleichzeitig verwenden

Beim Arbeiten mit nach oben Dateninseln sind die Namensräume durch die Elementhierarchie sauber voneinander getrennt. Es ist jedoch auch möglich, Namensräume zu mischen. Dabei müssen Sie Präfix-Angaben notieren, um den jeweils gemeinten Namensraum zuzuordnen.

Beispiel:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<bestellung xmlns:produkt="http://localhost/XML/produkt" xmlns:kunde="http://localhost/XML/kunde">
 <produkt:nummer>p49393</produkt:nummer>
 <produkt:name>JXY Rasierer VC100</produkt:name>
 <produkt:menge>1</produkt:menge>
 <produkt:preis>69,--</produkt:preis>
 <kunde:nummer>k2029</kunde:nummer>
 <kunde:name>Meier, Fritz</kunde:name>
 <kunde:lieferadresse>Donnerbalkenstr.14, 80111 München</kunde:lieferadresse>
</bestellung>

Erläuterung:

In dem Beispiel geht es um die Datenstruktur einer Bestellung. Eine typische Bestellung greift auf zwei verschiedene Datenbestände zu: für das bestellte Produkt auf den Produktdatenbestand, und für den Besteller auf den Kundendatenbestand. Dies kommt im Beispiel dadurch zum Ausdruck, dass im einleitenden Tag des Elements bestellung zwei Namensraumdeklarationen stehen: eine für produkt und eine für kunde. Zwischen <bestellung> und </bestellung> soll mit Elementen aus beiden Namensräumen gearbeitet werden können. Dazu werden bei den Namensraumdeklarationen Präfixe mit definiert. Anstelle eines reinen Attributs xmlns wird hier xmlns:produkt und xmlns:kunde notiert, also xmlns, gefolgt von einem Doppelpunkt und einem Namen (alles ohne Leerzeichen dazwischen). Die Namen wie im Beispiel produkt und kunde sind dabei frei wählbar. Als Wertzuweisung an das so definierte Attribut folgt ein per Konvention vergebener URI. Im Beispiel werden http://localhost/XML/produkt und http://localhost/XML/kunde gewählt.

Bei den Elementen, die innerhalb von <bestellung> und </bestellung> vorkommen, wird durch Angabe der definierten Präfixnamen auf den gewünschten Namensraum Bezug genommen. produkt:nummer nimmt beispielsweise auf den Namensraum Bezug, der mit xmlns:produkt="http://localhost/XML/produkt" definiert wurde, während kunde:nummer auf den Namensraum Bezug nimmt, der mit xmlns:kunde="http://localhost/XML/kunde" definiert wurde.

nach oben
weiter | Seite Zeichen, Zeichenkodierungen und nicht interpretierte Abschnitte
zurück | Seite Baumstruktur und Knoten einer XML-Datei
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Regeln für XML-Dateien

© 2007 Seite Impressum


SELFHTML: XML / Regeln für XML-Dateien / Zeichen, Zeichenkodierungen und nicht interpretierte Abschnitte

SELFHTML

Zeichen, Zeichenkodierungen und nicht interpretierte Abschnitte
Informationsseite

nach unten XML-eigene Zeichen
nach unten Standard-Zeichenkodierung und Unicode-Unterstützung
nach unten Nicht interpretierte Abschnitte (CDATA)
nach unten

XML-eigene Zeichen

In XML gilt wie in HTML: Zeichen, die bei der XML-Syntax besondere Bedeutung haben, müssen Sie umschreiben, wenn Sie sie im normalen Text zwischen den Tags verwenden wollen. Folgende Zeichen sind betroffen:

Zeichen | Notation in XML
< | &lt;
> | &gt;
& | &amp;
" | &quot;
' | &apos;

Beispiel:

<Element>dieses Element wird notiert als &lt;Element&gt;...&lt;/Element&gt;</Element>

Erläuterung:

Das Beispiel erzeugt folgende Ausgabe:
dieses Element wird notiert als <Element>...</Element>

Standard-Zeichenkodierung und Unicode-Unterstützung

In einer XML-Datei lassen sich alle Zeichen des in ISO/IEC 10646 definierten Zeichenvorrats notieren. Dieses Zeichensystem wurde 1993 von der International Organization for Standardization (ISO) entwickelt. Es soll die Zeichen aller natürlichen und symbolischen Sprachen der Welt abdecken. Seit der Seite Unicode-Version 1.1 entspricht ISO/IEC 10646 dem Unicode-System. Um genau zu sein: Erlaubt sind Unicode-Zeichen mit den Hexadezimalwerten #x20 bis #xD7FF, #xE000 bis #xFFFD und #x10000 bis #x10FFFF. Nicht erlaubt sind lediglich die beiden Zeichen mit den Hexadezimalwerten #xFFFE und #xFFFF, da diese beiden keine Unicode-Zeichen darstellen.

Ferner sind folgende Steuerzeichen erlaubt: Tabulator-Zeichen (hexadezimal #x9), Zeilenvorschub-Zeichen (#xA) und Wagenrücklaufzeichen (#xD). Diese drei Zeichen plus das normale Leerzeichen (#x20) bilden die so genannten Leerraumzeichen.

Wenn Sie in der Seite XML-Deklaration keine andere Kodierung angeben, verarbeitet der Seite Parser den Inhalt einer Datei gemäß der Kodierung UTF-8 oder UTF-16. Für die Praxis des Editierens ist zu beachten, dass Ihr Editor die XML-Datei stets unter Verwendung derjenigen Kodierung speichern muss, die Sie in der XML-Deklaration angeben. Moderne Editoren erlauben das Wählen der Kodierung beim Speichern.

Beim Verwenden der fortschrittlichen Kodierungen UTF-8 oder UTF-16 können Sie alle Zeichen des Unicode-Systems ohne Umschreibung über die Tastatur eingeben oder direkt einfügen. Einige ältere Editoren unterstützen jedoch nur die herkömmlichen, auf 256 Zeichen begrenzten Seite ISO-8859-Kodierungen, zum Beispiel die für westeuropäische Sprachen übliche Kodierung ISO-8859-1. Damit lassen sich lediglich die deutschen Umlaute und gewisse relevante Sonderzeichen ohne Umschreibung notieren.

Alle Zeichen des Unicode-Zeichenvorrats, die Sie mit Ihrem Editor nicht direkt eingeben können oder die im Zeichenvorrat der verwendeten Kodierung nicht vorkommen, können Sie über eine numerische Angabe notieren. Die Notationsweise ist dabei in XML die gleiche wie in HTML 4.0, also z.B. für den Buchstaben ü die Notation &#252; (dezimal) oder &#xFC; (hexadezimal). Siehe auch Seite Allgemeines zur Zeichenreferenz (HTML)

Nicht interpretierte Abschnitte (CDATA)

XML-Dokumente dürfen so genannte CDATA-Abschnitte enthalten, die vom Seite Parser nicht als XML-Quellcode interpretiert werden. Im Unterschied zu Seite Kommentaren werden solche Bereiche jedoch mit ausgegeben, einfach als eine nicht weiter interpretierte Zeichenfolge.

Beispiel:

<![CDATA[<Element>dieses Element wird nur als Zeichenfolge ausgegeben</Element>]]>

Erläuterung:

Die Definition von CDATA-Abschnitten beginnt mit einer öffnenden spitzen Klammer <. Dahinter folgt unmittelbar anschließend ein Ausrufezeichen ! und eine öffnende eckige Klammer [. Dahinter notieren Sie, in Großbuchstaben, das Schlüsselwort CDATA, und dahinter nochmals eine öffnende eckige Klammer ([). Zwischen dieser einleitenden Zeichenfolge und der beendenden, markiert durch zwei schließende eckige Klammern und ein eine schließende spitze Klammer (]]>), können Sie beliebigen Text notieren. Im Beispiel ist ein XML-Element durch die Tags <Element>...</Element> innerhalb des CDATA-Bereichs notiert. Dieses wird vom Parser jedoch nicht als Element namens Element betrachtet, sondern einfach als Text, genauso wie er da steht.

nach oben
weiter | Seite Regeln beim Editieren von XML und Dateinamenkonventionen
zurück | Seite XML-Namensräume
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Regeln für XML-Dateien

© 2007 Seite Impressum


SELFHTML: XML / Regeln für XML-Dateien / Regeln beim Editieren von XML und Dateinamenkonventionen

SELFHTML

Regeln beim Editieren von XML und Dateinamenkonventionen
Informationsseite

nach unten Konventionen beim Editieren von XML
nach unten Konventionen für Dateinamen
nach unten

Konventionen beim Editieren von XML

XML-Quelltext ist wie HTML Klartext. Um Ihre Daten im Quelltext übersichtlich zu halten, können Sie Tabulator-Zeichen und Zeilenumbrüche verwenden. Beim Zeilenumbruch sind die Steuerzeichen für Wagenrücklauf (CR - carriage return) und Zeilenumbruch (LF - line feed) erlaubt. Das bedeutet, Sie können XML-Dateien mit gängigen Texteditoren unter MS Windows, Unix-Derivaten, Macintosh usw. problemlos bearbeiten.

Mehrere Leerzeichen oder Leerzeilen in Folge werden zu einem Leerzeichen zusammengefasst, solange Sie in der DTD für ein Element nichts anderes angeben. Um innerhalb von Text mehrere Leerzeichen in Folge zu erzwingen, müssen Sie das geschützte Leerzeichen (&#160;) benutzen. Die Eingabe von &#160;&#160;&#160; erzwingt beispielsweise 3 Leerzeichen in Folge. Beachten Sie, dass Sie hier - anders als in HTML - nicht das benannte Zeichen &nbsp; verwenden dürfen, solange in der DTD kein Seite Entity dafür definiert ist.

Für die Formatierung von XML-Daten müssen Sie eine Stylesheet-Sprache verwenden (siehe Seite XSL oder CSS - Formatierung für XML-Elemente).

Konventionen für Dateinamen

Für XML-Dokumente gibt es keine vorgeschriebenen Dateinamenkonventionen. Im Hinblick auf die Verwendung im WWW, wo sich Webserver und aufrufender Browser stets über das zu übertragende Datenformat (den Seite MIME-Typ) einigen müssen, ist es jedoch sinnvoll, sich an folgende beiden Regeln zu halten:

  1. XML-Dokumente ohne bestimmten DTD-Bezug sollten die Endung .xml erhalten. Diese Endung ist normalerweise per Voreinstellung für den MIME-Typ application/xml eingetragen, der für XML-Dateien gilt.

  2. XML-Dokumente, die sich auf öffentliche DTDs beziehen, sollten Dateiendungen benutzen, die auch öffentliche Beispieldokumente benutzen. So sollten WML-Dateien beispielsweise die Endung .wml verwenden.
nach oben
weiter | Seite Allgemeines zu DTDs
zurück | Seite Zeichen, Zeichenkodierungen und nicht interpretierte Abschnitte
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Regeln für XML-Dateien

© 2007 Seite Impressum


SELFHTML: XML / Dokumenttyp-Definitionen (DTDs)

SELFHTML

Dokumenttyp-Definitionen (DTDs)
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Seite Einführung in XML und Kapitel Allgemeine Regeln für XML.
In diesem Abschnitt wird beschrieben, wie Sie Regeln für eigene XML-Sprachen definieren können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Allgemeines zu DTDs
Seite Bearbeitungsregeln für DTDs
Seite Elemente und Verschachtelungsregeln
Seite Attribute und Wertzuweisungen
Seite Entities für Textbausteine und Umschreibungen
Seite Notationen für referenzierte Daten

nach oben

© 2007 Seite Impressum


SELFHTML: XML / Dokumenttyp-Definitionen (DTDs) / Allgemeines zu DTDs

SELFHTML

Allgemeines zu DTDs
Informationsseite

nach unten Wann ist eine DTD nötig?
nach unten Eigene oder vorhandene DTD verwenden?
nach unten Datei-interne oder DTD in separater Datei verwenden?
nach unten Ablageort für DTDs in separaten Dateien
nach unten Namenskonzept für eine DTD
nach unten Datenanalyse als Vorbereitung zum Entwurf einer DTD
nach unten

Wann ist eine DTD nötig?

Eine DTD brauchen Sie immer dann, wenn Sie XML-Daten wünschen, die nicht nur Seite wohlgeformt, sondern auch Seite gültig sind. Denn "gültig" bedeutet: validierbar gegen eine DTD.

Es ist nicht zwingend notwendig, dass eine XML-Datei "gültig" ist und eine zugehörige DTD besitzt. Das Kriterium der Gültigkeit ist lediglich die "hohe Schule" von XML und der optimale Zustand. In vielen Praxisfällen ist es gar nicht nötig, eine DTD zu haben, z.B. weil man nur ein ordentliches Datenformat benötigt, das aber von keinem Seite Parser interpretiert wird, der auf die Gültigkeit gegen eine DTD testet. Wenn Sie also z.B. einfach Daten in XML-gerechter Form abspeichern wollen und diese mit einem Kapitel CGI-Script verarbeiten, das den XML-Code mit eigenen Befehlen in HTML-Code für den Browser übersetzt, dann brauchen Sie eigentlich keine DTD und können die Dokumenttyp-Deklaration weglassen.

Dennoch ist das Erstellen einer DTD wo immer die Zeit es zulässt sinnvoll. Denn die DTD ist - selbst wenn die Daten im Verarbeitungsprozess nicht auf Gültigkeit getestet werden - in jedem Fall eine Dokumentation des gewünschten Sollzustands der Daten. Vor allem, wenn Datenbestände über einen längeren Zeitraum aufbewahrt und von verschiedenen Personen weiterverarbeitet oder weitergepflegt werden, ist eine DTD eine wichtige normative Grundlage für die Korrektheit und Einheitlichkeit der Daten.

Auch im Hinblick auf die mehrfache Verarbeitung von Daten ist eine DTD wertvoll ("mehrgleisiges Publizieren aus ein und derselben Datenquelle"). Denn nur wenn sichergestellt ist, dass bei der Datenerfassung alle definierten Regeln eingehalten werden, können Programme diese Daten ohne Verlust verarbeiten.

Eigene oder vorhandene DTD verwenden?

Generell ist es immer von Vorteil, sich an bereits vorhandene Standards zu halten. XML erlaubt zwar das Anlegen eigener DTDs, aber dabei besteht auch die Gefahr, dass das Rad immer wieder neu erfunden wird. Bevor Sie die Entscheidung treffen, eine größere, eigene DTD neu zu entwickeln, sollten Sie sich einen Überblick verschaffen, welche öffentlich zugänglichen DTDs bereits existieren. Eine Übersicht bekannter, vom W3-Konsortium entwickelter XML-Sprachen finden Sie im Abschnitt Seite Wichtige XML-Standardsprachen.

Aber auch wenn Sie eigene DTDs entwickeln, müssen Sie nicht für jede Anwendung eine völlig neue DTD mit allem Drumherum entwickeln. Das DTD-Konzept von XML sieht nämlich die Möglichkeit vor, DTDs modular zu verwenden. Das bedeutet, Sie können sich DTDs für bestimmte Zwecke schreiben und diese dann in andere DTDs einbinden. So ist es möglich, "schlanke" DTDs zu schreiben, die aber dennoch sehr komplexe Daten-Designs enthalten, weil sie sich aus anderen, elementareren DTDs zusammensetzen. Innerhalb eines Unternehmens ist es beispielsweise sinnvoll, sich über solch modulare DTDs Gedanken zu machen. Die Überlegungen, die man dabei anzustellen hat, gleichen denjenigen, die beim Entwurf großer, relationaler Datenbanken anfallen. Es geht dabei also letztlich um die Normalisierung von Daten.
Im Abschnitt Seite Modulare DTDs mit Hilfe von Entities wird das Prinzip beschrieben, wie Sie DTDs in andere DTDs einbinden.

Bei öffentlich bekannten DTDs besteht ein Vorteil darin, dass meist auch schon verarbeitende Software dafür existiert, z.B. Übersetzer-Scripts in HTML, PostScript oder MIF. XML-Sprachen wie SVG etwa werden mittlerweile schon von bekannten Grafikprogrammen verarbeitet. Mit dem Entwickeln einer DTD ist es eben meistens nicht getan - in der Regel benötigt man mehr Software als einen reinen Seite Parser, der die XML-Daten nur überprüft, aber sonst nichts weiter damit tut. Zumindest benötigen Sie in der Regel Stylesheets oder Scripts zur Kapitel Darstellung von XML-Daten. Der damit verbundene Aufwand kann sich bei umfangreicheren DTDs schnell in der Größenordnung bewegen, in der das Entwickeln einer individuellen Software-Lösung liegt.

Datei-interne oder DTD in separater Datei verwenden?

Interne DTDs sind nur bei kleinen Projekten zu empfehlen, deren Daten sich nur in dieser einen Datei befinden. Für größere Projekte, bei denen sich mehrere oder etliche Datendateien auf eine gemeinsame DTD beziehen, sollten Sie auf jeden Fall eine externe DTD erstellen.

Ablageort für DTDs in separaten Dateien

So wie manche Leute flache und andere Leute tief verschachtelte Verzeichnisstrukturen im Dateisystem bevorzugen, gibt es Verfechter, die DTD und Daten trennen, und andere, die sie zusammen sehen möchten. Gründe lassen sich sicherlich für beide Ansichten finden.

Wichtig ist jedoch die Überlegung, ob auf eine DTD nur vom eigenen Rechner bzw. von lokalen Netzlaufwerken aus zugegriffen wird, oder ob Anwender diese DTD etwa über eine HTTP-Adresse in ihren XML-Daten angeben sollen. In letzterem Fall muss die DTD innerhalb eines Verzeichnisbaums abgelegt werden, die der Webserver als "document root" verwendet. In separate Dateien abgelegte DTDs haben die Dateiendung .dtd.

Namenskonzept für eine DTD

Beim Entwurf einer DTD müssen Sie jede Menge Namen vergeben - für Seite Elemente, für Seite Attribute und Seite Entities. Abgesehen davon, dass alle vergebenen Namen den Seite Regeln für Namen genügen müssen, ist es angebracht, sich im Vorfeld über ein Namenskonzept Gedanken zu machen. Denn selbst wenn den Anwendern, die mit einer DTD arbeiten sollen, zum Bearbeiten ihrer Daten eine WYSIWYG-Umgebung zur Verfügung steht, so werden sie doch mit den Namen der verfügbaren Elemente und Attribute konfrontiert.

Bei DTDs, die international verwendet werden sollen, ist es normalerweise am besten, nur englische Bezeichnungen zu vergeben, also etwa chapter statt Kapitel oder description statt Beschreibung.

Manchmal gibt es auch Gründe, Autoren-, Abteilungs- oder Firmennamen in die Namensgebung mit einfließen zu lassen, z.B. marketing-statement oder developer-statement.

Bei sehr umfangreichen Datenbeständen kann auch die Länge der Namen eine Rolle spielen. So beträgt der Unterschied zwischen der Notation von <personalausweisnummer>...</personalausweisnummer> und <pnr>...</pnr> 36 Byte, was sich bei 1.000.000 Datensätzen entsprechend multipliziert. Längere Namen haben gegenüber Abkürzungen auf jeden Fall den Vorteil der besseren Lesbarkeit. Abkürzungen sollten stets dokumentiert werden, z.B. innerhalb der DTD in Form von Seite Kommentaren.

Die Namensgebung sollte einem einheitlichen Konzept folgen. Es ist z.B. kein guter Stil, in einigen Elementen Groß-/Kleinschreibung anzuwenden, in anderen dagegen nicht, also z.B. Abteilung, aber raumnummer. Da XML zwischen Groß- und Kleinschreibung unterscheidet, sollte die Namensgebung sich für eine Variante durchgängig entscheiden.

Datenanalyse als Vorbereitung zum Entwurf einer DTD

Der Entwurf einer DTD ist - obwohl es sich nicht um "Programmierung" im prozeduralen Sinne handelt - durchaus mit Software-Entwicklung vergleichbar. Bei Software-Projekten, die über einfache kleine Arbeitsscripts hinausgehen, ist es wenig sinnvoll, einfach draufloszuprogrammieren und hinterher festzustellen, dass man zu wenig bedacht und zu wenig auf Erweiterungsmöglichkeiten geachtet hat. Ähnlich ist es beim Entwurf eines Daten-Designs. DTDs werden normalerweise als Regelwerk für eine Klasse von Dokumenten entworfen. Die DTD muss daher flexibel genug sein, um alle aktuellen und absehbaren Anforderungen dieser Dokumentenklasse zu erfüllen.

Der erste Schritt sollte darin bestehen, vorhandenes Datenmaterial, das künftig in XML-Form gespeichert werden soll, zu sichten und zu analysieren. Wie sind die typischen Datenstrukturen aufgebaut? Gibt es beispielsweise in einer Serie von Handbüchern eine immer wiederkehrende und unumstößliche Kapitelreihenfolge? Was ist uneinheitlich und lässt sich vereinheitlichen? Gibt es beispielsweise Handbücher, in denen 5 Überschriftenebenen verwendet werden, und andere, in denen nur 3 verwendet werden? Welche festen Anhaltspunkte gibt es? Gibt es beispielsweise Handbuchabschnitte mit festem Aufbau, z.B. einleitende Funktionsbeschreibung, dann Prozedurbeschreibung, dann Hinweise? Eine Analyse vorhandener Daten liefert den Input zum Daten-Design.

Wenn die vorhandenen Daten ausgewertet sind, sollte man sich auch Gedanken darüber machen, in welcher Weise sich diese Daten später einmal ändern oder erweitern können. Ist es bei einem Handbuchtyp etwa möglich, dass dieser bislang nur Geräte beschreibt, in Zukunft aber auch für die Beschreibung von Software dienen soll? Welche Konsequenzen hätte dies für das Daten-Design? Welche Datenelemente müssten in so einem Fall noch mit berücksichtigt werden? Niemand kann zwar die Zukunft komplett vorhersehen, aber eine DTD sollte durchaus alle denkbare Eventualitäten berücksichtigen. Denn wenn erst einmal massenhaft Daten vorliegen, die auf einer DTD basieren, kann es problematisch werden, die DTD umzustrukturieren.

Bei der Software-Entwicklung hat es sich eingebürgert, im Vorfeld der Kodierung die Funktionsweise der geplanten Software auf verschiedene Weise zu beschreiben. Dafür gibt es Verfahren wie Funktionsbeschreibungen, Flussdiagramme usw. Es gibt Grob- und Feinkonzepte. Für den Entwurf von DTDs haben sich im Laufe der Zeit ähnliche Vorgehensweisen entwickelt. Die Entwicklung einer DTD beinhaltet dabei unter anderem folgende Phasen:

  • Ziele für das Projekt, für das die DTD entwickelt werden soll, sollten ausformuliert werden. So z.B. Validierbarkeit von Dokumenten, Möglichkeit des Mehrfachpublizierens, bessere Konvertierfähigkeit usw.
  • Anforderungen an die Dokumente, die auf der zu entwickelnden DTD basieren sollen, müssen genau ausgearbeitet werden. Dabei helfen folgende Fragestellungen:
    Welche grundlegenen Informationseinheiten müssen diese Dokumente enthalten?
    In welche logische Gruppen lassen sich diese Informationseinheiten einteilen?
    Mit welchen bereits vorhandenen Datenmodellen lässt sich das neu zu erstellende Modell vergleichen?
  • Anforderungen an die DTD müssen genau ausgearbeitet werden. Dabei helfen folgende Fragestellungen:
    Welche Datenstrukturen werden benötigt?
    Welche Daten sollen obligatorisch sein und welche fakultativ?
    Welche der Strukturen müssen unveränderlich und in fester Reihenfolge auftreten?
    Welche Daten gehören in den Inhalt von Elementen, und welche zu den Eigenschaften (Attributen)?
    Bei solchen Fragen des Daten-Designs kann auf die Erfahrungen und das Wissen von Software-Entwicklern, aber auch auf das der Dokument-Anwender zurückgegriffen werden.
  • Feinkonzept der DTD. Dazu gehört:
    das Auswählen der für die DTD benötigten Elemente,
    das Ausarbeiten der Element- und Attributmodelle für die Dokumenthierarchie und der verschiedenen Elementebenen,
    die Validierung des Modells.
  • Komplettierung der Entwicklung und die Implementierung der DTD. Dazu gehört auch die Entscheidung, ob und wie die DTD modularisiert (auf mehrere DTDs verteilt) werden soll, sowie die Frage danach, wie die DTD nach der Einführung gewartet und weiterentwickelt werden kann. Eine ausreichende Dokumentation der DTD (vergleichbar etwa einer W3-Empfehlung zu einer Sprache wie HTML) gehört ebenfalls zu den Aufgaben.
  • Test der DTD. Dazu gehört das Überprüfen der DTD mit Hilfe konkreter, realistischer Dokumente und damit das Überprüfen der gesetzten Ziele.

Bei größeren DTDs oder DTD-Verbundsystemen ist es durchaus sinnvoll, die Pläne der Datenstrukturierung in einfacher und unorthodoxer Form zu visualisieren. Hierarchische Abhängigkeiten zwischen geplanten Datenelementen lassen sich z.B. in Form eines numerierten "Inhaltsverzeichnisses" abbilden, relationale Beziehungen zwischen Daten beispielsweise durch Pfeile.

Als maßgeblich für das Entwickeln von DTDs gelten heute die Publikationen von Eve Maler und Jeanne El Andaloussi (suchen Sie gegebenenfalls in einer Suchmaschine oder bei einem Buch-Service wie deutschsprachige Seite Amazon nach diesen Namen!).

nach oben
weiter | Seite Bearbeitungsregeln für DTDs
zurück | Seite Regeln beim Editieren von XML und Dateinamenkonventionen
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Dokumenttyp-Definitionen (DTDs)

© 2007 Seite Impressum


SELFHTML: XML / Dokumenttyp-Definitionen (DTDs) / Bearbeitungsregeln für DTDs

SELFHTML

Bearbeitungsregeln für DTDs
Informationsseite

nach unten Regeln beim Editieren
nach unten Regeln für Namen
nach unten Kommentare
nach unten Bedingte Abschnitte
nach unten

Regeln beim Editieren

DTDs sind reine Textdateien und können mit normalen Texteditoren erstellt und bearbeitet werden. Es gibt allerdings auch XML-Editoren (siehe Online-Seite Links: XML-Software im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell), die bei der Arbeit unterstützen, indem sie die definierten Datenstrukturen übersichtlich darstellen, z.B. als Baumstruktur. Ungeeignet zur Erstellung von DTDs sind Textverarbeitungsprogramme, die formatierten Text in eigenen Dateiformaten abspeichern.

Beim Editieren sind Sie ähnlich frei wie bei HTML. Die drei folgenden Beispiele zeigen ein und dieselbe Definition, jedoch ganz unterschiedlich formatiert.

Beispielformatierungen:

<!ELEMENT text (#PCDATA) >
<!ELEMENT nummer (#PCDATA) >

<!ELEMENT          text            (#PCDATA)       >
<!ELEMENT          nummer          (#PCDATA)       >

<!ELEMENT
  text
  (#PCDATA)
>
<!ELEMENT
  nummer
  (#PCDATA)
>

Erläuterung:

Formatieren Sie die Inhalte, wenn Sie die DTD direkt mit einem Texteditor bearbeiten, so, dass Sie die optimale Übersicht behalten. Zur optischen Trennung von Inhalten sind Leerzeichen, Tabulator-Zeichen und Zeilenumbrüche erlaubt (auch die Windows-typische Kombination aus "Wagenrücklauf+Zeilenumbruch", in der Datei gespeichert in Form der Steuerzeichen mit den Werten 13 und 10 (hexadezimal xD und xA).

Erlaubt sind in einer DTD ausschließlich DTD-gerechte Inhalte. Sonstige Daten sind nur in Form von nach unten Kommentaren erlaubt.

Regeln für Namen

Diese Regeln gelten bei der Namensvergabe für Seite Elemente, für Seite Attribute und für Seite Entities.

Namen dürfen enthalten:

  • Buchstaben (groß und klein)
  • Ziffern 0 bis 9
  • Interpunktionszeichen _ (Unterstrich), - (einfacher Bindestrich), . (Punkt) und : (Doppelpunkt) - der Doppelpunkt ist jedoch reserviert für Seite Namensräume

Das erste Zeichen eines Namens darf keine Ziffer sein, es muss ein Buchstabe oder eines der erlaubten Interpunktionszeichen sein. In der Praxis sollte das erste Zeichen möglichst immer ein Buchstabe, allenfalls ein Unterstrich sein.

Namen dürfen keine Leerzeichen enthalten.

Unter "Buchstabe" versteht die XML-Spezifikation einen sehr weiten Bereich des gesamten Unicode-Systems, und auch unter "Ziffer" ist mehr erlaubt als die arabischen Ziffern unseres Dezimalsystems. In der Praxis und in Rücksicht auf gewöhnliche Parser ist jedoch zu empfehlen, sich auf die ASCII-Buchstaben A bis Z bzw. a bis z und die 10 bei uns gebräuchlichen Ziffern zu beschränken und auf andere Zeichen zu verzichten, auch auf deutsche Umlaute oder Sonderzeichen anderer Sprachen.

Namen dürfen nicht mit der Zeichenfolge xml (oder XML) beginnen, da diese Zeichenfolge für künftige Weiterentwicklungen von XML reserviert ist.

Namen müssen aus mindestens einem Buchstaben bzw. Unterstrich bestehen. Über die erlaubte Maximallänge von Namen gibt es keine unmittelbaren Aussagen. Die erlaubte Länge eines Tags ist in der SGML-Deklaration für XML jedoch mit 99999999 Zeichen angegeben, was für "unbegrenzt" steht.

Beispiele für unproblematische Namen sind:
Anschrift
hausnummer
plz_ort
telefon.durchwahl
ZiNr
AKZ
a1

Kommentare

Innerhalb von DTDs sind Kommentare erlaubt. Dabei gilt die gleiche Syntax, die aus HTML bekannt ist.

Beispiel:

<!ELEMENT bznr (#PCDATA)>
<!-- Im Element "bznr" wird die Bezugsnummer gespeichert -->

Erläuterung:

Kommentare werden durch die Zeichenfolge <!-- eingeleitet und durch die Zeichenfolge --> abgeschlossen. Dazwischen darf beliebig viel Inhalt stehen, auch über mehrere Zeilen. Ein Seite Parser ignoriert die entsprechenden Abschnitte.

Achten Sie darauf, innerhalb von Kommentaren nicht zwei Bindestriche -- hintereinander zu notieren.

Bedingte Abschnitte

Beim Entwurf größerer DTDs kann es sinnvoll sein, Teile der DTD für bestimmte Zwecke auszuklammern und für andere Zwecke einzuschließen. So ist es beispielsweise denkbar, eine DTD zu entwickeln, die in zwei "Ausbaustufen" benötigt wird - einer einfachen und einer komplexen.

Beispiel:

<![INCLUDE[
<!ELEMENT Vorsitzender (#PCDATA)>
]]>

<![IGNORE[
<!ELEMENT Zweitvorsitzender (#PCDATA)>
]]>

Erläuterung:

Mit dem Schlüsselwort INCLUDE schließen Sie Definitionen ausdrücklich ein, d.h. der Seite Parser wird diese Definitionen verarbeiten. Mit IGNORE schließen Sie Definitionen aus, d.h. der Parser wird diese Definitionen ignorieren und genauso wie nach oben Kommentare behandeln.

Die Definition solcher Abschnitte beginnt mit einer öffnenden spitzen Klammer <. Dahinter folgt unmittelbar anschließend ein Ausrufezeichen ! und eine öffnende eckige Klammer [. Dahinter notieren Sie, in Großbuchstaben, das gewünschte Schlüsselwort, also INCLUDE oder IGNORE, und dahinter nochmals eine öffnende eckige Klammer. Zwischen dieser einleitenden Zeichenfolge und der beendenden, markiert durch zwei schließende eckige Klammern und ein eine schließende spitze Klammer (]]>), können Sie beliebig viele DTD-Definitionen notieren.

nach oben
weiter | Seite Elemente und Verschachtelungsregeln
zurück | Seite Allgemeines zu DTDs
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Dokumenttyp-Definitionen (DTDs)

© 2007 Seite Impressum


SELFHTML: XML / Dokumenttyp-Definitionen (DTDs) / Elemente und Verschachtelungsregeln

SELFHTML

Elemente und Verschachtelungsregeln
Informationsseite

nach unten Allgemeines zu Elementen, Elementtypen und Tags
nach unten Schema zur Definition von Elementtypen
nach unten Elementtypen mit Zeicheninhalt definieren
nach unten Elementtypen mit Elementinhalt definieren
nach unten Beliebig viele Wiederholungen eines Elementtyps definieren
nach unten Alternative und optionale Elementtypen für Elementinhalt definieren
nach unten Elemente mit gemischtem Inhalt definieren
nach unten Elemente mit beliebigem Inhalt definieren
nach unten Leere Elemente ohne Inhalt definieren
nach unten Elementgruppen zusammenfassen
nach unten Zusammenhängendes Beispiel: ein Buch
nach unten

Allgemeines zu Elementen, Elementtypen und Tags

Ein Element ist das, was in einer XML-basierten Auszeichnungssprache durch eine Notation wie z.B. <geburtsdatum>...</geburtsdatum> dargestellt wird. In einer DTD können Sie den zugehörigen Elementtyp definieren, also etwa den Elementtyp geburtsdatum. Dabei bestimmen Sie den Namen des Elements und geben an, welchen Inhalt das Element haben kann.

Elemente können auch verschachtelt sein, und es sind Regeln möglich, wie oft und an welchen Stellen ein Element vorkommen kann. So kann in HTML etwa das Element <tr>...</tr> nur innerhalb von <table>...</table> vorkommen. Zwischen <table> und </table> dürfen Sie darüber hinaus auch keinen Text notieren, sondern müssen die Tabellenstruktur beachten, die innere Elemente wie <tr>...</tr> fordert. Solche Regeln bestimmen Sie beim Definieren der Elementtypen Ihrer DTD.

Schema zur Definition von Elementtypen

Elementtypen werden innerhalb einer DTD nach folgendem Schema notiert:

Schema:

<!ELEMENT Name (Inhalt)>

Erläuterung:

Die Definition eines Elements beginnt mit einer öffnenden spitzen Klammer <. Dahinter folgt unmittelbar anschließend ein Ausrufezeichen ! und dahinter, in Großbuchstaben, das Schlüsselwort ELEMENT. Anschließend folgt ein Name für das Element. Den Namen können Sie frei wählen. Er muss jedoch den Seite Regeln für Namen in XML genügen. Hinter dem Namen notieren Sie Angaben zum Inhalt des Elementtyps. Diese Angaben können recht komplex sein und regeln, woraus ein Element bestehen kann. Abgeschlossen wird die Elementtyp-Definition mit einer schließenden spitzen Klammer >. Die einzelnen Teile der Elementtyp-Definition werden durch ein oder mehrere Leerzeichen voneinander getrennt.

Eine solche Elementtyp-Definition können Sie an irgendeiner Stelle innerhalb der DTD definieren - vor oder nach anderen Definitionen wie <!ATTLIST...> ( Seite Attribute), <!ENTITY...> ( Seite Entities) oder <!NOTATION...> ( Seite Notationen).

XML 1.0 MS IE 5.0 Elementtypen mit Zeicheninhalt definieren

Zeicheninhalt bedeutet, dass ein Element als Inhalt beliebigen und beliebig viel Text enthalten kann, aber keine weiteren Elemente. Zeicheninhalt ist eine beliebige und beliebig lange Zeichenfolge, also Text, Zahlen, und Sonderzeichen.

Beispiel-DTD durchwahlnummer.dtd:

<!ELEMENT durchwahlnummer (#PCDATA)>

Erläuterung:

Im Beispiel wird ein Elementtyp definiert, der in der Anwendung als Element <durchwahlnummer>...</durchwahlnummer> notiert werden kann. Es gilt das nach oben Schema zur Definition von Elementtypen. Den Zeicheninhalt kennzeichnen Sie durch den Schlüsselbezeichner #PCDATA (Abkürzung für parsed character data, zu deutsch analysierte Zeichendaten). Das Gatterzeichen ist erforderlich, PCDATA muss groß geschrieben sein, und das Ganze muss in runde Klammern eingeschlossen sein.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE durchwahlnummer SYSTEM "durchwahlnummer.dtd">
<durchwahlnummer>123456</durchwahlnummer>

Erläuterung:

Der Elementtyp durchwahlnummer erlaubt Zeichendaten, eine Zeichenfolge wie 123456 ist also ein korrekter Inhalt.

Beachten Sie:

Das Element durchwahlnummer ist in diesem extrem einfachen Beispiel zugleich das Dokument-Element.

#PCDATA bedeutet zwar so viel wie "beliebig viel Text", aber es bedeutet auch so viel wie "keine anderen, inneren Elemente". Eine Anwendung wie <durchwahlnummer><fett>123456</fett></durchwahlnummer> ist nach der Definition des Elements durchwahlnummer also unzulässig. Für solche Fälle müssen Sie nach unten Elementtypen mit Elementinhalt oder nach unten Elementtypen mit gemischtem Inhalt definieren.

Das P in PCDATA bedeutet, dass der Inhalt vom XML-Parser durchaus analysiert wird. Für die Praxis bedeutet dies, dass im Inhalt eines so definierten Elements die Regeln für Seite Zeichen und Zeichenkodierungen zu beachten sind.

In der Version 1.0 unterscheidet XML nicht zwischen verschiedenen Datentypen etwa für numerische oder alphanumerische Daten. Der Datentyp PCDATA entspricht dem Datentyp für alphanumerische Zeichenketten (Strings) in Programmiersprachen - Datentypen für Zahlen, Datumsformate oder dergleichen gibt es nicht. Dies wird von Entwicklern bereits als großer Nachteil empfunden, und künftige Versionen von XML werden vermutlich neben PCDATA mehrere Datentypen anbieten.

XML 1.0 MS IE 5.0 Elementtypen mit Elementinhalt definieren

Im Gegensatz zu einem nach oben Elementtyp mit Zeicheninhalt ist ein Elementtyp mit Elementinhalt ein solcher, der andere, innere Elementtypen enthält. Er darf jedoch selber keine Zeichendaten enthalten, sondern nur aus anderen Elementen bestehen.

Beispiel-DTD telefonnummer.dtd:

<!ELEMENT telefonnummer (vorwahlnummer, durchwahlnummer)>
<!ELEMENT vorwahlnummer (#PCDATA)>
<!ELEMENT durchwahlnummer (#PCDATA)>

Erläuterung:

Im Beispiel werden drei Elementtypen definiert. Die erste der drei Definitionen ist dabei ein Elementtyp mit Elementinhalt. Eine solche Definition hat den gleichen Aufbau wie die Definition eines Elementtyps mit Zeicheninhalt. Es gilt das nach oben Schema zur Definition von Elementtypen. Der Unterschied besteht darin, dass in den runden Klammern, in denen der Inhalt des Elementtyps definiert wird, die Namen anderer Elementtypen notiert werden, und zwar durch Kommata getrennt.

Im obigen ersten Beispiel wird für den Elementtyp telefonnummer eine feste Elementfolge definiert, bestehend aus den Elementtypen vorwahlnummer und durchwahlnummer. Der Elementtyp telefonnummer darf also nach obiger Definition genau einmal die Elemente vorwahlnummer und durchwahlnummer enthalten, und zwar in dieser Reihenfolge.

Zugleich ist das Element telefonnummer im Beispiel das Dokument-Element, also das äußerste Element der Daten.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE telefonnummer SYSTEM "telefonnummer.dtd">
<telefonnummer>
  <vorwahlnummer>069</vorwahlnummer>
  <durchwahlnummer>974791003</durchwahlnummer>
</telefonnummer>

Erläuterung:

Die Elementtypen telefonnummer, vorwahlnummer und durchwahlnummer sind so verschachtelt, wie es in der DTD definiert wurde. Die Elementtypen vorwahlnummer und durchwahlnummern enthalten nichts anderes als Zeichendaten und damit einen korrekten Inhalt.

XML 1.0 MS IE 5.0 Beliebig viele Wiederholungen eines Elementtyps definieren

Wenn Sie nichts anderes angeben, darf ein Elementtyp nur einmal vorkommen. Damit das Element eines Elementtyps mehrfach notiert werden kann, müssen Sie dies in der DTD kenntlich machen.

Beispiel-DTD kochrezept.dtd:

<!ELEMENT kochrezept (zutatenliste, anweisungsfolge)>

<!ELEMENT zutatenliste (zutat)+>
<!ELEMENT zutat (#PCDATA)>

<!ELEMENT anweisungsfolge (anweisung)*>
<!ELEMENT anweisung (#PCDATA)>

Erläuterung:

Das Beispiel einer einfachen DTD für ein Kochrezept. Für alle Definitionen im Beispiel gilt das nach oben Schema zur Definition von Elementtypen. Definiert wird zunächst der Elementtyp kochrezept für das Dokument-Element. Dieser Elementtyp hat nach oben Elementinhalt. Der Inhalt besteht aus den beiden Elementtypen zutatenliste und anweisungsfolge. Diese beiden Elementtypen werden definiert. Beide bestehen wiederum aus Elementinhalt.

Dabei kann zutatenliste einen oder mehrere Elementtypen zutat enthalten. Der Grund ist das Pluszeichen + in der Definition hinter der Angabe zum Inhalt. Durch das Pluszeichen geben Sie an, dass der Inhalt, im Beispiel der Elementtyp zutat, innerhalb von zutatenliste mindestens einmal vorkommen muss, ansonsten aber beliebig oft vorkommen kann. Für das Kochrezeptebeispiel ist ein solches Konstrukt durchaus sinnvoll, denn ein Rezept sollte wenigstens aus einer Zutat bestehen.

Der Elementtyp anweisungsfolge kann ebenfalls mehrere Elementtypen anweisung enthalten, kann jedoch auch leer bleiben. Der Grund ist in diesem Fall das Sternzeichen * in der Definition hinter der Angabe zum Inhalt. Durch das Sternzeichen geben Sie an, dass der Inhalt, im Beispiel der Elementtyp anweisung, innerhalb von anweisungsfolge kein mal, einmal oder beliebig viele male vorkommen kann. Für das Kochrezeptebeispiel bedeutet dies, dass es auch Kochrezepte mit Zutaten, aber ohne Anweisungen geben kann.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE kochrezept SYSTEM "kochrezept.dtd">
<kochrezept>
  <zutatenliste>
     <zutat>300 g  Kartoffeln geschält</zutat>
     <zutat>2 lg Lauchstangen</zutat>
     <zutat>1 Zwiebel</zutat>
     <zutat>1 tb Butter</zutat>
     <zutat>600 ml Wasser</zutat>
  </zutatenliste>
  <anweisungsfolge>
     <anweisung>Kartoffeln in kleine Würfel schneiden.</anweisung>
     <anweisung>Lauch putzen und in dünne Ringe schneiden.</anweisung>
     <anweisung>Zwiebel schälen, fein würfeln und in der Butter glasig dünsten.</anweisung>
     <anweisung>Kartoffeln, Lauch und Wasser hinzufügen und 18 bis 20 Minuten garen.</anweisung>
  </anweisungsfolge>
</kochrezept>

Erläuterung:

Die Elementtypen sind so verschachtelt, wie es in der DTD definiert wurde. Die Elementtypen zutat und anweisung kommen innerhalb von zutatenliste bzw. anweisungsfolge mehrfach vor, was nach der Definition erlaubt ist. Innerhalb von zutat und anweisung kommt in allen Fällen nur nach oben Zeicheninhalt vor, so wie es für diese Elementtypen mit dem Schlüsselbezeichner #PCDATA definiert wurde.

Beachten Sie:

Wenn das Beispiel keine Elemente vom Typ anweisung enthalten würde, was ja nach der Definition mit dem Sternzeichen durchaus erlaubt wäre, so müssten Sie in einer gültigen Anwendung trotzdem notieren:
<anweisungsfolge></anweisungsfolge>
Der Grund ist, dass bei der Definition des Elementtyps kochrezept im obigen Beispiel festgelegt wurde, dass dieses Element aus den beiden Elementtypen zutatenliste und anweisungsfolge bestehen muss, und dass diese beiden Elementtypen vorkommen müssen, nämlich genau einmal.

XML 1.0 MS IE 5.0 Alternative und optionale Elementtypen für Elementinhalt definieren

Wenn Sie nach oben Elementtypen mit Elementinhalt definieren, kann es vorkommen, dass die starre Folge von Elementen, die Sie für den Elementtyp vorsehen, in der Praxis nicht immer sinnvoll ist. Bei einer Postadresse etwa könnte man alternativ zwischen der Angabe einer Straßen-/Hausnummernangabe und einer Postfachangabe unterscheiden, und bei der Angabe zur Anredeform einer Person ist ein typisches Beispiel für eine optionale Angabe, also etwas, das man bei einigen Adressen mit angeben möchte, bei anderen dagegen nicht.

Beispiel-DTD adressen.dtd:

<!ELEMENT adressen (adresse)*>

<!ELEMENT adresse (anrede?, name, (postfach | wohnanschrift), plzort)>

<!ELEMENT anrede (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT postfach (#PCDATA)>
<!ELEMENT wohnanschrift (#PCDATA)>
<!ELEMENT plzort (#PCDATA)>

Erläuterung:

Das Beispiel zeigt eine einfache DTD zu einer Adressverwaltung. Für alle Definitionen im Beispiel gilt das nach oben Schema zur Definition von Elementtypen. Definiert wird ein Elementtyp namens adressen für das Dokument-Element. Dieser kann nach oben beliebig viele Wiederholungen des Elements adresse enthalten. Der Elementtyp adresse definiert ein Element mit nach oben Elementinhalt. Der Inhalt besteht aus verschiedenen Elementtypen für die einzelnen Daten einer Adresse. Diese Elementtypen werden als einfache nach oben Elementtypen mit Zeicheninhalt definiert.

Die Anrede wird im Beispiel als optional definiert. Verantwortlich dafür ist das Fragezeichen ? in der Definition hinter der Angabe zum Inhalt beim Namen des Elementtyps. Die einfache Notation von anrede würde die Verwendung des Elementtyps als zwingend erforderlich definieren, während die Notation von anrede? die Verwendung als optional kennzeichnet.

Ferner wird im Beispiel definiert, dass als Anschrift entweder eine Angabe zum Postfach oder zur Wohnanschrift gemacht werden kann. Dazu werden die alternativen Elementtypen nochmals geklammert. Innerhalb der Klammer werden die alternativen Elementtypen notiert, und zwar getrennt durch Senkrechtstriche |.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE adressen SYSTEM "adressen.dtd">
<adressen>
<adresse>
  <name>Wurmstädter Anlagenbank</name>
  <postfach>7001</postfach>
  <plzort>00234 Wurmstadt</plzort>
</adresse>
<adresse>
  <anrede>Herr</anrede>
  <name>Willi Wacholder</name>
  <wohnanschrift>Holzwurmstr. 30</wohnanschrift>
  <plzort>00234 Wurmstadt</plzort>
</adresse>
</adressen>

Erläuterung:

Im Beispiel werden zwei Adressen notiert. Die erste Adresse ist die einer Bank, daher entfällt bei dieser Adresse die Anrede, die nur für Personen benötigt wird. Da der Elementtyp anrede? als optional definiert wurde, ist das Weglassen erlaubt. Im Beispiel der Bank ist die Anschrift ein Postfach. Da an dieser Stelle laut Definition entweder der Elementtyp postfach oder der Elementtyp wohnanschrift vorkommen kann, ist die Anwendung korrekt. Bei der zweiten Adresse handelt es sich um die einer Person. In diesem Fall ist die Anrede notiert, und anstelle eines Postfachs eine Straßen-/Hausnummernangabe im Alternativ-Element wohnanschrift.

Beachten Sie:

Bei alternativen Elementtypen können Sie selbstverständlich auch mehr als zwei Elementtypen angeben.

XML 1.0 MS IE 5.0 Elemente mit gemischtem Inhalt definieren

Wenn Sie XML-Anwendungen definieren möchten, in denen Elemente nicht so starr gruppiert sein müssen, sondern in relativ freier Folge notiert werden können - so wie beispielsweise in HTML - dann müssen Sie Elemente mit gemischtem Inhalt definieren. In HTML ist <body>...</body> so ein typisches Element. Innerhalb dieses Elements können Sie die meisten anderen HTML-Elemente in relativ freier Folge und unter Berücksichtigung einiger weniger Verschachtelungsregeln notieren. Für Anwendungen, die generell weniger in Richtung Datenbank und stattdessen mehr in Richtung Freitext gehen, benötigen Sie solche gemischten Inhalte.

Beispiel-DTD text.dtd:

<!ELEMENT text (#PCDATA | drohend | lachend | fragend | zynisch)*>
<!ELEMENT drohend (#PCDATA)>
<!ELEMENT lachend (#PCDATA | augenzwinkernd)*>
<!ELEMENT fragend (#PCDATA)>
<!ELEMENT augenzwinkernd (#PCDATA)>
<!ELEMENT zynisch (#PCDATA)>

Erläuterung:

Das Beispiel stellt eine DTD für Text dar, in dem Emotionen als solche kenntlich gemacht werden. Für alle Definitionen im Beispiel gilt das nach oben Schema zur Definition von Elementtypen. Definiert wird ein Elementtyp namens text für das Dokument-Element mit gemischtem Inhalt. Gemischten Inhalt bestimmen Sie, indem Sie zum Inhalt des Elements, also innerhalb der Klammern, den Schlüsselbezeichner #PCDATA für nach oben Zeicheninhalt und außerdem eine Reihe erlaubter Elementtypen für weiteren nach oben Elementinhalt notieren. Die Einträge müssen mit dem Senkrechtstrich | für nach oben alternativ notierte Elementtypen getrennt werden. Außerdem muss der gesamte Inhalt am Ende wie im Beispiel das Sternzeichen * für nach oben beliebig viele Elemente erhalten. Dadurch darf jedes dieser Elemente beliebig oft in dem Bereich notiert werden kann, in dem es erlaubt ist. Gemischter Inhalt ist also eine Kombination aller hier zuvor behandelten Definitionsmöglichkeiten.

Im Beispiel werden die weiteren, bei text notierten Elementtypen ebenfalls definiert. Mit Ausnahme des Elementtyps lachend wird für alle Elementtypen nichts weiter als reiner Zeicheninhalt (#PCDATA) erlaubt. Der Elementtyp lachend entspricht dagegen wieder dem Muster für gemischten Inhalt. Neben reinem Zeicheninhalt wird in diesem Elementtyp noch der weitere Elementtyp augenzwinkernd zugelassen.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE text SYSTEM "text.dtd">
<text>
Manchmal sagt einem das Gewissen: <drohend>du musst mehr über Frauen und
Männer nachdenken.</drohend>
Dann fragt man sich zwar manchmal, <fragend>warum es darüber wohl
so viel nachzudenken gibt,</fragend>
aber manchmal folgt man auch brav und denkt nach.
Sagt die Frau zum Mann: <lachend>Mann o Mann, <augenzwinkernd>du bist
dein Geld wert!</augenzwinkernd></lachend>
Antwortet der Mann: <zynisch>Ja, weil ich den Einkaufswagen schiebe
und sich eine Mark darin befindet!</zynisch>
Daraufhin die Frau: <lachend>Du hast es erfasst!</lachend>
</text>

Erläuterung:

Das Anwendungsbeispiel enthält das Dokument-Element <text>..</text> und innerhalb davon typischen gemischten Inhalt. Es kommt normaler Text vor (Zeichendaten), aber auch weitere Elemente. Das lachend-Element kommt insgesamt zweimal vor. Genausogut könnte auch z.B. das drohend-Element zwei- oder mehrfach innerhalb eines text-Elements vorkommen. Dies ist aufgrund der Verwendung des Sternzeichens * bei der Definition aller inneren Elementtypen erlaubt. Das Element augenzwinkernd kommt wie laut DTD erlaubt innerhalb von lachend vor - außerhalb davon dürfte es jedoch nicht vorkommen.

XML 1.0 MS IE 5.0 Elemente mit beliebigem Inhalt definieren

Elemente mit beliebigem Inhalt sind eine Steigerungsform von Elementen mit gemischtem Inhalt. Es handelt sich dabei gewissermaßen um Joker- oder Wildcard-Elemente, deren Inhalt in keiner Weise festgelegt ist. Alle übrigen in der DTD definierten Elementtypen können in einem Element mit beliebigem Inhalt vorkommen.

Beispiel-DTD anytext.dtd:

<!ELEMENT anytext ANY>
<!ELEMENT english (#PCDATA)>
<!ELEMENT italiano (#PCDATA)>

Erläuterung:

Für alle Definitionen im Beispiel gilt das nach oben Schema zur Definition von Elementtypen. Durch das Schlüsselwort ANY (großgeschrieben) anstelle der konkreten Definition eines Elementinhalts geben Sie an, dass dieses Element (im Beispiel das Dokument-Element) beliebigen nach oben Zeicheninhalt und nach oben Elementinhalt enthalten kann. Im Beispiel sind zwei andere Elementtypen definiert, die ebenfalls vorkommen dürfen.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE anytext SYSTEM "anytext.dtd">
<anytext>
Das ist etwas Text, der in Englisch lautet:
<english>this is some text</english> und in italienisch:
<italiano>ciò è un certo testo</italiano>
</anytext>

Erläuterung:

Im Beispiel wird das Dokument-Element <anytext>...</anytext> definiert. Darin können Zeichendaten und beliebige andere Elemente vorkommen, zu denen es in der DTD einen Elementtyp gibt. Das Beispiel zeigt eine einfache Mischung.

XML 1.0 MS IE 5.0 Leere Elemente ohne Inhalt definieren

Leere Elemente sind solche ohne Inhalt. Im klassischen HTML sind etwa <br> oder <img> solche Elemente. Dort redet man auch von Standalone-Elementen. In der Philosophie von XML ist eigentlich für jedes Element ein Inhalt vorgesehen. Wenn Sie Elementtypen definieren wollen, die keinen Inhalt haben, müssen Sie dies gesondert angeben. Auch die Notation der Elemente in der Anwendung weist darauf hin, dass es sich um einen Sonderfall handelt.

Beispiel-DTD textzeilen.dtd:

<!ELEMENT textzeilen (#PCDATA | neuezeile)*>
<!ELEMENT neuezeile EMPTY>

Erläuterung:

Im Beispiel werden zwei Elementtypen definiert: ein Elementtyp textzeilen für das Dokument-Element mit nach oben gemischtem Inhalt, und ein Elementtyp neuezeile, der innerhalb des Elementtyps textzeilen beliebig vorkommen darf. Für beide Definitionen gilt das nach oben Schema zur Definition von Elementtypen.

Der Elementtyp neuezeile ist dabei ein leerer Elementtyp. Kenntlich gemacht wird dies durch das Schlüsselwort EMPTY (zu deutsch: leer) an der Stelle, wo der Inhalt des Elementtyps definiert wird.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE textzeilen SYSTEM "textzeilen.dtd">
<textzeilen>
Das ist Text, aber wo beginnt die<neuezeile />
neue Zeile?
</textzeilen>

Erläuterung:

Im Beispiel wird das Element ohne Inhalt entsprechend der Regeln für Seite leere Elemente notiert. Für eine Umsetzung der Bedeutung "neuezeile" kann natürlich erst eine Style-Sprache wie CSS oder XSL sorgen.

XML 1.0 MS IE 5.0 Elementgruppen zusammenfassen

Beim Entwurf größerer DTDs mit vielen Elementtypen werden Sie schnell feststellen, dass es viele Wiederholungen speziell bei Elementtypinhalten gibt. Viele Elementtypen bilden oft logisch gesehen eine zusammengehörige Gruppe, die geschlossen als Elementinhalt mehrerer anderer, übergeordneter Elementtypen vorkommt. Für solche Fälle bietet die DTD-Syntax die Möglichkeit an, Elementtypen zu solchen logischen Gruppen zusammenzufassen. Eine logische Gruppe von Elementtypen bezeichnet man als Parameter Entity. Der Einsatz von Parameter Entities erhöht in komplexen DTDs die Lesbarkeit und die Änderungsfreundlichkeit. Beschrieben wird diese Möglichkeit im Abschnitt Seite Parameter Entities für DTD-Bausteine.

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.0 Zusammenhängendes Beispiel: ein Buch

Um komplexe Abhängigkeiten und Regeln bei der Definition von Elementtypen abzubilden, ist es wichtig, die richtigen Überlegungen anzustellen und sich ein Modell der geplanten Elementstruktur zu machen.

Viele Datenstrukturen weisen eine starke logische Hierarchie auf. Gut sichtbar wird das am Beispiel eines Buches. Ein Buch besteht typischerweise aus Kapiteln, Verzeichnissen und speziellen Seiten wie Impressum, Titel usw. Jedes Kapitel besteht aus einer Kapitelüberschrift und Abschnitten. Jeder Abschnitt besteht aus einer Abschnittsüberschrift und dem Abschnittsinhalt. Ein Abschnittsinhalt kann Dinge wie normale Fließtextabsätze, Aufzählungen, Grafikreferenzen usw. enthalten. Jeder Fließtextabsatz, jeder Aufzählungspunkt kann Textteile mit speziellen Formatierungen enthalten, etwa für Fettschrift, Kursivschrift usw. enthalten. Bei solchen Datenstrukturen ist es am sinnvollsten, wenn man beim Entwurf der Elementtypen und ihrer Abhängigkeiten vom Allgemeinen (das Buch) hin zum Speziellen (das fett markierte Wort in einem Absatz) denkt. XML unterstützt diese Art stark hierarchischer Datenstrukturen besonders gut, da sich ein Dokument nach der Philosophie von XML als Baumstruktur abbilden lässt. Die Umsetzung einer stark hierarchischen Elementstruktur ist denn auch in einer XML-DTD vergleichsweise einfach und gut nachvollziehbar.

Beispiel-DTD buch.dtd:

<!ENTITY % text "hervorgehoben | hinweisend | auffordernd | zeilenumbruch">

<!ELEMENT buch                   (titel,impressum,inhaltsverzeichnis,(kapitel)+,stichwortverzeichnis)>

<!ELEMENT titel                  (haupttitel,untertitel)>
<!ELEMENT haupttitel             (#PCDATA)>
<!ELEMENT untertitel             (#PCDATA)>

<!ELEMENT impressum              (cip,copyright,verlag)>
<!ELEMENT cip                    (#PCDATA | %text;)*>
<!ELEMENT copyright              (#PCDATA | %text;)*>
<!ELEMENT verlag                 (#PCDATA | %text;)*>

<!ELEMENT inhaltsverzeichnis     (ivz_ueberschrift,(ivz_kapiteleintrag | ivz_abschnittseintrag)*)>
<!ELEMENT ivz_ueberschrift       (#PCDATA)>
<!ELEMENT ivz_kapiteleintrag     (#PCDATA)>
<!ELEMENT ivz_abschnittseintrag  (#PCDATA)>

<!ELEMENT kapitel                (kap_ueberschrift,(abschnitt)+)>
<!ELEMENT kap_ueberschrift       (#PCDATA)>

<!ELEMENT abschnitt              (ab_ueberschrift,(fliesstext | aufzaehlung | grafik)+)>
<!ELEMENT ab_ueberschrift        (#PCDATA)>

<!ELEMENT fliesstext             (#PCDATA | %text;)*>
<!ELEMENT aufzaehlung            (aufzaehlungspunkt)+>
<!ELEMENT aufzaehlungspunkt      (#PCDATA | %text;)*>
<!ELEMENT grafik                 (grafikdatei)>
<!ELEMENT grafikdatei            (#PCDATA)>

<!ELEMENT stichwortverzeichnis   (svz_ueberschrift,(svz_eintrag)*)>
<!ELEMENT svz_ueberschrift       (#PCDATA)>
<!ELEMENT svz_eintrag            (#PCDATA)>

<!ELEMENT hervorgehoben          (#PCDATA)>
<!ELEMENT hinweisend             (#PCDATA)>
<!ELEMENT auffordernd            (#PCDATA)>
<!ELEMENT zeilenumbruch          EMPTY>

Beispiel einer gültige Anwendung

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE buch SYSTEM "buch.dtd">
<?xml:stylesheet type="text/css" href="buch.css" ?>

<buch>

<titel>
<haupttitel>Ich bin der Valentin</haupttitel>
<untertitel>Wie mein Leben wurde was es geworden ist</untertitel>
</titel>

<impressum>
<cip>Deutsche Bibliothek - CIP-Einheitsaufnahme:<zeilenumbruch />
Titeldatensatz erhältlich bei der Deutschen Bibliothek</cip>
<copyright>©2000 alle Rechte beim Verlag</copyright>
<verlag>Eigenverlag, Hinter den Sieben Bergen</verlag>
</impressum>

<inhaltsverzeichnis>
<ivz_ueberschrift>Inhaltsverzeichnis</ivz_ueberschrift>

<ivz_kapiteleintrag>Meine frühen Jahre</ivz_kapiteleintrag>
<ivz_abschnittseintrag>Kindheit</ivz_abschnittseintrag>
<ivz_abschnittseintrag>Jugend</ivz_abschnittseintrag>

<ivz_kapiteleintrag>Wie ich zum Manne wurde</ivz_kapiteleintrag>
<ivz_abschnittseintrag>Die erste Liebe</ivz_abschnittseintrag>

</inhaltsverzeichnis>

<kapitel>
<kap_ueberschrift>Meine frühen Jahre</kap_ueberschrift>

<abschnitt>
<ab_ueberschrift>Kindheit</ab_ueberschrift>

<fliesstext>
Meine Kindheit bestand aus zwei Lebensabschnitten:
</fliesstext>

<aufzaehlung>
<aufzaehlungspunkt>- dem Säuglingsalter</aufzaehlungspunkt>
<aufzaehlungspunkt>- dem Kindesalter</aufzaehlungspunkt>
</aufzaehlung>

</abschnitt>

<abschnitt>
<ab_ueberschrift>Jugend</ab_ueberschrift>

<fliesstext>
Meine Jugend bestand im wesentlichen aus Pickeln.
</fliesstext>

</abschnitt>

</kapitel>

<kapitel>
<kap_ueberschrift>Wie ich zum Manne wurde</kap_ueberschrift>

<abschnitt>
<ab_ueberschrift>Die erste Liebe</ab_ueberschrift>

<fliesstext>
Sie <hervorgehoben>kam</hervorgehoben>, <hervorgehoben>geschah</hervorgehoben>, und <hervorgehoben>verging</hervorgehoben> wieder.
</fliesstext>

<grafik>
<grafikdatei>ersteliebe.tif</grafikdatei>
</grafik>

</abschnitt>

</kapitel>

<stichwortverzeichnis>
<svz_ueberschrift>Stichwortverzeichnis</svz_ueberschrift>

<svz_eintrag>Jugend</svz_eintrag>
<svz_eintrag>Kindheit</svz_eintrag>
<svz_eintrag>Liebe</svz_eintrag>
<svz_eintrag>Pickel</svz_eintrag>
<svz_eintrag>Säugling</svz_eintrag>

</stichwortverzeichnis>

</buch>

Erläuterung:

Das Beispiel kann natürlich nur grob ein komplettes Buch beschreiben - wenn Sie tatsächlich versuchen, eine komplette Buchstruktur mit Hilfe von XML zu beschreiben, werden Sie sicher noch viel mehr Details benötigen. Das Beispiel will jedoch zeigen, wie eine solche Beschreibung im Prinzip aussehen kann.

In dem Beispiel wird zunächst eine Seite Parameter Entity definiert. Darin werden vier Elementtypen hervorgehoben, hinweisend, auffordernd und zeilenumbruch zusammengefasst, die innerhalb von verschiedenen Textabsätzen vorkommen können.

Der Rest der DTD besteht in der Definition der gewünschten Elementtypen. Die Reihenfolge spielt eigentlich keine Rolle, doch das Beispiel hält eine gewisse Logik ein und versucht, vom Allgemeinen hin zum Speziellen fortzuschreiten. Das Element, in dem das gesamte Buch steht, wird mit dem Namen buch definiert. Das Element hat nach oben Elementinhalt. Dabei können die Elementtypen titel, impressum, inhaltsverzeichnis und stichwortverzeichnis genau einmal vorkommen, und zwar in der notierten Reihenfolge. Lediglich der Elementtyp kapitel, in der Reihenfolge zwischen inhaltsverzeichnis und stichwortverzeichnis stehend, muss mindestens einmal und kann nach oben beliebig oft vorkommen. Damit ist die Grundstruktur des Buches festgelegt.

Die Bereiche titel und impressum enthalten als Elementinhalt entsprechende Elementtypen. Bei den untergeordneten Elementtypen von impressum wird erstmals die definierte Parameter Entity angewendet. Die entsprechenden Elementtypen hervorgehoben, hinweisend, auffordernd und zeilenumbruch können innerhalb von cip, copyright und verlag beliebig oft vorkommen. Die übrigen Bereiche des Buches untergliedern sich nach ähnlichem Schema in einzelne Elementtypen.

Beachten Sie:

Netscape, Opera, Firefox und Safari beachten die externe DTD nicht.

nach oben
weiter | Seite Attribute und Wertzuweisungen
zurück | Seite Bearbeitungsregeln für DTDs
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Dokumenttyp-Definitionen (DTDs)

© 2007 Seite Impressum


SELFHTML: XML / Dokumenttyp-Definitionen (DTDs) / Attribute und Wertzuweisungen

SELFHTML

Attribute und Wertzuweisungen
Informationsseite

nach unten Allgemeines zu Attributen
nach unten Schema zum Definieren von Attributen
nach unten Notwendige und optionale Attribute
nach unten Attribute mit Zeichenwert
nach unten Attribute mit festen alternativen Werten
nach unten Attribute mit Bezeichnerwert (Token)
nach unten Attribute mit Identifikationswert
nach unten Attribute mit Identifikationsreferenzwert
nach unten Attribute mit Entity-Wert (z.B. für externe Dateireferenzen)
nach unten Attribute mit Namenwert
nach unten Attribute ohne Wertzuweisung
nach unten Zusammenhängendes Beispiel: Personenbeschreibung
nach unten

Allgemeines zu Attributen

Wenn Sie in HTML so etwas notieren wie <p align="center">etwas Text</p>, dann ist <p> das Element, und align ist ein Attribut, das innerhalb des <p>-Elements vorkommen kann. Solche Attribute können Sie in eigenen XML-DTDs für die dort definierten Seite Elementtypen bestimmen. Bei der Definition eines Attributs geben Sie an, welche Wertzuweisungen dabei möglich sein sollen.

Beim Erstellen von DTDs müssen Sie überlegen, ob es sinnvoll ist, Daten in Attributen zu speichern oder nicht. Für viele Eigenschaften ist es durchaus sinnvoller, eigene Elementtypen zu definieren. So ist "Haarfarbe" beispielsweise eine typische natürliche Eigenschaft einer Person. Wenn nun in der Datenstruktur zur Beschreibung der Person über die Haare nichts weiter als die Haarfarbe berücksichtigt wird, dann genügt es, ein Element wie <haarfarbe>...</haarfarbe> zu definieren. Wenn aber noch weitere Haareigenschaften berücksichtigt werden sollen, etwa die Haarlänge, dann bietet es sich an, die Datenstruktur so zu definieren, dass es ein Element mit verschiedenen Attributen gibt, z.B. <haar farbe="..." laenge="...">...</haar>.

Dabei entsteht aber die Situation, dass die eigentlichen Anwendungsdaten in den Attributen stehen, sodass zwischen Anfangs- und End-Tag des Elements gar keine sinnvollen Zeichendaten mehr möglich sind. Es ist nämlich fraglich, was zwischen dem Einleitungs-Tag <haar farbe="..." laenge="..."> und dem End-Tag </haar> eigentlich stehen könnte. Sinnvoll ist es daher, nur solche Daten in Attribute zu packen, die vor allem zur reinen Datenverarbeitung dienen. Sind es dagegen Daten, die Inhalt enthalten, der z.B. am Bildschirm ausgegeben werden soll, dann ist es sinnvoller, eigene Elemente dafür zu definieren. So ließe sich die Datenstruktur <haar farbe="..." laenge="...">...</haar> beispielsweise auch in der folgenden Form abbilden:
<haar>
 <haarfarbe>...</haarfarbe>
 <haarlaenge>...</haarlaenge>
</haar>

Schema zum Definieren von Attributen

Attribute werden innerhalb einer DTD nach folgendem Schema notiert:

Schema:

<!ELEMENT Elementname (Inhalt)>
<!ATTLIST Elementname
   Attributname_1 Inhalt [#REQUIRED|#IMPLIED|#FIXED "Wert"|Defaultwert]
   Attributname_n Inhalt [#REQUIRED|#IMPLIED|#FIXED "Wert"|Defaultwert]
>

Erläuterung:

Attribute werden in Abhängigkeit von Elementtypen definiert, d.h. nur für definierte Elementtypen können Sie Attribute definieren.

Die Definition eines Attributs beginnt mit einer öffnenden spitzen Klammer <. Dahinter folgt unmittelbar anschließend ein Ausrufezeichen ! und dahinter, in Großbuchstaben, das Schlüsselwort ATTLIST. Das Wort deutet schon an, dass Sie auch eine ganze Liste von Attributen definieren können. Ein Elementtyp kann beliebig viele Attribute haben. Alle Attribute, die Sie einem Elementtyp zuordnen wollen, notieren Sie in der Attributliste zu diesem Elementtyp. Hinter ATTLIST folgt der Name des Elementtyps, auf den sich die Attribute beziehen. Dieser Elementtyp muss in der DTD definiert sein (siehe Seite Elemente).

Innerhalb der Attributliste ist es zweckmäßig, jede Attribut-Definition in einer eigenen Zeile zu notieren. Jede Attribut-Definition der Attributliste beginnt mit dem Namen des Attributs. Den Namen können Sie frei wählen. Er muss jedoch den Seite Regeln für Namen in XML genügen. Hinter dem Namen notieren Sie Angaben zum Inhalt des Elementtyps. Diese Angaben können unterschiedlich sein und regeln, welche Werte ein Attribut haben kann. Schließlich gehört zu jedem Attribut noch eines der Schlüsselwörter #REQUIRED, #IMPLIED bzw. #FIXED mit einem angegebenen Wert, oder ein Defaultwert (mehr dazu im Abschnitt nach unten Notwendige und optionale Attribute).

Abgeschlossen wird die Attributlisten-Definition mit einer schließenden spitzen Klammer >. Die einzelnen Teile jeder Definition werden durch ein oder mehrere Leerzeichen voneinander getrennt.

XML 1.0 MS IE 5.0 Notwendige und optionale Attribute

Bei Attributen, die Sie in einer DTD zu einem Elementtyp definieren, müssen Sie stets angeben, ob das Attribut in dem Element vorkommen muss oder vorkommen kann. In HTML ist z.B. das Attribut src im <img>-Element zwingend notwendig. Das Attribut hspace kann im gleichen Element ebenfalls vorkommen, muss aber nicht.

Beispiel-DTD ressourcen.dtd:

<!ELEMENT ressourcen (ressource)*>
<!ELEMENT ressource (#PCDATA)>
<!ATTLIST ressource
   url            CDATA #REQUIRED
   sprache        CDATA #IMPLIED
   erfasst        CDATA #REQUIRED
   geaendert      CDATA #IMPLIED
>

Erläuterung:

Das Beispiel definiert als Inhalt für den Dokument-Elementtyp ressourcen einen Elementtyp namens ressource. Zu diesem Elementtyp werden vier Attribute definiert. Zwei dieser vier Attribute, nämlich die mit den Namen url und erfasst, müssen bei der Anwendung des Elementtyps notiert werden. Die beiden anderen, sprache und geaendert, können notiert werden. Notwendige Attribute kennzeichnen Sie durch den Schlüsselbezeichner #REQUIRED, und optionale Attribute durch #IMPLIED. Beide Angaben müssen jeweils am Ende einer Attribut-Definition stehen.

Für alle vier Attribute im Beispiel wird festgelegt, dass der zugewiesene Wert aus Zeichendaten besteht. Dies wird durch das Schlüsselwort CDATA kenntlich gemacht (siehe nach unten Attribute mit Zeichenwert).

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE ressourcen SYSTEM "ressourcen.dtd">
<ressourcen>
<ressource url="http://alpentouren.at/" erfasst="09.11.2000">
Hypertextuell aufbereitete Beschreibung etlicher Rad-Touren über Alpenpässe
</ressource>
<ressource url="http://www.planetbike.co.nz/" erfasst="10.12.2000"
 geaendert="16.12.2000" sprache="en">
Mountain Bike Touren durch Neuseeland
</ressource>
</ressourcen>

Erläuterung:

Im Beispiel werden zwei Elemente des Typs ressource notiert. Beim ersten Element werden nur die beiden notwendigen Attribute url und erfasst notiert, im zweiten Element dagegen alle vier definierten Attribute.

XML 1.0 MS IE 5.0 Attribute mit Zeichenwert

Jedes Attribut muss in XML eine Wertzuweisung erhalten. In vielen Fällen ist der zugewiesene Wert nicht auf einen bestimmten Wertebereich eingeschränkt, sondern kann eine unbestimmte Anzahl möglicher Werte haben. Das ist zum Beispiel der Fall, wenn das Attribut eine Kurzbeschreibung, einen numerischen Wert, einen prozentualen Wert oder eine Maßangabe enthält. Solche Attribute werden Attribute mit Zeichenwert genannt.

Beispiel-DTD autos.dtd:

<!ELEMENT autos (auto)*>
<!ELEMENT auto EMPTY>
<!ATTLIST auto
   typ CDATA #REQUIRED
   bj  CDATA #REQUIRED
   km  CDATA #REQUIRED
   ps  CDATA #REQUIRED
   vb  CDATA #REQUIRED
>

Erläuterung:

Im Beispiel wird ein Seite Elementtyp ohne Inhalt namens auto definiert. Dem Elementtyp werden fünf nach oben notwendige Attribute zugeordnet. Alle enthalten Zeichenwert. Für diesen Wert-Typ müssen Sie hinter dem Attributnamen als Attributinhalt den Schlüsselbezeichner CDATA angeben. Zeichenwert ist eine beliebige und beliebig lange Zeichenfolge, also Text, Zahlen, und Sonderzeichen. CDATA ist eine Abkürzung für character data, zu deutsch Zeichendaten).

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE autos SYSTEM "autos.dtd">
<autos>
<auto typ="AUDI 80" bj="1992" km="125000" ps="90" vb="12500 DM" />
</autos>

Erläuterung:

Dem Element auto werden im Anwendungsbeispiel alle definierten Attribute zugewiesen. Egal ob Zeichenketten, Zahlen oder Mischformen - alle Wertzuweisungen fallen unter das, was in XML durch CDATA abgedeckt ist.

Beachten Sie:

Was als Wertzuweisung in den Attributen steht, ist bei CDATA egal. Um nur bestimmte Wertzuweisungen zu erlauben, können Sie nach unten Attribute mit festen alternativen Werten definieren.

Innerhalb von Wertzuweisungen an Attribute können Sie auch das Apostroph-Zeichen ' und das Anführungszeichen " verwenden. Diese beiden Zeichen müssen Sie dann aber unbedingt maskieren, nämlich in der Form &apos; für ' und &quot; für ".

XML 1.0 MS IE 5.0 Attribute mit festen alternativen Werten

Aus HTML sind Ihnen vermutlich viele Attribute bekannt, die nur bestimmte Werte zulassen. So lässt das Attribut align in den Elementen, in denen es vorkommen kann, nur Werte wie left, center, right und justify zu. Solche Attribute mit bestimmten erlaubten Wertzuweisungen können Sie auch in XML definieren.

Beispiel-DTD hotels.dtd:

<!ELEMENT hotels (hotel)*>
<!ELEMENT hotel (#PCDATA)>
<!ATTLIST hotel
   name            CDATA               #REQUIRED
   klasse          (I|II|III|IV|V)     #REQUIRED
   einzelzimmer    (ja|nein)           #IMPLIED
   doppelzimmer    (ja|nein) "ja"
>

Erläuterung:

Im Beispiel wird ein Elementtyp hotel definiert. Dem Elementtyp werden vier Attribute zugeordnet. Das erste ist ein nach oben notwendiges Attribut mit nach oben Zeichenwert. Die übrigen drei Attribute haben keinen Zeichenwert, sondern erwarten einen von bestimmten möglichen Wertzuweisungen. Die möglichen Werte werden in Klammern notiert und durch das logische "Oder", symbolisiert durch den Senkrechtstrich |, voneinander getrennt. Das Attribut klasse erlaubt auf diese Weise einen der möglichen Werte I, II, III, IV oder V. Die Attribute einzelzimmer und doppelzimmer erlauben die Wertzuweisungen ja oder nein. Zusätzlich besteht bei Attributen mit festen alternativen Werten die Möglichkeit, einen dieser Werte als Default-Wert zu definieren. Im Beispiel ist das beim Attribut doppelzimmer der Fall. Dabei wird hinter der Klammer mit den möglichen Wertzuweisungen, durch ein oder mehrere Leerzeichen getrennt und in Anführungszeichen gesetzt, einer der Werte als Default-Wert notiert - im Beispiel der Wert ja. Wenn Sie einen solchen Default-Wert notieren, ist hinterher keine Angabe mehr dazu möglich, ob das Attribut notwendig (#REQUIRED) oder optional (#IMPLIED) ist. Denn der Default-Wert bewirkt, dass das Attribut intern vom Seite Parser als notwendig interpretiert wird. Wenn das Attribut in der Anwendung weggelassen wird, wird automatisch der Default-Wert angenommen.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE hotels SYSTEM "hotels.dtd">
<hotels>

<hotel name="Waldesruh" klasse="IV">
Hotel am Waldesrand gelegen, 150 Betten, ruhig und teuer.
</hotel>

<hotel name="Arabesk" klasse="II" doppelzimmer="ja" einzelzimmer="ja">
Einfaches Stadthotel, 400 Zimmer, annehmbar, ohne besonderen Komfort.
</hotel>

<hotel name="Fridolin" klasse="III" einzelzimmer="nein">
Hotel in zentraler Lage, 100 Betten, angenehm, gute Verkehrsanbindung.
</hotel>

</hotels>

Erläuterung:

Das Beispiel zeigt drei erlaubte Anwendungen des hotel-Elements. Im ersten Fall werden nur die beiden Attribute notiert, die in der DTD als notwendig definiert wurden. Für das Attribut doppelzimmer wird intern der Default-Wert ja interpretiert.

Im zweiten Anwendungsfall wird das Attribut doppelzimmer explizit notiert, und es wird der definierte Default-Wert zugewiesen. Genaugenommen ist diese Angabe überflüssig, weil der Default-Wert die Interpretation bereits abdeckt. Die Notation entspricht etwa der Angabe align="left" in HTML, wo die Wertzuweisung left als Default-Wert definiert ist.

Das Attribut einzelzimmer, das als optional (#IMPLIED) definiert ist, erhält im ersten Anwendungsfall gar keinen Wert. Im zweiten Anwendungsfall wird es explizit auf ja, im dritten Anwendungsfall auf nein gesetzt.

Beachten Sie:

Wertzuweisungen an Attribute mit festen alternativen Werten dürfen keine Leerzeichen enthalten, also letztlich nicht aus mehr als einem Wort bestehen.

Es gibt auch die Möglichkeit, für ein Attribut eine bestimmte Wertzuweisung zu erzwingen. Dazu notieren Sie (Beispiel):
typ (hotel | motel) #FIXED "hotel"
Durch die Angabe #FIXED erreichen Sie, dass an das Attribut typ keine andere Wertzuweisung als hotel möglich ist, obwohl noch eine andere Möglichkeit definiert ist. Solche Konstrukte können sinnvoll sein, wenn ein Attribut zu einem späteren Zeitpunkt noch andere Werte aufnehmen können, aber schon mal "etabliert" werden soll.

Attribute mit Bezeichnerwert (Token)

Neben Attributen, mit beliebigen Zeichendaten (CDATA) als Wert oder mit festen alternativen Werten gibt es Attribute, die als Wertzuweisung Bezeichnerwerte erwarten. Bezeichnerwerte sind identifizierende Werte wie Namen oder Nummern. Zu dieser Gruppe gehören:

nach unten Attribute mit Identifikationswert
nach unten Attribute mit Identifikationsreferenzwert
nach unten Attribute mit Entity-Wert (z.B. für externe Dateireferenzen)
nach unten Attribute mit nmtoken-Wert (auch für numerische Identifikationen)

XML 1.0 Attribute mit Identifikationswert

XML sieht eine Möglichkeit vor, dem Seite Parser mitzuteilen, dass der zugewiesene Wert eines bestimmten Attributs dokumentweit nur einmal vorkommen darf. Dies ist ein wichtiges Feature vor allem im Hinblick auf Script-Sprachen. Denn nur bei dokumentweit eindeutigen, identifizierenden Werten ist es möglich, ein Element über den Identifikationswert anzusprechen.

Beispiel-DTD buecher.dtd:

<!ELEMENT buecher (buch)*>
<!ELEMENT buch (#PCDATA)>
<!ATTLIST buch
   isbn     ID    #REQUIRED
   titel    CDATA #REQUIRED
   autor    CDATA #REQUIRED
>

Erläuterung:

Im Beispiel wird ein Elementtyp buch definiert. Dem Elementtyp werden drei nach oben notwendige Attribute zugeordnet. Zwei davon enthalten Zeichenwert, einer Identifikationswert - nämlich das Attribut isbn. Um ein Attribut mit Identifikationswert zu definieren, notieren Sie bei der Definition anstelle von CDATA den Schlüsselbezeichner ID.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE buecher SYSTEM "buecher.dtd">
<buecher>

<buch isbn="nr_3-90193-3949-7" titel="Anbaggern leicht gemacht" autor="Dr. Howtodo">
Ein Anleitung zwischen Genie und Wahnsinn.
</buch>

<buch isbn="nr_3-90193-3950-2" titel="Anbaggern leicht gemacht II" autor="Dr. Howtodo">
Eine weitere Anleitung zwischen Genie und Wahnsinn.
</buch>

</buecher>

Erläuterung:

Das Beispiel zeigt, wie zwei gleichnamige Elemente, bei denen auch Attribute den gleichen Inhalt haben können, sich doch durch ein als ID definiertes Attribut unterscheiden müssen. Ein Parser, der XML korrekt interpretiert, müsste einen Fehler melden, wenn die Wertzuweisung an das Attribut isbn im zweiten Datensatz "buch" den gleichen Wert hätte wie im ersten.

Beachten Sie:

Die Wertzuweisungen an ein Attribut vom Typ ID müssen den Seite Regeln für Namen entsprechen! Im obigen Beispiel wird den ISBN-Nummern deshalb die Zeichenfolge nr_ vorangestellt, da die eigentliche ISBN-Nummer mit einer Ziffer beginnt, was aber kein gültiger Name wäre.

Der Internet Explorer mit älterem Microsoft XML-Parser akzeptiert zwar den Typ ID, lässt aber trotzdem mehrere gleiche ID-Werte in einem Dokument zu, was nicht dem Sinn der Sache entspricht. Neuere XML-Parser von Microsoft (ab msxml3.dll) verhalten sich dagegen korrekt.

XML 1.0 Attribute mit Identifikationsreferenzwert

Wenn Sie für Elementtypen nach oben Attribute mit Identifikationswert definieren, können Sie auch Attribute definieren, deren Wert auf ein bestimmtes anderes Element verweist. Auf diese Weise können Sie durch Attribute logische Abhängigkeitsbeziehungen zwischen Elementen definieren.

Beispiel-DTD liste.dtd:

<!ELEMENT liste (eintrag)*>
<!ELEMENT eintrag (#PCDATA)>
<!ATTLIST eintrag
   name              ID                  #REQUIRED
   elterneintrag     IDREF               #IMPLIED
>

Erläuterung:

Im Beispiel wird ein Elementtyp eintrag definiert. Dieser Elementtyp könnte zum Beispiel Einträge eines Inhaltsverzeichnisses aufnehmen, das baumartige Kapitelstrukturen definiert. Diese Abhängigkeit wird im Beispiel in der Definition der Attribute ausgedrückt. Der Elementtyp eintrag erhält ein Attribut name, das als nach oben Attribut mit Identifikationswert definiert wird. Jedes Element eintrag muss in der Anwendung also einen dokumentweit eindeutigen Wert für name zugewiesen bekommen.
Ferner wird dem Element eintrag ein Attribut elterneintrag zugeordnet. Der Wert dieses Attributs muss der Definition zufolge der Name eines Eintrags sein, auf den sich das aktuelle Element bezieht. Solche Rückbeziehungen drücken Sie durch den Schlüsselbezeichner IDREF aus. Durch die beiden definierten Attribute ist es nun möglich, eine beliebige Baumstruktur abzubilden.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE liste SYSTEM "liste.dtd">
<liste>
<eintrag name="wurzel">Inhalt</eintrag>
<eintrag name="einleitung" elterneintrag="wurzel">eine Einleitung</eintrag>
<eintrag name="geschichte" elterneintrag="einleitung">etwas zur Geschichte</eintrag>
<eintrag name="heute" elterneintrag="einleitung">heutiger Zustand</eintrag>
<eintrag name="schritte" elterneintrag="wurzel">Erste Schritte</eintrag>
<eintrag name="beispiel" elterneintrag="schritte">Ein kleines Beispiel</eintrag>
</liste>

Erläuterung:

Das Beispiel zeigt, wie Sie allein mit Hilfe der beiden Attribute name (als ID definiert) und elterneintrag (als IDREF definiert) eine Baumstruktur abbilden können. Die Struktur des Beispiels lässt sich optisch so darstellen:

Teil von Inhalt
Teil von eine Einleitung
Seite etwas zur Geschichte
Seite heutiger Zustand
Teil von Erste Schritte
Seite Ein kleines Beispiel

Das Attribut elterneintrag ist im Beispiel als optional (#IMPLIED) definiert. Deshalb darf es z.B. im ersten Eintrag des Beispiels (dem Eintrag mit dem Namen wurzel) entfallen.

Beachten Sie:

Neben IDREF gibt es beim Definieren von Attributen mit Identifikationsreferenzwert auch noch die Pluralform IDREFS. Dadurch erlauben Sie, dass einem solchen Attribut mehrere eindeutige Bezugswerte zugewiesen werden können. Würde man im obigen Beispiel etwa definieren:
elterneintrag IDREFS #REQUIRED
Dann wäre in der Anwendung eine Zuweisung wie diese erlaubt:
<eintrag name="schritte" elterneintrag="wurzel einleitung">Erste Schritte</eintrag>
Trennen Sie dabei mehrere Zuweisungen durch Leerzeichen.

XML 1.0 Attribute mit Entity-Wert (z.B. für externe Dateireferenzen)

Bei Attributen mit Entity-Wert wird in der Anwendung die Wertzuweisung an ein solches Attribut als Name einer definierten Seite Entity erkannt. Der zugewiesene Wert ist dann nicht der notierte Name, sondern die Definition, die damit verknüpft ist. Diese Möglichkeit ist vor allem deshalb interessant, weil sie in XML die Art und Weise ist, um externe Dateien zu referenzieren. Stellen Sie sich eine Notierung wie <bild quelle="netz.gif"> vor. Um dem Parser mitzuteilen, dass er diesen Attributinhalt nicht einfach als Zeichenfolge, sondern als Referenz einer externen Datei interpretieren soll, ist der Umweg über die als Seite externe Entitiy definierte Referenz erforderlich.

Beispiel-DTD bild.dtd:

<!NOTATION gif PUBLIC "+//ISBN 0-7923-9432-1::Graphic Notation//NOTATION CompuServer Graphic Interchange Format//EN">
<!ENTITY netz SYSTEM "netz.gif" NDATA gif>
<!ELEMENT bild EMPTY>
<!ATTLIST bild
   quelle            ENTITY              #REQUIRED
>

Erläuterung:

Wie Sie sehen, ist das Einbinden einer externen Referenz etwas aufwendig. In der DTD geben Sie sowohl die Quelle der zu referenzierenden Datei an, als auch die Art, wie der entsprechende Dateityp verarbeitet werden sollte. Die Quelle definieren Sie mit der Seite externen Entity-Anweisung (<!ENTITY...>), die Verarbeitung des Dateityps mit der Seite Notation-Anweisung (<!NOTATION...>). Im Beispiel wird dann ein Elementtyp namens bild und dazu ein Attribut namens quelle definiert. Um ein Attribut mit Entity-Wert zu definieren, notieren Sie bei der Definition anstelle von CDATA den Schlüsselbezeichner ENTITY.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE bild SYSTEM "bild.dtd">
<bild quelle="netz" />

Erläuterung:

Die Anwendung ist ganz einfach: dem Element bild wird beim Attribut quelle ein Name zugewiesen. Dieser Name ist in der DTD als Entity definiert. Durch die Definition als Attribut mit Entity-Wert wird dem Parser mitgeteilt, dass er den zugewiesenen Wert als Namen einer Entity zu interpretieren hat. Bei der Interpretation wird der zugewiesene Wert "netz" durch die damit verbundene Verknüpfung "netz.gif" ersetzt. Durch die Definition als externe Entity (mit SYSTEM) weiß der Parser außerdem, dass dieser Wert die Pfadangabe zu einer anderen Datei darstellt.

Beachten Sie:

Der hier beschriebene Weg ist keine Lösung, wenn Sie erreichen möchten, dass einem Attribut eine beliebige externe Quelle zugewiesen werden kann, wie es etwa in HTML bei <img src="..."> möglich ist. So etwas kann derzeit in XML gar nicht definiert werden. In XHTML, der XML-gerechten Definition von HTML, ist das src-Attribut des img-Elements schlicht als CDATA definiert. Dass ein Web-Browser dieses Attribut als Aufforderung versteht, an der entsprechenden Stelle die gewünschte Grafik anzuzeigen, ist nur im Web-Browser so programmiert - es steht jedoch nicht in der XHTML-DTD! Wenn Sie also XML-Daten direkt am Bildschirm ausgeben wollen, sind beliebige externe Referenzen ein Problem. Ein möglicher Weg, dieses Problem zu lösen, stellt Seite XSLT dar, mit dessen Hilfe Sie XML-Daten vor der Datenausgabe in HTML übersetzen können.

Neben ENTITY gibt es beim Definieren von Attributen auch noch die Pluralform ENTITIES. Dadurch erlauben Sie, dass einem solchen Attribut mehrere Entity-Namen zugewiesen werden können. Trennen Sie dabei mehrere Zuweisungen durch Leerzeichen.

XML 1.0 MS IE 5.0 Attribute mit Namenwert

Solche Attribute erwarten als Wert einen Namen, der jedoch im Gegensatz zu nach oben Attributen mit Identifikationswert nicht dokumentweit eindeutig sein muss. Der Name darf keine Leerzeichen enthalten und muss mit einem Buchstaben, einer Ziffer oder einem der Zeichen . (Punkt), - (Bindestrich), _ (Unterstrich) oder : (Doppelpunkt) beginnen.

Beispiel-DTD feiertage.dtd:

<!ELEMENT feiertage (feiertag)*>
<!ELEMENT feiertag EMPTY>
<!ATTLIST feiertag
   datum            NMTOKEN              #REQUIRED
   ereignis         CDATA                #REQUIRED
>

Erläuterung:

Im Beispiel wird für ein Element feiertag eine Attributliste mit zwei Attributen datum und ereignis definiert. Das Attribut datum hat dabei Namenwert. Erreicht wird dies durch das Schlüsselwort NMTOKEN.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE feiertage SYSTEM "feiertage.dtd">
<feiertage>
<feiertag datum="6.1." ereignis="Hl. Drei Könige" />
<feiertag datum="1.5." ereignis="Arbeiterfeiertag" />
<feiertag datum="25.12." ereignis="1. Weihnachtstag" />
</feiertage>

Erläuterung:

Das Beispiel definiert drei Feiertage mit Datum und Ereignis. Die Werte der Attribute datum entsprechen durchaus den erlaubten Regeln für den Typ NMTOKEN. In der Praxis wird dieser Typ auch gerne verwendet, um mit numerischen ID-Werten zu arbeiten, da Attribute mit Identifikationswert keine Ziffern am Anfang der Wertzuweisung zulassen.

Beachten Sie:

Neben NMTOKEN gibt es beim Definieren von Attributen auch noch die Pluralform NMTOKENS. Dadurch erlauben Sie, dass einem solchen Attribut mehrere Namen zugewiesen werden können. Trennen Sie dabei mehrere Zuweisungen durch Leerzeichen.

Attribute ohne Wertzuweisung

Aus HTML kennen Sie vermutlich Konstrukte wie <hr noshade> oder <td nowrap>. Standalone-Attribute ohne Wertzuweisung also. Solche Attribute gibt es in der Syntax von XML nicht. XML sieht vor, dass jedem Attribut ein Wert zugewiesen wird. Jedes Attribut muss bei der Definition mindestens den unbestimmten Inhaltsyp CDATA erhalten. Da Attribute wie noshade eigentlich nichts weiter sind als eine Abkürzung für so etwas wie noshade="yes", empfiehlt sich bei der Definition solcher Attribute das Arbeiten mit nach oben Attribute mit festen alternativen Werten.

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.0 Zusammenhängendes Beispiel: Personenbeschreibung

Menschen haben viele Eigenschaften, daher scheint eine Personenbeschreibung ein typischer Anwendungsfall für den Einsatz von Attributen zu sein. Doch bei der Umsetzung in XML müssen Sie dabei die Überlegungen berücksichtigen, die im Abschnitt nach oben Allgemeines zu Attributen besprochen wurden.

Das folgende Beispiel zeigt ein Daten-Design, bei dem alle Nutzdaten in Attributen gespeichert werden.

Beispiel-DTD personendatenbank.dtd:

<!ELEMENT personendatenbank          (person)*>
<!ELEMENT person          (bio,sozio)>
<!ATTLIST person
   name                   CDATA #REQUIRED
>
<!ELEMENT bio             (augen,haar,haut,gewicht,blutgruppe)>
<!ELEMENT augen           EMPTY>
<!ATTLIST augen
   farbe                  CDATA #REQUIRED
>
<!ELEMENT haar            EMPTY>
<!ATTLIST haar
   farbe                  CDATA #REQUIRED
   bemerkung              CDATA #IMPLIED
>
<!ELEMENT haut            EMPTY>
<!ATTLIST haut
   farbe                  CDATA #REQUIRED
   bemerkung              CDATA #IMPLIED
>
<!ELEMENT gewicht         EMPTY>
<!ATTLIST gewicht
   kg                     CDATA #REQUIRED
>
<!ELEMENT blutgruppe      EMPTY>
<!ATTLIST blutgruppe
   typ                    (A|B|0|AB) #REQUIRED
>
<!ELEMENT sozio           (sprache,stand,passport)>
<!ELEMENT sprache         EMPTY>
<!ATTLIST sprache
   lang                   CDATA #REQUIRED
   kurz                   (de|en|fr|es|pt|it) #IMPLIED
>
<!ELEMENT stand           EMPTY>
<!ATTLIST stand
   typ                    (ledig|verheiratet|verwitwet) #REQUIRED
>
<!ELEMENT passport        EMPTY>
<!ATTLIST passport
   nr                     NMTOKEN #REQUIRED
>

Beispiel einer gültigen Anwendung

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE personendatenbank SYSTEM "personendatenbank.dtd">
<personendatenbank>
<person name="Bruno Buddelmann">
  <bio>
    <augen farbe="graublau" />
    <haar farbe="blond" bemerkung="hin und wieder getönt" />
    <haut farbe="weiß" />
    <gewicht kg="84" />
    <blutgruppe typ="A" />
  </bio>
  <sozio>
    <sprache lang="deutsch" kurz="de" />
    <stand typ="ledig" />
    <passport nr="38385409398" />
  </sozio>
</person>
</personendatenbank>

Erläuterung:

Die Beispiel-DTD definiert einen Dokument-Elementtyp personendatenbank der beliebig viele Elemente des Typs person enthalten kann. Dieser Elementtyp besteht seinerseits aus Seite Elementinhalt. Ferner erhält der Elementtyp person ein immer erforderliches Attribut name, in dem der Name der Person notiert werden soll. Die beiden Elementtypen bio und sozio, die den Elementinhalt von person darstellen, sind selbst wieder Elementtypen mit Elementinhalt. Der Elementtyp bio besteht aus der festen Elementtypfolge augen,haar,haut,gewicht,blutgruppe, und der Elementtyp sozio aus der festen Elementtypfolge sprache,stand,passport. Auf diese Weise entsteht ein strukturierter Datensatz person.

Die untergeordneten Elementtypen sind ausnahmslos mit dem Schlüsselwort EMPTY als Seite Elemente ohne Inhalt definiert. Es werden jedoch für all diese Elementtypen Attribute definiert, in denen bei der Anwendung Daten gespeichert werden können. Die meisten dieser Attribute werden mit Hilfe des Schlüsselworts REQUIRED als notwendige Attribute definiert, einige mit IMPLIED als optionale Attribute (siehe nach oben notwendige und optionale Attribute).

In der Anwendung des Beispiels ist die typische Notation für Tags ohne End-Tags erkennbar (zur Notation solcher Elemente siehe auch den Abschnitt Seite Tags, Attribute und Wertzuweisungen). Die Beispieldatei person.xml enthält im Beispiel genau einen Datensatz person. Die Datei könnte laut DTD-Definition jedoch beliebig viele solcher Datensätze enthalten, wobei jedoch alle Datensätze den gleichen Elementaufbau haben müssen.

Beachten Sie:

Netscape, Opera, Safari und Firefox beachten die externe DTD nicht.

nach oben
weiter | Seite Entities für Textbausteine und Umschreibungen
zurück | Seite Elemente und Verschachtelungsregeln
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Dokumenttyp-Definitionen (DTDs)

© 2007 Seite Impressum


SELFHTML: XML / Dokumenttyp-Definitionen (DTDs) / Entities für Textbausteine und Umschreibungen

SELFHTML

Entities für Textbausteine und Umschreibungen
Informationsseite

nach unten Allgemeines zu Entities
nach unten Schema zur Definition von Entities
nach unten Entities für Textbausteine
nach unten Entities für die Benennung von Zeichen
nach unten Verschachtelte Entities
nach unten Entities für externe Ressourcen
nach unten Parameter Entities für DTD-Bausteine
nach unten Modulare DTDs mit Hilfe von Entities
nach unten

Allgemeines zu Entities

Entities (Singular: Entity) sind definierte Kürzel. Vielleicht kennen Sie aus Textverarbeitungsprogrammen die Möglichkeit, Textbausteine zu definieren, die dann über ein Menü oder Tastaturkürzel sehr schnell in den aktuellen Text einfügbar sind. Genau diese Funktionalität ist eine der Aufgaben von Entities.

Entities in XML können jedoch mehrere Funktionen haben. So sind die Textbausteine, die Sie damit definieren können, einerseits in Anwendungsdateien verfügbar. Entities, die nur innerhalb von DTD-Definitionen eine Kürzel-Funktion haben, oder Entities, die den Bezug zu externen Datenquellen herstellen, und Enitities, die Umschreibungen für spezielle Zeichen realisieren.

Entities kommen auch in bekannten Auszeichnungssprachen wie HTML vor. Wenn Sie in HTML beispielsweise Zeichenfolgen wie &uuml; notieren, dann wenden Sie Entities an, die für HTML definiert wurden. Um Entities in XML zu verstehen, müssen Sie sich jedoch von der eingeschränkten Funktionalität der HTML-Entities lösen.

Schema zur Definition von Entities

Entities werden innerhalb einer DTD nach folgendem Schema notiert:

Schema:

<!ENTITY [%] Name [SYSTEM|PUBLIC] "Wert" [zusätzliche Angaben] >

Erläuterung:

Die Definition eines Entities beginnt mit einer öffnenden spitzen Klammer <. Dahinter folgt unmittelbar anschließend ein Ausrufezeichen ! und dahinter, in Großbuchstaben, das Schlüsselwort ENTITY. Anschließend folgt bei nach unten Parameter Entities für DTD-Bausteine ein Prozentzeichen %, bei anderen Entity-Definitionen nicht. In allen Fällen folgt jedoch ein Name für das Entity. Den Namen können Sie frei wählen. Er muss jedoch den Seite Regeln für Namen in XML genügen. Hinter dem Namen kann eines der Schlüsselwörter SYSTEM oder PUBLIC folgen, und zwar im Falle von nach unten Entities für externe Ressourcen. Bei allen anderen Entity-Definitionen geben Sie keines dieser Schlüsselwörter an. Anschließend folgt, in Anführungszeichen gesetzt, der Wert, den Sie dem Entity-Namen zuweisen wollen. Der zugewiesene Wert kann je nach Typ des Entities ganz verschiedener Natur sein. Hinter dem Namen können in speziellen Fällen noch besondere Angaben folgen. Ein Beispiel dazu wird im Abschnitt Seite Attribute mit Entity-Wert beschrieben.
Jede Entity-Definition wird beendet mit einer schließenden spitzen Klammer >. Die einzelnen Teile der Entity-Definition werden durch ein oder mehrere Leerzeichen voneinander getrennt.

Eine solche Entity-Definition können Sie an irgendeiner Stelle innerhalb der DTD definieren - vor oder nach anderen Definitionen wie <!ELEMENT...> ( Seite Elemente), <!ATTLIST...> ( Seite Attribute) oder <!NOTATION...> ( Seite Notationen). In jedem Fall muss ein Entity jedoch vor seiner ersten Verwendung definiert werden. Dies ist z.B. bei Parameter Entities für DTD-Bausteine zu beachten, wo die Entity-Definitionen vor den Elementtyp-Definitionen notiert werden müssen, in denen sie verwendet werden. In der Praxis werden Entities meistens zu Beginn der DTD definiert, vor allen Element- und Attribut-Definitionen.

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Entities für Textbausteine

Für längere Ausdrücke, die in den Anwendungsdaten einer XML-Struktur immer wieder vorkommen, wie etwa Eigennamen oder Floskeln, können Sie in der DTD Kürzel definieren.

Beispiel-DTD text-mit-baustein.dtd:

<!ELEMENT text-mit-baustein (#PCDATA)>
<!ENTITY mfg "mit freundlichen Gr&#252;&#223;en" >

Erläuterung:

Es gilt das nach oben Schema zur Definition von Entities. Bei Entities für Textbausteine brauchen Sie nur einen Namen für das Entity vergeben und einen gewünschten Wert zuordnen. Im Beispiel wird ein Entity mit Namen mfg definiert, dem der Wert mit freundlichen Gr&#252;&#223;en zugeordnet wird.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE text-mit-baustein SYSTEM "text-mit-baustein.dtd">
<text-mit-baustein>
ich verbleibe &mfg;
</text-mit-baustein>

Erläuterung:

Um ein in der DTD definiertes Entity in den Anwendungsdaten zu verwenden, notieren Sie ein kaufmännisches Und (&), direkt daran anschließend den Namen des Entities, und dahinter ein abschließendes Semikolon (;). Der XML-Parser setzt dann an der entsprechenden Stelle den Langtext ein, der zu dem Kürzel gehört. Das Beispiel &mfg; erzeugt also die Ausgabe mit freundlichen Grüßen.

Ein solches Entity können Sie innerhalb der Anwendungsdaten überall notieren, wo normale Zeichendaten möglich sind, also im Zeicheninhalt zwischen einem Anfangs- und einem End-Tag oder auch in Wertzuweisungen an Attribute, bei denen Zeichendaten erlaubt sind.

Beachten Sie:

Ersetzen Sie in der Zeichenfolge, die Sie einem Entity-Namen zuordnen, Zeichen mit Zeichenwerten größer 127 durch ihre numerische Umschreibung, so wie im obigen Beispiel &#252; für ü oder &#223; für ß. Die gewünschten Zeichenwerte können Sie den Seite Unicode-Codetabellen entnehmen.

Netscape, Opera und Firefox beachten solche Entities nur in der internen DTD.

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Entities für die Benennung von Zeichen

Aus HTML kennen Sie Seite benannte Zeichen wie &uuml; oder &copy;. Solche einfach zu merkenden Benennungen für Sonderzeichen können Sie in einer XML-DTD selbst definieren. Sinnvoll ist dies vor allem für Zeichen, die nicht auf der Tastatur zu finden sind, oder wenn Sie nicht wissen, mit welchen verschiedenen Entwicklungsumgebungen und internen Kodierungen die Anwender Ihrer XML-DTD arbeiten werden.

Beispiel-DTD smilies.dtd:

<!ENTITY sad_smiley "&#x2369;" >
<!ENTITY happy_smiley "&#x236A;" >
<!ELEMENT smilies (#PCDATA)>

Erläuterung:

Als Grafiken sehen die im Beispiel gewünschten Zeichen in etwa so aus:
sad_smiley: sad Smiley und happy_smiley: happy Smiley

Es gilt das nach oben Schema zur Definition von Entities. Bei Entities für die Benennung von Zeichen brauchen Sie nur einen Namen für das Entity vergeben und als Wert die numerische Notation des Zeichens in dezimaler oder hexadezimaler Schreibweise zuordnen. Im Beispiel werden zwei Zeichen benannt. Die Namen lauten sad_smiley und happy_smiley. Im Unicode-System haben die beiden gewünschten Zeichen, die diesen Namen zugeordnet werden sollen, in hexadezimaler Schreibweise die Werte 2369 und 236A. Die Notationsweise ist dabei die gleiche wie in HTML 4.0, also z.B. &#x236A; (hexadezimal) oder &#9066; (dezimal). Die Notation beginnt mit dem kaufmännischen Und &, gefolgt von einem Gatterzeichen #. Wenn Sie den Zeichenwert hexadezimal angeben wollen, muss ein x folgen und dahinter der hexadezimale Wert. Wenn Sie den Zeichenwert dezimal angeben wollen, folgt direkt die Zahl (ohne x davor). Hinter dem Zeichenwert folgt ein Semikolon ;.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE smilies SYSTEM "smilies.dtd">
<smilies>
bist du &happy_smiley; oder &sad_smiley;?
</smilies>

Erläuterung:

Um das benannte Zeichen in den Anwendungsdaten zu verwenden, notieren Sie ein kaufmännisches Und (&), direkt daran anschließend den Namen des Entities, und dahinter ein abschließendes Semikolon (;). Der XML-Parser setzt dann an der entsprechenden Stelle das zugehörige Zeichen ein. Im Beispiel erreichen Sie also durch die Notation von &happy_smiley; das Gleiche, was Sie mit &#x236A; erreichen würden - aber der Name ist eben leichter zu merken.

Die Notation ist innerhalb der Anwendungsdaten überall erlaubt, wo normale Zeichendaten möglich sind, also im Zeicheninhalt zwischen einem Anfangs- und einem End-Tag oder auch in Wertzuweisungen an Attribute, bei denen Zeichendaten erlaubt sind.

Beachten Sie:

Wenn ein gewünschtes Zeichen nicht ausgegeben wird, liegt es an der mangelnden Unicode-Unterstützung oder daran, dass bei der Datenausgabe keine Schriftart zur Verfügung steht, die höherwertige Unicode-Zeichen wie diejenigen im obigen Beispiel darstellen kann.

Netscape, Opera und Firefox beachten solche Entities nur in der internen DTD.

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Verschachtelte Entities

Bei der Wertzuweisung in einer Entity-Definition können Sie durchaus auch andere Entities verwenden und auf diese Weise komplexe Bausteine erzeugen.

Beispiel-DTD mailtext.dtd:

<!ENTITY f "Hatzelbutz und Partner GmbH" >
<!ENTITY m "info@example.org" >
<!ENTITY fm "&f;, &m;" >
<!ELEMENT mailtext (#PCDATA)>

Erläuterung:

In diesem Beispiel werden die zuvor definierten Entities f und m in der Wertzuweisung des Entities fm verwendet.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE mailtext SYSTEM "mailtext.dtd">
<mailtext>
die Firma &f; freut sich, Ihnen ihre neuesten Produkte vorstellen
zu können. Schicken Sie Ihre Bestellung an &fm;.
</mailtext>

Erläuterung:

Wird in den Anwendungsdaten &fm; notiert, so wird dies ersetzt durch Hatzelbutz und Partner GmbH, info@example.org. Im XML-Fachjargon sagt man auch, die Einzelbausteine &f; und &m; werden "durchgereicht".

Beachten Sie:

Netscape, Opera und Firefox beachten solche Entities nur in der internen DTD.

XML 1.0 Entities für externe Ressourcen

Über Entities für externe Ressourcen, auch externe Entities genannt (im Gegensatz zu allen anderen Entity-Typen, die als interne Entities bezeichnet werden), stellt XML eine Möglichkeit bereit, einem Parser mitzuteilen, dass Daten aus einer anderen Datei eingebunden werden sollen.

Beispiel-DTD news.dtd:

<!ELEMENT news (newsdaten)*>
<!ENTITY datenquelle SYSTEM "news.txt" >
<!ELEMENT newsdaten EMPTY>
<!ATTLIST newsdaten
   quelle            ENTITY              #REQUIRED
>

Erläuterung:

Es gilt das nach oben Schema zur Definition von Entities. Bei Entities für externe Ressourcen müssen Sie hinter dem Namen des Entities eines der beiden Schlüsselwörter SYSTEM oder PUBLIC (jeweils groß geschrieben) notieren. Wenn Sie die externe Datenquelle direkt mit ihrem Dateinamen bezeichnen, dann verwenden Sie SYSTEM. Bei der Wertzuordnung notieren Sie dann den Dateinamen der externen Quelle, gegebenenfalls mit absoluter oder relativer Pfadangabe. Es kann auch ein URI sein, z.B. http://www.example.org/news/news.txt. Wenn Sie stattdessen eine öffentliche Quellenbezeichnung (public identifier) angeben, dann verwenden Sie PUBLIC und notieren bei der Wertzuordnung die öffentliche Quellenbezeichnung der Datenquelle.

Ein Entity für externe Ressourcen können Sie innerhalb der XML-Anwendung nur verwenden, indem Sie den Entity-Namen einem Attribut zuordnen. Das ist eine Besonderheit bei dieser Art von Entities. Deshalb müssen Sie in der DTD neben dem Entity auch für irgendeinen gewünschten Seite Elementtyp ein Seite Attribut mit Entity-Wert definieren. Im obigen Beispiel wird ein Elementtyp newsdaten mit einem Attribut quelle definiert, das durch die Angabe ENTITY als Attribut mit Entity-Wert festgelegt wird.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE news SYSTEM "news.dtd">
<news>
<newsdaten quelle="datenquelle" />
</news>

Erläuterung:

Dem Element newsdaten wird beim Attribut quelle der Entity-Name "datenquelle" zugewiesen. Dieser Name wird dann durch die damit verbundene Verknüpfung "news.txt" ersetzt. Der XML-Parser wird gleichzeitig darüber "informiert", dass es sich dabei nicht um eine Textersetzung handelt, sondern um die Angabe einer externen Referenz.

Beachten Sie:

Damit die externe Referenz an der entsprechenden Stelle eingefügt wird, muss der Parser diese Information natürlich verarbeiten können und einen Weg kennen, die entsprechenden Daten anzuzeigen. Besonders bei binären Datentypen, etwa bei Grafiken, sind zusätzliche Angaben bei der Definition erforderlich. Ein Beispiel dafür finden Sie im Abschnitt Seite Attribute mit Entity-Wert.

XML schreibt bei lokalen Pfadnamen (SYSTEM) nicht vor, wie die Syntax lautet. Wird ein Windows-PC verwendet, kann es durchaus nötig sein, bei Pfadnamen Backslashes \ statt der Unix-typischen Slashes / zu verwenden. Ebenso hängt es vom verarbeitenden Parser ab, ob er angegebene URIs auflösen kann oder nicht.

Ein Beispiel für die Verwendung einer öffentlichen Bezeichnung (public identifier) wäre etwa:
<!ENTITY % HTML_Chars PUBLIC "-//W3C//ENTITIES Latin1//EN//HTML" >
%HTML_Chars;
Mit einer solchen Definition binden Sie die benannten Zeichen aus HTML in Ihre DTD ein. Genauere Beschreibungen zum Einbinden externer Ressourcen in eine DTD finden Sie im Abschnitt nach unten Modulare DTDs mit Hilfe von Entities.

Einige Parser meckern bei Beispielen wie dem obigen, obwohl diese XML-konform sind.

XML 1.0 MS IE 5.0 Parameter Entities für komplexere DTDs

Parameter Entities erlauben, "Makros" für die Verwendung innerhalb der DTD zu definieren. Besonders sinnvoll ist ihr Einsatz, wenn bestimmte komplexere Angaben zum Inhalt von Elementtypen bei mehreren Elementtypen wiederkehren. So kann man beispielsweise innerhalb eines Textes Formatierungen wie fett, kursiv, farbig, unterstrichen usw. zu einem Makro "Textformatierung" zusammenfassen. Definiert man nun bedeutungstragende Text-Elemente wie Überschriften, Listeneinträge oder Tabellenzellen, so wäre es unnötige Kopierarbeit, jedem dieser Text-Elemente wieder alle Formatierungsmöglichkeiten zuzuweisen. Einfacher ist es, nur noch das Makro "Textformatierung" zuzuweisen. Parameter Entities erhöhen somit in komplexen DTDs die Lesbarkeit und die Änderungsfreundlichkeit.

Beispiel-DTD lager.dtd:

<!ENTITY % artikel "artikelnummer, artikelname, artikelmenge">
<!ENTITY % zusatz "beschreibung | warenklasse">
<!ELEMENT lager (eingang | ausgang)*>
<!ELEMENT eingang (eingangsnummer, (%artikel;), (%zusatz;))>
<!ELEMENT ausgang (ausgangsnummer, (%artikel;), (%zusatz;))>
<!ELEMENT eingangsnummer (#PCDATA)>
<!ELEMENT ausgangsnummer (#PCDATA)>
<!ELEMENT artikelnummer  (#PCDATA)>
<!ELEMENT artikelname    (#PCDATA)>
<!ELEMENT artikelmenge   (#PCDATA)>
<!ELEMENT beschreibung   (#PCDATA)>
<!ELEMENT warenklasse    (#PCDATA)>

Erläuterung:

Das Beispiel stellt einen Auszug aus einer DTD zu einer Datei dar, in der Lagervorgänge festgehalten werden. In dem Lager gibt es Wareneingänge und Warenausgänge. In jedem Datensatz soll ein Wareneingang oder der Warenausgang eines bestimmten Warenartikels festgehalten werden. Ein Artikel im Zusammenhang mit Wareneingang oder Warenausgang setzt sich immer wieder aus den gleichen Daten zusammen: aus Artikelnummer, Artikelname, Artikelmenge und einem beschreibenden Zusatz, der entweder eine allgemeine Artikelbeschreibung ist oder die Einordnung in eine Warenklasse. Solche zusammengehörigen Daten lassen sich bei Elementtyp-Definitionen zu Parameter Entities zusammenfassen.

Im Beispiel werden zwei Parameter Entitities definiert: artikel und zusatz. Dabei gilt das nach oben Schema zur Definition von Entities. Vor dem Namen eines Parameter Entities notieren Sie ein Prozentzeichen %. Bei der Wertzuordnung notieren Sie eine Angabe zum Inhalt eines Elementtyps. Es handelt sich jedoch nicht wirklich um die Angabe zu einem Elementtyp-Inhalt, sondern einfach um ein Textbaustein, ein Makro, das Sie in nachfolgenden Elementtyp-Definitionen verwenden können. In beiden Parameter Entities des obigen Beispiels werden Angaben für Elementinhalte definiert.

Im Beispiel werden die Parameter Entities bei der Definition der Elementtypen eingang und ausgang verwendet. Beide Elementtypen haben Seite Elementinhalt. Sie bestehen aus einer Laufnummer für den Eingang bzw. Ausgang, der Artikelnummer und dem Artikelname, zusammengefasst in der Verwendung des Parameter Entity artikel, und wahlweise aus einer Artikelbeschreibung oder der Angabe einer Warenklasse, zusammengefasst in der Verwendung der Parameter Entity zusatz.

Bei der Verwendung eines Parameter Entity in einer Elementtyp-Definition müssen Sie auf die Notation wie im Beispiel angegeben achten. Parameter Entities müssen in Klammern gesetzt werden. Unmittelbar vor dem Namen des Parameter Entity (ohne Leerzeichen dazwischen) muss das Prozentzeichen % stehen. Hinter dem Namen muss ein Strichpunkt ; notiert werden.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE lager SYSTEM "lager.dtd">
<lager>

<eingang>
  <eingangsnummer>452</eingangsnummer>
  <artikelnummer>45-234</artikelnummer>
  <artikelname>Schreibtischstuhl "Chef"</artikelname>
  <artikelmenge>10</artikelmenge>
  <warenklasse>C-III</warenklasse>
</eingang>
<ausgang>
  <ausgangsnummer>318</ausgangsnummer>
  <artikelnummer>37-917</artikelnummer>
  <artikelname>Spiegelschrank  "Narziss"</artikelname>
  <artikelmenge>3</artikelmenge>
  <beschreibung>F-IV</beschreibung>
</ausgang>

</lager>

Erläuterung:

Dem Anwendungsbeispiel ist nicht mehr zu entnehmen, dass die Definition der Elementtypen eingang und ausgang zum Teil auf Verwendung von Parameter Entities beruht. Parameter Entities sind also nur innerhalb der DTD-Definitionen von Bedeutung, auf die Anwendung haben sie keinen Einfluss. Das Beispiel der angewendeten DTD-Definitionen zeigt zwei Datensätze, je einen für einen Wareneingang und einen für einen Warenausgang. Die inneren Elemente sind dabei so notiert, wie es die definierten Regeln zulassen.

XML 1.0 MS IE 5.0 Modulare DTDs mit Hilfe von Entities

Beim Entwurf komplexer Datenstrukturen macht es häufig Sinn, die Definitionen auf mehrere DTDs zu verteilen. Mit Hilfe von Entities können Sie DTDs in andere DTDs als Module importieren. So bietet es sich beispielsweise in einem betriebswirtschaftlichen Datensystem an, eine separate DTD mit den Datenstrukturen eines Produkts anzulegen, die dann in verschiedenen anderen Datenstrukturen, etwa denen für eine Produktbestellung oder der für die Produktbestandsverwaltung im Lager, importiert werden kann.

Beispiel-DTD produkt.dtd:

<!ELEMENT produkt (warennummer,bezeichnung,hersteller)>
<!ELEMENT warennummer (#PCDATA)>
<!ELEMENT bezeichnung (#PCDATA)>
<!ELEMENT hersteller (#PCDATA)>

Beispiel-DTD bestellungen.dtd:

<!ENTITY % produktdaten SYSTEM "produkt.dtd" >
%produktdaten;
<!ELEMENT bestellungen (bestellung)*>
<!ELEMENT bestellung (produkt,besteller,anzahl,preis)*>
<!ELEMENT besteller (#PCDATA)>
<!ELEMENT anzahl (#PCDATA)>
<!ELEMENT preis (#PCDATA)>

Erläuterung:

In der DTD mit Namen produkt.dtd wird ein Elementtyp produkt Seite mit Elementinhalt definiert. Der Elementinhalt besteht aus den Elementtypen warennummer, bezeichnung und hersteller, die jeweils Zeicheninhalt haben können.

In der zweiten DTD mit Namen bestellung.dtd wird die DTD für Produktdaten nun eingebunden. Dazu wird zunächst ein nach oben Entity für externe Ressourcen mit Namen produktdaten definiert. Es verweist auf die andere DTD produkte.dtd. Wichtig ist dabei aber die Notation des Prozentzeichens vor dem Entity-Namen, so wie es bei nach oben Parameter Entities für DTD-Bausteine üblich ist. Denn durch das Prozentzeichen geben Sie an, dass Sie das Entity innerhalb der aktuellen DTD verwenden wollen, und dass dessen Inhalt als Bestandteil der DTD zu interpretieren ist.

Das so definierte Entity wird anschließend außerhalb jeder anderen DTD-Definition alleinstehend notiert (%produktdaten;). Dadurch werden die Definitionen aus produkt.dtd an dieser Stelle eingebunden und können in nachfolgenden Definitionen verwendet werden. Im obigen Beispiel können Sie das an der Definition des Elementtyps bestellung sehen. Dieser Elementtyp enthält als Elementinhalt vier Elementtypen. Davon werden aber nur drei in der aktuellen DTD definiert, nämlich besteller, anzahl und preis. Der andere Elementtyp produkt ist derjenige, der in produkt.dtd definiert ist.

Beispiel einer gültigen Anwendung:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE bestellungen SYSTEM "bestellungen.dtd">
<bestellungen>
  <bestellung>
    <produkt>
       <warennummer>39304</warennummer>
       <bezeichnung>Bohrmaschine XPL75</bezeichnung>
       <hersteller>Schniedelwutz &amp; Söhne</hersteller>
    </produkt>
    <besteller>Raffmarkt, Niederlassung Hamburg</besteller>
    <anzahl>100</anzahl>
    <preis>45900,00</preis>
  </bestellung>
  <bestellung>
    <produkt>
       <warennummer>92842</warennummer>
       <bezeichnung>Badehaube Paris</bezeichnung>
       <hersteller>Etienne Monet</hersteller>
    </produkt>
    <besteller>Sandburg Bademoden, Berlin</besteller>
    <anzahl>10</anzahl>
    <preis>234,00</preis>
  </bestellung>
</bestellungen>

Erläuterung:

In einer Anwendungsdatei wird lediglich die bestellungen.dtd angegeben. Trotzdem ist auch die produkt.dtd relevant, da sie in die bestellungen.dtd eingebunden wurde. Denn an der Stelle, der bestellungen.dtd, an der dem Elementtyp bestellung der Elementinhalt produkt zugewiesen wird, ist ja die komplette Definition des Elementtyps produkt aus der produkt.dtd gemeint.

nach oben
weiter | Seite Notationen für referenzierte Daten
zurück | Seite Attribute und Wertzuweisungen
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Dokumenttyp-Definitionen (DTDs)

© 2007 Seite Impressum


SELFHTML: XML / Dokumenttyp-Definitionen (DTDs) / Notationen für referenzierte Daten

SELFHTML

Notationen für referenzierte Daten
Informationsseite

nach unten Allgemeines zu Notationen
nach unten Schema zur Definition von Notationen
nach unten SYSTEM bzw. PUBLIC und mögliche Angaben zur Datenverarbeitung
nach unten

Allgemeines zu Notationen

Notationen sind "Verarbeitungshinweise" an die interpretierende Software, wenn Sie externe Daten in XML einbinden, also etwa Grafiken, Multimedia, Java-Applets, Flash-Filme oder dergleichen. Solche Daten werden vom XML-Parser nicht direkt verarbeitet. Mit Hilfe der Notationen steht jedoch eine Möglichkeit zur Verfügung, der XML-verarbeitenden Software Details über die referenzierten Daten mitzuteilen.

Um externe Daten in XML-Dateien einzubinden, benötigen Sie Seite Entities für externe Ressourcen und Seite Attribute mit Entity-Wert. Mit einer zusätzlichen Notations-Definition geben Sie an, wie diese eingebundenen Daten verarbeitet werden sollen, oder zumindest, um welchen Datentyp es sich dabei handelt. Im letzteren Fall könnte der Parser diese Angabe z.B. ans Betriebssystem weiterreichen, das für den entsprechenden Datentyp möglicherweise ein geeignetes Programm kennt.

Schema zur Definition von Notationen

Notationen werden innerhalb einer DTD nach folgendem Schema notiert:

Schema:

<!NOTATION Datentyp [SYSTEM|PUBLIC] "Verarbeitungshinweis" >

Erläuterung:

Die Definition einer Notation beginnt mit einer öffnenden spitzen Klammer <. Dahinter folgt unmittelbar anschließend ein Ausrufezeichen ! und dahinter, in Großbuchstaben, das Schlüsselwort NOTATION. Anschließend folgt die Angabe zum Datentyp, z.B. GIF oder VRML. Hinter dem Datentyp ist eines der Schlüsselwörter SYSTEM oder PUBLIC erlaubt. Anschließend folgt, in Anführungszeichen gesetzt, der Verarbeitungshinweis, dessen Inhalt sich nach dem Typ (SYSTEM oder PUBLIC) richtet.

Eine solche Notation-Definition können Sie an irgendeiner Stelle innerhalb der DTD definieren - vor oder nach anderen Definitionen wie <!ELEMENT...> ( Seite Elemente), <!ATTLIST...> ( Seite Attribute) oder <!ENTITY...> ( Seite Entities).

SYSTEM bzw. PUBLIC und mögliche Angaben zur Datenverarbeitung

Die Angabe SYSTEM ist dafür gedacht, wenn Sie wissen, wo auf dem Rechner oder im lokalen Rechnerverbund ein Programm aufrufbar ist, das die Daten verarbeiten kann. Für andere Fälle ist PUBLIC vorgesehen. Dann müssen Sie als Angabe zur Datenverarbeitung einen so genannten public identifier angeben. Ein vollständiges Beispiel für die Verwendung von SYSTEM finden Sie im Abschnitt Seite Attribute mit Entity-Wert. Für public identifier gibt es leider bislang keine verbindlichen und ordentlich katalogisierten Verzeichnisse. Insofern ist eine eindeutige Verwendung derzeit nicht möglich. Auch die Verwendung von SYSTEM wird in der Praxis unterschiedlich gehandhabt.

Beispiele für Angaben zu public identifiern:

<!NOTATION BMP PUBLIC "+//ISBN 0-7923-9432-1::Graphic Notation//NOTATION Microsoft Windows bitmap//EN">
<!NOTATION CGM-CHAR PUBLIC "ISO 8632/2//NOTATION Character encoding//EN">
<!NOTATION CGM-BINARY PUBLIC "ISO 8632/3//NOTATION Binary encoding//EN">
<!NOTATION CGM-CLEAR PUBLIC "ISO 8632/4//NOTATION Clear text encoding//EN">
<!NOTATION EPS PUBLIC "+//ISBN 0-201-18127-4::Adobe//NOTATION PostScript Language Ref. Manual//EN">
<!NOTATION FAX PUBLIC "-//USA-DOD//NOTATION CCITT Group 4 Facsimile Type 1 Untiled Raster//EN">
<!NOTATION GIF87a PUBLIC "-//CompuServe//NOTATION Graphics Interchange Format 87a//EN">
<!NOTATION GIF89a PUBLIC "-//CompuServe//NOTATION Graphics Interchange Format 89a//EN">
<!NOTATION WMF PUBLIC "+//ISBN 0-7923-9432-1::Graphic Notation//NOTATION Microsoft Windows Metafile//EN">

nach oben
weiter | Seite XML-Darstellung mit Stylesheets
zurück | Seite Entities für Textbausteine und Umschreibungen
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Dokumenttyp-Definitionen (DTDs)

© 2007 Seite Impressum


SELFHTML: XML / Darstellung von XML-Daten

SELFHTML

Darstellung von XML-Daten
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: die einführenden Bemerkungen Seite Einführung in XML und die Beschreibungen zu Kapitel Dokumenttyp-Definitionen (DTDs). Kenntnisse in Kapitel Stylesheets sind von Vorteil.
Dieser Abschnitt behandelt, wie XML-Datenstrukturen mit Hilfe von CSS, vor allem aber mit XSL/XSLT im Browser ansprechend präsentiert werden können, und welche weiteren Verarbeitungsmöglichkeiten bestehen. Um XSL/XSLT anwenden zu können, sind auch Kenntnisse in XPath erforderlich, das ebenfalls beschrieben wird.
Der Abschnitt besteht aus folgenden Seiten:

Seite XML-Darstellung mit Stylesheets
Seite Grundlagen von XSL/XSLT
Seite Beispiele für XSLT
Seite XSLT-Elemente
Seite XPath-Syntax
Seite XPath-Funktionen

nach oben

© 2007 Seite Impressum


SELFHTML: XML / Darstellung von XML-Daten / XML-Darstellung mit Stylesheets (CSS)

SELFHTML

XML-Darstellung mit Stylesheets
Informationsseite

nach unten Allgemeines zur Darstellung mit CSS
nach unten Zusammenhängendes Beispiel: ein Zugfahrplan
nach unten Grenzen und Probleme bei der Darstellung mit CSS
nach unten

Allgemeines zur Darstellung mit CSS

Kapitel Stylesheets sind eigentlich als Ergänzungssprache für HTML gedacht. Mit Hilfe von CSS ist es möglich, HTML-Elemente, die ein Browser mit Default-Formatierungen anzeigt, nach eigenen Wünschen zu formatieren. Diese Möglichkeit besteht je nach Browser auch, um XML-Daten zu formatieren. Genauso, wie Sie HTML-Elemente wie blockquote, h1 oder div mit CSS formatieren können, ist dies dann mit eigenen XML-Elementen möglich, egal ob sie nun telefonnummer, kurzbeschreibung oder wie auch immer heißen.

Damit die Kombination von XML und CSS funktioniert, müssen im Browser allerdings drei Voraussetzungen erfüllt sein:

  1. Der Browser muss XML verarbeiten können.
  2. Der Browser muss CSS kennen.
  3. Der Browser muss CSS in Verbindung mit XML erlauben.

Erfüllt werden diese Voraussetzungen vom Internet Explorer ab der Version 5.0 und von Netscape ab Version 6.0. Dabei ist nicht einmal eine DTD erforderlich. Es genügt, wenn eine Seite wohlgeformte XML-Datei existiert. Die Elemente einer solchen Datei können Sie mit CSS formatieren.

XML in Verbindung mit CSS hat den Vorteil, dass es in den Browsern, in denen es funktioniert, ohne Kenntnisse in XSL/XSLT auskommt. Da die Verarbeitung komplett im Browser stattfindet, ist auch keine Serverumgebung oder ähnliches erforderlich. Zu den Nachteilen siehe nach unten Grenzen und Probleme bei der Darstellung mit CSS.

XML 1.0 MS IE 5.0 Netscape 6.0 Opera 5.12 Mozilla Firefox 1 Safari 1.0 Zusammenhängendes Beispiel: ein Zugfahrplan

Der Zugfahrplan eines Bahnhofs ist ein typisches strukturiertes Dokument, für das es in HTML kaum sinnvolle Elemente gibt. Es ist zwar kein Problem, eine schöne Kapitel Tabelle in HTML zu erstellen und einen Fahrplan darin darzustellen. Doch aus "semantischer Sicht" gehen dabei Daten verloren. Denn eine HTML-Tabelle besteht aus Tabellenzellen, aber diese sagen nichts weiter über ihren jeweiligen Inhalt aus. Mit Hilfe einer XML-Struktur lassen sich die Fahrplandaten so beschreiben, dass die Einzeldaten jeweils in "Elementen mit Bedeutung" stehen.

Das folgende Beispiel zeigt eine solche XML-Struktur. Es besteht aus drei Teilen:

  1. der Kapitel DTD für die Validierbarkeit der Daten,
  2. einer XML-Anwendung dieser DTD, also einem Beispieldokument, das auch eine separate CSS-Datei einbindet, und
  3. aus dieser separaten CSS-Datei und ihren Definitionen.

Beispiel-Seite Anzeigebeispiel: So sieht's aus (XML-fähiger Browser zeigt z.B. die Datenstruktur an)

Beispiel-DTD fahrplan.dtd:

<!ELEMENT fahrplan  (bahnhof)>
<!ELEMENT bahnhof   (name,(ereignis)*)>
<!ELEMENT name      (#PCDATA)>
<!ELEMENT ereignis  (abfahrt | ankunft)>
<!ELEMENT abfahrt   (zeit,zugtyp,zugnr,route)>
<!ELEMENT ankunft   (zeit,zugtyp,zugnr,route)>
<!ELEMENT zeit      (#PCDATA)>
<!ELEMENT zugtyp    (#PCDATA)>
<!ELEMENT zugnr     (#PCDATA)>
<!ELEMENT route     (#PCDATA | start | ziel)*>
<!ELEMENT start     (#PCDATA)>
<!ELEMENT ziel      (#PCDATA)>

Beispiel einer gültigen Anwendung fahrplan.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE fahrplan SYSTEM "fahrplan.dtd">
<?xml-stylesheet type="text/css" href="fahrplan.css" ?>
<fahrplan>
<bahnhof>
 <name>Frankfurt HBF</name>
  <ereignis>
   <abfahrt>
    <zeit>10.24</zeit>
    <zugtyp class="ic">IC</zugtyp>
    <zugnr>234</zugnr>
    <route>Nürnberg 11.48, Regensburg 12.50, Passau 13.38, Linz 14.22
     <ziel>Wien West an 17.55</ziel>
    </route>
   </abfahrt>
  </ereignis>
  <ereignis>
   <ankunft>
    <zeit>10.36</zeit>
    <zugtyp>RB</zugtyp>
    <zugnr>20392</zugnr>
    <route><start>Koblenz ab 08.57</start>
     Bacharach 09.16, St. Goar 09.42, Mainz 10.05, Ffm Flughafen 10.25
    </route>
   </ankunft>
  </ereignis>
  <ereignis>
   <abfahrt>
    <zeit>10.39</zeit>
    <zugtyp>RSB</zugtyp>
    <zugnr>58483</zugnr>
    <route>Offenbach 10.52, Hanau 11.01
     <ziel>Aschaffenburg an 11.27</ziel>
    </route>
   </abfahrt>
  </ereignis>
  <ereignis>
   <ankunft>
    <zeit>10.40</zeit>
    <zugtyp class="ice">ICE</zugtyp>
    <zugnr>23</zugnr>
    <route><start>Hamburg ab 06.55</start>
     Hannover 08.05, Göttingen 08.43, Kassel 09.01, Fulda 09.43
    </route>
   </ankunft>
  </ereignis>
 </bahnhof>
</fahrplan>

Beispiel der eingebundenen CSS-Datei fahrplan.css:

bahnhof {
  position:absolute;
  top:10px;
  left:40px;
  background-color:#C0C0C0;
  padding:10px;
}

name {
  position:relative;
  display:block;
  width:600px;
  background-color:#808080;
  color:#FFFFFF;
  font-family:Tahoma,Arial,Helvetica,sans-serif;
  font-size:48px;
  padding:5px;
}

abfahrt {
  position:relative;
  display:block;
  width:600px;
  background-color:#FFFF80;
  color:#000000;
  font-family:Tahoma,Arial,Helvetica,sans-serif;
  font-size:16px;
  padding:5px;
}

ankunft {
  position:relative;
  display:block;
  width:600px;
  background-color:#FFFFFF;
  color:#000000;
  font-family:Tahoma,Arial,Helvetica,sans-serif;
  font-size:16px;
  padding:5px;
}

zeit {
  position:relative;
  width:70px;
  vertical-align:top;
}

zugtyp {
  position:relative;
  width:50px;
  vertical-align:top;
}

zugnr {
  position:relative;
  width:70px;
  vertical-align:top;
}

route {
  position:relative;
  width:350px;
}

ziel,start,zeit {
  font-weight:bold;
  color:#0000E0;
}

.ic, .ice {
  font-weight:bold;
  color:#E00000;
}

Erläuterung:

In der Beispiel-DTD, die separat in einer Datei namens fahrplan.dtd gespeichert wird, wird die gewünschte Elementstruktur der Daten definiert. Unterhalb des Dokument-Elements fahrplan gibt es ein umfassendes Element namens bahnhof, das aus einem Namen für den Bahnhof (Element name) und aus einer beliebigen Anzahl von Ereignissen (Element ereignis) besteht. Ein Ereignis besteht entweder aus einer Abfahrt oder einer Ankunft (Elemente abfahrt und ankunft). Beide Ereignisarten haben die gleiche innere Struktur. Sie bestehen aus einer Uhrzeit (Element zeit), einer Zugtypbezeichnung (Element zugtyp), einer Zugnummer (Element zugnr) und einer Routenbeschreibung des Zuges (route). Das Element route kann nochmals innere Elemente enthalten, nämlich für die Nennung des Startbahnhofs bei ankommenden Zügen (Element start, und für den Endbahnhof bei abfahrenden Zügen (Element ziel).
Einzelheiten zu solchen DTD-Definitionen finden Sie im Abschnitt Seite Elemente und Verschachtelungsregeln.

In der XML-Anwendungsdatei wird in einer Seite Dokumenttyp-Deklaration mit externer DTD auf die zuvor erstellte DTD Bezug genommen. Gleich im Anschluss an die Dokumenttyp-Deklaration, noch vor den eigentlichen Nutzdaten der Datei, folgt die Anweisung, mit deren Hilfe die CSS-Datei eingebunden wird:
<?xml-stylesheet type="text/css" href="fahrplan.css" ?>

Es handelt dabei um eine Seite Verarbeitungsanweisung. Durch die Notation xml-stylesheet weiß der Browser, dass die nachfolgenden Attribute eine separate Stylesheet-Datei einbinden, in der Formatierungsangaben für die einzelnen XML-Elemente stehen. Mit dem href-Attribut wird die Datei referenziert. Ebenfalls wichtig, besonders wenn die ganze Anwendung über einen Webserver aufgerufen wird, ist das Attribut type. Bei Verwendung von CSS erhält dieses Attribut den Wert text/css.

Der Rest der XML-Datei besteht aus den eigentlichen Nutzdaten. Dabei werden die Elemente verwendet, die in der DTD definiert wurden, und die Verschachtelungsregeln werden eingehalten. Das obige Beispiel beschränkt sich der Einfachheit halber auf vier "Ereignisse" im Zugfahrplan.

Die separate CSS-Datei, die im Beispiel den Namen fahrplan.css hat, definiert für die einzelnen Elemente gewünschte Kapitel CSS-Eigenschaften. Auf die einzelnen Eigenschaften wird an dieser Stelle nicht näher eingegangen. Aber einen wichtigen Grundsatz sollten Sie kennen: ein XML-Element hat für den Browser zunächst keinerlei Eigenschaften. Der Browser weiß nicht einmal, ob ein Element einen eigenen Block bei der Anzeige erzeugen soll, oder ob es nur innerhalb des laufenden Textes vorkommen soll (inline). Per Voreinstellung wird alles inline angezeigt, also wie ein völlig unstrukturierter Text. Deshalb müssen Sie bei den CSS-Definitionen von XML-Elementen, die einen eigenen Block erzeugen sollen, stets eine entsprechende Angabe notieren. Diese lautet display:block.

Im obigen Beispiel wird das Element bahnhof, das den gesamten Zugfahrplan einschließt, absolut positioniert (position:absolute). Die inneren Elemente werden dann in Abhängigkeit ihres relativen Anfangspunkts positioniert (position:relative). Diese Angaben in Verbindung mit Angaben zur Breite der Elemente (width:...) sorgen dafür, dass die Ausgabe sauber formatiert wie in einer Tabelle erscheint.

Eine Besonderheit stellt die unterste Definition in der CSS-Datei dar. Dort werden zwei so genannte Seite Klassen definiert. Solche Klassen können in HTML-Elementen normalerweise mit dem Kapitel Universalattribut class="Klassenname" angesprochen werden. Der Internet Explorer interpretiert solche Universalattribute auch in XML-Elementen in Verbindung mit CSS. In den Daten der XML-Datei im obigen Beispiel wird an zwei Stellen auf diese Klassen Bezug genommen, z.B. in der Anweisung <zugtyp class="ic">IC</zugtyp>.
Der Internet Explorer interpretiert sogar das Attribut style in einleitenden XML-Tags. Dies erlaubt Ihnen, einzelne XML-Elemente individuell zu formatieren, z.B.: <geburtstag style="font-family:Modern; font-size:18px; color:blue">.
Je stärker Sie jedoch die XML-Anwendungsdaten durch HTML-entlehnte Attribute wie class oder style "aufweichen", desto weiter entfernen Sie sich wieder von der reinen XML-Lehre, die Daten und Formatierung streng voneinander trennen will und Formatierung nur für definierte Bestandteile einer DTD erreichen will.

Beachten Sie:

Klassennamen wie im obigen Beispiel .ic und .ice sind in dieser Form nur für das Zusammenspiel von CSS mit HTML definiert. Ein XML-Parser, der anders als der Internet Explorer nicht das Universalattribut class erkennt, kann mit solchen Definitionen nichts anfangen. Eine Alternativnotation, die auch von solchen Parsern verstanden wird, wäre *[class~=ic] anstelle von .ic.

Grenzen und Probleme bei der Darstellung mit CSS

CSS ist für Anwender, die sich mit Vorkenntnissen in HTML an XML heranwagen, zunächst sicher einfacher zu verstehen und leichter anzuwenden. Dennoch gibt es Nachteile bei CSS in Verbindung mit XML, die Sie kennen müssen:

  • Ältere, auch CSS-fähige Browser können mit der Kombination aus XML-Daten und CSS nichts anfangen und zeigen entweder gar nichts oder Text ohne jede Formatierung an. Die Anzeige von XML-Daten in Verbindung mit CSS ist zumindest im WWW derzeit keine empfehlenswerte Lösung, weil derzeit noch zu viele Anwender ausgegrenzt werden.
  • Mit CSS in Version 1.0 lassen sich nur Elemente formatieren, keine Attribute. Wenn Sie beispielsweise in einer XML-DTD ein Attribut namens ausrichtung mit den erlaubten Werten links, rechts und zentriert definieren, haben Sie erst ab CSS2 die Möglichkeit, die Verbindung zwischen einer solchen Attributangabe und einer entsprechenden Textformatierung herzustellen. Einzelheiten dazu finden Sie im Abschnitt Seite Attributbedingte Formate definieren. Beachten Sie allerdings, dass nicht alle Browser solche CSS-Formate unterstützen.
  • CSS bietet erst ab Version 2.0 die Möglichkeit, automatische Nummerierungs-Schemata auf Elemente anzuwenden, etwa auf Kapitelüberschriften (Kapitel 1, 1.1, 1.2, 1.2.1, 1.2, 1.3 usw.). In XSL/XSLT ist die Möglichkeit der Nummerierung von vorneherein enthalten.
  • Es gibt mit CSS kaum sinnvolle Möglichkeiten, Daten bei der Anzeige zu filtern. Gerade bei feld- und datensatzorientierten Daten, wie sie in XML häufig gespeichert werden, ist nicht unbedingt immer gewünscht, dass bei einer Bildschirmausgabe jedes Feld angezeigt wird. Wenn Sie etwa eine Kontaktdatenbank in XML haben, möchten Sie bei der Ausgabe einer Telefonliste beispielsweise nur Namen, Firma und Telefonnummer ausgeben, aber keine Anschriften, Kontonummern und Geburtstage. In XSL/XSLT besteht eine solche Möglichkeit.
  • Auch weitere Leistungsmerkmale von XSL/XSLT, wie etwa die automatische Sortierung von Daten vor der Ausgabe, ist mit CSS derzeit nicht möglich.
nach oben
weiter | Seite Grundlagen von XSL/XSLT
zurück | Seite Notationen für referenzierte Daten
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Darstellung von XML-Daten

© 2007 Seite Impressum


SELFHTML: XML / Darstellung von XML-Daten / Grundlagen von XSL/XSLT

SELFHTML

Grundlagen von XSL/XSLT
Informationsseite

nach unten XSL und XSLT
nach unten Transformation mit XSLT
nach unten XSLT im Browser und auf dem Server
nach unten

XSL und XSLT

Die Sprache XSL (Extensible Stylesheet Language, zu deutsch: erweiterbare Formatsprache) besteht aus zwei wichtigen Komponenten:

  1. aus einer Komponente zur Formatierung von XML-Daten (oft XSL-FO - "XSL Formatting Objects" genannt), und
  2. aus einer Komponente zur Transformation von XML-Daten in andere XML-Daten.
    Für die Transformations-Komponente hat sich die Abkürzung XSLT (XSL Transformation, zu deutsch: XSL-Umwandlungen) etabliert.

Die beiden Abkürzungen XSL und XSLT sorgen erst einmal für Verwirrung, vor allem, wenn man sich die Seiten des W3-Konsortiums dazu ansieht. Dort gibt es getrennte Spezifikationen für XSL und XSLT, ergänzt um eine weitere relevante Spezifikation, nämlich die zu der Sprache XPath. XPath agiert innerhalb von XSLT als eine Subsprache. Warum aber kann es nicht einfach eine Formatsprache für XML-Daten geben? Der Grund ist vor allem, dass die Transformations-Komponente XSLT so mächtig ist, dass sie ein Eigenleben entwickelt hat. Lassen Sie sich dadurch nicht verwirren. In der gegenwärtigen Praxis verwenden Sie XSL vor allem in der Form, dass Sie die Transformations-Komponente XSLT verwenden.

XSL wurde als allgemeine Stylesheet-Sprache für XML-Daten geschaffen. Die grundsätzliche Aufgabe von XSL ist also eigentlich, XML-Daten zu formatieren. Die Anforderungen an eine solche Sprache sind natürlich sehr hoch, da XML-Daten beliebiger Natur sein können. Während CSS doch sehr stark auf das Aufgabengebiet von HTML und Web-Seitendarstellung zugeschnitten ist, sind die Formatierungsmöglichkeiten von XSL tendenziell stärker an den Anforderungen von Print-Publikationen orientiert. Dazu stellt XSL ähnlich wie CSS ein großes Arsenal an Style-Eigenschaften bereit, und enthält darüber hinaus aber auch Möglichkeiten, die den logischen Ablauf der Datenpräsentation steuern, wie z.B. automatische Kapitelnummerierung oder Sortierfunktionen. XSL kann zwar noch weitgehend als Beschreibungssprache für Formate bezeichnet werden, enthält darüber hinaus aber auch Konstrukte wie bedingungsabhängige Anweisungen oder Schleifenanweisungen, die eher an Programmiersprachen erinnern.

Mit der Transformations-Komponente XSLT verfügt XSL aber noch über eine weitere wichtige Möglichkeit: die Transformations-Komponente erlaubt nämlich unter anderem, XML-Daten in HTML zu transformieren. Und genau das ist die große Chance für XML im WWW! Denn Anbieter von Web-Projekten können ihre Daten dadurch in XML strukturell sauber speichern und trotzdem in HTML präsentieren, sodass jeder Browser die Daten anzeigen kann. Dabei sind beliebige HTML-Konstrukte erlaubt - einschließlich JavaScript und CSS. So entsteht nicht selten die Situation, dass sowohl XSLT als auch CSS zum Einsatz kommen, um aus XML-Daten ansprechende Web-Seiten zu erzeugen. Aber beide Sprachen haben in dieser Technik ihren spezifischen Ort: XSLT dient zur Generierung von HTML-Code aus den XML-Daten, und CSS ist die Formatsprache für das XSLT-generierte HTML-Konvertat.

Aus Sicht des Web Publishings ist gegenwärtig also die Transformation von XML-Definitionen in HTML-Kodierungen die Hauptanwendung von XSL. Deshalb wird in der vorliegenden Dokumentation auch nur auf XSLT näher eingegangen. Auf eine Referenz der XSL-eigenen Formatsprache wurde dagegen vorläufig verzichtet.

Transformation mit XSLT

Der XSLT-Teil von XSL hat die Aufgabe, Elemente einer XML-basierten Sprache in eine andere XML-gerechte Sprache zu transformieren. So können Sie also beispielsweise Elemente aus einer eigenen XML-Datei, wie vorname und zuname, in Auszeichnungs-Konstrukte einer anderen Sprache transformieren, um damit eine formatierte Ausgabe der Elemente zu erzeugen.

Wenn Sie beispielsweise XML-Daten in HTML transformieren, dann stellen Sie eine Verbindung zwischen Elementen und Attributen Ihrer XML-Daten und bestimmten HTML-Konstrukten her. So können Sie im XSLT-Stylesheet beispielsweise angeben, dass ein Element namens vorname in den HTML-Code <td>[...]</td> umgesetzt werden soll. Wenn Sie nun in Ihren XML-Anwendungsdaten das XSL-Stylesheet einbinden und beispielsweise <vorname>Stefan</vorname> notieren, dann wird daraus beim Transformieren als Ergebnis das HTML-Konstrukt <td>Stefan</td> erzeugt.

Man spricht auch von der Transformation aus einem Quellbaum in einen Ergebnisbaum. Dahinter steht die Tatsache, dass sich alle XML-basierten Daten als Seite Baumstruktur darstellen lassen. Das folgende Schaubild verdeutlicht, wie aus einem Quellbaum ein Ergebnisbaum wird - natürlich handelt es sich dabei nur um einen kleinen Ausschnitt:

Quellbaum und Zielbaum

Die schwarzen Striche links zeigen die Zuordnung. Aus dem Quellbaum-Tag <kontakt> wird im HTML-Ergebnisbaum z.B. das Tag <tr>, wodurch eine Tabellenzeile begonnen wird. An eine solche Transformation können jedoch ganz unterschiedliche Anforderungen gestellt werden. So können Sie an den unterstrichenen Bestandteilen erkennen, dass die Transformation an diesen Stellen komplizierter ist. Wo in den XML-Daten die Adressen für Homepage und E-Mail einfach als Text gespeichert sind, soll in der HTML-Ausgabe ein anklickbarer Link daraus gemacht werden. Dazu ist es nötig, bei der Transformation anzugeben, dass etwa der Inhalt des Quellbaum-Elements url im HTML-Ergebnisbaum dem href-Attribut des a-Elements zugewiesen werden soll und dann nochmal als Inhalt des a-Elements erscheinen soll. Wie Sie an diesem Beispiel sehen, ist es oft nötig, ganz gezielt auf einzelne Bestandteile (Knoten) der XML-Daten zuzugreifen, um diese beim Erzeugen des Ergebnisbaums ebenfalls an ganz bestimmten Stellen unterzubringen. Dabei müssen Sie gewünschte Bestandteile wie "Inhalt des Elements url im aktuellen Datensatz" präzise adressieren (das Knoten-Set ermitteln - siehe auch Seite Knoten und Knoten-Sets in der Baumstruktur). Für diese Adressierung benutzt XSLT eine Syntax, die in einer eigenen Sprache definiert wird: in XPath. XPath beschreibt, wie man in XML-gerechten Datenstrukturen auf beliebige Strukturbestandteile zugreifen kann.

XSL ist selbst eine XML-basierte Auszeichnungssprache und besteht aus Elementen und Attributen. Um sie zu verwenden, wird üblicherweise ihr Namensraum in eine XML-Datei importiert. Die Datei wird mit der Endung .xsl abgespeichert. In einer typischen XSLT-Anwendung müssen Sie neben dem XSL-Namensraum aber auch noch den Namensraum derjenigen Sprache importieren, in die transformiert werden soll. Bei Web-Anwendungen ist das meistens HTML. Eine typische XSLT-Datei besteht dann also aus XSL-eigenen Elementen und HTML-Elementen.

XSLT im Browser und auf dem Server

XSLT benötigt einen Seite Parser, der die Transformationsanweisungen ausführt. Denn wenn Sie in XSLT angeben, dass beispielsweise ein Element namens vorname in den HTML-Code <td>[...]</td> umgesetzt werden soll, so notieren Sie in XSLT lediglich ein entsprechendes Element, das eine Transformationsanweisung darstellt, genauso wie Sie in einer HTML-Datei HTML-Elemente notieren. Damit mit diesen Anweisungen etwas passiert, muss ein Parser die Anweisungen als Daten-Input verarbeiten und daraus ein Ergebnis erzeugen, dass er an eine Software weitergibt, zum Beispiel an einen Browser, der die Daten anzeigen soll.

Der XSLT-Parser ist einfach ein Software-Modul. Die Frage stellt sich jedoch, wo dieses Software-Modul am besten hingehört. Wenn die Transformation der XML-Daten in eine formatierte Ausgabe im Browser stattfinden soll, dann muss der Browser selbst über ein entsprechendes Modul verfügen. Dies ist beispielsweise beim Internet Explorer ab Version 5.0 der Fall. Ältere Browser kennen jedoch kein solches Modul, und es kommt zu gar keiner oder keiner sinnvollen Bildschirmanzeige der XML-Daten.

Die andere und derzeit häufig eingesetzte Möglichkeit bei Web-Seiten im Internet ist daher, das Software-Modul für den XSLT-Parser in den Webserver zu integrieren. Der Vorteil dabei ist, dass die XML-Daten nach HTML transformiert werden, bevor sie überhaupt mit HTTP an den aufrufenden Browser übertragen werden. Dies hat den wunderbaren Effekt, dass die XML-Daten auf jedem noch so alten und schlichten Browser präsentiert werden können. Denn der Browser bekommt beim Anfordern der Daten überhaupt nichts von XML mit. Stattdessen bekommt er vom Server nur HTML geliefert. Für Apache, das heute im Web am weitesten verbreitetste Webserver-Produkt, gibt es ein solches XSLT-Modul mit dem Namen Xalan - geschrieben in Java oder in C++.

Bei serverseitig dynamischen Web-Seiten, also etwa bei Seiten, die von einem CGI-Script erzeugt werden, haben Sie darüber hinaus natürlich auch die Möglichkeit, Ihre XML-Daten innerhalb des Scripts in HTML-Konstrukte zu transformieren. Bei einfachen XML-Anwendungen ist es kein Problem, die Übersetzungsanweisungen von XML in HTML im Script selber zu kodieren. Bei größeren XML-Anwendungen empfiehlt es sich jedoch, im Script auf Module zurückzugreifen, die auf diese Transformationsarbeit spezialisiert sind. In Perl gibt es beispielsweise die Module XML::Parser und XML::Parser::Expat, um XML-Daten direkt zu verarbeiten.

nach oben
weiter | Seite Beispiele für XSLT
zurück | Seite XML-Darstellung mit Stylesheets
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Darstellung von XML-Daten

© 2007 Seite Impressum


SELFHTML: XML / Darstellung von XML-Daten / Beispiele für XSLT

SELFHTML

Beispiele für XSLT
Informationsseite

nach unten Hinweise zu den Beispielen
nach unten Erstes Beispiel: ein Gruß
nach unten Zweites Beispiel: Text mit Formatierungen
nach unten Drittes Beispiel: Text mit Hyperlinks (Grafik und Multimedia)
nach unten Viertes Beispiel: ein Glossar als Tabelle
nach unten

Hinweise zu den Beispielen

Um mit den Konzepten von XSLT vertraut zu werden, empfiehlt es sich, alle Beispiele auf dieser Seite der Reihe nach durchzuarbeiten und zu verstehen.

Die Beispiele decken ein paar typische Einsatzmöglichkeiten von XSLT ab. Die Möglichkeiten der Sprache sind damit jedoch noch nicht ausgeschöpft. XSLT ist ja selbst eine XML-gerechte Sprache und besteht aus bestimmten Elementen und Attributen. Eine systematische Übersicht dazu finden Sie im Abschnitt Seite XSLT-Elemente.

Der Microsoft Internet Explorer 5.x hat je nach Auslieferungstyp Probleme mit diesen Beispielen. Der Grund ist, dass er mit einem veralteten XSLT-Parser ausgeliefert wurde und teilweise noch wird. Dieser Parser interpretiert XSLT basierend auf einem älteren Working Draft des W3-Konsortiums, der aber mittlerweile technisch längst überholt und durch die XSLT-1.0-Empfehlung ersetzt worden ist. Unglücklicherweise sind durch die Verbreitung des Internet Explorers auf diese Weise Millionen von Kopien eines völlig unbrauchbaren XSLT-Parsers in die Welt gelangt. Obwohl Microsoft längst Updates zu dem unbrauchbaren Werkzeug anbietet, ist nicht mehr zu verhindern, dass viele Anwender einen Internet Explorer besitzen, der XSLT-Übersetzungen nur über abenteuerliche Umwege und nur sehr unvollständig interpretiert. Deshalb bleibt der sinnvolle Einsatz von XSLT bis auf weiteres wohl nur server-seitig möglich. Einzelheiten zu der XSLT-Implementierung des Internet Explorers können Sie im Web z.B. in der englischsprachige Seite Unofficial MSXML XSLT FAQ nachlesen.

In den Beispielen auf dieser und den folgenden Seiten wird auf die ältere Implementierung des Internet Explorers keine Rücksicht genommen. XSLT wird so beschrieben, wie es heute verwendet werden sollte. Um die Beispiele nachzuvollziehen, gibt es z.B. Software-Werkzeuge wie Saxon oder Xt. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Links zu solcher Online-Seite Link-Verzeichnis: XML-Software.

Beispielhaft sei die Arbeit mit Saxon beschrieben. Dieses Programm ist ein reiner XSLT-Parser, der aus einer XML-Datei und einem XSLT-Stylesheet eine Ausgabedatei aufgrund der XSLT-Definitionen erzeugt. Saxon ist rein kommandozeilenorientiert (für Windows-Anwender gibt es eine Version, die im DOS-Fenster lauffähig ist). Dadurch ist Saxon auch hervorragend geeignet, um beispielsweise von Kapitel CGI ausgeführt zu werden, die XML-Daten in HTML-Form an einen aufrufenden Browser senden wollen.

Ein einfacher Aufruf von Saxon lautet:
saxon meinedaten.xml meine.xsl >ausgabe.html

Dabei ist meinedaten.xml eine Datei mit einer XML-Datenstruktur. Die Datei meine.xsl enthält XSLT-Definitionen, wie XML-Datenstrukturen aus XML-Daten wie denen der meinedaten.xml in HTML übersetzt werden sollen. ausgabe.html ist der Name der HTML-Datei, die aus den XML-Ausgangsdaten und den Definitionen zur HTML-Übersetzung erzeugt werden soll.

Auch in Verbindung mit Seite CGI-Scripts lässt sich ein Programm wie Saxon hervorragend einsetzen. Wenn Sie sich mit CGI und Perl beschäftigen, finden Sie im Abschnitt Seite qx(...) - Andere Programme/Scripts ausführen und STDOUT auffangen ein Beispiel beschrieben, wie Sie server-seitig gespeicherte XML-Daten mit Hilfe von Saxon und Perl als HTML-Code an den aufrufenden Browser senden lassen können.

Die Beispiele dieser und der folgenden Seiten wurden auf diese Weise mit Saxon von XML nach HTML übersetzt. Die HTML-Ergebnisdateien sind als Anzeigebeispiele aufrufbar. Ebenfalls aufrufbar sind die XML-Dateien.

XML 1.0 Erstes Beispiel: ein Gruß

Das erste Beispiel zeigt den einfachsten möglichen Fall: es gibt eine DTD, in der nur ein einziges Element definiert wird. Die XML-Anwendungsdatei ist entsprechend einfach. Eine XSL-Datei, die XSLT-Anweisungen enthält, sorgt für eine Transformation nach HTML.

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei gruss.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei gruss.xml - XML/XSLT-fähiger Browser erforderlich)

Beispiel-DTD gruss.dtd:

<!ELEMENT gruss (#PCDATA)>

Beispiel einer gültigen Anwendung gruss.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE gruss SYSTEM "gruss.dtd">
<?xml-stylesheet type="text/xsl" href="gruss.xsl" ?>

<gruss>hallo Welt!</gruss>

Beispiel der eingebundenen XSL-Datei gruss.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html><head></head><body>
 <p align="center" style="font-family:Tahoma; font-size:64px; color:red">
  <xsl:value-of select="." />
 </p>
 </body></html>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

In der Beispiel-DTD, die separat in einer Datei namens gruss.dtd gespeichert wird, wird das einzige Element des kleinen Beispiels, nämlich das Dokument-Element gruss, definiert. Einzelheiten zu solchen Elementdefinitionen finden Sie im Abschnitt Seite Elemente und Verschachtelungsregeln.

In der XML-Anwendungsdatei gruss.xml wird in einer Seite Dokumenttyp-Deklaration mit externer DTD auf die zuvor erstellte DTD Bezug genommen. Gleich im Anschluss an die Dokumenttyp-Deklaration, noch vor den eigentlichen Nutzdaten der Datei, folgt eine Anweisung, mit deren Hilfe eine XSL-Datei eingebunden wird:
<?xml-stylesheet type="text/xsl" href="gruss.xsl" ?>

Es handelt sich um eine Seite Verarbeitungsanweisung an die verarbeitende Software. Durch die Notation xml-stylesheet weiß die verarbeitende Software, dass die nachfolgenden Attribute eine separate Stylesheet-Datei einbinden. Mit dem href-Attribut wird die Datei referenziert. Ebenfalls wichtig ist das Attribut type. Bei Verwendung von XSL erwartet der XML-Parser bei diesem Attribut den Wert text/xsl.

Von Interesse ist nun der Aufbau der XSL-Datei, im Beispiel die Datei gruss.xsl. XSL-Stylesheet-Dateien erhalten üblicherweise die Endung .xsl. Da es sich bei XSL-Dateien ebenfalls um XML-gerechte Dateien handelt, beginnt die Datei wie üblich mit einer XML-Deklaration (im Beispiel: <?xml version="1.0" encoding="ISO-8859-1"?>).

Der gesamte Inhalt der XSL-Datei ist in <xsl:stylesheet...>...</xsl:stylesheet> eingeschlossen. Die Notation mit dem Doppelpunkt ist die typische Notation, wenn in einer Datei mehrere Seite XML-Namensräume eingesetzt werden. Im einleitenden Tag wird angegeben, welche Namensräume verwendet werden. Anzugeben ist auf jeden Fall der Namensraum von XSL, der verwendet werden soll. Dabei sollten Sie http://www.w3.org/1999/XSL/Transform als Namensraum angeben. Der ältere Parser des Microsoft Internet Explorers kann die Daten dann freilich nicht verarbeiten. Moderne XSL-Parser dagegen erwarten diese Angabe.
Mit einem zweiten xmlns-Attribut im einleitenden <xsl:stylesheet>-Tag können Sie außerdem den Namensraum der gewünschten Ergebnissprache angeben. Im obigen Beispiel wurde darauf verzichtet. Wenn Sie jedoch ein XML-gerechtes Ergebnisdokument benötigen, müssen Sie dessen Namensraum angeben. Mit einer Angabe wie xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" geben Sie beispielsweise den Namensraum von XHTML 1.0 in der Variante Transitional an.

Alle einleitenden und schließenden Tags innerhalb von <xsl:stylesheet...>...</xsl:stylesheet>, die zum Namensraum von XSL gehören, sind an der Notation <xsl:...>...</xsl:...> erkennbar. Der Namensraum, mit dem XSL eingebunden wird, muss übrigens nicht zwingend xsl lauten, doch hat sich dieser Name verständlicherweise eingebürgert.

Das obige Beispiel fährt fort mit <xsl:template match="/"> (engl. template = dt. Schablone). xsl:template erhält im einleitenden Tag stets ein Attribut namens match, bei dem Sie angeben, welches Element aus Ihren XML-Daten transformiert werden soll. Mit der Angabe match="/" beziehen Sie sich auf die Dokumentwurzel der XML-Daten, repräsentiert durch das Element gruss, angewendet in dem Tag-Paar <gruss>...</gruss>.

Nachdem Sie mit match ausgewählt haben, auf welches XML-Element Sie sich bei der folgenden Template-Definition beziehen, können Sie als Inhalt des xsl:template-Elements notieren, wie das ausgewählte XML-Element transformiert werden soll. Da in HTML transformiert werden soll, wird also als Inhalt von xsl:template der gewünschte HTML-Code notiert. Im obigen Beispiel ist das eine vollständige kleine HTML-Datei. Der Grund dafür ist, dass mit match="/" ja die Dokumentwurzel der XML-Daten ausgewählt wurde. Da als Ergebnis eine vollständige HTML-Datei erzeugt werden soll, wird die Dokumentwurzel der XML-Daten in das typische Grundgerüst einer HTML-Datei transformiert.

Innerhalb des HTML-Codes soll nun an einer gewünschten Stelle, im Beispiel zwischen <body> und </body> in einem Absatz <p>...</p>, der Inhalt von <gruss>...</gruss> ausgegeben werden. Dazu dient im Stylesheet der Befehl <xsl:value-of select="." /> (engl. value-of = dt. Wert von). Die Angabe select="." bedeutet so viel wie "wähle den vollständigen Inhalt des aktuellen Elements aus". Damit die HTML-Ausgabe etwas attraktiver aussieht, enthält das einleitende <p>-Tag Formatierungsangaben. Auch CSS-Angaben sind dabei, wie Sie am Beispiel sehen können, erlaubt. Bei der Transformation wird an der entsprechenden Stelle also folgender HTML-Code erzeugt:
<p align="center" style="font-family:Tahoma; font-size:64px; color:red">
hallo Welt!
</p>

XML 1.0 Zweites Beispiel: Text mit Formatierungen

Das nach oben Gruß-Beispiel hat eine starre XML-Struktur. Laut DTD-Definition darf darin genau einmal <gruss>...</gruss> notiert werden mit einem Grußtext als Inhalt. Das folgende Beispiel zeigt eine Datenstruktur, in der es ein Text-Element gibt, dass beliebig oft vorkommen kann, und das auch noch weitere, innere Elemente enthalten kann. Das Beispiel behandelt eine Produktnews-Datei, in der Nachrichten über neue Produkte auf dem Software-Markt gesammelt werden.
Die XSLT-Angaben zur Transformation nach HTML müssen in diesem komplexeren Beispiel etwas anders aufgebaut werden.

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei produktnews.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei produktnews.xml - XML/XSLT-fähiger Browser erforderlich)

Beispiel-DTD produktnews.dtd:

<!ELEMENT produktnews (#PCDATA | beschreibung)*>
<!ELEMENT beschreibung (#PCDATA | hersteller | produkt | preis)*>
<!ELEMENT hersteller (#PCDATA)>
<!ELEMENT produkt (#PCDATA)>
<!ELEMENT preis (#PCDATA)>

Beispiel einer gültigen Anwendung produktnews.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE produktnews SYSTEM "produktnews.dtd">
<?xml-stylesheet type="text/xsl" href="produktnews.xsl" ?>
<produktnews>

Die neuesten Produktnachrichten:

<beschreibung>
Die Firma <hersteller>Fridolin Soft</hersteller> hat eine neue Version des
beliebten Ballerspiels <produkt>HitYourStick</produkt> herausgebracht.
Nach Angaben des Herstellers soll die neue Version, die nun auch auf dem
Betriebssystem <produkt>Ganzfix</produkt> läuft, um die <preis>80 Dollar</preis>
kosten.
</beschreibung>

<beschreibung>
Von <hersteller>Ripfiles Inc.</hersteller> gibt es ein Patch zu der Sammel-CD-ROM
<produkt>Best of other people's ideas</produkt>. Einige der tollen
Web-Seiten-Templates der CD-ROM enthielten bekanntlich noch versehentlich nicht
gelöschte Angaben der Original-Autoren. Das Patch ist für schlappe
<preis>200 Euro</preis> zu haben.
</beschreibung>

</produktnews>

Beispiel der eingebundenen XSL-Datei produktnews.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html><head></head><body style="font-family:Verdana; font-size:24px; color:green">
  <xsl:apply-templates />
 </body></html>
</xsl:template>

<xsl:template match="beschreibung">
 <p style="font-family:Verdana; font-size:13px; color:black">
   <xsl:apply-templates />
 </p>
</xsl:template>

<xsl:template match="hersteller">
 <span style="font-weight:bold; color:red"><xsl:value-of select="." /></span>
</xsl:template>

<xsl:template match="produkt">
 <span style="font-weight:bold; color:blue"><xsl:value-of select="." /></span>
</xsl:template>

<xsl:template match="preis">
 <b><xsl:value-of select="." /></b>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Das Beispiel definiert in der DTD produktnews.dtd die gewünschten Elemente und ihre Verschachtelungsregeln. In der Anwendungsdatei produktnews.xml sehen Sie ein Beispiel, wie diese Definitionen korrekt umgesetzt werden. Einzelheiten zu solchen Elementdefinitionen in DTDs finden Sie im Abschnitt Seite Elemente und Verschachtelungsregeln.

Genau wie im nach oben Gruß-Beispiel wird in der XML-Datei wieder die XSL-Datei mit den Angaben zur Transformation nach HTML eingebunden. Die XSL-Datei - hier mit Namen produktnews.xsl - hat auch wieder das typische Grundgerüst, bestehend aus dem xsl:stylesheet-Element, das den Bezug zum Namensraum von XSL herstellt.

Wie im Gruß-Beispiel wird die Dokumentwurzel mit <xsl:template match="/"> angesprochen. Zwischen diesem einleitenden Tag und seinem Gegenstück </xsl:template> wird das HTML-Grundgerüst für die Transformation notiert. Innerhalb von <body>...</body> ist in diesem Beispiel jedoch nur das leere Element <xsl:apply-templates /> notiert (engl. apply-templates = dt. Schablonen anwenden). Mit dieser Angabe weisen Sie den XSLT-Parser an, an der entsprechenden Stelle Templates anzuwenden, die außerhalb des aktuellen xsl:template-Elements notiert sind.
Dass in diesem Beispiel mehrere einzelne Template-Definitionen mit je eigenen xsl:template-Elementen benötigt werden, liegt daran, dass der Inhalt, der in der HTML-Ausgabe zwischen <body>...</body> folgt, keinen starren Aufbau hat. So können innerhalb des Wurzelelements produktnews sowohl Text als auch beliebig viele Elemente vom Typ beschreibung und deren Kindelemente vorkommen. Die Angabe <xsl:apply-templates /> können Sie also lesen wie "beachte für Elemente, die innerhalb dieses Elements vorkommen, die separat definierten Templates für die betreffenden Elemente".

Die zweite Template-Definition im Beispiel beginnt mit <xsl:template match="beschreibung">. Damit geben Sie an, dass der folgende HTML-Code für alle Inhalte des Elementtyps beschreibung gilt. Im Beispiel wird für solche Elemente jeweils ein HTML-Absatz <p>...</p> mit gewünschten Formatierungen erzeugt. Innerhalb dieses xsl:template-Elements ist wieder nur <xsl:apply-templates /> notiert. Der Grund ist auch in diesem Fall wieder, dass Elemente vom Typ beschreibung gemischten Inhalt mit weiteren möglichen Kindelementen enthalten können. Für diese Kindelemente werden wiederum eigene Templates definiert, die durch die Anweisung <xsl:apply-templates /> berücksichtigt werden.

Für jeden der möglichen Kindelementtypen von beschreibung, im Beispiel die Typen hersteller, produkt und preis, werden Templates nach dem gleichen Muster angelegt. Da diese drei Elemente selbst keine weiteren Elemente mehr, sondern nur noch Zeicheninhalt (#PCDATA) enthalten können, beziehen sich die Angaben für die HTML-Formatierung einfach auf deren Inhalt. Den Inhalt müssen Sie dabei wie im Gruß-Beispiel mit <xsl:value-of select="." /> referenzieren.

XML 1.0 Drittes Beispiel: Text mit Hyperlinks (Grafik und Multimedia)

In den beiden ersten Beispielen wurde nur mit Elementen gearbeitet. Im Fall der Hyperlinks muss beim Erzeugen der HTML-Ausgabe jedoch auf ein einzelnes Attribut zugegriffen werden, nämlich auf das href-Attribut des a-Elements. Auch das ist mit XSLT möglich. Ebenso ist es, wenn Sie Grafiken oder Multimedia einbinden wollen. Dann müssen Sie beispielsweise auf das src-Attribut des img-Elements oder das data-Attribut des object-Elements zugreifen. Das folgende Beispiel demonstriert dies anhand der Hyperlinks.

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei linktext.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei linktext.xml - XML/XSLT-fähiger Browser erforderlich)

Beispiel-DTD linktext.dtd:

<!ELEMENT linktext (#PCDATA | link)*>
<!ELEMENT link (#PCDATA)>

Beispiel einer gültigen Anwendung linktext.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE linktext SYSTEM "linktext.dtd">
<?xml-stylesheet type="text/xsl" href="linktext.xsl" ?>
<linktext>
Unter der Adresse <link>http://www.w3.org/Style/XSL/</link> finden Interessierte
die Einstiegsseite des W3-Konsortiums zu XSL.
</linktext>

Beispiel der eingebundenen XSL-Datei linktext.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html><head></head><body bgcolor="#FFFFFF" text="#000000" link="#FF0000" vlink="#AA0000" alink="#000000" style="font-family:Arial; font-size:13px;">
  <xsl:apply-templates />
 </body></html>
</xsl:template>

<xsl:template match="link">
 <a><xsl:attribute name="href"><xsl:value-of select="." /></xsl:attribute>
 <xsl:value-of select="." /></a>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Das Beispiel definiert in der DTD linktext.dtd die gewünschten Elemente. In der Anwendungsdatei linktext.xml sehen Sie ein Beispiel, wie diese Definitionen korrekt umgesetzt werden. Einzelheiten zu solchen Elementdefinitionen in DTDs finden Sie im Abschnitt Seite Elemente (Tags) und Verschachtelungsregeln.

Genau wie im nach oben Gruß-Beispiel wird in der XML-Datei wieder die XSL-Datei mit den Angaben zur Transformation nach HTML eingebunden. Die XSL-Datei - hier mit Namen linktext.xsl - hat auch wieder das typische Grundgerüst.

Wie im nach oben Text-Beispiel kann das Dokument-Element linktext in diesem Beispiel gemischten Inhalt haben, bestehend aus Text und einem möglichen Kindelement link. Bei der Konstruktion der HTML-Ausgabe wird daher zwischen <body>...</body> wieder nur das leere Element <xsl:apply-templates /> notiert. Der HTML-Code für das mögliche Kindelement link wird in dem eigenen Template definiert, das mit <xsl:template match="link"> beginnt.

Bei diesem Template können Sie erkennen, wie auf einzelne Attribute zugegriffen wird. Denn um aus <link>http://www.w3.org/Style/XSL/</link> eine anklickbare HTML-Ausgabe wie <a href="http://www.w3.org/Style/XSL/">http://www.w3.org/Style/XSL/</a> zu erzeugen, muss der Inhalt des link-Elements gleich zweimal ausgegeben werden: einmal als Wertzuweisung an das href-Attribut, und einmal als Inhalt des a-Elements.
Dazu notieren Sie beim HTML-Code, der erzeugt werden soll, erst einmal nur das einleitende Tag ohne Attribut, im Linkbeispiel also nur <a>. Anschließend notieren Sie <xsl:attribute name="href">. Der XSLT-Parser weiß dann, dass sich das so angesprochende href-Attribut auf das zuvor notierte HTML-Element bezieht. Der Inhalt zwischen diesem Einleitungs-Tag und seinem Gegenstück </xsl:attribute> ist der Wert, den Sie dem Attribut zuweisen möchten. Im obigen Beispiel soll das ja der Inhalt sein, der zwischen <link> und </link> steht. Dieser Inhalt lässt sich mit der bereits bekannten Anweisung <xsl:value-of select="." /> referenzieren. So gelangt der Zeicheninhalt des XML-Elements in die Wertzuweisung an das HTML-Attribut.

Gleichzeitig soll der Inhalt von <link>...</link> aber in HTML auch als Inhalt von <a...>...</a> erscheinen. Also wird auch dafür noch einmal <xsl:value-of select="." /> innerhalb des Templates für das link-Element notiert.

Beachten Sie:

Bei Grafiken und Multimedia gehen Sie analog dazu vor. Angenommen in den XML-Daten steht:
<bild>images/titel.gif</bild>
Dann können Sie dies in XSL wie folgt in HTML übersetzen:
<xsl:template match="bild">
<img><xsl:attribute name="src"><xsl:value-of select="." /></xsl:attribute></img>
</xsl:template>

Wichtig: das img-Element in HTML sollten Sie in diesem Fall mit Anfangs- und End-Tag und nichts dazwischen notieren. Ansonsten produzieren die XSLT-Parser in der Regel Fehler.

XML 1.0 Viertes Beispiel: ein Glossar

Ein Glossar ist ein typisches Dokument mit einer einfachen, sich wiederholenden Struktur. Ein Glossar besteht aus Begriffen und zugehörigen Definitionen. Jeweils ein Begriff mit Definition stellt ein Glossareintrag dar. Bei der Transformation dieser XML-Daten nach HTML soll das Glossar als zweispaltige Tabelle formatiert werden. In der linken Spalte stehen die Begriffe, und in der rechten Spalte die zugehörigen Definitionen.

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei glossar.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei glossar.xml - XML/XSLT-fähiger Browser erforderlich)

Beispiel-DTD glossar.dtd:

<!ELEMENT glossar     (eintrag)*>
<!ELEMENT eintrag     (begriff,definition)>
<!ELEMENT begriff     (#PCDATA)>
<!ELEMENT definition  (#PCDATA)>

Beispiel einer gültigen Anwendung glossar.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE glossar SYSTEM "glossar.dtd">
<?xml-stylesheet type="text/xsl" href="glossar.xsl" ?>
<glossar>
 <eintrag>
    <begriff>Avatar</begriff>
   <definition>
    Bezeichnet in der Mythologie einen Gott, der auf Erden wandelt.
    Im Online-Sprachgebrauch eine grafische Phantasiefigur, mit der
    ein Teilnehmer an Chats, Rollenspielen usw. teilnimmt.
    </definition>
 </eintrag>
 <eintrag>
    <begriff>Award</begriff>
   <definition>
    Im WWW eine Auszeichnung für besonders gut gemachte Web-Seiten.
    Eine Inflation von selbsternannten Award-Verleihern, deren Awards
    nur den Zweck haben, Besucher auf die eigenen Seiten zu locken,
    haben das Award-Wesen im Web jedoch stark beschädigt.
    </definition>
 </eintrag>
</glossar>

Beispiel der eingebundenen XSL-Datei glossar.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <table border="1">
 <tr>
  <td><b>Begriff</b></td>
  <td><b>Definition</b></td>
 </tr>
 <xsl:for-each select="glossar/eintrag">
 <tr>
  <td valign="top"><xsl:value-of select="begriff" /></td>
  <td valign="top"><xsl:value-of select="definition" /></td>
 </tr>
 </xsl:for-each>
 </table>
 </body>
 </html>
 </xsl:template>

</xsl:stylesheet>

Erläuterung:

Das Beispiel definiert in der DTD glossar.dtd die gewünschten Elemente. In der Anwendungsdatei glossar.xml sehen Sie ein Beispiel, wie diese Definitionen korrekt umgesetzt werden. Einzelheiten zu solchen Elementdefinitionen in DTDs finden Sie im Abschnitt Seite Elemente (Tags) und Verschachtelungsregeln.

Genau wie im nach oben Gruß-Beispiel wird in der XML-Datei wieder die XSL-Datei mit den Angaben zur Transformation nach HTML eingebunden. Die XSL-Datei - hier mit Namen glossar.xsl - hat auch wieder das typische Grundgerüst.

Da das Glossar einen starren Aufbau hat, bestehend aus festem Elementinhalt mit fester Reihenfolge, ist es möglich, die gesamte gewünschte HTML-Ausgabe ähnlich wie im Gruß-Beispiel mit einem einzigen xsl:template-Element zu erzeugen. Ein wichtiger Unterschied zum Gruß-Beispiel besteht jedoch: während der Gruß in der XML-Datei nur einmal notiert werden durfte, kann das Glossar entsprechend der DTD-Definitionen aus beliebig vielen Glossareinträgen bestehen. Diese sind allerdings einheitlich aufgebaut.

Für solche Fälle gibt es die Schleifenanweisung xsl:for-each (engl. for-each = dt. für jedes einzelne). Sie kommt im obigen Beispiel dort zum Einsatz, wo sie im HTML-Code einen Wiederholungs-Effekt erzeugen soll. Die Daten des Glossars sollen ja als HTML-Tabelle ausgegeben werden, also wird mit <table...>...</table> eine entsprechende Tabelle erzeugt. Innerhalb der Schleife, die mit <xsl:for-each select="glossar/eintrag"> eingeleitet wird, wird eine Tabellenzeile konstruiert. Das führt dazu, dass beim Erzeugen der HTML-Ausgabe so viele Tabellenzeilen erzeugt werden, wie das Glossar Einträge hat. Innerhalb der Schleife wird als Inhalt von <tr>...</tr> mit der bereits bekannten Anweisung value-of auf den durch die Schleife jeweils aktuellen Inhalt der Elemente begriff und definition Bezug genommen.

Neu an dem Glossarbeispiel ist ferner die Adressierung select="glossar/eintrag" beim xsl:for-each-Element. Dort muss der gesamte Pfadname des Elements angegeben werden, bei dem die Schleife wiederholt werden soll. Der Pfadname beginnt beim Dokument-Element, also glossar. Gewünscht ist das Element eintrag, das ein Kindelement von glossar ist. Solche Hierarchien werden genauso notiert wie Verzeichnisnamen in URIs, also getrennt durch Schrägstriche. Die Regeln für solche Pfadangaben werden durch die Sprache Seite XPath geregelt.

nach oben
weiter | Seite XSLT-Elemente
zurück | Seite Grundlagen von XSL/XSLT
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Darstellung von XML-Daten

© 2007 Seite Impressum


SELFHTML: XML / Darstellung von XML-Daten / XSLT-Elemente

SELFHTML

XSLT-Elemente
Informationsseite

nach unten Hinweise zu den XSLT-Elementen
nach unten xsl:apply-imports (importierte Stylesheets anwenden)
nach unten xsl:apply-templates (untergeordnete Schablonen anwenden)
nach unten xsl:attribute (Attribut im Ergebnisbaum erzeugen)
nach unten xsl:attribute-set (Mehrere Attribute im Ergebnisbaum erzeugen)
nach unten xsl:call-template (Schablone aufrufen)
nach unten xsl:choose (Auswahl treffen)
nach unten xsl:comment (Kommentar setzen)
nach unten xsl:copy (Element in Ergebnisbaum kopieren)
nach unten xsl:copy-of (Beliebige ermittelte Daten in Ergebnisbaum kopieren)
nach unten xsl:decimal-format (Dezimalformat)
nach unten xsl:element (Element erzeugen)
nach unten xsl:fallback (alternative Ausführungsanweisung)
nach unten xsl:for-each (für jedes Element aus einer Menge wiederholen)
nach unten xsl:if (wenn-Bedingung)
nach unten xsl:include (Stylesheets inkludieren)
nach unten xsl:import (Stylesheets importieren)
nach unten xsl:key (Schlüssel für Auswahl von Elementen)
nach unten xsl:message (Meldung beim Transformieren ausgeben)
nach unten xsl:namespace-alias (Stylesheet in anderes Stylesheet transformieren)
nach unten xsl:number (fortlaufende Nummerierung)
nach unten xsl:otherwise (andernfalls-Anweisung)
nach unten xsl:output (Erzeugen des Ergebnisbaums kontrollieren)
nach unten xsl:param (Parameter definieren)
nach unten xsl:preserve-space (Leerraumzeichen beibehalten)
nach unten xsl:processing-instruction (Stylesheet-Code generieren)
nach unten xsl:sort (Elemente nach Inhalt sortieren)
nach unten xsl:strip-space (Behandlung von Leerraumzeichen steuern)
nach unten xsl:stylesheet (Stylesheet-Wurzelelement)
nach unten xsl:template (Schablone für Ergebnisbaum definieren)
nach unten xsl:text (Zeicheninhalt ausgeben)
nach unten xsl:transform (Stylesheet-Wurzelelement)
nach unten xsl:value-of (Wert ausgeben)
nach unten xsl:variable (Variable definieren)
nach unten xsl:when (Bedingung innerhalb einer Auswahl)
nach unten xsl:with-param (Parameter einen Wert zuweisen)
nach unten

Hinweise zu den XSLT-Elementen

Den logischen Einstieg in eine XSL-Datei stellt das nach unten xsl:stylesheet-Element dar. Das wichtigste Element innerhalb davon ist das nach unten xsl:template-Element, mit dessen Hilfe der Ausgangsbaum der XML-Daten in einen Ergebnisbaum einer anderen XML-gerechten Sprache (z.B. auch HTML) übersetzt wird.

Bei den Beschreibungen der Elemente ist häufig von Knoten und Knotentypen die Rede. Diese Begriffe werden im Abschnitt Seite Knoten und Knoten-Sets in der Baumstruktur einführend erläutert. Vertiefende Informationen dazu stehen im Abschnitt über die Seite XPath-Syntax. Denn XPath stellt eine Art von Ergänzungs- oder Hilfssprache innerhalb eines XSLT Stylesheets dar, um unter anderem die Bestandteile eines XML-Dokuments genau zu adressieren. XPath hat, wie XSLT, eine eigene Spezifikation.

Beachten Sie zum Thema Internet Explorer die Seite Hinweise zu den Beispielen.

XSLT 1.0 xsl:apply-imports (importierte Stylesheets anwenden)

Wendet innerhalb eines mit nach unten xsl:template definierten Templates extern definierte Templates an, die mit xsl:import importiert werden.

Erwartet keine Attribute.

Kann nur innerhalb von nach unten xsl:template vorkommen.

Beispieldatei apply_imports.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei apply_imports.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei apply_imports.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="apply_imports1.xsl" ?>
<test>
<bild>pinguin.gif</bild>
<text>Der Pinguin ist das Wahrzeichen von Linux</text>
</test>

Beispieldatei apply_imports1.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:import href="apply_imports2.xsl" />

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <xsl:apply-imports/>
 </body>
 </html>
</xsl:template>

</xsl:stylesheet>

Beispieldatei apply_imports2.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="bild">
<img><xsl:attribute name="src"><xsl:value-of select="." /></xsl:attribute></img>
</xsl:template>

<xsl:template match="text">
<p><xsl:value-of select="." /></p>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Im XML-Dokument apply_imports.xml wird das Stylesheet apply_imports1.xsl eingebunden. Dort wird mit Hilfe von <xsl:import href="apply_imports2.xsl" /> ein zweites Stylesheet eingebunden, nämlich apply_imports2.xsl. In der zweiten Stylesheet-Datei stehen Definitionen zur HTML-Umsetzung der Elemente bild und text. Die entsprechenden Definitionen werden im ersten Stylesheet an der Stelle angewendet, an der <xsl:apply-imports/> notiert ist.

XSLT 1.0 xsl:apply-templates (untergeordnete Schablonen anwenden)

Wendet innerhalb eines mit nach unten xsl:template definierten Templates andere Templates an, die gegebenenfalls mit xsl:template definiert sind. Auf diese Weise lassen sich Abhängigkeiten und Reihenfolgen bei der Anwendung von Templates steuern.

Hat folgende Attribute:

select | (optional) Wählt ein Template aus, das angewendet werden soll. Angegeben wird das gewünschte Knoten-Set bzw. ein Pfad nach Seite XPath-Syntax. Wenn eine xsl:template-Definition für dieses Element existiert, wird sie angewendet. Fehlt das select-Attribut, werden alle nächstuntergeordneten xsl:template-Definitionen angewendet.
mode | (optional) Wählt das mit select angegebene Template nur dann aus, wenn es den angegebenen Modus hat. Dazu muss bei der xsl:template-Definition mit mode ein übereinstimmender Name für den Modus vergeben sein.

Kann innerhalb von nach unten xsl:template vorkommen.

Beispieldatei apply_templates.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei apply_templates.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei apply_templates.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="apply_templates.xsl" ?>
<test>
<text>
Was du <zeit>heute</zeit> kannst besorgen, das verschiebe nicht auf <zeit>morgen</zeit>.
</text>
</test>

Beispieldatei apply_templates.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
  <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="text">
 <p style="font-family:Tahoma; font-size:18px">
 <xsl:apply-templates />
 </p>
</xsl:template>

<xsl:template match="zeit">
 <i style="color:red">
  <xsl:value-of select="." />
 </i>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Im Beispiel-Stylesheet kommt die Anweisung <xsl:apply-templates /> (ohne Attribute) zweimal vor. Zum ersten Mal ist sie in der Template-Definition für die Dokumentwurzel notiert. Dort steht die Anweisung im sichtbaren Bereich des zu erzeugenden HTML-Codes, also zwischen <body> und </body>. Da kein select-Attribut angegeben ist, bewirkt sie, dass an der entsprechenden Stelle des HTML-Codes die Templates für die nächstuntergeordneten Elemente angewendet werden. In der XML-Struktur des Beispiels sind dies Elemente vom Typ text. Für solche Elemente ist mit <xsl:template match="text"> ein Template definiert. Elemente dieses Typs werden in HTML in einen Textabsatz <p>...</p> eingeschlossen, der mit CSS formatiert wird. Für den Inhalt des Textabsatzes gilt jedoch erneut: Template-Definitionen untergeordneter Elemente beachten! Darum ist innerhalb des Textabsatzes wieder die Anweisung <xsl:apply-templates /> notiert. Als untergeordnetes Element von text kann im Beispiel das Element zeit vorkommen. Für dieses Element wird mit <xsl:template match="zeit"> wiederum ein Template definiert. Text in solchen Elementen wird in HTML kursiv und rot dargestellt.
Da innerhalb des zeit-Elements keine weiteren, untergeordneten Templates beachtet werden müssen, braucht nur noch der jeweilige Inhalt des Elements beachtet werden. Dies wird durch die Anweisung <xsl:value-of select="." /> bewerkstelligt (siehe auch nach unten xsl:value-of).

XSLT 1.0 xsl:attribute (Attribut im Ergebnisbaum erzeugen)

Kann im Ergebnisbaum ein Attribut setzen und mit einem Wert versorgen, also z.B. im HTML-Element div ein Attribut align setzen und mit dem Wert center versorgen.

Hat folgende Attribute:

name | (obligatorisch) Gibt den Namen des Attributs an, z.B. align.
namespace | (optional) Gibt den URI des Namensraums an, aus dem das Attribut stammt.

Kann innerhalb von nach unten xsl:template oder innerhalb von nach unten xsl:attribute-set vorkommen.

Beispieldatei attributes.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei attribute.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei attribute.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="attribute.xsl" ?>
<test>
<text ausrichtung="links">
Das ist linksbündiger Text
</text>
<text ausrichtung="zentriert">
Das ist zentrierter Text
</text>
<text ausrichtung="rechts">
Das ist rechtsbündiger Text
</text>
</test>

Beispieldatei attributes.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
  <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="text">
 <p>
 <xsl:choose>
  <xsl:when test="@ausrichtung='zentriert'">
   <xsl:attribute name="align">center</xsl:attribute>
  </xsl:when>
  <xsl:when test="@ausrichtung='rechts'">
   <xsl:attribute name="align">right</xsl:attribute>
  </xsl:when>
  <xsl:otherwise>
   <xsl:attribute name="align">left</xsl:attribute>
  </xsl:otherwise>
 </xsl:choose>
 <xsl:value-of select="." />
 </p>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Im Beispiel gibt es ein XML-Element text mit dem Attribut ausrichtung, das die Werte links, rechts und zentriert haben kann (laut DTD, im Beispiel weggelassen). In den XML-Daten sind drei Elemente des Typs text notiert, jeweils mit anderem Wert bei ausrichtung. Im Beispiel-Stylesheet wird für Element text mit <xsl:template match="text"> ein Template definiert. Das Template bewirkt, dass Elemente vom Typ text in HTML-Elemente vom Typ p übersetzt werden. Dabei soll jedoch auch die Ausrichtung des Textes berücksichtigt werden. Um zu entscheiden, ob im p-Element das Attribut align den Wert center, right oder left erhalten soll, wird mit den Anweisungen nach unten xsl:choose, nach unten xsl:when und nach unten xsl:otherwise abgefragt, ob das zu übersetzende text-Element der XML-Daten beim Attribut ausrichtung den Wert zentriert, rechts oder links hat. Unterhalb des Abfrage-Komplexes wird schließlich mit der Anweisung <xsl:value-of select="." /> der Inhalt des XML-Elements text in den Inhalt des HTML-Elements p übersetzt.

XSLT 1.0 xsl:attribute-set (mehrere Attribute im Ergebnisbaum erzeugen)

Definiert ein oder mehrere Attribute für den Ergebnisbaum, und zwar separat. Besonders sinnvoll, um häufig verwendete Attributketten wie border="0" cellpadding="0" cellspacing="0" als Baustein zu definieren, oder um alternative Elementausprägungen durch unterschiedliche Attributbausteine bereitzustellen.

Hat folgende Attribute:

name | (obligatorisch) vergibt einen Namen für das Attribut-Set. Unter diesem Namen kann das Attribut-Set anschließend verwendet werden.
use-attribute-sets | (optional) Bindet andere Attribut-Sets in das aktuelle Attribut-Set mit ein. Anzugeben sind ein oder mehrere Namen von anderen Attribut-Sets. Mehrere Namen werden durch Leerzeichen getrennt.

Kann innerhalb von nach unten xsl:stylesheet vorkommen und muss außerhalb von nach unten xsl:template notiert sein. Kann von nach unten xsl:element oder nach unten xsl:copy über deren Attribut use-attribute-sets innerhalb eines Templates verwendet werden.

Beispieldatei attribute_set.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei attribute_set.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei attribute_set.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="attribute_set.xsl" ?>
<test>
 <eintrag>
  <begriff>
   HTML
  </begriff>
  <definition>
   Abkürzung für 'How To Make Love'
  </definition>
 </eintrag>
</test>

Beispieldatei attribute_set.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:attribute-set name="sichtbar">
  <xsl:attribute name="border">1</xsl:attribute>
  <xsl:attribute name="cellpadding">3</xsl:attribute>
  <xsl:attribute name="cellspacing">1</xsl:attribute>
</xsl:attribute-set>

<xsl:attribute-set name="unsichtbar">
  <xsl:attribute name="border">0</xsl:attribute>
  <xsl:attribute name="cellpadding">3</xsl:attribute>
  <xsl:attribute name="cellspacing">1</xsl:attribute>
</xsl:attribute-set>

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <xsl:element name="table" use-attribute-sets="sichtbar">
 <xsl:for-each select="test/eintrag">
 <tr>
  <td valign="top"><b><xsl:value-of select="begriff" /></b></td>
  <td valign="top"><xsl:value-of select="definition" /></td>
 </tr>
 </xsl:for-each>
 </xsl:element>
 </body>
 </html>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Das Beispiel definiert ein Glossar. Die XML-Daten enthalten einen Glossareintrag. Im Beispiel-Stylesheet wird das Glossar in eine HTML-Tabelle umgesetzt. Zu Beginn des Beispielausschnitts und außerhalb der Template-Definitionen werden mit der attribute-set-Anweisung zwei Attribut-Sets definiert, eines mit dem Namen sichtbar, und eines mit dem Namen unsichtbar. Zwischen dem einleitenden Tag <xsl:attribute-set> und seinem Gegenstück </xsl:attribute-set> werden mit Hilfe von nach oben xsl:attribute Attribute definiert, die später in den Template-Definitionen verwendet werden können. Im Beispiel handelt es sich um Attribute, die später im table-Element Verwendung finden sollen. Die beiden Attribut-Sets definieren die Attribute so, dass diese einmal die Definition einer sichtbaren Tabelle und einmal die einer unsichtbaren Tabelle ermöglichen.
Innerhalb der Template-Definition, in der die HTML-Tabelle erzeugt wird, wird mit der Anweisung <xsl:element name="table" use-attribute-sets="sichtbar"> das table-Element erzeugt, und zwar mit den Attributen und Werten, die im Attribut-Set mit dem Namen sichtbar definiert wurden.

XSLT 1.0 xsl:call-template (Schablone aufrufen)

Ruft ein anderes Template mit dessen Namen auf. Kann dabei auch Parameterwerte an das aufgerufene Template übergeben.

Hat folgende Attribute:

name (obligatorisch) der Namen des aufzurufenden Templates, das mit <xsl:template name="..." [...]> definiert sein muss.

Kann innerhalb von nach unten xsl:template vorkommen. Kann ohne Inhalt notiert werden oder mit Inhalt und End-Tag. Als Inhalt sind Elemente vom Typ nach unten xsl:with-param erlaubt.

Beispieldatei call_template.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei call_template.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei call_template.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="call_template.xsl" ?>
<test>
<kontakt mail="ludo@example.org">Stanislaw Ludowiczy</kontakt>
</test>

Beispieldatei call_template.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template name="Label">
 <xsl:text>, E-Mail-Adresse: </xsl:text>
</xsl:template>

<xsl:template match="kontakt">
 <div>
 <xsl:value-of select="." />
 <xsl:call-template name="Label" />
 <xsl:value-of select="@mail" />
 </div>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Das XML-Beispiel enthält Kontaktdaten, wobei im Element kontakt als Inhalt der Name notiert wird, und das Element als Attribut die zugehörige E-Mail-Adresse zugewiesen bekommt.
Im Beispiel-Stylesheet wird mit <xsl:template name="Label"> ein Template definiert und benannt. Darin wird mit nach unten xsl:text statischer Text definiert. Innerhalb eines anderen Templates, das mit <xsl:template match="kontakt"> definiert wird, ist ein Aufruf des Templates mit dem Namen Label notiert, und zwar in der Anweisung <xsl:call-template name="Label" />. Dadurch wird im Beispiel aus den XML-Daten <kontakt mail="ludo@example.org">Stanislaw Ludowiczy</kontakt> die Ausgabe <div>Stanislaw Ludowiczy, E-Mail-Adresse: ludo@example.org</div> erzeugt.

XSLT 1.0 xsl:choose (Auswahl treffen)

Bildet den Rahmen für eine Reihe von Abfragen, die mit nach unten xsl:when und nach unten xsl:otherwise durchgeführt werden. Die Reihe kann aus beliebig vielen xsl:when-Abfragen und einer abschließenden xsl:otherwise-Anweisung bestehen. Ausgewählt wird diejenige Abfrage, deren Bedingung als erste zutrifft.

Hat keine Attribute.

Kann innerhalb von nach unten xsl:template vorkommen.

Beispieldatei choose.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei choose.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei choose.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="choose.xsl" ?>
<test>
<zahl>69</zahl>
<zahl>12345</zahl>
<zahl>743</zahl>
<zahl>915743</zahl>
</test>

Beispieldatei choose.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <h3>Die Zahlen lauten:</h3>
 <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="zahl">
<div>
<xsl:value-of select="." />
<xsl:variable name="wert" select="." />
 <xsl:choose>
  <xsl:when test="$wert &lt; 10000">
   <xsl:text> (eine kleine Zahl)</xsl:text>
  </xsl:when>
  <xsl:otherwise>
   <xsl:text> (eine gro&szlig;e Zahl)</xsl:text>
  </xsl:otherwise>
 </xsl:choose>
</div>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

In den XML-Daten des Beispiels werden eine Reihe Zahlen notiert, und zwar jeweils in einem Element namens zahl. Im Beispiel-Stylesheet wird mit <xsl:template match="zahl"> das Template definiert, das die HTML-Ausgabe der Zahlen steuert. Mit <xsl:value-of select="." /> wird der Wert der Zahl ausgegeben (siehe auch nach unten xsl:value-of). Anschließend wird eine Variable namens wert definiert, die sich den Wert, also den Inhalt zwischen <zahl> und </zahl>, merkt (siehe auch nach unten xsl:variable). Mit <xsl:choose> wird sodann eine Abfragereihe eingeleitet. Sie enthält eine xsl:when-Abfrage und eine xsl:otherwise-Anweisung. Bei der xsl:when-Abfrage wird abgefragt, ob der Wert der Variablen wert kleiner als 10000 ist. Wenn ja, wird hinter die bereits ausgegebene Zahl der Text (eine kleine Zahl) ausgegeben, andernfalls der Text (eine große Zahl). Für die Textausgabe wird nach unten xsl:text benutzt.

XSLT 1.0 xsl:comment (Kommentar setzen)

Schließt Ausgaben im Ergebnisbaum in XML- (auch HTML)-gerechte Kommentare ein, sodass der Inhalt nicht ausgegeben wird.

Hat keine Attribute.

Kann innerhalb von nach unten xsl:template vorkommen.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="/">
 <html>
 <head>
 <script type="text/javascript">
 <xsl:comment>
   alert("Hallo Welt");
 </xsl:comment>
 </script>
 </head>
 <body>
 Hallo Welt
 </body>
 </html>
</xsl:template>

Erläuterung:

Im Beispiel-Stylesheet wird bei der HTML-Ausgabe unter anderem ein JavaScript-Bereich notiert. Der Inhalt eines solchen Bereichs sollte, um den Inhalt für nicht-javascript-fähige Browser unzugänglich machen, auskommentiert werden. Im Beispiel wird dies mit Hilfe der xsl:comment-Anweisung realisiert.

XSLT 1.0 xsl:copy (Element in Ergebnisbaum kopieren)

Kopiert einen aktuellen Knoten in den Ergebnisbaum an die Stelle, an der die Anweisung notiert ist. Das ist beispielsweise sinnvoll, wenn die XML-Daten Elemente enthalten, für die es in der Ergebnissprache ein gleichnamiges Element gibt. Es werden die Element-Tags und der PCDATA-Inhalt kopiert, jedoch weder Attribute noch Kindelemente (siehe dazu auch nach unten xsl:copy-of).

Hat folgende Attribute:

use-attribute-sets (optional) Attribute in die Kopie mit einfügen, die mit nach oben xsl:attribute-set definiert sind.

Kann innerhalb von nach unten xsl:template vorkommen. Kann als Inhalt alles enthalten, was auch innerhalb von xsl:template erlaubt ist.

Beispieldatei copy.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei copy.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei copy.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="copy.xsl" ?>
<test>
<p>Wenn wir uns für besser halten, sind wir es schon dadurch nicht</p>
<p>Man kann nur Brücken schlagen zwischen Ufern, die man auseinanderhält</p>
</test>

Beispieldatei copy.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <h1>Aphorismen</h1>
 <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="p">
<xsl:copy><xsl:value-of select="." /></xsl:copy>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Daten des Beispiels bestehen aus Aphorismen, die jeweils in ein XML-Element namens p eingeschlossen sind. Im Beispiel-Stylesheet wird bei der Template-Definition für Elemente des Typs p mit der Anweisung <xsl:copy><xsl:value-of select="." /></xsl:copy> festgelegt, dass sie einfach in den HTML-Ergebnisbaum kopiert werden. Dies ist sinnvoll, da das p-Element in HTML Bedeutung hat und vom Browser entsprechend formatiert wird. Auf diese Weise wird in diesem Fall der gleiche Effekt erreicht, der mit der folgenden Template-Definition erreicht werden würde:
<xsl:template match="p">
<p><xsl:value-of select="." /></p>
</xsl:template>

XSLT 1.0 xsl:copy-of (Beliebige ermittelte Daten in Ergebnisbaum kopieren)

Kopiert einen aktuellen Knoten und das gesamte davon abhängige Knoten-Set in den Ergebnisbaum an die Stelle, an der die Anweisung notiert ist. Das ist beispielsweise sinnvoll, um den Inhalt eines Elements, das nur einmal in den Daten notiert ist, an mehreren Stellen zu wiederholen.

Hat folgende Attribute:

select (obligatorisch) auswählen, was kopiert werden soll. Dies kann ein Knoten-Set bzw. ein Pfad nach Seite XPath-Syntax sein oder eine Variable.

Kann innerhalb von nach unten xsl:template vorkommen. Kann als Inhalt alles enthalten, was auch innerhalb von xsl:template erlaubt ist.

Beispieldatei copy_of.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei copy_of.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei copy_of.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="copy_of.xsl" ?>
<test>
<titel>Telefon</titel>
<telefon><name>Hans</name><nummer>069 - 11727349874</nummer></telefon>
<telefon><name>Sabine</name><nummer>040 - 116343432094</nummer></telefon>
</test>

Beispieldatei copy_of.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <table border="1"><xsl:apply-templates /></table>
 </body>
 </html>
</xsl:template>

<xsl:template match="titel">
<tr><th colspan="3"><xsl:value-of select="." /></th></tr>
</xsl:template>

<xsl:template match="telefon">
<tr>
<td><xsl:copy-of select="../titel" /></td>
<xsl:apply-templates />
</tr>
</xsl:template>

<xsl:template match="name">
<td><xsl:value-of select="." /></td>
</xsl:template>

<xsl:template match="nummer">
<td><xsl:value-of select="." /></td>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Das Beispiel definiert eine Telefonliste, bestehend aus Namen und Telefonnummern, mit einer Überschrift, die im Element titel notiert wird. Beim Erzeugen des Ergebnisbaums im Beispiel-Stylesheet wird aus der Telefonliste jedoch eine dreispaltige HTML-Tabelle erzeugt. In der ersten Spalte steht jeweils das Wort Telefon. Dafür sorgt jene Anweisung, die mit <td><xsl:copy-of select="../titel" /></td> den Titel, der eigentlich nur einmal vorkommt, bei jedem Vorkommen des telefon-Elements wiederholt. Die Adressierung des Elements titel erfolgt dabei aus Sicht des Elements telefon nach Seite XPath-Adressierung mit relativen Pfadangaben.

XSLT 1.0 xsl:decimal-format (Dezimalformat)

Definiert ein Schema, in dem Zahlen im Ergebnisbaum ausgegeben werden. In der Funktion Seite format-number() kann dieses Schema angewendet werden.

Hat folgende Attribute:

decimal-separator | (optional) Zeichen, das zwischen Ganzzahl und "Nachkommastellen" steht, um beide Teile zu trennen. Im Deutschen normalerweise ein Komma, im Englischen ein Punkt. Voreinstellung ist der Punkt (.).
digit | (optional) Zeichen, das als Platzhalter für eine unbekannte Ziffer eingesetzt wird. Normalerweise das Gatterzeichen # (Voreinstellung).
grouping-separator | (optional) Zeichen, das eine Gruppe von Zeichen trennt, z.B. als "Tausenderzeichen". Im Deutschen normalerweise ein Punkt, im Englischen ein Komma. Voreinstellung ist das Komma (,).
infinity | (optional) Zeichen oder Zeichenkette, die den Wert für "unendlich" repräsentiert, z.B. bei periodischen Nachkommawerten. Voreinstellung ist Infinity.
minus-sign | (optional) Zeichen, das einem negativen Wert vorangestellt wird. Normalerweise das Minuszeichen - (Voreinstellung).
name | (optional) Name des definierten Schemas. Unter diesem Namen kann das Schema in der Funktion format-number verwendet werden. Wird kein Name angegeben, gelten die Definitionen global.
NaN | (optional) Zeichenkette, die ausdrückt, dass ein Wert keine gültige Zahl ist. Voreinstellung ist NaN (not a number).
pattern-separator | (optional) Zeichen, dass zwischen positiver und negativer Formatdarstellung steht. Voreinstellung ist das Semikolon (;).
per-mille | (optional) Zeichen, mit dem Promillewerte gekennzeichnet werden. Voreinstellung ist %O.
percent | (optional) Zeichen, mit dem Prozentwerte gekennzeichnet werden. Voreinstellung ist das Prozentzeichen %.
zero-digit | (optional) Zeichen für die Darstellung führender Nullen. Voreinstellung ist die Null 0.

Kann innerhalb von nach unten xsl:stylesheet vorkommen und muss außerhalb von nach unten xsl:template notiert sein.

Beispieldatei decimal_format.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei decimal_format.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei decimal_format.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="decimal_format.xsl" ?>
<test>
<wert>1230348345</wert>
<wert>17235807</wert>
<wert>12345</wert>
</test>

Beispieldatei decimal_format.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:decimal-format name="de" decimal-separator="," grouping-separator="."/>

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="wert">
<div><xsl:value-of select="format-number(.,'#.##0,0','de')" /></div>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

In den XML-Daten werden einfach diverse Werte notiert, und zwar jeweils in einem Element namens wert. Im Beispiel-Stylesheet wird mit xsl:decimal-format ein Schema für die Formatierung von Zahlen im Ergebnisbaum definiert. Das Schema erhält den Namen de und bestimmt das Komma als Trennzeichen für Ganzzahl und Nachkommastellen sowie den Punkt als Trennzeichen für Tausendergruppen. Für die Ausgabe eines Elements vom Typ wert wird mit <xsl:template match="wert"> ein Template definiert. Jeder Wert wird in einem HTML-Element div ausgegeben. Mit der Anweisung <xsl:value-of select="format-number(.,'#.##0,0','de')" /> wird auf den jeweils aktuellen Inhalt von wert Bezug genommen, und zwar durch Aufruf der Funktion format-number. Diese bekommt in den Klammern als ersten Parameter . übergeben, was für das aktuelle Element steht. Der zweite Parameter ist ein Formatstring, und der dritte Parameter der Name des Schemas, das zuvor mit xsl:decimal-format definiert wurde.

XSLT 1.0 xsl:element (Element erzeugen)

Erzeugt ein Element im Ergebnisbaum. Zwar ist es üblich, Elemente des Ergebnisbaums direkt zu notieren. Doch etwa bei der Anwendung verschiedener nach oben Attribut-Sets kann es sinnvoll sein, die Elemente des Ergebnisbaums nicht direkt zu notieren, sondern mit Hilfe von xsl:element zu generieren. Ein anderer Anwendungsfall ist, wenn mit Hilfe von XSL ein Ergebnisbaum erzeugt werden soll, dessen Zielsprache selbst XSL ist.

Hat folgende Attribute:

name | (obligatorisch) Name des zu generierenden Elements, z.B. table für das gleichnamige HTML-Element
namespace | (optional) Namensraum, dem das Element angehört.
use-attribute-sets | (optional) definierte Attribut-Sets, die im einleitenden Tag des zu erzeugenden Elements eingesetzt werden sollen.

Kann innerhalb von nach unten xsl:template vorkommen.

Beispieldatei element.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei element.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei element.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="element.xsl" ?>
<test>
<produkt><name>Schaukelstuhl</name><preis>99,-</preis></produkt>
<produkt><name>Kaffeemaschine</name><preis>49,95</preis></produkt>
<produkt><name>Schraubenzieher</name><preis>4,95</preis></produkt>
<produkt><name>Sofakissen</name><preis>29,95</preis></produkt>
</test>

Beispieldatei element.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:attribute-set name="grau">
  <xsl:attribute name="bgcolor">#E0E0E0</xsl:attribute>
</xsl:attribute-set>
<xsl:attribute-set name="gelb">
  <xsl:attribute name="bgcolor">#FFFFD0</xsl:attribute>
</xsl:attribute-set>

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <table>
  <xsl:apply-templates />
 </table>
 </body>
 </html>
</xsl:template>

<xsl:template match="produkt">
 <xsl:choose>
  <xsl:when test="position() mod 2 = 0">
    <xsl:element name="tr" use-attribute-sets="grau">
     <xsl:apply-templates />
    </xsl:element>
  </xsl:when>
  <xsl:otherwise>
    <xsl:element name="tr" use-attribute-sets="gelb">
     <xsl:apply-templates />
    </xsl:element>
  </xsl:otherwise>
 </xsl:choose>
</xsl:template>

<xsl:template match="name">
 <td><xsl:value-of select="." /></td>
</xsl:template>

<xsl:template match="preis">
 <td><xsl:value-of select="." /></td>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

In den XML-Daten des Beispiels gibt es eine Liste mit Produkten, zu denen jeweils der Name des Produkts und der Preis notiert ist. In der HTML-Ausgabe soll daraus eine Tabelle erzeugt werden, bei der jede zweite Tabellenzeile grau und die übrigen Reihen gelb hinterlegt sind. Dazu werden im Beispiel-Stylesheet mit xsl:attribute-set zwei entsprechende Attribut-Schemata definiert. Da für jedes Produkt eine Tabellenzeile erzeugt werden soll, ist in dem Template, das die HTML-Ausgabe für das Element produkt steuert, eine Abfrage enthalten, ob es sich bei dem jeweils aktuellen Element produkt aus der Datenliste um eine gerade Positionsnummer handelt. Wenn ja, wird die aktuelle Tabellenzeile grau hinterlegt, andernfalls gelb. Die Abfrage wird über die Anweisungen nach oben xsl:choose, nach unten xsl:when und nach unten xsl:otherwise gesteuert. Die Positionsnummer des jeweils aktuellen Elements liefert die Funktion Seite position(). Der Ausdruck mod 2 = 0 fragt, ob die Modulo-Division des Positionswerts 0 ergibt, also keinen Bruchrest erzeugt und somit eine gerade Zahl ist.
Abhängig von der Abfrage wird im when-Zweig und im otherwise-Zweig mit xsl:element ein HTML-Element tr Tabellenreihen erzeugt und mit den unterschiedlichen Attribut-Schemata für grau und gelb ausgestattet. Zwischen dem einleitenden Tag und seinem Gegenstück </xsl:element> werden untergeordnete Templates für Namen und Preis des Produkts aufgerufen.

XSLT 1.0 xsl:fallback (alternative Ausführungsanweisung)

Stellt für den XSLT-Prozessor eine Alternativanweisung bereit für den Fall, dass dieser eine nicht so gebräuchliche oder neuere XSLT-Anweisung nicht kennt.

Hat keine Attribute.

Kann innerhalb von nach unten xsl:template vorkommen.

Beispieldatei fallback.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="fallback.xsl" ?>
<test>
<text>Es ist egal, ob du A oder B sagst, solange du C nicht kennst.</text>
<text>Worüber man nicht reden kann, darüber soll man schweigen.</text>
</test>

Beispieldatei fallback.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 <xsl:processing-instruction name="xml-stylesheet">
  <xsl:fallback>
   <link rel="stylesheet" href="fallbacktest.css" type="text/css" />
  </xsl:fallback>
  <xsl:text>href="fallbacktest.css" type="text/css" ?</xsl:text>
 </xsl:processing-instruction>
 </head>
 <body>
  <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="text">
 <p><xsl:value-of select="." /></p>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Im Beispiel-Stylesheet wird mit der Anweisung nach unten xsl:processing-instruction ein Stylesheet (CSS) in den HTML-Ergebnisbaum eingebunden. Für den Fall, dass der XSLT-Prozessor diese Anweisung nicht kennt, wird mit xsl:fallback eine Alternative notiert, nämlich die direkte Notation des Befehls zum Einbinden des Stylesheets.

XSLT 1.0 xsl:for-each (für jedes Element aus einer Menge wiederholen)

Stellt eine Schleifenanweisung innerhalb einer Template-Definition dar. Das, was innerhalb der Schleife steht, wird auf alle Knoten innerhalb eines anzugebenden Knoten-Sets angewendet. Alle aufeinanderfolgenden Knoten werden dann der Reihe nach abgearbeitet. So lassen sich beispielsweise alle Elemente listenpunkt, die von einem Element namens liste abhängig sind, direkt innerhalb der Template-Definition für das Element liste abhandeln, ohne dass noch mal eine untergeordnete Template-Definition für das Element listenpunkt aufgerufen werden muss.

Hat folgende Attribute:

select (obligatorisch) Knoten-Set bzw. Pfad nach Seite XPath-Syntax, für das die Schleife gelten soll.

Kann innerhalb von nach unten xsl:template vorkommen.

Beispieldatei for_each.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei for_each.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei for_each.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="for_each.xsl" ?>
<test>
<klasse name="7a">
<schueler>Hans Bentop</schueler>
<schueler>Anika Doll</schueler>
<schueler>Phillip Kleiber</schueler>
</klasse>
</test>

Beispieldatei for_each.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
  <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="klasse">
  <h3>Klasse <xsl:value-of select="@name" /></h3>
  <p>
  <xsl:for-each select="schueler">
    <xsl:value-of select="." /><br />
  </xsl:for-each>
  </p>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

In den XML-Daten des Beispiels werden Schulklassen und ihre Schülernamen notiert. Im Beispiel-Stylesheet wird in dem Template für das Element klasse, das aus beliebig vielen Elementen schueler bestehen kann, mit xsl:for-each eine Schleife erzeugt. Darin wird im Ergebnisbaum der Reihe nach der Inhalt (xsl:value-of) jedes Elements schueler sowie ein Zeilenumbruch erzeugt.

XSLT 1.0 xsl:if (Wenn-Bedingung)

Macht die Ausführung einer Anweisung von einer Bedingung abhängig.

Hat folgende Attribute:

test (obligatorisch) formuliert die Bedingung.

Kann innerhalb von nach unten xsl:template vorkommen.

Beispieldatei if.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei if.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei if.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="if.xsl" ?>
<test>
<ergebnis><name>Crystol Freak</name><punkte>453</punkte></ergebnis>
<ergebnis><name>Demian</name><punkte>199</punkte></ergebnis>
<ergebnis><name>Ueberflieger</name><punkte>347</punkte></ergebnis>
<ergebnis><name>CaptainX</name><punkte>106</punkte></ergebnis>
</test>

Beispieldatei if.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <table border="1">
  <xsl:apply-templates />
 </table>
 </body>
 </html>
</xsl:template>

<xsl:template match="ergebnis">
  <xsl:if test="punkte &gt;= 200">
    <tr>
    <xsl:apply-templates />
    </tr>
  </xsl:if>
</xsl:template>

<xsl:template match="name">
 <td><xsl:value-of select="." /></td>
</xsl:template>

<xsl:template match="punkte">
 <td><xsl:value-of select="." /></td>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Daten im Beispiel enthalten Spielergebnisse, und zwar mit Spielernamen und erreichten Punkten. Im Beispiel-Stylesheet wird daraus eine HTML-Tabelle erzeugt. Es sollen jedoch nur Spieler in der Tabelle erscheinen, die 200 Punkte oder mehr erreicht haben. Dazu wird in dem Template, das die HTML-Ausgabe des XML-Elements ergebnis steuert, mit der Anweisung <xsl:if test="punkte &gt;= 200"> abgefragt, ob der Inhalt des untergeordneten Elements punkte größer oder gleich 200 ist. Wenn ja, wird eine Tabellenzeile erzeugt, und innerhalb davon werden die Templates für die untergeordneten Elemente, also für name und punkte, aufgerufen. Normalerweise würde der Operator für "größer gleich" einfach >= lauten. Weil er aber innerhalb einer XML-basierten Anweisung vorkommt, muss das Größer-als-Zeichen Seite umschrieben werden.
Welche Möglichkeiten es für die Formulierung von Bedingungen bei xsl:if gibt, wird im Abschnitt Seite XPath-Operatoren beschrieben.

XSLT 1.0 xsl:include (Stylesheets inkludieren)

XSLT bietet zwei Möglichkeiten um Stylesheets miteinander zu kombinieren. Die erste ist ein Inklusionsmechanismus, der es erlaubt Stylesheets zu kombinieren, wobei die Semantik der kombinierten Stylesheets nicht verändert wird. Die andere Möglichkeit ist ein Importmechanismus, der es Stylesheets erlaubt einander zu überschreiben.

Ein Stylesheet kann andere Stylesheets durch die Benutzung des xsl:include-Elements inkludieren. Das xsl:include-Element ist nur als Element der obersten Ebene erlaubt. Das bedeutet, es kann nur innerhalb von nach unten xsl:stylesheet vorkommen und muss außerhalb von nach unten xsl:template notiert sein.

Hat folgende Attribute:

href (obligatorisch) gibt den URI der zu inkludierenden Datei an.

Beispieldatei include.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei include.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei include.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="include1.xsl" ?>
<test>
<bild>pinguin.gif</bild>
<text>Der Pinguin ist das Wahrzeichen von Linux</text>
</test>

Beispieldatei include1.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:include href="include2.xsl" />

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <xsl:apply-templates/>
 </body>
 </html>
</xsl:template>

<xsl:template match="bild">
 <img><xsl:attribute name="src"><xsl:value-of select="." /></xsl:attribute></img>
</xsl:template>

</xsl:stylesheet>

Beispieldatei include2.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="text">
<p><xsl:value-of select="." /></p>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die durch den Wert des href-Attributs angegebene XSL-Datei wird als XML-Dokument analysiert und die Kinder des xsl:stylesheet-Elements in diesem Dokument ersetzen das xsl:include-Element im inkludierenden Dokument. Dass Template-Regel und andere Definitionen inkludiert sind, beeinflusst nicht die Art, wie sie verarbeitet werden.

Beachten Sie:

Ein Stylesheet darf weder direkt noch indirekt sich selbst inkludieren. So würde ein <xsl:import href="include1.xsl" /> in der include2.xsl einen Fehler verursachen, denn auf diese Weise würde sich die Datei include1.xsl selbst inkludieren.

XSLT 1.0 xsl:import (Stylesheets importieren)

Importiert Template-Definitionen aus anderen Stylesheet-Dateien, die dann mit xsl:apply-imports an einer gewünschten Stelle angewendet werden können.

Hat folgende Attribute:

href (obligatorisch) gibt den URI der zu importierenden Datei an.

Kann innerhalb von nach unten xsl:stylesheet vorkommen und muss außerhalb von nach unten xsl:template notiert sein.

Beispiel siehe nach oben xsl:apply-imports.

Beachten Sie:

Im Konfliktfall haben Stylesheet-Definitionen, die in der aktuellen Stylesheet-Datei definiert werden, Vorrang vor importierten Definitionen.

XSLT 1.0 xsl:key (Schlüssel für Auswahl von Elementen)

Definiert einen Zugriffsschlüssel auf Elemente oder Attribute. Dadurch wird dem XSLT-Prozessor die Arbeit erleichtert, was die Verarbeitungsgeschwindigkeit erhöhen kann. Über die Funktion Seite key() kann der Zugriffsschlüssel angewendet werden.

Hat folgende Attribute:

name | (obligatorisch) legt einen Namen für den Schlüssel fest, unter dem er angewendet werden kann.
use | (obligatorisch) gibt an, auf was der Schlüssel zugreifen soll.
match | (optional) gibt das Knoten-Set bzw. einen Pfad nach Seite XPath-Syntax an, an dem der Schlüssel im Elementenbaum ansetzen soll.

Kann innerhalb von nach unten xsl:stylesheet vorkommen und muss außerhalb von nach unten xsl:template notiert sein.

Beispieldatei key.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei key.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei key.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="key.xsl" ?>
<test>
<konfig typ="user" name="docroot" wert="/usr/local/web" />
<konfig typ="user" name="cgibin" wert="/usr/local/bin/cgi" />
<konfig typ="expert" name="timeout" wert="60" />
</test>

Beispieldatei key.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:key name="user-only" match="konfig" use="@typ"/>

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <table border="1">
  <xsl:for-each select="key('user-only','user')">
   <tr>
    <td><xsl:value-of select="@name" /></td>
    <td><xsl:value-of select="@wert" /></td>
   </tr>
  </xsl:for-each>
 </table>
 </body>
 </html>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Daten stellen den Inhalt einer Konfigurationsdatei dar. Jeder Konfigurationseintrag, repräsentiert im Element konfig, enthält die Daten in Form von Attributen. Neben den für Konfigurationseinträge typischen Daten name und wert gibt es auch ein Attribut typ, in dem die Werte user und expert zulässig sind. Diese Information könnte beispielsweise helfen, wenn bei der Anzeige der Konfigurationsdaten einem Bearbeiter, der als user angemeldet ist, die Daten des Experten-Modus vorenthalten werden sollen. Das Beispiel-Stylesheet realisiert eine solche Beschränkung. Mit <xsl:key name="user-only" match="konfig" use="@typ"/> wird ein Schlüssel definiert, der auf das Attribut typ zugreift. Zur Anwendung kommt dieser Schlüssel in der Anweisung <xsl:for-each select="key('user-only','user')">. Der Funktion key() wird der Name des zuvor definierten Schlüssels und der gewünschte Attributwert übergeben. Nur Einträge, die diesen Attributwert haben, werden ausgegeben.

XSLT 1.0 xsl:message (Meldung beim Transformieren ausgeben)

Gibt während der Transformation der Daten eine Meldung aus. Wird üblicherweise zur Fehlerbehandlung innerhalb einer Bedingung benutzt.

Hat folgende Attribute:

terminate (optional) gibt mit yes oder no (Voreinstellung) an, ob der Transformationsvorgang abgebrochen werden soll.

Kann innerhalb von nach unten xsl:template vorkommen.

Beispieldatei message.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei message.xml - XML/XSLT-fähiger Browser meldet Message-Fehler)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="message.xsl" ?>
<test>
<lottozahl>32</lottozahl>
<lottozahl>8</lottozahl>
<lottozahl>13</lottozahl>
<lottozahl>40</lottozahl>
<lottozahl>3</lottozahl>
<lottozahl>59</lottozahl>
</test>

Beispieldatei message.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
  <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="lottozahl">
  <xsl:variable name="aktuellerwert" select="."/>
  <xsl:if test="$aktuellerwert &gt; 49">
   <xsl:message terminate="yes">
    <xsl:text>Die Zahl (</xsl:text>
    <xsl:value-of select="." />
    <xsl:text>) ist zu gross!</xsl:text><br />
   </xsl:message>
  </xsl:if>
  <xsl:value-of select="." /><br />
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Im Beispiel sind Lottozahlen notiert. Das Beispiel-Stylesheet formuliert innerhalb der Template-Definition für das Element lottozahl zunächst mit nach unten xsl:variable eine Variable und weist dieser den Inhalt des aktuellen Elements zu. Als nächstes wird mit nach oben xsl:if geprüft, ob der Inhalt der Variablen größer als 49 ist. Für diesen Fall (Fehlerfall) wird mit xsl:message eine Fehlermeldung konstruiert, die statt der Zahl die Meldung schreibt, dass die betreffende Zahl zu groß ist.

XSLT 1.0 xsl:namespace-alias (Stylesheet in anderes Stylesheet transformieren)

Erlaubt es, ein XSL-Stylesheet in ein anderes XSL-Stylesheet zu transformieren.

Hat folgende Attribute:

stylesheet-prefix | (obligatorisch) gibt den Namen des Namensraums an, der im aktuellen Stylesheet verwendet wird. Dieser Name muss im nach unten xsl:stylesheet-Element mit dem Attribut xmlns:[Name] vergeben werden.
result-prefix | (optional) gibt den Namen des Namensraums an, der im Ergebnis-Stylesheet anstelle des Namens verwendet werden soll, der bei stylesheet-prefix angegeben ist.

Kann innerhalb von nach unten xsl:stylesheet vorkommen und muss außerhalb von nach unten xsl:template notiert sein.

Beispieldatei namespace_alias.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei namespace_out.htm - über den Umweg von von output.xsl erzeugt)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei namespace_alias.xml)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="namespace_alias.xsl" ?>
<test>
<gruss>Hallo Welt</gruss>
</test>

Beispieldatei namespace_alias.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:out="namespace_out.xsl">

<xsl:namespace-alias stylesheet-prefix="out" result-prefix="xsl"/>

<xsl:template match="/">
 <out:stylesheet version="1.0">
  <out:template match="/">
   <html><head></head><body>
   <h1><xsl:value-of select="gruss" /></h1>
   <h1><out:text>Hallo Welt - vom Output-Stylesheet</out:text></h1>
   </body></html>
  </out:template>
 </out:stylesheet>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Im XML-Teil des Beispiels ist einfach ein Hallo-Welt-Gruß notiert. Im zugehörigen Beispiel-Stylesheet steckt die erste Besonderheit bereits im einleitenden xsl:stylesheet-Element. Dort wird zwei mal das Attribut xmlns notiert: einmal zur Deklaration des üblichen Namensraums (xmlns:xsl="http://www.w3.org/1999/XSL/Transform"), und einmal zur Deklaration eines eigenen Namensraums (xmlns:out="output.xsl"). Durch die Anweisung <xsl:namespace-alias stylesheet-prefix="out" result-prefix="xsl"/> wird dann für den eigenen Namensraum, der den Namen out erhalten hat, festgelegt, dass das aktuelle Stylesheet in das andere Stylesheet (output.xsl) transformiert wird. Das gilt allerdings nur für Notationen, die den Namensraum out angeben. Innerhalb der Template-Definition des Beispiels werden solche Notationen definiert. Die erste beginnt mit <out:stylesheet version="1.0">. Die innere Definition <xsl:value-of select="gruss" /> wird nicht in das Output-Stylesheet übernommen, stattdessen aber <out:text>Hallo Welt - vom Output-Stylesheet</out:text>. Der HTML-Code, der am Ende erzeugt wird, resultiert aus dem, was im Output-Stylesheet definiert ist.

XSLT 1.0 xsl:number (fortlaufende Nummerierung)

Ermöglicht es, sich wiederholende Elemente im Ergebnisbaum mit fortlaufender Nummerierung zu versehen.

Hat folgende Attribute:

count | (optional) bestimmt das oder die Knoten-Sets bzw. Pfade nach Seite XPath-Syntax, bei deren Auftreten der Zähler der Nummerierung erhöht werden soll.
format (optional) bestimmt die Art der Nummerierung. Folgende Angaben sind möglich:
1 = Nummerierung der Art 1, 2, 3, 4 ...
01 = Nummerierung der Art 01, 02, 03, 04, ... 10, 11 ...
a = Nummerierung der Art a, b, c, d ...
A = Nummerierung der Art A, B, C, D ...
i = Nummerierung der Art i, ii, iii, iv ...
I = Nummerierung der Art I, III, III, IV ...
Voreinstellung ist 1. Hinter dieser Angabe zur Art der Nummerierung können noch weitere Zeichen folgen, mit denen die Nummerierung formatiert wird. So bewirkt etwa die Angabe 1., dass hinter der jeweils aktuellen Ordnungszahl noch ein Punkt steht.
from | (optional) bestimmt das Knoten-Set bzw. einen Pfad nach Seite XPath-Syntax, bei dessen Auftreten die Nummerierung beendet werden soll.
grouping-separator | (optional) Trennzeichen für Zifferngruppen bei hohen Zahlen, z.B. Tausender-Trennzeichen. In der deutschen Schreibweise von Zahlen üblicherweise ein Punkt (.).
grouping-size | (optional) Anzahl der Ziffern, bei der ein Trennzeichen gesetzt wird. Bei Tausender-Trennzeichen wäre das der Wert 3.
lang | (optional) gibt die Sprache (nach Seite RFC 1766) an, nach dessen Sprachkonventionen die Nummerierung erfolgen soll. Anzugeben sind Kürzel der Art de (für deutsch), en (für englisch), fr (für französisch).
letter-value | (optional) erlaubte Werte sind alphabetical oder traditional. Eine Angabe, die zusätzlich zu lang für einige Sprachen sinnvoll ist.
level (optional) erlaubte Werte sind single, multiple oder any. Die Angabe bezieht sich darauf, was bei count angegeben wird.
single bedeutet: der Nummerierungs-Algorithmus arbeitet flach auf der aktuellen Ebene des Elementenbaums und kann Nummerierungen der Sorte 1, 2, 3 erzeugen. Passt der aktuelle Knoten auf die Angabe bei count, wird er nummeriert.
multiple bedeutet: der Nummerierungs-Algorithmus arbeitet hierarchisch über die aktuelle und alle übergeordneten Ebenen des Elementenbaums und kann Nummerierungen der Sorte 1.1 oder 1.1.1 erzeugen. Passt der aktuelle Knoten auf die Angabe bei count, wird er nummeriert. Dabei wird für jede übergeordnete Ebene im Elementenbaum ermittelt, ob die Angabe bei count auf einen Knoten zutrifft. Aus diesen Informationen wird die hierarchische Nummerierung erzeugt. Bei multiple sollte bei count die Sequenz derjenigen Knoten angegeben werden, für die die hierarchische Nummerierung gelten soll. Dies ist durch eine Angabe wie z.B. count="kapitelueberschrift|abschnittsueberschrift|unterueberschrift" möglich. Die Elementnamen werden dabei durch Senkrechtstriche (|) voneinander getrennt. Beim Attribut format sollte in diesem Fall so etwas wie z.B. format="1.1" notiert werden.
any bedeutet: der Nummerierungs-Algorithmus arbeitet flach über die aktuelle und alle Ebenen des Elementenbaums und kann Nummerierungen der Sorte 1, 2, 3 erzeugen. Passt der aktuelle Knoten auf die Angabe bei count, wird er nummeriert. Dabei wird für jede übergeordnete Ebene im Elementenbaum ermittelt, ob die Angabe bei count auf einen Knoten zutrifft. Die Nummerierung zählt alle Knoten zusammen.
value | (optional) Kalkulationsausdruck, der die Nummerierung bestimmt. Eine mögliche Angabe ist z.B. value="position()".

Kann innerhalb von nach unten xsl:template vorkommen.

Beispieldatei number.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei number.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei number.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="number.xsl" ?>
<test>
<link>http://aktuell.de.selfhtml.org/</link>
<link>http://alpentouren.at/</link>
<link>http://fr.selfhtml.org/</link>
</test>

Beispieldatei number.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
  <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="link">
 <xsl:number level="single" count="link" format="1. " />
 <a><xsl:attribute name="href"><xsl:value-of select="." /></xsl:attribute>
 <xsl:value-of select="." /></a><br />
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Daten im Beispiel enthalten eine Reihe von Links, die bei der HTML-Ausgabe durchnummeriert werden sollen. Das Beispiel-Stylesheet wendet zu diesem Zweck innerhalb der Template-Definition für das link-Element zu Beginn des zu erzeugenden HTML-Codes die xsl:number-Anweisung an. Es soll eine einfache Nummerierung durchgeführt werden (level="single"). Die Nummerierung soll bei jedem Auftreten des link-Elements fortgesetzt werden (count="link"). Die Nummerierung soll in der Form 1. ..., 2. ..., 3. ... erscheinen (format="1. ").
Anschließend wird innerhalb der Template-Definition ein HTML-Link erzeugt, der den Inhalt des jeweiligen link-Elements in eine im Browser anklickbare Form bringt.

XSLT 1.0 xsl:otherwise (Andernfalls-Anweisung)

Bestimmt, was getan werden soll, wenn eine oder mehrere xsl:when-Bedingungen nicht zutreffen.

Hat keine Attribute.

Kann innerhalb von nach oben xsl:choose vorkommen. Beispiel siehe dort.

XSLT 1.0 xsl:output (Erzeugen des Ergebnisbaums kontrollieren)

Gibt an, wie der Ergebnisbaum ausgegeben bzw. geschrieben werden soll.

Hat folgende Attribute:

cdata-section-elements | (optional) bei method="xml": bestimmt Elemente, deren Inhalt beim Erzeugen des Ergebnisbaums in CDATA-Abschnitte geschrieben werden (vergleiche Seite CDATA-Abschnitte). Es können mehrere Elemente angegeben werden, die durch Leerzeichen zu trennen sind.
doctype-public | (optional) bei method="xml" und method="html": wenn sich die Gültigkeitsüberprüfung des Ergebnisbaums auf eine öffentliche DTD-Zuordnung (public identifier) bezieht, erhält dieses Attribut als Wert die Zeichenkette des public identifiers.
doctype-system | (optional) bei method="xml" und method="html": wenn sich die Gültigkeitsüberprüfung des Ergebnisbaums auf eine adressierte DTD-Zuordnung (system identifier) bezieht, erhält dieses Attribut als Wert die Zeichenkette des system identifiers.
encoding | (optional) bestimmt, mit welcher Kodierung der Ergebnisbaum kodiert wird. Sinnvoll ist eine Angabe nach englischsprachige Seite RFC 2978.
indent | (optional) kann die Werte yes oder no haben. Bei yes wird der Ergebnisbaum so formatiert, dass untergeordnete Elemente weiter eingerückt werden. Dies hat keine Auswirkung auf die Darstellung, sondern ist eine "kosmetische" Angabe zur besseren Lesbarkeit des erzeugten Quelltextes. Die Voreinstellung für dieses Attributs ist bei method="html" yes, bei method="xml" no.
media-type | (optional) gibt den Seite MIME-Typ des Ergebnisbaums an. Bei method="xml" ist beispielsweise text/xml sinnvoll, bei method="html" beispielsweise text/html und bei method="text" beispielsweise text/plain.
method | (optional) gibt an, nach welcher Art der Ergebnisbaum erzeugt werden soll. Mögliche Werte sind xml, html (Voreinstellung), text, oder bestimmte, eigene oder öffentliche XML-Namensräume.
omit-xml-declaration | (optional) bestimmt bei method="xml", ob im Ergebnisbaum eine Seite XML-Deklaration (<?xml ...?>) ausgegeben werden soll oder nicht. Mögliche Werte sind yes für nein (omit = weglassen) oder no für ja (nicht weglassen).
standalone | (optional) bestimmt bei omit-xml-declaration="no", dass sich die DTD-Deklarationen in der aktuellen Datei befinden (vergleiche Seite Zusätzliche Angaben zur Zeichenkodierung und zum DTD-Bezug)
version | (optional) bestimmt bei omit-xml-declaration="no" die XML-Versionsangabe.

Kann innerhalb von nach unten xsl:stylesheet vorkommen und muss außerhalb von nach unten xsl:template notiert sein.

Beispieldatei output.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei output_en.xml - XML-fähiger Browser erforderlich, der die Datenstruktur anzeigt)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="output.xsl" ?>
<test>
<ereignis>
  <beschreibung>HH XY 1204 mit Tempo 95 in Zone 70</beschreibung>
  <zeitstempel>13.05.2001,22:25</zeitstempel>
</ereignis>
</test>

Beispieldatei output.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml" indent="yes" encoding="ISO-8859-1" omit-xml-declaration="yes" />

<xsl:template match="/">
 <test-en>
  <xsl:apply-templates />
 </test-en>
</xsl:template>

<xsl:template match="ereignis">
 <event>
  <xsl:apply-templates />
 </event>
</xsl:template>

<xsl:template match="beschreibung">
 <description><xsl:value-of select="." /></description>
</xsl:template>

<xsl:template match="zeitstempel">
 <timestamp><xsl:value-of select="." /></timestamp>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Daten im Beispiel enthalten "Ereignisse", wie sie eine Blitzanlage im Straßenverkehr aufzeichnen könnte. Die Elementnamen sind dabei deutschsprachig. In einer XSL-gesteuerten Transformation sollen diese Daten in eine analoge XML-Datei mit gleichem Elementenbaum-Aufbau gebracht werden, deren Elementnamen jedoch englisch sind. In der xsl:output-Anweisung, die im Beispiel-Stylesheet vor den Template-Definitionen steht, wird dem XSL-Parser mitgeteilt, dass der Ergebnisbaum eine XML-Struktur sein soll (method="xml"). Mit indent="yes" wird die saubere Formatierung des XML-Quelltextes der Ausgabe geregelt, und mit encoding="ISO-8859-1" die Kodierung angegeben. Damit die XML-Ausgabe eine Dokumenttyp-Deklaration und eine Verarbeitungsanweisung erhält, wird mit omit-xml-declaration="yes" die Seite XML-Deklaration veranlasst. In den nachfolgenden Template-Definitionen wird der Datenbaum des Ausgangsdokuments mit den deutschsprachigen Elementnamen in den Ergebnisbaum mit den englischsprachigen Elementnamen übersetzt.

XSLT 1.0 xsl:param (Parameter definieren)

Definiert einen Parameter zur Verwendung mit nach unten xsl:with-param.

Hat folgende Attribute:

name | (obligatorisch) gibt den Namen der Parametervariablen an. Unter diesem Namen kann auf ihren Wert zugegriffen werden.
select | (optional) bestimmt einen Default-Wert für die Parametervariable. Wenn dieses Attribut angegeben wird, handelt es sich um einen Parameter, der dazu gedacht ist, von einer Template-Definition an eine andere übergeben zu werden.

Kann innerhalb von nach unten xsl:stylesheet vorkommen und kann sowohl außerhalb als auch innerhalb von nach unten xsl:template notiert sein. Wenn außerhalb notiert, ist es eine globale Variable, die in allen Template-Definitionen zur Verfügung steht. Wenn innerhalb einer Template-Definition notiert, ist es eine lokale Variable innerhalb des Templates.

Beispiel siehe nach unten xsl:with-param.

XSLT 1.0 xsl:preserve-space (Leerraumzeichen beibehalten)

Bestimmt, dass Leerraumzeichen, die zwischen Elementen in der Datei enthalten sind, bei der Ausgabe beibehalten werden. Leerraumzeichen sind die Zeichen mit den Hexadezimalwerten #x20 (einfaches Leerzeichen), #x9 (Tabulator-Zeichen), #xD (Wagenrücklaufzeichen) und #xA (Zeilenvorschub-Zeichen). Es handelt sich nicht um den Textinhalt von Elementen, sondern um die Formatierung der Elemente im Ergebnisbaum.

Hat folgende Attribute:

elements (obligatorisch) Namen von einem oder mehreren Elementen der Ausgangsdaten, deren Leerraumzeichen in der Ausgabe beibehalten werden soll. Mehrere Angaben sind durch Leerzeichen zu trennen.

Kann innerhalb von nach unten xsl:stylesheet vorkommen und muss außerhalb von nach unten xsl:template notiert sein.

Beispieldatei preserve_space.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei preserve_space.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei preserve_space.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="preserve_space.xsl" ?>
<test>

<kontakt>Hannes Breuer, breuer@example.org</kontakt>

<kontakt>Eleonore Bleibtreu, elblei@example.org</kontakt>

</test>

Beispieldatei preserve_space.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:preserve-space elements="test" />

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body><pre>
  <xsl:apply-templates />
 </pre></body>
 </html>
</xsl:template>

<xsl:template match="kontakt">
  <b><xsl:value-of select="." /></b>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

In den notierten XML-Daten ist zwischen den Elementen innerhalb des Dokument-Elements test Leerraum notiert. Im Beispiel-Stylesheet wird durch die Anweisung <xsl:preserve-space elements="test" /> sichergestellt, dass diese Leerräume bei der Ausgabe erhalten bleiben. In der Template-Definition für die Dokumentwurzel wird der Inhalt dann für die HTML-Ausgabe in das pre-Element eingeschlossen, damit die Leerräume in HTML auch zum Tragen kommen.

XSLT 1.0 xsl:processing-instruction (Stylesheet-Code generieren)

Erzeugt im Ergebnisbaum eine Seite Verarbeitungsanweisung.

Hat folgende Attribute:

name (obligatorisch) bestimmt den Namen der Verarbeitungsanweisung.

Kann innerhalb von nach unten xsl:template vorkommen.

Beispieldatei processing_instruction.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei processing.xml - XML/CSS-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="processing_instruction.xsl" ?>
<test>
<text>guten Tag!</text>
<text>und auf Wiedersehen!</text>
</test>

Beispieldatei processing_instruction.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml" Ergebnisbaumxml-declaration="no" />

<xsl:template match="/">
<xsl:processing-instruction name="xml-stylesheet">
 <xsl:text>href="processing.css" type="text/css"</xsl:text>
</xsl:processing-instruction>
 <test>
  <xsl:apply-templates />
 </test>
</xsl:template>

<xsl:template match="text">
 <xsl:copy-of select="." />
</xsl:template>

</xsl:stylesheet>

Beispieldatei processing.css:

text { font-size:21px; color:blue; }

Erläuterung:

Das XSLT-Stylesheet erzeugt eine neue XML-Datei, in die alle Daten der Input-Datei, im Beispiel also von processing_instruction.xml kopiert werden. Dazu dient einerseits die nach oben xsl:output-Anweisung, mit der die XML-Deklaration für die neue XML-Datei erzeugt wird, und andererseits das Kopieren der text-Elemente mit Hilfe von nach oben xsl:copy-of in den Ergebnisbaum, also die neue XML-Datei. Der Unterschied der neu erzeugten XML-Datei zur alten ist, dass sie eine Verarbeitungsanweisung zum Einbinden eines Stylesheets erhält. Dazu ist zu Beginn der Template-Definition für die Dokumentwurzel / ein xsl:processing-instruction-Element mit Namen xml-stylesheet notiert, das eine externe CSS-Datei einbindet. Das hat zur Folge, dass die XML-Daten direkt mit den Formaten aus der eingebundenen CSS-Datei ausgegeben werden. Im Ergebnisbaum wird die Prozessoranweisung wie folgt umgesetzt:
<?xml-stylesheet href="ausgabe.css" type="text/css" ?>
Die Attribute werden im Beispiel zwischen einleitendem und schließenden Tag von xsl:processing-instruction mit nach unten xsl:text notiert.

XSLT 1.0 xsl:sort (Elemente nach Inhalt sortieren)

Sortiert Knoten aus einer Reihenfolge nach ihren Inhalten. So lassen sich beispielsweise alle untergeordneten Elemente listenpunkt eines Elements namens liste bei der Transformation alphabetisch oder numerisch sortieren.

Hat folgende Attribute:

case-order | (optional) bestimmt, ob in der Sortierung Großbuchstaben vor Kleinbuchstaben kommen oder umgekehrt. Mögliche Werte sind upper-first (Großbuchstaben zuerst) oder lower-first (Kleinbuchstaben zuerst, Voreinstellung bei data-type="text").
data-type | (optional) bestimmt, ob die Sortierung alphabetisch (Voreinstellung) oder numerisch erfolgen soll. Bei alphabetischer Sortierung kommt z.B. 9 nach 10, bei numerischer 10 nach 9. Mögliche Werte sind text (alphabetische Sortierung) oder number (numerische Sortierung).
lang | (optional) gibt die Sprache (nach Seite RFC 1766) an, nach dessen Sprachkonventionen die Sortierung erfolgen soll. So wird beispielsweise der Buchstabe ä im Deutschen (lang="de") anders im Alphabet eingeordnet als im Schwedischen (lang="se").
order | (optional) bestimmt, ob die Sortierung aufsteigend (Voreinstellung), also etwa von A nach Z, oder absteigend, also etwa von Z nach A, erfolgen soll. Mögliche Werte sind ascending (aufsteigende Sortierung) oder descending (absteigende Sortierung).
select | (optional) gibt an, was sortiert werden soll. Wird das Attribut weggelassen, ist der Inhalt des betroffenen Elements dasjenige, was sortiert wird.

Kann innerhalb von nach oben xsl:apply-templates oder nach oben xsl:for-each vorkommen.

Beispieldatei sort.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei sort.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei sort.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="sort.xsl" ?>
<test>
<spieler><name>Fridolin</name><punkte>12</punkte></spieler>
<spieler><name>Paolo</name><punkte>19</punkte></spieler>
<spieler><name>Richie</name><punkte>27</punkte></spieler>
<spieler><name>Winnie</name><punkte>10</punkte></spieler>
</test>

Beispieldatei sort.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <table border="1">
  <xsl:for-each select="test/spieler">
   <xsl:sort select="punkte" order="descending" data-type="number" />
   <tr>
   <td><xsl:value-of select="name" /></td>
   <td><xsl:value-of select="punkte" /></td>
   </tr>
  </xsl:for-each>
 </table>
 </body>
 </html>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Daten im Beispiel enthalten Spielernamen und erreichte Punktzahlen. Bei der HTML-Ausgabe wird diese Liste nach Punktzahlen absteigend sortiert. Dazu wird im Beispiel-Stylesheet innerhalb der nach oben xsl:for-each-Anweisung eine xsl:sort-Anweisung notiert. Die Anweisung wirkt an dieser Stelle notiert wie ein Filter, der die Abarbeitung der einzelnen Elemente vom Typ spieler beeinflusst. Als Sortierkriterium wird punkte angegeben, da nach Punktzahlen sortiert werden soll. Die Sortierreihenfolge soll absteigend (descending) sein. Da die Punktzahlen numerisch interpretiert werden sollen, ist noch die Angabe data-type="number" notiert. Anschließend werden einfach die aktuellen Werte der Elemente name und punkte in die HTML-Tabelle geschrieben.

XSLT 1.0 xsl:strip-space (Behandlung von Leerraumzeichen steuern)

Bestimmt, dass Leerraumzeichen, die zwischen Elementen in der Datei enthalten sind, bei der Ausgabe entfernt werden. Leerraumzeichen sind die Zeichen mit den Hexadezimalwerten #x20 (einfaches Leerzeichen), #x9 (Tabulator-Zeichen), #xD (Wagenrücklaufzeichen) und #xA (Zeilenvorschub-Zeichen). Es handelt sich nicht um den Textinhalt von Elementen, sondern um die Formatierung der Elemente im Ergebnisbaum.

Hat folgende Attribute:

elements (obligatorisch) Namen von einem oder mehreren Elementen der Ausgangsdaten, deren Leerraumzeichen in der Ausgabe entfernt werden sollen. Mehrere Angaben sind durch Leerzeichen zu trennen.

Kann innerhalb von nach unten xsl:stylesheet vorkommen und muss außerhalb von nach unten xsl:template notiert sein.

Beispieldatei strip_space.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei strip_space.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei strip_space.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="strip_space.xsl" ?>
<test>

<kontakt>Hannes Breuer, breuer@example.org </kontakt>

<kontakt>Eleonore Bleibtreu, elblei@example.org</kontakt>

</test>

Beispieldatei strip_space.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:strip-space elements="test" />

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body><pre>
  <xsl:apply-templates />
 </pre></body>
 </html>
</xsl:template>

<xsl:template match="kontakt">
  <b><xsl:value-of select="." /></b>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

In den notierten XML-Daten ist zwischen den Elementen innerhalb des Dokument-Elements test Leerraum notiert. Im Beispiel-Stylesheet wird durch die Anweisung <xsl:strip-space elements="test" /> sichergestellt, dass diese Leerräume bei der Ausgabe entfernt werden. In der Template-Definition für die Dokumentwurzel wird der Inhalt dann für die HTML-Ausgabe in das pre-Element eingeschlossen, damit das Verschwinden der Leerräume in HTML sichtbar wird.

XSLT 1.0 xsl:stylesheet (Stylesheet Wurzelelement)

Ist das Wurzelelement eines XSL-Stylesheets und beinhaltet sämtliche Style-Definitionen.

Hat folgende Attribute:

extension-element-prefixes | (optional) gibt Namensräume an, die innerhalb des Stylesheets benötigt werden, um Elemente dieser anderen Namensräume zu erkennen. Erlaubt sind eine oder mehrere Angaben. Mehrere Angaben sind durch Leerzeichen zu trennen.
exclude-result-prefixes | (optional) gibt Namensräume an, die innerhalb des Stylesheets benötigt werden, um Elemente dieser anderen Namensräume zu erkennen. Beim Erzeugen des Ergebnisbaums werden diese Namensräume jedoch nicht mit übernommen, sofern sie dort nicht benötigt werden. Erlaubt sind eine oder mehrere Angaben. Mehrere Angaben sind durch Leerzeichen zu trennen.
id | (optional) legt einen eindeutigen Bezeichnernamen für das Stylesheet fest, unter dem es "von außen" ansprechbar ist.
version | (obligatorisch) gibt die verwendete XSL-Sprachversion an. Diese unbedingt erforderliche Angabe muss derzeit 1.0 lauten.
Ferner enthält das xsl:stylesheet-Element eine oder mehrere Angaben darüber, welchen Namensraum es benutzt. Dazu müssen die Quellen der Namensräume mit xmlns:xsl=[Quelle] angegeben werden. Für den XSLT-Namensraum ist üblicherweise xmlns:xsl="http://www.w3.org/1999/XSL/Transform" anzugeben. Abweichungen dazu sind abhängig vom verwendeten XSL-Prozessor.

Beispieldatei stylesheet.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei stylesheet.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei stylesheet.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="stylesheet.xsl" ?>
<test>
1234567890
</test>

Beispieldatei stylesheet.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html><head></head>
 <body style="background-color:#000000; font-family:Algerian; font-size:80px; color:#33FF33">
  <xsl:value-of select="." />
 </body></html>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Beispieldaten enthalten nur das Wurzelelement mit einer Ziffernfolge als Inhalt. Das Beispiel-Stylesheet ist dementsprechend einfach. Mit nach unten xsl:template wird eine Template-Definition zur Übersetzung der XML-Daten in die HTML-Ausgabe definiert. Eingeschlossen werden solche und andere XSL-Definition in das Wurzelelement xsl:stylesheet. Im Beispiel enthält das einleitende Tag dieses Elements die typischen Angaben zur XSLT-Version, zur XSLT-Quelle und zur Quelle des verwendeten HTML-Namensraums (hier: XHTML).

XSLT 1.0 xsl:template (Schablone für Ergebnisbaum definieren)

Dient zum Definieren von Schablonen für Übersetzungen des Ausgangsbaums in den Ergebnisbaum. Dazu wird angegeben, welcher Knoten des Ausgangsbaums in welches Konstrukt des Ergebnisbaums übersetzt werden soll. Bei einer Transformation von eigenen XML-Daten nach HTML kann mit Hilfe einer solchen Template-Definition beispielsweise aus einem Element namens liste eine Aufzählungsliste mit dem ul-Element werden, und untergeordnete Elemente namens listenpunkt lassen sich in entsprechende HTML-Elemente des Typs li transformieren.
Das xsl:template-Element ist dadurch wohl das wichtigste und bedeutendste Element von XSLT.
Meistens sind Ausgangsbaum (also die Daten, die in einer XML-Datenstruktur vorliegen) und Ergebnisbaum (also die Datenstruktur, in die übersetzt werden soll - z.B. in HTML) so komplex, dass sich nicht alles in einer einzigen Template-Definition erledigen lässt. Stattdessen können Template-Definitionen mit nach oben xsl:apply-templates andere Template-Definitionen aufrufen, die z.B. untergeordnete Knoten verarbeiten.

Hat folgende Attribute:

match | (optional) gibt an, für welches Knoten-Set bzw. Pfad nach Seite XPath-Syntax im Ausgangsbaum die Template-Definition gelten soll. Wird dieses Attribut nicht angegeben, muss stattdessen name angegeben werden.
mode | (optional) vergibt einen Namen für den Modus der Template-Definition. Templates mit Modusangabe können mit nach oben xsl:apply-templates ausgewählt werden.
name | (optional) vergibt einen Namen für die Template-Definition. Unter diesem Namen kann die Template-Definition mit nach oben xsl:call-template aufgerufen werden.
priority | (optional) ein numerischer Wert, der Konfliktfälle bei der Reihenfolge des Abarbeitens von Template-Definitionen bewältigen soll. In einigen XSL-Prozessoren ist es bislang so gelöst, dass untergeordnete Templates oder Attributnamen normalerweise den Prioritätswert 0 haben. Untergeordnete Templates oder Attributnamen mit Namensraumangabe plus dem Platzhalter * haben den Prioritätswert -0.25. Ein nicht weiter eingegrenzter Platzhalter * hat den Prioritätswert -0.5. Alle anderen Templates haben einen Prioritätswert von 0.5.

Kann innerhalb von nach oben xsl:stylesheet vorkommen.

Beispieldatei template.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei template.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei template.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="template.xsl" ?>
<test>
 <titel>Dateiendungen</titel>
 <glossar>
  <eintrag>
   <begriff>bak</begriff>
   <bedeutung>Backup-Datei</bedeutung>
  </eintrag>
  <eintrag>
   <begriff>bmp</begriff>
   <bedeutung>Bitmap-Grafik</bedeutung>
  </eintrag>
 </glossar>
</test>

Beispieldatei template.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
  <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="titel">
 <h1><xsl:value-of select="." /></h1>
</xsl:template>

<xsl:template match="glossar/eintrag">
 <p style="font-family:Arial,Helvetica,sans-serif; font-size:16px">
  <xsl:apply-templates />
 </p>
</xsl:template>

<xsl:template match="begriff">
 <b style="color:blue"><xsl:apply-templates />: </b>
</xsl:template>

<xsl:template match="bedeutung">
  <xsl:value-of select="." />
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Das Beispiel enthält in den XML-Daten eine typische verschachtelte Elementstruktur, in diesem Fall zur Auszeichnung einer glossar-artigen Liste von Dateiendungen und ihrer Bedeutung. Im Beispiel-Stylesheet wird diese XML-Elementstruktur in eine xml-gerechte HTML-Struktur übersetzt. Dies geschieht innerhalb der xsl:template-Definitionen. Solche Template-Definitionen sprechen üblicherweise mit Hilfe des Attributs match ein bestimmtes Element der Ausgangsdaten an. Als Inhalt enthält die Template-Definition dann HTML-Code und andere XSL-Anweisungen, mit deren Hilfe die Übersetzung nach HTML gesteuert wird. Mit der obersten Template-Definition, die match="/" als Angabe hat, wird das Wurzelelement der XML-Daten angesprochen (im Beispiel das Element mit dem Namen test).
Um eine ordentliche HTML-Datei zu erzeugen, wird als Inhalt dieser Template-Definition das Grundgerüst der HTML-Datei notiert. Zwischen dem einleitenden und dem abschließenden body-Tag ist die XSL-Anweisung nach oben xsl:apply-templates notiert, mit der untergeordnete Template-Definitionen aufgerufen werden, die untergeordnete XML-Elemente verarbeiten. Maßgeblich dafür ist die Baumstruktur der XML-Daten. Im obigen Beispiel hat das Wurzelelement der XML-Daten zwei unmittelbar untergeordnete Elemente, nämlich titel und glossar. Für das titel-Element ist eine eigene Template-Definition notiert (<xsl:template match="titel">). Darin wird mit Hilfe der XSL-Anweisung nach unten xsl:value-of der Inhalt des titel-Elements in eine HTML-Überschrift 1. Ordnung übersetzt.
Für das glossar-Element existiert im Beispiel keine eigene Template-Definition, erst wieder für dessen untergeordnetes Element eintrag. Damit dieses Template von der Anweisung <xsl:apply-templates />, die innerhalb der Template-Definition des Wurzelelements notiert ist, angesprochen wird, wird es nach Seite XPath-Syntax mit glossar/eintrag adressiert. Jeder Glossareintrag wird im Beispiel in einen CSS-formatierten HTML-Absatz übersetzt. Innerhalb davon werden wiederum mit <xsl:apply-templates /> die Template-Definitionen für untergeordnete XML-Elemente aufgerufen. Im Beispiel sind das die Definitionen für die untergeordneten Elemente begriff und bedeutung.

XSLT 1.0 xsl:text (Zeicheninhalt ausgeben)

Erzeugt statischen Text im Ergebnisbaum.

Hat folgende Attribute:

disable-output-escaping (optional) bestimmt, wie XML-eigene Zeichen wie < oder > behandelt werden. Mögliche Werte sind yes und no (Voreinstellung). Bei yes werden solche Zeichen nicht in ihre benannten Namen umgewandelt, bei no werden sie umgewandelt.

Kann innerhalb von nach oben xsl:template vorkommen.

Beispieldatei xsltext.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei xsltext.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei xsltext.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsltext.xsl" ?>
<test>
 <behauptung>Die Welt ist ein Dorf</behauptung>
</test>

Beispieldatei xsltext.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
  <xsl:apply-templates />
 </body>
 </html>
</xsl:template>

<xsl:template match="behauptung">
 <p><xsl:value-of select="." /></p>
<script type="text/javascript">
 <xsl:text>
  &lt;!--
   document.write(&quot;&lt;p&gt;&quot; + document.lastModified + &quot;&lt;/p&gt;&quot;);
  //--&gt;
 </xsl:text>
</script>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Daten des Beispiels enthalten eine Behauptung. Im Beispiel-Stylesheet wird die Behauptung in einen HTML-Absatz übersetzt. Unterhalb davon ist jedoch noch eine xsl:text-Anweisung zum Erzeugen von weiterem Text notiert. Diese wiederum enthält die HTML-gerechte Notation eines kleinen JavaScripts, das in einem Textabsatz den Zeitpunkt der letzten Änderung der Datei ausgibt. So, wie die Anweisung im Beispiel notiert ist, müssen innerhalb davon die XML-eigenen Zeichen maskiert werden.

XSLT 1.0 xsl:transform (Stylesheet Wurzelelement)

Ist ein Synonym für nach oben xsl:stylesheet.

XSLT 1.0 xsl:value-of (Wert ausgeben)

Erzeugt eine gespeicherte Zeichenkette an der aktuellen Position im Ausgabebaum. Bei der gespeicherten Zeichenkette kann es sich z.B. um den Inhalt eines Knotens der XML-Daten handeln, oder um den Inhalt einer zuvor definierten Variablen.

Hat folgende Attribute:

disable-output-escaping | (optional) bestimmt, wie bei der Ausgabe XML-eigene Zeichen wie < oder > behandelt werden. Mögliche Werte sind yes und no (Voreinstellung). Bei yes werden solche Zeichen nicht in ihre benannten Namen umgewandelt, bei no werden sie umgewandelt.
extension-element-prefixes | (optional) gibt Namensräume an, die benötigt werden, um Elemente dieser anderen Namensräume zu erkennen. Erlaubt sind eine oder mehrere Angaben. Mehrere Angaben sind durch Leerzeichen zu trennen.
select | (obligatorisch) Wählt einen Knoten oder eine Variable oder einen Parameter aus, dessen Inhalt verwendet werden soll.

Kann innerhalb von nach oben xsl:template vorkommen.

Beispieldatei value_of.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei value_of.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei value_of.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="value_of.xsl" ?>
<test>
 <liste>
   <eintrag>mein Haus</eintrag>
   <eintrag>mein Auto</eintrag>
   <eintrag>mein Boot</eintrag>
 </liste>
</test>

Beispieldatei value_of.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <ul>
  <xsl:apply-templates />
 </ul>
 </body>
 </html>
</xsl:template>

<xsl:template match="liste">
  <xsl:for-each select="eintrag">
   <li><xsl:value-of select="." /></li>
  </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

In den XML-Daten wird eine Liste mit Einträgen definiert. Im Beispiel-Stylesheet wird diese Liste in eine HTML-Aufzählungsliste übersetzt. In der Template-Definition für das Element liste wird mit nach oben xsl:for-each für jedes untergeordnete Element eintrag bestimmt, dass dessen jeweiliger Inhalt, der mit <xsl:value-of select="." /> ermittelt wird, in je ein HTML-Listenelement li gesetzt wird.
Mit select="." wird der Inhalt des aktuellen Elements ausgewählt. Generell gilt bei der Wertzuweisung an das select-Attribut die Seite XPath-Syntax.

XSLT 1.0 xsl:variable (Variable definieren)

Definiert eine Variable, deren Wert im weiteren Verlauf verwendet werden kann.

Hat folgende Attribute:

name | (obligatorisch) gibt den Namen der Variablen an. Unter diesem Namen kann auf ihren Wert zugegriffen werden.
select | (optional) bestimmt einen Wert für die Variable. Wird dieses Attribut notiert, muss das xsl:variable-Element leer sein. Wird es nicht notiert, erfolgt die Wertzuweisung als Inhalt des Elements zwischen seinem Anfangs- und End-Tag. Mit select kann z.B. ein Element aus den XML-Ausgangsdaten ausgewählt werden. Auch die Vorbelegung mit statischem Text ist möglich, z.B. mit select="'Name:'" (dabei auf die inneren einfachen Anführungszeichen achten!).

Kann innerhalb von nach oben xsl:stylesheet vorkommen und kann sowohl außerhalb als auch innerhalb von nach oben xsl:template notiert sein. Wenn außerhalb notiert, ist es eine globale Variable, die in allen Template-Definitionen zur Verfügung steht. Wenn innerhalb einer Template-Definition notiert, ist es eine lokale Variable innerhalb des Templates.

Beispieldatei variable.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei variable.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei variable.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="variable.xsl" ?>
<test>
 <spruch>
   Das ist ein weites Feld
 </spruch>
 <spruch>
   Morgenstund hat Gold im Mund
 </spruch>
 <spruch>
   Stell dir vor es geht und keiner kriegts hin
 </spruch>
</test>

Beispieldatei variable.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
  <xsl:apply-templates select="test/spruch" />
 </body>
 </html>
</xsl:template>

<xsl:template match="spruch">
 <xsl:variable name="textzuvor">
  <xsl:choose>
   <xsl:when test="position()=1">Erster Eintrag: </xsl:when>
   <xsl:when test="position()=last()">Letzter Eintrag: </xsl:when>
   <xsl:otherwise>Eintrag: </xsl:otherwise>
  </xsl:choose>
 </xsl:variable>
 <p><b><xsl:value-of select="$textzuvor" /></b><br />
 <xsl:value-of select="." /></p>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Daten des Beispiels enthalten eine Reihe von Sprüchen. Im Beispiel-Stylesheet wird innerhalb der Template-Definition für das Element spruch eine Variable mit dem Namen textzuvor definiert. Es handelt sich um eine lokale Variable, deren Wert als Inhalt zwischen dem Anfangs-Tag <xsl:variable...> und dem Gegenstück </xsl:variable> dynamisch ermittelt wird. Dazu dient eine nach oben xsl:choose-Anweisung, bei der mit der Funktion Seite position() ermittelt wird, ob es sich um den ersten Spruch, den letzten oder einen dazwischen handelt. Abhängig davon wird ein unterschiedlicher Text erzeugt: Erster Eintrag, Letzter Eintrag oder einfach nur Eintrag. Dies ist der Wert, der der Variablen textzuvor zugewiesen wird. Da die Template-Definition bei jedem Vorkommen des Elements spruch neu aufgerufen wird, wird auch jedesmal der Variablenwert neu ermittelt.

XSLT 1.0 xsl:when (Bedingung innerhalb einer Auswahl)

Definiert eine Bedingung bei einer Mehrfachauswahl innerhalb der nach oben xsl:choose-Anweisung.

Hat folgende Attribute:

test (obligatorisch) formuliert die Bedingung.

Kann innerhalb xsl:choose vorkommen.

Beispiel mit Erläuterung siehe nach oben xsl:choose, für Bedingungen siehe auch nach oben xsl:if.

XSLT 1.0 xsl:with-param (Parameter einen Wert zuweisen)

Weist einem Parameter einen Wert zu, und zwar beim Aufruf einer Template-Definition. In der aufgerufenen Template-Definition wird dann, sofern dieser Parameter dort verfügbar ist, mit dem zugewiesenen Wert gearbeitet.

Hat folgende Attribute:

name | (obligatorisch) gibt den Namen des Parameters an. Unter diesem Namen muss der Parameter innerhalb einer Template-Definition verfügbar sein. Damit der Parameter dort verfügbar ist, muss er mit nach oben xsl:param definiert werden.
select | (optional) weist dem Parameter einen Wert zu. Mit select kann z.B. ein Knoten aus den XML-Ausgangsdaten ausgewählt werden. Dann ist dessen Inhalt der zugewiesene Wert. Es kann aber auch ein anderer Ausdruck sein, z.B. ein Rechenausdruck. Auch die Zuweisung von statischem Text ist möglich, z.B. mit select="'Name'" (dabei auf die inneren einfachen Anführungszeichen achten!).

Kann innerhalb von nach oben xsl:apply-templates oder nach oben xsl:call-template vorkommen. Der zugewiesene Wert ist dann in den aufgerufenen Template-Definitionen verfügbar.

Beispieldatei with_param.xml:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Ergebnisdatei with_param.htm)
Beispiel-Seite Anzeigebeispiel: So sieht's aus (Datei with_param.xml - XML/XSLT-fähiger Browser erforderlich)

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="with_param.xsl" ?>
<test>
 <start>10</start>
 <ende>20</ende>
</test>

Beispieldatei with_param.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html>
 <head>
 </head>
 <body>
 <table border="1">
  <xsl:call-template name="Schleife">
    <xsl:with-param name="Zaehler" select="number(/test/start)" />
  </xsl:call-template>
 </table>
 </body>
 </html>
</xsl:template>

<xsl:template name="Schleife">
 <xsl:param name="Zaehler" />
 <xsl:choose>
  <xsl:when test="$Zaehler &lt;= number(/test/ende)">
    <tr>
      <td><xsl:value-of select="$Zaehler" /></td>
      <td><xsl:value-of select="$Zaehler * $Zaehler" /></td>
    </tr>
    <xsl:call-template name="Schleife">
     <xsl:with-param name="Zaehler" select="$Zaehler + 1" />
    </xsl:call-template>
  </xsl:when>
  <xsl:otherwise>
   <xsl:call-template name="Abbruch" />
  </xsl:otherwise>
 </xsl:choose>
</xsl:template>

<xsl:template name="Abbruch">
 <xsl:comment>Schleife beendet!</xsl:comment>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Die XML-Daten im Beispiel definieren einfach eine kleinere und eine größere Zahl, von denen die erste einen Startwert darstellt und die zweite einen Endwert. Im Beispiel-Stylesheet wird aus diesen Zahlen eine HTML-Tabelle erzeugt, die für alle Zahlen zwischen dem Startwert und dem Endwert in je einer Tabellenzeile die aktuelle Zahl und deren Quadrat ausgibt. Dazu wird innerhalb der Template-Definition für das Wurzelelement mit xsl:call-template eine andere Template-Definition namens Schleife aufgerufen. Innerhalb dieser xsl:call-template-Anweisung ist eine xsl:with-param-Anweisung notiert, die einem Parameter namens Zaehler mit select einen Wert zuweist. In dem Fall ist das der Inhalt des Elements start (Pfad: /test/start). Dabei wird mit Hilfe der Funktion Seite number() sichergestellt, dass der Inhalt des Elements als Zahl interpretiert wird.
In der aufgerufenen Template-Definition Schleife wird mit <xsl:param name="Zaehler" /> der Parameter namens Zaehler definiert. Nur so ist es der Template-Definition moeglich, mit dem Wert dieses Parameters, der ihr beim Aufruf übergeben wurde, zu arbeiten. Eine Alternative wäre es, wenn Zaehler global definiert wäre.
Mit <xsl:when test="$Zaehler <= number(/test/ende)"> wird abgefragt, ob der Wert von Zaehler kleiner oder gleich dem Wert ist, der im Element ende gespeichert ist. Ist das der Fall, wird eine Tabellenzeile erzeugt, die den Wert und sein Quadrat ausgibt. Außerdem ruft sich das Template Schleife selbst wieder auf und übergibt sich dabei wiederum den Parameter Zaehler. Dieser wird um 1 erhöht, sodass die Template-Definition beim nächsten Aufruf die nächsthöhere Zahl abfragt.
Ist der Wert des Elements ende überschritten, wird eine Template-Definition namens Abbruch aufgerufen, die lediglich einen abschließenden Kommentar in den auszugebenden HTML-Code setzt.

nach oben
weiter | Seite XPath-Syntax
zurück | Seite Beispiele für XSLT
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Darstellung von XML-Daten

© 2007 Seite Impressum


SELFHTML: XML / Darstellung von XML-Daten / XPath-Syntax

SELFHTML

XPath-Syntax
Informationsseite

nach unten Die Aufgaben von XPath
nach unten Knotentypen, Achsen und Pfade
nach unten Ausführliche und verkürzte Notation
nach unten Adressierung der Dokumentwurzel
nach unten Adressierung mit absoluten Pfadangaben
nach unten Adressierung mit relativen Pfadangaben
nach unten Adressierung von Attributen
nach unten Adressierung mit Wildcards
nach unten Adressierung mit Positionsangaben und Bedingungen
nach unten XPath-Operatoren
nach unten

Die Aufgaben von XPath

XPath ist ebenso wie XML, XSL und XSLT ein Sprachprojekt des W3-Konsortiums. Für XPath gibt es eine eigene Arbeitsgruppe, die an der Spezifikation der XPath-Sprache arbeitet. Im November 1999 ist dabei die Version 1.0 der Empfehlung (Recommendation) für XPath herausgekommen. Die jeweils aktuelle Spezifikation und die Fortentwicklung der XPath-Sprache können Sie über die englischsprachige Seite W3C-Einstiegsseite zu XPath mitverfolgen.

XPath ist jedoch lediglich eine Art Hilfssprache, die erforderlich ist, damit XSLT seine Aufgaben wahrnehmen kann. XPath hat dabei drei wichtige Aufgaben:

  • Adressierung von Daten
  • Definition logischer Ausdrücke
  • Zusätzliche Funktionen

Adressierung von Daten

Beim Übersetzen einer XML-Dokumentstruktur in eine andere XML-Dokumentstruktur, also etwa beim Übersetzen eines Dokuments mit eigener XML-DTD in ein HTML-Dokument, ist es wichtig, jeden Bestandteil der Datenstruktur genau ansprechen zu können. Wenn Sie im (XML-)Ausgangsbaum beispielsweise stehen haben: <augen farbe="graublau">, und Sie möchten im (HTML-)Ergebnisbaum daraus erzeugen: <th>Augenfarbe</th><td>graublau</td>, dann müssen Sie auf das Attribut farbe des Elements augen zugreifen. Angenommen weiter, das Element augen ist sowohl ein Kindelement eines Elements namens person, als auch ein Kindelement eines Elements namens phantombilddaten in einem anderen Zweig des gleichen XML-Dokuments, können Sie erahnen, dass für die eindeutige Adressierung von Dokumentbestandteilen eine brauchbare Adressierungs-Syntax benötigt wird. Typische Fälle, in denen die XPath-Adressierung zum Einsatz kommt, sind z.B. das select-Attribut der Seite xsl:value-of-Anweisung oder das match-Attribut der Seite xsl:template-Anweisung.

Das Adressieren von Daten mit XPath wird auf dieser Seite weiter unten beschrieben.

Definition logischer Ausdrücke

Damit sind logische Ausdrücke gemeint, die vom XSLT-Prozessor mit verarbeitet werden, und die zur Funktionalität bestimmter XSLT-Elemente wichtig sind. Logische Ausdrücke enthalten Operatoren und können damit z.B. zwei Werte vergleichen. Ähnlich wie die Adressierung von Daten kommt die Definition von Ausdrücken in bestimmten Wertzuweisungen an Attribute von XSLT-Elementen vor. Ein typisches Beispiel ist das test-Attribut der Seite xsl:if-Anweisung. Darin wird eine Bedingung formuliert, die wahr oder falsch sein kann. Nur wenn sie wahr ist, werden untergeordnete Anweisungen ausgeführt. Eine Bedingung wie test="alter &gt;= 18" (hat das Element alter einen Wert größer gleich 18?) ist so ein typischer logischer Ausdruck. Die Syntax dabei basiert auf XPath.

Die Definition von logischen Ausdrücken mit XPath wird auf dieser Seite im Abschnitt nach unten XPath-Operatoren beschrieben.

Zusätzliche Funktionen

Seinen großen Leistungsumfang erhält XSLT nicht zuletzt durch ein Arsenal an zusätzlichen Funktionen, die bestimmte Aufgaben wahrnehmen. So gibt es z.B. eine Funktion position(), die beim Abarbeiten mehrerer Elemente in einer Reihe zurückliefert, das wievielte Element gerade bearbeitet wird. Diese Information lässt sich beispielsweise dazu nutzen, um die Elemente im Ergebnisbaum zu nummerieren. Eine andere typische Funktion namens starts-with() überprüft, ob eine Zeichenkette mit einer bestimmten Teilzeichenkette beginnt. Wenn diese Funktion etwa als Bedingung in einer xsl:if-Anweisung notiert wird, lässt sich das Erzeugen des Ergebnisbaums von der Abfrage beeinflussen, ob der Wert eines Elements mit einem bestimmten Zeichen oder einer bestimmten Zeichenfolge beginnt. So könnte eine Bedingung wie test="starts-with(plz,'8')" zum Beispiel abfragen, ob der Wert einer Postleitzahl mit 8 beginnt, und nur Elemente in den Ergebnisbaum übernehmen, bei denen dies der Fall ist.

Die zusätzlichen Funktionen werden auf der Seite Seite XPath-Funktionen beschrieben.

XPath 1.0 Knotentypen, Achsen und Pfade

XML-gerechte Dokumente sind wie die Verzeichnis- und Dateistruktur auf einem Datenträger aufgebaut. Dort gibt es ein Wurzelverzeichnis, das Verzeichnisse (Ordner) und Dateien enthalten kann. Jedes untergeordnete Verzeichnis kann wiederum andere Unterverzeichnisse und Dateien enthalten usw. Man spricht dabei auch von Baumstruktur. Auf der Seite Seite Baumstruktur und Knoten einer XML-Datei wird dieses Modell einführend beschrieben.

Ebenso, wie man bei der Dateistruktur auf einem Datenträger von Verzeichnissen oder Ordnern, Dateien und Pfadangaben für Dateien spricht, braucht man für die Adressierung von Bestandteilen eines XML-Dokuments eine geeignete Terminologie. Zu diesem Zweck gibt es in XPath verschiedene Knotentypen, Achsen und Pfade. Die Begriffe, die dabei auftauchen, werden im folgenden vorgestellt. Die Begriffe muten zunächst etwas akademisch an, aber zum Verständnis von XPath sind sie wichtig. Entscheidend sind die englischen Originalbegriffe (kursiv geschrieben).

Knotentypen

Jeder Bestandteil der Baumstruktur einer XML-Datei wird als Knoten bezeichnet. Da es in XML jedoch durchaus namhaft zu machende Bestandteile wie Elemente, Attribute usw. gibt, wird von entsprechenden Knotenypen gesprochen. Die Knotentypen sind nicht unmittelbar Bestandteil der Adressierungs-Syntax von XPath, doch es ist sinnvoll, die Begriffe zu kennen. XPath unterscheidet 7 Knotentypen:

Knotentyp | Bedeutung
Wurzelknoten (root node) | Dies ist die Wurzel eines XML-Dokuments. Der Wurzelknoten ist selbst kein Element, sondern nur die abstrakte Ursprungswurzel der Baumstruktur des Dokuments.
Elementknoten (element node) | Jedes Element (auch das Dokument-Element) stellt aus XPath-Sicht einen Elementknoten dar. Ein Element namens a, bestehend aus dem Anfangs- und End-Tag <a>...</a>, ist beispielsweise ein element node. Untergeordnete Elemente (auch als Kindelemente bezeichnet) sind ebenfalls element nodes, also beispielsweise ein Element namens b, bestehend aus dem Anfangs- und End-Tag <b>...</b>, das innerhalb von <a>...</a> vorkommen kann.
Attributknoten (attribute node) | Jedes Attribut, das zu einem Element gehört, wird als Attributknoten bezeichnet. Ein Attribut b="irgendwas", das im Anfangs-Tag eines Elements a vorkommt und dann also in der Form <a b="irgendwas"> notiert wird, gilt als attribute node des Elements a. Der Attributknoten besteht also aus dem Attributnamen und dem zugewiesenen Wert.
Textknoten (text node) | Jeder Zeicheninhalt, der keine anderen Knoten mehr enthält, wird als Textknoten bezeichnet. In einer Notation wie <a b="irgendwas">und ein kleiner Text</a> ist der Inhalt des Elements ein text node.
Namensraumknoten (namespace node) | Sowohl Elemente als auch Attribute können Namensraumangaben enthalten, wenn entsprechende Namensräume in eine XML-Datei importiert werden. Ähnlich wie Attributknoten einem Elementknoten zugeordnet sind, sind Namensraumknoten einem Elementknoten oder einem Attributknoten zugeordnet. Bei einer Notation wie <x:a y:b="irgendwas"> sind x und y Namensraumangaben. x ist ein namespace node, der dem Element a zugeordnet ist, und y ein namespace node, der dem Attribut b zugeordnet ist.
Verarbeitungsanweisungsknoten (processing instruction node) | Verarbeitungsanweisungen, die in einem XML-Dokument vorkommen (sie beginnen mit <? und enden mit ?>), stehen außerhalb des eigentlichen Dokumentbaums. Sie stellen aus XPath-Sicht einen eigenen Knotentyp dar, wobei das Ziel der Verarbeitungsanweisung den Namen des Knoten und der Rest den Inhalt des Knotens bildet. In einer Verarbeitungsanweisung wie <?xml-stylesheet type="text/xsl" href="darstellung.xsl"?> ist der Teil xml-stylesheet der Name des Knotens. Die XML-Deklaration <?xml version="1.0"?>, die zu Beginn einer XML-Datei notiert werden sollte, ist allerdings keine Verarbeitungsanweisung in diesem Sinne, auch wenn sie syntaktisch genau so aussieht.
Kommentarknoten (comment node) | Kommentare, also Inhalte, die in die Zeichenfolgen <!-- und --> eingeschlossen sind, werden als Kommentarknoten bezeichnet. Der Kommentarknoten ist dabei der Inhalt des Kommentars. Bei einem Kommentar wie <!--irgendwas--> ist die Zeichenfolge irgendwas der comment node.

Achsen

Die Baumstruktur eines XML-Dokuments ergibt für die einzelnen Knoten, dass diese verschiedene Beziehungen untereinander haben. So gibt es Knoten, die von anderen Knoten abhängen, und solche, die auf einer gemeinsamen Ebene liegen. Dafür hält XPath verschiedene Begriffe bereit, die aus der Verwandtschaftsterminologie stammen und als Achsen (axes) bezeichnet werden. Die englischen Begriffe (in der folgenden Tabelle kursiv dargestellt) werden auch bei der nach unten ausführlichen Adressierung verwendet. XPath unterscheidet 13 Achsen:

Achse | Bedeutung | Visualisierung
Kind (child) | Unmittelbar untergeordnete Knoten. In einer Struktur wie <a><b>...</b></a> ist das Element b aus Sicht des Elements a ein child. | siehe Beispiel-Seite grafische Darstellung
Elternknoten (parent) | Der unmittelbar übergeordnete Knoten. In einer Struktur wie <a><b>...</b></a> ist das Element a aus Sicht des Elements b ein parent. | siehe Beispiel-Seite grafische Darstellung
Nachkommen (descendant) | Untergeordnete Knoten, auch solche, die weiter als unmittelbar untergeordnet sind. In einer Struktur wie <a><b><c>...</c></b></a> ist sowohl das Element b als auch das Element c aus Sicht des Elements a ein descendant. | siehe Beispiel-Seite grafische Darstellung
Vorfahr (ancestor) | Übergeordnete Knoten, auch solche, die weiter als unmittelbar übergeordnet sind. In einer Struktur wie <a><b><c>...</c></b></a> ist sowohl das Element b als auch das Element a aus Sicht des Elements c ein ancestor. | siehe Beispiel-Seite grafische Darstellung
Nachfolgende Knoten (following) | Knoten, die nach dem aktuellen Knoten im restlichen XML-Dokument folgen, unabhängig von der Hierarchie der Knoten (ausgeschlossen Nachkommen-Knoten des aktuellen Knotens). In einer Struktur wie <a><b><c>...</c></b><b><c>...</c></b></a> haben aus Sicht des ersten c-Elements das zweite b-Element, das zweite c-Element und dessen Inhalt den Status following. | siehe Beispiel-Seite grafische Darstellung
Vorherige Knoten (preceding) | Knoten, die vor dem aktuellen Knoten im XML-Dokument stehen, unabhängig von der Hierarchie der Knoten (ausgeschlossen Vorfahr-Knoten des aktuellen Knotens). In einer Struktur wie <a><b><c>...</c><c>...</c></b><b></b></a> haben aus Sicht des zweiten b-Elements das erste b-Element und dessen Kind-Elemente den Status preceding. | siehe Beispiel-Seite grafische Darstellung
Nachfolgende Geschwisterknoten (following-sibling) | Knoten, die nach dem aktuellen Knoten im restlichen XML-Dokument folgen, und zwar auf der gleichen Hierarchie-Ebene. In einer Struktur wie <a><b><c>...</c><c>...</c></b></a><c>...</c> hat aus Sicht des ersten c-Elements das zweite c-Element den Status following-sibling, das dritte c-Element dagegen nicht. | siehe Beispiel-Seite grafische Darstellung
Vorherige Geschwisterknoten (preceding-sibling) | Knoten, die vor dem aktuellen Knoten im XML-Dokument stehen, und zwar auf der gleichen Hierarchie-Ebene. In einer Struktur wie <c>...</c><a><b><c>...</c><c>...</c></b></a> hat aus Sicht des dritten c-Elements das zweite c-Element den Status preceding-sibling, das erste c-Element dagegen nicht. | siehe Beispiel-Seite grafische Darstellung
Attribut (attribute) | Attributknoten eines Elements. Attribute erhalten damit, obwohl auch sie ihren Platz in der Hierarchie einer XML-Dokumentstruktur haben, eine Sonderstellung und werden nicht in das Schema der Begriffe child, parent, descendant und ancestor eingefügt. In einer Struktur wie <a b="irgendwas"> ist b aus Sicht von a ein attribute. |
Namensraum (namespace) | Zugehöriger Namensraumknoten des aktuellen Elements. In einer Struktur wie <x:a>...</x:a> ist aus Sicht des a-Elements x der zugehörige namespace. |
Der aktuelle Knoten selbst (self) | Der aktuelle Knoten. Wenn in einer Struktur wie <a><b><c>...</c><c>...</c></b></a> vom XSLT-Prozessor gerade das b-Element verarbeitet wird, dann hat dieses in dem Moment den Status self. | siehe Beispiel-Seite grafische Darstellung
Nachkommen oder der aktuelle Knoten selbst (descendant-or-self) | Der aktuelle Knoten oder Nachkommen davon. Wenn in einer Struktur wie <a><b><c>...</c><c>...</c></b></a> vom XSLT-Prozessor gerade das b-Element verarbeitet wird, dann haben dieses und das nachfolgende c-Element in dem Moment den Status descendant-or-self. | siehe Beispiel-Seite grafische Darstellung
Vorfahre oder der aktuelle Knoten selbst (ancestor-or-self) | Der aktuelle Knoten oder Vorfahren davon. Wenn in einer Struktur wie <a><b><c>...</c><c>...</c></b></a> vom XSLT-Prozessor gerade das b-Element verarbeitet wird, dann haben dieses und das vorhergehende a-Element in dem Moment den Status ancestor-or-self. | siehe Beispiel-Seite grafische Darstellung

Pfade

XPath stellt zwei syntaktische Mittel bereit, um den Pfad zu einem oder mehreren Knoten zu notieren:

Notation | Beschreibung | Bedeutung
/ | einfacher Schrägstrich | Pfad-Trennzeichen für tatsächliche Namen von Knoten. In einer Struktur wie <a><b><c>...</c><c>...</c></b></a> lässt sich das c-Element als Pfadangabe in der Form a/b/c darstellen.
:: | doppelter Doppelpunkt | Pfad-Trennzeichen für Knotenangaben mit Achsen. In einer Struktur wie <a><b><c>...</c><c>...</c></b></a> lässt sich das c-Element als Pfadangabe z.B. in der Form a/b/child::c darstellen. Mehr dazu im folgenden Abschnitt.

XPath 1.0 Ausführliche und verkürzte Notation

Beim Adressieren von Knoten einer XML-Datenstruktur gibt es Ausdrücke wie /child::person/child::augen/attribute::farbe. Solche Ausdrücke werden als ausführliche Notation bezeichnet, weil sie die vollen Achsenbezeichnungen enthalten. Der Ausdruck /child::person/child::augen/attribute::farbe kann jedoch ebensogut in der Form /person/augen/@farbe notiert werden. Dies ist die verkürzte Notation, die auf die Achsenbezeichnung child:: verzichtet und einige andere Einsparungen erlaubt. In den Beispielen weiter unten werden die beiden Notationsvarianten jeweils parallel gezeigt.

XPath 1.0 Adressierung der Dokumentwurzel

Jedes XML-Dokument hat eine Wurzel, die auch adressierbar ist.

Beispiel:

<xsl:template match="/">
<html><head><title>Beispiel</title></head>
<body>
 <xsl:apply-templates />
</body></html>
</xsl:template>

Erläuterung:

Der Wurzelknoten eines XML-Dokuments wird mit einem einzelnen Schrägstrich (/) adressiert. Im Beispiel wird mit Seite xsl:template ein Template für die XML-Dokumentwurzel definiert. Im match-Attribut wird die Dokumentwurzel adressiert.

XPath 1.0 Adressierung mit absoluten Pfadangaben

Knoten eines XML-Dokuments sind mit Hilfe einer absoluten Pfadangabe adressierbar.

Beispiel 1 (ausführliche Notation):

<xsl:template match="/child::adresse/child::vorname">
<b><xsl:value-of select="/child::adresse/child::vorname" /></b>
</xsl:template>

Beispiel 2 (verkürzte Notation):

<xsl:template match="/adresse/vorname">
<b><xsl:value-of select="/adresse/vorname" /></b>
</xsl:template>

Erläuterung:

Absolute Pfadangaben beginnen mit einem Schrägstrich (/), der die Dokumentwurzel repräsentiert. Weitere Hierarchie-Ebenen werden durch weitere Schrägstriche markiert. Die Knoten, über die der Pfad läuft, werden wie in Beispiel 1 gezeigt durch ihre Achse und den gewünschten Knotennamen bezeichnet, getrennt durch doppelten Doppelpunkt (::). Ebenfalls erlaubt und häufiger verwendet ist allerdings die in Beispiel 2 gezeigte verkürzte Notation ohne Achsenbezeichnungen. Im Beispiel wird mit der xsl:template-Anweisung ein Template für ein Element namens vorname definiert, das ein Kindelement des Elements adresse ist, das wiederum ein Kindelement der Dokumentwurzel ist. Auch im select-Attribut der Seite xsl:value-of-Anweisung wird die Syntax verwendet.

XPath 1.0 Adressierung mit relativen Pfadangaben

Knoten eines XML-Dokuments sind mit Hilfe einer relativen Pfadangabe adressierbar.

Angenommene XML-Struktur:

<liga>
 <liga-eintrag>
  <spieler>...</spieler>
   <ergebnis>
    <punktzahl>...</punktzahl>
   </ergebnis>
 </liga-eintrag>
</liga>

Beispiel 1 (ausführliche Notation):

<xsl:template match="./child::liga-eintrag/child::ergebnis">
 <span class="normal"><xsl:value-of select="parent::spieler" /></span>
 <span class="betont"><xsl:value-of select="./child::punktzahl" /></span>
</xsl:template>

Beispiel 2 (verkürzte Notation):

<xsl:template match="liga-eintrag/ergebnis">
 <span class="normal"><xsl:value-of select="../spieler" /></span>
 <span class="betont"><xsl:value-of select="punktzahl" /></span>
</xsl:template>

Erläuterung:

Das Beispiel nimmt eine typische verschachtelte Elementstruktur an. Es nimmt an, dass es für das Element liga eine Template-Definition gibt, in der mit der Seite xsl:apply-templates-Anweisung untergeordnete Templates aufgerufen werden. Weiterhin nimmt das Beispiel an, dass für das Element liga-eintrag keine Template-Definition exisitert, erst wieder für dessen Kindelement ergebnis. Um dieses Element aus Sicht des Großvaterelements liga zu adressieren, ist eine relative Pfadangabe im match-Attribut der Seite xsl:template-Anweisung nötig. In der ausführlichen Notation lautet diese Pfadangabe ./child::liga-eintrag/child::ergebnis, in der verkürzten, leichter lesbaren Notation liga-eintrag/ergebnis. Die Zeichenfolge ./ (Punkt und Schrägstrich) steht für "aktueller Standpunkt". Diese Zeichenfolge kann auch weggelassen werden. Ansonsten besteht die relative Pfadangabe einfach aus der Folge der hierarchie-bestimmenden Knotennamen. Bei der ausführlichen Notation wird dabei stets noch die Achsenbezeichnung child:: benutzt, während bei der verkürzten Notation die bloßen Knotennamen (im Beispiel die Elementnamen liga-eintrag und ergebnis) genügen. Trennzeichen für Hierarchie-Ebenen ist der einfache Schrägstrich (/).

Innerhalb der Template-Definition für das Element ergebnis wird unter anderem HTML-Code für ein anderes Element der Ausgangsdaten, nämlich für das Element spieler notiert. Dieses Element liegt jedoch auf der gleichen Hierarchie-Ebene wie das aktuelle Element ergebnis (Geschwisterknoten). Um es aus Sicht von ergebnis anzusprechen, muss es über den Umweg des gemeinsamen Elternelements adressiert werden. In der ausführlichen Notation steht dafür die Achsenbezeichnung parent:: zur Verfügung, gefolgt vom Namen des anderen Kindknotens. In der verkürzten Notation genügt die Angabe von zwei Punkten, gefolgt von einem Schrägstrich (../), um den Weg über das Elternelement zu beschreiben.

Für die HTML-Ausgabe des Elements punktzahl wird ebenfalls eine relative Adressierung verwendet. Da das Element punktzahl aus Sicht des aktuellen Elements ergebnis einfach ein Kindelement ist, genügen die Angaben ./child::punktzahl (ausführliche Notation) bzw. punktzahl (verkürzte Notation) zur Adressierung.

XPath 1.0 Adressierung von Attributen

Attribute von Elementen werden in XPath als Attributknoten behandelt und entsprechend adressiert.

Beispiel 1 (ausführliche Notation):

<xsl:template match="./child::augen/attribute::farbe">
  <tr><td><b><xsl:text>Augenfarbe:</xsl:text></b></td>
  <td><xsl:value-of select="." /></td></tr>
</xsl:template>

Beispiel 2 (verkürzte Notation):

<xsl:template match="augen/@farbe">
  <tr><td><b><xsl:text>Augenfarbe:</xsl:text></b></td>
  <td><xsl:value-of select="." /></td></tr>
</xsl:template>

Erläuterung:

Das Beispiel nimmt an, dass es eine XML-Notation <augen farbe="..."> gibt. Für das Attribut wird ein eigenes Template definiert. Dabei wird im HTML-Ergebnisbaum eine zweispaltige Tabellenzeile erzeugt, in der links das statische Wort Augenfarbe: steht, während in der rechten Spalte der Wert des Attributs farbe ausgegeben wird. Das match-Attribut der Template-Definition wird so adressiert, dass das Template von einem Elternelement von augen aus - z.B. von person - aufgerufen werden kann. Der Pfad lautet dann in der ausführlichen Notation ./child::augen/attribute::farbe und in der verkürzten, gebräuchlicheren Notation augen/@farbe. Bei der ausführlichen Notation kommen also die Achsenbezeichnungen child:: (für Kindelement child aus Sicht von person) und attribute:: für die Auswahl von dessen Attribut farbe zum Einsatz. In der verkürzten Notation genügt die relative Angabe des Kindelements augen und der Attributname, angeführt von einem Klammeraffen (@).

XPath 1.0 Adressierung mit Wildcards

Die Adressierung mit Wildcards erlaubt es, mehrere Knoten auf einmal auszuwählen.

Angenommene XML-Struktur:

<dateicode>
 <signature>474946383961</signature>
 <screen-descriptor>10000200B30000</screen-descriptor>
 <color-map>000000BF000000BF00BFBF00</color-map>
 <extension-block>21F90401000000</extension-block>
 <!-- usw. -->
</dateicode>

Beispiel 1 (ausführliche Notation):

<xsl:template match="dateicode">
 <xsl:value-of select="child::*" />
</xsl:template>

Beispiel 2 (verkürzte Notation):

<xsl:template match="dateicode">
 <xsl:value-of select="*" />
</xsl:template>

Erläuterung:

Das Beispiel nimmt an, dass mit Hilfe von XML-Elementen der Aufbau einer Binärdatei (im Beispiel: GIF-Format) beschrieben wird. In der Ausgabe sollen die Inhalte aller Kindelemente von dateicode einfach in einem Rutsch geschrieben werden. In der Template-Definition zu dateicode wird dies im select-Attribut der Seite xsl:value-of-Anweisung durch Angabe des Wildcard-Zeichens * (Sternzeichen) erreicht. In der ausführlichen Notation ist die Achsenbezeichnung child:: angegeben, in der verkürzten Notation kann diese entfallen.

Beachten Sie:

Das Wildcard-Zeichen * (Sternzeichen) wählt nur auf der nächstunteren Hierarchie-Ebene aus. Eine verschärfte Form ist die Zeichenfolge // (zwei Schrägstriche). Damit wird auf allen untergeordneten Hierarchie-Ebenen ausgewählt, egal, wie tief sich der Baum noch verzweigt.

XPath 1.0 Adressierung mit Positionsangabe und Bedingungen

Durch absolute und relative Adressierung ist noch nicht jedes beliebige Element ansprechbar. Angenommen, ein Element namens liste hat 25 Kindelemente namens listeneintrag, dann greift eine Adressierung wie liste/listeneintrag nur auf das erste dieser Elemente zu. Solche Probleme lassen sich zwar auch durch Seite xsl:for-each-Schleifen in den Griff bekommen, doch manchmal wird man auch nur ein bestimmtes der Kindelemente ansprechen wollen, und nicht alle der Reihe nach. Die folgenden Beispiele zeigen Adressierungen mit Positionsangaben und Bedingungen, um bestimmte einzelne Elemente zu adressieren. Dabei kommen zum Teil auch Seite XPath-Funktionen zum Einsatz.

Syntax-Bestandteile in eckigen Klammern ([]) gehören ebenfalls zum Inventar der Adressierung mit Positionsangaben und Bedingungen. Solche Bestandteile werden als Prädikate bezeichnet. Viele der folgenden Beispiele verwenden solche Prädikate.

Beispiel | Notation | Erläuterung
self::liste | ausführlich | adressiert das aktuelle Element, jedoch nur dann, wenn es vom Typ liste ist.
child::listeneintrag[position() = 3] | ausführlich | adressiert das 3. Kindelement vom Typ listeneintrag mit Hilfe der XPath-Funktion Seite position().
listeneintrag[3] | verkürzt | adressiert das 3. Kindelement vom Typ listeneintrag.
child::listeneintrag[position() = last()] | ausführlich | adressiert das letzte Kindelement vom Typ listeneintrag mit Hilfe der XPath-Funktion Seite last().
listeneintrag[last()] | verkürzt | adressiert das letzte Kindelement vom Typ listeneintrag mit Hilfe der XPath-Funktion Seite last().
listeneintrag[last()-1] | verkürzt | adressiert das vorletzte Kindelement vom Typ listeneintrag mit Hilfe der XPath-Funktion Seite last().
/buch/kapitel[2]/abschnitt[4]/absatz[17] | verkürzt | adressiert in einem Buch absolut den 17. Absatz des 4. Abschnitts im 2. Kapitel (entsprechende XML-Elementnamen vorausgesetzt).
child::augen[attribute::farbe='blau'] | ausführlich | adressiert das Kindelement augen, jedoch nur dann, wenn es ein Attribut farbe mit dem Wert blau hat.
augen[@farbe='blau'] | verkürzt | adressiert das Kindelement augen, jedoch nur dann, wenn es ein Attribut farbe mit dem Wert blau hat.
child::augen[attribute::farbe and attribute::sehstaerke] | ausführlich | adressiert das Kindelement augen, jedoch nur dann, wenn es sowohl ein Attribut farbe als auch ein Attribut sehstaerke hat (egal mit welchen zugewiesenen Werten).
augen[@farbe and @sehstaerke] | verkürzt | adressiert das Kindelement augen, jedoch nur dann, wenn es sowohl ein Attribut farbe als auch ein Attribut sehstaerke hat (egal mit welchen zugewiesenen Werten).
/child::*[self::inhaltsverzeichnis or self::stichwortverzeichnis] | ausführlich | adressiert in einem Buch absolut alle Kindelemente unterhalb der Wurzel, jedoch nur solche, die als Elementnamen inhaltsverzeichnis oder stichwortverzeichnis haben.
. | verkürzt | adressiert den aktuellen Knoten.
.. | verkürzt | adressiert den Elternknoten des aktuellen Knotens.
kapitel//absatz | verkürzt | adressiert alle Elemente vom Typ absatz, die aus Sicht eines aktuellen Knotens unterhalb von Elementen vom Typ kapitel liegen. Die Syntax // wird auch als recursive descent operator bezeichnet. //X bezeichnet das gleiche wie /descendant-or-self::node()/X.
buch//kapitel[position() < 5] | verkürzt | adressiert die ersten vier Kindelemente des Typs kapitel innerhalb eines Elements vom Typ buch.

XPath 1.0 XPath-Operatoren

XPath bietet eine Reihe von Operatoren an, die es erlauben, Werte zu vergleichen, Berechnungen durchzuführen, oder Ausdrücke zu bewerten. Solche Operatoren können in Attributen bestimmter Seite XSLT-Elemente vorkommen. Dort helfen sie, Bedingungen zu formulieren, Elementpositionen zu berechnen und anderes mehr. XPath kennt folgende Operatoren:

Operator | Bedeutung
+ | Addition
- | Subtraktion
* | Multiplikation - jedoch nur, wenn vor dem Operator keines der folgenden Zeichen bzw. keine der folgenden Zeichenfolgen steht: @ :: ( [ ) ,
= | gleich (Vergleich zweier Werte)
!= | ungleich (Vergleich zweier Werte)
< bzw. &lt; | kleiner als (Vergleich zweier Werte). Maskierung innerhalb von XSLT erforderlich.
> bzw. &gt; | größer als (Vergleich zweier Werte). Maskierung innerhalb von XSLT zu empfehlen.
<= bzw. &lt;= | kleiner als oder gleich (Vergleich zweier Werte). Maskierung innerhalb von XSLT erforderlich.
>= bzw. &gt;= | größer als oder gleich (Vergleich zweier Werte). Maskierung innerhalb von XSLT zu empfehlen.
and | logische Und-Verknüpfung (beide Ausdrücke)
or | logische Oder-Verknüpfung (einer von beiden Ausdrücken)
div | Fließkommateilung
mod | Rest der Fließkommateilung

nach oben
weiter | Seite XPath-Funktionen
zurück | Seite XSLT-Elemente
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Darstellung von XML-Daten

© 2007 Seite Impressum


SELFHTML: XML / Darstellung von XML-Daten / XPath-Funktionen

SELFHTML

XPath-Funktionen
Informationsseite

nach unten Hinweise zu den XPath-Funktionen
nach unten boolean() (Argument als wahr oder falsch bewerten)
nach unten ceiling() (Zahl aufrunden)
nach unten concat() (Zeichenketten zu einer zusammenfassen)
nach unten contains() (auf bestimmte Teilzeichenkette überprüfen)
nach unten count() (Anzahl Knoten in einem Knoten-Set ermitteln)
nach unten current() (aktuellen Knoten ermitteln)
nach unten document() (anderes XML-Dokument aufrufen)
nach unten element-available() (Verfügbarkeit eines XSLT-Elements überprüfen)
nach unten false() (booleschen Wert für "falsch" erzeugen)
nach unten floor() (Zahl abrunden)
nach unten format-number() (Zahl in Zeichenkette umwandeln)
nach unten function-available() (Verfügbarkeit einer XPath-Funktion überprüfen)
nach unten generate-id() (eindeutigen Bezeichner für ein Element generieren)
nach unten id() (Element mit bestimmtem Bezeichner auswählen)
nach unten key() (Elemente mit Hilfe eines Schlüsselwerts auswählen)
nach unten lang() (Element auf bestimmten Sprachcode überprüfen)
nach unten last() (Positionsnummer des letzten Knotens einer Reihe ermitteln)
nach unten local-name() (lokalen Namen eines Knoten-Sets ermitteln)
nach unten name() (Namen eines Knoten-Sets ermitteln)
nach unten namespace-uri() (Namensraum eines Elements ermitteln)
nach unten normalize-space() (Leerzeichen am Anfang und Ende einer Zeichenkette entfernen)
nach unten not() (Argument verneinen)
nach unten number() (Argument in eine Zahl umwandeln)
nach unten position() (Positionsnummer des aktuellen Knotens ermitteln)
nach unten round() (kaufmännisch auf- oder abrunden)
nach unten starts-with() (Überprüfen, ob Zeichenkette mit bestimmter Teilzeichenkette beginnt)
nach unten string() (Argument in Zeichenkette umwandeln)
nach unten string-length() (Anzahl Zeichen einer Zeichenkette ermitteln)
nach unten substring() (Teilzeichenkette aus Zeichenkette extrahieren)
nach unten substring-after() (Zeichenkette ab einer Position mit Teilzeichenkette ermitteln)
nach unten substring-before() (Zeichenkette vor einer Position mit Teilzeichenkette ermitteln)
nach unten sum() (Summe von Zahlenwerten ermitteln)
nach unten system-property() (Systemeigenschaften ermitteln)
nach unten translate() (Suchen und Ersetzen von Zeichen in einer Zeichenkette)
nach unten true() (booleschen Wert für "wahr" erzeugen)
nach unten unparsed-entity-uri() (ungeparste Einträge der DTD ermitteln)
nach unten

Hinweise zu den XPath-Funktionen

Funktionen in XPath haben die Aufgabe, die Übersetzung der XML-Ausgangsdaten in den Ergebnisbaum (zum Beispiel nach HTML) genauer zu kontrollieren und dabei zusätzliche Features zur Verfügung zu stellen. Sie sind für den Einsatz innerhalb von XSLT-Stylesheets gedacht. Die einzelnen XPath-Funktionen erfüllen einen bestimmten Zweck (zum Beispiel das Extrahieren einer Teilzeichenkette aus einer Zeichenkette) und liefern im Normalfall einen Wert zurück (zum Beispiel die extrahierte Teilzeichenkette).

Die Funktionen bestehen aus einem Funktionsnamen, gefolgt von runden Klammern, in denen so genannte Argumente stehen können. Argumente werden benötigt, damit eine Funktion ihre Aufgabe erfüllen kann. So muss beispielsweise der Funktion, die aus einer Zeichenkette eine Teilzeichenkette extrahiert, mitgeteilt werden, aus welcher Zeichenkette sie welchen Teil extrahieren soll.
Bei der Beschreibung der Funktionen in diesem Abschnitt wird für jede Funktion beschrieben, ob sie Argumente erwartet, und wenn ja, welche. Wenn mehrere Argumente erforderlich sind, werden die einzelnen Argumente durch Komma getrennt. Wird als Argument eine Zeichenkette notiert, muss diese in Anführungszeichen stehen. Da XPath-Funktionen jedoch meistens innerhalb von Wertzuweisungen an Attribute von XSLT-Elementen vorkommen, die selbst schon in Anführungszeichen stehen, müssen Sie andere Anführungszeichen benutzen. Wenn die Wertzuweisung an das XSLT-Element beispielsweise in doppelten Anführungszeichen steht, muss eine Zeichenkette, die innerhalb davon einer XPath-Funktion übergeben wird, in einfachen Anführungszeichen (Hochkommata) stehen, also z.B. so: <xsl:value-of select="document('datei2.xml')" />. Zahlen und Namen von Elementen der XML-Daten können dagegen ohne Anführungszeichen übergeben werden.

Da die Funktionen einen Wert zurückgeben, werden sie innerhalb von XSLT normalerweise an den Stellen verwendet, wo Attribute Wertzuweisungen erhalten. So könnte beispielsweise das XSLT-Element Seite value-of in der folgenden Form notiert werden:
<xsl:value-of select="last()" />
Dabei wird also dem select-Attribut ein Wert zugewiesen, allerdings kein fester Wert, sondern ein dynamisch ermittelter. In diesem Fall wird er von der Funktion nach unten last() ermittelt.

Generell besteht keine Gewähr, dass jeder XSL-Prozessor, also die XSL interpretierende Software, alle die hier aufgelisteten und zum Standard gehörenden XPath-Funktionen kennt oder in vollem Umfang verarbeitet.

Bei den Beschreibungen der Funktionen ist häufig von Knoten und Knotentypen die Rede. Diese Begriffe werden im Abschnitt Seite Knoten und Knoten-Sets in der Baumstruktur einführend erläutert. Vertiefende Informationen dazu stehen im Abschnitt über Seite XPath-Syntax.

XPath 1.0 boolean() (Argument als wahr oder falsch bewerten)

Ermittelt, ob ein Ausdruck wahr oder falsch ist.

Erwartet folgende Argumente:

[Ausdruck] irgendein mit XSL realisierbarer Ausdruck, der sich als wahr oder falsch bewerten lässt. Es kann sich z.B. um eine Vergleichsoperation handeln, aber auch um den Test auf Vorhandensein eines Knotens.

Liefert true (wahr) oder false (falsch) zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="name">
 <xsl:choose>
  <xsl:when test="boolean(vorname) != boolean(nachname)">
   <xsl:message>Es müssen entweder Vor- und Nachname,
    oder überhaupt kein Name angegeben werden!</xsl:message>
  </xsl:when>
  <xsl:otherwise>
   <xsl:apply-templates select="vorname">
   <xsl:apply-templates select="nachname">
  </xsl:otherwise>
 </xsl:choose>
</xsl:template>

Erläuterung:

Im Beispiel wird ein Template für ein XML-Element namens name definiert. Es wird angenommen, dass dieses Element zwei untergeordnete Elemente vorname und nachname enthalten muss. Im Beispiel-Stylesheet wird mit <xsl:when test="boolean(vorname) != boolean(nachname)"> abgefragt, ob tatsächlich beide untergeordneten Elemente vorhanden sind. Ist das nicht der Fall, wird eine entsprechende Meldung ausgegeben. Andernfalls wird der xsl:otherwise-Zweig ausgeführt, der die Templates zum Übersetzen der Unterelemente aufruft.

XPath 1.0 ceiling() (Zahl aufrunden)

Rundet eine Bruchzahl zur nächsthöheren Ganzzahl auf. Die Zahl 5.7234 wird auf 6 aufgerundet, aber 0.00001 wird auch auf 1 aufgerundet. Wichtig ist, dass "Kommazahlen" den Punkt als Dezimalzeichen haben. Andernfalls werden sie als ungültige Zahlen (NaN - not a number) interpretiert.

Erwartet folgende Argumente:

[Zahl] Die aufzurundende Zahl. Es kann sich auch um den Inhalt eines Knotens oder den einer Variablen handeln. Dabei wird der Wert intern zunächst als Zahl umgewandelt, und zwar so, als würde die Funktion nach unten number() angewendet.

Liefert die nächsthöhere Ganzzahl zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:value-of select="ceiling(betrag)" /><xsl:text>.-</xsl:text>

Erläuterung:

Im Beispiel wird von einem XML-Element namens betrag angenommen, dass es einen "krummen" Wert enthält, der auf den nächsthöheren Euro-Ganzzahlwert aufgerundet werden soll. Dazu wird beim Auswählen des Inhalts von betrag mit Seite xsl:value-of im select-Attribut die Funktion ceiling() aufgerufen. Sie bewirkt, dass der Elementinhalt aufgerundet wird, bevor er in den Ergebnisbaum der Datenausgabe übernommen wird.

XPath 1.0 concat() (Zeichenketten zu einer zusammenfassen)

Hängt mehrere Zeichenketten aneinander.

Erwartet folgende Argumente:

[Zeichenkette], [Zeichenkette], ... Hängt alle Zeichenkette in der angegebenen Reihenfolge aneinander. Es kann sich direkt um Text handeln, aber auch um den Inhalt eines Knotens oder den Wert einer Variablen. Die Zeichenketten werden durch Kommata getrennt.

Liefert die zusammengesetzte Zeichenkette zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:value-of select="concat(vorname, ' heißt mit Zuname ', zuname)"/>

Erläuterung:

Im Beispiel wird angenommen, dass es zwei verfügbare XML-Elemente vorname und zuname gibt. Bei der Übersetzung in den Ergebnisbaum soll daraus ein Satz vom Typ Heidi heißt mit Zuname Finkenzeller erzeugt werden. Dazu wird beim Auswählen des Inhalts mit Seite xsl:value-of im select-Attribut die Funktion concat() angewendet. Sie bekommt drei Zeichenketten übergeben: den Inhalt des Elements vorname, die feste Zeichenkette heißt mit Zuname, und den Inhalt des Elements zuname. Beachten Sie, dass Variablennamen, Elementnamen (oder Elementpfade nach Seite XPath-Syntax) direkt angegeben werden, feste Zeichenketten dagegen in Anführungszeichen eingeschlossen werden. Dabei muss es sich um andere Anführungszeichen handeln als bei dem XSLT-Attribut, innerhalb dessen die Funktion steht. Wenn die Funktion, wie beim Beispiel im select-Attribut, in dessen doppelten Anführungszeichen "..." vorkommt, müssen einfache Anführungszeichen verwendet werden, so wie im Beispiel ' heißt mit Zuname '.

XPath 1.0 contains() (auf bestimmte Teilzeichenkette überprüfen)

Überprüft, ob in einer Zeichenkette eine bestimmte Teilzeichenkette vorhanden ist.

Erwartet folgende Argumente:

[Zeichenkette] | Die Zeichenkette, in der überprüft werden soll.
[Teilzeichenkette] | Die Teilzeichenkette, auf die hin die Zeichenkette überprüft werden soll.

Liefert true zurück, wenn die Teilzeichenkette vorhanden ist, und false, wenn sie nicht vorhanden ist.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:if test="contains(zuname, 'A')">
  <xsl:value-of select="zuname" />
</xsl:if>

Erläuterung:

Im Beispiel wird mit Seite xsl:if geprüft, ob der Wert eines XML-Elements zuname ein großes A enthält. Wenn ja, wird der Inhalt des Elements ausgegeben. Dazu wird im test-Attribut der xsl:if-Anweisung mit contains(zuname, 'A') in der Zeichenkette, die das Element zuname speichert, nach der Teilzeichenkette A gesucht. Auf diese Weise könnten also beispielsweise nur Zunamen in den Ergebnisbaum einfließen, die mit A beginnen.

XPath 1.0 count() (Anzahl Knoten in einem Knoten-Set ermitteln)

Ermittelt, wieviele Knoten auf der Ebene unterhalb eines Knoten-Sets enthalten sind.

Erwartet folgende Argumente:

[Knoten-Set] Ein Knoten-Set bzw. einen Pfad nach Seite XPath-Syntax, für das die Anzahl der darin enthaltenen Knoten der nächstunteren Ebene bestimmt werden soll.

Liefert die Anzahl der untergeordneten Knoten zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:variable name="anzahl" select="count(//listeneintrag)" />
...
<xsl:template match="liste">
    <xsl:for-each select="listeneintrag">
    <p>
        <xsl:value-of select="position()" />
         <xsl:text>. von </xsl:text>
         <xsl:value-of select="$anzahl" />
         <xsl:text>: </xsl:text>
         <xsl:value-of select="." />
    </p>
    </xsl:for-each>
</xsl:template>

Erläuterung:

Das Beispiel nimmt an, dass es ein XML-Element namens liste gibt, das aus mehreren Unterelementen listeneintrag besteht. Zunächst wird mit Seite xsl:variable eine Variable namens anzahl definiert, in der die Anzahl der Listeneinträge gespeichert wird. Dazu wird im select-Attribut die Funktion count() angewendet. Als Argument wird ihr das Element listeneintrag übergeben. In der Seite for-each-Schleife, die alle Listeneinträge abarbeitet, wird vor dem Text des Listeneintrags jeweils die aktuelle Positionsnummer mit nach unten position() ausgegeben, und dahinter die Gesamtzahl, die in der Variablen anzahl gespeichert ist, also etwa so:
1. von 5: Text des ersten Listeneintrags
2. von 5: Text des zweiten Listeneintrags

XPath 1.0 current() (aktuellen Knoten ermitteln)

Stellt den Bezug zum jeweils aktuellen Knoten her.

Erwartet keine Argumente.

Liefert das Knoten-Set zurück, das den aktuellen Knoten enthält.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:value-of select="current()" />

Erläuterung:

Die Anweisung im Beispiel drückt das gleiche aus wie die üblichere Anweisung:
<xsl:value-of select="." />

Beachten Sie:

current() und . liefern dann das gleiche Ergebnis, wenn current() in einem freistehenden XPath-Ausdruck steht, also z.B. direkt in einem select-Attribut. Wenn Sie current() dagegen in einem Prädikat (steht immer zwischen [...]) anwenden, kann das zurückgelieferte Ergebnis ein anderes sein als das Ergebnis von select=".". Der Grund ist, dass XPath intern zwischen "current node" und "context node" unterscheidet. Ein "current node", also ein aktueller Knoten, ist nur dann gegeben, wenn ein Knoten-Set der Reihe nach abgearbeitet wird. In diesem Fall ist der jeweils bearbeitete Knoten der "current node". Außerhalb einer solchen Serienbearbeitung gibt es jedoch keinen "current node". Einen "context node", wie man ihn durch die Punkt-Syntax (.) ermitteln kann, ist dagegen zu jedem Zeitpunkt gegeben.

XPath 1.0 document() (anderes XML-Dokument aufrufen)

Erlaubt es, XML-Ausgangsdaten aus anderen XML-Dateien als der, in der das Stylesheet eingebunden ist, mit in den Ergebnisbaum zu übernehmen.

Erwartet folgende Argumente:

[URI] | Angabe einer XML-Datei, die mit eingebunden werden soll. Es kann sich um eine relative Adressierung handeln oder um eine absolute Angabe, z.B. http://.... Wird keine andere XML-Datei angegeben, sondern ein Element mit Seite XPath-Syntax adressiert, so wird das Element und gegebenenfalls sein untergeordneter Elementenbaum an dieser Stelle eingebunden.
[Knoten-Set] | (optional) Angabe der Basis innerhalb der eingebundenen Daten, auf das sich relative XPath-Adressierungen beziehen können. Gemeint ist der erste Knoten des Knoten-Sets.

Liefert die ermittelte Elementstruktur der anderen XML-Datei oder des angegebenen Elements ab dem Wurzelelement zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="beispiel">
 <pre>
  <xsl:value-of select="document(./@quelle)" />
 </pre>
</xsl:template>

Erläuterung:

Im Beispiel wird angenommen, dass es ein XML-Element namens beispiel gibt, dass in einem Attribut eine Quellenangabe zu einer XML-Datei enthält, z.B.: <beispiel quelle="../quellen/beispiel03.xml" />. Im Stylesheet wird für die HTML-Ausgabe dieses Elements mit <pre>...</pre> ein Bereich mit präformatiertem Text definiert. Darin wird mit Seite xsl:value-of der Inhalt der Datei ausgegeben, die im Attribut quelle angegeben ist. Um auf die Datei zuzugreifen, wird im select-Attribut die document()-Funktion angewendet. Als Argument wird ihr die Angabe zum Attribut quelle übergeben.

XPath 1.0 element-available() (Verfügbarkeit eines XSLT-Elements überprüfen)

Ermittelt, ob ein XSLT-Element im verwendeten XSLT-Parser verfügbar ist oder nicht. Dient daher als Maßnahme zur Vermeidung von Fehlern.

Erwartet folgende Argumente:

[Elementname] Name eines XSLT-Elements, dessen Verfügbarkeit überprüft werden soll.

Liefert true zurück, wenn das Element verfügbar ist, und false, wenn es nicht verfügbar ist.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:if test="element-available('xsl:number')">
   <xsl:number level="single" count="eintrag" format="1. " />
 </xsl:if>

Erläuterung:

Das Beispiel überprüft mit Hilfe der Seite xsl:if-Anweisung, ob das XSLT-Element Seite xsl:number verfügbar ist. Wenn ja, wird es innerhalb der xsl:if-Anweisung angewendet. Wenn nicht, wird zumindest ein Fehler vermieden.

Beachten Sie:

Dieser Funktion ist auch dann nützlich, wenn es darum geht herauszufinden, ob der XSLT-Prozessor Hersteller-spezifische Erweiterungen kennt, z.B.:
<xsl:when test="element-available('saxon:entity-ref')">...</xsl:when>.
In diesem Beispiel wird abgefragt, ob der Prozessor das Element entity-ref kennt, das der Saxon-Prozessor interpretiert.

XPath 1.0 false() (booleschen Wert für "falsch" erzeugen)

Verneint einen Ausdruck.

Erwartet keine Argumente

Liefert einfach den logischen Wert false zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:variable name="passwortanzeige" select="false()"/>

<xsl:template name="passwort">
 <xsl:choose>
  <xsl:when test="$passwortanzeige">
    <xsl:value-of select="." />
  </xsl:when>
  <xsl:otherwise>
   <xsl:text>[Passwort]</xsl:text>
  </xsl:otherwise>
 </xsl:choose>
</xsl:template>

Erläuterung:

Im Beispiel wird mit Seite xsl:variable eine Variable namens passwortanzeige definiert, deren Wert auf den logischen Wert false gesetzt wird. Verantwortlich dafür ist der Einsatz der Funktion false(), die einfach dem select-Attribut zugewiesen wird und dadurch für das Setzen des Wertes sorgt. Weiterhin zeigt das Beispiel eine Template-Definition für ein Element namens passwort. Innerhalb dieser Template-Definition wird in einer Seite xsl:choose-Konstruktion abgefragt, wie es mit der Passwortanzeige steht. Wenn die Variable $passwortanzeige wahr ist, wird mit <xsl:value-of select="." /> der Wert des passwort-Elements ausgegeben. Andernfalls wird nur die Zeichenkette [Passwort] ausgegeben.

XPath 1.0 floor() (Zahl abrunden)

Rundet eine Bruchzahl zur basierenden Ganzzahl ab. Die Zahl 5.7234 wird auf 5 abgerundet, und 5.99997 wird auch zu 5 abgerundet. Wichtig ist, dass "Kommazahlen" den Punkt als Dezimalzeichen haben. Andernfalls werden sie als ungültige Zahlen (NaN - not a number) interpretiert.

Erwartet folgende Argumente:

[Zahl] Die abzurundende Zahl. Es kann sich auch um den Inhalt eines Knotens oder den Wert einer Variablen handeln. Dabei wird der Wert intern zunächst als Zahl umgewandelt, und zwar so, als würde die Funktion nach unten number() angewendet.

Liefert die basierende Ganzzahl zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="zahl">
 <div style="background-color:yellow"><xsl:value-of select="floor(./@wert)" /></div>
</xsl:template>

Erläuterung:

Das Beispiel nimmt ein XML-Element namens zahl an, das z.B. folgende Ausprägung haben könnte: <zahl wert="63,47" />. In der Template-Definition zur HTML-Ausgabe dieses Elements wird auf das Attribut mit @wert zugegriffen. Dabei wird dieser Attributzugriff jedoch in die Funktion floor() eingebettet, sodass im Falle einer Zahl mit dem Wert 63,47 nur 63 in der HTML-Ausgabe erscheint.

XPath 1.0 format-number() (Zahl in Zeichenkette umwandeln)

Wandelt eine Zahl in eine Zeichenkette um und erlaubt es, die Formatierung der umgewandelten Zahl zu beeinflussen.

Erwartet folgende Argumente:

[Zahl] | Der umzuwandelnde Wert. Es kann sich auch um den Inhalt eines Elements oder den Wert einer Variablen handeln. Dabei wird der Wert intern zunächst als Zahl umgewandelt, und zwar so, als würde die Funktion nach unten number() angewendet.
[Formatregel] | Eine Darstellungs-Syntax für die Formatierung der umgewandelten Zahl. Die Syntax der Formatregel orientiert sich dabei an dem Schema, das in Java 1.1 für die decimal_format-Klasse implementiert ist. Allerdings gibt es keine zwingende Korrelation zwischen der XPath-Syntax und der Java-Implementierung. Folgende Zeichen sind üblich: 0 = eine Ziffer # = eine Ziffer, 0 wird jedoch nicht angezeigt . = Platzhalter für Dezimalpunkt-Trennzeichen , = Platzhalter für ein Gruppierungs-Trennzeichen, z.B. für Tausender ; = zum Trennen von mehreren Formaten - = negatives Vorzeichen als Voreinstellung % = Wert mit 100 multiplizieren und als Prozentwert anzeigen ? = Wert mit 1000 multiplizieren und als Promillewert anzeigen ¤ = Währungssymbol, wird durch das voreingestellte Währungssymbol ersetzt (noch nicht in Java 1.1!). ' = zum Maskieren von format-bedeutenden Zeichen wie 0, #, . usw.
[Name] | (optional) Name eines Formats, das mit Seite xsl:decimal-format definiert wird.

Liefert eine Zeichenkette mit der formatierten Zahl zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="wert">
 <xsl:value-of select="format-number(.,'##0.0%')" />
</xsl:template>

Erläuterung:

Das Beispiel nimmt ein XML-Element namens wert an, für dessen Ausgabe in den HTML-Ergebnisbaum ein Template definiert wird. Dabei wird der Inhalt des Elements wert, angesprochen durch die Funktion nach oben current() als erstes Argument der Funktion format-number() übergeben. Für die Formatierung wird bestimmt, dass es eine bis zu dreistellige Zahl mit einer Nachkommastelle sein kann, die als Prozentwert ausgegeben wird. Durch die Zuweisung dieses Konstrukts an das select-Attribut von Seite xsl:value-of wird bewirkt, dass der Inhalt von wert entsprechend der Formatregel ausgegeben wird.

XPath 1.0 function-available() (Verfügbarkeit einer XPath-Funktion überprüfen)

Ermittelt, ob eine XPath-Funktion im verwendeten XSLT-Parser verfügbar ist oder nicht. Dient daher als Maßnahme zur Vermeidung von Fehlern.

Erwartet folgende Argumente:

[Funktionsname] Name einer XPath-Funktion, deren Verfügbarkeit überprüft werden soll.

Liefert true zurück, wenn die Funktion verfügbar ist, und false, wenn sie nicht verfügbar ist.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:choose>
  <xsl:when test="function-available('normalize-space')">
    <xsl:value-of select="normalize-space(.)" />
  </xsl:when>
  <xsl:otherwise>
   <xsl:value-of select="." />
  </xsl:otherwise>
</xsl:choose>

Erläuterung:

Das Beispiel überprüft mit Hilfe einer Seite xsl:choose-Konstruktion, ob die XPath-Funktion nach unten normalize-space() verfügbar ist. Wenn ja, wird sie innerhalb der Seite xsl:value-of-Anweisung angewendet, um bei der Ausgabe des aktuellen Elements, das mit . angegeben wird, alle überflüssigen Leerraumzeichen am Anfang und am Ende zu entfernen. Andernfalls, wenn die Funktion nicht verfügbar ist, wird der Inhalt des aktuellen Elements ohne weitere Vorbehandlung ausgegeben.

XPath 1.0 generate-id() (eindeutigen Bezeichner für ein Element generieren)

Erzeugt im Ergebnisbaum automatisch einen eindeutigen Bezeichner. Der Bezeichner muss nicht bei jedem Generierungsvorgang der gleiche sein (könnte also zum Beispiel durch zeitabhängige Algorithmen erzeugt sein), aber er ist in jedem Fall innerhalb des einzelnen Dokuments eindeutig. Der generierte Bezeichner entspricht in jedem Fall den Konventionen für Bezeichner in XML.

Erwartet folgende Argumente:

[Knoten-Set] (optional) Knoten-Set bzw. einen Pfad nach Seite XPath-Syntax, der eine ID erhalten soll.

Liefert eine Zeichenkette mit dem generierten Bezeichner zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="absatz">
<p><a name="{generate-id(.)}">
 <xsl:value-of select="." />
</a></p>
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein häufiger vorkommendes XML-Element namens absatz. Jedes dieser Elemente erhält bei der Übersetzung in ein HTML-Konstrukt einen Anker, definiert mit <a name=>...</a>. Der Wert, der jeweils beim Attribut name vergeben wird, wird automatisch erzeugt, und zwar durch Anwendung der Funktion generate-id(). Als Argument wird das aktuelle Element (.) übergeben. Wichtig sind die geschweiften Klammern, in denen die Funktion bei der Wertzuweisung an name zusätzlich steht. Dies ist nötig, weil die Funktion in diesem Beispiel nicht in der Wertzuweisung an ein Attribut einer XSLT-Anweisung steht, sondern in einer Wertzuweisung an ein Attribut eines Elements des Ergebnisbaums - im Beispiel an das name-Attribut des a-Elements der Ergebnissprache HTML.

Beachten Sie:

generate-id() kann man auch dazu verwenden, um herauszufinden, ob Knoten identisch sind. Beispiel:
<xsl:if test="a = b"> prüft nur, ob a und b den gleichen Inhalt haben.
<xsl:if test="generate-id(a) = generate-id(b)"> prüft dagegen, ob es wahr ist, dass beide Knoten identisch sind.

XPath 1.0 id() (Element mit bestimmtem Bezeichner auswählen)

Wählt ein Element aufgrund einer ID aus. Dazu muss das Element ein Seite Attribut mit Identifikationswert besitzen, das in der zugehörigen DTD entsprechend definiert sein muss. Da die Wertzuweisungen an solche Attribute dokumentweit eindeutig sein müssen, eignen sie sich hervorragend, um das Element auszuwählen.

Erwartet folgende Argumente:

[ID-Wert] Der ID-Wert desjenigen Elements, das ausgewählt werden soll.

Liefert das Element oder mehrere Elemente zurück, deren ID-Wert ausgewählt wurde.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="name">
<li><xsl:value-of select="id('p01')" /><xsl:value-of select="." /></li>
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein Element namens name. Darin wird in einem HTML Aufzählungspunkt ein fixes Label (denkbar wäre z.B. ein Wert wie Name, Vorname: ) und dahinter der aktuelle Wert des Elements name mit <xsl:value-of select="." /> ausgegeben. Der Wert des Labels wird ebenfalls mit einer xsl:value-of-Anweisung ermittelt. Dabei ist im select-Attribut die Funktion id() notiert, die auf ein Element mit dem Identifikationswert p01 zugreift. Dieses Element könnte in den XML-Daten beispielsweise so notiert sein:
<prefix x="p01">Name, Vorname: </prefix>
Dabei wäre das Attribut x in der zugehörigen DTD als Attribut mit Identifikationswert definiert.

XPath 1.0 key() (Elemente mit Hilfe eines Schlüsselwerts auswählen)

Wählt einen Knoten aus, der für einen benannten Schlüssel einen bestimmten Wert besitzt. Sinnvoll, um etwa von allen Elementen nur solche auszuwählen, die aufgrund von Inhalt oder Wertzuweisungen an Attribute bestimmte Kriterien erfüllen.

Erwartet folgende Argumente:

[Name] | Name eines Schlüssels. Der Schlüssel selbst muss zuvor mit Hilfe der Seite xsl:key-Anweisung definiert worden sein und im name-Attribut der Anweisung den hier angegebenen Namen erhalten haben.
[Wert] | Der Wert, der zur Eingrenzung auszuwählender Elemente dient. Nur Elemente, die dem Schlüssel entsprechen und dabei diesen Wert besitzen, werden ausgewählt.

Liefert das erste Element zurück, das den Auswahlkriterien entspricht.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:key name="k3" match="datensatz" use="handelsklasse" />

<xsl:template match="/">
 <html><head><body>
  <xsl:for-each select="key('k3','III')">
    <xsl:apply-templates />
  </xsl:for-each>
 </body></html>
</xsl:template>

Erläuterung:

Im Beispiel wird mit Hilfe der xsl:key-Anweisung für ein Element namens datensatz ein Schlüssel definiert, der den Namen k3 erhält und sich auf den Inhalt eines zu datensatz untergeordneten Elements namens handelsklasse bezieht. Es wird angenommen, dass die XML-Daten unterhalb ihres Wurzelelements aus vielen Elementen vom Typ datensatz bestehen. Durch Anwendung der Seite xsl:for-each-Anweisung in Verbindung mit der Funktion key() im select-Attribut werden nur solche Datensätze ausgewählt, die im untergeordneten Element handelsklasse den Wert III enthalten. Für diesen Fall werden mit Seite xsl:apply-templates untergeordnete Template-Definitionen aufgerufen.

XPath 1.0 lang() (Element auf bestimmten Sprachcode überprüfen)

Überprüft, ob ein Element einen bestimmten Sprachcode verwendet. Voraussetzung ist, dass in dem Element das XML-Attribut xml:lang notiert ist, also beispielsweise:
<description xml:lang="de">die Beschreibung zu irgendetwas</description>
In der DTD wäre folgende zugehörige Definition erforderlich:
<!ATTLIST description  xml:lang NMTOKEN #IMPLIED>
Die Angaben zum Attribut xml:lang können Seite Sprachenkürzel sein.

Erwartet folgende Argumente:

[Zeichenkette] für den Ländercode, auf den hin überprüft werden soll (z.B. de).

Liefert true zurück, wenn das Element diesen Ländercode in seinem xml:lang-Attribut angibt, und false, wenn kein xml:lang-Attribut vorhanden ist, oder wenn es einen anderen als den im Argument übergebenen Wert hat.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="description">
 <xsl:choose>
  <xsl:when test="lang('de')">
   <h4><xsl:text>Beschreibung:</xsl:text></h4>
  </xsl:when>
  <xsl:otherwise>
   <h4><xsl:text>Description:</xsl:text></h4>
  </xsl:otherwise>
  <p><xsl:value-of select="." /></p>
 </xsl:choose>
</xsl:template>

Erläuterung:

Das Beispiel sorgt dafür, dass einem Element namens description im HTML-Ergebnisbaum eine h4-Überschrift vorangestellt wird. Dabei wird mit Hilfe der Seite xsl:choose-Anweisung im when-Zweig mit Hilfe der Funktion lang() überprüft, ob das description-Element xml:lang="de" als Attribut enthält. Wenn ja, wird als Text der h4-Überschrift das deutsche Wort Beschreibung ausgegeben, andernfalls das englische Wort Description. Am Ende wird dann noch mit Seite xsl:value-of der Inhalt des description-Elements ausgegeben.

XPath 1.0 last() (Positionsnummer des letzten Knotens einer Reihe ermitteln)

Ermittelt die Positionsnummer des letzten von mehreren Knoten eines Knoten-Sets.

Erwartet keine Argumente.

Liefert die Positionsnummer des letzten Knotens zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="zahl">
 <xsl:value-of select="." />
 <xsl:if test="position() != last()">
  <xsl:text>, </xsl:text>
 </xsl:if>
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein Element namens zahl. Im Beispiel wird angenommen, dass mehrere solcher Elemente nacheinander innerhalb eines gemeinsamen übergeordneten Elements notiert sind, also beispielsweise die einzelnen Zahlen innerhalb einer Lottozahlenreihe. Bei jeder Anwendung des Templates wird zunächst mit Seite xsl:value-of die aktuelle Zahl ausgegeben. Danach soll hinter allen außer der letzten Zahl ein Komma ausgegeben werden, sodass eine Ausgabe wie z.B. 3,15,28,29,33,43 entsteht. Dazu wird mit Seite xsl:if abgefragt, ob die Positionsnummer des aktuellen Elements innerhalb der Reihe (ermittelt mit nach unten position()) ungleich (!=) der Positionsnummer des letzten Elements (ermittelt mit der last()-Funktion) ist. Ist dies der Fall, wird ein Komma ausgegeben.

XPath 1.0 local-name() (lokalen Namen eines Knoten-Sets ermitteln)

Ermittelt aus einem Knotennamen mit Namensraumangabe den lokalen Namensteil - aus einem Elementnamen wie xhtml:blockquote würde also blockquote ermittelt.

Erwartet folgende Argumente:

[Knoten-Set] (optional) Ein Knoten-Set bzw. einen Pfad nach Seite XPath-Syntax, dessen lokaler Name ermittelt werden soll. Fehlt die Angabe des Arguments, wird die Funktion auf das jeweils aktuelle Element angewendet.

Liefert den lokalen Elementnamen zurück, sofern der Elementname aus einer Namensraumangabe und dem lokalen Elementnamen besteht. Ansonsten wird eine leere Zeichenkette zurückgeliefert.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="autor:*">
 <div>
  <p>Name des Knotens: <b><xsl:value-of select="name(.)" /></b></p>
  <p>local-name:<b><xsl:value-of select="local-name(.)" /></b></p>
  <p>Inhalt:<b><xsl:apply-templates /></b></p>
 </div>
</xsl:template>

Erläuterung:

Der Beispielausschnitt zeigt eine Template-Definition für angenommene Elemente, die aus dem Namensraum autor stammen. In XML wären das beispielsweise Elemente, die in der Form <autor:vorname>...</autor:vorname> notiert sind. Das Template ermittelt mit nach unten name(.) den vollständigen Namen des aktuellen Knotens, also z.B. autor:vorname, und mit local-name(.) den lokalen Namensteil, also z.B. vorname. Anschließend werden mit Seite xsl:apply-templates untergeordnete Template-Definitionen angewendet.

XPath 1.0 name() (Namen eines Knoten-Sets ermitteln)

Ermittelt den vollständigen Namen eines Knoten-Sets, gegebenenfalls auch mit XML-Namensraumangabe.

Erwartet folgende Argumente:

[Knoten-Set] (optional) Ein Knoten-Set bzw. einen Pfad nach Seite XPath-Syntax, dessen vollständiger Name ermittelt werden soll. Fehlt die Angabe des Arguments, wird die Funktion auf das jeweils aktuelle Element angewendet.

Liefert den Namen des ausgewählten Knoten-Sets zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template name="Kurzbeschreibung">
 <b><xsl:value-of select="name()" /><xsl:text>: </xsl:text></b><xsl:value-of select="." />
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein XML-Element namens Kurzbeschreibung. Darin wird definiert, dass zuerst der Name des Elements ausgegeben wird, also Kurzbeschreibung, dann ein Doppelpunkt, und dann der Inhalt des Elements. Die Ausgabe des Elementnamens wird erreicht durch die Seite xsl:value-of-Anweisung, die im select-Attribut als Wert die Funktion name() zugewiesen bekommt.

XPath 1.0 namespace-uri() (Namensraum eines Elements ermitteln)

Ermittelt den URI für die DTD zum verwendeten XML-Namensraum. Es handelt sich normalerweise um jene Angaben, die bei der Seite xsl:stylesheet-Anweisung im xmlns:-Attribut gemacht wurden. Voraussetzung dafür, dass ein Wert zurückgeliefert wird, ist, dass ein Element eine Namensraumangabe verwendet, also z.B. xsl:template oder xhtml:div.

Erwartet folgende Argumente:

[Knoten-Set] (optional) Ein Knoten-Set bzw. einen Pfad nach Seite XPath-Syntax, dessen URI der DTD für den XSL-Namensraum ermittelt werden soll. Fehlt die Angabe des Arguments, wird die Funktion auf das jeweils aktuelle Element angewendet.

Liefert den URI zurück, die für den zugehörigen Namensraum des Elements zurückgegeben wurde.

Beispielauszug aus einem XSL-Stylesheet:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <html><head></head><body>
  <b><xsl:text>XSL-URI dieses Stylesheets: </xsl:text></b>
     <xsl:value-of select="namespace-uri(document('')/*)" />
 </body></html>
</xsl:template>

</xsl:stylesheet>

Erläuterung:

Das Beispiel zeigt ein vollständiges XSLT-Stylesheet. Im einleitenden stylesheet-Tag wird wie üblich mit xmlns:xsl="http://www.w3.org/1999/XSL/Transform" der URI der DTD für den XSL-Namensraum angegeben. Im weiteren Verlauf des Stylesheets wird ein Template für das Wurzelelement definiert. Darin wird aber einfach nur der URI des XSL-Namensraums für dieses Stylesheet ausgegeben. Dazu wird bei der Seite xsl:value-of-Anweisung im select-Attribut als Wert die Funktion namespace-uri() übergeben. Die Ausgabe im Beispiel würde lauten:
XSL-URI dieses Stylesheets: http://www.w3.org/1999/XSL/Transform

Im Beispiel wird der Funktion namespace-uri() als Argument document('')/* übergeben. Das ist folgendermaßen zu verstehen: es soll das Dokument-Element ermittelt werden, was am einfachsten durch die Funktion nach oben document('') (mit dem Leerstring als Parameter) bewerkstelligt wird. Mit dem daran anschließenden /* wird, da sich der gesamte Ausdruck innerhalb eines Aufrufs von namespace-uri() befindet, der Namensraum-URI für alle Elemente innerhalb dieses Dokument-Elements ermittelt.

XPath 1.0 normalize-space() (Leerzeichen am Anfang und Ende einer Zeichenkette entfernen)

Entfernt am Anfang und am Ende der übergebenen Zeichenkette die Leerraumzeichen und ersetzt mehrere aufeinanderfolgende Leerraumzeichen in der Zeichenkette durch ein einziges Leerzeichen (#x20). Leerraumzeichen sind die Zeichen mit den Hexadezimalwerten #x20 (einfaches Leerzeichen), #x9 (Tabulator-Zeichen), #xD (Wagenrücklaufzeichen) und #xA (Zeilenvorschub-Zeichen).

Erwartet folgende Argumente:

[Zeichenkette] (optional) Die Zeichenkette, die behandelt werden soll. Fehlt das Argument, wird die Funktion auf den Inhaltsknoten des aktuellen Knotens angewendet, bei einem Element <name>...</name> beispielsweise auf dessen Inhalt, also das, was hier durch die drei Pünktchen markiert ist.

Liefert die behandelte Zeichenkette wieder zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="augenfarbe">
  <tr>
  <td><xsl:text>Augenfarbe</xsl:text></td>
  <td><xsl:value-of select="normalize-space()" /></td>
  </tr>
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein XML-Element namens augenfarbe. Darin wird eine HTML-Tabellenzeile konstruiert. In der ersten Spalte steht der fixe Text Augenfarbe, und in der zweiten Spalte wird der Wert des Elements ausgegeben. Dabei werden jedoch zuvor führende und abschließende Leerraumzeichen, die z.B. durch unachtsames Editieren oder Behandlung durch andere Programme entstanden sein könnten, entfernt. Um das zu erreichen, wird nicht einfach <xsl:value-of select="." /> notiert, sondern <xsl:value-of select="normalize-space()" />.

XPath 1.0 not() (Argument verneinen)

Verneint das übergebene Argument und liefert dessen gegenteiliges Ergebnis zurück.

Erwartet folgende Argumente:

[Bedingung] Es kann sich um eine Vergleichsoperation handeln, aber auch um eine andere Funktion, die als Rückgabewert entweder true oder false liefert.

Liefert true zurück, wenn die als Argument übergebene Bedingung false ergibt, und false, wenn die Bedingung true ergibt.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="geburtsjahr">
 <xsl:if test="not(. &gt; '1980')">
  <xsl:value-of select="." />
 </xsl:if>
</xsl:template>

Erläuterung:

Das Beispiel zeigt die Template-Definition eines XML-Elements namens geburtsjahr. Das Geburtsjahr soll nur dann ausgegeben werden, wenn der aktuelle Wert nicht größer ist als 1980. Dazu wird mit Hilfe der Seite xsl:if-Anweisung eine Bedingung formuliert. Im test-Attribut, das die Bedingung enthält, wird mit . &gt; '1980' die Bedingung "aktueller Wert größer 1980" formuliert. Der gesamte Ausdruck wird jedoch der Funktion not() als Argument übergeben, sodass die Bedingung umgekehrt wird und lautet: "aktueller Wert nicht größer 1980". Dies ist übrigens das gleiche, wie wenn als Bedingung notiert würde: <xsl:if test=". &lt;='1980')">.

XPath 1.0 number() (Argument in eine Zahl umwandeln)

Versucht, eine übergebene Zeichenkette als Zahl zu interpretieren und gibt die ermittelte Zahl zurück. Wenn beispielsweise "31" übergeben wird, wird 31 zurückgeliefert. Wird "xyz" übergeben, wird NaN (not a number) zurückgeliefert. Bei Übergabe von "3xy" wird 3 zurückgeliefert. Und bei Übergabe von booleschen Werten, also true oder false, wird 0 für false und 1 für true zurückgeliefert. Führende und abschließende Leerraumzeichen der übergebenen Zeichenkette werden ignoriert.

Erwartet folgende Argumente:

[Zeichenkette bzw. Wert] (optional) Es kann sich z.B. um den Inhalt eines Elements oder den Wert einer Variablen handeln, oder um den Rückgabewert einer anderen Funktion. Fehlt das Argument, wird die Funktion auf den aktuellen Knoteninhalt angewendet, z.B. auf den Inhalt eines Elements.

Liefert die ermittelte Zahl zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="preis">
 <xsl:value-of select="number()" />
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein XML-Element namens preis. Das Template gibt den Wert des Elements aus, jedoch wird dabei versucht, den Wert numerisch zu interpretieren. Dazu wird im select-Attribut der Seite xsl:value-of-Anweisung die Funktion number() angewendet. Da number() kein Argument übergeben wird, bezieht sich die Funktion auf den Wert des aktuellen Elements preis.

XPath 1.0 position() (Positionsnummer des aktuellen Knotens ermitteln)

Ermittelt, der wievielte Knoten ein aktueller Knoten in einem Knoten-Set ist. Bei einem Element namens liste mit beispielsweise 7 untergeordneten Elementen namens listeneintrag hat das zweite dieser Elemente in Bezug auf liste die Positionsnummer 2.

Erwartet keine Argumente.

Liefert die Ordnungszahl des aktuellen Knotens zurück. Beim ersten Knoten 1, beim zweiten 2 usw.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:variable name="anzahl" select="count(//listeneintrag)" />
...
<xsl:template match="liste">
  <xsl:for-each select="listeneintrag">
  <p>
    <xsl:value-of select="position()" />
    <xsl:text>. von </xsl:text>
    <xsl:value-of select="$anzahl" />
    <xsl:text>: </xsl:text>
    <xsl:value-of select="." />
  </p>
  </xsl:for-each>
</xsl:template>

Erläuterung:

Das Beispiel nimmt an, dass es ein XML-Element namens liste gibt, das aus mehreren Unterelementen listeneintrag besteht. Zunächst wird mit Seite xsl:variable eine Variable namens anzahl definiert, in der die Anzahl der Listeneinträge gespeichert wird. Dazu wird im select-Attribut die Funktion nach oben count() angewendet. Als Argument wird ihr das Element listeneintrag übergeben. In der Seite for-each-Schleife, die alle Listeneinträge abarbeitet, wird vor dem Text des Listeneintrags jeweils die aktuelle Positionsnummer mit position() ausgegeben, und dahinter die Gesamtzahl, die in der Variablen anzahl gespeichert ist, also etwa so:
1. von 5: Text des ersten Listeneintrags
2. von 5: Text des zweiten Listeneintrags

Beachten Sie:

<xsl:value-of select="listeneintrag[position()=1]" /> kann auch so notiert werden:
<xsl:value-of select="listeneintrag[1]" />

<xsl:value-of select="listeneintrag[position()=last()]" /> kann auch so notiert werden:
<xsl:value-of select="listeneintrag[last()]" />

<xsl:if test="position()=1"> ist etwas anderes als <xsl:if test="1">! Im ersten Fall wird geprüft, ob der aktuell bearbeitete Knoten der erste ist, im zweiten Fall wird geprüft, ob der aktuelle Kontext logisch gesehen wahr ist.

XPath 1.0 round() (kaufmännisch auf- oder abrunden)

Rundet eine Bruchzahl zur nächstgelegenen Ganzzahl auf. Bei Bruchwerten kleiner als [Wert],5 wird abgerundet, bei Bruchwerten größer gleich [Wert],5 aufgerundet. Die Zahl 5,49 wird also auf 5 abgerundet, und 5,5 auf 6 aufgerundet.

Erwartet folgende Argumente:

[Zahl] Die zu rundende Zahl. Es kann sich auch um den Inhalt eines Knotens oder den einer Variablen handeln. Dabei wird der Wert intern zunächst als Zahl umgewandelt, und zwar so, als würde die Funktion nach oben number() angewendet.

Liefert die Ganzzahl zurück, auf die auf- oder abgerundet wurde.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:value-of select="round(betrag)" /><xsl:text >.-</xsl:text>

Erläuterung:

Im Beispiel wird von einem XML-Element namens betrag angenommen, dass es einen "krummen" Wert enthält, der kaufmännisch gerundet werden soll. Dazu wird beim Auswählen des Inhalts von betrag mit Seite xsl:value-of im select-Attribut die Funktion round() aufgerufen. Sie bewirkt, dass der Elementinhalt aufgerundet wird, bevor er in den Ergebnisbaum der Datenausgabe übernommen wird.

XPath 1.0 starts-with() (Überprüfen, ob Zeichenkette mit bestimmter Teilzeichenkette beginnt)

Findet heraus, ob am Beginn einer Zeichenkette eine bestimmte Teilzeichenkette vorkommt.

Erwartet folgende Argumente:

[Zeichenkette] | Zeichenkette, die durchsucht werden soll. Es kann sich z.B. um den Inhalt eines Elements oder den Wert einer Variablen handeln.
[Teilzeichenkette] | Diejenige Zeichenfolge, nach der am Beginn der durchsuchten Zeichenkette gesucht wird. Es kann sich direkt um Text handeln, aber auch um den Inhalt eines Knotens oder den Wert einer Variablen.

Liefert true zurück, wenn die Zeichenkette mit der Teilzeichenkette beginnt, und false, wenn sie nicht damit beginnt.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="mitarbeitername">
<p>
 <xsl:if test="starts-with(.,'Frau')">
  <b><xsl:value-of select="." /></b>
 </xsl:if>
  <xsl:if test="starts-with(.,'Herr')">
  <i><xsl:value-of select="." /></i>
 </xsl:if>
</p>
</xsl:template>

Erläuterung:

Im Beispiel wird für ein XML-Element namens mitarbeitername ein Template definiert. Dabei wird mit Seite xsl:if abgefragt, ob der Elementinhalt mit Frau oder mit Herr beginnt. Im Fall "Frau" wird der Name in Fettschrift in den HTML-Ergebnisbaum geschrieben. Einträge, die mit Herr beginnen, werden dagegen in Kursivschrift geschrieben. Die xsl:if-Abfrage benutzt dazu die Funktion starts-with(). Als Parameter werden der Funktion der Inhalt des aktuellen Knotens (.) übergeben, sowie die Suchzeichenfolge Frau bzw. Herr.

XPath 1.0 string() (Argument in Zeichenkette umwandeln)

Interpretiert ein übergebenes Argument als Zeichenkette und gibt die ermittelte Zeichenkette zurück. Wenn beispielsweise 31 übergeben wird, wird "31" zurückgeliefert. Negative Zahlen erhalten ein vorangestelltes Minuszeichen, Bruchzahlen einen Dezimalpunkt. Bei Übergabe von booleschen Werten, also true oder false, wird "true" bzw. "false" als Zeichenkette zurückgeliefert.

Erwartet folgende Argumente:

[Argument] (optional) Es kann sich z.B. um den Inhalt eines Elements oder den Wert einer Variablen handeln, oder um den Rückgabewert einer anderen Funktion. Fehlt das Argument, wird die Funktion auf den aktuellen Knoteninhalt angewendet, z.B. auf den Inhalt eines Elements.

Liefert die ermittelte Zeichenkette zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="spannung">
 <xsl:value-of select="string()" /><b><xsl:text> Volt</xsl:text></b>
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein XML-Element namens spannung. Das Template gibt den Wert des Elements aus, jedoch wird dabei der numerische Inhalt in eine Zeichenkette umgewandelt. Dazu wird im select-Attribut der Seite xsl:value-of-Anweisung die Funktion string() angewendet. Da string() kein Argument übergeben wird, bezieht sich die Funktion auf den Wert des aktuellen Elements spannung.

XPath 1.0 string-length() (Anzahl Zeichen einer Zeichenkette ermitteln)

Ermittelt, wie lang eine Zeichenkette ist.

Erwartet folgende Argumente:

[Zeichenkette] (optional) Zeichenkette, deren Länge ermittelt werden soll. Es kann sich z.B. um den Inhalt eines Elements oder den Wert einer Variablen handeln. Falls das Argument keine Zeichenkette ist, sondern beispielsweise eine Zahl, wird es zunächst intern mit der nach oben string()-Funktion in eine Zeichenkette umgewandelt. Fehlt das Argument, wird die Funktion auf den aktuellen Knoteninhalt angewendet, z.B. auf den Inhalt eines Elements.

Liefert die Anzahl der Zeichen zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="mitteilungstext">
  <xsl:choose>
   <xsl:when test="string-length() &lt; 20">
    <p><b>Fehler: zu geringe Mitteilungsmenge!</b></p>
   </xsl:when>
   <xsl:otherwise>
    <p><xsl:value-of select="." /></p>
   </xsl:otherwise>
  </xsl:choose>
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein XML-Element namens mitteilungstext. Der Inhalt dieses Elements soll nur dann in den Ergebnisbaum übernommen werden, wenn er mindestens 20 Zeichen besitzt. Dazu wird mit Seite xsl:choose eine logische Verzweigung realisiert. Im xsl:when-Zweig wird abgefragt, ob der Elementinhalt kleiner als 20 Zeichen ist. Dazu wird die Funktion string-length() angewendet. Da kein Argument übergeben wird, bezieht sie sich automatisch auf den Inhalt des aktuellen Elements. Wenn weniger als 20 Zeichen ermittelt werden, wird eine Fehlermeldung in die Ausgabe geschrieben. Andernfalls (xsl:otherwise) wird der Inhalt von mitteilungstext in den Ergebnisbaum geschrieben.

XPath 1.0 substring() (Teilzeichenkette aus Zeichenkette extrahieren)

Extrahiert aus einer Zeichenkette einen Teil ab einer bestimmten Zeichenposition und auf Wunsch eine bestimmte Anzahl von Zeichen.

Erwartet folgende Argumente:

[Zeichenkette] | Zeichenkette, aus der ein Teil extrahiert werden soll. Es kann sich z.B. um den Inhalt eines Elements oder den Wert einer Variablen handeln. Falls das Argument keine Zeichenkette ist, sondern beispielsweise eine Zahl, wird es zunächst intern mit der nach oben string()-Funktion in eine Zeichenkette umgewandelt.
[Zahl] | Position innerhalb der Zeichenkette, ab der extrahiert werden soll. Wenn z.B. ab dem 1. Zeichen extrahiert werden soll, muss 1 übergeben werden, wenn ab dem 20. Zeichen extrahiert werden soll, ist 20 zu übergeben.
[Zahl] | (optional) Anzahl der Zeichen, die extrahiert werden sollen. Fehlt dieses Argument, wird bis zum Ende der Zeichenkette extrahiert.

Liefert die extrahierte Teilzeichenkette zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="ort">
<tr>
 <td><xsl:value-of select="substring(.,1,5)" /></td>
 <td><xsl:value-of select="substring(.,7)" /></td>
</tr>
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein XML-Element namens ort, von dem angenommen wird, dass es Daten in der Form 81379 München enthält. Postleitzahl und Ortsname sollen bei der Ausgabe in den Ergebnisbaum auseinandergenommen und in zwei getrennte Tabellenzellen übernommen werden. Dazu wird dem select-Attribut der Seite xsl:value-of-Anweisung jeweils die Funktion substring() zugewiesen. Sie extrahiert beim ersten der beiden Aufrufe für den Inhalt des aktuellen Elements, der mit nach oben current() bzw. . ermittelt wird, die ersten 5 Zeichen, also die Postleitzahl, und beim zweiten Aufruf die Zeichen ab Position 7 bis zum Ende der Ortsangabe, also den Ortsnamen ohne die Postleitzahl.

XPath 1.0 substring-after() (Zeichenkette ab einer Position mit Teilzeichenkette ermitteln)

Prüft, ob eine Zeichenkette eine bestimmte Teilzeichenkette enthält. Ist das der Fall, wird diejenige Restzeichenkette zurückgegeben, die nach dem ersten Vorkommen der Teilzeichenkette folgt. Dies ist z.B. sinnvoll, um in Daten, die aus dem Schema Variablenname=zugewiesener Wert bestehen, den Wert zu extrahieren. Analog dazu arbeitet die Funktion substring-before(), die aus den gleichen Daten den Variablennamen extrahieren kann.

Erwartet folgende Argumente:

[Zeichenkette] | Zeichenkette, aus der ein Teil extrahiert werden soll. Es kann sich z.B. um den Inhalt eines Elements oder den Wert einer Variablen handeln. Falls das Argument keine Zeichenkette ist, sondern beispielsweise eine Zahl, wird es zunächst intern mit der nach oben string()-Funktion in eine Zeichenkette umgewandelt.
[Teilzeichenkette] | Zeichenkette, die in der zuvor angegebenen Zeichenkette vorkommen soll. Es kann sich auch um ein einzelnes Zeichen handeln.

Liefert die Restzeichenkette hinter der Teilzeichenkette zurück, falls die Teilzeichenkette gefunden wurde. Andernfalls wird eine leere Zeichenkette zurückgegeben. Die Gegenfunktion substring-before() gibt dementsprechend den Teil der Zeichenkette zurück, der vor der Teilzeichenkette steht.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="config-eintrag">
 <th><xsl:value-of select="substring-before(current(),'=')" /></th>
 <td><xsl:value-of select="substring-after(current(),'=')" /></td>
</xsl:template>

Erläuterung:

Das Beispiel nimmt an, dass es ein XML-Element namens config-eintrag gibt, in dem Bezeichnungen und Werte durch ein Gleichheitszeichen getrennt sind, z.B. Breite=475m. In der Template-Definition für dieses Element sollen der Teil vor dem Gleichheitszeichen in eine HTML-Tabellenkopfzelle übernommen werden, und der Teil hinter dem Gleichheitszeichen in eine Tabellendatenzeile. Dazu wird im ersten Teil dem select-Attribut der Seite xsl:value-of-Anweisung zuerst die Funktion substring-before() zugewiesen, im zweiten Teil die Funktion substring-after(). In beiden Fällen wird der Inhalt des aktuellen Elements, ermittelt mit nach oben current(), durchsucht. Als Zeichenkette, die das Signal für die davor bzw. dahinter zu extrahierende Teilzeichenkette ist, dient das Gleichheitszeichen.

XPath 1.0 substring-before() (Zeichenkette vor einer Position mit Teilzeichenkette ermitteln)

Ist die Gegenfunktion zu nach oben substring-after(). Beispiel siehe dort.

XPath 1.0 sum() (Summe von Zahlenwerten ermitteln)

Ermittelt die Gesamtsumme der Zahlenwerte des Augangsknotens. Wenn Werte nicht als Zahl interpretiert werden können, wird NaN (not a number) ermittelt.

Erwartet folgende Argumente:

[Knoten-Set] Ein Knoten-Set, für das die Summe seiner in Zahlen interpretierten Werte ermittelt werden soll. Sinnvollerweise enthält das Knoten-Set mehrere Knoten mit Werten, die als Zahlen interpretierbar sind, und deren Summe aus irgendeinem Grund interessant ist.

Liefert die Summe der ermittelten Werte zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="viereck">
<p>
<b><xsl:value-of select="name()" /> Umfang:</b><xsl:value-of select="sum(@*)" />cm
</p>
</xsl:template>

Erläuterung:

Das Beispiel zeigt eine Template-Definition für ein XML-Element namens viereck, das etwa so notiert sein könnte:
<viereck links="12" rechts="12" oben="20" unten="20" />
In der Übersetzung nach HTML wird einfach in einem Textabsatz der Umfang des Vierecks ausgegeben. Dazu wird mit select="sum(@*)" die Summe aller Attributwerte des viereck-Elements ermittelt. Bei dem zuvor notierten XML-Beispiel würde also 64 herauskommen, da dies die Summe der Attributwerte 12, 12, 20 und 20 ist. Das Argument @*, das im Beispiel der Funktion sum() übergeben wird, steht für "alle Attribute des Elements".

XPath 1.0 system-property() (Systemeigenschaften ermitteln)

Ermittelt Informationen über den verwendeten XSLT-Prozessor.

Erwartet folgende Argumente:

[Zeichenkette] Eine Eigenschaft des XSLT-Prozessors. Folgende Angaben sollten von jedem XSLT-Prozessor unterstützt werden: 'xsl:version' (Version des XSLT-Standards, der vom Prozessor interpretiert wird), 'xsl:vendor' (Hersteller der Prozessor-Software) und 'xsl:vendor-url' (URI des Herstellers der Prozessor-Software).

Liefert den ermittelten Wert zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="zusatzinfos">
 <p><b><xsl:text>XSL Version: </xsl:text></b>
   <xsl:value-of select="system-property('xsl:version')" /></p>
 <p><b><xsl:text>XSL Prozessor-Hersteller: </xsl:text></b>
   <xsl:value-of select="system-property('xsl:vendor')" /></p>
 <p><b><xsl:text>Hersteller URL-Adresse: </xsl:text></b>
   <xsl:value-of select="system-property('xsl:vendor-url')" /></p>
</xsl:template>

Erläuterung:

Das Beispiel zeigt, wie man ein XML-Element, das in den XML-Daten beispielsweise als leeres Element definiert sein könnte, als Signalgeber benutzen kann, um in einer XSLT-Transformation an die betreffende Stelle bestimmte Daten einzusetzen. Im Beispiel wird ein XML-Element namens zusatzinfos angenommen, das so eine Funktion hat. Denn in der Template-Definition für dieses Element wird nicht dessen Inhalt ausgegeben, sondern es werden mit der system-property()-Funktion diverse Eigenschaften des verwendeten XSLT-Prozessors ermittelt und in den HTML-Ergebnisbaum mit übernommen. Dazu werden jeweils den select-Attributen der Seite xsl:value-of-Anweisungen Aufrufe von system-property() übergeben.

XPath 1.0 translate() (Suchen und Ersetzen von Zeichen in einer Zeichenkette)

Ersetzt einzelne Zeichen in einer Zeichenkette in andere Zeichen.

Erwartet folgende Argumente:

[Zeichenkette] | Zeichenkette, in der gesucht und ersetzt werden soll. Es kann sich z.B. um den Inhalt eines Elements oder den Wert einer Variablen handeln. Falls das Argument keine Zeichenkette ist, sondern beispielsweise eine Zahl, wird es zunächst intern mit der nach oben string()-Funktion in eine Zeichenkette umgewandelt.
[Zeichen] | Ein oder mehrere Zeichen, die ersetzt werden sollen.
[Zeichen] | Ein oder mehrere Zeichen, durch welche die zuvor angegebenen Zeichen ersetzt werden sollen. Mögliche Angaben sind z.B. ',' oder ']['. Dieses Argument muss übergeben werden, kann aber auch einen leeren Inhalt haben (''). Dann werden die Zeichen, die im zweiten Argument genannt sind, einfach durch nichts ersetzt, also gelöscht.

Liefert die behandelte Zeichenkette zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:template match="ortsname">
 <b>
 <xsl:value-of select="translate(current(),'abcdefghijklmnopqrstuvwxyz','ABCDEFGHIJKLMNOPQRSTUVWXYZ')" />
 </b>
</xsl:template>

Erläuterung:

Das Beispiel definiert ein Template für ein XML-Element namens ortsname. Der Inhalt des Elements wird in den Ergebnisbaum ausgegeben, doch dabei werden alle Kleinbuchstaben in Großbuchstaben umgewandelt. Zu diesem Zweck wird dem select-Attribut der Seite xsl:value-of-Anweisung die Funktion translate() zugewiesen. Diese bestimmt für den Inhalt des aktuellen Elements, ermittelt mit nach oben current(), dass die Kleinbuchstaben von a bis z durch entsprechende Großbuchstaben ersetzt werden.

XPath 1.0 true() (booleschen Wert für "wahr" erzeugen)

Bejaht einen Ausdruck.

Erwartet keine Argumente

Liefert einfach den logischen Wert true zurück.

Beispielauszug aus einem XSL-Stylesheet:

<xsl:variable name="passwortanzeige" select="true()"/>

<xsl:template name="passwort">
 <xsl:choose>
  <xsl:when test="$passwortanzeige">
    <xsl:value-of select="." />
  </xsl:when>
  <xsl:otherwise>
   <xsl:text>[Passwort]</xsl:text>
  </xsl:otherwise>
 </xsl:choose>
</xsl:template>

Erläuterung:

Im Beispiel wird mit Seite xsl:variable eine Variable namens passwortanzeige definiert, deren Wert auf den logischen Wert true gesetzt wird. Verantwortlich dafür ist der Einsatz der Funktion true(), die einfach dem select-Attribut zugewiesen wird und dadurch für das Setzen des Wertes sorgt. Weiterhin zeigt das Beispiel eine Template-Definition für ein Element namens passwort. Innerhalb dieser Template-Definition wird in einer Seite xsl:choose-Konstruktion abgefragt, wie es mit der Passwortanzeige steht. Wenn die Variable $passwortanzeige wahr ist, wird mit <xsl:value-of select="." /> der Wert des passwort-Elements ausgegeben. Andernfalls wird nur die Zeichenkette [Passwort] ausgegeben.

XPath 1.0 unparsed-entity-uri() (ungeparste Einträge der DTD ermitteln)

Erlaubt es, auf DTD-Einträge zuzugreifen, die vom Parser nicht analysiert wurden. Dies betrifft vor allem Seite Entities für externe Ressourcen.

Erwartet folgende Argumente:

[Name] Der Name des nicht geparsten DTD-Eintrags (Entities).

Liefert den URI des Entities zurück, der hinter SYSTEM oder PUBLIC angegeben ist. Die entsprechende Adresse kann dann im Ergebnisbaum an eine geeignete Stelle eingesetzt werden.

Beispielauszug aus einer DTD:

<!ENTITY firmenlogo SYSTEM "images/logo.jpg" NDATA JPEG>

Beispielauszug aus einer entsprechenden XML-Datei:

<bild quelle="firmenlogo" />

Beispielauszug aus einem zugehörigen XSL-Stylesheet:

<xsl:template match="bild">
 <img src="{unparsed-entity-uri(@quelle)}" alt="Firmenlogo" />
</xsl:template>

Erläuterung:

Das Beispiel zeigt eine externe Entity-Definition in einer DTD. Dort wird ein Entity namens firmenlogo definiert, das eine JPEG-Grafik zugewiesen bekommt. Im zweiten Teil des Beispiels wird gezeigt, wie dieses Entity in einer XML-Datei zur Anwendung gelangt. Ein XML-Element namens bild hat ein Attribut namens quelle, dem das Entity zugewiesen wird. Der dritte Teil des Beispiels schließlich zeigt eine zugehörige Definition im XSL-Stylesheet. Dort wird für das Element bild ein Template definiert, in dem das XML-Konstrukt in ein HTML-Konstrukt zum Anzeigen einer Grafik übersetzt wird. Dem src-Attribut des img-Elements wird dabei die Funktion unparsed-entity-uri() zugewiesen. Der Funktion wird als Argument das Attribut @quelle des bild-Elements übergeben. Die Funktion liefert den zugehörigen URI wie in der DTD definiert zurück, also images/logo.jpg.
Beachten Sie die geschweiften Klammern, die erforderlich sind, wenn eine XPath-Funktion im Code des Ergebnisbaums verwendet wird. Mehr dazu im Abschnitt über Seite XPath-Syntax.

nach oben
weiter | Seite Einführung in JavaScript und DOM
zurück | Seite XPath-Syntax
Teil von SELFHTML/Navigationshilfen Teil von XML/DTDs Teil von Darstellung von XML-Daten

© 2007 Seite Impressum


SELFHTML: JavaScript/DOM

SELFHTML

JavaScript/DOM
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML und die einführenden Bemerkungen zu Seite JavaScript.
Dieser Abschnitt dokumentiert die Programmiersprache JavaScript, die in HTML-Dateien eingebunden werden kann.
Der Abschnitt besteht aus folgenden Seiten und Unterabschnitten:

Seite Einführung in JavaScript und DOM
Kapitel JavaScript-Sprachelemente
Kapitel Objektreferenz
Kapitel Anwendungsbeispiele

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zu JavaScript
Online-Seite Links zu JavaScript und DOM

nach oben

© 2007 Seite Impressum


SELFHTML: JavaScript / Einführung in JavaScript

SELFHTML

Einführung in JavaScript und DOM
Informationsseite

nach unten JavaScript und HTML
nach unten Standards, Sprachvarianten und Sprachversionen
nach unten Hinweise für die Praxis
nach unten JavaScript-Bereiche in HTML definieren
nach unten Bereiche definieren, die bei abgeschaltetem JavaScript angezeigt werden
nach unten JavaScript-Anweisungen in HTML-Tags
nach unten JavaScript in separaten Dateien
nach unten

JavaScript und HTML

JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe sich Web-Seiten optimieren lassen.

JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden zur Laufzeit vom Web-Browser interpretiert. Dazu besitzen moderne Web-Browser entsprechende Interpreter-Software.

Ein paar praktische Beispiele für die Anwendung von JavaScript können Sie in diesem Dokument zur Einstimmung auf JavaScript ausprobieren. So sind beispielsweise die Kapitel kleinen Helferlein JavaScript-Anwendungen, ebenso die Seite Quickbar und die Seite Suche. Letztere ist allerdings eine ziemlich anspruchsvolle Anwendung, die schon weit über das Maß dessen hinausgeht, wofür JavaScript üblicherweise eingesetzt wird.

In einer Programmiersprache wie JavaScript gibt es für Anfänger viele verwirrende Elemente: Sonderzeichen, Variablen, Wenn-Dann-Anweisungen, Schleifen, Funktionen, Methoden, Parameter, Objekte, Eigenschaften und anderes mehr. Um mit diesen Elementen richtig umgehen zu können, müssen Sie lernen, sich vorzustellen, was im Computer passiert, wenn der Programmcode ausgeführt wird. Das ist ein langwieriger Lernprozess, den Anfänger nur durch viel Übung bewältigen. JavaScript ist dazu allerdings hervorragend geeignet, weil es eine vergleichsweise einfache Sprache ist, bei der viele Aufgabenbereiche einer "großen" Programmiersprache fehlen, z.B. Dinge wie Arbeitsspeicherverwaltung oder Dateioperationen. Außerdem setzt JavaScript auf einer bestimmten Umgebung auf, nämlich auf einer anzuzeigenden oder angezeigten Web-Seite.

JavaScript läuft in einer so genannten "Sandbox". Das ist eine Art Sicherheitskäfig, in dem die Programmiersprache eingesperrt ist. Sie wird dabei um typische Möglichkeiten anderer Programmiersprachen beschnitten, vor allem um die Möglichkeit, beliebig Daten aus Dateien zu lesen und in Dateien schreiben zu können. So soll verhindert werden, dass JavaScript-Programmierer auf den Rechnern von Anwendern, die eine JavaScript-unterstützte Web-Seite aufrufen, Unfug treiben können. Nach einigen Anfangsproblemen in der Vergangenheit funktioniert das mittlerweile auch ganz gut. Wer also JavaScript in seinem Browser deaktiviert aus Angst, dass seine Festplatte damit formatiert werden könnte, sollte sich am besten ganz vom Internet fernhalten, denn schon beim Abruf von E-Mails lauern Gefahren, die wesentlich größer sind als diejenigen, die von JavaScript ausgehen. Doch leider gibt es andere gute Gründe, die nicht wenige Anwender dazu veranlassen, JavaScript in ihrem Browser abzuschalten. Dazu gehören vor allem die "Nervereien" mancher Programmierhelden, die meinen, eine Web-Seite sei um so toller, je mehr sie den Anwender gängelt. Da wird dann beispielsweise mit JavaScript die Unterstützung der rechten Maustaste abgewürgt, der Anwender kann die aufgerufene Seite nicht mehr verlassen und allerlei mehr. Solche Hirngeburten kontrollgeiler Programmierer sind das eigentliche Übel und der Grund, warum JavaScript nicht bei allen Anwendern beliebt ist. Wer JavaScript einsetzt, sollte sich darüber im klaren sein und die Möglichkeiten der Sprache so einsetzen, dass der Anwender einen Mehrwert davon hat, und nicht so, dass ihm etwas genommen wird.

Bevor Sie sich also in die Tiefen von JavaScript stürzen, sollten Sie sich bewusst gemacht haben, dass JavaScript wirklich nur als Ergänzung zu normalem HTML gedacht ist, aber nicht als dessen Ersatz. Es ist zwar durchaus möglich, Web-Seiten ausschließlich in JavaScript zu programmieren, sodass man kaum mehr davon reden kann, dass JavaScript in HTML eingebettet ist, sondern eher davon, dass der HTML-Code der Seite mit Hilfe von JavaScript dynamisch erzeugt wird. Doch solche Seiten funktionieren nur dort, wo JavaScript im Browser aktiviert ist, und wo der Browser all das versteht, was Sie programmiert haben (ansonsten endet der Versuch, die Seite anzuzeigen, sehr schnell in einer nüchternen Fehlermeldung). Für Web-Seiten, bei denen Information im Vordergrund steht, und die auch von Suchmaschinen-Robots und Benutzerrandgruppen wie Sehbehinderten erfasst werden sollen, müssen Sie darauf achten, JavaScript nur so einzusetzen, dass die Web-Seiten auch ohne eingeschaltetes JavaScript ordentlich angezeigt werden, und dass die Navigation zwischen den Seiten auch ohne JavaScript funktioniert.

Standards, Sprachvarianten und Sprachversionen

JavaScript ist eine Sprache, die 1995 von Netscape eingeführt und lizenziert wurde. Es war also eine firmeneigene, proprietäre Angelegenheit, und Netscape diktierte, woraus das "offizielle" JavaScript bestand. Mittlerweile ist die Situation aus verschiedenen Gründen unübersichtlicher geworden - aber JavaScript gibt es nach wie vor und es erfreut sich bei Web-Seiten-Gestaltern großer Beliebtheit.

Netscape versuchte schon frühzeitig, JavaScript nicht als willkürliche Eigenentwicklung dastehen zu lassen, sondern der Sprache den Charakter eines Standards zu verleihen. Dazu spannte man die Organisation englischsprachige Seite ECMA (European Computer Manufacturers Association) ein. Unter dem Namen ECMAScript wurden die Grundlagen von JavaScript als Industriestandard deklariert. In der Spezifikation englischsprachige Seite "ECMA-262" wurde dieser Standard festgeschrieben.

Microsoft konterte auf seine Weise. Der Internet Explorer interpretiert zwar JavaScript, daneben aber auch die Microsoft-eigene Sprachvariante JScript. Diese Sprache implementierte Microsoft nicht zuletzt, um sich aus den Lizenzvorgaben von Netscape herauszuwinden und das, was bei Netscape unter JavaScript lief, selbständig erweitern zu können. JScript umfasst die ganze Palette von JavaScript, doch daneben auch noch etliche spezielle Befehle für den Zugriff auf das Dateisystem und Betriebssystem Windows (das Ganze bezeichnet Microsoft als "Windows Scripting Host"). JScript ist insgesamt also viel mächtiger als JavaScript, doch es ist auch für andere Aufgaben gedacht. Es hat eine ganz eigene Versionenpolitik, die nichts mit der von JavaScript gemein hat. Bekannter als die JScript-Versionen sind jedoch nach wie vor die JavaScript-Versionen, und wenn Sie JavaScript verwenden, geben Sie in der Regel auch "JavaScript" als Sprache an und nicht "JScript". Der Internet Explorer kommt damit klar.

Netscape 2.0 interpretiert den seinerzeit eingeführten JavaScript-Sprachstandard 1.0 (Ende 1995). Der Internet Explorer versteht diesen Sprachstandard weitgehend seit der Version 3.0 (1996).
Netscape interpretiert seit Version 3.0 den JavaScript-Standard 1.1 (ebenfalls 1996). Der Internet Explorer interpretiert diesen Sprachumfang von JavaScript weitgehend seit der Produktversion 4.0 (1997).
Netscape interpretiert seit Version 4.0 den JavaScript-Standard 1.2 (1997). Einige Befehle dieser Sprachversion werden auch vom Internet Explorer seit Version 4.0 interpretiert.
Die JavaScript-Version 1.3 ist in Netscape in den heute am meisten verbreiteten Netscape-Versionen 4.06 bis 4.7 implementiert (1998-2001). Der Internet Explorer versteht diese Sprachversion weitgehend seit Produktversion 5.0.
In die völlig neu programmierte Netscape-Version 6.0 wurde eine Version 1.5 von JavaScript integriert (2000-2001), die neben einigen wenigen JavaScript-eigenen Neuerungen vor allem das Document Object Model (DOM) umsetzt - mehr dazu weiter unten.
Beim Internet Explorer gibt es zum Teil nicht ganz unbeträchtliche Unterschiede, was die Editionen für die einzelnen Plattformen betrifft. So kann es durchaus sein, dass die Windows-Version eines Internet Explorers mit der Produktversion 5.5 JavaScript-Befehle versteht, die eine Macintosh-Ausgabe mit gleicher Produktversionsnummer nicht versteht. Dazu kommen andere Browser-Produkte, die ebenfalls JavaScript implementiert haben, wie beispielsweise Opera, wobei auch dort jede Produktversion wieder ein bisschen mehr JavaScript kann als die Vorgängerversion. In der Praxis ist eigentlich nicht mehr wirklich nachvollziehbar, was nun welcher Browser genau kann. Es ist deshalb ratsam, benutzte Sprachbestandteile von JavaScript-Versionen jenseits der Version 1.2 besonders sorgfältig zu testen.

Das Gerangel zwischen Netscape und Microsoft um die bessere JavaScript-Unterstützung bewirkte auf jeden Fall eine Menge Frustration bei Web-Programmierern und Anwendern. Viele Dinge mussten und müssen immer noch ziemlich umständlich programmiert werden, weil die Fähigkeiten und Eigenheiten der verschiedenen JavaScript-Interpreter der verschiedenen Browser und Browser-Versionen lauter Wenns und Abers erfordern, was sich im Quellcode von JavaScript niederschlägt. Vor allem bei komplexeren JavaScript-Anwendungen, etwa bei Kapitel dynamischem HTML, wurde das "doppelte Programmieren" zur lästigen Pflicht.

Um diesem Missstand auf Dauer abzuhelfen, wurde das W3-Konsortium eingeschaltet, damit eine allgemeine Sprachnorm entsteht. Das W3-Konsortium erarbeitete dabei jedoch keinen konkreten JavaScript-Standard, sondern ein allgemeines Modell für Objekte eines Dokuments. Dieses Modell sollte eine Script-Sprache, die sich als Ergänzungssprache zu Auszeichnungssprachen wie HTML versteht, vollständig umsetzen. Vom W3-Konsortium erhielt das Modell die Bezeichnung Document Object Model (DOM). Am 1. Oktober 1998 wurde das DOM eine offizielle W3-Empfehlung (recommendation) in der Version 1.0, die seit dem 29. September 2000 in einer zweiten Ausgabe vorliegt. Seit 13. November 2000 ist die Version 2.0 des DOM eine offizielle W3-Empfehlung. Das entsprechende Dokument ist jedoch aufgesplittet in mehrere Einzeldokumente. Version 3.0 ist in Arbeit.

Der Internet Explorer 5.0 unterstützt einiges von DOM 1.0, die Version 5.5 schon mehr, ebenso wie Netscape 6. Die JavaScript-Version, die DOM erstmals umsetzt, ist die Version 1.5.

Ein wichtiger Aspekt des DOM ist, dass es nicht nur für HTML ergänzende Script-Sprachen konzipiert ist, sondern auch für Script-Sprachen, die jegliche Kapitel XML-gerechte Auszeichnungssprache erweitern sollen. Das DOM orientiert sich daher in seinem Kern nicht mehr an bestimmten HTML-Elementen. Stattdessen geht es in abstrakter Weise von einem "Dokument" aus (das in XHTML geschrieben sein kann, aber auch in einer anderen XML-basierten Sprache). Es definiert, wie sich auf die einzelnen Elemente dieses Dokuments zugreifen lässt und welche Manipulationsmöglichkeiten es gibt. Da man aber bei der Entwicklung des DOM auch auf die Gegebenheiten und die Verbreitung von HTML und JavaScript Rücksicht nehmen wollte, wurde dem so genannten "Kern-DOM" ein "HTML-Anwendungs-DOM" zur Seite gestellt. Letzteres versucht, Teile des "gewachsenen" JavaScript und MS-JScript zu sanktionieren und Bestandteile des "Kern-DOM" darin zu integrieren.

DOM 1.0 grenzt jedoch noch einige wichtige Aspekte aus, wie etwa das Event-Handling (Behandlung von Anwenderereignissen wie Mausklicks, Tastatureingaben usw.) oder die Integration von Stylesheets in das, was Programmierer dynamisch verändern können. In den Versionen 2.0 und 3.0 behandelt das DOM auch diese Aspekte.

Über die englischsprachige Seite W3-Einstiegsseite zum DOM können Sie die aktuelle Weiterentwicklung des Document Object Models beim W3-Konsortium verfolgen.

Seit das DOM vorliegt, überbieten sich die Browser-Anbieter gegenseitig mit Versprechungen, die Vorgaben des DOM in JavaScript umzusetzen. Abgesehen davon, dass es noch immer Uneinheitlichkeiten bei der Umsetzung gibt, ähnlich wie in HTML und CSS, haben JavaScript-Programmierer nun ein zusätzliches Problem: Wo sie zunächst häufig eine Doppellösung für die beiden verbreitetsten Browser-Typen benötigten, müssen sie nun manchmal sogar drei Lösungen programmieren, wenn sie nämlich Rücksicht auf die 4er-Versionen von Netscape und Internet Explorer Rücksicht nehmen und gleichzeitig DOM-gerecht programmieren wollen.

In der Praxis von JavaScript auf HTML-basierten Web-Seiten ist es jedoch so, dass meistens noch mit den herkömmlichen, von Netscape eingeführten JavaScript-Objekten gearbeitet wird. In Zukunft ist allerdings zu hoffen, dass die DOM-gerechte JavaScript-Programmierung das klassische JavaScript verdrängen wird.
Zur Kennzeichnung der Sprachversionen von JavaScript und von DOM werden in der vorliegenden Dokumentation folgende Symbole verwendet:

Symbol | Bedeutung
JavaScript 1.0 | Bestandteil der ersten JavaScript-Version.
JavaScript 1.1 | Bestandteil der JavaScript-Version 1.1.
JavaScript 1.2 | Bestandteil der JavaScript-Version 1.2.
JavaScript 1.3 | Bestandteil der JavaScript-Version 1.3.
JavaScript 1.5 | Bestandteil der JavaScript-Version 1.5.
MS JScript | Von Microsoft eingeführter Sprachbestandteil. Solche Bestandteile werden in der Regel nur vom Internet Explorer ab V4.x interpretiert; es wurden nur einige wichtige solcher Elemente in die Kapitel Objektreferenz mit aufgenommen, nämlich solche, die eine Grundlage für Dynamisches HTML nach dem Ansatz des Internet Explorers ab V4.0 darstellen.
DOM 1.0 | Objekt, Eigenschaft oder Methode nach den Vorgaben des Document Object Models, Version 1.0. Kommt innerhalb der vorliegenden Dokumentation in der Kapitel Objektreferenz vor, um Objekte, Eigenschaften und Methoden auszuzeichnen.
DOM 2.0 | Objekt, Eigenschaft oder Methode nach den Vorgaben des Document Object Models, Version 2.0. Kommt innerhalb der vorliegenden Dokumentation in der Kapitel Objektreferenz vor, um Objekte, Eigenschaften und Methoden auszuzeichnen.

Hinweise für die Praxis

Bevor Sie daran gehen, neuen, eigenen JavaScript-Code zu programmieren, müssen Sie sich exakt darüber im klaren sein, welches Problem Sie damit lösen wollen. Dazu müssen Sie erst einmal wissen, was man mit HTML selbst alles machen kann, und wo die Grenzen von HTML liegen. Von JavaScript müssen Sie dann so viel wissen, dass Sie entscheiden können, ob das Problem mit JavaScript überhaupt lösbar ist. Mit JavaScript können Sie z.B. nicht die typischen Aufgaben von Kapitel CGI lösen! JavaScripts werden im Browser des Anwenders ausgeführt, nicht auf dem Server, wo die Web-Seiten abgelegt sind. Das heißt, JavaScript kann vom Browser erst dann ausgeführt werden, wenn er eine Web-Seite gerade einliest oder nachdem er sie eingelesen hat - dann z.B. auch ausgelöst durch Benutzerereignisse wie Mausklicks usw.

Aus diesem Grund können Sie mit JavaScript also keine Anwendungen wie Gästebücher oder Web-Foren programmieren. Denn solche Anwendungen müssen die Daten aller beitragenden Anwender zentral auf dem Server speichern. Wohl aber kann JavaScript unterstützend eingesetzt werden bei solchen Anwendungen. So ist es beispielsweise sinnvoll, Formulareingaben des Anwenders vor dem Absenden mit Hilfe von JavaScript zu überprüfen und Probleme dem Anwender direkt mitzuteilen. Der Server muss aber selbstverständlich alle Formulardaten selbst noch einmal prüfen - JavaScript könnte ja auch abgeschaltet sein, oder man könnte manipulierte Formulare versenden.

Wenn Sie etwas mit JavaScript lösen möchten, lohnt es sich durchaus, sich im Web umzusehen, ob es nicht schon frei verfügbare JavaScript-Beispiele gibt, die genau Ihr Problem lösen. Denn es ist immer besser, auf Code zurückzugreifen, der sich im Einsatz bereits bewährt hat, als neuen Code zu erstellen, dessen "heimliche Tücken" einem noch nicht bekannt sind. In vielen Fällen genügt es, vorhandene JavaScripts den eigenen Erfordernissen anzupassen. Bei vorhandenen JavaScripts müssen Sie allerdings so viel von der Sprache verstehen, dass Sie genau wissen, welche Variablen oder festen Werte Sie verändern oder welche Funktion Sie ergänzen wollen.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Links zu Anbietern frei verfügbarer JavaScripts:

Online-Seite WWW-Links: JavaScript und DOM

Wenn Sie JavaScript auf eigenen Web-Seiten verwenden wollen, sollten Sie auf jeden Fall mehrere Browser zum Testen einsetzen. Denn leider sind die JavaScript-Interpreter der JavaScript-fähigen WWW-Browser wie schon erwähnt sehr unterschiedlich in ihrer Leistung.

Stellen Sie keine Web-Seiten mit ungeprüftem JavaScript-Code öffentlich zur Verfügung. Für einen Anwender ist es sehr ärgerlich, wenn er Fehlermeldungen des JavaScript-Interpreters am Bildschirm erhält und in schlimmeren Fällen einen Programmabsturz des Web-Browsers oder gar einen Systemabsturz hat, was bei Online-Sitzungen besonders unangenehm ist. Solche Anwender besuchen Ihre Seiten mit Sicherheit so schnell nicht wieder.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 JavaScript-Bereiche in HTML definieren

Für JavaScript-Programmabschnitte können Sie in HTML Bereiche definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head><title>Test</title>
<script type="text/javascript">
alert("Hallo Welt!");
</script>
</head>
<body>
</body>
</html>

Erläuterung

Mit <script type="text/javascript"> leiten Sie einen Bereich für JavaScript innerhalb einer HTML-Datei ein (script = Quelltext, type = Seite MIME-Typ). Die Angabe zum MIME-Typ ist seit HTML 4.0 Pflicht. Mit type="text/javascript" geben Sie den MIME-Typ für JavaScript-Dateien an. Der MIME-Typ text/javascript ist zwar erst seit kurzem offiziell registriert, wird aber von allen JavaScript-fähigen Browsern schon seit langer Zeit unterstützt. Der MIME-Typ text/javascript ist zwar mittlerweile obsolet, wird aber von allen JavaScript-fähigen Browsern schon seit langer Zeit unterstützt. In der Zukunft soll der neue MIME-Typ application/javascript verwendet werden. Dieser ist erst seit kurzem offiziell registriert und daher den meisten Browsern allerdings noch unbekannt.

Zusätzlich können Sie zur Kennzeichnung der JavaScript-Sprachversion das language-Attribut verwenden, z.B. language="JavaScript" oder language="JavaScript1.2". Die Versionsangabe 1.2 sollte dazu führen, dass nur diejenigen Browser den JavaScript-Bereich interpretieren, welche den Sprachstandard JavaScript 1.2 unterstützen. Dadurch lassen sich Fähigkeiten nutzen, die erst ab dieser Version zur Verfügung stehen. Jedoch gehört dieses Attribut zu den Seite missbilligten Attributen und wird nicht von allen Browsern korrekt interpretiert. Eine zuverlässigere Weise, um manche Browser gezielt am Ausführen eines bestimmten JavaScript-Codes zu hindern, ist die Seite Abfrage, ob ein Objekt existiert.

Im obigen Beispiel wird mit Hilfe von JavaScript ein Meldungsfenster mit dem Text "Hallo Welt!" am Bildschirm ausgegeben.

Beachten Sie:

Es gibt keine festen Vorschriften dafür, an welcher Stelle einer HTML-Datei ein JavaScript-Bereich definiert werden muss. Es ist unter JavaScript-Programmierern zur Gewohnheit geworden, einen solchen Bereich im Kopf der HTML-Datei, also zwischen <head> und </head> zu definieren. Dadurch ist am ehesten sichergestellt, dass der Code vom WWW-Browser bereits eingelesen ist und zur Verfügung steht, wenn er ausgeführt werden soll.

JavaScript-Code kann automatisch beim Einlesen der HTML-Datei ausgeführt werden. Das ist dann der Fall, wenn JavaScript-Befehle in einem JavaScript-Bereich außerhalb jeder Seite selbst definierten Funktion stehen, so wie im obigen Beispiel. In solchen Fällen ist es manchmal auch erforderlich, den Script-Bereich innerhalb des HTML-Dateikörpers, also innerhalb von <body>...</body>, zu notieren. Zum Beispiel, wenn Sie am Ende der Datei mit JavaScript dynamisch Datum und Uhrzeit der letzten Änderung an der Datei schreiben wollen.

Gewisse besonders alte Browser, zum Beispiel Netscape 1 und Internet Explorer 2, wissen nichts von JavaScript und kennen daher das script-Element nicht. Wenn diese Browser auf einen JavaScript-Bereich treffen, stellen sie irrtümlicherweise dessen Inhalt so dar, als handelte es sich um normalen Text in der HTML-Datei. Dadurch bekommt der Anwender den Code zu Gesicht. Wenn Sie dies verhindern möchten, sollten Sie den JavaScript-Code zwischen <script type="text/javascript"> und </script> in einen Seite HTML-Kommentar einschließen. In der Zeile nach dem Start-Tag öffnen Sie den Kommentar mit <!--. In der Zeile vor dem End-Tag des JavaScript-Bereich notieren Sie einen einzeiligen Seite JavaScript-Kommentar //, gefolgt vom schließenden HTML-Kommentar -->.

<script type="text/javascript">
<!--
alert("Hallo Welt!");
//-->
</script>

Obwohl dieses Auskommentieren des JavaScript-Codes eine gängige Praxis ist, wird in den Codebeispielen in SELFHTML darauf verzichtet. Denn die Browser aus den Anfangstagen des Webs, die JavaScript-Bereiche nicht erkennen können, sind weitestgehend zu vernachlässigen. Beachten Sie in diesem Zusammenhang die Seite Unterschiede zwischen XHTML und HTML.

HTML 4.0 XHTML 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Bereiche definieren, die bei abgeschaltetem JavaScript angezeigt werden

Mit dem HTML-Element <noscript> können Sie Bereiche definieren, die angezeigt werden, wenn JavaScript deaktiviert ist. Die Beschreibung dazu befindet sich im HTML-Bereich: Seite Noscript-Bereich definieren

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 JavaScript-Anweisungen in HTML-Tags

JavaScript kann auch innerhalb herkömmlicher HTML-Tags vorkommen. Das ist dann kein komplexer Programmcode, sondern in der Regel nur der Aufruf bestimmter Methoden, Funktionen, Objekte, Eigenschaften. Für den Aufruf gibt es so genannte Seite Event-Handler. Das sind Attribute in HTML-Tags, über die sich JavaScripts aktivieren lassen. Für jeden der möglichen Event-Handler ist festgelegt, in welchen HTML-Tags er vorkommen darf.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function Quadrat() {
   var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
   alert("Das Quadrat von " + document.Formular.Eingabe.value + " = " + Ergebnis);
}
//-->
</script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat errechnen" onclick="Quadrat()">
</form>
</body>
</html>

Erläuterung

Das obige Beispiel zeigt eine komplette HTML-Datei. Im Dateikopf ist ein JavaScript-Bereich definiert. Innerhalb dieses Bereichs steht eine Seite selbst definierte Funktion, die Funktion mit dem Namen Quadrat(). Die Funktion errechnet das Quadrat einer Zahl, die der Anwender in dem weiter unten notierten Formular im Eingabefeld mit dem Namen Eingabe eingibt. Der JavaScript-Code dieser Funktion wird aber nicht automatisch ausgeführt, sondern nur dann, wenn die Funktion explizit aufgerufen wird. Im obigen Beispiel erfolgt der Aufruf mit Hilfe eines Seite Klick-Buttons. Wenn der Anwender auf den Button klickt, wird das Quadrat der eingegebenen Zahl ausgegeben. Dazu ist im HTML-Tag des Klick-Buttons das Attribut onclick notiert - ein Event-Handler mit der Bedeutung "beim Anklicken".

Beachten Sie:

Im Abschnitt Seite Event-Handler wird beschrieben, welche Event-Handler es außer onclick noch gibt, und in welchen HTML-Tags sie vorkommen dürfen.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 JavaScript in separaten Dateien

Seit der Sprachversion 1.1 von JavaScript (und auch seit HTML 4.0) ist es möglich, JavaScript-Code in separaten Dateien zu notieren. Das ist sehr nützlich, wenn Sie gleiche JavaScript-Funktionen in mehreren HTML-Dateien verwenden wollen. Denn so brauchen Sie den Code nur einmal zu notieren und können ihn in mehreren HTML-Dateien referenzieren. JavaScript-Code zwischen den <script>-Tags wird in diesem Falle ignoriert.

Beispiel: JavaScript-Datei quadrat.js

function Quadrat() {
   var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
   alert("Das Quadrat von " + document.Formular.Eingabe.value + " = " + Ergebnis);
   }

Beispiel: HTML-Datei

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>JavaScript-Test</title>
<script src="quadrat.js" type="text/javascript"></script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat errechnen" onclick="Quadrat()">
</form>
</body>
</html>

Erläuterung

Hier handelt es sich um das gleiche Beispiel wie im nach oben Abschnitt zuvor. Der Unterschied ist lediglich, dass der JavaScript-Code in einer separaten Datei steht. Dazu notieren Sie im einleitenden <script>-Tag das Attribut src (src = source = Quelle). Als Wert weisen Sie den URI der separaten Datei mit dem Quellcode zu. Dabei gelten die Regeln zum Seite Referenzieren in HTML.

Die Datei mit dem Quellcode muss eine reine ASCII-Datei sein und sollte die Dateinamenerweiterung .js erhalten. Die Datei darf nichts anderes als JavaScript-Code enthalten.

Beachten Sie:

Es kann passieren, dass ein JavaScript, das in einer separaten Datei notiert ist, lokal wunderbar funktioniert, aber nach dem Hochladen der Dateien auf einen WWW-Server plötzlich nicht mehr. Bitten Sie in diesem Fall den Provider oder Webmaster des Servers, den MIME-Typ text/javascript für Dateien mit der Endung .js in die Konfiguration des Web-Servers mit aufzunehmen. Ansonsten können Sie im einleitenden <script>-Tag beim type-Attribut auch mal den MIME-Typ application/x-javascript anstelle von text/javascript ausprobieren. Bei einigen Servern funktioniert es dann.

nach oben
weiter | Seite Allgemeine Regeln für JavaScript
zurück | Seite XPath-Funktionen
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM

© 2007 Seite Impressum


SELFHTML: JavaScript / JavaScript-Sprachelemente

SELFHTML

JavaScript-Sprachelemente
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML und der Abschnitt Seite Einführung in JavaScript und und DOM.
Dieser Abschnitt beschreibt den grundsätzlichen Aufbau von JavaScript. Die Sprachelemente von JavaScript müssen Sie kennen und verstehen, um selbst in JavaScript programmieren zu können.
Der Abschnitt besteht aus folgenden Seiten:

Seite Allgemeine Regeln für JavaScript
Seite Variablen und Werte
Seite Objekte, Eigenschaften und Methoden
Seite Funktionen
Seite Steuerzeichen und besondere Notationen
Seite Operatoren
Seite Bedingte Anweisungen (if-else/switch)
Seite Schleifen (while/for/do-while)
Seite Reservierte Wörter
Seite Event-Handler

nach oben

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Allgemeine Regeln für JavaScript

SELFHTML

Allgemeine Regeln für JavaScript
Informationsseite

nach unten Anweisungen notieren
nach unten Anweisungsblöcke notieren
nach unten Selbstvergebene Namen
nach unten Kommentare in JavaScript
nach unten

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Anweisungen notieren

JavaScript besteht letztendlich aus einer kontrollierten Anordnung von Anweisungen. Das sind Befehle, die der JavaScript-Interpreter des WWW-Browsers bewertet und in Maschinencode umsetzt, der auf dem Rechner des Anwenders ausführbar ist.

Es gibt einfache und komplexere Anweisungen.

Beispiel 1:

Zahl = 42;

Beispiel 2:

Quadrat = Zahl * Zahl;

Beispiel 3:

if (Zahl > 1000)
  Zahl = 0;

Beispiel 4:

alert("Das Quadrat von " + Zahl + " = " + Ergebnis);

Erläuterung:

Eine Anweisung in JavaScript besteht immer aus einem Befehl, der mit einem Strichpunkt ; oder einem Zeilenumbruch abgeschlossen wird. In neueren Netscape-Dokumentationen zu JavaScript wird der Strichpunkt am Ende von einfachen Anweisungen zwar häufig weggelassen, aber um unnötige Fehler zu vermeiden ist es ratsam, sich von vornherein anzugewöhnen, alle Anweisungen auf diese Weise abzuschließen.

Eine Anweisung ist zum Beispiel:

  • wenn Sie einer Seite Variablen einen Wert zuweisen, wie in Beispiel 1.
  • wenn Sie mit Variablen oder Werten eine Operation durchführen, wie in Beispiel 2.
  • wenn Sie einen Befehl nur unter bestimmten Bedingungen ausführen, wie in Beispiel 3 (siehe hierzu die Abschnitte über Seite bedingte Anweisungen und über Seite Schleifen).
  • wenn Sie eine Seite selbst definierte Funktion oder eine Objektmethode aufrufen, bzw. wenn Sie eine Objekteigenschaft auslesen oder ändern (siehe hierzu den Abschnitt Seite Objekte, Eigenschaften und Methoden), wie in Beispiel 4.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Anweisungsblöcke notieren

Ein Anweisungsblock besteht aus einer oder mehreren Anweisungen, die innerhalb einer übergeordneten Anweisung oder innerhalb einer Funktion stehen. So können Anweisungsblöcke beispielsweise unterhalb einer Seite bedingten Anweisung oder einer Seite Schleife stehen. Auch alle Anweisungen, die innerhalb einer Seite selbst definierten Funktion stehen, bilden einen Anweisungsblock.

Beispiel 1:

if (Zahl > 1000) {
  Zahl = 0;
  Neustart();
}

Beispiel 2:

while (i <= 99) {
  Quadrat(i);
  i = i + 1;
}

Beispiel 3:

function SageQuadrat (x) {
  var Ergebnis = x * x;
  alert(Ergebnis);
}

Beispiel 4:

function SagEinmaleins (x) {
  var Ergebnis = x * x;
  if(Ergebnis > 100) {
    Ergebnis = 0;
    Neustart();
  }
  alert(Ergebnis);
}

Erläuterung:

Ein Anweisungsblock wird durch eine öffnende geschweifte Klammer { begonnen und durch eine schließende geschweifte Klammer } beendet. Sie können die geschweiften Klammern jeweils in eine eigene Zeile schreiben, wie in den obigen Beispielen. Es ist aber auch erlaubt, die Klammern in derselben Zeile zu notieren wie die Anweisungen.

Bei bedingten Anweisungen (wie in Beispiel 1) oder bei Schleifen (wie in Beispiel 2) müssen Sie solche Anweisungsblöcke notieren, sobald mehr als eine Anweisung von der Bedingung oder der Schleifenbedingung abhängig ausgeführt werden soll. Bei Funktionen (wie in Beispiel 3) müssen Sie Anfang und Ende der Funktion durch geschweifte Klammern markieren. Alles, was innerhalb der Funktion steht, ist daher ein Anweisungsblock.

Anweisungsblöcke können auch verschachtelt sein, wie in Beispiel 4 oben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Selbstvergebene Namen

An vielen Stellen in JavaScript müssen Sie selbst Namen vergeben, zum Beispiel für Seite selbst definierte Funktionen, Seite eigene Objekte oder Seite Variablen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Schlaue_Frage () {
  var i = 1;
  var Eingabe = "";
  while (Eingabe != "SELFHTML" && i <= 3) {
    Eingabe = window.prompt("Wie heißt diese Dokumentation?", "");
    i++;
  }
}
</script>
</head>
<body>
<a href="javascript:Schlaue_Frage()">wollen Sie eine Frage beantworten?</a>
</body>
</html>

Erläuterung:

Im Beispiel ist in einem Seite JavaScript-Bereich eine Funktion mit Namen Schlaue_Frage notiert. Darin werden zwei Variablen mit den Namen i und Eingabe deklariert und verwendet. Das Beispiel ruft beim Anklicken des HTML-Verweises die Funktion Schlaue_Frage auf. Darin wird ein Dialogfenster ausgegeben, in dem der Anwender bis zu dreimal auf die Frage antworten kann, wie dieses Dokument heißt. Namen vergeben müssen Sie also recht häufig in JavaScript.

Bei selbst vergebenen Namen gelten folgende Regeln:

  • sie dürfen keine Leerzeichen enthalten
  • sie dürfen nur aus Buchstaben und Ziffern bestehen - das erste Zeichen muss ein Buchstabe sein; es sind Groß- und Kleinbuchstaben erlaubt. Groß- und Kleinschreibung werden unterschieden!
  • sie dürfen keine deutschen Umlaute oder scharfes S enthalten
  • sie dürfen als einziges Sonderzeichen den Unterstrich "_" enthalten
  • sie dürfen nicht mit einem Seite reservierten Wort identisch sein.

Vergeben Sie sprechende Namen, die Ihnen auch ein halbes Jahr, nachdem Sie das Script geschrieben haben, noch signalisieren, welche Bedeutung sie haben. Es dürfen ruhig auch deutschsprachige Wörter sein, solange die genannten Regeln eingehalten werden.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Kommentare in JavaScript

Bei komplexeren Programmteilen können Sie Kommentare benutzen, um einzelne Anweisungen zu erklären. Auch wenn Sie Ihre Copyright-Angaben innerhalb eines selbst geschriebenen JavaScript-Codes unterbringen wollen, können Sie dies mit Hilfe eines Kommentars tun. Kommentare werden vom JavaScript-Interpreter des WWW-Browsers ignoriert.

Beispiel:

while (i <= 99) {
  Quadrat = i * i;   /* solange i kleiner gleich 99, Quadrat von i bilden */
  i = i + 1;        // i um eins erhoehen, damit es irgendwann 99 ist
}

Erläuterung:

Einen wahlweise ein- oder mehrzeiligen Kommentar leiten Sie mit /*, also einem Schrägstrich, gefolgt von einem Sternzeichen, ein. Mit der umgekehrten Folge */, also einem Sternzeichen, gefolgt von einem Schrägstrich, beenden Sie den Kommentar.

Einen einzeiligen Kommentar starten Sie mit der Zeichenfolge //. Der Browser ignoriert dann den nachfolgenden Text bis zum nächsten Zeilenende.

nach oben
weiter | Seite Variablen und Werte
zurück | Seite Einführung in JavaScript und DOM
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Variablen und Werte

SELFHTML

Variablen und Werte
Informationsseite

nach unten Variablen definieren
nach unten Werte von Variablen ändern
nach unten

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Variablen definieren

Variablen sind Speicherbereiche, in denen Sie Daten, die Sie im Laufe Ihrer Programmprozeduren benötigen, speichern können. Der Inhalt, der in einer Variablen gespeichert ist, wird als "Wert" bezeichnet. Sie können den Wert einer Variablen jederzeit ändern. Um mit Variablen arbeiten zu können, müssen Sie die benötigten Variablen zuerst definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
var Hinweis = "Gleich werden Quadratzahlen ausgegeben";
alert(Hinweis);

function SchreibeQuadrate () {
  var SinnDesLebens = 42;
  var i, x;
  var Satzteil = "Das Quadrat von ";
  for (i = 1; i <= SinnDesLebens; ++i) {
    x = i * i;
    document.write(Satzteil + i + " ist " + x + "<br>");
  }
}
SchreibeQuadrate();
</script>
</body>
</html>

Erläuterung:

Das Beispiel gibt beim Aufruf der Seite eine Meldung aus, dass gleich Quadratzahlen ausgegeben werden. Bestätigt der Anwender das Meldungsfenster, werden die Quadrate der Zahlen von 1 bis 42 ausgegeben.

Es gibt globale Variablen und lokale Variablen. Eine lokale Variable erhalten Sie durch die Deklaration der Variablen mit var innerhalb einer Seite Funktion. Im obigen Beispiel sind die Variablen SinnDesLebens, i, x und Satzteil innerhalb der Funktion SchreibeQuadrate() als lokale Variablen notiert. Diese Variablen sind deshalb nur innerhalb dieser Funktion gültig. Man spricht in diesem Zusammenhang auch von der "Lebensdauer" von Variablen. Parameter, die einer Funktion übergeben werden, werden ebenfalls als lokale Variablen behandelt.
Die Variable Hinweis ist dagegen eine global Variable. Sie ist im gesamten Dokument gültig und steht jederzeit zur Verfügung. Wenn Sie innerhalb von Funktionen Variablen ohne das Schlüsselwort var deklarieren, dann sind diese Variablen global.

Jede Variablendeklaration wird mit einem Strichpunkt abgeschlossen, da sie eine ganz normale Seite Anweisung darstellt.

Variablen können mit oder ohne weitere Wertzuweisung deklariert werden. Im obigen Beispiel wird etwa der Variablen SinnDesLebens bei der Definition gleich ein Wert zugewiesen, nämlich 42. Auch die Variable Satzteil erhält eine anfängliche Wertzuweisung, nämlich den Wert "Das Quadrat von ". Die Variablen i und x werden dagegen nicht mit einem Anfangswert versehen. Beim Zuweisen eines Wertes notieren Sie hinter dem Variablennamen ein Istgleichzeichen und dahinter den Wert, den Sie der Variablen zuweisen wollen.

Sie können mehrere Variablen auf einmal definieren, so wie die beiden Variablen i und x im Beispiel. Dazu trennen Sie die Variablennamen durch Kommata. Das ist natürlich auch in Verbindung mit zugewiesenen Anfangswerten möglich.

Es gibt numerische Variablen und Variablen für Zeichen bzw. Zeichenketten. Im obigen Beispiel sind die Variablen SinnDesLebens, i und x numerische Variablen. Die Variablen Hinweis und Satzteil sind dagegen Zeichenkettenvariablen. Dies ist daran erkennbar, dass der ihnen zugewiesene Wert, ein Text, in Anführungszeichen gesetzt wird. Sie könnten z.B. eine Variable Nummer = 1; und eine Variable Zeichen = "1"; definieren. Der Unterschied ist, dass Sie mit der Variablen Nummer Rechenoperationen anstellen können, mit der Variablen Zeichen nicht. Dafür können Sie mit Zeichenkettenvariablen Zeichenkettenoperationen durchführen, etwa das Extrahieren einer Teilzeichenkette, was mit numerischen Variablen nicht möglich ist.

Beachten Sie:

Bei der Vergabe von Variablennamen gelten die Regeln für Seite selbstvergebene Namen.

Variablen in JavaScript sind nicht so streng an Typen gebunden wie in vielen anderen Programmiersprachen. Einfache Variablentypen, wie Zahlen, Zeichenketten oder Wahrheitswerte, werden lediglich nach numerischen und nicht-numerischen Variablen eingeteilt. Kommazahlen und Ganzzahlen benötigen keine unterschiedlichen Typen. Der Inhalt von numerischen Variablen kann ohne vorherige Konvertierung in Zeichenketten auf den Bildschirm oder in Meldungsfenster geschrieben werden. Umgekehrt können Sie aber mit Zeichenketten, z.B. Werten aus Formularfeldern, nicht immer automatisch rechnen, sondern müssen sie vorher explizit in Zahlen umwandeln. Für die explizite Typumwandlung gibt es verschiedene Seite objektunabhängige Funktionen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Werte von Variablen ändern

Wertänderungen von Variablen sind das A & O bei der Programmierung. Sie werden nur dann erfolgreich eigene Programme schreiben können, wenn Sie jederzeit den Überblick haben, was in einer Variablen an einem bestimmten Punkt des Programmablaufs steht. Besonders, wenn Sie mit Seite bedingten Anweisungen oder Seite Schleifen arbeiten, werden Sie schnell feststellen, wie leicht der Überblick über den aktuellen Zustand einer Variablen verloren gehen kann.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Sinn des Lebens zum Quadrat</title>
</head>
<body>
<script type="text/javascript">
function SchreibeTabelle () {
  var SinnDesLebens = 42;
  var i, x, y;
  document.write('<table border="1"><tr>');
  document.write('<td bgcolor="#EEEEEE">Wert<\/td>');
  document.write('<td bgcolor="#EEEEEE">Wert<sup>2<\/sup><\/td>');
  document.write('<td bgcolor="#EEEEEE">Wert<sup>3<\/sup><\/td><\/tr>');
  for (i=1; i <= SinnDesLebens; ++i) {
    x = i * i;
    y = i * i * i;
    document.write("<tr><td>" + i + "<\/td>");
    document.write("<td>" + x + "<\/td>");
    document.write("<td>" + y + "<\/td><\/tr>");
  }
  document.write("<\/table>");
}
SchreibeTabelle();
</script>
</body>
</html>

Erläuterung:

Das Beispiel und erzeugt dynamisch eine Tabelle mit 3 Spalten und 42 Zeilen plus einer Kopfzeile. In die Zellen der Tabelle werden für die Zahlen von 1 bis 42 der Quadratwert und der Kubikwert geschrieben. Zum Ausgeben dieser Tabelle benutzt das Script die Seite Methode Seite document.write.

Die Variable SinnDesLebens wird während des Programmablaufs zwar benutzt, aber ihr Wert wird nicht geändert. Die Variablen i, x und y dagegen ändern ihren Wert laufend. Das liegt daran, dass sie innerhalb einer Seite for-Schleife bei jedem Schleifendurchlauf neue Werte zugewiesen bekommen.

Die Wertzuweisung erfolgt, indem Sie den Variablennamen, dahinter ein Istgleichzeichen und dahinter den gewünschten Wert notieren. Bei dem Wert, den Sie zuweisen, können Sie anstelle einer bestimmten Zahl oder einer Zeichenkette auch Namen anderer Variablen notieren. So wird im Beispiel der Variablen x bei jedem Schleifendurchlauf als Wert das Ergebnis der mit sich selbst multiplizierten Variablen i zugewiesen und y das Ergebnis von i * i * i.

nach oben
weiter | Seite Objekte, Eigenschaften und Methoden
zurück | Seite Allgemeine Regeln für JavaScript
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Objekte, Eigenschaften und Methoden

SELFHTML

Objekte, Eigenschaften und Methoden
Informationsseite

nach unten Vordefinierte JavaScript-Objekte
nach unten Vordefinierte JavaScript-Objekte verwenden
nach unten Eigene Objekte definieren
nach unten Eigenschaften von Objekten
nach unten Objektmethoden
nach unten Abfragen ob ein Objekt existiert
nach unten Mehrere Anweisungen mit einem Objekt ausführen (with)
nach unten Auf aktuelles Objekt Bezug nehmen (this)
nach unten

Vordefinierte JavaScript-Objekte

Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Funktionen (Methoden).

Dass JavaScript eine Erweiterung von HTML darstellt, liegt vor allem an den vordefinierten Objekten, die Ihnen in JavaScript zur Verfügung stehen. Über diese vordefinierten Objekte können Sie beispielsweise einzelne Elemente eines HTML-Formulars abfragen oder ändern.

Ein Objekt kann eine Teilmenge eines übergeordneten Objekts sein. Die JavaScript-Objekte sind deshalb in einer Hierarchie geordnet. Das hierarchiehöchste Objekt ist in JavaScript das Fensterobjekt (window). Fenster haben Eigenschaften wie einen Namen, eine Größe usw. Der Inhalt eines Fensters ist das nächstniedrigere Objekt, nämlich das im Fenster angezeigte Dokument (in JavaScript das Objekt document). In der Regel ist der Fensterinhalt eine HTML-Datei. Eine solche Datei kann bestimmte durch HTML-Tags definierte Elemente enthalten, wie zum Beispiel Formulare, Verweise, Grafikreferenzen usw. Für solche untergeordneten Elemente gibt es wieder eigene JavaScript-Objekte, zum Beispiel das Objekt forms für Formulare. Ein Formular besteht seinerseits aus verschiedenen Elementen, zum Beispiel aus Eingabefeldern, Auswahllisten oder Buttons zum Absenden bzw. Abbrechen. In JavaScript gibt es dafür ein Objekt elements, mit dem Sie einzelne Felder und andere Elemente innerhalb eines Formulars ansprechen können.

Neben den hierarchisch geordneten JavaScript-Objekten gibt es auch solche, die nicht direkt in die Hierarchie passen. Das sind zum Beispiel Objekte für Datums- und Zeitrechnung, für mathematische Aufgaben oder für Zeichenkettenverarbeitung.

Eine Übersicht der vordefinierten JavaScript-Objekte finden Sie in der Kapitel JavaScript-Objektreferenz. Dort werden zu jedem Objekt die verfügbaren nach unten Eigenschaften und nach unten Methoden vorgestellt.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Vordefinierte JavaScript-Objekte verwenden

JavaScript-Objekte können Sie jederzeit verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head>
<body>
<script type="text/javascript">
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var NachVoll = ((Minuten < 10) ? ":0" : ":");
if (Jahr < 2000)
  Jahr = Jahr + 1900;
document.write("<h2>Guten Tag!<\/h2><b>Heute ist der " +
               Tag + "." + Monat + "." + Jahr + ". Es ist jetzt " +
               Stunden + NachVoll + Minuten + " Uhr<\/b>");
</script>
</body></html>

Erläuterung:

Im Beispiel wird innerhalb eines Seite JavaScript-Bereichs mit Hilfe des vordefinierten JavaScript-Objekts Date das aktuelle Datum und die aktuelle Uhrzeit ermittelt und HTML-formatiert ausgegeben.

Zuerst muss dazu eine neue Seite Variable angelegt werden. Im Beispiel ist das die Variable Jetzt. Diese Variable soll auf Daten des Date-Objekts zugreifen können. Dies geschieht durch ein Ist-Gleich-Zeichen hinter dem Variablennamen. Dahinter folgt das Seite reservierte Wort new, und dahinter, durch ein Leerzeichen getrennt, der Aufruf von Date() zum Erzeugen einer neuen Instanz des Objekts Date.

Um die einzelnen Daten der Objektinstanz von Date, also Tag, Monat, Jahr usw. anzusprechen, stehen entsprechende nach unten Methoden zur Verfügung. Diese Methoden, z.B. getDate() oder getHours(), haben als Rückgabewert jeweils einen Datums-/Uhrzeit-Bestandteil. So liefert getDate() beispielsweise den aktuellen Tag des Monats und getHours() die aktuelle Stundenzahl des Tages. Im Beispiel wird für jeden der benötigten Bestandteile eine Variable definiert. In der Variablen Tag wird beispielsweise durch Aufruf von Jetzt.getDate() der aktuelle Tag des Monats gespeichert.

Die Anweisung im Beispiel, die mit NachVoll ... beginnt, kann an dieser Stelle nicht näher erläutert werden. Die Anweisung ist eine Vorbereitung zur sauberen Formatierung der Uhrzeit.

Beachten Sie:

Die einzelnen Methoden des im Beispiel verwendeten Objekts Date, wie zum Beispiel getDate(), werden bei der Referenz des Objekts Seite Date beschrieben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Eigene Objekte definieren

Sie können eigene Objekte definieren, wenn Sie streng objektorientiert in JavaScript programmieren wollen.

Um ein eigenes Objekt anzulegen, sind zwei Schritte nötig. Zuerst müssen Sie das Objekt selbst und seine Eigenschaften "deklarieren". Im zweiten Schritt können Sie anschließend eine Instanz dieses Objekts definieren. Mit dieser Objektinstanz können Sie dann Programmprozeduren durchführen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Farbe (R, G, B) {
  this.R = R;
  this.G = G;
  this.B = B;
  this.hex = "#";
}

function HintergrundWechseln () {
  var Hintergrund = new Farbe("E0", "FF", "E0");
  document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;
}
</script>
</head><body bgcolor="#FFFFFF">
<h1>Das eigene Farb-Objekt mit JavaScript</h1>
<a href="javascript:HintergrundWechseln()">Hintergrundfarbe wechseln</a>
</body>
</html>

Erläuterung:

Um ein neues Objekt und seine Eigenschaften anzulegen, müssen Sie innerhalb eines Seite JavaScript-Bereichs oder innerhalb einer Seite separaten JavaScript-Datei eine eigene Seite Funktion definieren, die so aussehen kann wie im Beispiel die Funktion Farbe(...). Der Name, den Sie der Funktion geben (im Beispiel der Name Farbe) ist zugleich der Name des Objekts, das Sie mit dieser Funktion anlegen. Als Parameter, die die Funktion erwartet, notieren Sie die Eigenschaften, die Ihr Objekt haben soll. Die Parameternamen sind zugleich die Namen der Objekteigenschaften. Im Beispiel sind das die Eigenschaften R, G und B, denn es soll ein Objekt angelegt werden, das Rot-, Grün- und Blauwert einer Farbe speichern kann. R, G und B sind dabei übrigens Seite selbstvergebene Namen! Innerhalb der Funktion notieren Sie alle Anweisungen so wie im Beispiel gezeigt: für jede Eigenschaft, die bei den Funktionsparametern festgelegt wurde, notieren Sie eine Anweisung, beginnend mit dem Seite reservierte JavaScript Wort this, gefolgt von einem Punkt und dem Parameternamen. Dahinter notieren Sie ein Gleichheitszeichen, und hinter dem Gleichheitszeichen nochmals den Parameternamen. Am Ende jeder Anweisung muss ein Strichpunkt stehen.
Natürlich können Sie für jedes Objekt auch feste (nicht durch Parameter beeinflusste) Eigenschaften definieren. Im Beispiel ist die Eigenschaft hex eine feste Eigenschaft, die für jede Instanz des Objektes existiert. Notieren Sie dazu hinter dem Eigenschaftsnamen den jeweiligen Wert der Eigenschaft.

Nachdem das Objekt angelegt ist, können Sie an anderen Stellen innerhalb Ihres JavaScripts Instanzen dieses Objekt definieren. Dies geschieht mit Hilfe einer Seite Variablen und dem reservierten JavaScript Wort new. Im Beispiel wird eine zweite Funktion HintergrundWechseln() definiert. Darin wird zunächst eine Variable Hintergrund angelegt. Diese Variable soll Daten des angelegten Objekts Farbe enthalten. Dies geschieht durch ein Gleichheitszeichen hinter dem Variablennamen. Dahinter folgt das Wort new und dahinter, durch ein Leerzeichen getrennt, der Name der Funktion, mit der das gleichnamige Objekt angelegt wurde, im Beispiel Farbe. Als Parameter werden dieser Funktion irgendwelche brauchbaren Werte übergeben, im Beispiel "33", "99" und "C0" (typische hexadezimale Farbwerte, wie sie in HTML zum Einsatz kommen).

Anschließend ist die Variable Hintergrund an das Farbobjekt gebunden, und über sie lassen sich die Eigenschaften des Objekts setzen oder abfragen. Im Beispiel steht die Anweisung:
document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;
Damit wird die Hintergrundfarbe der aktuell angezeigten Seite verändert. Normalerweise könnte man document.bgColor so etwas zuweisen wie "#C0C0EE". Auch im Beispiel wird ein Farbwert dieser Art zugewiesen, jedoch zusammengesetzt aus den Einzeleigenschaften des Farbobjekts, das in der Instanz Hintergrund gespeichert ist. Die Funktion HintergrundWechseln() wird aufgerufen, wenn der Anwender auf den Verweis klickt, der in der HTML-Datei enthalten ist.

Beachten Sie:

Bereits Opera 5 erlaubt das Definieren von eigenen Objekten. Das obige Beispiel wird allerdings erst im Opera 7 korrekt ausgeführt. Dies liegt daran, dass Opera erst ab Version 7 die Eigenschaft document.bgColor unterstützt.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Eigenschaften von Objekten

Objekte können Eigenschaften haben. Ein selbst definiertes Objekt "Mensch" könnte zum Beispiel die Eigenschaften Name, Alter, Geschlecht und Muttersprache haben. Vordefinierte JavaScript-Objekte haben ebenfalls Eigenschaften. So hat das Objekt Seite Math zum Beispiel eine Eigenschaft "PI" (Math.PI). Auf diese Weise lässt sich mit der mathematischen Konstante PI rechnen, ohne deren genauen Wert zu kennen.

Eigenschaften von Objekten können Sie innerhalb Ihres JavaScript-Codes jederzeit auslesen, und in vielen Fällen können Sie die Werte von Eigenschaften auch ändern. So können Sie beispielsweise dem im Browser-Fenster angezeigten Dokument einen neuen, gültigen Seite URI zuweisen. Dadurch erreichen Sie, dass der WWW-Browser einen Sprung zu der zugewiesenen Adresse so ausführt, als ob der Anwender auf einen entsprechenden Verweis klicken würde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<h1>Die Seite, die Sie genau erkennt</h1>
<script type="text/javascript">
var BrowserName = navigator.appName;
var BrowserVersion = navigator.appVersion;
document.write("<p>Ah ja, Sie verwenden also den <b>" + BrowserName +
               "<\/b>, und zwar in der Version <b>" + BrowserVersion +
               "<\/b><\/p>");
</script>
</body></html>

Erläuterung:

Im Beispiel werden innerhalb eines Seite JavaScript-Bereichs zwei Eigenschaften des vordefinierten JavaScript-Objekts Seite navigator in zwei entsprechenden Variablen namens BrowserName und BrowserVersion gespeichert. Das navigator-Objekt stellt Ihnen über seine Eigenschaften verschiedene Informationen über den verwendeten WWW-Browser des Anwenders zur Verfügung. Im obigen Beispiel werden die Eigenschaften des Browser-Namens (gespeichert in der Objekteigenschaft navigator.appName) und der Browser-Version (gespeichert in der Objekteigenschaft navigator.appVersion) ermittelt. Anschließend werden die ermittelten Daten mit document.write() dynamisch ins Browser-Fenster geschrieben.

Objekteigenschaften sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, und dahinter den Namen der Eigenschaft. Dabei sind keine Leerzeichen erlaubt!

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Objektmethoden

Objekte können Methoden haben. Das sind Funktionen, die Aktionen ausführen, aber im Gegensatz zu alleinstehenden Seite Funktionen an ein bestimmtes Objekt gebunden sind. Viele vordefinierte JavaScript-Objekte haben Methoden. So gibt es zum Beispiel das vordefinierte JavaScript-Objekt Seite history, in dem die bereits besuchten URIs eines Browser-Fensters gespeichert sind. Dazu gibt es eine Methode history.back(), mit der Sie in JavaScript einen Rücksprung zu einer bereits besuchten Adresse erzwingen können.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Geh wo hin</title></head><body>
<p><a href="javascript:history.back();">Geh hin wo Du herkommst</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis mit einer speziellen Syntax. Diese Syntax erlaubt Ihnen, beim Anklicken des Verweises JavaScript-Code aufzurufen. Im Beispiel ist das ein Aufruf der Methode back() des Objekts history.

Objektmethoden sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, dahinter den Namen der Methode, und dahinter eine öffnende und eine schließende Klammer. Dabei sind keine Leerzeichen erlaubt! Einige Methoden können auch Parameter beim Aufruf erwarten. Diese Parameter müssen Sie dann zwischen der öffnenden und der schließenden Klammer übergeben.

Beachten Sie:

Mehr zu der Aufrufsyntax bei Verweisen erfahren Sie im Abschnitt über Seite Event-Handler.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Abfragen ob ein Objekt existiert

Es gibt viele JavaScript-Objekte, und es ist oft schwer durchschaubar, welcher Browser in welcher Version welches Objekt interpretiert. Objekte, die nicht interpretierbar sind, führen in den Browsern zu Fehlermeldungen. So kann es vorkommen, dass ein Script, das mit Netscape 4.7 oder Internet Explorer 5.0 wunderbar funktioniert, bei Netscape 4.0 oder Internet Explorer 4.0 zu Fehlermeldungen führt, weil ein Objekt nicht bekannt ist. Deshalb gibt es eine Möglichkeit, den Aufruf von Eigenschaften und Methoden eines Objekts von einer Abfrage abhängig zu machen, ob das Objekt dem Browser überhaupt bekannt ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head><title>Test</title>
</head>
<body>
<h1>Objekt-Abfrage</h1>
<script type="text/javascript">
if (!document.images) {
  document.write("<p>Schade, Ihr Browser kennt das image-Objekt nicht - Sie verpassen was!<br>");
} else {
  document.write("<p>Gut, Ihr Browser kennt das image-Objekt!<br>");
}

if (document.all) {
  document.write("Ihr Browser kennt Microsofts all-Objekt!<\/p>");
} else {
  document.write("Ihr Browser kennt nicht Microsofts all-Objekt.<\/p>");
}
</script>
</body>
</html>

Erläuterung:

Mit einer Seite bedingten Anweisung if (...) können Sie überprüfen, ob ein Objekt verfügbar ist. Als Ausdruck für die Bedingung notieren Sie innerhalb der Klammern hinter if einfach das Objekt, nach dem Sie fragen. Wenn das Objekt verfügbar ist, wird intern der Wert true (wahr) zurückgegeben. In dem Zweig der if-else-Abfrage, die diesen Fall verarbeitet, können Sie dann loslegen und zum Beispiel Befehle verwenden, die dieses Objekt verwenden. In dem anderen Zweig der if-else-Abfrage können Sie dann beispielsweise eine eigene Meldung ausgeben, dass dieses JavaScript leider Befehle verwendet, die der Browser des Anwenders nicht interpretiert.

Im obigen Beispiel werden mit document.write unterschiedliche Sätze ins Browser-Fenster geschrieben. Dazu wird zunächst gefragt, ob das Unterobjekt Seite document.images nicht verfügbar ist (die verneinte Abfrage ergibt sich durch das Ausrufezeichen vor dem Objekt). Ist das Objekt also nicht verfügbar, dann wird im Beispiel ausgegeben, dass dies sehr schade sei usw. Im anderen Fall, also wenn das Objekt verfügbar ist, wird eine erfreutere Reaktion ausgegeben.

Im zweiten Teil des Beispiels wird die Verfügbarkeit des Unterobjekts Seite document.all abgefragt, das nur einigen Browsern bekannt ist, unter anderem dem Internet Explorer. Auch dabei werden im Beispiel wieder je nach Verfügbarkeit zwei unterschiedliche Sätze ausgegeben. An diesem Beispiel ist auch ersichtlich, dass die Abfrage der Verfügbarkeit von Objekten auch zur Browser-Groberkennung dienen kann - vorausgesetzt, man kennt sich bei den vordefinierten JavaScript-Objekten aus und weiß, welche Objekte nur von bestimmten Browsern interpretiert werden.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Mehrere Anweisungen mit einem Objekt ausführen (with)

Hin und wieder kommt es vor, dass Sie mehrere Anweisungen in Folge notieren, die alle mit dem gleichen Objekt arbeiten. Für diesen Zweck können Sie, wenn Sie wollen, eine spezielle verkürzte Schreibweise verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
with (document) {
  open();
  write("<p>Diese Seite hat den Titel " + title + "<\/p>");
  close();
}
</script>
</body></html>

Erläuterung:

Mit with (Objektname) leiten Sie eine solche Schreibweise ein (with = mit). Da normalerweise mehrere Anweisungen folgen, die dieses Objekt verwenden, müssen Sie alle diese Anweisungen in geschweifte Klammern einschließen.

Im obigen Beispiel wird mit dem Seite document-Objekt gearbeitet. Innerhalb der geschweiften Klammern werden die Methoden open(), write() und close() sowie die Eigenschaft title verwendet. Sie alle gehören zum document-Objekt. Normalerweise müssten Sie notieren: document.open() oder document.title. Durch die spezielle Syntax mit with(document) entfällt dies.

Beachten Sie:

Es ist auch möglich, untergeordnete Objekte auf diese Weise anzusprechen, z.B.:

with (document.MeinFormular.Feld_1)
  value = "Stefan";

Achten Sie darauf, dass die aufgerufene Eigenschaft auch tatsächlich existiert. Wenn diese fehlt, erhalten Sie eine JavaScript-Fehlermeldung.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Auf aktuelles Objekt Bezug nehmen (this)

Es gibt Fälle, in denen es eindeutig ist, auf welches Objekt sich ein Befehl bezieht. In solchen Fällen können Sie eine verkürzte Schreibweise benutzen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Eingabe">
<input type="text" name="Feld">
<input type="button" value="OK" onclick="alert(this.form.Feld.value)">
</form>
</body></html>

Erläuterung:

Mit dem Schlüsselwort this können Sie auf ein aktuelles Objekt Bezug nehmen. Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Wenn der Anwender auf den Button klickt, tritt der Seite Event-Handler onclick in Aktion, der als Attribut in dem HTML-Tag für den Button notiert ist. Im Beispiel wird in einem Meldungsfenster der Wert ausgegeben, den der Anwender in dem Eingabefeld eingegeben hat. Normalerweise würde der Befehl so notiert:
alert(document.Eingabe.Feld.value)
Da der Befehl jedoch innerhalb des Formulars steht, auf das er sich bezieht, dürfen Sie auch schreiben:
alert(this.form.Feld.value)
Das Wort form ist dabei vom Seite forms-Objekt abgeleitet.

nach oben
weiter | Seite Funktionen
zurück | Seite Variablen und Werte
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Funktionen

SELFHTML

Funktionen
Informationsseite

nach unten Funktion definieren
nach unten Funktion aufrufen
nach unten Funktion mit Rückgabewert und solche Funktion aufrufen
nach unten Vordefinierte JavaScript-Funktionen
nach unten

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Funktion definieren

Mit Hilfe von Funktionen können Sie eigene, in sich abgeschlossene JavaScript-Prozeduren programmieren, die Sie dann über den Aufruf der Funktion ausführen können. Dabei können Sie bestimmen, bei welchem Ereignis (zum Beispiel, wenn der Anwender einen Button anklickt) die Funktion aufgerufen und ihr Programmcode ausgeführt wird. JavaScript-Code, der nicht innerhalb einer Funktion steht, wird beim Einlesen der Datei vom WWW-Browser sofort ausgeführt!

Eine Funktion ist ein Seite Anweisungsblock. Sie können eigene Funktionen innerhalb eines Seite JavaScript-Bereichs oder in einer Seite separaten JavaScript-Datei definieren. An erlaubten Stellen, z.B. innerhalb der einleitenden HTML-Tags <body...> und <a href...>, oder in einem Formular-Tag wie <input...>, können Sie eine solche selbst definierte Funktion dann mit Hilfe eines Seite Event-Handlers aufrufen. Oder Sie rufen eine Funktion innerhalb einer anderen Funktion auf.

Beispiel einer JavaScript-Funktion:

function PrimzahlCheck (Zahl) {
  if (Zahl >= 2) {
    var Grenzzahl = Zahl / 2;
    var Check = 1;
    for (var i = 2; i <= Grenzzahl; i++)
      if (Zahl % i == 0) {
        alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i);
        Check = 0;
      }
    if (Check == 1)
      alert(Zahl + " ist eine Primzahl!");
  } else {
    alert("Bitte geben Sie eine natürliche Zahl größer als 1 ein!");
  }
}

Erläuterung:

Mit dem Schlüsselwort function leiten Sie die Definition einer Funktion ein. Dahinter folgt, durch ein Leerzeichen getrennt, ein frei wählbarer Funktionsname, im Beispiel: PrimzahlCheck. Vergeben Sie einen Funktionsnamen, der das, was die Funktion leistet, ungefähr beschreibt. Beachten Sie dabei die Regeln für Seite selbst vergebene Namen.

Unmittelbar hinter dem Funktionsnamen folgt eine öffnende Klammer. Wenn die Funktion keine Parameter erwarten soll, notieren Sie dahinter sofort wieder eine schließende Klammer. Wenn die Funktion Parameter übergeben bekommen soll, notieren Sie innerhalb der Klammer die Namen der Parameter. Die Namen der Parameter sind frei wählbar. Bei den Parameternamen gelten die gleichen Regeln wie beim Funktionsnamen. Mehrere Parameter werden durch Kommata voneinander getrennt. Im obigen Beispiel erwartet die Funktion PrimzahlCheck einen Parameter Zahl.

Der gesamte Inhalt der Funktion wird in geschweifte Klammern { und } eingeschlossen. Diese Klammern dürfen niemals fehlen!

Die Anweisungen innerhalb der Funktion können sehr unterschiedlicher Natur sein. Da können Sie z.B. Seite Objekte manipulieren, übergebene Parameter verarbeiten und ändern, Berechnungen anstellen usw. Sie können innerhalb von Funktionen auch andere Funktionen aufrufen. Welche Anweisungen innerhalb einer Funktion stehen, hängt davon ab, was die Funktion leisten soll. Im obigen Beispiel wird ermittelt, ob die übergebene Zahl eine Primzahl ist. Wenn es keine ist, wird für jede Zahl, durch die sie teilbar ist, eine entsprechende Meldung ausgegeben. Wenn es eine Primzahl ist, wird am Ende ausgegeben, dass es sich um eine Primzahl handelt.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Funktion aufrufen

Sie können eine selbst definierte Funktion aufrufen, um den darin enthaltenen JavaScript-Code auszuführen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function PrimzahlCheck (Zahl) {
  Zahl = parseInt(Zahl, 10);
  if (isNaN(Zahl)) {
    alert("Sie müssen eine Zahl eingeben!");
    return;
  }
  var Grenzzahl = Zahl / 2;
  var Check = 1;
  for (var i = 2; i <= Grenzzahl; i++)
    if (Zahl % i == 0) {
      alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i);
      Check = 0;
    }
  if (Check == 1)
    alert(Zahl + " ist eine Primzahl!");
}
</script>
</head>
<body>
<form name="PrimzahlFormular" action="">
<p>Geben Sie eine Zahl ein. Es wird geprüft, ob es sich um eine Primzahl handelt.</p>
<input type="text" name="Eingabezahl">
<input type="button" value="auf Primzahl checken"
onclick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)">
</form>
</body>
</html>

Erläuterung:

Das obige Beispiel zeigt eine komplette HTML-Datei. Darin ist ein JavaScript-Bereich definiert, in dem wiederum die Funktion PrimzahlCheck() definiert ist. Im Dateikörper der HTML-Datei steht ein Formular mit einem Eingabefeld und einem Button. Im Eingabefeld kann der Anwender eine Zahl eingeben. Wenn er auf den Button klickt, wird die JavaScript-Funktion aufgerufen und ermittelt, ob es sich bei der Eingabe um eine Primzahl handelt. Dazu enthält der Button den Seite Event-Handler onclick (= beim Anklicken). Dahinter wird die JavaScript-Funktion mit der eingegebenen Zahl aufgerufen.

Die Funktion rufen Sie mit ihrem Funktionsnamen auf. Dahinter folgt die öffnende Klammer. Wenn die Funktion keine Parameter erwartet, notieren Sie hinter der öffnenden gleich eine schließende Klammer. Wenn die Funktion Parameter erwartet, müssen Sie für jeden Parameter einen erlaubten Wert übergeben. Im Beispiel erwartet die Funktion einen Parameter. Wenn Sie mehrere Parameter übergeben, trennen Sie diese durch Kommata.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Funktion mit Rückgabewert und solche Funktion aufrufen

Eine Funktion kann einen ermittelten Wert an die aufrufende Instanz zurückgeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function BruttoBetrag (Netto, Prozente) {
  var Ergebnis = Netto * (1 + (Prozente / 100));
  return Ergebnis;
}

function SchreibeBrutto (Betrag, Prozentsatz) {
  var Wert = BruttoBetrag(Betrag, Prozentsatz);
  document.BruttoForm.Ergebnisfeld.value = Wert;
}
</script>
</head>
<body>
<form name="BruttoForm" action="">
<pre>
Nettobetrag: <input type="text" name="NettoEingabe">
Prozentsatz: <input type="text" name="ProzentEingabe"></pre>
<p>Kommabetrag mit Punkt eingeben!</p>
<input type="button" value="Brutto ermitteln"
onclick="SchreibeBrutto(document.BruttoForm.NettoEingabe.value,document.BruttoForm.ProzentEingabe.value)">
<pre>
Ergebnis:    <input type="text" name="Ergebnisfeld"></pre>
</form>
</body>
</html>

Erläuterung:

Das obige Beispiel zeigt eine HTML-Datei, in deren Dateikopf ein Seite JavaScript-Bereich definiert ist, in dem wiederum die zwei Funktionen BruttoBetrag(...) und SchreibeBrutto(...) definiert sind. Im Dateikörper der HTML-Datei steht ein Formular mit je einem Eingabefeld für einen Nettobetrag und einen Prozentwert. Wenn der Anwender auf den darunter definierten Button klickt, wird die Funktion SchreibeBrutto(...) aufgerufen. Diese wiederum ruft die Funktion BruttoBetrag(...) auf.

Da die Funktion BruttoBetrag(...) ihr errechnetes Ergebnis an die aufrufende Instanz zurückgibt, wird in SchreibeBrutto(...) eine Seite Variable mit dem Namen Wert definiert, die diesen Rückgabewert speichert. Das Ergebnis, das in dieser Variablen gespeichert ist, schreibt die Funktion schließlich in ein Feld, das innerhalb des Formulars eigens für diesen Zweck eingerichtet wurde: das Eingabefeld mit dem Namen Ergebnisfeld.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Vordefinierte JavaScript-Funktionen

Es gibt ein paar Funktionen, die bereits in JavaScript integriert sind. Solche Funktionen können Sie aufrufen, ohne sie selbst zu definieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Rechne (Operation) {
  var Ergebnis = eval(Operation);
  alert("Ergebnis: " + Ergebnis);
}
</script>
</head>
<body>
<form name="Formular">
<p>Geben Sie eine Rechenaufgabe (z.B. 8*5) ein:</p>
<input type="text" name="Eingabe">
<input type="button" value="OK"
onclick="Rechne(document.Formular.Eingabe.value)">
</form>
</body>
</html>

Erläuterung:

Das obige Beispiel zeigt eine HTML-Datei mit einem Seite JavaScript-Bereich, in dem wiederum eine Funktion Rechne() definiert ist. Innerhalb des Dateikörpers der HTML-Datei ist ein Formular mit einem Eingabefeld notiert. In dem Eingabefeld kann der Anwender eine Rechenaufgabe eingeben, z.B. 1 + 1 oder (28.76 - 0.00001) * 7. Beim Anklicken des Klick-Buttons wird die Funktion Rechne() aufgerufen. Sie erwartet als Parameter eine Rechenaufgabe. Deshalb wird ihr der Inhalt des Formulareingabefeldes beim Aufruf übergeben. Die Funktion Rechne bedient sich zur Berechnung des Ergebnisses der äußerst mächtigen vordefinierten Funktion eval() (eval = evaluate = berechne). Diese kann - unter anderem - Rechenoperationen als solche erkennen und ausrechnen. Das Rechenergebnis wird im Beispiel in einem Meldungsfenster ausgegeben.

Beachten Sie:

Eine Übersicht aller vordefinierten JavaScript-Funktionen finden Sie im Abschnitt Seite Objektunabhängige Funktionen.

nach oben
weiter | Seite Steuerzeichen und besondere Notationen
zurück | Seite Objekte, Eigenschaften und Methoden
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Steuerzeichen und besondere Notationen

SELFHTML

Steuerzeichen und besondere Notationen
Informationsseite

nach unten Steuerzeichen bei Zeichenketten
nach unten Notation numerischer Werte
nach unten

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Steuerzeichen bei Zeichenketten

Bei Zeichenkettenvariablen gibt es die Möglichkeit, Steuerzeichen in den Variablenwert einzufügen.

Beispiel:

<script type="text/javascript">
var Variable1 = "Hier erfolgt ein\"Anführungszeichen";
var Variable2 = "Hier erfolgt ein\\Backslash";
var Variable3 = "Hier erfolgt ein\nZeilenvorschub (Linefeed, LF)";
var Variable4 = "Hier erfolgt ein\rWagenrücklauf (Carriage Return, CR)";
var Variable5 = "Hier erfolgt ein\tTabulator";
var Variable6 = "Hier erfolgt ein\bBackspace";
var Variable7 = "Hier erfolgt ein\fSeitenvorschub (Formfeed, FF)";
</script>

Erläuterung:

Steuerzeichen dieser Art werden durch das Zeichen \ eingeleitet. Dahinter folgt ein Buchstabe, der das Steuerzeichen markiert.

Die Zeichenfolge \" müssen Sie notieren, wenn Sie innerhalb einer Zeichenkette ein Anführungszeichen verwenden möchten.
Die Zeichenfolge \\ müssen Sie notieren, um einen einzelnen Backslash zu erhalten.
Die Zeichenfolge \n ist z.B. in Seite alert-Meldungen sinnvoll, um innerhalb des auszugebenden Textes einen Zeilenumbruch einzufügen.
Die Zeichenfolge \r ist in Kombination mit \n als Zeilenvorschub in DOS-Systemen vorgesehen. Ihre Verwendung in JavaScript ist auch unter Windows im Allgemeinen nicht notwendig.
Die Zeichenfolge \t ist als Tabulatorzeichen z.B. sinnvoll, um etwa innerhalb einer alert(...)-Meldung tabellarische Information auszugeben.
Die Zeichenfolge \b entspricht der Backspace-Taste der Tastatur und löscht das vorhergehende Zeichen in der Ausgabe.
Die Zeichenfolge \f dient bei Druckern dazu, die aktuell bedruckte Seite auszuwerfen und auf einer frischen Seite weiterzudrucken. Sie dürfte in der Praxis keinerlei Relevanz für JavaScriptanwendungen haben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Notation numerischer Werte

Sie können Zahlen ganz normal notieren. Beachten Sie dabei nur, dass bei Kommazahlen anstelle eines Kommas ein Punkt verwendet werden muss. So wird die Zahl Pi beispielsweise als 3.1415 notiert. Für sehr hohe und sehr niedrige Zahlen und für komplexe Kommazahlen gibt es daneben aber noch andere Notationsmöglichkeiten.

Beispiel:

<script type="text/javascript">
var a = 1E1;
var b = 1.2345E4;
var c = 2e-3;
</script>

Erläuterung:

Mit e oder E bestimmen Sie die Zehnerpotenz bzw. die Anzahl Nullen, die hinter der Zahl vor dem e bzw. E stehen.

Die erste Zahl im Beispiel, 1E1, ist eine 1 mit einer 0 dahinter, also 10.
Die zweite Zahl im Beispiel, 1.2345E4, ist eine andere Schreibweise für 12345. Der Dezimalpunkt wird also einfach um so viele Stellen nach rechts verschoben, wie hinter dem E-Zeichen angegeben.
Die dritte Zahl im Beispiel, 2e-3, ist eine andere Schreibweise für 0.002. Der Dezimalpunkt wird also einfach um so viele Stellen nach links verschoben, wie hinter dem E-Zeichen angegeben. Diese umgekehrte Richtung wird durch das Minuszeichen bewirkt, das hinter dem e folgt.

nach oben
weiter | Seite Operatoren
zurück | Seite Funktionen
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Operatoren

SELFHTML

Operatoren
Informationsseite

nach unten Zuweisungsoperator
nach unten Vergleichsoperatoren
nach unten Berechnungsoperatoren
nach unten Logische Operatoren
nach unten Bit-Operatoren
nach unten Operator zur Zeichenkettenverknüpfung
nach unten Operatorenrangfolge
nach unten Operator zur Typenbestimmung
nach unten void-Operator
nach unten Operator zum Löschen von Objekten

nach unten

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zuweisungsoperator

Sie können zum Beispiel einer Variablen einen Wert zuweisen. Der Zuweisungsoperator dafür ist ein Istgleichzeichen.

Beispiel:

<script type="text/javascript">
var SinnDesLebens = 42;
</script>

Erläuterung:

Im Beispiel wird eine Seite Variable namens SinnDesLebens definiert. Der Variablen wird mit dem Zuweisungsoperator = der Wert 42 zugewiesen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Vergleichsoperatoren

Vergleichsoperatoren brauchen Sie, wenn Sie zwei Werte vergleichen wollen, z.B. den aktuellen Inhalt einer Seite Variablen mit einem fixen Wert. Vor allem bei Seite bedingten Anweisungen und Seite Schleifen kommt das vor.

Beispiel:

<script type="text/javascript">
var SinnDesLebens = 42;
var Alter = 8;

if (SinnDesLebens == 42)
  alert(1);
if (SinnDesLebens != 42)
  alert(0);
if (SinnDesLebens > 42)
  alert(0);
if (SinnDesLebens < 42)
  alert(0);
if (Alter >= 18)
  alert("SIE duerfen das hier sehen!");
if (Alter <= 17)
  alert("SIE duerfen das hier NICHT sehen!");
</script>

Erläuterung:

Um abzufragen, ob zwei Werte gleich sind, notieren Sie zwei Istgleichzeichen == nebeneinander.
Um abzufragen, ob zwei Werte unterschiedlich sind, notieren Sie zwischen beiden Werten die Zeichen !=.
Um abzufragen, ob ein Wert größer oder gleich ist als ein anderer, notieren Sie die Zeichen >=.
Um abzufragen, ob ein Wert in jedem Fall größer ist als ein anderer, notieren Sie das Zeichen >.
Um abzufragen, ob ein Wert kleiner oder gleich ist als ein anderer, notieren Sie die Zeichen <=.
Um abzufragen, ob ein Wert in jedem Fall kleiner ist als ein anderer, notieren Sie das Zeichen <.
Nähere Information zu der If-Abfrage erhalten Sie im Abschnitt über bedingte Anweisungen.

Ab der JavaScript-Version 1.2 können Sie Gleichheit/Ungleichheit nicht nur mit == bzw. !=, sondern auch mit === bzw. !== abprüfen. In diesem Fall werden die Werte zusätzlich auf ihren Variablentyp hin überprüft. So wird z.B. die Anweisung if (SinnDesLebens === "42") alert(1) nicht ausgeführt. Berücksichtigen Sie bei der Verwendung dieser Operatoren, dass ältere Browser darauf mit einer Fehlermeldung reagieren.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Berechnungsoperatoren

Um mit numerischen Werten Berechnungen durchzuführen, brauchen Sie Berechnungsoperatoren.

Beispiel:

<script type="text/javascript">
var Zwei = 1 + 1;
var GarNix = 1 - 1;
var AuchNix = 81 / 3 - 27;
var WenigerAlsNix = 81 / (3 - 27);
var SinnDesLebens = 6 * 7;
var MachtAuchSinn = 84 / 2;
var x = Jahr % 4;
if (x == 0)
  Schaltjahr = true;

/* Besondere Notationen: */

var Zahl;
Zahl += 3;
Zahl++;
Zahl -= 2;
Zahl--;
Zahl *= 4;
Zahl /= 3;
</script>

Erläuterung:

Mathematische Operatoren notieren Sie mit den dafür üblichen Zeichen. Mit + notieren Sie eine Addition, mit - eine Subtraktion, mit * eine Multiplikation, mit / eine Division. Eine Besonderheit stellt der Operator % dar. Damit wird eine so genannte Modulo-Division durchgeführt. Bei einer Modulo-Division werden zwei Werte dividiert. Das Ergebnis ist jedoch im Gegensatz zur normalen Division nur der Restwert der Division. Wenn Sie z.B. 13 % 5 notieren, erhalten Sie als Ergebnis 3, weil 13 geteilt durch 5 gleich 2 Rest 3 ergibt. Diese 3 ist es, die als Ergebnis einer Modulo-Division herauskommt.

Sie können mehrere Operationen in Reihe notieren. Dabei gilt die übliche "Punkt-vor-Strich-Regel". Wenn Sie eine andere Regel erzwingen wollen, müssen Sie Klammern verwenden, so wie im vierten der obigen Beispiele.

Die besonderen Notationen, die in den obigen Beispielen vorkommen, können Sie verwenden, wenn Sie Additionen oder Subtraktionen abkürzen wollen:
Zahl += 3; ist eine Abkürzung für Zahl = Zahl + 3;
Zahl++; ist eine Abkürzung für Zahl = Zahl + 1;
Zahl -= 2; ist eine Abkürzung für Zahl = Zahl - 2;
Zahl--; ist eine Abkürzung für Zahl = Zahl - 1;

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Logische Operatoren

Logische Operatoren brauchen Sie, wenn Sie komplexere Bedingungen für Seite bedingte Anweisungen oder Seite Schleifen formulieren wollen.

Beispiel:

<script type="text/javascript">
var PLZ = 81000;
var x = 20, y = 8;
var name = "";

if (PLZ >= 80000 && PLZ <= 82000)
  alert("Sie wohnen wohl in Muenchen oder Umgebung!");

if (x > 100 || y == 0)
  break;
if (!name)
  alert("Sie haben vergessen, einen Namen einzugeben!");
</script>

Erläuterung:

Mit dem logischen Operator && verknüpfen Sie zwei oder mehrere Bedingungen durch "und", d.h. beide bzw. alle Bedingungen müssen erfüllt sein, damit die gesamte Bedingung erfüllt ist.
Mit dem logischen Operator || verknüpfen Sie zwei oder mehrere Bedingungen inklusiv durch "oder", d.h. es genügt, wenn eine der Bedingungen erfüllt ist, damit die gesamte Bedingung erfüllt ist.
Der logische Operator ! (engl. not) prüft, ob ein Ausdruck unwahr ist. Der Ausdruck if (!name) trifft zu, wenn name gleich null, 0, ein Leerstring oder undefiniert ist.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Bit-Operatoren

Bit-Operatoren sind nur etwas für Profis. Um Bit-Operatoren richtig einzusetzen, müssen Sie viel von computer-internen Speichervorgängen verstehen. Deshalb werden die Bit-Operatoren hier nur kurz erwähnt.

>> verschiebt Bits nach rechts
<< verschiebt Bits nach links
& definiert in einer Bitmaske eine Und-Bedingung
| definiert in einer Bitmaske eine inklusive Oder-Bedingung
^ definiert in einer Bitmaske eine exklusive Oder-Bedingung
~ Bitweise Nicht-Operator, tauscht alle Nullen in Einsen und umgekehrt

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Operator zur Zeichenkettenverknüpfung

Mit einem einfachen Pluszeichen + können Sie eine Zeichenkette an eine andere anhängen.

Beispiel:

<script type="text/javascript">
var Vorname = "Stefan ";
var Zuname = "Muenz";
var Name = Vorname + Zuname + ", der Autor dieses Dokuments";
</script>

Erläuterung:

Sie können sowohl Zeichenkettenvariablen als auch direkte Zeichenkettenangaben mit + aneinanderhängen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Operatorenrangfolge

Unter den Operatoren von JavaScript gibt es eine festgelegte Rangordnung. Wenn Sie komplexe Rechenoperationen durchführen oder mehrere Bedingungen miteinander verknüpfen, gilt bei der internen Auflösung solcher komplexen Ausdrücke die folgende Rangordnung:

  1. Rangstufe: , (Aneinanderreihung)
  2. Rangstufe: = += -= <<= >>= &= ^= |=
  3. Rangstufe: ?: ( Seite Entweder-Oder-Bedingung)
  4. Rangstufe: ||
  5. Rangstufe: &&
  6. Rangstufe: |
  7. Rangstufe: ^
  8. Rangstufe: &
  9. Rangstufe: == === != !==
  10. Rangstufe: < <= > >=
  11. Rangstufe: << >> >>>
  12. Rangstufe: + -
  13. Rangstufe: * / %
  14. Rangstufe: ! ~ - ++ --
  15. Rangstufe: () [] . (Klammerung und Vektoren)

Mit Hilfe von Klammern, die absichtlich die unterste Rangstufe in der Prioritätshierarchie darstellen, können Sie die Rangfolge bei den Operatoren beeinflussen und Ausdrücke so bewerten, wie Sie es wünschen.

Beispiel:

<script type="text/javascript">
var OffizielleStatistik = 3.29 * 3 + 4.71;
var MeineStatistik = 3.29 * (3 + 4.71);
</script>

Erläuterung:

Das Beispiel zeigt, wie Sie durch Setzen von Klammern das Ergebnis einer Rechenoperation beeinflussen können.

JavaScript 1.1 Netscape 3.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Operator zur Typenbestimmung

Methoden Seite vordefinierter Objekte sind an feste Variablentypen gebunden. Bevor Sie diese verwenden können, sollten Sie im Zweifelsfall den Typ der Variable prüfen. Mit dem Operator typeof steht Ihnen ein Werkzeug zur Typenüberprüfung zur Verfügung.

Beispiel:

<script type="text/javascript">
var Zahl = 2505;
alert(typeof Zahl);
</script>

Erläuterung:

Der Operator typeof wertet den nachfolgenden Operanden hinsichtlich seines Typs aus. Der Rückgabewert dieses Operators ist ein String, den Sie abfragen können. Mögliche Rückgabewerte sind:
boolean (Ja/Nein-Variable),
string (Zeichenkettenvariable),
number (numerische Variable),
function (Funktion),
object (Objekt),
undefined (unbestimmter Typ).
Anweisungen müssen in Klammern eingeschlossen werden, z.B. typeof(Zahl=Zahl+2).

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 void-Operator

Der Operator void wird dann verwendet, wenn eine Anweisung ausgeführt werden soll, aber keine Rückgabewerte erzeugt werden dürfen. Das ist z.B. dann der Fall, wenn Sie so genannte "Bookmarklets" erzeugen möchten.

Beispiel:

<script type="text/javascript">
var Zahl = 2505;
void Zahl++;
</script>

Erläuterung:

Der Operator void führt die nach ihm notierte Anweisung aus. Der Operator ersetzt dabei die Rückgabewerte der Anweisung stets durch undefined. Sie können auch eine Anweisung wie z.B. Zahl=Zahl+2 als Operand angeben. In diesem Fall schließen Sie die Anweisung in Klammern ein, also void(Zahl=Zahl+2).

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Operator zum Löschen von Objekten

Nicht mehr benötigte Objekte bzw. Objekteigenschaften werden mit dem Operator delete gelöscht. Sie können jedoch keine vordefinierten Objekte und Objekteigenschaften löschen. Der Operator gibt im Erfolgsfall den Wert true und bei Misserfolg den Wert false zurück.

Beispiel:

<script type="text/javascript">
SinnDesLebens = 42;
delete SinnDesLebens;
alert(typeof SinnDesLebens);
</script>

Erläuterung:

Im Beispiel wird der Variablen SinnDesLebens der Wert 42 zugewiesen. Anschließend wird diese Variable mit delete wieder gelöscht. Mit Hilfe des Operators typeof wird überprüft, ob das Löschen der Variablen erfolgreich ist.

Beachten Sie:

In Netscape bis einschließlich Version 6 können nur Variablen und Objekte gelöscht werden, die nicht mit dem Schlüsselwort var deklariert wurden.

Auf vordefinierte Objekte oder Objekteigenschaften wie z.B. Math.PI können Sie diesen Operator nicht anwenden.

nach oben
weiter | Seite Bedingte Anweisungen (if-else/switch)
zurück | Seite Steuerzeichen und besondere Notationen
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Bedingte Anweisungen (if-else/switch)

SELFHTML

Bedingte Anweisungen (if-else/switch)
Informationsseite

nach unten Wenn-Dann-Bedingungen mit "if"
nach unten Einfache Entweder-Oder-Abfrage
nach unten Fallunterscheidung mit "switch"
nach unten

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Wenn-Dann-Bedingungen mit "if"

Sie können die Ausführung von Anweisungen von Bedingungen abhängig machen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Passwort = Traumtaenzer)

<html><head><title>Test</title>
<script type="text/javascript">
function Geheim () {
  var Passwort = "Traumtaenzer";
  var Eingabe = window.prompt("Bitte geben Sie das Passwort ein", "");
  if (Eingabe != Passwort) {
    alert("Falsches Passwort!");
  } else {
    location.href = "geheim.htm";
  }
}
</script>
</head><body onload="Geheim()">
<h1>Hier kommen Sie nur mit Passwort rein ;-)</h1>
</body></html>

Erläuterung:

Das Beispiel stellt eine einfache Passwortabfrage dar. Das Script ist in einer Seite Funktion namens Geheim() notiert, die aufgerufen wird, sobald die HTML-Datei vollständig geladen ist. Dazu ist im einleitenden <body>-Tag der Seite Event-Handler onload notiert. Innerhalb der Funktion fordert ein Dialogfenster (window.prompt()) den Anwender auf, das Passwort einzugeben. Der Rückgabewert von window.prompt(), das eingegebene Passwort, wird in der Variablen Eingabe gespeichert.
Mit if (Eingabe != Passwort) fragt das Script ab, ob die Eingabe anders lautet als der der Variablen Passwort zuvor zugewiesene Wert Traumtaenzer. Ist dies der Fall, sind also beide Werte nicht gleich, dann war die Eingabe falsch. In diesem Fall wird mit alert() eine entsprechende Meldung ausgegeben. Im anderen Fall (else), wenn Eingabe und Passwort den gleichen Wert haben, wird mit Seite location.href eine andere Seite aufgerufen, nämlich die "geschützte" Seite.

Mit if leiten Sie eine Wenn-Dann-Bedingung ein (if = wenn). Dahinter folgt, in Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu formulieren, brauchen Sie Seite Vergleichsoperatoren und in den meisten Fällen auch Seite Variablen. Für Fälle, in denen die Bedingung nicht erfüllt ist, können Sie einen "andernfalls"-Zweig definieren. Dies geschieht durch else (else = sonst).

Der Else-Zweig ist nicht zwingend erforderlich. Wenn Sie mehr als eine Anweisung unterhalb und abhängig von if oder else notieren wollen, müssen Sie die Anweisungen in geschweifte Klammern einschließen (siehe auch den Abschnitt über Seite Anweisungsblöcke).

Beachten Sie:

Eine Passwortabfrage wie im Beispiel stellt keine zuverlässige Möglichkeit dar, um Zugriffe auf eine Webseite zu kontrollieren. Denn das Passwort steht für jeden lesbar im Quelltext und die "geschützte" Seite kann unter Umgehung der Passwortabfrage aufgerufen werden. Verwenden Sie deshalb in der Praxis "richtige" Schutzmechanismen wie beispielsweise eine Seite Zugriffskontrolle mit .htaccess.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Einfache Entweder-Oder-Abfrage

Für einfache Entweder-Oder-Bedingungen gibt es eine spezielle Syntax, die Sie alternativ zur if/else-Anweisung verwenden können.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Antwort () {
  var Ergebnis = (document.Formular.Eingabe.value == "42") ? "RICHTIG!" : "FALSCH!";
  document.Formular.Eingabe.value = "Die Antwort ist " + Ergebnis;
}
</script>
</head><body>
<h1>Der Sinn des Lebens</h1>
<form name="Formular">
<p>Was ist der Sinn des Lebens?</p>
<input type="text" name="Eingabe" size="40">
<input type="button" value="OK" onclick="Antwort()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält eine JavaScript- Seite Funktion namens Antwort(). Aufgerufen wird diese Funktion, wenn der Anwender in dem weiter unten notierten HTML-Formular auf den Klick-Button mit der Aufschrift OK klickt, und zwar mit dem Seite Event-Handler onclick. Die Funktion prüft, ob der Wert des Eingabefeldes im Formular (document.Formular.Eingabe.value) den Wert 42 hat. Abhängig davon wird der Variablen Ergebnis entweder der Wert RICHTIG! oder FALSCH! zugewiesen. Anschließend wird in dem Textfeld des Formulars, das zur Eingabe diente, ein entsprechender Satz zusammengesetzt (siehe dazu auch Seite Operator für Zeichenkettenverknüpfung).

Eine einfache Entweder-Oder-Abfrage wird mit einer Bedingung eingeleitet. Die Bedingung muss in Klammern stehen, im Beispiel (document.Formular.Eingabe.value == "42"). Dahinter wird ein Fragezeichen notiert. Hinter dem Fragezeichen wird ein Wert angegeben, der aktuell ist, wenn die Bedingung erfüllt ist. Dahinter folgt ein Doppelpunkt, und dahinter ein Wert für den Fall, dass die Bedingung nicht erfüllt ist. Da es sich um Werte handelt, die für die Weiterverarbeitung nur sinnvoll sind, wenn sie in einer Variablen gespeichert werden, wird einer solchen Entweder-Oder-Abfrage in der Regel eine Seite Variable vorangestellt, im Beispiel die Variable Ergebnis. Der Variablen wird durch diese Art von Anweisung das Ergebnis der Entweder-Oder-Abfrage zugewiesen.

Um Bedingungen zu formulieren, brauchen Sie Seite Vergleichsoperatoren.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Fallunterscheidung mit "switch"

Mit if und else können Sie genau zwei Fälle unterscheiden. Wenn Sie feiner differenzieren, also zwischen mehreren Fällen unterscheiden wollen, können Sie zwar mehrere if-Abfragen hintereinander notieren, aber es gibt noch eine elegantere Möglichkeit: die Fallunterscheidung mit "switch". Diese Syntax, die der Programmiersprache C entlehnt ist, gibt es in JavaScript aber erst seit der Sprachversion 1.2 - ältere Browser quittieren solche Anweisungen mit einer Fehlermeldung.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Eingabe = window.prompt("Geben Sie eine Zahl zwischen 1 und 4 ein:", "");
switch (Eingabe) {
  case "1":
    alert("Sie sind sehr bescheiden");
    break;
  case "2":
    alert("Sie sind ein aufrichtiger Zweibeiner");
    break;
  case "3":
    alert("Sie haben ein Dreirad gewonnen");
    break;
  case "4":
    alert("Gehen Sie auf allen Vieren und werden Sie bescheidener");
    break;
  default:
    alert("Sie bleiben leider dumm");
    break;
}
</script>
</body></html>

Erläuterung:

Mit switch leiten Sie eine Fallunterscheidung ein (switch = Schalter). Dahinter folgt, in runde Klammern eingeschlossen, eine Variable oder ein Ausdruck, für dessen aktuellen Wert Sie die Fallunterscheidung durchführen. Im Beispiel ist das die Variable mit dem Namen Eingabe. Diese Variable wird vor der Fallunterscheidung mit einem Wert versorgt, denn ein Dialogfenster (window.prompt()) mit einem Eingabefeld fordert den Anwender auf, eine Zahl zwischen 1 und 4 einzugeben. Der eingegebene Wert wird in Eingabe gespeichert.

Die einzelnen Fälle, die Sie abfragen möchten, werden innerhalb geschweifter Klammern notiert. Jeden einzelnen Fall leiten Sie mit case ein (case = Fall). Dahinter folgt die Angabe des Wertes, auf den Sie prüfen wollen. Die Anweisung case "1": im obigen Beispiel bedeutet dann so viel wie: 'wenn die Variable Eingabe den Wert "1" hat'. Im Beispiel wird für jeden Fall eine individuelle Meldung ausgegeben.

Wichtig ist dabei auch das Wort break am Ende jedes Falls (break = abbrechen). Wenn Sie das Wort weglassen, werden nämlich alle nachfolgenden Fälle auch ausgeführt, aber das wollen Sie ja in der Regel nicht.

Für den Fall, dass keiner der definierten Fälle zutrifft, können Sie am Ende der Fallunterscheidung den Fall default: definieren. Die darunter stehenden Anweisungen werden ausgeführt, wenn keiner der anderen Fälle zutrifft.

nach oben
weiter | Seite Schleifen (while/for/do-while)
zurück | Seite Operatoren
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Schleifen (while/for/do-while)

SELFHTML

Schleifen (while/for/do-while)
Informationsseite

nach unten Schleifen mit "while"
nach unten Schleifen mit "for"
nach unten Schleifen mit "do-while"
nach unten Kontrolle innerhalb von Schleifen - break und continue
nach unten

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Schleifen mit "while"

Mit Hilfe von while-Schleifen können Sie Programmanweisungen solange wiederholen, wie die Bedingung, die in der Schleife formuliert wird, erfüllt ist. Solche Schleifen eignen sich dann, wenn Sie nicht wissen, wie oft die Schleife durchlaufen werden soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Eingabe = "";
var Zaehler = 1;
while (Eingabe != "how to make love" && Zaehler <= 3) {
  Eingabe = window.prompt(Zaehler + ". Versuch: Was bedeutet 'HTML'?", "");
  Zaehler++;
}

if (Eingabe != "how to make love") {
  document.write("<big>Lernen Sie erst mal HTML! ...<\/big>");
} else {
  document.write("<big>Fein, Sie haben verstanden worum es geht! ...<\/big>");
}
</script>
</body></html>

Erläuterung:

Das Beispiel bittet den Anwender in einer while-Schleife bis zu drei mal in einem Dialogfenster (window.prompt()), die Bedeutung der Abkürzung 'HTML' einzugeben. Die Schleife kann aus zwei Gründen beendet werden: entweder der Anwender gibt die richtige Bedeutung der Abkürzung ein, oder die Variable Zaehler, die die Anzahl der Versuche mitzählt, hat einen Wert größer als 3. Wenn die Schleife beendet ist, steht also nicht fest, aus welchen der beiden möglichen Ursachen sie beendet wurde. Um das zu entscheiden, wird im Beispiel deshalb anschließend mit Hilfe einer Seite if-Abfrage nochmals überprüft, ob die Schleife deshalb beendet wurde, weil die Eingabe falsch war. Je nachdem, ob sie falsch oder richtig war, wird mit document.write ins Anzeigefenster des Browsers ein entsprechender Satz geschrieben.

Eine while-Schleife beginnt mit dem Wort while (while = solange). Dahinter folgt, in Klammern stehend, die Bedingung. Um eine Bedingung zu formulieren, brauchen Sie Seite Vergleichsoperatoren. Der Inhalt der Schleife wird solange wiederholt, wie die Schleifenbedingung wahr ist.

In der Regel enthält eine while-Schleife mehrere Anweisungen, die innerhalb der Schleife stehen. Notieren Sie alle Anweisungen innerhalb geschweifter Klammern { und }, so wie im Beispiel (siehe auch den Abschnitt über Seite Anweisungsblöcke).

Beachten Sie:

Achten Sie bei while-Schleifen immer darauf, dass es mindestens eine Möglichkeit gibt, um die Schleife nach einer angemessenen Zeit zu beenden. Andernfalls erzeugen Sie eine so genannte "Endlosschleife", aus der der Anwender nur durch gewaltsames Beenden des WWW-Browsers herauskommt. Das ist besonders bei Online-Sitzungen im WWW sehr ärgerlich!

Um Endlosschleifen zu vermeiden, brauchen Sie irgendetwas, das irgendwann zu einem Ausweg aus der Schleife führt. Meistens werden zu diesem Zweck so genannte "Zähler" definiert, im Beispiel die Variable Zaehler. Diese Variable hat im Beispiel einen Anfangswert von 1 und wird innerhalb der Schleife bei jedem Durchgang mit der Anweisung Zaehler++; um 1 erhöht. Wenn im Beispiel der Zählerstand größer als 3 ist, wird abgebrochen.

Weitere Möglichkeiten, um Schleifen abzubrechen, werden nach unten weiter unten beschrieben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Schleifen mit "for"

Die Schleifenbedingung einer for-Schleife sieht von vorneherein einen Zähler und eine Abbruchbedingung vor.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Ausgabe = "";
for (var i = 10; i <= 36; i++)
  Ausgabe = Ausgabe + '<span style="font-size:' + i + 'px">Schrift mit ' +
    i + ' Pixel Gr&ouml;&szlig;e<\/span><br>';
document.write(Ausgabe);
</script>
</body></html>

Erläuterung:

Das Beispiel definiert eine Variable namens Ausgabe, die im Verlauf einer for-Schleife immer mehr Inhalt erhält und am Ende mit document.write ihren ganzen Inhalt ins Browser-Fenster schreibt. Die for-Schleife wird insgesamt 27 mal durchlaufen, nämlich so oft, wie der Zähler, der in der Variablen i definiert und mit dem Wert 10 initialisiert wird, kleiner oder gleich 36 ist, wobei er bei jedem Schleifendurchlauf um 1 erhöht wird (i++). Mit jedem Schleifendurchgang wird die Variable Ausgabe mit ihrem jeweils bisherigen Wert um etwas HTML-Code mit der Kapitel CSS-Angabe font-size (Schriftgröße) erweitert. Der Wert, der font-size dabei zugewiesen wird, ist jeweils der Wert von i. So entsteht der Effekt, dass CSS-Angaben von font-size:10px bis font-size:36px erzeugt werden. Das Ergebnis wird am Ende ausgegeben. Zum Verständnis der zusammengesetzten Teile bei Ausgabe siehe auch Seite Operator für Zeichenkettenverknüpfung.

Eine for-Schleife beginnt mit dem Wort for. Dahinter wird, in Klammern stehend, die Schleifenbedingung formuliert. Bei der for-Schleife gilt dabei eine feste Syntax. Innerhalb der Schleifenbedingung werden drei Anweisungen notiert. In der ersten Anweisung wird ein Schleifenzähler definiert und initialisiert. Im Beispiel wird ein Zähler i definiert und mit dem Wert 10 initialisiert. Die zweite Anweisung enthält die Bedingung für den Schleifenablauf; die Schleife wird ausgeführt, wenn und solange diese zutrifft. Dazu brauchen Sie Seite Vergleichsoperatoren. In der dritten Anweisung wird der Schleifenzähler so verändert, dass er irgendwann die in der zweiten Anweisung notierte Bedingung erfüllt. Im Beispiel wird der Zähler mit i++ bei jedem Schleifendurchgang um 1 erhöht. An dieser Stelle könnte aber auch so etwas stehen wie i=i+10 (bei jedem Schleifendurchgang um 10 erhöhen).

Eine spezielle Abart der for-Schleife ist die for-in-Schleife.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Ausgabe = "";
for (var Eigenschaft in document)
  Ausgabe = Ausgabe + "document." + Eigenschaft + ": " + document[Eigenschaft] + "<br>";
document.write("<h1>Eigenschaften des Objekts <i>document<\/i><\/h1>");
document.write(Ausgabe);
</script>
</body></html>

Erläuterung:

Das Beispiel zeigt, wie Sie mit Hilfe einer for-in-Schleife einiges über die JavaScript-Fähigkeiten Ihres Browsers herausbekommen können. Im Beispiel werden die Eigenschaften des Objektes document ausgegeben. Mit jedem Schleifendurchgang wird die Variable Ausgabe um eine Objekteigenschaft erweitert. Den aktuellen Wert der Objekteigenschaft können Sie sich mit Objektname[Eigenschaft] ausgeben lassen. Die Schleife läuft so lange, wie es verfügbare Objekteigenschaften gibt - dies bedeutet das for in.

Beachten Sie:

Wenn Sie mehr als eine Anweisung von einer for-Schleifenbedingung abhängig machen wollen, müssen Sie die Anweisungen wie üblich in geschweifte Klammern einschließen.

Die for-in-Schleife können Sie in Opera bis einschließlich Version 6 nur auf selbstdefinierte Objekte und Variablen anwenden. Bei vordefinierten Objekten bleibt die Schleife wirkungslos. Der Internet Explorer kennt diese Schleifenart erst ab Version 4.01. Mozilla Firefox kennt zwar die for-in-Schleife, das Beispiel bricht jedoch beim Lesen der Eigenschaft document.domConfig mit einem Zugriffsfehler ab.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Schleifen mit "do-while"

Die do-while-Schleife ist eine Variante der normalen nach oben while-Schleife. Der Unterschied zwischen beiden ist, dass bei der normalen while-Schleife vor dem Ausführen des Codes die Schleifenbedingung überprüft wird, während bei der do-while-Schleife zuerst der Code ausgeführt und erst danach die Schleifenbedingung überprüft wird. Auf diese Weise können Sie erzwingen, dass Anweisungen innerhalb der Schleife auf jeden Fall mindestens einmal ausgeführt werden, auch wenn sich die Schleifenbedingung gleich am Anfang als unwahr herausstellt.

Beispiel:

Einmal so:
<script type="text/javascript">
var x = 10;
do {
  document.write("<br>x * x = " + (x * x));
  x = x + 1;
} while (x < 10);
</script>
Und einmal so:
<script type="text/javascript">
var x = 10;
while (x < 10) {
  document.write("<br>x * x = " + (x * x));
  x = x + 1;
}
</script>

Erläuterung:

Im Beispiel werden zwei kleine JavaScript-Bereiche definiert. In beiden Bereichen wird eine Variable x definiert und mit dem Wert 10 vorbelegt. Im ersten Bereich wird solange das Quadrat von x (das bei jedem Schleifendurchlauf um 1 erhöht wird) geschrieben, wie x kleiner als 10 ist. Da x ja schon am Beginn den Wert 10 hat, ist die Abbruchbedingung eigentlich schon von vorneherein erfüllt. Trotzdem wird einmal das Quadrat von x ausgegeben, da die Überprüfung der Schleifenbedingung erst nach dem Ausführen der Anweisungen innerhalb der Schleife erfolgt.
Im zweiten Script-Bereich herrschen die gleichen Bedingungen, jedoch wird dort eine normale while-Schleife notiert. Da x von vorneherein nicht kleiner als 10 ist, werden die Anweisungen der while-Schleife kein einziges Mal ausgeführt. Die Überprüfung der Schleifenbedingung, die am Anfang stattfindet, verhindert dies.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Kontrolle innerhalb von Schleifen - break und continue

Schleifen sind "kritische Faktoren" innerhalb eines Scripts. Bei komplizierteren Aufgaben ist es manchmal nicht einfach, eine Schleife so zu programmieren, dass die Schleife in jedem Fall irgendwann mal abgebrochen wird. Deshalb gibt es zusätzliche Befehle, um innerhalb einer Schleife das Geschehen zu kontrollieren.

Beispiel 1:

<script type="text/javascript">
var i = 0;
while (i < 6) {
  if (i == 3)
    break;
  i++;
  alert("i = " + i);
}
</script>

Erläuterung:

Mit break können Sie eine Schleife sofort beenden. Dazu müssen Sie innerhalb des Schleifenkörpers eine if-Abfrage und abhängig davon das Wort break als Anweisung notieren. Im Beispiel bricht die Schleife bereits ab, wenn i den Wert 3 hat, obwohl laut Schleifenbedingung das Hochzählen bis 6 erlaubt ist.

Beispiel 2:

<script type="text/javascript">
var i = 0;
Ende: while (i < 6) {
  if (i == 3) {
    alert("Das war's, denn i ist gleich " + i);
    break Ende;
  }
  i++;
}
</script>

Erläuterung:

Dies ist eine besondere Variante von break. Sie können vor einer Schleife, auf die sich eine break-Anweisung beziehen soll, ein "Label" notieren. Das ist ein selbstvergebener Name mit einem Doppelpunkt dahinter, im Beispiel Ende:. Hinter dem Wort break können Sie dann den Namen des Labels angeben. So stellen Sie im Beispiel sicher, dass sich die break-Anweisung auf jeden Fall auf diese bestimmte while-Schleife bezieht. In einfachen Fällen wie dem obigen ist das eigentlich überflüssig. Aber behalten Sie die Möglichkeit im Auge, falls Sie einmal verschachtelte Schleifen programmieren und darin break-Anweisungen benutzen. Beachten Sie jedoch, dass diese Variante der break-Anweisung Bestandteil von JavaScript 1.2 ist und bei älteren Browsern zu einer Fehlermeldung führt.

Beispiel 3:

<script type="text/javascript">
var i = 0, j = 0;
while (i < 6) {
  i++;
  if (i == 3)
    continue;
  j++;
}

alert("i ist gleich " + i + " und j ist gleich " + j);
</script>

Erläuterung:

Mit continue erzwingen Sie sofort den nächsten Schleifendurchlauf. Nachfolgende Anweisungen innerhalb der Schleife werden bei diesem Schleifendurchlauf nicht mehr ausgeführt. Im Beispiel werden zwei Zähler i und j bei jedem Schleifendurchlauf um 1 erhöht. Wenn i gleich 6 ist, wird die Schleife abgebrochen. Zwischendurch hat i auch mal den Wert 3. Dieser Fall wird mit einer if-Abfrage behandelt. Wenn i gleich 3 ist, wird sofort der nächste Schleifendurchgang gestartet. Die Anweisung j++; wird dadurch in diesem Schleifendurchlauf nicht mehr ausgeführt. Am Ende hat dadurch i den Wert 6 und j nur den Wert 5.

nach oben
weiter | Seite Reservierte Wörter
zurück | Seite Bedingte Anweisungen (if-else/switch)
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Reservierte Wörter

SELFHTML

Reservierte Wörter
Informationsseite

nach unten Übersicht reservierter Wörter
nach unten

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Übersicht reservierter Wörter

JavaScript enthält eine Reihe von Schlüsselwörtern mit bestimmter Bedeutung. Diese "reservierten Wörter" sollten Sie kennen, um nicht versehentlich gleichnamige Seite Variablen oder Seite Funktionen zu definieren. Denn dies ist nicht erlaubt. Einige der reservierten Wörter der folgenden Liste sind bereits in Gebrauch, andere sind für den zukünftigen Sprachausbau von JavaScript geplant. Auch noch nicht benutzte reservierte Wörter dürfen Sie nicht als Variablen- oder Funktionsnamen verwenden.

Reserviertes Wort | Erläuterung
abstract | Noch nicht verwendet
boolean | Noch nicht verwendet
break | Als Anweisung: Abbruch in Seite Schleifen
byte | Noch nicht verwendet
case | Für Seite Fallunterscheidungen
catch | Für Seite Fehlerbehandlung mit try..catch
char | Noch nicht verwendet
class | Noch nicht verwendet
const | Dient zur Deklaration von Konstanten (ab JavaScript-Version 1.5)
continue | Als Anweisung: Fortsetzung in Seite Schleifen
default | Für Seite Fallunterscheidungen
delete | Operator: Seite Objekte und Objekteigenschaften löschen
do | Für Seite Schleifen mit "do-while"
double | Noch nicht verwendet
else | Sonst-Fall in Seite bedingten Anweisungen mit "if"
export | Als Anweisung: Objekte oder Funktionen für fremde Scripts ausführbar machen
extends | Noch nicht verwendet
false | Boolescher Wert: falsch
final | Noch nicht verwendet
finally | Für Seite Fehlerbehandlung mit try..catch
float | Noch nicht verwendet
for | Für Seite Schleifen mit "for"
function | Für Seite Funktionen
goto | Noch nicht verwendet
if | Für Seite bedingte Anweisungen mit "if"
implements | Noch nicht verwendet
in | Für Seite spezielle Schleifen mit "for"
instanceof | Prüft, ob ein Objekt eine Instanz eines Prototyp-Objektes ist (ab JavaScript-Version 1.4)
int | Noch nicht verwendet
long | Noch nicht verwendet
native | Noch nicht verwendet
new | Dient zum Seite Definieren von Objekten
null | Spezieller Null-Wert z.B. für Eigenschaften, die keinen Wert haben, oder als Rückgabewert einer Funktion
package | Noch nicht verwendet
private | Noch nicht verwendet
protected | Noch nicht verwendet
public | Noch nicht verwendet
return | Für Seite Rückgabewerte in Funktionen
short | Noch nicht verwendet
static | Noch nicht verwendet
super | Noch nicht verwendet
switch | Für Seite Fallunterscheidungen
synchronized | Noch nicht verwendet
this | Für Bezug auf das Seite aktuelle Objekt
throw | Als Anweisung: Nutzerdefinierte Ausnahme (ab JavaScript-Version 1.4)
throws | Noch nicht verwendet
transient | Noch nicht verwendet
true | Boolescher Wert: wahr
try | Für Seite Fehlerbehandlung mit try..catch
typeof | Operator: liefert den Seite Typ eines Elementes
undefined | Der Wert undefiniert. Eine Variable, die ohne eine Zuweisung deklariert wird (var variable;), erhält diesen Wert (ab JavaScript-Version 1.3)
var | Für Seite Variablendefinitionen
void | Operator: Seite unterdrückt Rückgabewerte
while | Für Seite Schleifen mit "while"
with | Um Seite mehrere Anweisungen mit einem Objekt durchzuführen

nach oben
weiter | Seite Event-Handler
zurück | Seite Schleifen (while/for/do-while)
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Event-Handler

SELFHTML

Event-Handler
Informationsseite

nach unten Allgemeines zu Event-Handlern
nach unten onabort (bei Abbruch)
nach unten onblur (beim Verlassen)
nach unten onchange (bei erfolgter Änderung)
nach unten onclick (beim Anklicken)
nach unten ondblclick (bei doppeltem Anklicken)
nach unten onerror (im Fehlerfall)
nach unten onfocus (beim Aktivieren)
nach unten onkeydown (bei gedrückter Taste)
nach unten onkeypress (bei gedrückt gehaltener Taste)
nach unten onkeyup (bei losgelassener Taste)
nach unten onload (beim Laden einer Datei)
nach unten onmousedown (bei gedrückter Maustaste)
nach unten onmousemove (bei weiterbewegter Maus)
nach unten onmouseout (beim Verlassen des Elements mit der Maus)
nach unten onmouseover (beim Überfahren des Elements mit der Maus)
nach unten onmouseup (bei losgelassener Maustaste)
nach unten onreset (beim Zurücksetzen des Formulars)
nach unten onselect (beim Selektieren von Text)
nach unten onsubmit (beim Absenden des Formulars)
nach unten onunload (beim Verlassen der Datei)
nach unten javascript: (bei Verweisen)
nach unten

Allgemeines zu Event-Handlern

Event-Handler (Ereignisbehandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Da es sich um Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3-Konsortium die Event-Handler mittlerweile auch in den HTML-Sprachstandard mit aufgenommen (siehe auch Kapitel Universalattribute: Seite Event-Handler). Dort wird auch festgelegt, in welchen HTML-Tags welcher Event-Handler vorkommen darf. Das Problem dabei ist jedoch, dass die Praxis derzeit noch stark davon abweicht - zumindest bei Netscape 4.x. Der Internet Explorer dagegen interpretiert Event-Handler seit seiner Version 4.x weitgehend so universell wie vom W3-Konsortium vorgesehen. Bei den Beschreibungen der Event-Handler auf dieser Seite wird jeweils versucht, auf die Problematik einzugehen. Letztendlich hilft aber nur: selber im Einzelfall mit mehreren verschiedenen Browsern testen und ausprobieren.

Event-Handler erkennen Sie daran, dass solche HTML-Attribute immer mit on beginnen, zum Beispiel onclick. Hinter dem Istgleichzeichen notieren Sie - in Anführungszeichen, eine JavaScript-Anweisung. Wenn Sie mehrere Anweisungen ausführen wollen, dann definieren Sie sich dazu am besten in einem JavaScript-Bereich eine Seite Funktion und rufen hinter dem Istgleichzeichen diese Funktion auf, also z.B. onclick="Umrechnen()".

Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onclick etwa für das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das auslösende Element. Wenn der Event-Handler onclick beispielsweise in einem Formular-Button notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt. Das mag Ihnen jetzt selbstverständlich vorkommen. Ist es auch, solange es beispielsweise um Formular-Buttons geht. Aber nach dem erweiterten Modell von HTML 4.0 kann etwa auch ein HTML-Bereich, der mit <div>...</div> definiert wird, einen Event-Handler wie onclick enthalten.

Es wurden nur solche Event-Handler aufgenommen, die auch tatsächlich in HTML-Tags vorkommen können und im HTML-4.0-Standard erwähnt sind (mit Ausnahme von onabort und onerror). Das sind weniger, als Netscape und der Internet Explorer kennen. Bei Netscape kommt verwirrenderweise hinzu, dass einige Event-Handler zwar so bezeichnet werden, aber eigentlich gar nicht innerhalb von HTML-Tags vorkommen können. Es ist zu hoffen, dass es hierbei in Zukunft mehr Übereinstimmungen zwischen Sprachstandards und Browser-Implementierungen geben wird.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 onabort (bei Abbruch)

Ist für den Fall gedacht, dass ein Anwender im Browser den Stop-Button drückt, obwohl noch nicht alle Grafiken geladen wurden.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:
<img>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (beim Aufruf sofort ESC drücken!)

<html><head><title>Test</title>
</head><body>
<img src="onabort.jpg" width="400" height="600" alt="Grafik"
onabort="alert('Schade, dass Sie das Bild nicht sehen wollen')">
</body></html>

Erläuterung:

Im Beispiel wird eine Grafik in HTML referenziert. Für den Fall, dass der Anwender den Stop-Button im Browser drückt, bevor die Grafik ganz geladen ist, wird mit alert() eine Meldung ausgegeben.

Beachten Sie:

Dieser Event-Handler gehört nicht zum HTML-Standard und wird von Netscape 6, Opera, Mozilla Firefox, Safari und Konqueror nicht interpretiert.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onblur (beim Verlassen)

Für den Fall, dass ein Element zuvor aktiviert war und der Anwender es jetzt verlässt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<body> <frameset> <input> <layer> <select> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <area> <button> <input> <label> <select> <textarea>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
Name: <input type="text" name="Eingabe" onblur="PruefeInhalt(this.value)"><br>
Geben Sie irgendetwas ein und klicken Sie dann woanders hin, um das Eingabefeld zu verlassen!
</form>
<script type="text/javascript">
document.Test.Eingabe.focus();
function PruefeInhalt (Feld) {
  if (Feld == "") {
    alert("Das Namensfeld muss einen Inhalt haben!");
    document.Test.Eingabe.focus();
    return false;
  }
}
</script>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular definiert, das ein Eingabefeld enthält. Unterhalb des Formulars ist ein JavaScript-Bereich notiert. Der Bereich wird deshalb unterhalb des Formulars definiert, weil zu Beginn des Bereichs gleich eine Anweisung ausgeführt wird, die die Existenz des Formulars bereits voraussetzt. Diese Anweisung (document.Test.Eingabe.focus();) setzt den Cursor in das Eingabefeld. Dort soll der Anwender seinen Namen eingeben. Klickt er dann irgendwo anders hin, wird der Event-Handler onblur aktiv, der im HTML-Tag des Eingabefeldes notiert ist. Dabei wird die Funktion PruefeInhalt() aufgerufen, die ebenfalls in dem JavaScript-Bereich notiert ist. Diese Funktion fragt ab, ob die ihr übergebene Zeichenkette, der Inhalt des Namensfeldes, leer ist. Wenn ja, wird ein Meldungsfenster ausgegeben, und der Cursor wird wieder in das Feld positioniert.

Beachten Sie:

Unter Opera 5.02 erzeugt die Verwendung dieses Beispieles eine unendliche Schleife, da die Bestätigung des Meldungsfensters ebenfalls den Event-Handler auslöst. Mit Opera 5.12 wurde dieses Problem behoben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onchange (bei erfolgter Änderung)

Für den Fall, dass ein Element einen geänderten Wert erhalten hat.

Nach HTML 4.0 und JavaScript 1.2 (Netscape) erlaubt in folgenden HTML-Tags:
<input> <select> <textarea>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<textarea rows="5" cols="40" onchange="alert(this.value)">Bearbeiten Sie diesen Text hier
und klicken Sie dann woanders hin! Oder lassen Sie ihn unbearbeitet und
klicken dann woanders hin!</textarea>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert. Wenn der Anwender irgendetwas in das Feld eingibt und anschließend woanders hin klickt, wird der Event-Handler onchange aktiv, der im HTML-Tag des mehrzeiligen Eingabefeldes notiert ist. Im Beispiel wird einfach der aktuelle geänderte Inhalt des Feldes in einem Meldungsfenster ausgegeben.

Beachten Sie:

Dieser Event-Handler wird nicht sofort bei der Änderung eines Formularfeldes aufgerufen, sondern erst nachdem ein anderes Feld nach der Änderung angewählt wurde.

Der Internet Explorer hat einen Bug, der verhindert, dass man mit onchange Änderungen bei Radiobuttons erkennen kann. Der Eventhandler wird aufgerufen, bevor die Änderung in die JavaScript-Eigenschaften übertragen wird. Verwenden Sie hierfür ggf. onclick.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onclick (beim Anklicken)

Für den Fall, dass der Anwender ein Element anklickt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area> <input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="Ausgabe" readonly="readonly"><br>
 <input type="button" value="Letzter Update"
 onclick="this.form.Ausgabe.value = document.lastModified">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem Eingabefeld (das jedoch auf "readonly", also nur Lesen gesetzt wird) und einem Button definiert. Der Button hat die Aufschrift "Letzter Update". Beim Anklicken des Buttons wird der Event-Handler onclick aktiv, der im HTML-Tag des Buttons definiert ist. Im Beispiel wird daraufhin in das Eingabefeld der Zeitpunkt der letzten Änderung am Dokument geschrieben.

Beachten Sie:

Konqueror 3.1 interpretiert zwar diesen Event-Handler, kann aber das Anzeigebeispiel nicht darstellen, da Seite lastModified nicht interpretiert werden kann.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.2 ondblclick (bei doppeltem Anklicken)

Für den Fall, dass der Anwender ein Element doppelt anklickt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area> <input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Rechnen" action="">
Wert: <input type="text" size="10" name="Wert">
<input type="button" value="Doppelklick = hoch 2"
ondblclick="document.Rechnen.Wert.value = document.Rechnen.Wert.value * document.Rechnen.Wert.value">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Im Button ist der Event-Handler ondblclick notiert. Der Button reagiert daher nur auf Doppelklick. Wenn der Anwender doppelt auf den Button klickt, wird von dem Wert, den er in dem Eingabefeld eingegeben hat, das Quadrat errechnet, und das Ergebnis wird wiederum in das Eingabefeld geschrieben.

Beachten Sie:

Bei Netscape-Browsern 4.x unter Macintosh ist dieser Event-Handler nicht verfügbar! Safari 1.0 erkennt diesen Event-Handler nicht an Buttons.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 6 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 onerror (im Fehlerfall)

Eignet sich zum Abfangen von Fehlermeldungen und zum Ersetzen solcher Meldungen durch eigene. Beachten Sie jedoch, dass dadurch nicht die Fehler selbst beseitigt werden! onerror ist vor allem zum Handling von Fehlern beim Laden von Grafiken gedacht.

Nach JavaScript erlaubt in folgendem HTML-Tag:
<img>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="gibtsnicht.gif" onerror="alert('an dieser Stelle
sollte eine Grafik stehen,\n doch leider kann sie nicht angezeigt werden!')">
</body></html>

Erläuterung:

Im Beispiel wird in einer Grafikreferenz der Event-Handler onerror notiert. Er wird dann aktiv, wenn die Grafikdatei nicht existiert oder nicht angezeigt werden kann. Im Beispiel wird dann ein entsprechendes Meldungsfenster ausgegeben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onfocus (beim Aktivieren)

Tritt ein, wenn der Anwender ein Element aktiviert.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<body> <frame> <input> <layer> <select> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <area> <button> <input> <label> <select> <textarea>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" onfocus="this.value = 'Hier Ihren Namen eingeben'"><br>
<input type="text" size="30" onfocus="this.value = 'Hier Ihren Wohnort eingeben'"><br>
<input type="text" size="30" onfocus="this.value = 'Hier Ihr Alter eingeben'"><br>
</form>
</body></html>

Erläuterung:

In dem Beispiel wird ein Formular definiert, das drei Eingabefelder enthält. Da die Felder unbeschriftet sind, hat der Anwender keine Ahnung, was in die einzelnen Felder eingeben kann. Bewegt er den Cursor aus Neugier doch in eines der Eingabefelder, wird der Event-Handler onfocus des jeweiligen Feldes aktiv. Dabei wird in das jeweilige Feld eine Aufforderung geschrieben, was in dem Feld einzugeben ist.

JavaScript 1.2 Netscape 4.x MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onkeydown (bei gedrückter Taste)

Tritt ein, wenn der Anwender, während er ein Element aktiviert hat, eine Taste drückt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Aktualisieren () {
  document.Test.Kontrolle.value = document.Test.Eingabe.value.length + 1;
  return true;
}
</script>
</head><body>
<form name="Test" action="">
Kurzbeschreibung Ihrer Homepage (max 50 Zeichen):<br>
<input type="text" name="Eingabe" size="40" onkeydown="Aktualisieren(this.value)">
<input type="text" value="0" readonly="readonly" size="3" name="Kontrolle"><br>
<input type="reset">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular definiert, in dem der Anwender eine Kurzbeschreibung seiner Homepage in einem Eingabefeld abliefern kann. Der Text soll maximal 50 Zeichen lang sein. Damit der Anwender nicht mitzählen muss, gibt es ein kleines Eingabefeld nebendran, in dem nach jedem Tastendruck ausgegeben wird, wie viele Zeichen bereits eingegeben wurden. Dazu ist in dem Eingabefeld mit Namen Eingabe der Event-Handler onkeydown notiert. Er bewirkt, dass, solange der Anwender in dem Formularfeld etwas eingibt, bei jedem Tastendruck die Funktion Aktualisieren() aufgerufen wird, die im Dateikopf in einem Script-Bereich definiert ist. Diese Funktion errechnet aus document.Test.Eingabe.value.length + 1, wie viele Zeichen bereits eingegeben wurden, und schreibt eine entsprechende Ausgabe in das dafür vorgesehene "Eingabe"-Feld.

JavaScript 1.2 Netscape 4.x MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onkeypress (bei gedrückt gehaltener Taste)

Tritt ein, wenn der Anwender eine Taste drückt und diese gedrückt hält.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="Eingabe"
  onkeypress="alert(this.value)">
</form>
</body></html>

Erläuterung:

Im Beispiel ist ein Formular mit einem Eingabefeld definiert. Wenn der Anwender in dem Eingabefeld etwas eingibt, wird bei jedem Tastendruck in einem Meldungsfenster der aktuelle Wert des Formularfeldes ausgegeben. Dazu ist in dem Eingabefeld der Event-Handler onkeypress notiert. Er tritt in Aktion, wenn eine Taste gedrückt und gedrückt gehalten wird.
In Netscape 4.x und Opera 5 wird dieser Event-Handler stets nach dem Event-Handler onkeydown ausgeführt. Gibt der Event-Handler onkeydown den Wert false zurück, so wird unter Netscape die Ausführung des Event-Handlers onkeypress unterdrückt. Im Internet Explorer unterdrückt der Event-Handler onkeypress den Event-Handler onkeydown.

JavaScript 1.2 Netscape 4.x MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onkeyup (bei losgelassener Taste)

Tritt ein, wenn der Anwender eine Taste gedrückt hat und diese wieder loslässt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<input> <textarea>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="Eingabe"
  onkeyup="this.form.Ausgabe.value = this.value"><br>
<input type="text" readonly="readonly" size="30" name="Ausgabe"><br>
<input type="reset">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular definiert, das zwei Eingabefelder mit den Namen Eingabe und Ausgabe enthält. Wenn der Anwender in dem oberen Feld, also dem, das für die Eingabe gedacht ist, etwas eingibt, wird der Wert automatisch Zeichen für Zeichen in das untere, also das Ausgabefeld übernommen. Dazu ist im Eingabefeld der Event-Handler onkeyup notiert. Dieser Event-Handler tritt in Aktion, wenn der Anwender in dem Feld eine Taste gedrückt und wieder losgelassen hat, was ja bei jedem eingegebenen Zeichen der Fall ist. Mit this.form.Ausgabe.value=this.value wird dem Ausgabefeld der aktuelle Wert des Eingabefeldes zugewiesen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onload (beim Laden einer Datei)

Tritt ein, wenn eine HTML-Datei geladen wird.

Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
<frameset> <body>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function NaviFenster () {
  Navigation = window.open("navigat.htm", "Navigation", "height=200,width=300");
  Navigation.focus();
}
</script>
</head>
<body onload="NaviFenster()">
<h1>Seite mit "Fernbedienung"</h1>
</body></html>

Beispiel - Datei navigat.htm:

<html><head><title>Test</title>
</head><body>
<a href="javascript:void(opener.location.href = '../../../index.htm');">SELFHTML</a><br>
<a href="javascript:void(opener.location.href = '../../index.htm');">JavaScript</a><br>
<a href="javascript:void(opener.location.href = '../index.htm');">Sprachelemente</a><br>
</body></html>

Erläuterung:

Im Beispiel wird beim Einlesen der HTML-Datei ein zweites Fenster geöffnet, das zum Beispiel als "Fernbedienung" des Hauptfensters dienen könnte. Dazu ist im einleitenden <body>-Tag der Event-Handler onload notiert. Er ruft die Funktion NaviFenster() auf, die in einem JavaScript-Bereich im Dateikopf definiert ist. Innerhalb dieser Funktion steht der Befehl zum Öffnen des Zweitfensters. Das Fenster erhält auch gleich den Fokus (wird zum aktiven Fenster), sodass es im Vordergrund des Hauptfensters zu sehen ist. Ins Zweitfenster wird die Datei navigat.htm geladen. Diese enthält Verweise mit dem "Event-Handler" nach unten javascript:. Beim Ausführen des Verweises wird im Elternfenster des Zweitfensters, markiert durch den reservierten Fensternamen opener, mit document.location.href eine Seite geladen. Die Anweisung opener.location.href='../index.htm' gibt den URI der zu ladenen Datei zurück. Mit Hilfe des Operators Seite void wird dieser unterdrückt. Dadurch werden Anzeigefehler vermieden.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onmousedown (bei gedrückter Maustaste)

Tritt ein, wenn der Anwender die Maustaste gedrückt hält.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<input type="button"> <a>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (auf Verweis klicken, Maus gedrückt halten und auf Statuszeile achten!)

<html><head><title>Test</title>
</head><body>
<p>Klicken Sie auf den Button und lassen Sie die Maustaste einige Zeit heruntergedrückt,
um den Event-Handler in Aktion zu sehen:</p>
<input type="button" value="Klick mich!"
  onmousedown="this.value = 'Maustaste wurde gedrückt!';"
  onmouseup="this.value = 'Maustaste wurde losgelassen!';">
</body></html>

Erläuterung:

Das Beispiel enthält einen Klick-Button. Sobald der Anwender die Maustaste drückt, während sich der Mauszeiger über dem Button befindet, tritt der Event-Handler onmousedown in Aktion, der im input-Tag notiert ist. Im Beispiel wird dabei der Text des Buttons geändert. Beim Loslassen der Maustaste tritt der Event-Handler nach unten onmouseup in Aktion, der den Text des Buttons ebenfalls abändert.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.2 onmousemove (bei weiterbewegter Maus)

Tritt ein, wenn der Anwender die Maus bewegt, unabhängig davon, ob die Maustaste gedrückt ist oder nicht.

Nach JavaScript (Netscape) bislang nicht in HTML-Tags möglich, sondern nur im Zusammenhang mit dem Seite event-Objekt.

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Maus über den Text bewegen und auf Statuszeile achten!)

<html><head><title>Test</title>
<script type="text/javascript">
function Mauskontrolle (Element) {
  var Pos = Element.offsetLeft + "/" + Element.offsetTop;
  window.status = Pos;
  return true;
}
</script>
</head><body>
<p onmousemove="Mauskontrolle(this)">Hier ein kleiner Text</p>
</body></html>

Erläuterung:

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das früher nicht möglich war. In dem Beispiel wird ein Textabsatz definiert. Innerhalb des Textabsatzes ist der Event-Handler onmousemove notiert. Der Event-Handler tritt in Aktion, solange der Anwender die Maus im Anzeigebereich des Textabsatzes bewegt. Dann wird so oft wie möglich die Funktion Mauskontrolle() aufgerufen, die in einem Script-Bereich im Dateikopf notiert ist. Dieser Funktion wird als Parameter mittels this das betroffene Element übergeben. Die Funktion bewirkt, dass in der Statuszeile des Browsers jeweils die Koordinaten der linken oberen Ecke des Elementes angezeigt werden.

Beachten Sie:

Opera 5 kennt den Event-Handler onmousemove zwar, interpretiert das obige Beispiel aber nicht, weil Opera die Eigenschaft window.status erst ab Version 6 unterstützt.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onmouseout (beim Verlassen des Elements mit der Maus)

Tritt ein, wenn der Anwender mit der Maus über ein Element fährt und dieses dabei verlässt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Maus über den Link und wieder weg bewegen!)

<html><head><title>Test</title>
</head><body>
<a href="http://aktuell.de.selfhtml.org/weblog/"
onmouseout="alert('Die News sollten Sie ruhig mal besuchen')"><b>News</b></a>
</body></html>

Erläuterung:

Im Beispiel ist ein Verweis definiert. Wenn der Anwender mit der Maus über den Verweis fährt, ihn dann aber nicht anklickt, sondern die Maus doch wieder von dem Verweis entfernt, tritt der Event-Handler onmouseout in Aktion. Im Beispiel wird dann ein Meldungsfenster ausgegeben, dass den Anwender darauf hinweist, dass er die News-Seite ruhig mal aufrufen soll.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onmouseover (beim Überfahren des Elements mit der Maus)

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<h1 id="Test"
 onmouseover="this.innerHTML = 'Sehen Sie?'"
 onmouseout="this.innerHTML = 'Ich bin dynamisch'">Ich bin dynamisch</h1>
</body></html>

Erläuterung:

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das bislang nicht möglich war. Das Beispiel funktioniert mit dem Internet Explorer ab Version 4.x und im Netscape Navigator ab Version 6, welche die Event-Handler nach HTML 4.0 weitgehend interpretieren. In dem Beispiel wird eine Überschrift erster Ordnung definiert. Innerhalb der Überschrift sind die Event-Handler onmouseover und onmouseout notiert. Der Event-Handler onmouseover tritt in Aktion, wenn der Anwender die Maus in den Anzeigebereich der Überschrift bewegt, und onmouseout wird aktiv, wenn er die Maus wieder aus dem Anzeigebereich herausbewegt. Mit Hilfe von this nehmen Sie Bezug auf das Seite aktuelle Objekt und können mittels der Eigenschaft innerHTML mit jedem Aktivwerden eines der beiden Event-Handler den Text der Überschrift dynamisch austauschen. Bei onmouseover wird ein anderer Text angezeigt, bei onmouseout wieder der ursprüngliche Text.

Beachten Sie:

Auch Opera ab Version 5 interpretiert den Event-Handler nach HTML 4.0. Er kennt jedoch nicht die Eigenschaft innerHTML.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onmouseup (bei losgelassener Maustaste)

Tritt ein, wenn der Anwender die Maustaste gedrückt hat und sie nun wieder loslässt.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<input type="button"> <a>

Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<input type="button" value="Klick mich!"
  onmouseup="this.value = 'Button wurde angeklickt, Maustaste wurde losgelassen!';">
</body></html>

Erläuterung:

Das Beispiel enthält einen Klick-Button. Sobald der Anwender auf den Button klickt, indem er die Maustaste herunterdrückt und wieder loslässt, tritt der Event-Handler onmousedown in Aktion, der im input-Tag notiert ist. Im Beispiel wird dabei der Text des Buttons geändert.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onreset (beim Zurücksetzen des Formulars)

Tritt ein, wenn der Anwender Eingaben in einem Formular verwerfen will.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:
<form>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function ResetCheck () {
  var chk = window.confirm("Wollen Sie alle Eingaben loeschen?");
  return (chk);
}
</script>
</head><body>
<form name="Test" onreset="return ResetCheck()" action=""><pre>
Name: <input type="text" size="30"><br>
Idee: <input type="text" size="30"><br>
<input type="reset">
</pre></form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, das unter anderem einen Abbrechen-Button (Reset-Button) enthält. Beim Anklicken dieses Buttons werden normalerweise alle Eingaben im Formular gelöscht. Im Beispiel ist jedoch im einleitenden <form>-Tag der Event-Handler onreset notiert. Dieser tritt in Aktion, wenn der Reset-Button angeklickt wird. Im Beispiel wird dann die Funktion ResetCheck() aufgerufen, die in einem Script-Bereich im Dateikopf steht. Diese Funktion fragt den Anwender in einem Bestätigungsfenster (window.confirm()), ob er wirklich alle Eingaben in dem Formular löschen will. Bestätigt er den Löschwunsch, gibt das Bestätigungsfenster den Wert true zurück. Verneint er den Löschwunsch, wird false zurückgegeben. Der Rückgabewert wird in der Variablen chk gespeichert und diese wird wiederum von der Funktion ResetCheck() an den aufrufenden Event-Handler zurückgegeben. Der Effekt ist, dass die Formulareingaben nur gelöscht werden, wenn true zurückgegeben wird.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari WebKit (Entwicklerversion) onselect (beim Selektieren von Text)

Tritt ein, wenn der Anwender Text selektiert.

Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
<input> <textarea>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<textarea cols="40" rows="10" name="Eingabe" onselect="alert('Text wurde ausgewählt!');">
Markieren Sie einfach irgendwelchen Text aus diesem Text hier!
</textarea>
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert, das mit Text vorbelegt ist. Wenn der Anwender Text in diesem Feld selektiert, wird über onselect ein Dialogfenster geöffnetet. Darin kann z.B. stehen, was der Anwender nun tun kann.

Beachten Sie:

Opera 5 und Netscape 4.x interpretieren diesen Event-Handler nicht.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onsubmit (beim Absenden des Formulars)

Tritt ein, wenn der Anwender ein Formular absendet.

Nach JavaScript (Netscape) erlaubt in folgendem HTML-Tag:
<form>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (nicht alle Felder ausfüllen und Formular dann absenden!)

<html><head><title>Test</title>
<script type="text/javascript">
function CheckInput () {
  for (i = 0; i < document.forms[0].elements.length; ++i)
    if (document.forms[0].elements[i].value == "") {
      alert("Es wurden nicht alle Felder ausgefuellt!");
      document.forms[0].elements[i].focus();
      return false;
    }
  return true;
}
</script>
</head><body>
<form action="onsubmit.htm" onsubmit="return CheckInput();">
Feld 1: <input type="text" size="30"><br>
Feld 2: <input type="text" size="30"><br>
Feld 3: <input type="text" size="30"><br>
<input type="submit" value="absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit mehreren Eingabefeldern. Beim Absenden des Formulars, also beim Klicken auf den Submit-Button, wird jedoch erst mal überprüft, ob in allen Feldern etwas eingegeben wurde. Wenn eines der Felder leergelassen wurde, wird das Formular nicht abgesendet. Stattdessen wird eine Fehlermeldung ausgegeben, und der Cursor wird in das erste nicht ausgefüllte Eingabefeld positioniert. Dazu ist im einleitenden <form>-Tag der Event-Handler onsubmit notiert. Beim Absenden des Formulars wird dadurch die Funktion CheckInput() aufgerufen, die in einem Script-Bereich im Dateikopf notiert ist. Diese Funktion prüft in einer Seite for-Schleife alle einzelnen Formularfelder, ob diese einen leeren Inhalt haben (leere Zeichenkette ""). Ist das der Fall, wird die Fehlermeldung ausgegeben und auf das entsprechende Formularfeld positioniert. An den aufrufenden Event-Handler onsubmit wird der Wert false zurückgegeben. Nur wenn alle Formularfelder ausgefüllt wurden, wird true zurückgegeben. Dadurch wird entschieden, ob das Formular abgeschickt wird oder nicht.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 onunload (beim Verlassen der Datei)

Tritt ein, wenn eine HTML-Datei verlassen wird.

Nach JavaScript (Netscape) und HTML 4.0 erlaubt in folgenden HTML-Tags:
<frameset> <body>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Start = new Date();
var Startzeit = Start.getTime();

function Aufenthalt () {
  var Ende = new Date();
  var Endzeit = Ende.getTime();
  var Aufenthalt = Math.floor((Endzeit - Startzeit) / 1000);
  alert("Sie waren " + Aufenthalt + " Sekunden auf dieser Seite");
}
</script>
</head>
<body onunload="Aufenthalt()">
<h1>Einen langen Aufenthalt auf dieser Seite!</h1>
<p><a href="../../../index.htm">Und dann aber nix wie weg!</a></p>
</body></html>

Erläuterung:

Im Beispiel ist im Dateikopf ein JavaScript-Bereich definiert. Gleich beim Einlesen der Datei wird mit Hilfe des Seite Date-Objekts der aktuelle Zeitpunkt ermittelt und in der Variablen Startzeit gespeichert. Im einleitenden <body>-Tag der Datei ist der Event-Handler onunload notiert. Er tritt in Aktion, wenn die Datei - zum Beispiel durch Anklicken eines Verweises zu einer anderen Seite - verlassen wird. In diesem Fall wird im Beispiel die Funktion Aufenthalt() aufgerufen, die ebenfalls in dem Script-Bereich im Dateikopf steht. Diese Funktion ermittelt wieder den aktuellen Zeitpunkt, ermittelt dann aber noch die Differenz zwischen gespeicherter Startzeit und der jetzt ermittelten "Endzeit" und gibt das Ergebnis in einem Meldungsfenster aus.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 javascript: (bei Verweisen)

Dies ist kein Event-Handler im engeren Sinn. Es handelt sich um eine Syntax, die eingeführt wurde, um JavaScript-Code als Verweisziel zu notieren.

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags:
<a> <area>

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head>
<body>
<a href="javascript:alert(document.lastModified)">Letzter Update</a>
</body></html>

Erläuterung:

Das Beispiel gibt bei Anklicken des Verweises ein Meldungsfenster mit dem Zeitpunkt des letzten Updates der Datei aus. Um einen Verweis dieser Art zu notieren, notieren Sie hinter im Attribut href in Anführungszeichen das Schlüsselwort javascript, gefolgt von einem Doppelpunkt : und dahinter eine oder mehrere JavaScript-Anweisungen. Bei mehreren Anweisungen ist es jedoch besser, diese in einer Funktion zu notieren und beim Verweis dann diese Funktion aufzurufen.

Beachten Sie:

Diese Form des Aufrufes erfordert zwingend den Rückgabewert undefined. Ist dies nicht der Fall, wird der jeweilige Rückwert der JavaScript-Anweisung in das Dokument geschrieben und die aktuelle Seite gelöscht.
Sie können gegebenenfalls unter Verwendung des Operators Seite void den Rückgabewert einer Anweisung unterdrücken und auf undefined setzen.

nach oben
weiter | Seite Hinweise zur JavaScript-Objektreferenz
zurück | Seite Reservierte Wörter
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Sprachelemente

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz

SELFHTML

Objektreferenz
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML und die Kapitel JavaScript-Sprachelemente, besonders der Abschnitt über Seite Objekte, Eigenschaften und Methoden.
Dieser Abschnitt behandelt die vordefinierten Objekte von JavaScript und stellt ihre Eigenschaften und Methoden jeweils kurz vor. Die Nummerierung vor den Verweisen symbolisiert die JavaScript-Objekthierarchie und hat sonst keine weitere Bedeutung.
Der Abschnitt besteht aus folgenden Seiten:

Seite Hinweise zur JavaScript-Objektreferenz

1 | Seite window (Anzeigefenster)
1.1 | Seite frames (Frame-Fenster)
1.2 | Seite document (Dokument im Anzeigefenster)
1.2.1 | Seite HTML-Elementobjekte (Alle HTML-Elemente des Dokuments)
1.2.2 | Seite node (Alle Knoten des Elementenbaums)
1.2.3 | Seite all (Alle HTML-Elemente des Dokuments - Microsoft)
1.2.3.1 | Seite style (CSS-Attribute von HTML-Elementen)
1.2.4 | Seite anchors (Verweisanker im Dokument)
1.2.5 | Seite applets (Java-Applets im Dokument)
1.2.6 | Seite forms (Formulare im Dokument)
1.2.6.1 | Seite elements (Formularelemente eines Formulars)
1.2.6.1.1 | Seite options (Optionen einer Auswahlliste eines Formulars)
1.2.7 | Seite images (Grafikreferenzen im Dokument)
1.2.8 | Seite embeds (Multimedia-Referenzen im Dokument)
1.2.9 | Seite layers (Layer im Dokument - Netscape)
1.2.10 | Seite links (Verweise im Dokument)
1.3 | Seite event (Anwenderereignisse)
1.4 | Seite history (besuchte Seiten)
1.5 | Seite location (URIs)
2 | Seite Array (Ketten von Variablen)
3 | Seite Boolean (Ja/Nein-Variablen)
4 | Seite Date (Datum und Uhrzeit)
5 | Seite Function (JavaScript-Funktionen)
6 | Seite Math (Berechnungen)
7 | Seite navigator (Browser-Informationen)
7.1 | Seite mimeTypes (MIME-Typ-Informationen)
7.2 | Seite plugins (installierte Plugins)
8 | Seite Number (numerische Werte)
9 | Seite RegExp (reguläre Ausdrücke)
10 | Seite screen (Bildschirm-Informationen)
11 | Seite String (Zeichenketten)
Seite Objektunabhängige Funktionen

nach oben

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / window

SELFHTML

window
Informationsseite

nach unten window: Allgemeines zur Verwendung

Eigenschaften:

nach unten closed (geschlossenes Fenster)
nach unten defaultStatus (Normalanzeige in der Statuszeile)
nach unten innerHeight (Höhe des Anzeigebereichs)
nach unten innerWidth (Breite des Anzeigebereichs)
nach unten locationbar (Adresszeile)
nach unten menubar (Menüleiste)
nach unten name (Fenstername)
nach unten outerHeight (Höhe des gesamten Fensters)
nach unten outerWidth (Breite des gesamten Fensters)
nach unten pageXOffset (Fensterstartposition von links)
nach unten pageYOffset (Fensterstartposition von oben)
nach unten personalbar (Zeile für Lieblingsadressen)
nach unten scrollbars (Scroll-Leisten)
nach unten statusbar (Statuszeile)
nach unten status (Inhalt der Statuszeile)
nach unten toolbar (Werkzeugleiste)

Methoden:

nach unten alert() (Dialogfenster mit Infos)
nach unten back() (zurück in History)
nach unten blur() (Fenster verlassen)
nach unten captureEvents() (Ereignisse überwachen)
nach unten clearInterval() (zeitliche Anweisungsfolge abbrechen)
nach unten clearTimeout() (Timeout abbrechen)
nach unten close() (Fenster schließen)
nach unten confirm() (Dialogfenster zum Bestätigen)
nach unten disableExternalCapture() (Fremdüberwachung verhindern)
nach unten enableExternalCapture() (Fremdüberwachung erlauben)
nach unten find() (Text suchen)
nach unten focus() (Fenster aktiv machen)
nach unten forward() (vorwärts in History)
nach unten handleEvent() (Ereignis übergeben)
nach unten home() (Startseite aufrufen)
nach unten moveBy() (bewegen mit relativen Angaben)
nach unten moveTo() (bewegen mit absoluten Angaben)
nach unten open() (neues Fenster öffnen)
nach unten print() (ausdrucken)
nach unten prompt() (Dialogfenster für Werteingabe)
nach unten releaseEvents() (Ereignisse abschließen)
nach unten resizeBy() (Größe verändern mit relativen Angaben)
nach unten resizeTo() (Größe verändern mit absoluten Angaben)
nach unten routeEvent() (Event-Handler-Hierarchie durchlaufen)
nach unten scrollBy() (Scrollen um Anzahl Pixel)
nach unten scrollTo() (Scrollen zu Position)
nach unten setInterval() (zeitliche Anweisungsfolge setzen)
nach unten setTimeout() (Timeout setzen)
nach unten stop() (abbrechen)

Unterobjekte:

Seite document
Seite event
Seite history
Seite location
nach unten

window: Allgemeines zur Verwendung

Das Objekt window (Fenster) ist das oberste Objekt der Objektfamilie für alles, was im Browser-Fenster angezeigt wird. Über das Objekt window können Sie das Dokumentfenster abfragen und kontrollieren. Ferner können Sie neue Fenster definieren. Dabei können Sie auch die Fenstereigenschaften frei bestimmen.

Das aktuelle Fenster des Web-Browsers können Sie über die Objekte window oder self ansprechen. Auf die Objekte window und self lassen sich alle Eigenschaften und Methoden des window-Objekts anwenden.

Beispiel:

<html><head><title>Test</title>
<script type="text/javascript">
window.defaultStatus = "Meine Homepage";
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel belegt die ständige Anzeige der Statuszeile des aktuellen Anzeigefensters mit dem Wert "Meine Homepage". Dazu wird die Fenstereigenschaft nach unten defaultStatus aufgerufen.

window oder self können auch weggelassen werden. So hat window.moveTo(200,100) die gleiche Wirkung wie moveTo(200,100). Der Übersichtlichkeit halber ist es jedoch besser, den vordefinierten Objektnamen mit anzugeben.

Auch Frame-Fenster innerhalb eines Frame-Sets stellen aus Sicht von JavaScript eigene Fenster dar. Lesen Sie dazu jedoch den Abschnitt über das Objekt Seite frames.

Sie können mit Hilfe von JavaScript nicht nur vorhandene Fenster ansprechen, sondern auch neue Fenster erzeugen und diese mit Hilfe von Variablen ansprechen.

Beispiel:

<html><head><title>Test</title>
<script type="text/javascript">
function FensterOeffnen (Adresse) {
  MeinFenster = window.open(Adresse, "Zweitfenster", "width=300,height=200,scrollbars=yes");
  MeinFenster.focus();
}
</script>
</head><body>
<a href="datei2.htm" onclick="FensterOeffnen(this.href); return false">Neues Fenster</a>
</body></html>

Erläuterung:

Die Beispieldatei enthält einen Verweis. Beim Anklicken dieses Verweises wird die JavaScript-Funktion FensterOeffnen() aufgerufen. Diese Funktion öffnet ein neues, kleines Browser-Fenster und zeigt darin die Datei datei2.htm an. Eine genauere Erklärung sowie weitere Einzelheiten zum Öffnen neuer Fenster werden bei der Methode nach unten open() beschrieben. Ein solches Fenster ist nach dem Erzeugen mit der Variablen ansprechbar, in der die Fensterinstanz gespeichert ist. Im Beispiel ist das die Variable MeinFenster. Über diesen Instanznamen können Sie alle Eigenschaften und Methoden des erzeugten Fensters ansprechen.

Beispiel:

<a href="javascript:MeinFenster.close()">Fenster zumachen</a>

Erläuterung:

Im Beispiel wird das zuvor geöffnete Fenster beim Klicken auf den Verweis wieder geschlossen. Zuständig dafür ist die Methode nach unten close(). Das Fenster wird dabei mit seinem Instanznamen angesprochen, im Beispiel also mit dem Namen der Variablen MeinFenster, mit der es zuvor erzeugt wurde.

Bei der Variablen MeinFenster handelt es sich um eine globale Variable. Diese wurde erzeugt durch eine Seite Deklaration der Variablen ohne das Schlüsselwort var. Die Deklaration als globale Variable ermöglicht es Ihnen, dieses Fenster auch außerhalb der erzeugenden Funktion anzusprechen.

Genau so, wie Sie vom Hauptfenster auf ein mit open() erzeugtes Zweitfenster zugreifen können, können Sie aus einem solchen Zweitfenster auf das Hauptfenster zugreifen. Dazu gibt es das Fensterobjekt opener. Damit wird das Fenster angesprochen, von dem aus das aktuelle Fenster geöffnet wurde. Über das Objekt opener können Sie alle Eigenschaften und Methoden des öffnenden Fensters ansprechen.

Testbeispiel (im Zweitfenster):

<a href="javascript:opener.close()">Hauptfenster zumachen</a>

Erläuterung:

Notieren Sie nach opener einen Punkt und danach die gewünschte Methode oder Eigenschaft.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 Lesen closed

Speichert, ob ein Fenster, das zum Beispiel mit open() neu geöffnet wurde, mittlerweile geschlossen wurde. Hat den Wert true, wenn das Fenster geschlossen wurde. Sinnvoll, um die Existenz eines Fensters abzufragen, bevor Anweisungen zum Verändern eines Fensters folgen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var InfoWin = window.open("datei1.htm", "Zweitfenster");
function CheckOpen () {
  if (InfoWin.closed == true) {
    alert("Fenster wurde geschlossen");
  } else {
    alert("Fenster noch offen");
  }
}
</script>
</head><body>
<a href="javascript:CheckOpen()">Fenster zu?</a>
</body></html>

Erläuterung:

Das Beispiel lädt beim Einlesen ein Zweitfenster mit einer anderen Datei datei1.htm. Beim Klicken auf den Verweis wird eine Funktion CheckOpen() aufgerufen, die ausgibt, ob das andere Fenster noch offen ist oder nicht.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen/Ändern defaultStatus

Speichert den Inhalt der Statuszeile, der solange angezeigt wird, wie kein besonderes Ereignis eintritt (etwa das Überfahren eines Verweises mit der Maus).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
window.defaultStatus = "Helmuts Homepage";
</script>
</head><body>
<p>Achten Sie auf die Statuszeile</p>
</body></html>

Erläuterung:

Das Beispiel belegt beim Einlesen der Datei die normale Anzeige der Statuszeile mit dem Wert Helmuts Homepage.

Beachten Sie:

Konqueror setzt die Wertzuweisung im Beispiel prinzipiell um, überschreibt aber kurze Zeit später den Text wieder mit "Seite geladen". Die Zuweisung muss daher nach dem Laden der Seite erfolgen, damit der Text in der Statuszeile dauerhaft bleibt. Safari entfernt den Statustext nach Bewegen des Mauszeigers. Beachten Sie ferner, dass Konqueror, Firefox und Opera Einstellungen anbieten, die das Beschreiben der Statusleiste für Scripte unmöglich machen.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 Lesen/Ändern innerHeight

Speichert die Höhe des Anzeigebereichs eines Fensters.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
window.innerHeight = 300;
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel setzt beim Einlesen der Datei den Anzeigebereich des Fensters auf eine Höhe von 300 Pixel fest.

Beachten Sie beim Neufestsetzen der Fensterhöhe die Bildschirmgröße. Diese können Sie mit dem Seite screen-Objekt ermitteln. Beachten Sie auch, dass der Anzeigebereich eines Fensters um einiges kleiner sein muss als das Fenster selbst, da das Fenster in der Regel noch Elemente wie Titelleiste, Menüleiste usw. enthält. Die absolute Höhe eines Fensters können Sie mit nach unten outerHeight auslesen bzw. setzen.

Beachten Sie:

Unter Opera, Konqueror und Safari können Sie die Eigenschaft innerHeight nur auslesen, jedoch nicht setzen.

Im Internet Explorer können Sie mit document.body.clientHeight die innere Fensterhöhe bestimmen. Wenn Sie eine Seite Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den Seite standardkonformen Modus auslöst, müssen Sie document.documentElement.clientHeight statt document.body.clientHeight verwenden. Zu diesem Zeitpunkt muss jedoch das body- bzw. html-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaften vom Event-Handler Seite onload abhängig zu machen.
Ein fertiges Script zum Auslesen der Größe des Anzeigebereichs des Fensters, das alle Browser und Anzeigemodi berücksichtigt, finden Sie auf englischsprachige Seite quirksmode.org.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 Lesen/Ändern innerWidth

Speichert die Breite des Anzeigebereichs eines Fensters. Sehr gut geeignet in Verbindung mit absolutem Positionieren von Elementen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function BreiteFestlegen () {
  window.innerWidth = document.Eingabe.Feld.value;
}
</script>
</head><body>
<form name="Eingabe" action="">
<input type="text" name="Feld">
<input type="button" value="Test" onclick="BreiteFestlegen()">
</form>
</body></html>

Erläuterung:

Das Beispiel erlaubt es, in einem Eingabefeld einen Wert einzugeben. Beim Klicken auf einen ebenfalls definierten Button wird die Funktion BreiteFestlegen() aufgerufen, die die Fensterbreite auf den eingegebenen Wert setzt.

Beachten Sie beim Neufestsetzen der Fensterbreite die Bildschirmgröße. Diese können Sie mit dem Seite Screen-Objekt ermitteln. Beachten Sie auch, dass der Anzeigebereich eines Fensters um einiges kleiner sein muss als das Fenster selbst, da das Fenster in der Regel noch Elemente wie Titelleiste, Menüleiste usw. enthält. Die absolute Breite eines Fensters können Sie mit nach unten outerWidth auslesen bzw. setzen.

Beachten Sie:

Unter Opera, Konqueror und Safari können Sie die Eigenschaft innerWidth nur auslesen, jedoch nicht setzen.

Im Internet Explorer können Sie mit document.body.clientWidth die innere Fensterhöhe bestimmen. Wenn Sie eine Seite Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den Seite standardkonformen Modus auslöst, müssen Sie document.documentElement.clientWidth statt document.body.clientWidth verwenden. Zu diesem Zeitpunkt muss jedoch das body- bzw. html-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaften vom Event-Handler Seite onload abhängig zu machen.
Ein fertiges Script zum Auslesen der Größe des Anzeigebereichs des Fensters, das alle Browser und Anzeigemodi berücksichtigt, finden Sie auf englischsprachige Seite quirksmode.org.

JavaScript 1.2 Netscape 4.0 Mozilla Firefox 1 Safari 1.2 Lesen locationbar

Speichert, ob ein Fenster eine eigene Adresszeile hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible (= sichtbar). Enthält für diese Eigenschaft den Wert true, wenn das Fenster eine Adresszeile hat, und den Wert false, wenn es keine hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function FensterOeffnen () {
  Fenster = window.open("datei.htm", "Zweitfenster1", "width=300,height=200");
  if (Fenster.locationbar) {
    if (Fenster.locationbar.visible == false) {
      Fenster.close();
      Neufenster = window.open("datei.htm", "Zweitfenster2", "width=300,height=200,location=yes");
      Neufenster.focus();
    }
  } else {
    alert("Ihr Browser gibt nicht Preis, ob das neue Fenster eine Adressleiste hat.");
  }
}
</script>
</head><body>
<p><a href="javascript:FensterOeffnen()">Fenster &ouml;ffnen</a></p>
</body></html>

Erläuterung:

Das Beispiel definiert eine Funktion FensterOeffnen(), die beim Aktivieren des Verweises aufgerufen wird. Diese Funktion öffnet zunächst ein Zweifenster ohne Adressleiste. Anschließend prüft sie, ob der Browser das Objekt locationbar kennt und ob das Fenster keine Adresszeile hat. Wenn es keine hat, wird es geschlossen. Stattdessen wird ein neues Fenster mit der zusätzlichen Angabe location=yes geöffnet. Näheres dazu siehe nach unten open().

Beachten Sie:

Mozilla Firefox 1.0 kennt das Objekt window.locationbar zwar, die visible-Eigenschaft liefert jedoch in den meisten Fällen unbrauchbare Werte, die nicht wiederspiegeln, ob eine Adressleiste zu sehen ist oder nicht. Nur bei mit nach unten window.open() geöffneten Fenstern liefert visible korrekte Werte. Aber auch dabei gibt es - wenn auch selten vorkommende - Ausnahmen: Wenn die Adressleiste standardmäßig ausgeschaltet ist und Sie ein Fenster mit der Eigenschaft location=yes öffnen, so zeigt Firefox trotzdem keine Adressleiste, gibt aber fälschlicherweise true für window.locationbar.visible zurück. Sie sollten sich daher nicht auf diese Eigenschaft verlassen.

JavaScript 1.2 Netscape 4.0 Mozilla Firefox 1 Safari 1.2 Lesen menubar

Speichert, ob ein Fenster eine eigene Menüleiste mit den Browser-Menübefehlen hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible (= sichtbar). Enthält für diese Eigenschaft den Wert true, wenn das Fenster eine Menüleiste hat, und den Wert false, wenn es keine hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Hinweis () {
  if (window.menubar) {
    if (window.menubar.visible == true) {
      alert("Um die Seite zu editieren, wählen Sie aus dem Menü 'Ansicht'" +
        " den Befehl 'Quelltext anzeigen'.");
    } else {
      alert("Nanu, Ihr Browserfenster besitzt keine Menüleiste? Klicken Sie " +
        "mit der rechten Maustaste auf das Dokument und wählen dort 'Quelltext anzeigen', "+
        "um die Seite zu editieren.");
    }
  } else {
    alert("Es lässt sich nicht feststellen, ob ihr Browserfenster eine Menüleiste " +
      "hat. Probieren Sie im Menü 'Ansicht' den Befehl 'Quelltext anzeigen', " +
      "um die Seite zu editieren. Wenn Sie keine Menüleiste finden, klicken Sie mit " +
      "der rechten Maustaste auf das Dokument und wählen dort 'Quelltext anzeigen'.");
  }
}
</script>
</head><body>
<a href="javascript:Hinweis()">Diese Seite editieren</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis, der dem Anwender anbietet, die angezeigte Seite zu editieren. Wenn der Verweis aktiviert wird, wird eine Funktion Hinweis() aufgerufen. Diese prüft, ob der Browser das Objekt menubar kennt und ob für das aktuelle Fenster eine Menüleiste verfügbar ist. Je nachdem, welcher Fall zutrifft, gibt die Funktion mit nach unten alert() verschiedene Hinweis aus, die dem Anwender erklären, was zu tun ist, um die Seite zu editieren.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 Lesen/Ändern name

Speichert den Namen eines Fensters. Bei Netscape 2.0 nur auslesbar, ab späteren Versionen auch änderbar.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
Fenster = window.open("datei.htm", "KleinesFenster", "width=200,height=200");
function Fenstername () {
  alert("Name des kleinen Fensters: " + Fenster.name);
  neu = prompt("Vergeben Sie einen neuen Fensternamen", "Name");
  Fenster.name = neu;
  alert("Der Name des Fensters lautet jetzt: " + Fenster.name);
}
</script>
</head><body>
<a href="javascript:Fenstername()">Name des Fensters</a>
</body></html>

Erläuterung:

Das Beispiel lädt beim Einlesen der Datei ein zweites kleines Fenster. Der Name dieses Fensters lautet KleinesFenster. Beachten Sie, dass die Eigenschaft name sich auf diesen Namen bezieht, nicht etwa auf den Variablennamen, in dem die Fensterinstanz gespeichert wird (im Beispiel die Variable Fenster). Beim Klicken auf einen Verweis wird die Funktion Fenstername() aufgerufen. Darin wird dem Anwender zunächst mit nach unten alert() der aktuelle Fenstername des kleinen Fensters ausgegeben. Dann kann er einen neuen Namen eingeben. Abschließend wird der neue Name angezeigt.

Beachten Sie:

Ein mit JavaScript gesetzter Fenstername bleibt solange erhalten, wie das Fenster geöffnet ist bzw. bis er erneut geändert wird. Sie können aus diesem Grund den Fensternamen zum Speichern von Variableninhalten verwenden, z.B., um Variablen von einer Datei an eine später aufgerufene Datei zu übergeben. Berücksichtigen Sie dabei jedoch, dass der Fenstername in vielen Browsern lediglich Buchstaben, Zahlen und den Unterstrich enthalten darf. Sonderzeichen und Umlaute dagegen sind nicht erlaubt. Eine Ausnahme bildet Opera 5. Hier bleibt ein mit JavaScript gesetzter Fenstername nur solange gültig, wie das ändernde Dokument in diesem Fenster geladen ist.
Lesen Sie zu dem Thema auch im Online-Angebot von SELFHTML aktuell den Artikel Online-Seite Javascript-Wertübergabe zwischen verschiedenen HTML-Dokumenten von Hatto von Hatzfeld.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern outerHeight

Speichert die Gesamthöhe eines Fensters inklusive Titelleiste, Menüleiste, Statuszeile usw.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
alert("Gesamthoehe dieses Fensters: " + window.outerHeight + "  Pixel");
window.outerHeight = 300;
alert("Gesamthoehe jetzt: " + window.outerHeight + "  Pixel");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt beim Einlesen zunächst die Höhe des aktuellen Fensters aus. Dann setzt es die Höhe neu fest, und zwar auf 300 Pixel. Anschließend wird die neue Fensterhöhe zur Kontrolle mit nach unten alert() nochmals ausgegeben.

Beachten Sie:

Unter Opera, Konqueror und Safari können Sie die Eigenschaft outerHeight nur auslesen, jedoch nicht setzen.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern outerWidth

Speichert die Gesamtbreite eines Fensters inklusive Fensterrändern.

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Beispiel:

<html><head><title>Test</title>
<script type="text/javascript">
if (window.outerWidth > 640)
  window.outerWidth = 640;
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel fragt beim Einlesen der Datei ab, ob die Breite des aktuellen Fensters mehr als 640 Pixel beträgt. Wenn ja, wird die Breite auf 640 Pixel festgesetzt.

Beachten Sie:

Unter Opera, Konqueror und Safari können Sie die Eigenschaft outerWidth nur auslesen, jedoch nicht setzen.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen pageXOffset

Speichert die aktuelle horizontale Position innerhalb der Seite, gemessen am linken Fensterrand. So lässt sich ermitteln, wie weit der Anwender bereits nach rechts gescrollt hat. Sinnvoll in Verbindung der Verwendung mit nach unten scrollBy() oder nach unten scrollTo().

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Set0 () {
  if (parent.frames[1].pageXOffset > 0)
    parent.frames[1].scrollTo(0, parent.frames[1].pageYOffset);
}
</script>
</head><body>
<a href="javascript:Set0()">nach links</a>
</body></html>

Erläuterung:

Im Beispiel wird angenommen, es gibt ein anderes Frame-Fenster, das einen überbreiten Inhalt hat, sodass der Anwender nach rechts scrollen muss, um alles zu sehen. Mit dem Verweis, der in der aktuellen Datei notiert ist, lässt sich das andere Frame-Fenster wieder ganz nach links scrollen. Dazu wird die aktuelle horizontale Scroll-Position der Eigenschaft pageXOffset abgefragt. Wenn sie größer 0 ist, hat der Anwender nach rechts gescrollt. In diesem Fall wird die Methode nach unten scrollTo() aufgerufen, um wieder ganz nach links zu scrollen. Die vertikale Position bleibt dabei erhalten, da als Parameter die Eigenschaft nach unten pageYOffset übergeben wird.

Zur Adressierung von Frame-Fenstern in JavaScript lesen Sie den Abschnitt über das Objekt Seite frames.

Beachten Sie:

Im Internet Explorer ab Version 4 ist die horizontale Scroll-Position in der Eigenschaft document.body.scrollLeft gespeichert. Wenn Sie eine Seite Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den Seite standardkonformen Modus auslöst, müssen Sie document.documentElement.scrollLeft statt document.body.scrollLeft verwenden. Zu diesem Zeitpunkt muss jedoch das body- bzw. html-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaften vom Event-Handler Seite onload abhängig zu machen.
Ein fertiges Script zum Auslesen der horizontalen und vertikalen Scroll-Position, das alle Browser und Anzeigemodi berücksichtigt, finden Sie auf englischsprachige Seite quirksmode.org.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen pageYOffset

Speichert die aktuelle vertikale Position innerhalb der Seite, gemessen am Dokumentanfang. So lässt sich ermitteln, wie weit der Anwender bereits nach unten gescrollt hat. Sinnvoll in Verbindung der Verwendung mit nach unten scrollBy() oder nach unten scrollTo().

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
for (var i = 0; i < 100; i++)
  document.write("Viel Text<br>");
function Position () {
  alert("pageYOffset: " + window.pageYOffset + " Pixel");
}
</script>
<a href="javascript:Position()">Y-Position</a>
</body></html>

Erläuterung:

Im Beispiel schreibt ein JavaScript zu Testzwecken 100 mal eine HTML-Zeile mit dem Text Viel Text in das Dokumentfenster. Das veranlasst den Browser, entsprechend weit nach unten mit zu scrollen. Am Ende wird ein Verweis notiert. Bei dessen Anklicken wird die Funktion Position() aufgerufen. Sie gibt mit nach unten alert() aus, wie weit die aktuelle Scroll-Position vom Dokumentanfang entfernt ist.

Beachten Sie:

Im Internet Explorer ab Version 4 ist die vertikale Scroll-Position in der Eigenschaft document.body.scrollTop gespeichert. Wenn Sie eine Seite Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den Seite standardkonformen Modus auslöst, müssen Sie document.documentElement.scrollTop statt document.body.scrollTop verwenden. Zu diesem Zeitpunkt muss jedoch das body- bzw. html-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaften vom Event-Handler Seite onload abhängig zu machen.
Ein fertiges Script zum Auslesen der horizontalen und vertikalen Scroll-Position, das alle Browser und Anzeigemodi berücksichtigt, finden Sie auf englischsprachige Seite quirksmode.org.

JavaScript 1.2 Netscape 4.0 Mozilla Firefox 1 Safari 1.2 Lesen personalbar

Speichert, ob ein Fenster eine eigene "persönliche" Leiste hat. Das ist bei Netscape 4.x und Mozilla die Leiste unterhalb der Adresszeile, die den Direktzugriff auf Lieblingsadressen (Bookmarks) ermöglicht. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible (= sichtbar). Enthält für diese Eigenschaft den Wert true, wenn das Fenster eine solche Leiste hat, und den Wert false, wenn es keine hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function PersonalCheck () {
  if (window.personalbar) {
    if (window.personalbar.visible == false) {
      alert("Haben Sie denn keine Lieblingsadressen?");
    } else {
      alert("Aha, Sie nutzen also die Personal Bar!");
    }
  } else {
    alert("Schade, Ihr Browser mag nicht verraten, ob Sie eine Personal Bar benutzen.");
  }
}
</script>
</head><body>
<a href="javascript:PersonalCheck()">Pers&ouml;nlichkeitstest</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Wenn der Anwender den Verweis anklickt, wird eine Funktion PersonalCheck() aufgerufen. Diese prüft, ob der Browser das Objekt personalbar kennt und ob für das aktuelle Fenster eine Bookmarks-Leiste verfügbar ist. Je nach Ergebnis wird dem Anwender mit nach unten alert() eine "persönliche" Meldung ausgegeben.

Beachten Sie:

Mozilla Firefox 1.0 kennt das Objekt window.personalbar zwar, die visible-Eigenschaft liefert jedoch in den meisten Fällen unbrauchbare Werte, die nicht wiederspiegeln, ob eine Bookmark-Leiste zu sehen ist oder nicht. Nur bei mit nach unten window.open() geöffneten Fenstern liefert visible korrekte Werte.

JavaScript 1.2 Netscape 4.0 Mozilla Firefox 1 Safari 1.2 Lesen scrollbars

Speichert, ob ein Fenster Scroll-Leisten hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible (= sichtbar). Enthält für diese Eigenschaft den Wert true, wenn das Fenster Scroll-Leisten hat, und den Wert false, wenn es keine hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function FensterOeffnen () {
  Neufenster = window.open("datei.htm", "AnderesFenster", "width=400,height=250");
  if (Neufenster.scrollbars) {
    if (Neufenster.scrollbars.visible == false)
      Neufenster.close();
  } else {
    alert("Ihr Browser erlaubt das Abfragen der Scrollbars nicht.");
  }
}
</script>
</head><body>
<a href="javascript:FensterOeffnen()">Kleiner Scroll-Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Wenn dieser aktiviert wird, wird eine Funktion FensterOeffnen() aufgerufen. Diese öffnet ein zweite, kleineres Fenster, das anschließend unter Neufenster ansprechbar ist. Anschließend prüft die Funktion, ob der Browser das Objekt scrollbars kennt und ob für das zweite Fenster Scroll-Leisten verfügbar sind. Wenn das zweite Fenster keine Scroll-Leisten hat, wird das Fenster mit nach unten close() geschlossen. Wenn das scrollbars-Objekt nicht verfügbar ist, wird eine entsprechende Meldung ausgegeben.

Beachten Sie:

Safari kennt zwar das scrollbars-Objekt und dessen Eigenschaft visible. Allerdings hat diese auch dann den Wert true, wenn das Fenster keine Scroll-Leisten besitzt. Der Wert hat nur dann false, wenn beim window.open()-Aufruf ausdrücklich scrollbars=false angegeben wurde. Deshalb funktioniert das Beispiel im Safari nicht: Das geöffnete Fenster wird nicht geschlossen, obwohl die Scroll-Listen nicht sichtbar sind. Für Firefox gilt dasselbe, allerdings liefert dieser selbst im besagten window-open()-Fall einen unzutreffenden Wert.

JavaScript 1.2 Netscape 4.0 Mozilla Firefox 1 Safari 1.0 Lesen statusbar

Speichert, ob ein Fenster eine eigene Statuszeile hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible (= sichtbar). Enthält für diese Eigenschaft den Wert true, wenn das Fenster eine Statuszeile hat, und den Wert false, wenn es keine hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Statustext (Text) {
  if (window.statusbar && window.statusbar.visible == true) {
    window.defaultStatus = Text;
  } else {
    alert(Text);
  }
}
</script>
</head><body>
<form name="Eingabe" action="">
<input type="text" name="Feld">
<input type="button" value="Start" onclick="Statustext(document.Eingabe.Feld.value)">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular definiert. Der Anwender kann einen Text eingeben. Beim Klick auf den Button wird die Funktion Statustext() aufgerufen. Die Funktion ermittelt, ob der Browser das Objekt statusbar kennt und ob das aktuelle Fenster eine Statuszeile hat. Wenn ja, wird der im Eingabefeld eingegebene Text als Standardtext der Statuszeile gesetzt. Wenn nein, wird der eingegebene Text nur mit nach unten alert() angezeigt.

Beachten Sie:

Mozilla Firefox 1.0 kennt das Objekt window.statusbar zwar, die visible-Eigenschaft liefert jedoch in den meisten Fällen unbrauchbare Werte, die nicht wiederspiegeln, ob eine Statusleiste zu sehen ist oder nicht. Nur bei mit nach unten window.open() geöffneten Fenstern liefert visible korrekte Werte. Aber auch dabei gibt es - wenn auch selten vorkommende - Ausnahmen: Wenn die Statusleiste standardmäßig ausgeschaltet ist und Sie ein Fenster mit der Eigenschaft status=yes öffnen, so zeigt Firefox trotzdem keine Statusleiste, gibt aber fälschlicherweise true für window.statusbar.visible zurück. Sie sollten sich daher nicht auf diese Eigenschaft verlassen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 6 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 Lesen/Ändern status

Speichert oder setzt den aktuellen Inhalt der Statuszeile.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="datei.htm" onmouseover="window.status = 'Das ist ein Verweis'; return true;">Verweis</a>
</body></html>

Erläuterung:

Das Beispiel zeigt einen Verweis. Beim Überfahren des Verweistextes mit der Maus erscheint in der Statuszeile der Text: das ist ein Verweis. Wichtig ist bei solchen Konstrukten die Anweisung return true am Ende.

Beachten Sie:

Besucher, die bewusst auf den Inhalt der Statuszeile achten, erwarten, dort für sie wichtige Information in Form eines Verweisziels vorzufinden. Nutzer hingegen, die den Inhalt der Statuszeile nicht wahrnehmen, werden von einer etwaigen Zusatzinformation nichts mitbekommen. Sie sollten daher möglichst davon absehen, die Statusleiste zu manipulieren.

Die Browserhersteller haben auf diese Probleme reagiert, indem sie window.status weitestgehend "abgeschaltet" haben. Der Internet Explorer 7 unterbindet Manipulationen der Statuszeile gänzlich. Firefox, Opera und Konqueror bieten eine Einstellung an, die das Beschreiben der Statusleiste für Scripte unmöglich macht.

Selbst wenn keine Einstellungen das Beschreiben von window.status verbieten, so wird im Opera und Konqueror beim Überfahren eines Verweises immer dessen Ziel in der Statusleiste angezeigt. Diese Browser stellen den neuen Text in der Statuszeile erst dar, wenn der Mauszeiger den Verweis selbst wieder verlassen hat.

Alles in allem können Sie window.status als eine überholte und mittlerweile unbrauchbare Eigenschaft sehen - vermeiden Sie sie möglichst ganz.

JavaScript 1.2 Netscape 4.0 Mozilla Firefox 1 Safari 1.0 Lesen toolbar

Speichert, ob ein Fenster eine eigene Button-Leiste (mit Buttons für "Vor", "Zurück" usw.) hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nämlich die Eigenschaft visible (= sichtbar). Enthält für diese Eigenschaft den Wert true, wenn das Fenster eine Button-Leiste hat, und den Wert false, wenn es keine hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
if (window.toolbar && window.toolbar.visible == false)
  document.write('<a href="javascript:history.back()">Back<\/a>');
</script>
</body></html>

Erläuterung:

Das Beispiel enthält innerhalb des Dateikörpers einen Script-Bereich. Darin wird überprüft, ob das Fenster eine eigene Button-Leiste hat. Wenn nicht, wird mit Seite document.write() ein HTML-Konstrukt an die Stelle im Dokument geschrieben, die den Button "Zurück" als HTML-Verweis schreibt (siehe auch Seite history.back()).

Beachten Sie:

Mozilla Firefox 1.0 kennt das Objekt window.toolbar zwar, die visible-Eigenschaft liefert aber nur dann einen korrekten Wert, wenn es auf Fenster angewendet wird, die Sie vorher mit nach unten window.open() selbst geöffnet haben. Das obige Beispiel stellt daher nicht korrekt fest, ob die Firefox-Navigationsleiste eingeblendet ist oder nicht.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 alert()

Gibt Text in einem Dialogfenster aus. Erwartet eine Zeichenkette, eine Zahl oder ein Objekt als Parameter.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert('Verweisziel noch nicht erreichbar')">Unsere Erfolge</a>
</body></html>

Erläuterung:

Das Beispiel führt beim Anklicken eines Verweises keinen Sprung zu einer anderen Seite aus, sondern gibt stattdessen eine Dialogbox mit dem Hinweis "Verweisziel noch nicht erreichbar" aus. Sie können der alert()-Methode feste Zeichenketten übergeben wie im Beispiel, aber auch Variablen. Dann wird der Inhalt der Variablen ausgegeben. Auch zusammengesetzte Ketten dürfen Sie übergeben, etwa:
alert("Ihr Browser" + navigator.userAgent)

Beachten Sie:

Intern wandelt die alert()-Methode den übergebenen Parameter in eine Zeichenkette um. So kann es vorkommen, dass sich ein Wert mit alert() ausgeben lässt, jedoch keine Zeichenkettenoperationen mit dem ausgegebenen Wert ausführbar sind, da es sich außerhalb der Ausgabe nicht um eine Zeichenkette handelt.

Der Rückgabewert der Methode alert() ist stets undefined.

Das Aussehen des Mitteilungsfenster ist abhängig vom Betriebssystem und dem verwendeten Browser. Das bedeutet, Sie können die Mitteilungsbox nur mittels Seite Steuerzeichen formatieren. Weitere Formatierungsmöglichkeiten stehen Ihnen nicht zur Verfügung.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 back()

Entspricht bei normalen WWW-Seiten einem Klick auf den "Zurück"-Button im Browser. Bei Frames wird jedoch die letzte besuchte Seite aufgerufen, die nicht zum Frame-Set gehörte. Hier liegt der entscheidende Unterschied zur Methode Seite history.back!

Diese Methode erwartet keine Parameter.

Beispiel:

<html><head><title>Test</title>
</head><body>
<a href="javascript:window.back()">Zurück</a>
</body></html>

Erläuterung:

Das Beispiel realisiert einen HTML-Verweis, bei dessen Anklicken die Seite aufgerufen wird, die zuletzt das gesamte Anzeigefenster ausfüllte.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 blur()

Macht ein Fenster inaktiv. Das Gegenteil von nach unten focus(). Erwartet keine Parameter.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Neufenster = window.open("datei.htm", "AnderesFenster", "width=400,height=250");
</script>
</head><body>
<a href="javascript:Neufenster.focus()">Fenster nach vorne</a><br>
<a href="javascript:Neufenster.blur()">Fenster nach hinten</a>
</body></html>

Erläuterung:

Im Beispiel wird beim Einlesen der HTML-Datei ein zweites, kleines Fenster geöffnet. Die HTML-Datei selbst enthält zwei Verweise. Beim Anklicken des ersten Verweises wird das zweite Fenster aktiviert - focus(). Beim Anklicken des zweiten Verweises wird es deaktiviert und je nach Fensterkonstellation von dem Hauptfenster überdeckt - blur().

JavaScript 1.2 Netscape 4.0 captureEvents()

Überwacht Anwenderereignisse im angegebenen Fenster. Erwartet als Parameter eine Folge von Ereignissen, die überwacht werden sollen. Folgende Ereignisse lassen sich überwachen:

Event.ABORT Event.BLUR Event.CHANGE Event.CLICK Event.DBLCLICK Event.DRAGDROP Event.ERROR Event.FOCUS Event.KEYDOWN Event.KEYPRESS Event.KEYUP Event.LOAD Event.MOUSEDOWN Event.MOUSEMOVE Event.MOUSEOUT Event.MOUSEOVER Event.MOUSEUP Event.MOVE Event.RESET Event.RESIZE Event.SELECT Event.SUBMIT Event.UNLOAD.

Es handelt sich dabei um spezielle Notationsvarianten entsprechender Seite Event-Handler ohne das "on" davor, dafür mit dem Ansprechen des Seite Event-Objekts davor. So entspricht etwa Event.MOUSEOVER dem Event-Handler onmouseover.

Sie können mehrere Ereignisse überwachen. Trennen Sie die Event-Namen dabei durch | (Querstriche).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
window.captureEvents(Event.KEYPRESS);
window.onkeypress = Ausgabe;
function Ausgabe (Ereignis) {
  alert("Sie haben die Taste mit dem Wert " + Ereignis.which + " gedrueckt");
}
</script>
</head><body>
Dr&uuml;uecken Sie irgendwelche Tasten!
</body></html>

Erläuterung:

Im Beispiel wird der Event KEYPRESS (Taste gedrückt) überwacht. Wenn der Anwender eine Taste drückt, wird die Funktion Ausgabe() aufgerufen, die mit nach oben alert() ausgibt, welche Taste gedrückt wurde. Die Syntax beim Funktionsaufruf ist dabei abweichend von der üblichen. Ein zusammenhängendes Beispiel mit Erläuterungen hierzu finden Sie im Kapitel Kapitel Dynamisches HTML im Abschnitt über das Seite Event-Objekt bei Netscape.

Beachten Sie:

Die Methode captureEvents() existiert auch bei anderen Browsern, nämlich Mozilla Firefox, Opera, Konqueror und Safari. Dort ist die Methode allerdings wirkungslos und wird auch nicht benötigt. Denn lediglich im Netscape 4 muss zum Aktivieren der Ereignisüberwachung captureEvents() ausgeführt werden. Den anderen Browsern reicht die Anweisung window.onkeypress = Ausgabe; im Beispiel aus. Deshalb funktioniert das Beispiel auch in diesen Browsern - aber das würde es auch ohne captureEvents().

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 clearInterval()

Bricht einen Endlosvorgang ab, der mit nach unten setInterval() begonnen wurde. Erwartet als Parameter die Variable, in der der Aufruf von setInterval() gespeichert wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var aktiv = window.setInterval("Farbe()", 1000);
var i = 0, farbe = 1;
function Farbe () {
  if (farbe == 1) {
    document.bgColor = "yellow";
    farbe = 2;
  } else {
    document.bgColor = "aqua";
    farbe = 1;
  }
  i = i + 1;
  if (i >= 10)
    window.clearInterval(aktiv);
}
</script>
</body></html>

Erläuterung:

Das Beispiel definiert mit setInterval(), dass die Funktion Farbe() alle 1000 Millisekunden, also jede Sekunde einmal aufgerufen wird. Der Aufruf wird in der Variablen aktiv gespeichert. Im Beispiel wechselt die Funktion Farbe() bei jedem Aufruf die Hintergrundfarbe der Datei ( Seite document.bgColor). Gleichzeitig wird ein Zähler hochgezählt. Wenn er größer gleich 10 ist, wird die Methode clearInterval() aufgerufen, die den Endlosvorgang stoppt. Dabei wird die zuvor definierte Variable aktiv als Parameter übergeben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 clearTimeout()

Bricht einen Timeout ab, der mit der Methode nach unten setTimeout() gestartet wurde. Erwartet als Parameter die Variable, in der der Aufruf von setTimeout() gespeichert wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var i = 0;
function Zaehlen () {
  i = i + 1;
  aktiv = window.setTimeout("Zaehlen()", 1000);
}

function Aufhoeren () {
  window.clearTimeout(aktiv);
  alert(i + " Sekunden");
}

aktiv = window.setTimeout("Zaehlen()", 1000);
</script>
</head><body>
<form action="">
<input type="button" value="Klick" onclick="Aufhoeren()">
</form>
</body></html>

Erläuterung:

Das Beispiel startet beim Einlesen der Datei mit setTimeout() einen Zählvorgang. Dabei wird alle 1000 Millisekunden, also 1 mal pro Sekunde, die Funktion Zaehlen() aufgerufen. Diese zaehlt die Variable i hoch. In der Datei wird ein Button definiert. Wenn der Anwender auf den Button klickt, wird die Funktion Aufhoeren() aufgerufen. Diese Funktion stoppt mit clearTimeout() den Timeout und gibt mit nach oben alert() die Anzahl der gezählten Sekunden aus. Beim Aufruf von clearTimeout() wird die zuvor bei setTimeout() definierte globale Variable aktiv als Parameter übergeben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 close()

Schließt ein Fenster. Erwartet keine Parameter.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Info = window.open("datei.htm", "Zweitfenster");
</script>
</head><body>
<form action="">
<input type="button" value="Fenster zu" onclick="Info.close()">
</form>
</body></html>

Erläuterung:

Das Beispiel öffnet beim Einlesen der Datei ein zweites Fenster namens Info. In der Beispieldatei wird ein Button definiert. Wenn der Anwender auf den Button klickt, wird das zweite Fenster geschlossen.

Beachten Sie:

Die Methode close() unterliegt der Sicherheitskonzeption von JavaScript. Das bedeutet, dass sich ein Fenster, sobald es eine History besitzt (weil der Anwender darin mehrere Seiten aufgerufen hat), nicht mehr ohne eine Browsernachfrage schließen lässt. Ein Unterdrücken dieser Abfrage ist nicht möglich.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 confirm()

Blendet ein Dialogfenster mit zwei Buttons für "OK" und "Abbrechen" ein. Sinnvoll, um vom Anwender eine Entscheidung zu erzwingen, die im weiteren Programmablauf verarbeitet wird. Erwartet als Parameter einen Aufforderungstext für die Ja/Nein-Entscheidung. Liefert als Ergebnis zurück, wie sich der Anwender entschieden hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
Check = confirm("Wollen Sie diese Seite wirklich sehen?");
if (Check == false)
  history.back();
</script>
</head><body>
</body></html>

Erläuterung:

Im Beispiel wird der Anwender beim Einlesen der Datei gefragt, ob er die Seite wirklich sehen will. Der Rückgabewert von confirm() wird in der Variablen Check gespeichert. Wenn der Anwender auf "OK" klickt, enthält Check den Wert true. Es passiert nichts weiter und die Seite wird geladen. Wenn er "Abbrechen" wählt, erhält Check den Wert false. Für diesen Fall ist die Anweisung Seite history.back() notiert, die den Anwender auf die Seite zurückbefördert, von der er kam.

Das Aussehen des Auswahlfenster ist abhängig vom Betriebssystem und dem verwendeten Browser. Das bedeutet, Sie können die Auswahl nur mittels Seite Steuerzeichen formatieren. Weitere Formatierungsmöglichkeiten stehen Ihnen nicht zur Verfügung.

JavaScript 1.2 Netscape 4.0 disableExternalCapture()

Verbietet anderen Fenstern, Ereignisse im aktuellen Fenster zu überwachen. Vor allem als Schutz gedacht, falls fremde Seiten die eigene Seiten in ein Frame-Set laden.

Beispiel:

<html><head><title>Test</title>
<script type="text/javascript">
disableExternalCapture();
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel startet beim Einlesen den Befehl disableExternalCapture(). Dadurch können fremde Seiten keine Anwenderereignisse in dieser Datei überwachen, falls die Datei in ein fremdes Frame-Set geladen wird.

JavaScript 1.2 Netscape 4.0 enableExternalCapture()

Erlaubt anderen Fenstern, Ereignisse im aktuellen Fenster zu überwachen. So lassen sich von anderen Fenstern eines Frame-Sets aus Anwenderereignisse im aktuellen Fenster überwachen.

Beispiel:

<html><head><title>Test</title>
<script type="text/javascript">
enableExternalCapture();
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel startet beim Einlesen den Befehl enableExternalCapture(). Dadurch können fremde Seiten Anwenderereignisse in dieser Datei überwachen, falls die Datei Teil eines Frame-Sets ist.

JavaScript 1.2 Netscape 4.0 Mozilla Firefox 1 find()

Durchsucht den Inhalt eines Fensters nach einem Text. Entspricht in der Funktionalität dem Menübefehl "Suchen". Die Suche bezieht sich nur auf die aktuelle Seite.
Erwartet folgende Parameter:
1. Text = Text, nach dem gesucht werden soll.
2. Groß-/Kleinschreibung beachten = true für ja oder false für nein übergeben.
3. Suchrichtung rückwärts = true für ja oder false für nein übergeben.
Die beiden letzten Parameter sind optional.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form action="">
<p>Geben Sie einen Suchbegriff ein:
<input type="text" name="SuchNach">
<input type="button" value="suchen" onclick="find(this.form.SuchNach.value, false, false)">
</form>
</body></html>

Erläuterung:

Im Beispiel steht am Anfang der Datei ein Formular mit einem Eingabefeld zur Eingabe eines Suchbegriffs. Das Formular enthält außerdem einen Button. Bei dessen Anklicken wird der weitere Inhalt der Datei nach dem Begriff durchsucht, den der Anwender in dem Eingabefeld eingegeben hat.

Beachten Sie:

Netscape 6.1 kennt diese Methode nicht (mehr).

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 focus()

Macht ein Fenster zum aktiven Fenster. Sinnvoll bei Verwendung von Zweitfenstern, aber auch bei Frame-Fenstern. Erwartet keine Parameter.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function FrameVerweis (Ziel) {
  parent.frames[1].location.href = Ziel;
  parent.frames[1].focus();
}
</script>
</head><body>
<a href="javascript:FrameVerweis('../location.htm')">Neue Seite</a>
</body></html>

Erläuterung:

Das Beispiel nimmt an, dass die aktuelle Datei Teil eines Frame-Sets ist. Die Datei enthält einen Verweis, dessen Ziel in einem anderen Frame-Fenster angezeigt werden soll. Beim Anklicken wird aber nicht nur das Verweisziel in das andere Frame-Fenster geladen, sondern dieses wird zugleich das aktive Fenster. So kann der Anwender beispielsweise gleich mit den Pfeiltasten darin scrollen. Dazu wird beim Anklicken des Verweises eine Funktion FrameVerweis() aufgerufen. Diese Funktion lädt im ersten Befehl das als Parameter übergebene Verweisziel in den anderen Frame ( Seite location.href), und im zweiten Befehl setzt sie mit focus() das Ziel-Frame-Fenster aktiv.

Zur Adressierung von Frame-Fenstern in JavaScript lesen Sie den Abschnitt über das Objekt Seite frames.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 forward()

Entspricht bei normalen WWW-Seiten einem Klick auf den "Vorwärts"-Button im Browser. Bei Frames wird jedoch die nächste besuchte Seite aufgerufen, die nicht zum Frame-Set gehört. Bei Frames also unterschiedlich zu history.forward()! Erwartet keine Parameter.

Beispiel:

<html><head><title>Test</title>
</head><body>
<a href="javascript:window.forward()">Vor</a>
</body></html>

Erläuterung:

Das Beispiel realisiert einen HTML-Verweis, bei dessen Anklicken die Seite aufgerufen wird, die beim Vorwärtsgehen in der History als nächste das gesamte Anzeigefenster ausfüllt.

JavaScript 1.2 Netscape 4.0 handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function clickHandler (Ereignis) {
  window.document.links[0].handleEvent(Ereignis);
}

window.captureEvents(Event.CLICK);
window.onclick = clickHandler;
</script>
</head><body>
<a href="datei.htm" onclick="location.href = 'datei.htm'">Verweis</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis, bei dessen Anklicken - ganz normal durch die href-Angabe - die Datei datei.htm aufgerufen wird. Im Beispiel ist es jedoch so, dass datei.htm sofort aufgerufen wird, sobald der Anwender irgendwo im Browser-Fenster hinklickt. Dazu wird beim Einlesen der Datei mit der nach oben captureEvents()-Methode das Mausklick-Ereignis überwacht. Wenn das Ereignis eintritt, wird die Funktion ClickHandler() aufgerufen. Diese übergibt mit handleEvent() das Ereignis an den ersten im Dokument definierten Verweis weiter (document.links[0]). In dem entsprechenden Verweis ist dazu ein Event-Handler onclick notiert. Dieser ist in der Lage, das übergebene Ereignis zu verarbeiten. Als Befehl wird mit Seite location.href die gleiche Datei aufgerufen wie beim Anklicken des Verweises selbst.

Beachten Sie:

Netscape 6.1 kennt diese Methode nicht (mehr).

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 home()

Entspricht einem Klick auf den "Home"-Button im Browser.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:home()">Nach hause</a>
</body></html>

Erläuterung:

Das Beispiel definiert einen Verweis, bei dessen Anklicken die Seite aufgerufen wird, die der Anwender als Start-Homepage eingestellt hat.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 moveBy()

Verschiebt ein Fenster um so viele Pixel wie angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel das Fenster nach links/rechts verschoben werden soll. Negative Werte verschieben nach links, positive nach rechts.
2. y-Wert = um wie viele Pixel das Fenster nach oben/unten verschoben werden soll. Negative Werte verschieben nach oben, positive nach unten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
Fenster = window.open("datei.htm", "Zweitfenster", "width=200,height=200");
function Bewege () {
  Fenster.moveBy(200, 100);
  Fenster.focus();
}
</script>
</head><body>
<a href="javascript:Bewege()">Fenster bewegen</a>
</body></html>

Erläuterung:

Das Beispiel lädt beim Einlesen der Datei ein kleines Zweitfenster mit einer anderen Datei. Das Hauptfenster enthält einen Verweis. Beim Anklicken des Verweises wird die Funktion Bewege() aufgerufen, die das kleine Fenster um 200 Pixel nach rechts und um 100 Pixel nach unten verschiebt.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 moveTo()

Verschiebt ein Fenster auf die anzugebende Position. Erwartet folgende Parameter:
1. x-Wert = Links-Wert für die neue obere linke Ecke des Fensters.
2. y-Wert = Oben-Wert für die neue obere linke Ecke des Fensters.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
Fenster = window.open("datei.htm", "Zweitfenster", "width=200,height=200");
function Bewege () {
  Fenster.moveTo(screen.width - 250, screen.height - 350);
  Fenster.focus();
}
</script>
</head><body>
<a href="javascript:Bewege()">Fenster bewegen</a>
</body></html>

Erläuterung:

Das Beispiel lädt beim Einlesen der Datei ein kleines Zweitfenster mit einer anderen Datei. Das Zweitfenster hat eine Breite und eine Höhe von 200 Pixeln. Das Hauptfenster enthält einen Verweis. Beim Anklicken des Verweises wird die Funktion Bewege() aufgerufen, die das kleine Fenster in die rechte untere Ecke des Bildschirms verschiebt. Die Pixelangaben für die neue linke obere Ecke des Fensters werden dabei mit Hilfe des Seite screen-Objekts gewonnen, das mit screen.width die Bildschirmbreite und mit screen.height die Bildschirmhöhe liefert.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 open()

Öffnet ein neues Fenster. Erwartet mindestens zwei, optional auch drei Parameter:

1. URI = Zieladresse einer Datei, die in das neue Fenster geladen werden soll. Wenn sich die Datei im gleichen Verzeichnis befindet, genügt der Dateiname. Ansonsten relative Pfadnamen oder absolute http-Adressen angeben. Um ein leeres Fenster zu öffnen kann auch eine leere Zeichenkette angegeben werden. In einigen alten Browserversionen (IE 3) führt dies allerdings zu einer Fehlermeldung.
Anstelle eines URI können Sie auch mit about:blank eine leere Datei in das Fenster laden. Was aber wiederum in einigen Opera (bis 7) Versionen dazu führt, dass Sie dieses Fehler nicht mehr mit Javascript ansprechen können.

2. Fenstername = Ein Name, der nur aus Buchstaben, Ziffern und Unterstrich bestehen darf. Unter diesem Namen können beispielsweise Verweise ihre Ziele mit <a href="ziel.htm" target="NameDesFensters"> in das erzeugte Fenster laden.
Gültige Fensternamen sind auch _blank,_parent,_self und _top. Opera 5.12 öffnet jedoch in jedem Fall die Datei im gleichen Fenster. Netscape 6 interpretiert die Angabe _parent nicht.

3. (optional) Angaben zum Aussehen des Fensters = Eine Zeichenkette, in der Sie die Größe und die Eigenschaften des Fensters festlegen können. Mehrere Angaben sind durch Kommata zu trennen. Folgende Angaben sind möglich:

Eigenschaft | Wertzuweisung | Status | Bedeutung
dependent | yes|no | Mozilla Firefox 1 | Wenn ja (yes), wird das Fenster geschlossen, wenn sein Elternfenster geschlossen wird. Wenn nein (no = Voreinstellung), bleibt das Fenster erhalten, wenn sein Elternfenster geschlossen wird.
height | [Pixel] | MS IE 3.0 Mozilla Firefox 1 | Höhe des neuen Fensters in Pixeln, z.B. height=200.
hotkeys | yes|no |  | Wenn nein (no), werden Tastaturbefehle zum Steuern des Browsers in dem Fenster deaktiviert. Wenn ja (yes = Voreinstellung), bleiben Tastaturbefehle des Browsers in dem Fenster gültig.
innerHeight | [Pixel] | Mozilla Firefox 1 | Höhe des Anzeigebereichs des neuen Fensters in Pixeln, z.B. innerHeight=200.
innerWidth | [Pixel] | Mozilla Firefox 1 | Breite des Anzeigebereichs des neuen Fensters in Pixeln, z.B. innerWidth=200.
left | [Pixel] | MS IE 4.0 Mozilla Firefox 1 | Horizontalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B. left=100.
location | yes|no | MS IE 3.0 Mozilla Firefox 1 | Wenn ja (yes), erhält das Fenster eine eigene Adresszeile. Wenn nein (no), erhält es keine Adresszeile. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält. Netscape 6.1 interpretiert diese Angabe nicht.
menubar | yes|no | MS IE 3.0 Mozilla Firefox 1 | Wenn ja (yes), erhält das Fenster eine eigene Menüleiste mit Browser-Befehlen. Wenn nein (no), erhält es keine Menüleiste. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält. Beachten Sie: Bei Safari ist die Menüleiste wie auf dem Macintosh üblich nicht Bestandteil des Fensters, kann also nicht ausgeblendet werden.
resizable | yes|no | MS IE 3.0 Mozilla Firefox 1 | Wenn ja (yes), kann der Anwender das Fenster in der Größe verändern. Wenn nein (no), kann er die Fenstergröße nicht ändern. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält.
screenX | [Pixel] | Mozilla Firefox 1 | Horizontalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B. screenX=100.
screenY | [Pixel] | Mozilla Firefox 1 | Vertikalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B. screenY=30.
scrollbars | yes|no | MS IE 3.0 Mozilla Firefox 1 | Wenn ja (yes), erhält das Fenster Scroll-Leisten. Wenn nein (no), kann der Anwender in dem Fenster nicht scrollen. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält.
status | yes|no | MS IE 3.0 Mozilla Firefox 1 | Wenn ja (yes), erhält das Fenster eine eigene Statuszeile. Wenn nein (no), erhält es keine Statuszeile. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält.
toolbar | yes|no | MS IE 3.0 Mozilla Firefox 1 | Wenn ja (yes), erhält das Fenster eine eigene Werkzeugleiste. Wenn nein (no), erhält es keine Werkzeugleiste. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthält.
top | [Pixel] | MS IE 4.0 Mozilla Firefox 1 | Vertikalwert der linken oberen Ecke des neuen Fensters in Pixeln, z.B. top=100.
width | [Pixel] | MS IE 3.0 Mozilla Firefox 1 | Breite des neuen Fensters in Pixeln, z.B. width=400.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function FensterOeffnen (Adresse) {
  MeinFenster = window.open(Adresse, "Zweitfenster", "width=300,height=400,left=100,top=200");
  MeinFenster.focus();
}
</script>
</head><body>
<p><a href="datei.htm" onclick="FensterOeffnen(this.href); return false">Link mit Fenster</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält zunächst einen normalen Link mit dem Linkziel datei.htm. Im Event-Handler Seite onclick ist ein Aufruf der Funktion FensterOeffnen() notiert. Das bedeutet, dass die Funktion aufgerufen wird, sobald der Link angeklickt wird. Der Funktion wird mit this.href der Wert des href-Attributs des Links übergeben. Seite this nimmt dabei auf das aktuelle Objekt Bezug, in diesem Fall das Seite Elementobjekt a.

Die Funktion nimmt dementsprechend als ersten Funktionsparameter die Adresse entgegen, die in einem neuen Fenster geöffnet werden soll. Sie ruft die open()-Methode mit dieser Adresse auf und übergibt gleichzeitig den Fensternamen "Zweitfenster" als zweiten Parameter sowie diverse Angaben zum Aussehen des Fensters im dritten Parameter. Anschließend wird das neue Fenster mit nach unten focus() in den Vordergrund geholt.

Nach dem Ausführen der Funktion wird schließlich return false ausgeführt. Dies verhindert, dass der Browser im ursprünglichen Fenster ebenfalls datei.htm öffnet. Denn beim Klicken auf einen Link wird normalerweise erst der Event-Handler onclick ausgeführt und anschließend der Link regulär geöffnet.

Diese Vorgehensweise hat den Vorteil, dass der Link auch dann funktioniert, wenn JavaScript nicht zur Verfügung steht oder nicht aktiviert ist. In diesem Fall wird datei.htm einfach im selben Fenster geöffnet anstatt in einem neuen.

Beachten Sie:

Die meisten Browser erlauben keine Fensterhöhe oder -breite, die kleiner als 100 Pixel ist. Je nach Betriebssystem und Browser wird bei kleineren Fenstern eine Fehlermeldung (Zugriff verweigert) ausgegeben bzw. die jeweiligen Minimalwerte verwendet.
In verschiedenen Browsern kann der Nutzer bestimmte Fenstereigenschaften selbst vorgeben, sodass manche Angaben zum Aussehen des Fensters ignoriert werden. Auch ist es möglich, das Öffnen von neuen Fenstern zu unterbinden. Insbesondere werden solche Fenster verhindert, die sich automatisch z.B. beim Laden einer HTML-Seite öffnen. Alle neueren Browser besitzen sogenannte Popup-Blocker, die das Aufspringen von aufdringlichen Fenstern u.a. mit Werbung verhindern.
Zudem setzen immer mehr Browser auf "Tabbed Browsing", d.h. das Darstellen von mehreren Webseiten in einem Browserfenster, die der Benutzer in einer Leiste als Registerkarten anwählen kann. Sie müssen damit rechnen, dass window.open() in solchen Browsern lediglich eine neue Registerkarte öffnet - oder die Zielseite kurzerhand im selben Karteireiter angezeigt wird. In solchen Fällen sind Ihre Angaben zum Aussehen des neuen Fensters natürlich wirkungslos.
Sie sollten sich also nicht darauf verlassen, dass wirklich ein neues Fenster mit dem gewünschten Aussehen geöffnet wird.

JavaScript 1.2 Netscape 4.0 MS IE 5.0 Opera 6 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 print()

Startet den Druckdialog - entspricht dem Menübefehl zum Drucken im Browser. Erwartet keine Parameter.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:window.print()">Diese Seite drucken</a>
</body></html>

Erläuterung:

Das Beispiel definiert einen Verweis, mit dessen Hilfe der Anwender die Seite ausdrucken kann.

Beachten Sie:

Der Internet Explorer 5 unter Macintosh interpretiert diese Methode nicht.

Für den Internet Explorer 4.x gibt es einen Workaround, um das Ausdrucken mit JavaScript anzustoßen. Dazu muss ein ActiveX-Control eingebunden werden. Der JavaScript-Code sieht dazu folgendermaßen aus (Beispiel):

if (document.all && navigator.appVersion.substring(22, 23) == 4) {
  self.focus();
  var OLECMDID_PRINT = 6;
  var OLECMDEXECOPT_DONTPROMPTUSER = 2;
  var OLECMDEXECOPT_PROMPTUSER = 1;
  var WebBrowser = '<object id="WebBrowser1" width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';
  document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
  WebBrowser1.ExecWB(OLECMDID_PRINT, OLECMDEXECOPT_DONTPROMPTUSER);
  WebBrowser1.outerHTML = '';
}

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 prompt()

Zeigt ein Dialogfenster mit einem Eingabefeld, einem OK-Button und einem Abbrechen-Button an. Der Anwender kann in dem Eingabefeld etwas eingeben. Die Methode prompt() gibt diesen eingegebenen Wert zurück. So lassen sich Anwendereingaben im Script weiterverarbeiten.
Erwartet zwei Parameter:
1. Aufforderungstext = Text, der beschreibt, was der Anwender eingeben soll.
2. Feldvorbelegung = Text, mit dem das Eingabefeld vorbelegt wird. Wenn Sie ein leeres Eingabefeld wollen, übergeben Sie dafür eine leere Zeichenkette "".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
Check = prompt("Geben Sie Ihr Passwort fuer diese Seite ein", "");
if (Check != "Rumpelstielz") {
  history.back();
} else {
  alert("Sie haben Zutritt");
}
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel bringt vor dem Anzeigen der HTML-Datei mit prompt() ein Dialogfenster auf den Bildschirm. Darin muss der Anwender ein Passwort eingeben. Die Eingabe wird in der Variablen Check gespeichert. Wenn der Wert dieser Variablen nach dem Beenden des Dialogfensters nicht gleich "Rumpelstielz" ist, wird der Anwender mit Seite history.back() zu der Seite zurückgeschickt, von der er kam. Wenn das eingegebene Wort stimmt, erhält er mit nach oben alert() die Meldung, dass er Zutritt hat, und die Seite wird geladen.

JavaScript 1.2 Netscape 4.0 releaseEvents()

Beendet die Überwachung von Anwenderereignissen. Gegenstück zu nach oben captureEvents(). Erwartet als Parameter eine Folge von Ereignissen, die nicht mehr überwacht werden sollen. Gleiche Syntax wie bei captureEvents().

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var i = 0;
window.captureEvents(Event.KEYPRESS);
window.onkeypress = Ausgabe;
function Ausgabe (Ereignis) {
  alert("Sie haben die Taste mit dem Wert " + Ereignis.which + " gedrueckt");
  i = i + 1;
  if (i > 2)
    window.releaseEvents(Event.KEYPRESS);
}
</script>
</head><body>
Druecken Sie 3 mal irgendwelche Tasten!
</body></html>

Erläuterung:

Im Beispiel wird der Event KEYPRESS (Taste gedrückt) überwacht. Wenn der Anwender eine Taste drückt, wird die Funktion Ausgabe() aufgerufen, die mit nach oben alert() ausgibt, welche Taste gedrückt wurde. Die Funktion ruft sich bei Eintritt des Ereignisses selbst wieder auf, jedoch nur, solange der Zähler i kleiner als 3 ist. Danach wird das Überwachen der Tastaturereignisse mit der Methode releaseEvents(Event.KEYPRESS) beendet.
Ein zusammenhängendes Beispiel mit Erläuterungen hierzu finden Sie im Kapitel Kapitel Dynamisches HTML im Abschnitt über das Seite Event-Objekt bei Netscape.

Beachten Sie:

Die Methode releaseEvents() existiert auch bei anderen Browsern, nämlich Netscape 6, Mozilla Firefox, Opera, Konqueror und Safari. Dort ist die Methode allerdings wirkungslos oder hat eine Wirkung, die mit dem Beenden der Ereignisüberwachung nichts zu tun hat. Setzen Sie diese Methode daher nur im Zusammenhang mit Netscape 4 ein.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 resizeBy()

Verändert die Größe eines Fensters um so viele Pixel unten und rechts wie angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel das Fenster rechts verkleinert/vergrößert werden soll. Negative Werte verkleinern, positive vergrößern.
2. y-Wert = um wie viele Pixel das Fenster unten verkleinert/vergrößert werden soll. Negative Werte verkleinern, positive vergrößern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Kleiner () {
  window.resizeBy(-10, -10);
}
</script>
</head><body>
<a href="javascript:Kleiner()">Mach kleiner</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird die Funktion Kleiner() aufgerufen. Diese Funktion verkleinert das dateieigene Fenster um 10 Pixel in der Breite und in der Höhe.

Beachen Sie:

Einige Browser setzen nicht nur gewisse Mindestgrößen für Fenster durch, sondern ignorieren je nach Einstellung die Änderung der Fenstergröße durch resizeBy() vollkommen, da viel Unfug mit dieser Methode getrieben wurde.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 resizeTo()

Verändert die Größe eines Fensters absolut. Erwartet folgende Parameter:
1. x-Wert = neue Breite des Fensters.
2. y-Wert = neue Höhe des Fensters.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body onload="window.resizeTo(580, 420)">
</body></html>

Erläuterung:

Das Beispiel setzt die Fenstergröße beim Einlesen der Datei auf eine Breite von 580 Pixeln und auf eine Höhe von 420 Pixeln.

Beachen Sie:

Einige Browser setzen nicht nur gewisse Mindestgrößen für Fenster durch, sondern ignorieren je nach Einstellung die Änderung der Fenstergröße durch resizeTo() vollkommen, da viel Unfug mit dieser Methode getrieben wurde.

JavaScript 1.2 Netscape 4.0 routeEvent()

Übergibt ein Anwenderereignis an das oberste Objekt der Objekthierarchie des Dokuments, also an das window-Objekt. Vor dort aus wird das Ereignis immer weiter nach unten durchgereicht bis zu dem Element, bei dem das Ereignis eintrat. Wenn sich auf diesem Weg ein Event-Handler findet, der das Ereignis verarbeitet, wird der Abstieg des Ereignisses abgebrochen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Click1 () {
  alert("Sie haben auf den Button geklickt");
}

function Click2 (Ereignis) {
  alert("Sie haben ins Fenster geklickt");
  window.routeEvent(Ereignis);
}

window.captureEvents(Event.CLICK);
window.onclick = Click2;
</script>
</head><body>
<form action="">
<input type="button" value="Button" onclick="Click1()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält einen Button, bei dessen Anklicken die Funktion Click1() aufgerufen wird. Diese Funktion gibt zur Kontrolle mit nach oben alert() aus, dass der Button angeklickt wurde. Im Beispiel ist es jedoch so, dass beim Einlesen der Datei mit der nach oben captureEvents()-Methode das Mausklick-Ereignis fensterweit überwacht wird. Wenn das Ereignis eintritt, wird in jedem Fall die Funktion Click2() aufgerufen. Diese gibt zur Kontrolle aus, dass in das Fenster geklickt wurde. Anschließend übergibt sie mit routeEvent() das Ereignis an die Objekthierarchie. Wenn auf ein Objekt geklickt wird, das ebenfalls das Klick-Ereignis überwacht, wird die entsprechende Aktion ausgeführt. Im Beispiel hat dies zur Folge, dass der Anwender beim Klick auf den Button zwei Meldungen erhält: nämlich zuerst die, dass ins Fenster geklickt wurde, und danach die, dass auf den Button geklickt wurde. Ohne die routeEvent()-Methode würde er die zweite Meldung gar nicht erhalten, da das Klick-Ereignis vorher abgefangen worden wäre.

Beachten Sie:

Mozilla Firefox kennt routeEvent() zwar, die Methode hat dort jedoch keinerlei Wirkung.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 scrollBy()

Scrollt eine Seite automatisch um so viele Pixel nach oben oder unten oder links oder rechts wie angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel nach rechts links/rechts gescrollt werden soll. Negative Werte scrollen nach links, positive nach rechts.
2. y-Wert = um wie viele Pixel nach oben/unten gescrollt werden soll. Negative Werte scrollen nach oben, positive nach unten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
for (var i = 1; i <= 100; i++)
  document.write("Zeile " + i + "<br>");
function NachOben () {
  var y = 0;
  if (window.pageYOffset) {
    y = window.pageYOffset;
  } else if (document.body && document.body.scrollTop) {
    y = document.body.scrollTop;
  }
  if (y > 0) {
    window.scrollBy(0, -10);
    setTimeout("NachOben()", 10);
  }
}
</script>
<a href="javascript:NachOben()">nach oben scrollen</a>
</body></html>

Erläuterung:

Das Beispiel schreibt zu Testzwecken in einer Schleife mit Seite document.write() 100 Zeilen in die Datei. Unterhalb davon wird ein HTML-Verweis notiert. Um zu diesem Verweis zu gelangen, muss der Anwender wegen der 100 voranstehenden Zeilen erst mal nach unten scrollen. Wenn er auf den Verweis klickt, wird automatisch langsam zum Seitenanfang zurückgescrollt. Dazu wird die Funktion NachOben() aufgerufen. Diese Funktion ermittelt mit nach oben pageYOffset bzw. im Internet Explorer mit document.body.scrollTop zunächst die vertikale Position innerhalb der Seite. Wenn die so ermittelte Scroll-Position (y-Wert) größer als 0 ist, wird um -10 Pixel gescrollt, also um 10 Pixel nach oben. Mit Hilfe der Methode nach unten setTimeout() wird nach 10 Millisekunden die Funktion NachOben() erneut aufgerufen.
Durch den wiederholten Aufruf der Funktion NachOben() wird die Seite langsam bis nach oben gescrollt.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 scrollTo()

Scrollt zu einer bestimmten Position. Erwartet folgende Parameter:
1. x-Wert = Links-Wert für Position der linken oberen Ecke des Anzeigefensters.
2. y-Wert = Oben-Wert für Position der linken oberen Ecke des Anzeigefensters.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
function Pos100 () {
  window.scrollTo(100, 100);
}
document.write('<p style="white-space:nowrap">');
var Zeile = 'Zeile';
for (var i = 1; i <= 50; i++) {
  Zeile = Zeile + " Zeile";
  document.write("<br>Zeile " + Zeile);
}
document.write('<\/p><p><a href="javascript:Pos100()">Test<\/a><\/p>');
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt zu Testzwecken in einer Schleife mit Seite document.write() 50 Zeilen, wobei die Zeilen immer länger werden. Ganz am Ende wird ein Verweis notiert. Um dort hin zu gelangen, muss der Anwender nach unten und nach rechts scrollen. Wenn er auf den Verweis klickt, wird die Funktion Pos100() aufgerufen. Diese Funktion setzt die Scroll-Position neu, und zwar auf 100 Pixel von links und 100 Pixel von oben, bezogen auf den Dokumentanfang.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setInterval()

Führt eine Anweisung oder den Aufruf einer Funktion in einem festgelegten Rhythmus immer wieder aus, solange, bis der Vorgang mit nach oben clearInterval() beendet wird. Erwartet zwei Parameter:
1. Code = Eine JavaScript-Anweisung, die wiederholt werden soll. Meistens ein Funktionsaufruf.
2. Pause = Wert in Millisekunden bis zum nächsten Ausführen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var aktiv = window.setInterval("Farbe()", 1000);
var i = 0, farbe = 1;
function Farbe () {
  if (farbe == 1) {
    document.bgColor = "yellow";
    farbe = 2;
  } else {
    document.bgColor = "aqua";
    farbe = 1;
  }
  i = i + 1;
  if (i >= 10)
    window.clearInterval(aktiv);
}
</script>
</body></html>

Erläuterung:

Das Beispiel definiert mit setInterval(), dass die Funktion Farbe() alle 1000 Millisekunden, also jede Sekunde einmal aufgerufen wird. Wichtig ist, dass der Aufruf in einer Variablen gespeichert wird, im Beispiel in der Variablen aktiv. Diese Variable wird der Methode clearInterval() benötigt, um den Vorgang zu stoppen. Im Beispiel wechselt die Funktion Farbe() bei jedem Aufruf die Hintergrundfarbe der Datei ( Seite document.bgColor). Gleichzeitig wird ein Zähler hochgezählt. Wenn er größer gleich 10 ist, wird die Methode clearInterval() aufgerufen, die den Endlosvorgang stoppt. Dabei wird die zuvor definierte Variable aktiv als Parameter übergeben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setTimeout()

Führt eine Anweisung nach einer bestimmten Verzögerungszeit aus. Erwartet zwei Parameter:
1. Code = Eine JavaScript-Anweisung, die verzögert ausgeführt werden soll. Meistens ein Funktionsaufruf.
2. Pause = Wert in Millisekunden bis zum Ausführen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Hinweis () {
  var x = confirm("Sie sind jetzt schon 10 Sekunden auf dieser Seite. Fortfahren?");
  if (x == false)
    top.close();
}

window.setTimeout("Hinweis()", 10000);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ruft nach 10.000 Millisekunden, also nach 10 Sekunden, eine Funktion Hinweis() auf, sofern der Anwender nach dieser Zeit immer noch auf der Seite ist. Die Funktion fragt ihn mit der nach oben confirm()-Methode, ob er noch länger auf der Seite bleiben möchte. Wenn nicht, wird das Hauptfenster geschlossen. Dazu dient der Befehl top.close(), der die nach oben close()-Methode auf die oberste Fensterinstanz des Browsers anwendet.

Beachten Sie:

An setTimeout() gekoppelte Funktionsaufrufe können auch Parameter enthalten. Berücksichtigen Sie dabei, dass lokale Variable dann nicht mehr zur Verfügung stehen. Eine Übergabe der Werte mittels Seite Zeichenkettenverknüpfung ist jedoch jederzeit möglich.

JavaScript 1.2 Netscape 4.0 Opera 6 Mozilla Firefox 1 Safari 1.2 stop()

Entspricht einem Klick auf den "Stop"-Button im Browser. Der Ladevorgang einer Seite wird dadurch abgebrochen.

Beispiel:

<html><head><title>Test</title>
</head><body>
Diese Seite hat einen Umfang von 300 Kilobyte:<br>
<a href="javascript:stop()">abbrechen</a>
</body></html>

Erläuterung:

Das Beispiel definiert einen Verweis, bei dessen Anklicken der Ladevorgang einer Seite abgebrochen wird.

Beachten Sie:

In Opera 5 führt dies zu einem Absturz.

nach oben
weiter | Seite frames
zurück | Seite Hinweise zur JavaScript-Objektreferenz
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / frames

SELFHTML

frames
Informationsseite

nach unten frames: Allgemeines zur Verwendung
nach unten Auf JavaScripts in anderen Frames zugreifen

Eigenschaft:

nach unten length (Anzahl Frames)

Unterobjekte:

Seite document
Seite event
Seite history
Seite location
nach unten

frames: Allgemeines zur Verwendung

Mit dem Objekt frames haben Sie Zugriff auf Kapitel Frames, also auf ein Frame-Set und seine Frame-Fenster, die in einer HTML-Datei definiert sind.

Da jedes Frame-Fenster aus Sicht des Browsers ein eigenes Fenster darstellt, ist das frames-Objekt lediglich eine Variante des Seite window-Objekts, also des allgemeinen Fensterobjekts. Alle Eigenschaften und Methoden, die zum window-Objekt gehören, lassen sich auch auf das frames-Objekt, also auf einzelne Frame-Fenster anwenden. Das frames-Objekt stellt nur deshalb ein eigenes Objekt dar, weil es eine zusätzliche Eigenschaft enthält, und weil bei der Adressierung von Frame-Fenstern in JavaScript ein paar Besonderheiten zu beachten sind:

Schema 1 / Beispiel 1:

parent.frames[#].Eigenschaft/Methode();

parent.frames[1].location.href = "sport.html";

Schema 2 / Beispiel 2:

parent.NameDesFrames.Eigenschaft/Methode();

parent.RechtesFenster.back();

Erläuterung:

parent ist ein reservierter Fenstername, den Sie zum Ansprechen von Fenstern innerhalb eines Frame-Sets verwenden können. Anstelle von parent können Sie auch top verwenden. Mit parent sprechen Sie das Eltern-Fenster des aktuellen Frame-Fensters an, mit top in jedem Fall das oberste Anzeigefenster des Browsers.

Frame-Fenster können Sie auf zwei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
    Bei Verwendung von Indexnummern geben Sie frames an und dahinter in eckigen Klammern, das wie vielte Frame-Fenster im Frame-Set Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. das erste Frame-Fenster sprechen Sie mit frames[0] an, das zweite Frame-Fenster mit frames[1] usw. Beim Zählen gilt die Reihenfolge, in der die <frame>-Befehle im Frame-Set definiert sind.
  • mit dem Namen des Frame-Fensters (wie in Schema 2 / Beispiel 2)
    Dabei geben Sie den Namen an, der bei der HTML-Definition des Frame-Fenster bei <frame ...> im Attribut name definiert worden ist.

Da das frames-Objekt eigentlich eine Variante des Seite window-Objekts ist, können Sie nicht nur die alle Eigenschaften und Methoden des window-Objekts auf das frames-Objekt anwenden, sondern auch alle anderen, die in der Hierarchie unterhalb des window-Objekts stehen. Ebenso, wie Sie beispielsweise mit window.document.forms[0].elements[0].value = "Stefan" den Inhalt eines Formular Eingabefelds in einer gewöhnlichen HTML-Datei ändern können, können Sie das gleiche innerhalb eines Frame-Sets etwa mit parent.frames[1].document.forms[0].elements[0].value = "Stefan" erreichen.

Ein typisches Anwendungsbeispiel für den Einsatz des Frame-Objekts finden Sie in diesem Dokument: Seite Zwei Frames gleichzeitig ändern.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Auf JavaScripts in anderen Frames zugreifen

Mit der gleichen Syntax, wie Sie auf HTML-Elemente in anderen Frame-Fenstern zugreifen können, können Sie auch auf JavaScripts zugreifen, die in einem anderen Frame-Fenster aktuell notiert sind. So können Sie Variablen des anderen Scripts auslesen und Funktionen des anderen Scripts aufrufen.

Das folgende Beispiel zeigt ein Frameset mit zwei Fenstern oben und unten. Das obere Fenster hat bei der Frameset-Definition den Namen oberesFenster erhalten. Aus dem unteren Frame-Fenster wird nun auf ein JavaScript im oberen Frame-Fenster zugegriffen

Beispieldatei im oberen Frame-Fenster:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var c = 0;

function gibaus_c () {
  alert(c);
}

function erhoehe_c () {
  c++;
  window.setTimeout("erhoehe_c()", 100);
}
</script>
</head><body onload="erhoehe_c()">
<p>Hier wird einfach nur 10 mal pro Sekunde die Variable <i>c</i> erh&ouml;ht!</p>
</body></html>

Beispieldatei im unteren Frame-Fenster:

<html><head><title>Test</title>
<script type="text/javascript">
function reset_c () {
  parent.oberesFenster.c = 0;
}
</script>
</head><body>
<p>
<a href="javascript:parent.oberesFenster.gibaus_c()">Variable <i>c</i> anzeigen!</a><br>
<a href="javascript:reset_c()">Variable <i>c</i> auf 0 setzen!</a>
</p>
</body></html>

Erläuterung:

Im oberen Fenster ist ein Script mit zwei Seite Funktionen namens gibaus_c() und erhoehe_c() notiert. Die Funktion erhoehe_c() wird mit dem Event-Handler onload im einleitenden <body>-Tag erstmals gestartet und ruft sich dann mit Hilfe der Methode Seite setTimeout() alle 100 Millisekunden, also 10 mal pro Sekunde selber wieder auf. Dabei erhöht sie jedesmal die Variable c um 1.

Im unteren Fenster sind zwei Verweise notiert. Der erste gibt den aktuellen Zählerstand von c aus. Dazu wird mit parent.oberesFenster.gibaus_c()" auf die Funktion gibaus_c() im anderen Frame-Fenster zugegriffen. Der zweite Verweis ruft eine Funktion reset_c() auf, die im Dateikopf des eigenen Dokuments notiert ist. Diese greift jedoch mit parent.oberesFenster.c auf die Variable c im anderen Frame-Fenster zu und setzt diese auf 0 zurück.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert, wie viele Frame-Fenster ein übergeordnetes Fenster enthält.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
for (var i = 0; i < parent.frames.length; i++)
  alert(parent.frames[i].name);
</script>
</head><body>
</body></html>

Erläuterung:

Mit parent.frames.length oder top.frames.length können Sie die Anzahl der Frame-Fenster ermitteln. Im Beispiel wird angenommen, dass die HTML-Datei innerhalb eines Frame-Sets aufgerufen wird. Beim Einlesen der Datei gibt die Datei mit der Methode alert() nacheinander die Namen aller Frame-Fenster im Frame-Set aus. Dazu dient die for-Schleife. Die Eigenschaft parent.frames.length dient als Abbruchbedingung für die Schleife. Da der Schleifenzähler i bei jedem Schleifendurchlauf um 1 erhöht wird, wird mit parent.frames[i] jeweils das nächste Frame-Fenster angesprochen.

nach oben
weiter | Seite document
zurück | Seite window
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / document

SELFHTML

document
Informationsseite

nach unten document: Allgemeines zur Verwendung

Eigenschaften:

nach unten alinkColor (Farbe für Verweise beim Anklicken)
nach unten bgColor (Hintergrundfarbe)
nach unten charset (verwendete Zeichenkodierung)
nach unten cookie (beim Anwender speicherbare Zeichenkette)
nach unten defaultCharset (voreingestellte Zeichenkodierung)
nach unten fgColor (Farbe für Text)
nach unten lastModified (letzte Änderung am Dokument)
nach unten linkColor (Farbe für Verweise)
nach unten referrer (zuvor besuchte Seite)
nach unten title (Titel der Datei)
nach unten URL (URL-Adresse der Datei)
nach unten vlinkColor (Farbe für Verweise zu besuchten Zielen)

Methoden:

nach unten captureEvents() (Ereignisse überwachen)
nach unten close() (schließen)
nach unten createAttribute() (Attributknoten erzeugen)
nach unten createElement() (Elementknoten erzeugen)
nach unten createTextNode() (Textknoten erzeugen)
nach unten getElementById() (HTML-Elementzugriff über id-Attribut)
nach unten getElementsByName() (HTML-Elementzugriff über name-Attribut)
nach unten getElementsByTagName() (HTML-Elementzugriff über Elementliste)
nach unten getSelection() (selektierter Text)
nach unten handleEvent() (Ereignisse verarbeiten)
nach unten open() (Dokument öffnen)
nach unten releaseEvents() (Ereignisse abschließen)
nach unten routeEvent() (Event-Handler-Hierarchie durchlaufen)
nach unten write() (ins Dokumentfenster schreiben)
nach unten writeln() (zeilenweise schreiben)

Unterobjekte:

Seite HTML-Elemente
Seite node
Seite all
Seite anchors
Seite applets
Seite forms
Seite images
Seite layers
Seite links
nach unten

document: Allgemeines zur Verwendung

Das document-Objekt bezieht sich auf den Inhalt, der in einem Browser-Fenster angezeigt wird. In der Objekthierarchie von JavaScript liegt es unterhalb des Seite window-Objekts.
Im Document Object Model (DOM) des W3-Konsortiums ist das document-Objekt das Ausgangsobjekt für den Elementenbaum. Die Elemente eines HTML-Dokuments stellen dem DOM zufolge also Unterobjekte des document-Objekts dar. Die einzelnen HTML-Elemente können dabei eigene Eigenschaften und Methoden haben. Diese werden im Abschnitt über Seite HTML-Elementobjekte beschrieben. Entscheidend für den Zugriff auf den HTML-Elementenbaum sind beim document-Objekt die DOM-Methoden nach unten getElementById und nach unten getElementsByName.
Darüber hinaus enthält das document-Objekt selber eine Reihe wichtiger Eigenschaften und Methoden, die dokumentglobale Eigenschaften speichern oder Funktionen ausführen. Die meisten davon werden auch vom DOM unterstützt. Das Ansprechen dieser Eigenschaften und Methoden funktioniert wie folgt:

Beispiele:

x = document.title;
x = window.document.title;

Zweitfenster = window.open("datei2.htm", "Fenster");
x = Zweitfenster.document.title;

y = parent.frames[2].document.bgColor;

document.write("Hallo Welt");
window.document.write("Hallo Welt");

Zweitfenster.document.close();
parent.frames[2].document.close();

Erläuterung:

Eigenschaften des document-Objekts, wie etwa der Titel der angezeigten HTML-Datei (<title>...</title>), können Sie mit document ansprechen, den Titel der Datei also document.title. Entsprechend werden Methoden des document-Objekts angesprochen, zum Beispiel die write-Methode mit document.write(). Sie können auch window.document.title oder window.document.write() notieren. Da es sich dabei aber um den Inhalt des aktuellen Fensters handelt, ist die Angabe des Fensterobjekts nicht zwingend erforderlich. Anders beim Zugriff auf andere Fenster oder Frame-Fenster. In diesen Fällen müssen Sie das Fenster korrekt adressieren. Lesen Sie für zusätzliche Fenster den Abschnitt zur Seite Verwendung des window-Objekts und für Frame-Fenster den Abschnitt über die Seite Verwendung des frames-Objekts.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 8 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern alinkColor

Speichert die Farbe für Verweise, während sie aktiviert sind, wie beim Attribut alink im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar ist (siehe auch Seite Farben für Hintergrund, Text und Verweise).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var i = 0;
function AndereFarbe () {
  if (i == 0) {
    document.alinkColor = "#000000";
  } else if (i == 1) {
    document.alinkColor = "#FF0000";
  } else if (i == 2) {
    document.alinkColor = "#0000FF";
  } else if (i == 3) {
    document.alinkColor = "green";
  }
  i = i + 1;
  if (i > 3)
    i = 0;
}
</script>
</head><body>
<a href="javascript:AndereFarbe()">Verweisfarbe</a>
</body></html>

Erläuterung:

Das Beispiel ruft beim Aktivieren des Verweises eine Funktion namens AndereFarbe() auf. Diese Funktion ändert bei jedem ihrer Aufrufe den Wert für document.alinkColor. Beachten Sie, dass Farben dabei entweder hexadezimal notiert werden oder in Form erlaubter Farbnamen (siehe auch Seite Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen.

Beachten Sie:

Diese klassische, im herkömmlichen JavaScript gültige Implementierung von alinkColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt Seite body eine Eigenschaft namens aLink in Entsprechung zum Attribut Seite alink.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern bgColor

Speichert die Hintergrundfarbe der HTML-Datei, wie sie beim Attribut bgcolor im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar ist. (siehe auch Seite Farben für Hintergrund, Text und Verweise).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var X = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
var x1 = 0, x2 = 0;
var i = 0;
function setColor () {
  document.bgColor = "#" + X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2];
  x2 = x2 + 1;
  if (x2 % 16 == 0) {
    x2 = 0;
    x1 = x1 + 1;
  }
  i++;
  if (i < 256)
    window.setTimeout("setColor()", 10);
}
</script>
</head><body bgcolor="#000000">
<p><a href="javascript:setColor()">Hintergrund &auml;ndern</a></p>
</body></html>

Erläuterung:

Das Beispiel blendet beim Einlesen die Hintergrundfarbe von Schwarz über Graustufen nach Weiß auf. Dazu wird ein Seite Array X definiert, in dem die Hexadezimalziffern 0 bis 9 und A bis F gespeichert werden. Im Seitenkörper wird ein Verweis notiert, bei dessen Aktivierung die Funktion setColor() ausgeführt wird. Innerhalb dieser Funktion wird der Eigenschaft document.bgColor jeweils ein neuer Wert zugewiesen. Dabei wird aus den zuvor definierten Ziffern der Arrays X eine gültige Farbangabe konstruiert. Am Ende der Funktion ruft sich die Funktion über Seite window.setTimeout() mit einer Zeitverzögerung von 10 Millisekunden selbst auf. Somit wird die Funktion 256 mal ausgeführt, bis die Hintergrundfarbe Weiß ist.

Beachten Sie, dass Farben entweder hexadezimal notiert werden, oder in Form erlaubter Farbnamen (siehe auch Seite Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen. Im obigen Beispiel fehlen die Anführungszeichen, weil es sich um eine Zeichenkette handelt, die dynamisch konstruiert wird. Fixe Angaben wären beispielsweise "#0099CC" oder "blue".

Beachten Sie:

Diese klassische, im herkömmlichen JavaScript gültige Implementierung von bgColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt Seite body eine Eigenschaft namens bgColor in Entsprechung zum Attribut Seite bgColor.

MS JScript MS IE 4.0 Lesen/Ändern charset

Speichert die verwendete Zeichenkodierung eines Dokuments.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function iso5 () {
  document.charset = "ISO-8859-5";
  document.open();
  document.write("Text mit ä ö ü");
  document.close();
}
</script>
</head><body>
<a href="javascript:iso5()">iso-8859-5</a>
</body></html>

Erläuterung:

Das Beispiel enthält im Dateikopf eine Seite Angabe zur verwendeten Zeichenkodierung des Dokuments. Dort wird Seite ISO-8859-1 angegeben, die verbreitete Kodierung für westliche Sprachen, inklusive der deutschen. Ferner enthält die Datei einen Verweis. Beim Anklicken wird die Funktion iso5() aufgerufen. Diese Funktion ändert die verwendete Kodierung auf ISO-8859-5 (Kyrillisch). Anschließend werden dynamisch Inhalte in das Dokumentfenster geschrieben. Der Internet Explorer schreibt den angegebenen Text in das Dokumentfenster, schaltet dabei jedoch auf eine spezielle Unicode-Schriftart zur Darstellung um.
Beachten Sie, dass zum Schreiben des neuen Inhalts die Methoden nach unten open() und nach unten close() verwendet werden.

Beachten Sie:

Der Internet Explorer akzeptiert die geänderte Kodierung oft erst nach dem Reload der Seite und einer erneuten Ausführung der Änderung.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen/Ändern cookie

Cookies (cookies = Kekse - die Herkunft des Namens ist unbekannt) bieten Ihnen die Möglichkeit, direkt aus einer HTML-Datei heraus Daten auf dem Rechner des Anwenders zu speichern und beim erneuten Aufruf der gleichen HTML-Datei wieder auszulesen. So kann eine WWW-Seite dynamisch auf gespeicherte Daten reagieren. Es ist nur möglich, diejenigen Cookies auszulesen, die man selbst gesetzt hat. Eine Virenübertragung mit Cookies ist ausgeschlossen. Ein Cookie ist in etwa das gleiche wie ein Eintrag in einer INI-Datei unter Microsoft Windows. Es wird eine Variable mit einem zugewiesenen Wert abgespeichert, zum Beispiel Datum und Uhrzeit des letzten Besuchs der Web-Seite. Es können keine Rechnerdaten des Anwenders ausgelesen werden. Angesichts des vorherrschenden Misstrauens bei Anwendern, die nicht wissen, was ein Cookie ist, sollten Sie Cookies nur verwenden, wenn Sie einen Grund dazu haben.

Netscape verwaltet Cookies in einer Datei namens cookies.txt auf dem Rechner des Anwenders. Der Internet Explorer verwaltet die Cookies in einem Unterverzeichnis des Windows-Verzeichnisses.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var gespeichert = "nichts gespeichert";
if (document.cookie) {
  gespeichert = document.cookie;
} else {
  document.cookie = "Zeitstempel=" + document.lastModified;
}
alert(document.lastModified + " - " + gespeichert);
</script>
</head><body>
</body></html>

Erläuterung:

Das Lesen eines Cookies funktioniert nach dem Schema x = document.cookie.
Das Schreiben eines Cookies funktioniert nach dem Schema document.cookie = x.

Das Beispiel fragt beim Einlesen der Datei ab, ob diese Datei schon einmal einen Cookie gesetzt hat. Eine solche Abfrage ist mit if(document.cookie) möglich. Im Beispiel wird die Variable gespeichert mit dem Wert des gespeicherten Cookies versorgt, falls ein Cookie vorhanden ist. Im else-Zweig des Beispiels steht der Fall, dass noch kein Cookie gesetzt wurde. In diesem Fall wird als Cookie die Zeichenkette Zeitstempel und dahinter der Wert von nach unten lastModified geschrieben. Am Ende werden mit Seite alert() zwei Werte ausgegeben: nämlich der Wert von document.lastModified und der Wert der Variablen gespeichert. Wenn ein Cookie gesetzt ist (also ab dem zweiten Aufruf der Datei), wird der Inhalt des Cookies ausgegeben, der sich von document.lastModified dann unterscheidet, wenn die Datei mittlerweile geändert wurde.

Beim Setzen eines Cookies können Sie außerdem einen Verfallszeitpunkt angeben. Wenn der Verfallszeitpunkt erreicht ist, löscht der Browser den Cookie selbständig. Notieren Sie dazu eine Anweisung der Form:
document.cookie = "expires=" + Verfallsdatum.
Damit der Browser diese Eigenschaft interpretiert, muss das Verfallsdatum mit der Methode Seite toGMTString() des Date-Objektes formatiert werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var ablauf = new Date();
var infuenfTagen = ablauf.getTime() + (5 * 24 * 60 * 60 * 1000);
ablauf.setTime(infuenfTagen);
document.cookie = "Name=SELFHTML; expires=" + ablauf.toGMTString();
alert(document.cookie);
</script>
</head><body>
</body></html>

Erläuterung:

In der Variablen ablauf wird eine neue Instanz des Seite Date-Objekt angelegt. Diese enthält das aktuelle Datum. Das Verfallsdatum ist 5 Tage nach dem Setzen des Cookies. Zur Bestimmung des Verfallsdatums wird das aktuelle Datum mit der Methode Seite getTime() in Millisekunden umgewandelt. Zu diesem Wert wird die Anzahl der Millisekunden für 5 Tage addiert. Um den Millisekundenwert zu ermitteln, können Sie wie im Beispiel eine Multiplikationskette übergeben: 1000 Millisekunden sind eine Sekunde, mal 60 macht eine Minute, mal 60 macht eine Stunde, mal 24 ein Tag, und mal 5 macht fünf Tage.
Um eine gültige Datumszeichenkette zu erhalten, wird mit der Methode Seite setTime() dem Datum ein neuer Wert zugewiesen. In der Variablen ablauf ist dann das korrekte Ablaufdatum gespeichert.
Dem Cookie wird schließlich das mit der Methode Seite toGMTString() formatierte Datum übergeben.

Beachten Sie:

Jede HTML-Datei hat Kenntnis von allen Cookies, die von Dateien aus dem gleichen oder einem höheren Verzeichnis gesetzt wurden. Angenommen, bei einer Domain http://www.test.de mit dem Unterverzeichnis /A gibt es in diesem Unterverzeichnis sowie im Wurzelverzeichnis / jeweils eine Datei namens x.htm. Beide Dateien enthalten jeweils ein JavaScript mit der Anweisung:
document.cookie = location.href;
Damit wird der URI der Datei in einem Cookie gespeichert. Ferner gibt es in beiden Verzeichnissen eine Datei y.htm, die jeweils folgende JavaScript-Anweisung enthält:
document.write(document.cookie);
Damit wird ein vorhandener Cookie dynamisch ins Dokumentfenster geschrieben. Bei der angenommenen Anordnung liefern folgende Dateien folgende Ausgaben:
http://www.test.de/y.htm liefert:
http://www.test.de/x.htm (kann also den Cookie lesen, den x.htm im gleichen Verzeichnis gesetzt hat)
http://www.test.de/A/y.htm liefert:
http://www.test.de/A/x.htm; http://www.test.de/x.htm (kann also den Cookie lesen, den x.htm im gleichen Verzeichnis gesetzt hat, sowie den Cookie, den die x.htm im Verzeichnis oberhalb gesetzt hat)

Mittels der Eigenschaft Seite navigator.cookieEnabled können Sie abfragen, ob der Anwender Cookies aktiviert hat.

Opera bis Version 6 erlaubt kein Setzen von Cookies im Protokoll file://, also beim Aufrufen von HTML-Dateien mit JavaScript direkt von der Festplatte. Dies gilt ebenfalls für den Webbrowser Safari.

MS JScript MS IE 4.0 Lesen/Ändern defaultCharset

Speichert die Kodierung, die der Anwender als Standard im Browser eingestellt hat. Wenn die HTML-Datei keine Seite Meta-Angabe zur verwendeten Kodierung enthält, benutzt der Browser diese Kodierung.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
alert("Sie haben als Zeichenkodierung eingestellt: " + document.defaultCharset);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt beim Einlesen der Datei mit Seite alert() aus, welche Kodierung der Anwender als Standard eingestellt hat.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern fgColor

Speichert die Farbe für Text, wie beim Attribut text im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar (siehe auch Seite Farben für Hintergrund, Text und Verweise).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function FarbeAendern () {
  document.fgColor = "#FF0000";
}
</script>
</head><body>
<p>Ein kleiner Text</p>
<p><a href="javascript:FarbeAendern()">Textfarbe &auml;ndern</a></p>
</body></html>

Erläuterung:

Im Beispiel wird eine Funktion namens FarbeAendern() definiert und ein Verweis, der beim Aktivieren diese Funktion ausführt. Die Funktion ändert die Textfarbe auf rot (#FF0000).

Die Farbangabe wird entweder hexadezimal notiert oder in Form erlaubter Farbnamen (siehe auch Seite Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen.

Beachten Sie:

Farbänderungen für die Textfarbe können je nach Browser erst dann möglich sein, nachdem die HTML-Seite komplett eingelesen wurde. Deshalb wurde das Beispiel so konzipiert, dass die Farbänderung erst nach dem Laden durchgeführt wird.

Diese klassische, im herkömmlichen JavaScript gültige Implementierung von fgColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt Seite body eine Eigenschaft namens text in Entsprechung zum Attribut Seite text.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.4 Safari 1.3 Lesen lastModified

Speichert Datum und Uhrzeit der letzten Änderung der Datei.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write("letzter Update: " + document.lastModified);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt mit der Methode nach unten write() den Zeitpunkt der letzten Änderung dynamisch in die HTML-Datei.

Beachten Sie:

Die Formatierung der Zeichenkette ist stark abhängig vom Browser und dem verwendeten Betriebssystem. So kann bei der Weiterverarbeitung dieser Eigenschaft mit dem Seite Date-Objekt eine zweistellige Jahreszahl übergeben und dadurch ein falscher Wochentag und ein falsches Jahr zurückgegeben werden.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern linkColor

Speichert die Farbe für unbesuchte Verweise, wie beim Attribut link im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar (siehe auch Seite Farben für Hintergrund, Text und Verweise).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function FarbeAendern () {
  document.linkColor = "#FF0000";
}
</script>
</head><body>
<p><a href="http://news.bbc.co.uk/">Verweis</a></p>
<p><a href="javascript:FarbeAendern()">Verweisfarbe &auml;ndern</a></p>
</body></html>

Erläuterung:

Im Beispiel werden zwei Verweise notiert. Der erste verweist auf eine Seite, von der angenommen wird, dass sie der Browsre nicht als besucht ansieht. Der zweite Verweise führt beim Aktivieren eine Funktion namens FarbeAendern(), die im Seitenkopf definiert ist. Diese Funktion ändert die Farbe für unbesuchte Links auf rot (#FF0000).

Die Farbangabe wird entweder hexadezimal notiert oder in Form erlaubter Farbnamen (siehe auch Seite Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen.

Beachten Sie:

Konqueror 3.1 ermöglicht das Auslesen der Eigenschaft linkColor, wenn ein Seite link-Attribut beim Element body vorhanden ist. Das Setzen ist zwar möglich, die Farbe der Verweise im Dokument ändert sich darauf jedoch erst in Konqueror 3.3.

Diese klassische, im herkömmlichen JavaScript gültige Implementierung von linkColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt Seite body eine Eigenschaft namens link in Entsprechung zum Attribut link.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 6 Mozilla Firefox 1 Safari 1.0 Lesen referrer

Speichert den URI, von dem aus die aktuelle Datei aufgerufen wurde. Voraussetzung ist, dass er die aktuellen Datei über einen Verweis aufgerufen hat. Wenn er die Adresse der Datei stattdessen etwa als Lesezeichen ausgewählt oder direkt in die Adresszeile des Browsers eingegeben hat, ist in document.referrer nichts gespeichert. Beim Internet Explorer und in Netscape 6 wird in document.referrer nur dann etwas gespeichert, wenn der Aufruf der aktuellen Datei über das HTTP-Protokoll erfolgte, also mit einem Verweis vom Typ http://.... Einige Browser ermöglichen es dem Anwender zudem, den Zugriff auf diese Eigenschaft zu unterbinden. Sie können sich daher nicht darauf verlassen, dass document.referrer gefüllt ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write("<h1>Lieber Besucher<\/h1>");
document.write("Du hast also von " + document.referrer + " hierher gefunden");
</script>
</body></html>

Erläuterung:

Das Beispiel gibt im HTML-Text mit der Methode nach unten write() aus, von woher der Anwender die aktuelle Datei aufgerufen hat.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern title

Speichert den Titel einer HTML-Datei, wie er bei <title>...</title> vergeben wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<h1>
<script type="text/javascript">
document.write(document.title);
</script>
</h1>
</body></html>

Erläuterung:

Das Beispiel schreibt mit der Methode nach unten write() den Titel der HTML-Datei dynamisch als Inhalt in eine Überschrift 1. Ordnung (<h1>...</h1>).

Beachten Sie:

In Netscape JavaScript ist die Eigenschaft document.title als nur lesbar definiert, gemäß dem HTML-spezifischen DOM und Microsofts JScript allerdings können Sie diese Eigenschaft auch ändern. Unter anderem der Internet Explorer, Opera, Firefox, Safari und Konqueror unterstützen dies.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen URL

Speichert den vollständigen URI des aktuellen Dokuments.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
window.alert("Diese Datei: " + document.URL);
</script>
</body></html>

Erläuterung:

Das Beispiel gibt mit Seite alert() die vollständige Adresse des gegenwärtigen HTML-Dokuments aus.

Beachten Sie:

Vermeiden Sie es, die Adresse des Dokuments mit der Methode nach unten write() direkt und ungefiltert auszugeben. Ein Angreifer kann die Adresse so manipulieren, dass auf diese Weise fremder HTML- und JavaScript-Code in die Seite eingeschleust wird. Gelingt es dem Angreifer, dass jemand Ihre Site über die manipulierte Adresse besucht, stellt dies möglicherweise ein Sicherheitsrisiko dar. Diese Angriffsmethode wird Cross Site Scripting genannt. Viele dynamische Webseiten, zum Beispiel Online-Banking, E-Mail-Dienste, Online-Shops sowie Foren und Communities, arbeiten mit Cookie-basierter Authentifizierung. Gelingt es dem Angreifer, fremden JavaScript-Code einzuschleusen, kann er eine solche Sitzung übernehmen und missbrauchen (sogenanntes Session Hijacking).

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern vlinkColor

Speichert die Farbe für Verweise zu bereits besuchten Seiten, wie beim Attribut vlink im <body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar (siehe auch Seite Farben für Hintergrund, Text und Verweise).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function FarbeAendern () {
  document.vlinkColor = "#A0A0A0";
}
</script>
</head><body>
<p><a href="../document.htm">besuchter Verweis</a></p>
<p><a href="javascript:FarbeAendern()">Farbe ändern</a></p>
</body></html>

Erläuterung:

Im Beispiel wird ein Verweis zu einer bereits besuchten Seite notiert. Der Kopf der Datei enthält eine JavaScript-Funktion FarbeAendern(), welche durch das Aktivieren eines weiteren Verweises im Dateikörper aufgerufen wird. Die Funktion ändert die Farbe für besuchte Links zu einem Grauton (#A0A0A0).

Die Farbangabe wird entweder hexadezimal notiert oder in Form erlaubter Farbnamen (siehe auch Seite Farben definieren in HTML). Der Wert muss in jedem Fall in Anführungszeichen stehen.

Beachten Sie:

Konqueror 3.1 ermöglicht das Auslesen der Eigenschaft vlinkColor, wenn ein Seite vlink-Attribut beim Element body vorhanden ist. Das Setzen ist zwar möglich, die Farbe der besuchten Verweise im Dokument ändert sich darauf jedoch erst in Konqueror 3.3.

Diese klassische, im herkömmlichen JavaScript gültige Implementierung von vlinkColor als direkte Eigenschaft des document-Objekts wird vom HTML-spezifischen DOM missbilligt. Laut DOM besitzt das HTML-Elementobjekt Seite body eine Eigenschaft namens vLink in Entsprechung zum Attribut vlink.

JavaScript 1.2 Netscape 4.0 captureEvents()

Überwacht Anwenderereignisse im aktuellen Dokument. Funktioniert genau so wie Seite captureEvents() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass Sie mit document.captureEvents() nur Ereignisse innerhalb des Dokumentfensters überwachen können, jedoch keine Ereignisse im gesamten Fensterbereich (zu dem beispielsweise auch Titelleiste, Menüleisten usw. gehören).

Beachten Sie:

Netscape 6 interpretiert diese Methode nicht mehr.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 close()

Schließt einen Dokumentinhalt, der mit der nach unten open()-Methode geöffnet und mit den Methoden nach unten write() oder nach unten writeln() beschrieben wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.open();
document.write(document.URL);
document.close();
</script>
</body></html>

Erläuterung:

Das Beispiel öffnet den Dokumentinhalt zum Schreiben, dann schreibt es etwas (den aktuellen URI) mit der Methode nach unten write(), und zuletzt schließt es den Vorgang mit document.close() ab.
Mit dem Schließen des Dokumentes wird dem Browser signalisiert, dass der Aufbau der Seite abgeschlossen ist. Dies ist besonders beim dynamischen Schreiben von Kapitel Frames und zum Beschreiben von Kapitel Layern erforderlich.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 6.0 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 createAttribute()

Erzeugt ein neues Attribut für den Elementenbaum. Lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<h1>Eine sehr dynamische Seite</h1>
<script type="text/javascript">
var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "right";
var Element = document.getElementsByTagName("h1")[0];
Element.setAttributeNode(Ausrichtung);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Überschrift erster Ordnung ohne weitere Attribute. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.createAttribute("align") ein neues Attribut mit Namen align erzeugt, das in diversen HTML-Elementen zum Ausrichten des Inhalts verwendet werden kann. Das Attribut hat damit aber noch keine Wirkung - es hängt weder im Elementenbaum des Dokuments, noch hat es einen Wert. Das Attribut ist lediglich als Objekt erzeugt.
Die Methode createAttribute() gibt das erzeugte Objekt, also in dem Fall das align-Attribut, zurück. Der Rückgabewert wird in der Variablen Ausrichtung gespeichert. Über diese Variable ist das neu erzeugte Attribut von da ab ansprechbar.

Damit das Attribut einen Inhalt erhält, wird der dem Attributknoten über die Objekteigenschaft Seite nodeValue der gewünschte Wert right zugewiesen. Anschließend müssen das Attribut und sein Wert noch in den vorhandenen Elementenbaum eingehängt werden. Dies geschieht in der Anweisung Element.setAttributeNode(Ausrichtung); (siehe auch Seite setAttributeNode()). Dabei wurde zuvor in der Variablen Element das h1-Element gespeichert, auf das mit nach unten getElementsByTagName() zugegriffen wurde. Somit wird die Überschrift dynamisch rechtsbündig ausgerichtet.

Beachten Sie:

Mit dem Internet Explorer 5.5 war dieses Beispiel nicht nachvollziehbar, wenngleich Microsoft behauptet, diese Methode in den Internet Explorer implementiert zu haben. Im Internet Explorer 6 ist das Beispiel dagegen nachvollziehbar.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 createElement()

Erzeugt ein neues Element für den Elementenbaum. lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<div id="Bereich" style="border:1px black solid; padding:10px">
</div>
<script type="text/javascript">
var myH1 = document.createElement("h1");
var myText = document.createTextNode("Eine sehr dynamische Seite");
myH1.appendChild(myText);
var Ausgabebereich = document.getElementById("Bereich");
Ausgabebereich.appendChild(myH1);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält einen div-Bereich, der zunächst leer ist. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.createElement("h1") ein neues Element vom Typ h1 erzeugt, also eine HTML-Überschrift erster Ordnung. Die Überschrift wird damit aber noch nicht angezeigt - sie hängt noch nicht einmal im Elementenbaum des Dokuments. Das Element ist lediglich als Objekt erzeugt.
Die Methode createElement() gibt das erzeugte Objekt, also in dem Fall das h1-Element, zurück. Der Rückgabewert wird in der Variablen myH1 gespeichert. Über diese Variable ist das neu erzeugte Element von da ab ansprechbar.

Damit die Überschrift einen Inhalt erhält, wird mit nach unten createTextNode() ein Textknoten erzeugt. Mit Seite appendChild() wird dann der Textknoten als Kindelement der Überschrift erster Ordnung definiert. Anschließend muss noch die ganze Überschrift in den vorhandenen Elementenbaum eingehängt werden. Dies geschieht in der Anweisung Ausgabebereich.appendChild(myH1);. Dabei wurde zuvor in der Variablen Ausgabebereich das leere div-Element gespeichert, auf das mit nach unten getElementById() zugegriffen wurde. Somit wird die Überschrift mit ihrem Text als Kindelement dynamisch in den div-Bereich eingefügt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 createTextNode()

Erzeugt einen neuen Textknoten für den Elementenbaum. lässt sich auf HTML-, aber auch auf XML-Dokumente anwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p id="Absatz"></p>
<script type="text/javascript">
var Zeitstempeltext = document.createTextNode(document.lastModified);
var TextZuvor = document.createTextNode("Datum des letzten Updates: ");
document.getElementById("Absatz").appendChild(TextZuvor);
document.getElementById("Absatz").appendChild(Zeitstempeltext);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält einen p-Absatz, der zunächst leer ist. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.createTextNode() zwei neue Zeichenketten erzeugt, einmal der gespeicherte Wert von nach oben lastModified, und einmal ein statischer Text. Die Texte werden damit aber noch nicht angezeigt - sie sind auch noch nicht in den Elementenbaum des Dokuments eingehängt. Die Textknoten sind lediglich als Objekt erzeugt.
Die Methode createTextNode() gibt das erzeugte Objekt zurück. Der Rückgabewert wird in den beiden Beispielaufrufen in den Variablen Zeitstempeltext und TextZuvor gespeichert. Über diese Variablen sind die neu erzeugten Textknoten von da ab ansprechbar.

Mit Seite appendChild() werden dann die Textknoten als Kindelemente des über dem JavaScript notierten Textabsatzes definiert. Dazu wird mit nach unten getElementById() auf das p-Element zugegriffen. Der leere Absatz erhält somit dynamisch einen Inhalt.

Beachten Sie:

Konqueror vor Version 3.4 und Safari vor 1.3 interpretieren createTextNode() bereits. Das oben angeführte Beispiel zeigt dies jedoch nicht, da diese älteren Browserversionen nach oben lastModified noch nicht interpretieren.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getElementById()

Greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein id-Attribut besitzt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.normal { font-style:normal }
</style>
<script type="text/javascript">
function Ausrichten (wie) {
  document.getElementById("unentschlossen").align = wie;
}
</script>
</head><body>
<h1 id="unentschlossen">Wo gehöre ich eigentlich hin?</h1>
<a href="javascript:Ausrichten('left')">links?</a><br>
<a href="javascript:Ausrichten('center')">zentriert?</a><br>
<a href="javascript:Ausrichten('right')">rechts?</a><br>
</body></html>

Erläuterung:

Das Beispiel enthält eine Überschrift erster Ordnung mit dem Attribut id="unentschlossen". Unterhalb davon sind drei Verweise notiert. Jeder der Verweise ruft die Funktion Ausrichten() auf, die im Dateikopf notiert ist, und übergibt ihr jeweils einen anderen Wert. Innerhalb der Funktion Ausrichten() wird mit document.getElementById("unentschlossen") auf die Überschrift erster Ordnung zugegriffen. Die Funktion weist der Eigenschaft align den jeweils übergebenen Wert zu. Dadurch wird die Ausrichtung der Überschrift dynamisch geändert.

Beachten Sie:

Die Methode getElementById() regelt lediglich den Zugriff auf HTML-Elemente. Um zu wissen, was Sie mit welchen HTML-Elementen überhaupt tun können, können Sie sich im Abschnitt über die Seite HTML-Elementobjekte einen Überblick verschaffen. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das Seite node-Objekt an.

Sie können an diese Methode auch Variablen übergeben. Dazu notieren Sie einfach den Variablennamen ohne Anführungszeichen anstatt eines festen Wertes z.B. getElementById(Variablenname). Voraussetzung ist jedoch, dass die Variable auch existiert.

Opera 5 und 6 kennen die Methode getElementById() zum Ansprechen von Elementen ebenfalls. Das obige Beispiel funktioniert jedoch in diesen Browsern nicht.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getElementsByName()

Greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein name-Attribut besitzt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.normal { font-style:normal }
</style>
<script type="text/javascript">
function Ankreuzen () {
  document.getElementsByName("Zutat")[0].checked = true;
}
</script>
</head><body>
<form name="Formular" action="">
<input type="checkbox" name="Zutat" value="Salami"> Salami <br>
<input type="checkbox" name="Zutat" value="Pilze"> Pilze <br>
<input type="checkbox" name="Zutat" value="Oliven"> Oliven <br>
<input type="button" value="Test" onclick="Ankreuzen()">
</form>
</body></html>

Erläuterung:

Im Beispiel wird eine Gruppe von Checkboxen definiert, die alle den gleichen Namen, nämlich Zutat, haben. Darunter ist ein Klick-Button notiert, bei dessen Anklicken die Funktion Ankreuzen() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion kreuzt die erste der drei Checkboxen an. Durch getElementsByName("Zutat")[0] greift sie auf das erste Element mit name="Zutat" zu. Auch wenn ein solcher Elementname nur einmal im Dokument vorkommt, muss stets mit Array-Syntax auf die Elemente zugegriffen werden. So wäre im Beispiel das Formularelement etwa über getElementsByName("Formular")[0] ansprechbar. Die zweite Checkbox mit dem Namen "Zutat" wäre über getElementsByName("Zutat")[1] ansprechbar usw.

Beachten Sie:

Die Methode getElementsByName() regelt lediglich den Zugriff auf HTML-Elemente. Um zu wissen, was Sie mit welchen HTML-Elementen überhaupt tun können, können Sie sich im Abschnitt über die Seite HTML-Elementobjekte einen Überblick verschaffen. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das Seite node-Objekt an.

Sie können an diese Methode auch Variablen übergeben. Dazu notieren Sie einfach den Variablennamen ohne Anführungszeichen anstatt eines festen Wertes z.B. getElementsByName(Variablenname). Voraussetzung ist jedoch, dass die Variable auch existiert.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getElementsByTagName()

Greift entsprechend dem DOM auf ein beliebiges Element im Elementenbaum des Dokuments zu. Maßgeblich ist dabei der Elementname, in HTML also beispielsweise Namen wie h1, blockquote oder img. Für jeden HTML-Elementtyp wird im Dokument ein Array erzeugt, über den die einzelnen Elemente dann ansprechbar sind.

Wenn Sie anstatt den Namen eines HTML Elementes ein Sternchen "*" als Parameter übergeben, können alle HTML Elemente eines Dokumentes angesprochen werden.

Diese Methode ist nicht Bestandteil des HTML-spezifischen DOM, sondern des allgemeinen Kern-DOM für beliebige XML- bzw. SGML-basierte Dokumente. Nicht alle Eigenschaften und Methoden des document-Objekts des Kern-DOM werden hier beschrieben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.normal { font-style:normal }
</style>
<script type="text/javascript">
function neueTexte () {
  document.getElementsByTagName("p")[0].firstChild.data = "neuer erster";
  document.getElementsByTagName("p")[1].firstChild.data = "neuer zweiter";
  document.getElementsByTagName("p")[2].firstChild.data = "neuer dritter";
  document.getElementsByTagName("h1")[0].firstChild.data = "Alles anders";
}
</script>
</head><body>
<h1>Dynamisch, sehr dynamisch</h1>
<p>Ein erster Absatz</p>
<p>Ein zweiter Absatz</p>
<p>Ein dritter Absatz</p>

<p><a href="javascript:neueTexte()">neue Texte</a></p>
</body></html>

Erläuterung:

Im Beispiel werden eine Überschrift erster Ordnung und drei Textabsätze notiert. Keines dieser Elemente enthält irgendein Attribut, über das es individuell angesprochen werden könnte. Unterhalb davon ist ein Verweis notiert, bei dessen Anklicken die Funktion neueTexte() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion ändert dynamisch die Texte aller drei Textabsätze und der Überschrift.
Über document.getElementsByTagName("p")[0] greift sie auf den ersten Textabsatz des Dokuments zu, über document.getElementsByTagName("p")[1] auf den zweiten, über document.getElementsByTagName("h1")[0] auf die erste Überschrift erster Ordnung usw.

Beachten Sie:

Die Methode getElementsByTagName() regelt lediglich den Zugriff auf Elemente. Um zu wissen, was Sie mit welchen HTML-Elementen überhaupt tun können, können Sie sich im Abschnitt über die Seite HTML-Elementobjekte einen Überblick verschaffen. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das Seite node-Objekt an. Die Eigenschaft firstChild.data, die im obigen Beispiel verwendet wird, um den im Element enthaltenen Text dynamisch zu ändern, gehört ebenfalls zum Komplex des node-Objekts.

Opera Version 5.12 kennt die Methode getElementsByTagName() zum Ansprechen von Elementen. Das obige Beispiel funktioniert aufgrund von firstChild jedoch erst ab Version 7.

JavaScript 1.2 Netscape 4.0 MS IE 5.0 Opera 8 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 getSelection()

Ermittelt Text, der vom Anwender im Dokument selektiert wurde. Im Netscape 4 war diese diese Methode an das document-Objekt gebunden. Seit Netscape 6 ist sie dem Seite window-Objekt zugeordnet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function selektierterText () {
  if (window.getSelection) {
    alert(window.getSelection());
  } else if (document.getSelection) {
    alert(document.getSelection());
  } else if (document.selection) {
    alert(document.selection.createRange().text);
  }
}
</script>
</head><body>
viel Text zum Selektieren viel Text zum Selektieren
<form>
<input type="button" value="zeigen" onmousedown="selektierterText();">
</form>
</body></html>

Erläuterung:

Das Beispiel ruft beim Klick auf den definierten Button die Funktion selektierterText() auf. Innerhalb dieser Funktion wird geprüft, ob der Browser die window-Methode window.getSelection() kennt. Tritt dieser Fall ein, so wird sie aufgerufen und der selektierte Text wird ausgegeben. Kennt der Browser diese Methode nicht, so wird geprüft, ob er die Methode document.getSelection() kennt und gegebenenfalls der selektierte Text ausgegeben.
Der zweite else-if-Zweig des Beispiels behandelt einen Sonderfall für den Internet Explorer. Dieser kennt die Methode getSelection() nicht, jedoch ein selection-Objekt. Mit document.selection.createRange().text erhalten Sie hier den selektierten Text. Voraussetzung ist, dass zuvor Text selektiert wurde. Ansonsten liefert die Funktion selektierterText() eine leere Zeichenkette ("") als Ergebnis.

Beachten Sie:

Konqueror 3.1 interpretiert diese Methode noch nicht.

JavaScript 1.2 Netscape 4.0 handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie Seite handleEvent() im Zusammenhang mit dem window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass document.handleEvent() nur Ereignisse übergeben kann, die mit nach oben document.captureEvents() überwacht werden.

Beachten Sie:

Netscape 6 interpretiert diese Methode nicht mehr.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 open()

Öffnet ein Dokument zum Schreiben. Dabei wird kein Fenster geöffnet, sondern der Fensterinhalt zum Neubeschreiben freigegeben. Falls das Dokument vorher einen Inhalt hatte, zum Beispiel eine zunächst geladene HTML-Datei, sollten Sie zuerst die nach oben close()-Methode aufrufen.

Gemäß dem HTML-spezifischen DOM erwartet open() keine Parameter. Gemäß den JavaScript-Spezifikationen von Netscape hingegen erwartet die Methode zwei optionale Parameter. Sie kann demnach ohne, mit einem oder mit zwei Parametern aufgerufen werden. Folgende Parameter werden definiert:
1. MIME-Typ = Eine Bezeichnung des MIME-Typs für die Art der Daten, die in das Dokumentfenster geschrieben werden sollen. So können Sie das Dokumentfenster beispielsweise durch Angabe von "x-world/x-vrml" zum Schreiben von VRML-Code öffnen. Mit den nach unten write()- und nach unten writeln()-Methoden können Sie dann dynamisch VRML-Code schreiben.
2. replace = mit document.open("text/html", "replace") öffnen Sie das Dokument zum Schreiben von HTML und bewirken, dass der neue Dokumentinhalt die gleiche Stelle in der History der besuchten Seiten einnimmt wie das Dokument, in dem der open()-Methodenaufruf steht.
Die meisten aktuellen Browser folgen jedoch der Definition des HTML-spezifischen DOM und ignorieren die Parameter. Lediglich Netscape 4.x (neuere Versionen nicht) und der Internet Explorer beachten sie.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
function Wechsel () {
  document.open();
  document.write('<a href="datei.htm">Und jetzt steh ich hier</a>');
  document.close();
}

document.open();
document.write('<a href="javascript:Wechsel()">Noch steh ich hier</a>');
document.close();
</script>
</body></html>

Erläuterung:

Das Beispiel-Script führt zunächst den unteren Teil des Codes aus, da der obere in die Funktion Wechsel() eingebunden ist, die erst bei Aufruf ausgeführt wird. Im unteren Teil wird mit JavaScript dynamisch ein Verweis in das Dokumentfenster geschrieben. Wenn der Anwender den Verweis anklickt, wird die Funktion Wechsel() aufgerufen. Diese Funktion öffnet das Dokumentfenster zum neuen Schreiben und schreibt dynamisch einen Verweis auf die aktuelle Datei (im Beispiel wird angenommen, dass diese Datei datei.htm heißt). Klickt der Anwender auf den Verweis, wird die Datei erneut geladen, und dadurch wird wieder der erste Verweis geschrieben.
Beachten Sie, dass das Beispiel erst ab Netscape 3.x so funktioniert wie beschrieben. Netscape 2.x kennt die document.open() zwar auch schon, doch leert dabei das Dokumentfenster nicht.

Beachten Sie:

Opera 5.12 kennt laut Dokumentation die Methode open() und wendet sie in vielen Fällen richtig an. Das vorliegende Beispiel wird jedoch vom Browser nicht abgeschlossen und nur ohne Verwendung von document.open() richtig ausgeführt. Als Alternative können Sie die Funktion mit <a href="#" onclick="Wechsel(); return false"> aufrufen.

JavaScript 1.2 Netscape 4.0 releaseEvents()

Beendet die Überwachung von Anwenderereignissen. Funktioniert genau so wie Seite releaseEvents() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass document.releaseEvent() nur Ereignisüberwachungen beenden kann, die mit nach oben document.captureEvents() gestartet wurden.

Beachten Sie:

Netscape 6 interpretiert diese Methode nicht mehr.

JavaScript 1.2 Netscape 4.0 routeEvent()

Übergibt ein Anwenderereignis an das document-Objekt. Von dort aus wird das Ereignis immer weiter nach unten durchgereicht, bis sich ein Event-Handler findet, der das Ereignis verarbeitet. Funktioniert genau so wie Seite routeEvent() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass document.routeEvent() nicht auf Fensterebene ansetzt, sondern auf Dokumentebene.

Beachten Sie:

Netscape 6 interpretiert diese Methode nicht mehr.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 write()

Gibt Text im Dokument aus. Erwartet eine Zeichenkette oder einen JavaScript-Ausdruck als Parameter.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
DeinName = prompt("Bitte Deinen Namen angeben:", "Name");
document.write("<b>Hallo " + DeinName + "<\/b>");
</script>
</body></html>

Erläuterung:

Das Beispiel zeigt beim Einlesen der Datei mit Seite prompt() ein Dialogfenster an, in dem der Anwender seinen Namen eingeben soll. Der eingegebene Wert wird in der Variablen DeinName gespeichert. Anschließend wird mit document.write() das Wort "Hallo" mit einem Leerzeichen dahinter geschrieben. An die Zeichenkette angehängt wird die Variable DeinName. Dadurch steht hinterher beispielsweise "Hallo Susi" im Text, wenn in dem Dialogfenster "Susi" als Name angegeben wurde. Damit die Ausgabe in Fettschrift erfolgt, wird sie in das entsprechende HTML-Element gesetzt.

Es ist auch erlaubt, mehrere Zeichenketten oder Ausdrücke durch Kommata getrennt innerhalb von document.write() zu verwenden, zum Beispiel:
document.write("Sie benutzen ", document.layers ? "Netscape ab V4" : "nicht Netscape ab V4");
Dieses Beispiel enthält zunächst eine Zeichenkette und dann, durch ein Komma getrennt, einen komplexen Ausdruck, in dem ermittelt wird, ob der Anwender einen Browser benutzt, der das layers-Objekt kennt.

Beachten Sie:

Der Schrägstrich / in schließenden HTML-Tags muss bei der Ausgabe mit dem Zeichen \ maskiert werden. Das gilt besonders dann, wenn Sie dynamisch weiteren JavaScript-Code in der Form document.write("<script>...</script>") schreiben möchten. Maskiert <script>...<\/script> geschrieben, wird der dynamisch geschriebene Script-Bereich als eigenständiger Block interpretiert, und das aktuelle Script wird unabhängig davon weiter ausgeführt.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 writeln()

Wie nach oben write() - fügt jedoch am Ende automatisch ein Zeilenumbruch-Zeichen ein. Dadurch ist diese Methode vor allem zum Schreiben von Inhalten interessant, bei denen Zeilenumbrüche wichtig sind.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write("<pre>kein Umbruch ");
document.writeln("erste Zeile");
document.writeln("zweite Zeile <\/pre>");
document.writeln("dritte Zeile");
document.writeln("vierte Zeile");
</script>
</body></html>

Erläuterung:

In der ersten Zeile wird mit nach oben document.write() ein Seite präformatierter Text eingeleitet. Dieser dient im Beispiel dazu, die Zeilenumbrüche sichtbar zu machen. Die Methode document.write() erzeugt keinen Zeilenumbruch. Der Inhalt der nachfolgenden Zeile ("erste Zeile") wird deshalb in der gleichen Zeile ausgegeben. Da diese Zeichenkette jedoch mit document.writeln() ausgegeben wird, entsteht im Quelltext am Ende ein Zeilenumbruch. Die nächste Zeile ("zweite Zeile") wird deshalb in einer neuen Zeile ausgegeben. Zugleich wird im Beispiel in dieser Zeile der präformatierte Abschnitt beendet. Die dritte und die vierte Zeile werden ebenfalls mit document.writeln() geschrieben. Intern entstehen Zeilenumbrüche im Quelltext. Bei der Ausgabe im Browser sind diese jedoch nur als Leerzeichen sichtbar, getreu der HTML-Regel, dass Zeilenumbrüche in Leerzeichen umgewandelt werden.

nach oben
weiter | Seite HTML-Elementobjekte
zurück | Seite frames
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / HTML-Elementobjekte

SELFHTML

HTML-Elementobjekte
Informationsseite

nach unten HTML-Elementobjekte: Allgemeines zur Verwendung
nach unten Universaleigenschaften (Wert von Universalattributen)

Elementobjekte

nach unten a
nach unten abbr
nach unten acronym
nach unten address
nach unten applet
nach unten area
nach unten b
nach unten base 		nach unten basefont
nach unten bdo
nach unten big
nach unten blockquote
nach unten body
nach unten br
nach unten button
nach unten caption 		nach unten center
nach unten cite
nach unten code
nach unten col
nach unten colgroup
nach unten dd
nach unten del
nach unten dfn 		nach unten dir
nach unten div
nach unten dl
nach unten dt
nach unten em
nach unten fieldset
nach unten font
nach unten form 		nach unten frame
nach unten frameset
nach unten h1-h6
nach unten head
nach unten hr
nach unten html
nach unten i
nach unten iframe 		nach unten img
nach unten input
nach unten ins
nach unten isindex
nach unten kbd
nach unten label
nach unten legend
nach unten li 		nach unten link
nach unten map
nach unten menu
nach unten meta
nach unten noframes
nach unten noscript
nach unten object
nach unten ol 		nach unten optgroup
nach unten option
nach unten p
nach unten param
nach unten pre
nach unten q
nach unten s
nach unten samp 		nach unten script
nach unten select
nach unten small
nach unten span
nach unten strike
nach unten strong
nach unten style
nach unten sub 		nach unten sup
nach unten table
nach unten tbody
nach unten td
nach unten textarea
nach unten tfoot
nach unten th
nach unten thead 		nach unten title
nach unten tr
nach unten tt
nach unten u
nach unten ul
nach unten var
nach unten

HTML-Elementobjekte: Allgemeines zur Verwendung

Der HTML-Variante des Document Object Models (DOM) zufolge stellt jedes HTML-Element in einer HTML-Datei ein Objekt dar. Wichtig ist dabei zu wissen, wie mit einer Script-Sprache wie JavaScript auf ein solches HTML-Elementobjekt zugegriffen werden kann.

Zugriff über Elementnamen sowie Elementnummer oder name-Attribut (ältere Elementlisten):

Nach Möglichkeit sollten Sie die vordefinierten Arrays verwenden, die alle Elemente des Dokuments eines Typs beinhalten. Diese wurden bereits in JavaScript 1.0 bzw. 1.1 definiert und wurden in die HTML-Variante des DOM übernommen. Sie erlauben den Zugriff über die Elementnummer (z.B. das dritte img-Element im Dokument) oder über ein name-Attribut (z.B. ein form-Element mit name="suchformular"). Damit gelingt der Zugriff auf HTML-Elemente am sichersten, aber es können nicht alle Elemente auf diese Weise angesprochen werden.

  • Seite document.forms erlaubt den Zugriff auf alle nach unten form-Elemente (Formulare).
  • Seite document.images erlaubt den Zugriff auf alle nach unten img-Elemente (Grafiken).
  • Seite document.links erlaubt den Zugriff auf alle nach unten a-Elemente, die ein href-Attribut besitzen (Hyperlinks).
  • Seite document.anchors erlaubt den Zugriff auf alle nach unten a-Elemente, die ein name-Attribut besitzen (Verweisanker).
  • Seite document.applets erlaubt den Zugriff auf alle nach unten applet- und nach unten object-Elemente, die Java-Applets einbinden.
  • Seite window.frames erlaubt den Zugriff auf alle nach unten frame- und nach unten iframe-Elemente (Frames bzw. eingebettete Frames).

Gemäß der HTML-Variante des DOM können auf diese Weise auch Elemente mit einer bestimmten ID angesprochen werden. document.images["bild"] soll z.B. das img-Element ansprechen, das entweder das Attribut name="bild" oder das Attribut id="bild" besitzt. Im Vergleich zur vielseitigeren Methode document.getElementById() hat diese Schreibweise jedoch keine Vorteile, da sie ebenfalls nur von neueren Browsern unterstützt wird.

Zugriff über das name-Attribut (getElementsByName):

Das name-Attribut ist in HTML nur bei bestimmten Elementen erlaubt, etwa bei Formularelementen. Deshalb ist diese Zugriffsmethode auch nur bei den folgenden Elementen möglich, da diese ein name-Attribut erlauben:

nach unten a
nach unten applet 		nach unten form
nach unten frame 		nach unten img
nach unten input 		nach unten iframe
nach unten map 		nach unten meta
nach unten object 		nach unten param
nach unten select 		nach unten textarea

Mit der Methode Seite document.getElementsByName() können Sie HTML-Elemente ansprechen, die ein name-Attribut haben. In den meisten Fällen können Sie jedoch die besagten älteren Elementlisten verwenden.

Zugriff über id-Attribut (getElementById):

Das id-Attribut ist im Gegensatz zum name-Attribut in fast allen HTML-Elementen erlaubt. Außerdem sollte seine Wertzuweisung ein dokumentweit eindeutiger Name für das Element sein. Dadurch eignet sich diese Zugriffsmethode in den meisten Fällen in der Praxis besser als die über das name-Attribut.

Mit der Methode Seite document.getElementById() können Sie HTML-Elemente ansprechen, die ein id-Attribut haben.

Zugriff über Elementnamen sowie Elementnummer, name-Attribut oder id-Attribut (getElementsByTagName):

Wenn Sie auf HTML-Elemente zugreifen möchten, bei denen weder ein name-Attribut noch ein id-Attribut notiert ist, steht Ihnen ein dritter Weg offen: der Zugriff über den Elementenbaum. Dabei können Sie dann beispielsweise auf die "dritte Tabellenzelle in der zweiten Tabellenreihe der vierten Tabelle im Dokument" zugreifen.

Mit der Methode Seite document.getElementsByTagName() sind solche Zugriffe möglich. In manchen Fällen können Sie jedoch die älteren, besser unterstützen Elementlisten verwenden.

Eigenschaften und Methoden von HTML-Elementobjekten:

Jedes HTML-Element hat Eigenschaften. Und zwar stellt jedes erlaubte Attribut eines HTML-Elements eine DOM-Eigenschaft dieses Elements dar. So hat beispielsweise das HTML-Element input ein erlaubtes Attribut value, und das HTML-Element h1 hat ein erlaubtes Attribut align. Im DOM gibt es demnach also ein input-Elementobjekt mit der Eigenschaft value, und ein h1-Elementobjekt mit der Eigenschaft align.

Darüber hinaus definiert das DOM für einige der HTML-Elemente auch Methoden. So kann gibt es für das form-Elementobjekt (also das DOM-Objekt des HTML-Elements form) die Methoden submit() (Formular absenden) und reset() (Formulareingaben verwerfen).

Für alle Eigenschaften und Methoden von HTML-Elementobjekten gelten die zuvor genannten drei Zugriffsmethoden. Wenn Sie beispielsweise folgendes HTML-Element haben:
<h1 id="Seitenkopfueberschrift" align="center">Text</h1>
Dann können Sie mit document.getElementById() auf das Element zugreifen und die Objekteigenschaft align abfragen oder ändern - z.B.:
alert(document.getElementById("Seitenkopfueberschrift").align)
Diese JavaScript-Anweisung gibt ein Meldungsfenster aus, in dem center steht, weil document.getElementById("Seitenkopfueberschrift").align auf die Eigenschaft align des Elementobjekts mit der Id Seitenkopfueberschrift zugreift.

Auf dieser Seite werden für alle HTML-Elemente die vom DOM erlaubten Eigenschaften und Methoden beschrieben. Die Eigenschaften ergeben sich dabei zwangsläufig aus den erlaubten Attributen der HTML-Elemente gemäß HTML 4.0. Die Methoden werden dagegen nur vom DOM festgelegt. Jedes HTML-Element stellt gemäß dem DOM außerdem einen Knoten im Elementenbaum dar. Deshalb gelten für jedes HTML-Element auch alle Eigenschaften und Methoden des Seite node-Objekts.

Beachten Sie:

Beachten Sie unbedingt die Groß-/Kleinschreibung der Eigenschaften und Methoden, die in diesem Abschnitt zu den einzelnen HTML-Elementobjekten aufgelistet sind. Fehler bei der Groß-/Kleinschreibung führen zu Fehlern in JavaScript.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Universaleigenschaften

Universaleigenschaften entsprechen den Seite Universalattributen von HTML. Diese Eigenschaften gelten für fast jedes HTML-Element.

Auf HTML-Elementobjekte zugreifen |  | siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung
Eigenschaft | Status | Bedeutung
className | Lesen/Ändern | CSS-Klassenname
dir | Lesen/Ändern | Schreibrichtung
id | Lesen/Ändern | dokumentweit eindeutiger Name
lang | Lesen/Ändern | Landessprache (de, en, fr, it usw.)
title | Lesen/Ändern | Titel

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p id="p_italiano" lang="it"
  onclick="alert(document.getElementById('p_italiano').lang)">io senza te</p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit einer id="p_italiano". Gleichzeitig enthält der Textabsatz einen Seite Event-Handler onclick. Beim Anklicken des Textes gibt ein Meldungsfenster aus, um welche Sprache es sich bei dem Text handelt - ausgegeben wird die Wertzuweisung des Attributs lang, also der Wert it.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 a (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: a
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente a haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft | Status | Bedeutung
accessKey | Lesen/Ändern | Hotkey für den Hyperlink
charset | Lesen/Ändern | Zeichenkodierung des Verweisziels
coords | Lesen/Ändern | verweis-sensitive Bereiche bei Objekten
href | Lesen/Ändern | Verweisziel
hreflang | Lesen/Ändern | Landessprache des Verweisziels
name | Lesen/Ändern | Ankername
rel | Lesen/Ändern | Verweisziel als "Vorwärtsverknüpfung"
rev | Lesen/Ändern | Verweisziel als "Rückwärtsverknüpfung"
shape | Lesen/Ändern | verweis-sensitive Bereiche bei Objekten
tabIndex | Lesen/Ändern | Tabulator-Reihenfolge für Hyperlinks
target | Lesen/Ändern | Fensternamen des Verweisziels
type | Lesen/Ändern | MIME-Typ des Verweisziels
Methode |  | Bedeutung
blur() |  | entfernt den Fokus von diesem Element
focus() |  | setzt den Fokus auf dieses Element

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function AndererLink () {
  document.getElementById("selfhtml_link").href = "http://aktuell.de.selfhtml.org/";
  document.getElementById("selfhtml_link").firstChild.nodeValue = "SELFHTML aktuell";
}
</script>
</head><body>
<p><a id="selfhtml_link" href="http://de.selfhtml.org/">SELFHTML</a></p>
<p><a href="javascript:AndererLink()">anderer Link!</a></p>
</body></html>

Erläuterung:

Die Beispieldatei enthält zwei Verweise. Der erste Verweis führt auf eine Adresse im Netz, der zweite ruft die JavaScript- Seite Funktion AndererLink() auf, die im Dateikopf notiert ist. Diese Funktion weist der Elementeigenschaft href einen neuen Wert zu, nämlich eine andere Internet-Adresse. Mit getElementById("selfhtml_link") wird dabei auf den Verweis zugegriffen, der mit id="selfhtml_link" ausgezeichnet ist. Außerdem ändert die Funktion AndererLink() auch noch dynamisch den Verweistext. Auch dafür wird die DOM-Syntax verwendet, nämlich durch Zuweisung eines neuen Textes an Seite node.nodeValue (firstChild ist bezeichnet den ersten Kindknoten eines Knotens).

DOM 1.0 JavaScript 1.5 Netscape 6.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 abbr (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: abbr
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente abbr haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.normal { font-weight:normal }
.fett { font-weight:bold }
</style>
<script type="text/javascript">
function wechseln () {
  if (document.getElementById("abk").className == "normal") {
    document.getElementById("abk").className = "fett";
  } else {
    document.getElementById("abk").className = "normal";
  }
}
</script>
</head><body>
<p>Das ist eine <abbr id="abk" class="normal" onmouseover="wechseln()" onmouseout="wechseln()">Abk.</abbr></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit der Abkürzung Abk., die mit <abbr>...</abbr> ausgezeichnet ist. Das einleitende Tag enthält eine CSS-Klassenangabe, eine eindeutige Id-Angabe und die Seite Event-Handler onmouseover und onmouseout, die jeweils die JavaScript- Seite Funktion wechseln() aufgerufen, die im Dateikopf notiert ist. Diese Funktion fragt ab, ob der zugewiesene Klassenname normal lautet. Wenn ja, wird er auf fett geändert, wenn nein, wird er auf normal geändert. Dadurch ergibt sich der Effekt, dass beim Überfahren der Abkürzung mit der Maus der Text der Abkürzung fett dargestellt wird, ansonsten normal.

Beachten Sie:

Beim Internet Explorer war das Beispiel mit dem abbr-Element außer unter dem Internet Explorer 5.0 der Macintosh Edition nicht nachvollziehbar, mit anderen Elementen dagegen schon.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 acronym (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: acronym
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente acronym haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<p>Das ist ein <acronym id="acr" onmouseover="document.getElementById('acr').title = 'Acronym'">Acr.</acronym></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit dem Akronym Acr., das mit <acronym>...</acronym> ausgezeichnet ist. Das einleitende Tag enthält eine eine eindeutige Id-Angabe und den Seite Event-Handler onmouseover. Beim Überfahren des Elementtextes mit der Maus wird dadurch dynamisch ein title-Attribut gesetzt, das aussagt, was die Abkürzung Acr. bedeutet.

DOM 1.0 JavaScript 1.5 Netscape 6.1 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 address (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: address
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente address haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Namen () {
  document.getElementsByTagName("address")[0].firstChild.nodeValue = "Stefan Münz";
}

function Text () {
  document.getElementsByTagName("address")[0].firstChild.nodeValue = "der SELFHTML-Redaktion";
}
</script>
</head><body>
<div>Dies alles ist von
<address onmouseover="Namen()" onmouseout="Text()">der SELFHTML-Redaktion</address><div>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit der Adressbezeichnung SELFHTML-Redaktion, die mit <address>...</address> ausgezeichnet ist. Das einleitende Tag enthält die Seite Event-Handler onmouseover und onmouseout, die jeweils eine JavaScript- Seite Funktion aufrufen. Die Funktion Namen(), die bei onmouseover aufgerufen wird, ersetzt den Inhalt SELFHTML-Redaktion durch den Wert Stefan Münz. Die Funktion Text() stellt dagegen den Originalzustand wieder her und wird bei onmouseout aufgerufen. Beide Funktionen greifen mit getElementsByTagName("address")[0] auf das erste address-Element im Dokument zu. Der jeweils neue Textinhalt des Elements wird mit Seite node.nodeValue gesetzt (firstChild bezeichnet den ersten Kindknoten eines Knotens).

DOM 1.0 JavaScript 1.5 Netscape 6.1 MS IE 5.5 Opera 8 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 applet (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: applet
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente applet haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung
alt | Lesen/Ändern | Alternativtext
archive | Lesen/Ändern | kommaseparierte Liste mit Archivdateien
code | Lesen/Ändern | Klassendatei des Applets
codeBase | Lesen/Ändern | Basis-URI des Applets
height | Lesen/Ändern | Anzeigehöhe
hspace | Lesen/Ändern | horizontaler Abstand zwischen Applet und umfließendem Text
name | Lesen/Ändern | Name für das Applet
object | Lesen/Ändern | Objekt-Id des Applets
vspace | Lesen/Ändern | vertikaler Abstand zwischen Applet und umfließendem Text
width | Lesen/Ändern | Anzeigebreite

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<applet id="Ticker" code="zticker.class" width="600" height="60">
 <param name="msg" value="Die Energie des Verstehens">
 <param name="speed" value="5">
 <param name="bgco" value="255,255,255">
 <param name="txtco" value="000,000,255">
 <param name="hrefco" value="255,255,255">
</applet>
<form name="Form" action="">
<input type="button" value="40" onclick="document.getElementById('Ticker').height = 40">
<input type="button" value="60" onclick="document.getElementById('Ticker').height = 60">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein eingebundenes Java-Applet für einen Lauftext (Ticker). Unterhalb des Applets ist ein Formular mit einem Eingabefeld notiert. Klickt der Anwender auf die Buttons, wird dynamisch die Anzeigehöhe des Java-Applets geändert, und der Lauftext ändert dabei automatisch seine Größe (sofern das Applet so programmiert ist, dass die Größe des Lauftextes von dem Attribut height im einleitenden <applet>-Tag abhängig ist). Mit document.getElementById('Ticker') wird auf das Applet zugegriffen, da es im einleitenden Tag das Attribut id="Ticker" hat. Geändert wird sein Attribut height.

Beachten Sie:

Netscape 6.0 interpretiert dieses Beispiel nicht. Opera vor Version 8 erlaubt lediglich Lesezugriff auf die verwendete Eigenschaft height.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 area (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: area
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente area haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
accesskey | Lesen/Ändern | Hotkey für den Hyperlink
alt | Lesen/Ändern | Kurzbeschreibung des Verweisziels
coords | Lesen/Ändern | Koordinaten des verweis-sensitiven Bereichs
href | Lesen/Ändern | Verweisziel
nohref | Lesen/Ändern | aktionsloser Bereich
shape | Lesen/Ändern | Typ eines verweis-sensitiven Bereichs
tabindex | Lesen/Ändern | Tabulator-Reihenfolge für Hyperlinks
target | Lesen/Ändern | Fensternamen des Verweisziels

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function plus100 () {
  document.getElementById("Verweis").coords = "101,101,349,149";
}
</script>
</head><body>
<map name="Testbild">
<area id="Verweis" shape="rect" coords="1,1,249,49"
      href="javascript:plus100()" title="Koordinaten" alt="Koordinaten">
</map>
<img src="hypgraf.gif" width="400" height="400"
   usemap="#Testbild" alt="verweis-sensitive Grafik">
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik, die auf einen map-Bereich verweist, in dem ein verweis-sensitiver Bereich für die Grafik notiert wird. Beim Anklicken dieses verweis-sensitiven Bereichs wird die JavaScript- Seite Funktion plus100() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ändert dynamisch die Eigenschaft coords, indem sie ihr neue Werte zuweist. Der Effekt ist, dass der verweis-sensitive Bereich anschließend um 100 Pixel weiter nach rechts unten verlagert wird.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 b (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: b
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente b haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
#wichtig { color:red; }
#unwichtig { color:black; }
</style>
<script type="text/javascript">
function Unwichtig () {
  document.getElementById('wichtig').id = 'unwichtig';
  alert(document.getElementById('unwichtig').id);
}
</script>
</head><body>
<p><b id="wichtig">wichtige Aussage!</b></p>
<p><a href="javascript:Unwichtig()">unwichtig machen!</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält eine mit <b>...</b> formatierte wichtige Aussage, bei der im einleitenden Tag das Attribut id="wichtig" notiert ist. Im Dateikopf das Element mit dieser ID mittels CSS rot gefärbt. Zudem ist dort eine Funktion Unwichtig() notiert, die beim Aktivieren eines Verweises im Dateikörper ausgeführt wird. Die Funktion setzt das id-Attribut des b-Elements auf den Wert unwichtig. Dazu wird mit document.getElementById('wichtig').id auf das Attribut zugegriffen. Anschließend wird mit document.getElementById('unwichtig').id auf den neuen ID-Wert zugegriffen, um den neuen ID-Wert zur Kontrolle in einem Meldungsfenster auszugeben. Durch die CSS-Formatierung für die ID unwichtig im Seitenkopf ändert sich die Farbe des Textes im b-Element.

DOM 1.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 base (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: base
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente base haben als DOM-Objekte für den Script-Sprachenzugriff die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
href | Lesen/Ändern | Basis-URI
target | Lesen/Ändern | Default Zielfenster für Verweise

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<base target="_self">
<script type="text/javascript">
function blankBase () {
  document.getElementsByTagName("base")[0].target = "_blank";
}
</script>
</head><body>
<a href="news.htm">News</a><br>
<a href="javascript:blankBase()">Links in neues Fenster laden</a>
</body></html>

Erläuterung:

In der Beispieldatei sind zwei Verweise notiert. Der erste ruft einfach eine andere Datei auf. Normalerweise wird das Verweisziel dabei ins gleiche Fenster geladen. Im Dateikopf ist dies mit <base target="_self"> auch explizit bestätigt. Der zweite Verweis ruft bei Anklicken jedoch die JavaScript- Seite Funktion blankBase() auf, die beim base-Element die Eigenschaft target auf den Wert _blank ändert, was bewirkt, dass Verweisziele dieser Datei in ein neues Fenster geladen werden.

Beachten Sie:

Mit Netscape und Internet Explorer 5.0 Macintosh Edition war das Beispiel mit dem base-Element nicht nachvollziehbar. Die Opera-Browser der 7er-Reihe öffnen den Verweis nicht im neuen Fenster, Opera-Versionen vorher und nachher interpretieren das Beispiel korrekt.

Die Verwendung von Universaleigenschaften ist im HTML-4.0-Standard für das base-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die Methode document.getElementById() vermeiden.

DOM 1.0 MS IE 5.5 basefont (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: basefont
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente basefont haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
color | Lesen/Ändern | Basis-Schriftfarbe
face | Lesen/Ändern | Basis-Schriftart
size | Lesen/Ändern | Basis-Schriftgröße

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function machGross () {
  document.getElementById("ab_hier_anders").size = "7";
}
</script>
</head><body>
<p>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
<basefont id="ab_hier_anders" color="red" size="4">
<p>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
<a href="javascript:machGross()">nicht nur rot, sondern auch gross</a>
</body></html>

Erläuterung:

Das Beispiel enthält Text und zwischendrin ein basefont-Element. Am Ende steht ein Verweis, bei dessen Anklicken die JavaScript- Seite Funktion machGross() aufgerufen wird. Mit getElementById("ab_hier_anders") greift diese Funktion auf das basefont-Element zu und ändert dessen Eigenschaft size auf den Wert 7.

Beachten Sie:

Das Beispiel mit dem basefont-Element funktioniert nur im Internet Explorer.

DOM 1.0 JavaScript 1.5 Netscape 6.1 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Safari WebKit (Entwicklerversion) bdo (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: bdo
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente bdo haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function abc2cba () {
  document.getElementsByTagName("bdo")[0].dir = "rtl";
}
</script>
</head><body>
<bdo dir="ltr">ABCDEFGHIJKLMNOPQRSTUVWXYZ</bdo><br>
<a href="javascript:abc2cba()">umkehren!</a>
</body></html>

Erläuterung:

Das Beispiel enthält ein bdo-Element mit dem Attribut dir="ltr" (Schriftrichtung von links nach rechts), das das Alphabet in Großbuchstaben als Inhalt hat. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Seite Funktion abc2cba() aufgerufen. Diese greift mit getElementsByTagName("bdo")[0] auf das erste bdo-Element im Dokument zu und ändert die Schriftrichtung auf rtl, also von rechts nach links. Das Großbuchstabenalphabet wird dadurch umgedreht.

Beachten Sie:

Mit Internet Explorer 5.0 Macintosh Edition sowie mit Konqueror 3.4 war das Beispiel nicht nachvollziehbar.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 big (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: big
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente wie big haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.verybig { font-size:300% }
</style>
<script type="text/javascript">
function nochmehr () {
  document.getElementById("biggie").className = "verybig";
}
</script>
</head><body>
<p><big id="biggie" onclick="nochmehr()">gross und stark!</big></p>
</body></html>

Erläuterung:

Das Beispiel enthält in einem Textabsatz Text, der mit <big>...</big> ausgezeichnet ist. Im einleitenden <big>-Tag ist der Seite Event-Handler onclick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript- Seite Funktion nochmehr() aufgerufen. Diese greift mit document.getElementById("biggie") auf das big-Element zu und weist ihm die im Dateikopf in einem Style-Bereich definierte Klasse verybig zu. Der Text wird dadurch auf 300% seiner normalen Größe vergrößert.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 blockquote (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: blockquote
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente blockquote haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
cite | Lesen/Ändern | URI der Zitatquelle

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function showCite () {
  alert(document.getElementById("w3zitat").cite);
}
</script>
</head><body>
<p>Das W3-Konsortium schreibt über das DOM:</p>
<blockquote id="w3zitat"
            cite="http://www.w3.org/TR/REC-DOM-Level-1/introduction.html"
            onmouseover="showCite()">
The Document Object Model (DOM) is an application programming
interface (API) for valid HTML and well-formed XML documents.
</blockquote>
</body></html>

Erläuterung:

Das Beispiel enthält ein mit <blockquote>...</blockquote> ausgezeichnetes Zitat, in dessen einleitendem Tag auch den URI der Quelle mit dem Attribut cite angegeben ist. Ferner ist dort der Seite Event-Handler onmouseover notiert, der bewirkt, dass beim Überfahren des Zitats mit der Maus die JavaScript- Seite Funktion showCite() aufgerufen wird. Diese greift mit document.getElementById("w3zitat") auf das blockquote-Element zu und gibt in einem Meldungsfenster den Wert des cite-Attributs aus.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 body (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: body
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente body haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
aLink | Lesen/Ändern | dokumentweite Farbe für aktivierte Links
background | Lesen/Ändern | URI einer dokumentweiten Hintergrundgrafik
bgColor | Lesen/Ändern | dokumentweite Hintergrundfarbe
link | Lesen/Ändern | dokumentweite Farbe für Links zu noch nicht besuchten Seiten
text | Lesen/Ändern | dokumentweite Textfarbe
vLink | Lesen/Ändern | dokumentweite Farbe für Links zu bereits besuchten Seiten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function WerteSetzen () {
  document.getElementsByTagName("body")[0].text = document.Formular.Text.value;
  document.getElementsByTagName("body")[0].link = document.Formular.Link.value;
  document.getElementsByTagName("body")[0].vLink = document.Formular.VLink.value;
  document.getElementsByTagName("body")[0].bgColor = document.Formular.BgColor.value;
}
</script>
</head><body>
<h1>Ein dynamisches Dokument</h1>
<a href="news.htm"><b>Ein Link zu den News</b></a>

<form name="Formular" action="">
<pre>
Textfarbe:           <input type="text" size="7" name="Text">
Linkfarbe:           <input type="text" size="7" name="Link">
Linkfarbe (besucht): <input type="text" size="7" name="VLink">
Hintergrundfarbe:    <input type="text" size="7" name="BgColor">
Einstellungen:       <input type="button" value="Testen!" onclick="WerteSetzen()">
</pre>
</form>

</body></html>

Erläuterung:

Die Beispieldatei enthält im body-Bereich eine Überschrift, einen Link und ein Formular mit verschiedenen Eingabefeldern. In den Eingabefeldern kann der Anwender neue Basisfarben für das Dokument einstellen - typische Eingabewerte sind also hexadezimale Angaben wie #FFFFCC oder Farbwörter wie maroon. Beim Anklicken des Buttons mit der Aufschrift Testen wird die JavaScript- Seite Funktion WerteSetzen() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementsByTagName("body")[0] auf das "erste body-Element" der Datei zu und weist den entsprechenden Eigenschaften die eingegebenen Werte aus dem Formular zu. Dadurch verändern sich die Basisfarben des Dokuments.

Beachten Sie:

Beim Internet Explorer sind auf das body-Objekt die meisten Eigenschaften des Seite all-Objekts anwendbar. Der Grund ist, dass body im Internet Explorer schon vor Einführung der DOM-Syntax als Objektname existierte.

Sie können im Internet Explorer, Mozilla Firefox 1.0, Netscape 6, Opera 7 und Konqueror 3.3 zusätzlich auf die Eigenschaften offsetTop, offsetLeft, offsetWidth, offsetHeight, offsetParent und innerHTML zugreifen. Diese Eigenschaften stehen erst nach dem Laden des Dokumentes zur Verfügung.

Unter dem Internet Explorer 5.0 Macintosh Edition war das Beispiel nicht vollständig nachvollziehbar und führte teilweise zu einem sehr seltsamen Verhalten.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Konqueror 3.1 Safari 1.0 br (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: br
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente br haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
clear | Lesen/Ändern | Fortsetzungsposition bei Textumfluss

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="../../../src/logo.gif" width="106" height="109" border="0" align="left"
 alt="Logo" onclick="document.getElementById('Umbruch').clear = 'all'">
Dieser Text fliesst um das Logo herum,
weil dies im align-Attribut des Logos so angegeben ist.<br id="Umbruch">
Gilt das auch bei diesem Text?
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik, bei der durch die Angabe align="left" festgelegt wird, dass der nachfolgende Text rechts um die Grafik fließt. Der Text enthält einen Zeilenumbruch, markiert durch <br>. Die Grafik enthält einen Seite Event-Handler onclick, der bewirkt, dass beim Anklicken der Grafik mit document.getElementById('Umbruch') auf das Zeilenumbruch-Element zugegriffen wird. Ihm wird die Eigenschaft clear mit dem Wert all zugewiesen. Der Text unterhalb des Umbruchs rutscht bei einem Klick auf die Grafik unter die Grafik, da <br clear="all"> die Textfortsetzung unterhalb der Grafik bewirkt.

Beachten Sie:

Im Mozilla Firefox 1.0 kommt die Änderung der clear-Eigenschaft im Beispiel erst dann zum Tragen, wenn die Fenstergröße geändert wird.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 button (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: button
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente button haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
accessKey | Lesen/Ändern | Hotkey für den Tastaturzugriff
disabled | Lesen/Ändern | Button kann nicht betätigt werden
form | Lesen | zugehöriges Formularelement
name | Lesen/Ändern | Name für den Button
tabIndex | Lesen/Ändern | Tabulator-Reihenfolge
type | Lesen | Typ des Buttons
value | Lesen/Ändern | Absendewert des Buttons

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function ZeitAufButton () {
  var jetzt = new Date();
  var Zeit = jetzt.getTime();
  document.getElementsByName("Zeitbutton")[0].value = Zeit;
  document.getElementsByName("Zeitbutton")[0].firstChild.nodeValue = Zeit;
}
</script>
</head><body>
<form name="Formular" action="">
<button type="button" name="Zeitbutton" value="" onclick="ZeitAufButton()">Zeit!</button>
</form>
</body></html>

Erläuterung:

Das Beispiel definiert in einem Formular einen Button, der den Seite Event-Handler onclick enthält. Beim Anklicken des Buttons wird deshalb die JavaScript- Seite Funktion ZeitAufButton() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ermittelt mit Hilfe des Seite Date-Objekts den aktuellen Zeitpunkt in Millisekunden und weist diesen ermittelten Wert sowohl dem Absendewert des Buttons als auch dessen Aufschrift zu. Dazu wird mit document.getElementsByName("Zeitbutton")[0] auf das erste Element mit dem Attribut name="Zeitbutton" zugegriffen. Der Absendewert durch Zuweisen des Wertes von Zeit an die Eigenschaft value geändert. Für die Button-Aufschrift muss der Wert des ersten Kindknotens (firstChild.nodeValue) des Buttons geändert werden. Das Beispiel bewirkt, dass bei jedem Anklicken des Buttons die Millisekundenzeit auf der Button-Aufschrift aktualisiert wird.

Beachten Sie:

Konqueror 3.1 stellt den Button selbst nicht korrekt dar.

DOM 1.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 caption (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: caption
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente caption haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Wechseln () {
  if (document.getElementById("THeader").align == "left") {
    document.getElementById("THeader").align = "right";
  } else {
    document.getElementById("THeader").align = "left";
  }
}
</script>
</head><body>
<table border="5" cellspacing="4">
<caption id="THeader" align="left" onclick="Wechseln()"><b>Spielstand:</b></caption>
<tr>
<td>Hans Moosreiner:</td><td>5 Punkte</td>
</tr><tr>
<td>Lisa Wohlthu:</td><td>3 Punkte</td>
</tr>
</table>
</body></html>

Erläuterung:

Das Beispiel enthält eine kleine Tabelle mit einer Tabellenüberschrift, die durch <caption>...</caption> ausgezeichnet ist. Das einleitende Tag enthält ferner den Seite Event-Handler onclick. Dadurch wird beim Anklicken der Tabellenüberschrift die JavaScript- Seite Funktion Wechseln() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("THeader") auf die Tabellenüberschrift zu und fragt ab, ob deren align-Eigenschaft den Wert left hat. Wenn ja, wird er auf right geändert, wenn nein (also wenn er auf right gesetzt ist), wird er wieder auf left gesetzt. Auf diese Weise springt die Tabellenüberschrift bei jedem Anklicken zur anderen Seite (links bzw. rechts).

Beachten Sie:

Mit Netscape, Konqueror 3.4 und dem Internet Explorer 5.0 Macintosh Edition und Safari war das Beispiel mit dem caption-Element nicht nachvollziehbar.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 center (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: center
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente center haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<center id="zentriert" title="Das ist wirklich zentriert!"
onmouseover="alert(document.getElementById('zentriert').title)">
<h1>Das ist zentriert</h1>
<h2>Das ist zentriert</h2>
<h3>Das ist zentriert</h3>
</center>
</body></html>

Erläuterung:

Das Beispiel enthält einen mit <center>...</center> ausgezeichneten Bereich, innerhalb dessen alles zentriert dargestellt wird. Im einleitenden Tag ist der Seite Event-Handler onmouseover notiert. Beim Überfahren des zentrierten Bereichs wird ein Meldungsfenster ausgegeben, das den Wert des Attributs title ausgibt. Dazu wird mit document.getElementById('zentriert') auf das Element zugegriffen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 cite (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: cite
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente cite haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<cite id="Zitat" title="Zitat von Kafka"
onmouseover="alert(document.getElementById('Zitat').title)">
Die Krähen behaupten, eine einzige Krähe könne den Himmel zerstören.
Das ist zweifellos, beweist aber nichts gegen den Himmel, denn Himmel bedeutet eben:
Unmöglichkeit von Krähen.
</cite>
</body></html>

Erläuterung:

Das Beispiel enthält einen mit <cite>...</cite> ausgezeichneten Bereich. Im einleitenden Tag ist der Seite Event-Handler onmouseover notiert. Beim Überfahren des zentrierten Bereichs wird ein Meldungsfenster ausgegeben, das den Wert des Attributs title ausgibt. Dazu wird mit document.getElementById('Zitat') auf das Element zugegriffen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 code (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: code
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente code haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.farbig { color:blue }
</style>
<script type="text/javascript">
function farbig () {
  document.getElementById("Perlbeispiel").className = "farbig";
}
</script>
</head><body>
<p><code id="Perlbeispiel" onclick="farbig()">$Text =~ s/[a-z]| //gi;</code></p>
</body></html>

Erläuterung:

Das Beispiel enthält in einem Textabsatz Perl-Code, der mit <code>...</code> ausgezeichnet ist. Im einleitenden <code>-Tag ist der Seite Event-Handler onclick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript- Seite Funktion farbig() aufgerufen. Diese greift mit document.getElementById("Perlbeispiel") auf das code-Element zu und weist ihm die im Dateikopf in einem Style-Bereich definierte Klasse farbig zu. Der Text wird dadurch blau dargestellt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 col (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: col
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente col haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung
ch | Lesen/Ändern | Ausrichtungszeichen
chOff | Lesen/Ändern | Position des Ausrichtungszeichens
span | Lesen/Ändern | für wie viele Spalten die Angaben gelten
vAlign | Lesen/Ändern | Tabellenspalten vertikal ausrichten
width | Lesen/Ändern | Spaltenbreite

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function gleichbreit () {
  for (i = 0; i < document.getElementsByTagName("col").length; i++)
    document.getElementsByTagName("col")[i].width = "320";
}
</script>
</head><body>
<table border="1">
     <colgroup>
        <col width="80">
        <col width="100">
        <col width="320">
     </colgroup>
    <tr>
      <td>1. Zeile, 1. Spalte</td>
      <td>1. Zeile, 2. Spalte</td>
      <td>1. Zeile, 3. Spalte</td>
    </tr>
</table>
<a href="javascript:gleichbreit()">Spalten gleich breit machen!</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Tabelle mit drei Spalten, deren Breiten mit col-Elementen unterschiedlich vordefiniert werden. Unterhalb der Tabelle ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Seite Funktion gleichbreit() aufgerufen wird. Diese greift in einer Seite for-Schleife der Reihe nach mit document.getElementsByTagName("col") auf die einzelnen col-Elemente zu und weist ihnen jeweils den Wert 320 für die Eigenschaft width zu. Dadurch wird die Tabelle dynamisch neu angezeigt, und zwar mit drei gleich breiten Spalten.

Beachten Sie:

Unter dem Internet Explorer 5.0 Macintosh Edition war das Beispiel nicht nachvollziehbar.

Konqueror 3.1 nimmt die Änderung der Spaltenbreiten korrekt vor, Konqueror 3.3 und 3.4 erst, wenn die Seite z.B. durch eine Änderung der Fenstergröße oder der Schriftgröße neu aufgebaut wird.

DOM 1.0 MS IE 5.5 Opera 7 colgroup (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: colgroup
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente colgroup haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung
ch | Lesen/Ändern | Ausrichtungszeichen
chOff | Lesen/Ändern | Position des Ausrichtungszeichens
span | Lesen/Ändern | für wie viele Spalten die Angaben gelten
vAlign | Lesen/Ändern | Tabellenspalten vertikal ausrichten
width | Lesen/Ändern | Spaltenbreite

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function ausrichten () {
  document.getElementById("Tabellenspalten").align = "right";
}
</script>
</head><body>
<table border="1">
 <colgroup id="Tabellenspalten">
  <col width="200">
 </colgroup>
 <tr><td>Hansi</td></tr>
 <tr><td>Willi</td></tr>
 <tr><td>Manni</td></tr>
</table>
<a href="javascript:ausrichten()">ausrichten!</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Tabelle mit mit einer colgroup-Definition. Unterhalb der Tabelle ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Seite Funktion ausrichten() aufgerufen wird. Diese greift mit document.getElementById("Tabellenspalten") auf das colgroup-Element zu und weist ihm den Wert right für die Eigenschaft align zu. Dadurch wird die Tabelle dynamisch neu angezeigt, und alle Zellen werden rechtsbündig ausgerichtet.

Beachten Sie:

Im Netscape 6.1, dem Internet Explorer 5.0 Macintosh Edition, Mozilla Firefox 1.0 und Safari 1.2 hat das Ändern der align-Eigenschaft keine Wirkung. Auch der Internet Explorer 5.x interpretiert die Eigenschaften von colgroup nur unvollständig.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 dd (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: dd
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dd haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Titel () {
  for (var i = 0; i < document.getElementsByTagName("dt").length; i++)
    document.getElementsByTagName("dd")[i].title =
      document.getElementsByTagName("dt")[i].firstChild.nodeValue;
}
</script>
</head><body>
<dl>
<dt>*.bmp</dt><dd>Bitmap-Grafiken</dd>
<dt>*.html</dt><dd>Web-Seiten-Dateien</dd>
<dt>*.css</dt><dd>Style-Dateien für Web-Seiten</dd>
</dl>
<a href="javascript:Titel()">Titel</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Definitionsliste mit drei Einträgen. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Seite Funktion Titel() aufgerufen, die im Dateikopf notiert ist. Diese greift in einer Seite for-Schleife der Reihe nach auf alle dt-Elemente zu und weist den zugehörigen dd-Elementen den Inhalt der dt-Elemente als title-Attribut zu.

DOM 1.0 JavaScript 1.5 Netscape 6.1 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 del (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: del
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente del haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
cite | Lesen/Ändern | URI für Gründe der Änderung
dateTime | Lesen/Ändern | Datum und Uhrzeit der Änderung

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Grund () {
  document.getElementById("HTMLVersion").cite = "http://www.w3.org/TR/html401";
}
</script>
</head><body onload="Grund()">
<p><del id="HTMLVersion" onmouseover="alert(document.getElementById('HTMLVersion').cite)">
die aktuelle HTML-Version ist 2.0</del></p>
</body></html>

Erläuterung:

Das Beispiel enthält eine mit <del>...</del> gelöschte Änderungsmarkierung. Nachdem die Datei geladen ist (Event-Handler onload im einleitenden <body>-Tag), wird die JavaScript- Seite Funktion Grund() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementById("HTMLVersion") auf das del-Element zu und weist ihm die im HTML-Code nicht notierte Eigenschaft cite mit einem Wert zu. Das del-Element verfügt zur Kontrolle über einen Seite Event-Handler onmouseover. Beim Überfahren des markierten Textes wird dadurch ein Meldungsfenster angezeigt, das den aktuellen Wert der Eigenschaft cite ausgibt.

Beachten Sie:

Opera 5 und 6 erlauben nur einen lesenden Zugriff auf diese Eigenschaft.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 dfn (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: dfn
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dfn haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p><dfn id="Definition" title="Dies ist eine Definition!"
onmouseover="alert(document.getElementById('Definition').title)">
Ein Uhu ist ein Vogel und kein Kleber</dfn></p>
</body></html>

Erläuterung:

Das Beispiel enthält eine mit <dfn>...</dfn> ausgezeichnete Definition. Beim Überfahren mit der Maus (onmouseover) wird ein Meldungsfenster ausgegeben, das den Wert des title-Attributs des dfn-Elements ausgibt. Dazu wird mit document.getElementById('Definition') auf das Element zugegriffen.

DOM 1.0 dir (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: dir
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dir haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
compact | Lesen/Ändern | Darstellung in enger Schrift

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function zeigKompakt () {
  document.getElementsByTagName("dir")[0].compact = true;
}
</script>
</head><body>
<dir onmouseover="zeigKompakt()">
<li>Eigene Dateien</li>
<li>Programme</li>
<li>Windows</li>
<li>temp</li>
</dir>
</body></html>

Erläuterung:

Das Beispiel enthält eine Verzeichnisliste. Beim Überfahren der Liste mit der Maus (onmouseover) wird die JavaScript- Seite Funktion zeigKompakt() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementsByTagName("dir")[0] auf das erste dir-Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true ("wahr"). Dadurch wird die gesamte Liste in kompakter Schrift dargestellt.

Beachten Sie:

Kein getesteter Browser interpretierte das HTML-Attribut compact.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 div (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: div
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente div haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
div { border:solid 3px red; padding:10px; }
</style>

<script type="text/javascript">
function ausrichten () {
  document.getElementById("zweiter").align = "center";
  document.getElementById("dritter").align = "right";
}
</script>
</head><body>
<div id="erster"><h1>Erster Bereich</h1><p>mit etwas Text</p></div>
<hr>
<div id="zweiter"><h1>Zweiter Bereich</h1><p>mit etwas Text</p></div>
<hr>
<div id="dritter"><h1>Dritter Bereich</h1><p>mit etwas Text</p></div>
<a href="javascript:ausrichten()">ausrichten!</a>
</body></html>

Erläuterung:

Das Beispiel enthält insgesamt drei div-Bereiche. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Seite Funktion ausrichten() aufgerufen. Diese Funktion ändert für den zweiten und dritten der Bereiche die Ausrichtung auf "zentriert" bzw. "rechts". Dazu wird mit document.getElementById("zweiter") auf den zweiten Bereich zugegriffen und mit document.getElementById("dritter") auf den dritten. Alle Elemente, die innerhalb der Bereiche notiert sind, werden dynamisch neu ausgerichtet.

DOM 1.0 dl (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: dl
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dl haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
compact | Lesen/Ändern | Darstellung in enger Schrift

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function zeigKompakt () {
  document.getElementsByTagName("dl")[0].compact = true;
}
</script>
</head><body>
<dl onmouseover="zeigKompakt()">
<dt>User's Guide</dt><dd>Benutzerhandbuch</dd>
<dt>User Instructions</dt><dd>Bedienungsanleitung</dd>
</dl>
</body></html>

Erläuterung:

Das Beispiel enthält eine Definitionsliste. Beim Überfahren der Liste mit der Maus (onmouseover) wird die JavaScript- Seite Funktion zeigKompakt() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementsByTagName("dl")[0] auf das erste dl-Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true ("wahr"). Dadurch wird die gesamte Liste in kompakter Schrift dargestellt.

Beachten Sie:

Kein getesteter Browser interpretierte das HTML-Attribut compact.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 dt (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: dt
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente dt haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.hervorgehoben { font-weight:bold; color:red; }
</style>
<script type="text/javascript">
function Wechseln (x) {
  if (document.getElementsByTagName("dt")[x].className == "") {
    document.getElementsByTagName("dt")[x].className = "hervorgehoben";
  } else {
    document.getElementsByTagName("dt")[x].className = "";
  }
}
</script>
</head><body>
<dl>
<dt class="" onclick="Wechseln(0)">User's Guide</dt><dd>Benutzerhandbuch</dd>
<dt class="" onclick="Wechseln(1)">User Instructions</dt><dd>Bedienungsanleitung</dd>
</dl>
</body></html>

Erläuterung:

Das Beispiel enthält eine Definitionsliste. Jedes der dt-Elemente enthält eine leere Style-Klassenzuweisung und den Seite Event-Handler onclick. Beim Anklicken der Elemente wird jeweils die JavaScript- Seite Funktion Wechseln() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("dt")[x] auf das jeweilige Element zu - x ist dabei ein Parameter dafür, das wie vielte Element dieses Typs in der Datei gemeint ist. Die dt-Elemente übergeben der Funktion den entsprechenden Parameter beim Aufruf mit Wechseln(0) bzw. Wechseln(1). Das Beispiel bewirkt, dass dem betroffenen dt-Element beim ersten Anklicken der Klassenname hervorgehoben zugewiesen wird, und beim nächsten Anklicken wieder eine leere Klasse. Die Klasse hervorgehoben, die im Dateikopf in einem Style-Bereich definiert ist, bewirkt, dass das Element fett und rot dargestellt wird.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 em (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: em
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente em haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.mitVielGefuehl { font-family:Lucida Calligraphy; font-size:150%; color:maroon; }
</style>
<script type="text/javascript">
function xem () {
  document.getElementById("Herzschmerz").className = "mitVielGefuehl";
}

function em () {
  document.getElementById("Herzschmerz").className = "";
}
</script>
</head><body>
<p>Das ist Text, der sich
<em id="Herzschmerz" onmouseover="xem()" onmouseout="em()">vor Herzschmerz kaum
retten kann</em>.</p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Satz, von dem ein Teil mit <em>...</em> ausgezeichnet ist. Das einleitende <em>-Tag enthält die Seite Event-Handler onmouseover und onmouseout. In einem Fall wird die JavaScript- Seite Funktion xem() aufgerufen, im anderen die Funktion em(). Beide Funktionen greifen mit document.getElementById("Herzschmerz") auf das em-Element zu und weisen einmal den Style-Klassennamen mitVielGefuehl und einmal einen leeren Klassennamen zu. Die CSS-Klasse mitVielGefuehl ist im Dateikopf definiert. Beim Überfahren des em-Elements mit der Maus wird der Text im Element dynamisch stark hervorgehoben.

DOM 1.0 JavaScript 1.5 Netscape 6.1 MS IE 6 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 fieldset (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: fieldset
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente fieldset haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
form | Lesen | zugehöriges Formularelement

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Hinweis () {
  if (document.getElementById("Absender").form != null)
    alert("Geben Sie Vornamen und Zunamen in jedem Fall an!");
}
</script>
</head><body bgcolor="#EEEEEE">
<form name="Formular" action="">
<fieldset id="Absender" onmouseover="Hinweis()">
<legend>Absender</legend>
<table><tr>
    <td align="right">Vorname:</td>
    <td><input type="text" size="40" maxlength="40"></td>
  </tr><tr>
    <td align="right">Zuname:</td>
    <td><input type="text" size="40" maxlength="40"></td>
  </tr></table>
</fieldset>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem fieldset-Bereich. Im einleitenden <fieldset>-Tag ist der Seite Event-Handler onmouseover notiert, der die JavaScript- Seite Funktion Hinweis() aufruft, die im Dateikopf definiert ist.
Mit if(document.getElementById("Absender").form != null) fragt die Funktion ab, ob die Eigenschaft form einen Wert hat. Wenn der Wert ungleich null ist, bedeutet dies, dass das fieldset-Element wie vorgeschrieben innerhalb eines Formulars vorkommt. In diesem Fall wird eine Meldung ausgegeben.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 font (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: font
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente font haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
color | Lesen/Ändern | Schriftfarbe
face | Lesen/Ändern | Schriftart
size | Lesen/Ändern | Schriftgröße

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var sizes = new Array("1", "2", "3", "4", "5", "6", "7");
var colors = new Array("#FF0000", "#0000FF", "#009900", "#CC00CC");
var faces = new Array("Arial", "Tahoma", "Wide Latin");
function Spielen () {
  var s = parseInt((Math.random() * 100) % 7);
  var c = parseInt((Math.random() * 100) % 4);
  var f = parseInt((Math.random() * 100) % 3);
  var i = parseInt((Math.random() * 100) % 7);
  document.getElementsByTagName("font")[i].size = sizes[s];
  document.getElementsByTagName("font")[i].color = colors[c];
  document.getElementsByTagName("font")[i].face = faces[f];
  window.setTimeout("Spielen()", 1000);
}
</script>
</head><body onload="Spielen()">
<p>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
</p>
</body></html>

Erläuterung:

Das Beispiel enthält insgesamt sieben Texte, die mit font-Elementen ausgezeichnet sind. Keines der font-Elemente enthält allerdings in HTML irgendwelche Attribute. Nachdem das Dokument geladen ist (Event-Handler onload im einleitenden <body>-Tag), wird die JavaScript- Seite Funktion Spielen() aufgerufen. Zuvor wurden bereits diverse Seite Arrays angelegt. Die Funktion Spielen ermittelt mittels Seite Math.random() Zufallszahlen und trimmt diese mit Hilfe von Multiplikation mit 100, Modulo-Division und Anwendung der Funktion Seite parseInt() so, dass ganzzahlige Zufallszahlen erzeugt werden. Diese werden als Index für die zuvor definierten Arrays verwendet. Solchermaßen ausgerüstet, greift die Funktion mit document.getElementsByTagName("font")[i] zufällig auf eines der font-Elemente zu und weist ihm die ebenfalls zufällig ermittelten Werte aus den Arrays für die Eigenschaften size, color und face zu. Am Ende wartet die Funktion eine Sekunde ( Seite window.setTimeout()) und ruft sich dann selber wieder auf. Dadurch ergibt sich ein endloses Spiel an zufälligen Textänderungen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 form (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: form
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente form haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft | Status | Bedeutung
acceptCharset | Lesen/Ändern | unterstützte Zeichensätze
action | Lesen/Ändern | URI für die Verarbeitung der Formulardaten
elements | Lesen | Array für die zugehörigen Formularelemente
enctype | Lesen/Ändern | MIME-Typ für Formulardatenübertragung
length | Lesen | Anzahl Formularelemente
name | Lesen/Ändern | Name des Formulars
method | Lesen/Ändern | Übertragungsmethode für Formulardaten
target | Lesen/Ändern | Fensternamen für Antwortausgaben
Methode |  | Bedeutung
reset() |  | Formular zurücksetzen
submit() |  | Formular absenden

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Formular" action="datei.htm" method="get">
<p>
 <input name="Text" type="text"><br>
 [<a href="javascript:document.getElementsByName('Formular')[0].submit()"><b>Absenden</b></a>]
 [<a href="javascript:document.getElementsByName('Formular')[0].reset()"><b>Abbrechen</b></a>]
</p>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Verweisen anstelle der sonst üblichen Submit- und Reset-Buttons. Der eine Verweis führt die submit()-Methode aus, der andere die reset()-Methode. Beide Verweise greifen dazu mit document.getElementsByName('Formular')[0] auf das erste Element mit dem Namen Formular zu.

Beachten Sie:

Dieses Beispiel funktioniert auch in Opera 5.12. In lokaler Umgebung außerhalb des HTTP-Protokolls (file:) wird jedoch nach dem Absenden der Quellcode der Zieldatei angezeigt.

DOM 1.0 Opera 7.20 frame (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: frame
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente frame haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
frameBorder | Lesen/Ändern | Rahmen sichtbar oder nicht sichtbar
longDesc | Lesen/Ändern | URI für längere Beschreibung zum Inhalt des Frame-Fensters
marginHeight | Lesen/Ändern | Anzahl Pixel für den Abstand des Fensterinhalts zum oberen und unteren Fensterrand
marginWidth | Lesen/Ändern | Anzahl Pixel für den Abstand des Fensterinhalts zum linken und rechten Fensterrand
name | Lesen/Ändern | Name für das Frame-Fenster
noResize | Lesen/Ändern | Größe veränderbar oder nicht veränderbar
scrolling | Lesen/Ändern | Scroll-Leisten oder keine Scroll-Leisten
src | Lesen/Ändern | URI für den Inhalt des Frame-Fensters

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function nullRand () {
  document.getElementById("F1").marginHeight = "0";
  document.getElementById("F1").marginWidth = "0";
}
</script>
</head>
<frameset cols="50%,50%" onload="nullRand()">
 <frame id="F1" src="frame1.htm" marginheight="20" marginwidth="20">
 <frame id="F2" src="frame2.htm" marginheight="20" marginwidth="20">
</frameset>
</html>

Erläuterung:

Das Beispiel definiert ein Frameset mit zwei Frames. Das frameset-Element besitzt den Seite Event-Handler onload. Nach dem Laden des Framesets wird die JavaScript- Seite Funktion nullRand() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementById("F1") auf das erste frame-Element zu und setzt dessen Eigenschaften für marginHeight und marginWidth auf 0.

Beachten Sie:

Internet Explorer, Mozilla Firefox und Opera bis Version 7.2 ermöglichen nur den Lesezugriff auf diese Eigenschaften. Das Ändern der Eigenschaft ist zwar möglich, die Abstände ändern sich jedoch nicht.

DOM 1.0 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 frameset (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: frameset
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente frameset haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
cols | Lesen/Ändern | Breitenverhältnisse für spaltenartig angeordnete Frame-Fenster
rows | Lesen/Ändern | Höhenverhältnisse für reihenartig angeordnete Frame-Fenster

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function dreiFenster () {
  document.getElementById("Fenster").cols = "33%,34%,33%";
  var F3 = document.createElement("frame");
  F3.setAttribute("src", "frame3.htm");
  document.getElementById("Fenster").appendChild(F3);
}
</script>
</head>
<frameset id="Fenster" cols="50%,50%" onload="dreiFenster()">
 <frame src="frame1.htm">
 <frame src="frame2.htm">
</frameset>
</head></html>

Erläuterung:

Das Beispiel definiert ein Frameset mit zwei Frames. Nachdem das Frameset geladen ist (Event-Handler onload im einleitenden <frameset>-Tag), wird die Funktion dreiFenster() aufgerufen. Diese Funktion greift mit document.getElementById("Fenster") auf das frameset-Element zu und setzt dessen Eigenschaft cols neu - und zwar so, dass nun drei Spalten definiert werden. Dann wird mit Seite document.createElement() ein neues Element erzeugt, dem mit Seite setAttribute() eine anzuzeigende Datei zugewiesen wird. Anschließend wird der neue Elementknoten mit Seite appendChild() als letztes neues Kindelement in das frameset-Element eingefügt.

Beachten Sie:

Opera und Firefox akzeptieren die Änderung der Breitenverhältnisse, zeigen aber den dritten, eingefügten Frame nicht an. Lediglich der Internet Explorer, Konqueror und Safari zeigen den dritten Frame.

DOM 1.0 JavaScript 1.5 Netscape 7.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari WebKit (Entwicklerversion) h1-h6 (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: h1-h6
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente h1 usw. haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function rechtslinks () {
  for (var i = 0; i < document.getElementsByTagName("h1").length; i++) {
    if (document.getElementsByTagName("h1")[i].align == "left") {
      document.getElementsByTagName("h1")[i].align = "right";
    } else {
      document.getElementsByTagName("h1")[i].align = "left";
    }
  }
}
</script></head><body>
<h1 align="left">Kapitel 1</h1>
<p>viel Text</p>
<h1 align="left">Kapitel 2</h1>
<p>viel Text</p>
<h1 align="left">Kapitel 3</h1>
<p>und ein <a href="javascript:rechtslinks()">Ausrichtungsverweis</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält insgesamt drei Überschriften erster Ordnung. Ganz unten ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Seite Funktion rechtslinks() aufgerufen wird, die im Dateikopf steht. Diese greift in einer Seite for-Schleife der Reihe nach mit document.getElementsByTagName("h1")[i] auf alle h1-Elemente des Dokuments zu. Für jedes dieser Elemente wird abgefragt, ob seine Eigenschaft align den Wert left hat. Wenn ja, wird er auf right gesetzt, wenn nein, wird er wieder auf left gesetzt. Bei jedem Anklicken des Verweises ändern also alle drei Überschriften ihre Ausrichtung.

Beachten Sie:

Das Beispiel ist mit Netscape 6 nicht nachvollziehbar.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.50 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 head (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: head
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

Das HTML-Element <head>...</head> hat als DOM-Objekt für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
profile | Lesen/Ändern | URI für Metadaten-Profil

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head profile="http://dublincore.org/documents/dcq-html/">
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/">
<meta name="DC.language" scheme="DCTERMS.RFC3066" content="de">
</head><body>
<script type="text/javascript">
document.write("Verwendetes Profil: " + document.getElementsByTagName("head")[0].profile);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält im einleitenden <head>-Tag eine profile-Angabe. Innerhalb des Dokuments wird diese Angabe mit document.write() ins Dokument geschrieben. Dabei wird mit document.getElementsByTagName("head")[0] auf das head-Element zugegriffen.

Beachten Sie:

Die Verwendung anderer Universaleigenschaften als dir und lang ist im HTML-4.0-Standard für das head-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die Methode document.getElementById() vermeiden.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 hr (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: hr
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente hr haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung der Trennlinie
noShade | Lesen/Ändern | Trennlinie wird flach und ohne 3D-Effekt dargestellt
size | Lesen/Ändern | Dicke der Trennlinie
width | Lesen/Ändern | Länge der Trennlinie

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Dicke = 3;
function dicker () {
  Dicke += Dicke;
  document.getElementById("Linie").size = Dicke;
}
</script></head><body>
<hr id="Linie" noshade="noshade" size="3" onclick="dicker()">
</body></html>

Erläuterung:

Das Beispiel enthält eine Trennlinie der Dicke 3 (size="3"). Das hr-Element enthält einen Seite Event-Handler onclick. Beim Anklicken der Trennlinie wird die JavaScript- Seite Funktion dicker() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erhöht den Wert der Variablen Dicke um sich selbst und greift dann mit document.getElementById("Linie") auf das hr-Element zu, um dessen Eigenschaft size mit dem neuen Wert von Dicke zu belegen. Die Linie wird also bei jedem Anklicken deutlich dicker.

Beachten Sie:

Safari 1.2 interpretiert nur die Eigenschaften align und size, ab Version 2.0 auch width, Konqueror interpretiert die Eigenschaft size nicht (aber beispielsweise width) und zeigt daher das Beispiel nicht an.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 html (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: html
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

Das HTML-Element <html>...</html> hat als DOM-Objekt für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft | Status | Bedeutung
version | Lesen/Ändern | HTML-Sprachversion

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html version="-//W3C//DTD HTML 4.01 Transitional//EN">
<head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write("Dies ist in HTML " + document.getElementsByTagName("html")[0].version +
               " geschrieben!");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält im einleitenden <html>-Tag eine version-Angabe. Innerhalb des Dokuments wird diese Angabe mit document.write() ins Dokument geschrieben. Dabei wird mit document.getElementsByTagName("html")[0] auf das html-Element zugegriffen.

Beachten Sie:

Die Verwendung anderer Universaleigenschaften als dir und lang ist im HTML-4.0-Standard für das html-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die Methode document.getElementById() vermeiden.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 i (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: i
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente i haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.normal { font-style:normal }
</style>
<script type="text/javascript">
function set_normal () {
  document.getElementById("schief").className = "normal";
}
</script>
</head><body>
<i id="schief">schiefe Aussage!</i><br>
<a href="javascript:set_normal()">gerade machen!</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen mit <i>...</i> formatierten Text, und darunter einen Verweis. Beim Anklicken des Verweises wird die JavaScript- Seite Funktion set_normal() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("schief") auf das i-Element zu und setzt dessen Universaleigenschaft className neu. Die entsprechende Klasse normal ist im Dateikopf in einem Style-Bereich definiert.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 iframe (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: iframe
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente iframe haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung
frameBorder | Lesen/Ändern | Rahmen sichtbar oder nicht sichtbar
height | Lesen/Ändern | Anzeigehöhe
longDesc | Lesen/Ändern | URI für längere Beschreibung zum Inhalt des Frame-Fensters
marginHeight | Lesen/Ändern | Anzahl Pixel für den Abstand des Fensterinhalts zum oberen und unteren Fensterrand
marginWidth | Lesen/Ändern | Anzahl Pixel für den Abstand des Fensterinhalts zum linken und rechten Fensterrand
name | Lesen/Ändern | Name für das Frame-Fenster
scrolling | Lesen/Ändern | Scroll-Leisten oder keine Scroll-Leisten
src | Lesen/Ändern | URI für den Inhalt des Frame-Fensters
width | Lesen/Ändern | Anzeigebreite

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function groesser () {
  document.getElementById("Frame").width = "600";
  document.getElementById("Frame").height = "400";
}
</script></head><body>
<iframe id="Frame" src="frame1.htm" width="400" height="300"></iframe>
<p><a href="javascript:groesser()">Anzeigefenster erweitern</a></p>
</body></html>

Erläuterung:

Das Beispiel definiert einen eingebetteten Frame. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Seite Funktion groesser() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementById("Frame") auf das iframe-Element zu und ändert dessen Eigenschaften width und height. Das eingebettete Frame-Fenster wird dadurch dynamisch vergrößert.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 img (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: img
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente img haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung der Grafik
alt | Lesen/Ändern | Alternativtext
border | Lesen/Ändern | Rahmendicke um Grafik
height | Lesen/Ändern | Anzeigehöhe
hspace | Lesen/Ändern | horizontaler Abstand zwischen Grafik und umfließendem Text
isMap | Lesen/Ändern | Grafik benutzt ein serverseitiges Handling für verweis-sensitive Flächen
longDesc | Lesen/Ändern | URI für Langbeschreibung zur Grafik
lowSrc | Lesen/Ändern | URI einer Vorabgrafik
name | Lesen/Ändern | Name der Grafik
src | Lesen/Ändern | URI der Grafik
useMap | Lesen/Ändern | Verweis zu einem nach unten map-Bereich
vspace | Lesen/Ändern | vertikaler Abstand zwischen Grafik und umfließendem Text
width | Lesen/Ändern | Anzeigebreite

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function neuesBild () {
  if (document.getElementById("Bild").src.indexOf("iso8859_1.gif") > -1) {
    document.getElementById("Bild").src = "../../../inter/iso8859_2.gif";
    document.getElementById("Bild").title = "Bild 2";
    return;
  }
  if (document.getElementById("Bild").src.indexOf("iso8859_2.gif") > -1) {
    document.getElementById("Bild").src = "../../../inter/iso8859_3.gif";
    document.getElementById("Bild").title = "Bild 3";
    return;
  }
  if (document.getElementById("Bild").src.indexOf("iso8859_3.gif") > -1) {
    document.getElementById("Bild").src = "../../../inter/iso8859_1.gif";
    document.getElementById("Bild").title = "Bild 1";
    return;
  }
}
</script></head><body>
<img id="Bild" src="../../../inter/iso8859_1.gif" width="289" height="302" alt="Bild 1" title="Bild 1"><br>
<a href="javascript:neuesBild()">neues Bild</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafikreferenz für eine Ressource namens 8859_1.gif. Unterhalb davon ist ein Verweis notiert. Bei Anklicken des Verweises wird die JavaScript- Seite Funktion neuesBild() aufgerufen, die im Dateikopf notiert ist. Diese Funktion fragt mit document.getElementById("Bild").src.indexOf(...) ab, welches Bild gerade angezeigt wird (siehe auch Seite indexOf). Abhängig davon werden die beiden Eigenschaften src und title mit neuen Werten belegt. Das Beispiel bewirkt, dass bei jedem Anklicken des Verweises ein neues Bild angezeigt wird.

Beachten Sie:

In der Eigenschaft src ist der vollständige URI des Bildes gespeichert, und nicht die eventuell relative Angabe, der bei <img src=> zugewiesen wurde. Deshalb muss der Inhalt von src auch mit einer Zeichenkettenmethode wie indexOf() durchsucht werden, um nach einem Dateinamen zu suchen.

In Netscape 6 sind die Eigenschaften hspace, vspace und border fehlerhaft implementiert.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.10 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 input (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: input
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente input haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft | Status | Bedeutung
accept | Lesen/Ändern | bei type="file" erlaubte MIME-Typen für File-Upload
accessKey | Lesen/Ändern | Hotkey für das Element
align | Lesen/Ändern | Ausrichtung
alt | Lesen/Ändern | Alternativtext bei type="image"
checked | Lesen/Ändern | Auswählen bei bei type="radio" oder type="checkbox"
defaultValue | Lesen/Ändern | vorbelegter Wert
defaultChecked | Lesen/Ändern | per Vorbelegung ausgewählt oder nicht
disabled | Lesen/Ändern | Element kann nicht geändert werden
form | Lesen | zugehöriges Formular
maxLength | Lesen/Ändern | maximale Anzahl eingebbarer Zeichen
name | Lesen/Ändern | Name des Elements
readOnly | Lesen/Ändern | Wert des Elements kann nicht verändert werden
size | Lesen/Ändern | Anzeigebreite bei type="text"
src | Lesen/Ändern | URI der Grafik bei type="image"
tabIndex | Lesen/Ändern | Tabulator-Reihenfolge
type | Lesen | Typ des Formularelements
useMap | Lesen/Ändern | Verweis zu einem nach unten map-Bereich bei type="image"
value | Lesen/Ändern | Wert des Elements
Methode |  | Bedeutung
blur() |  | Fokus vom Element entfernen
focus() |  | Fokus auf Element setzen
select() |  | Wert selektieren
click() |  | Element anklicken

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Breite = 3;
function erweitern () {
  Breite += 1;
  document.getElementsByName("Eingabe")[0].size = Breite;
}
</script></head><body>
<form name="Formular">
Geben Sie Text ein:<br>
<input type="text" size="3" name="Eingabe" onkeypress="erweitern()">
</form>
</body></html>

Erläuterung:

In der Beispieldatei ist ein Formular mit einem zunächst ziemlich kleinen Eingabefeld (size="3") notiert. Das Eingabefeld enthält den Seite Event-Handler onkeypress. Bei jedem Tastendruck, der erfolgt, während das Eingabefeld den Fokus hat, wird darum die JavaScript- Seite Funktion erweitern() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementsByName("Eingabe")[0] auf das erste Element mit dem Namen Eingabe zu, also das Eingabefeld, und ändert dessen Eigenschaft size mit dem aktuellen Wert der Variablen Breite. Diese wird bei jedem Aufruf der Funktion um 1 erhöht. Das Beispiel bewirkt, dass das Eingabefeld um so größer wird, je mehr Text eingegeben wird.

Beachten Sie:

Safari 1.2 und Konqueror akzeptieren zwar Angaben zur Eigenschaft size, verändern aber das Eingabefeld nicht.

DOM 1.0 Netscape 6.1 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 ins (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: ins
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente ins haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
cite | Lesen/Ändern | URI für Gründe des Einfügens
dateTime | Lesen/Ändern | Datum und Uhrzeit des Einfügens

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Text <ins id="hinzugekommen"
onmouseover="document.getElementById('hinzugekommen').title = 'das ist hinzugekommener Text'">
  mit weiterem Text</ins></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Absatz, von dessen Text ein Teil mit <ins>...</ins> ausgezeichnet ist. Beim Überfahren dieses Textes mit der Maus (onmouseover) wird dynamisch die Universaleigenschaft title mit einem Wert belegt. Dazu wird mit document.getElementById('hinzugekommen') auf das ins-Element zugegriffen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Safari 1.0 isindex (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: isindex
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente isindex haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
form | Lesen | zugehöriges Formular
prompt | Lesen/Ändern | Labeltext

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<isindex title="selten angewendetes HTML-Element" id="Eingabe"
  onmouseover="alert(document.getElementById('Eingabe').title)">
</body></html>

Erläuterung:

Das Beispiel enthält ein isindex-Element. Beim Überfahren des Elements mit der Maus wird ein Meldungsfenster ausgegeben, das den Wert des title-Attributs ausgibt, das im Element notiert ist. Dazu wird mit document.getElementById('Eingabe') auf das Element zugegriffen.

Beachten Sie:

Der Seite Event-Handler onmouseover kann zwar auf dieses Element angewendet werden, ist jedoch kein Bestandteil der Standards.

Das vorliegende Beispiel wird vom Internet Explorer 5.0 Macintosh Edition nicht interpretiert.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 6 Mozilla Firefox 1 Safari 1.2 kbd (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: kbd
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente kbd haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Hinweis () {
  document.getElementById("Keyboard").title = "Sie haben es geschafft!";
  alert(document.getElementById("Keyboard").title);
}
</script></head><body onkeypress="Hinweis()">
<kbd id="Keyboard">Taste drücken</kbd>:
</body></html>

Erläuterung:

Das Beispiel enthält eine Aufforderung eine Taste zu drücken, die sinnigerweise <kbd>...</kbd> eingeschlossen ist. Das einleitende <body>-Tag der Datei enthält den Seite Event-Handler onkeypress. Wenn das Dokument den Fokus hat und der Anwender irgendeine Taste drückt, wird die JavaScript- Seite Funktion Hinweis() aufgerufen, die im Dateikopf definiert ist. Diese Funktion greift mit document.getElementById("Keyboard") auf das kbd-Element zu und weist dessen Universaleigenschaft title einen Wert zu. Anschließend wird zur Kontrolle genau diese Universaleigenschaft in einem Meldungsfenster ausgegeben.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 label (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: label
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente label haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
accessKey | Lesen/Ändern | Hotkey für das zugehörige Element
form | Lesen | zugehöriges Formular
htmlFor | Lesen/Ändern | Id des Elements, zu dem das Label gehört

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Formular" action="">
<table>
  <tr>
    <td><label id="VN" for="Vorname">Ihr Vorname:</label></td>
    <td><input type="text" id="Vorname"></td>
  </tr><tr>
    <td><label id="ZN" for="Zuname">Ihr Zuname:</label></td>
    <td><input type="text" id="Zuname"></td>
  </tr>
</table>
</form>
<script type="text/javascript">
document.getElementById("Vorname").value = document.getElementById("VN").htmlFor;
document.getElementById("Zuname").value = document.getElementById("ZN").htmlFor;
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Eingabefeldern. Die Beschriftungen der Eingabefelder sind jeweils mit einem label-Element ausgezeichnet. Unterhalb des Formulars ist ein Script-Bereich notiert. Dort werden die beiden Eingabefelder mit Werten vorbelegt, und zwar mit den Werten, die den id-Attributen der zugehörigen label-Element zugewiesen sind. Dazu wird mit document.getElementById("VN") und document.getElementById("ZN") auf die label-Elemente zugegriffen. Ihre Eigenschaft htmlFor wird den Formularfeldern zugewiesen, auf die ebenfalls mit getElementById() zugegriffen wird.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 legend (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: legend
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente legend haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
accessKey | Lesen/Ändern | Hotkey für das Element
align | Lesen/Ändern | Ausrichtung
form | Lesen | zugehöriges Formular

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Formular" action="">
<fieldset>
<legend id="L1">Absender</legend>
<input type="text" size="50" name="Absendername"
       onfocus="document.getElementById('L1').align = 'right'"
       onblur="document.getElementById('L1').align = 'left'">
</fieldset>
<fieldset>
<legend id="L2">Mitteilung</legend>
<input type="text" size="50" name="Mitteilungstext"
       onfocus="document.getElementById('L2').align = 'right'"
       onblur="document.getElementById('L2').align = 'left'">
</fieldset>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, bei dem für jedes der beiden Eingabefelder ein fieldset-Bereich mitsamt legend-Element definiert ist. Sobald eines der Eingabefelder den Fokus erhält (onfocus), wird der zugehörige Legendentext rechtsbündig ausgerichtet. Sobald das Eingabefeld den Fokus wieder verliert (onblur), wird der Legendentext wieder linksbündig ausgerichtet. Dazu wird mit document.getElementById('L1') bzw. document.getElementById('L2') auf die legend-Elemente zugegriffen. Neu gesetzt wird jeweils ihre Eigenschaft align.

Beachten Sie:

Im Netscape 6 erfolgt die Ausrichtung ausgehend vom rechten Rand des Eingabefeldes. Internet Explorer 5.0 und Opera interpretieren dieses Beispiel nicht. Safari 1.2 interpretiert von den eigenen Eigenschaften nur form. Konqueror 3.1 interpretiert das Beispiel vollständig, Konqueror 3.3 und 3.4 tun dies nicht mehr.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 li (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: li
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente li haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
type | Lesen/Ändern | Aufzählungszeichen oder der Nummerierungstyp
value | Lesen/Ändern | Wert der laufenden Nummerierung neu setzen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.hinterlegt { background-color:yellow }
</style>
<script type="text/javascript">
function Aendern () {
  for (var i = 0; i < document.getElementsByTagName("li").length; i++)
    if (i % 2 != 0) {
      document.getElementsByTagName("li")[i].className = "hinterlegt";
      document.getElementsByTagName("li")[i].type = "I";
    }
}
</script>
</head><body>
<ol>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
</ol>
<a href="javascript:Aendern()">gerade Listenpunkte hinterlegen!</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine nummerierte Liste mit einigen Listenpunkten. Unterhalb davon ist ein Verweis notiert. Bei Anklicken des Verweises wird die JavaScript- Seite Funktion Aendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion geht in einer Seite for-Schleife der Reihe nach alle li-Elemente durch, wobei sie mit document.getElementsByTagName("li") darauf zugreift. Bei geraden Listenpunkten werden zwei Änderungen durchgeführt: erstens erhalten diese Listenpunkte eine oben im Style-Bereich definierte CSS-Klasse zugewiesen, die dem Element eine andere Hintergrundfarbe zuweist, und zweitens wird der Nummerierungstyp dieser Listenpunkte auf "römisch großgeschrieben" gesetzt.

DOM 1.0 Netscape 6.2 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 link (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: link
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente link haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
charset | Lesen/Ändern | Zeichenkodierung des Verweisziels
disabled | Lesen/Ändern | als Button anklickbar oder nicht
href | Lesen/Ändern | Verweisziel
hreflang | Lesen/Ändern | Landessprache des Verweisziels
media | Lesen/Ändern | Ausgabemedium
rel | Lesen/Ändern | Verweisziel als "Vorwärtsverknüpfung"
rev | Lesen/Ändern | Verweisziel als "Rückwärtsverknüpfung"
target | Lesen/Ändern | Fensternamen des Verweisziels
type | Lesen/Ändern | MIME-Typ des Verweisziels

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<link id="CSS" rel="stylesheet" href="styles_1.css">
<script type="text/javascript">
function CSS_Wechsel () {
  document.getElementById("CSS").href = "styles_2.css";
}
</script>
</head><body>
<h1>Dies und das</h1>
<a href="javascript:CSS_Wechsel()">anderes Stylesheet!</a>
</body></html>

Erläuterung:

Das Beispiel enthält im Dateikopf ein HTML-Tag zum Einbinden eines Stylesheets. Innerhalb des sichtbaren Dokumentbereichs ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Seite Funktion CSS_Wechsel() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("CSS") auf das link-Element zu, das die CSS-Datei einbindet, und weist der Eigenschaft href einen neuen Wert zu, nämlich die neue CSS-Datei. Dadurch wird die neue CSS-Datei relevant für alle Formatierungen innerhalb der HTML-Datei.

Beachten Sie:

Mit Netscape vor Version 6.2 und dem Internet Explorer 5.0 Macintosh Edition war dieses Beispiel nicht nachvollziehbar.

DOM 1.0 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 map (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: map
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente map haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
areas | Lesen/Ändern | Array der nach oben area-Definitionen
name | Lesen/Ändern | Ankername des Definitionsbereichs

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function zeigCoords () {
  alert(document.getElementsByName("Testbild")[0].areas[0].coords);
}
</script>
</head><body>
<map name="Testbild">
<area id="Verweis" shape="rect" coords="1,1,249,49"
      href="javascript:zeigCoords()" alt="Verweis">
</map>
<img src="hypgraf.gif" width="400" height="400" usemap="#Testbild" alt="verweis-sensitive Grafik">
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik, die auf einen ebenfalls enthaltenen verweis-sensitiven Bereich verweist. Dort wird ein verweis-sensitives Rechteck für die Grafik definiert. Beim Anklicken dieses Bereichs wird die JavaScript- Seite Funktion zeigCoords() aufgerufen, die im Dateikopf notiert ist. Die Funktion gibt die Koordinaten des verweis-sensitiven Bereichs aus, indem sie mit document.getElementsByName("Testbild")[0].areas[0].coords auf den areas-Array des map-Elements zugreift und die Eigenschaft coords von dessem ersten Element anspricht.

DOM 1.0 menu (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: menu
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente menu haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
compact | Lesen/Ändern | Darstellung in enger Schrift

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function zeigKompakt () {
  document.getElementsByTagName("menu")[0].compact = true;
}
</script>
</head><body>
<menu onmouseover="zeigKompakt()">
<li>Datei</li>
<li>Bearbeiten</li>
<li>Ansicht</li>
<li>Format</li>
</menu>
</body></html>

Erläuterung:

Das Beispiel enthält eine Menüliste. Beim Überfahren der Liste mit der Maus (onmouseover) wird die JavaScript- Seite Funktion zeigKompakt() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementsByTagName("menu")[0] auf das erste menu-Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true ("wahr"). Dadurch wird die gesamte Liste in kompakter Schrift dargestellt.

Beachten Sie:

Weder Netscape, Internet Explorer, Mozilla Firefox, Opera, Konqueror noch Safari interpretieren das HTML-Attribut compact.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 meta (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: meta
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente meta haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
content | Lesen/Ändern | Wert/Inhalt der Meta-Angabe
httpEquiv | Lesen/Ändern | Eigenschaft für Meta-Informationen (für HTTP-Kopfdaten)
name | Lesen/Ändern | Eigenschaft für Meta-Informationen
scheme | Lesen/Ändern | Schema für den Wert der Eigenschaft

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="keywords" content="Metaliste, JavaScript, Anzeige">
<meta name="irgendein Name" content="Irgendein Inhalt">
<title>Test</title>
<script type="text/javascript">
function Metaliste () {
  var metas = document.getElementsByTagName("meta");
  var liste, i;
  liste = "Diese Datei hat " + metas.length + " Meta-Tags:\n";
  for (i = 0; i < metas.length; i++) {
    liste = liste + "Name: " + metas[i].name + " httpEquiv: " + metas[i].httpEquiv +
      " Inhalt: " + metas[i].content + " Schema: " + metas[i].scheme + "\n";
  }
  alert(liste);
}
</script>
</head><body>
<p><a href="javascript:Metaliste()">Liste der Meta-Tags anzeigen</a></p>
</body>
</html>

Erläuterung:

Das Beispiel enthält drei Meta-Elemente. Die JavaScript- Seite Funktion Metaliste() fragt mittels document.getElementsByTagName("meta") alle Meta-Elemente ab und speichert für den leichteren und schnelleren Zugriff das Array aller Elemente in der Variablen metas. In der Variablen liste wird dann der auszugebende Text zusammengesetzt.

DOM 1.0 Opera 5.12 noframes (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: noframes
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente noframes haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head>
<frameset cols="50%,50%">
  <frame id="F1" src="frame1.htm">
  <frame id="F2" src="frame2.htm">
  <noframes title="Das ist aber ein doofer Browser!">
  <body>
    <p>Alternativ-Inhalt (Zusammenfassung, Sitemap ...)</p>
    <a href="javascript:alert(document.getElementsByTagName('noframes')[0].title)">weitere Infos</a>
  </body>
  </noframes>
</frameset>
</html>

Erläuterung:

Das Beispiel enthält eine Frameset-Definition und einen alternativen noframes-Bereich. Innerhalb davon ist ein Verweis notiert, bei dessen Anklicken der Wert der Universaleigenschaft title des einleitenden <noframes>-Tags in einem Meldungsfenster ausgegeben wird.

Beachten Sie:

Leider ist dieses Beispiel mit den gängigen Browsern nicht nachvollziehbar, da diese Frames unterstützen und auch kein Abschalten von Frames ermöglichen. Eine Ausnahme bildet hier Opera, der ein Abschalten von Frames zulässt und das Beispiel auch interpretiert.

DOM 1.0 Opera 5.12 noscript (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: noscript
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente noscript haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
 </head><body>
<script type="text/tcl">
 proc square {i} {
    document write "The call passed $i to the function.<BR>"
    return [expr $i * $i]
  }
  document write "The function returned [square 5]."
</script>
<noscript id="tcl" title="Ich verstehe kein tcl.">
 <p onmouseover="alert(document.getElementById('tcl').title)">Ein Browser der kein tcl kann.</p>
 </noscript>
</body></html>

Erläuterung:

Im Beispiel wurde ein Script-Bereich in der Sprache tcl dargestellt. Browser, die diese Sprache nicht interpretieren, interpretieren den zugehörigen noscript-Bereich und zeigen den alternativen Text an. Da es sich um eine andere Sprache als JavaScript handelt, können Sie auf das Script-Element mit JavaScript zugreifen. Wenn die Maus über den Absatz bewegt wird, wird der Titel des noscript-Elementes angezeigt.

Beachten Sie:

Der Internet Explorer, Netscape und Konqueror zeigen das noscript-Element im Beispiel nur bei ausgeschaltetem JavaScript an.

DOM 1.0 JavaScript 1.5 Netscape 6.2 MS IE 5.5 Opera 7.60 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 object (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: object
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente object haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung des Objekts
archive | Lesen/Ändern | kommaseparierte Liste mit Archivdateien für das Objekt
border | Lesen/Ändern | Rahmendicke um Objekt
code | Lesen/Ändern | Klassendatei bei Java-Applets
codeBase | Lesen/Ändern | Basis-URI für Angaben zu data und archive
codeType | Lesen/Ändern | MIME-Typ der Datenquelle
data | Lesen/Ändern | URI der Datenquelle
declare | Lesen/Ändern | Objekt wird geladen, aber nicht initialisiert
form | Lesen | zugehöriges Formularelement
height | Lesen/Ändern | Anzeigehöhe
hspace | Lesen/Ändern | horizontaler Abstand zwischen Objekt und umfließendem Text
name | Lesen/Ändern | Name der Grafik
standBy | Lesen/Ändern | Meldungstext, der angezeigt wird, während das Objekt geladen wird
tabIndex | Lesen/Ändern | Tabulator-Reihenfolge für Objekte
type | Lesen/Ändern | MIME-Typ der Datenquelle
useMap | Lesen/Ändern | Verweis zu einem nach unten map-Bereich
vspace | Lesen/Ändern | vertikaler Abstand zwischen Objekt und umfließendem Text
width | Lesen/Ändern | Anzeigebreite

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function groesser () {
  document.getElementById("TXT").width = "640";
  document.getElementById("TXT").height = "480";
}
</script>
</head><body>
<p><object id="TXT" data="html.txt" type="text/plain" width="320" height="240"></object></p>
<p><a href="javascript:groesser()">mehr sehen!</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält die Objektdefinition einer TXT-Datei. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Seite Funktion groesser() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementById("TXT") auf das object-Element zu und ändert dessen Eigenschaften für width und height. Das Objekt wird dadurch dynamisch vergrößert.

Beachten Sie:

In Netscape bis Version 6.1 ist dieses Beispiel nicht nachvollziehbar, Opera beherrscht es ab Version 7.60.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 ol (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: ol
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente ol haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
compact | Lesen/Ändern | Darstellung in enger Schrift
start | Lesen/Ändern | Startwert für die Nummerierung
type | Lesen/Ändern | Art der Nummerierung

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function roemisch () {
  document.getElementById("Liste").type = "I";
}

function normal () {
  document.getElementById("Liste").type = "1";
}
</script>
</head><body>
<ol id="Liste">
<li>eins</li>
<li>zwei</li>
<li>drei</li>
<li>vier</li>
<li>fünf</li>
</ol>
<a href="javascript:roemisch()">römisch</a><br>
<a href="javascript:normal()">normal</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine nummerierte Liste. Unterhalb davon sind zwei Verweise notiert. Der eine ruft eine JavaScript- Seite Funktion roemisch() auf, der andere eine Funktion normal(). Beide Funktionen greifen jeweils mit document.getElementById("Liste") auf das Start-Tag der nummerierten Liste zu und ändern dessen Eigenschaft type. Im einen Fall wird die Nummerierung dynamisch durch römische Ziffern ersetzt, im andern Fall werden wieder arabische Ziffern benutzt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 optgroup (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: optgroup
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente optgroup haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
disabled | Lesen/Ändern | Gruppe von Einträgen kann nicht ausgewählt werden
label | Lesen/Ändern | Text des Gruppeneintrags

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Auswahl" action="">
<select name="Namen" size="1" onchange="alert(document.getElementById('A').label)">
 <optgroup label="Namen mit A" id="A">
  <option label="Anna"> Anna</option>
  <option label="Anke"> Anke</option>
 </optgroup>
</select>
</form>
</body></html>

Erläuterung:

Das Beispiel definiert eine Menüstrutkur. Sobald ein Eintrag ausgewählt ist (onchange), wird in einem Meldungsfenster der Wert der Eigenschaft label des optgroup-Elements mit dem id-Wert A ausgegeben.

Beachten Sie:

Weder Netscape noch Internet Explorer interpretieren Menüstrukturen bis auf den heutigen Tag korrekt - Netscape 6 zwar ansatzweise, aber noch nicht so wie es gedacht ist. Dennoch interpretieren beide Browser das obige JavaScript. Safari 1.0 verhält sich ebenso, Safari 1.2 interpretiert die Eigenschaft disabled nicht.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 option (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: option
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente option haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
defaultSelected | Lesen/Ändern | vorausgewählter Auswahllisteneintrag
disabled | Lesen/Ändern | Auswahllisteneintrag kann nicht ausgewählt werden
form | Lesen | zugehöriges Formular
index | Lesen | Indexnummer des Auswahllisteneintrags (erster Eintrag hat Nummer 0, zweiter Nummer 1 usw.)
label | Lesen/Ändern | Text des Eintrags im Zusammenhang mit Menüstrukturen
selected | Lesen/Ändern | Auswahllisteneintrag wird ausgewählt
text | Lesen/Ändern | Text des Auswahllisteneintrags
value | Lesen/Ändern | Absendewert des Auswahllisteneintrags

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Auswahl" action="">
<select name="Zutaten" size="1">
  <option value="Z_101">Salami</option>
  <option value="Z_102">Pilze</option>
  <option value="Z_103">Schinken</option>
  <option value="Z_104">Oliven</option>
  <option value="Z_105">Paprika</option>
</select>
</form>
<script type="text/javascript">
document.write("<table border=\"1\">");

for (i = 0; i < document.getElementsByTagName("option").length; i++) {
  document.write("<tr><td><b>Zutat:<\/b><\/td><td>");
  document.write(document.getElementsByTagName("option")[i].text);
  document.write("<\/td><td><b>interner Absendewert:<\/b><\/td><td>");
  document.write(document.getElementsByTagName("option")[i].value);
  document.write("<\/td><\/tr>");
}

document.write("<\/table>");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. Unterhalb davon ist ein Script notiert, das dynamisch eine Tabelle ins Dokument schreibt. Dazu geht es in einer Seite for-Schleife der Reihe nach alle option-Elemente durch und greift mit document.getElementsByTagName("option") auf die einzelnen option-Elemente zu. Für jedes Element werden der interne Absendewert (value) und der Auswahltext (text) in die Tabelle geschrieben.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 p (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: p
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente p haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Ausrichten (wie) {
  for (var i = 0; i < document.getElementsByTagName("p").length; i++) {
    document.getElementsByTagName("p")[i].align = wie;
  }
}
</script>
</head><body>
<p>Der erste</p>
<p>Der zweite</p>
<p>Der dritte</p>
<form name="Formular" action="">
<input type="button" value="links" onclick="Ausrichten('left')">
<input type="button" value="zentriert" onclick="Ausrichten('center')">
<input type="button" value="rechts" onclick="Ausrichten('right')">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält drei Textabsätze. Unterhalb davon ist ein Formular mit drei Klick-Buttons notiert. Jeder Button ruft beim Anklicken die JavaScript- Seite Funktion Ausrichten() auf, die im Dateikopf notiert ist, und übergibt ihr einen Wunschwert für die Ausrichtung (left, center und right). Die Funktion Ausrichten() geht in einer Seite for-Schleife mit document.getElementsByTagName("p") der Reihe nach alle p-Elemente des Dokuments durch und weist ihren Eigenschaften align den übergebenen Parameter für die Ausrichtung zu. Dadurch bewirkt der Klick auf einen der Buttons die dynamische Ausrichtung aller Textabsätze.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 param (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: param
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente param haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
name | Lesen/Ändern | Name des Parameters
type | Lesen/Ändern | MIME-Typ des Wertes
value | Lesen/Ändern | Initialisierungswert für den Parameter
valueType | Lesen/Ändern | Informationen zum Attribut type

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<applet id="Ticker" code="zticker.class" width="600" height="60">
 <param name="msg" value="Die Energie des Verstehens">
 <param name="speed" value="5">
 <param name="bgco" value="255,255,255">
 <param name="txtco" value="000,000,255">
 <param name="hrefco" value="255,255,255">
</applet>
<script type="text/javascript">
document.write("<table>");
for (var i = 0; i < document.getElementsByTagName("param").length; i++) {
  document.write("<tr><td><b>Parameter:<\/b><\/td><td>");
  document.write(document.getElementsByTagName("param")[i].name);
  document.write("<\/td><td><b>Wert:<\/b><\/td><td>");
  document.write(document.getElementsByTagName("param")[i].value);
  document.write("<\/td><\/tr>");
}

document.write("<\/table>");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Java-Applet mit verschiedenen Parametern. Unterhalb davon ist ein Script notiert, das dynamisch eine Tabelle ins Dokument schreibt. Dazu geht es in einer Seite for-Schleife der Reihe nach alle param-Elemente durch und greift mit document.getElementsByTagName("param") auf die einzelnen param-Elemente zu. Für jedes Element werden der Parametername (name) und der zugehörige Wert (value) in die Tabelle geschrieben.

Beachten Sie:

Im Internet Explorer bis Version 5.5 lässt sich dieses Beispiel merkwürdigerweise nur nachvollziehen, wenn sich die param-Elemente nicht innerhalb eines gültigen Elternelementes befinden. Das vorliegende Beispiel wird vom Internet Explorer 5.0 Macintosh Edition korrekt interpretiert.

DOM 1.0 pre (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: pre
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente pre haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
width | Lesen/Ändern | feste Breite für Inhalt

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Breite () {
  document.getElementById("x").width = "15";
}
</script>
</head><body>
<pre id="x">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</pre>
<a href="javascript:Breite()">Breite auf 15 setzen</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen pre-Bereich mit 30 x-Zeichen pro Zeile. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript- Seite Funktion Breite() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("x") auf das pre-Element zu und weist ihm für die Eigenschaft width den Wert 15 zu.

Beachten Sie:

Keiner der getesteten Browser interpretierte das Attribut width im Zusammenhang mit pre-Elementen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 q (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: q
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente q haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigene Eigenschaft.

Eigenschaft | Status | Bedeutung
cite | Lesen/Ändern | URI für die Quelle des Zitats

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Wie sagte Goethe doch?
<q id="Faustzitat" cite="http://gutenberg.spiegel.de/goethe/faust1/faust005.htm"
onmouseover="alert(document.getElementById('Faustzitat').cite)">
Habe nun, ach! Philosophie, / Juristerei und Medizin, /
Und leider auch Theologie / Durchaus studiert, mit heißem Bem&uuml;hn. /
Da steh' ich nun, ich armer Tor, / Und bin so klug als wie zuvor!</q></p>
</body></html>

Erläuterung:

Das Beispiel enthält ein Zitat, in dessen einleitendem Tag ein Seite Event-Handler onmouseover notiert ist. Beim Überfahren mit der Maus wird ein Meldungsfenster ausgegeben, das den Wert des Attributs cite ausgibt. Dazu wird mit document.getElementById('Faustzitat').cite auf die entsprechende Elementeigenschaft zugegriffen.

Beachten Sie:

Netscape 6, Opera, Konqueror, Internet Explorer 5.0 Macintosh Edition und Safari schließen das Zitat in "..." ein. Opera bis Version 6 interpretiert zwar den Event-Handler, gibt aber als Eigenschaft des Attributes cite den Wert undefined zurück.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 s (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: s
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente s haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.rot { color:red }
</style>
<script type="text/javascript">
function deutlicher () {
  document.getElementById("schweinisch").className = "rot";
}
</script>
</head><body>
<h1><s id="schweinisch">Es tut so gut ein Schwein zu sein</s></h1>
<a href="javascript:deutlicher()">deutlicher!</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Überschrift mit durchgestrichenem Text. Unterhalb davon steht ein Verweis, bei dessen Anklicken die JavaScript- Seite Funktion deutlicher() aufgerufen wird. Mit document.getElementById("schweinisch") greift diese Funktion auf das s-Element zu und weist ihm für die Universaleigenschaft className den Klassennamen rot zu, für den im Dateikopf in einem Style-Bereich CSS-Definitionen exisiteren. Der durchgestrichene Text wird dadurch rot.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 samp (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: samp
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente samp haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Ich sage zum Beispiel immer <samp id="zumbeispiel"
onmouseover="alert(document.getElementById('zumbeispiel').id)">zum
Beispiel</samp></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen mit <samp>...</samp> ausgezeichneten Text. Im Einleitungs-Tag ist der Seite Event-Handler onmouseover notiert. Beim Überfahren des Textes mit der Maus wird in einem Meldungsfenster der ID-Wert des Elements ausgegeben. Dazu wird mit document.getElementById('zumbeispiel').id auf die entsprechende Eigenschaft zugegriffen.

DOM 1.0 MS IE 5.5 Opera 7.60 script (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: script
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente script haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
charset | Lesen/Ändern | Zeichenkodierung der bei src angegebenen Scriptdatei
defer | Lesen/Ändern | Script kann keine Inhalte im Dokumentfenster ändern oder erzeugen
event | Lesen/Ändern | Ereignis für Scriptausführung
htmlFor | Lesen/Ändern | Element, für das das Script ausgeführt wird
src | Lesen/Ändern | URI einer Scriptdatei
text | Lesen/Ändern | Inhalt des Scripts
type | Lesen/Ändern | MIME-Typ der Script-Sprache

Beispiel: JavaScript-Datei hallo_deutsch.js

function hallo () {
  alert("Hallo Welt");
}

Beispiel: JavaScript-Datei hallo_englisch.js

function hallo () {
  alert("hello world");
}

Beispiel: HTML-Datei

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script src="hallo_deutsch.js" type="text/javascript">
</script>
<script type="text/javascript">
function englisch () {
  if (document.getElementsByTagName("script")[0].src.indexOf("hallo_englisch.js" ==  -1) {
    document.getElementsByTagName("script")[0].src = "hallo_englisch.js";
  }
  hallo();
}

function deutsch () {
  if (document.getElementsByTagName("script")[0].src.indexOf("hallo_deutsch.js") == -1) {
    document.getElementsByTagName("script")[0].src = "hallo_deutsch.js";
  }
  hallo();
}
</script>
</head><body>
<a href="javascript:englisch()">englisches Hallo-Welt</a><br>
<a href="javascript:deutsch()">deutsches Hallo-Welt</a>
</body></html>

Erläuterung:

Für dieses Beispiel wurden zwei externe JavaScript-Dateien definiert. Beide Dateien enthalten die gleich Funktion Hallo(). Sie unterscheiden sich jedoch darin, dass in der Datei hallo_deutsch.js die Ausgabe in Deutsch erfolgt und in der Datei hallo_englisch.js in Englisch.

Im Beispiel gibt es zwei Script-Bereiche. Im ersten Bereich wird unter Verwendung der src-Eigenschaft das externes JavaScript hallo_deutsch.js geladen. Im zweiten Bereich sind die Funktionen englisch() und deutsch() notiert. Der Verweis englisches Hallo-Welt ruft die Funktion englisch() auf. Innerhalb der Funktion wird geprüft, ob dem ersten script-Element die Datei hallo_englisch.js als src-Eigenschaft zugewiesen ist. Ist dies nicht der Fall, so erhält dieses Element die Datei hallo_englisch.js zugewiesen und die Datei wird geladen. Die Funktion hallo() gibt jetzt die englische Meldung aus. Wird umgekehrt auf den Verweis deutsches Hallo-Welt geklickt, so wird geprüft, ob die Datei hallo_deutsch.js zugewiesen wurde und die Eigenschaft gegebenenfalls geändert. Die Ausgabe erfolgt dann in deutscher Sprache.

Beachten Sie:

Opera bis Version 7.54, Netscape, Mozilla Firefox, Konqueror und Safari 1.2 interpretieren die neu zugewiesene Datei nicht.

Die Verwendung von Universaleigenschaften ist im HTML-4.0-Standard für das script-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die Methode document.getElementById() vermeiden.

Der Internet Explorer 5.0 Macintosh Edition reagiert mit einer Fehlermeldung bei der Verwendung dieses Beispieles, da er auf dieses Element offenbar nicht mit document.getElementsByTagName() zugreifen kann.

Opera 5.12 interpretiert das Attribut type nicht. Möchten Sie zum Beispiel einen Script-Bereich in VBScript einfügen, so ist hier das missbilligte language-Attribut zur Sprachangabe zwingend erforderlich, da der Browser sonst Fehlermeldungen erzeugt, da er als Default-Sprache JavaScript verwendet.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 select (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: select
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente select haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft | Status | Bedeutung
disabled | Lesen/Ändern | Auswahlliste kann nicht benutzt werden
form | Lesen | zugehöriges Formularelement
length | Lesen | Anzahl der option-Elemente
multiple | Lesen/Ändern | Mehrfachauswahl setzen oder nicht setzen
name | Lesen/Ändern | Name der Auswahlliste
options | Lesen | Array der option-Elemente der Auswahlliste
selectedIndex | Lesen/Ändern | Index des ausgewählten Eintrags
size | Lesen/Ändern | Anzahl der sichtbaren Einträge
tabIndex | Lesen/Ändern | Tabulatorenreihenfolge
type | Lesen | Typ der Auswahlliste: entweder select-multiple oder select-one
value | Lesen/Ändern | Aktueller Auswahlwert
Methode |  | Bedeutung
add() |  | Eintrag zur Auswahlliste hinzufügen
blur() |  | Fokus aus der Auswahlliste entfernen
focus() |  | Fokus auf die Auswahlliste setzen
remove() |  | Eintrag aus der Auswahlliste löschen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Wert = 1;
function hinzu () {
  var Auswahlliste = document.getElementsByName("Auswahl")[0];
  var Eintrag = document.createElement("option");
  Eintrag.text = document.getElementsByName("Eingabe")[0].value;
  Eintrag.value = Wert;
  var FolgendeOption = null;
  if (document.all)
    FolgendeOption = Auswahlliste.length;
  Auswahlliste.add(Eintrag, FolgendeOption);
  Wert += 1;
}
</script>
</head><body>
<form name="Formular" action="">
<select name="Auswahl" size="10">
<option value="0">Liste</option>
</select><br>
Eintrag: <input type="text" name="Eingabe" size="30">
<input type="button" value="hinzufügen" onclick="hinzu()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste, einem Eingabefeld und einem Klick-Button. Klickt der Anwender auf den Button, wird der im Eingabefeld eingegebene Wert dynamisch der Auswahlliste als Eintrag hinzugefügt. Dazu wird die JavaScript- Seite Funktion hinzu() aufgerufen, die im Dateikopf notiert ist.

Die Methode add() erwartet als ersten Parameter ein option-Elementobjekt als neuen Listeneintrag und als zweiten Parameter das option-Elementobjekt, vor dem der neue Eintrag eingefügt werden soll. Der zweite Parameter kann auch den Wert null, wenn der Eintrag an das Ende der Auswahlliste angehängt werden soll.

Zunächst muss also mit mit Seite document.createElement() ein neues option-Element erzeugt werden. Das Element wird in der Variablen Eintrag gespeichert. Seinen sichtbaren Text bekommt es mit Eintrag.text zugewiesen. Dabei wird mit document.getElementsByName("Eingabe")[0].value auf den Wert des Eingabefeldes zugegriffen. Auch einen Absendewert value erhält der Eintrag. Dazu wird die Variable Wert verwendet, die den Startwert 1 besitzt.

Anschließend wird der Wert null in der Variable FolgendeOption gespeichert, dies wird später der zweite Parameter der Funktion add(). Allerdings setzt der Internet Explorer den DOM-Standard falsch um, sodass er kein Elementobjekt oder null als zweiten Parameter erwartet, sondern die Indexnummer, die der neue Eintrag in der Liste haben soll. (Der zweite Parameter kann im Internet Explorer auch weggelassen werden.) Daher ist eine "Browserweiche" notwendig, um den Internet Explorer von den Browsern zu unterscheiden, die dem DOM-Standard folgen. Über die Seite Abfrage der Existenz des Objekts Seite document.all wird grob in Erfahrung gebracht, ob der Browser des Anwenders dem Internet Explorer ähnelt. Wenn dies der Fall ist, wird die Variable FolgendeOption mit der Anzahl der vorhandenen Einträge überschrieben. Auf diese Weise steht der neue Eintrag auf jeden Fall am Ende der Auswahlliste. (Hinweis: Opera und Konqueror kennen das Objekt document.all ebenfalls, haben aber keine Probleme mit der Korrektur.)

Schließlich wird die Methode add() mit den vorbereiteten Variablen aufgerufen. Am Ende der Funktion wird noch die Variable Wert um 1 erhöht wird, sodass jeder neue Eintrag eine höhere Nummer als Absendewert erhält.

Beachten Sie:

Die Methode add() ist von der Bedienung identisch zur allgemeinen Methode Seite insertBefore(). Die Methode remove() erwartet als ersten Parameter die Indexnummer des zu entfernenen Eintrags.

Schon lange vor dem HTML-spezifischen DOM definierte Netscapes JavaScript eine Methode, Auswahllisten-Einträge hinzuzufügen oder zu löschen: Seite Neue Elemente in Auswahlliste einfügen und Seite Elemente aus Auswahlliste löschen. Diese Methode wird zuverlässiger von den Browsern unterstützt als die Objektmethoden add() und remove().

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 small (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: small
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente small haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.mini { font-family:Small Fonts; font-size:50% }
</style>
<script type="text/javascript">
function ganzklein () {
  document.getElementsByTagName("small")[0].className = "mini";
}
</script>
</head><body>
<small onclick="ganzklein()">winzigweich!</small>
</body></html>

Erläuterung:

Das Beispiel enthält einen Text, der mit <small>...</small> ausgezeichnet ist. Beim Anklicken des Textes (onclick) wird die JavaScript- Seite Funktion ganzklein() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("small")[0] auf das erste small-Element im Dokument zu und weist ihm die className-Eigenschaft mit dem Wert mini zu. Dahinter verbirgt sich die CSS-Klasse, die im Dateikopf im Style-Bereich definiert ist.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 span (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: span
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente span haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
#diesesFormat { font-family:Arial; font-size:1.5em }
#anderesFormat { font-family:Algerian; font-size:2.5em }
</style>
<script type="text/javascript">
function aendern () {
  document.getElementById("diesesFormat").id = "anderesFormat";
}
</script>
</head><body>
<span id="diesesFormat" onclick="aendern()">Das individuelle Format</span>
</body></html>

Erläuterung:

Das Beispiel enthält einen Text, der mit <span>...</span> ausgezeichnet ist. Das span-Element enthält außerdem eine CSS-Bindung, da es die id mit dem Wert diesesFormat hat, für das im Dateikopf ein individuelles Format definiert ist. Beim Anklicken des span-Textes (onclick) wird die JavaScript- Seite Funktion aendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("diesesFormat") auf das span-Element zu und weist ihm für die id-Eigenschaft den neuen Wert anderesFormat zu. Auch für diesen ID-Wert ist im Style-Bereich eine CSS-Definition notiert. Das Beispiel bewirkt also ein einmaliges dynamisches Austauschen der CSS-Eigenschaften beim span-Element.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 strike (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: strike
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente strike haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<strike id="strike" onmouseover="alert(document.getElementById('strike').title)" title="NICHT, weil es 'deprecated' ist">Benutzen Sie dieses Element!</strike>
</body></html>

Erläuterung:

Das Beispiel enthält einen Text, der mit <strike>...</strike> ausgezeichnet ist. Im einleitenden Tag ist der Seite Event-Handler onmouseover notiert. Beim Überfahren des durchgestrichenen Textes mit der Maus wird eine Meldung ausgegeben, und zwar der Text, der beim Element im title-Attribut notiert ist. Dazu wird mit document.getElementById('strike').title auf das Element zugegriffen. Der id-Name strike lautet nur zufällig genauso wie der Elementname, um zu demonstrieren, dass dies durchaus erlaubt ist.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 strong (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: strong
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente strong haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
.normal { font-size:160%; color:blue; }
.extra { font-size:160%; color:red; background-color:yellow; }
</style>
<script type="text/javascript">
function wechseln () {
  if (document.getElementById("stark").className == "normal") {
    document.getElementById("stark").className = "extra";
  } else {
    document.getElementById("stark").className = "normal";
  }
}
</script>
</head><body>
<p><strong id="stark" class="normal" onmouseover="wechseln()" onmouseout="wechseln()">ganz stark!</strong></p>
</body></html>

Erläuterung:

Das Beispiel enthält Text, der mit <strong>...</strong> ausgezeichnet ist. Das einleitende Tag enthält eine CSS-Klassenangabe, eine eindeutige Id-Angabe und die Seite Event-Handler onmouseover und onmouseout, die jeweils die JavaScript- Seite Funktion wechseln() aufgerufen, die im Dateikopf notiert ist. Diese Funktion fragt ab, ob der zugewiesene Klassenname normal lautet. Wenn ja, wird er auf extra geändert, wenn nein, wird er auf normal geändert. Dadurch ergibt sich der Effekt, dass sich beim Überfahren des Textes mit der Maus die CSS-Eigenschaften dynamisch ändern.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Safari 1.2 style (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: style
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente style haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
disabled | Lesen/Ändern | Stylesheet verwenden oder nicht verwenden
media | Lesen/Ändern | Ausgabemedium für das Stylesheet
type | Lesen/Ändern | MIME-Typ der Stylesheet-Sprache

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
h1 { font-size:2.5em; color:red; }
</style>
<script type="text/javascript">
function ohneCSS () {
  document.getElementsByTagName("style")[0].disabled = true;
}
</script>
</head><body>
<h1>Mit CSS!</h1>
<a href="javascript:ohneCSS()"><b>ohne CSS!</b></a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Überschrift und einen Verweis. Beim Anklicken des Verweises wird die JavaScript- Seite Funktion ohneCSS() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementsByTagName("style")[0] auf das erste style-Element zu und setzt dessen Eigenschaft disabled auf den booleschen Wert true ("wahr"). Dadurch werden alle in dem Style-Bereich definierten Formate für das Dokument ungültig. Die Überschrift verliert dynamisch ihre CSS-Eigenschaften.

Beachten Sie:

Safari 1.2 gewährt lesenden und schreibenden Zugriff auf die Eigenschaften, interpretiert Änderungen aber nicht.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 sub (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: sub
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente sub haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.getElementsByTagName('sub')[0].title)">Tief</a> und
  <sub title="ganz tief">tiefer</sub>
</body></html>

Erläuterung:

Das Beispiel enthält ein Wort, das mit <sub>...</sub> ausgezeichnet ist, und einen Verweis. Beim Anklicken des Verweises wird in einem Meldungsfenster der Wert des title-Attributs aus dem sub-Element ausgegeben. Dazu wird mit document.getElementsByTagName('sub')[0] auf das erste sub-Element der Datei zugegriffen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 sup (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: sup
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente sup haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Vertauschen () {
  var swap = document.getElementById("Basis").firstChild.nodeValue;
  document.getElementById("Basis").firstChild.nodeValue =
    document.getElementById("Exponent").firstChild.nodeValue;
  document.getElementById("Exponent").firstChild.nodeValue = swap;
}
</script>
</head><body><span style="font-size:200%">
<a id="Basis" href="javascript:Vertauschen()">x</a><sup id="Exponent">y</sup>
</span></body></html>

Erläuterung:

Das Beispiel stellt einen Text "x hoch y" dar. Das "x" ist dabei in einen Verweis eingeschlossen, bei dessen Anklicken die JavaScript- Seite Funktion Vertauschen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift sowohl auf das Verweis-Element (document.getElementById("Basis")) als auch auf das sup-Element (document.getElementById("Exponent")) zu und vertauscht deren Inhalte. Der Zugriff auf die Inhalte erfolgt mit Seite node.nodeValue (firstChild ist ein bestimmter Knotentyp).

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 table (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: table
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente table haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung der Tabelle
border | Lesen/Ändern | Rahmendicke der Tabelle
bgColor | Lesen/Ändern | Hintergrundfarbe der Tabelle
caption | Lesen/Ändern | Tabellenüberschrift-Element vorhanden oder nicht vorhanden
cellPadding | Lesen/Ändern | Abstand zwischen Zellenrand und Zellinhalt
cellSpacing | Lesen/Ändern | Abstand zwischen den Zellen untereinander
frame | Lesen/Ändern | Angabe, welche Rahmen der Tabelle sichtbar sein sollen
rows | Lesen | Array aller Tabellenzeilen
rules | Lesen/Ändern | Angabe, welche Gitternetzlinien innerhalb der Tabelle sichtbar sein sollen
summary | Lesen/Ändern | Text, der Sehbehinderten die Tabelle im Fall von Sprachausgabe erläutert
tBodies | Lesen | Array aller tbody-Elemente der Tabelle
tFoot | Lesen/Ändern | Tabellenfuß-Element oder null
tHead | Lesen/Ändern | Tabellenkopf-Element oder null
width | Lesen/Ändern | Breite der Tabelle
Methode |  | Bedeutung
createCaption() |  | Tabellenüberschrift-Element caption erzeugen
createTFoot() |  | Tabellenfuß-Element tfoot erzeugen
createTHead() |  | Tabellenkopf-Element thead erzeugen
deleteCaption() |  | Tabellenüberschrift-Element caption löschen
deleteTFoot() |  | Tabellenfuß-Element tfoot löschen
deleteTHead() |  | Tabellenkopf-Element thead löschen
deleteRow() |  | Tabellenzeile löschen
insertRow() |  | Tabellenzeile hinzufügen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zeile = 0;
function ZeileEinfuegen () {
  if (Zeile == 0)
    document.getElementById("Tabelle").deleteRow(0);
  var TR = document.getElementById("Tabelle").insertRow(Zeile);
  Zeile += 1;
  var TD1 = document.createElement("td");
  var TD1text = document.createTextNode(document.Formular.linkerText.value);
  TD1.appendChild(TD1text);
  var TD2 = document.createElement("td");
  var TD2text = document.createTextNode(document.Formular.rechterText.value);
  TD2.appendChild(TD2text);
  TR.appendChild(TD1);
  TR.appendChild(TD2);
  document.Formular.linkerText.value = "";
  document.Formular.rechterText.value = "";
}

function Rahmen () {
  if (document.getElementsByName("Option")[0].checked == true) {
    document.getElementById("Tabelle").border = "2";
  } else {
    document.getElementById("Tabelle").border = "0";
  }
}

function Farbe () {
  if (document.getElementsByName("Option")[1].checked == true) {
    document.getElementById("Tabelle").bgColor = "#CCCCFF";
  } else {
    document.getElementById("Tabelle").bgColor = "";
  }
}
</script>
</head><body>
<form name="Formular" action="">
<input type="text" name="linkerText">
<input type="text" name="rechterText">
<input type="button" value=" OK " onclick="ZeileEinfuegen()"><br>
<input type="checkbox" name="Option" onclick="Rahmen()"> Rahmen
<input type="checkbox" name="Option" onclick="Farbe()"> Hintergrund
</form>
<table id="Tabelle">
<tr><td>Eine Tabelle</td></tr>
</table>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular und unterhalb davon eine einzeilige Tabelle. Das Formular besteht aus zwei Eingabefeldern, einem Klick-Button und zwei Checkboxen. Die beiden Eingabefelder dienen dazu, um die Tabelle mit neuem Inhalt zu füllen. Gibt der Anwender in beiden Feldern etwas ein und klickt dann auf den Klick-Button, wird die JavaScript- Seite Funktion ZeileEinfuegen() aufgerufen, die im Dateikopf notiert ist. Beim ersten Aufruf der Funktion - die Variable Zeile ist hier noch 0 - wird mit document.getElementById("Tabelle").deleteRow(0) die vorhandene Tabellenzeile gelöscht.
Mit document.getElementById("Tabelle").insertRow(Zeile) greift die Funktion auf die Tabelle zu und fügt ihr mit insertRow() eine neue Zeile ein. Der übergebene Wert Zeile bestimmt, an welcher Stelle der Tabelle die neue Zeile eingefügt werden soll. Da die Variable Zeile anschließend um 1 erhöht wird, wird beim nächsten Aufruf der Funktion die Zeile unterhalb der letzten Zeile hinzugefügt.
Der Rückgabewert von insertRow() ist das neu erzeugte tr-Element für die Tabellenzeile. Das Element wird in der Variablen TR gespeichert.
Um die Tabellenzeile mit Inhalt zu füllen, werden zwei Tabellenzellen erzeugt. Die Elemente werden mit Seite document.createElement() erzeugt. Für die Inhalte der Tabellenzellen werden mit Seite document.createTextNode() zwei Textknoten erzeugt, die als Wert die Inhalte der beiden Eingabefelder des Formulars zugewiesen bekommen.
Mit der Methode Seite node.appendChild() werden die Textknoten als Kindknoten zu den Tabellenzellen hinzugefügt, und anschließend werden mit der gleichen Methode die Tabellenzelle als Kindknoten zu der Tabellenzeile hinzugefügt.

Die beiden Checkboxen rufen beim Anklicken (onclick) die Funktionen Rahmen() bzw. Farbe() auf. Dort wird jeweils überprüft, ob die Checkboxen angekreuzt sind (checked) oder nicht. Dann wird mit document.getElementById("Tabelle") auf die Tabelle zugegriffen und abhängig davon, ob die Checkbox angekreuzt ist oder nicht, deren Eigenschaften für border bzw. bgColor dynamisch geändert.

Beachten Sie:

Safari interpretiert die Eigenschaft border nicht.

DOM 1.0 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 tbody (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: tbody
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente tbody haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung der Zellen des Tabellenbereichs
ch | Lesen/Ändern | Ausrichtungszeichen für Zellen des Tabellenbereichs
chOff | Lesen/Ändern | Position des Ausrichtungszeichens in Zellen des Tabellenbereichs
rows | Lesen | Array aller Tabellenzeilen des Tabellenbereichs
vAlign | Lesen/Ändern | vertikale Ausrichtung der Zellen im Tabellenbereich
Methode |  | Bedeutung
deleteRow() |  | Tabellenzeile aus Tabellenbereich löschen
insertRow() |  | Tabellenzeile im Tabellenbereich hinzufügen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function rechts () {
  document.getElementById("Tabellendaten").align = "right";
}
</script>
</head><body>
<table border="1">
<thead>
<tr><th width="200">Name</th><th width="200">Alter</th></tr>
</thead>
<tbody id="Tabellendaten">
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</tbody>
</table>
<a href="javascript:rechts()">rechts ausrichten</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Tabelle mit ausgewiesenem tbody-Bereich. Unterhalb der Tabelle ist ein Verweis notiert, bei dessen Anklicken die JavaScript- Seite Funktion rechts() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("Tabellendaten") auf das tbody-Element zu und ändert dessen Eigenschaft align auf den Wert right. Dadurch werden alle Tabellenzellen imd tbody-Bereich rechtsbündig ausgerichtet.

Beachten Sie:

Mit dem Internet Explorer 5.0 Macintosh Edition war dieses Beispiel nicht nachvollziehbar.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 td (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: td
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente td haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
abbr | Lesen/Ändern | Hinweistext für die Zuordnung der Tabellenzelle, die z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen wird
align | Lesen/Ändern | Ausrichtung
axis | Lesen/Ändern | Liste von Kategorien, zu der die Zelle gehört
bgColor | Lesen/Ändern | Hintergrundfarbe
cellIndex | Lesen | Indexnummer der Zelle innerhalb der Tabellenzeile (Start bei 0)
ch | Lesen/Ändern | Ausrichtungszeichen
chOff | Lesen/Ändern | Position des Ausrichtungszeichens
colSpan | Lesen/Ändern | Anzahl Spalten, über die sich die Zelle erstreckt
headers | Lesen/Ändern | Liste von ID-Namen von Zeilen- oder Spaltenüberschriften, zu denen die Zelle gehört
height | Lesen/Ändern | Zellenhöhe (Zeilenhöhe)
noWrap | Lesen/Ändern | Automatischer Zeilenumbruch oder kein automatischer Zeilenumbruch
rowSpan | Lesen/Ändern | Anzahl Tabellenzeilen, über die sich die Zelle erstreckt
scope | Lesen/Ändern | für welche restlichen Zeilen oder Spalten die aktuelle Zelle Überschriftencharakter hat
vAlign | Lesen/Ändern | vertikale Ausrichtung
width | Lesen/Ändern | Zellenbreite (Spaltenbreite)

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table cellspacing="2" border="2">
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
var Farben = new Array("#CCFFCC", "#CCCCFF", "FFCCCC", "FFCCFF", "FFFFCC");
for (var i = 0; i < document.getElementsByTagName("td").length; i++) {
  var index = parseInt((Math.random() * 100) % (Farben.length - 1));
  document.getElementsByTagName("td")[i].bgColor = Farben[index];
}
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Tabelle. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird in einer Seite for-Schleife der Reihe nach mit document.getElementsByTagName("td") auf alle td-Elemente der Datei zugegriffen. Durch Aufruf von Seite Math.random() werden Zufallszahlen ermittelt, die mit Hilfe von Multiplikation mit 100, Modulo-Division und Anwendung der Funktion Seite parseInt() so getrimmt werden, dass es ganzzahlige Zufallszahlen werden, die sich als Index für den zuvor definierten Array Farben eignen. Mit document.getElementsByTagName("td")[i].bgColor wird schließlich die Hintergrundfarbe der jeweils aktuellen Tabellenzelle auf einen zufällig ermittelten Farbwert gesetzt. Die Tabelle wird auf diese Weise schön bunt, und jede Zelle erhält eine per Zufall ausgesuchte Hintergrundfarbe.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 textarea (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: textarea
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente textarea haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft | Status | Bedeutung
accessKey | Lesen/Ändern | Hotkey für das Element
cols | Lesen | Zeichen pro Zeile (Anzeigebreite)
defaultValue | Lesen/Ändern | vorbelegter Wert
disabled | Lesen/Ändern | Element kann nicht geändert werden
form | Lesen | zugehöriges Formular
name | Lesen/Ändern | Name des Elements
readOnly | Lesen/Ändern | Wert des Elements kann nicht verändert werden
rows | Lesen | Zeilen (Anzeigehöhe)
tabIndex | Lesen/Ändern | Tabulator-Reihenfolge
type | Lesen | Typ des Formularelements
value | Lesen/Ändern | Wert des Elements
Methode |  | Bedeutung
blur() |  | Fokus vom Element entfernen
focus() |  | Fokus auf Element setzen
select() |  | Inhalt selektieren

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function setText () {
  document.getElementById("Text").firstChild.nodeValue = document.getElementById("Eingabe").value;
}
</script>
</head><body>
<form name="Formular" action="">
Text:<br>
<textarea id="Eingabe" rows="10" cols="50"
onkeyup="setText()"></textarea>
</form>
<div id="Text" style="font-size:1.4em; background-color:#FFFFCC; padding:10px;
border:solid 1px red">&nbsp;</div>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem textarea-Eingabebereich. Unterhalb des Formulars ist ein schick formatierter div-Bereich notiert, der als Inhalt aber zunächst nur ein erzwungenes Leerzeichen &nbsp; enthält. Im einleitenden <textarea>-Tag ist der Seite Event-Handler onkeyup notiert. Wenn der Anwender in dem Feld etwas eingibt, wird bei jedem Loslassen eines Tastendrucks die JavaScript- Seite Funktion setText() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("Text").firstChild.nodeValue auf den Inhalt des div-Elements zu und weist diesem den Wert des Eingabefeldes (document.getElementById("Eingabe").value) zu. Somit wird in den div-Bereich dynamisch der Text geschrieben, den der Anwender im Textfeld eingibt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 tfoot (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: tfoot
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente tfoot haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung der Zellen des Tabellenbereichs
ch | Lesen/Ändern | Ausrichtungszeichen für Zellen des Tabellenbereichs
chOff | Lesen/Ändern | Position des Ausrichtungszeichens in Zellen des Tabellenbereichs
rows | Lesen | Array aller Tabellenzeilen des Tabellenbereichs
vAlign | Lesen/Ändern | vertikale Ausrichtung der Zellen im Tabellenbereich
Methode |  | Bedeutung
deleteRow() |  | Tabellenzeile aus Tabellenbereich löschen
insertRow() |  | Tabellenzeile im Tabellenbereich hinzufügen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table border="1">
<tfoot id="Fuss" valign="top">
<tr><td colspan="2" height="40">
Angaben ohne Gewähr!
</td></tr></tfoot>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
var Ausrichtung = document.getElementById("Fuss").vAlign;
document.write("Angaben ohne Gewähr haben die Ausrichtung: " + Ausrichtung);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Tabelle mit einem ausgewiesenen tfoot-Bereich. Unterhalb der Tabelle ist ein JavaScript-Bereich notiert. Darin wird mit document.getElementById("Fuss").vAlign auf das tfoot-Element zugegriffen und der Wert von dessen Eigenschaft vAlign ausgelesen. Anschließend wird das Ergebnis ins Dokument geschrieben.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 th (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: th
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente th haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
abbr | Lesen/Ändern | Hinweistext für die Zuordnung der Tabellenzelle, die z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen wird
align | Lesen/Ändern | Ausrichtung
axis | Lesen/Ändern | Liste von Kategorien, zu der die Zelle gehört
bgColor | Lesen/Ändern | Hintergrundfarbe
cellIndex | Lesen | Indexnummer der Zelle innerhalb der Tabellenzeile (Start bei 0)
ch | Lesen/Ändern | Ausrichtungszeichen
chOff | Lesen/Ändern | Position des Ausrichtungszeichens
colSpan | Lesen/Ändern | Anzahl Spalten, über die sich die Zelle erstreckt
headers | Lesen/Ändern | Liste von ID-Namen von Zeilen- oder Spaltenüberschriften, zu denen die Zelle gehört
height | Lesen/Ändern | Zellenhöhe (Zeilenhöhe)
noWrap | Lesen/Ändern | Automatischer Zeilenumbruch oder kein automatischer Zeilenumbruch
rowSpan | Lesen/Ändern | Anzahl Tabellenzeilen, über die sich die Zelle erstreckt
scope | Lesen/Ändern | für welche restlichen Zeilen oder Spalten die aktuelle Zelle Überschriftencharakter hat
vAlign | Lesen/Ändern | vertikale Ausrichtung
width | Lesen/Ändern | Zellenbreite (Spaltenbreite)

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table border="1">
<tr><th width="200">Name</th><th width="200">Alter</th></tr>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
for (var i = 0; i < document.getElementsByTagName("th").length; i++)
  document.getElementsByTagName("th")[i].align = "left";
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Tabelle und unterhalb davon einen JavaScript-Bereich. Dort werden in einer Seite for-Schleife der Reihe nach alle th-Elemente des Dokuments ermittelt. Ihnen wird für die Eigenschaft align der Wert left zugewiesen.

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

DOM 1.0 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 thead (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: thead
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente thead haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung der Zellen des Tabellenbereichs
ch | Lesen/Ändern | Ausrichtungszeichen für Zellen des Tabellenbereichs
chOff | Lesen/Ändern | Position des Ausrichtungszeichens in Zellen des Tabellenbereichs
rows | Lesen | Array aller Tabellenzeilen des Tabellenbereichs
vAlign | Lesen/Ändern | vertikale Ausrichtung der Zellen im Tabellenbereich
Methode |  | Bedeutung
deleteRow() |  | Tabellenzeile aus Tabellenbereich löschen
insertRow() |  | Tabellenzeile im Tabellenbereich hinzufügen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table border="1">
<thead id="Kopf">
<tr><th width="200">Name</th><th width="200">Alter</th></tr>
</thead>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
var Zeilen = document.getElementById("Kopf").rows.length;
document.write("Tabellenkopf hat " + Zeilen + " Zeilen");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Tabelle und unterhalb davon einen JavaScript-Bereich. Dort wird mit document.getElementById("Kopf").rows.length die Anzahl der Tabellenzeilen im Bereich des thead-Elements ermittelt und anschließend ins Dokument geschrieben.

Beachten Sie:

Safari zählt in obigen Beispiel bei der Eigenschaft rows fehlerhaft die Zeilen der gesamten Tabelle, nicht nur die Zeilen des Tabellenkopfes.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 title (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: title
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente title haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgende eigenen Eigenschaft.

Eigenschaft | Status | Bedeutung
text | Lesen/Ändern | Inhalt des Titels

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Ein ganz besonderer Tag</title>
</head><body>
<script type="text/javascript">
document.write("<h1>" + document.getElementsByTagName("title")[0].text + "<\/h1>");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält einen JavaScript-Bereich, in dem dynamisch eine Überschrift erster Ordnung ins Dokument geschrieben wird. Überschriftentext wird der Inhalt des title-Elements geschrieben. Dazu wird mit document.getElementsByTagName("title")[0] auf das title-Element zugegriffen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 tr (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: tr
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente tr haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

Eigenschaft | Status | Bedeutung
align | Lesen/Ändern | Ausrichtung der Zellen der Tabellenzeile
bgColor | Lesen/Ändern | Hintergrundfarbe der Zellen der Tabellenzeile
cells | Lesen | Array der Tabellenzellen dieser Tabellenzeile
ch | Lesen/Ändern | Ausrichtungszeichen für Zellen der Tabellenzeile
chOff | Lesen/Ändern | Position des Ausrichtungszeichens in Zellen der Tabellenzeile
rowIndex | Lesen | Indexnummer der Tabellenzeile (startend bei 0) relativ zur Tabelle
sectionRowIndex | Lesen | Indexnummer der Tabellenzeile (startend bei 0) relativ zum Tabellenbereich (thead, tbody oder tfoot)
vAlign | Lesen/Ändern | vertikale Ausrichtung der Zellen im Tabellenbereich
Methode |  | Bedeutung
deleteCell() |  | Tabellenzelle aus Tabellenzeile löschen
insertCell() |  | Tabellenzelle in Tabellenzeile hinzufügen

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zelle = 0;
function neueZelle () {
  if (Zelle == 0)
    document.getElementById("Zeile").deleteCell(0);
  var Text = document.createTextNode(document.Formular.Eingabe.value);
  var TD = document.getElementById("Zeile").insertCell(Zelle);
  Zelle += 1;
  TD.appendChild(Text);
  document.Formular.Eingabe.value = "";
}
</script>
</head><body>
<table border="1">
<tr id="Zeile"><td>Zelle</td></tr>
</table>
<form name="Formular" action="">
<input type="text" name="Eingabe">
<input type="button" value=" OK " onclick="neueZelle()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält eine Tabelle mit einer einspaltigen Tabellenzeile und unterhalb der Tabelle ein Formular mit einem Eingabefeld und einem Klick-Button. Beim Anklicken des Buttons wird die JavaScript- Seite Funktion neueZelle() aufgerufen wird, die im Dateikopf notiert ist. Beim ersten Aufruf der Funktion - die Variable Zelle ist hier noch 0 - wird mit document.getElementById("Zeile").deleteCell(0) die vorhandene Tabellenzelle gelöscht. Die Funktion erzeugt zunächst mit Seite document.createTextNode() einen Textknoten, der als Wert den Inhalt des Formulareingabefeldes erhält. Anschließend wird mit document.getElementById("Zeile") auf die Tabellenzeile zugegriffen und mit der Methode insertCell() eine neue Tabellenzelle eingefügt. Der übergebene Parameter bestimmt, an wie vielter Stelle die Zelle in der Zeile eingefügt wird. Im Beispiel wird dazu die Variable Zelle benutzt, die bei jedem Funktionsaufruf um 1 erhöht wird. So ist sichergestellt, dass neue Zellen immer ans Ende der Zeile angehängt werden.
Der Rückgabewert von insertCell() ist das neu erzeugte td-Element. Es wird in der Variablen TD gespeichert. Mit der Methode Seite node.appendChild() wird der zuvor erzeugte Textknoten in das td-Element als Kindknoten hinzugefügt. Die Tabellenzeile ist damit dynamisch um das neue Zellenelement erweitert worden.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 tt (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: tt
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente tt haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<tt title="ein Teletyper!"
onmouseover="alert(document.getElementsByTagName('tt')[0].title)">Was bin ich?</tt>
</body></html>

Erläuterung:

Das Beispiel enthält mit <tt>...</tt> ausgezeichneten Text, der den Seite Event-Handler onmouseover enthält. Beim Überfahren des Textes mit der Maus wird in einem Meldungsfenster der Wert des title-Attributs des Elements ausgegeben. Dazu wird mit document.getElementsByTagName('tt')[0] auf das Element zugegriffen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 u (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: u
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente u haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Ein ganz besonderer Tag</title>
<style type="text/css">
.so { text-decoration:overline; }
</style>
<script type="text/javascript">
function anders () {
  document.getElementById("uText").className = "so";
}
</script>
</head><body>
<u id="uText" onclick="anders()">das ist der Text</u>
</body></html>

Erläuterung:

Das Beispiel enthält unterstrichenen Text. Im einleitenden <u>-Tag ist der Seite Event-Handler onclick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript- Seite Funktion anders() aufgerufen. Diese greift mit document.getElementById("uText") auf das u-Element zu und weist ihm die im Dateikopf in einem Style-Bereich definierte Klasse so zu. Der Text wird dadurch überstrichen statt unterstrichen dargestellt.

Beachten Sie:

Im Internet Explorer 5.0 wird als Ergebnis des Funktionsaufrufes der Text sowohl unterstrichen als auch überstrichen dargestellt. Netscape 6.1 und der Internet Explorer 5.5 verhalten sich dagegen wie im Beispiel beschrieben.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 ul (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: ul
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente ul haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

Eigenschaft | Status | Bedeutung
compact | Lesen/Ändern | Darstellung in enger Schrift
type | Lesen/Ändern | Art des Aufzählungszeichens

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Bullet (Symbol) {
  document.getElementById("Liste").type = Symbol;
}
</script>
</head><body>
<ul id="Liste">
<li>ein Punkt</li>
<li>und noch ein Punkt</li>
</ul>
<a href="javascript:Bullet('disc')">Disc-Symbol</a>
<a href="javascript:Bullet('square')">Square-Symbol</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Aufzählungsliste. Unterhalb davon sind zwei Verweise notiert. Bei Anklicken der Verweise wird jeweils die JavaScript- Seite Funktion Bullet() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("Liste") auf das ul-Element der Liste zu und weist seiner Eigenschaft type den Wert zu, den die Funktion beim Aufruf von den Verweisen übergeben bekommen hat.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 var (HTML-Elementobjekt)

HTML-Referenz: siehe Seite Element: var
Auf HTML-Elementobjekte zugreifen: siehe nach oben HTML-Elementobjekte: Allgemeines zur Verwendung

HTML-Elemente var haben als DOM-Objekte für den Script-Sprachenzugriff nach oben Universaleigenschaften.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
Datei: <var id="datei" title="/usr/docs/web/projekte/dateiname.html">dateiname.html</var><br>
genauer:
<script type="text/javascript">
document.write("<var>" + document.getElementById("datei").title + "<\/var>");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält einen mit <var>...</var> ausgezeichneten Text. Unterhalb ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementById("datei") auf das var-Element zugegriffen und der Wert von dessen Eigenschaft title dynamisch ins Dokument geschrieben.

nach oben
weiter | Seite node
zurück | Seite document
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / node

SELFHTML

node
Informationsseite

nach unten node: Allgemeines zur Verwendung

Eigenschaften:

nach unten attributes (Attribute)
nach unten childNodes (Kindknoten)
nach unten data (Zeichendaten)
nach unten firstChild (erster Kindknoten)
nach unten lastChild (letzter Kindknoten)
nach unten nextSibling (nächster Knoten auf derselben Ebene)
nach unten nodeName (Name des Knotens)
nach unten nodeType (Knotentyp)
nach unten nodeValue (Wert/Inhalt des Knotens)
nach unten parentNode (Elternknoten)
nach unten previousSibling (vorheriger Knoten auf derselben Ebene)

Methoden:

nach unten appendChild() (Kindknoten hinzufügen)
nach unten appendData() (Zeichendaten hinzufügen)
nach unten cloneNode() (Knoten kopieren)
nach unten deleteData() (Zeichendaten löschen)
nach unten getAttribute() (Wert eines Attributknotens ermitteln)
nach unten getAttributeNode() (Attributknoten ermitteln)
nach unten getElementsByTagName() (Zugriff auf Kindelemente über den Elementnamen)
nach unten hasChildNodes() (auf Kindknoten prüfen)
nach unten insertBefore() (Knoten einfügen)
nach unten insertData() (Zeichendaten einfügen)
nach unten removeAttribute() (Attribut löschen)
nach unten removeAttributeNode() (Attributknoten löschen)
nach unten removeChild() (Knoten löschen)
nach unten replaceChild() (Kindknoten ersetzen)
nach unten replaceData() (Zeichendaten ersetzen)
nach unten setAttribute() (Wert eines Attributknotens setzen)
nach unten setAttributeNode() (Attributknoten erzeugen)
nach unten

node: Allgemeines zur Verwendung

Das node-Objekt ist das zentrale Objekt des Document Object Models (DOM) (node = Knoten). Hintergrund ist das Modell, dass ein Auszeichnungssprachen-Dokument, egal ob in HTML oder einer anderen, XML-basierten Auszeichnungssprache geschrieben, aus einem Baum von Knoten besteht. Um sich mit diesem Modell näher zu beschäftigen, können Sie im XML-Kapitel dieses Dokuments den Abschnitt Seite Baumstruktur und Knoten einer XML-Datei lesen.

Jedes Element, jedes Attribut und alle Zeichendaten stellen eigene Knoten dar. Diese Knoten bilden die Baumstruktur. Das node-Objekt stellt Eigenschaften und Methoden bereit, um auf die einzelnen Knoten zuzugreifen, egal, wie tief diese Knoten in der Baumstruktur liegen.

Das node-Objekt stellt damit die allgemeinere und für alle XML-gerechten Sprachen gültige Variante dessen dar, was die Seite HTML-Elementobjekte speziell für HTML darstellen. Sie können in JavaScripts, die in HTML-Dateien notiert oder eingebunden sind, sowohl mit den HTML-Elementobjekten als auch mit dem node-Objekt arbeiten. Manches ist über die HTML-Elementobjekte bequemer zu lösen, für andere Aufgaben eignet sich wiederum das node-Objekt besser. Das node-Objekt gilt unter Puristen allerdings als das "reinere" DOM, eben weil es nicht auf HTML beschränkt ist.

Um auf die Eigenschaften und Methoden des node-Objekts zugreifen zu können, benötigen Sie einen Knoten. Um auf vorhandene Knoten im Dokument zuzugreifen, werden die Methoden des Seite document-Objekts Seite getElementById, Seite getElementsByName und Seite getElementsByTagName verwendet. Ausgehend davon können Sie die Attributknoten, Textknoten und weitere Element-Kindknoten eines Elements ansprechen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<h1 id="Ueberschrift" align="center">Knoten in der <i>Baumstruktur</i></h1>
<script type="text/javascript">
Elementknoten = document.getElementById("Ueberschrift");
WertErsterKindknoten = Elementknoten.firstChild.nodeValue;
document.write("Der Wert ihres ersten Kindknotens lautet: <b>" + WertErsterKindknoten + "<\/b>");
</script>
</body></html>

Erläuterung:

Die Beispieldatei enthält eine Überschrift erster Ordnung mit Text, von dem ein Teil wiederum als kursiv ausgezeichnet ist. In dem JavaScript, das unterhalb davon notiert ist, wird zunächst mit document.getElementById("Ueberschrift") (ohne weitere Eigenschaft oder Methode dahinter) auf das h1-Element der Überschrift zugegriffen. Der Rückgabewert von getElementById() ist das Knotenobjekt der Überschrift. Der Rückgabewert wird im Beispiel in der Variablen Elementknoten gespeichert. Diese Variable speichert also einen gültigen Knoten des Dokuments, und auf die Variable sind daher die Eigenschaften und Methoden des node-Objekts anwendbar. Im Beispiel wird mit Elementknoten.firstChild.nodeValue der Wert des ersten Kindknotens der Überschrift ermittelt. Dessen Wert wird schließlich mit Seite document.write() ins Dokument geschrieben.

Die Verwendung von Variablen ist nicht zwingend erforderlich. Das obige Beispiel funktioniert genauso, wenn Sie notieren:
document.write("Der Wert ihres ersten Kindknotens lautet: <b>" + document.getElementById("Ueberschrift").firstChild.nodeValue + "<\/b>");

Der geschriebene Wert lautet im Beispiel: Knoten in der ... der erste Kindknoten der Überschrift ist also ihr Zeicheninhalt. Das Wort Baumstruktur gehört nicht dazu, da es ja durch ein i-Element ausgezeichnet ist, das selbst wieder einen eigenen, weiteren Kindknoten der Überschrift darstellt.

Die beiden Attribute, die im einleitenden Überschriften-Tag notiert sind, zählen übrigens nicht als Kindknoten. Das W3-Konsortium ist der Auffassung, dass Attribute hierarchisch gesehen keine "Unterobjekte" von Elementen sind, sondern "assoziierte Objekte". Um auf Attributknoten zuzugreifen, bietet das node-Objekt eigene Eigenschaften und Methoden an. Zum Verständnis ist es jedoch wichtig, dass die Attribute eines Elements nicht als dessen Kindknoten betrachtet werden, weshalb etwa eine Objekteigenschaft wie firstChild die Attribute übergeht.

DOM 1.0 JavaScript 1.5 Netscape 6.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen attributes

Speichert einen Array aus verfügbaren Attributen eines Elements.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body bgcolor="#FFFFCC" text="#000099">
<script type="text/javascript">
document.write("Das body-Element hat <b>" +
  document.getElementsByTagName('body')[0].attributes.length + "<\/b> Attribute");
</script>
</body></html>

Erläuterung:

Das Beispiel greift mit document.getElementsByTagName('body')[0] auf das body-Element der Datei zu und ermittelt über die Array-Grundeigenschaft length des attributes-Arrays die Anzahl der Attribute, die in dem Element definiert sind. Zur Kontrolle wird das Ergebnis mit document.write ins Dokument geschrieben. Im Beispiel ist 2 der Wert von attributes.length, da im einleitenden <body>-Tag zwei Attribute notiert sind.

Über den attributes-Array können Sie auch auf Attribute zugreifen. So liefert beispielsweise document.getElementsByTagName('body')[0].attributes[0].nodeValue den Wert #FFFFCC oder #000099, da attributes[0] eines der beiden Attribute bezeichnet, und nach unten nodeValue den zugehörigen Wert speichert.

Beachten Sie:

Die Reihenfolge, in der die Attribute im attributes-Array gespeichert sind, ist nicht definiert. Sie können sich nicht darauf verlassen, dass attributes[0] tatsächlich das erste, im HTML-Code notierte, Attribut ist. Diese Notation ist nur dazu gedacht, einfache Zählschleifen zu erlauben.

Der Internet Explorer ermittelt zwar einen Wert, jedoch nicht den richtigen. Im Beispiel wurde mit der Produktversion 5.5 statt 2 der Wert 94 ermittelt - vermutlich die Anzahl insgesamt verfügbarer Attribute für das body-Element, inklusive Event-Handler usw. Dies ist jedoch unbrauchbar.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen childNodes

Speichert einen Array aus verfügbaren Kindknoten eines Knotens.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p id="derText">Text mit <b>fettem Text</b> und <u>unterstrichenem Text</u></p>
<script type="text/javascript">
var Anzahl = document.getElementById("derText").childNodes.length;
var Erster = document.getElementById("derText").childNodes[0].nodeValue;
document.write("Anzahl Kindknoten: <b>" + Anzahl + "<\/b><br>");
document.write("Wert des ersten Kindknotens: <b>" + Erster + "<\/b><br>");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit Zeicheninhalt und weiteren Elementen zur Formatierung. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementById("derText") auf das p-Element zugegriffen. Über die Array-Grundeigenschaft length des childNodes-Arrays wird die Anzahl der Kindelemente ermittelt, die das p-Element hat. Der Rückgabewert wird in der Variablen Anzahl gespeichert. Über childNodes[0] wird auf das erste Kindelement zugegriffen. Dessen Inhalt wird mit nach unten nodeValue ermittelt. Zur Kontrolle schreibt das Script die Ergebnisse mit document.write() ins Dokument.

Die Anzahl der Kindelemente des p-Elements beträgt übrigens 4:
Das erste Kindelement ist der Zeicheninhalt Text mit ,
das zweite Kindelement das b-Element,
das dritte Kindelement der Zeicheninhalt  und ,
und das vierte Kindelement das u-Element.

Wenn ein Knoten keine Kindknoten enthält, hat childNodes den Wert null.

Beachten Sie:

Gemäß dem DOM stellt bereits ein Zeilenumbruch oder ein Leerzeichen im Quelltext zwischen Elementknoten einen eigenen Text-Kindknoten dar. Auch HTML-Kommentare sind eigene Knoten. Daran halten sich alle gängigen Browser bis auf den Internet Explorer unter Windows. Dieser ignoriert solche "Leerraum"-Zeichen zwischen Elementknoten völlig, dasselbe gilt für Kommentarknoten. Sie tauchen nicht im childNode-Array auf. Konqueror und Safari setzen "Leerraum"-Zeichen zwar in Texktnoten um, ignorieren aber Kommentarknoten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<ul id="ersteListe"><li>erster Punkt</li><li>zweiter Punkt</li></ul>
<script type="text/javascript">
var Anzahl = document.getElementById("ersteListe").childNodes.length;
document.write("<p>Erste Liste: Anzahl Kindknoten: <b>" + Anzahl + "<\/b><\/p>");
</script>
<ul id="zweiteListe">
<li>erster Punkt</li> <li>zweiter Punkt</li>
</ul>
<script type="text/javascript">
var Anzahl = document.getElementById("zweiteListe").childNodes.length;
document.write("<p>Zweite Liste: Anzahl Kindknoten: <b>" + Anzahl + "<\/b><\/p>");
</script>
</body></html>

Erläuterung:

Im Beispiel sind zwei Listen definiert. Beide unterscheiden sich nur dahingehend, dass sich zwischen den einzelnen Elementen der erste Liste keine Leerzeichen oder Zeilenumbrüche befinden. In der zweiten Liste dagegen wurden Leerzeichen und Zeilenumbrüche verwendet. Standardkonforme Browser geben für die erste Liste als Anzahl der Kindknoten 2 aus und für die zweite Liste 5. Die jeweiligen Leerzeichen und Zeilenumbrüchen werden als eigene Kindknoten betrachtet.

Der Internet Explorer unter Windows ignoriert diese Kindknoten und erkennt erst dann einen Kindknoten mit dem Namen #text, wenn dieser ein entsprechendes Textzeichen oder ein erzwungenes Leerzeichen &nbsp; enthält.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern data

Speichert Zeichendaten eines Knotens, sofern es sich um einen Textknoten handelt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Ausgeben () {
  alert(document.getElementById("Dokumentinhalt").firstChild.data);
}
</script>
</head><body id="Dokumentinhalt" onload="Ausgeben()">
Das ist Text, der einfach so im Dokument steht.
</body></html>

Erläuterung:

Das Beispiel enthält zwischen <body> und </body> nichts als reinen Text, also Zeichendaten. Nachdem das Dokument geladen ist (onload), wird die JavaScript- Seite Funktion Ausgeben() aufgerufen. Diese greift mit document.getElementById("Dokumentinhalt") auf das body-Element zu. Mit nach unten firstChild wird auf das erste Kindelement zugegriffen, und mit data auf dessen Inhalt. Das erste (und einzige) Kindelement des body-Elements ist im Beispiel der Text. Dieser wird denn auch in dem Meldungsfenster angezeigt, das die Funktion Ausgeben() ausgibt.

Wenn Sie den Wert der Eigenschaft data ändern, wird der Zeicheninhalt des Elements einfach durch den neuen Inhalt ersetzt. Wenn Sie im obigen Beispiel also notieren würden:
document.getElementById("Dokumentinhalt").firstChild.data = "neuer Text";
Dann würde anschließend der bisherige Text zwischen <body> und </body> dynamisch durch den neuen ersetzt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen firstChild

Speichert das Objekt des ersten Kindknotens eines Knotens.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<ul><li>erster Punkt</li><li>zweiter Punkt</li></ul>
<script type="text/javascript">
var ErsterPunkt = document.getElementsByTagName("ul")[0].firstChild;
document.write(ErsterPunkt.firstChild.data);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Aufzählungsliste mit zwei Listenpunkten. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("ul")[0] auf das erste ul-Element im Dokument zugegriffen. Mit firstChild wird dessen erster Kindknoten angesprochen. Im Beispiel ist dies das erste li-Element. In der Variablen ErsterPunkt ist also anschließend das Knotenobjekt des ersten li-Elements gespeichert, aber nicht sein Textinhalt. Dieser wird jedoch anschließend mit document.write() ausgegeben. Da der Textinhalt aus Sicht des li-Elementknotens wieder einen Unterknoten darstellt, kann mit ErsterPunkt.firstChild.data auf den Text des ersten Listenpunktes zugegriffen werden.

Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die nach oben Besonderheit des Internet Explorers unter Windows im Umgang mit Kindknoten.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen lastChild

Speichert das Objekt des letzten Kindknotens eines Knotens.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<ul><li>erster Punkt</li><li>zweiter Punkt</li></ul>
<script type="text/javascript">
var LetzterPunkt = document.getElementsByTagName("ul")[0].lastChild;
document.write(LetzterPunkt.firstChild.data + " und ");
document.write(LetzterPunkt.lastChild.data);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Aufzählungsliste mit zwei Listenpunkten. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("ul")[0] auf das erste ul-Element im Dokument zugegriffen. Mit lastChild wird dessen letzter Kindknoten angesprochen. Im Beispiel ist dies das zweite und letzte li-Element. In der Variablen LetzterPunkt ist also anschließend das Knotenobjekt des zweiten li-Elements gespeichert, aber nicht sein Textinhalt. Dieser wird jedoch anschließend mit document.write() ausgegeben, und zwar gleich zweimal. Da der Textinhalt aus Sicht des li-Elementknotens wieder einen Unterknoten darstellt, und zwar den einzigen, kann er mit LetzterPunkt.firstChild.data, aber ebensogut mit LetzterPunkt.lastChild.data angesprochen werden.

Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die nach oben Besonderheit des Internet Explorers unter Windows im Umgang mit Kindknoten.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen nextSibling

Speichert aus Sicht eines Knotens den unmittelbar nächstfolgenden Knoten im Strukturbaum. Wenn kein Knoten mehr folgt, wird null gespeichert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<ul>
<li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>
<script type="text/javascript">
document.write("Das ul-Element hat folgende Knoten unter sich:<br>");
var Knoten = document.getElementsByTagName("ul")[0].firstChild;
while (Knoten != null) {
  document.write("Einen Knoten mit dem Namen <b>" + Knoten.nodeName + "<\/b><br>");
  Knoten = Knoten.nextSibling;
}
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Aufzählungsliste mit zwei Listenpunkten. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("ul")[0].firstChild auf das erste ul-Element im Dokument zugegriffen. In der nachfolgenden Seite while-Schleife wird geprüft, ob der Knoten verschieden von null ist, und der nach unten nodeName des Knotens wird ausgegeben. Anschließend ist die Variable Knoten mit dem nachfolgenden Knoten (Knoten = Knoten.nextSibling;) belegt. Wenn der Strukturbaum durchlaufen ist, ist in der Eigenschaft nextSibling der Wert null gespeichert, was zum Abbruch der Schleife führt.

Die Eigenschaft nextSibling arbeitet jeweils den nächsten Knoten eines Strukturbaumes ab. Sie verfolgt jedoch nicht die Kindknoten, die in einem Knoten enthalten sein können.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen nodeName

Speichert den Namen eines Knotens.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body><script id="dasScript" type="text/javascript">
Knoten = document.getElementById("dasScript");
var Knoten = document.body.firstChild;
document.write("Dieses Script-Element hat folgende Knotennamen: <b>" + Knoten.nodeName + "</b>")
</script>
</body></html>

Erläuterung:

Das Beispiel enthält im sichtbaren Dokumentbereich nichts weiter als ein JavaScript, das den Knotennamen des eigenen script-Elements ausgibt, also SCRIPT. Dazu greift das Script mit document.body.firstChild auf das script-Element zu. Dessen Knoten wird in der Variablen Knoten gespeichert. Mit Knoten.nodeName wird dann der Name dieses Knotens ermittelt.

Elementknoten und Attributknoten haben Namen, Textknoten jedoch nicht. Beim Versuch, den Namen eines Textknotens zu ermitteln, wird der Wert #text gespeichert.

Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die nach oben Besonderheit des Internet Explorers unter Windows im Umgang mit Kindknoten.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen nodeType

Speichert den Typ eines Knotens in Form einer Nummer. Das W3-Konsortium hat dazu folgende Zuordnungen festgelegt - einige davon sind XML-spezifisch:

Nummer | Knotentyp
1 | Elementknoten
2 | Attributknoten
3 | Textknoten
4 | Knoten für CDATA-Bereich
5 | Knoten für Entity-Referenz
6 | Knoten für Entity
7 | Knoten für Verarbeitungsanweisung
8 | Knoten für Kommentar
9 | Dokument-Knoten
10 | Dokumenttyp-Knoten
11 | Dokumentfragment-Knoten
12 | Knoten für Notation

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p align="center">ein kleiner Text</p>
<script type="text/javascript">
var Element = document.getElementsByTagName("p")[0];
var Ausrichtung = Element.getAttributeNode("align");
alert(Ausrichtung.nodeType);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit einem align-Attribut zur Ausrichtung. Unterhalb des Textabsatzes ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("p")[0] auf das p-Element zugegriffen. Mit Element.getAttributeNode("align") wird auf dessen Attributknoten zugegriffen. In der Variablen Ausrichtung steht anschließend das Objekt des Attributknotens. Ein Meldungsfenster gibt dann im Beispiel den Knotentyp dieses Knotens mit Ausrichtung.nodeType aus. Der Wert beträgt 2, da es sich um einen Attributknoten handelt.

Beachten Sie:

Der Internet Explorer 5.x interpretiert die Eigenschaft nodeType zwar, in Version 5.5 aber nicht das obige Beispiel. Der Grund ist, dass er die Methode getAttributeNode() nicht unterstützt. Im Internet Explorer 6.0 und im Internet Explorer 5.0 Macintosh Edition ist das Beispiel dagegen nachvollziehbar.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern nodeValue

Speichert den Wert oder Inhalt eines Knotens. Bei Textknoten ist dies der Text, bei Attributknoten der zugewiesene Attributwert. Bei Elementknoten hat diese Eigenschaft den Wert null.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function TextAendern () {
  document.getElementById("derText").firstChild.nodeValue = document.Formular.neuerText.value;
}
</script>
</head><body>
<p id="derText">Hier steht ein Text</p>
<form name="Formular" action="" onsubmit="TextAendern(); return false">
<input type="text" size="40" name="neuerText">
<input type="submit" value=" OK ">
</form>
</body></html>

Erläuterung:

In dem Beispiel ist ein Textabsatz notiert und unterhalb davon ein Formular mit einem Eingabefeld und einem Klick-Button. Beim Absenden des Formulars wird die Seite Funktion TextAendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("derText") auf das p-Element zu, weiterhin mit nach oben firstChild auf den ersten Kindknoten dieses Elements, also den Textinhalt, und weist dessen Eigenschaft nodeValue den Inhalt aus dem Eingabefeld des Formulars zu.

Beachten Sie:

Das Beispiel zeigt, dass nodeValue eine ähnliche Funktionalität hat wie das die Eigenschaft Seite innerText beim klassischen DHTML nach Microsoft-Syntax. Dennoch gibt es Unterschiede: Wenn beispielsweise notiert wäre:
<p>Text mit <b>fettem Text</b></p>
Dann würde firstChild.nodeValue aus Sicht des p-Elements nur den Wert Text mit  liefern und auch nur diesen Teil ändern können, da dahinter durch das innere b-Element ein neuer Knoten beginnt.
Eine direkte Entsprechung zu Seite innerHTML gibt es erst recht nicht im DOM. "Inneres HTML" muss im DOM mit Hilfe geeigneter Methoden wie Seite document.createElement(), Seite document.createAttribute() und Seite document.createTextNode() erzeugt werden.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen parentNode

Speichert den Elternknoten eines Knotens.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<ul>
<li>ein Punkt</li>
<li>ein zweiter</li>
</ul>
<script type="text/javascript">
alert(document.getElementsByTagName("li")[0].parentNode.parentNode.tagName);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Aufzählungsliste. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird der Name des Großelternelements des ersten li-Elements in einem Meldungsfenster ausgegeben. Dazu wird mit document.getElementsByTagName("li")[0] auf das erste li-Element zugegriffen. Das erste parentNode dahinter greift auf dessen Elternelement zu, und das zweite parentNode auf das Elternelement des Elternelements. Von diesem Element wird mit tagName der Name des Elementes ermittelt und ausgegeben. Das Attribut tagName kennen alle Knoten der Art Element.
Ausgegeben wird im Beispiel BODY.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen previousSibling

Speichert aus Sicht eines Knotens den unmittelbar vorhergehenden Knoten im Strukturbaum. Wenn kein Knoten vorausgeht, wird null gespeichert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body id="Dokumentinhalt"
onload="alert(document.getElementById('Dokumentinhalt').previousSibling.nodeName)">
</body></html>

Erläuterung:

Das Beispiel gibt, nachdem das Dokument geladen ist (onload) in einem Meldungsfenster den Knotennamen des Vorgängerknotens vom body-Element aus. Dazu wird mit document.getElementById('Dokumentinhalt') auf das body-Element zugegriffen.
Ausgegeben wird dann HEAD, da das head-Element im Sinne des Strukturbaums das unmittelbare Vorgängerelement des body-Elements ist.

Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die nach oben Besonderheit des Internet Explorers unter Windows im Umgang mit Kindknoten.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 appendChild()

Hängt einen zuvor neu erzeugten Knoten in die bestehende Knotenstruktur ein, und zwar so, dass er als letztes Kindelement eines anzugebenden Knotens eingefügt wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<ol id="Liste">
<li>Element</li>
</ol>
<script type="text/javascript">
document.getElementById("Liste").removeChild(document.getElementById("Liste").firstChild);

for (var i = 0; i < 10; i++) {
  var newLI = document.createElement("li");
  var liNummer = i + 1;
  var newLIText = document.createTextNode("Das ist Listeneintrag Nummer " + liNummer);
  document.getElementById("Liste").appendChild(newLI);
  document.getElementsByTagName("li")[i].appendChild(newLIText);
}
</script>
</body></html>

Erläuterung:

Das Beispiel füllt eine nummerierte Liste automatisch mit Daten. Unmittelbar nach dem Einlesen der nummerierten Liste folgt ein JavaScript-Bereich. Zuerst wird mit der Methode nach unten removeChild() das vorhandene Listenelement entfernt. Anschließend ist eine Seite for-Schleife notiert, die 10 mal durchlaufen wird. Bei jedem Schleifendurchgang wird zunächst mit Seite document.createElement() ein neues Element vom Typ li erzeugt. Dann wird eine Variable liNummer auf einen Wert gesetzt, der um 1 höher ist als der des Schleifenzählers i. Diese Variable wird in der nachfolgenden Anweisung benutzt, bei der mit Seite document.createTextNode() ein neuer Textknoten erzeugt wird. Anschließend folgen - immer noch innerhalb der for-Schleife - zwei appendChild()-Aufrufe. Die erste der Anweisungen greift mit document.getElementById("Liste") auf das ol-Element zu und führt dazu, dass diesem ein neues Kindelement am Ende hinzugefügt wird. Angehängt wird der zuvor neu erzeugte Elementknoten newLI, der ja ein neues li-Element speichert. Beim zweiten Aufruf wird der Schleifenzähler i benutzt, um mit document.getElementsByTagName("li")[i] auf das gerade neu erzeugte li-Element zuzugreifen. Ihm wird mit appendChild() der zuvor erzeugte Textknoten als Kindelement hinzugefügt. Auf diese Weise füllt sich die Liste bei jedem Schleifendurchlauf um ein neues li-Element mitsamt Zeicheninhalt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 6 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 appendData()

Fügt einem Textknoten oder dem Wert eines Attributknotens am Ende Daten hinzu, ohne die bestehenden Daten zu überschreiben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function ergaenzen () {
  var Rest = document.createTextNode("vollkommen!");
  document.getElementById("Absatz").firstChild.appendData(Rest.nodeValue);
}
</script>
</head>
<body>
<p id="Absatz">Ich bin ja so un</p>
<p><a href="javascript:ergaenzen()">un - was?</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Absatz mit nicht ganz sinnigem Text und unterhalb davon einen Verweis. Beim Anklicken des Verweises wird die Seite Funktion ergaenzen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erzeugt zunächst mit Seite document.createTextNode() einen neuen Textknoten. Anschließend greift sie mit document.getElementById("Absatz").firstChild auf den Knoten zu, der den Zeicheninhalt des Textabsatzes mit dem unfertigen Text darstellt, und fügt dort mit appendData() den Wert des neu erzeugten Textknotens (Rest.nodeValue) hinzu. Aus dem Text ich bin ja so un wird also ich bin ja so unvollkommen!

Beachten Sie:

Der Internet Explorer 5.x unterstützt diese Methode noch nicht. Sie können sich damit behelfen, auf den Inhalt eines Textknotens zuzugreifen und dann mit nodeValue += "Text" Daten hinzuzufügen. Im Internet Explorer 6.0 und im Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 cloneNode()

Erstellt eine identische Kopie eines Knotens, je nach Wunsch mit oder ohne zugehörige Unterknotenstruktur.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<span id="Dolly">Dolly </span>
<script type="text/javascript">
Dolly2 = document.getElementById("Dolly").cloneNode(true);
document.getElementById("Dolly").firstChild.nodeValue += Dolly2.firstChild.nodeValue;
</script>
</body></html>

Erläuterung:

Das Beispiel enthält einen in einem span-Element notierten Text Dolly . Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementById("Dolly") auf das span-Element zugegriffen. Dieses wird mit cloneNode() kopiert, und der Rückgabewert wird in der Variablen Dolly2 gespeichert. Der Rückgabewert ist eine identische Kopie des Elementknotens des span-Elements. Als Parameter wird der Methode im Beispiel true übergeben. Das bedeutet, dass auch der Textinhalt des Elements mitkopiert wird. Um nur das Element ohne den Inhalt zu klonen, müssen Sie false übergeben.
Im Beispiel wird anschließend mit document.getElementById("Dolly").firstChild.nodeValue der Inhalt des span-Elements angesprochen und mittels Seite Zeichenkettenoperation um den Wert des Kindelements des Klons erweitert, auf den mit Dolly2.firstChild.nodeValue zugegriffen wird. Am Ende steht also Dolly Dolly  als Inhalt in dem span-Element.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 6 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 deleteData()

Löscht Daten eines Textknotens oder den Wert eines Attributknotens.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function loeschen () {
  var AnzahlZeichen = document.getElementsByTagName("p")[0].firstChild.nodeValue.length;
  document.getElementsByTagName("p")[0].firstChild.deleteData(0, AnzahlZeichen);
}
</script>
</head>
<body>
<p>Die Beredtsamkeit an sich ist die Tugend des Redens
und die Lust des Schweigens an seinem Gegenteil.
Die Beredtsamkeit ist also ...
<a href="javascript:loeschen()">och nee, besser nicht!</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit Text und einem Verweis. Beim Anklicken des Verweises wird die Seite Funktion loeschen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ermittelt zunächst durch Zugriff auf den Zeicheninhalt des Absatzes (document.getElementsByTagName("p")[0].firstChild.nodeValue) mit der Methode Seite string.length dessen Zeichenanzahl. Der Wert wird für die folgende Anweisung benötigt. Dort wird wieder mit document.getElementsByTagName("p")[0].firstChild auf den Zeicheninhalt des Absatzes zugegriffen. Mit deleteData() wird der Inhalt gelöscht.
Die Methode deleteData() erwartet zwei Parameter:
1. das Zeichen, ab dem gelöscht werden soll (0 steht für "ab dem ersten Zeichen"),
2. wie viele Zeichen gelöscht werden sollen (im Beispiel wird dazu die Variable AnzahlZeichen übergeben, in der die zuvor ermittelte Anzahl der Zeichen im Textknoten gespeichert ist).
Der Verweis im Beispiel bleibt übrigens nach dem Löschen stehen, weil das a-Element des Verweises schon wieder einen neuen Kindknoten darstellt.

Beachten Sie:

Der Internet Explorer 5.x unterstützt diese Methode noch nicht. Um die gesamten Zeichendaten eines Textknotens zu löschen, können Sie sich damit behelfen, auf den Knoten zuzugreifen und der Eigenschaft nodeValue den Wert "" (leere Zeichenkette) zuzuweisen. Im Internet Explorer 6.0 und im Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getAttribute()

Ermittelt den Wert eines bestimmten Attributs in einem Element.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Anzeigen (attr) {
  alert(document.body.getAttribute(attr));
}
</script></head>
<body bgcolor="#FFFFCC" text="#E00000" link="#0000E0" alink="#000080" vlink="#000000">
<a href="javascript:Anzeigen('bgcolor')">Hintergrundfarbe?</a><br>
<a href="javascript:Anzeigen('text')">Textfarbe?</a><br>
<a href="javascript:Anzeigen('link')">Linkfarbe noch nicht besuchte Seiten?</a><br>
<a href="javascript:Anzeigen('vlink')">Linkfarbe besuchte Seiten?</a><br>
<a href="javascript:Anzeigen('alink')">Linkfarbe aktivierte Links?</a>
</body></html>

Erläuterung:

Das Beispiel enthält mehrere Verweise. Alle Verweise rufen beim Anklicken die Seite Funktion Anzeigen() auf, die im Dateikopf notiert ist. Übergeben wird der Funktion der gewünschte Attributname. Die Funktion greift mit document.body auf das body-Element zu. Mit getAttribute() lassen sich dann Attributwerte des einleitenden <body>-Tags ermitteln. Die Methode erwartet den Namen des gewünschten Attributs und liefert dessen Wert zurück. Im Beispiel bekommt sie jeweils den der Funktion übergebenen Parameter attr weitergereicht.

DOM 1.0 JavaScript 1.5 Netscape 6.0 Opera 8 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getAttributeNode()

"Holt" einen Attributknoten. Liefert das Knotenobjekt des gewünschten Attributs zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function anpassen () {
  var CSSKnoten = document.getElementsByTagName("h1")[0].getAttributeNode("style");
  for (var i = 0; i < document.getElementsByTagName("p").length; i++) {
    var CSSKnotenNeu = CSSKnoten.cloneNode(true);
    document.getElementsByTagName("p")[i].setAttributeNode(CSSKnotenNeu);
  }
}
</script></head>
<body>
<h1 style="font-family:Tahoma; font-size:200%; color:red">Rot und Groß!</h1>
<p>ein Absatz</p>
<p>und noch einer</p>
<p>und einer mit einem <a href="javascript:anpassen()">Link zum Anpassen</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält eine Überschrift mit einem style-Attribut sowie drei Textabsätze. Der letzte davon enthält einen Verweis, bei dessen Anklicken die Seite Funktion anpassen() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion holt sich mit document.getElementsByTagName("h1")[0].getAttributeNode("style") den das Knotenobjekt des style-Elements aus der Überschrift. Der Rückgabewert, also das Attributknoten-Objekt, wird in der Variablen CSSKnoten gespeichert. Anschließend wird in einer Seite for-Schleife auf alle p-Elemente des Dokuments zugegriffen. Bei jedem Schleifendurchlauf wird mit nach oben cloneNode() eine Kopie des Attributknotens erzeugt und mit nach unten setAttributeNode() dem jeweils aktuellen p-Element hinzugefügt. Die p-Elemente "erben" auf diese Weise die CSS-Eigenschaften der Überschrift.

Beachten Sie:

Die Methode getAttributeNode() werden Sie selten brauchen. In den meisten Fällen können Sie nach oben getAttribute() verwenden, das sich einfacher handhaben lässt und auch vom Internet Explorer besser unterstützt wird.

Opera unterstützt die Methode getAttributeNode() bereits in Version 7. Dieser Browser hat jedoch spezielle Probleme beim Auslesen von style-Attributknoten. Im Beispiel enthält CSSKnoten zwar einen style-Attributknoten, dieser hat aber keinen Attributwert, sodass die Schleife leere Attribute setzt. Erst Opera 8 interpretiert das Beispiel korrekt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 getElementsByTagName()

Diese Methode entspricht der Seite gleichnamigen Methode beim document-Objekt, bezieht sich jedoch nicht auf das ganze Dokument, sondern nur auf einen bestimmten Elementknoten. Sie liefert einen Array mit allen Elementknoten eines bestimmten Namens zurück, die sich innerhalb des Elements befinden. Erwartet als Parameter den Namen der gesuchten Elemente als String (z.B. "h1" oder "a").

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<h2>Erster Bereich</h2>
<p>erster Absatz</p>
<p>zweiter Absatz</p>

<div id="bereich">
<h2>Zweiter Bereich</h2>
<p>dritter Absatz</p>
<p>vierter Absatz</p>
</div>

<h2>Dritter Bereich</h2>
<p>erster Absatz</p>
<p>zweiter Absatz</p>

<script type="text/javascript">
var bereich = document.getElementById("bereich");
var absaetze = bereich.getElementsByTagName("p");
var ueberschriften = bereich.getElementsByTagName("h2");

for (var i = 0; i < ueberschriften.length; i++) {
  ueberschriften[i].style.color = "blue";
}

for (i = 0; i < absaetze.length; i++) {
  absaetze[i].style.color = "red";
}
</script>
</body></html>

Erläuterung:

Im Beispiel sind verschiedene Überschriften und Absätze notiert, von denen eine Überschrift und zwei Absätze in einem div-Element mit der ID bereich liegen. Im Folgenden sollen alle Überschriften und Absätze innerhalb dieses div-Elements angesprochen und umformatiert werden.

Zunächst wird über Seite document.getElementById() das div-Element angesprochen und der zurückgegebene Elementknoten in der Variable bereich gespeichert Dadurch können wir später mehrmals darauf zuzugreifen, ohne getElementById() mehrmals ausführen zu muss. In den nächsten beiden Zeilen wird die Methode getElementsByTagName() des div-Elementknotens aufgerufen, einmal mit "p" und einmal mit "h2". Diese Aufrufe geben jeweils Arrays mit allen p- bzw. h2-Elementen innerhalb des div-Elements zurück. Diese Arrays werden der Einfachheit halber in den Variablen absaetze und ueberschriften gespeichert, da später mehrfach auf sie zugegriffen wird.

Zuletzt werden beide Arrays mit Seite for-Schleifen durchlaufen. Über ueberschriften[i] bzw. absaetze[i] werden die einzelnen Elementknoten im Array angesprochen. Mithilfe des Seite style-Objekts wird die Seite Textfarbe bei der Überschrift auf blau und bei den Absätzen auf rot gesetzt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 hasChildNodes()

Ermittelt, ob ein Knoten Kindknoten unter sich hat. Gibt den booleschen Wert true zurück, wenn ja, und false, wenn nein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<p></p>
<p>mit Inhalt</p>
<p></p>
<p>mit Inhalt</p>
<script type="text/javascript">
for (var i = 0; i < document.getElementsByTagName("p").length; i++)
  if (document.getElementsByTagName("p")[i].hasChildNodes())
    document.write((i + 1) + ". p-Element hat einen Inhalt!<br>");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält vier Textabsätze. Zwei davon haben einen Zeicheninhalt, zwei andere sind leer. Unterhalb der Textabsätze ist ein JavaScript notiert. Dieses greift in einer Seite for-Schleife der Reihe nach mit document.getElementsByTagName("p") auf alle p-Elemente des Dokuments zu. Dabei wird mit if(document.getElementsByTagName("p")[i].hasChildNodes()) abgefragt, ob das jeweils aktuell in der Schleife behandelte p-Element Kindknoten hat. Wenn ja, wird mit document.write() ins Dokument geschrieben, beim wie vielten Element ein Kindknoten gefunden wurde. Im Beispiel ist das beim zweiten und vierten Element der Fall, da diese beiden Elemente Textknoten enthalten.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 insertBefore()

Fügt innerhalb eines Knotens einen Kindknoten vor einem anderen Kindknoten ein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<p id="derText">Text <i id="derKursiveText">und mit kursivem Text</i></p>
<script type="text/javascript">
var neuB = document.createElement("b");
var neuBText = document.createTextNode("mit fettem Text ");
neuB.appendChild(neuBText);
document.getElementById("derText").insertBefore(neuB, document.getElementById("derKursiveText"));
</script>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit Text und einem Kindelement <i>...</i>. Unterhalb des Absatzes ist ein JavaScript-Bereich notiert. Darin wird zunächst mit Seite document.createElement() ein neues Element des Typs b für fetten Text erzeugt. Anschließend wird mit Seite document.createTextNode() ein Textknoten erzeugt, der dann mit nach oben appendChild() als Inhalt des neu erzeugten b-Elements eingefügt wird. Der ganze Komplex aus b-Element mit Inhalt ist dann in der Variablen neuB gespeichert. Mit document.getElementById("derText") greift das Script sodann auf das p-Element zu und fügt mit insertBefore() das neue Element vor dem anderen Kindelement ein, das die Id "derKursiveText" hat. Am Ende lautet der komplette Inhalt des p-Elements dann:
Text <b>mit fettem Text </b><i>und mit kursivem Text</i>.
Die Methode insertBefore() erwartet also zwei Parameter:
1. der neu einzufügende Kindknoten,
2. ein Kindknoten, vor dem der neue Kindknoten eingefügt werden soll.

Wenn Sie einen Knoten nach einem bestimmten Kindknoten einfügen wollen, können Sie dazu ebenfalls insertBefore() verwenden. Geben Sie dazu als zweiten Parameter den Kindknoten an, der auf den Knoten folgt, nach dem der neue Knoten eingefügt werden soll. Dieser muss keine eigene ID haben, sondern Sie können ihn über nach oben nextSibling ausgehend vom vorigen Kindknoten ansprechen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<p id="derText">Text <i id="derKursiveText">mit kursivem</i> Text</p>
<script type="text/javascript">
var neuB = document.createElement("b");
var neuBText = document.createTextNode(" und fettem");
neuB.appendChild(neuBText);
document.getElementById("derText").insertBefore(neuB, document.getElementById("derKursiveText").nextSibling);
</script>
</body></html>

Erläuterung:

Das Beispiel funktioniert weitestgehend wie das erste, der Text "und fettem" wird jedoch nach dem i-Element eingefügt, sodass das p-Element am Ende Text <i id="derKursiveText">mit kursivem</i><b> und fettem</b> Text enthält. Als zweiter Parameter für insertBefore() wird document.getElementById("derKursiveText").nextSibling übergeben. Dies ist der nächstfolgende Knoten nach dem i-Element, also der Textknoten mit dem Inhalt " Text". Vor diesem Knoten wird das neu erzeugte b-Element eingefügt. Somit wird es nach dem i-Element und vor dem darauffolgenden Knoten eingefügt.

Wenn auf einen Knoten keine weiteren Kindknoten folgen, hat die Eigenschaft nextSibling den Wert null. Dies passt in diesem Fall, denn der zweite Parameter von insertBefore() kann auch null sein. In diesem Fall funktioniert insertBefore() genauso wie nach oben appendChild(): Der neue Knoten wird nach allen anderen Kindknoten, also ans Ende der Liste der Kindknoten eingefügt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 6 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 insertData()

Fügt Zeichendaten in einem Textknoten ab einer bestimmten Zeichenposition ein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function italiano () {
  document.getElementsByTagName("h1")[0].firstChild.insertData(7, "duemilauno ");
}
</script></head>
<body>
<h1>2001 =  oder zweitausendeins</h1>
<a href="javascript:italiano()">sag es in italienisch!</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Überschrift erster Ordnung, in der noch irgendetwas fehlt an Text. Unterhalb davon ist ein Verweis notiert, bei dessen Anklicken die Seite Funktion italiano() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("h1")[0].firstChild auf den Textknoten der Überschrift zu und fügt mit insertData() ab dem 8. Zeichen (Zeichenposition 7, zu zählen begonnen wird bei 0) die Zeichenkette duemilauno ein. Der dahinterstehende Text oder zweitausendeins wird - wie beim Einfügemodus in der Textverarbeitung - einfach nach hinten geschoben.

Beachten Sie:

Der Internet Explorer 5.x interpretiert diese Methode noch nicht. Im Internet Explorer 6.0 und im Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 removeAttribute()

Löscht aus einem Element ein Attribut.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function wegMitAusrichtung () {
  document.getElementById("rechts").removeAttribute("align");
}
</script></head>
<body>
<p id="rechts" align="right"><a href="javascript:wegMitAusrichtung()">Weg mit der Ausrichtung!</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen mit align="right" rechtsbündig ausgerichteten Textabsatz, der einen Verweis enthält. Beim Anklicken des Verweises wird die Seite Funktion wegMitAusrichtung() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("rechts") auf das p-Element zu und löscht mit removeAttribute("align") das align-Attribut. Der Absatz wird dadurch dynamisch neu ausgerichtet (per Voreinstellung linksbündig).

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert das Beispiel nicht. Konqueror 3.1 kennt zwar die Methode removeAttribute(), der rechtsbündige Absatz wird aber nach Entfernen des Attributs nicht wieder linksbündig.

DOM 1.0 JavaScript 1.5 Netscape 6.0 Opera 8 Mozilla Firefox 1 Safari 1.2 removeAttributeNode()

Löscht aus einem Element einen Attributknoten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<script type="text/javascript">
function wegMitAusrichtung () {
  document.getElementById("rechts").removeAttributeNode(document.getElementById("rechts").getAttributeNode("align"));
}
</script>
<body>
<p id="rechts" align="right"><a href="javascript:wegMitAusrichtung()">Weg mit der Ausrichtung!</a></p>
</body></html>

Erläuterung:

Das Beispiel tut das Gleiche wie das Beispiel bei der Beschreibung zu nach oben removeAttribute(). Der Unterschied ist nur, dass removeAttributeNode() als Parameter das Objekt eines Attributknotens erwartet, während removeAttribute() als Parameter den Namen des zu entfernenden Attributs nimmt. Im Beispiel wird document.getElementById("rechts").getAttributeNode("align") übergeben, welches das Objekt des Attributknotens des align-Attributs des p-Elements ist.

Beachten Sie:

Internet Explorer und Konqueror 3.1 interpretieren diese Methode nicht. Opera unterstützt diese Methode bereits in Version 7, hat aber offenbar Probleme, den Absatz sofort linksbündig darzustellen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 removeChild()

Löscht aus einem Element einen Kindknoten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function wegMitEintrag () {
  var Knoten = document.getElementsByTagName("ol")[0].firstChild;
  verschwunden = document.getElementsByTagName("ol")[0].removeChild(Knoten);
  alert(verschwunden.firstChild.nodeValue)
}
</script></head>
<body>
<ol start="1" type="I"><li>Element 1</li><li>Element 2</li><li>Element 3</li></ol>
<p><a href="javascript:wegMitEintrag()">Lösche das erste Element</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält eine nummerierte Liste. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die Seite Funktion wegMitEintrag() aufgerufen, die im Dateikopf notiert ist. In dieser Funktion wird auf den ersten Kindknoten mit document.getElementsByTagName("ol")[0].firstChild zugegriffen. Der Wert wird in der Variablen Knoten gespeichert. Mit removeChild(Knoten) wird der Listenpunkt gelöscht. Dabei wird der Methode als Parameter der zu löschende Knoten übergeben. Die Methode removeChild() gibt als Rückgabewert das gelöschte Element zurück. Dieser Wert ist im Beispiel in der globalen Variablen verschwunden gespeichert. Über diese Variable können Sie weiterhin auf die Eigenschaften des Knotens zugreifen. So wird im Beispiel noch einmal der Inhalt des ersten Kindknotens des gelöschten Elements ausgegeben.

Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die nach oben Besonderheit des Internet Explorers unter Windows im Umgang mit Kindknoten.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 replaceChild()

Ersetzt aus Sicht eines Knotens einen seiner Kindknoten durch einen anderen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function andereAntwort () {
  var Textknoten = document.createTextNode("Du darfst!");
  document.getElementById("z2").replaceChild(Textknoten, document.getElementById("z2").firstChild);
}
</script></head>
<body>
<table border="1" bgcolor="#FFFFC0" width="30%">
<tr><td id="z1">Darf ich?</td><td id="z2">keine Ahnung!</td></tr>
</table>
<p><a href="javascript:andereAntwort()">andere Antwort!</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält eine Tabelle mit zwei Zellen. Unterhalb der Tabelle ist ein Verweis notiert. Beim Anklicken des Verweises wird die Seite Funktion andereAntwort() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erzeugt zunächst mit Seite document.createTextNode() einen neuen Textknoten für die Antwort. Die Antwort wird in Form eines Knotenobjekts benötigt, weil die Methode replaceChild() sowohl den neuen Knoten als auch den zu ersetzenden in Form eines Knotenobjekts erwartet. Im Beispiel wird mit document.getElementById("z2") auf die zweite Tabellenzelle zugegriffen, um deren Inhalt, also den Textknoten, der ihren Kindknoten darstellt, durch den neu erzeugten Textknoten zu ersetzen. Dazu wird replaceChild() angewendet. Als erster Parameter wird der neue Knoten übergeben, als zweiter der zu ersetzende. Der neue Knoten ist im Beispiel in der Variablen Textknoten gespeichert. Auf den zu ersetzenden Knoten wird mit document.getElementById("z2").firstChild zugegriffen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 6 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 replaceData()

Ersetzt Zeichendaten im in einem Textinhalt eines Elements (Textknoten).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function andereAntwort () {
  var Text = "Du darfst!";
  var rd_Start = 0;
  var rd_Laenge = document.getElementById("z2").firstChild.nodeValue.length;
  document.getElementById("z2").firstChild.replaceData(rd_Start, rd_Laenge, Text);
}
</script></head>
<body>
<table border="1" bgcolor="#FFFFC0" width="30%">
<tr><td id="z1">Darf ich?</td><td id="z2">keine Ahnung!</td></tr>
</table>
<p><a href="javascript:andereAntwort()">andere Antwort!</a></p>
</body></html>

Erläuterung:

Das Beispiel tut das Gleiche wie das Beispiel bei der Beschreibung zu nach oben replaceChild(). Der Unterschied ist nur, dass mit replaceData() auf Textebene gearbeitet wird, und dass diese Methode auch gezieltes Ersetzen ab einer bestimmten Zeichenposition und für eine bestimmte Länge erlaubt. Als Parameter erwartet replaceData() zuerst die Startposition in der Zeichenkette, ab der ersetzt werden soll. Im Beispiel wird dazu die Variable rd_Start übergeben, der zuvor 0 zugewiesen wurde. Damit wird ab dem ersten Zeichen ersetzt. Als zweiter Parameter wird übergeben, wie viele Zeichen ersetzt werden sollen. Im Beispiel wird die Variable rd_Laenge übergeben. Dieser wurde zuvor mit document.getElementById("z2").firstChild.nodeValue.length die Zeichenanzahl des gesamten Textknotens der zweiten Tabellenzelle zugewiesen. Im Beispiel wird auf diese Weise der komplette Inhalt der zweiten Tabellenzelle ersetzt. Mit einer Angabe wie 0,1 würden Sie beispielsweise nur das erste Zeichen ersetzen.
Als dritten Parameter erwartet replaceData() eine Zeichenkette, mit der die zuvor im Textknoten markierte Zeichenkette ersetzt werden soll. Im Beispiel wird die Variable Text übergeben, der zuvor ein Wert zugewiesen wurde.

Beachten Sie:

Der Internet Explorer 5.x interpretiert diese Methode noch nicht. Im Internet Explorer 6.0 und im Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setAttribute()

Setzt in einem Element einen Attributwert neu. Ist das Attribut bereits vorhanden, wird sein alter Wert durch den neuen ersetzt. Ist es noch nicht vorhanden, wird es neu angelegt und mit dem neuen Wert belegt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function setzen () {
  document.body.setAttribute("bgColor", document.Formular.bgcolor.value);
  document.body.setAttribute("text", document.Formular.text.value);
}
</script></head>
<body bgcolor="#FFFFCC" text="#E00000">
<form name="Formular" action=""><pre>
Hintergrundfarbe:      <input type="text" name="bgcolor">
Textfarbe:             <input type="text" name="text">
Werte:                 <input type="button" value="setzen" onclick="setzen()">
</pre></form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Eingabefeldern, in denen der Anwender neue Werte für die beiden Attribute bgcolor und text des body-Elements eingeben kann. Beim Anklicken des Buttons unterhalb davon wird die Seite Funktion setzen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.body auf das body-Element zu und weist ihm mit setAttribute() die neuen Attribute zu. Als erster Parameter wird der Name des zu erzeugenden oder zu ersetzenden Attributs übergeben, als zweiter Parameter der gewünschte Wert. Im Beispiel wird als zweiter Parameter jeweils der Wert aus den Formulareingabefeldern übergeben.

Beachten Sie:

Im Internet Explorer 5.0 Macintosh Edition ist das Beispiel zwar nachvollziehbar, jedoch mit sehr seltsamen Ergebnissen.

setAttribute() ist eine Methode des allgemeinen DOM (Kern-DOM). Wenn Sie auf Attribute von HTML-Elementen zugreifen möchten, brauchen Sie setAttribute() strenggenommen nicht, denn das HTML-spezifische DOM definiert alle Attribute als Eigenschaften von Elementobjekten, auf die Sie direkt zugreifen können.
Das Setzen von Attributen über setAttribute() ist meist unnötig umständlich. Anstatt document.body.setAttribute("bgColor", document.Formular.bgcolor.value); können Sie unter Verwendung des HTML-spezifischen DOM ebenso document.body.bgColor = document.Formular.bgcolor.value; notieren. In der Objektreferenz zu den Seite HTML-Elementobjekten werden alle Attribute aufgelistet, die Sie auf diese Weise ansprechen können.

Davon abgesehen hat setAttribute() eine noch viel größere Tücke: Im Internet Explorer hat die Methode einen Fehler. Sie müssen bei einigen Attributen eine spezielle Schreibweise des Attributnamens beachten, damit der Internet Explorer das Attribut tatsächlich setzt. Im Beispiel wurde absichtlich setAttribute("bgColor", ...) und nicht etwa bgcolor notiert. Denn der MSIE verlangt die Schreibweise des Attributnamens, die im HTML-spezifischen DOM für den Direktzugriff definiert wurde - diese lautet in Beispielfall bgColor. Es kommt also auf die korrekte Groß- und Kleinschreibung an.

Im HTML-spezifischen DOM werden Attribute in der Regel klein geschrieben. Es gibt aber neben bgColor eine Reihe von weiterer Attribute, beim denen der Direktzugriff über eine besondere Schreibweise erfolgen muss. Der Unterschied ist zumeist ein Mittelinitial und der Wegfall des Bindestrichs, den einige Attribute enthalten. Es handelt sich um folgende Attribute:

acceptCharset (von accept-charset), accessKey, aLink, bgColor, cellPadding, cellSpacing, chOff (von charoff), className (von class), codeBase, codeType, colSpan, dateTime, frameBorder, htmlFor (von for), httpEquiv (von http-equiv), isMap, longDesc, marginHeight, marginWidth, noHref, noResize, noWrap, readOnly, rowSpan, tabIndex, useMap, vAlign und vLink.

Wenn Sie diese Attribute mit setAttribute() setzen möchten, müssen Sie die angegebene Schreibweise verwenden, damit der Internet Explorer korrekt arbeitet. Allerdings akzeptieren andere Browser diese speziellen Schreibweisen nicht. Deshalb ist es einfacher, den Internet-Explorer-Fehler zu umgehen, indem Sie auf setAttribute() möglichst verzichten und den Direktzugriff nutzen.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 6 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setAttributeNode()

Fügt in ein Element einen neuen Attributknoten ein. Ist der Attributknoten bereits vorhanden, wird der alte Knoten durch den neuen ersetzt. Ist er noch nicht vorhanden, wird er neu angelegt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<h1>Element ohne Eigenschaften?</h1>
<script type="text/javascript">
var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "center";
document.getElementsByTagName("h1")[0].setAttributeNode(Ausrichtung);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Überschrift erster Ordnung - ohne Attribute. Unterhalb davon ist ein JavaScript notiert. Dort wird zunächst mit Seite document.createAttribute() ein neuer Attriutknoten für ein Attribut namens align erzeugt. Der Knoten wird in der Variablen Ausrichtung gespeichert. Durch Ausrichtung.nodeValue lässt sich dem erzeugten Knoten dann ein Wert zuweisen. Mit document.getElementsByTagName("h1")[0] greift das Script schließlich auf das Überschriftenelement zu und weist ihm mit setAttributeNode(Ausrichtung) den zuvor erzeugten und in Ausrichtung gespeicherten Attributknoten zu.

Beachten Sie:

Der Internet Explorer 5.x interpretiert diese Methode noch nicht. Im Internet Explorer 6.0 und im Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.

nach oben
weiter | Seite all
zurück | Seite HTML-Elementobjekte
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / all

SELFHTML

all
Informationsseite

nach unten all: Allgemeines zur Verwendung
nach unten HTML-Elemente ansprechen
nach unten HTML-Elemente mit Namen ansprechen

Eigenschaften:

nach unten className (Klassenname eines Elements)
nach unten dataFld (Datenfeld bei Datenanbindung)
nach unten dataFormatAs (Datentyp bei Datenanbindung)
nach unten dataPageSize (Anzahl Datensätze bei Datenanbindung)
nach unten dataSrc (Datenquelle bei Datenanbindung)
nach unten id (id-Name eines Elements)
nach unten innerHTML (Inhalt eines Elements als HTML)
nach unten innerText (Inhalt eines Elements als Text)
nach unten isTextEdit (Editierbarkeit eines Elements)
nach unten lang (Sprache eines Elements)
nach unten language (Script-Sprache für ein Element)
nach unten length (Anzahl Elemente)
nach unten offsetHeight (Höhe eines Elements)
nach unten offsetLeft (Links-Wert der linken oberen Elementecke)
nach unten offsetParent (Elternelement-Position)
nach unten offsetTop (Obenwert der linken oberen Elementecke)
nach unten offsetWidth (Breite eines Elements)
nach unten outerHTML (Elementinhalt plus äußeres HTML)
nach unten outerText (Elementinhalt plus äußerem Text)
nach unten parentElement (Elternelement)
nach unten parentTextEdit (Editierbarkeit des Elternelements)
nach unten recordNumber (Datensatznummer bei Datenanbindung)
nach unten sourceIndex (wie vieltes Element)
nach unten tagName (HTML-Tag des Elements)
nach unten title (Titel des Elements)

Methoden:

nach unten click() (Element anklicken)
nach unten contains() (Zeichenkette in Element enthalten)
nach unten getAttribute() (Attribut in einem Element ermitteln)
nach unten insertAdjacentHTML() (Element einfügen)
nach unten insertAdjacentText() (Text einfügen)
nach unten removeAttribute() (Attribut aus Element entfernen)
nach unten scrollIntoView() (zu Element scrollen)
nach unten setAttribute() (Attribut eines Elements einfügen)

nach unten

all: Allgemeines zur Verwendung

Das Objekt all, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, ist der Schlüssel zu Kapitel Dynamischem HTML nach dem Ansatz des Internet Explorers ab Version 4.0. Mit Hilfe des all-Objekts haben Sie Script-Zugriff auf alle einzelnen Elemente und Inhalte einer HTML-Datei. Die meisten Eigenschaften können Sie lesen und ändern. Methoden des all-Objekts erlauben unter anderem das Einfügen oder Entfernen von HTML-Tags und von Angaben innerhalb eines HTML-Tags. Auf diese Weise ist der dynamische Zugriff auf alle Bestandteile einer Datei möglich.

Das all-Objekt gehört nicht zum offiziellen JavaScript-Sprachstandard. Es wurde von Microsoft für den Internet Explorer 4.0 implementiert. Das all-Objekt funktioniert zwar auch prima innerhalb von Script-Bereichen, die mit "JavaScript" ausgezeichnet sind, doch es ist bislang eigentlich nur Bestandteil von JScript, dem Microsoft-Derivat von JavaScript. Mit den neuen Browser-Generationen und dem Document Object Model (DOM) wird das all-Objekt durch die Seite HTML-Elementobjekte und das Seite node-Objekt verdrängt. Es hat also keine Zukunft mehr und sollte allenfalls noch aus Gründen der Rückwärtskompatibilität eingesetzt werden.

Damit veraltete Scripte, die ohne Seite Existenzabfrage das all-Objekt verwenden lauffähig sind, haben die Browser Opera ab der Version 7 und Mozilla Firefox 1.0 (dieser nur im Seite Quirks-Modus und auch nicht abfragbar) eine teilweise Unterstützung des all-Objekts eingebaut. Deshalb funktionieren einige der folgenden Beispiele in diesen Browsern. Wenn das jeweilige Element jedoch mit DOM-Methoden angesprochen wird, z.B. mittels Seite document.getElementById(), gelingt der Zugriff auf die Eigenschaften auch schon in älteren Opera-Versionen ab 5.12.

Nichtsdestoweniger sollten Sie all nur verwenden, um den Internet Explorer 4.0 zu bedienen. Das all-Objekt ist aus heutiger Sicht aus dem Grund interessant, weil einige der von Microsoft erfundenen Elementeigenschaften von vielen anderen Browsern übernommen wurden und sich großer Beliebtheit erfreuen, z.B. nach unten innerHTML. Diese können Sie auch zusammen mit DOM-Methoden verwenden.

Eine zusammenhängende Einführung in das Arbeiten mit dem all-Objekt finden Sie im Abschnitt Seite Das ältere DHTML-Modell von Microsoft.

MS JScript MS IE 4.0 Opera 7 Konqueror 3.1 Safari WebKit (Entwicklerversion) HTML-Elemente ansprechen

Das all-Objekt behandelt alle HTML-Tags, die in einer HTML-Datei notiert sind, als Kette von Elementen. Sie können jedes einzelne HTML-Tag in einer Datei ansprechen:

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Aendern () {
  document.all.tags("h1")[0].innerText = "Anderer Inhalt";
}
</script>
</head>
<body>
<h1>eine Überschrift</h1>
<a href="javascript:Aendern()">Aendern</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Überschrift und einen Verweis. Beim Anklicken des Verweises wird die Funktion Aendern() aufgerufen. Diese Funktion ändert den Text der Überschrift dynamisch in "Anderer Inhalt".

Um ein bestimmtes HTML-Tag anzusprechen, notieren Sie document.all.tags. Dahinter folgt, in runden Klammern und in Anführungszeichen, der Name des HTML-Tags, auf das Sie zugreifen möchten. Im Beispiel soll auf ein <h1>-Tag zugegriffen werden, also muss ("h1") notiert werden. Damit haben Sie eine Art Zwischenobjekt, nämlich eine Kette aus allen <h1>-Elementen der Datei. Nun müssen Sie noch angeben, welches Sie meinen. Im Beispiel gibt es zwar nur eine <h1>-Überschrift, aber es könnte ja auch mehrere davon geben. Dazu notieren Sie in eckigen Klammern, das wie vielte HTML-Tag vom angegebenen Typ Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. das erste Element sprechen Sie mit [0] an, das zweite mit [1] usw. Beim Zählen gilt die Reihenfolge, in der die HTML-Tags des ausgewählten Typs in der Datei notiert sind.

Nachdem Sie ein bestimmtes, eindeutiges HTML-Tag angesprochen haben, können Sie dahinter eine der Eigenschaften oder Methoden des all-Objekts auf dieses HTML-Tag anwenden.

MS JScript MS IE 4.0 Opera 7 HTML-Elemente mit Namen ansprechen

Sie können jedes HTML-Element in einem Script auch mit einem Namen ansprechen. Voraussetzung ist, dass das HTML-Element einen Namen durch die Attribute id bzw. name erhalten hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function MachPzuH () {
  document.all.MeinElement.outerHTML = "<h1>" + document.all["MeinElement"].innerText + "<\/h1>";
}
</script>
</head>
<body>
<p id="MeinElement">Ein Element mit Text</p>
<a href="javascript:MachPzuH()">Mach P zu H</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion MachPzuH() aufgerufen. Diese Funktion verwandelt den Absatz dynamisch in eine Überschrift 1. Ordnung.

Um ein HTML-Element mit seinem Namen anzusprechen, müssen Sie im einleitenden Tag des Elements das Attribut id notieren und dahinter einen Namen vergeben. Im Beispiel ist das der Name "MeinElement". Dann können Sie dieses Element mit document.all.ElementName, im Beispiel also mit document.all.MeinElement, ansprechen.

Alternativ können Sie, wie im zweiten Teil des Beispieles, das Element mit document.all["MeinElement"] ansprechen. Über diese Art des Ansprechen eines Elementes können Sie auch Variablen übergeben. Dazu notieren Sie einfach den Variablennamen ohne Anführungszeichen anstatt eines festen Wertes z.B. document.all[Variablenname]. Voraussetzung ist jedoch, dass die Variable auch existiert.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen/Ändern className

Speichert die Klasse, zu der ein Element gehört.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
p.normal { color:black }
p.spezial { color:red }
</style>
</head><body>
<p class="normal" id="derAbsatz">Text</p>
<script type="text/javascript">
document.write("<br>Klasse davor: " + document.all.derAbsatz.className);
document.all.derAbsatz.className = "spezial";
document.write("<br>Klasse danach: " + document.all.derAbsatz.className);
</script>
</body></html>

Erläuterung:

Im Beispiel werden im Dateikopf mit Hilfe von Kapitel Stylesheets zwei Klassen für das p-Element definiert: eine Klasse normal und eine Klasse spezial. Im Dateikörper wird ein Absatz definiert, der zunächst die Klasse normal zugewiesen bekommt. In einem Script wird der Klassenname des Absatzes zunächst mit Seite document.write() zur Kontrolle in die Datei geschrieben. Dann wird dem Absatz die andere definierte Klasse zugewiesen. Dabei übernimmt der Absatz auch dynamisch alle Stylesheet-Eigenschaften der neuen Klasse. Anschließend wird der neue Klassenname zur Kontrolle auch noch mal in die Datei geschrieben.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft className.

MS JScript MS IE 4.0 Lesen/Ändern dataFld

Speichert den Namen eines Datenfeldes, das zur Ausgabe eines Datensatzes gehört. Dies bezieht sich auf das Konzept der Datenanbindung. Zur Einführung in das Thema lesen Sie den Abschnitt über Seite Datenanbindung (Microsoft).

Beispiel:

<tr>
<td><b>Vorname:</b></td>
<td><span id="Test" datafld="vorname">
</span><input type="button" value="Test"
onclick="alert(document.all.Test.dataFld)">
</td>
</tr>

Erläuterung:

Das Beispiel stellt eine Tabellenzeile dar, in der ein Datenfeld ausgegeben wird (Die übrigen Befehle zur Datenanbindung fehlen hier). Zu Testzwecken ist ein Button eingefügt, bei dessen Anklicken der Name des Datenfeldes mit Seite alert() ausgegeben wird. Es ist der Feldname, der im Attribut datafld steht. Wenn Sie den Wert dynamisch ändern, können Sie in der gleichen Tabellenzelle beispielsweise ein anderes Feld ausgeben.

MS JScript MS IE 4.0 Lesen/Ändern dataFormatAs

Speichert den Ausgabetyp eines Datenfeldes, das zur Ausgabe eines Datensatzes gehört. Dies bezieht sich auf das Konzept der Datenanbindung. Zur Einführung in das Thema lesen Sie den Abschnitt über Seite Datenanbindung (Microsoft).

Beispiel:

<tr>
<td><b>Vorname:</b></td>
<td><span id="Test" datafld="vorname" dataformatas="HTML">
</span><input type="button" value="Test"
onclick="alert(document.all.Test.dataFormatAs)">
</td>
</tr>

Erläuterung:

Das Beispiel stellt eine Tabellenzeile dar, in der ein Datenfeld ausgegeben wird (Die übrigen Befehle zur Datenanbindung fehlen hier). Zu Testzwecken ist ein Button eingefügt, bei dessen Anklicken der Ausgabetyp des Datenfeldes mit Seite alert() angezeigt wird. Da dieser im Ausgabebereich mit "HTML" festgelegt wurde, wird dieser Wert ausgegeben.

MS JScript MS IE 4.0 Lesen/Ändern dataPageSize

Speichert, wie viele Datensätze gleichzeitig ausgegeben werden sollen. Dies bezieht sich auf das Konzept der Datenanbindung. Zur Einführung in das Thema lesen Sie den Abschnitt über Seite Datenanbindung (Microsoft).

Beispiel:

<input type="button" value="Test"
onclick="document.all.Anzeigetabelle.dataPageSize = 5">
<table id="Anzeigetabelle" datasrc="#Adressen" datapagesize="1">
...usw. Daten ...
</table>

Erläuterung:

Das Beispiel deutet eine Tabelle an, die zur Ausgabe von Daten aus einer Datenanbindung gedacht ist (Die übrigen Befehle zur Datenanbindung fehlen hier). Da im einleitenden <table>-Tag die Angabe datapagesize="1" steht, wird in der Tabelle immer nur ein Datensatz gleichzeitig ausgegeben. Zu Testzwecken ist ein Button eingefügt, bei dessen Anklicken sich der Wert auf 5 ändert. Danach werden immer 5 Datensätze gleichzeitig angezeigt.

MS JScript MS IE 4.0 Lesen/Ändern dataSrc

Speichert den Verweis auf das <object>-Tag, in dem eine Datenanbindung definiert wird. Dies bezieht sich auf das Konzept der Datenanbindung. Zur Einführung in das Thema lesen Sie den Abschnitt über Seite Datenanbindung (Microsoft).

Beispiel:

<input type="button" value="Test"
onclick="alert(document.all.Anzeigetabelle.dataSrc)">
<table id="Anzeigetabelle" datasrc="#Adressen" datapagesize="1">
...usw. Daten ...
</table>

Erläuterung:

Das Beispiel deutet eine Tabelle an, die zur Ausgabe von Daten aus einer Datenanbindung gedacht ist (Die übrigen Befehle zur Datenanbindung fehlen hier). Zu Testzwecken ist ein Button eingefügt, bei dessen Anklicken der Verweis auf die Datenquelle ausgegeben wird. Da dieser im Ausgabebereich mit "#Adressen" festgelegt wurde, wird dieser Wert ausgegeben. Durch Ändern dieser Objekteigenschaft können Sie dynamisch die Datenquelle wechseln. Voraussetzung ist, dass für den neuen Verweis auf die Datenquelle ein entsprechendes <object>-Tag für die Datenquelle definiert ist.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen id

Speichert den Namen eines Elements.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p id="meinAbsatz">Text</p>
<script type="text/javascript">
document.write("<br>Name des Absatzes: " + document.all.meinAbsatz.id);
</script>
</body></html>

Erläuterung:

Im Beispiel wird ein Absatz definiert, der mit dem id-Attribut den Namen "meinAbsatz" zugewiesen bekommt. In einem Script wird der vergebene Name mit Seite document.write() zur Kontrolle in die Datei geschrieben.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft id.

In Opera funktioniert das Beispiel ab Version 5.12 bei Zugriff mittels Seite document.getElementById().

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen/Ändern innerHTML

Speichert den Inhalt eines HTML-Elements. Wenn Sie beim dynamischen Ändern des gespeicherten Inhalts HTML-Tags notieren, werden diese bei der Aktualisierung des Elementinhalts interpretiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Neu = "neuer <b>fetter<\/b> Text";
function Aendern () {
  document.all.meinAbsatz.innerHTML = Neu;
}
</script>
</head><body>
<p id="meinAbsatz">Text</p>
<a href="javascript:Aendern()">Anderer Text</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Aendern() aufgerufen. Diese Funktion weist dem Absatz mit der id="meinAbsatz" für die Eigenschaft innerHTML den Wert der zuvor definierten Variablen Neu zu. Der Inhalt des Absatzes ändert sich dann dynamisch und berücksichtigt dabei auch die HTML-Formatierung <b>...</b> beim neuen Inhalt des Elements.

Die Eigenschaft innerHTML sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden, sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button-Klicks oder mit einem Seite setTimeout() von einigen Sekunden davor. Bei Anwendung direkt beim Einlesen der Datei meldet der Internet Explorer 4.0 einen Laufzeitfehler.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft innerHTML.

Der Internet Explorer ist aus irgendeinem Grund nicht in der Lage, innerHTML auf die HTML-Elemente table;, thead, tbody, tfoot und tr schreibend anzuwenden. Man kann Tabellen also nicht über innerHTML verändern, sondern ist gezwungen, entweder ein die Tabelle einschließendes Element mit einer kompletten Tabelle neu zu schreiben, oder z.B. mit den DOM-Methoden zu arbeiten.

MS JScript MS IE 4.0 Opera 7 Konqueror 3.1 Safari 1.3 Lesen/Ändern innerText

Speichert den Textinhalt eines HTML-Elements. Sie können den Inhalt dynamisch ändern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Neu = "neuer Text";
function Aendern () {
  document.all.meinAbsatz.innerText = Neu;
}
</script>
</head><body>
<p id="meinAbsatz">Text</p>
<a href="javascript:Aendern()">Anderer Text</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Aendern() aufgerufen. Diese Funktion weist dem Absatz mit der id="meinAbsatz" für die Eigenschaft innerText den Wert der zuvor definierten Variablen Neu zu. Der Inhalt des Absatzes ändert sich dann dynamisch.

Die Eigenschaft innerText sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden, sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button-Klicks oder mit einem Seite setTimeout() von einigen Sekunden davor. Bei Anwendung direkt beim Einlesen der Datei meldet der Internet Explorer 4.0 einen Laufzeitfehler.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft innerText.

MS JScript MS IE 4.0 Lesen isTextEdit

Speichert, ob ein Element editierbar ist oder nicht. Wenn editierbar, hat die Eigenschaft den Wert true, wenn nicht editierbar, hat sie den Wert false. Derzeit sind nur bestimmte Formularelemente editierbar.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Ausgabe () {
  var Ausgabetext = "";
  for (var i = 0; i < document.Testform.length; ++i)
    Ausgabetext = Ausgabetext + "<br>" + document.all.tags("input")[i].isTextEdit;
  document.all.Ausgabe.innerHTML = Ausgabetext;
}
</script>
</head><body>
<form name="Testform" action="">
<input type="text" size="30"><br>
<input type="radio"><br>
<input type="button" value="Test" onclick="Ausgabe()">
</form>
<p id="Ausgabe"></p>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit einigen verschiedenen Elementen. Das letzte Element ist ein Button. Beim Anklicken des Buttons wird die Funktion Ausgabe() aufgerufen. Diese Funktion ermittelt in einer Schleife für jedes Element des Formulars, ob es editierbar ist oder nicht. Die Werte werden in einer Variablen Ausgabetext gesammelt und HTML-formatiert. Am Ende wird dem Textabsatz, der in der Datei am Ende definiert ist, mit der Eigenschaft nach oben innerHTML der gespeicherte Wert von Ausgabetext zugewiesen. Auf diese Weise steht hinterher in der Datei, welche der Formularfelder als editierbar gelten und welche nicht.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen/Ändern lang

Speichert die Sprache eines HTML-Elements, wie sie im lang-Attribut definierbar ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p id="Absatz" lang="it">mi chiamo Stefan</p>
<script type="text/javascript">
alert(document.all.Absatz.lang);
</script>
</body></html>

Erläuterung:

Im Beispiel wird ein Textabsatz definiert, dem mit dem lang-Attribut die Sprache Italienisch (it) zugewiesen wird. Unterhalb davon steht ein kleines JavaScript, das mit Seite alert() den vergebenen Wert für die Sprache ausgibt.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft lang.

In Opera funktioniert das Beispiel ab Version 5.12 bei Zugriff mittels Seite document.getElementById().

MS JScript MS IE 4.0 Konqueror 3.1 Safari 1.3 Lesen language

Speichert, welche Script-Sprache in einem aktuellen Script verwendet wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
alert(document.all.tags("script")[0].language);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt mit Seite alert() aus, welche Script-Sprache die Ausgabe bewirkt hat. Das ist derjenige Wert, der im <script>-Tag beim Attribut language vergeben wurde. Da der Internet Explorer mehrere Script-Sprachen beherrscht, kann dieser Befehl in manchen Fällen für Gewissheit sorgen, etwa, wenn man ihn in eine if-Abfrage einbettet.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft language.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Lesen length

Speichert die Anzahl HTML-Tags einer HTML-Datei. Tags, die aus einem einleitenden und einem abschließenden Tag bestehen, werden als ein Tag gezählt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Ein Absatz</p>
<p>Noch ein Absatz</p>
<script type="text/javascript">
alert("Diese Datei hat " + document.all.length + " HTML-Tags");
</script>
</body></html>

Erläuterung:

Das Beispiel zeigt eine vollständige HTML-Datei mit Grundgerüst, zwei Textabsätzen und einem Script. Innerhalb des Script wird mit Seite alert() ausgegeben, wie viele HTML-Tags die Datei enthält.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen offsetHeight

Speichert die Höhe eines Elements.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body id="DieseDatei">
<script type="text/javascript">
alert(document.all.DieseDatei.offsetHeight);
</script>
</body></html>

Erläuterung:

Das Beispiel gibt mit Seite alert() die reale Höhe des <body>-Tags der Datei aus. Das Ergebnis ist die tatsächliche Anzeigehöhe des Fensters, in dem das Dokument angezeigt wird. Die Eigenschaft lässt sich aber ebensogut auf HTML-Elemente innerhalb der angezeigten Inhalte anwenden.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft offsetHeight.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen offsetLeft

Speichert den Abstand eines Elementes zum linken Rand des in der Eigenschaft nach unten offsetParent gespeicherten Offset-Elternelementes.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<div id="Bereich" style="padding:20px">
<p id="Absatz">Hier etwas Text</p>
</div>
<script type="text/javascript">
alert(document.all.Bereich.offsetLeft);
alert(document.all.Absatz.offsetLeft);
</script>
</body></html>

Erläuterung:

Im Beispiel wird ein <div>-Tag mit einem <p>-Tag innerhalb davon definiert. Damit ein wenig innerer Abstand in die Sache kommt, wird beim <div>-Tag mit Hilfe einer Stylesheet-Angabe ein Innenabstand definiert. Unterhalb dieser Befehle steht ein JavaScript, das die Abstände der beiden Elemente zum jeweiligen linken Rand des Offset-Elternelementes mit Seite alert() ausgibt. Das Offset-Elternelement des Elementes Bereich ist das Body-Element. Für dieses Element wird der Abstand zwischen Body und Bereich in der Eigenschaft offsetLeft gespeichert. Das Offset-Elternelement des Elementes Absatz ist das Element Bereich selbst. In der Eigenschaft offsetLeft ist jetzt der Abstand vom linken Rand vom Element Bereich bis zum Element gespeichert.

Beachten Sie:

Besitzt ein Element einen Innenabstand (padding), so ist im Internet Explorer 5.0 die Eigenschaft offsetLeft fehlerhaft, da der gesetzte Innenabstand in die Angabe mit einfließt. Das gilt auch für Padding-Angaben, die in einem inneren Element definiert sind.

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft offsetLeft.

In Opera funktioniert das Beispiel ab Version 5.12 bei Zugriff mittels Seite document.getElementById().

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen offsetParent

Speichert dasjenige Elternelement eines Elements, von dessen Positionierung die Positionierung des Elements abhängt. offsetParent ist dabei eine Art Zeiger auf das übergeordnete Element. Hinter der Eigenschaft lassen sich wiederum alle Eigenschaften und Methoden des all-Objekts notieren. Diese gelten dann für das Element, auf das der Zeiger zeigt. Existiert kein Offset-Elternelement so hat die Eigenschaft offsetParent den Wert null.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table><tr><td><div>
<a><b id="Fett">Hier etwas Text</b></a>
</div></td></tr></table>

<script type="text/javascript">
var Eltern = document.all.Fett.offsetParent;
while (Eltern) {
  document.write(Eltern.tagName + "<br>");
  Eltern = Eltern.offsetParent;
}
</script>
</body></html>

Erläuterung:

Im Beispiel ist eine Tabelle notiert, in deren einziger Zelle weitere Elemente enthalten sind. Das innerste Element ist das Element <b>..</b> mit dem id-Namen Fett. Im nachfolgenden JavaScript-Bereich wird der Variablen Eltern das Offset-Elternelement des Elementes Fett mit Hilfe von offsetParent zugewiesen. Die nachfolgende Seite while-Schleife gibt zu jedem Offset-Elternelement den Namen des Tags aus. Anschließend wird der Variablen Eltern das Offset-Elternelement des gerade angesprochenen Elementes zugewiesen. Die Schleife bricht ab, wenn kein Offset-Elternelement mehr existiert. So, wie im Beispiel die all-Objekteigenschaft nach unten tagName auf offsetParent angewendet wird, lassen sich auch alle anderen Eigenschaften und Methoden des all-Objekts auf das Element anwenden.

Im Unterschied zur Eigenschaft nach unten parentElement wird in der Eigenschaft offsetParent immer dasjenige Element gespeichert, das die Position des Elements im Fenster festlegt.

Beachten Sie:

Im Internet Explorer 4.0 ist das Offset-Elternelement von einer Tabellenzelle immer die Tabellenzeile. Ab dem Internet Explorer 5.0 wird als Offset-Elternelement einer Zelle die Tabelle selbst angesehen.

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft offsetParent.

In Opera funktioniert das Beispiel ab Version 5.12 bei Zugriff mittels Seite document.getElementById().

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen offsetTop

Speichert den Abstand eines Elements zum oberen Rand des in der Eigenschaft nach oben offsetParent gespeicherten Offset-Elternelements.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<div id="Bereich" style="padding:20px">
<p id="Absatz">Hier etwas Text</p>
</div>
<script type="text/javascript">
alert(document.all.Bereich.offsetTop);
alert(document.all.Absatz.offsetTop);
</script>
</body></html>

Erläuterung:

Im Beispiel wird ein <div>-Tag mit einem <p>-Tag innerhalb davon definiert. Damit ein wenig innerer Abstand in die Sache kommt, wird beim <div>-Tag mit Hilfe einer Stylesheet-Angabe ein Innenabstand definiert. Unterhalb dieser Elemente ist ein JavaScript notiert, das mit Seite alert() die Abstände der beiden Elemente zum oberen Rand des Offset-Elternelementes ausgibt.

Beachten Sie:

Im Internet Explorer 5.0 wird in einem untergeordneten Element eine bestehende Padding-Angabe des übergeordneten Elementes nicht berücksichtigt, sofern sich kein Element vor dem abgefragten Element befindet.

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft offsetTop.

In Opera funktioniert das Beispiel ab Version 5.12 bei Zugriff mittels Seite document.getElementById().

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen offsetWidth

Speichert die Breite eines Elements.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body id="DieseDatei">
<script type="text/javascript">
alert(document.all.DieseDatei.offsetWidth);
</script>
</body></html>

Erläuterung:

Das Beispiel gibt mit Seite alert() die reale Breite des <body>-Tags der Datei aus. Das Ergebnis ist die tatsächliche Anzeigebreite des Fensters, in dem das Dokument angezeigt wird. Die Eigenschaft lässt sich aber ebensogut auf HTML-Elemente innerhalb der angezeigten Inhalte anwenden.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft offsetWidth.

MS JScript MS IE 4.0 Opera 7 Safari 1.3 Lesen/Ändern outerHTML

Speichert den Inhalt eines HTML-Tags plus das Anfangs- und End-Tag mit allen Angaben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Test</title>
</head>
<body>
<a id="Verweis" href="javascript:alert(this.Verweis.outerHTML)">Verweis</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis, der beim Anklicken seinen eigenen vollständigen HTML-Konstrukt mit Seite alert() ausgibt.

Die Eigenschaft outerHTML sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden, sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button-Klicks oder mit einem Seite setTimeout() von einigen Sekunden davor. Bei Anwendung direkt beim Einlesen der Datei meldet der Internet Explorer 4.0 einen Laufzeitfehler.

MS JScript MS IE 4.0 Opera 7 Safari 1.3 Lesen/Ändern outerText

Speichert den gleichen Wert wie nach oben innerText, kann jedoch beim Ändern umgebende HTML-Tags entfernen und durch Text ersetzen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  document.all.fett.outerText = document.all.fett.innerText;
}
</script>
</head><body>
<p>Text mit <b id="fett" onclick="Test()">fetter Schrift</b></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Text mit einem als fett markierten Teil. Beim Anklicken des fetten Teils wird die Funktion Test() aufgerufen. Diese Funktion ersetzt den Wert von outerText des fetten Elements durch den Wert von innerText des gleichen Elements. Der Effekt ist, dass die Formatierung mit <b>...</b> verloren geht, weil outerText intern die umgebende HTML-Formatierung mit speichert, innerText aber nicht.

Die Eigenschaft outerText sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden, sondern immer erst abhängig von Aktionen wie Verweisklicks oder Button-Klicks oder mit einem Seite setTimeout() von einigen Sekunden davor. Bei Anwendung direkt beim Einlesen der Datei meldet der Internet Explorer 4.0 einen Laufzeitfehler.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft outerText.

MS JScript MS IE 4.0 Opera 7 Konqueror 3.1 Safari 1.3 Lesen parentElement

Speichert das Elternelement eines Elements. parentElement ist dabei eine Art Zeiger auf das übergeordnete Element. Hinter der Eigenschaft lassen sich wiederum alle Eigenschaften und Methoden des all-Objekts notieren. Diese gelten dann für das Element, auf das der Zeiger zeigt. Existiert kein Elternelement so hat die Eigenschaft parentElement den Wert null.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<table><tr><td><div>
<a><b id="Fett">Hier etwas Text</b></a>
</div></td></tr></table>

<script type="text/javascript">
var Eltern = document.all.Fett.parentElement;
while (Eltern) {
  document.write(Eltern.tagName + "<br>");
  Eltern = Eltern.parentElement;
}
</script>
</body></html>

Erläuterung:

Im Beispiel ist eine Tabelle notiert, in deren einziger Zelle weitere Elemente enthalten sind. Das innerste Element ist das Element <b>..</b> mit dem Namen Fett. Im JavaScript-Bereich wird der Variablen Eltern das Elternelement des Elementes Fett mit der Eigenschaft parentElement zugewiesen. Die nachfolgende Seite while-Schleife gibt von jedem Elternelement den Namen des Tags aus. Anschließend wird der Variablen Eltern das Elternelement des gerade angesprochenen Elementes zugewiesen. Die Schleife bricht ab, wenn kein Elternelement mehr existiert. So, wie im Beispiel die all-Objekteigenschaft nach unten tagName auf parentElement angewendet wird, lassen sich auch alle anderen Eigenschaften und Methoden des all-Objekts auf das Element anwenden.

Im Unterschied zur Eigenschaft nach oben offsetParent wird in der Eigenschaft parentElement immer das unmittelbar übergeordnete Element gespeichert.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft parentElement.

MS JScript MS IE 4.0 Lesen parentTextEdit

Speichert das nächsthöhere Element in der Elementhierarchie, das Editieren von Text erlaubt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  alert(document.all.Verweis.parentTextEdit.tagName);
}
</script>
</head><body>
<a id="Verweis" href="javascript:Test()">Editieren?</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion gibt mit Seite alert() den Namen desjenigen HTML-Tags aus, das aus Sicht des Verweises das nächsthöhere Element darstellt, das Editieren von Text erlaubt. Im Beispiel ist dies das <body>-Tag. Der Inhalt dieses Tags ist zwar nicht editierbar, aber es ist dasjenige nächsthöhere Tag, unterhalb dessen editierbare Elemente wie Formulareingabefelder notiert werden können.

Beachten Sie:

Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

MS JScript MS IE 4.0 Lesen recordNumber

Speichert, der wie vielte Datensatz angezeigt wird. Dies bezieht sich auf das Konzept der Datenanbindung. Zur Einführung in das Thema lesen Sie den Abschnitt über Seite Datenanbindung (Microsoft).

Beispiel:

<tr>
<td><b>Vorname:</b></td>
<td><span id="Test" datafld="vorname">
</span><input type="button" value="Test"
onclick="alert(document.all.Test.recordNumber)">
</td>
</tr>

Erläuterung:

Das Beispiel stellt eine Tabellenzeile dar, in der ein Datenfeld ausgegeben wird (Die übrigen Befehle zur Datenanbindung fehlen hier). Zu Testzwecken ist ein Button eingefügt, bei dessen Anklicken die Datensatznummer des aktuell angezeigten Datensatzes ausgegeben wird.

MS JScript MS IE 4.0 Opera 7.60 Konqueror 3.1 Lesen sourceIndex

Speichert, das wievielte HTML-Element ein Element innerhalb einer HTML-Datei ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Etwas Text mit<br>Zeilenumbruch</p>
<p id="Absatz">HTML-Element, aber das wie vielte?</p>
<a href="javascript:alert(document.all.Absatz.sourceIndex)">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält verschiedene Elemente, unter anderem einen Absatz mit dem id-Namen "Absatz". Außerdem enthält das Beispiel einen Verweis. Beim Anklicken des Verweises wird mit Seite alert() ausgegeben, das wie vielte Element der Absatz mit besagtem Namen innerhalb der HTML-Datei ist. Im Beispiel ist es das 7. Element, denn es werden alle einleitenden und alleinstehenden HTML-Tags der gesamten HTML-Datei gezählt.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen tagName

Speichert den HTML-Tagnamen eines Elements.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body id="DieseDatei">
<a href="javascript:alert(document.all.DieseDatei.tagName)">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird mit Seite alert() der HTML-Tagname desjenigen Elements ausgegeben, das den id-Namen "DieseDatei" hat. Im Beispiel ist es das <body>-Tag.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft tagName.

In Opera funktioniert das Beispiel ab Version 5.12 bei Zugriff mittels Seite document.getElementById().

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen/Ändern title

Speichert den Wert, der im Attribut title eines Elements vergeben wurde. Dieses Attribut ist beim Internet Explorer bei allen sichtbaren Elementen erlaubt und bewirkt beim Darüberfahren mit der Maus, dass eine Art Tooltip (Hilfetext-Popup) zu dem Element angezeigt wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p id="Absatz" title="Hilfe zum Text" onclick="alert(document.all.Absatz.title)">Text</p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz. Dieser Textabsatz erhält mit dem Attribut title einen Tooltip-Text. Beim Darüberfahren mit der Maus erscheint der Tooltip als kleines Popup-Fenster. Beim Anklicken des Absatzes wird der gleiche Text mit Seite alert() ausgegeben.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Eigenschaft title.

In Opera funktioniert das Beispiel ab Version 5.12 bei Zugriff mittels Seite document.getElementById().

MS JScript MS IE 4.0 Opera 7 click()

Bewirkt, dass ein Element angeklickt wird, so wie wenn der Anwender mit der Maus auf das Element klickt. Erwartet keine Parameter.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a id="V1" href="javascript:alert('Verweis 1 geklickt')">Verweis 1</a><br>
<a href="javascript:document.all.V1.click()">Verweis 2</a><br>
</body></html>

Erläuterung:

Das Beispiel enthält zwei Verweise. Beim Klicken auf den ersten Verweis wird mit Seite alert() die Meldung "Verweis 1 geklickt" ausgegeben. Beim Klicken auf den zweiten Verweis wird die Methode click() auf den ersten Verweis angewendet. Dadurch wird dieser scriptgesteuert angeklickt, und es wird trotz Klickens auf den zweiten Verweis die Meldung "Verweis 1 geklickt" ausgegeben.

MS JScript MS IE 4.0 Opera 7 Konqueror 3.1 Safari 1.3 contains()

Ermittelt, ob ein Element ein bestimmtes anderes Element enthält. Erwartet als Parameter das Elementobjekt des gesuchten inneren Elements.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  if (document.all.dieseDatei.contains(document.all.Absatz))
    alert(document.all.Absatz.innerText);
}
</script>
</head><body id="dieseDatei">
<p id="Absatz">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion überprüft, ob das <body>-Tag, das den id-Namen dieseDatei hat, ein Element enthält, das den id-Namen Absatz hat. Wenn ja, wird der innere Text dieses Elements mit Seite alert() ausgegeben.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Methode contains().

MS JScript MS IE 4.0 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 getAttribute()

Ermittelt, ob ein Element in seinem HTML-Tag ein bestimmtes Attribut enthält oder nicht. Gibt den Wert zurück, den das Attribut hat, falls das Attribut gefunden wird, ansonsten die leere Zeichenkette "". Erwartet folgende Parameter:
1. Attribut = der Name des gesuchten Attributs im HTML-Tag.
2. Groß/Kleinschreibung = 1 übergeben, wenn bei dem Attribut Groß/Kleinschreibung unterschieden werden soll, oder 0, wenn es egal ist, wie das Attribut geschrieben ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  if (document.all.Absatz.getAttribute("align", 0) == "center")
    document.all.Absatz.setAttribute("align", "right", 0);
}
</script>
</head><body>
<p id="Absatz" align=center>Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen zentriert ausgerichteten Absatz mit dem id-Namen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion ermittelt mit getAttribute(), ob das Element mit dem Namen Absatz ein Attribut align enthält. Außerdem wird abgefragt, ob der Wert dieser Angabe gleich center ist. Da dies im Beispiel der Fall ist, wird die abhängige Anweisung ausgeführt. Darin wird das Attribut align mit Hilfe von nach unten setAttribute() dynamisch geändert, sodass der Absatz hinterher rechtsbündig ausgerichtet ist.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Methode getAttribute().

MS JScript MS IE 4.0 Opera 7 Konqueror 3.3 insertAdjacentHTML()

Fügt zusätzlichen HTML-Code vor oder oder nach einem Element ein. Erwartet folgende Parameter:
1. Position = Angabe, wo genau der HTML-Code hinzugefügt werden soll. Übergeben Sie BeforeBegin, wenn der Code vor dem einleitenden HTML-Tag des Elements eingefügt werden soll, AfterBegin, wenn der Code nach dem einleitenden Tag vor dem Inhalt eingefügt werden soll, BeforeEnd, wenn der Code am Ende des Inhalts vor dem abschließenden Tag eingefügt werden soll, oder AfterEnd, wenn der Code hinter dem abschließenden HTML-Tag eingefügt werden soll.
2. Code = Der HTML-Code, der eingefügt werden soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var i = 0;
function Nummerieren () {
  var Nummerierung = "<b>" + (i + 1) + ".<\/b> ";
  if (i < document.all.tags("p").length)
    document.all.tags("p")[i].insertAdjacentHTML("AfterBegin", Nummerierung);
  i = i + 1;
}
</script>
</head><body>
<p>Ein Absatz</p>
<p>Ein anderer Absatz</p>
<p>Noch ein Absatz</p>
<p><a href="javascript:Nummerieren()">Nummerieren</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält drei Absätze und einen Verweis. Bei jedem Klick auf den Verweis wird der jeweils nächste Absatz dynamisch durchnummeriert. Dazu wird beim Klick auf den Verweis die Funktion Nummerieren() aufgerufen. Diese Funktion verwaltet die beiden global definierten Variablen i (Zähler für die Nummerierung) und Nummerierung (HTML-formatierte Zeichenkette, die die Nummerierung hinzufügt). Solange der Zähler für die Nummerierung kleiner ist als die Anzahl der verfügbaren Absätze, wird im jeweils nächsten Absatz mit insertAdjacentHTML() hinter dem einleitenden <p>-Tag dynamisch der aktuelle Wert der Variablen Nummerierung eingefügt.

Beachten Sie:

Konqueror 3.4 beachtet das Leerzeichen nach dem schließenden b-Tag nicht, die einfügten Nummern schließen daher direkt an den Text des Absatzes an ("1.Ein Absatz" statt "1. Ein Absatz"). Zur Abhilfe könnte ein anstelle eines normalen Leerzeichens ein Seite erzwungenes Leerzeichen &nbsp; verwendet werden.

MS JScript MS IE 4.0 Opera 7 insertAdjacentText()

Fügt zusätzlichen Text vor oder oder nach einem Element ein. Erwartet folgende Parameter:
1. Position = Angabe, wo genau der Text hinzugefügt werden soll. Übergeben Sie BeforeBegin, wenn der Text vor dem einleitenden HTML-Tag des Elements eingefügt werden soll, AfterBegin, wenn der Text nach dem einleitenden Tag vor dem Inhalt eingefügt werden soll, BeforeEnd, wenn der Text am Ende des Inhalts vor dem abschließenden Tag eingefügt werden soll, oder AfterEnd, wenn der Text hinter dem abschließenden HTML-Tag eingefügt werden soll.
2. Text = Der Text, der eingefügt werden soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Ergaenzen () {
  document.all.DynText.insertAdjacentText("BeforeEnd", " wird dynamisch!");
}
</script>
</head><body>
<p id="DynText">HTML</p>
<a href="javascript:Ergaenzen()">Ergänzen</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Absatz mit dem id-Namen DynText, der nur das Wort "HTML" enthält. Beim Anklicken des Verweises unterhalb wird die Funktion Ergaenzen() aufgerufen. Diese Funktion fügt vor dem abschließenden Tag den Text " wird dynamisch" ein.

MS JScript MS IE 4.0 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 removeAttribute()

Entfernt ein bestimmtes Attribut aus einem bestimmten HTML-Tag. Erwartet folgende Parameter:
1. Attribut = der Name des gesuchte Attributs im HTML-Tag.
2. Groß/Kleinschreibung = 1 übergeben, wenn bei dem Attribut Groß/Kleinschreibung unterschieden werden soll, oder 0, wenn es egal ist, wie das Attribut geschrieben ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  document.all.Absatz.removeAttribute("align", 0);
}
</script>
</head><body>
<p id="Absatz" align="center">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen zentriert ausgerichteten Absatz mit dem id-Namen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion entfernt aus dem Absatz das Attribut align, sodass der Absatz hinterher linksbündig ausgerichtet ist, weil das die Normaleinstellung für das <p>-Tag ist.

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht. Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Methode removeAttribute().

MS JScript MS IE 4.0 Opera 9 Mozilla Firefox 1 Safari 2.0 scrollIntoView()

Positioniert den Inhalt im Anzeigefenster des Browsers so, dass ein bestimmtes Element angezeigt wird. Erwartet einen Parameter. Übergeben Sie true, wenn der Inhalt so positioniert werden soll, dass das Element oben im Anzeigefenster erscheint, oder false, wenn das Element unten im Anzeigefenster platziert sein soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  document.all.Absatz.scrollIntoView(true);
}
</script>
</head><body>
<p id="Absatz">Ein Text</p>
<script type="text/javascript">
for (i = 1; i < 100; i++)
  document.write("<br>Zeile " + i);
</script>
<p><a href="javascript:Test()">Test</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit dem id-Namen Absatz. Dann schreibt das Beispiel in einem Script-Bereich mit der Seite write()-Methode 100 Zeilen in die Datei, damit die Datei zu Testzwecken schön lang ist. Unterhalb davon ist dann ein Verweis notiert. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion positioniert den Inhalt des Anzeigefensters neu, und zwar so, dass der Textabsatz Absatz am oberen Fensterrand angezeigt wird.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari 2.0 unterstützt jedoch die Methode scrollIntoView().

MS JScript MS IE 4.0 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 setAttribute()

Fügt in einem bestimmten HTML-Tag ein bestimmtes Attribut hinzu. Erwartet folgende Parameter:
1. Attribut = der Name des gewünschten Attributs.
2. Wert = die gewünschte Wertzuweisung für die Zusatzangabe.
3. Groß/Kleinschreibung = 1 übergeben, wenn bei dem Attribut Groß/Kleinschreibung unterschieden werden soll, oder 0, wenn es egal ist, wie das Attribut geschrieben wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  document.all.Absatz.setAttribute("align", "center", 0);
}
</script>
</head><body>
<p id="Absatz">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen zentriert ausgerichteten Absatz mit dem id-Namen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion fügt in dem Absatz das Attribut align hinzu, und zwar mit der Wertzuweisung center. Dadurch wird der Absatz hinterher zentriert ausgerichtet.

Beachten Sie:

Das Beispiel kann im Safari nicht nachvollzogen werden, da dieser das Objekt document.all nicht kennt. Safari unterstützt jedoch die Methode setAttribute().

nach oben
weiter | Seite style
zurück | Seite node
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / style

SELFHTML

style
Informationsseite

nach unten style: Allgemeines zur Verwendung
nach unten Style-Eigenschaften

Methoden:

nach unten getAttribute() (Stylesheet-Angabe ermitteln)
nach unten removeAttribute() (Stylesheet-Angabe entfernen)
nach unten setAttribute() (Stylesheet-Angabe einfügen)
nach unten

style: Allgemeines zur Verwendung

Das Objekt style liegt in der JavaScript-Objekthierarchie nach dem Objektmodell des Internet Explorers ab Version 4.0 unterhalb des Seite all-Objekts und regelt den Zugriff auf Kapitel Stylesheet-Angaben, die für ein HTML-Element definiert sind. Sie können alle Sheet-Angaben auslesen und dynamisch ändern. So können Sie HTML-Elemente mit Hilfe von Scripts nach Belieben umformatieren.

Der Zugriff auf HTML-Elemente erfolgt dabei genau so wie beim all-Objekt (lesen Sie dazu beim all-Objekt vor allem die Passagen Seite HTML-Elemente ansprechen und Seite HTML-Elemente mit Namen ansprechen). Beim style-Objekt wird lediglich zusätzlich style notiert und dahinter die gewünschte Stylesheet-Angabe.

Auch im Document Object Model (DOM) der Version 2.0 gibt es das style-Objekt. Um auf die Eigenschaften und Methoden des style-Objekts nach DOM-Syntax zugreifen zu können, benötigen Sie einen Elementknoten. Um auf vorhandene Elementknoten im Dokument zuzugreifen, werden die Methoden des Seite document-Objekts Seite getElementById, Seite getElementsByName und Seite getElementsByTagName verwendet. Ausgehend davon können Sie angesprochene Element mit Hilfe von Scripts umformatieren.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Beispiel für ältere Microsoft-Syntax (all):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function MachGelb () {
  document.all.DynText.style.backgroundColor = "yellow";
  document.all.DynText.style.fontSize = "200%";
  document.all.DynText.style.padding = "15px";
}
</script>
</head><body>
<p id="DynText">Das ist der Text</p>
<a href="javascript:MachGelb()">gelb</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Textabsatz mit dem id-Namen DynText. Beim Anklicken des Verweises unterhalb wird die Funktion MachGelb() aufgerufen. Diese Funktion weist dem Textabsatz verschiedene Stylesheet-Angaben zu, zum Beispiel die Angabe für die Hintergrundfarbe (backgroundColor) und dabei den Wert für gelb (yellow). Der Textabsatz erhält dadurch beim Anklicken des Verweises dynamisch eine gelbe Hintergrundfarbe und die übrigen Attribute.

Es ist egal, ob das betroffene HTML-Element vorher bereits Stylesheet-Angaben enthält oder nicht. Im Beispiel enthält es keine.

Nach dem gleichen Schema können Sie alle CSS Stylesheet-Angaben behandeln, die der Internet Explorer kennt. Die Tabelle nach unten Style-Eigenschaften listet Stylesheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Stylesheet-Angaben in JavaScript.

DOM 2.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 6 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Beispiel für DOM-Syntax:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function setCSS () {
  for (var i = 0; i < document.getElementsByTagName("p").length; i++) {
    document.getElementsByTagName("p")[i].style.border = "solid red 10px";
    document.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";
    document.getElementsByTagName("p")[i].style.color = "#FFFFFF";
    document.getElementsByTagName("p")[i].style.fontSize = "250%";
  }
}
</script>
</head><body>
<p>Absatz</p>
<p>zweiter Absatz</p>
<p>dritter Absatz</p>
<p><a href="javascript:setCSS()">Stylesheet-Power!</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält vier Textabsätze. Im letzten davon ist ein Verweis notiert, bei dessen Anklicken die Seite Funktion setCSS() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift in einer Seite for-Schleife der Reihe nach mit document.getElementsByTagName("p")[i] auf alle p-Elemente im Dokument zu. Mit style dahinter wird auf die CSS-Eigenschaften des Elements zugegriffen. Dahinter folgt die gewünschte CSS-Eigenschaft. Dieser wird jeweils ein gültiger Wert zugewiesen.

Es ist egal, ob das betroffene HTML-Element vorher bereits Stylesheet-Angaben enthält oder nicht. Im Beispiel enthält es keine.

Nach dem gleichen Schema können Sie alle CSS Stylesheet-Angaben behandeln, die CSS2 kennt. Die Tabelle nach unten Style-Eigenschaften listet Stylesheet-Angaben auf. Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Stylesheet-Angaben in JavaScript.

Style-Eigenschaften

Eine wichtige Regel müssen Sie kennen: Wenn in einem Script eine CSS-Angabe ausgelesen oder verändert werden soll, entfällt der Bindestrich, und der erste Buchstabe des Wortes hinter dem Bindestrich wird großgeschrieben. Die CSS-Eigenschaft background-color wird innerhalb eines JavaScripts also zu backgroundColor.

Die folgende Tabelle listet Style-Eigenschaften auf. Die Tabelle enthält links die Stylesheet-Angabe, wie Sie sie in JavaScript im Zusammenhang mit dem Style-Objekt notieren müssen. In der mittleren Spalte steht eine Kurzbeschreibung, was die Angabe bewirkt. Rechts steht jeweils ein Verweis "CSS-Beschreibung". Diese Verweise führen zu der Beschreibung der jeweiligen Stylesheet-Angabe im Kapitel über Kapitel Stylesheets. Diesen Verweisen sollten Sie folgen, wenn Sie wissen möchten, welche Werte die entsprechende Stylesheet-Angabe haben kann.

JavaScript-Angabe | Kurzbeschreibung | siehe auch
background | Hintergrundbild | Seite CSS-Beschreibung
backgroundAttachment | Wasserzeichen-Effekt | Seite CSS-Beschreibung
backgroundColor | Hintergrundfarbe | Seite CSS-Beschreibung
backgroundImage | Hintergrundbild | Seite CSS-Beschreibung
backgroundPosition | Position des Hintergrundbilds | Seite CSS-Beschreibung
backgroundRepeat | Wallpaper-Effekt | Seite CSS-Beschreibung
border | Rahmen | Seite CSS-Beschreibung
borderBottom | Rahmen unten | Seite CSS-Beschreibung (border)
borderBottomColor | Rahmenfarbe unten | Seite CSS-Beschreibung (border-color)
borderBottomStyle | Rahmenart unten | Seite CSS-Beschreibung (border-style)
borderBottomWidth | Rahmendicke unten | Seite CSS-Beschreibung
borderColor | Rahmenfarbe | Seite CSS-Beschreibung
borderLeft | Rahmen links | Seite CSS-Beschreibung (border)
borderLeftColor | Rahmenfarbe links | Seite CSS-Beschreibung (border-color)
borderLeftStyle | Rahmenart links | Seite CSS-Beschreibung (border-style)
borderLeftWidth | Rahmendicke links | Seite CSS-Beschreibung
borderRight | Rahmen rechts | Seite CSS-Beschreibung (border)
borderRightColor | Rahmenfarbe rechts | Seite CSS-Beschreibung (border-color)
borderRightStyle | Rahmenart rechts | Seite CSS-Beschreibung (border-style)
borderRightWidth | Rahmendicke rechts | Seite CSS-Beschreibung (border-width)
borderStyle | Rahmenart | Seite CSS-Beschreibung
borderTop | Rahmen oben | Seite CSS-Beschreibung (border)
borderTopColor | Rahmenfarbe oben | Seite CSS-Beschreibung (border-color)
borderTopStyle | Rahmenart oben | Seite CSS-Beschreibung (border-style)
borderTopWidth | Rahmendicke oben | Seite CSS-Beschreibung (border-width)
borderWidth | Rahmendicke | Seite CSS-Beschreibung
bottom | Position von unten | Seite CSS-Beschreibung
captionSide | Tabellenbeschriftung | Seite CSS-Beschreibung
clear | Fortsetzung bei Textumfluss | Seite CSS-Beschreibung
clip | Anzeigebereich eingrenzen | Seite CSS-Beschreibung
color | Textfarbe | Seite CSS-Beschreibung
cursor | Mauszeiger | Seite CSS-Beschreibung
direction | Schreibrichtung | Seite CSS-Beschreibung
display | Sichtbarkeit (ohne Platzhalter) | Seite CSS-Beschreibung
emptyCells | Darstellung leerer Tabellenzellen | Seite CSS-Beschreibung
cssFloat | Textumfluss | Seite CSS-Beschreibung
font | Schrift | Seite CSS-Beschreibung
fontFamily | Schriftart | Seite CSS-Beschreibung
fontSize | Schriftgröße | Seite CSS-Beschreibung
fontStretch | Schriftlaufweite | Seite CSS-Beschreibung
fontStyle | Schriftstil | Seite CSS-Beschreibung
fontVariant | Schriftvariante | Seite CSS-Beschreibung
fontWeight | Schriftgewicht | Seite CSS-Beschreibung
height | Höhe eines Elements | Seite CSS-Beschreibung
left | Position von links | Seite CSS-Beschreibung
letterSpacing | Zeichenabstand | Seite CSS-Beschreibung
lineHeight | Zeilenhöhe | Seite CSS-Beschreibung
listStyle | Listendarstellung | Seite CSS-Beschreibung
listStyleImage | Grafik für Aufzählungslisten | Seite CSS-Beschreibung
listStylePosition | Listeneinrückung | Seite CSS-Beschreibung
listStyleType | Darstellungstyp der Liste | Seite CSS-Beschreibung
margin | Abstand/Rand | Seite CSS-Beschreibung
marginBottom | Abstand/Rand unten | Seite CSS-Beschreibung
marginLeft | Abstand/Rand links | Seite CSS-Beschreibung
marginRight | Abstand/Rand rechts | Seite CSS-Beschreibung
marginTop | Abstand/Rand oben | Seite CSS-Beschreibung
maxHeight | Maximalhöhe | Seite CSS-Beschreibung
maxWidth | Maximalbreite | Seite CSS-Beschreibung
minHeight | Mindesthöhe | Seite CSS-Beschreibung
minWidth | Mindestbreite | Seite CSS-Beschreibung
overflow | übergroßer Inhalt | Seite CSS-Beschreibung
padding | Innenabstand | Seite CSS-Beschreibung
paddingBottom | Innenabstand unten | Seite CSS-Beschreibung
paddingLeft | Innenabstand links | Seite CSS-Beschreibung
paddingRight | Innenabstand rechts | Seite CSS-Beschreibung
paddingTop | Innenabstand oben | Seite CSS-Beschreibung
pageBreakAfter | Seitenumbruch danach | Seite CSS-Beschreibung
pageBreakBefore | Seitenumbruch davor | Seite CSS-Beschreibung
position | Positionsart | Seite CSS-Beschreibung
right | Position von rechts | Seite CSS-Beschreibung
scrollbar3dLightColor | Farbe für 3D-Effekte (Scrollbars) | Seite CSS-Beschreibung
scrollbarArrowColor | Farbe für Verschiebepfeile (Scrollbars) | Seite CSS-Beschreibung
scrollbarBaseColor | Basisfarbe der Scroll-Leiste (Scrollbars) | Seite CSS-Beschreibung
scrollbarDarkshadowColor | Farbe für Schatten (Scrollbars) | Seite CSS-Beschreibung
scrollbarFaceColor | Farbe für Oberfläche (Scrollbars) | Seite CSS-Beschreibung
scrollbarHighlightColor | Farbe für oberen und linken Rand (Scrollbars) | Seite CSS-Beschreibung
scrollbarShadowColor | Farbe für unteren und rechten Rand (Scrollbars) | Seite CSS-Beschreibung
scrollbarTrackColor | Farbe für freibleibenden Verschiebeweg (Scrollbars) | Seite CSS-Beschreibung
tableLayout | Tabellentyp | Seite CSS-Beschreibung
textAlign | Ausrichtung | Seite CSS-Beschreibung
textDecoration | Textdekoration | Seite CSS-Beschreibung
textIndent | Texteinrückung | Seite CSS-Beschreibung
textTransform | Text-Transformation | Seite CSS-Beschreibung
top | Position von oben | Seite CSS-Beschreibung
verticalAlign | vertikale Ausrichtung | Seite CSS-Beschreibung
visibility | Sichtbarkeit (mit Platzhalter) | Seite CSS-Beschreibung
width | Breite eines Elements | Seite CSS-Beschreibung
wordSpacing | Wortabstand | Seite CSS-Beschreibung
zIndex | Schichtposition bei Überlappung | Seite CSS-Beschreibung

MS JScript MS IE 4.0 getAttribute()

Ermittelt, ob ein HTML-Element eine bestimmte Stylesheet-Angabe enthält bzw. welchen Wert. Gibt den Wert zurück, den die Stylesheet-Angabe hat, falls sie gefunden wird, ansonsten die leere Zeichenkette "". Erwartet folgende Parameter:
1. Style-Angabe = die gesuchte Stylesheet-Angabe.
2. Groß/Kleinschreibung = true übergeben, wenn bei der Style-Angabe Groß/Kleinschreibung unterschieden werden soll, oder false, wenn es egal ist, wie die Style-Angabe geschrieben ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  var fontsize = document.all.Absatz.style.getAttribute("fontSize", false);
  alert(fontsize);
}
</script>
</head><body>
<p id="Absatz" style="font-size:1.5em">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Absatz mit dem id-Namen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion ermittelt mit getAttribute(), ob das Element mit dem Namen Absatz eine Stylesheet-Angabe font-size (CSS-Syntax) bzw. fontSize (JavaScript-Syntax) enthält. Da dies der Fall ist, wird der zugewiesene Wert (1.5em) ermittelt. Dieser Wert wird in einem Meldungsfenster ausgegeben.

Beachten Sie:

Wenn Sie nach DOM-Syntax programmieren, können Sie die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung abfragen:
var fontsize = document.getElementById("Absatz").style.fontSize;

Selbst wenn Sie den Internet Explorer 4 berücksichtigen müssen, ist getAttribute() meistens unnötig. Anstelle des Methoden-Aufrufs im Beispiel können Sie auch einfach direkt var fontsize = document.all.Absatz.style.fontSize; notieren. getAttribute() wird erst dann gebraucht, wenn der CSS-Eigenschaftsnamen (im Beispiel fontSize) nicht fest kodiert ist, sondern in einer String-Variablen vorliegt. In diesem diesen Fall können Sie folgende browserübergreifende Schreibweise verwenden: var wert = document.getElementById("Absatz").style[eigenschaft];, wobei eigenschaft eine String-Variable z.B. mit dem Inhalt "fontSize" ist.

Konqueror kennt die getAttribute()-Methode zwar, liefert den korrekten Wert im Beispiel allerdings nur zurück, wenn die Eigenschaft in der CSS-Syntax "font-size" statt "fontSize" notiert ist. Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

MS JScript MS IE 4.0 Konqueror 3.1 removeAttribute()

Entfernt ein bestimmtes Attribut aus Stylesheet-Angaben. Erwartet folgende Parameter:
1. Attribut = die gewünschte Stylesheet-Angabe im HTML-Tag.
2. Groß/Kleinschreibung = true übergeben, wenn bei der Stylesheet-Angabe Groß/Kleinschreibung unterschieden werden soll, oder false, wenn es egal ist, wie die Stylesheet-Angabe geschrieben ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  document.all.Absatz.style.removeAttribute("color", false);
}
</script>
</head><body>
<p id="Absatz" style="color:red">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Absatz mit dem id-Namen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion entfernt aus dem Absatz die Stylesheet-Angabe color, sodass der Absatz hinterher die rote Farbe verliert und die Standardfarbe für Text erhält.

Beachten Sie:

Wenn Sie nach DOM-Syntax programmieren, können Sie die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung entfernen:
document.getElementById("Absatz").style.color = "";
Durch Zuweisung einer leeren Zeichenkette wird die Style-Eigenschaft dynamisch entfernt.

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

MS JScript MS IE 4.0 Konqueror 3.1 setAttribute()

Fügt in einem bestimmten HTML-Tag eine bestimmte Stylesheet-Angabe hinzu. Erwartet folgende Parameter:
1. Style-Angabe = die gewünschte Stylesheet-Angabe.
2. Wert = die gewünschte Wertzuweisung für die Stylesheet-Angabe.
3. Groß/Kleinschreibung = true übergeben, wenn bei der Stylesheet-Angabe Groß/Kleinschreibung unterschieden werden soll, oder false, wenn es egal ist, wie die Stylesheet-Angabe geschrieben wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  document.all.Absatz.style.setAttribute("border", "thin solid red", false);
}
</script>
</head><body>
<p id="Absatz">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Absatz mit dem id-Namen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion fügt in dem Absatz die Stylesheet-Angabe border hinzu, und zwar mit der Wertzuweisung thin solid red. Dadurch erhält der Absatz einen dünnen roten Rahmen.

Beachten Sie:

Wenn Sie nach DOM-Syntax programmieren, können Sie folgende gleichwertige Zuweisung verwenden:
document.getElementById("Absatz").style.border = "thin solid red";

Selbst wenn Sie den Internet Explorer 4 berücksichtigen müssen, kann setAttribute() in den meisten Fällen vermieden werden. Anstelle des Methoden-Aufrufs im Beispiel können Sie auch einfach direkt document.all.Absatz.style.border = "thin solid red"; notieren. setAttribute() ist vor allem dann sinnvoll, wenn der CSS-Eigenschaftsnamen (im Beispiel border) nicht fest kodiert ist, sondern in einer String-Variablen vorliegt. Auch für diesen Fall gibt es eine browserübergreifende Schreibweise: document.getElementById("Absatz").style[eigenschaft] = "wert";, wobei eigenschaft eine String-Variable z.B. mit dem Inhalt "border" ist.

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

nach oben
weiter | Seite anchors
zurück | Seite all
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / anchors

SELFHTML

anchors
Informationsseite

nach unten anchors: Allgemeines zur Verwendung

Eigenschaft:

nach unten name (Name des Verweisankers)
nach unten length (Anzahl der Verweisanker)
nach unten text (Text des Verweisankers)
nach unten x (horizontale Position des Verweisankers)
nach unten y (vertikale Position des Verweisankers)
nach unten

anchors: Allgemeines zur Verwendung

Mit dem Objekt anchors, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, haben Sie Zugriff auf Seite Verweisanker, die in einer HTML-Datei definiert sind. Ein Verweisanker in HTML ist beispielsweise:
<a name="top">Hier beginnt die Seite</a>.
In JavaScript 1.0 ist es lediglich möglich, die Anzahl der Verweisanker in einer Datei auszulesen. In JavaScript 1.2 sind jedoch weitere Eigenschaften implementiert worden.

Es stehen folgende Arten zur Verfügung, mit JavaScript einen bestimmten Verweisanker anzusprechen:

Schema 1 / Beispiel 1:

document.anchors[#].Eigenschaft

document.anchors[0].name

Schema 2 / Beispiel 2:

document.anchors.Ankername.Eigenschaft

document.anchors.oben.text

Schema 3 / Beispiel 3:

document.anchors["Ankername"].Eigenschaft

document.anchors["oben"].text

Erläuterung:

Verweisanker können Sie auf zwei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
    Bei Verwendung von Indexnummern geben Sie document.anchors an und dahinter in eckigen Klammern, den wievielten Anker in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. den ersten Verweisanker sprechen Sie mit anchors[0] an, den zweiten Verweisanker mit anchors[1] usw. Beim Zählen gilt die Reihenfolge, in der die Verweisanker in der Datei notiert sind.
  • mit Namen des Ankers (wie in Schema 2 / Beispiel 2)
    Dabei wird der Anker als Unterobjekt von document.anchors angesprochen. Notieren Sie document.anchors, darauf einen Punkt . zum Ansprechen des Unterobjekts und schließlich den Namen, den Sie bei der Definition des Verweisankers im einleitenden <a>-Tag im name-Attribut angegeben haben.
  • mit Namen des Ankers als Indexnamen (wie in Schema 3 / Beispiel 3)
    Diese Art ist eine zu Schema 2 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Notieren Sie wie beim Ansprechen mit Indexnummer hinter document.anchors eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen, den Sie bei der Definition des Verweisankers im einleitenden <a>-Tag im name-Attribut angegeben haben. Diese Schreibweise ist vor allem zum Zugriff auf Anker nützlich, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Ankernamen enthält.

Beachten Sie:

Gemäß dem HTML-spezifischen DOM greift z.B. document.anchors.Ankername auf das a-Elementobjekt zu, das den Anker bildet. Neben den hier beschriebenen Eigenschaften können Sie auf diese Art weitere Eigenschaften und Methoden nutzen, die in der Referenz zum Seite a-Elementobjekt aufgelistet sind.

Im Internet Explorer ist es nicht möglich, mit dem Schema 2 und 3 auf einen Verweisanker zuzugreifen. Sie können aber jeden Anker über das Seite all-Objekt und dessen Eigenschaften ansprechen, z.B. document.all.Ankername und document.all.Ankername. In neueren Internet-Explorer-Versionen steht zudem die Methode Seite document.getElementsByName() aus dem HTML-spezifischen DOM zur Verfügung.

DOM 1.0 JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern name

Speichert den Namen eines Verweisankers.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<h1><a name="goethe">Meine Wahl</a></h1>
<pre>Ich liebe mir den heiteren Mann
Am meisten unter meinen Gästen:
Wer sich nicht selbst zum besten haben kann,
der ist gewiss nicht von den Besten.</pre>
<p><a href="javascript:alert(document.anchors[0].name)">Der Ankername</a></p>

</body></html>

Erläuterung:

Mit document.anchors[0].name können Sie den Namen eines Verweisankers in einer HTML-Datei ermitteln. Das Beispiel enthält zunächst HTML-Text mit einem Anker und einen Verweis. Beim Anklicken wird mit Seite alert() der Name des Verweises ausgegeben.

Beachten Sie:

Gegenwärtig ist es nur im Netscape 6.1 möglich, den Namen eines Ankers zu ändern.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert, wie viele Verweisanker eine HTML-Datei enthält.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<h1><a name="oben">Anfang</a></h1>
Am Anfang war, naja, seien wir ehrlich, wir wissen es nicht.
<h2><a name="mitte">Weisheit</a></h2>
Wem das Wasser bis zum Halse steht, der darf den Kopf nicht haengen lassen.
<h2><a name="unten">Ende</a></h2>
<script type="text/javascript">
document.write("Gefunden wurden " + document.anchors.length + " Anker")
</script>
</body></html>

Erläuterung:

Mit document.anchors.length können Sie die Anzahl der Verweisanker in einer HTML-Datei ermitteln. Das Beispiel enthält zunächst HTML-Text mit einigen Ankern und schreibt am Ende mit Seite document.write() dazu, wie viele Anker in der Datei gefunden wurden.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen text

Speichert den Text eines Verweisankers.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<h1><a name="oben">Steuer</a></h1>
Der Mensch im gesellschaftlichen Leben kann sein Gut nicht genießen,
ohne es mit dem Staat zu teilen.
<h2><a name="mitte">Einsicht</a></h2>
Das Werk eines Philosophen ist viel leichter zu verbrennen, als zu widerlegen.
<h2><a name="unten">Ende</a></h2>
<p><a href="javascript:alert(document.anchors['mitte'].text)">mittlerer Ankertext</a></p>

</body></html>

Erläuterung:

Mit document.anchors['mitte'].text können Sie den Text eines Verweisankers zwischen <a> und </a> ermitteln. Das Beispiel enthält zunächst HTML-Text mit einigen Ankern und einen Verweis. Beim Anklicken des Verweises wird mit Seite alert() der Text des Ankers ausgegeben.

Beachten Sie:

Der Internet Explorer kennt diese Eigenschaft nicht, selbst wenn der Anker in einer Weise angesprochen wird, die der Internet Explorer versteht. Eine mögliche Alternative speziell für den Internet Explorer ist die Eigenschaft Seite innerText.

JavaScript 1.2 Netscape 4.0 Lesen x

Speichert die horizontale Position eines Verweisankers gemessen vom Fensterrand.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a name="oben">ein Anker</a>
<p><a href="javascript:alert(document.anchors[0].x)">Position von links</a></p>

</body></html>

Erläuterung:

Mit document.anchors[0].x können Sie die horizontale Position eines Verweisankers in einer HTML-Datei ermitteln. Das Beispiel enthält einen Verweisanker und einen Verweis. Beim Anklicken wird die Position des Ankers vom linken Fensterrand aus gesehen ausgegeben.

JavaScript 1.2 Netscape 4.0 Lesen y

Speichert die vertikale Position eines Verweisankers gemessen vom Fensterrand.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a name="oben">ein Anker</a>
<p><a href="javascript:alert(document.anchors[0].y)">Position von oben</a></p>

</body></html>

Erläuterung:

Mit document.anchors[0].y können Sie die vertikale Position eines Verweisankers in einer HTML-Datei ermitteln. Das Beispiel enthält einen Verweisanker und einen Verweis. Beim Anklicken wird die Position des Ankers vom oberen Fensterrand aus gesehen ausgegeben.

nach oben
weiter | Seite applets
zurück | Seite style
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / applets

SELFHTML

applets
Informationsseite

nach unten applets: Allgemeines zur Verwendung
nach unten Zugriff auf Code in Java-Applets

Eigenschaft:

nach unten length (Anzahl Java-Applets)
nach unten

applets: Allgemeines zur Verwendung

Mit dem Objekt applets, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, haben Sie Zugriff auf Seite Java-Applets, die in einer HTML-Datei definiert sind. Die einzige gewöhnliche JavaScript-Objekteigenschaft des applet-Objekts ist die Anzahl der Java-Applets in einer Datei.

Über das applets-Objekts haben Sie jedoch auch nach unten Zugriff auf Code in Java-Applets. Dazu müssen Sie das gewünschte Java-Applet ansprechen. Es stehen vier Arten zur Verfügung, mit JavaScript ein bestimmtes Java-Applet anzusprechen:

Schema 1:

document.applets[#].Methode();

Schema 2:

document.applets.AppletName.Methode();

Schema 3:

document.applets["AppletName"].Methode();

Schema 4:

document.AppletName.Methode();

Erläuterung:

Java-Applets können Sie auf drei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1)
    Bei Verwendung von Indexnummern geben Sie document.applets an und dahinter in eckigen Klammern, das wie vielte Java-Applet in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. das erste Java-Applet sprechen Sie mit applets[0] an, das zweite Java-Applet mit applets[1] usw. Beim Zählen gilt die Reihenfolge, in der die <applet>-Elemente in der Datei notiert sind.
  • mit Namen des Java-Applets (wie in Schema 2)
    Dabei wird das Java-Applet als Unterobjekt von document.applets angesprochen. Notieren Sie hinter document.applets einen Punkt zum Ansprechen des Unterobjekts und direkt dahinter den Namen, den Sie bei der Definition des Java-Applets im einleitenden <applet>-Tag im Attribut name angegeben haben.
  • mit Namen des Java-Applets als Indexnamen (wie in Schema 3)
    Diese Art ist eine zu Schema 2 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Notieren Sie wie beim Ansprechen mit Indexnummer hinter document.applets eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen, den Sie bei der Definition des Java-Applets im einleitenden <applet>-Tag im Attribut name angegeben haben. Diese Schreibweise ist vor allem zum Zugriff auf Java-Applets nützlich, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Ankernamen enthält.
  • mit dem Namen des Java-Applets direkt (wie in Schema 4)
    Dabei geben Sie mit document.AppletName den Namen an, den Sie bei der Definition des Java-Applets im einleitenden <applet>-Tag im Attribut name angegeben haben.

Beachten Sie:

Gemäß dem HTML-spezifischen DOM greift z.B. document.applets.Ankername auf das applet- bzw. object-Elementobjekt zu, mit dem das Applet eingebunden ist. Auf diese Weise können Sie verschiedene Eigenschaften des Elementobjekts ansprechen und nutzen, die in der Referenz zum Seite applet-Elementobjekt und object-Elementobjekt aufgelistet sind.

JavaScript 1.2 Netscape 4.0 MS IE 5.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zugriff auf Code in Java-Applets

Sie können direkt auf den Code eines laufenden Java-Applets zugreifen. Dazu müssen Sie jedoch den Quellcode des Java-Applets kennen (Dateien *.java vor dem Compilieren mit dem Java-Compiler).

Das folgende Beispiel zeigt das Prinzip. Nähere Informationen zur Vorgehensweise und zum Konzept des "lebendigen Drahts" ("LiveWire") zwischen JavaScript und Java finden Sie auf den englischsprachige Seite Entwicklerseiten von Netscape (archivierte Version) (Anmerkung: AOL als Besitzer von Netscape hat den Originalserver im Oktober 2004 abgeschaltet. Im Februar 2005 schloss die Mozilla Foundation mit AOL eine Vereinbarung, um die Inhalte bald wieder verfügbar zu machen. Bis dahin führt dieser Link zu einer Ende 2003 archivierten Version.)

Beispiel Teil 1 - Quellcode eines Java-Applets:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

import java.awt.Graphics;
import java.applet.Applet;

public class HelloWorld extends Applet
{
 String myString ="Das ist mein Hallo-Text";

 public void paint(Graphics g)
 {
  g.drawString(myString, 25, 20);
 }
 public void setString(String aString)
 {
  myString = aString;
  repaint();
 }
}

Beispiel Teil 2 - HTML-Datei mit Java-Applet und JavaScript-Zugriff:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<applet code="HelloWorld" name="Hallo" width="200" height="25">
</applet><br>
<form name="Eingabe" action="">
<input type="text" name="Text">
<input type="button" value="Test"
onclick="document.Hallo.setString(document.Eingabe.Text.value)">
</form>
</body></html>

Erläuterung:

Im ersten Teil des Beispiels finden Sie den Quellcode eines Java-Applets, das einen Text am Bildschirm ausgibt. Auf den Quellcode wird hier nicht näher eingegangen. Achten Sie lediglich auf die letzte Methode, die in dem Quelltext definiert wird:
public void setString(String aString)
Damit wird der definierte Text letztendlich am Bildschirm ausgegeben.

Im zweiten Teil des Beispiels wird angenommen, dass der Quellcode aus dem ersten Teil des Beispiels mit dem Java-Compiler zu einem Java-Applet mit dem Namen HelloWorld.class compiliert wurde. Dieses Java-Applet wird in der HTML-Datei mit dem <applet>-Tag eingebunden. Dabei erhält das Applet mit dem name-Attribut den Namen "Hallo".

Unterhalb davon wird ein Formular mit einem Eingabefeld und einem Button definiert. In dem Eingabefeld lässt sich ein Text eingeben. Beim Klick auf den Button wird der eingegebene Text an das Java-Applet "gesendet", und zwar so, dass der Text, den das Applet anzeigt, durch den eingegebenen Text ersetzt wird.

Dazu wird das Applet mit document.Hallo angesprochen. Dahinter wird keine JavaScript-Methode notiert, sondern direkt eine Methode aus dem Quellcode des Java-Applets, nämlich die Methode setString(). Diese Methode erwartet als Parameter eine Zeichenkette (siehe Quellcode des Java-Applets). Das JavaScript übergibt als Zeichenkette den Wert aus dem Eingabefeld des Formulars.

Der Umgang mit Formularen in JavaScript wird beim Seite forms-Objekt und seinen Unterobjekten näher beschrieben.

Beachten Sie:

Opera bis Version 6 und der Internet Explorer 5.0 Macintosh Edition interpretierten dieses Beispiel nicht.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert, wie viele Java-Applets eine HTML-Datei enthält.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<applet code="HelloWorld.class" name="Hallo" width="150" height="25">
</applet>
<script type="text/javascript">
document.write("Gefunden wurden " + document.applets.length + " Java-Applets")
</script>
</body></html>

Erläuterung:

Mit document.applets.length können Sie die Anzahl der Java-Applets in einer HTML-Datei ermitteln. Das Beispiel enthält zunächst HTML-Text mit einem Java-Applet und schreibt am Ende mit Seite document.write() dazu, wie viele Applets in der Datei gefunden wurden.

nach oben
weiter | Seite forms
zurück | Seite anchors
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / forms

SELFHTML

forms
Informationsseite

nach unten forms: Allgemeines zur Verwendung

Eigenschaften:

nach unten action (Empfängeradresse bei Absenden)
nach unten encoding (Kodierungstyp)
nach unten length (Anzahl Formulare in Datei)
nach unten method (Übertragungsmethode)
nach unten name (Formularname)
nach unten target (Zielfenster für CGI-Antworten)

Methoden:

nach unten handleEvent() (Ereignis verarbeiten)
nach unten reset() (Formulareingaben löschen)
nach unten submit() (Formular abschicken)

Unterobjekte:

Seite elements
nach unten

forms: Allgemeines zur Verwendung

Mit dem Objekt forms, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, haben Sie Zugriff auf Formulare, die in einer HTML-Datei definiert sind.

Es stehen folgende Arten zur Verfügung, mit JavaScript ein bestimmtes Formular anzusprechen:

Schema 1 / Beispiel 1:

document.forms[#].Eigenschaft
document.forms[#].Methode()

Ziel = document.forms[0].action;
document.forms[0].reset();

Schema 2 / Beispiel 2:

document.Formularname.Eigenschaft
document.Formularname.Methode()

Ziel = document.Testformular.action;
document.Testformular.reset();

Schema 3 / Beispiel 3:

document.forms.Formularname.Eigenschaft
document.forms.Formularname.Methode

Ziel = document.forms.Testformular.action;
document.forms.Testformular.reset();

Schema 4 / Beispiel 4:

document.forms["Formularname"].Eigenschaft
document.forms["Formularname"].Methode

Ziel = document.forms["Testformular"].action;
document.forms["Testformular"].reset();

Erläuterung:

Formulare können Sie auf vier Arten ansprechen:

  1. mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
    Bei Verwendung von Indexnummern geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte Formular in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. das erste Formular sprechen Sie mit forms[0] an, das zweite Formular mit forms[1] usw. Beim Zählen gilt die Reihenfolge, in der die <form>-Tags in der Datei notiert sind. Sie können zwischen den eckigen Klammern auch eine Number-Variable notieren, die die Indexnummer enthält.
  2. mit dem Namen des Formulars direkt über das document-Objekt wie in Schema 2 / Beispiel 2)
    Wie auch verschiedene andere Elemente mit name-Attributen können Sie Formulare mit Namen als Objekte direkt unterhalb des document-Objekts ansprechen. Dabei geben Sie mit document.Formularname den Namen an, den Sie bei der Definition des Formulars im einleitenden <form>-Tag im name-Attribut angegeben haben.
  3. mit dem Namen des Formulars über das document.forms-Objekt (wie in Schema 3 / Beispiel 3)
    Diese Methode ist gleichwertig zum Schema 2, das Formular liegt allerdings unter document.forms. Dieses Schema erlaubt verständlicheren Code, denn es ist sofort ersichtlich, dass ein Formular angesprochen wird. Geben Sie mit document.forms.Formularname den Namen an, den Sie bei der Definition des Formulars im einleitenden <form>-Tag im Attribut name angegeben haben.
  4. mit dem Namen des Formulars als Indexnamen (wie in Schema 4 / Beispiel 4)
    Diese Art ist eine zu Schema 3 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Notieren Sie wie beim Ansprechen mit Indexnummer (Schema 1) hinter document.forms eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen, den Sie bei der Definition des Formulars im einleitenden <form>-Tag im Attribut name angegeben haben. Diese Schreibweise hat den Vorteil, dass Sie zwischen den eckigen Klammern auch eine String-Variable notieren können, die den Formularnamen enthält.

Die Eigenschaften und Methoden des forms-Objekts betreffen nur Bestandteile des gesamten Formulars, etwa die Kodiermethode. Um auf einzelne Eingabefelder, Buttons usw. zuzugreifen, steht das Seite elements-Objekts mit seinen Unterobjekten zur Verfügung.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern action

Speichert die Wert, die bei der Definition des Formulars im Attribut action steht, also etwa die Adresse eines Server-Programms, das die Formulardaten verarbeitet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Bestaetigung () {
  var x = window.confirm("Dieses Formular geht an " + document.Testform.action);
  return x;
}
</script>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org"
onsubmit="return Bestaetigung()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion Bestaetigung() aufgerufen, weil im einleitenden <form>-Tag der Seite Event-Handler onsubmit notiert ist. Dieser ermittelt den Rückgabewert der Funktion Bestaetigung(). Ist der Rückgabewert true, wird das Formular abgeschickt, ist er false, wird es nicht abgeschickt.

Innerhalb der Funktion Bestaetigung() erhält der Anwender mit der Seite confirm-Methode ein Dialogfenster, in dem ihm der Wert der Formularangabe action angezeigt wird. Confirm-Fenster haben stets zwei Buttons, einen zum Bestätigen und einen zum Abrechen. Der Button zum Bestätigen gibt bei Anklicken true zurück, der Abbrechen-Button false. Der Rückgabewert wird im Beispiel in der Variablen x gespeichert. Diese wird wiederum von der Funktion Bestaetigung() selbst zurückgegeben, denn der aufrufende Event-Handler erwartet ja einen solchen Rückgabewert.

Beachten Sie:

Die Verwendung von mailto: als Zieladresse eines Formulares verursacht häufig Probleme. Mehr dazu im Abschnitt Seite Formulare als E-Mail.

Sie können als Zieladresse eines Formulares auch eine HTML-Datei angeben und Formulardaten mittels JavaScript verarbeiten. Berücksichtigen Sie dabei, dass JavaScript nur dann Zugriff auf Daten hat, wenn die Methode get verwendet wurde.
Opera 5.12 zeigt im Protokoll file den Quelltext der Zieldatei an.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern encoding

Speichert den Wert, der bei der Definition des Formulars im Attribut enctype steht, also zum Beispiel "text/plain".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CodeTyp () {
  if (document.Testform.action.indexOf("@") > 0) {
    document.Testform.encoding = "text/plain";
  } else {
    document.Testform.encoding = "application/x-www-form-urlencoded";
  }
  return true;
}
</script>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org"
onsubmit="return CodeTyp()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion CodeTyp() aufgerufen.

Innerhalb der Funktion CodeTyp() wird ermittelt, ob in der action-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrät. Wenn ja, wird der Kodierungstyp auf text/plain gesetzt, ansonsten auf den für CGI-Programme üblichen Kodiertyp application/x-www-form-urlencoded. Die Funktion CodeTyp() gibt true zurück, denn der aufrufende Event-Handler onsubmit im einleitenden <form>-Tag erwartet einen solchen Rückgabewert. Das Formular wird nur abgeschickt, wenn der Rückgabewert true ist.

Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der Methode indexOf(), lesen Sie den Abschnitt über das Seite string-Objekt.

Beachten Sie:

Die Verwendung von mailto: als Zieladresse eines Formulares verursacht häufig Probleme. Mehr dazu im Abschnitt Seite Formulare als E-Mail.

Im HTML-spezifischen DOM ist der Zugriff auf das enctype-Attribut über die gleichnamige enctype-Eigenschaft definiert, nicht über eine Eigenschaft namens encoding.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert die Anzahl der Formulare, die in einer Datei definiert sind.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org">
<input type="hidden" value="Guildo">
<input type="submit" value="Guildo">
</form>
<form name="Testform" action="mailto:beispiel@example.org">
<input type="hidden" value="Heino">
<input type="submit" value="Heino">
</form>
<script type="text/javascript">
document.write(document.forms.length + " Formulare");
</script>
</body></html>

Erläuterung:

Im Beispiel werden zwei kleine Formulare definiert. Am Ende wird mit Hilfe von Seite document.write() zum Testen in die Datei geschrieben, wie viele Formulare darin definiert sind.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern method

Speichert den Wert, der bei der Definition des Formulars im Attribut method steht, normalerweise "get" oder "post".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Methode () {
  if (document.Testform.action.indexOf("@") > 0) {
    document.Testform.method = "post";
  } else {
    document.Testform.method = "get";
  }
  return true;
}
</script>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org"
onsubmit="return Methode()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion Methode() aufgerufen.

Innerhalb der Funktion Methode() wird ermittelt, ob in der action-Angabe des Formulars das Zeichen @ vorkommt, das eine E-Mail-Adresse verrät. Wenn ja, wird die Versandmethode auf post gesetzt, ansonsten auf get. Die Funktion Methode() gibt true zurück, denn der aufrufende Event-Handler onsubmit im einleitenden <form>-Tag erwartet einen solchen Rückgabewert. Das Formular wird nur abgeschickt, wenn der Rückgabewert true ist.

Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der Methode indexOf(), lesen Sie den Abschnitt über das Seite string-Objekt.

Beachten Sie:

Die Verwendung von mailto: als Zieladresse eines Formulares verursacht häufig Probleme. Lesen Sie hierzu den Abschnitt Seite Formulare als E-Mail.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern name

Speichert den Namen eines Formulars.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="mailto:beispiel@example.org">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
<script type="text/javascript">
document.Testform.Eingabe.value = document.Testform.name;
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld. Unterhalb des Formulars steht ein Script, das in das Eingabefeld zur Kontrolle den Namen des Formulars schreibt. Im Beispiel ist das der Name Testform.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern target

Speichert, welches Fenster im Falle eines Frame-Sets nach dem Absenden aktiv werden soll. Das kann etwa bei Frame-Fenstern oder bei separaten Zweitfenstern interessant sein. Falls ein CGI-Programm HTML-Code an den Browser zurückschickt, zum Beispiel mit einem "Danke für das Absenden des Formulars", dann erscheint die Ausgabe in dem Fenster mit dem angegebenen Namen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Ziel () {
  document.Testform.target = "unten";
  return true;
}
</script>
</head><body>
<form name="Testform" action="datei.htm"
onsubmit="return Ziel()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Erläuterung:

Das Beispiel nimmt an, dass sich die Datei mit dem Formular in einem Frame-Set befindet, in dem es noch ein anderes Frame-Fenster gibt, und zwar eines mit dem Namen unten. Die Beispieldatei enthält ein Formular. Wenn der Anwender das Formular durch Anklicken das Submit-Buttons abschickt, wird die Funktion Ziel() aufgerufen.

Innerhalb der Funktion Ziel() wird bestimmt, dass die HTML-Ausgabe das action-Ziels im Frame-Fenster unten erfolgt.

JavaScript 1.2 Netscape 4.0 handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie Seite handleEvent() beim window-Objekt (nähere Informationen siehe dort).

DOM 1.0 JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 reset()

Löscht alle Eingaben in einem Formular und hat die gleiche Wirkung wie ein Button, der in HTML mit type="reset" definiert wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="text" size="40" name="Feld1"><br>
<input type="text" size="40" name="Feld2"><br>
</form>
<a href="javascript:document.Testform.reset()">Formular leeren</a>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Eingabefeldern. Unterhalb des Formulars steht ein Verweis. Beim Anklicken des Verweises werden alle Eingaben in dem Formular gelöscht.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 submit()

Sendet ein Formular ab und hat die gleiche Wirkung wie ein Button, der in HTML mit type="submit" definiert wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="/cgi-bin/auswert.pl" method="get">
<input type="text" size="40" name="Feld1"><br>
<input type="text" size="40" name="Feld2"><br>
</form>
<script type="text/javascript">
function AbGehts () {
  document.Testform.submit();
}

window.setTimeout("AbGehts()", 60000);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit Eingabefeldern. Unterhalb davon steht ein JavaScript. Darin wird mit der Seite setTimeout()-Methode ein Countdown gestartet. Nach 60000 Millisekunden, also nach einer Minute, wird die Funktion AbGehts() aufgerufen. Diese schickt das Formular mit submit() ab.

Erläuterung:

Die JavaScript-Methode funktioniert seit Netscape 3.0 jedoch nur noch, wenn das Formular von einem Programm weiterverarbeitet wird, d.h. wenn im einleitenden <form>-Tag im Attribut action zum Beispiel die Adresse eines CGI-Programm angegeben wurde. Wenn im action-Attribut eine E-Mail-Adresse oder eine Newsgroup angegeben wird, funktioniert sie nicht.

Beachten Sie:

Der Aufruf der Methode submit() funktioniert nicht mehr, wenn es im Formular ein Element (z.B. einen Absende-Button) gibt, welches ebenfalls den Namen submit besitzt. Gleiches gilt für alle anderen Überschneidungen von Methodennamen und Elementnamen. Der Grund ist, dass das Formularelement über document.Formularname.Elementname angesprochen werden kann, also in diesem Fall document.Formularname.submit, und dadurch die Methode submit() überschrieben wird.

nach oben
weiter | Seite elements
zurück | Seite applets
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / elements

SELFHTML

elements
Informationsseite

nach unten elements: Allgemeines zur Verwendung

Eigenschaften:

nach unten checked (Angekreuzt)
nach unten defaultChecked (vorangekreuzt)
nach unten defaultValue (voreingegebener Wert)
nach unten disabled (Element ausgrauen)
nach unten form (Verweis auf das zugehörigen Formulars)
nach unten length (Anzahl der Elemente eines Formulares)
nach unten name (Elementname)
nach unten readOnly (Element nur lesen)
nach unten type (Elementtyp)
nach unten value (Elementwert/-inhalt)

Methoden:

nach unten blur() (Element verlassen)
nach unten click() (Element anklicken)
nach unten focus() (auf Element positionieren)
nach unten handleEvent() (Ereignis verarbeiten)
nach unten select() (Text selektieren)

Unterobjekte:

Seite options
nach unten

elements: Allgemeines zur Verwendung

Mit dem Objekt elements, das in der JavaScript-Objekthierarchie unterhalb des Seite forms-Objekts liegt, haben Sie Zugriff auf Elemente eines Formulars.

Es stehen folgende Arten zur Verfügung, mit JavaScript ein bestimmtes Formularelement anzusprechen:

Schema 1 / Beispiel 1:

document.forms[#].elements[#].Eigenschaft
document.forms[#].elements[#].Methode()

document.forms[0].elements[0].value = "Unsinn";
document.forms[0].elements[0].blur();

Schema 2 / Beispiel 2:

document.Formularname.Elementname.Eigenschaft
document.Formularname.Elementname.Methode()

document.Testformular.Eingabe.value = "Unsinn";
document.Testformular.Eingabe.blur();

Schema 3 / Beispiel 3:

document.forms.Formularname.elements.Elementname.Eigenschaft
document.forms.Formularname.elements.Elementname.Methode()

document.forms.Testformular.elements.Eingabe.value = "Unsinn";
document.forms.Testformular.elements.Eingabe.blur();

Schema 4 / Beispiel 4:

document.forms["Formularname"].elements["Elementname"].Eigenschaft
document.forms["Formularname"].elements["Elementname"].Methode()

document.forms["Testformular"].elements["Eingabe"].value = "Unsinn";
document.forms["Testformular"].elements["Eingabe"].blur();

Erläuterung:

Formularelemente können Sie auf folgende Arten ansprechen:

  1. mit einer Indexnummer des Formulars und des Elements (wie in Schema 1 / Beispiel 1)
    Bei Verwendung von Indexnummern geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte Formular in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. das erste Formular sprechen Sie mit document.forms[0] an, das zweite Formular mit document.forms[1] usw. Beim Zählen gilt die Reihenfolge, in der die <form>-Tags in der Datei notiert sind. Dann folgt die Angabe .elements zum Zugriff auf das zugehörige elements-Unterobjekt. Auch dahinter notieren Sie wieder eine Indexnummer in eckigen Klammern. Erneut wird bei 0 zu zählen begonnen, d.h. das erste Element innerhalb eines Formulars hat die Indexnummer 0, das zweite die Indexnummer 1 usw. Sie können zwischen den eckigen Klammern auch eine Zahl-Variable notieren, die die Indexnummer des Formulars bzw. des Formularelements enthält.
  2. mit dem Namen des Formulars und des Elements direkt über das document-Objekt (wie in Schema 2 / Beispiel 2)
    Wie auch verschiedene andere Elemente mit name-Attributen können Sie Formulare mit Namen als Objekte direkt unterhalb des document-Objekts ansprechen. Dabei geben Sie mit document.Formularname.Elementname den Namen des Formulars und des Elements an, den Sie bei der Definition des Formulars und des Elements in den entsprechenden HTML-Tags im Attribut name angegeben haben.
  3. mit dem Namen des Formulars und dem Namen des Elements über das document.forms-Objekt und das zugehörige elements-Objekt (wie in Schema 3 / Beispiel 3)
    Mit document.forms.Formularname wird dabei das Formular angesprochen und über das Unterobjekt .elements.Elementname das fragliche Formularelement. Formularname und Elementname entsprechen jeweils dem name-Attribut des form- bzw. Formularfeld-Elements, das Sie ansprechen möchten. Diese lange Schreibweise erlaubt verständlicheren Code, denn es ist sofort ersichtlich, dass ein Formularelement angesprochen wird.
  4. mit dem Namen des Formulars und des Elements als Indexnamen (wie in Schema 4 / Beispiel 4)
    Diese Art ist eine zu Schema 3 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Geben Sie mit document.forms["Formularname"].elements["Elementname"] den Namen des Formulars und des Elements als String an. Diese Schreibweise wird insbesondere für den Zugriff auf Formularelemente benötigt, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 und 3 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Formularnamen bzw. den Elementnamen enthält.

Ein Mischen der genannten Zugriffsvarianten für die Adressierung des Formulars und seiner Elemente ist möglich. Beispiele: document.forms.Formularname.elements["Elementname"] und document.forms[1].Elementname. Sie sollten allerdings abwägen, welche Variante Sie auswählen und diese möglichst konsequent verwenden. Beispielsweise das Ansprechen von Formularen und Formularelementen über die Indexnummer hat einige Tücken. Sobald Sie auf der HTML-Seite die Reihenfolge ändern oder ein weiteres Formular hinzufügen, funktionieren ihre Scripte nicht mehr zuverlässig.

Beachten Sie:

Hinter dem, was hier als elements-Objekt bezeichnet wird, verbergen sich in Wirklichkeit mehrere, allerdings sehr ähnliche JavaScript-Objekte. So gibt es Objekte jeweils für die verschiedenen Formularelementypen: Eingabefelder, Auswahllisten und diverse Arten von Buttons. All diese Objekte werden auf die gleiche Art und Weise angesprochen, Sie unterscheiden sich jedoch in ihren Eigenschaften und Methoden. Bei den Eigenschaften und Methoden in diesem Abschnitt ist daher immer vermerkt, auf welche Elementtypen die jeweilige Eigenschaft bzw. Methode anwendbar ist.

Folgende Elementtypen werden dabei unterschieden (die Verweise führen zu den entsprechenden Beschreibungen in der HTML-Dokumentation):

  • Seite Klick-Buttons
  • Seite Checkboxen
  • Seite Felder für Datei-Upload
  • Seite Versteckte Elemente
  • Seite Passwortfelder
  • Seite Radio-Buttons
  • Seite Abbrechen-Buttons
  • Seite Absendebuttons
  • Seite einzeilige Eingabefelder
  • Seite mehrzeilige Eingabefelder
  • Seite Auswahllisten

Gruppenelemente:

Checkboxen und Radio-Buttons bilden normalerweise Gruppen mehrerer zusammengehöriger Elemente, die einen gleichen Wert im name-Attribut haben und sich nur das value-Attribut unterscheiden. Solche Gruppen mit gleichen Namen bilden in JavaScript wiederum einen Array.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Formular" action="" method="get">
<input type="radio" name="Favoriten" value="Heino">
<input type="radio" name="Favoriten" value="Gildo">
<input type="radio" name="Favoriten" value="Marianne">
</form>
<script type="text/javascript">
document.Formular.Favoriten[2].checked = true;
</script>
</body></html>

Erläuterung:

Im Beispiel ist ein Formular mit mehreren Radio-Buttons definiert. Die Gruppe zusammengehöriger Radio-Buttons hat den gleichen Namen. In JavaScript können Sie einzelne solcher Buttons ansprechen, indem Sie das Element (als Gruppe) ansprechen. Hinter dem Elementnamen notieren Sie dann in eckigen Klammern die Indexnummer des gewünschten Elements. Im Beispiel wird Favoriten[2] angesprochen. Das ist das dritte Element der Gruppe.

Beachten Sie:

Der Zugriff auf die Auswahlmöglichkeiten einer Seite Auswahlliste wird hier nicht beschrieben. Dazu steht das Unterobjekt Seite options zur Verfügung.

Über das elements-Objekt werden gemäß dem HTML-spezifischen DOM die Seite Elementobjekte von Formularelementen angesprochen. Das heißt, Sie haben neben den auf dieser Seite aufgelisteten Zugriff auf weitere Eigenschaften und Methoden, je nachdem, um welchen Elementtyp es sich handelt. Beachten Sie daher die Referenz zu den jeweiligen benutzten HTML-Elementen:

Klick-Buttons:
Seite input oder Seite button
Checkboxen, Felder für Datei-Upload, Versteckte Elemente, Passwortfelder, Radio-Buttons, Abbrechen-Buttons, Absendebuttons und einzeilige Eingabefelder:
Seite input
mehrzeilige Eingabefelder:
Seite textarea
Auswahllisten:
Seite select, Seite optgroup und Seite option

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern checked

Speichert, ob bzw. dass ein Radio- oder Checkbutton aktiviert ist oder nicht. Mögliche Werte sind true oder false.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Radio-Buttons

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Weiter () {
  if (document.Testform.Art[0].checked == true) {
    window.location.href = "frmdatei.htm";
  } else if (document.Testform.Art[1].checked == true) {
    window.location.href = "datei.htm";
  } else {
    alert("Bitte eine Auswahl treffen");
  }
}
</script>
</head><body>
<form name="Testform" action="">
<input type="radio" name="Art" value="mit"> mit Frames
<input type="radio" name="Art" value="ohne"> ohne Frames
<br><input type="button" value="Starten" onclick="Weiter()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Radio-Buttons. Der Anwender kann dabei auswählen, ob er die folgenden Seiten des Projekts mit Frames oder ohne Frames sehen will. Beim Klick auf den Button Starten wird die Funktion Weiter() aufgerufen. Diese Funktion prüft, ob einer der beiden Radio-Buttons aktiviert ist. Je nachdem, welcher von beiden aktiviert ist, wird eine unterschiedliche Datei aufgerufen ( Seite location.href). Wenn keiner der beiden Radio-Buttons aktiviert ist, wird eine Fehlermeldung ausgegeben.

Beachten Sie:

Sie können in Opera 5.12 unter Windows die Eigenschaft checked für Radioboxen erst dann ändern, wenn der Aufbau der Seite abgeschlossen ist.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern defaultChecked

Speichert, ob bzw. dass ein Radio- oder Checkbutton per Voreinstellung aktiviert ist oder nicht. Mögliche Werte sind true oder false.

Anwendbar auf: Seite Checkboxen Seite Radio-Buttons

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Weiter () {
  if (document.Testform.Art[0].checked == true) {
    window.location.href = "frminhalt.htm";
  } else {
    window.location.href = "inhalt.htm";
  }
}
</script>
</head><body>
<form name="Testform" action="">
<input type="radio" name="Art" value="mit"> mit DHTML
<input type="radio" name="Art" value="ohne"> ohne DHTML
<br><input type="button" value="Starten" onclick="Weiter()">
</form>
<script type="text/javascript">
dhtml = false;
if (document.layers || document.all || document.getElementById)
  dhtml = true;
if (dhtml == true && document.Testform.Art[0].defaultChecked == false)
  document.Testform.Art[0].checked = true;
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Radio-Buttons. Der Anwender kann dabei auswählen, ob er die folgenden Seiten des Projekts mit Dynamischem HTML oder ohne sehen will. Beim Klick auf den Button Starten wird die Funktion Weiter() aufgerufen. Diese Funktion prüft, ob einer der beiden Radio-Buttons aktiviert ist. Je nachdem, welcher von beiden aktiviert ist, wird eine unterschiedliche Datei aufgerufen ( Seite location.href).
Unterhalb des Formulars ist jedoch noch ein weiterer Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Es wird abgefragt, ob eines der für Dynamisches HTML typischen Objekte Seite document.layers oder Seite document.all bzw. die typische Methode Seite document.getElementById verfügbar sind. Wenn ja, wird eine Variable dhtml auf true gesetzt. In einer weiteren Abfrage wird mit defaultChecked überprüft, ob die Auswahlmöglichkeit, DHTML zu nutzen, im Formular als Vorauswahl aktiviert ist oder nicht. Wenn nicht, und wenn DHTML aber verfügbar ist (also wenn dhtml auf truegesetzt ist), wird die Auswahlmöglichkeit für DHTML nachträglich angekreuzt.

Beachten Sie:

Opera 5.12 unter Windows interpretiert zwar die Eigenschaft defaultChecked, führt das obige Beispiel jedoch nicht aus, da die Änderung des Zustandes der Radiobox vor dem Abschluss des Ladens der Seite erfolgt. Opera 5.02 kennt die Eigenschaft defaultChecked noch nicht.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern defaultValue

Speichert den voreingestellten Text eines Eingabefeldes.

Anwendbar auf: Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
URI: <input type="text" size="40" name="uri" value="http://www.example.org/en/">
<input type="button" value="Gehe zu"
onclick="window.location.href = document.Testform.uri.value">
</form>
<script type="text/javascript">
if (navigator.language.indexOf("de") > -1) {
  document.Testform.url.defaultValue = "http://www.example.org/de/";
  document.Testform.url.value = document.Testform.url.defaultValue;
}
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Button. Das Eingabefeld wird mit http://www.example.org/en/ vorbelegt. Beim Klick auf den Button wird der Wert aus dem Eingabefeld an window. Seite location.href zugewiesen. Dadurch wird die entsprechende Adresse aufgerufen.
Bevor der Anwender jedoch überhaupt das Feld editieren kann, wird gleich beim Einlesen der Datei unterhalb des Formulars ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Es wird abgefragt, ob in der Ausweisung des Browsers ( Seite navigator.language) der Bestandteil de vorkommt ( Seite indexOf()). Wenn ja, ist es ein deutschsprachiger Browser. In diesem Fall wird der defaultValue des Eingabefeldes auf http://www.example.org/de/ geändert. Der geänderte Wert wird jedoch erst sichtbar, wenn er der Eigenschaft nach unten value zugewiesen wird. Dies geschieht in der zweiten Anweisung. Das Eingabefeld des Formulars ist dann abhängig von der Sprache des Browsers mit http://www.example.org/en/ oder http://www.example.org/de/ vorbelegt.

Beachten Sie:

Opera 5.02 kennt die Eigenschaft defaultValue noch nicht. Trotzdem interpretiert auch dieser Browser das Beispiel. Das liegt daran, dass mit der Zuweisung defaultValue = "http://www.example.org/de/" der Wert des Eigenschaft manuell eingegeben wird. Sobald Sie jedoch ein JavaScript vom Originalwert abhängig machen möchten, müssen Sie berücksichtigen, dass diese Eigenschaft nicht existiert.

DOM 1.0 Netscape 6.0 MS IE 4.0 Opera 6 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Lesen/Ändern disabled

Speichert, ob das Formularelement verfügbar oder ausgegraut ist. Entspricht dem disabled-Attribut, siehe Seite Element ausgrauen. Mögliche Werte sind true oder false.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function wechsle_art () {
  if (document.Testform.auto[0].checked == true) {
    var deaktiviert = false;
  } else {
    var deaktiviert = true;
  }
  for (var i = 0; i < document.Testform.autoart.length; i++) {
    document.Testform.autoart[i].disabled = deaktiviert;
  }
}
</script>
</head><body>

<form action="" name="Testform">

<p>Besitzen Sie ein Auto?</p>

<p><input type="radio" name="auto" value="ja" onclick="wechsle_art();"> ja<br>
<input type="radio" name="auto" value="nein" onclick="wechsle_art();"> nein</p>

<p>Falls ja, was für ein Auto?</p>

<p><input type="radio" name="autoart"> Kleinwagen<br>
<input type="radio" name="autoart" value="kombi"> Kombi<br>
<input type="radio" name="autoart" value="limousine"> Limousine<br>
<input type="radio" name="autoart" value="sportwagen"> Sportwagen<br>
<input type="radio" name="autoart" value="kleinbus"> Kleinbus<br>
<input type="radio" name="autoart" value="andere"> andere Art</p>

</form>

</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Gruppen von Radio-Buttons. In der ersten Gruppe kann der Anwender auswählen, ob er ein Auto besitzt oder nicht. In der zweiten Gruppe kann er, falls er ein Auto besitzt, den Typ angeben. Da die zweite Gruppe nur interessant ist, wenn der Anwender die Frage "Haben Sie ein Auto?" mit "ja" beantwortet hat, werden die Radio-Buttons der zweiten Gruppe ausgegraut, wenn der Anwender "nein" wählt. Dazu haben die Radio-Buttons der ersten Gruppe einen Event-Handler Seite onclick. Beim Klicken auf einen der beiden Radio-Buttons wird die Funktion wechsle_art() ausgeführt, die in einem Script-Bereich im Seitenkopf definiert ist. Sie fragt zunächst mit einer bedingten Anweisung ab, ob die Eigenschaft nach oben checked des ersten Radio-Buttons einen positiven Wert hat. Dementsprechend wird eine Variable namens deaktiviert auf true oder false gesetzt. Anschließend werden mit einer for-Schleife alle Radio-Buttons durchlaufen, die zur Gruppe mit dem Namen autoart gehören. Die disabled-Eigenschaft jedes dieser Radio-Buttons erhält den Wert, der in der Variable deaktiviert gespeichert ist. Die dazu verwendete Zugriffsmethode wird im Abschnitt nach oben Gruppenelemente erklärt. Auf diese Weise werden nacheinander alle fraglichen Radio-Buttons aktiviert, wenn der Anwender "ja" wählt, und sie werden deaktiviert, wenn der Anwender die erste Frage mit "nein" beantwortet.

Beachten Sie:

Sie werden sich wundern, warum im Beispiel die Wahl des Event-Handlers auf onclick und nicht auf Seite onchange fiel. In der Tat ist onchange im Allgemeinen passender, um JavaScript auszuführen, wenn sich der Wert eines Formularelements ändert. Bei Radio-Buttons haben die Browser allerdings einige Fehler in Bezug auf den Event-Handler onchange. Der Internet Explorer 6 löst zwar ein solches Ereignis aus, sobald einer der Radio-Buttons z.B. durch einen Mausklick aktiviert wird. Das Ereignis wird jedoch bereits vor der tatsächlichen Aktivierung des gewählten Radio-Buttons ausgelöst. Somit liefert die Abfrage der checked-Eigenschaft unbrauchbare bzw. genau umgekehrte Werte. Wegen diesem Browserfehler wurde im Beispiel onclick statt onchange gewählt. Glücklicherweise starten die gängigen Browser auch dann ein Klick-Ereignis, wenn nicht die Maus, sondern die Tastatur zum Ändern des Radio-Buttons verwendet wurde. Somit funktioniert das Beispiel auch bei der Bedienung des Formulars ausschließlich über die Tastatur.

Netscape versteht disabled ab Version 6.0. Diese Version liefert allerdings falsche Werte für die checked-Eigenschaft der Radio-Buttons, wenn sie beim Verarbeiten des Klick-Ereignisses abgefragt werden. Das Beispiel funktioniert daher erst ab Netscape 6.1.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen form

Speichert das Formular, innerhalb dessen sich das Element befindet. Hinter der Eigenschaft form können Sie nochmals alle Eigenschaften und Methoden des Seite forms-Objekts notieren.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="button" name="derButton" value="Test"
onclick="alert(document.Testform.derButton.form.name)">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Button. Beim Anklicken des Buttons wird der Name des Formulars ausgegeben.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Gibt man mehreren Formularelementen den gleichen Namen, wird automatisch in JavaScript ein Array angelegt, um jedes einzelne Element ansprechen zu können. In der Eigenschaft length des Elementobjekts wird dann die Anzahl der Elemente gespeichert.

Ein Beispiel für die Anwendung ist im Seite Beispiel zu disabled zu sehen. Dort wird eine for-Schleife für alle Elemente des Namens autoart durchlaufen. document.Testform.autoart ist dabei das Array aller Radiobuttons, in document.Testform.autoart.length steht die Anzahl der Buttons, und mit document.Testform.autoart[i] wird auf einen einzelnen Button zugegriffen (und im Beispiel dann die Eigenschaft disabled gesetzt).

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern name

Speichert den Namen des Formularelements, wie er in HTML bei der Definition des Elements mit dem Attribut name zugewiesen wurde.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="button" name="derButton" value="Test"
onclick="alert(document.Testform.derButton.name)">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Button. Beim Anklicken des Buttons wird der Name des Buttons ausgegeben.

DOM 1.0 Netscape 6.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern readOnly

Speichert, ob das Formularelement unveränderbar (nur lesen) ist. Entspricht dem readonly-Attribut, siehe Seite Element ausgrauen. Mögliche Werte sind true oder false.

Beachten Sie die im Vergleich zum HTML-Attribut abweichende Schreibweise. Diese Eigenschaft muss zwingend mit großem O geschrieben werden!

Die Anwendung ist sehr ähnlich zu der Eigenschaft nach oben disabled.

Beachten Sie:

Opera unterstützt das Auslesen der readOnly-Eigenschaft bereits in Version 5.12, das Ändern des Wertes wird allerdings erst in Version 7 korrekt umgesetzt.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen type

Speichert den Elementtyp eines Formularelements.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="radio" name="Auto" value="Porsche"> Porsche<br>
<input type="radio" name="Auto" value="Mercedes"> Mercedes<br>
Name: <input type="text" name="Name" size="30"><br>
<input type="submit" name="Absendebutton" value="Absenden">
</form>
<script type="text/javascript">
for (var i = 0; i < document.Testform.length; ++i) {
  document.write("<br>Elementname: " + document.forms[0].elements[i].name);
  document.write(", Elementtyp: " + document.forms[0].elements[i].type);
}
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit verschiedenen Elementen. Zu Testzwecken ist unterhalb des Formulars ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. In dem Script wird für alle Elemente des Formulars mit Seite document.write() der Elementname und der Elementtyp in die Datei geschrieben.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern value

Speichert den Wert, der in einem Formularelement eingegeben wurde bzw. diesem zugewiesen ist.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
Name: <input type="text" size="30" name="Name">
<input type="submit" name="Absendebutton" value="Absenden">
<input type="hidden" name="Browser" value="">
</form>
<script type="text/javascript">
document.Testform.Browser.value = navigator.userAgent;
document.write(document.Testform.Browser.value);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, unter anderem mit einem versteckten Feld (<input type="hidden">). Unterhalb des Formulars ist ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. In dem Script wird dem Wert des versteckten Formularfeldes (document.Testform.Browser.value) der Browser-Typ des Anwenders ( Seite navigator.userAgent) zugewiesen. Dieser dynamisch erzeugte Formularinhalt wird mit übertragen, wenn der Anwender das Formular abschickt. In obigen Beispiel wird zur Demonstration der Wert des versteckten Feldes mit der Methode Seite document.write() in das Dokument geschrieben.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 blur()

Entfernt den Cursor bzw. den Focus von dem betreffenden Element. Erwartet keine Parameter.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="text" name="Feld" size="30" onfocus="this.blur()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Feld. Wenn der Anwender den Cursor in das Feld setzen will, wird der Cursor mit this.blur() sofort wieder aus dem Feld entfernt. Durch das Schlüsselwort Seite this wird der Bezug zum aktuellen Objekt hergestellt, in diesem Fall das Element Feld, und die Methode auf das dieses Objekt angewendet. Eine solche Maßnahme kann beispielsweise sinnvoll sein, wenn Sie ein Feld ausschließlich als Ausgabefeld nutzen wollen, in dem der Anwender nichts editieren können soll.

Beachten Sie:

Nicht immer wird der Cursor aus dem Eingabefeld entfernt. Eine Eingabe von Inhalt wird jedoch unterbunden.

Im Opera bis Version 6 exitiert zwar die Methode blur(), jedoch bleibt diese ohne Wirkung. Unter Opera 5.02 erzeugt die Anwendung der Methode einen JavaScript-Fehler.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 click()

Erzeugt einen automatischen Klick auf den betreffenden Button. Erwartet keine Parameter.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Abbrechen-Buttons Seite Absendebuttons

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
In welchem Jahr starb Goethe?<br>
<input type="text" size="6" name="Todesjahr">
<input type="button" name="derButton" value="Weiter" onclick="Check()">
</form>
<script type="text/javascript">
function Check () {
  if (document.Testform.Todesjahr.value != "1832") {
    window.location.href = "fehler.htm";
  } else {
    window.location.href = "erfolg.htm";
  }
}

window.setTimeout("document.Testform.derButton.click()", 10000);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, in dem der Anwender das Todesjahr von Goethe eingeben soll. Wenn der Anwender nicht innerhalb von 10 Sekunden auf den Button Weiter klickt, geschieht dies von alleine. Dafür sorgt die letzte Anweisung in dem Script, das unterhalb des Formulars notiert ist. Unterhalb des Formulars ist ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Mit document.Testform.derButton.click() wird dort das Klicken das Buttons ohne Anwendereinwirkung bewerkstelligt. Der Aufruf der Methode ist in Seite window.setTimeout() mit einer Verzögerungszeit von 10000 Millisekunden, also 10 Sekunden, eingebettet.
Beim Klick auf den Button, egal ob durch den Anwender oder automatisch, wird die Funktion Check() aufgerufen. Diese Funktion überprüft, ob in dem Eingabefeld für das Todesjahr der korrekte Wert steht. Abhängig davon wird eine andere Seite aufgerufen ( Seite location.href).

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 focus()

Setzt den Cursor bzw. den Focus auf das betreffende Element. Erwartet keine Parameter.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Check () {
  if (document.Testform.Todesjahr.value != "1832") {
    alert("Sie wissen es einfach nicht!");
    document.Testform.Todesjahr.focus();
  } else {
    alert("Bravo!");
    window.location.href = "erfolg.htm";
  }
}
</script>
</head><body>
<form name="Testform" action="">
In welchem Jahr starb Goethe?<br>
<input type="text" size="6" name="Todesjahr">
<input type="button" value="Weiter" onclick="Check()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, in dem der Anwender das Todesjahr von Goethe eingeben soll. Wenn der Anwender auf den Button Weiter klickt, wird die Funktion Check() aufgerufen. Diese Funktion überprüft, ob in dem Eingabefeld für das Todesjahr der korrekte Wert steht. Abhängig davon wird entweder mit Seite alert() eine bissige Meldung ausgegeben, oder es wird "Bravo" ausgegeben und eine andere Seite aufgerufen ( Seite location.href). Wenn der Anwender auf der Seite bleibt, weil die Eingabe fehlte oder falsch war, wird mit document.Testform.Todesjahr.focus() auf das Eingabefeld für das Todesjahr positioniert.

JavaScript 1.2 Netscape 4.0 handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie Seite handleEvent() beim window-Objekt (nähere Informationen siehe dort).

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 select()

Selektiert den gesamten in dem Feld enthaltenen Text. Erwartet keine Parameter.

Anwendbar auf: Seite Passwortfelder Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
Kopieren Sie den folgenden Code in die Adresszeile Ihres Browsers:<br>
<input type="text" size="40" name="Code" value="javascript:top.close()">
</form>
<script type="text/javascript">
document.Testform.Code.focus();
document.Testform.Code.select();
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem einzigen Feld. Das Feld wird mit dem Wert "javascript:top.close()" vorbelegt (wohlgemerkt: das ist keine JavaScript-Anweisung, sondern nur ein Feldinhalt). Unterhalb des Formulars ist ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Dort wird zunächst mit document.Testform.Code.focus() auf das Formularfeld positioniert. Denn das Selektieren von Text ist nur möglich, wenn das Feld den Focus hat. Der vorbelegte Text des Formularfeldes wird dann mit document.Testform.Code.select() selektiert.

nach oben
weiter | Seite options
zurück | Seite forms
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / options

SELFHTML

options
Informationsseite

nach unten options: Allgemeines zur Verwendung
nach unten Neue Elemente in Auswahlliste einfügen
nach unten Elemente aus Auswahlliste löschen

Eigenschaften:

nach unten defaultSelected (voreingestellte Auswahl)
nach unten length (Anzahl der Auswahlmöglichkeiten)
nach unten selected (aktuelle Auswahl)
nach unten selectedIndex (Index der aktuellen Auswahl)
nach unten text (Auswahltext)
nach unten value (Auswahlwert)
nach unten

option: Allgemeines zur Verwendung

Mit dem Objekt options, das in der JavaScript-Objekthierarchie unterhalb des Seite elements-Objekts liegt, haben Sie Zugriff auf Seite Auswahllisten innerhalb eines Formulars. Sie können dabei auf jede einzelne Auswahlmöglichkeit der Auswahlliste zugreifen.

Es stehen folgende Arten zur Verfügung, mit JavaScript auf die Optionen einer Auswahlliste zuzugreifen:

Schema 1 / Beispiel 1:

document.forms[#].elements[#].options[#].Eigenschaft
document.forms[#].elements[#].Eigenschaft

document.forms[0].elements[0].options[4].text = "Unsinn";
document.forms[0].elements[0].selectedIndex = 2;

Schema 2 / Beispiel 2:

document.Formularname.Elementname.options[#].Eigenschaft
document.Formularname.Elementname.Eigenschaft

document.Testformular.Auswahl.options[4].text = "Unsinn";
document.Testformular.Auswahl.selectedIndex = 2;

Schema 3 / Beispiel 3:

document.forms.Formularname.elements.Elementname.options[#].Eigenschaft
document.forms.Formularname.elements.Elementname.Eigenschaft

document.forms.Testformular.elements.Auswahl.options[4].text = "Unsinn";
document.forms.Testformular.elements.Auswahl.selectedIndex = 2;

Schema 4 / Beispiel 4:

document.forms["Formularname"].elements["Elementname"].options[#].Eigenschaft
document.forms["Formularname"].elements["Elementname"].Eigenschaft

document.forms["Testformular"].elements["Auswahl"].options[4].text = "Unsinn";
document.forms["Testformular"].elements["Auswahl"].selectedIndex = 2;

Erläuterung:

Auswahllisten sind ganz normale Formularelemente. Auswahllisten sprechen Sie also an wie andere Formularelemente auch:

  • mit einer Indexnummer des Formulars und des Elements (wie in Schema 1 / Beispiel 1)
    Bei Verwendung von Indexnummern geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte Formular in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. das erste Formular sprechen Sie mit document.forms[0] an, das zweite Formular mit document.forms[1] usw. Beim Zählen gilt die Reihenfolge, in der die <form>-Tags in der Datei notiert sind. Dann folgt die Angabe .elements zum Zugriff auf das zugehörige elements-Unterobjekt. Auch dahinter notieren Sie wieder eine Indexnummer in eckigen Klammern. Erneut wird bei 0 zu zählen begonnen, d.h. das erste Element innerhalb eines Formulars hat die Indexnummer 0, das zweite die Indexnummer 1 usw. Sie müssen dabei die Indexnummer der gewünschten Auswahlliste ermitteln. Sie können zwischen den eckigen Klammern auch eine Zahl-Variable notieren, die die Indexnummer des Formulars bzw. des Formularelements enthält.
  • mit Namen (wie in Schema 2 / Beispiel 2)
    Dabei geben Sie mit document.Formularname.Elementname den Namen des Formulars und der Auswahlliste an, den Sie in HTML mit <form name=> und <select name=> vergeben.
  • mit dem Namen des Formulars und des Elements direkt über das document-Objekt (wie in Schema 2 / Beispiel 2)
    Wie auch verschiedene andere Elemente mit name-Attributen können Sie Formulare mit Namen als Objekte direkt unterhalb des document-Objekts ansprechen. Dabei geben Sie mit document.Formularname.Elementname den Namen des Formulars und des Elements an, den Sie bei der Definition des Formulars <form name="..."> und der Auswahlliste <select name="..."> angegeben haben.
  • mit dem Namen des Formulars und dem Namen des Elements über das document.forms-Objekt und das zugehörige elements-Objekt (wie in Schema 3 / Beispiel 3)
    Mit document.forms.Formularname wird dabei das Formular angesprochen und über das Unterobjekt .elements.Elementname die fragliche Auswahlliste. Formularname und Elementname entsprechen jeweils dem name-Attribut des form- bzw. select-Elements, das Sie ansprechen möchten. Diese lange Schreibweise erlaubt verständlicheren Code, denn es ist sofort ersichtlich, dass ein Formularelement angesprochen wird.
  • mit dem Namen des Formulars und des Elements als Indexnamen (wie in Schema 4 / Beispiel 4)
    Diese Art des Ansprechens ist eine zu Schema 3 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Geben Sie mit document.forms["Formularname"].elements["Elementname"] den Namen des Formulars und der Auswahlliste als String an. Diese Schreibweise wird insbesondere für den Zugriff auf Auswahllisten benötigt, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 und 3 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Formularnamen bzw. den Auswahllistennamen enthält.

Das options-Objekt ist ein Array, der die Optionen der Auswahlliste enthält. Er hat selbst besitzt die Eigenschaft nach unten length. Über options gefolgt von einer Indexnummer können Sie die einzelnen die Auswahlmöglichkeiten ansprechen. Die erste Auswahloption der Liste hat die Indexnummer 0, die zweite die Indexnummer 1 usw. Die so angesprochenen Auswahloptionen besitzen die Eigenschaften nach unten selected, nach unten defaultSelected, nach unten text und nach unten value. Die Eigenschaft nach unten selectedIndex hingegen hängt wie auch option direkt an dem Objekt, das die Auswahlliste repräsentiert.

Bei den Beispielen auf dieser Seite wird jeweils gezeigt, wie Sie durch das Zusammenspiel des elements und des options-Objekts Auswahllisten mit JavaScript verarbeiten können.

Beachten Sie:

Gemäß dem HTML-spezifischen DOM greift z.B. document.forms.Formularname.elements.Auswahllistenname auf das select-Elementobjekt der Auswahlliste zu. Neben den hier beschriebenen Eigenschaften können Sie auf diese Art weitere Eigenschaften und Methoden nutzen, die in der Referenz zum Seite select-Elementobjekt aufgelistet sind. Die Einträge des options-Arrays sind dementsprechend Seite option-Elementobjekte mit weiteren Eigenschaften.

JavaScript 1.0 Netscape 2.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Neue Elemente in Auswahlliste einfügen

Sie können innerhalb eines JavaScripts neue Elemente zu einer Auswahlliste hinzufügen oder vorhandene Einträge durch neue ersetzen. Dazu müssen Sie mit Hilfe von JavaScript ein neues option-Objekt erzeugen und es einer Auswahlliste zuordnen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Hinzufuegen () {
  NeuerEintrag = new Option(document.Testform.neu.value, document.Testform.neu.value, false, true);
  document.Testform.Auswahl.options[document.Testform.Auswahl.length] = NeuerEintrag;
  document.Testform.neu.value = "";
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Ein Eintrag</option>
</select>
<br>
<input type="text" name="neu">
<input type="button" value="Hinzu" onclick="Hinzufuegen()">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular definiert, das eine Auswahlliste mit einem Eintrag, ein Eingabefeld und einen Button enthält. In dem Eingabefeld kann der Anwender Einträge eingeben, die er der Auswahlliste hinzufügen möchte. Beim Klick auf den Button wird der eingegebene Wert als Eintrag in die Auswahlliste übernommen.

Dazu wird die Funktion Hinzufuegen() aufgerufen, die im Dateikopf notiert ist. Mit der ersten Anweisung in dieser Funktion wird mit new Option ein neues option-Objekt erzeugt. Als Parameter wird unter anderem der Text übergeben, der bei dem neuen Listeneintrag angezeigt werden soll. Im Beispiel ist das der Wert des Eingabefeldes, das der Anwender ausgefüllt hat (document.Testform.neu.value). Anschließend müssen Sie angeben, an welcher Stelle in der Auswahlliste der neu erzeugte Eintrag eingefügt werden soll. Im obigen Beispiel soll der neue Eintrag jeweils ans Ende der Liste angehängt werden. Dazu wird der neue Eintrag einer Indexnummer der Auswahlliste zugeordnet, die mit der Eigenschaft nach unten length ermittelt wird. Diese Syntax können Sie stets benutzen, um Listeneinträge ans Ende einer Liste einzufügen. Doch angenommen, im obigen Beispiel wollten Sie den ersten Eintrag der Liste mit dem neuen Eintrag überschreiben. Dann müsste innerhalb der Funktion Hinzufuegen() dieser Befehl:
document.Testform.Auswahl.options[document.Testform.Auswahl.length] = NeuerEintrag;
wie folgt lauten:
document.Testform.Auswahl.options[0] = NeuerEintrag;
Durch Angabe einer Indexnummer, die in der Liste schon vorkommt, überschreiben Sie also einen Eintrag.

new Option() kennt vier Parameter von denen die drei letzten Parameter optional sind.
1. text = angezeigter Text in der Liste
2. value = zu übertragender Wert der Liste (optional)
3. defaultSelected = true übergeben, wenn der Eintrag der defaultmäßig vorselektierte Eintrag sein soll, sonst false (optional)
4. selected = true übergeben, wenn der Eintrag selektiert werden soll (optional)
Opera 5.12 interpretiert die beiden letzten Parameter nicht und Netscape 6.1 den letzten Parameter nicht.

Beachten Sie:

Im Internet Explorer 5.0 können Sie nicht fensterübergreifend eine Auswahlliste ändern. Der Browser reagiert darauf mit einer Fehlermeldung bzw. mit einem Absturz. Notieren Sie deshalb die ändernde Funktion immer im gleichen Dokument wie die Liste und rufen Sie die Funktion gegebenenfalls fensterübergreifend auf.

Im HTML-spezifischen DOM ist das Hinzufügen von Elementen in die Auswahlliste mithilfe der add()-Methode des Seite select-Elementobjekts (Beispiel siehe dort) vorgesehen. Die hier beschrieben Methode wird allerdings zuverlässiger unterstützt.

JavaScript 1.0 Netscape 2.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Elemente aus Auswahlliste löschen

Elemente können Sie löschen, indem Sie Ihnen den Wert null zuordnen. Alternativ ist es auch möglich, dem Option-Array eine neue Länge zuzuweisen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Loeschen () {
  document.Testform.Auswahl.options[document.Testform.Auswahl.length - 1] = null;
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Auswahl 1</option>
<option>Auswahl 2</option>
<option>Auswahl 3</option>
<option>Auswahl 4</option>
<option>Auswahl 5</option>
</select>
<br>
<input type="button" value="L&ouml;schen" onclick="Loeschen()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste mit einem Button. Beim Anklicken des Buttons wird der jeweils letzte Eintrag aus der Auswahlliste gelöscht. Dazu wird die Funktion Loeschen() aufgerufen. Die erste Anweisung in der Funktion löscht einen Listeneintrag. Zum Löschen eines Eintrags geben Sie die Indexnummer des zu löschenden Eintrags an. Im Beispiel wird dabei document.Testform.Auswahl.length - 1 angegeben - das ist die Indexnummer des jeweils letzten Eintrags. Genausogut können Sie aber auch 0 angeben, um den ersten Listeneintrag zu löschen, 1, um den zweiten zu löschen usw. Der Löschvorgang kommt zustande, indem Sie dem Listeneintrag den Wert null zuweisen.

Beachten Sie:

Im HTML-spezifischen DOM für das Löschen von Elementen aus einer Auswahlliste die remove()-Methode des Seite select-Elementobjekts vorgesehen. Die hier beschrieben Methode wird allerdings zuverlässiger unterstützt.

DOM 1.0 JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern defaultSelected

Speichert, ob bzw. dass eine Auswahlmöglichkeit vorausgewählt ist. Mögliche Werte sind true oder false.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function AuswahlReset () {
  for (i = 0; i < document.Testform.Auswahl.length; i++)
    if (document.Testform.Auswahl.options[i].defaultSelected == true)
      document.Testform.Auswahl.options[i].selected = true;
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Augsburg</option>
<option>Berlin</option>
<option>Chemnitz</option>
<option>Dortmund</option>
<option selected>Essen</option>
<option>Frankfurt</option>
<option>Giessen</option>
<option>Hamburg</option>
</select>
<br>
<input type="button" value="Auswahl Reset" onclick="AuswahlReset()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste und einem Button. Bei der Auswahlliste wird bei der HTML-Definition ein Eintrag mit selected als Vorauswahl eingestellt. Der Anwender kann natürlich einen anderen Eintrag auswählen. Wenn er jedoch auf den Button mit der Aufschrift "Auswahl Reset" klickt, wird der Originalzustand wiederhergestellt. Dazu wird beim Anklicken des Buttons die Funktion AuswahlReset() aufgerufen. Diese Funktion ermittelt in einer Seite for-Schleife für alle Auswahlmöglichkeiten der Auswahlliste, ob es sich um die Vorauswahl handelt (if(document.Testform.Auswahl.options[i].defaultSelected == true)). Denn die Vorauswahl ist zu diesem Zeitpunkt durchaus noch gespeichert, auch wenn der Anwender mittlerweile einen anderen Eintrag ausgewählt hat. Wenn die voreingestellte Auswahl gefunden ist, wird die aktuelle Auswahl auf den Indexwert der Vorauswahl gesetzt (document.Testform.Auswahl.options[i].selected = true). Dadurch wird der Originalzustand wiederhergestellt.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert die Anzahl der Einträge einer Auswahlliste. Sie können die Anzahl der Einträge sowohl mit document.Formularname.Listenname.length als auch mit document.Formularname.Listenname.options.length bestimmen. Beide Angaben enthalten die gleichen Werte.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Augsburg</option>
<option>Berlin</option>
<option>Chemnitz</option>
<option>Dortmund</option>
<option>Essen</option>
<option>Frankfurt</option>
<option>Giessen</option>
<option>Hamburg</option>
</select>
</form>
<script type="text/javascript">
document.write("Wählen Sie einen der " + document.Testform.Auswahl.length + " Einträge aus");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. Unterhalb des Formulars ist ein Script-Bereich notiert. Unterhalb deshalb, weil die Anweisung in diesem Bereich sofort beim Einlesen der Datei ausgeführt wird und das Formular zu diesem Zeitpunkt bereits bekannt sein muss. Mit Seite document.write() wird dynamisch die Anzahl der Auswahlmöglichkeiten der Auswahlliste in die Datei geschrieben.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern selected

Speichert, ob oder dass ein bestimmter Eintrag einer Auswahlliste selektiert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
  if (document.Testform.Auswahl.options[2].selected == true) {
    alert("Diese Auswahl gilt nicht");
    return false;
  }
  return true;
}
</script>
</head><body>
<form name="Testform" onsubmit="return CheckAuswahl()" action="">
<select name="Auswahl" size="5">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
<br>
<input type="submit">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste und einem Submit-Button zum Absenden des Formulars. Beim Absenden wird jedoch über den Event-Handler onsubmit im einleitenden <form>-Tag die Funktion CheckAuswahl() aufgerufen. Das Formular wird nur abgeschickt, wenn diese Funktion den Wert true zurückgibt. Die Funktion überprüft, ob der Anwender etwa auf die Idee gekommen ist, den Eintrag mit der Indexnummer 2 (Guildo Horn) auszuwählen. In diesem Fall wird eine Meldung ausgegeben und es wird false zurückgegeben, wodurch das Formular nicht abgeschickt wird. Der Anwender kann eine neue Auswahl treffen.

Beachten Sie:

Die Eigenschaft selected unterscheidet sich von nach unten selectedIndex durch die Adressierung des gewünschten Listeneintrags. Ansonsten haben beide Eigenschaften die gleiche Aufgabe.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern selectedIndex

Speichert, ob oder dass ein bestimmter Eintrag einer Auswahlliste selektiert ist. Wenn nichts ausgewählt ist, dann ist in der Eigenschaft der Wert -1 gespeichert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
  if (document.Testform.Auswahl.selectedIndex == 2)
    document.Testform.Auswahl.selectedIndex = 0;
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onchange="CheckAuswahl()">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. Im einleitenden <select>-Tag ist der Event-Handler onchange notiert. Dadurch wird jedesmal, wenn der Anwender eine Auswahl in der Auswahlliste trifft, die Funktion CheckAuswahl() aufgerufen. Die Funktion überprüft, ob der Anwender etwa den Eintrag mit der Indexnummer 2 ausgewählt hat (Guildo Horn). Wenn ja, wählt die Funktion selbständig den Eintrag mit der Indexnummer 0 aus (Goethe). Das heißt, hinterher steht der Auswahlbalken auf diesem Eintrag. Der Anwender kann natürlich eine neue Auswahl treffen.

Beachten Sie:

Die Eigenschaft selectedIndex unterscheidet sich von nach oben selected durch die Adressierung des gewünschten Listeneintrags. Ansonsten haben beide Eigenschaften die gleiche Aufgabe.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern text

Speichert den angezeigten Text eines Eintrags in einer Auswahlliste.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
  if (document.Testform.Auswahl.selectedIndex == 2)
    document.Testform.Auswahl.options[2].text = "Thomas Mann";
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onchange="CheckAuswahl()">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. Im einleitenden <select>-Tag ist der Event-Handler onchange notiert. Dadurch wird jedesmal, wenn der Anwender eine Auswahl in der Auswahlliste trifft, die Funktion CheckAuswahl() aufgerufen. Die Funktion überprüft, ob der Anwender etwa den Eintrag mit der Indexnummer 2 ausgewählt hat (Guildo Horn). Wenn ja, ändert die Funktion den angezeigten Text dieses Eintrags gemeinerweise auf "Thomas Mann". Die Auswahlmöglichkeit bleibt selektiert.

Beachten Sie:

Das Ändern der Objekteigenschaft text - so wie im obigen Beispiel - ist erst seit JavaScript 1.1 möglich (Netscape 3.x, Internet Explorer 4.x). Das Auslesen dagegen wie ausgezeichnet seit JavaScript 1.0. Auch im HTML-spezifischen DOM ist text als nur lesbar definiert.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen value

Speichert den internen Absendewert eines Eintrags in einer Auswahlliste.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
  for (i = 0; i < document.Testform.Auswahl.length; ++i)
    if (document.Testform.Auswahl.options[i].selected == true)
      alert(document.Testform.Auswahl.options[i].value);
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onchange="CheckAuswahl()">
<option value="Idiot!">Blindauswahl 1</option>
<option value="Dummkopf!">Blindauswahl 2</option>
<option value="Bratze!">Blindauswahl 3</option>
<option value="Schlampe!">Blindauswahl 4</option>
<option value="Bingo - gewonnen!">Blindauswahl 5</option>
</select>
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einer Auswahlliste. In den einzelnen <option>-Tags sind im Attribut value interne Absendewerte notiert. Im einleitenden <select>-Tag ist außerdem der Event-Handler onchange notiert. Dadurch wird jedesmal, wenn der Anwender eine Auswahl in der Auswahlliste trifft, die Funktion CheckAuswahl() aufgerufen. Die Funktion ermittelt in einer Seite for-Schleife für alle Auswahlmöglichkeiten der Auswahlliste, ob die jeweilige Auswahl selektiert wurde. Wenn ja, wird der interne Absendewert der Auswahlmöglichkeit in einem Meldungsfenster ausgegeben.

nach oben
weiter | Seite images
zurück | Seite elements
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / images

SELFHTML

images
Informationsseite

nach unten images: Allgemeines zur Verwendung

Eigenschaften:

nach unten border (Rahmen)
nach unten complete (Ladezustand)
nach unten height (Höhe)
nach unten hspace (horizontaler Abstand)
nach unten length (Anzahl Grafiken)
nach unten lowsrc (Vorschaugrafik)
nach unten name (Name)
nach unten src (Grafikdatei)
nach unten vspace (vertikaler Abstand)
nach unten width (Breite)

Methode:

nach unten handleEvent() (Ereignis verarbeiten)
nach unten

images: Allgemeines zur Verwendung

Mit dem Objekt images, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, haben Sie Zugriff auf alle Seite Grafiken, die in einer HTML-Datei definiert sind. Dabei können Sie auch vorhandene Grafiken dynamisch durch andere ersetzen.

Ein neues Grafik-Objekt wird automatisch erzeugt, wenn der Web-Browser eine Kapitel Grafik in der HTML-Datei vorfindet.

Es stehen folgende Arten zur Verfügung, mit JavaScript eine bestimmte Grafik anzusprechen:

Schema 1 / Beispiel 1:

document.images[#].Eigenschaft
document.images[#].Methode()

Hoehe = document.images[0].height;

Schema 2 / Beispiel 2:

document.images.Bildname.Eigenschaft
document.images.Bildname.Methode()

Hoehe = document.images["Portrait"].height;

Schema 3 / Beispiel 3:

document.images["Bildname"].Eigenschaft
document.images["Bildname"].Methode()

Hoehe = document.images["Portrait"].height;

Schema 4 / Beispiel 4:

document.Bildname.Eigenschaft
document.Bildname.Methode()

Hoehe = document.Portrait.height;

Erläuterung:

Grafikobjekte können Sie auf zwei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
    Bei Verwendung von Indexnummern geben Sie document.images an und dahinter in eckigen Klammern, die wie vielte Grafik in der Datei Sie meinen. Jede Grafik, die in HTML mit dem <img>-Tag notiert wurde, zählt. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. die erste Grafik sprechen Sie mit images[0] an, die zweite Grafik mit images[1] usw. Beim Zählen gilt die Reihenfolge, in der die <img>-Tags in der Datei notiert sind.
  • mit dem Namen der Grafik (wie in Schema 2 / Beispiel 2)
    Dabei wird die Grafik als Unterobjekt von document.images angesprochen. Notieren Sie document.images, dahinter einen Punkt zum Ansprechen des Unterobjekts und schließlich den Namen, den Sie bei der Definition der Grafik im einleitenden <img>-Tag im Attribut name angegeben haben.
  • mit dem Namen der Grafik als Indexnamen (wie in Schema 3 / Beispiel 3)
    Diese Art ist eine zu Schema 2 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Dabei notieren Sie wie beim Ansprechen mit Indexnummer hinter document.images eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen, den Sie bei der Definition der Grafik im einleitenden <img>-Tag im Attribut name angegeben haben. Diese Schreibweise ist vor allem zum Zugriff auf Grafiken nützlich, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Grafiknamen enthält.
  • mit dem Namen der Grafik direkt (wie in Schema 4 / Beispiel 4)
    Dabei geben Sie mit document.Bildname den Namen an, den Sie bei der Definition der Grafik im einleitenden <img>-Tag im Attribut name angegeben haben.

Für Grafiken, die Sie nachträglich mit JavaScript anzeigen möchten, müssen Sie jedoch eigene neue Grafikobjekte in JavaScript erzeugen. Das ist besonders dann wichtig, wenn Sie Grafiken dynamisch durch andere Grafiken ersetzen wollen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
Zweitbild = new Image(104, 102);
Zweitbild.src = "christa.gif";
function Bildwechsel () {
  document.images[0].src = Zweitbild.src;
}
</script>
</head><body>
<p>
<a href="javascript:alert(Zweitbild.src)">Bildquelle ausgeben</a><br>
<a href="javascript:alert(Zweitbild.height)">Bildhöhe ausgeben</a><br>
<a href="javascript:alert(Zweitbild.width)">Bildbreite ausgeben</a>
</p>
<p>
<img src="boris.gif" alt="Boris"><br>
<a href="javascript:Bildwechsel()">Bild auswechseln</a>
</p>
</body></html>

Erläuterung:

Ein neues Grafik-Objekt speichern Sie in einem selbst vergebenen Objektnamen, im obigen Beispiel in dem Namen Zweitbild. Hinter dem Namen folgt ein Gleichheitszeichen. Dahinter folgt das reservierte Wort new und der Aufruf der Objektfunktion Image() (erster Buchstabe großgeschrieben!).

Anschließend können Sie mit der neu erzeugten Instanz arbeiten. So können Sie der Instanz über die Objekteigenschaft src die Adresse einer Grafik zuordnen, im Beispiel die Datei christa.gif. Mit dieser Zuordnung lädt der Browser die Grafikdatei. Wenn die Datei auf einem WWW-Server liegt, kann die Übertragung je nach Größe der Grafikdatei einige Zeit dauert. Da das Script derweil weiterläuft, können Sie nicht sofort mit der Grafik arbeiten. Ob die Grafik bereits fertig geladen ist, können Sie über die Eigenschaft nach unten complete abfragen.

Die Funktion Bildwechsel im obigen Beispiel zeigt eine Anweisung, wie Sie dynamisch eine vorhandene Grafik ersetzen können. Als erste Grafik in der HTML-Datei wurde boris.gif eingebunden. Mit Hilfe der Eigenschaft nach unten src wird diese Grafik beim Klicken auf den Verweis durch christa.gif ersetzt.

Die Objektfunktion Image() kennt zwei optionale Parameter:
1. width Breite des Bildes
2. height Höhe des Bildes
Diese Parameter können Sie beim Erzeugen des Image-Objektes mit angeben. Zur Demonstration wird im Beispiel die Höhe und die Breite der Grafik mit ausgegeben.
Netscape 6.1 und Opera 5.12 interpretieren diese optionalen Parameter nicht und speichern jeweils den Wert 0 für die Höhe und Breite der Grafik.

Beachten Sie:

Ein Anwendungsbeispiel für den Einsatz dynamisch austauschbarer Grafiken finden Sie in diesem Dokument: Seite Dynamische grafische Buttons.

Gemäß dem HTML-spezifischen DOM greift z.B. document.images.bildname auf das img-Elementobjekt zu, mit der die Grafik eingebunden ist. Neben den hier beschriebenen Eigenschaften und Methoden können Sie auf diese Art weitere Eigenschaften und Methoden nutzen, die in der Referenz zum Seite img-Elementobjekt aufgelistet sind.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern border

Speichert die Angabe zum Rahmen um eine Grafik, wie sie im attribut border im <img>-Tag möglich ist. Netscape speichert auch dann einen Wert, wenn die Angabe im HTML-Tag fehlt. Der Internet Explorer speichert nur dann einen Wert, wenn im HTML-Tag ein Wert angegeben ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Anna.border)">
<img src="anna.jpg" border="3" alt="Anna" name="Anna">
</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit Seite alert() der Wert ausgegeben, der im Attribut border angegeben ist.

Beachten Sie:

Im Netscape 6.1 ist diese Angabe fehlerhaft und enthält als Rückgabewert -1.
Das Ändern der Eigenschaft border ist bislang nur im Internet Explorer möglich. Im Netscape 6.1 wird der bestehende Rahmen bei einer Änderung entfernt.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Lesen complete

Speichert gemäß Netscapes JavaScript, ob der Versuch, eine Grafik zu laden, abgeschlossen wurde. Enthält den Wert true, wenn der Versuch abgeschlossen wurde, und den Wert false, wenn gerade versucht wird, die Grafik zu laden.die Grafik nicht oder nicht vollständig geladen ist. Speichert gemäß Microsofts JScript, ob eine Grafik vollständig geladen ist oder nicht. Enthält den Wert true, wenn die Grafik fertig geladen ist, und den Wert false, wenn die Grafik nicht oder nicht vollständig geladen ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function BildCheck () {
  var Status = "";
  for (i = 0; i < document.images.length; ++i) {
    if (document.images[i].complete == true) {
      Status = Status + "Grafik " + (i + 1) + " geladen\n";
    } else {
      Status = Status + "Grafik " + (i + 1) + " nicht geladen\n";
    }
  }
  Status = Status + document.images.length + " Grafiken im Dokument";
  alert(Status);
}
</script>
</head><body>
<img src="berthold.gif" alt="Berthold"><br>
<img src="boris.gif" alt="Boris"><br>
<img src="bernd.gif" alt="Bernd"><br>
<a href="javascript:BildCheck()">Grafiken checken</a>
</body></html>

Erläuterung:

Das Beispiel enthält mehrere Grafiken und einen Verweis. Beim Anklicken des Verweises wird die Funktion BildCheck() aufgerufen, die im Dateikopf in einem Script-Bereich definiert ist. Diese Funktion ermittelt in einer for-Schleife für jede einzelne Grafik in der Datei (ermittelbar mit document.images.length), ob diese geladen ist (if (document.images[i].complete == true)) oder nicht. Das Ergebnis wird in einer Variablen Status gesammelt. Am Ende wird der Inhalt von Status mit Seite alert() ausgegeben.

Beachten Sie:

Die Eigenschaft complete wird von den Browsern unterschiedlich interpretiert, je nachdem, ob sie der Definition von Netscape oder Microsoft folgen. Netscape ab Version 6, Mozilla Firefox und Konqueror folgen der Netscape-Definition. Obwohl im vorliegenden Beispiel zwei Grafiken nicht geladen werden können, hat die Eigenschaft complete für alle Grafiken den Wert true. Die älteren Netscape-Browser bis zur Version 4 geben für alle Grafiken den Wert false an. Der Internet Explorer und Opera folgen der Microsoft-Definition: Die korrekt geladene Grafik hat den complete-Wert true, die anderen beiden nicht vorhandenen Grafiken den Wert false.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern height

Speichert die Angabe zur Höhe eine Grafik, wie sie mit dem Attribut height im <img>-Tag möglich ist. Es wird auch dann ein Wert gespeichert, wenn die Angabe im HTML-Tag fehlt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="christa.gif" name="Christa" alt="Christa">
<script type="text/javascript">
document.write(document.Christa.name + "<br>");
document.write(document.Christa.width + " x " + document.Christa.height + " Pixel");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik. Unterhalb davon ist ein Script-Bereich notiert. Darin wird mit Seite document.write() der Bildname und die Angaben zu Breite und Höhe der Grafik geschrieben.

Beachten Sie:

Im Netscape 6.1, Safari und in Konqueror wird in der Eigenschaft height der Wert 0 gespeichert, wenn das height-Attribut im HTML-Tag fehlt.
Das Ändern der Eigenschaft height ist bislang nur im Internet Explorer und im Netscape 6.1 möglich.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern hspace

Speichert die Angabe zum horizontalen Abstand zwischen einer Grafik und ihren nebenliegenden Elementen, wie sie mit dem Attribut hspace im <img>-Tag möglich ist. Wenn die Angabe im HTML-Tag fehlt, hat die Objekteigenschaft hspace den Wert 0.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Dorian.hspace)">
<img src="dorian.jpg" hspace="30" name="Dorian" alt="Dorian">
</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit Seite alert() der Wert ausgegeben, der im Attribut hspace angegeben ist.

Beachten Sie:

Netscape 6.1 und Opera 5.12 interpretieren diese Angabe fehlerhaft. Im Netscape 6.1 ist stets -1 und in Opera 5.12 0 gespeichert.
Das Ändern der Eigenschaft hspace ist bislang nur im Internet Explorer möglich. Im Netscape 6.1 wird der horizontale Abstand entfernt.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert die Anzahl der Grafiken in einer Datei.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="anna.jpg" alt="Anna"><br>
<img src="dorian.gif" alt="Dorian"><br>
<img src="christa.gif" alt="Christa"><br>
<script type="text/javascript">
document.write("<hr>Seite enthält " + document.images.length + " Grafiken");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält mehrere Grafiken. Am Ende steht ein Script-Bereich. Darin wird mit Seite document.write() die Anzahl der Grafiken in die Datei geschrieben.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen lowsrc

Speichert die Angabe zur Vorabgrafik, wie sie mit dem Attribut lowsrc im <img>-Tag möglich ist. Wenn die Angabe im HTML-Tag fehlt, enthält die Objekteigenschaft lowsrc keinen Wert. Wenn ein lowsrc-Attribut angegeben ist, enthält die Objekteigenschaft bei Netscape der vollständige URI, beim Internet Explorer, Netscape 6 und Opera dagegen genau die Angabe, die in der Wertzuweisung an das HTML-Attribut steht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.images[0].lowsrc)">
<img src="xanta.jpg" lowsrc="xantalow.jpg" alt="Fr&auml;aenzschen und Franz">
</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik, die mit dem lowsrc-Attribut eine vorab anzuzeigende Grafik definiert, und die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit Seite alert() der Wert ausgegeben, der im Attribut lowsrc gespeichert ist.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen name

Speichert den Namen einer Grafik, wie er mit dem Attribut name im <img>-Tag möglich ist. Wenn die Angabe im HTML-Tag fehlt, enthält die Objekteigenschaft name keinen Wert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img name="Anna" src="anna.jpg" width="271" height="265" border="0" alt="">
<script type="text/javascript">
document.write("<br>" + document.images[0].name);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik. Unterhalb davon ist ein Script-Bereich notiert. Darin wird mit Seite document.write() der Bildname der Grafik in die Datei geschrieben.

Beachten Sie:

Im Netscape 6.1 können Sie die Eigenschaft name auch ändern.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern src

Speichert die Angabe, welche Grafikdatei angezeigt wird, wie sie mit dem Attribut src im <img>-Tag möglich ist. Diese Eigenschaft lässt sich ändern. Dadurch können Sie Grafiken dynamisch durch andere ersetzen. Beachten Sie jedoch, dass Breite und Höhe ursprünglich in HTML notierten Grafik für alle dynamisch folgenden Grafiken übernommen werden. Um verzerrungsfreie Effekte zu erzielen, sollten also alle Grafiken, die einander dynamisch ersetzen, die gleiche Höhe und Breite haben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="hans.gif" width="400" height="300" alt="Hans">
<script type="text/javascript">
var b = new Array();
b[0] = new Image(); b[0].src = "holger.gif";
b[1] = new Image(); b[1].src = "hilmar.gif";
b[2] = new Image(); b[2].src = "heiner.gif";
b[3] = new Image(); b[3].src = "hans.gif";
var i = 0;
function Animation () {
  if (i > 3)
    i = 0;
  document.images[0].src = b[i].src;
  i = i + 1;
  window.setTimeout("Animation()", 1000);
}

window.setTimeout("Animation()", 1000);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik namens hans.gif. Unterhalb davon ist ein Script-Bereich notiert, der dafür sorgt, dass die Grafik sich automatisch jede Sekunde in eine andere Grafik verwandelt. Dazu wird zunächst ein Seite Array namens b notiert. Danach werden vier Elemente des Arrays b bestimmt. In allen vier Fällen handelt es sich um neue Grafikobjekte. Jedem der neuen Grafikobjekte wird mit der Eigenschaft src eine Grafikdatei zugewiesen. Beachten Sie, dass auch die Datei hans.gif wieder dabei ist, obwohl diese bereits angezeigt wird. Da sie in die Animation integriert werden soll, muss für sie aber trotzdem noch mal ein eigenes neues Grafikobjekt erzeugt werden.

Innerhalb der Funktion Animation(), die unterhalb der Funktion zum ersten Mal aufgerufen wird. wird das jeweils aktuelle Bild durch ein anderes ersetzt. Das geschieht durch Zuweisung von b[i].src an document.images[0].src. Da b[i] abhängig von der Variablen i ist, die bei jedem Funktionsaufruf verändert wird, wird jedes mal ein anderes der vier Bilder angezeigt. Am Ende ruft sich die Funktion Animation() selbst wieder auf. So entsteht der Endlos-Effekt. Der Aufruf ist in einen Seite setTimeout()-Aufruf eingebunden, der den nächsten Aufruf jeweils um 1000 Millisekunden, also um eine Sekunde, verzögert.

Beachten Sie:

Im Internet Explorer und im Netscape 6 können Sie auch unterschiedlich große Grafiken verwenden. In diesem Fall sollten Sie die Angaben zur Größe der Grafik weglassen bzw. für die Höhe die Eigenschaft nach oben height und für die Weite die Eigenschaft nach unten width dynamisch ändern.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern vspace

Speichert die Angabe zum vertikalen Abstand zwischen einer Grafik und den Elementen oberhalb und unterhalb davon, wie sie mit dem Attribut vspace im <img>-Tag möglich ist. Wenn die Angabe im HTML-Tag fehlt, hat die Objekteigenschaft vspace den Wert 0.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Dorian.vspace)">
<img src="dorian.jpg" vspace="8" name="Dorian" alt="Dorian">
</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit Seite alert() der Wert ausgegeben, der im Attribut vspace notiert ist.

Beachten Sie:

Netscape 6.1 und Opera 5.12 interpretieren diese Angabe fehlerhaft. Im Netscape 6.1 ist stets -1 und in Opera 5.12 0 gespeichert.
Das Ändern der Eigenschaft vspace ist bislang nur im Internet Explorer möglich. Im Netscape 6.1 wird der vertikale Abstand entfernt.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 Lesen/Ändern width

Speichert die Angabe zur Breite eine Grafik, wie sie mit dem Attribut width im <img>-Tag möglich ist. Es wird auch dann ein Wert gespeichert, wenn die Angabe im HTML-Tag fehlt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img src="christa.jpg" name="Christa" alt="Christa">
<script type="text/javascript">
document.write(document.Christa.name + "<br>");
document.write(document.Christa.width + " x " + document.Christa.height + " Pixel");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält eine Grafik. Unterhalb davon ist ein Script-Bereich notiert. Darin wird mit Seite document.write() der Bildname und die Angaben zu Breite und Höhe der Grafik geschrieben.

Beachten Sie:

Im Netscape 6.1 und Konqueror 3.1 wird in der Eigenschaft width der Wert 0 gespeichert, wenn diese Angabe im HTML-Tag fehlt. Konqueror 3.4 zeigt diese Einschränkung nicht mehr.
Das Ändern der Eigenschaft width ist bislang nur im Internet Explorer und im Netscape 6.1 möglich.

JavaScript 1.2 Netscape 4.0 handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie Seite handleEvent() beim window-Objekt (nähere Informationen siehe dort).

nach oben
weiter | Seite embeds
zurück | Seite options
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / embeds

SELFHTML

embeds
Informationsseite

nach unten embeds: Allgemeines zur Verwendung

Eigenschaften:

nach unten height (Höhe des eingebetteten Objekts)
nach unten hspace (horizontaler Abstand des eingebetteten Objekts)
nach unten length (Anzahl eingebetteter Objekte)
nach unten name (Name des eingebetteten Objekte)
nach unten src (Quelle des eingebetteten Objekts)
nach unten width (Breite des eingebetteten Objekts)
nach unten type (MIME-Typ des eingebetteten Objekts)
nach unten vspace (vertikaler Abstand des eingebetteten Objekts)

Methoden:

nach unten play()
nach unten stop()
nach unten

embeds: Allgemeines zur Verwendung

Mit dem Objekt embeds, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, haben Sie Zugriff auf alle Multimedia-Elemente, die in einer HTML-Datei mit dem Netscape-Element <embed>...</embed> definiert sind. Dabei können Sie z.B. den Abspielvorgang von Sound-Dateien oder Videos dynamisch starten.

Ein neues Objekt dieser Art wird automatisch erzeugt, wenn der Web-Browser eine Seite Multimedia-Referenz nach Netscape-Syntax in der HTML-Datei vorfindet.

Es stehen folgende Arten zur Verfügung, mit JavaScript eine bestimmte Multimedia-Referenz anzusprechen:

Schema 1 / Beispiel 1:

document.embeds[#].Eigenschaft
document.embeds[#].Methode()

Breite = document.embeds[0].width;

Schema 2 / Beispiel 2:

document.embeds["Objektname"].Eigenschaft
document.embeds["Objektname"].Methode()

Breite = document.embeds["Demovideo"].width;

Erläuterung:

Solche Objekte können Sie auf zwei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
    Bei Verwendung von Indexnummern geben Sie document.embeds an und dahinter in eckigen Klammern, das wie vielte embed-Element in der Datei Sie meinen. Jedes Objekt, das in HTML mit dem <embed>-Tag notiert wurde, zählt. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. die erste Multimedia-Referenz sprechen Sie mit embeds[0] an, die zweite mit embeds[1] usw. Beim Zählen gilt die Reihenfolge, in der die <embed>-Tags in der Datei notiert sind.
  • mit dem Namen der Referenz (wie in Schema 2 / Beispiel 2)
    Dabei geben Sie mit document.embeds["Objektname"] den Namen an, den Sie bei der Definition der Multimedia-Referenz im einleitenden <embed>-Tag im Attribut name angegeben haben.

Beachten Sie:

Ob Sie über das embeds-Objekt eine Multimedia-Referenz tatsächlich mit JavaScript ansprechen können, hängt zumindest bei Netscape davon ab, wie das Plugin beschaffen ist, das diese Multimedia-Referenz anzeigt oder abspielt. Das Plugin, also das Zusatzprogramm oder Programm-Modul, das etwa für das Abspielen eines Videos oder einer Sound-Datei im Browser zuständig ist, muss über eine Java-Schnittstelle verfügen. Andernfalls erhalten Sie bei Netscape JavaScript-Fehlermeldungen von der Sorte Java object has no field or method named ....

Konqueror 3.3 interpretiert das Objekt embeds nicht.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Safari 1.3 Lesen height

Speichert die Höhe eines eingebundenen Multimediaobjekts.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body onload="alert('Objekthöhe: ' + document.embeds[0].height + ' Pixel')">
<embed src="breeze.mid" width="300" height="200"></embed><br>
</body></html>

Erläuterung:

Das Beispiel enthält eine Multimedia-Referenz einer Midi-Datei. Nachdem die HTML-Datei vollständig geladen ist, wird in einem Meldungsfenster die Höhe des referenzierten Objekts ausgegeben. Dazu ist im <body>-Tag der Event-Handler onload notiert.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Opera 5.12 Safari 1.3 Lesen hspace

Speichert die Angabe zum horizontalen Abstand zwischen einer Multimedia-Referenz und ihren nebenliegenden Elementen, wie sie mit dem Attribut hspace im <embed>-Tag möglich ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<embed src="../../../html/multimedia/anzeige/yippee.wav"
  width="200" height="100" hspace="30" align="left"></embed><br>
<a href="javascript:alert(document.embeds[0].hspace)">hspace anzeigen!</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Multimedia-Referenz und einen Verweis. Beim Anklicken des Verweises wird mit Seite alert() der Wert ausgegeben, der im Attribut hspace angegeben ist.

Beachten Sie:

Das Beispiel wird von Opera ab Version 6 nicht mehr interpretiert.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Safari 1.3 Lesen length

Speichert die Anzahl der eingebetteten Objekte im Dokument.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body onload="alert(document.embeds.length)">
<embed src="breeze.mid" width="300" height="200" type="audio/x-midi"></embed>
</body></html>

Erläuterung:

Das Beispiel enthält eine Multimedia-Referenz. Nach dem Laden des Dokumentes wird mit Seite alert() die Anzahl der Multimedia-Elemente ausgegeben.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Safari 1.3 Lesen name

Speichert den Namen eines eingebetteten Objektes, wie er mit dem Attribut name im einleitenden <embed>-Tag vergeben worden ist. Wenn die Angabe im HTML-Tag fehlt, enthält die Objekteigenschaft name keinen Wert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<embed autostart="false" name="Musik" src="breeze.mid" width="300" height="200"></embed>
<a href="javascript:document.embeds['Musik'].play()">Starten</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Multimedia-Referenz und einen Verweis. Nach Anklicken des Verweises wird mit document.embeds['Musik'] das Multimedia-Element angesprochen und unter Verwendung der Methode nach unten play() der Abspielvorgang gestartet.

Beachten Sie:

Safari kennt das Attribut name, unterstützt jedoch nicht die Methode play(), sodass das Beispiel nicht funktioniert.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Safari 1.3 Lesen src

Datenquelle des Multimediaobjektes.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<embed src="breeze.mid" autostart="true" name="Musik" width="300" height="200"></embed> <br>
<script type="text/javascript">
document.write("Download".link(document.embeds["Musik"].src));
</script>
</body></html>

Erläuterung:

Im Beispiel ist eine Multimedia-Referenz definiert. Im nachfolgenden JavaScript-Bereich wird mit der Methode Seite link() ein Verweis ins Dokument geschrieben. Der Methode wird dabei als Verweisziel die Quelldatei der Multimedia-Referenz durch Auslesen der src-Eigenschaft mit document.embeds["Musik"].src übergeben.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Safari 1.3 Lesen width

Speichert die Breite eines eingebundenen Multimediaobjekts.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body onload="alert('Objektbreite: ' + document.embeds[0].width + ' Pixel')">
<embed src="breeze.mid" width="300" height="200"></embed><br>
</body></html>

Erläuterung:

Das Beispiel enthält eine Multimedia-Referenz einer Midi-Datei. Nachdem die HTML-Datei vollständig geladen ist, wird in einem Meldungsfenster die Breite des referenzierten Objekts ausgegeben. Dazu ist im <body>-Tag der Event-Handler onload notiert.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Safari 1.3 Lesen type

Gibt den Seite MIME-Typ der Multimedia-Referenz, so wie er im Attribut type definiert wurde, an. Wurde diese Eigenschaft nicht definiert, so enthält die Eigenschaft null bzw. undefined im Internet Explorer.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body onload="alert('Objekttyp: ' + document.embeds[0].type)">
<embed src="breeze.mid" width="300" height="200" type="audio/x-midi"></embed><br>
</body></html>

Erläuterung:

Das Beispiel enthält eine Multimedia-Referenz einer Midi-Datei. Nachdem die HTML-Datei vollständig geladen ist, wird in einem Meldungsfenster der Typ des referenzierten Objekts ausgegeben. Dazu ist im <body>-Tag der Event-Handler onload notiert.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Opera 5.12 Safari 1.3 Lesen vspace

Speichert die Angabe zum vertikalen Abstand zwischen einer Multimedia-Referenz und ihren darüber- bzw. darunterliegenden Elementen, wie sie mit dem Attribut vspace im <embed>-Tag möglich ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
Eine Multimedia-Element<br>
<embed type="audio/x-wav" src="../../../html/multimedia/anzeige/yippee.wav"
  width="200" height="100" vspace="30" align="left"></embed><br>
<a href="javascript:alert(document.embeds[0].vspace)">Vertikalen Abstand anzeigen!</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Multimedia-Referenz und einen Verweis. Beim Anklicken des Verweises wird mit Seite alert() der Wert ausgegeben, der im Attribut vspace angegeben ist.

Beachten Sie:

Das Beispiel wird von Opera ab Version 6 nicht mehr interpretiert.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Mozilla Firefox 1 play()

Startet das Abspielen einer Multimedia-Referenz. Der Befehl spricht eine Schnittstelle des Abspielgerätes an. Seine Wirkungsweise ist deshalb immer abhängig vom verwendeten Plugin und steht nicht in jedem Fall zur Verfügung.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<embed type="audio/x-midi" autostart="false" src="breeze.mid" width="300" height="200"></embed><br>
<a href="javascript:document.embeds[0].play()">Starten</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Multimedia-Referenz und einen Verweis. Nach Anklicken des Verweises wird mit document.embeds[0].play() das Multimedia-Element angesprochen und der Abspielvorgang gestartet.

JavaScript 1.1 Netscape 3.0 MS IE 5.0 Mozilla Firefox 1 stop()

Beendet das Abspielen einer Multimedia-Referenz. Der Befehl spricht eine Schnittstelle des Abspielgerätes an. Seine Wirkungsweise ist deshalb immer abhängig vom verwendeten Plugin und steht nicht in jedem Fall zur Verfügung.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<embed type="audio/x-midi" autostart="true" src="breeze.mid" width="300" height="200"></embed><br>
<a href="javascript:document.embeds[0].stop()">Stoppen</a>
</body></html>

Erläuterung:

Das Beispiel enthält eine Multimedia-Referenz und einen Verweis. Nach Anklicken des Verweises wird mit document.embeds[0].stop() das Multimedia-Element angesprochen und der Abspielvorgang beendet.

nach oben
weiter | Seite layers
zurück | Seite images
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / layers

SELFHTML

layers
Informationsseite

nach unten layers: Allgemeines zur Verwendung

Eigenschaften:

nach unten above (oberhalb liegender Layer)
nach unten background (Hintergrundbild eines Layers)
nach unten bgColor (Hintergrundfarbe eines Layers)
nach unten below (unterhalb liegender Layer)
nach unten clip (Anzeigebereich eines Layers)
nach unten document (document-Objekt eines Layers)
nach unten left (Links-Wert der linken oberen Ecke relativ)
nach unten length (Anzahl Layer)
nach unten name (Name eines Layers)
nach unten pageX (Links-Wert der linken oberen Ecke absolut)
nach unten pageY (Oben-Wert der linken oberen Ecke absolut)
nach unten parentLayer (Objekt des Eltern-Layers)
nach unten siblingAbove (Objekt des oberhalb liegenden Layers)
nach unten siblingBelow (Objekt des unterhalb liegenden Layers)
nach unten src (Externe Datei eines Layers)
nach unten top (Oben-Wert der linken oberen Ecke relativ)
nach unten visibility (Sichtbarkeit eines Layers)
nach unten zIndex (Schichtposition eines Layers)

Methoden:

nach unten captureEvents() (Ereignisse überwachen)
nach unten handleEvent() (Ereignisse behandeln)
nach unten load() (externe Datei laden)
nach unten moveAbove() (über einen anderen Layer legen)
nach unten moveBelow() (unter einen anderen Layer legen)
nach unten moveBy() (bewegen um Anzahl Pixel)
nach unten moveTo() (bewegen zu Position relativ)
nach unten moveToAbsolute() (bewegen zu Position absolut)
nach unten releaseEvents() (Ereignisüberwachung beenden)
nach unten resizeBy() (Breite und Höhe verändern um Anzahl Pixel)
nach unten resizeTo() (Breite und Höhe auf Anzahl Pixel setzen)
nach unten routeEvent() (Event-Handler-Hierarchie durchlaufen)
nach unten

layers: Allgemeines zur Verwendung

Mit dem Objekt layers, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, haben Sie Zugriff auf alle Layer, die in einer HTML-Datei definiert sind. Dieses Objekt ist - ebenso wie die entsprechenden HTML-Tags - Netscape-4-spezifisch. Es ist die Grundlage für Seite Dynamisches Positionieren bei Netscape 4.x (dort finden Sie auch weitere Beispiele).

Wichtig:

Das layers-Objekt wird von Netscape ab Version 6.0 nicht mehr unterstützt. Es sollte also nur noch aus Gründen der Rückwärtskompatibilität zu Netscape 4.x Verwendung finden, da kein einziger moderner Browser dieses Objekt interpretiert.

Mit dem layers-Objekt arbeiten:

Ein neues Layer-Objekt wird automatisch erzeugt, wenn der Web-Browser einen Kapitel Layer in der HTML-Datei vorfindet.

Es stehen folgende Arten zur Verfügung, mit JavaScript einen bestimmten Layer anzusprechen:

Schema 1 / Beispiel 1:

document.layers[#].Eigenschaft
document.layers[#].Methode()

Farbe = document.layers[0].bgColor;

Schema 2 / Beispiel 2:

document.layers.Layername.Eigenschaft
document.layers.Layername.Methode()

Farbe = document.layers.Kopfbereich.bgColor;

Schema 3 / Beispiel 3:

document.layers["Layername"].Eigenschaft
document.layers["Layername"].Methode()

Farbe = document.layers["Kopfbereich"].bgColor;

Schema 4 / Beispiel 4:

document.LayerName.Eigenschaft
document.LayerName.Methode()

Farbe = document.Kopfbereich.bgColor;

Erläuterung:

Layer können Sie auf zwei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
    Bei Verwendung von Indexnummern geben Sie document.layers an und dahinter in eckigen Klammern, den wie vielten Layer in der Datei Sie meinen. Jeder Layer, die in HTML mit dem <layer>-Tag oder mit dem <ilayer>-Tag notiert wurde, zählt. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. den ersten Layer sprechen Sie mit layers[0] an, den zweiten mit layers[1] usw. Beim Zählen gilt die Reihenfolge, in der die <layer>/<ilayer>-Tags in der Datei notiert sind.
  • mit dem Namen des Layers (wie in Schema 2 / Beispiel 2)
    Dabei wird der Layer als Unterobjekt von document.layers angesprochen. Notieren Sie document.layers, dahinter einen Punkt zum Ansprechen des Unterobjekts und schließlich den Namen, den Sie bei der Definition des Layers im einleitenden <layer>/<ilayer>-Tag im Attribut name angegeben haben.
  • mit dem Namen des Layers als Indexnamen (wie in Schema 3 / Beispiel 3)
    Diese Art ist eine zu Schema 2 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Dabei geben Sie wie beim Ansprechen mit Indexnummer hinter document.layers eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen, den Sie bei der Definition des Layers im einleitenden <layer>/<ilayer>-Tag im Attribut name angegeben haben. Diese Schreibweise ist vor allem zum Zugriff auf Layer nützlich, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Layernamen enthält.
  • mit dem Namen des Layers direkt (wie in Schema 4 / Beispiel 4)
    Dabei geben Sie mit document.LayerName den Namen an, den Sie bei der Definition der Grafik im einleitenden <layer>/<ilayer>-Tag im Attribut name angegeben haben.

JavaScript 1.2 Netscape 4.0 Lesen above

Speichert, welcher andere Layer über einem Layer liegt. Die Eigenschaft above liefert das Layer-Objekt des darüberliegenden Layers zurück. Sie müssen also noch eine Eigenschaft wie name anhängen, um mehr über den Layer zu erfahren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="GelberLayer" top="100" left="50" height="200" bgcolor="#FFFFE0">
Inhalt des gelben Layers
</layer>
<layer top="150" name="LilaLayer" left="100" height="200" bgcolor="#FFE0FF">
Inhalt des lila Layers
</layer>
<a href="javascript:alert(document.GelberLayer.above.name)">
Wer liegt &uuml;ber dem gelben Layer?</a><br>
<a href="javascript:alert(document.GelberLayer.above.top)">
Und wo beginnt er?</a><br>
</body></html>

Erläuterung:

Im Beispiel werden zwei Layer mit den Namen GelberLayer und LilaLayer definiert. Außerdem sind zwei Verweise notiert. Der eine Verweis meldet beim Anklicken den Namen des Layers, der über dem gelben Layer liegt (document.GelberLayer.above.name), der andere Verweis dessen Position von oben (document.GelberLayer.above.top). Über dem gelben Layer liegt der lila Layer, da dieser in der Datei nach dem gelben Layer definiert wird.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern background

Speichert das Hintergrundbild (Wallpaper) eines Layers. Das folgende Beispiel zeigt, wie Sie ein solches Hintergrundbild dynamisch ändern können.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Neubild = new Image();
Neubild.src = "back02.gif";
function Hintergrund () {
  document.TestLayer.background.src = "back02.gif";
}
</script>
</head><body>
<layer background="back03.gif" top="150" name="TestLayer"
left="100" height="200" bgcolor="#FFE0FF">
Inhalt des Layers
</layer>
<a href="javascript:Hintergrund()">Anderer Hintergrund</a>
</body></html>

Erläuterung:

Im Beispiel wird ein Layer mit einem Hintergrundbild definiert. Beim Klick auf den Verweis wird das Hintergrundbild dynamisch durch ein anderes ersetzt. Beachten Sie, dass dazu in dem Script-Bereich im Dateikopf bereits beim Einlesen der Datei mit Hilfe des Seite images-Objekts die Hintergrundgrafik registriert wird, die die andere dynamisch ersetzen soll.
Beim Klick auf den Verweis wird die Funktion Hintergrund() aufgerufen, die das Hintergrundbild dynamisch ändert. Hinter der Adressierung des Layers müssen Sie dabei background.src notieren und diesem Ausdruck die zuvor registrierte Grafik zuweisen.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern bgColor

Speichert die Hintergrundfarbe eines Layers.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Farbe = "aqua";
function Hintergrund () {
  if (document.TestLayer.bgColor == "aqua") {
    document.TestLayer.bgColor = "yellow";
    return;
  } else {
    document.TestLayer.bgColor = "aqua";
    return;
  }
}
</script>
</head><body>
<layer top="150" name="TestLayer" left="100" height="200" bgcolor="aqua">
Inhalt des Layers
</layer>
<a href="javascript:Hintergrund()">Anderer Hintergrund</a>
</body></html>

Erläuterung:

Im Beispiel wird ein Layer definiert. Beim Klick auf den Verweis wird die Funktion Hintergrund() aufgerufen, die im Dateikopf in einem Script-Bereich notiert ist. Diese Funktion fragt ab, welche Hintergrundfarbe der Layer gerade hat, und weist dementsprechend eine andere zu.

Beachten Sie:

Sie können die Hintergrundfarbe eines Layers nicht abfragen, da Netscape 4 merkwürdige bgColor-Werte zurücklieferte, die nicht in das von Netscape dokumentierte Schema (hexadezimale Angabe oder Farbname) passen.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern below

Speichert, welcher andere Layer unter einem Layer liegt. Die Eigenschaft below liefert das Layer-Objekt des darunterliegenden Layers zurück. Sie müssen also noch eine Eigenschaft wie name anhängen, um mehr über den Layer zu erfahren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="GelberLayer" top="100" left="50" height="200" bgcolor="#FFFFE0">
Inhalt des gelben Layers
</layer>
<layer top="150" name="LilaLayer" left="100"
height="200" bgcolor="#FFE0FF">
Inhalt des lila Layers
</layer>
<a href="javascript:alert(document.LilaLayer.below.name)">Wer liegt unter dem lila Layer?</a><br>
<a href="javascript:alert(document.LilaLayer.below.left)">Und wo beginnt er?</a><br>
</body></html>

Erläuterung:

Im Beispiel werden zwei Layer mit den Namen GelberLayer und LilaLayer definiert. Außerdem sind zwei Verweise notiert. Der eine Verweis meldet beim Anklicken den Namen des Layers, der unter dem lila Layer liegt (document.LilaLayer.below.name), der andere Verweis dessen Position von links (document.GelberLayer.below.left). Unter dem lila Layer liegt der gelbe Layer, da in der Datei zuerst der gelbe und danach der lila Layer definiert wird.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern clip

Speichert, welcher Ausschnitt eines Layers angezeigt wird. Dabei gibt es folgende Untereigenschaften:
clip.top speichert den Pixelwert oben der linken oberen Ecke des sichtbaren Layer-Bereichs,
clip.left speichert den Pixelwert links der linken oberen Ecke des sichtbaren Layer-Bereichs,
clip.bottom speichert den Pixelwert unten der rechten unteren Ecke des sichtbaren Layer-Bereichs,
clip.right speichert den Pixelwert rechts der rechten unteren Ecke des sichtbaren Layer-Bereichs,
clip.width speichert die Breite des sichtbaren Layer-Bereichs (alternative Angabe zur Angabe einer rechten unteren Ecke),
clip.height speichert die Höhe des sichtbaren Layer-Bereichs (alternative Angabe zur Angabe einer rechten unteren Ecke).

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function MachKleiner () {
  with (document.MeinLayer) {
    if (clip.height > 0 && clip.width > 0) {
      clip.height -= 10;
      clip.width -= 10;
    }
  }
}
function MachGroesser () {
  with (document.MeinLayer) {
    if (clip.height < 200 && clip.width < 200) {
      clip.height += 10;
      clip.width += 10;
    }
  }
}
</script>
</head><body>
<layer name="MeinLayer" top="80" left="80" height="200" width="200" bgcolor="#FFFFE0">
Inhalt des Layers
</layer>
<a href="javascript:MachKleiner()">Kleiner</a><br>
<a href="javascript:MachGroesser()">Groesser</a>
</body></html>

Erläuterung:

Im Beispiel ist ein Layer definiert. Da innerhalb der HTML-Definition keine Angaben zum clip-Bereich des Layers gemacht werden, wird der gesamte Layer angezeigt. Seine clip-Werte ergeben sich aus der Größe des Layers. Intern sind also clip.top und clip.left gleich 0, und clip.width, clip.height, clip.bottom und clip.right haben alle den Wert 200, weil sich dies aus den Angaben height=200 width=200 in der HTML-Definition des Layers ergibt.
Mit Hilfe von zwei Verweisen lässt sich im Beispiel der sichtbare Anzeigebereich des Layers verkleinern und wieder vergrößern. Die Verweise rufen die Funktionen MachKleiner() bzw. MachGroesser() auf, die in einem Script-Bereich im Dateikopf notiert sind. Die Funktion MachKleiner() fragt ab, ob clip.width und clip.height größer 0 sind. Wenn ja, werden beide Werte um 10 verringert, wodurch der Anzeigebereich des Layers von rechts unten um 10 Pixel beschnitten wird. Die Funktion MachGroesser() tut einfach das Umgekehrte.

JavaScript 1.2 Netscape 4.0 document

Jeder Layer wird von Netscape wie ein eigenes kleines Dokument behandelt. Deshalb gibt es für Layer auch ein document-Objekt, das genauso funktioniert wie das globale Seite document-Objekt. Dadurch haben Sie Zugriff auf Dokument-Unterobjekte wie Grafiken, Formulare usw. Um solche Elemente innerhalb eines Layers anzusprechen, müssen Sie die Elemente über das Layer-eigene document-Objekt ansprechen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function AndererInhalt () {
  document.MeinLayer.document.open();
  document.MeinLayer.document.write("Jetzt ist der Verweis weg!");
  document.MeinLayer.document.close();
}
</script>
</head><body>
<layer name="MeinLayer" bgcolor="#FFFFE0">
<a href="javascript:AndererInhalt()">Diesen Verweis ueberschreiben</a>
</layer>
</body></html>

Erläuterung:

Im Beispiel wird ein Layer definiert, der einen Verweis enthält. Beim Anklicken wird die Funktion AndererInhalt() aufgerufen, die in einem Script-Bereich im Dateikopf notiert ist. Diese Funktion benutzt typische Methoden des document-Objekts wie open(), write() und close(). Das Besondere ist, dass es sich nicht um das globale Dokument handelt, sondern um das Dokument, das der Layer darstellt. Dies wird durch eine Adressierung wie document.MeinLayer.document erreicht.

Beachten Sie:

Das Dokumentenmodell der Layer im Netscape hat auch Auswirkungen auf im HTML-Dokument definierte Formulare, Grafiken oder Verweise. Berücksichtigen Sie hier, dass alle Elemente, die sich in einem Layer befinden, zum Dokument des Layers gehören und nicht zum HTML-Dokument.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="MeinLayer" bgcolor="#FFFFE0" left="300">
<img src="blau.gif" width="104" height="102" border="0" alt="">
</layer>
<script type="text/javascript">
document.write("Anzahl der Bilder im HTML-Dokument: " + document.images.length);
document.write("<br>Anzahl der Bilder im Layer: " + document.MeinLayer.document.images.length);
</script>
</body></html>

Erläuterung:

Im Beispiel wurde ein Layer definiert, der eine Grafik enthält. Weitere Bilder enthält die Datei nicht. Danach folgt ein JavaScript-Bereich der mit der Methode Seite document.write die Anzahl der Bilder im Dokument und im Layer ausgibt. Anhand des Beispieles sehen Sie, dass nur das Dokument des Layers eine Grafik enthält. Mit einer Adressierung wie document.MeinLayer.document können Sie diese Grafik ansprechen und z.B. deren Eigenschaft Seite src ändern.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern left

Speichert den Pixelwert für links der linken oberen Ecke eines Layers. Bezug ist dabei das übergeordnete Dokument. Das kann entweder das globale Dokument sein oder ein Layer, innerhalb dessen der aktuelle Layer definiert ist. Für absoluten Bezug siehe nach unten pageX.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="SuperLayer" left="100">
  <layer name="Layerchen" left="200" width="300" bgcolor="#FFFFE0">
  <a href="javascript:alert(document.SuperLayer.document.Layerchen.left)">Links-Wert?</a>
  </layer>
</layer>
</body></html>

Erläuterung:

Das Beispiel enthält einen Layer innerhalb eines anderen Layers, beginnend bei Pixelposition 200 von links, mit einem Verweis. Beim Anklicken des Verweises wird der Links-Wert des inneren Layers ausgegeben. Der beträgt 200, obwohl der Layer optisch gesehen bei Position 300 beginnt, weil der übergeordnete Layer ja schon bei 100 beginnt und die 200 des inneren Layers dazu addiert wird.

JavaScript 1.2 Netscape 4.0 Lesen length

Speichert die Anzahl der Layer in einer Datei.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer></layer>
<layer></layer>
<layer></layer>
<layer></layer>
<script type="text/javascript">
document.write("Auf dieser Seite gibt es " + document.layers.length + " Layer");
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein paar Layer zu Testzwecken und schreibt dann mit Seite document.write() die Anzahl der definierten Layer in die Datei.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern name

Speichert den Namen eines Layers.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="Layerchen" bgcolor="#FFFFE0">
<a href="javascript:alert(document.Layerchen.name)">Wie heisse ich denn?</a>
</layer>
</body></html>

Erläuterung:

Das Beispiel enthält einen Layer mit einem Verweis. Beim Anklicken des Verweises wird der Name des Layers in einem Meldungsfenster ausgegeben. Es ist derjenige Name, der in HTML bei dem Attribut name angegeben ist.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern pageX

Speichert den Pixelwert für links der linken oberen Ecke eines Layers. Bezug ist dabei das globale Dokument, auch wenn der aktuelle Layer innerhalb eines anderen Layers definiert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function NachLinks () {
  document.Layerchen.pageX = 0;
}
</script>
</head><body>
<layer name="Layerchen" left="300" width="300" bgcolor="#FFFFE0">
<a href="javascript:NachLinks()">Nach links mit diesem Layer</a>
</layer>
</body></html>

Erläuterung:

Das Beispiel enthält einen Layer, beginnend bei Pixelposition 300 von links, mit einem Verweis. Beim Anklicken des Verweises wird die Funktion NachLinks() aufgerufen, die im Dateikopf in einem Script-Bereich notiert ist. Diese Funktion ändert den Links-Wert des Layers auf 0, sodass der Layer anschließend ganz links beginnt.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern pageY

Speichert den Pixelwert für oben der linken oberen Ecke eines Layers. Bezug ist dabei das globale Dokument, auch wenn der aktuelle Layer innerhalb eines anderen Layers definiert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function NachOben () {
  document.Layerchen.pageY = 0;
}
</script>
</head><body>
<layer name="Layerchen" top="300" width="300" bgcolor="#FFFFE0">
<a href="javascript:NachOben()">Nach oben mit diesem Layer</a>
</layer>
</body></html>

Erläuterung:

Das Beispiel enthält einen Layer, beginnend bei Pixelposition 300 von oben, mit einem Verweis. Beim Anklicken des Verweises wird die Funktion NachOben() aufgerufen, die im Dateikopf in einem Script-Bereich notiert ist. Diese Funktion ändert den Links-Wert des Layers auf 0, sodass der Layer anschließend ganz links beginnt.

JavaScript 1.2 Netscape 4.0 parentLayer

Speichert das Eltern-Objekt eines Layers. Das kann entweder das Seite window-Objekt sein, oder, falls der Layer innerhalb eines anderen Layers definiert ist, dieser übergeordnete Layer.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="SuperLayer">
  <layer name="Layerchen" bgcolor="#FFFFE0">
  <a href="javascript:alert(document.SuperLayer.document.Layerchen.parentLayer.name)">
     Super-Name?</a>
  </layer>
</layer>
</body></html>

Erläuterung:

Das Beispiel enthält einen Layer innerhalb eines anderen Layers. Beim Anklicken des Verweises im inneren Layer wird der Name des Eltern-Objekts ausgegeben. Da das Elternobjekt in diesem Fall der übergeordnete Layer ist, wird dessen Name, also SuperLayer, ausgegeben.

JavaScript 1.2 Netscape 4.0 siblingAbove

Speichert denjenigen Layer, der aufgrund der Schichtposition, die z.B. mit dem Attribut z-index in HTML festgelegt wird, über dem angesprochenen Layer liegt. Es handelt sich dabei um ein Layer-Objekt, für das seinerseits alle verfügbaren Eigenschaften und Methoden gelten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="L1" left="100" top="100" z-index="3" bgcolor="#FFFFE0">Layer-Inhalt L1</layer>
<layer name="L2" left="120" top="120" z-index="1" bgcolor="#FFFFD0">Layer-Inhalt L2</layer>
<layer name="L3" left="140" top="140" z-index="4" bgcolor="#FFFFC0">Layer-Inhalt L3</layer>
<layer name="L4" left="140" top="140" z-index="2" bgcolor="#FFFFB0">Layer-Inhalt L4</layer>
<layer name="L5" left="100" top="180">
<a href="javascript:alert(document.L1.siblingAbove.name)">L1 siblingAbove</a><br>
<a href="javascript:alert(document.L2.siblingAbove.name)">L2 siblingAbove</a><br>
<a href="javascript:alert(document.L3.siblingAbove.name)">L3 siblingAbove</a><br>
<a href="javascript:alert(document.L4.siblingAbove.name)">L4 siblingAbove</a><br>
</layer>
</body></html>

Erläuterung:

Das Beispiel definiert insgesamt fünf Layer. Der zuletzt definierte Layer enthält vier Verweise. Jeder Verweis gibt für einen der ersten vier Layer den Namen desjenigen Layers aus, der aufgrund der z-index-Ordnung über dem angesprochenen Layer liegt. Klickt man beispielsweise auf den ersten Verweis, wird für den Layer mit dem Namen L1 der Name des Layers ausgegeben, der darüber liegt. Das ist in dem Fall der Layer mit dem Namen L3, da der Layer L1 den z-index-Wert 3 hat und der Layer L3 den nächsthöheren z-index-Wert, nämlich 4.

JavaScript 1.2 Netscape 4.0 siblingBelow

Speichert denjenigen Layer, der aufgrund der Schichtposition, die z.B. mit dem Attribut z-index in HTML festgelegt wird, unter dem angesprochenen Layer liegt. Es handelt sich dabei um ein Layer-Objekt, für das seinerseits alle verfügbaren Eigenschaften und Methoden gelten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="L1" left="100" top="180">
<a href="javascript:alert(document.L2.siblingBelow.name)">L2 siblingBelow</a><br>
<a href="javascript:alert(document.L3.siblingBelow.name)">L3 siblingBelow</a><br>
<a href="javascript:alert(document.L4.siblingBelow.name)">L4 siblingBelow</a><br>
<a href="javascript:alert(document.L5.siblingBelow.name)">L5 siblingBelow</a><br>
</layer>
<layer name="L2" left="100" top="100" z-index="3" bgcolor="#FFFFE0">Layer-Inhalt L2</layer>
<layer name="L3" left="120" top="120" z-index="1" bgcolor="#FFFFD0">Layer-Inhalt L3</layer>
<layer name="L4" left="140" top="140" z-index="4" bgcolor="#FFFFC0">Layer-Inhalt L4</layer>
<layer name="L5" left="140" top="140" z-index="2" bgcolor="#FFFFB0">Layer-Inhalt L5</layer>
</body></html>

Erläuterung:

Das Beispiel definiert insgesamt fünf Layer. Der erste Layer enthält vier Verweise. Jeder Verweis gibt für einen der folgenden vier Layer den Namen desjenigen Layers aus, der aufgrund der z-index-Ordnung unter dem angesprochenen Layer liegt. Klickt man beispielsweise auf den ersten Verweis, wird für den Layer mit dem Namen L2 der Name des Layers ausgegeben, der darunter liegt. Das ist in dem Fall der Layer mit dem Namen L5, da der Layer L1 den z-index-Wert 3 hat und der Layer L2 den nächstniedrigeren z-index-Wert, nämlich 2.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern src

Speichert die externe Datei, die in einen Layer eingebunden ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="extern" left="50" top="30" width="600" height="200" src="news.htm">
</layer>
<layer left="50" top="250">
<script type="text/javascript">
document.write("<hr><b>Eingebunden wurde die Datei: <\/b>" + window.document.extern.src);
</script>
</layer>
</body></html>

Erläuterung:

Das Beispiel enthält zwei positionierte Layer. Der Inhalt des ersten Layers ist eine externe Datei namens news.htm. Im zweiten Layer wird mit Hilfe von Seite document.write() die genaue Adresse der externen Datei in den Layer-Bereich geschrieben. Beachten Sie, dass in diesem Fall window.document.extern.src zur Adressierung des anderen Layers verwendet werden muss, da document.extern.src sich sonst nur auf den aktuellen Layer beziehen würde und dieser kein Element namens extern enthält.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern top

Speichert den Pixelwert für oben der linken oberen Ecke eines Layers. Bezug ist dabei das übergeordnete Dokument. Das kann entweder das globale Dokument sein oder ein Layer, innerhalb dessen der aktuelle Layer definiert ist. Für absoluten Bezug siehe nach oben pageY.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="SuperLayer" top="100">
  <layer name="Layerchen" top="200" width="300" bgcolor="#FFFFE0">
  <a href="javascript:alert(document.SuperLayer.document.Layerchen.top)">Oben-Wert?</a>
  </layer>
</layer>
</body></html>

Erläuterung:

Das Beispiel enthält einen Layer innerhalb eines anderen Layers, beginnend bei Pixelposition 200 von oben, mit einem Verweis. Beim Anklicken des Verweises wird der Oben-Wert des inneren Layers ausgegeben. Der beträgt 200, obwohl der Layer optisch gesehen bei Position 300 beginnt, weil der übergeordnete Layer ja schon bei 100 beginnt und die 200 des inneren Layers dazu addiert wird.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern visibility

Speichert, ob bzw. dass ein Layer sichtbar ist oder nicht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function EinAus (Nummer) {
  if (window.document.layers[Nummer].visibility == "show") {
    window.document.layers[Nummer].visibility = "hide";
    return;
  }
  if (window.document.layers[Nummer].visibility == "hide") {
    window.document.layers[Nummer].visibility = "show";
    return;
  }
}
</script>
</head><body>
<layer name="GelberLayer" left="50" top="30" width="200" height="200"
 visibility="show" bgcolor="#FFFFE0">
<a href="javascript:EinAus(1)">anderer Layer ein/aus</a>
</layer>
<layer name="LilaLayer" left="250" top="30" width="200" height="200"
 visibility="show" bgcolor="#FFE0FF">
<a href="javascript:EinAus(0)">anderer Layer ein/aus</a>
</layer>
</body></html>

Erläuterung:

Im Beispiel werden zwei positionierte Layer definiert. Jeder der beiden Layer enthält einen Verweis, bei dessen Anklicken der jeweils andere Layer aus- und wieder eingeblendet wird. Dazu wird jeweils die Funktion EinAus() aufgerufen, die im Dateikopf notiert ist. Als Parameter wird die Indexnummer des jeweils anderen Layers übergeben. Die Eigenschaft visibility kann die drei Werte hide (verstecken), show (anzeigen) und inherit (wie vom Eltern-Layer vererbt) haben.

JavaScript 1.2 Netscape 4.0 Lesen/Ändern zIndex

Speichert die Schichtposition eines Layers.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer z-index="527" name="EinLayer">
<a href="javascript:alert(window.document.EinLayer.zIndex)">z-index?</a>
</layer>
</body></html>

Erläuterung:

Im Beispiel wird ein Layer definiert, der per HTML-Attribut einen z-index-Wert von 527 erhält. Innerhalb des Layers ist ein Verweis notiert. Beim Anklicken des Verweises wird der z-Index-Wert des Layers in einem Meldungsfenster ausgegeben.

JavaScript 1.2 Netscape 4.0 captureEvents()

Überwacht Anwenderereignisse in einem Layer. Funktioniert genau so wie Seite captureEvents() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass Sie mit window.document.Layer-Name.caputeEvents() nur Ereignisse innerhalb des Layer-Bereichs überwachen können, keine Ereignisse im gesamten Fensterbereich (zu dem beispielsweise auch Titelleiste, Menüleisten usw. gehören).

JavaScript 1.2 Netscape 4.0 handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie Seite handleEvent() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass window.document.Layer-Name.handleEvent() nur Ereignisse übergeben kann, die mit nach oben window.document.Layer-Name.captureEvents() überwacht werden.

JavaScript 1.2 Netscape 4.0 load()

Lädt eine externe Datei in einen Layer. Erwartet zwei Parameter:
1. Quelle = Eine (HTML)-Datei, die geladen werden soll.
2. Breite = Anzeigebreite des Layers.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Laden () {
  document.EinLayer.load("news.htm", 600);
}
</script>
</head><body>
<a href="javascript:Laden()">News laden</a>
<layer name="EinLayer" top="50" left="20">
</layer>
</body></html>

Erläuterung:

Das Beispiel enthält einen leeren Layer und einen Verweis. Beim Anklicken des Verweises wird die Funktion Laden() aufgerufen, die im Dateikopf notiert ist. Die Anweisung innerhalb der Funktion wendet die Methode load() auf den bis dahin leeren Layer an. Die angegebene Datei news.htm wird in den Layer geladen, und der Layer erhält eine Anzeigebreite von 600 Pixeln.

JavaScript 1.2 Netscape 4.0 moveAbove()

Legt einen Layer über einen anderen Layer. Erwartet als Parameter den Layer, der überdeckt werden soll. Die Schichtposition des veränderten Layers ändert sich dabei abhängig von der des Layers, der überdeckt werden soll. Diese Methode hat nichts mit dem Bewegen von Layern zu tun.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="GelberLayer" top="150" left="100" width="200" height="200" bgColor="#FFFFE0">
Gelber Layer<br>
<a href="javascript:window.document.GelberLayer.moveAbove(window.document.LilaLayer)">
nach vorne</a>
</layer>
<layer name="LilaLayer" top="50" left="250" width="200" height="200" bgColor="#FFE0FF">
Lila Layer<br>
<a href="javascript:window.document.LilaLayer.moveAbove(window.document.GelberLayer)">
nach vorne</a>
</layer>
</body></html>

Erläuterung:

Im Beispiel werden zwei positionierte Layer definiert, die sich zum Teil überlappen. Beide enthalten jeweils einen Verweis, um den eigenen Layer über den anderen zu legen.

JavaScript 1.2 Netscape 4.0 moveBelow()

Legt einen Layer unter einen anderen Layer. Erwartet als Parameter den Layer, der den aktuellen überdecken soll. Die Schichtposition des veränderten Layers ändert sich dabei abhängig von der des Layers, der den aktuellen Layer überdecken soll. Diese Methode hat nichts mit dem Bewegen von Layern zu tun.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<layer name="GelberLayer" top="150" left="100" width="200" height="200" bgColor="#FFFFE0">
Gelber Layer<br>
<a href="javascript:window.document.GelberLayer.moveBelow(window.document.LilaLayer)">
nach hinten</a>
</layer>
<layer name="LilaLayer" top="50" left="250" width="200" height="200" bgColor="#FFE0FF">
Lila Layer<br>
<a href="javascript:window.document.LilaLayer.moveBelow(window.document.GelberLayer)">
nach hinten</a>
</layer>
</body></html>

Erläuterung:

Im Beispiel werden zwei positionierte Layer definiert, die sich zum Teil überlappen. Beide enthalten jeweils einen Verweis, um den eigenen Layer von dem jeweils anderen überdecken zu lassen.

JavaScript 1.2 Netscape 4.0 moveBy()

Verschiebt einen Layer um so viele Pixel wie angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel der Layer nach links/rechts verschoben werden soll. Negative Werte verschieben nach links, positive nach rechts.
2. y-Wert = um wie viele Pixel der Layer nach oben/unten verschoben werden soll. Negative Werte verschieben nach oben, positive nach unten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Springen () {
  var x = parseInt(document.Springer.document.Eingabe.hr.value);
  var y = parseInt(document.Springer.document.Eingabe.vr.value);
  document.Springer.moveBy(x, y);
}
</script>
</head><body>
<layer name="Springer" top="150" left="100" width="200" height="200" bgColor="#FFFFE0">
<form name="Eingabe" action="">
Springe um <input type="text" size="5" name="hr"> Pixel horizontal<br>
Springe um <input type="text" size="5" name="vr"> Pixel vertikal<br>
<input type="button" value="Springe" onclick="Springen()">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Layer definiert, der ein Formular enthält. Das Formular stellt zwei kleine Eingabefelder bereit, in denen der Anwender eingeben kann, um wie viele Pixel der Layer horizontal und vertikal verschoben werden soll. Beim Anklicken des Buttons, der auch zu dem Formular gehört, wird die Funktion Springen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ermittelt zunächst die eingegebenen Werte. Da es sich um Zeichenketten handelt, die Methode moveBy() aber Zahlen erwartet, wird die Funktion Seite parseInt() zum Umwandeln der Formulareingaben in eine Zahl angewendet. Anschließend wendet die Funktion die Methode moveBy() mit den ermittelten Werten auf den Layer an.

JavaScript 1.2 Netscape 4.0 moveTo()

Verschiebt einen Layer auf die anzugebende Position. Erwartet folgende Parameter:
1. x-Wert = Links-Wert für die neue obere linke Ecke des Fensters.
2. y-Wert = Oben-Wert für die neue obere linke Ecke des Fensters.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Springen () {
  var x = parseInt(document.Springer.document.Eingabe.hr.value);
  var y = parseInt(document.Springer.document.Eingabe.vr.value);
  document.Springer.moveTo(x, y);
}
</script>
</head><body>
<layer name="Springer" top="150" left="100" width="200" height="200" bgColor="#FFFFE0">
<form name="Eingabe" action="">
links oben neu: <input type="text" size="5" name="hr"> (von links)<br>
links oben neu: <input type="text" size="5" name="vr"> (von oben)<br>
<input type="button" value="Springe" onclick="Springen()">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Layer definiert, der ein Formular enthält. Das Formular stellt zwei kleine Eingabefelder bereit, in denen der Anwender die x- und y-Werte der neuen gewünschten oberen linken Ecke des Layers eingeben kann. Beim Anklicken des Buttons, der auch zu dem Formular gehört, wird die Funktion Springen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ermittelt zunächst die eingegebenen Werte. Da es sich um Zeichenketten handelt, die Methode moveTo() aber Zahlen erwartet, wird die Funktion Seite parseInt() zum Umwandeln der Formulareingaben in eine Zahl angewendet. Anschließend wendet die Funktion die Methode moveTo() mit den ermittelten Werten auf den Layer an.

Beachten Sie:

Wenn sich der Layer, auf den Sie die moveTo()-Methode anwenden, innerhalb eines anderen Layers befindet, beziehen sich die Angaben relativ zu dem äußeren Layer. Eine Angabe wie moveTo(0,0) springt also zur linken oberen Ecke des äußeren Layers.

JavaScript 1.2 Netscape 4.0 moveToAbsolute()

Funktioniert genauso wie nach oben moveTo(), mit dem Unterschied, dass die x- und y-Werte absolut zum Anzeigefenster interpretiert werden, falls sich der Layer innerhalb eines anderen Layers befindet.

JavaScript 1.2 Netscape 4.0 releaseEvents()

Beendet die Überwachung von Anwenderereignissen. Funktioniert genau so wie Seite releaseEvents() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass document.Layer-Name.releaseEvent() nur Ereignisüberwachungen beenden kann, die mit nach oben document.Layer-Name.captureEvents() gestartet wurden.

JavaScript 1.2 Netscape 4.0 resizeBy()

Verändert die Größe eines Layers um so viele Pixel unten und rechts wie angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel der Layer rechts verkleinert/vergrößert werden soll. Negative Werte verkleinern, positive vergrößern.
2. y-Wert = um wie viele Pixel der Layer unten verkleinert/vergrößert werden soll. Negative Werte verkleinern, positive vergrößern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function MachKleiner () {
  document.MeinLayer.resizeBy(-20, -10);
}

function MachGroesser () {
  document.MeinLayer.resizeBy(20, 10);
}
</script>
</head><body>
<layer name="MeinLayer" top="50" left="50" width="200" height="100" bgColor="#FFFFE0">
<a href="javascript:MachKleiner()">Kleiner</a><br>
<a href="javascript:MachGroesser()">Groesser</a><br>
</layer>
</body></html>

Erläuterung:

Im Beispiel ist ein Layer definiert. Mit Hilfe von zwei Verweisen lässt sich im Beispiel der sichtbare Anzeigebereich des Layers verkleinern und wieder vergrößern. Die Verweise rufen die Funktionen MachKleiner() bzw. MachGroesser() auf, die in einem Script-Bereich im Dateikopf notiert sind.
Die Funktion MachKleiner() verringert die Breite des Layers um 20 Pixel und die Höhe um 10 Pixel, die Funktion MachGroesser() tut das Umgekehrte.

JavaScript 1.2 Netscape 4.0 resizeTo()

Legt die Breite und Höhe eines Layers neu fest. Erwartet folgende Parameter:
1. x-Wert = neue Breite des Layers.
2. y-Wert = neue Höhe des Layers.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Aendern () {
  var x = parseInt(document.L.document.Eingabe.hr.value);
  var y = parseInt(document.L.document.Eingabe.vr.value);
  document.L.resizeTo(x, y);
}
</script>
</head><body>
<layer name="L" top="50" left="50" width="200" height="200" bgColor="#FFFFE0">
<form name="Eingabe" action="">
neue <input type="text" size="5" name="hr"> Breite<br>
neue <input type="text" size="5" name="vr"> Hoehe<br>
<input type="button" value="Aendern" onclick="Aendern()">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Layer definiert, der ein Formular enthält. Das Formular stellt zwei kleine Eingabefelder bereit, in denen der Anwender die x- und y-Werte der neuen gewünschten Breite und Höhe des Layers eingeben kann. Beim Anklicken des Buttons, der auch zu dem Formular gehört, wird die Funktion Aendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ermittelt zunächst die eingegebenen Werte. Da es sich um Zeichenketten handelt, die Methode resizeTo() aber Zahlen erwartet, wird die Funktion Seite parseInt() zum Umwandeln der Formulareingaben in eine Zahl angewendet. Anschließend wendet die Funktion die Methode resizeTo() mit den ermittelten Werten auf den Layer an.

JavaScript 1.2 Netscape 4.0 routeEvent()

Übergibt ein Anwenderereignis an das document-Objekt. Von dort aus wird das Ereignis immer weiter nach unten durchgereicht, bis sich ein Event-Handler findet, der das Ereignis verarbeitet. Funktioniert genau so wie Seite routeEvent() beim window-Objekt (nähere Informationen siehe dort). Der einzige Unterschied ist, dass document.Layer-Name.routeEvent() nicht auf Fensterebene ansetzt, sondern auf Layerebene.

nach oben
weiter | Seite links
zurück | Seite embeds
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / links

SELFHTML

links
Informationsseite

nach unten links: Allgemeines zur Verwendung
nach unten Zugriff auf Verweisziele
nach unten location-Eigenschaften von Verweisen

Eigenschaft:

nach unten name (Name des Verweises)
nach unten length (Anzahl Verweise)
nach unten target (Zielfenster des Verweises)
nach unten text (Text des Verweises)
nach unten x (horizontale Position des Verweises)
nach unten y (vertikale Position des Verweises)
nach unten

links: Allgemeines zur Verwendung

Mit dem Objekt links, das in der JavaScript-Objekthierarchie unterhalb des Seite document-Objekts liegt, haben Sie Zugriff auf Verweise, die in einer HTML-Datei definiert sind.

In JavaScript 1.0 ist es lediglich möglich, die Anzahl der Verweise in einer Datei auszulesen. Seit JavaScript 1.2 stehen jedoch weitere Eigenschaften zur Verfügung.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Zugriff auf Verweisziele

Sie können mit JavaScript die Verweisziele von Verweisen in HTML ermitteln.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="http://de.yahoo.com/">Yahoo</a><br>
<a href="http://www.google.de/">Google</a><br>
<a href="http://www.selfhtml.org/">SELFHTML</a><br>
<script type="text/javascript">
for (var i = 0; i < document.links.length; ++i)
  document.write("<br>" + document.links[i]);
</script>
</body></html>

Erläuterung:

Im Beispiel werden ein paar Verweise notiert. Unterhalb davon steht ein JavaScript, das mit Seite document.write() in einer for-Schleife für jeden Verweis das Verweisziel in die Datei schreibt. Es handelt sich um den jeweiligen Wert des Attributs href.

Der Zugriff auf die Verweise erfolgt mit Indexnummern. Dabei geben Sie document.links an und dahinter in eckigen Klammern, den wie vielten Verweis in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. den ersten Verweis sprechen Sie mit links[0] an, den zweiten Verweis mit links[1] usw. Beim Zählen gilt die Reihenfolge, in der die Verweise in der Datei notiert sind. Dabei werden auch Verweise innerhalb von verweis-sensitiven Grafiken (<area>-Tag) berücksichtigt.

Beachten Sie:

Gemäß dem HTML-spezifischen DOM können Sie Verweise über document.links auch über deren Namen ansprechen. Notieren Sie dazu document.links.Ankername mit dem Namen, den Sie bei der Definition des Verweises im einleitenden <a>-Tag im Attribut name angegeben haben. (Solche Verweise können Sie auch über Seite document.anchors ansprechen.) Damit greifen Sie auf das a- bzw. area-Elementobjekt zu, mit dem der der Verweis definiert wurden. Neben den auf dieser Seite aufgelisteten Eigenschaften haben Sie Zugriff auf weitere Eigenschaften und Methoden, die in den Referenzen zum Seite a-Elementobjekt und Seite area-Elementobjekt genannt werden.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 location-Eigenschaften von Verweisen

Neben den verweisspezifischen Eigenschaften kennt das Link-Objekt auch alle Eigenschaften des Seite location-Objekts.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a target="_top" href="http://www.selfhtml.org/">SELFHTML</a><br>
<script type="text/javascript">
document.links[0].port = "8081";
</script>
</body></html>

Erläuterung:

Über das Objekt Seite location, haben Sie Zugriff auf den vollständigen URI eines angezeigten Verweises. Sie können den URI oder Teile davon zur Weiterverarbeitung abfragen und ändern. Notieren Sie dazu das Link-Objekt, also z.B. document.link[0], dahinter einen Punkt und anschließend die gewünschte Eigenschaft des location-Objekts.
Im Beispiel ist ein Verweis definiert. Mit document.links[0].port wird die Eigenschaft Seite port geändert.

Beachten Sie:

Im Netscape 6.1 und in Opera können Sie die Eigenschaften des location-Objekts (mit Ausnahme der Seite href-Eigenschaft) nur lesen, jedoch nicht ändern.

DOM 1.0 Netscape 6.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern name

Speichert den Namen eines Verweises. Durch Verwendung des name-Attributes wird der Verweis gleichzeitig zu einem Bestandteil des Seite anchors-Objektes.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a name="katalog" href="http://de.yahoo.com/">Yahoo</a><br>
<a name="suchmaschine" href="http://www.google.de/">Google</a><br>
<a name="redaktion" href="http://www.selfhtml.org/">SELFHTML</a><br>
<script type="text/javascript">
for (var i = 0; i < document.links.length; ++i)
  document.write("<br>" + document.links[i].name);
</script>
</body></html>

Erläuterung:

Mit document.links[0].name können Sie den Namen eines Verweises in einer HTML-Datei ermitteln. Das Beispiel enthält zunächst HTML-Text mit diversen Verweisen und schreibt am Ende mit Seite document.write() die Namen der Verweise ins Dokument.

Beachten Sie:

Im Internet Explorer ist es nicht möglich, den Namen eines Verweises zu ändern. Opera erlaubt das Ändern erst ab Version 6.

DOM 1.0 JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert, wie viele Verweise eine HTML-Datei enthält.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="http://de.yahoo.com/">Yahoo</a><br>
<a href="http://www.lycos.de/">Lycos</a><br>
<map name="Testbild">
<area shape="rect" coords="1,1,249,49" href="http://selfhtml.org/" alt="SELFHTML Portalseite">
<area shape="rect" coords="1,51,149,299" href="http://aktuell.de.selfhtml.org/" alt="SELFHTML aktuell">
</map>
<img src="hypgraf.gif" width="400" height="400" usemap="#Testbild" alt="">
<script type="text/javascript">
document.write("<p>Die Datei hat " + document.links.length + " Verweise<\/p>");
</script>
</body></html>

Erläuterung:

Mit document.links.length können Sie die Anzahl der Verweise in einer HTML-Datei ermitteln. Das Beispiel enthält zunächst HTML-Text mit diversen Verweisen und schreibt am Ende mit Seite document.write() dazu, wie viele Verweise in der Datei gefunden wurden. Beachten Sie, dass dabei (seit Netscape 3.0) auch Verweise berücksichtigt werden, die in verweis-sensitiven Grafiken mit Hilfe des <area>-Tags definiert werden.

DOM 1.0 JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern target

Speichert das Zielfenster eines Verweises.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="http://www.selfhtml.org/" target="_top">SELFHTML</a><br>
<script type="text/javascript">
document.links[0].target = "_blank";
</script>
</body></html>

Erläuterung:

Mit document.links[0].target können Sie das Zielfenster eines Verweises ermitteln. Das Beispiel enthält einen Verweis, der sein Verweisziel im obersten Fenster öffnet. Im nachfolgenden JavaScript-Bereich wird diesem Verweis mit document.links[0].target="_blank" ein anderes Zielfenster zugewiesen. Das führt dazu, dass sich das Ziel des Verweises in einem neuen Fenster öffnet.

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen text

Speichert den Text eines Verweises.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="http://de.yahoo.com/">Yahoo</a><br>
<a href="http://www.google.de/">Google</a><br>
<a href="http://www.selfhtml.org/">SELFHTML</a><br>
<script type="text/javascript">
for (var i = 0; i < document.links.length; ++i)
  document.write("<br>" + document.links[i].text);
</script>
</body></html>

Erläuterung:

Mit document.anchors[0].text können Sie den Text eines Verweises zwischen <a> und </a> ermitteln. Das Beispiel enthält zunächst einige Verweise. Unterhalb davon steht ein JavaScript, das mit document.write() in einer Seite for-Schleife für jeden Verweis den Verweistext in die Datei schreibt.

JavaScript 1.2 Netscape 4.0 Lesen x

Speichert die horizontale Position eines Verweises gemessen vom Fensterrand.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
Hier ein Text und dann ein <a href="javascript:alert(document.links[0].x)">Verweis</a><br>
</body></html>

Erläuterung:

Mit document.links[0].x können Sie die horizontale Position eines Verweises in einer HTML-Datei ermitteln. Das Beispiel enthält einen kleinen Text, in dem ein Verweis definiert ist. Beim Anklicken des Verweises wird mit Seite alert() die Position des Verweises vom linken Fensterrand aus gesehen ausgegeben.

JavaScript 1.2 Netscape 4.0 Lesen y

Speichert die vertikale Position eines Verweises gemessen vom Fensterrand.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
Hier ein Text und dann ein <a href="javascript:alert(document.links[0].y)">Verweis</a><br>
</body></html>

Erläuterung:

Mit document.links[0].y können Sie die horizontale Position eines Verweises in einer HTML-Datei ermitteln. Das Beispiel enthält einen kleinen Text, in dem ein Verweis definiert ist. Beim Anklicken des Verweises wird mit Seite alert() die Position des Verweises vom oberen Fensterrand aus gesehen ausgegeben.

nach oben
weiter | Seite event
zurück | Seite layers
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / event

SELFHTML

event
Informationsseite

nach unten event: Allgemeines zur Verwendung

Eigenschaften:

nach unten altKey, ctrlKey, shiftKey (Sondertasten, Microsoft)
nach unten button (Maustastencode, Microsoft)
nach unten clientX, clientY (Anzeigebereich-relative Mauszeiger-Position, Microsoft)
nach unten keyCode (Tastaturcode, Microsoft)
nach unten layerX, layerY (Layer-relative Mauszeiger-Position, Netscape)
nach unten modifiers (Sondertasten, Netscape)
nach unten offsetX, offsetY (Objekt-relative Mauszeiger-Position, Microsoft)
nach unten pageX, pageY (Dokument-relative Koordinaten, Netscape)
nach unten screenX, screenY (Bildschirm-relative Mauszeiger-Position, Netscape)
nach unten which (Tastatur-/Maustastencode, Netscape)
nach unten type (Art des Ereignisses, Netscape)
nach unten x,y (Elternelement-relative Mauszeiger-Position, Microsoft)
nach unten

event: Allgemeines zur Verwendung

Mit dem Objekt event können Sie Einzelinformationen zu Anwenderereignissen wie Mausklicks oder Tasteneingaben ermitteln und weiterverarbeiten. So können Sie bei einem Mausklick beispielsweise die genaue Position ermitteln, wo der Mausklick erfolgte, oder bei einem Tastendruck die gedrückte Taste abfragen.

Anwenderereignisse können Sie entweder überwachen, indem Sie in einem erlaubten HTML-Tag einen Seite Event-Handler notieren, oder, indem Sie direkt mit Hilfe von JavaScript eine Ereignisüberwachung programmieren. Für den Fall, dass das überwachte Ereignis eintritt, können Sie eine Handler-Funktion schreiben, die das Ereignis "behandelt", also verarbeitet. Die Handler-Funktion wird automatisch aufgerufen, wenn das Ereignis eintritt. Innerhalb einer Handler-Funktion besteht auch die Möglichkeit, Eigenschaften des eingetretenen Ereignisses abzufragen. Solche Eigenschaften werden auf dieser Seite hier beschrieben.

Die meisten Browser kennen das Event-Objekt, aber leider ist die Implementierung völlig unterschiedlich gelöst. Die Eigenschaften des Event-Objekts, die auf dieser Seite beschrieben werden, berücksichtigen mehrere Browser. Nicht alle Browser kennen dieselben Eigenschaften und auch in der Syntax zur Überwachung von Ereignissen unterscheiden sie sich. Das gilt sowohl bei der Ereignisüberwachung per Event-Handler in HTML als auch für die direkte Ereignisüberwachung in JavaScript. Die Unterschiede bei den Event-Handlern werden im Abschnitt über Event-Handler näher beschrieben. Im folgenden wird zur allgemeinen Verwendung des Event-Objekts beschrieben, wie Sie mit Hilfe von JavaScript eine direkte Ereignisüberwachung programmieren. Das Beispiel zeigt auch, wie Sie eine solche Ereignisüberwachung für mehrere Browser getrennt programmieren können, ohne dass es zu Fehlermeldungen kommt.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 Beispiel (Ereignisüberwachung direkt mit JavaScript programmieren):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function TasteGedrueckt (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.which) {
    Tastencode = Ereignis.which;
  } else if (Ereignis.keyCode) {
    Tastencode = Ereignis.keyCode;
  }
  document.formular.ausgabe.value = "Taste mit Dezimalwert " + Tastencode + " gedrückt";
}
function TasteLosgelassen (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.which) {
    Tastencode = Ereignis.which;
  } else if (Ereignis.keyCode) {
    Tastencode = Ereignis.keyCode;
  }
  document.formular.ausgabe.value = "Taste mit Dezimalwert " + Tastencode + " losgelassen";
}

document.onkeydown = TasteGedrueckt;
document.onkeyup = TasteLosgelassen;
</script>
</head><body>

<form action="" name="formular">
<p><input type="text" name="ausgabe" readonly="readonly" size="50"></p>
</form>

</body></html>

Erläuterung:

Das Beispiel überwacht Tastaturereignisse auf Dokumentebene. Das heißt, wenn der Anwender irgendeine Taste drückt, während der Anzeigebereich der HTML-Datei fokussiert ist, wird das Ereignis von der programmierten Ereignisüberwachung abgefangen und verarbeitet. Im Beispiel wird bei jedem Tastendruck der dezimale Tastaturcode der gedrückten Taste in einem Formularfeld ausgegeben.

Es werden zwei Funktionen definiert: Die Funktion TasteGedrueckt() ist die so genannte Handler-Funktion für den Fall, dass der Anwender eine Taste drückt. Die Funktion TasteLosgelassen() behandelt den Fall, dass der Anwender die gedrückte Taste wieder loslässt. Beide Funktionen erwarten einen Parameter namens Ereignis. Über diesen Parameter können die Funktionen auf Eigenschaften des Event-Objekts zugreifen. Im Internet Explorer hingegen muss über window.event auf das Event-Objekt zugegriffen werden. Daher wird direkt am Anfang der beiden Funktionen mit einer if-Anweisung abgefragt, ob der Parameter Ereignis gesetzt wurde. Wenn dies nicht der Fall ist, wird das Event-Objekt aus window.event in der Variable Ereignis gespeichert. Dadurch steht das Event-Objekt auf jeden Fall in der Variable Ereignis zur Gebrauch.

In den beiden Funktionen wird im Beispiel wird der dezimalen Tastencode der gedrückten Taste ermittelt. Nach Netscape-Syntax ist dieser in der Event-Eigenschaft which gespeichert, nach Microsoft-Syntax in der Eigenschaft keyCode. Daher wird mit einer if-else-Anweisung geprüft, welche der beiden Eigenschaften existiert (siehe Seite Abfragen ob ein Objekt existiert). Der Tastencode wird auf diese Weise in der Variable Tastencode gespeichert und anschließend in die Statuszeile geschrieben.

Das allein genügt jedoch noch nicht zur Ereignisüberwachung. Damit die Handler-Funktionen bei Eintritt des Ereignisses automatisch aufgerufen werden, muss die Ereignisüberwachung gestartet werden. Dazu dienen die beiden Anweisungen am Ende des JavaScript-Bereichs.
Mit document.onkeydown = TasteGedrueckt; wird das Ereignis "Taste gedrückt" (onkeydown) dokumentweit überwacht. Hinter dem Gleichheitszeichen folgt der Name der Handler-Funktion, die dieses Ereignis verarbeiten soll (TasteGedrueckt). Beachten Sie, dass hier nur der Funktionsname stehen darf, kein Funktionsaufruf mit runden Klammern dahinter.
Mit document.onkeyup = TasteLosgelassen; wird das Ereignis "Taste losgelassen" (onkeyup) dokumentweit überwacht, und zur Ereignisbehandlung wird die Handler-Funktion TasteLosgelassen angegeben. Nach dem gleichen Schema können Sie auch andere Ereignisse überwachen - die Handler-Funktionen definieren Sie selber, und anstelle von onkeydown und onkeyup können Sie alle anderen üblichen Seite Event-Handler notieren.

Beachten Sie:

Die Ereignisüberwachung des Beispiels funktioniert auch im Opera 5.12. Das Ausgeben in die Statuszeile wird jedoch erst ab Version 6 interpretiert.

Wenn Sie Ereignisse dokumentweit überwachen, müssen Sie berücksichtigen, dass die Ereignisüberwachung zu unerwünschten Nebenwirkungen führen kann. Einige Anzeigebeispiele auf dieser Seite zeigen bei einem Mausereignis im Dokument ein Meldungsfenster oder verschieben ein Element an die Mausposition. Dies kann unter Umständen verhindern, dass Verweise auf der Seite angeklickt werden können. In der praktischen Anwendung sollten Sie daher auf eine solche dokumentweite Ereignisüberwachung verbunden mit Meldungsfenstern verzichten. In den meisten Fällen reicht es aus, Ereignisse für einzelne Elemente zu überwachen.

DOM 2.0 MS JScript MS IE 4.0 Opera 6 Safari 1.2 Lesen altKey, ctrlKey, shiftKey

Microsoft-Syntax. Speichert, ob die Alt-Taste, die Umschalt-Taste oder die Steuerung-Taste gemeinsam mit einer anderen Taste oder einem Mausklick gedrückt wurden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Tastendruck (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.altKey)
    alert("Eine Taste plus Alt-Taste wurde gedrückt!");
  if (Ereignis.ctrlKey)
    alert("Eine Taste plus Steuerung-Taste wurde gedrückt!");
  if (Ereignis.shiftKey)
    alert("Eine Taste plus Umschalt-Taste wurde gedrückt!");
}

document.onkeypress = Tastendruck;
</script>
</head><body>
</body></html>

Erläuterung:

Im Beispiel wird überwacht, ob der Anwender eine Taste drückt (onkeypress). Wenn ja, wird abgefragt, ob zusätzlich die Alt-, Steuerung- oder Umschalt-Taste gedrückt wurde. In diesem Fall wird jeweils eine entsprechende Meldung ausgegeben.

Beachten Sie:

Opera führt die Handler-Funktion nicht aus, wenn die Alt-Taste gedrückt wird. Bei einem Mausklick, bei dem die Alt-Taste gedrückt wurde, hat altKey trotzdem den Wert false. Bei einem Mausklick mit gedrückter Umschalt-Taste ist shiftKey im Opera 7 unzuverlässig. In Opera 5.12 existieren die Eigenschaften zwar, sie liefern jedoch offenbar unsinnige Werte.

Seien Sie vorsichtig beim Ausprobieren dieses Beispiels. Einige Browser (z.B. Konqueror) verfügen über voreingestellte Shortcuts. So führt die Tastenkombination Steuerung plus "Q" in Konqueror unweigerlich zum Schließen des Browserfensters, da die Shortcuts Vorrang vor eventuellen JavaScript-Anweisungen haben.

DOM 2.0 MS JScript MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen button

Microsoft-Syntax. Speichert, welche Maustasten gedrückt wurden: 1 für die linke Maustaste, 2 für die rechte Maustaste und 4 für die mittlere Maustaste. Die Werte können kombiniert werden, etwa 5 für die mittlere und die linke Maustaste.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Tastendruck (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (Ereignis.button) {
    if (Ereignis.button == 1) {
      alert("Linke Maustaste gedrückt");
    } else {
      alert("Andere Maustaste gedrückt");
    }
  }
}

document.onmousedown = Tastendruck;
</script>
</head><body>
<p>Klicken Sie auf das Dokument</p>
</div>
</body></html>

Erläuterung:

Im Beispiel wird überwacht, ob der Anwender eine Maustaste drückt (onmousedown), wärend sich der Mauszeiger über einem div-Element befindet. Wenn ja, wird abgefragt, ob es die linke Maustaste war und eine entsprechende Meldung ausgegeben.

Beachten Sie:

Diese Eigenschaft stammt ursprünglich von Microsofts Internet Explorer und verhält sich dort wie beschrieben. Sie ist aber auch im Seite Event-Handling beim DOM definiert, hat dort jedoch eine andere Bedeutung: 0 für die linke Maustaste, 1 für die mittlere Maustaste und 2 für die rechte Maustaste. Diese Bedeutung erwies sich jedoch nicht als praktikabel, es kann z.B. über dieses Schema nicht abgefragt werden, ob mehrere Maustasten gleichzeitig gedrückt wurden. Ältere Operas bis hin zu Version 7 haben darüber hinaus ihre eigene Belegung: 1 für die linke Maustaste, 2 für die rechte Maustaste und 3 für die mittlere Maustaste. Opera 8 benutzt die W3C-Definition. Mozilla Firefox 1.0 unterstützt button ebenfalls gemäß dem DOM-Standard. Konqueror verhält sich dagegen wieder wie der Internet Explorer. Safari erkennt irrtümlich die linke und die mittlere Maustaste immer als linke Maustaste. Das Beispiel, das sich auf die linke Maustaste beschränkt, liefert daher nur im Internet Explorer, in älteren Opera-Versionen und im Konqueror sinnvolle Ergebnisse. Die Benutzung von button in den verschiedenen Browsern würde eine komplizierte Browserweiche erfordern, um die gedrückte Maustaste zuverlässig in Erfahrung zu bringen.

Opera 5 und 6 lösen das dokumentweite mousedown-Ereignis nur bei einem Klick auf den Teil des Fensters aus, der vom Inhalt der Seite ausgefüllt ist. Da das Anzeigebeispiel nur dürftigen Inhalt enthält, reagiert nur ein schmaler Bereich am Fensteroberrand auf die Mausklicks.

DOM 2.0 MS JScript MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen clientX, clientY

Microsoft-Syntax. Speichert die horizontalen Pixel (clientX) und die vertikalen Pixel (clientY) der Mauszeiger-Position relativ zur oberen linken Ecke des Anzeigebereichs des Fensters, in dem das aktuellen Dokument dargestellt wird. Bezieht sich z.B. auf Mausereignisse.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if (document.getElementById) {
    document.getElementById("Springer").style.left  = Ereignis.clientX + "px";
    document.getElementById("Springer").style.top = Ereignis.clientY + "px";
  } else if (document.all) {
    document.all.Springer.style.left = Ereignis.clientX;
    document.all.Springer.style.top = Ereignis.clientY;
  }
}

document.onmousedown = Mausklick;
</script>
</head><body>
<div id="Springer" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
<p>Klicken Sie irgendwo ins Dokument und der Springer bewegt sich zur Mausposition.</p>
</body></html>

Erläuterung:

Das Beispiel enthält einen div-Bereich, der mit Hilfe von Stylesheet-Angaben absolut positioniert wird. Wenn der Anwender mit der Maus in das Fenster klickt, wird der Bereich an die Position verschoben, an der der Mausklick erfolgt. Der div-Bereich wird entweder über Seite document.getElementById() oder Seite document.all angesprochen, je nachdem, welches Objekt zur Verfügung steht.

Beachten Sie:

In Opera 5.12 funktioniert das Auslesen der Eigenschaften clientX und clientY problemlos. Das Beispiel funktioniert allerdings erst ab Version 6 korrekt, da Version 5.12 beim Setzen der CSS-Eigenschaft top über JavaScript einen Pixelwert ohne Einheit (px) erwartet.

Gehen Sie mit dem dargestellten Beispiel vorsichtig um. Es kann Ihnen passieren, dass der "Layer" sich über wichtige andere Seitenbestandteile schiebt und dadurch Verweise zu anderen Seiten eventuell überdeckt werden.

MS JScript MS IE 4.0 Opera 7 Konqueror 3.3 Safari 1.2 Lesen keyCode

Microsoft-Syntax. Speichert bei Tastaturereignissen den Tastatur-Scancode der gedrückten Taste.

Der Tastaturscancode hat nicht direkt etwas mit dem Zeichencode des getippten Zeichens (z.B. ASCII, Unicode) zu tun. Viele Codes sind identisch (bei Buchstaben und Ziffern), aber es können auch Tasten abgefragt werden, die für sich genommen gar kein echtes "Zeichen" sind, z.B. die Shift-Tasten, die Funktionstasten F1 bis F12 oder das numerische Tastenfeld.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Tastendruck (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert(Ereignis.keyCode);
}
document.onkeypress = Tastendruck;
</script>
</head><body>
<p>Bitte drücken Sie irgendwelche Tasten!</p>
</body></html>

Erläuterung:

Das Beispiel überwacht, ob bei aktivem Dokument eine Taste gedrückt wurde. Wenn ja, wird deren Scancode in einem Meldungsfenster ausgegeben.

Beachten Sie:

Unser Beispiel deaktiviert die Wirkung der gedrückten Tasten nicht. Drücken Sie z.B. die F1-Taste, wird der Scancode (112) angezeigt, danach ruft der Browser aber wahrscheinlich seine Hilfefunktion auf.

Konqueror 3.1 kennt die Eigenschaft keyCode noch nicht. Mozilla Firefox 1.0 kennt die Eigenschaft keyCode zwar, sie enthält jedoch nur bei den Ereignissen keyup und keydown sinnvolle Werte. Bei keypress-Ereignissen hat die Eigenschaft bei normalen Tasten, z.B. Buchstaben, immer den Wert 0. Die Eigenschaft nach unten which liefert immer den korrekten Tastencode, daher sollte Sie zunächst die Existenz jener Eigenschaft abfragen.

JavaScript 1.2 Netscape 4.0 Mozilla Firefox 1 Konqueror 3.2 Lesen layerX, layerY

Netscape-Syntax. Speichert die aktuelle Breite (layerX) und Höhe (layerY) eines Objekts, wenn das Ereignis onresize überwacht wird, oder die horizontalen Pixel (layerX) und die vertikalen Pixel (layerY) der Mauszeiger-Position relativ zur oberen linken Ecke eines Layer-Bereichs, wenn Mausereignisse überwacht werden.

Als Layer gilt unter Netscape 4 ein Seite layer-Element oder ein Seite durch absolute Positionierung simulierter Layer. Netscape ab Version 6 sowie Mozilla Firefox unterstützen das alte Layer-Konzept nicht mehr. layerX und layerY beziehen sich in diesen Browsern auf die obere linke Ecke des nächsthöheren Elements mit position:absolute oder position:relative, in dem das Element liegt, bei dem das Mausereignis passierte. Falls das Element in keinem solchen Layer liegt, beziehen sich layerX und layerY in allen genannten Browsern auf die linke obere Ecke des Dokuments.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function wResize (Ereignis) {
  window.status = Ereignis.layerX + "x" + Ereignis.layerY;
  return true;
}

window.onresize = wResize;
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel überwacht, ob der Anwender das Anzeigefenster des Browsers verändert. Beim Verändern der Größe des Anzeigefensters wird so oft wie möglich die Handler-Funktion wResize aufgerufen. Diese schreibt in die Statuszeile des Browsers die aktuelle Fenstergröße.

Beachten Sie:

Netscape 6.0 und Mozilla Firefox 1.0 führen zwar die Handler-Funktion aus, in den Eigenschaften layerX und layerY ist jedoch nur der Wert 0 gespeichert. Konqueror kennt layerX/layerY nur bei Mausereignissen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
#karte { position:relative; }
</style>
<script type="text/javascript">
function bildklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert("x-Wert: " + Ereignis.layerX + " / y-Wert: " + Ereignis.layerY);
}
function starte_ueberwachung () {
  document.images["karte"].onclick = bildklick;
}
window.onload = starte_ueberwachung;
<script>
</head><body>

<p><img src="../../../html/grafiken/anzeige/karte.png" width="345" height="312"
        alt="Karte von S&uuml;dwestdeutschland" name="karte" id="karte"></p>

</body></html>

Erläuterung:

Das Beispiel veranschaulicht die Verwendung der Eigenschaften layerX und layerY bei Mausereignissen. Im Dokumentkörper wird eine Grafik mit dem Namen und der ID karte notiert. Beim Laden des Dokuments wird über den Seite Event-Handler onload die vorher notierte Funktion starte_ueberwachung() ausgeführt. Diese spricht über Seite document.images die Grafik an und weist ihr eine Handler-Funktion für das Klick-Ereignis zu. Bei einem Mausklick auf die Grafik wird somit die Funktion bildklick() ausgeführt. In dieser Funktion werden die Eigenschaften layerX und layerY des Event-Objekts in einem Meldungsfenster ausgegeben.

Im Dokumentkopf ist zusätzlich eine Stylesheet-Angabe notiert, die der Grafik die CSS-Eigenschaft position:relative zuweist. Damit wird sie von Netscape ab Version 6 und Mozilla Firefox als "Layer" angesehen. Somit beziehen sich die ausgegebenen Koordinaten auf die linke obere Ecke der Grafik.

JavaScript 1.2 Netscape 4.0 Lesen modifiers

Netscape-Syntax. Speichert, ob Zusatztasten wie die Alt-Taste oder die Umschalt-Taste gemeinsam mit einer anderen Taste oder einem Mausklick gedrückt wurden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function ALT_Wert (Ereignis) {
  if (Ereignis.modifiers & Event.ALT_MASK)
    alert("Maus geklickt und Alt-Taste gedrueckt!");
}

document.onmouseup = ALT_Wert;
</script>
</head><body>
</body></html>

Erläuterung:

Im Beispiel wird das Meldungsfenster dann angezeigt, wenn der Anwender mit der Maus in das Dokument geklickt hat und gleichzeitig die Alt-Taste gedrückt hält. Die verwendete Syntax benutzt Bit-Operatoren. Fragen Sie einfach so ab wie in dem Beispiel. Folgende Ausdrücke sind erlaubt:
Ereignis.modifiers & Event.ALT_MASK, um die Alt-Taste abzufragen
Ereignis.modifiers & Event.CONTROL_MASK, um die Steuerung-Taste abzufragen
Ereignis.modifiers & Event.SHIFT_MASK, um die Umschalt-Taste abzufragen
Ereignis.modifiers & Event.META_MASK, um die AltGr-Taste abzufragen

Diese Angaben sind natürlich abhängig davon, ob die verwendete Tastatur eine solche Taste überhaupt enthält.

Beachten Sie:

Netscape 6.1 kennt die Eigenschaft modifiers nicht mehr.

MS JScript MS IE 4.0 Opera 7 Konqueror 3.3 Safari 1.2 Lesen offsetX, offsetY

Microsoft-Syntax. Speichert die horizontalen Pixel (offsetX) und die vertikalen Pixel (offsetY) der Mauszeiger-Position relativ zur oberen linken Ecke des Elements, das ein Ereignis ausgelöst hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Coords () {
  alert("Stelle im Button: " + window.event.offsetX + "/" + window.event.offsetY);
}
</script>
</head><body>
<form action="">
<input type="button" value="Klick doch mal auf mich drauf" onclick="Coords()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Button. Beim Anklicken des Buttons wird die Funktion Coords() aufgerufen. Diese gibt die Pixelkoordinaten des Mausklicks relativ zur oberen linken Ecke des Elements, also des Buttons, aus.

Beachten Sie:

Konqueror 3.1 interpretiert diese Angaben noch nicht korrekt.

Der Internet Explorer 6, Opera 8.5 und Konqueror 3.4.2 interpretieren offsetX/offsetY unterschiedlich, wenn Sie dem betreffenden Element mit CSS einen Seite Rahmen (border) oder Seite Innenabstand (padding) geben. Die Browser sind sich nicht einig, wo die obere linke Ecke eines Elements im Seite CSS-Boxmodell zu verorten ist. Konqueror und Safari gehen von der äußeren Rahmen-Box als Koordinatenursprung aus. Dies erscheint am logischsten. Der Internet Explorer geht von der Innenabstands-Box aus, Opera von der Inhaltsbereichs-Box, also der innersten. Bei einem Klick in den Rahmen- oder Innenabstandsbereich liefert Opera also negative bzw. um die Größe des jeweiligen Rahmens und Innenabstands verminderte Werte. Der Internet Explorer liefert folglich bei einem Klick auf den Rahmen negative bzw. um die Größe des Rahmen verminderte Werte. Setzen Sie bei diesen Browsern offsetX und offsetY daher am besten nur bei Elementen ohne border und padding ein.

Bei dem dargestellten Beispiel setzt Safari für offsetX den Koordinatenursprung am linken Rand des Buttons, für offsetY in der Mitte des Anzeigebereiches des Fensters. Die Darstellung der Buttons unterliegt bei Safari nicht dem Browser und CSS, sondern dem Betriebssystem - daher die unterschiedliche Interpretation der Koordinaten.

JavaScript 1.2 Netscape 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 Lesen pageX, pageY

Netscape-Syntax. Speichert die horizontalen Pixel (pageX) und die vertikalen Pixel (pageY) der Mauszeiger-Position relativ zur oberen linken Ecke des Dokuments.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function LayerPosition (Ereignis) {
  if (document.layers) {
    document.layers[0].left = Ereignis.pageX;
    document.layers[0].top = Ereignis.pageY;
  } else if (document.getElementById) {
    document.getElementById("layer").style.left = Ereignis.pageX + "px";
    document.getElementById("layer").style.top = Ereignis.pageY + "px";
  }
}
document.onmouseup = LayerPosition;
</script>
<style type="text/css">
#layer { position:absolute; top:100px; left:100px; width:100px; height:100px;
         background-color:#FFE0FF; border:solid 1px #000000; }
</style>
</head><body>
<div id="layer">Ein Layer</div>
<p>Klicken Sie irgendwo ins Dokument und der Layer folgt der Maus dorthin.</p>
</body></html>

Erläuterung:

Das Beispiel enthält einen simulierten Layer. Wenn der Anwender mit der Maus in das Fenster klickt und die Maustaste dann wieder loslässt, wird der Layer an die Position verschoben, an der die Maus losgelassen wurde.
Da die Eigenschaften pageX und pageY auch von anderen Browsern interpretiert werden, wurde das Beispiel entsprechend kompatibel gestaltet. Statt eines Layers wird mit einem absolut positionierten div-Bereich ein Seite Layer ohne layer-Element simuliert. Wenn die Maustaste gedrückt und wieder losgelassen wird, wird die Funktion LayerPos() aufgerufen. Innerhalb dieser Funktion wird geprüft, ob der Browser das Objekt document.layers kennt. Ist das der Fall, erfolgt die Zuweisung des Wertes über das Layer-Objekt. Diesem Zweig der Anweisung folgt Netscape 4.x. Kennt der Browser das Objekt dagegen nicht, dann wird im else-Zweig geprüft, ob er die Methode Seite document.getElementById() kennt. Anschließend erfolgt die Zuweisung der Eigenschaft an das Element entsprechend der DOM-Syntax. Beide Zweige der if/-else-Anweisung verwenden jedoch die gleichen Event-Eigenschaften.

DOM 2.0 JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen screenX, screenY

Speichert die horizontalen Pixel (screenX) und die vertikalen Pixel (screenY) der Mauszeiger-Position absolut gesehen zum Bildschirm.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Mausklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert("x-Wert: " + Ereignis.screenX + " / y-Wert: " + Ereignis.screenY);
}

document.onclick = Mausklick;
</script>
</head><body>
<p>Klicken Sie irgendwo ins Dokument, um die Position auszugeben.</p>
</body></html>

Erläuterung:

Das Beispiel überwacht, ob der Anwender in das Dokument klickt. Wenn ja, werden in einem Meldungsfenster die absoluten Bildschirmkoordinaten ausgegeben, an denen die Maustaste gedrückt wurde.

Beachten Sie:

Opera unter Linux, getestet mit Version 9.02 und früher, liefert unter Umständen falsche Werte für screenX und screenY. Anstelle die absolute Mausposition in Bezug auf den gesamten Bildschirm wiederzugeben, werden Koordinaten relativ zur oberen linken Ecke des Dokuments angegeben - wie bei nach oben pageX und pageY.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 Lesen which

Netscape-Syntax. Speichert bei Tastaturereignissen den dezimalen Code (ASCII-Wert) der gedrückten Taste und bei Mausereignissen, welche Maustaste gedrückt wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Position (Ereignis) {
  alert("Maustaste: " + Ereignis.which);
}

document.onmousedown = Position;
</script>
</head><body>
<p>Klicken Sie irgendwo ins Dokument.</p>
</body></html>

Erläuterung:

Das Beispiel überwacht, ob der Anwender die Maustaste drückt. Wenn ja, wird in einem Meldungsfenster ausgegeben, welche Maustaste gedrückt wurde. Die linke Maustaste hat den Wert 1, die mittlere (sofern vorhanden) den Wert 2 und die rechte (sofern vorhanden) den Wert 3.

Beachten Sie:

In verschiedenen Browsern ist es durch das aufspringende Meldungsfenster nicht möglich, Links auf der Seite anzuklicken. Im Praxisgebrauch sollten Sie daher das onmousedown-Ereignis nicht dokumentweit mit einem Meldungsfenster verknüpfen.

Opera erlaubt das dokumentweite Verarbeiten von Rechtsklicks erst ab Version 8, in Versionen darunter wird die Handler-Funktion bei einem Rechtsklick nicht ausgeführt.

Safari interpretiert linke und mittlere Maustaste gleich, die rechte gar nicht.

DOM 2.0 JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 6 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen type

Speichert, welches Ereignis eingetreten ist. Der gespeicherte Wert ist der Name des Events ohne das Präfix on, also beispielsweise mouseup oder keypress oder select.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Auswertung (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  alert("Ereignis: " + Ereignis.type);
}

document.onmouseup = Auswertung;
document.onkeyup = Auswertung;
</script>
</head><body>
<p>Drücken Sie eine Taste oder klicken Sie irgendwo ins Dokument.</p>
</body></html>

Erläuterung:

Das Beispiel überwacht zwei Ereignisse, nämlich, ob der Anwender die Maustaste drückt und ob er eine Taste drückt. In beiden Fällen wird die gleiche Handler-Funktion Auswertung aufgerufen. Sie gibt in einem Meldungsfenster aus, welches der Ereignisse eingetreten ist.

Beachten Sie:

Im Mozilla Firefox (Linux) und Konqueror ist es durch das aufspringende Meldungsfenster nicht möglich, Links auf der Seite anzuklicken. Im Praxisgebrauch sollten Sie daher das onmouseup-Ereignis nicht dokumentweit mit einem Meldungsfenster verknüpfen.

Safari 1.0 reagiert nicht auf Tastaturereignisse, wohl aber auf Mausklicks. Spätere Versionen von Safari reagieren korrekt.

MS JScript MS IE 4.0 Opera 7 Konqueror 3.1 Safari 1.0 x, y

Speichert die horizontalen Pixel (x) und die vertikalen Pixel (y) der Mauszeiger-Position relativ zur oberen linken Ecke des Seite relativ positionierten Elternelements von dem Element, das ein Ereignis ausgelöst hat. Wenn das auslösende Element kein relativ positioniertes Elternelement hat, gilt die linke obere Ecke des Dokuments als Bezug.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Coords () {
  if (window.event)
    alert("x = " + window.event.x + "/ y = " + window.event.y);
}
</script>
<style type="text/css">
div { position:relative; left:100px; width:200px; padding:30px; background-color:#FFFFE0; }
div p { margin:0; padding:10px; background-color:#FFFFB0; }
</style>
</head><body>
<div><p onclick="Coords()">Klick mich</p></div>
</body></html>

Erläuterung:

Das Beispiel enthält einen relativ positionierten div-Bereich und innerhalb davon einen gewöhnlichen Textabsatz. Beim Anklicken des Absatzes wird die Funktion Coords() aufgerufen. Diese gibt die Pixelkoordinaten des Mausklicks aus. Die Werte beziehen sich dabei auf die linke obere Ecke des div-Bereichs.

Beachten Sie:

Versionen des Internet Explorers vor der Version 5 speichern in diesen Eigenschaften die Position relativ zum Anzeigebereich des Fensters, genau wie nach oben clientX und clientY. Ab der Version 5.0 wendet der Internet Explorer das beschriebene Verhalten an.

Die Eigenschaften x und y kennen neben dem Internet Explorer auch andere Browser, aber sie haben dort mitunter eine unterschiedliche Bedeutung. In Netscape 4 sind sie identisch mit nach oben layerX und layerY. Auch Opera, Safari und Konqueror kennen x und y. Im Safari und Konqueror sind x und y immer identisch mit nach oben clientX und clientY, relativ positionierte Elternelemente werden ignoriert. Opera 7 folgt korrekt der Microsoft-Definition, ab Version 8 treten jedoch Unstimmigkeiten auf, wenn das fragliche Element einen Rahmen ( border) oder Innenabstand (padding) besitzt. Dieser Fehler ist in Version 8.5 noch nicht behoben. Das Beispiel funktioniert daher in diesem Browser nicht zuverlässig.

nach oben
weiter | Seite history
zurück | Seite links
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / history

SELFHTML

history
Informationsseite

nach unten history: Allgemeines zur Verwendung

Eigenschaften:

nach unten length (Anzahl besuchter Seiten)

Methoden:

nach unten back() (zurückspringen)
nach unten forward() (vorwärtsspringen)
nach unten go() (zu URI in History springen)
nach unten

history: Allgemeines zur Verwendung

Über das Objekt history, das in der JavaScript-Objekthierarchie unterhalb des Seite window-Objekts liegt, haben Sie Zugriff auf die besuchten WWW-Seiten des Anwenders. Maßgeblich ist dabei die Liste, wie sie in der History-Liste des Web-Browsers gespeichert ist. Mit diesem Objekt können Sie z.B. Verweise vom Typ "springe zur zuletzt besuchten Seite" konstruieren.

Beispiele:

history.back();
window.history.back();
Zweitfenster.history.back();
parent.frames[2].history.back();

Erläuterung:

Methoden des history-Objekts können Sie mit history aufrufen, die zuletzt besuchte Seite beispielsweise mit history.back(). Sie können auch window.history.back() notieren. Da es sich dabei aber um den Inhalt des aktuellen Fensters handelt, ist die Angabe des Fensternamens nicht zwingend erforderlich. Anders beim Zugriff auf andere Fenster oder Frame-Fenster. In diesen Fällen müssen Sie das Fenster korrekt adressieren. Lesen Sie für zusätzliche Fenster den Abschnitt zur Seite Verwendung des window-Objekts und für Frame-Fenster den Abschnitt über die Seite Verwendung des frames-Objekts.

Beachten Sie:

JavaScript erlaubt zum Schutz der Seitenbesucher nur einen begrenzten Zugriff auf das history-Objekt. Das bedeutet, Sie erhalten keinen Zugriff auf die URIs der besuchten Seitenadressen, und Sie können die History auch nicht löschen. Neben der Bewegung in der History ist es lediglich erlaubt, mit der Methode Seite location.replace() den history-Eintrag der zuletzt besuchten Seite zu überschreiben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert die Anzahl der Einträge in der History für ein Fenster.

Beispiel:

<a href="javascript:alert(history.length)">Anzahl besuchter Seiten;</a>

Erläuterung:

Das Beispiel definiert einen Verweis, bei dessen Anklicken die Anzahl der besuchten Seiten mit Seite alert() ausgegeben wird.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 back()

Lädt die WWW-Seite, die zuletzt besucht wurde. Erwartet keine Parameter.

Beispiel:

<a href="javascript:history.back()">zur&uuml;ck</a>

Erläuterung:

Das Beispiel definiert einen Verweis, bei dessen Anklicken die zuletzt besuchte Seite wieder aufgerufen wird.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 forward()

Lädt die WWW-Seite, die als nächste besucht wurde, sofern zuvor ein Back-Vorgang stattfand. Erwartet keine Parameter.

Beispiel:

<a href="javascript:history.forward()">wieder vor</a>

Erläuterung:

Das Beispiel definiert einen Verweis, bei dessen Anklicken die Seite aufgerufen wird, die aktiv war, bevor der Anwender einen Back-Vorgang auslöste.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 go()

Springt so viele Seiten in der gespeicherten History vor oder zurück wie gewünscht. Erwartet als Parameter die Anzahl der zu springenden Seiten. Ein negativer Wert springt rückwärts (so viele Back-Vorgänge wie angegeben), ein positiver Wert springt vorwärts (so viele Forward-Vorgänge wie angegeben).

Beispiel:

<a href="javascript:history.go(-3)">3 Seiten zur&uuml;ck</a>

Erläuterung:

Das Beispiel definiert einen Verweis, bei dessen Anklicken drei Seiten in der gespeicherten Historie der besuchten Seiten zurückgesprungen wird.

nach oben
weiter | Seite location
zurück | Seite event
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / location

SELFHTML

location
Informationsseite

nach unten location: Allgemeines zur Verwendung

Eigenschaften:

nach unten hash (Ankername innerhalb eines URI)
nach unten host (Domain-Name innerhalb eines URI)
nach unten hostname (Domain-Name innerhalb eines URI)
nach unten href (URI / Verweis zu URI)
nach unten pathname (Pfadname innerhalb eines URI)
nach unten port (Portangabe innerhalb eines URI)
nach unten protocol (Protokollangabe innerhalb eines URI)
nach unten search (Parameter innerhalb eines URI)

Methoden:

nach unten reload() (neu laden)
nach unten replace() (History-Eintrag überschreiben)
nach unten

location: Allgemeines zur Verwendung

Über das Objekt location, das in der JavaScript-Objekthierarchie unterhalb des Seite window-Objekts liegt, haben Sie Zugriff auf den vollständigen Seite URI der aktuell angezeigten Web-Seite. Sie können den URI oder Teile davon zur Weiterverarbeitung abfragen und ändern. Beim Ändern führt der Web-Browser einen Sprung zu einem neuen URI aus, genau so wie bei einem Verweis.

Beispiele:

window.location.href = "datei2.htm";
MeineDomain = location.host;

parent.frames[1].location.href = "datei2.htm";
Zweitfenster.host = "www.selfhtml.org";

Erläuterung:

Methoden des location-Objekts können Sie mit location aufrufen. Sie können auch window. davor notieren. Da es sich dabei aber um die Adresse des aktuellen Fensters handelt, ist die Angabe des Fensternamens nicht zwingend erforderlich. Anders beim Zugriff auf andere Fenster oder Frame-Fenster. In diesen Fällen müssen Sie das Fenster korrekt adressieren. Lesen Sie für zusätzliche Fenster den Abschnitt zur Seite Verwendung des window-Objekts und für Frame-Fenster den Abschnitt über die Seite Verwendung des frames-Objekts.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 7.10 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern hash

Speichert den Seite Anker (Verweisziel) innerhalb des URI.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Zeigen () {
  alert(window.location.hash);
}
</script>
</head><body>
<p><a href="#a2">Gehe zu a2. Bitte zuerst klicken</a></p>
<p><a name="a2" href="javascript:Zeigen()">Hier a2 - bitte dann klicken</a></p>
</body></html>

Erläuterung:

Das Beispiel definiert zwei Verweise. Beim Anklicken des ersten Verweises wird zu dem Ziel a2 innerhalb der Datei gesprungen. Dies ist selbst wieder ein Verweis. Beim Anklicken dieses zweiten Verweises wird die Funktion Zeige() aufgerufen, die den Ankernamen ausgibt. Beachten Sie, dass das Gatterzeichen # mit zu dem Wert gehört, den hash liefert.
Wenn Sie diese Angabe ändern, bewirken Sie einen Verweis innerhalb der Datei zu dem angegebenen Anker. Auch dabei müssen Sie das Gatterzeichen vor dem Ankernamen hinzufügen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern host

Speichert den vollständigen Namen des Server-Rechners innerhalb des aktuellen oder fensterspezifischen URI. Im Unterschied zu nach unten hostname enthält der Servername auch die Portnummer des Web-Servers.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
alert("Sie befinden sich auf dem Host " + window.location.host);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt beim Einlesen der Datei aus, auf welchem Host-Rechner sich der Anwender befindet. Wenn es eine Namensadresse wie etwa www.selfhtml.org ist, wird diese ausgegeben. Wenn es eine numerische IP-Adresse wie etwa 195.201.34.18 ist, wird diese ausgegeben. Wenn beispielsweise eine Portnummer dazugehört, wie www.example.org:5080, wird auch diese gespeichert.
Sie können die Eigenschaft ändern. Sicherer ist es in diesem Fall jedoch, mit der Eigenschaft nach unten href zu arbeiten.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern hostname

Speichert den vollständigen Namen des Server-Rechners innerhalb des aktuellen oder fensterspezifischen URI.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
alert("Sie befinden sich auf dem Host " + window.location.hostname);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt beim Einlesen der Datei aus, auf welchem Host-Rechner sich der Anwender befindet. Wenn es eine Namensadresse wie etwa www.selfhtml.org ist, wird diese ausgegeben. Wenn es eine numerische IP-Adresse wie etwa 195.201.34.18 ist, wird diese ausgegeben.
Sie können die Eigenschaft ändern. Sicherer ist es in diesem Fall jedoch, mit der Eigenschaft nach unten href zu arbeiten.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern href

Speichert den vollständigen URI des aktuellen oder eines anderen Fensters.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Wunsch () {
  var Ziel = window.prompt("Ihr Wunsch-URI:", "");
  window.location.href = Ziel;
}
</script>
</head><body>
<a href="javascript:Wunsch()">Wunschverweis</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird die Funktion Wunsch() aufgerufen. Diese Funktion blendet ein Dialogfenster ein, in dem der Anwender einen URI seiner Wahl eingeben kann. Der eingegebene Wert wird in der Variablen Ziel gespeichert. Anschließend wird durch Zuweisung von Ziel an window.location.href ein Verweis zu diesem URI ausgeführt.
Es muss sich dabei nicht um einen vollständigen URI handeln. Ein Dateiname genügt, wenn der Sprung einfach nur zu einer anderen Projektdatei im gleichen Verzeichnis führen soll.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern pathname

Speichert den Pfadnamen innerhalb des aktuellen oder fensterspezifischen URI. Bei lokaler Verwendung (ohne HTTP-Protokoll) wird die vollständige lokale Adresse gespeichert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
alert("Aktueller Pfad: " + window.location.pathname);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt beim Einlesen der Datei in einem Meldungsfenster den Pfadnamen des URI der Datei aus.
Sie können die Eigenschaft ändern. Sicherer ist es in diesem Fall jedoch, mit der Eigenschaft nach oben href zu arbeiten.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern port

Speichert den Port innerhalb des aktuellen oder fensterspezifischen URI. Eine Adresse mit Ports ist etwa http://www.example.org:5080/ - die Eigenschaft port enthält nur dann einen Wert, wenn im aktuellen URI tatsächlich eine Portangabe enthalten ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (window.location.port != "")
  alert(window.location.port);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ermittelt beim Einlesen der Datei, ob eine Portangabe vorhanden ist. Wenn ja, wird sie in einem Meldungsfenster ausgegeben.
Sie können die Eigenschaft ändern. Dies kann jedoch zu Fehlermeldungen führen, wenn der Server den Port nicht kennt. Der "Normal-Port" für HTTP-Adressen ist 80.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern protocol

Speichert das verwendete Protokoll innerhalb des aktuellen oder fensterspezifischen URI. Bei HTTP-Adressen wird http: gespeichert. Bei lokaler Verwendung (ohne HTTP-Protokoll) wird file: gespeichert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
alert(window.location.protocol);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt beim Einlesen der Datei das Protokoll aus, das zum aktuellen URI gehört.
Sie können die Eigenschaft ändern. Dies kann jedoch zu Fehlermeldungen führen, wenn das angegebene Protokoll mit der gleichen sonstigen Adresse nicht unterstützt wird.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen/Ändern search

Speichert eine Zeichenkette, die, durch ein Fragezeichen getrennt, zum aktuellen URI gehört, zum Beispiel:
http://www.example.org/index.htm?Browser=Netscape.
In diesem Fall enthält die Eigenschaft den Wert ?Browser=Netscape.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (window.location.search != "")
  alert(window.location.search);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ermittelt beim Einlesen der Datei, ob der URI einen Teil hinter einem Fragezeichen enthält. Wenn ja, wird sie in einem Meldungsfenster ausgegeben.
Sie können (funktioniert nur mit Netscape) mit nach oben href eine andere Datei aufrufen und an den URI, durch ein Fragezeichen getrennt, Informationen anhängen, zum Beispiel solche, die Sie mit JavaScript ermittelt haben - Formulareingaben oder dergleichen. Die aufgerufene Datei kann solche Informationen auslesen und weiterverarbeiten. Auf diese Weise ist "Kommunikation" zwischen Dateien möglich.

Beachten Sie:

Opera 5.12 zeigt im Protokoll file: den HTML-Quelltext einer Datei an, sobald diese einen Parameter erhält.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 reload()

Lädt eine WWW-Seite neu. Hat den gleichen Effekt wie der Reload-Button im Browser.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:location.reload()">Reload</a>
</body></html>

Erläuterung:

Das Beispiel definiert einen Verweis, bei dessen Anklicken die aktuelle Seite noch einmal neu geladen wird.

Optional kann dieser Funktion der Parameter true übergeben werden, um ein Neuladen der Seite vom Server zu erzwingen. Ohne diesen Parameter wird die Seite aus dem Zwischenspeicher des Browsers (Cache) neu geladen.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 replace()

Lädt einen anderen URI über den aktuellen Eintrag in der Liste der besuchten Seiten (History). Hat dadurch einen ähnlichen Effekt wie die Eigenschaft nach oben href. Der Unterschied ist, dass der aktuelle URI anschließend in der Liste der besuchten Seiten nicht mehr vorkommt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<a href="javascript:location.replace('datei2.htm')">Datei 2</a>
</body></html>

Erläuterung:

Das Beispiel definiert einen Verweis, bei dessen Anklicken datei2.htm geladen wird. Der aktuelle URI verschwindet dabei aus der Liste der besuchten Seiten.

nach oben
weiter | Seite Array
zurück | Seite history
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / Array

SELFHTML

Array
Informationsseite

nach unten Allgemeines zur Verwendung
nach unten Assoziative Arrays (Arrays mit Zeichenketten als Schlüssel)

Eigenschaften:

nach unten length (Anzahl Elemente)

Methoden:

nach unten concat() (Arrays verketten)
nach unten join() (Array in Zeichenkette umwandeln)
nach unten pop() (letztes Array-Element löschen)
nach unten push() (neue Array-Elemente anhängen)
nach unten reverse() (Elementreihenfolge umkehren)
nach unten shift() (Erstes Array-Element entfernen)
nach unten slice() (Teil-Array extrahieren)
nach unten splice() (Elemente löschen und hinzufügen)
nach unten sort() (Array sortieren)
nach unten unshift() (Elemente am Array-Anfang einfügen)
nach unten

Array: Allgemeines zur Verwendung

Das Objekt Array ist als "Container" für Ketten gleichartiger Variablen gedacht. In der Programmierersprache spricht man auch von einem "Vektor". Wenn Sie beispielsweise die 16 Grundfarben speichern wollen, brauchen Sie keine 16 Variablen, sondern ein Array-Objekt, in dem Sie 16 gleichartige Werte (im Beispiel: Farbwerte) speichern können.

Schema 1 / Beispiel 1:

Objektname = new Array();
MeineFrauen = new Array();

Schema 2 / Beispiel 2:

Objektname = new Array(Zahl);
MeineFrauen = new Array(100);

Schema 3 / Beispiel 3:

Objektname = new Array(Element0, Element1, ..., element_n);
MeineFrauen = new Array("Anita", "Bettina", "Christa", "Doris");

Erläuterung:

Eine Objektinstanz von Array speichern Sie in einem selbst vergebenen Objektnamen. Hinter dem Namen folgt ein Gleichheitszeichen. Dahinter folgt das reservierte Wort new und der Aufruf der Objektfunktion Array().

Benutzen Sie Schema 1, wenn Sie zum Zeitpunkt der Definition noch nicht wissen, wie viele Elemente in dem Variablenvektor gespeichert werden sollen.
Benutzen Sie Schema 2, wenn Sie zum Zeitpunkt der Definition bereits wissen, wie viele Elemente in dem Variablenvektor gespeichert werden sollen. Die Anzahl können Sie der Objektfunktion als Parameter übergeben.
Benutzen Sie Schema 3, um den Variablenvektor gleich mit Anfangswerten vorzubelegen. Bei den Varianten 1 und 2 bleiben die einzelnen Variablen des Variablenvektors leer, bis ihnen im Programmverlauf ein Wert zugewiesen wird.

Nachdem Sie eine Instanz des Array-Objekts erzeugt haben, können Sie dies in Ihrem JavaScript-Code verwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
Zahlen = new Array(34, 86, 167, 413);
var x = Zahlen[1];
alert(x);
</script>
</head><body>
</body></html>

Erläuterung:

Nachdem Sie eine Instanz des Array-Objekts in einem Namen gespeichert haben (im Beispiel der Name Zahlen), können Sie wie in der zweiten Zeile gezeigt einzelne Werte innerhalb des Variablenvektors ansprechen. Im Beispiel wird eine gewöhnliche Variable x definiert. In dieser Variablen wird der Wert der zweiten Variable des Zahlen-Vektors gespeichert, also 86. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. den ersten Wert im Vektor sprechen Sie im Beispiel mit Zahlen[0] an, den zweiten mit Zahlen[1] usw.

Beachten Sie:

Sie können auch mehrdimensionale Arrays erzeugen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var a = new Array(4);
for (var i = 0; i < a.length; ++i)
  a[i] = new Array(10);
a[3][1] = "Hallo";
alert(a[3][1]);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert zunächst einen Array a mit 4 Elementen. Dann wird in einer Seite for-Schleife für jedes dieser Elemente ein neuer Array definiert, wobei für jeden Array 10 leere Elemente erzeugt werden. Anschließend können Sie durch eine Angabe wie a[3][1] das zweite Element (1) im vierten Array (3) ansprechen. im Beispiel wird dieses Element mit dem Wert Hallo belegt. Zur Kontrolle wird der Wert in einem Meldungsfenster ausgegeben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Assoziative Arrays

Als assoziative Arrays bezeichnet man Sammlungen von Elementen, bei denen der Zugriff auf einzelne Elemente mit Hilfe einer Zeichenkette erfolgt. Die Zeichenkette wird als Schlüssel für den Zugriff bezeichnet. Im Gegensatz zu anderen Programmiersprachen gibt es in JavaScript keine assoziativen Arrays. Arrays in JavaScript erlauben den Zugriff auf die Elemente lediglich über Indexnummern. Man kann jedoch mit Hilfe von Object() das Verhalten eines assoziativen Arrays teilweise nachbauen. Es handelt sich dann um ein allgemeines Objekt, an dem die Elemente als Objekteigenschaften hängen. Auf Eigenschaften kann man nicht nur über den Punkt-Operator zugreifen (objekt.eigenschaft), sondern auch über eine Notation, die dem Index-Operator bei Arrays gleicht (objekt["eigenschaft"]). Dadurch lassen sich beliebige Schlüssel erzeugen.

Das Tricksen über allgemeine Objekte bringt einige Fallstricke mit sich. Ein solcher "unechter" assoziativer Array besitzt nämlich nicht die auf dieser Seite beschriebenen Methoden und Eigenschaften eines gewöhnlichen Arrays. Beispielsweise ist es nicht möglich, über nach unten length die Anzahl der Elemente zu ermitteln. Die Elemente eines solchen "Arrays" können stets nur mit dem Namen oder über eine Seite for-in-Schleife angesprochen werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Mitarbeiter = new Array();

Mitarbeiter[0] = new Object();
Mitarbeiter[0]["Name"] = "Müller";
Mitarbeiter[0]["Vorname"] = "Hans";
Mitarbeiter[0]["Wohnort"] = "Dresden";

Mitarbeiter[1] = new Object();
Mitarbeiter[1]["Name"] = "Schulze";
Mitarbeiter[1]["Vorname"] = "Frauke";
Mitarbeiter[1]["Wohnort"] = "Berlin";

for (var i = 0; i < Mitarbeiter.length; i++) {
  document.write("<dl><dt>Mitarbeiter " + (i + 1) + "<\/dt>");
  for (var Eigenschaft in Mitarbeiter[i])
    document.write("<dd>" + Eigenschaft + ": " + Mitarbeiter[i][Eigenschaft] + "<\/dd>");
  document.write("<\/dl>");
}
</script>
</body></html>

Erläuterung:

Das Beispiel definiert einen Array Mitarbeiter. Dieser Array besitzt zwei Elemente. Jedes dieser Elemente stellt ein Objekt dar. Den Objekten werden jeweils Eigenschaften zugefügt, diese Schlüssel heißen Name, Vorname und Wohnort. Jedem dieser Eigenschaften wird ein entsprechender Wert zugeordnet.

Die nachfolgende Seite for-Schleife dient dazu, die Elemente des Arrays Mitarbeiter und die jeweiligen Eigenschaften auszugeben. Nach Beginn der for-Schleife wird zuerst mit der Seite write-Methode der Beginn einer Definitionsliste in das Dokument geschrieben und dabei die laufende Nummer des Mitarbeiters angegeben. Dies entspricht der um eins erhöhten Position im Array, da bei Array-Elementen die Zählung bei 0 beginnt. Anschließend wird eine weitere, innere Schleife aufgerufen. Da hierbei auf ein Objekt zugegriffen wird, muss eine Seite for in-Schleife verwendet werden. Diese Schleife durchläuft alle Eigenschaften des angesprochenen Objektes und schreibt dessen Namen und den zugehörigen Wert ins Dokument. Sobald die for-in-Schleife beendet ist, wird auch die Definitionsliste geschlossen und das nächste Element im Array Mitarbeiter verarbeitet.

Beachten Sie:

In vielen Quellen wird auch von assoziativen Arrays gesprochen, wenn diese mit new Array() erzeugt werden. Da ein Array immer auch ein Object ist, ist dies zwar möglich. Dennoch können die Eigenschaften und Methoden des erzeugten Arrays nicht verwendet werden, es ist daher unnötig und irreführend, hier Array() zu verwenden.

Trotzdem wird das Konstrukt von Schlüssel/Werte-Paaren als assoziativer Array bezeichnet. Sie sollten sich bewusst sein, das dies in JavaScript lediglich ein Object darstellt, auf dessen Eigenschaften Sie über Schlüssel zugreifen können.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert die Anzahl der Elemente in einem Array. Beachten Sie, dass alle JavaScript-Objekte, die eine Eigenschaft length besitzen, wie zum Beispiel die Objekte Seite forms oder Seite elements, aus Sicht von JavaScript Arrays darstellen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahlen = new Array(1, 2, 4, 8, 16, 32, 64, 128, 256);
alert(Zahlen.length + " Zahlen sind definiert");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert einen Array, bestehend aus 9 Zahlen. Anschließend wird zur Kontrolle ausgegeben, wie viele Elemente der Array enthält.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 concat()

Hängt einen Array an einen anderen an. Erwartet als Parameter den Namen des anzuhängenden Arrays. Gibt den zusammengefügten Array als Array zurück. Sie können auch mehrere Arrays als Parameter an die Methode übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahlen = new Array(1, 2, 3);
var AndereZahlen = new Array(10, 20, 30);
ZahlenGesamt = Zahlen.concat(AndereZahlen);
alert(ZahlenGesamt.length);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert zunächst zwei Arrays Zahlen und AndereZahlen mit je drei Zahlen. In der Variablen Zahlengesamt wird anschließend der Rückgabewert von concat() gespeichert, wobei die Methode auf den ersten definierten Array Zahlen angewendet wird und den zweiten Array AndereZahlen an diesen Array anhängt. Zur Kontrolle wird nach der Operation die Gesamtzahl der Elemente von ZahlenGesamt ausgegeben. Dieser Array enthält nun die Werte 1,2,3,10,20,30 und hat deshalb also 6 Elemente.

Beachten Sie:

Die Methode concat() erzeugt unterschiedliche Referenzen auf die ihr übergebenen Arrays. Ist in den miteinander zu verknüpfenden Arrays ein Objekt gespeichert, so ist in dem neu erzeugten Array eine Art Zeiger auf dieses Objekt gespeichert. Das bedeutet, wird das Objekt geändert, so ändert sich auch der von der Methode concat() erzeugte Array. Sind in den verknüpften Arrays jedoch Zahlen und Zeichenketten enthalten, so wird von diesen Werten eine Kopie erzeugt. Nachträgliche Änderungen haben dann keinen Einfluss auf den von der Methode concat() erzeugten Array.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahlen = new Array(1, 2);
var mehrZahlen = new Array(Zahlen, 3, 4);
var AndereZahlen = new Array(5, 6, 7);

ZahlenGesamt = mehrZahlen.concat(AndereZahlen);
alert(ZahlenGesamt);

Zahlen[0] = 70;
alert("Zahlen: " + Zahlen);

AndereZahlen[0] = 70;
alert("AndereZahlen: " + AndereZahlen);

alert("ZahlenGesamt: " + ZahlenGesamt);
</script>
</head><body>
</body></html>

Erläuterung:

Im Beispiel wurden drei Arrays angelegt. Das erste Element im Array mehrZahlen ist dabei der Array Zahlen. Damit ist im Array mehrZahlen ein Objekt vom Typ Array gespeichert. Mit der Methode concat() wird an den Array mehrZahlen der Array AndereZahlen angehängt. In der Variablen ZahlenGesamt ist dann ein Array mit den Elementen 1,2,3,4,5,6,7 gespeichert.
Im nachfolgenden Scriptteil erhalten die ersten Elemente der Arrays Zahlen und AndereZahlen jeweils den Wert 70. Beide Arrays werden auch richtig geändert, wie die Kontrollausgabe mittels eines Meldungsfensters zeigt. Im von der Methode concat() erzeugten Array ZahlenGesamt sind jetzt die Werte 70,2,3,4,5,6,7 gespeichert. Das letzte Meldungsfenster zeigt dies an. Die Änderung des Arrays Zahlen wurde also übernommen, die Änderung im Array AndereZahlen dagegen nicht. Der Grund ist, dass der Array Zahlen als Objekt im Array mehrZahlen enthalten war und deshalb jede Änderung übernommen wird. Die Werte des Arrays AndereZahlen waren dagegen vom Typ Zahl, und es wurde lediglich eine Kopie angelegt. Nachträgliche Änderungen bleiben damit wirkungslos.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 join()

Verwandelt einen Array in eine Zeichenkette. Erwartet als Parameter ein oder mehrere Trennzeichen, durch das/die die Array-Einträge in der Zeichenkette voneinander getrennt sein sollen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahlen = new Array(1, 2, 4, 8, 16, 32, 64, 128, 256);
var Zahlenkette = Zahlen.join(" ");
alert(Zahlenkette);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert einen Array mit 9 Zahlen. Dann wird die Methode join auf die Variable Zahlen angewendet, in der der Array gespeichert ist. Dabei wird im Beispiel ein Leerzeichen als Parameter übergeben. Der Rückgabewert der Prozedur wird in der Variablen Zahlenkette gespeichert. Der Effekt ist, dass in Zahlenkette alle definierten Zahlen stehen, und zwar durch Leerzeichen voneinander getrennt. Zur Kontrolle wird das Ergebnis als Meldungsfenster ausgegeben.

JavaScript 1.2 Netscape 4.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 pop()

Entfernt das letzte Element aus einem Array und ändert dadurch die Anzahl der Elemente im Array. Der Rückgabewert der Methode ist der Inhalt des gelöschten Elementes.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahlen = new Array(1, 2, 3, 4, 5);
alert(Zahlen.length + " Zahlen im Array");
function Entfernen () {
  Zahlen.pop();
  alert(Zahlen.length + " Zahlen im Array");
}
</script>
</head><body>
<a href="javascript:Entfernen()">Zahl entfernen</a>
</body></html>

Erläuterung:

Das Beispiel definiert beim Einlesen der Datei einen Array Zahlen mit 5 Elementen. Zur Kontrolle wird in einem Meldungsfenster die Elementanzahl ausgegeben. Im Dateikörper enthält das Beispiel einen Verweis. Bei jedem Anklicken des Verweises wird die Funktion Entfernen() aufgerufen, die mit der pop()-Methode jeweils das letzte Element aus dem Zahlen-Array entfernt. Zur Kontrolle wird die neue Länge des Arrays ausgegeben.

Beachten Sie:

Bei Browsern, die pop() nicht kennen, können Sie das letzte Element entfernen, indem Sie dem Array eine neue Länge zuweisen, z.B. mit Zahlen.length=Zahlen.length-1.

Der Internet Explorer kennt die Methode pop() erst ab Version 5.5.

JavaScript 1.2 Netscape 4.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 push()

Hängt ein oder mehrere Elemente an das Ende eines Arrays an. Erwartet als Parameter ein oder mehrere anzuhängende Elemente. Gibt in der JavaScript-Version 1.2 das letzte (neueste) Element zurück, in neueren JavaScript-Versionen dagegen die Länge des Arrays.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Orte = new Array("Augsburg");
document.write("<p>" + Orte.join(", ") + "<br>");
var NeuestesElement = Orte.push("Berlin");
document.write(Orte.join(", ") + "<br>");
document.write("Neu dabei: " + NeuestesElement + "<\/p>");
var NeuestesElement = Orte.push("Chemnitz", "Dortmund", "Essen", "Frankfurt");
document.write("<p>" + Orte.join(", ") + "<br>");
document.write("Neuestes Element: " + NeuestesElement + "<\/p>");
</script>
</body></html>

Erläuterung:

Das Beispiel erzeugt in einem JavaScript, das im Dateikörper steht, einen Array Orte, in dem zunächst nur ein Wert, nämlich Augsburg, gespeichert wird. Zur Kontrolle wird der Inhalt mit der Seite write()-Methode in die Datei geschrieben. Anschließend wird dem Array mit der push()-Methode ein Element angehängt, nämlich Berlin. Der Rückgabewert der Operation wird in der Variablen NeuestesElement gespeichert. Zur Kontrolle wird dann der erweiterte Array und der Rückgabewert in die Datei geschrieben. Der Array besteht jetzt aus den Elementen Augsburg und Berlin. Das neueste Element ist Berlin. Dann werden nach dem gleichen Schema gleich vier neue Elemente an den Array angehängt. Der Array besteht hinterher aus den zwei bisherigen Städten plus den vier neuen. In der Variablen NeuestesElement wird jedoch nur das letzte, neueste Element gespeichert. Im Beispiel ist das Frankfurt. Zur Kontrolle werden auch diese Vorgänge in die Datei geschrieben.

Beachten Sie:

Der Internet Explorer kennt die Methode push() erst ab Version 5.5. Bei Browsern, welche die Methode push() nicht kennen, können Sie ein neues Element anhängen, indem Sie z.B. mit Zahlen[Zahlen.length] = "Wert" den Array erweitern.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 reverse()

Kehrt die Elementreihenfolge innerhalb eines Arrays um. Das erste Element ist hinterher das letzte, das letzte das erste.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Name = new Array("S", "T", "E", "F", "A", "N");
Name.reverse();
document.write(Name.join(""));
</script>
</body></html>

Erläuterung:

Das Beispiel definiert einen Array Name, dessen Elemente aus den einzelnen Buchstaben des Namens Stefan bestehen. Anschließend wird auf diesen Array die Methode reverse() angewendet. Mit Hilfe der nach oben join()-Methode wird der Array mit seiner neuen Elementreihenfolge anschließend so in die Datei geschrieben, dass keine Zeichen zwischen den Elementen stehen (das wird durch die leere Zeichenkette "" bei join() erreicht). Als Effekt erscheint der Name Stefan rückwärts geschrieben in der Datei.

JavaScript 1.2 Netscape 4.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 shift()

Entfernt das erste Element aus einem Array. Die nachfolgenden Elemente rücken entsprechend nach vorne. Das bisher zweite Element wird das neue erste usw. Gibt das entfernte Element zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahlen = new Array(1, 2, 3, 4, 5);
alert("Erste Zahl im Array: " + Zahlen[0]);
function Entfernen () {
  var geloeschtesElement = Zahlen.shift();
  alert("Erste Zahl im Array: " + Zahlen[0]);
}
</script>
</head><body>
<a href="javascript:Entfernen()">Zahl entfernen</a>
</body></html>

Erläuterung:

Das Beispiel definiert beim Einlesen der Datei einen Array Zahlen mit 5 Elementen. Zur Kontrolle wird in einem Meldungsfenster der Wert des ersten Elements ausgegeben, im Beispiel 1. Im Dateikörper enthält das Beispiel einen Verweis. Bei jedem Anklicken des Verweises wird die Funktion Entfernen() aufgerufen, die mit der shift()-Methode jeweils das erste Element aus dem Zahlen-Array entfernt. Zur Kontrolle wird das neue erste Element ausgegeben.

Beachten Sie:

Der Internet Explorer kennt die Methode shift() erst ab Version 5.5.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 slice()

Extrahiert einen Teil aus einem Array. Erwartet als ersten Parameter die Indexnummer des ersten zu extrahierenden Elements und als zweiten Parameter die Indexnummer des Elements, dass dem letzen zu extrahierenden Element folgt. Als zweiter Parameter kann auch ein negativer Wert übergeben werden. Dies bedeutet so viel wie "das soundsoviele Element von hinten". Ein Wert von -1 bedeutet also, dass das vorletze Element noch extrahiert wird, das letzte Element nicht mehr.
Die Methode gibt die extrahierten Elemente als neuen Array zurück. Wird der zweite Parameter weggelassen, werden alle Elemente bis um Ende des Arrays extrahiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahlen = new Array(1, 2, 3, 4, 5);
for (var i = 0; i < Zahlen.length; ++i) {
  var NeueZahlen = Zahlen.slice(i);
  alert(NeueZahlen.join(","));
}
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert einen Array Zahlen mit fünf Elementen. Anschließend ist eine for-Schleife notiert. Die Schleife zählt von 0 bis 4. Innerhalb der Schleife wird bei jedem Schleifendurchgang das Ergebnis von Zahlen.slice(i) in einem neuen Array namens NeueZahlen gespeichert. Der Schleifenzähler i ist dabei die Indexnummer des ersten zu extrahierenden Elements. Der zweite Parameter von slice() wird weggelassen wird, sodass alle Elemente von Element i bis einschließlich zum letzten Element extrahiert. Da i bei jedem Schleifendurchgang höher wird, werden im Beispiel immer weniger Zahlen extrahiert, und zwar immer die hinteren des Arrays.

Beachten Sie:

Die Methode slice() erzeugt unterschiedliche Referenzen auf die ihr übergebenen Arrays. Ist in den miteinander zu verknüpfenden Arrays ein Objekt gespeichert, so ist in dem neu erzeugten Array eine Art Zeiger auf dieses Objekt gespeichert. Das bedeutet: Wird das Objekt geändert, so ändert sich auch der von der Methode slice() erzeugte Array. Sind in den verknüpften Arrays dagegen Zahlen und Zeichenketten enthalten, so wird eine Kopie erzeugt. Nachträgliche Änderungen haben dann keinen Einfluss auf den von slice() erzeugten Array.
In ihrer Referenzierung verhält sich die Methode slice() genauso wie die Methode nach oben concat().

JavaScript 1.2 Netscape 4.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 splice()

Fügt ein oder mehrere neue Elemente in einen Array ein, und zwar an einer bestimmten gewünschten Stelle. Überschreibt dabei vorhandene Elemente. Erwartet folgende Parameter:
1. Startindex = Indexnummer im Array, an der das oder die neuen Elemente eingefügt werden sollen.
2. Anzahl = Anzahl zu löschender Elemente.
3.[4...] Element[e] = neue Elemente.
Der 3. und die folgenden Parameter sind optional. Wenn Sie nur die ersten beiden Parameter angeben, dient splice() nur zum löschen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var a = new Array("a", "b", "c", "d", "e", "f");
alert(a);

a.splice(2, 2, "w", "x");
alert(a);

a.splice(3, 1, "y", "z");
alert(a);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert einen Array a, bestehend aus 5 Elementen mit den Buchstaben a bis f. Anschließend wird auf diesen Array die splice()-Methode angewendet, und zwar so: an Indexnummer 2, also bei dem 3. Buchstaben im Array, werden 2 Elemente gelöscht und dann 2 Elemente eingefügt, nämlich w und x. Die Elemente c und d werden dabei mit den Werten überschrieben. Der Array hat nun den Inhalt a, b, w, x, e, f.
Im 2. Beispiel wird ab dem 4. Buchstaben ein Element gelöscht und dann ebenfalls 2 Elemente eingefügt. Jetzt hat der Array den Inhalt: a, b, w, y, z, e, f.

Der Internet Explorer kennt die Methode splice() erst ab Version 5.5.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 sort()

Sortiert die Elemente eines Arrays. Wenn Sie keinen Parameter übergeben, wird lexikalisch sortiert, numerische Werte werden also intern in Zeichenketten verwandelt und wie Zeichenketten sortiert. Dabei kommt beispielsweise die Zahl 13 vor der Zahl 7, weil "13" als Zeichenkette lexikalisch vor "7" kommt. Wenn Sie numerische Werte sortieren wollen, können Sie eine Vergleichsfunktion definieren und deren Namen als Parameter übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
function Numsort (a, b) {
  return a - b;
}

var Namen = new Array("Ina", "Bettina", "Tina", "Martina");
Namen.sort();

var Zahlen = new Array(27, 2, 10, 4);
Zahlen.sort(Numsort);

var Namenausgabe = Namen.join(",");
var Zahlenausgabe = Zahlen.join(",");
document.write("sortierte Namen: " + Namenausgabe + "<br>");
document.write("sortierte Zahlen: " + Zahlenausgabe);
</script>
</body></html>

Erläuterung:

Das Beispiel zeigt, wie Sie Zeichenketten und numerische Werte sortieren können. Im Beispiel wird ein Array Namen definiert, dessen Elemente Zeichenketten darstellen. Um einen solchen Array zu sortieren, genügt es, die Methode sort() einfach auf den Array anzuwenden. Die Elemente des Arrays werden dann neu angeordnet, nämlich lexikalisch aufsteigend sortiert. Um Zahlen zu sortieren brauchen Sie eine einfache Vergleichsfunktion. Sie können dazu die im Beispiel definierte Funktion Numsort() verwenden. Das Beispiel definiert einen Array Zahlen und wendet die sort()-Methode auf diesen Array so an, dass der Funktionsname Numsort als Parameter übergeben wird. Dadurch werden die Elemente des Arrays numerisch sortiert.
Die Funktion Numsort() regelt, wie zwei Elemente sortiert werden. Sie besitzt die Parameter a und b. Während des Sortiervorganges wird die Funktion mit jeweils 2 Array-Elementen aufgerufen. Ein erwarteter Rückgabewert ist eine Zahl, die entweder kleiner, gleich oder größer als 0 ist. Eine solche Zahl entsteht durch die Differenz der beiden Parameter. Ist der Rückgabewert von Numsort() größer als 0, so bedeutet das, der Parameter a hat einen höheren Index als der Parameter b. In der Sortierreihenfolge kommt damit b vor a. Ist der Rückgabewert von Numsort() kleiner als 0, so bedeutet das, der Parameter a hat einen niedrigeren Index als der Parameter b. In der Sortierreihenfolge kommt damit a vor b. Tritt der Rückgabewert 0 ein, so sind beide Elemente gleich und brauchen in ihrer Reihenfolge nicht verändert werden.
Wenn Sie eine umgekehrte Sortierreihenfolge wünschen, wenden Sie nach der sort()-Methode die nach oben reverse()-Methode an.

JavaScript 1.2 Netscape 4.0 MS IE 5.5 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 unshift()

Fügt am Anfang eines Arrays ein oder mehrere neue Elemente ein. Erwartet als Parameter die einzufügenden Elemente. Gibt die neue Elementzahl des Arrays zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahlen = new Array(5, 6, 7, 8, 9);
var NeueAnzahl = Zahlen.unshift(1, 2, 3, 4);
alert(NeueAnzahl);
alert(Zahlen.join(","));
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert einen Array Zahlen mit 5 Elementen, nämlich den Zahlen von 5 bis 9. Anschließend werden dem Array mit Hilfe der unshift()-Methode am Anfang 4 neue Zahlen hinzugefügt, nämlich die Zahlen von 1 bis 4. Der Rückgabewert der Operation wird in der Variablen NeueAnzahl gespeichert. Zur Kontrolle wird anschließend zunächst der Wert von NeueAnzahl ausgegeben und danach der komplette neue Array. Die Anzahl der Elemente ist nun 9, und der Array besteht aus den Elementen 1,2,3,4,5,6,7,8,9.

Der Internet Explorer kennt die Methode unshift() erst ab Version 5.5.

nach oben
weiter | Seite Boolean
zurück | Seite location
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / Boolean

SELFHTML

Boolean
Informationsseite

nach unten Allgemeines zur Verwendung
nach unten

Boolean: Allgemeines zur Verwendung

Das Objekt Boolean ist zum Erzeugen von JavaScript-Standardwerten true (wahr) und false (falsch) gedacht. Solche Werte sind vor allem als Rückgabewerte für Funktionen gedacht. Boole'sche Objekte werden bei der Definition immer mit einem der beiden möglichen Werte initialisiert und behalten diesen Wert auch. Die Variablen, in denen der Initialisierungswert gespeichert wird, stellen also Konstanten dar.

Beispiele für Initialisierung mit true:

wahr = new Boolean(true);
ja = new Boolean("irgendwas");

Beispiele für Initialisierung mit false:

falsch = new Boolean();
unwahr = new Boolean(0);
nix = new Boolean(null);
leer = new Boolean("");
Fehler = new Boolean(false);

Erläuterung:

Um eine Boole'sche Konstante mit dem Wert true zu initialisieren, notieren Sie hinter dem frei vergebbaren Namen der Konstante die Objektfunktion new Boolean(). Als Parameter übergeben Sie der Funktion entweder den Wert true (ohne Anführungszeichen) oder eine beliebige Zeichenkette.

Um die Boole'sche Konstante mit dem Wert false zu initialisieren, übergeben Sie entweder gar nichts, oder den Wert 0, oder den Wert null (ohne Anführungszeichen), oder den Wert false (ohne Anführungszeichen) oder eine leere Zeichenkette.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function LayerCheck () {
  var wahr = new Boolean(true);
  var falsch = new Boolean(false);
  if (document.layers) {
    return wahr;
  } else {
    return falsch;
  }
}
</script>
</head><body>
<a href="javascript:alert(LayerCheck())">auf Layer checken</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird der Rückgabewert der Funktion LayerCheck() ausgegeben, die in einem Script-Bereich im Dateikopf notiert ist. Wenn der Browser das Seite layers-Objekt kennt, wird die zuvor definierte Konstante wahr zurückgegeben, wenn nicht, dann die Konstante falsch. Der Rückgabewert ist jedoch nicht der Name der Konstante, sondern der voreingestellte Wert in JavaScript. Es wird also entweder true oder false ausgegeben, je nachdem, ob der Browser Layer kennt oder nicht.

nach oben
weiter | Seite Date
zurück | Seite Array
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / Date

SELFHTML

Date
Informationsseite

nach unten Allgemeines zur Verwendung

Methoden:

nach unten getDate() (Monatstag ermitteln)
nach unten getDay() (Wochentag ermitteln)
nach unten getFullYear() (volles Jahr ermitteln)
nach unten getHours() (Stundenteil der Uhrzeit ermitteln)
nach unten getMilliseconds() (Millisekunden ermitteln)
nach unten getMinutes() (Minutenteil der Uhrzeit ermitteln)
nach unten getMonth() (Monat ermitteln)
nach unten getSeconds() (Sekundenteil der Uhrzeit ermitteln)
nach unten getTime() (Zeitpunkt ermitteln)
nach unten getTimezoneOffset() (Zeitzonenabweichung der Lokalzeit ermitteln)
nach unten getUTCDate() (Monatstag von UTC-Zeit ermitteln)
nach unten getUTCFullYear() (volles Jahr von UTC-Zeit ermitteln)
nach unten getUTCHours() (Stundenteil der UTC-Uhrzeit ermitteln)
nach unten getUTCMilliseconds() (Millisekundenteil der UTC-Uhrzeit ermitteln)
nach unten getUTCMinutes() (Minutenteil der UTC-Uhrzeit ermitteln)
nach unten getUTCMonth()(Monat von UTC-Uhrzeit ermitteln)
nach unten getUTCSeconds()(Sekundenteil der UTC-Uhrzeit ermitteln)
nach unten getYear() (Jahr ermitteln)
nach unten parse() (Millisekunden seit dem 01.01.1970 ermitteln)
nach unten setDate() (Monatstag setzen)
nach unten setFullYear() (volles Jahr setzen)
nach unten setHours() (Stunden der Uhrzeit setzen)
nach unten setMilliseconds() (Millisekunden setzen)
nach unten setMinutes() (Minuten der Uhrzeit setzen)
nach unten setMonth() (Monat setzen)
nach unten setSeconds() (Sekunden der Uhrzeit setzen)
nach unten setTime() (Datum und Uhrzeit setzen)
nach unten setUTCDate() (Monatstag für UTC-Zeit setzen)
nach unten setUTCFullYear() (volles Jahr für UTC-Zeit setzen)
nach unten setUTCHours() (Stunden der UTC-Zeit setzen)
nach unten setUTCMilliseconds() (Millisekunden der UTC-Zeit setzen)
nach unten setUTCMinutes() (Minuten der UTC-Zeit setzen)
nach unten setUTCMonth() (Monat für UTC-Zeit setzen)
nach unten setUTCSeconds() (Sekunden der UTC-Zeit setzen)
nach unten setYear() (Datum und Uhrzeit setzen)
nach unten toGMTString() (Zeitpunkt in UTC-Format konvertieren)
nach unten toLocaleString() (Zeitpunkt in lokales Format konvertieren)
nach unten UTC() (UTC-Zeit seit dem 01.01.1970 ermitteln)
nach unten

Date: Allgemeines zur Verwendung

Das Objekt Date ist für alle Berechnungen mit Datum und Zeit zuständig. Dabei gibt es, wie in der EDV üblich, einen fixen historischen Zeitpunkt, der intern als Speicherungs- und Berechnungsbasis dient. In JavaScript ist dies - wie in der C- und Unix-Welt - der 1. Januar 1970, 0:00 Uhr UTC (Universal Coordinated Time). Die Einheit, in der in JavaScript intern Zeit berechnet wird, ist eine Millisekunde.

Bevor Sie über JavaScript Zugriff auf die eingebauten Datums- und Uhrzeitfunktionen haben, müssen Sie ein neues Date-Objekt erzeugen. Dabei gibt es mehrere Varianten.

Variante 1:

Objektname = new Date();

Variante 2:

Objektname = new Date("Monat Tag, Jahr Stunden:Minuten:Sekunden");

Variante 3:

Objektname = new Date(Jahr, Monat, Tag);

Variante 4:

Objektname = new Date(Jahr, Monat, Tag, Stunden, Minuten, Sekunden);

Variante 5:

Objektname = new Date(Millisekunden);

Erläuterung:

Eine neues Date-Objekts speichern Sie in einem selbst vergebenen Objektnamen. Hinter dem Namen folgt ein Gleichheitszeichen. Dahinter folgt das reservierte Wort new und der Aufruf der Objektfunktion Date().

Benutzen Sie die Variante 1, wenn Sie eine Objektinstanz erzeugen wollen, in der das zum Zeitpunkt der Programmausführung aktuelle Datum und die aktuelle Uhrzeit gespeichert werden soll. Benutzen Sie eine der Varianten 2 bis 5, wenn Sie das neue Datumobjekt mit bestimmten Werten (also einem bestimmten Datum und einer bestimmten Uhrzeit) initialisieren wollen. Alle Initialisierungswerte wie Monat oder Minuten müssen Sie in Zahlenform angeben, also etwa 9 für Monat Oktober. Ausnahme: bei Variante (2) übergeben Sie die Initialisierungsdaten als Zeichenkette. Dabei wird der Monat in englischer Schreibweise angegeben, also beispielsweise october. Wenn Sie einen Monat als Zahlenwert übergeben, so wie in den Varianten 3 und 4, müssen Sie bei 0 zu zählen beginnen. Für Januar müssen Sie also 0 übergeben, für Februar 1, und für Dezember 11. Dies ist auch der Grund, warum für den Monat Oktober nicht 10 sondern 9 übergeben wird. Bei Variante 5 müssen Sie als Zahl die Anzahl der Millisekunden seit dem 01.01.1970, 0:00 Uhr UTC angeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function bis2020 () {
  var jetzt = new Date();
  var Zeit = jetzt.getTime() / 1000;
  var Jahr2020 = new Date(2020, 0, 1, 0, 0, 0);
  var Endzeit = Jahr2020.getTime() / 1000;
  var Rest = Math.floor(Endzeit - Zeit);
  alert("Noch " + Rest + " Sekunden bis zum Jahr 2020");
}
</script>
</head><body>
<a href="javascript:bis2020()">Wie lange noch?</a>
</body></html>

Erläuterung:

Das Beispiel zeigt eine vollständige JavaScript- Seite Funktion. Die Funktion ermittelt die Anzahl Sekunden zwischen aktuellem Zeitpunkt und dem Jahr 2020. Dazu wird in jetzt eine neue Instanz von Date mit der aktuellen Zeit erzeugt. Für den Zeitpunkt, an dem das Jahr 2020 beginnt, wird eine zweite Objektinstanz von Date erzeugt, nämlich in Jahr2020. Dazu werden der Objektfunktion Date() entprechende Parameter übergeben. Über die beiden Objektnamen jetzt bzw. Jahr2020 wird dann die Methode Objektname.getTime() aufgerufen. getTime() liefert die Anzahl Millisekunden seit dem 01.01.1970 zurück. In der Variablen Zeit wird auf diese Weise die Anzahl Sekunden zwischen dem 01.01.1970 und dem aktuellen Zeitpunkt gespeichert, und in der Variablen Endzeit die Anzahl Sekunden zwischen dem 01.01.1970 und dem 01.01.2020. Die Differenz der beiden Werte wird in der Variablen Rest gespeichert und mit alert() in einem Meldungsfenster am Bildschirm ausgegeben.

Beachten Sie:

Alle Methoden, mit denen Sie einen aktuellen Zeitpunkt oder einen Teil davon, etwa den Wochentag oder den Monat, ermitteln können, beziehen sich auf die Zeit, die auf der Systemzeit des Anwenderrechners basiert. Denn JavaScript wird beim Anwender von dessen Browser ausgeführt. Die aktuelle Systemzeit des Server-Rechners können Sie mit JavaScript nicht ermitteln - das geht beispielsweise mit einem Kapitel Perl-Script.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getDate()

Liefert den Monatstag eines Datumsobjektes als Zahl zurück, beispielsweise 2, wenn im Datumsobjekt der 02.10.1991, 23:59:00 Uhr, gespeichert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var jetzt = new Date();
var Tag = jetzt.getDate();
document.write('<table border bgcolor="#CCFFFF"><tr><td><font size="7">');
document.write(Tag + "<\/font><\/td><\/tr><\/table>");
</script>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Mit jetzt.getDate() wird das aktuelle Tagesdatum innerhalb des Monats ermittelt. Der Rückgabewert des Aufrufs wird in der Variablen Tag gespeichert. Anschließend wird mit Hilfe von document.write() dynamisch eine kleine Tabelle in die Datei geschrieben, in der das aktuelle Tagesdatum formatiert ausgegeben wird. Damit ein Maskieren der " entfällt, wurde als Textbegrenzerzeichen das ' gewählt.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getDay()

Liefert den Wochentag eines Datumsobjektes als Zahl zurück, und zwar in Form von Zahlen zwischen 0 (für Sonntag), 1 (für Montag) usw. bis 6 (für Samstag), also beispielsweise 3, wenn im Datumsobjekt der 02.10.1991, 23:59:00 Uhr, gespeichert ist, da der 02.10.1991 ein Mittwoch war.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var jetzt = new Date();
var TagInWoche = jetzt.getDay();
var Wochentag = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch",
                          "Donnerstag", "Freitag", "Samstag");
document.write('<table border bgcolor="#CCFFFF"><tr><td><b>' +
  Wochentag[TagInWoche] + "<\/b><\/td><\/tr><\/table>");
</script>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Mit jetzt.getDay() wird der numerische Wert des aktuellen Wochentags ermittelt. Der Rückgabewert des Aufrufs wird in der Variablen TagInWoche gespeichert. Es soll jedoch ein richtiger Wochentagname ausgegeben werden. Deshalb wird im Beispiel ein Seite Array-Objekt mit deutschen Wochentagnamen erzeugt. Das erste Element ist dabei der Sonntag, da der Rückgabewert von getDay() ebenfalls intern mit Sonntag als erstem Wochentag rechnet.
Anschließend wird mit Hilfe von document.write() dynamisch eine kleine Tabelle in die Datei geschrieben, in der das aktuelle Tagesdatum formatiert ausgegeben wird. Beachten Sie, dass die Variable TagInWoche dabei als Index für die Ausgabe des richtigen Elements aus dem Array Wochentag benutzt wird.

JavaScript 1.3 Netscape 4.x MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getFullYear()

Liefert im Gegensatz zu nach unten getYear() das volle Jahr zurück. Im Internet Explorer ist dies bei Daten ab dem Jahr 2000 mit dem Resultat von getYear() identisch.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var jetzt = new Date();
var Jahr = jetzt.getFullYear();
document.write("Wir befinden uns im Jahr " + Jahr);
</script>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Mit jetzt.getFullYear() wird das volle aktuelle Jahr ermittelt. Der Rückgabewert des Aufrufs wird in der Variablen Jahr gespeichert. Anschließend wird zur Kontrolle ein Text mit der Ausgabe dieser Variablen ins Dokumentfenster geschrieben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getHours()

Liefert die Stunden der Uhrzeit eines Datumsobjektes als Zahl zurück, beispielsweise 23, wenn im Datumsobjekt der 02.10.1991, 23:59:00 Uhr, gespeichert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var jetzt = new Date();
var Std = jetzt.getHours();
if (Std >= 5 && Std < 12) {
  alert("Guten Morgen!");
} else if (Std >= 12 && Std < 18) {
  alert("Guten Tag!");
} else if (Std >= 18 && Std <= 23) {
  alert("Guten Abend!");
} else if (Std >= 0 && Std < 5) {
  alert("Zeit, ins Bett zu gehen!");
}
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Mit jetzt.getHours() wird die Stunde des Tages ermittelt. Der Rückgabewert des Aufrufs wird in der Variablen Std gespeichert. Anschließend wird ein Meldungsfenster mit einem tageszeitabhängigen Text ausgegeben, je nachdem in welchem Bereich der Wert von Std liegt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getMilliseconds()

Ermittelt die Anzahl der Millisekunden seit der letzten vollen Sekunde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function aktualisieren () {
  var zeit = new Date();
  var ms = zeit.getMilliseconds();
  document.Formular.Ausgabe.value = ms;
}
</script>
</head><body onload="document.Formular.Ausgabe.value = '0'">
<form name="Formular" action="">
<input name="Ausgabe" type="text">
<input type="button" value="aktualisieren" onclick="aktualisieren()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Klick-Button. Beim Anklicken des Buttons wird die Seite Funktion aktualisieren() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen zeit. Mit zeit.getMilliseconds() werden die Millisekunden seit der letzten vollen Sekunde ermittelt. Der Rückgabewert des Aufrufs wird in der Variablen ms gespeichert. Anschließend wird der Wert des Formulareingabefeldes mit dem ermittelten Wert belegt, um das Ergebnis anzuzeigen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getMinutes()

Liefert die Minuten der Uhrzeit eines Datumsobjektes als Zahl zurück, beispielsweise 59, wenn im Datumsobjekt der 02.10.1991, 23:59:00 Uhr, gespeichert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var jetzt = new Date();
var Std = jetzt.getHours();
var Min = jetzt.getMinutes();
var StdAusgabe = ((Std < 10) ? "0" + Std : Std);
var MinAusgabe = ((Min < 10) ? "0" + Min : Min);
alert("Bei Ihnen ist es jetzt " + StdAusgabe + "." + MinAusgabe + " Uhr");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Mit jetzt.getHours() wird die Stunde des Tages ermittelt, mit jetzt.getMinutes() die Minutenzahl. Der Rückgabewert der Aufrufe wird in den Variablen Std und Min gespeichert. Dann wird die Stundenzahl und die Minutenzahl für die Ausgabe formatiert. Wenn die Anzahl der Stunden oder Minuten kleiner 10 ist, wird eine 0 davorgesetzt. Schließlich wird ein Meldungsfenster mit der aktuellen Uhrzeit ausgegeben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getMonth()

Liefert den Monat eines Datumsobjektes als Zahl zurück, beispielsweise 9, wenn im Datumsobjekt der 02.10.1991, 23:59:00 Uhr, gespeichert ist. Beachten Sie, dass die Monatszählung bei 0 beginnt. 0 ist also Januar, 1 ist Februar usw.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var jetzt = new Date();
var Jahresmonat = jetzt.getMonth();
var Monat = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni",
                      "Juli", "August", "September", "Oktober", "November", "Dezember");
document.write('<table border bgcolor="#CCFFFF"><tr><td><b>');
document.write(Monat[Jahresmonat] + "<\/b><\/td><\/tr><\/table>");
</script>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Mit jetzt.getMonth() wird der numerische Wert des aktuellen Monats ermittelt. Der Rückgabewert des Aufrufs wird in der Variablen Jahresmonat gespeichert. Es soll jedoch ein richtiger Monatsname ausgegeben werden. Deshalb wird im Beispiel ein Seite Array-Objekt mit deutschen Monatsnamen erzeugt.
Anschließend wird mit Hilfe von document.write() dynamisch eine kleine Tabelle in die Datei geschrieben, in der der aktuelle Monat formatiert ausgegeben wird. Beachten Sie, dass die Variable Jahresmonat dabei als Index für die Ausgabe des richtigen Elements aus dem Array Monat benutzt wird. Da auch bei Arrays bei 0 zu zählen begonnen wird, wird beispielsweise "Januar" geschrieben, wenn in Jahresmonat der Wert 0 gespeichert ist, oder "Februar", wenn in Jahresmonat der Wert 1 gespeichert ist.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getSeconds()

Liefert die Sekunden der Uhrzeit eines datumsobjektes als Zahl zurück, beispielsweise 0, wenn im Datumsobjekt der 02.10.1991, 23:59:00 Uhr, gespeichert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zaehler = 0;
function Anzeige () {
  var jetzt = new Date();
  var Sekunden = jetzt.getSeconds();
  alert(Sekunden);
  Zaehler = Zaehler + 1;
  if (Zaehler < 3)
    Anzeige();
}

Anzeige();
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert eine Funktion Anzeige(). Darin wird ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt erzeugt. Mit jetzt.getSeconds() wird die Sekundenzahl innerhalb der aktuellen Minute der Uhrzeit ermittelt. Der Rückgabewert des Aufrufs wird in der Variablen Sekunden gespeichert. Dann wird die Sekundenzahl ausgegeben. Nachdem der Anwender das Meldungsfenster mit der Anzeige bestätigt hat, wird die Variable Zaehler um 1 erhöht. Solange diese Variable kleiner 3 ist, wird die Funktion Anzeige() erneut aufgerufen. Dabei werden alle Anweisungen innerhalb der Funktion wiederholt.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getTime()

Liefert die Anzahl Millisekunden als Zahl zurück, die seit dem 1. Januar 1970, 0:00:00 Uhr UTC, bis zu dem im Datumsobjekt gespeicherten Zeitpunkt vergangen sind.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var jetzt = new Date();
alert(jetzt.getTime());
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Mit alert(jetzt.getTime()) wird die aktuelle Anzahl von Millisekunden, die seit dem 01.01.1970 (UTC) vergangen sind, in einem Meldungsfenster ausgegeben. Probieren Sie das ruhig mal aus, um ein Gefühl für die Größenordnung der Werte zu bekommen, die getTime() liefert.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getTimezoneOffset()

Liefert den Unterschied zwischen lokaler Rechnerzeit und Greenwich Meridian Time (GMT) in Anzahl Minuten zurück. Je nach lokaler Zeitzone, die in der Systemzeit des Anwenderrechners definiert ist, ist der Rückgabewert positiv oder negativ.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var jetzt = new Date();
var Unterschied = jetzt.getTimezoneOffset() / 60;
alert("Unterschied zu Greenwich: " + Unterschied + " Stunde(n)");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel möchte den Unterschied zwischen Greenwich-Zeit und lokaler Zeit in Stunden ausgeben. Dazu erzeugt es ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Dann wird die Methode getTimezoneOffset() für dieses Datumobjekt aufgerufen. Um keine Minutenzahlen, sondern Stundenzahlen zu erhalten, wird der Rückgabewert gleich durch 60 geteilt. Das Ergebnis wird in der Variablen Unterschied gespeichert. In einem Meldungsfenster wird das Ergebnis anschließend ausgegeben.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getUTCDate()

Diese Methode ist funktional identisch mit nach oben getDate(), liefert ihren Wert jedoch nicht für die lokale Zeit, sondern für die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getUTCDay()

Diese Methode ist funktional identisch mit nach oben getDay(), liefert ihren Wert jedoch nicht für die lokale Zeit, sondern für die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getUTCFullYear()

Diese Methode ist funktional identisch mit nach oben getFullYear(), liefert ihren Wert jedoch nicht für die lokale Zeit, sondern für die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getUTCHours()

Diese Methode ist funktional identisch mit nach oben getHours(), liefert ihren Wert jedoch nicht für die lokale Zeit, sondern für die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getUTCMilliseconds()

Diese Methode ist funktional identisch mit nach oben getMilliseconds(), liefert ihren Wert jedoch nicht für die lokale Zeit, sondern für die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getUTCMinutes()

Diese Methode ist funktional identisch mit nach oben getMinutes(), liefert ihren Wert jedoch nicht für die lokale Zeit, sondern für die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getUTCMonth()

Diese Methode ist funktional identisch mit nach oben getMonth(), liefert ihren Wert jedoch nicht für die lokale Zeit, sondern für die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getUTCSeconds()

Diese Methode ist funktional identisch mit nach oben getSeconds(), liefert ihren Wert jedoch nicht für die lokale Zeit, sondern für die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 getYear()

Liefert die seit 1900 vergangenen Jahre eines Datumsobjektes als Zahl zurück, beispielsweise 91, wenn im Datumsobjekt der 02.10.1991, 23:59:00 Uhr, gespeichert ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var jetzt = new Date();
var Jahr = jetzt.getYear();
if (Jahr < 999)
  Jahr += 1900;
document.write("<h1>" + Jahr + "<\/h1>");
</script>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Mit jetzt.getYear() wird das aktuelle Jahr seit 1900 ermittelt. Der Rückgabewert des Aufrufs wird in der Variablen Jahr gespeichert. Da manche Browser die Jahreszahl vierstellig ausgeben, muss dies, bevor die Jahrezahl um 1900 erhöht wird, überprüft werden. Anschließend wird mit Hilfe von document.write() dynamisch eine Zeile in die Datei geschrieben, in der das aktuelle Jahr formatiert ausgegeben wird.

Beachten Sie:

In den verschiedenen JavaScript-Spezifikationen wurde diese Methode unterschiedlich definiert. Dementsprechend unterscheidet sich das Verhalten der Browser. Ursprünglich galt in JavaScript Version 1.0 die Regel, dass von der Jahreszahl nach christlicher Zeitrechnung einfach 1900 abgezogen werden. Für das Jahr 1995 sollte getYear() demnach 95 wiedergeben, für das Jahr 2001 die Zahl 101. In JavaScript Version 1.1 wurde hingegen definiert, dass Jahreszahlen ab dem Jahr 2000 immer vierstellig zurückgegeben werden, für Jahre davor gilt weiterhin die alte Regel. Dieser Definition folgt der Internet Explorer bis heute. Ab JavaScript 1.3 gilt schließlich wieder alleinig die ursprüngliche Regelung von JavaScript 1.0, nach der von der vierstelligen Zahl 1900 abgezogen werden. Die meisten aktuellen Browser außer dem Internet Explorer folgen dieser Regelung. getYear() ist aus diesen Gründen heutzutage obsolet. Verwenden Sie möglichst die eindeutige Methode nach oben getFullYear().

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 parse()

Ermittelt aus einer als Parameter zu übergebenden Zeichenkette Zeitpunkt die Anzahl Millisekunden, die zwischen dem 01.01.1970, 0:00:00 Uhr UTC, und dem übergebenen Zeitpunkt verstrichen sind. Beachten Sie, dass Sie zum Aufrufen dieser Methode kein neues Date-Objekt erzeugen müssen, sondern direkt mit Date arbeiten können.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var DreissigJahre = Date.parse("Tue, 1 Jan 2000 00:00:00 GMT");
alert(DreissigJahre);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ermittelt die Anzahl Millisekunden zwischen dem 01.01.1970 und dem 01.01.2000. Das Ergebnis wird in der Variablen DreissigJahre gespeichert. Zur Kontrolle wird die Zahl in einem Meldungsfenster ausgegeben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setDate()

Ändert den Monatstag, der in einem Datumsobjekt gespeichert ist. Der neue Monatstag ist als Parameter zu übergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 1 und 31 übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zeit = new Date("March 10, 1998 22:48:00");
var Tag = Zeit.getDate();
alert(Tag);
Zeit.setDate(1);
Tag = Zeit.getDate();
alert(Tag);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt Zeit mit einem bestimmten Zeitpunkt, der im GMT-Format angegeben wird. Zur Kontrolle ermittelt das Beispiel den aktuellen Tag im Monat aus dem definierten Zeitpunkt und gibt ihn in einem Meldungsfenster aus. Dann wird die Methode setDate() auf den Objektnamen Zeit angewendet. Im Beispiel wird der Tag des Monats auf 1 gesetzt. Anschließend wird zur Kontrolle der neue Tag im Monat ermittelt und anschließend ausgegeben.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setFullYear()

Ändert die Jahreszahl, die in einem Datumsobjekt gespeichert ist. Das neue Jahr ist als Parameter zu übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var zeit = new Date();
var zukunft = zeit.setFullYear(2037);
document.write("irgendwann schreiben wir das Jahr " + zeit.getUTCFullYear());
</script>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt zeit. Dann wird die Methode setFullYear() auf den Objektnamen zeit angewendet. Im Beispiel wird das Jahr auf 2037 gesetzt. Anschließend wird das Ergebnis zur Kontrolle ins Dokument geschrieben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setHours()

Ändert die Stunden der Uhrzeit, die in einem Datumsobjekt gespeichert sind. Die Stundenzahl ist als Parameter zu übergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und 23 übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zeit = new Date();
var Std = Zeit.getHours();
alert(Std);
Zeit.setHours(23);
Std = Zeit.getHours();
alert(Std);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt. Zur Kontrolle ermittelt das Beispiel die Stundenzahl aus der Tageszeit und gibt sie in einem Meldungsfenster aus. Dann wird die Methode setHours() auf den Objektnamen Zeit angewendet. Im Beispiel wird die Stundenzahl der Uhrzeit auf 23 gesetzt. Anschließend wird zur Kontrolle der neue Stundenanteil an der Uhrzeit ermittelt und anschließend ausgegeben.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setMilliseconds()

Ändert die Millisekunden des Zeitpunkts, der in einem Datumsobjekt gespeichert ist. Die Millisekundenzahl ist als Parameter zu übergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und 999 übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function millisekundenSetzen () {
  zeit = new Date();
  milli =
    prompt("Millisekunden bisher: " + zeit.getMilliseconds() + "\nBitte neuen Wert eingeben", "");
  zeit.setMilliseconds(milli);
  alert("Millisekunden jetzt: " + zeit.getMilliseconds());
}
</script>
</head><body>
<p>Klicken Sie auf diesen Verweis: <a href="javascript:millisekundenSetzen()">millisekundenSetzen()</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis auf den der Anwender klicken soll. Dieser Verweis ruft eine Seite Funktion namens millisekundenSetzen() auf, die im Dateikopf notiert ist. Diese Funktion erzeugt ein neues Datumsobjekt zeit mit dem aktuellen Zeitpunkt. Anschließend zeigt es mit den Methoden Seite prompt() und nach oben getMilliseconds() die aktuell in diesem Objekt gespeicherte Anzahl von Millisekunden an und fordert den Benutzer auf, eine neue Zahl einzugeben, welche in milli gespeichert wird. Diese Zahl wird dann mit zeit.setMilliseconds(milli) in dem Objekt zeit gespeichert. Zum Schluss zeigt die Funktion dem Benutzer noch einmal die nun im Objekt gespeicherte Anzahl an Millisekunden zur Bestätigung an, diesmal mit der Methode [image] alert().

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setMinutes()

Ändert die Minuten der Uhrzeit, die in einem Datumsobjekt gespeichert sind. Die Minutenzahl ist als Parameter zu übergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und 59 übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Andersrum () {
  var Zeit = new Date();
  var Min = Zeit.getMinutes();
  var MinNeu = Zeit.setMinutes(60 - Min);
  var Min = Zeit.getMinutes();
  return (Min);
}
</script>
</head><body>
<a href="javascript:alert(Andersrum())">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird der Rückgabewert der Funktion Andersrum() ausgegeben, die in einem Script-Bereich im Dateikopf notiert ist. Dort wird ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt erzeugt. Aus dem Zeitpunkt wird die Minutenzahl aus der Uhrzeit ermittelt. Mit der Methode setMinutes() wird die Minutenzahl innerhalb der Stunde umgekehrt. War es vorher beispielsweise 18.12 Uhr, ist es anschließend 18.48 Uhr. Der neue Minutenanteil an der Uhrzeit wird noch mal ermittelt und anschließend zurückgegeben. Eine solche Funktion könnte etwa als Teil einer rückwärts gehenden Uhr sinnvoll sein.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setMonth()

Ändert den Monat, der in einem Datumsobjekt gespeichert ist. Der gewünschte Wert ist als Parameter zu übergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und 11 übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function andererMonat () {
  var Zeit = new Date();
  var Tag = Zeit.getDate();
  Zeit.setMonth(Math.round(Math.random() * 11));
  var Monat = Zeit.getMonth();
  return (Tag + "." + (Monat + 1) + ".");
}
</script>
</head><body>
<a href="javascript:alert(andererMonat())">Test</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird der Rückgabewert der Funktion andererMonat() ausgegeben, die in einem Script-Bereich im Dateikopf notiert ist. Dort wird ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt erzeugt. Mit der Methode setMonth() wird ein neuer Monat gesetzt - und zwar per Zufall. Dazu wird mit Hilfe von Seite Math.round() und Seite Math.random() eine zufällige Ganzzahl zwischen 0 und 11 ermittelt. Diese Zahl wird der setMonth()-Methode als Parameter übergeben. Der neue Monatszahl wird noch mal ermittelt und anschließend so formatiert zurückgegeben, dass ein sinnvolles Tagesdatum angezeigt wird.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setSeconds()

Ändert die Sekunden der Uhrzeit, die in einem Datumsobjekt gespeichert sind. Die Sekundenzahl ist als Parameter zu übergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und 59 übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Uhrzeit () {
  var Zeit = new Date();
  var Std = Zeit.getHours();
  var Min = Zeit.getMinutes();
  var Sek = Zeit.getSeconds();
  var SekNeu = Zeit.setSeconds(Math.floor(Sek / 10));
  Sek = Zeit.getSeconds();
  return (Std + ":" + Min + ":" + Sek + "0");
}
</script>
</head><body>
<a href="javascript:alert(Uhrzeit())">Uhrzeit</a>
</body></html>

Erläuterung:

Das Beispiel enthält einen Verweis. Beim Anklicken des Verweises wird der Rückgabewert der Funktion Uhrzeit() ausgegeben, die in einem Script-Bereich im Dateikopf notiert ist. Das ist die aktuelle Uhrzeit, jedoch so ausgegeben, dass Sekunden immer nur in 10er-Schritten ausgegeben werden. Eine Ausgabe wie 18.10:37 ist also nicht möglich, die Funktion macht 18:10:30 daraus. Zu diesem Zweck wird in der Funktion ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt erzeugt. Aus dem Zeitpunkt werden die Bestandteile der Uhrzeit ermittelt. Mit der Methode setSeconds() wird die Sekundenzahl behandelt. Durch eine kleine mathematische Operation wird aus der möglichen Sekundenzahl zwischen 0 und 59 eine Zahl zwischen 0 und 5. Der neue Sekundenanteil an der Uhrzeit wird noch mal ermittelt. Beim Zurückgeben der Uhrzeit wird an die einstellige Sekundenzahl eine 0 angehängt, denn "in Wirklichkeit" stellt die einstellige Zahl ja den Zehneranteil an den Sekunden dar.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setTime()

Setzt den Zeitpunkt, der in einem Datumsobjekt gespeichert ist. Erwartet als Parameter eine Zahl, die den neuen Zeitpunkt markiert. Die Zahl wird als Anzahl Millisekunden seit dem 01.01.1970, 0:00:00 Uhr interpretiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zeit = new Date();
var AbsolutJetzt = Zeit.getTime();
var AbsolutDann = AbsolutJetzt + (100 * 24 * 60 * 60 * 1000);
Zeit.setTime(AbsolutDann);
var Jahr = Zeit.getFullYear();
var Monat = Zeit.getMonth() + 1;
var Tag = Zeit.getDate();
alert("in 100 Tagen ist der " + Tag + "." + Monat + "." + Jahr);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt aus, welches Datum von jetzt ab in 100 Tagen aktuell sein wird. Zu diesem Zweck wird ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt erzeugt. Mit getTime() wird zunächst die absolute Anzahl Millisekunden seit dem 01.01.1970 für den aktuellen Zeitpunkt ermittelt und in der Variablen AbsolutJetzt gespeichert. Anschließend wird zu dieser gespeicherten Zahl das Produkt aus 100 * 24 * 60 * 60 * 1000 hinzu addiert. Das ist die Anzahl Millisekunden für 100 Tage. Das Ergebnis wird in der Variablen AbsolutDann gespeichert. Dieser Wert wird der Methode setTime() übergeben. Dadurch wird die Zeit auf einen Zeitpunkt in 100 Tagen gesetzt. Mit Hilfe entsprechender Befehle werden dann aus dem neu gesetzten Zeitpunkt die Werte für den Monatstag, den Monat und das Jahr ermittelt. Das Ergebnis wird in einem Meldungsfenster ausgegeben.

Beachten Sie:

Die Browserangaben beziehen sich auf die Methode getTime() selbst. Das Beispiel verwendet nach oben getFullYear() zum Ermitteln des Jahres. Da diese Methode im Gegensatz zu nach unten getYear() von sehr alten Browsern nicht unterstützt wird, funktioniert das Beispiel nicht in allen Browsern, die getTime() kennen.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setUTCDate()

Diese Methode ist funktional identisch mit nach oben setDate(). Der gesetzte Wert bedeutet jedoch nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setUTCFullYear()

Diese Methode ist funktional identisch mit nach oben setFullYear(). Der gesetzte Wert bedeutet jedoch nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setUTCHours()

Diese Methode ist funktional identisch mit nach oben setHours(). Der gesetzte Wert bedeutet jedoch nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setUTCMilliseconds()

Diese Methode ist funktional identisch mit nach oben setMilliseconds(). Der gesetzte Wert bedeutet jedoch nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setUTCMinutes()

Diese Methode ist funktional identisch mit nach oben setMinutes(). Der gesetzte Wert bedeutet jedoch nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setUTCMonth()

Diese Methode ist funktional identisch mit nach oben setMonth(). Der gesetzte Wert bedeutet jedoch nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.3 Netscape 4.x MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setUTCSeconds()

Diese Methode ist funktional identisch mit nach oben setSeconds(). Der gesetzte Wert bedeutet jedoch nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean Time (GMT) genannt.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 setYear()

Ändert das Jahr, das in einem Datumsobjekt gespeichert ist. Die Jahreszahl ist als Parameter zu übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zeit = new Date();
var AbsolutJetzt = Zeit.getTime();
var Jahr = Zeit.getFullYear();
Zeit.setYear(Jahr + 1);
var AbsolutDann = Zeit.getTime();
var Differenz = AbsolutDann - AbsolutJetzt;
alert("bis zur gleichen Zeit in einem Jahr sind es " + Differenz + "ms");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt die Anzahl der Millisekunden vom aktuellen Zeitpunkt bis zum gleichen Zeitpunkt in einem Jahr aus. Zu diesem Zweck wird ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt erzeugt. Der Absolutzeitpunkt in Millisekunden wird mit getTime() ermittelt und in der Variablen AbsolutJetzt gespeichert. Mit getFullYear() wird das aktuelle Jahr ermittelt. Dann wird der Zeitpunkt mit setYear() um ein Jahr in die Zukunft verschoben. Der neue Zeitpunkt in Millisekunden wird wieder mit getTime() ermittelt. Das Ergebnis wird in der Variablen AbsolutDann gespeichert. Durch die Differenz zwischen den gespeicherten Werten von AbsolutDann und AbsolutJetzt wird die Anzahl der Millisekunden bis zum gleichen Zeitpunkt in einem Jahr ermittelt. Das Ergebnis wird in einem Meldungsfenster ausgegeben.

Beachten Sie:

Der Internet Explorer unterstützt setYear() bereits in Version 3. Im vorliegenden Beispiel wird allerdings getFullYear() verwendet, um die Jahreszahl korrekt auszulesen. Daher funktioniert das Beispiel erst ab Version 5.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 toGMTString()

Wandelt das in einem Datumsobjekt gespeicherten Datum in eine Zeichenkette nach dem IETF-Standard um. Das Datum wird als UTC-Zeitpunkt ausgegeben. Wenn im Datumsobjekt beispielsweise der 02.10.1991, 23:59:00 Uhr (Mitteleuropäische Zeit) gespeichert ist, liefert diese Methode zurück: "Wed, 02 Oct 1991 22:59:00 GMT".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Jetzt = new Date();
alert(Jetzt.toGMTString());
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt Jetzt mit dem aktuellen Zeitpunkt. Dann gibt es das Ergebnis der Methode Jetzt.toGMTString() als Meldungsfenster aus. Beispiel einer Ausgabe:
Wed, 11 Mar 1998 18:17:28 GMT (Netscape)
Wed, 11 Mar 1998 18:17:28 UTC (Internet Explorer)

Beachten Sie:

Die Sommerzeit wird von dieser Methode nicht berücksichtigt.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 toLocaleString()

Wandelt die in Objektname gespeicherten Daten in eine Zeichenkette um. Die zurückgegebene Zeichenkette berücksichtigt die lokale Uhrzeit. Wenn beispielsweise in Objektname der 2.10.1991 23:59:00 gespeichert ist, liefert diese Methode zurück: "10/2/91 23:59".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Jetzt = new Date();
alert(Jetzt.toLocaleString());
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel erzeugt ein neues Datumobjekt Jetzt mit dem aktuellen Zeitpunkt. Dann gibt es das Ergebnis der Methode Jetzt.toLocaleString() als Meldungsfenster aus. Beispiel einer Ausgabe:
03/11/1998 19:21:22

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 UTC()

Liefert die Anzahl Millisekunden zurück, die zwischen dem 01.01.1970 und einem gewünschten Zeitpunkt verstrichen sind. Der Zeitpunkt ist in Form von Parametern zu übergeben und es muss sich um einen UTC-Zeitpunkt handeln. Alle Parameter sind als Zahlenwerte zu übergeben. Die Angabe der Datumswerte ist zwingend, die der Uhrzeitwerte optional. Die Parameter im einzelnen:
1. Jahr = Jahreszahl.
2. Monat = Monatszahl zwischen 0 und 11.
3. Tag = Tageszahl zwischen 1 und 31.
4. Stunden = (optional) Stunde der Uhrzeit zwischen 0 und 23.
5. Minuten = (optional) Minuten der Uhrzeit zwischen 0 und 59.
6. Sekunden = (optional) Sekunden der Uhrzeit zwischen 0 und 59.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write(Date.UTC(1998, 2, 11, 19, 26, 00));
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt mit document.write() die Anzahl der Millisekunden in die Datei, die zwischen dem 01.01.1970, 0:00 Uhr UTC, und dem 11.03.1998, 19:26 Uhr UTC vergangen sind.

nach oben
weiter | Seite Function
zurück | Seite Boolean
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / Function

SELFHTML

Function
Informationsseite

nach unten Allgemeines zur Verwendung

Eigenschaften:

nach unten arguments (Argumentnamen-Array)
nach unten arity (Anzahl Argumente)
nach unten caller (Namen der aufrufenden Funktion)
nach unten

Function: Allgemeines zur Verwendung

Über das Objekt Function haben Sie Zugriff auf Eigenschaften einer JavaScript- Seite Funktion. JavaScript-Funktionen werden dadurch also selbst Gegenstand von JavaScript-Anweisungen. Sinnvoll ist das Arbeiten mit dem Function-Objekt beispielsweise im Zusammenhang mit einer variablen Anzahl von Parametern in einer Funktion.

Ein neues Function-Objekt können Sie extra erzeugen.

Beispiel:

var Farbe = new Function("NeueFarbe", "document.bgColor = NeueFarbe;");

Beispielentsprechung in normaler Schreibweise:

function Farbe (NeueFarbe) {
  document.bgColor = NeueFarbe;
}

Beispielaufruf für beide Fälle:

<a href="javascript:Farbe('#FFCC99')">Neue Hintergrundfarbe</a>

Erläuterung:

Betrachten Sie in dem Beispiel zunächst den mittleren Teil ("Beispielentsprechung in normaler Schreibweise"). Das ist die normale Definition einer Funktion. Im Teil darüber wird die gleiche Funktion definiert, jedoch in Form eines Funktionsobjekts. Das Funktionsobjekt wird mit new Function(...) erzeugt. Der Rückgabewert wird in einer Variablen gespeichert, im Beispiel in der Variablen Farbe. Als Parameter erwartet die Function-Funktion eine beliebige Anzahl Parameter, die bis zum vorletzten als Parameter interpretiert werden, die die Funktion erwarten soll. Im Beispiel gibt es einen solchen Parameter, nämlich den Parameter NeueFarbe. Der letzte Parameter, der der Function-Funktion übergeben wird, ist eine Zeichenkette, die den gesamten Funktionsinhalt darstellt, also die JavaScript-Anweisungen innerhalb der Funktion.

Eine Variable, in der eine Funktion gespeichert ist, wie im Beispiel die Variable Farbe, können Sie genauso aufrufen wie eine Funktion. Der dritte Teil ("Beispielaufruf für beide Fälle") gilt tatsächlich für beide Fälle, denn im einen Fall wird die Variable Farbe aufgerufen, in der eine ganze Funktion gespeichert ist, und im anderen Fall wird eine Funktion namens Farbe() aufgerufen.

Sie müssen jedoch kein neues Funktionsobjekt erzeugen, sondern können auch direkt Eigenschaften des Funktionsobjekts auf eine Funktion anwenden.

Beispiel für direktes Verwenden von Funktionseigenschaften:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
function HTMLListe (Typ) {
  document.write("<" + Typ + ">");
  for (var i = 1; i < HTMLListe.arguments.length; i++)
    document.write("<li>" + HTMLListe.arguments[i] + "</li>");
  document.write("</" + Typ + ">");
}

HTMLListe("ol", "eins", "zwei", "drei");
</script>
</body></html>

Das Beispiel schreibt dynamisch eine HTML-Liste, entweder als Aufzählungsliste oder als nummerierte Liste, in die Datei. Dies geschieht in einer Funktion namens HTMLListe(). Unterhalb der Funktion steht der Aufruf der Funktion. Dabei werden vier Parameter übergeben. Die Funktion HTMLListe() erwartet jedoch nur einen Parameter, nämlich den Parameter Typ. Dabei sollte man ul oder ol übergeben. Abhängig davon erzeugt die Funktion eine Aufzählungsliste oder eine nummerierte Liste.

Innerhalb der Funktion wird jedoch mit HTMLListe.arguments.length die tatsächliche Anzahl der übergebenen Elemente abgefragt. Die Funktion nimmt an, dass alle Parameter ab dem zweiten Elemente der gewünschten Liste sind. Die Funktion schreibt mit document.write()-Befehlen die entsprechenden Listenpunkte und setzt dabei reihenweise die übergebenen Parameter ein, da diese Aktion innerhalb einer for-Schleife erfolgt.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen arguments

Speichert die Argumente, die einer Funktion übergeben wurden, in einem Array, also einer Kette von Elementen. Jedes Element stellt ein Argument dar. Die Eigenschaft ist nur innerhalb der Funktion verfügbar, auf die sie sich bezieht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
function Test (Name, Vorname) {
  document.write("Funktion bekam " + Test.arguments.length + " Argumente");
  for (var i = 0; i < Test.arguments.length; ++i)
    document.write("<BR>" + Test.arguments[i]);
}

Test("Muenz", "Stefan");
</script>
</body></html>

Erläuterung:

Das Beispiel definiert eine Funktion Test(), die zwei Parameter übergeben bekommt. Die Funktion schreibt dynamisch in die HTML-Datei, wie viele Parameter sie erwartet, und danach in einer for-Schleife, welche Werte übergeben wurden.

Mit Funktionsname.arguments.length ermitteln Sie die Anzahl der tatsächlich übergebenen Parameter (nicht die Anzahl der erwarteten Parameter).

Mit Funktionsname.arguments[0] sprechen Sie den Wert des ersten übergebenen Parameters an, mit Funktionsname.arguments[1] den des zweiten Parameters usw.

Beachten Sie:

Seit dem JavaScript-Standard Version 1.4 ist arguments keine Eigenschaft des Funktionsobjekts mehr, sondern steht in der Funktion als lokale Variable zur Verfügung, die Sie einfach über arguments statt Funktionsobjekt.arguments ansprechen können.

JavaScript 1.2 Netscape 4.0 Mozilla Firefox 1 Lesen arity

Speichert die Anzahl Argumente, die eine Funktion erwartet. Die Eigenschaft ist nur außerhalb der Funktion verfügbar, auf die sie sich bezieht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test (Name, Vorname) {
  return (Vorname + " " + Name);
}

alert("Funktion erwartet " + Test.arity + " Argumente");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert eine Funktion Test(), die zwei Parameter erwartet. Die Funktion wird im Beispiel gar nicht aufgerufen, dafür wird in einem Meldungsfenster ausgegeben, wie viele Argumente die Funktion Test() erwartet. Dazu wird die Eigenschaft arity auf die gewünschte Funktion angewendet.

Beachten Sie:

Mit dem JavaScript-Standard Version 1.4 wurde arity als veraltet erklärt und durch die Eigenschaft length ersetzt. Diese Eigenschaft können Sie genauso wie arity verwenden, z.B. Funktionsobjekt.length.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Mozilla Firefox 1 Lesen caller

Speichert die gesamte Funktion, von der aus die aktuelle Funktion aufgerufen wird. Hat den Wert null, falls der Aufruf direkt von einem Event-Handler oder beim Einlesen der Datei von außerhalb einer anderen Funktion erfolgte. Die Eigenschaft ist nur innerhalb der Funktion verfügbar, auf die sie sich bezieht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  alert(Test.caller);
}

function Aufruf () {
  Test();
}
</script>
</head><body>
<a href="javascript:Aufruf()">Wer ruft Test()?</a>
</body></html>

Erläuterung:

Das Beispiel definiert im Dateikopf zwei Funktionen, eine Funktion Test() und eine Funktion Aufruf(). Die Funktion Test() tut nichts anderes als auszugeben, von wo sie aufgerufen wurde, die Funktion Aufruf() nichts anderes, als Test() aufzurufen. In der Datei ist ferner ein Verweis notiert. Beim Anklicken des Verweises wird die Funktion Aufruf() aufgerufen, die wiederum Test() aufruft, woraufhin Test() den gesamten Code der Funktion Aufruf() ausgibt.

Beachten Sie:

Die caller-Eigenschaft wurde in JavaScript 1.3 als veraltet ("deprecated") erklärt. Ein Ersatz existiert nicht.

nach oben
weiter | Seite Math
zurück | Seite Date
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / Math

SELFHTML

Math
Informationsseite

nach unten Allgemeines zur Verwendung

Eigenschaften:

nach unten E (Eulersche Konstante)
nach unten LN2 (natürlicher Logarithmus von 2)
nach unten LN10 (natürlicher Logarithmus von 10)
nach unten LOG2E (konstanter Logarithmus von 2)
nach unten LOG10E (konstanter Logarithmus von 10)
nach unten PI (Konstante PI)
nach unten SQRT1_2 (Konstante für Quadratwurzel aus 0,5)
nach unten SQRT2 (Konstante für Quadratwurzel aus 2)

Methoden:

nach unten abs() (positiver Wert)
nach unten acos() (Arcuscosinus)
nach unten asin() (Arcussinus)
nach unten atan() (Arcustangens)
nach unten ceil() (nächsthöhere ganze Zahl)
nach unten cos() (Cosinus)
nach unten exp() (Exponentialwert)
nach unten floor() (nächstniedrigere ganze Zahl)
nach unten log() (Anwendung des natürlichen Logarithmus)
nach unten max() (größere von zwei Zahlen)
nach unten min() (kleinere von zwei Zahlen)
nach unten pow() (Zahl hoch Exponent)
nach unten random() (0 bis 1 per Zufall)
nach unten round() (kaufmännische Rundung einer Zahl)
nach unten sin() (Sinus)
nach unten sqrt() (Quadratwurzel)
nach unten tan() (Tangens)
nach unten

Allgemeines zur Verwendung

Mit dem Objekt Math können Sie Berechnungen, auch komplexe wissenschaftlicher oder kaufmännischer Art, durchführen. Dazu stehen Ihnen verschiedene mächtige Methoden und Funktionen sowie einige Eigenschaften zur Verfügung.

Eine Instanz von Math brauchen Sie nicht eigens erzeugen. Sie können Eigenschaften und Methoden von Math direkt verwenden.

Schema:

x = Math.Eigenschaft;
x = Math.Methode(Parameter);

Erläuterung:

Mit Zahl = 10 * Math.PI beispielsweise steht in der Variablen Zahl hinterher das Produkt aus der Zahl PI und 10. Mit Wurzel = Math.sqrt(10) steht in der Variablen Wurzel hinterher das Ergebnis der Quadratwurzel aus 10. Notieren Sie vor jedem Aufruf einer Eigenschaft oder Methode des Math-Objekts Math (großgeschrieben).

Bei jedem Zahlen-Parameter, den Sie einer Methode von Math übergeben, kann es sich um eine feste Zahl (z.B. 25 oder 0.123) handeln, um eine numerische Variable (z.B. x) oder um einen Rechenausdruck (z.B. 7 * 5+ 0.3). Auch Rechenausdrücke mit Variablen sind erlaubt (z.B. x * i + 1).

Beachten Sie, dass die Anzahl der Nachkommastellen in Programmiersprachen wie JavaScript systembedingt beschränkt ist (auf den heutigen Systemen haben solche Zahlen normalerweise 32 Bit Länge). JavaScript unterscheidet nicht wie manche anderen Programmiersprachen zwischen verschiedenen Typen numerischer Werte (Integer, Float usw.). Eventuell erforderliche Typumwandlungen erfolgen automatisch.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen E

Die Eulersche Konstante - Wert ca. 2,718.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write(Math.E);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen LN2

Der natürliche Logarithmus von 2 - Konstante mit einem Wert von ca. 0,693.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write(Math.LN2);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen LN10

Der natürliche Logarithmus von 10 - Konstante mit einem Wert von ca. 2,302.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write(Math.LN10);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen LOG2E

Logarithmus der Eulerschen Konstante zur Basis 2 - Konstante mit einem Wert von ca. 1,442.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write(Math.LOG2E);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen LOG10E

Logarithmus der Eulerschen Konstante zur Basis 10 - Konstante mit einem Wert von ca. 0,434.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write(Math.LOG10E);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen PI

Konstante Pi für Kreisberechnungen mit einem Wert von ca. 3,14159.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write(Math.PI);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen SQRT1_2

Konstante für Quadratwurzel aus 0,5 - Wert von ca. 0,707.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write(Math.SQRT1_2);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen SQRT2

Konstante für Quadratwurzel aus 2 - Wert von ca. 1,414.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write(Math.SQRT2);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 abs()

Erwartet als Parameter eine Zahl. Liefert in jedem Fall den positiven Wert der Zahl zurück. War dieser vorher negativ, wird er positiv.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.abs(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von abs() auf den Wert aus dem ersten Eingabefeld. Wird im ersten Feld eine negative Zahl eingegeben, erscheint im zweiten Feld die gleiche Zahl, allerdings positiv.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 acos()

Erwartet als Parameter eine Zahl. Liefert den Arcuscosinus dieser Zahl in der Einheit Bogenmaß (Radiant) zurück. Achten Sie darauf, dass Sie sinnvolle Werte zwischen -1 und +1 übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.acos(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von acos() auf den Wert aus dem ersten Eingabefeld.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 asin()

Erwartet als Parameter eine Zahl. Liefert den Arcussinus dieser Zahl in der Einheit Bogenmaß (Radiant) zurück. Achten Sie darauf, dass Sie sinnvolle Werte zwischen -1 und +1 übergeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.asin(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von asin() auf den Wert aus dem ersten Eingabefeld.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 atan()

Erwartet als Parameter eine Zahl. Liefert den Arcustangens dieser Zahl in der Einheit Bogenmaß (Radiant) zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.atan(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von atan() auf den Wert aus dem ersten Eingabefeld.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 ceil()

Erwartet als Parameter eine Zahl. Liefert die nächsthöhere Ganzzahl dieser Zahl zurück (Aufrundung). Wenn die übergebene Zahl eine Ganzzahl ist, bleibt sie unverändert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.ceil(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von ceil() auf den Wert aus dem ersten Eingabefeld. Bei Eingabe von Bruchzahlen im ersten Eingabefeld steht im zweiten Feld anschließend die nächsthöhere Ganzzahl.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 cos()

Erwartet als Parameter eine Zahl. Liefert den Cosinus dieser Zahl zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.cos(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von cos() auf den Wert aus dem ersten Eingabefeld.

Beachten Sie:

Diese Methode erwartet Zahlen in der Einheit Radiant (rad) als Parameter.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 exp()

Erwartet als Parameter eine Zahl. Liefert den Exponentialwert dieser Zahl auf Basis der Eulerschen Konstanten zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.exp(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von exp() auf den Wert aus dem ersten Eingabefeld.

Beachten Sie:

Sobald Sie eine Zahl verwenden, die größer als 709 ist, liefert diese Methode infinity (Zahl ist zu groß.) zurück. Ist die Zahl kleiner als -744, liefert die Methode 0 zurück.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 floor()

Erwartet als Parameter eine Zahl. Liefert die nächstniedrigere Ganzzahl dieser Zahl zurück (Abrundung). Wenn die übergebene Zahl eine Ganzzahl ist, bleibt sie unverändert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.floor(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von floor() auf den Wert aus dem ersten Eingabefeld. Bei Eingabe von Bruchzahlen im ersten Eingabefeld steht im zweiten Feld anschließend die nächstniedrigere Ganzzahl. Bei positiven Zahlen ist dies die Zahl ohne Nachkommastellen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 log()

Erwartet als Parameter eine Zahl. Liefert die Anwendung des natürlichen Logarithmus auf diese Zahl zurück. Achten Sie darauf, dass Sie sinnvolle Werte übergeben, die größer als 0 sind.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.log(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von log() auf den Wert aus dem ersten Eingabefeld.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 max()

Erwartet zwei Zahlen als Parameter. Gibt die größere der beiden Zahlen zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" name="z1"><input type="text" name="z2"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.max(Test.z1.value, Test.z2.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit drei Eingabefeldern und einem Button. Nach Eingabe je einer Zahl im ersten und im zweiten Eingabefeld und Klick auf den Button wird im dritten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von max() auf die Werte aus den beiden ersten Eingabefeldern.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 min()

Erwartet zwei Zahlen als Parameter. Gibt die kleinere der beiden Zahlen zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" name="z1"><input type="text" name="z2"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.min(Test.z1.value, Test.z2.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit drei Eingabefeldern und einem Button. Nach Eingabe je einer Zahl im ersten und im zweiten Eingabefeld und Klick auf den Button wird im dritten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von min() auf die Werte aus den beiden ersten Eingabefeldern.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 pow()

Erwartet zwei Zahlen als Parameter. Die erste Zahl wird als Basis interpretiert, die zweite als Exponent. Liefert den Wert von "Zahl" hoch "Exponent" zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" name="z1"><input type="text" name="z2"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.pow(Test.z1.value, Test.z2.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit drei Eingabefeldern und einem Button. Nach Eingabe je einer Zahl im ersten und im zweiten Eingabefeld und Klick auf den Button wird im dritten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von pow() auf die Werte aus den beiden ersten Eingabefeldern. Wird im ersten Eingabefeld beispielsweise 2 (Basis) und im zweiten Eingabefeld 3 (Exponent) eingegeben, erscheint im dritten Feld als Ausgabe 8.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 random()

Gibt eine Zufallszahl zurück, die gleich oder größer als 0 und kleiner als 1 ist. Es handelt sich um eine Bruchzahl, z.B. 0.3834417857195922.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form action="">
<input type="button" value="Zufallszahl" onclick="alert(Math.random())">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit einem Button. Beim Klicken auf den Button wird eine Zufallszahl zwischen 0 und 1 ausgegeben.
Es handelt sich dabei um eine Pseudo-Zufallszahl, wie sie auf heute üblichen EDV-Systemen realisierbar ist.
Erst seit Netscape 3.x auf allen Plattformen verfügbar. Bei Netscape 2.x nur unter Unix.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 round()

Erwartet als Parameter eine Zahl. Liefert die kaufmännisch gerundete Ganzzahl dieser Zahl zurück. Wenn die übergebene Zahl eine Ganzzahl ist, bleibt sie unverändert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.round(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von round() auf den Wert aus dem ersten Eingabefeld. Bei Eingabe von Bruchzahlen im ersten Eingabefeld steht im zweiten Feld anschließend die kaufmännisch gerundete Ganzzahl.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 sin()

Erwartet als Parameter eine Zahl. Liefert den Sinus dieser Zahl zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.sin(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von sin() auf den Wert aus dem ersten Eingabefeld.

Beachten Sie:

Diese Methode erwartet Zahlen in der Einheit Radiant (rad) als Parameter.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 sqrt()

Erwartet als Parameter eine Zahl. Liefert die Quadratwurzel dieser Zahl zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.sqrt(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von sqrt() auf den Wert aus dem ersten Eingabefeld.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 tan()

Erwartet als Parameter eine Zahl. Liefert den Tangens dieser Zahl zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input type="text" name="Ein"><input type="text" name="Aus">
<input type="button" value="=" onclick="Test.Aus.value = Math.tan(Test.Ein.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von tan() auf den Wert aus dem ersten Eingabefeld.

Beachten Sie:

Diese Methode erwartet Zahlen in der Einheit Radiant (rad) als Parameter.

nach oben
weiter | Seite navigator
zurück | Seite Function
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / navigator

SELFHTML

navigator
Informationsseite

nach unten navigator: Allgemeines zur Verwendung

Eigenschaften:

nach unten appCodeName (Spitzname des Browsers)
nach unten appName (offizieller Name des Browsers)
nach unten appVersion (Browser-Version)
nach unten cookieEnabled (Cookies erlaubt)
nach unten language (Browser-Sprache)
nach unten platform (Plattform, auf der der Browser läuft)
nach unten userAgent (HTTP-Identifikation des Browsers)

Methoden:

nach unten javaEnabled() (Java-Verfügbarkeit überprüfen)

Unterobjekte:

Seite mimeTypes
Seite plugins

nach unten

navigator: Allgemeines zur Verwendung

Über das Objekt navigator können Sie in einem JavaScript Informationen darüber ermitteln, welchen Web-Browser der Anwender verwendet sowie einige nähere Spezifikationen dazu. Das kann zum Beispiel interessant sein, um die Ausführung von JavaScript-Anweisungen davon abhängig zu machen, welchen Browser der Anwender benutzt. Eine zuverlässigere Möglichkeit, um Fehlermeldungen in Browsern zu vermeiden, die bestimmte verwendete JavaScript-Befehle nicht kennen, bietet die Seite Abfrage, ob ein Objekt existiert.

Eigenschaften und Methoden von navigator können Sie direkt ansprechen. Beispiel: navigator.appName.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen appCodeName

Speichert den Spitznamen des Browsers. Dieses Feature wurde von Netscape deshalb erfunden, weil der Netscape-Browser den Spitznamen "Mozilla" trägt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (navigator.appCodeName == "Mozilla")
  alert("So ein drachenstarker Browser!");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ermittelt beim Einlesen der Datei, ob der vom Anwender benutzte Browser auf den Spitznamen "Mozilla" hört. Wenn ja, wird die Meldung "So ein drachenstarker Browser!" ausgegeben.

Sowohl Netscape als auch der Internet Explorer, Opera, Konqueror und Safari speichern in dieser Eigenschaft den Wert "Mozilla".

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen appName

Speichert den Namen des Browsers, den der Anwender verwendet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.write("So, so, Sie verwenden also " + navigator.appName);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt mit der Seite write()-Methode in die HTML-Datei, welchen Browser der Anwender verwendet.

Netscape speichert in dieser Eigenschaft beispielsweise den Wert "Netscape", der Internet Explorer den Wert "Microsoft Internet Explorer".

Beachten Sie:

Unter Opera kann der Anwender frei wählen, wie sich der Browser identifiziert. Safari und Mozilla Firefox identifizieren sich als "Netscape".

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen appVersion

Speichert die Version des Browsers, den der Anwender verwendet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (navigator.appVersion.substring(0, 1) == "4")
  alert("Oh, ein Browser der 4. Generation!");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel fragt ab, ob das erste Zeichen aus dem Wert, der in navigator.appVersion gespeichert ist, eine 4 ist. Wenn ja, wird eine Meldung ausgegeben.

Der Wert von navigator.appVersion umfasst mehr als nur die reine Produktversion.
Netscape 4.01 liefert z.B. folgenden Wert: "4.01 [en] (Win95; I)"
der Internet Explorer 4.0 liefert z.B.: "4.0 (compatible; MSIE 4.0; Windows 95)"

Um Teile aus einer solchen Zeichenkette zu extrahieren wie im Beispiel mit der Methode substring(), lesen Sie den Abschnitt über das Seite string-Objekt.

Beachten Sie:

Unter Opera kann der Anwender frei wählen, wie sich der Browser identifiziert. Auch im Mozilla Firefox, Safari und im Konqueror ist es möglich, diese Angabe zu manipulieren. Damit können je nach Nutzereinstellung auch in dieser Eigenschaft beliebige und eventuell unrealistische Werte gespeichert sein.

MS JScript Netscape 6.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen cookieEnabled

Speichert, ob der Nutzer das Setzen von Seite Cookies erlaubt. Sind diese erlaubt, so enthält die Eigenschaft true, sonst false. Nicht geprüft werden kann mit dieser Eigenschaft, ob der Nutzer vor dem Speichern eine Warnmeldung erhält. In diesem Fall ist in der Eigenschaft ebenfalls true gespeichert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
if (navigator.cookieEnabled == true) {
  document.write("Cookies erlaubt");
} else if (navigator.cookieEnabled == false) {
  document.write("Cookies verboten.");
} else {
  document.write("Verrate ich nicht.");
}
</script>
</body></html>

Erläuterung:

Das Beispiel wird gefragt, ob der Nutzer Cookies erlaubt. Ist das der Fall, wird mit der Seite write()-Methode eine entsprechende Information ausgegeben. Sind keine Cookies verfügbar, wird gefragt, ob Cookies verboten sind. Browser, die cookieEnabled kennen und keine Cookies erlauben, folgen dem if-Zweig der Anweisung. Browser, die diese Eigenschaft nicht kennen, geben den Text "Verrate ich nicht." aus.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen language

Speichert die Sprache der Benutzerführung des Browsers, den der Anwender verwendet. Die Sprache wird dabei mit den international üblichen Abkürzungen gespeichert, z.B. "en" für englisch oder "de" für deutsch.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
if (navigator.language.indexOf("en") > -1) {
  document.write("dear visitor, welcome on our pages");
} else if (navigator.language.indexOf("de") > -1) {
  document.write("Sehr geehrter Besucher, willkommen auf unseren Seiten");
}
</script>
</body></html>

Erläuterung:

Das Beispiel ermittelt, welche Benutzersprache der Browser des Anwenders verwendet. Wenn es englisch ist, wird mit der Seite write()-Methode ein englischer Begrüßungstext in die HTML-Datei geschrieben, wenn es deutsch ist, ein deutscher Begrüßungstext.

Beachten Sie:

Im Internet Explorer heißt diese Eigenschaft navigator.browserLanguage. Safari 1.0 identifiziert sich trotz deutscher Benutzerführung als englisch, in späteren Versionen ist dies korrekt.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen platform

Speichert, auf welchem Betriebssystemtyp der Browser läuft, den der Anwender verwendet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
alert(navigator.platform);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel gibt beim Einlesen der Datei in einem Meldungsfenster aus, auf welcher Plattform der Browser beim Anwender läuft.

Bei Windows 95 gibt Netscape beispielsweise "Win32" aus, Safari identifiziert die Plattform als "MacPPC"

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen userAgent

Speichert alle wichtigen Informationen über den Browser, den der Anwender verwendet, und zwar in der Form, die der Browser auch bei jeder HTTP-Anforderung einer Datei im WWW sendet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
Diese Daten sendet Ihr Browser, wenn er Dateien im WWW anfordert:<br>
<script type="text/javascript">
document.write(navigator.userAgent);
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt in die HTML-Datei, mit welchen Daten sich der verwendete Browser im WWW ausgibt. Auf der Seite Seite Client-Identifikationen finden Sie eine Übersicht bekannter Ausgaben, die in dieser Eigenschaft enthalten sein können. Die Übersicht kann helfen, wenn Sie Abfragen nach bestimmten Browsern, Versionen oder Plattformen durchführen wollen.

Beachten Sie:

Unter Opera kann der Anwender frei wählen, wie sich der Browser identifiziert. Damit sind je nach Nutzereinstellung in dieser Eigenschaft verschiedene Werte gespeichert. Unabhängig von den Nutzereinstellungen ist jedoch in dieser Eigenschaft immer das Wort Opera, wenn auch an verschiedenen Positionen, enthalten. Auch in Mozilla Firefox und Safari ist es möglich, diese Angabe zu manipulieren.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 javaEnabled()

Testet, ob Java auf dem Browser des Anwenders verfügbar ist oder nicht. Liefert true zurück, wenn Java verfügbar ist, und false, wenn nicht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
if (navigator.javaEnabled()) {
  document.write('<applet code="zticker.class" width="150" height="25"><\/applet>');
}
</script>
</body></html>

Erläuterung:

Das Beispiel fragt mit if (navigator.javaEnabled()) ab, ob Java verfügbar ist. Wenn ja, wird mit der Seite write()-Methode der HTML-Code für die Platzierung eines Java-Applets geschrieben.

nach oben
weiter | Seite mimeTypes
zurück | Seite Math
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / mimeTypes

SELFHTML

mimeTypes
Informationsseite

nach unten mimeTypes: Allgemeines zur Verwendung

Eigenschaften:

nach unten description (Beschreibung eines MIME-Typs)
nach unten enabledPlugin (Plugin vorhanden)
nach unten length (Anzahl MIME-Typen)
nach unten suffixes (Dateiendungen)
nach unten type (MIME-Typ)

nach unten

mimeTypes: Allgemeines zur Verwendung

Über das Objekt mimeTypes, das in der JavaScript-Objekthierarchie unterhalb des Seite navigator-Objekts liegt, können Sie ermitteln, welche Dateitypen der Browser des Anwenders kennt, und ob ein Plugin zum Anzeigen oder Abspielen eines Dateityps vorhanden ist. Lesen Sie zum besseren Verständnis von MIME-Typen gegebenenfalls den Abschnitt Seite MIME-Typen.

Um einen MIME-Typ anzusprechen, stehen folgende Möglichkeiten zur Verfügung:

Schema 1:

navigator.mimeTypes[#].Eigenschaft

Schema 2:

navigator.mimeTypes["MIME-Typ"].Eigenschaft

Erläuterung:

MIME-Typen können Sie auf zwei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1)
    Bei Verwendung von Indexnummern geben Sie navigator.mimeTypes an und dahinter in eckigen Klammern eine Zahl. Sie können allerdings nicht wissen, welche MIME-Typen an welcher Stelle gespeichert sind. Die Verwendung von Indexnummern ist deshalb nur sinnvoll, wenn Sie beispielsweise in einer Schleife alle verfügbaren MIME-Typen ermitteln.
  • mit dem Namen eines MIME-Typs als Indexnamen (wie in Schema 2)
    Dabei notieren Sie wie beim Ansprechen mit Indexnummer hinter navigator.mimeTypes eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den MIME-Typ-Namen. Dabei gilt die übliche Notation für MIME-Typen, also die Form "Kategorie/Unterkategorie". Als Indexnamen sind zum Beispiel Werte möglich, die Sie mit der Objekteigenschaft nach unten type ermitteln können.

Beispiel für das Objekt insgesamt:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.writeln('<table border="1">');
for (var i = 0; i < navigator.mimeTypes.length; i++) {
  document.writeln("<tr>");
  document.writeln("<td>" + navigator.mimeTypes[i].type + "<\/td>");
  document.writeln("<td>" + navigator.mimeTypes[i].suffixes + "<\/td>");
  document.writeln("<td>" + navigator.mimeTypes[i].description + "<\/td>");
  if (navigator.mimeTypes[i].enabledPlugin) {
    document.writeln("<td>" + navigator.mimeTypes[i].enabledPlugin + "<\/td>");
  } else {
    document.writeln("<td>kein Plugin<\/td>");
  }
  document.writeln("<\/tr>");
}

document.writeln("<\/table>");
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt mit Hilfe der Methode Seite writeln() dynamisch eine Tabelle in die HTML-Datei. In der Tabelle werden alle verfügbaren Plugins aufgelistet. In der linken Spalte steht der MIME-Typ, also die Kategorie/Unterkategorie, wie Sie sie auch zur MIME-Typ-Adressierung mit Hilfe von Indexnamen verwenden können. In der Spalte daneben stehen die zugehörigen Dateiendungen. Daneben steht eine Kurzbeschreibung des MIME-Typs, und in der letzten Spalte steht, ob der Browser ein Plugin besitzt, um Dateien des entsprechenden Typs zu verarbeiten.

Beachten Sie:

Welche Eigenschaften im Objekt mimeTypes gespeichert sind, ist stark abhängig vom verwendeten Browser. So speichert der Netscape 6 nur tatsächlich vorhandene Plugins als eigene Objekteigenschaft, während Opera 5.12 und Netscape 4 z.B. auch den Type image/jpeg mit angeben. Im Internet Explorer existiert dieses Objekt nur aus Kompatibilitätsgründen und enthält keinen Inhalt.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen description

Speichert die Kurzbeschreibung eines MIME-Typs.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (navigator.mimeTypes["application/pdf"])
  alert(navigator.mimeTypes["application/pdf"].description);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel prüft zuerst, ob der MIME-Typ "application/pdf" existiert. Wenn ja, wird in einem Meldungsfenster die Kurzbeschreibung zum MIME-Typ "application/pdf" ausgegeben. Netscape 4.x gibt dabei freilich nicht viel mehr bekannt als "Acrobat", in Opera 5.12 und Netscape 6 wird "Acrobat (*.pdf)" ausgegeben und Safari 1.2 benutzt die Abkürzung "PDF".

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.2 Lesen enabledPlugin

Speichert, ob für einen MIME-Typ ein Plugin installiert ist. Wenn kein Plugin verfügbar ist, der Browser jedoch den MIME-Typ kennt, wird der Wert null gespeichert.

Die Eigenschaft stellt selbst ein Objekt dar. Sie ist dabei eine Art Zeiger auf das entsprechende Seite plugins-Objekt. Hinter der Eigenschaft lassen sich wiederum alle Eigenschaften und Methoden des plugins-Objekts notieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
if (navigator.mimeTypes["x-world/x-vrml"] &&
    navigator.mimeTypes["x-world/x-vrml"].enabledPlugin != null)
  document.write('<object data="yzeplin.wrl" width="400" height="300"><\/object>');
</script>
</body></html>

Erläuterung:

Das Beispiel ermittelt, ob der Browser den MIME-Typ kennt und ob er ein Plugin für VRML-Dateien verfügbar hat. Wenn ja, wird mit Hilfe der Seite write()-Methode dynamisch das HTML-Konstrukt zum Einbinden einer VRML-Datei geschrieben. Anwender, die kein VRML-Plugin haben, bekommen dadurch weder Fehlermeldungen noch ein leeres Objektfenster. Solche Anwender bekommen einfach gar nicht mit, dass in der Datei eigentlich eine VRML-Datei referenziert ist.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert die Anzahl der MIME-Typ-Einträge, die der Browser kennt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<b>Folgende Plugins sind installiert:</b>
<script type="text/javascript">
for (var i = 0; i < navigator.mimeTypes.length; ++i)
  if (navigator.mimeTypes[i].enabledPlugin != null)
    document.write("<br>" + navigator.mimeTypes[i].description);
</script>
</body></html>

Erläuterung:

Das Beispiel fragt in einer for-Schleife ab, ob für den jeweils aktuellen MIME-Typ ein Plugin installiert ist. Wenn ja, wird eine Zeile mit der Kurzbeschreibung des MIME-Typs geschrieben. So werden am Ende alle installierten Plugins mit sprechenden Beschreibungen aufgelistet.

Bei der Definition der for-Schleife dient die Eigenschaft navigator.mimeTypes.length als Abbruchbedingung.

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Safari 1.2 Lesen suffixes

Speichert die typischen Dateiendungen, die zu einem MIME-Typ gehören.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (navigator.mimeTypes["image/jpeg"])
  alert(navigator.mimeTypes["image/jpeg"].suffixes);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel prüft, ob der Browser den MIME-Typ kennt und gibt in einem Meldungsfenster aus, welche Dateiendungen unter den MIME-Typ "image/jpeg" fallen.

Beachten Sie:

Im Netscape 6 und Konqueror 3.1 ist dieses Beispiel nicht nachvollziehbar, da diese Browser nur die MIME-Typen als eigene Objekteigenschaft speichern, zu denen tatsächlich ein Plugin vorliegt.

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen type

Speichert die eigentliche MIME-Typ-Bezeichnung nach dem Schema "Kategorie/Unterkategorie".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<b>Folgende MIME-Typen sind dem Browser bekannt:</b>
<script type="text/javascript">
for (var i = 0; i < navigator.mimeTypes.length; ++i)
  document.write("<br>" + navigator.mimeTypes[i].type);
</script>
</body></html>

Erläuterung:

Das Beispiel klappert in einer for-Schleife alle dem Browser bekannten MIME-Typen ab und schreibt jeweils eine Zeile mit der MIME-Typ-Bezeichnung. So werden am Ende alle dem Browser bekannten MIME-Typen aufgelistet.

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

nach oben
weiter | Seite plugins
zurück | Seite navigator
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / plugins

SELFHTML

plugins
Informationsseite

nach unten plugins: Allgemeines zur Verwendung

Eigenschaften:

nach unten description (Beschreibung eines Plugins)
nach unten filename (Dateiname eines Plugins)
nach unten length (Anzahl Plugins)
nach unten name (Produktname eines Plugins)

nach unten

plugins: Allgemeines zur Verwendung

Über das Objekt plugins, das in der JavaScript-Objekthierarchie unterhalb des Seite navigator-Objekts liegt, können Sie ermitteln, welche Plugins im Sinne der Netscape-Plugin-Technik der Anwender installiert hat.

Um ein Plugin anzusprechen, stehen folgende Möglichkeiten zur Verfügung:

Schema 1:

navigator.plugins[#].Eigenschaft

Schema 2:

navigator.plugins["Name"].Eigenschaft

Erläuterung:

Plugins können Sie auf zwei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1)
    Bei Verwendung von Indexnummern geben Sie navigator.plugins an und dahinter in eckigen Klammern eine Zahl. Sie können allerdings nicht wissen, welche Plugins an welcher Stelle gespeichert sind. Die Verwendung in Verbindung mit Indexnummern ist deshalb nur sinnvoll, wenn Sie beispielsweise in einer Schleife alle verfügbaren Plugins ermitteln.
  • mit dem Namen eines Plugins als Indexnamen (wie in Schema 2)
    Dabei notieren Sie wie beim Ansprechen mit Indexnummer hinter navigator.plugins eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen des Plugins. Als Namen sind zum Beispiel Werte möglich, die Sie mit der Objekteigenschaft nach unten name ermitteln können.

Beispiel für das Objekt insgesamt:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
document.writeln('<table border="1">');
for (var i = 0; i < navigator.plugins.length; i++) {
  document.writeln("<tr>");
  document.writeln("<td>" + navigator.plugins[i].name + "<\/td>");
  document.writeln("<td>" + navigator.plugins[i].description + "<\/td>");
  document.writeln("<td>" + navigator.plugins[i].filename + "<\/td>");
  document.writeln("<\/tr>");
}
document.writeln("<\/table>");
</script>
</body></html>

Erläuterung:

Das Beispiel schreibt mit Hilfe der Methode Seite writeln() dynamisch eine Tabelle in die HTML-Datei. In der Tabelle werden alle verfügbaren Plugins aufgelistet. In der linken Spalte steht der Name des Plugins, wie Sie ihn auch bei Plugin-Adressierungen mit Indexnamen benutzen können. In der Spalte daneben steht eine Kurzbeschreibung, und in der letzten Spalte steht, welche Datei auf dem Rechner des Anwenders das Plugin repräsentiert.

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen description

Speichert die Kurzbeschreibung eines Plugins.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (navigator.plugins["Java Plug-in"])
  alert(navigator.plugins["Java Plug-in"].description);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel fragt ab, ob ein Plugin mit dem Namen "Java Plug-in" beim Anwender installiert ist (das Beispiel nimmt an, dass der Autor dieses Plugin besitzt und testen möchte, ob er seine Daten zu diesem Plugin einem Anwender zumuten kann). Das Beispiel beschränkt sich darauf, in einem Meldungsfenster die Kurzbeschreibung des Plugins auszugeben, wenn dieses Plugin installiert ist.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen filename

Speichert den Namen der Programmdatei eines Plugins.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (navigator.plugins["VDOLive small plugin"] &&
    navigator.plugins["VDOLive small plugin"].filename.indexOf("npsmlvdo.dll"))
  alert("Plugin ist eine Nummer zu klein");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ermittelt zuerst, ob ein Plugin mit dem Namen "VDOLive small plugin" beim Anwender installiert ist. Danach fragt das Beispiel ab, ob in dem Eintrag, der den Dateinamen des Plugins speichert, der Wert "npsmlvdo.dll" vorkommt. Wenn ja, wird im Beispiel die Meldung ausgegeben, dass das Plugin eine Nummer zu klein ist.

In der Objekteigenschaft filename speichert Netscape den vollständigen Pfadnamen der Datei. Um den eigentlichen Dateinamen abzufragen, wird im Beispiel eine Methode des Seite string-Objekts bemüht, nämlich indexOf().

Beachten Sie:

Konqueror interpretiert zwar filename, kann jedoch das Beispiel nicht darstellen, da das System keine *.dll-Dateinamenendungen für Plugins kennt.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen length

Speichert die Anzahl der Plugins, die der Anwender zu seinem Browser installiert hat.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<b>Folgende Plugin-Dateien sind auf dem Rechner:</b>
<script type="text/javascript">
for (var i = 0; i < navigator.plugins.length; ++i)
  document.write("<br>" + navigator.plugins[i].filename);
</script>
</body></html>

Erläuterung:

Das Beispiel klappert in einer for-Schleife alle installierten Plugins ab und schreibt für jedes Plugin eine Zeile mit dem Dateinamen des Plugins. So werden am Ende die verantwortlichen Dateien aller installierten Plugins aufgelistet.

Bei der Definition der for-Schleife dient die Eigenschaft navigator.plugins.length als Abbruchbedingung.

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

JavaScript 1.1 Netscape 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen name

Speichert den Produktnamen eines Plugins.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<b>Folgende Plugins sind installiert:</b>
<script type="text/javascript">
for (i = 0; i < navigator.plugins.length; ++i)
  document.write("<br>" + navigator.plugins[i].name);
</script>
</body></html>

Erläuterung:

Das Beispiel klappert in einer for-Schleife alle installierten Plugins ab und schreibt für jedes Plugin eine Zeile mit dem Namen des Plugins. So werden am Ende alle installierten Plugins aufgelistet.

Beachten Sie:

Der Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

nach oben
weiter | Seite Number
zurück | Seite mimeTypes
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / Number

SELFHTML

Number
Informationsseite

nach unten Allgemeines zur Verwendung

Eigenschaften:

nach unten MAX_VALUE (größte speicherbare Zahl)
nach unten MIN_VALUE (kleinste speicherbare Zahl)
nach unten NaN (keine gültige Zahl)
nach unten NEGATIVE_INFINITY (Zahl zu klein)
nach unten POSITIVE_INFINITY (Zahl zu groß)

Methoden:

nach unten toExponential()
nach unten toFixed()
nach unten toPrecision()
nach unten toString()
nach unten

Number: Allgemeines zur Verwendung

Über das Objekt Number haben Sie Zugriff auf Eigenschaften numerischer Werte. So können Sie ermitteln, ob ein Wert eine gültige Zahl ist, oder welches die maximale positive oder negative Zahl ist, die in einer numerischen Variablen gespeichert werden kann.

Eigenschaften des Number-Objekts können Sie direkt ansprechen, indem Sie Number davor notieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var groessteZahl = Number.MAX_VALUE;
alert(groessteZahl);
var Monat = 13;
if (Monat < 1 || Monat > 12) {
  Monat = Number.NaN;
  alert(Monat);
}
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert zunächst eine Variable namens groessteZahl. Dieser Variablen wird die Eigenschaft Number.MAX_VALUE zugewiesen. Anschließend steht in groessteZahl die größte Zahl, die JavaScript verarbeiten kann. Die Zahl wird zur Kontrolle ausgegeben. Da die Zahl viel zu groß ist, um sie direkt darzustellen, wird sie von JavaScript automatisch in Exponentialschreibweise dargestellt.

Dann definiert das Beispiel eine Variable namens Monat und weist dieser Variablen den Wert 13 zu. Danach wird abgefragt, ob der Wert von Monat, wie es sich für Monate gehört, zwischen 1 und 12 liegt. Wenn nicht (und das ist im Beispiel ja der Fall), wird der Variablen Monat die Eigenschaft Number.NaN zugewiesen. Der Wert von Monat ist danach NaN. Das bedeutet so viel wie: auf jeden Fall keine bzw. eine ungültige Zahl. Zur Kontrolle wird der neue Wert von Monat ausgegeben.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen MAX_VALUE

Speichert die größte erlaubte Zahl.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var groessteZahl = Number.MAX_VALUE;
alert(groessteZahl);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert eine Variable namens groessteZahl. Dieser Variablen wird die Eigenschaft Number.MAX_VALUE zugewiesen. Anschließend steht in groessteZahl die größte Zahl, die JavaScript verarbeiten kann. Das Ergebnis wird zur Kontrolle ausgegeben.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen MIN_VALUE

Speichert die kleinste (positive) erlaubte Zahl.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var kleinsteZahl = Number.MIN_VALUE;
alert(kleinsteZahl);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert eine Variable namens kleinsteZahl. Dieser Variablen wird die Eigenschaft Number.MIN_VALUE zugewiesen. Anschließend steht in kleinsteZahl die "größte" positive Zahl, die JavaScript verarbeiten kann. Das Ergebnis wird zur Kontrolle ausgegeben.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen NaN

NaN ist ein vordefinierter Wert (keine gültige Zahl). Dieser Wert kann z.B. als Rückgabewert für ungültige Zahlen verwendet werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahl_1 = "3a";
var Zahl_2 = "3";
if (Zahl_1 != 3)
  Zahl_1 = Number.NaN;
if (Zahl_2 != 3)
  Zahl_2 = Number.NaN;
alert(Zahl_1);
alert(Zahl_2);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert zwei Variablen Zahl_1 und Zahl_2. Dabei wird Zahl_1 mit dem Wert 3a vorbelegt, Zahl_2 mit dem Wert 3. Anschließend wird für beide Variablen abgefragt, ob die Variable ungleich der Zahl 3 ist. Wenn ja, also wenn der Wert nicht 3 ist, wird der entsprechenden Variablen die Eigenschaft Number.NaN (keine gültige Zahl)zugewiesen. Abschließend werden beide Variableninhalte ausgegeben. Zahl_1 hat nun den Wert NaN, weil es ungleich 3 war und deshalb die Eigenschaft NaN zugewiesen bekam. Zahl_2 dagegen speichert den Wert 3, da es als gültige Zahl 3 anerkannt wurde - obwohl sie bei der Initialisierung die 3 als Zeichenkette zugewiesen bekam: hier greift die interne automatische Typumwandlung in JavaScript.

Beachten Sie:

Mit der Eigenschaft Number.NaN können Sie nicht die Gültigkeit einer Zahl prüfen, sondern ihr nur die Eigenschaft keine gültige Zahl zuweisen. Die Gültigkeit einer Zahl können Sie mit der Methode Seite isNaN() prüfen.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen NEGATIVE_INFINITY

Dies ist ein vordefinierter Wert (Ausgabewert: -Infinity). Er gibt an, ob eine (negative) Zahl zu klein ist für JavaScript, also außerhalb des Bereichs liegt, dessen Grenze durch nach oben MIN_VALUE markiert ist. Der Wert kann z.B. als Rückgabewert für zu kleine Zahlen verwendet werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahl = Number.MAX_VALUE * -2;
alert(Zahl);
var Monat = -1;
if (Monat < 1)
  Monat = Number.NEGATIVE_INFINITY;
alert(Monat);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert eine Variable Zahl der als Wert das Produkt aus Number.MAX_VALUE, also der größten möglichen Zahl, und -2 zugewiesen wird. Die Multiplikation erzeugt eine negative Zahl, die kleiner ist als die kleinste erlaubte Zahl. Dadurch erhält die Variable Zahl den Wert -Infinity. Dieser bedeutet, dass der erlaubte Wertebereich unterschritten wurde. Im ersten Teil des Beispieles weißt JavaScript automatisch dem Ergebnis den Wert von Number.NEGATIVE_INFINITY zu. Im zweiten Teil wird eine Variable Monat deklariert. Diese erhält den ungültigen Wert -1. In der nachfolgenden Abfrage wird geprüft, ob Monat kleiner als 1 ist und ihr wird in diesem Fall die Eigenschaft Number.NEGATIVE_INFINITY zugewiesen.

Beachten Sie:

Mit der Eigenschaft Number.NEGATIVE_INFINITY können Sie nicht prüfen, ob eine Zahl zu klein für JavaScript ist. Die Gültigkeit einer Zahl können Sie mit der Methode Seite isFinite() prüfen.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen POSITIVE_INFINITY

Dies ist ein vordefinierter Wert (Ausgabewert: Infinity). Er gibt an, ob eine Zahl zu groß ist für JavaScript, also außerhalb des Bereichs liegt, dessen Grenze durch nach oben MAX_VALUE markiert ist. Der Wert kann z.B. als Rückgabewert für zu große Zahlen verwendet werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
Zahl = Number.MAX_VALUE * 2;
alert(Zahl);
var Monat = 13;
if (Monat > 12)
  Monat = Number.POSITIVE_INFINITY;
alert(Monat);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert eine Variable Zahl der als Wert das Produkt aus Number.MAX_VALUE, also der größten möglichen Zahl, und 2 zugewiesen wird. Die Multiplikation erzeugt eine Zahl, die größer ist als die größte erlaubte Zahl. Dadurch erhält die Variable Zahl den Wert Infinity. Dieser bedeutet, dass der erlaubte Wertebereich überschritten wurde. Im ersten Teil des Beispieles weist JavaScript dem Ergebnis den Wert von Number.NEGATIVE_INFINITY zu. Im zweiten Teil wird eine Variable Monat deklariert. Diese erhält den ungültigen Wert 13. In der nachfolgenden Abfrage wird geprüft, ob Monat größer als 12 ist. In diesem Fall wird ihr die Eigenschaft Number.POSITIVE_INFINITY zugewiesen.

Beachten Sie:

Mit der Eigenschaft Number.POSITIVE_INFINITY können Sie nicht prüfen, ob eine Zahl zu groß für JavaScript ist. Die Gültigkeit einer Zahl können Sie mit der Methode Seite isFinite() prüfen.

JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari WebKit (Entwicklerversion) toExponential()

Erzwingt die Exponentialschreibweise einer Zahl.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Wert = 13.000012345;
document.write(Wert.toExponential());
</script>
</body></html>

Erläuterung:

Das Beispiel definiert einen Wert und schreibt das Ergebnis der Anwendung von toExponential() auf diesen Wert ins Dokument. Geschrieben wird 1.3000012345e+1.

JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.3 toFixed()

Erzwingt eine bestimmte Anzahl Nachkommastellen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Wert = 7123.203848;
document.write(Wert.toFixed(2));
</script>
</body></html>

Erläuterung:

Das Beispiel definiert einen Wert und schreibt das Ergebnis der Anwendung von toFixed(2) auf diesen Wert ins Dokument. Geschrieben wird 7123.20, weil der an die Methode im Beispiel übergebene Wert 2 so viel bedeutet wie: schneide nach 2 Nachkommastellen ab.

Beachten Sie:

Diese Methode rundet automatisch kaufmännisch. Würde der Wert im Beispiel 7123.209848 lauten, dann würde 7123.21 ermittelt.

JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.3 toPrecision()

Erzwingt eine bestimmte Genauigkeit bei der Darstellung einer Zahl.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
Wert = 7123.209;
document.write("precision(1) = " + Wert.toPrecision(1) + "<br>");
document.write("precision(2) = " + Wert.toPrecision(2) + "<br>");
document.write("precision(3) = " + Wert.toPrecision(3) + "<br>");
document.write("precision(4) = " + Wert.toPrecision(4) + "<br>");
document.write("precision(5) = " + Wert.toPrecision(5) + "<br>");
document.write("precision(6) = " + Wert.toPrecision(6) + "<br>");
document.write("precision(7) = " + Wert.toPrecision(7) + "<br>");
document.write("precision(8) = " + Wert.toPrecision(8) + "<br>");
</script>
</body></html>

Erläuterung:

Das Beispiel definiert einen Wert und schreibt dann mehrfach das Ergebnis der unterschiedlichen Anwendung von toPrecision(x) auf diesen Wert ins Dokument. Geschrieben wird:
precision(1) = 7e+3
precision(2) = 7.1e+3
precision(3) = 7.12e+3
precision(4) = 7123
precision(5) = 7123.2
precision(6) = 7123.21
precision(7) = 7123.209
precision(8) = 7123.2090

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.3 Safari 1.0 toString()

Wandelt eine Zahl in eine Zeichenkette (String) um. Diese Methode ist dann notwendig, wenn Sie Methoden des Seite String-Objekts auf eine Zahl anwenden wollen. Die Methode toString() besitzt einen optionalen Parameter. Der Parameter gibt die Basis des gewünschten Zahlensystems an (z.B. 10 für das Dezimalsystem, oder 16 für das Hexadezimalsystem). Der optionale Parameter kann Werte zwischen 2 und 36 annehmen. Wird kein Parameter angegeben, so wird die Zahl als Dezimalzahl behandelt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Dezimalzahl = 15.5;
var Dualzahl = Dezimalzahl.toString(2);
alert(Dualzahl);
</script>
</body></html>

Erläuterung:

Das Beispiel definiert eine Variable namens Dezimalzahl. Diese Variable enthält die Dezimalzahl 15.5. Anschließend wird der Variablen Dualzahl der Rückgabewert der Methode toString() mit dem Parameter 2 zugewiesen. In der Variablen Dualzahl ist jetzt die Zahl 15.5 als Dualzahl-Zeichenkette gespeichert. Im Beispiel wird im Meldungsfenster 1111.1 ausgegeben. Damit fungiert die Methode toString() gleichzeitig als Umrechner von Zahlen des dezimale Zahlensystem in Zahlen anderer Zahlensysteme. Mit der Methode Seite parseInt() können Sie umgekehrt Zeichenketten von Zahlen anderer Zahlensystem in das dezimale Zahlensystem konvertieren.

Beachten Sie:

Opera kennt zwar die Methode toString(), ignoriert aber den Parameter für das Zahlensystem. Die Umwandlung in eine Dualzahl im Beispiel funktioniert daher nicht. Safari ignoriert bei der Umwandlung in eine Dualzahl die Nachkommastellen, es bleibt nur der Ganzzahlwert übrig.

nach oben
weiter | Seite RegExp
zurück | Seite plugins
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / RegExp

SELFHTML

RegExp
Informationsseite

nach unten Allgemeines zur Verwendung

Eigenschaften:

nach unten $[1..9] (geklammerte Unterausdrücke)

Methoden:

nach unten exec() (Regulären Ausdruck anwenden)
nach unten test() (Regulären Ausdruck probehalber anwenden)
nach unten

Allgemeines zur Verwendung

Reguläre Ausdrücke dienen dazu, Suchausdrücke zu formulieren, um in Zeichenketten nach Entsprechungen zu suchen und gefundene Stellen durch andere zu ersetzen.

Reguläre Ausdrücke können Sie in JavaScript direkt innerhalb entsprechender Methoden des Seite String-Objekts anwenden. Das trifft auf die Methoden:
Seite match(),
Seite replace() und
Seite search() zu.
Dort wird beschrieben, wie und wo Sie den regulären Ausdruck genau verwenden können, um Zeichenketten zu durchsuchen und Teile darin zu ersetzen.

Das RegExp-Objekt von JavaScript brauchen Sie dagegen nur, wenn Sie reguläre Ausdrücke zur Laufzeit des Scripts dynamisch erzeugen und ändern wollen. Dazu können Sie eine Instanz eines RegExp-Objekts definieren. Auf diese Instanz können Sie anschließend die Eigenschaften und Methoden des RegExp-Objekts anwenden, die hier beschrieben werden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Ausgabe (Wert) {
  var Ausdruck = /(\w.+)\s(\w.+)/;
  Ausdruck.exec(Wert);
  alert(RegExp.$2 + ", " + RegExp.$1);
}
</script>
</head><body>
<form action="">
<input type="text" name="User" value="Vorname Zuname">
<input type="button" value="Ausgabe" onclick="Ausgabe(this.form.User.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel zeigt, wie sich ein Name nach dem Schema "Vorname Zuname" unter Verwendung eines regulären Ausdrucks in das Schema "Name, Vorname" verwandeln lässt.

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Button. In dem Eingabefeld soll der Anwender seinen Namen in der Form "Vorname Zuname" eingeben. Deshalb ist das Feld auch schon so vorbelegt. Beim Anklicken des Buttons wird die Funktion Ausgabe() aufgerufen, die im Dateikopf definiert ist. Als Parameter bekommt die Funktion den Inhalt des Eingabefeldes übergeben.

Innerhalb der Funktion wird ein regulärer Ausdruck (Suchausdruck) definiert, der in der Variablen Ausdruck gespeichert wird. Solche regulären Ausdrücke werden in einfache Schrägstriche /.../ eingeschlossen. Der reguläre Ausdruck im obigen Beispiel ist so zu lesen: Suche nach einer beliebigen Anzahl von aneinandergereihten Buchstaben ohne Ziffern und Satzzeichen und merke dir das Ergebnis (\w.+). Suche dann nach einem einzelnen Leerzeichen = \s. Suche dann noch einmal nach einer beliebigen Buchstabenreihenfolge und merke dir das Ergebnis (\w.+). Auf diese Weise wird das Schema "Vorname Zuname" gefunden. Die beiden Klammern um (\w.+) führen dazu, dass die beiden einzelnen Buchstabenreihenfolgen als einzelne Teile intern gemerkt werden. Später sind diese einzelnen gemerkten Teile separat ansprechbar.

Im Beispiel wird mit dem nächsten Befehl eine wichtige Methode des RegExp-Objekts auf den zuvor definierten regulären Ausdruck angewendet, nämlich die Methode nach unten exec(). Dadurch wird der Ausdruck "ausgeführt" und direkt dem RegExp-Objekt zugewiesen. Im Beispiel wird mit RegExp.$2 direkt auf den intern gespeicherten Treffers des zweiten geklammerten Teilausdrucks zugegriffen, und mit RegExp.$1 auf den Treffer des ersten Teilausdrucks. Durch die Anordnung mit dem Komma dazwischen bei der Ausgabe mit alert() erscheint das zuvor eingegebene "Vorname Zuname" dann in dem anderen Schema "Zuname, Vorname".

Beachten Sie:

Seit der JavaScript-Version 1.5 gilt das Auslesen der Treffer geklammerten Ausdrücke über RegExp.$1, RegExp.$2 und so weiter als veraltet. In der Praxis steht allerdings nur bei der im Beispiel verwendeten Methode exec() eine Alternative zur Verfügung. Näheres entnehmen Sie bitte der Beschreibung von exec().

Syntax regulärer Ausdrücke

Die folgende Übersicht zeigt, aus welchen Bestandteilen Sie einen regulären Ausdruck zusammensetzen können.

Bestandteil | Beispiel | Beschreibung
 | /aus/ | findet "aus", und zwar in "aus", "Haus", "auserlesen" und "Banause".
^ | /^aus/ | findet "aus" am Anfang des zu durchsuchenden Wertes, also in "aus" und "auserlesen", sofern das die ersten Wörter im Wert sind.
$ | /aus$/ | findet "aus" am Ende des zu durchsuchenden Wertes, also in "aus" und "Haus", sofern das die letzten Wörter im Wert sind.
* | /aus*/ | findet "au", "aus", "auss" und "aussssss", also das letzte Zeichen vor dem Stern 0 oder beliebig oft hintereinander wiederholt.
+ | /aus+/ | findet "auss" und "aussssss", also das letzte Zeichen vor dem Plus-Zeichen mindestens einmal oder beliebig oft hintereinander wiederholt.
. | /.aus/ | findet "Haus" und "Maus", also ein beliebiges Zeichen an einer bestimmten Stelle.
.+ | /.+aus/ | findet "Haus" und "Kehraus", also eine beliebige Zeichenfolge an einer bestimmten Stelle. Zusammensetzung aus beliebiges Zeichen und beliebig viele davon, jedoch mindestens eines.
\b | /\baus\b/ | findet "aus" als einzelnes Wort. \b bedeutet eine Wortgrenze.
\B | /\Baus\B/ | findet "aus" nur innerhalb von Wörtern, z.B. in "hausen" oder "Totalausfall". \B bedeutet keine Wortgrenze.
\d | /\d+/ | findet eine beliebige ganze Zahl. \d bedeutet eine Ziffer (0 bis 9)
\D | /\D+/ | findet "-fach" in "3-fach", also keine Ziffer.
\f | /\f/ | findet ein Seitenvorschubzeichen.
\n | /\n/ | findet ein Zeilenvorschub-Zeichen.
\r | /\r/ | findet ein Wagenrücklaufzeichen.
\t | /\t/ | findet ein Tabulator-Zeichen.
\v | /\v/ | findet ein vertikales Tabulator-Zeichen.
\s | /\s/ | findet jede Art von Weißraum-Zeichen ("Whitespace"), also \f, \n, \t, \v und das Leerzeichen.
\S | /\S+/ | findet ein beliebiges einzelnes Zeichen, das kein "Whitespace" ist, also kein \f\n\t\v und kein Leerzeichen.
\w | /\w+/ | findet alle alphanumerischen Zeichen und den Unterstrich (typische Bedingung etwa für programmiersprachengerechte selbstvergebene Namen).
\W | /\W/ | findet ein Zeichen, das nicht alphanumerisch und auch kein Unterstrich ist (typisch zum Suchen nach illegalen Zeichen bei programmiersprachengerechten selbstvergebenen Namen).
() | /(aus)/ | findet "aus" und merkt es sich intern. Bis zu 9 solcher Klammern (Merkplätze) sind in einem regulären Ausdruck erlaubt.
/.../g | /aus/g | findet "aus" so oft wie es in dem gesamten zu durchsuchenden Bereich vorkommt. Die Fundstellen werden intern in einem Array gespeichert.
/.../i | /aus/i | findet "aus", "Aus" und "AUS", also unabhängig von Groß-/Kleinschreibung.
/.../gi | /aus/gi | findet "aus", so oft wie es in dem gesamten zu durchsuchenden Bereich vorkommt (g) und unabhängig von Groß-/Kleinschreibung (i).

Umfangreichere Informationen über reguläre Ausdrücke finden Sie innerhalb dieser Dokumentation auf der Seite Seite reguläre Ausdrücke in Perl.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen $[1..9]

Speichert die umklammerten Bestandteile eines regulären Ausdrucks. Diese lassen sich benutzen, um bestimmte Teile eines Strings zu extrahieren oder unter Zuhilfenahme der Funktion Seite replace() zu ersetzen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var string = "Dies ist ein Verweis nach: http://de.selfhtml.org/";
var neu = string.replace(/(http:\/\/\S*)/g, '<a href="$1">$1<\/a>');
alert("alter String:\n" + string + "\n\nneuer String:\n" + neu + "\n\nDer Verweis lautete: " + RegExp.$1);
</script>
</body></html>

Erläuterung:

Das Beispiel zeigt eine typische Anwendung von Seite replace(). Der Ausdruck sucht in einem String nach einer URL in der Art http://domain.tld und ersetzt alle gefundenen Stellen durch einen HTML-Verweis. Das geschieht, indem der Suchausdruck geklammert wird. Im zweiten Parameter, dem Ersatz-String, wird auf den Treffer dieses geklammerten Suchausdrucks mit $1 verwiesen. An der Stelle der Nennung von $1 wird im Beispiel also jeweils der Treffer des Suchausdrucks (http:\/\/\S*) eingefügt, im Beispiel http://de.selfhtml.org/. Falls der Suchausdruck weitere Teile in Klammern erhält, können dessen Treffer im zweiten Parameter entsprechend mit $2, $3 usw. eingefügt werden.

Das Beispiel demonstriert zudem, wie nach dem Ausführen der replace()-Methode auf die Teiltreffer des Suchausdrucks zugegriffen werden kann. Sie werden jeweils als Eigenschaften des globalen RegExp-Objektes erstellt. Mit RegExp.$1 wird der erste Teiltreffer angesprochen, mit RegExp.$2 der zweite und so weiter.

RegExp.$1 und die folgenden Eigenschaften sind in den gängigen Browsern nach jeder Anwendung von regulären Ausdrücken entsprechend gefüllt, sofern Teile des Ausdrucks geklammert sind. Dies betrifft die Methoden Seite match(), Seite replace() und Seite search() von String-Objekten sowie die auf dieser Seite beschriebenen Methoden nach unten exec() und nach unten test().

Beachten Sie:

Safari und Konqueror bilden eine Ausnahme: Bei den Methoden match() und replace() werden RegExp.$1 und folgende Eigenschaften nicht gefüllt. Im obigen Beispiel gelingt das Auslesen des Teiltreffers in diesen Browsern daher nicht. Es müsste z.B. ausdrücklich exec() ausgeführt werden, um an die Teiltreffer zu kommen.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 exec()

Wendet einen regulären Ausdruck einmalig auf eine Zeichenkette an und gibt einen Array mit dem Treffer des Gesamtausdrucks sowie die Treffer der geklammerten Teilausdrücke zurück. Wenn der Ausdruck nicht auf die Zeichenkette passt, gibt die Methode null zurück.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var derSatz = "Auf der Mauer, auf der Lauer sitzt 'ne kleine Wanze.";
var Suche = /der (\w*)(.*)/;
var Ergebnis = Suche.exec(derSatz);
document.write("<p>Originaltext: '<i>" + Ergebnis.input + "<\/i>'<\/p>");
document.write("<p>Treffer des Gesamtausdrucks: '<i>" + Ergebnis[0] +
  "<\/i>' an der Position " + Ergebnis.index + "<\/p>");
document.write("<p>Die Treffer der Teilausdrücke im Einzelnen:<\/p>");
document.write("<ol>");
for (var i = 1; i < Ergebnis.length; i++) {
  document.write("<li>'<i>" + Ergebnis[i] + "<\/i>'<\/li>");
}
document.write("<\/ol>");
</script>
</body></html>

Erläuterung:

Das Beispiel demonstriert die Anwendung eines regulären Ausdrucks auf eine Zeichenkette und den umfassenden Zugriff auf die Treffer und Teiltreffer. Zunächst wird ein regulärer Ausdruck mit dem Namen Suche definiert. Er besteht aus dem festen Anfang der gefolgt von einer beliebigen Anzahl von alphanumerischen Zeichen bzw. oder Unterstrichen (\w*). Danach kann eine beliebige Anzahl von beliebigen Zeichen folgen (.*). Um die Teilausdrücke \w* und .* sind jeweils Klammern notiert, sodass später deren Treffer ausgelesen werden können.

Mit dem Methoden-Aufruf Suche.exec() wird der reguläre Ausdruck auf eine Zeichenkette angewandt. Als Parameter wird der Methode der zu durchsuchende Ausdruck übergeben. Die Methode gibt einen Array mit den Treffern zurück, der in der Variable Ergebnis gespeichert wird.

Im Folgenden werden die Informationen aus dem Array mit Seite document.write() ausgegeben. Das erste Element des Arrays (mit dem Index 0) ist der Treffer des Gesamtausdrucks. In den nachfolgenden Array-Elementen (mit dem Index 1 und darüber) sind die Teilstrings gespeichert, auf die die eingeklammerte Ausdrucksteile gepasst haben.

Das Beispiel durchläuft den Array mit einer for-Schleife und gibt auf diese Weise alle Teiltreffer aus. Zudem werden zwei besondere Objekteigenschaften des von exec() zurückgegebenen Arrays demonstriert: index und input. Diese kennt ein gewöhnlicher Array nicht. In der Eigenschaft index ist die Index-Position des Treffers des Gesamtausdrucks gespeichert (beginnend mit 0 für das erste Zeichen der Zeichenkette). In der Eigenschaft input ist die Zeichenkette gespeichert, auf die der Ausdruck mittels exec() angewendet wurde.

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var derSatz = "Auf der Mauer, auf der Lauer sitzt 'ne kleine Wanze.";
var Suche = /auf der (\w*)/gi;
var Ergebnis;
document.write("<ol>");
while (Ergebnis = Suche.exec(derSatz)) {
  document.write("<li>" + Ergebnis[1] + "<\/li>");
}
document.write("<\/ol>");
</script>
</body></html>

Erläuterung:

Das obige Beispiel veranschaulicht das mehrfache Anwenden von exec(), um alle möglichen Treffer eines Ausdrucks in Erfahrung zu bringen. Eine ähnliche Aufgabe ist zwar mit Seite match() lösbar, aber match() erlaubt keinen Zugriff auf die jeweiligen Teiltreffer. Über nach oben RegExp.$1 und folgende Eigenschaften können lediglich die Teiltreffer des letzten Vorkommens gelesen werden. exec() hat diese Einschränkung nicht.

Zunächst wird ein regulärer Ausdruck mit dem Zusatz /.../gi definiert. Die Angabe g stellt sicher, dass exec() mehrmals auf einen String angewendet werden kann und dadurch alle Vorkommen gefunden werden. Die Angabe i stellt sicher, dass die Groß- und Kleinschreibung bei der Suche keine Rolle spielt. Der Ausdruck passt auf den festen Text auf der gefolgt von einem Wort beliebiger Länge (\w*).

Damit exec() genau so oft ausgeführt wird, wie weitere Vorkommen gefunden werden, wird eine spezielle while-Schleife benutzt. Als Schleifenbedingung wird nicht wie üblich ein einfacher logischer Ausdruck (z.B. i > 5) notiert, sondern die Wertzuweisung Ergebnis = Suche.exec(derSatz). - Dies ist möglich, da eine Wertzuweisung ebenfalls ein Ausdruck ist, wie z.B. window.alert(Variable = "Wert"); veranschaulicht. - Ihr Ergebnis gleicht dem des rechten Bestandteils Suche.exec(derSatz), also dem exec()-Aufruf. Dies ist entweder einen Array mit den Suchergebnissen, falls ein Vorkommen gefunden wurde, oder null, falls keine weiteren Vorkommen existieren. Als Ergebnis des Ausdrucks an der Stelle while (Ausdruck) { ... } wird entweder true oder false erwartet. Daher wandelt JavaScript das Ergebnis von Suche.exec(derSatz) entsprechend um. Ein Array gilt als true, sodass die Schleife im Erfolgsfalle fortgesetzt wird. Der Wert null gilt als false, sodass die Schleife abgebrochen wird, nachdem das letzte Vorkommen gefunden wurde.

Im Schleifenkörper wird der Array Ergebnis verwendet. Dieser ist bei jedem Schleifendurchlauf neu gefüllt, da vor jedem Durchlauf die Schleifenbedingung ausgeführt wird - in diesem Fall der Aufruf von exec() und das Speichern des Rückgabewerts in der Variable Ergebnis. Über Ergebnis[1] wird schließlich der Treffer des ersten Teilausdrucks ausgegeben.

Beachten Sie:

Wie im nach oben Eingangsbeispiel illustriert, können Sie auf die Teiltreffer eines exec()-Aufrufs anstatt über den zurückgegebenen Array auch über nach oben RegExp.$1 und folgende Eigenschaften zugreifen. Diese Zugriffsweise wird allerdings seit der JavaScript-Version 1.5 als veraltet eingestuft und ist zumindest im Zusammenhang mit exec() auch praktisch unnötig.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 test()

Testet vorab, ob ein regulärer Ausdruck zu Suchtreffern führt oder nicht. Gibt true zurück, wenn etwas gefunden wurde, und false, wenn nichts gefunden wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var derSatz = "Auf der Mauer";
var Suche = /(sonstwas)/g;
var Ergebnis = Suche.test(derSatz);
if (Ergebnis == false)
  document.write("nichts gefunden");
</script>
</body></html>

Erläuterung:

Das Beispiel definiert einen regulären Ausdruck namens Suche und wendet ihn mit Hilfe der Methode test() auf die Variable derSatz an. Der Rückgabewert wird in der Variablen Ergebnis gespeichert. Wenn nichts gefunden wird, wird ein entsprechender Hinweis geschrieben. Im Beispiel ist das der Fall.

nach oben
weiter | Seite screen
zurück | Seite Number
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / screen

SELFHTML

screen
Informationsseite

nach unten Allgemeines zur Verwendung

Eigenschaften:

nach unten availHeight (verfügbare Höhe)
nach unten availWidth (verfügbare Breite)
nach unten colorDepth (Farbtiefe)
nach unten height (Höhe)
nach unten pixelDepth (Farbauflösung)
nach unten width (Breite)

nach unten

screen: Allgemeines zur Verwendung

Mit dem Objekt screen können Sie Angaben zum Bildschirm des Anwenders ermitteln. Diese Angaben werden oft dazu verwendet, das Layout einer Web-Seite oder die Fenstergröße an die zur Verfügung stehenden Bildschirmgröße anzupassen. Das screen-Objekt liefert jedoch im Hinblick darauf unzuverlässigen Werte, daher hat seine Bedeutung abgenommen. Das Auslesen der Größe desjenigen Bereiches im Browserfenster, in dem letztlich die Web-Seite letztendlich dargestellt wird, ist z.B. über Seite window.innerWidth und Seite document.body.offsetWidth möglich.
Das screen-Objekt ist bei Netscape und beim Internet Explorer ab den 4er Versionen verfügbar.

Eigenschaften des screen-Objekts können Sie direkt ansprechen, indem Sie screen davor notieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
alert(screen.width + "x" + screen.height);
</script>
</head><body>
</body>
</html>

Erläuterung:

Das Beispiel gibt beim Einlesen der Datei Breite (screen.width) mal Höhe (screen.height) des Anwenderbildschirms aus. Es handelt sich dabei um die Angabe in Pixeln, Ergebnisse sind also etwa 800x600 oder 1024x768.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen availHeight

Speichert die maximal verfügbare Bildschirmhöhe in Pixeln, die eine Anwendung im Vollbildmodus einnehmen kann. Unterscheidet sich von nach unten screen.height, wenn feste Bildschirmelemente wie immer eingeblendete Taskleisten usw. einen Teil des Bildschirms oben oder unten einnehmen. Während height dann beispielsweise 768 liefert, gibt availHeight z.B. nur 712 aus, weil eine Taskleiste 56 Pixel Höhe einnimmt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (screen.availHeight != screen.height)
  alert("Sie sehen mehr von dieser Seite, wenn Sie die Taskleiste ausblenden");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel vergleicht die beiden Eigenschaften screen.availHeight und screen.height. Wenn beide nicht den gleichen Wert speichern, hat der Anwender vermutlich seine Taskleiste immer im Vordergrund. Das Beispiel gibt in diesem Fall einen entsprechenden Hinweis aus.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen availWidth

Speichert die maximal verfügbare Bildschirmbreite in Pixeln, die eine Anwendung im Vollbildmodus einnehmen kann. Unterscheidet sich von nach unten screen.width, wenn feste Bildschirmelemente wie immer eingeblendete Taskleisten usw. links oder rechts einen Teil des Bildschirms einnehmen. Während width dann beispielsweise 1024 liefert, gibt availWidth z.B. nur 940 aus, weil an einer Seite eine Taskleiste 84 Pixel Breite einnimmt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (screen.availWidth != screen.width)
  alert("Sie haben wohl seitlich eine Taskbar!");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel vergleicht die beiden Eigenschaften screen.availWidth und screen.width. Wenn beide nicht den gleichen Wert speichern, hat der Anwender vermutlich seine Taskleiste immer im Vordergrund. Das Beispiel gibt in diesem Fall einen entsprechenden Hinweis aus.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen colorDepth

Speichert die Anzahl Bits, die der Anwenderbildschirm zur Darstellung einer Farbe an jedem Pixelpunkt des Bildschirms verwendet. Ein Wert von 16 bedeutet beispielsweise: der Bildschirm kann 2 hoch 16, also 65536 Farben darstellen. Diese Eigenschaft hat dann einen Wert, wenn der Anwenderbildschirm intern eine Farbpalette benutzt. Andernfalls wird undefined (Netscape) oder null (Internet Explorer) gespeichert. Bei Netscape können Sie dann die Eigenschaft nach unten pixelDepth abfragen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
alert(Math.pow(2, screen.colorDepth));
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ermittelt die Anzahl Farben, die der Anwenderbildschirm darstellen kann, durch Anwendung der Seite Math-Methode pow(). Mit Math.pow(2,screen.colorDepth) wird der Wert, den screen.colorDepth speichert, als Exponent zur Basis 2 benutzt. Das Ergebnis ist also 2 hoch screen.colorDepth.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen height

Speichert die absolut verfügbare Höhe des Anwenderbildschirms in Pixeln, besser bekannt als Höhe der Bildschirmauflösung. Typische Werte sind 480, 600 und 768.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (screen.height >= 768) {
  window.location.href = "datei1.htm";
} else {
  window.location.href = "datei2.htm";
}
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel fragt ab, ob die verfügbare Bildschirmhöhe größer oder gleich 768 ist. Wenn ja, wird automatisch datei1.htm geladen, wenn nicht (also wenn die Bildschirmhöhe kleiner ist), wird datei2.htm geladen.

JavaScript 1.2 Netscape 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen pixelDepth

Speichert die Farbtiefe des Anwenderbildschirms in Bit pro Pixel. Diese Eigenschaft hat dann einen Wert, wenn der Anwenderbildschirm intern eine Farbpalette benutzt. Andernfalls wird undefined (Netscape) oder null (Internet Explorer) gespeichert, und Sie müssen die Eigenschaft nach oben colorDepth abfragen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (screen.pixelDepth)
  alert(screen.pixelDepth);
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel ermittelt, ob für screen.pixelDepth ein Wert verfügbar ist. Wenn ja, wird der Wert in einem Meldungsfenster ausgegeben.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Lesen width

Speichert die absolut verfügbare Breite des Anwenderbildschirms in Pixeln, besser bekannt als Breite der Bildschirmauflösung. Typische Werte sind 640, 800 und 1024.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
if (screen.width >= 1024) {
  window.location.href = "datei1.htm";
} else {
  window.location.href = "datei2.htm";
}
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel fragt ab, ob die verfügbare Bildschirmbreite größer oder gleich 1024 ist. Wenn ja, wird automatisch datei1.htm geladen, wenn nicht (also wenn die Bildschirmbreite kleiner ist), wird datei2.htm geladen.

nach oben
weiter | Seite String
zurück | Seite RegExp
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / String

SELFHTML

String
Informationsseite

nach unten Allgemeines zur Verwendung

Eigenschaften:

nach unten length (Anzahl Zeichen)

Methoden:

nach unten anchor() (Verweisanker erzeugen)
nach unten big() (großen Text erzeugen)
nach unten blink() (blinkenden Text erzeugen)
nach unten bold() (fetten Text erzeugen)
nach unten charAt() (Zeichen an einer Position ermitteln)
nach unten charCodeAt() (Unicode-Zeichennummer an einer Position)
nach unten concat() (Zeichenketten zusammenfügen)
nach unten fixed() (Teletyper-Text erzeugen)
nach unten fontcolor() (Schriftfarbe erzeugen)
nach unten fontsize() (Schriftgröße erzeugen)
nach unten fromCharCode() (Unicode-Zeichen erzeugen)
nach unten indexOf() (Position eines Zeichens ermitteln)
nach unten italics() (kursiven Text erzeugen)
nach unten lastIndexOf() (letzte Position eines Zeichens ermitteln)
nach unten link() (Verweis erzeugen)
nach unten match() (Regulären Ausdruck anwenden)
nach unten replace() (Regulären Ausdruck anwenden und ersetzen)
nach unten search() (Suchen mit Regulärem Ausdruck)
nach unten slice() (Teil aus Zeichenkette extrahieren)
nach unten small() (kleinen Text erzeugen)
nach unten split() (Zeichenkette aufsplitten)
nach unten strike() (durchgestrichenen Text erzeugen)
nach unten sub() (tiefgestellten Text erzeugen)
nach unten substr() (Teilzeichenkette ab Position ermitteln)
nach unten substring() (Teilzeichenkette ermitteln)
nach unten sup() (hochgestellten Text erzeugen)
nach unten toLowerCase() (alles klein schreiben)
nach unten toUpperCase() (alles groß schreiben)

nach unten

Allgemeines zur Verwendung

Die Eigenschaften und Methoden des Objektes String können Sie auf alle Zeichenketten anwenden. So können Sie in einer Zeichenkette z.B. alle darin enthaltenen Kleinbuchstaben in Großbuchstaben umwandeln, oder HTML-Formatierungen auf die Zeichenkette anwenden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Ort = "Friedrichshafen";
alert(Ort + " hat " + Ort.length + " Buchstaben");
</script>
</head>
<body>
</body></html>

Erläuterung:

Im Beispiel wird eine Variable Ort definiert, der ein Wert zugewiesen wird, nämlich der Wert Friedrichshafen. Anschließend wird in einem Meldungsfenster ausgegeben: Friedrichshafen hat 15 Buchstaben. Dies geschieht durch einen Aufruf der Objekteigenschaft length. Vor dem Punkt kann also eine Variable oder auch irgendeine andere JavaScript-Objekteigenschaft stehen, in der eine Zeichenkette gespeichert ist. Hinter dem Punkt folgt die gewünschte Eigenschaft oder Methode des String-Objekts.

Zeichenketten in JavaScript werden als eine Kette von Einzelzeichen betrachtet. Jedes Einzelzeichen hat seine Position in der Zeichenkette:

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Name = "Hans";
alert(Name[0] + Name[1] + Name[2] + Name[3]);
</script>
</head>
<body>
</body></html>

Erläuterung:

Das Beispiel, das in dieser Form allerdings nur mit Netscape, nicht mit dem Internet Explorer und Opera funktioniert, definiert eine Variable mit den Namen Name. Diese Variable erhält den Wert "Hans". In einem Meldungsfenster wird anschließend zeichenweise dieser Wert der Variablen Name ausgegeben. Das Ergebnis ist das gleiche, wie wenn einfach alert(Name) notiert würde. Aber an dieser Notationsform können Sie erkennen, wie Zeichenketten funktionieren: Name[0] ist das H, Name[1] das a, Name[2] das n und Name[3] das s. Es wird also immer bei 0 zu zählen begonnen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Safari 1.0 Lesen length

Speichert die Anzahl Zeichen einer Zeichenkette, bei der Zeichenkette "Guten Abend" beispielsweise 11.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Eingabe = window.prompt("Irgendetwas eingeben", "");
alert("Eingegebene Zeichen: " + Eingabe.length);
</script></body></html>

Erläuterung:

Das Beispiel blendet ein Dialogfenster ein, in dem der Anwender irgendetwas eingeben kann. Der eingegebene Wert wird in der Variablen Eingabe gespeichert. Nach Beenden des Dialogfensters wird ein Meldungsfenster ausgegeben, das mit Eingabe.length ausgibt, wie viele Zeichen eingegeben wurden.

JavaScript 1.0 Netscape 2.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 anchor()

Formatiert eine Zeichenkette als Verweisanker, der mit Hilfe eines HTML-Verweises angesprungen werden kann. Hat also die gleiche Wirkung wie der HTML-Konstrukt <a name=>...</a>. Als Parameter erwartet die Methode den gewünschten Ankernamen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Anker = "Inhaltsverzeichnis";
document.write(Anker.anchor("a1"));
for (var i = 1; i < 100; ++i)
  document.write("<br>Zeile " + i);
document.write('<br><a href="#a1">Testverweis<\/a>');
</script></body></html>

Erläuterung:

Das Beispiel definiert eine Variable Anker mit dem Wert Inhaltsverzeichnis. Mit Hilfe von document.write() wird daraus ein Verweisanker geschrieben. Die Konstruktion Anker.anchor("a1") bewirkt dabei das gleiche wie der HTML-Konstrukt <a name="a1">Inhaltsverzeichnis</a>. Zu Testzwecken werden im Beispiel anschließend 100 Zeilen in die Datei geschrieben und dahinter ein Verweis. Beim Klicken auf den Verweis wird der mit JavaScript erzeugte Verweisanker angesprungen.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 big()

Formatiert eine Zeichenkette mit größerer Schrift, genau wie die HTML-Formatierung <big>...</big>. Erwartet als Parameter eine Zeichenkette.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var update = document.lastModified;
document.write(update.big());
</script></body></html>

Erläuterung:

Im Beispiel ermittelt ein JavaScript mit Hilfe von document.lastModified, wann die Datei zuletzt geändert wurde. In der Variablen update steht dann eine entsprechende Zeichenkette. Mit Hilfe von document.write() wird der Wert von update in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <big>...</big>.

Beachten Sie:

Konqueror und Safari interpretieren zwar big, können jedoch das Anzeigebeispiel nicht darstellen, da diese Browser lastModified nicht interpretieren.

JavaScript 1.0 Netscape 2.0 Opera 7.20 Mozilla Firefox 1 blink()

Formatiert eine Zeichenkette als blinkenden Text, genau wie die HTML-Formatierung <blink>...</blink>.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Ausgabe = "Best viewed only with your " + navigator.appName;
document.write(Ausgabe.blink());
</script></body></html>

Erläuterung:

Im Beispiel wird eine Variable namens Ausgabe mit einem Wert belegt. Mit Hilfe von document.write() wird der Wert von Ausgabe in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <blink>...</blink>.

Beachten Sie:

Obwohl weder Opera 5.12 und 6, Netscape 6, Internet Explorer, Konqueror noch Safari die HTML-Notation <blink>...</blink> unterstützen, interpretieren diese Browser die Methode und erzeugen den entsprechenden HTML-Code; allerdings blinkt er nicht.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 bold()

Formatiert eine Zeichenkette als fetten Text, genau wie die HTML-Formatierung <b>...</b>.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var DieseSeite = window.location.href;
document.write("Adresse: " + DieseSeite.bold());
</script></body></html>

Erläuterung:

Im Beispiel ermittelt ein JavaScript mit Hilfe von window.location.href den URI der aktuellen Datei. In der Variablen DieseSeite steht dann eine entsprechende Zeichenkette. Mit Hilfe von document.write() wird der Wert von update in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <b>...</b>.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 charAt()

Liefert dasjenige Zeichen zurück, das in einer Zeichenkette an einer bestimmten Position steht. Erwartet als Parameter die gewünschte Position.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Vollversion = navigator.appVersion.charAt(0);
alert(Vollversion);
</script></body></html>

Erläuterung:

Im Beispiel ermittelt ein JavaScript mit Hilfe von navigator.appVersion, welche Version seines Browsers der Anwender benutzt. Auf navigator.appVersion wird jedoch zusätzlich die Methode charAt() angewendet. Als Parameter wird 0 übergeben, denn es soll das erste Zeichen des Wertes ermittelt werden, der in navigator.appVersion steht (dies ist immer die Nummer der Vollversion, also bei Netscape 4.01 etwa die 4). Das Ergebnis der Konstruktion wird in der Variablen Vollversion gespeichert. Zur Kontrolle wird der Wert dieser Variablen anschließend in einem Meldungsfenster ausgegeben.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 charCodeAt()

Liefert die Nummer eines Zeichens in der Seite Unicode-Codetabelle zurück, das in einer Zeichenkette an einer bestimmten Position steht. Erwartet als Parameter die gewünschte Position.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Name = "Hans";
alert(Name.charCodeAt(1));
</script></body></html>

Erläuterung:

Im Beispiel wird eine Variable Name mit dem Wert Hans belegt. In einem Meldungsfenster wird anschließend ausgegeben, welche Zeichennummer das zweite Zeichen dieser Variablen hat, also das "a" in "Hans". Dazu wird charCodeAt als Parameter 1 übergeben, denn in JavaScript hat das erste Zeichen einer Zeichenkette immer die Position 0, das zweite die Position 1 usw.
Als Ergebnis wird 97 angezeigt. Dies ist die Zeichennummer des kleinen "a" in der Unicode-Codetabelle.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 concat()

Hängt eine Zeichenkette an eine andere Zeichenkette an. Erwartet als Parameter die Zeichenkette, die an die erste angehängt werden soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Vorname = "Hans ";
var Zuname = "Hansen";
var Name = Vorname.concat(Zuname);
alert(Name);
</script></body></html>

Erläuterung:

Im Beispiel werden zwei Variablen Vorname und Zuname mit entsprechenden Werten belegt. Dann wird die Methode concat() auf die Variable Vorname angewendet. Als Parameter wird der Methode die Variable Zuname übergeben. Auf diese Weise wird Zuname an Vorname angehängt. Die Methode concat() gibt die zusammengefügte Zeichenkette zurück. Im Beispiel wird dieser Rückgabewert in der Variablen Name gespeichert. Zur Kontrolle wird diese Variable anschließend in einem Meldungsfenster ausgegeben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 fixed()

Formatiert eine Zeichenkette als Teletyper-Text, genau wie die HTML-Formatierung <tt>...</tt>.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var update = document.lastModified;
document.write("zuletzt aktualisiert: " + update.fixed());
</script></body></html>

Erläuterung:

Im Beispiel ermittelt ein JavaScript mit Hilfe von document.lastModified, wann die Datei zuletzt geändert wurde. In der Variablen update steht dann eine entsprechende Zeichenkette. Mit Hilfe von document.write() wird der Wert von update in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <tt>...</tt>.

Beachten Sie:

Konqueror und Safari interpretieren zwar fixed, können jedoch das Anzeigebeispiel nicht darstellen, da diese Browser lastModified nicht interpretieren.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 fontcolor()

Formatiert eine Zeichenkette in farbiger Schrift, genau wie die HTML-Formatierung <font color=>...</font>. Erwartet als Parameter die gewünschte Farbe.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Zeit = new Date;
var Datum = Zeit.getDate() + "." + (Zeit.getMonth() + 1) + "." + Zeit.getFullYear();
document.write(Datum.fontcolor("#FF0000"));
</script></body></html>

Erläuterung:

Im Beispiel erzeugt mit Hilfe des Seite Date-Objekts das aktuelle Tagesdatum und speichert dieses in der Variablen Datum. Mit Hilfe von document.write() wird der Wert von Datum in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <font color="#FF0000">...</font>. Als Werte sind hexadezimale Werte oder Farbnamen erlaubt (siehe Seite Farben definieren in HTML).

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 fontsize()

Formatiert eine Zeichenkette in einer relativen Schriftgröße zwischen 1 und 7, wobei 3 die Normalschriftgröße ist. Hat die gleiche Wirkung wie die HTML-Formatierung <font size=>...</font>. Erwartet als Parameter die gewünschte Größe der Schrift.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Ausgabe = "Meine Homepage";
document.write(Ausgabe.fontsize(7));
</script></body></html>

Erläuterung:

Im Beispiel wird eine Variable namens Ausgabe mit einem Wert belegt. Mit Hilfe von document.write() wird der Wert von Ausgabe in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <font size="7">...</font>.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 fromCharCode()

Interpretiert eine Reihe von numerischen Parametern als Unicode-Zeichennummern. Erzeugt eine entsprechende Zeichenkette daraus.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Test = String.fromCharCode(65, 66, 67);
alert(Test);
</script></body></html>

Erläuterung:

Im Beispiel wird mit String.fromCharCode() die Zeichenkette "ABC" erzeugt und in der Variablen Test gespeichert. Die Zeichenkette kommt dadurch zustande, dass 65 die dezimale Zeichennummer für A in der Seite Unicode-Codetabelle ist, 66 derjenige für B und 67 der für C. Im Beispiel wird das Ergebnis zur Kontrolle in einem Meldungsfenster ausgegeben.
Wichtig ist, vor der Methode fromCharCode() immer das feste Schlüsselwort String (großgeschrieben) zu notieren.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 indexOf()

Ermittelt das erste Vorkommen eines Zeichens oder einer Zeichenkette innerhalb einer Zeichenkette und gibt zurück, an wie vielter Stelle das Zeichen in der Zeichenkette steht. Die Zählung beginnt bei 0. Wenn die Suche erfolglos ist, wird -1 zurückgegeben.
Optional ist es möglich, die Funktion in einem zweiten Parameter anzuweisen, ab der wie vielten Stelle in der Zeichenkette sie mit der Suche beginnen soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Aussage = "Der Mensch ist dem Mensch sein Feind";
var Suche = Aussage.indexOf("Mensch");
alert("gefunden bei Position: " + Suche);
</script></body></html>

Erläuterung:

Im Beispiel belegt eine Variable Aussage mit einem Wert. Anschließend wird der Wert dieser Variablen mit indexOf() nach dem ersten Vorkommen von Mensch innerhalb der Zeichenkette gesucht. In der Variablen Suche wird der Rückgabewert von indexOf() gespeichert. Im Beispiel wird 4 zurückgegeben, da die Zeichenfolge Mensch in der durchsuchten Zeichenkette zum ersten Mal an 5. Stelle der Zeichenkette beginnt.

Vergleiche auch: nach unten lastIndexOf().

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 italics()

Formatiert eine Zeichenkette kursiv, genau wie die HTML-Formatierung <i>...</i>.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Zeit = new Date;
var Uhrzeit = Zeit.getHours() + ":" + Zeit.getMinutes();
document.write(Uhrzeit.italics());
</script></body></html>

Erläuterung:

Im Beispiel erzeugt mit Hilfe des Seite Date-Objekts die aktuelle Uhrzeit und speichert diese in der Variablen Uhrzeit. Mit Hilfe von document.write() wird der Wert von Uhrzeit in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <i>...</i>.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 lastIndexOf()

Ermittelt das letzte Vorkommen eines Zeichens oder einer Zeichenkette innerhalb einer Zeichenkette und gibt zurück, an wie vielter Stelle das Zeichen in der Zeichenkette steht. Die Zählung beginnt bei 0. Wenn die Suche erfolglos ist, wird -1 zurückgegeben.
Optional ist es möglich, die Funktion in einem zweiten Parameter anzuweisen, ab der wie vielten Stelle in der Zeichenkette sie mit der Suche beginnen soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Aussage = "Der Mensch ist dem Mensch sein Feind";
var Suche = Aussage.lastIndexOf("Mensch");
alert("gefunden bei Position: " + Suche);
</script></body></html>

Erläuterung:

Im Beispiel belegt eine Variable Aussage mit einem Wert. Anschließend wird der Wert dieser Variablen mit lastIndexOf() nach dem letzten Vorkommen von Mensch innerhalb der Zeichenkette gesucht. In der Variablen Suche wird der Rückgabewert von lastIndexOf() gespeichert. Im Beispiel wird 19 zurückgegeben, da die Zeichenfolge Mensch in der durchsuchten Zeichenkette zum letzten Mal an 20. Stelle der Zeichenkette beginnt.

Vergleiche auch: nach oben indexOf().

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 link()

Formatiert eine Zeichenkette als Verweis. Hat den gleichen Effekt wie die HTML-Formatierung <a href=>...</a>. Erwartet als Parameter einen URI für das Verweisziel.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<p><script type="text/javascript">
var Homepage = "zu meiner Homepage";
document.write(Homepage.link("home.htm"))
</script></p>
<p><script type="text/javascript">
document.write(document.referrer.link(document.referrer));
</script></p>
</body></html>

Erläuterung:

Das Beispiel im ersten Script belegt zunächst eine Variable Homepage mit einem Wert. Daran anschließend wird mit document.write() ein Verweis geschrieben. Dazu wird die Methode link() auf die Variable Homepage angewendet. Der Wert von Homepage wird dabei der Verweistext. Als Parameter wird das gewünschte Verweisziel übergeben, im Beispiel die Datei home.htm.

Das Beispiels im zweiten Script erzeugt dynamisch einen Verweis zu der Adresse, von wo aus der Anwender die aktuelle Seite aufgerufen hat. Dabei liefert die Eigenschaft document.referrer die Adresse der Herkunftsseite. Das Beispiel ist so konstruiert, dass hinterher die Adresse von document.referrer sowohl das Verweisziel als auch der Verweistext ist.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 match()

Durchsucht eine Zeichenkette mit Hilfe eines regulären Ausdrucks. Liefert Zeichenfolgen, auf die der reguläre Ausdruck passt, zurück. Erwartet als Parameter den regulären Ausdruck.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Aussage = "Der Mensch ist des Menschen sein Feind";
var Ergebnis = Aussage.match(/Mensch\S{2}/);
alert("Test 1: " + Ergebnis);
</script>
<script type="text/javascript">
Aussage = "Der Mensch ist des Menschen sein Feind";
Ergebnis = Aussage.match(/\bMensch\b|\bMenschen\b/g);
if (Ergebnis)
  for (var i = 0; i < Ergebnis.length; ++i)
    alert("Test 2: Fund " + i + " - " + Ergebnis[i]);
</script>
<script type="text/javascript">
Aussage = "Wir wollen weisse Waesche waschen";
Ergebnis = Aussage.match(/w/gi);
if (Ergebnis)
  alert("Test 3: " + Ergebnis.length + " gefunden");
</script>
</body></html>

Erläuterung:

Das erste Script (Test 1) im Beispiel belegt eine Variable Aussage mit einem Wert. Auf den gespeicherten Wert dieser Variablen wird mit match() ein regulärer Ausdruck angewendet. Dieser findet die Zeichenfolge "Mensch", wenn noch zwei weitere Zeichen folgen, aber nicht, wenn ein Leerzeichen dabei ist. Auf diese Weise wird nur das hintere Wort "Menschen" gefunden. Das Ergebnis wird in einem Meldungsfenster ausgegeben.

Das zweite Script (Test 2) im Beispiel wendet auf den gespeicherten Wert der Variablen Aussage mit match() ein anderen regulären Ausdruck an. Dieser findet die Zeichenfolge "Mensch" oder die Zeichenfolge "Menschen". Hinter dem Ausdruck ist außerdem mit g markiert, dass global gesucht werden soll. Dadurch werden alle Fundstellen zurückgegeben. Da es sich um mehrere Fundstellen handeln kann, ist der zurückgegebene Wert kein einfacher Wert, sondern ein Array aus Werten. Die Variable Ergebnis, in der der Rückgabewert im Beispiel gespeichert wird, muss deshalb anschließend als Array behandelt werden. Das Array-Objekt wird jedoch nur erzeugt, wenn es Suchtreffer gibt. Deshalb ist es sicherer, folgende Anweisungen von der Abfrage abhängig zu machen, ob das Objekt existiert. Mit if (Ergebnis) ist eine solche Abfrage möglich. Im Beispiel werden dann in einer for-Schleife alle Suchtreffer ausgegeben.

Das dritte Script (Test 3) im Beispiel belegt die Variable Aussage mit einem neuen Wert, in dem der Buchstabe w oft vorkommt, mal klein- und mal großgeschrieben. Auf den gespeicherten Wert dieser Variablen wird mit match() ein regulärer Ausdruck angewendet. Dieser sucht nach dem Vorkommen von w, und zwar wieder, wie im zweiten Script, global. Es werden also alle Fundstellen als Array zurückgegeben. Im Beispiel sollen jedoch sowohl klein- als auch großgeschriebene w gefunden werden. Deshalb wird hinter dem regulären Ausdruck noch zusätzlich ein kleines i notiert. Dies bewirkt, dass Groß-/Kleinschreibung nicht beachtet wird. Zur Kontrolle wird im Beispiel die Anzahl der Fundstellen ausgegeben.

Näheres über reguläre Ausdrücke finden Sie beim Seite RegExp-Objekt.

Näheres über Arrays wird beim Seite Array-Objekt beschrieben.

Um nicht gefundene Zeichenfolgen, sondern nur Positionen gefundener Ausdrücke zu ermitteln, können Sie die Methode nach unten search() verwenden.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 replace()

Durchsucht eine Zeichenkette mit Hilfe eines regulären Ausdrucks. Ersetzt Zeichenfolgen, auf die der reguläre Ausdruck passt. Erwartet folgende Parameter:
1. regulärer Ausdruck = Ein regulärer Ausdruck, der Suchtreffer liefern kann.
2. Ersetzen durch = eine Zeichenkette, durch die gefundene Stellen ersetzt werden sollen.

Standardmäßig wird nur die erste gefundene Zeichenfolge ersetzt. Um mit einem Aufruf von replace() alle Vorkommen zu ersetzen, müssen Sie den regulären Ausdruck mit dem g-Parameter notieren, z.B. /Zeichenfolge/g.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var vormals = "Elke Hinz";
var jetzt = vormals.replace(/Hinz/g, "Kunz, geb. Hinz");
document.write(jetzt);
</script></body></html>

Erläuterung:

Das Script im Beispiel belegt eine Variable vormals mit einem Namen. Auf den gespeicherten Namen wird mit replace() ein Suchen-Ersetzen-Vorgang angewendet. Der erste Parameter, der replace() übergeben wird, ist ein regulärer Ausdruck. Dieser passt durch den g-Zusatz auf alle Vorkommen der Zeichenfolge "Hinz" in der Variable vormals. Der Suchtreffer des regulären Ausdrucks wird durch "Kunz, geb. Hinz" ersetzt. Das Ergebnis wird zur Kontrolle ausgegeben.

Näheres über reguläre Ausdrücke und weitere Beispiele für diese Methode finden Sie beim Seite RegExp-Objekt

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 search()

Durchsucht eine Zeichenkette mit Hilfe eines regulären Ausdrucks. Liefert -1 zurück, wenn der reguläre Ausdruck nicht passt. Wenn er passt, wird die Position des ersten Treffers zurück geliefert. Erwartet als Parameter den regulären Ausdruck.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Aussage = "Wir wollen weisse Waesche waschen";
var Ergebnis = Aussage.search(/weiss.+/);
if (Ergebnis != -1)
  alert("gefunden");
</script>
</body></html>

Erläuterung:

Das Beispiel belegt die Variable Aussage mit einem Wert. Auf den gespeicherten Wert dieser Variablen wird mit search() ein regulärer Ausdruck angewendet. Dieser sucht nach dem Vorkommen von "weiss", gefolgt von einem beliebigen Inhalt. Der Rückgabewert von search() wird in der Variablen Ergebnis gespeichert. Wenn diese am Ende ungleich -1 ist, gab es zu dem regulären Ausdruck Suchtreffer. Im Beispiel wird in diesem Fall einfach eine entsprechende Meldung ausgegeben.

Näheres über reguläre Ausdrücke finden Sie beim Seite RegExp-Objekt.

Um nicht Positionen gefundener Ausdrücke als Rückgabewerte zu erhalten, sondern die Ausdrücke selbst, können Sie die Methode nach oben match() verwenden.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 slice()

Extrahiert aus einer Zeichenkette eine Teilzeichenkette. Gibt die extrahierte Zeichenkette zurück. Erwartet folgende Parameter:
1. Index Anfang = Position des ersten zu extrahierenden Zeichens in der Zeichenkette, wobei bei 0 zu zählen begonnen wird.
2. Index Ende = Position des ersten nicht mehr zu extrahierenden Zeichens in der Zeichenkette, wobei bei 0 zu zählen begonnen wird.

Sie können den zweiten Parameter auch weglassen. Dann wird bis zum Ende der Zeichenkette extrahiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Begriff = "Garnele";
var Extrakt = Begriff.slice(0, 4);
alert(Extrakt);
</script></body></html>

Erläuterung:

Das Beispiel belegt die Variable Begriff mit einem Wert. Aus dem Wert dieser Variablen werden mit slice() die ersten vier Zeichen, also die Zeichen mit den Positionswerten 0, 1, 2 und 3, extrahiert. Der Rückgabewert der Funktion, die extrahierte Zeichenkette, wird im Beispiel in der Variablen Extrakt gespeichert. Diese wird zur Kontrolle als Meldung ausgegeben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 small()

Formatiert eine Zeichenkette als kleingeschriebenen Text, genau wie die HTML-Formatierung <small>...</small>.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var update = document.lastModified;
document.write(update.small());
</script></body></html>

Erläuterung:

Im Beispiel ermittelt ein JavaScript mit Hilfe von document.lastModified, wann die Datei zuletzt geändert wurde. In der Variablen update steht dann eine entsprechende Zeichenkette. Mit Hilfe von document.write() wird der Wert von update in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <small>...</small>.

Beachten Sie:

Konqueror und Safari interpretieren zwar small, können jedoch das Anzeigebeispiel nicht darstellen, da diese Browser lastModified nicht interpretieren.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 split()

Zerlegt Zeichenketten in mehrere Teilzeichenketten. Die erzeugten Teilzeichenketten werden in einem Array gespeichert. Erwartet als Parameter ein Begrenzerzeichen oder eine Begrenzerzeichenfolge, die als Trennmerkmal für die Teilzeichenketten verwendet werden soll. Optional kann als zweiter Parameter noch übergeben werden, wie viele Split-Vorgänge maximal erzeugt werden sollen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Satz = "Wer nicht vom rechten Weg abkommt bleibt auf der Strecke";
var Woerter = Satz.split(" ");
document.write("Ein Satz mit " + Woerter.length + " W&ouml;rtern.<br>");
document.write("Das 5. Wort ist " + Woerter[4]);
</script></body></html>

Erläuterung:

Das Beispiel belegt die Variable Satz mit einem Wert. Aus dem Wert dieser Variablen werden mit split() die einzelnen Wörter extrahiert. Dazu wird der Methode als Parameter ein Leerzeichen übergeben. Bei jedem Leerzeichen im Satz wird dadurch eine neue Teilzeichenkette erzeugt.
Der Rückgabewert der Funktion, die extrahierte Zeichenkette, wird im Beispiel in der Variablen Woerter gespeichert. Dies ist keine gewöhnliche Variable, sondern ein Array. Zu Testzwecken schreibt das Beispiel in die Datei, wie viele Elemente der Array hat (Woerter.length), und welches das 5. Wort ist. Dies ist das Wort mit dem Array-Index 4, da auch in diesem Fall bei 0 zu zählen begonnen wird.

Näheres über Arrays finden Sie beim Seite Array-Objekt.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 strike()

Formatiert eine Zeichenkette als durchgestrichenen Text, genau wie die HTML-Formatierung <strike>...</strike>.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
document.write(window.location.href.strike());
</script></body></html>

Erläuterung:

Im Beispiel schreibt ein JavaScript mit document.write() den URI der aktuellen Datei. Die Formatierung dabei entspricht der HTML-Formatierung <strike>...</strike>.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 sub()

Formatiert eine Zeichenkette als tiefgestellten Text, genau wie die HTML-Formatierung <sub>...</sub>.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Tief0 = "0";
document.write("ISDN und S" + Tief0.sub() + "-Bus");
</script></body></html>

Erläuterung:

Im Beispiel wird eine Variable Tief0 definiert, die das Zeichen 0 speichert. Mit Hilfe von document.write() wird dann ein Text in die Datei geschrieben. Die Formatierung der 0 entspricht dabei der HTML-Formatierung <sub>...</sub>.

JavaScript 1.2 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 substr()

Extrahiert aus einer Zeichenkette eine Teilzeichenkette ab einer bestimmten Zeichenposition und mit einer bestimmten Länge. Gibt die extrahierte Zeichenkette zurück. Erwartet folgende Parameter:
1. Index Anfang = Position des ersten zu extrahierenden Zeichens in der Zeichenkette, wobei bei 0 zu zählen begonnen wird.
2. Anzahl Zeichen = Anzahl Zeichen, die extrahiert werden sollen.
Der zweite Parameter ist optional. Wenn Sie ihn weglassen, werden alle Zeichen von der angegebenen Position bis zum Ende der Zeichenkette extrahiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Begriff = "Donaudampfschifffahrt";
var Teil = Begriff.substr(5, 11);
alert(Teil);
</script></body></html>

Erläuterung:

Das Beispiel belegt die Variable Begriff mit einem Wert. Aus dem Wert dieser Variablen werden mit substr() ein Teil extrahiert, nämlich ab Zeichen 6 (Index 5), und dann die folgenden 11 Zeichen.
Der Rückgabewert der Funktion, die extrahierte Zeichenkette, wird im Beispiel in der Variablen Teil gespeichert. Zur Kontrolle wird diese Variable als Meldungsfenster ausgegeben. Sie enthält den Wert "dampfschiff".

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 substring()

Extrahiert aus einer Zeichenkette eine Teilzeichenkette ab einer bestimmten Zeichenposition und bis zu einer bestimmten Zeichenposition. Gibt die extrahierte Zeichenkette zurück. Erwartet folgende Parameter:
1. Index Anfang = Position des ersten zu extrahierenden Zeichens in der Zeichenkette, wobei bei 0 zu zählen begonnen wird.
2. Index Ende = Position des ersten nicht mehr zu extrahierenden Zeichens in der Zeichenkette, wobei bei 0 zu zählen begonnen wird.
Der zweite Parameter ist optional. Wenn Sie ihn weglassen, werden alle Zeichen von der angegebenen Position bis zum Ende der Zeichenkette extrahiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Begriff = "Donaudampfschifffahrt";
var Teil = Begriff.substring(5, 16);
alert(Teil);
</script></body></html>

Erläuterung:

Das Beispiel belegt die Variable Begriff mit einem Wert. Aus dem Wert dieser Variablen werden mit substring() ein Teil extrahiert, nämlich ab Zeichen 6 (Index 5), und bis vor Zeichen 17 (Index 16).
Der Rückgabewert der Funktion, die extrahierte Zeichenkette, wird im Beispiel in der Variablen Teil gespeichert. Zur Kontrolle wird diese Variable als Meldungsfenster ausgegeben. Sie enthält den Wert "dampfschiff".

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 sup()

Formatiert eine Zeichenkette als hochgestellten Text, genau wie die HTML-Formatierung <sup>...</sup>.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<script type="text/javascript">
var Hoch2 = "2";
document.write("10" + Hoch2.sup() + " = " + Math.pow(10, 2));
</script></body></html>

Erläuterung:

Im Beispiel wird eine Variable Hoch2 definiert, die das Zeichen 2 speichert. Mit Hilfe von document.write() wird dann ein Text in die Datei geschrieben. Die Formatierung der 2 entspricht dabei der HTML-Formatierung <sup>...</sup>.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 toLowerCase()

Diese Methode wandelt die Zeichenkette in Kleinbuchstaben um und gibt diese zurück. Die Orginalzeichenkette bleibt dabei unverändert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function MachKlein () {
  var neu = document.Test.Eingabe.value.toLowerCase();
  document.Test.Eingabe.value = neu;
}
</script>
</head><body>
<form name="Test" action="">
<input type="text" name="Eingabe">
<input type="button" value="klein machen" onclick="MachKlein()">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Wenn der Anwender auf den Button klickt, wird die Funktion MachKlein() aufgerufen. Diese Funktion wendet die Methode toLowerCase() auf das Eingabefeld des Formulars an. Das Ergebnis wird in der Variablen neu gespeichert. Anschließend wird dem Formulareingabefeld der Wert von neu zugewiesen. Dadurch werden alle eventuell eingegebenen Großbuchstaben in dem Eingabefeld zu Kleinbuchstaben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 toUpperCase()

Diese Methode wandelt die Zeichenkette in Großbuchstaben um und gibt diese zurück. Die Orginalzeichenkette bleibt dabei unverändert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function MachGross () {
  neu = document.Test.Eingabe.value.toUpperCase();
  document.Test.Eingabe.value = neu;
}
</script>
</head><body>
<form name="Test" action="">
<input type="text" name="Eingabe">
<input type="button" value="gross machen" onclick="MachGross()">
</form>
</body></html>

Erläuterung:

Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Wenn der Anwender auf den Button klickt, wird die Funktion MachGross() aufgerufen. Diese Funktion wendet die Methode toUpperCase() auf das Eingabefeld des Formulars an. Das Ergebnis wird in der Variablen neu gespeichert. Anschließend wird dem Formulareingabefeld der Wert von neu zugewiesen. Dadurch werden alle eventuell eingegebenen Kleinbuchstaben in dem Eingabefeld zu Großbuchstaben.

nach oben
weiter | Seite Objektunabhängige Funktionen
zurück | Seite screen
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Objektreferenz / Objektunabhängige Funktionen

SELFHTML

Objektunabhängige Funktionen
Informationsseite

nach unten Allgemeines zu objektunabhängigen Funktionen
nach unten decodeURI() (kodierten URI dekodieren)
nach unten decodeURIComponent() (kodierten URI dekodieren - II)
nach unten encodeURI() (URI kodieren)
nach unten encodeURIComponent() (URI kodieren - II)
nach unten eval() (Ausdruck interpretieren)
nach unten escape() (ASCII-Zeichen in Zahlen umwandeln)
nach unten isFinite() (auf numerischen Wertebereich prüfen)
nach unten isNaN() (auf numerischen Wert prüfen)
nach unten parseFloat() (in Kommazahl umwandeln)
nach unten parseInt() (in Ganzzahl umwandeln)
nach unten Number() (auf numerischen Wert prüfen)
nach unten String() (in Zeichenkette umwandeln)
nach unten unescape() (Zahlen in ASCII-Zeichen umwandeln)

nach unten

Allgemeines zu objektunabhängigen Funktionen

Objektunabhängige Funktionen sind im Gegensatz zu selbst definierten Seite Funktionen in JavaScript bereits vordefiniert. Das heißt, Sie können diese Funktionen jederzeit aufrufen.

Es handelt sich um bestimmte, zum Teil mächtige JavaScript-Befehle, die in keines der JavaScript-Objekte passen und deshalb nicht der objektorientierten Richtung von JavaScript folgen.

JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.2 decodeURI()

Dekodiert einen Seite URI, der mit nach unten encodeURI() kodiert wurde.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
Adresse = "http://www.example.org/cgi-bin/script.pl?Text=der übergebene Text&Name=Stefan Münz";
document.write("<b>Adresse unkodiert:<\/b> " + Adresse + "<br>");
Adresse = encodeURI(Adresse);
document.write("<b>Adresse kodiert:<\/b> " + Adresse + "<br>");
Adresse = decodeURI(Adresse);
document.write("<b>Adresse wieder dekodiert:<\/b> " + Adresse + "<br>");
</script>
</body></html>

Erläuterung:

Das Beispiel definiert eine typische Adresse mit Übergabeparametern an ein Script. Zunächst schreibt es die Adresse wie sie ist ins Dokument. Dann wird die Adresse mit encodeURI() behandelt und zur Kontrolle ausgegeben. Schließlich wird nach dem gleichen Schema decodeURI() angewendet und die Adresse nochmals ausgegeben.

JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.2 decodeURIComponent()

Wie nach oben decodeURI(). Sollte aber nur auf Adressen oder Adressteile angewendet werden, die mit mit nach unten encodeURIComponent() kodiert wurden.

JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.2 encodeURI()

Verschlüsselt einen Seite URI so, dass alle Sonderzeichen in ASCII-Zeichensequenzen umgewandelt werden. Besonders wichtig ist dies für Aufrufe von CGI-Scripts mit Parametern. Denn HTML 4.0 verlangt beispielsweise, im href-Attribut von Verweisen encodierte Zeichenketten zu verwenden, sofern die Adressen Sonderzeichen enthalten.

Kodiert alle außer den folgenden Zeichen:
0 bis 9
A bis Z
a bis z
- _ . ! ~ * ' ( )
, / ? : @ & = + $

Kodiert werden also beispielsweise deutsche Umlaute und Sonderzeichen, auch Leerzeichen, eckige und geschweifte Klammern usw.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Adresse =
encodeURI("http://www.example.org/cgi-bin/script.pl?Text=der übergebene Text&Name=Stefan Münz");
document.write('<a href="' + Adresse + '">Verweis<\/a>');
</script>
</body></html>

Erläuterung:

Das Beispiel ruft die Funktion encodeURI() auf und übergibt ihr einen typischen URI mit Parametern. Der Rückgabewert der Funktion wird in der Variablen Adresse gespeichert. Anschließend wird dynamisch ein Verweis in die Datei geschrieben, wobei die zuvor encodierte Adresse ins href-Attribut eingefügt wird.

JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.3 Safari 1.2 encodeURIComponent()

Wie nach oben encodeURI(), aber mit dem Unterschied, dass auch folgende Zeichen kodiert werden:
, / ? : @ & = + $

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 escape()

Wandelt Steuersequenzen (Steuerzeichen mit den ASCII-Werten 0 bis 31) und Sonderzeichen wie z.B. deutsche Umlaute in ihre ASCII-Zahlenwerte um, und zwar in hexadezimaler Form. Setzt vor jeden Wert das Trennzeichen "%" und gibt die so erzeugte Zeichenkette zurück. Bei anderen Zeichen als Steuer- und Sonderzeichen gibt escape() die Zeichen unverändert zurück. Es handelt sich also um eine Funktion, die Steuer- und Sonderzeichen aus Werten entfernt und in Zeichenfolgen übersetzt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Beispiel = "\n\r\t";
document.write(escape(Beispiel));
</script></body></html>

Erläuterung:

Das Beispiel definiert eine Variable Beispiel, der verschiedene Steuerzeichen zugewiesen werden (siehe dazu den Abschnitt über Seite Steuerzeichen). Diese Variable wird der Funktion escape() als Parameter übergeben. Das Ergebnis wird zur Kontrolle ins Dokumentfenster geschrieben.

Beachten Sie:

Diese Funktion wird in Zukunft durch nach oben encodeURI() ersetzt!

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 eval()

Interpretiert ein zu übergebendes Argument und gibt das Ergebnis zurück.
Wenn das übergebene Argument als Rechenoperation interpretierbar ist, wird die Operation berechnet und das Ergebnis zurückgegeben. Dabei sind auch komplexe Rechenausdrücke mit Klammerung möglich. Diese Funktionalität ist sehr praktisch, um als Zeichenketten notierte Rechenausdrücke mit einem einzigen Befehl errechnen zu lassen.
Wenn das übergebene Argument als Objekt oder Objekteigenschaft interpretiert werden kann, wird das Objekt bzw. die Objekteigenschaft zurückgegeben. Dies ist wichtig, wenn eine Zeichenkette (z.B. ein Formularfeldinhalt oder ein einer Funktion übergebener Parameter) als Objekt interpretiert werden soll.
Erzeugt eine Fehlermeldung, wenn der übergebene Ausdruck nicht interpretierbar ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form action="">
<input type="name" size="30" name="Eingabe">
<input type="button" value="Berechnen" onclick="alert(eval(this.form.Eingabe.value))">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Button. In dem Eingabefeld kann der Anwender eine Rechenoperation eingeben, zum Beispiel 1+2+3+4+5+6+7+8+9 oder 12.78*5.13. Beim Klick auf den Button wird der Wert aus dem Formular mit eval() berechnet und in einem Meldungsfenster ausgegeben.

JavaScript 1.3 Netscape 4.x MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 isFinite()

Ermittelt, ob ein Wert sich innerhalb des Zahlenbereichs befindet, den JavaScript verarbeiten kann, also aus Sicht von JavaScript eine gültige Zahl darstellt.
Gibt true zurück, wenn der Wert eine gültige Zahl ist, und false, wenn es keine Zahl ist bzw. die Zahl sich außerhalb des Wertebereiches von JavaScript befindet. Sowohl ganze Zahlen als auch Kommazahlen werden als gültige Zahlen erkannt. Bei Kommazahlen muss das Dezimalzeichen ein Punkt sein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var Zahl = Number.MAX_VALUE;
if (!isFinite(Zahl * 2))
  alert("Die Zahl ist nicht zu verarbeiten.");
</script>
</head><body>
</body></html>

Erläuterung:

Das Beispiel definiert eine Variable Zahl der als Wert Seite Number.MAX_VALUE die größte mögliche Zahl zugewiesen wird. In der anschließenden Abfrage wird geprüft, ob das Produkt dieser Zahl mit 2 sich innerhalb des verarbeitbaren Zahlenbereiches befindet. Ist dies nicht der Fall, so wird eine entsprechende Warnmeldung ausgegeben.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 isNaN()

Ermittelt, ob ein zu übergebender Wert eine ungültige Zahl ist (NaN = Not a Number).
Gibt true zurück, wenn der Wert keine Zahl ist, und false, wenn es eine Zahl ist. Sowohl ganze Zahlen als auch Kommazahlen werden als gültige Zahlen anerkannt. Bei Kommazahlen muss das Dezimalzeichen ein Punkt sein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function CheckZahl (Wert) {
  if (isNaN(Wert)) {
    alert(Wert + " ist keine Zahl!");
  }
}
</script>
</head><body>
<form action="">
<input type="name" size="30" name="Eingabe">
<input type="button" value="Check"
onclick="CheckZahl(this.form.Eingabe.value)">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Button. Beim Klick auf den Button wird die Funktion CheckZahl() aufgerufen. Der Funktion wird der Wert aus dem Eingabefeld des Formulars als Parameter übergeben. CheckZahl() prüft, ob der übergebene Wert eine Zahl ist. Dazu wird isNaN() auf den übergebenen Wert angewendet. Wenn es keine Zahl ist, wird eine Fehlermeldung ausgegeben.

Beachten Sie:

Für diese Methode sind auch Zahlen, die außerhalb des Zahlenbereichs von JavaScript liegen, gültige Zahlen. Zur Überprüfung der Größe von Zahlen müssen Sie die Methode nach oben isFinite() verwenden.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 parseFloat()

Wandelt eine zu übergebende Zeichenkette in eine Zahl um und gibt diese als numerischen Wert zurück. Wenn sich die Zahl als Kommazahl interpretieren lässt, wird dies berücksichtigt. Als Dezimalzeichen wird jedoch nur der Punkt interpretiert. Sinnvoll, um z.B. Anwendereingaben in Zahlen umzuwandeln, mit denen man anschließend rechnen kann.
Gibt NaN (Not a Number) zurück, wenn die Zeichenkette mit Zeichen beginnt, die sich nicht als Teil einer Zahl interpretieren lassen.
Wenn die Zeichenkette weiter hinten ungültige Zeichen enthält, wird die Zahl bis zum ersten ungültigen Zeichen interpretiert und der interpretierte Teil zurückgegeben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Elemente = new Array("18", "18.1", "18,9", "abc", "1a");
document.write("<h1>Anwendung von <i>parseFloat()<\/i><\/h1>");
for (var i = 0; i < Elemente.length; ++i)
  document.write(Elemente[i] + " = <b> " + parseFloat(Elemente[i]) + "<\/b><br>");
</script></body></html>

Erläuterung:

Das Beispiel definiert einen Seite Array mit verschiedenen Elementen, die teils ganze, teils Kommazahlen, teils gar keine Zahlen darstellen. Dann werden in einer for-Schleife alle Elemente des Arrays mit der Seite write()-Methode dynamisch in die Datei geschrieben. Dabei wird jedoch die Funktion parseFloat() auf das jeweilige Array-Element angewendet.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 parseInt()

Wandelt eine zu übergebende Zeichenkette in eine Ganzzahl um und gibt diese als Ergebnis zurück. Sinnvoll, um z.B. Anwendereingaben in Zahlen umzuwandeln, mit denen man anschließend rechnen kann.
Gibt NaN (Not a Number) zurück, wenn die Zeichenkette mit Zeichen beginnt, die sich nicht als Teil einer Zahl interpretieren lassen.
Wenn die Zeichenkette weiter hinten ungültige Zeichen enthält, wird die Zahl bis zum ersten ungültigen Zeichen interpretiert und der interpretierte Teil zurückgegeben. Das gilt bei parseInt() auch für den Punkt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Elemente = new Array("18", "18.1", "18.9", "abc", "1a");
document.write("<h1>Anwendung von <i>parseInt()<\/i><\/h1>");
for (var i = 0; i < Elemente.length; ++i)
  document.write(Elemente[i] + " = <b> " + parseInt(Elemente[i]) + "<\/b><br>");
</script></body></html>

Erläuterung:

Das Beispiel definiert einen Seite Array mit verschiedenen Elementen, die teils ganze, teils Kommazahlen, teils gar keine Zahlen darstellen. Dann werden in einer for-Schleife alle Elemente des Arrays mit der Seite write()-Methode dynamisch in die Datei geschrieben. Dabei wird jedoch die Funktion parseInt() auf das jeweilige Array-Element angewendet.

Beachten Sie:

Die Methode parseInt() erlaubt einen zweiten, optionalen Parameter radix. Dieser Parameter enthält die Basis des verwendeten Zahlensystems. Der Aufruf parseInt(string, radix) ermittelt aus dem String, der eine Zahl eines anderen Zahlensystems darstellt, die dazugehörige Dezimalzahl. Die Methode parseInt() kann damit gleichzeitig als Umrechner von Zahlen anderer Zahlensysteme in das dezimale Zahlensystem verwendet werden. So ergibt z.B. der Aufruf parseInt("11111", 2) die Zahl 31. Der optionale Parameter kann Werte zwischen 2 und 36 annehmen. Mit der Methode Seite toString() des Seite Number-Objektes können Sie umgekehrt Dezimalzahlen in Zeichenketten von Zahlen anderer Zahlensysteme konvertieren. Dabei ist - im Gegensatz zur Methode parseInt() - auch das Umwandeln von Kommazahlen möglich.

Besonders im Bereich der Datumsberechnung werden häufig Zahlen mit führender Null benutzt. Einfache Aufgaben wie alert(08 * 60) liefern dann scheinbar falsche Ergebnisse oder gar Fehlermeldungen. Des Rätsels Lösung dafür ist, dass JavaScript Zahlen mit führender 0 als Oktalzahlen interpretiert, nicht als Dezimalzahlen. Mit einer Anweisung wie alert(parseInt("08", 10) * 60) können Sie das Problem vermeiden und erzwingen, dass der Wert dezimal interpretiert wird

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Number()

Konvertiert den Inhalt eines Objekts in eine Zahl und gibt die Zahl zurück. Erwartet den Objektinhalt als Parameter. Wenn sich der übergebene Parameter nicht als Zahl interpretieren lässt, wird NaN (Not a Number) zurückgegeben.
Vor allem brauchbar in Verbindung mit dem Seite Date-Objekt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var d = new Date("March 15, 1998 08:27:00");
document.write(Number(d));
</script></body></html>

Erläuterung:

Das Beispiel definiert ein neues Datumobjekt und initialisiert es mit einem Wert im GMT-Format. Das Datumobjekt wird in der Variablen d gespeichert. Anschließend wird diese Variable der Funktion Number() als Parameter übergeben. Die Funktion Number() hab dabei die gleiche Wirkung wie die Objektmethode d.getTime(), d.h. es wird die Anzahl Millisekunden zwischen dem 1.1.1970 und dem in d gespeicherten Zeitpunkt errechnet. Im Beispiel wird das Ergebnis zur Kontrolle in die Datei geschrieben.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 String()

Konvertiert den Inhalt eines Objekts in eine Zeichenkette und gibt die Zeichenkette zurück.
Vor allem brauchbar in Verbindung mit dem Seite Date-Objekt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var d = new Date();
document.write(String(d));
</script></body></html>

Erläuterung:

Das Beispiel definiert ein neues Datumobjekt mit dem aktuellen Zeitpunkt. Das Datumobjekt wird in der Variablen d gespeichert. Anschließend wird diese Variable der Funktion String() als Parameter übergeben. Die Funktion erzeugt daraus eine Zeichenkette, die den gespeicherten Zeitpunkt im GMT-Format darstellt. Im Beispiel wird das Ergebnis zur Kontrolle in die Datei geschrieben.

JavaScript 1.0 Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 unescape()

Wandelt alle Zeichen der zu übergebenden Zeichenkette in normale ASCII-Zeichen um und gibt die so erzeugte Zeichenkette zurück. Die zu übergebende Zeichenkette muss für jedes umzuwandelnde Zeichen ein Prozentzeichen (%) und den Hexadezimalwert des Zeichens in der ASCII-Zeichentabelle enthalten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Beispiel = "%53%74%65%66%61%6E";
document.write(unescape(Beispiel));
</script></body></html>

Erläuterung:

Das Beispiel definiert eine Variable namens Beispiel und weist ihr eine Zeichenkette zu. Die Zeichenkette besteht aus einer Reihenfolge von hexadezimal kodierten Zeichen. Jedes Zeichen beginnt mit einem Prozentzeichen, dahinter folgt der Hexadezimalwert des Zeichens. Diese Variable wird der Funktion unescape() als Parameter übergeben. Das Ergebnis wird zur Kontrolle in die Datei geschrieben. Im Beispiel wird das Wort "Stefan" erzeugt.

Beachten Sie:

Diese Funktion wird in Zukunft durch nach oben decodeURI() ersetzt!

nach oben
weiter | Seite Zwei Frames gleichzeitig ändern
zurück | Seite String
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele

SELFHTML

Anwendungsbeispiele
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML, die Kapitel Sprachelemente von JavaScript und die Kapitel JavaScript-Objektreferenz.
Dieser Abschnitt enthält praktische Beispiele für den Einsatz von JavaScript.
Der Abschnitt besteht aus folgenden Seiten:

Seite Zwei Frames gleichzeitig ändern
Seite Seitenanzeige in Frames verhindern
Seite Taschenrechner
Seite Monatskalender
Seite Persönliche Seitenbesuche zählen mit Cookies
Seite Formulareingaben überprüfen
Seite Dynamische grafische Buttons
Seite Aufenthaltsdauer auf Web-Seite anzeigen
Seite Verweisliste als Auswahlliste
Seite Fehlerbehandlung mit dem Event-Handler onerror
Seite Fehlerbehandlung mit try..catch
Seite Änderungen der Fenstergröße überwachen

Weitere Anwendungsbeispiele finden Sie im Kapitel
Kapitel Dynamisches HTML: Beispiele für die Praxis

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie ebenfalls weitere Anwendungsbeispiele und Links zu anderen Quellen mit Anwendungsbeispielen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zu JavaScript
Online-Seite WWW-Links: JavaScript und DOM

nach oben

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Zwei Frames gleichzeitig ändern

SELFHTML

Zwei Frames gleichzeitig ändern
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Wer schon einmal ein HTML-Projekt mit mehreren Kapitel Frames erstellt hat, kann nachvollziehen, dass es manchmal wünschenswert ist, beim Aktivieren eines Verweises nicht nur den Inhalt eines, sondern zweier oder mehrerer Frame-Fenster gleichzeitig zu ändern. Eine Möglichkeit ist, in solchen Fällen auf eine Datei zu verweisen, die ein neues, entsprechendes Frameset definiert. Wenn Sie aber viele solcher Verweise haben, wird dieses Verfahren schnell aufwendig. Als Alternative dazu können Sie sich mit einem JavaScript behelfen.

Die Basis bildet ein gewöhnlicher Verweis, der beim Aktivieren einen der beiden Frames ändert. Das Ändern des zweiten Frames wird durch ein JavaScript bewerkstelligt, das beim Klicken auf den Verweis ausgeführt wird. Diese Aufteilung hat allerdings den grundlegenden Nachteil, dass bei fehlender oder abgeschalteter JavaScript-Unterstützung des Browsers nur ein Frame geändert wird. Dies hat zum Beispiel die Auswirkung, dass Robots von Suchmaschinen nur zu den Seiten vordringen können, die im ersten Frame erscheinen, denn sie folgen nur dem href-Verweisziel.

Ein weiterer Nachteil ist, dass dabei die History-Funktion im Browser nicht mehr so arbeitet wie gewünscht. Denn aus Sicht des Browsers wurden zwei Verweise ausgeführt, doch ein History-Eintrag springt nur eine Seite zurück. Der Anwender muss also zweimal auf den Zurück-Button des Browsers klicken, um wieder dahin zu kommen, wo er vor dem Anklicken des Verweises war. Eine Möglichkeit, dieses unerwünschte Verhalten auszuschalten, ist, selber Verweise anzubieten, die das "Zurück" und "Vorwärts" im Browser auslösen, jedoch so, dass sich dabei wie gewünscht ebenfalls zwei Frames gleichzeitig ändern. Das Beispiel auf dieser Seite zeigt deshalb auch, wie sich so etwas realisieren lässt.

Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt die Datei mit den Frameset-Definitionen und die Datei mit den Verweisen. Die übrigen Dateien, die im Anzeigebeispiel aufgerufen werden, sind für das Verständnis ohne Bedeutung.

Beispiel - Datei zweiframes.htm:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Zwei Frames gleichzeitig &auml;ndern</title>
</head>
<frameset cols="180,*">
 <frame src="zweiframes_links.htm" name="links">
 <frameset rows="180,*">
   <frame src="zweiframes_to.htm" name="oben">
   <frame src="zweiframes_tu.htm" name="unten">
 </frameset>
</frameset>
</html>

Beispiel - Datei zweiframes_links.htm:

<html>
<head>
<title>ZweiFrames - Verweise</title>
<script type="text/javascript">
function FrameAendern (URI, Framename) {
  parent[Framename].location.href = URI;
}

function ZweiFramesBack (Framename1, Framename2) {
  Frame2 = parent[Framename2];
  parent[Framename1].history.back();
  if (!window.opera)
    window.setTimeout("Frame2.history.back()", 100);
}

function ZweiFramesForward (Framename1, Framename2) {
  Frame2 = parent[Framename2];
  parent[Framename1].history.forward();
  if (!window.opera)
    window.setTimeout("Frame2.history.forward()", 100);
}
</script>
</head>
<body bgcolor="#EEEEEE" link="#AA5522" vlink="#772200" alink="#000000">
<div>
<hr noshade="noshade" size="1">

<a href="javascript:ZweiFramesBack('oben', 'unten');"><b>zurück</b></a>
<b>|</b>
<a href="javascript:ZweiFramesForward('oben', 'unten');"><b>vor</b></a>
<hr noshade="noshade" size="1">
</div>

<h2>Verweise</h2>
<p>
<a href="zweiframes_tu.htm" target="unten" onclick="FrameAendern('zweiframes_to.htm', 'oben')"><b>Willkommen</b></a>
<br>
<a href="zweiframes_su.htm" target="unten" onclick="FrameAendern('zweiframes_so.htm', 'oben')"><b>Susan Sarandon</b></a>
<br>
<a href="zweiframes_ju.htm" target="unten" onclick="FrameAendern('zweiframes_jo.htm', 'oben')"><b>Jack Nicholson</b></a>
</p>
</body>
</html>

Erläuterung:

Der erste Teil des Beispiels zeigt die Datei zweiframes.htm, die das Frame-Set für eine Schauspielerinfothek bereitstellt. Das Frame-Set ist dreigeteilt: links ein Frame-Fenster mit Namen links für Verweise, und rechts zwei Frames mit den Namen oben und unten für Informationen.

Der zweite Teil des Beispiels zeigt die Datei zweiframes_links.htm, die ja, wie in der Datei zweiframes.htm ersichtlich, gleich zu Beginn in das linke Frame-Fenster geladen wird. Diese Datei enthält die Verweise. Alle Verweise ändern den Inhalt von zwei Frame-Fenstern gleichzeitig, nämlich jeweils den der beiden rechten Frames mit den Namen oben und unten. Deshalb ist in dieser Datei auch der JavaScript-Code für das Ändern der beiden anderen Frames notiert.

Um die Funktionsweise zu verstehen, ist es sinnvoll, zunächst einmal die HTML-Verweise im <body>-Bereich der Datei zweiframes_links.htm zu betrachten. Die ersten beiden Verweise enthalten im href-Attribut JavaScript-Code, eingeleitet durch den Pseudo-Event-Handler Seite javascript:. Dahinter folgt jeweils der Aufruf einer Seite Funktion. Bei dem Verweis mit dem Verweistext zur&uuml;ck wird die Funktion ZweiFramesBack() aufgerufen und bei dem Verweis mit dem Verweistext vor die Funktion ZweiFramesForward. In beiden Fällen werden der jeweils aufgerufenen Funktion die Namen der zwei Frames als Parameter übergeben, nämlich 'oben' und 'unten'.

Bei den übrigen Verweisen handelt es sich zunächst um gewöhnliche Seite Verweise zu anderen Frames. Sie enthalten im href-Attribut die Datei, die im ersten, unteren Frame erscheinen soll. Dazu besitzen sie das Attribut target="unten". Im Event-Handler Seite onclick befindet sich der JavaScript-Code, der den zweiten Frame beim Klick auf den Link ändert. Dieser ruft die Funktion FrameAendern() auf, welche den zweiten, oberen Frame ändert.

Im Kopf der HTML-Datei, also zwischen <head> und </head>, wird mit <script type="text/javascript"> .... </script> ein Seite JavaScript-Bereich definiert. Innerhalb dieses Bereichs sind die drei Funktionen FrameAendern(), ZweiFramesBack() und ZweiFramesForward() notiert, die von den Verweisen in der Datei aufgerufen werden.

Die Funktion FrameAendern() erwartet zwei Parameter:
1. den Seite URI des gewünschten Inhalts des zweiten Frame-Fensters (URI)
2. den Namen des gewünschten zweiten Frame-Fensters innerhalb des Frame-Sets (Framename)
Dadurch ist die Funktion allgemein gehalten, d.h. Sie können diese Funktion auch in ganz anderen Frame-Sets zum gleichen Zweck verwenden.
Innerhalb der Funktion wird über parent[Framename] das Seite window-Objekt des zweiten Frames angesprochen. Mit dieser alternativen Schreibweise zum Ansprechen von Unterobjekten kann der Framename variabel sein. Wenn der Funktion beispielsweise der Framename "oben" übergeben wird, entspricht dieser Ausdruck der Notation parent.oben.
Das Ändern der Eigenschaft Seite location.href bewirkt einen JavaScript-Verweis zu einer anderen Adresse. Dieser Eigenschaft wird die beim Funktionsaufruf übergebene Adresse URI zugewiesen.

Die Funktionen ZweiFramesBack() und ZweiFramesForward() benötigen ebenfalls zwei Parameter, nämlich die Namen der betroffenen Frame-Fenster (Framename1 und Framename2). Mit Aufrufen der Objektmethoden Seite history.back() bzw. Seite history.forward() erreichen sie die Funktionalität der entsprechenden Buttons "Zurück" und "Vor" im Browser. Dass der jeweils zweite Aufruf der Objektmethoden noch mal in ein Seite setTimeout() mit einer geringen Verzögerung von 1/10 Sekunde gesetzt ist, hat pragmatische Gründe: manche Browser würden ansonsten "vergessen", den zweiten Aufruf durchzuführen.

Beachten Sie:

Opera 5.12 interpretiert die Methode history.back() auf das _top-Fenster bezogen und ignoriert die Angabe des Zielfensters beim Aufruf der Methode. Das gilt auch, wenn Sie die Methode innerhalb eines Frames selbst aufrufen. Der Browser hält sich strikt an die Reihenfolge der History-Einträge im Hauptfenster. Wurden mittels JavaScript zwei Frames gleichzeitig geändert, betrachtet Opera diese Änderung als einen Eintrag und geht in der History zwei Schritte zurück. Aus diesem Grund gilt es zu verhindern, dass Opera ein zweites Mal ein history.back() ausführt. Dies wird im obigen Beispiel mit if (!window.opera) erreicht. Nur ein Opera-Browser kennt das Objekt window.opera. In der Seite bedingten Anweisung wird gefragt, ob der Browser dieses Objekt nicht kennt. Nur in diesem Fall wird die Objektmethode ein zweites Mal aufgerufen.

nach oben
weiter | Seite Seitenanzeige in Frames verhindern
zurück | Seite Objektunabhängige Funktionen
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Seitenanzeige in Frames verhindern

SELFHTML

Seitenanzeige in Frames verhindern
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Wenn Sie eigene WWW-Seiten erstellen, werden Sie kaum wollen, dass Ihr prachtvolles Werk in einem kleinen Fenster einer fremden Seite angezeigt wird. Dies ist jedoch mit Hilfe von Kapitel Frames problemlos möglich, und es gibt einige Web-Guide-Projekte, die unverschämt genug sind, fremde Projekte als "Schaufenster" im eigenen Projekt anzuzeigen. Lesen Sie dazu auch den Abschnitt über Seite unfaire Schaufenster-Effekte.

Mit einem kleinen JavaScript können Sie erzwingen, dass Ihre eigenen Seiten beim Aufruf in jedem Fall das gesamte Browser-Fenster ausfüllen. Das Script erzwingt die Anzeige einer HTML-Datei im Vollbild, wenn eine andere Seite versucht, die Datei in ein Frame-Fenster zu laden. Auf "normale" Verweise und Aufrufe der Datei hat das Script keine Auswirkungen.

Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt die Datei, die das Geladenwerden in ein Frameset verhindert. Die Dateien, die im Anzeigebeispiel zum Frameset gehören, sind für das Verständnis ohne Bedeutung.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Seitenanzeige in Frames verhindern</title>
<script type="text/javascript">
if (top != self)
  top.location = self.location;
</script>
</head>
<body>

<h1>Keine Chance für Schaufenster-Anbieter!</h1>

</body>
</html>

Erläuterung:

Das kleine JavaScript im Beispiel sollte im Kopf jeder HTML-Datei stehen, die Sie nicht in fremden Frames sehen möchten. Das Script wird beim Laden der Datei automatisch ausgeführt, da der Code nicht in einer Funktion gebunden ist. In dem Code - er besteht aus einer einzigen Seite bedingten Anweisung - wird mit top != self abgefragt, ob die oberste Referenzebene der eigenen Ebene entspricht. Ist self, also das eigene Fenster, gleichzeitig auch das oberste Fenster (top), dann ist alles in Ordnung, und die Anweisung, die von der Bedingung abhängt, wird nicht ausgeführt. Ist dagegen self nicht das gleiche wie top, bedeutet dies, dass irgendwelche Frames angezeigt werden. In diesem Fall wird die Anweisung top.location = self.location ausgeführt. Mit dieser Anweisung erzwingen Sie, dass die aktuelle Datei auf jeden Fall im gesamten Anzeigefenster des Browsers angezeigt wird.

Beachten Sie:

Bei Opera 5.12 haben Sie keinen Zugriff auf die oberste Fensterebene top, wenn diese nicht zur eigenen Domain gehört. Sie können jedoch über einen Umweg auch diesen Browser dazu veranlassen, das Frameset zu sprengen. Dazu müssen Sie dafür sorgen, dass ein Verweis mit der Eigenschaft target="_top" angeklickt wird.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Seitenanzeige in Frames verhindern</title>
<script type="text/javascript">
if (top != self) {
  if (window.opera) {
    window.onload = opera_befreien;
  } else {
    top.location = self.location;
  }
}

function opera_befreien () {
  document.links["befreien"].click();
}
</script>
</head>
<body>

<a name="befreien" href="seitenanzeige_opera.htm" target="_top"></a>

<h1>Keine Chance für Schaufenster-Anbieter!</h1>
</body>
</html>

Erläuterung:

Innerhalb der Seite befindet sich ein unsichtbarer Verweis (Verweis ohne Verweistext) namens befreien. Dieser Verweis besitzt als Zielfenster _top und als Verweisziel die Seite selbst. Wird nun beim Laden der Seite festgestellt, dass diese sich innerhalb eines fremden Framesets befindet, so verwenden alle Browser außer Opera das nach oben oben beschriebene Script. In Opera dagegen wird lediglich der Seite Event-Handler onload initialisiert. Der Aufruf window.onload = opera_befreien hat die Aufgabe, nach dem Laden der Seite die Funktion opera_befreien() aufzurufen. Innerhalb der Funktion passiert nichts weiter, als dass der Verweis mit der Methode click() angeklickt wird. Diese undokumentierte Methode funktioniert mit allen Identifikationseinstellungen von Opera. Das Verweisziel lädt sich in die oberste Fensterebene und sprengt das Frameset.

nach oben
weiter | Seite Taschenrechner
zurück | Seite Zwei Frames gleichzeitig ändern
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Taschenrechner

SELFHTML

Taschenrechner
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Das Beispiel baut mit Hilfe eines HTML-Formulars einen halbwegs "echt" aussehenden Taschenrechner auf. Der Anwender kann diesen Taschenrechner wie üblich bedienen. Allerdings bietet dieser Taschenrechner im Gegensatz zu normalen Taschenrechnern auch die Möglichkeit an, direkt ins Display Daten einzugeben. Außerdem berechnet dieser Taschenrechner auch Serienrechnungen wie 1+2+3+4+5+6+7+8+9 und Klammerausdrücke wie 3*(2+4).

Anhand dieses Beispiels können Sie studieren, wie man Formulareingaben mit JavaScript zur direkten Interaktion verwenden kann. Das Taschenrechner-Beispiel ist ein JavaScript-Einsatz vom Typus Kapitel Kleine Helferlein. Diese Art Einsatz von JavaScript gehört zu den sinnvollsten Einsatzmöglichkeiten.

Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt die vollständige HTML-Datei mit dem Taschenrechner.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Taschenrechner</title>
<script type="text/javascript">
function Check (Eingabe) {
  var nur_das = "0123456789[]()-+*%/.";
  for (var i = 0; i < Eingabe.length; i++)
    if (nur_das.indexOf(Eingabe.charAt(i)) < 0)
      return false;
  return true;
}

function Ergebnis () {
  var x = 0;
  if (Check(window.document.Rechner.Display.value))
    x = eval(window.document.Rechner.Display.value);
  window.document.Rechner.Display.value = x;
}

function Hinzufuegen (Zeichen) {
  window.document.Rechner.Display.value = window.document.Rechner.Display.value + Zeichen;
}

function Sonderfunktion (Funktion) {
  if (Check(window.document.Rechner.Display.value)) {
    if (Funktion == "sqrt") {
      var x = 0;
      x = eval(window.document.Rechner.Display.value);
      window.document.Rechner.Display.value = Math.sqrt(x);
    }
    if (Funktion == "pow") {
      var x = 0;
      x = eval(window.document.Rechner.Display.value);
      window.document.Rechner.Display.value = x * x;
    }
    if (Funktion == "ln") {
      var x = 0;
      x = eval(window.document.Rechner.Display.value);
      window.document.Rechner.Display.value = Math.log(x);
    }
  } else
    window.document.Rechner.Display.value = 0}
</script>
<style type="text/css">
.button {  width:60px; text-align:center;
           font-family:System,sans-serif;
           font-size:100%; }
.display { width:100%; text-align:right;
           font-family:System,sans-serif;
           font-size:100%; }
</style>
</head>
<body bgcolor="#FFFFE0">

<form name="Rechner" action="" onsubmit="Ergebnis();return false;">
<table border="5" cellpadding="10" cellspacing="0">
<tr>
<td bgcolor="#C0C0C0">
<input type="text" name="Display" align="right" class="display"></td>
</tr><tr>
<td  bgcolor="#E0E0E0">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><input type="button" width="60" class="button" value="  7   " onclick="Hinzufuegen('7')"></td>
<td><input type="button" width="60" class="button" value="  8   " onclick="Hinzufuegen('8')"></td>
<td><input type="button" width="60" class="button" value="  9   " onclick="Hinzufuegen('9')"></td>
<td><input type="button" width="60" class="button" value="  +   " onclick="Hinzufuegen('+')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  4   " onclick="Hinzufuegen('4')"></td>
<td><input type="button" width="60" class="button" value="  5   " onclick="Hinzufuegen('5')"></td>
<td><input type="button" width="60" class="button" value="  6   " onclick="Hinzufuegen('6')"></td>
<td><input type="button" width="60" class="button" value="  -   " onclick="Hinzufuegen('-')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  1   " onclick="Hinzufuegen('1')"></td>
<td><input type="button" width="60" class="button" value="  2   " onclick="Hinzufuegen('2')"></td>
<td><input type="button" width="60" class="button" value="  3   " onclick="Hinzufuegen('3')"></td>
<td><input type="button" width="60" class="button" value="  *   " onclick="Hinzufuegen('*')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  0   " onclick="Hinzufuegen('0')"></td>
<td><input type="button" width="60" class="button" value="  .   " onclick="Hinzufuegen('.')"></td>
<td><input type="button" width="60" class="button" value="  =   " onclick="Ergebnis()"></td>
<td><input type="button" width="60" class="button" value="  /   " onclick="Hinzufuegen('/')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="sqrt " onclick="Sonderfunktion('sqrt')"></td>
<td><input type="button" width="60" class="button" value=" pow " onclick="Sonderfunktion('pow')"></td>
<td><input type="button" width="60" class="button" value=" ln " onclick="Sonderfunktion('ln')"></td>
<td><input type="reset"  width="60" class="button" value="  C  "></td>
</tr>
</table>
</td></tr></table>
</form>

</body>
</html>

Erläuterung:

Funktion zur Berechnung des Inhalts des Rechenfelds:

Im Beispiel werden im Kopf der HTML-Datei mehrere Seite Funktionen notiert, welche die Funktionalität des Taschenrechners ermöglichen. Die Funktion Ergebnis() errechnet den aktuellen Inhalt des Rechenfeldes. Innerhalb der Funktion wird eine Seite Variable x definiert, in der das Ergebnis der Berechnung gespeichert wird. Um das Ergebnis zu erhalten, wird die Rechenoperation, die in dem übergebenen Formularfeld (dem Rechenfeld des Taschenrechners) steht, an die mächtige Seite objektunabhängige JavaScript-Funktion eval() übergeben. Diese Funktion übernimmt automatisch die gesamte Berechnung der Rechenoperation. Voraussetzung ist natürlich, dass die Rechenoperation keine ungültigen Zeichen enthält. Ansonsten erzeugt JavaScript eine Fehlermeldung.
Aus diesem Grund wird vor jeder Verwendung von eval() die Funktion check() aufgerufen, welche die Gültigkeit der Eingaben prüft. Nur wenn diese Funktion true zurück gibt, wird die Methode eval() angewendet. Ansonsten wird im Display der Wert 0 angezeigt.
Um das errechnete Ergebnis, das in der Variablen x gespeichert wird, im Rechenfeld des Taschenrechners anzuzeigen, wird dem entsprechenden Formularfeld einfach der Wert von x zugewiesen.

Funktion zur Prüfung der Gültigkeit der Eingabe

Die Funktion Check(Eingabe) überprüft, ob die Werte von Eingabe nur die vorgegebenen Zeichen enthält. Diese sind in der Variablen nur_das abgelegt. Mit einer Seite for-Schleife wird die übergebene Zeichenkette Zeichen für Zeichen daraufhin überprüft, ob dieses Zeichen in dem Bereich von nur_das vorkommt. Mit der Methode Seite charAt() wird aus der Variablen Eingabe das Zeichen an der Position i extrahiert und an nur_das.indexOf() als Parameter übergeben. Die Methode Seite indexOf() prüft daraufhin, ob das Zeichen in nur_das enthalten ist. Tritt ein ungültiges Zeichen auf, so wird die Funktion abgebrochen und der Wert false zurückgegeben. Andernfalls gibt die Funktion true zurück.

Funktion zum Hinzufügen eines Zeichens in das Rechenfeld:

Die Funktion Hinzufuegen() im Beispiel wird aufgerufen, wenn der Anwender auf einen der Buttons im Taschenrechner-Formular klickt. Das können Ziffern (0 bis 9) oder Rechenoperatoren (+ - * /) oder ein Dezimalpunkt sein. Um das Zeichen hinzuzufügen, wird dem aktuellen Wert des Rechenfeldes einfach der bisherige Wert plus das neue Zeichen zugewiesen. Dabei kommt der Seite Operator zur Zeichenkettenverknüpfung (+) zum Einsatz. Das neue Zeichen wird der Funktion als Parameter übergeben.

Funktion zur Berechnung von Sonderfunktionen:

Die Funktion Sonderfunktion() im Beispiel ist für die Berechnung von drei mathematischen Funktionen zuständig, für die es im Taschenrechner entsprechende Buttons gibt: die Funktionen "sqrt" (Quadratwurzel), "pow" (Quadrat) und "ln" (natürlicher Logarithmus über 10). Die Funktion erwartet drei Parameter: den Index des Formulars, in dem sich das Rechenfeld befindet, den Index des Feldes innerhalb dieses Formulars, und eine Zeichenkette, die die auszuführende mathematische Funktion kennzeichnet. Innerhalb der Funktion wird der dritte Parameter abgefragt. Erlaubt sind die Übergabewerte "sqrt", "pow" und "ln". Falls einer dieser Werte übergeben wurde, berechnet die Funktion innerhalb des entsprechenden If-Zweigs den gewünschten Wert. Dazu wird die Rechenoperation oder die Zahl, die in dem übergebenen Formularfeld (dem Rechenfeld des Taschenrechners) steht, an die JavaScript-Standardfunktion eval() übergeben. Diese Funktion übernimmt automatisch die gesamte Berechnung der Rechenoperation. Das Ergebnis wird in x gespeichert. Falls es sich nur um eine einfache Zahl handelt, wird diese Zahl in x gespeichert. Mit einer entsprechenden JavaScript-Methode, z.B. der Methode sqrt() zur Errechnung der Quadratwurzel, wird das Ergebnis der mathematischen Sonderfunktion berechnet und zugleich dem Rechen-/Ergebnisfeld des Taschenrechner-Formulars zugewiesen.

Button-Klick als Zeichen in Rechenfeld eintragen:

Innerhalb des Taschenrechner-Formulars im Beispiel werden die Buttons für Ziffern, Operatoren usw. definiert. Beim Klicken auf einen solchen Button soll natürlich eine entsprechende Reaktion erfolgen. Dies geschieht mit Hilfe des Seite Event-Handlers onclick. Der Event-Handler wird aktiv, wenn der entsprechende Button angeklickt wird, und ruft dann eine der im Dateikopf definierten Funktionen auf. Bei einer Ziffer wird beispielsweise die Funktion Hinzufuegen() aufgerufen. Dazu wird der Funktion der erwartete Parameter übergeben, also das hinzuzufügende Zeichen. Das Taschenrechner-Formular erhält bei der Definition einen Namen, im Beispiel den Namen "Rechner". Auch das Rechen-/Ergebnisfeld, das im JavaScript-Code sehr oft angesprochen wird, erhält einen Namen - den Namen "Display". Das Seite Formular-Objekt und das Seite Formularelement-Objekt des Rechen-/Ergebnisfeldes kann deshalb mit window.document.Rechner.Display adressiert werden.

Inhalt des Rechenfelds löschen:

Der Button mit der Aufschrift "C" im Beispiel dient zum Löschen der bisherigen Eingaben. Dazu braucht man kein JavaScript. Stattdessen genügt es, einen Button vom Typ reset zu definieren.

Absenden des Formulares verhindern

Da der Taschenrechner ein einzeiliges Formularfeld enthält, kann dieses Formular jederzeit mit Betätigung der Eingabetaste abgesendet werden. Ein Absenden ist im Zusammenhang mit dem Taschenrechner jedoch unerwünscht. Deshalb wird im einleitenden <form>-Tag der Seite Event-Handler onsubmit notiert. Dahinter folgt der Aufruf der Funktion Ergebnis() und anschließend return false. Diese Notation bewirkt, dass wenn der Anwender die Eingabetaste drückt, die Berechnung des Ergebnisse erfolgt und gleichzeitig ein Abschicken des Formulares verhindert wird.

Beachten Sie:

Im HTML-Standard ist die Verwendung des Attributes width für input-Felder nicht erlaubt. Der Netscape 4.x interpretiert jedoch keine CSS-Eigenschaften für solche Formularfelder. Im Interesse des Layouts wurden daher trotz der Verletzung des HTML-Standards die width-Attribute verwendet.

nach oben
weiter | Seite Monatskalender
zurück | Seite Seitenanzeige in Frames verhindern
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Monatskalender

SELFHTML

Monatskalender
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Das Beispiel schreibt in eine HTML-Datei an einer gewünschten Stelle einen frei formatierbaren Kalender des aktuellen Monats. Der aktuelle Tag wird darin hervorgehoben dargestellt. Ein kleines Schmuckstück für Web-Seiten.

Anhand des Beispiels können Sie den praktischen Umgang mit dem Seite Date-Objekt von JavaScript studieren, aber ebenso, wie sich durch kontrollierte Seite document.write-Ausgaben komplexer HTML-Code erzeugen lässt.

Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei, in der das JavaScript für den Monatskalender eingebunden ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Monatskalender</title>
</head>
<body>

<h1 style="font-family:Verdana,Arial; font-weight:normal">Monatskalender</h1>

<script type="text/javascript">
var d = new Date();
var dm = d.getMonth() + 1;
var dj = d.getYear();
if (dj < 999)
  dj += 1900;
Kalender(dm, dj);

function Kalender (Monat, Jahr) {
  Monatsname = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli",
                          "August", "September", "Oktober", "November", "Dezember");
  Tag = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");

  var KSchrArt = "Verdana,Arial"; /* Schriftart Kalenderkopf */
  var KSchrGroesse = 3;           /* Schriftgroesse 1-7 Kalenderkopf */
  var KSchrFarbe = "#FFFF00";     /* Schriftfarbe Kalenderkopf */
  var Khgrund = "#000066";        /* Hintergrundfarbe Kalenderkopf */
  var TSchrArt = "Verdana,Arial"; /* Schriftart Tagesanzeige */
  var TSchrGroesse = 3;           /* Schriftgroesse 1-7 Tagesanzeige */
  var TSchrFarbe = "#000000";     /* Schriftfarbe Tagesanzeige */
  var Thgrund = "#D0F0F0";        /* Hintergrundfarbe Tagesanzeige */
  var SoFarbe = "#E00000";        /* Schriftfarbe f. Sonntage */
  var Ahgrund = "#FFFF00";        /* Hintergrundfarbe f. heutigen Tag */

  var jetzt = new Date();
  var DieserMonat = jetzt.getMonth() + 1;
  var DiesesJahr = jetzt.getYear();
  if (DiesesJahr < 999)
    DiesesJahr += 1900;
  var DieserTag = jetzt.getDate();
  var Zeit = new Date(Jahr, Monat - 1, 1);
  var Start = Zeit.getDay();
  if (Start > 0) {
    Start--;
  } else {
    Start = 6;
  }
  var Stop = 31;
  if (Monat == 4 || Monat == 6 || Monat == 9 || Monat == 11)
    --Stop;
  if (Monat == 2) {
    Stop = Stop - 3;
    if (Jahr % 4 == 0)
      Stop++;
    if (Jahr % 100 == 0)
      Stop--;
    if (Jahr % 400 == 0)
      Stop++;
  }
  document.write('<table border="3" cellpadding="1" cellspacing="1">');
  var Monatskopf = Monatsname[Monat - 1] + " " + Jahr;
  SchreibeKopf(Monatskopf, Khgrund, KSchrFarbe, KSchrGroesse, KSchrArt);
  var Tageszahl = 1;
  for (var i = 0; i <= 5; i++) {
    document.write("<tr>");
    for (var j = 0; j <= 5; j++) {
      if ((i == 0) && (j < Start)) {
        SchreibeZelle("&#160;", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
      } else {
        if (Tageszahl > Stop) {
          SchreibeZelle("&#160;", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
        } else {
          if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) {
            SchreibeZelle(Tageszahl, Ahgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
          } else {
            SchreibeZelle(Tageszahl, Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt);
          }
          Tageszahl++;
        }
      }
    }
    if (Tageszahl > Stop) {
      SchreibeZelle("&#160;", Thgrund, SoFarbe, TSchrGroesse, TSchrArt);
    } else {
      if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) {
        SchreibeZelle(Tageszahl, Ahgrund, SoFarbe, TSchrGroesse, TSchrArt);
      } else {
        SchreibeZelle(Tageszahl, Thgrund, SoFarbe, TSchrGroesse, TSchrArt);
      }
      Tageszahl++;
    }
    document.write("<\/tr>");
  }
  document.write("<\/table>");
}

function SchreibeKopf (Monatstitel, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) {
  document.write("<tr>");
  document.write('<td align="center" colspan="7" valign="middle" bgcolor="' + HgFarbe + '">');
  document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>');
  document.write(Monatstitel);
  document.write("<\/b><\/font><\/td><\/tr>");
  document.write("<tr>");
  for (var i = 0; i <= 6; i++)
    SchreibeZelle(Tag[i], HgFarbe, SchrFarbe, SchrGroesse, SchrArt);
  document.write("<\/tr>");
}

function SchreibeZelle (Inhalt, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) {
  document.write('<td align="center" valign="middle" bgcolor="' + HgFarbe + '">');
  document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>');
  document.write(Inhalt);
  document.write("<\/b><\/font><\/td>");
}
</script>

</body>
</html>

Erläuterung:

Aktuelles Datum ermitteln:

Im Script-Bereich wird zunächst mit d = new Date() ein neues Datumsobjekt mit dem aktuellen Zeitpunkt erzeugt. In den Variablen dm und dj werden anschließend aus dem neuen Datumsobjekt d der Monat und das Jahr ermittelt. Mit diesen beiden Variablen wird die Funktion Kalender() aufgerufen.
Die Anweisung if(dj < 999) dj+=1900; ist dabei nötig, um einigen älteren Browsern, die bei dem Aufruf der getYear-Methode nicht Jahr-2000-kompatibel reagieren, zum Ermitteln des gewünschten Jahres zu verhelfen.

Funktion "Kalender()":

Die Funktion Kalender() ist als in sich abgeschlossenes Unterprogramm realisiert, das einen Monat und ein Jahr als Parameter erwartet, das als Monatskalender angezeigt werden soll. Auf diese Weise lässt sich die Funktion auch noch anderweitig nutzen als zur einmaligen Ausgabe des aktuellen Kalendermonats.

Zu Beginn der Funktion Kalender() werden erst einmal verschiedene Variablen definiert. Dazu gehören die gewünschten Monatsnamen und die Wochentage, die jeweils als Array-Objekte angelegt werden. Wenn Sie andere, zum Beispiel landesspezifische Namen wie "Jänner" wünschen, ändern Sie den entsprechenden Namen einfach.
Zu den Variablen, die am Beginn von Kalender() definiert werden, gehören auch die Angaben zu Farben, Schriftarten und Schriftgrößen für Kalenderhintergrund und Anzeige der Tage. Die Variablendefinitionen sind im Beispiel zum besseren Verständnis auskommentiert. Ändern Sie diese Werte, wenn Sie den Kalender verwenden möchten, nach Ihren Wünschen.

Ermitteln, ob aktiver Tag im anzuzeigenden Monat liegt:

Da die Funktion Kalender() ja als Parameter übergeben bekommt, welchen Monat in welchem Jahr sie ausgeben soll, kann es sich durchaus um einen anderen als den aktuellen Monat handeln (nur im obigen Beispiel wird die Funktion mit dem aktuellen Monat/Jahr aufgerufen). Die Funktion ermittelt deshalb noch einmal separat die Daten des aktuellen Tages (DieserTag), des aktuellen Monats (DieserMonat) und des aktuellen Jahres (DiesesJahr). Die entsprechenden Daten werden später benötigt, um den aktuellen Tag farblich hervorzuheben, sofern er in dem auszugebenden Monat vorkommt. Auch dabei wird wieder die Anpassung für das Jahr 2000 durchgeführt.

Anzeige in Tabelle vorbereiten:

Der Monatskalender soll mit Hilfe von document.write()-Anweisungen in eine HTML-Tabelle geschrieben werden. Zunächst muss jedoch ermittelt werden, wie viele Tage der auszugebende Monat hat, und an welchem Wochentag er beginnt. Davon hängt ab, wie die Tage in die Tabelle geschrieben werden.
In der Variablen Start wird der Wochentag gespeichert, auf den der erste Tag des auszugebenden Monats fällt. Dazu wird in einer Variablen Zeit ein Datumsobjekt erzeugt, das sich mit Date(Jahr,Monat-1,1) auf den ersten Tag des auszugebenden Monats bezieht. Mit Zeit.getDay() wird der Wochentag dieses Tages ermittelt (0 für Montag bis 6 für Sonntag).
In der Variablen Stop wird die Anzahl der Tage ermittelt, die der Monat hat. Wenn es einer der Monate 4, 6, 9 oder 11 ist, hat der Monat 30 Tage. Wenn es der Monat 2 ist, ist etwas Kalenderakrobatik erforderlich. Denn dieser Monat kann 28 oder 29 Tage haben, abhängig einmal davon, ob es ein Schaltjahr ist (durch 4 teilbar), ob es trotzdem kein Schaltjahr ist (durch 100 teilbar), oder ob es doch wieder ein Schaltjahr ist (durch 400 teilbar).

Tabelle erzeugen:

Nachdem alle Vorbereitungen getroffen sind, kann die Tabelle mit dem Kalendermonat geschrieben werden. Dies geschieht mit Hilfe von document.write()-Befehlen, die dynamisch die entsprechenden HTML-Konstrukte in die Datei schreiben. Die Funktion Kalender() selbst schreibt jedoch nur den Anfang und das Ende der Tabelle. Ansonsten übernimmt sie nur die Kontrolle, was genau in welcher Reihenfolge geschrieben werden soll. Um den Tabellenkopf mit Monats- und Jahresangabe sowie den Wochentagnamen zu schreiben, ruft sie die Unterfunktion SchreibeKopf() auf. Um die einzelnen Datenzellen zu schreiben, wird jeweils die Unterfunktion SchreibeZelle() aufgerufen. Um letztere mit den richtigen Daten zu versorgen, muss die Kalender()-Funktion die zuvor ermittelten Angaben zum Wochentag des ersten Tages im Monat sowie das aktuelle Tagesdatum berücksichtigen und die entsprechenden Parameter korrekt übergeben. Falls eine Zelle leer bleiben soll, wird das erzwungene Leerzeichen &#160; übergeben, denn nur so wird die Tabellenzelle nachher sichtbar dargestellt, auch wenn sie keinen Inhalt hat. Wenn die Zelle eine Tageszahl anzeigen soll, wird eine entsprechende Variable übergeben.
Die Funktionen SchreibeKopf() und SchreibeZelle() schreiben die einzelnen Datenzellen und setzen dabei die Variablen zur Gestaltung des Kalenders ein.

nach oben
weiter | Seite Persönliche Seitenbesuche zählen mit Cookies
zurück | Seite Taschenrechner
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Persönliche Seitenbesuche zählen mit Cookies

SELFHTML

Persönliche Seitenbesuche zählen mit Cookies
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Cookies (Kekse) sind ein nicht unumstrittenes Feature, das Netscape in JavaScript eingebaut hat. Cookies erlauben einem JavaScript-Programm, Daten auf der Festplatte des Anwenders zu speichern. Dies geschieht jedoch in kontrollierter Form. Ein "Ausspionieren" der Anwenderfestplatte ist dabei ebenso wenig möglich wie das platzieren von ausführbarem Code, also etwa Viren. Denn wenn Sie in einem JavaScript einen Cookie schreiben, können Sie nicht angeben, wohin der Cookie beim Anwender gespeichert wird. Das kontrolliert der WWW-Browser des Anwenders. Außerdem können Cookies keine unkontrollierten Datenmengen auf den Anwenderrechner schreiben, sondern nur eine begrenzte Anzahl von Zeilen. Jede solcher Zeilen definiert eine Variable und weist dieser Variablen einen Wert zu. Ein Cookie lässt sich also mit einem Eintrag in einer Konfigurationsdatei vergleichen - mit dem Unterschied, dass der Cookie keine Konfigurationsdaten des Anwenderrechners ansprechen kann.

Durch die Möglichkeit, Daten zu speichern, werden jedoch viele neue Anwendungsbereiche für JavaScript möglich. So auch das hier beschriebene Beispiel. Denn um zeitlich auseinanderliegende Seitenbesuche zu zählen, muss man die Anzahl der bisherigen Seitenbesuche irgendwo fest speichern, beim nächsten Seitenbesuch wieder auslesen, den Zähler um 1 erhöhen und den neuen Wert wieder speichern. Genau das tut das hier beschriebene Beispiel.

Beachten Sie:

Das Zählen von persönlichen Seitenbesuchen ist etwas anderes als das Zählen aller Seitenbesuche. Um alle Zugriffe auf eine Seite zu verwalten, muss das Programm seine Zählerstände auf dem Server-Rechner ablegen. Deshalb funktioniert ein klassischer "Counter" nur mit CGI. Das hier beschriebene Script zählt nur, wie oft ein bestimmter Anwender eine bestimmte Seite besucht.

Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei. Der Zähler gilt für diese eine Datei.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Pers&ouml;nliche Seitenbesuche z&auml;hlen mit Cookies</title>
<script type="text/javascript">
function WertHolen () {
  var Wert = "";
  if (document.cookie) {
    var Wertstart = document.cookie.indexOf("=") + 1;
    var Wertende = document.cookie.indexOf(";");
    if (Wertende == -1)
      Wertende = document.cookie.length;
    Wert = document.cookie.substring(Wertstart, Wertende);
  }
  return Wert;
}

function WertSetzen (Bezeichner, Wert, Verfall) {
  var jetzt = new Date();
  var Auszeit = new Date(jetzt.getTime() + Verfall);
  document.cookie = Bezeichner + "=" + Wert + "; expires=" + Auszeit.toGMTString() + ";";
}

function Zaehlerstand () {
  var Verfallszeit = 1000 * 60 * 60 * 24 * 365;
  var Anzahl = WertHolen();
  var Zaehler = 0;
  if (Anzahl != "")
    Zaehler = parseInt(Anzahl);
  Zaehler = Zaehler + 1;
  WertSetzen("Zaehler", Zaehler, Verfallszeit);
  return (Zaehler);
}
</script>
</head>
<body>

<h1>Eine Seite, die etwas über Sie wei&szlig;...</h1>

<script type="text/javascript">
var x = Zaehlerstand();
document.write("<p>Dies ist Ihr <b>" + x + ".<\/b> Besuch auf dieser Seite!<\/p>");
</script>

<p>Benutzen Sie doch mal die Reload-Funktion Ihres Browsers ...</p>

</body>
</html>

Erläuterung:

Cookie lesen und gespeicherten Wert ermitteln:

Die Seite Funktion WertHolen(), die im Beispiel definiert ist, ist allgemein geschrieben. Sie können diese Funktion nutzen, um einen Cookie auszulesen. Wenn die Datei schon einmal einen Cookie geschrieben hat, wird dessen Wert ermittelt und zurückgegeben. Wenn noch kein Cookie existiert, wird eine leere Zeichenkette "" zurückgegeben.

Mit der Abfrage if(document.cookie) ermittelt die Funktion, ob bereits ein Cookie vorhanden ist. Wenn ja, wird dessen Wert ermittelt. Ein Cookie besteht normalerweise aus einem Bezeichner und einem Wert, zum Beispiel:
Zaehler=4
Dabei ist Zaehler der Bezeichner und 4 der Wert, der diesem Bezeichner zugewiesen ist. Die Funktion WertHolen() holt sich den Wert, indem sie mit indexOf()-Befehlen den Anfang und das Ende des Wertes innerhalb des gespeicherten Cookies ermittelt. Diesen Wert weist sie der Variablen Wert zu. Die Variable Wert wird am Ende der Funktion zurückgegeben.

Cookie schreiben und Wert setzen:

Die Funktion WertSetzen(), die im Beispiel definiert ist, ist ebenfalls allgemein geschrieben. Diese Funktion erwartet drei Parameter:
Bezeichner ist das Element vor dem Istgleichzeichen, zum Beispiel Zaehler.
Wert ist der Wert, der dem Bezeichner zugewiesen und mit gespeichert werden soll.
Verfall ist eine Zahl, die als Anzahl Millisekunden interpretiert wird. Jeder Cookie, der über die aktuelle Browser-Sitzung hinaus gespeichert bleiben soll, muss eine Angabe dazu enthalten, wann der Browser den Cookie löschen soll. Das soll verhindern, das Cookies "ewig" gespeichert bleiben. Der Verfallszeitpunkt des Cookies muss in Form des GMT-Zeitformats angegeben werden. Darum brauchen Sie sich aber nicht zu kümmern, da die Funktion WertSetzen() dies automatisch erledigt. Die Funktion ermittelt zu diesem Zweck die aktuelle Zeit (var jetzt = new Date();). In der Variablen Auszeit errechnet sie einen zukünftigen Zeitpunkt aus dem übergebenen Parameter Verfall und dem ermittelten aktuellen Zeitpunkt.

Mit der Anweisung, die mit document.cookie beginnt, wird der Cookie geschrieben.

Übergeordnete Funktion zum Verwalten des Cookies:

Die beiden allgemeinen Funktionen WertHolen() und WertSetzen() benötigen nun noch ein paar allgemeine Anweisungen, die den Cookie verwalten. Dies geschieht im Beispiel in der Funktion Zaehlerstand(). Zunächst definiert diese Funktion einen Verfallswert, der später beim Schreiben des Cookies an die Funktion WertSetzen() übergeben wird. Mit dem Rechenausdruck 1000*60*60*24*365 wird die Millisekundenzahl eines Jahres ermittelt. Der Cookie soll also ein Jahr lang gespeichert werden.

Um die persönlichen Seitenbesuche des Anwenders zu verwalten, muss die Funktion Zaehlerstand() folgendes tun: sie muss erstens den aktuellen Zählerstand ermitteln, zweitens den Zähler um 1 erhöhen und drittens den neuen Zählerstand wieder speichern. Wenn noch kein Cookie vorhanden ist, d.h. wenn der Anwender die Seite zum ersten Mal besucht, muss der Zähler auf 1 gesetzt und gespeichert werden.

Zuerst ruft die Funktion Zaehlerstand() deshalb die Funktion WertHolen() auf, um den aktuellen Zählerstand zu ermitteln. Der Rückgabewert von WertHolen() wird in der Variablen Anzahl gespeichert. Wenn noch kein Cookie vorhanden ist, steht in Anzahl anschließend eine leere Zeichenkette "". Ist ein Wert vorhanden, enthält Anzahl den Wert in Form einer Zeichenkette. Da man mit Zeichenketten nicht rechnen kann, zum Hochzählen des Zählers jedoch ein numerischer Wert benötigt wird, wird im Beispiel noch eine numerische Variable namens Zaehler definiert. Mit der parseInt()-Methode wird dieser Variablen der Wert von Anzahl als Zahl zugewiesen.

Wenn ein Cookie vorhanden ist, wird der Zähler um 1 erhöht. Anschließend wird die Funktion WertSetzen() aufgerufen, die den Cookie speichert. Als Bezeichner wird das Wort "Zaehler" übergeben, als Wert der Inhalt der Variablen Zaehler, und als Verfallszeitpunkt der Inhalt der Variablen Verfallszeit.

Wenn kein Cookie vorhanden ist, wird die Funktion Funktion WertSetzen() genauso aufgerufen. Vorher wird jedoch der Inhalt der Variablen Zaehler auf 1 gesetzt.

Am Ende gibt die Funktion Zaehlerstand() mit Hilfe von return() zurück. Damit kann diese Funktion beispielsweise an anderer Stelle für eine Ausgabe innerhalb der Seite aufgerufen werden, so wie im Beispiel. Dort ist im body-Bereich ein weiterer JavaScript-Bereich notiert. Innerhalb davon wird die Funktion Zaehlerstand() aufgerufen, und ihr Rückgabewert, also der aktuelle Zähler, wird in der Variablen x gespeichert. Anschließend wird mit document.write HTML-Code ins Anzeigefenster des Browsers geschrieben, wobei die Variable x mit ausgegeben wird.

Beachten Sie:

Opera bis Version 6 und Safari 1.0 erlauben kein Setzen von Cookies im Protokoll file://.

nach oben
weiter | Seite Formulareingaben überprüfen
zurück | Seite Monatskalender
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Formulareingaben überprüfen

SELFHTML

Formulareingaben überprüfen
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Wenn Sie HTML-basierte Kapitel Formulare im WWW anbieten, kann jeder Anwender irgendeinen Unsinn in das Formular schreiben und es dann abschicken. Betroffen davon sind vor allem Eingabefelder. Dadurch erhalten Sie überflüssige E-Mails, oder ein Kapitel Perl-Script, das die Formulareingaben automatisch verarbeitet, speichert leere oder nutzlose Daten ab. Mit Hilfe von JavaScript können Sie Formulareingaben überprüfen, bevor das Formular abgeschickt wird. Bei fehlenden oder offensichtlich fehlerhaften Eingaben können Sie das Absenden des Formulars verhindern.

Das Beispiel auf dieser Seite zeigt, wie eine solche Überprüfung im Prinzip funktioniert. Je nachdem, was Ihr Formular enthält, müssen Sie das Beispiel natürlich erweitern.

Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt die vollständige HTML-Datei mit dem Formular und dem JavaScript zum Überprüfen der Formulareingaben. Das Beispielformular ruft nach erfolgreichem Absenden ein CGI-Script auf dem Server von aktuell.de.selfhtml.org auf.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Formulareingaben &uuml;berpr&uuml;fen</title>
<script type="text/javascript">
function chkFormular () {
  if (document.Formular.User.value == "") {
    alert("Bitte Ihren Namen eingeben!");
    document.Formular.User.focus();
    return false;
  }
  if (document.Formular.Ort.value == "") {
    alert("Bitte Ihren Wohnort eingeben!");
    document.Formular.Ort.focus();
    return false;
  }
  if (document.Formular.Mail.value == "") {
    alert("Bitte Ihre E-Mail-Adresse eingeben!");
    document.Formular.Mail.focus();
    return false;
  }
  if (document.Formular.Mail.value.indexOf("@") == -1) {
    alert("Keine E-Mail-Adresse!");
    document.Formular.Mail.focus();
    return false;
  }
  if (document.Formular.Alter.value == "") {
    alert("Bitte Ihr Alter eingeben!");
    document.Formular.Alter.focus();
    return false;
  }
  var chkZ = 1;
  for (i = 0; i < document.Formular.Alter.value.length; ++i)
    if (document.Formular.Alter.value.charAt(i) < "0" ||
        document.Formular.Alter.value.charAt(i) > "9")
      chkZ = -1;
  if (chkZ == -1) {
    alert("Altersangabe keine Zahl!");
    document.Formular.Alter.focus();
    return false;
  }
}
</script>
</head>
<body>

<h1>Formular</h1>

<form name="Formular" action="http://de.selfhtml.org/cgi-bin/formview.pl"
  method="post" onsubmit="return chkFormular()">
<pre>
Name:     <input type="text" size="40" name="User">
Wohnort:  <input type="text" size="40" name="Ort">
E-Mail:   <input type="text" size="40" name="Mail">
Alter:    <input type="text" size="40" name="Alter">
Formular: <input type="submit" value="Absenden"><input type="reset" value="Abbrechen">

Zum Absenden muss eine Internet-Verbindung bestehen!
</pre>
</form>

</body>
</html>

Erläuterung:

Formular definieren:

Im Beispiel wird ein gewöhnliches HTML-Formular mit einigen Eingabefeldern, einem Rest-Button zum Zurücksetzen des Formulars und einem Submit-Button zum Absenden des Formulars definiert. Die einzige Besonderheit ist die Anweisung onsubmit="return chkFormular()" im einleitenden <form>-Tag. Der Seite Event-Handler onsubmit wird aktiv, wenn der Anwender auf den Submit-Button klickt, um das Formular abzusenden. Dann wird die JavaScript-Funktion chkFormular() aufgerufen, die im Dateikopf in einem JavaScript-Bereich notiert ist. Wenn die Funktion Fehler bei den Eingaben findet, gibt sie den Wert false (falsch) zurück, ansonsten den voreingestellten Wert true (wahr). Mit return wird dieser Wert im einleitenden <form>-Tag an den Browser weitergegeben. Der Browser kennt die beiden Werte true und false. Im Zusammenhang mit onsubmit reagiert er so, dass er das Formular nur dann abschickt, wenn der Wert true ist. Ist der Wert false, wird das Absenden der Formulardaten verhindert.

Formular überprüfen:

Die eigentliche Formularüberprüfung findet im Beispiel in der Funktion chkFormular() statt, die in dem Script-Bereich im Dateikopf notiert ist. Im Beispiel soll jedes Eingabefeld daraufhin überprüft werden, ob es einen Inhalt hat, d.h. ob der Anwender es ausgefüllt hat. Bei der Angabe zur E-Mail-Adresse soll zusätzlich überprüft werden, ob in der Eingabe das Zeichen @ vorkommt. Ist das nicht der Fall, kann man davon ausgehen, dass der Anwender Unsinn eingegeben hat in dem entsprechenden Feld. Bei der Altersangabe schließlich soll zusätzlich überprüft werden, ob die Eingabe eine positive ganze Zahl ist. Andernfalls muss man auch hierbei eine unsinnigen Angabe vermuten.

Mit einer Abfrage wie if (document.Formular.User.value == "") wird ermittelt, ob das entsprechende Formularfeld (im Beispiel also das Feld mit dem Namen User im Formular mit dem Namen Formular) überhaupt einen Inhalt hat. Es wird also auf die leere Zeichenkette "" hin geprüft.

Mit einer Abfrage wie if (document.Formular.Mail.value.indexOf('@') == -1) wird ermittelt, ob in der Eingabe ein bestimmtes Zeichen fehlt (hier das @-Zeichen, das für E-Mail-Adressen charakteristisch ist).

Mit einem Ausdruck wie:
for (i = 0; i < document.Formular.Alter.value.length; ++i)
  if (document.Formular.Alter.value.charAt(i) < "0" ||
    document.Formular.Alter.value.charAt(i) > "9")
ermitteln Sie Zeichen für Zeichen, ob ein eingegebener Wert etwas anderes als Ziffern enthält. Wenn ja, wird im Beispiel eine Merkvariable namens chkZ auf den Wert -1 gesetzt.

Bei allen Abfragen dieser Art werden jeweils drei Anweisungen ausgeführt, wenn die Anwendereingaben der Prüfung nicht standhalten. Zuerst wird mit alert() jeweils in einem Meldungsfenster ausgegeben, was der Anwender falsch gemacht hat. In der zweiten Anweisung wird mit der focus()-Methode auf das Formularelement positioniert, auf das sich der Fehler bezieht. Der Anwender kann seine Feldeingabe also gleich korrigieren. Die dritte Anweisung schließlich gibt false zurück. Dadurch wird das Absenden des Formulars verhindert.

nach oben
weiter | Seite Dynamische grafische Buttons
zurück | Seite Persönliche Seitenbesuche zählen mit Cookies
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Dynamische grafische Buttons

SELFHTML

Dynamische grafische Buttons
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Auf WWW-Seiten kommen häufig grafische Button-Leisten zum Einsatz, die Verweise zu bestimmten Seiten des Projekts enthalten. Wenn der Anwender mit der Maus über solche Grafiken fährt, erkennt er am veränderten Mauszeiger und an den Verweiszielanzeigen in der Statuszeile des WWW-Browsers, dass es sich um Verweise handelt. Mit Hilfe von JavaScript können Sie solche grafischen Verweise jedoch noch deutlicher kenntlich machen und der Benutzerführung gleichzeitig ein wenig mehr Pep verleihen ("Mouseover-Effekt").

Dazu brauchen Sie je zwei gleichartige, farblich unterschiedliche Grafiken für je einen Grafikbutton. Im Anzeigebeispiel zu diesem Abschnitt sind das die beiden folgenden Button-Paare:

Home | Home
Helferlein | Helferlein
Layouts | Layouts

Mit Hilfe von JavaScript lässt sich nun eine Grafik durch eine andere ersetzen, zum Beispiel, wenn die Grafik als Verweises dient und der Anwender mit der Maus über die Grafik fährt. Wie das im einzelnen funktioniert, wird im folgenden beschrieben.

Dieses Beispiel funktioniert mit Netscape ab Version 3.x und mit dem Internet Explorer ab Version 4.x. Beachten Sie, dass es bei Verwendung dynamischer Grafiken in Tabellen innerhalb von Tabellen bei Netscape zu Verschiebungsproblemen kommen kann.

Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei mit Button-Leiste und dem JavaScript zum Steuern der Mouseover-Effekte.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "button1.gif";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "button2.gif";     /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "button2h.gif"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "button3.gif";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "button3h.gif"; /* dritte Highlight-Grafik */

/* usw. fuer alle weiteren zu benutzenden Grafiken */

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<style type="text/css">
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p  { color:#000000; font-family:Arial,sans-serif; }
</style>
</head>
<body bgcolor="#FFFFC0" background="buttonsback.gif">

<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">

<a href="../../../index.htm"
   onmouseover="Bildwechsel(0, Highlight1)"
   onmouseout="Bildwechsel(0, Normal1)"><img src="button1.gif"
   width="130" height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
   onmouseover="Bildwechsel(1, Highlight2)"
   onmouseout="Bildwechsel(1, Normal2)"><img src="button2.gif"
   width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="../../../layouts/index.htm"
   onmouseover="Bildwechsel(2, Highlight3)"
   onmouseout="Bildwechsel(2, Normal3)"><img src="button3.gif"
   width="130" height="30" border="0" alt="Layouts"></a><br>

</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td valign="top">

<h1>Dynamische grafische Buttons</h1>

<p><b>Fahren Sie mit der Maus über die Buttons. Sie dürfen auch draufdrücken ;-)</b></p>

</td>
</tr>
</table>

</body>
</html>

Erläuterung:

Neue Grafikobjekte für Highlight-Grafiken erzeugen:

Für jede Grafik, die Sie dynamisch anzeigen möchten, müssen Sie eine Instanz des Seite image-Objekts erzeugen. Das gilt sowohl für die Grafiken, die zunächst in der HTML-Datei referenziert werden, als auch für diejenigen, die beim Überfahren mit der Maus dynamisch angezeigt werden sollen.

Dazu wird im Beispiel mit Anweisungen wie Normal1 = new Image(); eine Objektinstanz erzeugt. Nachdem die Objektinstanz erzeugt ist, sind unter dem gewählten Objektnamen, im ersten Fall Normal1, alle Eigenschaften des Objekts ansprechbar. Zunächst enthält das Objekt noch gar keine Daten. Mit der Anweisung Normal1.src = "button1.gif"; wird dem neuen Grafikobjekt eine Grafikdatei zugewiesen.

Wiederholen Sie die beiden beschriebenen Anweisungen für jede Grafikdatei, die von dynamischen Änderungen betroffen sein wird - und zwar sowohl für Grafiken, die im "Normalfall" angezeigt werden, als auch für Grafiken, die beim Darüberfahren mit der Maus dynamisch angezeigt werden. Vergeben Sie dabei jedesmal einen neuen Objektnamen. Im obigen Beispiel sind die entsprechenden Befehle auskommentiert, sodass Sie erkennen können, was an welcher Stelle definiert wird.

Funktion "Bildwechsel()" zum dynamischen Austauschen von Grafiken:

Der bisherige Code im Beispiel wird beim Einlesen der HTML-Datei direkt ausgeführt, da er nicht in einer Funktion gebunden ist. Die Ausführung dieses Codes bewirkt aber keine sichtbaren Ausgaben und wird vom Anwender gar nicht bemerkt. Das, was am Bildschirm mit Hilfe von JavaScript passieren soll, nämlich das dynamische Austauschen eines Bildes, geschieht in der definierten Seite Funktion Bildwechsel().

Die Funktion soll aufgerufen werden, wenn der Anwender mit der Maus über einen grafischen Verweis fährt, und wenn er den Verweisbereich mit der Maus wieder verlässt. Dazu benötigt die Funktion zwei Parameter: die wie vielte Grafik in der Datei ausgetauscht werden soll (Parameter Bildnr), und durch welches zuvor definierte Grafikobjekt das Bild ersetzt werden soll (Parameter Bildobjekt). Die Funktion kommt dann mit einer einzigen Anweisung aus. Diese Anweisung ersetzt das vorhandene Bild durch das neue. Beachten Sie hier den wichtigen Zusammenhang: das dynamische Ersetzen einer Grafik ist nur möglich, wenn für die neue Grafik zuvor eine Instanz des Grafikobjekts erzeugt wurde. Im Beispiel geschah dies ja ganz am Anfang des Scripts.

Grafische Verweise mit Event-Handlern für Mausbewegungen des Anwenders:

Damit der gewünschte Effekt zustande kommt, müssen Sie in der HTML-Datei Seite Grafiken als Verweise definieren.

Im einleitenden Verweis-Tag werden die Seite Event-Handler onmouseover und onmouseout notiert. Bei onmouseover (wenn der Anwender mit der Maus über den verweis-sensitiven Bereich, hier die Grafik, fährt) wird die im Script-Bereich definierte Funktion Bildwechsel() aufgerufen, ebenso bei onmouseout (wenn der Mauszeiger den verweis-sensitiven Bereich wieder verlässt).

Beim Aufruf von Bildwechsel() werden jeweils die beiden benötigten Parameter übergeben. Zählen Sie dazu die referenzierten Grafikdateien in der HTML-Datei, aber fangen Sie bei 0 an zu zählen, d.h. 0 für die erste Grafik in der Datei, 1 für die zweite Grafik usw. Übergeben Sie den Indexwert der Grafik, die in den Verweis eingebettet ist. Im Beispiel sind in der gesamten HTML-Datei keine anderen als die dynamisch zu tauschenden Grafiken referenziert. Deshalb wird im ersten Fall 0 (erste Grafik der Datei) übergeben, im zweiten Fall 1 (zweite Grafik der Datei).
Beim zweiten Parameter übergeben Sie den Objektnamen für das gewünschte Grafikobjekt. Das ist einer der Namen, die Sie am Anfang des Script-Bereichs vergeben haben. Im Beispiel wird im ersten Fall z.B. Highlight1 bei onmouseover übergeben, und Normal1 bei onmouseout.

nach oben
weiter | Seite Aufenthaltsdauer auf Web-Seite anzeigen
zurück | Seite Formulareingaben überprüfen
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Sprachelemente / Aufenthaltsdauer auf Web-Seite anzeigen

SELFHTML

Aufenthaltsdauer auf Web-Seite anzeigen
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Das Beispiel auf dieser Seite zeigt in einem kleinen Feld laufend an, wie viele Minuten und Sekunden seit dem Aufruf der Seite verstrichen sind. Gedacht ist die Anzeige des Feldes vor allem für HTML-Dateien, die innerhalb eines Frame-Fensters ständig angezeigt bleiben, etwa in einem Frame-Fenster mit einem Logo oder mit Verweisen. In solchen Fällen läuft die Uhr während der gesamten Besuchszeit, die der Anwender auf den Seiten verbringt. Man mag das als eine überflüssige Spielerei abtun, aber angenommen, es wird etwas angezeigt, wobei der Anwender schnell die teure Online-Zeit vergisst, etwa ein Spiel oder ein Chat-Fenster. Dann kann eine solche kleine "Erinnerung" in Form einer laufenden Zeituhr durchaus nützlich sein.

Netscape 2.0 MS IE 3.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt die HTML-Datei, in der das JavaScript und die Zeitanzeige stehen. Im Anzeigebeispiel ist diese Datei in ein Frameset eingebunden.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Aufenthaltsdauer auf Web-Seite anzeigen</title>
<script type="text/javascript">
var Jetzt = new Date();
var Start = Jetzt.getTime();

function ZeitAnzeigen () {
  var absSekunden = Math.round(ZeitBerechnen());
  var relSekunden = absSekunden % 60;
  var absMinuten = Math.abs(Math.round((absSekunden - 30) / 60));
  var anzSekunden = "" + ((relSekunden > 9) ? relSekunden : "0" + relSekunden);
  var anzMinuten = "" + ((absMinuten > 9) ? absMinuten : "0" + absMinuten);
  window.document.Anzeige.Zeit.value = anzMinuten + ":" + anzSekunden;
  window.setTimeout("ZeitAnzeigen()", 1000);
}

function ZeitBerechnen () {
  var Immernoch = new Date();
  return ((Immernoch.getTime() - Start) / 1000);
}
</script>
</head>
<body bgcolor="#EEEEEE" onload="window.setTimeout('ZeitAnzeigen()', 1000)">

<form name="Anzeige" action="">
<input type="text" size="7" name="Zeit" value="00:00">
</form>

<p>viel Spa&szlig; im rechten Frame-Fenster!</p>

</body>
</html>

Erläuterung:

Startzeit ermitteln:

Beim Einlesen der Datei wird zunächst der aktuelle Zeitpunkt ermittelt. Dieser Zeitpunkt dient als Startzeit der Anzeige. Mit Jetzt = new Date() wird ein neues Seite Datumsobjekt mit dem aktuellen Zeitpunkt in der Variablen Jetzt gespeichert. Mit Jetzt.getTime wird eine absolute Zahl in Millisekunden ermittelt, die in der Variablen Start gespeichert wird.

Funktion zur Zeitanzeige erstmals aufrufen:

Im einleitenden <body>-Tag steht im Beispiel der erste Aufruf der Funktion ZeitAnzeigen(), die die Zeit anzeigt und die Anzeige jede Sekunde aktualisiert. Der erste Aufruf erfolgt nach einer Sekunde. Dazu wird der Funktionsaufruf in die setTimeout()-Methode mit einer Verzögerungszeit von 1000 Millisekunden (1 Sekunde) eingebettet.
Im Dateikörper steht dann ein Formular, das nur aus einem einzigen kleinen Eingabefeld besteht. Dieses Eingabefeld wird als Ausgabefeld für die Zeitanzeige zweckentfremdet. Es wird mit dem Wert 00:00 vorbelegt, damit auch in der ersten Sekunde schon etwas in dem Feld steht.

Zeit anzeigen und Anzeige laufend aktualisieren:

Die Funktion ZeitAnzeigen(), die für die laufende Zeitanzeige verantwortlich ist, ruft zunächst die Unterfunktion ZeitBerechnen() auf. Diese Funktion erzeugt bei jedem Aufruf ein neues Datumsobjekt mit dem aktuellen Zeitpunkt. Das Ergebnis wird in der Variablen Immernoch gespeichert. Zurückgegeben wird jedoch nicht der aktuelle Zeitpunkt, sondern die Differenz zwischen dem aktuellen Zeitpunkt und dem Startzeitpunkt, der beim Einlesen der Datei ermittelt wurde. Der Rückgabewert erfolgt in Sekunden. Da beim Datumsobjekt intern in Millisekunden gerechnet wird, wird der Wert durch 1000 geteilt, um Sekunden zu erhalten. Dabei können jedoch Bruchzahlen zustande kommen. Um eine glatte Sekundenzahl zu erhalten, wendet die aufrufende Funktion ZeitAnzeigen() die Methode Math.round() an.

Die absolute Anzahl der vergangenen Sekunden steht dann in der Variablen absSekunden. Von dem darin gespeicherten Wert werden alle folgenden Werte abgeleitet. Mit Math.round((absSekunden-30)/60) wird ermittelt, wie viele Minuten die Sekundenzahl bereits impliziert. Wenn die Sekundenzahl beispielsweise 200 lautet, sind darin 3 Minuten (180 Sekunden) enthalten. Dieser Wert wird in der Variablen absMinuten gespeichert. Da Opera 5.12 in den ersten 30 Sekunden als Ergebnis der Operation -0 zurückliefert, wird zur Unterdrückung des Minuszeichens mit Math.abs der absolute Betrag des Wertes ermittelt. Der Restwert an Sekunden, also bei 200 und 180 etwa der Wert 20, wird mit der Modulo-Division absSekunden % 60 in der Variablen relSekunden gespeichert. Im Falle von 200 steht dann also in absMinuten der Wert 3 und in relSekunden der Wert 20.

Um die Anzeige der Minuten und Sekunden für die Ausgabe ordentlich zu formatieren, werden Zeichenketten erzeugt, die in den Variablen anzSekunden und anzMinuten gespeichert werden. Wenn eine Minuten- oder Sekundenzahl einstellig ist, bekommt sie eine 0 vorangestellt.

Mit der Zuweisung an window.document.Anzeige.Zeit.value wird die ermittelte und formatierte Zeit anschließend in das Formularfeld geschrieben, das zur Zeitanzeige dient. Damit die Zeitanzeige weiterläuft, ruft sich die Funktion ZeitAnzeigen() am Ende mit einer Verzögerungszeit von 1000 Millisekunden, also einer Sekunde, selbst wieder auf. Dadurch wird der gesamte Vorgang wiederholt.

nach oben
weiter | Seite Verweisliste als Auswahlliste
zurück | Seite Dynamische grafische Buttons
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Verweisliste als Auswahlliste

SELFHTML

Verweisliste als Auswahlliste
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

In diesem Beispiel wird beschrieben, wie Sie eine Seite Auswahlliste eines HTML-Formulars als praktische Alternative für lange Listen für Verweise benutzen können. Auf diesem Prinzip basiert etwa auch die Seite SELFHTML-Quickbar. Die Auswahlliste wird dabei in Form einer kleinen Aufklappliste realisiert, die in einem eigenen schmalen Frame-Fenster platziert ist. Das nimmt kaum Platz in Anspruch, und trotzdem steht dem Anwender in jeder Situation eine Liste mit Verweisen zur Verfügung.

Netscape 3.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt die HTML-Datei, die das Frameset definiert, und die Datei, die im oberen, schmalen Frame-Fenster angezeigt wird. In dieser Datei ist die Auswahlliste und das JavaScript zum Steuern der Auswahlliste enthalten.

Beispiel - Datei mit dem Frameset:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Verweisliste als Auswahlliste</title>
</head>
<frameset rows="40,*" border="0" frameborder="0" framespacing="0">
 <frame src="verweisliste2.htm" name="oben" marginheight="3" marginwidth="10">
 <frame src="../verweisliste.htm" name="unten">
</frameset>
</html>

Beispiel - Datei verweisliste2.htm:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Go (select) {
  var wert = select.options[select.options.selectedIndex].value;
  if (wert == "leer") {
    select.form.reset();
    parent.frames["unten"].focus();
    return;
  } else {
    if (wert == "ende") {
      top.location.href = parent.frames[1].location.href;
    } else {
      parent.frames["unten"].location.href = wert;
      select.form.reset();
      parent.frames["unten"].focus();
    }
  }
}
</script>
<style type="text/css">
body { color:#000000; background-color:#EEEEEE; }
select { width:250px; background-color:#FFFFE0; font-size:12px; font-family:Arial,sans-serif; }
</style>
</head>
<body>

<form action="">
<p><select size="1" name="Auswahl" onchange="Go(this)" width="250">
<option value="leer" selected="selected">[ bitte auswählen! ]</option>
<option value="leer">------------------------</option>
<option value="../verweisliste.htm">Verweisliste als Auswahlliste</option>
<option value="leer">------------------------</option>
<option value="../../../editorial/index.htm">Editorial</option>
<option value="../../../intro/index.htm">Einführung</option>
<option value="../../../html/index.htm">HTML/XHTML</option>
<option value="../../../css/index.htm">Stylesheets</option>
<option value="../../../xml/index.htm">XML/DTDs</option>
<option value="../../../javascript/index.htm">JavaScript/DOM</option>
<option value="../../../dhtml/index.htm">Dynamisches HTML</option>
<option value="../../../perl/index.htm">Perl</option>
<option value="leer">------------------------</option>
<option value="ende">Beenden</option>
</select></p>
</form>

</body></html>

Erläuterung:

Frame-Set definieren:

Da die Auswahlliste im Beispiel während der Anzeige der Web-Seite ständig eingeblendet sein soll, wird ein Frame-Set definiert. Es besteht aus zwei Fenstern, nämlich einem schmalen Streifen im oberen Bereich des Browser-Fensters und einem Hauptfenster für die Anzeige. Das obere Fenster, in dem die Auswahlliste platziert werden soll, ist 40 Pixel hoch, nimmt also nur wenig Platz in Anspruch.
Im oberen Frame-Fenster wird beim Aufruf die Datei verweisliste2.htm angezeigt. Diese Datei wird die Auswahlliste enthalten. Im unteren Fenster wird im Beispiel die Datei ../verweisliste.htm angezeigt. Das könnte beispielsweise die Titelseite Ihres Web-Projekts sein.

Auswahlliste definieren:

In der Datei verweisliste2.htm wird innerhalb des Dateikörpers nichts anderes als ein Formular mit einer Auswahlliste definiert.

Die einzelnen Auswahlmöglichkeiten stellen die Verweise dar. Es gibt im Beispiel drei Formen, wie so eine Auswahlmöglichkeit aussieht.
<option value="datei1.htm">Erste Datei</option>
Eine solche Auswahlmöglichkeit definiert Daten, die von JavaScript später als Verweis interpretiert werden. Im Attribut value steht das gewünschte Verweisziel. Im option-Element steht der Verweistext, der in der Auswahlliste erscheinen soll.
<option value="leer">[ Titel ]</option>
Mit solchen Einträgen werden Auswahlmöglichkeiten definiert, die in der Liste erscheinen, aber keine Wirkung haben sollen. Das können in längeren Listen zum Beispiel Trennlinien-Einträge sein. Auch die erste Auswahlmöglichkeit der Liste muss so definiert werden, denn sie stellt die "Listenüberschrift" dar. Bei solchen Einträgen notieren Sie einfach im Attribut value den Wert leer.
<option value="ende">Beenden</option>
Mit einem solchen Eintrag, der sinnvollerweise die letzte Auswahlmöglichkeit darstellt, können Sie bewirken, dass die Auswahlliste beendet wird. Notieren Sie dazu im Attribut value den Wert ende. Wenn Sie kein Beenden der Auswahlliste ermöglichen wollen, lassen Sie einen solchen Eintrag einfach weg.

Entscheidend zum Verarbeiten der Auswahlliste sind die Angaben im einleitenden <select>-Tag. Dort wird der Seite Event-Handler onchange notiert, der das Ausführen von JavaScript-Code ausführt, sobald der Anwender einen neuen Eintrag in der Auswahlliste auswählt. Wenn dieses Ereignis eintritt, wird im Beispiel die Funktion Go() aufgerufen. Dazu wird mit Seite this das select-Elementobjekt als Parameter übergeben.

Auswahl verarbeiten:

Im Dateikopf steht die Funktion Go(), die das Seite select-Elementobjekt als Parameter übergeben bekommt. In der Funktion kann somit über die Variable select darauf zugegriffen werden. Die Funktion bringt zunächst den Wert des ausgewählten Listeneintrags in Erfahrung, indem Sie über das Seite options-Objekt zunächst den Index der aktuellen Auswahlmöglichkeit ausliest ( Seite selectedIndex) und diese Zahl dazu benutzt, um den Wert derselben ( Seite value) auszulesen. Die Funktion unterscheidet die drei Fälle leer, ende oder Verweisziel und führt abhängig davon entsprechende Anweisungen aus.

Wenn ein Eintrag mit dem Wert leer ausgewählt wurde, wird die Auswahlliste zurückgesetzt (reset()). Der erste Eintrag, also der Überschrifteneintrag der Liste, wird wieder angezeigt. Der Fokus, der auf dem Formularfeld liegt, wird von der Liste bis zur nächsten Auswahl entfernt, indem der untere Frame-Fenster fokussiert wird ( Seite focus()).

Lautet der Eintrag ende, wird einfach das aktuelle Frame-Fenster, also das mit der Auswahlliste, ausgeblendet. Dazu wird der Inhalt des unteren Frame-Fensters zum Inhalt des gesamten Browser-Fensters gemacht (top.location.href = parent.frames["unten"].location.href).

In allen anderen Fällen wird der Wert des ausgewählten Listeneintrags als Verweis interpretiert. Mit der Zuweisung des übergebenen Werts an parent.frames["unten"].location.href wird ein Verweis ausgeführt, der das ausgewählte Verweisziel im Haupt-Frame-Fensters anzeigt. Auch in diesem Fall wird die Auswahlliste zurückgesetzt (reset()). Der erste Eintrag, also der Überschrifteneintrag der Liste, wird wieder angezeigt. Das Haupt-Frame-Fensters bekommt den Fokus und die Auswahlliste wird somit abgewählt.

Beachten Sie:

Im HTML-Standard ist die Verwendung des Attributes width für das <select>-Tag nicht erlaubt. Netscape 4.x interpretiert jedoch keine CSS-Eigenschaften für dieses HTML-Element, akzeptiert dagegen das Attribut width zur Bestimmung der Breite.

Im HTML-Standard ist auch die Verwendung der Attribute border, frameborder und framespacing für das <frameset>-Tag nicht erlaubt. Da die Browser jedoch den Standard nicht vollständig interpretieren, wurden diese Attribute im Interesse des Layouts im obigen Beispiel trotzdem verwendet.

nach oben
weiter | Seite Fehlerbehandlung mit dem Event-Handler onerror
zurück | Seite Aufenthaltsdauer auf Web-Seite anzeigen
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Fehlerbehandlung mit dem Event-Handler onerror

SELFHTML

Fehlerbehandlung mit dem Event-Handler onerror
Informationsseite

nach unten Hinweise zu diesen Beispielen
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Der Sprachumfang von JavaScript erlaubt es mittlerweile, umfangreiche Anwendungen zu erstellen. Dynamische Web-Seiten enthalten teilweise umfangreiche Scripts, die in ihren Abläufen auf etliche Variablen zurückgreifen. Dabei können sich sich leicht unkontrollierbare Werte und Zustände im Programmablauf einschleichen, zum Beispiel auch durch nicht einkalkuliertes Anwenderverhalten. Seit der JavaScript-Version 1.1 steht Ihnen mit dem Event-Handler onerror ein Werkzeug zur zur Verfügung, um innerhalb des Scripts Fehler abzufangen und gezielt darauf zu reagieren.

Zur Unterdrückung von Fehlermeldungen, die zur Laufzeit eines Scripts entstehen, notieren Sie im Kopf der Datei window.onerror. Als Wert weisen Sie den Namen einer Funktion zu, welche die Fehlerbehandlung ausführt. Der Rückgabewert der Funktion muss true sein. Damit haben Sie Ihre eigene Fehlerbehandlung.

Der Fehlerbehandlungs-Funktion können Sie bis zu 3 optionale Parameter übergeben:
1. Nachricht: enthält die Fehlerbeschreibung des Fehlers
2. Datei: enthält den URI der fehlerverursachenden Datei
3. Zeile: enthält die Zeile in der der Fehler auftritt

Diese Art der Fehlerkontrolle können Sie für Netscape 4.x und Internet Explorer ab Version 4.x verwenden. Netscape 6 ist nicht in der Lage, die Parameter vollständig zu interpretieren. Er speichert jeweils im ersten Parameter das auslösende Eventobjekt. Opera interpretiert den an das Fensterobjekt gebundenen Event-Handler window.onerror nicht.

Berücksichtigen Sie, dass Sie nur logische Fehler überwachen und unterdrücken können, die während der Laufzeit der Scripts entstehen. Syntaxfehler, wie z.B. fehlende Klammern usw. sind damit nicht abfangbar.

JavaScript 1.1 Netscape 3.0 MS IE 4.0 Mozilla Firefox 1 Quelltext mit Erläuterungen

Das Beispiel zeigt eine einfach Variante der Fehlerbehandlung. Am Ende des Script-Bereichs wird eine Funktion aufgerufen, die nicht existiert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
window.onerror = Fehlerbehandlung;

function Fehlerbehandlung (Nachricht, Datei, Zeile) {
  Fehler = "Fehlermeldung:\n" + Nachricht + "\n" + Datei + "\n" + Zeile;
  zeigeFehler();
  return true;
}

function zeigeFehler () {
  alert(Fehler);
}

nichtda();
</script>
</head><body>
<a href="javascript:zeigeFehler()">Fehler</a><br>
</body></html>

Erläuterung:

Beim Einlesen der Datei wird mit window.onerror = Fehlerbehandlung angewiesen, im Fehlerfall die Funktion Fehlerbehandlung() aufzurufen. Dieses Ereignis tritt im Beispiel am Ende des Script-Bereichs ein, wo versucht wird, die nichtvorhandene Funktion nichtda() aufzurufen.

Die Funktion Fehlerbehandlung()

Die Funktion speichert mit Seite Zeichenkettenverknüpfung die automatisch übergebenen Parameter in der Variablen Fehler. Dann ruft sie im Beispiel die Funktion zeigeFehler() auf. Diese Funktion dient im Beispiel lediglich dazu, den Fehler zu Demonstrationszwecken auszugeben. Mit return true wird erreicht, dass der Fehler im Browser nicht angezeigt wird. Mit dem Rückgabewert false würden Sie bewirken, dass der Browser den Fehler anmeckern würde.

In einer komplexeren Anwendung hätte die Funktion Fehlerbehandlung() also alle Möglichkeiten, auf den Fehler zu reagieren. Sie könnte beispielsweise die Zeichenkette des übergebenen Parameters Nachricht untersuchen, um herauszufinden, welcher Fehler genau aufgetreten ist. Je nach Situation könnte eine solche Funktion bewirken, dass das Script zu einem früheren Punkt im Programmablauf zurückspringt, Variablen zurücksetzt, den Cursor in ein bestimmtes Formularfeld setzt usw.

nach oben
weiter | Seite Fehlerbehandlung mit dem try..catch-Statement
zurück | Seite Verweisliste als Auswahlliste
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Fehlerbehandlung mit dem try..catch-Statement

SELFHTML

Fehlerbehandlung mit dem try..catch-Statement
Informationsseite

nach unten Hinweise zu diesen Beispielen
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Mit Hilfe der Seite Fehlerbehandlung mit dem Event-Handler onerror können Sie in einem JavaScript Fehler abfangen, nachdem diese aufgetreten sind. Mit der hier vorgestellten Methode können Sie jedoch bereits im Vorfeld verhindern, dass in kritischen Situationen überhaupt Fehler auftreten. Dazu steht seit der JavaScript-Version 1.5 das try..catch-Statement zur Verfügung. Es erlaubt Ihnen, Variablen und Werte zu überprüfen und je nach Ergebnis zu reagieren. Dieses Statement wird vom Internet Explorer ab Version 5.0, von Netscape ab Version 6.0 und von Opera ab Version 5 interpretiert.

JavaScript 1.5 Netscape 6.0 MS IE 5.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel ist so konstruiert, dass es auf eine Variable zugreift, die zunächst noch gar nicht existiert. Das würde zu einem Fehler führen. Das Script "weiß" jedoch, dass dieser Fehler auftreten kann und überprüft deshalb mit dem try..catch-Statement laufend, ob die Variable schon existiert. Erst wenn die Variable existiert, wird die Überwachung beendet.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
setTimeout("x=3", 200);

function zeigeErgebnis (Zaehler, Ergebnis) {
  alert("Nach " + (Zaehler) + " Durchläufen existierte x.\nDie Zahl x ist " + Ergebnis + ".")
}

function teste_x (Zaehler) {
  try {
    if (x == 2) {
      throw "richtig";
    } else if (x == 3) {
      throw "falsch";
    }
  } catch (e) {
    if (e == "richtig") {
      zeigeErgebnis(Zaehler, e);
      return;
    } else if (e == "falsch") {
      zeigeErgebnis(Zaehler, e);
      return;
    }
  } finally {
    Zaehler++;
  }

  setTimeout("teste_x(" + Zaehler + ")", 30);

}
teste_x(0);
</script>
</head><body>
</body></html>

Erläuterung:

Im Dateikopf der Datei ist ein Script-Bereich notiert. Darin werden die erste und die letzte Anweisung sofort beim Einlesen ausgeführt. Die restlichen Anweisungen stehen in Funktionen.

Die Variable x

Während des Ladens der Datei wird eine Variable x zeitverzögert mit dem Wert 3 belegt. Dazu dient die Methode Seite setTimeout(). Die Variable ist also erst nach 200 Millisekunden verfügbar. Jeder Versuch, vorher auf diese Variable zuzugreifen, würde zu einem Fehler führen.

Die nächste Anweisung, die im Beispiel direkt ausgeführt wird, ist die letzte im Script-Bereich, nämlich teste_x(0). Damit wird die Seite Funktion teste_x() aufgerufen, die oberhalb notiert ist.

Die Funktion teste_x()

Diese Funktion versucht, auf die Variable x zugreifen. Da zum Zeitpunkt des Aufrufes der Funktion jedoch noch nicht sicher ist, ob die Variable x bereits existiert, ist innerhalb der Funktion zur Vermeidung von Fehlermeldungen das try..catch-Statement notiert.
Beim Aufruf erhält die Funktion teste_x() einen Parameter namens Zaehler übergeben. Das dient im Beispiel zu Kontrollzwecken.

Aufbau des try..catch-Statements

Das try..catch-Statement hat generell folgenden Aufbau: Nach dem Schlüsselwort try (try = versuchen) wird eine öffnende geschweifte Klammer, gefolgt von der zu prüfenden Seite Bedingung, notiert. Je nach Erfordernissen können Sie dann mit throw (throw = auswerfen) eigene Fehler definieren. Die throw-Definition ist jedoch optional. Anschließend folgt eine schließende geschweifte Klammer, die den try-Block beendet.
Daran anschließend notieren Sie das Schlüsselwort catch (catch = abfangen). catch hat Funktions-Charakter und erwartet einen Parameter e. Die Variable e ist erforderlich, da Sie über diese Variable letztlich die Reaktion des Scripts auf den aktuellen Zustand kontrollieren. Den Namen der Variablen können Sie frei wählen (der Name muss also nicht e sein). Innerhalb des Funktionsblocks von catch(), der wie üblich in geschweiften Klammern steht, können Sie die mit throw definierten Fehler auswerten und darauf reagieren.
Zuletzt können Sie noch das Schlüsselwort finally notieren. In dem davon abhängigen Anweisungsblock können Sie weitere Anweisungen notieren. Diese Anweisungen werden unabhängig von der Fehlerbehandlung in jedem Fall ausgeführt.

Anwendung des try..catch-Statements im Beispiel

Im ersten Teil der Anweisung wird geprüft, ob die Variable x den Wert 2 oder 3 besitzt. Je nach Ergebnis werden mit throw verschiedene Fehlerwerte definiert. Hat x den Wert 2, so wird der "Fehler" mit dem Wert richtig generiert. Hat sie den Wert 3 so erhält der Fehler den Wert falsch. Weitere Fehlervarianten werden nicht behandelt.

Im ersten Durchlauf existiert die Variable x im Beispiel noch gar nicht, da sie ja erst nach 200 Millisekunden existiert. Sie kann damit weder den Wert 2 noch den Wert 3 besitzen. In der nachfolgenden Fehlerbehandlungsroutine catch(e) wird geprüft, ob einer der definierten Fehler, also richtig oder falsch, aufgetreten ist. Zunächst ist das offensichtlich nicht der Fall. Die Anweisungen, die von den "Fehlerwerten" richtig und falsch abhängig sind, werden deshalb nicht ausgeführt. Die finally-Anweisung wird dagegen in jedem Fall ausgeführt. Sie bewirkt im Beispiel, dass der übergebene Parameter Zaehler um 1 erhöht wird.

Gesamtkontrolle

Am Ende ruft sich die Funktion teste_x() mit setTimeout() um 30 Millisekunden zeitverzögert selbst wieder auf. So behält sie die Kontrolle über das Geschehen, bis ein definierter Zustand eintritt. Der Parameter Zaehler wird dabei mit Hilfe einer Seite Zeichenkettenverknüpfung übergeben.

Interessant wird es, wenn der Zeitpunkt erreicht ist, zu dem die Variable x existiert. In diesem Fall tritt einer der vordefinierten Fälle ein. Da x den Wert 3 besitzt, wird der throw-Fehler mit dem Wert falsch generiert (dies soll im Beispiel einfach zeigen, dass throw zur Erzeugung von Werten gedacht ist, die durchaus und oft auch Fehlerzustände bezeichnen). Im nachfolgenden catch(e)-Block führt dies dazu, dass die Funktion zeigeErgebnis() aufgerufen wird. Im Beispiel wird für beide definierten throw-Werte die gleiche Funktion aufgerufen. Sie können an dieser Stelle jedoch auch völlig verschiedene Anweisungen notieren. Jede dieser Fehlerbehandlungsroutinen bricht gleichzeitig die Funktion teste_x() mit return ab, da x ja nun existiert und der "kritische Zustand" beendet ist.

Ausgabe des Ergebnisses

Die Funktion zeigeErgebnis() erhält als Parameter die Variablen Zaehler und Ergebnis übergeben. In der Variablen Zaehler ist die Anzahl der Durchläufe bis zur Existenz der Variablen x gespeichert und in der Variablen Ergebnis das Resultat der Fehlerbehandlung. Mit alert() wird im Beispiel zur Kontrolle ausgegeben, wie viele Durchläufe benötigt wurden und was für ein Ergebnis erreicht wurde.

Die Ausgabe zeigt übrigens sehr deutlich, wie unterschiedlich die Browser mit setTimeout() umgehen. Während Internet Explorer 6 und Netscape 6 bei Tests im Schnitt sieben Durchläufe benötigten, brauchten Opera 8.5 und Firefox 1.5 durchschnittlich drei.

Anwendungsfälle

Prüfungen mit dem try..catch-Statement sind z.B. dann sinnvoll, wenn Sie wie im Beispiel mit setTimeout() zeitversetzte Aktionen ausführen und davon abhängige Anweisungen ausführen wollen. Ebenfalls sinnvoll ist das Statement, wenn Sie z.B. auf Variablen oder Funktionen zugreifen wollen, die in anderen Frame-Fenstern notiert sind, wobei das Script nicht wissen kann, ob die Datei im anderen Frame-Fenster, in der das entsprechende Script notiert ist, bereits eingelesen oder überhaupt die dort aktuell angezeigte Seite ist.

nach oben
weiter | Seite Änderungen der Fenstergröße überwachen
zurück | Seite Fehlerbehandlung mit dem Event-Handler onerror
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: JavaScript / Anwendungsbeispiele / Änderungen der Fenstergröße überwachen

SELFHTML

Änderungen der Fenstergröße überwachen
Informationsseite

nach unten Hinweise zu diesen Beispielen
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus
nach unten

Hinweise zu diesem Beispiel

Eine Verändern der Fenstergröße durch den Anwender hat bei Netscape 4.x gelegentlich die Folge, dass dieser gesetzte Variablen, dynamische Positionierungen oder Stylesheet-Angaben "vergisst". Es ist jedoch möglich, Änderungen der Fenstergröße zu überwachen und damit gezielt auf die Änderung zu reagieren. Auch beim Internet Explorer oder bei Netscape 6 ist es gelegentlich sinnvoll, auf Änderungen reagieren zu können.

Für die Überwachung der Fenstergröße wird der Event-Handler onResize verwendet. Dieser Event-Handler tritt ein, wenn der Anwender die Fenstergröße ändert. Sie können diesem Event-Handler eine Funktion zuordnen, die bei Größenänderungen ausgeführt wird.

Beachten Sie, dass Sie mit diesem Beispiel nur den Neuaufbau der Seite erreichen. Eventuell geänderte Variablen und Werte gehen dabei verloren. In Opera bis Version 6 ist es nicht möglich, die Änderung der Fenstergröße mit dem Event-Handler onResize zu überwachen.

JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Im Beispiel wird die Fenstergröße auf Änderungen hin überwacht. Sobald diese geändert wird, erfolgt ein Neuaufbau der Seite und die geänderten Größen werden jeweils mit Seite document.write() zur Kontrolle in das Dokument geschrieben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head>
<title>Größenänderung überwachen</title>
<script type="text/javascript">
function Fensterweite () {
  if (window.innerWidth) {
    return window.innerWidth;
  } else if (document.body && document.body.offsetWidth) {
    return document.body.offsetWidth;
  } else {
    return 0;
  }
}

function Fensterhoehe () {
  if (window.innerHeight) {
    return window.innerHeight;
  } else if (document.body && document.body.offsetHeight) {
    return document.body.offsetHeight;
  } else {
    return 0;
  }
}

function neuAufbau () {
  if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
    location.href = location.href;
}

/* Überwachung von Netscape initialisieren */
if (!window.Weite && window.innerWidth) {
  window.onresize = neuAufbau;
  Weite = Fensterweite();
  Hoehe = Fensterhoehe();
}
</script>
</head>
<body>
<script type="text/javascript">
/* Überwachung von Internet Explorer initialisieren */
if (!window.Weite && document.body && document.body.offsetWidth) {
  window.onresize = neuAufbau;
  Weite = Fensterweite();
  Hoehe = Fensterhoehe();
}
</script>
<div id="Beispiel" style="position:absolute; top:100px; left:100px; border:solid 1px #000000;">
Text
</div>
<script type="text/javascript">
document.write("Weite: " + Weite + " Höhe: " + Hoehe);
</script>

</body></html>

Erläuterung:

Die Funktionen Fensterweite() und Fensterhoehe()

Diese beiden Funktionen dienen dazu, die Fenstergröße zu ermitteln. Die Funktion Fensterweite() prüft, ob der Browser die Eigenschaft window.innerWidth kennt (das ist bei Netscape der Fall, nicht aber beim Internet Explorer). Ist dies der Fall, so wird der Wert der in dieser Eigenschaft gespeichert ist zurückgegeben. Kennt der Browser diese Eigenschaft nicht, so wird geprüft, ob er das Objekt document.body kennt und ob dieses Objekt die Eigenschaft document.body.offsetWidth kennt (das ist beim Internet Explorer der Fall, nicht aber bei Netscape). Tritt dieser Zustand ein, so wird der Wert der Eigenschaft document.body.offsetWidth zurückgegeben. Sollte der Browser auch diesen Zweig der Anweisung nicht verfolgen können, wird 0 zurückgegeben.
Die Funktion Fensterhoehe() arbeitet analog und verwendet die Eigenschaften window.innerHeight bzw. document.body.offsetHeight.

Überwachung für Netscape initialisieren

Beim Laden der Datei existiert die Variable Weite noch nicht. Da eine globale Variable immer eine Eigenschaft bzw. ein Objekt des Fensterobjektes ist, kann mit window.Weite geprüft werden, ob diese existiert. Netscape kennt zudem die Eigenschaft window.innerWidth. Deshalb arbeitet er die entsprechende Anweisung ab. Zuerst wird die Überwachung des Event-Handler onresize initialisiert (zum Verständnis siehe auch die allgemeine Verwendung des Seite event-Objekts). onResize wird ausgelöst, sobald sich die Fenstergröße ändert und ruft dann die Handler-Funktion neuAufbau() auf. Anschließend wird in der Variablen Weite der Rückgabewert der Funktion Fensterweite() und in der Variablen Hoehe der Rückgabewert der Funktion Fensterhoehe() gespeichert. Damit stehen beide Variablen für weitere Verarbeitungsaufgaben zur Verfügung.

Überwachung für den Internet Explorer initialisieren

Die Überwachung für den Internet Explorer gestaltet sich ähnlich. Im Unterschied zum Netscape Navigator benötigt er jedoch das Objekt document.body. Dieses Objekt steht jedoch erst nach dem Laden des Body-Tags zur Verfügung. Deshalb ist der entsprechende Script-Bereich nicht im Dateikopf, sondern body-Bereichs des Dokuments notiert. Auch der Netscape 6 kennt das Objekt document.body und dessen Eigenschaften. Er führt jedoch diesen Script-Bereich nicht aus, da dieser Browser zum Laufzeitpunkt die Variable Weite bereits kennt.

Die Handler-Funktion neuAufbau()

Die Funktion neuAufbau() wird aufgerufen, wenn der Event-Handler onResize aktiv wird. Sie vergleicht den Wert der Variablen window.Weite mit dem Rückgabewert der Funktion Fensterweite() und den Wert der Variable window.Hoehe mit dem Rückgabewert der Funktion Fensterhoehe(). Daran erkennt sie, ob sich die Fenstergröße verändert hat. In diesem Fall wird die Eigenschaft Seite location.href mit sich selbst überschrieben, was einen Neuaufbau der Seite bewirkt. Wird der Event-Handler onResize aufgerufen, ohne dass eine reale Veränderung der Fenstergröße stattgefunden hat - das kann gelegentlich passieren - geschieht nichts, da die Bedingung zum Neuladen nicht erfüllt ist.

nach oben
weiter | Seite Allgemeines zu Dynamischem HTML
zurück | Seite Fehlerbehandlung mit dem try..catch-Statement
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Anwendungsbeispiele

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML

SELFHTML

Dynamisches HTML
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML, Kapitel Stylesheets und Kapitel JavaScript/DOM.
Dieser Abschnitt beschreibt Lösungen, um HTML-Dateien zu erzeugen, bei denen einzelne Elemente während der Anzeige dynamisch ihren Inhalt ändern.
Der Abschnitt besteht aus folgenden Seiten und Unterabschnitten:

Seite Allgemeines zu Dynamischem HTML
Kapitel Die verschiedenen DHTML-Modelle
Kapitel Beispiele für die Praxis

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zu Dynamischem HTML
Online-Seite WWW-Links zu Dynamischem HTML

nach oben

© 2007 Seite Impressum


SELFHTML: JavaScript / Allgemeines zu Dynamischem HTML

SELFHTML

Allgemeines zu Dynamischem HTML
Informationsseite

nach unten Das "Dynamische" an Dynamischem HTML
nach unten Das Problem der inkompatiblen Modelle
nach unten

Das "Dynamische" an Dynamischem HTML

Dynamisches HTML (engl. "Dynamic HTML" oder abgekürzt "DHTML") ist eine Erfindung von Marktstrategen, sagen Kritiker. In der Tat ist Dynamisches HTML keine klassische HTML-Erweiterung in Gestalt neuer HTML-Elemente. Es ist auch keine neue Sprache. Dynamisches HTML ist vielmehr der Sammelbegriff für verschiedene Lösungen, um dem Autor einer Web-Seite zu ermöglichen, Elemente der Web-Seite während der Anzeige dynamisch zu ändern, sei es automatisch oder durch Einwirken des Anwenders.

Beispiel:

<html><head><title>Test</title>
</head><body>
<p id="Absatz"
onclick="document.getElementById('Absatz').firstChild.nodeValue = 'Sehen Sie!'">
Ich bin dynamisch</p>
</body></html>

Erläuterung:

Das kleine Beispiel zeigt Dynamisches HTML nach dem Document Object Model (DOM) in seiner JavaScript-Umsetzung, das in dieser Form allerdings nur mit neueren Browsern (Internet Explorer ab V5.x und Netscape ab Version 6.x) funktioniert. Es dient hier nur dem Zweck, das "Typische" an Dynamischem HTML zu verdeutlichen. In dem Beispiel wird mit <p>...</p> ein gewöhnlicher HTML-Textabsatz definiert. Am Bildschirm steht dann: Ich bin dynamisch. Damit der Textabsatz sein Versprechen auch halten kann, enthält er im einleitenden <p>-Tag einen so genannten Seite Event-Handler, im Beispiel den Event-Handler onclick. Dieser Event-Handler tritt in Aktion, wenn der Anwender mit der Maus auf den angezeigten Text klickt. Im Beispiel verwandelt sich nach dem Anklicken des Textes dessen Inhalt in: Sehen Sie!.

Wie Sie an dem Beispiel erkennen, können Sie also bestimmte angezeigte Inhalte austauschen, ohne dafür jedesmal vollständige neue Seiten laden zu müssen. Das ist eine charakteristische Eigenschaft von Dynamischem HTML. Eine Web-Seite verhält sich also plötzlich wie eine Anwendung, die einmal in den Arbeitsspeicher geladen wird und dann z.B. durch Interaktion mit dem Anwender das Geschehen am Bildschirm bestimmt.

Dynamisches HTML bietet Gestaltern anspruchsvoller Web-Seiten schier unerschöpfliche Möglichkeiten bei der Kontrolle über das Geschehen am Bildschirm. Es fängt mit Kleinigkeiten wie dem obigen Beispiel an. Es geht weiter mit animierten Grafiken, die über den angezeigten Inhalt gleiten oder hüpfen - manche Web-Seiten versuchen, ganze Aquarien abzubilden. Und es geht hin bis zu der Möglichkeit, mit Hilfe von Grafiken und anderen Elementen komplexe, interaktive Spiele, Lernsituationen oder auch selbstablaufende Animationen zu programmieren. Der Phantasie sind kaum Grenzen gesetzt. Der Anwender kann beim Anzeigen einer dynamischen HTML-Datei auch mit viel mehr Reaktionen konfrontiert werden als beim Betrachten einer normalen, statischen Web-Seite. Das hat Vor- und Nachteile. Es kommt immer darauf an, wie man die Features nutzt, ob zur bloßen Selbstdarstellung und Angeberei, oder zum Nutzen des Anwenders. Außerdem sollte sich jeder Entwickler darüber im Klaren sein, dass dynamische Web-Seiten nicht unbedingt für Suchmaschinen-Robots und erst Recht nicht für sehbehinderte Anwender geeignet sind.

"Programmieren" ist auf jeden Fall bei allem angesagt, was mit Dynamischem HTML zu tun hat: Fortgeschrittene Programmierkenntnisse in Kapitel JavaScript sind Voraussetzung. Im Web finden Sie zwar fertige Lösungen zum Abkupfern, aber wer sich ernsthaft mit der Materie beschäftigen will, um eigene kreative Lösungen zu entwickeln, kommt um die Programmierung nicht herum. Das soll jedoch keine Entmutigung sein. Es gibt durchaus nützliche Anwendungsmöglichkeiten von Dynamischem HTML, die ohne allzugroßen Programmieraufwand auskommen.

Das Problem der inkompatiblen Modelle

Dynamisches HTML wird von Netscape ab Version 4.0 und vom Internet Explorer ab Version 4.0 interpretiert. Leider ist das Thema "Dynamic HTML" bei diesen beiden Browser-Versionen jedoch zu einem Schauplatz im Browser-Krieg verkommen. Denn die Realisierungen sind in beiden Browsern grundverschieden. Vieles muss für das 4er-Level der beiden Browser getrennt kodiert werden (mit doppeltem Kenntnisaufwand), sofern man für beide Browser schreiben will. Vieles funktioniert überhaupt nur mit dem einen oder mit dem anderen Browser. Vor allem kann sich das "echte" dynamische HTML (beliebiger Zugriff auf alle HTML-Elemente einer Web-Seite), wie es der Internet Explorer ab Version 4.0 bereits beherrscht, auf dem 4er-Level der Browser noch nicht richtig durchsetzen, da dort stets auf das wesentlich primitivere, layer-orientierte Modell von Netscape Rücksicht genommen werden muss.

Mittlerweile zeichnet sich jedoch ein einheitlicher Standard ab. Zu verdanken ist dieser Standard dem W3-Konsortium, das auch HTML und CSS normiert. Für den Script-Sprachen-Zugriff auf Elemente einer Web-Seite hat das W3-Konsortium das Document Object Model (DOM) entworfen. Die neueren Versionen der führenden Browser setzen das DOM - wenn auch noch mit deutlichen Schwächen im Detail - in JavaScript um, sodass es in absehbarer Zeit wohl einfacher werden wird, Dynamisches HTML zu programmieren.

In der vorliegenden Dokumentation werden zunächst alle drei Modelle (Microsoft 4er-Level, Netscape 4er-Level und DOM) getrennt vorgestellt ( Kapitel Die verschiedenen DHTML-Modelle). Denn nur wenn Sie die Konzepte klar unterscheiden können, sind Sie in der Lage, Dynamisches HTML so zu schreiben, dass es mit verschiedenen Browsern funktioniert. Im zweiten Schritt können Sie dann sehen, wie sich Dynamisches HTML browser-übergreifend realisieren lässt ( Kapitel Lösungen für die Praxis).

nach oben
weiter | Seite Das Document Object Model (DOM)
zurück | Seite Verweisliste als Auswahlliste
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML

© 2007 Seite Impressum


SELFHTML: JavaScript / Die verschiedenen DHTML-Modelle

SELFHTML

Die verschiedenen DHTML-Modelle
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML, Kapitel Stylesheets, Kapitel JavaScript und der Abschnitt Seite Allgemeines zu Dynamischem HTML.
Dieser Abschnitt behandelt den Ansatz des Document Object Model (DOM) sowie die beiden älteren Modelle für Dynamisches HTML, die Microsoft und Netscape in den 4er-Versionen ihrer Browser verfolgen. Die Modelle sollten Sie kennen und auseinanderhalten können, wenn Sie Dynamisches HTML programmieren.
Der Abschnitt besteht aus folgenden Seiten:

Seite Das Document Object Model (DOM)
Seite Das ältere DHTML-Modell von Microsoft
Seite Das ältere DHTML-Modell von Netscape
Seite Datenanbindung (nur Microsoft)
Seite Dynamische Filter (nur Microsoft)

nach oben

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / DHTML-Modelle / Das Document Object Model (DOM)

SELFHTML

Das Document Object Model (DOM)
Informationsseite

nach unten Allgemeines zum DOM
nach unten Elementinhalte dynamisch ändern
nach unten HTML-Attribute dynamisch ändern
nach unten CSS-Eigenschaften dynamisch ändern
nach unten Neue Knoten erzeugen und in Baumstruktur einhängen
nach unten Event-Handling beim DOM
nach unten

Allgemeines zum DOM

Das Document Object Model (DOM) ist eine vom W3-Konsortium verabschiedete Norm, die zunächst einmal den Programmiersprachen-Zugriff auf beliebige Elemente eines Auszeichnungssprachen-Dokuments beschreibt. Das DOM ist also weder selber eine eigene Programmiersprache, noch ist es auf HTML beschränkt. Es definiert lediglich Objekte, Eigenschaften und Methoden, die eine Programmiersprache umsetzen sollte, wenn sie sich DOM-fähig bezeichnen will. Anwendbar sollen diese Objekte, Eigenschaften und Methoden auf alle Dokumente sein, die in einer Kapitel XML-gerechten Auszeichnungssprache geschrieben sind. Das W3-Konsortium betont ausdrücklich, dass das DOM nicht einfach nur eine Norm für "Dynamic HTML" sein soll. Das DOM ist auch nicht auf die Client-Seite, also etwa den Web-Browser beschränkt. Ebensogut lässt es sich in serverseitigen Programmen, z.B. in Kapitel CGI-Scripten einsetzen, um Dokumente dynamisch zu erzeugen.

Wie auch immer - das DOM ist die willkommene Lösung auch für das, was hier unter dynamischem HTML verstanden wird, also das nachträgliche dynamische Verändern von Inhalten einer im Browser-Fenster angezeigten Web-Seite. 1998 erstmals als offizielle W3C-Empfehlung herausgegeben, wurde es im Internet Explorer 5.0 und in dem von der Mozilla-Entwicklergemeinde völlig neu programmierten Netscape-Browser, den Netscape selber unter der Version 6.0 anbot, implementiert (JavaScript-Version 1.5). Die Implementierung ist in den heutigen Browsern noch nicht vollständig. Immer wieder wird man als Programmierer auf rätselhafte Verhaltensweisen im einen oder anderen Browser stoßen. Dennoch ist die Richtung damit vorgegeben, wie Dynamisches HTML in Zukunft programmiert werden wird.

Eine Auszeichnungssprache wie HTML oder auch jede andere, XML-basierte Sprache ist als hierarchische Seite Baumstruktur abbildbar. Die einzelnen Bestandteile einer solchen Baumstruktur werden als Knoten bezeichnet. Das zentrale Objekt des DOM ist deshalb das Objekt Seite node (node = Knoten). Es gibt verschiedene Knotentypen. Innerhalb eines gewöhnlichen HTML-Dokuments gibt es auf jeden Fall drei wichtige Knotentypen, die Sie unterscheiden müssen: Elementknoten, Attributknoten und Textknoten.

Betrachten Sie zum Verständnis das folgende einfache HTML-Konstrukt:
<h1 align="center">Hallo Welt</h1>
In diesem Konstrukt gibt es einen Elementknoten, nämlich den Elementknoten des h1-Elements. Ferner gibt es einen Attributknoten, nämlich den des align-Attributs. Und schließlich gibt es so genannte "Zeichendaten", die an zwei Stellen vorkommen: nämlich einmal als Inhalt des h1-Elements, und einmal bei der Wertzuweisung an das align-Attribut. Diese Zeichendaten stellen selbst Knoten dar, nämlich Textknoten.

Ein weiteres Beispiel-Konstrukt soll das Verständnis vertiefen:
<h1 align="center">Hallo <i>Welt</i></h1>
In diesem Beispiel ist die Kursiv-Auszeichnung um das Wort Welt hinzugekommen. Wichtig ist dabei nun zu verstehen, wie die Knotenhierarchie aussieht:
Das h1-Element ist in diesem kleinen Strukturbaum-Ausschnitt der Ausgangsknoten. Dieser Knoten hat nach den Regeln des DOM zwei Kindknoten und einen assoziierten Knoten: die Kindknoten sind zum einen der Textknoten mit dem Wort Hallo und dem Leerzeichen dahinter, sowie der Elementknoten des i-Elements. Das align-Attribut im einleitenden <h1>-Tag ist dagegen kein Kindknoten, sondern ein assoziierter Knoten. Der Attributknoten hat jedoch selbst wiederum einen Kindknoten, nämlich den zugewiesenen Wert (center). Auch der Elementknoten des i-Elements hat wieder einen Kindknoten, nämlich den Textknoten seines Zeicheninhalts, also das Wort Welt.

Die Baumstruktur einer komplexen Web-Seite kann, wie sich aus diesen einfachen Beispielen erschließt, sehr umfangreich und tief verschachtelt sein. In einer Script-Sprache muss es aber möglich sein, möglichst schnell und effizient auf einzelne Knoten zugreifen zu können. Im DOM gibt es daher drei wichtige Methoden des Seite document-Objekts, um zumindest auf jeden beliebigen Elementknoten direkt zugreifen zu können:
Seite getElementById() kann auf Elemente zugreifen, die ein dokumentweit eindeutiges id-Attribut enthalten, z.B.
<p id="derAbsatz">hier steht der Text</p>
Seite getElementsByName() kann auf Elemente zugreifen, die einen Namen besitzen (er muss nicht unbedingt eindeutig sein), z.B.
<input name="Eingabefeld" type="text" size="40">
Seite getElementsByTagName() kann auf alle Elemente zugreifen in der Form: "liefere mir das 27. td-Element im Dokument".

Ausgehend von einem ermittelten Elementknoten lässt sich dann schnell auf dessen Attribute und Inhalt zugreifen. Auch dafür stellt das DOM Eigenschaften und Methoden bereit. Dabei gibt es jedoch bei HTML-basierten Web-Seiten zwei Varianten. Einmal können Sie die Eigenschaften und Methoden des Seite node-Objekts dazu verwenden, um auf Kindknoten und assoziierte Knoten eines Elements zuzugreifen. Zum anderen können Sie aber auch die Seite HTML-Elementobjekte benutzen. Vor allem für den Zugriff auf einzelne Attribute eines Elements sind die HTML-Elementobjekte gut geeignet.

Dynamisches HTML kann aber auch darin bestehen, neue Elemente mit Inhalten und Formatierungen zur Anzeigezeit einer Web-Seite neu zu erzeugen. Für diesen Zweck hält das DOM ebenfalls Methoden bereit.

In der Version 1.0 des DOM wurde nur der Zugriff auf Knoten geregelt. Der Zugriff auf zugewiesene Style-Eigenschaften und von Event-Handling ist dort noch ausgespart. In der DOM-Version 2.0 vom November 2000 sind jedoch auch diese für dynamische Web-Seiten wichtigen Gebiete behandelt. Es ist deshalb auf jeden Fall empfehlenswert, bei neu zu erstellenden dynamischen Web-Seiten von den im DOM geregelten Techniken auszugehen. Die älteren Modelle von Seite Microsoft und Seite Netscape sollten derzeit noch aus Gründen der Rückwärtskompatibilität eingesetzt werden, auf die Dauer jedoch langsam aus der Welt verschwinden, damit endlich ein einheitlicher Sprachenstandard das Entwickeln dynamischer Web-Seiten erleichtert.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Elementinhalte dynamisch ändern

Es gibt viele sinnvolle Anwendungsfälle zum dynamischen Ändern von zunächst angezeigten HTML-Elementen. Das folgende Beispiel zeigt einen davon. In dem Beispiel wird eine nummerierte Liste von Großstädten zunächst alphabetisch sortiert ausgegeben. Unterhalb der Liste kann der Anwender jedoch mit Hilfe zweier Formular-Buttons zwischen alphabetischer Sortierung oder geographischer Sortierung wechseln.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var geoArray = new Array(6, 7, 0, 1, 4, 3, 8, 9, 2, 5, 11, 12, 10);
var Art = "ABC";

function ABC () {
  if (Art == "ABC")
    return;
  Art = "ABC";
  var Staedte = new Array();
  for (var i = 0; i < document.getElementsByTagName("li").length; i++)
    Staedte[Staedte.length] = document.getElementsByTagName("li")[i].firstChild.nodeValue;
  Staedte.sort();
  for (i = 0; i < document.getElementsByTagName("li").length; i++)
    document.getElementsByTagName("li")[i].firstChild.nodeValue = Staedte[i];
  document.getElementById("Art").firstChild.nodeValue = "alphabetisch von A bis Z";
}

function GEO () {
  if (Art == "GEO")
    return;
  Art = "GEO";
  var Staedte = new Array();
  for (var i = 0; i < document.getElementsByTagName("li").length; i++)
    Staedte[Staedte.length] = document.getElementsByTagName("li")[i].firstChild.nodeValue;
  for (i = 0; i < document.getElementsByTagName("li").length; i++)
    document.getElementsByTagName("li")[i].firstChild.nodeValue = Staedte[geoArray[i]];
  document.getElementById("Art").firstChild.nodeValue = "geographisch von Nord nach Süd";
}
</script>
</head><body>
<h1>Große Städte <span id="Art">alphabetisch von A bis Z</span></h1>
<ol>
<li>Berlin</li>
<li>Dortmund</li>
<li>Dresden</li>
<li>Düsseldorf</li>
<li>Essen</li>
<li>Frankfurt</li>
<li>Hamburg</li>
<li>Hannover</li>
<li>Köln</li>
<li>Leipzig</li>
<li>München</li>
<li>Nürnberg</li>
<li>Stuttgart</li>
</ol>
<form name="Formular" action="">
<input type="button" name="abc" value="alphabetisch" onclick="ABC()">
<input type="button" name="geo" value="geographisch" onclick="GEO()">
</form>
</body></html>

Erläuterung:

Im Beispiel ist die nummerierte Liste zunächst mit den Städtenamen in alphabetischer Sortierfolge notiert. In dem Formular unterhalb der Liste sind zwei Klick-Buttons notiert. Der eine ruft die Funktion ABC() auf, der andere die Funktion GEO(). Ein Klick auf ABC() bringt natürlich nichts, da die Liste ohnehin alphabetisch sortiert ist. Also empfiehlt sich zunächst der Klick auf den Button mit der Aufschrift geographisch. Die Funktion GEO(), die er aufruft, prüft zunächst über die Variable Art, ob die Liste bereits geographisch sortiert ist. Wenn dies der Fall ist, wird die Funktion vorzeitig mit Seite return ohne Rückgabewert beendet. Andernfalls erfolgt die Sortierung. Dazu wird mit zuerst var Staedte = new Array(); ein neuer, leerer Seite Array definiert. Das Vorhaben ist, diesen Array mit den Städtenamen aus der Liste zu füllen. Dazu greift die Funktion der Reihe nach in einer for-Schleife alle Elemente vom Typ li ab, die in dem Dokument vorkommen.

Der Zugriff erfolgt mit document.getElementsByTagName("li").

Über document.getElementsByTagName("li").length kann die Anzahl der li-Elemente im Dokument ermittelt werden. Diese Information benutzt die Funktion als Abbruchbedingung für die for-Schleife. Innerhalb der Schleife wird dem Array der Inhalt des jeweils aktuellen li-Elements hinzugefügt.

Mit document.getElementsByTagName("li")[i].firstChild.nodeValue wird dabei auf den Inhalt des jeweiligen li-Elements zugegriffen. Aus DOM-Sicht ist document.getElementsByTagName("li")[i] ein Knoten, nämlich der i.te li-Elementknoten im Dokument. firstChild ist eine Eigenschaft des Seite node-Objekts. Über diese Eigenschaft können Sie auf den ersten Kindknoten eines Knotens zugreifen. Der erste Kindknoten aller li-Elemente im Dokument ist deren Textinhalt, also jeweils ein Städtenamen. Die Eigenschaft firstChild liefert aber noch nicht den Inhalt des Elements, sondern nur das Objekt des Inhalts. Um tatsächlich an den Inhalt heranzukommen, also an den konkreten Städtenamen, muss eine weitere Eigenschaft des node-Objekts bemüht werden, nämlich die Eigenschaft nodeValue. Die Kombination firstChild.nodeValue können Sie sich ruhig merken. Diese Kombination werden Sie häufig verwenden, um an den Inhalt eines Elements zu kommen.

Nachdem der Array mit den Städtenamen gefüllt ist, macht die Funktion GEO() einfach das Umgekehrte und schreibt den Array wieder zurück in die Liste - ebenfalls in einer for-Schleife.
Der Ausdruck document.getElementsByTagName("li")[i].firstChild.nodeValue steht diesmal links von der Zuweisung. Dadurch wird dem Inhalt des Listenelements dynamisch ein neuer Wert zugewiesen. Im Beispiel ist das der etwas vertrackst aussehende Wert Staedte[geoArray[i]]. Die Städte sollen ja geographisch ausgegeben werden. Nun gibt es keinen Algorithmus, der die Geographie kennt. Ganz oben im Script-Bereich ist daher ein Array namens geoArray notiert. Die Zahlen, mit denen er initialisiert wird, sind einfach die Indexnummern der alphabetisch sortierten Städte. So hat geoArray[0] beispielsweise den Wert 6. Dank dieser Information weiß die Funktion GEO(), dass die nördlichste der Städte diejenige ist, die in der alphabetischen Sortierung die Indexnummer 6 hat (Hamburg). Mit Staedte[geoArray[i]] benutzt die Funktion als aktuellen Index für die Stadt, die in die Liste geschrieben werden soll, also einfach den Zugriff auf geoArray.

Die Funktion ABC() geht ganz genauso vor wie die Funktion GEO(). Sie unterscheidet sich nur dadurch von letzterer, dass sie nach dem Einlesen des Staedte-Arrays die Objektmethode Seite sort() auf den Array anwendet, um die Einträge zu sortieren. Dann schreibt sie den sortierten Array einfach zurück in die nummerierte Liste.

Ein weiteres Element wird von beiden Funktionen ebenfalls noch geändert: nämlich das span-Element innerhalb der Überschrift. Da für dieses Element im HTML-Code mit id="Art" ein ID-Wert notiert ist, lässt sich mit document.getElementById("Art") bequem darauf zugreifen. Mit der üblichen Syntax firstChild.nodeValue wird der Text des Elements angesprochen und dynamisch geändert.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 HTML-Attribute dynamisch ändern

Durch das dynamische Hinzufügen, Ändern oder Löschen von HTML-Attributen lassen sich interessante Effekte, aber auch nützliche Zwecke erreichen. Das folgende Beispiel zeigt, wie Sie Verweise dynamisch ändern können.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var TopLinks = new Array("http://www.spiegel.de/",
                         "http://www.heise.de/newsticker/",
                         "http://www.encarta.msn.de/",
                         "http://paperball.fireball.de/",
                         "http://kochbuch.unix-ag.uni-kl.de/");
var aktuellerLink = 0;

function TopLink () {
  document.getElementsByName("Ziel")[0].href = TopLinks[aktuellerLink];
  document.getElementsByName("Ziel")[0].firstChild.nodeValue = TopLinks[aktuellerLink];
  aktuellerLink += 1;
  if (aktuellerLink >= TopLinks.length)
    aktuellerLink = 0;
}

function TopLinksFenster (Fenster) {
  document.getElementsByName("Ziel")[0].target = Fenster;
}
</script>
</head><body>
<p><a name="Ziel" href="#Ziel">Top-Link?</a><br>
<a href="javascript:TopLink()">Nächster Top-Link!</a><br>
TopLinks: <a href="javascript:TopLinksFenster('_blank')">in neues Fenster laden!</a> oder
<a href="javascript:TopLinksFenster('_self')">ins aktuelle Fenster laden!</a></p>
</body></html>

Erläuterung:

Das Beispiel enthält im sichtbaren Bereich einen "Top-Link", der zunächst auf sich selbst verweist (name="Ziel" href="#Ziel"). Unterhalb davon sind drei weitere Verweise notiert. Der erste verspricht den jeweils nächsten Top-Link zu präsentieren, und die beiden darunter erlauben es dem Anwender festzulegen, wie er die Links öffnen will - ob im gleichen oder in einem neuen Fenster. Alle diese drei Verweise rufen JavaScript-Funktionen auf, die im Dateikopf notiert sind. Der Verweis, der den nächsten Top-Link verspricht, ruft die Funktion TopLink() auf.

Diese Funktion greift mit document.getElementsByName("Ziel")[0] auf das erste Element im Dokument zu, bei dem als Attribut name="Ziel" notiert ist. Das ist im Beispiel bei dem Verweis der Fall, der die TopLinks anzeigen soll und aber bislang auf sich selbst verweist. Geändert werden sollen bei diesem Verweis sowohl sein href-Attribut als auch sein sichtbarer Verweistext. Der Zugriff auf das href-Attribut ist ganz einfach, weil nach der DOM-Syntax der Seite HTML-Elementobjekte jedes denkbare Attribut eines HTML-Elements einfach eine Eigenschaft des entsprechenden HTML-Objekts darstellt. Um auf HTML-Attribute zuzugreifen, brauchen Sie also nur auf das gewünschte Element zuzugreifen und dahinter, durch Punkt getrennt, den Attributnamen als Eigenschaft notieren. Beachten Sie dabei aber die besondere Groß-/Kleinschreibung bei verschiedenen Attributen wie bgColor, vSpace oder cellPadding.
Mit document.getElementsByName("Ziel")[0].href wird im Beispiel also direkt auf den Wert des href-Attributs des gewünschten Verweises zugegriffen. Durch Zuweisung eines Wertes wird das Attribut dynamisch geändert. Im Beispiel wird jeweils ein neuer Wert aus dem weiter oben im Script notierten Seite Array namens TopLinks zugewiesen. Als Indexzähler wird die ebenfalls zuvor schon definierte Variable aktuellerLink verwendet. Diese wird anschließend um 1 erhöht, damit beim nächsten Aufruf der Funktion der nächste Top-Link aus dem Array gesetzt wird. Wenn der Wert von aktuellerLink zu hoch wird, um noch einen Eintrag in dem Array zu finden, wird die Variable wieder auf 0 gesetzt, und beim nächsten Klick wird wieder der erste Eintrag aus dem Array serviert.
Der Zugriff auf den Verweistext erfolgt wieder über firstChild.value.

Die Verweise, die regeln, in welchem Fenster die Top-Links geöffnet werden sollen, rufen jeweils die Funktion TopLinksFenster() auf und übergeben ihr als Parameter den gewünschten Zielfensternamen. Übergeben werden die reservierten Fensternamen _self (Öffnen im eigenen Fenster) bzw. _blank (Öffnen in neuem Fenster). Die Funktion TopLinksFenster() benutzt wieder den bequemen Weg über die HTML-Elementobjekte, um direkt auf die target-Eigenschaft des a-Elements zuzugreifen und das entsprechende Attribut zu setzen. Es ist also kein Problem, Attribute zu setzen, die im HTML-Quelltext eines Elements nicht notiert sind.

Falls Sie mal ein Attribut löschen wollen, haben Sie zwei Möglichkeiten: entweder Sie setzen seinen Wert auf "" (leere Zeichenkette), oder - und das ist sauberer - Sie arbeiten mit der Methode Seite removeAttribute() des node-Objekts.

DOM 2.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 CSS-Eigenschaften dynamisch ändern

Seit der DOM-Version 2.0 wird auch geregelt, wie auf Stylesheet-Angaben zugegriffen wird. Dabei hat man sich weitgehend an das seinerzeit von Microsoft eingeführte Seite style-Objekt angelehnt.
Das folgende Beispiel zeigt, wie Sie mit Hilfe der DOM-Technik typisches, klassisches dynamisches HTML mit Bewegung positionierter Elemente schreiben. Dazu dient die Möglichkeit, Elemente mit Hilfe von CSS-Eigenschaften absolut zu positionieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var rp, bp, ich;
var rpGeschw = 10, bpGeschw = 20;
var rpGrad = 0, bpGrad = 0;
var rpX = 170, rpY = 170, bpX = 170, bpY = 170;
var rpRadius = 150, bpRadius = 150;

function Init () {
  rp = document.getElementById("roterPunkt");
  bp = document.getElementById("blauerPunkt");
  ich = document.getElementById("ich");
  rp.style.position = "absolute";
  rp.style.top = 20 + "px";
  rp.style.left = 320 + "px";
  bp.style.position = "absolute";
  bp.style.top = 320 + "px";
  bp.style.left = 320 + "px";
  ich.style.position = "absolute";
  ich.style.top = 110 + "px";
  ich.style.left = 90 + "px";
  ich.style.fontFamily = "Courier New,Courier";
  ich.style.fontSize = "96px";
  ich.style.fontWeight = "bold";
  ich.style.color = "#009900";
  rpKreis();
  bpKreis();
}

function rpKreis () {
  rpGrad += rpGeschw / 1000;
  if (rpGrad > 360)
    rpGrad = 0;
  rp.style.top = Math.round(rpY + (rpRadius * Math.cos(rpGrad))) + "px";
  rp.style.left = Math.round(rpX + (rpRadius * Math.sin(rpGrad))) + "px";
  window.setTimeout("rpKreis()", 100 / rpGeschw);
}

function bpKreis () {
  bpGrad += bpGeschw / 1000;
  if (bpGrad > 360)
    bpGrad = 0;
  bp.style.top = Math.round(bpY + (bpRadius * Math.cos(bpGrad))) + "px";
  bp.style.left = Math.round(bpX + (bpRadius * Math.sin(bpGrad))) + "px";
  window.setTimeout("bpKreis()", 100 / bpGeschw);
}
</script>
</head><body onload="Init()">

<div id="roterPunkt"><img src="ichkreis1.gif" width="20" height="20" border="0" alt="roter Punkt"></div>
<div id="blauerPunkt"><img src="ichkreis2.gif" width="20" height="20" border="0" alt="blauer Punkt"></div>
<div id="ich">ICH</div>

</body></html>

Erläuterung:

Innerhalb des body-Bereichs werden im Beispiel einfach nur drei div-Bereiche ohne weitere Formatierungen notiert. Die ersten beiden enthalten jeweils eine kleine Grafik - ichkreis1.gif ist ein roter Punkt, ichkreis2.gif ein blauer Punkt. Beide Grafiken haben einen transparenten Hintergrund, was wichtig ist, da sich die Punkte im späteren Verlauf des Geschehens öfter überlagern werden.

Im einleitenden <body>-Tag ist der Seite Event-Handler onload notiert. Dieser tritt in Aktion, sobald die Datei vollständig im Browser geladen ist. Dann wird die Funktion Init() aufgerufen, die im Dateikopf notiert ist. Diese Funktion speichert zunächst einmal Referenzen auf die drei div-Elemente in den drei Variablen rp, bp und ich, um die darauffolgenden Zugriffe auf diese Elemente zu verkürzen. Da alle drei div-Bereiche ein id-Attribut haben, ist der Zugriff auf den entsprechenden Elementknoten mit getElementById("roterPunkt") usw. möglich. Anschließend lässt sich mit rp usw. genauso arbeiten, als wenn man jedesmal wieder document.getElementById("roterPunkt") notieren würde.

Über die Variablen rp, bp und ich ist dann auch das style-Objekt ansprechbar. Die Funktion Init() stattet die drei div-Bereiche erst einmal mit anfänglichen CSS-Eigenschaften aus. Alle drei Bereiche werden mit style.position = "absolute" absolut positioniert. Die linke obere Ecke jedes Bereichs wird mit style.left und style.top bestimmt. Der Inhalt des ich-Bereichs, also das Wort ICH, wird groß und auffällig formatiert.

Am Ende ruft die Funktion Init() die beiden anderen Funktionen rpKreis() und bpKreis() auf. Jede dieser beiden Funktionen kontrolliert die Kreisbewegung jeweils eines der beiden Punkte, indem sie letztlich die linke obere Ecke des div-Bereichs, der die jeweilige Grafik enthält, neu berechnet. Dabei kommen die Kreisfunktionen für Sinus ( Seite Math.sin()) und Cosinus ( Seite Math.cos()) zum Einsatz. Am Ende ruft jede der beiden Funktionen sich selber rekursiv mit Seite window.setTimeout() wieder auf, um die nächste Position des div-Bereichs mit der Grafik zu setzen. Die Variablen wie bpGrad, bpGeschw usw., mit denen diese Funktionen arbeiten, wurden zuvor im globalen Bereich des Scripts initialisiert.

DOM 1.0 JavaScript 1.5 Netscape 6.0 MS IE 5.5 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Neue Knoten erzeugen und in Baumstruktur einhängen

Dynamisches HTML nach DOM bedeutet nicht nur, auf bereits in HTML vorhandene Elemente zuzugreifen, sondern auch neue zu erzeugen und in den Strukturbaum einzuhängen. Wie das funktioniert, zeigt das folgende Beispiel. Es stellt einen primitiven HTML-Editor dar.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
body { color:#000000; background-color:#FFFFFF; }
#User { background-color:#FFFFC0; padding:10px; }
form { background-color:#EEEEEE; padding:10px; }
h1 { font-family:Arial,sans-serif; font-size:2.2em; font-weight:normal; border-bottom:2px solid red; }
h2 { font-family:Arial,sans-serif; font-size:1.8em; font-weight:normal; border-bottom:1px solid red; }
h3 { font-family:Arial,sans-serif; font-size:1.1em; font-weight:bold; }
p { font-family:Arial,sans-serif; font-size:1em; }
</style>
<script type="text/javascript">
function Hinzufuegen () {
  var Typ = document.Formular.Elementtyp.options[document.Formular.Elementtyp.selectedIndex].value;
  var Elementknoten = document.createElement(Typ);
  if (Typ != "hr") {
    var Textknoten = document.createTextNode(document.Formular.Elementinhalt.value);
    Elementknoten.appendChild(Textknoten);
  }
  document.getElementById("User").appendChild(Elementknoten);
}
</script>
</head><body>

<form name="Formular" action="">
<select name="Elementtyp" size="1">
<option value="h1">Überschrift 1</option>
<option value="h2">Überschrift 2</option>
<option value="h3">Überschrift 3</option>
<option value="p">Textabsatz</option>
<option value="hr">Trennlinie</option>
</select>
<input type="text" name="Elementinhalt" size="50">
<input type="button" value="Hinzufügen" onclick="Hinzufuegen()">
</form>

<div id="User">
</div>

</body></html>

Erläuterung:

Das Beispiel enthält im sichtbaren HTML-Bereich ein Formular mit einer Auswahlliste, einem Eingabefeld und einem Klick-Button. Unterhalb ist noch ein div-Bereich notiert, der jedoch noch keinen konkreten Inhalt hat. In der Auswahlliste des Formulars kann der Anwender einen HTML-Elementtyp auswählen - in den value-Attributen der option-Elemente sind die tatsächlichen HTML-Elementnamen der jeweiligen Auswahl gespeichert. Im Eingabefeld des Formulars kann der Anwender den Textinhalt für das ausgewählte Element eingeben. Wenn er dann auf den Button klickt, wird die Funktion Hinzufuegen() aufgerufen, die im Dateikopf in einem JavaScript-Bereich notiert ist.

Dort wird erst einmal der lange, umständliche Ausdruck document.Formular.Elementtyp.options[document.Formular.Elementtyp.selectedIndex].value in der Variablen Typ gespeichert. Der lange Ausdruck bzw. die Variable speichert den vom Anwender im Formular ausgewählten HTML-Elementtyp, also z.B. "h1" oder "p".

Mit document.createElement(Typ) wird dann ein leeres, neues Element vom Typ Typ erzeugt, also je nach Wert der Variablen Typ z.B. ein h1-Element oder ein p-Element. Damit wird das Element aber noch nicht angezeigt. document.createElement() erzeugt lediglich den Elementknoten, hängt ihn aber noch nicht in den Strukturbaum des Dokuments ein. Im Folgenden muss das Script zwischen Elementen unterscheiden, die einen Textinhalt haben, und solchen, die keinen haben. Das hr-Element für Trennlinien, das der Anwender ebenfalls auswählen kann, kann keinen Textinhalt haben. Alle anderen auswählbaren Elemente dagegen können Textinhalt haben. Durch eine if-Anweisung wird daher abgefragt, ob die Variable Typ den Wert "hr" besitzt. Nur wenn dies nicht der Fall ist, wird der Textknoten mit der Methode document.createTextNode() erzeugt. Als Parameter erhält diese Methode den Text, den der Anwender ins Eingabefeld des Formulars eingegeben hat. Danach wird der Textknoten an den erzeugten Elementknoten gehängt, sodass der Text letztendlich auch sichtbar ist. In allen Fällen wird schließlich das neu erzeugte und in der Variablen Elementknoten gespeicherte Element in den Dokumentbaum eingehängt.

Für alle "Einhäng"-Vorgänge wird die Methode appendChild() des Seite node-Objekts verwendet. Anwendbar ist die Methode auf ein Knotenobjekt, das Kindknoten haben darf. Also beispielsweise Elementknoten. Als Parameter erwartet die Methode einen Knoten, der als Kindknoten eingehängt werden soll.
Wenn im Beispiel also steht: Elementknoten.appendChild(Textknoten);
Dann ist Elementknoten eine Variable, in der zuvor durch createElement() ein Elementobjekt erzeugt wurde, und Textknoten ist eine Variable, die zuvor durch Aufruf von createTextNode() einen Textknoten gespeichert hat.
Mit der Anweisung document.getElementById("User").appendChild(Elementknoten) wird auf den zunächst leeren div-Bereich im Dokument zugegriffen. Diesem Element wird der neu erzeugte Elementknoten hinzugefügt.

DOM 2.0 JavaScript 1.5 Netscape 6.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Event-Handling beim DOM

Die Normierung des Event-Handling im DOM war zum Redaktionszeitpunkt dieses Dokuments noch nicht abgeschlossen - so fehlte beispielsweise noch die Implementierung von Tastaturereignissen. Der Internet Explorer interpretiert auch noch keine Events nach DOM-Syntax, Netscape 6 dagegen schon. Das folgende Beispiel zeigt das Prinzip, nach dem Event-Handling nach DOM-Syntax funktioniert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Ausgeben(Text) {
  var LogEintrag = document.createElement("li");
  var neuerText = document.createTextNode(Text);
  LogEintrag.appendChild(neuerText);
  document.getElementById("Log").appendChild(LogEintrag);
}

function handleEingabefeldClick (Event) {
  var Text = "Sie haben in das Eingabefeld geklickt. " +
    "Event-Typ = " + Event.type + ", " +
    "Event-Target-Elementname = " + Event.target.nodeName + ".";
  Ausgeben(Text);
}

function handleBereichMove (Event) {
  var Text = "Sie haben die Maus im Bereich bewegt. " +
    "X-Position = " + Event.clientX + ", " +
    "Y-Position = " + Event.clientY + ".";
  Ausgeben(Text);
}

function handleBereichClick (Event) {
  var Text = "Sie haben in den Bereich geklickt. " +
    "X-Position = " + Event.clientX + ", " +
    "Y-Position = " + Event.clientY + ".";
  Ausgeben(Text);
}

function Init () {
  document.getElementById("Eingabe").addEventListener("click", handleEingabefeldClick, false);
  document.getElementById("Bereich").addEventListener("mousemove", handleBereichMove, false);
  document.getElementById("Bereich").addEventListener("click", handleBereichClick, false);
}
</script>
<style type="text/css">
#Formular { background-color:#EEEEEE; padding:10px }
#Bereich { background-color:#FF0000; color:#FFFFFF; font-weight:bold; width:100px; }
#Log { font-family:Arial,sans-serif; font-size:80%; }
</style>
</head><body onload="Init()">

<form name="Formular" id="Formular" action="">
<input type="text" name="Eingabe" id="Eingabe" size="50">
</form>

<div id="Bereich">Ein Bereich</div>

<ol id="Log">
<li>Ereignisliste</li>
</ol>

</body></html>

Erläuterung:

Im sichtbaren Bereich der HTML-Datei ist ein Formular mit einem Eingabefeld notiert, ferner ein div-Bereich, und schließlich eine leere, nummerierte Liste. Im einleitenden <body>-Tag ist der Event-Handler onload notiert, der jedoch noch nichts mit Event-Handling nach DOM-Syntax zu tun hat. Dort wird einfach erst mal die Funktion Init() aufgerufen, die im Dateikopf notiert ist.

Innerhalb der Funktion Init() geht es jedoch in Sachen DOM-Event-Handling zur Sache. Event-Handling besteht beim DOM zunächst einmal darin, für einen beliebigen Knoten im Dokument eine Ereignisüberwachung zu registrieren. Dazu gibt es die Methode addEventListener(). Mit dem Teil davor, im Beispiel etwa document.getElementById("Eingabe"), wird derjenige Knoten im Dokument angesprochen, für den eine Ereignisüberwachung registriert werden soll. Im Beispiel der Funktion Init() werden insgesamt drei Ereignisüberwachungen angestoßen: eine für das Eingabefeld des Formulars, und zwei für den div-Bereich.

Die Methode addEventListener() erwartet drei Parameter. Der erste Parameter gibt an, welcher Ereignistyp überwacht werden soll. Bei Mausereignissen sind das weitgehend die aus dem JavaScript-Objekt Seite event bekannten Ereignistypen wie click, mouseover, mousedown, mouseup, mousemove. Dazu kommen im DOM Event-Typen wie DOMFocusIn (Knoten erhält den Fokus), DOMFocusOut (Knoten verliert den Fokus), DOMActivate (Knoten wird durch Mausklick oder Tastendruck aktiviert), sowie anwenderunabhängige Ereignisse wie DOMSubtreeModified (Strukturbaum geändert), DOMNodeInserted (Knoten in Strukturbaum eingefügt) oder DOMNodeRemoved (Knoten aus Strukturbaum entfernt). Der Name des gewünschten Ereignistyps muss bei der Parameterangabe in Anführungszeichen stehen.

Der zweite Parameter, den addEventListener() erwartet, ist der Name einer Funktion, die beim Eintreten des Events aufgerufen werden soll. Der Name der Funktion wird ohne Anführungszeichen angegeben. Die angegebene Funktion bekommt automatisch ein Ereignisobjekt übergeben und kann dann damit anfangen was sie will. Dazu weiter unten mehr.

Die Ereignisse werden beim DOM-Event-Handling in drei Phasen verarbeitet: 1. die Capture-Phase (engl. einfangen), 2. die Target-Phase (engl. Ziel) und 3. die Bubbling-Phase (engl. aufsteigen). In der Capture-Phase läuft das Ereignis von dem äußersten Element des DOM-Baums (dem html-Element) zu dem Ziel-Element, für das das Ereignis bestimmt ist. Auf diesem Weg werden alle Event-Handler ausgelöst, die für die passierten Elemente für die Capture-Phase registriert sind. In der Target-Phase werden alle Event-Handler ausgelöst, die für das Ziel-Element registriert sind. In der Bubbling-Phase schließlich wandert das Ereignis schließlich vom Ziel-Element über dessen Eltern-Elemente zurück zum äußersten Element. In dieser Phase werden alle Event-Handler ausgelöst, die für die passierten Elemente für die Bubbling-Phase registriert sind. Nicht bei allen Ereignistypen steigen die Ereignisse auf (Bubbling).

Mit dem dritten Parameter von addEventListener() können Sie bestimmen, in welcher Phase ein Event-Handler aktiv wird. Mit true wird die Handler-Funktion in der Capture-Phase aufgerufen, mit false in der Target- oder Bubbling-Phase. In der Regel sollten Sie false wählen. Dieses Verhalten stellt einen Kompromiss zwischen der Seite Vererbung bei Events (Event-Bubbling) bei dem Seite älteren DHTML-Modell von Microsoft und der Funktion Seite captureEvents() bei dem Seite älteren DHTML-Modell von Netscape dar.

Für jedes Ereignis, das Sie überwachen wollen, benötigen Sie eine Funktion, die auf das Ereignis reagiert - die sogenannte Handler-Funktion. Es ist die Funktion mit dem Namen, der bei addEventListener() als zweiter Parameter angegeben wird. Im obigen Beispiel sollen drei Ereignisse überwacht werden. Deshalb gibt es drei ähnliche Funktionen - mit den Namen handleEingabefeldClick(), handleBereichMove() und handleBereichClick(). Alle drei Funktionen bekommen beim automatischen Aufruf, der beim Eintritt des Ereignisses passiert, das Ereignis als Objekt übergeben. Die Funktionen im Beispiel erwarten deshalb einen Parameter Event. Dieses Ereignisobjekt besitzt Eigenschaften, die Informationen zum Ereignis bereitstellen, und Methoden, mit denen sich die Ereignisverarbeitung steuern lässt. Bei Mausereignissen gibt es beispielsweise Eigenschaften wie clientX (Anzahl Pixel vom linken Rand des sichtbaren Knotenbereichs), clientY (Anzahl Pixel vom oberen Rand des sichtbaren Knotenbereichs), screenX (Anzahl Pixel vom linken Bildschirmrand) oder screenY (Anzahl Pixel vom oberen Bildschirmrand).

Im Beispiel stellen die Funktionen, die ein Ereignis überwachen, einfach nur einen Text zusammen und rufen dann die Funktion Ausgeben() mit dem zusammengestellten Text auf. Die Funktion Ausgeben() erzeugt zuerst mit document.createElement("li") ein neues HTML-Element vom Typ li. Dann erzeugt sie mit document.createTextNode(Text) einen neuen Textknoten mit dem übergebenen Text. Schließlich hängt sie den Textknoten mit appendChild() als Kindknoten in den erzeugten li-Elementknoten ein, und diesen in die im Dokument notierte nummerierte Liste. Auf diese Weise füllt sich die nummerierte Liste dynamisch mit jedem Ereignis, das erkannt wurde.

Beachten Sie:

Noch nicht alle Browser, die prinzipiell Ereignisüberwachung nach DOM-Syntax unterstützen, führen Handler-Funktionen, die für die Capture-Phase registriert sind, korrekt aus. Solche Handler-Funktionen werden nur aktiviert, wenn sich das Ziel-Element des Ereignisses unterhalb des Elements befindet, bei dem die Handler-Funktion für die Capture-Phase registriert wurde. Mozilla Firefox und Safari rufen die Funktion irrtümlicherweise trotzdem auf.

Im Beispiel wurde die herkömmliche Methode onload="Init()" verwendet, um die Funktion Init() beim abgeschlossenen Laden der HTML-Datei aufzurufen, um darin die restliche Ereignisüberwachung zu starten. Diese ist theoretisch durch folgende Konstruktion ersetzbar:

document.addEventListener("load", Init, false);

Allerdings passiert im Mozilla Firefox 1.5 kein load-Ereignis am document-Objekt, obwohl dies im DOM-Standard so vorgeschrieben ist. Eine Alternative wäre die Verwendung von window.addEventListener("load", Init, false). Dies wird zwar breiter unterstützt, allerdings liegt das window-Objekt außerhalb des DOM-Standards.

nach oben
weiter | Seite Das ältere DHTML-Modell von Microsoft
zurück | Seite Allgemeines zu Dynamischem HTML
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML Teil von DHTML-Modelle

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / DHTML-Modelle / Das ältere DHTML-Modell von Microsoft

SELFHTML

Das ältere DHTML-Modell von Microsoft
Informationsseite

nach unten Allgemeines zum Microsoft-Modell
nach unten Script-Sprachen: JavaScript, JScript und VBScript
nach unten Das all-Objekt
nach unten Stylesheets und Scripts
nach unten Schreibweise von CSS-Eigenschaften in JavaScript/JScript
nach unten Event-Handler und das Event-Objekt
nach unten Vererbung bei Events (Event-Bubbling)

nach unten

Allgemeines zum Microsoft-Modell

Als der Internet Explorer 4.0 im Jahr 1997 ein völlig neues Konzept mit ganz neuen Möglichkeiten des dynamischen Zugriffs auf eine Web-Seite einführte, waren die meisten Web-Entwickler noch gänzlich in dem klassischen JavaScript-Ansatz von Netscape befangen und begriffen gar nicht so recht die Tragweite des neuen Modells. Das Modell erlaubte nichts Geringeres, als beliebige HTML-Elemente inklusive deren CSS-Eigenschaften zu ändern, auszutauschen, neu zu erzeugen, zu löschen usw. Der Browser reagierte dabei wie eine Textverarbeitungs-Software während der Bearbeitung. Wenn Inhalte dynamisch eingefügt wurden, wurde alles, was dahinter stand, automatisch neu positioniert. Obwohl diese Fähigkeit - eben im Hinblick auf moderne Textverarbeitungs-Software - im Grunde genommen von einer professionellen Software zu erwarten ist, war dem zu jener Zeit nicht so. Der 1997 noch dominante Netscape-Browser war genau dazu nicht in der Lage: eine Seite aufgrund dynamischer Änderungen wirklich neu aufzubauen. Auch die Web-Entwickler begriffen lange Zeit nicht, dass es doch viel einfacher und konsequenter ist, beliebige HTML-Elemente, deren Eigenschaften und Inhalte dynamisch zu ändern, anstatt mit der umständlichen Layer-Technik von Netscape zu hantieren.

Das Microsoft-Modell war also richtungsweisend. Aber es war proprietär, ein firmeneigener Vorstoß in neue Welten ohne Absprache mit einem unabhängigen Normierungs-Gremium. Microsoft benahm sich in jener Zeit in der Tat unglaublich aggressiv und versuchte, die verpennte Zeit der Jahre davor aufzuholen. Immerhin hatte Bill Gates noch ganze zwei Jahre zuvor das Internet als unwichtig und für Microsoft bedeutungslos erklärt. Der Versuch, die "Sahnetorte Internet" mit aggressiver Marketing-Politik alleine aufzufressen, gelang jedoch glücklicherweise nur zum Teil. Zwar eroberte der Internet Explorer Monat um Monat mehr Anteile am Browser-Markt und ist mittlerweile längst der am weitesten verbreitete Browser. Doch Microsofts Versuch, eigene Sprachen, Formate und Programmiertechniken zu etablieren, ist fehlgeschlagen. In diesem Punkt reagierte die Web-Gemeinde empfindlich. Man hatte erkannt, dass Software vor allem dann von sich abhängig macht, wenn sie Dateiformate diktiert.

Das DHTML-Modell von Microsoft war also ein wichtiger Meilenstein auf dem Weg zum heute zu empfehlenden Seite DOM. Das DOM weicht aber insofern von dem Microsoft-Ansatz ab, als es nicht auf HTML fixiert ist, sondern gleich alle XML-kompatiblen Tag-Sprachen abdeckt. Der Microsoft-Ansatz ist aus heutiger Sicht nur noch insofern von Bedeutung, wenn Sie dynamische Web-Seiten erstellen wollen, die auch mit dem Internet Explorer 4.x darstellbar sein sollen. Zwar verschwindet dessen Anteil am Browser-Markt immer weiter gegenüber den neueren Versionen, die seit der 5er-Version DOM-fähig sind, doch Web-Design sollte wann immer es möglich ist auch auf ältere Browser-Versionen Rücksicht nehmen.

MS JScript MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 2.0 Script-Sprachen: JavaScript, JScript und VBScript

Es gibt letztlich keine Vorschriften dafür, welche Script-Sprache für Dynamisches HTML verwendet werden soll. Deshalb herrscht hierbei noch etwas Verwirrung.

Kapitel JavaScript ist jedoch eindeutig die meist verwendete und bekannteste Script-Sprache. Sie wurde durch Netscape eingeführt. Der Internet Explorer interpretiert JavaScript ebenfalls. Dabei hinkt er Netscape jedoch immer etwas hinterher, da Netscape die Lizenzen für JavaScript besitzt und es Microsoft nicht erlaubt ist, den Sprachumfang von JavaScript selbstständig zu erweitern. Mit einem kleinen Kniff hat sich Microsoft aus dieser misslichen Lage befreit: Die Sprache wurde einfach in JScript umbenannt. JScript ist JavaScript plus MS-eigene Spracherweiterungen. JScript enthält etliche Objekte, Methoden und Eigenschaften, die in JavaScript nicht vorkommen. Die meisten dieser Befehle sind für die lokalen Betriebssystemerweiterungen gedacht, die der Internet Explorer 4.x unter MS Windows benötigt. Aber auch das nach unten all-Objekt, das in Netscapes JavaScript nicht vorkommt, gehört dazu. Und dieses Objekt ist ganz entscheidend für Dynamisches HTML im Internet Explorer.

Neben JavaScript und JScript beherrscht der Internet Explorer auch noch VBScript. Diese Sprache ist von Visual Basic (VB) abgeleitet. Sie konnte sich bislang jedoch nicht durchsetzen im WWW. VBScript hat eine andere Syntax als JavaScript und JScript. Die Objekte, Eigenschaften und Methoden sind jedoch im wesentlichen die gleichen. Mit VBScript können Sie also ebenfalls Dynamisches HTML schreiben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Ihr WWW-Browser beherrscht folgende Script-Sprachen:<br>
<script language="JavaScript" type="text/javascript">
document.write("<br>JavaScript");
</script>
<script language="JScript" type="text/jscript">
document.write("<br>JScript");
</script>
<script language="VBScript" type="text/vbscript">
document.write "<br>VBScript"
</script>
</p>
</body></html>

Erläuterung:

Das obige Beispiel ist kein Dynamisches HTML im engeren Sinn. Es soll lediglich demonstrieren, wie Sie unterschiedliche Script-Sprachen einsetzen können, und welche Wirkung dies auf WWW-Browser hat. In dem Beispiel werden drei Script-Bereiche definiert: einer mit JavaScript (<script language="JavaScript" type="text/javascript">), einer mit JScript (<script language="JScript" type="text/jscript">) und einer mit VBScript <script language="VBScript" type="text/vbscript">. Jeder der drei Bereiche schreibt mit Hilfe eines document.write-Befehls (dieser Befehl ist in allen drei Sprachen gleich) eine Zeile in das Dokument. Da ein WWW-Browser nur diejenigen Script-Bereiche ausführt, deren Sprachen er kennt, stehen am Ende genau diejenigen Script-Sprachen auf der Seite, die der benutzte WWW-Browser kennt.

Sie sollten einen Script-Bereich einfach dann mit "JScript" auszeichnen, wenn Sie verhindern wollen, dass Netscape den Bereich interpretiert. Der Internet Explorer 4.x selbst nimmt es andererseits nicht übel, wenn Sie einen Script-Bereich mit "JavaScript" auszeichnen und darin Objekte, Methoden und Eigenschaften verwenden, die eigentlich nur in JScript vorkommen. Wenn Sie einen Script-Bereich mit "JavaScript" auszeichnen und darin microsoft-spezifische JScript-Erweiterungen wie das all-Objekt verwenden, sollten Sie die Ausführung entsprechender Anweisungen von einer Abfrage abhängig machen. Lesen Sie dazu das Thema Seite Abfragen ob ein Objekt existiert in JavaScript.

Beachten Sie:

In modernen Browsern ist es normalerweise ausreichend, das type-Attribut anzugeben. Ältere Browser und Opera 5.12 benötigen jedoch zwingend das Attribut language, um den Script-Bereich von der Bearbeitung auszuschließen.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari WebKit (Entwicklerversion) Das all-Objekt

Das all-Objekt ist beim DHTML-Ansatz von Microsoft der entscheidende Schlüssel. Wie der Name schon verspricht, ist über dieses Objekt jedes einzelne HTML-Element einer HTML-Datei ansprechbar. Das all-Objekt hat etliche Eigenschaften und Methoden, die das dynamische Verändern eines HTML-Elements erlauben. Alle Methoden und Eigenschaften können an dieser Stelle nicht behandelt werden. Rufen Sie dazu die Kapitel JavaScript-Objektreferenz auf und verschaffen Sie sich einen Überblick über die Eigenschaften und Methoden des Objekts Seite all. Hier soll lediglich ein weiteres Beispiel die Wirkungsweise dieses Objekts verdeutlichen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
var Wochentagname = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch",
  "Donnerstag", "Freitag", "Samstag");
function ZeitAnzeigen () {
  var Jetzt = new Date();
  var Tag = Jetzt.getDate();
  var Monat = Jetzt.getMonth() + 1;
  var Jahr = Jetzt.getYear();
  var Stunden = Jetzt.getHours();
  var Minuten = Jetzt.getMinutes();
  var Sekunden = Jetzt.getSeconds();
  var WoTag = Jetzt.getDay();
  var Vortag = ((Tag < 10) ? "0" : "");
  var Vormon = ((Monat < 10) ? ".0" : ".");
  var Vorstd = ((Stunden < 10) ? "0" : "");
  var Vormin = ((Minuten < 10) ? ":0" : ":");
  var Vorsek = ((Sekunden < 10) ? ":0" : ":");
  var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
  var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;
  document.all.Uhr.innerHTML = Datum + " (" + Wochentagname[WoTag] + ")<br>" + Uhrzeit;
  window.setTimeout("ZeitAnzeigen()", 1000);
}
</script>
</head>
<body>
<p id="Uhr" style="font-family:Verdana; font-size:200%;
font-weight:bold; color:#CC00CC"></p>
<script language="JScript" type="text/jscript">
window.setTimeout("ZeitAnzeigen()", 1000);
</script>
</body>
</html>

Erläuterung:

Das Beispiel stellt eine vollständige, laufende Uhr mit Datum dar. Dazu wird ein leerer Textabsatz mit <p>...</p> definiert. Stylesheet-Angaben dienen dazu, den Textabsatz nach Wunsch zu formatieren. Obwohl der Absatz zunächst keinen Text enthält, dient er im Verlauf des Scripts als Container (Behälter) für den angezeigten Text mit Datum und Uhrzeit.

Das obere Script ermittelt Datum und Uhrzeit und formatiert es für eine ordentliche, hierzulande übliche Schreibweise. Die Zeichenkette, die ausgegeben werden soll, wird schließlich der Objekteigenschaft document.all.Uhr.innerHTML zugewiesen. Uhr ist dabei der Bezug auf den Namen, der bei der Definition des Textabsatzes mit id definiert wird. Mit der Objekteigenschaft innerHTML können Sie den gesamten Inhalt eines Elements, hier den des benannten <p>...</p>-Elements, dynamisch ersetzen. Da sich die Funktion zur Ausgabe der Zeit jede Sekunde selbst von neuem aufruft, wird jede Sekunde ein neuer Inhalt in das <p>-Tag mit der id="Uhr" geschrieben. Auf diese Weise entsteht der Effekt einer laufenden Uhr.

Es gibt weitere, mächtige Möglichkeiten des all-Objekts. Diese werden in der JavaScript-Objektreferenz beim Objekt Seite all beschrieben. Hier nur noch einige typische Befehlsfolgen:

Angenommen, Sie haben folgendes HTML-Element, ein gewöhnlicher Textabsatz:
<p id="derText">Das ist Text in einem Textabsatz</p>
Dann können Sie beispielsweise folgende Dynamische Veränderungen bewirken:
Mit document.all.derText.innerHTML = "<b>neuer Text<\/b> im gleichen Textabsatz"; ändern Sie den Inhalt des Textabsatzes und können dabei auch HTML-Tags zur Formatierung benutzen.
Mit document.all.derText.outerHTML = "<h1>" + document.all.derText.innerHTML + "<\/h1>"; verwandeln Sie den Textabsatz in eine Überschrift 1. Ordnung.
Mit document.all.derText.className = "Wichtig"; weisen Sie dem Absatz eine Stylesheet-Klasse namens Wichtig zu. Wenn Sie eine solche Klasse definiert haben, übernimmt der Absatz alle in der Klasse definierten Stylesheet-Angaben (lesen Sie dazu auch den Abschnitt Seite Formate für Klassen definieren).

Beachten Sie:

Mozilla Firefox unterstützt zwar document.all in der Art, wie sie im Beispiel verwendet wird. Allerdings führt er das Script im Beispiel nicht aus, da es mit <script language="JScript" type="text/jscript"> eingebunden ist. Eingebettet in einen gewöhnlichen JavaScript-Bereich funktioniert das Beispiel auch im Firefox.

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Stylesheets und Scripts

Sie können mit Dynamischem HTML nach Microsoft-Syntax dynamisch auf alle CSS-Eigenschaften einzelner HTML-Elemente zugreifen. Dadurch können Sie angezeigte Elemente optisch stark verändern. Wenn etwa eine Überschrift 2. Ordnung anfangs eine Schriftgröße von 18 Pixel hat, können Sie diese dynamisch auf 64 Pixel ändern. "Dynamisch" bedeutet dabei: bei einem Anwenderereignis wie einem Mausklick auf die Überschrift oder automatisch zeitgesteuert, etwa nach drei Sekunden.

Neben der Schriftgröße können Sie auch dynamisch eine Hintergrundfarbe unterlegen, Rahmen um ein Element ziehen, das Element über den Bildschirm wandern lassen und vieles mehr. Die Voraussetzung für diese Effekte sind Kapitel Stylesheets. Die Syntax von CSS und die Möglichkeiten der Stylesheet-Angaben sollten Sie kennen.

Die Style-Definitionen eines HTML-Elements ändern Sie dynamisch, indem Sie mit Hilfe einer Script-Sprache auf das Element zugreifen und mit neuen Stylesheet-Angaben das Aussehen des Elements ändern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<h1 id="Wechseltext" style="font-size:100%">Wichtigtuer</h1>
<script language="JScript" type="text/jscript">
function MachKlein () {
  document.all.Wechseltext.style.fontSize = "100%";
  window.setTimeout("MachGross()", 1000);
}

function MachGross () {
  document.all.Wechseltext.style.fontSize = "350%";
  window.setTimeout("MachKlein()", 1000);
}

MachKlein();
</script>
</body></html>

Erläuterung:

Das Beispiel zeigt zunächst eine Überschrift 1. Ordnung (<h1>...</h1>). Mit Hilfe des Attributs style bekommt die Überschrift Kapitel CSS-Eigenschaften zugewiesen. Im Beispiel wird die Schriftgröße auf 100 Prozent gesetzt (font-size:100%).

Das gesamte Beispiel bewirkt, dass die Größe der Überschrift einmal pro Sekunde von 100 auf 350 Prozent wechselt und wieder umgekehrt. Für dieses dynamische Verändern ist ein Script erforderlich. Im obigen Beispiel wird deshalb ein Script-Bereich mit <script language="JScript" type="text/jscript">...</script> definiert. Innerhalb des Script-Bereichs werden zwei Seite Funktionen definiert. Die eine Funktion - MachKlein() - ändert die Schriftgröße der Überschrift auf 100 Prozent, die andere Funktion - MachGross() - auf 350 Prozent. Nach jeweils einer Sekunde (1000 Millisekunden) ruft jede der beiden Funktionen die jeweils andere wieder auf. Dadurch entsteht der Wechseleffekt.

Um das dynamische Verändern der Schriftgröße zu verstehen, müssen Sie folgende Zusammenhänge beachten: im Überschriften-Tag <h1> wird mit dem Attribut id ein Name, nämlich Wechseltext, zugewiesen. Diesen Namen können Sie frei vergeben. Er darf nur aus Buchstaben, Ziffern und Unterstrichen "_" bestehen und darf keine Leerzeichen oder deutschen Umlaute enthalten. Das Script im Beispiel greift mit den Anweisungen, in denen document.all.Wechseltext vorkommt, auf genau dieses Element zu. Mit dem all-Objekt (document.all) werden alle Elemente einer HTML-Datei angesprochen. Durch den Namen dahinter wird genau das Element angesprochen, das diesen Namen hat - im Beispiel Wechseltext. Dahinter folgt das Style-Objekt (style), das dem all-Objekt untergeordnet ist (Einzelheiten zu diesem Objekt erfahren Sie in der JavaScript-Objektreferenz bei Seite style). Über das Style-Objekt können Sie als Eigenschaft eine erlaubte Stylesheet-Angabe notieren. Dabei gelten besondere Schreibweisen in JavaScript/JScript, die im folgenden behandelt werden.

Beachten Sie:

Mozilla Firefox unterstützt zwar document.all in der Art, wie sie im Beispiel verwendet wird. Allerdings führt er das Script im Beispiel nicht aus, da es mit <script language="JScript" type="text/jscript"> eingebunden ist. Eingebettet in einen gewöhnlichen JavaScript-Bereich funktioniert das Beispiel auch im Firefox.

Safari unterstützt nicht den hier dargestellten Zugriff auf Elemente über document.all, hat aber keinerlei Probleme mit der Verwendung des style-Objekts im Beispiel. Denn die Microsoft-Methode zum Zugriff auf CSS-Eigenschaften wurde später vom W3C in den DOM-Style-Standard aufgenommen, den Safari unterstützt..

MS JScript MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.3 Schreibweise von CSS-Eigenschaften in JavaScript/JScript

Wenn Sie Stylesheet-Angaben innerhalb von Script-Sprachen verwenden, müssen Sie die Syntax der Script-Sprache berücksichtigen.

Ein Problem beim Mischen von Stylesheets und JavaScript oder JScript ist es, dass viele Stylesheet-Angaben Bindestriche im Namen haben, wie etwa font-size, margin-top oder background-color. Wenn Sie aus solche Namen in JavaScript oder JScript einen Befehl wie:
document.all.MeinText.style.font-size = "200%";
erzeugen, erhalten Sie eine Fehlermeldung. Der Grund ist, dass Bindestriche keine zulässigen Zeichen in Namen sind (der Bindestrich ist in diesen Sprachen ja der Operator für Subtraktionen).

Um dieses Problem zu umgehen, hat Microsoft eine einfache Regel aufgestellt. Wenn in einem Script eine Stylesheet-Angabe ausgelesen oder verändert werden soll, entfällt der Bindestrich, und der erste Buchstabe des Wortes hinter dem Bindestrich wird großgeschrieben.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
var modus = 1;
function Textspiel () {
  if (modus == 1) {
    document.all.MeinText.style.fontSize = "200%";
    modus = 2;
    return;
  }
  if (modus == 2) {
    document.all.MeinText.style.padding = "0.6em";
    document.all.MeinText.style.backgroundColor = "#FFFF00";
    modus = 3;
    return;
  }
  if (modus == 3) {
    document.all.MeinText.style.border = "10px groove #FFCC33";
    document.all.MeinText.style.backgroundImage = "url(back.gif)";
    modus = 0;
    return;
  }
  if (modus == 0) {
    document.all.MeinText.style.fontSize = "100%";
    document.all.MeinText.style.padding = "0";
    document.all.MeinText.style.backgroundColor = "#FFFFFF";
    document.all.MeinText.style.border = "none";
    document.all.MeinText.style.backgroundImage = "none";
    modus = 1;
    return;
  }
}
</script>
</head><body>
<p id="MeinText" style=" background-color:#FFFFFF; padding:0; border:none;
 background-image:none; cursor:hand" onclick="Textspiel()">Klicken Sie auf diesen Text</p>
</body></html>

Erläuterung:

In dem Beispiel wird am Ende ein Textabsatz mit diversen Stylesheet-Angaben definiert. Einige dieser Stylesheet-Angaben enthalten Bindestriche, nämlich font-size, background-color und background-image. Innerhalb des Scripts, das über dem Textabsatz notiert ist, werden diese und andere Stylesheet-Angaben dynamisch verändert. Sie können erkennen, dass font-size zu fontSize wird, background-color zu backgroundColor und background-image zu backgroundImage - getreu der Regel.

Wenn Sie innerhalb eines Scripts einer Stylesheet-Eigenschaft einen neuen Wert zuweisen wollen, müssen Sie zuerst das gewünschte HTML-Objekt mit der style-Eigenschaft notieren, im obigen Beispiel etwa document.all.MeinText.style.fontSize. Dahinter folgt ein Istgleichzeichen für die Zuweisung, und dahinter der Wert, den Sie zuweisen wollen, also etwa "200%". Dieser Wert muss bei JavaScript und JScript immer in Anführungszeichen stehen.

Diese Art der Wertzuweisung an eine Stylesheet-Angabe unterscheidet sich von der Art, wie Werte zu Stylesheet-Angaben bei normalen Stylesheet-Definitionen zugewiesen werden. Dort notieren Sie anstelle eines Istgleichzeichens einen Doppelpunkt, so wie in den Stylesheet-Definitionen im Textabsatz des obigen Beispiels. Anführungszeichen sind dabei nicht nötig.

Das Script im Beispiel verändert die Formatierung des Textes innerhalb des Textabsatzes, wenn der Anwender mit der Maus auf den Text klickt. Immer, wenn dieses Ereignis eintritt, wird mit Hilfe des Seite Event-Handlers onclick die Funktion Textspiel() innerhalb des Scripts aufgerufen. Das Script verwaltet eine global definierte Variable namens modus. Abhängig davon, welchen Wert diese Variable hat, werden dem Text diverse neue Stylesheet-Angaben zugewiesen. Das dynamische Verändern des Textabsatzes im Script wird durch die Angabe id="MeinText" im Textabsatz und Befehlen des Typs document.all.MeinText.style bewerkstelligt.

Beachten Sie:

Mozilla Firefox unterstützt zwar document.all in der Art, wie sie im Beispiel verwendet wird. Allerdings führt er das Script im Beispiel nicht aus, da es mit <script language="JScript" type="text/jscript"> eingebunden ist. Eingebettet in einen gewöhnlichen JavaScript-Bereich funktioniert das Beispiel auch im Firefox.

Safari unterstützt nicht den hier dargestellten Zugriff auf Elemente über document.all, hat aber keinerlei Probleme mit der Verwendung des style-Objekts im Beispiel. Denn die Microsoft-Methode zum Zugriff auf CSS-Eigenschaften wurde später vom W3C in den DOM-Style-Standard aufgenommen, den Safari unterstützt.

MS JScript MS IE 4.0 Opera 7 Konqueror 3.1 Safari 1.3 Event-Handler und das Event-Objekt

Eine wichtige Voraussetzung für Dynamisches HTML ist in vielen Fällen die Interaktion zwischen Anwender und angezeigter HTML-Datei. Die angezeigte Datei kann auf Anwenderereignisse wie Mausklicks oder gedrückte Tasten an der Tastatur reagieren und Elemente daraufhin dynamisch verändern. Dazu gibt es Event-Handler und auch ein Event-Objekt. Alle Methoden und Eigenschaften des Event-Objekts und alle einzelnen Event-Handler können an dieser Stelle nicht behandelt werden. Rufen Sie dazu in der JavaScript-Dokumentation die Seite Event-Handler sowie die Referenz des Objekts Seite event auf und verschaffen Sie sich einen Überblick über die Möglichkeiten. Hier soll lediglich ein Beispiel die Wirkungsweise verdeutlichen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
function SetPos () {
  document.all.Springer.style.left = window.event.x;
  document.all.Springer.style.top = window.event.y;
}
</script>
</head><body onclick="SetPos()">
<div id="Springer" style="position:absolute; top:100px; left:100px; width:200px;
    height:100px; font-size:18px; background-color:#000066; color:#FFFF00; padding:38px;">
Klicken Sie mit der Maus irgendwohin!
</div>
</body>
</html>

Erläuterung:

Das obige Beispiel definiert einen Bereich mit <div>...</div>. Verschiedene Stylesheet-Angaben im einleitenden <div>-Tag sorgen dafür, dass der Bereich gut sichtbar ist und absolut am Bildschirm positioniert wird. Wenn der Anwender während der Anzeige irgendwo im Anzeigefenster des Browsers mit der Maus hinklickt, wird der definierte <div>-Bereich neu positioniert, und zwar so, dass die linke obere Ecke genau an der Stelle beginnt, wo der Anwender hingeklickt hat.

Damit dies möglich ist, muss das gesamte Dokument sofort reagieren, wenn der Anwender mit der Maus irgendwohin klickt. Zu diesem Zweck wird im einleitenden <body>-Tag der Event-Handler onclick notiert. Beim jedem Mausklick im Anzeigefenster wird dann die Seite Funktion SetPos() aufgerufen, die innerhalb des Script-Bereichs definiert ist. Diese Funktion setzt die Werte für die linke obere Ecke des <div>-Bereichs neu. Bezug ist dabei der Name ("Springer"), der im <div>-Tag mit dem id-Attribut vergeben wurde. Mit dem Befehl document.all.Springer.style.left wird die neue Anfangsposition links gesetzt, mit document.all.Springer.style.top die neue Anfangsposition oben. Den neuen Wert für links liefert die Eigenschaft x des window.event-Objekts, den Wert für oben die Eigenschaft y dieses Objekts. Der <div>-Bereich wird dadurch neu positioniert.

Das Event-Objekt hält ständig alle relevanten Anwendertätigkeiten wie Mausposition, Tastaturereignisse, Mausklicks, gedrückte Maustasten usw. in seinen Objekteigenschaften fest. Durch einfaches Abrufen der Eigenschaften vom Typ window.event.[Eigenschaft] können Sie jederzeit aktuelle Ereignisse abfangen. Das Abfangen geschieht durch Notieren von Event-Handlern. Wichtig ist dabei auch, an welcher Stelle Sie ein Ereignis abfangen, also wo Sie den Event-Handler notieren. So könnten Sie im obigen Beispiel den Event-Handler onclick auch im einleitenden <div>-Tag notieren. Dann würden Script-Befehle nur dann ausgeführt, wenn der Mausklick innerhalb dieses <div>-Bereichs vorkommt.

Ein wichtiges Unterobjekt des Event-Objekts ist das Objekt für das angeklickte Element (srcElement). So können Sie etwa mit window.event.srcElement.tagName ermitteln, welches HTML-Tag von einem aktuellen Anwenderereignis betroffen ist. In Ihren Scripts können Sie dann entsprechend reagieren.

Es gibt nicht nur den Event-Handler onclick, sondern viele weitere. Wenn Sie beispielsweise im einleitenden <body>-Tag die Anweisung onkeydown="alert(window.event.keyCode)" notieren, wird bei jedem Drücken einer Taste deren Zeichenwert in dezimaler Form ausgegeben. Denn in der Eigenschaft keyCode des Event-Objekts wird der Tastaturwert festgehalten, sobald der Anwender eine Taste drückt.

Beachten Sie:

Microsoft stellt zum event-abhängigen Ausführen von Scripts noch eine spezielle Syntax bereit, die Sie ebenfalls verwenden können:

<script for="document" event="onkeydown()" language="JScript" type="text/jscript">
if (event.keyCode == 32)
  window.location.href = "datei2.htm";
</script>

Mit einer solchen Anweisung im einleitenden Script-Tag wird das Script nur dann ausgeführt, wenn das angegebene Ereignis (Event) eintritt. In dem Beispiel wird bewirkt, dass der Browser beim Drücken der Leertaste (sie hat den Tastaturcode 32) zu einer anderen Datei springt.

Beachten Sie:

Safari unterstützt zwar den Zugriff auf das Event-Objekt über window.event und kennt auch dessen Eigenschaften srcElement sowie x und y, unterstützt aber nicht den hier dargestellten Zugriff auf Elemente über document.all.

MS JScript MS IE 4.0 Opera 7 Konqueror 3.1 Safari 2.0 Vererbung bei Events (Event-Bubbling)

Anwenderereignisse (Events) während der Anzeige einer WWW-Seite werden im Internet Explorer von "innen nach außen vererbt". Wenn der Anwender beispielsweise auf einen mit <b>...</b> als fett ausgezeichneten Text innerhalb eines mit <p>...</p> definierten Textabsatzes klickt, betrifft der Mausklick zunächst nur den fetten Text. Angenommen, der Textabsatz enthält im einleitenden <p>-Tag einen Event-Handler onclick, so würde dieser nicht aktiv, da der Mausklick ja nur den als fett markierten Text innerhalb des Absatzes betrifft. Da das b-Element keinen Event-Handler besitzt, würde der Mausklick unbemerkt bleiben, obwohl er innerhalb des Textabsatzes stattfand, der für den Fall eines Mausklicks einen Event-Handler enthält. Der Bubble-Effekt (wörtlich: Blaseneffekt) bewirkt, dass das Ereignis (der Mausklick) zum jeweils nächsthöheren Element im Elementenbaum der HTML-Datei weitergegeben wird. Auf diese Weise gelangt das Ereignis zu dem p-Element, das den Event verarbeitet. Würde das p-Element auch keinen Event-Handler onclick besitzen, so würde der Bubble-Effekt das Ereignis an das nächsthöhere Element weitergeben, also z.B. an ein div-Element, innerhalb dessen sich der Textabsatz befindet, oder an das body-Element. Wenn nirgendwo ein Event-Handler notiert ist, der auf den Mausklick reagiert, passiert einfach nichts.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
function Handle_Click () {
  document.all.Info.innerHTML = "Der Bereich, auf den Sie geklickt haben, ist mit &lt;" +
    window.event.srcElement.tagName + "&gt; ausgezeichnet und hat die id <i>" +
    window.event.srcElement.id + "<\/i>. Der Event wurde jedoch bis ans body-Tag durchgereicht.";
}
</script>
</head>
<body onclick="Handle_Click()">
<div id="Inhalt">
<p id="Text_1">Ein <i id="i_Text">Textabsatz</i>. Klicken Sie hinein</p>
<p id="Text_2">Ein <u id="u_Text">anderer Textabsatz</u>. Klicken Sie hinein</p>
<p id="Text_3">Noch ein <b id="b_Text">Textabsatz</b>. Klicken Sie hinein</p>
<p id="Text_4">Ein letzter <tt id="tt_Text">Textabsatz</tt>. Klicken Sie hinein</p>
</div>
<p id="Info">Hier erscheinen Infos zum Klick</p>
</body>
</html>

Erläuterung:

Im Beispiel werden diverse Texte in verschiedenen HTML-Auszeichnungen definiert. Jedes HTML-Element erhält dabei auch einen Namen (id-Attribut). Der unterste Textabsatz mit id="Info" dient dazu, dynamisch Informationen darüber auszugeben, welches Element der Anwender angeklickt hat. Jedesmal, wenn der Anwender ein Element anklickt, wird die Seite Funktion Handle_Click() aufgerufen, die in einem JavaScript-Bereich im Dateikopf definiert ist. Jedesmal wird in dem Textabsatz "Info" ausgegeben, welches HTML-Tag angeklickt wurde, und welche id es hat. Eigentlich betrifft der Mausklick dabei ja nur das jeweilige Element. Keines dieser Elemente hat jedoch einen Event-Handler onclick, der einen Mausklick abfängt und Script-Code ausführt. Dass der Script-Code trotzdem bei jedem Mausklick ausgeführt wird, liegt am Event-Bubbling. Der Mausklick-Event wird immer weiter "nach außen" gegeben und landet schließlich beim <body>-Tag, das einen Event-Handler onclick enthält.

Der Bubble-Effekt lässt sich auch ausschalten, falls er nicht erwünscht ist. Dazu müssen Sie in einem JScript/JavaScript-Bereich die Anweisung notieren:
window.event.cancelBubble = true;

Beachten Sie:

Safari unterstützt zwar den Zugriff auf das Event-Objekt über window.event und kennt auch dessen Eigenschaft srcElement, unterstützt aber nicht den hier dargestellten Zugriff auf Elemente über document.all.

nach oben
weiter | Seite Das ältere DHTML-Modell von Netscape
zurück | Seite Das Document Object Model (DOM)
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML Teil von DHTML-Modelle

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / DHTML-Modelle / Das ältere DHTML-Modell von Netscape

SELFHTML

Das ältere DHTML-Modell von Netscape
Informationsseite

nach unten Allgemeines zum DHTML-Modell von Netscape 4.x
nach unten Layer-Bereiche dynamisch anzeigen/verstecken
nach unten Layer-Bereiche dynamisch überlappen
nach unten Layer-Bereiche dynamisch bewegen
nach unten Layer-Bereiche dynamisch vergrößern/verkleinern
nach unten Layer-Inhalte dynamisch austauschen
nach unten Layer ohne layer-Element simulieren
nach unten Das Event-Objekt
nach unten Inline-Scripts bei Layern
nach unten

Allgemeines zum DHTML-Modell von Netscape 4.x

Die hier vorgestellte Layer-Technik funktioniert nur mit Netscape in der Version 4.x. In der völlig neu programmierten Version 6.0 und den Mozilla-Quellen dazu ist die gesamte Layer-Technik nicht mehr implementiert und funktioniert nicht mehr. Der Grund ist, dass das W3-Konsortium die Layer-Technik abgelehnt hat. Stattdessen wird das Seite Document Object Model (DOM) empfohlen, das auch in Netscape ab Version 6.0 implementiert ist. Die Layer-Technik, wie sie hier beschrieben wird, ist also nur noch im Hinblick auf die Rückwärtskompatibilität zur 4er-Serie der Netscape-Browser von Bedeutung.

"Dynamisches HTML" - das ist bei Netscape 4.x nicht wie im DOM oder beim älteren Modell des Internet Explorers der beliebige nachträgliche Zugriff auf alle Elemente einer HTML-Datei. Sie können mit Netscape 4.x also nicht einfach nachträglich einen Textabsatz, der mit <p>...</p> definiert ist, völlig anders formatieren, oder in eine Überschrift 1. Ordnung verwandeln.

Dynamisches HTML gibt es bei Netscape 4.x nur im Zusammenhang mit positionierten Elementen. Bei Netscape ist Dynamisches HTML die Möglichkeit, positionierte Layer dynamisch zu behandeln, also ein- und auszublenden, zu verschieben usw.

Die Layer-Technologie von Netscape ist allerdings sehr mächtig. Voraussetzung dabei ist das Definieren von Layern in HTML. Es besteht zwar auch die Möglichkeit, ohne das layer-Element Dynamisches HTML für Netscape zu schreiben, doch das ganze Konzept, das Netscape seinem Browser in der Version 4.x als Dynamisches HTML eingebaut hat, basiert auf dem layer-Element. Wenn man auf das layer-Element verzichten will, bleibt einem nur, die Layer zu "simulieren".

Die Beispiele auf dieser Seite konzentrieren sich deshalb im wesentlichen auf die Layer-Technologie. Denn nur so wird der Ansatz deutlich, den Netscape mit seiner Implementierung von Dynamischem HTML verfolgt.

Um die Beispiele auf dieser Seite zu verstehen, müssen Sie vor allem die Kapitel Layer in HTML kennen sowie Vorkenntnisse in Kapitel JavaScript mitbringen. Für die Layer-Technik ist vor allem das JavaScript-Objekt Seite layers entscheidend. Dort werden die einzelnen Eigenschaften und Methoden systematisch beschrieben, die hier in den Beispielen verwendet werden.

JavaScript 1.2 Netscape 4.0 Layer-Bereiche dynamisch anzeigen/verstecken

Sie können Layer mit Hilfe von JavaScript dynamisch anzeigen und verstecken. Je nachdem, wie Sie Ihre Layer definieren, können Sie dadurch die verschiedensten Effekte erzielen. Das folgende Beispiel demonstriert, wie Sie eine "Dia-Show" aus kurzen Texten definieren können. Der Anwender braucht nicht mehr scrollen, sondern klickt sich von einem Text zum nächsten. Die Texte werden in einer "Box" angezeigt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
var AktuellerText = 0;
var Texte = 3;

function NextText () {
  ++AktuellerText;
  if (AktuellerText >= Texte)
    AktuellerText = 0;
  for (var i = 0; i < Texte; i++)
    document.layers[i].visibility = "hide";
  document.layers[AktuellerText].visibility = "show";
}
</script>
</head><body>

<layer visibility="show" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
 <p style="color:#006600; font-family:Arial,Helvetica,Sans-Serif; font-size:1.2em; font-weight:bold;">
 <span style="color:#000000; font-family:Arial,Helvetica,Sans-Serif; font-size:1.8em; font-weight:bold;">
 1.</span><br>Man kann nur Brücken schlagen zwischen Ufern, die man auseinanderhält.</p>
</layer>

<layer visibility="hide" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,Sans-Serif; font-size:1.2em; font-weight:bold;">
<span style="color:#000000; font-family:Arial,Helvetica,Sans-Serif; font-size:1.8em; font-weight:bold;">
2.</span><br>Je größer die Erwartung, desto unmöglicher die Erfüllung.</p>
</layer>

<layer visibility="hide" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,Sans-Serif; font-size:1.2em; font-weight:bold;">
<span style="color:#000000; font-family:Arial,Helvetica,Sans-Serif; font-size:1.8em; font-weight:bold;">
3.</span><br>Wer sich aufgibt, liebt nicht, weil er sich nicht liebt; nur wer
sich verschenkt, liebt, weil er sich liebt.</p>
</layer>

<layer top="275" left="50" width="400" bgcolor="#DDFFDD">
<center><form name="Formular" action=""><input type="button" value=" weiter &gt;&gt; "
onclick="NextText()"></form></center>
</layer>

</body></html>

Erläuterung:

Im Körper der Beispiel-HTML-Datei werden insgesamt vier Layer definiert. Die ersten drei Layer enthalten Texte, die dynamisch wechseln sollen. Der vierte Layer enthält einen Button. Wenn der Anwender auf den Button klickt, wird eine JavaScript- Seite Funktion mit Namen NextText() aufgerufen. Diese Funktion wird im Kopf der HTML-Datei in einem JavaScript-Bereich definiert. Die Funktion sorgt dafür, dass der jeweils nächste Text angezeigt wird.

Beachten Sie, dass die ersten drei Layer identische Angaben zur Position enthalten. Die Angaben top="150" (linke obere Ecke beginnt 150 Pixel von oben), left="50" (linke obere Ecke beginnt 50 Pixel von links), width="400" (Breite des Layers: 400 Pixel), und height="125" (Höhe des Layers: 125 Pixel), sind in allen Layern die gleichen. Die drei Layer unterscheiden sich lediglich durch die Angabe des Attributs visibility. Der erste Layer wird mit visibilty="show" auf "sichtbar" gesetzt, die beiden anderen mit visibilty="hide" auf "unsichtbar". Dadurch wird erreicht, dass zunächst nur der erste Layer am Bildschirm angezeigt wird.

Der vierte Layer, also der mit dem Kontroll-Button, enthält ebenfalls Angaben zur Position. Er hat die gleiche Breite wie die beiden ersten Layer und beginnt auch links an der gleichen Position. In der Höhe beginnt er genau 125 Pixel tiefer als die beiden ersten Layer. Da diese eine Höhe von 125 Pixeln haben, schließt der "Kontroll-Button-Layer" also nahtlos an die oberen Layer an. Er enthält keine Angabe zur Sichtbarkeit. Das bedeutet, er ist sichtbar, und das wird sich auch im Verlauf des JavaScripts nicht ändern. Denn der Inhalt dieses Layers steuert ja das Geschehen.

In dem JavaScript-Bereich im Kopf der Datei werden zunächst zwei globale Seite Variablen definiert. Da sie außerhalb jeder Funktion stehen, behält ihr aktueller Wert solange Gültigkeit, wie die HTML-Datei angezeigt wird. In der Variablen AktuellerText wird die Indexnummer des aktuellen Textlayers gespeichert. In Texte wird die Anzahl der dynamisch austauschbaren Texte bzw. Layer gespeichert. Sie könnten anstelle der drei Layer mit Texten auch 10 oder 100 solcher Layer definieren. Entsprechend der Anzahl der definierten Layer müssten Sie nur den Anfangswert von Texte anders zuweisen.

Innerhalb der Funktion NextText() wird zunächst die Nummer von AktuellerText erhöht, denn es soll ja der jeweils nächste Text angezeigt werden. Anschließend werden in einer for-Schleife alle Layer mit Texten auf "unsichtbar" gesetzt. Am Ende wird der Layer desjenigen Textes, der angezeigt werden soll (AktuellerText) auf "sichtbar" gesetzt. Dadurch entsteht der Dia-Show-Effekt.

Beachten Sie:

Netscape dehnt die Layer entsprechend ihres Inhalts aus. Wenn der Inhalt eines Textes im obigen Beispiel größer ist als der definierte Layer-Bereich, überschneidet er sich mit dem Layer des Kontroll-Buttons, jedoch so, dass der Layer mit dem Kontroll-Button über dem unteren Teil des Layers mit dem Text liegt. Der Grund dafür ist, dass der Layer mit dem Kontroll-Button hinter dem Layer mit dem Text definiert wird und daher im "Stack" (Stapel) weiter oben liegt. Wenn Sie die Größe eines Layers unabhängig vom Inhalt fest machen wollen, müssen Sie das Attribut clip benutzen (siehe auch: Seite Anzeigebereich von Layern beschneiden).

JavaScript 1.2 Netscape 4.0 Layer-Bereiche dynamisch überlappen

Sie können Layer so positionieren, dass diese sich überlappen. Das hat ohne JavaScript meistens allerdings wenig Sinn, denn der Anwender soll die Inhalte der Layer ja sehen können. Mit Hilfe von JavaScript können Sie jedoch bewirken, dass der Anwender sich einen einzelnen Layer in den Vordergrund holen kann, um dessen Inhalt anzuzeigen. Auf diese Weise können Sie auf einer WWW-Seite durchaus verschiedene Inhalte unterbringen, für die normalerweise mehrere Seiten angebracht wären. Im folgenden Beispiel sind die Layer wie in einem Karteikastenstapel aufgereiht. Der Anwender kann einen Layer "herausgreifen".

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
layer.Text { padding:5px; font-size:12px; font-family:Arial,Helvetica,Sans-Serif; }
layer.Kopf { font-size:12px; font-family:Arial,Helvetica,Sans-Serif; font-weight:bold; text-align:right; }
a:link, a:visited, a:active { color:white; }
a.normal:link { color:#AA5522; text-decoration:underline; }
a.normal:visited { color:#772200; text-decoration:underline; }
a.normal:active { color:#000000; text-decoration:underline; }
</style>
<script type="text/javascript">
var aktiv = "Home";
function Hervorheben (neu_aktiv) {
  document.layers["Feedback"].zIndex = 1;
  document.layers["Support"].zIndex = 2;
  document.layers["Produkte"].zIndex = 3;
  document.layers["Home"].zIndex = 4;
  document.layers[aktiv].bgColor = "#CCCCCC";
  document.layers[aktiv].layers[0].bgColor = "#666666";
  document.layers[aktiv].layers[1].visibility = "hide";
  document.layers[neu_aktiv].zIndex = 5;
  document.layers[neu_aktiv].bgColor = "#FFCCFF";
  document.layers[neu_aktiv].layers[0].bgColor = "#000000";
  document.layers[neu_aktiv].layers[1].visibility = "show";
  aktiv = neu_aktiv;
}
</script>
</head><body>
<layer id="Feedback" top="130" left="10" width="360" height="230" bgcolor="#CCCCCC">
  <layer class="Kopf" width="360" height="25" bgcolor="#666666">
  <a href="javascript:Hervorheben('Feedback')">Feedback</a>
  </layer>
  <layer class="Text" top="25" visibility="hide">
  Hier Ihr Feedback:
  <form name="Formular" action=""><textarea rows="5" cols="25">Bla Bla</textarea></form>
  </layer>
</layer>
<layer id="Support" top="155" left="70" width="360" height="230" bgcolor="#CCCCCC">
  <layer class="Kopf" width="360" height="25" bgcolor="#666666">
  <a href="javascript:Hervorheben('Support')">Support</a>
  </layer>
  <layer class="Text" top="25" visibility="hide">
  Unser Support ist wirklich Bla Bla
  </layer>
</layer>
<layer id="Produkte" top="180" left="130" width="360" height="230" bgcolor="#CCCCCC">
  <layer class="Kopf" width="360" height="25" bgcolor="#666666">
  <a href="javascript:Hervorheben('Produkte')">Produkte</a>
  </layer>
  <layer class="Text" top="25" visibility=hide>
  Unsere Produkte sind ja so wahnsinnig Bla Bla
  </layer>
</layer>
<layer id="Home" top="205" left="190" width="360" height="230" bgcolor="#FFCCFF">
  <layer class="Kopf" width="360" height="25" bgcolor="#000000">
  <a href="javascript:Hervorheben('Home')">HOME</a>
  </layer>
  <layer class="Text" top="25" visibility="show">
  Unser Home ist unser Bla Bla
  </layer>
</layer>
</body></html>

Erläuterung:

Im Beispiel werden vier "große" Layer definiert: einer für "Feedback", einer für "Support", einer für "Produkte" und einer für "Home", was bedeuten soll, dass dieser Layer eine Art Homepage, einen Home-Layer darstellt. Dieser Layer wird auch zuerst im Vordergrund angezeigt. Und zwar deshalb, weil er als letzter definiert wird. Wenn Sie bei Layern kein Attribut z-index notieren, liegt immer derjenige Layer ganz oben, der als letzter definiert wird.

Dem Beispiel können Sie auch entnehmen, dass innerhalb der vier großen Layer jeweils zwei "innere" Layer definiert werden. Layer, die innerhalb anderer Layer definiert werden, werden relativ zu ihrem Eltern-Layer positioniert. Dazu müssen Sie sich einen Layer vorstellen wie einen neuen kleinen Dateikörper. Alles, was innerhalb davon notiert wird, wird relativ dazu positioniert.

Die Angaben zu top, left, height und width in den Layern im obigen Beispiel sind alle genau ermittelt, und zwar so, dass die Layer optisch einen sauber sortierten Karteikastenstapel darstellen. Versuchen Sie, die Abhängigkeiten der Positionierungsangaben im Beispiel zu ermitteln. So können Sie erkennen, wie Sie vorgehen müssen, um mehrere Layer nach einem von Ihnen gewünschten Kriterium ordentlich verteilt im Anzeigefenster zu platzieren.

Jeder der "großen" Layer enthält im obigen Beispiel zwei innere Layer: einen Layer, der wie eine Titelleiste wirkt und einen Verweis enthält, und einen Layer, der den eigentlichen Inhalt enthält. Die Verweise in den Titelleisten-Layern rufen eine JavaScript-Funktion namens Hervorheben() auf. Diese Funktion bewirkt das dynamische Hervorholen des "großen" Layers, der zu dem angeklickten Verweis gehört (also des Eltern-Layers von dem Layer, in dem der Verweis steht).

In dem Script-Bereich, in dem die Funktion Hervorheben() steht, wird vor der Funktion eine Variable aktuell definiert. Sie bekommt zu Beginn den Namen des vorne liegenden Layers zugewiesen. Das ist derjenige Name, der beim entsprechenden Layer im id-Attribut vergeben wurde.
Die Funktion Hervorheben() erwartet einen Parameter, nämlich den Namen desjenigen Layers, der anstelle des bisher vorne liegenden Layers hervorgeholt werden soll. Bei den Verweisen, die die Funktion aufrufen, wird denn auch wieder der Name übergeben, der im entsprechenden Layer bei id vergeben ist.

Innerhalb der Funktion Hervorheben() wird zunächst die normale Layer-Reihenfolge hergestellt. Das geschieht durch Zuweisen einer Zahl an die Layer-Objekteigenschaft zIndex. Je höher die Zahl, desto weiter vorne im Stapel liegt der Layer. Das Wiederherstellen der normalen Layer-Reihenfolge bewirkt, dass der "Karteikastenstapel", den das Beispiel darstellt, immer aufgeräumt erscheint.

Anschließend wird der bisher aktive Layer, bezeichnet durch document.layers[aktiv], mit mehreren Anweisungen behandelt. Die Angabe aktiv in den eckigen Klammern zeigt zunächst auf den Layer "Home". Am Ende der Funktion wird der Wert der Variablen aktiv jedoch geändert. Dort wird ihr der Name des neuen hervorgehobenen Layers zugewiesen. Dadurch ist beim nächsten Aufruf der Funktion dieser Layer derjenige, der von document.layers[aktiv] betroffen ist.
Die Anweisungen, die den bisher aktiven Layer betreffen, weisen diesem Attribute zu, die ihn optisch zu einem "untenliegenden" Layer im Karteikastenstapel machen.

Derjenige Layer mit dem Namen, der mit dem Parameter neu_aktiv übergeben wurde, erhält dagegen diejenigen optischen Attribute, die ihn als hervorgehobenen Layer auszeichnen. Er bekommt auch die höchste Zahl für zIndex. Dadurch wird er als oberster Layer angezeigt.

Beachten Sie:

Im Layer Feedback ist ein Formular definiert. Dieses Formular wird im Netscape 4 mit document.layers.Feedback.document.Formular angesprochen, da es Bestandteil des Layers Feedback ist. Ein Layer stellt aus Sicht von Netscape ein Dokument im Dokument dar und hat ein eigenes Seite document-Objekt.

JavaScript 1.2 Netscape 4.0 Layer-Bereiche dynamisch bewegen

Sie können Layer mit beliebigen Inhalten über das Anzeigefenster springen oder wandern lassen. Das Springen zu einer Stelle ist dabei nur ein einziger Befehl, da dies als Methode im Layer-Objekt von JavaScript zur Verfügung steht. Wenn Sie dagegen zeitgesteuerte Bewegungseffekte wollen, müssen Sie die Positionsberechung vom Startpunkt bis zum Endpunkt des Bewegungsvorgangs "zu Fuß" programmieren. Das folgende Beispiel zeigt, wie so etwas im Prinzip funktioniert.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
p { font-weight:bold }
a.Navlink:link { color:#FF0000 }
a.Navlink:visited { color:#FF0000 }
a.Navlink:active { color:#000000 }
</style>
<script type="text/javascript">
function hBeweg (LayerNum, bis_links, Pixel, Pause) {
  var Restpixel = bis_links - document.layers[LayerNum].left;
  if (bis_links < document.layers[LayerNum].left)
    Pixel = 0 - Pixel;
  if (Math.abs(Restpixel) > Math.abs(Pixel)) {
    document.layers[LayerNum].moveBy(Pixel, 0);
  } else {
    document.layers[LayerNum].moveBy(Restpixel, 0);
  }
  if (document.layers[LayerNum].left != bis_links)
    window.setTimeout("hBeweg(" + LayerNum + "," + bis_links + "," + Math.abs(Pixel) + ")", Pause);
}

function vBeweg (LayerNum, bis_oben, Pixel, Pause) {
  var Restpixel = bis_oben - document.layers[LayerNum].top;
  if (bis_oben < document.layers[LayerNum].top)
    Pixel = 0 - Pixel;
  if (Math.abs(Restpixel) > Math.abs(Pixel)) {
    document.layers[LayerNum].moveBy(0, Pixel);
  } else {
    document.layers[LayerNum].moveBy(0, Restpixel);
  }
  if (document.layers[LayerNum].top != bis_oben)
    window.setTimeout("vBeweg(" + LayerNum + "," + bis_oben + "," + Math.abs(Pixel) + ")", Pause);
}
</script>
</head><body>
<layer left="10" top="30" width="450" height="250" bgcolor="#FFFF66">
<h1>Einen springen lassen...</h1>
<p>Springe nach:
<a class="Navlink" href="javascript:document.layers[0].moveTo(10,30)">links oben</a> |
<a class="Navlink" href="javascript:document.layers[0].moveTo(260,30)">rechts oben</a> |
<a class="Navlink" href="javascript:document.layers[0].moveTo(10,260)">links unten</a> |
<a class="Navlink" href="javascript:document.layers[0].moveTo(260,260)">rechts unten</a><br></p>
<p>Bewege nach:
<a class="Navlink" href="javascript:hBeweg(0,10,4,2)">links</a> |
<a class="Navlink" href="javascript:hBeweg(0,260,4,2)">rechts</a> |
<a class="Navlink" href="javascript:vBeweg(0,30,4,2)">oben</a> |
<a class="Navlink" href="javascript:vBeweg(0,260,4,2)">unten</a></p>
</layer>
</body></html>

Erläuterung:

Innerhalb des Dateikörpers der HTML-Datei im obigen Beispiel wird ein Layer definiert. Dieser Layer enthält insgesamt acht Verweise. Bei jedem Verweis wird JavaScript-Code ausgeführt. Dabei wird der Befehl, den der Verweis dem Anwender anbietet, in die Tat umgesetzt.

Alle Verweise sorgen für eine Neupositionierung des Layers, in dem sie sich selber befinden. Das muss nicht so sein - es ist im obigen Beispiel einfach zu Demo-Zwecken so gelöst. Der Layer, den es dynamisch zu positionieren gilt, könnte auch etwas ganz anderes enthalten, etwa Grafiken, Tabellen usw.

Die ersten vier Verweise führen lediglich Sprünge aus, d.h. beim Klicken auf einen dieser Verweise wird der Layer-Inhalt einfach sofort an einer anderen Stelle im Anzeigefenster angezeigt. Für diese Aufgabe stellt das Layer-Objekt von JavaScript die Methode moveTo() zur Verfügung. Mit einer Anweisung wie document.layers[0].moveTo(...) positionieren Sie den ersten Layer der Datei (der den Index 0 hat) an einer neuen Position. Die Methode moveTo() setzt die neue Position der linken oberen Ecke des Layers. Dazu erwartet die Methode zwei Parameter, und zwar zuerst den Wert für links, und als zweites den Wert für oben. Mit einer Anweisung wie document.layers[0].moveTo(260,10) wird also die linke obere Ecke des Layers auf 260 Pixel von links und 10 Pixel von oben gesetzt. Die Angaben beziehen sich auf das jeweilige Elternelement des Layers. Da der Layer im obigen Beispiel kein Layer innerhalb eines anderen Layers ist, ist das normale Anzeigefenster das Elternelement.

Während das einfache Neupositionieren mit einer einzigen JavaScript-Anweisung möglich ist, die im obigen Beispiel direkt in den entsprechenden Verweisen steht, muss zum dynamischen Bewegen von Layern eine eigene Funktion aufgerufen werden, die den Bewegungsablauf bestimmt. Im obigen Beispiel gibt es zwei solcher Funktionen. Die Funktion hBeweg() kann Layer horizontal nach links oder rechts verschieben, die Funktion vBeweg() leistet das gleiche, nur vertikal nach oben oder unten. Entsprechend werden die Funktionen aufgerufen. Wenn der Anwender einen der Verweise zum Bewegen nach rechts oder links angeklickt, wird hBeweg() aufgerufen, und bei den Verweisen zum Bewegen nach unten oder oben wird vBeweg() aufgerufen.

Beide Funktionen sind allgemein geschrieben. Deshalb erwarten sie als Input auch verschiedene Parameter, die beim Funktionsaufruf zu übergeben sind:
LayerNum ist die Indexnummer des Layers, der bewegt werden soll. Da im Beispiel immer der gleiche und einzige vorhandene Layer bewegt werden soll, wird beim Aufruf der Funktionen immer dessen Indexnummer 0 übergeben.
bis_links (bei hBeweg()) bzw. bis_oben (bei vBeweg()) ist der neue Endwert, bei dem die Bewegung gestoppt werden soll. Je nachdem, ob der Wert, den Sie dabei übergeben, größer oder kleiner ist als die aktuelle Position des Layers, ergibt sich automatisch die Bewegungsrichtung.
Pixel ist die Anzahl der Pixel, um die pro Bewegungsschritt weiter gesprungen wird. Je höher der Wert ist, den Sie dafür übergeben, desto schneller und ruckartiger die Bewegung. Im obigen Beispiel wird in allen Fällen 4 übergeben.
Pause ist ein weiterer Parameter zur Beeinflussung der Geschwindigkeit. Je höher der Wert, desto langsamer die Bewegung.

Ein Bewegen von Layern besteht in nichts anderem als einem schrittweise neuen Positionieren des Layers. In den Funktionenen hBeweg() und vBeweg() stehen jeweils etwa in der Mitte zwei Anweisungen der Art document.layers[LayerNum].moveBy(...), von denen immer nur eine ausgeführt wird. Das ist diejenige Anweisung, mit der der Layer jeweils neu positioniert wird. Es handelt sich einfach um den Aufruf der Methode moveBy() des Layer-Objekts. Diese Methode funktioniert genauso wie moveTo(), nur mit relativen Angaben statt mit absoluten.

Damit der Layer nicht nur einmal, sondern weiter bewegt wird, rufen sich die beiden Funktionen hBeweg() und vBeweg() am Ende jeweils selbst wieder auf. Der Schleifen-Effekt, der dadurch entsteht, wird erst abgebrochen, wenn der gewünschte Endwert erreicht ist.
Der Selbstaufruf der Funktion ist in die JavaScript-Methode Seite window.setTimeout() eingebunden. Dadurch kann die Verzögerung berücksichtigt werden, die mit dem Parameter Pause übergeben wurde. Der Selbstaufruf der Funktion wirkt etwas kompliziert. Das liegt daran, dass die Funktion sich auch wieder mit den von ihr erwarteten Parametern aufrufen muss. Leider ist es nicht möglich, dazu einen normalen Funktionsaufruf zu notieren und einfach die übergeben bekommenen Parameter wieder zu übergeben. Stattdessen wird eine Zeichenkette zusammengebaut, welche die Funktion beim Neuaufruf mit tatsächlichen Werten versorgt.

Die übrigen Anweisungen in den beiden Funktionen dienen zur Kontrolle des Bewegungsablaufs, vor allem dazu, dass trotz unterschiedlicher Aufrufparameter am Ende tatsächlich die gewünschte Endposition erreicht wird. So ist Restpixel eine Hilfsvariable, die ermittelt, wie viele Pixel noch zwischen aktueller Layerposition und dem gewünschten Endwert liegen. Wichtig ist auch die korrekte Bestimmung der Bewegungsrichtung. Wenn der gewünschte Endwert der Bewegung kleiner ist als die Position des Layers beim Start der Bewegung, dann muss der Schrittwert, der mit dem Parameter Pixel übergeben wird, als negative Zahl interpretiert werden. Denn nur so kann es "rückwärts" gehen, also nach links oder nach oben. Mit dem Ausdruck Pixel=0-Pixel wird der Schrittwert bei Bedarf auf eine negative Zahl "umgepolt".

Beachten Sie:

Komplexere Bewegungsabläufe benötigen entsprechend komplexere Programmierung. Bei diagonalen Bewegungen ist es nur einfach, solange die Anzahl der Pixel, um die pro Bewegungsschritt weiter positioniert wird, horizontal und vertikal immer proportional ist. Sobald Sie aber "krumme" Aufgaben lösen wollen, etwa die, von oben 10 links 10 nach oben 86 links 623 auf möglichst geradem Weg zu kommen, dürfen Sie in die Tiefen der Arithmetik eintauchen. Und wenn Sie gar Kreis- oder Ellipsenbewegungen wollen, müssen Sie entsprechende geometrische Formeln kennen und die dafür vorgesehenen Methoden des Seite Math-Objekts von JavaScript benutzen.

JavaScript 1.2 Netscape 4.0 Layer-Bereiche dynamisch vergrößern/verkleinern

Durch dynamisches Verändern des angezeigten Bereichs eines Layers lassen sich unzählige interessante Effekte erzielen, zum Beispiel zum dynamischen Aufklappen und Zuklappen von Teilen einer WWW-Seite. Das folgende Beispiel bewirkt drei "Blöcke", von denen zunächst nur Titelzeilen sichtbar sind. Jede Titelzeile enthält einen Verweis. Beim Anklicken des Verweises wird unterhalb der Titelzeile ein Bereich mit Inhalt nach unten aufgerollt. Beim nächsten Anklicken des Verweises wird er wieder zugerollt.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
layer.Text { padding:5px; font-size:18px; font-family:Arial,Helvetica,Sans-Serif; color:#FFFFFF }
layer.Kopf { padding:5px; font-size:14px; font-family:Arial,Helvetica,Sans-Serif; font-weight:bold; }
a:link, a:visited, a:active { color:#FFFFE0; }
a.normal:link { color:#AA5522; text-decoration:underline; }
a.normal:visited { color:#772200; text-decoration:underline; }
a.normal:active { color:#000000; text-decoration:underline; }
</style>
<script type="text/javascript">
var Status = new Array("zu", "zu", "zu");
function AufUndZu (LayerNum) {
  var i;
  if (Status[LayerNum] == "zu") {
    for (i = 2; i < 250; ++i)
      document.layers[LayerNum].clip.bottom = i;
    Status[LayerNum] = "auf";
  } else {
    for (i = 250; i > 2; --i)
      document.layers[LayerNum].clip.bottom = i;
    Status[LayerNum] = "zu";
  }
}
</script>
</head><body>
<layer class="Text" left="10" top="70" width="198" height="250" bgcolor="#000099" clip="0,0,198,2">
HTML ist die Sprache für die Strukturierung von Hypertext-Projekten. Logos und Godfather aller
Web-Seiten. Vermutlich das erfolgreichste Dateiformat der EDV-Geschichte.
</layer>
<layer class="Text" left="210" top="70" width="198" height="250" bgcolor="#994000" clip="0,0,198,2">
CSS ist die Sprache für die Formatierung von Web-Seiten. Physis und Sohnprinzip. Klinkt sich
nahtlos in HTML ein und sorgt dafür, das Strukturen zu Farben und Formen werden.
</layer>
<layer class="Text" left="410" top="70" width="198" height="250" bgcolor="#008000" clip="0,0,198,2">
JavaScript ist die Sprache für Dynamische Web-Seiten. Kinesis und Geistprinzip. Klinkt sich nahtlos
in HTML ein und zunehmend auch in CSS. Ist allerdings am schwersten zu verstehen.
</layer>
<layer class="Kopf" left="10" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:AufUndZu(0)">HTML</a>
</layer>
<layer class="Kopf" left="210" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:AufUndZu(1)">CSS</a>
</layer>
<layer class="Kopf" left="410" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:AufUndZu(2)">JavaScript</a>
</layer>
</body></html>

Erläuterung:

In dem Beispiel werden insgesamt sechs Layer definiert. Die ersten drei Layer sind diejenigen, die auf- und zuklappbar sind. Zunächst sind diese Layer zugeklappt. Das wird durch das Attribut clip erreicht. Durch diese Angabe lässt sich der angezeigte Bereich eines Layers beliebig einschränken. Die auf-/zuklappbaren Layer im obigen Beispiel etwa haben durch die Angaben width="198" height="250" eine Breite von 198 und eine Höhe von 250 Pixeln. Durch die Angabe clip="0,0,198,2" wird folgendes erreicht: trotz der definierten Breite und Höhe ist nur der Bereich von links 0 oben 0 bis links 198 oben 2 sichtbar. Das ist nur ein ganz dünner Streifen, der aus optischen Gründen zugelassen wird. Mit 0,0,198,0 wäre von den Layern überhaupt nichts zu sehen.

Die drei unteren Layer sind mit Hilfe der Angaben zu top, left, width und height so positioniert, dass sie genau über den auf-/zuklappbaren Layern stehen. Diese "Kopf"-Layer enthalten Verweise. Bei jedem Klick auf einen Verweis in einem der Kopf-Layer wird der Layer unterhalb davon auf- oder wieder zugeklappt. Dazu wird bei jedem Klick auf einen der Verweise eine JavaScript-Funktion aufgerufen: die Funktion AufUndZu(), die im Kopf der Datei in einem JavaScript-Bereich definiert ist.

In dem JavaScript-Bereich wird vor der Funktion AufUndZu() bereits ein Array, bestehend aus drei Werten, definiert: der Array Status. Alle seine drei Werte erhalten den Anfangszustand "zu". Da dieser Array außerhalb jeder Funktion definiert ist, stehen seine Daten jederzeit zur Verfügung.

Innerhalb der Funktion AufUndZu() wird geprüft, ob ein Layer derzeit auf- oder zugeklappt ist. Dazu bekommt die Funktion beim Aufruf einen Parameter LayNum übergeben. Das ist die Indexnummer des Layers, der auf- oder zugeklappt werden soll. Da im Beispiel die ersten drei definierten Layer davon betroffen sein sollen, kommen also nur die Indexnummern 0, 1 und 2 in Frage. Beim Aufruf der Funktion in den unteren drei Layern werden denn auch genau diese drei Werte übergeben. Mit der Abfrage if (Status[LayerNum] == "zu") vergleicht die Funktion AufUndZu(), was im Array Status als Wert für die übergebene Indexnummer steht. Wenn dort "zu" steht, wird der Layer aufgeklappt. Wenn er aufgeklappt wird, wird der Wert im Array am Ende auf den Wert "auf" gesetzt. Dadurch gelangt die Funktion bei der nächsten Abfrage für den gleichen Layer in den else-Zweig, wo sie genau die umgekehrten Arbeiten durchführt.

Das eigentliche Auf- und Zuklappen geschieht innerhalb der for-Schleife. Dort wird beim Aufklappen von 2 bis 250 gezählt und beim Zuklappen von 250 zurück auf 2. Abhängig vom aktuellen Schleifenwert wird die Unterseite des Clip-Bereichs des Layers mit document.layers[LayerNum].clip.bottom dynamisch verändert. Die Grenzwerte von 2 und 250 hängen mit den definierten Layern zusammen: die 2 ist jener Wert, der bei den Angaben clip="0,0,198,2" vorkommt, und 250 ist die Höhe der definierten Layer (height="250"). Beim Aufklappen wird also der Clip-Bereich im Script dynamisch auf 0,0,198,250 verändert. Das bedeutet: der Layer ist vollständig sichtbar. Beim Zuklappen wird dagegen wieder der Clip-Anfangszustand von 0,0,198,2 wiederhergestellt.

JavaScript 1.2 Netscape 4.0 Layer-Inhalte dynamisch austauschen

Einen der großen Vorteile des Microsoft-Ansatzes für Dynamisches HTML, nämlich das beliebige Austauschenkönnen von HTML-Elementinhalten, können Sie mit Hilfe von Netscape-Layern zumindest "nachstellen". Der Grund ist, dass Netscape einen Layer wie ein eigenes kleines neues Dokument innerhalb des Elterndokuments behandelt. So sind auch alle JavaScript-Objekte darauf anwendbar, die unterhalb des document-Objekts liegen. Das folgende Beispiel verdeutlicht, wie dies bei Layern im einzelnen funktioniert, und welche Möglichkeiten sich dabei eröffnen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function DatenSchreiben () {
  var Text = document.Input.document.Eingabe.Feld.value;
  var Laenge = document.Input.document.Eingabe.Feld.value.length;
  document.Output.document.clear();
  document.Output.document.write("<p>Sie haben folgenden Text eingegeben:<br>");
  document.Output.document.write("<b>" + Text + "<\/b><\/p>");
  document.Output.document.write("<p>Der Text hat eine Laenge von ");
  document.Output.document.write("<b>" + Laenge + " Zeichen<\/b><\/p>");
  document.Output.document.close();
}
</script>
</head><body>
<layer id="Input" bgcolor="#E4EEFF" style="padding:18px" left="10" top="100" width="280" height="280">
<p>Geben Sie in dem Feld Text ein und klicken Sie dann auf "Interaktion"</p>
<form name="Eingabe" action="">
<textarea name="Feld" cols="25" rows="6" wrap="virtual"></textarea><br>
<input type="button" value="Interaktion" width="220" onclick="DatenSchreiben()">
</form>
</layer>
<layer id="Output" style="padding:18px" left="310"
top="100" width="280" height="280">
</layer>
</body></html>

Erläuterung:

Im Beispiel werden zwei Layer definiert: einer mit dem Namen (id) Input und einer mit dem Namen Output. Beide Layer sind so positioniert, dass der Layer für den Output neben dem Layer für den Input erscheint. Der Layer für den Output erhält jedoch zunächst keinen Inhalt. Im Layer für den Input wird dagegen ein Formular definiert. Das Formular besteht aus einem mehrzeiligen Eingabefeld und einem Button. Wenn der Anwender auf den Button klickt, wird die JavaScript-Funktion SchreibeDaten() aufgerufen, die im Kopf der Datei innerhalb eines JavaScript-Bereichs definiert ist.

Die Funktion ermittelt zunächst den eingegebenen Text und dessen Länge. Anschließend schreibt sie diese Daten zur Kontrolle in den Layer mit dem Namen Output. Wichtig ist, dass vor dem dynamischen Schreiben des Inhalts die Methode clear() aufgerufen wird, die den aktuellen Inhalt des Layers löscht, und nach dem Schreiben die Methode close(), die den Vorgang abschließt, sodass beim nächsten Mal ein neuer Schreibzugriff möglich ist. Dazwischen werden die eigentlichen Daten geschrieben, und zwar mit der Methode write().

Alle drei Methoden sind altbekannte Methoden des document-Objekts von JavaScript. Das besondere im Fall der Layer ist, dass das document-Objekt bei den Anweisungen gleich doppelt verwendet wird. Ein Beispiel ist die Anweisung: document.Output.document.clear();. Auch zu Beginn der Funktion, beim Ermitteln des Formularfeldinhalts, kommt diese doppelte Verwendung von document vor. Solche Konstruktionen müssen Sie so verstehen: über das vorne notierte document sind Layer-Objekte ansprechbar, da diese unterhalb des document-Objekts liegen. Output ist im Beispiel der Name eines Layers. Dadurch wird dieser Layer angesprochen. Ein Layer gilt nun aber selbst wieder als "Dokument". Deshalb müssen Sie dahinter nochmals document und dahinter erlaubte Eigenschaften und Methoden des document-Objekts notieren. Die Anweisungen beziehen sich dann auf die Elemente innerhalb des entsprechenden Layers. Im obigen Beispiel etwa kommen Sie an den Formularfeldinhalt nur mit document.Input.document.Eingabe.Feld.value (document.Eingabe.Feld.value würde dagegen eine Fehlermeldung erzeugen).

Beachten Sie:

Der Phantasie sind hierbei kaum Grenzen gesetzt. Alles, was Sie beispielsweise durch Interaktion mit dem Anwender mit Hilfe eines Formulars in JavaScript ermitteln und berechnen können, können Sie auf diese Weise dynamisch ausgeben. Mit Methoden wie window.setTimeout() können Sie auch zeitgesteuert Inhalte in Layer schreiben.

JavaScript 1.2 Netscape 4.0 Layer ohne layer-Element simulieren

Unter dem Druck von Microsoft und angesichts der Tatsache, dass das W3-Konsortium keine Anstalten machte, das layer-Element und damit die Grundlage für Dynamisches HTML nach dem Netscape-Ansatz in den HTML-Standard zu übernehmen, hat Netscape in die Fähigkeit zum Dynamischen Positionieren auch auf die beiden "abstrakten" HTML-Elemente <div>...</div> und <span>...</span> ausgedehnt. Wenn Sie innerhalb solcher HTML-Tags mit Hilfe Stylesheet-Angaben zur Positionierung des Elements notieren, können Sie mit JavaScript auf solche Angaben zugreifen. Netscape interpretiert die Angaben dann genau so wie bei Layern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Zeigen () {
  document.BildAnzeige.visibility = "visible";
  document.ZeigenVerweis.visibility = "hidden";
  document.VersteckenVerweis.visibility = "visible";
}

function Verstecken () {
  document.BildAnzeige.visibility = "hidden";
  document.VersteckenVerweis.visibility = "hidden";
  document.ZeigenVerweis.visibility = "visible";
}
</script>
<style type="text/css">
#ZeigenVerweis {
position:absolute; left:100; top:140; width:400; height:30; visibility:visible; }
#VersteckenVerweis {
position:absolute; left:100; top:140; width:400; height:30; visibility:hidden; }
#BildAnzeige {
position:absolute; left:100; top:170; width:400; height:230; visibility:hidden; }
</style>
</head><body>
<div id="ZeigenVerweis">
<a href="javascript:Zeigen()"><b>Zeig das Bild an</b></a>
</div>
<div id="VersteckenVerweis">
<a href="javascript:Verstecken()"><b>Versteck das Bild</b></a>
</div>
<div id="BildAnzeige">
<img src="denker.jpg" width="91" height="177" border="0" alt="Denker">
</div>
</body></html>

Erläuterung:

Das Beispiel bewirkt, dass beim Anklicken eines Verweises ein Bild angezeigt wird, das zunächst nicht sichtbar ist. Gleichzeitig erscheint ein neuer Verweis, der das Ausblenden des Bildes erlaubt. Auf diese Weise lässt sich das Bild immer wieder ein- und ausblenden.

In dem Beispiel werden dazu innerhalb des Dateikörpers drei Bereiche mit <div>...</div> definiert. Alle div-Bereiche erhalten Seite CSS-Eigenschaften zur Positionierung, und zwar im Dateikopf in dem style-Bereich. Ohne solche Angaben ist bei Netscape kein dynamischer Zugriff auf das entsprechende Element möglich. Dass die CSS-Angaben zentral definiert werden, hat seine Ursache darin, dass einige Netscape-4-Versionen mit Angaben direkt im einleitenden <div>-Tag Probleme haben.

Die beiden ersten <div>-Bereiche im Beispiel haben die gleichen Angaben zur Positionierung. Sie unterscheiden sich lediglich durch die visibility-Eigenschaft. Dadurch wird bewirkt, dass beide Bereiche an der gleichen Stelle angezeigt werden, der eine Bereich zunächst jedoch ausgeblendet bleibt, während der andere angezeigt wird.
Der dritte <div>-Bereich ist der Behälter für das anzuzeigende Bild. Er ist zunächst auch nicht sichtbar.

Die beiden ersten Bereiche enthalten jeweils einen Verweis. Beim Anklicken des Verweises wird jeweils eine JavaScript-Funktion aufgerufen, die im Kopf der Datei in einem JavaScript-Bereich definiert ist. Der Bereich, der zunächst angezeigt wird, enthält einen Verweis, bei dessen Anklicken die Funktion Zeigen() aufgerufen wird.

Die Funktion Zeigen() tut nichts anderes, als die Anzeigeverhältnisse unter den drei <div>-Bereichen zu ändern. Der erste Bereich, über dessen Verweis die Funktion aufgerufen wurde, wird mit document.ZeigenVerweis.visibility = "hidden" auf unsichtbar gesetzt. Der zweite Bereich, der mit dem anderen Verweis, wird dagegen auf sichtbar gesetzt. Auch der Bereich mit dem Bild wird sichtbar.
Nun werden der zweite Verweis ("Versteck das Bild") und das Bild selbst angezeigt. Beim Klicken auf den Verweis wird die andere JavaScript-Funktion Verstecken() aufgerufen. Diese Funktion arbeitet genau so wie die Funktion Zeigen(), nur umgekehrt.

Der Zugriff auf die <div>-Bereiche wird dadurch möglich, dass ihnen mit dem id-Attribut ein Name gegeben wird. Über document.BereichName ist dann der Zugriff auf Eigenschaften wie visibility, top, left, width, height oder clip möglich. So lassen sich praktisch alle Aufgaben lösen, ohne das <layer>-Tag einzusetzen.

Beachten Sie:

Ein layer-Element lässt sich nur simulieren, wenn der div-Bereich absolut positioniert ist.

Sie können - wie im Beispiel - statt der visibility-Eigenschaften hide und show die Eigenschaften hidden und visible verwenden, da Netscape 4 diese Angaben ebenfalls korrekt interpretiert.

JavaScript 1.2 Netscape 4.0 Das Event-Objekt

Das Event-Objekt von JavaScript erlaubt es, auf Anwenderereignisse zu reagieren. Es stellt eine Erweiterung der klassischen Event-Handler dar. Das folgende Beispiel demonstriert die Möglichkeiten des Event-Objekts.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
layer { font-size:14px; font-family:Arial }
layer.Kopf { color:#FFFFFF; padding:4px; cursor:hand; }
layer.Text { color:#000000; padding-top:30px; padding-left:4px; padding-right:4px }
</style>
</head><body>

<layer id="Gruen" class="Text" bgcolor="#99FF99" top="170" left="10" width="200" height="180">
<layer id="Gruenkopf" class="Kopf" bgcolor="#000000" top="0" left="0" width="200" height="25">
Titelleiste des grünen Layers
</layer>
Klicken Sie mal mit der Maus in die Titelleiste dieses Layers,
halten Sie die Maustaste gedrückt und ziehen Sie dann die Maus an eine andere Stelle.
</layer>
<layer id="Gelb" class="Text" bgcolor="#FFFF66" top="10" left="310" width="300" height="120">
<layer id="Gelbkopf" class="Kopf" bgcolor="#000000" top="0" left="0" width="300" height="25">
Titelleiste des gelben Layers
</layer>
Klicken Sie mal mit der Maus in die Titelleiste dieses Layers,
halten Sie die Maustaste gedrückt und ziehen Sie dann die Maus an eine andere Stelle.
</layer>

<script type="text/javascript">
Gruen = document.layers["Gruen"];
Gruentitel = document.layers["Gruen"].document.layers["Gruenkopf"].document;

Gelb = document.layers["Gelb"];
Gelbtitel = document.layers["Gelb"].document.layers["Gelbkopf"].document;

Gruentitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
Gruentitel.onmousedown = StartGruen;
Gruentitel.onmouseup = EndGruen;
document.layers["Gruen"].document.layers["Gruenkopf"].onload = GruenReset;

Gelbtitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
Gelbtitel.onmousedown = StartGelb;
Gelbtitel.onmouseup = EndGelb;
document.layers["Gelb"].document.layers["Gelbkopf"].onload = GelbReset;

function GruenReset () {
  Gruentitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
}

function GelbReset () {
  Gelbtitel.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEDRAG);
}

function StartGruen () {
  Gruentitel.captureEvents(Event.MOUSEMOVE);
  Gruentitel.onmousemove = ZiehGruen;
}

function StartGelb () {
  Gelbtitel.captureEvents(Event.MOUSEMOVE);
  Gelbtitel.onmousemove = ZiehGelb;
}

function ZiehGruen (Ereignis) {
  Gruen.left = Ereignis.pageX;
  Gruen.top = Ereignis.pageY;
}

function ZiehGelb (Ereignis) {
  Gelb.left = Ereignis.pageX;
  Gelb.top = Ereignis.pageY;
}

function EndGruen () {
  Gruentitel.onmousemove = 0;
  Gruentitel.releaseEvents(Event.MOUSEMOVE);
}

function EndGelb () {
  Gelbtitel.onmousemove = 0;
  Gelbtitel.releaseEvents(Event.MOUSEMOVE);
}
</script>
</body></html>

Erläuterung:

Im Beispiel werden insgesamt vier Layer definiert, davon zwei "äußere" (mit id="Gruen" bzw. id="Gelb") und zu jedem jeweils ein "innerer" (mit id="Gruenkopf" bzw. id="Gelbkopf"). Die inneren Layer sind so gestaltet, dass sie wie Titelleisten zu den jeweils äußeren Layern wirken, daher auch die id-Namen.

Wie Sie erkennen können, steht nirgendwo bei der Layerdefinition oder innerhalb eines der Layer ein JavaScript-Aufruf. Dennoch sind die beiden Titelleisten "sensitiv": wenn der Anwender mit der Maus darauf klickt, die Maustaste gedrückt hält und die Maus bewegt, bewegt sich der gesamte zugehörige "äußere" Layer mit. Der Grund dafür ist das Konzept des Event-Objekts. Es benötigt keine Event-Handler innerhalb von HTML, um JavaScript-Aktionen anzustoßen.

Der JavaScript-Bereich des obigen Beispiels enthält dafür einige "ungewohnte" Dinge. Er wird unterhalb der Layer definiert, weil gleich bei seinem Einlesen Code ausgeführt wird, der sich auf die definierten Layer bezieht. Die Layer müssen zu diesem Zeitpunkt bereits eingelesen sein, sonst gibt es eine Fehlermeldung.

Die ersten vier Zeilen des JavaScript-Codes im Beispiel speichern einfach nur ziemlich lange Objekt-Eigenschaften-Ketten in Variablen, da diese im weiteren Verlauf häufig notiert werden müssen. Danach folgen jeweils vier Anweisungen, und zwar je für den grünen Layer und für den gelben. Die Methode captureEvents() bewirkt, dass Anwenderaktionen überwacht und bei Eintritt gemeldet werden. Die Methode captureEvents() erwartet als Parameter einen Wert. Notieren Sie dazu nach dem Prinzip Event.WELCHER die Events, die überwacht werden sollen. Die gewünschten Events sind durch bitweises Oder (einfacher Vertikalstrich) zu trennen. Welche Events es neben denen im obigen Beispiel gibt, erfahren Sie in der Kapitel JavaScript-Objektreferenz beim Objekt Seite event.

Beim Eintritt von überwachten Ereignissen werden Funktionen aufgerufen. Beachten Sie dabei die etwas merkwürdige Syntax: mit einer Anweisung wie Gruentitel.onmousedown = StartGruen wird die selbstgeschriebene Funktion StartGruen() aufgerufen, die weiter unten im Script definiert ist. Beim Aufruf dürfen Sie in diesem Fall jedoch keine Klammern hinter dem Funktionsnamen notieren!

Verfolgen Sie nun mal im Beispiel den Fall, dass der Anwender auf die Titelleiste des grünen Layers klickt. Dann wird das Ereignis MOUSEDOWN für Gruentitel gemeldet. Für diesen Fall (onmousedown) wird die Funktion StartGruen aufgerufen. Innerhalb dieser Funktion wird wiederum überwacht, ob der Anwender die Maus bei gedrückter Maustaste bewegt. Wenn ja, wird dort nach dem gleichen Schema die Funktion ZiehGruen aufgerufen. Obwohl die Funktion keinen Parameter übergeben bekommt, erwartet sie einen - auch das gegen alle sonstige Regeln. Der erwartete Parameter ist aber kein "Wert" wie sonst üblich, sondern einfach ein Name für den aktuellen Event. Im Beispiel wurde der Name Ereignis gewählt. Unter dem vergebenen Namen lassen sich Eigenschaften des Event-Objekts ansprechen. Da innerhalb der Funktion ZiehGruen davon Gebrauch gemacht wird, ist ein solcher Name erforderlich. Aktiv ist die Funktion ZiehGruen solange, wie der Anwender die Maustaste bewegt und nicht loslässt. Während dieser Zeit werden "so oft wie möglich" die Eigenschaften PageX (aktuelle Mausposition von links) und PageY (aktuelle Mausposition von oben) von Ereignis abgefragt. Diese Werte werden dem betroffenen Layer dynamisch als neue Werte für die linke obere Ecke zugewiesen. So entsteht der Bewegungseffekt.

Wenn der Anwender die Maustaste loslässt, wird die Funktion ZiehGruen sofort verlassen. Da die Event-Überwachung ja noch aktiv ist, wird jetzt das Ereignis MOUSEUP gemeldet. Für diesen Fall wird die Funktion EndGruen aufgerufen. Diese Funktion enthält zwei Befehle zum "Aufräumen".

Wenn Sie sonst nichts weiter unternehmen würden, wäre der Layer nach dem ersten Bewegen nicht mehr bewegungsfähig. Damit er immer wieder bewegbar ist, tritt automatisch ein LOAD-Ereignis ein. Dieses wird mit onload abgefangen. Dabei wird die Funktion GruenReset aufgerufen. Diese Funktion startet die erneute Überwachung der Ereignisse.

Analog zu dem Handling für den grünen Layer wird mit dem Handling für den gelben Layer verfahren.

JavaScript 1.2 Netscape 4.0 Inline-Scripts bei Layern

Netscape bietet eine vereinfachte JavaScript-Syntax an, um Layer-Eigenschaften innerhalb eines Layers dynamisch zu ändern.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<style type="text/css">
layer { padding:5px; }
p.Verweis { font-size:14px; font-weight:bold; font-family:Arial; color:yellow; }
p.Text { font-size:14px; font-family:Arial; color:white; }
</style>
</head><body>
<layer class="Kopf" bgcolor="#000000" top="175" left="50" width="500" height="200"
clip="0,0,500,25" onmouseover="Zeigen()" onmouseout="Verstecken()">
<p class="Verweis">Was Sie schon immer wissen wollten über ...</p>
<p class="Text"><span style="color:red; font-size:64px">SECHS</span><br>
Es handelt sich dabei einfach um eine Zahl, die exakt ein halbes Dutzend bezeichnet.</p>
<script type="text/javascript">
function Zeigen () {
  clip.bottom = 200;
}

function Verstecken () {
  clip.bottom = 25;
}
</script>
</layer>
</body></html>

Erläuterung:

Im Beispiel wird ein Layer definiert. Mit dem clip-Attribut wird der Anzeigebereich des Layers jedoch zunächst beschnitten, und zwar so, dass gerade der erste Textabsatz sichtbar ist. Wenn der Anwender mit der Maus über den sichtbaren Layer-Bereich fährt, wird die JavaScript-Funktion Zeigen() aufgerufen. Diese Funktion verändert den Clip-Bereich des Layers so, dass er in ganzer Größe angezeigt wird. Wenn die Maus den Layer-Bereich wieder verlässt, wird die Funktion Verstecken() aufgerufen. Diese Funktion ändert den Clip-Bereich wieder auf den Anfangswert.

Wichtig ist bei dieser Form, dass der JavaScript-Bereich innerhalb des Layers definiert wird. Dann brauchen Sie sich nicht um die korrekte Adressierung des Layers mit Indexnummern oder Namen zu kümmern. Sie können einfach Anweisungen wie clip.bottom = [Wert] (wie im Beispiel) oder Eigenschaften wie top, left oder bgColor notieren, um Wirkungsweise und Aussehen des Layers zu verändern. Welche Eigenschaften Sie ändern können, entnehmen Sie der Referenz zum Objekt Seite layers.

nach oben
weiter | Seite Datenanbindung (nur Microsoft)
zurück | Seite Das ältere DHTML-Modell von Microsoft
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML Teil von DHTML-Modelle

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / DHTML-Modelle / Datenanbindung (nur Microsoft)

SELFHTML

Datenanbindung (nur Microsoft)
Informationsseite

nach unten Allgemeines zur Datenanbindung
nach unten Beispiel: Datei dynamisch in Tabelle einbinden
nach unten Beispiel: Daten durchsuchbar machen
nach unten HTML-Elemente für die Anzeige von externen Daten
nach unten Datenmodell: Tabular Data Control (TDC)
nach unten Datenmodell: Remote Data Service (RDS)
nach unten Datenmodell: JDBC DataSource Applet
nach unten Datenmodell: XML Data Source
nach unten Datenmodell: MSHTML Data Source

nach unten

MS JScript MS IE 4.0 Allgemeines zur Datenanbindung

Der Internet Explorer ab Version 4.x erlaubt es, in kontrollierter Form Daten aus einer externen Datenquelle zu holen und in HTML-Elementen dynamisch anzuzeigen. So ist beispielsweise eine Tabelle denkbar, in der sich der Anwender bei jedem Klick auf einen entsprechenden Button die Bundesliga-Endtabellen der Spielsaisons von 1960 bis heute anzeigen lassen kann. Bei jedem Klick werden aus einer externen Datei eine Reihe von Daten ausgelesen und dynamisch in die Anzeigetabelle übernommen.

Microsoft hat das Konzept der Datenanbindung sehr flexibel ausgelegt. Es gibt diverse Möglichkeiten, auf externe Datenquellen zuzugreifen. Der Zugriff auf eine einfache Textdatei ist nur eine davon. Es besteht ebenso die Möglichkeit, etwa über die Datenbankabfragesprache SQL auf eine Datenbank zuzugreifen, die SQL-Befehle verarbeiten kann. Für die verschiedenen Möglichkeiten der Datenanbindung gibt es verschiedene Datenmodelle. Für jedes der Datenmodelle gibt es ein bestimmtes ActiveX-Control oder ein Java-Applet, das Sie in Ihrer HTML-Datei ansprechen müssen, um die Datenanbindung damit zu realisieren. Die Datenmodelle und deren Einbindung in HTML werden auf dieser Seite vorgestellt.

Die Vorteile der Datenanbindung liegen auf der Hand: Daten können mit einer dafür geeigneten Anwendung gepflegt und gespeichert werden. Eine HTML-Datei kann auf immer aktuelle Daten zugreifen, ohne selbst geändert werden zu müssen. Für das "Holen" der Daten gibt es kein vorgeschriebenes Protokoll. Die Datenanbindung funktioniert also auf allen Umgebungen, ob auf einem WWW-Server, lokal auf einer PC-Festplatte oder auf einer CD-ROM (zumindest auf das einfachste Datenmodell trifft dies zu). Es ist kein zusätzliches CGI-Script erforderlich, das als Vermittler zwischen HTML-Datei und Datenbestand für jede Interaktion zwischen Anwender und Datenbank immer wieder aufgerufen werden muss. Das Know How hat der Browser, und die Steuerung der Datenanbindung wird direkt in der HTML-Datei notiert. Durch dynamisches Austauschen der Inhalte von HTML-Elementen, in denen die Daten angezeigt werden, ist kein neuer Aufbau der WWW-Seite erforderlich.

Aus heutiger Sicht muss das Modell der client-seitigen Datenanbindung, das Microsoft mit dem Internet Explorer 4.0 eingeführt hat, jedoch kritisch betrachtet werden. Der Grund ist einerseits, dass es auf extrem proprietären Konzepten beruht, vor allem was die Einbindung der allgemein unbeliebten ActiveX-Controls betrifft. Und andererseits haben sich Web-Server mittlerweile so stark durchgesetzt, dass es in in den meisten Fällen - auch lokal - sinnvoller ist, server-seitige Kapitel CGI-Scripts zum Handling der Datenverarbeitung einzusetzen.

Hinweis:

Die Erläuterungen zu den Datenmodellen weiter unten auf dieser Seite sind zum Teil sehr technisch. Das ist leider nicht zu ändern, da die Materie ziemlich komplex ist. Die Erläuterungen zu den Datenmodellen richten sich auch nur an Spezialisten, die wissen, was mit den entsprechenden Begriffen anzufangen ist.

MS JScript MS IE 4.0 Beispiel: Datei dynamisch in Tabelle einbinden

Die hier beschriebene Vorgehensweise erläutert, wie Sie in einer Tabelle einzelne Datensätze aus einer externen Textdatei anzeigen können. Dabei wird das nach unten Datenmodell: Tabular Data Control (TDC) verwendet. Mit Hilfe von Buttons kann der Anwender den nächsten oder vorhergehenden Datensatz in die Tabelle laden.

Beispiel Teil 1 - externe Datei adressen.txt mit Daten:

Name|Vorname|Strasse|PLZ|Ort|Tel|EMail
Berger|Hans|Pfisterstr.11|38487|Grubenhausen|04987-4445631|berger@example.org
Heidenfroh|Martina|Mittelweg 123|43985|Hatzenau|04583-2398474|mh@example.org
Rauhbein|Eberhard|Traumstr.13|56097|Höllenbachhausen|068347-582374|-
Truthahn|Gerlinde|Aufplatz 1|93722|Sündenstadt|032987-385750|gerlinde@example.org

Erläuterung:

Die externe Datei ist in diesem Beispiel eine einfache Textdatei, z.B. eine Datei mit dem Namen adressen.txt. Die Datei ist so aufgebaut, dass jede Zeile einen Datensatz darstellt. Die einzelnen Felder eines Datensatzes werden in diesem Beispiel durch das Zeichen "|" getrennt. Es könnte auch ein anderes Zeichen sein. Das Zeichen "|" wurde hier gewählt, weil es sehr selten ist und in den Daten selbst nicht vorkommt. In der ersten Zeile der Datei stehen keine Daten, sondern Feldnamen. Der dritte Feldname lautet beispielsweise Strasse. In den eigentlichen Datenzeilen darunter stehen dann in entsprechender Reihenfolge die Daten. So hat das dritte Feld der ersten Datenzeile den Wert Pfisterstr.11. Dies ist also ein Wert für den in der ersten Zeile an dritter Stelle vergebenen Feldnamen Strasse.

Textdateien dieser Art sind nicht besonders komfortabel, wenn man sie selbst in einem Texteditor bearbeiten will. Doch solche Textdateien lassen sich mit fast allen Tabellenkalkulations- und Datenbankprogrammen erzeugen. Meist ist dafür der Datentyp "kommabegrenzt" ("comma delimited") mit der Standard-Dateiendung .csv vorgesehen. Bessere Programme erlauben es dabei auch, ein selbst definierbares Feldbegrenzerzeichen zu vergeben.

Beispiel Teil 2 - HTML-Datei mit Datenzugriff:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head>
<body>
<object id="Adressen" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
 <param name="DataURL" value="adressen.txt">
 <param name="UseHeader" value="true">
 <param name="FieldDelim" value="|">
</object>
<form action="">
<table id="Anzeigetabelle" datasrc="#Adressen" datapagesize="1" width="100%" border="1">
<colgroup><col width="200"><col></colgroup>
<tr>
<td bgcolor="#EEEEEE"><b>Adressen</b></td>
<td bgcolor="#EEEEEE" align="right">
<input type="button" value=" &lt; " onclick="document.all.Anzeigetabelle.previousPage();">
<input type="button" value=" &gt; " onclick="document.all.Anzeigetabelle.nextPage();">
</td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Name:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Name"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Vorname:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Vorname"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Straße:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Strasse"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Postleitzahl:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="PLZ"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Wohnort:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Ort"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Telefon:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Tel"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>E-Mail:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="EMail"></span></td>
</tr></table></form>
</body>
</html>

Erläuterung:

Um eine externe Datenquelle in einer HTML-Datei nutzen zu können, müssen Sie zunächst die Quelle und diverse Angaben zu deren Aufbau notieren. Dazu brauchen Sie das <object>-Tag. In dem einleitenden <object>-Tag sind zwei Attribute erforderlich: Mit dem id-Attribut vergeben Sie einen Namen, unter dem Sie später auf die Daten zugreifen können. Der Name sollte passend sein, im obigen Beispiel etwa "Adressen". Als zweiten Parameter müssen Sie das ActiveX-Control referenzieren, dass den gesamten Zugriff auf die externe Datei abwickelt. Bei einfachen Textdateien mit zeilenweisen Datensätzen müssen Sie dabei immer die Angabe classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" notieren. Das ActiveX-Control mit dieser Identifikationsnummer ist im Lieferumfang des Internet Explorers ab Version 4.x enthalten - Sie brauchen sich um nichts weiter zu kümmern. Genau dabei liegt allerdings der Knackpunkt des gesamten Konzepts: ohne solche ActiveX-Controls läuft nichts.

Innerhalb des <object>-Tags notieren Sie Angaben zu Ort und Beschaffenheit der externen Datei.
Mit <param name="DataURL" können Sie die gewünschte Datei ansprechen. Im value-Attribut notieren Sie den Dateinamen. Wenn sich die Datei im gleichen Verzeichnis befindet, genügt der einfache Dateiname. Ansonsten gelten die gleichen Regeln wie bei Kapitel Verweisen in HTML.
Mit <param name="UseHeader" value="true"> weisen Sie den Browser an, die erste Zeile der externen Datei nicht als Datenzeile zu interpretieren, sondern als Zeile für die Definition der Feldnamen.
Mit <param name="FieldDelim" geben Sie an, welches das Feldtrennzeichen sein soll. Im Beispiel ist dies das Zeichen "|".

Damit sind alle Voraussetzungen geschaffen, um die Daten aus der externen Datei dynamisch in HTML anzuzeigen. Die Anzeige der Daten erfolgt in einer Tabelle. Das einleitende <table>-Tag schafft die nötigen Voraussetzungen, um die Daten in kontrollierter Form anzuzeigen. Zunächst wird in der Tabelle mit dem id-Attribut ein Name vergeben (im Beispiel: Anzeigetabelle). Dieser Name wird bei den Buttons benötigt, die innerhalb der Tabelle das Blättern innerhalb der Datensätze ermöglichen.

Die nächste Angabe im <table>-Tag ist das datasrc-Attribut (data source, Datenquelle). Damit nehmen Sie Bezug auf die externe Datendatei. An dieser Stelle dürfen Sie jedoch nicht die Datendatei selbst angeben, sondern Sie müssen denjenigen Namen angeben, den Sie zuvor im <object>-Tag im id-Attribut vergeben haben. Und zwar mit einem vorangestellten Gatterzeichen #. Dadurch stellen Sie den Bezug zwischen Tabelle und Datenquelle her. Es werden dann alle Parameter berücksichtigt, die Sie innerhalb des <object>-Tags angegeben haben.

Ebenfalls wichtig das Attribut datapagesize (Datenseitengröße) im <table>-Tag. Damit geben Sie an, wie viele Datensätze aus der externen Datei gleichzeitig angezeigt werden sollen. Wenn Sie diese Angabe weglassen, macht der Internet Explorer die Tabelle automatisch so lang, dass alle Datensätze auf einmal darin dargestellt werden. Im obigen Beispiel wird datapagesize="1" angegeben. Dadurch wird immer genau ein Datensatz angezeigt.

Innerhalb der Tabelle können Sie erkennen, wie ein Datensatz aus der externen Datenquelle darin angezeigt wird. Die Tabelle selbst können Sie nach Ihren Wünschen frei gestalten. Wichtig ist nur zu wissen, wie der Bezug zu einem Datensatz der externen Datei hergestellt wird. Im obigen Beispiel geschieht dies innerhalb entsprechender Tabellenzellen mit Hilfe des <span>-Tags. Mit einem, Befehl wie <span datafld="PLZ"></span> weisen Sie den Browser an, in der betreffenden Tabellenzelle den aktuellen Inhalt des Feldes "PLZ" aus der externen Datenquelle anzuzeigen (datafld = data field = Datenfeld). Dabei muss der Wert des Attributs datafld mit dem Feldnamen übereinstimmen, den Sie in der ersten Zeile der externen Datendatei vergeben haben. Beachten Sie dabei auch die exakte Schreibweise.

Neben dem Attribut datafld können Sie in so einem Datenanzeigebereich auch noch das Attribut dataformatas (formatiere Daten als) notieren. Im obigen Beispiel wird davon kein Gebrauch gemacht. Benutzen Sie dataformatas, wenn die Daten in der externen Datei selbst HTML-Elemente enthalten. Mit dataformatas="html" erzwingen Sie dann, dass die Elemente aus der externen Datei als HTML-Elemente interpretiert werden.

Da im obigen Beispiel mit datapagesize="1" festgelegt wurde, dass immer nur ein Datensatz angezeigt wird, erscheint in der Tabelle zunächst der Inhalt der ersten Datenzeile der externen Datei. Natürlich soll der Anwender nun in den Datensätzen blättern können. Dazu werden Buttons zum Vor- und Zurückblättern definiert. Im Beispiel befinden sich diese Buttons in der ersten Tabellenzeile. Sie könnten aber auch an einer anderen Stelle stehen.

Mit <input type=button value=" &lt; " onclick="document.all.Anzeigetabelle.previousPage();"> wird ein Button definiert, bei dessen Anklicken der vorhergehende Datensatz aufgerufen wird. Mit document.all.Anzeigetabelle greifen Sie dabei auf die Tabelle zu, in der die Daten angezeigt werden (Anzeigetabelle ist dabei der Name, der in der Tabelle mit dem id-Attribut vergeben wurde). Mit <input type="button" value=" &gt; " onclick="document.all.Anzeigetabelle.nextPage();"> wird der Button definiert, der zum nächsten Datensatz springt. Beachten Sie, dass Sie nicht kontrollieren müssen, ob der Anwender gerade den ersten oder letzten Datensatz anzeigt. Es gibt keine Fehlermeldungen, wenn der Anwender versucht, einen nicht vorhandenen Datensatz aufzurufen. Der Button hat dann einfach keine Wirkung.

MS JScript MS IE 4.0 Beispiel: Daten durchsuchbar machen

In diesem Beispiel wird gezeigt, wie Sie dem Anwender ermöglichen können, mit Hilfe eines Suchbegriffes nur diejenigen Datensätze anzuzeigen, in denen der gesuchte Begriff vorkommt. Das Beispiel zeigt auch, wie Sie mit Hilfe von Scripts auf die HTML-Elemente zur Datenanbindung zugreifen können.

Beispiel Teil 1 - externe Datei woerterbuch.txt mit Daten:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (62 KByte)

Deutsch;Englisch;Franzoesisch;Italienisch;Spanisch
Rechner;computer;ordinateur;computer, calcolatore;ordenador
Maschine;machine (s);machine;macchina;máquina
Personalcomputer;personal computer;ordinateur personnel (m);computer personale;ordenador personal
arbeitender Rechner;active computer;ordinateur active;computer attivo;ordenador activado
... usw. ...

Erläuterung:

Die Datendatei dieses Beispiels zeigt ein mehrsprachiges Fachwörterbuch. In der ersten Zeile werden die Sprachen definiert. Unterhalb davon stehen die Wörter in den jeweiligen Sprachen. Die Einträge zu den Sprachen sind durch Semikola (;) getrennt. Wenn in einer Sprache mehrere Wörter in Frage kommen, werden diese durch Kommata getrennt, so wie in der zweiten Zeile beim italienischen Wort für Rechner: computer, calcolatore.

Beispiel Teil 2 - HTML-Datei mit Datenzugriff:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
function Suchen () {
  var Datensaetze = 1000;
  document.all.Anzeigetabelle.style.display = "none";
  var Suchausdruck = "";
  var Suchbegriffe = 0;
  if (document.Eingabe.SuchDeu.value != "") {
    Suchausdruck = Suchausdruck + "Deutsch = " + document.Eingabe.SuchDeu.value;
    Suchbegriffe++;
  }
  if (document.Eingabe.SuchEng.value != "") {
    if (Suchbegriffe > 0) {
      Suchausdruck = Suchausdruck + " & Englisch = " + document.Eingabe.SuchEng.value;
    } else {
      Suchausdruck = Suchausdruck + "Englisch = " + document.Eingabe.SuchEng.value;
    }
    Suchbegriffe++;
  }
  if (document.Eingabe.SuchFra.value != "") {
    if (Suchbegriffe > 0) {
      Suchausdruck = Suchausdruck + " & Franzoesisch = " + document.Eingabe.SuchFra.value;
    } else {
      Suchausdruck = Suchausdruck + "Franzoesisch = " + document.Eingabe.SuchFra.value;
    }
    Suchbegriffe++;
  }
  if (document.Eingabe.SuchIta.value != "") {
    if (Suchbegriffe > 0) {
      Suchausdruck = Suchausdruck + " & Italienisch = " + document.Eingabe.SuchIta.value;
    } else {
      Suchausdruck = Suchausdruck + "Italienisch = " + document.Eingabe.SuchIta.value;
    }
    Suchbegriffe++;
  }
  if (document.Eingabe.SuchSpa.value != "") {
    if (Suchbegriffe > 0) {
      Suchausdruck = Suchausdruck + " & Spanisch = " + document.Eingabe.SuchSpa.value;
    } else {
      Suchausdruck = Suchausdruck + "Spanisch = " + document.Eingabe.SuchSpa.value;
    }
    Suchbegriffe++;
  }
  document.all.Begriffe.object.Filter = Suchausdruck;
  document.all.Begriffe.Reset();
  document.all.Anzeigetabelle.dataSrc = "#Begriffe";
  if (document.all.Begriffe.recordset.recordCount < Datensaetze) {
    document.all.Anzeigetabelle.dataPageSize = Begriffe.recordset.recordCount;
    document.all.Treffer.innerText = Begriffe.recordset.recordCount + " Suchtreffer!";
    document.all.Anzeigetabelle.style.display = "block";
  } else {
    document.all.Treffer.innerText = "0 Suchtreffer!";
  }
}
</script>
</head>
<body>
<object id="Begriffe" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
 <param name="DataURL" value="woerterbuch.txt">
 <param name="UseHeader" value="true">
 <param name="Filter" value="">
 <param name="FieldDelim" value=";">
</object>

<p>Die durchsuchbare Datenbank enthält 1000 Einträge. Suchen Sie nach
Begriffen in einer oder mehreren Sprachen. Bei der Suche in mehreren Sprachen
werden die Eingaben logisch durch UND verknüpft. Sie dürfen auch das
Wildcard-Zeichen <b>*</b> für Teilausdrücke verwenden. Suchen Sie z.B. mal im Feld
(Deutsch) nach <b>Arbeits*</b> oder im Feld (Italienisch) nach
<b>*ore</b> oder im Feld (Englisch) nach <b>*computer</b>.</p>

<form name="Eingabe" action="">
Suche nach:<br>
<input name="SuchDeu" type="text" width="40"> (Deutsch)<br>
<input name="SuchEng" type="text" width="40"> (Englisch)<br>
<input name="SuchFra" type="text" width="40"> (Franzoesisch)<br>
<input name="SuchIta" type="text" width="40"> (Italienisch)<br>
<input name="SuchSpa" type="text" width="40"> (Spanisch)<br>
<input type="button" style="width:150px; height:25px;" value="Suche starten" onclick="Suchen()">
</form>

<table border="1" cellpadding="1" cellspacing="0"><tr><td>
<table width="100%">
<tr>
<td valign="top" colspan="5">
<span id="Treffer" style="color:#0000CC; font-weight:bold;"> </span>
</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Deutsch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Englisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Französisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Italienisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Spanisch:</b></td>
</tr>
</table>
<table id="Anzeigetabelle" style="display:none" width="100%">
<tr>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Deutsch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Englisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Franzoesisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Italienisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Spanisch"></span></td>
</tr>
</table>
</td></tr></table>
</body>
</html>

Erläuterung:

Das Beispiel zeigt die vollständige HTML-Datei zur Realisierung einer durchsuchbaren Datenbank. Innerhalb der HTML-Datei wird wie im nach oben Beispiel: Datei dynamisch in Tabelle einbinden wieder das <object>-Tag notiert, um die Verbindung zu der externen Datendatei herzustellen. Es wird jedoch ein neuer Parameter angegeben:
<param name="Filter" value="">
Mit dem Parameter Filter können Sie die Datensätze, die aus der Datendatei "geholt" werden, begrenzen. Dazu können Sie im value-Attribut Einschränkungskriterien angeben. Bei der Objektdefinition im obigen Beispiel wird value="" notiert. Das bedeutet, es gibt keine Einschränkungen. Alle Datensätze werden gefunden.

In dem längeren Script, das im Kopf der HTML-Datei steht, wird der Wert für Filter dynamisch verändert. Dadurch wird die Anzeige auf bestimmte Datensätze eingeschränkt, nämlich solche, die den Filterkriterien entsprechen.

Die Kriterien für den Filter soll der Anwender durch seine Suchanfrage selbst bestimmen können. Im obigen Beispiel wird dazu unterhalb des <object>-Tags ein Formular definiert (<form name="Eingabe" action="">). Das Formular hat fünf Eingabefelder, eines für jede der fünf Sprachen des mehrsprachigen Wörterbuchs. Mit einem anklickbaren Button kann der Anwender die Suche abschicken. Beim Anklicken des Buttons wird die Funktion Suchen() aufgerufen, die in dem JScript-Bereich im Dateikopf definiert ist (onclick="Suchen()").

Innerhalb der Funktion Suchen() wird zunächst eine Variable Datensaetze mit einem Wert vorbelegt (1000). Das empfiehlt sich bei größeren Datenbeständen. Denn per Voreinstellung liefert der Internet Explorer, wenn er keine Datensätze findet, die dem Suchkriterium entsprechen, alle Datensätze zurück. Angenommen, Sie haben 5000 Datensätze. Dann würde eine Tabelle mit 5000 Zeilen angezeigt. Da dies im Aufbau ziemlich lange dauert, ist eine Begrenzung sinnvoll.

Die Variable Suchausdruck soll die Anwenderkriterien zum Durchsuchen des Datenbestandes aufnehmen. Dabei ist es erforderlich, die Angaben aus den Formularfeldern in eine Zeichenkette zu konvertieren, die den Regeln für den Parameter Filter entsprechen.

Folgende wichtige Regeln gelten für Werte, die bei Filter erlaubt sind (diese Regeln gelten sowohl bei Wertzuweisungen innerhalb des <object>-Tags als auch bei dynamischen Wertzuweisungen innerhalb von Scripts):
Mit Feldname = Wert werden nur Datensätze gefunden, bei denen das Feld Feldname exakt den Wert Wert enthält und nicht mehr und nicht weniger. Bei Name = Meyer werden also nur Meyer's gefunden, keine Meyerbohm's.
Mit Feldname <> Wert werden Datensätze gefunden, bei denen der Wert Wert im Feld Feldname vorkommt - er kann auch exakt damit übereinstimmen. Bei Name <> Meyer werden also Meyer's und Meyerbohm's gefunden.
Mit Feldname > Wert werden Datensätze gefunden, bei denen der Wert von Feldname größer ist als Wert. Bei Name > Y werden also nur Namen gefunden, die mit Z anfangen.
Mit Feldname >= Wert werden Datensätze gefunden, bei denen der Wert von Feldname größer oder gleich ist im Vergleich zu Wert. Bei Name >= Y werden also nur Namen gefunden, die mit Y oder Z anfangen.
Mit Feldname < Wert werden Datensätze gefunden, bei denen der Wert von Feldname kleiner ist als Wert. Bei Name < D werden also nur Namen gefunden, die mit A,B oder C anfangen.
Mit Feldname <= Wert werden Datensätze gefunden, bei denen der Wert von Feldname kleiner oder gleich ist im Vergleich zu Wert. Bei Name <= D werden also Namen gefunden, die mit A,B,C oder D anfangen.
An jeder Stelle ist ein Platzhalterzeichen erlaubt. Dies ist ein Sternzeichen (*). Es steht für kein, eines oder beliebig viele Zeichen.
Sie können auch zwei oder mehrere solcher einfachen Ausdrücke mit den Zeichen & (für UND) oder | (für inklusives ODER) logisch verknüpfen. Wenn Sie mehrere Ausdrücke verknüpfen und dabei sowohl UND also auch ODER verwenden, müssen Sie Klammern verwenden, um eine eindeutige Bewertung des gesamten Kriteriums sicherzustellen. Ein komplexer Ausdruck dieser Art ist etwa Name > M & PLZ = 8*.

Im obigen Script wird mit diversen if-Abfragen aus den Eingabefeldern des Formulars ein gültiger Zuweisungswert für Filter konstruiert. Dabei wird nur die einfachste Bedingung mit dem Istgleichzeiten eingesetzt. Da der Anwender auch selbst das Sternzeichen als Platzhalterzeichen in einem Eingabefeld eingeben kann, genügt diese einfache Suche für viele Fälle. Wenn Sie dem Anwender komplexere Suchabfragen ermöglichen wollen, müssen Sie diesen Teil des Scripts entsprechend aufwendiger gestalten.

Im unteren Teil der Funktion Suchen() steht dann der Befehl:
document.all.Begriffe.object.Filter = Suchausdruck;
Damit wird dem Parameter Filter des <object>-Tags der Suchausdruck zugewiesen, der zuvor ermittelt und in der Variablen Suchausdruck gespeichert wurde.

Der nächste Befehl ist ebenfalls von entscheidender Bedeutung:
document.all.Begriffe.Reset();
Damit veranlassen Sie den Browser, die Anzahl der anzuzeigenden Datensätze neu zu ermitteln. Da mittlerweile ein Filter bestimmt wurde, findet der Browser nun nur noch Datensätze, die den Bedingungen des Filters entsprechen.

Auf die übrigen Anweisungen des Scripts und die Elemente in der HTML-Datei wird hier nicht näher eingegangen. Es handelt sich dabei um einfaches dynamisches HTML nach den Regeln des Internet Explorers 4.x.

MS JScript MS IE 4.0 HTML-Elemente für die Anzeige von externen Daten

Im nach oben Beispiel: Datei dynamisch in Tabelle einbinden werden die externen Daten jeweils in einem span-Element angezeigt. Es gibt eine Reihe weiterer HTML-Elemente, in denen Sie Daten aus Datenfeldern externer Datenquellen anzeigen können. In anderen als diesen Elementen ist die Anzeige externer Daten nicht möglich. Folgende HTML-Elemente sind erlaubt:

Verweise mit <a>...</a>:

Angenommen, Sie haben eine externe Textdatei verweis.txt mit folgenden Zeilen:
URL,Verweistext
http://de.yahoo.com/,Yahoo Suchdienst
Diese Datei können Sie mit dem object-Element in HTML wie folgt einbinden:
<object id="Verweis" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="verweis.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>
Danach können Sie folgenden Verweis konstruieren:
<a datasrc="#Verweis" datafld="URL"><span datafld="Verweistext" datasrc="#Verweis"></span></a>
Indem Sie <a datafld="..."> notieren, wird der Inhalt, den das Datenfeld liefert, als Wert für das Attribut href bewertet (im Beispiel liefert das Feld "URL" diese Angaben). Innerhalb des Verweises wird dann mit Hilfe des span-Elements das andere Feld "geholt", nämlich der Verweistext. Solche Verweise machen beispielsweise Sinn, wenn Sie den gleichen Verweis an vielen verschiedenen Stellen auf Ihren Web-Seiten nutzen. Verweisziel und Verweistext sind dann zentral gespeichert und brauchen bei Änderungen nur in der kleinen Textdatei einmal geändert werden. Alle entsprechenden HTML-Verweise sind damit automatisch aktualisiert.

Buttons mit <button>...</button>:

Angenommen, Sie haben eine externe Textdatei daten.txt mit folgendem Aufbau und Beispieleinträgen:
Zeile,Text
1,Das ist ein Test
2,mit einem Button
3,spannend - was?
Diese Datei können Sie mit dem object-Element in HTML wie folgt einbinden:
<object id="Daten" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="daten.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>
Danach können Sie beispielsweise folgende Tabelle konstruieren:
<table id="Anzeige" datasrc="#Daten" datapagesize="1"><tr><td>
<form action=""><button datafld="Text" onclick="document.all.Anzeige.nextPage()"></button></form>
</td></tr></table>
Damit springt der Anwender bei jedem Klick auf den Button einen Datensatz weiter, und die Button-Beschriftung nimmt den aktuellen Wert des Datenfeldes Text an.

Bereiche mit <div>...</div>:

Mit diesem HTML-Tag können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so wie es im nach oben Beispiel: Datei dynamisch in Tabelle einbinden mit dem span-Element gemacht wird. Der Unterschied zwischen <div>...</div> und <span>...</span> ist, dass das div-Element einen eigenen Anzeigeblock erzeugt, das span-Element dagegen nicht.

Grafiken mit <img>:

Angenommen, Sie wollen eine kleine Dia-Show programmieren. Dazu können Sie eine Textdatei daten.txt anlegen, die etwa folgenden Aufbau hat:
Nummer,Bild
1,meinhaus.gif
2,meinboot.gif
3,meinauto.gif
4,undich.gif
Diese Datei können Sie mit dem object-Element in HTML wie folgt einbinden:
<object id="Daten" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="daten.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>
Danach können Sie beispielsweise folgende Tabelle konstruieren:
<table "id=Anzeige" datasrc="#Daten" datapagesize="1"><tr>
<td>
Bild <span datafld="Nummer"></span><br> <input type=button value=" &lt; " onclick="document.all.Anzeige.previousPage();">
<input type=button value=" &gt; " onclick="document.all.Anzeige.nextPage();">
</td><td>
<img datafld="Bild">
</td></tr></table>
Damit kann der Anwender mit den Blätterbuttons die Bilder durchblättern.

Frames mit <frame>:

Angenommen, Sie haben eine externe Textdatei besteseite.txt mit folgenden Zeilen:
BesteSeite
http://de.selfhtml.org/
Nun können Sie folgende HTML-Datei mit einem Frameset konstruieren:
<html><head>
<object id="UrlDerWoche" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="besteseite.txt">
<param name="UseHeader" value="true">
</object></head>
<frameset rows="100,*">
 <frame src="meine.htm">
 <frame datasrc="#UrlDerWoche" datafld="BesteSeite">
</frameset>
</html>
Auf diese Weise können Sie in einem Frame-Fenster eine Seite anzeigen, deren Zieladresse Sie in der separaten Textdatei pflegen. Wichtig ist, dass Sie das object-Element genau an der Stelle platzieren wie im Beispiel.

Eingebettete Frames mit <iframe>:

Siehe das Beispiel bei Frames. Der Unterschied ist, dass Sie das object-Element in einer normalen HTML-Datei platzieren. Mit einem Befehl wie:
 <iframe datasrc="#UrlDerWoche" datafld="BesteSeite"></iframe>
können Sie dann in der gleichen HTML-Datei in einer eingebetteten Fensterbox den Inhalt der Seite anzeigen, die in der Textdatei angegeben ist.

Labels mit <label>...</label>:

Das label-Element, das neu ist in HTML 4.0, erlaubt die Beschriftung eines Formularfeldes. Im Rahmen der Datenanbindung können Sie dieses HTML-Tag benutzen, wenn Sie die externen Daten in Formularfeldern ausgeben. Sie können dann dem label-Element, das Sie etwa einem Eingabefeld zuordnen, dynamisch den Feldnamen zuweisen, der in der externen Datendatei für dieses Feld definiert ist. Wenn sich der Feldname in der Datendatei dann ändert, wird er bei der Anzeige in der HTML-Datei automatisch aktualisiert. Beispiel:
<label for="Vorname" datafld="prename"></label>
Dadurch wird dem Inhalt des label-Elements eines Formularfeldes der Feldname prename zugewiesen, der in der Datenbank definiert ist.

Lauftexte mit <marquee>...</marquee>:

Mit diesem HTML-Element, das mittlerweile allerdings als Musterbeispiel proprietärer HTML-Erweiterungen verschrieen ist, können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so wie es im nach oben Beispiel: Datei dynamisch in Tabelle einbinden mit dem span-Element gemacht wird. Der Unterschied zwischen <marquee>...</marquee> und <span>...</span> ist, dass das marquee-Element einen Lauftext erzeugt, das span-Element dagegen nicht.

Bereiche mit <span>...</span>:

Mit diesem HTML-Tag können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so wie es im nach oben Beispiel: Datei dynamisch in Tabelle einbinden.

Formularfelder mit <input>:

Mit diesem HTML-Element können Sie beispielsweise innerhalb einer Tabelle externe Daten in editierbaren Formularfeldern ausgeben. Das ist besonders dann interessant, wenn geänderte Daten auch tatsächlich in die Datenquelle zurückgeschrieben werden können. Bei einfachen Textdateien ist das derzeit nicht möglich, wohl aber beim nach unten Datenmodell: Remote Data Service (RDS) und beim nach unten Datenmodell: JDBC DataSource Applet.
Die Einbindung in HTML erfolgt ähnlich wie im nach oben Beispiel: Datei dynamisch in Tabelle einbinden, mit dem Unterschied, dass Sie die Regeln zum Einbinden des gewünschten Datenmodells beachten müssen. Notieren Sie im einleitenden <table>-Tag der Tabelle, in der Sie die Datensätze anzeigen, möglichst die Angabe datapagesize="1". Innerhalb der Tabellenzelle, in der Sie externe Daten auf diese Weise anzeigen wollen, können Sie dann notieren (angenommene Beispiele):
<input type="text" datafld="Vorname">
oder:
<input type="radio" name="Kunde" value="Bereits Kunde" datafld="BereitsKunde">
oder:
<input type="checkbox" name="Zahlweise" value="Mastercard" datafld="Zahlungsweise">
Datenfelder, die in Eingabefeldern vom Typ <input type="text"> angezeigt werden, können normale Texte sein, wie etwa ein Name. Radio-Buttons und Checkboxen stellen dagegen andere Anforderungen. Ein Radio-Button wird bei der Anzeige dann aktiviert, wenn der aktuelle Feldinhalt in der Datenbank mit dem Wert des Attributs value übereinstimmt. Eine Checkbox wird dann markiert, wenn der betreffende Feldinhalt in der Datenbank 1, true oder einen beliebigen Inhalt mit mehr als einem Zeichen enthält. Wenn der Inhalt 0, false oder leer ist, wird die Checkbox nicht markiert.

Formularfelder mit <select>:

Dabei gelten die gleichen Bedingungen wie bei Formularfeldern vom Typ input. Wenn der Wert eines aktuellen Eintrags in der Datenbank mit einem der Werte übereinstimmt, die in der value-Angabe bei einem option-Element innerhalb der Auswahlliste definiert sind, ist diese Auswahl selektiert. Interessant ist diese Ausgabemöglichkeit von externen Daten wie bei anderen Formularfeldern nur, wenn auch ein Zurückschreiben geänderter Daten möglich ist. Bei Auswahllisten etwa kann ein neuer ausgewählter Wert als neuer Feldinhalt gespeichert werden. Der Internet Explorer unterstützt dabei nur die einfache Auswahl, Mehrfachauswahl nicht.

Andere Objekte mit <object>...</object>:

Mit dem object-Element können Sie genau so arbeiten wie mit dem img-Element. Der Unterschied ist, dass Sie beim img-Element auf Grafiken beschränkt sind, während Sie mit dem object-Element beliebige Multimedia-Dateien oder ActiveX-Controls einbinden können. So können Sie, analog zu dem Beispiel beim img-Element, anstelle einer "Dia-Show" eine "Musik-Show" programmieren, die zum Beispiel aus MIDI-Dateien besteht.
In der externen Textdatei notieren Sie die gewünschten MIDI-Dateien, und bei der Einbindung in HTML können Sie dann anstelle der Datenanbindung mit img so etwas notieren wie:
<object datafld="Musik" width="0" height="0"></object>
(wobei "Musik" in der Textdatei mit den Daten als Feldüberschrift notiert sein muss).

Java-Applets mit <applet>...</applet>:

Sie können das Feature der Datenanbindung nutzen, um einen Parameter eines Java-Applets aus einer externen Datenquelle zu versorgen. Beispiel:
<applet code="verzerr.class">
 <param name="bild" datasrc="#aktuell" datafld="b_gates_bild">
</applet>

MS JScript MS IE 4.0 Datenmodell: Tabular Data Control (TDC)

Dies ist das Datenmodell, wenn die externe Datenquelle eine einfache Textdatei ist, die in jeder Zeile einen Datensatz enthält, und bei der die einzelnen Datenfelder der Datensätze durch ein Begrenzerzeichen, zum Beispiel ein Komma, markiert sind. Geeignet ist dieses Datenmodell für kleinere Datenbestände mit bis zu ein paar tausend Datensätzen. Ein vollständiges Beispiel dafür finden Sie weiter oben im Abschnitt nach oben Beispiel: Datei dynamisch in Tabelle einbinden. Um eine solche Datenquelle an eine HTML-Datei anzubinden, müssen Sie folgendes Objekt in der HTML-Datei notieren:

Schema zur Einbindung in HTML:

<object id="Objektname" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
 <param name= value=>
 <!-- usw. weitere Parameter -->
</object>

Erläuterung:

Um solche Daten einzubinden, verwenden Sie das im Internet Explorer 4.x eingebaute ActiveX-Control mit der ID 333C7BC4-460F-11D0-BC04-0080C7055A83. Innerhalb des <object>-Tags notieren Sie verschiedene Parameter, die für die Datenpräsentation wichtig sind. Folgende Parameter sind erlaubt:

Notation | Bedeutung
<param name="AppendData" value=> | Mit diesem Parameter können Sie angeben, ob in der Ausgabetabelle beim Blättern für jedes neue Datensatz-Set (entsprechend der Größe von datapagesize die vorhandenen Tabellenzellen überschrieben werden sollen, oder ob neue Tabellenzellen angehängt werden sollen. Mit value=true erzwingen Sie das Anhängen von Daten. Per Voreinstellung werden die vorhandenen Tabellenzellen überschrieben.
<param name="CaseSensitive" value=> | Mit diesem Parameter können Sie angeben, ob bei Vergleichen von Anwendereingaben mit Daten aus der Datenquelle Groß-/Kleinschreibung unterschieden werden soll. Nur interessant bei der Weiterverarbeitung von Daten mit Scripts. Per Voreinstellung wird Groß-/Kleinschreibung unterschieden. Mit value="false" können Sie die Fallunterscheidung ausschalten.
<param name="CharSet" value=> | Mit diesem Parameter können Sie die Kodierung angeben, die für die Daten in der Datendatei maßgeblich ist. Per Voreinstellung ist das die Kodierung ISO-8859-1. Verwenden Sie diesen Parameter nur, wenn die Daten anders kodiert sind, z.B. ISO-8859-5 für Kyrillisch verewnden. Im value-Attribut können Sie den Namen der Kodierung angeben. Nähere Informationen im Abschnitt über Seite Zeichenkodierungen.
<param name="DataURL" value=> | Dieser Parameter ist unbedingt erforderlich. Im value-Attribut geben Sie die Datei an, in der sich die Daten befinden.
<param name="EscapeChar" value=> | Diesen Parameter sollten Sie angeben, wenn in Ihrer Datendatei ein Zeichen als Maskierungszeichen verwendet wird. Das ist z.B. der Fall, wenn Sie in einer kommabegrenzten Datei Kommata innerhalb von Feldern mit einem vorangestellten Backslash \ maskieren. Geben Sie in diesem Fall im value-Attribut das Maskierungszeichen an.
<param name="FieldDelim" value=> | Mit diesem Parameter geben Sie an, welches Zeichen als Trennzeichen für Datenfelder innerhalb einer Zeile der externen Textdatei interpretiert werden soll. Im value-Attribut können Sie das Zeichen angeben.
<param name="Filter" value=> Mit diesem Parameter können Sie die Datenauswahl einschränken. Per Voreinstellung werden alle Daten aus der externen Datei angezeigt. Interessant ist dieser Parameter vor allem, wenn der Anwender in einem Eingabeformular die Suche selbst definieren kann, und die Eingaben dann mit Hilfe eines Scripts dynamisch diesem Parameter des <object>-Tags zugewiesen werden. Im value-Attribut können Sie den Filter angeben. Beispiele:
value="Telefon <> '089*'" findet in einem Feld "Telefon" nur Nummern, die mit 089 beginnen.
value="PLZ > '50000'" findet in einem Feld "PLZ" für Postleitzahlen nur Werte, die größer als 50000 sind.
<param name="Language" value=> | Mit diesem Parameter können Sie die Sprache angeben, in der die Daten der externen Datendatei vorliegen. Maßgeblich sind dafür die Sprachennamen, wie sie in ISO 369 definiert sind. Im value-Attribut können Sie die Sprache angeben.
<param name="RowDelim" value=> | Wenn Ihre externe Datendatei so aufgebaut ist, dass am Ende eines Datensatzes ein Datensatzbegrenzerzeichen steht, müssen Sie dieses Zeichen mit diesem Parameter angeben. Notieren Sie im Attribut value das Zeichen.
<param name="Sort" value=> Mit diesem Parameter können Sie veranlassen, dass bei gleichzeitiger Ausgabe mehrerer Datensätze (also bei datapagesize größer 1) die angezeigten Datensätze nach einem bestimmten Feld sortiert werden. Beispiele:
value="PLZ" sortiert auszugebende Daten nach einem Feld namens "PLZ".
value="-PLZ" sortiert auszugebende Daten nach einem Feld namens "PLZ", und zwar absteigend (Minuszeichen davor).
value="Name; PLZ" sortiert auszugebende Daten erstens nach Name und zweitens nach Postleitzahlen.
<param name="TextQualifier" value=> | Wenn Ihre externe Datendatei so aufgebaut ist, dass alle Datenfelder in bestimmte Zeichen eingeschlossen sind, zum Beispiel in Anführungszeichen, dann sollten Sie mit diesem Parameter das betreffende Zeichen angeben. Mit value="'"'" etwa bestimmen Sie das Anführungszeichen als Zeichen für Feldanfang und Feldende.
<param name="UseHeader" value=> | Diesen Parameter müssen Sie dann angeben, wenn die erste Zeile der externen Datendatei keine Daten enthält, sondern die zugehörigen Feldnamen. Mit value="true" wird die Datendatei so interpretiert, dass die erste Zeile Feldnamen enthält. Mit value="false" wird sie so interpretiert, dass gleich in der ersten Zeile die Daten beginnen.

MS JScript MS IE 4.0 Datenmodell: Remote Data Service (RDS)

Über das Datenmodell Remote Data Service (RDS) können Sie die Anbindung einer HTML-Datei an Daten aus einer Datenbank realisieren. Geeignet ist dieses Modell für Datenbanken, die über die Datenbank-Schnittstellen OLE-DB oder ODBC (DBMS) verfügen. Das sind beispielsweise MS Access, Oracle oder SQL-Server wie msql. Über die entsprechenden Produkte und den Aufbau von Datenbanken damit informieren Sie sich bitte bei den betreffenden Herstellern. Um eine solche Datenanbindung im WWW zu realisieren, muss die Datenbankanwendung auf dem Server-Rechner installiert sein. Fragen Sie dazu gegebenenfalls Ihren Provider.

Um eine solche Datenquelle an eine HTML-Datei anzubinden, müssen Sie folgendes Objekt in der HTML-Datei notieren:

Schema zur Einbindung in HTML:

<object id="Objektname" classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33">
 <param name= value=>
 <!-- usw. weitere Parameter -->
</object>

Erläuterung:

Um solche Daten einzubinden, verwenden Sie das im Internet Explorer 4.x eingebaute ActiveX-Control mit der ID BD96C556-65A3-11D0-983A-00C04FC29E33. Innerhalb des <object>-Tags notieren Sie verschiedene Parameter, die für die Datenpräsentation wichtig sind. Folgende Parameter sind möglich:

Notation | Bedeutung
<param name="AppendData" value=> | Mit diesem Parameter können Sie angeben, ob in der Ausgabetabelle beim Blättern für jedes neue Datensatz-Set (entsprechend der Größe von datapagesize) die vorhandenen Tabellenzellen überschrieben werden sollen, oder ob neue Tabellenzellen angehängt werden sollen. Mit value="true" erzwingen Sie das Anhängen von Daten. Per Voreinstellung werden die vorhandenen Tabellenzellen überschrieben.
<param name="CaseSensitive" value=> | Mit diesem Parameter können Sie angeben, ob bei Vergleichen von Anwendereingaben mit Daten aus der Datenquelle Groß-/Kleinschreibung unterschieden werden soll. Nur interessant bei der Weiterverarbeitung von Daten mit Scripts. Per Voreinstellung wird Groß-/Kleinschreibung unterschieden. Mit value=false können Sie die Fallunterscheidung ausschalten.
<param name="CharSet" value=> | Mit diesem Parameter können Sie die Kodierung angeben, die für die Daten in der Datendatei maßgeblich ist. Per Voreinstellung ist das die Kodierung ISO-8859-1. Verwenden Sie diesen Parameter nur, wenn die Daten anders kodiert sind, z.B. ISO-8859-5 für Kyrillisch verewnden. Im value-Attribut können Sie den Namen der Kodierung angeben. Nähere Informationen im Abschnitt über Seite Zeichenkodierungen.

Beachten Sie:

Solche Datenanbindungen sind nur sinnvoll, wenn Sie dem Anwender ein HTML-Formular zur Verfügung stellen, in dem er seine Angaben zum Durchsuchen der Datenbank machen kann. Mit Hilfe eines JavaScripts können Sie dann die Anwendereingaben in einen gültigen SQL-Befehl umwandeln, den Sie im Script dem Parameter SQL des object-Tags zuweisen. So können Sie beispielsweise mit der JavaScript-Anweisung:
document.all.Datenbank.SQL = Abfrage;
eine SQL-Abfrage zuordnen. In diesem Beispiel ist "Datenbank" der Name, der beim object-Tag mit dem id-Attribut vergeben wird, und Abfrage ist eine Variable, die zuvor aus Formulareingaben des Anwenders einen SQL-Befehl kreiert hat. Bei solchen Datenbanken ist es auch möglich, SQL-Befehle zum Schreiben von geänderten Datensätzen in die Datenbank zurückzuschreiben. Voraussetzung ist, dass die Daten in der HTML-Datei in editierbaren HTML-Eingabefeldern (z.B. <input...>) angezeigt werden.

Ausführliche Informationen zum Einrichten und Realisieren einer Datenbank mit Scripts finden Sie auf den englischsprachige Seite Entwicklerseiten von Microsoft. Suchen Sie dort nach Microsoft Internet Client SDK.

MS JScript MS IE 4.0 Datenmodell: JDBC DataSource Applet

Das Datenmodell JDBC DataSource Applet greift ebenso wie das Datenmodell nach oben Datenmodell: Remote Data Service (RDS) auf Datenbanken zu, die über die Datenbank-Schnittstellen OLE-DB oder ODBC (DBMS) verfügen, zum Beispiel MS Access, Oracle oder SQL-Server wie msql. Der Unterschied zwischen dem JDBC DataSource Applet und dem Remote Data Service (RDS) ist, dass letzterer in der HTML-Datei als ActiveX-Control eingebunden wird, während das JDBC DataSource Applet ein Java-Applet ist. Damit will Microsoft seine Datenanbindungs-Technologie anderen Browsern zur Verfügung stellen, die kein ActiveX unterstützen, wohl aber Java. Das tun zwar Netscape und einige andere Browser, doch solange diese das Konzept der Datenanbindung mit Dynamischem HTML nicht unterstützen, hat das Ganze eigentlich wenig Sinn.

Das Java-Applet, das diese Form der Datenanbindung steuert, gehört nicht zum Lieferumfang des Internet Explorers. Auf den englischsprachige Seite Web-Seiten von Microsoft können Sie das JDBC DataSource Applet downloaden. Suchen Sie dort auf den Seiten nach JDBC DataSource Applet.

Um eine solche Datenanbindung im WWW zu realisieren, muss die Datenbankanwendung auf dem Server-Rechner installiert sein. Fragen Sie dazu gegebenenfalls Ihren Provider.

Um eine solche Datenquelle an eine HTML-Datei anzubinden, müssen Sie das JDBC DataSource Java-Applet in der HTML-Datei notieren.

Schema zur Einbindung in HTML:

<applet code="JDC.class" name="DSA1" id="DSA1" width="0" height="0">
 <param name= value=>
 <!-- usw. weitere Parameter -->
</applet>

Erläuterung:

Das Java-Applet wird wie in HTML üblich mit dem <applet>-Tag eingebunden. Mit dem Attribut code geben Sie die ausführbare Java-Datei an. Dies ist die Datei JDC.class, die Sie mit dem Download des JDBC DataSource Java-Applets erhalten. Innerhalb des Applets notieren Sie verschiedene Parameter, die das Applet benötigt, um korrekt zu arbeiten. Weiterführende Infos zu den Parametern entnehmen Sie der Original-Dokumentation zu dem Applet. Folgende Parameter erwartet das Applet:

Notation | Bedeutung
<param name="cabbase" value=> | Mit diesem Parameter geben Sie die Datei an, in der der Quellcode des Applets steht. Es handelt sich um eine CAB-Datei. Relative Pfadnamen oder auch absolute Adressen sind dabei erlaubt.
<param name="dbURL" value=> | Mit diesem Parameter geben Sie im value-Attribut die Datei an, in der die Datenbank gespeichert ist. Relative Pfadnamen oder auch absolute Adressen sind dabei erlaubt.
<param name="showUI" value=> | Mit diesem Parameter geben Sie an, ob das Applet innerhalb der HTML-Datei seine eigene Benutzeroberfläche anzeigen soll oder nicht. Mit value="true" wird das Applet angezeigt, mit value="false" nicht. Der Parameter ist optional.
<param name="sqlStatement" value=> | Mit diesem Parameter müssen Sie einen Befehl angeben, den Sie zum Ansprechen der Datenbank absetzen wollen. Dies kann ein beliebiger gültiger SQL-Befehl sein. SQL (Structured Query Language) ist eine standardisierte Datenbankabfragesprache. Diese Sprache und ihre Befehle müssen Sie kennen, um den Parameter mit korrekten Werten zu versorgen.
<param name="allowInsert" value=> | Mit diesem Parameter geben Sie an, ob der Anwender Datensätze durch Ausfüllen entsprechender Eingabefelder neue Datensätze in die Datenbank schreiben darf. Mit value="true" erlauben Sie das Hinzufügen von Daten, mit value="false" verbieten Sie es.
<param name="allowDelete" value=> | Mit diesem Parameter geben Sie an, ob der Anwender angezeigte Datensätze mit Hilfe entsprechender Befehlsbuttons aus der Datenbank löschen darf. Mit value="true" erlauben Sie das Löschen von Daten, mit value="false" verbieten Sie es.
<param name="allowUpdate" value=> | Mit diesem Parameter geben Sie an, ob der Anwender angezeigte Datensätze in entsprechenden Eingabefeldern editieren und geänderte Daten mit Hilfe entsprechender Befehlsbuttons in die Datenbank zurückschreiben darf. Mit value="true" erlauben Sie das Ändern von Daten, mit value="false" verbieten Sie es.
<param name="user" value=> | Mit diesem Parameter können Sie der Datenbank im value-Attribut den Namen eines angemeldeten Users übergeben, sofern die Datenbank dies verlangt. Der Parameter ist optional.
<param name="password" value=> | Mit diesem Parameter können Sie der Datenbank im value-Attribut das Passwort des Users übergeben, sofern die Datenbank dies verlangt. Der Parameter ist optional.

Beachten Sie:

Beim Datenmodell JDBC DataSource Applet gelten die nach oben Anmerkungen zum Datenmodell Remote Data Service (RDS).

MS JScript MS IE 4.0 Datenmodell: XML Data Source

Das Datenmodell XML Data Source könnte in Zukunft sehr interessant werden, da es die vom W3-Konsortium standardisierte Sprache XML zur Definition von Daten benutzt. Bei diesem Datenmodell werden die Daten in einer XML-Datei gespeichert. Für Datensätze und Datenfelder können Sie innerhalb der XML-Datei eigene Tags und deren Verschachtelung erfinden. Ein denkbares Schema für eine Adressendatei wäre etwa:
<adresse>
 <name>Meyer</name>
 <vorname>Hubert</vorname>
 <ort>Hamburg</ort>
 <telefon>040-598487374</telefon>
</adresse>
Die Datei muss den Konventionen zum Aufbau einer XML-Datei entsprechen. Lesen Sie dazu das Kapitel über Kapitel XML/DTDs.

Im Lieferumfang des Internet Explorers 4.x ist ein Java-Applet enthalten, das solche Tag-Strukturen aus XML-Dateien interpretiert und die Datenstruktur daraus ermittelt.

Um diese Art von Datenquelle an eine HTML-Datei anzubinden, müssen Sie das zugehörige Java-Applet in der HTML-Datei notieren.

Schema zur Einbindung in HTML:

<applet code="com.ms.xml.dso.xmldso.class" id="xmldso" width="0" height="0" mayscript="true">
 <param name="url" value="datei.xml">
</applet>

Erläuterung:

Das Java-Applet wird wie in HTML üblich mit dem <applet>-Tag eingebunden. Notieren Sie das einleitende <applet>-Tag genau so wie im obigen Schema. Der Grund für den ungewöhnlichen Wert des Attributs code ist, dass dieses Java-Applet eine interne Ressource des Internet Explorers ist und keine separat vorliegende Datei.

Das Applet erwartet genau einen Parameter:
Mit <param name="url" value="datei.xml"> geben Sie im Attribut value den Dateinamen der XML-Datei an. Dabei sind natürlich auch relative Pfadangaben oder absolute Adressen erlaubt.

MS JScript MS IE 4.0 Datenmodell: MSHTML Data Source

Was Sie mit XML besonders elegant lösen können, geht etwas weniger elegant auch mit HTML selbst: hinter dem Datenmodell MSHTML Data Source verbirgt sich nichts anderes als eine Konvention, nach der die Daten in einer HTML-Datei gehalten werden - diese HTML-Datei dient dann als externe Quelle für eine andere HTML-Datei, in der die Daten angezeigt werden. Ein Schema für den Datensatz einer Adressendatei wäre etwa:
<div id="Adresse">
 <span id="Name">Meyer</span><br>
 <span id="Vorname">Hubert</span><br>
 <span id="Ort">Hamburg</span><br>
 <span id="Telefon">040-598487374</span><br>
</div>

Um diese Art von Datenquelle an eine HTML-Datei anzubinden, müssen Sie ein einfaches Objekt dafür notieren.

Schema zur Einbindung in HTML:

<object id="Daten" data="daten.htm" width="0" height="0">
</object>

Erläuterung:

Innerhalb des <object>-Tags vergeben Sie mit dem id-Attribut wie üblich einen Namen, unter dem Sie das Objekt ansprechen und die Daten aus der anderen Datei in einer Tabelle dynamisch anzeigen können. Das Zugreifen auf die Datensätze funktioniert dabei genau so wie im nach oben Beispiel: Datei dynamisch in Tabelle einbinden. Im Attribut datafld geben Sie den Namen an, den Sie in der externen HTML-Datei im id-Attribut für jedes gleiche Feld eines Datensatzes vergeben haben, z.B. "Vorname".

nach oben
weiter | Seite Dynamische Filter (nur Microsoft)
zurück | Seite Das ältere DHTML-Modell von Netscape
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML Teil von DHTML-Modelle

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / DHTML-Modelle / Dynamische Filter (nur Microsoft)

SELFHTML

Dynamische Filter (nur Microsoft)
Informationsseite

nach unten Allgemeines zu dynamischen Filtern
nach unten Einfaches Dynamisches Ändern von Filterwerten
nach unten Fließende Übergänge mit dem blendTrans-Filter
nach unten Fließende Übergänge mit dem revealTrans-Filter
nach unten Ein-/Ausblendeffekte
nach unten Fließende Seitenübergänge
nach unten

MS JScript MS IE 4.0 Allgemeines zu dynamischen Filtern

Der Internet Explorer unterstützt ab der Version 4.x spezielle CSS-Eigenschaften, die so genannten Seite Filter. Mit Hilfe solcher Filter sind grafische Effekte möglich, wie sie aus professionellen Grafikprogrammen bekannt sind: Schatteneffekte für Texte oder auch Transparenzdefinitionen für Grafiken, die auf einer WWW-Seite angezeigt werden, gehören zum Repertoire der möglichen Angaben. Als reine CSS-Eigenschaften sind diese Filter statisch. Mit Hilfe von Scripts können Sie die entsprechenden Angaben zu den Filtern jedoch dynamisch beeinflussen. Ferner gibt es zwei Spezialfilter für Blend- und diverse Übergangseffekte. Mit etwas Programmier-Wissen und ästhetischem Gefühl können dabei so ziemlich alle Träume wahr werden, die Web-Designer heimlich immer schon geträumt haben: Grafiken, die sich wie von Geisterhand langsam ein- und ausblenden, fließende Übergänge zwischen Elementen, Texte, die verschwimmen usw.

Der Script-Zugriff auf definierte Filter erfolgt über das filter-Objekt in JScript/JavaScript. Die Beispiele hier können nicht alle Möglichkeiten des Filter-Objekts behandeln. Sie dienen nur zur Veranschaulichung, wie Filter sich durch ein Script dynamisch verändern lassen.

Die Filter-Technik von Microsoft ist jedoch nie ein Standard geworden, und es ist fraglich, ob sie je zum Standard gehören werden.

MS JScript MS IE 4.0 Einfaches Dynamisches Ändern von Filterwerten

Durch zeitgesteuertes Ändern der CSS-Filtereigenschaften können Sie interessante Effekte erzielen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<div id="Zittertext" style="width:100%; font-size:96px; font-weight:bold; color:#FF6666;
filter:Wave(freq=5, light=0, phase=80, strength=1);">Leicht gest&ouml;rt</div>
<script language="JScript" type="text/jscript">
function DynWave () {
  if (document.all.Zittertext.filters[0].freq > 30)
    document.all.Zittertext.filters[0].freq = 5;
  document.all.Zittertext.filters[0].freq += 1;

  if (document.all.Zittertext.filters[0].phase > 100)
    document.all.Zittertext.filters[0].phase = 0;
  document.all.Zittertext.filters[0].phase += 10;

  if (document.all.Zittertext.filters[0].strength > 10)
    document.all.Zittertext.filters[0].strength = 1;
  document.all.Zittertext.filters[0].strength += 1;

  window.setTimeout("DynWave()", 100);
}

DynWave();
</script>
</body>
</html>

Erläuterung:

Im Beispiel wird in einem <div>-Bereich der zugehörige Text (leicht gest&ouml;rt) mit Hilfe von Kapitel CSS-Eigenschaften formatiert. Zu den Formatierungen gehört auch die Anwendung des Seite Filters Wave(). Damit wird der Effekt des Filters zwar bereits angezeigt, aber es bewegt sich noch nichts. In einem Script unterhalb des so definierten <div>-Bereichs werden die Angaben dieses Filters dynamisch verändert. Da ein Endlos-Effekt mit immer neuen Werten und Kombinationen eingebaut ist, entsteht ein Zitter-Effekt.

Die JavaScript-Funktion wird im obigen Beispiel unterhalb des Bereichs, auf den sie sich bezieht, definiert. Der Grund ist, dass die JavaScript-Anweisungen sofort ausgeführt werden. Der <div>-Bereich, auf dessen Daten die Anweisungen dynamisch zugreifen, sollte zu diesem Zeitpunkt bereits eingelesen und dem Browser bekannt sein. Deshalb steht das Script unterhalb des <div>-Bereichs. Ansonsten könnte es zu Fehlermeldungen kommen.

Innerhalb des Script-Bereichs wird zunächst eine Seite Funktion mit dem Namen DynWave() definiert. Diese Funktion ändert die Parameter freq, phase und strength des Wave-Filters, der bei dem <div>-Bereich definiert wurde. Am Ende ruft sich die Funktion selbst wieder auf. Dadurch entsteht ein Endlos-Effekt. Der Aufruf erfolgt zeitverzögert um 100 Millisekunden. Das ist wichtig, da der Selbstaufruf der Funktion sonst "unendlich schnell" wäre und ein Problem im Arbeitsspeicher verursachen würde (Selbstaufrufe von Funktionen sind nämlich nicht ganz unkritisch, da für jeden Funktionsaufruf neuer Arbeitsspeicherplatz reserviert werden muss).

Da die Funktion zu Beginn überhaupt erst einmal aufgerufen werden muss (sonst würde gar nichts passieren), steht am Ende des Script-Bereichs - außerhalb der Funktion DynWave() - der einmalige Funktionsaufruf DynWave();.

Innerhalb der Funktion im Beispiel können Sie erkennen, wie auf Filter dynamisch zugegriffen wird. Der Zugriff geschieht mit Hilfe des Seite all-Objekts. Bezug ist die Angabe id="Zittertext", die im <div>-Tag vergeben wird. Mit document.all.Zittertext ist dann der Zugriff auf dieses HTML-Element möglich.

Zwei Besonderheiten sind bei Filtern jedoch zu beachten:
Mit einem Ausdruck wie document.all.Zittertext.filters[0].strength greifen Sie auf den Wert zu, der beim ersten definierten Filter des HTML-Elements bei der Angabe strength als Parameter notiert ist. Da die Filter zu den Stylesheet-Angaben gehören, müsste eigentlich document.all.Zittertext.style.filters[0].strength notiert werden. Dies führt beim Internet Explorer jedoch zu Fehlermeldungen. Lassen Sie die Angabe style in der Mitte also weg.
Da ein Element mehrere Filter haben kann, müssen Sie genau angeben, welchen Filter Sie dynamisch ansprechen wollen. Im obigen Beispiel wird mit filters[0] der erste definierte Filter angesprochen. Falls im gleichen <div>-Tag noch einen zweiter Filter definiert wäre, könnten Sie diesen mit filters[1] ansprechen. Also einfach bei 0 zu zählen beginnen. Microsoft erlaubt auch weitere Notationsmöglichkeiten, für das obige Beispiel etwa document.all.Zittertext.filters["wave"].strength oder document.all.Zittertext.filters.wave.strength.

Das hier beschriebene Schema zum Zugreifen auf Filterwerte können Sie auf alle anderen Filter ebenso anwenden. Auch auf solche, die vor allem in Verbindung mit Grafiken sinnvoll sind.

MS JScript MS IE 4.0 Fließende Übergänge mit dem blendTrans-Filter

Der blendTrans-Filter ist ein spezieller Filter, der nur in Verbindung mit Scripts sinnvoll ist. Er erlaubt es, einen fließenden Übergang von einer Grafik zu einer anderen Grafik oder von einem Textinhalt zu einem anderen Textinhalt zu definieren. Dadurch werden Effekte wie bei professionellen Dia-Shows oder wie bei Fernsehbildern auf WWW-Seiten möglich.

Beispiel für Grafiken:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
Bild1 = new Image();
Bild1.src = "madrid1.jpg";
Bild2 = new Image();
Bild2.src = "madrid2.jpg";
var Bild = 1;
function Bildwechsel () {
  if (Bild == 1) {
    Bild = 2;
    document.all.Madrid.filters.blendTrans.Apply();
    document.all.Madrid.src = Bild2.src;
    document.all.Madrid.filters.blendTrans.Play();
  } else {
    Bild = 1;
    document.all.Madrid.filters.blendTrans.Apply();
    document.all.Madrid.src = Bild1.src;
    document.all.Madrid.filters.blendTrans.Play();
  }
}
</script>
</head><body>
<p>Klicken Sie auf das Bild, nachdem es vollständig angezeigt ist.</p>
<img id="Madrid" src="madrid1.jpg" style="cursor:hand; filter:blendTrans(Duration=4, Transition=16)" onclick="Bildwechsel()" width="433" height="278" border="0" alt="Das ist Madrid">
</body>
</html>

Erläuterung:

Das Beispiel bewirkt, dass beim Klicken auf ein Bild dieses Bild langsam in ein anderes übergeht. Wird das andere Bild dann angeklickt, geht es langsam wieder in das erste über.

Dazu wird zunächst bei der Definition des Bildes mit <img...> eine spezielle Stylesheet-Angabe notiert: der Filter blendTrans(...). Dieser Filter erwartet einen Parameter, nämlich die Angabe zu Duration. Damit können Sie angeben, wie lange der Übergang von dem Bild zu seinem Nachfolger dauern soll. Im Beispiel wird 4 angegeben - das steht für 4 Sekunden. Sie können auch Bruchwerte bis zu tausendstel Sekunden angeben, etwa 2.450 (Dezimalzeichen ist ein Punkt!).

Damit ist der Übergangseffekt jedoch nur "registriert". Um ihn tatsächlich auszuführen, ist ein Script erforderlich. Im obigen Beispiel wird im Dateikopf ein JavaScript-Bereich definiert. Dort werden zunächst mit Hilfe des Bildobjekts image beide betroffenen Bilder als Objekte (Bild1 und Bild2) definiert. Der Eigenschaft src der Bildobjekte werden die gewünschten Grafikdateien zugewiesen. Diese Vorarbeit mit dem image-Objekt ist zwar nicht zwingend notwendig, hat aber den Vorteil, dass alle betroffenen Bilder bereits in den Arbeitsspeicher geladen sind, wenn der Übergang angestoßen wird.

Innerhalb der Funktion Bildwechsel() findet dann der eigentliche Übergang statt. Diese Funktion wird aufgerufen, wenn der Anwender auf das Bild klickt. Dazu ist im <img>-Tag der Seite Event-Handler onclick notiert.

In der Funktion Bildwechsel() wird zunächst die Methode Apply() des blendTrans-Filters aufgerufen. Dieser Aufruf ist notwendig, um dasjenige Objekt zu identifizieren, das in ein anderes übergehen soll. Im Beispiel ist das die Grafik, angesprochen über das all-Objekt und den vergebenen id-Namen DynBild. Als nächster Befehl wird der Grafik diejenige neue Grafik zugeordnet, durch die sie ersetzt werden soll. Erst dann sind alle Voraussetzungen erfüllt, um den eigentlichen Übergang zu starten. Dazu wird die Methode Play() des filter-Objekts benutzt.

Die Variable Bild und der else-Zweig in der Beispielfunktion dienen dazu, den Wechseleffekt sicherzustellen. Mit den beschriebenen Befehlen findet der Übergang ansonsten genau einmal statt.

Der Übergangs-Effekt ist nicht nur bei Grafiken möglich, sondern auch bei Text.

Beispiel für Text:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
var NormalText = "Wer HTML nicht ehrt";
var AndererText = "ist des Dynamischen nicht wert";
var Text = 1;
function Wechsel () {
  if (Text == 1) {
    Text = 2;
    document.all.MeinText.filters.blendTrans.Apply();
    document.all.MeinText.innerText = AndererText;
    document.all.MeinText.filters.blendTrans.Play();
  } else {
    Text = 1;
    document.all.MeinText.filters.blendTrans.Apply();
    document.all.MeinText.innerText = NormalText;
    document.all.MeinText.filters.blendTrans.Play();
  }
}
</script>
</head><body>
<p>Klicken Sie auf den folgenden Text:</p>

<div id="MeinText" style="cursor:hand; margin-bottom:100px; font-size:2.6em; color:red; width:14em; filter:blendTrans(Duration=0.5)" onclick="Wechsel()">
Wer HTML nicht ehrt</div>
</body>
</html>

Erläuterung:

Anwendbar ist der blendTrans-Filter bei Text auf die HTML-Elemente:
<body>...</body>
<div>...</div>
<span>...</span>
<input>
<button>
<textarea>...</textarea>
<marquee>...</marquee>
sowie auf alle Tabellenelemente. Bei <div>...</div> und bei <span>...</span> müssen Sie Stylesheet-Angaben zu Breite und/oder Höhe des Elements notieren, sonst funktioniert es nicht.

Das obige Beispiel ist im wesentlichen das gleiche wie bei den Grafiken. Im Unterschied dazu wird jedoch ein Übergang zwischen zwei Texten definiert. Der erste Text ist im Dateikörper der HTML-Datei mit <div>...</div> entsprechend der Regeln definiert. Die Realisierung des Übergangs zwischen den beiden Texten ist ähnlich wie bei Grafiken. Anstelle der Objekteigenschaft src (bei Grafiken) müssen Sie bei Texten jedoch die Eigenschaft innerText (wie im Beispiel) oder innerHTML verwenden. Diese Eigenschaften erlauben das dynamische Austauschen des Inhalts, den das angesprochene HTML-Element enthält.

MS JScript MS IE 4.0 Fließende Übergänge mit dem revealTrans-Filter

Der revealTrans-Filter ist ganz ähnlich zu handhaben wie der nach oben blendTrans-Filter. Während der blendTrans-Filter jedoch nur einfache Blenden von einem Inhalt zum anderen erlaubt, stellt der revealTrans-Filter ein ganzes Arsenal grafischer Überblend-Effekte bereit.

Beispiel (für Grafik):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<img id="DynBild" src="rain.gif"
style="filter:revealTrans(Duration=2,Transition=12)" width="150"
   height="145" alt="Sonnenschein?">
<script language="JScript" type="text/jscript">
window.setTimeout("Wechsel()", 5000);
function Wechsel () {
  document.all.DynBild.filters.revealTrans.Apply();
  document.all.DynBild.src = "sun.gif";
  document.all.DynBild.filters.revealTrans.Play();
}
</script>
</body></html>

Das Beispiel bewirkt, dass innerhalb von 5 Sekunden (5000 Millisekunden) das angezeigte Bild "rain.gif" zerbröselt und durch das Bild "sun.gif" ersetzt wird.

Beispiel (für Text):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<div id="MeinText" style="width:14em; height:150px; font-size:2em; filter:revealTrans(Duration=1,Transition=7)">
Wer HTML nicht ehrt
</div>
<script language="JScript" type="text/jscript">
window.setTimeout("Wechsel()", 2500);
function Wechsel () {
  document.all.MeinText.filters.revealTrans.Apply();
  document.all.MeinText.innerText = "ist des Dynamischen nicht wert";
  document.all.MeinText.filters.revealTrans.Play();
}
</script>
</body></html>

Erläuterung:

Das Beispiel bewirkt, dass der Text Wer HTML nicht ehrt nach 2,5 Sekunden durch den Text ist des Dynamischen nicht wert ersetzt wird, und zwar so, dass der neue Text den zunächst angezeigten Text von rechts her "überrollt".

Dazu wird zunächst der Text Wer HTML nicht ehrt innerhalb eines <div>-Bereichs notiert. Denn der revealTrans-Filter ist im Zusammenhang mit Text auf die folgenden HTML-Elemente anwendbar:
<body>...</body>
<div>...</div>
<span>...</span>
<input>
<button>
<textarea>...</textarea>
<marquee>...</marquee>
sowie auf alle Tabellenelemente. Bei <div>...</div> und bei <span>...</span> müssen Sie Stylesheet-Angaben zu Breite und/oder Höhe des Elements notieren, sonst funktioniert es nicht. Im obigen Beispiel werden Breite und Höhe des <div>-Bereichs mit width: und height: festgelegt.

Ferner wird eine spezielle Stylesheet-Angabe notiert: der Filter revealTrans(...). Dieser Filter erwartet zwei Parameter, nämlich die Angabe zu Duration und eine Angabe zu Transition. Mit Duration können Sie angeben, wie lange der Übergang von dem Text zu seinem Nachfolger dauern soll. Im Beispiel wird 1 angegeben - das steht für eine Sekunde. Sie können auch Bruchwerte bis zu tausendstel Sekunden angeben, etwa 2.450 (Dezimalzeichen ist ein Punkt!).

Bei Transition geben Sie die Art an, wie der Filter wirken soll.

Mögliche Werte beim revealTrans-Filter:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (alle 24 Möglichkeiten für Text und Grafik)

Notation | Bedeutung | Notation | Bedeutung | Notation | Bedeutung
Transition=0 | Box-Effekt außen nach innen | Transition=8 | Streifen-Effekt von links nach rechts | Transition=16 | Aufklapp-Effekt nach oben und unten
Transition=1 | Box-Effekt innen nach außen | Transition=9 | Streifen-Effekt von oben nach unten | Transition=17 | Aufroll-Effekt von rechts oben nach links unten
Transition=2 | Kreis-Effekt von außen nach innen | Transition=10 | Rechteck-Effekt von links nach rechts | Transition=18 | Aufroll-Effekt von rechts unten nach links oben
Transition=3 | Kreis-Effekt von innen nach außen | Transition=11 | Rechteck-Effekt von oben nach unten | Transition=19 | Aufroll-Effekt von links oben nach rechts unten
Transition=4 | Aufroll-Effekt von unten nach oben | Transition=12 | Zerbröselungseffekt in alle Richtungen | Transition=20 | Aufroll-Effekt von links unten nach rechts oben
Transition=5 | Aufroll-Effekt von oben nach unten | Transition=13 | Aufroll-Effekt beidseitig von außen nach innen | Transition=21 | Jalousie-Effekt waagerecht
Transition=6 | Aufroll-Effekt von links nach rechts | Transition=14 | Aufroll-Effekt beidseitig von innen nach außen | Transition=22 | Jalousie-Effekt senkrecht
Transition=7 | Aufroll-Effekt von rechts nach links | Transition=15 | Zuklapp-Effekt von oben und unten | Transition=23 | Zufallseffekt aus Effekten 0-22

MS JScript MS IE 4.0 Ein-/Ausblendeffekte

Sie können die beiden Filter nach oben blendTrans und nach oben revealTrans auch dazu nutzen, um Texte oder Grafiken "aus dem Nichts heraus" einzublenden oder auszublenden. Dies ist in Verbindung mit der Stylesheet-Angabe zur Seite Anzeige bzw. Nichtanzeige mit Platzhalter - (visibility) möglich.

Beispiel für Text:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<div id="KommText" style="width:10em; height:3em; font-size:2em; font-weight:bold; color:#0000FF; visibility:hidden; filter:blendTrans(Duration=4)">
Hier kommt der Text
</div>
<script language="JScript" type="text/jscript">
document.all.KommText.filters.blendTrans.Apply();
document.all.KommText.style.visibility = "visible";
document.all.KommText.filters.blendTrans.Play();
</script>

<div id="GehText" style="width:10em; height:3em; font-size:2em; font-weight:bold; color:#0000FF;
visibility:visible; filter:blendTrans(Duration=4)">
Hier geht der Text
</div>
<script language="JScript" type="text/jscript">
document.all.GehText.filters.blendTrans.Apply();
document.all.GehText.style.visibility = "hidden";
document.all.GehText.filters.blendTrans.Play();
</script>
</body></html>

Erläuterung:

Im obigen Beispiel werden insgesamt zwei <div>-Bereiche mit Text definiert. Beide Bereiche erhalten mit der id-Angabe jeweils einen Namen, damit sie per Script ansprechbar sind. Der eine Bereich erhält den Namen KommText, der andere den Namen GehText. Beide Bereiche erhalten auch mit Hilfe der Stylesheet-Angabe visibility eine Angabe dazu, ob sie zunächst angezeigt werden sollen oder nicht. Die Angabe visibility:hidden im ersten der beiden <div>-Bereiche sorgt dafür, dass dieser Bereich zunächst nicht angezeigt wird. Im zweiten Bereich steht dagegen die Angabe visibility:visible. Dadurch wird der entsprechende Text zunächst angezeigt. In beiden <div>-Bereichen wird außerdem der blendTrans-Filter notiert.

Unterhalb jedes der beiden <div>-Bereiche ist ein Script notiert, das den jeweiligen blendTrans-Filter ausführt. Das funktioniert genauso wie bei nach oben fließenden Übergängen mit dem blendTrans-Filter. Der Unterschied ist lediglich, dass dem jeweiligen <div>-Bereich zwischen dem Aufruf der Methoden Apply() und Play() kein anderer Text zugewiesen wird, sondern ein neuer Wert für visibility. Der Bereich, der zunächst visibility:hidden zugewiesen bekam, wird innerhalb des Scripts mit der Anweisung document.all.KommText.style.visibility = "visible" sichtbar. Da der Wechsel zwischen unsichtbar und sichtbar jedoch in den blendTrans-Filter eingebunden ist, wird der Text nicht sofort sichtbar, sondern erst durch das Ausführen des blendTrans-Filters.
Mit dem zweiten Text passiert das gleiche, nur umgekehrt.

Beispiel für Grafik:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p><a id="ein" style="display:inline" href="javascript:Einblenden()">Grafik einblenden</a><br>
<a id="aus" style="display:none" href="javascript:Ausblenden()">Grafik ausblenden</a></p>
<img id="Bild" src="madrid1.jpg" style="visibility:hidden; filter:revealTrans(Duration=4, Transition=1)" width="433" height="278" alt="Madrid">
<script language="JScript" type="text/jscript">
function Einblenden () {
  document.all.Bild.filters.revealTrans.Transition = 1;
  document.all.Bild.filters.revealTrans.Apply();
  document.all.Bild.style.visibility = "visible";
  document.all.Bild.filters.revealTrans.Play();
  document.all.ein.style.display = "none";
  document.all.aus.style.display = "inline";
}

function Ausblenden () {
  document.all.Bild.filters.revealTrans.Transition = 0;
  document.all.Bild.filters.revealTrans.Apply();
  document.all.Bild.style.visibility = "hidden";
  document.all.Bild.filters.revealTrans.Play();
  document.all.ein.style.display = "inline";
  document.all.aus.style.display = "none";
}
</script>
</body></html>

Erläuterung:

Das voranstehende Beispiel enthält zunächst zwei Verweise. Die beiden Verweise rufen JavaScript-Funktionen auf. Einer der Verweise ruft die Funktion Einblenden() zum Einblenden einer Grafik auf, der andere die Funktion Ausblenden() zum Ausblenden derselben Grafik. Beide Verweise enthalten auch Stylesheet-Angaben zur Seite Anzeige bzw. Nichtanzeige ohne Platzhalter - (display). Der erste Verweis wird zunächst angezeigt, der zweite nicht. Die Angaben werden in den beiden Script-Funktionen Einblenden() und Ausblenden() dynamisch verändert. So wird ermöglicht, dass der Verweis Grafik einblenden angezeigt wird, wenn die Grafik nicht angezeigt wird, und der Verweis Grafik ausblenden, wenn die Grafik angezeigt wird.

Unterhalb der Verweise wird die Grafik notiert, die ein- und ausblendbar sein soll. Durch Stylesheet-Angabe visibility:hidden wird die Anzeige der Grafik zunächst verhindert. Außerdem erhält die Grafik eine Angabe zum nach oben revealTrans-Filter. Wenn der Anwender nun auf den zunächst angezeigten Verweis Grafik einblenden klickt, wird die Script-Funktion Einblenden() aufgerufen. Diese Funktion ändert zwischen dem Aufruf von Apply() und Play() des revealTrans()-Filters die Anzeige der einzublendenden Grafik auf visible. Der Filter wird ausgeführt, und die Grafik wird in der vorgeschriebenen Form (transition = 1) eingeblendet. Ferner tauscht die Funktion Einblenden() noch die Anzeige-Attribute der beiden Verweise aus, sodass nun der Verweis zum Ausblenden der Grafik angezeigt wird.

Die Funktion Ausblenden() leistet das Gleiche, nur umgekehrt. Dabei wird auch die Art des revealTrans-Filters umgekehrt, und zwar durch transition = 0.

MS IE 5.0 Fließende Seitenübergänge

Als besonderes Bonbon hat sich Microsoft schließlich noch einfallen lassen, die beiden Filter nach oben blendTrans und nach oben revealTrans im Zusammenhang mit Seite Meta-Angaben zu interpretieren. Auf diese Weise werden fließende Übergänge zwischen zwei Web-Seiten möglich.

Beispiel - Datei uebergang1.htm:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)">
</head><body>
<h1>Hier ist Seite 1</h1>
<p><img src="madrid1.jpg" width="433" height="278" border="0" alt="ein Bild"></p>
<p><a href="uebergang2.htm">und ein Link zu Seite 2</a></p>
</body></html>

Beispiel - Datei uebergang2.htm:

<html><head><title>Test</title>
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=3,Transition=12)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)">
</head><body>
<h1>Und das hier ist Seite 2</h1>
<p>Sie sieht ein klein wenig anders aus, aber nicht viel.</p>
<p><img src="madrid2.jpg" width="433" height="278" border="0" alt="ein Bild"></p>
<p><a href="uebergang1.htm">und das ist ein Link, der wieder zu Seite 1 geht</a></p>
</body></html>

Erläuterung:

Mit <meta http-equiv="Page-Exit"... bestimmen Sie einen Filter, der beim Verlassen der Seite angewendet wird, und mit <meta http-equiv="Page-Enter"... einen Filter, der beim Laden der Seite angewendet wird. Bei content notieren Sie RevealTrans oder BlendTrans und dahinter in Klammern die gewünschten Angaben zu zu Duration und - beim RevealTrans-Filter - Transition. Im obigen Beispiel wird für alle Fälle in beiden Dateien der RevealTrans-Filter mit Transition=12 eingesetzt.

Beachten Sie:

Im Internet Explorer 5.0 war das obige Beispiel nicht nachvollziehbar.

nach oben
weiter | Seite Allgemeine DHTML-Bibliothek
zurück | Seite Datenanbindung (nur Microsoft)
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML Teil von DHTML-Modelle

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / Beispiele für die Praxis

SELFHTML

Beispiele für die Praxis
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML, Kapitel Stylesheets, Kapitel JavaScript und Kapitel die verschiedenen DHTML-Modelle.
Dieser Abschnitt beschreibt Lösungen, bei denen einzelne Elemente einer Web-Seite während der Anzeige dynamisch ihren Inhalt ändern.
Der Abschnitt besteht aus folgenden Seiten:

Seite Allgemeine DHTML-Bibliothek
Seite Dynamische Navigationsleiste
Seite Laufende Datums-/Uhrzeitanzeige
Seite Bilderbuch zum Umblättern

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Anwendungsbeispiele und Links zu anderen Quellen mit Anwendungsbeispielen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zu Dynamischem HTML
Online-Seite WWW-Links zu Dynamischem HTML

nach oben

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Allgemeine DHTML-Bibliothek

SELFHTML

Allgemeine DHTML-Bibliothek
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen
nach unten Test der DHTML-Bibliothek
nach unten DHTML-Bibliothek erweitern
nach unten

Hinweise zu diesem Beispiel

Angesichts der vielen verschiedenen DHTML-Modelle, die derzeit noch kursieren, ist es für Programmierer oft nicht einfach, sich die ganzen unterschiedlichen Befehle und Zugriffsmöglichkeiten zu merken. Außerdem werden Dateien bei größeren Scripts ganz schön stark aufgebläht, wenn man immer wieder die gleichen Browser-Abfragen und Konstrukte für den Elementzugriff notiert. Besser ist es deshalb, einmal eine Bibliothek an allgemein geschriebenen DHTML-Funktionen zu schreiben, diese in eine externe JavaScript-Datei auszulagern, und die JavaScript-Datei dann in denjenigen Dateien mit einzubinden, wo der Code der DHTML-Funktionen benötigt wird.

Das Beispiel auf dieser Seite stellt eine solche Bibliothek für DHTML-Funktionen vor. Die einzelnen Funktionen werden dabei auch genau erklärt. In den anderen Beispielen in diesem Kapitel kommt die hier erstellte Bibliothek dann zum praktischen Einsatz.

Selbstverständlich können Sie die Funktionsbibliothek für Ihre Zwecke beliebig erweitern. So ist es z.B. denkbar, allgemein geschriebene Funktionen zur CSS-Formatierung oder -Positionierung von Elementen hinzuzufügen. Der hier vorgestellte Grundstock an Funktionen soll vor allem den Zugriff auf Elemente erleichtern und Browser-Abfragen reduzieren.

DOM 1.0 JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Der folgende Quelltext zeigt die vollständige DHTML-Bibliothek. Kopieren Sie sich den vollständigen Quelltext und speichern Sie ihn in einer Textdatei mit dem Namen dhtml.js. Dann haben Sie die externe JavaScript-Datei mit den DHTML-Funktionen.

Beispiel - Datei dhtml.js:

/* DHTML-Bibliothek */

var DHTML = false, DOM = false, MSIE4 = false, NS4 = false, OP = false;

if (document.getElementById) {
  DHTML = true;
  DOM = true;
} else {
  if (document.all) {
    DHTML = true;
    MSIE4 = true;
  } else {
    if (document.layers) {
      DHTML = true;
      NS4 = true;
    }
  }
}
if (window.opera) {
  OP = true;
}

function getElement (Mode, Identifier, ElementNumber) {
  var Element, ElementList;
  if (DOM) {
    if (Mode.toLowerCase() == "id") {
      Element = document.getElementById(Identifier);
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    if (Mode.toLowerCase() == "name") {
      ElementList = document.getElementsByName(Identifier);
      Element = ElementList[ElementNumber];
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    if (Mode.toLowerCase() == "tagname") {
      ElementList = document.getElementsByTagName(Identifier);
      Element = ElementList[ElementNumber];
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    return false;
  }
  if (MSIE4) {
    if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
      Element = document.all(Identifier);
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    if (Mode.toLowerCase() == "tagname") {
      ElementList = document.all.tags(Identifier);
      Element = ElementList[ElementNumber];
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    return false;
  }
  if (NS4) {
    if (Mode.toLowerCase() == "id" || Mode.toLowerCase() == "name") {
      Element = document[Identifier];
      if (!Element) {
        Element = document.anchors[Identifier];
      }
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    if (Mode.toLowerCase() == "layerindex") {
      Element = document.layers[Identifier];
      if (!Element) {
        Element = false;
      }
      return Element;
    }
    return false;
  }
  return false;
}

function getAttribute (Mode, Identifier, ElementNumber, AttributeName) {
  var Attribute;
  var Element = getElement(Mode, Identifier, ElementNumber);
  if (!Element) {
    return false;
  }
  if (DOM || MSIE4) {
    Attribute = Element.getAttribute(AttributeName);
    return Attribute;
  }
  if (NS4) {
    Attribute = Element[AttributeName]
    if (!Attribute) {
       Attribute = false;
    }
    return Attribute;
  }
  return false;
}

function getContent (Mode, Identifier, ElementNumber) {
  var Content;
  var Element = getElement(Mode, Identifier, ElementNumber);
  if (!Element) {
    return false;
  }
  if (DOM && Element.firstChild) {
    if (Element.firstChild.nodeType == 3) {
      Content = Element.firstChild.nodeValue;
    } else {
      Content = "";
    }
    return Content;
  }
  if (MSIE4) {
    Content = Element.innerText;
    return Content;
  }
  return false;
}

function setContent (Mode, Identifier, ElementNumber, Text) {
  var Element = getElement(Mode, Identifier, ElementNumber);
  if (!Element) {
    return false;
  }
  if (DOM && Element.firstChild) {
    Element.firstChild.nodeValue = Text;
    return true;
  }
  if (MSIE4) {
    Element.innerText = Text;
    return true;
  }
  if (NS4) {
    Element.document.open();
    Element.document.write(Text);
    Element.document.close();
    return true;
  }
}

Erläuterung:

Die externe JavaScript-Datei darf nichts anderes als JavaScript-Code enthalten, so wie im Beispiel gezeigt. Im Folgenden werden die globalen Variablen und die Funktionen beschrieben. Denn mit diesen Variablen und Funktionen können Sie arbeiten, wenn Sie die Bibliothek verwenden wollen.

In den globalen Variablen wird gespeichert, welche DHTML-Fähigkeiten der Browser unterstützt. Sie werden direkt am Anfang der Bibliothek automatisch mit ihren Werten versorgt und sollten anschließend nicht mehr geändert werden. Die Wirkungsweise der übrigen Funktionen ist davon abhängig, dass die globalen Variablen mit korrekten Werten versorgt sind.

Um in Erfahrung zu bringen, welches DHTML-Modell verwendet werden muss, wird Seite abgefragt, ob bestimmte Objekte existieren.
Zum Testen auf DOM-Verfügbarkeit eignet sich die Frage, ob Seite document.getElementById existiert, denn das ist eine wichtige DOM-Methode, die in allen DOM-Implementierungen existieren sollte. Beachten Sie, dass manche Browser zwar document.getElementById kennen, aber andere Teile des umfangreichen DOM nicht unterstützen. Wenn Sie spezielle DOM-Techniken verwenden, sollten Sie jeweils im Einzelfall überprüfen, ob die benötigten Objekte zur Verfügung stehen.
Zum Testen auf die ältere Microsoft- und Netscape-Syntax wird auf deren zentrale DHTML-Objekte hin abgefragt. Wenn document.all verfügbar ist, ist Syntax nach dem älteren Microsoft-Modell angesagt. Wenn document.layers verfügbar ist, Syntax nach dem älteren Netscape-Modell.
Zum Schluss wird über window.opera abgefragt, ob es sich um einen Opera-Browser handelt. Dies ist zur Bestimmung des verwendeten DHTML-Modells nicht nötig, aber Opera bedarf an einigen Stellen der Funktionen der Bibliothek einer Sonderbehandlung.

Globale Variable DHTML:

Diese Variable speichert, ob Dynamisches HTML bei dem vom Anwender eingesetzten Browser verfügbar ist oder nicht. Wenn Dynamisches HTML nach irgendeinem der bekannten Kapitel DHTML-Modelle verfügbar ist, dann erhält sie den Wert true (wahr), wenn nicht, dann den Wert false (unwahr). Mit der simplen Abfrage if (DHTML) können Sie dann im Verlauf eines eigenen Scripts überprüfen, ob überhaupt Dynamisches HTML möglich ist.

Globale Variable DOM:

Diese Variable speichert, ob Dynamisches HTML nach DOM-Syntax möglich ist oder nicht (Wert true oder Wert false). Mit if (DOM) können Sie abfragen, ob ein neuerer Browser am Werk ist, der das DOM in seiner JavaScript-Implementierung unterstützt.

Globale Variable MSIE4:

Wenn der Wert der Variable MSIE4 gleich true ist, dann läuft Ihr Script mit auf einem Internet Explorer der 4er-Generation. Mit if (MSIE4) können Sie also in Ihrem Script abfragen, ob mit dem DHTML-Modell des Internet Explorer 4.x gearbeitet werden muss.

Globale Variable NS4:

Wenn diese Variable den Wert true besitzt, dann läuft Ihr Script mit auf einem Netscape-Browser der 4er-Generation. Wenn ein 6er-Netscape oder ein anderer Abkömmling des Mozilla-Browsers eingesetzt wird, ist stattdessen die Variable DOM gleich true, während NS4 gleich false ist. Mit if (NS4) können Sie also in Ihrem Script abfragen, ob mit der DHTML-Syntax des alten 4er-Netscape gearbeitet werden muss.

Globale Variable OP:

Wenn die Variable OP den Wert true hat, dann läuft Ihr Script auf einem Opera-Browser. Mit if (OP) können Sie also in Ihrem Script abfragen, ob ein Opera-Browser am Werk ist. Handelt es sich um einen neueren Opera-Browser, ist in den Variablen DOM der Wert true gespeichert.

Funktion getElement() - Elementobjekt ermitteln:

Beispielaufrufe:

Elementobjekt = getElement("id", "Hinweis");
Elementobjekt = getElement("name", "Eingabefeld", 0);
Elementobjekt = getElement("tagname", "p", 8);
if (NS4) Layerobjekt = getElement("layerindex", 2);

Diese Funktion ist eigentlich die zentrale Funktion der hier vorgestellten Bibliothek. Sie greift auf ein bestimmtes Element im Dokument zu und gibt das Objekt dieses Elements zurück. Das funktioniert mit DOM-fähigen Browsern ebenso wie mit dem älteren Internet Explorer 4.x und in eingeschränkter Form auch mit Netscape 4.x: Sie können in diesem Browser auf Seite Layer und Seite simulierte Layer über deren Namen, ID oder Indexnummer zugreifen sowie auf Grafiken, Links bzw. Anker, Java-Applets und Formulare über deren Namen.

In den meisten Fällen müssen Sie diese Funktion nicht selber aufrufen. Es handelt sich vielmehr um eine Basisfunktion, die von den übrigen Funktionen der Bibliothek benutzt wird. Dennoch gibt es auch Fälle, in denen ein Direktaufruf dieser Funktion einen Sinn hat. Die Funktion erwartet folgende Parameter:

Mode ist die Art und Weise, wie auf ein Element zugegriffen werden soll. Es gibt vier erlaubte Werte für diesen Parameter: "id", "name", "tagname" und "layerindex". Übergeben Sie "id", wenn Sie auf ein Element zugreifen wollen, das ein id-Attribut hat, z.B. <div id="Bereich">. Übergeben Sie "name", wenn das Element, auf das Sie zugreifen wollen, kein id-Attribut, aber dafür ein name-Attribut hat, z.B. <a name="Anker">. Übergeben Sie "tagname", wenn das Element, auf das Sie zugreifen wollen, weder ein id- noch ein name-Attribut hat. Übergeben Sie "layerindex" nur dann, wenn es sich um Netscape-Layer handelt, die über das layers-Objekt mit Hilfe von Indexnummern angesprochen werden sollen.

Identifier ist die nähere Angabe zu dem, was Sie bei Mode festgelegt haben: Wenn Sie bei Mode den Wert "id" übergeben, dann erwartet die Funktion bei Identifier den Wert des id-Attributs. Wenn Sie bei Mode den Wert "name" übergeben, dann erwartet Identifier den Wert des name-Attributs. Wenn Sie bei Mode den Wert tagname übergeben haben, dann erwartet Identifier den gewünschten Elementnamen, also z.B. "h1" oder "div". Wenn Sie bei Mode den Wert "layerindex" übergeben haben, erwartet Identifier die Indexnummer für den gewünschten Netscape-Layer.

ElementNumber wird nur dann benötigt, wenn bei Mode einer der beiden Werte "name" oder "tagname" angegeben wurde. In diesem Fall müssen Sie bei ElementNumber eine Indexnummer angeben, mit der Sie festlegen, das wievielte Element im Dokument mit dem entsprechenden Namen oder Elementnamen Sie meinen. Das erste Element hat die Indexnummer 0, das zweite Nummer 1 usw.

Die Funktion getElement() geht der Reihe nach die möglichen DHTML-Modelle durch und fragt zuerst mit if (DOM) die globale Variable DOM daraufhin ab, ob DOM-Syntax verfügbar ist. Wenn ja, dann wird abhängig von den übergebenen Parametern das gewünschte Element nach DOM-Syntax ermittelt und zurückgegeben. Nur wenn keine DOM-Syntax verfügbar ist, wird versucht, die älteren DHTML-Modelle anzuwenden. Zunächst wird mit if (MSIE4) geprüft, ob das ältere DHTML-Modell von Microsoft verfügbar ist. Wenn ja, wird das Element nach dessen Syntax über das document.all-Objekt ermittelt. Wenn auch die Microsoft-Syntax nicht greift, bleibt noch die ältere Netscape-Syntax, die mit if (NS4) abgefragt wird. In diesem Fall wird aus den übergebenen Parametern der Zugriff auf ein Layer-Objekt konstruiert.

Gleichzeitig erfolgt in der Funktion eine Fehlerbehandlung. In jedem Zweig der Funktion wird jeweils geprüft, ob das gewünschte Element überhaupt existiert. Tritt dieser Fall ein, wird das Element zurückgegeben. Andernfalls wird false zurückgegeben.

Funktion getAttribute() - Attributwert ermitteln:

Beispielaufrufe:

Attribut = getAttribute("name", "Bildname", 0, "height");
Attribut = getAttribute("id", "Bereich", null, "id");
if (!NS4) Attribut = getAttribute("name", "Anker", 0, "href");

Über diese Funktion, die ihrerseits auf die Funktion getElement() zurückgreift, können Sie auf bequeme Weise den Wert eines Attributs eines bestimmten Elements ermitteln - zumindest wenn das DOM-Modell oder das ältere Microsoft-Modell für DHTML verfügbar sind. Neben den drei bereits bekannten ersten Parametern erwartet diese Funktion einen vierten Parameter AttributeName. Bei diesem müssen Sie den Namen des gewünschten Attributs übergeben. Wenn Sie den dritten Parameter ElementNumber nicht angeben, notieren Sie an dessen Stelle das Schlüsselwort null.

Die Funktion getAttribute() benutzt die Objektmethoden Seite getAttribute(), die sowohl im DOM-Modell als auch im älteren Microsoft-Modell verfügbar sind. Bei Netscape 4 dagegen wird die gewünschte Eigenschaft direkt abgefragt.

Die Auswahl des richtigen Objekts übernimmt die Basisfunktion getElement(). Natürlich erfolgt auch in jedem Fall die Überprüfung, ob das gewünschte Objekt überhaupt existiert.

Funktion getContent() - Elementinhalt ermitteln:

Beispielaufrufe:

if (!NS4) Elementinhalt = getContent("id", "Hinweis");
if (!NS4) Elementinhalt = getContent("name", "Verweis", 3);
if (!NS4) Elementinhalt = getContent("tagname", "p", 8);

Über diese Funktion können Sie auf bequeme Weise den Inhalt eines Elements ermitteln - zumindest wenn das DOM-Modell oder das ältere Microsoft-Modell für DHTML verfügbar sind. getContent() bedient sich der Basisfunktion getElement() und reicht ihre drei übergebenen Parameter einfach an jene durch. Bei DOM-Syntax versucht sie, an den Textinhalt des Elements mit firstChild.nodeValue zu kommen, bei Microsoft-Syntax über die Eigenschaft innerText des all-Objekts.

Das ältere Netscape-Modell kennt kein Auslesen von Elementinhalten. In den Beispielaufrufen ist der Funktionsaufruf deshalb davon abhängig gemacht, dass nicht nach älterer Netscape-Syntax gearbeitet wird (if (!NS4)). Sie können diese Funktion zwar auch im Netscape 4 ausführen, sie wird aber immer false anstelle des gewüschten Elementinhalts zurückgeben.

Beachten Sie, dass die Funktion getContent() bei Verwendung des DOM-Modells eine leere Zeichenkette zurückliefert, wenn der erste Kindknoten des Elements kein Text ist, sondern ein weiteres Element. Wenn also beispielsweise notiert ist:
<p id="Absatz">der Text</p>
Dann liefert der Funktionsaufruf getContent("id", "Absatz") den Wert der Text zurück. Wenn aber notiert ist:
<p id="Absatz"><b>der Text</b></p>
Dann liefert der Funktionsaufruf bei Anwendung des DOM-Modells eine leere Zeichenkette zurück, da es keinen Text als Elementinhalt von p gibt, sondern der Inhalt ein anderes Element, nämlich ein b-Element ist.
Die Parameter sind bei getContent() die gleichen wie bei getElement(). Nur der Wert "layerindex" beim Parameter Mode wird von dieser Funktion nicht verarbeitet, da sich dieser auf Netscape-spezifisches Verhalten bezieht.

Die Funktion getContent() kümmert sich auch um ältere Browser, die Inhalte nicht dynamisch lesen können, jedoch andere Teile der Bibliothek interpretieren. Bevor der Versuch unternommen wird, Inhalte zu lesen, fragt sie ab, ob das gewünschte Objekt existiert und ob auch das Objekt Seite firstChild vorhanden ist. Erst wenn diese Bedingung erfüllt ist, wird versucht den Inhalt zu lesen. Dadurch wird in jedem Fall eine Fehlermeldung vermieden.

Funktion setContent() - Elementinhalt dynamisch ändern:

Beispielaufrufe:
setContent("id", "Hinweis", null, "neuer Hinweistext");
setContent("name", "Verweis", 3, "neuer Verweistext");
setContent("tagname", "p", 8, "neuer Textinhalt des Elements");
if (NS4) setContent("layerindex", 2, null, "neuer Inhalt des Layers");

Mit dieser Funktion können Sie den Inhalt eines Elements dynamisch ändern. Die Funktion setContent() bedient sich für den Zugriff auf das gewünschte Element der Basisfunktion getElement(). Die ersten drei Parameter, die bei denen der übrigen Funktionen gleichen, werden dazu an getElement() weitergereicht. Als vierten Parameter Text erwartet die Funktion setContent() den gewünschten Textinhalt. Beachten Sie, dass dieser Text zumindest beim DOM-Modell und beim älteren Microsoft-Modell nur als reiner Text interpretiert wird. HTML-Formatierungen im Text werden dabei als Klartext interpretiert.
Übergeben Sie bei Parametern, für die Sie keinen Wert angeben, das Schlüsselwort null.
Bei Netscape-Layern benutzt die Funktion setContent() automatisch die üblichen Befehle zum Öffnen des Layer-Dokuments (document.Layer.document.open()), zum Schreiben (document.Layer.document.write()) und zum Schließen (document.Layer.document.close()).

Die Funktion setContent() kümmert sich auch um ältere Browser, die Inhalte noch nicht dynamisch ändern können, jedoch andere Teile der Bibliothek interpretieren. Bevor der Versuch unternommen wird, Inhalte zu ändern, fragt sie daher ab, ob das gewünschte Objekt existiert und ob auch das Objekt Seite firstChild existiert. Erst wenn diese Bedingung erfüllt ist, versucht sie den Inhalt zu ändern. Dadurch wird in jedem Fall eine Fehlermeldung vermieden.

DOM 1.0 JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Test der DHTML-Bibliothek

Das folgende Beispiel zeigt, wie Sie die DHTML-Bibliothek verwenden können. Die einzelnen Funktionen werden in dieser Beispieldatei mit konkreten Beispielen aufgerufen. Am besten können Sie die Funktionsweise testen, wenn Sie das Anzeigebeispiel mal mit verschiedenen Browsern aufrufen.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function Testen() {
  var Ausgabetext = "";
  if (DHTML) {
    Ausgabetext += "DHTML ist aktiviert!\n"
  } else {
    Ausgabetext += "DHTML ist nicht aktiviert!\n";
  }
  if (DOM) {
    Ausgabetext += "DOM wird unterstützt!\n";
  } else {
    Ausgabetext += "DOM wird nicht unterstützt!\n";
  }
  if (MSIE4)
    Ausgabetext += "Alte Microsoft-Technologie ohne DOM!\n";
  if (NS4)
    Ausgabetext += "Alte Netscape-Technologie ohne DOM!\n";

  var h1_Inhalt = getContent("tagname", "h1", 0);
  if (h1_Inhalt) {
    Ausgabetext += "Inhalt des h1-Elements: " + h1_Inhalt + "\n";
  } else {
    Ausgabetext += "Inhalt des h1-Elements konnte nicht ermittelt werden!\n";
  }

  var p_Inhalt = getContent("id", "Hinweisabsatz");
  if (p_Inhalt) {
    Ausgabetext += "Inhalt des p-Elements: " + p_Inhalt + "\n";
  } else {
    Ausgabetext += "Inhalt des p-Elements konnte nicht ermittelt werden!\n";
  }

  var Verweis = getContent("name", "Anker", 0);
  if (Verweis) {
    Ausgabetext += "Verweistext: " + Verweis + "\n";
  } else {
    Ausgabetext += "Verweistext konnte nicht ermittelt werden!\n";
  }

  var h1_align = getAttribute("tagname", "h1", 0, "align");
  if (h1_align) {
    Ausgabetext += "Ausrichtung des h1-Elements: " + h1_align + "\n";
  } else {
    Ausgabetext += "Ausrichtung des h1-Elements konnte nicht ermittelt werden!\n";
  }

  var Bild_Hoehe= getAttribute("name", "auge", 0, "height");
  if (Bild_Hoehe) {
    Ausgabetext += "Bildhöhe: " + Bild_Hoehe + " Pixel\n";
  } else {
    Ausgabetext += "Die Bildhöhe konnte nicht ermittelt werden!\n";
  }

  var Bereich_id = getAttribute("id", "Bereich", null, "id");
  if (Bereich_id) {
    Ausgabetext += "id-Name des Bereichs: " + Bereich_id + "\n";
  } else {
    Ausgabetext += "id-Name des Bereichs konnte nicht ermittelt werden!\n";
  }

  setContent("id", "Bereich", null, "Tests sind fertig!");

  alert(Ausgabetext);
}
</script>
<style type="text/css">
#Bereich { position:absolute; top:200px; left:10px; width:500px; height:100px; }
</style>
</head><body>
<h1 align="left">Test der dhtml.js</h1>
<hr noshade="noshade" size="1">
<p id="Hinweisabsatz">Die Tests testen die Funktionen der DHTML-Bibliothek</p>
<p><img name="auge" src="../../../src/auge.gif" width="24" height="16" border="0" alt="Testbild">
<a name="Anker" href="javascript:Testen()">Test starten</a></p>
<div id="Bereich">&nbsp;</div>
</body>
</html>

Erläuterung:

Das Beispiel enthält im sichtbaren Bereich der HTML-Datei eine Überschrift erster Ordnung, einen Textabsatz, einen weiteren Textabsatz mit einem Verweis, vor dem außerdem eine Grafik eingebunden ist, und schließlich einen div-Bereich, der mit Hilfe von CSS absolut positioniert ist. Die entsprechenden CSS-Angaben zur Positionierung stehen im Dateikopf in einem style-Bereich, wo die Formate für #Bereich notiert sind. Generell ist es wegen einiger Schwächen von Netscape 4.x besser, die CSS-Formatierungen der Seite simulierten Layer in einem zentralen Stylesheet gleich im Dateikopf zu notieren und nicht im einleitenden <div>-Tag.

Im Dateikopf sind ferner zwei JavaScript-Bereiche definiert. Der erste ist leer und bindet lediglich die DHTML-Bibliothek ein, die in der externen JavaScript-Datei dhtml.js gespeichert ist. Der zweite Script-Bereich enthält den JavaScript-Code, der die Testaufrufe durchführt.

Das JavaScript innerhalb des Dateikopfes wird aufgerufen, wenn der Anwender auf den Verweis klickt, der in der Datei notiert ist. Dann wird die Funktion Testen() aufgerufen. Diese Funktion wie auch das gesamte JavaScript kann ohne weitere Umwege auf alle globalen Variablen und die Funktionen der DHTML-Bibliothek zugreifen.

Zunächst greift die Funktion Testen() auf die initialisierten globalen Variablen der DHTML-Bibliothek zu und prüft, welches DHTML-Modell verfügbar ist. Abhängig davon, was verfügbar ist, wird die Variable Ausgabetext um einen Text erweitert.

Als nächstes wird mit der Funktion getContent() aus der DHTML-Bibliothek gespielt.
Mit getContent("tagname", "h1", 0) wird via Elementname auf das erste h1-Element (Indexzähler 0) zugegriffen. Der Rückgabewert von getContent() wird in der Variablen h1_Inhalt gespeichert. Abhängig davon, ob diese nach dem Funktionsaufruf eine Zeichenkette mit einer Länge größer 0 enthält (if (h1_Inhalt)), wird die Variable Ausgabetext wieder um einen weiteren Text erweitert.

Zwei weitere Aufrufe von getContent() folgen, die andere Varianten der Parameterversorgung ausprobieren.
Mit getContent("id", "Hinweisabsatz") wird auf das Element mit dem Attribut id="Hinweisabsatz" zugegriffen.
Mit getContent("name", "Anker", 0) wird auf das erste Element im Dokument zugegriffen, bei dem das Attribut name="Anker" notiert ist.

Daran anschließend probiert die Funktion Testen() die Bibliotheksfunktion getAttribute() mit drei Aufrufen aus, einmal über den Elementnamen, einmal über den Tagnamen und einmal über das id-Attribut.

Schließlich wird auch noch setContent() aufgerufen. Damit es in allen Browsern inklusive Netscape 4.x funktioniert, wird der Inhalt des absolut positionierten div-Bereichs neu gesetzt, den Netscape als Layer erkennt.

Am Ende gibt die Funktion Testen() die gesammelten Einzelergebnisse, die sie in der Variablen Ausgabetext zusammengetragen hat, in einem Meldungsfenster aus.

Beachten Sie:

Die DHTML-Bibliothek deckt der Einfachheit halber nicht alle Zugriffsmöglichkeiten ab, die Netscape 4 bietet. Obwohl die Funktion getContent() im Netscape 4 beim Auslesen des Verweistextes scheitert, ist das Auslesen über document.anchors.Anker.text möglich. Auch das Ansprechen von gewissen Elementen - den besagten Grafiken, Java-Applets und Formularen - über deren Indexnummer ist über die DHTML-Bibliothek nur durch umständlich möglich. Wenn Sie ein Element über dessen Tag-Namen ansprechen wollen, können Sie für neuere Browser beim Parameter Mode den Wert "tagname" wählen. Im Netscape 4 können Sie stattdessen die Objekte Seite document.links bzw. Seite document.anchors für a-Elemente, Seite document.applets für applet-Elemente, Seite document.forms für form-Elemente und Seite document.images für img-Elemente verwenden.

DHTML-Bibliothek erweitern

Die hier vorgestellte DHTML-Bibliothek leistet nur einige wenige Grundfunktionen, erleichtert den Zugriff auf Elemente etwas und macht in vielen Fällen den JavaScript-Code etwas übersichtlicher und besser lesbar. Es gibt aber noch vieles, was sie nicht leistet. Wenn Sie häufig mit Dynamischem HTML arbeiten, empfiehlt es sich, wenn Sie die DHTML-Bibliothek um eigene, andere Funktionen erweitern. Wichtig ist bei so einer Funktionsbibliothek, dass alle Funktionen allgemein geschrieben sind. Deshalb erwarten die Funktionen in der Regel mehrere Parameter, um ihren Input für die zu verarbeitenden Daten zu erhalten.

Denkbar wären beispielsweise noch Funktionen, die direkt auf CSS-Eigenschaften von Elementen zugreifen, oder Funktionen, die in der Lage sind, ein Element dynamisch neu zu positionieren. Ausgehend davon sind auch Funktionen möglich, die bestimmte Bewegungsabläufe wie Kreisbahnen usw. berechnen und Elemente entsprechend positionieren. Andere denkbare Funktionen könnten sich dem leider noch ziemlich komplizierten, weil sehr unterschiedlich implementierten Event-Handling widmen und dort einiges vereinfachen.

Eine Funktionsbibliothek sollte andererseits jedoch nicht zu groß werden. Denn wenn Sie am Ende zig Kilobyte externes JavaScript einbinden, um drei triviale Anweisungen zu notieren, dann ist eine Funktionsbibliothek nicht angemessen. In solchen Fällen ist es besser, die paar Befehle ohne Zuhilfenahme einer Funktionsbibliothek zu notieren.

Achten Sie stets darauf, dass Ihre Bibliotheken eine Fehlerhandlung durchführen und jeweils die Verfügbarkeit der angesprochenen Objekte überprüft.

nach oben
weiter | Seite Dynamische Navigationsleiste
zurück | Seite Dynamische Filter (nur Microsoft)
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML Teil von Beispiele für die Praxis

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Dynamische Navigationsleiste

SELFHTML

Dynamische Navigationsleiste
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus

nach unten

Hinweise zu diesem Beispiel

Auf vielen Web-Seiten nimmt die Navigation eigentlich viel zu viel Platz weg. Da wird oft ein Drittel des Anzeigefensters geopfert, um eine oder zwei Handvoll Links zu anderen Projektseiten anzubieten. Mit diesen Platzproblemen macht das Beispiel auf dieser Seite Schluss. Bei dieser Lösung gehört die Web-Seite der freien inhaltlichen Gestaltung und dem Text. Die Navigation blendet sich nur dann ein, wenn der Anwender es will. Dazu muss er auch nicht extra irgendwo hinklicken. Er bewegt einfach die Maus Richtung linken Fensterrand, und schon blendet sich dort die Navigationsleiste ein. Bewegt er die Maus wieder weg vom linken Fensterrand, blendet sich die Navigationsleiste automatisch wieder aus. Diesen Effekt kennen viele Anwender in ähnlicher Form von der Windows-Taskleiste und sind deshalb damit vertraut.

Das Beispiel funktioniert mit den Browsern ab der 4er-Generation. Das Beispiel zeigt vor allem, wie man das Problem der unterschiedlichen Event-Handling-Modelle bei den Browsern in den Griff bekommen kann. Das Beispiel benutzt ferner die Seite DHTML-Bibliothek, um auf Elemente zuzugreifen.

DOM 1.0 JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 5.12 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei mit der dynamischen Navigation. Wenn Sie die Navigation auf mehreren Seiten haben wollen, müssen Sie den JavaScript-Code entweder in alle Seiten einbauen, oder Sie lagern ihn in eine externe JavaScript-Datei aus und binden diese einfach nur ein.

Die Datei dhtml.js, in der die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus ( Seite DHTML-Bibliothek)

<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function Menue () {
  if (typeof window.pageYOffset == "number") {
    if (NS4) {
      getElement("id", "Nav").top = window.pageYOffset + 50;
    } else {
      getElement("id", "Nav").style.top = window.pageYOffset + 50;
    }
  } else {
    if (typeof document.body.scrollTop == "number")
      getElement("id", "Nav").style.top = document.body.scrollTop + 50;
  }
  if (OP)
    getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
  if (NS4) {
    getElement("id", "Nav").visibility = "show";
  } else {
    getElement("id", "Nav").style.visibility = "visible";
  }
}

function noMenue () {
  if (NS4) {
    getElement("id", "Nav").visibility = "hide";
  } else {
    getElement("id", "Nav").style.visibility = "hidden";
  }
}

function handleMove (ev) {
  if (!ev)
    ev = window.event;
  var mausposition = ev.pageX ? ev.pageX : ev.clientX;
  if (mausposition < 20) {
      Menue();
  } else {
    if (mausposition > 250) {
      noMenue();
    }
  }
}

function Event_init () {
  if (document.addEventListener) {
    document.addEventListener("mousemove", handleMove, true);
  } else {
    if (NS4) {
      document.captureEvents(Event.MOUSEMOVE);
      document.onmousemove = handleMove;
    } else {
      document.body.onmousemove = handleMove;
    }
  }
  if (OP) {
    NavLinksPos = 42; // Position des Bereiches NavLinks
    getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
  }
}
</script>
<style type="text/css">
body { color:black; background-color:white; background-image:url(navigation_back.gif);
  margin:0; padding:20px 50px; font-family:Tahoma,sans-serif; }
#Nav { position:absolute; top:50px; left:0; visibility:hidden; }
#NavLinks { position:absolute; top:42px; left:42px; }
#Nav a:link {color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:visited { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:hover { color:#FFFFFF; background-color:#000080; font-weight:bold;
  font-size:13px; text-decoration:none; }
#Nav a:active { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
</style>
</head>
<body onload="Event_init()">

<div id="Nav">
 <img src="navigation.gif" width="250" height="450" border="0" alt="">
 <div id="NavLinks">
  <a href="http://de.selfhtml.org/">SELFHTML</a><br>
  <a href="http://aktuell.de.selfhtml.org/">SELFHTML aktuell</a><br>
  <a href="http://forum.de.selfhtml.org/">SELFHTML-Forum</a><br>
  <a href="http://aktuell.de.selfhtml.org/artikel/">Artikel</a><br>
 </div>
</div>

<h1>Die Seite mit der pfiffigen Navigation</h1>

<p>Einfach mit die Maus Richtung linken Fensterrand bewegen.
Um das Men&uuml; wieder wegzubekommen, Maus wieder zum rechten Fensterrand bewegen.</p>

<p>Und jetzt kommen noch etliche leere Abs&auml;tze, damit auch sichtbar wird,
dass das Men&uuml; immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.</p>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<p>Na, das d&uuml;rfte reichen :-)</p>

</body>
</html>

Erläuterung:

Im sichtbaren HTML-Bereich der Datei ist zunächst ein größerer div-Bereich notiert, der mit Hilfe von CSS-Eigenschaften im style-Bereich im Dateikopf absolut positioniert wird. Durch die Angabe visibility:hidden wird zunächst einmal alles, was sich in diesem Bereich befindet, nicht angezeigt. Innerhalb dieses Bereichs mit dem id-Namen Nav ist zunächst eine Grafik notiert (navigation.gif) und anschließend ein weiterer, absolut positionierter div-Bereich, wobei aber dort CSS-Zuweisungen wie top:42px oder left:42px als relativ zur oberen linken Ecke des Eltern-div-Bereichs zu interpretieren sind. Die Grafik Beispiel-Seite navigation.gif ist einfach eine optische Unterlage für den nachfolgenden div-Bereich, der die eigentlichen Verweise der Navigationsleiste enthält.

Der Rest des in der Datei notierten statischen HTML-Codes ist für das Beispiel nicht wichtig. Die vielen Textabsätze mit dem erzwungenen Leerzeichen &nbsp; dazwischen dienen nur dazu, viel Dokumenthöhe zu erzeugen, sodass man in der Datei scrollen kann. Denn es soll demonstriert werden, dass die dynamische Navigationsleiste immer an der gleichen Stelle erscheint, auch wenn im Dokument gescrollt wird.

Im einleitenden <body>-Tag der Datei ist der Seite Event-Handler onload notiert. Wenn das Dokument vollständig geladen ist, wird die Funktion Event_init() aufgerufen. Event_init() stößt die Überwachung der Mausbewegungen im Dokument an. Denn nur wenn eine solche Überwachung stattfindet, kann die Navigationsleiste dynamisch eingeblendet werden.

Event-Handling ist leider ein schwieriges Kapitel, da die Implementierungen bislang doch noch recht unterschiedlich sind. Das Beispiel versucht es erst mal nach der neueren DOM-Syntax. Die Abfrage if (document.addEventListener) stellt sicher, dass nur die Browser in den diesen Ausführungszweig nicht gelangen, die Event-Handling nach DOM-Syntax interpretieren. In den entsprechenden Zweig gelangt aber Netscape 6, der die Methode addEventListener() versteht. Mit addEventListener() wird nach DOM-Syntax eine Funktion bestimmt, die aufgerufen wird, wenn ein bestimmtes Ereignis eintritt. Im Beispiel wird das Ereignis mousemove überwacht. Während der Anwender im Dokumentbereich die Maus bewegt, bewirkt diese "Registrierung", dass dann so oft es geht die Funktion handleMove() aufgerufen wird. Zur Bestimmung des zu überwachenden Elementes wird die Funktion getElement() der Seite DHTML-Bibliothek aufgerufen.

Mit if (NS4) fragt die Funktion Event_init() ab, ob ein Netscape-Browser der 4er-Generation am Werk ist. Dort gibt es ebenfalls eine "Registrierung" für Ereignisse. Mit document.captureEvents(Event.MOUSEMOVE) wird das Ereignis "Mausbewegung" registriert, und mit document.onmousemove = handleMove wird die Funktion handleMove() aufgerufen, wenn das Ereignis eintritt.

Für die übrigen Browser erfolgt die Initialisierung der Eventüberwachung mit document.onmousemove = handleMove. Da Opera 5 unter Windows offensichtlich die Position des Div-Bereich NavLinks vergisst, wird die im Stylessheet-Bereich festgelegte Position in der Variablen NavLinksPos gespeichert. Anschließend wird der Bereich NavLinks neu positioniert. Damit auch ältere Versionen von Opera 5 damit zurecht kommen, wird die Eigenschaft pixelTop verwendet. Zur Bestimmung des Elementes wird die Funktion getElement() der DHTML-Bibliothek aufgerufen.

In der Funktion handleMove() sind verschiedene Fallunterscheidungen nötig, um die Mausposition in Erfahrung zu bringen. Im Internet Explorer wird auf das Event-Objekt, das die Daten des Ereignisses enthält, über Seite window.event zugegriffen. In DOM-kompatiblen Browsern sowie in Netscape 4 wird das Event-Objekt als Parameter an die Funktion übergeben, im Beispiel trägt er den Namen ev. Mit if (!ev) wird abgefragt, ob der Parameter gesetzt wurde. Wenn dies nicht der Fall ist, wird mit in ev eine Referenz auf window.event gespeichert. Somit kann das Event-Objekt in jedem Fall über ev angesprochen werden.
Neben den verschiedenen Arten, auf das Event-Objekt zuzugreifen, werden zwei Varianten verwendet, um je nach Browser die Mausposition abzufragen. Die Eigenschaft pageX enthält die horizontale Mausposition gemessen vom linken Dokumentrand, die Eigenschaft clientX gemessen vom linken Fensterrand. In der Praxis sollte dies keinen Unterschied machen. Während clientX dem Internet Explorer und älteren Opera-Versionen bekannt ist, wird pageX von Netscape 4, Netscape 6 sowie neueren Opera-Versionen verstanden. Der Wert der jeweiligen Eigenschaft wird in der Variable mausposition gespeichert.
Wenn nun der Abstand des Mauszeigers vom linken Rand geringer ist als 20 Pixel, wird die Funktion Menu() aufgerufen. Wenn er höher als 250 Pixel ist, die Funktion noMenu().

Die Funktion Menu() blendet die Navigationsleiste ein, und die Funktion noMenu() sorgt dafür, dass die Navigationsleiste nicht oder nicht mehr sichtbar ist. Beide Funktionen führen zu diesem Zweck wieder diverse if-Abfragen zur DHTML-Modellunterscheidung durch und ändern letztendlich hauptsächlich die CSS-Eigenschaft visibility (Sichtbarkeit) des großen div-Bereichs mit dem ID-Namen Nav. Die Funktion Menu() sorgt allerdings außerdem dafür, dass der von ihr auf sichtbar geschaltete Navigationsbereich auch immer schön im sichtbaren Bereich des Dokuments angezeigt wird, egal, wohin der Anwender im Dokument gescrollt hat. Dazu muss die Funktion die aktuelle Pixelposition der "Klopapierrolle" ermitteln, die ein langes Dokument darstellt. Auch dabei ist die Syntax leider wieder völlig unterschiedlich bei den Browsern. Beim Internet Explorer kommt die Funktion über die Eigenschaft document.body.scrollTop an den gewünschten Wert, und bei Netscape-Browsern und Opera über window.pageYOffset. Zu dem ermittelten Wert werden noch mal 50 Pixel dazugezählt, denn in dem div-Bereich mit dem ID-Namen Nav ist ja als top-Angabe, also als Startposition von oben gesehen, ebenfalls der Wert 50 angegeben.
Da Opera 5 beim Ändern der Fenstergröße mit JavaScript gesetzte Positionen "vergisst", wird vor jedem Einblenden des Menüs dem Bereich NavLinks die in der Variablen NavLinksTop gespeicherte Position zugewiesen.

Beachten Sie:

Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. Seien Sie sich auch im Klaren darüber, dass Anwender mit nicht DHTML-fähigen Browsern oder deaktiviertem JavaScript so wie das Beispiel oben notiert ist überhaupt keine Möglichkeit zur Navigation haben. Um zumindest Anwendern, die JavaScript deaktiviert haben, ein Navigieren zu ermöglichen, könnten Sie beispielsweise an einer geeigneten Stelle im normalen Text einen Seite noscript-Bereich notieren, in dem Sie die Navigationsverweise noch mal notieren.

nach oben
weiter | Seite Laufende Datums-/Uhrzeitanzeige
zurück | Seite Allgemeine DHTML-Bibliothek
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML Teil von Beispiele für die Praxis

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Laufende Datums-/Uhrzeitanzeige

SELFHTML

Laufende Datums-/Uhrzeitanzeige
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus

nach unten

Hinweise zu diesem Beispiel

Dieses Beispiel zeigt, wie Sie eine laufende Uhr, die Sie beliebig formatieren können, so realisieren können, dass sie ab Internet Explorer V4.x und Netscape V4.x funktioniert. In der Praxis eignet sich eine solche laufende Uhr z.B. für Seiten, die dauerhaft eingeblendet werden, z.B. in einem Frame-Fenster, dessen Inhalt sich beim Surfen nicht ändert, oder auf Seiten, die Multimedia-Spiele oder einen eingebetteten Chat enthalten - also auf Seiten, die der Anwender lange anzeigt, ohne darin weiterzuscrollen oder die Seite zu verlassen.

Das Beispiel benutzt die Seite DHTML-Bibliothek, um das zu leisten, was in dem Beispiel an dynamischem HTML erforderlich ist.

DOM 1.0 JavaScript 1.2 Netscape 4.x MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei, in der die laufende Datums-/Uhrzeit-Anzeige eingebettet ist. Die Datei dhtml.js, in der die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus ( Seite DHTML-Bibliothek)

<html><head>
<title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function ZeitAnzeigen () {
  var Wochentagname = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch",
                                "Donnerstag", "Freitag", "Samstag");
  var Jetzt = new Date();
  var Tag = Jetzt.getDate();
  var Monat = Jetzt.getMonth() + 1;
  var Jahr = Jetzt.getYear();
  if (Jahr < 999)
    Jahr += 1900;
  var Stunden = Jetzt.getHours();
  var Minuten = Jetzt.getMinutes();
  var Sekunden = Jetzt.getSeconds();
  var WoTag = Jetzt.getDay();
  var Vortag = (Tag < 10) ? "0" : "";
  var Vormon = (Monat < 10) ? ".0" : ".";
  var Vorstd = (Stunden < 10) ? "0" : "";
  var Vormin = (Minuten < 10) ? ":0" : ":";
  var Vorsek = (Sekunden < 10) ? ":0" : ":";
  var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
  var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;
  var Gesamt = Wochentagname[WoTag] + ", " + Datum + ", " + Uhrzeit;

  if (DHTML) {
    if (NS4) {
      setContent("id", "Uhr", null, '<span class="Uhr">' + Gesamt + "<\/span>");
    } else {
      setContent("id", "Uhr", null, Gesamt);
    }
    window.setTimeout("ZeitAnzeigen()", 1000);
  }
}

</script>
<style type="text/css">
#Uhr { position:absolute; top:10px; left:10px; }
#RestDerSeite { position:absolute; top:50px; left:10px; }
.Uhr { font-family:Arial; font-size:24px; color:blue; }
.RestDerSeite { font-family:Arial; color:black; }
</style>

</head>
<body onload="window.setTimeout('ZeitAnzeigen()', 1000)">

<div id="Uhr" class="Uhr">&nbsp;</div>

<div id="RestDerSeite" class="RestDerSeite">

<h1>Willkommen auf dieser Seite</h1>
<p>hier gehts ganz normal weiter</p>

</div>

</body>
</html>

Erläuterung:

Im Körper der HTML-Datei im Beispiel werden insgesamt zwei div-Bereiche definiert. Beide Bereiche erhalten einen id-Namen und erhalten über den jeweiligen id-Namen im style-Bereich im Dateikopf entsprechende CSS-Eigenschaften zugewiesen. Beide Bereiche werden absolut positioniert. Ohne diesen Trick wäre die ganze Sache mit Netscape 4.x nicht realisierbar. Der erste Bereich dient zur Anzeige von Datum und Uhrzeit, und der zweite Bereich enthält den gesamten restlichen Inhalt der Datei, weshalb er auch den Namen RestDerSeite trägt.

Der erste Bereich enthält zunächst nur ein geschütztes Leerzeichen. So sieht man zunächst noch nichts von dem Bereich, aber das Leerzeichen ist wichtig, damit der Bereich einen Inhalt hat. Ansonsten würde beim ersten dynamischen Zugriff auf seinen Inhalt mit DOM-fähigen Browsern und den Funktionen der DHTML-Bibliothek ein Fehler erzeugt.

Die Beispieldatei enthält ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden, im zweiten steht die Funktion ZeitAnzeigen(), die für die Zeitanzeige verantwortlich ist. Im einleitenden <body>-Tag ist der Seite Event-Handler onload, der eintritt, wenn die Datei und alle ihre eingebundenen Ressourcen vollständig geladen sind. Diesem Event-Handler ist ein Funktionsaufruf zugeordnet. Er startet die Funktion ZeitAnzeigen(), jedoch eingebettet in eine Seite setTimeout-Anweisung, die den Aufruf um 1 Sekunde bzw. 1000 Millisekunden verzögert. In der ersten Sekunde wird also noch nichts angezeigt.

Innerhalb der Funktion ZeitAnzeigen() wird zunächst ein Seite Array für die deutschen Wochentage definiert. Anschließend ermittelt die Funktion mit Hilfe des Seite Date-Objekts die aktuelle Zeit. Mit Hilfe diverser Formatierbefehlen erzeugt sie dann eine Zeichenkette, die eine ordentliche Datums-/Uhrzeitdarstellung Konvention nach deutscher Konvention enthält. Diese Zeichenkette wird in der Variablen mit dem Namen Gesamt gespeichert. All diese Dinge haben noch nichts mit der Anzeige zu tun.

Der eigentliche DHTML-Teil ist dank der eingebundenen DHTML-Bibliothek kein großes Problem. Mit if (DHTML) wird zunächst abgefragt, ob überhaupt Dynamisches HTML verfügbar ist. Der gesamte Code zum dynamischen Schreiben in den div-Bereich wird davon abhängig gemacht. So werden Fehlermeldungen in Browsern vermieden, die zwar JavaScript, aber kein Dynamisches HTML beherrschen. Dann wird abgefragt, ob mit dem älteren Netscape-Modell gearbeitet wird. Wenn ja, sieht das dynamische Schreiben in den div-Bereich ein klein wenig anders aus als in den übrigen Fällen. Der Grund ist eine weitere Schwäche des Netscape-4-Browsers. Er würde die CSS-Klasse Uhr im einleitenden div-Tag ignorieren, wenn man sie ihm nicht noch mal in Form eines span-Elements mit in den dynamischen Bereich schreiben würde. Nur so erhält die Datums-/Uhrzeitanzeige die CSS-Formatierungen, die im Dateikopf im style-Bereich für die Uhr-Klasse festgelegt werden. Das dynamische Ändern des div-Inhalts geschieht durch Aufruf der Bibliotheksfunktion setContent(), die sich um alle weiteren Einzelheiten kümmert.

In der letzten Anweisung innerhalb der Funktion ZeitAnzeigen() ruft sich die Funktion selber wieder auf, und zwar wieder mit einer durch window.setTimeout() bewirkten Zeitverzögerung von 1000 Millisekunden oder einer Sekunde. Dadurch passiert eine Sekunde lang nichts, und dann wird die Zeit erneut geschrieben.

nach oben
weiter | Seite Bilderbuch zum Umblättern
zurück | Seite Dynamische Navigationsleiste
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML Teil von Beispiele für die Praxis

© 2007 Seite Impressum


SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Bilderbuch zum Umblättern

SELFHTML

Bilderbuch zum Umblättern
Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus

nach unten

Hinweise zu diesem Beispiel

Es gibt Seiten, auf denen Ihre Besucher Bilder sehen wollen. Wenn Sie beispielsweise über eine Stadt oder ein Land berichten oder über ein Treffen mit Freunden, mögen die Besucher gerne Bilder davon sehen. Das hier vorgestellte Beispiel zeigt, wie man solche Bilder einmal anders präsentieren kann. Ohne viel scrollen oder andere Seiten aufrufen zu müssen, kann der Anwender in den vorhandenen Bildern vor- und zurück blättern. Damit der Bildaufbau auch mal etwas anders aussieht als sonst, ist eine Art "Vorhang-Auf"-Effekt eingebaut. Die Bilder werden nicht einfach angezeigt, sondern "enthüllt".

DOM 1.0 JavaScript 1.2 Netscape 4.0 MS IE 4.0 Opera 7 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei mit dem Bilderbuch.

Die Datei dhtml.js, in der die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus ( Seite DHTML-Bibliothek)

<html><head>
<title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
var Bild = new Array();
Bild[0] = new Image();
Bild[0].src = "bilderbuch01.gif";
Bild[1] = new Image();
Bild[1].src = "bilderbuch02.gif";
Bild[2] = new Image();
Bild[2].src = "bilderbuch03.gif";
Bild[3] = new Image();
Bild[3].src = "bilderbuch04.gif";
Bild[4] = new Image();
Bild[4].src = "bilderbuch05.gif";

var bildbereich;
var zeige = 0;
var Breite = 300;
var aktuelleBreite = 0;
var Schrittweite = 6;
var Schrittverzoegerung = 1;

function Blaettern (Richtung) {
  zeige = zeige + Richtung;
  if (zeige > Bild.length - 1) {
    zeige = 0;
  } else if (zeige < 0) {
    zeige = Bild.length - 1;
  }
  if (DOM || MSIE4) {
    bildbereich.style.clip = "rect(0 0 225px 0)";
  } else if (NS4) {
    bildbereich.clip.right = 0;
  }
  if (DOM && bildbereich.firstChild) {
    bildbereich.firstChild.src = Bild[zeige].src;
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + Bild[zeige].src + '">';
  } else if (NS4) {
    bildbereich.visibility = "hide";
    setContent("id", "Bildbereich", null,
      '<img src="' + Bild[zeige].src + '">');
    bildbereich.visibility = "show";
  }
  BildAufbauen();
}

function BildAufbauen () {
  if (aktuelleBreite <= Breite) {
    if (DOM || MSIE4) {
      bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 225px 0)";
    } else if (NS4) {
      bildbereich.clip.right = aktuelleBreite;
    }
    aktuelleBreite = aktuelleBreite + Schrittweite;
    window.setTimeout("BildAufbauen()", Schrittverzoegerung);
  } else {
    aktuelleBreite = 0;
    if (DOM || MSIE4) {
      bildbereich.style.clip = "rect(0 " + Breite + "px 225px 0)";
    } else if (NS4) {
      bildbereich.clip.right = Breite;
    }
  }
}

function Init () {
  bildbereich = getElement("id", "Bildbereich");
  if (DOM && document.createElement && bildbereich.appendChild) {
    var img = document.createElement("img");
    img.setAttribute("src", Bild[0].src);
    bildbereich.appendChild(img);
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + Bild[0].src + '">';
  } else if (NS4) {
    setContent("id", "Bildbereich", null,
      '<img src="' + Bild[0].src + '">');
  }
}
</script>
<style type="text/css">
body { color:black; background-color:white; }
#Bildbereich { position:absolute; left:10px; top:140px; padding:0;
  clip:rect(0 300px 225px 0); visibility:show; }
#Navigationsbereich { position:absolute; left:320px; top:140px;
  width:100px; font-size:24px; }
</style>

</head>
<body onload="Init()">

<div id="Bildbereich"></div>

<div id="Navigationsbereich">
[<a href="javascript:Blaettern(-1)">&lt;&lt;</a>]
[<a href="javascript:Blaettern(1)">&gt;&gt;</a>]
</div>

</body>
</html>

Erläuterung:

Im Körper der HTML-Datei des Beispiels werden zwei div-Bereiche definiert. Der erste <div>-Bereich ist zum Anzeigen der jeweils aktuellen Grafik gedacht. Der zweite Bereich enthält Verweise, mit deren Hilfe der Anwender vorwärts und rückwärts durch die Grafiken blättern kann. Beide Bereiche werden mit Hilfe entsprechender CSS-Eigenschaften absolut positioniert. Die entsprechenden CSS-Definitionen stehen im Dateikopf im style-Bereich und beziehen sich auf die ID-Namen der Bereiche.

Die Beispieldatei enthält ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden. Im einleitenden <body>-Tag wird die Funktion Init() aufgerufen, die im JavaScript im Dateikopf notiert ist. Diese Funktion sorgt dafür, dass das erste Bild angezeigt wird.

Damit das Beispiel des Bilderbuches zum Umblättern sauber funktioniert, passiert jedoch schon vorher etwas. Gleich beim Einlesen der Datei, also außerhalb jeder Funktion, wird der JavaScript-Code ausgeführt, der zu Beginn des zweiten JavaScript-Bereichs notiert ist. Dort werden erst mal alle Grafiken eingelesen, die im Verlauf des Umblätterns angezeigt werden sollen. Denn nur wenn die Grafiken zu diesem Zeitpunkt bereits im Arbeitsspeicher sind, gibt es keine Synchronisationsprobleme. Dazu kommt das Seite images-Objekt von JavaScript zum Einsatz. Zuerst wird ein neuer, leerer Seite Array angelegt. Dann wird der Array mit Grafikobjekten gefüllt. Dem jeweiligen Image-Objekt, das zu diesem Zweck erzeugt wird, wird über die src-Eigenschaft eine gewünschte Grafikdatei zugewiesen.

Anschließend werden noch ein paar globale Variablen definiert, die später benötigt werden.

Die Funktion Init() zeigt dann nach ihrem Aufruf die erste Grafik innerhalb des vorgesehenen Anzeigebereichs an. Dabei ist einige Unterscheidungsarbeit nötig, um die verschiedenen Browser und ihre DHTML-Modelle zu bedienen. In Browsern, die das DOM-Modell unterstützen, wird mit den Funktionen Seite createElement() und Seite setAttribute() der img-Elementknoten für das neue Bild erzeugt. Mit Seite appendChild() wird das Bild anschließend an das div-Element mit der ID Bildbereich gehängt. Der Internet Explorer 4 gelangt dagegen in den Zweig, der mit else if (MS4) beginnt. Dort wird die Elementknoten-Eigenschaft innerHTML genutzt, um den gewünschten HTML-Code zusammenzubasteln. Schließlich bleibt noch Netscape 4.x übrig, der in den Zweig else if (NS4) gelangt und die Grafik mit der Funktion setContent() aus der DHTML-Bibliothek zusammengesetzt bekommt. An diesem Beispiel sehen Sie deutlich, wie mühsam das Unterscheiden zwischen Browsern und DHTML-Modellen oft ist. Außerdem können Sie sehen, dass das DOM-Modell bei allen Vorteilen manchmal auch sehr umständlich zu handhaben ist. Eine Eigenschaft wie das Microsoft-proprietäre innerHTML gibt es im W3C-DOM nicht, weil dort neue Knoten streng nach den Regeln der Auszeichnungssprachen-Syntax erstellt und zusammengestellt werden müssen.

Das Blättern zwischen einzelnen Grafiken wird durch die beiden Verweise im zweiten div-Bereich angestoßen. Beide Verweise rufen die gleiche Funktion namens Blaettern() auf, jedoch mit unterschiedlicher Parameterübergabe. Der Vorwärtsverweis übergibt 1, der Rückwärtsverweis -1. Dadurch kann die Funktion Blaettern() diesen Parameter gleich zur Verwaltung benutzen.

Die Funktion Blaettern() fragt zunächst ab, ob entweder das erste oder das letzte Bild der Serie erreicht ist und legt im entsprechenden Fall wieder das letzte bzw. erste Bild als das anzuzeigende fest. So entsteht ein Endlos-Effekt für den Anwender beim Blättern. Anschließend wird der Inhalt des Anzeigebereichs für das Bild neu geschrieben bzw. das src-Attribut des vorhandenen Bildes aktualisiert. Dabei muss ebenso mühsam zwischen den Fähigkeiten der Browser unterschieden werden. Am Ende wird dann noch die Funktion BildAufbauen() aufgerufen.

Die Funktion BildAufbauen() ist für den dynamischen Aufroll-Effekt beim Anzeigen der neuen Grafik zuständig. Dazu wird von der CSS-Eigenschaft Seite clip Gebrauch gemacht. Um sie zu setzen, wird das Seite style-Objekt verwendet. Das Setzen im Netscape 4.x erfordert eine andere Syntax, daher ist erneut eine Fallunterscheidung über if ... else ... nötig. Nach der Wertveränderung des rechten Clip-Rands ruft sich die Funktion BildAufbauen() mittels Seite window.setTimeout() zeitverzögert selbst auf. Dabei kommen die Variablen Schrittweite und Schrittverzoegerung zum Einsatz, die zu Beginn des Script-Bereichs notiert sind. Probieren Sie dort bei der anfänglichen Wertzuweisung ruhig auch mal andere Werte aus.
Am Ende, wenn die oberste if-Bedingung der Funktion BildAufbauen() erfüllt ist, nämlich dass die aktuelle Breite größer als die Anzeigebreite der Grafik ist, gelangt die Funktion in den else-Zweig. Dort wird der clip-Wert für rechts auf den Endwert gesetzt, und die Prozedur des Umblätterns ist abgeschlossen.

nach oben
weiter | Seite Einführung in Perl
zurück | Seite Laufende Datums-/Uhrzeitanzeige
Teil von SELFHTML/Navigationshilfen Teil von Dynamisches HTML Teil von Beispiele für die Praxis

© 2007 Seite Impressum


SELFHTML: Perl

SELFHTML

Perl
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML, Kapitel Web-Technologien allgemein sowie die Bemerkungen zu Seite CGI.
Dieser Abschnitt führt in das Erstellen eigener CGI-Scripts ein. Dabei wird Perl als typische Scriptsprache verwendet.
Der Abschnitt besteht aus folgenden Unterabschnitten:

Seite Einführung in Perl
Kapitel Perl-Sprachelemente
Kapitel Perl-Funktionen
Kapitel Perl-Module

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen, Anwendungsbeispiele und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zu CGI und Perl
Online-Seite WWW-Links zu anderen Seiten über CGI und Perl

nach oben

© 2007 Seite Impressum


SELFHTML: Perl / Perl lokal auf einem PC einrichten

SELFHTML

Einführung in Perl
Informationsseite

nach unten Der Perl-Interpreter
nach unten Perl-Interpreter installieren
nach unten Perl-Interpreter mit CGI-Script testen
nach unten Aufrufmöglichkeiten des Perl-Interpreters
nach unten Erste Zeile eines Perl-Scripts
nach unten Anweisungen notieren
nach unten Anweisungsblöcke notieren
nach unten Kommentare in Perl
nach unten Regeln für selbst vergebene Namen
nach unten Sauberer Programmierstil
nach unten

Der Perl-Interpreter

Der Perl-Interpreter ist freie Software nach dem Recht der Artistic License ( englischsprachige Seite http://www.perl.com/language/misc/Artistic.html) und für etliche Betriebssysteme verfügbar. Außerdem ist der Quellcode des Interpreters verfügbar, sodass Sie ihn, wenn Sie einen C-Compiler haben, für Ihren Rechner compilieren können. Sie können den Perl-Interpreter aus dem WWW downloaden.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie weitere Links zu den Downloadmöglichkeiten des Perl-Interpreters:

Online-Seite SELFHTML-Linkverzeichnis: Perl

Für Windows-Anwender ist das Angebot ActivePerl von englischsprachige Seite ActiveState zu empfehlen, da es sehr einfach zu installieren ist und die umfangreiche Perl-Originaldokumentation im HTML-Format zum Lesen im Browser mitgeliefert wird.

Perl-Interpreter installieren

Je nach Betriebssystemumgebung müssen Sie den Perl-Interpreter manuell installieren, oder ein automatisch aufgerufenes Installationsprogramm führt für Sie alle nötigen Kopiervorgänge und Einstellungen durch. Wenn es kein ausführbares Installationsprogramm gibt, finden Sie nach dem Entpacken des heruntergeladenen Sourcen-Archivs auf jeden Fall Hilfedateien vor, in denen beschrieben wird, wie der Interpreter zu installieren ist.

Wenn Sie den Perl-Interpreter für die Seite CGI-Schnittstelle Ihres eigenen Webservers nutzen wollen, müssen Sie beim Seite Einrichten des eigenen WWW-Servers je nach Betriebssystemumgebung und Server-Software eventuell den vollständigen Pfadnamen der ausführbaren Perl-Interpreter-Datei angeben. Nach einer typischen Installation des Perl-Interpreters liegt diese im Programmunterverzeichnis bin und heißt perl oder (unter Windows) perl.exe.

Perl-Interpreter mit CGI-Script testen

Wenn Sie einen Seite lokalen Webserver installiert und in dessen Einstellungen ein CGI-Verzeichnis bestimmt haben, können Sie nach der Installation des Perl-Interpreters Ihr erstes eigenes lokales CGI-Script ausführen. Den Quellcode des folgenden Perl-Scripts können Sie mit einem Texteditor im eingestellten CGI-Verzeichnis beispielsweise unter dem Namen test.pl abspeichern. Angenommen, Ihr CGI-Verzeichnis heißt wie üblich cgi-bin und der Webserver ist gestartet, dann können Sie das Script im Browser mit der Adresse http://127.0.0.1/cgi-bin/test.pl oder auch mit der Adresse http://localhost/cgi-bin/test.pl aufrufen.

Beispiel: Datei test.pl

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<h1>Hurra, es klappt!</h1>\n";
print "</body></html>\n";

Erläuterung:

Das Script gibt, wenn es aufgerufen wird, einfach ein wenig HTML-Code aus. Auf die Perl-Anweisungen wird an dieser Stelle noch nicht näher eingegangen. Nur die nach unten erste Zeile des Scripts (die so genannte shebang) müssen Sie möglicherweise anpassen. Dort, wo im Beispiel #!/usr/bin/perl steht, müssen Sie, falls Sie beim Aufruf eine Fehlermeldung wie Internal Server Error erhalten, den kompletten Pfad zur ausführbaren Datei, also zum Perl-Interpreter, angeben. Wenn Sie den Perl-Interpreter unter Windows beispielsweise in c:\programme\perl installiert haben, lautet Ihre erste Script-Zeile also:
#!c:/programme/perl/bin/perl
Die Dateinamen-Erweiterung .exe können Sie ohne weiteres weglassen.

Aufrufmöglichkeiten des Perl-Interpreters

Um eigene Perl-Scripts auszuführen bzw. zu testen müssen Sie den nach oben Perl-Interpreter installiert haben. Um Perl als Sprache für CGI-Scripts einzusetzen, muss außerdem ein Seite Webserver installiert sein.

Bei CGI-Scripts fordert der aufrufende Browser vom Webserver über HTTP eine Datei an, die der Webserver als auszuführendes Script erkennt. Um zu erfahren, ob die vom Browser angeforderte Datei ein auszuführendes CGI-Script ist, prüft der Webserver verschiedene Kriterien:

  • Das Script liegt in einem Verzeichnis, das aus Sicht des Webservers als mögliches Verzeichnis für CGI-Scripts definiert ist (z.B. cgi-bin und dessen Unterverzeichnisse).
  • Bei der Scriptdatei sind die Zugriffsrechte so gesetzt, dass der Benutzer, unter dem der Webserver läuft, das Recht hat, die Datei auszuführen. Dies gilt vor allem für Unix-basierte Systeme.
  • Die Scriptdatei hat eine Dateiendung, die vom System als Endung für Perl-Scripts erkannt wird, z.B. .pl oder .cgi.
  • Die erste Zeile des Perl-Scripts enthält eine so genannte "Shebang"-Anweisung (Slang, auszusprechen als schibäng). Diese Anweisung ist für einen auslesenden Prozess (das kann ein Serverprogramm sein oder eine Shell) der Hinweis darauf, welches Programm für die Interpretation des Quelltextes dieser Scriptdatei aufgerufen werden soll. Siehe auch nach unten Erste Zeile eines Perl-Scripts.

Diese Faktoren bewirken, dass, wenn der Browser ein Perl-Script im CGI-Verzeichnis aufruft, der Webserver entsprechend reagiert und den Quelltext des Scripts nicht einfach an den Browser sendet, sondern den Perl-Interpreter bittet, die im CGI-Script enthaltenen Anweisungen auszuführen und das Ergebnis an ihn zur Auslieferung an den Browser zurückzugeben.

Perl ist ursprünglich nicht für CGI-Scripts entwickelt worden, sondern dafür, in einem Unix-basierten System komplexe Installations-, Wartungs- und Informationsaufgaben zu erfüllen. Dass es auch über die CGI-Schnittstelle angesprochen werden kann, war in seiner Entwicklung eher ein zufälliger Nebeneffekt. Perl-Scripts können also zahllose Aufgaben auf einem Rechner übernehmen, z.B. Backups organisieren, die Rechnerauslastung analysieren, in Dateien nach etwas suchen und es durch etwas anderes ersetzen usw. Um Perl-Scripts auszuführen, die nicht als CGI-Scripts eingesetzt werden, müssen Sie einen Zugang zu einer Shell oder Kommandozeile auf dem Rechner haben. Am lokalen PC und unter Windows können Sie ein DOS-Fenster (Eingabeaufforderung) öffnen. Dann können Sie den Perl-Interpreter vom Prompt aus aufrufen. Bei Unix-basierten Systemen benötigen Sie einen Zugang als Benutzer. Nach dem Anmelden am System erhalten Sie eine Shell, also eine benutzereigene Kommandozeile. Von dort aus können Sie den Perl-Interpreter aufrufen, vorausgesetzt, Sie haben die Rechte dazu. Wenn Sie Perl-Scripts über die Kommandozeile auf einem entfernten Rechner ausführen wollen, also etwa auf einem öffentlichen Server, auf dem Sie Web-Speicherplatz gemietet haben, dann brauchen Sie einen Telnet- oder SSH-Zugang zu diesem Rechner. Außerdem benötigen Sie ein Telnet- oder SSH-Programm (im Online-Angebot des SELFHTML-Linkverzeichnisses finden Sie Online-Seite WWW-Links zu Telnet- und SSH-Programmen). Mit einem solchen Programm können Sie sich aus der Ferne an einem Rechner anmelden und erhalten eine Shell zum Eingeben von Kommandos. Fragen Sie gegebenenfalls Ihren Provider danach, ob Sie Telnet- oder SSH-Zugang zum Server haben!

Von der Kommandozeile aus können Sie den Perl-Interpreter mit einem Perl-Script, also einer Datei mit Perl-Code, aufrufen. Solche Dateien haben die Standard-Dateinamenendung .pl. Der Perl-Interpreter wird normalerweise einfach durch Eingabe von perl gestartet. Wenn Sie beispielsweise ein Perl-Script namens hallowelt.pl haben, können Sie dieses Script mit perl hallowelt.pl starten. Gegebenenfalls müssen Sie sowohl den Perl-Interpreter als auch das Perl-Script mit den korrekten Pfadnamen aufrufen, unter Windows also z.B. c:\programme\perl\bin\perl.exe c:\scripts\perl\hallowelt.pl, unter Unix-basierten Systemen z.B. /usr/bin/perl /scripts/perl/hallowelt.pl.

Neben der reinen Angabe einer Perl-Datei gibt es Optionen beim Aufruf des Perl-Interpreters. Die Optionen folgen unmittelbar hinter dem Programmdateinamen und vor dem Namen des Perl-Scripts, also etwa perl -c test.pl. Sie können auch mehrere Optionen aneinanderhängen. Notieren Sie dazu nur ein Minuszeichen mit allen gewünschten Optionsbuchstaben hintereinander, z.B. perl -cwT test.pl. Auf Unix-basierten Systemen können Sie bei Bedarf zusätzlich so genannte pipelines nutzen.

Die folgende Tabelle enthält einige Optionen, die beim Aufruf des Perl-Interpreters Anwendung finden können.

Option | Bedeutung
-c | Das Perl-Script wird nicht ausgeführt, sondern nur in einen perl-internen Syntaxbaum kompiliert und so auf syntaktische Richtigkeit überprüft.
-d | Das Perl-Script wird im Debug-Modus ausgeführt. Der Debug-Modus erlaubt das systematische Austesten des Perl-Scripts. Im Debug-Modus stehen etliche Befehle zum Kontrollieren und Überprüfen des Script-Ablaufs bereit.
-h | Wenn Sie Perl mit dieser Option ohne Angabe eines Scripts aufrufen, gibt der Perl-Interpreter eine Übersicht aller verfügbaren Optionen aus.
-S | Das Script braucht nur als Dateiname ohne Pfad angegeben zu werden. Wenn es in einem der Verzeichnisse liegt, die in der PATH-Variablen des Betriebssystems genannt sind, findet der Perl-Interpreter das Script auch ohne Pfadangabe.
-T | Das Script wird im so genannten "tainted"-Modus ausgeführt. Das heißt, alle Daten, die das Perl-Script von außen bekommt, werden vom Perl-Interpreter besonders gekennzeichnet und müssen vom Script bei kritischen Operationen speziell bearbeitet werden, bevor sie benutzt werden können.
-v | Gibt die Version und den genauen Stand des Perl-Interpreters aus.
-w | Bewirkt, dass der Perl-Interpreter nicht nur offensichtliche Fehlermeldungen bei Syntaxfehlern ausgibt, sondern auch Warnungen bei möglichen Fehlern, logisch zweifelhaften Anweisungsfolgen, undefinierten Zuweisungen usw.

Erste Zeile eines Perl-Scripts

In der ersten Zeile eines Perl-Scripts, der so genannten "Shebang-Zeile", muss eine Anweisung stehen, die angibt, wo sich die ausführbare Datei des Perl-Interpreters befindet.

Beispiel eines vollständigen Perl-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl
print "Hallo Welt\n";

Erläuterung:

Die Anweisung zur Lage des Perl-Interpreters auf dem Rechner beginnt mit den Zeichen #!, der so genannten shebang, gefolgt von der Pfadangabe und dem Namen des Perl-Interpreters. Ab der zweiten Zeile können Sie Perl-Code notieren, wie im Beispiel die Ausgabe der beiden Wörter Hallo Welt.

Die Anweisung zur Lage des Perl-Interpreters auf dem Rechner wird vor allem von Unix-basierten Systemen ausgewertet, und zwar dann, wenn die Perl-Datei auf den Modus "ausführbar" gesetzt ist. Die Datei kann dann direkt aufgerufen werden und startet den Perl-Interpreter. Wenn Sie unter anderen Umgebungen als Unix arbeiten, notieren Sie einfach die übliche Zeile mit der üblichen Pfadangabe (#!/usr/bin/perl) in der ersten Zeile Ihres Perl-Scripts. Sollte das Script dann nicht ausgeführt werden bzw. eine Fehlermeldung produzieren, notieren Sie den genauen Pfad der ausführbaren Datei des Perl-Interpreters. Trennen Sie dabei die Verzeichnisse durch einfache Schrägstriche. Eine typische Angabe unter Windows ist beispielsweise
#!C:/programme/perl/bin/perl.exe.

Beachten Sie:

Bei Webservern mit CGI-Unterstützung hängt es vom Webserver-Produkt ab, ob die Zeile für die Lage des Perl-Interpreters ausgelesen wird. Zu den Seite Grundeinstellungen eines Webservers gehört mittlerweile auch die Angabe des Pfades zum Perl-Interpreter. Wenn dann bei laufendem Webserver ein Perl-Script über das HTTP-Protokoll ausgeführt wird, ruft der Webserver den Perl-Interpreter entsprechend seiner Konfiguration auf.

Wenn der Perl-Interpreter im Suchpfad für ausführbare Programme liegt, der z.B. in der Umgebungsvariablen PATH gespeichert ist, dann genügt es, in der ersten Zeile des Perl-Scripts zu notieren:
#!perl

Wenn Ihr Webserver ein Apache ist und Sie uneingeschränkten Zugang zu seiner Konfigurationsdatei (httpd.conf) haben, können Sie dort auch die Anweisung ScriptInterpreterSource registry notieren. Eine solche Anweisung bewirkt, dass Apache in der Windows-registry nach dem Pfad sucht, mit dem der Perl-Interpreter angesprochen werden kann und die "shebang" umgeht. Das funktioniert jedoch nur dann, wenn in der registry unter HKEY_CLASSES_ROOT eine entsprechende Dateinamensendung, beispielsweise .pl, eingetragen ist und für diese Dateinamensendung auch ein Schlüssel Shell\ExecCGI\Command oder Shell\Open\Command existiert. Ist kein solcher Schlüssel vorhanden, wird zuletzt auf die "shebang" zurückgegriffen, und wenn dort dann ein nicht zutreffender Pfad eingetragen ist, erfolgt eine Fehlermeldung an den aufrufenden Browser.

Hinter der Pfadangabe zum Perl-Interpreter kann, durch Leerraum getrennt, auch noch eine Aufrufoption folgen wie in der Tabelle bei den nach oben Aufrufmöglichkeiten des Perl-Interpreters beschrieben. So können Sie beispielsweise notieren:
#!/usr/bin/perl -w
Damit weisen Sie den Perl-Interpreter an, neben Fehlern auch Warnungen zu melden. Diese Option wird von Perl-Programmierern gerne empfohlen (siehe auch nach unten Sauberer Programmierstil).

Anweisungen notieren

Perl-Scripts bestehen, wie die Scripts anderer Programmiersprachen auch, aus einer kontrollierten Anordnung von Anweisungen. Das sind Befehle, die der Perl-Interpreter bewertet und in einen Maschinencode übersetzt (kompiliert), der auf dem betreffenden Rechner ausführbar ist.

Es gibt einfache und komplexere Anweisungen.

Beispiel eines vollständigen Perl-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl

$Zahl = 42;
$Quadrat = $Zahl * $Zahl;
print "Das Quadrat von ", $Zahl, " = ", $Quadrat, "\n";

Erläuterung:

Eine Anweisung besteht in Perl aus einem Befehl, der normalerweise mit einem Semikolon ; abgeschlossen wird. Der Befehl kann an verschiedene Bedingungen gebunden sein.

Eine Anweisung ist es zum Beispiel:

  • wenn Sie einer Variablen einen Wert zuweisen, wie oben in Beispiel in der Anweisung $Zahl = 42;.
  • wenn Sie mit Variablen oder Werten eine Operation durchführen, wie oben in der zweiten Anweisung.
  • wenn Sie eine Kapitel Perl-Funktion aufrufen, wie oben in der dritten Anweisung die Funktion print.

Anweisungsblöcke notieren

Ein Anweisungsblock besteht aus einer oder mehreren einzelnen nach oben Anweisungen, die innerhalb einer übergeordneten Anweisung stehen. So können Anweisungsblöcke beispielsweise innerhalb einer Seite bedingten Anweisung oder innerhalb einer Seite Schleife stehen. Auch alle Anweisungen, die innerhalb einer Seite Subroutine stehen, bilden einen Anweisungsblock.

Beispiel 1:

if($Zahl > 1000) {
  $Zahl = 0;
}

Beispiel 2:

for(my $i = 1;$i <= 99;$i = $i + 1) {
  print "Das Quadrat von ", $i, " ist ", $i * $i, "\n";
}

Erläuterung:

Ein Anweisungsblock wird durch eine öffnende geschweifte Klammer { begonnen und durch eine schließende geschweifte Klammer } beendet.

Bei bedingten Anweisungen (wie in Beispiel 1) oder bei Schleifen (wie in Beispiel 2) müssen Sie solche Anweisungsblöcke notieren, auch wenn nur eine einzige Anweisung von der Bedingung oder der Schleifenbedingung abhängig ausgeführt werden soll.

Anweisungsblöcke können auch verschachtelt werden.

Kommentare in Perl

Wie jede bessere Programmiersprache erlaubt Perl das Notieren von Kommentaren. Kommentare werden nicht als Code interpretiert, sondern erläutern das Script oder machen den Code für den Programmierer besser lesbar.

Beispiel:

#=========================================
# es folgt die Ausgabe der Quadratzahlen
# von 1 bis 99
#=========================================
for(my $i = 1;$i <= 99;$i = $i + 1) {
  # Hier wird das Quadrat der Zahlen ausgegeben
  print "Das Quadrat von ", $i, " ist ", $i * $i, "\n";
}

Erläuterung:

Kommentare in Perl beginnen mit einem Gatterzeichen #. Alles, was hinter dem Gatterzeichen bis zum Ende der Zeile steht, wird von Perl ignoriert. Beginnt eine Zeile mit dem Gatterzeichen, ist die gesamte Zeile ein Kommentar. Viele Perl-Programmierer nutzen die Kommentartechnik auch, um ihre Scripts optisch kunstvoll zu gestalten. Das obige Beispiel zeigt solch ein optisches Konstrukt mit Gleichheitszeichen.

Beachten Sie

Neben der einfachen Auskommentierung besteht auch die Möglichkeit, größere Abschnitte des Scripts als Dokumentation auszuweisen. Solche Dokumentationen können mit dem Programm perldoc, das zum Lieferumfang des Perl-Interpreters gehört, separat gelesen werden. Bei komplexeren Scripts können Sie so die Dokumentation gleich zum Script mit dazuliefern. Im Zusammenhang mit Modulen wird im Abschnitt Seite Moduldokumentationen lesen mit perldoc beschrieben, wie solche Abschnitte aussehen. Was dort für Module beschrieben wird, funktioniert in jedem Perl-Script.

Regeln für selbst vergebene Namen

An vielen Stellen in Perl müssen Sie selbst Namen vergeben, zum Beispiel für Variablen wie Seite Skalare, Seite Arrays oder Seite Hashes, sowie für Seite Subroutinen.

Beispiel:

my $Daten = $ENV{'QUERY_STRING'};

Erläuterung:

Im Beispiel ist Daten ein selbst vergebener Name. Bei selbst vergebenen Namen gelten folgende Regeln:

  • Sie dürfen keine Leerzeichen enthalten.
  • Sie müssen mit einem Buchstaben oder einem Unterstrich _ beginnen. Mit einer Ziffer oder einem anderen Zeichen dürfen sie nicht beginnen.
  • Es sind Groß- und Kleinbuchstaben erlaubt. Groß- und Kleinschreibung wird aber auch unterschieden. Das heißt, zwei Variablennamen wie $user und $User bezeichnen unterschiedliche Variablen!
  • Sie dürfen keine deutschen Umlaute oder scharfes S enthalten, nur die Buchstaben A bis Z und a bis z und die Ziffern 0 - 9.
  • Sie dürfen Unterstriche _ enthalten.

Vergeben Sie sprechende Namen, die Ihnen auch ein halbes Jahr, nachdem Sie das Perl-Script geschrieben haben, noch signalisieren, welche Bedeutung sie haben. Es dürfen ruhig auch deutschsprachige Wörter sein, solange die genannten Regeln eingehalten werden.

Beachten Sie:

Seit Perl-Version 5.6.0 können Perl-Scripts auch in Unicode notiert werden. Damit ist es möglich, auch beispielsweise Umlaute in Variablennamen zu verwenden. Die Perl-Scripts müssen dann UTF-8-kodiert sein. In einem Editor, der diese Kodierung nicht beherrscht, sieht dann eine Variable $Straße beispielsweise so aus: $StraÃŸe

Sauberer Programmierstil

Es gibt ein paar Dinge, die ein sauber geschriebenes Perl-Script enthalten sollte. Ohne diese Dinge funktionieren die meisten Perl-Scripts zwar genauso gut, aber kritische (mehrdeutige) Anweisungen im Quelltext fallen dann nicht auf und können leichter zu Fehlern führen. Das folgende kleine Perl-Script enthält ein paar Dinge, die von Perl-Programmierern zum sauberen Programmieren empfohlen werden.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $headline = "Ein sauberes Script!";

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";
print "<h1>$headline</h1>\n";
print "<p>nur auf das CGI-Modul wurde hier verzichtet ;-)</p>\n";
print "</body></html>\n";

Erläuterung:

Zu den empfohlenen Maßnahmen sauberer Programmierung zählt auf jeden Fall die Verwendung der Aufrufoption -w in der ersten Zeile des Scripts. Dadurch gibt der Perl-Interpreter Warnungen zu zweifelhaften Befehlen aus, bevor er das Script ausführt. Manche Unsauberkeiten im Quellcode werden so ohne zeitraubende Suche erkannt.

In die gleiche Richtung zielt die Anweisung use strict;. Damit wird ein spezielles Seite Pragma-Modul eingebunden, das bewirkt, dass der Perl-Interpreter keine unsicheren Konstrukte akzeptiert, bevor er das Script ausführt. Das können zum Beispiel nicht definierte Variablen sein. Auch damit lassen sich Fehler vermeiden, die durch unachtsames oder schlampiges Programmieren entstehen können und bei einer toleranteren Interpretation des Quelltextes nicht auffallen.

Die Anweisung use CGI::Carp qw(fatalsToBrowser); wird Programmierern, die Perl-Scripts für die CGI-Schnittstelle entwickeln wollen, dringend empfohlen. Sie bindet eine Funktion eines speziellen Modul ein, das beim ungewollten Abbruch des Scripts aufgrund eines Syntaxfehlers oder einer Anweisung wie Seite die die Fehlerursache in HTML umwandelt und direkt auf die Standardausgabe schreibt, also an den aufrufenden Browser übergibt. Auf diese Weise ersparen es sich CGI-Programmierer, beim Scriptabbruch in der meist langen Error-Log-Datei des Webservers nach der Fehlermeldung zu suchen. Diese Anweisung nutzt jedoch nichts, wenn bereits Fehler auftreten, bevor der Perl-Interpreter ausgeführt werden kann, also etwa, wenn die erste Zeile des Perl-Scripts eine falsche Lage des Perl-Interpreters ausweist.

Wenn Sie use strict; angeben, zwingt Perl Sie dazu, alle Ihre Variablen vor der ersten Verwendung zu deklarieren (z.B. mit my). Im obigen Beispiel ist dies bei der Initialisierung von $headline der Fall. Dies hat den Vorteil, dass ein Programmabbruch erfolgt, wenn Sie im weiteren Verlauf des Scripts einen Variablennamen falsch geschrieben haben. Die Verwendung von my bewirkt, dass eine Variable nur in der aktuellen Datei oder im aktuellen Anweisungsblock gültig ist. Näheres dazu bei der Beschreibung des Befehls Seite my.

Wie Sie dem Quellcode des obigen Beispiels entnehmen können, gibt das Script in seiner Ausgabe an den aufrufenden Browser mit einem verschmitzten Lächeln zu, dass es das Seite CGI-Modul nicht verwendet. Tatsächlich sollten Sie sich, wenn Sie CGI-Scripts schreiben wollen, mit diesem Modul und seiner Syntax beschäftigen. Es hält für viele CGI-Scripts nützliche Funktionen bereit und soll an dieser Stelle ausdrücklich empfohlen werden.

Generell ist es empfehlenswert, auf vorhandene und bewährte Ressourcen zurückzugreifen. Perl wird ja nicht nur alleine als Perl-Interpreter ausgeliefert, sondern mit einer ganzen Reihe von fertigen Modulen, die viele Programmieraufgaben erleichtern und die möglichen Fehlerquellen verringen. Nachdem Sie sich mit den Sprachelementen und eingebauten Funktionen von Perl etwas vertraut gemacht haben, sollten Sie sich daher auf jeden Fall auch mit den Kapitel Perl-Modulen beschäftigen.

Bei größeren Scripts sollten Sie den Quellcode auf Seite Subroutinen verteilen. Mit dieser Technik können Sie Anweisungsblöcke definieren, die bestimmte Aufgaben übernehmen und von verschiedenen anderen Stellen im Script aus aufgerufen werden können. Ferner können Sie die Technik der Subroutinen dazu nutzen, um den Script-Ablauf in Teilprozeduren zu zerlegen und nur bestimmte Teile des Scripts auszuführen.

Seit Version 5 des Interpreters erlaubt Perl auch Seite objektorientiertes Programmieren. Das ist zwar für Neulinge zunächst erheblich schwieriger zu begreifen, aber wenn man es sich angewöhnt, werden größere Anwendungen in Perl letztlich einfacher zu programmieren sein, und der Code sieht deutlich besser (menschen-)lesbar aus. Dem Perl-Interpreter ist es eigentlich egal; objektorientierte Programmierung kann die Ausführung Ihrer Scripts jedoch teilweise erheblich beschleunigen.

Zum "sauberen Programmieren" gehören schließlich folgende allgemeine Empfehlungen:

  • nach oben Kommentieren Sie alle nicht-trivialen Anweisungen oder Anweisungsblöcke Ihres Scripts. Sie sollten allerdings darauf achten, dass Sie auch nicht zu viel kommentieren. Ein Script, in dem auf eine Code-Zeile zehn Zeilen Kommentar kommen, ist schlecht lesbar.
  • Notieren Sie den Quelltext so, dass er übersichtlich wirkt. Dazu gehören Leerzeilen zwischen logischen Abschnitten im Script sowie Einrückungen, die vor allem bei nach oben Anweisungsblöcken erkennen lassen, was zum Anweisungsblock gehört und was außerhalb davon steht. Vor allem sollte die schließende geschweifte Klammer eines Blocks in der gleichen Textspalte stehen wie das erste Zeichen des Wortes, das den Block einleitet.
  • Verwenden Sie ein einheitliches Schema bei der Namensvergabe. Es sieht besser aus, wenn eine Reihe von Variablen die Namen $name, $telephone, $mail und $homepage haben, als wenn diese $name, $Telefonnummer, $mail_Adresse und $Homepage lauten.
nach oben
weiter | Seite CGI-notwendige Anweisungen in Perl
zurück | Seite Bilderbuch zum Umblättern
Teil von SELFHTML/Navigationshilfen Teil von Perl

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente

SELFHTML

Perl-Sprachelemente
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Einführung in Perl.
Dieser Abschnitt beschreibt wichtige Sprachelemente von Perl. Diese Elemente müssen Sie kennen und verstehen, um selbst CGI-Scripts in Perl programmieren zu können.
Der Abschnitt besteht aus folgenden Seiten:

Seite CGI-notwendige Anweisungen in Perl
Seite Skalare (Variablen)
Seite Listen bzw. Arrays (Variablen)
Seite Hashes (Variablen)
Seite Referenzen bzw. Zeiger (Variablen)
Seite Vordefinierte Variablen in Perl
Seite Zeichenketten (Strings)
Seite Zahlen
Seite Bedingte Anweisungen
Seite Schleifen
Seite Sprungbefehle
Seite Operatoren
Seite Reguläre Ausdrücke
Seite Subroutinen
Seite Tokens
Seite Objektorientiertes Programmieren
Seite CGI-typische Aufgaben in Perl

nach oben

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / CGI-notwendige Anweisungen in Perl

SELFHTML

CGI-notwendige Anweisungen in Perl
Informationsseite

nach unten HTTP-Header und Inhalte senden
nach unten Inhalte senden (alternative Form)
nach unten

HTTP-Header und Inhalte senden

Ein CGI-Script wird vom Webserver aufgerufen, sobald ihm der anfragende Browser eine Aufforderung dazu etwa durch das Abschicken eines Formulars signalisiert. Dazu kommuniziert zunächst der Browser mit dem Webserver über das HTTP-Protokoll und fordert das Script an. Bei dieser Anforderung kann der Browser auch gleich Daten versenden, die für das CGI-Script gedacht sind, z.B. Daten aus einem ausgefüllten HTML-Formular. Der Webserver entscheidet, ob es sich bei der vom Browser angeforderten Datei um ein CGI-Script handelt und lässt das Script vom Perl-Interpreter ausführen. Während dies geschieht, "wartet" der Browser jedoch auf Daten. Denn wenn der Browser vom Server ein CGI-Script anfordert, ist das für ihn nichts anderes, als ob er eine statische HTML-Datei anfordern würde. Er wartet auf Daten, die der Server sendet und die er (der Browser) als nächstes anzeigen soll. Deshalb muss der Script-Interpreter unmittelbar bei der Auswertung eines CGI-Scripts irgendetwas an den Webserver schicken, damit der es an den wartenden Browser weitersenden kann. Die zu sendenden Daten müssen dabei wieder über das HTTP-Protokoll verschickt werden. Das HTTP-Protokoll verlangt nun für jeden Datenversand einen so genannten HTTP-Header. Das ist eine Art Vorab-Datenpaket mit Informationen zu den nachfolgenden Daten. Damit ein Browser die Daten korrekt interpretieren kann, muss das Script also zunächst die Sendung eines gültigen HTTP-Headers veranlassen.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Text = "Hallo Welt";

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Hallo Welt</title></head><body>\n";
print "<h1>$Text</h1>\n";
print "</body></html>\n";

Erläuterung:

Für den HTML-Code, den ein Perl-Script als CGI-Script ausgeben lassen soll, ist die Perl-Funktion Seite print geeignet. Zum "Senden" gibt das Perl-Script einfach mit der print-Funktion Daten aus. Die erste dieser print-Anweisungen, die ein CGI-Script enthalten muss, ist jedoch diejenige für den HTTP-Header. Die einfachste Form eines HTTP-Headers besteht schlicht aus dem Befehl Content-type: und der Angabe eines Seite MIME-Typs für die nachfolgenden Daten. Da das CGI-Script HTML-Code an den Browser senden will, benutzt es den MIME-Typ für HTML, nämlich text/html. Weiterhin muss ein HTTP-Header zwei abschließende Steuerzeichen für Zeilenumbruch enthalten. In Perl lässt sich ein solcher Zeilenumbruch durch die Zeichenfolge \n erzeugen. Durch die Anweisung:
print "Content-type: text/html\n\n";
wird also ein vollständiger HTTP-Header erzeugt, der dem Browser signalisiert, dass Daten vom Typ HTML folgen. Für eine vollständige HTTP-Kommunikation sind freilich noch mehr HTTP-Headerzeilen notwendig; die fehlenden Angaben werden dann von der Seite CGI-Schnittstelle bzw. vom Seite Webserver ergänzt.

Anschließend wird mit einzelnen print-Anweisungen eine vollständige kleine HTML-Datei an den Browser gesendet. Bei den einzelnen print-Anweisungen ist am Ende übrigens immer ein Zeilenumbruch-Zeichen \n notiert. Dies hat eher kosmetische Gründe. Dadurch wird im erzeugten HTML-Quelltext jeweils eine neue Zeile begonnen. Wenn diese Steuerzeichen fehlen würden, dann würde Perl den gesamten HTML-Code in eine Textzeile schreiben, und falls Sie sich diesen Quelltext in Ihrem Browser anschauen möchten, sehen Sie einen absatzlosen Brei aus Buchstaben und Zahlen, der sehr schwer lesbar ist. Bei der Variante oben wird der HTML-Quelltext dagegen nach jeder print-Anweisung umbrochen.

Innerhalb der h1-Überschrift wird im obigen Beispiel eine Variable ausgegeben, nämlich der Seite Skalar $Text. Sie können innerhalb von print-Ausgaben einfach solche Variablen einfügen. An der entsprechenden Stelle wird dann der aktuelle Wert der Variablen ausgegeben. Im obigen Beispiel wird dem Skalar $Text weiter oben im Script der Wert Hallo Welt zugewiesen. Dieser Wert wird an der Stelle, wo $Text im auszugebenden HTML-Code notiert ist, eingesetzt.

Inhalte senden (alternative Form)

Die vielen einzelnen print-Anweisungen sind bei längeren Ausgaben lästig. Es gibt deshalb auch eine elegantere Form der Ausgabe größerer HTML-Code-Abschnitte.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Einleitung = "Es geht auch so!";

print "Content-type: text/html\n\n";

print <<"ENDE";
<html><head><title>Testausgabe</title></head><body>
<h1>$Einleitung</h1>
<p>Der Vorteil bei dieser Form ist, dass man viel HTML-Code
auf einmal erzeugen kann, ohne einen einzigen weiteren print-Befehl
in Perl zu notieren. Praktisch beispielsweise auch zum Ausgeben
von JavaScript:</p>
<script type="text/javascript">
document.write("<p>Und die Adresse dieser HTML-Datenquelle lautet: ");
document.write(document.URL+"<\/p>");
</script>
</body></html>
ENDE

Erläuterung:

Das Script sendet zunächst mit einer einzelnen print-Anweisung den HTTP-Header. Anschließend wird jedoch eine elegantere Methode benutzt, um größere Mengen HTML-Code zu senden. Dabei wird zunächst die Anweisung print <<"ENDE"; notiert. ENDE ist ein frei vergebbarer Name für einen Endbegrenzer. Ganz unten im Script ist dann noch einmal das Wort ENDE notiert, und zwar alleinstehend in einer Zeile. Alles, was zwischen der einführenden Anweisung und dem alleinstehenden Endbegrenzer steht, wird so wie es da steht an den Browser gesendet. Sinnvoll ist diese Form der Notation, wenn längere Abschnitte HTML-Code gesendet werden sollen. Der HTML-Code kann alles mögliche enthalten, zum Beispiel auch JavaScript-Bereiche, wie im Beispiel gezeigt, aber auch Perl-Variablen! Diese werden interpoliert, d.h. bei der Ausgabe durch ihren Wert ersetzt - allerdings nur, weil print <<"ENDE"; mit doppelten Anführungszeichen notiert wurde. Erlaubt ist auch die Notation mit einfachen Anführungszeichen, also print <<'ENDE';. In diesem Fall werden keine Perl-Variablen interpoliert (siehe auch: Seite Regeln beim Notieren von Zeichenketten). Eine weitere Möglichkeit besteht darin, die Anführungszeichen ganz wegzulassen, also print <<ENDE;. In diesem Fall gelten dieselben Regeln wie bei der Notation mit doppelten Anführungszeichen.

Beachten Sie:

Hinter dem Endbegrenzer muss in Ihrem Script auf jeden Fall ein Zeilenumbruch notiert werden, gerade auch dann, wenn es sich um die letzte Zeile im Script handelt.

Eine weitere oft genutzte Möglichkeit, HTTP-Header und HTML-Code an den Browser zu senden, bietet das Seite CGI-Modul an. Dieses Modul stellt eigene Methoden bereit, um (X)HTML-Ausgaben zu erzeugen. Zum Senden an den Browser wird aber auch dort die print-Funktion verwendet.

nach oben
weiter | Seite Skalare (Variablen)
zurück | Seite Einführung in Perl
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Skalare (Variablen)

SELFHTML

Skalare (Variablen)
Informationsseite

nach unten Skalare deklarieren und Werte zuweisen
nach unten Typ-Umwandlung von Skalaren
nach unten Funktionen und Operationen zum Manipulieren von Skalaren
nach unten

Skalare deklarieren und Werte zuweisen

In Perl wird eine einfache Variable, die eine Zahl oder eine Zeichenkette speichern kann, als Skalar bezeichnet.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Name = "Methusalem";
my $Alter = 625;
my $Name_2 = "Junger Hansel";
my $JungAlter = sqrt($Alter);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "$Name ist ein alter Mann, sehr alt. Er ist $Alter Jahre alt<br>\n";
print "$Name_2 ist dagegen ein Jungspund. Er ist $JungAlter.<br>\n";

print "</body></html>\n";

Erläuterung:

Im Beispiel werden vier Skalare deklariert (erstmals im Script genannt und eingeführt): $Name, $Alter, $Name_2 und $JungAlter. Alle vier Variablen werden hier mit my definiert. Die Deklaration ist erforderlich, weil weiter oben im Script die Anweisung use strict; notiert ist. Würde sie fehlen, dann wäre es erlaubt, die Variablen auch ohne Deklaration zu benutzen. Besonders bei größeren Scripts ist es jedoch besser, sich gleich einen sauberen Stil anzugewöhnen und alle Variablen zu deklarieren. Dieses Vorgehen kann die Fehlersuche im Script oftmals bedeutend erleichtern.

Ein Skalar beginnt stets mit einem Dollarzeichen $. Das Dollarzeichen muss immer angegeben werden, wenn die Variable verwendet wird. Hinter dem Dollarzeichen folgt ein frei wählbarer Name, der jedoch den Regeln zur Seite Namensvergabe genügen muss.

Skalare speichern Werte. Die Werte bekommen sie zugewiesen. Die Deklarationen der vier Skalare im Beispiel-Script sind typische Zuweisungen. Die Zuweisung geschieht durch das Gleichheitszeichen =. Links davon steht der Name des Skalars, rechts davon der Wert, der zugewiesen wird. Das kann ein direkt notierter Wert sein, also etwa Methusalem oder 625. Es kann aber auch ein Ausdruck sein, der den Wert erst errechnet. Bei der Deklaration von $JungAlter wird im Beispiel eine Perl-Funktion aufgerufen, die zu einer Zahl die Quadratwurzel berechnet und den errechneten Wert zurückgibt ( Seite sqrt). Erst dieser Rückgabewert wird dem Skalar $JungAlter zugewiesen.

Bei der Deklaration eines Skalars können Sie - wie in den obigen Beispielen - einen Initialisierungswert (Anfangswert) zuweisen. Es ist aber auch möglich, einen Skalar ohne Wertzuweisung zu deklarieren. Dann lassen Sie die Wertzuweisung einfach weg und notieren eine Anweisung, die einfach aus dem Namen des Skalars und dem die Anweisung abschließenden Semikolon besteht (z.B. my $Name;). Wenn ein Skalar auf diese Weise deklariert wird, ist sein Wert undefiniert (undef). Wenn Sie die Seite w-Option benutzen, gibt der Perl-Interpreter Ihnen eine Warnung aus, sofern Sie mit einem solchen undefinierten Wert weiterarbeiten wollen.

Sie können Skalaren numerische Werte, Zeichenketten (Strings) und Seite Referenzen zuweisen. Ob ein Skalar numerisch oder eine Zeichenkette ist, entscheiden Sie, indem Sie dem Skalar einen Wert zuweisen oder indem Sie ihn in einer Anweisung verwenden. Eine Zeichenkette muss dabei in Anführungszeichen stehen. Das können sowohl doppelte Anführungszeichen als auch einfache Anführungszeichen sein (zum Unterschied siehe Seite Regeln beim Notieren von Zeichenketten). Im obigen Beispiel speichern die Skalare $Name und $Name_2 Zeichenketten, während die Skalare $Alter und $JungAlter Zahlen speichern.

Das obige Beispiel-Script gibt als CGI-Script den Seite HTTP-Header und HTML-Code aus. Dabei verwendet es die Skalare in den print-Anweisungen an den nötigen Stellen. Im HTML-Code, der beim Browser ankommt, erscheint dann an der entsprechenden Stelle der aktuelle Wert des Skalars.

Typ-Umwandlung von Skalaren

Skalare können sowohl Zahlen als auch Zeichenketten speichern. Auch ein und derselbe Skalar kann im Laufe eines Scripts mal eine Zahl, mal eine Zeichenkette speichern. Die so genannte Typumwandlung, die in klassischen Programmiersprachen entweder gar nicht möglich ist oder mit einer eigenen Anweisung durchgeführt werden muss, erfolgt bei Perl automatisch.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Wert = 123456;
my $Teilwert = substr($Wert,1,3);
$Wert = $Teilwert;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "<var>Teilwert</var> lautet: <b>$Teilwert</b><br>\n";
print "Und <var>Wert</var> lautet: <b>$Wert</b><br>\n";

print "</body></html>\n";

Erläuterung:

Im Beispiel wird ein Skalar $Wert deklariert und bekommt dabei eine Zahl zugewiesen. Anschließend wird ein weiterer Skalar $Teilwert deklariert. Diesem Skalar wird der Rückgabewert einer Perl-Funktion zugewiesen, nämlich der Funktion Seite substr. Dies ist eine typische Zeichenketten-Funktion. Sie extrahiert aus einer Zeichenkette einen Teil davon. Nun werden Zahlen im Computer aber anders gespeichert als Zeichenketten. In den meisten anderen Programmiersprachen wäre es deshalb ein schwerer Fehler, zu versuchen, einer solchen Zeichenketten-Funktion eine Zahl zu übergeben. In Perl ist das jedoch kein Problem. Im Beispiel wird der Funktion einfach $Wert übergeben, also der Skalar, in dem zu diesem Zeitpunkt eine Zahl gespeichert ist. Perl bewertet die Zahl bei dem Wunsch, eine Zeichenketten-Funktion darauf anzuwenden, automatisch als Zeichenkette, sprich, als Abfolge von Ziffern, Dezimalzeichen usw.

Im Beispiel extrahiert die Funktion substr die Zeichen 2 bis 4 der Zeichenkette (übergeben werden Startposition und Länge, aber in Perl wird bei solchen Dingen immer bei 0 zu zählen begonnen, nicht bei 1, daher werden 1 und 3 übergeben). Wenn man die Zahl 123456 als Zeichenkette interpretiert, wird also einfach 234 extrahiert. Diesen Wert gibt die Funktion substr im obigen Aufruf auch zurück - aber als Zeichenkette. Denn substr gibt immer und in jedem Fall eine Zeichenkette zurück. In der darauffolgenden Beispielanweisung $Wert = $Teilwert wird nochmals die Fähigkeit von Perl zur automatischen Typumwandlung auf die Probe gestellt. Denn mit dieser Anweisung bekommt $Wert, worin ja bis dahin eine Zahl gespeichert ist, plötzlich eine Zeichenkette zugewiesen, nämlich den Wert von $Teilwert, der ja aus dem Rückgabewert von substr ermittelt wurde und eine Zeichenkette ist. Wenn Sie andere Programmiersprachen kennen, werden Sie hieran ermessen können, welche Freiheiten Sie in Perl beim Umgang mit Variablen haben.

Das obige Beispiel sendet HTML-Code an den aufrufenden Browser und gibt die aktuellen Werte der Skalare aus.

Beachten Sie:

Der Perl-Interpreter versucht sein Bestes, die Werte Ihrer Variablen zu verarbeiten. Das heißt, wenn Sie beispielsweise mit einer Zeichenkette numerische Operationen durchführen (z.B. 3 + "Text"), wird diese Zeichenkette in einen numerischen Wert konvertiert, und zwar in 0. Genauso können Sie auch eine Zeichenkette und eine Referenz miteinander verketten. Die Anweisung print "Text".$ref; (wobei $ref eine Referenz enthält) könnte also beispielsweise die Ausgabe TextSCALAR(0x1765158) erzeugen.

Funktionen und Operationen zum Manipulieren von Skalaren

Skalare sind Variablen. Man benutzt sie, um Werte zu speichern, die sich im Verlauf des Scripts ändern können. Skalare ändern ihren gespeicherten Wert, indem ihnen ein neuer Wert zugewiesen wird. Solche zugewiesenen Werte sind jedoch oft keine direkten Werte, sondern Rückgabewerte von Funktionen, die irgendetwas berechnen oder leisten. In den Beispielen weiter oben kamen bereits zwei solcher Funktionen zum Einsatz: die Funktion sqrt zum Errechnen einer Quadratwurzel, und die Funktion substr zum Ermitteln einer Teilzeichenkette. Perl bietet viele solcher Funktionen an. Typische Funktionen, mit denen Sie den Wert von Skalaren beeinflussen können, sind beispielsweise die Seite Funktionen für Zeichenketten oder die Seite Funktionen für Berechnungen. Darüber hinaus werden Skalare oft auch im Zusammenhang mit Seite Schleifen benötigt und verändert. Zeichenketten können Sie beispielsweise auch miteinander verknüpfen, und mit Zahlen können Sie rechnen. Dazu benötigen Sie Seite Operatoren.

nach oben
weiter | Seite Listen bzw. Arrays (Variablen)
zurück | Seite CGI-notwendige Anweisungen in Perl
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Listen bzw. Arrays (Variablen)

SELFHTML

Listen bzw. Arrays (Variablen)
Informationsseite

nach unten Listen bzw. Arrays deklarieren und Werte zuweisen
nach unten Auf einzelne Listenelemente zugreifen
nach unten Mehrdimensionale Arrays
nach unten Funktionen und Operationen zum Manipulieren von Listen
nach unten

Listen bzw. Arrays definieren

Listen sind miteinander verkettete Einzelwerte. Wenn Sie so etwas Zusammengehöriges wie "alle Namen von HTML-Elementen" oder "alle Zeilen einer Datei" speichern wollen, können Sie dies mit Hilfe von Listen tun. Der Variablentyp in Perl, in dem Listen gespeichert werden können, heißt Array.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Daten = ("Jana",23,"Berlin","Abitur");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "<pre>@Daten</pre>";

print "</body></html>\n";

Erläuterung:

Im Beispiel wird ein Array namens @Daten deklariert. "Deklaration" bedeutet bei Arrays das gleiche wie bei Seite Skalaren. Ein Array wird in Perl durch das Klammeraffenzeichen @ eingeleitet. Dahinter folgt der Name des Arrays. Bei der Deklaration eines Arrays können Sie Anfangswerte zuweisen oder auch nicht. Im obigen Beispiel werden Anfangswerte zugewiesen. Die Einzelwerte werden dabei wie gezeigt in runde Klammern eingeschlossen und untereinander durch Kommata getrennt. Wenn Sie keine Anfangswerte zuweisen wollen, notieren Sie einfach so etwas wie my @Daten; als Anweisung. Im Gegensatz zur Deklaration von Skalaren ohne Wertzuweisung ist die Liste dann nicht "undefiniert", sondern einfach leer.

Ein Array in Perl kann nur Skalare als Einzelwerte enthalten. Im obigen Beispiel sind die Einzelwerte Jana, Berlin und Abitur Zeichenketten, während 23 eine Zahl ist.

Das Beispiel sendet HTML-Code an den aufrufenden Browser und gibt dabei einfach die Liste aus.

Beachten Sie:

Skalare, Listen und Seite Hashes haben unterschiedliche Namensräume. Variablen wie $name, @name und %name können also problemlos im gleichen Script vorkommen.

Anstelle von konstanten Daten können Sie auch andere Variablen in eine Liste einfügen. Dann wird der Wert der betreffenden Variablen in die Liste übernommen. Zum Beispiel:
my $Alter = 23;
my @Daten = ("Jana",$Alter,"Berlin","Abitur");

Wenn Sie eine Liste mit auf- oder absteigenden Zahlen oder Buchstaben erzeugen wollen, gibt es dafür eine spezielle Syntax:
my @Liste = (1..10); erzeugt eine Liste mit 10 Elementen, nämlich den Zahlen 1 bis 10.
my @Liste = ("A".."Z"); erzeugt eine Liste mit 26 Elementen, nämlich den Buchstaben von A bis Z.

Wenn Sie eine Liste mit Elementen erzeugen wollen, die keine Leerzeichen enthalten, gibt es dafür ebenfalls eine spezielle Syntax:
my @Daten = qw(Jana 23 Berlin Abitur); erzeugt einen Array mit den Elementen Jana, 23, Berlin und Abitur. Bei dieser speziellen Syntax können Sie jedoch keine Variablen in die Liste einfügen.

Auf einzelne Listenelemente zugreifen

Der Variablentyp für einen einzelnen Wert ist in Perl ein Skalar. Wenn Sie in einem Array auf einen einzelnen darin gespeicherten Wert zugreifen wollen, benutzen Sie also einen "skalaren Kontext". Dies kommt in der Syntax von Perl auch zum Ausdruck.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Daten = ("Jana",23,"Berlin","Abitur");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "$Daten[0] ist $Daten[1] Jahre alt, wohnt in $Daten[2] und hat $Daten[3]\n";

print "</body></html>\n";

Erläuterung:

Im Script wird wieder ein Array @Daten deklariert und mit vier Werten initialisiert. Das Script erzeugt HTML-Code und gibt die Daten aus. Diesmal wird dabei jedoch auf die einzelnen Werte der im Array @Daten gespeicherten Liste zugegriffen. Mit $Daten[0] wird auf das erste Element der Liste zugegriffen, also auf den Wert Jana. Mit $Daten[1] auf das zweite Element, also 23 usw. Wichtig ist, dass bei 0 zu zählen begonnen wird. Die Zahl, die das nte. Element der Liste angibt, muss in eckigen Klammern stehen. Die Klammern gehören in diesem Kontext (innerhalb von Zeichenketten) zum Variablennamen und müssen direkt hinter dem Namen des Arrays notiert werden (kein Leerraum erlaubt).

Die Syntax wie in $Daten[0] zeigt mit dem voranstehenden Dollarzeichen, dass der Zugriff auf das Array-Element einen Skalar anfordert, denn Skalare sind immer an dem voranstehenden Dollarzeichen erkennbar.

Beachten Sie:

Wenn Sie einen Array namens @Daten haben, können Sie mit der speziellen Notation $#Daten die höchste Indexnummer ermitteln, also die des letzten Listenelements, ohne zu wissen, wie viele Elemente die Liste hat. Angenommen, die Liste @Daten hat 15 Elemente: dann würde $#Daten den Wert 14 liefern. Mit einer Notation wie $Daten[$#Daten] können Sie dann den Wert des letzten Listenelements von @Daten ermitteln. Indem Sie negative Indexnummern verwenden, können Sie auf die Elemente am Ende des Arrays zugreifen. Dabei ist $Daten[-1] das letzte Element, $Daten[-2] das vorletzte usw.

Mehrdimensionale Arrays

Wenn Sie andere Programmiersprachen kennen, sind Ihnen vielleicht schon mehrdimensionale Arrays begegnet. Dies sind Arrays, die Daten in matrixartiger Form speichern. Am einfachsten vorstellbar ist der zweidimensionale Array. Die darin gespeicherten Werte können Sie sich als Tabelle vorstellen. Um ein bestimmtes Element davon anzusprechen, geht man in eine bestimmte Tabellenzeile und von dort aus in eine bestimmte Spalte.

Perl kennt mehrdimensionale Arrays in diesem Sinne nicht, sondern nur Listen, die selbst wieder (Referenzen auf) Listen enthalten können. Dabei sind beliebig tiefe Verschachtelungen erlaubt. Stellen Sie sich jede Unterliste einer Liste als eine Dimension vor.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Liste_1 = ("Baumholder","Bernried","Butzbach");
my @Liste_2 = ("Berlin","Bremen",@Liste_1);
my @Liste_3 = ("Berlin","Bremen",[@Liste_1]);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "<b>Liste_2:</b><pre>@Liste_2</pre>\n";
print "<b>Liste_2[4]:</b><pre>$Liste_2[4]</pre>\n";

print "<b>Liste_3</b><pre>@Liste_3</pre>";
print "<b>Liste_3[2][1]:</b><pre>$Liste_3[2][1]</pre>\n";

print "</body></html>\n";

Erläuterung:

Im Beispiel werden insgesamt drei Listen deklariert und mit Anfangswerten initialisiert. Besonders interessant sind dabei die Listen @Liste_2 und @Liste_3. Beide erhalten als jeweils letztes "Element" die komplette Liste @Liste_1 zugewiesen (dabei zu beachten: der Array-Name darf nicht in Anführungszeichen stehen). Die Syntax ist dabei nur ganz leicht verschieden: in der Zuweisung bei @Liste_2 ist einfach @Liste_1 notiert, während in der Zuweisung bei @Liste_3 noch eckige Klammern hinzukommen. Dort ist [@Liste_1] notiert. Dieser kleine Unterschied hat Folgen: während nämlich bei @Liste_2 die Einzelwerte von @Liste_1 einfach hinzugefügt werden, wird durch die eckigen Klammern bei @Liste_3 eine neue Unterliste eröffnet.

Das Beispiel sendet HTML-Code an den aufrufenden Browser, in dem der Unterschied deutlich wird. @Liste_2 besteht nun einfach aus fünf Elementen, nämlich Berlin Bremen Baumholder Bernried Butzbach. Eine Notation wie $Liste_2[4] greift auf das fünfte Element, also den Wert Butzbach zu. Liste_3 besteht dagegen nunmehr aus drei Elementen, wobei das letzte Element nur eine neue Liste mit eigenen Elementen ist. Bei einer Anweisung wie print "@Liste_3"; gibt Perl als drittes Element so etwas wie z.B. ARRAY(0xb658ac) aus. Das ist einfach eine Seite Referenz auf die Unterliste. Um auf die Elemente der zweiten Dimension zuzugreifen, müssen Sie zweifache eckige Klammern verwenden, für jede Dimension eine. Eine Notation wie $Liste_3[2][1] greift über [2] auf das dritte Element von @Liste_3 zu und dann noch einmal über [1] auf das zweite Unterelement dieses dritten Elements, das ja eine Liste ist. Zugegriffen wird im Beispiel also auf den Wert Bernried.

Das Beispiel zeigt auch, dass Sie in einer Liste beliebige einzelne Werte und weitere Listen mischen können. Auf das zweite Element der Liste_3 greifen Sie mit Liste_3[1] zu. Die Angabe einer zweiten eckigen Klammer ist hier nicht notwendig, da das Element keine Unterliste ist.

Beachten Sie:

Ob ein Array ein- oder mehrdimensional ist, also Unterlisten enthält, können Sie zu jedem Zeitpunkt festlegen. Wenn Sie beispielsweise mit der Anweisung my @Tabelle; einen zunächst undefinierten Array deklarieren, können Sie anschließend problemlos eine Anweisung wie $Tabelle[1][4] = 27; notieren. Damit erhält der Array @Tabelle automatisch zwei Elemente (mit den Nummern 0 und 1). Element 0 erhält den undefinierten Wert (undef), und Element 1 bekommt die Referenz auf eine Liste mit fünf Elementen zugewiesen (0 bis 4), wovon die ersten vier Elemente den Wert undef erhalten und das fünfte Element den von Ihnen zugewiesenen Wert 27.

Funktionen und Operationen zum Manipulieren von Listen bzw. Arrays

Es gibt eine Menge Perl-Funktionen, mit deren Hilfe Sie Listen beeinflussen können. Ein paar wichtige Möglichkeiten sollen hier mit Verweisen auf die Beschreibung der jeweiligen Funktionen genannt werden.

Zeichenketten in Listen aufsplitten:
Wenn Sie Zeichenketten haben, die bestimmte regelmäßig vorkommende Zeichen enthalten, können Sie diese Zeichen als Trennzeichen behandeln und die Zeichenkette in eine Liste übertragen (z.B. kommagetrennte Werte). Dazu gibt es in Perl die Funktion Seite split.

Listen zu einer Zeichenkette verknüpfen:
Manchmal möchte man auch den umgekehrten Weg gehen. Man hat Daten in einer Liste, möchte diese jedoch wieder als Zeichenkette zusammenfassen. Dazu gibt es in Perl die Funktion Seite join.

Listenelemente ändern:
Durch eine Anweisung wie $Liste[12] = "Oliver"; weisen Sie dem 13. Element der Liste einen Wert zu. Falls vorher schon ein Wert in diesem Element gespeichert war, wird er durch den neuen Wert ersetzt.

Listenelemente hinzufügen:
Zum Anhängen von Elementen an Listen bietet Perl die Funktionen Seite push und Seite unshift an.

Listenelemente löschen:
Sie können jederzeit so etwas notieren wie $Liste[12] = "";. Damit ist der Wert gelöscht (bzw. mit einer leeren Zeichenkette überschrieben), aber das Element besteht weiterhin. Richtig löschen können Sie eine Liste nur von vorne und von hinten. Um Elemente aus dem Array richtig zu entfernen, bietet Perl drei Funktionen an. Die Funktion Seite pop löscht von hinten, also jeweils das letzte Element einer Liste. Die Funktion Seite shift löscht von vorne, d.h. das erste Element wird gelöscht, und alle nachfolgenden rücken einen Indexwert nach vorne. Was also vorher $Liste[7] war, ist hinterher $Liste[6]. Die Funktion Seite splice ermöglicht es, beliebige Elemente aus dem Array zu löschen, also sowohl von vorne wie auch von hinten oder auch aus der Mitte. Wie bei shift rücken dann die nachfolgenden Indexwerte entsprechend nach. Mit splice können Sie auch eine ganze Teilliste eines Arrays durch andere Liste ersetzen oder eine Liste in den Array neu einfügen.

Listenelemente sortieren und Reihenfolge umkehren:
Sie können eine Liste völlig neu organisieren, indem Sie deren Elemente numerisch oder alphabetisch sortieren. Perl bietet dazu die Funktion Seite sort an. Eine dazu ergänzende interessante Funktion ist auch Seite reverse, die Listenelemente einfach vertauscht. Das erste Element wird dadurch das letzte, das zweite das vorletzte usw. Durch Sortieren und anschließendes Anwenden von reverse kann man also beispielsweise eine absteigende Sortierung erreichen.

Anzahl Elemente einer Liste ermitteln:
Die Länge einer Liste lässt sich in Perl ganz einfach dadurch ermitteln, dass die Liste im skalaren Kontext interpretiert wird. Hört sich kompliziert an, ist aber ganz einfach. Ein Beispiel:
my $Laenge = @Liste;
Dabei wird im Skalar $Laenge die Anzahl der Elemente des Arrays @Liste gespeichert.

nach oben
weiter | Seite Hashes (Variablen)
zurück | Seite Skalare (Variablen)
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Hashes (Variablen)

SELFHTML

Hashes (Variablen)
Informationsseite

nach unten Hashes deklarieren und Werte zuweisen
nach unten Auf einzelne Schlüssel und Werte zugreifen
nach unten Funktionen und Operationen zum Manipulieren von Hashes
nach unten

Hashes deklarieren und Werte zuweisen

Gewöhnliche Seite Listen bzw. Arrays bestehen aus einer Reihe von Werten, die über Indexnummern, beginnend bei 0, ansprechbar sind. So ist das 8. Element eines Arrays mit dem Namen @Listenname über $Listenname[7] ansprechbar. Ein assoziativer Array, in Perl als Hash bezeichnet, speichert dagegen pro Element zwei Werte: einen Namen und einen Wert. Werte innerhalb eines Hashs werden dann nicht über Indexnummern angesprochen, sondern über den zugehörigen Namen "assoziiert". Der Name wird daher auch als "Schlüssel" bezeichnet. Über den Schlüssel ist der Zugriff auf die damit verknüpften Daten möglich.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my %Daten = ("Name","Jana","Alter",23,"Ort","Berlin");
my %bessereDaten = (Name => "Jana", Alter => 23, Ort => "Berlin");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "<pre>",%Daten,"</pre>\n";
print "<pre>",%bessereDaten,"</pre>\n";

print "</body></html>\n";

Erläuterung:

Im Beispiel werden zwei Hashes namens %Daten und %bessereDaten deklariert. "Deklaration" bedeutet bei Hashes das gleiche wie bei Seite Arrays. Ein Hash wird durch das Prozentzeichen % eingeleitet. Dahinter folgt der Name des Hashes. Bei der Deklaration eines Hashes können Sie Anfangswerte zuweisen oder auch nicht. In beiden obigen Beispielen werden Anfangswerte zugewiesen. Dabei gibt es zwei unterschiedliche Notationsweisen, von denen diejenige, die bei %bessereDaten angewendet wird, die übersichtlichere und daher empfehlenswertere ist. Sie können die Werte wie im ersten Hash gezeigt notieren. Dabei wird wie in einer Liste alles durch Kommata getrennt. Das erste, dritte, fünfte usw. Element bezeichnet jedoch einen Namen, und das zweite, vierte, sechste usw. Element den zugehörigen Wert. In der empfehlenswerteren Notation kommt dies besser zum Ausdruck. Dabei werden die Namen-Wert-Paare durch den Zeigeoperator => (der hier ein Synonym für das Komma darstellt, weshalb er auch als fat comma bezeichnet wird) getrennt, und Kommata werden nur zwischen den Paaren notiert. Bei der Notationsweise mit dem Operator => dürfen die Anführungszeichen bei den Namen, also den Schlüsseln, entfallen, wenn sie den Regeln der Seite Namensvergabe genügen. Bei der anderen Notation mit Komma-Trennung zwischen Schlüssel und Wert sind die Anführungszeichen dagegen auch bei den Schlüsseln Pflicht. Die beiden Beispiel-Hashes zeigen diesen Unterschied.

Wie bei Skalaren und Listen können Sie leere Hashes deklarieren. Eine Anweisung wie my %Daten; deklariert einen Hash, der jedoch zunächst leer ist.

Wie Listen können auch Hashes bei den eigentlichen Werten nur Skalare enthalten, also Zeichenketten und Referenzen, die Sie auch hier beliebig mischen können. Im obigen Beispiel sind die Einzelwerte Jana und Berlin Zeichenketten, während 23 eine Zahl ist.

Das Beispiel gibt einfach die beiden Hash-Inhalte aus.

Beachten Sie:

Skalare, Listen und Hashes haben unterschiedliche Namensräume. Variablen wie $name, @name und %name können also problemlos im gleichen Script vorkommen.

Komplette Hashes, also mit dem Prozentzeichen beginnend, werden innerhalb von Anführungszeichen in print-Anweisungen nicht interpretiert. Um einen Hash komplett auszugeben, so wie im obigen Beispiel, müssen Sie die Technik nutzen, mehrere Einzelwerte mit print auszugeben, die durch Kommata getrennt sind, wie im obigen Beispiel gezeigt.

Anstelle von konstanten Daten können Sie auch andere Variablen in einen Hash einfügen. Zum Beispiel:
my $Alter = 23;
my %Daten = (Name => "Jana", Alter => $Alter);

Hashes lassen sich im Zusammenhang mit CGI-Scripts sehr sinnvoll einsetzen. So ist es beispielsweise möglich, den Datenstrom eines vom Anwender ausgefüllten HTML-Formulars in einen Hash einzulesen, wobei als Hash-Schlüssel jeweils der Feldname des Formularelements gespeichert wird und als Wert der Wert, den der Anwender in dem betreffenden Formularelement eingegeben oder ausgewählt hat.

Auf einzelne Schlüssel und Werte zugreifen

Genau wie bei Listen greifen Sie auf einen Skalar zu, wenn Sie einzelne gespeicherte Werte eines Hashes auslesen oder ihnen Werte zuweisen. Zum Zugriff verwenden Sie den Schlüssel.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my %Daten = (Name => "Jana", Alter => 23, Ort => "Berlin", Bildung => "Abitur");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "$Daten{'Name'} ist $Daten{'Alter'} Jahre alt, wohnt in $Daten{'Ort'} und hat $Daten{'Bildung'}\n";

print "</body></html>\n";

Erläuterung:

Im Script wird wieder der Hash %Daten deklariert und mit vier Werten initialisiert (diesmal gleich in der besseren Notationsweise). Das Script erzeugt wieder HTML-Code und gibt darin die Daten aus. Diesmal wird dabei jedoch auf die einzelnen Werte des Hashes %Daten zugegriffen. Mit $Daten{'Name'} wird auf jenes Element des Hashes zugegriffen, das den Schlüssel Name hat. Das wie vielte Element im Hash dies ist, brauchen Sie nicht zu wissen. Es genügt, den Schlüssel anzugeben. Damit wird auf den entsprechenden Wert zugegriffen. $Daten{'Name'} greift im Beispiel also auf den Wert Jana zu. Wichtig ist, dass der Schlüssel in geschweiften Klammern stehen muss. Die Klammern gehören in diesem Kontext (innerhalb von Zeichenketten) zum Variablennamen und müssen direkt hinter dem Namen des Hashes notiert werden (kein Leerraum erlaubt).

Die Syntax wie in $Daten{'Name'} zeigt mit dem voranstehenden Dollarzeichen, dass es sich bei einem Hash-Wert um einen Skalar handelt.

Beachten Sie:

Anstelle von $Daten{'Name'} können Sie auch $Daten{Name} notieren, also ohne Anführungszeichen. Solange in den geschweiften Klammern nichts weiter steht als ein einzelner Schlüssel, der den Regeln der Seite Namensvergabe genügt, dürfen die Anführungszeichen entfallen.

Funktionen und Operationen zum Manipulieren von Hashes

Viele Perl-Funktionen gelten für Seite Listen und Hashes, einige davon aber auch nur für Hashes, da das Manipulieren von Hashes einige Besonderheiten aufweist. Ein paar wichtige Möglichkeiten sollen hier mit Verweisen auf die Beschreibung der jeweiligen Funktionen genannt werden.

Mit unbekannten Schlüsseln arbeiten:
Wenn Sie einen Hash mit Werten initialisieren, kennen Sie natürlich auch die Schlüsselnamen. Aber wenn Sie Daten einlesen - etwa HTML-Formulardaten in einem CGI-Script - dann wissen Sie oft nicht, was in einem Hash, der die Daten aufgenommen hat, alles drinsteht. Um sich erst einmal einen Überblick zu verschaffen, welche Schlüssel eines Hashs eingelesen wurden, können Sie die Funktion Seite keys verwenden. Anschließend haben Sie eine Seite Liste mit allen Namen bzw. Schlüsseln des Hashes. Angenommen, Sie haben einen Hash %Daten mit Schlüsseln und Werten, die Ihnen zunächst nicht bekannt sind. Dann können Sie mit einer Anweisung wie @Schluessel = keys(%Daten); die Schlüssel ermitteln. Anschließend können Sie beispielsweise über $Daten{$Schluessel[0]} auf den Wert des Hashes zugreifen, der mit dem Namen assoziiert wird, der nun in $Schluessel[0] zu finden ist, ohne den Schlüssel explizit zu kennen.

Werte ändern oder hinzufügen:
Durch eine Anweisung wie $Daten{Vorname} = "Oliver"; weisen Sie innerhalb des Hashes %Daten dem Element mit dem Schlüssel Vorname einen Wert zu. Falls bereits ein Schlüssel Vorname in dem Hash existiert, wird dessen bisher gespeicherter Wert durch den neu zugewiesenen Wert ersetzt. Wenn der Schlüssel dagegen noch nicht existiert, wird das Schlüssel-Wert-Paar einfach neu in den Hash aufgenommen. Ändern geht also, indem man einem vorhandenen Schlüssel einen Wert zuweist, und Hinzufügen, indem man einem noch nicht vorhandenen Schlüssel einen Wert zuweist.

Schlüssel-Wert-Paar löschen:
Zum Löschen eines kompletten Schlüssel-Wert-Paares bietet Perl die Funktion Seite delete an.

Kompletten Hash löschen:
Zum Löschen aller bisher verwendeten Schlüssel-Wert-Paare initialisieren Sie einfach den Hash neu mit leerem Inhalt: %Daten = ().

Hash-Werte der Reihe nach abarbeiten und sortieren:
Hashes werden intern in einer Datenstruktur gespeichert, die für Effizienz bei Schreib- und Lesezugriffen sorgt. Aufgrund dieser Tatsache ist die Reihenfolge der Schlüssel, wie sie beispielsweise von der Funktion Seite keys geliefert wird, (scheinbar) mehr oder weniger zufällig und stimmt nur in den seltensten Fällen mit der Reihenfolge überein, in der Sie den Hash deklariert haben. Sie haben keine Möglichkeit, diese Reihenfolge zu verändern. Es hält Sie allerdings niemand davon ab, die Hash-Elemente in einer bestimmten Reihenfolge beispielsweise mit einer Schleife zu durchlaufen. So können Sie z.B. mit @sortierteSchluessel = sort keys %Daten die Schlüssel des Hashes %Daten alphabetisch sortieren und diese sortierte Liste von Schlüsseln dem Array @sortierteSchluessel zuweisen. So eine sortierte Liste von Schlüsseln können Sie anschließend (beispielsweise mit einer Schleife) benutzen, um die einzelnen Hash-Elemente in eben dieser sortierten Reihenfolge zu verarbeiten. Dabei können Sie wahlweise nach Schlüsseln oder nach Werten sortieren. Dazu müssen Sie allerdings ein paar Perl-Funktionen sowie eine Schleife anwenden. Im Abschnitt über Schleifen finden Sie eine Beschreibung zum Thema Seite Hashes und Schleifen.

Anzahl Schlüssel-Wert-Paare eines Hashs ermitteln:
Dies können Sie ebenfalls über die Funktion Seite keys lösen. Mit einer Anweisung wie $Anzahl = keys(%Daten); speichern Sie im Skalar $Anzahl die Anzahl der in %Daten vorhandenen Schlüssel und damit der Schlüssel-Wert-Paare. Denn die Funktion keys gibt, wenn sie im skalaren Kontext aufgerufen wird, die Anzahl der Schlüssel zurück.

nach oben
weiter | Seite Referenzen bzw. Zeiger (Variablen)
zurück | Seite Listen bzw. Arrays (Variablen)
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Referenzen bzw. Zeiger (Variablen)

SELFHTML

Referenzen bzw. Zeiger (Variablen)
Informationsseite

nach unten Allgemeines zu Referenzen in Perl
nach unten Referenzen auf Skalare
nach unten Referenzen auf Arrays
nach unten Referenzen auf Hashes
nach unten Referenzen auf Subroutinen
nach unten Referenzen auf Dateihandles
nach unten Referenzen auf Referenzen
nach unten

Allgemeines zu Referenzen in Perl

Wenn Sie sich in der Sprache C auskennen, wissen Sie, was Zeiger sind, und wie effizient das Programmieren dadurch werden kann. Referenzen sind Zeiger auf andere Inhalte, z.B. auf zuvor definierte Variablen (egal ob Seite Skalare, Seite Listen oder Seite Hashes). Über Referenzen können Sie den Inhalt eines Skalars, einer Liste oder eines Hashs genauso ansprechen wie über den Originalnamen. Ferner können Sie Referenzen auf Seite Subroutinen setzen. Referenzen sind Skalare, die aber keine "Nutzwerte" speichern, sondern lediglich Arbeitsspeicheradressen von anderen Variablen oder von Subroutinen.

Für Anfänger ist erst einmal nicht so recht ersichtlich, wozu solche Referenzen oder Zeiger gut sein sollen. Denn die Vorteile der Referenzen liegen zum einen auf einem Gebiet, mit dem Perl einen ansonsten verschont - nämlich der effizienten Arbeitsspeicherverwaltung. Es kostet einfach weniger Arbeitsspeicher und weniger Rechenlast, einer Funktion nicht eine Zeichenkette mit vielen tausend Zeichen zu übergeben, sondern nur eine Referenz auf diese Zeichenkette. Zum anderen sind Referenzen sinnvoll, wenn es darum geht, komplexe Datenstrukturen aufzubauen.

Referenzen werden vor allem auch in der Seite objektorientierten Programmierung eingesetzt, die mit Perl seit der Version 5 des Perl-Interpreters ebenfalls möglich ist. So erfolgt der Zugriff auf Methoden (Funktionen, Subroutinen) und Eigenschaften (Variablen) eines Objekts über Referenzen. Auch viele moderne Module benutzen diese Technik, und solche Module zu verwenden bedeutet, mit Referenzen zu arbeiten. Deshalb lohnt es auf jeden Fall, sich mit Referenzen zu beschäftigen.

Referenzen in Perl arbeiten anders als etwa im klassischen C. Die berüchtigten "hängenden Zeiger", also Referenzen, die länger leben als das, was mit ihnen referenziert wird, und die in C zu unkontrollierten Programmzuständen führen können, gibt es in Perl nicht. Dort wird der Wert, auf den die Referenz zeigt, solange im Speicher gehalten, wie die letzte Referenz darauf lebt.
Unter anderem aus diesem Grund ist eine Zeigerarithmetik (also das Rechnen mit Zeigern), wie sie oftmals in C praktiziert wird, in Perl nicht möglich.

Referenzen auf Skalare

Sie können einen Zeiger auf einen Seite Skalar erzeugen und über diesen Zeiger auf den Skalar und seinen gespeicherten Wert zugreifen.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Satz = "HTML - How To Make Love";
my $Satzzeiger = \$Satz;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "Variablentyp und Speicheradresse von \$Satz: $Satzzeiger<br>\n";
print "Inhalt von \$Satz: ${$Satzzeiger}\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel definiert zunächst einen gewöhnlichen Skalar namens $Satz und initialisiert ihn mit einem Wert. Anschließend wird eine Referenz auf diesen Skalar deklariert. Die Referenz erhält im Beispiel den Namen $Satzzeiger. Es handelt sich dabei von der Syntax her also offensichtlich um einen Skalar. Was diesen Skalar zu einer Referenz macht, ist der Wert, der ihm bei der Initialisierung zugewiesen wird. Der zugewiesene Wert \$Satz signalisiert Perl durch den anfänglichen Backslash, dass in $Satzzeiger die Referenz auf $Satz gespeichert werden soll. Würde der Backslash fehlen, dann würde $Satzzeiger einfach nur eine Kopie des Wertes von $Satz zugewiesen.

Das Beispiel erzeugt HTML-Code. Dabei gibt es zwei Informationen aus: einmal den Inhalt von $Satzzeiger (damit man sieht, was in so einer Referenz gespeichert ist - der ausgegebene Wert enthält so etwas wie SCALAR(0xb67d20)), und einmal den Inhalt von $Satz, jedoch nicht über $Satz selber, sondern mit Hilfe der Referenz $Satzzeiger. Der angegebene Beispiel-Code enthält außerdem eine andere kleine Gemeinheit, die zu Verwirrung führen kann: an der Stelle, wo \$Satz innerhalb der print-Anweisung vorkommt, hat der Backslash eine andere Bedeutung als zuvor beim Initialisieren der Referenz! An dieser Stelle dient der Backslash zum Seite Maskieren des Zeichens $. Durch die Maskierung wird erreicht, dass an der Stelle die Zeichenkette $Satz ausgegeben wird und nicht etwa der in $Satz gespeicherte Wert.

Um mit einer Referenz auf den in diesem Skalar gespeicherten Wert zugreifen zu können, müssen Sie die Syntax benutzen wie im Beispiel mit ${$Satzzeiger} gezeigt. Die Referenz, in diesem Fall $Satzzeiger, wird dabei in geschweiften Klammern und mit einem zusätzlich vorangestellten Dollarzeichen notiert. ${$Satzzeiger} liefert im Beispiel also HTML - How To Make Love.

Beachten Sie:

Die Syntax zur Dereferenzierung mit der geschweiften Klammer ist die Variante, die immer funktioniert. Perl bietet Ihnen auch hier die Möglichkeit, die Notation abzukürzen. Statt ${$Satzzeiger} können Sie auch $$Satzzeiger notieren, wenn es im Kontext eindeutig ist.

Referenzen auf Arrays

Sie können einen Zeiger auf einen Seite Array erzeugen und über diesen Zeiger auf den Array und alle seine Elemente zugreifen.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Saetze = ( "HTML - How To Make Love. ",
               "XHTML - Extended How To Make Love. ",
               "XML - Extended Making Love." );
my $Saetzezeiger = \@Saetze;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "Variablentyp und Speicheradresse von \@Saetze: $Saetzezeiger<br>\n";
print "Inhalt von \@Saetze: @{$Saetzezeiger} <br>\n";
print "Inhalt von \$Saetze[2]: $Saetzezeiger->[2] <br>\n";

print "</body></html>\n";

Erläuterung:

Im Beispiel wird zunächst ein Array namens @Saetze deklariert und mit Anfangswerten initialisiert. Anschließend wird eine Referenz auf diesen Array mit Namen $Saetzezeiger deklariert. Die Referenz selber ist ein Skalar, sichtbar an dem vorangestellten Dollarzeichen. Eine Referenz auf den Array wird dieser Skalar durch den zugewiesenen Wert \@Saetze. Der Backslash vor dem Klammeraffen signalisiert Perl, dass es eine Referenz ist. Würde der Backslash an dieser Stelle fehlen, dann würde in $Saetzezeiger übrigens die Anzahl der Array-Elemente von @Saetze gespeichert!

Das Beispiel erzeugt HTML-Code und gibt dabei verschiedene Daten aus. In der ersten print-Anweisung wird zum besseren Verständnis der gespeicherte Wert der Referenz $Saetzezeiger ausgegeben - das ist so etwas wie ARRAY(0xb65b28).
Die zweite print-Anweisung gibt den kompletten Inhalt des Arrays aus. Auf den Array als Ganzes wird dabei über die Referenz mit der Syntax @{$Saetzezeiger} zugegriffen. Die Referenz steht also in geschweiften Klammern, und unmittelbar davor ist ein Klammeraffe notiert, der auf die Liste hinweist.
In der dritten print-Anweisung wird ein bestimmtes Element von @Saetze ausgegeben, nämlich das dritte Listenelement. Direkt notiert wäre dieses Element mit $Saetze[2] ansprechbar. Im Beispiel wird es jedoch über die Referenz angesprochen, und dabei lautet die Syntax $Saetzezeiger->[2]. Notiert wird also die Referenz, gefolgt von dem Pfeiloperator -> und dem gewünschten Listenelement in eckigen Klammern. Wichtig ist dabei, dass innerhalb der Zeichenkette $Saetzezeiger->[2] keine Leerzeichen vorkommen.

Die Backslashes vor \@Saetze und \$Saetze[2] innerhalb der print-Anweisungen haben wie schon im Beispiel zu Skalaren nichts mit Referenzen zu tun, sondern dienen der Seite Maskierung.

Beachten Sie:

Wie auch bei Skalarreferenzen bietet Perl Ihnen unterschiedliche Notationsmöglichkeiten. So können Sie statt @{$Saetzezeiger} auch @$Saetzezeiger notieren und statt $Saetzezeiger->[2] können Sie auch die "Urvariante" ${$Saetzezeiger}[2] oder die Variante $$Saetzezeiger[2] verwenden.

Referenzen auf Hashes

Sie können eine Referenz auf einen Seite Hash erzeugen und über diese Referenz auf den Hash als Ganzes sowie auf dessen einzelne Schlüssel und Werte zugreifen.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my %Sprachen = ( HTML => "How To Make Love. ",
                 XHTML => "Extended How To Make Love. ",
                 XML => "Extended Making Love. " );
my $Sprachenzeiger = \%Sprachen;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "Variablentyp und Speicheradresse von %Sprachen: $Sprachenzeiger<br>\n";
print "Inhalt von \%Sprachen: ", %{$Sprachenzeiger}," <br>\n";
print "Bedeutung von XML: $Sprachenzeiger->{XML} <br>\n";

print "</body></html>\n";

Erläuterung:

Im Beispiel wird zunächst ein Hash namens %Sprachen deklariert und mit Anfangswerten initialisiert. Anschließend wird eine Referenz auf diesen Hash mit Namen $Sprachenzeiger deklariert. Die Referenz selber ist ein Skalar, der durch den zugewiesenen Wert \%Sprachen zur Referenz wird. Der Backslash vor dem Prozentzeichen signalisiert die Referenz auf den Hash.

Das Beispiel erzeugt HTML-Code und gibt dabei verschiedene Daten aus. In der ersten print-Anweisung wird zum besseren Verständnis der gespeicherte Wert der Referenz $Sprachenzeiger ausgegeben - das ist so etwas wie HASH(0xb65b28).
Die zweite print-Anweisung gibt den kompletten Inhalt des Hashes aus. Auf den Hash als Ganzes wird über die Referenz mit der Syntax %{$Sprachenzeiger} zugegriffen. Die Referenz steht also in geschweiften Klammern, und unmittelbar davor ist ein Prozentzeichen notiert, das auf den Hash hinweist.
In der dritten print-Anweisung wird direkt das Hash-Element mit dem Schlüssel XML angesprochen. Direkt notiert wäre dieses Element mit $Sprachen{XML} ansprechbar. Im Beispiel wird es jedoch über die Referenz angesprochen, und dabei lautet die Syntax $Sprachenzeiger->{XML}. Notiert wird also die Referenz, gefolgt von dem Pfeiloperator -> und dem gewünschten Hash-Schlüssel in geschweiften Klammern. Innerhalb von $Sprachenzeiger->{XML} dürfen in diesem Kontext (also innerhalb von Zeichenketten) keine Leerzeichen vorkommen.

Beachten Sie:

Wie bei Array-Referenzen bietet Perl Ihnen auch hier unterschiedliche Notationsmöglichkeiten. So können Sie wieder statt %{$Sprachenzeiger} auch %$Sprachenzeiger notieren, und statt $Sprachenzeiger->{XML} können Sie auch die Varianten ${$Sprachenzeiger}{XML} oder $$Sprachenzeiger{XML} verwenden.

Referenzen auf Subroutinen

Sie können eine Referenz auf eine Seite Subroutine setzen und über diese Referenz die Subroutine aufrufen.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

sub Zufallswert {
 return int(rand(1000) + 1);
}

my $Ergebnis = Zufallswert();
my $Subroutinenzeiger = \&Zufallswert;
my $Referenzergebnis = &{$Subroutinenzeiger}();

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "Ergebnis: $Ergebnis<br>\n";
print "Subroutinenzeiger: $Subroutinenzeiger<br>\n";
print "Referenzergebnis: $Referenzergebnis<br>\n";

print "</body></html>\n";

Erläuterung:

Im Beispiel wird eine Subroutine namens Zufallswert notiert. Diese Subroutine ermittelt mit Hilfe der Perl-Funktionen Seite rand und Seite int eine zufällige Ganzzahl zwischen 1 und 1000 und gibt die ermittelte Zahl mit Seite return zurück.

Mit der Anweisung my $Ergebnis = &Zufallswert(); wird die Subroutine aufgerufen. Der Rückgabewert, also eine ermittelte Zufallszahl, wird im Skalar Ergebnis gespeichert.
Mit der Anweisung my $Subroutinenzeiger = \&Zufallswert; wird dagegen nur ein Zeiger auf die Subroutine Zufallswert deklariert. Die Funktion wird dabei nicht aufgerufen! Dass es sich um eine Referenz handelt, bewirkt die Syntax \&Zufallswert beim zugewiesenen Wert. Der Backslash am Anfang signalisiert die Referenz und das Ampersand-Zeichen & eine Subroutine. Dahinter folgt der Name der Subroutine.
Mit der Anweisung my $Referenzergebnis = &{$Subroutinenzeiger}(); wird die Subroutine Zufallswert wieder aufgerufen. Diesmal aber nicht wie in der ersten Anweisung direkt, sondern über die zuvor definierte Referenz. Die Syntax ist dabei so, dass die Referenz in geschweiften Klammern steht und ein Ampersand-Zeichen & vorangestellt bekommt.
Die leeren runden Klammern hinter dem Namen der Subroutine sind übrigens nicht zwingend nötig. Der Rückgabewert des zweiten Aufrufs von Zufallswert wird in dem Skalar $Referenzergebnis gespeichert.

Das Beispiel sendet HTML-Code an den Browser und gibt dabei die drei Werte von $Ergebnis, $Subroutinenzeiger und $Referenzergebnis aus. Während die beiden Skalare $Ergebnis und $Referenzergebnis eine Zufallszahl zwischen 1 und 1000 enthalten, ist der Inhalt von $Subroutinenzeiger nur der Zeigertyp und die Arbeitsspeicheradresse, z.B. so etwas wie CODE(0xb65b28).

Beachten Sie:

Perl bietet Ihnen auch bei der Dereferenzierung von Code-Referenzen unterschiedliche Notationsmöglichkeiten. So können Sie analog zu Skalar- und Array-Referenzen statt &{$Subroutinenzeiger}() auch &$Subroutinenzeiger() oder $Subroutinenzeiger->() notieren.

Referenzen auf Dateihandles

Bei Seite Funktionen für Ein-/Ausgabe und Lesen/Schreiben von Daten haben Sie viel mit Dateihandles zu tun. Dateihandles verhalten sich anders als gewöhnliche Variablen. So können Sie ihnen keine direkten Werte zuweisen, sondern nur die Werte nutzen, die dem Dateihandle bei Bedarf vom Perl-Interpreter selbst zugewiesen werden. Die Werte beinhalten perl-interne Informationen über den Seite Ein-/Ausgabekanal, auf den Sie mittels des Dateihandles zugreifen. Für Sie als Benutzer ist allerdings nur der Name des Handles interessant, um den Rest kümmert sich der Perl-Interpreter selbst.
Auf ein solches Dateihandle können Sie ebenfalls eine Referenz setzen. Hier liegt eine weitere Besonderheit gegenüber gewöhnlichen Variablen in Perl: Sie müssen diese Referenz zur Benutzung des Dateihandles nicht explizit dereferenzieren. Das erledigt der Perl-Interpreter automatisch, wenn es notwendig ist.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

open(DATEI, "</tmp/server.cfg") || die "nicht gefunden";
my $HandleReferenz = \*DATEI;
my @Zeilen = <$HandleReferenz>;
my $Zeilenzahl = @Zeilen;
my $HandleName = *{$HandleReferenz};
close($HandleReferenz);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "eingelesene Zeilen: $Zeilenzahl<br>\n";
print "$HandleReferenz<br>\n";
print "$HandleName<br>\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel öffnet mit der Seite open-Funktion von Perl eine Datei. Dabei ist DATEI der Name für das Dateihandle, über das auf die Datei zugegriffen wird. Dieser Name ist im Rahmen der Seite Regeln zur Namensvergabe frei wählbar, jedoch sollten Sie per Konvention keine Kleinbuchstaben verwenden. Wenn Sie die Seite w-Option des Perl-Interpreters verwenden, erhalten Sie bei unpassend gewählten Namen eine Warnung. Normalerweise könnte anschließend mit einer Anweisung wie my @Zeilen = <DATEI>; der Inhalt der Datei eingelesen werden. Im obigen Beispiel geschieht das Einlesen jedoch indirekt über eine Referenz.
Mit der Anweisung my $HandleReferenz = \*DATEI; wird ein Zeiger auf den Namen (bzw. den Eintrag in der perl-internen Symboltabelle) DATEI deklariert. Der Backslash am Anfang der Zuweisung signalisiert die Referenz und das Sternzeichen * einen Symboltabelleneintrag (einen so genannten Typeglob). Dahinter folgt der Name des Dateihandles.
Mit my @Zeilen = <$HandleReferenz>; kann der Inhalt der Datei nun über die Referenz auf das Dateihandle eingelesen werden. Statt <DATEI> wird also einfach <$HandleReferenz> notiert. Die Referenz dazu wird vom Perl-Interpreter selbst aufgelöst.
Die Anweisung my $Zeilenzahl = @Zeilen; ermittelt die Anzahl der eingelesenen Zeilen zur späteren Kontrollausgabe.
In der Anweisung my $HandleName = *{$HandleReferenz}; wird die Referenz auf das Dateihandle nochmals explizit dereferenziert. In dieser Notation, also in geschweiften Klammern und mit voranstehendem Sternzeichen, wird der in $HandleReferenz gespeicherte Name des Handles ermittelt, im Beispiel also DATEI. Dabei wird allerdings auch der aktuelle Namensraum (package) mit ermittelt (siehe dazu auch die Perl-Funktion Seite package). Der tatsächlich ermittelte Wert im obigen Beispiel ist *main::DATEI. Dabei ist main einfach der voreingestellte Namensraum von Perl, wenn - wie hier im Beispiel auch - kein anderer Namensraum angegeben wurde. main::DATEI wird als voll qualifizierter Name bezeichnet, da er genau aussagt, in welchem Namensraum DATEI zu finden ist.

Das Beispiel erzeugt HTML-Code und gibt dabei die ermittelten Werte aus. Der Wert von $HandleReferenz ist so etwas wie GLOB(0xb67968). Dabei steht GLOB für den Referenztyp "Typeglob".

Referenzen auf Referenzen

Es mag sich zunächst nach einer theoretischen Spielerei anhören, mit Referenzen auf Referenzen zu arbeiten. Bei komplexen Datenstrukturen kann es jedoch durchaus sinnvoll sein, solche Referenzen einzusetzen. Gerade beim Zugriff auf Einzelwerte aus einer solchen komplexen Datenstruktur erreicht Perl eine geradezu klassische Schönheit in der Notation.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Haus = "Einfamilienhaus in Fertigbauweise";
my @Autos = ("VW","Opel","Audi","Porsche");
my %Familie = (Frau => "Eva", Tochter => "Anja", Sohn => "Florian");
my %Zeigerhash = (Hauszeiger => \$Haus, Autozeiger => \@Autos, Familienzeiger => \%Familie);
my $Zeiger = \%Zeigerhash;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "(1.) $Zeiger->{Hauszeiger}<br>\n";
print "(2.) ${$Zeiger->{Hauszeiger}}<br>\n";
print "(3.) $Zeiger->{Autozeiger}<br>\n";
print "(4.) @{$Zeiger->{Autozeiger}}<br>\n";
print "(5.) $Zeiger->{Autozeiger}->[2]<br>\n";
print "(6.) $Zeiger->{Autozeiger}[3]<br>\n";
print "(7.) $Zeiger->{Familienzeiger}<br>\n";
print "(8.)", %{$Zeiger->{Familienzeiger}},"<br>\n";
print "(9.) $Zeiger->{Familienzeiger}->{Frau}<br>\n";
print "(10.) $Zeiger->{Familienzeiger}{Sohn}<br>\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel deklariert zunächst einen Skalar $Haus, einen Array @Autos und einen Hash %Familie. Daraufhin werden Zeiger bzw. Referenzen auf diese Variablen definiert. Da es sich jedoch um eine Serie von Zeigern handelt, werden sie nicht einzeln als Skalare deklariert, sondern in einem Hash namens %Zeigerhash. Jedes Element eines Hashs oder einer Liste kann ja einen Skalar speichern, und da Referenzen Skalare sind, ist es also kein Problem, Hashes oder Listen von Referenzen zu erzeugen. Der Hash im Beispiel erhält als Zuweisung beispielsweise einen Schlüssel namens Hauszeiger, mit dem eine Referenz auf den Skalar Haus verknüpft ist, sichtbar am beginnenden Backslash \$Haus. Ebenso wird es mit den anderen Referenzen innerhalb des Hashes gemacht.

Nun könnte man ja über die Hashvariable %Zeigerhash auf die Referenzen und ihre Werte zugreifen. Im Beispiel wird jedoch noch ein Skalar namens $Zeiger deklariert, der eine Referenz auf den Hash %Zeigerhash ist, sichtbar an der Notation \%Zeigerhash bei der Zuweisung. $Zeiger ist damit also eine Referenz auf einen Hash aus Referenzen.

Das Beispiel-Script hat damit allerlei Daten beisammen und kann bei der Zusammenstellung von HTML-Code die verschiedensten Werte ausgeben. Der Einfachheit halber erscheinen die Ausgaben nummeriert:

(1.) gibt so etwas aus wie: SCALAR(0xb65b7c), denn $Zeiger->{Hauszeiger} bedeutet den Wert des Hash-Elements mit dem Schlüssel Hauszeiger, und das ist die Referenz \$Haus.
(2.) gibt aus: Einfamilienhaus in Fertigbauweise, denn ${$Zeiger->{Hauszeiger}} bedeutet den Wert des Wertes vom Hash-Element mit dem Schlüssel Hauszeiger, also letztlich den Wert der Referenz \$Haus. Um den Wert des Wertes zu ermitteln, wird um den Ausdruck aus (1.) einfach noch einmal eine geschweifte Klammer gesetzt und ein Dollarzeichen vorangestellt.
(3.) gibt so etwas aus wie: ARRAY(0xb65b4c), denn $Zeiger->{Autozeiger} bedeutet den Wert des Hash-Elements mit dem Schlüssel Autozeiger, und das ist die Referenz \@Auto.
(4.) gibt aus: VW Opel Audi Porsche, denn @{$Zeiger->{Autozeiger}} bedeutet den Wert des Wertes vom Hash-Element mit dem Schlüssel Autozeiger, also letztlich den Wert der Referenz \@Autos, und das ist die gesamte Liste @Autos. Um den Wert des Wertes zu ermitteln, wird um den Ausdruck aus (3.) einfach noch einmal eine geschweifte Klammer gesetzt und ein Klammeraffe vorangestellt.
(5.) gibt aus: Audi, denn $Zeiger->{Autozeiger}->[2] bedeutet den Wert des dritten Elements des Wertes vom Hash-Element mit dem Schlüssel Autozeiger, also letztlich den dritten Wert der Referenz \@Autos, und das ist das dritte Element von @Autos.
(6.) gibt aus: Porsche. Dies ist eine verkürzte Schreibweise für das gleiche, was bei (5.) passiert. Es genügt, den ersten Pfeiloperator -> zu notieren.
(7.) gibt so etwas aus wie: HASH(0xb65b58), denn $Zeiger->{Familienzeiger} bedeutet den Wert des Hash-Elements mit dem Schlüssel Familienzeiger, und das ist die Referenz \%Familie.
(8.) gibt aus: SohnFlorianTochterAnjaFrauEva, denn %{$Zeiger->{Familienzeiger}} bedeutet den Wert des Wertes vom Hash-Element mit dem Schlüssel Familienzeiger, also letztlich den Wert der Referenz \%Familie, und das ist der gesamte Hash %Familie. Um den Wert des Wertes zu ermitteln, wird um den Ausdruck aus (7.) einfach noch einmal eine geschweifte Klammer gesetzt und ein Prozentzeichen vorangestellt.
(9.) gibt aus: Eva, denn $Zeiger->{Familienzeiger}->{Frau} bedeutet den Wert des Hash-Elements mit dem Schlüsselnamen Frau des Wertes vom Hash-Element mit dem Schlüssel Familienzeiger.
(10.) gibt aus: Florian. Dies ist eine verkürzte Schreibweise für das gleiche, was bei (9.) passiert und hat den gleichen Grund wie bei (6.).

nach oben
weiter | Seite Vordefinierte Variablen in Perl
zurück | Seite Hashes (Variablen)
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Vordefinierte Variablen in Perl

SELFHTML

Vordefinierte Variablen in Perl
Informationsseite

nach unten Allgemeines zu vordefinierten Variablen
nach unten Vordefinierte Skalare
nach unten Vordefinierte Listen und Hashes
nach unten

Allgemeines zu vordefinierten Variablen

Perl hält eine Fülle spezieller vordefinierter Variablen bereit. Den Inhalt dieser Variablen können Sie auslesen, um Informationen zur aktuellen Perl-Konfiguration oder die Systemkonfiguration des Rechners, auf dem das Script und der Perl-Interpreter laufen, zu ermitteln. Einige der Variablen sind aber auch Hilfsvariablen, die das Programmieren erleichtern. So gibt es z.B. eine Variable, die in einer Schleife den jeweils aktuellen Wert bereitstellt, oder eine Variable, die übergebene Parameter speichert.

Viele der vordefinierten Variablen sehen optisch übel aus und sind ein Mitgrund, warum Perl mancherorts als unverständliche Hacker-Sprache gilt. Denn wer sich nicht mit Perl auskennt, für den sind Variablennamen wie $_, $/, $" oder $% eine Zumutung. Neben dieser klassischen Kurznotation gibt es deshalb auch "Klartext"-Varianten dieser Variablen. Doch dazu muss man ein Modul namens English einbinden, das jedoch den Nachteil hat, dass es die Ausführungsgeschwindigkeit des Scripts senkt und wie alle anderen Module auch den Ressourcenbedarf erhöht. Demgegenüber steht der Vorteil, dass Ihr Programm für Sie besser lesbar wird.

Das folgende Beispiel zeigt einige der vordefinierten Variablen in Aktion:

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);
use English;

print "Content-type: text/plain\n\n";
print "===Vordefinierte Skalare====================================\n\n";
print "Prozessnummer dieses laufenden Prozesses: $$ oder $PID\n";
print "Bei diesem Prozess ausgeführte Datei:  $0 oder $PROGRAM_NAME \n";
print "Diesen Prozess ausführender Interpreter:  $^X oder $EXECUTABLE_NAME \n";
print "Versionsnummer des Perl-Interpreter:  $] oder $PERL_VERSION \n";
print "Startzeit des Prozesses:  $^T oder $BASETIME \n";
print "Betriebssystem:  $^O oder $OSNAME \n";
print "\n\n===Vordefinierte Listen=====================================\n\n";
print "Übergebene Argumente:\n";
my $i = 0;
foreach (@ARGV) {
  print ++$i,". Argument: $_\n";
}
$i = 0;
print "\nSuchpfad für Perl-Module:\n";
foreach (@INC) {
  print ++$i,". Pfad: $_\n";
}
print "\n\n===Vordefinierter Hash======================================\n\n";
foreach (keys %ENV) {
  printf " %20s:  $ENV{$_} \n",$_;
}

Erläuterung:

Das Beispiel erzeugt mit dem Seite MIME-Typ text/plain Text. Dabei werden die Werte verschiedener vordefinierter Variablen ausgegeben. Einige werden zur Kontrolle zweimal ausgegeben, nämlich einmal in der klassischen Kurzform und einmal in der Klartextform, die aber nur möglich ist, weil mit use English; das entsprechende Seite Standardmodul eingebunden wird. So enthalten beispielsweise $$ und $PID den gleichen Wert.

Die einzelnen Elemente vordefinierter Arrays und Hashes wie @ARGV, @INC und %ENV werden in dem Script jeweils mit Hilfe einer Seite foreach-Schleife sauber formatiert ausgegeben. Dabei wird auch der vordefinierte Skalar $_ verwendet, der wohl die am häufigsten in der Praxis verwendete vordefinierte Variable ist.

Der Array @ARGV ist übrigens leer, solange Sie das Script ohne Kommandozeilen-Parameter aufrufen.

Vordefinierte Skalare

Die Tabellen beschreiben vordefinierte Skalare. Beispiele sind nur dort vorhanden, wo keine größere Beispielumgebung erforderlich ist. Einige der Skalare sind betriebssystemspezifisch bzw. ausschließlich in Unix-Umgebungen von Bedeutung.

Um die Langformen der Variablen zu nutzen, müssen Sie mit use English; das entsprechende Standardmodul in Ihr Script einbinden.

Vordefinierte Skalare für Programmablauf und reguläre Ausdrücke

Kurzform Langform Bedeutung Kleines Beispiel
$_ $ARG Enthält in Schleifen (z.B. bei der Suche in einer Liste mit Seite foreach), wenn keine andere Variable angegeben wurde, den jeweils aktuellen Wert bzw. das jeweils aktuelle Argument. Wird von einigen Kapitel Perl-Funktionen als Argument akzeptiert, d.h. den Funktionen muss kein expliziter Wert übergeben werden, wenn $_ als Argument gemeint ist. Enthält bei Operationen mit Seite regulären Ausdrücken den jeweils aktuellen Wert.
@Zahlen = (1..10);
foreach(@Zahlen) {
 print $_, "\n";
}
$1, $2 usw.   Enthält bei Operationen mit regulären Ausdrücken mit runden Klammern jeweils den Wert eines Seite gemerkten Teilausdrucks. Nur lesbar, nicht änderbar.
if(/from: (.*)/) {
 $Absender = $1;
}
$& $MATCH Enthält nach Anwenden eines regulären Ausdrucks den letzten Wert, auf den das Suchmuster passte. Nur lesbar, nicht änderbar. Die Verwendung dieser Variablen verlangsamt das gesamte Programm, daher wird die Benutzung von Profis nicht empfohlen.
$_ = "Mann und Frau";
/und/;
print "$&\n";
$` $PREMATCH Enthält den Teil des Gesamtausdrucks vor dem letzten Wert, auf den das Suchmuster passte. Nur lesbar, nicht änderbar. Das ` ist das Accent-grave-Zeichen. Auf vielen Tastaturen Shift-Taste und Accent-Taste drücken, dann ein Leerzeichen tippen. Die Verwendung dieser Variablen verlangsamt das gesamte Programm, daher wird die Benutzung von Profis nicht empfohlen.
$_ = "Mann und Frau";
/ und/;
print "$`\n";
$' $POSTMATCH Enthält den Teil des Gesamtausdrucks nach dem letzten Wert, auf den das Suchmuster passte. Nur lesbar, nicht änderbar. Das ' ist der einfache Apostroph. Die Verwendung dieser Variablen verlangsamt das gesamte Programm, daher wird die Benutzung von Profis nicht empfohlen.
$_ = "Mann und Frau";
/und /;
print "$'\n";
$+ $LAST_PAREN_MATCH Enthält nach Anwenden eines regulären Ausdrucks mit Klammern den Inhalt der letzten Klammer. Nur lesbar, nicht änderbar.
$_ = "Mann und Frau";
/([a-zA-Z]*) und ([a-zA-Z]*)/;
print "$+\n";
$. $NR
$INPUT_LINE_NR 		Enthält die aktuelle Zeilennummer der zuletzt eingelesenen Datei. Im nebenstehenden Beispiel werden alle Zeilen einer Textdatei eingelesen und ausgegeben. Am Ende kann $. darüber Auskunft geben, wie viele Zeilen eingelesen wurden.
open(DATEI, "<readme.txt");
while(<DATEI>)
 { print $_; }
print $., " Zeilen gelesen";
close(DATEI);
$/ $RS
INPUT_RECORD_SEPARATOR 		Enthält den eingestellten Eingabeseparator. Kann geändert werden - auch mehrere Zeichen sind erlaubt. Das nebenstehende Beispiel bewirkt, dass eine Eingabe von der Standardeingabe erst dann abgeschlossen ist, wenn der Anwender die Zeichenfolge ENDE eingibt und Return drückt.
Der voreingestellte Wert ist das Zeilenumbruch-Zeichen \n
$/ = "ENDE";

$DeinName = <STDIN>;

print $DeinName;
$\ $ORS
OUTPUT_RECORD_SEPARATOR 		Erlaubt die Zuweisung einer Zeichenfolge, die automatisch an jede Ausgabe mit Seite print eingefügt wird.
$\ = ";";
print "ein Wert";
$, $OFS
OUTPUT_FIELD_SEPARATOR 		Erlaubt die Zuweisung einer Zeichenfolge, die automatisch an jeden Einzelwert angehängt wird, der mit Seite print in Form mehrerer, durch Kommata getrennter Einzelwerte ausgegeben wird.
$, = ",";
print "Wert","noch einer";
$" $LIST_SEPARATOR Erlaubt die Zuweisung einer Zeichenfolge, die automatisch an jeden Einzelwert außer dem letzten angehängt wird, wenn mit Seite print eine Liste bzw. ein Array innerhalb einer Zeichenkette interpoliert ausgegeben wird.
$" = "-";
@Liste = (1,2,3,4);
print "@Liste";
$| $OUTPUT_AUTOFLUSH Wenn diese Variable auf einen Wert ungleich 0 gesetzt wird, werden Ausgaben mit print nicht gepuffert, sondern erfolgen in dem Augenblick, wo die print-Anweisung interpretiert wird. Normalerweise puffert Perl Ausgaben, um sie dann blockweise auszugeben.
$| = 1;
$% $FORMAT_PAGE_NUMBER Siehe Funktion Seite format.

$= $FORMAT_LINES_PER_PAGE Siehe Funktion Seite format.

$- $FORMAT_LINES_LEFT Siehe Funktion Seite format.

$~ $FORMAT_NAME Siehe Funktion Seite format.

$^ $FORMAT_TOP_NAME Siehe Funktion Seite format.

$: $FORMAT_LINE_
BREAK_CHARACTERS 		Siehe Funktion Seite format.

$^L $FORMAT_FORMFEED Siehe Funktion Seite format.

$^A $ACCUMULATOR Siehe Funktion Seite format.

Vordefinierte Skalare für Umgebungsinformationen

Kurzform Langform Bedeutung Kleines Beispiel
$? $CHILD_ERROR Enthält den Status, der zuletzt von einem Seite system-Aufruf, einer geschlossenen Pipe oder durch Backticks von einem Kindprozess erzeugt wurde.
system($command) == 0
  or die "Fehler bei system: $?"
$! $ERRNO
$OS_ERROR 		Enthält eine im Programm-Kontext aktuelle Fehlermeldung oder Fehlernummer, sofern ein Fehler aufgetreten ist. Die nebenstehende Anweisung versucht eine Datei zu öffnen und gibt im Fehlerfall die vordefinierte Perl-Fehlermeldung aus, wenn die Datei nicht geöffnet werden kann und beendet das Programm.
open(DATEI, "<nixda.txt")
  or die "Fehler bei open: $!";
$@ $EVAL_ERROR Enthält einen Wert ungleich null, sofern ein Fehler bei einer Anwendung von Seite eval aufgetreten ist. Wenn kein Fehler aufgetreten ist, enthält sie nichts.
eval { system("dir"); };
if($@) {
 print "dir nicht möglich\n";
}
$$ $PID
$PROCESS_ID 		Enthält die Prozess-ID des aktuellen Prozesses, in dem das Script läuft, so wie sie vom Betriebssystem zugewiesen wurde.
print $$;
$< $UID
REAL_USER_ID 		Enthält die reale User-ID des den aktuellen Prozess ausführenden Benutzers (sofern das Betriebssystem, auf dem der Perl-Interpreter übersetzt wurde, das unterstützt).
print $<;
$> $EUID
EFFECTIVE_USER_ID 		Enthält die effektive User-ID des den aktuellen Prozess ausführenden Benutzers (sofern das Betriebssystem, auf dem der Perl-Interpreter übersetzt wurde, das unterstützt).
print $>;
$( $GID
REAL_GROUP_ID 		Enthält die reale Gruppen-ID des den aktuellen Prozess ausführenden Benutzers (sofern das Betriebssystem, auf dem der Perl-Interpreter übersetzt wurde, das unterstützt). Ist der Benutzer Mitglied in mehreren Gruppen, so enthält diese Variable die einzelnen Gruppen-IDs durch Leerzeichen voneinander getrennt.
print $(;
$) $EGID
EFFECTIVE_GROUP_ID 		Enthält die effektive Gruppen-ID des den aktuellen Prozess ausführenden Benutzers (sofern das Betriebssystem, auf dem der Perl-Interpreter übersetzt wurde, das unterstützt). Ist der Benutzer Mitglied in mehreren Gruppen, so enthält diese Variable die einzelnen Gruppen-IDs durch Leerzeichen voneinander getrennt.
print $);
$0 $PROGRAM_NAME Enthält den Namen des laufenden Scripts.
print $0;
$] Enthält die genaue Versionsnummer des ausführenden Perl-Interpreters. Diese Variable sollte nicht mehr verwendet werden. Stattdessen wird zu $^V geraten.
print $];
$^D $DEBUGGING Enthält den aktuellen Wert der Debugging-Flags (Ergebnis der Perl-Aufrufoption -D).
print $^D;
$^F $SYSTEM_FD_MAX Enthält den Wert des höchsten offenen Dateidescriptors - normalerweise den Wert 2.
print $^F;
$^H   Enthält die Anzahl von Syntaxprüfungen, die Perl bei der Angabe von use strict; und anderen Angaben zu strenger Syntaxprüfung durchführt.
print $^H;
$^I $INPLACE_EDIT ist defined oder undef, je nachdem, ob das Inplace-Edit-Flag gesetzt ist oder nicht.
print $^I;
$^M   Kann Daten aufnehmen für den Fall, dass Perl die Ausführung des Scripts wegen Arbeitsspeichermangel nicht fortführen kann. Die nebenstehende Anweisung reserviert 64 Kilobyte Arbeitsspeicher für den Fall, dass Perl bei der Ausführung des Scripts keinen neuen Arbeitsspeicher mehr für benötigte Daten reservieren kann.
Dieses Feature muss bei der Übersetzung des Perl-Interpreters explizit aktiviert werden, damit es benutzbar ist.
$^M = 'a' x (1<<16);
$^O $OSNAME Name des Betriebssystems.
print $^O;
$^P $PERLDB Enthält den aktuellen Debug-Status.
print $^P;
$^S   Enthält den aktuellen Zustand des Perl-Interpreters. Wenn ein Aufruf von Seite eval nicht beendet ist, hat diese Variable den Wert undef.
eval { system("rm_all_old"); };
print $^S;
$^T $BASETIME Enthält den Zeitpunkt, zu dem das Scipt gestartet wurde. Der Wert entspricht der Zahl an Sekunden, die vom 1.1.1970, 0.00 Uhr, bis zum Startzeitpunkt des Scripts vergangen sind.
print "Start: $^T, ";
sleep(3);
my $jetzt = time;
print "und jetzt: $jetzt";
$^V $PERL_VERSION Enthält die genaue Versionsnummer des ausführenden Perl-Interpreters in Form von Ordinalwerten. Um die Daten sichtbar zu machen, verwenden Sie Seite sprintf oder Seite printf und den speziellen Formatbezeichner %vd.
printf "%vd", $^V;
$^W $WARNING Ist wahr (1), wenn die Perl-Aufrufoption -w gesetzt ist, und unwahr (0), wenn sie nicht gesetzt ist.
print "Vorsicht!" if($^W);
$^X $EXECUTABLE_NAME Enthält den Namen der ausführbaren Datei des Perl-Interpreters, der das Script ausführt.
print $^X;

Vordefinierte Listen und Hashes

Kurzform Langform Bedeutung Kleines Beispiel
@_   Enthält die Parameter, die beim Aufruf einer Seite Subroutine übergeben wurden. Innerhalb der Subroutine sind die übergebenen Parameter mit $_[0] (= erster Parameter), $_[1] (= zweiter Parameter) usw. ansprechbar. @_ ist innerhalb von Subroutinen das Standardargument für den Aufruf der Funktion Seite shift. Sie können also den ersten übergebenen Parameter z.B. mit my $erster = shift; der Variable $erster zuweisen und gleichzeitig aus der Parameterliste entfernen.
&Sprich("Hallo Welt");
sub Sprich {
 print $_[0];
}
@ARGV   Enthält die Parameter, die beim Aufruf des Perl-Scripts mit übergeben wurden. Wenn z.B. perl test.pl meintext.txt eingegeben wurde, ist meintext.txt der erste Parameter aus Sicht des Perl-Scripts. Das Script kann Parameter als Input für den Programmablauf auswerten. Im nebenstehenden Beispiel wird der erste übergebene Parameter $ARGV[0] als Dateiname interpretiert. Das Script versucht, diese Datei zu öffnen.
@ARGV ist im globalen Dateikontext das Standardargument für den Aufruf der Funktion shift.
if (open(DATEI, "< $ARGV[0]")) {
  print "$ARGV[0] geöffnet!";
  close(DATEI);
}
@INC   Enthält die Pfade, in denen Perl nach eingebundenen Modulen sucht.
print @INC;
@ISA   Enthält eine Liste von Basisklassen, deren Methoden eine Klasse bei objektorientierter Programmierung erben soll.
use vars qw(@ISA);
@ISA = qw(Base);
print @ISA;
@EXPORT   Bei Modulen einsetzbar. Kann Namen des Moduls aufnehmen, die in den Namensraum eines einbindenden Scripts auf jeden Fall exportiert werden. Siehe Seite Erweiterte Verwendung von use.
@EXPORT = qw(%FORMULARFELDER);
@EXPORT_OK   Bei Modulen einsetzbar. Kann Namen des Moduls aufnehmen, die ein einbindendes Script in den eigenen Namensraum übernehmen kann, aber nicht übernehmen muss. Siehe Seite Erweiterte Verwendung von use.
@EXPORT_OK = qw($Zeitstempel @Logdaten);
%ENV   Enthält Umgebungsvariablen, die beim Aufruf des Scripts vom aufrufenden System übergeben wurden. Bei CGI-Scripts werden die Umgebungsvariablen vom Webserver gesetzt und sind als Seite CGI-Umgebungsvariablen verfügbar.
$, = "\n";
print keys(%ENV);
%SIG   Enthält die zur Verfügung stehenden Signal-Handler, die einem Perl-Script erlauben, auf definierte Signale, die es von anderen laufenden Prozessen erhält, zu reagieren.
$, = "\n";
print keys(%SIG);

nach oben
weiter | Seite Zeichenketten (Strings)
zurück | Seite Referenzen bzw. Zeiger (Variablen)
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Zeichenketten (Strings)

SELFHTML

Zeichenketten (Strings)
Informationsseite

nach unten Eigenschaften von Zeichenketten
nach unten Regeln beim Notieren von Zeichenketten
nach unten Steuerzeichen in Zeichenketten
nach unten Maskierung von Zeichen in Zeichenketten
nach unten Funktionszeichen in Zeichenketten
nach unten Numerische Notation von Zeichen in Zeichenketten
nach unten Operationen und Funktionen für Zeichenketten
nach unten

Eigenschaften von Zeichenketten

Zeichenketten sind in Perl, anders als etwa in C, keine Arrays aus Zeichen, sondern ein einziges "Datum". Jede Zeichenkette ist potentiell unendlich groß und nur durch den verfügbaren Speicher in ihrer Größe begrenzt. Es ist also kein Problem, auch größere Datenmengen in einer Zeichenkette zu speichern.

Eine wichtige Eigenschaft von Zeichenketten in Perl ist auch, dass sie beliebige Zeichen enthalten können. Es gibt also keine reservierten Zeichen wie in C etwa das Zeichen mit dem Wert 0 zum Anzeigen des Endes der Zeichenkette. Auch andere Steuerzeichen, die andernorts als typische Endekennzeichen verwendet werden, etwa das Steuerzeichen für Zeilenumbruch, können innerhalb von Zeichenketten in Perl beliebig vorkommen. Zeichenketten in Perl können deshalb auch problemlos binäre Daten aufnehmen und verarbeiten.

Als Variablentyp zum Speichern einer einzelnen Zeichenkette sind Seite Skalare vorgesehen.

Regeln beim Notieren von Zeichenketten

Beim direkten Notieren von Zeichenketten können Sie die Zeichenkette wahlweise in einfache oder doppelte Anführungszeichen setzen oder die q- bzw. qq-Operatoren dazu nutzen. Für mehrzeilige Zeichenketten bieten sich die so genannten "Hier-Dokumente" an. Es gibt einige semantische Unterschiede zwischen den Notationen:

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print <<'KOPF';
Content-type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Testausgabe</title>
</head><body>
KOPF

my $Name = "Methusalem";
my $Alter = 625;

print "$Name ist ein alter Mann, sehr alt. Er ist $Alter Jahre alt<br>\n";
print '$Name ist ein alter Mann, sehr alt. Er ist $Alter Jahre alt<br>\n';

print qq($Name ist ein alter Mann, sehr alt. Er ist $Alter Jahre alt<br>\n);
print q($Name ist ein alter Mann, sehr alt. Er ist $Alter Jahre alt\n);

print "</body></html>\n";

Erläuterung:

Im Beispiel werden der HTTP-Header sowie die ersten HTML-Zeilen mit Hilfe eines so genannten "Hier-Dokuments" ausgegeben. Hier-Dokumente haben etwa die gleiche Wirkung wie das pre-Element in HTML. Die Zeichenkette wird dabei so formatiert wie sie im Quelltext notiert ist. Ein Hier-Dokument beginnt mit dem einleitenden << und dem Namen eines Endbegrenzers (im Beispiel: KOPF). Der Name kann in einfache oder doppelte Anführungszeichen eingeschlossen werden, welche den gleichen Effekt haben wie bei "normalen" Zeichenketten auch. Bei doppelten Anführungszeichen werden Variablen innerhalb des Hier-Dokuments interpoliert, bei einfachen nicht. Wenn Sie die Anführungszeichen ganz weglassen, nimmt Perl doppelte Anführungszeichen an. Zwischen dem << und dem Namen darf kein Leerzeichen stehen. Beendet wird das Hier-Dokument durch den Endbegrenzer (ohne Anführungszeichen), der allein in einer Zeile ohne Leerzeichen davor oder dahinter stehen muss. Die Zeile muss unbedingt mit einem Zeilenumbruch abgeschlossen werden.

Im obigen Beispiel werden anschließend zwei Skalare $Name und $Alter deklariert und mit einem Anfangswert versehen. Dann wird mit print-Anweisungen mehrmals die gleiche Zeichenkette ausgegeben - zunächst einmal in doppelten Anführungszeichen, dann in einfachen Anführungszeichen. Beide Male enthält die Zeichenkette im Satz eingebettet die Skalare $Name und $Alter. Bei der Ausgabe wird sichtbar, dass bei Verwendung doppelter Anführungszeichen die Skalare $Name und $Alter durch ihren gespeicherten Wert ersetzt werden (Fachjargon: Interpolation), während bei Verwendung einfacher Anführungszeichen an den entsprechenden Stellen einfach die Zeichenfolgen $Name und $Alter ausgegeben werden. Ferner wird bei der Version mit den einfachen Anführungszeichen das abschließend notierte nach unten Steuerzeichen \n ebenfalls so ausgegeben wie es als Zeichenfolge da steht, während das Steuerzeichen bei Verwendung doppelter Anführungszeichen interpretiert wird, also im ausgegebenen Text tatsächlich einen Zeilenumbruch erzeugt.

Das bedeutet also: verwenden Sie doppelte Anführungszeichen, wenn in einer Zeichenkette angegebene Variablen und Steuerzeichen interpretiert werden sollen, und verwenden Sie einfache Anführungszeichen, wenn genau das nicht geschehen soll.

Die beiden Operatoren qq und q entsprechen den doppelten bzw. einfachen Anführungszeichen. Bei qq werden Variablen und Steuerzeichen interpretiert, bei q dagegen nicht. Die Verwendung von qq und q ist nicht so gebräuchlich wie diejenige mit Anführungszeichen, doch sie kann Quelltext durchaus lesbarer machen. Im obigen Beispiel wurden runde Klammern gewählt, um den Inhalt von qq und q einzuschließen. Sie können jedoch auch andere Zeichen dazu verwenden. Bei Zeichen, die ein Gegenstück besitzen, etwa < und >, { und } oder [ und ], wird dieses als Endbegrenzer erwartet. Perl achtet dann auf Verschachtelungen innerhalb der Zeichenkette. Derartige Klammern eignen sich somit hervorragend dafür, um beispielsweise Perl-Code innerhalb einer Zeichenkette darzustellen. Wenn Sie andere Zeichen als Begrenzer verwenden, achten Sie darauf, dass das Zeichen in der Zeichenkette nicht vorkommt.

Neben diesen Formen gibt es auch noch qx oder als Alternative dazu die so genannten Backticks. Damit erzeugen Sie Zeichenketten, die von Perl als Systemaufruf umgesetzt werden. Einzelheiten dazu im Abschnitt Seite qx(...) - Andere Programme/Scripts ausführen und STDOUT auffangen.

Steuerzeichen in Zeichenketten

Für die Notation einiger wichtiger Steuerzeichen stellt Perl eine spezielle Notationssyntax zur Verfügung, die sich an die Sprache C anlehnt. Solche Zeichen werden durch einen Backslash \ eingeleitet. Dahinter folgt ein Buchstabe, der das Steuerzeichen bezeichnet. Diese Steuerzeichen werden nur innerhalb von Zeichenketten interpretiert, die in doppelten Anführungszeichen "..." oder in qq(...) stehen, und auch nur dann, wenn der Ausgabekanal entsprechende Möglichkeiten bietet. Folgende Steuerzeichen gibt es:

Notation | Bedeutung | Beispiel
\a | Alarmton (Beep) | print "\a"
\b | Backspace-Zeichen | print "meine\b"
\e | Escape-Zeichen zur Einleitung von Escape-Sequenzen | print "\e[A"
\f | Steuerzeichen für Seitenvorschub | print "Seitenende\fSeitenanfang"
\n | Steuerzeichen für Zeilenvorschub. Der genaue Zeichencode dafür ist betriebssystemabhängig. Unter Unix ist es beispielsweise der ASCII-Code 10, während es auf Apple-Macintosh der ASCII-Code 13 und unter DOS eine Zeichenfolge aus ASCII 13 und 10 ist. | print "Zeilenende\nZeilenanfang"
\r | Steuerzeichen für Wagenrücklauf. Der genaue Zeichencode dafür ist betriebssystemabhängig. Unter Unix und DOS ist es beispielsweise der ASCII-Code 13, während es auf Apple-Macintosh der ASCII-Code 10 ist. | print "Wagen\rWagenrücklauf"
\t | Steuerzeichen für Tabulator | print "Alter:\t32"

Maskierung von Zeichen in Zeichenketten

Jene Zeichen, die eine Zeichenkette einschließen, müssen Sie, falls das entsprechende Zeichen innerhalb der Zeichenkette vorkommt, maskieren. Dazu wird der Backslash \ als Maskierungszeichen verwendet. Da nun dadurch auch der Backslash besondere Bedeutung erhält, muss er selber ebenfalls maskiert werden, falls er in einer Zeichenkette als Zeichen vorkommt.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/plain\n\n";

print "Eine typische print-Ausgabe ist \"Hallo Welt\\n\";\n";
print "Eine typische print-Ausgabe ist 'Hallo Welt\\n';\n";

print 'Eine typische print-Ausgabe ist "Hallo Welt\n";',"\n";
print 'Eine typische print-Ausgabe ist \'Hallo Welt\n\';';

Erläuterung:

Das Beispiel sendet reinen Text und gibt dabei mit print-Anweisungen viermal den gleichen Satz aus. Bei den ersten beiden Anweisungen werden doppelte Anführungszeichen verwendet. Wie im Beispiel ersichtlich, muss dabei das Zeichen " durch \" maskiert werden. Ebenfalls maskiert werden muss der Backslash \, und zwar durch \\.
Die beiden unteren Anweisungen verwenden dagegen einfache Anführungszeichen. Dabei muss nur eben dieses Zeichen maskiert werden, wenn es vorkommt, und zwar durch \' - das ist in der letzten der Anweisungen der Fall.

Funktionszeichen in Zeichenketten

Perl stellt bestimmte eigene Steuerzeichen zur Verfügung, die funktionale Auswirkungen auf nachfolgend notierte Zeichen haben. Solche Zeichen werden durch einen Backslash \ eingeleitet. Dahinter folgt ein Buchstabe, der das Funktionszeichen bezeichnet. Diese Funktionszeichen werden nur innerhalb von Zeichenketten interpretiert, die in doppelten Anführungszeichen "..." oder in qq(...) stehen. Folgende Funktionszeichen gibt es:

Notation | Bedeutung | Beispiel
\U | Großschreibung (upper case). Funktionsgleich mit Seite uc. | print "\UGroßes Geschrei"
\L | Kleinschreibung (lower case). Funktionsgleich mit Seite lc. | print "\LCp Dat1.TXT Dat2.TXT"
\u | Großschreibung des ersten Zeichens. Funktionsgleich mit Seite ucfirst. | print "\ugroß und klein"
\l | Kleinschreibung des ersten Zeichens. Funktionsgleich mit Seite lcfirst. | print "\lGroß und klein"
\E | Endezeichen für \U und \L. | print "\UAlles groß? \ENein, nicht alles"

Numerische Notation von Zeichen in Zeichenketten

Sie können beliebige Zeichen einer Zeichenkette auch mit ihrem numerischen Zeichenwert notieren. Erlaubt sind allerdings nur oktale und hexadezimale Angaben.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/plain\n\n";

print "\123\164\145\146\141\156 oktal\n";
print "\x53\x74\x65\x66\x61\x6E hexadezimal\n";
print "Stefan normal\n";

Erläuterung:

Das Beispiel sendet reinen Text und gibt dabei mit print-Anweisungen dreimal das Wort Stefan und ein Zeilenumbruch-Zeichen aus. Bei der ersten Anweisung werden die Buchstaben des Namens in oktaler Schreibweise notiert, bei der zweiten Anweisung in hexadezimaler Schreibweise. Bei der oktalen Schreibweise beginnen so dargestellte Zeichen mit einem Backslash, gefolgt von der Zahl (erlaubt sind bei oktaler Schreibweise die Ziffern 0 bis 7). Bei hexadezimaler Schreibweise beginnen Zeichen ebenfalls mit Backslash, gefolgt jedoch von einem x und dahinter der Zahl (erlaubt sind bei hexadezimaler Schreibweise die Ziffern 0 bis 9 und A bis F).

Operationen und Funktionen für Zeichenketten

Eine der Stärken von Perl ist das Manipulieren von Zeichenketten. Perl stellt daher etliche Operationen und Funktionen zur Zeichenkettenbearbeitung bereit.

Zeichenketten aneinanderhängen:
Ein wichtiger Operator für Zeichenketten ist der Punkt-Operator, der es erlaubt, eine Zeichenkette an eine andere anzuhängen. Siehe dazu Seite Operator für Zeichenkettenverknüpfung

Teile aus Zeichenketten extrahieren: Oft ist es wichtig, aus einer Zeichenkette einen ganz bestimmten Teil zu extrahieren, so etwa aus einem URI den reinen Domainnamen. Perl bietet dazu folgende Funktionen an: Seite index und Seite substr.

Suchen und Ersetzen in Zeichenketten:
Perl ermöglicht gezieltes Durchsuchen von Zeichenketten. Ebenfalls möglich ist Suchen und Ersetzen. Der Schlüssel dazu sind Seite reguläre Ausdrücke.

Länge einer Zeichenkettenkette ermitteln:
Dazu gibt es in Perl die Funktion Seite length.

Zeichenketten in mehrere aufsplitten:
Viele Zeichenketten enthalten so genannte Trennzeichen, etwa bei eingelesenen Zeilen einer kommaseparierten Datei. In solchen Fällen macht es Sinn, aus der Zeichenkette eine Seite Liste mit Einzelwerten zu machen. Dazu gibt es die Funktion Seite split.

nach oben
weiter | Seite Zahlen
zurück | Seite Vordefinierte Variablen in Perl
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Zahlen

SELFHTML

Zahlen
Informationsseite

nach unten Eigenschaften von Zahlen in Perl
nach unten Schreibweisen von Zahlen
nach unten Operationen und Funktionen für Zahlen
nach unten

Eigenschaften von Zahlen in Perl

Perl operiert bei Einsatz von 32-Bit-Prozessoren, wie sie heute bei den meisten Computern (noch) üblich sind, intern mit 32 Bit breiten Gleitpunktzahlen nach dem Standard IEEE754. Das bedeutet für die Praxis, dass Perl bei sehr großen Zahlen und sehr kleinen Zahlen tendenziell immer "undeutlicher" wird in der Darstellung. Bei solchen Zahlen wendet Perl zur Darstellung die Exponentialschreibweise an. Je größer bzw. kleiner die Zahlen jedoch werden, desto ungenauer ist die Darstellung. Das folgende Beispiel zeigt dies:

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/plain\n\n";

my $x = 12345678901234567890;
my $y = 0.000000000000000001;

print "x = $x\n";
print "y = $y\n";

$x = $x + 1;
$y = $y - 0.123456789123456789;

print "x = $x\n";
print "y = $y\n";

Erläuterung:

Das Beispiel zwingt zwei Skalaren $x und $y jeweils eine ziemlich große und eine ziemlich kleine Zahl auf. Anschließend werden die Zahlen als reiner Text ausgegeben. Dann werden die beiden Skalare noch weiter traktiert. $x soll nur eine einzige Zahl dazuzählen, und bei $y soll eine ziemlich vielstellige Gleitpunktzahl subtrahiert werden. Nach diesen Operationen werden beide Skalare nochmals ausgegeben. Perl erzeugt folgende Ausgabe:
x = 1.23456789012346e+019
y = 1e-018
x = 1.23456789012346e+019
y = -0.123456789123457

Die große Zahl von $x hat sich bei der zweiten Ausgabe gegenüber der ersten Ausgabe also trotz der Addition von 1 nicht verändert, und bei dem Wert von $y ist offensichtlich, dass bei der zweiten Ausgabe ein paar Stellen hinter dem Komma dran glauben mussten.

Es gibt jedoch das Seite Standardmodul Math, das Perl befähigt, potentiell beliebig große und kleine Zahlen darzustellen und damit zu rechnen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);
use Math::BigInt;
use Math::BigFloat;

my $x = Math::BigInt->new('12345678901234567890');
my $y = Math::BigFloat->new('0.000000000000000001');

print "Content-type: text/plain\n\n";

print "x = $x\n";
print "y = $y\n";

$x = $x + 1;
$y = $y - '0.123456789123456789';

print "x = $x\n";
print "y = $y\n";

Erläuterung:

Das Beispiel-Script führt die gleichen Zahlen und Operationen ein wie zuvor, aber diesmal bindet es zwei Untermodule von Math ein:
Mit use Math::BigInt; wird ein Modul zum Darstellen von und Rechnen mit großen Ganzzahlen eingebunden.
Mit use Math::BigFloat; wird ein Modul zum Darstellen von und zum Rechnen mit großen Gleitpunktzahlen eingebunden.
Um eine Zahl mit diesen Modulen zu erzeugen, gehen Sie vor wie gezeigt: bei Ganzzahlen notieren Sie Math::BigInt->new('[Zahl]'), und bei Gleitpunktzahlen Math::BigFloat->new('[Zahl]'). Zur besseren Übersicht dürfen Sie in die Zahl auch Leerzeichen einfügen, wie im ersten der obigen Beispiele gezeigt. Anschließend können Sie mit den Skalaren, denen Sie solche Zahlen zugewiesen haben, ganz normal arbeiten. Sie können die Werte ausgeben und verändern, so wie im Beispiel. Das Beispiel erzeugt nun folgende Ausgabe:
x = +12345678901234567890
y = .000000000000000001
x = +12345678901234567891
y = -.123456789123456999

Benutzen Sie diese Module jedoch nur bei solchen großen Zahlen, denn bei komplexeren Rechenoperationen beanspruchen die so erzeugten Zahlen deutlich mehr Rechenleistung.

Schreibweisen von Zahlen

Gewöhnliche Zahlen können Sie in Perl auch wie gewohnt notieren. Zu beachten ist nur, dass das Dezimalzeichen bei "Kommazahlen" der Punkt ist. Negative Zahlen können Sie notieren, indem Sie ein Minuszeichen voranstellen. Bei positiven Zahlen können Sie auch ein explizites Pluszeichen voranstellen. Neben der gewöhnlichen Notation im Dezimalformat können Sie Zahlen aber auch in Exponentialschreibweise, oktal oder hexadezimal notieren. Die folgende Tabelle bietet eine Übersicht der Notationsmöglichkeiten.

Notationsbeispiel | Erläuterung
243 | Normale Notation einer Ganzzahl im Dezimalformat.
-243 | Notation einer negativen Ganzzahl im Dezimalformat.
+243 | Notation einer explizit positiven Ganzzahl im Dezimalformat.
53.78 | Notation einer "Kommazahl". Dezimalzeichen ist der Punkt. Minus- und Pluszeichen sind genauso möglich wie bei Ganzzahlen.
1.0e+4 | Notation einer großen Zahl in Exponentialschreibweise. Die Zahl im Beispiel bedeutet so viel wie 10000. Die 4 am Ende gibt also die Anzahl der Zehnerpotenzen an.
1.0e-4 | Notation einer kleinen Zahl in Exponentialschreibweise. Die Zahl bedeutet so viel wie 0.0001.
0700 | Notation einer Ganzzahl in Oktalschreibweise. Dabei wird einfach eine 0 vorangestellt. Die Zahl bedeutet dezimal so viel wie 448.
0xF6 | Notation einer Ganzzahl in Hexadezimalschreibweise. Dabei wird einfach die Zeichenfolge 0x vorangestellt. Die Zahl bedeutet dezimal so viel wie 246.

Operationen und Funktionen für Zahlen

Zahlen sind hauptsächlich zum Rechnen da. Perl unterstützt die Grundrechenarten. Zuständig dafür sind die Seite Berechnungsoperatoren. Mit ihrer Hilfe und beliebiger Klammerung lassen sich z.B. Ausdrücke wie (5*(6+8.00003))-7 ohne weiteren Umweg berechnen.

Daneben bietet Perl auch eine Reihe mathematischer Funktionen an. Darunter befinden sich allgemeine Funktionen wie Seite sqrt (Quadratwurzel errechnen), aber auch trigonometrische Funktionen wie Seite sin (Sinus), Seite cos (Cosinus) und Seite atan2 (Arcus Tangens y/x), sowie Umrechnungsfunktionen wie Seite hex (Hexadezimalzahlen in Dezimalzahlen umrechnen) oder Seite oct (Oktalzahlen in Dezimalzahlen umrechnen).

nach oben
weiter | Seite Bedingte Anweisungen
zurück | Seite Zeichenketten (Strings)
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Bedingte Anweisungen

SELFHTML

Bedingte Anweisungen
Informationsseite

nach unten Bedingte Anweisungen mit if, else und elsif
nach unten Bedingte Anweisungen mit unless
nach unten Nachgestellte Bedingungen
nach unten Einfache Entweder-Oder-Abfrage
nach unten

Bedingte Anweisungen mit if, else und elsif

Sie können die Ausführung von Anweisungen von Bedingungen abhängig machen.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus - ohne Übergabeparameter
Beispiel-Seite Anzeigebeispiel: So sieht's aus - mit 3 Zeichen (abc) als Übergabeparameter
Beispiel-Seite Anzeigebeispiel: So sieht's aus - mit dem String "selfhtml" als Übergabeparameter
(Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

if( $ENV{QUERY_STRING} eq "" ) {
 print "<b>Dem Script wurden keine Daten &uuml;bergeben!</b>\n";
}
elsif( length($ENV{QUERY_STRING}) < 4 ) {
 print "<b>&Uuml;bergebene Daten enthalten weniger als 4 Zeichen!</b>\n";
}
elsif( length($ENV{QUERY_STRING}) > 8 ) {
 print "<b>&Uuml;bergebe Daten enthalten mehr als 8 Zeichen!</b>\n";
}
else {
 print "<p><b>folgende Daten wurden dem Script &uuml;bergeben:</b><br> $ENV{QUERY_STRING}</p>";
 (my $String, my $Salt) = split(/\+/,$ENV{QUERY_STRING});
 my $CryptString = crypt($String,$Salt);
 print "<p><b>Verschl&uuml;sselt lauten die Daten:</b><br>$CryptString</p>\n";
}

print "</body></html>\n";

Erläuterung:

Das Beispiel-Script erwartet, dass ihm beim Aufruf eine Zeichenkette mit mindestens 4 bis maximal 8 Zeichen Länge übergeben wird. Diese Daten verschlüsselt es mit der Funktion Seite crypt und gibt den verschlüsselten Wert zur Kontrolle aus. Übergeben können Sie dem Script die Zeichenkette beim Aufruf im Browser etwa als Parameter. Wenn das Script also beispielsweise die Adresse http://localhost/cgi-bin/crypt.pl hat, können Sie es mit http://localhost/cgi-bin/crypt.pl?Mimose aufrufen, und es verschlüsselt die Zeichenkette Mimose nach dem crypt-Standard. Wenn Sie das Script dagegen ohne Parameter aufrufen oder eine zu kurze oder zu lange Zeichenkette übergeben, dann gibt es stattdessen eine Fehlermeldung aus.

Um diese bedingungsabhängigen Aktionen auszuführen, fragt das Script zunächst ab, ob die Seite CGI-Umgebungsvariable QUERY_STRING leer ist. Mit if können Sie eine solche Wenn-Dann-Bedingung einleiten. Dahinter folgt, in Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu formulieren, brauchen Sie entweder zwei Werte, die Sie vergleichen möchten, oder Sie fragen direkt, ob ein in den Klammern stehender Ausdruck wahr oder falsch ist. Im Beispiel werden in der Bedingung zwei Werte verglichen, nämlich $ENV{QUERY_STRING} (die Umgebungsvariable, die übergebene Parameter enthält) mit dem so genannten Leerstring, der durch leere Anführungszeichen "" markiert wird. Das eq dazwischen ist ein Seite Vergleichsoperator für Zeichenketten. Vergleichsoperatoren müssen Sie kennen, um Bedingungen formulieren zu können, in denen zwei Werte verglichen werden.

Im Anschluss an die if-Bedingung folgt ein Seite Anweisungsblock, markiert wie üblich durch geschweifte Klammern { und }. Dazwischen können beliebig viele Anweisungen stehen. Diese Anweisungen werden aber nur dann ausgeführt, wenn die if-Bedingung wahr ist. Im Beispiel wird mit der if-Bedingung abgefragt, ob die Umgebungsvariable mit den übergebenen Daten leer ist. Wenn dies der Fall ist, also wenn diese Bedingung wahr ist, dann wird ausgegeben: Dem Script wurden keine Daten übergeben!. Die anschließenden Anweisungsblöcke, die hinter den beiden elsif und else folgen, werden in diesem Fall übersprungen.

Mit elsif können weitere Bedingungen formuliert werden. Abgeprüft werden diese Bedingungen aber erst, wenn alle unmittelbar voranstehenden Bedingungen unwahr waren. Das zweite elsif im Beispiel wird also nur dann überhaupt von Perl bewertet, wenn Daten übergeben wurden, und wenn diese nicht weniger als 4 Zeichen enthalten. Die beiden elsif-Bedingungen im Beispiel vergleichen wieder zwei Werte, nämlich die Länge der übergebenen Daten, ermittelt mit der Funktion Seite length, mit einer jeweils festen Zahl.

Erst wenn alle if- und elsif-Bedingungen unwahr sind, wird der else-Zweig ausgeführt. Dieser braucht keine Bedingung mehr, sondern bedeutet einfach den "Ansonsten-Fall". Da im obigen Beispiel die zuvor notierten Bedingungen Fehler abfangen, steht dort im else-Zweig der Code für den "Gutfall". Die Daten werden zur Kontrolle ausgegeben, verschlüsselt und dann in verschlüsselter Form nochmals ausgegeben.

Beachten Sie:

Die geschweiften Klammern nach einem if, elsif oder else müssen immer notiert werden, auch dann, wenn nur eine einzige Anweisung darin notiert wird. Dies ist in Perl anders als in manchen anderen Sprachen, etwa in Seite JavaScript.

Bedingte Anweisungen mit unless

Bedingungen können auch andersherum formuliert werden.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus - ohne Übergabeparameter
Beispiel-Seite Anzeigebeispiel: So sieht's aus - mit dem String "strenggeheim" als Übergabeparameter
(Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

unless( $ENV{QUERY_STRING} eq "strenggeheim" ) {
 print "<b>Keine Erlaubnis!</b>\n";
}
else {
 open (FH, "</usr/bin/apache/conf/httpd.conf");
 my @Dateizeilen = <FH>;
 close(FH);
 print "<h1>Aktuelle Konfiguration des Apache-Servers</h1>\n";
 print "<pre>@Dateizeilen</pre>\n";
}
print "</body></html>\n";

Erläuterung:

Das Script formuliert mit unless eine "Wenn-nicht"-Bedingung. Innerhalb der Bedingung wird verglichen, ob die Umgebungsvariable QUERY_STRING den Wert strenggeheim hat. Die Bedingung ist also wahr, wenn der Anwender im Browser das Script beispielsweise mit http://localhost/cgi-bin/show_apache.pl?strenggeheim aufgerufen hat. Durch unless wird die Bedingung jedoch als Ganzes verneint. Anweisungen, die in dem Anweisungsblock stehen, der in den geschweiften Klammern abhängig von unless ausgeführt wird, wird im Beispiel nur dann ausgeführt, wenn der Anwender das Script nicht mit dem Übergabeparameter strenggeheim aufgerufen hat.

In diesem Fall gibt das Script eine Fehlermeldung aus und überspringt den else-Zweig. Hat der Anwender den richtigen Übergabeparameter eingegeben, gelangt das Script dagegen in den else-Zweig. Dort liest es die zentrale Konfigurationsdatei des Apache-Webservers ein und gibt deren Inhalt im Browser aus. Die dabei verwendeten Perl-Funktionen sind Seite open und Seite close.

Nachgestellte Bedingungen

Um eine einzelne Anweisung abhängig von einer Bedingung auszuführen, erlaubt Perl auch eine besondere, etwas kürzere Form von Bedingungen.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Datumzeit = localtime(time);
my $Stunden = $Datumzeit[2];

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<h1>Guten Morgen!</h1>" if ( $Stunden > 5 && $Stunden < 10 );
print "<h1>Guten Tag!</h1>" if ( $Stunden > 9 && $Stunden < 19 );
print "<h1>Guten Abend!</h1>" if ( $Stunden > 18 );
print "<h1>Hi Nachteule!</h1>" unless ( $Stunden > 5 );

print "</body></html>\n";

Erläuterung:

Das Script ermittelt mit der Funktion Seite localtime Datum und Uhrzeit auf dem Server. Aus den Gesamtdaten, die diese Funktion liefert, werden die Stunden extrahiert und im Skalar $Stunden gespeichert. Das Script gibt nun im HTML-Code eine Überschrift mit einem uhrzeitabhängigen Text aus. Dabei steht die print-Anweisung vorne, und die Bedingung ist jeweils nachgestellt. Die jeweilige print-Anweisung wird nur dann ausgeführt, wenn die dahinter notierte Bedingung wahr ist. Wie Sie dem Beispiel entnehmen können, sind nachgestellte Bedingungen sowohl mit if als auch mit unless möglich.

Das Besondere an den nachgestellten Bedingungen ist, dass nur eine Anweisung abhängig davon ausgeführt werden kann. Denn der gesamte Ausdruck inklusive der Bedingung stellt eine einzige Anweisung dar. Deshalb gibt es bei solchen Bedingungen auch keine geschweiften Klammern.

Das Beispiel zeigt auch noch einmal einige weitere Bedingungen. In einigen der Fälle sind nämlich auch zwei Bedingungen verknüpft. So wird Guten Morgen nur dann ausgegeben, wenn die Stundenzahl der Server-Uhrzeit größer als 5 und kleiner als 10 ist, also zwischen 6 und 9 beträgt. Verknüpft werden dabei zwei Einzelbedingungen mit dem Seite logischen Operator &&. Die gesamte Bedingung ist in dem Fall nur dann wahr, wenn beide Einzelbedingungen wahr sind.

Einfache Entweder-Oder-Abfrage

Für einfache Entweder-Oder-Bedingungen gibt es noch eine spezielle Syntax, die Sie alternativ zu if und else verwenden können.

Beispiel eines vollständigen CGI-Scripts:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $Ergebnis = $ENV{'HTTP_USER_AGENT'} =~ /MSIE/ ? "den Internet Explorer" : "nicht den Internet Explorer";
print "<b>Sie benutzen $Ergebnis!</b>\n";

print "</body></html>\n";

Erläuterung:

Das Script ermittelt durch Bewerten der Umgebungsvariablen HTTP_USER_AGENT mit Hilfe eines Seite regulären Ausdrucks, ob der aufrufende Browser ein Internet Explorer ist oder nicht. Im HTML-Code steht dann entweder: "Sie benutzen den Internet Explorer" oder "Sie benutzen nicht den Internet Explorer".

Eine einfache Entweder-Oder-Abfrage wird mit einer Bedingung eingeleitet, im Beispiel $ENV{'HTTP_USER_AGENT'} =~ /MSIE/. Dabei ist /MSIE/ ein regulärer Ausdruck, und =~ ist ein spezieller Bindungsoperator für solche regulären Ausdrücke. Dahinter wird ein Fragezeichen notiert. Hinter dem Fragezeichen wird eine Anweisung notiert, die dann ausgeführt wird, wenn die Bedingung wahr ist. Dahinter folgt ein Doppelpunkt, und dahinter eine Anweisung für den Fall, dass die Bedingung nicht wahr ist. Im Beispiel bestehen die beiden Anweisungen lediglich in der Notation von Werten, die dem Skalar $Ergebnis ganz links vor der Formulierung der Bedingung zugewiesen werden. Ebenso könnte an der Stelle aber auch stehen:
$ENV{'HTTP_USER_AGENT'} =~ /MSIE/ ? print "Sie benutzen den MS IE" : print "Sie benutzen nicht den MS IE";.

nach oben
weiter | Seite Schleifen
zurück | Seite Zahlen
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Schleifen

SELFHTML

Schleifen
Informationsseite

nach unten for-Schleifen
nach unten foreach-Schleifen
nach unten while-Schleifen
nach unten do-Schleifen
nach unten Schleifen bei Hashes
nach unten Rekursion
nach unten

for-Schleifen

Solche Schleifen eignen sich vor allem für Fälle, in denen es einen Anfangswert, einen Endwert und einen Iterationswert gibt, also beispielsweise "Jede Zahl zwischen 1 und 100".

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

for(my $i = 1; $i <= 100; $i++) {
 print "<span style=\"font-size:$i\".\"pt\">$i pt</span><br>\n";
}

print "</body></html>\n";

Erläuterung:

Das Script gibt einen Text insgesamt 100 mal aus. Dazu werden hinter dem Schlüsselwort for, das eine for-Schleife einleitet, in Klammern insgesamt drei kleine Anweisungen notiert. Die erste Anweisung deklariert eine Zählervariable $i und initiiert sie mit dem Wert 1. Die zweite Anweisung ist eine Bedingung. Sie lautet: "$i kleiner gleich 100". Die dritte Anweisung zählt zum aktuellen Wert von $i 1 dazu. Die Schleife wird nun so oft durchlaufen, wie die Bedingung in der Mitte wahr ist. Da $i im Beispiel zunächst den Wert 1 hat und dann bei jedem Schleifendurchlauf wegen $i++ um 1 erhöht wird, wird die Schleife insgesamt 100 mal durchlaufen. Beim 101. mal ist $i höher als 100, die Bedingung ist nicht mehr wahr, und die Schleife wird beendet.

Im Anschluss an das for-Konstrukt folgt ein Seite Anweisungsblock, markiert wie üblich durch geschweifte Klammern { und }. Dazwischen können beliebig viele Anweisungen stehen. Diese Anweisungen werden so oft ausgeführt, wie die Schleife durchlaufen wird, im Beispiel also 100 mal. Im Beispiel wird mit print HTML-Code erzeugt. Dieser enthält in einem span-Element eine CSS-Formatdefinition zur Schriftgröße (font-size). Bei der Zuweisung an diese CSS-Eigenschaft wird der Skalar $i verwendet. Das bewirkt im Beispiel, dass der Text 100 mal ausgegeben wird, und zwar jedesmal mit einer etwas größeren Schrift. Die erste ausgegebene Zeile ist nur 1pt, also ein Punkt groß, was wohl kaum jemand wird lesen können. Jede ausgegebene Zeile wird aber um einen Punkt größer, und die letzte Zeile ist mit 100pt Größe schon recht fensterfüllend.

Um Bedingungen wie die in der zweiten Anweisung im Konstrukt der for-Schleife zu formulieren, brauchen Sie entweder zwei Werte, die Sie vergleichen möchten, oder Sie fragen direkt, ob ein in den Klammern stehender Ausdruck wahr oder falsch ist. Im Beispiel werden in der Bedingung zwei Werte verglichen, nämlich der Wert von $i mit der Zahl 100. Dazu brauchen Sie Seite Vergleichsoperatoren wie im Beispiel den Kleiner-Als-Operator <.

foreach-Schleifen

Diese Sorte Schleifen ist in Perl speziell für das Durchlaufen von Seite Listen und Arrays gedacht. Eine Liste wird dabei Element für Element abgeklappert. Abhängig davon können Sie Anweisungen ausführen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my @Sachen = ("mein Haus","mein Auto","mein Boot");
foreach (@Sachen) {
 print "$_<br>\n";
}

my @Schwaechen = ("Nikotin","Alkohol","das andere Geschlecht");
my $Schwaeche;
foreach $Schwaeche (@Schwaechen) {
 print "$Schwaeche<br>\n";
}

print "</body></html>\n";

Erläuterung:

Das Beispiel zeigt zwei leicht abweichende Varianten, mit einer foreach-Schleife umzugehen. In beiden Fällen wird jeweils ein Array deklariert und mit Anfangswerten versehen, einmal @Sachen und einmal @Schwaechen. Hinter dem Schlüsselwort foreach wird in Klammern einfach der Array angegeben. In dem Anweisungsblock, der dahinter in geschweiften Klammern folgt, können beliebig viele Anweisungen stehen.

Im ersten der obigen Beispiele wird von der Seite vordefinierten Variablen $_ Gebrauch gemacht. In ihr ist im Anweisungsblock einer foreach-Schleife stets der aktuelle Wert des Schleifendurchlaufs gespeichert, was in diesem Fall das jeweils aktuelle Element des Arrays @Sachen ist.

Im zweiten Beispiel wird anstelle von $_ ein eigener Skalar namens $Schwaeche benutzt. Wenn ein solcher Skalar zwischen dem Schlüsselwort foreach und der Klammer mit dem Array notiert wird, ist im Anweisungsblock in diesem Skalar jeweils der aktuelle Wert des Schleifendurchlaufs enthalten, im zweiten Beispiel also der jeweils aktuelle Wert aus @Schwaechen.

Beachten Sie:

Die Schlüsselwörter for und foreach besitzen zwar jeweils einen semantisch anderen Hintergrund, sind aber syntaktisch beliebig gegeneinander austauschbar. Perl erkennt selbständig, was für einen Typ Schleife Sie verwenden wollen. So können Sie beispielsweise auch folgendes schreiben:
for(1..1000) {
 print "tausendmal berührt\n";
}
Der Code gibt einfach tausendmal den Text aus, ist aber im Grunde eine foreach-Schleife, welche die Liste der Zahlen von 1 bis 1000 abarbeitet.

while-Schleifen

Diese Art von Schleifen eignet sich, wenn Sie vorher nicht wissen, wie oft die Schleife durchlaufen wird. Sie formulieren einfach eine Bedingung, und die Schleife wird so oft durchlaufen, wie die Bedingung wahr ist. Dass die Bedingung irgendwann falsch und die Schleife beendet wird, dafür müssen Sie im Anweisungsblock, der von der Schleife abhängig ist, selber sorgen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $Startzeit = time();
my $Endzeit = $Startzeit + 1;
my $Jetztzeit = 0;
my $i = 0;

while ($Jetztzeit <= $Endzeit) {
 $Jetztzeit = time();
 $i++;
}
print "$i mal durchlaufen<br>";

print "</body></html>\n";

Erläuterung:

Das Script ermittelt zunächst mit der Perl-Funktion Seite time den aktuellen Zeitpunkt und speichert das Ergebnis im Skalar $Startzeit. Gespeichert wird dabei eine Zahl, nämlich die Anzahl Sekunden vom 1.1.1970, 0.00 Uhr bis zum aktuellen Zeitpunkt. Dann wird ein Skalar $Endzeit deklariert, der einen Wert zugewiesen bekommt, der um 1 höher ist als der von $Startzeit. Zwei weitere Skalare $Jetztzeit und $i werden deklariert und mit 0 initialisiert.

Die Schleife wird durch das Schlüsselwort while eingeleitet. In Klammern wird eine Bedingung formuliert. Im Beispiel wird die Bedingung "$Jetztzeit kleiner oder gleich $Endzeit" formuliert. Hinter der Bedingung folgt in geschweiften Klammern ein Anweisungsblock mit beliebig vielen Anweisungen. Ausgeführt werden diese Anweisungen so oft, wie die Schleife durchlaufen wird und die Bedingung noch wahr ist.

Die Schleifenbedingung ist im Beispiel ja zunächst auf jeden Fall wahr, da $Jetztzeit mit 0 initialisiert wurde und daher auf jeden Fall kleiner ist als $Endzeit. Innerhalb der Schleife bekommt $Jetztzeit jedoch durch Aufrufen der Funktion time einen neuen Wert zugewiesen, der logischerweise mindestens so hoch ist wie der von $Startzeit. Die Schleife wird dadurch so lange durchlaufen, bis $Jetztzeit durch den time-Aufruf einen Wert zugewiesen bekommt, der größer ist als $Endzeit. Dann wird die Schleife beendet. Wie oft das der Fall ist, wissen Sie natürlich vorher nicht, insofern ist die while-Schleife hier ideal.

Innerhalb der Schleife wird außerdem noch $i als Zählervariable mit $i++ jeweils um 1 erhöht. Der aktuelle Wert von $i wird nach Ablauf der Schleife ausgegeben. Im Fenster des aufrufenden Browsers wird man also am Ende sehen können, wie oft die Schleife durchlaufen wurde.

do-Schleifen

Bei while-Schleifen kann es passieren, dass die abhängigen Anweisungen nie ausgeführt werden, nämlich dann, wenn die Schleifenbedingung schon beim ersten Schleifendurchlauf unwahr ist. Eine do-Schleife sorgt dafür, dass die Anweisungen auf jeden Fall einmal ausgeführt werden, da die Bedingung der Schleife erst am Ende abgeprüft wird.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $Bedingung = "Abbruch";
my $Irgendwas;
do {
 $Irgendwas = $Bedingung;
 print "Hier steht $Irgendwas";
} until ($Irgendwas eq $Bedingung);

print "</body></html>\n";

Erläuterung:

Das Beispiel demonstriert die typische Funktionsweise einer solchen Schleife. Zunächst wird ein Skalar $Bedingung mit dem Anfangswert Abbruch versehen. Ein weiterer Skalar namens $Irgendwas wird deklariert, erhält aber keinen Wert. Die Schleife wird mit do eingeleitet. Dahinter folgt in geschweiften Klammern ein Anweisungsblock, der beliebig viele Anweisungen enthalten kann. Im Beispiel wird dem Skalar $Irgendwas gleich zu Beginn der Wert von $Bedingung zugewiesen, also Abbruch. Anschließend wird dieser Inhalt zur Kontrolle ausgegeben. Nach der schließenden geschweiften Klammer, die den Anweisungsblock beendet, ist das Wort until notiert und dahinter in Klammern die eigentliche Schleifenbedingung. Im Beispiel wird abgeprüft, ob $Irgendwas und $Bedingung gleich sind, also den gleichen Inhalt haben. Da dies ja innerhalb der Schleife zugewiesen wurde, ist die Schleifenbedingung also erfüllt. Damit wird die Schleife abgebrochen. Denn until ist wie "solange bis" zu lesen. Im Gegensatz zur while-Schleife, deren Anweisungsblock ausgeführt wird, solange die Bedingung wahr ist, wird hier der Anweisungsblock ausgeführt, bis die Schleifenbedingung wahr ist.

Im Beispiel wird die Schleife einmal durchlaufen, obwohl die Schleifenbedingung gleich im ersten Durchlauf wahr ist. Der Grund ist eben, dass zuerst der abhängige Code ausgeführt und erst dann die Bedingung überprüft wird.

Beachten Sie:

do-Schleifen sind eigentlich keine echten Schleifen, weshalb dort Sprungbefehle wie last, next und redo nicht funktionieren.

Es gibt in Perl auch do-Schleifen, deren Bedingung kein until, sondern ein while vorangestellt ist. Dann müssen Sie die Schleifenbedingung negativ formulieren.

Schleifen bei Hashes

So wie sich Arrays prima mit nach oben foreach-Schleifen "traversieren", also Element für Element durchlaufen lassen, besteht dieser Wunsch natürlich auch bei Seite Hashes. Da ein Hash-Element jedoch immer aus zwei Werten besteht, von denen der erste der Schlüssel ist und der zweite der eigentliche Datenwert, ist ein einfaches Traversieren wie mit foreach nicht möglich. Deshalb gibt es für Hashes eine eigene Schleifen-Syntax.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my %Familie = (Frau => "Eva", Tochter => "Anja", Sohn => "Florian");
my $Schluessel;
my $Wert;

while (($Schluessel, $Wert) = each(%Familie)) {
  print "$Schluessel hei&szlig;t $Wert<br>\n";
}

while ($Schluessel = each(%Familie)) {
  print "$Schluessel hei&szlig;t $Familie{$Schluessel}<br>\n";
}

print "</body></html>\n";

Erläuterung:

Das Beispiel deklariert einen Hash namens %Familie und weist ihm drei Schlüssel-Wert-Paare zu. Anschließend werden zwei Skalare $Schluessel und $Wert deklariert, die innerhalb der Schleife benötigt werden. Die Schleife wird als while-Schleife formuliert. Innerhalb der Schleifenbedingung wird jedoch die Perl-Funktion Seite each aufgerufen. Diese liefert wahlweise eine Liste mit zwei Elementen, nämlich dem jeweils nächsten Schlüssel und dem zugehörigen Wert, oder - im skalaren Kontext - nur den jeweils nächsten Schlüssel des übergebenen Hashes.

Das Beispiel-Script zeigt beide Varianten. In der ersten Variante wird die Liste mit den beiden Elementen in dem Ausdruck ($Schluessel, $Wert) gespeichert. $Schluessel enthält dann den jeweils aktuellen Schlüssel des Hashs, und $Wert den zugehörigen Datenwert. Im Beispiel wird die Schleife dreimal durchlaufen und gibt solche Sätze aus wie Frau heißt Eva.

In der zweiten Variante wird die each-Funktion im skalaren Kontext aufgerufen, da der Rückgabewert nur in $Schluessel gespeichert wird. Die innerhalb der Schleife formulierte print-Anweisung gibt daher das Gleiche aus wie in der ersten Variante. Diesmal ist jedoch keine Variable $Wert verfügbar. Über ein Konstrukt wie $Familie{$Schluessel} kann aber auf den jeweils aktuellen Wert zugegriffen werden.

Rekursion

Rekursion ist dann ein Mittel, wenn man mit Schleifen nicht mehr weiter kommt. Ein typischer Anwendungsfall für Rekursion ist das Traversieren von baumartigen Strukturen. Auf gut Deutsch: wenn Sie beispielsweise einen ganzen Verzeichnisbaum einlesen wollen, ohne die Datei- und Verzeichnisstruktur vorher zu kennen, dann ist das ein typischer Fall für eine rekursive Anwendung. Bei der Rekursion wird eine Seite Subroutine definiert, innerhalb derer es eine Anweisung gibt, die die Subroutine von neuem aufruft. Dadurch entsteht ein Verschachtelungseffekt. Rekursion ist allerdings aus Computersicht nicht ganz unkritisch. Deshalb muss sie sauber programmiert sein.

Das folgende Beispiel zeigt, wie Sie eine Datei- und Verzeichnisstruktur ab einem gegebenen Startverzeichnis einlesen und an den aufrufenden Browser HTML-formatiert übermitteln lassen können. Das Beispiel ist allerdings nicht ganz trivial.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Startverzeichnis = "/var/www/selfhtml.org/de/dokumente/perl";
my @Alle;
my $Totalbytes = 0;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
print "<h1>Dateibaum</h1>\n";
print "<pre>Startverzeichnis: <b>$Startverzeichnis</b></pre>\n";
print "<hr noshade size=\"1\"><pre>\n";

Ermitteln($Startverzeichnis);
@Alle = sort(@Alle);
foreach (@Alle) {
  print "$_\n";
}
print "</pre><hr noshade size=\"1\">\n";
print "<pre>Insgesamt: [$Totalbytes Bytes]</pre>\n";
print "</body></html>\n";

sub Ermitteln {
  my $Verzeichnis = shift;
  my $Eintrag;
  my $Pfadname;
  my $HTML_Eintrag;
  my $Bytes;
  local *DH;

  unless (opendir(DH, $Verzeichnis)) {
   return;
  }
  while (defined ($Eintrag = readdir(DH))) {
   next if($Eintrag eq "." or $Eintrag eq "..");
   $Pfadname = $Verzeichnis."/".$Eintrag;
   if( -d $Pfadname) {
    $HTML_Eintrag = $Verzeichnis."/".$Eintrag." [VERZEICHNIS]";
   }
   else {
    $Bytes = -s $Pfadname;
    $Totalbytes += $Bytes;
    $HTML_Eintrag = $Verzeichnis."/".$Eintrag." [$Bytes Bytes]";
   }
   push(@Alle, $HTML_Eintrag);
   Ermitteln($Pfadname) if(-d $Pfadname);
  }
 closedir(DH);
}

Erläuterung:

Zunächst werden drei wichtige Variablen deklariert: $Startverzeichnis speichert das Verzeichnis, ab dem die Suche starten soll, @Alle ist die Liste, in der später die eingelesenen Einträge gespeichert werden, und $Totalbytes ermittelt die Bytezahlen aller Dateien.

Danach wird mit der HTML-Ausgabe begonnen. Unterhalb davon steht die Anweisung Ermitteln($Startverzeichnis);. Dies ist ein Aufruf der Subroutine Ermitteln, die etwas weiter unten mit sub Ermitteln eingeleitet wird. Diese Subroutine ist zugleich diejenige, die sich in dem Anweisungsblock, den sie einschließt, in ihrer vorletzten Anweisung selbst wieder aufruft und so die Rekursion bewirkt.

Mit der Anweisung Ermitteln($Startverzeichnis); passiert damit das gesamte Einlesen der Datei- und Verzeichnisstruktur. Anschließend wird die Liste mit der Funktion sort alphabetisch sortiert und dann Eintrag für Eintrag aus einer foreach-Schleife heraus ausgegeben.

Das Herzstück des Scripts ist die Subroutine Ermitteln. Darin wird zunächst eine Reihe von Arbeitsvariablen deklariert. Da die Subroutine sich ja selber wieder aufruft, stellt sich die Frage, ob es dabei nicht zu einem Kuddelmuddel mit den Namen der Variablen kommt. Die Antwort ist nein. Denn jedes Ausführen der Subroutine erzeugt eine eigene Instanz der Routine im Arbeitsspeicher, und da die Variablen lokal mit my deklariert sind, bleibt ihre Gültigkeit auf eine Instanz beschränkt.
Eine offensichtliche Ausnahme bildet die Anweisung local *DH, die das Verzeichnishandle DH lokal deklariert. Da my nicht auf Datei-/Verzeichnishandles (bzw. Typeglobs) angewendet werden kann, wird hier zu dieser Lösung gegriffen, die intern zwar etwas anders arbeitet, aber den gewünschten Effekt hat. Eine andere Variante wäre, das Seite Standardmodul Symbol zu verwenden und sich in jeder Instanz der Subroutine ein neues Verzeichnishandle zu schaffen. Das Verfahren mag "sauberer" erscheinen, ist es aber im Endeffekt nicht. Außerdem ist die Variante mit local bedeutend schneller.
Die vielen Instanzen der Subroutine bei vielen Verzeichnissen führen aber auch dazu, dass immer mehr Arbeitsspeicher benötigt wird. Das ist ein wichtiger Nachteil der Rekursion. Konstrukte mit vielen rekursiven Selbstaufrufen sollten Sie daher in CGI-Scripts, die auf öffentlichen Webservern sehr häufig und in mehreren Prozessen gleichzeitig aufgerufen werden können, vermeiden.

Die Subroutine Ermitteln erwartet einen Verzeichnispfadnamen, der ihr übergeben wird. Mit $Verzeichnis = shift; wird der übergebene Pfadname im Skalar $Verzeichnis gespeichert (siehe dazu auch die Perl-Funktion Seite shift). Anschließend wird mit der Funktion Seite opendir das übergebene Verzeichnis geöffnet. Seine Einträge werden in einer while-Schleife mit der Funktion Seite readdir eingelesen. Die beiden Einträge mit den Werten . und .., die in jedem Verzeichnis vorkommen und das aktuelle bzw. das übergeordnete Verzeichnis symbolisieren, werden mit dem Sprungbefehl Seite next übersprungen. Andernfalls würde sich die Rekursion in einer Endlosschleife verheddern.

Mit dem Seite Dateitestoperator -d in if( -d $Pfadname) wird abgefragt, ob der jeweils aktuelle Verzeichniseintrag wieder ein Verzeichnis, also ein Unterverzeichnis, ist. Abhängig davon wird ein HTML-Eintrag für die auszugebende Liste vorbereitet. Weiter unten wird dann mit -d noch einmal abgefragt, ob der Eintrag ein Unterverzeichnis ist, und davon abhängig die Subroutine Ermitteln mit dem Unterverzeichnis erneut aufgerufen.

Nachdem die Verzeichnisstruktur abgearbeitet ist und alle Instanzen der Subroutine Ermitteln beendet sind, geht es im oberen Teil des Scripts weiter mit @Alle = sort(@Alle);.

nach oben
weiter | Seite Sprungbefehle
zurück | Seite Bedingte Anweisungen
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Sprungbefehle

SELFHTML

Sprungbefehle
Informationsseite

nach unten goto
nach unten next
nach unten continue
nach unten last
nach unten redo
nach unten

goto

Der Sprungbefehl goto, der es erlaubt, jederzeit an eine beliebige andere, bestimmbare Stelle im Script-Ablauf zu springen, ist längst gebrandmarkt als Inbegriff schlechter Programmierung und Spaghetti-Code-Verursacher. Er ist im Normalfall auch durch ordentlich programmierte Seite Schleifen oder gut strukturierte Seite bedingte Anweisungen vermeidbar.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print "<h1>Hallo User</h1>\n";
goto MITTEILUNG;

AUFMUNTERUNG:
print "<p>Das Wetter ist ja so sch&ouml;n, dass man etwas unternehmen kann</p>";
goto ENDE;

MITTEILUNG:
print "<p>Dieser Service ist zur Zeit nicht verf&uuml;gbar</p>\n";
goto AUFMUNTERUNG;

ENDE:
print "</body></html>\n";

Erläuterung:

Das Script gibt HTML-Code zurück. Um herauszufinden, welche print-Anweisungen in welcher Reihenfolge ausgegeben werden, müssen Sie den goto-Anweisungen folgen. Bei jeder goto-Anweisung wird eine Sprungmarke, ein so genanntes Label angegeben. Das sind im Beispiel die großgeschriebenen Namen. Unter diesem Namen muss das Label irgendwo im Script existieren, und zwar mit abschließendem Doppelpunkt. Anschließend geht es dann mit der Ausführung des Scripts weiter, wenn das Label angesprungen wird.

next

Der Sprungbefehl next ist zur Verwendung innerhalb von Schleifen gedacht. Der aktuelle Schleifendurchgang wird abgebrochen. Der nächste Schleifendurchgang wird gestartet, und die Schleifenbedingung wird dabei neu ausgewertet.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $Schluessel;
my $Wert;
while (($Schluessel, $Wert) = each(%ENV)) {
  next unless $Schluessel =~ /^HTTP_.*/;
  print "<b>$Schluessel</b> hat den Wert <b>$Wert</b><br>\n";
}

print "</body></html>\n";

Erläuterung:

Das Beispiel-Script gibt Seite CGI-Umgebungsvariablen aus, jedoch nur solche, die mit HTTP_ beginnen. Dazu liest das Script den Seite vordefinierten Hash %ENV in einer Seite Schleife für Hashes ein. Mit next und Seite nachgestellter bedingter Anweisung sowie einem entsprechenden Seite regulären Ausdruck /^HTTP_.*/ als Bedingung, die mit unless verneint wird, erreicht die Anweisung, dass der nachfolgende print-Befehl nicht ausgeführt wird, wenn die aktuelle Umgebungsvariable nicht mit HTTP_ beginnt. Auf diese Weise werden also nur solche Variablen ausgegeben, bei denen das der Fall ist.

continue

continue gehört genaugenommen nicht zu den Sprungbefehlen, ist aber eng mit diesen verknüpft, da continue angesprungen wird. Das Schlüsselwort leitet einen eigenen Anweisungsblock ein. Innerhalb dieses Anweisungsblocks, der wie üblich mit geschweiften Klammern { und } markiert wird, können Sie beliebige Anweisungen notieren. Wenn ein solcher continue-Block unmittelbar hinter einem Schleifenblock steht, wird er mit jedem Schleifendurchlauf ebenfalls durchlaufen und dann (außer beim allerersten Durchlauf) direkt vor der Prüfung der Schleifenbedingung ausgeführt.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $i = 1;
while($i <= 100) {
  next if ($i % 7 != 0);
  print "$i ist durch 7 teilbar<br>\n";
}
continue {
     $i++;
}

print "</body></html>\n";

Erläuterung:

Das Beispiel gibt alle Zahlen zwischen 1 und 100 aus, die durch 7 teilbar sind. Dabei wird eine while-Schleife verwendet, deren Bedingung abfragt, ob $i kleiner gleich 100 ist. Da $i mit 1 initialisiert wird, wird der Schleifenblock also erreicht. Innerhalb des Schleifenblocks wird $i jedoch nicht hochgezählt, was zu einer hoffnungslosen Endlosschleife führen würde. Doch dazu dient im Beispiel der continue-Block, der nach der abschließenden geschweiften Klammer des Schleifenblocks folgt. Innerhalb des continue-Blocks wird $i hochgezählt.

Innerhalb der Schleife wird mit der Bedingung $i % 7 != 0 abgefragt, ob der aktuelle Wert von $i durch 7 geteilt den Rest 0 ergibt (siehe Modulo-Division bei den Seite Berechnungsoperatoren). Durch next wird zwar sofort der nächste Schleifendurchgang gestartet, wenn die Zahl nicht ohne Rest durch 7 teilbar ist, doch die Anweisung aus dem continue-Block wird in jedem Fall noch ausgeführt.

last

Der Sprungbefehl last bricht eine Schleife sofort ab.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $jetzt;
while(1) {
  $jetzt = time;
  last if ($jetzt % 2 == 0);
}
print "$jetzt \n";

print "</body></html>\n";

Erläuterung:

Das Beispiel-Script ermittelt mit der Funktion Seite time innerhalb einer klassischen Endlosschleife, formuliert mit while(1) ("Bedingung ist immer wahr") den aktuellen Zeitwert in Sekunden und speichert ihn in dem Skalar $jetzt. Mit der Bedingung $i % 2 == 0 wird abgefragt, ob der aktuelle Wert von $jetzt durch 2 geteilt den Rest 0 ergibt (siehe Modulo-Division bei den Seite Berechnungsoperatoren). Ist diese Bedingung der nachgestellten if-Anweisung erfüllt, wird der voranstehende last-Befehl ausgeführt. Die Schleife wird dann abgebrochen. Falls das Script also zu einem Zeitpunkt mit ungeradem Sekundenwert aufgerufen wird, wird so oft der aktuelle Sekundenwert ausgegeben, bis time den nächsthöheren Sekundenwert zurückliefert.

redo

Der Sprungbefehl redo wiederholt den aktuellen Schleifendurchlauf einfach noch einmal. Dabei wird die Schleifenbedingung nicht noch einmal ausgewertet.

Beispiel der Textdatei text.txt:

das ist \
eine Datei mit einer Konvention.
Ein Backslash am Ende \
einer Zeile bedeutet: \
keine neue Zeile!

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

open(FH,"<text.txt");
my @Zeilen;
while(<FH>) {
  chomp;
  if(s/\\$//) {
   $_ .= <FH>;
   redo unless(eof(FH));
  }
  push(@Zeilen,$_."\n");
}
close(FH);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body><pre>\n";
print @Zeilen;
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt eine klassische Verwendung von redo. Dabei geht es darum, mehrere Zeilen aufgrund einer Konvention zu einer zusammenzufassen. Die zuvor gezeigte Textdatei enthält zwar fünf Zeilen, aber am Ende sollen daraus nur zwei Zeilen gemacht werden. Zeilen, die mit Backslash enden, sollen in der nächsten Zeile weitergehen.

Das Script öffnet die Textdatei mit der Funktion Seite open. In einer while-Schleife liest es die jeweils nächste Zeile der Datei ein. Die Schleifenbedingung ist dabei <FH>. Dies bedeutet: nächste Portion aus der mit dem Datei-Handle FH verbundenen Datei, und zwar im skalaren Kontext. In diesem Kontext wird dann die nächste Zeile der Datei geliefert.

Innerhalb der Schleife wird mit der Funktion Seite chomp erst einmal das abschließende Zeilenumbruch-Zeichen der aktuellen Zeile entfernt. Dann wird mit dem Seite regulären Ausdruck s/\\$// ein eventuell vorhandener Backslash am Ende der Zeile gesucht und ersetzt. Falls tatsächlich ein Backslash gefunden und ersetzt wurde, ist zugleich die Bedingung für das if wahr, und es wird der davon abhängige Anweisungsblock ausgeführt. In diesem Block wird mit $_ .=  <FH>; die nächste Zeile eingelesen und an die aktuelle angehängt. Benutzt wird dabei die Seite vordefinierte Variable $_ und der Seite Operator für Zeichenkettenverknüpfung (.). Anschließend wird mit redo wieder an den Beginn der Schleife gesprungen, sofern nicht (unless) das Dateiende ( Seite eof) erreicht ist.

redo bewirkt, dass die Schleifenbedingung nicht neu ausgewertet wird. Es wird also keine nächste Zeile eingelesen. Die Variable $_, auf die sich sowohl die Anweisung chomp; als auch der reguläre Ausdruck beziehen, wurde ja schon innerhalb des if-Blocks mit einem neuen Wert versorgt. Zum Verständnis: mit chomp; ist so viel gemeint wie: chomp($_);, und mit if(s/\\$//) so viel wie: if($_ =~ s/\\$//). Sowohl das Entfernen des abschließenden Zeilenumbruchs als auch das Bewerten, ob ein abschließender Backslash vorkommt, bezieht sich also implizit auf die vordefinierte Variable $_.

Wenn im Beispiel die if-Bedingung nicht mehr wahr ist, gelangt das Script dorthin, wo mit der Funktion Seite push die aktuelle Zeile dem Array @Zeilen hinzugefügt wird. Darin sind am Ende nur die beiden Zeilen der Datei gespeichert, die per Konvention übrig bleiben sollen. Das Script gibt den Inhalt von @Zeilen am Ende aus.

nach oben
weiter | Seite Operatoren
zurück | Seite Schleifen
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Operatoren

SELFHTML

Operatoren
Informationsseite

nach unten Zuweisungsoperatoren
nach unten Vergleichsoperatoren
nach unten Berechnungsoperatoren
nach unten Logische Operatoren
nach unten Bit-Operatoren
nach unten Operator für Zeichenkettenverknüpfung
nach unten Operator für Zeichenkettenwiederholung
nach unten Operatorenrangfolge
nach unten

Zuweisungsoperatoren

Sie können zum Beispiel einem Seite Skalar einen Wert zuweisen. Der Zuweisungsoperator dafür ist ein Gleichheitszeichen.

Beispiel:

my $Name = "Josua Piesepampel";
my $Code = 4711;

Erläuterung:

Den Skalaren wird mit dem Zuweisungsoperator = jeweils ein Wert zugewiesen.

Vergleichsoperatoren

Vergleichsoperatoren brauchen Sie, wenn Sie zwei Werte vergleichen wollen, z.B. den aktuellen Inhalt eines Skalars mit einem fixen Wert.

Beispiel:

if($SinnDesLebens == 42)
 { print "Sie haben das Leben verstanden!\n" };
if($SinnDesLebens != 42)
 { print "Sie haben nix kapiert vom Leben!\n" };
if($SinnDesLebens > 42)
 { print "Sind Sie wahnsinnig?\n" };
if($SinnDesLebens < 42)
 { print "Sie sind eine Nummer zu klein für das Leben!\n" };
if($Alter >= 18)
 { print "Sie dürfen selbst diesen Schwachsinn hier sehen!\n" };
if($Alter <= 17)
 { print "Sie sind nicht mal alt genug für diesen Schwachsinn!\n" };

if($Passwort eq "Hexasex")
 { print "Sie haben Zugang zum Sex im hexadezimalen Raum!\n" };
if($Passwort ne "Hexasex")
 { print "Haben Sie lieber eindimensionalen Sex daheim im Bett!\n" };
if($Name gt "Y")
 { print "Sie sind aber auch immer der Letzte!\n" };
if($Name lt "B")
 { print "Sie sind aber auch immer der Erste!\n" };
if($Name ge "ZZ Top")
 { print "Ihre Lieblingsband ist ZZ Top oder was ganz Perverses!\n" };
if($Name le "Abba")
 { print "Ihre Lieblingsband ist Abba oder was ganz Perverses!\n" };

if($Alter =~ /[^0-9]/)
 { print "Das ist ja gar keine Zahl!\n" };

Erläuterung:

Perl unterscheidet Vergleichsoperatoren für Zahlen und für Zeichenketten. Ferner gibt es einen speziellen Operator für Vergleiche mit Seite regulären Ausdrücken.

Um abzufragen, ob zwei Zahlen gleich sind, notieren Sie zwei Gleichheitszeichen == nebeneinander.
Um abzufragen, ob zwei Zahlen unterschiedlich sind, notieren Sie zwischen beiden Werten die Zeichen !=.
Um abzufragen, ob eine Zahl größer oder gleich ist als eine andere, notieren Sie die Zeichen >=.
Um abzufragen, ob eine Zahl in jedem Fall größer ist als eine andere, notieren Sie das Zeichen >.
Um abzufragen, ob eine Zahl kleiner oder gleich ist als eine andere, notieren Sie die Zeichen <=.
Um abzufragen, ob eine Zahl in jedem Fall kleiner ist als eine andere, notieren Sie das Zeichen <.

Um abzufragen, ob zwei Zeichenketten gleich sind, notieren Sie eq zwischen den beiden Werten, die verglichen werden sollen (eq = equal = gleich).
Um abzufragen, ob zwei Zeichenketten unterschiedlich sind, notieren Sie ne zwischen den beiden Werten, die verglichen werden sollen (ne = not equal = nicht gleich).
Um abzufragen, ob eine erste Zeichenkette alphabetisch weiter hinten liegt als eine zweite, notieren Sie gt zwischen den beiden Werten, die verglichen werden sollen (gt = greater than = größer als).
Um abzufragen, ob eine erste Zeichenkette alphabetisch weiter vorne liegt als eine zweite, notieren Sie lt zwischen den beiden Werten, die verglichen werden sollen (lt = less than = kleiner als).
Um abzufragen, ob eine erste Zeichenkette alphabetisch gleich ist wie eine zweite oder weiter hinten liegt, notieren Sie ge zwischen den beiden Werten, die verglichen werden sollen (ge = greater or equal = größer oder gleich).
Um abzufragen, ob eine erste Zeichenkette alphabetisch gleich ist wie eine zweite oder weiter vorne liegt, notieren Sie le zwischen den beiden Werten, die verglichen werden sollen (le = less or equal = kleiner oder gleich).

Um den Wert eines Skalars, egal ob Zahl oder Zeichenkette, mit einem regulären Ausdruck zu vergleichen (Fachjargon: an einen regulären Ausdruck zu binden), benutzen Sie den Bindungsoperator =~.

Berechnungsoperatoren

Um mit numerischen Werten Berechnungen durchzuführen, brauchen Sie Berechnungsoperatoren.

Beispiel:

$Hundertlasser = 83 + 17;
$Hundertlasser = 113 - 13;
$Hundertlasser = 4 * 25;
$Hundertlasser = 450 / 4.5;
$Hundertlasser = 450 / 2 - 125;
$Hundertlasser = 10 * (2 + 8);
$Hundertlasser = 10 ** 2;
$x = $Hundertlasser % 4;
if($x == 0)
 { print $Hundertlasser, " ist ein Schaltjahr\n" }

# Besondere Notationen:

$Zahl = 100;
$Zahl++;      # $Zahl um 1 erhoehen
$Zahl--;      # $Zahl um 1 erniedrigen
$Zahl += 10;  # $Zahl um 10 erhoehen
$Zahl -= 10;  # $Zahl um 10 erniedrigen
$Zahl *= 10;  # $Zahl mit 10 multiplizieren
$Zahl /= 10;  # $Zahl durch 10 dividieren
$Zahl %= 10;  # $Zahl durch 10 modulo-dividieren
$Zahl **= 2;  # $Zahl hoch 2 errechnen

Erläuterung:

Mathematische Operatoren notieren Sie mit den dafür üblichen Zeichen. Mit + notieren Sie eine Addition, mit - eine Subtraktion, mit * eine Multiplikation, mit / eine Division, und mit ** eine Potenzoperation "x hoch y". Eine Besonderheit stellt der Operator % dar. Damit wird eine so genannte Modulo-Division durchgeführt. Bei einer Modulo-Division werden zwei Werte dividiert. Das Ergebnis ist jedoch im Gegensatz zur normalen Division nur der Restwert der Division. Wenn Sie z.B. 13 % 5 notieren, erhalten Sie als Ergebnis 3, weil 13 geteilt durch 5 gleich 2 Rest 3 ergibt. Diese 3 ist es, die als Ergebnis einer Modulo-Division herauskommt.

Sie können mehrere Operationen in Reihe notieren. Dabei gilt die übliche "Punkt-vor-Strich-Regel". Wenn Sie eine andere Regel erzwingen wollen, müssen Sie Klammern verwenden, so wie im obigen Beispiel $Hundertlasser = 10 * (2 + 8);.

Die besonderen Notationen, die in den obigen Beispielen vorkommen, können Sie verwenden, wenn Sie Additionen oder Subtraktionen abkürzen wollen:
$Zahl++; ist eine Abkürzung für $Zahl = $Zahl + 1;
$Zahl--; ist eine Abkürzung für $Zahl = $Zahl - 1;
$Zahl += 10; ist eine Abkürzung für $Zahl = $Zahl + 10;
usw. bei den gleichartigen Operationen.

Der Operator ++ wird auch als Inkrementationsoperator bezeichnet, der Operator -- als Dekrementationsoperator.

Beachten Sie:

Bei den Operatoren ++ und -- gibt es eine Besonderheit, die auf C bzw. sogar auf die Maschinensprache (Assembler) zurückzuführen ist. Die Operatoren können sowohl vor als auch nach der Variablen notiert werden (also z.B. sowohl $Zahl++ als auch ++$Zahl). Werden sie davor notiert, wird die Operation ausgeführt, bevor der Ausdruck ausgewertet wird (Fachjargon: Pre-In-/Dekrement). Umgekehrt gilt: wird der Operator nach der Variablen notiert, wird die Operation ausgeführt, nachdem der Ausdruck ausgewertet wurde (Fachjargon: Post-In-/Dekrement). Die Ausgabe des folgenden Codes sollte Sie also nicht überraschen:
my $Zahl=1;
print $Zahl++;
print --$Zahl;
Es wird zweimal 1 ausgegeben. Beim erstenmal, weil $Zahl ausgegeben wird, bevor Eins dazuaddiert wird. Beim zweitenmal, weil Eins subtrahiert wird, bevor $Zahl ausgegeben wird.

Logische Operatoren

Logische Operatoren brauchen Sie, um Ausdrücke zu formulieren, die wahr oder falsch sein können. Verwendung finden solche Ausdrücke besonders in Bedingungen für Seite bedingte Anweisungen oder Seite Schleifen.

Beispiel:

if($a == 1 && $b == 2) {
  # wenn a = 1 ist und b = 2
}
if($a == 1 and $b == 2) {
  # wenn a = 1 ist und b = 2
}
if($a == 1 || $b == 1) {
  # wenn a = 1 oder b = 1 ist
}
if($a == 1 or $b == 1) {
  # wenn a = 1 oder b = 1 ist
}
if($a == 1 ^ $b == 1) {
  # wenn entweder a = 1 oder b = 1 ist
}
if($a == 1 xor $b == 1) {
  # wenn entweder a = 1 oder b = 1 ist
}
if (! ($a == 2)) {
  # nicht a = 2
}
if (not ($a == 2)) {
  # nicht a = 2
}

Erläuterung:

Mit dem logischen Operator && oder dem Wort dafür (and) verknüpfen Sie zwei oder mehrere Bedingungen durch "und", d.h. beide bzw. alle Bedingungen müssen erfüllt sein, damit die gesamte Bedingung erfüllt ist.
Mit dem logischen Operator || oder dem Wort dafür (or) verknüpfen Sie zwei oder mehrere Bedingungen inklusiv durch "oder", d.h. es genügt, wenn eine der Bedingungen erfüllt ist, damit die gesamte Bedingung erfüllt ist.
Mit dem logischen Operator ^ oder dem Wortkürzel dafür (xor) verknüpfen Sie zwei oder mehrere Bedingungen exklusiv durch "oder", d.h. es muss entweder die eine oder die andere Bedingungen erfüllt sein, damit die gesamte Bedingung erfüllt ist.
Mit dem logischen Operator ! oder dem Wortkürzel dafür (not) verneinen Sie eine nachfolgende Bedingung, d.h. Sie fragen nicht, ob die Bedingung wahr ist, sondern ob sie falsch ist.

Bit-Operatoren

Um Bit-Operatoren richtig einzusetzen, müssen Sie viel von computer-internen Speichervorgängen verstehen. Deshalb werden die Bit-Operatoren hier nur kurz erwähnt.

>> verschiebt Bits nach rechts
<< verschiebt Bits nach links
& verknüpft zwei Werte mit einem bitweisen UND
| verknüpft zwei Werte mit einem bitweisen ODER
^ verknüpft zwei Werte mit einem bitweisen Exlusiv-Oder (XOR)
~ bildet das Komplement eines Wertes (alle Bits kehren sich um)

Operator für Zeichenkettenverknüpfung

In Perl brauchen Sie nicht wie in manchen anderen Programmiersprachen eine Funktion, um Zeichenketten zu verknüpfen, sondern es gibt einen Operator dafür.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $HTML_Ausgabe = "Die Umgebungsvariable <b>HTTP_USER_AGENT</b> hat den Wert <b>".$ENV{HTTP_USER_AGENT}."</b><br>";
$HTML_Ausgabe .= "<hr>Ende der Ausgabe";

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

print $HTML_Ausgabe;

print "</body></html>\n";

Erläuterung:

Ein Punkt . ist der Operator, um Zeichenketten miteinander zu verknüpfen. Die verknüpften Zeichenketten können literal sein, also einfach Text enthalten, aber auch eine Variable sein. Im Beispiel-Script sehen Sie einen für CGI-Scripts typischen Anwendungsfall für den Zeichenkettenoperator. Dort wird eine längere HTML-Ausgabe, gespeichert im Skalar $HTML_Ausgabe, aus einzelnen Zeichenketten zusammengebastelt. Unter anderem wird dabei der Wert der Umgebungsvariablen HTTP_USER_AGENT, die Namen und Version des aufrufenden Browsers enthält, mit eingefügt.

Das Beispiel-Script zeigt in der zweiten Anweisung auch, wie sich neue Zeichenketten an eine bereits vorhandene anhängen lassen. Mit .= wird das, was rechts davon steht, einfach der Variablen zugewiesen, die links davon steht. Die gleiche Anweisung könnten Sie übrigens auch in folgender Langform notieren:
$HTML_Ausgabe = $HTML_Ausgabe."<hr>Ende der Ausgabe";

Das Script gibt die zusammengesetzte Zeichenkette mit einer print-Anweisung aus.

Operator für Zeichenkettenwiederholung

In Perl können Sie mit x Zeichenketten "multiplizieren".

Beispiel:

print "A"."h" x 10, "!\n";
# erzeugt die Ausgabe "Ahhhhhhhhhh!"

Erläuterung:

Notieren Sie den x-Operator hinter der Zeichenkette, die Sie multiplizieren wollen. Hinter dem Operator geben Sie an, wie oft die Zeichenkette wiederholt werden soll.

Operatorenrangfolge

Unter den Operatoren von Perl gibt es eine festgelegte Rangordnung. Wenn Sie komplexe Rechenoperationen durchführen oder mehrere Bedingungen miteinander verknüpfen, gilt bei der internen Auflösung solcher komplexen Ausdrücke die folgende Rangordnung:

  1. Rangstufe: ++ -- (Inkrementieren, Dekrementieren)
  2. Rangstufe: ** (Potenzierung)
  3. Rangstufe: ! ~ (logische und bitweise Negation)
  4. Rangstufe: =~ !~ (Bindung an Seite reguläre Ausdrücke)
  5. Rangstufe: * / % x (Multiplikation, Division, Modulo-Operation, Zeichenkettenwiederholung)
  6. Rangstufe: + - . (Addition, Subtraktion, Zeichenkettenaddition)
  7. Rangstufe: << >> (Verschieben von Bits)
  8. Rangstufe: < <= > >= lt le gt ge (Vergleich größer/kleiner)
  9. Rangstufe: == != eq ne (Gleichheit/Ungleichheit)
  10. Rangstufe: & (bitweises UND)
  11. Rangstufe: | ^ (bitweises ODER - inklusiv/exklusiv)
  12. Rangstufe: && (logisches UND)
  13. Rangstufe: || (logisches ODER)
  14. Rangstufe: .. (Bereichsdefinition in Seite Listen)
  15. Rangstufe: ?: ( Seite Entweder-Oder-Bedingung)
  16. Rangstufe: = += -= &= ^= |= (Zuweisung)
  17. Rangstufe: , => (Aneinanderreihung)
  18. Rangstufe: not (logische Negation)
  19. Rangstufe: and (logisches UND)
  20. Rangstufe: or xor (logisches ODER (inklusiv/exklusiv)

Mit Hilfe von Klammern können Sie die Rangfolge bei den Operatoren beeinflussen und Ausdrücke so bewerten, wie Sie es wünschen.

Beispiel:

$OffizielleStatistik = 3.29 * 3 + 4.71;
$MeineStatistik = 3.29 * (3 + 4.71);

Erläuterung:

Durch die Klammer wird in dem Beispiel die "Punkt-vor-Strich"-Regel, die auch unter den Berechnungsoperatoren von Perl gilt, aufgehoben.

nach oben
weiter | Seite Reguläre Ausdrücke
zurück | Seite Sprungbefehle
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Reguläre Ausdrücke

SELFHTML

Reguläre Ausdrücke
Informationsseite

nach unten Allgemeines zu regulären Ausdrücken
nach unten Reguläre Ausdrücke anwenden
nach unten Reguläre Ausdrücke für einzelne Zeichen
nach unten Reguläre Ausdrücke für Zeichenketten
nach unten Maskierung von Zeichen in regulären Ausdrücken
nach unten Gierige und genügsame Suchmuster
nach unten Reguläre Ausdrücke mit Alternativen
nach unten Teilausdrücke merken mit Klammerung
nach unten Rangfolge in regulären Ausdrücken
nach unten Flags hinter regulären Ausdrücken
nach unten Suchen und Ersetzen mit regulären Ausdrücken
nach unten Transliteration
nach unten

Allgemeines zu regulären Ausdrücken

Reguläre Ausdrücke sind genau definierte Suchmuster. Mit Hilfe dieser Suchmuster können Sie beispielsweise Variableninhalte durchsuchen und bestimmte Inhalte daraus herausziehen oder ersetzen. So können Sie mit Hilfe von regulären Ausdrücken etwa beim Einlesen von Dateien (z.B. einer Datei mit Einträgen eines Gästebuchs) anhand der Konventionen, nach denen die Datei aufgebaut ist, die einzelnen Einträge geordnet einlesen und als HTML-Code an den aufrufenden Browser übertragen lassen. Reguläre Ausdrücke sind auch ein mächtiges Mittel, um große Datenbestände nach komplexen Suchausdrücken zu durchforsten.

Reguläre Ausdrücke sind allerdings für Neulinge, die nicht aus der Unix-Welt kommen, sehr ungewohnt und der Hauptgrund dafür, warum in manchen Perl-Scripts ziemlich merkwürdige, kryptisch anmutende Zeichenfolgen vorkommen. Wer allerdings mit dem Unix-Befehl grep vertraut ist, kommt auch mit den regulären Ausdrücken in Perl zurecht.

Reguläre Ausdrücke anwenden

Zwei kleine einführende Beispiele sollen zeigen, in welchen Situationen reguläre Ausdrücke typischerweise zum Einsatz kommen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my @Orte = ("Madrid","London","Mailand","Paris","Rom","M&uuml;nchen");

foreach(@Orte) {
 if( $_ =~ /^M/ ) {
  print "$_ f&auml;ngt mit M an<br>\n";
 }
}

print "</body></html>\n";

Erläuterung:

Das Beispiel deklariert einen Seite Array namens @Orte mit sechs Städtenamen. Dann geht es die Einträge des Arrays mit einer Seite foreach-Schleife der Reihe nach durch. Im Schleifenblock wird überprüft, ob der Städtename im aktuellen Schleifendurchlauf mit M anfängt. Dazu wird die Seite vordefinierte Variablen $_, in der ja in einer foreach-Schleife der aktuelle Wert enthalten ist, mit dem Operator =~ an einen regulären Ausdruck gebunden. Der Operator =~ ist speziell für reguläre Ausdrücke gedacht. Der reguläre Ausdruck selbst steht per Voreinstellung in Schrägstrichen. Innerhalb der Schrägstriche wird ein Suchmuster definiert. Das Suchmuster ^M im Beispiel bedeutet so viel wie "fängt mit M an".
Die ganze Anweisung if( $_ =~ /^M/ ) ist also so zu lesen: wenn die Bedingung erfüllt ist, dass der Wert des aktuellen Schleifeninhalts mit einem M anfängt ...
Genaugenommen können Sie die Zeichenfolge $_ =~ auch weglassen, da der reguläre Ausdruck dann automatisch an die vordefinierte Variable $_ gebunden wird. Um eine bessere Verständlichkeit zu erhalten, wurde hier die ausführliche Notation gewählt.

Das Beispiel gibt in diesem Fall den Schleifeninhalt aus. Am Ende werden also aus dem Array @Orte die drei Städte ausgegeben, die mit M beginnen.

Das folgende Beispiel ist etwas anspruchsvoller:

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $Zeile = "{link:http://de.selfhtml.org/{SELFHTML-Seiten}}";
$Zeile =~ /\{link:(.*)\{(.*)\}\}/;
my $Link = $1;
my $Linktext = $2;
print "<a href=\"$Link\">$Linktext</a>";

print "</body></html>\n";

Erläuterung:

In diesem Script gibt es einen Skalar namens $Zeile, der als Wert eine Zeichenkette speichert, die offensichtlich eine bestimmte Struktur hat. Sie steht in geschweiften Klammern. Zuerst ist link: notiert, dann folgt ein URI, und dann folgt, nochmals in geschweifte Klammern gesetzt, ein Text. Diese Struktur mit den geschweiften Klammern ist jetzt frei erfunden. Doch fast die gesamte EDV besteht daraus, Daten nach irgendwelchen für Computer wiedererkennbaren Strukturen oder Konventionen zu speichern. Reguläre Ausdrücke sind dafür geeignet, aus solchen Strukturen etwas Bestimmtes herauszufiltern. Im Beispiel filtert das Script mit Hilfe eines regulären Ausdrucks aus der Zeichenkette den URI und den Text in der zweiten, inneren geschweiften Klammer heraus und bastelt aus diesen beiden Teilwerten einen HTML-Verweis, den es am Ende mit print ausgibt.

Mit der Anweisung $Zeile =~ /\{link:(.*)\{(.*)\}\}/; wird der reguläre Ausdruck, der zwischen den beiden Schrägstrichen steht, auf den Wert des Skalars $Zeile angewendet. Um die fürchterliche Ansammlung von Zeichen erst einmal etwas zu entwirren, seien zunächst die Backslashes \ darin erwähnt. Diese dienen zur Maskierung des jeweils nachfolgenden Zeichens und bedeuten einfach nur: das nächste Zeichen soll als das Zeichen behandelt werden, das da steht. Also \{ heißt beispielsweise einfach nur: das folgende Zeichen { bitte nicht anders interpretieren als es da steht.
Das, worauf der reguläre Ausdruck passen soll, soll also demnach mit der Zeichenfolge {link: anfangen. Danach kann erst mal kommen was will. Ausgedrückt wird dies durch .* Irgendwann soll dann noch einmal eine öffnende geschweifte Klammer { in dem durchsuchten Wert vorkommen. Dahinter kann wieder kommen was will, also .*, und am Ende sollen nochmals zwei schließende geschweifte Klammern vorkommen. So wird also ein "Muster" mit Hilfe des regulären Ausdrucks definiert, das auf den untersuchten Wert passt, aber einige Dinge variabel lässt.
Auch hier wurde der Verständlichkeit halber eine Vereinfachung gewählt. Der Teilausdruck .* funktioniert zwar bei diesem Beispiel, kann jedoch in ungünstigen Fällen aufgrund seiner nach unten Gierigkeit zuviel erkennen.

Die beiden variablen Bereiche, also jene, die durch .* markiert sind, werden im Beispiel jeweils in runde Klammern eingeschlossen. Die runden Klammern zeigen den Wunsch an, dass Perl sich das, was zwischen diesen Klammern steht, merken soll. Im Beispiel merkt es sich auf diese Weise zwei variable Bereiche:
{link:http://www.selfhtml.org/{SELFHTML-Seiten}}
Die fett dargestellten Bereiche sind nun in den beiden Klammern gespeichert.

Um an die gespeicherten Werte heranzukommen, stellt Perl vordefinierte Variablen namens $1, $2, $3 usw. zur Verfügung. In $1 ist der Inhalt der ersten runden Klammer im regulären Ausdruck gespeichert, in $2 der Inhalt der zweiten runden Klammer. Das Beispiel-Script deklariert zwei Skalare namens $Link und $Linktext, denen es die beiden in den runden Klammern gespeicherten Werte zuweist.

Der Rest ist dann nicht mehr schwer: in einer print-Anweisung, die den Code für einen HTML-Verweis ausgibt, werden die beiden Skalare $Link und $Linktext an den Stellen eingefügt, wo ihre Werte hingehören.

Beachten Sie:

Ein wichtiger Anwendungsbereich für reguläre Ausdrücke ist auch das nach unten Suchen und Ersetzen mit regulären Ausdrücken. Reguläre Ausdrücke können ferner in einigen Perl-Funktionen als zu übergebende Parameter vorkommen, beispielsweise in der Funktion Seite split.

Reguläre Ausdrücke für einzelne Zeichen

Sie können in einer Zeichenkette

  • nach einem bestimmten Zeichen suchen
  • nach mehreren bestimmten Zeichen suchen
  • nach einem Zeichen aus einem bestimmten Bereich suchen

Solche Ausdrücke eignen sich weniger zur Mustererkennung als dazu, herauszufinden, ob in einem Wert bestimmte Zeichen, z.B. unerlaubte Zeichen, vorkommen.

Nr. | Regulärer Ausdruck (Beispiel) | passt auf eine Zeichenkette, die (mindestens)
1. | /a/ | ein 'a' enthält
2. | /[ab]/ | ein 'a' oder ein 'b' enthält
3. | /[A-Z]/ | einen Großbuchstaben enthält (passt nicht auf Umlaute)
4. | /[0-9]/ | eine Ziffer enthält
5. | /\d/ | eine Ziffer enthält - genau wie (4.)
6. | /\D/ | ein Zeichen enthält, das keine Ziffer ist
7. | /[-\d]/ | eine Ziffer oder ein Minuszeichen enthält
8. | /[\[\]]/ | eine eckige Klammer enthält
9. | /[a-zA-Z0-9_]/ | eins der Zeichen vom Typ Buchstabe (ohne Umlaute), vom Typ Ziffer oder einen Unterstrich enthält
10. | /\w/ | eins der Zeichen vom Typ Buchstabe, vom Typ Ziffer oder einen Unterstrich enthält - (fast) genau wie (9.); ob Umlaute erkannt werden können, hängt von der Systemkonfiguration ab
11. | /\W/ | ein Zeichen enthält, was weder Buchstabe noch Ziffer noch Unterstrich ist; ob Umlaute ausgeschlossen werden können, hängt von der Systemkonfiguration ab
12. | /\r/ | ein Steuerzeichen für den Wagenrücklauf enthält
13. | /\n/ | ein Steuerzeichen für den Zeilenvorschub enthält
14. | /\t/ | ein Steuerzeichen für den Tabulator enthält
15. | /\f/ | ein Steuerzeichen für den Seitenvorschub enthält
16. | /\s/ | ein Leerzeichen oder ein Steuerzeichen aus (12.-15.) enthält
17. | /\S/ | ein Zeichen enthält, das kein Leerzeichen oder Steuerzeichen aus (12.-15.) ist
18. | /[^äöüÄÖÜ]/ | ein Zeichen enthält, was kein deutscher Umlaut (in der entsprechenden Zeichenkodierung) ist
19. | /[^a-zA-Z]/ | ein Zeichen enthält, welches kein Buchstabe ist (ohne Umlaute)

Wenn Sie mit einem regulären Ausdruck prüfen wollen, ob in einer Zeichenkette ein bestimmtes Zeichen vorkommt, genügt es, dieses Zeichen innerhalb der Begrenzer (hier: der Schrägstriche) zu notieren, so wie in den Beispielen (1.) und (12.-15.). Wenn das gesuchte Zeichen innerhalb von regulären Ausdrücken ein reserviertes Zeichen ist, wie beispielsweise ein +, müssen Sie es mit einem umgekehrten Schrägstrich maskieren (\+). Reservierte Zeichen sind auf jeden Fall +?.*^$()[]{}|\.
Wenn Sie allerdings wirklich nur das Vorkommen eines festen Zeichens oder einer festen Zeichenkette überprüfen wollen, ist die Funktion Seite index die bessere Wahl.

Für reguläre Ausdrücke interessanter sind Fälle, in denen Sie prüfen wollen, ob ein Zeichen vorkommt, das auf verschiedene Möglichkeiten passen soll, oder explizit nicht passen soll, wie in den Beispielen (2.-11.) und (16.-19.). Dafür gibt es innerhalb der regulären Ausdrücke die so genannten Zeichenklassen. Eine Zeichenklasse wird grundsätzlich innerhalb eckiger Klammern [...] notiert, wie in den Beispielen (2.-4.), (7.-9.) und (18.-19.). Eine Zeichenklasse passt immer genau auf ein Zeichen. Innerhalb dieser Zeichenklasse können Sie nun die verschiedenen Zeichen dieser Klasse aufzählen, indem Sie die Zeichen nacheinander notieren. Reservierte Zeichen müssen auch hierbei explizit mit einem umgekehrten Schrägstrich maskiert werden, wie in Beispiel (8.). Wenn Sie einen größeren Zeichenbereich haben, der passen soll, können Sie diesen angeben, indem Sie das erste Zeichen des Bereichs notieren, danach ein Minuszeichen als Bindestrich - und danach das letzte Zeichen des Bereichs, wie in den Beispielen (3.), (4.), (9.) und (19.). Wenn Sie den Bindestrich als wirkliches Zeichen meinen, notieren Sie ihn am Anfang der Zeichenklasse, wie in Beispiel (7.).

Für bestimmte häufig vorkommende Zeichenklassen gibt es Abkürzungen. So entspricht [0-9] \d und [ \r\n\t\f] entspricht \s. [a-zA-Z0-9_] entspricht im allgemeinen der Abkürzung \w. Sie können diese Abkürzungen auch innerhalb von Zeichenklassen verwenden, wie in Beispiel (7.).

Sie können Zeichenklassen negieren, um festzulegen, dass sie auf ein bestimmtes Zeichen nicht passen sollen, wie in den Beispielen (18.) und (19.). Dazu notieren Sie direkt nach der öffnenden eckigen Klammer [ das Hütchensymbol ^. Beachten Sie, dass auch dann mindestens ein Zeichen in der durchsuchten Zeichenkette vorhanden sein muss, auf das der reguläre Ausdruck nicht passt, obwohl kein Buchstabe in der Zeichenkette vorkommt. Wenn Sie also Beispiel (19.) auf eine leere Zeichenkette anwenden, bekommen Sie als Ergebnis, dass der reguläre Ausdruck nicht passt. Um abgekürzte Zeichenklassen wie etwa \s oder \d zu negieren, ändern Sie einfach den "Namen" der Abkürzung in einen Großbuchstaben, also \S oder \D.

Reguläre Ausdrücke für Zeichenketten

Sie können

  • nach einer bestimmten Zeichenkette suchen
  • nach einer Zeichenkette mit Gruppierungsoperatoren (Platzhalter, Wildcards) suchen
  • nach Zeichenketten am Anfang oder Ende eines Wortes suchen
  • nach Zeichenketten am Anfang oder Ende einer Zeile suchen

Diese Art von regulären Ausdrücken ist dazu gedacht, um etwa in einem Wert nach dem Vorkommen eines bestimmten Wortes, einer beliebigen Teilzeichenkette oder nach einem Muster zu suchen.

Nr. | Regulärer Ausdruck (Beispiel) | Wirkung
1. | /aus/ | passt auf 'aus' - auch in 'Haus' oder 'Mausi'
2. | /aus?/ | passt auf 'aus' usw. - aber auch 'au' und 'auf'
3. | /a./ | passt auf 'ab' und 'an' (ein beliebiges Zeichen hinter 'a', außer \n)
4. | /a+/ | passt auf 'a' und 'aa' und 'aaaaa' (ein oder beliebig viele 'a')
5. | /a*/ | passt auf 'a' und 'aa' und 'aaaaa' und 'b' (kein oder beliebig viele 'a')
6. | /Ha.s/ | passt auf 'Haus' und 'Hans' aber nicht 'Hannes'
7. | /Ha.+s/ | passt auf 'Haus' und 'Hans' und 'Hannes' (ein oder beliebig viele beliebige Zeichen, außer \n)
8. | /Ha.*s/ | passt auf 'Haus' und 'Hans' und 'Hannes' (kein oder beliebig viele beliebige Zeichen, außer \n)
9. | /Ha.?s/ | passt auf 'Haus' und 'Hans' und 'Hase'
10. | /x{10,20}/ | passt auf zwischen 10 und 20 'x' in Folge
11. | /x{10,}/ | passt auf 10 und mehr 'x' in Folge
12. | /x.{2}y/ | passt auf 'xxxy' oder 'xaby' usw. (zwei beliebige Zeichen zwischen 'x' und 'y', außer \n)
13. | /Hans\b/ | passt auf 'Hans' aber nicht 'Hansel' (Wortgrenze)
14. | /\baus/ | passt auf 'aus' oder 'außen' aber nicht 'Haus' (Wortgrenze)
15. | /\baus\b/ | passt auf 'aus' aber nicht 'Haus' und auch nicht 'außen' (Wortgrenze)
16. | /\baus\B/ | passt auf 'außen' aber nicht 'aus' und auch nicht 'Haus' (Wortgrenze und "negative" Wortgrenze)
17. | /^Hans/ | passt auf 'Hans' nur am Anfang des zu durchsuchenden Bereichs
18. | /Hans$/ | passt auf 'Hans' nur am Ende des zu durchsuchenden Bereichs
19. | /^\s*$/ | passt auf Zeilen, die nur aus Leerzeichen und anderen Leerraumzeichen bestehen oder leer sind
20. | /$Name/ | interpretiert den Inhalt des Skalars $Name als regulären Ausdruck

Wenn Sie in einem regulären Ausdruck nach einer bestimmten Zeichenkette suchen wollen, notieren Sie die Zeichenkette einfach zwischen den beiden Schrägstrichen des regulären Ausdrucks, so wie in Beispiel (1.). Allerdings gilt auch hier wie bei den nach oben regulären Ausdrücken für einzelne Zeichen: wenn Sie nach einer festen Zeichenfolge suchen, sind Sie mit der Funktion Seite index besser beraten.

Reguläre Ausdrücke sind sozusagen eine eigene Sprache, die durch Wörter, die anhand grammatischer Regeln verknüpft werden, dargestellt wird. Die Verknüpfung erfolgt durch Operatoren. Der Grund, warum reguläre Ausdrücke so kompliziert erscheinen, ist die hohe Komprimierung in der Notation.

Ein Wort in der Sprache der regulären Ausdrücke wird Atom genannt. Atome stellen immer genau ein gesuchtes Zeichen dar, beispielsweise a, [abc], . oder \[. Die Zeichenklasse [abc] stellt ein Zeichen dar, das 'a', 'b' oder 'c' sein kann. Der Punkt . ist die Abkürzung für eine ganz spezielle Zeichenklasse, die alle Zeichen außer dem Zeilenumbruch beinhaltet. Er entspricht also in der DOS-Eingabeaufforderung beispielsweise dem ?. Das Konstrukt \[ stellt eine eckige Klammer dar, die aber durch den umgekehrten Schrägstrich nach unten maskiert werden muss, wenn sie nicht als Steuerzeichen verstanden werden soll.
Um aus Atomen ein zusammenhängendes Muster zu bilden, notieren Sie die Atome einfach ohne Leerzeichen aneinander.

Zeichenwiederholungen können Sie mit Wiederholungsoperatoren kennzeichnen.
Das Fragezeichen ? bedeutet in einem regulären Ausdruck: das Zeichen vor dem Fragezeichen oder auch nicht. Siehe dazu Beispiel (2.).
Das Pluszeichen + bedeutet: eine oder mehrere Wiederholungen des Zeichens, das vor dem Pluszeichen steht. Siehe dazu Beispiel (4.).
Das Sternzeichen * bedeutet: keine, eine oder mehrere Wiederholungen des Zeichens, das vor dem Sternzeichen steht. Siehe dazu Beispiel (5.).
Wenn Sie vor den Zeichen + oder * einen Punkt notieren (der für ein beliebiges Zeichen steht), erzeugen Sie einen Platzhalter, der dem * in der DOS/Windows-Welt, etwa bei Dateinamen, entspricht. Siehe dazu Beispiele (6.) bis (9.).
Geschweifte Klammern mit einer Zahl oder zwei Zahlen n darin {n} stehen für n Wiederholungen des Zeichens vor der geschweiften Klammer an der betreffenden Stelle - siehe dazu Beispiele (10.) bis (12.). Dabei können Sie auch das Punktzeichen vor der geschweiften Klammer notieren. In diesem Fall bedeutet die Angabe innerhalb der geschweiften Klammer: so viele beliebige Zeichen wie angegeben - siehe dazu Beispiel (12.)

Sie können nach Zeichenketten suchen, die nur dann gefunden werden, wenn sie am Anfang oder am Ende eines Wortes vorkommen. Auch die Umkehrung davon ist möglich: Sie können nach Zeichenketten suchen, die nur dann gefunden werden, wenn sie nicht am Anfang oder am Ende eines Wortes vorkommen.
Mit \b vor einer Zeichenkette wird die Zeichenkette nur gefunden, wenn ein Wort damit anfängt.
Mit \b nach einer Zeichenkette wird die Zeichenkette nur gefunden, wenn ein Wort damit endet.
Mit \B vor einer Zeichenkette wird die Zeichenkette nur gefunden, wenn ein Wort nicht damit anfängt.
Mit \B nach einer Zeichenkette wird die Zeichenkette nur gefunden, wenn ein Wort nicht damit endet.
Zu diesen Möglichkeiten siehe Beispiele (13.) bis (16.).
Genau gesagt definiert \b die Grenze zwischen \w und \W (oder Zeichenkettenanfang oder -ende).

Sie können Zeichenketten suchen, die nur dann gefunden werden, wenn sie am Anfang oder am Ende einer Zeile im zu durchsuchenden Bereich vorkommen. Dies ist vor allem im Zusammenhang mit Zeilen in Textdateien interessant.
Mit dem Hütchensymbol ^ am Beginn des Suchausdrucks wird die Zeichenkette nur gefunden, wenn sie am Anfang des Bereichs steht.
Mit dem Dollarzeichen $ am Ende des Suchausdrucks wird die Zeichenkette nur gefunden, wenn sie am Ende des Bereichs steht.
Zu diesen Möglichkeiten siehe Beispiele (17.) bis (19.).

Innerhalb von regulären Ausdrücken können Sie auch Variablen verwenden. Auf diese Weise können Sie dynamische Daten als Suchmuster einsetzen. Im Zusammenhang mit CGI können Sie z.B. die Anwendereingabe aus einem Formularfeld in ein Suchmuster übernehmen. Siehe dazu Beispiel (20.).

Maskierung von Zeichen in regulären Ausdrücken

Da es bei regulären Ausdrücken einige Zeichen mit Sonderbedeutung gibt, müssen Sie solche Zeichen maskieren, wenn Sie nicht die Sonderbedeutung des Zeichens meinen, sondern seine literale, normale Bedeutung, also einen Senkrechtstrich als Senkrechtstrich oder einen Punkt als Punkt meinen. Das Maskierungszeichen ist in allen Fällen der Backslash.

Zeichen | Maskierung | Grund | Beispiel
/ | \/ | Wenn der Schrägstrich den regulären Ausdruck begrenzt, muss er innerhalb davon maskiert werden. | /\/usr\/bin\/perl/
. | \. | Der Punkt steht in regulären Ausdrücken ansonsten für ein beliebiges anderes Zeichen. | /Ende aus\./
+ | \+ | Das Pluszeichen steht ansonsten für ein oder mehrmaliges Vorkommen des davorstehenden Zeichens. | /\d\+\d/
* | \* | Das Sternzeichen steht ansonsten für kein, ein oder mehrmaliges Vorkommen des davorstehenden Zeichens. | /\*char/
? | \? | Das Fragezeichen steht ansonsten für kein oder einmaliges Vorkommen des davorstehenden Zeichens. | /Wie geht das\?/
^ | \^ | Das Dach- oder Hütchensymbol kann ansonsten eine Zeichenklasse verneinen oder bei Zeichenketten angeben, dass das nachfolgende Suchmuster am Anfang des Suchbereichs vorkommen muss. | /ein \^ über dem Kopf/
$ | \$ | Das Dollarzeichen kann einen Skalar einleiten oder bei Zeichenketten angeben, dass das voranstehende Suchmuster am Ende des Suchbereichs vorkommen muss. | /Preis (US-Dollar): \d*\$/
| | \| | Der Senkrechtstrich kann ansonsten alternative Ausdrücke auseinanderhalten. | /find (.*) \| sort/
\ | \\ | Der Backslash würde ansonsten das nachfolgende Zeichen maskieren. | /C:\\/
( ) | \( \) | Runde Klammern können ansonsten Teilausdrücke gruppieren und zum Merken einklammern. | /\(Hinweis: (.*)\)/
[] | \[ \] | Eckige Klammern begrenzen ansonsten eine Zeichenklasse. | /\$(.*)\[\d+\]/
{ } | \{ \} | Geschweifte Klammern bedeuten ansonsten eine Wiederholungs-Angabe für davorstehende Zeichen. | /ENV\{.*\}/

Gierige und genügsame Suchmuster

Normalerweise sind alle regulären Ausdrücke, die Wildcard-Ausdrücke wie .* enthalten, sehr "gierig". Sie holen sich so viele Zeichen wie möglich. Es gibt jedoch die Möglichkeit, solche Ausdrücke zu mehr Genügsamkeit zu zwingen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $HTML_Zeile = "<html><head><title>Testausgabe</title></head><body><h1>&Uuml;berschrift</h1></body></html>";

$HTML_Zeile =~ /(^<.+>)/;
my $gierig = $1;
$HTML_Zeile =~ /(^<.+?>)/;
my $genuegsam = $1;

$gierig =~ s/</&lt;/g;    # nur wegen HTML-Ausgabe
$gierig =~ s/>/&gt;/g;    # nur wegen HTML-Ausgabe
$genuegsam =~ s/</&lt;/g; # nur wegen HTML-Ausgabe
$genuegsam =~ s/>/&gt;/g; # nur wegen HTML-Ausgabe

print "<p><b>Gierige Version:</b> <tt>$gierig</tt></p>";
print "<p><b>Gen&uuml;gsame Version:</b> <tt>$genuegsam</tt></p>";

print "</body></html>\n";

Erläuterung:

Das Beispiel-Script demonstriert die Gier regulärer Ausdrücke und zeigt auch, wie sich diese Gier unterbinden lässt. Ein Skalar namens $HTML_Zeile wird deklariert und erhält als Anfangswert den Code einer kompletten kleinen HTML-Datei. Anschließend wird dieser Skalar mit einem regulären Ausdruck bewertet, der darin nach einem Muster /(^<.+>)/ sucht. In runde Klammern eingeschlossen ist das gesamte Suchmuster, weil anschließend ausgegeben werden soll, was gefunden wurde. Das Suchergebnis wird im Skalar $gierig gespeichert. Anschließend wird die Prozedur noch einmal wiederholt. Diesmal ist der reguläre Ausdruck nur minimal anders: er enthält hinter dem Pluszeichen noch ein Fragezeichen.

Beide Suchergebnisse werden anschließend noch für die HTML-Ausgabe vorbereitet, und zwar werden die spitzen Klammern HTML-gerecht ersetzt (siehe dazu auch nach unten Suchen und Ersetzen mit regulären Ausdrücken).

Die Ausgabe von $gierig bewirkt:
<html><head><title>Testausgabe</title></head><body><h1>Überschrift</h1></body></html>
Die Ausgabe von $genuegsam dagegen:
<html>

Der Wildcard-Ausdruck .+, der "alles" bis zum Zeichen > holen soll, macht nämlich nicht beim nächsten > Stopp, sondern erst beim allerletzten. Durch das Anhängen des Fragezeichens, also durch Erweiterung auf .+?, beschränkt sich das Muster auf das Auffinden des nächsten >-Zeichens.

Reguläre Ausdrücke mit Alternativen

Sie können mehrere Suchausdrücke angeben. Dann passt der Ausdruck auf alle Zeichenketten, in denen wenigstens eine der Alternativen vorkommt.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $Text = "Kaffee ohne Milch";
print "egal ob mit oder ohne<br>\n" if ($Text =~ /mit|ohne/);
$Text = "Kaffee mit Milch";
print "sag ich doch: egal ob mit oder ohne<br>\n" if ($Text =~ /mit|ohne/);

print "</body></html>\n";

Erläuterung:

Das Beispiel-Script deklariert einen Skalar $Text mit dem Anfangswert Kaffee ohne Milch. Abhängig vom Erfolg des regulären Ausdrucks /mit|ohne/, der auf diesen Skalar angewendet wird, wird im aufrufenden Browser ausgegeben: egal ob mit oder ohne. Der Senkrechtstrich | teilt den regulären Ausdruck in zwei Alternativen auf, bei denen es reicht, wenn eine davon zutrifft. Da dies der Fall ist, wird der Satz im Browser ausgegeben. Zur Kontrolle wird der Text anschließend zu Kaffee mit Milch geändert. Der anschließend angewendete gleiche reguläre Ausdruck führt wieder zum Erfolg, und es wird sag ich doch: egal ob mit oder ohne ausgegeben.

Teilausdrücke merken mit Klammerung

Mit Hilfe von Klammerung einzelner Teile eines regulären Ausdrucks können Sie Teilmuster speichern und an einer späteren Stelle wiederverwenden.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $CTIME = localtime(time);
$CTIME =~ /^([A-Za-z]*?)\s*([A-Za-z]*?)\s*(\d*?)\s*(\d*?):(\d*?):(\d*)\s*(\d*)$/;
my $Tag = $1;
my $Monat = $2;
my $Monatstag = $3;
my $Stunden = $4;
my $Minuten = $5;
my $Sekunden = $6;
my $Jahr = $7;
my %Tage   = (Mon => "Montag", Tue => "Dienstag", Wed => "Mittwoch",
              Thu => "Donnerstag", Fri => "Freitag", Sat => "Samstag", Sun => "Sonntag");
my %Monate = (Jan => "01", Feb => "02", Mar => "03", Apr => "04", May => "05", Jun => "06",
              Jul => "07", Aug => "08", Sep => "09", Oct => "10", Nov => "11", Dec => "12");

print "<b>Heute ist $Tage{$Tag}, der $Monatstag.$Monate{$Monat}.$Jahr, es ist $Stunden.$Minuten Uhr</b>\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel ruft die Perl-Funktion Seite localtime mit dem Rückgabewert der Funktion Seite time auf und speichert den Rückgabewert von localtime im Skalar $CTIME. Darin ist anschließend eine Zeichenkette gespeichert, die so aufgebaut ist:
Sun Jun 17 21:37:40 2006

In der darauffolgenden Anweisung wird $CTIME mit einem langen regulären Suchausdruck bewertet. Der reguläre Ausdruck versucht, das gesamte typische Muster des Datum-Uhrzeit-Strings zu erfassen. Die Nutzdaten darin, also Wochentag, Monatsname, Monatstag, Stunden, Minuten, Sekunden und Jahr werden innerhalb des regulären Ausdrucks geklammert. Jeden Inhalt dieser Klammern merkt sich Perl und stellt ihn in den Seite vordefinierten Variablen $1, $2, $3 usw. zur Verfügung. Die anschließend deklarierten Skalare holen sich die Werte aus den Klammern, indem ihnen die entsprechenden vordefinierten Variablen zugewiesen werden.

Die beiden Hashes %Tage und %Monate werden zum Zweck eines deutschsprachigen Datum-Uhrzeit-Formats verwendet. Das Script gibt am Ende so etwas aus wie:
Heute ist Sonntag, der 18.02.2007, es ist 17.39 Uhr.

Rangfolge in regulären Ausdrücken

Die Sonderzeichen innerhalb von regulären Ausdrücken werden vom Perl-Interpreter nach einer bestimmten Rangfolge bewertet.

  1. Rangstufe: () (Klammerung)
  2. Rangstufe: + * ? {#,#} (Wiederholungsoperatoren)
  3. Rangstufe: abc ^ $ \b \B (Zeichen/Zeichenketten, Zeilenanfang/-ende, Wortanfang/-ende)
  4. Rangstufe: | (Alternativen)

Dadurch ist jeder reguläre Ausdruck eindeutig bewertbar. Wenn Sie in einem Ausdruck jedoch anders bewerten möchten, als es nach der Rangfolge geschieht, können Sie innerhalb des Ausdrucks Klammern setzen, um eine andere Bewertung zu erzwingen.

Beispiele:

/a|bc|d/       # findet 'a' oder 'bc' oder 'd'
/(a|b)(c|d)/   # findet 'ac' oder 'ad' oder 'bc' oder 'bd'

Erläuterung:

Laut der Rangfolge haben Zeichen bzw. Zeichenketten Vorrang vor dem Trennzeichen für Alternativen. Mit Hilfe von Klammern können Sie eine andere Bewertung erzwingen (siehe Beispiel).
Wenn Sie die Klammern zur Bewertungsänderung benutzen möchten, ohne sich die entsprechenden nach oben Teilausdrücke merken zu wollen, können Sie auch Klammern benutzen, die nur gruppieren. Dabei wird direkt hinter der öffnenden Klammer die Zeichenfolge ?: notiert, im Beispiel wäre das (?:a|b)(?:c|d).

Flags hinter regulären Ausdrücken

Hinter dem beendenden Begrenzerzeichen (normalerweise: Schrägstrich) eines regulären Ausdrucks können noch ein oder mehrere Buchstaben notiert werden - so genannte Flags. Damit können Sie das Verhalten der Suche zusätzlich beeinflussen. Mit einer Notation wie /aus/g suchen Sie beispielsweise global nach dem Vorkommen von aus, und mit /aus/gim suchen Sie die Zeichenfolge aus global, egal ob groß oder klein geschrieben, und die Zeichenkette kann auch aus mehreren Zeilen bestehen. Flags können Sie also beliebig kombinieren. Die folgende Tabelle listet die möglichen Flags auf.

Flag | Bedeutung
c | Bei einem auftretenden Fehler nicht die Suchposition zurücksetzen.
e | Führt bei nach unten Ersetzungen die Ersatzzeichenkette als Perl-Code aus.
g | Global suchen, d.h. alle Vorkommen finden.
i | Groß-/Kleinschreibung ignorieren
m | Zeichenketten können aus mehreren Zeilen bestehen
o | Suchmuster nur einmal anwenden
s | Zeichenketten als eine einzige Zeile betrachten
x | Erweiterte Syntax verwenden

Suchen und Ersetzen mit regulären Ausdrücken

Reguläre Ausdrücke sind das Mittel, mit dem in Perl in Zeichenketten etwas gesucht und ersetzt wird.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/plain\n\n";

my $Text = "Franz jagt im komplett verwahrlosten Taxi quer durch Bayern 1234567890";
$Text =~ s/[a-z]| //gi;

print "$Text\n";

Erläuterung:

Das Schema für alle Suche-Ersetze-Vorgänge in Perl lautet:
$Zeichenkette =~ s/Suchmuster/Ersatzzeichenkette/[Flags]

$Zeichenkette ist ein Skalar, in dem eine Zeichenkette gespeichert ist, so wie etwa $Text im obigen Beispiel 1. Dieser Skalar wird mit dem Operator =~ an die Ersetzung gebunden, d.h. der Suche-Ersetze-Vorgang gilt für den Inhalt des Skalars. Dahinter notieren Sie die Ersetzung. Sie wird durch ein kleines s eingeleitet. Nach dem s notieren Sie das erste Begrenzerzeichen (per Voreinstellung ein Schrägstrich), und danach das Suchmuster, das mit dem zweiten Begrenzerzeichen abgeschlossen wird. Danach folgen das Zeichen oder die Zeichenfolge, mit dem/mit der die Fundstellen ersetzt werden sollen, abgeschlossen wird dieses Ersetzungsmuster mit dem dritten Begrenzerzeichen. Falls benötigt, notieren Sie nach dem letzten Begrenzerzeichen noch Flags für den Such-Ersetze-Vorgang. Im Beispiel wurden folgende Flags verwendet:
g sucht/ersetzt alle Fundstellen (ansonsten wird nur die erste Fundstelle ersetzt)
i sucht/ersetzt Buchstaben unabhängig davon, ob sie groß oder klein geschrieben sind (ansonsten wird Groß-/Kleinschreibung unterschieden).

Im obigen Beispiel werden aus dem Skalar $Text alle Buchstaben (groß und klein) und alle Leerzeichen entfernt. Es bleiben anschließend also nur noch die Ziffern am Ende stehen. Das Ergebnis wird zur Kontrolle ausgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/plain\n\n";

my $Text = "In München steht ein Hofbräuhaus, dort gibt es Bier in Maßen";
$Text =~ s/ä/&auml;/g;
$Text =~ s/ö/&ouml;/g;
$Text =~ s/ü/&uuml;/g;
$Text =~ s/Ä/&Auml;/g;
$Text =~ s/Ö/&Ouml;/g;
$Text =~ s/Ü/&Uuml;/g;
$Text =~ s/ß/&szlig;/g;

print "$Text\n";

Erläuterung:

In diesem Beispiel werden in $Text alle deutschen Umlaute und scharfes S durch ihre HTML-gerechten Umschreibungen ersetzt. Das Ergebnis wird zur Kontrolle ausgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/plain\n\n";

my $Text = "Dieses Script dreht alle Wörter um";
$Text =~ s/(\w+)/reverse $1/ge;

print "$Text\n";

Erläuterung:

In diesem Beispiel werden in $Text alle Wörter mit Hilfe des nach oben e-Flags und der Beispiel-Seite reverse-Funktion umgedreht. Das Ergebnis wird zur Kontrolle ausgegeben.

Transliteration

Für "kleinere" Aufgaben wie Suchen und Ersetzen oder das Zählen von einzelnen Zeichen gibt es in Perl die Möglichkeit, ohne reguläre Ausdrücke zu arbeiten. Dafür gibt es eine spezielle Syntax, den Transliterationsoperator tr.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/plain\n\n";

my $Prinzip = "abc";
$Prinzip =~ tr/ac/xy/;
print "Prinzip = $Prinzip\n";

my $chinesisch = "chinesisches Roulette rigoros";
$chinesisch =~ tr/Rr/Ll/;
print "chinesisch = $chinesisch\n";

my $Geschrei = "WIE GEHT DAS ALLES MIT PERL?";
$Geschrei =~ tr/A-Z/a-z/;
print "Geschrei = $Geschrei\n";

my $Variablenname = "Sügümälüxümülä";
$Variablenname =~ tr/A-Za-z_0-9/_/c;
print "Variablenname = $Variablenname\n";

my $unsauber = "ein   Satz mit  überflüssigen    Leerzeichen";
$unsauber =~ tr/ //s;
print "unsauber = $unsauber\n";

my $WSatz = "Wir Westerwälder Waschweiber wollen weiße Wäsche waschen";
my $WZaehler = ($WSatz =~ tr/Ww//);
print "W/w kommt in WSatz $WZaehler mal vor!\n";

my $AchtBitWort = "überschüssig";
$AchtBitWort =~ tr/\200-\377/\000-\177/;
print "AchtBitWort = $AchtBitWort\n";

my $ROT13_Satz = "ihr seid ja solche Deppen da!";
$ROT13_Satz =~ tr/a-zA-Z/n-za-mN-ZA-M/;
print "ROT13_Satz = $ROT13_Satz\n";

Erläuterung:

Eine Transliteration besteht darin, einzelne Zeichen durch andere Zeichen zu ersetzen. Das Schema für eine Transliteration in Perl lautet:
$Zeichenkette =~ tr/Suchmuster/Ersetzmuster/[Optionen]
Dabei sind sowohl das Such- als auch das Ersetzungsmuster keine Zeichenketten, sondern nur einzelne Zeichen oder Zeichenbereiche. Die Muster sind sozusagen zwei Listen von Zeichen. Wenn in $Zeichenkette ein Zeichen gefunden wird, das in der Suchliste vorkommt, wird es mit dem Zeichen ersetzt, das an derselben Position in der Ersetzungsliste steht.

Alle Beispiele des obigen Scripts sind gleich aufgebaut. Es wird ein Skalar mit einem "interessanten" Wert deklariert. Dann wird eine Transliteration auf diesen Wert angewendet, und anschließend wird das Ergebnis ausgegeben.

Im Fall von $Prinzip wird das Prinzip der Transliteration deutlich: in dem Beispiel wird a durch x ersetzt und c durch y. Die Ausgabe lautet daher:
Prinzip = xby

Im Fall von $chinesisch werden die Buchstaben R und r durch L und l ersetzt. Die Ausgabe lautet daher:
chinesisch = chinesisches Loulette ligolos

Im Fall von $Geschrei werden alle Großbuchstaben durch entsprechende Kleinbuchstaben ersetzt (entspricht etwa der Funktion Seite lc). Die Ausgabe lautet daher:
Geschrei = wie geht das alles mit perl?

Im Fall von $Variablenname werden alle Zeichen, die kein Buchstabe von A bis Z oder a bis z oder eine Ziffer oder ein Unterstrich sind, durch den Unterstrich _ ersetzt. Die Ausgabe lautet daher:
Variablenname = S_g_m_l_x_m_l_

Im Fall von $unsauber werden alle doppelten oder mehrfachen Leerzeichen entfernt. Die Ausgabe lautet daher:
unsauber = ein Satz mit überflüssigen Leerzeichen

Im Fall von $WSatz wird sich der Rückgabewert einer Transliteration zu eigen gemacht. Dem Skalar $WSatz passiert dabei nichts weiter, aber der Rückgabewert ermittelt, wie oft die Buchstaben W oder w in dem Satz vorkommen. Die Ausgabe lautet daher:
W/w kommt in WSatz 9 mal vor!

Im Fall von $AchtBitWort werden alle Zeichen mit Zeichenwerten zwischen 128 und 255 in Zeichen mit entsprechenden Zeichenwerten zwischen 0 und 127 umgewandelt. Die Ausgabe lautet daher:
AchtBitWort = |berfl|ssig

Im Fall von $ROT13_Satz werden alle Zeichen des ersten Alphabethälfte in solche der zweiten verwandelt und umgekehrt (sie werden sozusagen um 13 Zeichenwerte rotiert). Die Ausgabe lautet:
ROT13_Satz = vue frvq wn fbypur Qrccra qn!
(das ROT13-Prinzip wird in den Newsgroups manchmal angewendet, um Dinge zu sagen, die nicht jeder verstehen können soll).

nach oben
weiter | Seite Subroutinen
zurück | Seite Operatoren
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Subroutinen

SELFHTML

Subroutinen
Informationsseite

nach unten Subroutinen erstellen
nach unten Subroutinen mit Parametern aufrufen
nach unten Rückgabewerte bei Subroutinen
nach unten

Subroutinen erstellen

Bei komplexeren Perl-Scripts ist es empfehlenswert, bestimmte Programmteile in selbst definierte Unterprogramme oder Funktionen zu verlagern - so genannte Subroutinen. Auf diese Weise können Sie das Script besser strukturieren. Sinnvoll ist das vor allem bei Programmteilen, die im Laufe des Scripts mehrmals ausgeführt werden. Bevor Sie also eine größere Prozedur mehrmals im Script notieren, sollten Sie die entsprechende Prozedur in eine Subroutine stecken und diese Subroutine an der gewünschten Stelle aufrufen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";

my $Ergebnis = 1 + 2 * 3 + 4 * 5 + 6 * 7 + 8 * 9;
Ausgabe();
$Ergebnis = sqrt(sqrt(81));
Ausgabe();

print "</body></html>\n";

sub Ausgabe {
 print "Das Ergebnis lautet: <b>$Ergebnis</b><br>\n";
}

Erläuterung:

Im Beispiel wird eine Subroutine mit dem Namen Ausgabe erstellt. Eine Subroutine beginnt mit dem Schlüsselwort sub. Dahinter folgt ein frei wählbarer Name, der den Seite Namenskonventionen von Perl entsprechen muss. Der gesamte Inhalt der Subroutine muss in geschweiften Klammern stehen. Sie können beliebige und beliebig viele Anweisungen innerhalb der Subroutine notieren.

Mit ihrem Namen und runden Klammern dahinter rufen Sie eine Subroutine auf. Der Aufruf ist eine eigene Anweisung, muss also wie andere Anweisungen mit einem Semikolon abgeschlossen werden. Im obigen Beispiel kommt zweimal die Anweisung Ausgabe(); vor. Dadurch wird die Subroutine mit dem Namen Ausgabe aufgerufen.

Beachten Sie:

Anweisungen in Subroutinen werden nur ausgeführt wenn die Subroutine aufgerufen wird.

Es ist egal, an welcher Stelle im Script eine Subroutine steht. Sie kann im Prinzip überall stehen. Es ist allerdings sinnvoll, alle Subroutinen optisch getrennt vom direkt ausgeführten Hauptprogramm zu notieren.

Beim Aufruf könnten Sie anstelle von Routine(); auch &Routine; oder &Routine(); notieren. Die erste Art ist jedoch am empfehlenswertesten, vor allem bei Aufrufen ohne Klammern kann es zu Fehlern kommen.

Wenn Sie - wie im obigen Beispiel - mit use strict; arbeiten, müssen Sie bekanntlich alle Variablen vor ihrer ersten Verwendung deklarieren. Damit wird aber auch der Geltungsbereich einer Variablen eingeschränkt. Eine Subroutine stellt einen eigenen Block und Geltungsbereich dar. Wenn Sie also beispielsweise innerhalb einer Subroutine mit my $Variable=1; eine Variable deklarieren und im Hauptprogramm versuchen, mit print $Variable den Inhalt auszugeben, führt dies zu einer Fehlermeldung, da $Variable im Hauptprogramm nicht bekannt ist. Umgekehrt ist es anders: Variablen, die im Hauptprogramm deklariert sind, sind auch in Subroutinen verfügbar. Im obigen Beispiel wird ja von dieser Möglichkeit Gebrauch gemacht. Generell ist es auch aus diesem Grund bei größeren Scripts sinnvoll, möglichst viel Code mit Variablendeklarationen in Subroutinen zu packen und im Hauptprogramm so wenig Variablendeklarationen wie möglich zu haben. Denn globale Variablen können tendenziell leichter zu logischen Fehlern im Programmablauf führen, da sie nicht so leicht zu kontrollieren sind wie Variablen in begrenzten Subroutinen.

Das Überschreiben von vordefinierten Perl-Funktionen ist ebenfalls möglich. Wenn Sie zum Beispiel die Funktionsweise einer vordefinierten Funktion ergänzen möchten, definieren Sie einfach eine neue Subroutine mit dem entsprechenden Namen. Einige Perl-Module machen von dieser Möglichkeit Gebrauch. Um auf die ursprüngliche Funktion zuzugreifen, setzen Sie einfach ein CORE:: vor den Namen.

Subroutinen mit Parametern aufrufen

Beim Aufruf können Sie einer Subroutine Daten übergeben, die von der Subroutine verarbeitet werden sollen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";

formatHTML("Hallo User","h1");
formatHTML("Dein Browser gibt sich aus als $ENV{HTTP_USER_AGENT}","i");

print "</body></html>\n";

sub formatHTML {
 my $Inhalt = shift;
 my $Format = shift;
 print "<$Format>$Inhalt</$Format>";
}

Erläuterung:

Das Beispiel definiert eine Subroutine namens formatHTML. Im oberen Teil des Scripts können Sie sehen, wie diese Subroutine aufgerufen wird. Mit dem Aufruf formatHTML("Hallo User","h1"); werden der Subroutine zwei Parameter übergeben. Denn die Subroutine soll die Aufgabe haben, aus einem übergebenen Text und einem übergebenen HTML-Elementnamen ein HTML-Konstrukt, bestehend aus Anfangs-Tag, Inhalt und End-Tag auszugeben.

Die Subroutine erwartet also zwei Parameter. Interessant ist, wie sie die Parameter abfragt. Dazu benutzt sie einfach die Perl-Funktion Seite shift und weist deren Rückgabewert einem Skalar zu. Um diese Anweisung zu verstehen, ist es wichtig zu wissen, dass Parameter, die einer Subroutine übergeben werden, in der Seite vordefinierten Variablen @_ stehen. Diese Variable enthält die Liste aller Parameter, die der Subroutine übergeben wurden. Der erste Parameter steht dann in $_[0], der zweite in $_[1] usw. Eleganter ist es jedoch, sich die Parameter mit der shift-Funktion zu holen. Da shift beim Aufruf kein Parameter übergeben wird, wendet die Funktion ihre Arbeit automatisch auf die vordefinierte Variable @_ an. Die Funktion entfernt das erste Element der Liste und gibt es zurück. Durch wiederholtes Aufrufen von shift kann sich eine Subroutine also nach und nach alle Parameter abholen, die ihr übergeben wurden.

Die Subroutine im Beispiel holt sich also den ersten Parameter und speichert ihn in $Inhalt und den zweiten in $Format. Dann erzeugt sie eine print-Ausgabe und baut darin das gewünschte HTML-Konstrukt zusammen. Bei jedem Aufruf aus dem Hauptprogramm bewirkt die Subroutine also eine Ausgabe im Browser mit den übergebenen Parametern.

Beachten Sie:

Sie müssen nirgendwo festlegen, wie viele und welche Parameter eine Subroutine übergeben bekommen kann. Eine Subroutine, die nicht weiß, wie viele Parameter sie übergeben bekommt, kann die übergebene Parameterliste beispielsweise mit einer Seite foreach-Schleife in der Form foreach(@_) abarbeiten.

Rückgabewerte bei Subroutinen

Subroutinen können Werte zurückgeben. Subroutinen, die Parameter übergeben bekommen, damit etwas tun und die verarbeiteten Daten zurückgeben, entsprechen am ehesten dem, was man unter einer Funktion versteht. Die eingebauten Kapitel Perl-Funktionen folgen diesem Schema, aber auch die meisten Subroutinen, die Sie in Kapitel Modulen aufrufen können, arbeiten als Funktionen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print HTMLKopf();
print HTMLCode("h1","Hallo!","font-size:24pt; color:red");
print HTMLCode("p","Wie geht's?","");
print HTMLFuss();

sub HTMLKopf {
 my $Kopf = "Content-type: text/html\n\n".
  '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">'."\n".
  "<html><head><title>Test</title></head><body>\n";
 return($Kopf);
}

sub HTMLFuss {
my $Fuss = "<hr>\n<script type=\"text/javascript\"><!--\n".
            "document.write(\"URL-Adresse: \"+document.URL);\n//--></script>\n".
            "</body></html>\n";
 return($Fuss);
}

sub HTMLCode {
 my $Tag = shift;
 my $Inhalt = shift;
 my $Style = shift;
 unless(defined($Style) and length($Style)) {
  return("<$Tag>$Inhalt</$Tag>");
 }
 else {
  return("<$Tag style=\"$Style\">$Inhalt</$Tag>");
 }
}

Erläuterung:

Das Beispiel weitet die Subroutinen-Technik zum Erzeugen von HTML-Code weiter aus. Es gibt insgesamt drei Subroutinen: HTMLKopf und HTMLFuss setzen mit Hilfe des Seite Operators für Zeichenkettenverknüpfung HTML-Code in einem Skalar zusammen. Am Ende wird dieser Skalar mit der Funktion return zurückgegeben.

Etwas komplexer ist die Subroutine HTMLCode. Sie erwartet drei nach oben Parameter, nämlich einen für das zu erzeugende HTML-Element, einen für dessen Inhalt, und einen für eventuelle CSS-Eigenschaften zur Formatierung des Elements. Abhängig davon (mit Seite if/else wird die entsprechende Weiche gestellt), ob der dritte Parameter einen Inhalt hat, wird der gewünschte HTML-Code zusammengesetzt und das gesamte Konstrukt mit return zurückgegeben.

Im Hauptprogramm stehen nur ein paar print-Anweisungen. Die Funktion print ist so leistungsfähig, dass sie als übergebene Parameter für das, was sie ausgeben soll, auch Aufrufe anderer Funktionen oder eigener Subroutinen erlaubt. Genau davon wird im Beispiel Gebrauch gemacht. Ausgegeben wird dabei der Return-Wert der jeweils aufgerufenen Subroutine. Ebenso könnten Sie den Return-Wert natürlich einer Variablen zuordnen oder etwas anderes damit tun.

Beachten Sie:

Subroutinen können alle Arten von Variablen zurückgeben, also neben Seite Skalaren auch Seite Listen/Arrays, Seite Hashes und Seite Referenzen. Die aufrufende Anweisung muss dafür sorgen, dass der zurückgegebene Wert im richtigen Variablenformat gespeichert wird. Wenn in einer Subroutine namens TeileErmitteln beispielsweise notiert ist:
return(@Ermittelte);
dann könnte eine aufrufende Anweisung etwa lauten:
my @Teile = TeileErmitteln();
Falls Aufrufspeicher und Rückgabewert nicht vom gleichen Typ sind, greift automatisch die Kontext-Bewertung von Perl. Wenn Sie beispielsweise die gleiche Subroutine aufrufen mit:
my $Ergebnis = TeileErmitteln();
Dann ist das, als ob da stünde: $Ergebnis = @Ermittelte. Das Ergebnis besteht in dem Fall darin, dass in $Ergebnis die Anzahl der zurückgegebenen Array-Elemente steht, weil Perl bei einer Liste im skalaren Kontext die Anzahl der Array-Elemente liefert.

nach oben
weiter | Seite Tokens
zurück | Seite Reguläre Ausdrücke
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Tokens

SELFHTML

Tokens
Informationsseite

nach unten Zweck von Tokens und reservierte Tokens
nach unten

Zweck von Tokens und reservierte Tokens

Tokens dienen in Perl dazu, logische Abschnitte in einem Script zu markieren. Deshalb sehen die Tokens sehr auffällig aus (z.B. __DATA__). Sie bestehen alle aus jeweils zwei Unterstrichen vorne und hinten und dazwischen einem groß geschriebenen Wort. Es besteht keine Pflicht, solche Tokens zu benutzen, es gibt jedoch Fälle, wo es sinnvoll ist, und einige Fälle, wo es erforderlich ist.

Folgende Tokens sind reserviert:
__FILE__ steht für den Dateinamen des aktuellen Scripts,
__LINE__ steht für die aktuelle Zeilennummer,
__END__ (allein in einer Zeile) steht für das logische Ende eines Scripts oder Moduls (es kann danach jedoch noch Text und anderes folgen),
__DATA__ (allein in einer Zeile) steht auch für das logische Ende eines Scripts oder Moduls,
__PACKAGE__ steht für den Namen des aktuellen Namensraums.

Hinter den Tokens __END__ und __DATA__ kann z.B. Text notiert werden, der aber nicht mehr als Quellcode des Scripts interpretiert wird. Diese Technik wird bei Modulen gerne benutzt, um die Dokumentation zum Modul-Code direkt im Modul zu notieren, ohne den Perl-Parser damit aufzuhalten, die im Code stehende Dokumentation als solche erkennen zu müssen.
Der in Modulen hinter __DATA__ und im Hauptscript hinter __DATA__ oder __END__ stehende Text kann mit dem speziellen Dateihandle DATA vom Programm eingelesen werden.

Beispiel:

#!/usr/bin/perl -w

# Hier folgt der normale Code des Modul-Scripts ...

__END__

=head1 NAME

MyModul::Irgendwas - tut dies und das

=head1 SYNOPSIS

 require MyAnderesModul;
 my $Objekt = new MyModul::Irgendwas;
 my $Objekt->Methode($Objekt->Parameter);

=head1 DESCRIPTION

Das Modul tut irgendwas ...

=head1 AUTHOR

Fridolin Froetzel, <froetzel@example.org>

=cut

Erläuterung:

Das Beispiel zeigt, was typischerweise hinter dem Token __END__ notiert wird. Dort folgt eine Dokumentation und das Impressum zum Script oder zum Modul. Für diese Art von Dokumentation gibt es eine eigene Syntax, die so genannte POD-Syntax. Das Beispiel zeigt den typischen Aufbau einer Moduldokumentation. Solche Teile eines Scripts bzw. Moduls können mit dem Programm perldoc, das zum Lieferumfang von Perl gehört, gelesen werden (siehe auch Seite Moduldokumentationen lesen mit perldoc).

Hinter den Tokens __END__ und __DATA__ kann durchaus auch noch Perl-Code notiert werden, beispielsweise spezielle Seite Subroutinen. Der dort notierte Code kann aus dem Script heraus aufgerufen werden, wird aber vor dem Ausführen des Scripts nicht von Perl kompiliert. Fehler in diesem Code werden also erst zur Laufzeit bemerkt.

nach oben
weiter | Seite Objektorientiertes Programmieren
zurück | Seite Subroutinen
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / Objektorientiertes Programmieren

SELFHTML

Objektorientiertes Programmieren
Informationsseite

nach unten Objektorientierte Programmierung (OOP)
nach unten Objektorientierte Programmierung in Perl
nach unten Einfaches Beispiel: das HTMLprint-Objekt
nach unten Beispiel mit Objektdaten: das VCard-Objekt
nach unten

Objektorientierte Programmierung (OOP)

Vor allem bei größeren Programmiervorhaben ist es wichtig, nicht einfach draufloszuprogrammieren, sondern sich vorher darüber Gedanken zu machen, was die Anwendung können, in welcher Form sie Daten speichern soll, welche Benutzerschnittstellen erforderlich sind usw. In dieser Phase ist es gar nicht wichtig und eher hinderlich, dauernd irgendwelche Quellcode-Fetzen im Kopf zu haben. Besser ist es, vom natürlichen Denken ausgehend die Anwendung zu modellieren.

Das natürliche Denken des modernen Menschen ist aber nicht so "prozedural" ausgerichtet wie die klassische Programmierung. Es vollzieht sich nicht in Sprungadressen und Kontrollstrukturen, sondern wird an größere eigenständige Einheiten (Menschen, Maschinen usw.), die in der Lage sind, Informationen und Fähigkeiten beizusteuern, miteinander zu kommunizieren und dadurch etwas Neues zu schaffen, gebunden.

Auch ein CGI-basiertes Gästebuch lässt sich so denken. Da gibt es beispielsweise einen Formular-Manager, der sich um die Auswertung ausgefüllter HTML-Formulare kümmert, einen Daten-Manager, dessen Aufgabe das zuverlässige und einheitliche Speichern und Einlesen von Daten ist, und einen Konfigurations-Manager, der entscheidet, welche Möglichkeiten des Gästebuchs im konkreten Fall genutzt werden und in welcher Form. Dabei muss der Konfigurations-Manager beispielsweise den Daten-Manager um das Einlesen bestimmter Konfigurationsdaten bitten. Selber darf er das nicht, das ist nun mal Aufgabe des Daten-Managers. Genausowenig darf der Daten-Manager sich einfach die HTML-Formulare holen, die vom Anwender abgesendet wurden. Dafür ist der Formular-Manager zuständig, der dann vielleicht wieder beim Konfigurations-Manager nachfragen muss, wie die Daten weiterzugeben sind, und der Antwort entsprechend die Daten an den Daten-Manager zum Abspeichern weitergibt.

Solche teamfähigen Einheiten werden in der objektorientierten Programmierung als Objekte bezeichnet. Ein Objekt hat Eigenschaften und kann etwas tun. Einige der Eigenschaften und Fähigkeiten stammen von anderen Objekten, die das Objekt selbst eingebunden und damit geerbt hat, und andere wiederum sind ganz eigene und besondere Eigenschaften und Fähigkeiten dieses Objekts.

Diese Dokumentation ist allerdings nicht der Rahmen, um die Theorie der objektorientierten Programmierung auszubreiten. Ein paar wichtige Begriffe sollten Sie trotzdem kennen:

Klasse:
Eine Klasse ist die Summe der programmierten Fähigkeiten eines Objekts. Alles, woraus ein Objekt besteht und was es kann, muss irgendwo programmiert sein. Eine Klasse ist aber "abstrakt" programmiert, sie führt noch keinen konkreten Code aus. So wie man, wenn man an "Handy" denkt, einen bestimmten Begriff von so einem Gerät hat, ist ein konkretes Objekt in der objektorientierten Programmierung nur von seiner Klasse ableitbar. Ein konkretes Objekt hat die Eigenschaften und Fähigkeiten seiner Klasse, so wie man von einem Handy, den man in der Hand hat, sagt, dass es ein Handy ist, weil er die Eigenschaften und Funktionen eines Handys hat, also dem Begriff des Handys entspricht. In einer objektorientierten Anwendung können Sie sagen: für die Aufgabe, die ich lösen möchte, brauche ich erst mal eine bestimmte Klasse, so wie man sagen könnte: für diese Aufgabe brauche ich einen Handy.

Instanz:
Eine Instanz ist ein konkretes Objekt einer bestimmten Klasse. Mit dem Begriff vom Handy allein können Sie noch keine Aufgaben lösen. Sie brauchen ein ganz reales Handy dazu. Genauso brauchen Sie eine ganz reale Instanz einer Klasse, um eine Aufgabe innerhalb Ihrer Anwendung objektorientiert anzupacken. Ihr konkretes Objekt erhält einen individuellen Namen, unter dem Sie es ansprechen können.

Eigenschaften und Methoden:
Von einer Objektinstanz können Sie nicht mehr verlangen als das, wozu das Objekt aufgrund seiner Klasse in der Lage ist. Das, wozu ein Objekt in der Lage ist, ist dadurch festgelegt, was in seiner Klasse programmiert ist. Eigenschaften (auch Attribute genannt) sind Variablen, die Ihnen zur Verfügung stehen, wenn Sie eine Instanz eines Objekts erzeugt haben. Methoden sind Funktionen, die Ihnen eine Objektinstanz zur Verfügung stellt. Eine Instanz der Klasse "Formular-Manager" könnte beispielsweise als Eigenschaft eine Datenstruktur anbieten, in der sie eingelesene Formulardaten bequem zur Verfügung stellt. Als Methoden könnte diese Instanz zum Beispiel Filterfunktionen enthalten, um etwa nur die Daten aus versteckten Formularfeldern anzubieten. In Ihrer Anwendung können Sie dann Eigenschaften und Methoden verwenden, indem Sie auf deren Namen innerhalb einer konkreten Instanz "zeigen". Das ist so, als ob Sie an dem Laptop, den Sie vor sich haben, die Funktion "suche den nächsten ausreichend starken WLAN-Hotspot" anstoßen (eine Methode) und bei gefundenem Hotspot am Display dessen Standort ablesen können (eine Eigenschaft).

Konstruktor- und Destruktor-Funktion:
Eine Konstruktorfunktion übernimmt die Handlung, eine Instanz eines Objektes zu erzeugen. Sie macht gewissermaßen aus dem Begriff von einem Handy ein reales Handy. Nun sind Sie damit unterwegs, und irgendwann brauchen Sie das Handy nicht mehr. Dann ist es nur unnötiges Gepäck. Deshalb können Sie es dann abschalten. Zumindest im Computer ist das sinnvoll, denn dadurch werden wieder Speicher-Ressourcen frei. Zum Abschalten (Zerstören) von Objektinstanzen gibt es daher eine Destruktor-Funktion.

Objektorientierte Programmierung in Perl

Der Perl-Interpreter unterstützt objektorientiertes Programmieren seit der Version 5.0. Um eine Klasse zu programmieren, also das, wovon sich eine Objektinstanz ableiten lässt, brauchen Sie in Perl ein eigenes Package, also einen eigenen Namensraum. Seite Subroutinen, die innerhalb des Packages notiert sind, sind die Methoden von Objekten dieser Klasse. Auch Objekteigenschaften können Sie innerhalb solcher Methoden auf bestimmte Weise definieren. Packages lassen sich zwar auch innerhalb eines Perl-Scripts definieren (siehe Beispiel zur Perl-Funktion Seite package), aber im Normalfall ist ein Package eine separate Perl-Datei, die keine andere Aufgabe hat als die, in Perl-Scripts "eingebunden" zu werden. Kurzum: ein Package ist in Perl meist ein Kapitel Modul mit der entsprechenden Dateiendung .pm. Von daher haben in Perl modul-orientiertes Programmieren und objektorientiertes Programmieren viel miteinander zu tun.

Ein Package ist allerdings noch nicht automatisch eine Klasse für Objekte. Packages sind lediglich Namensräume und damit das "Klima, in dem Objektklassen gedeihen können". Damit Perl eine Klasse für Objekte als solche erkennt, muss sie als solche definiert und erstellt werden.

Ebenso ist es mit den Objektinstanzen. Zunächst müssen Sie Perl mitteilen, dass Sie eine Instanz eines Objekts erzeugen möchten. Ist das gelungen, können Sie anschließend Eigenschaften und Methoden dieses Objekts über eine bestimmte Syntax ansprechen.

Beachten Sie:

Perl bietet auch weitere Features der objektorientierten Programmierung an, etwa Vererbung und Methodenbindung an Variablen. In diesem einführenden Abschnitt werden solche weiteren Features jedoch nicht behandelt.

Einfaches Beispiel: das HTMLprint-Objekt

In diesem Beispiel wird gezeigt, wie Sie ein Modul als Objektklasse erstellen, in einem Perl-Script eine Instanz dieses Objekts erzeugen und mit Methoden des Objekts arbeiten. Das Beispiel realisiert ein einfaches Objekt für HTML-Ausgaben.

Beispiel der Moduldatei HTMLprint.pm:

package HTMLprint;

sub new {
 my $Objekt = shift;
 my $Referenz = {};
 bless($Referenz,$Objekt);
 return($Referenz);
}

sub Anfang {
  my $Objekt = shift;
  my $Titel = shift;
  print "Content-type: text/html\n\n";
  print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
  print "<html><head><title>$Titel</title></head><body>\n";
}

sub Titel {
  my $Objekt = shift;
  my $Ausgabetext = shift;
  print "<h1>$Ausgabetext</h1>\n";
}

sub Text {
  my $Objekt = shift;
  my $Ausgabetext = shift;
  print "<p>$Ausgabetext</p>\n";
}

sub Ende {
  my $Objekt = shift;
  print "</body></html>\n";
}

1;

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);
use HTMLprint;

my $html = HTMLprint -> new();
$html->Anfang("Ganz elegantes Perl");
$html->Titel("Ganz elegantes Perl");
$html->Text("Popeliges HTML, aber sehr modern programmiert!");
$html->Ende();

Erläuterung:

Die Moduldatei beginnt einfach mit einer Seite package-Anweisung, die den Namen des Moduls nennt. Der Name sollte identisch mit dem Vornamen der Moduldatei sein. Wenn die Moduldatei also wie im Beispiel HTMLprint.pm heißt, sollte die Anweisung package HTMLprint; lauten.

Die Moduldatei im Beispiel enthält insgesamt fünf Subroutinen. Die erste davon ist die Konstruktorfunktion. Sie erhält üblicherweise den Namen new, könnte aber theoretisch auch einen anderen Namen erhalten. Wie eine Konstruktorfunktion aufgebaut ist, kann von Fall zu Fall variieren. In jedem Fall muss die Konstruktorfunktion jedoch einen Aufruf der Funktion bless enthalten. Diese bindet eine Referenz (einen Zeiger) an eine Klasse, sodass anschließend über diese Referenz auf das Objekt zugegriffen werden kann. Die im obigen Beispiel gezeigte Konstruktorfunktion leistet zwar schon ein wenig mehr als für das Beispiel benötigt wird, doch sie eignet sich in dieser Form einfach gut als Standard-Konstruktorfunktion, bei der man wenig falsch machen kann.

Mit my $Objekt = shift; wird einfach der erste Parameter eingelesen, den die Konstruktorfunktion new übergeben bekommt. Sie bekommt nämlich, wenn sie aufgerufen wird, automatisch als ersten Parameter den Klassennamen übergeben, im Beispiel also den Namen HTMLprint. Das ist im Beispiel der Wert, der anschließend in $Objekt steht.
Mit my $Referenz = {}; wird eine Seite Referenz, also ein Zeiger deklariert. Dieser Zeiger wird benötigt, damit die Funktion bless korrekt bedient werden und den Zeiger an das Objekt binden kann. Nun ist die Frage, wie aus der skalaren Variable $Referenz eine Referenz werden soll. Sie muss sich ja auf irgendetwas beziehen, worauf sie zeigt. Ideal ist für diesen Zweck die Zuweisung {}. Dies ist einfach eine Referenz auf einen leeren unbenannten Seite Hash. Ideal ist das deshalb, weil dieser Hash auch für die Definition von Objektdaten geeignet ist - was allerdings in diesem ersten einfachen Beispiel noch nicht geschieht. So bleibt es bei dem leeren Hash, und $Referenz ist ein Zeiger.
Mit bless($Referenz,$Objekt); wird die nötige Verbindung zwischen Referenz und Objekt hergestellt. Anschließend wird $Referenz zurückgegeben.

Die vier übrigen Subroutinen in der Moduldatei HTMLprint.pm sind sich alle recht ähnlich. Sie erzeugen mit Hilfe von print-Anweisungen HTML-Code. Die Subroutine Anfang schreibt zudem zunächst den nötigen HTTP-Header für HTML-Ausgaben.

Für alle Subroutinen, die als Methoden eines Objekts fungieren, gilt: sie bekommen automatisch mindestens einen Parameter übergeben, und zwar den Zeiger auf das Objekt, der in der Konstruktor-Funktion erzeugt und an das Objekt gebunden wurde. Die Subroutinen im Beispiel benötigen diesen Zeiger nicht. Aber Anfang, Titel und Text erwarten noch einen zweiten ganz gewöhnlichen Parameter, nämlich den Inhalt, den sie in HTML ausgeben sollen. Nun könnten sich die Routinen den Inhalt dieses zweiten Parameters auch direkt mit $_[1] holen. Aber die Notation mit dem Aufruf der shift-Funktion hat den Vorteil, dass die Parameterliste dabei sauber abgearbeitet und der Reihe nach gelöscht wird. Mit dem jeweils zweiten Aufruf von shift kommen die drei erwähnten Subroutinen also an den zweiten Parameter.

Wichtig zu erwähnen ist noch, dass pm-Moduldateien am Ende stets eine einsame Anweisung 1; (oder etwas ähnliches) enthalten müssen. Das bedeutet, die Moduldatei gibt einen wahren Wert zurück. Andernfalls würde der Perl-Interpreter einen Fehler melden.

Das eigentliche Perl-Script ist im Beispiel recht einfach. Mit der Funktion Seite use und der Anweisung use HTMLprint; bindet es die Moduldatei HTMLprint.pm ein. In dieser Form eingebunden, muss sich die HTMLprint.pm entweder im gleichen Verzeichnis befinden wie das Script, oder in einem der zentralen Verzeichnisse, in denen Perl nach Modulen sucht (mehr darüber im Abschnitt Seite Speicherorte für Module und die Liste @INC).

Mit my $html = HTMLprint -> new(); wird die Konstruktorfunktion der Moduldatei aufgerufen. Dies ist die entscheidende Anweisung, mit der eine neue Istanz des HTMLprint-Objekts erzeugt wird! Die Anweisung besteht darin, dass ein Skalar, der im Beispiel den Namen $html erhält, deklariert und mit einem Wert initialisiert wird. Der zugewiesene Wert besteht darin, dass der Name der gewünschten Objektklasse, also HTMLprint, mit Hilfe des Zeigeoperators -> auf die Konstruktorfunktion new zeigt. Da die Konstruktorfunktion eine Referenz zurückgibt, die durch den bless-Aufruf an das Objekt gebunden ist, wird $html automatisch zu einer Referenz, also zu einem Zeiger auf die neu erzeugte Objektinstanz. Über $html und den Zeigeoperator -> kann das Script fortan auf die Subroutinen des eingebundenen Moduls zugreifen. Im Objektzusammenhang spricht man allerdings nicht mehr von Subroutinen, sondern von Methoden.
Mit einer Anweisung wie $html->Anfang("Ganz elegantes Perl"); greift das Script also auf eine Methode des HTMLprint-Objekts zu, und zwar auf die Objektinstanz, die an den Zeiger $html gebunden ist.

Beispiel mit Objektdaten: das VCard-Objekt

Das folgende Beispiel zeigt, wie sich Daten mit Objekten verwalten lassen. Es handelt sich dabei um Adressdaten im international standardisierten deutschsprachige Seite VCard-Format (typische Dateiendung: *.vcf), wie es vom englischsprachige Seite Internet Mail Consortium (IMC) entwickelt und in der englischsprachige Seite RFC 2426 beschrieben wird. In der Moduldatei VCard.pm wird die VCard-Klasse mit den Objektdaten und Methoden definiert. Im Hauptscript werden dann zwei Objektinstanzen dieser Klasse angelegt, und die Methoden des Objekts werden ausprobiert.

Beispiel der Moduldatei VCard.pm:

package VCard;

$Objekte = 0;

sub new {
 my $Objekt = shift;
 my $Version = shift;
 my $Referenz = {};
 bless($Referenz,$Objekt);
 $Objekte += 1;
 $Referenz->VCinit($Version);
 return($Referenz);
}

sub VCinit {
  my $Objekt = shift;
  my $Version = shift;
  $Objekt->{BEGIN} = "VCARD";
  $Objekt->{VERSION} = $Version;
  $Objekt->{END} = "VCARD";
}

sub VCset {
  my $Objekt = shift;
  my $Schluessel = shift;
  my $Wert = shift;
  $Objekt->{$Schluessel} = $Wert;
}

sub VCget {
  my $Objekt = shift;
  my $Schluessel = shift;
  return($Objekt->{$Schluessel});
}

sub VCsave {
  my $Objekt = shift;
  my $Datei = shift;
  open(DATEI, ">$Datei") or return(-1);
  print DATEI "BEGIN:VCARD\nVERSION:$Objekt->{VERSION}\n";
  while ((my $Schluessel, my $Wert) = each %{ $Objekt } ) {
    next if ($Schluessel eq 'BEGIN' or $Schluessel eq 'VERSION' or $Schluessel eq 'END');
    $Schluessel =~ s/_/\;/g;
    print DATEI "$Schluessel:$Wert\n";
  }
  print DATEI "END:VCARD\n";
  close(DATEI);
  return($Datei);
}

sub VCopen {
  my $Objekt = shift;
  my $Datei = shift;
  $Objekt->VCreset();
  open(DATEI, "<$Datei") or return;
  my @Zeilen = <DATEI>;
  close(DATEI);
  foreach (@Zeilen) {
   (my $Schluessel, my $Wert) = split(/:/);
    $Schluessel =~ s/\;/_/g;
    $Objekt->{$Schluessel} = $Wert;
  }
  return( %{ $Objekt } );
}

sub VCreset {
  my $Objekt = shift;
  %{ $Objekt } = ();
}

1;

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);
use VCard;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
print "<h1>Tests mit dem VCard-Objekt</h1>\n";

my $Thilo = VCard->new("3.0");
my $Ina = VCard->new("3.0");

print "<p><b>Wert der im Modul erzeugte Objekteigenschaft BEGIN:</b> $Ina->{BEGIN}<br>\n";
my $Sicherung = $Ina->{BEGIN};
$Ina->{BEGIN} = "fangen wir an";
print "<b>BEGIN nach der Wert&auml;nderung:</b> $Ina->{BEGIN}<br>\n";
$Ina->{BEGIN} = $Sicherung;
print "Da dies aber Unsinn ist, wurde der Wert wieder auf '$Ina->{BEGIN}' gesetzt.</p>\n";

$Thilo->VCset("FN","Thilo Teufel");
$Thilo->VCset("TEL_CELL_VOICE","(0170) 398373740");
$Ina->VCset("FN","Ina Bikina");
$Ina->VCset("EMAIL_PREF_INTERNET","bikina\@example.org");

print "<p><b>Name:</b> ",$Thilo->VCget('FN'),"<br>\n";
print "<b>Handy:</b> ",$Thilo->VCget('TEL_CELL_VOICE'),"</p>\n";
print "<p><b>Name:</b> ",$Ina->VCget('FN'),"<br>\n";
print "<b>Handy:</b> ",$Ina->VCget('EMAIL_PREF_INTERNET'),"</p>\n";
print "<p><b>Anzahl angelegter Objekte:</b> $VCard::Objekte </p>\n";

if(my $Datei = $Thilo->VCsave("/daten/vcard/teufel.vcf")) {
 print "<p>VCard von Thilo Teufel in <tt>$Datei</tt> gespeichert!<br>"
}
else {
 print "VCard von Thilo Teufel konnte nicht gespeichert werden!";
}
$Thilo->VCreset();
print "<p><b>Name von Thilo nach Objekt-Reset:</b> ",$Thilo->VCget('FN'),"<br>\n";
print "<b>Handy von Thilo nach Objekt-Reset:</b> ",$Thilo->VCget('TEL_CELL_VOICE'),"</p>\n";

if($Thilo->VCopen("/daten/vcard/teufel.vcf")) {
 print "VCard von Thilo Teufel wieder ge&ouml;ffnet!<br>";
 print "<p><b>Name von Thilo nach Datei&ouml;ffnen:</b> ",$Thilo->VCget('FN'),"<br>\n";
 print "<b>Handy von Thilo nach Datei&ouml;ffnen:</b> ",$Thilo->VCget('TEL_CELL_VOICE'),"</p>\n";
}
else {
 print "VCard von Thilo Teufel konnte nicht ge&ouml;ffnet werden!";
}

print "</body></html>\n";

Beispiel der erzeugten Datei teufel.vcf:

BEGIN:VCARD
VERSION:3.0
TEL;CELL;VOICE:(0170) 398373740
FN:Thilo Teufel
END:VCARD

Erläuterung:

Im Prinzip funktioniert dieses Beispiel genauso wie das Beispiel mit dem nach oben HTMLprint-Objekt - deshalb interessieren an dieser Stelle nur diejenigen Dinge, die anders sind als im ersten Beispiel.

Objektdaten (oder die Eigenschaften eines Objekts) sind Variablen. Es genügt jedoch nicht, solche Variablen einfach irgendwo in der Moduldatei zu deklarieren. Eine Variable wie der Skalar $Objekte, der im Beispiel zu Beginn der Moduldatei VCard.pm deklariert wird und als Zähler für Objektinstanzen dient, gehört nicht zu den Objektdaten! Solche Variablen sind so genannte Klassenvariablen, da sie nur einmal für die gesamte Klasse und für jede Objektinstanz zur Verfügung stehen. Da das Modul genau einmal im Hauptscript eingebunden wird, stehen diese Variablen auch nur in einer einzigen Ausführung zur Verfügung. Das Hauptscript kann mit der Syntax $VCard::Objekte sehr wohl auf den Wert des Skalars $Objekte zugreifen. Aber trotzdem gehört diese Variable nicht zum Objekt. Objektdaten sind vielmehr solche, die bei jeder neuen Instanz eines Objekts immer wieder neu zur Verfügung stehen.

Die einfachste Lösung für Objektdaten ist ein Seite Hash. In der Konstruktorfunktion new wird ein solcher Hash definiert - mit der Anweisung my $Referenz = {};. Viel zu sehen ist dabei nicht von einem Hash. Doch die leeren geschweiften Klammern symbolisieren einen leeren so genannten anonymen Hash. Dieser Hash ist damit eine Art leerer Behälter, der später Objektdaten aufnehmen kann. Der Grund dafür, dass man in der Regel einen Hash für Objektdaten wählt, ist der, dass ein Hash eine dynamische Anzahl von Daten speichern kann. Ein solcher Hash erlaubt es, Objektdaten sowohl im Modul selbst vorzudefinieren, wie auch Objektdaten im Hauptscript zu definieren (im obigen Beispiel passiert beides). Ein Array könnte das zwar theoretisch auch, aber dann wäre im Hauptscript die Suche nach einem gewünschten Objektdatum schwieriger. Hashes erleichtern den Direktzugriff auf Daten durch die benannten Schlüssel. Durch die Zuweisung des anonymen Hashes an einen Skalar - im Beispiel an $Referenz - wird dieser Skalar eine Seite Referenz, also ein Zeiger auf den anonymen Hash. Über diesen Zeiger ist der Zugriff auf den anonymen Hash möglich.

Objektdaten werden erzeugt, indem der zunächst anonyme Hash der Konstruktorfunktion mit Daten angefüllt wird. Im Beispiel geschieht das erstmals in der Subroutine bzw. Methode VCinit. Diese Methode wird bereits in der Konstruktorfunktion new aufgerufen, nämlich mit $Referenz->VCinit($Version);. Da $Referenz innerhalb der Konstruktorfunktion der Objektzeiger ist, können Sie dort über das Schema $Referenz->Methode() andere Subroutinen aufrufen, die dadurch an das Objekt gebunden werden. Durch diese Form des Aufrufs bekommen die Subroutinen auch stets automatisch als ersten Parameter einen Zeiger auf das Objekt übergeben, mit dem sie dann arbeiten können. So auch die Methode VCinit im Beispiel. Über den Objektzeiger, den sie sich mit my $Objekt = shift; aus der übergebenen Parameterliste holt, kann sie auf das Objekt und damit auch auf den anonymen Hash zugreifen.

Mit einer Anweisung wie $Objekt->{BEGIN} = "VCARD"; wird eine vorgegebene Objekteigenschaft erzeugt. $Objekt->{BEGIN} zeigt auf den anonymen Hash und sagt so viel wie: "hiermit erhält der anonyme Hash einen Schlüssel mit Namen BEGIN". Außerdem wird diesem Schlüssel bereits ein Wert zugewiesen, nämlich VCARD. Auf die gleiche Weise werden in VCinit insgesamt drei Objekteigenschaften erzeugt. Die beiden anderen heißen VERSION und END. Der Grund für diese Namen ist im Beispiel, dass diejenigen Namen von Eigenschaften als Schlüsselnamen verwendet werden, die eine Datei vom Typ .vcf enthalten können. Wie so eine Datei aussieht, sehen Sie in der dargestellten vom Beispiel erzeugten Datei teufel.vcf. Alle Zeilen einer VCard-Datei bestehen aus einer Eigenschaft und ihrem Wert, getrennt durch einen Doppelpunkt. Drei Zeilen sollten in jeder vcf-Datei vorkommen: BEGIN:VCARD, VERSION:[Versionsangabe] und END:VCARD. Für diese drei Standardzeilen werden im Beispiel die drei gleichnamigen Objekteigenschaften erzeugt.

Weitere Objekteigenschaften werden im Beispiel im Hauptscript erzeugt. Zunächst muss dazu wieder eine Instanz der VCard-Klasse erzeugt werden. Im Beispiel werden zwei Instanzen erzeugt:
my $Thilo = VCard->new("3.0");
my $Ina = VCard->new("3.0");
Beim Aufruf der Konstruktorfunktion wird die Versionsnummer für das gewünschte VCard-Format übergeben. Derzeit ist da die Version 3.0 zu notieren.

Nachdem die beiden Objektinstanzen angelegt sind, ist der Zugriff auf sämtliche Objektdaten möglich. Im Hauptscript wird dies zunächst mit dem Objekt für Ina demonstriert. Über den Objektzeiger $Ina ist es möglich, mit $Ina->{BEGIN} auf den Wert der Objekteigenschaft BEGIN zuzugreifen. Das Script zeigt auch, wie sich der Wert einer solchen vorgegebenen Objekteigenschaft ändern lässt. Das Konstrukt $Ina->{BEGIN} kann wie ein ganz normaler Skalar behandelt werden.
Da bei der objektorientierten Programmierung das Objekt eine abstrakte Einheit ist, dessen Interna Sie als Benutzer des Objekts eigentlich nichts angehen, sollten Sie darauf verzichten, direkt auf Objekteigenschaften zuzugreifen. Erstens ist nämlich nicht gesagt, dass bei einem (beliebigen) Objekt die Daten überhaupt in einem Hash gehalten werden, und zweitens kann sich die interne Datenhaltung über die verschiedenen Versionen des Moduls hinweg ändern.

Das Hauptscript erzeugt aber auch noch weitere neue Objekteigenschaften und versorgt diese mit Werten. Denn eine VCard-Datei soll ja diverse Adressdaten enthalten. Dies ist im Beispiel durch Aufruf der Methode VCset möglich, die in der Moduldatei definiert ist. Mit einer Anweisung wie:
$Thilo->VCset("FN","Thilo Teufel");
wird für das Objekt von Thilo eine neue Objekteigenschaft namens FN angelegt, die den Wert Thilo Teufel zugewiesen bekommt. Im Beispiel sehen Sie, dass sowohl das Objekt von Thilo als auch das Objekt von Ina die Objekteigenschaft FN erhalten, jeweils mit eigenen Werten. Daran ist sehr schön erkennbar, dass es sich tatsächlich um verschiedene Instanzen des Objekts VCard handelt, wobei jede Instanz ihre eigene Datenwelt hat, ohne dass es Kollisionen mit anderen gleichzeitig existierenden Objektinstanzen gibt.

Während der Aufruf der Methode VCset so weit gut nachvollziehbar ist, ist das, was in der Moduldatei innerhalb dieser Methode geschieht, nicht so leicht zu verstehen. Auch VCset bekommt - wie alle Methoden - als ersten Parameter automatisch den Objektzeiger übergeben. VCset tut nun nichts anderes, als mit $Objekt->{$Schluessel} = $Wert dem anonymen Hash des Objekts einen Schlüsselnamen und einen zugehörigen Wert hinzuzufügen. Beides, also den Schlüsselnamen und den Wert, erwartet die Methode als Parameter - daher auch die voranstehenden Anweisungen wie $Schluessel = shift;. Die Aufrufe dieser Methode im Hauptscript übergeben ja auch die geforderten beiden Parameter.

Die übrigen Methoden der Moduldatei sind ganz ähnlich aufgebaut. Sie übernehmen verschiedene Aufgaben, was man mit VCard-Daten so alles anstellen kann:
VCget liefert zu einem Schlüssel den zugehörigen Wert. Gut für Abfragen. Genaugenommen ist eine Abfrage im Hauptscript wie $Thilo->VCget('FN') das gleiche, als ob dort stehen würde $Thilo->{FN}. Entscheidungen, ob man solche Methoden braucht, gehören einfach zum Design eines Objekts. Um die Programmpflege zu erleichtern, sollten Sie jedoch immer Methoden dafür bereitstellen.
VCsave speichert die Daten eines Objekts in eine vcf-Datei nach dem VCF-Standard. Im Script wird diese Funktion einmal aufgerufen und schreibt dabei die Datei teufel.vcf, deren Inhalt ja dargestellt ist.
VCopen liest eine beliebige VCF-Datei und speichert deren Inhalt im zugeordneten Objekt. Diese Methode können Sie also etwa verwenden, wenn Sie existierende VCF-Dateien haben, z.B. durch Export aus den Adressdaten eines VCard-fähigen E-Mail-Programms. VCreset löscht alle Daten eines Objekts. Es stellt also den Ursprungszustand des anonymen Hashes wieder her. Benötigt wird diese Methode innerhalb der Moduldatei von VCopen. Aber Sie können diese Methode natürlich auch aus dem Hauptscript aufrufen, um eine Objektinstanz wieder in ihren jungfräulichen Zustand zu versetzen. Im Hauptscript des obigen Beispiels wird dies am Objekt von Thilo demonstriert.

Wenn Sie das VCard-Objekts des Beispiels in der Praxis einsetzen wollen, müssen Sie die VCard-Eigenschaftsnamen kennen. Diese sind beim Internet Mail Consortium dokumentiert. Wichtig ist, dass Sie ein Semikolon immer durch Unterstrich ersetzen. So wird eine VCard-Eigenschaft wie TEL;CELL;VOICE bei einem Methodenaufruf wie VCset als TEL_CELL_VOICE notiert. Einige der möglichen VCard-Eigenschaften enthalten auch noch andere Zeichen wie = und -. Um diese korrekt zu verarbeiten, müssen Sie die Methoden VCopen und VCsave des Objekts vermutlich noch erweitern, worauf im Beispiel der Einfachheit halber verzichtet wurde.

nach oben
weiter | Seite CGI-typische Aufgaben in Perl
zurück | Seite Tokens
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Sprachelemente / CGI-typische Aufgaben in Perl

SELFHTML

CGI-typische Aufgaben in Perl
Informationsseite

nach unten CGI-typische Lösungen in Perl
nach unten Counter (Zugriffszähler)
nach unten Form-Mailer
nach unten Gästebuch
nach unten Datenbank-Front-End
nach unten

CGI-typische Lösungen in Perl

Perl wurde, anders als etwa Seite PHP oder Seite ASP, nicht speziell für Web-Anwendungen konzipiert, sondern als eine offene Programmiersprache für scriptbasierte Lösungen aller Art. Es hat jedoch Eigenschaften, die es als Sprache für CGI-Scripts qualifizieren: dazu gehören die mächtigen Funktionen für Zeichenkettenverarbeitung und Datei-Handling, aber auch die vielen Unix-spezifischen Funktionen, von denen auch in Perl geschriebene CGI-Scripts, die auf typischen Web-Server-Umgebungen wie Linux und Seite Apache zum Einsatz kommen, profitieren können. Durch das Modulkonzept von Perl gibt es mittlerweile außerdem Module, die sich speziell für die Verwendung in CGI-Scripts anbieten - allen voran das Seite CGI-Modul, das bei jeder Standard-Installation von Perl zur Verfügung steht. Mit den Möglichkeiten dieses Moduls sollten Sie sich auf jeden Fall näher befassen, wenn Sie CGI-Scripts schreiben.

Wenn Sie noch unsicher sind in Perl und sich nicht in der Lage sehen, eine CGI-Anwendung von Grund auf nach eigenen Vorstellungen zu programmieren, dann können Sie auf zahlreiche Scripts zurückgreifen, die im Web verfügbar sind. Es gibt viele Anbieter, die Freeware-Scripts oder Shareware-Scripts zur Verfügung stellen. Um ein solches Script auf Ihrem Server oder in Ihrer lokalen HTTP-Umgebung zum Laufen zu bekommen und die Anwendung so zu gestalten, dass sie Ihren Vorstellungen entspricht, müssen Sie sich allerdings mit dem Quelltext des Scripts auseinandersetzen und die angewendete Programmierlogik des fremden Script-Entwicklers nachvollziehen können. Wenn Sie Glück haben, ist das Script Ihrer Wahl sauber dokumentiert, und es ist nicht schwer, es für eigene Zwecke anzupassen. Häufig allerdings stoßen Sie in solchen Scriptarchiven auch auf völlig veraltete Angebote! Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie eine Übersicht mit Anbietern fertiger CGI-Scripts in Perl und anderen Sprachen:

Online-Seite SELFHTML-Linkverzeichnis: CGI/Perl

Im folgenden werden einige typische Anwendungsgebiete von CGI-Scripts angeschnitten. Es wird beschrieben, wie der prinzipielle Programmablauf eines entsprechenden Scripts aussieht, und welche Perl-Bestandteile dazu erforderlich sind. Die Beschreibungen enthalten Verweise zu den Stellen, an denen Sie weitere Details finden.

Counter (Zugriffszähler)

Ein Counter ist entweder grafisch oder textbasiert. Bei einem grafischen Counter wird das CGI-Script aus HTML heraus mittels eines <img>-Tags aufgerufen - Beispiel (HTML):

<img src="/cgi-bin/counter.pl" alt="Counter">

Bei einem textbasierten Counter geschieht der Aufruf meistens mit Hilfe von Seite Server Side Includes - Beispiel (HTML):

<!--#exec cgi="/cgi-bin/counter.pl"-->

Das aufgerufene Script muss dann zuerst die Datei mit dem aktuellen Zählerstand auslesen, den Zählerstand um 1 erhöhen und den neuen Zählerstand wieder in die Datei zurückschreiben. Dafür gibt es in Perl die Seite Funktionen für Ein-/Ausgabe und Lesen/Schreiben von Daten. Wenn es ein textbasierter Counter ist, kann das Script den Zählerstand z.B. mit einem HTTP-Header mit dem Seite MIME-Typ text/html ausgeben, der die Zahl an der Stelle der Server-Side-Include-Anweisung einfügt. Bei einem grafischen Counter muss das Script eine Grafik vom Typ GIF, PNG oder JPEG zurückgeben, da der Browser im <img>-Tag etwas Entsprechendes erwartet. PNG-Grafiken lassen sich dynamisch mit Perl beispielsweise mit dem Seite CPAN-Modul namens GD erzeugen.

Form-Mailer

Ein Form-Mailer löst das leidige mailto-Problem bei HTML-Formularen. Ein solches Script kann ein beliebiges HTML-Formular verarbeiten und sendet die Daten per E-Mail an einen vorgesehenen Empfänger, in der Regel den Anbieter des Web-Projekts. In HTML wird das Form-Mail-Script einfach als action-Attribut im HTML-Formular angegeben - Beispiel:

<form action="/cgi-bin/formmail.pl" method="post">

Das Script wird aufgerufen, wenn ein Anwender das Formular absendet. Das Script sollte die Seite Formularverarbeitung mit dem CGI-Modul nutzen, um die übergebenen Formulardaten einzulesen. Anschließend muss es aus den Daten des Formulars eine E-Mail zusammenbauen. Dazu sind vor allem der Seite Operator für Zeichenkettenverknüpfung und die Seite Funktionen für Zeichenketten von Bedeutung, ferner aber auch Wissen über den Aufbau einer E-Mail und darüber, wie eine E-Mail zu versenden ist. Die typische Anweisungsfolge dazu lautet:

my $Sendmail_Prog = "/usr/lib/sendmail";
open(MAIL,"|$Sendmail_Prog -t") or die "Mailprogramm konnte nicht gestartet werden\n";
print MAIL "To: $mailto\n";
print MAIL "Subject: $subject\n\n";
print MAIL "$mailtext\n";
close(MAIL) or die "Fehler beim E-Mail-Versand!";

Wichtig ist bei Anwendung der Seite open-Funktion, dass das Programm sendmail, das E-Mails versenden kann, auch tatsächlich verfügbar ist, und zwar unter dem angegebenen Pfad. Der Pfad im Beispiel und die Verfügbarkeit von sendmail beziehen sich auf typische Unix-Rechner. Fragen Sie Ihren Provider gegebenenfalls danach! Die E-Mail selbst wird dann, wie Sie dem Beispiel entnehmen können, mit print-Anweisungen in den bei open benannten Ein-/Ausgabekanal des sendmail-Programms geschrieben - im Beispiel der Kanal mit dem Namen MAIL. Wichtig ist, dass eine E-Mail eine erste Zeile mit To: beginnend und eine weitere mit Subject: beginnend enthält. Vor der Ausgabe des E-Mail-Textes, also der zuvor für die Ausgabe vorbereiteten Formulardaten, müssen zwei Steuerzeichen \n\n stehen, also eine Leerzeile. Die Art und Weise der Datenübergabe kann variieren. Schauen Sie auf jeden Fall in die Anleitungen und FAQs Ihrers Providers und ggf. in die Anleitung des E-Mail-Programms!

Neben dem E-Mail-Versand muss das Script natürlich auch noch eine Seite CGI-notwendige Ausgabe an den Browser senden. Bei einem Form-Mailer ist das sinnvollerweise eine Dank-Seite, die dem Anwender bestätigt, dass sein Formular verarbeitet wurde.

Im Online-Angebot von SELFHTML aktuell finden Sie einen Online-Seite Artikel: Einfacher Form-Mailer, der ein vollständiges Beispiel eines Form-Mailers beschreibt.

Gästebuch

Es gibt mehrere Wege, ein Gästebuch zu programmieren. Einer besteht darin, die Gästebucheinträge in eine statische HTML-Datei schreiben zu lassen, die angezeigt wird, wenn der Anwender das Gästebuch aufruft. Die Datei könnte ein Formular enthalten, in das der Anwender seinen eigenen Eintrag schreiben kann, sowie die bereits vorhandenen Einträge. Das Script, das das Gästebuch verwaltet, würde dann aufgerufen, wenn der Anwender das Formular mit einem eigenen Eintrag absendet. Dazu ist im einleitenden <form>-Tag ein entsprechender Aufruf notiert - Beispiel:

<form action="/cgi-bin/guestbook.pl" method="post">

Das Script sollte die Seite Formularverarbeitung mit dem CGI-Modul nutzen, um die übergebenen Formulardaten einzulesen. Angenommen, das Formular hat zwei Felder: eines für den Namen des Gästebuchschreibers (name="Username"), und eines für den Text (name="Usertext"). Dann wäre nach dem Einlesen mit dem CGI-Modul in Perl beispielsweise mit einem Konstrukt wie $cgi->param($Username) ein Zugriff auf den Inhalt des Feldes Username möglich.

Weiterhin muss das Script die HTML-Datei mit den bisherigen Einträgen einlesen. Mit der Seite open-Funktion beispielsweise lässt sich die Datei dann öffnen und kann danach etwa in einen Seite Array eingelesen werden. Jedes Element des Arrays ist dann eine Zeile der HTML-Datei.

Damit das Script sich im eingelesenen HTML-Code zurechtfindet und weiß, wo es die neuen Daten einfügen muss, sollte die Datei an der betreffenden Stelle in einer eigenen Zeile eine "geheime Marke" enthalten, was mit einem HTML-Kommentar lösbar ist - Beispiel:

<!-- NEU -->

Es macht aber auch Sinn, wenn die HTML-Datei vor jedem vorhandenen Eintrag in einer eigenen Zeile noch eine interne Notiz für das Script bereithält. Auch das ist mit Kommentaren möglich. Beispiel eines Eintrags in der HTML-Datei:

<!-- EINTRAG [Winfried Wachtelmann] [27.07.2001]-->
<table border="1"><tr>
<th>von:</th><td>Winfried Wachtelmann</td>
<th>am:</th><td>27.07.2001</td>
</tr><tr>
<td colspan="2">Diese wunderbare Seite hat mein Leben ver&auml;ndert usw.</td>
</tr></table>

Das Script tut sich dann leichter mit eventuellem Suchen in der Datei. Um die Formulardaten, die das Script übergeben bekommen und eingelesen hat, einzufügen, muss es aus den Formulardaten erst einmal den für einen Gästebucheintrag üblichen HTML-Code zusammenbauen und die Formulardaten darin einfügen. Im Beispiel würde das Script also eine HTML-Tabelle zusammen- und in den dafür vorgesehenen Zellen die Werte aus den Formulardaten einbauen. Am sinnvollsten ist es, wenn das Script dazu einen Array deklariert und diesem für jede Zeile des HTML-Codes ein Element zuweist mit dem entsprechenden HTML-Code. Am Ende jedes Eintrags im Array sollte ein \n für "neue Zeile" stehen. Dazu benötigen Sie die Funktion Seite push und den Seite Operator für Zeichenkettenverknüpfung - Beispiel:

my @NeuerEintrag;
push(@NeuerEintrag, "<!-- EINTRAG [".$cgi->param($Username)."] [".$Datum."]-->\n");
push(@NeuerEintrag, "<table border=\"1\"><tr>\n");
push(@NeuerEintrag, "<th>von:</th><td>".$cgi->param($Username)."</td>\n");
push(@NeuerEintrag, "<th>am:</th><td>".$Datum."</td>\n");
push(@NeuerEintrag, "</tr><tr>\n");
push(@NeuerEintrag, "<td colspan=\"2\">".$cgi->param($Usertext)."</td>\n");
push(@NeuerEintrag, "</tr></table>\n");

Das in $Datum gespeicherte Tagesdatum muss das Script natürlich zuvor ermitteln. Dazu gibt es die Seite Funktionen für Datum und Uhrzeit.

Nun muss das Script den neuen Eintrag einfach an der Stelle in der bisherigen Datei einfügen, wo mit <!-- NEU --> die Marke zum Einfügen steht. Eine mögliche Variante ist es, einen neuen Array zu bauen, der aus den Zeilen der alten Datei und den Zeilen des neuen Eintrags besteht. Dazu kann das Script in einer Seite foreach-Schleife den Array mit den Zeilen der eingelesenen Datei abarbeiten und mit Hilfe eines Seite regulären Ausdrucks nach /^<!-- NEU -->$/ suchen und an der betreffenden Stelle den Array mit dem neuen Eintrag einfügen. Der Code könnte etwa so aussehen:

my @NeueZeilen;
my $Zeile;
foreach $Zeile (@Zeilen) {               # @Zeilen = zuvor eingelesene Zeilen der Datei
  if($Zeile =~ /^<!-- NEU -->/) {        # Aha, Eintrag hier einfügen
    foreach(@NeuerEintrag) {             # @NeuerEintrag = zuvor zusammengebaute HTML-Zeilen
      push(@NeueZeilen,$_);              # Zeile für Zeile hinzufügen
    }
    push(@NeueZeilen,"<!-- NEU -->\n");  # fürs nächste mal ...
  }
  else {                                 # jede alte Zeile, die nicht /^<!-- NEU -->/ enthält
    push(@NeueZeilen,$Zeile);            # einfach in den neuen Array kopieren
  }
}

Der neue Array @NeueZeilen enthält dann also die Zeilen der neuen Fassung der Gästebuch-HTML-Datei. Dieser Array muss nun einfach noch in die gleiche Datei zurückgeschrieben werden, die zuvor eingelesen wurde. Das geht mit schreibendem Öffnen mit Seite open und Beschreiben mit Seite print ins Datei-Handle der geöffneten Datei.

Am Ende darf das Script natürlich nicht vergessen, Seite CGI-notwendige Ausgaben an den Browser zu senden. Am einfachsten ist es wohl, einfach einen HTTP-Kopf und @NeueZeilen auszugeben. Das sind zwei print-Befehle, und schon sieht der Anwender, der das Formular abgesendet hat, das Gästebuch mit seinem eigenen neuen Eintrag.

Natürlich gibt es noch viele weitere wichtige Dinge, die das Gästebuch erledigen sollte. Beispielsweise sollten Dateien, die ein CGI-Script öffnet, grundsätzlich gegen versehentlichen Mehrfachzugriff geschützt werden - denn es könnten ja zwei Anwender gleichzeitig ein Formular mit einem neuen Eintrag absenden. Dann würden sich zwei Prozesse mit dem gleichen Script in die Quere kommen. Das so genannte File-Locking für den Zugriffsschutz geht mit der Funktion Seite flock.
Weiterhin sollte das Script reagieren, wenn die HTML-Datei mit den Gästebucheinträgen zu groß wird. In diesem Fall könnte das Script einen Teil des Arrays mit älteren Einträgen in eine zweite Datei schreiben und diese in der Datei mit den aktuellen Einträgen verlinken, d.h. also in die erste Datei einen HTML-Link auf die zweite mit einbauen.
Und dann sollte das Script auch prüfen, ob eventuell angegebene mail-Adressen gültig (valide) sind und Benutzernamen nicht aus unsinnigen Zeichenfolgen wie @~Der Kobold~@ bestehen. Solche Aufgaben lassen sich am besten mit Seite regulären Ausdrücken innerhalb Seite bedingter Anweisungen lösen.

Datenbank-Front-End

Sie brauchen nicht für jede Anwendung, bei der ein Web-Seitenbesucher dynamisch Daten abfragen kann, eine Datenbank. Datenbestände von bis zu ein paar Megabyte Größe, die nicht zu intensiv genutzt werden, lassen sich durchaus auch in Textdateien (z.B. kommasepariert oder in einer Kapitel XML-Struktur) halten, die dann mit CGI-Scripts in Perl verwaltet werden können. Ein öffentliches "Front-End" (also eine Web-Anwendung) zum Abfragen des Datenbestandes sowie ein nur intern zugängliches Front-End zum Verwalten des Datenbestandes (auch eine Web-Anwendung, die das Hinzufügen, Ändern und Löschen von Datensätzen mittels Formular möglich macht) brauchen Sie sowieso in jedem Fall. Eine richtige Datenbank sollten Sie dann wählen, wenn der Datenbestand sehr intensiv gepflegt wird (sehr viele Änderungen im Datenbestand - ein Fall für "Table-Locking"), oder wenn die Datenstruktur sehr stark relational ist und mit vielen Lookups arbeitet, oder wenn der Datenbestand wirklich sehr groß ist und die Pi-mal-Daumen-Größe von ein paar Megabyte übersteigt. Auf dem Server muss dann natürlich eine entsprechende Datenbank-Software installiert sein - z.B. das beliebte Freeware-Produkt MySQL. Letzteres ist mittlerweile so dominant im Web, dass es für relationale Datenbanken bis zu mittlerer Größe praktisch konkurrenzlos ist. Fragen Sie gegebenenfalls Ihren Provider, ob Ihnen MySQL dort, wo Sie Speicherplatz im WWW gemietet haben, zur Verfügung steht, bzw. berücksichtigen Sie dies bei der Wahl des Providers, wenn Sie eine Datenbankanbindung brauchen. MySQL wird zwar vorwiegend gemeinsam mit Seite PHP genutzt, aber über Perl ist es genauso möglich, Datenbank-Front-Ends zu schreiben, die mit MySQL kommunizieren können.

Bevor Sie ein Datenbank-Front-End in Perl schreiben, müssen Sie sich zuerst intensiv mit MySQL, Datenbankschnittstellen und der Abfragesprache SQL auseinandersetzen. Dazu gibt es Dokumentationen und Bücher. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie entsprechende Links:

Online-Seite SELFHTML-Linkverzeichnis: Datenbankanbindung

Dieser kurze Abschnitt hier kann nur einige allgemeine Details aus Sicht von Perl behandeln. In einem Perl-CGI-Script, das mit einer MySQL-Datenbank kommunizieren möchte, müssen zu Beginn Zeilen wie die folgenden stehen:

use CGI;
use DBI;

my $DB_NAME = "Produkte";
my $DB_DSN = "DBI:mysql:database=$DB_NAME";
my $DB_USER = "";
my $DB_PASSWD = "";

my $dbh = DBI->connect($DB_DSN, $DB_USER, $DB_PASSWD) or die "Fehler bei Datenbankverbindung: $!";

DBI ist ein Seite CPAN-Modul, das Sie in der Regel benötigen, um mit Perl auf Datenbanken zugreifen zu können. Es stellt eine datenbankunabhängige Schnittstelle zu verschiedenen datenbankabhängigen Treibern dar. Ihr Perl-Script kommuniziert also mit der Datenbank in der Form, dass es die Funktionen bzw. Methoden des DBI-Moduls nutzt.

Im Beispiel-Code deklariert das Script einige Skalare, die für das Modul und die Zusammenarbeit mit der Datenbank erforderlich sind. $DB_NAME ist der Name der Datenbank. DB_DSN ist eine Information für das DBI-Modul, welcher Treiber zum Verbindungsaufbau mit der Datenbank (im Beispiel: mysql) benutzt und welche Datenbank geöffnet werden soll (im Beispiel die Datenbank, die in $DB_NAME gespeichert ist). Da der SQL-Server von MySQL, der die Datenbankzugriffe und die Ausgabe an extern aufrufende Prozesse überwacht, Daten aus Datenbanken nur gegen Anmeldung mit Benutzerkennwort und Passwort herausrückt, sind diese ebenfalls bei der Datenbankverbindung anzugeben. Im Beispiel erhalten die entsprechenden Skalare $DB_USER und $DB_PASSWD einen leeren Inhalt zugewiesen. Bei autorisierter Nutzung einer Datenbank müssen Sie dort jedoch die Kenndaten eingeben.

Mit DBI->connect(...) wird die Verbindung zur Datenbank aufgebaut. Der Rückgabewert wird in einer Datenbank-Handle-Variablen gespeichert, im Beispiel $dbh. Über dieses Handle können Sie im weiteren Verlauf des Scripts die Funktionen bzw. Methoden des DBI-Moduls ansprechen, wie in diesem Beispiel:

my @DB_Felder = $dbh->list_fields('produktdaten');
$dbh->disconnect;

list_fields ermittelt die Feldnamen einer bestimmten Tabelle der Datenbank, im Beispiel die der Tabelle produktdaten. Mit $dbh->disconnect wird eine Datenbankverbindung am Ende wieder geschlossen. Die eigentliche Kommunikation mit der Datenbank erfolgt jedoch über entsprechende SQL-Befehle. Das folgende Beispiel zeigt, wie Sie in einem Perl-Script einen solchen Befehl notieren können und eine anschließende Datenbankabfrage starten:

my $SQL_Statement = "SELECT nummer, name, beschreibung FROM produktdaten ".
                    "WHERE produktdaten.nummer >= ".$cgi->param($von_Nummer).
                    " AND produktdaten.nummer <= ".$cgi->param($bis_Nummer).
                    " ORDER BY ".$cgi->param($sortier_feld);

my $Abfrage = $dbh->prepare($SQL_Statement);
$Abfrage->execute();

my @Datensatz;
while(@Datensatz = $Abfrage->fetchrow_array()) {
  DatensatzVerarbeiten(@Datensatz);
}

Für die Datenbankabfrage müssen Sie einen SQL-Befehl zusammenstellen und in einem Skalar speichern. Dazu müssen Sie die Syntax von SQL kennen. Normalerweise wird es so sein, dass Ihr CGI-Script wie im Beispiel die Parameter der Abfrage aus einem HTML-Formular bezieht, das der Anwender, der das Script mit dem Absenden des Formulars aufgerufen hat, ausgefüllt hat. Dazu sollte das Script die Seite Formularverarbeitung mit dem CGI-Modul nutzen, um die übergebenen Formulardaten einzulesen. Eine dynamische Konstruktion eines SQL-Befehls aus Formulardaten ist dann wie gezeigt mit dem Seite Operator für Zeichenkettenverknüpfung möglich. Anschließend wird mit $Abfrage = $dbh->prepare($SQL_Statement) dem DBI-Modul der Abfragewunsch mitgeteilt. Und danach kann dann mit $Abfrage->execute() der Abfragebefehl gestartet werden. Die Datenbank gibt nun der Reihe nach alle gefundenen Datensätze zurück. Jeder Datensatz besteht aus mehreren Feldern. Jeder Datensatz wird einzeln als Seite Array zurückgegeben. In einer Seite while-Schleife, die so lange läuft, wie der Aufruf von $Abfrage->fetchrow_array() einen neuen Datensatz liefert, wird im Beispiel eine Seite Subroutine namens DatensatzVerarbeiten aufgerufen, die als Parameter den aktuellen Datensatz-Array übergeben bekommt. Diese Subroutine könnte beispielsweise den HTML-Code für die Ausgabe eines Datensatzes vorbereiten. Denn abschließend muss das Script natürlich Seite CGI-notwendige Ausgaben zusammenstellen.

Bei der Verwaltung der Datenbank über ein HTML-Formular/Perl-Script-Front-End ist der Vorgang ganz ähnlich, nur mit zusätzlichen SQL-Befehlen zum Hinzufügen oder Zurückschreiben geänderter Datensätze in die Datenbank. Wichtig ist, dass ein solches Front-End für die interne Datenbankpflege gegen öffentliche Zugriffe geschützt ist. Dies kann zweistufig geschehen: zum einen sollte ein solches Front-End-Formular nur in einem Seite htaccess-geschützten Verzeichnis liegen, und zum anderen sollte das Formular auch Eingabefelder für Benutzernamen und Passwort zum schreibenden Zugriff auf die Datenbank enthalten.

nach oben
weiter | Seite Funktionen für Zeichenketten
zurück | Seite Objektorientiertes Programmieren
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Sprachelemente

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Funktionen

SELFHTML

Perl-Funktionen
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Einführung in Perl und Kapitel Perl-Sprachelemente.
Dieser Abschnitt enthält eine thematisch orientierte Referenz aller wichtigen Funktionen, die Perl bereitstellt. Die einzelnen Funktionen werden jeweils mit einem Beispiel vorgestellt.
Der Abschnitt besteht aus folgenden Seiten:

Seite Funktionen für Zeichenketten
Seite Funktionen für Listen bzw. Arrays und Hashes
Seite Funktionen für Berechnungen
Seite Funktionen für die Kontrolle des laufenden Scripts
Seite Funktionen für Datum und Uhrzeit
Seite Funktionen für Ein-/Ausgabe und Lesen/Schreiben von Daten
Seite Funktionen für Datei- und Verzeichnis-Management
Seite Funktionen für Betriebssystemaufrufe
Seite Funktionen für Informationen aus Konfigurationsdateien
Seite Funktionen für Module und Packages

nach oben

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für Zeichenketten

SELFHTML

Funktionen für Zeichenketten
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten chomp - letztes Zeichen entfernen, sofern Separator
nach unten chop - letztes Zeichen entfernen
nach unten chr - Zeichen eines Zeichenwerts ermitteln
nach unten crypt - Zeichenkette verschlüsseln
nach unten index - erstes Vorkommen einer Teilzeichenkette in Zeichenkette suchen
nach unten lc - alle Zeichen einer Zeichenkette in Kleinbuchstaben umwandeln
nach unten lcfirst - erstes Zeichen einer Zeichenkette in Kleinbuchstabe umwandeln
nach unten length - Anzahl Zeichen einer Zeichenkette ermitteln
nach unten ord - Zeichenwert eines Zeichens ermitteln
nach unten pack - Binärdaten erzeugen
nach unten pos - Position der Anwendung von m/[regexp]/g auf Zeichenkette ermitteln
nach unten reverse - Zeichenkette von hinten nach vorn umwandeln
nach unten split - Zeichenkette in mehrere Zeichenketten aufsplitten
nach unten sprintf - Zeichenkette formatieren
nach unten substr - Teilzeichenkette aus Zeichenkette extrahieren
nach unten uc - alle Zeichen einer Zeichenkette in Großbuchstaben umwandeln
nach unten ucfirst - erstes Zeichen einer Zeichenkette in Großbuchstabe umwandeln
nach unten unpack - Binärdaten auflösen
nach unten

Allgemeines zu diesen Funktionen

Um die hier versammelten Funktionen zu verstehen, sollten Sie die allgemeinen Bemerkungen zu Seite Zeichenketten in Perl kennen.

chomp - letztes Zeichen entfernen, sofern Separator

Entfernt das letzte Zeichen aus einer Zeichenkette. Das kann vor allem bei der Weiterverarbeitung von Zeichenketten interessant sein, die ein Endekennzeichen haben, in der Regel ein Newline-Zeichen \n. Im Gegensatz zu der Funktion nach unten chop, die in jedem Fall das letzte Zeichen entfernt, egal um was es sich handelt, entfernt die Funktion chomp nur solche Zeichen, die in der Seite vordefinierten Variablen $/ enthalten sind. Per Voreinstellung ist in dieser Variablen nur das Newline-Zeichen \n gespeichert. Sollte eine Zeichenkette also nicht mit diesem Sonderzeichen enden, passiert bei Anwendung von chomp im Gegensatz zu chop gar nichts.

Erwartet als Parameter:
1. die Liste von Zeichenketten, auf welche die Funktion angewendet werden soll. Statt einer Liste kann auch eine einzelne Zeichenkette bzw. ein Skalar mit einer Zeichenkette übergeben werden.

Gibt die Anzahl der Zeichen zurück, die insgesamt entfernt wurden.

Beispiel - Teil 1 (Datei boot.ini):

[boot loader]
timeout=30
default=multi(0)disk(0)rdisk(0)partition(1)\WINNT
[operating systems]
multi(0)disk(0)rdisk(0)partition(1)\WINNT="Microsoft Windows XP Professional" /fastdetect

Beispiel - Teil 2 (vollständiges CGI-Script in Perl):

#!C:/Programme/Perl/bin/perl.exe -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

open(BOOTINI, "<c:/boot.ini") || die "Fehler aufgetreten: $!";
my @Zeilen = <BOOTINI>;
close(BOOTINI);
chomp(@Zeilen);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<pre>\n";
print "@Zeilen";
print "</pre>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel zeigt im ersten Teil eine typische zeilenweise Textdatei, hier eine boot.ini, wie man sie auf NT-basierten Windows-Systemen (von Windows NT bis Windows XP) vorfindet. Im CGI-Script des Beispiels wird die Datei in den Seite Array @Zeilen eingelesen. Anschließend wird die Funktion chomp auf den Array @Zeilen angewendet. Dadurch wird von jeder Zeile das beendende Newline-Zeichen entfernt. Zur Kontrolle gibt das Script am Ende HTML-Code aus. Innerhalb eines <pre>-Bereichs, in dem alles so ausgegeben wird, wie es notiert ist, wird die Liste @Zeilen ausgegeben. Da alle Newline-Zeichen entfernt wurden, erscheinen die Einträge der Liste nicht mehr als separate Zeilen, sondern in einer druchgehenden Zeichenfolge.

Beachten Sie:

In diesem Beispiel wird davon ausgegangen, dass Sie das Script auf einem Windows-Rechner einsetzen wollen. Aus diesem Grund muss auch die Seite erste Zeile des Perl-Scripts einen Pfad zum Perl-Interpreter aufweisen, der auf einem Windows-System gütig ist.

chop - letztes Zeichen entfernen

Entfernt das letzte Zeichen aus einer Zeichenkette. Im Gegensatz zu nach oben chomp entfernt chop in jedem Fall das letzte Zeichen, egal, worum es sich handelt.

Erwartet als Parameter:
1. eine Variable, auf die die Funktion angewendet werden soll. Alternativ kann auch eine Liste übergeben werden. Wird eine Liste übergeben, gibt chop das abgeschnittene Zeichen des letzen Listenelementes zurück.

Gibt das abgeschnittene Zeichen zurück.

chr - Zeichen eines Zeichenwerts ermitteln

Ermittelt zu einem numerischen Wert das zugehörige Zeichen. Darstellbar sind größtenteils allerdings nur die Zeichen mit Zeichenwerten höher als 32, da die darunterliegenden Zeichen so genannte Steuerzeichen sind, die in der Regel nicht am Bildschirm darstellbar sind.
Die Gegenfunktion ist nach unten ord.

Erwartet als Parameter:
1. den gewünschten Zeichenwert als Zahl.

Gibt das zugehörige Zeichen zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<table border=\"1\" bgcolor=\"#FFFFE0\">\n";
my $Zeichenwert = 0;
my $ASCII_Zeichen = "";
for(my $i=0;$i<16;$i++) {
   print "<tr>\n";
   for(my $j=0;$j<8;$j++) {
      $ASCII_Zeichen = chr($Zeichenwert);
      print "<td>$Zeichenwert = $ASCII_Zeichen</td>\n";
      $Zeichenwert++;
   }
   print "</tr>\n";
}
print "</table>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel erstellt in zwei ineinander verschachtelten Seite for-Schleifen eine HTML-Tabelle mit 16 Zeilen zu je 8 Spalten. In jeder der dadurch entstehenden 128 Zellen wird ein ASCII-Zeichen und dessen Zeichenwert ausgegeben. Dazu wird jeweils vor dem Schreiben der aktuellen Tabellenzelle die Funktion chr auf den aktuellen Stand des Skalars $Zeichenwert angewendet, der bei jedem inneren Schleifendurchgang um 1 erhöht wird und durch die beiden Schleifen der Reihe nach alle Zahlen zwischen 0 und 127 annimmt. Der Rückgabewert, also das ASCII-Zeichen, wird jeweils in dem Skalar $ASCII_Zeichen gespeichert. Beide Skalare werden in jeder Tabellenzelle ausgegeben, sodass die Zuordnung zwischen Zeichenwert und ASCII-Codetabelle deutlich wird.

crypt - Zeichenkette verschlüsseln

Mit dieser Funktion können Sie eine Zeichenkette verschlüsseln. Dazu wird die Zeichenkette selbst sowie eine zweite Zeichenkette benötigt, die als "Salz in der Suppe" (engl. salt) dient.
Die Funktion crypt leistet nur eine einseitige Verschlüsselung. Eine entsprechende Entschlüsselungsmethode ist nicht bekannt. crypt ist daher nicht geeignet, um Kodier- und Dekodierverfahren zu realisieren.
crypt entspricht dem gleichnamigen Systemprogramm unter Unix und der gleichnamigen Funktion in C. Im Zusammenhang mit Web-Seiten wird crypt beispielsweise beim Seite Verzeichnisschutz mit .htaccess verwendet, um die Passwörter berechtigter Zugänge verschlüsselt zu speichern.

Erwartet als Parameter:
1. die Zeichenkette, die verschlüsselt werden soll.
2. das "Salz in der Suppe", eine Zeichenkette, die aus zwei frei wählbaren Zeichen bestehen sollte.

Gibt die verschlüsselte Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-script Anzeigebeispiel: So sieht's aus - mit dem string "Stefan+kn" als Übergabeparameter
(Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Input = $ENV{'QUERY_STRING'};
my ($String, $Salt) = split(/\+/,$Input);
my $CryptString = crypt($String,$Salt);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "die Zeichenkette <b>$String</b> lautet verschl&uuml;sselt: <b>$CryptString</b>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel-CGI-Script erwartet einen Übergabeparameter, der beim Aufruf über URI hinter einem Fragezeichen notiert wird. Der Übergabeparameter besteht aus der zu verschlüsselnden Zeichenkette und dem "Salz in der Suppe", getrennt durch ein Pluszeichen. Beispiel:
http://localhost/cgi-bin/test.pl?Stefan+kn.

Das Beispiel-Script ermittelt den übergebenen Parameter aus der Seite CGI-Umgebungsvariablen QUERY_STRING und speichert den Wert im Skalar $input. Um den Übergabeparameter am Pluszeichen aufzusplitten (hier also die zu verschlüsselnde Zeichenkette und das "Salz in der Suppe" voneinander zu trennen), wird die Funktion nach unten split eingesetzt, die das Ergebnis in einer aus den beiden Skalaren $String und $Salt bestehenden Liste speichert. Anschließend wird die Funktion crypt angewendet, der die beiden Skalare als Parameter übergeben werden. Der Rückgabewert, also die verschlüsselte Zeichenkette, wird in dem Skalar $CryptString gespeichert. Zur Kontrolle gibt das Script die zu verschlüsselnde Zeichenkette und das Ergebnis der Verschlüsselung aus.

Beachten Sie:

crypt kann nur Zeichenketten mit maximal 8 Zeichen Länge verschlüsseln. Sollte die Zeichenkette länger sein, werden nur die ersten 8 Zeichen verschlüsselt.

index - erstes Vorkommen einer Teilzeichenkette in Zeichenkette suchen

Diese Funktion sucht in einer Zeichenkette nach einer beliebigen Teilzeichenkette, jedoch ohne reguläre Ausdrücke. Sie können also beispielsweise in einer Textzeile nach Sex-Appeal suchen, aber nicht nach Sex.*.

Erwartet als Parameter:
1. die Zeichenkette, in der gesucht werden soll,
2. die Zeichenkette, nach der gesucht werden soll,
3. (optional) die Zeichenposition, ab der gesucht werden soll, z.b. 8 für "ab dem 9. Zeichen". Wenn Sie den 3. Parameter weglassen, wird ab dem Beginn der Zeichenkette gesucht.

Gibt die Position des Zeichens zurück, an dem die gewünschte Teilzeichenkette gefunden wurde. Wenn sie nicht gefunden wurde, wird -1 zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Satz = "in diesem Satz ist von Liebe die Rede.";

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
if(index($Satz,"Liebe") >= 0) {
  print "in diesem Satz ist von Liebe die Rede\n";
}
else {
  print "in diesem Satz ist leider nicht von Liebe die Rede\n";
}
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert einen Skalar namens $Satz und weist ihm einen Wert zu. Das Script gibt HTML-Code aus. Mit der index-Funktion ermittelt es, ob in dem Skalar $Satz von Liebe die Rede ist. Dies ist der Fall, wenn der Rückgabewert der Funktion größer/gleich 0 ist. Im obigen Beispiel gelangt das Script in den if-Zweig, weil in dem durchsuchten Satz von Liebe die Rede ist.

lc - alle Zeichen einer Zeichenkette in Kleinbuchstaben umwandeln

Wandelt Großbuchstaben in Kleinbuchstaben um und lässt Kleinbuchstaben und alle anderen Zeichen unberührt. Die entsprechende Gegenfunktion für Großbuchstaben ist nach unten uc.

Erwartet als Parameter:
1. die Zeichenkette, die bearbeitet werden soll.

Gibt die bearbeitete Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!C:/Programme/Perl/bin/perl.exe -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

opendir(DIR, "C:/WINNT");
my @Eintraege = readdir(DIR);
closedir(DIR);
foreach my $Eintrag (@Eintraege) {
  $Eintrag = lc($Eintrag);
  $Eintrag = $Eintrag."\n";
}

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<pre>\n";
print "@Eintraege";
print "</pre>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel liest das auf PCs mit Betriebssystem Windows übliche Windows-Verzeichnis ein (Die entsprechenden Befehle dazu sind Seite opendir, Seite readdir) und Seite closedir. In diesem Verzeichnis befinden sich normalerweise jede Menge Dateien und Unterverzeichnisse, die achtlos Groß- und Kleinschreibung enthalten, zum Teil auch, weil sie zu alten 16-Bit-Programmen gehören. Auf jedes Element des Arrays @Eintraege, in den der Inhalt des Verzeichnisses eingelesen wurde, wird anschließend in einer Seite for-Schleife die Funktion lc angewendet. Der Rückgabewert wird in der gleichen aktuellen Schleifenvariable $Eintrag gespeichert, die auch als zu bearbeitende Zeichenkette übergeben wird.
Das Anhängen eines Newline-Zeichens innerhalb der gleichen for-Schleife ist nur für die folgende Ausgabe gedacht. Die Ausgabe erzeugt die gesamte eingelesene und bearbeitete Liste der Verzeichniseinträge. Alle Einträge enthalten nur noch Kleinbuchstaben.

Beachten Sie:

In diesem Beispiel wird davon ausgegangen, dass Sie das Script auf einem Windows-Rechner einsetzen wollen. Aus diesem Grund muss auch die Seite erste Zeile des Perl-Scripts einen Pfad zum Perl-Interpreter aufweisen, der auf einem Windows-System gütig ist.

lcfirst - erstes Zeichen einer Zeichenkette in Kleinbuchstabe umwandeln

Wandelt das erste Zeichen einer Zeichenkette in Kleinbuchstaben um, sofern es ein entsprechender Großbuchstabe ist. Die entsprechende Gegenfunktion für Großbuchstaben ist nach unten ucfirst.

Erwartet als Parameter:
1. die Zeichenkette, die bearbeitet werden soll.

Gibt die bearbeitete Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
my $Wort = "Textart";
print lcfirst($Wort);
print "</body></html>\n";

Erläuterung:

Das Beispiel gibt nur ein Wort aus. Bevor das Wort ausgegeben wird, wird allerdings die Funktion lcfirst darauf angewendet. Der führende Großbuchstabe wird dabei in einen Kleinbuchstaben verwandelt.

length - Anzahl Zeichen einer Zeichenkette ermitteln

Erwartet als Parameter:
1. die gewünschte Zeichenkette.

Gibt die Anzahl Zeichen in der Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus - ohne Übergabeparameter
Beispiel-Seite Anzeigebeispiel: So sieht's aus - mit dem String "http://www.selfhtml.org" als Übergabeparameter
(Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $URI = $ENV{'QUERY_STRING'};
my $Laenge = length($URI);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<a href=\"$URI\">$URI</a> hat eine Länge von $Laenge Zeichen!\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel-CGI-Script erwartet einen Übergabeparameter, der beim Aufruf über URI hinter einem Fragezeichen notiert wird. Der Übergabeparameter sollte selber einen URI enthalten. Beispiel:
http://localhost/cgi-bin/test.pl?http://www.selfhtml.org/.

Das Beispiel ermittelt mit length die Länge der übergebenen Adresse und gibt HTML-Code mit einem Link auf die Adresse mit Angabe der Zeichenzahl aus.

ord - Zeichenwert eines Zeichens ermitteln

Ermittelt zu einem Zeichen den zugehörigen Wert zwischen 0 und 127. Die Gegenfunktion ist nach oben chr.

Erwartet als Parameter:
1. das gewünschte Zeichen.

Gibt den zugehörigen Zeichenwert zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $MagischeZahl = "155";
my $Laenge = length($MagischeZahl);
my $Quersumme = 0;
for(my $i=0; $i<$Laenge; $i++) {
   my $Zeichen = substr($MagischeZahl, $i, 1);
   $Quersumme = $Quersumme + int(ord($Zeichen));
}

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Die Quersumme der ASCII-Werte der Zeichen der Zahl $MagischeZahl beträgt $Quersumme\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert eine "magische Zahl" 155. "Magisch" ist diese Zahl deshalb, weil sie aus den Zeichen "1", "5" und nochmal "5" besteht, und weil die Summe der Zeichenwerte dieser drei Zeichen 155 ergibt. Denn die 1 hat den Zeichenwert 49, und die 5 hat den Zeichenwert 53, und 49+53+53 ergibt 155. In einer Seite for-Schleife wird die Zahl Ziffer für Ziffer eingelesen. Das geht in Perl mit Hilfe der Funktion nach unten substr. Auf das jeweils eingelesene Zeichen wird die Funktion ord angewendet. Ihr Rückgabewert, also der Zeichenwert des verarbeiteten Zeichens, wird bei jedem Schleifendurchgang zu dem bisherigen Wert des Skalars $Quersumme hinzuaddiert. Das Script gibt zur Kontrolle ein entsprechendes Ergebnis als HTML-Code aus.

pack - Binärdaten erzeugen

Erzeugt eine binäre Datenstruktur aus einem oder mehreren Werten. Der Daten-Input kann selbst eine Zeichenkette, aber etwa auch eine Liste sein. Eine zusätzliche Formatierungsangabe dient dazu, das binäre Datenformat des zu erzeugenden Ergebnisses der Konvertierung genau zu steuern. Für die Formatierungsangabe steht eine spezielle Syntax zur Verfügung.
Die Funktion pack wird beispielsweise verwendet, um einer Datenbank Zeichenketten zu übergeben, innerhalb deren die Datenbank feste Feldlängen erwartet. Aber auch andere mächtige Konvertierarbeiten sind möglich. So lassen sich Daten mit Hilfe von pack etwa sehr einfach nach dem UUencode-Verfahren kodieren.

Erwartet als Parameter:
1. die Formatierungsangabe,
2. den Daten-Input - eine Zeichenkette oder eine Liste.

Gibt den erzeugten Wert zurück.

Beispiel 1 eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Datensatz_1 = ("Anna","Lyse","07.07.1977","w","Bau 21", "Zi 280","seit 03/1999 Team-Assistenz Marketing");
my @Datensatz_2 = ("Rainer","Zufall","29.02.1960","m","Bau 113", "Zi 11","Bereichsleiter Entwicklung");
my $Format = "A10 A14 A10 A1 A7 A7 A*";
my $Ausgabe_1 = pack($Format, @Datensatz_1);
my $Ausgabe_2 = pack($Format, @Datensatz_2);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<pre>\n";
print "$Ausgabe_1\n";
print "$Ausgabe_2\n";
print "</pre>\n";
print "</body></html>\n";

Erläuterung:

In dem Beispiel werden zunächst zwei Listen @Datensatz_1 und @Datensatz_2 mit gleichartigen Mitarbeiterdaten definiert. Die Felder eines Datensatzes sollen jeweils zu einer Zeichenkette verbunden werden, sodass sich diese beispielsweise als Zeile am Bildschirm ausgeben oder in eine Datei schreiben lässt. Dabei sollen jedoch die Felder immer an der gleichen Spaltenposition beginnen, so wie in der Ergebnisausgabe dargestellt. Um das zu erreichen, wird eine Zeichenkette namens $Format definiert. Sie definiert die Feldbreiten der einzelnen Datenfelder. Dazu benutzt sie die spezielle Syntax für pack-Formatierangaben. Weiter unten finden Sie eine nach unten Tabelle der Formatierangaben. Im Beispiel wird für das erste Feld (Vorname) mit A10 eine Breite von 10 Zeichen definiert, für das zweite Feld (Nachname) mit A14 eine Breite von 14 Zeichen, und so weiter für die übrigen Datenfelder. Das letzte Feld, die beschreibende Angabe, wird durch das Sternchen bei A* als "so breit wie der Inhalt des Feldes ist" definiert.
Anschließend wird zweimal die Funktion pack angewendet, einmal auf @Datensatz_1 und dann auf @Datensatz_2. In beiden Fällen wird die gleiche Formatierangabe, also $Format, benutzt. Der Räckgabewert wird in den Zeichenketten $Ausgabe_1 bzw. $Ausgabe_2 gespeichert. Diese beiden Zeichenketten werden zur Kontrolle als HTML-Ausgabe zum Browser gesendet. Wichtig ist dabei, die Ausgabe in einen <pre>-Bereich zu setzen, da nur dort die Spaltendarstellung sichtbar wird.

Beispiel 2 eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Satz = "In Münchner Biergärten gibt es Bier nur aus Maßkrügen";
my $UUE_Satz = pack("u", $Satz);

print "Content-type: text/plain\n\n";
print "Der Satz '$Satz' lautet UU-kodiert:\n$UUE_Satz";

Erläuterung:

Das Beispiel definiert einen Satz in dem Skalar $Satz. Auf diesen Skalar wird die Funktion pack angewendet. Als Formatierangabe wird dabei u übergeben. Dies bewirkt eine Kodierung nach dem UUencode-Verfahren. Das Ergebnis wird in dem neuen Skalar $UUE_Satz gespeichert. Zur Kontrolle wird ein entsprechender Text an den Browser gesendet. Der Beispielsatz erscheint in der UUencode-Kodierung als M26X@3?QN8VAN97(@0FEE<F?D<G1E ;B!G:6)T(&5S($)I97(@;G5R(&%U<R!- (8=]K<OQG96X`.

Tabelle der Formatierangaben:

Durch die Formatierangabe steuern Sie die Art, wie pack den Daten-Input behandelt.

Typ: Bedeutung: Beispiel: Erläuterung:
a[n] Erzeugt einen String aus 8-Bit-Zeichen und ist auch für binäre Daten geeignet. [n] ist eine Zahl für die Feldbreite. Ungenutzte Bytes werden mit Zeichenwert 0 (Hex-0) aufgefüllt. Überbreite Feldinhalte werden abgeschnitten. Anstelle einer Zahl ist auch * erlaubt. Dadurch richtet sich die Feldbreite nach dem Feldinhalt. @Mitarbeiter = ("03919","Hinkel");
$Ausgabe = pack("a5 a15", @Mitarbeiter); 		Ein Mitarbeiterdatensatz, bestehend aus einer Ausweisnummer und dem Namen, wird in eine Zeichenkette verwandelt.
A[n] | Erzeugt ASCII-Zeichen (Zeichenwerte 0-127) und ist daher für Textdaten geeignet. [n] ist eine Zahl für die Feldbreite. Ungenutzte Bytes werden mit Leerzeichen (Zeichenwert 32) aufgefüllt. Ansonsten wie a. | $Ausgabe = pack("A80", "kleine Zeile"); | Erzeugt wird eine Zeichenkette von 80 Zeichen Breite, auch wenn der Textinhalt deutlich kleiner ist. Die restlichen Zeichen sind Leerzeichen.
Z[n] | Erzeugt ASCII-Zeichen (Zeichenwerte 0-127) und ist daher für Textdaten geeignet. [n] ist eine Zahl für die Feldbreite. Ungenutzte Bytes werden mit Zeichenwert 0 (Hex-0) aufgefüllt. Außerdem wird der String in jedem Fall nullterminiert, d.h. das letzte Zeichen hat immer den Zeichenwert 0 (Hex-0). Ansonsten wie A. | $Ausgabe = pack("A80", "kleine Zeile"); | Erzeugt wird eine Zeichenkette von 80 Zeichen Breite, auch wenn der Textinhalt deutlich kleiner ist. Die restlichen Zeichen haben den Wert hexadezimal 0.
b[n] | Erzeugt einen Bit-String in aufsteigender Bitreihenfolge. Das letzte Bit jedes Bytes der Eingabe ergibt ein Bit der Ausgabe. Dabei wird das letzte 8-bit Tupel gegebenenfalls mit Nullen aufgefüllt. | $Ausgabe = pack("b8","Beispiel") | Erzeugt eine Zeichenkette von 8 Bit, also einem Byte Länge
B[n] | Erzeugt einen Bit-String in absteigender Bitreihenfolge. Arbeitet genauso wie b, dreht aber die Reihenfolge um. | $Ausgabe = pack("B8","Beispiel") | Erzeugt eine Zeichenkette von 8 Bit, also einem Byte Länge
c[n] Erzeugt Zeichen aus numerischen Angaben. Das kleine c steht für signed char, verarbeitet werden 8 Bit lange Ganzzahlen zwischen -128 und 127. [n] ist eine Zahl für die Anzahl Zeichen. Wenn Sie mehrere Zeichen auf einmal verarbeiten wollen, geben Sie die Anzahl der Zeichen an. Anstelle einer Zahl ist auch * erlaubt. Benutzen Sie den Platzhalter, wenn Sie eine unbestimmte Anzahl Zeichen verarbeiten wollen. @Zeichenwerte = (65,115,116,114,105,100);
$Ausgabe = pack("c6", @Zeichenwerte);
print "$Ausgabe"; 		Das Beispiel erzeugt eine Liste aus 6 Zahlen. Mit c6 werden alle 6 Zahlen in ihre Zeichenwerte (gemäß der ASCII-Codetabelle) umgewandelt und in der Zeichenkette $Ausgabe zusammengefügt.
C[n] Erzeugt Zeichen aus numerischen Angaben. Das große C steht für unsigned char, verarbeitet werden 8 Bit lange Ganzzahlen ohne Vorzeichen, also zwischen 0 und 255. Ansonsten wie c. @Zeichenwerte = (65,115,116,114,105,100);
$Ausgabe = pack("C6", @Zeichenwerte);
print "$Ausgabe"; 		siehe Erläuterung zu c.
s[n] Erzeugt Zeichen aus numerischen Angaben. Das kleine s steht für signed short. Verarbeitet werden dabei in Perl 16 Bit lange Ganzzahlen zwischen -32768 und 32767. Ansonsten wie c. @Werte = (-1000,1000);
$Ausgabe = pack("s2", @Werte);
print "$Ausgabe"; 		Das Beispiel erzeugt eine Liste aus 2 Zahlen. Mit s2 werden die Zahlen in Zeichen oder Zeichenkombinationen umgewandelt und in der Zeichenkette $Ausgabe zusammengefügt.
S[n] Erzeugt Zeichen aus numerischen Angaben. Das große S steht für unsigned short. Verarbeitet werden dabei in Perl 16 Bit lange Ganzzahlen zwischen 0 und 65535. Ansonsten wie s. @Werte = (1,1000);
$Ausgabe = pack("S2", @Werte);
print "$Ausgabe"; 		Das Beispiel erzeugt eine Liste aus 2 Zahlen. Mit S2 werden die Zahlen in Zeichen oder Zeichenkombinationen umgewandelt und in der Zeichenkette $Ausgabe zusammengefügt.
i[n] Erzeugt Zeichen aus numerischen Angaben. Das kleine i steht für signed integer. Verarbeitet werden dabei in Perl mindestens 32 Bit lange Ganzzahlen zwischen -2147483648 und 2147483647 (je nach Umgebung werden auch höhere Bitlängen und damit größere Zahlen verarbeitet). Ansonsten wie c. @Werte = (-100000,100000);
$Ausgabe = pack("i2", @Werte);
print "$Ausgabe"; 		Das Beispiel erzeugt eine Liste aus 2 großen Zahlen. Mit i2 werden die Zahlen in Zeichen oder Zeichenkombinationen umgewandelt und in der Zeichenkette $Ausgabe zusammengefügt.
I[n] Erzeugt Zeichen aus numerischen Angaben. Das große I steht für unsigned integer. Verarbeitet werden dabei in Perl mindestens 32 Bit lange Ganzzahlen zwischen 0 und 4294967296 5 (je nach Umgebung werden auch höhere Bitlängen und damit größere Zahlen verarbeitet). Ansonsten wie i. @Werte = (1,100000);
$Ausgabe = pack("I2", @Werte);
print "$Ausgabe"; 		Das Beispiel erzeugt eine Liste aus 2 Zahlen. Mit I2 werden die Zahlen in Zeichen oder Zeichenkombinationen umgewandelt und in der Zeichenkette $Ausgabe zusammengefügt.
l[n] Erzeugt Zeichen aus numerischen Angaben. Das kleine l steht für signed long. Verarbeitet werden dabei in Perl genau 32 Bit lange Ganzzahlen zwischen -2147483648 und 2147483647. Ansonsten wie c. @Werte = (-100000,100000);
$Ausgabe = pack("l2", @Werte);
print "$Ausgabe"; 		Das Beispiel erzeugt eine Liste aus 2 großen Zahlen. Mit l2 werden die Zahlen in Zeichen oder Zeichenkombinationen umgewandelt und in der Zeichenkette $Ausgabe zusammengefügt.
L[n] Erzeugt Zeichen aus numerischen Angaben. Das große L steht für unsigned long. Verarbeitet werden dabei in Perl genau 32 Bit lange Ganzzahlen zwischen 0 und 4294967295. Ansonsten wie l. @Werte = (1,100000);
$Ausgabe = pack("L2", @Werte);
print "$Ausgabe"; 		Das Beispiel erzeugt eine Liste aus 2 Zahlen. Mit L2 werden die Zahlen in Zeichen oder Zeichenkombinationen umgewandelt und in der Zeichenkette $Ausgabe zusammengefügt.
n[n] | Erzeugt aus einer Zahl eine Binärspeicherung in der so genannten Network Byte Order (auch: Big Endian Order). Verarbeitet werden dabei 16 Bit lange Ganzzahlen zwischen 0 und 65535. Wenn Sie mehrere Zahlen auf einmal verarbeiten wollen, geben Sie die Anzahl der Zahlen an. Anstelle einer Zahl ist auch * erlaubt. Benutzen Sie den Platzhalter, wenn Sie eine unbestimmte Anzahl Zahlen verarbeiten wollen. | $IP_mit_Port = pack("Nn", 0xC19EAAC7,80); | In dem Skalar $IP_mit_Port wird die IP-Adresse 193.158.170.199 und die Zahl 80, die für den Port des Webservers stehen soll, gespeichert. Die IP-Adresse wird dabei als 32 Bit lange Zahl in Hexadezimalschreibweise mit N verarbeitet, die Zahl für den Port, die kleiner ist, mit n.
N[n] | Erzeugt aus einer Zahl eine Binärspeicherung in der so genannten Network Byte Order (auch: Big Endian Order). Verarbeitet werden dabei 32 Bit lange Ganzzahlen zwischen 0 und 4294967295. Ansonsten wie n. | $IP = pack("N", 0xC19EAAC7); | In dem Skalar $IP wird die IP-Adresse 193.158.170.199 gespeichert. Die IP-Adresse wird dabei als 32 Bit lange Zahl in Hexadezimalschreibweise mit N verarbeitet. (Dezimal=Hexadezimal: 193=C1, 158=9E, 170=AA, 199=C7).
v[n] | Erzeugt aus einer Zahl eine Binärspeicherung in der so genannten VAX Byte Order (auch: Little Endian Order). Verarbeitet werden dabei 16 Bit lange Ganzzahlen zwischen 0 und 65535. Ansonsten wie n. | $Wert = pack("v", 0xFFFF); | In dem Skalar $Wert wird der höchstmögliche Wert gespeichert, den v verarbeitet, in Hexadezimalschreibweise als FFFF ausgedrückt.
V[n] | Erzeugt aus einer Zahl eine Binärspeicherung in der so genannten VAX Byte Order (auch: Little Endian Order). Verarbeitet werden dabei 32 Bit lange Ganzzahlen zwischen 0 und 4294967295. Ansonsten wie n. | $Wert = pack("V", 0xFFFFFFFF); | In dem Skalar $Wert wird der höchstmögliche Wert gespeichert, den v verarbeitet, in Hexadezimalschreibweise als FFFFFFFF ausgedrückt.
f[n] | Erzeugt eine binär gespeicherte Fließkommazahl. Die genaue Art der Speicherung ist vom Computertyp abhängig. Das kleine f steht für float, und zwar mit single precision, also einfacher Genauigkeit. Ansonsten wie n. | $Wert = pack("f",(1/7)); | In einem Skalar $Wert wird das Ergebnis der Division von 1 durch 7 binär als Fließkommazahl gespeichert.
d[n] | Erzeugt eine binär gespeicherte Fließkommazahl. Die genaue Art der Speicherung ist vom Computertyp abhängig. Das kleine d steht für double float, also mit double precision, doppelter Genauigkeit. Ansonsten wie n. | $Wert = pack("d",(1/7)); | In einem Skalar $Wert wird das Ergebnis der Division von 1 durch 7 binär als doppelt genaue Fließkommazahl gespeichert.
p[n] Speichert die Arbeitsspeicheradresse einer nullterminierten Zeichenkette, wie sie in C üblich ist. Wenn Sie mehrere Zeichenketten auf einmal verarbeiten wollen, geben Sie die Anzahl der Zeichenketten an. Anstelle einer Zeichenkette ist auch * erlaubt. Benutzen Sie den Platzhalter, wenn Sie eine unbestimmte Anzahl Zeichenketten verarbeiten wollen. @Namen = ("Hans", "Peter", "Stefan");
$Anzahl = @Namen;
$Werte = pack("p" x $Anzahl, @Namen );
irgendeineFunktion($Anzahl, $Werte); 		In einem Skalar $Anzahl wird die Anzahl der Elemente von @Namen gespeichert. Dann wird die Liste @Namen zu einem einzelnen String von Adressen gepackt und in $Werte gespeichert.$Anzahl und $Werte werden dann einer Funktion übergeben.
P[n] Speichert die Arbeitsspeicheradresse einer Struktur (struct) mit fester Bytelänge. Ansonsten wie p. use C::DynaLib::Struct;
Define C::DynaLib::Struct('Adresse',
  'pppi' => [qw(name ort strasse nummer)]);
$Ausgabe = pack( 'P', $struct ); 		Zunächst wird eine Struktur erstellt, wie sie C beispielsweise versteht. In dem Skalar $Ausgabe wird dann die Adresse der Struktur gespeichert.
u[n] | Erzeugt aus binären Daten eine UU-kodierte Zeichenkette. UU-Encode ist eines der Verfahren zum Umwandeln von 8-Bit-Daten (Bytes) in ein 7-Bit-Schema. Attachments von E-Mails wurden früher beispielsweise UU-kodiert übertragen. | $UUDaten = pack("u", 1234); | Die Zahl 1234, ein binärer Wert auf 8-Bit-Basis, wird durch das UU-basierte Kodieren in Zeichen auf 7-bit-Basis umgewandelt.
x[n] | Erzeugt ein Byte mit dem Wert 0, ohne dafür ein Argument aus der Übergabeliste zu "verbrauchen". | $Kette = pack("A* x A* x","Test","beispiel"); | Erzeugt aus den beiden Zeichenketten Test und beispiel eine Zeichenkette, die beide Teilstrings jeweils nullterminiert enthält.
X[n] | Geht n Byte im Ergebisstring zurück und löscht diese. | $Stefan = pack("A* X2", "Stefanie"); | Die Anweisung erzeugt zunächst mit A* das Ergebnis "Stefanie" und entfernt dann die letzten beiden Bytes. Das Endergebnis ist dann "Stefan".
@[n] | Bringt den vorläufigen Ergebnisstring auf eine Länge von genau n Bytes. Ist der String zu lang, wird er einfach abgeschnitten, ist er zur kurz, wird er mit Null-Bytes aufgefüllt. Danach wird der Formatstring ganz normal weiterbearbeitet. | $Walkman = pack("A* @3 A*","Walross","kman"); | Die Anweisung erzeugt zunächst mit A* das vorläufige Ergebnis "Walross", welches dann mit @3 auf drei Zeichen, also "Wal" gekürzt wird. Anschließend wird noch "kman" angehängt. Das Endergebnis ist "Walkman".

pos - Position der Anwendung von m/[regexp]/g auf Zeichenkette ermitteln

Seite Reguläre Ausdrücke vom Typ m/[regexp]/g oder einfach /[regexp]/g können Zeichenketten nach allen Stellen durchsuchen, auf die der angegebene Ausdruck passt. Die Funktion pos liefert diejenige Position innerhalb der zu durchsuchenden Zeichenkette zurück, bei der die Suche beim jeweils nächsten Aufruf des regulären Ausdrucks fortfahren würde. Durch geschickte Verarbeitung innerhalb einer Schleife können mit Hilfe dieser Funktion alle Positionen innerhalb der gesamten Zeichenkette gefunden werden. Sie können diesen Wert auch ändern, um die Suche zu beeinflussen.

Erwartet als Parameter:
1. die zu durchsuchende Zeichenkette bzw. den Skalar, in dem diese gespeichert ist.

Gibt die nächste gefundene Position zurück, bei der die Suche fortfährt. Die Zeichen davor passen auf das Suchmuster.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";

my $Satz = "es ist was es ist";
my $Suchwort = "ist";
while($Satz =~ /$Suchwort/g) {
  my $Treffer = pos($Satz) - 3;
  print "Suchwort <b>$Suchwort</b> gefunden bei Position $Treffer<br>\n";
}
print "</body></html>\n";

Erläuterung:

Das Beispiel-Script zeigt, wie Sie innerhalb einer Zeichenkette alle Vorkommnisse eines bestimmten gesuchten Musters auffinden und sammeln können. In dem Beispiel wird eine zu durchsuchende Zeichenkette $Satz definiert und mit einem Wert vorbelegt. Das Muster, nach dem innerhalb dieses Satzes gesucht werden soll, wird im Skalar $Suchwort definiert. In einer Seite while-Schleife wird der Satz nach dem Suchwort durchsucht. Wichtig ist dabei hinter dem regulären Ausdruck die Option g für "global". Das Beispiel sendet HTML-Code an den Browser. Innerhalb der Schleife wird die Position jedes Vorkommens des gesuchten Musters ausgegeben. Dabei wird die Funktion pos auf die zu durchsuchende Zeichenkette $Satz angewendet. Der Rückgabewert ist die erste Position hinter dem gefundenen Suchmuster. Da das Beispiel nach einem bestimmten Wort "ist" sucht, das 3 Buchstaben hat, wird durch Subtrahieren von 3 die Anfangsposition ermittelt, an der das gesuchte Wort beginnt. Das Ergebnis wird jeweils in dem Skalar $Treffer gespeichert. Im Beispiel werden insgesamt zwei Zeilen ausgegeben, nämlich Gefunden-Hinweise für die Positionen 3 und 14. Der Grund: das Wort kommt zwei mal vor in dem Satz, und die Suche landet zweimal auf den Positionen dahinter, also bei den Positionen 6 und 17.

reverse - Zeichenkette von hinten nach vorn umwandeln

Dreht eine Zeichenkette Zeichen für Zeichen um. Statt einer Zeichenkette können Sie auch eine Liste übergeben, deren Elemente vor der Umwandlung zu einer Zeichenkette verknüpft werden.

Erwartet als Parameter:
1. die Zeichenkette oder Liste, die bearbeitet werden soll.

Gibt eine bearbeitete Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Palindrom = reverse("EIN NEGER MIT GAZELLE ZAGT IM REGEN NIE");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "$Palindrom\n";
print "</body></html>\n";

Erläuterung:

In dem Beispiel wird der klassische Satz "EIN NEGER MIT GAZELLE ZAGT IM REGEN NIE", den man rückwärts genauso lesen kann wie vorwärts (Palindrom-Effekt), zur Verdeutlichung verwendet. Die Funktion reverse wird auf diesen Satz angewendet, und der Rückgabewert wird in dem Skalar $Palindrom gespeichert. Zur Kontrolle wird HTML-Code ausgegeben.

Hinweis: Manche Leute regen sich ja über jeden Ausdruck auf, der nicht der gegenwärtigen "political correctness" entspricht. Aber mit einem Wort wie "Dunkelhäutiger" würde das Palindrom nun mal nicht funktionieren. Sie dürfen dieses Wort jedoch gerne probieren, wenn Ihnen nicht klar geworden sein sollte, dass reverse tatsächlich das tut, was soeben beschrieben wurde.

split - Zeichenkette in mehrere Zeichenketten aufsplitten

Erzeugt aus einer Zeichenkette eine Liste von Teilzeichenketten, und zwar aufgrund eines regulären Ausdrucks, der das Trennsymbol definiert, das die einzelnen Teile trennt. Trennsymbole können eine beliebige Länge besitzen und müssen nicht bei jeder Fundstelle identisch sein.

Erwartet als Parameter:
1. einen Seite regulären Ausdruck, der definiert, wie die Zeichenkette in einzelne Teile aufgespalten werden soll,
2. die Zeichenkette, die bearbeitet werden soll.

Gibt eine Liste mit den extrahierten Teilen der Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Satz = "Sage jeden Morgen guten Morgen zu dir selbst";
my @Woerter = split(/ /,$Satz);
my $Anzahl = @Woerter;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Der Satz <b>$Satz</b> hat $Anzahl Wörter\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert einen Satz. Auf den Satz wird die Funktion split angewendet. Dabei wird ein regulärer Ausdruck als erster Parameter übergeben, der nur auf Leerzeichen passt. Als zweiter Parameter wird der Skalar $Satz übergeben, in dem der Satz gespeichert ist. Die Funktion teilt den übergebenen Satz in Einzelelemente auf, die durch Leerzeichen voneinander getrennt sind - im Beispiel also in die einzelnen Wörter. Diese werden im Array @Woerter gespeichert. Im Beispiel soll zur Kontrolle nur die Anzahl der Wörter ermittelt werden, was durch die Anweisung $Anzahl = @Woerter; geschieht. Das Beispiel sendet danach HTML-Code an den Browser, der die ermittelte Anzahl der Wörter im Satz ausgibt.

sprintf - Zeichenkette formatieren

Diese Funktion dient dazu, einzelne Datenelemente zu formatieren. So lassen sich Dezimalzahlen beispielsweise ohne viel Aufwand hexadezimal umrechnen, oder Gleitkommazahlen mit vielen Nachkommastellen auf eine bestimmte Anzahl Nachkommastellen trimmen.
Die sprintf-Funktion in Perl entspricht im wesentlichen der sprintf-Funktion in C.

Erwartet als Parameter:
1. Formatstring = eine Zeichenkette, die für bestimmte auszugebende Elemente Formatbezeichner enthalten kann. Die Syntax ist identisch mit der der Seite printf-Funktion.
2. Ausgabeliste = ein oder mehrere Elemente, auf die sich die speziellen Formatbezeichner im Formatstring beziehen.

Gibt die formatierte Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $BruttoBetrag = 27.95;
my $NettoBetrag = $BruttoBetrag / 1.16;
my $Formatiert = sprintf("Das im Bruttobetrag %s enthaltene Netto beträgt ungerundet %.2f", $BruttoBetrag, $NettoBetrag);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
print $Formatiert;
print "</body></html>\n";

Erläuterung:

Das Beispiel formatiert Hilfe der sprintf-Funktion die beiden Variablen $BruttoBetrag und $NettoBetrag in der Zeichenkette $Formatiert. Der Wert von $NettoBetrag wird rechnerisch gewonnen und stellt eine Bruchzahl mit vielen Nachkommastellen dar. In der mit Hilfe von sprintf formatierten Zeichenkette wird diese Zahl jedoch auf zwei Nachkommastellen reduziert.

Eine Auflistung der möglichen Formatbezeichner für diese Funktion finden Sie bei der Beschreibung der Seite printf-Funktion.

substr - Teilzeichenkette aus Zeichenkette extrahieren

Ermittelt aus einer Zeichenkette eine Teilzeichenkette an einer bestimmten Position und ersetzt sie gegebenenfalls durch eine andere.

Erwartet als Parameter:
1. die Zeichenkette, aus der extrahiert werden soll,
2. die Zeichenposition des ersten Zeichens der gewünschten Teilzeichenkette (erste Zeichenposition in einer Zeichenkette ist 0, zweite 1 usw.),
3. (optional) die Anzahl Zeichen, wie lang die gewünschte Teilzeichenkette sein soll,
4. (optional) eine Ersetzungszeichenkette

Gibt die bearbeitete Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Satz = "nutze den Tag!";
my $Satzlaenge = length($Satz);
my @Zeichen;
for(my $i=0; $i<$Satzlaenge; $i++) {
  $Zeichen[$i] = substr($Satz,$i,1);
}

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
for(my $i=0; $i<$Satzlaenge; $i++) {
  print "Zeichen $i lautet: $Zeichen[$i]<br>\n";
}
print "</body></html>\n";

Erläuterung:

In dem Beispiel wird die Funktion substr verwendet, um die einzelnen Zeichen einer Zeichenkette in einer Liste zu speichern. Denn in Perl fehlt die für C typische Behandlung von Zeichenketten als Zeichen-Array. Anders als in C, das Zeichenketten nur als Array speichert, sind einzelne Zeichen einer Zeichenkette in Perl nicht direkt ansprechbar. Das Beispiel zeigt eine - wenn auch etwas umständliche - Methode, durch die einzelnen Zeichen der Zeichenkette zu iterieren (also die Zeichenkette Zeichen für Zeichen abzuarbeiten).
In dem Beispiel wird ein Skalar $Satz mit einem Wert definiert. Die Länge des Satzes wird in dem Skalar $Satzlaenge gespeichert (durch Anwendung von nach oben length). Anschließend wird der Satz Zeichen für Zeichen in einer Seite for-Schleife in die Liste @Zeichen eingelesen. Dazu wird die Funktion substr so angewendet, dass sie jeweils ein Zeichen aus dem Satz "extrahiert". Zur Kontrolle gibt das Script HTML-Code aus, in dem die einzelnen Zeichen des Satzes untereinander aufgelistet werden.

uc - alle Zeichen einer Zeichenkette in Großbuchstaben umwandeln

Wandelt Kleinbuchstaben in Großbuchstaben um und lässt Großbuchstaben und alle anderen Zeichen unberührt. Die entsprechende Gegenfunktion für Kleinbuchstaben ist nach oben lc.

Erwartet als Parameter:
1. die Zeichenkette, die bearbeitet werden soll.

Gibt die bearbeitete Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Satz = "mir ist nach Schreien zumute!";
$Satz = uc($Satz);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "$Satz\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert einen Satz in normaler Schreibweise. Aber jeder Internet-Freak weiß, dass man Großbuchstaben nur dann benutzen sollte, wenn einem nach Schreien zumute ist. Deshalb wird die Funktion uc auf den Satz angewendet und speichert ihren Rückgabewert in dem gleichen Skalar, der ihr als Parameter übergeben wird. Zur Kontrolle wird HTML-Code mit dem bearbeiteten Satz ausgegeben.

ucfirst - erstes Zeichen einer Zeichenkette in Großbuchstabe umwandeln

Wandelt das erste Zeichen einer Zeichenkette in Großbuchstaben um, sofern es ein entsprechender Kleinbuchstabe ist. Die entsprechende Gegenfunktion für Kleinbuchstaben ist nach oben lcfirst.

Erwartet als Parameter:
1. die Zeichenkette, die bearbeitet werden soll.

Gibt die bearbeitete Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
my $Wort = "fallen";
print ucfirst($Wort);
print "</body></html>\n";

Erläuterung:

Das Beispiel gibt nur ein Wort aus. Bevor das Wort ausgegeben wird, wird allerdings die Funktion ucfirst darauf angewendet. Der führende Kleinbuchstabe wird dabei in einen Großbuchstaben verwandelt und ändert dadurch die Bedeutung des Wortes.

unpack - Binärdaten auflösen

Macht (fast) alles rückgängig, was mit Hilfe der Funktion nach oben pack zu Binärdaten verwandelt wurde, oder anderweitig erzeugte Daten, die in eines der entsprechenden Binärformate passen.

Erwartet als Parameter:
1. die Formatierungsangabe, siehe nach oben Tabelle,
2. den Daten-Input.

Gibt die entsprechende Werteliste zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Satz = "Beam me up, Scotty";
my @Zeichen = unpack("C*", $Satz);
my $Quersumme = 0;
foreach(@Zeichen) {
   $Quersumme += int($_);
}

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Die Zeichenwert-Quersumme des Satzes <b>$Satz</b> lautet <b>$Quersumme</b>\n";
print "</body></html>\n";

Erläuterung:

Die Formatierangabe C erzeugt bei der Funktion pack aus numerischen Angaben entsprechende Zeichenwerte. Bei unpack ist es umgekehrt. Da erzeugt die Funktion aus der Bytefolge, die der Zeichenkette der bei der Eingabe verwendeten Zeichenkodierung entspricht, eine Liste der numerischen Werte. Im Beispiel wird dies genutzt, um die Quersumme aller Zeichenwerte des Satzes zu ermitteln. Das Beispiel sendet HTML-Code an den Browser und gibt dabei das Ergebnis aus.
Alles weitere zu den komplexen Möglichkeiten dieser Funktion siehe nach oben pack.

nach oben
weiter | Seite Funktionen für Listen bzw. Arrays und Hashes
zurück | Seite CGI-typische Aufgaben in Perl
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für Listen bzw. Arrays und Hashes

SELFHTML

Funktionen für Listen bzw. Arrays und Hashes
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten delete - Elementpaar aus Hash löschen
nach unten each - nächstes Elementpaar aus Hash ermitteln
nach unten exists - Ermitteln ob ein Hash-Name existiert
nach unten grep - Teilliste aus Liste durch Bedingung extrahieren
nach unten join - Liste in Zeichenkette verwandeln
nach unten keys - Alle Namen eines Hashes ermitteln
nach unten map - Befehle auf alle Listenelemente anwenden
nach unten pop - letztes Element eines Arrays löschen
nach unten push - Elemente an einen Array anhängen
nach unten reverse - Reihenfolge der Listenelemente umkehren
nach unten shift - erstes Element eines Arrays löschen
nach unten sort - Listenelemente sortieren
nach unten splice - Elemente innerhalb eines Arrays löschen, hinzufügen, ersetzen
nach unten undef - Wert aus Hash oder Array entfernen
nach unten unshift - Elemente am Anfang eines Arrays hinzufügen
nach unten values - Alle Werte eines Hashes ermitteln
nach unten

Allgemeines zu diesen Funktionen

Um die hier versammelten Funktionen zu verstehen, müssen Sie wissen, welche Bedeutung Listen, Arrays und Hashes in Perl haben, wie sie definiert werden, und welche Besonderheiten sie aufweisen. Dies wird in den Abschnitten über Seite Listen und Seite Hashes behandelt.

delete - Elementpaar aus Hash löschen

Löscht ein beliebiges Elementpaar aus einem Hash. Im Gegensatz zur Funktion nach unten undef, die nur den Wert löscht, das Elementpaar jedoch stehen lässt, entfernt delete das gesamte Elementpaar.

Erwartet als Parameter:
1. den Schlüssel des zu löschenden Elementes.

Gibt den Wert des gelöschten Elementpaars zurück, oder undef, falls nichts gelöscht wurde.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my %BodyFarben = ("text","#000000","link","#FF0000","alink","0000FF","vlink","#990000","bgcolor","#FFFFFF");
delete $BodyFarben{'bgcolor'};

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "text = $BodyFarben{'text'}<br>\n";
print "link = $BodyFarben{'link'}<br>\n";
print "alink = $BodyFarben{'alink'}<br>\n";
print "vlink = $BodyFarben{'vlink'}<br>\n";
print "bgcolor = $BodyFarben{'bgcolor'}\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert einen Hash namens %BodyFarben. Darin werden Elementpaare für die üblichen Attribute des body-Elements von HTML definiert. Mit Hilfe der Funktion delete wird anschließend das gesamte Elementpaar für bgcolor gelöscht. Zur Kontrolle wird HTML-Code erzeugt, der alle Elementpaare enthält. Der Versuch, das nicht mehr existerende Element bgcolor auszugeben, erzeugt dabei einen Fehler.

Beachten Sie:

Sie können delete auch auf vordefinierte Hashes wie %ENV anwenden. Dabei werden die Umgebungsvariablen geändert!

Das obige Beispiel ist insofern unbefriedigend, als die Ausgabe bgcolor = leer im Raum stehen bleibt. Wie das verhindert werden kann, zeigt die Erweiterung des Beispiels im Zusammenhang mit der Funktion nach unten exists.

each - nächstes Elementpaar aus Hash ermitteln

Ermittelt das jeweils nächste Elementpaar eines Hashes und ist daher vor allem geeignet, alle Elementpaare in einer Schleife zu verarbeiten.

Erwartet als Parameter:
1. den Hash.

Gibt je nach Wunsch entweder eine 2-Element-Liste mit dem Namen und dem Wert des nächsten Elementpaars zurück, oder einen Skalar mit dem Namen des nächsten Elementpaars.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my %EMail = ("Sender","tabaluga\@example.org",
          "Received","from smtp\@mailout.de",
          "Date", "Sat, 01 Apr 2000 01:45:35 +0200",
          "X-Mailer","Mozilla 4.72 [en] (WinNT; U)",
          "To","beispiel\@example.org",
          "Content-Type","text/plain; charset=us-ascii");
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
while (my ($Name, $Wert) = each %EMail) {
  print "$Name: $Wert\n";
}
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel definiert einen Hash mit Elementpaaren, die typische Kopfdaten einer E-Mail darstellen. Anschließend wird HTML-Code, in dem alle Elementpaare des Hashes zeilenweise ausgegeben werden, erzeugt. Dazu werden die Elementpaare in einer Seite while-Schleife mit each abgearbeitet. Der Rückgabewert von each wird im Beispiel in einer 2-Element-Liste my ($Name, $Wert) gespeichert. Würde dort nur ein Skalar stehen, also etwa $NextElement, dann würde darin nur der Name des nächsten Elements gespeichert, also etwa Sender, nicht der zugehörige Wert (tabaluga@example.org). Das Beispiel gibt in jedem Schleifendurchlauf die ermittelten Daten zur Kontrolle aus.

exists - Ermitteln ob ein Hash-Name existiert

Ermittelt, ob ein Name in einem Hash vorkommt und wird daher normalerweise in Verbindung mit einer Seite if-Abfrage verwendet.

Erwartet als Parameter:
1. den Elementnamen.

Gibt true zurück, wenn der Elementname im Hash vorkommt.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my %BodyFarben = ("text","#000000","link","#FF0000","alink","0000FF","vlink","#990000","bgcolor","#FFFFFF");
delete $BodyFarben{'bgcolor'};

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";

print "text = $BodyFarben{'text'}<br>\n" if exists $BodyFarben{'text'};
print "link = $BodyFarben{'link'}<br>\n" if exists $BodyFarben{'link'};
print "alink = $BodyFarben{'alink'}<br>\n" if exists $BodyFarben{'alink'};
print "vlink = $BodyFarben{'vlink'}<br>\n" if exists $BodyFarben{'vlink'};
print "bgcolor = $BodyFarben{'bgcolor'}\n" if exists $BodyFarben{'bgcolor'};
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert einen Hash namens %BodyFarben. Darin werden Elementpaare für die üblichen Attribute des body-Elements von HTML definiert. Mit Hilfe der Funktion nach oben delete wird anschließend das gesamte Elementpaar für bgcolor gelöscht. Zur Kontrolle wird HTML-Code, der die Elementpaare enthält, erzeugt. Ausgegeben werden Elementpaare jedoch nur, wenn sie existieren. Dazu wird die Funktion exists in einer nachgestellten if-Abfrage auf das auszugebende Elementpaar angewendet. Nur wenn der Name des Elementpaars gefunden wird, werden die Daten ausgegeben. Im Beispiel wird auf diese Weise verhindert, dass die Zeile bgcolor = mit leerem Wert ausgegeben wird.

grep - Teilliste aus Liste durch Bedingung extrahieren

Extrahiert bestimmte Elemente aus einer Liste, und zwar solche, die einer bestimmten Bedingung genügen, also etwa alle ungeraden Zahlen aus einer Liste mit Zahlen, oder alle Dateien ab einer bestimmten Größe aus einer Liste mit Dateien. Die extrahierten Elemente werden in einer eigenen neuen Liste gespeichert.

Erwartet als Parameter:
1. die Bedingung, der zu extrahierende Elemente der Liste genügen sollen. Es kann sich beispielsweise um einen regulären Ausdruck handeln, aber auch um einen vergleichenden Ausdruck.
2. die Liste, aus der extrahiert werden soll.

Gibt eine Liste mit extrahierten Elementen zurück, die der Bedingung genügen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

opendir(DIR, "/var/www/selfhtml/dokumente");
my @Eintraege = readdir(DIR);
closedir(DIR);

chdir("/var/www/selfhtml/dokumente");

my @HTML_Dateien = grep(/\.htm/,@Eintraege);
my @Grosse_Dateien = grep(-s > 50 * 1024, @Eintraege);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";
print "<h2>HTML-Dateien im Verzeichnis</h2>\n";
foreach(@HTML_Dateien) {
  print "$_<br>\n";
}
print "<h2>Dateien groesser 50KB im Verzeichnis</h2>\n";
foreach(@Grosse_Dateien) {
  print "$_<br>\n";
}
print "</body></html>\n";

Erläuterung:

Im Beispiel wird ein Verzeichnis eingelesen. Die Dateien werden in der Liste @Eintraege gespeichert (zum Einlesen von Dateien siehe Seite readdir). Anschließend wird mit Seite chdir in das zuvor eingelesene Verzeichnis gewechselt, weil der zweite der nachfolgenden grep-Aufrufe erfordert, dass das eingelesene Verzeichnis das aktuelle Verzeichnis ist.

Der erste der beiden Aufrufe von grep ermittelt aus der eingelesenen Liste @Eintraege alle Einträge, in denen .htm vorkommt. Auf diese Weise ermittelt grep alle HTML-Dateien der Liste. Die gefundenen Dateien werden in der zurückgegebenen Liste @HTML_Dateien gespeichert.

Während beim ersten Aufruf von grep ein Seite regulärer Ausdruck verwendet wird, um die Extrahier-Bedingung zu formulieren, ist dies beim zweiten Aufruf eine vergleichende Bedingung, ähnlich wie man sie etwa aus Seite bedingte Anweisungen mit if/unless/else/elsif kennt. Im Beispiel werden alle Einträge extrahiert, bei denen die Dateigröße mehr als 50 Kilobyte (50*1024 Byte) beträgt. Dabei kommt der Seite Dateitestoperator -s zum Einsatz. Die gefundenen Dateien werden in der zurückgegebenen Liste @Grosse_Dateien gespeichert.

Das obige Beispiel gibt anschließend HTML-Code mit den beiden ermittelten Listen für HTML-Dateien und Dateien größer 50 Kilobyte aus.

join - Liste in Zeichenkette verwandeln

Bindet die Elemente einer Liste zu einer Zeichenkette zusammen. In der Zeichenkette werden die ehemaligen Listenelemente durch ein bestimmtes Zeichen oder eine bestimmte Zeichenfolge voneinander getrennt.

Erwartet als Parameter:
1. das Zeichen oder die Zeichenfolge, die zur Trennung der Listenelemente dienen soll,
2. die Liste.

Gibt eine Zeichenkette zurück, in der alle Elemente der übergebenen Liste nacheinander notiert sind, getrennt durch das angegebene Zeichen oder die Zeichenfolge zur Trennung.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Werte;
for(my $i=0; $i<16; $i++) {
    $Werte[$i] = 2 ** ($i+1);
}
my $Wertekette = join(";",@Werte);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "$Wertekette\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt in einer Seite for-Schleife eine Liste namens @Werte. Darin werden alle Ergebnisse der Operationen von 21 bis 216 gespeichert (dazu dient der Seite Berechnungsoperator **). Anschließend wird diese Liste der Funktion join übergeben. Als Trennzeichen wird ein Semikolon (;) bestimmt. Das Ergebnis wird in dem Skalar $Wertekette gespeichert, einer einfachen Zeichenkette. Zur Kontrolle wird HTML-Code mit dem Ergebnis ausgegeben.

Beachten Sie:

Die Umkehrfunktion zum Erzeugen einer Liste aus einer Zeichenkette mit Trennzeichen und Werten ist Seite split.

keys - Alle Namen eines Hashes ermitteln

Speichert alle Namen von Elementpaaren eines Hashes in einer Liste.

Erwartet als Parameter:
1. den Hash.

Gibt eine Liste mit den Namen der Elementpaare zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Umgebungsvariablen = keys(%ENV);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<p>Folgende Umgebungsvariablen sind definiert:</p>\n";
print "<ul>\n";
foreach(@Umgebungsvariablen) {
  print "<li>$_</li>\n";
}
print "</ul>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel ermittelt alle Namen des Seite vordefinierten Hashes %ENV in der Liste @Umgebungsvariablen. Zur Kontrolle wird HTML-Code erzeugt, in dem alle Umgebungsvariablen aufgelistet werden.

Beachten Sie:

In dem Beispiel werden nur die Namen der vorhandenen Umgebungsvariablen aufgelistet, nicht deren aktuelle Werte! Die Funktion, um nur die Werte, nicht die Namen eines Hashs zu ermitteln, ist nach unten values.

map - Befehle auf alle Listenelemente anwenden

Wendet Befehle auf alle Elemente einer Liste an. Praktisch, um eine Seite for- oder Seite foreach-Schleife zu vermeiden.

Erwartet als Parameter:
1. einen Befehl, der auf alle Listenelemente angewendet werden soll. Es kann sich um eine Funktion handeln, aber auch um eine ganze Folge von Anweisungen, die dann zu einem Block zusammengefasst werden (das aktuelle Listenelement steht dann in Form der Variable $_ zur Verfügung).
2. die Liste, auf die der Befehl angewendet werden soll.

Gibt die bearbeitete Liste zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Dateien = ("Index.htm","ACDC.html","acdc.jpg","oasis.htm","Oasis.jpg");
@Dateien = map(lc, @Dateien);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
foreach(@Dateien) {
  print "$_<br>\n";
}
print "</body></html>\n";

Erläuterung:

Im Beispiel wird eine Liste mit Dateinamen definiert. Die Dateinamen enthalten zum Teil auch Großbuchstaben. Anschließend wird die Funktion map auf die Liste angewendet. Dabei wird die Funktion Seite lc auf alle Elemente der Liste angewendet, die eine Kleinschreibung aller Zeichen erzwingt. Zur Kontrolle gibt das Beispiel HTML-Code mit den Elementen der bearbeiteten Liste aus.

pop - letztes Element eines Arrays löschen

Entfernt aus einem Array das letzte Element. Der Array wird um ein Element verkürzt.

Erwartet als Parameter:
1. den Array.

Gibt das gelöschte Element zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Satz = "Was du heute kannst besorgen das verschiebe nicht auf morgen";
my $Satzlaenge = length($Satz);
my @Zeichen;
for(my $i=0;$i<$Satzlaenge;$i++) {
  $Zeichen[$i] = substr($Satz,$i,1);
}
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
for(my $i=0; $i<$Satzlaenge; $i++) {
  print "@Zeichen<br>\n";
  pop(@Zeichen);
}
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert einen Satz und extrahiert alle einzelnen Zeichen daraus in einen Array (Erläuterung dazu siehe Funktion Seite substr). Das Beispiel erzeugt HTML-Code. Dabei wird in einer Seite for-Schleife, die so oft durchlaufen wird, wie die Anzahl Zeichen im ursprünglichen Satz beträgt, jeweils der gesamte Array @Zeichen ausgegeben. Der Array wird jedoch bei jedem Schleifendurchgang mit Hilfe der Funktion pop um das letzte Element verkürzt. So wird bei jedem Schleifendurchgang jeweils ein Zeichen des Satzes weniger ausgegeben.

push - Elemente an einen Array anhängen

Fügt ein oder mehrere neue Elemente an das Ende eines Arrays an.

Erwartet als Parameter:
1. den Array, an den das Element angehängt werden soll,
2. bis n. ein oder mehrere anzuhängende Elemente.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Orte = ("Wien","Madrid","Rom","Stockholm","Riga");
my @NeueOrte = ("Paris","Lissabon","Sofia");
foreach(@NeueOrte) {
  push(@Orte,$_);
}
@Orte = sort(@Orte);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
foreach(@Orte) {
  print "$_<br>\n";
}
print "</body></html>\n";

Erläuterung:

Im Beispiel werden zwei Listen definiert: @Orte und @NeueOrte. In einer Seite foreach-Schleife werden die Elemente der Liste @NeueOrte der Reihe nach an die Liste @Orte angehängt. Mit Hilfe der Funktion nach unten sort wird die neue Liste mit allen Orten dann noch "asciibetisch" (nach der Reihenfolge der Zeichen in der ASCII-Codetabelle) sortiert. Das Beispiel gibt die gesamte neue Liste zur Kontrolle als HTML-Code aus.

reverse - Reihenfolge der Listenelemente umkehren

Dreht eine Liste so um, dass das erste Element hinterher das letzte ist, das zweite das zweitletzte usw.

Erwartet als Parameter:
1. die gewünschte Liste.

Gibt die bearbeitete Liste zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Zahlen = (1..100);
@Zahlen = reverse(@Zahlen);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
foreach(@Zahlen) {
  print "$_<br>\n";
}
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert eine Liste mit Zahlen von 1 bis 100. Anschließend wird die Funktion reverse auf die Liste angewendet, sodass darin die Elemente von 100 bis 1 gespeichert sind. Zur Kontrolle wird HTML-Code mit der bearbeiteten Liste ausgegeben.

Beachten Sie:

Die Funktion ist auch auf Seite Hashes anwendbar. Beispiel:
%Mailheader = reverse(%Mailheader);
Dabei werden die Schlüssel und Werte der Elemente miteinander vertauscht. Dies ist jedoch dann problematisch, wenn ein Hash mehrere gleiche Werte besitzt. In diesem Fall wird im bearbeiteten Hash nur noch einer der Werte (der nun als Schlüssel dient) berücksichtigt.

shift - erstes Element eines Arrays löschen

Entfernt das erste Element eines Arrays. Das zweite ist anschließend das erste usw. Der Array wird um ein Element kürzer.

Erwartet als Parameter:
1. den zu bearbeitenden Array.

Gibt das gelöschte Element zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Zustaende = ("Angst, ","Melancholie, ","Trauer, ","Wut, ","Zwiespalt, ","Hass");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
my $max = @Zustaende;
for(my $i = 0; $i < $max; $i++) {
  print "<p>jetzt herrscht noch @Zustaende<br>\n";
  shift(@Zustaende);
}
print "<p>und jetzt herrscht Friede!</p>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert einen Array, der die Namen unangenehmer seelischer Zustände auflistet. Innerhalb des HTML-Codes ist eine Seite for-Schleife notiert. Sie wird so oft durchlaufen, wie der ursprüngliche Array Elemente hat. Dazu wird die Länge der Liste in dem Skalar $max gespeichert. Bei jedem Schleifendurchgang wird ausgegeben, welche der unangenehmen Seelenzustände noch herrschen. Bei jedem Schleifendurchgang wird aber die erste dieser Befindlichkeiten aus dem Array mit shift gelöscht. Dadurch wird der Array immer kleiner, und die Stimmung immer aufgehellter. Am Ende ist die Seelenwelt wieder in Ordnung. Dann wird auch die Schleife beendet, und es wird noch ein triumphierender Satz ausgegeben.

Beachten Sie:

Die Funktion shift wird in der Praxis auch gerne dazu verwendet, innerhalb von Subroutinen übergebene Parameter "abzuarbeiten". Ein Beispiel finden Sie im Abschnitt über Seite Subroutinen mit Parametern aufrufen.

sort - Listenelemente sortieren

Sortiert die Elemente einer Liste. Dabei gibt es zwei Möglichkeiten. Entweder Sie sortieren die Liste nach dem vorgegebenen Sortier-Algorithmus. Dieser sortiert alphabetisch, genauer gesagt, "asciibetisch" (nach der Reihenfolge der Zeichen in der ASCII-Codetabelle). Oder Sie erzwingen einen eigenen Sortier-Algorithmus. Dazu definieren Sie beispielsweise eine Seite Subroutine, die den entsprechenden Algorithmus leistet. Wichtig ist dies etwa, um Listenelemente numerisch zu sortieren.

Erwartet als Parameter:
entweder:
1. die zu sortierende Liste.
oder:
1. die Anweisung oder den Namen der Subroutine mit dem Sortier-Algorithmus,
2. die zu sortierende Liste.

Gibt die sortierte Liste zurück. Wichtig ist, dass der Rückgabewert in einer anderen Liste gespeichert wird als in der Liste, die als Parameter übergeben wird.

Beispiel 1 eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Freundinnen = ("Nina","Martina","Janina","Christina","Ina","Sabrina");
my @Ordnung = sort(@Freundinnen);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
for(@Ordnung)
 {
  print "$_<br>\n";
 }
print "</body></html>\n";

Erläuterung:

Dieses Beispiel zeigt die einfache standardmäßige Sortierung. Es definiert eine Liste von Namen von Freundinnen. Anschließend wird die Liste mit Hilfe von sort sortiert. Die zurückgegebene Liste wird in der neuen Liste @Ordnung gespeichert. Zur Kontrolle wird HTML-Code mit der sortierten Liste ausgegeben.

Beispiel 2 eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @HighscoreListe = (9834,9837,5989,4509,4329,6509,2837,8289,10845);
my @SortierteListe = sort(NummernSort @HighscoreListe);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
for(@SortierteListe) {
  print "$_<br>\n";
 }
print "</body></html>\n";

sub NummernSort {
 if($a < $b)
  { return -1; }
 elsif($a == $b)
  { return 0; }
 else
  { return 1; }
}

Erläuterung:

Das zweite Beispiel definiert eine Liste namens @HighscoreListe. Anschließend wird die Liste mit Hilfe von sort sortiert. Da es sich um numerische Werte handelt, wird eine Funktion benutzt, die den numerischen Sortier-Algorithmus bereitstellt. Denn "asciibetisch" betrachtet würde der letzte Wert 10845 in der aufsteigend sortierten Liste zuerst erscheinen, was er aber nicht soll, da er ja der höchste Wert ist, der zuletzt auftauchen soll. Dem Aufruf von sort wird deswegen zuerst der Name des Unterprogramms für die Sortierung übergeben, und dann, durch ein Leerzeichen getrennt (nicht durch Komma!), die zu sortierende Liste. Die zurückgegebene Liste wird im Beispiel in der neuen Liste @SortierteListe gespeichert. Zur Kontrolle wird HTML-Code mit der sortierten Liste ausgegeben.

Beachten Sie:

Das im Beispiel notierte Unterprogramm NummernSort ist allgemein geschrieben und leistet eine einfache numerische Sortierung, so, wie es die sort-Funktion erwartet. Dieses Unterprogramm können Sie also immer verwenden, wenn Sie Listen numerisch sortieren möchten.

Um eine absteigende Sortierung zu erzwingen, können Sie beispielsweise nach Anwendung von sort noch die Funktion nach oben reverse auf die Liste anwenden.

splice - Elemente innerhalb eines Arrays löschen, hinzufügen, ersetzen

Entfernt eines oder mehrere Elemente aus einem Array und kann außerdem an der gleichen Stelle eines oder mehrere Elemente einfügen. splice ist daher eine Art Universalfunktion zur Manipulation von Listen, die unter anderem alles ermöglicht, was die Einzelfunktionen pop, push, shift und unshift leisten, darüber hinaus aber noch mehr kann.

Erwartet als Parameter:
1. den zu bearbeitenden Array,
2. Indexnummer des Elements, ab dem gelöscht werden soll (wobei bei 0 für das erste Listenelement zu zählen begonnen wird),
3. (optional) Anzahl der zu löschenden Elemente. Wenn nicht angegeben, werden alle Elemente bis zum Listenende gelöscht! Um kein Element zu löschen, also nur einzufügen, muss an dieser Stelle 0 übergeben werden.
4. bis n. (optional) ein bis n Elemente, die (anstelle der gelöschten Elemente) eingefügt werden sollen.

Gibt eine Liste mit gelöschten Elementen zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Datensatz = ("Heinrich","Loewe","Burgstr.1","01234 Regentenstadt");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";
print "<h2>E-Mail-Adresse und Webadresse neu:</h2>\n";
splice(@Datensatz,2,0,"hdl\@example.org","http://www.example.org/hdl/");
my $Feld;
foreach $Feld (@Datensatz) {
  print "$Feld<br>\n";
}
print "<h2>Adresse neu:</h2>\n";
splice(@Datensatz,4,1);
splice(@Datensatz,-1,1,"Postfach 1234, GERMANY");
foreach $Feld (@Datensatz) {
  print "$Feld<br>\n";
}
print "</body></html>\n";

Erläuterung:

Im Beispiel wird ein Array namens @Datensatz definiert, der aus mehreren Elementen besteht. Das Script erzeugt HTML-Code und gibt den Array darin aus. Dabei wird der Array jedoch mehrfach mit splice manipuliert. Zunächst werden Elemente für E-Mail-Adresse und Webadresse in den Datensatz eingefügt - und zwar hinter den beiden ersten Elementen, also hinter Vorname und Zuname. Dazu wird als zweiter Parameter die Indexnummer 2 für das dritte Element übergeben. Gelöscht werden soll kein Element, die Daten sollen nur eingefügt werden. Deshalb wird als dritter Parameter 0 übergeben. Zuletzt werden noch die beiden neuen Elemente für E-Mail-Adresse und Webadresse übergeben. Zur Kontrolle wird der Array dann erstmals ausgegeben. Er enthält zu diesem Zeitpunkt die Elemente:
Heinrich,Loewe,hdl@example.org,http://www.example.org/hdl/,Burgstr.1,01234 Regentenstadt

Der Array wird im Beispiel jedoch noch weiter manipuliert. Zunächst wird das Element mit der Indexnummer 4 (im aktuellen Stand von @Datensatz die Straßenangabe) gelöscht. Die als dritter Parameter übergebene 1 bewirkt, dass genau dieses eine Element gelöscht wird. @Datensatz besteht zu diesem Zeitpunkt aus den Elementen:
Heinrich,Loewe,hdl@example.org,http://www.example.org/hdl/,01234 Regentenstadt

Gleich anschließend folgt im Beispiel jedoch noch ein dritter splice-Aufruf. Dieser ersetzt das letzte Listenelement durch ein neues. Als zweiter Parameter wird zu diesem Zweck -1 übergeben. Da der Perl-Interpreter bei negativen Indexnummern von hinten anfängt zu zählen, entspricht -1 also der letzten Indexnummer, -2 der vorletzten usw. Als dritter Parameter wird 1 übergeben, sodass dieses letzte Element gelöscht wird. Zuletzt wird jedoch noch ein weiterer Parameter übergeben, nämlich das zu ersetzende Element. So entsteht der Effekt, als ob einfach dem letzten Listenelement ein neuer Wert zugewiesen wird. Intern passiert jedoch mehr.

Der Array hat nach dem dritten Aufruf von splice folgendes Aussehen:
Er besteht zu diesem Zeitpunkt aus den Elementen:
Heinrich,Loewe,hdl@example.org,http://www.example.org/hdl/,Postfach 1234, GERMANY.
Zur Kontrolle wird dieser Stand noch einmal ausgegeben.

Die folgende Tabelle zeigt zur Verdeutlichung noch ein paar splice-Beispiele und deren Entsprechung durch das Verwenden anderer Array-Funktionen:

Anweisung mit splice: | entspricht folgender anderer Anweisung: | siehe auch:
splice(@Array,@Array,0,"Element") | push(@Array,"Element") | nach oben push
splice(@Array,-1) | pop(@Array) | nach oben pop
splice(@Array,0,1) | shift(@Array) | nach oben shift
splice(@Array,0,0,"Element") | unshift(@Array,"Element") | nach unten unshift

undef - Wert aus Hash oder Array entfernen

Löscht einen Wert aus einem Hash oder einem Array. Das Element selbst bleibt dabei erhalten. Der Wert wird lediglich auf den Wert undef gesetzt.

Erwartet als Parameter:
1. bei einem Hash den Elementnamen, und bei einem Array die Angabe dazu, das wievielte Element gemeint ist. Kann daneben auch auf einfache Skalare und Unterprogramme angewendet werden, um deren Wert oder Rückgabewert auf undef zu setzen.

Gibt in jedem Fall undef zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Spieler = ("Richard","Anita","Fred","Miriam");
my %Spielstaende = ("Richard","350","Anita","400","Fred","150","Miriam","700");

undef($Spieler[2]);
undef($Spielstaende{'Fred'});

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<p>Folgende Spieler nehmen teil:</p>\n";
print "<ul>\n";
foreach(@Spieler) {
  print "<li>$_</li>\n";
}
print "</ul>\n";
print "<p>Folgende Spielst&auml;nde sind aktuell:</p>\n";
print "<ul>\n";
my @Namen = keys(%Spielstaende);
foreach(@Namen) {
  print "<li>$_: $Spielstaende{$_} Punkte</li>\n";
}
print "</ul>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert einen Array namens @Spieler und einen Hash namens %Spielstaende. Der Spieler Fred, der sich aus dem Spiel ausklinkt, wird aus beiden Datenstrukturen mit undef entfernt. Dabei bleiben jedoch das Array-Element für Fred und das entsprechende Elementpaar im Hash erhalten. Im Array wird durch undef der Wert, also der Name entfernt, und im Hash bleibt der Name Fred erhalten, nur dessen zugeordneter Wert 100 wird entfernt. "Entfernt" bedeutet in beiden Fällen, dass der Wert auf undef gesetzt wird. Zur Kontrolle wird im Beispiel HTML-Code mit allen Daten ausgegeben. Die entfernten Elemente sind darin ebenfalls enthalten, weil sie noch vorhanden sind, jedoch ohne sichtbaren Wert. Stattdessen erfolgt beim Zugriff auf diese Elemente eine Fehlermeldung. Der Wert undef bedeutet, dass der entsprechende Skalar oder das entsprechende Element (noch) keinen Wert besitzt. Es ist "undefiniert". Es kann jedoch auf undef hin abgefragt werden. Beispiel:
unless (defined $Spielstaende{'Fred'}) { print "Fred ist ausgestiegen"; }.

Beachten Sie:

Um in einem Hash ein Elementpaar vollständig zu löschen, gibt es die Funktion nach oben delete. Um ein Element aus einem Array vollständig zu löschen, stehen die Funktionen nach oben pop, nach oben shift und nach oben splice zur Verfügung.

unshift - Elemente am Anfang eines Arrays hinzufügen

Fügt ein oder mehrere neue Elemente am Anfang eines Arrays an. Der Array wird entsprechend länger.

Erwartet als Parameter:
1. den gewünschten Array,
2. bis n. das oder die vorne einzufügenden Elemente.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Links=("<a href=\"http://www.willy-online.de/\">willy-online.de</a><br>\n",
        "<a href=\"http://www.suedelbien.de/\">suedelbien.de</a><br>\n",
        "<a href=\"http://www.sagmal.de/\">sagmal.de</a><br>\n");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";
unshift(@Links,"<a href=\"http://www.ganze-kerle.de/\">ganze-kerle.de</a><br>\n");
print "@Links";
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert einen Array mit drei WWW-Links, fertig notiert als HTML-Verweise. Bevor der Array mit den Links ausgegeben wird, wird dem Array mit unshift vorne ein neues Element angefügt. Anschließend wird der gesamte Array mit nunmehr vier Verweisen ausgegeben, wobei der hinzugefügte Verweis der erste ist.

values - Alle Werte eines Hashes ermitteln

Speichert alle Werte von Elementpaaren eines Hashes in einer Liste.

Erwartet als Parameter:
1. den Hash.

Gibt eine Liste mit den Werten der Elementpaare zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Umgebungswerte = values(%ENV);
my @Umgebungsvariablen = keys(%ENV);
my @Umgebung;
for(my $i=0; $i < @Umgebungswerte; $i++) {
  $Umgebung[$i] = $Umgebungsvariablen[$i]." = ".$Umgebungswerte[$i];
}
@Umgebung = sort(@Umgebung);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "<p>Folgende Umgebungswerte sind definiert:</p>\n";
print "<ul>\n";
foreach(@Umgebung) {
  print "<li>$_</li>\n";
}
print "</ul>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel ermittelt mit values alle Werte des Seite vordefinierten Hashes %ENV in der Liste @Umgebungswerte. Mit Hilfe der Funktion nach oben keys wird eine entsprechende Liste @Umgebungsvariablen für die Elementnamen des Hashes erzeugt. Anschließend wird eine neue Liste @Umgebung erzeugt. In dieser Liste werden die beiden separaten Listen für die Namen und Werte in einer Seite for-Schleife zusammengeführt. Jeder Listeneintrag der Liste @Umgebung besteht aus dem jeweiligen Namen einer Umgebungsvariablen, einem Gleichheitszeichen und dem zugehörigen Wert (siehe auch: Seite Zeichenketten zusammenfügen). Diese neue Liste wird mit Hilfe der Funktion nach oben sort sortiert. Anschließend wird HTML-Code mit der sortierten Liste ausgegeben.

nach oben
weiter | Seite Funktionen für Berechnungen
zurück | Seite Funktionen für Zeichenketten
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für Berechnungen

SELFHTML

Funktionen für Berechnungen
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten abs - absoluten Wert einer Zahl ermitteln
nach unten atan2 - Arcus Tangens von y durch x ermitteln
nach unten cos - Cosinus einer Zahl ermitteln
nach unten exp - Exponentialwert einer Zahl auf Basis der Zahl "e" ermitteln
nach unten hex - Dezimalwert einer Hexadezimalzahl ermitteln
nach unten int - Ganzzahlanteil einer Zahl ermitteln
nach unten log - Natürlichen Logarithmus einer Zahl ermitteln
nach unten oct - Dezimalwert einer Oktalzahl ermitteln
nach unten rand - Zufallswert ermitteln
nach unten sin - Sinus einer Zahl ermitteln
nach unten sqrt - Quadratwurzel einer Zahl ermitteln
nach unten srand - Zufallsberechnung initialisieren
nach unten

Allgemeines zu diesen Funktionen

Perl stellt in seinem Kern nur wenige mathematische Funktionen zur Verfügung, da es eher als Sprache für Zeichenketten- und Dateiverarbeitung konzipiert ist. Es gibt jedoch mächtige Module, die Perl auch zu einer mathematisch mächtigen Sprache machen. Beachten Sie neben den hier beschriebenen Funktionen deshalb auch die Seite Standardmodule, die sich problemlos einbinden lassen und viele weitere interessante Funktionen für mathematisch-naturwissenschaftliche und kaufmännische Berechnungen zur Verfügung stellen.

abs - absoluten Wert einer Zahl ermitteln

Erwartet als Parameter:
1. eine beliebige erlaubte Zahl.

Gibt den positiven Wert der Zahl zurück, falls sie negativ ist. Ist die Zahl positiv, wird sie unverändert zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Zahlen = (1463.45,2038.02,-12348.12,5671.12,-4939.48,-1124.09);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";
print "<table border=\"1\">\n";
print "<tr><th>schwarze Zahlen</th><th style=\"color:red\">rote Zahlen</th></tr>\n";
foreach my $Zahl (@Zahlen) {
  if($Zahl >= 0) {
    print "<tr><td>$Zahl</td><td style=\"color:red\">&nbsp;</td></tr>\n";
  }
  else {
    my $Abszahl = abs($Zahl);
    print "<tr><td>&nbsp;</td><td style=\"color:red\">$Abszahl</td></tr>\n";
  }
}
print "</table>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert eine Liste @Zahlen. Einige der Zahlen sind positiv, andere negativ. Anschließend wird HTML-Code ausgegeben. Dabei wird eine Tabelle mit zwei Spalten erzeugt. Links stehen positive (schwarze) Zahlen, rechts negative (rote) Zahlen. Die roten Zahlen sollen ohne das Minusvorzeichen, aber eben in roter Färbung dargestellt werden. Deshalb wird, falls eine Zahl negativ ist, die Funktion abs auf die Zahl angewendet. Das Ergebnis wird in dem Skalar $Abszahl gespeichert und ausgegeben.

atan2 - Arcus Tangens von x durch y ermitteln

Erwartet als Parameter:
1. eine beliebige erlaubte Zahl x,
2. eine beliebige erlaubte Zahl y.

Gibt den Arcus Tangens von x durch y zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";
my $Wert = atan2(1.394,5.01);
print "Der Arcus Tangens von 5.01 durch 1.394 lautet $Wert\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel übergibt der Funktion atan2 die beiden Gleitkommazahlen 1.394 und 5.01. Die Funktion gibt den Arcus Tangens von 1.394/5.01 zurück. Zur Kontrolle wird HTML-Code mit dem Ergebnis ausgegeben.

cos - Cosinus einer Zahl ermitteln

Erwartet als Parameter:
1. eine beliebige erlaubte Zahl.

Gibt den Cosinus der Zahl zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";
my $Eins = cos(0);
print "1 bleibt $Eins, wie bedingt bedacht\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt die Zahl 1 aus dem Cosinus von 0 (dessen Ergebnis 1 ist). Zur Kontrolle wird HTML-Code mit der Zahl in einem entfernt an Karneval erinnernden Sinnspruch ausgegeben.

exp - Exponentialwert einer Zahl auf Basis der Zahl "e" ermitteln

Erwartet als Parameter:
1. eine beliebige erlaubte Zahl.

Gibt den Exponentialwert der Zahl zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";
my $x = exp(1);
print "x = $x\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt HTML-Code. Dabei wird der Exponentialwert von 1 ermittelt und in dem Skalar $x gespeichert. Das Ergebnis wird ausgegeben.

hex - Dezimalwert einer Hexadezimalzahl ermitteln

Konvertiert einen als Zeichenkette vorliegenden Hexadezimalwert in eine entsprechende Dezimalzahl.

Erwartet als Parameter:
1. eine Zeichenkette, die einen gültigen Hexadezimalwert darstellt, also beispielsweise "0xB56A" oder "B56A".

Gibt den entsprechenden Dezimalwert als numerischen Wert zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus - mit dem Übergabeparameter 336699 für Dunkelblau
(Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Farbe = $ENV{'QUERY_STRING'};
my $RotwertHex = substr($Farbe,0,2);
my $GruenwertHex = substr($Farbe,2,2);
my $BlauwertHex = substr($Farbe,4,2);
my $RotwertDez = hex($RotwertHex);
my $GruenwertDez = hex($GruenwertHex);
my $BlauwertDez = hex($BlauwertHex);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test</title></head><body>\n";
print "Die Farbe #$Farbe hat folgende RGB-Anteile:<br>\n";
print "Rotwert: $RotwertDez<br>\n";
print "Gr&uuml;nwert: $GruenwertDez<br>\n";
print "Blauwert: $BlauwertDez<br>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel-CGI-Script erwartet einen Übergabeparameter, der beim Aufruf über einen URI hinter einem Fragezeichen notiert wird. Der Übergabeparameter besteht aus einer HTML-typischen Farbangabe, jedoch ohne das einleitende Gatterzeichen #. Beispiel: http://localhost/cgi-bin/test.pl?FF9933.

Das Beispiel-Script ermittelt den übergebenen Parameter aus der Seite CGI-Umgebungsvariablen QUERY_STRING und speichert den Wert im Skalar $Farbe. Mit Hilfe der Funktion Seite substr werden die Anteile für Rot, Grün und Blau aus der hexadezimalen Angabe extrahiert. Wenn die übergebene Zahl beispielsweise FF9933 lautet, wird in $RotwertHex der Wert "FF" gespeichert, in $GruenwertHex der Wert "99" und in $BlauwertHex der Wert "33". Aus diesen Hexadezimalangaben wird durch Anwendung der Funktion hex jeweils der entsprechende dezimale Farbanteil ermittelt. Das Beispiel gibt die ermittelten Farbanteile aus.

int - Ganzzahlanteil einer Zahl ermitteln

Die Funktion dient einerseits dazu, den Ganzzahlanteil einer Kommazahl vom Nachkommateil zu trennen. Andererseits kann sie auch auf Zeichenketten angewendet werden. Dann interpretiert sie die Zeichenkette so lange, bis sie auf ein Zeichen stößt, das nicht mehr numerisch interpretiert werden kann.

Erwartet als Parameter:
1. eine Zahl oder Zeichenkette.

Liefert den als Ganzzahl interpretierbaren Teil der übergebenen Daten zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Ganzzahl = 23;
my $Kommazahl = 3.1415;
my $Minuszahl = -3.999;

my $Ganzzahl_Int = int($Ganzzahl);
my $Kommazahl_Int = int($Kommazahl);
my $Minuszahl_Int = int($Minuszahl);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "$Ganzzahl nach Anwendung von int: $Ganzzahl_Int<br>\n";
print "$Kommazahl nach Anwendung von int: $Kommazahl_Int<br>\n";
print "$Minuszahl nach Anwendung von int: $Minuszahl_Int\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert verschiedene Skalare: eine normale Ganzzahl, eine Kommazahl und eine negative Zahl, ebenfalls eine Kommazahl. Daraufhin wird auf jeden der Skalare die Funktion int angewendet. Die Rückgabewerte werden in eigenen, neuen Skalaren gespeichert. Zur Kontrolle wird HTML-Code mit den Werten vor und nach Anwendung der int-Funktion ausgegeben.

log - natürlichen Logarithmus einer Zahl ermitteln

Erwartet als Parameter:
1. eine beliebige erlaubte Zahl.

Gibt den natürlichen Logarithmus der Zahl zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Eins = log(exp(1));
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "$Eins";
print "</body></html>\n";

Erläuterung:

Im Beispiel wird ein Skalar $Eins definiert. Diesem Skalar wird das Ergebnis der Funktionlog zugewiesen. Die Zahl, die dieser Funktion übergeben wird, ist im Beispiel der Rückgabewert der Funktion nach oben exp, angewendet auf die Zahl 1. Da exp die Umkehrfunktion von log ist, ist das Ergebnis des verschachtelten Aufrufs beider Funktionen der Wert 1. Zur Kontrolle wird HTML-Code mit dem Ergebnis ausgegeben.

oct - Dezimalwert einer Oktalzahl ermitteln

Konvertiert einen als Zeichenkette vorliegenden Oktalwert in eine entsprechende Dezimalzahl.

Erwartet als Parameter:
1. eine Zeichenkette, die einen gültigen Oktalwert darstellt, also beispielsweise "755" oder "0755".

Gibt den entsprechenden Dezimalwert als numerischen Wert zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus - mit der Rechteangabe 755 als Übergabeparameter
(Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $UnixRechtOct = $ENV{'QUERY_STRING'};
my $DezRecht = oct($UnixRechtOct);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Die Dezimaldarstellung der Unix-Rechteangabe $UnixRechtOct lautet $DezRecht\n";
print "</body></html>\n";

Erläuterung:

Ein typischer bekannter Anwendungsfall für Oktalwerte sind die Rechtevergaben für User, Group und World im Unix-Dateisystem. Das Beispiel-CGI-Script erwartet so eine typische oktale Rechteangabe und ermittelt daraus den entsprechenden Dezimalwert. Dazu erwartet das Script einen Übergabeparameter, der beim Aufruf über einen URI hinter einem Fragezeichen notiert wird. Der Übergabeparameter besteht aus einem Oktalwert. Beispiel:
http://localhost/cgi-bin/test.pl?0755.

Das Script ermittelt den übergebenen Parameter aus der Seite CGI-Umgebungsvariablen QUERY_STRING und speichert den Wert im Skalar $UnixRechtOct. Dieser Skalar wird wiederum der Funktion oct übergeben, die eine Dezimalzahl daraus erzeugt, die in $DezRecht gespeichert wird. Zur Kontrolle gibt das Script die beiden Werte aus.

rand - Zufallswert ermitteln

Ermittelt eine Zufallszahl zwischen 0 und 1, wenn kein Parameter übergeben wird, oder eine Zufallszahl zwischen 0 inklusive und der Zahl n exklusive, wenn n als Parameter übergeben wird. Das Ergebnis ist eine Gleitpunktzahl.

Erwartet als Parameter:
1. (optional) eine Zahl. Wenn angegeben, wird eine Zufallszahl zwischen 0 und dieser Zahl ermittelt, ansonsten zwischen 0 und 1.

Gibt die ermittelte Zufallszahl zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Zahlen;
for(my $i = 0; $i < 7; $i++) {
  $Zahlen[$i] = int(rand(49) + 1);
}
my @Lottozahlen = sort(NummernSort @Zahlen);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Der Lottotip von Perl lautet:<br>\n";
print "$Lottozahlen[0], $Lottozahlen[1], $Lottozahlen[2], $Lottozahlen[3], $Lottozahlen[4], $Lottozahlen[5]<br>\n";
print "Die Zusatzzahl lautet: $Lottozahlen[6]\n";
print "</body></html>\n";

sub NummernSort {
 if($a < $b)
  { return -1; }
 elsif($a == $b)
  { return 0; }
 else
  { return 1; }
}

Erläuterung:

Das Script nimmt Ihnen die Entscheidung ab, sich Lottozahlen auszudenken. Es ermittelt 7 Zahlen (6 plus Zusatzzahl) zwischen 1 und 49. Die Zahlen werden in einer Seite for-Schleife ermittelt. Damit wirklich ganze Zahlen zwischen 1 und 49 gefunden werden, wird dem Aufruf der rand-Funktion die Zahl 49 als Parameter übergeben. Damit werden jedoch nur Zahlen zwischen 0.0x und 48.9x ermittelt. Durch Hinzuzählen von 1 sind es Zahlen zwischen 1.0x und 49.9x. Indem auf diese gesamte Operation dann noch die Funktion nach oben int angewendet wird, kommen ganze Zahlen zwischen 1 und 49 heraus.
Um die Zahlen schön sortiert auszugeben, wird noch die Funktion Seite sort angewendet. Da es sich um eine numerische Sortierung handelt, benutzt das Script auch die Hilfsfunktion für numerische Sortierung.
Das Script gibt die ermittelten Lottozahlen aus.

Beachten Sie:

Bei dieser Art von Zufallszahlerzeugung handelt es sich nicht um "echte" Zufallszahlen, sondern um Pseudo-Zufallszahlen, die aufgrund eines Anfangswertes mit Hilfe eines Algorithmus erzeugt werden. Sie können diesen Anfangswert auch selbst bestimmen. Dazu dient die Funktion nach unten srand.

sin - Sinus einer Zahl ermitteln

Erwartet als Parameter:
1. eine beliebige erlaubte Zahl.

Gibt den Sinus der Zahl zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $x = 2;
my $Fx = sin($x) + sin(2*$x) - sin(3*$x) + sin(4*$x) - sin(5*$x) + 0.3*sin(25*$x);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "$Fx\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel zeigt eine Mehrfachanwendung der Funktion sin innerhalb einer Berechnung. Das Script gibt das Ergebnis der Berechnung aus.

sqrt - Quadratwurzel einer Zahl ermitteln

Erwartet als Parameter:
1. eine beliebige Zahl größer 0.

Gibt die Quadratwurzel der Zahl zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
for(my $i = 1; $i <= 1000; $i++) {
  my $Wurzel = sqrt($i);
  if($Wurzel == int($Wurzel)) {
    print "Quadratzahl von $Wurzel ist $i<br>\n";
  }
}
print "</body></html>\n";

Erläuterung:

Das Beispiel-Script gibt HTML-Code aus. Dabei wird in einer Seite for-Schleife für die Zahlen 1 bis 1000 mit sqrt die Quadratwurzel ermittelt und jeweils in dem Skalar $Wurzel gespeichert. Dann wird der darin gespeicherte Wert daraufhin abgefragt, ob er mit der Ganzzahl dieses Wertes identisch ist. Zu diesem Zweck wird die Funktion nach oben int angewendet.
Wenn $Wurzel und int($Wurzel) identisch sind, handelt es sich bei dem aktuellen Schleifenwert von $i um eine Quadratzahl. Ist das im Beispiel der Fall, wird eine entsprechende Zeile ausgegeben. Auf diese Weise gibt das Script alle Quadratzahlen zwischen 1 und 1000 aus.

srand - Zufallsberechnung initialisieren

Wenn Sie mit nach oben rand Zufallszahlen erzeugen, benötigt Perl intern einen Initialisierungswert. Wenn Sie selber keinen Wert angeben, ermittelt Perl automatisch einen. Sie können den Wert jedoch auch selber angeben.

Erwartet als Parameter:
1. eine beliebige erlaubte Ganzzahl bzw. eine Zahl, von der der Ganzzahlanteil verwendet wird.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

srand(42);
my $Zufall_1 = rand();
my $Zufall_2 = rand();

srand(42);
my $Zufall_3 = rand();
my $Zufall_4 = rand();

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Zufall 1: $Zufall_1<br>\n";
print "Zufall 2: $Zufall_2<br>\n";
print "Zufall 3: $Zufall_3<br>\n";
print "Zufall 4: $Zufall_4\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel verdeutlicht die Wirkungsweise von srand und den folgenden Aufrufen von rand. srand wird zweimal mit demselben Wert, nämlich mit der Zahl 42, initialisiert. Anschließend wird jeweils zweimal die Funktion rand aufgerufen, und die ermittelten Zufallswerte werden jeweils in eigenen Skalaren gespeichert. Das Beispiel gibt die vier Skalare aus. Die Werte von $Zufall_1 und $Zufall_3 sind dabei gleich, ebenso die Werte von $Zufall_2 und $Zufall_4. Und das ist kein Zufall, sondern die Folge der Tatsache, dass jede bestimmte srand-Initialisierung die gleiche Serie von Zufallszahlen bei jedem anschließenden rand-Aufruf erzeugt.

nach oben
weiter | Seite Funktionen für die Kontrolle des laufenden Scripts
zurück | Seite Funktionen für Listen bzw. Arrays und Hashes
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für die Kontrolle des laufenden Scripts

SELFHTML

Funktionen für die Kontrolle des laufenden Scripts
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten caller - Aufrufkontext ermitteln
nach unten defined - Definition einer Variablen überprüfen
nach unten die - Script wegen eines Fehlers abbrechen
nach unten eval - Anweisungen oder Anweisungsblöcke interpretieren lassen
nach unten exit - Script beenden
nach unten local - Wert von Variablen lokal begrenzen
nach unten my - Gültigkeitsbereich von Variablen begrenzen
nach unten quotemeta - Alle Zeichen außer A-Z, a-z, 0-9 und _ maskieren
nach unten return - aus Subroutine zurückkehren und Wert zurückgeben
nach unten scalar - Ausdruck in skalarem Kontext bewerten
nach unten wantarray - Überprüfen ob Listenkontext gegeben ist
nach unten warn - Warnungen ausgeben
nach unten

Allgemeines zu diesen Funktionen

Die hier versammelten Funktionen dienen vor allem dazu, bestimmte Dinge für das Script festzulegen, zu kontrollieren oder den Ablauf des Scripts zu beeinflussen. So kann eine Seite Subroutine beispielsweise ermitteln, von wo aus sie aufgerufen wurde. Für eine Variable kann überprüft werden, ob sie einen Wert besitzt oder nicht. Die Gültigkeit (Lebensdauer) von Variablen kann auf bestimmte Bereiche des Scripts begrenzt werden. Scripts können in Fehlerfällen oder kritischen Situationen abgebrochen werden oder Warnungen ausgeben.

caller - Aufrufkontext ermitteln

Ermittelt, von wo aus der aktuelle Programmteil aufgerufen wurde, und aus welchem Kontext heraus.

Erwartet als Parameter:
1. (optional) die Rückverfolgungstiefe als Zahl. Wenn Sie mit diesem Parameter experimentieren wollen, probieren Sie zunächst, den Wert 1 zu übergeben. Höhere Werte können dazu führen, dass weniger Information ermittelt wird als erhofft.

Gibt wahlweise einen Skalar oder eine Liste zurück. Wenn der Rückgabewert nur in einem Skalar gespeichert wird, enthält dieser nach Aufruf der Funktion den Namen des aufrufenden Seite Packages. Welche weiteren Rückgabewerte in einer Liste gespeichert werden, zeigt das folgende Beispiel.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
my $Infos = Aufrufe_Starten();
print "$Infos\n";
print "</body></html>\n";

sub Aufrufe_Starten {
  my $Info_Einfach = Aufruf_Info_Einfach();
  my $A_S = "<h3>Einfache Aufruf-Infos:</h3><p>".$Info_Einfach."</p>";
  my $Info_Ausfuehrlich = Aufruf_Info_Ausfuehrlich();
  $A_S = $A_S."<h3>Ausführliche Aufruf-Infos:</h3><p>".$Info_Ausfuehrlich."</p>";
  return($A_S);
}

sub Aufruf_Info_Einfach {
   (my $Package, my $Datei, my $Zeile) = caller();
   my $A_I_E = "<strong>Aufruf erfolgte aus Package:</strong> ".$Package."<br>" if (defined $Package);
   $A_I_E = $A_I_E."<strong>Aufruf erfolgte aus Datei:</strong> ".$Datei."<br>" if (defined $Datei);
   $A_I_E = $A_I_E."<strong>Aufruf erfolgte aus Programmzeile:</strong> ".$Zeile if (defined $Zeile);
   return($A_I_E);
}

sub Aufruf_Info_Ausfuehrlich {
   (my $Package, my $Datei, my $Zeile, my $Subroutine, my $HasArgs, my $WantArray, my $EvalText, my $IsRequire) = caller(1);
   my $A_I_A = "<strong>Aufruf erfolgte aus Package:</strong> ".$Package."<br>" if (defined $Package);
   $A_I_A = $A_I_A."<strong>Aufruf erfolgte aus Datei:</strong> ".$Datei."<br>" if (defined $Datei);
   $A_I_A = $A_I_A."<strong>Aufruf erfolgte aus Programmzeile:</strong> ".$Zeile."<br>" if (defined $Zeile);
   $A_I_A = $A_I_A."<strong>Aufruf erfolgte aus Subroutine:</strong> ".$Subroutine."<br>" if (defined $Subroutine);
   $A_I_A = $A_I_A."<strong>HasArgs:</strong> ".$HasArgs."<br>" if (defined $HasArgs);
   $A_I_A = $A_I_A."<strong>WantArray:</strong> ".$WantArray."<br>" if (defined $WantArray);
   $A_I_A = $A_I_A."<strong>EvalText:</strong> ".$EvalText."<br>" if (defined $EvalText);
   $A_I_A = $A_I_A."<strong>IsRequire:</strong> ".$IsRequire."<br>" if (defined $IsRequire);
   return($A_I_A);
}

Erläuterung:

Das Beispiel gibt HTML-Code aus. Während der HTML-Ausgabe wird die Subroutine Aufrufe_Starten() aufgerufen. Der Rückgabewert des Aufrufs wird in dem Skalar $Infos gespeichert und anschließend ausgegeben.
Die Subroutine Aufrufe_Starten() ruft ihrerseits wieder die Subroutinen Aufruf_Info_Einfach() und Aufruf_Info_Ausfuehrlich() auf. Aus den Rückgabewerten dieser beiden Routinen wird eine Zeichenkette namens $A_S zusammengesetzt und zurückgegeben.
In Aufruf_Info_Einfach steht die einfache Variante eines typischen Aufrufs von caller. Dabei werden drei Listenelemente als Rückgabewert erwartet: der Name des aufrufenden Packages, der aufrufenden Perl-Datei, und die Nummer der Programmzeile, in der der Aufruf erfolgte.
Die Subroutine Aufruf_Info_Ausfuehrlich zeigt dagegen den erweiterten Aufruf von caller. Dabei werden acht Listenelemente als Rückgabewerte erwartet. Neben den drei Elementen der einfachen Variante sind das der Name der aufrufenden Subroutine und folgende Zusatzinformationen:
$HasArgs ist 1, wenn beim Aufruf Argumente übergeben wurden (dazu zählt auch eine leere Liste), ansonsten 0.
$WantArray speichert, ob die Funktion im Listenkontext aufgerufen wurde.
$EvalText speichert einen Inhalt, wenn der Aufruf aus einer nach unten eval()-Bewertung heraus erfolgt (jedoch nicht unbedingt bei Blockbewertungen mit eval{...}).
$IsRequire speichert 1 als Inhalt, wenn der Aufruf aus eval heraus erfolgte, und wenn dabei eine der Funktionen Seite use oder Seite require im Spiel sind.
Die beiden Subroutinen Aufruf_Info_Einfach und Aufruf_Info_Ausfuehrlich im obigen Beispiel stellen aus den gewonnenen Informationen die Zeichenketten $A_I_E bzw. $A_I_A zusammen und geben diese am Ende zurück.

defined - Definition einer Variablen überprüfen

Variablen, egal, ob Skalare, Listen- bzw. Array-Elemente oder Hash-Elemente, haben, solange ihnen nicht explizit irgendein Wert zugewiesen wird, den Wert undef. Mit dieser Funktion können Sie überprüfen, ob einer Variablen bereits ein Wert zugewiesen wurde oder nicht.

Erwartet als Parameter:
1. die zu überprüfende Variable.

Gibt 1 bzw. ein logisches "wahr" zurück, wenn der Variablen ein Wert zugewiesen ist, und 0 bzw. ein logisches "falsch", wenn kein Wert zugewiesen ist.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $ErsterSatz;
my $ZweiterSatz = "Den ersten beissen die Katzen";

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
&Satz_aufsagen;
$ErsterSatz = "...und den letzten wie bekannt die Hunde";
undef $ZweiterSatz;
print "<p></p><i>So - und jetzt noch einmal:</i></p>";
&Satz_aufsagen;
print "</body></html>\n";

sub Satz_aufsagen {
  if(defined $ErsterSatz) {
    print "Der erste Satz lautet <strong>$ErsterSatz</strong><br>\n";
  }
  if(defined $ZweiterSatz) {
    print "Der zweite Satz lautet <strong>$ZweiterSatz</strong><br>\n";
  }
}

Erläuterung:

Das Beispielscript definiert zunächst zwei Skalare namens $ErsterSatz ohne Wertzuweisung und $ZweiterSatz mit Wertzuweisung. Das Script enthält eine Subroutine namens Satz_aufsagen. Darin wird mit defined für die beiden Skalare überprüft, ob ihnen ein Wert zugewiesen wurde. Wenn ja, wird dieser Wert ausgegeben.
Das Script erzeugt HTML-Code und ruft dabei zunächst einmal die Subroutine Satz_aufsagen auf. Anschließend erhält der bislang undefinierte Skalar $ErsterSatz einen Wert, und der Skalar $ZweiterSatz wird mit Seite undef in jenen Zustand versetzt, in dem ihm kein Wert (bzw. der "Nichtwert" undef) zugewiesen ist. Danach wird Satz_aufsagen nochmals aufgerufen.
Beim ersten Aufruf von Satz_aufsagen wird nur "Den ersten beissen die Katzen" ausgegeben, beim zweiten Aufruf nur "...und den letzten wie bekannt die Hunde".

Beachten Sie:

Der Anfangswert undef einer Variablen, den Sie mit der Funktion undef wieder herstellen können, ist etwas anderes als der so genannte Leerstring (""). Eine leere Zeichenkette ist durchaus ein zugewiesener Wert!

die - Script wegen eines Fehlers abbrechen

Beendet ein Script, wenn es keinen Sinn hat, das Script weiter auszuführen. Wird z.B. gern verwendet, wenn eine wichtige Datei nicht geöffnet werden kann.
Schreibt Fehlermeldungen auf die Standardfehlerausgabe STDERR und beendet das Script mit dem aktuellen Wert der Seite vordefinierten Variablen $!. Bei der CGI-Schnittstelle eines Webervers ist die Standardfehlerausgabe meistens eine Log-Datei, in der solche Fehlermeldungen gesammelt werden. Suchen Sie gegebenenfalls in der Dokumentation zu Ihrem Webserver nach, wo und wie der Server CGI-Fehlermeldungen protokolliert.

Erwartet als Parameter:
1. Eine Liste, die auf die Standardfehlerausgabe STDERR geschrieben werden soll. Sinnvollerweise enthält die Liste eine oder mehrere entsprechende Fehlermeldungen.

Beispiel:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

open(TEXT, "</daten/texte/nichtda.txt") || die "Fehler aufgetreten: $!";
my @Zeilen = <TEXT>;
close(TEXT);

Erläuterung:

Das Beispiel versucht, mit Seite open eine Datei zu öffnen, die aber nicht vorhanden ist. Dadurch wird der Oder-Zweig hinter dem Seite logischen Operator || (steht für "oder") aktiv. Dort ist die Funktion die notiert. Sie schreibt auf die Standardfehlerausgabe, dass ein Fehler aufgetreten ist. Indem sie dabei auch die vordefinierte Variable $! mit in die Ausgabe schreibt, wird auch mitprotokolliert, welcher Fehler aufgetreten ist. In diesem Fall ist auch die Anweisung use CGI::Carp qw(fatalsToBrowser) sehr hilfreich, denn der Fehler wird dadurch zusätzlich auf die Standardausgabe geschrieben und kann so je nach Situation im Browser zur Anzeige gelangen.

eval - Anweisungen oder Anweisungsblöcke interpretieren lassen

Perl-Scripts werden normalerweise intern zu Operationscode (sogenannten Opcodes) kompiliert, bevor sie ausgeführt werden. Das merken Sie als Programmierer beispielsweise daran, dass der Perl-Interpreter vor der Ausführung abbricht, sobald das Script Syntaxfehler enthält. Mit Hilfe der eval-Funktion können Sie jedoch den Perl-Interpreter während der Laufzeit eines Scripts aufrufen und innerhalb des Scripts beliebigen Perl-Code interpretieren lassen. Wenn Sie so wollen, kann ein Perl-Script auf diese Weise selber Perl-Scripts schreiben und deren Ausführung in die eigene Ausführung einbetten. In die Code-Erzeugung dürfen natürlich auch Variableninhalte einfließen, die das Script verwaltet.

Erwartet als Parameter:
1. entweder eine Zeichenkette, die Perl-Code enthält, oder einen Anweisungsblock in geschweiften Klammern, vergleichbar einem Anweisungsblock innerhalb einer Subroutine oder innerhalb einer if-Abfrage.
Der Unterschied zwischen beiden Möglichkeiten besteht darin, dass eine übergebene Zeichenkette tatsächlich erst zur Laufzeit kompiliert wird, während der Anweisungsblock in der internen Vorab-Kompilierung mit berücksichtigt wird. Dadurch werden beispielsweise schwere Fehler, die zum Scriptabbruch führen, in einem übergebenen Anweisungsblock bereits bei der Kompilierung erkannt, in einer übergebenen Zeichenkette jedoch erst während der Ausführung.

Gibt das Ergebnis der zuletzt ausgeführten Anweisung in der übergebenen Zeichenkette oder dem übergebenen Anweisungsblock zurück. Im Fehlerfall wird undef zurückgegeben, und die aufgetretene Fehlermeldung ist über die Seite vordefinierte Variable $@ abfragbar.

Beispiel 1 eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Rechenergebnis = eval($ENV{'QUERY_STRING'});

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Das Ergebnis der übergebenen Rechenoperation lautet <strong>$Rechenergebnis</strong><br>\n";
print "</body></html>\n";

Erläuterung:

Das Script erwartet beim Aufruf einen Übergabeparameter, der über URI hinter einem Fragezeichen notiert wird. Der Übergabeparameter besteht in einer Rechenoperation. Es kann sich auch um geklammerte, komplexe Rechenausdrücke handeln, z.B. ((6+7)*4)+(5/7). Nur Leerzeichen sind bei diesem einfachen Beispielscript nicht erlaubt, da sie bei der Übergabe in der URI-Zeile umformatiert werden.
Über die Seite CGI-Umgebungsvariable $ENV{'QUERY_STRING'} kann das Script auf die übergebene Rechenoperation zugreifen. Es übergibt die Umgebungsvariable gleich an die Funktion eval. Die wiederum übergibt die übergebene Zeichenkette, also die Rechenoperation, zur Laufzeit an den Perl-Interpreter. Zurückgegeben wird der Wert dieser Anweisung, und das ist in dem Fall einfach das Rechenergebnis, so wie Perl es in einem Skalar speichern würde, wenn man ihm diese Rechenoperation zuweisen würde.
Zur Kontrolle gibt das Script HTML-Code mit dem Rechenergebnis aus.

Beachten Sie:

Scripts wie im Beispiel oben können extrem gefährlich sein. Benutzen Sie so etwas niemals als öffentlich zugängliches CGI-Script! Denn der übergebene Code, den das Script vom Anwender erhält, wird gnadenlos ausgeführt. Wenn der Anwender jemand ist, der sich auskennt, kann er statt der geforderten Rechenoperation beispielsweise einen Aufruf von Seite system übergeben, bei dem ein ganzer Verzeichnisbaum gelöscht oder die Festplatte formatiert wird.

Beispiel 2 eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Zahl_1 = int(rand(50));
my $Zahl_2 = int(rand(5));
my $Ergebnis;
eval { $Ergebnis = $Zahl_1 / $Zahl_2; };

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";

if($@) {
  print "Folgender Fehler ist aufgetreten: $@\n";
}
else {
  print "$Zahl_1 geteilt durch $Zahl_2 ist $Ergebnis\n";
}
print "</body></html>\n";

Erläuterung:

In diesem Beispiel wird die Funktion eval wie in der Praxis oft üblich zum Abfangen von Fehlern verwendet. Das Script ermittelt mit Seite rand zwei Zufallszahlen $Zahl_1 und $Zahl_2. Anschließend dividiert es Zahl 1 durch Zahl 2. Da bei den ermittelten Zufallszahlen jedoch auch der Wert 0 vorkommen kann, würde ein schwerer Fehler auftreten, wenn Zahl 2 diesen Wert hat. Denn eine Division durch 0 führt auf allen Computersystemen zu einem Fehler. Das Script bettet die Anweisung mit der Division aus diesem Grund in einen eval-Block ein. Falls die Zahl 2 tatsächlich den Wert 0 hat, wird abgebrochen, und in der vordefinierten Variablen $@ steht anschließend die von Perl erzeugte Fehlermeldung.
Das Beispiel gibt HTML-Code aus. Dabei fragt es ab, ob $@ einen Inhalt enthält. Wenn ja, wird der Fehler ausgegeben. Wenn nein, wird das Ergebnis der erfolgreichen Division ausgegeben.

exit - Script beenden

Beendet das Script und gibt einen Wert an den aufrufenden Prozess zurück.

Erwartet als Parameter:
1. (optional) einen zurückzugebenden Wert. Die üblichen Werte, die auch von fremden aufrufenden Prozessen am ehesten erkannt werden, sind 0 für "erfolgreich beenden" und 1 für "Beenden mit Fehler". Wenn Sie keinen Parameter übergeben, wird automatisch 0 verwendet.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus - ohne Übergabeparameter
Beispiel-Seite Anzeigebeispiel: So sieht's aus - mit dem String "Newbie" als Übergabeparameter
(Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

if($ENV{'QUERY_STRING'} eq "") {
   HTML_Output("Username beim Aufruf erwartet!");
   exit(1);
}
else {
   HTML_Output("Hallo $ENV{'QUERY_STRING'}, wie geht's?");
   exit(0);
}

sub HTML_Output {
  print "Content-type: text/html\n\n";
  print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
  print "<html><head><title>Test-Ausgabe</title></head><body>\n";
  print "$_[0]\n";
  print "</body></html>\n";
}

Erläuterung:

Das Script erwartet beim Aufruf einen Übergabeparameter, der hinter einem an den URI angehängten Fragezeichen notiert wird. Der Übergabeparameter besteht in einem User-Namen. Durch Auswerten der Seite CGI-Umgebungsvariablen $ENV{'QUERY_STRING'} gelangt das Script an den übergebenen Namen. Wenn die Umgebungsvariable leer ist (""), wurde kein Name übergeben. In diesem Fall ruft das Script die Subroutine HTML_Output auf und lässt sie eine Fehlermeldung senden. Anschließend wird das Script mit exit(1) beendet. Im anderen Fall, wenn alles in Ordnung ist und ein Name übergeben wurde, ruft das Script ebenfalls HTML_Output auf, diesmal jedoch mit einer netten Begrüßung des Users. In diesem Fall beendet sich das Script anschließend mit exit(0).

Beachten Sie:

Es ist kein guter Programmierstil, exit in Subroutinen zu verwenden. Wenn das Script in solchen Programmteilen fehlerhafte Situationen erkennt, sollte es besser mit nach unten return einen Wert zurückgeben, der an einer zentralen Stelle im Script als Fehler erkannt wird und dort zu einem Aufruf von exit führt.

local - Wert von Variablen lokal begrenzen

Beschränkt den Wert einer Variablen (egal ob Skalar, Liste oder Hash usw.) auf lokale Gültigkeit. Die Beschränkung kann sich auf einen Seite Anweisungsblock oder einen der Bereiche beziehen, die aus diesem Anweisungsblock heraus aufgerufen werden. Wenn es eine gleichnamige Variable außerhalb des Blocks gibt, wird dieser innerhalb des Anweisungsblocks temporär ein neuer Wert zugewiesen. Anwenden können Sie diese Funktion bei der Ersteinführung, also der Deklaration einer Variablen.

Beachten Sie, dass local nicht wirklich eine lokale Variable erzeugt, sondern nur eine globale Variable mit einem lokal gültigen Wert. Verwenden Sie local daher nur in begründeten Ausnahmefällen! "Echte" lokal gültige Variablen werden durch nach unten my deklariert.

Erwartet als Parameter:
1. eine Variable, der temporär ein neuer Wert zugewiesen werden soll.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);
use vars qw($Zahl_1 $Zahl_2);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
my $Ergebnis = Subroutine_1();
print "$Ergebnis\n";
print "</body></html>\n";

sub Subroutine_1 {
   local $Zahl_1 = 10;
   $Zahl_1 = $Zahl_1 * 2;
   $Zahl_2 = Subroutine_2();
   return($Zahl_1 + $Zahl_2);
}

sub Subroutine_2 {
  return($Zahl_1 + 100);

}

Erläuterung:

Das Beispiel deklariert zu Beginn zwei Skalare $Zahl_1 und $Zahl_2. Dies sind globale Variablen, die überall Gültigkeit haben und an jeder Stelle des Scripts verändert werden können. Das Beispiel enthält weiter unten jedoch auch noch eine Subroutine namens Subroutine_1. Innerhalb dieser Subroutine, die aus Sicht von Perl einen Anweisungsblock darstellt, wird mit local $Zahl_1 einer dieser globalen Variablen für die Subroutine Subroutine_1 ein anderer Wert zugewiesen, nämlich 10. Würde das local fehlen, so würde einfach der globalen Variablen $Zahl_1 ein neuer Wert zugewiesen.
$Zahl_1 wird in der darauffolgenden Anweisung mit 2 multipliziert. Hinterher steht 20 als Wert in $Zahl_1, da die Multiplikation mit dem temporären Wert 10 vorgenommen wird.
Aus Subroutine_1 heraus wird anschließend Subroutine_2 aufgerufen. Dort wird wiederum die Variable $Zahl_1 verwendet. Zu diesem Zeitpunkt ist im Script-Ablauf der globale Wert 5 der Variablen $Zahl_1 noch immer durch den temporären Wert 20 ersetzt. Da er auch in Bereichen Gültigkeit hat, die von Subroutine_1 aus aufgerufen werden, wird dieser Wert innerhalb von Subroutine_2 weiter verwendet (hier liegt ein sichtbarer Unterschied zur Funktion nach unten my). Zum aktuellen Wert 20 wird 100 addiert. Der Wert, den Subroutine_2 mit nach unten return zurückgibt, lautet also 120.
Subroutine_1 gibt nach dem Aufruf von Subroutine_2 ebenfalls das Ergebnis einer Addition an den aufrufenden Befehl zurück. Da $Zahl_2 den Wert 120 hat, wird also der Wert 140 zurückgegeben.
Im Hauptprogramm erzeugt das Beispiel HTML-Code. Dabei wird Subroutine_1 aufgerufen und deren Rückgabewert im Skalar $Ergebnis gespeichert. Zur Kontrolle wird das Ergebnis ausgegeben.

my - Gültigkeitsbereich von Variablen begrenzen

Schränkt den Gültigkeitsbereich einer Variablen (egal ob Skalar, Liste oder Hash usw.) auf einen Seite Namensraum oder einen Seite Anweisungsblock ein. Wenn es eine gleichnamige Variable außerhalb des Blocks gibt, wird diese nicht berührt. Anwenden können Sie diese Funktion bei der Definition einer Variablen.

Erwartet als Parameter:
1. eine Variable, deren Gültigkeitsbereich eingeschränkt werden soll.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);
use vars qw($Zahl_1);

$Zahl_1 = 1;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
my $Ergebnis = Subroutine_1();
print "$Ergebnis\n";
print "</body></html>\n";

sub Subroutine_1 {
   my $Zahl_1 = 10;
   my $Zahl_2 = Subroutine_2();
   return($Zahl_1 + $Zahl_2);
}

sub Subroutine_2 {
 return($Zahl_1 + 100);
}

Erläuterung:

Das Beispiel deklariert zu Beginn einen Skalar $Zahl_1. Dies ist eine globale Variable, die überall Gültigkeit hat und an jeder Stelle des Scripts verändert werden kann. Die Deklaration erfolgt mit dem Seite Standardmodul vars. Der Grund dafür ist, dass die Verwendung von use strict sonst keine Deklaration globaler Variablen erlaubt und einen Fehler erzeugen würde. Im Beispiel sehen Sie, wie das Modul vars eingesetzt wird. Mit use eingebunden, steht in der Klammer hinter qw der Name $Zahl_1, also der Name der Variablen, die global deklariert werden soll. In der Klammer hinter qw können Sie als Liste, durch Leerzeichen getrennt, auch mehrere globale Variablen angeben.

Das Beispielscript enthält weiter unten eine Subroutine namens Subroutine_1. Innerhalb dieser Subroutine, die aus Sicht von Perl einen Anweisungsblock darstellt, wird mit my $Zahl_1 eine Variable deklariert, die den gleichen Namen hat wie die globale Variable. Durch Anwendung von my ist es jedoch eine eigene neue Variable, die mit 10 initialisiert wird. Würde das my fehlen, so würde einfach der globalen Variablen $Zahl_1 ein neuer Wert zugewiesen.
Aus Subroutine_1 heraus wird Subroutine_2 aufgerufen. Dort wird wieder die Variable $Zahl_1 verwendet. Zu diesem Zeitpunkt im Script-Ablauf existieren beide Variablen $Zahl_1. Da diejenige, die in Subroutine_1 deklariert wurde, jedoch nur dort Gültigkeit hat, ist innerhalb von Subroutine_2 wieder die globale Variable gemeint. Zu deren Wert 1 wird 100 addiert. Der Wert, den Subroutine_2 mit nach unten return zurückgibt, lautet also 101.
Subroutine_1 gibt nach dem Aufruf von Subroutine_2 ebenfalls das Ergebnis einer Addition an den aufrufenden Befehl zurück. In diesem Fall ist mit $Zahl_1 wieder diejenige Variable gemeint, die innerhalb des gleichen Blocks, also innerhalb von Subroutine_1 deklariert wurde, und die den Wert 10 hat. Da $Zahl_2 den Wert 101 hat, wird also der Wert 111 zurückgegeben.
Im Hauptprogramm gibt das Beispiel HTML-Code aus. Dabei wird Subroutine_1 aufgerufen und deren Rückgabewert im Skalar $Ergebnis gespeichert. Zur Kontrolle wird das Ergebnis ausgegeben.

quotemeta - Alle Zeichen außer A-Z, a-z, 0-9 und _ maskieren

Wandelt eine Zeichenkette so um, dass alle Zeichen außer A bis Z, a bis z, 0 bis 9 und Unterstrich _ mit einem Backslash \ maskiert werden.

Erwartet als Parameter:
1. eine Zeichenkette, die umgewandelt werden soll.

Gibt die umgewandelte Zeichenkette zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";

my $Normaltext = "+++Test+++";
my $Normallaenge = length($Normaltext);
my $Quotematatext = quotemeta($Normaltext);
my $Quotematalaenge = length($Quotematatext);

print "<strong>$Normaltext</strong> wurde umgewandelt in <strong>$Quotematatext</strong><br>\n";
print "Textlänge zuvor: <strong>$Normallaenge</strong> Zeichen<br>\n";
print "Textlänge jetzt: <strong>$Quotematalaenge</strong> Zeichen\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt HTML-Code. Dabei demonstriert es die Wirkungsweise von quotemeta. Ein Skalar namens $Normalext wird zunächst mit einem Wert belegt, der neben dem Wort "Test" diverse Pluszeichen enthält. Außerdem wird mit Seite length die Länge der Zeichenkette ermittelt. Durch die anschließende Anwendung der Funktion quotemeta auf $Normaltext werden die Pluszeichen maskiert. Der Rückgabewert der Funktion wird in einem neuen Skalar namens $Quotemetatext gespeichert. Auch dessen Länge wird mit length ermittelt. Zur Kontrolle gibt das Script alle ermittelten Daten aus. Die maskierte Version hat 6 Zeichen mehr, da jedes Pluszeichen maskiert wurde.

return - aus Subroutine zurückkehren und Wert zurückgeben

Gibt einen Wert an die Anweisung zurück, welche die Seite Subroutine aufgerufen hat.

Erwartet als Parameter:
1. (optional) ein Wert, der zurückgegeben werden soll. Es kann sich um eine Zahl, eine Zeichenkette oder um eine beliebige Variable (auch um eine komplette Liste oder einen Hash) handeln. Wenn kein Parameter übergeben wird, wird einfach die Subroutine verlassen und je nach zuletzt ausgeführtem Kontext eine leere Liste oder ein Skalar mit dem Wert undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
my $Ausgabe = fett("eine wichtige Angelegenheit");
print "<p>$Ausgabe</p>\n";
$Ausgabe = kursiv("eine noch wichtigere Angelegenheit");
$Ausgabe = fett($Ausgabe);
print "<p>$Ausgabe</p>\n";
print "</body></html>\n";

sub fett {
  my $fetterText = "<strong>$_[0]</strong>";
  return $fetterText;
}

sub kursiv {
  my $kursiverText = "<i>$_[0]</i>";
  return $kursiverText;
}

Erläuterung:

Das Beispiel enthält zwei Subroutinen namens fett und kursiv. In beiden Subroutinen wird ein übergebener Parameter erwartet, der in dem vordefinierten Array für Übergabeparameter (@_) an erster Stelle ($_[0]) steht. Dieser übergebene Parameter wird in die HTML-Tags für fett bzw. kursiv gesetzt. Die Skalare $fetterText bzw. $kursiverText, die dieses Konstrukt speichern, werden anschließend mit return zurückgegeben.
Das Script erzeugt HTML-Code. Während der Ausgabe ruft es die beiden Subroutinen auf. Der Rückgabewert wird jeweils in dem Skalar $Ausgabe gespeichert. Im zweiten Fall werden sogar beide Subroutinen hintereinander aufgerufen. Dadurch wird der übergebene Text erst kursiv, dann fett, also insgesamt fett kursiv. Zur Kontrolle werden die HTML-Konstrukte ausgegeben.

Beachten Sie:

Subroutinen geben auch dann etwas zurück, wenn sie nicht mit return verlassen werden. Wenn Sie beispielsweise eine Subroutine so aufrufen:
$Ausgabe = Test();
und die Subroutine so aussieht:
sub Test { $x = 1; }
dann ist in $Ausgabe anschließend der Wert 1 gespeichert.

scalar - Ausdruck in skalarem Kontext bewerten

Erwartet als Parameter:
1. einen beliebigen Ausdruck. Es kann sich um eine Variable, einen Funktionsaufruf, eine Berechnung, eine Zuweisung usw. handeln.

Gibt den Wert zurück, den der übergebene Ausdruck bei skalarem Kontext liefert.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
my $Singular = "ein Tisch";
my @Plural = ("ein Tisch","noch ein Tisch");
my $Ausgabe_1 = scalar($Singular);
my $Ausgabe_2 = scalar(@Plural);
my $Ausgabe_3 = scalar(time() > 900000000 ? 1 : 0);
print "Ausgabe 1: $Ausgabe_1<br>\n";
print "Ausgabe 2: $Ausgabe_2<br>\n";
print "Ausgabe 3: $Ausgabe_3\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel gibt HTML-Code aus. Dabei definiert es einen Skalar namens $Singular und eine Liste namens @Plural. Auf beide wird die Funktion scalar angewendet. Der skalare Rückgabewert wird in den Skalaren $Ausgabe_1 und $Ausgabe_2 gespeichert. Außerdem wird noch ein dritter Skalar $Ausgabe_3 definiert, dem der skalare Kontext einer komplexeren Anweisung zurückgegeben wird. In der Anweisung wird ermittelt, ob der Rückgabewert der Funktion Seite time größer als 900000000 ist. Wenn ja, wird 1 zurückgegeben, wenn nein, wird 0 zurückgegeben. Anschließend gibt das Script die 3 ermittelten Werte aus.
$Ausgabe_1 gibt einfach den Inhalt des Skalars $Singular aus, also ein Tisch. Da der bewertete Ausdruck ein Skalar ist, hat der skalare Kontext keinen Einfluss auf den zurückgegebenen Wert.
$Ausgabe_2 gibt eine Zahl aus, nämlich 2. Der Grund ist, dass die skalare Interpretation einer Liste, im Beispiel der Liste @Plural, die Anzahl der Elemente ermittelt, die in der Liste enthalten sind.
$Ausgabe_3 gibt 1 oder 0 aus, je nachdem, welchen Wert time zurückgeliefert hat. Da 1 und 0 normale Einzelwerte sind, ist der skalare Kontext bereits gegeben.

wantarray - Überprüfen ob Listenkontext gegeben ist

Erwartet keine Parameter

Gibt 1 bzw. TRUE zurück, wenn das aufrufende Programm oder die aufrufende Subroutine einen Listenkontext erwartet, und 0 bzw. FALSE, wenn ein skalarer Kontext erwartet wird. Gibt undef zurück, wenn gar kein Kontext erwartet wird (sogenannter void context).

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";

my @Zahlen = (1,2,3,4,5);

my $Normalsumme = Summe_ermitteln(@Zahlen);
print "Die normale Summe von 1,2,3,4,5 ist <strong>$Normalsumme</strong><br>\n";

my @Kumulativsummen = Summe_ermitteln(@Zahlen);
print "Die Kumulativsummen von 1,2,3,4,5 sind <strong>@Kumulativsummen</strong><br>\n";

print "</body></html>\n";

sub Summe_ermitteln {
   if(wantarray) {
     my @Summe = @_;
     my $Wert;
     foreach my $Summe (@Summe) {
        $Summe = $Wert += $Summe;
     }
     return @Summe;
   }
   else {
     my $Wert;
     foreach my $Summe (@_) {
        $Wert += $Summe;
     }
     return $Wert;
   }
}

Erläuterung:

Das Beispiel enthält eine Subroutine namens Summe_ermitteln. Die Funktion erwartet einen Array von Zahlen als Parameter, die über die Parameterliste @_ abgefragt werden können. Innerhalb der Funktion wird mit if(wantarray) abgefragt, ob die Anweisung, die die Subroutine aufruft, als Rückgabewert eine Liste oder einen Skalar erwartet. Wenn eine Liste erwartet wird, wird der if-Zweig ausgeführt. Wenn ein Skalar erwartet wird, dann der else-Zweig. Im if-Zweig ist ein Algorithmus notiert, der aus den übergebenen Zahlen Kumulativsummen ermittelt. Die Kumulativsummen werden in einer Liste namens @Summe festgehalten. Diese Liste wird am Ende zurückgegeben. Im else-Zweig dagegen ermittelt die Funktion einfach nur die Summe der übergebenen Zahlen und hält das Ergebnis in dem Skalar $Wert fest, den sie am Ende zurückgibt.
Im Hauptprogramm wird HTML-Code erzeugt. Dabei wird insgesamt zweimal die Subroutine Summe_ermitteln aufgerufen. Einmal wird der Rückgabewert in einem Skalar namens $Normalsumme gespeichert, und beim anderen mal in einer Liste namens @Kumulativsummen. Dadurch wird beim ersten Aufruf der Subroutine der else-Zweig ausgeführt, und beim zweiten Aufruf der if-Zweig. Zur Kontrolle gibt das Script die jeweils ermittelten Ergebnisse aus.

warn - Warnungen ausgeben

Schreibt Warnungen auf die Standardfehlerausgabe STDERR, ohne das Script zu beenden (im Gegensatz zu nach oben die). Für die CGI-Schnittstelle eines Webservers ist die Standardfehlerausgabe meistens eine Log-Datei, in der solche Fehlermeldungen gesammelt werden. Suchen Sie gegebenenfalls in der Dokumentation zu Ihrem Webserver nach, wo und wie der Server CGI-Fehlermeldungen protokolliert.

Erwartet als Parameter:
1. Eine Liste mit der oder den Meldungen, die auf die Standardfehlerausgabe STDERR geschrieben werden sollen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus - ohne Übergabeparameter
Beispiel-Seite Anzeigebeispiel: So sieht's aus - mit dem String "hallo" als Übergabeparameter
(Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Daten = $ENV{'QUERY_STRING'};

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";

if(! -e "/tmp/idx.txt") {
  warn("idx.txt nicht gefunden. Datei wird deshalb neu erzeugt\n");
  open(FILE,">/tmp/idx.txt");
  print FILE "$Daten\n";
}
else {
  open(FILE,">>/tmp/idx.txt");
  print FILE "$Daten\n";
}
print "<strong>in Datei geschrieben:</strong> $Daten\n";
close(FILE);

print "</body></html>\n";

Erläuterung:

Das Script erwartet einen Übergabeparameter, der hinter einem Fragezeichen notiert wird. Der Übergabeparameter ist in diesem Beispiel ein User-Name. Durch Auswerten der Seite CGI-Umgebungsvariablen $ENV{'QUERY_STRING'} gelangt das Script an die übergebenen Daten.
Das Script erzeugt HTML-Code. Währenddessen versucht es, mit Seite open eine Datei namens /usr/web/temp/idx.txt zu öffnen, um die übergebenen Daten ans Ende der Datei zu schreiben. Falls die Datei nicht existiert, wird sie im if-Zweig zwar neu erzeugt (falls das Verzeichnis /usr/web/temp zumindest schon existiert), aber es wird mit warn eine entsprechende Warnung auf die Standardfehlerausgabe, die dem error_log des Webservers entspricht, geschrieben. Sie erhalten diese Warnung also nicht im Browserfenster angezeigt.
Zur Kontrolle wird auch noch übermittelt, welche Daten in die Datei geschrieben wurden. Diese Mitteilung sehen Sie allerdings in Ihrem Browser.
Die if-Abfrage überprüft mit dem Seite Dateitestoperator -e, ob die Datei bereits existiert. Abhängig davon ist die Reaktion des Scripts.

nach oben
weiter | Seite Funktionen für Datum und Uhrzeit
zurück | Seite Funktionen für Berechnungen
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für Datum und Uhrzeit

SELFHTML

Funktionen für Datum und Uhrzeit
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten gmtime - Zeitpunkt in Datums-/Uhrzeit-Elemente aufschlüsseln (Greenwich-Zeitzone)
nach unten localtime - Zeitpunkt in Datums-/Uhrzeit-Elemente aufschlüsseln (lokale Zeitzone)
nach unten time - Zeitpunkt ermitteln
nach unten

Allgemeines zu diesen Funktionen

Die Basisfunktion der Zeitberechnung unter Perl ist nach unten time. Sie ermittelt den aktuellen Zeitpunkt, und zwar in Sekunden, die seit dem logischen Unix-Urknall, seit dem 1.1.1970, 0.00 Uhr, vergangen sind. Mit dieser Zahl können Sie dann eine der Funktionen nach unten localtime oder nach unten gmtime versorgen, um die einzelnen Elemente von Datum und Uhrzeit des aktuellen Zeitpunkts zu erhalten, also etwa Tag, Monat, Jahr oder Stunden und Minuten der Uhrzeit.

Beachtenswert ist auch das Seite Standardmodul Time::Local. Dort finden Sie Umkehrfunktionen zu den hier vorgestellten Funktionen nach unten localtime und nach unten gmtime.

gmtime - Zeitpunkt in Datums-/Uhrzeit-Elemente aufschlüsseln (Greenwich-Zeitzone)

Funktioniert genauso wie nach unten localtime, mit dem einzigen Unterschied, dass nicht die Uhrzeit auf dem Rechner ermittelt wird, sondern die Greenwich-Zeit (Nullmeridian).

localtime - Zeitpunkt in Datums-/Uhrzeit-Elemente aufschlüsseln (lokale Zeitzone)

Ermittelt für einen Zeitpunkt die einzelnen Zeitangaben.

Erwartet als Parameter:
1. die Anzahl Sekunden, gerechnet ab dem 1.1.1970, bis zum gewünschten Zeitpunkt. Um die Daten für den aktuellen Zeitpunkt zu ermitteln, einfach time oder gar nichts übergeben.

Gibt wahlweise eine Liste zurück, die aus 9 Elementen besteht, in denen die Einzeldaten gespeichert sind, oder eine Zeichenkette, gemäß der C-Funktion ctime, die zum ANSI-Standard gehört.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my ($Sekunden, $Minuten, $Stunden, $Monatstag, $Monat,
    $Jahr, $Wochentag, $Jahrestag, $Sommerzeit) = localtime(time);
my $CTIME_String = localtime(time);
$Monat+=1;
$Jahrestag+=1;
$Monat = $Monat < 10 ? $Monat = "0".$Monat : $Monat;
$Monatstag = $Monatstag < 10 ? $Monatstag = "0".$Monatstag : $Monatstag;
$Stunden = $Stunden < 10 ? $Stunden = "0".$Stunden : $Stunden;
$Minuten = $Minuten < 10 ? $Minuten = "0".$Minuten : $Minuten;
$Sekunden = $Sekunden < 10 ? $Sekunden = "0".$Sekunden : $Sekunden;
$Jahr+=1900;
my @Wochentage = ("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
my @Monatsnamen = ("","Januar","Februar","M&auml;rz","April","Mai","Juni",
           "Juli","August","September","Oktober","November","Dezember");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Datum (Variante 1): $Wochentage[$Wochentag], der $Monatstag.$Monat.$Jahr<br>\n";
print "Datum (Variante 2): $Wochentage[$Wochentag], der $Monatstag. $Monatsnamen[$Monat] $Jahr<br>\n";
print "Uhrzeit (Variante 1): $Stunden.$Minuten Uhr<br>\n";
print "Uhrzeit (Variante 2): $Stunden.$Minuten:$Sekunden Uhr<br>\n";
print "Der heutige Tag ist der $Jahrestag. Tag im laufenden Jahr<br>\n";
print "Als CTIME-Ausgabe lautet dieser Zeitpunkt: $CTIME_String<br>\n";
$Sommerzeit ? print "Es ist Sommerzeit\n" : print "Es ist Normalzeit (keine Sommerzeit)\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel ermittelt die Zeitangaben des aktuellen Zeitpunkts, und zwar einmal im Listenkontext (erster Aufruf von localtime), und einmal im skalaren Kontext (zweiter Aufruf). Anschließend bereitet das Script die ermittelten Daten für die Ausgabe auf. Denn die zurückgegebenen Werte sind in vielen Fällen eher "Rohdaten", die für eine ordentliche Ausgabe noch nachbehandelt werden müssen.
Die Werte für $Monat und $Jahrestag werden zunächst um 1 erhöht, da der Rückgabewert intern bei 0 zu zählen beginnt (für Monate gelten anfangs die Monatsnummern 0 bis 11, und nicht 1 bis 12).
Dann werden diverse Angaben so formatiert, dass sie eine führende 0 erhalten, falls der Wert kleiner als 10 ist. Denn eine Uhrzeitangabe wie 8.1 ist wohl kaum erwünscht, es soll schließlich 08.01 ausgegeben werden. Erreicht wird dies mit Hilfe einer Seite einfachen Entweder-Oder-Abfrage.
Die Jahreszahl wird um 1900 erhöht. Der Grund: der (numerische) Rückgabewert für das Jahr besteht in der Anzahl Jahre seit 1900. Für das Jahr 2000 würde also beispielsweise 100 zurückgegeben. Erst durch das Hinzuzählen von 1900 gelangt man zur tatsächlichen Jahreszahl.
Die dann definierten Listen für Wochentage und Monatsnamen bieten für die spätere Ausgabe die Möglichkeit, deutschsprachige Zeitbezeichnungen zu verwenden.
Das Beispielscript erstellt HTML-Code, um die ermittelten Daten auszugeben. Dabei kann sich das Script auf die nachbehandelten Daten verlassen.

time - Zeitpunkt ermitteln

Ermittelt die Anzahl Sekunden, die vom 1.1.1970 0.00 Uhr bis zum Augenblick des Aufrufs vergangen sind.

Erwartet keinen Parameter.

Gibt die Anzahl Sekunden zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Sekunden = time();
my $Stunden = int($Sekunden / 3600);
my $Tage = int($Sekunden / (24 * 3600));
my $Wochen = int($Sekunden / (7 * 24 * 3600));

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "seit dem 1.1.1970, 0.00 Uhr sind $Sekunden Sekunden vergangen.<br>\n";
print "Das sind $Stunden Stunden, $Tage Tage und $Wochen Wochen.\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel ruft time auf und speichert den Rückgabewert der Funktion in den Skalar $Sekunden. Anschließend berechnet das Script aus der Sekundenzahl die darin enthaltenen Stunden, Tage und Wochen. Um jeweils nur die ganzzahligen Anteile der Bruchberechnungen zu erhalten, wird die Funktion Seite int darauf angewendet. Zur Kontrolle gibt das Script HTML-Code mit den ermittelten Zahlen aus.

nach oben
weiter | Seite Funktionen für Ein-/Ausgabe und Lesen/Schreiben von Daten
zurück | Seite Funktionen für die Kontrolle des laufenden Scripts
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für Ein-/Ausgabe und Lesen/Schreiben von Daten

SELFHTML

Funktionen für Ein-/Ausgabe und Lesen/Schreiben von Daten
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten binmode - Ein-/Ausgabekanal binär behandeln
nach unten close - Ein-/Ausgabekanal schließen
nach unten closedir - Verzeichnis schließen
nach unten eof - auf Dateiende prüfen
nach unten fileno - Nummer eines geöffneten Ein-/Ausgabekanal
nach unten flock - geöffnete Datei vor Zugriffen schützen
nach unten format - Daten vor dem Ausgeben formatieren
nach unten getc - nächstes Zeichen lesen
nach unten open - Ein-/Ausgabekanal öffnen
nach unten opendir - Verzeichnis öffnen
nach unten print - Daten ausgeben
nach unten printf - Daten formatiert ausgeben
nach unten read - bestimmte Anzahl Zeichen lesen
nach unten readdir - Verzeichniseinträge ermitteln
nach unten rewinddir - auf ersten Verzeichniseintrag positionieren
nach unten seek - Dateizeiger positionieren
nach unten seekdir - Verzeichniszeiger positionieren
nach unten select - Ein-/Ausgabekanal auswählen
nach unten sysopen - Datei systemnah öffnen
nach unten sysread - bestimmte Anzahl Zeichen systemnah lesen
nach unten sysseek - Dateizeiger systemnah positionieren
nach unten syswrite - bestimmte Anzahl Zeichen systemnah schreiben
nach unten tell - Position des Dateizeigers ermitteln
nach unten telldir - Position des Verzeichniszeigers ermitteln
nach unten write - formatierte Daten schreiben

nach unten

Allgemeines zu diesen Funktionen

Zu den Grundlagen der Unix-Philosophie (Perl entstand in der Unix-Welt) gehört, dass jedem Prozess drei Standardkanäle zugeordnet werden (können). Es gibt grundsätzlich einen voreingestellten Eingabekanal STDIN - standard input -, einen voreingestellten Ausgabekanal STDOUT - standard output - und einen voreingestellten Kanal für Fehlermeldungen STDERR - standard error. STDIN ist normalerweise mit der Tastatur verbunden oder aber mit einem anderen Gerät, beispielsweise einer Netzwerkschnittstelle, STDOUT und STDERR mit dem Terminal, also beispielsweise dem Monitor. Solange man nur etwas hineinschreibt oder daraus liest, verhalten sich diese Standardkanäle wie normale Dateien. Der große Vorteil besteht darin, dass die von ihnen übermittelten oder gespeicherten Daten umgelenkt werden können, sodass die Ausgabe von STDOUT auf dem Bildschirm erscheinen und der Inhalt von STDERR gleichzeitig in eine Protokolldatei (log) geschrieben werden kann. Ob diese Kanäle einer Software zur Verfügung stehen, ist davon abhängig, ob die Software-Entwickler sie vorgesehen haben.

Für Perl gibt es alle drei Standardkanäle. Ein Perl-Script kann also von STDIN Daten lesen und auf STDOUT Daten ausgeben. Bei Verwendung eines Webservers mit CGI-Schnittstelle werden die Daten aus STDOUT nun in eine spezielle Datei umgeleitet, die vom Webserver an den Web-Browser weitergegeben wird. Dasselbe geschieht mit den Daten, die der Webserver gemeinsam mit einer Browser-Anfrage erhält - der Webserver leitet sie in seinen Ausgabekanal STDOUT, womit diese Daten (z.B. Formulardaten) dem über ein CGI-Script aufgerufenen Perl-Interpreter bereitgestellt werden können.

Die drei Kanäle stellen für Perl so genannte Handles dar. Neben diesen Standardkanälen zur Ein- und Ausgabe können Sie als Programmierer eigene Kanäle zur Ein- und Ausgabe öffnen. Dabei vergeben Sie auch eigene Namen für die Handles. Das ist zum Beispiel erforderlich, wenn Sie Daten statt von der Tastatureingabe aus einer Datei lesen oder statt auf den Bildschirm in eine Datei schreiben wollen. Um eine Datei lesen oder schreiben zu können, erzeugen Sie also einfach ein Datei-Handle. Dies passiert beim Öffnen einer Datei - hierzu dient vor allem die Funktion nach unten open. Nachdem Sie eine Datei geöffnet und dabei ein Datei-Handle vergeben haben, haben Sie über das Datei-Handle Zugriff auf die Datei.

Perl stellt diverse Funktionen zur Verfügung, um auf Dateien lesend und schreibend zugreifen zu können. Zu einem Datei-Handle gehört ferner ein Dateizeiger. Der Dateizeiger speichert beim Lesen und Schreiben die aktuelle Byteposition innerhalb der Datei. Sie können die Position des Dateizeigers ermitteln und den Dateizeiger zum Beispiel bei Dateien mit bestimmten Dateiformaten an eine andere Position setzen. Auf diese Weise können Sie Schreib- und Lesevorgänge genau steuern.

Für Verzeichnisse - Ordner eines Dateisystems - gibt es eigene Funktionen. Ein Verzeichnis können Sie ebenfalls öffnen. Dann können Sie Einträge des Verzeichnisses lesen, zum Beispiel, um zu ermitteln, ob in dem Verzeichnis Dateien eines bestimmten Typs vorkommen. Verzeichnisfunktionen erkennen Sie an dem dir im Namen. So sind etwa open oder seek Dateifunktionen, während opendir und seekdir Verzeichnisfunktionen sind.

Neben den normalen Funktionen zum Lesen und Schreiben von Dateien gibt es auch systemnahe Varianten der entsprechenden Funktionen. Benutzen Sie solche Funktionen jedoch nur, wenn Sie einen besonderen Grund dazu haben! Diese Art von Funktionen erkennen Sie am sys im Namen. Während beispielsweise read eine normale Lesefunktion ist, ist sysread die entsprechende systemnahe Variante dieser Funktion.

Beachten Sie:

Perl-Scripts, die Sie als CGI-Scripts einsetzen, können mit Hilfe dieser Funktionen Dateien auf dem Server-Rechner lesen und schreiben. Auf das Dateisystem eines entfernten Client-Rechners, dessen dort laufender Browser vom Webserver Daten angefordert hat, haben Sie mit diesen Funktionen keinen Zugriff (auch wenn das manchmal von einigen weniger erfahrenen Perl-Bastlern gewünscht und an manchen Stellen diskutiert wird)!

binmode - Datei binär behandeln

Wichtig, um Binärdateien (z.B. Grafikdateien) korrekt einzulesen oder zurückzuschreiben, wenn das Betriebssystem, unter dem das Perl-Script läuft, zwischen Text- und Binärdateien unterscheidet. Unix macht diese Unterscheidung nicht, die Funktion binmode ist deshalb für Perl-Scripts unter Unix bedeutungslos. Windows dagegen unterscheidet zwischen Text- und Binärmodus.
Bei nicht binären Dateien, also bei Klartextdateien, werden die zwei aufeinander folgenden Steuerzeichen CR (Carriage Return) und LF (Line Feed) beim Lesen der Datei unter Windows automatisch zu einem LF zusammengefasst. Beim Schreiben einer Textdatei wird jedes LF automatisch wieder in zwei Zeichen CR und LF umgewandelt.
Durch Aufruf der Funktion binmode schalten Sie diesen Automatismus aus. So verhindern Sie, dass der Automatismus an Stellen greift, an denen er nicht greifen soll, etwa, wenn Sie numerisch gespeicherte Daten einlesen, die zufällig zwei Bytes in Folge enthalten können, deren Werte den Zeichenwerten für CR und LF entsprechen.

Erwartet als Parameter:
1. das Handle eines Ein-/Ausgabekanals.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $AnzahlBytes = -s "/usr/web/src/ship.gif";
my $Speicher;
open(GRAFIK, "</usr/web/src/ship.gif");
binmode(GRAFIK);
my $geleseneBytes = read(GRAFIK, $Speicher, $AnzahlBytes);
close(GRAFIK);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
print "<h1>der Inhalt der Grafikdatei als Zeichensalat:</h1>\n";
print "<p><tt>$Speicher</tt></p>";
print "</body></html>\n";

Erläuterung:

Das Beispiel liest eine GIF-Grafikdatei binär ein. Dazu wird die Datei mit nach unten open geöffnet. Anschließend wird die Funktion binmode mit dem Datei-Handle der geöffneten Datei (GRAFIK) aufgerufen. Danach wird die Datei mit der Funktion nach unten read eingelesen.
Zu Testzwecken wird HTML-Code, der den eingelesenen Inhalt der Grafik als Zeichensalat darstellt, wieder ausgegeben. Der eingelesene Inhalt befindet sich nach dem Einlesen im Skalar $Speicher.

Beachten Sie:

Weitere Einzelheiten zum Einlesen binärer Dateien werden bei der Funktion nach unten read beschrieben.

Der verwendete Ausdruck -s zum Feststellen der Dateigröße, gespeichert in $AnzahlBytes, gehört zu einer Reihe ähnlicher Ausdrücke, die das Ermitteln von Eigenschaften einer Datei erlauben. Weitere Einzelheiten dazu im Abschnitt über Seite Dateitestoperatoren.

close - Datei schließen

Schließt eine Datei, die zuvor mit nach unten open geöffnet wurde.

Erwartet als Parameter:
1. das Handle eines geöffneten Ein-/Ausgabekanals, der geschlossen werden soll.

Beispiel mit Erläuterung:

Ein vollständiges Beispiel mit Erläuterung der beiden zusammenhängenden Funktionen open und close wird bei der Funktion nach unten open behandelt.

Beachten Sie:

Wenn Sie eine zuvor geöffnete Datei nicht explizit mit close schließen, wird die Datei von Perl beim Beenden des Scripts automatisch geschlossen.

closedir - Verzeichnis schließen

Schließt ein Verzeichnishandle, das zuvor mit nach unten opendir geöffnet wurde.

Erwartet als Parameter:
1. das Verzeichnishandle.

Beispiel mit Erläuterung:

Ein vollständiges Beispiel mit Erläuterung der drei zusammenhängenden Funktionen opendir, readdir und closedir wird bei der Funktion nach unten opendir behandelt.

eof - auf Dateiende prüfen

Fragt eine geöffnete Datei daraufhin ab, ob der Dateizeiger das Dateiende erreicht hat.

Erwartet als Parameter:
1. das Handle des Ein-/Ausgabekanals.

Gibt true zurück, wenn das Dateiende erreicht ist, und false, wenn es nicht erreicht ist.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $max = 100000;
my $i = 0;
my $Status = 0;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
open(DATEI, "</usr/chatlog/lastnight.txt");
while(1) {
 if(eof(DATEI)) {
   $Status = 1;
   last;
 }
 if($i > $max) {
   $Status = 2;
   last;
 }
 getc(DATEI);
 $i++;
}
close(DATEI);
if($Status == 1) {
 print "<p>Datei war kleiner als $max Bytes, daher ganz gelesen</p>\n";
}
if($Status == 2) {
 print "<p>Datei war zu groß, daher nur $max Bytes gelesen</p>\n";
}
print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt HTML-Code. Dabei wird mit der Funktion nach unten open eine Textdatei /usr/chatlog/lastnight.txt geöffnet. Die geöffnete Datei wird in einer Seite while-Schleife mit der Funktion nach unten getc Zeichen für Zeichen eingelesen. Da die Schleifenbedingung (1) immer wahr ist, werden innerhalb der Schleife Abbruchbedingungen formuliert. Wenn das Dateiende erreicht ist - if(eof(DATEI)) - wird der Skalar $Status auf 1 gesetzt und die Schleife durch last beendet.
Die Schleife wird aber auch dann beendet, wenn mehr Zeichen eingelesen wurden, als in $max definiert sind. In diesem Fall wird $Status auf 2 gesetzt.
Durch Abfragen des Wertes von $Status kann nach Beenden der Schleife festgestellt werden, was die Schleife zum Abbruch gebracht hat. Abhängig davon wird ein entsprechender Satz ausgegeben.

Beachten Sie:

if(eof(DATEI)) ("wenn Dateiende erreicht") oder while(! eof(DATEI)) ("solange Dateiende nicht erreicht") sind typische Formulierungen beim Einsatz der Funktion eof. Sinnvoll sind solche Abfragen und Schleifenbedingungen vor allem dann, wenn Sie Dateien zeichenweise (mit der Funktion getc) oder blockweise (mit der Funktion nach unten read) einlesen.

fileno - Nummer einer geöffneten Datei

Jeder geöffnete Ein-/Ausgabekanal hat intern eine Nummer, auch die nicht selbst geöffneten Ausgabekanäle STDIN, STDOUT und STDERR. Mit dieser Funktion können Sie die interne Nummer eines Ein-/Ausgabekanals ermitteln.

Erwartet als Parameter:
1. das Handle eines Ein-/Ausgabekanals.

Gibt die interne Nummer des Ein-/Ausgabekanals zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
open(DATEI, "</usr/texte/wichtig.txt");
my $Datei = fileno(DATEI);
close(DATEI);
my $Eingabe = fileno(STDIN);
my $Ausgabe = fileno(STDOUT);
my $Fehler = fileno(STDERR);
print "Eingabe= $Eingabe, Ausgabe = $Ausgabe, Fehler = $Fehler, Datei = $Datei\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt HTML-Code für den aufrufenden Browser. Dabei wird mit der Funktion nach unten open eine Textdatei /usr/texte/wichtig.txt geöffnet. Mit fileno(DATEI) wird die interne Nummer des Handles dieser Datei ermittelt und in einem Skalar $Datei gespeichert. Ebenso werden die internen Nummern der drei Standardkanäle ermittelt und in entsprechenden Skalaren gespeichert. Schließlich gibt das Script die ermittelten Nummern aus.

flock - geöffnete Datei vor Zugriffen schützen

Regelt, wie andere Prozesse auf eine Datei zugreifen können, während der aktuelle Prozess die Datei geöffnet hält. Bei CGI-Scripts kann dies sehr wichtig sein. Denn während ein vom Browser eines Anwenders aufgerufenes Script seine Arbeit verrichtet, kann ja bereits ein weiterer Browser eines anderen Anwenders das selbe Script aufrufen. Die beiden Prozesse arbeiten dann im Arbeitsspeicher des Server-Rechners zwar unabhängig voneinander, führen aber nun mal den gleichen Code aus und greifen auf die gleichen Dateien zu. Damit nicht ein anderer Prozess Daten löscht, die der aktuelle Prozess gerade geschrieben hat, ist es dem Prozess zum Beispiel möglich, die Datei vor Zugriffen zu schützen.

Wichtig: Bei Betriebssystemen, die intern kein flock implementiert haben, führt die Anwendung dieser Funktion zu einem Fehler, so etwa auch bei Windows 95/98 (sofern Ihr Perl-Script in einer solchen Systemumgebung laufen sollte).

Erwartet als Parameter:
1. das Handle der geöffneten Datei.
2. die Nummer einer Sperroption oder eine Konstante - erlaubt sind die Nummern 1, 2, 4 und 8 oder die Konstanten LOCK_SH, LOCK_EX, LOCK_NB und LOCK_UN.

  • Nummer 1 oder Konstante LOCK_SH bedeutet shared (Datei mit anderen Prozessen teilen, zum Beispiel, wenn ein Prozess, der lesend auf eine Datei zugreift, andere Prozesse nicht stören soll, die gleichzeitig diese Datei lesen),
  • Nummer 2 oder Konstante LOCK_EX bedeutet exclusive (keinem anderen Prozess irgendeinen Zugriff auf die Datei erlauben),
  • Nummer 8 oder Konstante LOCK_UN bedeutet unlock (Zugriffsschutz ausdrücklich wieder aufheben).
  • Nummer 4 oder Konstante LOCK_NB bedeutet non-blocking (nur in Verbindung mit 1 oder 2 bzw. LOCK_SH oder LOCK_EX erlaubt und beendet den Zugriffsversuch auf die Datei sofort statt zu warten, bis ein Zugriff möglich ist).

Die Konstanten können Sie nur verwenden, wenn Sie das Modul Fcntl einbinden (siehe Beispiel weiter unten).

Gibt true zurück, wenn der Vorgang erfolgreich war, und false, wenn er nicht erfolgreich war.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);
use Fcntl ':flock';
$| = 1;

open(DATENDATEI, "</db/daten.csv");
flock(DATENDATEI, LOCK_EX);

# angenommen, hier passiert etwas Zeitaufwändiges,
# und derweil versucht ein anderer Prozess auf die gleiche Datei zuzugreifen
# dann greift die Sperre

flock(DATENDATEI, LOCK_UN);
close(DATENDATEI);

Erläuterung:

Wenn Sie anstelle der Nummern lieber die Konstanten verwenden möchten, müssen Sie zuerst einen Befehl zum Einbinden des Sperrmoduls notieren, etwa in der obigen Form:
use Fcntl ':flock';

Nachdem Sie eine Datei erfolgreich geöffnet und ein entsprechendes Datei-Handle für den Zugriff auf die Datei haben, können Sie die Sperroptionen für die Datei festlegen. Im Beispiel geschieht das nach dem Aufruf der nach unten open-Funktion mit Hilfe der Anweisung flock(DATENDATEI, LOCK_EX);

Dabei ist DATENDATEI das Datei-Handle, und LOCK_EX die Angabe zur gewünschten Sperroption. Im Beispiel wird die Datei exklusiv gesperrt. Solange die Sperre innerhalb des Scripts nicht aufgehoben oder die Datei geschlossen wird, kann kein anderer Prozess, der flock beachtet, gleichzeitig in die Datei schreiben.

Beachten Sie:

Die beiden Befehle
flock(DATENDATEI, LOCK_UN);
close(DATENDATEI);
dienen im obigen Beispiel nur zum besseren Verständnis. Das explizite Beenden der Sperre ist eigentlich überflüssig, wenn es erst beim Schließen der Datei mit der nach oben close-Funktion erfolgen soll. Denn close hebt zugleich jede Angabe zur Dateisperre auf.

Die Anweisung $| = 1; im obigen Beispiel dient zum Ausschalten der gepufferten Ausgabe (vgl. dazu Seite vordefinierte Variablen in Perl). Dies ist beim Sperren von Dateien zu empfehlen. Denn andernfalls kann es passieren, dass durch gepufferte und verzögerte Ausgabe das Schreiben von Daten erst dann stattfindet, wenn die Sperre bereits aufgehoben ist. Dies würde den ganzen Zweck der Sperre überflüssig machen.

Wenn Sie mit der Sperroption 4 bzw. LOCK_NB arbeiten möchten, müssen Sie diese Option durch eine bitweise Oder-Verknüpfung mit einer Option zum Sperren verknüpfen. Beispiele:
flock(DATENDATEI, LOCK_EX | LOCK_NB);
flock(DATENDATEI, LOCK_SH | LOCK_NB);

Wichtig: flock erzwingt keine Sperre, sondern hat lediglich empfehlenden Charakter. Der Zugriffsschutz ist nur dann wirksam, wenn alle Prozesse, die auf die Datei zugreifen, flock beachten.

format - Daten vor dem Ausgeben formatieren

Dies ist eine mächtige Funktion, um Daten vor der Ausgabe an einem zeichenorientierten Ausgabegerät wie Textbildschirm oder Zeilendrucker ansprechend zu formatieren. Im Zusammenhang mit CGI-Scripts findet diese Funktion kaum Verwendung, da die wenigsten Browser zeichenorientiert arbeiten.

Beispiel 1:

#!/usr/bin/perl -w

use strict;

my $Zuname = "Hummel";
my $Vorname = "Hilde";
my $Wohnort = "Hammelbach";

format STDOUT =
@<<<<<<<<<<<<<  @<<<<<<<<<<<<<  aus @<<<<<<<<<<<<<
$Vorname, $Zuname, $Wohnort
.
write;

Erläuterung:

In Beispiel 1 wird folgendes ausgegeben:

Hilde           Hummel          aus Hammelbach

Die Formatierung der Ausgabe geschieht durch das format-Konstrukt. Die eigentliche Ausgabe geschieht durch den anschließenden Befehl write.

Bei dem Konstrukt zur Formatierung geben Sie hinter format einen Namen für das Format an, normalerweise den Namen des gewünschten Datei-Handles. Der Name ist jedoch in Wirklichkeit kein Datei-Handle, er sieht nur so aus. Das Default-Format für ein Datei-Handle hat lediglich den gleichen Namen wie das Datei-Handle. Im obigen Beispiel wird der Formatname STDOUT angegeben, weil auf die Standardausgabe STDOUT geschrieben werden soll. Hinter dem Formatnamen folgt ein Gleichheitszeichen.
Die Zeilen, die danach folgen, bestehen immer aus Zeilenpaaren. Zuerst werden eine oder mehrere Formatierzeile(n) notiert, und anschließend eine Argumentzeile. In der Formatierzeile definieren Sie mit Hilfe spezieller Zeichensymbole das Ausgabeformat für bestimmte Felder, und in der Argumentzeile nennen Sie die Variablen, die in den entsprechenden Feldern darüber ausgegeben werden.
Mit einem Punkt (.) in einer eigenen Zeile wird das Format-Konstrukt beendet.

Für die Formatierzeile gibt es folgende Regeln:

Anweisung | Bedeutung
@<<<<<<< | Feld linksbündig ausrichten. Die Anzahl der <-Zeichen bestimmt die Feldbreite in Zeichen. Längere Inhalte werden bei der Ausgabe links abgeschnitten.
@>>>>>>> | Feld rechtsbündig ausrichten. Die Anzahl der >-Zeichen bestimmt die Feldbreite in Zeichen. Längere Inhalte werden bei der Ausgabe rechts abgeschnitten.
@|||||| | Feld zentriert ausrichten. Die Anzahl der |-Zeichen bestimmt die Feldbreite in Zeichen. Längere Inhalte werden bei der Ausgabe rechts abgeschnitten.
@#.## | Feld als Zahl mit Dezimalzeichen formatieren. Als Dezimalzeichen ist nur der Punkt erlaubt. Die Anzahl der #-Zeichen vor dem Punkt bestimmt die Vorkomma-Feldbreite, kleinere Zahlen werden dabei rechts zum Dezimalzeichen hin ausgerichtet. Die Anzahl der #-Zeichen hinter dem Punkt bestimmt die Nachkomma-Feldbreite. Bei weniger Nachkommaziffern als angegebenen Zeichen werden Nullen angehängt.

Zusätzlich zu diesen Formatiermöglichkeiten gibt es einige Seite vordefinierte Variablen, die Sie für die Ausgabe benutzen können.

Beispiel 2:

#!/usr/bin/perl -w

use strict;

format STDOUT =
Seite @<<    @>>>>>>>
$%, $~
.
write;

Erläuterung:

In Beispiel 2 wird folgendes ausgegeben:

Seite 0        STDOUT

Die Formatierung der Ausgabe geschieht durch ein format-Konstrukt. Anstelle gewöhnlicher Variablen werden jedoch spezielle vordefinierte Variablen ausgegeben. Folgende spezielle Variablen sind möglich:

Anweisung | Bedeutung
$% | aktuelle Seitennummer
$= | Anzahl Zeilen pro Seite
$- | Anzahl übrig gebliebener Zeilen auf der aktuellen Seite
$~ | Name des aktuellen Formats - per Voreinstellung der Name des benutzten Datei-Handles
$^ | Name des aktuellen Kopfseitenformats - per Voreinstellung der Name aktuellen Formats plus der Zeichenfolge _TOP
$: | Trennzeichen(folge) bei mehrzeiligen Einträgen
$^L | Trennzeichen(folge) für Seitentrenner

Für längere Ausgaben, zum Beispiel von Dateien, können Sie auch Kopfzeilen benutzen. Das folgende Beispiel zeigt, wie Sie eine Datei ausgeben können:

Beispiel 3:

#!/usr/bin/perl -w

use strict;
use vars qw($Zeile);

open(DATEI,"</usr/texte/daten.txt");

format STDOUT_TOP =
****************************************************
Seite @>>
$%
****************************************************
.

format STDOUT =
@<<<<<<<<<<<<<<<
$Zeile;
.

while(<DATEI>) {
  chomp $_;
  $Zeile = $_;
  write;
}
close(DATEI);

Erläuterung:

In Beispiel 3 werden von einer angenommenen Textdatei von jeder Zeile die ersten 15 Zeichen ausgegeben.

Die Formatierung der Ausgabe in Beispiel 3 geschieht durch zwei format-Konstrukte. Die beiden Konstrukte erhalten die Namen STDOUT_TOP und STDOUT. Durch die Zeichenfolge _TOP am Ende eines Formatnamens teilen Sie Perl mit, dass es sich um eine Kopfzeilendefinition handelt. Im Beispiel wird die Kopfzeile mit zwei aus Sternchen bestehenden Linien und die dazwischenstehende aktuelle Seitenzahl formatiert.

Im weiteren Verlauf von Beispiel 3 sehen Sie, wie die Datei in einer Seite while-Schleife zeilenweise in eine Variable namens $Zeile eingelesen wird. Diese Variable wird - ebenfalls in der Schleife - jeweils ausgegeben. Für die Formatierung der Ausgabe ist das Format-Konstrukt mit dem Namen STDOUT verantwortlich. Dort wird die Variable $Zeile in der gewünschten Form ausgegeben.

Beachten Sie:

Die Variable $Zeile muss im obigen Beispiel global deklariert werden. Daher die Anweisung use vars qw($Zeile); zu Beginn.

getc - nächstes Zeichen lesen

Liest ein Zeichen aus einer zuvor geöffneten Datei und positioniert den Dateizeiger um ein Zeichen weiter.

Erwartet als Parameter:
1. das Datei-Handle.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body><pre>\n";
open(DATEI, "</usr/texte/wichtig.txt");
my $Bytes = 0;
while(! eof(DATEI)) {
 my $Zeichen = getc(DATEI);
 print "$Zeichen";
 $Bytes++;
}
close(DATEI);
print "</pre><strong>$Bytes Zeichen gelesen!</strong>\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt HTML-Code für den aufrufenden Web-Browser. Dabei wird auch mit der Funktion nach unten open eine Textdatei /usr/texte/wichtig.txt geöffnet. Die geöffnete Datei wird in einer Seite while-Schleife Zeichen für Zeichen eingelesen, bis das Dateiende, das mit der Funktion nach oben eof abgefragt wird, erreicht ist. Die eingelesenen Zeichen werden ausgegeben. Außerdem wird der Skalar $Bytes bei jedem eingelesenen Zeichen um 1 erhöht. Auf diese Weise wird nebenbei die Anzahl der eingelesenen Zeichen ermittelt. Am Ende wird diese Anzahl mit ausgegeben.

open - Datei öffnen

Öffnet eine Datei zum Lesen und/oder Schreiben oder auch zum Ausführen. Auch Binärdateien werden mit dieser Funktion geöffnet.

Erwartet als Parameter:
1. den Namen des Datei-Handles (frei wählbar), und
2. den Pfadnamen der zu öffnenden Datei, entweder als absolute Pfadangabe oder als relative Pfadangabe aus Sicht des aktuellen Verzeichnisses (wenn das aktuelle Verzeichnis unbekannt ist, empfiehlt es sich, mit Hilfe der Funktion Seite chdir in ein bestimmtes Verzeichnis zu wechseln). Als Trennzeichen für Verzeichnispfade können Sie den einfachen Schrägstrich verwenden, auch wenn das Script auf einem Windows-Rechner laufen soll. Perl setzt diese Syntax je nach Installationsumgebung intern um.
Für den Pfadnamen der zu öffnenden Datei können Sie auch Variablen einsetzen, URIs dürfen Sie jedoch nicht angeben!

Unmittelbar vor dem (Pfad)namen der zu öffnenden Datei notieren Sie mit Hilfe der Zeichen <, > oder | außerdem, wie die Datei geöffnet werden soll. Wenn Sie keine dieser Angaben machen, wird die Datei nur zum Lesen geöffnet. Folgende Angaben sind erlaubt:
<datei.dat bedeutet: Datei datei.dat nur zum Lesen öffnen. Die Datei muss existieren, ansonsten gibt es einen Fehler.
>datei.dat bedeutet: Datei datei.dat zum Schreiben von Daten öffnen. Wenn die Datei bereits existiert, wird ihr bisheriger Inhalt überschrieben. Wenn die Datei noch nicht existiert, wird sie automatisch angelegt.
>>datei.dat bedeutet: Datei datei.dat zum Schreiben von Daten öffnen. Wenn die Datei bereits existiert, wird der neue Inhalt an den alten Inhalt angehängt, d.h. der alte Inhalt wird nicht gelöscht. Wenn die Datei noch nicht existiert, wird sie automatisch angelegt.
+<datei.dat bedeutet: Datei datei.dat zum Lesen und zum Schreiben von Daten öffnen. Die Datei muss existieren, ansonsten gibt es einen Fehler.
+>datei.dat bedeutet: Datei datei.dat zum Lesen und zum Schreiben von Daten öffnen. Wenn die Datei bereits existiert, wird ihr bisheriger Inhalt überschrieben. Wenn die Datei noch nicht existiert, wird sie automatisch angelegt.
+>>datei.dat bedeutet: Datei datei.dat zum Lesen und zum Schreiben von Daten öffnen. Wenn die Datei bereits existiert, wird der neue Inhalt an den alten Inhalt angehängt, d.h. der alte Inhalt wird nicht gelöscht. Wenn die Datei noch nicht existiert, wird sie automatisch angelegt.
|datei bedeutet: Datei datei ist eine ausführbare Programmdatei oder ein Shell-Befehl. Das Programm bzw. der Befehl werden ausgeführt. Aus Unix-Sicht wird dabei eine Pipe zu dem Programm bzw. Befehl geöffnet.
datei| bedeutet: Datei datei ist eine ausführbare Programmdatei oder ein Shell-Befehl. Das Programm bzw. der Befehl werden ausgeführt. Aus Unix-Sicht wird dabei eine Pipe von dem Programm bzw. dem Befehl geöffnet.

Wenn die Datei geöffnet werden kann, gibt die Funktion open den Wert true zurück, andernfalls den Wert undef.

Beispiel:

#!/usr/bin/perl -w

use strict;

open(DATEI, "</tmp/server.cfg") || die "Datei nicht gefunden";
my @Zeilen = <DATEI>;
close(DATEI);

my @NeueZeilen;
foreach(@Zeilen) {
  $_ =~ s/#.*//;
  push(@NeueZeilen,$_) if $_ !~ /^\s*\n/;
}
open(DATEI, ">/tmp/server.cfg") || die "Datei nicht gefunden";
print DATEI @NeueZeilen;
close(DATEI);

Erläuterung:

Das Beispiel zeigt, wie Sie eine Datei öffnen, einlesen und schließen, dann wieder öffnen und den inzwischen verarbeiteten Datenbestand in die Datei zurückschreiben. Es handelt sich um eine angenommene Konfigurationsdatei, in der viele Zeilen hinter dem eigentlichen Konfigurationsbefehl Kommentare enthalten, die mit # beginnen. Im Beispiel wird die Datei so verarbeitet, dass alle diese Kommentarzeilen gelöscht werden.

Zunächst wird die open-Funktion aufgerufen. Dabei wird die gewünschte Datei zum Lesen geöffnet. Die Datei wird dann in den Array @Zeilen eingelesen (in jedem Eintrag von @Zeilen steht anschließend je eine Zeile der Datei). Nach dem Einlesen wird die Datei mit nach oben close wieder geschlossen.
Diese drei Befehle zum Öffnen, Einlesen und Schließen sind typisch.

Im obigen Beispiel werden die eingelesenen Zeilen anschließend der Reihe nach in einer Seite foreach-Schleife verarbeitet. Dabei wird in jeder Zeile der Kommentarteil entfernt. Dies geschieht mit Hilfe eines Seite regulären Ausdrucks zum Suchen/Ersetzen (s/#.*//g). Dann wird die aktuell verarbeitete Zeile mit Seite push dem Array @NeueZeilen hinzugefügt - aber nur dann, wenn die Zeile aus etwas anderem besteht als nur aus Leerraumzeichen mit abschließendem Newline-Zeichen. Auch dazu wird wieder ein geeigneter regulärer Ausdruck angewendet.

Schließlich wird die Datei wieder geöffnet, diesmal jedoch zum Schreiben, genauer gesagt: zum Überschreiben des bisherigen Inhalts. Mit Hilfe der nach unten print-Funktion wird der Array @NeueZeilen in die Datei geschrieben. Anschließend wird die Datei geschlossen.

Beachten Sie:

Wenn Fehler beim Öffnen von wichtigen Dateien passieren, ist es meistens sinnvoll, das Script sofort zu beenden. Dazu dient die Funktion Seite die, die auch im obigen Beispiel zum Einsatz kommt.

In den meisten Fällen ist es sinnvoll, eine geöffnete Datei sofort wieder zu schließen, sobald Sie sie nicht mehr zum Lesen oder Schreiben brauchen. Dadurch geben Sie Betriebssystem-Ressourcen frei, und andere Programme oder Prozesse können ebenfalls wieder auf die Datei zugreifen, wenn Sie die Datei zuvor gesperrt hatten.

opendir - Verzeichnis öffnen

Öffnet ein Verzeichnis, zum Beispiel, um es auszulesen. Dabei vergeben Sie ein Verzeichnishandle, über das Sie auf das Verzeichnis zugreifen können.

Erwartet als Parameter:
1. den Namen des Verzeichnishandles (frei wählbar), und
2. den Pfadnamen des zu öffnenden Verzeichnisses, entweder als absolute Pfadangabe oder als relative Pfadangabe aus Sicht des aktuellen Verzeichnisses (wenn das aktuelle Verzeichnis unbekannt ist, empfiehlt es sich, mit Hilfe der Funktion Seite chdir in ein bestimmtes Verzeichnis zu wechseln).

Gibt TRUE zurück, wenn das Verzeichnis geöffnet werden konnte. Wenn ein Fehler aufgetreten ist, wird dieser in der Variablen $! gespeichert.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Verzeichnis = "/daten/web";
opendir(DIR, $Verzeichnis) || die "$Verzeichnis: $!";
my @Eintraege = readdir(DIR);
closedir(DIR);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
foreach(@Eintraege) {
 print "$_<br>\n";
}
print "</body></html>\n";

Erläuterung:

Im Beispiel wird in dem Skalar $Verzeichnis der Pfad eines Verzeichnisses gespeichert ("/daten/web"). Beachten Sie, dass die Verzeichnisse des Pfades durch einfache Schrägstriche getrennt sind, nicht durch Backslashes wie unter DOS/Windows üblich. Verwenden Sie die Syntax mit den einfachen Schrägstrichen auch dann, wenn Perl bei Ihnen unter Windows läuft. Wenn Sie in einer Windows-Umgebung ein anderes als das aktuelle Laufwerk ansprechen möchten, setzen Sie einfach den Laufwerksbuchstaben mit Doppelpunkt davor, also beispielsweise c:/temp.

Mit der Funktion opendir wird das Verzeichnis geöffnet. DIR ist ein selbst vergebener Name für das Verzeichnishandle. Ferner bekommt die Funktion den Skalar übergeben, in dem das gewünschte Verzeichnis gespeichert ist. Falls das Verzeichnis nicht geöffnet werden kann, endet das Script durch Aufruf der Funktion Seite die.

Das obige Beispiel nutzt das geöffnete Verzeichnis, um mit Hilfe der Funktion nach unten readdir den Verzeichnisinhalt in eine Liste @Eintraege einzulesen. Anschließend wird das Verzeichnis durch Aufruf der Funktion nach oben closedir geschlossen. Das Beispiel gibt dann HTML-Code mit der Liste der Verzeichniseinträge aus.

Beachten Sie:

Es werden alle Verzeichniseinträge eingelesen, also Dateinamen, aber auch Namen von Unterverzeichnissen, sowie die auf den meisten Systemen vorhandenen "symbolischen" Verzeichnisnamen mit einem Punkt (. - steht für das aktuelle Verzeichnis) oder zwei Punkten (.. - steht für das Elternverzeichnis).

print - Daten ausgeben

Schreibt Daten auf die Standardausgabe oder in einen geöffneten Ausgabekanal, also etwa in eine Datei. Die Daten können eine einzelne Zeichenkette oder eine Liste von Zeichenketten sein. Innerhalb solcher Zeichenketten können auch Variablen vorkommen, also einzelne Skalare, aber auch ganze Listen oder Hashes. Perl erkennt die Variablen und schreibt ihren aktuellen Wert an die entsprechende Stelle.
Diese Funktion wird in CGI-Scripts sehr oft verwendet, um HTML-Code auszugeben.

Erwartet als Parameter:
1. Datei-Handle = Optionale Angabe zum Ausgabekanal. Wenn Sie diese Angabe weglassen, wird auf die Standardausgabe STDOUT geschrieben. Wenn Sie mit nach oben open eine Datei geöffnet haben und in diese schreiben wollen, müssen Sie das bei open vergebene Datei-Handle benutzen.
2. Daten[,Daten] = Ein oder mehrere Elemente (Zeichenketten, Zahlen usw.), die geschrieben werden sollen.

Gibt true zurück, wenn Perl die Daten erfolgreich schreiben konnte.

Beispiel 1 eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
print "<table border=\"1\">\n","<tr><td><strong>Umgebungsvariable</strong></td><td><strong>Aktueller Wert</strong></td></tr>\n";
my $i = 0;
my $Eintrag;
foreach $Eintrag (%ENV) {
  if($i == 0) {
    print "<tr><td>$Eintrag</td>\n";
  }
  else {
    print "<td>$Eintrag</td></tr>\n";
  }
  if($i == 0) {
    $i = 1;
  }
  else {
    $i = 0;
  }
}
print "</table>\n","</body></html>\n";

Erläuterung:

Das Beispiel gibt alle Seite CGI-Umgebungsvariablen des Webservers aus, und zwar sauber als HTML-Tabelle formatiert. Dazu werden die Einträge des vordefinierten Hashes %ENV in einer Seite foreach-Schleife abgearbeitet und in die HTML-Tabelle geschrieben. Die entsprechenden HTML-Ausgaben werden mit Hilfe von print-Befehlen geschrieben.

Im letzten der print-Befehle können Sie sehen, wie man mehrere Zeichenketten, durch Kommata getrennt, hintereinander notieren kann.
In den print-Befehlen innerhalb der Schleife können Sie sehen, wie eine Variable (im Beispiel der Skalar $Eintrag) innerhalb einer auszugebenden Zeichenkette notiert ist. An der entsprechenden Stelle wird dann der jeweils aktuelle Wert von $Eintrag ausgegeben.

Wenn Sie viele print-Befehle hintereinander notieren müssen, können Sie auch zu einer für Sie Seite besser lesbaren Lösung greifen:

Beispiel 2 eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print <<"ENDE";
<html>
<head>
<title>Titel</title>
</head>
<body bgcolor="#FFFFCC">
<h1>Ganz normales HTML</h1>
<p>Perl und HTML sind manchmal wie Adam und Eva</p>
</body>
</html>
ENDE

Erläuterung:

Sie können größere Textabschnitte, zum Beispiel kompletten HTML-Code, in einem Stück ausgeben. Dazu notieren Sie hinter dem print-Befehl zwei << und direkt dahinter (ohne Leerzeichen dazwischen) den Namen eines Endbegrenzers, bis zu dem alles einfach als Text ausgegeben werden soll. Hinter dem (frei wählbaren) Namen des Endbegrenzers folgt in der Zeile des print-Befehls das übliche Semikolon. Am Ende des auszugebenden Textes notieren Sie in einer eigenen Zeile den Namen des Endbegrenzers, dort jedoch ohne Semikolon am Ende. Es hat sich eingebürgert, für solche Namen von Labels Großbuchstaben zu verwenden, weil die Label so im Quelltext leichter sichtbar sind.

Beachten Sie:

Bei CGI-Scripts kann der Inhalt der ausgegebenen Daten auch als HTTP-Befehl interpretiert werden. Die Anweisung:
print "Content-type: text/html\n\n";
ist ein typisches Beispiel dafür. Dabei wird ein einfacher HTTP-Header gesendet, der für die Kommunikation zwischen Server und Browser erforderlich ist. Eine andere für CGI-Scripts interessante Variante ist die folgende Anweisung (Beispiel):
print "Location: http://www.selfhtml.org/\n\n";
Auch dabei wird ein HTTP-Header ausgegeben, der eine Weiterleitung zu dem angegebenen URI bewirkt. Ein CGI-Script, das eine solche Location-Anweisung enthält, braucht sonst keinen weiteren HTML-Code auszugeben.

printf - Daten formatiert ausgeben

Schreibt Daten auf die Standardausgabe oder in einen geöffneten Ausgabekanal, also etwa in eine Datei. Diese Funktion dient dazu, einzelne Datenelemente formatiert auszugeben. So lassen sich Dezimalzahlen beispielsweise ohne viel Umrechnung hexadezimal ausgeben, oder die Ausgabe von Gleitkommazahlen mit vielen Nachkommastellen lässt sich auf eine bestimmte Anzahl Nachkommastellen trimmen.
Die printf-Funktion in Perl entspricht im wesentlichen der printf-Funktion in C.

Erwartet als Parameter:
1. Datei-Handle = Optionale Angabe zum Ausgabekanal. Wenn Sie diese Angabe weglassen, wird auf die Standardausgabe STDOUT geschrieben. Wenn Sie mit nach oben open eine Datei geöffnet haben und in diese schreiben wollen, müssen Sie das bei open vergebene Datei-Handle angeben.
2. Formatstring = eine Zeichenkette, die für bestimmte auszugebende Elemente Formatbezeichner enthalten kann, und zwar entsprechend der speziellen Syntax der printf-Funktion (%-Zeichen-Syntax).
3. Ausgabeliste = ein oder mehrere Elemente, auf die sich die speziellen Formatbezeichner im Formatstring beziehen.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $BruttoBetrag = 27.95;
my $NettoBetrag = $BruttoBetrag / 1.16;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
printf "Das im Bruttobetrag %s enthaltene Netto beträgt ungerundet %.2f", $BruttoBetrag, $NettoBetrag;
print "</body></html>\n";

Erläuterung:

Das Beispiel gibt mit Hilfe der printf-Funktion die beiden Variablen $BruttoBetrag und $NettoBetrag aus. Der Wert von $NettoBetrag wird rechnerisch gewonnen und stellt eine Bruchzahl mit vielen Nachkommastellen dar. In der Ausgabe mit printf wird diese Zahl jedoch auf zwei Nachkommastellen reduziert ausgegeben.

Dazu notieren Sie in der auszugebenden Zeichenkette an der gewünschten Stelle einen Formatbezeichner. Solche Formatbezeichner beginnen mit einem Prozentzeichen %. Dahinter folgen die Angaben zur Formatierung. Die folgende Tabelle listet die möglichen Formatbezeichner und deren Formatiermöglichkeiten auf.

Syntax | Bedeutung | Beispiel | Bewirkte Ausgabe
%c | gibt das ASCII-Zeichen eines numerischen Zeichenwertes aus. Die Zahl kann z.B. dezimal oder hexadezimal angegeben werden. | printf "%c wie Paula", 0x50; | P wie Paula
%d gibt den Ganzzahlanteil einer Zahl in Dezimaldarstellung aus. Optional kann hinter dem %-Zeichen und vor dem d noch eine gewünschte Anzeigebreite der Zahl angegeben werden, z.B. %5d. In Verbindung mit HTML-Ausgaben ist dies jedoch nur innerhalb von Tags wie <pre>...</pre> realisierbar. $PI = 3.141592653589793;
printf "Der Ganzzahlanteil von PI ist %d", $PI; 		Der Ganzzahlanteil von PI ist 3
%e gibt eine Zahl in Exponentialschreibweise aus $PI = 3.141592653589793;
printf "PI exponential: %e", $PI; 		PI exponential: 3.141593e+000
%E wie %e, nur mit E als Exponentialzeichen statt e. $PI = 3.141592653589793;
printf "PI exponential: %E", $PI; 		PI exponential: 3.141593E+000
%f gibt eine Zahl mit Dezimalpunktdarstellung aus. Die Zahl nach dem Punkt ist die gewünschte Anzahl Nachkommastellen für die Ausgabe. Automatisch gerundet wird dabei nicht! $Preis = 99;
printf "Der Preis beträgt %.2f", $Preis; 		Der Preis beträgt 99.00
%g gibt eine Zahl automatisch in Exponentialschreibweise (wie bei %e) oder in Dezimalpunktdarstellung (wie bei %f) aus, abhängig von der Beschaffenheit der Zahl. $Zahl1 = 100, $Zahl2 = 10000000000000000;
printf "Die Zahlen: %g und %g", $Zahl1, $Zahl2; 		Die Zahlen: 100 und 1e+016
%G wie %g, nur mit E als Exponentialzeichen statt e. $Zahl = 10000000000000000;
printf "Die Zahl lautet %G", $Zahl; 		Die Zahl lautet 1E+016
%o gibt eine Zahl in oktaler Schreibweise aus, ansonsten wie %u. Das Oktalsystem kennt nur Ziffern von 0 bis 7. $Zahl = 100;
printf "die Zahl lautet oktal %o", $Zahl; 		Die Zahl lautet oktal 144
%u gibt eine Zahl als unsigned integer, also als positive Ganzzahl aus. Wenn die Zahl negativ ist, gibt Perl sie als die Differenz von der höchsten möglichen Integerzahl (4294967296) und der Zahl aus. $Zahl1 = 100, $Zahl2 = -100;
printf "Die Zahlen: %u und %u", $Zahl1, $Zahl2; 		Die Zahlen sind 100 und 4294967196
%s | gibt eine Zeichenkette (String) aus. | printf "PATH ist %s", $ENV{'PATH'}; | PATH ist D:\PERL\BIN;C:\WINDOWS (Beispielausgabe)
%x gibt eine Zahl in hexadezimaler Schreibweise aus, ansonsten wie %u. Das Hexadezimalsystem kennt als Ziffern 0 bis 9 und a bis f. $Zahl = 200;
printf "die Zahl lautet oktal %x", $Zahl; 		Die Zahl lautet hexadezimal c8
%X wie %x, nur mit A bis F als Ziffern statt a bis f. $Zahl = 200;
printf "die Zahl lautet oktal %X", $Zahl; 		Die Zahl lautet hexadezimal C8
%% notieren Sie, um das Formatbezeichnerzeichen, also das Prozentzeichen, selber auszugeben. $Level = 100;
printf "wir haben %d%% erreicht", $Level; 		wir haben 100% erreicht

Zusätzlich zu diesen Formatbezeichnern stehen so genannte Flags zur Verfügung, mit deren Hilfe sich die Ausgabe noch feiner justieren lässt. Flags müssen unmittelbar hinter dem Prozentzeichen für Formatbezeichner notiert werden. Die folgende Tabelle listet mögliche Flags auf:

Syntax | Bedeutung | Beispiel | Bewirkte Ausgabe
[blank] Leerzeichen vor positiven Zahlen erzwingen. Sinnvoll, wenn diese in Kolonne mit anderen Zahlen stehen, die auch negativ sein können. $Zahl1 = 100, $Zahl2 = -100;
printf "% d%\n% d", $Zahl1, $Zahl2; 		100
-100
- Zahlen mit erzwungener Anzeigebreite linksbündig ausrichten (Voreinstellung ist rechtsbündig). printf "%-10d Zugriffe", 1234; 1234 Zugriffe
0 | Zahl mit erzwungener Anzeigebreite mit Nullen auffüllen, falls die Zahl kleiner ist. | printf "%010d Zugriffe", 1234; | 0000001234 Zugriffe
# Hexadezimal- oder Oktalzahl mit entsprechendem Bezeichner für die übliche Schreibweise versehen. printf "100 Hex = %#x, 100 Okt = %#o", 100, 100; 100 Hex = 0x64, 100 Okt = 0144

Beachten Sie:

Wenn Sie die Daten lediglich formatieren wollen ohne sie auszugeben, verwenden Sie bitte die Seite sprintf-Funktion.

read - bestimmte Anzahl Zeichen lesen

Liest eine anzugebende Anzahl Zeichen aus einer Datei ab der aktuellen Position des Dateizeigers in einen Skalar ein.

Erwartet als Parameter:
1. das Datei-Handle
2. einen Skalar, in dem die eingelesenen Zeichen gespeichert werden
3. die Anzahl der zu lesenden Zeichen
4. (optional) Offset - wenn die Zeichen in dem Zeichenkettenskalar (2.), in den sie eingelesen werden, nicht ab dem ersten Zeichen beginnen sollen, sondern ab einem Zeichen n, das als Offset angegeben wird (die Zählung beginnt bei 0).

Gibt die Anzahl eingelesener Zeichen zurück. Wenn das Dateiende erreicht wurde, wird 0 zurückgegeben. Wenn ein Fehler auftritt, wird undef zurückgegeben.

Beispiel - Teil 1 (Auszug aus einer Datei error_log):

[Sat Feb 07 17:24:44 2007] [error] [client 127.0.0.1] File does not exist: /usr/web/src/formate.css

Beispiel - Teil 2 (als vollständiges CGI-Script in Perl):

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
my $Ausgabe;
open(ERRORDATEI, "</var/log/error_log") || die "Log-Datei nicht gefunden!";
my $geleseneZeichen = read(ERRORDATEI, $Ausgabe, 26);
close(ERRORDATEI);
print "gelesene Zeichen: $geleseneZeichen; gelesener Inhalt: $Ausgabe\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel zeigt im ersten Teil den Inhalt einer Datei namens error_log. Die Datei enthält eine Zeile, in der ein aufgetretener Fehler protokolliert ist. Im zweiten Teil des Beispiels liest ein CGI-Script diese Datei aus, aber nicht komplett, sondern nur 26 Zeichen. Da der Dateizeiger nach dem Öffnen der Datei mit nach oben open auf 0 steht, liest der im Beispiel notierte read-Befehl die ersten 26 Zeichen aus der Datei. Zur Kontrolle gibt das Script im Beispiel die Anzahl der eingelesenen Zeichen aus, die es durch den Rückgabewert von read in dem Skalar $geleseneZeichen ermittelt. Ferner gibt das Script die eingelesene Zeichenkette aus. Im Beispiel ist das genau der Teil, der den Zeitstempel in der Datei error_log markiert, also [Sat Feb 07 17:24:44 2007]. Dies sind die ersten 26 Zeichen.

Beachten Sie:

Um den Dateizeiger vor dem Lesen mit read an eine andere Stelle zu positionieren, können Sie die Funktion nach unten seek verwenden.

readdir - Verzeichniseinträge ermitteln

Liest Einträge eines Verzeichnisses, das zuvor mit der Funktion nach oben opendir geöffnet wurde.

Erwartet als Parameter:
1. das Verzeichnishandle, das bei opendir vergeben wurde.

Gibt den jeweils nächsten Verzeichniseintrag zurück, wenn der Rückgabewert in einem Skalar gespeichert wird, zum Beispiel:
$Eintrag = readdir(DIR);
Gibt alle Einträge des Verzeichnisses zurück, wenn der Rückgabewert in einer Liste gespeichert wird, zum Beispiel:
@Eintraege = readdir(DIR);
Verzeichniseinträge sind sichtbare Dateien, Verzeichnisse sowie die Platzhalter für das aktuelle Verzeichnis (.) und für das nächsthöhere Verzeichnis (..).

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Verzeichnis = "/usr/web/ars_vivendi";
my $URIVerzeichnis = "/ars_vivendi";
opendir(DIR, $Verzeichnis) || die "$Verzeichnis: $!";
my @Dateien = readdir(DIR);
closedir(DIR);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
foreach(@Dateien) {
 if($_ =~ /.+\.htm*/) {
   print "<a href=\"$URIVerzeichnis/$_\">$URIVerzeichnis/$_</a><br>\n";
   }
}
print "</body></html>\n";

Erläuterung:

Im Beispiel wird in dem Skalar $Verzeichnis der Pfad eines Verzeichnisses gespeichert (/usr/web/ars_vivendi). In einem zweiten Skalar $URIVerzeichnis wird ein zweiter Pfad (/ars_vivendi) gespeichert. Der Grund dafür ist, dass im Beispiel /usr/web als Wurzelverzeichnis (DocumentRoot) des installierten Webservers vorausgesetzt wird. Dann ist /ars_vivendi ein Verzeichnis unterhalb der DocumentRoot.

Mit der Funktion opendir wird das Verzeichnis geöffnet. Mit Hilfe von readdir wird der Verzeichnisinhalt in eine Liste @Dateien eingelesen. Anschließend wird das Verzeichnis durch Aufruf der Funktion nach oben closedir geschlossen.

Das Beispiel gibt dann HTML-Code aus. Dabei wird die Liste der Verzeichniseinträge analysiert. Einträge, in denen das Suchmuster .+\.htm* vorkommt, werden zeilenweise ausgegeben, und zwar umrahmt von HTML-Auszeichnungen, die den jeweiligen Eintrag als Verweis anklickbar machen. Zur korrekten Adressierung der anklickbaren HTML-Dateinamen wird der Skalar $URIVerzeichnis verwendet.

rewinddir - auf ersten Verzeichniseintrag positionieren

Positioniert den Lesezeiger in einem Verzeichnis, das zuvor mit der Funktion nach oben opendir geöffnet wurde, wieder auf den ersten Eintrag. Dies kann sinnvoll sein, wenn Sie das Verzeichnis mit nach oben readdir bereits eingelesen haben, das Verzeichnishandle aber zu einem erneuten Einlesen des Verzeichnisinhalts verwenden möchten.

Erwartet als Parameter:
1. das Verzeichnishandle, das bei opendir vergeben wurde.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Verzeichnis = "/usr/work";
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
opendir(DIR, $Verzeichnis) || die "$Verzeichnis: $!";
my @Eintraege = readdir(DIR);
my $Eintrag;
foreach $Eintrag (@Eintraege) {
 if($Eintrag =~ /.+\.bak/) {
    unlink($Verzeichnis."/".$Eintrag);
   }
}
rewinddir(DIR);
@Eintraege = "";
@Eintraege = readdir(DIR);
foreach $Eintrag (@Eintraege) {
 print "$Eintrag<br>\n";
}
print "</body></html>\n";
closedir(DIR);

Erläuterung:

Das Beispiel liest zunächst alle Einträge des Verzeichnisses $Verzeichnis in die Liste @Eintraege ein. Diese Liste wird anschließend nach Dateien des Typs *.bak (typische Endung für Sicherungs-Dateien) durchsucht. Dateien mit dieser Endung werden im Beispiel gelöscht (mit Seite unlink). Nachdem diese Aktion beendet ist, wird der Verzeichniszeiger mit rewinddir(DIR) zurückgesetzt, denn das Verzeichnis soll nun mit demselben immer noch geöffneten Verzeichnishandle DIR nochmals eingelesen werden. Beim zweiten Einlesen werden alle vorhandenen Einträge ausgegeben. Dateien des Typs *.bak sollten eigentlich nicht mehr dabei sein. Oft geschieht das Neueinlesen jedoch noch, bevor die Dateien vom Betriebssystem gelöscht sind, und es werden deshalb doch noch die alten Einträge ausgegeben.

seek - Dateizeiger positionieren

Positioniert den Dateizeiger eines Dateihandles, das zuvor mit nach oben open erzeugt wurde, an eine beliebige Stelle innerhalb der Datei.

Erwartet als Parameter:
1. das Handle der geöffneten Datei.
2. Byteposition innerhalb der Datei, abhängig von der im dritten Parameter angegebenen Bezugsposition
3. Bezugsposition für die Angabe im zweiten Parameter. Diese kann die Werte 0, 1 oder 2 haben:

  • 0 bedeutet absolut vom Dateianfang (Position 0) aus gerechnet,
  • 1 bedeutet relativ vom der aktuellen Position des Dateizeigers aus gerechnet,
  • 2 bedeutet absolut vom Dateiende gerechnet (im Normalfall sollte die Angabe beim zweiten Parameter in diesem Fall eine negative Zahl sein).

Beispiel - Teil 1 (Datei isbn.txt):

ISBN 3-7723-7514-6

Beispiel - Teil 2 (vollständiges CGI-Script in Perl):

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Datei = "isbn.txt";
my $ISBNummer;
open(DATEI, "<$Datei");
seek(DATEI, 5, 0);
read(DATEI, $ISBNummer, 13);
close(DATEI);
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "ISBN-Nummer: $ISBNummer";
print "</body></html>\n";

Erläuterung:

Das Beispiel zeigt im ersten Teil den Inhalt einer Datei namens isbn.txt. Die Datei enthält eine Zeile, in der eine ISBN-Nummer notiert ist, wobei die eigentliche ISBN-Nummer jedoch erst an Position 5 beginnt. Im zweiten Teil des Beispiels liest ein CGI-Script diese Datei aus, aber nicht komplett, sondern nur ab Position 5, und von dort an 13 Zeichen. Da der Dateizeiger nach dem Öffnen der Datei mit nach oben open auf 0 steht, wird er mit seek(DATEI, 5, 0) auf Position 5 vom Dateianfang her gerechnet gesetzt. Anschließend werden die 13 Zeichen der ISBN-Nummer mit nach oben read eingelesen. Zur Kontrolle gibt das Script im Beispiel die eingelesenen Daten aus.

Beachten Sie:

Die Funktion seek können Sie nur in Verbindung mit read oder nach unten write verwenden, aber nicht in Verbindung mit nach unten sysread oder nach unten syswrite. Benutzen Sie in diesem Fall die Funktion nach unten sysseek.

seekdir - Verzeichniszeiger positionieren

Positioniert den Verzeichniszeiger eines Verzeichnishandles, das zuvor mit nach oben opendir erzeugt wurde, auf einen beliebigen Eintrag innerhalb des Verzeichnisses. Voraussetzung dazu ist, dass die Funktion nach unten telldir angewendet wird, um die internen Positionsnummern der Verzeichniseinträge zu ermitteln.

Erwartet als Parameter:
1. das Verzeichnishandle, das bei opendir vergeben wurde.
2. die interne Positionsnummer eines Verzeichniseintrags, auf den positioniert werden soll. Diese interne Positionsnummern können nur durch Aufruf der Funktion seekdir ermittelt werden. Es handelt sich um vom Dateisystem des Rechners gelieferte Adressen, also nicht um einfache fortlaufende Nummern!

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Verzeichnis = "/usr/texte";
opendir(DIR, $Verzeichnis) || die "$Verzeichnis: $!";
my @Positionen;
my @Eintraege;
for(my $i=0;$i<10;$i++) {
  $Eintraege[$i] = readdir(DIR);
  $Positionen[$i] = telldir(DIR);
}
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
for(my $i=0;$i<10;$i++) {
  print "<p>Eintraege[$i] = $Eintraege[$i]<br>\n";
  print "Positionen[$i] = $Positionen[$i]</p>\n";
}
seekdir(DIR, $Positionen[5]);
my $Eintrag = readdir(DIR);
print "<p>Positioniert auf Positionen[5] und Eintrag gelesen: $Eintrag</p>\n";
print "</body></html>\n";
closedir(DIR);

Erläuterung:

Das Beispiel leistet nichts Produktives, es dient nur zur Verdeutlichung, und es dient dazu, das Prinzip der internen Positionsnummern zu verstehen. In dem Beispiel wird ein Verzeichnis mit nach oben opendir geöffnet. Die ersten zehn Einträge des Verzeichnisses werden danach in einer Seite for-Schleife mit nach oben readdir eingelesen. Dabei werden auch die Positionsnummern der eingelesenen Einträge gespeichert, und zwar in dem Array @Positionen. Das CGI-Script gibt zur Kontrolle die zehn eingelesenen Einträge und deren ermittelte Positionsnummern aus. Um die Funktion seekdir zu testen, wird auf eine der ermittelten Positionsnummern ($Positionen[5]) positioniert. Der nächste Verzeichniseintrag wird noch einmal eingelesen und zur Kontrolle ausgegeben.

Beachten Sie:

Wenn Sie mit seekdir auf einen Verzeichniseintrag positionieren und dann readdir anwenden, wird nicht derjenige Verzeichniseintrag eingelesen, auf den Sie positioniert haben, sondern der nächste!

select - Ein-/Ausgabekanal auswählen

Wählt den Default-Ein-/Ausgabekanal für nachfolgende Lese-/Schreiboperationen aus.

Erwartet als Parameter:
1. das Handle des gewünschten Ein-/Ausgabekanals. Das kann ein Handle einer zuvor mit nach oben open geöffneten Datei sein oder einer der Standardkanäle.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/plain\n\n";

open(DATEI, ">>/usr/webconfig/users.txt") || die "$!";
my $User = "Stefan";
select(DATEI);
print "\nuser=$User";
close(DATEI);

select(STDOUT);
print "$User in Datei geschrieben";

Erläuterung:

Im Beispiel wird zunächst ein HTTP-Header erzeugt. Die print-Funktion schreibt dabei zuerst auf den Standardausgabekanal. Anschließend wird eine Datei zum anhängenden Schreiben geöffnet. Dabei wird das Handle mit dem Namen DATEI erzeugt. Anschließend wird dieses Handle mit select(DATEI) als das aktive Handle ausgewählt. Die nachfolgende nach oben print-Funktion bezieht sich dadurch automatisch auf das ausgewählte Handle. Um in die Datei zu schreiben, ist also:
select(DATEI);
print "\nuser=$User";
gleichbedeutend mit:
print DATEI "\nuser=$User";.

Nachdem die neue Zeile in die Datei geschrieben und diese geschlossen wurde, wird - wiederum mit select - der Standardausgabekanal STDOUT als neuer aktiver Kanal ausgewählt. Der nachfolgende print-Befehl, der eine Bestätigung ausgibt, funktioniert nur, weil zuvor STDOUT als aktiver Kanal ausgewählt wurde. Andernfalls wäre der aktive Kanal undefiniert, da der zuvor als aktiv ausgewählte Kanal DATEI mittlerweile geschlossen wurde.

sysopen - Datei systemnah öffnen

Öffnet eine Datei ebenso wie nach oben open. Während open jedoch die bequeme Art der Umleitung (mit >, >>, <, ...) an der Kommandozeile nachahmt, wird bei sysopen direkt der betriebssystemeigene Befehl zum Öffnen einer Datei benutzt. Der Vorteil besteht darin, dass Sie genauer angeben können, wie Sie die Datei öffnen wollen. Der Nachteil ist aber, dass es Probleme mit Betriebssystemen gibt, die nicht alle Features unterstützen. Das Perl-Script lässt sich dann möglicherweise nicht mehr in verschiedenen Umgebungen ausführen.

Erwartet als Parameter:
1. den Namen des Datei-Handles (frei wählbar),
2. den Namen der Datei, wenn erforderlich mit relativem oder absolutem Pfadnamen,
3. den Modus, in dem die Datei geöffnet werden kann. Dazu ist es ratsam, das Seite Standardmodul Fcntl einzubinden, in dem Konstanten für erlaubte Werte definiert sind. Folgende Konstanten sind dann erlaubt:

  • O_RDONLY bedeutet: Datei nur zum Lesen öffnen,
  • O_WRONLY bedeutet: Datei nur zum Schreiben öffnen,
  • O_RDWR bedeutet: Datei zum Lesen und Schreiben öffnen.
  • Diese Konstanten können Sie durch bitweises Oder (einfacher Senkrechtstrich |) mit folgenden Zusatzkonstanten verknüpfen:
  • O_APPEND bedeutet: Schreiben nur am Ende der Datei,
  • O_CREAT bedeutet: Datei anlegen, falls sie nicht existiert,
  • O_EXCL in Verbindung mit O_CREAT bedeutet: Abbrechen und false zurückgeben, wenn die Datei schon existiert,
  • O_NONBLOCK bedeutet: beim Öffnen der Datei nicht blockieren (ältere Version: O_NDELAY),
  • O_SYNC bedeutet: nach jedem Schreibvorgang wird die Synchronisationsfunktion fsync() aufgerufen,
  • O_TRUNC bedeutet: die existierende Datei wird auf 0 Byte gekürzt, ohne gelöscht zu werden.

4. (optional) eine Angabe für die Zugriffsrechte, mit denen die Datei geöffnet werden soll. Die Angabe ist dabei die unter Unix übliche Bezeichnung der Zugriffsrechte für Welt, Gruppe und Eigner in Oktalschreibweise mit führender 0 (z.B. 0440) und nicht in Anführungszeichen zu notieren.

Wenn die Datei geöffnet werden kann, gibt die Funktion den Wert true zurück, andernfalls den Wert false.

Beispiel:

#!/usr/bin/perl -w

use strict;
use Fcntl;
my $Datei = "/usr/geistesblitze/aktuell.txt";
sysopen(DATEI, $Datei, O_WRONLY | O_APPEND, 0440) || die "$Datei: $!";
print DATEI "Neugier killte die Katze\n";
close(DATEI);

Erläuterung:

Im Beispiel wird eine Textdatei mit sysopen geöffnet. Dabei wird bestimmt, dass die Datei nur zum Schreiben geöffnet wird, und zwar so, dass geschriebene Inhalte an die vorhandene Datei angehängt werden (erreicht durch bitweise Verknüpfung von O_APPEND). Mit print wird ein Satz in die Datei geschrieben. Anschließend wird die Datei geschlossen. Dazu können Sie die übliche Funktion nach oben close verwenden.

Beachten Sie:

Der Befehl use Fcntl zu Beginn ist erforderlich, um Zugriff auf Konstanten wie O_WRONLY und O_APPEND zu erhalten.

sysread - bestimmte Anzahl Zeichen systemnah lesen

Liest eine anzugebende Anzahl Zeichen aus einer Datei ab der aktuellen Position des Dateizeigers in einen Skalar ein. Die Datei sollte in den meisten Fällen sinnvollerweise mit nach oben sysopen geöffnet worden sein. Ansonsten gelten für sysread die gleichen Regeln zum Aufruf und beim Rückgabewert wie bei nach oben read.

sysseek - Dateizeiger systemnah positionieren

Positioniert den Dateizeiger eines Dateihandles, das zuvor sinnvollerweise mit nach oben sysopen erzeugt wurde, an eine beliebige Stelle innerhalb der Datei. Ansonsten gelten für sysseek die gleichen Regeln zum Aufruf und beim Rückgabewert wie bei nach oben seek.

syswrite - bestimmte Anzahl Zeichen systemnah schreiben

Schreibt eine anzugebende Anzahl Zeichen aus einer ebenfalls anzugebenden Variablen ab der aktuellen Position innerhalb dieser Variablen in eine Datei. Die Datei sollte sinnvollerweise mit nach oben sysopen geöffnet worden sein.

Erwartet als Parameter:
1. das Datei-Handle.
2. einen Skalar, der die Zeichen zum Schreiben in die Datei enthält.
3. (optional) die Anzahl der in die Datei zu schreibenden Zeichen.
4. (optional) Offset - wenn die zu schreibenden Zeichen in dem Zeichenkettenskalar (2.) nicht ab dem ersten Zeichen beginnen sondern ab einem Zeichen n, können Sie n als Offset angeben (die Zählung beginnt bei 0).

Wenn der Skalar mehr Daten enthält als geschrieben werden sollen, werden trotzdem nur so viele Zeichen geschrieben wie angegeben. Wenn der Skalar weniger Daten enthält als geschrieben werden sollen, werden nur so viele Zeichen geschrieben, wie der Skalar ab dem Offset noch enthält. Wenn Sie keine Anzahl zu schreibender Zeichen angeben, wird der komplette Inhalt des Skalars in die Datei geschrieben.

syswrite gibt die Anzahl tatsächlich geschriebener Zeichen zurück. Im Fehlerfall wird undef zurückgegeben.

Beispiel:

#!/usr/bin/perl

use strict;
use Fcntl;
my $Datei = "/usr/bin/mycodes/mysecret.sys";
my $Daten = "sdclknavaoertoerigjvimfvlkmdfghjdfbjdfihgjsobijsngohijsrotigueiufgulvbdkjbndfkhv";
my $Block = 8;
sysopen(DATEI, $Datei, O_WRONLY | O_EXCL) || die "$Datei: $!";
for(my $i=0;$i<10;$i++) {
  my $Offset = $i * $Block;
  syswrite(DATEI,$Daten,$Block,$Offset);
}
close(DATEI);

Erläuterung:

Das Beispiel schreibt eine Zeichenkette, die in $Daten gespeichert ist, blockweise in eine Datei. Dazu stehen die Aufrufe von sysread in einer Seite for-Schleife. Die Schleife hat 10 Durchläufe, da die Länge von $Daten 80 Zeichen beträgt und pro Schreibvorgang 8 Zeichen (in dem Skalar $Block definiert) geschrieben werden sollen. Dabei ist es wichtig, jedesmal den Offset neu zu berechnen, damit immer die jeweils nächsten 8 Zeichen geschrieben werden, und nicht immer wieder nur die ersten 8.

Beachten Sie:

Das Beispiel selbst ist in dieser Form nicht besonders praxisrelevant, denn bei der kleinen Datenmenge empfiehlt es sich, den gesamten Inhalt von $Daten in einem Rutsch in die Datei zu schreiben. Aber das Prinzip lässt sich anwenden, wenn die Datenmenge aus anderen Quellen dynamisch gewonnen wird, wobei sie ja sehr groß sein kann.

tell - Position des Dateizeigers ermitteln

Ermittelt die aktuelle Byteposition des Dateizeigers eines Dateihandles, das zuvor mit nach oben open erzeugt wurde.

Erwartet als Parameter:
1. das Datei-Handle.

Gibt die aktuelle Byteposition zurück. Wenn ein Fehler aufgetreten ist, wird -1 zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Datei = "/usr/info/readme.txt";
my @Zeilenanfaenge = "";
open(DATEI, "<$Datei") || die "$Datei: $!";
$Zeilenanfaenge[0] = tell(DATEI);
my $i = 0;
while(<DATEI>) {
   $i++;
   $Zeilenanfaenge[$i] = tell(DATEI);
}
close(DATEI);
$i = 1;
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title></head><body>\n";
foreach (@Zeilenanfaenge) {
   print "Zeile $i beginnt in der Datei bei Offset $_<br>\n";
   $i++;
}
print "</body></html>\n";

Erläuterung:

Das Beispiel öffnet mit open eine Textdatei und liest sie in einer Seite while-Schleife zeilenweise ein. Dabei wird direkt nach dem Öffnen und bei jedem Schleifendurchgang die aktuelle Position des Dateizeigers mit tell ermittelt und im jeweils nächsten Element des Arrays @Zeilenanfaenge gespeichert. Anschließend wird HTML-Code erzeugt. Dabei werden die gespeicherten Offset-Positionen der Zeilenanfänge in einer Seite foreach-Schleife ausgegeben.

telldir - Position des Verzeichniszeigers ermitteln

Ermittelt die interne Positionsnummer des Verzeichniseintrags, auf dem der Verzeichniszeiger eines Verzeichnishandles steht, das zuvor mit nach oben opendir erzeugt wurde.

Erwartet als Parameter:
1. das Verzeichnishandle, das bei opendir vergeben wurde.

Beispiel mit Erläuterung:

Ein vollständiges Beispiel mit Erläuterung der zusammenhängenden Funktionen telldir und seekdir wird bei der Funktion nach oben seekdir behandelt.

write - formatierte Daten schreiben

Diese Funktion dient dazu, Daten, die mit nach oben format formatiert wurden, datensatzweise in eine Datei zu schreiben, die zuvor mit nach oben open geöffnet wurde. Beispiele werden im Zusammenhang mit der Funktion format beschrieben.

nach oben
weiter | Seite Funktionen für Datei- und Verzeichnis-Management
zurück | Seite Funktionen für Datum und Uhrzeit
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für Datei- und Verzeichnis-Management

SELFHTML

Funktionen für Datei- und Verzeichnis-Management
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten -[x] - Dateitestoperatoren für Dateien/Verzeichnisse
nach unten chdir - Verzeichnis wechseln
nach unten chmod - Datei-/Verzeichnisrechte ändern
nach unten chown - Besitzer und Besitzergruppe von Dateien ändern
nach unten chroot - Wurzelverzeichnis für Pfadnamen ändern
nach unten glob - Dateien mit Wildcards auswählen
nach unten link - neue Datei als Link auf vorhandene erzeugen
nach unten lstat - Eigenschaften einer Link-Datei
nach unten mkdir - Verzeichnis erstellen
nach unten readlink - Wert einer Link-Datei auslesen
nach unten rename - Datei/Verzeichnis umbenennen
nach unten rmdir - Verzeichnis löschen
nach unten stat - Eigenschaften einer Datei ermitteln
nach unten symlink - neue Datei als symbolischen Link auf vorhandene erzeugen
nach unten umask - Umask des laufenden Prozesses ändern
nach unten unlink - Dateien löschen
nach unten utime - Zeitstempel von Dateien/Verzeichnissen ändern
nach unten

Allgemeines zu diesen Funktionen

Perl kommt, wie bereits mehrfach betont wurde, aus der Unix-Welt. Daher sind die Funktionen rund um Datei- und Verzeichnismanagement auch an den typischen Möglichkeiten von Unix orientiert. Einige dieser Funktionen sind nur anwendbar, wenn Ihr Perl-Script auf einem Unix-System ausgeführt wird. Funktionen zur Dateiverwaltung, die auch auf anderen Betriebssystemen ausführbar sind, können als "plattformunabhängig" bezeichnet werden, auch wenn das nicht absolut korrekt ist. Bei den hier aufgeführten Beschreibungen zu den einzelnen Funktionen zum Datei- und Verzeichnismanagement wird darauf hingewiesen, wenn es Beschränkungen auf bestimmte Betriebssystemtypen gibt.

Weitere Funktionen zur Dateiverwaltung, etwa zum Kopieren und Verschieben von Dateien, gibt es ebenfalls, doch gehören sie nicht zum Kernel von Perl. Solche Funktionen sind über das Seite Standardmodul File erreichbar.

Pfadnamen und Verzeichnisse:

Die hier beschriebenen Funktionen erwarten als Parameter Pfadangaben. Als Trennzeichen zwischen Verzeichnisnamen bei Pfadangaben benutzen Sie aus Portabilitätsgründen am besten grundsätzlich den einfachen Schrägstrich, auch bei Perl-Scripts, die unter Windows laufen sollen. Perl unter Windows setzt dies intern in die Microsoft-eigenen Backslashes um.
Beispiele:

Syntaxbeispiel | Bedeutung
".." | relative Angabe, ein Verzeichnis höher
"../../bin" | relative Angabe, zwei Verzeichnisse höher und von dort aus gerechnet Unterverzeichnis "bin"
"images" | relative Angabe, Unterverzeichnis "images" im aktuellen Verzeichnis
"/" | absolute Angabe, Wurzelverzeichnis
"/usr/bin/perl" | absolute Angabe ab Wurzelverzeichnis
"c:/windows/system" | absolute Angabe mit Laufwerksangabe - Windows-typisch

Relative Pfadangaben sollten Sie nur verwenden, wenn das aktuelle Arbeitsverzeichnis bekannt ist.
Um das aktuelle Arbeitsverzeichnis in Perl zu ermitteln, können Sie notieren:

use Cwd;
my $Arbeitsverzeichnis = cwd;

In dem Skalar $Arbeitsverzeichnis steht dann anschließend der vollständige Pfad zum aktuellen Arbeitsverzeichnis. Benutzt wird dazu das Seite Standardmodul cwd.

Rechteangaben für Dateien und Verzeichnisse

Viele der hier beschriebenen Funktionen erwarten als Parameter eine Rechteangabe.

Bei Unix-Systemen haben alle Einträge eines Dateisystems Rechte. Jede Datei, jedes Verzeichnis gehört einem Benutzer, und jeder Benutzer gehört zu einer Benutzergruppe. Der so genannte Superuser, also der Benutzer mit der so genannten root-Kennung, kann Benutzer und Benutzergruppen einrichten und manipulieren sowie Logindaten für die einzelnen Benutzer des Systems vergeben.

Ein Benutzer, der sich an einem Unix-System einloggt, erhält vom Betriebssystem eine individuelle Benutzerkennung, die User-ID (UID). Ebenso erhält jede Benutzergruppe eine Gruppen-ID (GID). Beide IDs sind Nummern. In einigen der hier beschriebenen Funktionen spielen diese IDs eine Rolle. Solche Funktionen sind dann in der Regel nur anwendbar, wenn das Perl-Script in einer Unix-Umgebung laufen soll.

Das System weiß stets, welcher eingeloggte Benutzer eine Datei oder ein Verzeichnis erzeugt. Die Datei bzw. das Verzeichnis gehört dann diesem Benutzer und seiner primären Benutzergruppe. Grundsätzlich werden auf Unix-Systemen für jede Datei und jedes Verzeichnis die Zugriffsrechte für den besitzenden Benutzer, seine primäre Benutzergruppe und für Fremdbenutzer ("Rest der Welt") festgelegt. Dabei wird zwischen Leserecht, Schreibrecht und Ausführungsrecht unterschieden. Jedes dieser drei Rechte (Lesen, Schreiben, Ausführen) kann für jede der drei Benutzertypen (Besitzer, zugehörige Gruppe und Rest der Welt) auf "ja" oder "nein" gesetzt werden. Die Darstellung dieser Rechte erfolgt üblicherweise in zwei Arten: entweder als eine Zeichenkette von 3 mal 3, also 9 Zeichen, oder als Oktalzahl mit 3 Ziffern.

Darstellung als Zeichenkette (Beispiele):

rwxrwxrwx
rw-r--r--
rwx------

Der Buchstabe r steht für Lesen (read), w für Schreiben (write), und x für Ausführen (execute). Ist ein solcher Buchstabe gesetzt, so ist damit das entsprechende Recht vergeben. Ist das entsprechende Recht nicht gesetzt, wird stattdessen ein Bindestrich - notiert. Die ersten drei der neun Zeichen bedeuten die Lese-, Schreib- und Ausführungsrechte des besitzenden Benutzers der Datei, die zweiten drei Zeichen die Lese-, Schreib- und Ausführungsrechte seiner Gruppe, und die dritten drei Zeichen die Lese-, Schreib- und Ausführungsrechte für den "Rest der Welt". Der Wert rwxrwxrwx bedeutet also: alle drei Benutzertypen (besitzender Benutzer, zugehörige Gruppe und Rest der Welt) haben an der Datei alle drei Rechte.
Der Wert rw-r--r-- bedeutet: der besitzende Benutzer hat die Rechte "Lesen" und "Schreiben", aber nicht "Ausführen", seine Gruppe und der Rest der Welt haben nur das Recht "Lesen", aber nicht die Rechte "Schreiben" und "Ausführen".
Der Wert rwx------ bedeutet: der besitzende Benutzer hat alle Rechte, seine Gruppe und der Rest der Welt haben überhaupt keine Rechte.

Darstellung als Oktalzahl (gleiche Beispiele wie zuvor):

0777
0644
0700

Bei dieser Darstellung, die von den meisten der hier beschriebenen Funktionen gefordert wird, wird eine Zahl mit einer führenden 0 notiert, was Perl die Zahl als Oktalzahl interpretieren lässt. Die Zahl selber besteht aus den 3 nachfolgenden Ziffern. Bei Oktalzahlen sind nur Ziffern zwischen 0 und 7 erlaubt. Die erste Ziffer steht für die Rechte des besitzenden Benutzers, die zweite Ziffer für die seiner Benutzergruppe, und die dritte für die vom "Rest der Welt". Die Ziffern haben folgende Bedeutung für die Rechtezuweisung:

  • 1 für Ausführen (--x)
  • 2 für Schreiben (-w-)
  • 3 für Schreiben und Ausführen (-wx)
  • 4 für Lesen (r--)
  • 5 für Lesen und Ausführen (r-x)
  • 6 für Lesen und Schreiben (rw-)
  • 7 für Lesen, Schreiben und Ausführen (rwx)
  • sowie 0 für nichts (---)

Der Wert 0777 bedeutet also: alle drei Benutzertypen (besitzender Benutzer, zugehörige Gruppe und Rest der Welt) haben an der Datei alle drei Rechte.
Der Wert 0644 bedeutet also: der besitzende Benutzer hat die Rechte "Lesen" und "Schreiben", seine Gruppe und der Rest der Welt haben nur das Recht "Lesen".
Der Wert 0700 bedeutet also: der besitzende Benutzer hat alle Rechte, seine Gruppe und der Rest der Welt haben überhaupt keine Rechte.

Beachten Sie:

Als Hilfe für Dateirechte können Sie auch den Seite Unix-Dateirechte-Setzer (chmod) benutzen.

-[x] - Dateitestoperatoren für Dateien/Verzeichnisse

Die einfachste und schnellste Methode, gezielt auf bestimmte Eigenschaften einer Datei oder eines Verzeichnisses zuzugreifen, ist diejenige, die Perl mit den Dateitestoperatoren zur Verfügung stellt. Einige der Dateitestoperatoren geben eine Zahl zurück, beispielsweise die Größe einer Datei in Bytes, andere nur, ob eine Aussage zutrifft oder nicht. Eine Übersicht der Dateitestoperatoren finden Sie in der nach unten Tabelle der Dateitestoperatoren.

Beispiel 1 eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Textdatei = "/usr/bin/myprog/readme.txt";
my $UnbekannteDatei = "/usr/bin/myprog/doit";
my $Perl-Datei = "/usr/webcgi-local/betrag.pl";
my $Log-Datei = "/usr/web/logs/heute.log";

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><body>\n";
print "Die Textdatei hat eine Größe von ",-s $Textdatei," Bytes<br>\n";
printf "Die Textdatei wurde vor %.3f Tagen zuletzt bearbeitet<br>\n",-M $Textdatei;
print "Die unbekannte Datei ist ",-d $UnbekannteDatei ? "ein Verzeichnis<br>\n" : "kein Verzeichnis<br>\n";
print "Die Perl-Datei ",-e $Perl-Datei ? "existiert<br>\n" : "existiert nicht<br>\n";
print "Es hat Zugriffe gegeben" if not -z $Log-Datei;
print "</body></html>\n";

Erläuterung:

Alle Dateitestoperatoren zum Abfragen von Eigenschaften bestehen aus einem Minuszeichen, gefolgt von einem Buchstaben ohne Leerzeichen dazwischen. Dahinter folgt, durch ein Leerzeichen getrennt, die Angabe der gewünschten Datei, wenn erforderlich mit vollständigem nach oben Pfadnamen.

Im obigen Beispiel 1 werden drei Skalare definiert, die Dateinamen mit Pfadangaben speichern. Anschließend wird HTML-Code ausgegeben. Dabei werden verschiedene Aussagen über Eigenschaften der drei Dateien getroffen.
Die erste print-Anweisung enthält als Parameter einen Dateitestoperator (siehe dazu auch die Syntax von Seite print). In der Anweisung wird durch Anwendung von -s $Textdatei die Größe der Datei ermittelt und an der entsprechenden Stelle ausgegeben.
Im zweiten Befehl, einem Aufruf von Seite printf, wird mit -M $Textdatei ermittelt, seit wie viel Tagen die Datei nicht mehr geändert wurde. Auch dieser Wert wird ausgegeben. Da -M eine Gleitkommazahl zurückgibt, wird die Ausgabe mit Hilfe der printf-Funktion auf drei Nachkommastellen gekürzt.
In den nachfolgenden beiden print-Befehlen sehen Sie eine typische Konstruktion, wie Dateitestoperatoren, die nur "wahr" oder "falsch" zurückgeben, angewendet werden. Zum Einsatz kommt in beiden Fällen eine Seite einfache Entweder-Oder-Abfrage. Im ersten Fall wird mit dem Dateitestoperator -d abgefragt, ob die unbekannte Datei ohne Endung ein Verzeichnis ist oder eine normale Datei. Im zweiten Fall wird mit -e abgefragt, ob die Perl-Datei existiert oder nicht.
Das letzte Beispiel zeigt, wie ein Dateitestoperator in eine Seite nachgestellte bedingte Anweisung eingebaut wird - ebenfalls eine typische Konstruktion. Das Beispiel ermittelt mit Hilfe des Dateitestoperators -z, ob die Datei leer ist oder nicht. Wenn sie nicht leer ist, wird eine Meldung ausgegeben, dass es Zugriffe gegeben hat.

Beachten Sie:

Dateitestoperatoren können auch vergebene Datei-Handles anstelle von direkten Dateiangaben verarbeiten. Wenn Sie beispielsweise mit open(FILE,"<datei.htm") eine Datei zum Lesen öffnen, können Sie mit -s FILE die Größe der Datei ermitteln.

Tabelle der Dateitestoperatoren:

Syntax | Bemerkung | Bedeutung | Beispiel | Erläuterung
-A ermittelt, wie lange seit Programmstart auf eine Datei zugegriffen wurde. Rückgabewert ist die Zeit in Tagen als Gleitpunktzahl. printf("%.3f Tage
  Zugriffszeit",-A $Datei); 		Für die vom Script verarbeitete Datei $Datei wird ausgegeben, wie lange darauf zugegriffen wurde.
-B | ermittelt, ob es sich um eine Binärdatei handelt. | binmode(FILE) if -B FILE; | Wenn die Datei des File-Handles FILE eine Binärdatei ist, wird binmode aufgerufen.
-b Unix-
spezifisch 		ermittelt, ob eine Gerätedatei blockorientiert ist. exit(-1) unless -b "/cdrom"; Wenn "/cdrom" kein blockorientiertes Gerät ist, wird das Script beendet.
-C ermittelt die Inode-Veränderungszeit einer Datei seit Programmstart.
Rückgabewert ist die Zeit in Tagen als Gleitpunktzahl. 		if(-C $Datei > 10) {
  print "Warnung!"; } 		Wenn die Inode-Zeit der Datei $Datei größer als 10 Tage ist, wird "Warnung!" ausgegeben.
-c Unix-
spezifisch 		ermittelt, ob eine Gerätedatei zeichenorientiert ist. exit(-1) if -c "/cdrom"; Wenn "/cdrom" zeichenorientiert ist, wird das Script beendet.
-d | ermittelt, ob es sich um ein Verzeichnis handelt. | chdir("texte") if -d "texte"; | Wenn "texte" ein Verzeichnis ist, wird in das Verzeichnis gewechselt.
-e ermittelt, ob ein Verzeichniseintrag existiert. print "text.txt existiert!"
  if -e "text.txt"; 		Wenn die Datei "text.txt" existiert, wird dies ausgegeben.
-f | ermittelt, ob es sich um eine normale Datei (keine Gerätedatei, kein Verzeichnis usw.) handelt. | Verarbeiten() if -f "text.txt"; | Wenn die Datei "text.txt" eine normale Datei ist, wird eine Subroutine aufgerufen.
-g Unix-
spezifisch 		ermittelt, ob bei einer Datei das setgid-Bit (set-group-ID-Bit) gesetzt ist.
 chmod 02771, "daten"
  unless -g "daten"; 		Wenn das Verzeichnis "daten" kein setgid-Bit besitzt, werden die entsprechenden Rechte gesetzt.
-k Unix-
spezifisch 		ermittelt, ob bei einer Datei das Sticky-Bit gesetzt ist (Bit z.B. für die Anweisung, Code eines Programms nach dessen Ausführung im Speicher zu behalten, weil es voraussichtlich öfter ausgeführt wird). print "test.pl ist sticky"
  if -k "test.pl"; 		Wenn die Datei "text.pl" das Sticky-Bit gesetzt hat, wird dies ausgegeben.
-l Unix-
spezifisch 		ermittelt, ob es sich um einen symbolischen Link handelt. print readlink("text.txt")
  if -l "text.txt"; 		Wenn die Datei "text.txt" ein symbolischer Link ist, wird dessen Wert ausgegeben.
-M ermittelt, wie lange eine Datei seit Programmstart nicht geändert wurde. Rückgabewert ist die Zeit in Tagen als Gleitpunktzahl. printf("seit %.3f Tagen
  nicht modifiziert",
  -M $Datei); 		Für die Datei $Datei wird ausgegeben, wie lange sie nicht mehr verändert wurde.
-o/-O Unix-
spezifisch 		ermittelt, ob die Datei der effektiven UID (-o) bzw. der realen UID (-O) gehört.
 Verarbeiten()
  if -o "text.txt"; 		Wenn die Datei "text.txt" der effektiven UID gehört, wird eine Subroutine aufgerufen.
-r/-R Unix-
spezifisch 		ermittelt, ob die effektive UID/GID (-r) bzw. die reale UID/GID (-R) Leserecht für die Datei besitzt. open(FILE,"<text.txt")
  if -r "text.txt"; 		Wenn die effektive UID/GID Leserecht auf die Datei "text.txt" hat, wird sie zum Lesen geöffnet.
-p Unix-
spezifisch 		ermittelt, ob es sich um eine named pipe (FIFO) handelt. print "pipe" if -p "myprog"; Wenn die Datei "myprog" eine named pipe ist, wird dies ausgegeben.
-S Unix-
spezifisch 		ermittelt, ob die Datei eine Socket-Datei ist (wird von Client-Server-Prozessen, die auf einem Rechner laufen, als Schnittstelle benutzt). next if -S $_; Wenn die aktuelle Datei innerhalb einer angenommenen Schleife zur Überprüfung von allen Verzeichniseinträgen ein Socket ist, startet der nächste Schleifendurchgang.
-s ermittelt die Dateigröße in Bytes. print -s $DirEintrag
  if not -d $DirEintrag; 		Wenn der Verzeichniseintrag $DirEintrag kein Verzeichnis ist, wird die Dateigröße ausgegeben.
-T | ermittelt, ob es sich um eine Textdatei handelt. | Verarbeiten() if -T "text.txt"; | Wenn die Datei "text.txt" eine Textdatei ist, wird eine Subroutine aufgerufen.
-t Unix-
spezifisch 		ermittelt, ob der Verzeichniseintrag ein tty, d.h. ein angeschlossenes Gerät (Terminal) ist (unter Unix werden Peripheriegeräte als Dateien behandelt). print "STDIN ist tty"
  if -t "STDIN"; 		Wenn der Standardeingabekanal tty ist, wird dies ausgegeben.
-u Unix-
spezifisch 		ermittelt, ob bei einer Datei das setuid-Bit (Set-User-ID-Bit) gesetzt ist. die "kein uid-Bit"
  if not -u "text.pl"; 		Wenn bei der Datei "text.pl" kein setuid-Bit gesetzt ist, wird das Script mit einer Fehlermeldung beendet.
-w/-W Unix-
spezifisch 		ermittelt, ob die effektive UID/GID (-w) bzw. die reale UID/GID (-W) Schreibrecht für die Datei besitzt.
 open(FILE,">text.txt")
  if -W "text.txt"; 		Wenn die reale UID/GID für die Datei "text.txt" Schreibrechte besitzt, wird sie zum Schreiben geöffnet.
-x/-X Unix-
spezifisch 		ermittelt, ob die effektive UID/GID (-x) bzw. die reale UID/GID (-X) Ausführrecht für die Datei besitzt. system("myprog")
  if -x "myprog"; 		Wenn die effektive UID/GID für die Datei "myprog" Rechte zum Ausführen der Datei besitzt, wird sie über einen system-Aufruf ausgeführt.
-z ermittelt, ob eine Datei leer ist, also 0 Bytes hat. open(FILE,"<text.txt")
  if not -z "text.txt" 		Wenn die Datei "text.txt" nicht leer ist, wird sie zum Lesen geöffnet.

chdir - Verzeichnis wechseln

Macht ein Verzeichnis zum aktuellen Arbeitsverzeichnis. So ist es möglich, nach dem Wechseln in ein Verzeichnis dort abgelegte Dateien zu öffnen, ohne sich um Pfadnamen kümmern zu müssen.

Erwartet als Parameter:
1. den nach oben Pfadnamen des Verzeichnisses, zu dem gewechselt werden soll. Es kann sich um eine relative oder eine absolute Pfadangabe handeln.
Es ist auch möglich, keinen Parameter zu übergeben. In diesem Fall wechselt die Funktion in das Verzeichnis, das in der Umgebungsvariablen HOME gespeichert ist.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

chdir("/usr/txt/rfc");
open(DATEI,"<rfc1867.txt");
my @Zeilen = <DATEI>;
close(DATEI);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
print "@Zeilen";
print "</pre></body></html>\n";

Erläuterung:

Das Beispielscript wechselt mit chdir in das Verzeichnis /usr/local/txt/rfc, also in ein bestimmtes Unterverzeichnis ab Wurzelverzeichnis gerechnet. Dort wird dann eine Datei geöffnet, eingelesen und wieder geschlossen (Erläuterungen zu diesen Befehlen siehe Seite open). Anschließend wird HTML-Code erzeugt. Dabei werden die Zeilen der eingelesenen Datei ausgegeben.

chmod - Datei-/Verzeichnisrechte ändern

Setzt die Rechte zum Lesen, Schreiben und Ausführen einer oder mehrerer Dateien für Benutzer, Benutzergruppe und Rest der Welt (Unix-spezifisch).

Erwartet als Parameter:
1. eine nach oben Rechteangabe. Der Wert muss numerisch oktal übergeben werden, nicht als Zeichenkette!
2. bis n. eine oder mehrere Dateien/Verzeichnisse, für die diese Rechte gesetzt werden sollen, wenn nötig mit nach oben Pfadnamen.

Gibt die Anzahl der vorgenommenen Änderungen zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Verzeichnis = "/usr/web/docs/cgi-bin";
chdir($Verzeichnis);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";

my @Dateien = glob("*.pl");
my $Datei;
foreach $Datei (@Dateien) {
  chmod(0755,$Datei);
  print "$Datei auf 0755 gesetzt<br>\n";
}
print "</body></html>\n";

Erläuterung:

Das Beispiel setzt alle Perl-Dateien eines CGI-Verzeichnisses auf die Rechte 0755 - auf vielen Servern eine sinnvolle Einstellung für CGI-Scripts. Zu diesem Zweck werden alle Dateien des Verzeichnisses $Verzeichnis (dem CGI-Verzeichnis) mit nach unten glob ausgewählt. Die Liste @Dateien, in der die ausgewählten Dateien anschließend stehen, wird daraufhin in einer Seite foreach-Schleife abgearbeitet. Mit chmod(0755,$Datei) wird die jeweils aktuelle Perl-Datei mit den gewünschten Rechten versehen. Zur Kontrolle gibt das Beispielscript aus, welche Dateien geändert wurden.

chown - Besitzer und Besitzergruppe von Dateien ändern

Jede Datei unter Unix hat einen Eigentümer, der durch zwei Zahlen identifiziert wird: die persönliche User-ID (UID) und die zugehörige Gruppen-ID (GID). Die Funktion ändert Besitzer und Besitzergruppe von einer oder mehreren Dateien. Auf den meisten Unix-Systemen ist dazu eine Root-Kennung erforderlich.

Erwartet als Parameter:
1. die numerische UID (User-ID des Besitzers),
2. die numerische GID (Gruppen-ID der Besitzergruppe),
3. bis n. eine oder mehrere Dateien, für die die angegebenen UID und GID gelten sollen, wenn nötig mit nach oben Pfadnamen.

Gibt die Anzahl der vorgenommenen Änderungen zurück.

Beispiel:

#!/usr/bin/perl -w

use strict;

chdir("/usr/data/web/htdocs");
opendir(DIR, "/usr/data/web/htdocs") || die "$!\n";
my @Eintraege = readdir(DIR);
closedir(DIR);
foreach (@Eintraege) {
 chown(1034, 518, $_) if -f $_;
}

Erläuterung:

Das Beispiel ändert für alle regulären Dateien des angenommenen Verzeichnisses /usr/data/web/htdocs die Besitzerschaft auf den Benutzer mit der User-ID 1034 und der Gruppen-ID 518.

chroot - Wurzelverzeichnis für Pfadnamen ändern

Bestimmt ein neues Verzeichnis als "virtuelles" Wurzelverzeichnis. Absolute Pfadangaben, die mit / beginnen, beziehen sich anschließend darauf. Auf den meisten Unix-Systemen ist zum Anwenden dieser Funktion eine Root-Kennung erforderlich.

Erwartet als Parameter:
1. den nach oben Pfadnamen des Verzeichnisses, das zum Wurzelverzeichnis werden soll. Es kann sich um eine relative oder eine absolute Pfadangabe handeln.
Es ist auch möglich, keinen Parameter zu übergeben. In diesem Fall wird der Inhalt der Seite vordefinierten Variablen $_ als Pfadnamen des gewünschten Verzeichnisses interpretiert.

Beispiel:

#!/usr/bin/perl -w

use strict;

chroot("/usr/local/web/domains/eidideldum");
chdir("/");
opendir(DIR, ".");
my @Eintraege = readdir(DIR);
closedir(DIR);

foreach(@Eintraege) {
  print "$_\n";
}

Erläuterung:

Das Beispiel setzt den Pfad /usr/local/web/domains/eidideldum als neues Wurzelverzeichnis. Anschließend wechselt das Script mit nach oben chdir in das neue Wurzelverzeichnis ("/"). Zur Kontrolle liest das Script das aktuelle Verzeichnis (".") ein und listet die eingelesenen Verzeichniseinträge anschließend auf (Erläuterungen zu diesen Befehlen siehe Seite opendir).

glob - Dateien mit Wildcards auswählen

Wählt aus einem Verzeichnis alle Dateien aus, die einem bestimmten Dateinamenmuster entsprechen. Das ist wesentlich einfacher als das Operieren mit den Funktionen Seite opendir, Seite readdir und Seite closedir. Der Nachteil von glob ist allerdings, dass diese Funktion eine Unix-Shell startet, um an ihr Ergebnis zu kommen. Die Funktion ist daher nur auf Unix-Systemen verfügbar, und ausführbar ist sie auch nur, wenn das Script ausreichende Rechte zum Starten der Shell besitzt. Es gibt jedoch bei den Seite Standardmodulen für Dateiverwaltung ein Modul, das den glob-Algorithmus komplett in Perl ausführt.

Erwartet als Parameter:
1. Das Dateinamenmuster, wenn nötig mit nach oben Pfadangabe.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @HTML_Dateien = glob("/usr/web/docroot/*.htm");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
foreach (@HTML_Dateien) {
  print "$_<br>\n";
}
print "</body></html>\n";

Erläuterung:

Das Beispielscript wählt im Verzeichnis /usr/web/docroot alle Dateien aus, die auf htm enden. Zur Kontrolle gibt das Script HTML-Code mit allen eingelesenen Dateien aus.

Die folgende Tabelle enthält Beispiele für Dateimuster:

Dateimuster | Bedeutung
* | wählt alle Dateien und Verzeichnisse aus, auch solche, die keine Endung haben.
*.* | wählt alle Dateien und Verzeichnisse aus, die aus Namen und Endung bestehen.
*.gif | wählt alle GIF-Dateien aus
index.* | wählt alle Dateien aus, die index als Namen haben, unabhängig von der Endung.
???.* | wählt alle Dateien aus, deren Name aus drei Zeichen besteht, unabhängig von der Endung.
????.txt | wählt alle TXT-Dateien aus, deren Name aus vier Zeichen besteht.

link - neue Datei als Link auf vorhandene erzeugen

Die link-Funktion, die dem Unix-Befehl ln entspricht, legt aus Sicht des Benutzers eine Kopie einer Datei an. Es handelt sich jedoch intern nach wie vor nur um eine einzige Datei, die lediglich nunmehr unter zwei verschiedenen Namen (und gegebenenfalls an zwei Stellen im Verzeichnisbaum) zu finden ist. Wird die Datei an einer dieser Stellen, an denen sie repräsentiert wird, geändert, gilt die Änderung auch für die anderen Stellen, an denen die Datei repräsentiert wird. Wird eine der Dateien gelöscht (z.B. mit nach unten unlink), so bleiben andere Repräsentationen der Datei davon unberührt. Erst wenn die letzte Repräsentation der Datei gelöscht ist, ist die Datei endgültig gelöscht.

Erwartet als Parameter:
1. die bereits existierende Datei, von der eine neue Repräsentation erzeugt werden soll, wenn nötig mit nach oben Pfadangabe,
2. die neu zu erzeugende Repräsentation der Datei, wenn nötig mit Pfadangabe.

Gibt 1 zurück, wenn die Operation erfolgreich war, und 0, wenn sie nicht erfolgreich war (z.B. weil im Zielverzeichnis kein Schreibrecht besteht).

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Erfolg = link("single.txt","../double.txt");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
$Erfolg ? print "Erfolg" : print "kein Erfolg";
print "</body></html>\n";

Erläuterung:

Das Beispiel wendet die Funktion link an, um von der Datei single.txt im aktuellen Verzeichnis eine neue Repräsentation zu erzeugen, die im Verzeichnis oberhalb (../) unter dem Namen double.txt erscheint. Der Rückgabewert wird in dem Skalar $Erfolg gespeichert. Zur Kontrolle erzeugt das Beispiel HTML-Code und gibt dabei mit Hilfe einer Seite einfachen Entweder-Oder-Abfrage den Erfolgsstatus der Operation an.

lstat - Eigenschaften einer Link-Datei

Diese Funktion leistet das gleiche wie die Funktion nach unten stat. Nähere Beschreibung und Beispiel siehe dort.

Im Unterschied zu stat ermittelt lstat nicht die Eigenschaften einer Datei, sondern die einer Dateiverknüpfung, eines so genannten symbolischen Links. Wenn es sich nicht um eine Repräsentation einer Datei handelt (also wenn die Datei nur einmal im Verzeichnisbaum erscheint), wird beim Aufruf von lstat intern automatisch ein normaler Aufruf von stat gestartet. lstat erfasst also im Gegensatz zu stat auch Dateirepräsentationen und wird deshalb in der Praxis eher eingesetzt als stat.

mkdir - Verzeichnis erstellen

Legt ein neues Verzeichnis an und ermöglicht es, für das neue Verzeichnis die Rechte für Lesen, Schreiben und Ausführen zu vergeben (nur bei Unix-Systemen wirksam).

Erwartet als Parameter:
1. den Namen des neuen Verzeichnisses, wenn nötig nach oben Pfadnamen.
2. eine nach oben Rechteangabe. Der Wert muss numerisch oktal übergeben werden, nicht als Zeichenkette! Zum Ermitteln der gewünschten Oktalzahl können Sie den Seite Unix-Dateirechte-Setzer bei den kleinen Helferlein verwenden.
Auf Systemen, die keine Unix-Rechteverwaltung kennen, also z.B. unter Windows, ist der zweite Parameter bedeutungslos.

Gibt 1 bzw. TRUE zurück, wenn die Operation erfolgreich war, und 0 bzw. FALSE, wenn das Anlegen des Verzeichnisses nicht möglich war (z.B. weil in dem Verzeichnis, in dem das Unterverzeichnis angelegt werden sollte, kein Schreibrecht besteht). Der genaue Fehlertext kann in diesem Fall über die Seite vordefinierte Variable $! ermittelt werden.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my @Verzeichnisbaum = (
"texte",
"texte/briefe",
"texte/rechnungen",
"texte/rechnungen/alt",
"texte/rechnungen/neu",
"grafiken",
"grafiken/fotos",
"grafiken/fotos/fremde",
"grafiken/cliparts",
);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
chdir("/temp");
foreach(@Verzeichnisbaum) {
  mkdir($_,0777);
  print "Unterverzeichnis <strong>$_</strong> angelegt<br>\n";
}
print "</body></html>\n";

Erläuterung:

Das Beispiel definiert eine Liste namens @Verzeichnisbaum. Darin werden Einträge gespeichert, die eine anzulegende Unterverzeichnisstruktur darstellen. Weiter unten im Beispielscript wird diese Liste in einer Seite foreach-Schleife abgearbeitet. Dabei wird jedes einzelne der Verzeichnisse mit mkdir angelegt. Das jeweils aktuelle Verzeichnis der Liste steht innerhalb der Schleife in $_. Als zweiter Parameter wird die Oktalzahl 0777 übergeben. Damit erhalten alle Benutzer der Verzeichnisse alle Rechte. Das Beispielscript erzeugt HTML-Code und gibt für jedes angelegte Verzeichnis einen entsprechenden Satz aus.

readlink - Wert einer Link-Datei auslesen

Liest den Wert einer symbolischen Link-Datei aus. Das sind Link-Dateien, die z.B. mit Hilfe von nach unten symlink erzeugt wurden.

Erwartet als Parameter:
1. den Namen der symbolischen Link-Datei, wenn nötig mit nach oben Pfadnamen.
Es ist auch möglich, keinen Parameter zu übergeben. In diesem Fall wird der Inhalt der Seite vordefinierten Variablen $_ verwendet.

Gibt den vollständigen Pfad der Datei aus, auf die sich die Link-Datei bezieht. Im Fehlerfall gibt die Funktion undef zurück und schreibt den Fehlertext in die vordefinierte Variable $!. Auf Betriebssystemen, die keine symbolischen Links kennen, also z.B. unter Windows, produziert der Aufruf dieser Funktion einen schweren Fehler.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl

use strict;
use CGI::Carp qw(fatalsToBrowser);

chdir("/tmp");
symlink("/usr/local/webdocs/index.htm","webindex.sym");
my $Inhalt = readlink("webindex.sym");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Inhalt der symbolischen Datei: $Inhalt\n";
print "</body></html>\n";

Erläuterung:

Das Beispielscript wechselt zunächst mit nach oben chdir ins Verzeichnis /tmp. Dort legt es mit symlink eine symbolische Link-Datei namens webindex.sym an, die ein symbolischer Link zu der Datei /usr/local/webdocs/index.htm ist. Mit readlink wird anschließend der Wert ausgelesen, der der symbolischen Datei zugeordnet ist. Zur Kontrolle erzeugt das Beispielscript HTML-Code. Dabei wird der webindex.sym zugeordnete Pfadnamen zur verlinkten Datei ausgegeben.

rename - Datei/Verzeichnis umbenennen

Erwartet als Parameter:
1. den Namen der umzubenennenden Datei oder des umzubenennenden Verzeichnisses, wenn nötig mit nach oben Pfadnamen.
2. den neuen Namen der Datei oder des Verzeichnisses, wenn nötig mit neuem Pfadnamen.
Wenn der erste Parameter eine Datei ist und der zweite Parameter der Name eines anderen Verzeichnisses, wird die Datei in das andere Verzeichnis verschoben. Es ist jedoch mit dieser Funktion nicht möglich, als ersten und zweiten Parameter zwei unterschiedliche Verzeichnisse anzugeben, um das erste Verzeichnis in das zweite zu verschieben.
Es ist außerdem nicht möglich, Dateien auf eine andere Partition zu verschieben. Abhilfe schafft hierbei die Funktion move aus dem Seite Standardmodul File::Copy.

Gibt true zurück, wenn die Operation erfolgreich war, ansonsten false.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

chdir("/htmldocs");
opendir(DIR,".");
my @Eintraege = readdir(DIR);
closedir(DIR);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
my $Eintrag;
my $Name;
my $NeuerEintrag;
foreach $Eintrag (@Eintraege) {
 if($Eintrag =~ /(.+)\.htm/) {
   $Name = $1;
   $NeuerEintrag = $Name.".html";
   rename($Eintrag,$NeuerEintrag);
   print "$Eintrag in $NeuerEintrag umbenannt<br>\n";
 }
}
print "</body></html>\n";

Erläuterung:

Das Beispiel bewirkt, dass alle Dateien eines Verzeichnisses, die auf die Endung .htm enden, in gleichnamige Dateien mit der Endung .html umbenannt werden.
Das Script wechselt zunächst mit nach oben chdir in das Verzeichnis /htmldocs. Anschließend liest es dieses aktuelle Verzeichnis (".") in die Liste @Eintraege ein (Erläuterungen zu diesen Befehlen siehe Seite opendir). Das Beispielscript erstellt HTML-Code. Dabei werden die Einträge des eingelesenen Verzeichnisses in einer Seite foreach-Schleife abgearbeitet. Bei jedem Eintrag wird geprüft, ob es sich um eine Datei mit der Endung .htm handelt. Wenn ja, wird der "Vorname" der Datei in $Name gespeichert und ein neuer Dateiname aus dem Wert von $Name und der Endung .html definiert. Anschließend wird die Funktion rename aufgerufen. Dabei wird der bisherige Eintrag, also eine Datei .htm, in den neuen Eintrag, also eine Datei mit gleichem Vornamen, nur mit der Endung .html, umbenannt. Zur Kontrolle listet das Script alle Umbenennungen auf.

rmdir - Verzeichnis löschen

Erwartet als Parameter:
1. den Namen des zu löschenden Verzeichnisses, wenn nötig den nach oben Pfadnamen.
Das Verzeichnis muss leer sein, andernfalls kann es mit dieser Funktion nicht gelöscht werden. Nicht leere Verzeichnisse lassen sich mit der Funktion rmtree aus dem Seite Standardmodul File::Path löschen.

Gibt 1 zurück, wenn das Verzeichnis gelöscht wurde. Falls ein Fehler aufgetreten ist, wird 0 zurückgegeben, und in der Seite vordefinierten Variablen $! steht die Fehlermeldung.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Verzeichnis = $ENV{'QUERY_STRING'};
my $Ergebnis = rmdir($Verzeichnis);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
if($Ergebnis == 1) {
  print "$Verzeichnis gel&ouml;scht!";
}
else {
 print "$!";
}
print "</body></html>\n";

Erläuterung:

Das Script erwartet einen Übergabeparameter, der beim Aufruf über einen URI hinter einem Fragezeichen notiert wird. Der Übergabeparameter besteht in der Pfadangabe des zu löschenden Verzeichnisses. Beispiel:
/mydocs/texte/schrott.
Das Script versucht, das übergebene Verzeichnis zu löschen. Der Rückgabewert des Versuchs wird in dem Skalar $Ergebnis gespeichert.
Anschließend erzeugt das Script HTML-Code. Dabei wird ausgegeben, ob das übergebene Verzeichnis erfolgreich gelöscht wurde oder nicht. Wenn nicht, wird die erzeugte Fehlermeldung ausgegeben.

stat - Eigenschaften einer Datei ermitteln

Ermittelt diverse Eigenschaften einer Datei auf einmal in Listenform. Die meisten dieser Eigenschaften sind Unix-spezifisch. Einige Eigenschaften lassen sich zwar auch auf anderen Plattformen abfragen, doch dazu ist es eigentlich einfacher, die nach oben Dateitestoperatoren für Dateien/Verzeichnisse zu verwenden. Die Funktion stat lässt sich im Gegensatz zu nach oben lstat nicht auf Dateirepräsentanzen (symbolische links), sondern nur auf "Originale" von Dateien anwenden.

Erwartet als Parameter:
1. den Namen der gewünschten Datei, wenn nötig mit nach oben Pfadnamen. Alternativ kann auch der Name eines Datei-Handles übergeben werden.

Gibt eine Liste mit mehreren Elementen zurück. Jedes Element enthält eine bestimmte ermittelte Datei-Eigenschaft.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Datei = "/usr/webperldoc/index.html";
my @Info = stat($Datei);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
print "<strong>Datei:</strong>                      $Datei\n";
print "<strong>Geraetenummer:</strong>              $Info[0]\n";
print "<strong>Inode-Nummer:</strong>               $Info[1]\n";
printf "<strong>Zugriffsrechte:</strong>             %o\n", $Info[2];
print "<strong>Anzahl Links auf Datei:</strong>     $Info[3]\n";
print "<strong>User-ID des Besitzers:</strong>      $Info[4]\n";
print "<strong>Gruppen-ID des Besitzers:</strong>   $Info[5]\n";
print "<strong>Raw-Geraetenummer:</strong>          $Info[6]\n";
print "<strong>Dateigroesse:</strong>               $Info[7]\n";
print "<strong>Letzte Zugriffszeit:</strong>        $Info[8]\n";
print "<strong>Letzte Aenderungsszeit:</strong>     $Info[9]\n";
print "<strong>Inode-Aenderungsszeit:</strong>      $Info[10]\n";
print "<strong>Ideale Blockgroesse:</strong>        $Info[11]\n";
print "<strong>Anzahl belegter Blocks:</strong>     $Info[12]\n";
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt für eine bestimmte Datei (/usr/data/artikel.zip) mit stat die verfügbaren Datei-Eigenschaften. Der Rückgabewert der Funktion wird in einer Liste @Info gespeichert. Das Beispiel erzeugt HTML-Code und listet darin alle 13 Einzeleigenschaften, abrufbar über $Info[0] bis $Info[12], auf. Die folgende Tabelle enthält nähere Informationen über die einzelnen Eigenschaften.

Indexnr.: | Erläuterung:
[0] | Gerätenummer: die systemweit eindeutige Gerätenummer des Dateisystems, auf dem sich die Datei befindet.
[1] | Inode-Nummer: Die dateisystemweit eindeutige Nummer der Datei innerhalb des Dateisystems mit der Gerätenummer aus [0].
[2] | Dateityp/Zugriffsrechte: Der zurückgegebene Wert muss als Oktalzahl interpretiert werden (daher im obigen Beispiel auch die Ausgabe mit Seite printf als Oktalzahl). Die oktale Bewertung der Zahl zeigt zwar eine einzige Zahl, die jedoch aus zwei Teilen besteht. Die letzten drei Ziffern bedeuten die nach oben Rechteangaben zur Datei, und die Ziffern davor bedeuten den Dateityp. Die entsprechenden Nummern werden auf Unix-Systemen in der Datei sys/stat.h definiert.
[3] | Anzahl Links auf Datei: Anzahl physikalisch existierender Repräsentationen der Datei, also mindestens 1. Bei gesetzten Links, wie es in Perl z.B. mit der Funktion nach oben link möglich ist, erhöht sich die Anzahl.
[4] | User-ID des Besitzers: Die Nummer des Datei-Eigentümers.
[5] | Gruppen-ID des Besitzers: Die Nummer der Gruppe, zu der der Datei-Eigentümer gehört.
[6] | Raw-Gerätenummer: Nur bei Gerätedateien interessant.
[7] | Dateigröße: Die logische Größe der Datei in Bytes.
[8] | Letzte Zugriffszeit: Zeitstempel des letzten lesenden oder schreibenden Zugriffs auf die Datei. Die zurückgegebene Zahl bedeutet die Anzahl Sekunden seit dem 1.1.1970 bis zum Augenblick des letzten Zugriffs.
[9] | Letzte Änderungszeit: Zeitstempel des letzten schreibenden Zugriffs auf die Datei. Die zurückgegebene Zahl bedeutet die Anzahl Sekunden seit dem 1.1.1970 bis zum Augenblick des letzten Zugriffs.
[10] | Inode-Änderungszeit: Zeitstempel des letzten Zugriffs auf die Datei, der eine Änderung der Inode-Nummer bewirkte. Die zurückgegebene Zahl bedeutet die Anzahl Sekunden seit dem 1.1.1970 bis zum Augenblick der letzten Inode-Änderung.
[11] | Ideale Blockgröße: Die optimale Anzahl Bytes zum blockweisen Lesen oder Schreiben der Datei - in Perl mit Funktionen wie Seite sysread oder Seite syswrite.
[12] | Anzahl belegter Blöcke: Die Anzahl der vom Betriebssystem benutzen Speicherblöcke, um die Datei zu speichern.

symlink - neue Datei als symbolischen Link auf vorhandene erzeugen

Erzeugt einen symbolischen Link auf eine anderswo gespeicherte Datei. Der erzeugte Verzeichniseintrag erscheint jedoch im Gegensatz zu einem Eintrag, der mit nach oben link erzeugt wurde, nicht als tatsächliche Repräsentation der anderen Datei, sondern nur als Verknüpfung zu der anderen Datei (Unix-spezifisch).

Erwartet als Parameter:
1. die existierende Datei, zu der ein symbolischer Link erzeugt werden soll, wenn nötig mit nach oben Pfadangabe,
2. die neu zu erzeugende, symbolische Link-Datei, wenn nötig mit Pfadangabe.

Gibt 1 zurück, wenn die Operation erfolgreich war, und 0, wenn sie nicht erfolgreich war. Auf Betriebssystemen, die keine symbolischen Links kennen, kann diese Funktion zu einem schweren Fehler beim Ausführen des Scripts führen!

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $symlink_exists = eval { symlink("",""); 1 };
if($symlink_exists) {
  symlink("/usr/local/people/stefan.htm","/usr/local/links/stefan.link");
}

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
opendir(DIR, "/u/web/teamon/temp");
my @Dateien = readdir(DIR);
closedir(DIR);
foreach (@Dateien) {
  print "$_<br>\n";
}
print "</body></html>\n";

Erläuterung:

Das Beispiel überprüft zunächst mit Hilfe der Funktion Seite eval, ob auf dem Betriebssystem, unter dem das Script ausgeführt wird, symbolische Links möglich sind. Benutzen Sie zu einer solchen Überprüfung den Befehl wie im Beispiel notiert. In dem Rückgabewert, der im Beispiel in dem Skalar $symlink_exists gespeichert wird, steht der Wert 1 (true), falls symbolische Links möglich sind. Mit der Konstruktion if($symlink_exists) ist dann die bedingte Ausführung von symlink möglich. Im Beispiel wird eine Link-Datei namens stefan.link erzeugt, die auf die Originaldatei stefan.htm in einem anderen Verzeichnis zeigt. Das Beispiel liest zur Kontrolle das Verzeichnis, in dem die symbolische Link-Datei erzeugt wurde, ein (Erläuterungen zu diesen Befehlen siehe Seite opendir) und gibt entsprechenden HTML-Code aus.

umask - Umask des laufenden Prozesses ändern

Diese Funktion ist nur für Unix-Systeme relevant. Wenn unter Unix eine neue Datei geschrieben wird, werden die dabei vergebenen Zugriffsrechte durch die Umask des aktuell laufenden Prozesses (z.B. das laufende Perl-Script, das die Datei erzeugt) beeinflusst. Durch Aufruf der Funktion umask können Sie die Umask des laufenden Prozesses ändern und dadurch deren Wirkung auf die Zugriffsrechte neu erzeugter Dateien beeinflussen.

Erwartet als Parameter:
1. eine Bitmaske für eine nach oben Rechteangabe. Der Wert muss oktal übergeben werden. Jedes gesetzte Bit in der Bitmaske bewirkt, dass das entsprechende Bit in einer vom laufenden Prozess erzeugten Datei ausgeschaltet wird.

Gibt den alten Umask-Wert zurück.

Beispiel:

#!/usr/bin/perl -w

use strict;

use Fcntl;
sysopen(DATEI,"/usr/web/temp/test.txt", O_CREAT,0666);
umask(0077);
sysopen(DATEI2,"/usr/web/temp/test2.txt", O_CREAT,0666);
open(LS,"ls -la /usr/web/temp |");
print while(<LS>);
close(DATEI);
close(DATEI2);
close(LS);

Erläuterung:

Das Beispiel erzeugt mit zwei Aufrufen von Seite sysopen zwei Dateien namens test.txt und test2.txt. Bei beiden Dateien wird als gewünschte Rechteangabe 0666 angegeben. Zwischen den beiden Aufrufen von sysopen steht jedoch ein Aufruf von umask. Der Funktion wird dabei 077 als Oktalzahl mit führender 0 übergeben. Dies bewirkt, dass bei der Datei test2.txt die tatsächlichen Zugriffsrechte auf 0600 gesetzt werden. Zur Kontrolle gibt das Script das Ergebnis des Unix-Kommandos ls für das Verzeichnis, in dem die beiden Dateien erzeugt wurden, aus.

Die Wirkungsweise von umask lässt sich besser verstehen, wenn man das Bitmuster der Oktalzahl aufschlüsselt und mit der Zeichenkettenschreibweise von Zugriffsrechten vergleicht.
Das Bitmuster der Oktalzahl 077 lautet: 000111111 (eine 7 ist 111 binär!).
Die Zeichenkettenschreibweise von 0666 lautet: rw-rw-rw-.
Es stehen sich also 9 Bits und 9 Zeichen gegenüber. Jedes gesetzte Bit (1) der Oktalzahl setzt das analoge Zeichen an der gleichen Stelle auf -, sofern dort vorher r, w oder x stand.
Das Bitmuster 000111111 bewirkt also bei einem Recht rw-rw-rw-, dass alle hinteren 6 Zeichen auf - gesetzt werden, sodass rw------- herauskommt (was wiederum oktal 0600 entspricht).

unlink - Dateien löschen

Löscht eine oder mehrere Dateien gleichzeitig. Verzeichnisse können mit diesem Befehl nicht gelöscht werden, dazu steht die Funktion nach oben rmdir zur Verfügung.

Erwartet als Parameter:
1. eine Liste von Dateien, die gelöscht werden sollen.

Gibt die Anzahl der erfolgreich gelöschten Dateien zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

chdir("/tmp");
opendir(DIR,".");
my @Eintraege = readdir(DIR);
closedir(DIR);
my $Anzahl = 0;
foreach (@Eintraege) {
 unless( -d $_) {
   $Anzahl+= unlink($_);
 }
}
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "$Anzahl Dateien entfernt!\n";
print "</body></html>\n";

Erläuterung:

Mit nach oben chdir wechselt das Beispielscript zunächst in das Verzeichnis, in dem etwas gelöscht werden soll. Anschließend wird das Verzeichnis mit Seite opendir, Seite readdir und Seite closedir eingelesen. Die Verzeichniseinträge stehen anschließend in der Liste @Eintraege. In einer Seite foreach-Schleife wird die Liste sodann abgearbeitet. Mit unless( -d $_) wird abgefragt, ob der aktuelle Eintrag kein Verzeichnis ist. Wenn das der Fall ist, wird der Eintrag, also eine Datei, mit unlink gelöscht. Beim erfolgreichen Löschen wird die Variable $Anzahl um 1 erhöht. Am Ende gibt das Script HTML-Code mit der Anzahl der gelöschten Dateien aus.

utime - Zeitstempel von Dateien/Verzeichnissen ändern

Ändert den Zeitstempel für den letzten Lesezugriff und den letzten Schreibzugriff von einer oder mehreren Dateien.

Erwartet als Parameter:
1. Eine Zeitangabe für den letzten Lesezugriff. Es muss sich um eine Sekundenangabe seit dem 1.1.1970 handeln, so wie ihn beispielsweise die Funktion Seite time zurückgibt.
2. Eine Zeitangabe für den letzten Schreibzugriff. Auch dabei muss es sich um eine Sekundenangabe seit dem 1.1.1970 handeln.
3. eine Liste von Dateien, deren Zeitstempel geändert werden soll.

Gibt die Anzahl der erfolgreich "berührten" Dateien zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $Datei = $ENV{'QUERY_STRING'};
my $Jetzt = time();
utime($Jetzt,$Jetzt,$Datei);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
print "Zeitstempel von $Datei wurde aktualisiert!\n";
print "</body></html>\n";

Erläuterung:

Das Script aktualisiert den Zeitstempel einer Datei. Beim Aufruf erwartet es einen Übergabeparameter, der beim URI hinter einem Fragezeichen notiert wird. Der Übergabeparameter besteht in der Pfadangabe einer Datei, deren Zeitstempel aktualisiert werden soll. Beispiel:
http://localhost/cgi-bin/test.pl?/mydocs/texte/wichtig.txt.
Den übergebenen Parameter speichert das Script in dem Skalar $Datei. Um den aktuellen Zeitpunkt zu ermitteln, wird die Funktion time aufgerufen. Sie liefert die Anzahl der Sekunden seit dem 1.1.1970 zurück, also genau die Form, die utime erwartet. Der Rückgabewert wird in $Jetzt gespeichert. Nun kann das Script die utime-Funktion aufrufen und ihr die gewünschten Parameter übergeben. Wenn Sie mehr als eine Datei auf einmal verarbeiten möchten, geben Sie alle gewünschten Dateien durch Kommata getrennt an.
Anschließend erzeugt das Script HTML-Code. Dabei wird das "Berühren" der Datei bestätigt.

Beachten Sie:

Nicht alle Betriebssysteme unterscheiden wie Unix zwei verschiedene Zeitstempel. Unter Windows beispielsweise gibt es keinen Zeitstempel für den letzten Lesezugriff, nur für den letzten Schreibzugriff. Übergeben Sie utime dennoch immer beide Parameter. Unter Windows wird dann nur der eine vorhandene Zeitstempel geändert.

nach oben
weiter | Seite Funktionen für Betriebssystemaufrufe
zurück | Seite Funktionen für Ein-/Ausgabe und Lesen/Schreiben von Daten
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für Betriebssystemaufrufe

SELFHTML

Funktionen für Betriebssystemaufrufe
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten qx(...) - Andere Programme/Scripts ausführen und STDOUT auffangen
nach unten alarm - SIGALARM in n Sekunden zustellen
nach unten exec - Fremdprogramm aufrufen und eigenen Prozess beenden
nach unten fork - Kindprozess erzeugen
nach unten getpgrp - Prozessgruppe einer Prozessnummer (pid) ermitteln
nach unten getppid - Prozessnummer (pid) des Elternprozesses ermitteln
nach unten getpriority - Priorität eines Prozesses oder Benutzers ermitteln
nach unten kill - Signal an Prozess senden
nach unten pipe - Pipe erzeugen
nach unten setpgrp - Prozessgruppe für Prozess bestimmen
nach unten setpriority - Priorität eines Prozesses oder Benutzers setzen
nach unten sleep - aktuellen Prozess anhalten
nach unten system - Fremdprogramm aufrufen und eigenen Prozess erhalten
nach unten times - Laufzeit des aktuellen Prozesses ermitteln
nach unten wait - auf das Ende eines Kindprozesses warten
nach unten waitpid - auf das Ende eines Kindprozesses mit bestimmter Prozessnummer (pid) warten
nach unten

Allgemeines zu diesen Funktionen

Unter "Betriebssystemaufrufe" sind hier Funktionen versammelt, die sich vor allem eng am Konzept der Unix-Betriebssysteme orientieren. Nur wenige der Funktionen sind auf andere Systeme portierbar.

Unix-Systeme verwalten laufende "Programme" in so genannten Prozessen. Jeder Prozess hat eine Prozessnummer (PID). Außerdem gibt es Prozessgruppen. Jeder Prozess gehört zu einer Prozessgruppe. Prozessgruppen haben ebenfalls Nummern. Auch Ihr Perl-Script stellt, wenn es ausgeführt wird, einen solchen Prozess dar, der einer Prozessgruppe angehört. Bei vielen der hier beschriebenen Funktionen können Sie den aktuellen Prozess, also den Ihres Perl-Scripts, durch die "virtuelle" Prozessnummer 0 ansprechen. Über Seite vordefinierte Variablen können Sie jedoch auch die tatsächliche Prozessnummer herausfinden und benutzen. Das folgende Beispielscript zeigt die entsprechenden Variablen im Einsatz:

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
print "Prozessnummer (PID): <strong>$$</strong><br>\n";
print "Reale Benutzergruppe (GID) des Prozesses: <strong>$(</strong><br>\n";
print "Effektive Benutzergruppe (GID) des Prozesses: <strong>$)</strong>\n";
print "</body></html>\n";

Erläuterung:

Mit $$ sprechen Sie die Nummer des aktuellen Prozesses an. Der Prozess läuft unter einer bestimmten User-ID, die wiederum einer oder mehreren Gruppen angehört. Wenn das Script beispielsweise mit setgid gestartet wurde, enthält die reale Gruppen-ID die Gruppe(n), von der aus gestartet wurde, die effektive Gruppen-ID enthält die Gruppe(n), in die gewechselt wurde (die aktuelle also). Das Beispiel-CGI-Script gibt die entsprechenden Daten aus.

Weitere wichtige Konzepte der Unix-Betriebssysteme, auf die Sie mit Perl-Funktionen Zugriff haben, sind Alarme, Kindprozesse und die so genannten Pipes. Nähere Informationen dazu finden Sie in der Unix-Fachliteratur.

qx(...) - Andere Programme/Scripts ausführen und STDOUT auffangen

Hierbei handelt es sich eigentlich nicht um eine Perl-Funktion, sondern um eine besondere Form des Seite Notierens von Zeichenketten. Das qx steht für quoted executable. Die darin eingeschlossene Zeichenkette wird von Perl einfach in einen Kommandozeilenaufruf umgesetzt. Die Standardausgabe des aufgerufenen Kommandos, Fremdprogramms oder Scripts wird aufgefangen und kann in einer Variablen gespeichert werden. Eine andere Möglichkeit, diese Art von ausführbaren Zeichenketten zu notieren, sind die so genannten Backticks. Dabei arbeiten Sie anstelle von qx(irgendein Kommando) mit dem rückwärts gerichteten Accent-Zeichen ` und notieren `irgendein Kommando`.

Die Funktionalität der ausführbaren Zeichenketten ist für CGI-Scripts extrem nützlich, um die Ausgaben anderer Prozesse auffangen und an den Browser senden lassen zu können. So lassen sich beispielsweise Kapitel XML-Daten mit Seite XSLT und einem XSLT-Prozessor in HTML übersetzen. Wenn dieser Prozessor seine Ergebnisse auf den Seite Standardausgabekanal STDOUT schreibt, kann das CGI-Script die Ausgabe auffangen und an den Webserver zur Weiterleitung übergeben. Das folgende Beispiel zeigt dies.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
my $Output = qx(/usr/bin/saxon /daten/xml/kunden.xml /daten/xml/kunden.xsl);
print "$Output";

Erläuterung:

Mehr als dieses winzige Script ist nicht nötig, um XML-Daten in HTML-Form an den Webserver zur Übergabe an einen aufrufenden Browser zu senden - sofern ein XSLT-Prozessor die Übersetzungsarbeit leistet. Das Beispiel führt folgendes Kommando aus:
/usr/bin/saxon /daten/xml/kunden.xml /daten/xml/kunden.xsl
Dabei ist saxon der Name eines XSLT-Prozessors, also eines ausführbaren Programms. Dieses Programm erwartet im Normalfall zwei Aufrufparameter: erstens die Angabe einer XML-Datei, und zweitens die Angabe einer dazu passenden XSL-Datei mit XSLT-Anweisungen. Saxon übersetzt die XML-Auszeichnungen aufgrund der XSLT-Angaben in HTML-Konstrukte und gibt das Ergebnis, eine vollständige HTML-Datei, auf die Standardausgabe aus. Das Script fängt diese Standardausgabe auf, indem es sie in der Variablen $Output speichert. In dieser Variablen steht also nach dem Saxon-Aufruf der gesamte Inhalt der HTML-Daten. Ein einfacher print-Befehl genügt anschließend, um die gesamten HTML-Daten auszugeben.

Beachten Sie:

Die Art der Klammerung bei Verwendung von qx ist egal. Sie können auch eckige oder geschweifte Klammern oder Schrägstriche verwenden - von letzteren ist allerdings abzuraten, weil viele Kommandos Pfadangaben benötigen und Sie in diesem Fall alle Schrägstriche bei Pfadangaben maskieren müssten.

Bei Pfadangaben sollten Sie auch bei qx(...) stets die einfachen Schrägstriche verwenden - auch wenn das Perl-Script unter Windows ausgeführt wird.

Mit Backticks würde der Aufruf des obigen Beispiels lauten:
my $Output = `/usr/bin/saxon /daten/xml/kunden.xml /daten/xml/kunden.xsl`;
Um die Backticks zu erzeugen, halten Sie auf den meisten Systemen die Shift-Taste gedrückt, tippen einmal auf die Taste mit den französischen Accent-Zeichen und anschließend die Leertaste.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Links zu Online-Seite XML-Software. Dort finden Sie ebenso Verweise zu Produkten wie Saxon.

Die hier beschriebene Möglichkeit ist auf alle Kommandos anwendbar, die etwas auf die Standardausgabe STDOUT schreiben, also z.B. auch auf Betriebssystem-Kommandos wie ls (bzw. dir), oder auch auf andere Perl-Scripts. Einige solcher Programme oder Kommandos schreiben ihren Output bei fehlerhaften Aufrufen jedoch nicht auf STDOUT, sondern auf STDERR. Solche Ausgaben werden von den hier beschriebenen ausführbaren Zeichenketten nicht aufgefangen.

alarm - SIGALARM in n Sekunden zustellen

Unix-spezifischer Befehl. Bewirkt, dass der Prozess einen SIGALARM nach einer bestimmten Anzahl Sekunden erhält, wenn z.B. ein kritischer Befehl nicht funktioniert.

Erwartet als Parameter:
1. die Anzahl Sekunden, bis der Alarm aktiv wird.

Gibt die Anzahl Sekunden zurück, die verstrichen sind.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body><pre>\n";

eval {
  local $SIG{ALRM} = sub { die "Alarm" };
  alarm(2);
  system("/usr/bin/perl -c /usr/web/myhome/cgi-bin/freelink.pl");
  alarm(0);
};
if ($@ and $@ !~ /Alarm/) {
  print "Problem! 2 Sekunden vergangen!\n";
}
else {
  print "Alles klar!\n";
}
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie einen "kritischen Systemaufruf" mit Hilfe eines Timeout-Alarms behandeln können. Dazu wird in dem Script zunächst ein für solche Behandlung typischer Seite eval-Block notiert. Darin wird mit der typischen Anweisung:
local $SIG{ALRM} = sub { die "Alarm" };
eine Behandlungsroutine für SIGALARM definiert. Anschließend wird mit alarm(2) ein Timeout von 2 Sekunden definiert, bevor der Alarm aktiv wird. Mit alarm(0) wird der Alarm wieder zurückgesetzt.
Danach wird versucht, mit nach unten system den Perl-Interpreter aufzurufen, und zwar so, dass er ein bestimmtes Script auf die Gültigkeit seiner Syntax überprüft. Sollte dieser Vorgang mehr als 2 Sekunden dauern, wird der Alarm aktiv.
Mit der Abfrage if ($@ and $@ !~ /Alarm/) wird überprüft, ob der Alarm aktiv wurde. Wenn ja, wird eine entsprechende Meldung ausgegeben. Im else-Zweig kann der Code stehen, der ausgeführt wird, wenn alles in Ordnung war. Im Beispiel wird einfach ebenfalls eine entsprechende Meldung ausgegeben.

Beachten Sie

Aufrufe mit nach unten system oder nach oben qx(...) in Verbindung mit alarm können zu sogenannten Zombies führen. Möglicherweise müssen Sie sie für solche Zwecke mit Hilfe von nach unten fork und nach unten exec selbst implementieren.

exec - Fremdprogramm aufrufen und eigenen Prozess beenden

Startet einen anderen Prozess und beendet das aktuelle Script. Der aktuelle Prozess wird dabei durch den neuen Prozess vollständig ersetzt. Wenn Sie das aktuelle Script nicht beenden wollen, benutzen Sie nach unten system, nach oben qx(...) oder Seite open mit dem Pipe-Zeichen |.

Erwartet als Parameter:
1. Kommandozeilenaufruf des gewünschten Programms,
2. bis n. (optional) Liste mit Aufrufparametern.

Beispiel:

#!/usr/bin/perl -w

exec("/usr/bin/perl","mystats.pl") if -e "mystats.pl";

Erläuterung:

Das Beispiel fragt mit Hilfe des Seite Dateitestoperators -e ab, ob eine Datei namens mystats.pl im aktuellen Verzeichnis existiert. Wenn ja, wird der Perl-Interpreter (in einem eigenen neuen Prozess) gestartet und führt mystats.pl aus.

fork - Kindprozess erzeugen

Unix-spezifischer Befehl. Erzeugt eine Kopie des aktuellen Prozesses, die dem aktuellen erzeugenden Prozess untergeordnet ist. Ein Perl-Script kann sich auf diese Weise gabeln (engl. fork) und Daten in zwei getrennten Prozessen verarbeiten. Auf geöffnete Dateien können dabei beide Prozesse zugreifen. Alles übrige, wie Variablen usw., wird vom Elternprozess in den Kindprozess kopiert. Die Variable, die den Rückgabewert von fork speichert, hat jedoch im Elternprozess einen Wert, nämlich die Prozessnummer des Kindprozesses, während sie im Kindprozess den Wert 0 hat.
Obwohl fork eigentlich aus der Unix-Welt stammt, lässt sich diese Funktion mittlerweile auch unter ActivePerl für Windows nutzen.

Erwartet keine Parameter.

Gibt die vom Betriebssystem zugewiesene Prozessnummer des Kindprozesses zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

$| = 1;
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
my $Eltern_pid = $$;
my $Kind_pid = fork();

if($Kind_pid) {
  print "<p>Hier ist der Elternprozess. Der Kindprozess hat die PID <strong>$Kind_pid</strong></p>\n";
  wait;
}
else {
  my $Eltern_pid = getppid();
  print "<p>Hier ist der Kindprozess. Der Elternprozess hat die PID <strong>$Eltern_pid</strong></p>\n";
  exit(0);
}
print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt mit fork einen Kindprozess. Der Rückgabewert der Funktion, die Prozessnummer des Kindprozesses, wird in dem Skalar $Kind_pid gespeichert. Im Beispiel ist daraufhin eine if-Abfrage notiert. Mit if($Kind_pid) wird abgefragt, ob der Skalar $Kind_pid einen Wert ungleich 0 hat. Ist das der Fall, werden Anweisungen ausgeführt, die zum Elternprozess gehören. Im Beispiel wird eine Meldung ausgegeben, dass sich das Script im Elternprozess befindet. Außerdem wird die Prozessnummer des Kindprozesses ausgegeben. Danach wird mit der Anweisung nach unten wait gewartet, bis der Kindprozess beendet ist. Im else-Zweig, in den das Script gelangt, wenn Kind_pid den Wert 0 hat, wird dagegen ausgegeben, dass der Kindprozess aktiv ist. Außerdem wird die Prozessnummer des Elternprozesses ausgegeben. Danach wird der Kindprozess mit der Anweisung exit(0); beendet. Der Elternprozess, der darauf nur gewartet hat, gibt dann noch die letzte Zeile HTML-Code aus.
Das besondere Verhalten des Scripts, das in zwei Prozessen läuft, zeigt sich im Beispiel darin, dass sowohl der if-Zweig als auch der else-Zweig ausgeführt werden. Das erklärt sich daraus, dass die if-Bedingung für den Elternprozess wahr ist, die else-Alternative dagegen für den Kindprozess.

getpgrp - Prozessgruppe einer Prozessnummer (pid) ermitteln

Unix-spezifischer Befehl.

Erwartet als Parameter:
1. eine Prozessnummer, zu der die zugehörige Prozessgruppe ermittelt werden soll. Um die Prozessgruppe des aktuellen Prozesses zu ermitteln, müssen Sie 0 übergeben.

Gibt die Gruppennummer zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $Gruppennummer = getpgrp(0);
print "Die Prozessgruppe des aktuellen Prozesses ist <strong>$Gruppennummer</strong>\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel ermittelt die Gruppennummer des aktuellen Prozesses mit getpgrp und gibt HTML-Code mit der ermittelten Nummer aus.

getppid - Prozessnummer (pid) des Elternprozesses ermitteln

Unix-spezifischer Befehl.

Erwartet keine Parameter.

Gibt die Prozessnummer (PID) des Elternprozesses des aktuellen Scripts zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $Eltern_pid = getppid();
print "Die PID des Elternprozesses lautet <strong>$Eltern_pid</strong>\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel ermittelt die PID des Elternprozesses mit getppid und gibt HTML-Code mit der ermittelten Nummer aus.

getpriority - Text

Unix-spezifischer Befehl. Ermittelt die aktuelle Priorität eines Prozesses, einer Prozessgruppe oder eines Benutzers. Prozesse mit höherer Priorität erhalten unter den aktuell laufenden Prozessen mehr Systemressourcen zur Ausführung.

Erwartet als Parameter:
1. eine Angabe dazu, ob Sie die Priorität für einen bestimmten Prozess, eine Prozessgruppe oder einen Benutzer ermitteln wollen. Dazu übergeben Sie am besten eine der Konstanten, die in resource.ph definiert sind (siehe unten).
2. die Nummer des Prozesses, der Prozessgruppe oder des Benutzers.

Gibt die Priorität des Prozesses, der Prozessgruppe oder des Benutzers als Zahl zurück. Der mögliche Wertebereich ist abhängig vom System.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

require "resource.ph";
my $Prio = getpriority(&PRIO_PROCESS,0);
print "Prioritaet des aktuellen Prozesses: $Prio\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel ermittelt mit getpriority die Priorität des aktuellen Prozesses und gibt diese aus. Dazu wird mit require "resource.ph" die Kopfdatei eingebunden, die die Definition der folgenden Konstanten enthält:

Konstante: | Bedeutung:
PRIO_PROCESS | Die Priorität eines bestimmten Prozesses ermitteln, dessen Prozessnummer (oder 0 für den aktuellen Prozess) im zweiten Parameter von getpriority angegeben wird.
PRIO_PGRP | Die Priorität einer Prozessgruppe ermitteln, deren Nummer (oder 0 für die aktuelle Prozessgruppe) im zweiten Parameter angegeben wird.
PRIO_USER | Die Priorität eines Benutzers ermitteln, dessen Benutzernummer (UID - oder 0 für den aktuelle Benutzer) im zweiten Parameter angegeben wird.

Durch Voranstellen eines &-Zeichens können Sie eine der Konstanten wie im Beispiel gezeigt als ersten Parameter übergeben.

Beachten Sie:

Diese Funktion führt zu einem schweren Fehler, wenn das System keine Prozess- bzw. Benutzerverwaltung im Sinne von Unix kennt.

kill - Signal an Prozess senden

Unix-spezifischer Befehl. Damit können Sie aus einem Perl-Script heraus Signale an andere laufende Prozesse auf dem Rechner senden und diese dadurch beeinflussen. Interessant ist dies vor allem, wenn Sie in Ihrem Perl-Script eigene Kindprozesse erzeugen (siehe nach oben fork). Eltern- und Kindprozess können dann durch Signale kommunizieren.

Erwartet als Parameter:
1. Nummer oder Name einer Konstante (siehe Tabelle weiter unten) des gewünschten Signals (oder Sie übergeben 0, um herauszufinden, ob der Prozess mit der nachfolgend übergebenen Prozessnummer noch "am Leben" ist),
2. bis n. einer oder mehrere Prozesse, an die das Signal gesendet werden soll.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

$| = 1;
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

my $Kind_pid = fork();

if(kill(0,$Kind_pid)) {
  print "<p>Hier meldet sich ein Prozess</p>\n";
  kill("KILL",$Kind_pid);
}
print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt mit nach oben fork einen Kindprozess. Mit if(kill(0,$Kind_pid)) wird abgefragt, ob dieser Prozess am Leben ist. Wenn ja, wird ausgegeben, dass sich ein Prozess meldet. Da im Beispiel für den Kindprozess kein eigener Perl-Code notiert ist und Kindprozesse einfach erst mal alles vom Elternprozess kopieren, würden beide Prozesse sich melden und Hier meldet sich ein Prozess ausgeben. Doch im Beispiel wird das verhindert, indem der Elternprozess den Kindprozess mit kill("KILL",$Kind_pid) tötet, bevor dieser die Anweisung mit der Ausgabe der Meldung ausführen kann. Die Meldung wird also insgesamt nur einmal ausgegeben.

Die folgende Tabelle enthält typische Signale mit Namen, wie Sie sie als ersten Parameter an kill übergeben können. Eine Garantie, dass alle hier aufgelisteten Signale auf jedem Rechner in Perl funktionieren, besteht nicht. Auch die entsprechenden Nummern wurden hier weggelassen, da sie von System zu System schwanken können. Maßgeblich ist letztendlich immer, was auf dem jeweiligen Rechner in der Datei /usr/include/signal.h definiert ist.

Name: | Bedeutung:
"HUP" | Ereignis: Verbindung beendet
"INT" | Ereignis: allgemeine Unterbrechung
"QUIT" | Ereignis: Endekennzeichen
"ILL" | Anweisung ist illegal
"TRAP" | Anweisung ist eine "Falle"
"ABRT" | Abbruch
"FPE" | Fehler bei Fließkommaberechnung
"KILL" | Prozess "abschießen" (Unix: kill -9)
"BUS" | Bus-Übertragungsfehler
"SEGV" | Segment-Schutzverletzung im Speicher
"PIPE" | Fehler bei Pipe-Kommunikation
"ALARM" | Allgemeiner Alarm
"TERM" | Beendigung
"USR1" | Benutzerdefiniert 1
"USR2" | Benutzerdefiniert 2
"CHLD" | Signal vom Kindprozess
"PWR" | Stromausfall
"WINCH" | Fenstergröße wurde von einem Hintergrundprozess geändert
"URG" | Dringende Bedingung
"IO" | Asynchrone Ein-/Ausgabe
"STOP" | Prozess anhalten
"TSTP" | Prozess vom Terminal aus anhalten
"CONT" | Angehaltenen Prozess fortführen
"TTIN" | Prozess anhalten durch Lesen vom kontrollierenden Terminal
"TTOU" | Prozess anhalten durch Schreiben auf kontrollierendes Terminal
"VTALARM" | Virtueller Zeittaktgeber abgelaufen
"PROF" | Profil-Zeittaktgeber abgelaufen
"XCPU" | CPU-Belastungsgrenze erreicht
"XSFZ" | Dateigrößengrenze erreicht

Beachten Sie:

Mit dem folgenden Script können Sie abfragen, welche Signale unter welchen Signalnummern auf Ihrem Server-Rechner konfiguriert sind:

#!/usr/bin/perl

use Config;

defined $Config{sig_name} || die "Kein Konfigmodul?";
foreach $name (split(' ', $Config{sig_name})) {
  $i++;
  printf "%3d) %s \t", $i, $name;
  if (($i % 5) == 0) { print "\n";  }
}
print "\n";

pipe - Pipe erzeugen

Unix-spezifischer Befehl. Ermöglicht zwei Prozessen, miteinander zu kommunizieren. Eine "Pipe" (Pfeife, Röhre) ist dabei der Kommunikationskanal für die beiden Prozesse. Es gibt einen Kanal zum Schreiben von Daten und einen zum Lesen von Daten. Für beide Kanäle gibt es jeweils ein "Handle". Diese Lese- und Schreib-Handles sind ganz ähnlich den Seite Datei-Handles. Typischerweise wird eine Pipe eröffnet, bevor mit nach oben fork ein Kindprozess erzeugt wird. Eltern- und Kindprozess können dann über die geöffnete Pipe Daten austauschen.

Erwartet als Parameter:
1. den Namen eines Lese-Handles (frei vergebbar),
2. den Namen eines Schreib-Handles (frei vergebbar)

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

$| = 1;
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body><pre>\n";

pipe(LESE_HANDLE, SCHREIB_HANDLE);
my $Kind_pid = fork();

if ($Kind_pid) {
 close(LESE_HANDLE);
 my $old_handle = select(SCHREIB_HANDLE);
 $| = 1;
 for (my $i=1;$i<=5;$i++) {
   sleep(1);
   print SCHREIB_HANDLE "$i (gesendet vom Elternprozess)\n";
 }
 close(SCHREIB_HANDLE);
 wait;
 select($old_handle);
}
else {
 close(SCHREIB_HANDLE);
my $Speicher;
 while(defined($Speicher = <LESE_HANDLE>)) {
   print "Empfangen: $Speicher \n";
 }
 exit(0);
}
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel erzeugt mit pipe eine Pipe. Über die beiden übergebenen Handle-Namen LESE_HANDLE und SCHREIB_HANDLE ist anschließend der Nachrichtenaustausch zwischen zwei Prozessen möglich. Mit Hilfe von nach oben fork erzeugt das Script einen Kindprozess. Der Elternprozess läuft im if-Zweig des nachfolgenden Codes, der Kindprozess im else-Zweig. Beim Erzeugen des Kindprozesses wird alles kopiert - außer den beiden Handles aus der Pipe. Diese werden nicht kopiert, bleiben allerdings für beide Prozesse verfügbar. Deshalb muss jeder Prozess erst mal das nicht benötigte Handle mit Seite close schließen. Um die Pufferung der Daten abschalten zu können, muss im if-Zweig außerdem mit Seite select das Schreib-Handle ausgewählt werden. Alle Anweisungen sowohl des if- als auch des else-Zweiges werden insgesamt fünf mal ausgeführt. Denn in einer Seite for-Schleife, die von 1 bis 5 zählt, schreibt der Elternprozess, nachdem er zu Testzwecken eine Sekunde lang anhält (siehe nach unten sleep), den aktuellen Zählerstand in das Schreib-Handle. Der Kindprozess im else-Zweig kann diese Daten lesen, indem er eine Seite while-Schleife verwendet und darin das Lese-Handle ausliest. Zur Kontrolle gibt der Kindprozess aus, was er eingelesen hat.

setpgrp - Prozessgruppe für Prozess bestimmen

Unix-spezifischer Befehl. Ordnet einen Prozess einer Prozessgruppe zu.

Erwartet als Parameter:
1. die Prozessnummer (PID) des gewünschten Prozesses (0 für aktuellen Prozess übergeben),
2. die Nummer der Prozessgruppe, der dieser Prozess zugeordnet werden soll (0 für aktuelle Prozessgruppe übergeben).

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
my $gruppe_alt = getpgrp(0);
print "Prozessgruppe alt: <strong>$gruppe_alt</strong><br>\n";

setpgrp(0,0);

my $gruppe_neu = getpgrp(0);
print "Prozessgruppe neu: <strong>$gruppe_neu</strong>\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel ordnet den aktuellen Prozess der aktuellen Prozessgruppe zu und erzeugt so seine eigene Prozessgruppe. Zum Vergleich wird die aktuelle Prozessgruppe vorher und hinterher ausgelesen und jeweils ausgegeben.

setpriority - Priorität eines Prozesses oder Benutzers setzen

Unix-spezifischer Befehl. Setzt die aktuelle Priorität eines Prozesses, einer Prozessgruppe oder eines Benutzers. Prozesse mit höherer Priorität erhalten unter den aktuell laufenden Prozessen mehr Systemressourcen zur Ausführung.
Da diese Funktion "systemkritisch" ist, steht sie auf den meisten Unix-Systemen nur Benutzern mit root-Kennung zur Verfügung.

Parameter wie bei nach oben getpriority

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

require "resource.ph";
my $Prio = getpriority(&PRIO_PROCESS,0);
$Prio += 1;
setpriority (&PRIO_PROCESS, 0, $Prio);
print "Neue Prioritaet des aktuellen Prozesses: $Prio\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel liest mit getpriority die Priorität des aktuellen Prozesses ein, erhöht sie anschließend um 1 und setzt dann mit setpriority den neuen Wert. Zur Kontrolle gibt das Script den aktuellen Wert der Priorität aus.

Beachten Sie:

Diese Funktion führt zu einem schweren Fehler, wenn das System keine Prozess- bzw. Benutzerverwaltung im Sinne von Unix kennt.

sleep - aktuellen Prozess anhalten

Hält die Ausführung des Scripts für eine bestimmte Anzahl Sekunden an und fährt dann fort.

Erwartet als Parameter:
1. die Anzahl Sekunden, die angehalten werden soll. Wenn nichts übergeben wird, wird "für ewig" angehalten.

Beispiel:

#!/usr/bin/perl -w

use strict;

sleep(10);
exec("/usr/bin/perl","aufwachen.pl");

Erläuterung:

Das Beispiel wartet nach Aufruf von sleep(10) 10 Sekunden und führt dann mit nach oben exec ein anderes Script aus.

system - Fremdprogramm aufrufen und eigenen Prozess erhalten

Ruft ein anderes Programm auf und ermittelt dessen Rückgabewert. Wenn Sie daran interessiert sind, welche Ausgaben das andere Programm erzeugt, sollten Sie die Funktion Seite open mit dem Zeichen | oder nach oben qx(...) bzw. `...` (Backticks) benutzen.

Erwartet als Parameter:
1. eine Zeichenkette oder eine Liste. Werden mehrere Parameter, also eine Liste, übergeben, wird der erste Parameter als das auszuführende Programm bzw. Kommando interpretiert, und die übrigen Parameter als Übergabeparameter für das Programm bzw. Kommando.

Gibt den Rückgabewert des ausgeführten Programms oder Kommandos zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

(my $Datei_1, my $Datei_2) = split(/&/,$ENV{'QUERY_STRING'});
my $Pfaddatei_1 = "/usr/web/daten/alt/".$Datei_1;
my $Pfaddatei_2 = "/usr/web/daten/neu/".$Datei_2;
my $Vergleich = system("cmp $Pfaddatei_1 $Pfaddatei_2 >/dev/null");

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";
if($Vergleich == 0) {
  print "<tt>$Pfaddatei_1</tt><br>und<br><tt>$Pfaddatei_2</tt><br><strong>sind gleich!</strong>!\n";
}
else {
  print "<tt>$Pfaddatei_1</tt><br>und<br><tt>$Pfaddatei_2</tt><br><strong>sind verschieden!</strong>!\n";
}
print "</body></html>\n";

Erläuterung:

Das Beispielscript ermittelt den Inhalt der Seite CGI-Umgebungsvariablen QUERY_STRING, erwartet in dem übergebenen Parameter ein kaufmännisches Und (&) und trennt den Teil davor und den dahinter in die Skalare $Datei_1 und $Datei_2. Die beiden Daten werden als Dateien interpretiert. Ein Beispielaufruf des Scripts könnte lauten:
/cgi-bin/script.pl?news.htm&news.htm
Das Script hängt die beiden gleichnamigen Dateien an unterschiedliche Pfadnamen auf dem Server und erzeugt damit zwei unterschiedliche Dateipfadangaben in den Skalaren $Pfaddatei_1 und $Pfaddatei_2. Mit system wird nun der Shell-Befehl cmp (unter Unix) gestartet, der zwei Dateien daraufhin überprüft, ob sie gleich sind. Dem Befehl werden die beiden Skalare mit den Pfadangaben übergeben. Eine Ausgabe soll der Befehl in diesem Fall nicht erzeugen. Deshalb wird seine Ausgabe nach /dev/null umgeleitet. Der Rückgabewert des system-Aufrufs und damit des cmp-Befehls wird jedoch gespeichert, nämlich im Skalar $Vergleich. Wenn der Wert 0 ist, sind die verglichenen Dateien gleich, andernfalls unterschiedlich. Diese Information wird zurückgegeben.

times - Laufzeit des aktuellen Prozesses ermitteln

Ermittelt die Laufzeit eines Prozesses (und, wenn vorhanden, seiner Kindprozesse) von der Erzeugung bis zum Ausführen dieses times-Aufrufs. Ermittelt werden für jeden Prozess jeweils zwei Werte: "user time" und "system time". Während "user time" bezeichnet, wie lange der Prozess selber gelaufen ist, gibt "system time" die Zeit an, wie lange der Prozess das Betriebssystem beschäftigt hat. Die Summe beider Zeiten ist die gesamte verbrauchte CPU-Zeit.
Die gemessenen Zeiten basieren auf so genannten Uhrenticks. Die Anzahl der Uhrenticks pro Sekunde ist auf Unix-Systemen einstellbar (TICKSPERSEC in der Datei conf.h).

Erwartet keine Parameter.

Gibt eine Liste mit Laufzeiten in Sekunden (Fließkommazahlen mit Angaben zu Sekundenbruchteilen) zurück. Schema:
($user_time,$system_time[,$user_time_Kind,$system_time_Kind,...])

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

my $x;
for(my $i = 0; $i < 1000; $i++) {
  for(my $k = 0; $k < 100; $k++) {
    $x = $i * $k / time();
  }
}

my ($Systemzeit, $Userzeit) = times();
my $CPU_Zeit = $Systemzeit + $Userzeit;

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
print "verbrauchte Systemzeit: <strong>$Systemzeit</strong> Sekunden<br>\n";
print "verbrauchte Userzeit: <strong>$Userzeit</strong> Sekunden<br>\n";
print "verbrauchte CPU-Zeit: <strong>$CPU_Zeit</strong> Sekunden\n";
print "</body></html>\n";

Erläuterung:

Das Beispiel enthält zwei verschachtelte Seite for-Schleifen, in denen sehr viel zu rechnen ist (es werden insgesamt 100.000 Funktionsaufrufe von Seite time und Bruchzahlrechnungen durchgeführt). Anschließend ermittelt das Beispiel die benötigten Zeiten. Vom Aufruf der Funktion times werden die ersten beiden Listenelemente, also die für den aktuellen Prozess, in den Skalaren $Systemzeit und $Userzeit festgehalten. Aus der Summe dieser beiden wird noch die CPU-Zeit ermittelt und in $CPU_Zeit gespeichert. Zur Kontrolle gibt das Script die ermittelten Zeiten aus.

wait - auf das Ende eines Kindprozesses warten

Unix-spezifischer Befehl.

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

#use strict;
use CGI::Carp qw(fatalsToBrowser);

$| = 1;
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
my $Kind_pid = fork();

if($Kind_pid) {
  print "<p>Hier ist der Elternprozess.</p>\n";
  wait();
  print "<p>Der Kindprozess ist zuende.</p>\n";
}
else {
  print "<p>Hier ist der Kindprozess.</p>\n";
  exit(0);
}
print "</body></html>\n";

Erläuterung:

Das Beispiel erzeugt mit nach oben fork einen Kindprozess. Mit if($Kind_pid) wird abgefragt, ob der Skalar $Kind_pid einen Wert ungleich 0 hat. Ist das der Fall, werden Anweisungen ausgeführt, die zum Elternprozess gehören. Im Beispiel wird eine Meldung ausgegeben, dass sich das Script im Elternprozess befindet. Im else-Zweig, in den das Script gelangt, wenn Kind_pid den Wert 0 hat, wird dagegen ausgegeben, dass der Kindprozess aktiv ist.
Normalerweise würde erst der if-Zweig abgearbeitet, dann der else-Zweig. Durch die Anweisung wait() im if-Zweig wartet jedoch der Elternprozess auf das Ende des Kindprozesses, bevor er fortfährt. So wird vorher der else-Zweig abgearbeitet, und anschließend die letzte Meldung im if-Zweig ausgegeben.

waitpid - auf das Ende eines Kindprozesses mit bestimmter Prozessnummer (pid) warten

Unix-spezifischer Befehl. Ruft im Gegensatz zu nach oben wait direkt das Betriebssystem auf.

Erwartet als Parameter:
1. Die Prozessnummer (PID) des gewünschten Kindprozesses.
2. Schalter (Flags - siehe Tabelle weiter unten)

Gibt die Prozessnummer (PID) des beendeten Prozesses zurück, oder -1, wenn der gewünschte Kindprozess nicht oder nicht mehr existiert. Auf manchen Systemen ist auch der Rückgabewert 0 möglich - er bedeutet, dass der Kindprozess noch immer läuft (d.h. ein Timeout beim Warten überschritten wurde).

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

#use strict;
use CGI::Carp qw(fatalsToBrowser);
use POSIX;

$| = 1;
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";
my $Kind_pid = fork();

if($Kind_pid) {
  print "<p>Hier ist der Elternprozess.</p>\n";

  use POSIX ":sys_wait_h";
  do {
    my $Kind_pid = waitpid(-1,&WNOHANG);
  } until $Kind_pid == -1;

  print "<p>Der Kindprozess ist zuende.</p>\n";
}
else {
  print "<p>Hier ist der Kindprozess.</p>\n";
  exit(0);
}
print "</body></html>\n";

Erläuterung:

Das Beispiel tut das gleiche wie jenes bei nach oben wait. In diesem Fall wird jedoch mit einer Seite do-until-Schleife gewartet, bis der Kindprozess zuende ist. Das ist der Fall, wenn die Funktion waitpid den Rückgabewert -1 liefert, der Kindprozess also nicht mehr existiert.

Der Funktion waitpid wird im Beispiel das Flag &WNOHANG übergeben. Die Konstanten dazu werden im Seite Standardmodul POSIX definiert. Daher ist es erforderlich, dieses Modul so wie im Beispiel mit use POSIX ":sys_wait_h" einzubinden.
Die folgende Tabelle listet die Flags auf, die Sie an der Stelle übergeben können.

Flag: | Bedeutung:
&WEXITSTATUS | Enthält den Rückgabewert des Kindprozesses (genauer: die untersten 8 Bit, also einen Wert bis maximal 255).
&WIFEXITED | Hat den Wert true oder 1, wenn der Kindprozess normal beendet wurde.
&WIFSIGNALED | Hat den Wert true oder 1, wenn der Kindprozess durch ein unbeantwortetes Signal beendet wurde.
&WIFSTOPPED | Hat den Wert true oder 1, wenn der Kindprozess angehalten wurde.
&WNOHANG | Der aufrufende Prozess wird nicht blockiert, falls der Kindprozess nicht sofort reagiert. In einem solchen Fall wird waitpid() sofort beendet und liefert 0 zurück.
&WSTOPSIG | Die Nummer des Signals, das zum Anhalten des Kindprozesses führte (das Anhalten des Kindprozesses) kann mit &WIFSTOPPED ermittelt werden.
&WTERMSIG | Die Nummer des Signals, das vom Kindprozess nicht beantwortet wurde und deshalb zu dessen Beenden führte (ob dies der Fall ist, kann mit &WIFSIGNALED ermittelt werden.
&WUNTRACED | waitpid() kehrt mit dem Status eines bereits gestoppten Kindprozesses zurück, dessen exit-Rückgabewert aber noch nicht abgefragt wurde.
nach oben
weiter | Seite Funktionen für Informationen aus Konfigurationsdateien
zurück | Seite Funktionen für Datei- und Verzeichnis-Management
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für Informationen aus Konfigurationsdateien

SELFHTML

Funktionen für Informationen aus Konfigurationsdateien
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten endgrent - zum Ende von /etc/groups springen
nach unten endhostent - zum Ende von /etc/hosts springen
nach unten endnetent - zum Ende von /etc/networks springen
nach unten endprotoent - zum Ende von /etc/protocols springen
nach unten endpwent - zum Ende von /etc/passwd springen
nach unten endservent - zum Ende von /etc/services springen
nach unten getgrent - nächsten Eintrag von /etc/groups ermitteln
nach unten getgrgid - Eintrag mit bestimmter Gruppen-ID aus /etc/groups ermitteln
nach unten getgrnam - Eintrag mit bestimmtem Gruppennamen aus /etc/groups ermitteln
nach unten gethostbyaddr - Eintrag mit bestimmter IP aus /etc/hosts ermitteln
nach unten gethostbyname - Eintrag mit bestimmtem Hostnamen aus /etc/hosts ermitteln
nach unten gethostent - nächsten Eintrag von /etc/hosts ermitteln
nach unten getlogin - Namen des aktuellen Benutzers ermitteln
nach unten getnetbyaddr - Eintrag mit bestimmter IP aus /etc/networks ermitteln
nach unten getnetbyname - Eintrag mit bestimmtem Netzwerknamen aus /etc/networks ermitteln
nach unten getnetent - nächsten Eintrag von /etc/networks ermitteln
nach unten getprotobyname - Eintrag mit bestimmtem Protokollnamen aus /etc/protocols ermitteln
nach unten getprotobynumber - Eintrag mit bestimmter Protokollnummer aus /etc/protocols ermitteln
nach unten getprotoent - nächsten Eintrag von /etc/protocols ermitteln
nach unten getpwent - nächsten Eintrag von /etc/passwd ermitteln
nach unten getpwnam - Eintrag mit bestimmtem Benutzernamen aus /etc/passwd ermitteln
nach unten getpwuid - Eintrag mit bestimmter Benutzernummer aus /etc/passwd ermitteln
nach unten getservbyname - Eintrag mit bestimmtem Portnamen aus /etc/services ermitteln
nach unten getservbyport - Eintrag mit bestimmter Portnummer aus /etc/services ermitteln
nach unten getservent - nächsten Eintrag von /etc/services ermitteln
nach unten setgrent - zum Anfang von /etc/groups springen
nach unten sethostent - zum Anfang von /etc/hosts springen
nach unten setnetent - zum Anfang von /etc/networks springen
nach unten setprotoent - zum Anfang von /etc/protocols springen
nach unten setpwent - zum Anfang von /etc/passwd springen
nach unten setservent - zum Anfang von /etc/services springen
nach unten

Allgemeines zu diesen Funktionen

Die hier versammelten Funktionen dienen dazu, Einträge aus System-Konfigurationsdateien zu ermitteln. Es handelt sich dabei ausschließlich um Konfigurationsdaten von Unix-Systemen. Der Vorteil der hier beschriebenen Funktionen gegenüber dem direkten Auslesen jener Dateien ist, dass sie rechnerunabhängig sind, d.h. die Befehle funktionieren auch dann, wenn ein Unix-System anders als im Normalfall konfiguriert ist und die entsprechenden Dateien an anderen Orten liegen.

Die relevanten Konfigurationsdateien werden im folgenden kurz vorgestellt. Die Pfadnamen entsprechen der üblichen Ablage.

Konfigurationsdatei: /etc/group

In dieser Datei werden Berechtigungsgruppen und deren Mitglieder gespeichert. Eine Berechtigungsgruppe kann bestimmte Rechte an Dateien und Verzeichnissen besitzen, die einem ihrer Mitglieder gehören. Neben Einträgen für "menschliche" Berechtigungsgruppen enthält die Datei auch solche für reservierte, rechnereigene Berechtigungsgruppen, wie beispielsweise mail, bin oder tty. Passwörter sind in dieser Datei nur verschlüsselt gespeichert.
Typische Daten (Beispiel):
root  x  0    root
bin   x  1    root bin daemon
sys   x  101  root bin sys
Jede Zeile der Datei enthält den Namen einer Berechtigungsgruppe, dahinter (verschlüsselt) deren Passwort, dahinter die Gruppennummer (GID) und dahinter die Liste der Mitglieder der Gruppe.
Funktionen zu dieser Datei sind nach unten endgrent nach unten getgrent nach unten getgrgid nach unten getgrnam nach unten setgrent
Im Beispiel zur Funktion nach unten getgrent wird gezeigt, wie Sie die komplette Datei /etc/groups ausgeben können. Dadurch gewinnen Sie einen vollständigen Überblick über den Inhalt der Datei.

Konfigurationsdatei: /etc/hosts

In dieser Datei werden IP-Adressen und Domain-Namen oder Rechnernamen zugeordnet, die der Rechner selber auflösen muss.
Typische Daten (Beispiel):
127.0.0.1       localhost
192.168.10.101  sonne.galaxis.de     sonne
192.168.85.1    zeus.edu.saxedu.de   zeus
Jede Zeile der Datei enthält eine IP-Adresse, dahinter den offiziellen Domain-Namen und dahinter wahlweise den internen Rechnernamen, jeweils durch Leerzeichen oder Tabulatoren getrennt. Hinter dem internen Rechnernamen kann wahlweise auch noch ein Aliasname folgen.
Funktionen zu dieser Datei sind nach unten endhostent nach unten gethostbyaddr nach unten gethostbyname nach unten gethostent nach unten sethostent
Im Beispiel zur Funktion nach unten gethostent wird gezeigt, wie Sie die komplette Datei /etc/hosts ausgeben können. Dadurch gewinnen Sie einen vollständigen Überblick über den Inhalt der Datei.

Konfigurationsdatei: /etc/networks

In dieser Datei werden Netzwerknamen und zugehörige IP-Adressen einander zugeordnet. Dabei wird oft auch der Adresstyp und die Netznummer angegeben.
Typische Daten (Beispiel):
loopback  127.0.0.0  2  2130706432
Jede Zeile der Datei enthält einen Netzwerknamen, die zugehörige Netzwerk-IP-Adresse, den Adresstyp und die Netznummer.
Funktionen zu dieser Datei sind nach unten endnetent nach unten getnetbyaddr nach unten getnetbyname nach unten getnetent nach unten setnetent
Im Beispiel zur Funktion nach unten getnetent wird gezeigt, wie Sie die komplette Datei /etc/networks ausgeben können. Dadurch gewinnen Sie einen vollständigen Überblick über den Inhalt der Datei.

Konfigurationsdatei: /etc/passwd

In dieser Datei werden alle wichtigen Daten aller Benutzer gespeichert, die Zugang zum Rechner haben. Dazu gehören z.B. die Benutzernamen, ihre Passwörter, die Benutzernummern (UIDs) und die Heimatverzeichnisse der Anwender. Neben Einträgen für normale Benutzer enthält die Datei auch solche für reservierte Benutzer, wie beispielsweise root (auf emanzipierten Rechnern auch ruth), daemon oder ftp (für den anonymen FTP-Zugang). Passwörter sind in dieser Datei nur verschlüsselt gespeichert.
Typische Daten (Beispiel):
root      x  0  0    root       /root               /bin/mysh
bin       x  1  1    bin        /bin                /bin/mysh
customer  x  29  29  Kunde      /usr/lib/kunde      /bin/mysh
Jede Zeile der Datei enthält den Benutzernamen, das zugehörige Passwort (verschlüsselt), die zugehörige Benutzernummer (UID), die Nummer seiner Berechtigungsgruppe (GID), beschreibende Angaben zum Benutzer, sein Heimatverzeichnis auf dem Rechner, seine Shell (Instanz des Kommando-Interpreters), und gegebenenfalls Angaben zum Verfallsdatum der Gültigkeit des Eintrags.
Funktionen zu dieser Datei sind nach unten endpwent nach unten getpwent nach unten getpwnam nach unten getpwuid nach unten setpwent
Im Beispiel zur Funktion nach unten getpwent wird gezeigt, wie Sie die komplette Datei /etc/passwd ausgeben können. Dadurch gewinnen Sie einen vollständigen Überblick über den Inhalt der Datei.

Konfigurationsdatei: /etc/protocols

In dieser Datei sind die Protokollnamen und Protokollnummern der Transportprotokolle eingetragen, die das System unterstützt.
Typische Daten (Beispiel):
ip    IP    0
icmp  ICMP  1
igmp  IGMP  2
ggp   GGP   3
tcp   TCP   6
Jede Zeile der Datei enthält den Namen des Transportprotokolls, die Protokollnummer und den Aliasnamen des Protokolls.
Funktionen zu dieser Datei sind nach unten endprotoent nach unten getprotobyname nach unten getprotobynumber nach unten getprotoent nach unten setprotoent
Im Beispiel zur Funktion nach unten getprotoent wird gezeigt, wie Sie die komplette Datei /etc/protocols ausgeben können. Dadurch gewinnen Sie einen vollständigen Überblick über den Inhalt der Datei.

Konfigurationsdatei: /etc/services

In dieser Datei werden die Namen von Netzwerkdiensten sowie die zugehörigen Portnummern und Protokollnamen gespeichert.
Typische Daten (Beispiel):
ftp                 21  tcp
telnet              23  tcp
smtp  mail          25  tcp
whois  nicname      43  tcp
domain  nameserver  53  tcp
gopher              70  tcp
finger              79  tcp
www  http           80  tcp
www                 80  udp
Funktionen zu dieser Datei sind nach unten endservent nach unten getservbyname nach unten getservbyport nach unten getservent nach unten setservent
Im Beispiel zur Funktion nach unten getservent wird gezeigt, wie Sie die komplette Datei /etc/services ausgeben können. Dadurch gewinnen Sie einen vollständigen Überblick über den Inhalt der Datei.

endgrent - zum Ende von /etc/groups springen

Springt an das Ende der Datei nach oben /etc/group und beendet den Zugriff darauf.

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
my $Wert = getgrent();
print "$Wert\n";
endgrent();
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt mit nach unten getgrent den ersten Eintrag aus /etc/groups, gibt den ermittelten Wert aus und springt dann ans Ende der Datei.

endhostent - zum Ende von /etc/hosts springen

Springt an das Ende der Datei nach oben /etc/hosts und beendet den Zugriff darauf.

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
my $Wert = gethostent();
print "$Wert\n";
endhostent();
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt mit nach unten gethostent den ersten Eintrag aus /etc/hosts, gibt den ermittelten Wert aus und springt dann ans Ende der Datei.

endnetent - zum Ende von /etc/networks springen

Springt an das Ende der Datei nach oben /etc/networks und beendet den Zugriff darauf.

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
my $Wert = getnetent();
print "$Wert\n";
endnetent();
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt mit nach unten getnetent den ersten Eintrag aus /etc/networks, gibt den ermittelten Wert aus und springt dann ans Ende der Datei.

endprotoent - zum Ende von /etc/protocols springen

Springt an das Ende der Datei nach oben /etc/protocols und beendet den Zugriff darauf.

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
my $Wert = getprotoent();
print "$Wert\n";
endprotent();
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt mit nach unten getprotoent den ersten Eintrag aus /etc/protocols, gibt den ermittelten Wert aus und springt dann ans Ende der Datei.

endpwent - zum Ende von /etc/passwd springen

Springt an das Ende der Datei nach oben /etc/passwd und beendet den Zugriff darauf.

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
my $Wert = getpwent();
print "$Wert\n";
endpwent();
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt mit nach unten getpwent den ersten Eintrag aus /etc/passwd, gibt den ermittelten Wert aus und springt dann ans Ende der Datei.

endservent - zum Ende von /etc/services springen

Springt an das Ende der Datei nach oben /etc/services und beendet den Zugriff darauf.

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
my $Wert = getservent();
print "$Wert\n";
endservent();
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt mit nach unten getnetent den ersten Eintrag aus /etc/services, gibt den ermittelten Wert aus und springt dann ans Ende der Datei.

getgrent - nächsten Eintrag von /etc/groups ermitteln

Ermittelt im skalaren Kontext den jeweils nächsten Eintrag aus der Datei nach oben /etc/group oder den Listenkontext einer Liste mit vier Elementen.

Erwartet keine Parameter.

Gibt je nach Kontext entweder den nächsten Dateieintrag oder die Liste zurück. Bei Dateiende wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my @Liste = getgrent();
while(@Liste) {
  print "$Liste[0]]  $Liste[1]  $Liste[2]  $Liste[3]\n";
  @Liste = getgrent();
}

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie alle Einträge der Datei /etc/groups mit einem CGI-Script ausgeben lassen können. Zunächst wird getgrent erstmals aufgerufen. Der Rückgabewert wird als Listenkontext interpretiert und im Array @Liste gespeichert. Solange die Liste einen Inhalt enthält - while(@Liste) - werden die vier Elemente des Arrays ausgegeben, und getgrent wird für den nächsten Schleifendurchgang aufgerufen. Die vier Elemente des Arrays, die von der Funktion zurückgegeben werden, sind:
$Liste[0] = Name der Berechtigungsgruppe,
$Liste[1] = Passwort der Berechtigungsgruppe (verschlüsselt),
$Liste[2] = Nummer der Berechtigungsgruppe (GID),
$Liste[3] = Mitgliedernamen der Berechtigungsgruppe

getgrgid - Eintrag mit bestimmter Gruppen-ID aus /etc/groups ermitteln

Ermittelt aus der Datei nach oben /etc/group den zugehörigen Eintrag zu einer bestimmten Gruppen-ID (GID). Im skalaren Kontext wird dabei der zugehörige Gruppenname ermittelt, im Listenkontext der gesamte Eintrag zur GID.

Erwartet als Parameter:
1. die gewünschte GID.

Gibt je nach Kontext entweder den Gruppennamen oder die Liste zurück. Wenn die angegebene GID nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";

($Name,$Passwort,$Gid,$Mitglieder) = getgrgid(2);
print "<h3>Listenkontext:</h3>";
print "<pre>$Name\n$GrPasswort\n$Gid\n$Mitglieder</pre>";

print "<h3>Skalarer Kontext:</h3><pre>";
my $Wert = getgrgid(2);
print "<pre>$Wert</pre>\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel ruft insgesamt zweimal die Funktion getgrgid auf, zuerst im Listenkontext, später im skalaren Kontext. In beiden Fällen wird 2 als gesuchte Gruppennummer (GID) übergeben. Im Listenkontext wird der gesamte gefundene Eintrag, bestehend aus Gruppenname, Gruppenpasswort (verschlüsselt), Gruppennummer und Mitgliedernamen, vom Script ausgegeben. Im skalaren Kontext wird nur der zur Gruppennummer gehörige Gruppenname ausgegeben.

getgrnam - Eintrag mit bestimmtem Gruppennamen aus /etc/groups ermitteln

Ermittelt aus der Datei nach oben /etc/group den zugehörigen Eintrag zu einem bestimmten Gruppennamen. Im skalaren Kontext wird dabei die Gruppen-ID (GID) des angegebenen Namens ermittelt, im Listenkontext der gesamte Eintrag zu dem Gruppennamen.

Erwartet als Parameter:
1. den gewünschten Gruppennamen.

Gibt je nach Kontext entweder die zugehörige Gruppennummer (GID) oder die Liste zurück. Wenn der angegebene Gruppenname nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body>\n";

(my $Name, my $Passwort, my $Gid, my $Mitglieder) = getgrnam("mail");
print "<h3>Listenkontext:</h3>";
print "<pre>$Name\n$Passwort\n$Gid\n$Mitglieder</pre>";

print "<h3>Skalarer Kontext:</h3>";
my $Wert = getgrnam("mail");
print "<pre>$Wert</pre>\n";

print "</body></html>\n";

Erläuterung:

Das Beispiel ruft insgesamt zweimal die Funktion getgrnam auf, zuerst im Listenkontext, später im skalaren Kontext. In beiden Fällen wird "mail" als gesuchter Gruppenname übergeben. Im Listenkontext wird der gesamte gefundene Eintrag, bestehend aus Gruppenname, Gruppenpasswort (verschlüsselt), Gruppennummer und Mitgliedernamen, vom Script ausgegeben. Im skalaren Kontext wird nur die zum Gruppennamen gehörige Gruppennummer (GID) ausgegeben.

gethostbyaddr - Eintrag mit bestimmter IP aus /etc/hosts ermitteln

Ermittelt aus der Datei nach oben /etc/hosts den Hostnamen zu einer bestimmten IP-Adresse.

Erwartet als Parameter:
1. die gewünschte IP-Adresse, und zwar numerisch in binärer Schreibweise.
2. den Adresstyp der IP-Adresse (numerisch).

Gibt den zugehörigen Hostnamen zurück. Wenn die angegebene IP-Adresse nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

use Socket;
my $addr = inet_aton("127.0.0.1");
my $Wert  = gethostbyaddr($addr, AF_INET);
print "$Wert\n";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie den Hostnamen zu einer IP-Adresse auf dem Rechner ermitteln können. Um die etwas komplizierte Parameterversorgung der Funktion gethostbyaddr sicherzustellen, wird das Seite Standardmodul Socket verwendet. Durch Aufruf der Modul-Funktion inet_aton wird eine in üblicher Schreibweise notierte, übergebene IP-Adresse in die erforderliche binäre Form umgewandelt. Das Ergebnis wird in dem Skalar $addr gespeichert. Das Modul Socket stellt auch Konstanten für den Adresstyp zur Verfügung. Die korrekte Konstante für den zweiten Parameter von gethostbyaddr ist AF_INET. Durch Übergabe von $addr und AF_INET wird gethostbyaddr richtig versorgt und gibt den Hostnamen zur Beispieladresse 127.0.0.1 aus (üblicherweise localhost).

gethostbyname - Eintrag mit bestimmtem Hostnamen aus /etc/hosts ermitteln

Ermittelt aus der Datei nach oben /etc/hosts die IP-Adresse zu einem bestimmten Hostnamen.

Erwartet als Parameter:
1. den gewünschten Hostnamen.

Gibt die zugehörige IP-Adresse zurück, allerdings binär numerisch.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

use Socket;
my $addr  = gethostbyname("localhost");
my $Wert = inet_ntoa($addr);
print "$Wert";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie die IP-Adresse zu einem Hostnamen auf dem Rechner ermitteln können. Dazu wird das Seite Standardmodul Socket verwendet. Damit lässt sich der binär numerische Rückgabewert von gethostbyname, der im Beispiel in dem Skalar $addr gespeichert wird, bequem in die übliche Schreibweise konvertieren. Durch Aufruf der Modul-Funktion inet_ntoa wird $addr in die übliche Schreibweise umgewandelt. Das Ergebnis der Konvertierung wird im Beispiel in dem Skalar $Wert gespeichert. Anschließend wird die IP-Adresse zu dem Hostnamen localhost ausgegeben (üblicherweise 127.0.0.1).

gethostent - nächsten Eintrag von /etc/hosts ermitteln

Ermittelt im skalaren Kontext den jeweils nächsten Eintrag aus der Datei nach oben /etc/hosts oder im Listenkontext eine Liste mit fünf und mehr Elementen.

Erwartet keine Parameter.

Gibt je nach Kontext entweder den nächsten Dateieintrag oder die Liste zurück. Bei Dateiende wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my @Liste = gethostent();
while(@Liste) {
  print "$Liste[0]   $Liste[1]   $Liste[2]";
  for(my $i = 0; $i < $Liste[3]; $i++) {
    (my $a, my $b, my $c, my $d) = unpack('C4',$Liste[4+$i]);
    print "  $a.$b.$c.$d";
  }
  print "\n";
  @Liste = gethostent();
}

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie alle Einträge der Datei /etc/hosts mit einem CGI-Script ausgeben lassen können. Zunächst wird gethostent erstmals aufgerufen. Der Rückgabewert wird als Listenkontext interpretiert und im Array @Liste gespeichert. Solange die Liste einen Inhalt enthält - while(@Liste) - werden die Elemente der Liste ausgegeben, und getgrent wird für den nächsten Schleifendurchgang aufgerufen. Die Liste enthält als letztes Listenelement wiederum eine Liste, sodass eine weitere innere Seite for-Schleife nötig ist, um alle Elemente zu ermitteln. Die Elemente der Liste, die von der Funktion zurückgegeben wird, sind:
$Liste[0] = Hostname,
$Liste[1] = Aliasnamen des Hostnamens,
$Liste[2] = Adresstyp,
$Liste[3] = Anzahl der noch folgenden Listenelemente
$Liste[4] und weitere = zugeordnete IP-Adressen
Die zugeordneten IP-Adressen sind binär gespeichert. Um die übliche Vier-Zahlen-Darstellung zu erhalten, muss die binäre Schreibweise erst konvertiert werden. Das ist durch Anwendung der Funktion Seite unpack mit C4 als erstem Parameter möglich, so wie im obigen Beispiel. Dort werden auf diese Weise die vier Einzelzahlen der IP-Adresse ermittelt und in den Skalaren $a, $b, $c und $d gespeichert.

getlogin - Namen des aktuellen Benutzers ermitteln

Erwartet keine Parameter.

Gibt den Loginnamen des aktuellen Benutzers zurück.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
my $Wert = getlogin();
print "$Wert\n";
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt den Loginnamen mit getlogin, speichert ihn in dem Skalar $Wert und gibt diesen zur Kontrolle aus.

getnetbyaddr - Eintrag mit bestimmter IP aus /etc/networks ermitteln

Ermittelt aus der Datei nach oben /etc/networks den Netzwerknamen zu einer bestimmten IP-Adresse.

Erwartet als Parameter:
1. die gewünschte IP-Adresse, und zwar numerisch in binärer Schreibweise.
2. den Adresstyp der IP-Adresse (numerisch).

Gibt den zugehörigen Netzwerknamen zurück. Wenn die angegebene IP-Adresse nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

use Socket;
my $addr = inet_aton("127.0.0.0");
my $Wert  = getnetbyaddr($addr, AF_INET);
print "$Wert\n";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie den Netzwerknamen zu einer IP-Adresse auf dem Rechner ermitteln können. Um die etwas komplizierte Parameterversorgung der Funktion getnetbyaddr sicherzustellen, wird das Seite Standardmodul Socket verwendet. Durch Aufruf der Modul-Funktion inet_aton wird eine in üblicher Schreibweise notierte, übergebene IP-Adresse in die erforderliche binäre Form umgewandelt. Das Ergebnis wird in dem Skalar $addr gespeichert. Das Modul Socket stellt auch Konstanten für den Adresstyp zur Verfügung. Die korrekte Konstante für den zweiten Parameter von gethostbyaddr ist AF_INET. Durch Übergabe von $addr und AF_INET wird getnetbyaddr richtig versorgt und gibt den Netzwerknamen zur Beispieladresse 127.0.0.0 aus (üblicherweise loopback).

getnetbyname - Eintrag mit bestimmtem Netzwerknamen aus /etc/networks ermitteln

Ermittelt aus der Datei nach oben /etc/networks die IP-Adresse zu einem bestimmten Netzwerknamen.

Erwartet als Parameter:
1. den gewünschten Netzwerknamen.

Gibt die zugehörige IP-Adresse zurück, allerdings binär numerisch.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

use Socket;
my $addr  = getnetbyname("loopback");
my $Wert = inet_ntoa($addr);
print "$Wert";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie die IP-Adresse zu einem Netzwerknamen auf dem Rechner ermitteln können. Dazu wird das Seite Standardmodul Socket verwendet. Damit lässt sich der binär numerische Rückgabewert von getnetbyname, der im Beispiel in dem Skalar $addr gespeichert wird, bequem in die übliche Schreibweise konvertieren. Durch Aufruf der Modul-Funktion inet_ntoa wird $addr in die übliche Schreibweise umgewandelt. Das Ergebnis der Konvertierung wird im Beispiel in dem Skalar $Wert gespeichert. Anschließend wird die IP-Adresse zu dem Netzwerknamen loopback ausgegeben (üblicherweise 127.0.0.0).

getnetent - nächsten Eintrag von /etc/networks ermitteln

Ermittelt im skalaren Kontext den jeweils nächsten Eintrag aus der Datei nach oben /etc/networks oder im Listenkontext eine Liste mit vier Elementen.

Erwartet keine Parameter.

Gibt je nach Kontext entweder den nächsten Dateieintrag oder die Liste zurück. Bei Dateiende wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my @Liste = getnetent();
while(@Liste) {
  print "$Liste[0]  $Liste[1]  $Liste[2]  $Liste[3]\n";
  @Liste = getnetent();
}

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie alle Einträge der Datei /etc/networks mit einem CGI-Script im Browser ausgeben können. Zunächst wird getnetent erstmals aufgerufen. Der Rückgabewert wird als Listenkontext interpretiert und im Array @Liste gespeichert. Solange die Liste einen Inhalt enthält - while(@Liste) - werden die vier Elemente der Liste ausgegeben, und getnetent wird für den nächsten Schleifendurchgang aufgerufen. Die vier Elemente der Liste, die von der Funktion zurückgegeben wird, sind:
$Liste[0] = Name des Netzwerks,
$Liste[1] = Aliasnamen des Netzwerks,
$Liste[2] = Adresstyp,
$Liste[3] = Nummer des Netzwerks

getprotobyname - Eintrag mit bestimmtem Protokollnamen aus /etc/protocols ermitteln

Ermittelt aus der Datei nach oben /etc/protocols die Protokollnummer zu einem bestimmten Protokollnamen.

Erwartet als Parameter:
1. den gewünschten Protokollnamen.

Gibt die zugehörige Protokollnummer zurück. Wenn der übergebene Protokollname nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my $Wert = getprotobyname("tcp");
print "$Wert\n";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt die Protokollnummer zum Protokoll tcp. Dazu dient der Aufruf getprotobyname("tcp"), dessen Rückgabewert im Skalar $Wert gespeichert wird. Zur Kontrolle wird der Wert ausgegeben.

getprotobynumber - Eintrag mit bestimmter Protokollnummer aus /etc/protocols ermitteln

Ermittelt aus der Datei nach oben /etc/protocols den Protokollnamen zu einer bestimmten Protokollnummer.

Erwartet als Parameter:
1. die gewünschte Protokollnummer.

Gibt den zugehörigen Protokollnamen zurück. Wenn die übergebene Protokollnummer nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my $Wert = getprotobynumber(17);
print "$Wert\n";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt den Protokollnamen zur Protokollnummer 17. Dazu dient der Aufruf getprotobynumber(17), dessen Rückgabewert im Skalar $Wert gespeichert wird. Zur Kontrolle wird der Wert ausgegeben.

getprotoent - nächsten Eintrag von /etc/protocols ermitteln

Ermittelt im skalaren Kontext den jeweils nächsten Eintrag aus der Datei nach oben /etc/protocols oder im Listenkontext eine Liste mit drei Elementen.

Erwartet keine Parameter.

Gibt je nach Kontext entweder den nächsten Dateieintrag oder die Liste zurück. Bei Dateiende wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my @Liste = getprotoent();
while(@Liste) {
  print "$Liste[0]  $Liste[1]  $Liste[2]\n";
  @Liste = getprotoent();
}

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie alle Einträge der Datei /etc/protocols mit einem CGI-Script ausgeben lassen können. Zunächst wird getprotoent erstmals aufgerufen. Der Rückgabewert wird als Listenkontext interpretiert und im Array @Liste gespeichert. Solange die Liste einen Inhalt enthält - while(@Liste) - werden die vier Elemente der Liste ausgegeben, und getnetent wird für den nächsten Schleifendurchgang aufgerufen. Die drei Elemente der Liste, die von der Funktion zurückgegeben wird, sind:
$Liste[0] = Protokollname,
$Liste[1] = Protokollnummer,
$Liste[2] = Aliasname des Protokolls

getpwent - nächsten Eintrag von /etc/passwd ermitteln

Ermittelt im skalaren Kontext den jeweils nächsten Eintrag aus der Datei nach oben /etc/passwd oder im Listenkontext eine Liste mit bis zu neun Elementen.

Erwartet keine Parameter.

Gibt je nach Kontext entweder den nächsten Dateieintrag oder die Liste zurück. Bei Dateiende wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my @Liste = getpwent();
while(@Liste) {
  print "$Liste[0]  $Liste[1]  $Liste[2]  $Liste[3]  $Liste[4]  $Liste[5]  $Liste[6]  $Liste[7]  $Liste[8]\n";
  @Liste = getpwent();
}

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie alle Einträge der Datei /etc/passwd mit einem CGI-Script ausgeben lassen können. Zunächst wird getpwent erstmals aufgerufen. Der Rückgabewert wird als Listenkontext interpretiert und im Array @Liste gespeichert. Solange die Liste einen Inhalt enthält - while(@Liste) - werden die neun Elemente der Liste ausgegeben, und getpwent wird für den nächsten Schleifendurchgang aufgerufen. Die neun Elemente der Liste, die von der Funktion zurückgegeben wird, sind:
$Liste[0] = Benutzername,
$Liste[1] = Benutzerpasswort(verschlüsselt),
$Liste[2] = Benutzernummer (UID),
$Liste[3] = Nummer der zugehörigen Berechtigungsgruppe (GID),
$Liste[4] = beschreibende Angaben,
$Liste[5] = beschreibende Angaben,
$Liste[6] = Heimatverzeichnis des Benutzers,
$Liste[7] = Shell des Benutzers,
$Liste[8] = (optional) Verfallszeitpunkt der Gültigkeit des Eintrags

getpwnam - Eintrag mit bestimmtem Benutzernamen aus /etc/passwd ermitteln

Ermittelt zu einem bestimmten Benutzernamen den Eintrag aus der Datei nach oben /etc/passwd den zugehörigen Eintrag. Im skalaren Kontext wird die Benutzernummer (UID) ermittelt, im Listenkontext eine Liste mit bis zu neun Elementen.

Erwartet als Parameter:
1. den gewünschten Benutzernamen.

Gibt im skalaren Kontext die zugehörige Benutzernummer (UID) und im Listenkontext eine Liste mit allen Daten des Eintrags zurück. Wenn der Benutzername nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my @Liste = getpwnam("uucp");
print "$Liste[0]  $Liste[1]  $Liste[2]  $Liste[3]  $Liste[4]  $Liste[5]  $Liste[6]  $Liste[7]  $Liste[8]\n";

my $Wert = getpwnam("uucp");
print "$Wert\n";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt für den Benutzernamen uucp, der der Funktion getpwnam übergeben wird, den zugehörigen Eintrag - zuerst im Listenkontext, und beim zweiten Aufruf im skalaren Kontext. Im Listenkontext werden alle neun Elemente des Eintrags ermittelt und im Array @Liste gespeichert, im skalaren Kontext nur die Benutzernummer (UID), gespeichert im Skalar $Wert. Das Beispiel gibt beide Aufrufergebnisse zur Kontrolle aus. Zur Bedeutung der Array-Elemente siehe Funktion nach oben getpwent.

getpwuid - Eintrag mit bestimmter Benutzernummer aus /etc/passwd ermitteln

Ermittelt zu einer bestimmten Benutzernummer (UID) den Eintrag aus der Datei nach oben /etc/passwd den zugehörigen Eintrag. Im skalaren Kontext wird der Benutzername ermittelt, im Listenkontext eine Liste mit bis zu neun Elementen.

Erwartet als Parameter:
1. die gewünschte Benutzernummer (UID).

Gibt im skalaren Kontext den zugehörigen Benutzernamen und im Listenkontext eine Liste mit allen Daten des Eintrags zurück. Wenn die Benutzernummer nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my @Liste = getpwuid(2);
print "$Liste[0]  $Liste[1]  $Liste[2]  $Liste[3]  $Liste[4]  $Liste[5]  $Liste[6]  $Liste[7]  $Liste[8]\n";

my $Wert = getpwuid(2);
print "$Wert\n";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt für die Benutzernummer 2, der der Funktion getpwuid übergeben wird, den zugehörigen Eintrag - zuerst im Listenkontext, und beim zweiten Aufruf im skalaren Kontext. Im Listenkontext werden alle neun Elemente des Eintrags ermittelt und im Array @Liste gespeichert, im skalaren Kontext nur der Benutzername, gespeichert im Skalar $Wert. Das Beispiel gibt beide Aufrufergebnisse zur Kontrolle aus. Zur Bedeutung der Listenelemente siehe Funktion nach oben getpwent.

getservbyname - Eintrag mit bestimmtem Portnamen aus /etc/services ermitteln

Ermittelt aus der Datei nach oben /etc/services die Portnummer zu einem bestimmten Netzwerkdienst.

Erwartet als Parameter:
1. den Namen des gewünschten Netzwerkdienstes,
2. den Namen des gewünschten Protokolls.

Gibt die zugehörige Portnummer zurück. Wenn der übergebene Netzwerkname oder das Protokoll nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my $Wert = getservbyname("www","tcp");
print "$Wert\n";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt die Portnummer zum Netzwerkdienst www auf dem Netzwerkprotokoll tcp. Dazu dient der Aufruf getservbyname("www","tcp"), dessen Rückgabewert im Skalar $Wert gespeichert wird. Zur Kontrolle wird der Wert ausgegeben.

getservbyport - Eintrag mit bestimmter Portnummer aus /etc/services ermitteln

Ermittelt aus der Datei nach oben /etc/services den Namen eines Netzwerkdienstes zu einer bestimmten Portnummer.

Erwartet als Parameter:
1. die gewünschten Portnummer,
2. den Namen des gewünschten Protokolls.

Gibt den Namen des zugehörigen Netzwerkdienstes zurück. Wenn die übergebene Portnummer oder das Protokoll nicht gefunden wurde, wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my $Wert = getservbyport(80,"tcp");
print "$Wert\n";

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel ermittelt den Namen des Netzwerkdienstes mit der Portnummer 80 auf dem Netzwerkprotokoll tcp. Dazu dient der Aufruf getservbyport(80,"tcp"), dessen Rückgabewert im Skalar $Wert gespeichert wird. Zur Kontrolle wird der Wert ausgegeben.

getservent - nächsten Eintrag von /etc/services ermitteln

Ermittelt im skalaren Kontext den jeweils nächsten Eintrag aus der Datei nach oben /etc/services oder im Listenkontext eine Liste mit vier Elementen.

Erwartet keine Parameter.

Gibt je nach Kontext entweder den nächsten Dateieintrag oder die Liste zurück. Bei Dateiende wird undef zurückgegeben.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";

my @Liste = getservent();
while(@Liste) {
  print "$Liste[0]  $Liste[1]  $Liste[2]  $Liste[3]\n";
  @Liste = getservent();
}

print "</pre></body></html>\n";

Erläuterung:

Das Beispiel zeigt, wie Sie alle Einträge der Datei /etc/services mit einem CGI-Script ausgeben lassen können. Zunächst wird getservent erstmals aufgerufen. Der Rückgabewert wird als Listenkontext interpretiert und im Array @Liste gespeichert. Solange die Liste einen Inhalt enthält - while(@Liste) - werden die vier Elemente der Liste ausgegeben, und getservent wird für den nächsten Schleifendurchgang aufgerufen. Die vier Elemente der Liste, die von der Funktion zurückgegeben wird, sind:
$Liste[0] = Name des Netzwerkdienstes,
$Liste[1] = Aliasname des Netzwerkdienstes,
$Liste[2] = Portnummer des Netzwerkdienstes,
$Liste[3] = Name des zugehörigen Protokolls

setgrent - zum Anfang von /etc/groups springen

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
setgrent();
my $Wert = getgrent();
print "$Wert\n";
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel springt mit setgrent zum Anfang der Datei. Anschließend liest es mit nach oben getgrent den nächsten, in dem Fall den ersten Eintrag der Datei aus. Der Rückgabewert, der im Skalar $Wert gespeichert ist, wird zur Kontrolle ausgegeben.

sethostent - zum Anfang von /etc/hosts springen

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
sethostent();
my $Wert = gethostent();
print "$Wert\n";
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel springt mit sethostent zum Anfang der Datei. Anschließend liest es mit nach oben gethostent den nächsten, in dem Fall den ersten Eintrag der Datei aus. Der Rückgabewert, der im Skalar $Wert gespeichert ist, wird zur Kontrolle ausgegeben.

setnetent - zum Anfang von /etc/networks springen

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
setnetent();
my $Wert = getnetent();
print "$Wert\n";
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel springt mit setnetent zum Anfang der Datei. Anschließend liest es mit nach oben getnetent den nächsten, in dem Fall den ersten Eintrag der Datei aus. Der Rückgabewert, der im Skalar $Wert gespeichert ist, wird zur Kontrolle ausgegeben.

setprotoent - zum Anfang von /etc/protocols springen

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
setprotoent();
my $Wert = getprotoent();
print "$Wert\n";
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel springt mit setprotoent zum Anfang der Datei. Anschließend liest es mit nach oben getprotoent den nächsten, in dem Fall den ersten Eintrag der Datei aus. Der Rückgabewert, der im Skalar $Wert gespeichert ist, wird zur Kontrolle ausgegeben.

setpwent - zum Anfang von /etc/passwd springen

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
setpwent();
my $Wert = getpwent();
print "$Wert\n";
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel springt mit setpwent zum Anfang der Datei. Anschließend liest es mit nach oben getpwent den nächsten, in dem Fall den ersten Eintrag der Datei aus. Der Rückgabewert, der im Skalar $Wert gespeichert ist, wird zur Kontrolle ausgegeben.

setservent - zum Anfang von /etc/services springen

Erwartet keine Parameter.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Test-Ausgabe</title></head><body><pre>\n";
setservent();
my $Wert = getservent();
print "$Wert\n";
print "</pre></body></html>\n";

Erläuterung:

Das Beispiel springt mit setservent zum Anfang der Datei. Anschließend liest es mit nach oben getservent den nächsten, in dem Fall den ersten Eintrag der Datei aus. Der Rückgabewert, der im Skalar $Wert gespeichert ist, wird zur Kontrolle ausgegeben.

nach oben
weiter | Seite Funktionen für Module und Packages
zurück | Seite Funktionen für Betriebssystemaufrufe
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Funktionsreferenz / Funktionen für Module und Packages

SELFHTML

Funktionen für Module und Packages
Informationsseite

nach unten Allgemeines zu diesen Funktionen
nach unten package - Namensraum eines Packages aktivieren
nach unten require - andere Perl-Datei ausführen
nach unten use - Modul einbinden
nach unten

Allgemeines zu diesen Funktionen

Um die hier beschriebenen Funktionen besser zu verstehen, sollten Sie das Kapitel über Kapitel Perl-Module lesen.

@INC - die Liste der Pfadnamen für Module

Wenn Sie mit nach unten require oder nach unten use eine Moduldatei (Dateien *.pm) einbinden, sucht Perl die entsprechende Datei entweder im aktuellen Verzeichnis, oder in einem Verzeichnis, das in der Liste für Modulpfadnamen gespeichert ist. Dazu dient die Seite vordefinierte Variable @INC. Im Abschnitt Seite Speicherorte für Module und die Liste @INC finden Sie ein Beispielscript, mit dessen Hilfe Sie sich den Inhalt von @INC ausgeben lassen können, um die bei Ihnen gültigen Pfade herauszufinden.

Neben der Liste @INC gibt es übrigens auch einen Hash namens %INC. In diesem Hash werden alle bereits geladenen Module gespeichert. Perl verhindert auf diese Weise, dass Module mehrfach geladen werden und dadurch zu unerwünschtem Verhalten im Programmablauf führen. Über derartige Probleme, die in C durch Präprozessoranweisungen wie #ifndef und #define gelöst werden müssen, brauchen Sie sich in Perl also keine Gedanken machen.

Namensräume

Ein Namensraum heißt in Perl Package. Wenn Sie nichts anderes angeben, befindet sich jede Perl-Datei im package mit dem Namen main. Variablen, die innerhalb einer Perl-Datei ohne weitere Einschränkungen wie Seite local oder Seite my definiert werden, Namen von Subroutinen usw. gelten global in dieser einen Datei. Mit Hilfe der Funktion nach unten package können Sie eine Perl-Datei in mehrere Packages unterteilen.

Was ist besser - require oder use?

Die beiden Funktionen nach unten require und nach unten use haben ähnliche Aufgaben, unterscheiden sich jedoch in ihrer Wirkungsweise. require wird zur Laufzeit eines Scripts geladen (und zwar an der Stelle, wo die require-Anweisung steht), während use bereits vorher, zur Kompilierzeit des Scripts, mit eingebunden wird. Bei require wechseln Sie also einfach während der Scriptausführung in ein anderes Script, lassen dieses kompilieren und ausführen, und kehren dann zurück. Bei use dagegen haben Sie nach dem Kompilieren, das Perl vor jedem Ausführen des Scripts durchführt, praktisch ein großes Script, dessen Code sich aus den Sourcen mehrerer Moduldateien zusammensetzt. Das hat Folgen. So werden Syntaxfehler, die in einem mit use eingebundenen Modul enthalten sind, bereits im Vorfeld erkannt, und das Script wird gar nicht erst ausgeführt. Bei require hingegen kann es passieren, dass das Hauptscript fehlerfrei ist, das eingebundene Script jedoch Syntaxfehler enthält. Diese werden jedoch erst erkannt, wenn das Hauptscript bereits läuft. Dadurch können undefinierte Zustände entstehen. Aus heutiger Sicht ist die Verwendung von use in den meisten Fällen vorzuziehen. Allerdings gibt es auch Ausnahmen.

Letztlich ist die Tatsache, dass es heute beide Funktionen gibt, historisch bedingt. require ist älter (wurde schon von Perl 4 interpretiert), während use seit Version 5 zur Verfügung steht. In der 5er-Version wurde das Modulkonzept von Perl stark erweitert und hat erst dort die heute verbreitete Form angenommen.

package - Namensraum eines Packages aktivieren

Mit dieser Funktion bestimmen Sie einen nach oben Namensraum als den aktiv gültigen. Der Namensraum bleibt solange aktiv, bis mit einem neuen Aufruf von package ein anderer Namensraum aktiv wird, oder bis die natürliche Grenze eines Namensraums, also der aktuelle Block (etwa eine Subroutine) oder das Dateiende erreicht ist. Auf diese Weise können Sie innerhalb einer Scriptdatei modular arbeiten.

Erwartet als Parameter:
1. den Namen des Namensraums, oder eine Zahl, die als Versionsnummer interpretiert wird.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

package deutsch;
use vars qw($Hauptstadt $Flaeche);
$Hauptstadt = "Berlin";
$Flaeche = "356.910 qm";

package franzoesisch;
use vars qw($Hauptstadt $Flaeche);
$Hauptstadt = "Paris";
$Flaeche = "551.500 qm";

package deutsch;
print "<p>Die Hauptstadt ist $Hauptstadt und das Land ist $Flaeche gross</p>";

package franzoesisch;
print "<p>Die Hauptstadt ist $Hauptstadt und das Land ist $Flaeche gross</p>";

print "</body></html>\n";

Erläuterung:

Das Beispiel ruft insgesamt vier mal package auf. Beim ersten mal wird dabei ein neuer Namensraum namens deutsch geschaffen, beim zweiten mal ein neuer Namensraum namens franzoesisch. Beim dritten mal wird der Namensraum deutsch erneut aufgerufen, und ab diesem Befehl kennt das Script nur diejenigen Variablen, Subroutinen usw., die innerhalb des gleichen Namensraums definiert wurden. Ebenso ist es beim vierten mal, wo der Namensraum franzoesisch wieder aufgerufen wird.

Bei Verwendung von use strict wie im Beispiel müssen die Variablen, die in den beiden ersten Package-Blöcken deklariert werden, allerdings explizit global deklariert werden, um bei späteren Aufrufen des Packages zur Verfügung zu stehen. Um die Deklaration globaler Variablen zu ermöglichen, steht das Seite Standardmodul vars zur Verfügung. Im Beispiel sehen Sie, wie dieses Modul eingesetzt wird. Innerhalb eines Packages mit use eingebunden, stehen in der Klammer hinter qw alle Variablennamen des aktuellen Packages, die global, also ohne my davor deklariert werden sollen. Perl meckert dann trotz use strict nicht an den Deklarationen.

Beachten Sie

Solange nicht mit package ein spezieller Namensraum aktiviert wird, gilt der Default-Namensraum von Perl, der den Namen main hat.

require - andere Perl-Datei ausführen

Mit dieser Funktion führen Sie eine beliebige andere Perl-Datei aus. Das andere Script wird an der Stelle, an der der require-Aufruf steht, ausgeführt.

Erwartet als Parameter:
1. den Namen der einzubindenden Datei, gegebenenfalls mit Pfadnamen (Normalfall), oder eine Zahl, die als Versionsnummer interpretiert wird.

Beispiel - Teil 1 (vollständiges CGI-Script in Perl):

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

require "hallo_welt.pl";

print "</body></html>\n";

Beispiel - Teil 2 (Moduldatei hallo_welt.pl):

print "Hallo Welt!";
1;

Erläuterung:

Das Beispiel zeigt, wie Sie ein "herkömmliches" Perl-Script, das seinen Output auf die Standardausgabe schreibt, in ein CGI-Script einbetten können, sodass der Output an den aufrufenden Browser gesendet werden kann. Im GGI-Script wird mit require "hallo_welt.pl" eine andere Perl-Datei eingebunden. Diese Datei schreibt einfach ein Hallo Welt auf die Standardausgabe. Da es jedoch in ein Script eingebunden ist, das zuvor den üblichen HTTP-Header sendet, gelangt der Output als HTML-Inhalt zum Browser.

Beachten Sie

Sie können mit require ebenso wie mit nach unten use eine Moduldatei mit der Endung .pm einbinden. In diesem Fall müssen Sie require Modulname angeben. Perl sucht dann nach einer Datei namens Modulname.pm. Auch die Syntax mit :: ist genauso möglich wie bei use (vergleiche dazu den Abschnitt Seite Adressierungs-Syntax beim Einbinden von Modulen).

Eingebundene Perl-Dateien müssen am Ende so etwas wie 1; enthalten. Dadurch wird sichergestellt, dass das Modul oder die Modul-Funktion korrekt ausgeführt wird.

Wenn eine eingebundene Datei Subroutinen enthält, können Sie diese so aufrufen, als wären sie im aktuellen Perl-Script notiert.

use - Modul einbinden

Mit dieser Funktion laden Sie ein Perl-Modul oder bestimmte Funktionen aus einem solchen Modul in ihr Script und können den entsprechenden Perl-Code in Ihrem Script benutzen.

Erwartet als Parameter:
1. den Namen des Moduls (Normalfall), oder eine Zahl, die als Versionsnummer interpretiert wird.
2. bis n. (optional) weitere, einschränkende Angaben (siehe weiter unten).

Beispiel - Teil 1 (vollständiges CGI-Script in Perl):

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Testausgabe</title>\n";
print "</head><body>\n";

use Syntax;
my $Output = html_syntax("<h1>So sieht es aus</h1>","red");
print "<h1>So sieht es aus</h1>\n";
print "$Output\n";

print "</body></html>\n";

Beispiel - Teil 2 (Moduldatei Syntax.pm):

package Syntax;
use strict;
use vars qw($VERSION @ISA @EXPORT);
require Exporter;
@ISA = qw(Exporter);
@EXPORT = qw(html_syntax);
$VERSION = 1.0;

sub html_syntax {
  my $htmlstr = shift;
  my $color = shift;
  $htmlstr =~ s/\&/&amp;/g;
  $htmlstr =~ s/\"/&quot;/g;
  $htmlstr =~ s/\</&lt;/g;
  $htmlstr =~ s/\>/&gt;/g;
  $htmlstr =~ s/(&lt;)/<span style=\"color:$color\">$1/g;
  $htmlstr =~ s/(&gt;)/$1<\/span>/g;
  return($htmlstr);
}
1;

Erläuterung:

Das Komplettbeispiel zeigt ein CGI-Script, in dem ein selbst definiertes Modul verwendet wird, sowie den Code der entsprechenden Moduldatei. Im CGI-Script wird die Moduldatei, die im Beispiel Syntax.pm heißt und im gleichen Verzeichnis wie das CGI-Script oder im Hauptverzeichnis von @INC abgelegt wird, mit use Syntax; eingebunden (vergleichen Sie dazu den Abschnitt Seite Adressierungs-Syntax beim Einbinden von Modulen).

Das Hauptprogramm ruft dann eine Subroutine namens html_syntax() auf und übergibt ihr zwei Parameter, nämlich eine Zeichenkette mit HTML-Code und den Namen einer Farbe (red). Die Subroutine html_syntax() hat die Aufgabe, den übergebenen HTML-Code HTML-gerecht zu maskieren und die HTML-Tags in der angegebenen Farbe auszuzeichnen (also praktisch aus dem übergebenen HTML-Code den Code mit HTML-Syntax-Highlighting darstellbar zu machen). Die Subroutine erzeugt dabei neuen HTML-Code und gibt diesen am Ende zurück. Im Hauptprogramm wird der zurückgegebene Code in der Variablen $Output aufgefangen. Deren Inhalt kann schließlich an den Webserver zur Weitergabe an einen aufrufenden Browser ausgeliefert werden.

Die Subroutine html_syntax() ist im Modul Syntax mit sub html_syntax definiert. Die Moduldatei enthält zu Beginn noch einige weitere Anweisungen, auf die an dieser Stelle nicht näher eingegangen wird. Lesen Sie dazu den Abschnitt Seite Erweiterte Verwendung von use (@EXPORT, @EXPORT_OK und qw).

Die folgende Tabelle zeigt, welche Varianten es gibt, um mit use ein Modul oder bestimmte Teile davon einzubinden:

Beispiel: | Erläuterung:
use Beispiel; | Bindet ein Modul namens Beispiel.pm ein, wobei diese Datei entweder im aktuellen Arbeitsverzeichnis oder in einem der Verzeichnisse abgelegt werden muss, die in nach oben @INC gespeichert sind. Geben Sie also den Dateinamen ohne die Endung an. Die Endung der Moduldatei muss .pm lauten.
use Beispiel::Spezial; | Bindet ein Modul namens Spezial.pm ein. Dabei löst Perl die ::-Syntax als Pfadnamen auf - d.h. es wird eine Datei mit dem Pfadnamen Beispiel/Spezial.pm erwartet. Dies ist ein relativer Pfadname, ausgehend von einem der Verzeichnispfade, die in nach oben @INC gespeichert sind.
use CGI::Carp qw(fatalsToBrowser); | Bindet aus dem Verzeichnis CGI das Modul Carp.pm ein. Das Symbol fatalsToBrowser wird der Importliste übergeben. Normalerweise wird es dann in den aktuellen Namensraum importiert, was allerdings - typisch für Perl - gerade bei diesem populären Beispiel nicht der Fall ist. Die Übergabe von fatalsToBrowser löst hier eine Sonderbehandlung aus.
use 5.003; | Script läuft nur weiter, wenn ein Perl-Interpreter installiert ist, der eine Versionsnummer gleich oder höher als 5.003 hat.

Beachten Sie

Die Anweisung:
use Modulname;
ist gleichbedeutend mit:
BEGIN { require Modulname; import Modulname [Importliste]; }
Die Funktion use leistet also die Summe aus dem, was die Funktion nach oben require in Verbindung mit der Methode import leistet.

Wenn Sie use genau ein Argument übergeben und dieses Argument eine Zahl ist, also z.B. 5 oder 5.003, dann prüft Perl diese Angabe gegen die Versionsnummer des Perl-Interpreters. Ist die Versionsnummer des Perl-Interpreters niedriger als die angegebene Zahl, wird das laufende Script sofort mit einer Fehlermeldung beendet. Dies kann sinnvoll sein, um zu verhindern, dass ein Script weiterläuft, das Code enthält, der höhere Perl-Versionen erfordert.

Module müssen am Ende so etwas wie 1; enthalten. Dadurch wird sichergestellt, dass das Modul korrekt eingebunden wird.

nach oben
weiter | Seite Einführung in das Arbeiten mit Modulen
zurück | Seite Funktionen für Informationen aus Konfigurationsdateien
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Funktionen

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Module

SELFHTML

Perl-Module
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel Einführung in Perl und Kapitel Perl-Sprachelemente.
Dieser Abschnitt beschreibt das Konzept der Module in Perl und stellt einige wichtige Module vor.
Der Abschnitt besteht aus folgenden Seiten:

Seite Einführung in das Arbeiten mit Modulen
Seite Standardmodule von Perl
Seite CPAN-Module
Seite Modul CGI: Funktionen für die CGI-Programmierung

nach oben

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Module / Hinweise zum Arbeiten mit Modulen

SELFHTML

Einführung in das Arbeiten mit Modulen
Informationsseite

nach unten Allgemeines zu Modulen in Perl
nach unten Module einbinden mit require und use
nach unten Speicherorte für Module und die Liste @INC
nach unten Adressierungs-Syntax beim Einbinden von Modulen
nach unten Packages und Module
nach unten Erweiterte Verwendung von use (@EXPORT, @EXPORT_OK und qw)
nach unten Moduldokumentationen lesen mit perldoc
nach unten

Allgemeines zu Modulen in Perl

Beim Programmieren werden Sie schnell feststellen, dass Sie bestimmte Routine-Aufgaben immer wieder benötigen. Immer wieder müssen Dateien eingelesen werden, in einer CGI-Umgebung müssen immer wieder Formulare verarbeitet werden, zur Kommunikation mit fernen Rechnern im Internet muss immer wieder eine Internet-Socket-Verbindung aufgebaut werden usw. Nun bietet der Perl-Interpreter ja bereits eine Menge Kapitel Funktionen an, die solche Routine-Aufgaben bewältigen. Doch je mehr solcher Funktionen im Perl-Interpreter fest eingebaut sind, desto größer, langsamer und ressourcen-unfreundlicher wird der Interpreter. Daher gibt es einen zweiten Typ Funktionen, nämlich solche, die nicht direkt in den Perl-Interpreter eingebaut sind, sondern in Form von Perl-Scripts zur Verfügung stehen. Diese speziellen Perl-Scripts werden Module genannt. Module stellen Funktionen (aber auch Variablen) für bestimmte Routine-Aufgaben zur Verfügung. Um in Ihren eigenen Perl-Scripts solche Funktionen verwenden zu können, binden Sie einfach die Module ein, in denen die gewünschten Funktionen stehen. Anschließend können Sie auf die Funktionen und Variablen der Module zugreifen.

Mittlerweile gibt es tausende von Perl-Modulen, die frei verfügbar sind. Es gibt praktisch kaum mehr ein Programmiergebiet, für das es nicht schon Module mit fertigen leistungsstarken Funktionen gibt. Die Module werden der Allgemeinheit von eifrigen und fähigen Perl-Programmierern im Internet zur Verfügung gestellt. Einige dieser Module konkurrieren miteinander, und im Laufe der Zeit stellt sich heraus, dass eines der Module in der Praxis am tauglichsten ist. Natürlich gibt es auch Module, die häufiger zum Einsatz kommen als andere. Letzteres hat dazu geführt, dass mittlerweile zwischen zwei wichtigen Klassen von öffentlich verfügbaren Modulen unterschieden wird: es gibt Standardmodule und CPAN-Module. Standardmodule sind solche, die zusammen mit dem Perl-Interpreter ausgeliefert werden, und CPAN-Module stehen im Internet zum Download zur Verfügung. Standardmodule erhalten dadurch natürlich einen wesentlich höheren Verbreitungsgrad. Da sie bei jeder typischen Installation des Perl-Interpreters mit installiert werden, können sie auch fast so bedenkenlos verwendet werden wie die fest eingebauten Funktionen von Perl. Denn auch wenn ein Perl-Script auf einen anderen Rechner portiert wird und dort seine Arbeit verrichten soll, stehen die gleichen Module zur Verfügung - vorausgesetzt, eine entsprechend aktuelle Version des Perl-Interpreters ist installiert. Wenn Sie dagegen CPAN-Module downloaden und in Ihre eigenen Scripts einbinden, ist die Portierung eines Scripts auf einen anderen Rechner nicht ganz so unproblematisch. Denn das Script funktioniert dort erst, nachdem die gleichen CPAN-Module installiert sind.
Innerhalb dieses Kapitels finden Sie einen Abschnitt über die Seite Standardmodule von Perl und einen Abschnitt über Seite CPAN-Module. Dort erhalten Sie eine Übersicht, welche Module zur Verfügung stehen.

Daneben ist es selbstverständlich auch möglich, eigene Module zu schreiben. Für größere Perl-Scripts ist es auch besser, den Code so zu verteilen, dass es nur noch ein schlankes Hauptscript mit eingebundenen Modulen für spezielle Aufgaben gibt. Angenommen, Sie programmieren ein Perl-Script, das eine Datei mit einer bestimmten Datenstruktur verarbeitet. Bei dieser Aufgabe könnten Sie ein Modul schreiben, das alle Funktionen zum Einlesen der Datei in geeignete Variablen und zum Zurückschreiben verarbeiteter Daten in die Datei enthält. Im Hauptscript können Sie dann einfach dieses Modul einbinden und auf dessen Funktionen und Variablen zugreifen. Sollte sich dann beispielsweise das Dateiformat der Datendatei ändern, muss nur das Modul umgeschrieben werden, während das Hauptscript und mögliche andere Module davon unberührt bleiben. Typische Beispiele zum Erstellen projekteigener Module finden Sie im Abschnitt über Seite objektorientierte Programmierung. Das ist kein Zufall. Denn modul-orientiertes Arbeiten im modernen Stil und objektorientiertes Programmieren gehören bei Perl eng zusammen.

Perl-Module sind also (meistens) selber Perl-Scripts. Es handelt sich jedoch um Scripts, bei denen ein paar Regeln und Besonderheiten zu beachten sind, auf die im folgenden noch näher eingegangen wird.

Module einbinden mit require oder use

Zum Einbinden von Modulen stehen in Perl die Funktionen Seite use und Seite require zur Verfügung. Im allgemeinen wird heute empfohlen, die Funktion use zu verwenden, weil sie konsequenter den Modul-Gedanken verfolgt. Bei Verwendung von use wird das Modul ganz zu Beginn des Hauptscripts eingebunden. Es steht also zur Verfügung, bevor überhaupt die erste Code-Zeile Ihres Scripts ausgeführt wird. Bei Verwendung von require wird die andere Datei dagegen erst an der Stelle eingebunden, an der die require-Anweisung steht. Vor dem entsprechenden Aufruf stehen also Funktionen oder Variablen des Moduls noch nicht zur Verfügung, und falls der require-Aufruf beispielsweise in einem Zweig einer bedingten Anweisung steht, wird er nur dann ausgeführt, wenn das Script in den entsprechenden Zweig gelangt. Ein Beispiel soll dies verdeutlichen.

Beispiel - Teil 1: Moduldatei Testmodul.pm

#!/usr/bin/perl -w

print "Hier meldet sich das Modul \"Testmodul.pm\"\n";

1;

Beispiel - Teil 2a: Hauptscript test_require.pl

#!/usr/bin/perl -w

print "Hier meldet sich das Hauptscript\n";
require Testmodul;

Beispiel - Teil 2b: Hauptscript test_use.pl

#!/usr/bin/perl -w

print "Hier meldet sich das Hauptscript\n";
use Testmodul;

Erläuterung:

Der erste Teil des Beispiels zeigt den Code der Datei Testmodul.pm. Die Beispielteile 2a und 2b zeigen jeweils ein Perl-Script, in dem diese Moduldatei eingebunden wird. Im Script test_require.pl (2a) wird das Modul mit require eingebunden, im Script test_use.pl (2b) dagegen mit use. Beide Scripts (2a und 2b) sind identisch bis auf den unterschiedlichen Funktionsaufruf. Das Ergebnis der Ausgabe ist jedoch verschieden. In 2a (also beim Einbinden des Moduls mit require lautet es:
Hier meldet sich das Hauptscript
Hier meldet sich das Modul "Testmodul.pm"
In 2b dagegen (Einbinden des Moduls mit use) lautet die Ausgabe dagegen:
Hier meldet sich das Modul "Testmodul.pm"
Hier meldet sich das Hauptscript
Der Grund ist, dass ein mit use eingebundenes Modul ausgeführt wird, bevor der Code des einbindenden Scripts ausgeführt wird. Bei require wird das eingebundene Script dagegen an der Stelle ausgeführt, an der es eingebunden wird.

Auf den ersten Blick spricht dieser Unterschied eher für die Verwendung von require und weniger für den von use. In der Praxis ist es jedoch so, dass Moduldateien meist keinen direkt auszuführenden Code enthalten, sondern aus Funktionen (Subroutinen) bestehen, die dann im einbindenden Script aufgerufen werden können.

Beispiel - Teil 1: Moduldatei Testmodul.pm

#!/usr/bin/perl -w

sub Modulprint {
  print "Hier meldet sich das Modul \"Modul.pm\"\n";
}

1;

Beispiel - Teil 2a: Hauptscript test_require.pl

#!/usr/bin/perl -w

print "Hier meldet sich das Hauptscript\n";
require Testmodul;
Modulprint();

Beispiel - Teil 2b: Hauptscript test_use.pl

#!/usr/bin/perl -w

print "Hier meldet sich das Hauptscript\n";
use Testmodul;
Modulprint();

Erläuterung:

In diesem Beispiel-Ensemble erzeugen die Scripts aus 2a und 2b die gleiche Ausgabe, nämlich:
Hier meldet sich das Hauptscript
Hier meldet sich das Modul "Testmodul.pm"
Der Grund ist, dass der Code des Moduls nun in einer Subroutine namens Modulprint steht. In den einbindenden Scripts test_require.pl und test_use.pl wird mit der Anweisung Modulprint(); die entsprechende Funktion im eingebundenen Modul aufgerufen.

Beachten Sie:

Ein weiterer wichtiger Unterschied zwischen use und require ist, dass Sie bei use genau angeben können, welche Funktions- und Variablennamen Sie aus einem Modul importieren wollen, während require diese Möglichkeit nicht anbietet. Mehr dazu weiter unten im Abschnitt nach unten Erweiterte Verwendung von use.

Speicherorte für Module und die Liste @INC

Moduldateien können in einem der Verzeichnisse abgelegt werden, die in der Seite vordefinierten Variablen @INC definiert sind, oder in einem Unterverzeichnis davon. Bei einer typischen Perl-Installation enthält die Liste @INC eine Reihe von Unterverzeichnissen des Perl-Installationsverzeichnisses sowie das jeweils aktuelle Verzeichnis, also meistens das Verzeichnis, in dem das die Moduldatei einbindende Hauptscript liegt.

Das Ablegen von Moduldateien im Verzeichnis bzw. einem Unterverzeichnis des Hauptscripts ist dann sinnvoll, wenn die Moduldateien von keinem anderen Script verwendet werden. Wenn die Moduldateien dagegen so allgemein geschriebenen Code enthalten, dass Sie sie für verschiedene Scripts verwenden können, dann ist es besser, Sie legen die Moduldateien in einem der anderen Verzeichnisse ab, die in @INC genannt werden.

Um zu entscheiden, wo Sie Moduldateien ablegen können, müssen Sie also erst einmal die Liste der erlaubten Verzeichnisse kennen. Das folgende einfache Perl-Script hilft dabei.

Beispiel-Script zur Ausgabe von @INC (als CGI-Script):

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Erlaubte Modulverzeichnisse</title>\n";
print "</head><body>\n";
print "<h1>Verzeichnisse zum Ablegen von Moduldateien:</h1>\n";
foreach (@INC) {
 print "<tt>$_</tt><br>\n";
}
print "</body></html>\n";

Erläuterung:

Das Script gibt einfach den Inhalt der Liste @INC zeilenweise als HTML-Code aus. Wenn Sie den Code als pl-Datei im CGI-Verzeichnis abspeichern und die pl-Datei von einem Browser anfordern lassen, werden die verfügbaren Verzeichnispfade angezeigt. In der üblichen Konfiguration ist der letzte Eintrag der Liste ein einzelner Punkt (.). Dies steht für "aktuelles Verzeichnis" und bewirkt, dass der Perl-Interpreter, nachdem er eine eingebundene Datei in den allgemeinen Verzeichnispfaden nicht gefunden hat, im aktuellen Verzeichnis sucht.

Falls Sie Ihre Moduldatei in keinem der Verzeichnisse ablegen wollen, die von @INC angeboten werden, können Sie sie auch woanders ablegen. Dann müssen Sie allerdings vor dem Einbinden einer solchen Moduldatei die Liste @INC um den Verzeichnispfad erweitern, in dem die Moduldatei liegt.

Beispiel:

#!/usr/bin/perl -w

use lib "/httpd/docs/cgi-shared/speziell";
use lib "/httpd/docs/cgi-shared/module";

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Erlaubte Modulverzeichnisse</title>\n";
print "</head><body>\n";
print "<h1>Verzeichnisse zum Ablegen von Moduldateien:</h1>\n";
foreach (@INC) {
 print "<tt>$_</tt><br>\n";
}
print "</body></html>\n";

Erläuterung:

Durch eine Anweisung vom Typ use lib mit anschließender Angabe eines Verzeichnispfades wird dieser Pfad an den Anfang der Liste @INC übernommen. Das Beispiel-Script ist das gleiche CGI-Script zur Ausgabe der Pfade von @INC wie zuvor. In diesem Fall zeigt es, dass die so definierten eigenen Pfade mit in die Liste aufgenommen wurden.

Adressierungs-Syntax beim Einbinden von Modulen

Module können in einem der Verzeichnisse von @INC oder einem Unterverzeichnis davon abgelegt werden. Daraus ergeben sich dann die möglichen Formen der Adressierung eines Moduls beim Einbinden mit use oder require.

Beispiele für Module in einem @INC-Verzeichnis:

require "Statistik.pm";
require Statistik;
use "Statistik.pm";
use Statistik;

Erläuterung:

Alle vier Beispiele zeigen das Einbinden eines Moduls, das in einer Datei namens Statistik.pm abgelegt ist. Die Datei befindet sich direkt in einem der Verzeichnisse, die in der Liste @INC als mögliche nach oben Speicherorte für Module zur Verfügung stehen. Für require und use gelten die gleichen Regeln. Entweder notieren Sie den vollständigen Dateinamen der Moduldatei in Anführungszeichen (Moduldateien sollten die Endung .pm haben), oder Sie notieren den Dateinamen ohne die Endung .pm ohne Anführungszeichen.

Wenn sich die Datei in einem Unterverzeichnis eines der Verzeichnisse von @INC befindet, ist die relative Pfadangabe erforderlich.

Beispiele für Module in Unterverzeichnissen eines @INC-Verzeichnisses:

require "Berechnungsmodule/Statistik.pm";
require Berechnungsmodule::Statistik;
use "Berechnungsmodule/Statistik.pm";
use Berechnungsmodule::Statistik;

Erläuterung:

Wieder zeigen alle vier Beispiele das Einbinden eines Moduls Statistik.pm. Die Datei befindet sich unterhalb eines der @INC-Verzeichnisse in einem Unterverzeichnis namens Berechnungsmodule. In diesem Fall ist allerdings die Syntax ohne Anführungszeichen vorzuziehen. Denn wenn Sie mit Anführungszeichen arbeiten, müssen Sie die einzubindende Datei mit "vollem" Namen ansprechen. Die Syntax ohne Anführungszeichen kommt dagegen ohne die Dateiendung .pm aus. Es wird erwartet, dass die eingebundene Moduldatei diese Endung hat. Die Zeichenfolge, die die Verzeichnistrenner symbolisiert, also Hierarchien darstellt, besteht aus einem doppelten Doppelpunkt (::).

Packages und Module

So einfach das Konzept der Module in Perl erst einmal klingt - es bringt doch ein paar Probleme mit sich. Angenommen, in Ihrem eigenen Perl-Script definieren Sie eine Subroutine namens get_data(). In dem gleichen Script binden Sie ein Modul ein, in dessen Code ebenfalls eine Subroutine namens get_data() definiert ist. Damit der Perl-Interpreter beim Aufruf von get_data() weiß, welche der beiden Funktionen gemeint ist, muss es eine Möglichkeit geben, ihm mitzuteilen, welche der Funktionen gemeint ist.

Zu diesem Zweck gibt es in Perl das Konzept der Namensräume. Jeder Namensraum stellt ein so genanntes Package (engl. für Paket) dar. Jedes Perl-Script, in dem Sie keine besondere Angabe machen, welchen Namensraum (welches Package) Sie meinen, benutzt ein Default-Package. Es hat den Namen main.

Beispiel:

#!/usr/bin/perl -w

$Ausgabetext = "Hallo alte Welt. ";
print $Ausgabetext;

package NeueWelt;
$Ausgabetext = "Hallo neue Welt. ";
print $Ausgabetext;

package main;
print $Ausgabetext;

Erläuterung:

Das Beispiel verdeutlicht den Default-Namensraum mit dem Namen main. Zunächst wird ein Seite Skalar namens $Ausgabetext definiert und mit einem Wert belegt. Dieser Wert wird gleich anschließend ausgegeben. Da bis zum Ausführungszeitpunkt noch keine weitere Angabe zum Namensraum gemacht wurde, befindet sich das Script im Defaultnamensraum main. Im zweiten Schritt wird mit Hilfe der Funktion Seite package ein neuer eigener Namensraum mit Namen NeueWelt definiert. Unterhalb davon wird wiederum ein Skalar namens $Ausgabetext definiert, diesmal mit anderem Wert. Dieser neue Wert wird wieder ausgegeben.

Zu diesem Ausführungszeitpunkt existieren nun zwei Skalare namens $Ausgabetext - nämlich der aus dem Package NeueWelt und der aus dem Default-Package main. Zur Kontrolle wird im Beispiel wieder auf das Package main "umgeschaltet". Dazu wird wieder die Funktion package aufgerufen, diesmal aber mit dem Defaultnamen main. Von den beiden existierenden Skalaren dieses Namens wird nun der im Script zuerst definierte ausgegeben, also derjenige, der zum Default-Namensraum main gehört. Der unterste print-Aufruf gibt also wieder Hallo alte Welt. aus.

Wie das Beispiel zeigt, lässt sich der Namensraum innerhalb einer Scriptdatei also beliebig wechseln. Dadurch lässt sich ein hohes Maß an Flexibilität erreichen. Von dieser Flexibilität profitieren die Module in Perl. Ein Modul kann nämlich durch Anwendung der Package-Technik beispielsweise mehrere (Objekt-)Klassen in einer Moduldatei unterbringen oder andere Module (die ja auch aus Packages bestehen) erweitern, auch wenn die Technik zugegebenermaßen etwas unsauber ist. Ein einfaches Beispiel soll diesen Zusammenhang verdeutlichen.

Beispiel - Teil 1: Moduldatei Testmodul.pm

$Modultext = "Dies ist der Inhalt des Skalars \$Modultext\n";

package Testmodul;
$Text = "Dies ist der Inhalt des Skalars \$Text\n";

1;

Beispiel - Teil 2: Hauptscript, z.B. test.pl

#!/usr/bin/perl -w

use Testmodul;

print $Modultext;
print $Testmodul::Text;

Erläuterung:

Der erste Teil des Beispiels ist das Modulscript, der zweite Teil das Hauptscript. Das Modulscript erhält im Beispiel den Namen Testmodul.pm und wird im Hauptscript mit der Anweisung use Testmodul; eingebunden.

Die Moduldatei beginnt mit der Definition eines Skalars namens $Modultext. Da zuvor kein anderes Seite package aufgerufen wird, ist das Package aktiv, in das das Modul eingebunden wird. Alles, was innerhalb dieses Namensraums definiert wird, befindet sich somit im Namensraum main des einbindenden Scripts. Im Beispiel gibt das einbindende Script, also das Hauptscript, mit print $Modultext; in seinem Default-Namensraum main einfach die Variable aus, die im Namensraum main der Moduldatei definiert wurde. $Modultext wurde also direkt im Default-Namensraum des einbindenden Scripts definiert. Damit wurde das Package main durch das Modul erweitert.

Im Modulscript, also in der Modul.pm, wird im weiteren Verlauf jedoch mit package ein neuer Namensraum definiert. Er hat den gleichen Namen wie der Vorname der Moduldatei, nämlich Testmodul. Im einbindenden Hauptscript kann auf Variablen und Funktionen, die im Modul unterhalb des Packages Testmodul definiert werden, nur durch Angabe des entsprechenden Namensraums zugegriffen werden. Die Anweisung print $Testmodul::Text; zeigt, wie auf das andere Package zugegriffen wird. Dem Namen einer Variablen oder einer Funktion wird der Name des Packages und ein doppelter Doppelpunkt (::) vorangestellt. Skalare, Listen und Hashes beginnen weiterhin mit ihren typischen Kennzeichen $, @ und %. Zwischen dem Kennzeichen und dem Variablennamen steht jedoch der Package-Name und der doppelte Doppelpunkt.

Beachten Sie:

Das Ansprechen von Variablen oder Funktionen in anderen Packages oder Modulen mit Package-Name::Variablen/Funktionsname ist nicht möglich, wenn die Variablen oder Funktionen mit Seite my deklariert sind. Die Anwendung von my wird deshalb auch in der Praxis empfohlen, um eine saubere Kapselung von Variablen und Funktionen, die nur innerhalb eines Packages oder Moduls von Bedeutung sind, zu erreichen.

Erweiterte Verwendung von use (@EXPORT, @EXPORT_OK und qw)

Da Module selbst wieder andere Module einbinden können und einzelne Module aber eigentlich Dateninseln darstellen sollen, stößt die Technik des Erweiterns von Packages irgendwann an ihre Grenzen. Um "öffentliche" Schnittstellen von Modulen festlegen zu können, haben Sie die Möglichkeit, einzelne Symbole (also Variablennamen oder Funktionsnamen beispielsweise) in beiden Packages (also dem einbindenden und dem eingebundenen) sichtbar zu machen. Sie können die Symbole aus dem Modul exportieren bzw. in das einbindende Script oder Modul importieren.

Ein Modul kann deshalb erzwingen, dass Sie beim Einbinden genau angeben müssen, welche Variablen oder Funktionen Sie in den Namensraum des einbindenden Scripts importieren möchten. Dazu gibt es das so genannte Exporter-Modul, ein Standardmodul von Perl. Dieses Modul erwartet im eingebundenen Package zwei Listen namens @EXPORT und @EXPORT_OK. Ein Modul kann das Exporter-Modul einbinden und diese beiden Listen mit denjenigen Variablen- und Funktionsnamen füllen, die in ein einbindendes Modul überhaupt exportiert werden können. Im einbindenden Script wiederum können Sie angeben, welche der exportierbaren Namen des Moduls Sie in den Namensraum Ihres Scripts importieren möchten.

Beispiel - Teil 1: Moduldatei Testmodul.pm

package Testmodul;
require Exporter;
@ISA = qw(Exporter);
@EXPORT = qw(%FORMULARFELDER);
@EXPORT_OK = qw($Zeitstempel @Logdaten Besteller_ermitteln);

# hier folgt der Code des Moduls ...
# in dem Code kommen unter anderem vor:
# ein Hash namens %FORMULARFELDER
# ein Skalar namens $Zeitstempel
# eine Liste namens @Logdaten
# eine Funktion namens Besteller_ermitteln

1;

Beispiel - Teil 2: Hauptscript, z.B. test.pl

#!/usr/bin/perl -w

use Testmodul qw($Zeitstempel);

# hier folgt der Code des Scripts ...

Erläuterung:

Die Moduldatei bindet im Beispiel mit Seite require selbst ein Modul ein, nämlich das Standardmodul Exporter. Die Anweisung @ISA = qw(Exporter) definiert die Klasse Exporter als Basisklasse der aktuellen Klasse, die durch das aktuelle Package (im Beispiel also Testmodul) repräsentiert wird. Damit wird die Methode import, die im Modul bzw. der Klasse Exporter definiert ist, an die Klasse Testmodul vererbt. Diese etwas kompliziert klingenden Erläuterungen sind durch den Sprachgebrauch der objektorientierten Programmierung bedingt.

Die Liste @EXPORT kann Namen der Module aufnehmen, die in den Namensraum eines einbindenden Scripts standardmäßig exportiert werden, wenn bei der Einbindung keine spezielle Importliste angegeben ist. Die Liste @EXPORT_OK nimmt dagegen die Namen auf, die ein einbindendes Script maximal in den eigenen Namensraum übernehmen kann, aber nicht übernehmen muss.

Im obigen Beispiel ist in der Moduldatei bei der @EXPORT-Liste nur ein Name notiert, nämlich ein Hash namens %FORMULARFELDER. Diese Variable wird in den Namensraum eines einbindenden Scripts exportiert, wenn bei der use-Anweisung keine Importliste angegeben wird. Bei der Liste @EXPORT_OK sind im Beispiel drei Namen notiert: ein Skalar namens $Zeitstempel, eine Liste namens @Logdaten und eine Subroutine namens Besteller_ermitteln.
Zur Notation der Listen bietet sich besonders der Operator qw an, da er es ermöglicht, die Variablennamen ohne ständige Anführungszeichen notieren zu können. qw($Zeitstempel @Logdaten Besteller_ermitteln) entspricht eigentlich der Notation ('$Zeitstempel', '@Logdaten', 'Besteller_ermitteln'), ist aber übersichtlicher.
Innerhalb der Klammern von qw werden die gewünschten Namen notiert und durch Leerraumzeichen getrennt. Variablennamen erhalten dabei die üblichen Kennzeichen für Skalare, Listen und Hashes.

Das einbindende Script bindet das Modul im Beispiel mit use Testmodul ein und muss in der nachfolgenden Liste angeben, welche der bei @EXPORT oder EXPORT_OK genannten Namen es in den eigenen Namensraum importieren möchte. Im Beispiel wird nur der Skalar $Zeitstempel angegeben und als einziger Name importiert. Wenn Sie die Listenangabe weglassen (im Beispiel also nur use Testmodul; notieren würden), werden die in @EXPORT aufgeführten Namen importiert.

Moduldokumentationen lesen mit perldoc

Module, die Sie nicht selbst geschrieben haben, aber in Ihre Scripts einbinden möchten, müssen Sie natürlich so weit verstehen, dass Sie in der Lage sind, die darin enthaltenen Funktionen richtig aufzurufen, darin definierte Variablen zu kennen und zu benutzen usw. Deshalb sind zumindest alle wichtigen Seite Standardmodule und Seite Module aus dem CPAN-Verzeichnis dokumentiert. Da separate readme-Dateien aber leicht verloren gehen, stellt Perl die Möglichkeit bereit, die Dokumentation innerhalb der Datei mit dem Quellcode zu notieren. Zum Lieferumfang von Perl gehört das Programm perldoc, mit dem Sie den Dokumentationsteil am Bildschirm ausgeben können.

Das folgende Beispiel zeigt den vollständigen Code eines kleinen Standardmoduls von Perl. Die Aufgabe des Moduls soll hier nicht weiter interessieren. Gezeigt werden soll, wie die Dokumentation in den Quellcode integriert ist.

Beispiel - die Moduldatei "Nox.pm"

package CPAN::Nox;
use strict;
use vars qw($VERSION @EXPORT);

BEGIN{
  $CPAN::Suppress_readline=1 unless defined $CPAN::term;
}

use base 'Exporter';
use CPAN;

$VERSION = "1.03";
$CPAN::META->has_inst('Digest::MD5','no');
$CPAN::META->has_inst('LWP','no');
$CPAN::META->has_inst('Compress::Zlib','no');
@EXPORT = @CPAN::EXPORT;

*AUTOLOAD = \&CPAN::AUTOLOAD;

1;

__END__

=head1 NAME

CPAN::Nox - Wrapper around CPAN.pm without using any XS module

=head1 SYNOPSIS

Interactive mode:

  perl -MCPAN::Nox -e shell;

=head1 DESCRIPTION

This package has the same functionality as CPAN.pm, but tries to
prevent the usage of compiled extensions during its own
execution. Its primary purpose is a rescue in case you upgraded perl
and broke binary compatibility somehow.

=head1  SEE ALSO

CPAN(3)

=cut

Erläuterung:

Das Beispiel zeigt den Code des CPAN-Moduls Nox.pm. Der obere Teil der Moduldatei enthält den eigentlich ausführbaren Code des Moduls, und der untere Teil enthält die Dokumentation zum Modul. Die Dokumentation beginnt mit Anweisungen, die in einer neuen Zeile beginnen und als erstes Zeichen ein Gleichheitszeichen (=) haben. Mit =head1 NAME wird beispielsweise eine Überschrift mit dem Titel NAME erzeugt. Alles, was danach kommt, wird bis zur beendenden Anweisung =cut als Dokumentation interpretiert.

Um die Dokumentation separat lesen zu können, müssen Sie auf der Kommandozeile Ihres Betriebssystems eingeben:
perldoc [Pfad]Modulname
Unter Windows können Sie die DOS-Eingabeaufforderung benutzen oder ein Programm, das in der Lage ist, Standard-Out-Ergebnisse eines Programms aufzufangen (manche besseren Texteditoren können das beispielsweise). Auf Unix-Systemen benutzen Sie einfach eine geeignete Shell. Wenn Sie den Pfad zu einer Moduldatei mit angeben, können Sie die Verzeichnisse mit einem Schrägstrich (/) trennen. Oder Sie wechseln in das Verzeichnis der Moduldatei. Dann können Sie die Pfadangabe weglassen.
Im obigen Beispiel der Moduldatei Nox.pm sind Aufrufe möglich wie:
perldoc CPAN::Nox
perldoc Nox.pm
perldoc Nox
perldoc -m Nox (listet den Quellcode mit auf)

nach oben
weiter | Seite Standardmodule von Perl
zurück | Seite Funktionen für Module und Packages
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Module

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Module / Standardmodule von Perl

SELFHTML

Standardmodule von Perl
Informationsseite

nach unten Allgemeines zu Standardmodulen
nach unten Module mit allgemeinen Aufgaben
nach unten Module für Textverarbeitung
nach unten Module für Sprachen und Zeichenkodierungen
nach unten Module für Berechnungen
nach unten Module für Dateiverwaltung
nach unten Module für Ein-/Ausgabe
nach unten Module für Datum und Zeit
nach unten Module für Datenbankzugriffe
nach unten Module für Prozesskommunikation
nach unten Module für Variablenbindung
nach unten Module für Modulverwaltung und für objektorientierte Programmierung
nach unten Module für CGI-Scripts
nach unten Module für Internetfunktionen
nach unten Module zum Verwalten von Perl-Erweiterungen
nach unten Module für POD-Dokumente
nach unten Module zum Steuern des Perl-Compilers
nach unten Systemnahe Module
nach unten Pragma-Module zum Beeinflussen des Perl-Interpreters
nach unten

Allgemeines zu Standardmodulen

Standardmodule sind Module, die zusammen mit dem Perl-Interpreter ausgeliefert werden. Dadurch haben solche Module einen sehr hohen Verbreitungsgrad und sind überall verfügbar, wo der Perl-Interpreter vollständig installiert ist. Bei neuen Versionen des Perl-Interpreters können jedoch auch neue Standardmodule mit ausgeliefert werden. Module, die erst seit der neuesten Interpreterversion mit ausgeliefert werden, stehen bei Installationen älterer Perl-Versionen also nicht automatisch zur Verfügung.

Einige der ausgelieferten Module haben nicht die heute übliche Dateiendung .pm, sondern noch die Endung .pl. Dies sind ältere Module, die schon vor der Version 5 des Perl-Interpreters existierten.

Bei einer typischen Installation des Perl-Interpreters werden die Standardmodule unterhalb des Installationsverzeichnisses im Verzeichnis lib und dessen Unterverzeichnissen abgelegt.

Die folgenden Tabellen listen Standardmodule nach Bedeutung kategorisiert auf. In der jeweils linken Spalte steht das Modul, wie es z.B. mit Seite use eingebunden werden kann. In der mittleren Spalte steht eine kurze Bedeutung. Weitere Einzelheiten zum jeweiligen Modul erfahren Sie, wenn Sie die jeweilige Seite Moduldokumentation mit perldoc lesen.

Die Tabellen erheben keinen Anspruch auf Vollständigkeit! Module, die nur intern von anderen Modulen verwendet werden oder noch keinen Zweck haben, wurden absichtlich ausgelassen. Eine vollständige Liste der Perl-Standardmodule erhalten Sie, wenn Sie mit perldoc das Dokument perlmodlib aufrufen.

Beachten Sie:

Die Mehrzahl der Modulnamen beginnt mit einem Großbuchstaben. Es hat sich eingebürgert, Module auf diese Weise zu benennen. Die Unterscheidung von Groß- und Kleinschreibung beim Einbinden ist wichtig!

Module mit allgemeinen Aufgaben

Modul (Syntax für Einbindung) | Aufgabe
Attribute::Handlers | Ermöglicht das Definieren von Handlern für die Parameter von Seite Subroutinen.
Benchmark | Misst die Ausführungszeit für Perl-Codes und testet den Code in Wiederholungsschleifen.
Carp | Stellt Funktionen zur Fehlerbehandlung bereit.
CPAN | Lädt und installiert Module aus dem Seite CPAN-Verzeichnis bei Bedarf.
CPAN::FirstTime | Ergänzung zu CPAN: unterstützt bei den Initialisierungseinstellungen zum Benutzen des CPAN-Moduls.
CPAN::Nox | Ergänzung zu CPAN: verhindert, dass vorkompilierte Erweiterungen ausgeführt werden.
Config | Erlaubt den Zugriff auf die einzelnen Konfigurationsdaten von Perl.
Data::Dumper | Stellt die interne Struktur von Variablen dar.
DB | Ermöglicht den Zugriff auf die Debug-API von Perl.
Devel::DProf | Misst die Ausführungszeit eines Perl-Scripts und der einzelnen enthaltenen Subroutinen.
Devel::PPPort | Stellt einige Features der Perl-API aus neuen Versionen des Perl-Interpreters für ältere Perl-Versionen bereit.
Digest | Stellt die Routinen der Module der Digest-Familie bereit.
Digest::MD5 | Erlaubt es, MD5-Prüfsummen zu berechnen.
Dumpvalue | Stellt Perl-Daten dar. Beispielsweise lässt sich mit diesem Modul der komplette Inhalt eines Seite Namensraums darstellen.
English | Definiert Klartextnamen für die Seite vordefinierten Variablen von Perl und macht Quellcode dadurch lesbarer.
Env | Importiert Umgebungsvariablen mit einzelnen Namen und macht dadurch die Verwendung des vordefinierten Hashes %ENV überflüssig.
Fatal | Bewirkt, dass Funktionen, die als Rückgabewert false liefern, mit der Seite die-Funktion auf STDERR schreiben und das laufende Script beenden.
Filter::Simple | Einfache Variante von Filter::Util::Call.
Filter::Util::Call | Erlaubt das Definieren sog. "Source-Filter", einer Art Mini-Interpreter, der den Quellcode des Scripts zur Laufzeit verändern kann, bevor er vom Interpreter verarbeitet wird. Auf diese Weise lassen sich beispielsweise eigene Sprach-Konstrukte realisieren (wie beim Standardmodul Switch, das auf Filter::Util::Call basiert).
Getopt::Long | Ermöglicht die Interpretation von Kommandozeilenoptionen für das Script mit mehreren Zeichen.
Getopt::Std | Ermöglicht die Interpretation von Kommandozeilenoptionen für das Script mit einem Zeichen.
Hash::Util | Enthält verschiedene Funktionen zum Arbeiten mit Seite Hashes.
List::Util | Enthält verschiedene Funktionen zum Arbeiten mit Seite Listen.
Memoize | Versucht, Subroutinen zu beschleunigen, indem es die Rückgabewerte speichert.
Memoize::Expire | Plugin für das Memoize-Modul, das dafür sorgt, dass die gespeicherten Rückgabewerte irgendwann ungültig werden und neu ausgelesen werden müssen.
POSIX | Stellt eine Bibliothek an Funktionen für alle möglichen Zwecke bereit. Maßgeblich dabei ist der IEEE-Standard 1003.1. Viele aus C bekannte Funktionen, die dem IEEE-Standard entsprechen, finden sich in diesem Modul wieder, z.B. für Zeichenkettenverarbeitung oder Signal-Handling unter Unix.
Scalar::Util | Enthält verschiedene Funktionen zum Arbeiten mit Seite Skalaren.
Shell | Erlaubt es, die Standardausgabe von Shell-Kommandos abzufangen und in einer Variablen zu speichern, z.B. zur Weiterverarbeitung oder zum formatierten Ausgeben, etwa in HTML-Code an den Browser.
Storable | Erlaubt es, Perl-Datenstrukturen auf der Festplatte zu speichern und später wieder zu laden.
Switch | Erlaubt es, die aus anderen Programmiersprachen bekannten switch-Anweisungen in Perl zu benutzen.
Symbol | Generiert symbolische Namen und erlaubt dadurch, zur Laufzeit Dateihandles usw. zu erzeugen.
Sys::Syslog | Ermöglicht den Zugriff auf Aufrufe des Unix-Programms syslog.
Unicode::Collate | Klasse zum Arbeiten mit Unicode-Strings.
Unicode::Normalize | Funktionen, um Unicode zu normalisieren.
Unicode::UCD | Schnittstelle zur Unicode-Zeichendatenbank.

Module für Textverarbeitung

Modul (Syntax für Einbindung) | Aufgabe
MIME::Base64 | Ermöglicht das Umwandeln von Zeichenketten in das Base64-Format und umgekehrt.
MIME::QuotedPrint | Ermöglicht das Umwandeln von Zeichenketten in das Quoted-Printable-Format und umgekehrt.
Search::Dict | Durchsucht ein Wörterbuch nach einem Wort und gibt die Dateiposition oder -1 zurück, je nachdem, ob das Wort gefunden wurde oder nicht.
Term::ANSIColor | Erlaubt es, Bildschirmausgaben einzufärben.
Term::Cap | Ermöglicht den Zugriff auf termcap (Unix).
Term::Complete | Vervollständigt Worteingaben bei Prompt-Aufforderungen automatisch.
Term::ReadLine | Stellt eine Schnittstelle für diverse andere Packages aus der ReadLine-Reihe dar.
Text::Abbrev | Erzeugt aus einer Liste von Begriffen eine Abkürzungstabelle.
Text::Balanced | Extrahiert Text aus einer Zeichenkette, der von bestimmten Zeichenketten eingeschlossen ist.
Text::ParseWords | Zerlegt einen Text in die einzelnen Wörter und speichert diese in einer Liste. Wörter in Anführungszeichen gelten dabei als ein zusammenhängender Ausdruck.
Text::Soundex | Erzeugt für ein Wort den Soundex-Code entsprechend dem Soundex-Algorithmus von Knuth. Dieser Code ist ein Schema für die Erzeugung von computergesprochenem Englisch.
Text::Tabs | Kann in einem Text Tabulatoren durch eine feste Anzahl Leerzeichen ersetzen oder umgekehrt mehrere Leerzeichen zu einem Tabulator-Zeichen zusammenfassen.
Text::Wrap | Bricht Text automatisch um entsprechend einer zu definierenden Vorgabe, bei welcher Zeichenspalte umbrochen werden soll.

Module für Sprachen und Zeichenkodierungen

Modul (Syntax für Einbindung) | Aufgabe
Encode | Allgemeine API für die Module der Encode-Familie.
Encode::Alias | Erlaubt das Definieren von Aliasnamen für Kodierungen.
Encode::Byte | Erlaubt das Arbeiten mit Kodierungen, die nur 1 Byte für ein Zeichen verwenden (zum Beispiel die Seite ISO-8859-Kodierungen).
Encode::CN | Erlaubt es, mit chinesischen Zeichenkodierungen zu arbeiten.
Encode::EBCDIC | Erlaubt es, mit EBCDIC-Zeichenkodierungen zu arbeiten.
Encode::Encoder | Objektorientiertes Tool zum Arbeiten mit Zeichenkodierungen.
Encode::Encoding | Basisklasse für Zeichenkodierungen.
Encode::Guess | Versucht, den Codierungstyp von Daten festzustellen.
Encode::JP | Erlaubt es, mit japanischen Zeichenkodierungen zu arbeiten.
Encode::KR | Erlaubt es, mit koreanischen Zeichenkodierungen zu arbeiten.
Encode::MIME::Header | Erlaubt das Verarbeiten von MIME-kodierten Mailheader-Angaben (derzeit wird nur UTF-8 unterstützt).
Encode::Symbol | Erlaubt es, mit Codierungen von verschiedenen Symbolen zu arbeiten.
Encode::TW | Erlaubt es, mit taiwanesischen Zeichenkodierungen zu arbeiten.
Encode::Unicode | Erlaubt das Arbeiten mit Zeichenkodierungen nach dem Unicode-Standard.
Encode::Unicode::UTF7 | Erlaubt das Arbeiten mit Zeichenkodierungen nach UTF-7.
I18N::Collate | Passt skalare Daten mit 8 Bit Zeichenbreite an das verwendete System an (nur im Zusammenhang mit Perl-Versionen unter 5.003_06 interessant, da seitdem im Perl-Interpreter direkt implementiert).
I18N::Langinfo | Gibt Informationen über die Spracheinstellungen des Systems zurück.
I18N::LangTags | Enthält Funktionen, um mit Sprachkürzeln nach RFC 3066 zu arbeiten (z.B. de, en und fr).
I18N::LangTags::List | Versucht, Sprachkürzel in einen Sprachnamen umzuwandeln.
Locale::Constants | Definiert verschiedene Konstanten, die beim Arbeiten mit den Modulen Locale::Country, Locale::Currency, Locale::Language und Locale::Script genutzt werden können.
Locale::Country | Enthält Ländernamen und -codes nach ISO 3166.
Locale::Currency | Enthält Währungsnamen und -codes nach ISO 4217.
Locale::Language | Enthält Sprachnamen und -codes nach ISO 639.
Locale::Maketext | Framework um Software mehrsprachig anzubieten.
Locale::Script | Enthält Schriftnamen und -codes nach ISO 15924.

Module für Berechnungen

Modul (Syntax für Einbindung) | Aufgabe
Math::BigFloat | Erlaubt das Rechnen mit Fließkommazahlen, die größer oder kleiner sind als das, was Perl normalerweise als Fließkommazahl zu interpretieren in der Lage ist. Seite Beispiel
Math::BigInt | Erlaubt das Rechnen mit Ganzzahlen, die größer sind als das, was Perl normalerweise als Ganzzahl zu interpretieren in der Lage ist. Seite Beispiel
Math::BigRat | Erlaubt das Rechnen mit Zahlen, die größer sind als das, was Perl normalerweise als Zahl zu interpretieren in der Lage ist.
Math::Complex | Unterstützt das Rechnen mit komplexen Zahlen, wie sie etwa zum Lösen mancher Gleichungen erforderlich sind.
Math::Trig | Stellt die in Perl selber fehlenden trigonometrischen Funktionen für Tangens, Arcus Cosinus, Arcus Sinus sowie Berechnungen mit der Konstanten Pi bereit.

Module für Dateiverwaltung

Modul (Syntax für Einbindung) | Aufgabe
Cwd | Ermittelt das aktuelle Arbeitsverzeichnis
DirHandle | Bietet eine objektorientierte Alternative zu den Funktionen Seite opendir, Seite readdir und Seite closedir an.
File::Basename | Zerlegt eine Dateiangabe mit Pfad in den Pfadnamen und den Dateinamen.
File::CheckTree | Kann mehrere Dateien oder Verzeichnisse auf Existenz überprüfen.
File::Compare | Vergleicht zwei Dateien und überprüft, ob sie inhaltlich identisch sind.
File::Copy | Ermöglicht das Kopieren von Dateien und gilt als wichtiges Tool, um Dateien mit Perl betriebssystemunabhängig kopieren zu können.
File::DosGlob | Erzeugt von einem Verzeichnis eine Dateiliste und erlaubt dabei die Angabe DOS-typischer Wildcards wie *.exe.
File::Find | Durchsucht Verzeichnisbäume nach Dateien.
File::Path | Legt mehrere Verzeichnisse auf einmal neu an oder löscht mehrere Verzeichnisse, je nach Wunsch mitsamt allen darin enthaltenen Dateien.
File::Spec | Stellt Methoden bereit, um mit syntaktisch korrekten Dateinamen und Pfaden zu arbeiten. Da diese betriebssystemspezifisch sind, gibt es für diverse wichtige Betriebssysteme entsprechende Untermodule.
File::Spec::Cygwin | Stellt Methoden bereit, um unter Cygwin mit syntaktisch korrekten Dateinamen und Pfaden zu arbeiten.
File::Spec::Epoc | Stellt Methoden bereit, um auf dem Betriebssystem Epoc mit syntaktisch korrekten Dateinamen und Pfaden zu arbeiten.
File::Spec::Mac | Stellt Methoden bereit, um auf dem Betriebssystem Macintosh mit syntaktisch korrekten Dateinamen und Pfaden zu arbeiten.
File::Spec::OS2 | Stellt Methoden bereit, um auf dem Betriebssystem OS/2 mit syntaktisch korrekten Dateinamen und Pfaden zu arbeiten.
File::Spec::Unix | Stellt Methoden bereit, um auf Unix-Derivaten mit syntaktisch korrekten Dateinamen und Pfaden zu arbeiten.
File::Spec::VMS | Stellt Methoden bereit, um auf dem Betriebssystem VMS mit syntaktisch korrekten Dateinamen und Pfaden zu arbeiten.
File::Spec::Win32 | Stellt Methoden bereit, um auf Windows-Betriebssystemen (ab Windows 95) mit syntaktisch korrekten Dateinamen und Pfaden zu arbeiten.
File::stat | Ruft einfach die Perl-Funktion Seite stat auf und erlaubt es, objektorientiert auf die Daten zuzugreifen.
File::Temp | Stellt Funktionen bereit, um auf sichere Weise mit temporären Dateien mit eindeutigen Namen zu arbeiten.
FileCache | Erlaubt es, mehr Dateien gleichzeitig geöffnet zu halten als das Betriebssystem erlaubt.
FileHandle | Ermöglicht das Arbeiten mit objektorientierten Handles für Dateien und stellt alle wichtigen Funktionen zum Lesen und Schreiben von Dateien und zum Positionieren des Dateizeigers bereit.
FindBin | Liefert das Verzeichnis, in dem sich das Perl-Script befindet.
SelectSaver | Sichert Handles für Dateien und erlaubt es, gesicherte Handles später wiederzuverwenden.

Module für Ein-/Ausgabe

Modul (Syntax für Einbindung) | Aufgabe
IO | lädt die untergeordneten IO-Module.
IO::Dir | Ermöglicht das objektorientierte Arbeiten mit Verzeichnishandles.
IO::File | Ermöglicht das Arbeiten mit objektorientierten Ein-/Ausgabe-Handles. Erbt dabei Objekte von IO::Handle und IO::Seekable.
IO::Handle | Basisklasse für objektorientierte Ein-/Ausgabe-Handles, die z.B. von IO::File verwendet werden.
IO::Pipe | Ermöglicht es, mit Hilfe objektorientierter Methoden Pipes zwischen Prozessen (Umlenkung der Ausgabe eines Prozesses in die Eingabe eines nachfolgenden Prozesses) zu erzeugen.
IO::Poll | Ermöglicht es, mit Hilfe objektorientierter Methoden mit dem poll-Systembefehl zu arbeiten.
IO::Seekable | Stellt objektorientierte Front-Ends für die Perl-Funktionen Seite seek und Seite tell bereit.
IO::Select | Bietet eine objektorientierte Verwaltung von Ein-/Ausgabe-Handles an und enthält Funktionen zum Erzeugen, Löschen und Überprüfen von Handles.
IO::Socket | Bietet eine objektorientierte Verwaltung von Ein-/Ausgabe-Sockets für Prozesskommunikation über ein Netzwerk, bevorzugt TCP/IP, an und enthält Funktionen zum Erzeugen, Löschen und Abfragen der Sockets.
PerlIO | Erlaubt Ein-/Ausgabe-Operationen mit kodierten Daten. Sie können dann mit den Daten arbeiten, als wären sie nicht kodiert.
PerlIO::encoding | Erlaubt das transparente Arbeiten mit Dateien, deren Inhalt mit einem Verfahren wie UTF-8 kodiert wurde. Sie können dann mit den Daten arbeiten, als wären sie nicht kodiert.
PerlIO::scalar | Erlaubt es, mit einem Seite Skalar so zu arbeiten, als ob er eine Datei wäre.
PerlIO::via | Ein Hilfsmodul zum Arbeiten mit Filtern für die Ein-/Ausgabe von Dateien mit kodiertem Inhalt.
PerlIO::via::QuotedPrint | Erlaubt das transparente Arbeiten mit Dateien, deren Inhalt im Quoted-Printable-Format vorliegt. Sie können dann mit den Daten arbeiten, als wären sie nicht kodiert.

Module für Datum und Zeit

Modul (Syntax für Einbindung) | Aufgabe
Time::HiRes | Ersetzt interne Funktionen wie Seite time und Seite sleep und gibt ihnen die Möglichkeit, mit Millisekunden umzugehen.
Time::Local | Stellt Umkehrfunktionen für die Perl-Funktionen Seite gmtime und Seite localtime zur Verfügung.
Time::gmtime | Überschreibt die Perl-Funktion Seite gmtime und ermöglicht einen objektorientierten Zugriff auf die Daten.
Time::localtime | Überschreibt die Perl-Funktion Seite localtime und ermöglicht einen objektorientierten Zugriff auf die Daten.

Module für Datenbankzugriffe

Modul (Syntax für Einbindung) | Aufgabe
AnyDBM_File | Basismodul für die übrigen Module dieser Abteilung.
DB_File | Erlaubt den Zugriff auf Datenbankdateien von Berkeley DB Version 1.x.
GDBM_File | Erlaubt den Zugriff auf GDBM-Dateien über die tie-Funktion, die eine Variable an eine Objektklasse bindet.
NDBM_File | Erlaubt den Zugriff auf NDBM-Dateien über die tie-Funktion, die eine Variable an eine Objektklasse bindet.
ODBM_File | Erlaubt den Zugriff auf ODBM-Dateien über die tie-Funktion, die eine Variable an eine Objektklasse bindet.
SDBM_File | Erlaubt den Zugriff auf SDBM-Dateien über die tie-Funktion, die eine Variable an eine Objektklasse bindet.

Module für Prozesskommunikation

Modul (Syntax für Einbindung) | Aufgabe
IPC::Msg | Ermöglicht es, Nachrichtenwarteschlangen (Message Queues) und zugehörige Nachrichten für Unix-System V zu stellen.
IPC::Open2 | Öffnet einen Unix-Prozess zum Lesen und Schreiben.
IPC::Open3 | Öffnet einen Unix-Prozess zum Lesen, Schreiben und für Fehlerbehandlung.
IPC::Semaphore | Ermöglicht es, die Semaphore-Funktion von Unix-System V zu nutzen.
IPC::SysV | Stellt IPC-Konstanten von Unix-System V bereit.
Thread | Ermöglicht das Arbeiten mit Multithreading (Teile eines Scripts werden separat in eigenen "Threads" ausgeführt, während die "normale" Ausführung des Scripts weiterläuft.)
Thread::Queue | Stellt eine Warteschlange in Form einer Liste bereit, die Threads erlaubt, Variablen hinzuzufügen oder zu entfernen.
Thread::Semaphore | Ermöglicht die Anwendung der Semaphore-Technik zwischen Threads.
Thread::Signal | Startet einen speziellen Signal-Handler-Thread, an den für den laufenden Prozess ankommende Signale weitergeleitet werden, sodass ein Script, das durch Multithreading stark beschäftigt ist, Signale in einem Zwischenspeicher halten kann, bis eine Abarbeitung möglich ist.
Thread::Specific | Generiert für einen Thread einen eindeutigen Schlüssel.

Module für Variablenbindung

Modul (Syntax für Einbindung) | Aufgabe
Tie::Array | Bindet eine Liste an eine Objektklasse.
Tie::File | Ermöglicht es, die Zeilen einer Datei über einen Array anzusprechen.
Tie::Handle | Bindet ein Handle an eine Objektklasse.
Tie::Hash | Bindet einen Hash an eine Objektklasse
Tie::Memoize | Fügt die Daten zu einem Hash hinzu, wenn Sie benötigt werden.
Tie::RefHash | Ermöglicht Referenzen als Schlüssel für Hashes.
Tie::Scalar | Bindet einen Skalar an eine Objektklasse.
Tie::SubstrHash | Ermöglicht einen Hash-artigen Zugriff auf eine Liste fester Länge.

Module für Modulverwaltung und objektorientierte Programmierung

Modul (Syntax für Einbindung) | Aufgabe
Class::ISA | Stellt die Werte der Seite @ISA-Listen sämtlicher eingebundener Basisklassen bereit.
Class::Struct | Erzeugt Datenstrukturen nach dem Vorbild von struct in C.
Exporter | Ermöglicht Modulen, genau festzulegen, welche Variablen und Funktionen in den Namensraum eines einbindenden Scripts importiert werden.
NEXT | Stellt eine Pseudoklasse namens NEXT bereit, mit der Sie beim Aufruf von Methoden von Klassen Methoden gleichen Namens aus den Basisklassen mit aufrufen können.
UNIVERSAL | Stellt die Basis-Objektklasse für objektorientiertes Programmieren in Perl dar. Erlaubt das Überprüfen von Referenzen und Methoden bei beliebigen Objekten.

Module für CGI-Scripts

Modul (Syntax für Einbindung) | Aufgabe
CGI | Kann Formulardaten parsen und ermöglicht dadurch die bequeme Weiterverarbeitung von Formulardaten. Stellt außerdem verschiedene Mittel bereit, um HTML-Ausgaben an den Browser zu senden.
CGI::Apache | Variante des CGI-Moduls, die speziell für den Einsatz unter dem Apache Webserver optimiert war. Das Modul ist inzwischen veraltet.
CGI::Carp | Ermöglicht es, auftretende Fehler und Laufzeitprobleme auch an die Standardausgabe und damit an den auf Ausgabe wartenden Browser zu senden.
CGI::Cookie | Erlaubt das Setzen und Auslesen von Netscape- bzw. HTTP1.1-kompatiblen Cookies auf dem Rechner des Anwenders. Mit Hilfe von Cookies lassen sich Informationen auf dem Anwenderrechner speichern, die beim nächsten Aufruf wieder ausgelesen werden können (Stichwort "mitdenkende Web-Seiten").
CGI::Fast | Schnittstelle zum Fast-CGI-Standard, durch den CGI-Scripts deutlich schneller werden, weil sie als Prozesse dauerhaft im Arbeitsspeicher des Server-Rechners gehalten werden.
CGI::Push | Schnittstelle zum Server-Push, also dem Senden von Inhalten an den Browser ohne dessen explizite Anfrage. Web-Seiten können auf diese Weise in bestimmten Zeitintervallen automatisch neu gesendet werden, was bei schnell wechselnden Inhalten sinnvoll ist.
CGI::Switch | Probiert selbstständig, ein neues CGI-Objekt anzulegen, und zwar wenn möglich mit CGI::Apache, ansonsten mit dem normalen CGI-Modul. Das Modul ist inzwischen veraltet.

Module für Internetfunktionen

Modul (Syntax für Einbindung) | Aufgabe
Net::Cmd | Basisklasse zur Kommunikation mit befehlsbasierten Internet-Protokollen (wie FTP und SMTP).
Net::Domain | Ermittelt den Host- und Domainnamen des aktuellen Rechners.
Net::FTP | Klasse zur Kommunikation mit FTP-Servern.
Net::Netrc | Objektorientierter Zugriff auf die .netrc-Datei des aktuellen Benutzers.
Net::NNTP | Klasse zur Kommunikation mit NNTP-Servern (News).
Net::Ping | Überprüft die Erreichbarkeit eines Host-Rechners im Internet mit der dafür üblichen Ping-Funktion.
Net::POP3 | Klasse zur Kommunikation mit POP3-Servern.
Net::SMTP | Klasse zur Kommunikation mit SMTP-Servern.
Net::Time | Funktionen zum Zugriff auf Zeit-Server.
Net::hostent | Ersetzt die Perl-Funktionen Seite gethostbyaddr und Seite gethostbyname durch ein Objekt. Das Objekt stellt eine Datenstruktur für den Zugriff auf die Konfigurationsdaten zur Verfügung, die der von C aus dessen Headerdatei netdb.h ähnelt.
Net::netent | Ersetzt die Perl-Funktionen Seite getnetent und Seite getnetbyname durch ein Objekt. Das Objekt stellt eine Datenstruktur für den Zugriff auf die Konfigurationsdaten zur Verfügung, die der von C aus dessen Headerdatei netdb.h ähnelt.
Net::protoent | Ersetzt die Perl-Funktionen Seite getprotoent und Seite getprotobyname durch ein Objekt. Das Objekt stellt eine Datenstruktur für den Zugriff auf die Konfigurationsdaten zur Verfügung, die der von C aus dessen Headerdatei netdb.h ähnelt.
Net::servent | Ersetzt die Perl-Funktionen Seite getservent und Seite getservbyname durch ein Objekt. Das Objekt stellt eine Datenstruktur für den Zugriff auf die Konfigurationsdaten zur Verfügung, die der von C aus dessen Headerdatei netdb.h ähnelt.
Socket | Stellt eine Übersetzung der C-Header-Datei socket.h dar und kann Hostnamen, Portnummern usw. ermitteln.
Sys::Hostname | Ermittelt den Hostnamen des Rechners, auf dem das Script läuft.
User::grent | Ersetzt die Perl-Funktionen Seite getgrent, Seite getgrgid und Seite getgrnam durch ein Objekt. Das Objekt stellt eine Datenstruktur für den Zugriff auf die Konfigurationsdaten zur Verfügung, die der von C aus dessen Headerdatei grp.h ähnelt.
User::pwent | Ersetzt die Perl-Funktionen Seite getpwent, Seite getpwuid und Seite getpwnam durch ein Objekt. Das Objekt stellt eine Datenstruktur für den Zugriff auf die Konfigurationsdaten zur Verfügung, die der von C aus dessen Headerdatei pwd.h ähnelt.

Module zum Verwalten von Perl-Erweiterungen

Modul (Syntax für Einbindung) | Aufgabe
AutoLoader | Lädt Unterprogramme nur wenn erforderlich. Dazu ist die Verwendung von __END__ erforderlich.
AutoSplit | Splittet eine Scriptdatei in mehrere Einzeldateien auf und ermöglicht auf diese Weise, dass das Modul AutoLoader Unterprogramme nur bei Aufruf lädt.
Devel::Peek | Ermöglicht das Prüfen von Daten, die von einem XS-Programm an ein Perl-Script gesendet wurden.
Devel::SelfStubber | Regelt Aufrufe von Objektmethoden in einer objektorientierten Hierarchie, die sich über mehrere Module erstreckt.
DynaLoader | Lädt dynamisch Routinen aus den C-Bibliotheken in das laufende Perl-Script.
ExtUtils::Command | Ersetzt Unix-Kommandos in Makefiles, beispielsweise für eine Win32-Portierung.
ExtUtils::Constant | Erzeugt XS-Code, um Konstanten aus C-Header-Dateien zu laden.
ExtUtils::Embed | Erlaubt das Einbinden von Aufrufen des Perl-Interpreters in C/C++ Programmen.
ExtUtils::Install | Installiert Dateien von einem Installationsverzeichnis ins Zielverzeichnis.
ExtUtils::Installed | Findet heraus, welche Module bereits installiert sind. Sinnvoll beispielsweise, um bei Bedarf nicht installierte Module dynamisch nachzuinstallieren.
ExtUtils::Liblist | Liefert eine Liste zu verwendender Erweiterungsbibliotheken.
ExtUtils::MakeMaker | Erzeugt ein Makefile namens Makefile.PL, das die Installation von Dateien erlaubt.
ExtUtils::Manifest | Stellt Funktionen bereit, um eine Manifest-Datei zu erzeugen und zu überprüfen. In die Manifest-Datei werden alle Dateien eines Verzeichnisbaums unterhalb des aktuellen Verzeichnisses geschrieben. Auf diese Weise lässt sich der Originalzustand eines Verzeichnisbaums sichern, bevor z.B. eine Installationsroutine daraus Dateien kopiert, löscht usw.
ExtUtils::Miniperl | Schreibt den C-Code für die Datei perlmain.c, aus der sich der Perl-Interpreter neu linken lässt. Dabei lassen sich Module angeben, die mit gelinkt werden sollen. Auf diese Weise können also Module zu eingebauten Features einer eigenen Variante des Perl-Interpreters werden!
ExtUtils::Mkbootstrap | Erzeugt eine so genannte Bootstrap-Datei, die vom Modul DynaLoader verwendet wird.
ExtUtils::Mksymlists | Erzeugt Hilfsdateien, die bei manchen Betriebssystemen benötigt werden, um Bibliotheken zu linken.
ExtUtils::Packlist | Liest und schreibt .packlist-Dateien, die Informationen über zu installierende Pfade, Dateien usw. enthalten.
ExtUtils::testlib | Stellt Funktionen bereit, um eine Erweiterungsbibliothek zu testen, bevor sie installiert wird.
SelfLoader | Bewirkt, dass Unterprogramme, die in einem Script nach __DATA__ notiert sind, bei Bedarf kompiliert und ausgeführt werden.
XS::APItest | Prüft, ob die C-API von Perl korrekt funktioniert.
XS::Typemap | Prüft die XS-Typemaps von Perl.
XSLoader | Lädt dynamisch Routinen aus den C-Bibliotheken in das laufende Perl-Script (ähnlich wie DynaLoader, jedoch weniger komplex).

Module für POD-Dokumente

Modul (Syntax für Einbindung) | Aufgabe
Pod::Checker | Prüft die Syntax von POD-Dokumenten (POD ist das Klartextformat, in dem die Perl-Dokumentation geschrieben ist, das z.B. auch für die interne Moduldokumentation verwendet wird und das mit Seite perldoc lesbar ist - also das Format mit den "=-Kommandos").
Pod::Find | Durchsucht einen Verzeichnisbaum nach POD-Dokumenten.
Pod::Functions | Erzeugt eine formatierte Liste von Perl-Standardfunktionen, ähnlich dem POD-Dokument perlfunc.
Pod::Html | Generiert aus dem POD-Format HTML-Code inklusive Querverweisen.
Pod::InputObjects | Stellt Objekte bereit, die beispielsweise die Absätze und Anweisungen in einem POD-Dokument darstellen.
Pod::LaTeX | Konvertiert POD-Dokumente ins LaTeX-Format.
Pod::Man | Konvertiert POD-Dokumente in ein Format, das vom man-Befehl von UNIX dargestellt werden kann.
Pod::ParseLink | Parst Links in einem POD-Dokument.
Pod::Parser | Basisklasse zum Parsen des POD-Formats.
Pod::ParseUtils | Enthält verschiedene Klassen zum Parsen von POD-Dokumenten.
Pod::Plainer | Wandelt POD-Texte in einem neuen Format in das ältere um.
Pod::PlainText | Generiert aus dem POD-Format reinen formatierten Text ohne Steuerbefehle.
Pod::Select | Liest eine bestimmte Stelle aus einem POD-Dokument aus.
Pod::Text | Generiert aus dem POD-Format reinen Text ohne Steuerbefehle.
Pod::Usage | Erzeugt aus POD-Dokumenten Hinweise zur Nutzung von Perl-Scripts an der Kommandozeile.

Module zum Steuern des Perl-Compilers

Modul (Syntax für Einbindung) | Aufgabe
B | Stellt die Basisklassen des Perl-Compilers zur Verfügung. Mit Hilfe des Perl-Compilers lässt sich der Code eines Perl-Scripts in C-Code übersetzen, der dann mit einem C-Compiler zu einer für das Betriebssystem ausführbaren Datei kompiliert und gelinkt werden kann. Das B-Modul stellt einem Perl-Script die Funktionalität des Perl-Compilers zur Verfügung. Das Perl-Script kann auf diese Weise den Perl-Compiler steuern.
B::Asmdata | Erzeugt automatisch generierte Datenstrukturen für Byte-Code.
B::Assembler | Assembliert Byte-Code.
B::Bblock | Durchläuft die Grundblöcke eines Scripts.
B::Bytecode | Schnittstelle zum perl-internen Byte-Code eines Scripts.
B::C | Schnittstelle zum C-Backend des Perl-Compilers.
B::CC | Optimierte Schnittstelle zum C-Backend des Perl-Compilers.
B::Concise | Zeigt die Struktur des OP-Code eines Perl-Scripts.
B::Debug | Durchläuft den Code des Perl-Scripts und zeigt Debug-Informationen an.
B::Deparse | Disassembliert den Perl-Byte-Code.
B::Disassembler | Stellt den Perl-Code eines Perl-Scripts aus Byte-Code wieder her.
B::Lint | Benutzt beim Kompilieren die Warnstufe, die bei Perl durch den Seite Aufruf des Perl-Interpreters mit der Option -w erreicht wird.
B::Showlex | Zeigt die Namen von lexikalischen Variablen in Dateien und Funktionen an.
B::Stackobj | Hilfsmodul für B::CC.
B::Stash | Gibt an, welche Stashes geladen sind.
B::Terse | Parst ein Perl-Script und zeigt dabei nur wenige Informationen an.
B::Xref | Erzeugt eine Liste aller Kreuzreferenzen und Abhängigkeiten in einem Perl-Script.
O | Schnittstelle zum Backend des Perl-Compilers, die es erlaubt, die Standardausgabe abzufangen und in einer Variable zu speichern.

Systemnahe Module

Modul (Syntax für Einbindung) | Aufgabe
Errno | Importiert die Konstanten aus der Systemdatei errno.h für die Fehlerbehandlung.
Fcntl | Stellt eine Übersetzung der C-Headerdatei fcntl.h dar und importiert daraus alle Definitionen. Diese Definitionen unterstützen Sie beim Öffnen von Dateien.
Opcode | Beeinflusst die Perl-interne Kompilation eines Scripts, bevor es ausgeführt wird. Wird in Zusammenhang mit dem Modul Safe verwendet.
Safe | Erzeugt geschützte Bereiche mit eigenen Namensräumen, um Perl-Code darin auszuführen.
Test | Stellt Test-Typen und Fehlerreaktionen zum Austesten von Perl-Scripts bereit.
Test::Builder | Erlaubt es, eigene Bibliotheken für Tests zu schreiben, die zusammenarbeiten können.
Test::Harness | Führt standardisierte Tests durch und gibt die Ergebnisse aus.
Test::More | Erweiterung von Test::Simple.
Test::Simple | Ermöglicht das einfache Durchführen von Tests.
Win32 | Ermöglicht den Zugriff auf einige interne Funktionen von Windows-Systemen.

Pragma-Module zum Beeinflussen des Perl-Interpreters

Modul (Syntax für Einbindung) | Aufgabe
attrs | Setzt und ermittelt Attribute eines Unterprogrammes. Dieses Pragma ist veraltet, stattdessen soll attributes verwendet werden.
attributes | Setzt und ermittelt Attribute von Unterprogrammen und Variablen.
autouse | Parst Perl-Code aus eingebundenen Modulen erst dann, wenn Funktionen des Moduls aufgerufen werden. Ein Perl-Script kann dadurch schneller starten, verliert die gewonnene Zeit aber gegebenenfalls während der Ausführung wieder.
base | Definiert Basisklassen für die aktuelle Klasse.
bigint | Erlaubt das Rechnen mit Ganzzahlen, die größer sind als das, was Perl normalerweise als Ganzzahl zu interpretieren in der Lage ist. Im Gegensatz zu Math::BigInt werden hierbei die Operatoren mit dieser Funktion ausgestattet.
bignum | Stattet die Operatoren mit der Fähigkeit aus, mit Zahlen zu rechnen, die größer oder kleiner sind als das, was Perl normalerweise als Zahl zu interpretieren in der Lage ist.
bigrat | Stattet die Operatoren mit der Fähigkeit aus, mit Zahlen zu rechnen, die größer oder kleiner sind als das, was Perl normalerweise als Zahl zu interpretieren in der Lage ist.
blib | Durchsucht nicht installierte Module. Gedacht für die Verwendung im Zusammenhang mit der Option -M beim Aufruf des Perl-Compilers.
bytes | Behandelt Daten nicht als UTF-8, sondern arbeitet sie byteweise ab.
constant | Deklariert unveränderliche Konstanten, ähnlich, wie es in C mit #define möglich ist.
charnames | Erlaubt es, Zeichen aus anderen Zeichenvorräten mit Hilfe Ihrer Namen zu erzeugen.
diagnostics | Gibt bei Fehlermeldungen, die der Perl-Compiler ausgibt, zugleich deren Erläuterungen mit aus. Dazu werden die Beschreibungen aus perldiag verwendet.
encoding | Ermöglicht das Schreiben von Perl-Quellcode in anderen Kodierungen als der ASCII- oder UTF-8-Kodierung.
fields | Stellt sicher, dass der vordefinierte Hash %FIELDS zur Kompilierzeit versorgt ist.
filetest | Verändert das Verhalten einiger Seite Dateitestoperatoren und ermöglicht so, die Berechtigungen von Dateien genauer zu ermitteln (beispielsweise falls sog. Access Control Lists verwendet werden).
if | Erlaubt es, ein Perl-Modul nur unter bestimmten Bedingungen zu laden.
integer | Bewirkt, dass der Perl-Interpreter bei Rechenoperationen nur mit Ganzzahlen rechnet. Eine Operation wie 10/3 ergibt dann 3 ohne Nachkommastellen.
lib | Ermöglicht das Erweitern der vordefinierten Liste Seite @INC, bevor das Script ausgeführt wird. Auf diese Weise lassen sich Pfade zu eigenen Modulen in den Suchpfad @INC mit aufnehmen, die vom Script benötigt werden, sich aber nicht in den vordefinierten Suchpfaden befinden.
locale | Schaltet die Verwendung von lokalen Einstellungen, wie sie in POSIX definiert sind, ein oder aus. Solche lokalen Einstellungen betreffen z.B. die zu verwendende Zeichenkodierung bei Zeichenkettenvergleichen.
open | Beeinflusst das Verhalten des Perl-Interpreters bei IO-Operation (Lesen und Schreiben von Daten).
ops | Schränkt die Ausführung unsicherer Operationen in einem Perl-Script ein, sofern der Perl-Interpreter zum Ausführen des Scripts mit der Option -M aufgerufen wird.
overload | Ermöglicht es, Operatoren in Perl-Scripts mit eigenen Funktionen zu verknüpfen. So ist es beispielsweise möglich, eigene Funktionen für Operatoren wie "Division" oder "größer als" zu schreiben und die Funktionalität der entsprechenden Operatoren wie / (Division) oder > (größer als) an die selbst geschriebenen Funktionen zu knüpfen.
re | Beeinflusst die Interpretation Seite regulärer Ausdrücke für spezielle Zwecke wie das Behandeln von Variablen innerhalb des regulären Ausdrucks.
sigtrap | Ermöglicht einem Perl-Script, auf Signale zu reagieren, die es von anderen Prozessen erhält.
sort | Beeinflusst das Verhalten der Seite sort-Funktion.
strict | Verhindert, dass unsauberer Code ausgeführt wird. Toleranzen, die der Perl-Interpreter ansonsten erlaubt, werden dadurch ausgeschaltet.
subs | Ermöglicht das Vorabdeklarieren der Namen aller verwendeten Seite Subroutinen. Im weiteren Code des Scripts können die Namen dann sofort ohne Klammern verwendet werden, also z.B. Speichern statt Speichern().
threads | Erlaubt es, Interpreter-basierte Threads in Perl zu nutzen.
threads::shared | Erlaubt es, Datenstrukturen zwischen zwei Threads auszutauschen.
utf8 | Ermöglicht das Verwenden von UTF-8-Sonderzeichen im Quellcode.
vars | Ermöglicht das Vorabdeklarieren der Namen von globalen Variablen. Dieses Modul ist mittlerweile veraltet, stattdessen sollen Deklarationen mit der Funktion our verwendet werden.
vmsish | Ermöglicht es, Features zu nutzen, die nur unter dem Betriebssystem VMS verfügbar sind.
warnings | Mit diesem Modul lassen sich die Warnmeldungen des Perl-Interpreters kontrollieren.
nach oben
weiter | Seite CPAN-Module
zurück | Seite Einführung in das Arbeiten mit Modulen
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Module

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Module / CPAN-Module

SELFHTML

CPAN-Module
Informationsseite

nach unten Allgemeines zu den Modulen im CPAN-Verzeichnis
nach unten Adressen des CPAN-Verzeichnisses
nach unten Kategorien für Module im CPAN-Verzeichnis
nach unten Module aus dem CPAN-Verzeichnis downloaden und installieren
nach unten

Allgemeines zu den Modulen im CPAN-Verzeichnis

CPAN steht für Comprehensive Perl Archive Network (zu deutsch in etwa zu übersetzen mit Umfassendes Perl-Archiv Netzwerk). Es ist eine Art offizielle Sammelstelle für Perl-Module. Das CPAN-Verzeichnis enthält tausende von Modulen für alle nur denkbaren Aufgaben, egal ob für Kalenderprogrammierung, mathematische Berechnungen, Textverarbeitung, Datenverschlüsselung oder Internetzugriffe. Das Stöbern im CPAN-Verzeichnis und Besorgen eines geeigneten Moduls kann also viele Stunden und Tage Programmierarbeit sparen. Dazu kommt, dass ein bewährtes Modul meistens schon von Bugs (Fehlern) im Code weitgehend befreit ist und eine Laufstabilität hat, die selbstgeschriebener Code oft erst nach längerer Zeit erreicht.

Module aus dem CPAN-Verzeichnis müssen allerdings - im Gegensatz zu den Seite Standardmodulen - erst installiert werden, bevor ein Script sie verwenden kann. Wenn ein Script auf einem anderen Rechner laufen soll, müssen CPAN-Module, die in dem Script verwendet werden, auch dort zuerst installiert werden. Dazu müssen Sie die gewünschten Module zunächst downloaden.

Die Module aus dem CPAN-Verzeichnis verfügen in der Regel genau wie die Standardmodule über eine integrierte Dokumentation, die mit Seite perldoc lesbar ist.

Adressen des CPAN-Verzeichnisses

Das CPAN-Verzeichnis ist wegen der hohen Belastung durch die zahlreichen Perl-Programmierer auf vielen Servern weltweit gespiegelt. Es ist daher ratsam, sich erst einmal über die verfügbaren Server zu informieren. Die offizielle Liste der CPAN-Server finden Sie unter folgender Adresse:

englischsprachige Seite http://www.perl.com/CPAN/SITES

Die Server, die dort aufgelistet werden, sind überwiegend öffentliche FTP-Server. Die meisten Browser sind in der Lage, die Inhalte von FTP-Sites anzuzeigen. Ansonsten können Sie auch mit Hilfe eines FTP-Programms auf einen solchen Server zugreifen. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie eine Produktübersicht mit Links zu Anbietern von solchen Programmen:

Online-Seite SELFHTML-Linkverzeichnis: FTP-Programme

Bei den Spiegelungen des CPAN-Verzeichnisses handelt es sich um öffentliche FTP-Sites. Das bedeutet, dass Sie für die FTP-Verbindung zu dem Server einfach die Serveradresse (Name oder IP-Adresse), als Benutzernamen Anonymous und als Passwort Ihre E-Mail-Adresse angeben.
Einige der aufgelisteten Server sind jedoch auch HTTP-Server, die für Browser ohne eingebaute FTP-Funktion geeignet sind.

Sie können das CPAN-Verzeichnis aber auch in Form normaler Web-Seiten durchstöbern. Rufen Sie dazu die folgende Adresse auf:

englischsprachige Seite http://www.perl.com/CPAN/

Kategorien für Module im CPAN-Verzeichnis

Einen guten inhaltlichen Überblick über die verfügbaren Module erhalten Sie, wenn Sie mit einem FTP-Programm im CPAN-Verzeichnis ins Unterverzeichnis modules und dann weiter ins Unterverzeichnis by-category wechseln. Jede Kategorie wird durch ein Unterverzeichnis repräsentiert. Die folgende Tabelle listet die Namen der zum Zeitpunkt der Redaktion dieses Textes verfügbaren Unterverzeichnisse auf und gibt zu jedem Unterverzeichnis einen kurzen Überblick über dessen Inhalt. Dieser Überblick ist allerdings nur ein grober Anhaltspunkt, was in dem jeweiligen Unterverzeichnis zu finden ist. Wenn Sie auf der Suche nach einem Modul für eine bestimmte Aufgabe sind, sollten Sie beim Besuch des CPAN-Verzeichnisses etwas Zeit zum Stöbern und Lesen mitbringen.

Beachten Sie, dass das CPAN-Verzeichnis physikalisch nach Autoren geordnet ist. Die Sortierung nach Kategorien enthält daher nur symbolische Links auf Verzeichnisse und Dateien in anderen Verzeichnissen unterhalb des Verzeichnisses authors. Wenn Sie also ein Verzeichnis oder eine Datei auswählen, wechseln Sie automatisch in ein entfernteres Verzeichnis oder erhalten eine Datei aus einem entfernteren Verzeichnis.

Unterverzeichnis Inhalt
02_Perl_Core_Modules

Enthält Module, die zum Kern von Perl gezählt werden. Viele dieser Module gehören mittlerweile auch zu den Seite Standardmodulen von Perl. Das Verzeichnis enthält aber noch mehr als die Standardmodule. Bei den weiteren Modulen handelt es sich um Anwärter für Standardmodule.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Filter filtert den Quellcode eines Perl-Scripts nach verschiedenen Kriterien, bevor er ausgeführt wird.
enum erlaubt das Definieren symbolischer Konstanten und damit ein Arbeiten wie mit dem aus C bekannten Datentyp.
03_Development_Support

Enthält Module, die das Entwickeln von Perl-Scripts und von Modulen unterstützen.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Devel:: stellt diverse Tools zur Verfügung, mit deren Hilfe Profiling, Debugging und Laufzeitkontrolle von Perl-Scripts oder Modulen kontrolliert werden können.
ExtUtils:: enthält neben den zu den Standardmodulen gehörenden Modulen noch weitere Module, z.B. einen Perl-Präprozessor.
CVS:: ist eine Schnittstelle zum Versionenverwaltungssystem CVS (concurrent versioning system).
04_Operating_System_Interfaces

Enthält Module für systemnahe Aufrufe und betriebssystemspezifische Funktionen.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Async:: enthält Funktionen für parallele Datenverarbeitung auf Rechnern mit "echtem Multitasking".
BSD:: enthält Funktionen speziell für Berkeley-Unix. Entsprechende Funktionen gibt es unterhalb von MSDOS::, Mac::, , OS2::, Solaris:: usw.
Proc:: bietet Funktionen zur Kontrolle laufender Prozesse an.
Quota erlaubt den Zugriff auf Systemdaten wie verfügbaren Festplattenspeicher, Arbeitsspeicher usw.

05_Networking_Devices_IPC

Enthält Module für die Netzwerk-Programmierung.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
CORBA enthält Funktionen für die Nutzung der CORBA (Common Object Request Broker Architecture).
DCE:: enthält Module für Sicherheitsfunktionen nach DCE (Distributet Computing Environment).
IPC:: enthält Module, die über die IPC-Standardmodule hinausgehen und Funktionen zur Kommunikation zwischen Prozessen enthalten.
Net:: enthält Module, die über die Net-Standardmodule hinausgehen und Funktionen zur Kommunikation zwischen Prozessen auf verschiedenen Rechnern erlauben, unter anderem für DNS (Domain Name Service) oder Protokolle wie IRC (Internet Relay Chat) oder LDAP.

06_Data_Type_Utilities

Enthält Module für Datentypen, Datenstrukturen und wichtige Algorithmen.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Algorithms:: enthält Module, die mit Hilfe anerkannter Algorithmen arbeiten und Aufgaben realisieren wie das zufällige Auswählen von Daten oder das Berechnen von gerichteten Graphen.
Array:: enthält Module zur Manipulation von Listen.
Bit:: enthält Module zur Manipulation von Bitzeichenketten und für Bit-Operationen.
Class:: enthält Module, die bei der objektorientierten Programmierung unterstützen.
Data:: enthält Module zur Darstellung und Formatierung von Daten.
Date:: enthält Module für Datum- und Zeitrechnung nach verschiedenen Kalendern.
Graph:: enthält Module für Graphenberechnung.
Math:: enthält Module, die über die Math-Standardmodule hinausgehen und mathematische Funktionen bereitstellen, etwa für Fraktalberechnung, Approximationsberechnung, Integralrechnung, Matritzenrechnung und Zufallszahlengenerierung.
Set:: enthält Module zur Implementierung logischer Mengen.
Statistics:: enthält Module für verschiedene Arten statistischer Berechnungen, z.B. für Berechnung von Mittelwerten, Standardabweichung, maximaler Entropie und linearer Progression.
Tie:: enthält Module für verschiedene Bindungen von Variablen an Objekte, z.B. zum Realisieren eines Timers (zeitliche Intervallabfrage), Cache-Verwaltung, Datenbankzugriffe, oder Umleitung des Standardkanals STDERR an ein Programm, z.B. ein E-Mail-Programm.
Time:: enthält Module zur Berechnung von Zeitangaben, z.B. für mikrosekundengenaue Angaben, julianisches Datum und Zeitzonen.
Tree:: enthält Module für baumartige Datenstrukturen, z.B. für B-Bäume oder AVL-Bäume.

07_Database_Interfaces

Enthält Module für die Kommunikation mit bekannten Datenbanksystemen.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
DBD:: enthält Module, die als Treiber für die datenunabhängige Schnittstelle DBI fungieren. Über DBI ist z.B. der Zugriff auf Datenbanksysteme wie Adabas, DB2, Informix, Oracle, Ingres, MySQL, QBase oder Sybase möglich. Auch ODBC-Treiber sind enthalten.
Metadata:: enthält Module, die bekannte Metadatenformate für Suchsysteme unterstützen.

08_User_Interfaces

Enthält Module zum Programmieren von Benutzeroberflächen mit Perl.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Cdk und Curses: enthalten Funktionen für die bekannte, textmodus-orientierte Benutzeroberfläche Curses.
Emacs::Lisp bietet eine Schnittstelle zum programmierbaren Texteditor Emacs an.
Term:: enthält Module zur Ansteuerung von textmodus-orientierten Terminals an. Enthalten sind Funktionen für Farbdarstellung, Tastaturkürzel und erweiterte Editierfunktionen.
Tk:: enthält Module, um graphische Oberflächen wie X11 (Unix) oder auch MS Windows zu bedienen.

09_Language_Interfaces

Enthält Module für die Integration anderer Programmiersprachen in Perl.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
C:: enthält Module zur Anbindung von C-Programmen und C-Bibliotheken.
Java realisiert eine Java-Laufzeitumgebung für Perl.
Python erlaubt das Einbetten von Perl-Code in Python-Programme.

10_File_Names_Systems_Locking

Enthält Module für die Verwaltung von Dateisystemen, Dateinamen und Sperren benutzter Dateien.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
File:: enthält Module, die über die File-Standardmodule hinausgehen und Funktionen für Backups, Dateibeschreibungen, Dateizugriffszähler oder beschleunigtes Laden von Dateien in den Arbeitsspeicher anbieten.
FileSys:: enthält Module, die Systeminformationen wie z.B. freien Speicherplatz abfragen.

11_String_Lang_Text_Proc

Enthält Module für die Zeichenkettenverarbeitung und für Textverarbeitung.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Font:: enthält Module, die sich mit Schriftartenmetrik und Schriftartformaten wie TrueType und Adobe Fonts befassen.
Lingua:: enthält Module, die sich mit der Semantik und Grammatik natürlicher Sprachen befassen, z.B. Konvertierung von Zahlen in Zahlenwörter, Konjugation von Verben, Pluralbildung von Substantiven usw.
Parser:: enthält Module, die bekannte künstliche Sprachen interpretieren.
RTF:: enthält Module, die das RTF-Format (Rich Text Format) interpretieren und z.B. in Text oder HTML konvertieren.
SGML:: enthält Module zum Parsen von SGML-Dateien.
String:: enthält Module für erweiterte Zeichenkettenverarbeitung, z.B. approximative Suche, Bitzahlermittlung, CRC (Cycling Redundancy Checks) usw.
Text:: enthält Module für zeilenübergreifende Texte und Textformate, z.B. zum Formatieren von Text, zum Parsen von CSV-Dateien (Comma Separated Values) usw.
XML:: enthält Module zum Parsen von XML-Dateien.

12_Opt_Arg_Param_Proc

Enthält Module zum Auslesen von Konfigurationsdateien.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
ConfigReader liest verschiedene Konfigurationsdateien aus.
Getopt:: enthält Module, die über die Getopt-Standardmodule hinausgehen und Kommandozeilenoptionen beim Aufruf des Perl-Interpreters analysieren.
IniConf liest Konfigurationsdateien im Windows-typischen ini-Format.

13_Internationalization_Locale

Enthält Module für das Arbeiten mit internationalen Kodierungen.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Cz:: enthält Module zum Verarbeiten tschechischer Texte.
I18N:: enthält Module zum Ordnen von Kodierungsnamen nach IANA-Standard und für Länderkürzel nach RFC 1766.
Locale:: enthält Module zur Behandlung sprachlich lokaler Besonderheiten, z.B. Länderidentifikation nach den Länderkürzeln von RFC 1766 und für Unicode-Kodierung von Texten.

14_Security_and_Encryption

Enthält Module für die Verschlüsselung von Daten und für Authentifikation. Achtung: Beachten Sie vor dem Download solcher Module eventuell bestehende kryptografische Einschränkungen in Ihrem Land! Der Erwerb von Quellcode mit unerlaubten Verschlüsselungsverfahren kann strafbar sein - leider.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Authen:: enthält Module für Authentifikation, z.B. für SecureID/ACE-Karten, MD5-basiertes Challenge-Response-Protokoll oder die SAMBA-Authentifikation an Windows-NT-Servern.
Crypt:: enthält Module für die Datenverschlüsselung, z.B. nach dem Verschlüsselungsstandard DES (Data Encryption Standard), nach MD5-Standard usw.
PGP:: enthält Module zum Ansprechen des PGP-Programms (Pretty Good Privacy).

15_World_Wide_Web_HTML_HTTP_CGI

Enthält Module für CGI-Scripts, HTTP-Verbindungen und HTML-Erzeugung.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Apache:: enthält Module, die zumeist Erweiterungen für das mod_perl-Modul des Apache-Webservers bereitstellen. mod_perl ist ein Perl-Interpreter, der innerhalb eines Apache-Prozesses läuft und das Ausführen von Perl-Scripts im Zusammenhang mit CGI stark beschleunigen kann. Voraussetzung für die Module ist eine Apache-Installation mit mod_perl-Modul. Die Module bieten Funktionen für Authentifikation, Zugang zu den Logging-Funktionen von Apache, Redirects, Server Side Includes, Informationen zum Status einer Verbindung zwischen Server und Browser, Zugriff auf die von Apache ermittelte Anzahl übertragener Bytes und Dateizugriffe usw.
CGI:: enthält Module speziell für CGI-Scripts, die über den Umfang des CGI-Standardmoduls hinausgehen, z.B. Module für das Zwischenspeichern von CGI-Anforderungen in einem Cache, für die Erzeugung von HTML-Code für den Browser, zur Verwaltung serverseitiger verweis-sensitiver Grafiken usw.
LWP:: enthält Module zur Kommunikation mit anderen Webservern, z.B. zum Einlesen von HTML-Dateien, die auf fremden Servern liegen.
MIME:: enthält Module für MIME-Typen. Enthalten sind z.B. Module zum Umwandeln von 8-Bit-Text 7-Bit-Text nach Base64-Standard und zum Parsen von MIME-Angaben.
Netscape:: enthält Netscape-spezifische Module, z.B. zum Analysieren des Cache-Speichers oder der gespeicherten History des Netscape-Browsers.
URI zerlegt einen URI in seine Einzelzeile.
WWW:: enthält Module für einen einfachen Such-Robot und zur Interaktion zwischen Perl-Script und bekannten Suchmaschinen im Web.

16_Server_and_Daemon_Utilities

Enthält Module zum Programmieren eigener Server.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Event:: enthält Module für Server, die auf Ereignisse reagieren.
Netserver:: enthält Module für verschiedene Server, z.B. für HTTP und SMTP.

17_Archiving_and_Compression

Enthält Module für die Archivierung und Komprimierung/Dekomprimierung von Dateien in und aus bekannten Packformaten.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Archive::Tar kann tar-Archive, wie sie unter Unix üblich sind, lesen und schreiben.
Compress:: enthält Module für verschiedene Kompressions-Algorithmen für bzip, LZO und Zlib.
Convert:: enthält Konvertierungsmodule, z.B. für Konvertierungen zwischen ASCII- und EBCDIC-Kodierung, zur Konvertierung von Zahlen in bestimmte technische Schreibweisen, zum Dekodieren von UU-kodierten Daten usw.
18_Images_Pixmaps_Bitmaps

Enthält Module für Bild- und Videoformate.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Chart:: enthält Module zum Erzeugen von Linien, Balken und kompletten Darstellungs-Charts und deren Export in eine GIF-Datei.
Image:: enthält Module zum automatischen Download von Grafiken aus dem Netz, zum Auslesen wichtiger Kopfdaten aus Grafikformaten wie GIF, JPEG, PNG, TIFF, XPM, XBM, PGM und PBM, sowie zum Anwenden von Filtern auf Pixelgrafiken, z.B. zum automatischen Drehen einer Grafik oder zum Vergrößern/Verkleinern.
OpenGL erlaubt den Zugriff auf die OpenGL-Bibliothek, die Funktionen für dreidimensionale Texturen, Projektionen usw. bereitstellt.
VRML:: enthält Module für VRML-Code.

19_Mail_and_Usenet_News

Enthält Module für E-Mails und den Zugriff auf News-Server.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Mail:: enthält Module zum Realisieren eines E-Mail-Clients mit Perl, zum Filtern von E-Mails, und zum Versenden von E-Mails über SMTP (sendmail-Funktion).
News:: enthält Module zum Weiterleiten von E-Mails an eine Newsgroup oder zum Weiterleiten von News an eine E-Mail-Adresse, zum Realisieren eines News-Clients mit Perl, und zum Erzeugen von News-Artikeln.

20_Control_Flow_Utilities

Enthält Module zur Kontrolle des laufenden Perl-Scripts.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
AtExit stellt eine Funktion bereit, die automatisch beim Beenden eines Scripts aufgerufen wird.
Memoize beschleunigt das Ausführen von Funktionen und kann Parameter und Rückgabewerte einer Funktion in einer Datei speichern.

21_File_Handle_Input_Output

Enthält Module für Ein-/Ausgabefunktionen mit Handles.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Expect stellt Funktionen zum Steuern dialogorientierter Programme bei.
FileHandle::Multi kann in mehrere Ausgabekanäle bzw. Dateien gleichzeitig schreiben.
IO:: enthält neben den IO-Standardmodulen zusätzliche Module, z.B. um Zeichenketten mit Handles zu verknüpfen, oder zum Setzen von stty-Terminalparametern.
Log:: enthält Module zum Lesen und Schreiben von Log-Dateien. So lassen sich z.B. Einträge in die Logfiles des Webservers oder in selbst definierte Logfiles schreiben.

22_Microsoft_Windows_Modules

Enthält Module für MS-Windows-Systeme ab Windows 95.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Win32:: enthält Module für Windows-spezifische Netzwerkfunktionen, für RAS-Server, OLE-Verknüpfungen usw.
Win32API:: enthält Module für den Registry-Zugriff, den Zugriff auf serielle Schnittstellen unter Windows, und für die Laufwerks- und Dateiverwaltung unter Windows.

23_Miscellaneous_Modules

Enthält Module für verschiedene Aufgaben, die anderweitig nicht einzuordnen sind. Eine Fundgrube also!

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
Agent:: enthält Module, mit deren Hilfe sich mit Perl ein intelligenter Software-Assistent realisieren lässt, der bestimmte Aktionen selbständig durchführt, Daten filtert usw.
Archie:: enthält Module zum Abfragen eines Archie-Servers.
Audio:: enthält Module zum Bearbeiten von Audio-Dateien, z.B. WAV-Dateien.
Business:: enthält Module für den Geschäftsverkehr, z.B. für Kreditkartenwesen.
Games:: enthält Module für Spiele, z.B. für Schach.
MIDI:: enthält Module zum Erzeugen und Bearbeiten von MIDI-Dateien mit Hilfe von Perl.
Watchdog: enthält Module zum Überprüfen, ob Webserver oder MySQL-Datenbankserver noch laufen.
24_Commercial_Software_Interfaces

Enthält Module für die Kommunikation zwischen Perl-Programmen und kommerziellen Software-Produkten.

Einige interessante Module/Modulgruppen dieses Unterverzeichnisses sind:
AltaVista:: enthält Module für den Zugriff auf die Suchmaschine von AltaVista.
R3:: enthält Module für den Zugriff auf Funktionen des RFCSDK (Software Development Kit des R3-Pakets von SAP).
Real:: enthält ein Modul zum Zugriff auf RealMedia-Datenströme (RealAudio, RealVideo).

99_Not_In_Modulelist

Enthält Module, die nicht in der offiziellen Modul-Liste des CPAN-Verzeichnisses enthalten sind.

Module aus dem CPAN-Verzeichnis downloaden und installieren

Die Verzeichnisse mit Modulen enthalten jeweils zu jedem Modul eine Datei mit der Endung .readme und eine Datei mit der Endung .tar.gz. Die readme-Datei ist eine Textdatei, der Sie vorab Details zum jeweiligen Modul entnehmen können. Die tar.gz-Datei ist eine nach dem GNU-Zip-Verfahren komprimierte tar-Datei, also eine Archivdatei. GZip und tar sind typische Werkzeuge aus der Unix-Welt. Um die Dateien unter anderen Betriebssystemen, etwa unter Windows zu entpacken, benötigen Sie ein Entpack-Programm für gzip-Dateien. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie eine Produktübersicht mit Links zu Anbietern von solchen Programmen:

Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme

Auf Unix-Systemen können Sie eine gezippte Archivdatei (im folgenden am Beispiel der Datei Algorithm-SISort-0.10.tar.gz) mit folgendem Befehl entpacken:

tar -zxf Algorithm-SISort-0.10.tar.gz

Falls dies nicht funktioniert, sollte der folgende zusammengesetzte Befehl funktionieren:

gzip -cd Algorithm-SISort-0.10.tar.gz | tar -xf -

Anschließend befinden sich die entpackten Dateien in einem Unterverzeichnis mit dem gleichen Namen wie das Modul, im Beispiel also etwa einem Verzeichnis namens Algorithm-SISort-0.10.

Wenn Sie das Modul nicht auf dem eigenen Rechner installieren wollen, sondern auf einem Rechner im Internet, wo Sie Web-Speicherplatz gemietet haben, benötigen Sie einen Telnet- oder SSH-Zugang zu dem Rechner, um das Modul dort installieren zu können. Ferner benötigen Sie die Rechte, um in die Modulverzeichnisse von Perl Dateien kopieren zu können. Fragen Sie dazu gegebenenfalls Ihren Provider! Wenn es sich bei dem Server-Rechner um einen Rechner mit einem Unix-Betriebssystem handelt, können Sie die tar.gz-Datei des Moduls zunächst auf Ihren Rechner downloaden, dann auf Ihren Server-Rechner uploaden und die Datei dort am Shell-Prompt, den Sie bei Zugang über Telnet oder SSH erhalten, mit den oben genannten Befehlen entpacken.

Nach dem Entpacken der tar.gz-Datei des Moduls muss das Modul installiert werden. Wechseln Sie dazu in das Verzeichnis der entpackten Dateien. Meistens finden Sie dort eine Datei namens README oder INSTALL, in der unter anderem Informationen zum Installieren des Moduls stehen.

Unter Unix müssen Sie nun am Shell-Prompt folgende Befehle eingeben:

perl Makefile.PL

Mit diesem Befehl wird eine Datei mit Installationsinformationen erzeugt. Gegebenenfalls müssen Sie beim Aufruf von perl den Pfad zur ausführbaren Datei des Perl-Interpreters angeben.

make

Mit diesem Befehl wird die Installation vorbereitet - die Dateien werden für Ihr System kompiliert.

make test

Mit diesem Befehl wird die Installationsvorbereitung getestet. Wenn Sie sicher sind, dass Sie alles richtig konfiguriert haben, können Sie diesen Schritt auch weglassen.

make install

Mit diesem Befehl wird die Installation durchgeführt.

Führen Sie diese Befehle unbedingt in der angegebenen Reihenfolge aus, wenn Sie ein Perl-Modul installieren! Das Modul ist dann in einem Modulverzeichnis installiert. Weitere Informationen, wie Sie das Modul benutzen, finden Sie in der hoffentlich vorhandenen Datei README oder INSTALL.

Unter anderen Systemen wie Windows, wo Sie normalerweise Zugang zu allen Verzeichnissen auf dem Rechner haben, kopieren Sie einfach den Inhalt des Unterverzeichnisses lib, das nach dem Entpacken existieren sollte, in das Verzeichnis lib unterhalb des Installationsverzeichnisses von Perl, sofern es sich um ein reines Perl-Modul handelt. Wenn das Modul mit C-Erweiterungen arbeitet, benötigen Sie einen C-Compiler, oder Sie benutzen das in der ActivePerl-Distribution mitgelieferte Tool ppm, um eine bereits kompilierte Version des Moduls zu installieren.

Beachten Sie:

Falls Sie aufgrund fehlender Rechte auf einem Server-Rechner nicht die Möglichkeit haben, Module aus dem CPAN-Verzeichnis in die Modulverzeichnisse von Perl zu installieren, können Sie es auch in ein Verzeichnis Ihrer Wahl installieren. Also in ein Verzeichnis, auf das Sie selber Zugriff haben. Ohne einen Shell-Prompt, wie er bei Telnet oder SSH zur Verfügung steht, kommen Sie jedoch nicht aus.

Legen Sie dazu zunächst das Verzeichnis mit dem gewünschten Namen an der gewünschten Stelle in Ihrem Verzeichnisbaum an. Stellen Sie danach sicher, dass Sie sich im Verzeichnis des entpackten Perl-Moduls befinden. Geben Sie dann der Reihe nach folgende Befehle ein:

perl Makefile.PL LIB=[Pfad zum Verzeichnis]
make
make test
make install

Bei [Pfad zum Verzeichnis] müssen Sie das zuvor angelegte Verzeichnis korrekt adressieren. Angenommen, Sie haben die Moduldateien aus Sicht Ihres Homepage-Startverzeichnisses in tmp/Algorithm-SISort-0.10 entpackt, und das Modul soll in cgi-bin/perlmodule/Algorithm-SISort-0.10 installiert werden. Dann müssen Sie, wenn Sie sich im Verzeichnis tmp/Algorithm-SISort-0.10 befinden, eingeben:
perl Makefile.PL LIB=../../cgi-bin/perlmodule/Algorithm-SISort-0.10

nach oben
weiter | Seite Modul CGI: Funktionen für die CGI-Programmierung
zurück | Seite Standardmodule von Perl
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Module

© 2007 Seite Impressum


SELFHTML: Perl / Perl-Module / Modul CGI: Funktionen für die CGI-Programmierung

SELFHTML

Modul CGI: Funktionen für die CGI-Programmierung
Informationsseite

nach unten Allgemeines zum CGI-Modul
nach unten CGI-Modul in Scripts einbinden
nach unten Einfache (X)HTML-Ausgaben mit dem CGI-Modul
nach unten Erweiterte Ausgaben mit dem CGI-Modul
nach unten Formular-Verarbeitung mit dem CGI-Modul
nach unten Umgebungsdaten ermitteln mit dem CGI-Modul
nach unten Cookies verwalten mit dem CGI-Modul
nach unten Automatische Umleitungen (Redirects) mit dem CGI-Modul
nach unten Sicherheitseinstellungen mit dem CGI-Modul
nach unten

Allgemeines zum CGI-Modul

Das CGI-Modul gehört seit der Perl-Version 5.004 (Mai 1997) zu den Seite Standardmodulen. Sie finden es meist im Verzeichnis /usr/lib/perl5/5.8.8 bzw. unter Windows in C:\Programme\Perl\lib unter dem Namen CGI.pm. Es fasst eine große Anzahl Funktionen zusammen, die typische Routine-Aufgaben von CGI-Scripts übernehmen. Eine relativ umfangreiche Erläuterung des Moduls können Sie sich auf der Konsole bzw. Eingabeaufforderung mit perldoc CGI ausgeben lassen. Seine Funktionen haben sich im Praxiseinsatz vielfach bewährt. Es ist deshalb sinnvoll, bei der Erstellung eigener CGI-Scripts auf die Ressourcen zurückzugreifen, die dieses Modul bereitstellt; man braucht dann nicht alles nochmals selbst zu schreiben.

Ein Nachteil des CGI-Moduls besteht allerdings darin, dass es recht groß ist. Das liegt (unter anderem) an seinem monolithischen Aufbau. Es übersetzt viel Code erst zur Laufzeit, wenn die Funktionen benötigt werden. Da darüber hinaus auch Cachingmechanismen auf dem Server dafür sorgen, dass die etwa 250 KB große Datei nicht bei jedem Aufruf neu eingelesen wird, sollten Sie nur bei kleinen CGI-Scripts wie etwa Zugriffszählern oder Weiterleitungen auf den Einsatz des CGI-Moduls verzichten. Bei den meisten CGI-Scripts ist seine Verwendung jedoch zu empfehlen, vor allem, wenn damit Formulardaten verarbeitet und (X)HTML-Dokumente zusammengestellt werden sollen. Denn das Modul übernimmt unter anderem auch eine ganze Reihe von automatischen Anpassungen an die Laufzeitumgebung des Scripts, wodurch mögliche Fehler vermieden bzw. minimiert werden können.

Das CGI-Modul besteht aus einem Hauptmodul und verschiedenen Untermodulen. Die Untermodule übernehmen im wesentlichen spezielle Aufgaben wie beispielsweise die Unterstützung des neueren Fast-CGI-Standards oder die Unterstützung so genannter Server-Pushs. In diesem Kapitel wird insbesondere dargestellt, wie Sie mit Hilfe des CGI-Moduls (X)HTML-Dokumente generieren und mit übermittelten Daten umgehen können. Das ist allerdings bei weitem nicht die einzige Aufgabe, die diesem Modul zugeteilt werden kann. Wenn Sie "nur" HTML ausgeben lassen möchten, könnten Sie sogar ganz auf das CGI-Modul verzichten; es gibt weitere Standardmodule, die für solche Aufgaben herangezogen werden könnten. Und schließlich ist Ihr Script auch dann, wenn es das CGI-Modul einsetzt, immer noch ein Perl-Script und kann neben dem Zusammenstellen von (X)HTML auch alle die anderen Dinge tun, für die Perl-Scripts nun einmal eingesetzt werden.

Und wie alles, was zu den Computersprachen gehört, unterliegt auch Perl einschließlich seiner Module einer stetigen Entwicklung. Manches, was Sie noch zum Erscheinungstermin von SELFHTML 8.1 (im November 2005) als gültig erläutert bekamen, ist bereits nach zwei Jahren nicht mehr im gleichen Maß gültig. Das hängt damit zusammen, dass auch das CGI-Modul beständig weiterentwickelt wird. Dazu vergleichen Sie bitte den aktuellen Entwicklungsstand im englischsprachige Seite CPAN.

Im wesentlichen gibt es zwei Möglichkeiten, das CGI-Modul zu verwenden: eine objektorientierte und eine funktionsorientierte. Beide Konzepte haben ihre Vor- und Nachteile.

Der funktionsorientierte Modus

Wenn Sie diesen Modus nutzen möchten, müssen Sie entweder eine oder mehrere bestimmte Funktion(en) in den Namensraum Ihres Scripts importieren - oder Sie importieren eine ganze Liste, die die von Ihnen gewünschten Methoden bereitstellt. Solche Funktionslisten beginnen grundsätzlich mit einem vorangestellten Doppelpunkt. Ein Beispiel, das ein vollständiges XHTML-Dokument erzeugt, könnte dann so ausssehen:

#!/usr/bin/perl -w

use CGI qw/:standard/;

print header, start_html, p('Hallo Welt!'), end_html;

Es gibt mehrere Möglichkeiten, funktionsorientiert zu schreiben, auf die hier aber nicht näher eingegangen werden soll.

Der objektorientierte Modus

Wenn Sie diesen Modus nutzen möchten, müssen Sie mindestens ein Objekt deklarieren, mit dem Sie die Funktionen des Moduls aufrufen können. Ihr Script beginnt dann grundsätzlich mit diesen Vorgaben (das ist noch kein vollständiges Script!):

#!/usr/bin/perl -w

use strict;
use CGI;

my $cgi = new CGI;

Der objektorientierte Modus gilt als eleganter und bietet mehr Möglichkeiten, wie etwa das Definieren mehrerer unabhängiger CGI-Objekte im gleichen Script. Deshalb beschränken sich die Beschreibungen und Scriptbeispiele dieses Kapitels auf die objektorientierte Verwendung des CGI-Moduls.

CGI-Modul in Scripts einbinden

Das folgende Beispiel zeigt, wie Sie das CGI-Modul in ein eigenes Perl-Script einbinden und im objektorientierten Stil verwenden können.

Beispiel eines vollständigen CGI-Scripts in Perl (1):

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;

print $cgi->header('text/plain'), "Hallo Welt";

Erläuterung:

Mit use CGI binden Sie das CGI-Modul in Ihr Script ein. Im Beispiel wird zusätzlich noch ein Untermodul namens CGI::Carp eingebunden, genauer, eine bestimmte Funktion daraus, nämlich die Funktion fatalsToBrowser. Beim Entwickeln von CGI-Scripts ist es immer sinnvoll, dies mit einzubinden. Diese Funktion hat zur Folge, dass alle Fehlermeldungen, die der Perl-Interpreter erzeugt, direkt im Browser ausgegeben werden. Und solange Sie in Ihrem Script noch Fehler (bugs) vermuten, ist es überaus nützlich, solche Fehlermeldungen unmittelbar im Browser zu sehen, statt sie sich mühsam aus dem Server-log herausfischen zu müssen. Es wird Ihnen damit beinahe so etwas wie ein Debugging-Modus zur Verfügung gestellt. Hat Ihr Script am Ende der Entwicklungsphase alle Tests fehlerfrei durchlaufen, können Sie diese Zeile auch wieder auskommentieren oder ganz und gar streichen. Im produktiven Einsatz hat sie keine Bedeutung mehr.

Nachdem das CGI-Modul eingebunden ist, wird mit my $cgi = new CGI eine neue Instanz des CGI-Objekts erzeugt. Mit dieser Anweisung sorgen Sie dafür, dass das CGI-Modul objektorientiert verwendet werden kann. Die Objektinstanz der CGI-Klasse ist nun über den Skalar $cgi ansprechbar. Im weiteren Verlauf des Scripts haben Sie über diesen Skalar Zugriff auf alle Funktionen, die das CGI-Modul bereitstellt. Bei objektorientierter Programmierung spricht man dann jedoch nicht mehr von Funktionen, sondern von Methoden.

Der Name des Skalars, der im Beispiel $cgi lautet, ist frei wählbar. Da Sie den Skalar im weiteren Verlauf des Scripts vermutlich sehr oft brauchen, empfiehlt sich ein kurzer Name. Viele Programmierer arbeiten mit einbuchstabigen Namen wie z.B. $q.

Das obige Beispiel gibt ein einfaches "Hallo Welt" aus. Wie immer muss zur Übergabe an einen aufrufenden Browser zuerst ein HTTP-Header erzeugt werden. Das CGI-Modul stellt dafür eine Funktion bzw. Methode namens header() zur Verfügung. Wenn dieser Methode kein Argument mitgegeben wird, erzeugt sie einen HTTP-Header für den Seite MIME-Typ text/html, also für die Ausgabe von HTML-Code. Im obigen Beispiel soll jedoch unformatierter Text gesendet werden. Deshalb wird der Header nicht leer belassen, sondern ihm wird text/plain übergeben.

Am Beispiel des Aufrufs von header() können Sie sehen, wie der Zugriff über den zuvor definierten Skalar funktioniert. Nach dem Schema $Skalar->Methode "zeigen" Sie auf die Methode, und zwar mit dem Skalar, der an eine bestimmte zuvor erzeugte Instanz des CGI-Objekts gebunden wird.

Zum Senden des HTTP-Headers und des auszugebenden "Hallo Welt" wird im Beispiel die übliche Seite print-Funktion von Perl verwendet. Diese Funktion kann ja mehrere durch Komma getrennte Argumente gleichzeitig ausgeben. Im Beispiel gibt sie zuerst den Rückgabewert der Methode header() aus, also den gewünschten HTTP-Header, und danach den Text Hallo Welt.

Beispiel eines vollständigen CGI-Scripts in Perl (2):

#!/usr/bin/perl -w

use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;

print $cgi->header(),
      $cgi->start_html(),
      $cgi->h1('hallo Welt!'),
      $cgi->p('Solche sechs, wie wir fünf sind,
               gibts keine vier mehr, wir drei sind die zwei einzigen ;-)'),
      $cgi->end_html();

Erläuterung:

Wenn Sie die Methode header() so notieren, dass sie "leer" bleibt und der Skalar $cgi darauf "zeigt", wird der Perl-Interpreter im CGI-Modul diejenigen Festlegungen suchen, die es dafür enthält. Das ist in den aktuellen Versionen des CGI-Moduls für Perl 5.8.8 grundsätzlich XHTML 1.0, kann sich aber künftig zu XHTML 2.0 ändern. In diesem Fall bekommen Sie also zwingend den MIME-Typ text/html. Folglich müssen Sie außer dem HTTP-Header dafür sorgen, dass eine vollständige XHTML-Datei einschließlich <head> und <body> erzeugt werden kann. Das erreichen Sie mit $cgi->start_html().

Einfache (X)HTML-Ausgaben mit dem CGI-Modul

Das CGI-Modul stellt Ihnen eigene Methoden zur Verfügung, um (X)HTML-Code zusammenzustellen. Es können (mit wenigen Ausnahmen) für alle HTML-Elemente solche Methoden bereitgestellt werden. Die von HTML her gewohnten spitzen Klammern entfallen, aber allen Elementnamen werden runde Klammern nachgestellt, in denen Sie CSS-Angaben, EventHandler, diverse Attribute bzw. Parameter und natürlich auch den Text, der zuletzt ja im Browser angezeigt werden soll, notieren können. Gibt es nichts, was Sie unbedingt in solche runde Klammern schreiben möchten, können Sie sie auch weglassen.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI -no_xhtml;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;
my $Autor = "der Reiseonkel";
my $Ort = "Cap Ferret";

print $cgi->header(),
      $cgi->start_html({-dtd => '-//W3C//DTD HTML 4.01 Transitional//EN',
                        -title => 'Reisebericht vom '.$Ort})."\n",
      $cgi->h1('Reisebericht vom '.$Ort)."\n",
      $cgi->p('Die größte Sanddüne Europas mit 117m
      Höhe sieht man bei klarem Wetter, wenn man am Ufer des Beckens von
      Arcachon steht. Das '.$Ort.' selbst ist ein kleiner Landzipfel, der
      vor allem aus Ferienhäusern besteht. Austernzucht, Fischerei und
      Wassersport prägen die Atmosphäre im Becken von Arcachon.')."\n",
      $cgi->hr({-noshade => undef, -size => '1'})."\n",
      $cgi->p({-style => 'color:red'}, "Autor: ", $cgi->em($Autor))."\n",
      $cgi->end_html();

Erläuterung:

Zunächst wird das CGI-Modul wie bereits bekannt mit use CGI eingebunden, gleichzeitig sorgt der Parameter -no_xhtml dafür, dass vorerst gar keine Dokumenttyp-Festlegung erfolgt. Um das im objektorientierten Stil zu verwenden, wird dann mit my $cgi = new CGI eine neue Instanz des CGI-Objekts erzeugt. Es gibt aus Demonstrationsgründen noch zwei Variablen, die Ihnen zeigen sollen, dass Sie selbstverständlich auch in Ausgaben, die Sie mit dem CGI-Modul generieren, Variablen nutzen können.

Das Beispiel tut nichts anderes, als eine kleine vollständige HTML-Datei zusammenzustellen. Dazu wird zunächst mit $cgi->header() der HTTP-Header für HTML erzeugt. Dann folgt der HTML-Code. Der HTML-Code wird jedoch nicht wie bisher bekannt mit Hilfe der print-Funktion für einzelne HTML-Elemente geschrieben, sondern durch den Aufruf von Methoden, die das CGI-Modul bereitstellt, erzeugt. Grundsätzlich beginnt die HTML-Ausgabe mit der Methode start_html(), der Sie Parameter für diejenigen Elemente übergeben können, die Sie als Elemente des Headerbereichs kennen. Mit dem Parameter dtd müssen Sie beispielsweise den DTD-Bezeichner festlegen, um das ausgegebene Dokument standardkonform gestalten zu können, falls Sie oben den -no_xhtml-Parameter verwendet haben. Die Methode start_html() kann alle Elemente des Header-Bereichs einer HTML-Datei zur Verfügung stellen, sowie ein öffnendes <body>-tag.

Für alle gängigen HTML-Elemente und HTML-Tags, die Sie innerhalb von <body> verwenden möchten, gibt es solche Methoden. Dabei können Sie entweder das komplette HTML-Element erzeugen, oder auch nur ein Start- oder End-Tag. Die Anweisung $cgi->h1('Reisebericht vom '.$Ort) erzeugt beispielsweise ein komplettes HTML-Element mitsamt Inhalt - und zugleich sehen Sie, dass Sie dort auch Variablen einsetzen können, wie Sie es von Perl ja gewohnt sind. Der erzeugte Code lautet <h1>Reisebericht vom Cap Ferret</h1>. Auf die gleiche Weise funktioniert es mit den anderen HTML-Elementen. $cgi->strong('wichtiger Text') würde beispielsweise den HTML-Code <strong>wichtiger Text</strong> erzeugen. Die Überschrift im Beispiel könnte aber auch folgendermaßen notiert werden:
$cgi->start_h1(),'Reisebericht vom '.$Ort,$cgi->end_h1().
Neben den kompletten Element-Methoden gibt es also auch Methoden, die nur ein einleitendes oder schließendes HTML-Tag erzeugen. $cgi->start_h1() erzeugt nur den HTML-Code <h1>, und $cgi->end_h1() den Code </h1>. Entsprechende Methoden gibt es für alle Elemente, also beispielsweise auch $cgi->start_strong() und $cgi->end_strong().

Die Verwendung solcher Methoden für öffnende und schließende Tags ist dann sinnvoll, wenn die Tags weit auseinanderliegen und sehr viel Inhalt haben. Vor allem bei <html>...</html> ist das natürlich der Fall, dazwischen steht ja der komplette anzuzeigende Inhalt Ihrer Datei. Die Methode $cgi->start_html(), die auch im obigen Beispiel verwendet wird, hat jedoch eine Sonderstellung. Sie erzeugt nicht nur ein einleitendes <html>-Tag, sondern schreibt auch den Standard-Dateikopf der HTML-Datei mit den Elementen head und title sowie einem öffnenden <body>.

Viele einleitende HTML-Tags haben Attribute. Um diese vom Inhalt des Elements zu unterscheiden, bieten die Methoden eine besondere Syntax an. Am obigen Beispiel ist das etwa an der Trennlinie erkennbar. Mit der Anweisung: $cgi->hr({-noshade => undef, -size => '1'}) wird der HTML-Code <hr noshade size="1"> erzeugt. Das Argument, das der Methode übergeben wird, muss dazu in geschweiften Klammern { bzw. } stehen. Jedes Attribut wird durch ein Minuszeichen - eingeleitet. Wertzuweisungen an Attribute werden durch den Operator => vom Attribut getrennt. Mehrere Attribute werden wie im hr-Beispiel innerhalb der geschweiften Klammern durch Kommata getrennt.

Die Methoden zum Erzeugen von HTML-Elementen können auch mehrere Argumente übergeben bekommen. Dabei müssen Sie die Argumente durch Kommata trennen. Ein komplexeres Beispiel sehen Sie an der letzten $cgi->p(...)-Anweisung. Dieser Methodenaufruf übergibt drei Argumente. Das erste Argument ist ein Attribut für das einleitende <p>-Tag, nämlich ein style-Attribut, in dem die Schriftfarbe rot bestimmt wird. Das zweite Argument ist statischer Text, und das dritte Argument zeigt gleich zwei weitere Möglichkeiten: es enthält einen weiteren Aufruf einer Element-Methode, nämlich $cgi->i() für kursiven Text. Und als Argument wird dieser Methode kein statischer Text übergeben, sondern ein Skalar namens $Autor, der weiter oben im Beispiel definiert wird.

Die Argumente erlauben also das bequeme Verschachteln von HTML-Elementen, ebenso wie das Einfügen von variablen Inhalten, die zuvor vom Script ermittelt wurden.

Beachten Sie:

Das Einbinden des CGI-Moduls zwingt Sie keinesfalls dazu, HTML-Code auf diese Weise zu erzeugen. Sie können die HTML-Ausgaben auch direkt mit der print-Funktion erzeugen oder zuvor eingelesene Templates ausgeben. Sie können auch Methodenaufrufe des CGI-Moduls mit herkömmlicher HTML-Code-Erzeugung mischen. Es ist also kein Problem, Mischformen wie diese zu notieren:
print "<hr noshade size='1'>",
      $cgi->p({-style => 'color:red'}, "Autor: <i>$Autor</i>");

Normalerweise werden alle HTML-Elementnamen innerhalb der Methoden klein geschrieben, also z.B. start_div(), end_div() oder div(). Es gibt jedoch ein paar Ausnahmen, um Kollisionen mit gleichnamigen Sprachbestandteilen von Perl zu vermeiden. Die HTML-Elemente Tr, Select, Link und Sub beginnen mit Großbuchstaben, also etwa in einer Anweisung wie $cgi->Sub('tiefgestellter Text').

HTML-Kommentare können Sie mit der Methode comment() setzen. So erzeugt die Anweisung $cgi->comment('derzeit nicht aktuell') den HTML-Code <!-- derzeit nicht aktuell -->.

Erweiterte Ausgaben mit dem CGI-Modul

HTTP-Header können manchmal Zusatzinformationen enthalten, die für die Client-Server-Kommunikation von Bedeutung sind. Und was den HTML-Dateikopf betrifft, so kann dieser ebenfalls wichtige allgemeine Angaben zur HTML-Datei enthalten, z.B. Seite Meta-Tags, Scriptbereiche für CSS oder Javascript, logische Beziehungen oder Attribute zur Seitengestaltung im einleitenden <body>-Tag (die zwar zulässig und noch nicht einmal "deprecated" sind, trotzdem aber besser mit CSS bestimmt werden sollten).

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;

print $cgi->header(-type    =>'text/html',
                   -expires =>'+1h'),
      $cgi->start_html(-title  =>'Testseite mit Link',
                       -author =>'beispiel@example.org',
                       -base   =>'true',
                       -target =>'_blank',
                       -meta   =>{'keywords'   =>'TeamOne, Test',
                                  'description'=>'ein kleiner Test mit einem Link'},
                       -style  =>{'src'=>'/styles/formate.css'},
                       -BGCOLOR=>'#FFFFCC',
                       -TEXT   =>'#000000',
                       -LINK   =>'red',
                       -VLINK  =>'blue',
                       -ALINK  =>'black'),
      $cgi->p('ein kleiner Test mit einem ',
              $cgi->a({-href => 'http://www.selfhtml.org/'},'Link auf selfhtml.org')),
      $cgi->end_html();

Erläuterung:

Das Script bindet mit use CGI das CGI-Modul ein. Da kein Parameter zur Modifizierung der Dokumenttyp-Deklaration angegeben ist, wird standardmäßig XHTML 1.0 generiert werden. Das Script erzeugt dann mit my $cgi = new CGI eine neue Instanz des CGI-Objekts. Bei der nach oben HTML-Ausgabe, die es anschließend zusammenstellt, nutzt es verschiedene Möglichkeiten, um den HTTP-Header und die Daten im Kopf der HTML-Datei zu beeinflussen.

Sowohl der Methode header() zum Erzeugen des HTTP-Headers als auch der Methode start_html() zum Erzeugen des HTML-Dateikopfes können Sie mehrere Argumente übergeben. Beide Methoden kennen jeweils ein Standardargument: bei header() ist dies der MIME-Typ, und bei start_html() der Inhalt des title-Elements. Deshalb können Sie diese Argumente ohne weiteres direkt angeben, also etwa in der Form header('text/plain') oder start_html('Text des Titels'). Bei Angabe von mehreren und weiteren Argumenten sollten Sie jedoch die oben gezeigte Syntax verwenden. Dabei besteht jedes Argument aus einem Parameternamen, eingeleitet durch ein Minuszeichen -, einem Zeigeoperator => und dem gewünschten Wert.

Argumente beim HTTP-Header

Die folgende Tabelle zeigt Ihnen, welche Angaben zum HTTP-Header Sie notieren können. Die Code-Beispiele der linken Spalte stellen nur den reinen Methodenaufruf von header() dar.

Aufrufbeispiel | Erläuterung
header(-type=>'image/gif'); | Mit -type können Sie den MIME-Typ des nachfolgenden Datenstroms bestimmen. Im Beispiel können Sie anschließend die binären Daten einer GIF-Grafik ausgeben (dazu vorher gegebenenfalls die Funktion Seite binmode aufrufen!)
header(-status=>'204 No response'); | Mit -status können Sie eine HTTP-Statusmeldung an den Browser senden. Mit der Beispielanweisung (HTTP-Status 204) können Sie die Ausgabe weiterer Daten an den Browser verweigern. Beim Anwender bleibt die zuletzt angezeigte Seite am Bildschirm stehen. Sinnvoll beispielsweise, wenn der Anwender durch Klick auf einen Link ein Voting-Script anstößt, das ihn aber nicht am sofortigen Weiterlesen der Seite hindern soll.
print $cgi->header(-expires=>'+120s'); | Mit -expires können Sie bewirken, dass der Browser die HTML-Ausgabe für einen Mindestzeitraum in seinen Cache-Speicher übernimmt. Bei einem Reload der ausgegebenen Seite innerhalb des angegebenen Zeitraums ruft der Browser dann nicht mehr das Script auf, sondern holt den HTML-Code aus seinem Cache. Den Zeitraum geben Sie als Zahl mit voranstehendem Pluszeichen und einem nachgestellten Buchstaben für die Zeiteinheit an. Die Angabe '+30s' im Beispiel bedeutet "HTML-Code 30 Sekunden im Cache halten". Andere Zeiteinheiten sind m (Minuten), h (Stunden), d (Tage), M (Monate) und y (Jahr). Darüber hinaus sind absolute Zeitangaben im UTC-Format erlaubt, wie z.B. Friday, 08-Jun-2001 11:29:00 GMT+0100.
print $cgi->header(-cookie=>$Cookie); | Mit -cookie können Sie einen Cookie aktivieren. Mehr dazu im Abschnitt nach unten Cookies verwalten mit dem CGI-Modul.
print $cgi->header(-nph=>1); | Mit diesem Befehl können Sie so genannte NPH-Scripts schreiben. NPH steht für no-parsed-header und bedeutet, dass das CGI-Script die nachfolgenden Daten direkt an den aufrufenden Browser sendet, ohne dass der Webserver etwas davon mitbekommt. Dies kann zu Performance-Gewinnen führen, und in einigen Fällen, etwa beim Einsatz des Microsoft IIS-Webservers, ist es sogar vorgeschrieben, den NPH-Modus zu verwenden.

Dokumenttyp-Deklarationen (DTD)

Standardmäßig verwendet das CGI-Modul, wie bereits angedeutet, XHMTL 1.0 Transitional. Das heißt, Sie finden eine Dokumenttyp-Angabe im generierten XHTML-Dokument grundsätzlich in dieser Form vor:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">

Nun kann es aber durchaus Gründe geben, weshalb Sie eine andere DTD einsetzen möchten - beispielsweise möchten Sie vielleicht ein Frameset erzeugen oder müssen auf HTML 4.01 bestehen. Dann können Sie das CGI-Modul dazu zwingen, gar keine Vorgabe zu machen, indem Sie es in der Form use CGI -no_xhtml; in Ihr Script einbinden. Das bedeutet zugleich, dass Sie dann an anderer Stelle eine entsprechende Deklaration vornehmen müssen. Dazu stellt Ihnen das CGI-Modul für die Methode $cgi->start_html() den Parameter -dtd zur Verfügung, den Sie in dieser Form notieren können:

$cgi->start_html(-dtd > '-//W3C//DTD HTML 4.01 Strict//EN');

Die folgende Liste enthält einige Documenttyp-Deklarationen, die Sie bei Bedarf wählen können:

  • '-//W3C//DTD HTML 4.01//EN'
  • '-//W3C//DTD HTML 4.01 Transitional//EN'
  • '-//W3C//DTD HTML 4.01 Frameset//EN'
  • '-//W3C//DTD XHTML 1.0 Strict//EN'
  • '-//W3C//DTD XHTML 1.0 Transitional//EN'
  • '-//W3C//DTD XHTML 1.0 Frameset//EN'
  • '-//W3C//DTD XHTML 1.1//EN'
  • '-//W3C//DTD HTML 3.2//EN'
  • '-//W3C//DTD HTML 2.0//EN'

Sie sehen, dass Sie nicht die gesamte (dreizeilige) Deklaration notieren müssen. Das CGI-Modul ergänzt die fehlenden Angaben, so dass in Ihrer vom Script generierten HTML-Ausgabe immer die vollständige Dokumenttyp-Deklaration zu finden sein wird. Denken Sie daran, dass von der Wahl der für Ihr Seitenprojekt zutreffenden DTD unter anderem abhängt, welche HTML-Elemente Sie überhaupt verwenden dürfen und wie sie auszusehen haben, um validen HTML-Code zu generieren.

Argumente beim HTML-Dateikopf

Die folgende Tabelle listet auf, welche Angaben Sie zum HTML-Dateikopf notieren können. Die Code-Beispiele der linken Spalte stellen nur den reinen Methodenaufruf von start_html() dar.

Aufrufbeispiel | Erläuterung
start_html(-title=>'Titeltext'); | Mit -title bestimmen Sie den Seite Titel der HTML-Ausgabe. Das Beispiel erzeugt den folgenden HTML-Code: <TITLE>Titeltext</TITLE>
start_html(-author=>'beispiel@example.org'); | Mit -author erzeugen Sie eine Seite logische Beziehung zu einer E-Mail-Adresse. Das Beispiel erzeugt folgenden HTML-Code: <LINK REV=MADE HREF="mailto:beispiel%40example.org">
start_html(-base=>'http://example.org/'); | Mit -base bestimmen Sie die Seite Basisadresse der ausgegebenen HTML-Seite. Das Beispiel erzeugt folgenden HTML-Code: <BASE HREF="http://example.org/">
start_html(-target=>'dataframe'); | Mit -target bestimmen Sie den Seite Basis-Fensternamen für Links in der HTML-Ausgabe. Das Beispiel erzeugt folgenden HTML-Code: <BASE TARGET="dataframe">
start_html(-meta=>{'keywords'=>'HTML,CSS'}); | Mit -meta können Sie Meta-Angaben notieren - jedoch nur solche, die in HTML vom Typ name sind, nicht solche, die vom Typ http-equiv sind. Mehrere Meta-Angaben gleichzeitig sind erlaubt. Jede einzelne Meta-Angabe muss in geschweiften Klammern stehen. Innerhalb der geschweiften Klammern folgt zunächst der Wert, der in HTML dem name-Attribut zugewiesen würde, gefolgt von dem Operator => und dem Wert, den Sie in HTML dem content-Attribut zuweisen würden. Das Beispiel erzeugt folgenden HTML-Code: <META NAME="keywords" CONTENT="HTML,CSS">
start_html(-BGCOLOR=>'#000000'); | Mit allen anderen Argumenten, die mit einem Minuszeichen beginnen und keinen der anderen reservierten Namen wie -title oder -meta haben, bestimmen Sie Attribute, die ins einleitende <body>-Tag eingefügt werden. Das Beispiel erzeugt folgenden HTML-Code: <BODY BGCOLOR="#000000">

Formularverarbeitung mit dem CGI-Modul

In der Regel werden CGI-Scripts von HTML-Formularen über das action-Attribut innerhalb des Formulars aufgerufen (es gibt auch andere Möglichkeiten, beispielsweise über Seite SSI). Typischerweise sieht ein HTML-Formular so ähnlich aus wie im folgenden Beispiel.

Beispiel: HTML-Datei mit CGI-Aufruf

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kommentarseite</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Ihr Kommentar</h1>
<form action="/cgi-bin/comments.pl" method="post">
<p>Name:<br><input size="40" maxlength="40" name="AnwenderName"></p>
<p>Text:<br><textarea rows="5" cols="50" name="Kommentartext"></textarea></p>
<p><input type="submit" value="Absenden"></p>
</form>
</body>
</html>

Beispiel: vollständiges CGI-Script (comments.pl) mit HTML-Ausgabe

#!/usr/bin/perl -w

use strict;
use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;
my @Feldnamen = $cgi->param();

print $cgi->header(),
      $cgi->start_html('CGI-Feedback'),
      $cgi->h1('CGI-Feedback vom Programm ',$cgi->i('comments.pl'));
      foreach my $Feld (@Feldnamen) {
        print $cgi->strong('Feldname: '),
              $Feld,
              $cgi->strong(', Inhalt: '),
              $cgi->param($Feld), "<br>";
      }
print $cgi->end_html();

Erläuterung:

Sobald Sie den "submit"-button dieses Formulars mit der Maus anklicken, wird Ihr Browser angewiesen, sich erneut an den Webserver mit einer Anfrage zu wenden. Die Art dieser Anfrage bestimmt das Attribut method, dessen Wert in den meisten Fällen post lauten wird. Mit dem Attribut action informiert das Formular den Webserver, was er tun soll - es muß ja nicht unbedingt ein Perl-Script sein, das der Server um Übernahme und Weiterverarbeitung der von Ihnen eingegebenen und vom Browser ebenfalls übermittelten Daten bitten soll. Auch ein PHP-Script, ein Shell-Script, eine ausführbare Datei (*.exe), eine Stapelverarbeitungsdatei (*.bat) oder ein anderer Programmaufruf kann von action initialisiert werden. In diesem Fall ist es jedoch das Perl-Script comments.pl, das einfach die übergebenen Daten sortiert, auswertet und als HTML wieder zurückliefert.

Die Bezeichnung "Formularverarbeitung" ist zwar üblich, aber streng genommen nicht ganz korrekt. Es ist ja keineswegs das Formular, das verarbeitet wird, sondern es handelt sich um diejenigen Daten, die Sie in bestimmte Eingabefelder eingetragen haben: Namen, Adressen, Texte usw. Entsprechend der im Formular angegebenen Übermittlungsmethode (POST oder GET, andere HTTP-Zugriffsmethoden wie PUT oder DELETE spielen hier keine Rolle) schickt der Browser nach Aktivierung eines "submit"-buttons oder nach dem Drücken der Enter-Taste einen Seite Datenstrom an den Webserver. Der Webserver entscheidet, was er damit machen soll und schickt alles an den Perl-Interpreter, der wiederum das CGI-Modul fragt, wie er den ganzen Datenstrom auftrennen und in sinnvolle Einzelinformationen umwandeln soll. Das CGI-Modul stellt ihm dafür die Methode param() zur Verfügung. Mit dieser Methode werden, falls vorhanden, die Teile des übermittelten Datenstroms als Array gespeichert. Und diesen Array kann Ihr Script nun beliebig verwenden.

Die Methode param()

Bei der Methode param kommt es darauf an, in welchem Kontext sie aufgerufen wird. Dementsprechend unterschiedlich ist ihr Rückgabewert. Sie können zum Beispiel ein Array @Feldnamen = $cgi->param() notieren. Es handelt sich dann also um einen Listenkontext, d.h. erwartet wird eine Liste als Rückgabewert. Bei dieser Art des Aufrufs liefert param() sämtliche Feldnamen eines eingelesenen Formulars zurück. Das sind jene Namen, die im HTML-Formular bei der Definition der Formularfelder jeweils mit dem Attribut name festgelegt wurden. Wenn param() ein einzelner Feldname als Parameter übergeben wird, liefert die Methode den zugehörigen Wert oder Inhalt des Feldes zurück. Der Kontext ist dann skalar.

Die folgende Tabelle fasst die Aufrufmöglichkeiten von param() zusammen.

Aufrufbeispiel | Rückgabewert | Erläuterung
if($cgi->param()) | Liste, im booleschen Kontext ausgewertet (true oder false) | Ein solcher Aufruf in Form einer if-Bedingung ermittelt, ob überhaupt Daten an das Formular übergeben wurden oder nicht. Dies ist sinnvoll, wenn ein Script aus mehreren verschiedenen Kontexten heraus aufgerufen werden kann und erst einmal feststellen muss, ob es Formulardaten erhalten hat oder nicht. Im if-Zweig könnten die Formulardaten eingelesen werden, und im else-Zweig könnten Anweisungen stehen für den Fall, dass keine Formulardaten übergeben wurden.
$Wert = $cgi->param('AnwenderName') | Skalar | Gibt den Wert oder Inhalt des Formularfeldes mit dem Namen AnwenderName zurück. Diese Form der Notation ist sinnvoll, wenn Sie als Script-Autor die Feldnamen übergebener Formulardaten kennen und direkt den Wert oder Inhalt des jeweiligen Feldes ermitteln möchten.
@Namen = $cgi->param() | Liste | Gibt sämtliche Feldnamen des Formulars zurück.
$cgi->param($Namen[2]) | Skalar | Gibt den Wert oder Inhalt des dritten Formularfeldes zurück ($Namen[0] wäre das erste Formularfeld), sofern zuvor mit @Namen = $cgi->param() die Feldnamen als Liste gespeichert wurden.
@Zutaten = $cgi->param('Zutat') | Liste | Gibt den Wert oder Inhalt einer Formularfeldgruppe mit gleichen Namen zurück zurück - vor allem bei Checkboxen in HTML-Formularen ist diese Aufrufvariante wichtig. In der Liste @Zutaten stehen anschließend alle Zutaten, die ein Anwender in Checkbox-Elementen mit dem Attribut name="Zutat" angekreuzt hat.

Beachten Sie:

Die Darstellung der Methode param() ist ein hervorragend geeignetes Beispiel, um Ihnen etwas detaillierter zu zeigen, was das CGI-Modul für Sie erledigt. In vielen älteren Perl-Scripts, die Sie im Internet finden können (und auch in älteren Versionen dieser Kapitel SELFHTML-Seite, die Sie sich im Kapitel Archiv anschauen können), sehen Sie beispielsweise solche kryptisch wirkende Anweisungen:

if($ENV{'REQUEST_METHOD'} eq 'GET') {
  $Daten = $ENV{'QUERY_STRING'}
}
else {
  read(STDIN, $Daten, $ENV{'CONTENT_LENGTH'});
}
sub verarbeiten {
@Formularfelder = split(/&/, $Daten);
foreach $Feld (@Formularfelder) {
  ($name, $value) = split(/=/, $Feld);
  $value =~ tr/+/ /;
  $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
  $Formular[$i] = $name;
  $i = $i + 1;
  $Formular[$i] = $value;
  $i = $i + 1;
 }
}

Solche Anweisungen müßten Sie, wenn Sie Formulardaten verarbeiten möchten, erneut in Ihrem Script notieren, wenn Sie auf das CGI-Modul verzichten wollten. Das CGI-Modul nimmt Ihnen nun diese Arbeit ab, da es (in geringfügig anderer Form) genau diese Anweisungen bereits enthält und dem Perl-Interpreter deren Ergebnisse in einer Form zur Verfügung stellt, die es Ihnen wiederum erlaubt, sie einfach mit der Benutzung der Methode param() abzurufen. Beispielsweise könnten Sie so etwas in Ihrem Script notieren:

print $cgi->p('Ihr Name ist: '.$cgi->param('AnwenderName'));

Damit würde die Methode param() im skalaren Kontext aufgerufen und der im oben schematisch dargestellten HTML-Formular eingetragene Name des Formularbenutzers ausgegeben. Im oben dargestellten Beispielscript comments.pl wird die Methode param() allerdings im Listenkontext verwendet, daher müssen Sie in diesem Script die Array-Bestandteile erst mit einer foreach-Schleife "individualisieren", um sie ausgeben zu können. Ein solcher Listenkontext ist dann nützlich, wenn das Script von unterschiedlichen Formularen verwendet wird, die unterschiedlich viele Eingabefelder mit unterschiedlichen Namen enthalten. In einem solchen Fall weiß das Script (bzw. wissen Sie als Programmierer) nicht von vornherein, welche Daten im Datenstrom enthalten sind und als HTML zurückgeliefert werden sollen; $cgi->param('AnwenderName') könnte auch leer (nicht existent) sein und es könnten andere name-Attribute mit Werten belegt worden sein. Wenn Sie param() im Listenkontext verwenden, vermeiden Sie mögliche Fehler.

Formularerstellung

Wenn Sie sich intensiver mit Perl beschäftigen und das CGI-Modul ausgiebig nutzen, werden Sie vermutlich kein statisches HTML-Dokument zum Aufruf einer Formularauswertung einsetzen, sondern dieses Formular auch gleich selbst von Ihrem Script generieren lassen. Das hat verschiedene Vorteile: Sie können beispielsweise in Abhängigkeit von nach unten Umgebungsdaten Umgebungsdaten, die Sie zuvor ermitteln, Formularfelder mit Werten vorbelegen. Ausserdem füllt das CGI Modul diese Felder automatisch, wenn Sie das Formular, z.b. nach einer Fehleingabe, wieder mit den eingegebenen Werten ausgefüllt anzeigen lassen wollen (dieses Verhalten ist manchmal nicht erwünscht und kann bei Bedarf durch den Parameter -override => 1 unterdrückt werden).

Beispiel eines vollständigen CGI-Scripts in Perl

#!/usr/bin/perl -w

use strict;
use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;

print $cgi->header();
if ($cgi->param('absenden')) {
   print $cgi->start_html(-title=>'Auswertung');
   anzeige($cgi);
} else {
   print $cgi->start_html(-title=>'Testformular');
   formular($cgi);
}
print $cgi->end_html();

sub formular{
    print $cgi->start_form().
          $cgi->table({-border => 1},
             $cgi->Tr([
                $cgi->td([
                   $cgi->strong('Name : ').
                   $cgi->textfield(-name =>'name', -size => 40)
                ]),
                $cgi->td([
                   'E-Mail : '.
                   $cgi->textfield(-name =>'mail', -size => 40)
                ]),
                $cgi->td([
                   $cgi->strong('Text : ').
                   $cgi->textarea({-name =>'text', -columns =>50, -rows =>5})
                ]),
                $cgi->td([
                   $cgi->submit(-name => 'absenden', -value =>'absenden').
                   $cgi->reset(-value =>'verwerfen')
                ])
             ])
           ).
          $cgi->end_form();
}

sub anzeige{
    print $cgi->h2('hier kommt die Auswertung');

      if (!$cgi->param('name') && !$cgi->param('text')) {
         print $cgi->strong(q~Sie haben nichts eingegeben.
         Bitte wiederholen Sie Ihre Eingabe~);
         return formular($cgi);
      }
      if ($cgi->param('name')) {
         print $cgi->strong('Ihr Name ist: '.$cgi->param('name')),
         $cgi->br;
      }
      if ($cgi->param('mail')) {
         print $cgi->strong('Ihre mail ist: '.$cgi->param('mail')),
         $cgi->br;
      }
      if ($cgi->param('text')) {
         print $cgi->strong('Ihre Nachricht: ' .$cgi->param('text')),
         $cgi->br;
      }
}

Erläuterung:

Wie immer in den hier vorgestellten Beispielen wird zunächst das CGI-Modul eingebunden und danach mit my $cgi = new CGI eine neue Instanz des CGI-Objekts erzeugt. Es folgt jedoch nicht unmittelbar die Ausgabe von HTML-Code, sondern eine Seite bedingte Anweisung. Das Script entscheidet anhand eventuell vorhandener POST-Variablen, welche der beiden Seite Subroutinen es abarbeiten soll. Findet es keine POST-Variable mit dem Wert "absenden" (auch der "submit"-button sendet einen Wert für eine POST-Variable), so ruft es die Subroutine "anzeige" auf, die ein vollständiges HTML-Formular zur Verfügung stellt. Wurde dieses Formular bereits ausgefüllt, existieren aber POST-Variablen, also befolgt das Script dann die Festlegungen der ersten Subroutine und liefert dem Webserver Angaben zur Darstellung der eingegebenen Werte zurück.

Beachten Sie:

Für das Script wird der objektorientierte Modus verwendet. Bisher haben Sie an den vorgestellen Scriptbeispielen gesehen, dass HTML-Elemente in diesem Modus von Methoden eines CGI-Objekts dargestellt werden. Aber auch Subroutinen sind in diesem Modus nichts anderes als Objektmethoden. Sie erkennen es an der Art, in der die im Script enthaltene bedingte Anweisung entscheidet, welche Subroutine aufgerufen werden soll: formular($cgi);.

Umgebungsdaten ermitteln mit dem CGI-Modul

Häufig benötigt ein CGI-Script Informationen über seine Umgebung, z.B. über den Server, den aufrufenden Browser, oder über seinen eigenen Speicherort auf dem Server. Das CGI-Modul stellt zum Ermitteln solcher Daten verschiedene Methoden bereit.

Beispiel eines vollständigen CGI-Scripts in Perl:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf des Scripts ist eine Internet-Verbindung erforderlich)

#!/usr/bin/perl -w

use strict;
use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;

print $cgi->header(),
      $cgi->start_html('Umgebungsdaten'),
      $cgi->start_table({-border => '1'}),
        $cgi->Tr($cgi->th({-align => 'right'},'Script-URI:'),
                 $cgi->td($cgi->url(-full => 1))),
        $cgi->Tr($cgi->th({-align => 'right'},'relative Script-URI:'),
                 $cgi->td($cgi->url(-relative => 1))),
        $cgi->Tr($cgi->th({-align => 'right'},'Server-Software:'),
                 $cgi->td($cgi->server_software())),
        $cgi->Tr($cgi->th({-align => 'right'},'Browser-Software:'),
                 $cgi->td($cgi->user_agent())),
      $cgi->end_table(),
      $cgi->end_html();

Erläuterung:

Das Beispielscript bindet zunächst mit use CGI das CGI-Modul ein und erzeugt mit my $cgi = new CGI eine neue Instanz des CGI-Objekts. Anschließend gibt es HTML-Code zur Übermittlung an den aufrufenden Browser aus, hier ist es eine Tabelle mit ein paar Umgebungsinformationen. Die nach oben HTML-Ausgaben werden mit Hilfe der Methoden des CGI-Moduls und deren Regeln realisiert. Die ausgegebene Tabelle listet in der linken Spalte in einem th-Element jeweils auf, welche Information die Zeile enthält, und in der rechten Spalte in einem td-Element den zugehörigen Wert. Dieser Wert wird jeweils mit Methoden des CGI-Moduls ermittelt. So wird mit $cgi->url(-full => 1) beispielsweise der URI des Scripts ermittelt.

Die folgende Tabelle listet verfügbare Methoden für Umgebungsdaten auf. Die Aufrufbeispiele gehen davon aus, dass mit my $cgi = new CGI eine Instanz des CGI-Objekts erzeugt wurde. Die Tabelle ist nach Methodennamen alphabetisch sortiert.

Methode | Rückgabewert | Erläuterung
$cgi->Accept() | Liste | Ermittelt eine Liste der Seite MIME-Typen, die der aufrufende Browser akzeptiert. Dies ist interessant abzuprüfen, bevor ein Script Daten eines nicht selbstverständlichen MIME-Typs an den Browser senden will. Es kann sein, dass die Liste nur aus einem Element mit dem Wert */* besteht. Dann akzeptiert der aufrufende Browser potentiell alle MIME-Typen.
$cgi->auth_type() | Skalar | Ermittelt den Typ der Benutzer-Authentifizierung, sofern das Script zugangsgeschützt und nur durch Eingabe entsprechender Zugangsdaten aufrufbar ist.
$cgi->path_info() | Skalar | Ermittelt zusätzliche, wie weitere Unterverzeichnisse notierte Angaben. Wenn das Script beispielsweise die Adresse http://meine.seite.net/cgi-bin/test.pl hat, aber mit http://meine.seite.net/cgi-bin/test.pl/querys/musicbase.sql aufgerufen wird, dann ermittelt dieser Befehl den Anteil /querys/musicbase.sql. Beachten Sie, dass Aufrufe dieser Art nicht von allen Webservern korrekt verarbeitet werden.
$cgi->path_translated() | Skalar | Ermittelt wie $cgi->path_info() zusätzliche, wie weitere Unterverzeichnisse notierte Angaben, jedoch mit dem Unterschied, dass nicht der Anteil aus dem URI zurückgegeben wird, sondern der vom Webserver übersetzte Datenpfad dieses Anteils. Angenommen, das Script hat die Adresse http://meine.seite.net/cgi-bin/test.pl, wurde aber mit http://meine.seite.net/cgi-bin/test.pl/querys/musicbase.sql aufgerufen. Dann könnte der zusätzliche Adressanteil /querys/musicbase.sql aus Sicht des Webservers beispielsweise in einen physikalischen Pfadnamen wie /usr/web/seite/querys/musicbase.sql aufgelöst werden. Diesen Pfadnamen würde $cgi->path_translated() zurückgeben.
$cgi->referer() | Skalar | Ermittelt den URI der im Browser angezeigten Seite, von der aus das CGI-Script aufgerufen wurde. Ein solcher Wert lässt sich dann ermitteln, wenn das Script über ein abgesendetes Formular oder über einen Link aufgerufen wurde.
$cgi->remote_host() | Skalar | Ermittelt den Internetzugangs-Domainnamen (falls verfügbar) oder die Zugangs-IP-Adresse des aufrufenden Browsers.
$cgi->remote_user() | Skalar | Ermittelt den Benutzernamen, mit dem sich der aufrufende Benutzer angemeldet hat, um das CGI-Script aufzurufen. Wenn das Script beispielsweise htaccess-geschützt ist, muss sich der aufrufende Benutzer mit Benutzernamen und Passwort anmelden. Der dabei eingegebene Benutzername kann mit diesem Befehl ermittelt werden.
$cgi->request_method() | Skalar | Ermittelt die HTTP-Methode, mit der das CGI-Script aufgerufen wurde, gibt also üblicherweise GET oder POST zurück.
$cgi->script_name() | Skalar | Ermittelt den absoluten HTTP-Pfad des CGI-Scripts. Bei einem Script mit der Adresse http://meine.seite.net/cgi-bin/test.pl würde also /cgi-bin/test.pl ermittelt. Dieser Wert eignet sich sehr gut für weitere Selbstaufrufe des Scripts, etwa bei mehrseitigen Anwendungen wie Bestellvorgängen.
$cgi->server_name() | Skalar | Ermittelt den Namen des Server-Rechners, auf dem das CGI-Script läuft. Normalerweise ist dies der eingetragene Hostname des Rechners.
$cgi->server_software() | Skalar | Ermittelt den Namen und die Versionsnummer der Webserver-Software auf dem Server-Rechner.
$cgi->url(-full => 1) | Skalar | Ermittelt die vollständige Adresse des CGI-Scripts, aber ohne eventuell mit übergebene Parameter.
$cgi->url(-path => 1) | Skalar | Ermittelt zusätzliche, wie weitere Unterverzeichnisse notierte Angaben. Wenn das Script beispielsweise die Adresse http://meine.seite.net/cgi-bin/test.pl hat, aber mit http://meine.seite.net/cgi-bin/test.pl/data/musicbase aufgerufen wird, dann ermittelt dieser Befehl den Anteil /data/musicbase. Beachten Sie, dass Aufrufe dieser Art nicht von allen Webservern korrekt verarbeitet werden.
$cgi->url(-query => 1) | Skalar | Ermittelt die vollständige eigene Adresse des CGI-Scripts inklusive übergebener Parameter. Bei Aufrufen wie http://meine.seite.net/cgi-bin/test.pl?user=Heino&wunsch=Volksmusik wird also auch der Teil hinter dem Fragezeichen mit zurückgegeben.
$cgi->url(-relative => 1) | Skalar | Ermittelt den relativen HTTP-Pfad des CGI-Scripts aus Sicht des aktuellen Arbeitsverzeichnisses.
$cgi->url_param() | Liste | Ermittelt eine Liste aller Parameternamen, sofern Parameter übergeben wurden. Bei einem Script-Aufruf wie http://meine.seite.net/cgi-bin/test.pl?user=Heino&wunsch=Volksmusik wird also eine Liste mit den beiden Elementen user und wunsch ermittelt
$cgi->url_param('wunsch') | Skalar | Ermittelt den Wert eines dem Script übergebenen Parameter namens wunsch. Bei einem Script-Aufruf wie http://meine.seite.net/cgi-bin/test.pl?user=Heino&wunsch=Volksmusik wird also Volksmusik ermittelt.
if($cgi->url_param()) | Liste, im booleschen Kontext ausgewertet | Ermittelt, ob dem Script über den URI irgendwelche Daten übergeben wurden. Im if-Zweig könnten Anweisungen stehen, die auf diesen Fall reagieren, während im else-Zweig davon ausgegangen werden kann, dass keine Parameter übergeben wurden.
$cgi->user_agent() | Skalar | Ermittelt die Bezeichnung, mit der sich der aufrufende Browser dem Server gegenüber ausgewiesen hat. Typische ermittelte Werte sind solche wie Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) (für den Internet Explorer 6.0).
$cgi->user_name() | Skalar | Ermittelt den Namen des aufrufenden Benutzers mit Hilfe verschiedener Abfragen. Moderne Browser verhindern allerdings ein Ausspionieren dieser Daten.
$cgi->virtual_host() | Skalar | Ermittelt den Domainnamen, mit dem der Browser das CGI-Script aufgerufen hat.

Beachten Sie:

Diese Umgebungsdaten sind nicht dasselbe, was Sie eventuell als Seite CGI-Umgebungsvariablen kennen. Sondern es sind Variablen, die zur Laufzeitumgebung Ihres Scripts gehören. In vielem allerdings ähneln sie den Umgebungsvariablen der CGI-Schnittstelle. Aber Sie können sich natürlich auch mit Hilfe des CGI-Moduls ein kleines Script zusammenstellen, das Ihnen eine Übersicht der CGI-Umgebungsvariablen liefert.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;

print $cgi->header(),
      $cgi->start_html('Umgebungsvariablen'),
      $cgi->h1('Umgebungsvariablen'),
      $cgi->start_table(-border => '1')."\n",
        $cgi->Tr($cgi->th({-bgcolor => '#E0E0E0'},'Variablenname')."\n",
                 $cgi->th({-bgcolor => '#E0E0E0'},'Wert'))."\n";
foreach(keys(%ENV)) {
  print $cgi->Tr($cgi->td($cgi->strong($_)),
                 $cgi->td($ENV{$_}))."\n";
}
print $cgi->Tr($cgi->th({-align => 'left', -bgcolor => '#E0E0E0', -colspan => '2'},
                         'insgesamt '.scalar keys(%ENV).' Umgebungsvariablen'))."\n",
      $cgi->end_table(),
      $cgi->end_html();

Erläuterung:

Dieses zweite Beispielscript ist so ähnlich wie das erste aufgebaut. Auch hier wird eine Tabelle erzeugt. Aber es werden nicht bestimmte Umgebungsvariablen nach ihrem Wert gefragt, sondern es werden mit Hilfe einer foreach-Schleife alle ermittelbaren CGI-Umgebungsvariablen mitsamt der ihnen zugehörenden Werte in jeweils einer Tabellenzelle dargestellt.

Cookies verwalten mit dem CGI-Modul

Cookies sind kleine Informationseinheiten in Form von Textdateien, die eine Webseite auf dem Rechner des aufrufenden Anwenders speichern kann. Das Speichern und Verwalten wird dabei vom Browser des Anwenders kontrolliert (Sie können festlegen, ob Ihr Browser Cookies annehmen darf oder nicht). Cookies erlauben es, anwender-individuelle Informationen wie den Zeitpunkt des letzten Besuchs, angeklickte Angebote oder auch login-Daten (das wird beispielsweise von diversen PHP-Boards gern genutzt) zu speichern und beim nächsten Aufruf wieder auszulesen. Das CGI-Modul unterstützt das Setzen und Lesen solcher Cookies.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;
my $CTIME_String = localtime(time);
my $altCookie = $cgi->cookie(-name=>'letzter_Besuch');
my $neuCookie = $cgi->cookie(-name=>'letzter_Besuch',
                            -value=>$CTIME_String,
                            -expires=>'+3M',
                            -path=>'/');

print $cgi->header(-cookie=>$neuCookie),
  $cgi->start_html("Cookie-Test"),
  $cgi->p("<b>Ihr letzter Besuchszeitpunkt dieser Seite war</b>: ", $altCookie || 'unbekannt'),
  $cgi->p("<b>Als neuer Besuchszeitpunkt wurde gespeichert</b>: ", $CTIME_String),
  $cgi->end_html();

Erläuterung:

Das Beispielscript verwendet einen Cookie, mit dessen Hilfe es den letzten Aufrufzeitpunkt ermitteln kann und den aktuellen Aufrufzeitpunkt als neuen letzten speichert. Zur Kontrolle erzeugt es eine nach oben HTML-Ausgabe, in der dem Besucher der eingelesene alte Aufrufzeitpunkt und der neu gespeicherte Aufrufzeitpunkt mitgeteilt wird. Dazu bindet das Script zunächst mit use CGI das CGI-Modul ein und erzeugt mit my $cgi = new CGI eine neue Instanz des CGI-Objekts. Mit Seite localtime(time) ermittelt es den aktuellen Zeitpunkt und speichert den Wert im Skalar $CTIME_String. Das Lesen und Setzen des Cookies steuert die Methode cookie() des CGI-Moduls. Über den Skalar $cgi, der an das erzeugte CGI-Objekt gebunden ist, greift das Script mit $cgi->cookie() auf die Methode zu.

Die Methode cookie() erwartet Argumente. Je nachdem, welche Argumente ihr übergeben werden, liest sie einen vorhandenen Cookie oder definiert einen neuen. Alle Argumente bestehen aus einem Argumentnamen und einem Wert. Der Argumentname beginnt mit einem Minuszeichen -. Hinter dem Argumentnamen folgt der Operator => und dahinter die Angabe des gewünschten Wertes.

Zum Lesen genügt es, das Argument -name anzugeben. Ist ein Cookie mit diesem Namen vorhanden, dann liefert der Aufruf von cookie() dessen Wert zurück. Genau das geschieht im ersten Aufruf des obigen Beispiels. Der zurückgegebene Wert wird dort im Skalar $altCookie gespeichert. Im Beispiel hat das Cookie den Namen letzer_Besuch.

Zum Setzen eines Cookies müssen Sie mindestens zwei Argumente an cookie() übergeben, nämlich die Argumente -name und -value. Bei -value geben Sie an, welcher Wert gespeichert werden soll. Im obigen Beispiel ist das der Inhalt des zuvor errechneten Skalars $CTIME_String. Durch die Angabe von -value wird das Cookie aber noch nicht gesetzt. Dies geschieht erst beim Senden eines HTTP-Headers an den aufrufenden Browser. Dazu wird zunächst der Rückgabewert des Aufrufs von cookie() gespeichert, und zwar im Skalar $neuCookie. Dieser Skalar wird dann beim HTTP-Header, den Sie mit der Methode header() an den Browser senden, im Argument -cookie als Wert gesendet, so wie im obigen Beispiel gezeigt.

Ein weiteres wichtiges Argument der Methode cookie() ist -expires. Damit geben Sie an, wie lange der Browser das Cookie beim Anwender speichern soll. Wenn Sie -expires nicht angeben, behält der Browser das Cookie nur solange bis der Anwender den Browser beendet. Den gewünschten Speicherzeitraum geben Sie als Zahl mit voranstehendem Pluszeichen und einem nachgestellten Buchstaben für die Zeiteinheit an. Die Angabe '+3M' im Beispiel bedeutet "3 Monate". Andere Zeiteinheiten sind s (Sekunden), m (Minuten), h (Stunden), d (Tage) und y (Jahr). Darüber hinaus sind absolute Zeitangaben im UTC-Format erlaubt, wie z.B. Friday, 08-Jun-2001 11:29:00 GMT+0100.

Die Methode cookie() kennt daneben noch weitere Argumente. Mit -path geben Sie den HTTP-Pfad auf dem Server an, für den (einschließlich seiner Unterverzeichnisse) das Cookie gelten soll. Fehlt die Angabe, dann gilt das Cookie für die gesamte Domain ab der Dokumentwurzel. Mit -domain können Sie angeben, für welche Sub-Domain innerhalb der Hauptdomain das Cookie gelten soll (z.B. -domain => news.aufdiesemserver.de). Mit -secure, das als Wertzuweisung dann true, also beispielsweise 1 erwartet, erreichen Sie, dass das Cookie nur dann gesetzt wird, wenn die Serverumgebung eine SSL-geschützte Umgebung ist. Das ist wichtig, wenn Sie sensible Daten im Cookie übertragen, etwa die Kreditkartennummer des Anwenders, um ihm diese bei seinem nächsten Besuch gleich als Vorbelegung eines Formularfeldes anzubieten.

Automatische Umleitungen (Redirects) mit dem CGI-Modul

Manche CGI-Scripts dienen dazu, den aufrufenden Anwender zu einer anderen Adresse weiterzuleiten und vorher eventuell noch ein paar Aufgaben zu erledigen.

Beispiel eines vollständigen CGI-Scripts in Perl:

#!/usr/bin/perl -w

use strict;
use CGI;
use CGI::Carp qw(fatalsToBrowser);

my $cgi = new CGI;

open(FH,">>/usr/web/data/userlog.xml");
print FH "<user-call>\n <remote-host>",
         $cgi->remote_host(),
         "</remote-host>\n <user-agent>",
         $cgi->user_agent(),
         "</user-agent>\n <goto-url>",
         $cgi->url_param('goto'),
         "</goto-url>\n <time-stamp>",
         localtime(time),
         "</time-stamp>\n</user-call>\n";
close(FH);

print $cgi->redirect($cgi->url_param('goto'));

Erläuterung:

Das Beispiel-Script erwartet beim Aufruf im URI einen Parameter namens goto, dem wiederum eine gültige Adresse zugewiesen werden sollte. Angenommen, das Script hat die Adresse "http://localhost/cgi-bin/redirect.pl", dann wäre ein denkbarer Aufruf http://localhost/cgi-bin/redirect.pl?goto=http%3A%2F%2Fde.selfhtml.org/. Ein solcher Aufruf könnte beispielsweise als href-Attribut in einem Link stehen, der den Anwender eigentlich zu de.selfhtml.org führt, aber zuvor noch ein paar Daten über den Anwender sammelt.

Das Script bindet zunächst mit use CGI das CGI-Modul ein und erzeugt mit my $cgi = new CGI eine neue Instanz des CGI-Objekts. Die Weiterleitung ist dann wie in der untersten Anweisung des Beispiels gezeigt mit print $cgi->redirect() möglich. Als Argument wird der Methode redirect() die gewünschte Adresse übergeben, zu der die Umleitung erfolgen soll. Im Beispiel wird keine statische Adresse übergeben, sondern der Wert, der aus der nach oben Umgebungsvariablen url_param('goto') gewonnen wird. Darin ist der beim Script-Aufruf übergebene Wert von goto enthalten. Das Script tut also aus Anwendersicht nichts weiter, als die übergebene Adresse aufzurufen.

Zuvor schreibt das Script jedoch einige Daten über den Anwender in eine XML-Datei. In diese Datei werden Daten wie Hostname oder IP-Adresse des Anwenders, sein Browser-Typ, die Umleitungsadresse und der aktuelle Zeitstempel, ermittelt mit Seite localtime(time), geschrieben. Zum Öffnen und Schließen der Datei verwendet das Script die üblichen Perl-Funktionen Seite open und Seite close. Die Daten werden wie üblich mit Seite print und Angabe des Datei-Handles (im Beispiel FH) geschrieben.

Sicherheitseinstellungen mit dem CGI-Modul

Das CGI-Modul bietet zwei wichtige Einstellmöglichkeiten an, mit denen Sie die Sicherheit eines CGI-Scripts vor böswilliger Benutzung erhöhen können. Die beiden Befehle sollten Sie zu Beginn des Scripts notieren, jedoch nach dem Einbinden des CGI-Moduls mit use CGI.

Befehl | Erläuterung
$CGI::POST_MAX = 1024 * 100; | Mit diesem Befehl legen Sie fest, wie viele Daten maximal an das CGI-Script übertragen werden können. Im Beispiel wird eine byte-gerechte Zahl errechnet, nämlich 100 Kilobyte. Wird der Wert überschritten, wird die Parameterliste gelöscht. Der entsprechende Fehlercode wird von der Methode cgi_error zurückgegeben.
$CGI::DISABLE_UPLOADS = 1; | Mit diesem Befehl können Sie verhindern, dass Dateien, die via Formular an das Script übertragen werden, also HTML-Tags der Sorte <input type="file">, automatisch in eine temporäre Datei gespeichert werden. Die entsprechenden Formulardaten werden dann beim Auswerten einfach übergangen. Interessant ist ein solcher Befehl beispielsweise, wenn das Script vorher nicht weiß, von wo es aufgerufen wird und welche Formulardaten es zu verarbeiten hat - etwa ein öffentlich zugänglicher Form-Mailer, der beliebige ausgefüllte HTML-Formulare an eine E-Mail-Adresse sendet.
nach oben
weiter | Seite Computer und geschriebene Sprache
zurück | Seite CPAN-Module
Teil von SELFHTML/Navigationshilfen Teil von Perl Teil von Perl-Module

© 2007 Seite Impressum


SELFHTML: PHP

SELFHTML

PHP
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML, Kapitel Web-Technologien allgemein und speziell die einführenden Bemerkungen zu Seite PHP.

PHP wird nicht innerhalb von SELFHTML behandelt, ein entsprechendes Kapitel ist aber fest für die Version 9.0 eingeplant. Bis dahin empfehlen wir Ihnen das von den PHP-Entwicklern verfasste Handbuch, das PHP-Tutorial von QuakeNet und die FAQ der Newsgroup de.comp.lang.php.

deutschsprachige Seite PHP-Handbuch
deutschsprachige Seite PHP-Tutorial von QuakeNet
deutschsprachige Seite de.comp.lang.php FAQ

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen, Anwendungsbeispiele und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zu PHP
Online-Seite WWW-Links: PHP

nach oben

© 2007 Seite Impressum


SELFHTML: Internationalisierung

SELFHTML

Internationalisierung
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML.
Dieser Abschnitt behandelt die Aktivitäten, die stattfinden, um das weltweite Internet und Sprachen wie HTML für alle Sprachen dieser Welt verfügbar zu machen.
Der Abschnitt enthält folgende Seiten:

Seite Computer und geschriebene Sprache
Seite Zeichenkodierungen (ISO-8859-Familie und andere)
Seite Das Unicode-System
Seite Downloadbare Schriftarten

nach oben

© 2007 Seite Impressum


SELFHTML: Internationalisierung / Computer und geschriebene Sprache

SELFHTML

Computer und geschriebene Sprache
Informationsseite

nach unten Bits, Bytes und Zeichen
nach unten Beispiel für Kodierungen
nach unten Die Grenzen von Bytes sprengen
nach unten Die Bedeutung der Schriftarten
nach unten Schriftkulturen mit anderer Schreibrichtung

nach unten

Bits, Bytes und Zeichen

Die beiden Grundeinheiten in jedem heutigen Computer sind die Einheiten Bit und Byte. Ein Byte ist bei den heute üblichen Systemen als Folge von 8 Bit definiert (man spricht auch von Oktetts). Da jedes Bit zwei Zustände haben kann, nämlich 0 oder 1 bzw. ja oder nein, lassen sich mit einer Folge von 8 Bit genau 256 (= 28) unterschiedliche Zustände realisieren. Ein Byte kann also 256 unterschiedliche Werte haben. Da im Computer immer auch die 0 dazugehört, können in einem Byte dezimal ausgedrückt Werte zwischen 0 und 255 stehen.

Wenn ein laufendes Programm im Computer eine Datei in den Arbeitsspeicher einliest, stehen im Arbeitsspeicher anschließend nur Byte-Werte. Von Zeichen unseres Alphabets ist auf dieser Ebene noch keine Rede. Damit aus den Byte-Werten lesbare Zeichen werden, die sich am Bildschirm darstellen lassen, braucht es eine Konvention, welches Zeichen mit welchem oder welchen Byte-Werten gespeichert wird. Diese Aufgabe haben die so genannten Zeichenkodierungen. Eine solche Zeichenkodierung greift auf eine Übersetzungstabelle (Codetabelle) zurück, die zunächst jedem Zeichen, das verwendet werden kann, eine fortlaufende Nummer (einen Code) zuweist. Die Menge der Zeichen in einer solchen Tabelle wird Zeichenvorrat genannt.

Die Kodierungen sowie deren Codetabellen sind EDV-historisch gewachsene Gebilde. Bis zum Aufkommen der Personal Computer benutzten viele Rechner noch 7 Bit lange Grundeinheiten, mit denen sich nur 128 unterschiedliche Zustände darstellen lassen. Noch früher waren es auch mal 6 und 5 Bit lange Grundeinheiten. Auf der 7 Bit langen Grundeinheit beruhten die ersten Kodierungen, die historisch den Durchbruch schafften: die ASCII-Kodierung (American Standard Code for Information Interchange) und die EBCDIC-Kodierung (Extended Binary Coded Decimal Interchange Code). Dabei setzte sich vor allem die ASCII-Kodierung durch, weil sie im erfolgreichen Unix-Betriebssystem und in den aufkommenden Personal Computern zum Einsatz kam.

In der ASCII-Codetabelle sind die ersten 32 Zeichen für Steuerzeichen reserviert, etwa für Tastatur-Impulse wie den Zeilenumbruch. Die Zeichen zwischen 32 und 127 sind darstellbare Zeichen, darunter alle Ziffern, Satzzeichen und Buchstaben, die ein Amerikaner so braucht (denn die ASCII-Kodierung kommt natürlich aus den USA). Das Umwandeln der Zeichen in Einsen und Nullen, also die eigentliche Kodierung, funktionierte einfach: Jedes Zeichen nahm bei der Speicherung genau 7 Bits in Anspruch und der binäre Zahlenwert dieser 7 Bits entsprach der Nummer des Zeichens in der ASCII-Codetabelle. Der lateinische Buchstabe "a"; beispielsweise hat in der ASCII-Codetabelle den dezimalen Wert 98, er wurde daher ASCII-kodiert als 1100010 gespeichert.

Lange Zeit war ASCII der einzige verbreitete Standard. Da die neueren Computer aber 8 Bit lange Grundeinheiten hatten, war es folgerichtig, für die Byte-Werte zwischen 128 und 255 neue Verwendungszwecke zu finden. Dabei entwickelten sich jedoch proprietäre Lösungen. Microsoft DOS beispielsweise benutzt eine "erweiterte" ASCII-Codetabelle - dies ist aber nicht viel mehr als eine schöne Umschreibung für die Microsoft-eigene Belegung der Zeichen 128 bis 255 speziell für die Bedürfnisse von MS DOS.

Um auch hierfür einen Standard zu schaffen, entwickelte die internationale Standardisierungs-Organisation ISO eine Reihe von Kodierungen, die sogenannte Seite ISO-8859-Familie. Die Codetabellen dieser Kodierungen übernehmen für die Zeichen 0 bis 127 die ASCII-Codetabelle und definieren für die Werte zwischen 128 und 255 etliche Sonderzeichen und wichtige Alphabetzeichen verschiedener europäischer Sprachen. Die in Mitteleuropa verbreitete Kodierung ISO 8859-1, auch Latin-1 genannt, enthält etwa die deutschen Umlaute, französische Accent-Zeichen und spanische Zeichen mit Tilde. Dazu kommen diverse verbreitete kaufmännische und wissenschaftliche Zeichen.

Beachten Sie:

In der Fachliteratur wird oft der Begriff "Zeichensatz" (englisch character set) benutzt, um sowohl Zeichenkodierung (engl. character encoding), die Zuordnungstabelle zwischen Zeichen und Zeichencode (engl. character code), als auch den Zeichenvorrat (engl. character repertoire) zu bezeichnen. Tatsächlich sind diese drei Konzepte notwendigerweise miteinander verbunden: Beispielsweise ISO 8859-1 benutzt einen Zeichenvorrat von 256 Zeichen (darunter a, b, c usw.). Diesen Zeichen werden jeweils in der zugehörigen Codetabelle Nummern zugeordnet (a = 97, b = 98, c = 99 usw.). Die Kodierung kümmert sich dann um die Speicherung dieser Nummern in Bytes (97 = 01100001, 98 = 01100010, 99 = 01100011 usw.).

Dennoch erleichtert eine begriffliche Unterscheidung das Verständnis, weshalb die Bezeichnung "Zeichensatz" in SELFHTML vermieden wird. Die von ISO 8859-1 verwendete Codetabelle entspricht beispielsweise dem Anfang der von UTF-8 verwendeten Codetabelle (siehe nach unten Die Grenzen von Bytes sprengen). Das Zeichen "ä" hat in ISO 8859-1 daher denselben numerischen Wert wie in UTF-8, nämlich 228. Trotzdem benutzen beide Kodierungen einen unterschiedlichen Zeichenvorrat. ISO 8859-1 kann 256 verschiedene Zeichen speichern, UTF-8 kann hingegen über eine Millionen Zeichen des Unicode-Standards speichern. Die Umsetzung des Zeichens "ä" mit der Nummer 228 erfolgt daher anders: ISO 8859-1 speichert "ä" als ein Byte mit dem Wert 228, UTF-8 als eine Kette von zwei zusammengehörigen Bytes mit den Werten 195 und 164.

Obwohl der Begriff "Zeichensatz" in der Kritik steht, wird die Angabe zur Zeichenkodierung in verschiedenen Formaten und Protokollen, darunter Seite HTTP, unter dem Namen charset (Abkürzung für character set) mitgesendet. Seien Sie sich also darüber bewusst, dass mit "Zeichensatz" eine Kodierung gemeint sein kann, aber auch vereinzelt ein Zeichenvorrat mit einer entsprechenden Codetabelle unabhängig von der letztlichen Kodierung.

Beispiel für Kodierungen

Ein Beispiel soll das Prinzip der Zeichenkodierungen verdeutlichen. Die folgende Abbildung zeigt zwei Codetabellen: Die Codetabelle der MS-DOS-Kodierung, genannt Codepage 850, und die Codetabelle der Windows-Kodierung für westeuropäische Systeme, genannt Windows 1252. Bei beiden Kodierungen entspricht ein Zeichen bei der Speicherung genau einem Byte. Somit ist der Zeichenvorrat, das heißt der Umfang der folgenden Codetabellen, auf 256 Zeichen begrenzt.

DOS- und Windows-Kodierung

Der Abbildung können Sie entnehmen, dass die oberen Teile (dunkler) beider Codetabellen identisch sind, da beide die ASCII-Codetabelle für die ersten 128 Zeichen übernehmen (die ersten 32 Zeichen fehlen in der Abbildung, da es sich bei diesen Zeichen um Steuerzeichen handelt, die nicht abbildbar sind). Die unteren Teile (heller) sind dagegen unterschiedlich. Wo in der Windows-Codetabelle beispielsweise ein kleines deutsches ü liegt, bietet die DOS-Codetabelle eine hochgestellte ³ an.

Wenn Sie mit Microsoft Windows arbeiten, können Sie das selbst ausprobieren: Erzeugen Sie mit einem Texteditor, z.B. Notepad, eine neue Datei und tippen Sie Umlaute wie "äöü" ein. Falls Sie Windows 2000 oder XP verwenden, wählen Sie beim Speichern unter "Codierung" den Wert "ANSI" (dies ist die Microsoft-Bezeichnung für die besagte Windows-Kodierung). Anschließend rufen Sie die DOS-Eingabeaufforderung über das Startmenü auf ("Eingabeaufforderung" unter Windows 2000 und XP) und geben edit ein. Daraufhin öffnet sich der DOS-Texteditor. Damit öffnen Sie die zuvor im Notepad abgespeicherte Datei. Nun können Sie sehen, was der Zusammenhang zwischen Byte und Kodierung ist: Es werden zwar genauso viele Zeichen wie im Notepad angezeigt, aber es sind andere Zeichen. Der Grund ist, dass im Arbeitsspeicher und auf der Festplatte immer nur Byte-Werte stehen. Was ein Programm daraus macht, hängt davon ab, welche Kodierung es benutzt.

Das Beispiel zwischen der DOS- und der Windows-Kodierung wurde hier bewusst ausgewählt, da es sich an ein und demselben Rechner testen lässt. Das Beispiel soll aber vor allem auch dazu ermuntern, tiefer in die Geheimnisse der Kodierungen einzusteigen und sich darüber bewusst zu werden, dass nichts von dem, was im Anzeigefenster eines Web-Browsers zu sehen ist, selbstverständlich ist, sondern dass alles auf Konventionen beruht, die computer-technisch gesehen zum Teil auf wesentlich tieferen Ebenen aufsetzen als HTML und andere standardisierte Web-Sprachen.

Die Grenzen von Bytes sprengen

Die verbreiteten ISO-Kodierungen deren Abwandlungen wie Microsoft 1252, die mit einem Zeichenvorrat von 256 Zeichen arbeiten und jedes Zeichen mit genau einem Byte speichern, können nur einzelne Schriftkulturen und die damit verbundenen Sprachen oder Sprachfamilien abdecken. Problematisch wird es daher, wenn mehrsprachige Dokumente erstellt werden sollen, die Zeichen ganz unterschiedlicher Schriftkulturen enthalten oder von bestimmten Sonderzeichen Gebrauch machen. Auch für nicht-alphabetische Schriftkulturen sind Kodierungen mit einem derart eingeschränkten Zeichenvorrat ungeeignet. In unseren Zeiten der Globalisierung wird es daher immer wichtiger, für solche Probleme eine standardisierte EDV-technische Lösung zu finden, die sich auf den verschiedensten Computersystemen durchsetzt. Eine solche Lösung gibt es auch schon: das Seite Unicode-System und deren Kodierungen. Die Unicode-Kodierungen haben das Potenzial, mittelfristig die auf 256 Zeichen begrenzten Kodierungen abzulösen. Derzeit geschieht auch schon viel in dieser Richtung. Neuere Betriebssysteme bieten Schriftarten an, die den kompletten Unicode-Zeichenvorrat oder zumindest große Teile davon abdecken. Auch die meisten modernen Anwendungen können Texte mit der Unicode-Kodierung UTF-8 speichern, wodurch ein Zeichen nicht mehr zwangsläufig genau einem Byte entspricht, sondern aus mehreren Bytes bestehen kann. Damit ist die Grundlage zur Unterstützung des Unicode-Systems gegeben.

Die Bedeutung der Schriftarten

Schriftarten sind Beschreibungsmodelle, um auf Ausgabemedien wie Bildschirm oder Drucker Zeichen abzubilden. Jedes heute übliche Betriebssystem enthält so genannte Systemschriften. Das sind Schriftarten, die auf jeden Fall genau die Zeichen enthalten, die in der Codetabelle definiert sind, auf dem das Betriebssystem per Voreinstellung basiert. Unter MS Windows gibt es beispielsweise eine solche Schriftart namens System. Daneben gibt es auf modernen Rechnern definierte Schnittstellen für beliebige Schriftarten. Verbreitet ist z.B. die Adobe-Schnittstelle für Schriftarten (PostScript). Unter MS Windows kommt eine eigene Schnittstelle hinzu (TrueType).

Solche Schriftarten können auf die zur Verfügung stehenden Byte-Werte beliebige Darstellungsmuster legen. So gibt es auch Schriftarten wie WingDings oder ZapfDingbats, die fast nur Symbole und Icons enthalten. Wichtig sind jedoch vor allem auch Schriftarten, die zwar ansprechend aussehen, aber gleichzeitig eine bestimmte Codetabelle unterstützen, d.h. alle Zeichen dieses Zeichenvorrats darstellen, und zwar genau auf den Byte-Werten, die in der Codetabelle dafür vorgesehen sind. Nur durch solche Schriftarten wird es möglich, bestimmte Zeichenvorräte in eine grafisch darstellbare Form zu bringen. Die folgende Abbildung zeigt ein Beispiel für diesen Zusammenhang:

Zusammenhang zwischen Byte, Zeichenwert und Schriftart

Bei modernen Schriftarten, die das ganze Unicode-System abdecken, ist das Prinzip das gleiche. Nur mit dem Unterschied, dass dort nicht nur 256 Zeichen adressiert werden können, sondern derzeit bis zu 65536 Zeichen, künftig noch viel mehr, aus dem Grund, weil dort zwei oder gar vier Bytes für Zeichenwerte verwendet werden, wodurch viel höhere Werte als 256 möglich sind.

Schriftkulturen mit anderer Schreibrichtung

Da die Computerindustrie historisch gesehen in den USA und Europa entstand, bauen die heutigen Hardware-Systeme und Betriebssysteme auf Prinzipien auf, die zunächst als selbstverständlich galten. Wenn Sie in einem Textverarbeitungsprogramm einen Text tippen, wandert der Cursor beim Schreiben von links nach rechts. Automatische Zeilenumbrüche erfolgen nach typischen Begrenzerzeichen westlicher Sprachen wie Leerzeichen oder Silbentrennstrich.

Es gibt jedoch etliche Schriftkulturen, die eine andere Schreibrichtung als die unsrige haben. Dazu gehören etwa die arabische Schrift, die hebräische Schrift oder die fernöstlichen Schriftkulturen. Um solche Schriftkulturen auf Computern abzubilden, sind zusätzliche Fähigkeiten der Software erforderlich. Denn es gilt nicht nur, die Schriftelemente abzubilden, sondern auch die Editierrichtung bei der Texteingabe und die Ausgaberichtung auf Medien wie Bildschirm oder Drucker an die Schreibrichtung der entsprechenden Schriftkultur anzupassen.

In HTML gibt es deswegen Sprachbestandteile wie das Universalattribut dir oder das Element bdo, mit deren Hilfe Web-Autoren Angaben zur Schreibrichtung machen können. Die software-seitige Umsetzung "on the fly" ohne das Erfordernis, zusätzliche Spezialsoftware installieren zu müssen, funktioniert bei neueren Browsern auch schon zum Teil.

nach oben
weiter | Seite Zeichenkodierungen (ISO-8859-Familie und andere)
zurück | Seite Modul CGI: Funktionen für die CGI-Programmierung
Teil von SELFHTML/Navigationshilfen Teil von Internationalisierung

© 2007 Seite Impressum


SELFHTML: Internationalisierung / Zeichenkodierungen (ISO-8859-Familie und andere)

SELFHTML

Zeichenkodierungen (ISO-8859-Familie und andere)
Informationsseite

nach unten Die ISO-8859-Zeichenkodierungen
nach unten Liste der ISO-8859-Zeichenkodierungen
nach unten Alle offiziellen Zeichenkodierungen
nach unten

Die ISO-8859-Zeichenkodierungen

Die ISO-8859-Familie wurde vom European Computer Manufacturer's Association (ECMA) entwickelt. Es handelt sich um ein Set von standardisierten Zeichenkodierungen für alphabetische Schriften. Dazu gehören die lateinischen Schriften, auf denen die meisten Sprachen Westeuropas und Amerikas beruhen, oder etwa die kyrillischen Schriften.

Alle Kodierungen dieser Familie basieren auf der Speicherung eines Zeichens mit genau einem Byte. Das heißt, die Codetabellen, auf denen diese Kodierungen aufbauen, enthalten 256 mögliche Zeichen. Bei allen Codetabellen sind die ersten 128 Zeichen, also die Zeichen mit den Werten 0 bis 127, identisch mit der ASCII-Codetabelle. Das hat den Vorteil, dass die üblichen lateinischen Groß- und Kleinbuchstaben, die arabischen Ziffern und die üblichen Sonderzeichen wie Satzzeichen oder kaufmännische Zeichen bei diesen Kodierungen immer zur Verfügung stehen.

Oberhalb sind die darstellbaren Zeichen der ASCII-Codetabelle abgebildet. Diese Zeichen haben die Werte zwischen 32 und 126. Wert 32 ist das Leerzeichen. Alle ISO-8859-Codetabellen enthalten diese Codes.

Zur Lesart dieser und der folgenden Codetabellen:

Den Wert eines Zeichens, auch Codenummer genannt, ermitteln Sie, indem Sie die Werte aus Spalten- und Zeilenüberschrift des Zeichens addieren. Ein großes K hat in dieser Tabelle beispielsweise den Zeilenwert 70 und den Spaltenwert 5. Daraus ergibt sich der Wert 75 für dieses Zeichen. Falls Sie nicht den Dezimalwert eines Zeichens benötigen, sondern den Hexadezimalwert, können Sie den Seite Dezimal/Hexadezimal-Umrechner benutzen.

So wie in der ASCII-Codetabelle die ersten 32 Zeichen (Zeichenwerte 0 bis 31) und das Zeichen 127 für Steuerzeichen reserviert sind, sparen auch die erweiterten Codetabellen der ISO-8859-Kodierungen einen Bereich von Zeichen aus. Es handelt sich um die ersten 32 Zeichen oberhalb des ASCII-Bereichs, also um die Zeichenwerte 128 bis 159. Die Tabellen zu den einzelnen Kodierungen weiter unten bilden daher die verbleibenden Zeichenwerte 160 bis 255 ab. Das Zeichen mit dem Wert 160 ist in all diesen Tabellen ein erzwungenes Leerzeichen.

Viele der Codetabellen der ISO-8859-Kodierungen überlappen sich. Das ist Absicht. Die Kodierungen sind so optimiert, dass sich mit einer möglichst alle Zeichen möglichst vieler Schriften speichern lassen. Zeichen, die in mehreren Codetabellen der ISO-8859-Kodierungen vorkommen, haben in der Regel immer den gleichen Wert, d.h. sie befinden sich in den unterschiedlichen Codetabellen an der gleichen Stelle.

Sechs der ISO-8859-Kodierungen beziehen sich auf Schriften, die im Kern auf der lateinischen Schrift basieren. Diese Kodierungen haben daher die Beinamen Latin-1 bis Latin-6.

Liste der ISO-8859-Kodierungen

Die folgenden Tabellen zeigen die einzelnen Codetabellen der ISO-8859-Kodierungen. Wenn Sie diese Kodierungen in HTML einsetzen möchten, benötigen Sie einen HTML-Editor, der Ihnen das Speichern der HTML-Datei mit eben diesen Kodierungen ermöglicht. Zusätzlich sollten Sie eine Seite Meta-Angabe zur Zeichenkodierung nicht vergessen. Die blau dargestellten Namen sind jene Bezeichnungen, die Sie in einer solchen Kodierungsangabe notieren können.

ISO-8859-1 (Latin-1)

Die Codetabelle dieser Kodierung enthält die schriftspezifischen Zeichen für westeuropäische und amerikanische Sprachen. Der Zeichenvorrat deckt die Sprachen Albanisch, Dänisch, Deutsch, Englisch, Färöisch, Finnisch, Französisch, Galizisch, Irisch, Isländisch, Italienisch, Katalanisch, Niederländisch, Norwegisch, Portugiesisch, Schwedisch und Spanisch ab. Lediglich einzelne Zeichen wie das niederländische ĳ, die französischen Ligaturen œ und Œ oder die deutschen Anführungszeichen „“ fehlen.

ISO-8859-2 (Latin-2)

Die Codetabelle dieser Kodierung enthält die schriftspezifischen Zeichen für die meisten mitteleuropäischen und slawischen Sprachen. Sie deckt die Sprachen Kroatisch, Polnisch, Rumänisch, Slowakisch, Slowenisch, Tschechisch und Ungarisch ab.

ISO-8859-3 (Latin-3)

Die Codetabelle dieser Kodierung deckt die Sprachen Esperanto, Galizisch, Maltesisch und Türkisch ab.

ISO-8859-4 (Latin-4)

Die Codetabelle dieser Kodierung enthält einige Zeichen der Sprachen Estnisch, Lettisch und Litauisch. Vergleichen Sie diese Kodierung auch mit ISO 8859-10, deren Codetabelle sehr ähnlich ist.

ISO-8859-5

Die Codetabelle dieser Kodierung enthält kyrillische Zeichen. Sie deckt weitgehend die Sprachen Bulgarisch, Mazedonisch, Russisch, Serbisch und Ukrainisch ab.

ISO-8859-6

Die Codetabelle dieser Kodierung enthält Zeichen arabischer Schrift. Die Darstellung der Zeichen in der folgenden Tabelle ist jedoch "abstrakt", da die Zeichen in der Schriftpraxis variieren, je nachdem, ob sie am Anfang, in der Mitte oder am Ende eines Wortes oder einzeln stehen. Arabisch zeichnet sich weiterhin dadurch aus, dass die Schriftrichtung von rechts nach links ist.

ISO-8859-7

Die Codetabelle dieser Kodierung enthält die Zeichen der neugriechischen Schrift.

ISO-8859-8

Die Codetabelle dieser Kodierung enthält die Zeichen der hebräischen Schrift. Wie bei der arabischen Schrift ist dabei die Schriftrichtung von rechts nach links.

ISO-8859-9 (Latin-5)

Diese Kodierung ist speziell für Türkisch gedacht. Die Codetabelle basiert auf ISO 8859-1, enthält jedoch anstelle der isländischen Sonderzeichen türkische Zeichen.

ISO-8859-10 (Latin-6)

Die Codetabelle dieser Kodierung enthält speziell Zeichen für die Sprachen Grönländisch (Inuit) und Lappisch (Sami).

Alle offiziellen Kodierungen

Es gibt etliche andere, zum Teil schon ältere Kodierungen, die Konventionen für einzelne Schriften oder Schriftfamilien definieren, häufig landesspezifisch. Unter der folgenden Web-Adresse werden die Namen dieser Kodierungen gesammelt:

englischsprachige Seite http://www.iana.org/assignments/character-sets

Diejenigen Kodierungsnamen, die dort in der Liste jeweils hinter Name: oder Alias: aufgelistet sind, können Sie in HTML in der Seite Meta-Angabe zur verwendeten Zeichenkodierung verwenden. Bevorzugt sollten Sie jene Namen verwenden, die in der Liste mit dem Zusatz preferred MIME name gekennzeichnet sind.

nach oben
weiter | Seite Das Unicode-System
zurück | Seite Computer und geschriebene Sprache
Teil von SELFHTML/Navigationshilfen Teil von Internationalisierung

© 2007 Seite Impressum


SELFHTML: Internationalisierung / Das Unicode-System

SELFHTML

Das Unicode-System
Informationsseite

nach unten Allgemeines zu Unicode
nach unten Aufbau des Unicode-Systems
nach unten

Allgemeines zu Unicode

Unicode ist ein System, in dem die Zeichen oder Elemente aller bekannten Schriftkulturen und Zeichensysteme festgehalten werden. Durch dieses System wird es möglich, einem Computer "weltweit" zu sagen, welches Zeichen man dargestellt bekommen will. Voraussetzung ist natürlich, dass der Computer bzw. das ausgeführte Programm das Unicode-System unterstützt.

Unicode strebt die möglichst vollständige Erfassung aller bekannten Zeichen aus gegenwärtigen und vergangenen Schriftkulturen an. Die Zeichen werden nach Klassen katalogisiert und erhalten eine Zeichennummer (Code). Alle nur erdenklichen Zeichen und Zeichensorten werden erfasst. Auch für Steuerzeichen wie Silbentrennzeichen, erzwungene Leerzeichen oder Tabulator-Zeichen gibt es Nummern. Die Zeichen mathematischer Formeln fehlen ebensowenig wie die Silben- oder Wortzeichen fernöstlicher Schriftkulturen. Auch Einzelteile von Zeichen, so genannte diakritische Zeichen wie etwa die Doppelpunkte über den deutschen Umlauten, haben einen eigenen Code. Zeichen lassen sich auch dynamisch kombinieren - so gibt es zwar natürlich auch ein deutsches "ä", aber der gleiche Buchstabe lässt sich auch aus "a" und dem Element für Doppelpunkt über dem Zeichen erzeugen.

Neben der bloßen Adressierung eines Zeichens oder Elements ist im Unicode-System für jedes Zeichen auch ein Set von Eigenschaften definiert. Zur Eigenschaft eines Zeichens gehört z.B. die Schreibrichtung (bei arabischen Zeichen etwa ist die Schreibrichtung von rechts nach links). Insgesamt stecken hinter dem Unicode-System unzählige Forschungsergebnisse der weltweiten Sprachwissenschaft.

Das Unicode-Konsortium, das 1991 gegründet wurde und aus Linguisten und anderen Fachleuten besteht, ermittelt die aufzunehmenden Zeichen. Die vergebenen Zeichencodes haben verbindlichen Charakter. Seit Version 2.0 ist das Unicode-System auch mit der internationalen Norm ISO/IEC 10646 synchronisiert. Das ist insofern wichtig, als Kapitel HTML seit Version 4.0 und auch Kapitel XML ab Version 1.0 auf der Norm ISO/IEC 10646 aufsetzen. Wenn Sie also wissen wollen, wie man ein bestimmtes Zeichen in HTML oder XML notieren soll, müssen Sie in den Unicode-Zeichentabellen nachsehen, welche Zeichennummer das gewünschte Zeichen hat. Anschließend können Sie das gewünschte Zeichen durch eine numerische Notation wie z.B. &#9871; (dezimale Schreibweise) oder &#x268F; (hexadezimale Schreibweise mit x) im Quelltext der HTML- oder XML-Datei notieren.

Die Zeichennummern der von Unicode erfassten Zeichen wurden zuerst ausschließlich durch eine zwei Byte lange Zahl ausgedrückt. Auf diese Weise lassen sich bis zu 65536 verschiedene Zeichen in dem System unterbringen (2 Byte = 16 Bit = 216 Kombinationsmöglichkeiten). In der Unicode-Version 3.0 vom September 1999 wurden bereits 49.194 Zeichen aus aller Welt aufgelistet. Die Version 3.1 vom März 2001 durchbrach mit 94.140 Zeichen die Zwei-Byte-Grenze. Die Version 4.0 vom April 2003 umfasst 96.382 Zeichen, die Unterversion 4.1.0 fügt noch einmal 1.273 Zeichen hinzu. Das Zwei-Byte-Schema, im Unicode-System als Basic Multilingual Plane (BMP) bezeichnet, wird deshalb von einem Vier-Byte-Schema abgelöst, wodurch sich die beruhigende Anzahl von 4.294.967.296 Zeichen (232 Kombinationsmöglichkeiten für Bits) adressieren lässt.

Informationen zum Unicode-Konsortium finden Sie im Web auf der englischsprachige Seite Homepage des Unicode-Konsortiums.

Das große Problem mit Unicode ist eigentlich nur, wie all die vielen Zeichen an einem Computer dargestellt werden sollen. Denn Unicode definiert nur Zeichennummern und Eigenschaften von Zeichen, aber es enthält ebenso wenig wie Codetabellen herkömmlicher Zeichenkodierungen Angaben darüber, wie das Zeichen darzustellen ist. Dazu sind am Computer Schnittstellen wie Schriftarten erforderlich. Die klassischen Computerschriftarten sind dazu jedoch nicht geeignet, da sie sich weitgehend an bestimmten Kodierungen mit eingeschränktem Zeichenvorrat orientieren. Neue, Unicode-orientierte Schriftarten verbreiten sich allmählich. In Verbindung mit modernen Betriebssystemen und Anwendungen unterstützen solche Schriftarten zumindest die zwei-byte-breite Adressierung, also den BMP-Anteil des Unicode-Systems.

Aufbau des Unicode-Systems

Bei neuen Unicode-Versionen wird das Buch The Unicode Standard, herausgegeben vom Unicode-Konsortium, neu aufgelegt. Im internationalen Buchhandel ist dieses Buch erhältlich. Darin sind alle Zeichen, Zeichennummern, Zeichenklassen usw. genau aufgeschlüsselt und dargestellt. Dieses Buch ist das verbindliche Normwerk. Auf den Web-Seiten des Unicode-Konsortiums finden sich zum schnellen Nachschlagen PDF-Dateien mit den einzelnen Codetabellen. Die Verweise in der Tabelle weiter unten führen direkt zu den entsprechenden PDF-Dateien. Um diese Dateien betrachten zu können, benötigen Sie ein gesondertes PDF-Leseprogramm wie beispielsweise den Adobe Reader.

Das Unicode-System ist in Zahlenbereiche aufgeteilt. Die Zahlen selbst werden in der Form U+XXXX notiert. Das U steht für Unicode, und die X für je eine hexadezimale Ziffer. Zeichennummern sind in diesen Tabellen also hexadezimal dargestellt. Falls Sie für die Notation eines oder mehrerer Zeichen aus dem Unicode-Bereich in HTML oder XML eine dezimale Darstellung verwenden wollen, können Sie den Seite Dezimal/Hexadezimal-Umrechner benutzen.

Die einzelnen Zeichen im Unicode-System sind nicht wahllos angeordnet. Das gesamte System ist in Zeichenbereiche (engl. blocks, Blöcke) aufgeteilt. Die Zeichenbereiche spiegeln jeweils eine bestimmte Schriftkultur oder ein Set von Sonderzeichen wider.

Im folgenden werden die einzelnen Unicode-Zeichenbereiche aufgelistet. Bei jedem Zeichenbereich finden Sie einen Verweis. Der Verweis führt jeweils zu einer PDF-Datei auf der Homepage des Unicode-Konsortiums. Darauf finden Sie zu dem betreffenden Zeichenbereich Hinweise sowie eine grafische Tabelle mit Abbildungen der einzelnen Zeichen des Bereichs und der zugehörigen Unicode-Zeichennummern (hexadezimal).

BMP-Teil des Unicode-Systems (mit zwei Byte breiten Zeichen darstellbar):

Name des Zeichenbereichs | Zeichenbereich (hexadezimale Angabe) | Link zur Codetabelle
Basic Latin (ASCII-Codetabelle) | U+0000 bis U+007F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Latin-1 (Codetabelle von ISO 8859-1) | U+0080 bis U+00FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Latin Extended-A | U+0100 bis U+017F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Latin Extended-B | U+0180 bis U+024F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
IPA Extensions | U+0250 bis U+02AF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Spacing Modifier Letters | U+02B0 bis U+02FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Combining Diacritical Marks | U+0300 bis U+036F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Greek | U+0370 bis U+03FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Cyrillic | U+0400 bis U+04FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Armenian | U+0530 bis U+058F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Hebrew | U+0590 bis U+05FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Arabic | U+0600 bis U+06FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Devanagari | U+0900 bis U+097F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Bengali | U+0980 bis U+09FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Gurmukhi | U+0A00 bis U+0A7F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Gujarati | U+0A80 bis U+0AFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Oriya | U+0B00 bis U+0B7F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Tamil | U+0B80 bis U+0BFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Telugu | U+0C00 bis U+0C7F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Kannada | U+0C80 bis U+0CFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Malayalam | U+0D00 bis U+0D7F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Thai | U+0E00 bis U+0E7F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Lao | U+0E80 bis U+0EFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Tibetan | U+0F00 bis U+0FBF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Georgian | U+10A0 bis U+10FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Hangul Jamo | U+1100 bis U+11FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Latin Extended Additional | U+1E00 bis U+1EFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Greek Extended | U+1F00 bis U+1FFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
General Punctuation | U+2000 bis U+206F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Superscripts and Subscripts | U+2070 bis U+209F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Currency Symbols | U+20A0 bis U+20CF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung Hier ist auch das Eurozeichen-Symbol mit dabei. Es hat den Wert U+20AC. In HTML dezimal notiert: &#8364; oder einfacher: &euro;.
Combining Diacritical Marks for Symbols | U+20D0 bis U+20FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Letterlike Symbols | U+2100 bis U+214F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Number Forms | U+2150 bis U+218F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Arrows | U+2190 bis U+21FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Mathematical Operators | U+2200 bis U+22FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Miscellaneous Technical | U+2300 bis U+23FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Control Pictures | U+2400 bis U+243F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Optical Character Recognition | U+2440 bis U+245F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Enclosed Alphanumerics | U+2460 bis U+24FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Box Drawing | U+2500 bis U+257F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Block Elements | U+2580 bis U+259F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Geometric Shapes | U+25A0 bis U+25FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Miscellaneous Symbols | U+2600 bis U+26FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Dingbats | U+2700 bis U+27BF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
CJK Symbols and Punctuation | U+3000 bis U+303F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Hiragana | U+3040 bis U+309F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Katakana | U+30A0 bis U+30FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Bopomofo | U+3100 bis U+312F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Hangul Compatibility Jamo | U+3130 bis U+318F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Kanbun | U+3190 bis U+319F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Enclosed CJK Letters and Months | U+3200 bis U+32FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
CJK Compatibility | U+3300 bis U+33FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
CJK Unified Ideographs | U+4E00 bis U+9FA5 | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Hangul Syllables | U+AC00 bis U+D7A3 | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
High Surrogates | U+D800 bis U+DB7F |
Private Use High Surrogates | U+DB80 bis U+DBFF |
Low Surrogates | U+DC00 bis U+DFFF |
Private Use Area | U+E000 bis U+F8FF |
CJK Compatibility Ideographs | U+F900 bis U+FAFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Alphabetic Presentation Forms | U+FB00 bis U+FB4F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Arabic Presentation Forms-A | U+FB50 bis U+FDFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Combining Half Marks | U+FE20 bis U+FE2F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
CJK Compatibility Forms | U+FE30 bis U+FE4F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Small Form Variants | U+FE50 bis U+FE6F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Arabic Presentation Forms-B | U+FE70 bis U+FEFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Halfwidth and Fullwidth Forms | U+FF00 bis U+FFEF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Specials | U+FFF0 bis U+FFFF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung

Erweiterter Bereich des Unicode-Systems (mit vier Byte breiten Zeichen darstellbar):

Name des Zeichenbereichs | Zeichenbereich (hexadezimale Angabe) | Link zur Codetabelle
Linear B Syllabary | U+10000 bis U+1007F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Linear B Ideograms | U+10080 bis U+100FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Aegean Numbers | U+10100 bis U+1013F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Ancient Greek Numbers | U+10140 bis U+1018F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Old Italic | U+10300 bis U+1032F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Gothic | U+10330 bis U+1034F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Ugaritic | U+10380 bis U+1039F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Old Persian | U+103A0 bis U+103DF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Deseret | U+10400 bis U+1044F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Shavian | U+10450 bis U+1047F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Osmanya | U+10480 bis U+104AF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Cypriot Syllabary | U+10800 bis U+1083F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Kharoshthi | U+10A00 bis U+10A5F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Byzantine Musical Symbols | U+1D000 bis U+1D0FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Musical Symbols | U+1D100 bis U+1D1FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Ancient Greek Musical Notation | U+1D200 bis U+1D24F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Tai Xuan Jing Symbols | U+1D300 bis U+1D35F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Mathematical Alphanumeric Symbols | U+1D400 bis U+1D7FF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
CJK Unified Ideographs Extension B | U+20000 bis U+2A6D6 | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
CJK Compatibility Ideographs Supplement | U+2F800 bis U+2FA1F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Tags | U+E0000 bis U+E007F | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Variation Selectors Supplement | U+E0100 bis U+E01EF | englischsprachige Seite Codetabelle mit grafischer Zeichendarstellung
Supplementary Private Use Area-A | U+F0000 bis U+E01EF |
Supplementary Private Use Area-B | U+100000 bis U+10FFFF |
nach oben
weiter | Seite Downloadbare Schriftarten
zurück | Seite Zeichenkodierungen (ISO-8859-Familie und andere)
Teil von SELFHTML/Navigationshilfen Teil von Internationalisierung

© 2007 Seite Impressum


SELFHTML: Internationalisierung / Downloadbare Schriftarten

SELFHTML

Downloadbare Schriftarten
Informationsseite

nach unten Allgemeines zu downloadbaren Schriftarten
nach unten TrueDoc (Bitstream)
nach unten Web Embedding Fonts Tool WEFT (Microsoft)
nach unten Downloadbare Schriftarten in HTML einbinden
nach unten

Allgemeines zu downloadbaren Schriftarten

Downloadbare Schriftarten können in Web-Seiten als Referenz auf eine Schriftartendatei mit eingebunden werden. Dies wird aktuell jedoch nur vom Internet Explorer ab Version 4.0 und Netscape in der veralteten Version 4.x unterstützt. Diese beiden Browser erkennen solche Schriftarten und laden sie zusammen mit den HTML- und sonstigen Ressourcen-Dateien einer Web-Seite herunter. Die Schriftart wird dabei nur temporär auf dem Anwenderrechner installiert, sodass sie nur verfügbar ist, wenn die betreffende Web-Seite vom Original-Server angezeigt wird. Der Browser kann die Schriftartendaten interpretieren und stellt Texte, die in HTML/CSS mit dieser Schriftart formatiert sind, entsprechend dar. Voraussetzung dafür ist natürlich eine grafische Benutzeroberfläche.

Leider gibt es im Fall der downloadbaren Schriftarten keinen Standard, sondern zwei inkompatible, letztlich proprietäre Lösungen: die eine stammt von Bitstream (diese Lösung wird vom Netscape 4.x unterstützt), und die andere von Microsoft (vom Internet Explorer unterstützt). Für beide Lösungen gibt es je eine spezielle Software. Beide Software-Programme erlauben es unter anderem, vorhandene herkömmliche Schriftarten wie TrueType- oder Adobe-Schriftarten in das neue Dateiformat zu konvertieren oder einzelne, benötigte Zeichen in die zu erstellende Download-Schriftart zu importieren. Um für beide Browser zu schreiben, gibt es zwei Lösungen: entweder Sie erstellen beide Typen von downloadbaren Schriftarten, arbeiten also mit beiden Programmen parallel. Oder Sie beschränken sich auf die Bitstream/Truedoc-Technik, denn für den Internet Explorer gibt es ein ActiveX-Control, das diesen Browser befähigt, ebenfalls die Bitstream/Truedoc-Technik zu nutzen.

Im Bereich des Web-Designs haben sich die downloadbaren Schriftarten nach mehreren Jahren ihres Existierens nicht durchgesetzt. Der Grund ist wohl einerseits das etwas ungewohnte Handling mit dem Kopierschutz bei solchen Schriftarten (die Schriftarten werden nur interpretiert, wenn sie von einer frei wählbaren, aber bestimmten Domain-Adresse geladen werden). Andererseits hat man aber auch eingesehen, dass die meisten kunstvollen Schriftarten auf pixelorientierten Bildschirm sowieso nicht so gut aussehen wie auf Papier. Während also nur wenige Web-Seiten aus Design-Gründen auf downloadbare Schriftarten setzen, könnten diese dagegen eine durchaus sinnvolle Lösung für das Problem der Internationalisierung sein. Web-Seiten, die in z.B. kyrillische Zeichen enthalten, könnten downloadbare Schriftarten benutzen, um sicherzustellen, dass die Seiten auch auf westeuropäischen und amerikanischen Computern korrekt angezeigt werden. Freilich ist auch für diese Fälle durch das Seite Unicode-System und modernere Schriftarten, die große Teile des Unicode-Systems abdecken, eine gewisse Verbesserung eingetreten.

TrueDoc (Bitstream)

englischsprachige Seite Bitstream ist ein Unternehmen, das Lösungen für die Schriftdarstellung in elektronischen Dokumenten entwickelt. Zu den Technologien, die dort entwickelt werden, gehört auch diejenige mit dem Namen englischsprachige Seite TrueDoc. Auf den Web-Seiten zu TrueDoc finden Sie alle weiteren nötigen Original-Informationen zur TrueDoc-Technologie.

Hinter TrueDoc verbirgt sich ein Schriftartenkonzept für plattformübergreifendes elektronisches Publizieren speziell auch für den Einsatz im World Wide Web. TrueDoc-Schriftarten werden nicht wie herkömmliche Schriftarten beim Anwender installiert und sind dann dort "verfügbar", sondern sie werden direkt in elektronische Dokumente mit eingebunden oder darin referenziert. Software, die TrueDoc interpretiert, erkennt solche Schriftarten und lädt sie zusammen mit den anzuzeigenden Daten eines Dokuments. Dokumentdaten, die mit TrueDoc-Schriftarten formatiert sind, werden dann am Anwenderbildschirm entsprechend dargestellt.

Beim Einsatz im Web sind zum Funktionieren der TrueDoc-Technologie folgende Voraussetzungen erforderlich:

  • Als Web-Autor benötigen Sie die kostenpflichtige Entwickler-Software für TrueDoc-Schriftarten von Bitstream. Über die Web-Seiten von TrueDoc können Sie diese Software erwerben.
  • Die Schriftarten nach dem TrueDoc-Modell müssen nach einer bestimmten Konvention in Web-Seiten eingebunden werden. Der Einsatz ist server-abhängig. Das heißt, beim Erstellen der Schriftarten bestimmen Sie, von welchen URIs aus die Schriftarten heruntergeladen werden dürfen. Funktionieren tun sie dann nur, wenn die Web-Seite über entsprechende Adressen aufgerufen wird. Auf diese Weise wird Missbrauch und Raubkopieren der Schriftarten unterbunden. Das entsprechende Sicherheitskonzept nennt sich bei TrueDoc DocLock. Wie das DocLock-Konzept im Einzelnen funktioniert, gehört zur Software-Dokumentation der TrueDoc-Entwickler-Software.
  • Der Web-Browser des Anwenders muss die TrueDoc-Technologie unterstützen. Netscape hat die TrueDoc-Technologie nur in den 4er-Versionen seines Web-Browsers adaptiert. Microsoft kontert mit der Konkurrenz-Software nach unten WEFT. Andererseits ermöglicht Bitstream den Entwicklern von TrueDoc-Schriften, ein nicht sehr großes ActiveX-Control mit anzubieten, das den Internet Explorer 4.0 oder höher ebenfalls befähigt, Web-Seiten mit eingebundenen TrueDoc-Schriftarten zu interpretieren.

Schriftartendateien der TrueDoc-Technologie haben die Dateiendung .pfr ("Portable Font Resource").

Microsoft und das Web Embedding Fonts Tool WEFT

Als Technologie für downloadbare Schriftarten hat Microsoft das Programm WEFT (Web Embedding Fonts Tool) entwickelt. Der Internet Explorer unterstützt ab der Version 4.0 seines Browsers diese Technologie.

Sie können das Programm WEFT auf der englischsprachige Seite Microsoft WEFT Homepage downloaden. An der gleichen Stelle finden Sie auch eine Einführung in die WEFT-Technologie.

Um WEFT sinnvoll nutzen zu können, erstellen Sie zuerst Ihr Web-Projekt und verwenden innerhalb Ihrer HTML-Dateien mit den dafür üblichen Möglichkeiten in HTML- bzw. CSS gewünschte Schriftartennamen. Anschließend können Sie den WEFT Wizard starten (Teil von WEFT). Mit diesem Software-Assistenten können Sie das Projekt analysieren lassen. Der WEFT Wizard ermittelt die verwendeten Schriftartennamen. Sie können auswählen, für welche der Schriftarten Sie ein "Font Object", sprich eine Schriftartendatei, erstellen möchten.

Schriftartendateien, die mit WEFT erzeugt werden, haben die Dateiendung .eot. Beim Erzeugen dieser Schriftarten gibt es diverse Optionen, etwa die, ob Sie für jede HTML-Datei eine eigene Schriftart oder eine gemeinsame Schriftart für alle HTML-Dateien wünschen. WEFT greift auch auf Ihre erstellten HTML-Dateien zu und ändert den Quelltext an Stellen, an denen es für die korrekte Anzeige der erstellten Schriftart erforderlich ist.

Beim Erzeugen der eot-Dateien müssen Sie außerdem deren geplanten Ablageort im Web angeben. Das kann für Web-Projekte beispielsweise eine FTP-Adresse sein, auf der Sie Dateien ablegen können. Ferner geben Sie an, welche URIs diese Schriftartendateien benutzen dürfen. Dies ist eine Maßnahme, die verhindern soll, dass jeder, der will, Ihre Schriftartendateien per Referenz in seinen eigenen Projekten verwendet.

Downloadbare Schriftarten in HTML einbinden

Um innerhalb einer HTML-Datei downloadbare Schriftarten zu verwenden, müssen Sie die Schriftarten einem der folgenden Beispiele folgend referenzieren.

Beispiel 1 - pfr-Dateien (TrueDoc) nach HTML-Syntax einbinden:

<html><head><title>Test</title>
<link rel="fontdef" src="http://www.meine.com/fonts/chianti.pfr">
</head><body>
<font face="Chianti">Text in Beispielschriftart</font>
</body></html>

Beispiel 2 - pfr-Dateien (TrueDoc) nach CSS-Syntax einbinden:

<html><head><title>Test</title>
<style type="text/css">
@font-face { font-family:Chianti XBd BT;
             src:url(http://www.meine.com/fonts/chianti.pfr); }
</style>
</head><body>
<p style="font-family:Chianti XBd BT">Text in Beispielschriftart</p>
</body></html>

Beispiel 3 - eot-Dateien (Microsoft WEFT) nach CSS-Syntax einbinden:

<html><head><title>Test</title>
<style type="text/css">
@font-face { font-family:Chianti XBd BT;
             src:url(http://www.meine.com/fonts/chianti.eot); }
</style>
</head><body>
<p style="font-family:Chianti XBd BT">Text in Beispielschriftart</p>
</body></html>

Erläuterung:

Downloadbare Schriftarten werden im Kopf einer HTML-Datei eingebunden, die solche Schriftarten verwendet.

Eine downloadbare Schriftart nach Bitstream-Technologie (PFR-Datei) können Sie entweder mit einem <link>-Tag (wie in Beispiel 1) oder mit einer CSS Stylesheet-Definition (wie in Beispiel 2) einbinden. Benutzen Sie das <link>-Tag, wenn Sie in HTML mit <font face=> arbeiten. Davon ist aus heutiger Sicht allerdings abzuraten. Besser ist es, wenn Sie mit CSS arbeiten wie in Beispiel 2 gezeigt. Wenn Sie beide Formen benutzen, binden Sie die Schriftart nach beiden Mustern ein.

Das Einbinden von eot-Dateien nach der Microsoft-WEFT-Technologie brauchen Sie nicht selbst durchzuführen. Einträge von der Art, wie sie im obigen Beispiel 3 notiert sind, nimmt das Programm WEFT selbständig in den betroffenen HTML-Dateien vor. Es ist dann egal, ob Sie die Schriftart innerhalb der HTML-Datei als CSS Stylesheet-Angabe oder traditionell mit <font face=> verwenden. Der Internet Explorer 4 erkennt in jedem Fall den Bezug und überträgt die erforderliche Schriftart mit auf den Rechner des Anwenders.

Beachten Sie:

Allgemeine Beschreibungen zu den oben gezeigten HTML- und CSS-Notationen finden Sie innerhalb dieser Dokumentation an folgenden Stellen:

Seite Schriftarten mit Schriftartendatei in Stylesheets (CSS-Syntax zum Einbinden von Schriftartdateien)
Seite Logische Beziehungen einer HTML-Datei (HTML-Syntax für logische Verknüpfung zu anderen Dateien)

Die Bitstream TrueDoc-Schriftarten werden von Web-Servern nur dann korrekt an den aufrufenden Browser übertragen, wenn in der Konfiguration des Web-Servers ein Seite MIME-Typ für den entsprechenden Dateityp eingetragen ist. Bitten Sie gegebenenfalls Ihren Webmaster/Provider/Administrator, den erforderlichen Eintrag application/font-tdpfr für Dateien mit der Endung .pfr in der Konfiguration des Webservers für Sie vorzunehmen, oder tragen Sie diesen MIME-Typ selber ein, sofern Sie Zugriff auf die Webserver-Konfiguration haben.

nach oben
weiter | Seite Grafikformate für Web-Seiten
zurück | Seite Das Unicode-System
Teil von SELFHTML/Navigationshilfen Teil von Internationalisierung

© 2007 Seite Impressum


SELFHTML: Grafik

SELFHTML

Grafik
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML und Kapitel Stylesheets.
Dieser Abschnitt behandelt wichtige Grundkenntnisse zum Gestalten von Grafiken für Web-Seiten. Er ist jedoch kein Tutorial für das Arbeiten mit bestimmten Software-Produkten.
Der Abschnitt enthält folgende Seiten:

Seite Grafikformate für Web-Seiten
Seite Typische Grafiksorten für Web-Seiten
Seite Techniken und Begriffe der Bildbearbeitung
Seite Animierte GIF-Grafiken

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel über Grafik
Online-Seite WWW-Links zu anderen Seiten über Grafik und Design

nach oben

© 2007 Seite Impressum


SELFHTML: Grafik / Grafikformate für Web-Seiten

SELFHTML

Grafikformate für Web-Seiten
Informationsseite

nach unten Allgemeines zu Grafikformaten für Web-Seiten
nach unten Das GIF-Format
nach unten Das JPEG-Format
nach unten Das PNG-Format
nach unten Das LuraWave-Format
nach unten Das SVG-Format
nach unten

Allgemeines zu Grafikformaten für Web-Seiten

Im Web haben sich zwei Dateiformate für Grafiken auf breiter Front durchgesetzt, die von allen, auch den nicht so modernen Browsern "inline", also im eigenen Fenster angezeigt werden können: die Formate GIF und JPEG. Die Stärken beider Formate liegen jedoch auf unterschiedlichen Gebieten. Dazu kommt ein neues, viel versprechendes Format, das viele Vorteile von GIF und JPEG in sich vereint: das PNG-Format. Dieses Format wird von moderneren Browsern ebenfalls unterstützt, wenn auch noch uneinheitlich und oft nicht vollständig. Daneben existieren noch andere, beachtenswerte Lösungen, die aber nur einen kleinen Benutzerkreis haben, weil sie bei Browsern ein Plugin benötigen - z.B. das Format von LuraWave. Eines aber haben all diese Formate gemeinsam: es sind pixelorientierte Formate. Vektorgrafik ist im Web dagegen noch eine Seltenheit. Das dafür viel versprechendste Format, das auf XML basierende SVG-Format, entwickelte sich leider nur zögerlich. Es bleibt die Hoffnung, dass es dennoch angenommen wird.

In diesem Abschnitt werden die genannten Grafikformate kurz vorgestellt.

Das GIF-Format

Dateien des GIF-Formats haben die übliche Dateinamenendung .gif und den Seite MIME-Typ image/gif. In HTML lassen sich GIF-Grafiken mit Hilfe des img-Elements einbinden (siehe Seite Grafiken einbinden).

GIF steht für Graphics Interchange Format und wurde schon vor vielen Jahren vom Online-Anbieter CompuServe eingeführt. Es zeichnet sich durch eine hohe Kompression aus. Deshalb hat es sich im Online-Bereich, wo die Übertragung von Daten Geld und Zeit kostet, schnell durchgesetzt. Der heute weit verbreitete Standard des GIF-Formats ist das so genannte "89er-Format". Dieses Format bietet drei Möglichkeiten an, die das GIF-Format für den Einsatz im Web besonders interessant machen:

  • Interlaced: Eine Grafik, die mit der Option "interlaced" abgespeichert ist, wird beim Laden nicht zeilenweise eingelesen und aufgebaut, sondern schichtweise. Gerade beim Laden von Web-Seiten aus dem Netz ist das sehr hilfreich. Denn so erscheint die Grundstruktur der Grafik sehr schnell am Bildschirm des Anwenders. Beim weiteren Ladevorgang wird die Grafik dann immer deutlicher und feiner aufgelöst am Bildschirm angezeigt.
  • Animation: Das GIF-Format bietet die Möglichkeit, mehrere Grafiken in einer einzigen Grafikdatei zu speichern, verbunden mit Optionen zur zeitlichen Steuerung der Einzelgrafiken. Dadurch werden Seite animierte GIF-Grafiken möglich.
  • Transparente Farbe: Das GIF-Format arbeitet mit Seite Farbpaletten, also mit einer begrenzten Anzahl "indizierter Farben". Dabei besteht die Möglichkeit, eine dieser Farben als "transparent" zu definieren. Bei der Anzeige scheinen dann Elemente, die unterhalb der Grafik liegen, an den Stellen durch, wo die Grafik transparent ist. Einzelheiten zu den damit verbundenen Möglichkeiten werden im Abschnitt Seite Transparenz einer bestimmten Palettenfarbe beschrieben.

Ein Nachteil des GIF-Formats ist, dass es maximal 256 Farben pro Datei speichern kann. Ein Pluspunkt ist dagegen, dass GIF-Grafiken verlustfrei komprimieren. Aufgrund dieser Charakteristika ist das GIF-Format für hoch auflösende Grafiken wie Fotos nicht so sehr geeignet. Ideal ist das GIF-Format dagegen für typische Web-Grafiksorten wie Seite Buttons, Seite Dots, Seite Bars, Seite Symbole und Seite Cliparts.

Leider ist auch das GIF-Format nicht mehr ganz frei vom Schmutz der Abzockversuche im Internet. Die Firma Unisys, die ursprünglich den LZW-Algorithmus patentierte, den das GIF-Format benutzt, wirbelte Ende 1999 viel Staub auf, als sie bekannt gab, juristisch gegen nicht lizenzierte GIF-Grafiken im Web vorzugehen. Angesichts der Tatsache, dass es wohl in etwa so viele GIF-Grafiken im Web gibt wie Menschen auf der Erde, war dieses Vorhaben allerdings nicht besonders realistisch. Anbieter von Grafik-Software, die das GIF-Format unterstützt, sind allerdings lizenzpflichtig und werden auch kontrolliert. Deshalb gibt es vor allem in Freeware-Kreisen noch mancherorts Proteste und Aufrufe, das GIF-Format nicht mehr zu verwenden.

Das JPEG-Format

Dateien des JPEG-Formats haben die übliche Dateinamenendung .jpg, .jpeg oder .jpe und den Seite MIME-Typ image/jpeg. In HTML lassen sich JPEG-Grafiken mit Hilfe des img-Elements einbinden (siehe Seite Grafiken einbinden).

JPEG steht für Joint Photographic Expert Group, also nicht der Name des Grafikformats, sondern der Name der Korporation, die das Format entwickelt hat. Das JPEG-Verfahren ist ein Kompressionsalgorithmus für Datenströme, der auf dem Algorithmus DCT (Diskrete Cosinus Transformation) in Verbindung mit der Huffman-Kodierung basiert. Das gleichnamige Dateiformat für Grafiken ist einfach eine Anwendung dieses Algorithmus auf Pixelgrafiken. Mittlerweile wird der JPEG-Algorithmus auch auf Videos angewendet und hat das beliebte Video-Format MPEG hervorgebracht.

Das JPEG-Grafikformat komprimiert wie das GIF-Format ebenfalls sehr gut und hat gegenüber dem GIF-Format den Vorteil, dass es pro Bild bis zu 16,7 Millionen Farben speichern kann. Es arbeitet deshalb nicht wie das GIF-Format mit Farbpaletten bestimmter Farben, sondern mit dem gesamten Farbspektrum. Der Nachteil bei JPEG ist, dass es mit Verlust komprimiert. Je höher der Kompressionsfaktor, desto schlechter die Qualität der Grafik.

Beim JPEG-Format können Sie bei besseren Grafikprogrammen zwei Parameter selbst bestimmen:

  • DPI-Dichte: Das ist die Punktdichte (dpi = dots per inch). Bei JPEG-Dateien, die Sie nur für die Anzeige in Web-Seiten benötigen, genügt ein Wert zwischen 70 und 100 dpi. Falls Sie die Grafik ausdrucken wollen, benötigen Sie allerdings deutlich mehr dpi.
  • Kompressionsfaktor: Je höher der Kompressionsfaktor, desto schlechter die Bildqualität. Je geringer der Kompressionsfaktor, desto größer die Datei.

Verluste durch Kompression entstehen bei JPEG-Grafiken vor allem bei scharfen Farbübergängen im Bild, also bei Ecken und Kanten von abgebildeten Gegenständen ("Ränder fransen aus"). Für Bilder mit wenigen Farben, aber klaren Konturen, also z.B. für einfache Zeichnungen, scharfe Schriftzüge usw. ist das JPEG-Format deshalb nicht geeignet. Seine Stärke zeigt das Format dagegen beim Abspeichern von Fotos und anderen Grafiken, in denen sehr feine Farbverläufe vorkommen. Selbst bei geringer Kompression sind die Dateigrößen schon um ein Vielfaches kleiner als etwa bei Bitmap-Grafiken. Sogar den Bildschirm füllende Fotos lassen sich mit JPEG bei brauchbarer Qualität auf Dateigrößen bringen, die im Web als akzeptabel gelten können.

Es gibt eine Variante von JPEG-Grafiken, so genannte "progressive JPEG-Grafiken". Dabei wird, ähnlich wie beim GIF-Format in der Variante "interlaced", zuerst eine vollständige, aber noch undeutliche Fassung der Grafik am Bildschirm aufgebaut. Das erste, noch nicht ganz deutliche Bild kann bereits am Bildschirm angezeigt werden, nachdem etwa 15% der Grafikdatei an den aufrufenden Web-Browser übertragen wurden.

Das PNG-Format

Dateien des PNG-Formats haben die übliche Dateinamenendung .png und den Seite MIME-Typ image/png. In HTML lassen sich PNG-Grafiken mit Hilfe des img-Elements einbinden (siehe Seite Grafiken einbinden), wahlweise aber auch mit den Elementen embed oder object.

PNG bedeutet Portable Network Graphic (ausgesprochen: PING). Es handelt sich um ein Grafikformat, das eigens für den Einsatz im Web konzipiert wurde und dessen Normierung wie diejenige von HTML, CSS, XML und andere Web-Technologien vom W3-Konsortium besorgt wird. Die Empfehlung (Recommendation) des W3-Konsortiums zu PNG stammt aus dem Jahr 1996. Das entsprechende Dokument ist unter dem Titel englischsprachige Seite PNG (Portable Network Graphics) Specification auf den Seiten des W3-Konsortiums zu finden.

PNG soll die Vorteile von GIF und JPEG in sich vereinen und zeichnet sich durch folgende Charakteristika aus:

  • Verlustfreie Kompression: PNG komprimiert verlustfrei wie das GIF-Format. Der eingesetzte Kompressionsalgorithmus arbeitet dabei ähnlich wie der des ZIP-Formats. Wiederholungen von Pixelmustern im Bild werden durch Meta-Informationen über diese Muster ersetzt, was vor allem bei Grafiken wie Cliparts, Schriftzügen usw. zu hohen Kompressionsdichten führt. Weniger stark greift dieser Algorithmus dagegen bei Fotos und Grafiken mit vielen feinen Farbübergängen. Das ist ganz ähnlich wie beim Komprimieren von Daten zu ZIP-Dateien, wo sich Binärdateien mit wenigen erkennbaren Byte-Mustern weniger stark komprimieren lassen als z.B. Textdateien.
  • Farbtiefe plus Transparenz: PNG unterstützt wie das JPEG-Format 16,7 Mio. Farben, wahlweise aber auch das Abspeichern mit indizierten Farben, also mit einer begrenzten Farbpalette. So bleibt das Format flexibel und ist für alle Arten von Grafiken nutzbar. Neben den drei Farbwerten für Rot, Grün und Blau kann das PNG-Format zusätzlich noch einen vierten Wert pro Pixel speichern, nämlich den Alphakanal. Der Alphawert speichert den Transparenzgrad des Pixels. Auf diese Weise werden deutlich feiner abgestufte Transparenz-Effekte möglich, als es mit dem GIF-Format möglich ist.
  • Interlaced-Funktion: Wie das GIF-Format und auch das JPEG-Format in der Variante "progressive" unterstützt PNG das schichtweise Aufbauen der Grafik (Interlaced-Funktion). Bei PNG genügen bereits 1-2% übertragene Daten, um das Bild schemenhaft anzeigen zu können.
  • Informationen zur Gammakorrektur: das PNG-Format erlaubt das Abspeichern einer Reihe von Zusatzinformationen zum Bild, darunter den Gammawert, der z.B. bei der Aufnahme eines Fotos maßgeblich war. Web-Browser, die das Bild anzeigen, könnten diese Information beispielsweise dazu nutzen, um bei der Anzeige des Bildes eine automatische Gammakorrektur abhängig vom eingesetzten Bildschirm und Betriebssystem vorzunehmen. Dieses Feature kann vermeiden helfen, dass ein und dieselbe Grafik auf verschiedenen Bildschirmen und unter verschiedenen Betriebssystemen oft so unterschiedlich aussieht.
  • Informationen zu Bildherkunft und Copyright: das PNG-Format erlaubt das Abspeichern von Textfeldern zu Bildtitel, Bildautor, Bildbeschreibung, Copyright, Erstellungsdatum, Erstellungs-Software, Datenquelle sowie zu rechtlichen und sittlichen Absicherungshinweisen.

Animierte Grafiken wie beim GIF-Format sind mit dem PNG-Format allerdings nicht möglich.

Es gibt also insgesamt viele Gründe, die für das PNG-Format sprechen. Weniger als Konkurrenz zum JPEG-Format (JPEG komprimiert bei Fotos doch deutlich stärker als PNG - die PNG-Dateigrößen hoch auflösender Fotos sind nicht sonderlich web-freundlich), aber als Konkurrenz zum GIF-Format, das seit dem lizenzrechtlichen Hahn-im-Korb-Gebaren von Unisys etwas ins Zwielicht geraten ist. Das größte Problem von PNG ist eigentlich nur die zögerliche Unterstützung bei der Software. Zwar unterstützt Netscape das PNG-Format seit der Produktversion 4.04, und auch der Internet Explorer kann PNG-Grafiken seit Version 4.0 anzeigen. Auch immer mehr Grafikprogramme beherrschen das PNG-Format. Doch gab es dann bei einzelnen Zwischenversionen der Browser wieder Ausfälle bei der PNG-Unterstützung. Auch wurde das Format nicht vollständig unterstützt usw. Deshalb - und natürlich auch aus der Gewohnheit heraus - tut sich das PNG-Format noch schwer gegen das GIF-Format.

Das LuraWave-Format

Dateien des LuraWave-Formats haben die übliche Dateinamenendung .lwf und den Seite MIME-Typ image/x-wavelet. In HTML lassen sich LuraWave-Grafiken mit Hilfe der Elemente embed oder object einbinden (siehe Seite Objekte einbinden und Seite Multimedia einbinden (Netscape)).

LuraWave ist ein Dateiformat der Firma LuraTech für Pixelgrafiken. Es eignet sich vor allem für hoch auflösende Grafiken, also Fotos und Bilder mit feinen Farbübergängen. Bei solchen Grafiken macht sich der besondere Kompressionsalgorithmus bemerkbar, den das LuraWave-Format verwendet, und der den Algorithmen von JPEG und PNG überlegen ist. Der Lura-Algorithmus, der mit sogenannter Wavelet-Kompression arbeitet, bewahrt im direkten Vergleich mit JPEG bei einer gleichen Dateigrößenreduktion eines Originalbildes eine deutlich bessere Bildqualität als das JPEG-Format. Neben der besonders guten Kompression verfügt das LuraWave-Format über weitere Besonderheiten:

  • Skalierbare Größe: Aufgrund des Wavelet-Kompressionsalgorithmus ist es möglich, ähnlich wie bei einem Hologramm das Gesamtbild aus einem kleinen Teil davon zu rekonstruieren. Das erlaubt es, eine LuraWave-Grafik zu zoomen, also zu vergrößern, ohne dass die Grafik dadurch gleich unansehnlich pixelig wird.
  • Passwortschutz: LuraWave-Grafiken lassen sich in der Weise mit einem Passwort schützen, dass eine qualitativ minderwertigere Bildvariante öffentlich betrachtbar ist, während eine qualitativ hochwertigere Variante nur gegen Eingabe eines Passworts anzeigbar und bearbeitbar ist.

Zum Erstellen von LuraWave-Grafiken ist LuraWave-Software erforderlich. Die Software gibt es in Form von Plugins für bekannte Produkte wie Photoshop, Cumulus oder Paintshop Pro. Solche Programme können dann Grafiken als lwf-Dateien abspeichern. Es gibt auch ein separates Tool von LuraWave, das andere Grafikformate wie JPEG, BMP, TIFF usw. einlesen und die Grafiken dann im lwf-Format abspeichern kann. Die Plugins für die Profiprogramme und die Profiversion des separaten Grafiktools sind kostenpflichtig, eine Light-Version des separaten Tools ist kostenlos. Kostenlos sind ferner die leider erforderlichen Browser-Plugins. Infos zu den Produkten und Downloadmöglichkeiten gibt es auf den Web-Seiten von englischsprachige Seite LuraTech.

Das LuraWave-Format ist also eine technisch interessante Alternative vor allem zum JPEG-Format. Nachteil ist, dass es kein offener Standard ist, von bestimmter Software abhängig ist und von Web-Browsern nicht von Haus aus, sondern nur nach der Installation des Plugins unterstützt wird.

Das SVG-Format

Dateien des SVG-Formats haben die übliche Dateinamenendung .svg oder svgz und den Seite MIME-Typ image/svg+xml. In HTML lassen sich SVG-Grafiken mit Hilfe der Elemente embed oder object einbinden (siehe Seite Objekte einbinden und Seite Multimedia einbinden (Netscape)).

SVG bedeutet Scalable Vector Graphics. Es ist das einzige vektorgrafische der hier vorgestellten Formate. Im Gegensatz zu klassischen Formaten dieser Art, die in der Regel an kommerzielle Software gebunden sind, ist das SVG-Format eine Entwicklung des W3-Konsortiums und genauso wie andere dort normierte Sprachen, also wie HTML, CSS, XML und auch PNG, plattformübergreifend, offen dokumentiert und frei verwendbar. Aktuelle Informationen und die Spezifikation von SVG finden Sie auf den Seiten des W3-Konsortiums über die Einstiegsseite englischsprachige Seite Scalable Vector Graphics (SVG).

Vektorgrafische Formate beschreiben nicht, welche Farbanteile ein Pixel im Bild hat, sondern sie beschreiben Objekte. Es gibt Objekte wie gerade und nach einem Algorithmus gekrümmte Linien, runde und winklige Flächen, Text usw. All diese Objekte haben im Bild eine bestimmte Position und bestimmte Ausmaße, Farben und andere Eigenschaften. Flächen können einfach, mit einem Farbverlauf oder mit einem Bitmap-Muster gefüllt sein, 3D-Effekte und Farbfilter zugewiesen haben. Objekte können auch zu Objektgruppen zusammengefasst sein. In der Datei stehen dann nur die Beschreibungen der Objekte. Die anzuzeigende Grafik wird zur Laufzeit aus den beschreibenden Daten erzeugt.

Ideal ist diese Grafikform für das Web insofern, als die Beschreibungsdaten für vektorgrafische Objekte in der Regel viel weniger Speicherplatz benötigen als pixelorientierte Grafiken. Gerade für Grafiken, die Symbole enthalten, Logos oder Cliparts, wäre das SVG-Format eine sinnvolle Alternative zum GIF-Format. Ideal geeignet ist es für jede Art von technischer Grafik, für Illustrations- und Konstruktionsgrafik. Das SVG-Format zeichnet sich durch folgende besonderen Eigenschaften aus:

  • XML-basiert: SVG ist eine Kapitel XML-basierte Sprache. Das Format ist dadurch jederzeit gegen eine DTD validierbar, und, was ganz wichtig ist - es ist ein Klartextformat. SVG-Grafiken sind daher z.B. für Suchmaschinen nach Textinhalten durchsuchbar. Ferner ist es problemlos möglich, SVG-Grafiken dynamisch mit Scripts zu erzeugen, sei es serverseitig mit Kapitel CGI-Scripts, oder client-seitig mit einer Sprache wie Kapitel JavaScript. Mit Hilfe des Document Object Model (DOM) ist sogar der direkte dynamische Zugriff auf jedes Beschreibungsdatum einer SVG-Datei möglich. SVG eignen sich deshalb z.B. hervorragend für interaktive Grafiken, bei denen ein Anwender in einem HTML-Formular Parameter eingibt, aus denen die Grafik dann zusammengestellt wird, oder für dynamisch erzeugte Balken- und Tortendiagramme zu Server-Statistiken.
  • XLink-Unterstützung: XLink ist ein Schema zum Beschreiben von Verweisen (Hyperlinks) in XML. Auch auf SVG ist dieses Schema anwendbar. Dadurch ist es möglich, verweis-sensitive SVG-Grafiken zu erstellen. Die Verweise können zu beliebigen lokalen oder weltweiten Zielen führen.
  • Zoom- und Schwenkfähigkeit: Vektorgrafiken lassen sich verlustfrei zoomen. So können kleine Grafiken für sehschwache Menschen problemlos vergrößert werden. Ebenso lassen sich solche Grafiken leicht drehen (schwenken).
  • SMIL-Schnittstelle: SMIL ist ebenfalls eine vom W3-Konsortium normierte Sprache. Sie beschreibt Zeitschienen für multimediale Abläufe. Zusammen mit SMIL lassen sich dynamische SVG-Grafiken mit anderen Elementen wie Sound kombinieren.

Neuere Versionen bekannter vektorgrafischer Software-Produkte unterstützen das SVG-Format, so etwa CorelDraw ab Version 10. Andere, als erschwingliche Shareware-Programme vertriebene Produkte wie das Programm WebDraw des Herstellers Jasc, von dem auch das beliebte Pixelprogramm Paintshop Pro stammt, helfen ebenfalls beim Erstellen von SVG-Grafiken. Theoretisch genügt allerdings auch ein beliebiger Texteditor - so wie bei allen Klartextformaten der XML-Familie. Wer bereit ist, sich auf die SVG-Sprache einzulassen, kann tatsächlich mit Texteditor und SVG-Viewer ausgerüstet SVG-Grafiken erstellen. Und SVG-Viewer gibt es kostenlos. Der bekannteste ist von Adobe. Der Adobe-Viewer lässt sich auch als Browser-Plugin installieren. Auf diese Weise sind Browser wie Netscape oder der Internet Explorer in der Lage, SVG-Grafiken im Web anzuzeigen. Leider fehlt jedoch noch die native Unterstützung von SVG durch die Browser. Alles, wofür der Anwender ein Plugin braucht, entwickelt sich nur zögerlich. Eine im Browser eingebaute SVG-Unterstützung so wie für GIF und JPEG wäre daher dringend wünschenswert. Denn das SVG-Format ist vermutlich die spannendste Entwicklung im Bereich Grafik, die derzeit überhaupt stattfindet, und es eignet sich wie kaum ein anderes für etliche statische und dynamische Grafiksorten im Web.

nach oben
weiter | Seite Typische Grafiksorten für Web-Seiten
zurück | Seite Downloadbare Schriftarten
Teil von SELFHTML/Navigationshilfen Teil von Grafik

© 2007 Seite Impressum


SELFHTML: Grafik / Typische Grafiksorten für Web-Seiten

SELFHTML

Typische Grafiksorten für Web-Seiten
Informationsseite

nach unten Buttons (Schaltflächen)
nach unten Dots (Auflistungspunkte)
nach unten Bars (Trennleisten)
nach unten Wallpapers (Hintergrundbilder)
nach unten Symbole (Textergänzung oder Textersatz)
nach unten Cliparts (Illustrationen)
nach unten Thumbnails (Vorschaugrafiken)
nach unten Fotos
nach unten Blinde Pixel
nach unten Grafische Layout-Elemente
nach unten

Buttons (Schaltflächen)

Beispiel-Seite Anzeigebeispiel: Typische Buttons

Buttons werden auf Web-Seiten gerne verwendet, um Verweise grafisch und attraktiv darzustellen. Achten Sie dabei jedoch immer auf die gesamte zu ladende Datenmenge. Bei einem halben Dutzend Verweisen sind kleine grafische Buttons durchaus akzeptabel, nicht aber bei Dutzenden von Verweisen auf einer Seite.

Näheres zum Einbinden in HTML wird im Abschnitt Seite Grafiken als Verweise beschrieben. Verwenden Sie bei mehreren Buttons auf einer Web-Seite möglichst eine einheitliche Seite Farbpalette!

Das typische HTML-Konstrukt für anklickbare Verweis-Buttons lautet:

<a href="datei.html">
<img src="button.gif" width="100" height="25" alt="Button" border="0">
</a>

Dots (Auflistungspunkte)

Beispiel-Seite Anzeigebeispiel: Typische Dots

Nur Text am Bildschirm ist langweilig und ermüdend. Das Auge sucht nach Augenweiden. Mit kleinen, farbigen Punkten, Quadraten, Dreiecken und informellen Flecken, die aufgrund ihrer Größe nur wenig Speicher brauchen, können Sie textlastige Information augenfreundlich unterstützen. Wichtig ist hierbei zu beachten, dass der Leser dazu neigt, den Dots irgendeine Bedeutung zuzuordnen, z.B. "wo dieser blaue Punkt steht, folgt ein Produktname". Verwenden Sie Dots daher so, dass diese eine nachvollziehbare Bedeutung haben. Verwenden Sie nicht lauter unterschiedliche Dots auf einer Web-Seite, sondern wiederholen Sie die gleichen Dots mehrmals pro Web-Seite. Das ist nicht langweilig, sondern sorgt für ein sauberes Erscheinungsbild und spart beim Anwender Ladezeit, da die betreffende Grafik nur einmal geladen werden muss.

Dots sind zum Beispiel in Seite Aufzählungslisten sinnvoll und lassen sich mit Hilfe der CSS-Eigenschaft Seite list-style-image sogar ganz elegant einbinden. Ein typisches HTML-Konstrukt sieht dann etwa so aus:

<ul style="list-style-image:url(dot.gif)">
<li>Listenpunkt</li>
<li>anderer Listenpunkt</li>
</ul>

Bars (Trennleisten)

Beispiel-Seite Anzeigebeispiel: Typische Bars

HTML bietet zwar die Möglichkeit an, Seite Trennlinien in den Text einzufügen, um Information übersichtlicher zu strukturieren. Wer auf seinen Web-Seiten jedoch etwas Besonderes bieten will, verwendet grafische Linien. Ähnlich wie Dots benötigen Bars wenig Speicher. Auch bei Bars gilt: verwenden Sie nicht lauter unterschiedliche Bars auf einer Web-Seite, sondern wiederholen Sie die gleichen Bars mehrmals pro Web-Seite. Das ist nicht langweilig, sondern sorgt für ein sauberes Erscheinungsbild und spart beim Anwender Ladezeit, da die betreffende Grafik nur einmal geladen werden muss.

Bei sauber kodiertem HTML sollten Grafiken innerhalb anderer Block-Elemente notiert werden. Ein typisches HTML-Konstrukt zum Notieren einer Bar, das mit den CSS-Eigenschaften Seite margin-top und Seite margin-bottom auch gleich Abstände zum vorhergehenden und nachfolgenden Inhalt definiert, könnte etwa so aussehen:

<div style="margin-top:20px; margin-bottom:20px;">
<img src="bar.gif" width="600" height="5" border="0" alt="Trennlinie"></div>

Wallpapers (Hintergrundbilder)

Beispiel-Seite Anzeigebeispiel: Typische Wallpapers

Hintergrundbilder (Wallpapers) sind seit ihrer Einführung durch Netscape zu einem Dauerrenner im Web geworden. Wenn Sie nichts anderes angeben, wird ein Hintergrundbild so oft aneinandergereiht dargestellt, wie es erforderlich ist (Tapetenmuster- oder Kacheleffekt). Wenn die verwendete Grafik an den Seiten nicht einheitlich aussieht, entstehen sichtbare Kacheln. Das kann in manchen Fällen gewollt sein, in anderen aber zeugt es auch von Dilettantismus.

Es gibt mehrere Typen von Hintergrundbildern. Die klassischen und meistverwendeten stellen irgendeine informelle Struktur dar und bewirken auf diese Weise z.B. den visuellen Effekt einer faserigen, hölzernen, metallenen oder papiernen Oberfläche. Andere Hintergrundbilder stellen durch klare Farbflächen sichtbare Kacheln dar und bewirken dann im Kacheleffekt geometrische Muster. Und dann gibt es noch Hintergrundbilder vom Typ "Browser-Überlistung". Das sind Grafiken, die extrem breit sind (z.B. 3000 Pixel), also bei üblichen Fensterbreiten im Browser nicht mehrmals nebeneinander angezeigt werden. In der Höhe haben sie dagegen oft nur 1 bis 5 Pixel. Die ersten 200 Pixel dieses langen Streifens enthalten dann beispielsweise ein Rechteck in einer bestimmten Farbe, während der gesamte Rest der Grafik eine andere Farbe hat. Im Browser-Fenster entsteht dann links ein Farbstreifen, über den sich beispielsweise Buttons zur Navigation platzieren lassen.

So pfiffig die Idee der Hintergrundbilder ist, so viel kann man dabei auch verkehrt machen. Bei allzu auffälligen Hintergrundbildern wird der Anwender zu sehr vom Vordergrund, dem eigentlichen Inhalt, abgelenkt. In vielen Negativbeispielen im Web leidet auch die Lesbarkeit der Textinformation unter dem Hintergrundbild.

Generell gilt: wenn Sie auf einer Web-Seite wichtigen Text anbieten wollen, sollte ein Hintergrund-Wallpaper angenehm, aber unauffällig sein. Nur bei besonderen grafischen Effekten ist der Einsatz einer "aufregenden" Hintergrundgrafik gerechtfertigt.

Um den gesamten Inhalt des Browser-Anzeigefensters mit einer Hintergrundgrafik zu unterlegen, wird die Hintergrundgrafik im einleitenden <body>-Tag der HTML-Datei eingebunden:

<body background="hintergrund.jpg" text="#000000">

Mit Hilfe der CSS-Eigenschaft Seite background-image ist es außerdem möglich, auch anderen, untergeordneten HTML-Elementen einen Wallpaper-Effekt zuzuordnen. Im Beispiel eines Textabsatzes könnte das so aussehen:

<p style="background-image:url(hintergrund.jpg)">Text<p>

Symbole (Textergänzung oder Textersatz)

Beispiel-Seite Anzeigebeispiel: Typische Symbole

Von allen Grafiksorten ist dies wohl die inhaltlich wichtigste. Vor allem bei Textsorten wie technischer Dokumentation oder wissenschaftlichen Texten ist es dem Autor schon fast als Faulheit oder Ignoranz anzukreiden, wenn er auf Symbole verzichtet. Denn gerade beim Online-Lesen von Texten lesen die meisten Anwender quer, d.h. sie lesen nicht gemütlich Satz für Satz, sondern suchen ständig nach Orientierungsmöglichkeiten, um schnell zu der gewünschten Information zu gelangen. Hierbei sind Symbole eine hervorragende Orientierungshilfe.

Symbole sollten sich an geltenden Standards orientieren. Das ist kein Ausdruck von Phantasielosigkeit, sondern erleichtert die intuitive Orientierung. Eine Grafik beispielsweise, die eine kunstvolle Ziffer "8" enthält und dahinter die drei Buchstaben "ung", erschließt sich eben nicht so schnell wie ein Warndreieck mit Ausrufezeichen oder ein erhobener Zeigefinger. Symbole sollten auf den Anwender so wirken, dass er keinen Augenblick über die Bedeutung der Grafik im Zweifel ist.

Symbolgrafiken können in HTML an ganz verschiedenen Stellen vorkommen, beispielsweise vor Verweisen, um Art und Verzweisziel zu charakterisieren, oder vor Absätzen, die Text eines bestimmten Typs enthalten, z.B. eine Warnung, eine Zusatzinfo, ein Hinweis auf andere Information oder dergleichen.

Cliparts (Illustrationen)

Beispiel-Seite Anzeigebeispiel: Typische Cliparts

Cliparts sind aussagekräftige, oft humorvolle Grafiken, die größere Texte ansprechend auflockern können. Wichtig ist es, Cliparts so einzusetzen, dass sie zu der umgebenden Textinformation eine sinnvolle Ergänzung bilden. Idealerweise bringt eine Clipart-Grafik genau das auf den Punkt, was tausend Worte nicht zu sagen vermögen.

Manche Web-Seiten sind vollgepfropft mit irgendwo wahllos "besorgten", fertigen Cliparts. Dabei werden meist zwei schwere Fehler begangen: erstens sind zu viele verschiedene Grafiken an allen Ecken und Enden schlecht, weil jede einzelne Aufmerksamkeit erzwingt und beim Betrachter daher ein spontanes Gefühl von Stress, Überforderung und Orientierungslosigkeit entsteht. Und zweitens passen die Grafiken oft in Farbe, Größe und Stil nicht zueinander. Alles deutet darauf hin, dass da jemand wahllos eine der zahlreichen auf dem Markt erhältlichen CD-ROMs mit Clipart-Sammlungen ausgeschlachtet hat, aber ohne jedes Gespür für grafische Harmonie. Cliparts machen sich dann gut, wenn sie ein Gegengewicht zu vorhandenen Texten darstellen und einen nachvollziehbaren Bezug zum Text herstellen. Ideal sind Clipart-Serien, wo beispielsweise eine lustige Figur verschiedene Posen einnimmt und damit einen Textbezug herstellt.

Um Cliparts in HTML neben Text anzuordnen, bieten sich zwei Möglichkeiten an. Die eine ist, den Seite Text um die Grafik fließen zu lassen. Das folgende typische Beispiel richtet eine Grafik rechts neben dem Text eines Absatzes aus, und der Text fließt um die Grafik:

<p><img src="clipart.gif" width="200"
height="250" alt="Clipart" border="0"
align="right" hspace="10" vspace="5">
Text des Absatzes</p>

Die andere Möglichkeit besteht darin, Text und Grafik mit Hilfe einer Seite blinden Tabelle zu positionieren. Das folgende Beispiel zeigt das Prinzip:

<table border="0" cellspacing="10">
<tr><td valign="top">
<img src="clipart.gif" width="200" height="250" alt="Clipart" border="0">
</td><td valign="top">
Text links neben der Grafik
</td></tr></table>

Thumbnails (Vorschaugrafiken)

Beispiel-Seite Anzeigebeispiel: Typische Thumbnails

Leider stehen nicht allen Besuchern von Web-Seiten solche Bandbreiten der Datenübertragung zur Verfügung, die es erlauben, "mal eben" eine wunderschöne, aber speicherfressende Grafik am Bildschirm anzuzeigen. Wenn Sie großformatige Fotos oder Landkarten auf Ihren Web-Seiten anbieten, sollten Sie diese nicht "ohne Vorwarnung" in Seiten einbinden. Stattdessen sollten Sie eine stark verkleinerte Version der betreffenden Grafik einbinden. Die verkleinerte Version sollte gerade so groß sein, dass der Anwender entscheiden kann, ob er die Grafik in voller Größe betrachten möchte oder nicht. Die verkleinerte Grafik sollte anklickbar sein und beim Anklicken die große Grafik aufrufen, z.B. in einem neuen Anzeigefenster. Ein typisches HTML-Konstrukt dafür ist:

<a href="bild.jpg" target="_blank">
<img src="minibild.jpg" width="100" height="80" alt="Vorschau" border="1">
</a>

Fotos

Beispiel-Seite Anzeigebeispiel: Typische Fotos

Viel zu viele Web-Seiten bieten viel zu wenig Fotos an. Dabei sind Menschen, also Besucher von Web-Seiten, doch von Natur aus so neugierig und freuen sich immer, wenn sie Fotos zu sehen bekommen. Im Zeitalter der preiswert gewordenen Digitalkameras und Scanner ist es auch wirklich kein großes Problem mehr, eigene Aufnahmen als Pixelgrafiken in den Computer zu bekommen. Was Sie dann nur noch brauchen, ist ein Grafikprogramm, mit dem Sie die Bilder gegebenenfalls auf eine web-gerechte Größe bringen können, und mit dem Sie solche Bilder in einem geeigneten Seite Grafik-Format wie JPEG abspeichern können. Bei den meisten Scannern und Digitalkameras gehören solche Programme als Zugabe zum Produkt.

Fotos auf Web-Seiten brauchen auch gar nicht sonderlich großformatig sein. Im Gegenteil - das bricht meistens nur das Seiten-Layout auf, sorgt für lange Ladezeiten beim Anwender und sieht meistens nicht mal besonders gut aus. Bilder von Digitalkameras, die mehrere "Megapixel" Auflösung anbieten, sollten also erst mal in der Größe reduziert werden. Wichtig ist dabei, dass volle 16,7 Mio. Farben eingestellt sind. Gute Grafikprogramme besitzen ausgereifte Algorithmen, sodass eine Größenreduzierung dem Erscheinungsbild des Fotos keine große Gewalt antut. Wichtig ist bei Fotos, dass die Größenreduktion über die Angabe von gewünschten Pixeln für Breite und Höhe erfolgt, nicht über Angaben aus dem Print-Bereich, wie Zentimeter oder Zoll. Für ansprechende Bilder auf Web-Seiten reichen meist 200 bis 400 Pixel für die kürzere Seite und 300 bis 600 Pixel für die breitere Seite. Dabei entstehen bei JPEG und mittlerer Kompression auch akzeptable Dateigrößen, die in der Regel unter 100 Kilobyte liegen.

Blinde Pixel

HTML-Puristen bekommen einen nervösen Hautausschlag, wenn sie von "blinden Pixeln" hören. Aber besser als diesen Trick totzuschweigen ist es, ihn zu verraten und darauf hinzuweisen, warum und wieso er nicht selten eingesetzt wird, und welche Probleme damit verbunden sein können.

Der blinde Pixel ist eine Erfindung von David Siegel, einem der frühen Gurus des Web-Designs. Verärgert über das Verhalten bei Web-Browsern, Tabellen nicht mit den in HTML notierten Attributwerten für width und height darzustellen, wenn der Zelleninhalt schmaler ist und Nachbarzellen relativ viel Inhalt haben, erzwang er den gewünschten Raum einfach mit Hilfe einer unsichtbaren Grafik.

Der Trick besteht aus zwei Teilen. Im ersten Teil wird eine sehr kleine GIF-Grafik erzeugt, die überhaupt nichts darstellt, sondern nur aus einer einfarbigen Fläche besteht. Es ist besser, wenn die Grafik nicht wirklich nur 1 mal 1 Pixel groß ist, sondern ca. 5 mal 5 Pixel. So werden Probleme bei einigen Browsern vermieden. Die eine Farbe, aus der die GIF-Grafik besteht, wird sodann als Seite transparent definiert. Der Effekt ist, dass die Grafik Raum beansprucht, aber nicht sichtbar ist. Darunter liegende Farben, etwa definierte Hintergrundfarben von Tabellenzellen, in denen die unsichtbare Grafik eingebunden wird, scheinen durch.
Der zweite Teil des Tricks besteht in der Möglichkeit, beim Einbinden der unsichtbaren Grafik die Attribute width und height im <img>-Tag auf beliebige gewünschte Werte zu setzen. Die Grafik wird dann zwar vom Browser verzerrt, aber da sie ja unsichtbar ist, sieht man auch nichts von der Verzerrung.
So lassen sich mit der einen Grafik, die nur ein paar dutzend Byte groß ist, beliebige horizontale und vertikale Räume und Abstände erzwingen.

Der folgende HTML-Ausschnitt zeigt eine typische Anwendung. Die Grafik wird in zwei nebeneinander liegenden Tabellenzellen gleich zu Beginn referenziert. Ihre Höhe wird in beiden Referenzen auf 1 Pixel verzerrt, und ihre Breite auf den jeweils gewünschten Wert. Auf diese Weise erhält die Tabelle zwei Spalten mit unumstößlichen Mindestbreiten:

<table border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">
<img src="pixel.gif" width="200" height="1" alt="" border="0">
Hier folgt der Inhalt der ersten Spalte, die mindestens 200 Pixel breit ist.
</td><td valign="top">
<img src="pixel.gif" width="400" height="1" alt="" border="0">
Hier folgt der Inhalt der zweiten Spalte, die mindestens 400 Pixel breit ist.
</td></tr></table>

Unsauber ist die Methode mit dem blinden Pixel insofern, als hässliche "broken-image"-Symbole angezeigt werden, wenn die Grafik beim Übertragen der Web-Seite an den Browser nicht übertragen wird, z.B. weil der Anwender den Ladevorgang abbricht oder das Anzeigen von Grafiken abgeschaltet hat. Darüber hinaus wird es von Puristen als Zweckentfremdung von Grafik und HTML-Eigenschaften empfunden, solche Mittel einzusetzen. Und schließlich ist das Erzwingen fester Breiten ohnehin zweifelhaft, da der Anwender dann beispielsweise bei der Anzeige in nicht genügend großen Browser-Fenstern gezwungen ist, quer zu scrollen, was nicht besonders anwenderfreundlich ist. Andererseits ist der blinde Pixel ein Notbehelf, um fehlende Möglichkeiten in HTML und CSS auszugleichen. Mittlerweile sind zwar bestimmte CSS-Eigenschaften zur Seite Positionierung von Elementen, die den Zweck des blinden Pixels ebenfalls erfüllen, verfügbar, aber nur in neueren Browsern.

Grafische Layout-Elemente

Grafiken dienen beim Web-Design nicht selten dazu, Dinge zu realisieren, die mit HTML und CSS (noch) nicht möglich sind. Dazu gehören beispielsweise Rundbögen. Solche grafischen Elemente empfindet der unbedarfte Betrachter einer Web-Seite nicht als Grafiken "auf der Web-Seite", sondern als Basisbestandteile der Formgebung. Ähnlich wie bei blinden Pixeln fallen solche Grafiken dann negativ auf, wenn sie beim Laden der Seite nicht übertragen werden und ein "broken-image" in der Anzeige erzeugen.

Eingesetzt werden solche grafischen Bestandteile meistens in Seite blinden Tabellen oder Seite absolut positionierten Elementen. Durch nahtloses Aneinanderfügen von Tabellenzellen oder positionierten Elementen, die als Inhalt eine entsprechende Grafik haben, lassen sich solche Layout-Effekte wie die im Anzeigebeispiel erzielen. Bei Verwendung von blinden Tabellen für solche Effekte ist es wichtig, dass die Werte für die Attribute border, cellspacing und cellpadding explizit auf 0 gesetzt werden. Ein typisches HTML-Konstrukt sieht etwa so aus:

<table border="0" cellspacing="0" cellpadding="0"><tr>
<td><img src="rundbogen.gif" width="100" height="100" alt="" border="0"></td>
<td><img src="balken_oben.gif" width="500" height="100" alt="" border="0"></td>
</tr><tr>
<td><img src="balken_links.gif" width="100" height="500" alt="" border="0"></td>
<td><!-- Inhalt wie Text, andere Grafiken - oft auch "innere Tabellen" usw. --></td>
</tr></table>

nach oben
weiter | Seite Techniken und Begriffe der Bildbearbeitung
zurück | Seite Grafikformate für Web-Seiten
Teil von SELFHTML/Navigationshilfen Teil von Grafik

© 2007 Seite Impressum


SELFHTML: Grafik / Techniken und Begriffe der Bildbearbeitung

SELFHTML

Techniken und Begriffe der Bildbearbeitung
Informationsseite

nach unten Allgemeines zur Bildbearbeitung von Raster- bzw. Pixelgrafiken
nach unten Bildgröße, dpi und Pixel
nach unten Farbtiefen, Farbmodelle und Farbkanäle
nach unten Farbpaletten und indizierte Farben
nach unten Alphakanal und echte Transparenz
nach unten Transparenz einer bestimmten Palettenfarbe
nach unten Dithering (Error-Diffusion)
nach unten Graustufen
nach unten Helligkeit, Sättigung und Kontrast
nach unten Histogramm
nach unten Gammakorrektur
nach unten Filter-Effekte
nach unten Anti-Aliasing
nach unten

Allgemeines zur Bildbearbeitung von Raster- bzw. Pixelgrafiken

Bildbearbeitung ist eine Welt für sich und kann im Rahmen der vorliegenden Dokumentation nur gestreift werden. Die Bearbeitung von Grafiken ist auch immer noch stark an die Fähigkeiten einzelner Software-Produkte gebunden. Wenn Sie Grafiken für Web-Seiten selbst erstellen oder bearbeiten wollen, brauchen Sie deshalb auf jeden Fall ein professionelles oder zumindest semi-professionelles Grafikprogramm für Pixelgrafik. Betriebssystem-Bordmittel wie Paint unter Windows reichen dazu nicht aus. Das führende Produkt zur Bildbearbeitung ist wohl nach wie vor Photoshop. Andere Programme, die deutlich preiswerter oder sogar Freeware sind und sich im Vergleich zu Photoshop aber nicht verstecken brauchen, sind ebenfalls erhältlich. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie eine Software-Übersicht:

Online-Seite Grafik-Programme

Um die Funktionen solcher Grafikprogramme richtig einzusetzen, benötigen Sie Kenntnisse. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu Grafik-Tutorials im Web:

Online-Seite Design, Grafik, Fonts

Einige wichtige Begriffe und Funktionen der Bildbearbeitung werden auch in diesem Abschnitt behandelt. Dabei geht es um die Technik der Rasterbilder. Rasterbilder sind einfach alle Bilder, deren Inhalt nicht durch vektorielle Angaben beschrieben sind, sondern durch Raster von Bildpunkten. Ein für Bildschirmgrafiken optimales Raster sind Bildschirmpixel. Pixelgrafiken sind also eine Form von Rasterbildern. Die beiden heute verbreitetsten Formate für Web-Grafiken, das Seite GIF-Format und das Seite JPEG-Format, sind beide auf das Abspeichern solcher Pixelgrafiken spezialisiert.

Bildgröße, dpi und Pixel

Wenn Sie eine Pixelgrafik neu erstellen, müssen Sie zunächst die Bildgröße durch Angabe von Breite und Höhe der Grafik festlegen.

Eine Pixelgrafik (oder Rastergrafik) besteht - im Gegensatz zu einer Vektorgrafik - aus einer Anzahl von Bildpunkten, genannt Pixel. Die Breite einer solchen Grafik ergibt sich dann aus der Anzahl der Pixel, die horizontal in einer Reihe liegen, und die Höhe aus der Anzahl der Pixel, die vertikal in einer Reihe liegen. Solange alles am Bildschirm bleibt, geht diese einfache Rechnung auf. Und solange Sie Pixelgrafiken nur für den Einsatz auf Web-Seiten benötigen, die am Bildschirm angezeigt werden, brauchen Sie sich über andere Probleme der Bildgröße auch keine Gedanken machen.

Die Probleme entstehen erst, wenn eine Pixelgrafik auf einem anderen, nicht pixel-orientierten Medium ausgegeben werden soll. Bei der Ausgabe auf Papier etwa, also beim Drucken, muss festgelegt werden, wie "groß" ein Pixel auf dem Papier sein soll, denn im Gegensatz zum Bildschirm gibt es auf Papier keine vorgegebenen Pixel. Beim Druck gibt es druckbare Punkte. Je dichter sie zusammen liegen, desto feiner die Auflösung des ausgedruckten Bildes. Diese Dichte wird in Dots per Inch (dpi) gemessen.

Da nun viele Pixelgrafiken für den Druck gedacht sind, bieten die meisten Grafikprogramme beim Festlegen der Bildgröße zwei oder mehrere Varianten an. Die eine besteht darin, Breite und Höhe des Bildes in Pixeln anzugeben, die andere darin, eine dpi-Dichte zu wählen oder die Größe des Bildes in Maßeinheiten wie Zentimetern oder Zoll bzw. Inch zu bestimmen. Die zweite Variante ist auf jeden Fall nur für die Weiterverarbeitung der Grafik für den Druck interessant. Um die Größe eines Bildes für die Bildschirmanzeige zu bestimmen, sollten Sie stets die Variante wählen, die Bildgröße über die Angabe von Pixeln für Breite und Höhe zu bestimmen.

Bereits vorhandene Pixelgrafiken haben entweder schon die Größe am Bildschirm, in der Sie sie für den Einbau in Ihre Web-Seiten brauchen können, oder die vorhandenen Grafiken sind am Bildschirm zu groß oder zu klein.

Wenn das Bild zunächst viel größer ist, als Sie es für die Bildschirmanzeige benötigen, müssen Sie es durch Festlegen von geringeren Pixelwerten für Breite und Höhe verkleinern. Erforderlich ist das beispielsweise bei Fotos von Digitalkameras, die oft mehrere Megapixel groß sind und am Bildschirm bei 1:1-Betrachtung riesig wirken. Auch Grafiken, die durch Einscannen bei hoher dpi-Zahl entstanden sind, sind so groß. Zum Herunterrechnen der Größe eines Bildes besitzen moderne Grafikprogramme ausgereifte Algorithmen. Einige bieten zum so genannten "Resample", also zum Neuberechnen des Bildinhaltes für eine andere Bildgröße, auch mehrere Algorithmen zur Auswahl an. Zwei Faktoren sind zum Resample auf jeden Fall wichtig: es sollte die volle Farbtiefe (z.B. 16,7 Millionen Farben) eingestellt sein, und es sollte proportional verkleinert werden, d.h. die Seitenverhältnisse sollten beibehalten werden, damit das Grafikprogramm die Grafik beim Verkleinern nicht auch noch zusätzlich verzerren muss.

Wenn das Bild am Bildschirm kleiner ist, als Sie es haben möchten, sieht die Sache schlecht aus. Durch "Resample" können Sie eine Grafik zwar nicht nur verkleinern, sondern auch vergrößern. Doch die Ergebnisse sind dabei oft unbefriedigend. Denn es ist leichter, aus viel Information weniger zu machen (wie beim Verkleinern), als aus wenig Information mehr (wie beim Vergrößern). In solchen Fällen ist es meist besser, sich mit der zu kleinen Bildgröße abzufinden.

Farbtiefen, Farbmodelle und Farbkanäle

Unter der Farbtiefe einer Grafik wird verstanden, wie viele verschiedene Farbtöne in der Grafikdatei gespeichert werden können. Bei Pixelformaten gibt es folgende typischen Farbtiefen:

  • 2 Farben (schwarz/weiß)
  • 16 Farben
  • 256 Farben
  • 16,7 Mio. Farben

Das Seite GIF-Format unterstützt 2, 16 und 256 Farben, das Seite JPEG-Format 16,7 Mio. Farben, ebenso wie das Seite PNG-Format. Dass in einer Datei so viele Farben gespeichert werden können, bedeutet aber noch lange nicht, dass Anwender tatsächlich so viele Farben sehen. Denn wie viele Farben beim Anwender angezeigt werden können, hängt von der eingesetzten Hardware (Grafikkarte, Bildschirm) ab. Nur die wenigsten Anwender verfügen über Hardware, mit deren Hilfe volle 16,7 Mio. Farben angezeigt werden können. Viele heutige Standard-PCs bieten Farbtiefen zwischen 16.000, 32.000 oder 64.000 Farben an.

Bei Pixelgrafiken wird für jeden Pixel dessen Farbe gespeichert. Um die Farben in computer-gerechte Darstellungsform zu bringen, müssen sie als Zahlenwerte dargestellt werden. Das ist ganz ähnlich wie bei der Umsetzung von Seite Zeichen in Bits und Bytes. Bei der numerischen Repräsentation von Farben im Computer gibt es verschiedene Modelle. Die beiden bekanntesten Modelle sind:

  • Das RGB-Modell: Beim RGB-Modell wird eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grün und Blau definiert. Jede Farbe hat also einen Rotwert, einen Grünwert und einen Blauwert. Jeder der drei Werte wird durch Zahlen zwischen 0 und 255 definiert. Der Wert 0 bedeutet: keinen Anteil an der betreffenden Grundfarbe, der Wert 255 bedeutet: maximalen Anteil an der betreffenden Grundfarbe. Ein dunkles Blau hat nach diesem Schema z.B. die Farbwerte 0,0,153. (0 rot, 0 grün, 153 blau). Mit diesem Schema können bis zu 16,7 Millionen unterschiedliche Farben definiert werden.
    RGB-Modell Die nebenstehende Abbildung zeigt, wie Farbtöne beim RGB-Modell durch addierendes Mischen zustande kommen.

  • Das HSB-Modell: Auch bei diesem Modell gibt es drei definierende Zahlenwerte. H steht für Hue (Farbton), S für Saturation (Sättigung), und B für Brightness (Helligkeit). Farbtöne können Werte zwischen 0 und 359 annehmen, Sättigung und Helligkeit Werte zwischen 0 und 100%. Auf diese Weise lassen sich ca. 23,6 Mio. Farben definieren.
    HSB-Modell Die nebenstehende Abbildung zeigt eine typische Dialogbox eines Grafikprogramms, die das Definieren von Farbtönen nach dem HSB-Modell ermöglicht.

Für Web-Grafiken ist das RGB-Modell maßgeblich. Wenn Sie zum Erstellen von Web-Grafiken mit einem Grafikprogramm arbeiten, das mehrere Farbmodelle kennt, halten Sie sich an das RGB-Modell.

Farbpaletten und indizierte Farben

Im GIF-Format können Sie pro GIF-Datei aus den 16,7 Mio. möglichen Farben des RGB-Farbmodells maximal 256 Farben "aussuchen" und abspeichern. Bei einer solchen Farbauswahl spricht man von einer Farbpalette.

Jede der 256 Farben kann beliebige RGB-Werte haben, d.h. es sind auch "krumme" Farbwerte wie 71,217,34 möglich. Für Web-gerechte GIF-Grafiken steht jedoch ein Standard-Schema zur Verfügung, das von Netscape eingeführt wurde und auf diesem Browser plattformübergreifend optimal interpretiert wird. Nach dem Netscape-Schema sind alle Farben erlaubt, deren RGB-Werte durch 51 dividierbar sind. R(ot), G(rün) und B(lau) sollten danach also einen der Werte 0, 51, 102, 153, 204 oder 255 (hexadezimal: 00, 33, 66, 99, CC oder FF) haben. Ein erlaubter Wert ist danach z.B. 255,51,204 (hexadezimal: FF,33,CC). Auf diese Weise ergeben sich 6 x 6 x 6 mögliche Farben, also 216. Die verbleibenden 40 Farben können Sie als "eiserne Reserve" betrachten. Wenn Sie für einzelne Grafiken bestimmte, fehlende Farbtöne brauchen, können Sie unbenutzte Farben der Palette mit der gewünschten Farbe definieren.

Beispiel-Seite Anzeige: die 216 Farben des Netscape-Schemas

Wenn Sie Ihre Ansprüche an die Hardware des Endanwenders noch weiter zurückschrauben wollen, können Sie sich auch auf Grafiken beschränken, die eine 16-Farbpalette enthalten. Auch dabei gilt: theoretisch kann jede der 16 Farben einer solchen Farbpalette beliebige Farbwerte haben. Es gibt jedoch 16 Farben, die von jedem VGA-kompatiblen Bildschirm angezeigt werden können. In MS Windows sind das deshalb auch die 16 Grundfarben. Bei einer Beschränkung auf 16 Farben ist es sinnvoll, mit diesen 16 Grundfarben zu arbeiten.

Beispiel-Seite Anzeige: die 16 Farben des VGA-Schemas

Alphakanal und echte Transparenz

Der Alphakanal ist eine Erweiterung der Farbmodelle. Dabei wird für jeden Bildpunkt (Pixel) neben dessen Farbwert ein Alphawert gespeichert. Beim RGB-Modell spricht man daher auch vom erweiterten RGBA-Modell (Rot-Grün-Blau-Alpha). Über den Alphakanal wird die Transparenz der Farbe beschrieben.

Sinnvoll ist das Arbeiten mit dem Alphakanal, wenn man mit der so genannten Layer-Technik arbeitet. Dabei wird eine Grafik durch Übereinanderlegen mehrerer Ebenen komponiert, wobei jede Ebene ein oder mehrere bestimmte Bestandteile der Grafik enthält. Wenn Sie nichts anderes angeben, überdecken sich die Ebenen dabei. Mit Hilfe diverser Filtereffekte, die im Alphakanal gespeichert werden, lässt sich jedoch bestimmen, dass und wie eine unterhalb angeordnete Deckfarbe durch eine oberhalb angeordnete Deckfarbe hindurchschimmert.

Die folgenden beiden Abbildungen zeigen zwei typische Filter-Effekte, die durch Arbeit mit mehreren Ebenen und Alphakanal entstanden:

Alpha-Beispiel 1 Alpha-Beispiel 2

In diesem Fall wurde ein Foto als erster Layer (erste Ebene) definiert, und ein Schriftzug NATUR als zweiter Layer. Der zweite Layer enthält nur den Schriftzug und ist ansonsten vollständig transparent. Damit der untere Layer aber auch durch den Schriftzug hindurchschimmern kann, ist der Alphakanal erforderlich. Bei aktiviertem Alphakanal lassen sich die gewünschten Filtereffekte einstellen.

Gute Grafikprogramme unterstützen Sie bei der Arbeit mit mehreren Layern und mit dem Alphakanal.

Bei den Transparenz-Effekten, wie sie mit Hilfe des Alphakanals möglich sind, spricht man auch von "echter" Transparenz. Im Gegensatz dazu steht die im folgenden beschriebene Transparenz einer bestimmten Palettenfarbe.

Transparenz einer bestimmten Palettenfarbe

Die meisten Web-Browser bieten dem Anwender per Voreinstellung einen hellgrauen oder weißen Hintergrund für das Anzeigefenster an, sehen jedoch die Möglichkeit vor, die Hintergrundfarbe dem eigenen Geschmack anzupassen. Wenn Sie nun eine Grafik mit hellgrauem Hintergrund haben, wirkt diese Grafik auf einem weißen oder bunten Fensterhintergrund wie ein "hässlicher" grauer Fleck. Ideal ist da eine Grafik, die einen unsichtbaren (transparenten) Hintergrund hat, sodass sie auf jedem Fensterhintergrund wirkt. Auch in Verbindung mit selbst definierten Hintergrundfarben und Hintergrundbildern (Wallpapers) ist der Einsatz von Grafiken mit transparentem Hintergrund sinnvoll.

Das Seite GIF-Format sieht die Möglichkeit vor, eine bestimmte nach oben Palettenfarbe als unsichtbar zu definieren. Dies ist jedoch erst mit dem neuen, 89er-Format von GIF möglich, im älteren, 87er Format noch nicht. Sinnvoll ist die Anwendung bei Grafiken, die einen klaren, einfarbigen Hintergrund haben.

Moderne Grafikprogramme unterstützen beim Auswählen und Testen der transparenten Palettenfarbe.

Dithering (Error-Diffusion)

Wenn Sie mit nach oben Farbpaletten und indizierten Farben arbeiten und so ein begrenztes Farbschema auf Bilder mit feinen Übergängen und zahlreichen Zwischentönen anwenden, dann muss der Computer eine Lösung für das Problem finden, dass weniger Farbwerte zur Verfügung stehen, als das Bild erfordert. Dazu gibt es verschiedene Algorithmen. Die folgende Abbildung zeigt zwei Möglichkeiten, darunter diejenige mit dem Algorithmus für Dithering:

Farbverlauf 1 | Farbverlauf mit 16,7 Millionen Farben (die Anzeigequalität hängt allerdings von Ihrem Bildschirm ab - falls dieser weniger Farben darstellen kann, besorgt der Web-Browser das Dithering)
Farbverlauf 2 | Bild auf Farbpalette mit 16 optimierten Indexfarben reduziert ohne Dithering!
Farbverlauf 3 | Bild auf Farbpalette mit 16 optimierten Indexfarben reduziert mit Dithering!
Farbverlauf 4 | Ausschnittsvergrößerung, die den Dithering-Effekt deutlich macht.

Beim Dithering werden Farbverläufe in Punktmuster aufgelöst, die mit Hilfe der vorhandenen Palettenfarben darstellbar sind. Das Prinzip wird auch als Error-Diffussion bezeichnet. Der bekannteste Algorithmus dafür ist der Floyd-Steinberg-Algorithmus, der in den meisten Grafikprogrammen zum Einsatz kommt. Beachten Sie, dass GIF-Grafiken mit intensivem Dithering schnell sehr groß werden können. Meistens ist es besser, solche Grafiken gleich als JPEG-Grafiken abzuspeichern. Dann muss allerdings der Web-Browser des Anwenders das Dithering besorgen, falls die Grafikumgebung, auf der er läuft, nur eine begrenzte Anzahl von Farben zulässt.

Graustufen

Bei Graustufenbildern wird mit einer nach oben Farbpalette von 256 Farben gearbeitet. Es handelt sich jedoch um eine ganz bestimmte Palette. Rot- Grün- und Blau-Anteile sind bei allen 256 definierten Werten jeweils gleich, was in der Addition zu einem Ton zwischen Schwarz und Weiß führt. Wenn R, G und B den Wert 0 haben, ist die damit definierte Farbe ein reines Schwarz. Wenn alle drei Farbanteile den Wert 255 haben, wird damit ein reines Weiß definiert. Ein Zwischenwert, etwa 192,192,192, definiert eine graue Farbe von bestimmter Helligkeit. Die Palette eines Graustufenbildes besteht nun darin, dass darin alle 256 Farben zwischen 0,0,0 und 255,255,255 gespeichert sind - also 256 Grautöne.

Die folgenden Abbildungen zeigen links die typische Graustufentabelle, bestehend aus 256 Grautönen von Schwarz bis Weiß, und rechts die Anwendung einer solchen Graustufentabelle auf ein Foto.

Graustufen Graustufenbild

In der Beispiel-Abbildung wurde allerdings das Foto nach der Reduzierung auf Graustufen wieder auf volle Farbtiefe gesetzt und dann im JPEG-Format, nicht im GIF-Format abgespeichert. Die Grafik wird dadurch deutlich kleiner. Denn auch bei der Reduzierung eines Farbfotos mit voller Farbtiefe auf Graustufen wird kräftig mit nach oben Dithering gearbeitet, was die Dateigrößen bei Fotos schnell in die Höhe treibt.

Helligkeit, Sättigung und Kontrast

Helligkeit, Sättigung und Kontrast sind typische Funktionen der Bildbearbeitung, die sich auf ein ganzes Bild oder auf zuvor markierte Ausschnitte anwenden lassen.

Helligkeit:

Farben können den gleichen Farbton haben, aber unterschiedlich hell wirken. Die folgenden Farbvergleiche zeigen jeweils links eine Farbe und rechts eine hellere Variante davon:

Für die Farben der rechten Seite wurde eine ca. 25% mehr Helligkeit gegenüber den Farben der linken Seite eingestellt. Durch Helligkeit werden Farben nicht leuchtender! Kräftige Farben bleiben kräftig, Pastellfarben bleiben pastell.

Sättigung:

Im Gegensatz zur Helligkeit beeinflusst die Sättigung die subjektiv empfundene Leuchtkraft einer Farbe. Die folgenden Farbvergleiche zeigen in der Mitte jeweils eine Ausgangsfarbe, links davon eine Variante mit geringerer Sättigung, und rechts davon eine Variante mit höherer Sättigung:

Was die Helligkeit betrifft, werden die Farbtöne jeweils als etwa gleich hell eingestuft. Farben mit geringerer oder höherer Sättigung wirken zwar beim ersten Hinsehen oft heller oder dunkler, aber das stellt sich als Trugschluss heraus.

Kontrast:

Eine Erhöhung des Kontrasts bewirkt, dass dunkle Farben noch dunkler, und helle Farben noch heller werden. Die Unterschiede zwischen hellen und dunklen Farben werden also betont. Besonders bemerkbar macht sich das bei Fotos beispielsweise an scharfen Farbübergängen, etwa bei Häuserecken, wo eine Seite von der Sonne beschienen wird und die andere im Halbschatten liegt. Wird der Kontrast dagegen verringert, werden helle Farben dunkler, und dunkle werden heller. Die Farben des Bildes gleichen sich also stärker an. Harte Farbübergänge erscheinen weicher, das Bild wirkt insgesamt grautöniger. Die folgenden Farbvergleiche zeigen in der Mitte jeweils eine Ausgangsfarbe, links davon eine Variante mit niedrigerem Kontrast, und rechts davon eine Variante mit höherem Kontrast:

Bei stark erhöhtem Kontrast gehen Feinheiten im Farbverlauf verloren, es kommt zum Schlagschatten-Effekt. Bei stark reduziertem Kontrast entsteht ein Grauschleier-Effekt. Die folgenden drei Bilder zeigen in der Mitte ein Ausgangsbild, links reduzierten Kontrast (Grauschleier) und rechts erhöhten Kontrast (Schlagschatten).

Kontrast: geringer Kontrast: normal Kontrast: höher

Zusätzlich zur einfachen Kontrastkorrektur bieten die meisten besseren Grafikprogramme eine farblich abgestufte Tonwertkorrektur an, mit deren Hilfe sich Grobheiten, wie sie bei starker Kontrastveränderung entstehen, vermeiden lassen.

Histogramm

Für jede Pixelgrafik lässt sich ein Histogramm erstellen. Das ist die grafische Darstellung der Farb- und Helligkeitsverteilung in der Grafik. Zur Darstellung dient dabei ein Koordinatensystem mit einer X-Achse (horizontal) und einer Y-Achse (vertikal). Die X-Achse bedeutet die Helligkeit. Der Achsenursprung steht für maximale Dunkelheit. Je weiter die Achse reicht, desto mehr Helligkeit bedeutet dies. Die Y-Achse steht für die Anzahl der Pixel im Bild. Im Koordinatensystem lässt sich nun ablesen, wie viele Pixel welchen Farbwert bzw. welche Helligkeit haben. Das folgende Beispiel zeigt ein Foto und sein Histogramm:

Foto Histogramm

Das Histogramm zeigt in diesem Beispiel zweierlei: erstens zwei auffällige Spitzen, eine im sehr dunklen Bereich, und eine im sehr hellen Bereich; zweitens zeigt es, dass die Rot-, Grün- und Blau-Kurven des Bildes vergleichsweise parallel verlaufen. Letzteres ist ein Indiz dafür, dass die Farbverteilung einigermaßen in Ordnung ist und das Bild keinen Farbstich in eine bestimmte Richtung hat. Die beiden Spitzen im unteren und im obersten Helligkeitsbereich deuten jedoch auf eine starke Dominanz sehr heller und sehr dunkler Farben hin, was ja auch ersichtlich ist.

Gute Grafikprogramme erlauben das Bearbeiten der grafischen Histogrammkurven. Auf diese Weise lässt sich die Farbverteilung im Bild korrigieren. Im obigen Beispiel wäre es ein Versuch wert, die Spitze im unteren Bereich zu reduzieren, also die RGB-Werte dort näher an den Ursprung der Y-Achse zu bekommen. Natürlich macht das nur Sinn, wenn die damit verbundene Bildaufhellung bei den dunklen Tönen keine hässlichen Verfälschungen bewirkt. Bildkorrekturen auf Histogramm-Ebene erfordern deshalb viel Geduld und Ausprobieren.

Gammakorrektur

Bei der Gammakorrektur ist es zunächst wichtig zu wissen, was ein Gammawert ist. Ein Gammawert ist bei Computergrafiken das Verhältnis zwischen den Farbwerten, die in der Grafik gespeichert sind, und den Farbwerten, die ein Gerät wie Bildschirm oder Drucker daraus macht. Idealerweise wäre das ein 1:1-Verhältnis, sprich, es werden genau die Farben ausgegeben, die in der Grafikdatei gespeichert sind. Das ist aber nicht der Fall. Bildschirme beispielsweise sind leider nicht "geeicht". Die Darstellung von Farben schwankt von Bildschirm zu Bildschirm und von Betriebssystem zu Betriebssystem sogar gewaltig. Wenn Sie also an Ihrem Bildschirm eine Grafik bearbeiten und mit Funktionen wie Helligkeit, Sättigung, Histogramm usw. deren optische Wirkung beeinflussen, dann gilt das Ergebnis zunächst mal nur für Ihren Bildschirm. Wenn Sie die Grafik im Web präsentieren wollen, wird sie jedoch auf sehr vielen und sehr unterschiedlichen Bildschirmen angezeigt.

Gute Grafikprogramme bieten die Gammakorrektur deshalb auf zwei Ebenen an: auf der Ebene des eigenen Monitors, und auf der Ebene konkreter Grafiken. Die Gammakorrektur für den Monitor leistet eine Anpassung zwischen numerischen Farbwerten, etwa nach dem RGB-Modell, und deren Darstellung im Grafikprogramm an Ihrem Bildschirm. Die Bildschirmgrundeinstellungen selber werden dabei nicht verändert. Die Korrektur betrifft lediglich die Richtigstellung der Farbanzeige im Grafikprogramm. Eine grafische Darstellung erlaubt bei solchen Grafikprogrammen die Angleichung zwischen gespeicherten und am Bildschirm dargestellten Farbwerten. Bei den meisten Computerbildschirmen müssen Sie einen Gammawert von 1,5 oder höher einstellen, um eine realistische Farbdarstellung im Grafikprogramm zu erhalten. Wenn jeder, der Grafiken bearbeitet, das tun würde, wäre insgesamt schon viel gewonnen.

Nachdem die Gammakorrektur für den Monitor erfolgt ist, lassen sich mit Hilfe der Gammakorrektur für konkrete Grafiken Farbprobleme ausgleichen, die durch die Herkunftsquelle der Grafik bedingt sind. So nehmen beispielsweise viele Digitalkameras Bilder scheinbar zu dunkel auf. Das liegt daran, dass auch bei der Umrechnung von Lichtstärke in RGB-Werte, die eine Digitalkamera bei einer Aufnahme vornehmen muss, Ungleichheiten vorkommen, die von Kamera zu Kamera schwanken können. Durch eine Gammakorrektur lassen sich solche Probleme meistens gut lösen. Das linke der beiden folgenden Bilder zeigt ein Ausgangsbild, das rechte das Ergebnis nach einer Gammakorrektur (Gammawert 1,8):

Foto ohne Gammakorrektur Foto mit Gammakorrektur

Bei einem Gammawert größer als 1,0 werden vor allem die mittleren Farbtöne gegenüber den sehr dunklen und sehr hellen Farbtönen aufgehellt. Bei einem Gammawert kleiner als 1,0 werden diese Farbtöne abgedunkelt. Der Effekt ist dabei ein anderer, als wenn Sie etwa versuchen, durch Erhöhen der Helligkeit eine Grafik aufzuhellen.

Filter-Effekte

Jede Form der Manipulation einer Pixelgrafik, z.B. Helligkeit, Kontrast, Sättigung oder Gammakorrektur, ist ein Filter. Denn auf Rechnerebene ist das Ändern von Helligkeit, Kontrast usw. mit einem bestimmten mathematischen Algorithmus verbunden, der auf die gespeicherten RGB-Werte in der Grafik angewendet wird. Diese werden durch die Anwendung des Algorithmus neu berechnet. Das Ergebnis ist dann das geänderte Aussehen des Bildes aufgrund der neuen RGB-Werte der einzelnen Pixel.

Solange Sie mit den Standardfunktionen der Bildmanipulation arbeiten, brauchen Sie deren Filter-Algorithmen nicht kennen. In den Dialogen, die das Grafikprogramm anbietet, verändern Sie lediglich Parameter, aber nicht den zugrunde liegenden Algorithmus. So stellen Sie beispielsweise den gewünschten Wert für Sättigung ein, aber Sie wissen nicht, wie das Grafikprogramm eigentlich rechnet, um aus dem eingestellten Wert die RGB-Werte der einzelnen Pixel neu zu berechnen.

Gute Grafikprogramme bieten eine ganze Reihe von weiteren Filtern im Dialog an. Dazu gehören Standards wie Relief-Effekte, Rausch- und Verwisch-Effekte usw. Daneben bieten einige Programme auch eine so genannte Plugin-Schnittstelle für Filter an. Diese erlaubt es, sich beliebige eigene Filter schreiben, die einen Algorithmus auf die RGB-Werte einer Grafik bewirken. Ein Algorithmus könnte beispielsweise lauten: ziehe von allen Rot-Werten, die über 200 liegen, 50 ab, von allen Grünwerten, die über 200 liegen, 100, und von allen Blauwerten, die über 200 liegen, 150. Oder: setze bei allen Pixeln, bei denen der Rotwert, der Grünwert und der Blauwert über 200 liegen, den Wert auf reines Weiß, also 255,255,255.

Filter können ganz verschiedene Aufgaben wahrnehmen, z.B.:

  • Fehlerkorrekturen in Bildern durchführen (z.B. Farbkorrekturen)
  • Interessante Effekte einbauen (z.B. Puzzle-Effekt oder Verwisch-Effekte)
  • Optische Standard-Effekte nachempfinden (z.B. Lichteinfall von einer Seite oder Mondscheinlicht)
  • Erzeugung völlig neuer Phantasiegrafiken (dabei wird die Ausgangsgrafik nur als "zufälliger Input" benutzt)

Die folgenden Bilder zeigen die Anwendung einiger Filter auf eine Ausgangsgrafik:

Filterbild | Ausgangsgrafik
Filter 1 | Filter, der einen Verzerrungseffekt bewirkt
Filter 2 | Filter, der einen Kohlezeichnungs-Effekt bewirkt
Filter 3 | Filter, der einen Spot-Effekt bewirkt
Filter 4 | Filter, der die Grafik zum Erzeugen eines Musters benutzt

Anti-Aliasing

Anti-Aliasing ist ein Algorithmus für Pixelgrafiken, um sichtbare Treppeneffekte an harten Kanten oder Farbübergängen in Grafiken auszugleichen. An den folgenden Grafiken können Sie den Effekt gut beobachten:

ohne Anti-Aliasing | (Ausschnittsvergrößerung)
mit Anti-Aliasing | (Ausschnittsvergrößerung)
ohne Anti-Aliasing | (Ausschnittsvergrößerung)
mit Anti-Aliasing | (Ausschnittsvergrößerung)

Die Ausschnittsvergrößerungen zeigen das Prinzip des Anti-Aliasing. Mit Anti-Aliasing werden bei schrägen Strichen oder Rundungen die Treppeneffekte abgeschwächt, indem abgeschwächte Farbtöne hinzugefügt werden.

Besonders bei Schriftzügen innerhalb von Grafiken ist Anti-Aliasing ein Mittel für mehr Professionalität. Aber auch bei anderen Objekten mit Schrägen oder Kurven bietet sich Anti-Aliasing an, um die Ränder weich zu zeichnen und sichtbare Pixeltreppen zu vermeiden.

Gute Grafikprogramme unterstützen den Anti-Aliasing-Effekt. Das Problem dabei ist normalerweise, dass Pixelgrafiken keine "Objekte" enthalten, die man einfach markieren kann, um ihnen Eigenschaften - wie zum Beispiel den Anti-Aliasing-Effekt - zuzuweisen. Einige Programme bieten jedoch die Möglichkeit an, Pixelbereiche, die ein erkennbar zusammenhängendes Muster darstellen, als Objekt zu markieren (Hilfsmittel dazu ist der meist so genannte "Zauberstab"). Markierten Objekten können Sie dann die Eigenschaft des Anti-Aliasing zuweisen. Beim Neuerstellen von Elementen wie Schriftzügen oder geometrischen Figuren können Sie dagegen von vorneherein den Anti-Aliasing-Effekt einstellen.

nach oben
weiter | Seite Animierte GIF-Grafiken
zurück | Seite Typische Grafiksorten für Web-Seiten
Teil von SELFHTML/Navigationshilfen Teil von Grafik

© 2007 Seite Impressum


SELFHTML: Grafik / Animierte GIF-Grafiken

SELFHTML

Animierte GIF-Grafiken
Informationsseite

nach unten Allgemeines zu animierten GIF-Grafiken
nach unten Dia-Show-Effekte durch animierte GIF-Grafiken
nach unten Daumenkino-Effekte durch animierte GIF-Grafiken
nach unten Vorgehensweise beim Erstellen animierter GIF-Grafiken
nach unten

Allgemeines zu animierten GIF-Grafiken

Das Seite GIF-Format unterstützt in der neueren, 89er Version die Möglichkeit, mehrere Grafiken in ein und derselben Grafikdatei zusammenzufassen. Die Einzelgrafiken der Datei werden nacheinander "abgespult" und angezeigt. Dabei ist es auch möglich, Kontroll-Befehle mit abzuspeichern, z.B. Verzögerungszeiten zwischen den einzelnen Bildern. Dieses Feature bietet Ihnen zwei interessante Einsatzmöglichkeiten:

  • Sie können eine automatisch ablaufende "Dia-Show" mehrerer verschiedener Bilder programmieren.
  • Sie können eine Sequenz ähnlicher und aufeinander aufbauender Bilder in einer GIF-Datei speichern. Dadurch ergibt sich ein "Daumenkino-Effekt", d.h. eine einfache Video-Animation.

Mit Hilfe von animierten GIF-Grafiken können Sie also bewegte Elemente auf Ihre Web-Seiten bringen, ohne in Programmiersprachen wie Java einsteigen zu müssen.

Beachten Sie aber auch, dass animierte GIF-Grafiken schnell eine kritische Größe erreichen. Denn mehrere Einzelgrafiken in einer Grafikdatei benötigen zwangsläufig mehr Speicher. Animationen sollten Sie daher nur aus kleinen Grafiken erzeugen. Ferner ist im Hinblick aufs Web-Design darauf hinzuweisen, dass animierte Elemente unwillkürlich die Aufmerksamkeit des Betrachters auf sich lenken und dadurch aber von vielleicht wichtigeren Inhalten einer Seite, wie Navigation oder Information, ablenken. Setzen Sie animierte GIFs daher vorsichtig und mit Bedacht ein. Das sprichwörtliche Gezappel auf manchen Web-Seiten für überflüssiges Gimmicks ist mittlerweile verpönt und gilt als stümperhaft.

Das Erstellen animierter GIF-Grafiken wird von vielen professionellen Grafikprogrammen unterstützt. Daneben gibt es Spezialprogramme, mit deren Hilfe Sie bereits vorhandene Grafiken zu animierten Grafiken zusammenstellen können.

Dia-Show-Effekte durch animierte GIF-Grafiken

Dia-Show-Effekte können Sie z.B. verwenden, um in schneller Abfolge die typischen Produkte Ihrer Firma anzuzeigen, oder um in einem interaktiven Lernprojekt zum Erlernen einer Fremdsprache neue Vokabeln kurz einzublenden ("unterbewusst lernen"). Sie können auch mehrere mit einer Gesamtbedeutung assoziierten Bilder in Reihe schalten und auf diese Weise animierte Symbole oder animierte Cliparts präsentieren. Wichtig ist, dass die Einzelbilder für den Anwender einen nachvollziehbaren Zusammenhang ergeben. Die Anzeigedauer der Einzelbilder können Sie frei einstellen.

Typische Dia-Show-Effekte:

animiertes GIF mit Dia-Show-Effekt 1 animiertes GIF mit Dia-Show-Effekt 2

Daumenkino-Effekte durch animierte GIF-Grafiken

Daumenkino-Effekte können Sie z.B. verwenden, um Cliparts zu einfachen Trickfilmsequenzen zu erweitern, um wissenschaftliche Ablaufprozesse zu visualisieren, oder um in der technischen Dokumentation Handgriffe und andere zeitliche Abläufe zu verdeutlichen. Die Geschwindigkeit der Bildsequenzen und damit die Ablaufgeschwindigkeit können Sie frei einstellen.

Typische Daumenkino-Effekte:

animiertes GIF mit Daumenkino-Effekt 1 animiertes GIF mit Daumenkino-Effekt 2

Vorgehensweise beim Erstellen animierter GIF-Grafiken

Bevor Sie eine animierte Grafik erstellen können, müssen Sie folgende Vorbereitungen treffen:

  • Sie müssen die Einzelbilder mit Hilfe eines geeigneten Grafikprogramms erstellen bzw. auswählen.
  • Sie sollten alle Bilder in neue Grafikdateien mit einheitlicher Seite Bildgröße und einheitlicher Seite Farbpalette kopieren.
  • Speichern Sie alle auf diese Weise erzeugten Bilder als GIF-Grafiken ab. Vergeben Sie dabei am besten durchnummerierte Dateinamen wie "bild1.gif", "bild2.gif" usw., und zwar in der Reihenfolge, in der Sie die Bilder später als Einzelbilder in der animierten Grafik ablegen wollen.

Nachdem Sie diese Vorbereitungen getroffen haben, können Sie die Software zum Erstellen der animierten GIF-Grafik aufrufen. Da die Bedienung solcher Programme sehr unterschiedlich ist, wird hier nicht näher auf einzelne Bedienschritte eingegangen. In jedem Fall stehen Ihnen folgende Möglichkeiten zur Verfügung:

  • Bild (image): Indem Sie eine GIF-Grafik einfügen, wird diese Grafik als Einzelbild in die animierte Grafik übernommen.
  • Schleife (loop): Indem Sie eine Schleife einfügen, können Sie bestimmen, wie oft die gesamte Bildsequenz wiederholt werden soll. Sie können einen Zahlenwert editieren, der die Anzahl der Abspielwiederholungen angibt.
  • Kontrollelement (control): Indem Sie ein Kontrollelement einfügen, können Sie den Ablauf zwischen zwei Einzelbildern kontrollieren. Sie können z.B. die Verzögerung bis zur Anzeige des nächsten Einzelbilds einstellen. Ferner können Sie Angaben zum Seite transparenten Hintergrund der Einzelbilder machen.
  • Text (plain text): Indem Sie Text einfügen, können Sie den Ablauf der animierten Grafik zusätzlich durch eingeblendete Textteile ergänzen. Dabei können Sie den Text formatieren.
  • Kommentare (comments): Indem Sie Kommentare einfügen, können Sie Ihre Arbeiten intern auskommentieren. Solche Kommentare werden nicht mit angezeigt.

Um das fertige Ergebnis zu betrachten, brauchen Sie natürlich ein geeignetes Anzeigeprogramm. Einige Editierprogramme für animierte GIF-Grafiken bieten selbst die Möglichkeit des Betrachtens an. Wenn nicht, können Sie die Grafik auch mit Ihrem Web-Browser lokal öffnen und betrachten.

nach oben
weiter | Seite Web-Projekte planen
zurück | Seite Techniken und Begriffe der Bildbearbeitung
Teil von SELFHTML/Navigationshilfen Teil von Grafik

© 2007 Seite Impressum


SELFHTML: Web-Projektverwaltung

SELFHTML

Web-Projektverwaltung
Kapitelseite

Dieses Kapitel enthält wichtige Hinweise zur Planung, Veröffentlichung und Pflege von Projekten im Web.
Der Abschnitt besteht aus folgenden Seiten:

Seite Web-Projekte planen
Seite Web-Projekte publizieren
Seite Web-Projekte bekannt machen
Seite Web-Projekte kontrollieren
Seite Provider wechseln mit Web-Projekten
Seite Rechtliche Aspekte von Web-Projekten

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen zum Thema Projektverwaltung und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zur Web-Projektverwaltung
Online-Seite WWW-Links: Projektverwaltung

nach oben

© 2007 Seite Impressum


SELFHTML: Web-Projektverwaltung / Web-Projekte planen

SELFHTML

Web-Projekte planen
Informationsseite

nach unten Allgemeines zu Web-Projekten
nach unten Ziel des Projekts
nach unten Zielgruppe des Projekts
nach unten Projektumgebung im Web erforschen
nach unten Inhalte und Redaktion
nach unten Kostenaufwand
nach unten Terminierung und Ankündigung
nach unten Gliederung und Strukturierung
nach unten Corporate Design
nach unten Web-Design
nach unten

Allgemeines zu Web-Projekten

Projekte im Web sollten stets zwei Anforderungen genügen: sie sollten zum einen in sich geschlossen sein, d.h. dem Anwender im Web-Browser als ein erkennbar geschlossenes Ganzes erscheinen; zum anderen sollten sie aber auch der Tatsache Rechnung tragen, dass sie Teil einer weltweiten Plattform sind, in der es auch andere Projekte gibt, und vor allem die Möglichkeit zu thematisch sinnvollen Verweisen auf andere Projekte.

Nicht wenige Leute suchen mit ihren Homepages im Netz den schnellen Erfolg oder zumindest die tiefe Bewunderung der Seitenbesucher vor ihren Programmierheldentaten. Nachdem sie dabei in tagelanger Qual irgendwelches Zeug für Layout und Effekte zusammengeklaut haben, ohne sich um Inhalte zu kümmern, überfallen sie schließlich einschlägige Foren mit der Frage, wie sie ihren Quelltext vor den Augen der Besucher schützen können. Aber so funktioniert das Web nun mal nicht, und glücklicherweise bestraft sich dort jeder, der nur profitieren will, ohne etwas zu geben, selbst.

Es gibt zwar kein Patentrezept für gelungene und erfolgreiche Web-Projekte, aber es gibt mittlerweile durchaus Erfahrungswerte und Empfehlungen für benutzerfreundliches und nutzbringendes Publizieren im Web. Der Erfolg muss auch nicht immer im direkten Geldfluss liegen. Ein, zwei interessante neue Kontakte, die sich im Lauf der Zeit über ein Web-Projekt ergeben, können viel mehr "einbringen" als mit Werbe-Bannern zugekleisterte Seiten, deren Anbieter nur in Klickraten denkt. Und schließlich kann eine Homepage auch einfach nur Spaß machen.

Im Web präsent sein, heißt "in" sein. Aber belanglose Werbung oder Allerweltsinformation bringen weder dem Web noch Ihrem Geldbeutel etwas. Das Web braucht Juwelen, um eine Sensation zu bleiben. Und Juwelen sind teuer. Eigentlich können nur Besessene so viel aufbringen.

Dieser Abschnitt fasst die Überlegungen zusammen, die Sie sich im Vorfeld eines Projekts anstellen sollten. Denn klare Konzepte und überlegtes Vorgehen sind schon mal der erste Schritt für ein gutes Projekt.

Ziel des Projekts

Beispiele für mögliche Ziele eines Projekts:

  • Wir als Firma stellen uns und unsere Produkte/Dienstleistungen vor (Kommunikation)
  • Wir als Firma bieten eine Dienstleistung direkt über diese Web-Seiten an (Transaktion, Interaktion, Partizipation)
  • Ich als Einzelperson stelle meine Aktivitäten in meinem Fachgebiet/Hobby vor
  • Ich als Einzelperson veranstalte auf diesen Web-Seiten ein persönliches Happening
  • Wir als Institution/Organisation/Verband/Verein stellen unsere Ziele und Aktivitäten vor
  • Wir als Institution/Organisation/Verband/Verein bieten Ihnen die Möglichkeit, über diese Web-Seiten an einer bestimmten Aktion teilzunehmen
  • Ich/Wir stelle(n) auf diesen Web-Seiten einen großen Datenbestand aus einem bestimmten Sachgebiet zur allgemeinen Verfügung
  • Ich/Wir sammeln auf diesen Web-Seiten in loser Weise alles, was zu einem bestimmten Sachgebiet gehört

Diese Liste mit Beispielen will zeigen, dass es erstens sehr unterschiedliche Ziele eines Webprojektes geben und dass auch ein und derselbe Anbieter von Web-Seiten unterschiedliche Ziele verfolgen kann.

Wichtig ist, dass Sie sich in der Konzeptphase eines Web-Projekts über das oder die Ziele des Projekts im klaren werden, und dass Sie dem Anwender, der Ihre Seiten aufruft, gleich zu Beginn (auf der Einstiegsseite) klar machen, welches Ihre Ziele sind. Das kann explizit geschehen durch Sätze wie: "XY begrüßt Sie. Auf diesen Seiten stellen wir uns und unsere innovative Technik vor usw.", oder "Light your fire and feel free to loose yourself into this hyperspace". Es kann aber auch durch die Aufmachung der Startseite geschehen. So vermittelt eine neutral aufgebaute Startseite (ohne Hintergrundbilder, animierte Grafiken, JavaScript usw.) wissenschaftliche Seriosität; eine gestylte, aber überlegen statische Seite suggeriert beim Anwender häufig eine große, etablierte Firma oder Institution oder ein Projekt von monumentalen Ausmaßen. Eine poppige, nach Aufmerksamkeit schreiende Seite dagegen verrät eine kleine, werbende Firma oder ein freakiges, nicht ganz so ernst zu nehmendes Projekt.

Zielgruppe des Projekts

Genauso wichtig wie eine Zielsetzung ist es, die Zielgruppe zu bestimmen, die durch das Projekt angesprochen werden soll. Mögliche Zielgruppen sind z.B.:

  • Potentielle Kunden/Käufer
  • Hobbyisten/Liebhaberkreise
  • Wissenschaftler/Experten
  • Kinder und Jugendliche
  • Familien
  • Computerfreaks/Hacker
  • Vergnügungssüchtige
  • Neugierige
  • Sinnsuchende

Natürlich können Sie versuchen, alle Besucher Ihrer Web-Seiten zufrieden zu stellen. Das wird allerdings ziemlich schwer, und es besteht die Gefahr, dass Sie niemanden so richtig zufrieden stellen. Besser ist es, sich vorzustellen, wie bestimmte Leute, die auf Ihre Web-Seiten stoßen, sofort ein Lesezeichen darauf setzen, weil sie gleich erkennen, dass dies Seiten sind, die mit ihren eigenen Interessen, ihrem Wissensdurst, ihrer Lebensart oder ihren Wünschen, Gedanken und Hoffnungen zu tun haben. Es gibt beispielsweise Web-Seiten, auf denen Betroffene über eine nicht alltägliche Krankheit berichten, unter der sie leiden. Wer nun selbst von dieser Krankheit betroffen ist, im Web nach Informationen darüber sucht und auf diese Seiten stößt, wird sie verschlingen, und sie werden ihm viel bedeuten. Solche Seiten haben eine ziemlich eingeschränkte Zielgruppe, aber dafür sind sie für ihre Zielgruppe Gold wert.

Ebenso wie die Zielvorgabe Ihres Projekts sollte dem Anwender auch die adressierte Zielgruppe klargemacht werden. Dazu eignen sich explizite Sätze wie: "Allen Fahrradsüchtigen bieten wir auf diesen Seiten technische Neuigkeiten und Tourenvorschläge". Aber auch die Aufmachung der Startseite selektiert das Publikum. Dabei hängt allerdings viel vom Zusammenspiel der Elemente ab. Ein dunkler Sternenhimmel als Hintergrundbild spricht joystickverliebte Cybernauten ebenso an wie entrückte Esoteriker. Erst die Vordergrundsymbolik (z.B. grelle Strahlen aus Laserwaffen, die ein Monster treffen, oder wehender weißer Schleier, der auf eine Pyramide zufliegt) sorgt in solchen Fällen für intuitiv klare Verhältnisse.

Projektumgebung im Web erforschen

Vor allem, wenn Sie im Web etwas verkaufen oder mit einer Idee erfolgreich sein wollen, sollten Sie bereits in der ersten Planungsphase herausfinden, ob es zu dieser Idee schon etwas gibt im Web, und wenn ja, was und mit welchem Erfolg. Überlegen Sie sich zu diesem Zweck ein paar einschlägige Stichwörter, die Ihr Projekt charakterisieren. Suchen Sie nach diesen Stichwörtern in großen Suchmaschinen.

Werten Sie die Suchergebnisse nach folgenden Kriterien aus:

  • Gibt es gar nichts zu diesen Suchbegriffen? Das kann bedeuten, dass die Welt auf genau das wartet, was Sie anbieten wollen. Es kann aber auch bedeuten, dass das niemanden in der Welt interessiert. In diesem Fall ist es angebracht, mit einer kleinen, nicht so aufwendigen Projektversion zu beginnen und Feedback abzuwarten.
  • Gibt es uferlos viel zu den Suchbegriffen? Das kann bedeuten, dass Ihre Pläne voll im Trend liegen, aber auch, dass Sie hier nicht mehr viel Neues werden bieten können. Folgen Sie den Verweisen der Suchergebnisse und analysieren Sie sorgfältig, was es bereits gibt, und wie Sie sich von bestehenden Angeboten nachvollziehbar abgrenzen können (z.B. "erstes Angebot dieser Art im südpfälzischen Raum").

Inhalte und Redaktion

Anfänger unterliegen häufig dem Irrglauben, ein "geiles Layout" oder ein paar tolle Gimmicks würden ein Web-Projekt interessant machen. Die Erfahrung zeigt das Gegenteil: Anwender besuchen neue, fremde Web-Projekte normalerweise nicht, weil sie ganz besoffen sind aus lauter Vorfreude auf viel buntes Zeug am Bildschirm, sondern weil sie etwas ganz Bestimmtes suchen und das aufgesuchte Projekt als aussichtsreichen Kandidaten für ihr Anliegen auserkoren haben. Solche Besucher erwarten zwar durchaus ein ansprechendes Layout, aber in erster Linie wollen sie möglichst schnell ihr Ziel erreichen. Das Ziel aber ist nicht das "Betrachten" und "Verweilen" auf Ihren Seiten, sondern meistens ein inhaltliches. Die Besucher wollen Informationen. Auch wenn es ein elektronischer Shop ist, wollen die meisten Besucher mehr über Produkte erfahren als nur Artikelnamen und Preise. Und selbst wenn es einfach eine private Homepage ist, wollen die Besucher etwas über Sie, Ihre Gedanken usw. erfahren. Das Web ist in erster Linie ein Informationen vermittelndes Medium, und dem sollten Web-Projekte Rechnung tragen.

Doch Inhalte zu erstellen ist aufwendig, Inhalte zu pflegen und zu aktualisieren nicht minder. Dazu ist redaktionelle Arbeit erforderlich. Viele, die im Web publizieren, sind zuvor noch nie oder nur am Rande mit redaktionellen Tätigkeiten in Berührung gekommen. Der anfängliche Leitspruch des W3-Konsortiums "Everyone's a publisher!" beinhaltet eben nicht nur die verlockenden neuen technischen Möglichkeiten, ein Publikum zu erreichen, sondern auch die ganze Arbeit eines "Publishers", die damit verbunden ist. Die Textarbeit wird viel zu häufig gegenüber dem Programmieraufwand eines Web-Projekts unterschätzt. Und genau aus diesem Grund scheitern viele sehr gut programmierte Web-Projekte.

Im Planungsstadium eines Web-Projekts müssen Sie sich deshalb unbedingt Gedanken machen über folgende Punkte:

  • Startinhalte: Woher sollen die ersten Inhalte kommen? Gibt es vorhandene, geeignete Texte? Gibt es beispielsweise ein Firmenprospekt, wissenschaftliche Aufsätze, Dokumentarchive, Datenbanken? Sind diese Quellen wirklich geeignet - enthalten sie beispielsweise keine vertraulichen, nicht für die Öffentlichkeit geeigneten Daten? Müssen die Quellen also noch ausgewertet werden? Und wenn gar keine Quellen vorhanden sind - wer erstellt dann die Inhalte? Sind dazu Recherchen erforderlich? Wer liest Korrektur?
  • Laufende neue Inhalte: Woher sollen laufende neue Inhalte kommen? Besucher von Web-Projekten werden nur dann zu Stammbesuchern, wenn es regelmäßig etwas Neues auf den Seiten zu entdecken gibt. Sorgen Redakteure oder Zulieferer für neue Inhalte? Oder sollen neue Inhalte von den Besuchern selbst beigetragen werden, beispielsweise durch Anbieten eines Diskussionsforums?
  • Aktualität: Wer überwacht die Aktualität und Richtigkeit der Inhalte? Wer ändert im Web-Datenbestand geänderte Fakten, z.B. Informationen zu Produkten, die vom Markt genommen wurden, "Nachrichten von gestern" usw.? Wer repariert nicht mehr funktionierende Verweise zu anderen Projektseiten oder zu nicht mehr existierenden anderen Web-Adressen?

Kostenaufwand

Der Kostenaufwand eines Web-Projekts verteilt sich auf folgende Bereiche:

  • Konzept und Planung
  • Realisierung
  • Pflege

In allen Fällen handelt es sich um Zeitaufwand, der nicht zu unterschätzen ist. Wenn Sie aus Begeisterung oder als Hobbyist arbeiten, werden Sie die Formel Zeit=Geld nicht so sehr empfinden, aber wenn Sie kommerziell arbeiten, müssen Sie für alle drei genannten Bereiche Kalkulationen anstellen.

Wenn Sie Geld für das Projekt investieren müssen, sind folgende Abwägungen wichtig:

  • Selbst- oder Fremdarbeit: Ist es günstiger, sich selbst die Zeit (Geld) zu nehmen, um sich in Konzept und Realisierung (fachlich/technisches Know How) einzuarbeiten, oder ist es besser, jemanden zu beauftragen (ebenfalls Geld), der sich damit auskennt und dies übernimmt?
  • Rentabilität: Wie empfindlich treffen Sie die anfallenden Kosten? Können Sie sich leisten, dass das Projekt ein Flop wird? Wenn ein Flop Ihren Untergang bedeutet, sollten Sie es vielleicht erst mal mit weniger riskanten Investitionen versuchen.

Bei kommerziellen Web-Projekten ist es mittlerweile meist so, dass die erste Erstellung als Auftragsarbeit an Web-Agenturen vergeben wird. Die laufende Pflege der Inhalte einer solchen Web-Agentur zu überlassen hat sich dagegen als unrentabel erwiesen. Das bedeutet: bei der Auftragsvergabe müssen bereits Regelungen getroffen werden, wie Sie als Auftraggeber anschließend das Projekt inhaltlich pflegen können. Immer häufiger verlangen Auftraggeber von den Web-Agenturen deshalb die Implementierung eines so genannten Content Management Systems (CMS). Ein solches System erlaubt web-technisch unerfahrenen, aber inhaltlich kompetenten und redaktionell verantwortlichen Mitarbeitern des Auftraggebers, über eine anwenderfreundliche Internet-Schnittstelle (häufig web-basierte Lösungen) neue Inhalte in das Projekt einzuarbeiten. Es gibt fertige Software-Lösungen für CMS, aber oft werden auch individuelle Lösungen programmiert. Professionelle CMS-Software beinhaltet gegenüber einfachen Lösungen Features wie "Redaktionsvorstufe" und "endgültiges Freischalten durch die Redaktionsleitung" usw.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zum Thema "Content Management Systeme":

Online-Seite WWW-Links: Content-Management-Systeme

Terminierung und Ankündigung

Egal ob Sie ein privates oder ein professionelles Web-Projekt planen - eines sollten Sie in jedem Fall tun: sich Termine setzen. Denn ohne selbst gesetzte Termine wird ein Projekt nie fertig. Die Termine sollten allerdings realistisch sein. Ein Termin, der nicht zu halten ist, ist nicht mehr wert als kein Termin. Für einfache Projekte reicht eine schlichte "Deadline". Bei komplexeren Projekten, an deren Realisierung mehrere Hände oder unabhängige Parteien arbeiten, ist möglicherweise Terminkoordinierung mit Hilfe von Projektplanungs-Software erforderlich, ähnlich wie bei Produktrealisierungen oder Bauprojekten.

Gleichzeitig stellt sich die Frage nach einer Vorankündigung. Häufig wird ein Seite Domain-Name reserviert, sobald eine Projektidee geboren ist. Dagegen ist auch nichts einzuwenden. Aber nach kurzer Weile steht dann der angemietete Speicherplatz im Web zur Verfügung, und die Adresse ist öffentlich aufrufbar. In dieser Phase neigen viele Heißsporne dazu, irgendwelche prahlerischen Vorankündigungen zu veröffentlichen, mit lustigen animierten Baustellenschildern oder moderneren Flash-Trailern versehen, und das Ganze wird dann sogleich in allen bekannten Suchmaschinen angemeldet.

Vorankündigungen können unter bestimmten Umständen sinnvoll sein, so etwa, um auf eine neu reservierte Marke schon mal vorab hinzuweisen. In den meisten Fällen aber sind Vorankündigungen ein Ärgernis. Die Suchmaschinen werden auf solchen Seiten mit unnützem Müll gefüttert, und Besucher, die den Anbieter nicht kennen, werden sich kaum von dessen großspurigen Ankündigungen beeindrucken lassen. Stattdessen klicken sie genervt weg, sobald sie begriffen haben, dass da nur wieder einer dieser Prahlheinis am Werk ist.

Vorankündigungen sollten so sein wie das geplante Web-Projekt: fundiert, informationsorientiert und benutzerfreundlich. Also keine sinnlosen Animationen, die Ladezeit verursachen, und stattdessen ein paar oder mehr Sätze über das geplante Projekt.

Gliederung und Strukturierung

Ein Web-Projekt besteht aus wenigstens einigen, oft aus vielen, manchmal aus unzähligen Web-Seiten. Je mehr Seiten und zugehörige Dateien das Projekt enthält, desto wichtiger wird eine schriftliche Fixierung der Datei- bzw. Verweisstruktur. Aber auch bei kleinen Projekten, die nur aus wenigen Seiten bestehen, sollten Sie sich vorher überlegen, was auf welche Seite gehört, und wie die Seiten vernetzt werden sollen.

Denken Sie stets daran, dass das Web ein Hypertext-Medium ist. Hypertext zwingt Sie nicht zu bestimmten Formen. Hypertext ist ein nichtlineares Medium. Der Anwender soll nicht der Reihe nach lesen, sondern auswählen, was ihn interessiert. Das ist eine große Freiheit, birgt jedoch zugleich die Gefahr des "lost in hyperspace" - Gefühls.

Die meisten Anwender im Web sind keine erfahrenen Hypertext-Piloten. Bei Projekten, die aus mehr als einer Handvoll Seiten bestehen, sollten Sie deshalb versuchen, dem Anwender eine "Metapher" zu bieten, an die er sich halten kann. Mögliche Metaphern:

  • Buchmetapher: das Projekt hat Dokumentcharakter, besitzt ein Inhaltsverzeichnis und evtl. ein Stichwortverzeichnis, Dateien entsprechen Kapiteln usw. Diese Metapher eignet sich besonders für begrenzte Information zu bestimmten Themen, wobei die Daten selten upgedatet werden.
  • Verzeichnis- oder Baummetapher: das Projekt wirkt auf den Anwender wie ein Dateimanager. Es gibt Dateien mit Verweislisten, die durch ein Ordnersymbol gekennzeichnet werden, und Dateien mit Information, die durch Dokumentsymbole gekennzeichnet werden. Diese Metapher eignet sich besonders für große Datenbestände mit häufigen Neuzugängen, wobei jedoch der Informationsbereich, der abgedeckt wird, von vorneherein bekannt ist.
  • die Indexmetapher: ein großes, alphabetisch oder nach anderen Kriterien (z.B. Datum, Zeit) sortiertes Verweis-Verzeichnis bildet den Zugang zur Information. Diese Metapher eignet sich besonders für Projekte, deren Informationsbereich nicht genau eingrenzbar ist, und bei denen häufig neue Daten hinzukommen.

Sobald der Anwender Ihre beabsichtigte Metapher erkennt, kann er sich eine "räumliche Vorstellung" Ihres Projekts machen. Das ist eine ganz wichtige Sache, die Sympathie des Anwenders gegenüber dem Projekt hängt tatsächlich zum großen Teil davon ab, ob er diesen Aha-Effekt hat oder nicht.

Corporate Design

Genauso wichtig wie ein Gliederungskonzept ist ein Corporate-Design-Konzept. Das bedeutet, dass alle Dateien, die zu einem Projekt gehören, ein optisch einheitliches Bild bieten, damit der Anwender intuitiv erkennt, dass er sich noch im gleichen Projekt befindet. Corporate Design stellen Sie her, indem Sie bestimmte Gestaltungselemente bei jeder Datei des Projekts wieder verwenden. Das können sein:

  • Logo: Es sollte an immer gleicher Stelle auf der Seite stehen, zum Beispiel immer links oben am Seitenanfang. Wenn Sie mit der Frame-Technik arbeiten, können Sie das Logo auch in einem fixen Bildschirmbereich platzieren.
  • Grafische Symbole: Das sind kleine Grafiken, die an bestimmten Stellen stehen und eine für den Anwender sofort erkennbare bzw. nachvollziehbare Bedeutung haben. Symbole können z.B. bedeuten: "dies ist ein Beispiel", oder "dies ist eines unserer Produkte" oder "dies ist ein Verweis, mit dem der Anwender das Projekt verlässt".
  • Textformate: Dazu gehört z.B., Beispiele immer in dicktengleicher Schrift darzustellen.

Corporate Design suggeriert Geschlossenheit. Besonders bei kommerziellen Projekten, also bei Firmen, die sich vorstellen oder direkt etwas anbieten, vermittelt Corporate Design dem Anwender das Gefühl, es mit erfahrenen Profis zu tun zu haben.

Corporate Design ist etwas anderes als Web-Design. Aber Web-Design muss die Faktoren, die das Corporate Design vorgibt, im Design von Layout, Navigation, Textformatierung usw. berücksichtigen. Gerade wenn Sie eine Fremdbeauftragung anstreben, ist es wichtig, dem Auftragnehmer genaue Vorgaben zum Corporate Design zu machen. Hören Sie aber andererseits auch auf mögliche Einwände. Corporate Design darf nicht die Ergonomie beim "Anwenden" der Seiten beeinträchtigen.

Web-Design

Über gutes und schlechtes, richtiges und falsches Web-Design wird in Fachkreisen endlos diskutiert. Die folgenden Regeln fassen wichtige Punkte zusammen:

  • Form ohne Inhalt ist leer: Ohne vermittelnde Information, ohne echte Unterhaltung kann eine Web-Seite optisch noch so perfekt sein - sie ist dennoch eine Zumutung, und niemand, der sie besucht hat, kommt ein zweites mal wieder. Wer nichts zu bieten hat außer ein paar schicken Bildschirmfüllungen, wird keine dauerhaften Freunde gewinnen im Web.
  • Inhalt ohne Form ist langweilig: Ohne sinnvolle Strukturierung in kleine Informationseinheiten und ohne Auflockerung durch Grafiken oder multimediale Elemente mit Signal-, Symbol- oder Illustrationswirkung ist Informationsaufnahme am Bildschirm ermüdend und nervtötend. Bildschirmseiten lassen sich nicht mit Buchseiten vergleichen.
  • Navigation ist angesagt: Ein Web-Projekt mit viel Informationsgehalt ist zunächst einmal ein Hypertext-Projekt, und der Eindruck, den es beim Anwender hinterlässt, hat viel damit zu tun, ob es einfach ist, darin die gewünschten Informationen zu finden, ob es Spaß macht, seine eigenen Spuren darin zu verfolgen, und ob es leicht ist, jederzeit und schnell zu anderen wichtigen Stellen des Projekts zu verzweigen. Web-Design ist also mindestens ebenso viel Hypertext-Design wie Grafik-Design.
  • Plattformunabhängigkeit ist angesagt: Während ein herkömmlicher Designer vorher weiß, ob sein Entwurf auf einem Bierdeckel oder auf einer Plakatwand landet, kann der Web-Designer nicht wissen, auf welchen Anzeigegeräten seine Web-Seiten letztendlich ihre Wirkung entfalten sollen. In den meisten Fällen sind unproblematische Designs besser, die mit klaren, einfachen Formen aufwarten, gute farbliche Kontraste besitzen und keine üppigen Breiten und Höhen erzwingen. Auch an so genannte Benutzerrandgruppen wie Sehbehinderte sollte gedacht werden, in welcher Form auch immer.
  • Das Web gehört zum Internet: Eine Web-Seite hat nicht nur möglichst gut auszusehen, sie sollte auch möglichst wenig Bytes haben. Dass die Bandbreiten für die Datenübertragung beim Durchschnittsanwender allmählich besser werden, bedeutet nicht, hier und jetzt zu klotzen, ohne Rücksicht auf den Netzverkehr zu nehmen. Auch andere Dinge sind zu berücksichtigen. Gute, aussagekräftige Stichworte und Kurzbeschreibungen in den Seite Meta-Angaben sind ebenso wichtig für den Erfolg einer Web-Seite wie ihre optische Wirkung. Denn eine Web-Seite wird nicht nur von Menschen besucht, sondern auch von Programmen, die sie für Suchmaschinen im Internet indizieren.
nach oben
weiter | Seite Web-Projekte publizieren
zurück | Seite Animierte GIF-Grafiken
Teil von SELFHTML/Navigationshilfen Teil von Web-Projektverwaltung

© 2007 Seite Impressum


SELFHTML: Web-Projektverwaltung / Web-Projekte publizieren

SELFHTML

Web-Projekte publizieren
Informationsseite

nach unten Allgemeines zum Publizieren von Web-Projekten
nach unten Homepages bei Online-Diensten
nach unten Kostenlose Homepages
nach unten Eigene Domain-Adresse
nach unten Virtual Hosting mit eigener Domain
nach unten Server-Hosting mit eigener Domain
nach unten Server-Housing mit eigener Domain
nach unten Publizieren mit FTP
nach unten

Allgemeines zum Publizieren von Web-Projekten

Um eigene Projekte im WWW zu publizieren, brauchen Sie:

  • Einen Internet-Zugang: Wenn Sie noch keinen Internet-Zugang haben, müssen Sie sich einen Anbieter (Provider) suchen, der Ihnen einen Zugang vermittelt. Bei der Auswahl eines geeigneten Zugangs-Providers spielen verschiedene Faktoren eine Rolle, zum Beispiel die Tarife der Provider, Sonderkonditionen, Volumen- oder Zeitbeschränkungen usw. Nachdem Sie sich bei einem Provider angemeldet haben (bei Call-by-Call-Providern ist mittlerweile auch keine Anmeldung mehr erforderlich), erhalten Sie eine User-ID und ein Passwort. Mit diesen Daten können Sie dann die Internet-Verbindung aufbauen, sei es über Telefonleitung, TV-Kabel, Stromnetz, Satellit, Handy oder eine andere Trägertechnik. Voraussetzung ist allerdings, dass Ihr Rechner internet-fähig ist. Dazu gehört eine so genannte Internet-Socket-Software (unter Windows z.B. die Datei winsock.dll) sowie geeignete Internet-Client-Programme (etwa ein Web-Browser und ein E-Mail-Programm).
  • Festspeicherplatz auf einem Server-Rechner: Das sollte ein Rechner sein, der eine permanente und sehr schnelle Internet-Anbindung hat, mindestens die Internet-Protokolle HTTP und FTP unterstützt und von seiner Hard- und Software-Grundausstattung so ausgelegt ist, dass er viele Besucher gleichzeitig verkraftet. In der Regel werden Sie den entsprechenden Speicherplatz im Web bei einem Hosting-Provider anmieten, der über entsprechende Technik verfügt. Es gibt eine Fülle von Anbietern, die Speicherplatz im Web vermieten. Die Leistungen und Preise sind sehr unterschiedlich. Sie müssen herausfinden, welche Leistungen Sie brauchen, und wo Sie diese Leistungen am günstigsten bekommen. In vielen Fällen können Sie bei dem Provider, bei dem Sie Ihren Internet-Zugang haben, auch Speicherplatz für eigene Web-Projekte mieten.
  • Eine Web-Adresse: Dabei gibt es unterschiedliche Typen. Bei Online-Diensten oder Billig-Angeboten erhalten Sie beispielsweise häufig Adressen vom Typ http://www.IhrProvider.com/IhrVerzeichnis/. Den Verzeichnisnamen dürfen Sie sich bei der Anmeldung normalerweise selbst aussuchen. Wenn Sie eine eigene Domain-Adresse wollen, also beispielsweise eine Web-Adresse vom Typ http://www.IhrName.com/, muss diese bei einer Vergabebehörde im Internet beantragt werden. Provider, über die Sie Speicherplatz mieten können, übernehmen die entsprechende Anmeldung für Sie.
  • Einen Zugang zu dem gemieteten Speicherplatz: Dazu erhalten Sie von dem Provider, bei dem Sie den Speicherplatz mieten, eine Kennung. Die besteht normalerweise aus einer User-ID und einem Passwort. In den meisten Fällen können Sie Ihr Passwort jederzeit selbst ändern.
  • Software zum Hochladen und Verwalten der eigenen Daten auf dem Server-Rechner: Der klassische Internet-Dienst zum Übertragen von Dateien und zum Ausführen einfacher Dateioperationen auf dem Server-Rechner (Löschen, Kopieren, Verschieben, Zugriffsschutz festlegen usw.) ist das File Transfer Protocol (FTP). Dazu gibt es FTP-Programme, die Sie auf Ihrem Rechner installieren müssen. Bei manchen Anbietern können oder müssen Sie spezielle Software verwenden, die Ihnen der Provider zur Verfügung stellt.

Speicherplatz im Web, der so genannte Webspace, will mit Bedacht ausgewählt sein. Welches Angebot Sie wählen sollten, hängt einerseits von der Art und den technischen Ansprüchen des Projekts ab, andererseits von den Kosten, die Sie bereit zu tragen sind. Generell gilt: sparen Sie nicht am falschen Ende! Viele Leute meinen, sie könnten kostenlos Speicherplatz bekommen und dabei all die tollen Sachen haben, die sie woanders sehen. Dem ist aber nicht so. Für den Preis, den das Monats-Abo einer Tageszeitschrift kostet, bekommen Sie bereits ordentliche Angebote, die für die Mehrzahl der Web-Projekte ausreicht. Doch leider gibt es auf dem Provider-Markt immer noch manche Stümper, die zwar erfolgreich mit Versprechungen locken, aber technisch völlig inkompetent sind. Vor allem am Support hapert es bei vielen Providern. Suchen und vergleichen Sie also lieber ein wenig länger, fragen Sie nach Erfahrungen anderer Projekt-Betreiber und entscheiden Sie sich nicht unbedingt für das erstbeste Angebot, das mit den auffälligsten Schriftgrößen und den kernigsten Sprüchen wirbt.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu Web-Seiten, auf denen Provider-Angebote aller hier vorgestellten Typen aufgelistet und verglichen werden:

Online-Seite WWW-Links: Provider

In diesem Abschnitt werden typische Angebote und ihre Charakteristika vorgestellt.

Homepages bei Online-Diensten

Diese Lösung können Sie anvisieren, wenn Sie bereits einen Internet-Zugang über einen Online-Dienst (T-Online, CompuServe, AOL usw.) haben und einfach nur eine private oder interessensorientierte Homepage im Internet publizieren wollen. Der Vorteil ist dabei, dass Sie keine Zusatzkosten haben, weil das Angebot in den Kosten für den Internet-Zugang bereits enthalten ist.

Bei den genannten Online-Diensten erhalten Sie in der Regel mehrere Megabyte Speicherplatz auf einem Server-Rechner des Online-Dienstes. Dorthin können Sie HTML-Dateien, Grafiken und meistens auch Multimedia-Dateien hoch laden, die dann als Web-Seiten öffentlich zugänglich sind. Es gibt jedoch auch Beschränkungen. So bieten die Online-Dienste in der Regel nicht die Möglichkeit einer eigenen CGI-Schnittstelle an, wo Sie eigene Scripts ablegen können. Wenn Sie solche Dinge wie Zugriffszähler, Gästebücher oder Nachrichtenforen nutzen wollen, sind Sie auf öffentliche Seite CGI-Services angewiesen. Auch weiterführende Zusatzleistungen wie Statistik, die Möglichkeit geschützter Verzeichnisse usw., sind in diesen Angeboten normalerweise nicht enthalten.

Wenn Sie bereits einen Zugang zu einem Online-Dienst haben und erwägen, über diesen Anbieter Ihre Homepage zu publizieren, erkundigen Sie sich bitte innerhalb des Online-Dienstes danach, was Sie brauchen und wie alles im einzelnen funktioniert. Bei CompuServe, AOL oder T-Online gibt es entsprechende Foren, in denen Sie diese Fragen stellen können.

Kostenlose Homepages

Diese Lösung ist sinnvoll, wenn Sie bereits einen Internet-Zugang haben, Ihr Zugangs-Provider aber keine Möglichkeit anbietet, Ihre eigene Homepage ins Web zu stellen. Ernsthaft in Erwägung ziehen sollten Sie diese Möglichkeit jedoch nur für private Homepages ohne Anspruch, sowie für reine Spaß-Projekte. Denn bei fast allen Anbietern von kostenlosem Webspace wird beim Aufruf der Web-Seiten automatisch Werbung eingeblendet. Die meisten Besucher der Seiten empfinden diese Werbung als lästig und halten sich kaum freiwillig länger auf solchen Seiten auf. Dagegen können Sie auch nichts weiter unternehmen, da die Web-Seiten, bevor sie zum Anwender in den Browser gelangen, durch ein Script auf dem Server-Rechner gelotst werden, das die automatisch aufpoppende oder in ein Frameset integrierte Werbung "einbaut".

Bei den kostenlosen Anbietern erhalten Sie in der Regel mehrere Megabyte Speicherplatz, was für die meisten Privatprojekte durchaus ausreicht. Die Beschränkungen sind ähnlich wie bei den nach oben Online-Diensten.

Eigene Domain-Adresse

Wenn Sie eine eigene Domain-Adresse für Ihr Projekt haben möchten, müssen Sie sich einen geeigneten Namen ausdenken.

Bei den Domain-Namen der "Top-Level"-Typen .de (deutsche Adressen), .at (österreichische Adressen), .ch (schweizer Adressen), .com (kommerzielle Adressen), .net (internetbezogene Adressen) oder .org (Organisationen) brauchen Sie mittlerweile viel Phantasie, denn fast alle einfachen Namen und Wörter sind längst vergeben. Beliebt sind daher zusammengesetzte Namen mit Bindestrichen geworden, wie beispielsweise heute-geh-ich-ins-kino.de. Oder Sie weichen auf die neuen Top-Level-Typen wie .info oder .name aus. Fragen Sie dazu gegebenenfalls den Provider Ihrer Wahl.

Der Provider übernimmt in den meisten Fällen die Anmeldung Ihres Domain-Namens. Häufig bieten Provider auch die Möglichkeit an, Sub-Domains einzurichten. Wenn Sie beispielsweise eine Domain namens moecht-ich-gern.de haben, dann können Sie Sub-Domains wie das.moecht-ich-gern.de oder liebe.moecht-ich-gern.de einrichten lassen. Die entsprechenden Web-Seiten wären dann beispielsweise aufrufbar unter http://das.moecht-ich-gern.de/.
Gerade bei Sub-Domain-Namen kann man mit etwas Phantasie mehrere attraktive, kurze und gut zu merkende Namensadressen haben. Sub-Domains sind für Provider technisch problemlos einrichtbar und erfordern keine weiteren Anmeldungen. Fragen Sie den Provider Ihrer Wahl nach Sub-Domains!

Virtual Hosting mit eigener Domain

Beim Virtual Hosting mieten Sie eine bestimmte Menge Speicherplatz. Den Rechner, der normalerweise beim Provider steht und auf den Sie dann Ihre Web-Seiten hoch laden können, teilen Sie sich dabei normalerweise mit anderen Kunden des Providers, die ebenfalls ein solches Angebot gewählt haben. "Virtual" heißt diese Form deshalb, weil es bei solchen Web-Angeboten kein 1:1-Verhältnis zwischen der IP-Adresse des Rechners und dem Domain-Namen gibt, eben weil meistens mehrere Web-Angebote, alle mit eigenen Domain-Namen, auf dem gleichen Rechner liegen.

Virtual Hosting ist für einfache bis umfangreichere, werbefreie Homepages mit eigener Domain-Adresse, also elektronische Visitenkarten und Firmenportraits, aber auch seriöse Fachpublikationen oder Feature-Seiten zu einem bestimmten Thema meistens ausreichend und gut geeignet.

Bei Angeboten dieser Art erhalten Sie neben dem Speicherplatz in der Regel auch ein eigenes CGI-Verzeichnis, um serverseitig dynamische Web-Seiten zu erzeugen, sowie Zusatzleistungen wie Statistiken über Besucher Ihrer Seiten, oder einen Service-Bereich, in dem Sie - meist web-basiert und ohne zusätzliche Kenntnisse - Ihre persönlichen Kenndaten ändern können, Verzeichnisse schützen können, Online-Hilfen erhalten usw. Außerdem beinhalten diese Angebote in der Regel auch den Anspruch auf Support, wenn es mal technische Probleme gibt (Ihre HTML- und JavaScript-Probleme löst ein solcher Support allerdings nicht). Zusatzleistungen dieser Art haben Sie bei Online-Diensten und kostenlosen Webspace-Angeboten normalerweise nicht.

Server-Hosting mit eigener Domain

Beim Server-Hosting stellt Ihnen der Provider einen kompletten Rechner zur Verfügung, auf dem kein anderes Web-Angebot abgelegt ist. Beim Server-Hosting erhalten Sie in der Regel auch den vollen Betriebssystem-Zugang zum Server-Rechner, können selbst Benutzer einrichten, neue Software installieren usw. Über Internet-Dienste wie Seite Telnet oder SSH können Sie sich dann auf dem Rechner einloggen und dort arbeiten. Dazu benötigen Sie entsprechende Telnet- oder SSH-Programme. Um sinnvoll auf einem Server-Rechner arbeiten zu können, sind tiefe Kenntnisse des dort eingesetzten Betriebssystems erforderlich. Wenn der Server-Rechner beispielsweise ein Linux-Betriebssystem hat, müssen Sie sich mit Linux gut auskennen, um die Möglichkeiten zu nutzen, die Ihnen ein eigener Server-Rechner bietet.

Server-Hosting ist für Web-Angebote erforderlich, die sehr umfangreich sind und/oder sehr hohe Besucherfrequenzen haben und/oder technisch nicht triviale Mittel einsetzen, für die beispielsweise spezielle Software auf dem Server erforderlich ist. Das können spezielle Server-Typen sein, etwa für Chats oder Multimedia, oder auch spezielle Datenbank-Software.

Da bei solchen Web-Projekten meistens mehrere Personen Zugang und Kompetenzen haben, muss vieles organisiert werden. So sollte es einen "Webmaster" geben, also einen Betreuer, der den Server-Rechner, seine Software, seine gespeicherten Inhalte, Konfigurationen usw. kennt und beurteilen kann, ob und welche Hard-/Software-Erweiterungen angesichts der Serverbelastung nötig sind. Konfigurationsdaten und Konzepte zur Datenstruktur usw. sollten ausreichend dokumentiert werden.

Beim Server-Hosting sollten Sie noch stärker als beim Virtual Hosting auf ordentlichen Support achten. Es gibt Provider, die zwar für einen guten Preis eigene Server-Rechner anbieten, aber nicht zur Stelle sind, wenn es brennt.

Server-Housing mit eigener Domain

Beim Server-Housing stellen Sie selbst den Server-Rechner zur Verfügung, und der Provider stellt ihn lediglich "bei sich unter". Der Grund ist, dass Sie selber normalerweise nicht über so leistungsstarke und teuere Internet-Anbindungen verfügen wie der Provider.

Der Vorteil beim Server-Housing ist gegenüber dem Server-Hosting, dass Sie die Hardware des Rechners völlig nach Ihren Wünschen zusammenstellen können. Ein Nachteil ist, dass der Provider normalerweise keinen Support für Probleme übernimmt, die nichts mit der Internet-Anbindung zu tun haben. Beim Server-Hosting, wo der Provider die Hardware stellt, ist dies noch eher der Fall.

Ansonsten gelten für das Server-Housing die gleichen Bemerkungen wie für das Server-Hosting.

Publizieren mit FTP

Wenn Sie nicht gerade selbst an der Bedienkonsole eines Server-Rechners sitzen, müssen Sie die Datenverwaltung (Dateien hoch laden, löschen usw.) auf dem Server von einem beliebigen Rechner mit einfachem Internet-Zugang aus erledigen. Das heute übliche Internet-Protokoll dazu ist Seite FTP (File Transfer Protocol). Zur reinen Datenverwaltung (ohne Datei-Upload und -Download) sind die Internet-Dienste Seite Telnet oder SSH noch besser geeignet, da sie praktisch eine "Konsolensimulation" leisten, also das Arbeiten auf dem fernen Server-Rechner erlauben, so als säße man vor dessen Bildschirm.

Von Ihrem Provider erhalten Sie alle erforderlichen Daten, die Sie brauchen, um Ihre Daten auf dem Server verwalten zu können. Was Sie zum Hochladen noch brauchen, ist ein leistungsfähiges FTP-Programm.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu FTP-Programmen:

Online-Seite WWW-Links: FTP-Programme

Die meisten modernen FTP-Programme haben grafische Oberflächen, die bekannten Dateimanagern oder Datei-Commandern ähneln. Sie benötigen dabei keine tiefer reichenden Kenntnisse. Zum Zugriff auf den Server-Rechner brauchen Sie die FTP-Adresse Ihres Speicherbereichs, eine User-ID und ein Passwort. Diese Daten teilt Ihnen der Provider mit. Die Daten können Sie bei den meisten modernen FTP-Programmen in einer integrierten FTP-Site-Verwaltung fest speichern.

Einige Tipps noch:

  • Wenn Ihr Projekt aus Unterverzeichnissen besteht, benennen Sie die Verzeichnisse auf dem lokalen Rechner, wo Sie das Projekt erstellen, genau so wie auf dem Server-Rechner. So können Sie besser kontrollieren, was wo steht. Außerdem sollten die Verweise und Referenzen innerhalb des Projekts lokal genau so funktionieren wie auf dem Server. Achten Sie auf Groß- und Kleinschreibung bei Datei- und Verzeichnisnamen. Die meisten Server-Rechner laufen unter Betriebssystemen, die Groß-/Kleinschreibung (im Gegensatz zu Windows) unterscheiden. Am einfachsten vermeiden Sie Probleme, indem Sie alle Datei- und Verzeichnisnamen durchweg klein schreiben.
  • Wenn Sie einzelne Dateien lokal auf Ihrem Rechner aktualisiert oder hinzugefügt haben, lassen Sie sich die Dateiliste vor dem Hochladen der Dateien auf den Server-Rechner nach Datum sortiert anzeigen. So sehen Sie besser, welche Dateien neu oder erneuert sind, und vergessen nichts beim Hochladen.
  • Kontrollieren Sie nach jedem Hochladen von Dateien das Vorgangs-Protokoll, das Ihr FTP-Programm aufzeichnet. Wenn dort bei der Übertragung von Dateien irgendwelche Fehler aufgezeichnet sind, laden Sie diese Dateien noch einmal hoch.
  • Lassen Sie sich nach jedem Hochladevorgang den aktualisierten Inhalt auf dem Server-Rechner anzeigen und überprüfen Sie, ob die neuen Dateien angezeigt werden. Beachten Sie, dass die Anzeige von Datum und Uhrzeit auf dem Server-Rechner nicht unbedingt Ihrer lokalen Zeit entsprechen muss. Viele Server-Rechner stehen in den USA und benutzen als Systemzeit die dort aktuelle Lokalzeit. Auch bei Dateigrößen können Unterschiede zwischen lokaler Version und Server-Version einer Datei angezeigt werden. Das muss nicht bedeuten, dass die Datei bei der Übertragung beschädigt wurde.
  • Rufen Sie die neuen Dateien anschließend mit einem Web-Browser auf, um zu kontrollieren, ob alles so funktioniert, wie es soll.
nach oben
weiter | Seite Web-Projekte bekannt machen
zurück | Seite Web-Projekte planen
Teil von SELFHTML/Navigationshilfen Teil von Web-Projektverwaltung

© 2007 Seite Impressum


SELFHTML: Web-Projektverwaltung / Web-Projekte bekannt machen

SELFHTML

Web-Projekte bekannt machen
Informationsseite

nach unten Allgemeines
nach unten Projekte bei Suchdiensten und Verzeichnissen anmelden
nach unten Strategien bei der Online-Kommunikation
nach unten Sonstige Bekanntmachungsstrategien
nach unten

Allgemeines

Nachdem Sie ein neues Projekt im Web publiziert haben, weiß niemand außer Ihnen und Personen, denen Sie die Adresse persönlich mitteilen, etwas von der Existenz des Projekts. Damit Ihr Projekt tatsächlich auffindbar, und besser noch, bekannt wird, müssen Sie es bekannt machen. Dazu gibt es verschiedene Möglichkeiten, die in diesem Abschnitt beschrieben werden.

Bitte beherzigen Sie folgende allgemeine Regeln:

  • Seien Sie nicht marktschreierisch. Das mag niemand und erreicht eher das Gegenteil von dem, was Sie sich wünschen.
  • Trachten Sie nicht so sehr danach, dass möglichst viele Leute Ihre Seiten besuchen, sondern eher danach, dass die Besucher begeistert sind, sich freiwillig längere Zeit in Ihrem Projekt aufhalten und gerne wiederkommen. Bekanntheit und ein guter Name sind nämlich zweierlei, und es ist besser für das Internet, wenn es Ihnen vor allem auf den guten Namen ankommt.
  • Bleiben Sie auf dem Boden, wenn Ihr Projekt tatsächlich bekannter wird. Das Web ist nicht Hollywood. Überheblichkeit und Star-Gehabe werden mit Nichtachtung und Abwendung gestraft.

Projekte bei Suchdiensten und Verzeichnissen anmelden

Alle großen Suchmaschinen im Web bieten die Möglichkeit an, neue Seiten anzumelden. Dann bekommen Ihre Seiten nach einer Weile (es kann bei manchen Suchmaschinen wegen notorischer Überlastung leider sehr lange dauern) Besuch von einem Software-Programm, einem so genannten Robot. Dieser benimmt sich wie ein eifriger Web-User und folgt allen Links, die er auf der angemeldeten Adresse findet. Alles, was er abgrast, merkt er sich und speichert die Texte der Seiten in der großen Datenbank der Suchmaschine. Von da an sind Ihre Seiten in der Suchmaschine auffindbar. Der Robot kommt dann von Zeit zu Zeit wieder und erfasst neue und geänderte Daten auf Ihren Seiten.

Daneben gibt es auch Web-Verzeichnisse, die redaktionell basiert sind. Melden Sie Ihre Seiten bei einem solchen Verzeichnis an, dann werden die Seiten nach einer Weile von einem Redakteur besucht, der darüber entscheidet, ob die Seiten in das Verzeichnis aufgenommen werden.

Bei folgenden Suchmaschinen und Web-Verzeichnissen sollten Sie deutschsprachige Angebote auf jeden Fall anmelden:

deutschsprachige Seite http://www.google.de/
deutschsprachige Seite http://www.fireball.de/
deutschsprachige Seite http://de.altavista.com/
deutschsprachige Seite http://de.yahoo.com/
deutschsprachige Seite http://web.de/
deutschsprachige Seite http://www.dino-online.de/

Wenn Sie in einer Suchmaschine angemeldet sind, bedeutet das allerdings noch nicht, dass nun sofort die Besuchermassen auf Ihre Seiten strömen. Denn erst einmal müssen die Anwender des Suchdienstes ja nach Begriffen suchen, bei denen Ihre Seiten zu den Suchtreffern gehören, und dann müssen sie unter den angebotenen Suchtreffern Ihre Seiten als besonders aussichtsreich einschätzen. Deshalb sind ja auch ordentliche Seite Meta-Angaben in HTML so wichtig.

Je nach Projekt ist es auch sinnvoll, das Projekt bei kleineren, spezielleren Suchmaschinen und/oder Verzeichnissen anzumelden. So sind beispielsweise fast alle bekannten Branchen-Verzeichnisse auch im Web vertreten. Wenn Sie einen Firmenauftritt im Web bekannt machen wollen, ist eine Anmeldung dort durchaus sinnvoll, wenngleich Sie auch dabei nicht zu viel erwarten sollten, zumal die Anmeldung im Gegensatz zu der Anmeldung bei Suchmaschinen Geld kostet. Bei Fach-Projekten lohnt auf jeden Fall die Anmeldung bei Katalogen und fachbezogenen Suchdiensten. Dazu müssen Sie allerdings erst mal wissen, welche Spezial-Suchdienste und -Verzeichnisse es überhaupt gibt. Für diesen Zweck gibt es eine Suchmaschine für Suchmaschinen:

deutschsprachige Seite http://www.suchlexikon.de/

Es kann auch sinnvoll sein, Betreiber bekannter anderer Web-Angebote anzuschreiben und höflich anzufragen, ob es dort möglich ist, einen Link auf das eigene Angebot zu setzen. Treten Sie aber nicht so auf, als ob darauf irgendein Anspruch bestünde. Es bleibt dem Ermessen des Anbieters überlassen, ob er einen Link auf Ihre Seiten setzt oder nicht.

Strategien bei der Online-Kommunikation

Vermutlich werden Sie das Internet ja auch für E-Mail-Korrespondenz nutzen. Legen Sie sich in Ihrem E-Mail-Programm eine Signatur an, die automatisch am Ende aller E-Mails eingefügt wird, die Sie schreiben. Die Signatur sollte auch Ihre Web-Adresse enthalten, ansonsten aber unaufdringlich wirken.

Beispiel:

-------------------------------------------
Rudolf Rabenstein, Hamburg, Tel. 0173-308934023
http://www.rudolf-rabenstein-online.de/
-------------------------------------------

Wenn Sie Seiten zu bestimmten Fachgebieten oder Themen haben, empfiehlt es sich auch, an Internet-Diskussionen zu den entsprechenden Themen teilzunehmen. So gibt es für fast alle Gebiete Newsgroups, Mailing-Listen oder web-basierte Foren. Gute Übersichts- und Einstiegsadressen dafür sind:

deutschsprachige Seite http://de.groups.yahoo.com/
deutschsprachige Seite http://groups.google.de/
deutschsprachige Seite http://www.wer-weiss-was.de/

Überzeugen Sie in Diskussionen durch fachliche und kommunikative Kompetenz. Benutzen Sie auch in solchen Diskussionsbeiträgen eine Signatur, ähnlich wie in privaten E-Mails. Aber achten Sie dabei erst recht darauf, eine unauffällige Signatur zu verwenden. Alles andere wird als lästige Werbung empfunden. Durch überzeugendes Auftreten in Fachkreisen spricht sich dann auch Ihre Web-Adresse herum.

Sonstige Bekanntmachungsstrategien

Bei neuen, professionellen Projekten sind auch Pressemitteilungen angebracht. Wenn es sich um Computer-orientierte Projekte handelt, sind PC-Fachzeitschriften zum Beispiel eine gute Adresse. Wenn es sich um ein Hobby anderer Art handelt (Radfahren, Angeln, Tauchen, Reisen usw.), können Sie eine Pressemitteilung an entsprechende Fachmagazine verfassen. Bei elektronischen Magazinen können Mitteilungen an Life-Style-Magazine erfolgen. Die Pressemitteilung kann per Post, per Fax oder per E-Mail erfolgen. Bei den meisten Medien (Print wie Hörfunk) sind die Internetredaktionen Anhängsel zu den althergebrachten Redaktionen. Es lohnt sich deshalb eher, sich an die traditionellen Redaktionen zu wenden. Bei online-spezifischen Angeboten kann das anders sein. Adressen erfahren Sie aus dem Impressum des jeweiligen Publikationsorgans. Bitte schreiben Sie aber nicht wegen Ihrer neuen Goldhamster-Homepage an die Frankfurter Allgemeine.

Wenn Sie als Unternehmen ohnehin Anzeigen in Zeitungen, Zeitschriften, Fachpublikationen oder audiovisuellen Massenmedien schalten, platzieren Sie dort auch die Homepage-Adresse. Oft genügt es, die Web-Adresse ohne jeden Kommentar an einer geeigneten Stelle zu platzieren. Wer weiß, was eine solche Adresse ist, weiß sofort, was gemeint ist, und den anderen können Sie es an der Stelle ohnehin nicht erklären.

Wenn Sie viel Kundenverkehr haben, legen Sie Handzettel mit einer Kurzvorstellung Ihrer Homepage aus. Achten Sie auch darauf, die Adresse auf Ihrer Visitenkarte, auf Ihren Briefbögen, Ihren Faxvordrucken usw. mit abzudrucken.

Machen Sie sich im Web schlau, welche weiteren Möglichkeiten es gibt. So gibt es beispielsweise so genannte Web-Ringe zu allen nur erdenklichen Themen. Bei einem Web-Ring verlinken sich mehrere Web-Projekte zum gleichen Thema ringartig, sodass ein Besucher über eines der Projekte auch zu den anderen gelangt.

Kaum noch zu empfehlen ist das Schalten eigener Werbe-Banner auf fremden Web-Seiten. Die Klickraten bei Werbe-Bannern sind mittlerweile so niedrig, dass aus Anwendersicht die Hoffnung besteht, irgendwann von diesen scheußlichen und jedes Web-Design zerstörenden Dingern befreit zu sein. Die Kosten für das Schalten solcher Banner stehen normalerweise in keinem Verhältnis zu dem tatsächlichen Nutzen.

nach oben
weiter | Seite Web-Projekte kontrollieren
zurück | Seite Web-Projekte publizieren
Teil von SELFHTML/Navigationshilfen Teil von Web-Projektverwaltung

© 2007 Seite Impressum


SELFHTML: Web-Projektverwaltung / Web-Projekte kontrollieren

SELFHTML

Web-Projekte kontrollieren
Informationsseite

nach unten Allgemeines
nach unten Log-Dateien des Web-Servers
nach unten Statistiken
nach unten Statistiken auswerten
nach unten Begriffe wie Hits, Pageviews und Visits
nach unten Anwender-Feedback auswerten
nach unten

Allgemeines

Wenn Sie ein Projekt im Web Seite publiziert haben, werden Sie sicher auch interessiert sein zu erfahren, wie häufig darauf zugegriffen wird. Um richtig einschätzen zu können, wie gut Ihr Projekt ankommt und was Sie daran verbessern sollten, reichen allerdings reine Zugriffszahlen nicht aus. Um aussagekräftige Ergebnisse über die Abrufe Ihrer Web-Seiten zu erhalten, sind Statistiken nötig, die Ihnen die Zugriffe nach bestimmten Kriterien aufschlüsseln. So gibt es Statistiken, die auflisten, welche Dateien am häufigsten abgerufen wurden, zu welchen Tageszeiten die meisten Besucher zu verzeichnen sind, oder welche Web-Browser am häufigsten verwendet werden.

Bei besseren Providern gehört es zum Service, dass Sie Zugriff auf Log-Dateien haben, die Ihren Speicherbereich betreffen. Die meisten Provider bieten auch Statistiken an, mit deren Hilfe Sie die Besucherzahlen nach verschiedenen Kriterien aufbereitet bekommen.

Wenn Sie Ihre Homepage bei Discount-Providern wie CompuServe, T-Online usw. oder bei Anbietern von kostenlosem Webspace haben, stehen Ihnen solche Dienste meist nicht zur Verfügung. Um in solchen Fällen an genaue Zugriffsstatistiken zu kommen, können Sie einen öffentlichen Seite CGI-Service in Anspruch nehmen. Dort bekommen Sie für eine geringe Jahresgebühr einen Zugriffszähler sowie ordentlich aufbereitete Statistiken für Ihre Homepage, egal wie deren Adresse lautet. Ein Nachteil bei dieser Lösung ist allerdings, dass bei jedem Zugriff auf Ihre Homepage zusätzlich auf den fremden Server des Zähler-Anbieters zugegriffen werden muss.

Log-Dateien des Web-Servers

Grundlage aller Zugriffsstatistiken sind Log-Dateien des Web-Servers. Jeder Web-Server führt solche Log-Dateien, in denen er alle Zugriffe protokolliert. Dazu gibt es ein allgemeines Modell, wie Einträge in einer Log-Datei auszusehen haben. Ein Eintrag nach diesem Modell hat folgendes Aussehen:

Beispiel:

ad25-175.compuserve.com - - [02/Oct/2001:23:03:49 -0500] "GET /selfhtml/index.htm HTTP/1.1" 200 1788

Erläuterung:

Jede Zeile in der Log-Datei dokumentiert einen Zugriff auf eine Datei. Das Beispiel zeigt eine solche Zeile. Log-Dateien viel besuchter Projekte enthalten zigtausende solcher Zeilen und können sehr schnell sehr groß werden. Meistens sorgen regelmäßig automatisch startende Server-Prozesse, so genannte Cron-Jobs, dafür, dass die Log-Dateien regelmäßig archiviert und wieder geleert werden. Die Log-Dateien haben meistens Namen wie access.log. Wo diese Dateien abgelegt sind, hängt von der Server-Konfiguration ab. Fragen Sie Ihren Provider danach, sofern er Ihnen von sich aus keine Angaben dazu macht!

Am Beginn jeder Zeile steht, wer zugegriffen hat. Bei den meisten Zugangsprovidern erhalten die Anwender beim Einwählen ins Internet eine dynamische IP- und Namensadresse, unter der sie dann in den Log-Dateien der Web-Server auftauchen, die sie besucht haben. Im obigen Beispieleintrag ist erkennbar, dass sich der Anwender über CompuServe ins Internet eingewählt hat. Die Angabe ad25-175 ist eine dynamisch vergebene Adresse.

Anstelle der beiden Bindestriche im obigen Beispiel können von Fall zu Fall noch Daten stehen. Anstelle des ersten Bindestriches kann der Anwender-Logname stehen (entsprechend der Spezifikation RFC 931). Anstelle des zweiten Bindestriches kann ein Anwendername stehen, den der Anwender sich selbst gegeben hat.

Als nächstes zeigt der Eintrag, wann genau der Zugriff erfolgte. Im Beispiel ist das der 2. Oktober 2001 um 23.03 Uhr (und 49 Sekunden), und zwar minus 5 Stunden gerechnet gegenüber GMT (Greenwich Meridian Time) aus Sicht der Systemzeit des Server-Rechners.

Dahinter folgt ein Kurzprotokoll des HTTP-Headers, mit dem der WWW-Browser des Anwenders die Datei angefordert hat. GET ist dabei die übliche Methode. Dahinter wird die Datei angegeben, auf die der Zugriff erfolgte. Im Beispiel ist das die Datei /selfhtml/index.htm. Es wird der Pfadname relativ zur Domain-Adresse angezeigt. Schließlich zeigt die HTTP-Anforderung noch die verwendete HTTP-Protokollversion an. Das war zur Auswertungszeit die Version 1.1.

Dahinter folgt eine Codenummer, die darüber Aufschluss gibt, ob die Anforderung erfolgreich war, und wenn nicht, welches der Fehler war. Dabei sind folgende Nummern wichtig:
200 = Die Anforderung war erfolgreich
4xx, 5xx = Es traten Fehler auf. Zum Beispiel war die angeforderte Datei nicht vorhanden. Lesen Sie dazu auch die Übersicht der Seite HTTP-Statusmeldungen

Die letzte Zahl in der Zeile schließlich gibt an, wie viele Bytes von der Datei an den aufrufenden WWW-Browser übertragen wurden. Wenn Sie die Bytezahl mit der tatsächlichen Dateigröße vergleichen, können Sie feststellen, ob die Datei vollständig übertragen wurde, oder ob die Übertragung vorzeitig abgebrochen wurde. So kommt es zum Beispiel oft vor, dass Grafiken nicht vollständig übertragen werden, weil der Anwender bereits vorher auf einen Verweis zu einer anderen Seite klickt.

Neben den reinen Zugriffs-Log-Dateien führen Web-Server auch Log-Dateien über aufgetretene Fehler. Solche Log-Dateien haben Namen wie error.log. Die Dateien sind ähnlich aufgebaut wie Zugriffs-Log-Dateien. Das folgende Beispiel zeigt eine typische Zeile aus der Error-Log-Datei des Web-Servers Apache:

Beispiel:

[Tue Oct 02 23:04:34 2001] [error] [client ad25-175.compuserve.com] File does not exist: /selfhtml/tc.htm

Erläuterung:

Zu Beginn steht ein Zeitstempel im UTC-Format. Im Beispiel ist Dienstag (Tue = Tuesday = Dienstag), der 2. Oktober 2001, 23.04 Uhr und 34 Sekunden gemeint. Dahinter wird das Vorkommnis genannt (error) und dahinter der verursachende Client (z.B. der Browser eines Seitenbesuchers). Die Fehlermeldung wird in englischem Klartext genannt. Im Beispiel hat der Anwender versucht, auf eine Datei zuzugreifen, die nicht existiert. Schuld daran kann beispielsweise ein Link von einer fremden Seite sein, der zu dieser Adresse führt, die aber nicht oder nicht mehr existiert.

Statistiken

Log-Dateien sind normalerweise sehr groß und etwa so spannend wie ein Telefonbuch. Um eine aussagekräftige Übersicht über die Zugriffe auf Ihre Seiten zu erhalten, sollte Ihr Provider Statistiken anbieten. Dazu bietet Ihnen der Provider bei Kapitel Virtual Hosting in der Regel einen über Web-Browser aufrufbaren Service-Bereich an, zu dem Sie nur mittels eines Benutzernamens und Passworts Zugang haben. Bei Kapitel Server Hosting oder Kapitel Server Housing kann es auch sein, dass Sie sich selber um die Installation geeigneter Statistik-Software kümmern müssen.

Statistiken bestehen einerseits aus Software, die aus den Log-Dateien regelmäßig ihre eigene Datenbank pflegt, und einem oder mehreren CGI-Scripts, die Sie aufrufen können, um die Statistik im Browser in HTML-Form aufbereitet ansehen zu können. Es gibt rein text-orientierte Statistiken, die Daten in Listen oder Tabellen präsentieren, aber auch grafische Statistiken, bei denen die Daten in Form von Balken- und Tortendiagrammen präsentiert werden.

Statistiken stellen Ihnen die Zugriffe nach einem bestimmten Kriterium sortiert dar. Folgende Kriterien sind typisch:

  • Auflistung nach Dateien (auf welche Dateien wurde am häufigsten zugegriffen?)
  • Auflistung nach Zeit (zu welcher Tageszeit, an welchen Wochentagen wurden die meisten Zugriffe verzeichnet?)
  • Auflistung nach Herkunft (über welche Domain-Adressen haben sich die meisten Anwender ins Internet eingewählt?)
  • Auflistung nach Erfolg (welche Dateien wurden vollständig übertragen, bei welchen wurde bei der Übertragung vorzeitig abgebrochen?)
  • Auflistung nach Anwender-Software (welche WWW-Browser in welchen Versionen wurden am häufigsten verwendet?)

Statistiken bleiben allerdings stets relativ genau. Absolute Genauigkeit ist deshalb nicht möglich, weil Statistiken letztlich nur auf den Log-Dateien des Web-Servers basieren, es aber viele andere Faktoren gibt, die das Abrufen von Web-Seiten mit beeinflussen. So zum Beispiel der Cache-Speicher eines jeden Web-Browsers. Je nachdem, was der Anwender dort eingestellt hat, wird die Web-Seite, obwohl vom Anwender aufgerufen, gar nicht vom Web-Server geholt, sondern aus dem Browser-Cache, ohne dass der Browser wenigstens noch mal beim Server nachfragt, ob es von der Web-Seite mittlerweile eine neuere Version gibt als die in seinem Cache. Der Web-Server bekommt folglich gar nichts davon mit. Ebenso ist es mit den zahlreichen Proxy-Servern im Netz. Viele Anwender haben im Browser freiwillig oder auf Anforderung ihres Providers hin Proxy-Server eingestellt. Proxy-Server sind für den Internet-Zugang des Anwenders besonders leicht und ohne viele Umwege erreichbar, und das Übertragen der Daten von dort aus zum Browser geht merklich schneller, als wenn die Daten vom Original-Server übertragen werden. Wenn Ihr Web-Projekt auf einem solchen Proxy-Server verfügbar ist (jawohl, Ihr Web-Projekt wird von solchen Proxy-Servern automatisch komplett "geklaut" und zur Verfügung gestellt - das ist ganz normal im Internet), ist der Effekt der gleiche wie beim Browser-Cache: der Web-Server Ihres Projekts bekommt gar nichts davon mit. Andererseits werden in der Log-Datei des Web-Servers aber auch viele Einträge erzeugt, die gar nicht von menschlichen Besuchern stammen. Such-Robots von Suchmaschinen, die Ihre Seiten indizieren, oder Software-Agenten von Proxy-Servern, die Ihre Seiten an den Proxy-Server übertragen - sie alle erzeugen "Traffic", also Verkehr auf Ihren Seiten, ohne dass ein Mensch daran beteiligt ist.

Statistiken auswerten

Die folgende Checkliste soll Ihnen helfen, Statistiken zu interpretieren und Schlüsse daraus zu ziehen:

  • Haben Sie so gut wie keine Zugriffe?
    Wenn Ihr Projekt erst seit wenigen Tagen im Netz steht, ist das normal. Wenn es allerdings schon seit Monaten online ist, haben Sie zu wenig unternommen, um das Seite Projekt bekannt zu machen. Die Zugriffszahlen hängen natürlich auch von den angebotenen Themen ab. Ein Projekt über die neuesten Computer-Spiele hat nun einmal mehr Zugriffe als ein Projekt über seltene Orchideensorten.
  • Haben Sie viele Zugriffe auf die Einstiegsdatei, jedoch so gut wie keine auf die Unterseiten?
    Es ist ganz normal, dass die Einstiegsseite mit Abstand die meisten Zugriffe zu verzeichnen hat. Wenn aber die Unterseiten so gut wie gar nicht besucht werden, deutet das darauf hin, dass vielen Besuchern Ihre Einstiegsseite nicht gefällt, dass bei der Einstiegsseite zu viele Daten (z.B. aufwendige Grafiken, Flash-Intros usw.) übertragen werden, oder dass die Einstiegsseite so unübersichtlich ist, dass die Besucher die Verweise zu den Unterseiten nicht finden. In diesem Fall sollten Sie Ihre Einstiegsseite neu, einfacher und übersichtlicher gestalten und überprüfen, ob das Verhältnis anschließend günstiger wird.
  • Werden große Grafiken häufig genug vollständig übertragen?
    Das gilt besonders für Einstiegsseiten. Wenn eine solche Seite ihren Blickfang beispielsweise aus einer 50 Kilobyte großen Grafik bezieht und von dieser Grafik im Schnitt nur die Hälfte übertragen wird, bedeutet das, dass kaum ein Besucher darauf wartet, bis die Seite ihre ganze Pracht entfaltet hat. In diesem Fall sollten Sie die Seite dringend neu gestalten.
  • Wie lange halten sich Besucher auf Ihren Seiten auf?
    Das können Sie am besten direkt an den Log-Dateien erkennen. Wenn Sie 50 Seiten haben und die Besucher im Schnitt unter einer Minute verweilen, ist das Projekt einfach nicht attraktiv genug. Ausgenommen davon sind Projekte mit dem Charakter von Nachschlagewerken, in denen niemand stöbert, sondern nur eine gezielte Auskunft sucht. Sie können nicht erwarten, dass die Besucher stundenlang bleiben und alles von vorne bis hinten studieren. Aber mehrere Minuten im Schnitt deuten darauf hin, dass die Besucher sich auch mal "verführen" lassen.
  • Wo kommen Ihre Besucher her?
    Achten Sie dabei darauf, von welchen fremden Adressen aus auf Ihr Projekt zugegriffen wird. So können Sie beispielsweise erkennen, ob Sie häufig über Themensuchen in Suchdiensten gefunden werden, oder ob eine anklickbare Anzeige, die Sie bei einem Kataloganbieter gegen Gebühr geschaltet haben, sich rentiert. Auch auf die Länderherkunft sollten Sie achten. Wenn Sie viele Besucher aus dem fremdsprachigen Ausland haben, aber kein mehrsprachiges Angebot, dann ist zu überlegen, ob ein mehrsprachiges Angebot die Attraktivität des Projekts nicht vervielfachen könnte.

Begriffe wie Hits, Pageviews und Visits

Statistiken sind bekanntlich dehnbar. Es kommt immer darauf an, was eigentlich gezählt wird. Deshalb ist es wichtig, dass Konventionen darüber bestehen, welche typischen Begriffe welche Bedeutung haben. Denn wann ist ein Zugriff ein Zugriff? Sobald der Web-Server die GET-Anfrage des Clients erhalten hat? Oder nachdem die angeforderte Web-Seite vollständig an den aufrufenden Client, also beispielsweise den Browser des Anwenders, übertragen hat? Mit oder ohne referenzierte Dateien wie Grafiken, Sound usw.?

Jede Zeile im Access-Log des Web-Servers erzeugt einen so genannten Hit. Wenn eine Web-Seite also beispielsweise aus einer HTML-Datei und 10 darin referenzierten Grafiken besteht, dann erzeugt diese Web-Seite, wenn ein Anwender sie anfordert, 11 Hits. Dabei ist es egal, ob die Dateien vollständig übertragen wurden oder nicht. Sogar nicht gefundene Dateien (404-Errors) werden als Hits gezählt. Hits liefern also hohe, beeindruckende Zahlen, die sich aber schnell relativieren, wenn man sich klar macht, dass viele typische Web-Seiten etliche kleine, referenzierte Grafiken enthalten. Außerdem geht aus den Hits nicht hervor, ob der Besucher die Seite je zu Gesicht bekommen hat. Lassen Sie sich also nicht beeindrucken von Leuten, die mit ihren Hits prahlen. Für die Einschätzung des tatsächlichen Erfolgs einer Web-Seite sind Hits nicht geeignet. Interessant sind die Hits eigentlich nur im relativen Vergleich, z.B. um herauszufinden, wie sich der Gesamtverkehr auf den Web-Seiten über die Monate hinweg entwickelt.

Pageviews - neuerdings auch Page-Impressions, bei eingedeutschten Statistiken auch HTML-Seiten oder Seiten-Anfragen genannt - sind dagegen "Sichtkontakte eines Anwenders mit inhaltstragenden Dateien". Zugriffe von Anwendern, die in ihrem Browser die Anzeige von Grafiken abgeschaltet haben, sowie Zugriffe von Such-Robots und anderen Software-Agenten werden dabei, falls erkennbar, nicht mitgezählt. Bei Verwendung von Kapitel Frames wird beim Erstaufruf nur die Datei als Pageview gezählt, in der die Frameset-Definitionen stehen. Danach wird davon ausgegangen, dass nur eines der Frame-Fenster den Inhalt beherbergt, während die übrigen zur Navigation oder für Werbung und Ähnliches dienen. Die so definierte statistische Messeinheit ist die Kenngröße der Informationsgemeinschaft zur Festlegung der Verbreitung von Werbeträgern e.V. (ivw - siehe deutschsprachige Seite http://www.ivw.de/). Pageviews oder Page-Impressions sind daher die Basis, wenn Sie z.B. Bannerwerbung auf Ihren Seiten anbieten und Geld dafür bekommen. Völlig unproblematisch ist diese Maßeinheit jedoch auch nicht. Denn zunächst mal ist variabel, welche Dateitypen als inhaltstragend deklariert werden. Das können je nach Einstellungen statische HTML-Dateien, PHP- oder ASP-Dateien, Textdateien, XML-Dateien oder auch CGI-Scripts sein. Eine HTML-Datei kann inhaltstragend sein, sie kann aber auch nicht inhaltstragend sein (z.B. weil sie nur Links zu Unterseiten enthält, nur eine Weiterleitung darstellt oder nur ein eingebettetes Flash-Intro enthält). HTML-Dateien mit Includes (SSI, PHP, ASP) können Inhalte aus mehreren Inhaltsquellen in einer Seite zusammenfassen. Andere Lösungen benötigen zur Anzeige des gleichen Inhalts mehrere HTML-Dateien oder Scripts.

Visits - auch Sessions oder in deutschsprachigen Statistiken Besuche oder Sitzungen genannt - zählen nicht aufgerufene Seiten, sondern die IP-Adressen aufrufender Clients. Ein Anwender, der sich eine Stunde lang munter durch das Angebot Ihrer Web-Seiten klickt und dabei ununterbrochen mit der gleichen Internet-Verbindung unterwegs ist, erzeugt demnach genau einen Visit. Ebenso aber auch ein Anwender, der nur mal die Startseite aufruft und dann gleich wieder verschwindet. Per Konvention der deutschen Werbeindustrie gilt ein Visit als beendet, wenn 30 Minuten lang kein neuer Zugriff erfolgt. Wenn der Anwender also während Ihre Seiten auf seinem Browser angezeigt werden eine längere Mittagspause einlegt oder einschläft und erst nach zwei Stunden auf den nächsten Verweis in Ihrem Angebot klickt, dann gilt das als neuer Visit.

Anwender-Feedback auswerten

Wie Ihre Web-Seiten bei den Besuchern ankommen, erfahren Sie nicht nur aus Statistiken, sondern beispielsweise auch aus E-Mails, die Sie von Anwendern erhalten, oder aus den Einträgen eines Gästebuchs, das Sie auf Ihren Web-Seiten anbieten. Es ist ratsam, alles erhaltene Feedback in irgendeiner Form zu sammeln und sinnvolle Verbesserungsvorschläge, Korrekturen usw. ins Angebot zu integrieren.

Wenig Anwender-Feedback trotz guter Zugriffszahlen muss nichts Negatives bedeuten. Ein ordentlich gestaltetes, den Anwendererwartungen entsprechendes Angebot wird dankbar genutzt, ohne dass die Anwender deswegen auf die Idee kommen, Ihnen begeisterte E-Mails zu schreiben. Explizites Feedback erhalten Sie eher, wenn Ihr Angebot in welcher Form auch immer aus dem Rahmen fällt: der Grund kann sein, dass Anwender enttäuscht sind, weil das Angebot nicht ihren Erwartungen entspricht, oder dass Anwender hin und weg sind, weil das Angebot ihre Erwartungen bei weitem übertrifft und ihnen ganz neue Perspektiven eröffnet.

Ein möglicher Grund für erhöhtes Anwender-Feedback sind technische Besonderheiten Ihrer Seiten. Wenn Ihre Navigation beispielsweise nur mit eingeschaltetem JavaScript und nur mit dem neuesten Internet Explorer funktioniert, dann werden Sie zu Recht einige erboste Reaktionen von Anwendern erhalten, bei denen diese Voraussetzungen nicht gegeben sind. Ebenso ist es mit Seiten, die bestimmte Bildschirmauflösungen erzwingen, den Anwender durch "Features" wie Sperren der rechten Maustaste nerven und dergleichen. Umgekehrt kann es aber auch passieren, dass Anwender sich melden, weil Ihr Seiten-Layout ungewöhnlich gut ist, oder weil bestimmte technische Features, die sie sonst noch nirgends gesehen haben, ihr Interesse geweckt hat. Negatives Feedback zur Technik Ihrer Seiten sollten Sie auf jeden Fall ernst nehmen, zumindest dann, wenn es von mehreren Seiten und immer wieder geäußert wird.

Wenn Sie echte Informationen vermitteln, werden Sie auch Fachfragen von Anwendern erhalten. Wie Sie damit umgehen, ist Ihre Sache. Jedenfalls können Sie solches Feedback als Indiz dafür betrachten, dass Ihr Angebot genutzt wird, dass die Informationen gelesen werden, und dass die Anwender Sie für fachkompetent halten.

Spätestens, wenn Sie regelmäßiges Feedback von den gleichen Anwendern erhalten, haben Sie "Fans". Wenn Sie bis dahin nur ein reines Informationsangebot auf Ihren Seiten haben, sollten Sie darüber nachdenken, ob das Angebot durch Anbieten von Kommunikationsmöglichkeiten wie Web-Forum oder Chat-Raum nicht noch viel attraktiver werden könnte. Mit etwas persönlichem Engagement können Sie es dann schaffen, dass über Ihr Web-Projekt eine richtige Online-Community entsteht - was wohl der Traum vieler Web-Anbieter ist.

nach oben
weiter | Seite Provider wechseln mit Web-Projekten
zurück | Seite Web-Projekte bekannt machen
Teil von SELFHTML/Navigationshilfen Teil von Web-Projektverwaltung

© 2007 Seite Impressum


SELFHTML: Web-Projektverwaltung / Provider wechseln mit Web-Projekten

SELFHTML

Provider wechseln mit Web-Projekten
Informationsseite

nach unten Provider wechseln bei vorhandener Domain-Adresse
nach unten Provider wechseln und neue Domain-Adresse
nach unten

Provider wechseln bei vorhandener Domain-Adresse

Ein mittlerweile häufiger Fall ist, dass Sie bereits eine Seite eigene Domain-Adresse haben, also z.B. eine Adresse vom Typ IhrName.com oder IhrName.de, und nun den Provider wechseln möchten. Die Adresse möchten Sie aber behalten. Das ist normalerweise kein Problem, und eine vorhandene Domain-Adresse können Sie bei einem Wechsel zu einem anderen Provider einfach "mitbringen". Die numerische Rechneradresse, auf die Ihre Seitenbesucher fortan geroutet werden, muss dann geändert werden, aber die Namensadresse, unter der Ihr Projekt bekannt ist, bleibt die gleiche.

Für den Wechsel müssen Sie - zumindest bei de-Domains - einen so genannten KK-Antrag ausfüllen, in dem Sie schriftlich und mit Unterschrift als verantwortlicher Domain-Inhaber ("admin-c") den Änderungswunsch bekunden (KK steht für "Konnektivitäts-Koordination"). Bei anderen Top-Level-Domains (.com, .net usw.) gelten andere Regeln. Fragen Sie am besten den neuen Provider danach! Dieser startet die Umkonnektierung. Dabei werden die Routing-Tabellen auf allen Gateway-Rechnern im Internet geändert, die dafür sorgen, dass weltweit alle Aufrufe mit Ihrem Domain-Namen auf den Rechner geroutet werden, auf dem Ihre Daten nun abgelegt sind. In einem gewissen Übergangszeitraum nach der Umkonnektierung kann es zu technischen Problemen kommen, an denen weder der alte noch der neue Provider Schuld sind. Denn ein Teil der Seitenbesucher wird dann noch zu dem alten Server-Rechner geroutet, ein anderer Teil bereits zu dem neuen. Diese Probleme müssen Sie einfach in Kauf nehmen - sie erledigen sich nach einer Weile von alleine.

Provider wechseln und neue Domain-Adresse

Dieser Fall tritt ein, wenn Sie bereits ein Web-Projekt haben, aber bislang keine eigene Domain-Adresse, z.B. weil Sie das Projekt bei einem Seite Online-Dienst oder einem Seite kostenlosen Anbieter gehostet haben und nun aber "Nägel mit Köpfen" machen wollen.

In diesem Fall müssen Sie erst mal eine Seite eigene Domain-Adresse reservieren. Ihr neuer Provider hilft Ihnen dabei und kann für Sie herausfinden, ob der gewünschte Name noch frei ist.

Nach der Konnektierung ist die neue Adresse dann weltweit erreichbar, und Sie können Ihre Projektdateien auf den neuen Rechner hoch laden. Damit nun aber die Besucher auch zu der neuen Adresse finden, müssen Sie jedoch noch ein paar Dinge regeln:

  • Fragen Sie Ihren alten Provider, ob es möglich ist, Ihre Daten wenigstens noch ein paar Wochen lang unter der alten Adresse zu stehen zu lassen. Dort können Sie dann anstelle der ehemaligen Einstiegsseite eine einfache Seite platzieren, die einen Verweis auf die neue Adresse enthält. Dazu brauchen Sie keine opulenten Grafiken. Es genügt ein einfacher Hinweis auf den Umzug und ein gut sichtbarer, anklickbarer Kapitel Verweis oder eine Seite automatische Weiterleitung auf die neue Adresse.
  • Wiederholen Sie alle Aktivitäten zum Seite Bekanntmachen Ihres Projekts. Melden Sie Ihre neue Adresse wieder bei allen wichtigen Suchdiensten und Web-Verzeichnissen an. Falls die Suchdienste eine Option zum Löschen von Einträgen anbieten, machen Sie davon Gebrauch und löschen Sie den Eintrag, der zu der alten Adresse führt. Ändern Sie Visitenkarten, Brief- und Faxvordrucke ab, damit nur noch Ihre neue Adresse in Umlauf gerät.
  • Informieren Sie andere Seitenanbieter, von denen Sie wissen, dass deren Projekte Verweise auf Ihr Projekt enthalten. Bitten Sie die Anbieter, die Verweise bei Gelegenheit zu aktualisieren. Drängeln Sie aber nicht und schimpfen Sie nicht gleich auf den fremden Anbieter, wenn der Verweis nicht nach zwei Tagen aktualisiert ist.

Diese Maßnahmen gelten auch, wenn Sie nicht den Provider wechseln, aber ein separates Projekt in einem Unterverzeichnis Ihrer eigenen Domain-Adresse haben und das Verzeichnis umbenennen oder das Projekt an einer ganz anderen Stelle publizieren.

nach oben
weiter | Seite Rechtliche Aspekte von Web-Projekten
zurück | Seite Web-Projekte kontrollieren
Teil von SELFHTML/Navigationshilfen Teil von Web-Projektverwaltung

© 2007 Seite Impressum


SELFHTML: Web-Projektverwaltung / Rechtliche Aspekte von Web-Projekten

SELFHTML

Rechtliche Aspekte von Web-Projekten
Informationsseite

nach unten Allgemeines
nach unten Hoheit und Verantwortlichkeit
nach unten Relevante Rechtsbereiche (Deutschland)
nach unten Relevante Gesetze für neue Medien (Deutschland)
nach unten Autoren-Aussage zur Linkhaftung
nach unten

Allgemeines

Zuerst kamen die Idealisten, dann die Prokuristen, und zuletzt die Juristen ins Web. Was zuerst ein Paradies für Freaks war, wurde dann ein Paradies für Investoren, und schließlich ein Paradies für freiherrliche Serienbriefe. "Abgesahnt durch Abgemahnt" war das Motto, und der deutsche Staat und sein Rechtssystem sahen dem munteren Gelderpressen tatenlos zu oder fanden es sogar prima. Zugegeben - das ist natürlich nur ein sehr spezieller Blick auf das Thema "Recht im Internet", ausgelöst durch jene SELFHTML-eigene Geschichte, die Sie im Online-Angebot von SELFHTML aktuell unter dem Titel Online-Seite Recht+Links nachlesen können.

Je enger es jedenfalls im Netz wird, desto häufiger streiten sich zwei. Und je mehr Anwender das Web für sich entdecken, desto mehr Anstößliches wird darin gefunden. Für Web-Anbieter ist es mittlerweile leider ratsam, vor dem Publizieren eines Web-Projekts eine Rechtsschutzversicherung abzuschließen und sich schon mal nach guten, auf Internet-Recht spezialisierten Anwälten umzusehen, die im Ernstfall schnell eingeschaltet werden können. Allzumal in Deutschland, wo die so genannte "Erkundigungspflicht" des Rechtssubjekts als sehr hoch eingeschätzt wird. Je mehr Anwender andererseits in der Lage sind, eigene Web-Seiten zu erstellen, desto mehr extreme Inhalte gelangen ins Netz. Nazischund und Rufmord, Kinderpornos und die sprichwörtlichen Anleitungen zum Bombenbau - auch Menschen mit solchen Absichten lernen HTML, und meistens noch einiges mehr, denn sie sind kommunikativ bestens organisiert und verstehen sich auf blitzschnelle Server-Wechsel und andere Dinge, die Fahndern das Leben schwer machen.

Juristische Aspekte gehören also mittlerweile zum Web Publishing genauso dazu wie Aspekte des Web-Designs oder die Wahl des richtigen Providers. Derzeit ist noch Manches unklar, umstritten und gesetzlich ungeregelt. Noch urteilen Richter über Netzstreitigkeiten, die selber nie eine Computermaus in der Hand hatten, und Politiker, denen es genauso geht, nehmen keinen Anstoß daran. Aber neue Generationen rücken nach, zum Teil schon geschaffene oder noch zu schaffende Reglements werden sich durchsetzen, und die Rechtssicherheit wird wachsen. Das wird aber zur Folge haben, dass man zum Publizieren im Web ein gewisses juristisches Grundwissen benötigen wird, genauso, wie man zum Autofahren die Verkehrsregeln lernen muss.

Dieser Abschnitt kann nur einen sehr groben Überblick über das Thema aus Sicht eines Nicht-Juristen bieten. Der Blickwinkel ist dabei der des Web-Autors.

Hoheit und Verantwortlichkeit

Das Web ist ein weltweites Medium, aber es gibt keine weltweiten Gesetze dafür. Eine Web-Seite ist unter ein und demselben Seite URI in Deutschland, in den USA und in China erreichbar. Was im einen Land als Kapitalverbrechen gilt, ist im anderen Land ein Kavaliers-Delikt. Worauf im einen Land die Todesstrafe steht, das wird im anderen Land mit Bewährungsstrafen geahndet. Ganz unterschiedliche Moralvorstellungen und religiöse Gebräuche haben ganz unterschiedliche juristische Auswirkungen. Was im einen Land als lahmer Stammtischwitz empfunden wird, kostet im anderen Land ein paar Jahre Freiheitsentzug wegen Volksverhetzung. Da erhebt sich zwangsläufig die Frage: darf jeder alles ahnden, was nach seinem Recht nicht rechtens ist? Wenn es so wäre, dann wäre praktisch jedes Web-Angebot aus Sicht irgendeines Blickwinkels der Welt strafrechtlich oder sittenrechtlich belangbar. Das Web wäre sofort tot. Aber wenn das nicht akzeptabel ist, ist es denn umgekehrt? Kann ein Web-Angebot juristisch nicht belangbar sein, nur weil das, was ihm zum Vorwurf gemacht wird, an irgendeinem anderen Ort der Welt, wo das Angebot aufrufbar ist, juristisch nicht geahndet wird? Wohl auch nicht. Also wird ein Web-Angebot nach dem Recht eines bestimmten Landes beurteilt, nämlich nach dem Recht des Landes, dessen Staatsbürger der Verantwortliche des Web-Angebots ist, und bei nicht-natürlichen juristischen Personen nach dem Recht des Landes, in dem diese juristische Person ihren Erfüllungsort hat. Das klingt vernünftig, löst aber nicht unbedingt alle Probleme. Ein Amerikaner, der in deutscher Sprache Nazi-Schund ins Web bringt, erreicht vor allem ein deutsches Publikum, ist aber von Deutschland aus nicht belangbar. Also genügt es für die deutsche Nazi-Szene, ein paar willige Amerikaner zu finden, die ihre Inhalte ins Web bringen, und schon steht jeder in Deutschland als noch so sittenwidrig empfundene Inhalt ganz legal im Web. Nun kann man für solche, eine ganze Volksseele hoch kochen lassende Fälle noch zwischenstaatliche Abkommen schaffen. Aber bei weniger spektakulären, zum Beispiel zivilrechtlichen oder wirtschaftsrechtlichen Angelegenheiten, bestehen ja die gleichen Probleme, und so viele zwischenstaatliche Abkommen, wie dazu nötig wären, kann es niemals geben. Kurzum: es bleiben Grauzonen, ähnlich wie bei der Hochseeschifffahrt, und im Vorteil ist, wer diese Grauzonen zu nutzen weiß.

Ebenso wie die Frage der Hoheit stellt sich die Frage der Verantwortlichkeit. Wenn eine Web-Seite von einem Server-Rechner im Internet zum Browser eines Anwenders übertragen wird, sind daran letztendlich mehrere juristische Personen beteiligt: einmal der Autor der Web-Seite, dann der verantwortlich Publizierende (bei größeren Web-Projekten können das durchaus verschiedene Personen sein), dann der Provider, der den Server zur Verfügung stellt, dann die Backbone-Provider und Netzbetreiber, über deren Leitungen die Daten transportiert werden, und schließlich der Anwender, der die Seite willentlich aufgerufen hat.

In den Anfangszeiten des Web war die Verteilung der Verantwortlichkeit auf diese verschiedenen juristischen Personen noch nicht klar geregelt. So gab es Fälle, in denen Provider für rechtswidrige Inhalte verklagt wurden, von denen sie gar nichts wussten. Mittlerweile gibt es in Deutschland Gesetze, in denen die Rechte und Pflichten der beteiligten juristischen Personen geregelt werden. Doch diese Gesetze sind nach Ansicht mancher Fachleute noch nicht optimal aufeinander abgestimmt und lassen daher noch viele Fragen offen.

Relevante Rechtsbereiche (Deutschland)

Folgende Rechtsbereiche können für Publikationen im Web relevant sein. Die Angaben beziehen sich auf deutsches Recht.

Strafrecht

Inhaltsverantwortliche Anbieter von Web-Seiten sind in Deutschland "Verbreiter von Schriften". Daher können Web-Autoren und Redaktionsverantwortliche strafrechtlich belangt werden:

  • durch Verletzung der öffentlichen Ordnung, insbesondere Volksverhetzung (§130 StGB) und Anleitung zu Straftaten (§ 130a StGB),
  • durch Verstoß gegen Pornographiegesetze (§ 184 StGB),
  • durch Beleidigung, üble Nachrede und Verleumdung (§ 185-188 StGB),
  • durch Anwendung von Nebenstrafrecht, das sich aus dem Urhebergesetz, dem Markengesetz, dem Patentgesetz, dem Gesetz des unlauteren Wettbewerbs und dem Datenschutzgesetz ergeben kann.

Abstufungen wie "vorsätzlich", "fahrlässig" usw. gelten dabei wie üblich und werden von Fall zu Fall bewertet. Es sind zwar im Grunde nur wenige typische strafrechtliche Verstöße, die relevant sind, doch die entsprechenden Gesetze haben ein relativ weites Anwendungsfeld. Hinter der "Anleitung zu Straftaten" verbirgt sich letztlich das halbe Strafgesetzbuch - unvorsichtige Bemerkungen aus Zorn und Empörung, in Dateiform gespeichert und im Web veröffentlicht, können also schnell gefährlich werden. Auch der in § 184 definierte Jugendschutz kann schnell zum Problem werden. Solange es dazu keine anderen oder einschränkenden Bestimmungen für Web-Anbieter gibt, ist er anwendbar, und jedes Web-Angebot, das nicht nachweisen kann, effiziente Abschirmungsmittel einzusetzen, ist bei Nacktdarstellungen oder obszönen Texten - selbst wenn sie künstlerischer Natur sind - potentiell angreifbar.

Zivilrecht

Das Zivilrecht umfasst Bürgerliches Recht, Handels-, Wettbewerbs- und Urheberrecht. Wer im Web publiziert, verteilt im Sinne des Zivilrechts Information. Damit werden vor allem folgende typische Unterbereiche des Zivilrechts auf Inhalte von Web-Seiten anwendbar:

  • das Urheberrecht (Verstöße gegen fremdes geistiges Eigentum),
  • das Marken- und Patentrecht (Verletzungshandlungen gegen registrierte Marken und Patente),
  • das Wettbewerbsrecht (Verstöße gegen Regelungen zur vergleichenden Werbung, gegen berufsspezifische Werbeverbote, gegen Preisbindungsregelungen usw.),
  • das Vertragsrecht (relevant bei Verkaufsabschlüssen, Mietabschlüssen usw. via Internet),
  • das Persönlichkeitsrecht (Verstöße wie Rufschädigung, Veröffentlichung privater Schriften, darunter auch E-Mails),
  • das Produkthaftungsrecht (Haftung bei Falschinformationen, die nachweislich Schäden verursachen)

Gefährlich für Web-Anbieter sind im Bereich des Zivilrechts vor allem die Rechte kommerzieller Unternehmen. Größere Firmen unterhalten Rechtsabteilungen, die immer häufiger auch im Internet nach Verletzungshandlungen gegen Schutzansprüche dieses Unternehmens schnüffeln, zumal in unserem Medienzeitalter der wirtschaftliche Erfolg vieler Unternehmen auch immer stärker an deren Image und Marken hängt. Es gibt jedoch große Unterschiede. Während einige Unternehmen viel erdulden nach dem Motto "Hauptsache man redet über uns", gehen andere vehement gegen Verletzungshandlungen vor, die man ebenso gut als kostenlose Werbung für Produkte des Unternehmens interpretieren könnte. Die Spielräume sind da leider sehr groß, und deshalb ist der Web-Anbieter gerade in diesem Rechtsbereich einer Art Willkür ausgesetzt, der nur mit Rechtsschutzversicherung und guten Kontakten zu kompetenten Anwälten zu begegnen ist.

Öffentliches Recht

Das öffentliche Recht umfasst in Deutschland das Verfassungsrecht und das Verwaltungsrecht. Für Web-Anbieter gibt es in diesem Bereich weniger typische Anwendungsfälle. Zwar enthält das Grundgesetz Passagen, die sich in Rechtsstreitigkeiten über Web-Inhalte auswirken können. Doch in der Regel sind die Artikel des Grundgesetzes zu allgemein, um in einem konkreten Rechtsstreit entscheidende Anwendungsschlagkraft zu besitzen. Vorwürfe gegen Web-Inhalte können sich theoretisch auf den Angriff auf die Menschenwürde (Art.1 GG) oder auf die Behinderung der freien Entfaltung der Persönlichkeit (Art.2 GG) berufen. Doch meistens nur im Zusammenhang mit anderen, konkreteren strafrechtlichen oder zivilrechtlichen Vorwürfen.

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu den relevanten Gesetzestexten:

Online-Seite WWW-Links: Rechtliche Aspekte

Gesetze für "neue Medien" (in Deutschland)

In Deutschland gibt es mittlerweile Gesetze, die im Hinblick auf die neuen Realitäten des Internet geschaffen wurden. Diese Gesetze sollten Sie als Web-Autor kennen:

Informations- und Kommunikationsdienstegesetz (IuKDG)

Dieses Gesetz ist maßgeblich für elektronische Angebote "zur Information oder Kommunikation, soweit nicht die redaktionelle Gestaltung zur Meinungsbildung für die Allgemeinheit im Vordergrund steht (Datendienste, zum Beispiel Verkehrs-, Wetter-, Umwelt- und Börsendaten, Verbreitung von Informationen über Waren und Dienstleistungsangebote)" und für Angebote "von Waren und Dienstleistungen in elektronisch abrufbaren Datenbanken mit interaktivem Zugriff und unmittelbarer Bestellmöglichkeit" (Zitat aus Art.1,§ 2 - Geltungsbereich).
Obwohl durchaus diskutiert wird, ob etwa private Homepages in diesen Geltungsbereich fallen, ist das Gesetz aus derzeitiger Sicht durchaus für Homepage-Betreiber maßgeblich.

Teledienstegesetz (TDG)

Dieses Gesetz ist ein Auszug aus dem IuKDG und enthält den Artikel 1 daraus. Das Gesetz regelt aus inhaltlicher Anbietersicht die beiden folgenden wichtigen Punkte:

  • Verantwortlichkeit (TDG, § 5)
  • Anbieterkennzeichnung (TDG, § 6)

Wichtig ist dabei vor allem Absatz 2 aus § 5. Denn viele Web-Angebote "halten fremde Inhalte zur Benutzung bereit", z.B. wenn Anwender selber Daten beitragen können, etwa bei Gästebüchern, Diskussionsforen usw. Als Anbieter solcher Services sind Sie für Inhalte ab dem Moment verantwortlich, wo Sie Kenntnis von den Inhalten erhalten.

Teledienste-Datenschutzgesetz (TDDSG)

Dieses Gesetz ist ein Auszug aus dem IuKDG und enthält den Artikel 2 daraus. Das Gesetz ist vor allem für Anbieter von Online-Shops wichtig, betrifft aber auch alle Anbieter, die aus anderen Gründen Benutzerdaten sammeln, z.B. um für ein Forum nur registrierte Benutzer zuzulassen. Folgende Punkte sind wichtig:

  • Grundsätze für die Verarbeitung personenbezogener Daten (TDDSG, § 3)
  • Datenschutzrechtliche Pflichten des Diensteanbieters (TDDSG, § 4)
  • Bestandsdaten (TDDSG, § 5)
  • Nutzungs- und Abrechnungsdaten (TDDSG, § 6)
  • Auskunftsrecht des Nutzers (TDDSG, § 7)
  • Datenschutzkontrolle (TDDSG, § 8)

Hervorzuheben ist dabei Absatz 4 des § 3, wo das Prinzip der so genannten "Datensparsamkeit" formuliert wird. Denn nicht wenige Anbieter von ganz normalen HTML-Formularen im Web haben bereits juristischen Ärger bekommen, weil sie mehr Pflichteingabefelder anboten, als es aus Gründen der Datensparsamkeit notwendig wäre. Die genannten Paragraphen enthalten auch verschiedene Regelung für die Speicherung personenbezogener Daten von Anwendern, die beispielsweise bei der Realisierung von CGI- und Datenbankanwendungen im Web zu berücksichtigen sind.

Mediendienstestaatsvertrag (MdStV)

Um einen Staatsvertrag und nicht um ein Bundesgesetz handelt es sich dabei deshalb, weil er die kulturelle Länderhoheit betrifft und deshalb ein von den Ländern einzeln unterzeichnetes Dokument darstellt. Die darin formulierten Paragraphen sind in vielen Fällen ähnlich zu den Paragraphen aus TDG und TDDSG. Der MdStV enthält aber darüber hinaus noch einige weiterreichende Regelungen:

  • Bei der Anbieterkennzeichnung (MdStV, § 6) wird für journalistisch-redaktionell gestaltete Angebote die so genannte Impressumpflicht formuliert.
  • Es wird - im Gegensatz zum TDG - die Verpflichtung zu wahrheitsgemäßen Wiedergabe von Information zur Sorgfaltspflicht bei der Recherche postuliert (MdStV, § 7).
  • Es werden ausdrücklich die strafrechtlichen Folgen im Falle von Volksverhetzung und jugendgefährdenden Inhalten betont (MdStV, § 8).
  • Für Werbung wird festgelegt, dass diese als solche kenntlich gemacht werden muss (MdStV, §9)
  • Das Prinzip der Gegendarstellung wird verlangt (MdStV, § 10). Dies verpflichtet den Anbieter, Widerspruch von Lesern/Anwendern gegen eine Tatsachenbehauptung der eigenen Redaktion zu veröffentlichen.

Interessant ist vor allem, inwiefern der MdStV für Web-Angebote anstelle von TDG und TDDSG relevant werden kann. Die Definitionen zum Geltungsbereich sind leider nicht ganz klar. Stark redaktionell orientierte Web-Angebote, die auch meinungsbildenden Charakter haben (E-Zines, Portale, viel besuchte und führende Angebote zu bestimmten Themen und Fachgebieten), sollten daher auch die erweiterten Bestimmungen des MdStV kennen und berücksichtigen.

Beachten Sie:

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu den relevanten Gesetzestexten:

Online-Seite WWW-Links: Rechtliche Aspekte

Autoren-Aussage zur Linkhaftung

Die wohl prominenteste und für den Fortbestand des Web in der Tat gefährlichste rechtliche Problemzone ist die Frage der Linkhaftung. Obwohl Tim Berners Lee, der Gründervater des WWW, klar und deutlich Stellung dazu bezogen hat, was ein Link ist im Gegensatz etwa zu eingebetteten Fremdinhalten, tut sich die Rechtssprechung noch schwer damit. Immer noch wird vor Gericht die "Zeigerfunktion" eines Verweises mit dem Zueigenmachen fremder Inhalte verwechselt. Deshalb soll auch an dieser Stelle noch mal aus Sicht des Autors von SELFHTML (und damit aus Sicht "technisch informierter Fachkreise") dargestellt werden, was ein Link (Synonym für Verweis) im Web ist.

Erläuterung:

Ein Verweis besteht aus zwei Teilen:

  1. der Erwähnung des anderen Inhalts - sie ist im Verweistext formuliert, und
  2. einer Meta-Information, nämlich zum Fundort des anderen Inhalts im Internet ("URI").

Das gilt sowohl für Verweise innerhalb des eigenen Angebots als auch für Verweise zu fremden Angeboten. Verweise haben immer den gleichen Aufbau.

In Bezug auf fremde Inhalte ist ein Verweis nichts anderes, als wenn ein fremder Inhalt vom Typ "Buch" erwähnt wird, und dabei die Meta-Informationen für Erscheinungsdatum, Verlag und ISBN-Nummer hinzugefügt werden.

Den Zugang zum fremden Inhalt stellt aus technischer Sicht nicht der Anbieter des Verweises her, sondern der Anwender. Und zwar nicht zwangsläufig, sondern willentlich und nur dann, wenn er auf den Verweis klickt und damit die verlinkte Internet-Adresse aufruft. Das ist nichts anderes, wie wenn der Anwender sich entschließt, das erwähnte Buch zu erwerben, dazu Titel, Verlag und ISBN-Nummer auf einem Zettel notiert, sich in eine Buchhandlung oder Bibliothek begibt und das Buch dort erwirbt oder bestellt. Das Anklicken des Verweises führt nur zeitlich schneller zum Ziel, stellt aber qualitativ keinen Unterschied zum Gang in die Buchhandlung oder Bibliothek dar.

Wenn ein Angebot sich durch einen Link auf ein fremdes Angebot tatsächlich den fremden Inhalt zu eigen machen würde, dann hätte dies unter anderem folgende wichtige Konsequenzen:

  • Eine große Suchmaschine, die das Suchen nach beliebigen Begriffen erlaubt und die Suchtreffer in Form von Links zu Fundorten auflistet, würde sich mehr oder weniger das gesamte Web zu eigen machen. Und selbst wenn man Suchmaschinen ausnehmen würde, weil sie weitgehend automatisiert arbeiten, würde die Aussage zumindest auf alle großen redaktionell gepflegten Web-Verzeichnisse zutreffen.
  • Wer einen Link auf ein fremdes Angebot anbietet, das wieder auf ein anderes fremdes Angebot linkt, das wieder auf ein fremdes anderes Angebot linkt, würde sich im Sinne der infiniten teleologischen Reduktion alle weiteren Inhalte zu eigen machen.

Persönliches Fazit:

Die einzig vernünftige Konsequenz für Inhaltsanbieter daraus wäre, keine Links mehr auf fremde Inhalte zu setzen, um die unkontrollierbare Verantwortung, die damit verbunden wäre, zu vermeiden. Vermutlich würden die Anwender dann auf ausländische Angebote ausweichen, deren Anbieter keine Angst beim Setzen von Links auf fremde Inhalte haben müssen. Web-Angebote des eigenen Landes würden dadurch einen gravierenden Wettbewerbsnachteil erleiden und vermutlich reihenweise aufgeben. Der Schaden für die Fortentwicklung neuer Medien im eigenen Land wäre unabsehbar.

nach oben
weiter | Seite Webserver lokal auf einem PC einrichten
zurück | Seite Provider wechseln mit Web-Projekten
Teil von SELFHTML/Navigationshilfen Teil von Web-Projektverwaltung

© 2007 Seite Impressum


SELFHTML: Webserver/CGI

SELFHTML

Webserver/CGI
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Seite World Wide Web (WWW), Seite Basis-Standards im Internet.
Dieses Kapitel enthält Hinweise zu CGI, zum Aufsetzen und zur Pflege eines lokalen Webservers sowie zur Zugriffskontrolle auf angemietete Server im Internet.
Der Abschnitt besteht aus folgenden Unterkapiteln:

Kapitel Webserver
Kapitel CGI

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen zum Thema Web-Server und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zur Serverkonfiguration
Online-Kapitel WWW-Links zu anderen Seiten über Server-Einrichtung

nach oben

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / Webserver

SELFHTML

Webserver
Kapitelseite

Dieses Kapitel enthält wichtige Hinweise zum Aufsetzen und zur Pflege eines lokalen Webservers sowie zur Zugriffskontrolle auf einen angemietete Server im Internet.
Der Abschnitt besteht aus folgenden Seiten:

Seite Webserver lokal auf einem PC einrichten
Seite Apache HTTP-Webserver
Seite SSI (Server Side Includes)
Seite .htaccess - Server-Reaktionen kontrollieren
Seite Umleitungen mit mod_rewrite
Seite Andere Webserver
Seite HTTP-Statuscodes

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen zum Thema Web-Server und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zur Serverkonfiguration
Online-Kapitel WWW-Links zu anderen Seiten über Server-Einrichtung

nach oben

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / Webserver / Webserver lokal auf einem PC einrichten

SELFHTML

Webserver lokal auf einem PC einrichten
Informationsseite

nach unten Der eigene Webserver
nach unten Geeignete Produkte
nach unten Grundeinstellungen für den lokalen Betrieb
nach unten

Der eigene Webserver

Viele PC-Anwender mit Internet-Zugang verbinden mit dem Begriff "Webserver" eine Art Großrechner, auf dem die Daten liegen, die im Internet zu sehen sind. Eigentlich ist ein Webserver jedoch eine gar nicht besonders große Software, die im Prinzip auf jedem Rechner laufen kann, also nicht nur auf Server-Rechnern im Internet, sondern auch auf jedem PC. Es ist nicht einmal eine Internet-Verbindung erforderlich, um einen Webserver zu betreiben. Es müssen lediglich TCP/IP-Sockets unterstützt werden (unter Windows zum Beispiel ist die Datei winsock.dll dafür zuständig). Wenn Ihr Betriebssystem also TCP/IP-Sockets unterstützt, sind bereits alle Voraussetzungen erfüllt, um einen Webserver offline und ohne Verbindungskosten zu betreiben. Browser und Webserver laufen dann auf demselben Rechner, können aber so miteinander kommunizieren, wie es bei Online-Verbindungen ins Internet üblich ist.

Einen eigenen Webserver sollten Sie sich im hier behandelten Zusammenhang installieren, um lokal auf Ihrem PC eine CGI-Schnittstelle zu haben. Denn CGI funktioniert nur, wenn ein Webserver vorhanden ist. Vieles, was im WWW mit CGI möglich ist, können Sie dann auch lokal auf Ihrem PC realisieren. So können Sie eigene CGI-Scripts während der Erstellungsphase in Ruhe und ohne Online-Kosten austesten. Sie können dann genauso arbeiten, wie Sie es von HTML-Dateien oder JavaScripts her gewohnt sind. Außerdem bekommen Sie eher ein Gefühl für die Zusammenarbeit von Browser und Webserver.

Auch wenn Sie selber Provider sind, eine Standverbindung ins Internet haben und einen öffentlichen Webserver betreiben, ist es sinnvoll, auf einem separaten Arbeitsrechner einen lokalen Webserver einzurichten. So belasten Sie den öffentlichen Rechner nicht, während Sie CGI-Scripts erstellen und austesten.

Ein lokal installierter Webserver beeinträchtigt Ihren vorhandenen Internet-Zugang nicht. Er benutzt lediglich das TCP/IP-Protokoll Ihres Rechners (z.B. die winsock.dll). Einstellungen, die für Ihre Online-Verbindung ins Internet wichtig sind, interessieren den Webserver nicht und können unverändert bleiben.

Ein installierter Webserver ist bei bestehender Internet-Verbindung über das Web erreichbar, sofern Sie den PC nicht in einem geschützten lokalen Netz betreiben oder mit zusätzlicher Schutz-Software (Firewall-Software) ausgestattet haben. Denn bei jeder Verbindung ins Internet sind Sie mit einer eindeutigen IP-Adresse angemeldet. Entweder haben Sie von Ihrem Provider eine feste IP-Adresse erhalten, oder die IP-Adresse wird bei der Einwahl ins Internet dynamisch vom Einwahl-Server vergeben. Unter Windows (Windows 9x) können Sie bei bestehender Internet-Verbindung im Windows-Verzeichnis das Programm winipcfg.exe aufrufen, um die eigene IP-Adresse zu sehen, ab Windows 2000 nutzen Sie dazu die cmd.exe (Eingabeaufforderung), und geben dort ipconfig ein, um sich die Windows-IP-Konfiguration anzeigen zu lassen. Angenommen, Sie sind mit der IP-Adresse 145.233.101.211 angemeldet, dann ist Ihr lokales Web bei laufendem Webserver über das Internet unter der Adresse http://145.233.101.211/ erreichbar. Diese Adresse muss ein fremder Benutzer natürlich erst mal kennen. Aber wenn er sie kennt oder herausfindet, kann er auf Ihrem PC in dem Verzeichnisbereich, der durch den Webserver festgelegt ist, "surfen". Das kann Vor- und Nachteile haben. Einerseits können Sie auf diese Weise anderen Personen Ihre Web-Seiten zeigen, ohne diese auf einen öffentlichen Rechner hochladen zu müssen. Andererseits könnte ein ungebetener Besucher versuchen, auf Ihrem PC herumzuspionieren.

Geeignete Produkte

Erfreulicherweise gibt es im Internet verschiedene Webserver zum Downloaden, die Freeware oder Shareware sind, d.h. diese Produkte kosten nichts oder erfordern erst nach einer kostenlosen Testphase eine geringe Registriergebühr. Zum lokalen Einsatz sind solche Produkte völlig ausreichend. Der im Internet am meisten verbreitete Webserver englischsprachige Seite Apache ist auch für typische PC-Betriebssysteme wie Windows verfügbar. Angesichts der Tatsache, dass dieses Produkt längst auf der Mehrzahl der Server im Internet seinen Dienst tut, ist er wohl das empfehlenswerteste Produkt.

Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie eine Produktübersicht mit Links zu den Anbietern:

Online-Seite SELFHTML-Linkverzeichnis: Server-Software

Auf den Anbieterseiten können Sie die Produkte in der Regel downloaden.

Grundeinstellungen für den lokalen Betrieb

Ein Webserver ist kein Programm mit "Arbeitsoberfläche". Durch den Aufruf der ausführbaren Programmdatei starten Sie einfach den Server-Betrieb. Ihr Browser ist dann in der Lage, mit diesem Server auf Ihrem Rechner zu kommunizieren, genau so, wie der Browser mit jedem öffentlichen Webserver kommunizieren kann. Bevor das richtig funktioniert, müssen Sie den Webserver jedoch einrichten, d.h. wichtige Grundeinstellungen vornehmen.

Einige Webserver können Sie nach dem Starten dialoggesteuert einrichten (z.B. OmniHTTPd für Windows oder Quid Pro Quo für Macintosh), bei anderen Produkten richten Sie den Webserver vor dem ersten Starten durch Editieren von Konfigurationsdateien ein (beim Apache ist dies z.B. die Datei httpd.conf im Programmunterverzeichnis conf). Einige Produkte laufen unter Windows in einem DOS-Fenster (z.B. Apache), können auf moderneren Systemumgebungen aber auch als Hintergrunddienste eingerichtet werden. Suchen Sie im Zweifelsfall nach der Installation des Webservers in dessen Programmverzeichnis nach Hilfedateien. Dort sollte dokumentiert sein, wie Sie Ihren Webserver einrichten können. Alle Einstellungen bleiben auf jeden Fall gespeichert. Wenn Ihr Webserver also erst einmal funktioniert, brauchen Sie ihn nur noch durch Starten und Beenden der Programmdatei ein- und auszuschalten. Das können Sie in der Regel auch mit Hilfe einiger bei der Installation erzeugter Einträge im Startmenü erreichen.

Folgende wichtige Daten müssen Sie nach Wunsch bzw. korrekt einstellen:

  • IP-Adresse und Hostnamen des Servers
    Für den lokalen Betrieb müssen Sie hier normalerweise die reservierte IP-Adresse 127.0.0.1 oder den reservierten Hostnamen localhost eintragen. Wenn die Angaben nicht funktionieren, versuchen Sie, in den Hilfedateien Informationen zu finden, oder setzen Sie sich mit dem Produktanbieter des Webservers über dessen Homepage (nach E-Mail-Adresse suchen!) in Verbindung. Wenn die Angaben funktionieren, können Sie im Browser nach Einschalten des Webservers lokal gespeicherte HTML-Dateien über die Internet-Adressen http://127.0.0.1/ oder http://localhost/ aufrufen.
  • Port des Servers
    Dabei ist normalerweise 80 einzutragen. Ports sind Nummern für TCP/IP-Dienste auf dem betreffenden Rechner. Für häufig genutzte Dienste sind so genannte Well Known Ports festgelegt. Das heißt, diese Portnummern werden von Clients wie Browsern oder FTP-Programmen standardmäßig verwendet, sofern nicht explizit anders angegeben. Für den Dienst FTP sind beispielsweise 20 und 21 die üblichen Portnummern, für den HTTP-Dienst ist es 80. Lesen Sie jedoch sicherheitshalber in der Dokumentation des Webservers nach, welche Nummer Sie hier eintragen sollten.
  • HTTP-Wurzelverzeichnis für HTML-Dateien (document root)
    Dabei geben Sie entsprechend der Syntax Ihres Betriebssystems den Pfadnamen an, unterhalb dessen sich Ihre lokalen HTML-Dateien befinden. Wenn Sie Windows benutzen, könnten Sie hier z.B. c:\www\daten eingeben - je nachdem, wohin Sie Ihre lokale HTML-Einstiegsdatei abgelegt haben. Wenn Sie in diesem Verzeichnis beispielsweise eine Datei myhome.htm haben, können Sie diese Datei bei eingeschaltetem Webserver mit Ihrem Browser via HTTP-Protokoll über http://127.0.0.1/myhome.htm bzw. http://localhost/myhome.htm aufrufen.
  • Default-HTML-Dateiname für Verzeichnisse
    Die häufigsten Namen dafür sind index.html oder index.htm. Wenn es eine HTML-Datei mit dem entsprechenden Namen in einem Verzeichnis gibt, genügt als URI beispielsweise http://127.0.0.1/verzeichnis/, wobei dann automatisch http://127.0.0.1/verzeichnis/index.html aufgerufen wird.
  • Physisches und virtuelles Verzeichnis für CGI-Scripts
    Als physisches Verzeichnis geben Sie entsprechend der Syntax Ihres Betriebssystems den Pfadnamen des Verzeichnisses an, in dem Sie ausführbare CGI-Scripts ablegen wollen. Der übliche Verzeichnisname dafür ist cgi-bin. Wenn Sie beispielsweise Windows benutzen, könnten Sie hier z.B. c:\www\cgi-bin eingeben - je nachdem, wohin Sie die CGI-Scripts ablegen wollen. Das betreffende Verzeichnis müssen Sie erstellen. Außerdem müssen Sie bei den meisten Webservern ein virtuelles CGI-Verzeichnis angeben. Tragen Sie dabei am besten /cgi-bin ein. Wenn Sie dann beispielsweise ein Perl-Script namens guestbook.pl im Verzeichnis c:\www\cgi-bin ablegen, können Sie es mit http://127.0.0.1/cgi-bin/guestbook.pl bzw. http://localhost/cgi-bin/guestbook.pl ausführen.
  • Perl-Interpreter und andere Interpreter
    Um Perl-Scripts als CGI-Scripts ausführen zu können, müssen Sie den vollständigen Pfadnamen der ausführbaren Perl-Interpreter-Datei angeben. Unter Windows müssen Sie beispielsweise c:\programme\perl\bin\perl.exe eingeben, je nachdem, wo sich die ausführbare Programmdatei befindet. Dazu müssen Sie Seite Perl bzw. den Perl-Interpreter installieren.
  • Log-Dateien
    Die meisten Webserver führen "Logbücher" über alle HTTP-Zugriffe auf Dateien oder CGI-Programme. Das sind die standardisierten Seite Log-Dateien. Es gibt zwei wichtige Log-Dateien: eine für die Protokollierung der Zugriffe (access.log) und eine für Fehlerprotokollierung (error.log). Tragen Sie am besten diese typischen Namen ein, falls Ihr Webserver keine Standard-Festlegungen dafür aufweist. Diese Dateien können Sie übrigens jederzeit mit einem Dateibetrachter oder Texteditor einsehen, sie zeigen Ihnen wichtige Informationen, wenn es Probleme während des laufenden Serverbetriebs geben sollte.
  • Timeouts
    Es gibt zeitliche Grenzwerte dafür, wie lange der Browser auf eine Antwort vom Server warten soll, und wie lange der Server versuchen soll, Daten an den Browser zu schicken. Die Angaben erfolgen in der Regel in Form von Sekunden. Tragen Sie z.B. für Senden und Empfangen 60 (= eine Minute) ein.
  • MIME-Typen
    Seite MIME-Typen legen in diesem Zusammenhang die Dateiformate fest, die der Webserver kennt und bereit ist, an den aufrufenden Browser zu übertragen. Andere Dateitypen als die hier angegebenen sendet der Server nicht mit dem korrekten MIME-Typ, bzw. mit dem eingestellten Standard-MIME-Typ (text/plain beispielsweise). Normalerweise sind bereits alle wichtigen Dateitypen vorkonfiguriert. Um einen bestimmten Dateityp (z.B. Excel-Dateien) hinzuzufügen, müssen Sie einen MIME-Typ-Namen (z.B application/ms-excel) und eine typische Dateinamenendung (z.B. .xls) angeben. Dann ist der Server bereit, auch solche Dateien mit dem richtigen MIME-Typ an den Browser zu übertragen. Der Browser muss natürlich wissen, was er mit dem betreffenden Dateityp tun soll (siehe hierzu den Abschnitt Seite Verweise auf beliebige Dateien im Internet.

Es gibt weitere Einstellmöglichkeiten. Wenn Sie die oben genannten Einstellungen korrekt vorgenommen haben, sollte Ihr Webserver für den lokalen Betrieb jedoch betriebsbereit sein.

nach oben
weiter | Seite Der Apache HTTP-Webserver
zurück | Seite Rechtliche Aspekte von Web-Projekten
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von Webserver

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / Webserver / Der Apache HTTP-Webserver

SELFHTML

Der Apache HTTP-Webserver
Informationsseite

nach unten Allgemeines
nach unten Die Apache-Module
nach unten Die Konfigurationsdatei httpd.conf
nach unten Weitere Informationen
nach unten

Allgemeines

Der heute (Anfang 2007) weltweit am häufigsten eingesetzte Webserver wurde im April 1995 erstmals in einer Version 0.6.2 publiziert. Er war das Ergebnis der Zusammenarbeit einer kleinen Entwicklergruppe, die sich das Ziel gesetzt hatte, einige bugfixes und Patches für eine bereits im NCSA (National Center for Supercomputing Applications) an der Universität von Illinois eingesetzte Software zusammenzutragen. Dieser ersten Sammlung von Patches verdankt die Software auch ihren Namen: a-patch-e. Die Assoziation, dass der Name des Servers vom Namen eines Indianerstammes abgeleitet sein könnte, wird dabei wohl ins Kalkül gezogen worden sein.

Die in den 90er Jahren des vergangenen Jahrhunderts einsetzende explosionsartige Entwicklung des Internet begünstigte die weitere Arbeit der Entwickler enorm und bot gleichzeitig Voraussetzungen dafür, dass der Bedarf für den Einsatz zuverlässiger Server-Software erheblich anstieg. Dazu kam, dass der Apache von Anfang an eine Open-Source-Entwicklung sein und kostenlos jedem zur Verfügung stehen sollte. Die Entwicklergemeinde vergrößerte sich rasch, sodass es schließlich 1999 zur Gründung der englischsprachige Seite Apache Software Foundation kam. Die Entwicklungsarbeit wird beständig weitergeführt.

Der Apache enstammt der UNIX-Welt, allerdings gibt es längst Portierungen für andere Rechnerarchitekturen und Plattformen, darunter selbstverständlich auch für Windows-Systeme. Da Windows 95, 98 und Me keine Mehrbenutzerbetriebssyteme sind und somit keine unterschiedlichen Rechte für besondere Benutzer kennen, wird von der Apache Software Foundation von einem Einsatz des Apache auf solchen Systemen im öffentlichen Betrieb englischsprachige Seite abgeraten. Müssen Sie für öffentliche Aufgaben ein Windows-System einsetzen, so benutzen Sie eines der etwas moderneren NT-basierten Systeme (Windows NT, 2000, XP oder 2003). Dazu kommt, dass Sie für Windows einen Apache der Version 2 einsetzen sollten, da dieser das entsprechende englischsprachige Seite Multiprozessing-Modul (MPM) nutzt und damit deutlich stabiler, zuverlässiger und schneller läuft als der ältere Apache 1.3.x. Wenn Sie einen Webserver lediglich im privaten Bereich oder auf einem Einzelplatzrechner zum Testen Ihrer Scripts benötigen, können Sie auch eines der älteren Systeme sowie die ältere Apache-Version einsetzen, falls Ihnen nichts anderes zur Verfügung steht.

Beachten Sie:

Wenn Sie versuchen, einen Apache 2.0.x oder 2.2.x auf Windows Vista zu installieren, kann es je nach der bei Ihnen installierten Systemvariante (Home, Basic, Enterprise oder Ultimate) zu unerwarteten Problemen kommen. Versuchen Sie vor der Installation, sich als Administrator anzumelden oder nutzen Sie die Option "als Administrator ausführen", dann sollten sich Probleme wie eine scheinbar nicht vorhandene Konfigurationsdatei oder die Meldung "kann nicht als Dienst eingerichtet werden" vermeiden lassen.

Die Apache-Module

Für jede Plattform lassen sich sowohl bereits vorkompilierte Pakete (für Windows beispielsweise MSI-Installationspakete) wie auch der komplette Sourcecode downloaden, sodass jeder Benutzer selbst entscheiden kann, wie er sich "seinen" Apache kompilieren möchte. Das setzt allerdings bereits etwas Erfahrung im Umgang mit einem C-Compiler und Makefiles voraus. Aber gerade dadurch lassen sich auch nur bedingt Aussagen über eine "Standard"-Installation treffen. Der Server selbst ist in der Regel nur eine relativ kleine ausführbare Datei. Sie kann aber je nach Konfiguration eine Vielzahl von Modulen mit teilweise sehr umfangreichen weiteren Funktionen ansprechen - und es kann auch sein, dass Sie solche Module selbst gleich "fest" mit in die ausführbare Datei einbinden möchten. Dieser modulare Aufbau birgt enorme Vorteile in sich und hat sich möglicherweise nur deshalb durchgesetzt, weil der Apache von Anfang an eben nichts wesentlich anderes als eine Sammlung von Patches rund um eine zentrale ausführbare Datei war.

Das Modul-Konzept war von Anfang an Bestandteil der "Bauweise" des Apache und gilt als eine seiner großen Stärken. Dabei gibt es zur Zeit ein paar kleine Unterschiede der beiden "Zweige": die jüngere Apache-Version 2.x.x nutzt konsequent den Einsatz von englischsprachige Seite Multiprozessing-Modulen (MPM), die speziell dafür entwickelt wurden, dass der Apache Eigenarten der Plattform, auf der er eingesetzt wird, berücksichtigen kann. Gleichzeitig steuern diese MPM eine Reihe deutschsprachige Seite zentraler Anweisungen, die nahezu immer in der Apache-Konfiguration benötigt werden. Die ältere Apache-Version 1.3.x ist noch nicht mit derselben Konsequenz modular aufgebaut. Sie ist heute noch auf sehr vielen Servern im Internet verbreitet, wird aber nach und nach von der jüngeren Version abgelöst werden.

Es gibt unterschiedliche Gruppen von Modulen: Basismodule (oder Kernmodule) und andere Module. Eine andere Gruppeneinteilung kann entsprechend dem Status vorgenommen werden - also entsprechend der Art, wie sie kompiliert werden: Multiprozessing-Module (MPM), Basismodule, Erweiterungsmodule, experimentelle und externe Module. Eine Besonderheit stellen die MPM dar, die es nur für Apache 2.x.x gibt (Apache 1.3.x folgt einem anderen, älteren Modulkonzept). Obwohl in den Sourcen mehrere solcher Module zur Verfügung stehen, wird immer nur genau eines benötigt, das auf die Einsatzplattform zugeschnitten ist. Auf einer Windows-Maschine kann daher immer nur mod_winnt eingesetzt werden. Das hat damit zu tun, dass Windows kein echtes Multiprozess-System ist und für den Apache immer nur zwei Prozesse gestartet werden können - der eigentliche Server-Prozess und ein "Child"-Prozess. Auf einer Linux-Maschine können dagegen unterschiedliche "Child"-Prozesse gleichzeitig nebeneinander laufen.

Zur Laufzeit des Servers stehen die Kernmodule (und die eventuell statisch einkompilierten Module) immer zur Verfügung. Es gibt derzeit nur drei Kernmodule, die aber enorme Bedeutung haben:

  • core (nur Apache 2.x.x) - lässt den Einsatz von Containern in der httpd.conf zu, das Ansprechen von Serververzeichnissen und Dateien, die Festlegung von ServerRoot und DocumentRoot, das Anlegen von Protokolldateien, das Ansprechen eines Ports, Aliasnamen... kurz: die wirklich wichtigen Funktionen, die man als Administrator auch in der httpd.conf festlegen möchte, werden damit überhaupt erst ermöglicht.
  • http_core - ist für KeepAlive zuständig und damit für die Lebensdauer von HTTP-Verbindungen. In Apache 1.3.x für alle core-Anweisungen zuständig.
  • mod_so - erlaubt den Zugriff auf andere Module, die mit der LoadModule-Anweisung als DSO Verwendung finden sollen
  • (+ MP-Modul ab Apache 2.0.x)

Andere Module können entsprechend dem Konzept der "dynamic shared objects" (DSO) mit Hilfe der LoadModule-Anweisung in der httpd.conf dazugeladen werden. Einige dieser Module wird man in fast allen Fällen benutzen wollen, beispielsweise mod_alias, das solche wichtigen Befehle wie ScriptAlias konfiguriert, mod_access, das die Anweisung Order Allow,Deny konfiguriert oder mod_dir, mit dem ein DirectoryIndex erst ermöglicht wird. Wenn Sie wissen möchten, wie Ihr Apache kompiliert wurde, steht Ihnen dazu der Konsolenbefehl apache -l zur Verfügung (je nach installierter Version kann der Befehl auch httpd -l oder apache2 -l lauten). Auf einer Windows-Maschine mit installiertem Apache 2.0.59 oder 2.2.4 ergibt das beispielsweise folgende Anzeige:

 Compiled in modules:
    core.c
    mod_win32.c
    mpm_winnt.c
    http_core.c
    mod_so.c

Abhängig davon, wie der Apache konfiguriert wurde, kann man sich auch mit server-info als Bestandteil der aufgerufenen URL - in der Form http://domain.tld/server-info - wesentlich umfangreichere Informationen anzeigen lassen. Diese Liste enthält auch Angaben über diejenigen Module, die zur Server-Laufzeit mit Hilfe der LoadModule-Anweisung eingebunden werden und ist sehr nützlich, wenn man sich rasch darüber informieren möchte, welche Anweisungen in der httpd.conf überhaupt verwendet werden dürfen.

In der Apache-Online-Dokumentation gibt es eine bereits übersetzte deutschsprachige Seite englischsprachige Seite Auflistung aller möglichen Module. Die Seite mit den Erläuterungen zu deutschsprachige Seite core ist ebenfalls in deutscher Sprache verfügbar und sollte bei auftretenden Fragen oder Unklarheiten immer konsultiert werden.

Beachten Sie:

Gegenüber Apache 2.0.x haben sich bei Apache 2.2.x Namen und Funktionsweisen einiger Module geändert.

Die Konfigurationsdatei httpd.conf

Sobald der Apache startet, fragt er eine zentrale Konfigurationsdatei nach Anweisungen ab, wie er sich verhalten soll. Diese zentrale Konfigurationsdatei trägt in der Regel den Namen httpd.conf. Sie kann aber auch einen anderen Namen tragen, wenn der Webserver mit entsprechenden Anweisungen kompiliert wurde. Einige jüngere Linux-Distributionen verwenden in ihren distributionsspezifischen Paketen beispielsweise Namen wie "apache.conf".

Diese zentrale Konfigurationsdatei ist eine Textdatei, in der eine Reihe von Anweisungen notiert wird, an denen sich der Apache orientiert. Bei jeder Installation wird sie in einer Standard-Form angelegt und enthält zusätzlich zu den Anweisungen auch noch kurze erläuternde Kommentare (von einigen Linux-Distributionen wird die Konfigurationsdatei seit Apache 2.0.50 in mehrere kleinere Dateien aufgesplittet). Im wesentlichen enthält die httpd.conf drei größere Funktionsabschnitte, in denen die unbedingt nötigen Festlegungen stehen.

Global Environment (Globale Umgebung)

Unter "Globale Umgebung" werden die Bedingungen verstanden, unter denen der Apache Webserver arbeiten soll. Zu dieser Arbeitsumgebung gehören:

  • Angaben zum Servertyp
    (wobei für den Einsatz auf einem Windows-Rechner ausschließlich der Typ "standalone" gewählt werden kann)
  • die Definition des Verzeichnisses bzw. Laufwerks auf dem Rechner, in dem sich die Programm-, Konfigurations- und Protokolldateien befinden
  • ein paar Festlegungen für Zugriffszeiten und -zahlen
  • die Liste der zur Laufzeit einzubindenden Module
  • Angabe der IP-Schnittstelle(n) und des/der zugewiesenen Ports (Apache 2.x.x)
    In der Regel Port 80, es kann sinnvoll sein, einen anderen Port für ein lokales Netzwerk zu wählen, um möglichen Konflikten auszuweichen. Dann sollte es einer der nicht für Standards vorgesehenen Ports über 1024 sein.

Bei diesen Definitionen der Arbeitsumgebung gibt es noch nicht allzuviele Variationsmöglichkeiten. Wichtig ist die Liste der Module, die nicht ohne Grund zur globalen Umgebung zählen. Im Standardfall ist die Liste der zuladbaren Module erst einmal weitgehend deaktiviert. Es lohnt sich aber, die Dokumentation zu den Modulen gründlich nachzulesen und dann diejenigen Module zu aktivieren, mit denen man arbeiten möchte. Auch das Einbinden individuell erstellter oder aus dem Internet heruntergeladener weiterer Module ist hier möglich.

"Main" server configuration (Hauptserver-Konfiguration)

Nachdem die Arbeitsumgebung definiert worden ist, folgen als nächstes die Anweisungen zur Arbeitsweise. Arbeitsweise bedeutet dabei im wesentlichen:

  • Festlegung des vom Server beanspruchten Ports (Apache 1.3.x)
  • Servername und Administrator-Adresse
  • Pfadangaben zu Dokument-, Benutzer- und Scriptverzeichnissen
  • Formatierung der Protokolldateien
  • Aufgabenzuweisung an die geladenen Module

Während die Festlegung des Ports, die Namensgebung (ein Servername wird zwingend verlangt, sonst startet Apache nicht) sowie die Bestimmung der Pfade von Server-Verzeichnissen und die Inhaltsvorgabe für die Protokolldateien (Logs) in der Regel keine Probleme darstellen, liegt die Hauptarbeit eines Administrators wahrscheinlich darin, den Modulen die gewünschten Aufgaben zur Erledigung zuzuweisen. Ob diese Zuweisungen von Apache befolgt werden können, ist davon abhängig, ob das entsprechende Modul überhaupt geladen ist.

Virtual Hosts (virtuelle Hosts)

Der Begriff virtueller Host wurde eingeführt, um das Konzept zu kennzeichnen, mit dem auf ein und derselben Maschine mehrere unterschiedliche Webangebote verfügbar gemacht werden können. Der Apache gilt als einer der ersten Server überhaupt, die IP-basierte virtuelle Hosts direkt unterstützt haben (seit Version 1.1).

Es gibt grundsätzlich zwei Methoden, virtuelle Hosts einzurichten:
- namensgestützte virtuelle Hosts
- IP-gestützte virtuelle Hosts

IP-Adressen werden benötigt, damit die Datenpakete des Übertragungsprotokolls (TCP/IP) tatsächlich nur von dem Rechner (bzw. der Netzwerk-Schnittstelle) angenommen werden, dem eine solche individuelle Adresse zugeordnet ist. Dazu müssen Domainname und IP-Adresse der Registrierung entsprechen, die in einer Datenbank archiviert ist. Diese Aufgabe fällt dem Domain Name Service (DNS) zu. Nur wenn auf einem Rechner IP-Adresse und Domainname mit diesen DNS-Daten übereinstimmen, kann der Rechner, der über die gesuchte IP-Adresse und den Domainnamen verfügt, die Datenpakete auch erhalten und weiterbearbeiten.
Namensgestützte virtuelle Hosts machen es möglich, mehrere unterschiedliche Domainnamen einer einzelnen IP-Adresse zuzuordnen. Der Webserver wird damit in die Lage versetzt, die Verwaltung der Domains auch auf unterschiedliche Art zu realisieren - beispielsweise könnte eine Domain für CGI-Scripts eingerichtet werden, eine andere dagegen keine solchen Scripts zulassen. Das Konzept für namensbasierte virtuelle Hosts ist relativ einfach und wird auch am häufigsten genutzt.
IP-gestützte virtuelle Hosts erhalten unterschiedliche IP-Adressen. Die Zahl der verfügbaren IP-Adressen ist jedoch eng begrenzt, da den Netzwerk-Schnittstellen einer (physischen) Maschine ja immer nur eine individuelle IP-Adresse zugeordnet werden kann. Werden mehrere IP-Adressen benötigt, kann das mit einer Methode, die IP-Aliasing genannt wird, erreicht werden. Solche IP-Aliase können nun einer Domain zugewiesen werden, zusätzlich aber auch für weitere namensgestützte virtuelle Hosts Verwendung finden.

Beachten Sie:

Ab Apache 2.2.2 wird von der Apache Software Foundation empfohlen, nicht mehr eine einzelne Konfigurationsdatei einzusetzen, sondern sie in mehrere kleinere Teile aufzutrennen. Eine Praxis, die bei Linux-Distributionen schon seit Apache 2.0.50 auf unterschiedliche Weise verfolgt wurde. Auf einem Windows-System finden Sie bei einer Standardinstallation jetzt ebenfalls mehrere Unterverzeichnisse im /conf-Verzeichnis, beispielsweise default und extra.

Die Container mit den einzelnen Anweisungen

Wenn man das erstemal einen Blick in die httpd.conf wagt, ist es durchaus möglich, dass ihr grundsätzlicher Aufbau an ein HTML-Dokument erinnert. Sie enthält eine Reihe von Eintragungen, die von den gewohnten < spitzen Klammern > umschlossen werden und wie "Tags" wirken. Selbstverständlich sind sie das nicht. Sondern es handelt sich um so genannte Container, in denen jeweils ganz bestimmte Anweisungen zusammengefasst werden.

Folgende Container sind derzeit möglich: <Directory>, <DirectoryMatch>, <Files>, <FilesMatch>, <IfDefine>, <IfModule>, <Location>, <LocationMatch>, <Proxy>, <ProxyMatch> und <VirtualHost>. Man kann sie nach zwei Gruppen ordnen: <IfDefine> und <IfModule> werden ausgewertet, sobald der Server selbst startet und müssen nicht bei Anfragen berücksichtigt werden. Darin enthaltene Anweisungen werden nur wirksam, wenn eine Bedingung zutrifft. Die anderen Container enthalten Anweisungen, mit denen Verzeichnisse angesprochen werden können und die das Verhalten bei Zugriffen auf bereitgestellten Webspace bestimmen. Sie werden bei Anfragen ausgewertet.

<IfDefine> und <IfModule>

<IfDefine> reagiert auf Parameter, die bei Serverstart in der Befehlszeile eingegeben werden (können). Dabei gibt es zwei unterschiedliche Reaktionsweisen: es kann festgelegt werden, ob eine Bedingung zutrifft oder ob sie nicht zutrifft, abhängig davon werden die im Container enthaltenen Anweisungen ausgeführt - oder eben nicht ausgeführt. Die Startparameter selbst kann man auch in einem Startscript vorgeben. Im Standardfall wird <IfDefine> nicht benötigt und ist auch nicht in einer Standard-httpd.conf enthalten.
<IfModule> werden Sie dagegen häufiger nutzen wollen, da mindestens die Festlegung für eines der Multi-Prozessing-Module (für Apache 2.x.x) benötigt wird sowie nahezu immer auch weitere Module angesprochen werden sollen. Die Module selbst stellen erst die benötigten Anweisungen bereit, es ist sicherer, modul-spezifische Anweisungen innerhalb eines <IfModule>-Containers zu notieren, da der Apache auf diese Anweisungen nur dann zugreift, wenn das entsprechende Modul tatsächlich geladen ist.

<Directory> und <DirectoryMatch>

<Directory> wird eingesetzt, um Anweisungen zusammenzufassen, die nur für das genannte Verzeichnis und dessen Unterverzeichnisse gelten. Die Verzeichnisnamen werden unmittelbar im Container notiert. "Verzeichnisname" ist dabei entweder der vollständige Pfad zu einem Verzeichnis oder eine Zeichenkette mit Platzhaltern. In einer Zeichenkette mit Platzhaltern entspricht ? einem einzelnen Zeichen und * einer Zeichenkette beliebiger Länge.<Directory>-Container sind so gut wie immer in einer httpd.conf enthalten.
<DirectoryMatch> erfüllt dieselben Aufgaben wie <Directory>, mit dem Unterschied, dass als "Verzeichnisname" hier ein Regulärer Ausdruck Verwendung findet und kein Verzeichnisname.

<Files> und <FilesMatch>

Der Container <Files> enthält Anweisungen, die nur für ganz bestimmte Dateien gültig werden sollen. Dieser Container wird beispielsweise benutzt, um Seite .htaccess-Dateien vor unbefugten Zugriffen zu verbergen. Das Pendant <FilesMatch> erfüllt dieselbe Aufgabe, wiederum mit dem Unterschied, dass anstelle eines bestimmten Dateinamens ein Regulärer Ausdruck eingegeben werden kann, womit beispielsweise mehrere Dateinamen - eventuell Grafikformate - auf identische Weise behandelt werden können.

<Location> und <LocationMatch>

Der Container <Location> gilt für URLs. Das ist bisweilen nicht leicht verständlich, da ja der Apache in der Regel auf Anfragen reagiert, die ein Client (ein Browser) mit der Angabe einer URL an ihn schickt. Es wird jedoch klar, wenn man sich vor Augen hält, dass <Directory> und <Files> für Dateien gelten, die innerhalb von Serververzeichnissen liegen, <Location> dagegen Informationen abruft, die nicht zum Serverdateisystem gehören (müssen). Verdeutlichen kann man sich diesen Unterschied anhand der vorformulierten <Location>-Container für server-info und server-status. Auch hier gilt wieder, dass das Pendant <LocationMatch> eingesetzt wird, wenn Reguläre Ausdrücke eingesetzt werden sollen.

<Proxy> und <ProxyMatch>

Ein <Proxy>-Container kann nur eingesetzt werden, wenn zuvor das entsprechende Modul mod_proxy geladen wurde. Es gibt noch weitere Module für den Umgang mit Proxy-Inhalten, beispielsweise mod_proxy_ftp, mit dem der Apache in die Lage versetzt werden kann, FTP-Inhalte auszuliefern - sofern sie denn im Proxy-Cache gespeichert sind. Gelegentlich wird darauf hingewiesen, dass <Proxy> nicht genutzt werden sollte, wenn gleichzeitig SSL aktiviert ist. Auch hier findet das Pendant <ProxyMatch> dann Verwendung, wenn Reguläre Ausdrücke genutzt werden sollen.

<VirtualHost>

Dies ist der vielleicht am besten bekannte Container. Innerhalb von <VirtualHost>-Containern kann nahezu alles andere ebenfalls enthalten sein, was im Hauptabschnitt der httpd.conf (main server configuration) Verwendung finden darf.

Beachten Sie:

Umfangreichere Informationen über die Container sind in der englischsprachige Seite Apache-Dokumentation zu finden.

Die Standard-Datei, die Sie während der Installation des Apache erhalten, sollten Sie unbedingt bearbeiten, da eine Reihe von Einstellungen, auf die Sie vielleicht Wert legen (z.B. die Erlaubnis zum Ausführen von Scripts), erst aktiviert werden muss. Sie haben weitgehende Freiheiten, aus der httpd.conf eventuell kleinere Dateien auszugliedern, die Sie dann mit Include in die httpd.conf wieder einbinden. Wenn Sie beispielsweise viele virtuelle Hosts zu betreuen haben, werden Sie mindestens dafür eine gesonderte Datei anlegen wollen - einfach deshalb, weil Sie damit einen besseren Überblick haben.

Aus Gründen des Überblicks sollten Sie grundsätzlich, noch bevor Sie irgendwelche Anpassungen vornehmen, eine Kopie Ihrer httpd.conf unter anderem Dateinamen und möglichst auch an einer anderen Stelle auf Ihrem Rechner abspeichern. Geht dann irgendetwas schief, können Sie sie zurückkopieren und haben wenigstens den Ausgangszustand wiederhergestellt. Haben Sie eine solche Kopie abgelegt, sollten Sie aus der httpd.conf alle Kommentare entfernen (da Sie sie ja bei Bedarf in Ihrer Kopie immer noch nachlesen können) sowie die Anweisungen streichen, bei denen Sie sicher sind, dass Sie sie nicht brauchen werden. Sie werden sehen, dass dann Ihre resultierende httpd.conf bereits eine relativ "handliche" Größe aufweist. Bei allen Fragen, die sich Ihnen dann eventuell stellen, lesen Sie bitte in der Apache-Dokumentation nach, die Sie auch auf Ihrem Rechner vorfinden.

Weitere Informationen

Die englischsprachige Seite Apache Software Foundation pflegt eine umfangreiche Dokumentation, auf die Sie sicher zurückgreifen wollen, wenn Ihnen irgendetwas bei der Administration Ihres Apache nicht klar ist. Da sich die beiden Apache-Versionen (1.3.x und 2.x.x) in manchen Bereichen unterscheiden, ist auch die Dokumentation für beide "Zweige" getrennt verfügbar. Die englischsprachige Seite Apache-1.3.x-Dokumentation gibt es nur in englischer Sprache. An der deutlich umfangreicheren englischsprachige Seite deutschsprachige Seite Apache-2.0.x-Dokumentation arbeitet eine Gruppe von Übersetzern, um sie in mehreren Sprachen anbieten zu können. Viele Teile sind bereits in deutscher Sprache nachlesbar. Dasselbe gilt für die englischsprachige Seite deutschsprachige Seite Apache-2.2.x-Dokumentation

Beachten Sie:

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen zum Thema Webserver und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Artikel zur Serverkonfiguration

nach oben
weiter | Seite SSI - Server Side Includes
zurück | Seite Webserver lokal auf einem PC einrichten
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von Webserver

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / Webserver / Server Side Includes in HTML

SELFHTML

SSI - Server Side Includes
Informationsseite

nach unten Allgemeines zu Server Side Includes
nach unten Übersicht bekannter Server Side Includes
nach unten Arbeiten mit Variablen
nach unten

Allgemeines zu Server Side Includes

Mit Hilfe von Server Side Includes (auch unter der Abkürzung SSI bekannt) können Sie direkt innerhalb von HTML-Dateien dynamische Informationen, z.B. Datum und Uhrzeit, einbinden. Sie können auch CGI-Programme starten und deren Ausgaben, beispielsweise einen Zählerstand mit der Anzahl von Zugriffen auf die aktuelle Datei, in die HTML-Datei einbinden. Oder Sie geben den aktuellen Inhalt diverser Seite CGI-Umgebungsvariablen direkt in HTML aus - ohne Umweg über ein separates CGI-Script. Server Side Includes sind generell dazu gedacht, kleinere Teile einer HTML-Seite dynamisch einzubinden.

Server Side Includes werden nur ausgeführt, wenn der Web-Browser die HTML-Datei über einen installierten Webserver aufruft, also mit einem URI vom Typ http://.... Voraussetzung ist ferner, dass der installierte Webserver die Server Side Includes unterstützt. Nicht alle Webserver tun das, andere interpretieren nur einen Teil der möglichen Angaben. Wenn der Server keine Server Side Includes kennt, funktionieren die entsprechenden Anweisungen in der HTML-Datei nicht. Beim Austesten mit einem lokal installierten Webserver lesen Sie hierzu bitte in der Dokumentation des Servers nach. Beim Einsatz auf einem öffentlichen Webserver fragen Sie Ihren Provider, ob dessen Webserver die Server Side Includes unterstützt.

Damit ein Webserver sofort erkennt, ob eine HTML-Datei SSI-Anweisungen enthält, ist es üblich, solche HTML-Dateien mit einer speziellen Dateinamenendung zu kennzeichnen. Gewöhnlich lauten die Dateiendungen .shtml, .shtm oder .sht. Die meisten Server ignorieren SSI-Anweisungen, wenn diese in einer gewöhnlichen HTML-Datei mit der Endung .htm oder .html stehen!

Beispiel: Datei test1.shtml

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Zum Aufruf der Seite ist eine Internet-Verbindung erforderlich)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dynamisches HTML mit Server Side Includes</title>
</head>
<body>
<h1>Dynamisches HTML mit Server Side Includes</h1>
Datum/Uhrzeit auf dem Server-Rechner:  <!--#config timefmt="%d.%m.%Y, %H.%M" -->
<!--#echo var="DATE_LOCAL" --> Uhr<br>
Name dieser HTML-Datei: <!--#echo var="DOCUMENT_NAME" --><br>
Installierte Server-Software: <!--#echo var="SERVER_SOFTWARE" --><br>
Ihr Web-Browser: <!--#echo var="HTTP_USER_AGENT" -->
<h3>Weitere Informationen:</h3>
<!--#exec cgi="/cgi-bin/plapper.pl" -->
</body>
</html>

Beispiel: Datei plapper.pl

#!/usr/bin/perl -w

print "Content-type: text/html\n\n";
print "<p>Aha, Sie haben das Script \"plapper.pl\" zusätzlich aufgerufen.<br>\n";
print "Das ist nett von Ihnen, aber es plappert gar nicht sehr viel.</p>\n";

Erläuterung:

Server Side Includes müssen Sie in einer HTML-Datei innerhalb eines Seite Kommentars notieren. Es gibt verschiedene Server Side Include Anweisungen, beginnend mit einem Gatterzeichen #. Im obigen Beispiel kommen die Anweisungen #echo und #exec vor. Hinter der Anweisung folgt in der Regel eine Angabe der Art Typ="Wert". Im Zusammenhang mit der Anweisung #echo ist beispielsweise die Angabe var="Variablenname" erlaubt, wobei "Variablenname" ein bestimmter, erlaubter Name sein muss. Es kann sich um Namen von CGI-Umgebungsvariablen handeln oder um spezielle Server Side Include Variablennamen (siehe nach unten Übersicht bekannter Server Side Includes weiter unten). Bei der Anweisung #exec, die ein Programm auf dem Server-Rechner ausführt, müssen Sie den Typ des Programms (im obigen Beispiel: cgi) und als Wert die Adresse des ausführbaren Programms (im obigen Beispiel: "/cgi-bin/plapper.pl") angeben.

Übersicht bekannter Server Side Includes

Die Tabelle ist nach Anweisungen alphabetisch sortiert.

Anweisung Parameter/Wert Beispiele
#config

errmsg="[Fehlermeldung]"
sizefmt="[Wert]"
timefmt="[Wert]"

errmsg ist sinnvoll, um bei nicht anzeigbaren Server Side Includes eine verständliche Fehlermeldung auszugeben.

sizefmt bestimmt das Format für Dateigrößenangaben, z.B. sinnvoll vor dem Gebrauch von #fsize.

Erlaubte Werte:
"abbrev" (Dateigrößenangaben erfolgen in Kbyte).
"bytes" (Dateigrößenangaben erfolgen in Byte).

timefmt bestimmt das Ausgabeformat für Datum/Uhrzeit, z.B. sinnvoll vor dem Gebrauch von #echo var="LOCAL_TIME".
Erlaubte Platzhalter:
%a = Wochentag kurz, z.B. sat
%A = Wochentag lang, z.B. Saturday
%b = Monat kurz, z.B. Apr
%B = Monat lang, z.B. April
%d = Tag im Monat 2stellig, z.B. 09
%e = Tag im Monat, z.B. 9
%H = Uhrzeit 24stündig, z.B. 15
%I = Uhrzeit 12stündig, z.B. 03
%j = julianisches Datum, z.B. 278
%m = Monat als Zahl, z.B. 05
%M = Minuten nach Stunde, z.B. 07
%p = bei%I: AM/PM, z.B. PM
%S = Sekunden, z.B. 01
%U = Kalenderwoche, z.B. 52
%w = n-ter Tag der Woche, z.B. 5
%y = Jahr 2stellig, z.B. 97
%Y = Jahr 4stellig, z.B. 1997
%Z = Zeitzone, z.B. MEZ

 <!--#config errmsg="SSI nicht anzeigbar!" -->
<!--#config sizefmt="bytes" -->
<!--#config timefmt="%d.%m.%Y, %H.%M" -->
#echo

var="[Variablenname]"

Bei [Variablenname] sind Seite CGI-Umgebungsvariablen erlaubt oder die folgenden speziellen Variablennamen:
DOCUMENT_NAME = Name der HTML-Datei
DOCUMENT_URI = Pfad der HTML-Datei
LAST_MODIFIED = Zeitstempel der HTML-Datei
QUERY_STRING_UNESCAPED = Unkodierter GET-Übergabestring
DATE_LOCAL = Datum/Uhrzeit nach Server
DATE_GMT (Datum/Uhrzeit nach Greenwich-Zeit
Außerdem können Sie nach unten selbst definierte Variablen einsetzen.

<!--#echo var="SERVER_NAME" -->
<!--#echo var="DATE_LOCAL" -->
#exec

cmd="[Pfad/Programmdatei]"
cgi="[CGI-Pfad/CGI-Programm/Script]"

Benutzen Sie cmd, um ein beliebiges Programm auf dem Server-Rechner zu starten.
Benutzen Sie cgi, um ein CGI-Programm/CGI-Script auf dem Server-Rechner auszuführen.
Es sollte sich um Programme handeln, die Daten auf die Standardausgabe schreiben. Diese Datenausgaben werden dann direkt in die HTML-Datei geschrieben.

 <!--#exec cmd="/prog/search.exe *.htm" -->
<!--#exec cgi="/cgi-bin/counter.pl" -->
#fsize

file="[Pfad/Datei]"
virtual="[Pfad/Datei]"

Gibt die Größe der angegebenen Datei aus.

Verwenden Sie file für Pfadangaben auf dem Server-Rechner relativ zur Datei mit SSI-Anweisungen und virtual für relative Pfadangaben bezogen auf das Wurzelverzeichnis für Dokumente des Webservers.

 <!--#fsize virtual="/download/selfhtml.zip" -->
#flastmod

file="[Pfad/Datei]"
virtual="[Pfad/Datei]"

Gibt den Zeitstempel der angegebenen Datei aus.

Verwenden Sie file für Pfadangaben auf dem Server-Rechner relativ zur Datei mit SSI-Anweisungen und virtual für relative Pfadangaben bezogen auf das Wurzelverzeichnis für Dokumente des Webservers.

 <!--#flastmod file="index.htm" -->
#include

file="[Pfad/Datei]"
virtual="[Pfad/Datei]"

Gibt den Inhalt der angegebenen Datei aus.

Verwenden Sie file für absolute Pfadangaben auf dem Server-Rechner und virtual für relative Pfadangaben bezogen auf das Wurzelverzeichnis für Dokumente des Webservers. In Falle von file können Sie nur Dateien angeben, die im selben Verzeichnis oder in Unterverzeichnissen liegen. Bei virtual gibt es diese Begrenzung nicht, da die Angabe auf eine beliebige (zugängliche) Adresse auf dem Server hinweisen kann.

 <!--#include virtual="/news/news.htm" -->

Beachten Sie:

Findet der Webserver eine SSI-Anweisung, die er ausführen kann, so wird anstelle dieser Anweisung der angeforderte Code in das HTML-Dokument eingebunden. Wenn Sie nun mit
<!--#include file="datei.htm" -->
ein vollständiges HTML-Dokument einbinden, kann es Ihnen passieren, dass die "resultierende" Webseite plötzlich z.B. über mehrere Kopf-Bereiche verfügt und nicht mehr valides HTML ist. Verschiedene Browser können dadurch Anzeigeprobleme bekommen. Sie können das vermeiden, indem Sie in Ihrem *.shtml-Dokument lediglich den Code notieren, der letztlich im head- oder im body-Element eingefügt werden soll. Solche Dateien mit HTML-Schnipseln bekommen üblicherweise die Dateinamenserweiterung inc (für include), also beispielsweise dateiname.inc. Solche inc-Dateien sollten reine Textdateien sein und dürfen beliebigen HTML-Code enthalten - je nachdem, an welcher Stelle einer HTML-Datei Sie den Codeschnipsel einbinden möchten. Wenn Sie beispielsweise die Include-Anweisung <!--#include virtual="/includes/navigation.inc" --> im body-Element, also zwischen <body> und </body> notieren, kann navigation.inc denjenigen HTML-Code enthalten, der als body-Inhalt erlaubt ist. Wenn Sie in dieser Datei wieder SSI-Anweisungen unterbringen wollen, müssen Sie allerdings die Dateiendung .shtml verwenden.

Sie können beliebig viele SSI-Anweisungen in einer *.shtml-Datei notieren. Der Webserver setzt aus den angeforderten Daten ein neues HTML-Dokument zusammen und der Benutzer, der Ihr *.shtml-Dokument in seinem Browser aufruft, erfährt nichts davon, wie es zusammengesetzt wurde. Gehen Sie daher mit der Include-Anweisung sorgsam um. Wenn Sie sehr viele HTML-Codeschnipsel auf diese Weise einbinden, wird das resultierende HTML-Dokument unter Umständen sehr groß.

Arbeiten mit Variablen

Mit SSI können Sie noch wesentlich mehr anstellen als oben beschrieben. Sie haben an der Bezeichnung var nach oben weiter oben bereits ablesen können, dass Sie Variablen verwenden dürfen. Selbstverständlich können Sie anstelle von festgelegten Umgebungsvariablen wie SERVER_NAME oder DATE_LOCAL auch eigene Variablen definieren. Das Apache-Modul mod_include, das die Ausführung von SSI überhaupt erst ermöglicht, stellt dafür so etwas wie eine englischsprachige Seite winzige Programmiersprache zur Verfügung. So können Sie beispielsweise mit
<!--#set var="name" value="Wert" -->
einer Variablen einen beliebigen Namen geben und ihr einen beliebigen Wert zuweisen. Es ist ebenfalls möglich, mit einfachen if/else-Festlegungen Bedingungen zu formulieren, die für das Ausführen bestimmter Server Side Includes zutreffen sollen.

Beispiel: Datei test2.shtml

Beispiel-Seite Anzeigebeispiel 1: So sieht's aus (ohne Übergabeparameter) (Zum Aufruf der Seite ist eine Internet-Verbindung erforderlich)
Beispiel-Seite Anzeigebeispiel 2: So sieht's aus (mit Übergabeparameter) (Zum Aufruf der Seite ist eine Internet-Verbindung erforderlich)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dynamisches HTML mit Server Side Includes</title>
</head>
<body>
<h1>Dynamisches HTML mit Server Side Includes</h1>
<p>Diese Seite hat keine festgelegten Inhalte, sondern wird vom Server zusammengesetzt.<p>
<!--#if expr="$QUERY_STRING = /test/" -->
<!--#set var="param" value="Sie haben die Seite mit dem test-Parameter aufgerufen" -->
<!--#echo var="param" -->
<!--#else -->
<!--#include virtual="test.inc" -->
<!--#endif -->
</body>
</html>

Beispiel: Datei test.inc

<p>Auf einer Meierei,<br>
da lebte einst ein braves Huhn,<br>
das legte, wie die Hühner tun,<br>
an jedem Tag ein Ei.<br>
Und kakelte, mirakelte, spektakelte,<br>
als obs ein Wunder sei.</p>

Erläuterung:

Die Beispieldatei test2.shtml enthält insgesamt sechs Zeilen mit SSI-Anweisungen.
In der ersten Anweisung fragen Sie ab, ob der aufgerufenen URL ein Parameter in der Form ?test mitgegeben wurde. Den Namen dieses Parameters müssen Sie innerhalb der SSI-Anweisung selbst in Slashes (Schrägstriche) einfassen, was ungefähr dem entspricht, was Sie von Perl als Seite regulären Ausdruck kennen.
Trifft dies zu, werden die anderen Anweisungen bis <!--#else --> befolgt. Das bedeutet: in der zweiten Anweisung wird der Variablenname param festgelegt, die Variable erhält gleichzeitig einen String (den Satz:"Sie haben die Seite mit dem test-Parameter aufgerufen") als Wert zugewiesen und in der dritten Anweisung geben Sie mit echo (auch wieder ähnlich dem Perl-Befehl) den Wert der Variablen param am Bildschirm aus.
Trifft dies nicht zu (haben Sie also keinen Parameter an die URL angehängt), so werden die zweite und dritte Anweisung ignoriert.
Die vierte Anweisung legt fest, dass es eine Alternative geben soll, falls Sie die URL nicht mit einem zusätzlichen Parameter aufgerufen haben.
Die fünfte Anweisung veranlasst den Webserver, an dieser Stelle den gesamten Inhalt der Datei test.inc einzubinden, falls nicht zuvor in den "if"-Zweig gewechselt worden war.
Mit der letzten Zeile wird die if/else-Bedingung beendet. Eine solche abschließende Zeile müssen Sie immer angeben, wenn Sie mit solchen bedingten Anweisungen arbeiten möchten.

Mit dem Einsatz von if/else-Bedingungen und Variablen in SSI-Anweisungen können Sie die Erscheinungsweise Ihrer Webseite auf vielfältige Weise variieren. Beispielsweise können Sie von Übergabe-Parametern abhängig machen, ob bestimmte Links angezeigt oder ganze Textblöcke überhaupt in die Seite aufgenommen werden sollen. Sie können mehrere Parameter miteinander kombinieren und sich damit ein dynamisches Navigationsmenü zusammenstellen. Sie können den anzuzeigenden Inhalt komplett austauschen lassen usw.

Server Side Includes stellen keine Alternative zu dem dar, was Scriptsprachen wie Perl oder PHP an Möglichkeiten anbieten. Mit SSI können Sie bestehende Dateien nicht verändern, Sie können nichts speichern, nur in geringem Umfang Formulardaten berücksichtigen, keine Berechnungen ausführen lassen und vieles weitere. Aber für die "dynamische" Zusammenstellung von Seiteninhalten bieten SSI einige großartige Perspektiven an, und Sie müssen sich nicht erst mit den oftmals komplexen Programmiertechniken der "großen" Scriptsprachen befassen.

nach oben
weiter | Seite .htaccess - Server-Reaktionen kontrollieren
zurück | Seite Der Apache HTTP-Webserver
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von Webserver

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / Webserver / .htaccess - Server-Reaktionen kontrollieren

SELFHTML

.htaccess - Server-Reaktionen kontrollieren
Informationsseite

nach unten Allgemeines zu .htaccess-Dateien
nach unten Erlaubte Anweisungen in .htaccess-Dateien
nach unten Verzeichnisse und Dateien mit Passwort schützen
nach unten IP-Adressen, IP-Bereiche oder Namensadressen zulassen/ausschließen
nach unten Verzeichnis-Optionen einstellen
nach unten Individuelle Fehlermeldungen gestalten
nach unten Verzeichnis-Browsing einstellen
nach unten Alternative Inhalte senden
nach unten

Allgemeines zu .htaccess-Dateien

Webserver, die zum NCSA-Server kompatibel sind, kennen das Konzept der .htaccess-Dateien. Heute trifft das vor allem auf den immer dominanter werdenden und die Defacto-Standards im Web setzenden Webserver Apache zu. Wenn auf Ihrem Server-Rechner also ein Seite Apache Webserver läuft, dann können Sie die Technik der .htaccess-Dateien einsetzen. Aber auch für andere Webserver gibt es vergleichbare Konzepte, um beispielsweise einen Zugriffsschutz zu realisieren. Falls Sie nicht wissen, welche Webserver-Software auf dem Rechner läuft, auf dem Sie Ihr Web-Projekt hosten, fragen Sie bitte Ihren Provider oder Webmaster.

.htaccess-Dateien sind Server-Konfigurationsdateien für Verzeichnisse, die zu Ihrem Web-Angebot gehören. So ist die .htaccess-Technik beispielsweise der übliche Weg, um nur bestimmten Benutzern den Zugriff auf bestimmte Daten zu erlauben. .htaccess ist also die Antwort auf die immer wieder gestellte Frage nach einem "richtigen" Passwortschutz. Doch mit .htaccess-Dateien können Sie noch viel mehr anstellen als Daten mit Passwörtern zu schützen. So können Sie auch ganze Benutzerkreise automatisch (ohne Passwortzugang) aussperren oder alle bis auf bestimmte nach unten aussperren. Sie können Optionen zum so genannten nach unten Verzeichnis-Browsing (Web-Browser ruft ein Verzeichnis auf, in dem keine Default-Datei wie z.B. index.htm liegt) einstellen. Sie können automatische Seite Weiterleitungen einstellen oder eigene Regelungen für den Fall von nach unten HTTP-Fehlermeldungen schaffen. Sie können sogar abhängig von bestimmten Bedingungen nach unten alternative Inhalte anbieten, beispielsweise Webseiten mit unterschiedlichen Landessprachen abhängig von der Sprache des benutzten Web-Browsers - ohne CGI, ohne JavaScript. Und schließlich können Sie sogar einstellen, ob Daten komprimiert an den aufrufenden Browser übertragen werden können oder ob bei Aufrufen einzelner zu Ihrem Projekt gehörender Adressen auf eine andere URL Seite umgeleitet werden soll.

Dateien mit dem Namen .htaccess (das erste Zeichen ist ein Punkt) sind Bestandteile der Konfiguration des Webservers. Die Arbeitsweise des Webservers wird mit Hilfe einer (oder mehrerer) zentraler Konfigurationsdatei(en) definiert - die Seite httpd.conf. Doch diese liegt bzw. liegen normalerweise innerhalb des Programmverzeichnisses des Webservers selbst, worauf Benutzer, die ein Web-Projekt verwalten, in aller Regel keinen Zugriff erhalten. Der Server-Administrator legt in dieser zentralen Konfiguration fest, welche Berechtigungen er welchen Benutzern oder auch welchen Webangeboten (virtuellen Hosts) zugestehen möchte. Nur dann, wenn ein Benutzer das Recht erhalten soll, die Vorgaben aus der zentralen Konfiguration zu überschreiben und individuell neu festzulegen, wird ihm die Nutzung von .htaccess-Dateien erlaubt. .htaccess-Dateien kann er dann in dem Verzeichnisbereich anlegen und bearbeiten, in dem sein Web-Angebot liegt. Dort, wo Sie Ihre HTML-Dateien, Grafikdateien usw. betreuen, können Sie also auch .htaccess-Dateien ablegen, falls Ihr Provider Ihnen diese Möglichkeit einräumt. Der Einsatz von .htaccess in Apache bedeutet, dass der Webserver bei jedem einzelnen Seitenzugriff vom angeforderten Dokument aus rekursiv sämtliche Verzeichnisse überprüfen muss, ob irgendwo eine solche Datei liegt. Und diese Information darf er nicht zwischenspeichern - denn die von .htaccess-Dateien konfigurierten Servereinstellungen sollen unmittelbar in demselben Moment gültig sein, in dem die .htaccess-Datei existiert, ohne Server-Neustart. Die Dezentralisierung der Konfiguration kostet also auch etwas Rechnerleistung.

Dass der Name .htaccess mit einem Punkt beginnt, ist eine Tradition aus der Unix-Welt. Dort beginnen viele verzeichnisspezifische Konfigurationsdateien mit einem Punkt, wodurch sie als "versteckt" gekennzeichnet werden. Bekannt ist beispielsweise die Datei .profile. Dateien, deren Name mit einem Punkt beginnt, werden von dem Unix-Konsolenbefehl "ls" nur aufgelistet, wenn mit der Option "-a" ausdrücklich angegeben wird, versteckte Dateien zu zeigen. Setzen Sie zur Verwaltung Ihres Webangebots einen grafischen FTP-Client ein, kann es Ihnen daher passieren, dass eine .htaccess-Datei, die Sie gerade hochgeladen haben, plötzlich nicht mehr zu existieren scheint. Und schließlich muss der Name auch nicht unbedingt .htaccess lauten, dieser Name hat sich lediglich als Konvention durchgesetzt. In der zentralen Konfiguration des Apache lässt sich auch ein beliebiger anderer Dateiname einstellen.

.htaccess-Dateien sind reine Textdateien, die mit einem Texteditor bearbeitet werden können. Wenn Sie Telnet- oder SSH-Zugang zu demjenigen Server-Rechner haben, auf dem Ihr Web-Angebot liegt, können Sie solche Dateien direkt auf dem Server erstellen und bearbeiten, indem Sie dort einen geeigneten Texteditor aufrufen (auf Unix-Systemen z.B. den vi-Editor). Wenn Sie nur FTP-Zugang zu dem Server-Rechner haben, können Sie eine solche Datei auf Ihrem lokalen PC mit einem Texteditor erstellen und dann hochladen. Auf einem Windows-System dürfen Sie allerdings solche Dateinamen, die mit einem Punkt beginnen, nicht unmittelbar vergeben, da Windows den Punkt anders versteht. Sie müssen in Ihrem Texteditor die Option "Speichern unter" wählen und darauf achten, dass der Editor nicht selbständig aus diesem Namen den Dateinamen .htaccess.txt macht.

.htaccess-Dateien gelten stets für das Verzeichnis, in dem sie abgespeichert werden, sowie für alle Unterverzeichnisse davon und für deren Unterverzeichnisse. Wenn Sie in einem der Unterverzeichnisse andere Regelungen wünschen, müssen Sie dort wiederum eine .htaccess-Datei ablegen. Die Angaben der jeweils aktuellen Datei überschreiben die Angaben von .htaccess-Dateien aus darüberliegenden Verzeichnissen.

Das Konzept, .htaccess-Dateien einzusetzen, gehörte zwar nahezu von Anfang an zum Apache, jedoch wurde die Zahl der erlaubten Anweisungen von Version zu Version größer, womit sich auch der Umfang dessen, was in einer .htaccess-Datei konfiguriert werden kann, beständig erweiterte. Sollte eines der hier genannten Beispiele bei Ihnen nicht funktionieren, so informieren Sie sich bitte über die Version des eingesetzten Webservers und schlagen Sie in der deutschsprachige Seite Apache-Dokumentation nach, um herauszufinden, ob die Anweisung in Ihrer Apache-Version bereits eingesetzt werden kann.

Die Thematik ist wesentlich umfangreicher, als hier in einem kurzen Abriss dargestellt wird. Es können Ihnen nur die wichtigsten Einsatzgebiete benannt werden, für die .htaccess-Dateien genutzt werden können.

Erlaubte Anweisungen in .htaccess-Dateien

Sie können in einer .htaccess-Datei genau dieselben Anweisungen notieren, die in der zentralen Konfigurationsdatei Verwendung finden - mit nur wenigen Ausnahmen. Beispielsweise dürfen Sie keine zusätzlichen Seite Module laden, den Servernamen nicht ändern und keinen zusätzlichen Speicherplatz (DocumentRoot) anfordern. Auch <Directory ...>-Container sind generell in so einer dezentralen Konfigurationsdatei ebensowenig zulässig wie Festlegungen für neue virtuelle Hosts. Wenn Sie solche Wünsche haben, so setzen Sie sich bitte mit Ihrem Provider bzw Webmaster in Verbindung - oder wenn Sie einen Seite lokal installierten Apache nutzen, ändern Sie die Seite httpd.conf. Sonst haben Sie aber sehr weitgehende Freiheiten. So ist es durchaus möglich, dass Sie Anweisungen nutzen, die in der zentralen Konfigurationsdatei nicht vorhanden sind, beispielsweise für Spracheinstellungen oder für ganz bestimmte Zeichensätze oder MIME-Typen. Prinzipiell dürfen Sie dies alles selbst konfigurieren. Denken Sie aber daran, dass es in jedem Verzeichnis nur eine einzige .htaccess-Datei geben kann, in der Sie alles das notieren müssen, was Sie konfigurieren wollen. Zur Strukturierung und damit besseren Lesbarkeit für Sie empfiehlt sich der sparsame Einsatz einiger weniger Kommentarzeilen.

Trotz dieser prinzipiell vielfältigen Möglichkeiten kann es aber teilweise drastische Einschränkungen geben. Welche Anweisungen Ihnen tatsächlich zur Verfügung stehen, hängt davon ab, wie weitgehend die Rechte sind, die Ihnen der Server-Administrator mit Hilfe der Anweisung AllowOverride in der zentralen Konfigurationsdatei einräumt.

Beachten Sie:

Die Anweisung AllowOverride kann nicht innerhalb einer .htaccess notiert werden, sondern wird ausschließlich vom Server-Administrator in der zentralen Konfigurationsdatei vorgegeben. Um den AllowOverride-Wert in Erfahrung zu bringen, benötigen Sie Einsicht in die Serverkonfiguration. Kontaktieren Sie dazu gegebenenfalls Ihren Webhosting-Provider. Dieser kann den Wert auch ändern, falls Sie bestimmte bisher nicht erlaubte Anweisungen verwenden möchten. Im einzelnen gibt es dafür folgende mögliche Werte:

  • Mit AllowOverride None wird der Webserver angewiesen, .htaccess-Dateien zu ignorieren. Das ist im Übrigen die Voreinstellung.
  • Mit AllowOverride All wird festgelegt, dass in einer .htaccess-Datei (so gut wie) sämtliche zentrale Vorgaben überschrieben und damit abgeändert werden dürfen. Das kann bedeuten, dass Vorhaben, die eigentlich verboten sind (beispielsweise die Ausführung von CGI-Scripts), mit Hilfe einer .htaccess-Datei erlaubt werden. Als Server-Administrator werden Sie diese Anweisung also nur sehr vorsichtig einsetzen.
  • Mit AllowOverride Options wird festgelegt, dass in einer .htaccess-Datei nach unten Anweisungen zur Steuerung spezieller Verzeichniseigenschaften zulässig sind.
  • Mit AllowOverride Limit wird festgelegt, dass in einer .htaccess-Datei nach unten Zugriffe von bestimmten Hosts erlaubt oder untersagt werden können.
  • Mit AllowOverride Indexes wird festgelegt, dass in einer .htaccess-Datei nach unten Anweisungen zur Steuerung von Verzeichnisindizes zulässig sind.
  • Mit AllowOverride FileInfo wird festgelegt, dass in einer .htaccess-Datei Anweisungen zur Akzeptanz bestimmter Dokumenttypen zulässig sind - beispielsweie, um nach unten Individuelle Fehlermeldungen ausgeben zu können.
  • Mit AllowOverride AuthConfig wird festgelegt, dass in einer .htaccess-Datei Autorisierungsanweisungen stehen dürfen - das betrifft beispielsweise Regelungen zum nach unten Passwortschutz.

Diese Werte können auch miteinander kombiniert werden. All ist der mächtigste Parameter, mit dem alles das zugelassen wird, was die anderen Parameter steuern.

Verzeichnisse und Dateien mit Passwort schützen

.htaccess-Dateien sind verzeichnisspezifisch. Speichern Sie die .htaccess-Datei also in demjenigen Verzeichnis ab, in dem die zu schützenden Daten liegen. Sie können wahlweise das ganze Verzeichnis mit all seinen Unterverzeichnissen oder nur bestimmte Dateien oder Dateitypen schützen. Sie können den Passwortschutz außerdem wahlweise für einzelne Benutzer oder für ganze Benutzergruppen einrichten. Auch Kombinationen beider Formen sind möglich. Damit der Verzeichnisschutz mit Passwort funktioniert, genügt die .htaccess-Datei alleine allerdings nicht. Sie brauchen zusätzlich eine Datei, in der die Benutzernamen und die zugehörigen Passwörter stehen. Falls Sie mit Benutzergruppen arbeiten, benötigen Sie außerdem noch eine Datei, in der die Benutzergruppen definiert werden. Auch diese beiden anderen Dateien werden mit einem beliebigen Texteditor erstellt.

Beispiel: .htaccess-Datei

# .htaccess-Datei für Web-Verzeichnis /service
AuthType Basic
AuthName "Service-Bereich"
AuthUserFile /usr/verwaltung/web/.htusers
AuthGroupFile /usr/verwaltung/web/.htgroups
Require user  Werner Dieter Heidi
Require group Servicetechniker

Erläuterung:

Die erste Zeile der Beispieldatei ist lediglich ein Kommentar. Solche Kommentarzeilen müssen mit dem Gatterzeichen # eingeleitet werden. Alle anderen Zeilen haben einen einheitlichen Aufbau: Sie beginnen mit Schlüsselwörtern (den eigentlichen Anweisungen), und dahinter folgen, durch ein oder mehrere Leerzeichen getrennt, Angaben dazu. Leerzeilen, die die Lesbarkeit verbessern, sind erlaubt, werden aber vom Webserver ignoriert. Zeilen mit Angaben, die der Webserver nicht interpretieren kann, führen jedoch grundsätzlich zu einem "Internal Server Error" ( Seite HTTP-Status-Code 500).

Um einen Passwortschutz einzurichten, brauchen Sie die Anweisungen AuthType, AuthName, AuthUserFile, und wenn Sie mit Benutzergruppen arbeiten, auch AuthGroupFile. Ferner benötigen Sie eine oder mehrere Angaben der Anweisung Require.

Mit AuthType wird die Art der Authentifizierung bezeichnet. Die meist gebrauchte Angabe ist Basic für die sogenannte HTTP Basic Authentication (einfache Authentifizierung über HTTP). Dabei stehen die Benutzernamen und die zugehörigen Passwörter in einer noch anzugebenden Datei. Diese Methode verlangt aber, dass das Passwort unverschlüsselt vom Browser an den Webserver übermittelt wird. Sie ist daher nicht wirklich sicher. Die Alternative für den Authentifizierungstyp ist Digest. Dabei werden Passwörter bereits in verschlüsselter Form abgefordert, allerdings beherrschen das nicht alle Browser. Sie müssen daher entscheiden, was für Sie Vorrang hat: höhere Sicherheit oder die Berücksichtigung der Browser und Clients, die nur die einfache Authentifizierung unterstützen.

Mit AuthUserFile wird die Datei angegeben, in der die Namen der autorisierten Benutzer und ihre Passwörter stehen. Es sollte der vollständige absolute Pfadname angegeben werden. Das ist also nicht der Pfad ab dem Wurzelverzeichnis Ihres Web-Projekts. Fragen Sie dazu gegebenenfalls Ihren Webhosting-Provider oder Webmaster. Sie können zwar auch eine Angabe machen, die relativ zum Wurzelverzeichnis des Webservers (das oft /usr/lib/apache/ lautet) interpretiert wird. In der Regel ist das aber ein zentrales Installationsverzeichnis, auf das Sie keinen Zugriff haben.

Im Interesse der Sicherheit ist es günstiger, die Datei mit den Namen der Benutzer und ihren Passwörtern außerhalb des Web-Projekts auf dem Server abzulegen. Aber bei kaum einem Hosting-Angebot können Sie auf Systemverzeichnisse des Server-Rechners außerhalb des eigenen Web-Projekts zugreifen. Wenn nicht ausdrücklich vom Provider bzw. Webmaster anders bestimmt, sollten Sie außerdem für die Datei einen Namen wählen, der mit .ht beginnt, üblicherweise eben .htusers oder .htpasswd. In der Konfiguration des Apache-Servers sind solche Dateinamen als Grundeinstellung vorgegeben und werden, wie oben bereits erläutert, aufgrund des vorangestellten Punktes nicht zur Ansicht freigegeben, bleiben also vor Besuchern verborgen. Das Gleiche gilt für die Gruppendatei, falls Sie mit Benutzergruppen arbeiten. Diese wird mit AuthGroupFile angegeben. Alternativ können Sie aber mit Hilfe des Containers <Files> auch eigene Schutzregeln definieren und eigene Namen für diese Dateien vergeben.

Bei Require geben Sie als zweites Schlüsselwort entweder user oder group an, je nachdem, ob Sie Zugriffsbestimmungen für einzelne Benutzer oder Benutzergruppen festlegen möchten. Hinter diesem Schlüsselwort können ein oder mehrere Namen von Benutzern oder Benutzergruppen folgen. Alternativ können Sie auch das Schlüsselwort valid-user benutzen, um alle Benutzer zuzulassen, falls die Liste sonst zu lang werden würde.

Im obigen Beispiel werden die drei Benutzer Werner Dieter Heidi sowie alle Benutzer der Gruppe Servicetechniker angegeben. Damit der Passwortschutz funktioniert, müssen nun die angegebenen Dateien mit den Benutzernamen und (falls benötigt) den Gruppen angelegt werden.

Beispiel: .htusers-Datei unter Unix

# BenutzerDatei für Web-Projekt
Werner:INY8//m5KMwIc
Manfred:69gY8YPjQXeN6
Janine:INw2mPEH.owe2
Anke:INh6DHvyejvf2
Bernd:INboWuvjjwQ7E
Karin:INwOXOz96UQOU
Christina:INXo9kh0M.anc
Andreas:INeRD/cUQIFP6
Dieter:INUnlKdkNZ6RQ
Heidi:IN20ffIEEV1H6

Beispiel: .htusers-Datei unter Windows

# BenutzerDatei für Web-Projekt
Werner:Herakles
Manfred:Dionysos
Janine:Olympia
Anke:Hydra
Bernd:Poseidon
Karin:Hera
Christina:Athena
Andreas:Apollon
Dieter:Achilles
Heidi:Diana

Erläuterung:

Auch in solchen Dateien sind Kommentarzeilen erlaubt, eingeleitet durch #. Ansonsten enthält jede Zeile der Benutzerdatei einen Benutzernamen, und gleich dahinter, durch einen Doppelpunkt getrennt, das Passwort. Der Apache-Webserver erlaubt entweder unverschlüsselte Passwörter (unter Windows), oder verschlüsselte nach den Methoden Crypt oder MD5 (alle Plattformen einschließlich Windows).

Falls Sie damit nichts anfangen können, können Sie das folgende kleine Formular verwenden. Geben Sie darin das gewünschte Passwort ein. Das Formular ruft beim Absenden ein CGI-Script im Web auf. Als Ergebnis erhalten Sie das nach der Methode Crypt verschlüsselte Passwort. Dazu muss jedoch eine Verbindung ins Internet bestehen.

Kennwort:

Zusammen mit dem Apache wird ein kleines Hilfsprogramm ausgeliefert, das die Erstellung solcher Passwortdateien vereinfacht. Es heißt htpasswd (unter Windows: htpasswd.exe) und ist über die Konsole (Eingabeaufforderung) zu bedienen. Rufen Sie es einfach mit dem Befehl htpasswd -h auf, um eine kurze Hilfe zu seiner Verwendung zu erhalten. Im einfachsten Fall geben Sie zum Beispiel

htpasswd -c .htusers smuenz

ein. Es wird eine neue Passwortdatei angelegt. Sie müssen für den neuen Benutzer "smuenz" ein Passwort angeben und bestätigen. Diese Passwortdatei können Sie dann in das vorgesehene Verzeichnis verschieben oder hochladen.

Beispiel: .htgroups-Datei

# GruppenDatei für Web-Projekt
Servicetechniker: Andreas Karin Janine

Erläuterung:

Gruppendateien bestehen aus Einträgen, bei denen zunächst ein Gruppenname notiert wird und dahinter, nach einem Doppelpunkt, die Namen von Benutzern, die zu dieser Gruppe gehören. Es müssen Benutzernamen sein, für die in der Benutzerdatei ein Eintrag angelegt wurde.
Die Gruppendatei wird im Beispiel nur benötigt, weil in der .htaccess-Datei eine Benutzergruppe angegeben wurde; die Gruppendatei wird ausschließlich dann erforderlich, wenn Sie Gruppennamen benutzen. In einem Intranet ist auch eine Benutzerdatei nicht zwingend erforderlich, da Sie Zugriffserlaubnisse und -verbote über die Zulassung bzw. den Ausschluss der internen IP-Adresse regeln können.

Effekt:

Alle Besucher des Web-Projekts, die nun versuchen, auf das Verzeichnis mit der .htaccess-Datei zuzugreifen, bekommen von ihrem Browser einen Dialog angeboten, in dem sie Benutzernamen und Passwort eingeben müssen. Nur Besucher, die sich mit einer gültigen Kombination aus Benutzernamen und Passwort anmelden, haben Zugriff auf das Verzeichnis.

Erweiterte Möglichkeiten:

So wie im obigen Beispiel gezeigt, gilt der Zugangsschutz für das Verzeichnis, in dem die .htaccess-Datei liegt, und für alle Verzeichnisse unterhalb davon. Sie können den Schutz aber auch auf bestimmte Dateien, Dateitypen oder Zugriffsmethoden einschränken.

Beispiel: .htaccess-Datei

# .htaccess-Datei für Web-Verzeichnis /service

AuthType Basic
AuthName "Service-Bereich"
AuthUserFile /usr/verwaltung/web/.htusers
AuthGroupFile /usr/verwaltung/web/.htgroups

<Files *.htm>
Require user  Werner Dieter Heidi
Require group Servicetechniker
</Files>

Erläuterung:

Um den Schutz einzuschränken, benutzen Sie ähnlich wie in HTML oder XML Tags mit spitzen Klammern. Im einleitenden Tag kann hinter der öffnenden spitzen Klammer entweder Files stehen, wie im obigen Beispiel. Dahinter können Sie genau eine einschränkende Angabe machen. Mit *.htm wie im Beispiel beschränken Sie den Schutz auf HTML-Dateien. Mit einer Angabe wie geheim.htm würde nur diese eine Datei geschützt. Anstelle von Files können Sie auch FilesMatch einsetzen. Dann sind Reguläre Ausdrücke möglich. Beispielsweise würden Sie mit <FilesMatch "\.(htm|php)$"> alle HTML-Dokumente und alle PHP-Scripts erfassen.

Eine weitere Möglichkeit besteht darin, anstelle von Files die Anweisung Limit, oder besser noch LimitExcept anzuwenden. Diese Anweisung steht aber erst seit der Apache-Version 2.0.20 zur Verfügung. Sie hat Auswirkungen auf HTTP-Methoden wie GET, POST, PUT, DELETE, CONNECT, OPTIONS usw. Mit <LimitExcept GET> können Sie für alle Zugriffsmethoden Bedingungen formulieren, mit Ausnahme von GET - und mit Mit <LimitExcept POST> würden Sie für alle Zugriffsmethoden mit Ausnahme von POST Zugriffsbedingungen formulieren können, falls der Webserver mindestens ein Apache 2.0.20 oder neuer ist.

Beachten Sie:

Falls es bei Ihnen einfach nicht klappen will mit dem Schützen von Verzeichnissen, dann könnte der Grund darin liegen, dass in der zentralen Konfiguration des Apache Webservers beim Eintrag AllowOverride der Wert None gewählt wurde.

Schutzmechanismen, die Sie mit Hilfe von .htaccess-Dateien erstellen, sind auf HTTP-Ebene wesentlich sicherer als solche, die mit Hilfe von CGI-Scripts oder gar mit Hilfe von JavaScript erstellt werden. Dennoch sollten Sie beachten, dass .htaccess keinen Generalschutz bietet. Der Schutz gilt nur, wenn Web-Browser oder andere Web-Clients über den Webserver geschützte Daten anfordern. Er gilt nicht, wenn der Zugriff z.B. mit einem anderen Internet-Protokoll wie FTP erfolgt.

IP-Adressen, IP-Bereiche oder Namensadressen zulassen/ausschließen

Sie können bestimmte IP-Adressen oder IP-Bereiche davon ausschließen, auf Webseiten zuzugreifen. Ebenso können Sie alle IP-Adressen ausschließen und nur ganz bestimmten den Zugriff erlauben. Anwender, die über eine nicht autorisierte IP-Adresse zugreifen, erhalten dann eine HTTP-Fehlermeldung (den Seite HTTP-Status-Code 403), und der Zugriff wird ihnen verweigert.

Sinnvoll ist das beispielsweise, wenn Ihr Web-Angebot nur den Mitarbeitern Ihrer Firma im firmeninternen Intranet zugänglich sein soll. In einem solchen Fall kennen Sie vermutlich die vorhandenen Netze, möglicherweise sogar alle im Intranet fest vergebenen IP-Adressen. Oder Sie möchten bestimmte Anwender, die mit festen IP-Adressen unterwegs sind, ausschließen.

Beispiel: .htaccess-Datei

# Datei zum Regeln von IP-Bereichen
Order deny,allow
Deny from .aol.com
Deny from 192.168
Allow from 192.168.220.102

Erläuterung:

Zunächst legen Sie mit Order die logische Interpretationsreihenfolge der nachfolgenden Angaben fest. Möglich ist die Angabe deny,allow wie im Beispiel, oder auch die umgekehrte Reihenfolge.

In Zeilen, die mit Deny from oder Allow from beginnen, geben Sie eine konkrete IP-Adresse, einen Teil davon, eine Namensadresse oder einen Teil davon an. Mit Deny from verbieten Sie den Zugriff für den oder die angegebenen Benutzer, und mit Allow from erlauben Sie den Zugriff. Auch in der zentralen Konfigurationsdatei können für <Directory>-Container bereits solche Regelungen getroffen worden sein, die Sie dann in der .htaccess-Datei erweitern oder bei Bedarf korrigieren können. Im obigen Beispiel werden alle Benutzer ausgesperrt, die mit einer AOL-Kennung surfen, (.aol.com), sowie alle Benutzer mit einer numerischen IP-Adresse des Bereichs 192.168. Das ist einer der "privaten" IP-Bereiche, also Ihr Intranet. Um aber einem bestimmten Benutzer aus diesem Bereich doch den Zugriff zu erlauben, wird im Beispiel anschließend noch mit Allow from dessen spezifische IP-Adresse angegeben.

Die Angabe wird einfach als Teilzeichenkette interpretiert. Wenn ein Client eine Webseite in dem Verzeichnis mit der .htaccess-Datei aufruft, vergleicht der Webserver, ob eine der notierten Zeichenketten in derjenigen Zeichenkette vorkommt, die der aufrufende Client dem Server übermittelt. Um mehr über die möglichen Zeichenketten zu erfahren, die in der Praxis übermittelt werden, empfiehlt sich ein Blick in die Seite Log-Dateien des Webservers.

Beachten Sie:

Anstelle einer bestimmten Zeichenkette können Sie auch Allow from all bzw. Deny from all notieren, um eine generelle Erlaubnis oder ein generelles Verbot zu formulieren. Wenn Sie beispielsweise keinerlei Einschränkungen für nötig halten, geben Sie mit Allow from all Ihr Verzeichnis frei. Soll Ihr Webangebot dagegen lediglich Ihrem Firmennetz zur Verfügung stehen, so notieren Sie:

Order deny,allow
Deny from all
Allow from 192.168

Beim Aussperren und Einschließen bestimmter IP-Adressen, IP-Bereiche oder Namensadressen sind die gleichen nach oben erweiterten Möglichkeiten erlaubt wie beim Passwortschutz. Die Anweisungen mit Deny from und Allow from können dabei in entsprechende Tags eingeschlossen werden. So lässt sich z.B. das Aussperren bestimmter Benutzer oder Benutzerkreise auf bestimmte Dateien oder Zugriffsmethoden beschränken.

Beispiel: .htaccess-Datei

# .htaccess-Datei für Web-Verzeichnis /service
AuthType Basic
AuthName "Service-Bereich"
AuthUserFile /usr/verwaltung/web/.htusers
Require valid-user
Order deny,allow
Deny from all
Allow from 192.168
Satisfy any

Erläuterung:

In diesem Beispiel wird Require zusammen mit Allow from und Deny from verwendet. Die Anweisung Satisfy gibt an, welche der Bedingungen erfüllt sein müssen. Das Schlüsselwort any bedeutet, dass alle Benutzer mit einer numerischen IP im Bereich 192.168 automatisch zugelassen sind. Benutzer, die nicht von dort kommen, werden nach einem Benutzernamen und Passwort gefragt ("Oder"-Verknüpfung der beiden Bedingungen). Hingegen würde das Schlüsselwort all bedeuten, dass nur Benutzer mit einer IP aus dem Bereich 192.168 und einem gültigen Benutzernamen zugelassen sind ("Und"-Verknüpfung der beiden Bedingungen).

Verzeichnis-Optionen einstellen

Mit Hilfe einer .htaccess-Datei können Sie alle zentralen Verzeichnis-Optionen, die in der Konfiguration des Webservers eingestellt sind, für das entsprechende Verzeichnis und seine Unterverzeichnisse ändern. Voraussetzung ist allerdings, dass in der zentralen Webserver-Konfiguration mindestens AllowOverride Options Indexes FileInfo eingetragen ist. Wenn nicht, dann werden Angaben für andere Verzeichnis-Optionen in Ihrer .htaccess-Datei ignoriert.

Beispiel: .htaccess-Datei

# Datei für Verzeichnis /bilder
Options +ExecCGI -Indexes
DirectoryIndex erste.htm start.htm

Erläuterung:

Mit Options können Sie verschiedene wichtige Grundeinstellungen ändern, die der Webserver für Verzeichnisse verwendet. Hinter Options können Sie eine oder mehrere der folgenden Angaben notieren:
All erlaubt alles bis auf das Definieren alternativer Inhalte. Dies ist die Voreinstellung und gilt auch, wenn Sie nichts explizit angeben möchten.
+ExecCGI erlaubt das Ausführen von Seite CGI-Scripts im Verzeichnis, falls es zentral nur im definierten CGI-Verzeichnis erlaubt ist, und -ExecCGI verhindert es, sofern es zentral in allen Verzeichnissen erlaubt ist.
+Includes erlaubt das Ausführen von Seite Server Side Includes im Verzeichnis, falls es zentral verboten ist, und -Includes verhindert es, sofern es zentral erlaubt ist.
+IncludesNOEXEC erlaubt das Ausführen von Server Side Includes, die kein CGI-Script ausführen, -IncludesNOEXEC verbietet solche Server Side Includes.
+Indexes erlaubt Verzeichnis-Browsing, falls es zentral verboten ist, und -Indexes verhindert es, sofern es zentral erlaubt ist. Beim Verzeichnis-Browsing wird der Inhalt des Verzeichnisses im Browser aufgelistet, falls nur das Verzeichnis aufgerufen wird (z.B. http://www.ihr-name.de/bilder/) und dort keine Datei mit einem Namen zu finden ist, der "Index-Funktion" hat.
+MultiViews erlaubt das Definieren nach unten alternativer Inhalte, -MultiViews schaltet es aus.

Im Normalfall ist der Webserver so konfiguriert, dass er das "Stöbern" im Verzeichnis zulässt, falls dort keine Datei mit "Index-Funktion" existiert. Das sind in der Einstellung der meisten Webserver Dateien mit Namen wie index.htm oder index.html.
Mit DirectoryIndex können Sie andere Dateinamen bestimmen, die in diesem Verzeichnis und seinen Unterverzeichnissen als Dateien mit Index-Funktion gelten. Sie können beliebig viele Dateinamen angeben, welche dann in der Reihenfolge ihrer Angabe geprüft werden, falls mehrere von ihnen gleichzeitig im selben Verzeichnis existieren.

Beachten Sie:

Sie müssen die Vorzeichen - und + nicht unbedingt angeben. Werden sie angegeben, so bewirken sie eine Korrektur eventuell in der zentralen Konfuguration vorhandener Einstellungen. Werden sie nicht angegeben, so werden eventuelle Voreinstellungen überschrieben.

Individuelle Fehlermeldungen gestalten

Per Voreinstellung zeigt der Webserver eine in seiner Konfiguration festgelegte HTML-Datei oder eine hart kodierte Fehlermeldung an, wenn ein Zugriffsfehler passiert, z.B. wenn eine angeforderte Datei nicht existiert. Auch dies können Sie ändern.

Mit ErrorDocument definieren Sie eine eigene Meldung oder Datei, die im Fehlerfall angezeigt wird. Hinter dem Schlüsselwort notieren Sie den gewünschten Seite HTTP-Status-Code - typische Fehler, die auftreten können, sind jene mit den Nummern 403, 404 und 500. Hinter der Nummer mit dem Status-Code können Sie entweder in Anführungszeichen eine eigene Fehlermeldung notieren, oder Sie geben die Adresse einer Webseite an, die im Fehlerfall angezeigt werden soll. Es gibt drei mögliche Varianten:

1. hart kodierte Meldungen

Das bedeutet, dass die Meldung direkt vom Webserver erzeugt wird. Der Wortlaut muss also auch vorgegeben werden, was in folgenden Formen geschehen kann:

Beispiel 1: hartkodierte Fehlermeldung als reiner Text

# Text für individuelle Fehleranzeige
ErrorDocument 404 "Ups. Was haben Sie denn da für Unsinn angestellt -\
                   die angeforderte Ressource gibts hier ja gar nicht ;-)"

Beachten Sie:

Zugegeben, der Text ist etwas frech, variieren Sie ihn bitte und wählen Sie eine höflichere Ausdrucksweise. Sie können einen beliebig langen Text notieren, aber es muss alles hintereinander ohne jeden Zeilenumbruch in einer einzigen Zeile geschrieben werden, oder es findet hier ausnahmsweise der Backslash als Zeilentrenner Verwendung, damit Sie es besser lesen können. Die Ausgabe an den Browser erfolgt als reiner Text. Der Internet Explorer stellt allerdings solche servergenerierte Fehlermeldungen erst dann dar, wenn sie mehr als 512 Bytes belegen. Das hier notierte Beispiel erscheint daher nicht im Internet Explorer (der stattdessen eine seiner Systemmeldungen offeriert), wohl aber in anderen Browsern. Sie können dieses Verhalten des Internet Explorer ändern, indem Sie in den "Internetoptionen" die als Voreinstellung aktivierte Option "Kurze HTTP-Fehlermeldungen anzeigen" deaktivieren.

Beispiel 2: hart kodierte Fehlermeldung als HTML

# HTML für individuelle Fehleranzeige
ErrorDocument 404 "<html><head><title>Seite nicht vorhanden</title>\
                   <style type='text/css'>\
                   body {background-color:#EEEEEE;}\
                   h1,p,a {font-family:Helvetica,Arial,Sans-serif;}\
                   h1 {font-size:1.7em; margin-bottom:0em;}\
                   p {font-size:0.95em;}\
                   a {font-size:0.93em; text-decoration:none;}\
                   a:link,a:visited {color:#000080;}\
                   a:hover {color:#FF0000;}\
                   </style>\
                   </head><body>\
                   <h1>Fehler 404</h1>\
                   <p>Die angeforderte URL kann nicht gefunden werden.</p>\
                   <p>Probieren Sie es bitte erneut mit einem Aufruf der\
                   <a href='/'>Startseite</a>.</p>\
                   </body></html>"

Erläuterung:

Wie Sie sehen, sind HTML-Tags in solchen Meldungstexten zulässig. Es muss wiederum entweder alles hintereinander in einer Zeile geschrieben werden, oder Sie setzen den Backslash als Zeilentrenner ein. Ihren Browser interessieren solche Backslashes hier nicht. Das angegebene Beispiel umfasst mit 769 Byte mehr als 512 Bytes, daher stellt es auch der Internet Explorer dar, egal, ob Sie in den "Internetoptionen" die als Voreinstellung aktivierte Option "Kurze HTTP-Fehlermeldungen anzeigen" deaktiviert haben oder nicht.

Sie können, wenn Sie es für unabdingbar halten, in solchen hart kodierten HTML-Anzeigen sogar CSS-Bereiche (wie im angegebenen Beispiel) und JavaScript vorgeben. Allerdings müssen Sie beachten, dass doppelte Anführungszeichen die Fehlermeldung begrenzen und Sie somit einfache Anführungszeichen für HTML-Attribute verwenden müssen.

2. lokale Fehlerseiten

Anstelle solcher hart kodierter Fehlermeldungen, die vom Server direkt ausgegeben werden, können Sie natürlich auch eigene HTML-Dateien für die Fehleranzeige einsetzen.

Beispiel 3: lokales HTML-Dokument im aktuellen Verzeichnis

Das bedeutet, dass ein lokales HTML-Dokument, das im selben Verzeichnis wie Ihre .htaccess-Datei liegt, die gewünschte Anzeige enthält. Dazu wird folgendes notiert:

# verzeichnisspezifisches HTML-Fehlerdokument
ErrorDocument 404 /verzeichnispfad/fehler404.htm

Erläuterung:

Auch hier gilt, dass eine solche lokale Fehlerseite erst dann vom Internet Explorer dargestellt werden kann, wenn sie größer als 512 Bytes ist - es sei denn, Sie haben die Option für "Kurze HTTP-Fehlermeldungen anzeigen" deaktiviert. Bei dieser Art der Notation gilt die Anzeige nur für das gerade aktuelle Verzeichnis. Das kann nützlich sein, wenn Sie Ihr Webangebot so strukturiert haben, dass ein Verzeichnis nur Grafiken, ein weiteres nur Bilder und ein drittes nur Flash-Animationen enthält und Sie bei eventuellen Fehlern auch inhaltsbezogene Meldungen ausgeben möchten.

Beachten Sie:

Sie müssen solche lokale Fehlerdokumente immer ausgehend vom Wurzelverzeichnis / deklarieren. Geben Sie lediglich
ErrorDocument 404 fehler404.htm
an, interpretiert Apache das als String und übermittelt dem Browser lediglich "fehler404.htm" zur Anzeige - was sehr irritierend wirken kann.

Beispiel 4: lokales HTML-Dokument im Wurzelverzeichnis

# projektspezifisches HTML-Fehlerdokument
ErrorDocument 404 /fehler404.htm

Erläuterung:

Wenn Sie das so notieren, brauchen Sie nur eine einzige Datei mit diesem Namen im Wurzelverzeichnis Ihres Webangebots. Das bedeutet aber auch, dass ihre Fehlerbeschreibung nicht variiert werden kann.

3. externe Fehlerdokumente

Das bedeutet, dass die gewünschte Fehlerseite über eine externe URL angesprochen wird. Der Eintrag erhält dann folgendes Aussehen:

Beispiel 5: externes HTML-Dokument als Fehlerseite

# externes HTML-Fehlerdokument
ErrorDocument 404 http://www.domainname.tld/fehler404.htm

Beachten Sie:

Mit dieser Weiterleitung auf ein externes Dokument wird ein Redirect ausgelöst, was zu eventuell nicht erwünschten Nebeneffekten führen kann. Näheres dazu kann in der deutschsprachige Seite Apache-Dokumentation nachgelesen werden.

Verzeichnis-Browsing einstellen

Wenn Sie Verzeichnis-Browsing erlauben, sodass also bei einem Aufruf wie http://www.ihr-name.de/bilder/ der Verzeichnisinhalt aufgelistet wird, können Sie die Optik beeinflussen, mit der die Verzeichnislisten im Browser angezeigt werden. Leichter verständlich wird das, wenn Sie sich klarmachen, dass der Webserver anhand des eingelesenen Verzeichnisinhaltes dynamisch HTML-Code generiert, den der Browser dann anzeigt. Mit den hier beschriebenen Optionen können Sie diese HTML-Ausgabe beeinflussen.

Die folgende Abbildung zeigt, wie ein Browser ein Verzeichnislisting anzeigen könnte, bei dem eigene Dateibeschreibungen und Symbolgrafiken zum Einsatz kommen:

Beispiel einer Verzeichnisdarstellung

Beispiel: .htaccess-Datei

# Datei für Verzeichnis /bilder
FancyIndexing On
AddDescription "HTML-Datei, anzeigbar" .htm .html
AddDescription "GIF-Grafik, anzeigbar" .gif
AddDescription "JPEG-Grafik, anzeigbar" .jpg
AddDescription "ZIP-Archiv, downloadbar" .zip
AddIcon /src/blau.gif html htm
AddIcon /src/gelb.gif gif jpg
AddIcon /src/gruen.gif ^^DIRECTORY^^
AddIcon /src/blau.gif ^^BLANKICON^^

Erläuterung:

Mit FancyIndexing On schalten Sie eigene Optionen zur Darstellung des Verzeichnislistings ein. Die Einträge der übrigen Zeilen im obigen Beispiel definieren solche Anzeigeoptionen.

Mit AddDescription können Sie einen kurzen Beschreibungstext notieren, der hinter einer oder mehreren bestimmten Dateien stehen soll. Zuerst notieren Sie in Anführungszeichen den gewünschten Text, und dahinter geben Sie an, für welche Datei oder Dateien der Text gelten soll. Dabei können Sie wie im Beispiel oben Wildcards benutzen.

Mit AddIcon können Sie für eine oder mehrere bestimmte Dateien eine eigene Symbolgrafik bestimmen. Dabei geben Sie den URI der Symbolgrafik an. Bei Adressen auf der eigenen Domain können Sie mit absoluten Pfadnamen arbeiten, wobei das Wurzelverzeichnis des Web-Projekts der Ausgangspunkt ist. Hinter der Angabe zur gewünschten Grafikdatei können Sie eine oder mehrere Dateiendungen notieren. Dateien mit dieser Endung erhalten dann bei der Anzeige die entsprechende Symbolgrafik. Anstelle von Dateiendungen können Sie auch reservierte Ausdrücke wie ^^DIRECTORY^^ (Verzeichnisse erhalten diese Symbolgrafik) oder ^^BLANKICON^^ (Dateien ohne Dateiendung oder nicht zuzuordnende Dateien erhalten diese Symbolgrafik) notieren.

Weitere Optionen sind ebenfalls möglich, aber im obigen Beispiel nicht notiert:

Mit AddType können Sie einem Kapitel MIME-Typen eine oder mehrere Dateiendungen zuordnen.
Mit AddType text/xml adr ordnen Sie beispielsweise Dateien mit *.adr dem MIME-Typ text/xml zu.
Mit AddEncoding können Sie dem Sub-Typ eines MIME-Typen eine oder mehrere Dateiendungen zuordnen.
Mit AddEncoding javascript jscr ordnen Sie beispielsweise Dateien mit *.jscr dem MIME-Typ text/javascript zu.

Mit AddIconByType können Sie einem MIME-Typen eine Symbolgrafik zuordnen. Alle Dateien dieses MIME-Typs werden dann mit dieser Symbolgrafik angezeigt.
Mit AddIconByType text/xml /src/struktur.gif ordnen Sie beispielsweise Dateien mit dem MIME-Typ text/xml eine Grafik mit der Adresse /src/struktur.gif zu.
Mit AddIconByEncoding können Sie dem Sub-Typ eines MIME-Typen eine Symbolgrafik zuordnen.
Mit AddIconByEncoding javascript /src/action.gif ordnen Sie beispielsweise Dateien mit dem MIME-Subtyp javascript eine Grafik mit der Adresse /src/action.gif zu.

Mit DefaultIcon bestimmen Sie eine Symbolgrafik für alle Fälle, die nicht durch speziellere Angaben abgedeckt sind.
Mit DefaultIcon /src/punkt.gif bestimmen Sie beispielsweise, dass alle Verzeichniseinträge, die sich nicht anderweitig zu Symbolgrafiken zuordnen lassen, die Grafik mit der Adresse /src/punkt.gif erhalten.

Mit HeaderName bestimmen Sie eine eigene Datei für die Anzeige der Kopfinformation zum Verzeichnis.
Mit HeaderName kopf.htm bestimmen Sie beispielsweise, dass die Anzeige der Kopfinformationen aus der Datei kopf.htm im gleichen Verzeichnis geholt werden.

Mit ReadmeName bestimmen Sie eine Datei, in der zusätzliche Informationen zum Verzeichnis stehen, z.B. Copyright-Hinweise. Diese Datei wird unterhalb der Verzeichnisliste eingebunden.
Mit ReadmeName fuss.htm bestimmen Sie beispielsweise, dass die Anzeige der "Liesmich"-Informationen aus der Datei fuss.htm im gleichen Verzeichnis geholt wird.

Mit AddAlt können Sie einer verwendeten Symbolgrafik einen Seite HTML-Alternativtext zuordnen, falls die Grafik nicht angezeigt werden kann.
Mit AddAlt "das ist eine Grafikdatei" gelb.gif bestimmen Sie beispielsweise den Alternativtext das ist eine Grafikdatei für die Symbolgrafik gelb.gif.
Mit AddAltByType können Sie allen Symbolgrafiken vor Dateien eines bestimmten MIME-Typs einen gemeinsamen HTML-Alternativtext zuordnen.
Mit AddAltByType "Das ist eine XML-basierte Datei" text/xml ordnen Sie beispielsweise allen Symbolgrafiken, die vor einer Datei mit dem MIME-Typ text/xml stehen, den angegebenen Alternativtext zu.
Mit AddAltByEncoding können Sie allen Symbolgrafiken vor Dateien eines bestimmten MIME-Subtyps einen gemeinsamen HTML-Alternativtext zuordnen.
Mit AddAltByEncoding "Das ist eine XML-basierte Datei" javascript ordnen Sie beispielsweise allen Symbolgrafiken, die vor einer Datei mit dem MIME-Subtyp javascript stehen, den angegebenen Alternativtext zu.

Mit DirectoryIndex können Sie festlegen, welche Dateinamen Index-Funktion erhalten, das heißt, welche Datei ausgeliefert wird, wenn der Client eine URL in der Form http://www.domainname/ ohne Angabe eines speziellen Dateinamens anfordert. Sie können mehrere Dateinamen angeben, die entsprechend ihrer Reihenfolge vom Server gesucht werden. Die Datei mit dem ersten Namen aus dieser Auflistung, die dann auch im durchsuchten Verzeichnis gefunden wird, liefert der Server aus.

Mit IndexIgnore können Sie Dateien angeben, die nicht im Verzeichnislisting auftauchen sollen.
Mit IndexIgnore kopf.htm fuss.htm nacktbild.jpg *.bmp bestimmen Sie beispielsweise, dass die Dateien kopf.htm, fuss.htm, nacktbild.jpg sowie alle Dateien mit der Endung .bmp nicht angezeigt werden.

Mit IndexOrderDefault wird die Sortierung bestimmt. Per Voreinstellung werden die Verzeichniseinträge alphabetisch aufsteigend nach Dateinamen angezeigt.
Mit IndexOrderDefault Descending Name können Sie beispielsweise nach Dateinamen absteigend sortieren,
mit IndexOrderDefault Ascending Date aufsteigend nach Zeitstempel,
mit IndexOrderDefault Descending Size absteigend nach Dateigröße
und mit IndexOrderDefault Ascending Description aufsteigend nach Dateikurzbeschreibung.

Mit IndexOptions können Sie schließlich weitere Einzeloptionen festlegen.
Mit IndexOptions IconHeight=12 IconWidth=14 IconsAreLinks ScanHTMLTitles legen Sie beispielsweise fest, dass Icongrafiken in der fixen Höhe von 12 Pixeln und der fixen Breite von 14 Pixeln angezeigt werden. Die Icons sind außerdem als Links anklickbar und rufen die dahinter angezeigte Datei oder das Verzeichnis auf. In der Spalte für Dateibeschreibungen werden im Fall von HTML-Dateien die Inhalte der darin definierten title-Elemente ausgelesen und als Kurzbeschreibung zur Datei angezeigt.
Weitere Optionen sind:
Mit SuppressColumnSorting werden die Verzeichniseinträge unsortiert angezeigt.
Mit SuppressDescription werden keine Kurzbeschreibungen anzeigt.
Mit SuppressLastModified werden keine Zeitstempel bei den Einträgen angezeigt.
Mit SuppressSize werden keine Dateigrößen angezeigt.

Alternative Inhalte senden

Jedesmal, wenn Sie irgendeine URL anfordern, findet, von Ihnen unbemerkt, zunächst ein Dialog zwischen Ihrem Browser (dem Client) und dem Webserver statt. Bereits mit Ihrer Anforderung übermitteln Sie einige Daten. Dazu gehören Informationen darüber, was Ihr Client bevorzugt, also beispielsweise, welche Sprache und welchen Zeichensatz er am besten versteht und einiges andere mehr. Server und Client führen gewissermaßen erst einmal ein Gespräch darüber, was denn der Server tatsächlich schicken soll. Diese Verhandlung wird in der Regel vom Server geführt. Bedingungen, wie das geschehen kann, sind in der Spezifikation des zugrundeliegenden Protokolls HTTP ( englischsprachige Seite rfc2616) festgelegt. Beispielsweise kann der Server eine deutschsprachige oder eine englischsprachige Index-Seite senden, je nachdem, ob der Anwender einen Browser mit deutschsprachiger oder englischsprachiger Bedienoberfläche benutzt. Oder er kann alternativ eine HTML-Datei oder eine WML-Datei senden, abhängig davon, ob der aufrufende Client ein normaler Web-Client ist oder ein Handy, das WAP/WML-basierte Inhalte haben möchte.

Sie haben nun die Möglichkeit, in einer .htaccess-Datei die Bedingungen festzulegen, auf welche Art der Server die Verhandlung führen soll. Dafür gibt es mehrere Konzepte. Der etwas einfachere und weniger komplexe Weg besteht lediglich aus zwei Schritten. Als Beispiel soll der Server entscheiden, ob er eine englischsprachige oder eine deutschsprachige Index-Seite liefert:

  1. Sie erstellen in Ihrem Verzeichnis die beiden als Alternativen gedachten Seiten index.htm.de und index.htm.en
  2. Sie fügen in Ihrer .htaccess-Datei eine Zeile Options MultiViews ein

Das ist bereits alles. An einen Client mit deutschsprachiger Benutzerführung wird der Server nun die Seite index.htm.de ausliefern, an einen Client mit englischsprachiger Benutzerführung die Seite index.htm.en, sobald überhaupt eine index.htm angefordert wird.

Beispiel 1: .htaccess-Datei

# Einstellungen für alternative Inhalte
Options MultiViews FollowSymLinks IncludesNoExec
AddOutputFilter INCLUDES .shtml .shtm
Order allow,deny
Allow from all

Beispieldatei index.htm.de

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Franz Mustermanns Homepage</title></head>
<body>
<h1>Willkommen bei Franz Mustermann</h1>
<h3>Freuen Sie sich auf folgendes:</h3>
<!-- weitere Inhalte -->
</body>
</html>

Beispieldatei index.htm.en

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Homepage of Franz Mustermann</title></head>
<body>
<h1>Welcome to Franz Mustermann</h1>
<h3>Enjoy the following:</h3>
<!-- weitere Inhalte -->
</body>
</html>

Erläuterung:

Mit Options MultiViews wird der Server angewiesen, unter alternativen Inhalten denjenigen auszuwählen, der am besten den Bedingungen des anfragenden Clients entspricht. Zugleich wird hier im Beispiel dafür gesorgt, dass eventuellen symbolischen Links im Verzeichnis gefolgt werden darf und dass Seite SSI zulässig sind, sofern sie keine Scripts aufrufen. AddOutputFilter legt fest, dass nur Dateien mit den Endungen shtml und shtm SSI-Anweisungen enthalten dürfen und schließlich wird noch bestimmt, dass das Verzeichnis von allen Benutzern oder Besuchern eingesehen werden darf.

Beachten Sie:

Eine Besonderheit bei der Auslieferung alternativer Daten besteht darin, dass der Client eine Ressource mit dem Namen index.htm anfordert (und der Benutzer also keine Sprachkennung selbst angeben muss), der Server aber die Datei auswählt, die zusätzlich die sprachspezifische Kennung im Namen trägt. Sie als Benutzer bemerken gar nichts davon, dass eine Auswahl getroffen wurde, und Sie bemerken auch nichts davon, dass die angeforderte URL zu einer Datei passt, die auf dem Server einen um ein Teilstück erweiterten Namen trägt.

Options MultiViews bewirkt, dass sich der Server selbst aus einigen Angaben der zentralen Konfiguration eine Art von "Verteilerliste" erstellt, in der alle zulässigen Alternativen aufgeführt sind. Anhand der vom Client mitgelieferten Daten (Referer, User-Agent-Header usw.) wird dann verglichen, welche darin enthaltene Anweisung am besten der Anforderung des Clients entspricht. Die Voraussetzung für die im Beispiel verwendeten Kennungen "en" und "de" ist allerdings, daß der Server selbst solche Länderkennungen unterscheiden kann. Sollte es bei Ihnen nicht gleich funktionieren, dass tatsächlich unterschiedliche Inhalte ausgeliefert werden, so versuchen Sie bitte, Ihre .htaccess-Datei um folgende Zeilen zu erweitern:

AddLanguage de .de
AddLanguage en .en

Sie können auch einen etwas komplexeren Ansatz verfolgen, indem Sie die Zusammenstellung der "Verteilerliste" selbst übernehmen, das also nicht dem Server überlassen. Dafür gibt es wiederum mehrere unterschiedliche Möglichkeiten, wobei leicht zu verstehen sein wird, dass Sie dann die Option MultiViews nicht einsetzen dürfen.

Beispiel 2: .htaccess-Datei

# Einstellungen für alternative Inhalte mit Apache 2.x
AddHandler type-map .var

# Ältere Apache-Versionen verstehen "AddHandler" nicht und
# benötigen eine andere Angabe:
# AddType application/x-type-map var

DirectoryIndex index

# besser: DirectoryIndex index.var

Erläuterung:

In der .htaccess stehen folgende Einträge:
AddHandler type-map .var (bzw. in älteren Apache-Versionen AddType application/x-type-map var) fügt einen Seite MIME-Typ hinzu, den der Webserver (zumindest Apache) kennt. Es ist der MIME-Typ für Dateien mit Angaben zu alternativen Inhalten. Als Dateiendung für solche Dateien wird im Beispiel var definiert. Dateien *.var werden dann als Anweisungsdateien für alternative Inhalte angesehen.
DirectoryIndex index bestimmt Dateien, in deren Namen index vorkommt, als Dateien für die Index-Funktion. Gehen Sie damit aber vorsichtig um: wenn es in Ihrem Verzeichnis mehrere Dateien mit diesem Namen gibt (beispielsweise index.htm und index.php sowie so eine index.var), kann sich der Server möglicherweise nicht entscheiden, welche er ausliefern bzw. nutzen soll und bietet Ihnen als Ausweichlösung ein Listing an. Gerade das wollen Sie aber meist vermeiden. Es ist daher günstiger, einen vollständigen Dateinamen anzugeben, beispielsweise index.var. Sie benötigen nun noch eine Datei mit diesem Namen im gleichen Verzeichnis wie Ihre .htaccess-Datei:

Beispieldatei index.var

URI: index; vary="type,language"

URI: deutsch.htm
Content-type: text/html; qs=1.0
Content-language: de

URI: english.htm
Content-type: text/html; qs=0.8
Content-language: en

Mit URI: index; vary="type,language" drücken Sie aus, dass die folgenden Definitionen für alternativen Inhalt dann berücksichtigt werden sollen, wenn Anfragen kommen, die auf den festgelegten DirectoryIndex (im Beispiel zuvor als index definiert) zutreffen. Die Alternativen können Angaben zum Dateityp (type) und zur Sprache (language) betreffen.

Diese erste Anweisung und die möglichen Alternativen müssen jeweils durch eine Leerzeile getrennt werden. Jede Alternative beginnt mit URI:. Dahinter folgt der gewünschte URI, der bei der jeweiligen Alternative aufgerufen werden soll. Im obigen Beispiel handelt es sich jeweils um Dateien im gleichen Verzeichnis, nämlich einmal english.htm und einmal deutsch.htm.
Mit Content-type: bestimmen Sie den MIME-Typ des bei URI: angegebenen URIs, im obigen Beispiel text/html. Falls Sie z.B. alternative Inhalte für Web-Browser und WAP-Handys senden wollen, können Sie bei dieser Angabe in der einen Alternative beispielsweise eine WML-Datei anbieten mit dem MIME-Typ text/vnd.wap.wml, und in der anderen eine HTML-Datei mit dem üblichen MIME-Typ text/html. Die Angabe Content-type: ist in jedem Fall Pflicht, auch dann, wenn Sie dort keine unterschiedliche Angaben zu machen haben.
Bei Content-type können Sie am Ende, durch Semikolon getrennt, noch eine Angabe zu qs notieren. Hinter diesem Schlüsselwort und einem Gleichheitszeichen können Sie numerische Werte für die Alternativen vergeben. Alternativen mit höheren Werten werden in dem Fall, dass sonst nicht entscheidbar ist, welche Alternative gewählt werden soll, bevorzugt.
Mit Content-language: können Sie Sprachen unterscheiden, indem Sie ein Seite Sprachenkürzel angeben. Abhängig davon, welche Sprache der aufrufende Client benutzt oder bevorzugt, wird die entsprechende Alternative ausgewählt.

Für alternative Inhalte benötigen Sie natürlich auch alternative Dateien. In diesem Beispiel wären das die Dateien english.htm und deutsch.htm, die den gleichen Inhalt haben, nur in verschiedenen Sprachen - ähnlich den weiter oben vorgestellten Beispielen für eine index.htm.de und eine index.htm.en.

Beispiel 3: .htaccess-Datei

# Einstellungen für alternative Inhalte mit Apache 2.x
Options -MultiViews
DirectoryIndex index.html
<Files *.html>
  SetHandler type-map
</Files>

Erläuterung:

In der .htaccess stehen diesmal folgende Einträge:
Options -MultiViews ist eine Vorsichtsmaßnahme. Diese Eintragung bedeutet, dass MultiViews explizit ausgeschaltet wird, falls es zentral erlaubt sein sollte. Ist in der zentralen Konfiguration kein MultiViews vorgesehen, bewirkt diese Angabe gar nichts.
DirectoryIndex index.html bewirkt, dass eine Datei mit diesem Namen die Index-Funktion erhält.
Mit dem Container <Files *.html> bestimmen Sie, dass die darin enthaltene Anweisung SetHandler type-map nur für Dateien gilt, deren Name die Erweiterung html aufweist. Solche Dateien, deren MIME-Typ in diesem Fall bereits bekannt ist und also nicht gesondert festgelegt werden muss, erhalten die Funktion einer type-map zugewiesen und ihr Inhalt wird grundsätzlich so behandelt, als stelle er eine solche map dar. Das hat zur Folge, dass Ihre index.html hier nicht den sonst vorzusehenden HTML-Code enthalten darf (übrigens auch keine andere *.html-Datei), sondern denselben Inhalt aufweisen muss, den Sie auch einer im zweiten Beispiel bestimmten index.var mitgeben würden. Die Wirksamkeit solcher Festlegungen können Sie überprüfen, wenn Sie sich die englischsprachige Seite / deutschsprachige Seite Apache-Dokumentation mit unterschiedlich konfigurierten Browsern anschauen - für die Ausgabe alternativer Inhalte werden von der Apache Foundation für die online-Dokumentation genau solche Einstellungen genutzt.

Beispieldatei index.html

URI: index; vary="type,language"

URI: index.php
Content-type: text/html; qs=1.0
Content-language: de

URI: english.htm
Content-type: text/html; qs=0.8
Content-language: en

Sie sehen, dass es sich um dieselben Angaben wie bei einer weiter oben dargestellten index.var handelt, und nicht um den normalen HTML-Code.

Wenn Sie eine solche .htaccess und index.var oder index.html ins Startverzeichnis einer Domain legen, z.B. ins Startverzeichnis von http://www.ihr-name.de/, dann werden Besucher, die nur die Domain aufrufen (ohne bestimmte Dateinamen) automatisch auf die softwareseitig erkennbare Landessprachenseite geleitet. Von dort aus können entsprechend unterschiedliche Verlinkungen so durch das restliche Angebot führen, dass die Landessprache die gleiche bleibt. Gehen Sie mit dieser Möglichkeit der Lenkung jedoch bedächtig um. Bedenken Sie, dass nicht jeder Besucher Ihres Web-Projekts frei in der Wahl seines Browsers ist. Ein deutschsprachiger Besucher in einem englischen Internetcafé hat auch bei besuchten spanischen Seiten eigene Vorstellungen bei der Wahl der Sprache. Sehen Sie gegebenenfalls eine clientseitige Auswahl der Sprache vor.

nach oben
weiter | Seite Umleitungen mit mod_rewrite
zurück | Seite SSI - Server Side Includes
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von Webserver

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / Webserver / Umleitungen mit mod_rewrite

SELFHTML

Umleitungen mit mod_rewrite
Informationsseite

nach unten Allgemeines - URLs manipulieren mit mod_rewrite
nach unten RewriteBase - Basis für eine Umleitung definieren
nach unten RewriteCond - Bedingung für eine Umleitung definieren
nach unten RewriteEngine - mod_rewrite ein- und ausschalten
nach unten RewriteLog - Log-Datei für mod_rewrite bestimmen
nach unten RewriteLogLevel - Art der Log-Meldungen bestimmen
nach unten RewriteRule - Umleitungen bestimmen
nach unten

Allgemeines - URLs manipulieren mit mod_rewrite

mod_rewrite ist ein Modul, das Sie mit Hilfe der LoadModule-Anweisung in Ihrer Seite httpd.conf aktivieren können. Mit diesem Modul sind Sie in der Lage, URLs einfach zu manipulieren. Das heißt, ein Besucher, der eine von Ihrem Server verwaltete URL aufruft, kann beispielsweise automatisch auf eine andere Adresse umgeleitet werden. Um solche Umleitungen zu realisieren, stellt Ihnen mod_rewrite eine Reihe von Anweisungen zur Verfügung, die im folgenden kurz erläutert werden sollen. Sie können solche Regeln an unterschiedlichen Stellen notieren, beispielsweise in einem Seite Directory-Container innerhalb Ihrer httpd.conf, in einem Seite VirtualHost-Abschnitt oder aber innerhalb einer Seite .htaccess-Datei. Von dieser letzten Möglichkeit wird zunehmend Gebrauch gemacht, da immer mehr Provider ihren Kunden den Einsatz solcher Dateien gestatten.

Die Apache-Entwickler selbst betonen, dass mod_rewrite ein "mächtiger Killer" sei: "Mit mod_rewrite schießen Sie sich beim ersten Gebrauch entweder selbst in den Fuß und wollen es dann nie wieder verwenden, oder aber Sie lernen es wegen seiner Power lieben und wollen es Ihr ganzes weiteres Leben nicht mehr missen" (siehe englischsprachige Seite URL Rewriting Guide).

Beispiel:

RewriteEngine on
RewriteRule (.*)\.html$ /cgi-bin/script.pl?var=$1

Das Beispiel bewirkt, dass alle Zugriffe auf .html-Dateien im Basis-Verzeichnis des Webservers auf ein Script umgeleitet werden, wobei der Name der aufgerufenen Datei als Parameter übergeben wird.

Grundsätzlich benötigt man für URL-Manipulationen nur die nach unten RewriteRule-Direktive. Allerdings muss einmal mit nach unten Rewrite Engine mod_rewrite eingeschaltet werden. Obwohl es bei den meisten Direktiven egal ist, ob Sie diese in einer Server-Konfigurationsdatei wie die httpd.conf oder in einer Seite .htaccess-Datei verwenden, sollten Sie, um Performance-Einbußen zu vermeiden, diese in der Server-Konfiguration verwenden, falls Ihnen das erlaubt ist. Einige Optionen verursachen ähnliche Probleme, weshalb Sie alle Optionen nur mit Bedacht benutzen sollten.

RewriteBase - Basis für eine Umleitung definieren

Diese Regel darf an folgenden Stellen der Apache-Konfiguration notiert werden: Seite Directory-Container, .htaccess

Sie benötigen RewriteBase, wenn das Verzeichnis, in dem die Umleitung stattfindet, nicht über Ihren eigentlichen (physischen) Namen erreichbar ist (beispielsweise, wenn man einen Alias auf das Verzeichnis gesetzt hat). Sie müssen mod_rewrite dann mitteilen, wie das Verzeichnis erreichbar ist.

Beispiel:

RewriteEngine on

#
# die Datei liegt im Verzeichnis /abc/def
# erreichbar ist dieses Verzeichnis aber über /xyz
# bspw. weil in der httpd.conf folgendes gesetzt wurde:
# Alias /xyz /abc/def
#

RewriteBase /xyz
RewriteRule ^(.*)\.htm$ $1.html # macht alle *.html auch als *.htm erreichbar

Erläuterung:

Da das physische Verzeichnis /abc/def nicht darüber aufgerufen wird, würde, wenn man keine RewriteBase angibt, die RewriteRule nicht funktionieren. Durch diese Angabe macht man mod_rewrite den passenden Alias bekannt.

RewriteCond - Bedingung für eine Umleitung definieren

Diese Regel darf an folgenden Stellen der Apache-Konfiguration notiert werden: Serverkonfiguration allgemein, Seite VirtualHost, Seite Directory-Container, .htaccess.

RewriteCond beschreibt eine Bedingung, die erfüllt sein muss, damit die RewriteRule ausgeführt wird.

Erwartet als Parameter:

  1. Test-String - eine Zeichenkette, die überprüft werden soll
  2. Bedingung - beschreibt die Überprüfung, die auf Test-String angewendet werden soll
  3. [flags] - Zusätzliche Optionen (optional)

Test-String

Test-String ist eine Zeichenkette, die neben gewöhnlichem Text auch folgende Konstrukte beinhalten kann:

Nr. | Test-String | Erklärung
1. | $1 | Mit $N (1 <= N <= 9) kann man auf zwischengespeicherte Werte der aktuellen RewriteRule-Direktive zugreifen
2. | %2 | Mit %N (1 <= N <= 9) kann man auf zwischengespeicherte Werte der letzten RewriteCond-Direktive zugreifen

Bedingung

Bedingung beschreibt die Bedingung, die auf den Test-String zutreffen muss. Bedingung ist ein Perl-kompatibler Seite Regulärer Ausdruck (ohne Begrenzerzeichen, '/'). Alternativ können folgende Erweiterungen benutzt werden:

Nr. | Bedingung | Erklärung
1. | <Vergleichsstring | Der Test-String ist im Alphabet vor dem Vergleichsstring
2. | >Vergleichsstring | Der Test-String ist im Alphabet nach dem Vergleichsstring
3. | =Vergleichsstring | Test-String und Vergleichsstring werden auf Gleichheit überprüft. Wenn der Vergleichsstring "" ist, wird geprüft, ob der Test-String leer ist
4. | -d | Der Test-String wird als Pfadname interpretiert und es wird überprüft, ob es ein Verzeichnis ist (d: directory, Verzeichnis)
5. | -f | Der Test-String wird als Pfadname interpretiert und es wird überprüft, ob es eine reguläre Datei ist (f: file, Datei)
6. | -s | Der Test-String wird als Pfadname interpretiert und es wird überprüft, ob es eine reguläre Datei mit einen Inhalt größer als 0 ist (s: size, Größe)
7. | -l | Der Test-String wird als Pfadname interpretiert und es wird überprüft, ob es ein symbolischer Link ist (l: link, Verknüpfung)
8. | -F | Der Test-String wird als Pfadname interpretiert und es wird überprüft, ob es eine Datei ist und diese zugänglich ist (inklusive Zugangskontrollen, z.B. mit Seite .htaccess)
9. | -U | Es wird überprüft, ob Test-String eine gültige URL ist (inklusive Zugangskontrollen, z.B. mit Seite .htaccess)

Beachten Sie:

Allen diesen Ausdrücken kann ein Ausrufezeichen (!) vorangestellt werden, um die Ausdrücke zu verneinen. Bei den Beispielen (8.-9.) wird ein interner Aufruf auf diese Datei gestartet, deshalb verschlechtern diese Optionen die Server-Performance sehr stark.

Flags

Die Angabe von flags ist optional. Damit kann man das Verhalten der RewriteCond beeinflussen. Erlaubt sind folgende Werte:

Nr. | flag | Alternative | Erklärung
1. | NC | nocase | Bei String-Vergleichen wird nicht mehr zwischen Groß- und Kleinschreibung unterschieden
2. | OR | ornext | Mit diesem Flag wird die aktuelle Bedingung mit einem logischen ODER mit der nächsten Bedingung verknüpft (Standard ist eine UND-Verknüpfung), das heißt, es braucht nur eine der beiden Bedingungen zuzutreffen.

Beachten Sie:

Sie können mehrere Flags verwenden, indem Sie diese mit einem Komma (,) trennen.

RewriteEngine - mod_rewrite ein- und ausschalten

Diese Regel darf an folgenden Stellen der Apache-Konfiguration notiert werden: Serverkonfiguration allgemein, Seite VirtualHost, Seite Directory-Container, .htaccess.

Mit dieser Direktive schalten Sie mod_rewrite ein. Wenn Sie RewriteEngine auf off stellen, können Sie mod_rewrite nicht benutzen.

Beispiel:

RewriteEngine on

Erläuterung:

Mit dieser Zeile wird der Webserver angewiesen, mod_rewrite einzuschalten.

RewriteLog - Log-Datei für mod_rewrite bestimmen

Diese Regel darf an folgenden Stellen der Apache-Konfiguration notiert werden: Serverkonfiguration allgemein, Seite VirtualHost, aber nicht in Seite Directory-Containern und .htaccess.

Mit RewriteLog setzen Sie den Namen der Datei, in die mod_rewrite seine Logmeldungen schreibt. Wenn Dateipfad nicht mit einem "/" beginnt, dann wird die Datei relativ zu der Umgebungsvariable ServerRoot gesucht. Diese Anweisung sollte nur einmal in der Server-Konfiguration notiert werden.

Sicherheitshinweis:

Sorgen Sie dafür, dass das Verzeichnis, in dem die Log-Datei liegt, nur vom Benutzer, der den Server startet, beschrieben werden kann. Die englischsprachige Seite Apache Security Tips geben Ihnen dazu Hinweise.

RewriteLogLevel - Art der Log-Meldungen bestimmen

Diese Regel darf an folgenden Stellen der Apache-Konfiguration notiert werden: Serverkonfiguration allgemein, Seite VirtualHost, aber nicht in Seite Directory-Containern und .htaccess.

Mit dieser Direktive können Sie angeben, welche Aktionen mod_rewrite protokolliert. Erlaubte Werte für Log-Level sind natürliche Zahlen. Standardmäßig ist RewriteLogLevel auf 0 eingestellt, was bewirkt, dass Apache keine Aktionen von mod_rewrite protokolliert. Ein Wert von 1 bedeutet, dass nur sehr signifikante Meldungen protokolliert werden. Je höher der Wert, desto mehr Meldungen werden ins Protokoll aufgenommen.

Beispiel:

RewriteLog "/var/www/mod_rewrite.log"
RewriteLogLevel 2

Erläuterung:

Bei diesem Beispiel wird mod_rewrite angewiesen, Log-Meldungen in die Datei "/var/www/mod_rewrite.log" zu schreiben. Weiterhin wird festgelegt, welche Meldungen protokolliert werden.

Beachten Sie:

Benutzen Sie Werte für Log-Level größer als 2 nur für Debugging-Zwecke, da es den Apache deutlich verlangsamt.

RewriteRule - Umleitungen bestimmen

RewriteRule definiert die eigentliche Umleitung. Sie kann mehrmals vorkommen, dabei ergibt jedes Vorkommnis eine eigene Umleitung. Die Reihenfolge der Umleitungen ist wichtig, da diese in der Reihenfolge ihres Vorkommens angewendet werden.

Erwartet als Parameter:

  1. Ausdruck - beschreibt die URLs, die umgeleitet werden sollen
  2. Umleitung - gibt die Umleitung an

Ausdruck

Ausdruck beschreibt die URLs, die umgeleitet werden. Es ist ein Perl-kompatibler Seite Regulärer Ausdruck (ohne Begrenzerzeichen, '/'). Vor dem Ausdruck kann zusätzlich ein Ausrufezeichen ('!') stehen, um den Regulären Ausdruck zu negieren.

Umleitung

Umleitung ist die URL, auf die umgeleitet wird, wenn der Ausdruck zutrifft. Neben normalem Text können Sie die gleichen Ausdrücke verwenden, die Sie auch in Test-Strings von nach unten RewriteCond-Direktiven benutzen können. Wenn Sie auf Server-Ebene konfigurieren, dann wird die komplette URL ersetzt, auf Verzeichnis-Ebene (in .htaccess bzw. in einem Directory-Container in der zentralen Apache-Konfiguration) wird nur der Pfad ab dem aktuellen Verzeichnis ersetzt. Es werden danach noch alle weiteren RewriteRule-Direktiven abgearbeitet, sodass sich die URL nochmals ändern kann. Wenn Sie für Umleitung den String - angeben, dann wird keine Ersetzung durchgeführt.

Am Ende der RewriteRule können Sie noch optional einige weitere Optionen angeben, welche das Verhalten von mod_rewrite steuern, falls die RewriteRule zutrifft. Diese werden in spitzen Klammern ([ bzw. ]) notiert. Wenn Sie mehrere angeben, trennen Sie diese durch Kommata. Folgende Optionen können Sie angeben:

Nr. | Option | Alternative | Erklärung
1. | redirect | R | Apache wird angewiesen, eine externe Umleitung mit dem Seite HTTP-Statuscode 302 durchzuführen. Wollen Sie einen anderen Statuscode senden, dann geben Sie ihn nach einem Gleichheitszeichen nach diesem Flag an. Es gibt einige vordefinierte Namen für einige Statuscode: temp (302, MOVED TEMPORARILY), permanent (301, MOVED PERMANENTLY) und seeother (303, See Other).
2. | forbidden | F | Sendet sofort den Seite HTTP-Statuscode 403 (FORBIDDEN) an den Browser.
3. | gone | G | Sendet sofort den Seite HTTP-Statuscode 410 (GONE) an den Browser und markiert diese Seite damit als nicht mehr vorhanden..
4. | last | L | Wenn Sie diese Option angeben, wird nach dieser RewriteRule keine weitere mehr ausgeführt.
5. | next | N | Bewirkt, dass die Abarbeitung der RewriteRule-Direktiven abgebrochen und nochmals gestartet wird. Achten Sie darauf, dass Sie mit dieser Regel keine Endlosschleifen erzeugen.
6. | chain | C | Bewirkt, dass die nächste RewriteRule nur ausgewertet wird, falls die aktuelle Regel zutrifft.
7. | type= | T= | Mit dieser Option können Sie einen bestimmten Seite MIME-Typen bestimmen.
8. | nosubreq | NS | Diese Option bewirkt, dass die Regel übersprungen wird, falls der aktuelle Request ein Sub-Request ist.
9. | nocase | NC | Bewirkt, dass bei der Überprüfung auf Gleichheit des Ausdrucks und der URL nicht auf Groß- und Kleinschreibung geachtet wird.
10. | qsappend | QSA | Diese Option müssen Sie angeben, wenn Sie an die Umleitung manuell einen neuen Query-String hängen und den alten dabei nicht komplett ersetzen wollen.
11. | noescape | NE | Standardmäßig werden bestimmte Sonderzeichen von mod_rewrite maskiert. Mit dieser Option schalten Sie dies aus.
12. | skip=N | S=N | Mit dieser Option können Sie die nächsten N RewriteRule-Direktiven überspringen
13. | env=VAR:VAL | E=VAR:VAL | Mit dieser Option können Sie eine Umgebungsvariable erzeugen, hier etwa die Variable VAR mit dem Wert VAL.
14. | cookie=NAME:VAL:domain[:lifetime[:path]] | CO= | Mit dieser Option setzen Sie ein Cookie namens NAME mit dem Wert VAL und Domain als domain. Optional sind die Argumente lifetime (Lebenszeit in Minuten) und path (Pfad des Cookies).
15. | proxy | P | Diese Option sorgt dafür, dass ein Zugriff von dem Apache-Modul mod_proxy aus auf die URL erfolgt. Dazu muss mod_proxy aktiviert und die URL muss valide sein (sie muss unter anderem auf jeden Fall mit http://hostname beginnen).
16. | passthrough | PT | Benutzen Sie diese Option, wenn Sie mehrere URL->Dateinamen-Übersetzer (wie etwa mod_alias und mod_rewrite) zusammen benutzen.

nach oben
weiter | Seite Andere Webserver
zurück | Seite .htaccess - Server-Reaktionen kontrollieren
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von Webserver

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / Webserver / Andere Server

SELFHTML

Andere Webserver
Informationsseite

nach unten IIS - Internet Information Services
nach unten OmniHTTPd/OmniSecure
nach unten Jana-Server
nach unten Tomcat
nach unten

IIS - Internet Information Services

IIS bezeichnet eine Gruppe verschiedener Programme, die auf einem Windows-Rechner (Windows 2000 oder jünger) eingesetzt werden können. Bei einigen Systemen (z.B. Windows 2003 Server) gehört diese Gruppe von Programmen gemeinsam mit dem so genannten Active Directory unmittelbar zum Betriebssystem, bei anderen (Windows 2000, Windows XP, Windows Vista) kann das Programmpaket über die Software-Auswahl in der Systemsteuerung nachinstalliert bzw. aktiviert werden. Es gehört in Windows 2000 und Windows XP zum Lieferumfang, aber nicht unmittelbar zum System, so dass Sie es über die Softwareauswahl in der Systemsteuerung erst auswählen müssen:

Installation IIS 5

In Windows Vista sind IIS bereits vorinstalliert, müssen aber bei Bedarf "eingeschaltet" werden:

Aktivierung IIS 7

Nach einer Installation kann bei älteren Versionen über die Computerverwaltung ein "Snap-In", das einer grafisch aufbereiteten Befehlszeile entspricht, aufgerufen werden, um die eventuell erforderlichen Konfigurationsschritte vorzunehmen. IIS 7 bietet einen "Manager" an:

In diese Dienste kann bei Bedarf ein Mail-Server wie z.B. deutschsprachige Seite Microsoft Exchange Server und/oder ein FTP-Server integriert werden, sodass der mögliche Funktionsumfang weit über das hinausreicht, was ein "Webserver" an Aufgaben zu bewältigen hat.

Als Voreinstellung erwarten IIS eine Seite ASP-Umgebung, bzw. in jüngeren Versionen (IIS6 und höher) eine ASP.NET-Umgebung. Wer CGI- und/oder PHP-Scripts einsetzen oder testen möchte, muss einige etwas umständliche Konfigurationsschritte in Kauf nehmen, es ist jedoch ohne weiteres möglich. Die Unterstützung für einige (nicht alle) Seite SSI-Anweisungen ist von Anfang an vorhanden. Ähnlich wie der Seite Apache sind auch IIS in der Lage, mehrere unterschiedliche Webangebote für unterschiedliche Benutzer zu verwalten, und auch "virtuelle Domains" lassen sich analog zu den virtuellen Hosts des Apache einrichten. Eine sehr umfangreiche, wenn auch stellenweise nicht besonders tiefgründige Dokumentation kann bei Bedarf mitinstalliert werden.

Beachten Sie:

Im Internet werden IIS kaum eingesetzt. Für den "Hausgebrauch" oder in einem kleinen Netzwerk können diese Dienste allerdings genauso sinnvoll oder nützlich sein wie andere Server-Software. Ein Problem kann dadurch entstehen, dass es zwingend erforderlich ist, die Sicherheitseinstellungen des Server-Rechners so stringent wie möglich zu handhaben und die jeweils aktuellen, von Microsoft zur Verfügung gestellten Updates einzuspielen. Dazu kommt, dass es nach wie vor sehr häufig Viren bzw. Würmer im Internet gibt, die sich auf bestimmte "Schwachstellen" der IIS spezialisiert haben. Ein seit langem bekanntes Beispiel dafür ist der Wurm "Nimda", der speziell die IIS sucht und infizieren kann.

Weiterführende Informationen finden Sie bei deutschsprachige Seite Microsoft TechNet sowie auf einer eigens eingerichteten englischsprachige Seite IIS-Website.

OmniHTTPd/OmniSecure

OmniHTTPd ist eine speziell für Windows-Systeme entwickelte Serversoftware, die sich aus nur sehr wenigen Programm- und Bibliotheksdateien zusammensetzt. Damit stellt er für den Einsatz als lokales Prüfinstrument für Scripts eine empfehlenswerte Alternative zum Apache-Webserver dar: er ist sehr schnell und sehr klein. Der Server kann von englischsprachige Seite Omnicron bezogen werden. Sobald er installiert und gestartet ist, erscheint ein kleines Icon in der Taskbar (hier in Windows Vista, hervorgehoben):

OmniHTTPd bietet alle wesentlichen Funktionen an, die man auf dem eigenen Rechner benötigt, um Scripts (PHP und CGI) vor dem Einsatz auf einem öffentlichen Server zu testen. Eingerichtet und gewartet wird er über kleine grafische "Assistenten":

Konfiguration von OmniHTTPd

Neben dem Testen von Scripts und SSI erlaubt OmniHTTPd/OmniSecure auch das Anlegen virtueller Hosts, sodass unterschiedliche Webangebote verwaltet und dargestellt werden können. Er ist ein sehr schneller Dienst, der sich für die wichtigsten Tests, die Sie zuhause eventuell vornehmen möchten, hervorragend eignet. Allerdings erreicht OmniHTTPd/OmniSecure bei weitem nicht den Funktionsumfang, den der Apache aufweist.

Beachten Sie:

Der Name "OmniHTTPd" ist in jüngeren Versionen nicht mehr gebräuchlich. Der Dienst heißt jetzt "OmniSecure". Abhängig davon, welche Windows-Version Sie benutzen, kann es jedoch sein, dass lediglich eine der älteren Versionen mit dem älteren Namen lauffähig ist. Die von älteren Versionen bekannte Einschränkung, daß OmniHTTPd nur ein Jahr lang lauffähig ist und dann durch ein Update ersetzt werden sollte, gilt heute weitgehend nicht mehr. OmniHTTPd ist nicht auf Serversystemen wie Windows 2003 Server einsetzbar, kann aber auf Windows 98, Windows 2000, Windows XP und Windows Vista problemlos zum Einsatz kommen.

Jana-Server

Jana-Server ist eine komplexe, dabei aber immer noch schmale Software, die weit mehr als nur einen Webserver enthält. Der Jana-Server wird besonders von Benutzern geschätzt, die im Umgang mit der englischen Sprache wenig geübt sind - er kann komplett deutschsprachig installiert werden. Die Software wird für den privaten Gebrauch kostenfrei angeboten und kann über deutschsprachige Seite http://www.janaserver.de/start.php bezogen werden. Anders als der Apache ist Jana-Server keine OpenSource-Software, der Quellcode steht also nicht zur Verfügung. Er kann auch kommerziell eingesetzt werden.

Jana-Server kann mit folgenden Funktionen eingesetzt werden:

  • Proxy-Server
  • HTTP-Server
  • FTP-Server
  • News-Server
  • Mail-Server

Bei dieser Funktionsvielfalt ist es selbstverständlich, dass Jana-Server den Anforderungen, die gewöhnlich an einen lokalen Server gestellt werden, genügen kann. Er ist jedoch, ähnlich wie OmniHTTPd, ausdrücklich für den Einsatz auf Windows-Systemen geschrieben, steht also auf anderen Plattformen nicht zur Verfügung. Die Programmverzeichnisse sind ähnlich den Programmverzeichnissen des Apache (unter Windows) aufgebaut und tragen ähnlich lautende Namen. Eine HTML-basierte Dokumentation gehört zum Installationsumfang dazu.

Tomcat

Tomcat ist ein speziell für den Einsatz von Seite JSP konzipierter Server. Er wird von einer Projektgruppe der Apache Software Foundation betreut. Informationen und Download-Verweise finden sich auf der Tomcat-Seite der Apache Software Foundation unter englischsprachige Seite http://jakarta.apache.org/tomcat/. Eine kurze Zusammenstellung von FAQ kann unter englischsprachige Seite http://java.sun.com/products/jsp/tomcat/faq.html nachgelesen werden.

Für den Einsatz von Tomcat ist es zwingend erforderlich, dass auf dem Server-Rechner ein JRE von englischsprachige Seite Sun installiert ist.

Tomcat wird mit Hilfe mehrerer XML-Dateien konfiguriert, deren Syntax auf den ersten Blick etwas verwirrend erscheinen mag. Die Konfiguration lässt sich aber auch mit Hilfe eines zusätzlichen "admin"-Pakets, das eine webbasierte Administration zur Verfügung stellt, durchführen:

Administrationsoberfläche des Tomcat

Standardmäßig wird bei der Installation vorgeschlagen, dass Tomcat den Port 8080 nutzen soll. Sie können diese Einstellung jedoch beliebig ändern. Einige Beispiele für kleine Servlets gehören zum Lieferumfang und können mitinstalliert werden. Sie stellen eine gute Hilfe dar, um sich erst einmal in die Technik der Seite JSP einzuarbeiten.

Obwohl Tomcat ein eigenständiger Server ist, wird oftmals gewünscht, dass er mit einem anderen Webserver gemeinsam zum Einsatz kommt. PHP-Scripts kann Tomcat nicht ausführen lassen, Unterstützung für CGI und SSI lässt sich allerdings aktivieren. Natürlich bietet sich eine Zusammenarbeit mit dem Apache an. Realisiert werden kann eine solche Zusammenarbeit der beiden Server mit so genannten englischsprachige Seite Connectors. Für das Zusammenspiel von Apache und Tomcat gibt es ein eigenständiges kleines englischsprachige Seite HOWTO. Prinzipiell kann Tomcat aber auch gemeinsam mit anderen Webservern zum Einsatz kommen.

Beachten Sie:

Ähnlich wie der Apache ist auch Tomcat sehr vielfältig konfigurierbar. Zahlreiche zusätzliche Softwarepakete können heruntergeladen und eingebunden werden.

nach oben
weiter | Seite HTTP-Status-Codes
zurück | Seite Umleitungen mit mod_rewrite
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von Webserver

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / Webserver / HTTP-Status-Codes

SELFHTML

HTTP-Status-Codes
Informationsseite

nach unten Allgemeines zu HTTP-Status-Codes
nach unten Übersicht der HTTP-Status-Codes
nach unten

Allgemeines zu HTTP-Status-Codes

Wenn ein Web-Browser über das HTTP-Protokoll einen URI aufruft, erhält der Webserver, der für die aufgerufene Domain oder IP-Adresse zuständig ist, die Anfrage. Er ermittelt die gewünschten Daten auf dem Server-Rechner und sendet diese - wieder über das HTTP-Protokoll - an den wartenden Web-Browser. Je nachdem wie die Anforderung des Web-Browsers lautete und welches Ergebnis beim Ermitteln der Daten auf dem Server-Rechner herauskam, schickt der Server in den HTTP-Kopfdaten der Antwort eine bestimmte Zahl an den aufrufenden Browser. Diese Zahl stellt einen Status-Code dar und gibt Auskunft darüber, in welchem Verhältnis das, was der Server an Daten ausliefert, zu der gewünschten Anforderung steht. Auf diese Weise werden Fehlermeldungen übermittelt, aber auch Hinweise wie "die angeforderten Daten sind zugangsgeschützt". Der Browser kann diese Status-Codes auswerten, dem Benutzer darstellen und entsprechend reagieren. Der Webserver schreibt den HTTP-Status-Code der Anfrage außerdem bei entsprechender Konfiguration in seine Log-Dateien.

HTTP-Status-Codes sind für Sie als Web-Anbieter an folgenden Stellen interessant:

  • In den Seite Log-Dateien des Webservers können Sie sich darüber informieren, welche Fehler und Probleme in letzter Zeit auffällig oft auftauchten. Auch die meisten Seite Statistiken zu Web-Projekten schlüsseln die Gesamtzahlen unter anderem nach HTTP-Status-Codes auf. Dabei ist es hilfreich, die einzelnen Status-Codes, ihre Bedeutung und mögliche Ursachen für ihr Vorkommen zu kennen.
  • CGI-Scripts können selbst HTTP-Header erzeugen. Dabei können Sie auch HTTP-Status-Codes notieren, die als Antwort an den aufrufenden Browser gesendet werden sollen. Der Webserver reicht die Angaben dann an den Browser durch. Wie so etwas in einem CGI-Script mit Perl funktioniert, wird im Abschnitt Seite Erweiterte Angaben für HTTP-Header und HTML-Dateikopf (im Zusammenhang mit dem CGI-Modul von Perl) beschrieben.

Die HTTP-Status-Codes gehören zur Spezifikation des HTTP-Protokolls. Zuständig für die Spezifikation ist das W3-Konsortium. Die Spezifikation erfolgt in Form von Seite Requests for Comments (RFCs). Über die folgende Seite des W3-Konsortiums können Sie alle relevanten und aktuellen Informationen rund um die Normierung des HTTP-Protokolls aufrufen:

englischsprachige Seite HTTP - Hypertext Transfer Protocol

Übersicht der HTTP-Status-Codes

Status-Code | zugehörige Meldung | Bedeutung
100 | Continue | Fortfahren. Wird derzeit noch nicht verwendet.
101 | Switching Protocols | Protokoll wechseln. Wird derzeit noch nicht verwendet.
200 | OK | Der Server kann die angeforderten Daten wie gewünscht versenden. Dies ist der Normalfall, wenn keine Probleme auftauchen. Der größere Anteil aller Anfragen an den Webserver sollte mit diesem Status-Code enden - ansonsten stimmt etwas nicht.
201 | Created | Ein Objekt (z.B. eine Datei oder ein Verzeichnis) wurde auf dem Server erfolgreich angelegt. Das kann vorkommen, wenn die Anfrage des Browsers an den Server mit einer der HTTP-Übertragungsmethoden post oder put erfolgte und eine Anweisung zum Erstellen des entsprechenden Objekts enthielt.
202 | Accepted | Der Server hat die Anfrage des Browsers akzeptiert, liefert aber keine Daten als Antwort. Der Server schreibt die Daten statt sie zu senden in eine Datei und teilt in der Meldung mit, wo die Daten später zu finden sein werden. Diese Meldung sagt nichts darüber aus, ob der Server die Anfrage erfolgreich behandeln kann. Er hat sie einfach nur akzeptiert und die Abarbeitung auf einen späteren Zeitpunkt verschoben.
203 | Non-Authoritative Information | Dieser Status-Code sollte von einem Server anstelle von 200 zurückgegeben werden, wenn es sich nicht um den Original-Server handelt, sondern beispielsweise um einen Proxy-Server. Der Web-Browser erfährt auf diese Weise, dass die Daten erfolgreich gesendet werden konnten, aber nicht vom Original-Server kommen und daher keine Garantie auf deren Aktualität besteht.
204 | No Content | Der Server hat die Anfrage erhalten, sendet jedoch keine Daten zurück. Gut verwendbar ist dieser Status-Code bei Verwendung in CGI-Scripts, die zwar etwas auf dem Server erledigen, aber keinen neuen HTML-Code an den aufrufenden Browser senden wollen. Aus Sicht des Anwenders bleibt der alte Bildschirminhalt bestehen.
205 | Reset Content | Der Server hat die Anfrage ausgeführt, muss aber keine Daten zurücksenden. Stattdessen sollte der Browser den Bildschirminhalt, der zu der Anfrage geführt hat, zurücksetzen. Das ist vor allem im Zusammenhang mit serverseitigen Skripten sinnvoll, wenn der Benutzer mehrere Eingaben über das gleiche Formular machen soll, und sich dieses zwischenzeitlich nicht ändert.
206 | Partial Content | Der Client hat nur einen Teil der Daten angefordert und der Server versendet diese wie gewüscht. Mit Angaben zu content-length (z.B.: 1024) und content-range (z.B.: bytes 0-1023/1024) wird angegeben, wie viele Bytes von dem angeforderten Inhalt geliefert werden, und welcher Teil der Gesamtdaten. Das passiert zum Beispiel, wenn ein vorangegangener Download unterbrochen wurde und der Client an der Abbruchstelle erneut mit dem Herunterladen beginnt.
300 | Multiple Choices | Die angeforderten Daten liegen in mehreren verschiedenen Ausführungen vor. Anstelle der Daten werden die verfügbaren URIs und ihre Eigenschaften (zum Beispiel Sprache oder MIME-Typ) als Liste übertragen. Der Web-Browser kann den Anwender anschließend in einem Dialog einen URI auswählen lassen oder die Auswahl automatisch treffen.
301 | Moved Permanently | Die angeforderten Daten befinden sich nicht mehr unter dem URI, sie wurden dauerhaft auf eine andere Adresse verschoben. In der Statusmeldung wird angegeben, unter welchem URI sich die Daten jetzt befinden. Ein Web-Browser, der diese Antwort vom Server erhält, kann beispielsweise gleich die neue Adresse anfordern.
302 | Moved Temporarily | Die angeforderten Daten wurden vorübergehend zu einem anderen URI verschoben. In der Statusmeldung wird angegeben, unter welcher Adresse sich die Daten derzeit befinden. Ein Web-Browser, der diese Antwort erhält, kann beispielsweise gleich die temporär gültige Adresse anfordern.
303 | See Other | Die angeforderten Daten sind unter einem angegebenen URI verfügbar und sollten von dort mit Hilfe der get-Methode angefordert werden. Dieser Status-Code ist für CGI-Scripts gedacht, die mit der post-Methode aufgerufen wurden und den Browser auf eine andere Ressource lenken wollen, die mit der get-Methode angefordert werden soll.
304 | Not Modified | Die angeforderten Daten haben sich seit dem angegebenen Zeitpunkt nicht geändert und werden deshalb nicht gesendet. Dieser Status-Code ist neben dem Code 200 einer der häufigsten in der Praxis. Er tritt auf, wenn ein moderner Webbrowser, der die Daten noch im Cache hat, eine Anfrage an den Server sendet und dabei den Ladezeitpunkt der Daten in seinem Cache übermittelt. Stellt der Server dann fest, dass sich die Daten seit dem angegebenen Zeitpunkt nicht geändert haben, braucht er sie nicht noch einmal zu übermitteln, sondern sendet nur diesen Statuscode und keine Daten. Der Browser holt daraufhin seine alte Version aus dem Cache.
305 | Use Proxy | Die angeforderten Daten sollen statt von diesem Server von dem in der Statusmeldung angegebenen Proxy-Server angefordert werden.
306 | [Unused] | Reserviert. Wird derzeit aber nicht verwendet.
307 | Temporary Redirect | Wie Status-Code 302. Gedacht für Fehlreaktionen einiger Browser auf 302.
400 | Bad Request | Die Anfrage enthält Syntaxfehler. Der Server kann die Anfrage deshalb nicht bearbeiten. Das kann beispielsweise vorkommen, wenn der verwendete Browser einen Programmierfehler aufweist und ungültige Anfragen sendet, oder ein Mensch versucht, händisch (also etwa mit telnet) mit dem Server zu kommunizieren und dabei einen Fehler macht.
401 | Unauthorized | Die angeforderten Daten sind zugangsgeschützt. Der Server kann die Daten nur senden, wenn eine gültige Zugangskennung, bestehend aus Benutzername und Passwort, bei der Anfrage mit gesendet wird. Das passiert in der Praxis immer dann, wenn eine Adresse aufgerufen wird, die z.B. durch Seite htaccess zugangsgeschützt ist. Der Web-Browser zeigt dann, nachdem er diesen Status-Code erhalten hat, einen Dialog zum Eingeben von Benutzername und Kennwort an. Mit den eingegebenen Daten startet er dann eine neue Anfrage an den Server.
402 | Payment Required | Die angeforderten Daten sind kostenpflichtig. Der Server kann die Daten nur senden, wenn eine Bestätigung der Zahlung für die Daten bei der Anfrage mitgesendet wird. Derzeit wird dies aufgrund fehlender einheitlicher technischer Grundlagen für Micropayment noch nicht verwendet.
403 | Forbidden | Der Server möchte die angeforderten Daten nicht herausgeben. Das passiert zum Beispiel wenn der Zugriff auf die Ressource von dem IP-Adress-Bereich, aus dem die Anfrage kommt, in der Serverkonfiguration verboten wurde, die Ressource ganz und gar gesperrt wurde oder man versucht, ein Verzeichnislisting zu bekommen, dies jedoch in der Serverkonfiguration abgeschaltet wurde. Dies ist ein anderer Status als 401! Weder die Eingabe eines Passwortes noch das Wiederholen der Anfrage wird etwas bewirken.
404 | Not Found | Der angeforderte URI existiert nicht. Dies ist neben den Status-Codes 200 und 304 einer der häufigsten Fälle in der Praxis. Er tritt immer dann ein, wenn ein Verweis auf eine nicht oder nicht mehr existierende Adresse auf dem Server führt, oder wenn der Anwender versucht hat, eine Adresse auf dem Server durch händisches Eintippen in der Adresszeile des Browsers aufzurufen, diese Adresse aber nicht existiert.
405 | Method Not Allowed | Die angegebene Übertragungsmethode ist auf dem Server nicht erlaubt. Die Daten werden deshalb nicht übertragen. Das kann beispielsweise vorkommen, wenn in der Konfiguration des Webservers außer der get-Methode keine weitere Methode erlaubt ist, ein HTML-Formular aber einen CGI-Aufruf mit der post-Methode enthält.
406 | Not Acceptable | Die Anfrage ist in dieser Form nicht akzeptabel. Die Daten werden deshalb nicht übertragen.
407 | Proxy Authentication Required | Die Anfrage soll über einen Proxy-Server geleitet werden. Der Proxy-Server ist aber zugangsgeschützt und leitet Anfragen erst nach dem Erhalt einer gültigen Zugangskennung weiter, die in der Regel aus Benutzername und Passwort besteht. Beim Erhalt dieses Status-Codes verhält sich der Client ähnlich wie beim Status-Code 401, mit dem Unterschied, dass die Authentifizierung für den Proxy-Server gilt und nicht für den Zielserver. Das wird in der Praxis zum Beispiel in größeren Installationen wie Firmen oder Universitäten eingesetzt, wo der Zugriff auf das Intranet frei ist, nach aussen gehende Anfragen aber bestimmte Berechtigungen benötigen und zwangsweise durch einen Proxy-Server geleitet werden.
408 | Request Timeout | Der Server hat eine erwartete Anfrage nicht innerhalb des dafür festgelegten Maximalzeitraums erhalten. Die Verbindung zum anfragenden Browser wird deshalb abgebaut. Angeforderte Daten werden nicht übertragen.
409 | Conflict | Der Server kann die angeforderten Daten nicht senden, weil ein Konflikt mit einem anderen Prozess aufgetaucht ist. Das kann beispielsweise passieren, wenn ein anderer Prozess eine angeforderte Datei gerade mit einem exklusiven File-Locking (keinerlei Dateizugriff für andere Prozesse erlaubt) versehen hat.
410 | Gone | Die angeforderten Daten wurden zu einem anderen URI verschoben. Dem Server ist aber nicht bekannt, wohin. Deshalb kann er sie nicht senden - andernfalls würde ein Status-Code 301 oder 302 gesendet worden.
411 | Length Required | Die Daten werden nicht gesendet. Sie können nur gesendet werden, wenn die Anfrage eine Angabe zu content-length enthält. Der Browser kann versuchen, die Anfrage neu zu formulieren und dabei die Länge der an den Server gesendeten Anfragedaten mit zu übermitteln.
412 | Precondition Failed | Eine oder mehrere Bedingungen, die bei der Anfrage gestellt wurden, treffen nicht zu. Die angeforderten Daten werden deshalb nicht übertragen.
413 | Request Entity Too Large | Der Server kann die Anfrage nicht bearbeiten, weil diese zu viele Zeichen enthält. Die angeforderten Daten werden deshalb nicht übertragen.
414 | Request-URL Too Long | Der Server kann die Anfrage nicht bearbeiten, weil die angeforderte Adresse zu viele Zeichen enthält. Die angeforderten Daten werden deshalb nicht übertragen.
415 | Unsupported Media Type | Der Server will die Anfrage nicht bearbeiten, weil der Seite MIME-Typ, den der Client in der Anfrage verwendet hat, für diese Anfrage nicht unterstützt wird. Die angeforderten Daten werden deshalb nicht übertragen.
416 | Requested Range Not Satisfiable | Die Anfrage enthält Angaben, welcher Byte-Bereich von dem angeforderten URI übertragen werden soll. Sowohl der Anfangswert als auch der Endwert des angegebenen Bereichs liegen außerhalb des verfügbaren Byte-Bereichs, z.B. wenn ein Byte-Bereich von 1000 bis 2000 angegeben wird, die Ressource aber nur 500 Byte hat. Die angeforderten Daten werden deshalb nicht übertragen.
417 | Expectation Failed | Die Anfrage enthält im expect-Feld bestimmte Wünsche, die der Server nicht erfüllen kann. Die angeforderten Daten werden deshalb nicht übertragen.
500 | Internal Server Error | Der Server kann die angeforderten Daten nicht senden, weil auf dem Server ein Fehler aufgetreten ist. Beispielsweise konnte das aufgerufene CGI-Script nicht gestartet werden.
501 | Not Implemented | Die Anfrage enthält Anforderungen, die der Server nicht bearbeiten kann, weil die Voraussetzungen dazu nicht implementiert sind. Die angeforderten Daten können deshalb nicht gesendet werden.
502 | Bad Gateway | Zum Bearbeiten der Anfrage musste der Server einen anderen Server aufrufen, erhielt dabei jedoch eine Fehlermeldung. Die angeforderten Daten können deshalb nicht gesendet werden.
503 | Service Unavailable | Der Server kann die Anfrage wegen Überlastung nicht bearbeiten. Die angeforderten Daten können deshalb nicht gesendet werden. In der Statusmeldung kann stehen, wann die Anfrage frühestens wieder bearbeitet werden kann. Im Gegensatz zum Status-Code 202 verarbeitet der Server die Daten nicht, sobald er wieder Kapazitäten hat.
504 | Gateway Timeout | Zum Bearbeiten der Anfrage musste der Server einen anderen Server aufrufen, erhielt dabei jedoch nach einem festgelegten Maximalzeitraum keine Antwort. Die angeforderten Daten können deshalb nicht gesendet werden.
505 | HTTP Version Not Supported | Der Server unterstützt die im HTTP-Header der Anfrage angegebene HTTP-Version nicht. Die angeforderten Daten werden deshalb nicht gesendet.

nach oben
weiter | Seite CGI und HTML
zurück | Seite Andere Webserver
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von Webserver

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / CGI

SELFHTML

CGI
Kapitelseite

Sinnvolle Vorkenntnisse zum Verständnis: Kapitel HTML.
Dieser Abschnitt behandelt aus Sicht eines normalen PC-Benutzers, was erforderlich ist, um CGI-Scripts lokal am eigenen Rechner zum Laufen zu bringen, und was zu beachten ist, um CGI-Scripts auf einem "richtigen" Web-Server zum Laufen zu bringen. Ferner behandelt dieser Abschnitt wichtige Zusammenhänge, die Sie zum Verständnis der Materie benötigen.
Der Abschnitt besteht aus folgenden Seiten:

Seite CGI und HTML
Seite CGI-Scripts auf öffentlichem Webserver installieren
Seite CGI-Umgebungsvariablen
Seite HTML-Formulare und CGI

nach oben

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / CGI / CGI und HTML

SELFHTML

CGI und HTML
Informationsseite

nach unten Die CGI-Schnittstelle
nach unten CGI-Aufrufe aus HTML und HTML-Ausgabe über CGI
nach unten Beispiel für die Wechselwirkung zwischen HTML und CGI
nach unten

Die CGI-Schnittstelle

Die Seite CGI-Schnittstelle (Common Gateway Interface - Allgemeine Vermittlungsrechner-Schnittstelle) bietet eine Möglichkeit, Programme oder Scripts im Web bereitzustellen, die von HTML-Dateien aus aufgerufen werden und die selbst HTML-Code erzeugen und an einen Web-Browser senden können. Traditionell ist Seite Perl die Programmiersprache, die zum Erstellen von CGI-Scripts eingesetzt wird, es gibt aber auch eine ganze Reihe weiterer möglicher und effektiver Technologien.

Wenn Sie in einer anderen Programmiersprache als Perl, z.B. in C, Pascal oder Visual Basic, bereits viel Erfahrung haben, können Sie auch diese Sprachen für CGI-Programme verwenden. Das Problem bei diesen Sprachen ist, dass der damit erstellte Code erst ausführbar ist, nachdem er für die Betriebssystemumgebung, unter der er ausführbar sein soll, compiliert und gelinkt wurde. Wenn Sie beispielsweise ein C-Programm schreiben und dieses Programm als CGI-Programm im Web auf einem Server-Rechner mit Unix-Betriebssystem zum Einsatz bringen wollen, muss das Programm unter Unix compiliert werden. Ein C-Compiler, den Sie vielleicht auf Ihrem DOS-/Windows-System haben, nutzt Ihnen da nichts.

CGI-Aufrufe aus HTML und HTML-Ausgabe über CGI

HTML und CGI "kommunizieren" in beide Richtungen: es ist einerseits möglich, aus einer HTML-Datei, die gerade am Bildschirm angezeigt wird, ein CGI-Script aufzurufen; andererseits kann ein CGI-Script HTML-Code an den Web-Browser übertragen, den dieser dann am Bildschirm ausgibt.

Ein CGI-Script kann Daten verarbeiten, die von einer HTML-Datei aus beim Aufruf übergeben wurden. Zum Beispiel kann ein CGI-Script eine Datenbank durchsuchen, wenn der Anwender einen Begriff, nach dem gesucht werden soll, in einem Formular angegeben hat. Die Ergebnisse einer Datenverarbeitung kann ein CGI-Script dem Web-Server übergeben, der sie dann in Form von HTML-Code an den aufrufenden Web-Browser zurücksendet. So kann ein Script, das eine Datenbank nach Begriffen durchsucht, zum Beispiel die Suchtreffer eines Suchvorgangs in Form einer dynamisch generierten HTML-Datei an den Web-Browser ausliefern.

CGI-Scripts können auch Daten auf dem Server speichern und zu einem späteren Zeitpunkt auslesen. Auf diesem Prinzip basieren beispielsweise Gästebücher oder Nachrichtenforen (Bulletin-Boards). Ein Anwender kann in einer HTML-Datei in einem Formular einen Beitrag eingeben. Beim Absenden des Formulars wird ein CGI-Script aufgerufen, das den Beitrag in einer Datei speichert. Ein zweites CGI-Script oder ein anderer Aufruf desselben CGI-Scripts kann anschließend HTML-Code mit allen gespeicherten Beiträgen zurückgeben.

Ein CGI-Script kann aus einer HTML-Datei heraus auf verschiedene Arten aufgerufen werden:

  • über ein Kapitel Formular. Dabei steht im einleitenden <form>-Tag der Aufruf des CGI-Scripts (Beispiel: <form action="/cgi-bin/guestbook.pl" method="get">). Der Aufruf erfolgt nach dem Absenden des Formulars. Die vom Anwender eingegebenen oder ausgewählten Daten stehen dem CGI-Script zur Verarbeitung zur Verfügung. Auf diese Weise funktionieren etwa Suchdienste, Gästebücher oder elektronische Einkaufskörbe.
  • über Kapitel Verweise. Es genügt, als URI des Verweisziels das ausführbare CGI-Script anzugeben (Beispiel: <a href="/cgi-bin/statistik.pl">Tagesstatistik aufrufen</a>). Dies ist sinnvoll für CGI-Scripts, die keinen "Input" vom Anwender benötigen, sondern lediglich feste Datenausgaben erzeugen, zum Beispiel für ein CGI-Script, das aktuelle Zugriffsstatistiken für Web-Seiten ausgibt.
  • über eine Kapitel Grafikreferenz. Auch dabei genügt es, als URI in der src-Angabe des <img>-Tags das ausführbare CGI-Script anzugeben (Beispiel: <img src="/cgi-bin/counter.pl">). Dabei muss das CGI-Script allerdings eine Grafikdatei im GIF- oder JPEG-Format an den Web-Browser zurücksenden. Die meisten grafischen Zugriffszähler basieren auf diesem Prinzip.
  • über eine Seite Server Side Include Anweisung in einer HTML-Datei, z.B. mit der Anweisung <!--#exec cgi="/cgi-bin/counter.pl" -->. Das ist sehr praktisch, um mit Hilfe eines CGI-Scripts dynamische Information in Textform in eine HTML-Datei einzubinden. Diese Form ist zum Beispiel interessant für textbasierte Zugriffszähler.
  • über Seite automatisches Laden des ausführbaren CGI-Scripts/CGI-Programms. Dazu geben Sie in dem <meta>-Tag einfach anstelle einer anderen HTML-Datei die Adresse des ausführbaren CGI-Scripts an (Beispiel: <meta http-equiv="refresh" content="0; URL=/cgi-bin/welcome.pl">).

Beispiel für die Wechselwirkung zwischen HTML und CGI

Das folgende Beispiel erzeugt einen einfachen CGI-Vorgang, der die Wechselwirkung zwischen HTML und CGI verdeutlicht: in einer HTML-Datei kann der Anwender in einem Formular seinen Namen und einen Kommentartext eingeben. Wenn er das Formular absendet, wird ein CGI-Programm comments.pl aufgerufen. Dieses Script ist in Perl geschrieben. Es liest die ankommenden Formulardaten aus, splittet sie in ihre Bestandteile auf und erzeugt eine vollständige HTML-Datei, in der es die eingelesenen Daten ausgibt. Der Web-Browser zeigt diesen von comments.pl generierten HTML-Code am Bildschirm an. Studieren Sie das Beispiel in Ruhe und verzweifeln Sie nicht an dem Perl-Programmcode (es geht nämlich auch einfacher als in diesem Beispiel gezeigt, das Beispiel dient nur dazu, zu zeigen, wie das CGI-Script an die Formulardaten kommt)!

Beispiel: HTML-Datei mit CGI-Aufruf

Beispiel-Seite Anzeigebeispiel: So sieht's aus (beim Absenden des Formulars ist eine Internet-Verbindung erforderlich)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kommentarseite</title>
</head>
<body bgcolor="#E0E0E0">
<h1>Ihr Kommentar</h1>
<form action="http://de.selfhtml.org/cgi-bin/comments.pl" method="post">
<p>Name:<br><input type="text" name="AnwenderName" size="40" maxlength="40"></p>
<p>Text:<br><textarea rows="5" cols="50" name="Kommentartext"></textarea></p>
<p><input type="submit" value="Absenden"></p>
</form>
</body>
</html>

Beispiel: CGI-Script comments.pl mit HTML-Ausgabe

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

read(STDIN, my $Daten, $ENV{'CONTENT_LENGTH'});
my @Formularfelder = split(/&/, $Daten);
my ($Feld, $Name, $Wert);
my %Formular;
foreach $Feld (@Formularfelder) {
  (my $Name, my $Wert) = split(/=/, $Feld);
  $Wert =~ tr/+/ /;
  $Wert =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
  $Wert =~ s/</&lt;/g;
  $Wert =~ s/>/&gt;/g;
  $Formular{$Name} = $Wert;
 }
print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">', "\n";
print "<html><head><title>CGI-Feedback</title></head>\n";
print "<body><h1>CGI-Feedback vom Programm <i>comments.pl</i></h1>\n";
print "<p><b>Name:</b> $Formular{AnwenderName}</p>\n";
print "<p><b>Kommentartext:</b> $Formular{Kommentartext}</p>\n";
print "</body></html>\n";

Erläuterung:

In der HTML-Datei wird ein Formular mit zwei Eingabefeldern definiert. Das erste Feld (<input size="40" maxlength="40" name="AnwenderName">) ist ein einzeiliges Eingabefeld, in dem der Anwender seinen Namen eingeben soll. Das zweite Feld (<textarea rows="5" cols="50" name="Kommentartext"></textarea>) ist ein mehrzeiliger Eingabebereich, in dem der Anwender einen beliebigen Text eingeben kann. Durch Klicken auf den Absendebutton (<input type="submit" value="Absenden">) wird das Formular abgesendet. Was mit den Formulardaten geschehen soll, ist im einleitenden Formular-Tag angegeben: mit der Angabe action="/cgi-bin/comments.pl" wird ein CGI-Script aufgerufen, das die abgesendeten Formulardaten verarbeiten soll. Die Daten werden dem CGI-Script mit method="post" übergeben. Das bedeutet, das Script bekommt die Daten von der Standardeingabe als Parameter übergeben. Das ist genau so, als ob Sie ein Programm auf Ihrem Rechner mit einem Parameter, etwa dem Namen einer zu öffnenden Datei, aufrufen.

Mit der Anweisung read(STDIN, my $Daten, $ENV{'CONTENT_LENGTH'}); werden im Perl-Script comments.pl, das im CGI-Verzeichnis liegt, die Daten der Standardeingabe ausgelesen.
Mit der Anweisung @Formularfelder = split(/&/, $Daten); splittet das Script die ausgelesenen Daten nach Formularfeldern getrennt in einzelne Elemente auf. Innerhalb der darauffolgenden foreach-Schleife bearbeitet das Script die Daten. Die ziemlich kryptisch anmutenden Befehle dienen dazu, die übergebenen Daten in lesbaren Text umzuwandeln. Denn die Daten, die das Script empfangen hat, sind nach einer bestimmten Konvention kodiert, die mit dem MIME-Typ application/x-www-form-urlencoded gekennzeichnet wird. In diesem Kodierungstyp werden Leerzeichen und Satz- sowie Sonderzeichen durch hexadezimale Umschreibungen dargestellt (siehe auch Seite Datenstrom bei Übertragung von Formulardaten.

Nach der Dekodierungsarbeit beginnt das Script mit dem Erzeugen der HTML-Datei, die es an den Web-Browser zurücksendet. Dazu dienen die print-Anweisungen, die eine normale HTML-Datei konstruieren. Im Beispiel gibt das Perl-Script die Inhalte der beiden Formularfelder HTML-formatiert im Browser aus.

Aus Sicht des Anwenders verschwindet nun die HTML-Datei mit dem Eingabeformular vom Bildschirm. Stattdessen baut der Web-Browser eine neue Seite auf, die den von comments.pl erzeugten HTML-Code enthält.

Beachten Sie:

Das obige Beispiel ist lediglich zur Veranschaulichung der Wechselbeziehung zwischen HTML und CGI gedacht. Wenn Sie sich bislang noch nie mit Perl beschäftigt haben und Ihnen das Perl-Script völlig unverständlich vorkommt, ist das ganz normal. Perl ist eine mächtige, aber ziemlich eigenwillige Programmiersprache. Es gibt auch Techniken wie das Seite CGI-Modul, das die Programmierung von CGI-Scripts in Perl erleichtert.

nach oben
weiter | Seite CGI-Scripts auf öffentlichem Webserver installieren
zurück | Seite HTTP-Status-Codes
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von CGI

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / CGI / CGI-Scripts auf öffentlichem Webserver installieren

SELFHTML

CGI-Scripts auf öffentlichem Webserver installieren
Informationsseite

nach unten CGI-Verzeichnis mit FTP-Zugriff verwalten
nach unten Tipps für die Praxis
nach unten Probleme bei der Ausführung von CGI-Scripts auf dem Server
nach unten

CGI-Verzeichnis mit FTP-Zugriff verwalten

Wenn Sie nicht gerade einen eigenen öffentlichen Webserver betreiben, den Sie direkt an der Konsole bedienen können, sind Sie darauf angewiesen, Ihre Daten auf dem Server-Rechner "per Fernbedienung" zu verwalten. Normalerweise geschieht das heutzutage mit Hilfe des FTP-Protokolls. Für die FTP-Verwaltung von eigenen Daten auf einem Server-Rechner sollten Sie ein gutes FTP-Programm besitzen. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie eine Produktübersicht mit Links zu FTP-Programmen:

Online-Seite SELFHTML-Linkverzeichnis: FTP-Programme

CGI-Scripts können Sie mit Hilfe eines FTP-Programms in das dafür vorgesehene CGI-Verzeichnis hochladen. Meistens hat dieses Verzeichnis einen entsprechenden Namen, z.B. cgi-bin. Die Server-Administration oder der Provider muss Ihnen ein solches Verzeichnis eingerichtet haben. Das bedeutet, auf dem öffentlichen Server-Rechner muss in den Seite Einstellungen des Webservers ein solches Verzeichnis angegeben sein, und Ihnen muss der Zugriff darauf erlaubt sein. Fragen Sie im Zweifelsfall die Server-Administration oder den Provider danach! (Allgemeines zu diesem Thema finden Sie auch im Abschnitt Seite Web-Projekte publizieren).

Beim Hochladen von CGI-Scripts oder CGI-Programmen in das CGI-Verzeichnis müssen Sie folgendes beachten:

  • Perl-Scripts müssen immer im ASCII-Modus übertragen werden. Achten Sie vor dem Hochladen von Perl-Dateien darauf, dass in Ihrem FTP-Programm der ASCII-Modus als Übertragungsmodus eingestellt ist.
  • Kompilierte und gelinkte Programme müssen dagegen immer im Binärmodus übertragen werden. Achten Sie im FTP-Programm darauf, dass der Binärmodus eingestellt ist. Beachten Sie bei kompilierten und gelinkten Programmen auch, dass diese auf dem Server-Rechner nur ausführbar sind, wenn sie für das Betriebssystem des Server-Rechners kompiliert und gelinkt wurden. So hat es keinen Sinn, wenn Sie ein unter DOS/Windows zu einer EXE-Datei kompiliertes C-Programm in das CGI-Verzeichnis eines Unix-Rechners hochladen.
  • Einige Webserver sind so eingerichtet, dass CGI-Scripts die Dateinamenendung .cgi erhalten müssen. Fragen Sie gegebenenfalls Ihren Provider danach! Wenn dies bei Ihnen der Fall ist, benennen Sie beispielsweise ein Perl-Script namens counter.pl einfach in counter.cgi um.
  • Wenn der Server-Rechner unter Unix (z.B. Linux) läuft, müssen Sie außerdem noch angeben, von wem die Programmdatei bzw. die Scriptdatei ausgeführt werden darf. Damit alle Besucher Ihrer Web-Seiten Ihr CGI-Script oder CGI-Programm ausführen können, müssen Sie das Lese- und Ausführrecht "für alle" einstellen. Dies geschieht mit dem Unix-Befehl chmod 755 datei.ext. Wenn Sie beispielsweise ein Perl-Script namens counter.pl hochladen, müssen Sie es mit chmod 755 counter.pl allgemein ausführbar machen. Lesen Sie im Zweifelsfall in der Dokumentation Ihres FTP-Programms nach, wie Sie damit die Zugriffsrechte für Dateien auf dem fernen Rechner einstellen können.

Tipps für die Praxis

Die folgenden Hinweise und organisatorischen Überlegungen sollten Sie beachten:

  • Testen Sie Ihre CGI-Scripts bzw. CGI-Programme vor dem öffentlichen Einsatz im WWW. Am besten tun Sie das offline und in aller Ruhe an Ihrem lokalen Rechner. Dazu müssen Sie sich einen eigenen Seite lokalen Webserver installieren. Wenn Sie Perl-Scripts einsetzen wollen, müssen Sie außerdem Perl lokal installieren.
  • Rufen Sie neu ins WWW hochgeladene CGI-Scripts/CGI-Programme nicht gleich von einer viel besuchten Web-Seite aus auf, sondern laden Sie erst eine Test-HTML-Datei mit einem Aufruf des CGI-Programms hoch. So können Sie auch online erst einmal testen, ob alles einwandfrei funktioniert. Wenn es sich um wichtige Anwendungen wie elektronische Einkaufskörbe usw. handelt, sollten Sie das Script in so einer Testumgebung von verschiedenen Personen testen lassen, bevor Sie es öffentlich zur Verfügung stellen.
  • Die meisten CGI-Scripts speichern Daten in Dateien und/oder lesen diese Dateien aus. Wenn es sich um eine einzige Datendatei handelt, spricht nichts dagegen, diese im CGI-Verzeichnis abzulegen. Bei einem einfachem Seitenzugriffszähler, der mit Hilfe eines Perl-Scripts namens counter.pl realisiert wird, ist es beispielsweise sinnvoll, den Zählerstand in einer Datei counter.dat zu speichern und diese ebenso wie die Perl-Datei direkt im CGI-Verzeichnis abzulegen. Wenn ein CGI-Script/CGI-Programm jedoch mehrere Dateien verwaltet, ist es sinnvoll, diese in einem eigenen Verzeichnis abzulegen. Dazu können Sie z.B. unterhalb des CGI-Verzeichnisses Unterverzeichnisse anlegen. So könnte etwa ein CGI-basiertes Nachrichtenforum (Bulletin-Board) namens bulletin.pl seine verschiedenen Konfigurations- und aktuellen Datendateien in einem entsprechenden Unterverzeichnis bulletin haben.

Probleme bei der Ausführung von CGI-Scripts auf dem Server

Es gibt viele Gründe, warum CGI-Scripts auf öffentlichen Webservern manchmal nicht oder nicht sofort funktionieren. Die folgende Checkliste kann helfen, einige typische Fehler zu vermeiden:

  • Falls Sie beim Aufruf des CGI-Scripts einen Fehler mit der Nummer 500 (Internal Server Error) erhalten, kann dies auf einen Syntaxfehler im Perl-Script hinweisen. Notieren Sie dazu im Perl-Script vor anderen konkreten Anweisungen zunächst folgendes :
    use CGI::Carp qw(fatalsToBrowser);
    Dadurch erreichen Sie, dass Fehlermeldungen des Perl-Interpreters direkt im Browser-Fenster erscheinen. Falls es noch Fehler im Perl-Script gibt, haben Sie es damit leichter, die Fehlerursache zu finden. Der Fehler mit der Nummer 500 kann aber auch andere Ursachen haben. Kontrollieren Sie z.B., ob das Perl-Script auch wirklich im ASCII-Modus mit FTP zum Server übertragen wurde. Stellen Sie sicher, dass Sie in dem Perl-Script keine Anweisungen stehen haben, die auf dem Server-Rechner nicht funktionieren (z.B. Aufruf betriebssystemspezifischer Funktionen, Verwendung spezieller Perl-Module, die nicht zum Standard gehören und auf dem Server nicht installiert sind usw.). Überprüfen Sie, ob in der ersten Zeile des Perl-Scripts der richtige Pfad zum Perl-Interpreter angegeben ist.
    Wenn Sie Zugriff auf die Error-Log-Datei Ihres Webservers haben, ist es auf jeden Fall empfehlenswert, dort nachzuschauen. Im Error-Log werden alle Fehler, die während des Server-Betriebs aufgetreten sind, mitgeschrieben. So haben Sie die Möglichkeit, im Zweifelsfall die genaue Fehlerursache zu lokalisieren.
  • Falls Sie beim Aufruf des CGI-Scripts einen Fehler mit der Nummer 404 (Document not found) erhalten, überprüfen Sie Groß- und Kleinschreibung von Dateinamen auf dem Server, wenn der Server-Rechner unter einem Unix-Betriebssystem läuft. Wenn Sie in einem HTML-Formular beispielsweise notiert haben:
    <form action="/cgi-bin/auswert.cgi">,
    dann muss die Datei im CGI-Verzeichnis auch tatsächlich auswert.cgi heißen und nicht etwa Auswert.cgi.
  • Falls Sie beim Aufruf des CGI-Scripts einen Fehler mit der Nummer 403 (Forbidden) erhalten, überprüfen Sie, ob das Script, falls der Webserver unter einem Unix-Betriebssystem läuft, mindestens die Rechte 755 hat. Ändern Sie die Rechte gegebenenfalls mit dem chmod-Befehl im FTP-Programm.
  • Falls Sie beim Aufruf des CGI-Scripts eine Fehlermeldung Premature end of script headers erhalten, überprüfen Sie im Quellcode des Perl-Scripts die Ausgaben, die das Script senden soll. Es muss irgendetwas ausgeben, und zu Beginn dieser Ausgaben muss ein gültiger HTTP-Header notiert sein. Typischerweise geschieht das bei HTML-Ausgaben durch einen Befehl wie:
    print "Content-type: text/html\n\n";.
nach oben
weiter | Seite CGI-Umgebungsvariablen
zurück | Seite CGI und HTML
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von CGI

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / CGI / CGI-Umgebungsvariablen

SELFHTML

CGI-Umgebungsvariablen
Informationsseite

nach unten Allgemeines zu CGI-Umgebungsvariablen
nach unten Übersicht bekannter CGI-Umgebungsvariablen
nach unten

Allgemeines zu CGI-Umgebungsvariablen

Zur so genannten "CGI-Schnittstelle" gehören auch die CGI-Umgebungsvariablen. Ein installierter Seite Webserver stellt solche Variablen auf Betriebssystemebene zur Verfügung. Bei jedem Aufruf eines CGI-Scripts füllt er einige dieser Variablen mit Informationen. Das CGI-Script kann den Inhalt dieser Variablen auslesen und für eigene Zwecke nutzen. Das CGI-Script kann einige dieser Variablen auch selbst mit Inhalt füllen oder einen dort gespeicherten Inhalt ändern. CGI-Umgebungsvariablen existieren unabhängig von den Variablen, die Sie in einem CGI-Script selbst definieren können.

In CGI-Umgebungsvariablen ist während der Ausführung eines CGI-Scripts beispielsweise der Namen des Server-Rechners gespeichert oder Information zum verwendeten Browser des Anwenders, der den Aufruf des CGI-Programms verursacht hat. Wenn zum Aufruf des CGI-Scripts aus einem Kapitel Formular die GET-Methode verwendet wurde, stehen die Daten, die der Anwender in das Formular eingegeben hat, in einer CGI-Umgebungsvariable (siehe auch den Abschnitt Seite Formulardaten übertragen mit GET oder POST).

Um CGI-Umgebungsvariablen aus einem CGI-Programm heraus zu nutzen, müssen Sie in der verwendeten Programmiersprache die Techniken zum Auslesen von Umgebungsvariablen einsetzen. In Perl können Sie beispielsweise mit einer Anweisung wie print $ENV{'SERVER_NAME'}; den Hostnamen des Servers ausgeben. Perl stellt nämlich alle verfügbaren Umgebungsvariablen in einem vordefinierten Seite Hash namens %ENV; zur Verfügung.

Um herauszufinden, welche Umgebungsvariablen auf Ihrem Webserver verfügbar sind, können Sie das folgende kleine Perl-Script verwenden. Den Quellcode können Sie mit einem Texteditor im eingestellten CGI-Verzeichnis beispielsweise unter dem Namen env.pl abspeichern. Angenommen, Vorausgesetzt, Ihr CGI-Verzeichnis heißt wie üblich cgi-bin und der Webserver ist gestartet, dann können Sie das Script im Browser mit der Adresse http://127.0.0.1/cgi-bin/env.pl oder auch mit der Adresse http://localhost/cgi-bin/env.pl aufrufen.

Beispiel: Datei env.pl

#!/usr/bin/perl -w

use strict;
use CGI::Carp qw(fatalsToBrowser);

print "Content-type: text/html\n\n";
print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";
print "<html><head><title>Umgebungsvariablen</title></head><body>\n";
print "<h1>Umgebungsvariablen:</h1>\n";
print "<table border=\"1\">\n";
print "<tr><th align=\"left\" bgcolor=\"#E0E0E0\">Variablenname</th>",
      "<th align=\"left\" bgcolor=\"#E0E0E0\">Wert</th></tr>\n";
foreach(keys(%ENV)) {
  print "<tr><td><b>$_</b></td><td><tt>$ENV{$_}</tt></td></tr>\n";
}
print "<tr><th align=\"left\" bgcolor=\"#E0E0E0\" colspan=\"2\">insgesamt: ",
      scalar keys(%ENV)," Umgebungsvariablen</th></tr>\n";
print "</table>\n";
print "</body></html>\n";

Erläuterung:

Das Script erzeugt eine HTML-Tabelle mit allen auf dem Server verfügbaren Umgebungsvariablen. Auf die Perl-Anweisungen wird an dieser Stelle noch nicht näher eingegangen. Nur die erste Zeile des Scripts (die so genannte shebang) müssen Sie möglicherweise anpassen. Dort, wo im Beispiel #!/usr/bin/perl steht, müssen Sie, falls Sie beim Aufruf eine Fehlermeldung wie Internal Server Error erhalten, den kompletten Pfad zur ausführbaren Datei, also zum Perl-Interpreter, angeben. Wenn Sie den Perl-Interpreter unter MS Windows beispielsweise unter c:\programme\perl installiert haben, lautet Ihre erste Script-Zeile also:
#!c:/programme/perl/bin/perl.
Die Dateinamen-Erweiterung .exe können Sie ohne weiteres weglassen.

Übersicht bekannter CGI-Umgebungsvariablen

Die folgende Tabelle ist nach Variablennamen alphabetisch sortiert.

Variablenname | Erläuterung
CONTENT_LENGTH | Enthält die Anzahl der Zeichen, die beim Aufruf des CGI-Scripts über die POST-Methode übergeben wurden. Wenn das CGI-Script beispielsweise beim Absenden eines HTML-Formulars aufgerufen wurde und dort als Übertragungsmethode POST angegeben ist, steht in dieser Umgebungsvariablen, wie viele Zeichen das Script von der Standardeingabe lesen muss, um die übermittelten Formulardaten vollständig einzulesen.
CONTENT_TYPE | Enthält beim Aufruf über die POST-Methode den Seite MIME-Typ der übergebenen Daten. Wenn das CGI-Script beispielsweise beim Absenden eines HTML-Formulars aufgerufen wurde und dort als Übertragungsmethode POST angegeben ist, steht in dieser Umgebungsvariablen der für HTML-Formulare typische MIME-Typ application/x-www-form-urlencoded (zu diesem MIME-Typ siehe auch Seite Datenstrom bei Übertragung von Formulardaten).
DOCUMENT_ROOT | Enthält den physischen Pfad des Wurzelverzeichnisses für die Ablage von Dateien, die im Webserver aufrufbar sind. Ein CGI-Script kann aus dieser Angabe beispielsweise absolute Pfadnamen zum Öffnen von Dateien errechnen.
GATEWAY_INTERFACE | Enthält die Version der CGI-Schnittstelle, die von dem installierten Server unterstützt wird, z.B. CGI/1.1, wenn die gegenwärtig übliche Version 1.1 der Schnittstellendefinition unterstützt wird.
HTTP_ACCEPT | Enthält die Liste der MIME-Typen, die der aufrufende Web-Browser akzeptiert. Die Angabe */* bedeutet: der Web-Browser akzeptiert alles.
HTTP_ACCEPT_CHARSET | Enthält die Liste der Zeichenkodierungen, die der aufrufende Web-Browser akzeptiert, beispielsweise iso-8859-1, utf-8, utf-16, *;q=0.1.
HTTP_ACCEPT_ENCODING | Enthält eine Liste der Kodierungsmethoden, die der aufrufende Browser akzeptiert. Manche Browser akzeptieren beispielsweise auch den Kodierungstyp gzip, was bedeutet, dass der Browser auch Dateien empfangen kann, die nach dem GNU-Zip-Algorithmus komprimiert an ihn übertragen werden.
HTTP_ACCEPT_LANGUAGE | Enthält, welche Landessprache der aufrufende Browser bei seiner Benutzeroberfläche verwendet. Häufige Werte sind z.B. de (für deutschsprachige Browser) oder en (für englischsprachige Browser). Ein CGI-Script kann aufgrund dieser Angabe beispielsweise entscheiden, ob es eine deutschsprachige oder eine englischsprachige Antwort an den Browser sendet.
HTTP_CONNECTION | Enthält Informationen über den Status der HTTP-Verbindung zwischen Server und aufrufendem Browser. Der Wert Keep-Alive bedeutet, der Browser wartet auf Antwort.
HTTP_COOKIE | Enthält Namen und Wert von Cookies, sofern solche vom aufrufenden Browser gesendet werden. Mit der Perl-Anweisung: my @cookies = split(/[;,]\s*/,$ENV{'HTTP_COOKIE'}); können Sie alle gesetzten Cookies ermitteln. Jedes Element des Seite Arrays namens @cookies enthält dann jeweils einen Cookie, bestehend aus einem Namen und einem Wert, die durch ein Gleichheitszeichen = getrennt sind. Der Wert eines Cookies ist im Format des Seite MIME-Typs application/x-www-form-urlencoded gespeichert (zu diesem MIME-Typ siehe auch Seite Datenstrom bei Übertragung von Formulardaten).
HTTP_HOST | Enthält den Domain-Namen oder die IP-Adresse aus der Adresszeile des aufrufenden Browsers. Für ein CGI-Script kann diese Angabe wichtig sein, falls es mehrere Server bedienen muss.
HTTP_REFERER | Enthält den URI der Web-Seite, von der aus das CGI-Script aufgerufen wurde. Der Wert wird jedoch nicht von allen Web-Browsern korrekt übermittelt, ist also nicht in jedem Fall verfügbar. Anmerkung: Wenn Ihnen die englische Sprache geläufig ist, werden Sie feststellen, dass HTTP_REFERER eigentlich HTTP_REFERRER heißen müsste. Den Autoren der ersten Spezifikation von HTTP ist dieser Fehler unterlaufen, der sich aus historischen Gründen und aufgrund der Abwärtskompatibilität von HTTP bis heute hält.
HTTP_USER_AGENT | Enthält Produkt- und Versionsinformationen zum aufrufenden Web-Browser. Ein CGI-Script kann auf diese Weise ermitteln, welchen Browser ein Anwender verwendet.
PATH_INFO | Wird einem CGI-Script eine Zeichenkette mit Daten übergeben, dann enthält PATH_INFO den Teil der Zeichenkette nach dem Namen des Scripts bis zum ersten ?. Wenn das Script beispielsweise die Adresse http://meine.seite.net/cgi-bin/test.pl hat, aber mit http://meine.seite.net/cgi-bin/test.pl/querys/musicbase.sql?cat=Mozart aufgerufen wird, dann enthält diese Umgebungsvariable den Anteil /querys/musicbase.sql. Sie ist dazu gedacht, Dateinamen mit Pfadangabe als Übergabeparameter für Scripts zu ermöglichen.
PATH_TRANSLATED | Enthält wie PATH_INFO den Anteil des URI nach dem Scriptnamen bis zum ersten ?, jedoch mit dem Unterschied, dass nicht der Anteil selbst aus dem URI zurückgegeben wird, sondern der vom Webserver übersetzte Datenpfad dieses Anteils. Angenommen, das Script hat die Adresse http://meine.seite.net/cgi-bin/test.pl, wurde aber mit http://meine.seite.net/cgi-bin/test.pl/querys/musicbase.sql aufgerufen. Dann könnte der zusätzliche Adressanteil /querys/musicbase.sql aus Sicht des Webservers beispielsweise in einen physischen Pfadnamen wie /usr/web/seite/querys/musicbase.sql aufgelöst werden. Diesen Pfadnamen würde PATH_TRANSLATED zurückgeben.
QUERY_STRING | Enthält eine Zeichenkette mit Daten, die dem Script im URI nach dem ersten ? übergeben wurden. Angenommen, das Script hat die Adresse http://meine.seite.net/cgi-bin/test.pl, wurde aber mit http://meine.seite.net/cgi-bin/test.pl?User=Stefan aufgerufen. Dann würde QUERY_STRING den Wert User=Stefan enthalten. Wenn ein Anwender ein HTML-Formular ausgefüllt hat, bei dessen Absenden das CGI-Script mit der GET-Methode aufgerufen wurde, dann stehen in dieser Umgebungsvariablen die ausgefüllten Formulardaten. Die Daten sind nach den Regeln des MIME-Typs application/x-www-form-urlencoded kodiert.
REMOTE_ADDR | Enthält die IP-Adresse des Server-Rechners, über den das CGI-Script aufgerufen wurde. Es muss sich hierbei nicht unbedingt um die IP-Adresse des aufrufenden Client-Rechners handeln - der Wert kann beispielsweise auch von einem Proxy-Server stammen.
REMOTE_HOST | Enthält den Hostnamen des Rechners, über den das CGI-Script aufgerufen wurde. Dieser Wert wird jedoch nur gesetzt, wenn der Webserver entsprechend konfiguriert und dazu in der Lage ist, der IP-Adresse den entsprechenden Hostnamen zuzuordnen. Es muss sich hierbei nicht unbedingt um die IP-Adresse des aufrufenden Client-Rechners handeln - der Wert kann beispielsweise auch von einem Proxy-Server stammen.
REMOTE_IDENT | Enthält Protokollinformationen, wenn auf dem Server das Protokoll ident für geschützte Zugriffe läuft.
REMOTE_PORT | Ermittelt, über welchen Port des Client-Rechners das CGI-Script aufgerufen wurde. Diese Zahl liegt gewöhnlich im Bereich ab 1024 aufwärts und wird vom aufrufenden Web-Browser zufällig ausgewählt.
REMOTE_USER | Enthält den Benutzernamen, mit dem sich der aufrufende Benutzer angemeldet hat, um das CGI-Script ausführen zu lassen. Wenn das Script beispielsweise htaccess-geschützt ist, muss sich der aufrufende Benutzer mit Benutzernamen und Passwort anmelden. Der dabei eingegebene Benutzername kann mit dieser Variable ermittelt werden.
REQUEST_METHOD | Enthält die HTTP-Anfragemethode, mit der das CGI-Programm aufgerufen wurde. Beispielsweise GET oder POST. Ein CGI-Script kann diese Variable auslesen und danach entscheiden, wie es Formulardaten einlesen kann: entweder von der Standardeingabe (bei Methode POST) oder aus der Umgebungsvariablen QUERY_STRING (bei Methode GET).
REQUEST_URI | Enthält den HTTP-Pfad des Scripts inklusive der im Aufruf übergebenen Daten. Angenommen, das Script hat die Adresse http://meine.seite.net/cgi-bin/test.pl und wurde mit http://meine.seite.net/cgi-bin/test.pl?User=Stefan aufgerufen. Dann liefert REQUEST_URI den Wert /cgi-bin/test.pl?User=Stefan.
SCRIPT_FILENAME | Enthält den physischen Pfad des Scripts auf dem Server-Rechner, also z.B. /usr/web/data/cgi-bin/test.pl.
SCRIPT_NAME | Enthält den HTTP-Pfad des Scripts. Angenommen, das Script hat die Adresse http://meine.seite.net/cgi-bin/test.pl. Dann liefert SCRIPT_NAME den Wert /cgi-bin/test.pl.
SERVER_ADDR | Enthält die IP-Adresse des Server-Rechners.
SERVER_ADMIN | Enthält Namen/E-Mail-Adresse des in der Webserver-Konfiguration eingetragenen Server-Administrators.
SERVER_NAME | Enthält den Namen des Server-Rechners, auf dem das CGI-Script läuft. Normalerweise ist dies der eingetragene Hostname des Rechners.
SERVER_PORT | Enthält die Portnummer, die für den Webserver eingerichtet wurde. Normalerweise ist dies für Webserver die Nummer 80.
SERVER_PROTOCOL | Enthält die Version des HTTP-Protokolls, das der installierte Webserver unterstützt, z.B. HTTP/1.1, wenn die gegenwärtig übliche Version 1.1 des HTTP-Protokolls unterstützt wird.
SERVER_SIGNATURE | Enthält eine erweiterte Selbstauskunft des Servers, z.B. Apache/1.3.31 Server at localhost Port 80.
SERVER_SOFTWARE | Enthält den Namen und die Versionsnummer der Webserver-Software auf dem Server-Rechner.

nach oben
weiter | Seite HTML-Formulare und CGI
zurück | Seite CGI-Scripts auf öffentlichem Webserver installieren
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von CGI

© 2007 Seite Impressum


SELFHTML: Webserver/CGI / CGI / HTML-Formulare und CGI

SELFHTML

HTML-Formulare und CGI
Informationsseite

nach unten Formulardaten übertragen mit GET oder POST
nach unten Datenstrom bei Übertragung von Formulardaten
nach unten

Formulardaten übertragen mit GET oder POST

Das Hypertext Transfer Protocol (HTTP) ist das Übertragungsprotokoll, mit dem Web-Browser und Webserver Daten austauschen. Dafür gibt es HTTP-Anfragemethoden. Zwei HTTP-Anfragemethoden sind im Zusammenhang mit der Übertragung von Formulardaten von Bedeutung:

  • GET
    In einem HTML-Formular erzwingen Sie diese Methode durch die Angabe von method="get" im einleitenden <form>-Tag. Bei dieser Angabe werden die ausgefüllten Formulardaten zuerst an die Server-Software übertragen und von dieser in einer bestimmten Umgebungsvariablen mit dem Namen QUERY_STRING zwischenspeichert. Ein CGI-Script, das aufgrund der Angabe von action im einleitenden Formular-Tag aufgerufen wird, muss den Inhalt dieser Umgebungsvariablen auslesen, um an die Formulardaten heranzukommen (siehe auch den Abschnitt über Seite CGI-Umgebungsvariablen). In Perl ist das beispielsweise mit einer Anweisung wie $form_daten = $ENV{'QUERY_STRING'}; möglich. Wenn ein HTML-Formular die GET-Methode verwendet, wird der Formulardatenstrom, getrennt durch ein Fragezeichen, zum URI des CGI-Programmaufrufs hinzugefügt. Im Web-Browser des Anwenders ist dies nach dem Absenden des Formulars in der Adresszeile sichtbar.
  • POST
    In einem HTML-Formular erzwingen Sie diese Methode durch die Angabe von method="post" im einleitenden <form>-Tag. Die Angabe bewirkt, dass die ausgefüllten Formulardaten direkt an die Adresse übertragen werden, die bei action angegeben ist. Ein CGI-Script, das bei action aufgerufen wird, muss die Standardeingabe auslesen, um an die Formulardaten heranzukommen. In Perl geht das beispielsweise mit einer Anweisung wie read(STDIN, my $Daten, $ENV{CONTENT_LENGTH});. Beachten Sie dabei, dass das Programm die Umgebungsvariable CONTENT_LENGTH auslesen muss, um zu ermitteln, wie viele Zeichen es von der Standardeingabe lesen soll. Das ist erforderlich, da der übergebene Datenstrom kein Datenendekennzeichen enthält!

Wenn Sie ein vorhandenes CGI-Script einsetzen wollen, müssen Sie wissen, nach welcher der beiden Methoden das betreffende Script die Daten erwartet. Normalerweise ist das vom Autor des CGI-Scripts dokumentiert. Einige Scripts sind auch so intelligent, beide Möglichkeiten abzufragen - in diesem Fall ist es egal, welche Anfragemethode Sie im HTML-Formular wählen. Wenn Sie eigene Scripts schreiben, müssen Sie eine Anfragemethode festlegen oder ebenfalls so intelligent programmieren, dass es egal ist, welche Methode im HTML-Formular angegeben wird.

Datenstrom bei Übertragung von Formulardaten

Ein typisches HTML-Formular besteht aus benannten Feldern (z.B. für Name, E-Mail-Adresse und Kommentartext). Bei der Übertragung eines ausgefüllten Formulars an den Server-Rechner bzw. ein CGI-Programm müssen die Daten so übertragen werden, dass es dem CGI-Script möglich ist, zu erkennen, aus welchen Feldern das Formular besteht, und welche Daten der Anwender in welches Feld eingetragen hat. Deshalb gibt es eine bestimmte Kodierungsmethode, die Formularfelder und deren Daten voneinander trennt. Diese Kodierungsmethode benutzt folgende Regeln:

  • Die einzelnen Formularelemente inklusive ihrer Daten werden durch ein kaufmännisches und (&) voneinander getrennt.
  • Name und Daten eines Formularelements werden durch ein Gleichheitszeichen (=) voneinander getrennt.
  • Leerzeichen in den eingegebenen Daten (z.B. bei mehreren Wörtern) werden durch ein Pluszeichen (+) ersetzt.
  • Alle Zeichen, die nicht in der Seite ASCII-Codetabelle vorkommen, sowie einige Sonderzeichen werden durch eine Hexadezimalzeichenfolge umschrieben, eingeleitet durch ein Prozentzeichen (%) und dahinter der Hexadezimalwert des Zeichens. Welchen Wert ein Zeichen hat, hängt von der verwendeten Seite Zeichenkodierung ab. Diese können Sie über das Attribut accept-charset bestimmen, siehe Seite Zeichenkodierung der Formulardaten. Zum Beispiel wird der deutsche Umlaut ö im Falle der Kodierung Seite ISO 8859-1 durch %F6 umschrieben.
  • Alle Zeichen, die in diesen Regeln als Steuerzeichen vorkommen (also &, +, = und %) werden ebenfalls hexadezimal umschrieben, und zwar genau so wie Zeichen außerhalb von ASCII.

Das folgende Beispiel zeigt zunächst den Quelltext eines HTML-Formulars und darunter ein Bild, wie das Formular im Web-Browser mit Anwendereingaben aussieht. Unterhalb des Bildes sehen Sie, wie der Formulardatenstrom entsprechend den Kodierungsregeln aussieht, nachdem der Anwender das Formular abgesendet hat.

Beispiel: HTML-Formular

<form action="/cgi-bin/comments.pl" method="post" accept-charset="ISO-8859-1">
<p>Name:<br>
<input name="AnwenderName" size="40"></p>
<p>E-Mail:<br>
<input name="AnwenderMail" size="40"></p>
<p>Text:<br>
<textarea name="Text" rows="5" cols="50"></textarea></p>
<p><input type="submit" value="Formulardaten absenden"></p>
</form>

Beispiel: Abbildung des HTML-Formulars im Web-Browser mit Anwendereingaben

Beispiel: Formulardatenstrom aufgrund dieser Formulareingaben

AnwenderName=Stefan+M%FCnz&AnwenderMail=beispiel@example.org&Text=Das+ist+ein+kleiner+Text

Erläuterung:

So kodiert der Web-Browser die Formulardaten beim Absenden des Formulars. Diese Zeichenkette wird mit einer der erlaubten Methoden POST oder GET an das aufgerufene CGI-Script übergeben. Das CGI-Script kann diesen Datenstrom in Kenntnis der Kodierungsregeln selbst auseinanderdividieren, um die Formulardaten beispielsweise feldweise zu verarbeiten. Eine elegantere Methode ist es, dies einem Perl-Modul zu überlassen, das diese Arbeit übernimmt - dem Seite CGI-Modul.

nach oben
weiter | Seite MIME-Typen
zurück | Seite CGI-Umgebungsvariablen
Teil von SELFHTML/Navigationshilfen Teil von Webserver/CGI Teil von CGI

© 2007 Seite Impressum


SELFHTML: Diverse technische Ergänzungen

SELFHTML

Diverse technische Ergänzungen
Kapitelseite

Dieses Kapitel behandelt technische Details, die zum "Werkzeug" eines professionellen Web-Autors gehören, und die zum Teil in verschiedenen anderen Zusammenhängen von Bedeutung sind. In den jeweiligen Abschnitten wird darauf hingewiesen, an welchen Stellen das entsprechende Wissen von Bedeutung ist. Sinnvolle Vorkenntnisse zum Verständnis sind eigentlich alle übrigen Kapitel.

Seite MIME-Typen
Seite Sprachen- und Länderkürzel
Seite Client-Identifikationen
Seite robots.txt - Robots kontrollieren
Seite Standard-Farbpaletten

nach oben

© 2007 Seite Impressum


SELFHTML: Diverse technische Ergänzungen / MIME-Typen

SELFHTML

MIME-Typen
Informationsseite

nach unten Allgemeines zu MIME-Typen
nach unten Übersicht von MIME-Typen
nach unten

Allgemeines zu MIME-Typen

MIME steht für Multipurpose Internet Mail Extensions. Aus dem Namen geht hervor, dass das, was da spezifiziert wird, ursprünglich für E-Mails gedacht war - und zwar für E-Mails mit Attachments (englisch für Anhang). Solche so genannten Multipart-Mails enthalten die gesamten zu übertragenden Daten in einer Datei. Innerhalb der Datei musste eine Konvention gefunden werden, wie die einzelnen Teile (z.B. Text der E-Mail und angehängte ZIP-Datei) voneinander zu trennen seien. Dabei wurde auch ein Schema entwickelt, das der interpretierenden Software mitteilt, um welchen Datentyp es sich bei dem jeweils nächsten Teil der E-Mail handelt.

Das Schema erwies sich nicht nur für E-Mails als nützlich. Fast immer, wenn entfernte Programme (z.B. Web-Browser und Web-Server) wegen einer bevorstehenden Datenübertragung miteinander kommunizieren, geht es auch um die Art der zu übertragenden Daten. Dabei hat sich im gesamten Internet das Schema der MIME-Typen durchgesetzt. Auch im Web stößt man an verschiedenen Stellen auf MIME-Typen:

  • Verschiedene HTML-Elemente haben Attribute, die als Wertzuweisung die Angabe eines MIME-Typen erwarten, nämlich Seite a (type), Seite form (accept und enctype), Seite input (accept), Seite link (type, Seite object (codetype und type), Seite param (type), Seite script (type) und Seite style (type)
  • Wenn ein CGI-Script an den aufrufenden Browser einen Seite HTTP-Header sendet, muss es den MIME-Typ der nachfolgenden Daten senden.
  • In JavaScript gibt es ein eigenes Objekt Seite MIME-Typen, das es erlaubt, in JavaScript die verfügbaren MIME-Typen des Browsers zu ermitteln.

Sowohl jeder Web-Browser als auch jeder Web-Server führt eine Liste mit ihm bekannten MIME-Typen. Bei der Kommunikation müssen sie sich darauf einigen, ob der Empfänger den MIME-Typ akzeptiert, den der Sender senden will. Moderne Browser akzeptieren zwar in der Regel jeden MIME-Typ und bieten dem Anwender einfach an, falls sie den MIME-Typ nicht kennen, die zu empfangenden Daten als Download-Datei abzuspeichern. Web-Server sind dagegen meist empfindlicher. MIME-Typen, die sie nicht kennen, verarbeiten sie nicht. Gerade wenn auf dem Server-Rechner nicht alltägliche Dateiformate bereitgestellt werden, ist es wichtig, den MIME-Typ dafür in der Konfiguration des Web-Servers zu notieren.

Bei Standard-Dateiformaten sollten Sie unbedingt die MIME-Typ-Angaben verwenden, die dafür etabliert sind. Die Übersicht auf dieser Seite weiter unten listet viele bekannte MIME-Typen auf. Wenn Sie trotz Recherchen, zum Beispiel im IANA- englischsprachige Seite Verzeichnis der Media-Typen keinerlei Anhaltspunkte dafür finden, ob es zu einem Dateiformat einen bereits etablierten MIME-Typ gibt, können Sie selber einen festlegen. Gleiches gilt für völlig eigene Dateiformate.

Dazu müssen Sie das Schema der MIME-Typen kennen. Ein MIME-Typ besteht aus zwei Teilen: der Angabe eines Medientyps und der Angabe eines Subtyps. Beide Angaben werden durch einfachen Schrägstrich voneinander getrennt. Beispiele: text/html, image/gif.

Bei den Medientypen gibt es folgende:
text = für Textdateien
image = für Grafikdateien
video = für Videodateien
audio = für Sound-Dateien
application = für Dateien, die an ein bestimmtes Programm gebunden sind
multipart = für mehrteilige Daten
message = für Nachrichten
model = für Dateien, die mehrdimensionale Strukturen repräsentieren

Subtypen für server-eigene Dateiformate, d.h. Dateitypen, die auf dem Server ausgeführt werden können, werden meist mit x- eingeleitet.

Das Schema der MIME-Typen wird in den Seite Requests for Comments (RFCs) mit den Nummern 2045, 2046 und 2077 festgelegt.

Übersicht von MIME-Typen

Die Auswahl ist alphabetisch sortiert und erhebt keinen Anspruch auf Vollständigkeit.

MIME-Typ | Dateiendung(en) | Bedeutung
application/acad | *.dwg | AutoCAD-Dateien (nach NCSA)
application/applefile |  | AppleFile-Dateien
application/astound | *.asd *.asn | Astound-Dateien
application/dsptype | *.tsp | TSP-Dateien
application/dxf | *.dxf | AutoCAD-Dateien (nach CERN)
application/futuresplash | *.spl | Flash Futuresplash-Dateien
application/gzip | *.gz | GNU Zip-Dateien
application/listenup | *.ptlk | Listenup-Dateien
application/mac-binhex40 | *.hqx | Macintosh Binärdateien
application/mbedlet | *.mbd | Mbedlet-Dateien
application/mif | *.mif | FrameMaker Interchange Format Dateien
application/msexcel | *.xls *.xla | Microsoft Excel Dateien
application/mshelp | *.hlp *.chm | Microsoft Windows Hilfe Dateien
application/mspowerpoint | *.ppt *.ppz *.pps *.pot | Microsoft Powerpoint Dateien
application/msword | *.doc *.dot | Microsoft Word Dateien
application/octet-stream | *.bin *.exe *.com *.dll *.class | Ausführbare Dateien
application/oda | *.oda | Oda-Dateien
application/pdf | *.pdf | Adobe PDF-Dateien
application/postscript | *.ai *.eps *.ps | Adobe PostScript-Dateien
application/rtc | *.rtc | RTC-Dateien
application/rtf | *.rtf | Microsoft RTF-Dateien
application/studiom | *.smp | Studiom-Dateien
application/toolbook | *.tbk | Toolbook-Dateien
application/vocaltec-media-desc | *.vmd | Vocaltec Mediadesc-Dateien
application/vocaltec-media-file | *.vmf | Vocaltec Media-Dateien
application/xhtml+xml | *.htm *.html *.shtml *.xhtml | XHTML-Dateien
application/xml | *.xml | XML-Dateien
application/x-bcpio | *.bcpio | BCPIO-Dateien
application/x-compress | *.z | zlib-komprimierte Dateien
application/x-cpio | *.cpio | CPIO-Dateien
application/x-csh | *.csh | C-Shellscript-Dateien
application/x-director | *.dcr *.dir *.dxr | Macromedia Director-Dateien
application/x-dvi | *.dvi | DVI-Dateien
application/x-envoy | *.evy | Envoy-Dateien
application/x-gtar | *.gtar | GNU tar-Archivdateien
application/x-hdf | *.hdf | HDF-Dateien
application/x-httpd-php | *.php *.phtml | PHP-Dateien
application/x-javascript | *.js | serverseitige JavaScript-Dateien
application/x-latex | *.latex | LaTeX-Quelldateien
application/x-macbinary | *.bin | Macintosh Binärdateien
application/x-mif | *.mif | FrameMaker Interchange Format Dateien
application/x-netcdf | *.nc *.cdf | Unidata CDF-Dateien
application/x-nschat | *.nsc | NS Chat-Dateien
application/x-sh | *.sh | Bourne Shellscript-Dateien
application/x-shar | *.shar | Shell-Archivdateien
application/x-shockwave-flash | *.swf *.cab | Flash Shockwave-Dateien
application/x-sprite | *.spr *.sprite | Sprite-Dateien
application/x-stuffit | *.sit | Stuffit-Dateien
application/x-supercard | *.sca | Supercard-Dateien
application/x-sv4cpio | *.sv4cpio | CPIO-Dateien
application/x-sv4crc | *.sv4crc | CPIO-Dateien mit CRC
application/x-tar | *.tar | tar-Archivdateien
application/x-tcl | *.tcl | TCL Scriptdateien
application/x-tex | *.tex | TeX-Dateien
application/x-texinfo | *.texinfo *.texi | Texinfo-Dateien
application/x-troff | *.t *.tr *.roff | TROFF-Dateien (Unix)
application/x-troff-man | *.man *.troff | TROFF-Dateien mit MAN-Makros (Unix)
application/x-troff-me | *.me *.troff | TROFF-Dateien mit ME-Makros (Unix)
application/x-troff-ms | *.me *.troff | TROFF-Dateien mit MS-Makros (Unix)
application/x-ustar | *.ustar | tar-Archivdateien (Posix)
application/x-wais-source | *.src | WAIS Quelldateien
application/x-www-form-urlencoded |  | HTML-Formulardaten an CGI
application/zip | *.zip | ZIP-Archivdateien
audio/basic | *.au *.snd | Sound-Dateien
audio/echospeech | *.es | Echospeed-Dateien
audio/tsplayer | *.tsi | TS-Player-Dateien
audio/voxware | *.vox | Vox-Dateien
audio/x-aiff | *.aif *.aiff *.aifc | AIFF-Sound-Dateien
audio/x-dspeeh | *.dus *.cht | Sprachdateien
audio/x-midi | *.mid *.midi | MIDI-Dateien
audio/x-mpeg | *.mp2 | MPEG-Dateien
audio/x-pn-realaudio | *.ram *.ra | RealAudio-Dateien
audio/x-pn-realaudio-plugin | *.rpm | RealAudio-Plugin-Dateien
audio/x-qt-stream | *.stream | Quicktime-Streaming-Dateien
audio/x-wav | *.wav | WAV-Dateien
drawing/x-dwf | *.dwf | Drawing-Dateien
image/cis-cod | *.cod | CIS-Cod-Dateien
image/cmu-raster | *.ras | CMU-Raster-Dateien
image/fif | *.fif | FIF-Dateien
image/gif | *.gif | GIF-Dateien
image/ief | *.ief | IEF-Dateien
image/jpeg | *.jpeg *.jpg *.jpe | JPEG-Dateien
image/png | *.png | PNG-Dateien
image/tiff | *.tiff *.tif | TIFF-Dateien
image/vasa | *.mcf | Vasa-Dateien
image/vnd.wap.wbmp | *.wbmp | Bitmap-Dateien (WAP)
image/x-freehand | *.fh4 *.fh5 *.fhc | Freehand-Dateien
image/x-icon | *.ico | Icon-Dateien (z.B. Favoriten-Icons)
image/x-portable-anymap | *.pnm | PBM Anymap Dateien
image/x-portable-bitmap | *.pbm | PBM Bitmap Dateien
image/x-portable-graymap | *.pgm | PBM Graymap Dateien
image/x-portable-pixmap | *.ppm | PBM Pixmap Dateien
image/x-rgb | *.rgb | RGB-Dateien
image/x-windowdump | *.xwd | X-Windows Dump
image/x-xbitmap | *.xbm | XBM-Dateien
image/x-xpixmap | *.xpm | XPM-Dateien
message/external-body |  | Nachricht mit externem Inhalt
message/http |  | HTTP-Headernachricht
message/news |  | Newsgroup-Nachricht
message/partial |  | Nachricht mit Teilinhalt
message/rfc822 |  | Nachricht nach RFC 2822
model/vrml | *.wrl | Visualisierung virtueller Welten (VRML)
multipart/alternative |  | mehrteilige Daten gemischt
multipart/byteranges |  | mehrteilige Daten mit Byte-Angaben
multipart/digest |  | mehrteilige Daten / Auswahl
multipart/encrypted |  | mehrteilige Daten verschlüsselt
multipart/form-data |  | mehrteilige Daten aus HTML-Formular (z.B. File-Upload)
multipart/mixed |  | mehrteilige Daten gemischt
multipart/parallel |  | mehrteilige Daten parallel
multipart/related |  | mehrteilige Daten / verbunden
multipart/report |  | mehrteilige Daten / Bericht
multipart/signed |  | mehrteilige Daten / bezeichnet
multipart/voice-message |  | mehrteilige Daten / Sprachnachricht
text/comma-separated-values | *.csv | kommaseparierte Datendateien
text/css | *.css | CSS Stylesheet-Dateien
text/html | *.htm *.html *.shtml | HTML-Dateien
text/javascript | *.js | JavaScript-Dateien
text/plain | *.txt | reine Textdateien
text/richtext | *.rtx | Richtext-Dateien
text/rtf | *.rtf | Microsoft RTF-Dateien
text/tab-separated-values | *.tsv | tabulator-separierte Datendateien
text/vnd.wap.wml | *.wml | WML-Dateien (WAP)
application/vnd.wap.wmlc | *.wmlc | WMLC-Dateien (WAP)
text/vnd.wap.wmlscript | *.wmls | WML-Scriptdateien (WAP)
application/vnd.wap.wmlscriptc | *.wmlsc | WML-Script-C-dateien (WAP)
text/xml | *.xml | XML-Dateien
text/xml-external-parsed-entity |  | extern geparste XML-Dateien
text/x-setext | *.etx | SeText-Dateien
text/x-sgml | *.sgm *.sgml | SGML-Dateien
text/x-speech | *.talk *.spc | Speech-Dateien
video/mpeg | *.mpeg *.mpg *.mpe | MPEG-Dateien
video/quicktime | *.qt *.mov | Quicktime-Dateien
video/vnd.vivo | *.viv *.vivo | Vivo-Dateien
video/x-msvideo | *.avi | Microsoft AVI-Dateien
video/x-sgi-movie | *.movie | Movie-Dateien
workbook/formulaone | *.vts *.vtts | FormulaOne-Dateien
x-world/x-3dmf | *.3dmf *.3dm *.qd3d *.qd3 | 3DMF-Dateien
x-world/x-vrml | *.wrl | Visualisierung virtueller Welten (VRML) (veralteter MIME-Typ, aktuell ist model/vrml)

nach oben
weiter | Seite Sprachen- und Länderkürzel
zurück | Seite HTML-Formulare und CGI
Teil von SELFHTML/Navigationshilfen Teil von Diverse technische Ergänzungen

© 2007 Seite Impressum


SELFHTML: Diverse technische Ergänzungen / Sprachen- und Länderkürzel

SELFHTML

Sprachen- und Länderkürzel
Informationsseite

nach unten Sprachenkürzel nach RFC 1766
nach unten Übersicht zu Sprachenkürzeln nach ISO 639-1
nach unten Übersicht zu Länderkürzeln nach ISO 3166
nach unten Beispiele für zusammengesetzte Sprachenkürzel
nach unten

Sprachenkürzel nach RFC 1766

Die in den W3-Spezifikationen immer wieder erwähnte "Angabe von Sprachenkürzeln" wird im Seite RFC 1766 definiert. Diese Sprachenkürzel basieren auf den Normen nach unten ISO 639-1 zur Kurzbezeichnung von Sprachen und nach unten ISO 3166-1 zur Kurzbezeichnung von Ländern. Diese von den beiden ISO-Normen vordefinierten Kürzel erlauben solche Angaben wie de für Deutsch, en für Englisch oder en-US für US-Englisch. Der RFC 1766 erlaubt darüber hinaus, feinere Abstufungen für schriftkulturelle, dialektale oder andere lokale Ausprägungen der gleichen Sprache registrieren zu lassen, so z.B. die beiden norwegischen Schriftsprachenvarianten, notiert durch no-nyn und no-bok (wobei diese - in Langform no-nynorsk und no-bokmaal im RFC 1766 beispielhaft aufgezählten - Kürzel zwischenzeitlich veraltet sind, da es mittlerweile die zweibuchstabigen Kürzel nn und nb gibt). Für Sprachen, die in mehreren Ländern oder von bestimmten Gruppen gesprochen werden, und bei denen die Länderzuordnung deshalb problematisch ist, wird das einbuchstabige Startkürzel i reserviert. Die Reservierung erfolgt durch die Internet-Behörde englischsprachige Seite IANA. So werden Bezeichnungen wie i-mingo (Eine Sprache der Irokesen) möglich. Außerdem wird ein Startkürzel x für den privaten Gebrauch reserviert, wodurch Sprachenkürzel wie x-selfhtml (für "SELFHTMLisch") bezeichnet werden können.

Mittlerweile gibt es den RFC 3066, nach dem auch dreibuchstabige Sprachenkürzel nach der Norm ISO 639-2 erlaubt sind, etwa nds für Niederdeutsch. Die HTML- und CSS-Spezifikationen des W3-Konsortiums beziehen sich an den relevanten Stellen jedoch noch auf den älteren RFC 1766. Für XML gilt der neuere RFC 3066. Ebenso gibt es eine neuere Norm ISO 3166-1 alpha-3, die dreibuchstabige Ländercodes enthält. Maßgeblich für Internet-Belange sind aber in den meisten Fällen noch die älteren, zweibuchstabigen Kürzel.

Für Web-Autoren haben die Sprachenkürzel an folgenden Stellen Bedeutung:

  • Verschiedene HTML-Elemente haben Attribute, die als Wertzuweisung die Angabe einer Sprache erwarten. So gibt es das Seite Universalattribut lang, und ebenfalls erwartet wird eine Sprachangabe bei den Elementen (Attributen) Seite a (hreflang) und Seite link (hreflang).
  • In JavaScript haben die Sprachenkürzel beispielsweise bei der Eigenschaft Seite navigator.language Bedeutung.
  • Im Zusammenhang mit der CGI-Schnittstelle gibt es die Seite Umgebungsvariable HTTP_ACCEPT_LANGUAGE, in der solche Sprachenkürzel verwendet werden.

nach unten Länderkürzel nach ISO 3166 werden auch noch an anderen Stellen eingesetzt, so etwa bei den landesspezifischen Top-Level-Domains, wie sie beispielsweise in den Seite Statistiken zu einem Web-Projekt auftauchen können.

Übersicht zu Sprachenkürzeln nach ISO 639-1

Die folgenden Sprachenkürzel können Sie auch überall dort verwenden, wo Angaben nach RFC 1766 gefordert sind. In den meisten Fällen reichen die Original-Sprachenkürzel nach ISO 639-1 zur Bezeichnung der Sprache auch vollkommen aus.
Die Tabelle ist nach Kürzeln alphabetisch sortiert und erhebt keinen Anspruch auf aktuelle Vollständigkeit. Streichungen, Ergänzungen, Neueinträge von Sprachenkürzeln notiert die Library of Congress (dokumentiert auf der Seite englischsprachige Seite ISO 639-2/RA Change Notice).

Kürzel | Bedeutung
aa | Afar
ab | Abchasisch
af | Afrikaans
am | Amharisch
ar | Arabisch
as | Assamesisch
ay | Aymara
az | Aserbaidschanisch
ba | Baschkirisch
be | Belorussisch
bg | Bulgarisch
bh | Biharisch
bi | Bislamisch
bn | Bengalisch
bo | Tibetanisch
br | Bretonisch
ca | Katalanisch
co | Korsisch
cs | Tschechisch
cy | Walisisch
da | Dänisch
de | Deutsch
dz | Dzongkha, Bhutani
el | Griechisch
en | Englisch
eo | Esperanto
es | Spanisch
et | Estnisch
eu | Baskisch
fa | Persisch
fi | Finnisch
fj | Fiji
fo | Färöisch
fr | Französisch
fy | Friesisch
ga | Irisch
gd | Schottisches Gälisch
gl | Galizisch
gn | Guarani
gu | Gujaratisch
ha | Haussa
he | Hebräisch
hi | Hindi
hr | Kroatisch
hu | Ungarisch
hy | Armenisch
ia | Interlingua
id | Indonesisch
ie | Interlingue
ik | Inupiak
is | Isländisch
it | Italienisch
iu | Inuktitut (Eskimo)
iw | Hebräisch (veraltet, nun: he)
ja | Japanisch
ji | Jiddish (veraltet, nun: yi)
jv | Javanisch
ka | Georgisch
kk | Kasachisch
kl | Kalaallisut (Grönländisch)
km | Kambodschanisch
kn | Kannada
ko | Koreanisch
ks | Kaschmirisch
ku | Kurdisch
ky | Kirgisisch
la | Lateinisch
ln | Lingala
lo | Laotisch
lt | Litauisch
lv | Lettisch
mg | Malagasisch
mi | Maorisch
mk | Mazedonisch
ml | Malajalam
mn | Mongolisch
mo | Moldavisch
mr | Marathi
ms | Malaysisch
mt | Maltesisch
my | Burmesisch
na | Nauruisch
ne | Nepalesisch
nl | Holländisch
no | Norwegisch
oc | Okzitanisch
om | Oromo
or | Oriya
pa | Pundjabisch
pl | Polnisch
ps | Paschtu
pt | Portugiesisch
qu | Quechua
rm | Rätoromanisch
rn | Kirundisch
ro | Rumänisch
ru | Russisch
rw | Kijarwanda
sa | Sanskrit
sd | Zinti
sg | Sango
sh | Serbokroatisch (veraltet)
si | Singhalesisch
sk | Slowakisch
sl | Slowenisch
sm | Samoanisch
sn | Schonisch
so | Somalisch
sq | Albanisch
sr | Serbisch
ss | Swasiländisch
st | Sesothisch
su | Sudanesisch
sv | Schwedisch
sw | Suaheli
ta | Tamilisch
te | Tegulu
tg | Tadschikisch
th | Thai
ti | Tigrinja
tk | Turkmenisch
tl | Tagalog
tn | Sezuan
to | Tongaisch
tr | Türkisch
ts | Tsongaisch
tt | Tatarisch
tw | Twi
ug | Uigur
uk | Ukrainisch
ur | Urdu
uz | Usbekisch
vi | Vietnamesisch
vo | Volapük
wo | Wolof
xh | Xhosa
yi | Jiddish
yo | Joruba
za | Zhuang
zh | Chinesisch
zu | Zulu

Übersicht zu Länderkürzeln nach ISO 3166

Falls Sie solche Länderkürzel für nach unten zusammengesetzte Sprachenkürzel benutzen, um Ländervarianten von Sprachen zu bezeichnen, also etwa en-US oder de-CH, dann notieren Sie das Länderkürzel in Großbuchstaben. In anderen Zusammenhängen, etwa bei Top-Level-Domains, werden die Länderkürzel dagegen klein geschrieben.
Die Tabelle ist nach Kürzeln alphabetisch sortiert und erhebt keinen Anspruch auf aktuelle Vollständigkeit. Eine aktuelle Liste finden Sie auf der Webseite der International Organization for Standardization (ISO): englischsprachige Seite English country names and code elements.

Kürzel | Bedeutung
AD | Andorra
AE | Vereinigte Arabische Emirate
AF | Afghanistan
AG | Antigua und Barbuda
AI | Anguilla
AL | Albanien
AM | Armenien
AN | Niederländische Antillen
AO | Angola
AQ | Antarktis
AR | Argentinien
AS | Samoa
AT | Österreich
AU | Australien
AW | Aruba
AZ | Aserbaidschan
BA | Bosnien-Herzegowina
BB | Barbados
BD | Bangladesh
BE | Belgien
BF | Burkina Faso
BG | Bulgarien
BH | Bahrain
BI | Burundi
BJ | Benin
BM | Bermudas
BN | Brunei
BO | Bolivien
BR | Brasilien
BS | Bahamas
BT | Bhutan
BV | Bouvet-Inseln
BW | Botswana
BY | Weißrussland
BZ | Belize
CA | Kanada
CC | Kokosinseln
CD | Demokratische Republik Kongo (ehemals ZR: Zaire)
CF | Zentralafrikanische Republik
CG | Kongo
CH | Schweiz
CI | Elfenbeinküste
CK | Cook-Inseln
CL | Chile
CM | Kamerun
CN | China
CO | Kolumbien
CR | Costa Rica
CS | Serbien und Montenegro (früher Tschechoslowakei)
CU | Kuba
CV | Kap Verde
CX | Christmas Island
CY | Zypern
CZ | Tschechische Republik
DE | Deutschland
DJ | Djibuti
DK | Dänemark
DM | Dominika
DO | Dominikanische Republik
DZ | Algerien
EC | Ecuador
EE | Estland
EG | Ägypten
EH | Westsahara
ER | Eritrea
ES | Spanien
ET | Äthiopien
FI | Finnland
FJ | Fidschi-Inseln
FK | Falkland-Inseln
FM | Mikronesien
FO | Färöer Inseln
FR | Frankreich
FX | Frankreich (nur Europa)
GA | Gabun
GB | Großbritannien (UK)
GD | Grenada
GE | Georgien
GF | französisch Guyana
GH | Ghana
GI | Gibraltar
GL | Grönland
GM | Gambia
GN | Guinea
GP | Guadeloupe
GQ | Äquatorial Guinea
GR | Griechenland
GS | South Georgia und South Sandwich Islands
GT | Guatemala
GU | Guam
GW | Guinea Bissau
GY | Guyana
HK | Hong Kong
HM | Heard und McDonald Islands
HN | Honduras
HR | Kroatien
HT | Haiti
HU | Ungarn
ID | Indonesien
IE | Irland
IL | Israel
IN | Indien
IO | Britisch-Indischer Ozean
IQ | Irak
IR | Iran
IS | Island
IT | Italien
JM | Jamaika
JO | Jordanien
JP | Japan
KE | Kenia
KG | Kirgisistan
KH | Kambodscha
KI | Kiribati
KM | Komoren
KN | St. Kitts Nevis Anguilla
KP | Nordkorea
KR | Südkorea
KW | Kuwait
KY | Kaiman-Inseln
KZ | Kasachstan
LA | Laos
LB | Libanon
LC | Saint Lucia
LI | Liechtenstein
LK | Sri Lanka
LR | Liberia
LS | Lesotho
LT | Litauen
LU | Luxemburg
LV | Lettland
LY | Libyen
MA | Marokko
MC | Monaco
MD | Moldavien
MG | Madagaskar
MH | Marshall-Inseln
MK | Mazedonien
ML | Mali
MM | Myanmar
MN | Mongolei
MO | Macao
MP | Marianen
MQ | Martinique
MR | Mauretanien
MS | Montserrat
MT | Malta
MU | Mauritius
MV | Malediven
MW | Malawi
MX | Mexiko
MY | Malaysia
MZ | Mocambique
NA | Namibia
NC | Neukaledonien
NE | Niger
NF | Norfolk-Inseln
NG | Nigeria
NI | Nicaragua
NL | Niederlande
NO | Norwegen
NP | Nepal
NR | Nauru
NU | Niue
NZ | Neuseeland
OM | Oman
PA | Panama
PE | Peru
PF | Französisch-Polynesien
PG | Papua Neuguinea
PH | Philippinen
PK | Pakistan
PL | Polen
PM | St. Pierre und Miquelon
PN | Pitcairn
PR | Puerto Rico
PS | Palästinensische Selbstverwaltungsgebiete
PT | Portugal
PW | Palau
PY | Paraguay
QA | Qatar
RE | Reunion
RO | Rumänien
RU | Russland
RW | Ruanda
SA | Saudi-Arabien
SB | Solomon-Inseln
SC | Seychellen
SD | Sudan
SE | Schweden
SG | Singapur
SH | St. Helena
SI | Slowenien
SJ | Svalbard und Jan Mayen Islands
SK | Slowakei (Slowakische Republik)
SL | Sierra Leone
SM | San Marino
SN | Senegal
SO | Somalia
SR | Surinam
ST | Sao Tome
SU | Sowjetunion (obsolet)
SV | El Salvador
SY | Syrien
SZ | Swasiland
TC | Turks- und Kaikos-Inseln
TD | Tschad
TF | Französisches Süd-Territorium
TG | Togo
TH | Thailand
TJ | Tadschikistan
TK | Tokelau
TL | Ost-Timor
TM | Turkmenistan
TN | Tunesien
TO | Tonga
TR | Türkei
TT | Trinidad Tobago
TV | Tuvalu
TW | Taiwan
TZ | Tansania
UA | Ukraine
UG | Uganda
UK | Großbritannien
UM | US- kleinere Inseln außerhalb
US | Vereinigte Staaten von Amerika
UY | Uruguay
UZ | Usbekistan
VA | Vatikan
VC | St. Vincent
VE | Venezuela
VG | Virgin Island (Brit.)
VI | Virgin Island (USA)
VN | Vietnam
VU | Vanuatu
WF | Wallis et Futuna
WS | Samoa
YE | Jemen
YT | Mayotte
YU | Jugoslawien (obsolet)
ZA | Südafrika
ZM | Sambia
ZW | Zimbabwe

Beispiele für zusammengesetzte Sprachenkürzel

Die folgende Tabelle zeigt ein paar Beispiele für zusammengesetzte Sprachenkürzel, wie sie nach RFC 1766 erlaubt sind:

Kürzel | Bedeutung
de-CH | Schweizerdeutsch
de-AT | österreichisches Deutsch
en-US | amerikanisches Englisch
en-CA | kanadisches Englisch
en-AU | australisches Englisch
en-GB | britisches Englisch
en-UK | königlich-britisches Englisch
cel-gaulish | Gallisch
fr-CA | kanadisches Französisch
zh-TW | Taiwan-Chinesisch
zh-guoyu | Mandarin-Chinesisch
zh-min-nan | Min-Nan-Chinesisch
zh-xiang | Xiang-Chinesisch

nach oben
weiter | Seite Client-Identifikationen
zurück | Seite MIME-Typen
Teil von SELFHTML/Navigationshilfen Teil von Diverse technische Ergänzungen

© 2007 Seite Impressum


SELFHTML: Diverse technische Ergänzungen / Client-Identifikationen

SELFHTML

Client-Identifikationen
Informationsseite

nach unten Allgemeines zu Client-Identifikationen
nach unten Client-Identifikationen von Netscape-Browsern
nach unten Client-Identifikationen des Internet Explorers
nach unten Client-Identifikationen anderer Browser
nach unten Client-Identifikationen von Such-Robots und Proxy-Agenten
nach unten

Allgemeines zu Client-Identifikationen

Wenn ein Web-Browser oder ein Such-Robot oder der Agent eines Proxy-Servers bei einem Web-Server Daten anfordert, schickt er immer auch eine Zeichenkette mit, mit der er sich dem Web-Server gegenüber "namentlich vorstellt". Ein einheitliches oder standardisiertes Schema dafür ist in der Spezifikation zu HTTP 1.1 definiert worden. Nach der Ankündigung der Vorstellung eines "User-Agents" (das ist der Oberbegriff für die anfangs genannten Programme, die Daten anfordern können) wird wenigstens ein Hinweis auf das Produkt oder ein Kommentar übersandt. Nicht definiert ist die für die Praxis notwendige Unterscheidung zwischen verschiedenen Produktversionen oder -typen. Das ist bedauerlich. In der Praxis hat sich eine gewisse Regel herausgeschält: Produktname und Produktversion werden in dieser Reihenfolge und durch Schrägstrich getrennt dargestellt. Es halten sich allerdings nicht alle Browser an dieses Schema. Einige Browser-Typen geben sich als andere aus, und wieder andere erlauben es auch dem Anwender an der Programmoberfläche, eine beliebige Identifikation einzustellen. Wenn der Anwender dann seinen Namen oder irgendeinen Unsinn eingibt, meldet sich der Browser damit beim Server an.

Dennoch wird die Client-Identifikation an verschiedenen Stellen gespeichert und kann in manchen Situationen zu nützlichen Zwecken dienen:

  • In JavaScript gibt es das Seite navigator-Objekt, das es beispielsweise erlaubt, so genannte "Browserweichen" zu programmieren, um bestimmte JavaScript-Anweisungen nur auszuführen, wenn bestimmte Browser-Typen am Werk sind.
  • Ein CGI-Script kann die Seite CGI-Umgebungsvariable HTTP_USER_AGENT auslesen, um herauszufinden, von welcher Client-Software es aufgerufen wurde. Auch dabei kann die Information dazu genutzt werden, um bestimmte Anweisungen abhängig auszuführen oder nicht auszuführen.
  • Bei Seite Statistiken zu einem Web-Projekt gibt es in der Regel auch eine Statistiksorte, die Zugriffszahlen nach Browser-Typen sortiert aufschlüsselt. Grundlage dafür sind ebenfalls die Client-Identifikationen, die der Web-Server bei den Aufrufen erhalten hat.

Client-Identifikationen von Netscape-Browsern

Netscape gibt sich seit jeher mit dem Namen Mozilla aus. Eindeutig erkennbar ist er daran allerdings überhaupt nicht, denn der Internet Explorer gibt sich beispielsweise ebenfalls als Mozilla aus. Die folgenden Beispiele zeigen einige typische Identifikationen, die jedoch nur für Netscape typisch sind.

Beispiele:

Identifikation
Mozilla/2.0(Macintosh;I;PPC)
Mozilla/2.0(Win16;I)
Mozilla/3.01Gold[de](Win16;I)
Mozilla/4.03 [en] (X11; I; Linux 2.0.30 i686)
Mozilla/4.01 [en] (Win95; I)
Mozilla/4.01 [en]C-CCK-MCD (WinNT; I)
Mozilla/4.01 [en]C-FedExIntl (Win95; I)
Mozilla/4.5 [en] (X11; I; SunOS 5.6 sun4d)
Mozilla/4.6 [en] (X11; I; FreeBSD 3.2-RELEASE i386)
Mozilla/5.0 [en] (WinNT; I)
Mozilla/5.0b1 [en] (X11; N; Linux 2.2.0 alpha; Nav)

Erläuterung:

Das grundsätzliche Schema für Produktname und Version wird also eingehalten - die Identifikation startet immer mit Mozilla/[Versionsangabe]. Damit ist er allerdings noch nicht von vielen anderen Browsern unterscheidbar! Die Versionsangabe kann auch Zusatzangaben enthalten wie 5.0b1 (was eigentlich für Version 6.0 steht, da Version 5.0 übersprungen wurde, und b1 steht für "Betaversion 1"). Auch andere Zusätze wie 3.01Gold können vorkommen (Gold stand seinerzeit für die erste Variante des Netscape-Browsers, die zugleich WYSIWYG-Editieren erlaubte, also ein Vorläufer des Netscape Composer).

Hinter der Versionsangabe kann in eckigen Klammern ein Seite Sprachenkürzel folgen, das die Sprache der Browser-Bedienelemente angibt. Das Sprachenkürzel ist bei neueren Versionen zwar Standard, aber es kann auch mal fehlen.

In runden Klammern folgen anschließend weitere Informationen. Mehrere davon werden durch Semikolon voneinander getrennt. Zunächst wird die verwendete Plattform genannt. Dabei sind Abkürzungen wie Win95, Win98 oder WinNT für entsprechende Windows-Versionen möglich. Bei allen Unix-basierten Systemen wird an der Stelle meistens X11 angegeben, was für X-Windows steht, und bei Mac-Rechnern Macintosh.

An zweiter Stelle innerhalb der runden Klammern folgt ein Großbuchstabe, der das Sicherheits-Level des Browsers bezeichnet (Länge von Schlüsseln). Ein U steht für "strong security (US)" (diese Version wurde früher aufgrund von Exportbestimmungen nur in den USA vertrieben), ein I für "weak security (international)" (das war die erlaubte Export-Version mit schwacher Verschlüsselung). Das N steht für "no security".

Hinter dem Sicherheitskennzeichen folgen dann noch beschreibende Informationen zum verwendeten Prozessortyp und/oder nähere Angaben zum Betriebssystem.

Alle Teile können Leerzeichen dazwischen haben, aber zwingend ist dies nicht.

Client-Identifikationen des Internet Explorers

Der Internet Explorer gibt sich in seiner Browser-Identifikation deutlich weniger selbstbewusst als sonst. Er versteckt sich stets hinter dem gleichen Codenamen wie die Netscape-Browser, gibt zunächst eine Versionsnummer an, die sich auf Netscape bezieht und rückt dann, durch das Schlüsselwort compatible eingeleitet, mit den Informationen über sich selber heraus. Die folgenden Beispiele zeigen einige typische Identifikationen des Internet Explorers.

Beispiele:

Identifikation
Mozilla/1.22(compatible;MSIE2.01;WindowsNT)
Mozilla/2.0(compatible;MSIE3.0;AK;Windows95)
Mozilla/2.0(compatible;MSIE3.02;Updatea;AK;AOL3.0;Windows95)
Mozilla/4.0 (compatible; MSIE 4.0; Windows 95;BPH01)
Mozilla/4.0 (compatible; MSIE 4.0; Mac_68000)
Mozilla/4.0 (compatible; MSIE 4.0; Mac_PowerPC; e412354MCICDV4.0)
Mozilla/4.0 (compatible; MSIE 4.0b2; Windows 95)
Mozilla/4.0 (compatible; MSIE 5.0; AOL 4.0; Windows 95)
Mozilla/4.0 (compatible; MSIE 5.0; MSN 2.5; Windows 98)
Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

Erläuterung:

Das grundsätzliche Schema für Produktname und Version folgt dem von Netscape und wird also eingehalten - die Identifikation startet immer mit Mozilla/[Versionsangabe]. Die Versionsangabe dahinter bedeutet, zu welcher Netscape-Browser-Version sich der ausgewiesene Internet Explorer voll kompatibel hält. Das ist natürlich immer mit gewissen Vorbehalten zu genießen, denn ein Internet Explorer hat beispielsweise zu keinem Zeitpunkt je das layer-Element in HTML interpretiert, also ist die Behauptung der Kompatibilität zu Netscape 4.0 nicht unbedingt haltbar. Von daher bringt die Versionsangabe hinter dem Mozilla/ beim Internet Explorer keine wirkliche Erkenntnis.

Seine eigentliche Identität verrät der Internet Explorer erst in den runden Klammern. Diese enthalten normalerweise mehrere Angaben, durch Semikolon getrennt. Der erste Teil ist stets das Schlüsselwort compatible. Dahinter folgen die vier Großbuchstaben MSIE, die eigentlich den Bezug zum Internet Explorer herstellen. Dahinter folgt die genaue Versionsangabe.

Alle weiteren Angaben können differieren und eine unterschiedliche Reihenfolge haben. Bei Betriebssystembezeichnungen fällt auf, dass Windows durchweg ausgeschrieben ist, während Macintosh-Versionen des Internet Explorers sich üblicherweise mit Mac plus Unterstrich plus nähere Bezeichnung ausgeben. Wenn es sich um eine Browser-Distribution eines Online-Dienstes wie AOL oder MSN handelt, wird dies in einem Zusatzeintrag wie AOL 4.0 verzeichnet.

Alle Teile können Leerzeichen dazwischen haben, aber zwingend ist dies nicht, besonders bei älteren Versionen nicht.

Client-Identifikationen anderer Browser

Die folgenden Beispiele zeigen typische Identifikationen einiger anderer Browser-Typen.

Beispiele:

Identifikation
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/125.5.6 (KHTML, like Gecko) Safari/125.12
Mozilla/1.2 (Opera/2.02)
Mozilla/3.0 (compatible; Opera/3.0; Windows 95) 3.51
Mozilla/3.0 (Windows 4.10;US) Opera 3.60 [en]
DosLynx/0.8a
Lynx 2.4-FM
Lynx 2.5 libwww-FM/2.14
Lynx 2.9 (compatible Interactive Tcl/Tk News Ticker v0.06)
Lynx/2-4-2 MU-MODS
Lynx_ALynx/2.4 AmigaPort/1.29
amaya/V2.0a libwww/5.2.1
AIR_Mosaic(16bit)/v3.10.198.18
IBM WebExplorer DLL /v1.1
IBrowse/1.2 (AmigaOS 3.1)
iCab/Pre1.4 (Macintosh; I; PPC)

Erläuterung:

Die Beispiele zeigen, wie uneinheitlich die unterschiedlichen Browser-Typen sich identifizieren, was die Auswertung nicht gerade erleichtert. In der Regel hilft beim Analysieren beispielsweise mit einem Script nur, im ersten Schritt nach einschlägigen Schlüsselwörtern wie Opera, Mosaic, amaya, Lynx oder ICab zu suchen. Im zweiten Schritt können Sie dann versuchen, durch Suchen nach Teilausdrücken wie Win, Mac, Amiga usw. das Betriebssystem herauszufinden.

Client-Identifikationen von Such-Robots und Proxy-Agenten

Es gibt kein Patentrezept, um "menschliche Seitenbesucher" von Software-Programmen zu unterscheiden, die beim Aufrufen der Web-Seiten im Batchbetrieb arbeiten und beispielsweise die Daten für ihre Suchmaschine indizieren oder Dateien an einen Proxy-Rechner übertragen. Die folgenden Beispiele zeigen ein paar typische Identifikationen solcher Programme.

Identifikation
Eule Robot v3.00 (www.eule.de)
FAST-WebCrawler/0.3 (crawler@fast.no)
Googlebot/2.1 (+http://www.google.com/bot.html)
JCrawler/0.3 (robot; webmaster@netimages.com)
Netscape-Proxy/3.52 (Batch update)
Openfind Robot/1.1A2
W3CRobot/4.0D
WebCrawler/2.0
Lycos_Spider_(T-Rex)/3.0
Aladin/3.324
taz.northernlight.com Gulliver/1.3
Openfind Robot/1.1A2
KIT-Fireball/2.0
URL-Minder/2.4.5

Erläuterung:

Bei Suchmaschinen-Robots gibt es zumindest einige Anhaltspunkte, nach denen sich eine Identifikationszeichenkette durchsuchen lässt. Solche Robots identifizieren sich oft mit Schlüsselwörtern wie Robot, Spider oder Crawler. Viele von ihnen tragen im Namen auch den Namen des zugehörigen Suchdienstes. In den obigen Beispielen sind etwa Google, Fireball, Lycos, Eule, Northernlight und Aladin erkennbar. Generell sind Robots und auch Agenten von Proxy-Servern häufig daran erkennbar, dass sie bei der Identifikation einen Domain-Namen, einen URI oder eine E-Mail-Adresse angeben.

nach oben
weiter | Seite robots.txt - Robots kontrollieren
zurück | Seite Sprachenkürzel
Teil von SELFHTML/Navigationshilfen Teil von Diverse technische Ergänzungen

© 2007 Seite Impressum


SELFHTML: Diverse technische Ergänzungen / robots.txt - Robots kontrollieren

SELFHTML

robots.txt - Robots kontrollieren
Informationsseite

nach unten Allgemeines zur robots.txt
nach unten Speicherort und Aufbau einer robots.txt
nach unten

Allgemeines zur robots.txt

Es gibt Defacto-Standards im Internet, die einfach gewachsen sind, ohne es je zu einer Seite RFC gebracht haben. Dazu gehört auch der Status, den die Datei robots.txt im Web hat. In einer Datei dieses Namens können Betreiber von Web-Projekten angeben, welcher Such-Robot welche Projektverzeichnisse auslesen darf und welcher was nicht lesen darf. Die Datei enthält also Anweisungen für Robots von Suchmaschinen. Die überwiegende Mehrheit der Robots moderner Suchmaschinen berücksichtigen das Vorhandensein einer robots.txt, lesen sie aus und befolgen die Anweisungen.

Zwar lässt sich auch in einzelnen HTML-Dateien mit Hilfe eines Meta-Tags Seite für Suchprogramme das Auslesen erlauben bzw. verbieten. Doch das betrifft nur die jeweilige HTML-Datei und maximal alle weiteren, durch Verweise erreichbaren Dateien. In einer zentralen robots.txt können Sie dagegen unabhängig von der Datei- und Verweisstruktur Ihres Web-Projekts festlegen, welche Verzeichnisse und Verzeichnisbäume ausgelesen werden dürfen, und welche nicht.

Speicherort und Aufbau einer robots.txt

Die robots.txt muss unter diesem Namen (alle Buchstaben klein geschrieben) im Wurzelverzeichnis der Web-Dateien der Domain abgelegt werden. Wenn Sie also einen Domain-Namen mein-name.de haben, dann muss die robots.txt in dem Verzeichnis abgelegt werden, in dem auch die oberste Einstiegsdatei von www.mein-name.de liegt. Der URI wäre also http://www.mein-name.de/robots.txt. Nur so kann sie von Suchmaschinen-Robots, die das Projekt aufsuchen, gefunden werden. Das bedeutet, dass Sie die Technik der robots.txt nur nutzen können, wenn Sie eine eigene Domain haben, nicht aber bei Webspace-Angeboten, wo Sie lediglich ein Homepage-Verzeichnis auf einem Server erhalten, ohne an das Wurzelverzeichnis der Domain zu kommen.

Die robots.txt ist eine reine Textdatei und muss mit einem Texteditor bearbeitet werden.

Beispiel: robots.txt:

# robots.txt zu http://www.mein-name.de/

User-agent: UniversalRobot/1.0
User-agent: mein-Robot
Disallow: /quellen/dtd/

User-agent: *
Disallow: /unsinn/
Disallow: /temp/
Disallow: /newsticker.shtml

Erläuterung

Die erste Zeile ist lediglich eine Kommentarzeile. Kommentarzeilen werden durch ein Gatterzeichen # eingeleitet.

Ansonsten besteht eine robots.txt aus Datensätzen (records). Im obigen Beispiel sind zwei solcher Datensätze notiert. Ein Datensatz besteht grundsätzlich aus zwei Teilen. Im ersten Teil wird angegeben, für welche Robots (User-agent) die nachfolgenden Anweisungen gelten. Im zweiten Teil werden die Anweisungen selbst notiert. Die Anweisungen bestehen darin, den zuvor bestimmten Robots etwas zu verbieten (Disallow).

Jede Zeile eines Datensatzes beginnt mit einem der zwei erlaubten Schlüsselwörter User-agent oder Disallow. Dahinter folgt, durch ein Doppelpunkt und Leerzeichen getrennt, die zugehörige Angabe. Zwischen den Datensätzen wird eine Leerzeile notiert. Innerhalb eines Datensatzes muss zunächst mindestens eine Zeile mit User-agent: beginnen. Dahinter ist immer nur eine Angabe möglich. Wenn Sie mehr als einen bestimmten Robot ansprechen möchten, müssen Sie mehrere Zeilen untereinander notieren, die mit User-agent: beginnen - so wie im ersten Datensatz des obigen Beispiels. Unterhalb der Zeilen, die mit User-agent: beginnen, werden die Zeilen notiert, die mit Disallow beginnen. Die Angaben dazu werden dann von den Robots beachtet, die im gleichen Datensatz mit User-agent spezifiziert wurden.

Bei User-agent: ist entweder die Angabe * (Sternzeichen) erlaubt, was so viel bedeutet wie "alle Robots", oder der Name eines bestimmten Robots. Diesen Namen müssen Sie allerdings kennen. Wenn Sie * angeben, sollte in dem gleichen Datensatz keine weitere Angabe zu User-agent folgen, da dies dem Platzhalter für "alle" widersprechen würde.

Hinter jeder Zeile, die mit Disallow: beginnt, können Sie jeweils eine Pfadangabe notieren. Die Robots werden diese Pfade auf Ihrer Seite dann nicht indizieren. Es besteht übrigens keine Möglichkeit, Verzeichnisse explizit für die Indizierung zu erlauben. Ein Schlüsselwort Allow: wurde niemals definiert.

Bei den Angaben zu Disallow: können Sie Verzeichnispfade und einzelne Dateien mit Pfadangabe angeben. Wildcards wie * oder *.* sind dabei nicht erlaubt. Achten Sie darauf, bei Verzeichnispfaden einen abschließenden Schrägstrich / zu notieren. Wenn Sie nämlich beispielsweise /index notieren, wäre auch die Datei /index.html betroffen, und nicht nur das Unterverzeichnis /index/.

Im ersten der obigen Beispiel-Datensätze wird angenommen, dass ein superschlauer Robot namens UniversalRobot/1.0 sowie ein selbstgestrickter Robot namens mein-Robot Daten aus dem Verzeichnis /quellen/dtd/ in ihre Suchmaschinen einspeisen. Das ist aber nicht erwünscht, weil in diesem Verzeichnis beispielsweise DTDs für XML-Dateien abgespeichert sind. Deshalb wird speziell diesen beiden Robots der Zugriff auf dieses Verzeichnis (und alle Unterverzeichnisse davon) verboten.

Im zweiten Datensatz wird allen Robots verboten, die beiden Unterverzeichnisse /unsinn/ und /temp/ auszulesen. Die Verzeichnisnamen sprechen ja für sich, und es ist leicht ersichtlich, wozu dieses Verbot gut ist: nämlich um überflüssigen Datenmüll in den großen Suchmaschinen zu vermeiden. Ferner wird der Zugriff auf die Datei newsticker.shtml verboten. Der Grund könnte sein, dass diese Datei von einem über Seite Server Side Includes eingebundenen CGI-Script laufend aktuelle Daten erhält, weswegen es keinen Sinn hat, diese Datei in Suchmaschinen aufzunehmen.

Beachten Sie:

Mit der folgenden Syntax erlauben Sie keinem Suchmaschinen-Robot, auch nur irgendetwas von ihren Daten auszulesen:
User-agent: *
Disallow: /
Mit / bestimmen Sie "alle Daten dieses Verzeichnisses und aller Unterverzeichnisse".

Mit der folgenden Syntax nehmen Sie einen bestimmten Robot namens mein-Robot von allen anderen Verboten aus:
User-agent: mein-Robot
Disallow:
Durch eine fehlende Angabe hinter Disallow: wird alles erlaubt!

Web-Browser ignorieren die robots.txt. Es ist also nicht möglich, damit Daten vor Anwendern zu schützen. Lesen Sie zu diesem Zweck den Abschnitt Seite .htaccess - Server-Reaktionen kontrollieren

Aus demselben Grund besteht auch keinerlei Garantie, dass sich Suchmaschinen an die Verbote in robots.txt halten. Ordentlich programmierte Robots beachten die Datei, aber Robots, die mit bösen Absichten das Web durchsuchen, halten sich vermutlich nicht daran. Wenn Sie Informationen sicher vor allen Augen verstecken wollen, richten Sie z.B. einen Passwortschutz ein.

nach oben
weiter | Seite Standard-Farbpaletten
zurück | Seite Client-Identifikationen
Teil von SELFHTML/Navigationshilfen Teil von Diverse technische Ergänzungen

© 2007 Seite Impressum


SELFHTML: Diverse technische Ergänzungen / Standard-Farbpaletten

SELFHTML

Standard-Farbpaletten
Informationsseite

nach unten Farbpaletten-Typen und Farbnamen
nach unten

Farbpaletten-Typen und Farbnamen

An verschiedenen Stellen können Sie für Web-Seiten Farben bestimmen:

  • In HTML z.B. beim Definieren von Seite dateiweiten Farben für den Dokumenthintergrund, Text und Verweise, oder bei Seite Hintergrundfarben für Tabellen,
  • In CSS z.B. bei den Eigenschaften Seite color und Seite background-color,
  • Bei paletten-orientierten Grafiktypen wie dem Seite GIF-Format.

Über die in HTML und CSS angebotenen syntaktischen Möglichkeiten können Sie bis zu 16,7 Millionen verschiedene Farbwerte kodieren. Es gibt jedoch Standard-Paletten, die ganz bestimmte dieser 16,7 Millionen möglichen Farbwerte benutzen. Zwar besteht kein Zwang, sich an diese Paletten zu halten, doch wenn keine gestalterischen Gründe dagegensprechen, bieten diese Paletten eine gewisse Orientierung. Auf jeden Fall haben solche Farbpaletten einen technischen Vorteil: die Chance, dass die Farben auf verschiedenen Hardware-Typen und verschiedenen Betriebssystemen gleich aussehen, ist größer als bei Farben mit "beliebigen" Farbtönen.

Die VGA-Palette (16 Farben):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Beispiel-Seite Anzeigebeispiel: So sieht's aus (mit Farbnamen)

Die VGA-Palette ist der kleinste gemeinsame Nenner aller VGA-kompatiblen Grafikkarten und Bildschirme. Für die 16 Farben der VGA-Palette sind in HTML und CSS auch die vordefinierten Farbnamen erlaubt.

Die Netscape-Palette (216 Farben):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Diese Farbpalette wurde seinerzeit von Netscape eingeführt. Alle Netscape-Browser sorgen dafür, dass Farben aus dieser Palette plattformübergreifend richtig dargestellt werden.

Die Netscape-Farbnamen (120 Farben):

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Dies ist eigentlich keine Farbpalette im engeren Sinn, sondern eine lose Sammlung von Farben mit bestimmten Farbwerten. Die Sammlung wurde seinerzeit von Netscape eingeführt, um zusätzlich zu der Palette mit den 216 Farben, die einem algorithmischen Schema folgen, noch ein paar vordefinierte Farbtöne für Zwischentöne und Pastellfarben anzubieten. Diese Farbnamen werden von der Mehrzahl der modernen Browser bei Farbangaben in HTML oder CSS interpretiert.

nach oben
weiter | Seite Fertige Layouts: Nr.1
zurück | Seite robots.txt - Robots kontrollieren
Teil von SELFHTML/Navigationshilfen Teil von Diverse technische Ergänzungen

© 2007 Seite Impressum


SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

SELFHTML: Version 8.1.2 vom 01.03.2007
SELFHTML Die Energie des Verstehens
HTML-Dateien selbst erstellen

SELFHTML
News
News
Online-News
rund um
SELFHTML

Suche nach:
Inhalt: Allgemeines

Kapitel Editorial
Kapitel Einführung

Inhalt: Web-Technologien

Kapitel HTML/XHTML
Kapitel Stylesheets (CSS)
Kapitel XML/DTDs
Kapitel JavaScript/DOM
Kapitel Dynamisches HTML
Kapitel Perl
Kapitel PHP

Inhalt: Ergänzendes Wissen

Kapitel Internationalisierung
Kapitel Grafik
Kapitel Web-Projektverwaltung
Kapitel Webserver/CGI
Kapitel Diverse technische Ergänzungen

Inhalt: Extras

Kapitel Fertige Layouts
Kapitel Kleine Helferlein
Navigation: Einstieg

Seite Wie fange ich an?
Seite Häufig gestellte Fragen (FAQ)

Navigation: Kurzreferenzen

Seite Kurzreferenz: HTML
Seite Kurzreferenz: CSS

Navigation: Verzeichnisse

Seite Inhaltsverzeichnis
Seite Syntaxverzeichnis
Seite Stichwortverzeichnis

Navigation: Extras

Seite Quickbar
Seite Sidebars
Seite Suche

SELFHTML aktuell

Das Online-Angebot von SELFHTML, das Sie ebenfalls kennen sollten!
Die Einstiegsseite erreichen Sie über den folgenden Link:

Online-Kapitel SELFHTML aktuell

Dort finden Sie unter anderem:

Online-Seite Download der Dokumentation zum Offline-Lesen
Online-Seite SELFHTML als Buch für Bildschirmmuffel
Online-Kapitel Linkverzeichnis mit Links zu anderen Informationsquellen
Online-Kapitel Fachartikel diverser Autoren zu einzelnen Themen
Online-Seite Forum zum Diskutieren von Fachthemen und Anderem

nach oben

Die Originaladresse dieses Dokuments im Web lautet:
Online-Seite http://de.selfhtml.org/

© 2007 Seite Impressum


SELFHTML: Editorial /Über die chm-Version von SELFHTML 8.1.2

SELFHTML

SELFHTML 8.1.2 als Windows-Hilfedatei
Informationsseite

nach unten Versionsinformation
nach unten Feedback und Fehlermeldungen
nach unten Internetadressen
nach unten

Versionsinformation

Diese chm-Version von SELFHTML 8.1.2 wurde am 03.03.2007 von Dieter Raber erstellt.

Feedback und Fehlermeldungen

Sollten Sie Fehler (z.B. im Index) entdecken oder Fragen zur chm-Version haben, so benutzen Sie bitte das Kontaktformular auf der deutschsprachige Seite Webseite von Dieter Raber.

Für Rechtschreibfehler (außer im Index oder Inhaltsverzeichnis) und sonstige inhaltliche Fehler benutzen Sie bitte das Seite Formular für Fehlermeldungen.

Internetadressen

Die Originaladresse von SELFHTML 8.1.2 im Web lautet:
Online-Seite http://de.selfhtml.org

Die Originaladresse zu dieser chm-Version im Web lautet:
deutschsprachige Seite http://www.dieterraber.net/selfhtml/selfhtml-chm.8.1.2.zip

nach oben
weiter | Seite Entstehung des Internet
zurück | Seite SELFHTML sagt Danke
Teil von SELFHTML/Navigationshilfen Teil von Editorial

© 2005 Seite Impressum


azimuth

Diese Stimme hier sollte von links kommen.

Diese Stimme hier sollte von links hinten kommen.

Diese Stimme hier sollte ganz aus der Mitte kommen.

Diese Stimme hier sollte von rechts hinten kommen.

Diese Stimme hier sollte von rechts kommen.

zurück


azimuth

This voice should come from the left side.

This voice should come from the left side behind you.

This voice should come exactly from the center.

This voice should come from the right side behind you.

This voice should come from the right side.

back


background

NEWS

Hier folgen die News...


background-attachment

viel Text
viel zu viel Text
viel Text
viel zu viel Text
viel Text
viel zu viel Text
viel Text
viel zu viel Text
viel Text

background-attachment:scroll

viel Text
viel zu viel Text
viel Text
viel zu viel Text
viel Text
viel zu viel Text
viel Text
viel zu viel Text
viel Text

background-attachment:fixed

viel zu viel Text
viel Text
viel zu viel Text
viel Text


background-color

Hintergründig!

Hinter dem Internet ist das Hinternet.

Dies hat nichts zu sagen.

Im Kinderzimmer herrscht das Kindernet.


background-image

Willkommen im Reich der Texturen!

Willkommen im Reich der Texturen!


background-position

Tanz der Bilder!

Ein transparentes Bild über dem Hintergrundbild


background-repeat

Der erste Bereich.
Ein Text, der sehr leicht
umbricht. Der Grund: es soll
demonstriert werden, wie die Angabe
background-repeat:repeat-x
wirkt.

Der zweite Bereich.
Ein Text, der auch leicht umbricht.
Der Grund: es soll demonstriert werden,
wie die Angabe
background-repeat:repeat-y
wirkt.

Der dritte Bereich.
Ein Text, der auch leicht umbricht.
Der Grund: es soll demonstriert werden,
wie die Angabe
background-repeat:no-repeat
wirkt.


Benannte Seiten

Das mittels page:querformat benannte div-Element sollte im Querformat ausgedruckt werden und bei Bedarf einen Seitenumbruch erzeugen.


border

Überschrift erster Ordnung

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx

Überschrift zweiter Ordnung

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx


border-collapse

Normaleinstellung
Haus Auto Boot
Spezialeinstellung (collapse)
Haus Auto Boot


border-color

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx


border-spacing

Haus Auto Boot


border-style

Textabsatz mit Rahmendicke medium und Typ dotted.

Textabsatz mit Rahmendicke medium und Typ dashed.

Textabsatz mit Rahmendicke medium und Typ solid.

Textabsatz mit Rahmendicke medium und Typ double.

Textabsatz mit Rahmendicke 12px und Typ groove.

Textabsatz mit Rahmendicke 12px und Typ ridge.

Textabsatz mit Rahmendicke 12px und Typ inset.

Textabsatz mit Rahmendicke 12px und Typ outset.


border-width

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx


bottom

Dies ist ein untenbündiger Hund:
Hund


caption-side

Assoziationen
Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl


clear

Kapitel
1

In diesem Kapitel geht es um Einführendes.

Dann kommen wir mal zur Sache: ...


clip

Etwas Hund:
Hund


color

kleiner Beispieltext mit Farbe blue
großer Beispieltext mit Farbe blue

kleiner Beispieltext mit Farbe #CC0000
großer Beispieltext mit Farbe #CC0000

kleiner Beispieltext mit Farbe #090
großer Beispieltext mit Farbe #090

kleiner Beispieltext mit Farbe color:rgb(200,0,200)
großer Beispieltext mit Farbe color:rgb(200,0,200)

kleiner Beispieltext mit Farbe color:rgb(50%,25%,30%)
großer Beispieltext mit Farbe color:rgb(50%,25%,30%)


cue

Text mit Geräusch

oh oh, so ein oh oh!


cue-after

Und jetzt folgt ein:


cue-after

Text with a sound

This paragraph is followed by a:

back


cue-before

Text mit Geräusch

Freuen Sie sich!


cue-before

Text with a sound

Rejoice!

back


cue

Text with a sound

oh oh, such an oh oh!

back


cursor

Dies ist ein Bereich mit der Angabe cursor:crosshair. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:pointer. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:move. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:e-resize. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:ne-resize. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:nw-resize. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:n-resize. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:sw-resize. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:se-resize. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:s-resize. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:w-resize. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:text. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:wait. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:help. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:progress. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:url(cursor.cur), move. Fahren Sie mit der Maus über diesen Bereich.

Dies ist ein Bereich mit der Angabe cursor:url(cursor.gif), move. Fahren Sie mit der Maus über diesen Bereich.


direction

Hi Junkie!

Hier könnte möglicherweise alles anders aussehen als normal ...


display

Ich bin ein inline-Element

Dieser Text beweist es!

Ich bin ein Block-Element, werde aber nicht angezeigt

Und dieser Text tut so, als ob sonst nichts wäre!


display

ich
bin
eine
Tabelle


elevation

Diese Stimme sollte von unten kommen.

Diese Stimme sollte von weiter oben kommen.


elevation

This voice should come from below.

This voice should come from higher above.

back


empty-cells

Tabelle 1

Inhalt Inhalt

Tabelle 2

Inhalt Inhalt


filter:Alpha()


filter:Blur()

links das Bild in seiner normalen Form, rechts mit Blur()-Filter:

Text mit Blur-Effekt


filter:Chroma()

links das Bild in seiner normalen Form, rechts mit Chroma()-Filter:


filter:DropShadow()

Text mit Schattenwurf


filter:FlipH()

Links die normale Grafik, rechts mit FlipH()-Filter:


filter:FlipV()

Links die normale Grafik, rechts mit FlipV()-Filter:


filter:Glow()

Glühender Text


filter:Gray()

Links die normale Grafik, rechts mit Gray()-Filter:


filter:Invert()

Links die normale Grafik, rechts mit Invert()-Filter:


filter:Mask()

Links die normale Grafik, rechts mit Mask()-Filter:


filter:Shadow()

Text mit Schatten


filter:Wave()

Wave-Text


filter:XRay()

Links die normale Grafik, rechts mit XRay()-Filter:


float

Überschrift mal anders

Eine Überschrift muss nicht immer einen langweiligen, über die ganze Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal seitlich vom Text stehen, und der Text fließt um die Überschrift. Auch so kann man lange Texte mal anders gestalten als sonst üblich.


font

Beispieltext mit Schrift: bold .9em Times

Beispieltext mit Schrift: italic 1cm Helvetica

Beispieltext mit Schrift: small-caps 110% Verdana

Beispieltext mit Schrift: 2em/180% Courier
und einem Zeilenumbruch


font-family

kleiner Beispieltext in Times New Roman
großer Beispieltext in Times New Roman

kleiner Beispieltext in Verdana
großer Beispieltext in Verdana

kleiner Beispieltext in Wide Latin
großer Beispieltext in Wide Latin

kleiner Beispieltext in Comic Sans MS
großer Beispieltext in Comic Sans MS

kleiner Beispieltext in Avantgarde
großer Beispieltext in Avantgarde

kleiner Beispieltext in Balloon
großer Beispieltext in Balloon

kleiner Beispieltext in Bodoni
großer Beispieltext in Bodoni

kleiner Beispieltext in Garamond
großer Beispieltext in Garamond

kleiner Beispieltext in Impact
großer Beispieltext in Impact

kleiner Beispieltext in Helvetica
großer Beispieltext in Helvetica


font-size

Beispieltext mit Schriftgröße .6em
Beispieltext mit Schriftgröße .8em
Beispieltext mit Schriftgröße 1em
Beispieltext mit Schriftgröße 1.2em
Beispieltext mit Schriftgröße 1.5em
Beispieltext mit Schriftgröße 2em
Beispieltext mit Schriftgröße 2.5em

Beispieltext mit Schriftgröße 60%
Beispieltext mit Schriftgröße 80%
Beispieltext mit Schriftgröße 100%
Beispieltext mit Schriftgröße 120%
Beispieltext mit Schriftgröße 150%
Beispieltext mit Schriftgröße 200%
Beispieltext mit Schriftgröße 250%

Beispieltext mit Schriftgröße 8px
Beispieltext mit Schriftgröße 10px
Beispieltext mit Schriftgröße 13px
Beispieltext mit Schriftgröße 16px
Beispieltext mit Schriftgröße 20px
Beispieltext mit Schriftgröße 24px
Beispieltext mit Schriftgröße 32px

Beispieltext mit Schriftgröße 6pt
Beispieltext mit Schriftgröße 8pt
Beispieltext mit Schriftgröße 10pt
Beispieltext mit Schriftgröße 12pt
Beispieltext mit Schriftgröße 14pt
Beispieltext mit Schriftgröße 18pt
Beispieltext mit Schriftgröße 24pt

Beispieltext mit Schriftgröße 1pc
Beispieltext mit Schriftgröße 1.5pc
Beispieltext mit Schriftgröße 2pc
Beispieltext mit Schriftgröße 2.5pc

Beispieltext mit Schriftgröße 3mm
Beispieltext mit Schriftgröße 6mm
Beispieltext mit Schriftgröße 8mm
Beispieltext mit Schriftgröße 10mm

Beispieltext mit Schriftgröße 0.1in
Beispieltext mit Schriftgröße 0.2in
Beispieltext mit Schriftgröße 0.3in
Beispieltext mit Schriftgröße 0.4in


font-stretch

kleiner Beispieltext mit Laufweite wider
großer Beispieltext mit Laufweite wider

kleiner Beispieltext mit Laufweite narrower
großer Beispieltext mit Laufweite narrower

kleiner Beispieltext mit Laufweite ultra-condensed
großer Beispieltext mit Laufweite ultra-condensed

kleiner Beispieltext mit Laufweite extra-condensed
großer Beispieltext mit Laufweite extra-condensed

kleiner Beispieltext mit Laufweite condensed
großer Beispieltext mit Laufweite condensed

kleiner Beispieltext mit Laufweite semi-condensed
großer Beispieltext mit Laufweite semi-condensed

kleiner Beispieltext mit Laufweite semi-expanded
großer Beispieltext mit Laufweite semi-expanded

kleiner Beispieltext mit Laufweite expanded
großer Beispieltext mit Laufweite expanded

kleiner Beispieltext mit Laufweite extra-expanded
großer Beispieltext mit Laufweite extra-expanded

kleiner Beispieltext mit Laufweite ultra-expanded
großer Beispieltext mit Laufweite ultra-expanded


font-style

kleiner Beispieltext mit Schriftstil italic
großer Beispieltext mit Schriftstil italic


font-variant

normaler Text
großer normaler Text

kleiner Beispieltext mit Schriftvariante small-caps
großer Beispieltext mit Schriftvariante small-caps


font-weight

kleiner Beispieltext mit Schriftgewicht bold
großer Beispieltext mit Schriftgewicht bold

kleiner Beispieltext mit Schriftgewicht bolder
großer Beispieltext mit Schriftgewicht bolder

kleiner Beispieltext mit Schriftgewicht light
großer Beispieltext mit Schriftgewicht light

kleiner Beispieltext mit Schriftgewicht lighter
großer Beispieltext mit Schriftgewicht lighter

kleiner Beispieltext mit Schriftgewicht 100
großer Beispieltext mit Schriftgewicht 100

kleiner Beispieltext mit Schriftgewicht 200
großer Beispieltext mit Schriftgewicht 200

kleiner Beispieltext mit Schriftgewicht 300
großer Beispieltext mit Schriftgewicht 300

kleiner Beispieltext mit Schriftgewicht 400
großer Beispieltext mit Schriftgewicht 400

kleiner Beispieltext mit Schriftgewicht 500
großer Beispieltext mit Schriftgewicht 500

kleiner Beispieltext mit Schriftgewicht 600
großer Beispieltext mit Schriftgewicht 600

kleiner Beispieltext mit Schriftgewicht 700
großer Beispieltext mit Schriftgewicht 700

kleiner Beispieltext mit Schriftgewicht 800
großer Beispieltext mit Schriftgewicht 800

kleiner Beispieltext mit Schriftgewicht 900
großer Beispieltext mit Schriftgewicht 900


height

zurück

height mit overflow:hidden

Eine Überschrift, die möglicherweise höher ist als erlaubt

height ohne overflow

Eine Überschrift, die möglicherweise höher ist als erlaubt


left

Dies ist ein absolut positionierter Text neben einer absolut positionierten Grafik.


letter-spacing

Beispieltext mit Zeichenabstand 0.1em
Beispieltext mit Zeichenabstand 0.3em
Beispieltext mit Zeichenabstand 0.5em
Beispieltext mit Zeichenabstand 0.7em

Beispieltext mit Zeichenabstand 1px
Beispieltext mit Zeichenabstand 3px
Beispieltext mit Zeichenabstand 5px
Beispieltext mit Zeichenabstand 7px

Beispieltext mit Zeichenabstand 1pt
Beispieltext mit Zeichenabstand 3pt
Beispieltext mit Zeichenabstand 5pt
Beispieltext mit Zeichenabstand 7pt

Beispieltext mit Zeichenabstand 0.1pc
Beispieltext mit Zeichenabstand 0.3pc
Beispieltext mit Zeichenabstand 0.5pc
Beispieltext mit Zeichenabstand 0.7pc

Beispieltext mit Zeichenabstand 1mm
Beispieltext mit Zeichenabstand 2mm
Beispieltext mit Zeichenabstand 3mm
Beispieltext mit Zeichenabstand 4mm

Beispieltext mit Zeichenabstand 0.01in
Beispieltext mit Zeichenabstand 0.03in
Beispieltext mit Zeichenabstand 0.05in
Beispieltext mit Zeichenabstand 0.07in


line-height

Die Zeilenhöhe ist ein altbekanntes DTP-Feature zur Formatierung von Absätzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der typografischen Wirkung von Text hilfreich. Denn die Zeilenhöhe hängt unmittelbar mit der Schriftgröße zusammen. Deshalb ist es sinnvoll, für beide Werte entsprechende Stylesheet-Angaben zu machen, oder mit prozentualen Angaben zu arbeiten. In diesem Textabsatz wurde eine Schriftgröße von 1em und eine Zeilenhöhe von 1.4em festgelegt. Das ist ein üblicher Wert. Eine angenehm zu lesende Zeilenhöhe für größere Texte sollte am besten etwas größer sein als die Schriftgröße, aber nur etwas. Wenn die Zeilenhöhe im Vergleich zur Schriftgröße zu groß wird, werden die Textzeilen zu weit auseinandergezogen. Wenn die Zeilenhöhe zu gering ist, stehen die Zeilen zu eng beisammen. Für Ausnahmefälle ist natürlich alles erlaubt.

Die Zeilenhöhe ist ein altbekanntes DTP-Feature zur Formatierung von Absätzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der typografischen Wirkung von Text hilfreich. Denn die Zeilenhöhe hängt unmittelbar mit der Schriftgröße zusammen. Deshalb ist es sinnvoll, für beide Werte entsprechende Stylesheet-Angaben zu machen, oder mit prozentualen Angaben zu arbeiten. In diesem Textabsatz wurde eine Schriftgröße von 1em und eine Zeilenhöhe von 2em festgelegt. Das ist für besondere Zwecke mal ganz nett, für längere Texte jedoch nicht besonders geeignet.

Die Zeilenhöhe ist ein altbekanntes DTP-Feature zur Formatierung von Absätzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der typografischen Wirkung von Text hilfreich. Denn die Zeilenhöhe hängt unmittelbar mit der Schriftgröße zusammen. Deshalb ist es sinnvoll, für beide Werte entsprechende Stylesheet-Angaben zu machen, oder mit prozentualen Angaben zu arbeiten. In diesem Textabsatz wurde eine Schriftgröße von 1em und eine Zeilenhöhe von 1em festgelegt. Das ist für besondere Zwecke mal ganz nett, für längere Texte jedoch nicht geeignet.


list-style

Nummerierte Liste <ol> mit den Angaben lower-roman inside

  1. bei Anette vorbeischauen
    und Grüße an Gundula ausrichten
  2. bei Bianca vorbeischauen
    und Grüße an Hannelore ausrichten
  3. bei Christine vorbeischauen
    und Grüße an Inge ausrichten
  4. bei Doris vorbeischauen
    und Grüße an Janette ausrichten
  5. bei Ellen vorbeischauen
    und Grüße an Karin ausrichten
  6. bei Friderike vorbeischauen
    und Grüße an Lydia ausrichten


list-style-image

Aufzählungsliste <ul> mit eigener Bullet-Grafik

  • HTML/XHTML
    Die Sprache des Web
  • JavaScript/DOM
    Die client-seitige Script-Sprache
  • CGI/Perl
    Web-Anwendungen, die auf dem Server laufen


list-style-position

Nummerierte Liste <ol> mit Listeneinrückung inside

  1. Tagesordnung
    zweizeilig
  2. Pause
    zweizeilig
  3. Vorbesprechung
    zweizeilig
  4. Mittagessen
    zweizeilig
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
    zweizeilig
  6. Pause
    zweizeilig
  7. Gemütlicher Ausklang
    zweizeilig

Nummerierte Liste <ol> mit Listeneinrückung outside

  1. Tagesordnung
    zweizeilig
  2. Pause
    zweizeilig
  3. Vorbesprechung
    zweizeilig
  4. Mittagessen
    zweizeilig
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
    zweizeilig
  6. Pause
    zweizeilig
  7. Gemütlicher Ausklang
    zweizeilig


list-style-type

Aufzählungsliste <ul> mit Darstellungstyp disc

  • Probieren geht über Studieren
  • Liebe geht über Triebe
  • Tante fällt über Kante

Aufzählungsliste <ul> mit Darstellungstyp circle

  • Probieren geht über Studieren
  • Liebe geht über Triebe
  • Tante fällt über Kante

Aufzählungsliste <ul> mit Darstellungstyp square

  • Probieren geht über Studieren
  • Liebe geht über Triebe
  • Tante fällt über Kante

Aufzählungsliste <ul> mit Darstellungstyp none

  • Probieren geht über Studieren
  • Liebe geht über Triebe
  • Tante fällt über Kante

Nummerierte Liste <ol> mit Darstellungstyp decimal

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp lower-roman

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp upper-roman

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp lower-alpha

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp upper-alpha

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp lower-greek

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp hebrew

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp decimal-leading-zero

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp cjk-ideographic

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp hiragana

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp katakana

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp hiragana-iroha

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang

Nummerierte Liste <ol> mit Darstellungstyp katakana-iroha

  1. Tagesordnung
  2. Pause
  3. Vorbesprechung
  4. Mittagessen
  5. Vortrag zum Thema "Komme nie zu früh zur Sache!"
  6. Pause
  7. Gemütlicher Ausklang


margin

typA mit margin: 1cm

typB mit margin: 1cm 2cm

typC mit margin: 1cm 2cm 3cm

typD mit margin: 1cm 2cm 3cm 4cm


margin-bottom

Dieser Textabsatz hat einen Abstand von 3em zum darauffolgenden.

Dieser Textabsatz hat einen Abstand von 10% zum darauffolgenden.

Dieser Textabsatz hat einen Abstand von 50px zum darauffolgenden.

Dieser Textabsatz dient nur noch zu Vergleichszwecken und hat keinen definierten Nachabstand.


margin-left

Eine Überschrift erster Ordnung

Ein Textabsatz, nochmals weiter eingezogen.

Noch einer davon.

Eine Überschrift zweiter Ordnung

  • Ein Listenpunkt
  • Noch ein Listenpunkt


margin (page)

Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst. Für den Ausdruck wurden jedoch Abstände zwischen Seiteninhalt und Seitenrand festgelegt.


margin-right

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 1em zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 3em zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 5em zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 7em zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 9em zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 10% zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 20% zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 30% zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 40% zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 50% zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 16px zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 48px zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 80px zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 128px zum rechten Rand.

Dieser rechtsbündig ausgerichtete Textabsatz hat einen Abstand von 144px zum rechten Rand.


margin-top

Überschrift erster Ordnung

Bereich mit der Beispiel-Klasse.

Überschrift erster Ordnung


marks

Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst. Für Printmedienverarbeitung wurden jedoch Passermarken gesetzt.


max-height

Eine Überschrift, die möglicherweise zu hoch ist für eine Box von 300 mal 300 Pixel


max-width

Eine Überschrift, bei der das Wort 'möglicherweise' möglicherweise zu breit für 250px ist


min-height

Fasse dich kurz!


min-width

Fasse dich kurz!


orphans

Absatz_1:_Zeile_1 Absatz_1:_Zeile_2 Absatz_1:_Zeile_3 Absatz_1:_Zeile_4 Absatz_1:_Zeile_5

Absatz_2:_Zeile_1 Absatz_2:_Zeile_2 Absatz_2:_Zeile_3 Absatz_2:_Zeile_4 Absatz_2:_Zeile_5 Absatz_2:_Zeile_6


outline

Überschrift erster Ordnung

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx

Überschrift zweiter Ordnung

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx


overflow

beliebiger Hund: auto
Hund
abgeschnittener Hund: hidden
Hund
scrollender Hund: scroll
Hund
sichtbarer Hund: visible
Hund


padding

Textabsatz mit dickem Rahmen rundherum mit Innenabstand 50px


padding-bottom

div-Bereich mit sichtbarem roten Rahmen und Innenabstand 4em unten. Das ist in diesem Fall der Abstand zwischen dem unteren Rahmen des Textabsatzes und dem unteren Rahmen des div-Bereichs.

Textabsatz mit sichtbarem Rahmen und mit Innenabstand 100px unten


padding-left

der erste Absatz p1

der zweite Absatz p2

der dritte Absatz p3


padding-right

der erste Bereich d1
der zweite Bereich d2
der dritte Bereich d3


padding-top

Textabsatz mit sichtbarem Rahmen und mit Innenabstand 100px oben


page-break-after

Überschrift ersten Grades mit 18cm Außenabstand unten.

Überschrift zweiten Grades

Direkt nach einer Überschrift zweiten Grades darf kein Seitenumbruch erfolgen.

Überschrift zweiten Grades

Direkt nach einer Überschrift zweiten Grades darf kein Seitenumbruch erfolgen.

Überschrift zweiten Grades

Direkt nach einer Überschrift zweiten Grades darf kein Seitenumbruch erfolgen.

Überschrift zweiten Grades

Direkt nach einer Überschrift zweiten Grades darf kein Seitenumbruch erfolgen.

Überschrift zweiten Grades

Direkt nach einer Überschrift zweiten Grades darf kein Seitenumbruch erfolgen.

Überschrift zweiten Grades

Direkt nach einer Überschrift zweiten Grades darf kein Seitenumbruch erfolgen.


page-break-before

Die erste Seite

und ihr Text

Und die zweite Seite

und ihr Text


page-break-inside

Platzhalter

Innerhalb
dieses
Abschnitts
darf
kein
Seitenumbruch
erfolgen.
Er wandert daher beim Ausdruck auf die nächste Seite.


pause

Text mit Pausen

Text mit 500ms Pause davor und danach

Text

Text mit 1300ms Pause davor und danach

Text

Text mit 1s Pause davor und 2s Pause danach

Abschließender Text


pause-after

Text mit Pausen

Text mit 200ms Pause danach

Text mit 400ms Pause danach

Text mit 1s Pause danach

Text mit 3s Pause danach

Abschließender Text


pause-after

Pause after the text

Text with a pause of 200 milliseconds after it

Text with a pause of 400 milliseconds after it

Text with a pause of 1 second after it

Text with a pause of 3 seconds after it

Final text

back


pause-before

Text mit Pausen

Text mit 300ms Pause davor

Text mit 600ms Pause davor

Text mit 1s Pause davor

Text mit 2s Pause davor


pause-before

Text with pauses

Text with a pause of 300 milliseconds before

Text with a pause of 600 milliseconds before

Text with a pause of 1 second before

Text with a pause of 2 seconds before

back


pause

Pause before and after text

Text with a pause of 500 milliseconds before and after it

Text

Text with a pause of 1300 milliseconds before and after it

Text

Text with a pause of 1 second before and 2 seconds after it

Final text

back


pitch

Diese Stimme spricht so tief wie möglich zu Ihnen. Lassen Sie sich trotzdem nicht einschüchtern.

Diese Stimme spricht so hoch wie möglich zu Ihnen. Schnatterdischnatterdischnatterdischnatt.


pitch

This text is read out with a voice that is as deep as possible. Please try not to be intimidated.

This text is read out with a voice that is as high as possible. Does it get on your nerves?

back


pitch-range

Dies ist ein ziemlich öder Text, deshalb wird der mit ziemlich monotoner Stimme gesprochen.

Obwohl auch dies ein ziemlich öder Text ist, wird er dennoch mit sehr angeregter Stimme vorgetragen.


pitch-range

This text is very boring, and that is why it is read with a fairly boring, monotonous voice.

Although this text is also quite boring, it is read with a very animated voice.

back


play-during

Während dieser Text gesprochen wird, ertönt im Hintergrund ein flotter Ragtime als MIDI-Datei. Damit Sie in den Genuss des gesamten Stücks kommen, müsste ich Ihnen jetzt eine lange Geschichte erzählen. Aber ich denke, Sie gewinnen auch ohne eine solche Geschichte einen Eindruck davon, wie Hintergrundmusik während der Sprachausgabe eines Textes wirkt. Vielen Dank für Ihre Aufmerksamkeit!


play-during

Text with background music

While this text is being read out to you, you can hear ragtime music from a MIDI file in the background. If you wanted to hear the whole piece of music, I would have to tell you a long story now to keep the music playing. But I think I have given you an idea of this feature, even without telling a long story. Thank you for your attention!

back


position

Um position:fixed zu demonstrieren, scrollen Sie an das Ende der Seite.

s1 static
s2 static
r3 relative
s4 static
s5 static
r6 relative
s7 static
a1 absolute
a2 absolute
a3 absolute
a4 absolute
a5 absolute
a6 absolute
a7 absolute
f1 fixed
s8 static


:first-line, :first-letter, :first-child

Man kann nur Brücken schlagen zwischen Ufern die man auseinanderhält. Denn wo es keine Gräben gibt, da gibt es auch keine Unterschiede, und wo es keine Unterschiede gibt, da ist kein Leben.

Und die Moral von der Geschicht:

Traue Philosophen nicht!


quotes:

Sie sagte es geht mir gut deutsch de

Sie sagte es geht mir gut deutsch (französische Variante) de-DE

Sie sagte es geht mir gut deutsch (Schweiz) de-CH

She said I am fine englisch en

Elle dit Je vais bien französisch fr


:link, :visited, :focus, :hover, :active

Bekannte Suchdienste

Yahoo! (Verzeichnis)
Google (Suchmaschine)
Web.de (Verzeichnis)
Multimeta (Meta-Suchmaschine)


counter

Überschrift erster Ordnung

Text

Überschrift zweiter Ordnung

Text

Überschrift zweiter Ordnung

Text

Überschrift erster Ordnung

Text

Überschrift zweiter Ordnung

Text

Überschrift zweiter Ordnung

Text

Überschrift zweiter Ordnung

Text

Überschrift erster Ordnung

Text


:lang

Viele Websites enthalten fremdsprachige Wörter.

C'est la vie!


:before, :after

Thema

Einleitung

Text mit title-Attribut


Seiten rechts/links

Das hier ist die eine Seite.

Das hier die andere (wegen erzwungenem Seitenumbruch)

Die beiden Seiten haben unterschiedliche Seitenränder.


richness

Ich bin reich. Ich bin schön. Deshalb rede ich laut und klar, mit einer Stimmgewalt von 85.

Ich bin arm. Ich bin hässlich. Deshalb hab ich auch so eine dünne Stimme. Ihre Gewalt hat nur einen Wert von 15.


richness

I am rich. I am good-looking. That is why I speak with a strong, heavy voice, with a richness value of 85.

I am poor. I am also very ugly. That is why I speak with a thin, weak voice, with a richness value of only 15.

back


right

Rechtsbündiger Hund:
Hund


scrollbars

Ton in Ton

Den Text dieser Seite können Sie selber schreiben:


size

Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst. Wenn Ihr Browser jedoch die Stylesheet-Angaben zum Seiten-Layout kennt, versuchen Sie mal, diese Datei über den normalen Druckbefehl Ihres Browsers auszudrucken.


speak

Das Wort "Buchstabieren" wird jetzt buchstabiert:

Buchstabieren


speak

This is the spelling of the word "spelling":

spelling

back


speak-header

Kopfzelle 1 | Kopfzelle 2
Datenzelle 1 | Datenzelle 2
Datenzelle 3 | Datenzelle 4


speak-numeral

Rosis Telefonnummer lautet 32168.

Mit ihrem Gewerbe hat Rosi schon 32168 Dollar verdient.


speak-numeral

To get through to my stockbroker, I dial 32168.

In the past twelve months, I made a total of 32168 Dollars with shares.

back


speak-punctuation

Hören Sie mal! - Oder sind Sie schwerhörig? Hier - und nur hier gibt's was zusätzlich auf die Ohren: nämlich exklusiv ausgesuchte, explizit ausgesprochene Satzzeichen.


speak-punctuation

Now, listen to this: open your ears, my friend! This is the place where all - I say all - punctuation marks are read out to you. Now, have you ever heard anything like this before?

back


speech-rate

Das ist ein ziemlich schnell gesprochener Text. Hoffentlich verstehen Sie alles, was da gesagt wird, auch wenn es nicht von Belang ist.

Das ist ein gaaannnz langsam gesprochener Text. Gute Nacht!


speech-rate

This text is read out fairly quickly. I hope you can still understand everything, even though, of course, it is nothing important.

This text is read out very slowly. Good night!

back


stress

Ich habe alle Zeit der Welt. Deshalb bin ich auch ganz gelassen und spreche nur mit einem Stress-Wert von 10.

Immerzu ist alles gleich vorbei. Nie kommt man zu etwas. Alles ist grausam. Deshalb rede ich auch so hastig. Ein Stress-Wert von 90 wurde mir vorgegeben, stellen Sie sich das mal vor!


stress

I have all the time in the world. That is why I am quite relaxed, so that I can read this text with a stress value of only 10.

Everything just rushes by, and there is no time for anything. You can never get anything done, it's just terrible. That is why I am so agitated. They gave me a stress value of 90 for reading this text, just imagine!

back


table-layout

table-layout:auto ohne Breitenangabe

ohne Breitenangabe ohne Breitenangabe ohne Breitenangabe - Spalten mit höherem Platzbedarf wird mehr Breite zur Verfügung gestellt, wenn andere Spalten diese für eine vollständige Darstellung ihrer Inhalte nicht benötigen.

table-layout:fixed ohne Breitenangabe

ohne Breitenangabe ohne Breitenangabe ohne Breitenangabe - Der verfügbare Platz wird unabhängig vom Inhalt der Zellen auf alle Spalten gleichmäßig aufgeteilt.

table-layout:fixed mit teilweiser Breitenangabe

width:25% width:120px Donaudampfschifffahrtsgesellschaft ohne Breitenangabe - Noch verfügbarer Platz wird auf alle Spalten ohne Breitenangabe aufgeteilt. Zu breiter Inhalt wird, wie in der mittleren Spalte dargestellt, abgeschnitten, wenn overflow:hidden definiert wurde.

table-layout:fixed mit Breitenangabe in allen Spalten

width:25% width:25% width:25% - Ist die Breite der gesamten Tabelle größer, als von allen Spalten gemeinsam benötigt wird, wird verfügbarer Platz zu gleichen Teilen auf alle Spalten aufgeteilt. In diesem Beispiel beträgt die Breite jeder Spalte daher effektiv 33 % anstatt der definierten 25 %.


text-align

Der Absatz, den Sie gerade lesen, wurde mit text-align linksbündig ausgerichtet. Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch, damit Sie ein Gefühl für die Prioritäten zwischen den einzelnen Stylesheet-Angaben bekommen.
Noch eine Textzeile
Noch eine Textzeile

Der Absatz, den Sie gerade lesen, wurde mit text-align rechtsbündig ausgerichtet. Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen.
Noch eine Textzeile
Noch eine Textzeile

Der Absatz, den Sie gerade lesen, wurde mit text-align zentriert ausgerichtet. Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen.
Noch eine Textzeile
Noch eine Textzeile

Der Absatz, den Sie gerade lesen, wurde mit text-align als Blocksatz ausgerichtet. Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen. Lange hat es gedauert, bis die ersten Browser in der Lage waren, Blocksatz darzustellen. Mit den 4er-Versionen der beiden führenden Produkte von Netscape und Microsoft ist das jedoch problemlos möglich. Damit der Blocksatz auch wirklich sichtbar wird, enthält dieser Textabsatz diesen überflüssigen Text, der sich aber hoffentlich wenigstens flüssig liest.


text-decoration

Sie kennen sicher die Einstiegsseite zu SELFHTML.
Aber kennen Sie auch die CPAN-Module?
Oder die Sprachenkürzel?
Mit der Textdekoration sind Sie bereits vertraut?


text-indent

Dieser Textabsatz hat eine Texteinrückung von 1em. Texteinrückungen dieser Art sind an die Ästhetik von Büchern oder Zeitungen angelehnt, wo häufig mit dieser Formatierung gearbeitet wird. Damit das auch wirklich sichtbar wird, enthält dieser Textabsatz schließlich noch diesen überflüssigen Satz, der sich aber hoffentlich wenigstens flüssig liest.

Dieser Textabsatz hat eine Texteinrückung von 2em. Texteinrückungen dieser Art sind an die Ästhetik von Büchern oder Zeitungen angelehnt, wo häufig mit dieser Formatierung gearbeitet wird. Damit das auch wirklich sichtbar wird, enthält dieser Textabsatz schließlich noch diesen überflüssigen Satz, der sich aber hoffentlich wenigstens flüssig liest.

Dieser Textabsatz hat eine negative Texteinrückung von -2em. Dem Textabsatz wurde außerdem mit margin-left ein Randabstand von 2em links zugewiesen. Durch diesen Trick lassen sich also nicht nur Texteinrückungen, sondern auch Textausrückungen realisieren. Damit das auch wirklich sichtbar wird, enthält dieser Textabsatz schließlich noch diesen überflüssigen Satz, der sich aber hoffentlich wenigstens flüssig liest.


text-shadow

Großer roter Text mit schwarzem Schatten

Großer blauer Text mit schwarzem Schatten

Der Schatten wird drei Pixel nach rechts und zwei Pixel nach unten versetzt angezeigt.


text-transform

kleiner Beispieltext mit Text-Transformation capitalize
großer Beispieltext mit Text-Transformation capitalize

kleiner Beispieltext mit Text-Transformation uppercase
großer Beispieltext mit Text-Transformation uppercase

kleiner Beispieltext mit Text-Transformation lowercase
großer Beispieltext mit Text-Transformation lowercase


top

Dies ist ein absolut positionierter Text über einer absolut positionierten Grafik.


vertical-align

Text oben Text mittig Text unten


visibility

Die Überschrift zum Text

Hier der Text. Aber fehlt da nicht was?

A1 | A2 | A3
B1 | B2 | B3
C1 | C2 | C3

Überschrift anzeigen, Zeile B verstecken!


voice-family

Dieser Text wird von einer Frau vorgelesen.

Dieser Text wird von einem Mann vorgelesen.

Dieser Text wird von einer alten Frau vorgelesen.

Dieser Text wird von einem alten Mann vorgelesen.

Dieser Text wird von einer jungen Frau vorgelesen.

Dieser Text wird von einem jungen Mann vorgelesen.

Dieser Text wird von einem weiblichen Kind vorgelesen.

Dieser Text wird von einem männlichen Kind vorgelesen.


voice-family

This text should be read out by a woman's voice.

This text should be read out by a man's voice.

This text should be read out by an old woman's voice.

This text should be read out by an old man's voice.

This text should be read out by a young woman's voice.

This text should be read out by a young man's voice.

This text should be read out by a young girl's voice.

This text should be read out by a young boy's voice.

back


volume

Text wird mit der Lautstärke silent gesprochen

Text wird mit der Lautstärke x-loud gesprochen

Text wird mit der Lautstärke 20 gesprochen

Text wird mit der Lautstärke 100 gesprochen


volume

This text is spoken with the volume setting silent.

This text is spoken with the volume setting x-loud.

This text is spoken with the volume setting 20.

This text is spoken with the volume setting 100.

back


white-space

Der Absatz, den Sie gerade lesen, wurde als predefiniert definiert. Zeilenumbrüche sollten dabei so interpretiert werden, wie sie im Editor eingegeben wurden.

Der Absatz, den Sie gerade lesen, darf nicht umbrochen werden. Es sollte kein automatischer Zeilenumbruch erfolgen. Bei diesem längeren Text müssen Sie vermutlich quer scrollen, um alles zu lesen.


widows

Absatz_1:_Zeile_1 Absatz_1:_Zeile_2 Absatz_1:_Zeile_3

Absatz_2:_Zeile_1 Absatz_2:_Zeile_2 Absatz_2:_Zeile_3 Absatz_2:_Zeile_4 Absatz_2:_Zeile_5 Absatz_2:_Zeile_6


width

width mit overflow:hidden

Eine Überschrift, die möglicherweise breiter ist als erlaubt

width ohne overflow

Eine Überschrift, die möglicherweise breiter ist als erlaubt


word-spacing

Beispieltext mit Wortabstand 0.5em
Beispieltext mit Wortabstand 1em
Beispieltext mit Wortabstand 1.5em
Beispieltext mit Wortabstand 2em

Beispieltext mit Wortabstand 8px
Beispieltext mit Wortabstand 13px
Beispieltext mit Wortabstand 20px
Beispieltext mit Wortabstand 32px

Beispieltext mit Wortabstand 6pt
Beispieltext mit Wortabstand 10pt
Beispieltext mit Wortabstand 14pt
Beispieltext mit Wortabstand 24pt

Beispieltext mit Wortabstand 1pc
Beispieltext mit Wortabstand 1.5pc
Beispieltext mit Wortabstand 2pc
Beispieltext mit Wortabstand 2.5pc

Beispieltext mit Wortabstand 3mm
Beispieltext mit Wortabstand 6mm
Beispieltext mit Wortabstand 8mm
Beispieltext mit Wortabstand 10mm

Beispieltext mit Wortabstand 0.1in
Beispieltext mit Wortabstand 0.2in
Beispieltext mit Wortabstand 0.3in
Beispieltext mit Wortabstand 0.4in


-xv-voice-*

-xv-voice-volume

This text is spoken with the volume setting silent

This text is spoken with the volume setting x-loud

This text is spoken with the volume setting 20

This text is spoken with the volume setting 100

-xv-voice-rate

This text is read out fairly quickly. I hope you can still understand everything, even though, of course, it is nothing important.

This text is read out very slowly. Good night!

-xv-voice-pitch

This text is read out with a voice that is as deep as possible. Please try not to be intimidated.

This text is read out with a voice that ist very high. Does it get on your nerves?

-xv-voice-pitch-range

This text is very boring, and that is why it is read with a fairly boring, monotonous voice.

Although this text is also quite boring, it is read with a very animated voice.

speak:-xv-digits

To get through to my stockbroker, I dial 32168.

In the past twelve months, I made a total of 32168 Dollars with shares.

back


z-index

A:2 Hund
B:1 Hund
C:3
D:2 Hund
E:3 Hund
F:-1 Hund


Attribut-Selektoren

Das ist ein Textabsatz, ein stinknormaler.

Das ist ein Textabsatz, rechts ausgerichtet.

Das ist ein Textabsatz, zentriert? Wirklich zentriert?

Berlin | Hamburg
Eine Menge Inhalt zu Berlin | Eine Menge Inhalt zu Hamburg

Ein Textabsatz avec Text about einen English man in New York


Box-Modell: Dokumenttyp HTML 4.01 Strict ohne URI

Dokumenttyp-Deklaration HTML 4.01 Strict ohne URI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Soll-Breite: 280px


Box-Modell: Dokumenttyp HTML 4.01 Transitional ohne URI

Dokumenttyp-Deklaration HTML 4.01 Transitional ohne URI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Soll-Breite: 280px


Box-Modell: Dokumenttyp HTML 4.01 Transitional mit URI

Dokumenttyp-Deklaration HTML 4.01 Transitional mit URI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

Soll-Breite: 280px


Box-Modell: Workaround mittels Modified Simplified Box Model Hack

Workaround mittels Modified Simplified Box Model Hack bei Dokumenttyp-Deklaration HTML 4.01 Transitional mit URI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
Soll-Breite: 280px


Box-Modell: Workaround mittels Tantek-Hack

Workaround mittels Tantek-Hack bei Dokumenttyp-Deklaration HTML 4.01 Transitional mit URI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
Soll-Breite: 280px


Box-Modell: Workaround bei Dokumenttyp HTML 4.01 Transitional ohne URI

Workaround bei Dokumenttyp-Deklaration HTML 4.01 Transitional ohne URI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Soll-Breite: 280px


Klassen-Selektor

Wo finde ich weitere Information über HTML?

Moritz Ratlos, 21.05.2006

Beispielsweise in der HTML 4.01-Recommendation.

Max Hilfreich, 22.05.2006

Vielen Dank für den Link!

Moritz Ratlos, 22.05.2006


Element-Selektor

Überschrift 1. Ordnung

ein normaler Textabsatz

  • Ein Listenpunkt
  • Ein anderer Listenpunkt


Anwender-relative Farbwörter (Systemfarben)

Die Darstellung der hier angeführten Farbwörter orientiert sich an den Einstellungen des Betriebssystems.

Farbwort | Darstellung
ActiveBorder |
ActiveCaption |
AppWorkspace |
Background |
ButtonFace |
ButtonHighlight |
ButtonShadow |
ButtonText |
CaptionText |
GrayText |
Highlight |
HighlightText |
InactiveBorder |
InactiveCaption |
InactiveCaptionText |
InfoBackground |
InfoText |
Menu |
MenuText |
Scrollbar |
ThreeDDarkShadow |
ThreeDFace |
ThreeDHighlight |
ThreeDLightShadow |
ThreeDShadow |
Window |
WindowFrame |
WindowText |


ID-Selektor

Diese Überschrift und zwei positionierte Bereiche

Der rote Bereich

Der blaue Bereich


Klassen-Selektor

H1 ganz normal nur etwas formatiert

H1 knallgelb hinterlegt

H2 ganz normal, türkis lila hinterlegt

H3, rot hinterlegt


Pseudoklassen für Verweise

Vermutlich kennen Sie die Kapiteleinstiegsseite zu CSS
Und wohl auch die Einstiegsseite zu SELFHTML
Aber kennen Sie auch die Geschichte von Hypertext?
Oder die Baumstruktur einer XML-Datei?


style-Attribut

Die Seite mit dem besonderen Element

Hier sind zwar zentrale Formatdefinitionen vorhanden, aber das folgende Element soll etwas Besonderes sein:

Unser Kopf ist rund, damit das Denken die Richtung wechseln kann!


Nachfahrenselektor

Wir lernen Stylesheets

Wir lernen Stylesheets


Nachfahren-Selektor, Kind-Selektor, Nachbar-Selektor

Text in einem div-Bereich mit nur fettem Text und kursivem und dazu fettem Text.

Textabsatz in einem div-Bereich mit nur fettem Text und kursivem und dazu fettem Text.

Textabsatz in einer Tabellenzelle.

Textabsatz außerhalb eines div-Bereichs mit nur fettem Text und kursivem und dazu fettem Text.

Noch ein Textabsatz.


Zweispaltiges Layout - Struktur

  • Einführung in CSS-basierte Layouts
  • Mehrspaltige CSS-basierte Layouts
  • Fixe Bereiche mit CSS-basierten Layouts
  • CSS-basierte Navigationsleisten
  • CSS-Browserweichen

CSS-basierte Layouts

HTML-Struktur ohne CSS

Diese Seite enthält zunächst nur die Struktur und den Inhalt. Das Aussehen wird erst im folgenden Beispiel über CSS definiert.

Dennoch ist diese Seite schon nutzbar und wird vom Browser entsprechend dessen Voreinstellungen bereits sinnvoll angezeigt.


Zweispaltiges Layout mit fester Breite

  • Einführung in CSS-basierte Layouts
  • Mehrspaltige CSS-basierte Layouts
  • Fixe Bereiche mit CSS-basierten Layouts
  • CSS-basierte Navigationsleisten
  • CSS-Browserweichen

CSS-basierte Layouts

Seite mit fester Breite

Diese Seite hat eine feste Breite von 760px und ist zentriert.

Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.


Zweispaltiges Layout - Navigation links

  • Einführung in CSS-basierte Layouts
  • Mehrspaltige CSS-basierte Layouts
  • Fixe Bereiche mit CSS-basierten Layouts
  • CSS-basierte Navigationsleisten
  • CSS-Browserweichen

CSS-basierte Layouts

Navigation links gefloatet

In diese Seite sind nun auch die CSS-Definitionen zur Präsentation eingebunden, durch die u.a. die Navigation links neben dem Inhaltsbereich platziert wird.

Dennoch wäre diese Seite auch ohne CSS nutzbar und würde dann vom Browser entsprechend dessen Voreinstellungen auch sinnvoll angezeigt werden.

Im Internet Explorer bis zur Version 6 werden Sie an dieser Stelle vermutlich auch einen Bug erkennen, der den neben einem floatenden Element stehenden Text zusätzlich um 3px einrückt.


Zweispaltiges Layout - Navigation rechts

  • Einführung in CSS-basierte Layouts
  • Mehrspaltige CSS-basierte Layouts
  • Fixe Bereiche mit CSS-basierten Layouts
  • CSS-basierte Navigationsleisten
  • CSS-Browserweichen

CSS-basierte Layouts

Navigation rechts und umflossen

In dieser Beispielseite ist das CSS nur geringfügig geändert.

Die Navigation ist mit float:right ausgerichtet und wird über margin-left und margin-bottom auf Abstand zum Inhaltsbereich gehalten.

Der Inhaltsbereich hat kein margin mehr und umfließt die Navigation, wodurch sich auch der 3px-Bug des Internet Explorer nicht mehr negativ auswirkt. Die Breite des Inhaltsbereichs ist wie im vorigen Anzeigebeispiel nicht festgelegt, so dass sich die Seite dem zur Verfügung stehenden Anzeigebereich anpasst, diesen optimal ausnutzt und horizontales Scrollen vermieden wird. Verkleinern Sie Ihr Browserfenster, um die Flexibilität dieser Seite zu testen.


Dreispaltiges Layout

  • Einführung in CSS-basierte Layouts
  • Mehrspaltige CSS-basierte Layouts
  • Fixe Bereiche mit CSS-basierten Layouts
  • CSS-basierte Navigationsleisten
  • CSS-Browserweichen
Info-Box

Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren.

Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf die Angabe einer Breite verzichtet werden und die Seite den ihr zur Verfügung stehenden Raum ausnutzen.

Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen durch das falsche Box-Modell des Internet Explorer auszugleichen.

CSS-basierte Layouts

3-spaltiges Layout

In diesem Beispiel ist die Breite der Navigation etwas reduziert, um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen; die Schriftgröße der Navigation und Info-Box ist etwas verringert, um den relativ geringen Breiten Rechnung zu tragen.

Nur für die äußeren Boxen ist eine Breite und float angegeben. Durch die Angabe der Breiten relativ zur Schriftgröße in 'em' können sich die Boxen einer Änderung des Schriftgrades anpassen.

Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand gehalten und passt sich flexibel an die Fensterbreite an.


CSS-Browserweichen

Die folgenden Beispiele werden standardkonform mit grüner Schrift im Rahmen angezeigt, ansonsten mit roter Schrift ohne Rahmen.

Attribut-Selektor: wird vom Internet Explorer bis zur Version 6 ignoriert und definiert hier alle Rahmen.

Kind-Selektor: wird vom Internet Explorer bis zur Version 6 ignoriert.

Star-HTML: wird fälschlich vom Internet Explorer bis zur Version 6 interpretiert.

Star-Plus-HTML: wird fälschlich vom Internet Explorer 7 interpretiert.

Selektor-Kommentar: wird vom Internet Explorer bis Version 5 für Windows und Mac ignoriert.

Medienangabe: wird vom Internet Explorer 4 für Windows und den Mac-Versionen ignoriert.

Element-spezifischer Selektor: wird vom Netscape 4 ignoriert.

Tantek-Hack: wird vom Internet Explorer erst ab Version 6 korrekt interpretiert
- im Netscape 4 kommt es hierdurch zu Fehlern im gesamten Style-Bereich!

Tan-Hack: beeinflusst nur den Internet Explorer vor Version 6
- eine Kombination des Star-HTML- und des Tantek-Hacks für einzelne Definitionen.


Fixierte Navigation nur für moderne Browser

Fixierte Navigation

Beispiel nur für moderne Browser

In diesem Beispiel ist die linke Navigation zunächst absolut positioniert und wird anschließend über eine Browserweiche nur für moderne Browser fixiert. Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.

Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf- und Fußzeile" der vorherigen Seite etwas modifiziert worden. Es passt sich der Fenster- und Schriftgröße an und sogar das SELFHTML-Logo 'wächst' durch die Höhenangabe in em mit einer Schriftvergrößerung.

Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird, wenn die Höhe des Browserfensters sehr stark verringert und/oder die Schriftgröße heraufgesetzt wird!

Sie haben tatsächlich bis hierhin gescrollt? ;-)

  • Einführung in CSS-basierte Layouts
  • Mehrspaltige CSS-basierte Layouts
  • Fixe Bereiche mit CSS-basierten Layouts
  • CSS-basierte Navigationsleisten
  • CSS-Browserweichen


Fixierte Navigation mit Workaround für den IE bis Version 6

Fixierte Navigation

Workaround für den Internet Explorer

In diesem Beispiel sind über einen 'conditional comment' nur für den Internet Explorer bestimmte CSS-Eigenschaften notiert, um auch für diesen Browser die linke Navigation zu fixieren. Somit ist die Fixierung für alle aktuellen Browser nutzbar.

Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf- und Fußzeile" der vorherigen Seite etwas modifiziert worden. Es passt sich der Fenster- und Schriftgröße an und sogar das SELFHTML-Logo 'wächst' durch die Höhenangabe in em mit einer Schriftvergrößerung.

Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird, wenn die Höhe des Browserfensters sehr stark verringert und/oder die Schriftgröße heraufgesetzt wird!

Sie haben tatsächlich bis hierhin gescrollt? ;-)

  • Einführung in CSS-basierte Layouts
  • Mehrspaltige CSS-basierte Layouts
  • Fixe Bereiche mit CSS-basierten Layouts
  • CSS-basierte Navigationsleisten
  • CSS-Browserweichen


Layout mit grafischer Spaltenaufteilung

CSS-basierte Layouts

  • Einführung in CSS-basierte Layouts
  • Mehrspaltige CSS-basierte Layouts
  • Fixe Bereiche mit CSS-basierten Layouts
  • CSS-basierte Navigationsleisten
  • CSS - Browserweichen

2-spaltiges Layout mit Hintergrundgrafik

In diesem Beispiel wird eine Hintergrundgrafik zur optischen Trennung der Spalten verwendet.

Dies erfordert leider, dass die Breite der links stehenden Navigation passend zur Hintergrundgrafik in 'px' angegeben wird. Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades nicht anpassen.

Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen. Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst kein Hintergrund angegeben.
Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert und ist unabhängig von deren Höhe.

Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen, damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.

Diese Fußzeile stellt innerhalb des umschließenden DIVs den Elementenfluss wieder her.


Dreispaltiges Layout mit Kopf- und Fußzeile

CSS-basierte Layouts

  • Einführung in CSS-basierte Layouts
  • Mehrspaltige CSS-basierte Layouts
  • Fixe Bereiche mit CSS-basierten Layouts
  • CSS-basierte Navigationsleisten
  • CSS-Browserweichen

Info-Box

Hatten Sie sich im letzten Beispiel gewundert, warum die Überschrift dieser Box nicht als solche ausgezeichnet war? Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht und erst in diesem die Hauptüberschrift notiert war, wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.

Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert, wodurch auch dieses semantische Problem gelöst ist.

3-spaltiges Layout mit Kopf- und Fußzeile

Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.

Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet und kann genauso gut wie ein <div> über CSS formatiert - hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden. Auch eine Grafik könnte in <h1> als Hintergrundbild definiert oder über <img> eingebunden werden.

Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage. Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite und passen Sie das CSS nach Belieben Ihren Vorstellungen an: experimentieren Sie mit den Größenangaben, Farben und Rändern und fügen Sie z.B. individuelle grafische Elemente ein.

Diese Fußzeile stellt über die CSS-Eigenschaft 'clear' den Elementenfluss wieder her.


Navigationsleisten - Beispiel 1

Navigationsleiste definieren

  • Beispiel 1
  • Beispiel 2
  • Beispiel 3


Dynamische Navigationsleisten

  • Seite 1
  • Seite 2
    • Seite 2a
    • Seite 2b
  • Seite 3
  • Seite 4
    • Seite 4a
    • aktuelle Seite
    • Seite 4c
  • Seite 5


Navigationsleiste mit mehreren Ebenen

Mehrere Navigationsebenen

  • Seite 1
  • Seite 2
    • Seite 2a
    • Seite 2b
    • Seite 2c
  • Seite 3
  • Seite 4


Horizontale Navigationsleiste mit gleichen Breiten

  • Seite 1
  • Seite 2
  • Seite 3
  • aktuelle Seite
  • Seite 5


Navigationsleisten - Beispiel 2

Navigationsleiste formatieren

  • Beispiel 1
  • Beispiel 2
  • Beispiel 3


Geteilte Navigationsleisten

  • Seite 1
  • Seite 2
    • Seite 2a
    • Seite 2b
  • Seite 3
  • Seite 4
    • Seite 4a
    • aktuelle Seite
    • Seite 4c
  • Seite 5


Navigationsleiste mit mehreren Ebenen ohne CSS

Mehrere Navigationsebenen ohne CSS

  • Seite 1
  • Seite 2
    • Seite 2a
    • Seite 2b
    • Seite 2c
  • Seite 3
  • Seite 4


Horizontale Navigationsleiste zentriert

  • Seite 1
  • Seite 2
  • Seite 3
  • aktuelle Seite
  • Seite 5
  • Seite 6


Dynamisch Navigationsleisten auch im IE einblenden

  • Seite 1
  • Seite 2
    • Seite 2a
    • Seite 2b
  • Seite 3
  • Seite 4
    • Seite 4a
    • aktuelle Seite
    • Seite 4c
  • Seite 5


Dynamisch Navigationsleisten einblenden

  • Seite 1
  • Seite 2
    • Seite 2a
    • Seite 2b
  • Seite 3
  • Seite 4
    • Seite 4a
    • aktuelle Seite
    • Seite 4c
  • Seite 5


Navigationsleisten - Beispiel 3

Navigationsleiste mit 'Rollover'

  • Beispiel 1
  • Beispiel 2
  • Beispiel 3


Navigationsleiste mit Überschriften

  • Rubrik 1

  • Seite 1
  • Seite 2
  • Seite 3

  • Rubrik 2

  • aktuelle Seite
  • Seite 5
  • Seite 6

  • Rubrik 3

  • Seite 7
  • Seite 8
  • Seite 9


Test


Test

Willkommen auf dieser Seite

hier gehts ganz normal weiter


Test

Test der dhtml.js

Die Tests testen die Funktionen der DHTML-Bibliothek

Testbild Test starten


Test

Die Seite mit der pfiffigen Navigation

Einfach mit die Maus Richtung linken Fensterrand bewegen. Um das Menü wieder wegzubekommen, Maus wieder zum rechten Fensterrand bewegen.

Und jetzt kommen noch etliche leere Absätze, damit auch sichtbar wird, dass das Menü immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.

Na, das dürfte reichen :-)


Test

Adressen
Name:
Vorname:
Straße:
Postleitzahl:
Wohnort:
Telefon:
E-Mail:


Name|Vorname|Strasse|PLZ|Ort|Tel|EMail
Berger|Hans|Pfisterstr.11|38487|Grubenhausen|04987-4445631|berger@kabumm.de
Heidenfroh|Martina|Mittelweg 123|43985|Hatzenau|04583-2398474|mh@heidenfroh.com
Rauhbein|Eberhard|Traumstr.13|56097|Höllenbachhausen|068347-582374|-
Truthahn|Gerlinde|Aufplatz 1|93722|Sündenstadt|032987-385750|gerlinde@metawelt.net


Test

1.
Man kann nur Brücken schlagen zwischen Ufern, die man auseinanderhält.

2.
Je größer die Erwartung, desto unmöglicher die Erfüllung.

3.
Wer sich aufgibt, liebt nicht, weil er sich nicht liebt; nur wer sich verschenkt, liebt, weil er sich liebt.


Test

Ein Textabsatz. Klicken Sie hinein

Ein anderer Textabsatz. Klicken Sie hinein

Noch ein Textabsatz. Klicken Sie hinein

Ein letzter Textabsatz. Klicken Sie hinein

Hier erscheinen Infos zum Klick


Test

 Feedback Hier Ihr Feedback:
Support Unser Support ist wirklich Bla Bla Produkte Unsere Produkte sind ja so wahnsinnig Bla Bla HOME Unser Home ist unser Bla Bla


Test

Zeig das Bild an
Versteck das Bild


Test

Ein Bereich
  1. Ereignisliste


Test

Hier kommt der Text
Hier geht der Text


Test

 HTML ist die Sprache für die Strukturierung von Hypertext-Projekten. Logos und Godfather aller Web-Seiten. Vermutlich das erfolgreichste Dateiformat der EDV-Geschichte. CSS ist die Sprache für die Formatierung von Web-Seiten. Physis und Sohnprinzip. Klinkt sich nahtlos in HTML ein und sorgt dafür, das Strukturen zu Farben und Formen werden. JavaScript ist die Sprache für Dynamische Web-Seiten. Kinesis und Geistprinzip. Klinkt sich nahtlos in HTML ein und zunehmend auch in CSS. Ist allerdings am schwersten zu verstehen. HTML CSS JavaScript


Test

ICH


Test

Geben Sie in dem Feld Text ein und klicken Sie dann auf "Interaktion"


Test

Klicken Sie auf das Bild, nachdem es vollständig angezeigt ist.

Das ist Madrid


Test

Ihr WWW-Browser beherrscht folgende Script-Sprachen:


Test

Was Sie schon immer wissen wollten über ...

SECHS
Es handelt sich dabei einfach um eine Zahl, die exakt ein halbes Dutzend bezeichnet.


Test

Einen springen lassen...

Springe nach: links oben | rechts oben | links unten | rechts unten

Bewege nach: links | rechts | oben | unten


Test

Klicken Sie mit der Maus irgendwohin!


Test

Große Städte alphabetisch von A bis Z

  1. Berlin
  2. Dortmund
  3. Dresden
  4. Düsseldorf
  5. Essen
  6. Frankfurt
  7. Hamburg
  8. Hannover
  9. Köln
  10. Leipzig
  11. München
  12. Nürnberg
  13. Stuttgart


Test

Klicken Sie auf diesen Text


Test

Top-Link?
Nächster Top-Link!
TopLinks: in neues Fenster laden! oder ins aktuelle Fenster laden!


Test

Klicken Sie auf die Beispieltexte Effekt bei Text und die Grafiken, um den jeweiligen Filter-Effekt zu sehen:

Transition=0 | Box-Effekt außen nach innen | Effekt bei Text | Effekt bei Grafik
Transition=1 | Box-Effekt innen nach außen | Effekt bei Text | Effekt bei Grafik
Transition=2 | Kreis-Effekt von außen nach innen | Effekt bei Text | Effekt bei Grafik
Transition=3 | Kreis-Effekt von innen nach außen | Effekt bei Text | Effekt bei Grafik
Transition=4 | Aufroll-Effekt von unten nach oben | Effekt bei Text | Effekt bei Grafik
Transition=5 | Aufroll-Effekt von oben nach unten | Effekt bei Text | Effekt bei Grafik
Transition=6 | Aufroll-Effekt von links nach rechts | Effekt bei Text | Effekt bei Grafik
Transition=7 | Aufroll-Effekt von rechts nach links | Effekt bei Text | Effekt bei Grafik
Transition=8 | Streifen-Effekt von links nach rechts | Effekt bei Text | Effekt bei Grafik
Transition=9 | Streifen-Effekt von oben nach unten | Effekt bei Text | Effekt bei Grafik
Transition=10 | Rechteck-Effekt von links nach rechts | Effekt bei Text | Effekt bei Grafik
Transition=11 | Rechteck-Effekt von oben nach unten | Effekt bei Text | Effekt bei Grafik
Transition=12 | Zerbröselungseffekt in alle Richtungen | Effekt bei Text | Effekt bei Grafik
Transition=13 | Aufroll-Effekt beidseitig von außen nach innen | Effekt bei Text | Effekt bei Grafik
Transition=14 | Aufroll-Effekt beidseitig von innen nach außen | Effekt bei Text | Effekt bei Grafik
Transition=15 | Zuklapp-Effekt von oben und unten | Effekt bei Text | Effekt bei Grafik
Transition=16 | Aufklapp-Effekt nach oben und unten | Effekt bei Text | Effekt bei Grafik
Transition=17 | Aufroll-Effekt von rechts oben nach links unten | Effekt bei Text | Effekt bei Grafik
Transition=18 | Aufroll-Effekt von rechts unten nach links oben | Effekt bei Text | Effekt bei Grafik
Transition=19 | Aufroll-Effekt von links oben nach rechts unten | Effekt bei Text | Effekt bei Grafik
Transition=20 | Aufroll-Effekt von links unten nach rechts oben | Effekt bei Text | Effekt bei Grafik
Transition=21 | Jalousie-Effekt waagerecht | Effekt bei Text | Effekt bei Grafik
Transition=22 | Jalousie-Effekt senkrecht | Effekt bei Text | Effekt bei Grafik
Transition=23 | Zufallseffekt aus Effekten 0-22 | Effekt bei Text | Effekt bei Grafik

Bei Transition=23 ist ein Neuladen der Seite erforderlich, damit ein anderer Zufallseffekt gewählt wird.


Test

Hier ist Seite 1

und ein Link zu Seite 2


Test

Und das hier ist Seite 2

Sie sieht ein klein wenig anders aus, aber nicht viel.

und das ist ein Link, der wieder zu Seite 1 geht


Test

 Titelleiste des grünen Layers Klicken Sie mal mit der Maus in die Titelleiste dieses Layers, halten Sie die Maustaste gedrückt und ziehen Sie dann die Maus an eine andere Stelle. Titelleiste des gelben Layers Klicken Sie mal mit der Maus in die Titelleiste dieses Layers, halten Sie die Maustaste gedrückt und ziehen Sie dann die Maus an eine andere Stelle.


Test

Klicken Sie auf den folgenden Text:

Wer HTML nicht ehrt


Test

Wer HTML nicht ehrt


Test

Wichtigtuer


Wörterbuch

Die durchsuchbare Datenbank enthält 1000 Einträge. Suchen Sie nach Begriffen in einer oder mehreren Sprachen. Bei der Suche in mehreren Sprachen werden die Eingaben logisch durch UND verknüpft. Sie dürfen auch das Wildcard-Zeichen * für Teilausdrücke verwenden. Suchen Sie z.B. mal im Feld (Deutsch) nach Arbeits* oder im Feld (Italienisch) nach *ore oder im Feld (Englisch) nach *computer.

Suche nach:
(Deutsch)
(Englisch)
(Franzoesisch)
(Italienisch)
(Spanisch)
Deutsch: Englisch: Französisch: Italienisch: Spanisch:


Deutsch;Englisch;Französisch;Italienisch;Spanisch
allemand;anglais;français;italien;espagnol
Rechner;computer;ordinateur;computer, calcolatore;ordenador
Maschine;machine (s);machine;macchina;máquina
Personalcomputer;personal computer;ordinateur personnel (s);computer personale;ordenador personal
arbeitender Rechner;active computer;ordinateur actif;computer attivo;ordenador activado
mathemathischer Rechner;arithmetic computer;calculateur arithmétique;calcolatore matematico;ordenador aritmético
kommerzieller Rechner;business computer;ordinateur de gestion;calcolatore di affari ;ordenator de gestión
Nebenrechner;slave computer;ordinateur asservi;calcolatore secondario ;ordenador auxiliar
Tischrechner;desktop computer;ordinateur de bureau;calcolatore della tabella;ordenador de sobremesas
Universalrechner;all-purpose computer;calculateur polyvalent;calcolatore universale;ordenador polivalente
Einzelrechner;stand-alone computer;ordinateur indépendant;calcolatore autonomo;ordenador único
Einplatinenrechner;single-board computer;ordinateur monoplaque;;ordenador de 1 platina
Schlüssel;key (s);clé;chiave;llave
Prozessor;processor;processeur;processore;procesador
Glocke, Klingel;bell (s);sonnerie;campanello;timbre
Knopf;button (s);bouton;bottone;botón
Koprozessor;coprocessor;coprocesseur;coprocessore;coprocesador
Mikroprozessor;microprocessor;microprocesseur;microprocessor;microprocesador
Lautsprecher;loudspeaker, speaker;haut-parleur;altoparlante;altavoz
funktionieren;work, operate, function;fonctionner;funzionare;funcionar
Bedienung;operating, attendance;opération;manovra, maneggio;operante
Notfall;emergency;état d'urgence;caso d'emergenza;estado de emergencia
abschalten;switch off, break;éteindre, interrompre;interrompere, spegnere;desconectar
einschalten;turn on, activate (v);allumer;inserire, accendere;conectar
bedienen;operate (v);opérer;manovrare;funcionar
in Betrieb;active, operational (a);actif,ve;in funzione;activo, en actividad
nicht angeschlossen;off line;hors ligne;fuori linea;fuera de línea
Taste;key (s);touche;tasto;tecla
Tastatur;keyboard;clavier;tastiera;teclado
drücken;press, push (v);presser;premere;pulsar
umschalten;shift (v);décaler, commuter;commutare;desplazar
Tabulatortaste;tab key;touche de tabulateur;tasto di tabulazione ;tecla del tabulador
Tastenanschlag;keyboard stroke;frappe d'une touche;colpo della tastiera;golpe de tecla
Wiederholungsrate;repetition rate;fréquence de répétition;tasso di ripetizione;frecuencia de repetición
feststellbare Taste;stay-down key;touche d'arrêt;tasto fissabile;tecla fijable
Farbe;colour (s);couleur;colore;color
Bildschirm;screen, display (s);écran, terminal vidéo;schermo;pantalla
grün;green (a);vert;verde;verde
weiß;white (a);blanc;bianco;blanco
schwarzweiß;black-and-white;noir et blanc;bianco e nero;blanco y negro
Auflösung;resolution;résolution;risoluzione;resolución
Rollen (Bildschirm);scrolling (s);défilement;scorrimento;desfile
Spiegelung;reflex (s);réflexion;riflesso;reflexión
Helligkeit;brightness;luminosité;luminosità;reflexibildad media
Kontrast;contrast (s);contraste;contrasto;contraste
Schreibmarke;cursor (s);curseur;cursore;cursor
Bild;image (s);image;immagine;imagen
Kontrollbildschirm;monitor (s);moniteur;monitore;monitor
bernsteinfarben;amber (a);ambré;ambrato;ambarino
monochrom;monochrome (a);monochrome, monocouleur;monocromo;monocromo
Grafikauflösung;graphic resolution;résolution matricielle;resoluzione grafica;resolución gráfica
Farbmonitor;colour monitor/terminal;moniteur couleur;monitore a colore;monitor color
Bildschirmauflösung;screen resolution;résolution (de l'écran);risoluzione dello schermo;resolución en pantalla
Rasterpunkt;screen dot;point de trame;puntino di schermo;punto reticular
blendfrei;non-reflecting,glarefree;anti-éblouissant;antiriflessione;irrefractable
entspiegelt;with anti-reflection;anti-reflet;antibrillo;antibrillo
Raum;room (s);salle;locale;sala
Computerraum;computer room;salle d'ordinateurs;locale di calcolo;sala de ordenador
Arbeitsplatz;workplace;lieu de travail;posto di lavoro;lugar de trabajo
Rechenzentrum;computer center;centre de traitement;centro di calcolo;centro de proceso
Elektronengehirn;electronic brain;cerveau électronique;calculatore elettronico;cerebro electrónico
Daten;data;données;dati;datos
Bit;bit, binary digit;chiffre binaire;bit;dígito binario
Byte, Bitgruppe;byte (s);octet, groupe de 8 bits;byte;octeto, grupo de 8 bits
Dichte;density;densité;densità;densidad
Fluss, Datenstrom;flow (s);circulation;flusso;flujo, circulación
packen, verdichten;pack (v);condenser;condensare;condensar
binär;binary (a);binaire;binario;binario
digital;digital (a);numérique;digitale;numérico, digital
Datenstruktur;data structure;structure des données;struttura dei dati;estructura de datos
Datenbestand;data base;base de données;base dei dati;base de datos
personenbezogene Daten;personal data;données personnelles;dati personali;datos personales
Datenfluss;data flow / stream;circulation de données;flusso di dati;flujo de datos
Massendaten;mass data;données de masse;dati di massa;datos de masa
Datenbeschreibung;data description;description de données;descrizione dei dati;descripción de datos
Speicher;memory, storage;mémoire;memoria;memoria de trabajo
Bereich, Gebiet;area, zone;zone;area, zona, campo;zona, campo
Puffer;buffer (s);mémoire intermédiaire;;memoria intermedia
Adresse;address (s);adresse;indirizzo;dirección
absolut;absolute (a);absolu, réel;assoluto;absoluto, real
relativ;relative (a);relatif;relativo;relativo
Fassungsvermögen;capacity;capacité;capacità;capacidad
Kern;core (s);noyau;nucleo;núcleo
Register;register (s);registre;registro;registro
adressieren;address (v);adresser;indirizzare;direccionar, dirigir
auffrischen;refresh (v);régénérer;rigenerare;regenerar
tatsächlich;actual, real (a);réel;effettivo, reale;actual, real, de hecho
virtuell;virtual (a);virtuel;virtuale;virtual
dauerhaft;permanent (a);permanent;duraturo, costante;permanente
indirekt, mittelbar;indirect (a);indirect;indiretto;indirecto
Speichererweiterung;add-on memory;augmentation de mémoire;;ampliación de memoria
aktuelle Adresse;actual address;adresse réelle;indirizzo attuale;dirección real
Adressfehler;address error;erreur d'adresse;;error de dirección
Adressfeld;address array / field;zone d'adresse;;campo de dirección
aktiver Speicher;active storage;mémoire active;memoria attiva;memoria activa
Maschinenadresse;absolute/machine address;addresse absolue;indirizzo assoluto;dirección absoluta
Nulladresse;zero address;sans adresse;;sin dirección
Anfangsadresse;start address;adresse de démarrage;;dirección de arranque
Arbeitsspeicher;working / scratch memory;mémoire de travail, mémoire vive;;almacén operativo
virtueller Speicher;virtual memory;mémoire virtuelle;memoria virtuale;memoria activa virtual
Speicherorganisation;storage organization;organisation de mémoire;;organización de almacén
Arbeitsbereich;work area;zone de travail;;área operativa
tatsächliche Adresse;real address;adresse réelle;;dirección real
Direktzugriffsspeicher;random access memory,RAM;mémoire à accès sélectif;memoria de acceso casual;v
physische Adresse;physical address;adresse physique;indirizzo fisico;dirección física
Festspeicher;read-only memory, ROM;mémoire à simple lecture;;memoria sólo lectura
Hauptspeicher;main / central memory;mémoire principale;;memoria principal
Speicherbank;memory bank;banque de mémoire;;banco de memoria
Zugriffsart;access mode / method;mode / méthode d'accès;;modo / método de acceso
Speichergröße;memory size;capacité de mémoire;;tamaño de la memoria
optischer Speicher;optical memory;mémoire optique;memoria ottica;memoria óptica
Speicherfähigkeit;memory/storage capacity;capacité d'enregistrement;;capacidad de memoria
relative Adresse;relative address;adresse relative;indirizzo relativo;dirección relativa
indirekte Adresse;indirect address;adresse indirecte;indirizzo indiretto;dirección indirecta
Eingabepuffer;input buffer;tampon d'entrée;;tampón de entrada
variable Adresse;variable address;adresse variable;indirizzo variabile;dirección variable
verfügbarer Speicher;available memory;mémoire disponible;memoria disponibile;memoria disponible
aufteilen;partition (v);segmenter;spartire, ripartire;segmentar
Speicherzuweisung;memory allocation;affectation de mémoire;;asignación de memoria
Speicherdichte;storage density;densité de mémoire;;densidad de almacenaje
virtuelle Adresse;virtual address;adresse virtuelle;indirizzo virtuale;dirección virtual
Mehrfachadressierung;multi-addressing;adressage multiple;;multidireccional
Pufferbereich;buffer area /stack;zone intermédiaire;;zona intermedia
unmittelbarer Zugriff;immediate access;accès immédiat;accesso immediato;acceso inmediato
begrenzte Kapazität;limited capacity;capacité limitée;capacità limitata;capacidad limitada
ungültige Adresse;invalid address;adresse invalide;;dirección inválida
Datei;file (s);fichier;file, archivio;fichero
Bezeichnung, Etikett;label (s);étiquette;etichetta;etiqueta
Erstellung;creation;création;creazione;creación
schließen;close (v);fermer;chiudere, terminare;cerrar
Dateiformat;file format;format de fichier;;formato fichero
Dateiname;file name;nom de fichier;;nombre del fichero
Dateigröße;file size;volume de fichier;;tamaño de un fichero
Dateiende;end of file, EOF;fin de fichier;;fin de fichero
eine Datei eröffnen;open a file;ouvrir un fichier;;abrir un fichero
Block;block (s);bloc;blocco;bloque
schreiben;write (v);écrire;scrivere;escribir
lesen;read (v);lire;leggere;leer
Zugriff;access (s);accès;accesso;acceso
Aufzeichnung;record (s);enregistrement;registrazione;registro
Suche;search (s);recherche;ricerca;búsqueda
speichern, abspeichern;store, memorize, poke;mémoriser;memorizzare;memorizar, almacenar
auslesen;peek, read out;extraire;selezionare;extraer, seleccionar
löschen;delete,erase,scratch,zap;effacer;cancellare;borrar
Schreibfehler;write error;erreur d'écriture;errore di scrittura;error escribiendo
Lesefehler;read error;erreur de lecture;errore di lettura;error de lectura
Lesegeschwindigkeit;reading speed / rate;vitesse de lecture;velocità di lettura;velocidad de lectura
Datenfehler;data error;erreur de données;;error de datos
Bits je Zoll;bits per inch;bits par pouce;;bits por pulgada
Sicherheit;security, safety;sécurité;sicurezza;seguridad
Passwort, Kennwort;password, code word;mot de passe;;palabra de paso
Verlust;loss (s);perte;perdita;pérdida
schützen;protect (v);protéger;proteggere;proteger
sicher;safe (a);sûr;sicuro;seguro
Schutz;protection;protection;protezione;protección
Wiedererstellung;regeneration;régénération;restauro;regeneración
wiedergewinnen;retrieve, recover (v);récupérer;ricuperare;recuperar
sichern;back up, save (v);préserver;proteggere;asegurar
kodieren;code (v);coder;codificare;codificar
unsicher;insecure, unsafe (a);peu sûr, incertain;poco sicuro, instabile;inseguro
Speicherschutz;storage protection;protection de la mémoire;;protección de almacén
Sicherungskopie;backup copy;copie de réserve;;copia de reserva
Datenschutz;data safety;protection des données;protezione dati;protección de los datos
Sicherheitsvorrichtung;safety device;dispositif de sécurité;dispositivo di sicurezza;dispositivo de seguridad
entschlüsseln;decrypt, decipher (v);déchiffrer;decifrare;decodificar
chiffrieren;encrypt (v);coder;cifrare;cifrar
verschlüsseln;scramble (v);brouiller;cifrare;cifrar
Rückgewinnung von Daten;information retrieval;récupération de données;;búsqueda de información
Drucker;printer;imprimante (f);stampatore;impresora
anschlagen;strike (v);frapper;toccare;golpear
Laserdrucker;laser printer;imprimante laser (f);stampa laser;impresora láser
Typenraddrucker;daisy wheel printer;imprimante à marguerites;;impresora de rueda
Thermoprinter;thermal printer;imprimante thermique;;impresora térmica
Nadeldrucker;matrix printer;imprimante matricielle;;impresora con matriz
Tintenstrahldrucker;inkjet printer;imprimante à jet d'encre;;impresora rayos color
serieller Drucker;serial printer;imprimante en série;stampatore seriale;impresora en serie
Matrixdrucker;dot-matrix printer;imprimante matricielle;;impresora matrix
Nadel;needle (s);aiguille;spilla;aguja
Behälter, Magazin;bin (s);case;recipiente;casilla
paralleles Druckerkabel;centronics cable;cable centronics;cavo parallelo;cable centronics
Druckerpuffer;printer buffer;mémoire tampon d'imprimante;;tampón de impresión
Einzelblattzuführung;sheet feed;alimentation en feuilles;;alimentación en hojas
Druckerfarbband;print ribbon;ruban d'impression;nastro (di stampa);cinta de impresora
Typenrad;print wheel, daisy wheel;roue d'impression;;rueda de impresión
Stachelwalze;tractor;entraîneur;;tractor
Format;format (s);format;formato;formato
Zeile;line (s);ligne;riga;línea
drucken;print (v);imprimer;stampare;imprimir
Schriftart;font;ensemble de caractères;scrittura;conjunto de caracteres
Rand;margin (s);marge;margine;margen
Spalte;column;colonne;colonna;columna
unterstreichen;underline (v);souligner;sottolineare;subrayar
etikettieren, bezeichnen;label (v);étiquetter;etichettare;etiquetar
grafisch;graphic(al);graphique;grafico;gráfico
Druckqualität;printing quality;qualité d'impression;qualità di stampa;calidad de impresión
Druckgeschwindigkeit;printing speed / rate;vitesse d'impression;velocità di stampa;velocidad de impresión
Korrespondenzqualität;letter quality;qualité courrier;qualità di lettera;calidad carta
Bildschirmausdruck;hard copy;;;copia impresa
Drucken im Hintergrund;background printing;impression du fond;;impresión del fondo
Zeilenende;end of line;fin de ligne;;fin de línea
Druckdatei;printer file;fichier d'imprimante;file di stampa;fichero de impresora
Zeilen anfügen;add lines;ajouter des lignes;aggiungere dei righi;suministrar líneas
Zeichen pro Sekunde;characters per second;caractères par seconde;;caracteres por segundo
Reihe;row, tier (s);rangée;fila, serie;hilera
ausrichten;align (v);aligner;allineare;alinear
linksbündig;left justified;aligné à gauche;;alineado a la izquierda
kursiv;in italics;en italique;corsivo;en (letra) cursiva
Kleinbuchstabe;small letter;lettre miniscule;(lettera) minuscola;letra minúscula
Lücke;gap, space (s);espace;vuoto;espacio, hueco
Schriftzeichen;character (s);caractère;carattere;carácter de escritura
Großbuchstabe;upper case character;lettre majuscule;maiuscola;carácter en mayúscula
Blockschrift;block letters;majuscules;scrittura in stampatello;carácteres de imprenta
Zeichenvorrat;character set;jeu de caractères;;juego de caracteres
Grafikzeichen;graphic character;caractère graphique;carattere grafico;carácter gráfico
Anführungszeichen;quotation mark;guillemets;virgolette;comillas
Fragezeichen;question mark;point d'interrogation;punto interrogativo;carácter d.interrogación
Schrägstrich;slash (s);barre de fraction;linea obliqua;barra de fracción
auffüllen (String);pad (v);remplir, garnir;riempire;llenar
Seite (Buch, Speicher);page (s);page (f);pagina;página
Tabelle;table (s);table;tabella;tabla
Blatt;sheet (s);feuille;foglio;hoja
Papier;paper (s);papier;carta;papel
Liste;list (s);liste;lista;lista
falten;fold (v);plier;piegare;plegar
zuführen, füttern;feed (v);alimenter;rifornire;alimentar
Endlospapier;endless paper;papier sans fin;;papel sin fin
kein Papier;paper out;fin de papier;;fin de papel
Formular;form (s);formulaire;modulo, formulario;formulario
papierlos;paperless (a);sans papier;;sin papel
Papierstau;paper jam;bourrage de papier;;atascamiento de papel
Papier zu Ende;out of paper;fin de papier;;fin de papel
Einheit;unit (s);unité;unità;unidad
seriell;serial (a);en série;in serie;en serie
parallel;parallel (a);paralèlle;parallelo;paralelo
Zubehör;accessory equipment;matériel auxiliaire;accessori;equipo accesorio
Schnittstelle;interface, port;prise;uscita;salida, ranura
Ausstattung;outfit (s);équipement;equipaggiamento;equipo
Gerät;device, apparatus;dispositif, unité;strumento, apparecchio;dispositivo, aparato
koppeln;couple (v);coupler;accoppiare;acoplar
eingebaut;built-in;incorporé;incorporato;incorporado
parallele Schnittstelle;parallel interface;prise paralèlle;uscita parallela;salida puerto paralelo
Datensicherungseinheit;backup unit;unité de réserve;unità backup;unidad de reserva
Datenspur;data track;piste de données;;pista de datos
Eingangskanal;input channel;canal d'entrée;;canal de entrada
digitalisieren;digitalize (v);convertir en numérique;;convertir en digitos
serielle Schnittstelle;serial port;prise serie;uscita serie;salida en serie
Standardschnittstelle;standard interface;interface standard;;ranura standard
serieller Zugriff;serial access;accès en série;accesso seriale;acceso en serie
Diskette;disk;disque;floppy disk;disco
Kopf;head (s);tête (de lecture);testa;cabeza (de lectura)
Spur;track (s);piste;pista;pista
Sektor;sector (s);secteur;settore;sector
Plattenkapazität;disk capacity;capacité d'un disque;memoria di disco;capacidad de un disco
einsteckbare Festplatte;hard card;carte disque dur;disco targhetta;disco tarjeta
Festplatte;hard disk;disque dur;disco duro;disco duro / disco fijo
Bildplatte;video disk;vdéodisque;videodisco;vídeo-disco
Schreibkopf;write head;tête d'écriture;testa di scrivere;cabeza de escritura
Wechselplatte;removable disk;disque interchangeable;disco smontabile ;disco cambiable
Lesekopf;read head;tête de lecture;testa di scrivere;cabeza de lectura
Plattengeschwindigkeit;disk speed;vitesse de disque;;velocidad de los discos
Spurendichte;track density;densité d'enregistrement;;densidad de trayecto
Diskette wechseln;change disk;changement de disque;;cambio de disco
Laufwerk;drive (s);dispositif;;mecanismo
falsche Diskette;invalid disk;disquette invalide;disco sbagliato;disco incorrecto
Schreibschutz;write protection;protection d'écriture;;protección de escritura
Platteneinheit;disk unit;unité à disques;;unidad con discos
Laufwerk nicht bereit;drive not ready;lecteur non prêt;unità non preparata;unidad no preparada
Diskette einlegen;insert disk;insérez la disqette;introdurre il disco;introduzca el diskette
Band;tape (s);bande;nastro;cinta
Nachspann;trailer;fin de bande;;fin de cinta
Magnetbandstation;streamer;station à bande magnétique;;estación banda magnética
Streifen;strip (s);bande;nastro, striscia;tira, cinta, banda
Spule;reel (s);bobine;bobina;carrete, bobina
zurückspulen;rewind (v);rebobiner;;rebobinar
leer, unbespielt;blank (a);blanc, vierge;bianco;blanco, virgen
Bandspur;tape track;piste de bande;pista;pista de cinta
Bandspule;tape reel;bobine de bande;bobina;bobina de cinta
Bandaufzeichnung;tape recording;enregistrement sur bande;registrazione su nastro;grabación en cinta
Magnetband;magnetic tape;bande magnétique;nastro magnetico;cinta magnética
Sicherungsband;backup tape;bande de réserve;;cinta de reserva
Mutterband;master tape;bande principale;;cinta principal
Bandgerät;tape recorder;enregistreur de bande;registratore a nastro;grabador de cinta
Bandantrieb;tape drive;dérouleur de bande;;unidad de cinta
abtasten, rastern;scan (v);explorer;esplorare;explorar
Maus;mouse;souris;topo;ratón
Farbstift, Bleistift;pencil (s);crayon;matita colorata;lápiz
kopieren;copy (v);copier;copiare;copiar
Schreibmaschine;typewriter;machine à écrire;macchina da scrivere;máquina de escribir
Zeichengerät, Plotter;plotter;traceur (de courbes);;trazador (de curvas)
Roboter;robot (s);robot;robot;robot
lochen;perforate, punch (v);perforer;perforare;perforar
optisch;optical (a);optique;ottico;óptico
serielles Kabel;serial cable;câble séquentiel;cavo serie;cable en serie
optische Platte;optical disc;disque optique (m);disco ottico;disco óptico
Lichtstift;light pen;photostyle;;marcador/lápiz luminoso
Lochkarte;punched card;carte perforée;scheda perforata;ficha perforada
Lochung;perforation;perforation;perforazione;perforación
Geschwindigkeit;speed (s);vitesse;velocità;velocidad
Erweiterung;expansion, extension;extension;espansione;expansión
erweitern;expand, extend (v);augmenter;espandere, ampliare;ampliar
Erweiterungskarte;option board;carte optionelle;;tarjeta opcional
Videoadapter;video card;carte graphique video;targhetta video;tarjeta video
Eingabe- / Ausgabekarte;i/o card;carte entrée/sortie;targhetta I/O;tarjeta entrada/salida
Multifunktionskarte;multifunction board;carte multifonction (f);carta multifunzionale;tarjeta multifunción
beschleunigen;accelerate, speed up;accélérer;accelerare;acelerar
Beschleunigungskarte;accelaration board;carte d'accélération;targhetta acceleratore;tarjeta aceleradora
auswechselbar;removable (a);amovible;intercambiabile;amovible, recambiable
Zeiger;pointer;pointeur;indicatore;indicador
Prozess;process (s);processus;processo;proceso
Aufgabe, Arbeit, Job;job, task (s);travail;incarico, funzione;trabajo, tarea
Rate;rate (s);taux;quota;tasa
System;system;système;sistema;sistema
Wartezeit;waiting time;temps d'attente;tempo d'attesa;tiempo de espera
Verzeichnis;directory;répertoire;lista, registro;directorio, repertorio
Umgebung;environment;environnement;ambiente;ambiente
Suchpfad;path (s);chemin, branche;;rama, camino
zeitliche Regulierung;timing (s);synchronisation;;regulación temporal
Zustand;status, state (s);état;stato;estado
Warteschlange;queue (s);file d'attente;;cola de espera
Zyklus, Kreislauf;cycle (s);cycle;ciclo;ciclo
Stapel;batch, stack (s);pile;;pila
Hintergrund;background;arrière-plan;sfondo;segundo plano
Art, Modus;mode (s);mode;modo;modo
Sitzung;session (s);session;seduta;sesión
prüfen, kontrollieren;check (v);contrôler, vérifier;controllare, verificare;controlar, verificar
regeln, steuern, leiten;control (v);contrôler;regolare;controlar
betriebsbereit;operational (a);opérationnel;operativo;operacional
Systemanalyse;systems analysis;analyse de systemes;analizzazione di sistemi;análisis de sistemas
Zugriffszeit;access time;temps d'accès;tempo d'accesso;tiempo de acceso
Prozesskontrolle;process control;contrôle de processus;controllo del processo;control de proceso
Stapelüberlauf;buffer overflow;dépassement de capacité;;tampón desbordado
Betriebssystem;operating system;systeme d'exploitation;sistema operativo;sistema operativo
Stapelprozess;batch process;traitement par lots;;proceso por lotes
Systemzustand;system status;mode de système;;status del sistema
Systemsteuerung;system control;contrôle du système;;control del sistema
Systemprogramm;system program;programme du système;;programa del sistema
Teilnehmerbetriebssystem;time-sharing system;système en temps partagé;;sistema en t. compartido
Systemebene;system level;niveau du système;;nivel del sistema
Plattenbetriebssystem;disk operating system;système de travail;;sistema operativo discos
Stapeldatei;batch file;fichier de travail;;fichero de trabajo
Hintergrundprogramm;background program;programme secondaire;;programa secundario
überwachen;supervise, control (v);superviser;sorvegliare;supervisar
verträglich;compatible (a);compatible;compatibile;compatible
vorübergehend, flüchtig;transient (a);transitoire;transitorio;transitorio, temporal
Hauptinhaltsverzeichnis;root directory;répertoire racine;;índice principal
Taktzyklus;clock cycle;cycle rythmeur;;ciclo de reloj
Zugriffskontrolle;access control;contrôle d'accès;;control de acceso
Fehler;error;erreur;errore;error
Meldung;message (s);message;notifica, iscrizione;mensaje
frei;free (a);libre;libero;libre
ohne;without;sans;senza;sin
nochmals drücken;press again;appuyer de nouveau;;apoyar de nuevo
nicht bereit;not ready;non prêt;;no pronto
gültig;valid (a);valide;valido;válido
System gestoppt;system halt;systeme arrêté;;sistema parado
falsches Datum;invalid date;date invalide;data sbagliata;fecha incorrecta
falscher Befehl;invalid command;commande invalide;comando sbagliato;orden incorrecta
Fehlermeldung;error message;message d'erreur;;mensaje de error
Fehler beim Laden;loading error;erreur de chargement;;error de carga
Zugriff abgelehnt;access denied;accès refusé;;acceso denegado
irgendeine Taste drücken;press any key;pressez une touche;premere qualsiasi tasto;pulse cualquier tecla
ohne System;no system;sans système;senza sistema;sin sistema
nicht verfügbar;not available;non disponible;;no disponible
keine Systemdiskette;no system disk;disque non système;;disco sin DOS
bereit;ready (a);prêt;pronto, disposto;pronto
Datum;date (s);date;data;fecha
Dienstag;Tuesday;mardi;martedì;Martes
Freitag;Friday;vendredi;venerdì;Viernes
Montag;Monday;lundi;lunedì;Lunes
Woche;week;semaine;settimana;semana
Sekunde;second (s);seconde;secondo;segundo
Zeit;time (s);temps;tempo;tiempo
neues Datum eingeben;enter new date;entrer nouvelle date;;introduzca nueva fecha
heutiges Datum;today's date;date du jour;data di oggi;fecha del día
Dauer;duration;durée;durata;duración
gemeinsam benutzen;share (v);utiliser en commun, partager;utilizzare in comune;compartir
versuchen;attempt (v);tenter, essayer;tentare;tentar
umbenennen;rename (v);renommer;cambiare il nome;cambiar el nombre
undatiert;undated (a);non daté;non datato;sin fecha
Benutzerebene;user level;niveau d'utilisateur;;nivel del usuario
Benutzeraufruf;user call;appel d'utilisateur;;llamada del usuario
aktuelles Datum;current date;date actuelle;data attuale;fecha actual / del día
aktuelle Uhrzeit;current time;heures actuelles;ora attuale;hora actual
Pause;pause, break;arrêt;pausa, fermata;pausa
Stopp, Halt;halt (s);arrêt;arresto;parada
weitermachen, fortsetzen;continue (v);continuer;continuare;continuar
starten;start (v);démarrer;partire, lanciare;arrancar, lanzar
laden;load (v);charger;caricare;cargar
anhalten;halt, stop (v);arrêter;fermare;parar
verlangsamen;slow down;ralentir;rallentare;lentificar, aminorar
laufen;run (v);procéder;marciare;marchar
schnell;fast, quick (a);rapide (a);rapido;rápido
automatisch;automatic, self-acting;automatique;automatico;automático
arbeitend;working (a);actif;lavorando;operando
langsam;slow (a);lent;lento;lento
passiv, untätig;passive (a);passif;passivo;pasivo
Zuweisung;allocation, assignment;affectation;assegnazione;asignación
Ausführung, Ablauf;execution;exécution;effettuazione;ejecución
Blockierung;deadlock (s);blocage;bloccaggio;bloqueo
Aufhängen;hang-up (s);arrêt imprévu;;parada imprevista
Wiederanlauf;restart (s);reprise;ripresa;nueva puesta en marcha
Unterbrechung;interrupt (s);interruption;interruzione;interrupción
durchführen;transact (v);exécuter, accomplir;eseguire;ejecutar
vorbereiten;prepare (v);préparer;preparare;preparar
ausführen;execute (v);exécuter;effettuare;ejecutar
verzögern;delay (v);retarder;ritardare;atrasar
sperren;lock (v);bloquer;bloccare;bloquear
unvorhergesehen;unexpected (a);imprévu;imprevisto;imprevisto
untätig;inactive (a);inactif;inattivo;inactivo
getrennt;separate (a);séparé;separato;separado
arbeitendes Programm;active program;programme actif;programma attiva;programa activo
fortlaufender Prozess;continuous process;processus continu;processo continuo;proceso continuo
Abbruch;abortion;rupture;interruzione;interrupción abortiva
zuweisen;allocate, assign (v);affecter;assegnare;asignar
gleichzeitg;concurrent, simultaneous;simultané;simultaneo;similtáneo
Blockzuweisung;block allocation;affectation de bloc;indicazione di blocchi;dispositivo de bloques
Programm;program (s);programme;programma;programa
Programmierer;programmer;programmeur (m);programmatore;programador
Null;zero, naught, null;zéro;zero;cero
Methode;method;méthode;metodo;método
organisieren;organize (v);organiser;organizzare;organizar
programmieren;program (v);programmer;programmare;programar
negativ;negative (a);négatif;negativo;negativo
nicht;not;non;non;no
Zeilennummer;line number;numéro de ligne;;número de línea
neue Zeile;new line;nouvelle ligne;riga nuova;nueva línea
Software;software;logiciel, programme;software;programas
Problemlösung;solution;solution (f);soluzione;solución
Struktur;structure (s);structure;struttura;estructura
Ursprung;source, origin (s);source;origine;origen
Ebene;level, rank (s);niveau;livello;nivel
Programmverzweigung;branch (s);embranchement;ramificazione;bifurcación
Entwicklung;development;développement;sviluppo;desarrollo
Schleife;loop (s);cycle, boucle;ciclo (di programma);ciclo, anilo
Prozedur, Programmteil;procedure (s);procédure;procedura;procedimiento
Satzbau, Syntax;syntax (s);syntaxe;sintassi;sintaxis
Baustein, Modul;module (s);module;modulo;módulo
einschließen, beinhalten;include (v);inclure;includere, comprendere;incluir
unverändert;unvaried, unaltered (a);inchangé (a);invariato;sin cambio
Standard-, normgerecht;preset, default,standard;pré-défini;;predefinido
echt;real, true (a);réel;reale;real
Programmiertechnik;program technique;technique de programmation;programmazione tecnica;técnica de programación
Ausgangssprache;source language;langage source;;lenguaje fuente
Standardprogramm;standard program;programme standard;programma standard;programa estándar
symbolische Sprache;symbolic language;langage symbolique;linguaggio simbolico;lenguaje simbólico
Operationsteil;operation code, opcode;code d'opération;codice di funzionamento;código de operaciones
aufrufendes Programm;calling program;programme d'appel;programma chiamare;programa de llamada
Programmende;end of program;fin de programme;fine del programma;fin de programa
negative Zahl;negative number;nombre négatif;numero negativo;número negativo
Maschinencode;machine / absolute code;code machine;;código máquina
Hauptprogramm;main program;programme principal;;programa principal
Programmname;program name;nom du programme;nome del programma;nombre del programa
symbolischer Name;symbolic name;nom symbolique;nome simbolico;nombre simbólico
Programmdatei;program file;fichier de programme;file del programma;fichero de programa
Programmbeschreibung;program description;description de programme;descrizione di programma;descripción de programa
in Cobol geschrieben;coded in Cobol;codé en Cobol;;codificado en Cobol
Unterprogramm;subroutine;sous-programme;;subrutina
Übergang;transition;transition;transizione;tránsito
Baukastenprinzip;modularity;modularité;sistema modulare;modularidad
verschieben;relocate (v);déplacer, replacer;spostare;reposicionar
sich selbst aufrufend;recursive (a);récursif;;recursivo, recurrente
verschachtelte Schleife;nested loop;boucle emboîtée;;ciclo encajado
Befehl;command (s);commande, directive;comando;mando, directive, orden
Aufruf;call (s);appel;chiamata;llamada
Sprung;jump (s);saut;;salto
aufrufen (Programm);call (v);appeler;chiamare;llamar
Kette, Befehlskette;chain (s);chaîne;catena;cadena
Rückkehr, Rücksprung;return (s);retour;ritorno;regreso
verlassen;quit (v);quitter;abbandonare;dejar
wiederholen;retry, repeat, replicate;répéter;ripetere;repetir, reintentar
überspringen;skip (v);sauter;saltare;omitir, saltar
verzweigen;branch (v);ramifier;ramificarsi;hacer una bifurcación
Befehl nicht erkannt;unknown command;commande inconnue;comando non appreso;orden no reconocida
Abkürzung;abbreviation;abréviation;abbreviazione;abreviatura
Umkehrung;inversion, reversal;inversion;inversione;inversión
unbedingter Sprung;unconditional branch;saut incondionnel;;salto incondicional
vermischen;mix (v);mélanger;mischiare;mezclar
Verknüpfung;linkage, linking;liaison;enlace, acoplamiento;
Überlagerung;overlay (s);superposition;sovrapposizione;segmento d.superposición
übersetzen;translate, compile (v);traduire;tradurre;traducir
binden, verknüpfen;link (v);assembler, réunir;legare;ensamblar, agrupar
Bindeprogramm;linkage editor;éditeur de liens;montador de enlaces;
interne Prozedur;internal procedure;procédure interne;procedura interna;procedimiento interno
untergliedern;subdivide;subdiviser;suddividere;subdividir
verschmelzen, mischen;merge (v);fusionner;fondere;fusionar
Symbol;symbol (s);symbole (m);simbolo;símbolo
Verb;verb;verbe;verbo;verbo
Wert;value, worth;valeur (f);valore;valor
Wort;word (s);mot;parola, termine;palabra, término
Zeichen;sign (s);signe;segno;signo
Gruppe;group (s);groupe;gruppo;grupo
doppelt;double, dual (a);double;doppio;doble
einfach;simple (a);simple;semplice;simple
Parameter;parameter;paramètre (m);parametro;parámetro
Abweichung;variation;variation;deviazione;variación
Grenzwert;limit (s);limite;limite;límite
Synonym;synonym;synonyme;sinonimo;sinónimo
Faktor;factor;facteur;fattore;factor
Ausdruck;expression;expression;espressione, termine;expresión
umwandeln;convert (v);convertir;convertire;convertir
vereinbaren;declare (v);déclarer;fissare;declarar
markieren, kennzeichnen;mark (v);marquer;marcare;marcar
unbegrenzt;unlimited, unrestricted;illimité;illimitato;ilimitado
unbestimmt;undefined (a);non défini;indeterminato,indefinito;no definido
symbolisch;symbolic (a);symbolique;simbolico;simbólico
Wortlänge;word length;longueur de mot;;longitud de palabra
Ersatzwert;default value;valeur par défaut;;valor por defecto
Zusatz;suffix (s);supplément, additif;aggiunta;sufijo
Verweistabelle;reference table;table de référence;tabella di riferimento;tabla de referencia
Funktion;function (s);fonction (f);funzione;función
richtig;right, correct (a);correct;corretto;correcto
logisch;logical (a);logique;logico;lógico
Beziehung;relation;relation, rapport;relazione;relación
Kennzeichen;flag (s);marque;segno (particolare);marca, insignia
Bedingung;condition;condition;condizione;condición
Vergleich;comparison;comparaison;paragone;comparación
Bezug nehmen auf;refer to;se référer à;riferirsi a;referirse a
übereinstimmen;match (v);égaler;concordare,corrispondere;igualar
übergeordnet;superior (a);superieur;superiore;superior
sekundär;secondary (a);secondaire;secondario;secundario
gleich;equal (a);égal;uguale;igual
unbedingt;unconditional (a);inconditionnel;incondizionato;incondicional
Querverweis;cross reference;correspondances;rinvio, rimando;referencia cruzada
logische Funktion;logical function;fonction logique;funzione logica;función lógica
logischer Ausdruck;logical expression;expression logique;espressione logica ;expresión lógica
logischer Fehler;logical error;erreur logique;errore logico;error lógico
bedingter Sprung;conditional jump;saut conditionnel;salto condizionato;salto condicional
Komma;comma;virgule;virgola;coma
Punkt;point (s);point;punto;punto
verkürzen, abkürzen;shorten (v);abréger, raccourcir;abbreviare, raccorciare;abreviar, acortar
Klammern;brackets, parentheses;parenthèses;parentesi;paréntesis
Stern(zeichen);asterisk, star;astérisque;asterisco;asterisco
Leerzeichen;space, blank (s);espace;spazio;espacio vacío
Semikolon;semicolon;point virgule;punto e virgola;punto y coma
Länge;length;longueuer;lunghezza, longitudine;longitud
fest;fix (a);fixe;fisso;fijo
Prozentzeichen;percent sign;signe de pourcentage;sigla di percento;signo tanto por ciento
Sonderzeichen;special character / sign;caractère spécial;carattere speciale;carácter especial
feste Länge;fixed length;longueur fixe;lunghezza fissa;longitud fija
Pluszeichen;plus sign;signe plus;segno di più;signo más
Teilzeichenfolge;substring (s);sous-chaîne;sottostringa;subcadena
Nummer;number (s);nombre;numero;número
zählen;count (v);compter;contare;contar
Zähler;counter;compteur;contatore;contador
abgrenzen;delimit (v);délimiter;delimitare;delimitar
numerieren;number (v);numéroter;numerare;numerar
vorzeichenlos;unsigned (a);sans signe;senza segno;sin signo
ungerade;odd (a);impair;dispari;impar
numerisch;numerical (a);numérique;numerico;numérico
Vorzeichenregel;rule of signs;règle de caractères;regola dei segni;regla de signos
Ordnungszahl;ordinal number;nombre ordinal;numero ordinale;número ordinal
gerade Zahl;even number;nombre pair;numero pari;número par
Hexadezimalzahl;hexadecimal number;nombre hexadécimal;numero esadecimale;némero hexadecimal
führende Null;leading zero;zéro en tête;condurre zero;cero en cabeza
numerische Daten;numeric(al) data;données numériques;dati numerici ;datos numéricos
absoluter Wert;absolute value;valeur absolue;valore assoluto;valor absoluto
Ziffer;digit (s);chiffre;cifra;dígito
Ganzzahl;integer (s);nombre entier;numero intero;número entero
abschneiden (Zahl);truncate (v);tronquer;troncare;truncar
Schritt;step (s);pas;passo;paso
testen;test (v);tester;controllare;ensayar
FALSCH;wrong, false;faux, erroné;sbagliato, scorretto;falso, incorrecto
Hilfsprogramme;utilities;utilités;programmi d'aiuto;utilidades
Programmfehler;bug, program error;défaut;errore del programma;defecto, error, fallo
verfolgen;trace (v);tracer (le chemin de);inseguire;seguir
auffinden;detect (v);détecter;rilevare;detectar
austesten;debug (v);corriger les erreurs;mettono a punto;corregir los errores
auslisten;list (v);lister;fare una lista;listar
inkorrekt;incorrect (a);incorrect;scorretto;erróneo
unausgewogen;unbalanced (a);déséquilibré;poco equilibrato;desequilibrado
Fehler beim Teilen;division error;erreur de division;errore di divisione;sobrepasamiento división
Testlauf;test run;passage d'essai;serie di test;recorrido de prueba
fehlerhafte Verzweigung;wild branch;branchement incorrect;ramificazione difettosa;ramificación defectuosa
Syntaxanalyse;syntactic analysis;analyse de syntaxe;analisi sintattica ;análisis sintáctico
Fehlerrate;error rate;taux d'erreurs;tasso di errore;tasa de errores
fehlerfrei;bug free, error free;exempt d'erreur;senta errori, corretto;exento de error
Testtechnik;testing techniques;techniques d'essai;tecnica di test;técnicas de ensayo
Testzyklus;testing cycle;cycle d'essai;ciclo di test;ciclo d'ensayo
Testprogramm;test program;programme d'essai;programma di test;programa de ensayo
Testzeit;testing time;temps d'essai;tempo di test;tiempo de ensayo
verifizieren;verify (v);vérifier;verificare;verificar
syntaktisch;syntactical (a);syntaxique;sintattico;sintáxico
Bedeutungsfehler;semantic error;erreur sémantique;errore semantico;error semántico
Hilfe;aid, support, help (s);aide;aiuto, assistenza;ayuda
Änderung;change (s);changement;cambiamento;cambio
Verbesserung;improvement;amélioration;miglioramento;mejora
ändern, verändern;alter, modify (v);modifier;alterare, modificare;modificar, alterar
aktualisieren;update (v);mettre à jour;attualizzare;actualizar
freigeben;release (v);lancer;liberano;lanzar
verbessern, korrigieren;correct (v);corriger;correggere;corregir
aktuell;current (a);en cours d'exécution;attuale;actual
Programmunterstützung;program support;support de programme;sostegno di programma;soporte de programa
Benutzer;user;utilisateur;utente;usuario
Menü;menu;menu;menú;menú
Fenster;window (s);fenêtre;finestra;ventana
Beispiel;example;exemple;esempio;ejemplo
benutzen;use (v);utiliser;usare;usar, utilizar
eingeben;put in, enter (v);introduire;immettere, introdurre;introducir
benutzerfreundlich;user-friendly (a);ergonomique;ergonomico;amigo del usuario
Verwendung;usage;utilisation, usage;utilizzazione, uso;utilización, uso
Vorführung;demonstration;démonstration;dimostrazione;demostración
Eingabe;input, entry (s);entrée;entrata;entrada
Anwendung;application;application;applicazione;aplicación
Vereinfachung;simplification;simplification;semplificazione;simplificación
anwenden;apply (v);apposer;applicare;aplicar, utilizar
auswählen;select (v);sélectionner;scegliere;seleccionar
behandeln, verarbeiten;handle (v);manipuler;manipolare;manipular
lösen;solve (v);résoudre;risolvere;resolver
verarbeiten;process (v);traiter;trattare;procesar
wahlweise;optional, selective;facultatif;opzionale;opcional
integriertes Paket;integrated package;programme intégré;pacchetto integrato;paquete integrado
Anwendungsprogrammierer;application programmer;programmeur de logiciels;programmatore d'uso;programador de usos
Komplettlösung;complete solution;solution clé en main;soluzione completa;solución completa
Anwenderprogramm;application/user program;programme d'application;programma d'applicazione;programa de aplicación
Endbenutzer;end user;dernier utilisateur;utilizzatore finale;usario final
computergesteuert;computer-controlled;dirigé par ordinateur;computerizzato;dirigido por ordenador
Wurzel;root (s);racine;radice;raíz
Summe;sum (s);somme;somma;suma
zusammenzählen, addieren;add, total, sum up (v);totaliser;sommare, addizionare;acumular,sumar,adicionar
Berechnung;calculation, computation;calculation (f);calcolo;cálculo
Addition;summation, addition;totalisation;somma;totalización
Verminderung;reduction;réduction;riduzione;reducción
Ergebnis;result (s);résultat;risultato;resultado
Rechenfehler;miscalculation;erreur de calcul;errore di calcolo;error de cálculo
Wahrscheinlichkeit;probability;probabilité;probabilità;probabilidad
Rest;remainder;reste;resto;resto
runden;round (v);arrondir;arrotondare;redondear
berechnen;calculate (v);calculer;calcolare;calcular
teilen, dividieren;divide (v);diviser;dividere;dividir
malnehmen;multiply (v);multiplier;moltiplicare;multiplicar
abziehen, subtrahieren;subtract (v);soustraire;sottrarre;sustraer
zusätzlich;additional (a);supplémentaire;addizionale;adicional
durchschnittlich;average (a);moyen, moyenne;medio;medio
Rechnungsblatt;calculation sheet;feuille de calculation;carta da calcolo;hoja de cálculo
mathematische Anwendung;mathematical application;application mathématique;uso matematico;aplicación matemática
Zufallszahl;random number;nombre aléatoire;numero casuale ;número al azar
Stichprobe;random sample;échantillon, sondage;sondaggio;prueba al azar
Rechenoperation;calculating operation;opération de calcul;calcolatore funzionamento;operación de cálculo
genau;accurate (a);précis,e;esatto, preciso;preciso
berechenbar;computable (a);calculable;calcolabile;calculable
Titel;title (s);titre (m);titolo;título
Text;text (s);texte;testo;texto
tippen;type (v);taper à la machine;scrivere a macchina;escribir a máquina
Silbe;syllable;syllabe;sillaba;silaba
Rechtschreibhilfe;spell aid / checker;correction d'orthographe;;ayuda ortográfica
Textverarbeitung;word processing;traitement de textes;;proceso de textos
Tippfehler;typing error;erreur de frappe;errore di battuta;error de tecleo
wörtlich;literal (a);littéral;letterale;literal, textual
Feld;field (s);zona;campo;zona, campo
sortieren;sort (v);trier;classificare;clasificar
suchen;search, seek (v);chercher;cercare;buscar
Datenbank;data bank;base de données;banca dei dati;banco de datos
Umformung;transformation;transformation;trasformazione;transformación
Sortierung;sorting, sort (s);tri;classificazione;clasificación
erfassen;record, register (v);enregistrer;registrare, rilevare;registrar
abfragen;query (v);interroger;interrogare;interrogar, cuestionar
ungeordnet;unorganized (a);inorganisé;disordinato;desorganizado
sequentiell;sequential (a);séquentiel;sequenziale ;secuencial
Sortierprogramm;sort routine / program;programme de tri;programma di ordinamento;rutina de clasificación
Ursprungdaten;source data;données de source;dati di sorgente;datos de origen
Datenverarbeitung;data processing;traitement des données;elaborazione dei dati;proceso de datos
Sekundärdatei;secondary file;fichier secondaire;file secondario;fichero secundario
Karteikarte;file / record card;fiche, feuillet mobile;scheda, cartellino;tarjeta perforada
Dateneingabe;data entry / input;entrée de données;entrata di dati;entrada de datos
variable Länge;variable length;longueur variable;variabile lunghezza;longitud variable
Erfassung (von Daten);acquisition, capture;saisie;raccolta;adquisición, recogida
absteigend;descending (a);décroissant;descreciente;descendente
aufsteigend;ascending (a);croissant,e;creciente;ascendente
Datenumwandlung;data conversion;conversion de données;conversione di dati;conversión de datos
Datenerfassung;data capture;saisie des données;raccolta dei dati;adquisición de los datos
Winkel;angle;angle;angolo;ángulo, esquina
anordnen;arrange (v);disposer;disporre;disponer
dreidimensional;three-dimensional (a);trois dimensionnel;a tre dimensioni;tridimensional
regelmäßig;regular (a);régulier;regolare;regular
symmetrisch;symmetrical (a);symétrique;simmetrico;simétrico
Überschuss;surplus (s);excédent;eccedenza;excedente
auswerten;analyze (v);dépouiller, analyser;analizzare;analizar
unzureichend;insufficient (a);insuffisant;insufficiente;insuficiente
kommerzielle Anwendung;business application;utilisation commerciale;applicazione commerciale;utilización comercial
Sprache;language;langage;lingua, linguaggio;lenguaje
Verbrauch;wastage;consommation;consumo;uso
Wiedergabe;reproduction;reproduction;riproduzione;reproducción
simulieren;simulate (v);simuler;simulare;simular
entwerfen;design (v);dessiner;disegnare, progettare;diseñar, lanzar
rechnerunterstützt;computer aided;assisté par ordinateur;tecnica robot;robótica
Echtzeitverarbeitung;real time processing;traitement en temps réel;elaborazione in tempo reale;proceso en tiempo real
Spiel;game (s);jeu;gioco;juego
Ziel;target, aim (s);objectif;obiettivo;objetivo
künstlich;artificial (a);artificiel;artificiale;artificial
künstlich Stimme;artificial voice;voix artificielle;voce artificiale;voz artificial
Expertensystem;expert system;systeme expert (m);sistema d'esperti;sistema experto
künstliche Intelligenz;artificial intelligence;intellig. artificielle;intelligenza artificiale;inteligencia artificial
Kunstsprache;artificial language;langage artificiel;lingua artificiale;lenguaje artificial
Bewertung;valuation;evaluation;valutazione;valoración
Aktivität;activity;activité;attivare;actividad
angeben;specify (v);spécifier;indicare;especificar
Name;name (s);nom;nome;nombre
Kommunikation;communication;communication (f);comunicazione;comunicación
Frage;question (s);question;domanda;pregunta
senden, schicken;send (v);envoyer;mandare, trasmettere;enviar, transmitir
Übertragung;transmission, transfer;transmission;trasmissione;transmisión
übertragen;transmit, transfer (v);transmettre;trasmettere;transmitir
annehmen;accept (v);admettre;accettare;admitir
kommunizieren;communicate;communiquer;comunicare;comunicar
mündlich;verbal (a);oral;orale;oral
drahtlos;wireless (a);sans fil;senza fili;sin hilo
entfernt;remote (a);à distance;distante;remoto
Datenübertragung;data transmission;transmission de données;teleinformatica;transmisión de datos
Fernübertragung;telecommunication;télécommunication;telecomunicazione ;telecomunicación
Telekommunikation;remote communication;télécommunication;telecomunicazione ;telecomunicación
Kanal;channel (s);canal, voie;canale;canal, vía
empfangen;receive (v);recevoir;ricevere;recibir
belegt, besetzt;busy (a);occupé;occupato;ocupado
Verbindung;connection;connexion, lien;allacciamento;conexión
Empfang;reception;réception;ricezione;recepción
Signal;signal (s);signal;segnale;señal
Signalton;beep (s);signal sonore;segnale acustico;señal sonora
Bestätigung, Quittung;acknowledgment;accusé de réception;accusare (m) ricevuta;acuse de recibo
beenden;quit, terminate (v);terminer;terminare;terminar
erkennen;recognize (v);identifier;riconoscere;reconocer, identificar
anfordern;call for;demander, faire appel;richiedere, esigere;pedir, llamar
stören;disturb (v);déranger;disturbare;perturbar
analog;analogue (a);analogique;analogo;analógico
synchron;synchronous (a);synchrone;sincrono;síncrono
Prüfsumme;check sum;total de contrôle;somma di controllo;total de control
Paritätskontrolle;parity check;contrôle de parité;controllo di parità ;control de paridad
fehlerhafte Verbindung;faulty connection;connexion défectueuse;collegamento difettoso;connexión defectuosa
Ende der Meldung;end of message;fin de message;estremità del messaggio;fin de mensaje
quittierte Meldung;handshake message;message de dialogue;messaggio di dialogo;mensaje de diálogo
Paritätsfehler;parity error;erreur de parité;errore di parità ;error de paridad
Antwortzeit;response time;temps de réponse;tempo di reazione ;tiempo de respuesta
Ausgabekanal;output channel;canal de sortie;scanalatura dell' uscita;canal de salida
feste Verbindung;permanent connection;liaison permanente;collegamento fisso;enlace permanente
Übertragungskanal;transmission channel;canal de transmission;scanalatura di trasmissione;canal de transmisión
Synchronisierung;synchronization;synchronisation;sincronizzazione;sincronización
Parität, Ganzzahligkeit;parity (s);parité;parità;paridad, par
ungerade Parität;odd parity;imparité;disparità;imparidad
serielle Übertragung;serial transmission;transmission en série;trasmissione seriale;transmisión en serie
Station;station (s);station;stazione;estación
rufende Station;caller;station qui demande;stazione que chiamare;el que efectúa llamada
arbeitende Datenstation;active station;station active;stazione attiva;estación de datos activa
Sendestation;transmitting station;station de transmission;stazione trasmittente;estación de transmisión
Fernsteuerung;remote control;télécommande;telecomando;telecomando
Netzwerk;network;réseau;rete;red
Teilnehmer;participant (s);abonné, participant;partecipante;participante
vernetzt;networked (a);en forme de réseau;nella forma d'una rete;en forma de red
lokales Netzwerk;local network;réseau local;rete locale;red local
Übertragungsnetz;communication network;réseau de communications;rete di comunicazione;red de communicaciones
Netzwerkstation;network terminal;terminal de réseau;terminale della rete;terminal de red
reden;talk (v);parler;parlare;hablar
antworten;answer (v);répondre;rispondere;responder
Briefkasten;mailbox;boîte aux lettres;posta dei lettori;buzón electrónico
Adressat, Empfänger;addressee;destinataire;destinatario;destinatario
Teilnehmer;subscriber;abonné;abbonato;abonado
sich abmelden;log off;terminer la session;congedarsi;darse de baja
anzeigen;indicate, display (v);indiquer;indicare, informare;indicar
absenden;send off;expédier, envoyer;mandare, spedire;remitir
Akustikoppler;acoustic coupler;coupleur acoustique;accoppiamento acustico;acoplador acústico
betriebsintern;in-house;interne;all'interno dell'azienda;interno
Dialogbetrieb;interactive mode;mode interactif;modo interattivo;modo interactivo
Brief;letter;lettre;lettera;carta
Telefon;telephone (s);téléphone;telefono;teléfono
Post;post, mail (n);courrier;posta;correo
Postleitzahl;postcode, zip code;code postal;codice postale;código postal
Bestimmungsort;destination;destination;destinazione;destino
Porto;postage;affranchissement;tassa postale;franquicia
Zielsprache;target language;langage objet;lingua d'arrivo;lenguaje de meta
Autor;author;auteur (m);autore;autor
kurz;short (a);court;corto;corto
Anhang (Buch);appendix (s);appendice;appendice;apéndice
Handbuch;manual, handbook;manuel (m);manuale, guida;manual
Einführung;introduction;introduction (f);introduzione;introducción
Vorwort;preface (s);préface;prefazione;prefacio
Kommentar;comment (s);commentaire;commento;comentario
Anleitung, Einführung;guide (s);guide;istruzione, guida;guía
Kapitel;chapter;chapitre;capitolo;capítulo
Verweis;reference;référence;rimando;referencia
mehrsprachig;multi-lingual (a);multilingue;plurilingue;multilingue
schematisch;schematic (a);schématique;schematico;esquemático
Fachbuch;reference / special book;livre technique (m);trattato tecnico;libro específico
Programmiererhandbuch;programmer's guide;manuel de programmation;guida per programmatori;guía de programador
technisches Handbuch;technical manual;manuel technique (m);libro tecnico;manual técnico
Bedieneranleitung;operator's guide;mode d'emploi;manuale dell' operatore;guía del operador
Wartungshandbuch;service manual (s);mode d'entretien;manuale di istruzione;manual de mantenimiento
Schaubild;flip chart;diagramme;diagramma;gráfico, diagrama
Zusammenfassung;summary, resumé;résumé;riassunto;resumen
Fachausdruck;term (s);terme;termine tecnico;término técnico
Fachsprache;special language;langage technique;linguaggio tecnico;lenguaje especial
Kurs;course;cours;corso;curso
Schule;school (s);école;scuola;escuela
Ausbildung;education;formation, éducation (f);formazione, istruzione;educación
Ausbildungsprogramme;teachware;programmes de formation;programmas di formazione;métodos educativos
Seminar;workshop;cours pratique,séminaire;seminario;curso práctico
Schulung;training (s);instruction,entraînement;istruzione, formazione;formación
Anweisung;instruction;instruction;istruzione;instrucción
Fortbildungskurs;training course;cours (de formation);corso di perfezionamento;curso de reciclaje
Basic-Kurs;Basic course;cours de base (m);corso di Basic;curso de Basic
Ausbildungsplan;training schedule;plan de formation;orario di formazione;plan de formación
Ausbildungszentrum;training centre;centre d'éducation;centro di formazione;centro de formación
Computerkurs;computer course;cours d'informatique;corso di informatica;curso de informática
Schnellkurs;crash course;cours accéléré;;curso acelerado
Schulungszeit;training time;temps de formation;tempo di formazione;tiempo de formación
Informatik;informatics;informatique;informatica;informática
Theorie;theory;théorie;teoria;teoría
Wissenschaft;science;science;scienza;ciencia
wissenschaftlich;scientific (a);scoentifique;scientifico;cientifico
angewandte Informatik;applied computer science;informatique appliquée;informatica applicata;Informática aplicada
verstehen;understand (v);comprendre;comprendere, capire;comprender
fähig;able, capable, apt (a);capable;capace;capaz
Fachmann;expert, specialist (s);technicien, expert;esperto, specialista;experto
Forschung;research (s);recherche;indagine, ricerca;investigación
erfahren;expert, skilful (a);versé, expert;esperto, versato;hábil
Fachgebiet;special field;matière, spécialité;campo, ramo, materia;especialidad
Modell;model (s);modèle (m);modello;modelo
Firma;company, firm;société;compagnia, ditta;compañía, sociedad
Erzeugnis;product;produit;prodotto;producto
Typ;type (s);type, caractère;tipo;tipo, carácter
Qualität;quality;qualité;qualità;calidad
installieren;install (v);configurer, installer;installare;instalar
anfertigen;make (v);faire, réaliser;fabbricare;realizar
Bauweise;construction;construction (f);costruzione;construcción
Hersteller;manufacturer, producer;producteur, fabricant;fabbricante, produttore;fabricante
Fertigung;manufacturing,production;fabrication;produzione,fabbricazione;fabricación
Vollendung;completion;achèvement;compimento;terminación
Kontrolle;check (s);contrôle;controllo;control
anpassen;adapt (v);adapter;adattare;adaptar
Stand der Technik;state of the art;état de la technique;stato della tecnica;estado de la técnica
Serviceunternehmen;service bureau;bureau de service;agenzia di servizio;oficina de servicio
Serienproduktion;serial production;fabrication en série;produzione in serie;producción en serie
Steckkarte, Platine;card (s);carte, fiche;targhetta;tarjeta, ficha
Teil;part (s);partie;parte;porción
Draht;wire (s);fil;filo metallico;hilo
Steckplatz;slot (s);élément de trame;zoccolo;ranura, zócalo
Zusammenstellung;configuration;configuration;configurazione;configuración
Material;stuff, material (s);matériel;materiale;material
Stecker;jack, jumper, plug;fiche de connexion;spina;banana de conexión
Schalter;switch (s);interrupteur;interruttore,commutatore;interruptor
Abschirmung;shield (s);cache;schermatura;apantallamiento
Gestell;rack (s);bâti;scaffale, supporto;armazón, soporte
Stift, Kontaktanschluss;pin (s);broche;perno;patilla
Silizium;silicon;silicium;silicio;silicio
Anschluss;port, connection;connexion;collegamento;conexión
Grundplatine;motherboard;platine;cartolina base;platina principal
Einbaurahmen, Gestell;chassis (s);châssis;scaffale;armazón
Leiterkarte, Platine;board (s);tableau;cartolina;cuadro
Summer;buzzer;ronfleur;cicalino;vibrador, zumbador
Kontakt, Verbindung;contact (s);contact;contatto;contacto
Sicherung (elektrisch);fuse (s);fusible;fusiblie;fusible
Schicht;layer, coating (s);couche;strato;capa
technische Ausrüstung;technical equipment;équipement technique (m);equipaggio tecnico;equipamiento técnico
Transistorplättchen;transistor chip;transistor;circuito del transistore;minidisco de transistor
Schraubenzieher;screwdriver;tournevis;cacciavite;destornillador
Werkzeug;tool kit;outil;attrezzo;equipo instrumental
löten;solder (v);souder;saldare;soldar
Wartung;service, maintenance;service, entretien;servizio;servicio
Analyseprogramm;analyzer;analyseur;programma d'analizzatore;programa analizador
Überprüfung;review (s);révision;controllo, verifica;revisión
Beschädigung;damage (s);dommage, dégât, avarie;danno, avaria;daño
Diagnose;diagnosis;diagnose;diagnosi;diagnosis
Störung;fault, trouble (s);incidente, panne;perturbazione;perturbación
Reparatur;repair (s);réparation;riparazione;reparación
einstellen, justieren;adjust (v);ajuster;mettere a punto,regolare;ajustar
abnutzen;wear out;user;logorare;gastar
demontieren;strip, dismantle (v);démonter;smontare;desmontar
ausfallen, versagen;fail (v);tomber en panne;arrestarsi;fallar
ersetzen;replace (v);remplacer;sostituire, cambiare;reemplazar
warten, instandhalten;service (v);assurer le service;revisionare;asegurar el servicio
kaputt, defekt;defect (a);défectueux,-euse;rotto;defectuoso
allgemeiner Fehler;general error;erreur générale;errore generale;anomalía de tipo general
Wackelkontact;loose connection;faux contact;contatto allentato;contacto móvil
Probelauf;trial run;essai;prova di funzionamento;trayecto de prueba
Außendiensttechniker;field engineer;technicien;collaboratore esterno;técnico exterior
Ersatzteil;replacement part;pièce de rechange;parte di ricambio;pieza de repuesto
Kundendienst;service department;service après-vente;servizio di assistenza;asistencia técnica
Wartungszentrum;service center;centre de réparation;centro di servizio;centro de reparación
außer Betrieb setzen;disable (v);mettre hors service;sospendere l'attività;desactivar
Größe;size;format, volume;estensione, grandezza;formato, tamaño
Gewicht;weight (s);poids;peso;peso
nützlich;useful (a);utile (a);utile;útil
geräuscharm;quiet (a);insonorisé;tranquillo;silencioso
neu;new (a);nouveau, neuf;nuovo;nuevo
mit;with;avec;con;con
neues Produkt;new product;nouveau produit;prodotto nuovo;nuevo producto
Leistungsfähigkeit;performance;performance;capacità, produttiva;performance, actuación
Eigenschaft;characteristic (s);caractéristique;caratteristico;característico
unbeständig;unsteady (a);instable;instabile;inestable
vollkommen;perfect (a);parfait;perfetto;perfecto
fehlend;missing, absent (a);absent, qui manque;assente;ausente
Grundausstattung;basic hardware;équipement de base;attrezzatura elementare;herramienta básica
fabrikneu;virgin (a);vierge;nuovo di fabbrica;virgen
Erde, Masse;ground (s);terre, masse;presa di terra;tierra, masa
Strom;power (s);puissance;corrente;corriente
elektrisch;electric(al);électrique;elettrico;eléctrico
Spannung;voltage, tension;tension;tensione;tensión, voltaje
Stromverbrauch;wattage;consommation de copurant;consumo di corrente;gasto de corriente
Spitze;peak;crête, maximum;punta;punta, máximo
Frequenz;frequency;fréquence;frequenza;frecuencia
leiten (Strom);conduct (v);conduire;condurre;conducir
aktive Leitung;active line;ligne active;linea attiva;línea activa
Wechselstrom;alternating current, AC;courant alternatif;corrente alternata;corriente alterna
Stromversorgung;power supply;source d'énergie;alimentazione elettrica;fuente de alimentación
Kurzschluss;short circuit;court-circuit;corto circuito;cortocircuito
Gleichstrom;direct current, D.C.;courant continu;corrente continua;corriente continua
Stromausfall;power failure;panne de courant;mancanza di corrente;interrupción d.corriente
Kabel;cable (s);cable (m);cavo;cable
elektronisch;electronic  (a);électronique;elettronico;electrónico
Elektronik;electronics;électronique (f);elettronica;electrónica
Trennung;segregation, separartion;séparation;separazione;segregación
Strahl;beam, ray (s);rayon;raggio;rayo
integrierte Schaltung;integrated circuit, IC;circuit intégré;circuito integrato;circuito integrado
Halbleiter;semi-conductor;semi-conducteur;semiconduttore;semiconductor
Schwelle;threshold (s);seuil;soglia;umbral
Schwellenwert;threshold value;valeur-seuil;valore di soglia;valor-umbral
Verstärker;amplifier;amplificateur;amplificatore;amplificador
Schaltung;wiring (s);câblage;inserimento;cableado
Leiter (phys.);conductor;conducteur;conduttore;conductor
Schaltkreis, Schaltung;circuit (s);circuit;circuito;
Widerstand;resistor;résistance;resistenza;resistencia
Röhre;tube (s);tube;tubo (elettronico);válvula electrónica
Kondensator;capacitor;condensateur;condensatore;condensador
Gatter;gate (s);porte;;puerta
Ton;tone (s);tonalité;suono;tonalidad
verbinden;connect, strap, attach;connecter;collegare;conectar
akustisch;acoustic (a);acoustique;acustico;acústico
Welle;wave (s);onde;onda;onda
Hitze, Wärme;heat (s);chaleur;caldo, calura;calor
mechanisch;mechanical (a);mécanique;meccanico;mecánico
technisch;technical (a);technique;tecnico;técnico
filtern;filter (v);filtrer;filtrare;filtrar
periodisch;periodical (a);périodique;periodico;periódico
physisch;physical (a);physique;fisico;físico
Angebot;offer (s);offre (f);offerta;oferta
Handel;trade, commerce (s);commerce;commercio;comercio
Zahlung;payment;paiement, versement;pagamento;pago
Kunde;client, customer, buyer;client, acheteur;cliente;cliente
Auftrag;order (s);ordre;ordine;orden
verkaufen;sell (v);vendre;vendere;vender
bestellen;order (v);ordonner;ordinare;ordenar
Betrag;amount (s);montant;importo;importe
Lieferant;supplier;fournisseur;fornitore;distribuidor
Versand;shipment;expédition;spedizione, invio;expedición, envío
Nachfrage;demand (s);demande;domanda;demanda
Auslieferung;delivery;livraison;consegna, distribuzione;entrega
Rechnung, Faktura;invoice, bill (s);facture;fattura;factura
brauchen;require, need (v);utiliser;impiegare, usare;requerir
versenden;ship, forward (v);expédier;spedire;expedir
Händlerrabatt;trade discount;rabais de gros;sconto commerciale;descuento comercial
Verkäufer;sales assistant/clerk;vendeur;venditore;vendedor
Bruttopreis;gross price;prix brut;prezzo lordo;precio bruto
Lieferdatum;delivery date;date de livraison;data di consegna;feacha de entrega
neuer Kunde;new customer;nouveau client;cliente nuovo;nuevo cliente
auf Probe;on trial;à l'essai;in prova;en prueba
Geschäft, Laden;shop (s);magasin;negozio;almacén, negocio
gebraucht;second-hand, used (a);d'occasion;usato, di seconda mano;de segunda mano
Mitarbeiter;employee, associate;collaborateur;collaboratore;colega
Abnehmer;taker;prener, partie;compratore, acquirente;consumidor
Personal;staff, personnel;équipe;personale;equipo
Abteilung;department, division;section, division;reparto, dipartimento;departamento
Händler;dealer;marchant;commerciante;comerciante
Geschäftsstelle;agency;bureau, agence;ufficio;agencia, oficina
Vertragshändler;official distributer;revendeur agrée;distributore ufficiale;distribuidor oficial
Beratung;consulting service;service de consultation;consultazione;asesoramiento
Markt;market (s);marché;mercato;mercado
wachsen;grow (v);croître;crescere;crecer
Vertrieb;distribution;distribution;distribuzione;distribución
werben;advertise (v);faire de la publicité;fare pubblicità;hacer publicidad
Weltmarkt;world market;marché mondial;mercato mondiale;mercado mundial
Vertriebsleiter;sales manager;chef de vente;direttore delle vendite;director de ventas
Pressemitteilung;press release;information de presse;comunicato stampa;rueda de prensa
Wachstumsrate;growth rate;vitesse de croissance;tasso di crescita;velocidad de crecimiento
Kosten pro Stunde;costs per hour;coûts  horaires;costi per ora;costos por hora
Mittel;means (s);moyen;mezzo, medio;medio
unterstützen;support (v);prendre en charge;sostenere;dar apoyo
Sonderpreis;special price;prix réduit;prezzo speciale;precio especial
Betriebskosten;running/ operating costs;frais d'exploitation;spese d'esercizio;costos de funcionamiento
Verkaufspreis;sales price;prix de vente;prezzo di vendita;precio de venta
Zeitersparnis;time saving;économie de temps;risparmio di tempo;ahorro de tiempo
Durchschnittskosten;average cost;coût moyen;costo medio;coste medio
Gesetz;law;loi;legge;ley
Vorschrift;rule, prescription;prescription;prescrizione, istruzione;regla
Warenzeichen;trademark;marque déposée;marchio di fabbrica;marca comercial
Abkommen;agreement;accord;accordo;acuerdo, convenio
unterschreiben;sign (v);signer;firmare;firmar
berechtigt;authorized (a);agréé, authorisé (a);autorizzato;autorizado
ungültig;invalid (a);invalide;invalido;inválido
zulässig;admissible (a);admissible;permesso, ammesso;permisible, admisible
Gerichtsstand;court of jurisdiction;lieu de juridiction;foro;jurisdicción
Garantie;warranty, guarantee (s);garantie (f);garanzia;garantía
garantieren;guarantee (v);garantir;garantire;garantizar
Wartungsvertrag;maintenance agreement;contrat de maintenance;accordo di manutenzione;contrato di mantenimiento
Eintragung,Registrierung;registration;enregistrement;registrazione, entrata;registro
Genehmigung;permission, licence (s);permission, autorisation;permeso;permiso
eingetragen;registered (a);enregistré;registrato;registrado
Nutzungsvertrag;licence agreement;contrat de licence;contratto di licenza;licencia de utilización
Lizenzgeber;licenser;concesseur de licence;datore di licenza;concesionista
Lizenznehmer;licensee;licencié;licenziatario;concesionario
Missbrauch;abuse (s);abus, emploi abusif;abuso;abuso
knacken;crack (v);deviner, résoudre;sciogliere, risolvere;crujir, partirse
unberechtigt;unauthorized (a);non autorisé;non autorizzato;desautorizado
ungesetzlich;illegal (a);interdit;illegale;prohibido, ilegal
Übertretung;violation;infraction, violation;trasgressione;violación


Test

Leicht gestört


16 Farben (VGA-Farbpalette) und deren Namen

VGA-Farbpalette (16 Farben) mit Farbnamen

Die Beschriftungen zeigen, welchen in HTML und CSS erlaubten Farbnamen die jeweiligen Farben entsprechen. Die entsprechenden Hexadezimalnotationen sind als zusätzliche Information und zur Kontrolle angegeben.

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


120 Farbnamen (Netscape-Farbpalette)

Netscape-Farbnamen (120 zusätzliche Farben)

Die Beschriftungen zeigen, welchen in HTML und CSS erlaubten Farbnamen die jeweiligen Farben entsprechen. Die entsprechenden Hexadezimalnotationen sind als zusätzliche Information und zur Kontrolle angegeben.

aliceblue | #F0F8FF
antiquewhite | #FAEBD7
aquamarine | #7FFFD4
azure | #F0FFFF
beige | #F5F5DC
blueviolet | #8A2BE2
brown | #A52A2A
burlywood | #DEB887
cadetblue | #5F9EA0
chartreuse | #7FFF00
chocolate | #D2691E
coral | #FF7F50
cornflowerblue | #6495ED
cornsilk | #FFF8DC
crimson | #DC143C
darkblue | #00008B
darkcyan | #008B8B
darkgoldenrod | #B8860B
darkgray | #A9A9A9
darkgreen | #006400
darkkhaki | #BDB76B
darkmagenta | #8B008B
darkolivegreen | #556B2F
darkorange | #FF8C00
darkorchid | #9932CC
darkred | #8B0000
darksalmon | #E9967A
darkseagreen | #8FBC8F
darkslateblue | #483D8B
darkslategray | #2F4F4F
darkturquoise | #00CED1
darkviolet | #9400D3
deeppink | #FF1493
deepskyblue | #00BFFF
dimgray | #696969
dodgerblue | #1E90FF
firebrick | #B22222
floralwhite | #FFFAF0
forestgreen | #228B22
gainsboro | #DCDCDC
ghostwhite | #F8F8FF
gold | #FFD700
goldenrod | #DAA520
greenyellow | #ADFF2F
honeydew | #F0FFF0
hotpink | #FF69B4
indianred | #CD5C5C
indigo | #4B0082
ivory | #FFFFF0
khaki | #F0E68C
lavender | #E6E6FA
lavenderblush | #FFF0F5
lawngreen | #7CFC00
lemonchiffon | #FFFACD
lightblue | #ADD8E6
lightcoral | #F08080
lightcyan | #E0FFFF
lightgoldenrodyellow | #FAFAD2
lightgreen | #90EE90
lightgrey | #D3D3D3
lightpink | #FFB6C1
lightsalmon | #FFA07A
lightseagreen | #20B2AA
lightskyblue | #87CEFA
lightslategray | #778899
lightsteelblue | #B0C4DE
lightyellow | #FFFFE0
limegreen | #32CD32
linen | #FAF0E6
mediumaquamarine | #66CDAA
mediumblue | #0000CD
mediumorchid | #BA55D3
mediumpurple | #9370DB
mediumseagreen | #3CB371
mediumslateblue | #7B68EE
mediumspringgreen | #00FA9A
mediumturquoise | #48D1CC
mediumvioletred | #C71585
midnightblue | #191970
mintcream | #F5FFFA
mistyrose | #FFE4E1
moccasin | #FFE4B5
navajowhite | #FFDEAD
oldlace | #FDF5E6
olivedrab | #6B8E23
orange | #FFA500
orangered | #FF4500
orchid | #DA70D6
palegoldenrod | #EEE8AA
palegreen | #98FB98
paleturquoise | #AFEEEE
palevioletred | #DB7093
papayawhip | #FFEFD5
peachpuff | #FFDAB9
peru | #CD853F
pink | #FFC0CB
plum | #DDA0DD
powderblue | #B0E0E6
rosybrown | #BC8F8F
royalblue | #4169E1
saddlebrown | #8B4513
salmon | #FA8072
sandybrown | #F4A460
seagreen | #2E8B57
seashell | #FFF5EE
sienna | #A0522D
skyblue | #87CEEB
slateblue | #6A5ACD
slategray | #708090
snow | #FFFAFA
springgreen | #00FF7F
steelblue | #4682B4
tan | #D2B48C
thistle | #D8BFD8
tomato | #FF6347
turquoise | #40E0D0
violet | #EE82EE
wheat | #F5DEB3
whitesmoke | #F5F5F5
yellowgreen | #9ACD32


16 Farben (VGA-Farbpalette)

VGA-Farbpalette (16 Farben)

Die Beschriftungen zeigen, welchen Hexadezimalnotationen entsprechend der Syntax von HTML und CSS die jeweiligen Farben entsprechen.

#000000 | #808080
#800000 | #FF0000
#008000 | #00FF00
#808000 | #FFFF00
#000080 | #0000FF
#800080 | #FF00FF
#008080 | #00FFFF
#C0C0C0 | #FFFFFF


216 Farben (Netscape-Farbpalette)

Netscape-Farbpalette (216 Farben)

Die Beschriftungen zeigen, welchen Hexadezimalnotationen entsprechend der Syntax von HTML und CSS die jeweiligen Farben entsprechen.

#000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF
#330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF
#660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF
#990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF
#CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF
#FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF
#003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF
#333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF
#663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF
#993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF
#CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF
#FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF
#006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF
#336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF
#666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF
#996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF
#CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF
#FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF
#009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF
#339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF
#669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF
#999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF
#CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF
#FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF
#00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF
#33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF
#66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF
#99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF
#CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF
#FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF
#00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF
#33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF
#66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF
#99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF
#CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF
#FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF


Bars

Diese Grafiken dürfen Sie auf Ihren Homepages verwenden. In den meisten Web-Browsern brauchen Sie nur mit der rechten Maustaste auf die gewünschte Grafik zu klicken, um sie in einem Verzeichnis Ihrer Wahl zu speichern.


Buttons

Diese Grafiken dürfen Sie auf Ihren Homepages verwenden. In den meisten Web-Browsern brauchen Sie nur mit der rechten Maustaste auf die gewünschte Grafik zu klicken, um sie in einem Verzeichnis Ihrer Wahl zu speichern.

Jeder Button wird jeweils dreimal untereinander abgebildet, um zu demonstrieren, wie er z.B. in einer Navigationsleiste wirkt. Alle Buttons sind leer und haben die volle Farbtiefe von 16,7 Millionen Farben, damit Sie Buttons, die Sie verwenden wollen, nach Wunsch beschriften können. Stellen Sie dazu so viele Kopien der leeren Button-Grafik her wie Sie Buttons benötigen. Beschriften Sie die Buttons in einem Grafikprogramm dann nach einheitlichem Muster.


Cliparts

Diese Grafiken dürfen Sie auf Ihren Homepages verwenden. In den meisten Web-Browsern brauchen Sie nur mit der rechten Maustaste auf die gewünschte Grafik zu klicken, um sie in einem Verzeichnis Ihrer Wahl zu speichern.


Dots

Diese Grafiken dürfen Sie auf Ihren Homepages verwenden. In den meisten Web-Browsern brauchen Sie nur mit der rechten Maustaste auf die gewünschte Grafik zu klicken, um sie in einem Verzeichnis Ihrer Wahl zu speichern.


Fotos

Diese Grafiken dürfen Sie auf Ihren Homepages verwenden. In den meisten Web-Browsern brauchen Sie nur mit der rechten Maustaste auf die gewünschte Grafik zu klicken, um sie in einem Verzeichnis Ihrer Wahl zu speichern.


Symbole

Diese Grafiken dürfen Sie auf Ihren Homepages verwenden. In den meisten Web-Browsern brauchen Sie nur mit der rechten Maustaste auf die gewünschte Grafik zu klicken, um sie in einem Verzeichnis Ihrer Wahl zu speichern.


Thumbnails

Diese Grafiken dürfen Sie auf Ihren Homepages verwenden. In den meisten Web-Browsern brauchen Sie nur mit der rechten Maustaste auf die gewünschte Grafik zu klicken, um sie in einem Verzeichnis Ihrer Wahl zu speichern.

Foto 1 - bitte anklicken! | Foto 2 - bitte anklicken!
Foto 5 - bitte anklicken! | Foto 6 - bitte anklicken!


Wallpapers

Diese Grafiken dürfen Sie auf Ihren Homepages verwenden. In den meisten Web-Browsern brauchen Sie nur mit der rechten Maustaste auf die gewünschte Grafik zu klicken, um sie in einem Verzeichnis Ihrer Wahl zu speichern.

Wallpaper 1

Überschrift 1

Text

Überschrift 2

Text

Überschrift 3

Text

Überschrift 4

Text

Wallpaper 2

Überschrift 1

Text

Überschrift 2

Text

Überschrift 3

Text

Überschrift 4

Text

Wallpaper 3

Überschrift 1

Text

Überschrift 2

Text

Überschrift 3

Text

Überschrift 4

Text

Wallpaper 4

Überschrift 1

Text

Überschrift 2

Text

Überschrift 3

Text

Überschrift 4

Text

Wallpaper 5

Überschrift 1

Text

Überschrift 2

Text

Überschrift 3

Text

Überschrift 4

Text

Wallpaper 6

Überschrift 1

Text

Überschrift 2

Text

Überschrift 3

Text

Überschrift 4

Text

Wallpaper 7

Überschrift 1

Text

Überschrift 2

Text

Überschrift 3

Text

Überschrift 4

Text

Wallpaper 8

Überschrift 1

Text

Überschrift 2

Text

Überschrift 3

Text

Überschrift 4

Text

Wallpaper 9

Überschrift 1

Text

Überschrift 2

Text

Überschrift 3

Text

Überschrift 4

Text


SELFHTML: Kleine Helferlein / Unix-Dateirechte-Setzer (chmod)

Unix-Dateirechte-Setzer (chmod)

Vergeben Sie die gewünschten Rechte mit Hilfe der Checkboxen. Im ersten der unteren Felder wird dann der daraus entstehende "Rechte-String" angezeigt, im zweiten die Oktalschreibweise der gewählten Rechte.

Die Möglichkeiten zur Rechtevergabe entsprechen den klassischen Unix-Dateirechten, wonach für jede Datei und jedes Verzeichnis die Lese-, Schreib- und Ausführrechte des Besitzers, seiner Default-Gruppe und aller übrigen Benutzer einstellbar ist. Auf Unix-Systemen werden solche Rechte mit dem chmod-Befehl gesetzt. Dabei geben Sie die Oktalschreibweise an, z.B.:
chmod 755 counter.pl
Wenn Sie sich Verzeichniseinträge auflisten lassen, z.B. mit dem Kommando ls -l, dann werden die Dateirechte normalerweise in der Form des "Rechte-Strings" angezeigt.

Besitzer (owner) | Gruppe (group) | Welt (all)
Lesen | Lesen | Lesen
Schreiben | Schreiben | Schreiben
Ausführen | Ausführen | Ausführen
 | Zeigt die Rechte in "rwx"-Form an
 | Zeigt die Rechte in Oktalschreibweise an


SELFHTML: Kleine Helferlein / Dezimal/Hexadezimal-Umrechner

Dezimal/Hexadezimal-Umrechner

Geben Sie in dem Eingabefeld entweder einen Hexadezimalwert ein, den Sie in einen Dezimalwert umrechnen wollen, oder einen Dezimalwert, den Sie in einen Hexadezimalwert umrechnen wollen. Wählen Sie dann die gewünschte Rechenrichtung aus. In dem Eingabefeld wird dann sofort das Ergebnis angezeigt. Mit dem Button "Eingaben löschen" setzen Sie das Formular in den Anfangszustand zurück.

Bei hexadezimalen Ziffern sind neben den Ziffern 0 bis 9 auch die folgenden Buchstaben erlaubt:
A/a (=10),
B/b (=11),
C/c (=12),
D/d (=13),
E/e (=14),
F/f (=15).

Wert: |
 | von Dezimal nach Hexadezimal umrechnen
 | von Hexadezimal nach Dezimal umrechnen


SELFHTML: Kleine Helferlein / Farbwähler (Hexadezimalfarben)

Weiter zum Farbwähler (Hexadezimalfarben)
zurück: Kleine Helferlein


SELFHTML: Kleine Helferlein / Farbwähler (Hexadezimalfarben)

Vordergrundfarbe:

 Links Werte zwischen 0 und 255 eingeben. Auf Wunsch durch Anklicken eine Orientierungsfarbe auswählen.
Rot:
 Grün:
 Blau:

Hintergrundfarbe:

 Links Werte zwischen 0 und 255 eingeben. Auf Wunsch durch Anklicken eine Orientierungsfarbe auswählen.
Rot:
 Grün:
 Blau:
Button anklicken, um die eingegebene Farbkombination rechts anzuzeigen.

Hexadezimalwerte:

 Die links angezeigten Werte können Sie beim Seite Definieren von Farben einsetzen.
Vordergrund: Hintergrund:


SELFHTML: Kleine Helferlein

SELFHTML

Kleine Helferlein
Kapitelseite

In diesem Abschnitt finden Sie Hilfsprogramme, die bei der täglichen Arbeit mit HTML und mit diesem Dokument nützlich sein können. Für die Helferlein muss Ihr WWW-Browser JavaScript unterstützen, und JavaScript muss aktiviert sein.
Der Abschnitt besteht aus folgenden Seiten:

Seite Farbauswähler (Hexadezimalfarben)
Seite Dezimal/Hexadezimal-Umrechner
Seite Punkt/Inch/Millimeter-Umrechner
Seite Unix-Dateirechte-Setzer (chmod)

SELFHTML aktuell

Im Online-Angebot von SELFHTML aktuell finden Sie weitere Informationen und Links zu anderen Quellen im Web. Folgende Inhalte kommen in Frage:

Online-Kapitel Sonstiges mit verschiedenen "Helferlein"

nach oben

© 2007 Seite Impressum


SELFHTML: Kleine Helferlein / Punkt/Inch/Millimeter-Umrechner

Punkt/Inch/Millimeter-Umrechner

Geben Sie in einem der Felder einen Wert ein, den Sie in die anderen Maßeinheiten umgerechnet bekommen möchten. Klicken Sie dann auf "Umrechnen". In den übrigen Feldern werden anschließend die umgerechneten Werte für die anderen Maßeinheiten angezeigt.

Wenn Felder Werte anzeigen und Sie eine neue Eingabe starten wollen, klicken Sie zuerst auf "Löschen".

Beachten Sie, dass der Umrechner häufig nur ungefähre Werte liefert, die für die Praxis jedoch ausreichen.

Millimeter: |
Zentimeter: |
Didot-Punkt: |
Pica-Punkt: |
Inches: |
 | Anklicken, um eingegebenen Wert in die anderen umzurechnen.
 | Anklicken, um Felder für eine neue Eingabe zu leeren.


Attribute in Tags

HTML - die Sprache des Web


Elemente und Tags

HTML - die Sprache des Web


Leere "standalone" Elemente und Tags

Eine Zeile, ein manueller Zeilenumbruch
und die nächste Zeile


Verschachtelung von Elementen

HTML - die Sprache des Web


Universalattribute notieren - class, dir, id, lang, style, title

Willkommen!

Welcome!

Bienvenue!

Benvenuto!

Boa vinda!

Und der Text?


Event-Handler notieren

Geben Sie eine Rechenoperation mit Grundrechenarten ein und klicken Sie dann auf den Button neben dem Eingabefeld:


Hintergrundmusik - embed

Inhalt der Seite


Hintergrundbild einbinden - background

Text

Verweis zu Yahoo


Dateiweite Farbe für den Hintergrund - bgcolor

Text, Verweise, Grafikreferenzen usw.


Seitenränder - marginwidth, marginheight, topmargin, leftmargin

Text

viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text


Farbe für Text und Verweise - bgcolor, text, link, vlink, alink

Text

Verweis zu Yahoo


Tastaturkürzel, accesskey

Greifen Sie in die Tasten!

Ein Feld mit [Alt]+f:

Ein Button mit [Alt]+b:

Ein Texteingabebereich mit [Alt]+t:


Klick-Buttons definieren (Bild) - input, type, button, img

Verweise einmal anders


Elemente ausgrauen - disabled

Ein Formular für später mal!

Ihr Name:

Ihr Kommentar:


Elemente gruppieren - fieldset, legend

Wünschen Sie sich was!

Absender
Ihr Vorname:
Ihr Zuname:
Wunsch
Ihr Hauptwunsch:
Ihr Zusatzwunsch:


Formulare und Formularelemente gestalten mit CSS

Das hier können Sie absenden!

Voraussetzung ist eine Verbindung ins Internet. Es werden keine Daten gespeichert, das verarbeitende CGI-Script gibt lediglich die eingelesenen Daten aus.

Vorname:
Zuname:
Geschlecht: männlich
weiblich
Eigenschaften: Raucher
Autofahrer
HTML-Freak
Nächste Großstadt:
Kommentar:
Formular:


Klick-Buttons definieren (herkömmlich) - input, type, button

Verweise einmal anders


Checkboxen definieren - input, type, checkbox

Pizzabelag nach Wahl!

Kreuzen Sie die gewünschten Zutaten an:

Salami
Pilze
Sardellen


Felder für Datei-Upload definieren - input, type, file

Schicken Sie uns was Schickes!

Wählen Sie eine Textdatei (txt, html usw.) von Ihrem Rechner aus:


Versteckte Elemente in Formularen definieren - input, type, hidden

Feedback

Ihr Kommentar:


Grafische Buttons zum Absenden definieren - input, type, image

Absenden mit Komfort!

Voraussetzung ist eine Verbindung ins Internet. Es werden keine Daten gespeichert, das verarbeitende CGI-Script gibt lediglich die eingelesenen Daten aus.

Ihre E-Mail-Adresse:
Formular:


Eingabefelder für Passwörter - type, password

Nur nicht auf die Tastatur gucken lassen ... :-)

Kennwort:


Radio-Buttons definieren - input, radio

Hier wird abkassiert!

Geben Sie Ihre Zahlungsweise an:

Mastercard
Visa
American Express


Buttons zum Absenden oder Abbrechen definieren (herkömmlich) - input, type, submit, reset

Das hier können Sie absenden!

Voraussetzung ist eine Verbindung ins Internet. Es werden keine Daten gespeichert, das verarbeitende CGI-Script gibt lediglich die eingelesenen Daten aus.

Vorname:
Zuname:
Kommentar:
Formular:


Einzeilige Eingabefelder definieren - form, input

Formular für Namenseingabe

Vorname:

Zuname:


Textvorbelegung bei einzeiligen Eingabefeldern - value

Einfach überschreiben...

Vorname:

Zuname:


Label für Elemente, label

Meine Beschriftung gehört zu mir wie mein Name an der Tür!

Formular


Einträge vorselektieren - option, selected

Sie können auch einen anderen Favoriten wählen!


Absendewert von Einträgen bestimmen - option, value

Pizzeria Fantasia

Ihre Pizza-Bestellung:


Eingabefelder und Eingabebereiche auf "nur lesen" setzen - readonly

Kein Rabatt und keine Gnade

Preis:

Lizenzvereinbarung:


Auswahllisten definieren - select, option

Wählen Sie Ihren Favoriten!


Auswahllisten mit Mehrfachauswahl - select, multiple

Wählen Sie so viele Favoriten wie Sie wollen!


Verschachtelte Auswahllisten (Menüstruktur) definieren - optgroup

Wählen Sie Ihren Lieblingsnamen!

Zur Auswahl stehen:


Tabulator-Reihenfolge, tabindex

Steppen Sie mit [Tab] durch!

Feld 1:
Feld 2:
Feld 3:


Mehrzeilige Eingabebereiche definieren - textarea, cols, rows

Ganz spontan

Welche HTML-Elemente fallen Ihnen ein, und was bewirken sie:


Mehrzeilige Eingabebereiche mit Text vorbelegen - textarea

Schreiben Sie eine Geschichte!

Hier der Anfang der Geschichte:


Textumbruch in mehrzeiligen Eingabebereichen - wrap

Brechen Sie um, aber nicht ab!

einmal soft:

einmal hard:

einmal physical:

einmal virtual:

und einmal off:


Frameset

Navigation Daten


Der universelle Titel

Willkommen!

Dieses Projekt verwendet Frames.

Wählen Sie einen der Verweise aus:
Startseite


Scrollbars (Bildlaufleisten) erzwingen/verhindern - scrolling

Navigation Daten


Mindestabstände zwischen Fensterrand und Fensterinhalt - marginwidth, marginheight

Navigation Daten


Unveränderbare Fenstergröße

Navigation Daten


Rahmendicke bzw. unsichtbare Fensterrahmen - frameborder

Navigation Daten


Rahmendicke bzw. unsichtbare Fensterrahmen - framespacing, frameborder, border

Navigation Daten


Farbige Fensterrahmen - bordercolor

Navigation Daten


Verweise zum Beenden von Framesets - target

Navigation Daten


Eingebettete Frames definieren - iframe

Fenstergucker

Gucken Sie mal SELFHTML im Fenster an:


Eigenschaften eingebetteter Frames - src, name, width, height, align, scrolling, marginheight, marginwidth, frameborder

Bild zum Scrollen

Dieses Bild wurde auf dem Karwendelstein bei Mittenwald aufgenommen, in ca. 2400 Metern Höhe. Es demonstriert, was einem in einem Freistaat so alles passieren kann ...


Verweise zu eingebetteten Frames - target

Fernsteuerung

andere Seite
erste Seite


Startseite

Willkommen

Wählen Sie links einen Verweis aus!


Startseite

Willkommen

Wählen Sie links einen Verweis aus!

zurück zur Startseite


Navigation

Über Frames
Über HTML
Noch viel mehr


Navigation

Über Frames
Über HTML
Noch viel mehr

zurück

↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

Ende


Startseite

Willkommen

Wählen Sie links einen Verweis aus! Oder probieren Sie mal diesen hier:
SELFHTML aktuell


Langbeschreibung für Grafiken

Alte Zeiten

Das Bild mit dem Titel Alte Zeiten ist eine Collage aus der ersten Nummer der legendären ersten deutschsprachigen Internet-Zeitschrift Planet aus dem Hause Ziff-Davis.

Der Ziff-Verlag erlaubte es seinerzeit uns HTML-Freaks, die ein elektronisches Magazin planten, aus dem dann aber doch nichts wurde, Artikel und Grafikmaterial aus der Planet zu verwenden.

Das ist alles lange, lange her ... 1996!

zurück zur Grafik


Broken image

Wenn Sie diesen Text sehen, ist das Bild wohl nicht da!


Grafiken anstelle von Verweistext definieren

Home zurück weiter THEMA

Willkommen auf dieser Homepage

Hier geht es um Grafiken als Verweise und um Navigationsleisten!


Grafikreferenz definieren - img, src

Tanzmaus


Text um Grafik fließen lassen - vspace, hspace

Ein Text

Manche Texte erschließen sich nur aus der nötigen Distanz. Sogar dann, wenn sie selber genau das Gegenteil davon behaupten. Aber so ist das eben mit den Widersprüchen.

Der Vorteil solcher Texte ist, dass man gezwungen ist, seine angestammte Position vor dem Bildschirm zu verlassen. Gehen Sie auf Distanz, und die Augen werden Ihnen aufgehen!

Aber denken Sie sich nicht zuviel dabei. Es ist ja schließlich gar kein Text - es ist ja eine Grafik! Aber das hier, das ist richtiger Text. Und er fließt sogar, nämlich um die Grafik.


Grafik zum umgebenden Text ausrichten - align

Woran der Denker denkt

Denkt der Denker Denker an das Oben?

Denkt der Denker Denker an die Mitte?

Denkt der Denker Denker an das Unten?


Rahmen um Grafiken - border

Baum am Abend


Grafiken ausrichten mit CSS - vertical-align, float, margin

Woran der Denker denkt

Denkt der Denker Denker an das Oben?

Denkt der Denker Denker an die Mitte?

Denkt der Denker Denker an das Unten?

Oder denkt er an ...?

Manche Texte erschließen sich nur aus der nötigen Distanz. Sogar dann, wenn sie selber genau das Gegenteil davon behaupten. Aber so ist das eben mit den Widersprüchen.

Der Vorteil solcher Texte ist, dass man gezwungen ist, seine angestammte Position vor dem Bildschirm zu verlassen. Gehen Sie auf Distanz, und die Augen werden Ihnen aufgehen!

Aber denken Sie sich nicht zuviel dabei. Es ist ja schließlich gar kein Text - es ist ja eine Grafik! Aber das hier, das ist richtiger Text. Und er fließt sogar, nämlich um die Grafik.


Langbeschreibung für Grafiken - longdesc

Alte Zeiten


Namen für Grafiken - name

Baum


Grafik und andere Inhalte ausrichten mit Tabellen - align, valign

Schadenfreude

Erstaunen

Skepsis

Betretenheit
Schadenfreude | Erstaunen | Skepsis | Betretenheit
ist die schönste Freude, kann aber Feinde schaffen | gebar die Philosophie und wird von Rechthabern immer wieder unterschätzt | ist bisweilen angebracht, sollte aber nicht das weitere Dazulernen behindern | ist sehr unangenehm, währt aber nicht ewig


Verweis-sensitive Grafiken definieren - map, area, usemap

Schnell zur Stadt oder Region Ihrer Wahl!

Koblenz Wiesbaden Mainz Frankfurt Mannheim Heidelberg Würzburg Bamberg Nürnberg Karlsruhe Heilbronn Stuttgart Ulm Augsburg Baden


Breite und Höhe von Grafiken - width, height

Tanzbär


Grafiken anstelle von Verweistext definieren

Home zurück weiter THEMA

Andere Seite

Navigationsleisten können natürlich auch links oder rechts und unten vorkommen!


Grafiken anstelle von Verweistext definieren

Home zurück weiter THEMA

Thema "Grafik"

Zu diesem Thema gibt es unendlich viel zu sagen!


Grafiken anstelle von Verweistext definieren

Navigationsleisten

Was wäre das Web ohne sie!


Inline-Layer definieren - ilayer

Das ist Layer-Text mitten im Text. Das Wort "Layer-Text" ist dabei in einen Inline-Layer eingebunden. Hintergrundfarbe erhalten. Außerdem wurde der Inline-Layer 3 Pixel tiefer dargestellt wird als der normale Text.


Layer definieren - layer

Irgendwo auf Ihrem Bildschirm ...

Alles, was Sie hier sehen, ist in einen Layer integriert. Auch das folgende Bild:

Was der Mond alles mit ansehen muss


Angaben zur Schichtposition mit Layer-Namen - above, below

ERSTER

ZWEITER

DRITTER

VIERTER


Hintergrundbild für Layer - background

Bunte Zeiten


Hintergrundfarbe für Layer - bgcolor


Anzeigebereich von Layern beschneiden - clip

Halbmond


Layer verschachteln - layer

Die Macht

kommt aus der Nacht


Layer mit Inhalt aus anderer Datei - src

SELFHTML im Layer


Layer verstecken und anzeigen - visibility

Anderen Layer anzeigen
(dazu wird ein einfaches JavaScript eingesetzt)

Diesen Layer verstecken
(dazu wird ein einfaches JavaScript eingesetzt)


Angaben zur Schichtposition mit Indexnummern - z-index

ERSTER

ZWEITER

DRITTER

VIERTER


Java-Applets einbinden

Ein HTML-Farbwähler mit Java

Schieben Sie einfach mit der Maus die Schieberegler an eine gewünschte Position.


Eigenschaften von Java-Applets - param

Im Internet ist der Winter nett, weil im Hinternet ist das Bett!

Das Applet zeigt ein normales JPEG-Bild und lässt Schnee darüber fallen.


Multimedia-Bereich definieren - embed

Da kommt Freude auf!


HTML-Elemente auf einen Blick:

a
acronym
address
applet
area
b
base
basefont
bdo
big
blockquote
body
button
caption
center
cite
code
colgroup
dd
del
dfn
dir
div
dl
dt
em
embed
font
fieldset
form
frameset
h1
h2
h3
h4
h5
h6
head
html
i
iframe
ilayer
input
ins
isindex
kbd
label
layer
legend
li
link
map
marquee
menu
meta
multicol
noframe
object
ol
optgroup
option
p
param
pre
q
s
samp
script
select
small
span
strike
strong
sup
sup
style
table
tbody
td
textarea
title
tfoot
th
thead
tr
tt
u
ul
var


Alternative zu Marquee

Ein Lauftext mit Java


Alternativer Inhalt für Browser - noembed

Einfach noch mal 'ne Runde "nibbeln" mit Flash!


ActiveX-Controls als Objekt einbinden

Eine MIDI-Datei


Text um Objekt fließen lassen - hspace, vspace

Animation!

Kann schön sein, wenn sie nicht zu aufdringlich ist. Dies ist ein Flash-Filmchen von gerade mal einem Kilobyte Größe.

Gratulation!

Der Text geht unterhalb weiter.


Objekt zum umgebenden Text ausrichten - align

HIER SPIELT Ihr Browser kann das Objekt leider nicht anzeigen! DIE MUSIK


Rahmen um Objekte - border

Eine eingerahmte eingebundene Text-Datei!

Ihr Browser kann das Objekt leider nicht anzeigen!


Objekte formatieren mit CSS

HIER SPIELT Ihr Browser kann das Objekt leider nicht anzeigen! DIE MUSIK


Datendateien als Objekt einbinden

Analoguhr als SVG-Grafik mit eingebettetem JavaScript

Ihr Browser kann das Objekt leider nicht anzeigen!


Instanz eines Objekts nur bei Aufruf durch Anwender anzeigen - declare

Wollen Sie oder wollen Sie nicht?

Animierten Text anzeigen


Flash-Anwendungen als Objekt einbinden - object, classid, param, embed

Das gute alte Wurm-Spiel in Flash!

Erst auf "Start" klicken. Dann Leertaste drücken. Mit dem Wurm die angezeigte Zahl ansteuern und treffen. Außenränder und Hindernisse nicht berühren!


Java-Applets als Objekt einbinden

Wagen Sie sich durchs Labyrinth!


Meldungstext während des Ladevorgangs anzeigen - standby

Bauen Sie eine Brücke!

Klicken Sie auf weiße Felder. Mit Rot versuchen Sie Ihre Brücke zwischen oberem und unterem Spielfeldrand zu bauen. Blau versucht Sie daran zu hindern.


Verweis-sensitive Grafiken als Objekt einbinden - map, area, object

Zur Stadt oder Region Ihrer Wahl!

Klicken Sie, falls Sie die LuraWave-Grafik sehen können, auf die Stadt oder Region Ihrer Wahl. Falls nichts passiert, unterstützt der Browser zwar die Anzeige des Objekts, aber nicht das Feature verweis-sensitiver Grafiken für Objekte.

Koblenz Wiesbaden Mainz Frankfurt Mannheim Heidelberg Würzburg Bamberg Nürnberg Karlsruhe Heilbronn Stuttgart Ulm Augsburg Baden Ihr Browser kann das Objekt leider nicht anzeigen!


Java-Applets als Objekt einbinden

Ein Lauftext mit Java


Kurzbeschreibung für Zellen definieren - abbr

Berlin | Hamburg | München
Hier eine Menge Inhalt | Hier eine Menge Inhalt | Hier eine Menge Inhalt


Ausrichtung von Zelleninhalten - align, valign

Richtungsweisend

links oben | zentriert oben | rechts oben
links mittig | zentriert mittig | rechts mittig
links unten | zentriert unten | rechts unten
alles ... | ... zentriert ... | ... mittig

Auch am Dezimalzeichen?

Element | Anteil in mg
Nitrat | 0,117126
Hydrogencarbonat | 330,0


Hintergrundfarben und Hintergrundbilder - bgcolor, background-color, background-image

Große Worte mit HTML

Traum

Zeit

Luft

Licht

Himmel

Leben

Große Worte mit CSS

Traum

Zeit

Luft

Licht

Himmel

Leben


Tabellenüberschrift / Tabellenunterschrift definieren - caption

Assoziationen
Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl


Zellenabstand und Zelleninnenabstand in Tabellen - cellpadding, cellspacing

Weit auseinander

Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl


Zellen in einer Spalte zeilenweise verbinden - colspan, rowspan

Zoologie (III)

Der Mensch ist... |  | zum einen Teil ein Esel
 |  | zum anderen Teil ein Affe
weder ein richtiger Esel | noch ein richtiger Affe | menschlich, allzumenschlich


Tabellen-Spalten vordefinieren - colgroup

Beispielschema 1

1. Zeile, 1. Spalte 1. Zeile, 2. Spalte 1. Zeile, 3. Spalte

Beispielschema 2

1. Zeile, 1. Spalte 1. Zeile, 2. Spalte 1. Zeile, 3. Spalte

Beispielschema 3

1. Zeile, 1. Spalte 1. Zeile, 2. Spalte 1. Zeile, 3. Spalte


Zellen in einer Zeile spaltenweise verbinden - colspan

Zoologie

Die Menschheit besteht aus
Eseln Affen


Kopfzellen in Zellen referenzieren - headers

Berlin | Hamburg | München
Buletten | Frikadellen | Fleischpflanzerl


Tabellen-Kategorien definieren - axis, headers

Reisekosten-Abrechnung
 | Speisen | Hotels | Fahrtkosten | Summen
Hamburg |  |  |  |
12.08.98 | 37.74 | 112.00 | 45.00 |
13.08.98 | 27.28 | 112.00 | 45.00 |
Summen | 65.02 | 224.00 | 90.00 | 379.02
Berlin |  |  |  |
14.08.98 | 96.25 | 109.00 | 36.00 |
15.08.98 | 35.00 | 109.00 | 36.00 |
Summen | 131.25 | 218.00 | 72.00 | 421.25
Gesamt | 196.27 | 442.00 | 162.00 | 800.27


Beispiel eines typischen Tabellen-Layouts

Willkommen

Navigation

Tabelle
Hintergrund
Zellen verbinden
Breite und Höhe

News

Die Neuigkeiten stehen stets an dieser Stelle. Viel Neues gibt es nicht. Nur so viel: diese Seite ist neu.

zurück

Worum geht es hier eigentlich?

Ach, um Web-Design, halt das Übliche.

viel Inhalt

viel Inhalt

viel Inhalt

viel Inhalt

viel Inhalt

viel Inhalt

viel Inhalt

viel Inhalt

viel Inhalt

viel Inhalt


Zeilenumbruch in Tabellenzellen verhindern - nowrap

Lange Nächte

Die langen HTML-Nächte von Berlin sind die längsten Nächte überhaupt. Die langen CSS-Nächte von Berlin sind ebenfalls die längsten Nächte und sogar noch länger als die HTML-Nächte.


Zellen in einer Spalte zeilenweise verbinden - rowspan

Zoologie (II)

Die Eselheit besteht aus | echten Eseln
 | verkappten Eseln (Menschen)
Die Affenheit besteht aus | echten Affen
 | verkappten Affen (Menschen)


Kopfzelleninformation in jeder zugehörigen Datenzelle wiederholen - scope

Berlin | Hamburg | München
Buletten | Frikadellen | Fleischpflanzerl


Kurzbeschreibung des Tabelleninhalts - summary

Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl


Tabellenausrichtung - align

Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf

Die Tabelle sagt zwar schon eine Menge aus, aber natürlich nicht alles. Deshalb sollten Sie die drei Städte lieber mal selbst besuchen.

Keine Zeit, kein Geld? Na, dann tun Sie's doch im Web!

Menschen
Esel Affen

Die Tabelle sagt zwar schon eine Menge aus, aber natürlich nicht alles. Deshalb sollten Sie sich selbst von der Richtigkeit ihrer Aussagen überzeugen.

Gehen Sie einfach mal in den Zoo, gucken Sie sich Esel und Affen an und vergleichen Sie dann selbst!


Regeln für den Außenrahmen bei Tabellen - border, frame

Rahmenvereinbarung

Assoziation 1 | Assoziation 2 | Assoziation 3
Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl


Regeln für Gitternetzlinien bei Tabellen - border, rules

Gruppendynamik

Assoziation 1 | Assoziation 2 | Assoziation 3
Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl
betroffen: 4 Mio. Menschen | betroffen: 2 Mio. Menschen | betroffen: 1 Mio. Menschen


Aufbau einer Tabelle - table, tr, th, td, border

Tabelle mit Gitternetzlinien

Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl

Tabelle ohne Gitternetzlinien (blinde Tabelle)

ARQ

Automatic Repeat Request. Eine allgemeine Bezeichnung für Fehlerprotokolle, die Übertragungsfehler erkennt und defekte Blöcke selbständig wiederholt

HDLC

High Level Data Link Control. Ein Standard-Protokoll, das von der Kommission für internationale Standards für Softwareanwendungen in synchronen Anlagen verwendet wird.


Kopf, Körper und Fuß einer Tabelle definieren - thead, tfoot, tbody

Betroffene Menschen

Assoziation 1 | Assoziation 2 | Assoziation 3
Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl
betroffen: 4 Mio. Menschen | betroffen: 2 Mio. Menschen | betroffen: 1 Mio. Menschen


Breiten- und Höhenangaben bei Tabellen - width, height

Breit und hoch mit HTML

Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl

Breit und hoch mit CSS

Berlin | Hamburg | München
Miljöh | Kiez | Bierdampf
Buletten | Frikadellen | Fleischpflanzerl


Adressen - address

Das HTML-Element für Adressen wird kaum verwendet.

Max Mustermann, max.mustermann@example.org


Textrichtung ändern - bdo, dir

Umgekehrt

Hier wird das Wort "umgekehrt" einfach umgekehrt.


Blinkender Text - blink

Warnung!


Zitate definieren - blockquote

Franz Kafka

Über die Krähen und den Himmel schreibt Franz Kafka:

Die Krähen behaupten, eine einzige Krähe könne den Himmel zerstören; das ist zweifellos, beweist aber nichts gegen den Himmel, denn Himmel bedeutet eben: Unmöglichkeit von Krähen.


Zitate und Adressen formatieren mit CSS

Zitat und Adresse

Klarheit ist, wenn man so will, nur die anschaulichere Variante der Wahrheit.

Brigitte Beispiel, beispiel@example.org


Zitate mit URI-Quellenangabe - cite

Die Energie des Verstehens

Geben Sie nicht auf, denn Sie haben sie:

Die Energie des Verstehens


Zeilenumbruch erzwingen - br

Ottos Brief an die Mutter

Liebe Mama!

Vor drei Wochen habe ich erfahren,
dass Du krank bist.
Mach' Dir keine Sorgen.
Mir geht es gut.


Älteres Block-Element für zentrierte Bereiche - center

Zentrierter Kunsttext

.:*A*:._.:*S*:._.:*C*:._.:*I*:._.:*I*:._.:*~*:._.:*A*:._.:*R*:._.:*T*:.


Verzeichnis- oder Menüliste definieren - dir, menu

Verzeichnisse und Menüs

  • /usr/home/
  • /usr/home/web/
  • /usr/home/web/data/
    •
  • Datei
  • Bearbeiten
  • Ansicht
    •


Allgemeines Block-Element - div

Alles zentriert

  • alles zentriert
  • alles?
  • alles!

Alles rechts am Rand

  • alles rechts am Rand
  • alles?
  • alles!


Allgemeine Elemente formatieren mit CSS

Alles zentriert

  • alles zentriert
  • alles?
  • alles!

Alles rechts am Rand

  • alles rechts am Rand
  • alles?
  • alles!


Definitionslisten definieren - dl, dt, dd

DFÜ-Abkürzungen

AA
Auto Answer (Modem)
AAE
Allgemeine Anschalte-Erlaubnis
AARP
Appletalk Address Resolution Protocol
ABATS
Automatic Bit Access Test System
ABC
AtanasoffBerryComputer
ABEL
Advanced Boolean Expression Language
ABI
Application Binary Interface (Sun)
ABM
Asynchronous Balanced Mode
ACC
Area Communication Controller (Modacom)
ACE
Advanced Computing Environment (Hersteller)
ACIA
Asynchronous Communications Interface Adapter
ACL
Advanced CMOS Logic
ACM
Association for Computing Machinery (USA)
ACR
Attenuation to Crosstalk Radio (Netzkabel)
ACS
Advanced Communications System, oder
Architekten, Computer, Systeme (Messe), oder
Australian Computer Science
ACSE
Association Control Service Element (OSI)


Schriftart, Schriftgröße und Schriftfarbe - font, size, color, face, basefont

Ziemlich riesiger Text
Ziemlich winziger Text
Text etwas größer als normal
Text deutlich kleiner als normal

Knallroter Text
Grüner Text
Blauer Text

Das ist Text in Schriftart Avalon, oder, falls Avalon nicht darstellbar, in Wide Latin

Da komme was wolle

Alles kleiner als normal, lila und in Schriftart Verdana


Schriftart, Schriftgröße und Schriftfarbe - CSS-Entsprechungen

Ziemlich riesiger Text
Ziemlich winziger Text
Text etwas größer als normal
Text, der der gewünschten Einstellung des Besuchers entspricht
Text deutlich kleiner als normal

Knallroter Text
Grüner Text
Blauer Text

Das ist Text in Schriftart Avalon, oder, falls Avalon nicht darstellbar, in Wide Latin

Da komme was wolle

Alles kleiner als normal, lila und in Schriftart Verdana


Überschriften definieren - h1, h2, h3, h4, h5, h6

Überschrift 1. Ordnung

Überschrift 2. Ordnung

Überschrift 3. Ordnung

Überschrift 4. Ordnung

Überschrift 5. Ordnung
Überschrift 6. Ordnung


Überschriften ausrichten - align

Überschrift 1. Ordnung zentriert

Überschrift 2. Ordnung zentriert

Überschrift 3. Ordnung zentriert

Überschrift 1. Ordnung rechtsbündig

Überschrift 2. Ordnung rechtsbündig

Überschrift 3. Ordnung linksbündig

Sehr lange Überschrift 1. Ordnung im Blocksatz, welcher allerdings erst gut sichtbar wird, sobald mehrere Zeilen erforderlich sind.


Überschriften formatieren mit CSS

Überschrift 1. Ordnung


Trennlinien definieren - hr

Hier ist ein Abschnitt zu Ende.

Und hier beginnt etwas Neues.


Trennlinien mit HTML gestalten - hr, noshade, width, size, align

Hier ist ein Abschnitt zu Ende.

Hier beginnt etwas Neues.


Trennlinien mit CSS gestalten

Hier ist ein Abschnitt zu Ende.

Hier beginnt etwas Neues.


Änderungsmerkierungen im Dokument - ins, del

Viel falsch

Goethe wurde im Jahre 1768 1749 geboren und war ein begnadeter Sportler Schriftsteller.


Listen formatieren mit CSS

Listen mit CSS

Aufzählungsliste

  • Probieren geht über Studieren
  • Liebe geht über Triebe
  • Tante fällt über Kante

Nummerierte Liste

  1. bei Anette vorbeischauen
  2. bei Bianca vorbeischauen
  3. bei Christine vorbeischauen

Definitionsliste

AA
Auto Answer (Modem)
AAE
Allgemeine Anschalte-Erlaubnis
AARP
Appletalk Address Resolution Protocol


HTML-Elemente für logische Auszeichnung im Text

Alles logisch

Die Kreter sagen, dass alle Kreter lügen. Das stimmt aber nicht, weil alle Kreter lügen.


Logische Elemente für Textauszeichnung formatieren mit CSS

Viele viele bunte Logis

Text mit dem em-Element
Text mit dem strong-Element
Text mit dem code-Element
Text mit dem samp-Element
Text mit dem kbd-Element
Text mit dem var-Element
Text mit dem cite-Element
Text mit dem dfn-Element
Text mit dem acronym-Element
Text mit dem abbr-Element
Text mit dem q-Element


Lauftext - marquee

 Dieser Text wird ziemlich schnell bewegt Dieser Text wird hin und her bewegt


Mehrspaltiger Text - multicol, cols, gutter

Lesen des folgenden Textes kann zum Verlust der Faszination der Zauberei führen! Erklärungen nur nach Betrachten der Illusionen lesen!

D.C. errät Graffiti im voraus

Der Trick, bei dem DC und Claudia Schiffer sich kennen gelernt haben: bei der Premiere in Berlin war sie die Freiwillige (obwohl sie eine halbe Stunde verspätet kam).

DC führt eine Mauer auf Rollen auf die Bühne. Er erklärt, dass er Graffiti vorausahnen kann. Er zeigt einen Umschlag, welcher an einer Laterne aufgehängt wird. Er lässt sich durch Zuschauer diverse Namen und Zahlen zurufen, welche er durch eine Zuschauerin auf die Mauer sprühen lässt. Schließlich lässt er die Zuschauerin die Spraydosen zurücklegen (Ordnung muss sein). Er präsentiert den Umschlag der Zuschauerin. Dort ist ein Tuch, auf dem (bis auf eine lustige Abweichung) genau das steht, was auf der Mauer war.

Es gibt keine Hellseher, und die verschiedenen Zuschauer wurden auf eine mir glaubwürdige Weise ausgewählt. Ein genauer Vergleich der Mauer mit dem Tuch zeigt geringfügige Abweichungen, ein carbon copy kommt also nicht in Frage (außerdem ist ja die lustige Abweichung vorhanden). Die Erklärung: Während die Zuschauerin die Spraydosen aufräumt, gelangt irgendwie das Tuch, welches durch einen Mitarbeiter erstellt wurde, in den hoch und heilig verschlossenen Umschlag. Dies geschieht zu dem Zeitpunkt, wo DC den Umschlag an die Mauer hält, um den Brieföffner zu greifen, der oben in der Mauer steckt.

Das Tuch wird dann hinter dem Umschlag herausgeholt. Dies geschieht z.B. mit Hilfe eines Schlitzes, sodass auch eine echte Zuschauerin nichts bemerkt. Auf dem Video ist außerdem zu sehen, dass er mit seinem Körper den Vorgang teilweise verdeckt. Das dummy-Tuch bleibt im Umschlag zurück.

Eine unterschiedliche Version dieses Tricks wurde in der Sendung Upn Swutsch gezeigt. Da war es eine Kiste, welche hoch und heilig verschlossen war. Deshalb musste auch ein Assistent kommen, der die Kiste öffnete, wobei er hinter der Kiste stand. Auch hier gab es also eine Manipulationsmöglichkeit.


Geschützte Leerzeichen - &nbsp;

Es gibt vieles, worin sich HTML 2.0 und HTML 4.0 unterscheiden.

(Versuchen Sie zur Kontrolle einmal, das Anzeigefenster so schmal zu machen, dass der Text des obigen Satzes bei "HTML 2.0" oder "HTML 4.0" umbrochen wird.)


Zeilenumbruch verhindern - nobr

ARD und ZDF

Die vom ZDF sagen, die vom ARD senden ständig Wiederholungen, und die vom ARD sagen, die vom ZDF senden ständig Wiederholungen, und so wiederholen sich ARD und ZDF ständig, ohne überhaupt etwas zu senden.


Nummerierte Liste definieren - ol, li

Todo-Liste

  1. bei Anette vorbeischauen
  2. bei Bianca vorbeischauen
  3. bei Christine vorbeischauen
  4. bei Doris vorbeischauen
  5. bei Ellen vorbeischauen
  6. bei Friderike vorbeischauen
  7. bei Gundula vorbeischauen
  8. bei Hannelore vorbeischauen
  9. bei Inge vorbeischauen
  10. bei Janette vorbeischauen
  11. bei Karin vorbeischauen
  12. bei Lydia vorbeischauen
  13. bei Marianne vorbeischauen
  14. bei Nina vorbeischauen
  15. bei Olga vorbeischauen
  16. bei Paula vorbeischauen
  17. bei Q. (Susi) vorbeischauen
  18. bei Renate vorbeischauen
  19. bei Sandra vorbeischauen
  20. bei Tanja vorbeischauen
  21. bei Ute vorbeischauen
  22. bei Veronica vorbeischauen
  23. bei Waltraud vorbeischauen
  24. bei Xanthippe vorbeischauen
  25. bei Yella vorbeischauen
  26. bei Zita vorbeischauen


Textabsätze definieren - p

Textabsätze definieren

Hier beginnt ein Absatz, und hier ist er zu Ende.

Hier beginnt ein neuer Absatz, und hier ist er zu Ende.


Textabsätze ausrichten - align

Textabsätze ausrichten

Dies ist ein zentrierter Absatz.

Dies ist ein Absatz, der rechtsbündig ausgerichtet ist.

Dies ist ein Absatz, der linksbündig ausgerichtet ist. Dies ist ein Absatz, der linksbündig ausgerichtet ist. Dies ist ein Absatz, der linksbündig ausgerichtet ist. Dies ist ein Absatz, der linksbündig ausgerichtet ist. Dies ist ein Absatz, der linksbündig ausgerichtet ist. Dies ist ein Absatz, der linksbündig ausgerichtet ist. Dies ist ein Absatz, der linksbündig ausgerichtet ist. Dies ist ein Absatz, der linksbündig ausgerichtet ist.

Dies ist ein Absatz, der im Blocksatz ausgerichtet ist. Dies ist ein Absatz, der im Blocksatz ausgerichtet ist. Dies ist ein Absatz, der im Blocksatz ausgerichtet ist. Dies ist ein Absatz, der im Blocksatz ausgerichtet ist. Dies ist ein Absatz, der im Blocksatz ausgerichtet ist. Dies ist ein Absatz, der im Blocksatz ausgerichtet ist. Dies ist ein Absatz, der im Blocksatz ausgerichtet ist. Dies ist ein Absatz, der im Blocksatz ausgerichtet ist.


Textabsätze formatieren mit CSS

Ein formatierter Absatz.

Ein anderer formatierter Absatz.


HTML-Elemente für physische Auszeichnung im Text

Fett und schief

Das Schwein ist fett und der Turm von Pisa ist schief.
Und was ist fett und schief?


Physische Elemente für Textauszeichnung zusätzlich formatieren mit CSS

Fett und schief mit Stil

Das Schwein ist fett und der Turm von Pisa ist schief.


Textabschnitt mit präformatiertem Text definieren - pre

Ostern mit Pascal

  FUNCTION Osterberechnung(year : INTEGER) : INTEGER;
  VAR  a, b, c, d, e, f, g, h, i, k, l, m : INTEGER;
  BEGIN
     a  :=  year MOD 19;
     b  :=  year DIV 100;
     c  :=  year MOD 100;
     d  :=  b DIV 4;
     e  :=  b MOD 4;
     f  :=  ( b + 8 ) DIV 25;
     g  :=  ( b  f + 1 ) DIV 3;
     h  :=  ( 19 * a + b  d  g + 15 ) MOD 30;
     i  :=  c DIV 4;
     k  :=  c MOD 4;
     l  :=  ( 32 + 2 * e + 2 * i  h  k ) MOD 7;
     m  :=  ( a + 11 * h + 22 * l ) DIV 451;
     Easter :=  h + l - 7 * m + 22;
  END{FUNC};


Präformatierten Text formatieren mit CSS

Software-Entwicklung

#include <nonsense.h>
#include <lies.h>
#include <spyware.h> /* Microsoft Network Connectivity library */
#include <process.h> /* For the court of law */

#define say(x) lie(x)
#define computeruser ALL_WANT_TO_BUY_OUR_BUGWARE
#define soon next_year
#define the_product_is_ready_to_ship   another_beta_version

void main()
{
  if (latest_window_version>one_month_old)
  {
    if (there_are_still_bugs)
      market(bugfix);
    if (sales_drop_below_certain_point)
      raise(RUMOURS_ABOUT_A_NEW_BUGLESS_VERSION);
  }
  while(everyone_chats_about_new_version)
  {
    make_false_promise(it_will_be_multitasking); /* Standard Call, in
                                                    lie.h */
    if (rumours_grow_wilder)
      make_false_promise(it_will_be_plug_n_play);
    if (rumours_grow_even_wilder)
    {
      market_time=ripe;
      say("It will be ready in one month);
      order(programmers, stop_fixing_bugs_in_old_version);
      order(programmers, start_brainstorm_about_new_version);
      order(marketingstaff, permission_to_spread_nonsense);
      vapourware=TRUE;
      break;
     }
  }
  switch (nasty_questions_of_the_worldpress)
  {
     case WHEN_WILL_IT_BE_READY:
       say("It will be ready in", today+30_days," we're just testing");
       break;
    case WILL_THIS_PLUG_AND_PLAY_THING_WORK:
       say("Yes it will work");
       ask(programmers, why_does_it_not_work);
       pretend(there_is_no_problem);
       break;
     case WHAT_ARE_MINIMAL_HARDWARE_REQUIREMENTS:
       say("It will run on a 8086 with lightning speed due to"
           " the 32 bits architecture");
       inform(INTEL, "Pentium sales will rise skyhigh");
       inform(SAMSUNG, "Start a new memorychip plant"
              "'cos all those customers will need at least 32 megs");
       inform(QUANTUM, "Thanks to our fatware your sales will triple");
       get_big_bonus(INTEL, SAMSUNG, QUANTUM);
       break;
     case DOES_MICROSOFT_GET_TOO_MUCH_INFLUENCE:
       say("Oh no, we are just here to make a better world for
            everyone");
       register(journalist, Big_Bill_Book);
       when(time_is_ripe)
       {
         arrest(journalist);
         brainwash(journalist);
         when(journalist_says_windows95_is_bugfree)
         {
           order(journalist, "write a nice objective article");
           release (journalist);
         }
       }
       break;
   }
   while (vapourware)
   {
     introduction_date++; /* Delay */
     if (no_one_believes_anymore_there_will_be_a_release)
       break;
     say("It will be ready in",today+ONE_MONTH);
  }
  release(beta_version)
  while (everyone_is_dumb_enough_to_buy_our_bugware)
  {
    bills_bank_account += 150*megabucks;
    release(new_and_even_better_beta_version);
    introduce(more_memory_requirements);
    if (customers_report_installation_problems)
    {
      say("that is a hardware problem, not a software problem");
      if (smart_customer_says_but_you_promised_plug_and_play)
      {
        ignore(customer);
        order(microsoft_intelligence_agency, "Keep an eye on this
                                              bastard");
      }
    }
    if ( bills_bank_account>skyhigh && marriage>two_years )
    {
      divorce(woman_that_was_beatifull_when_I_married_her);
      wave(dollars, at_lusty_chicks);
      marry(young_blond_virgin_with_big_boobies);
      devirginize(young_blond_virgin_with_big_boobies);
      if (boobies_start_to_hang)
        dump(young_blond_virgin_with_big_boobies);
    }
    if (there_is_another_company)
    {
      steal(their_ideas);
      accuse(compagny, stealing_our_ideas);
      hire(a_lot_of_lawyers); /* in process.h */
      wait(until_other_company_cannot_afford_another_lawsuit);
      buy_out(other_company);
    }
  }
  /* Now everyone realizes that we sell bugware and they are all angry at
     us */
  order(plastic_surgeon, make_bill_look_like_poor_bastard);
  buy(nice_little_island); hire(harem);
  laugh_at(everyone,
for_having_the_patience_year_after_year_for_another_unfinished_version);
}

void bugfix(void)
{
  charge (a_lot_of_money)
  if (customer_says_he_does_not_want_to_pay_for_bugfix)
    say("It is not a bugfix but a new version");
  if (still_complaints)
  {
    ignore(customer);
    register(customer, big_Bill_book);
    /* We'll get him when everyone uses Billware!!*/
  }
}


Breite eines Bereichs mit präformatiertem Text - pre, width

MIDI-Dateien

YBREEZE  MID        17.845  15.06.97   6:01 ybreeze.mid
YGLADTR  MID        34.552  15.06.97   6:01 ygladtr.mid
YHASTE   MID        27.834  15.06.97   6:01 yhaste.mid
YRAG     MID        18.540  15.06.97   6:01 yrag.mid
YRITMO   MID        29.056  15.06.97   6:01 yritmo.mid
         5 Datei(en)               127.827 Bytes


Raumschaffer (Netscape) - spacer

Wer nichts wagt, kann nichts verlieren.

Wer sich nicht sicher ist, kann sich nicht irren.


Allgemeines Inline-Element - span

A B C


Aufzählungslisten definieren - ul, li

Liste wichtiger Reime

  • Probieren geht über Studieren
  • Liebe geht über Triebe
  • Tante fällt über Kante


Eigenschaften von Listen - type, start, value, compact

Listen mit HTML-Attributen

Aufzählungsliste

  • Probieren geht über Studieren
  • Liebe geht über Triebe
  • Tante fällt über Kante

Nummerierte Liste, römisch

  10. bei Anette vorbeischauen (Wert 10)
  11. bei Bianca vorbeischauen
  12. bei Christine vorbeischauen

Nummerierte Liste mit Startwert 7

  7. bei Anette vorbeischauen
  8. bei Bianca vorbeischauen
  9. bei Christine vorbeischauen

Definitionsliste

AA
Auto Answer (Modem)
AAE
Allgemeine Anschalte-Erlaubnis
AARP
Appletalk Address Resolution Protocol


Verschachtelte Listen - ul, li

Dies und das im Web

  • Suchmaschinen
    • Google
    • AltaVista
    • Fireball
  • Verzeichnisse
    • Yahoo
    • Web.de
    • Dino-Online
  • Was anderes
  • Noch was anderes


Zeilenumbruch erlauben - &shy; - wbr - &#8203;

Langes Wort mit bedingtem Umbruch

Bedingte Trennung mit &shy;

Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze

Bedingte Trennung mit <wbr>

Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze Donaudampfschiffahrtskapitänsmütze

Bedingte Trennung mit &#8203;

Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze Donaudampfschiffahrts​kapitänsmütze


Noscript-Bereiche definieren - noscript

Aktuelle Nachrichten ...


Script-Bereiche definieren - script, type, text/javascript

Aktuelle Nachrichten ...


Stylesheet-Bereiche definieren - style, type, text/css

CSS

Cascading Stylesheets


Beispiele für Verweise - a

Eine kleine Verweissammlung

ARD Tagesschau Nachrichten
Heise Newsticker Computer-Nachrichten
Yahoo Nachrichtenticker Nachrichten
OneWorld News Nachrichten (en)

Wohin der wohl führen mag?
Und der hier?


Tastaturkürzel für Verweise - accesskey

Greifen Sie in die Tasten!

SELFHTML [Alt]+[s]
Polylog [Alt]+[p]
Human Rights Watch [Alt]+[h]


Verweise auf beliebige Dateien

Stuff

buch.url
Eine Favoritendatei, wie der Internet Explorer sie anlegt

fritz.vcf
Eine Visitenkartendatei (Adressenaustauschformat)

einsundeins.xls
Eine Excel-Datei


Verweise gestalten mit CSS

Eine kleine Verweissammlung

ARD Tagesschau Nachrichten
Heise Newsticker Computer-Nachrichten
Yahoo Nachrichtenticker Nachrichten
OneWorld News Nachrichten (en)

Wohin der wohl führen mag?
Und der hier?


Download-Verweise

Download-Ecke

WaveText
Ein Java-Applet für Textanimationen (wavetext.zip, 2.106 Bytes)


Beispiele für projekt-externe Verweise

Besuchen Sie doch mal...

das SELFspezial-Gästebuch
den Babelfish
den FTP-Server der Universität Erlangen
die ganze Welt auf einem Gopher-Server
die öffentliche Telnet-Anwendung der Library of Congress
die deutschsprachige Newsgroup für HTML/CSS


E-Mail-Verweise definieren - mailto

Impressum

Verantwortlich für den Inhalt dieser Seiten ist:
Fritz Eierschale, fritz.eierschale@example.org


Optionen bei E-Mail-Verweisen - cc, bcc, subject, body, Adressierungsschema

Tolle E-Mails

Mail an einen Hauptempfänger und einen sichtbaren Kopienempfänger:
Mail mit Kopie

Mail an einen Hauptempfänger und einen unsichtbaren Kopienempfänger:
Mail mit Geheimkopie

Mail mit vordefiniertem Subject (Betreff):
Mail mit Betreff

Mail mit vordefiniertem Body (Nachrichtentext):
Mail mit Body

Mail mit kombinierten Optionen:
cc und Subject

Mail an zwei Hauptempfänger:
Mail an zwei

Mail mit vollständigem Adressierungsschema:
Mail mit Adressierungsschema


Tabulator-Reihenfolge für Verweise - tabindex

Steppen Sie mal mit [Tab] durch

Movie Database
Blues Lyrics
Meine Stadt
Paperball


Verweise mit MIME-Typ-Angabe - type

Stuff mit Typ

einsundeins.xls
Eine Excel-Datei


Sprache und Zeichenkodierung des Verweisziels angeben

Aus der weiten Welt

Asharq Al-Awsat
Saudi-Arabische Zeitung in arabischer Sprache


Anker definieren und Verweise zu Ankern

Lange Seite

Kapitel 1

Kapitel 2

Seitenanfang, Kapitel 2 oder Anker definieren und Verweise zu Ankern


Logische Beziehung zum Verweisziel angeben - link, rel, rev

Viel Information

Inhalt | weiter | zurück | zum Kapitelanfang

Hoffentlich nicht zu viel ...


Zielfenster für Verweise bestimmen - target

SELFHTML aktuell

immer wieder neu: SELFHTML aktuell


Relative Verweise zu Dateien oder Quellen im Projekt

Homepage

Dies ist eine ganz einfache Homepage mit einem Verweis zu einer anderen Seite des Projekts. Eine aufwendigere Homepage mit projektinternen Verweisen können Sie aber ebenfalls aufrufen.


Relative Verweise zu Dateien oder Quellen im Projekt

Homepage

Zweite Seite

Ja, hurra, geschafft!


Wenn HTML zu XHTML wird

Dann müssen alle Elemente mit Inhalt ein End-Tag haben.

Leere Elemente
müssen einen Schrägstrich am Ende haben.

Leere Attribute erhalten ihren eigenen Namen als Wert zugewiesen.

Verweise zu Ankern springen zum Zielelement aufgrund des id-Attributs, nicht das name-Attributs.


Aufenthaltsdauer auf Web-Seite anzeigen

viel Spaß im rechten Frame-Fenster!


Dynamische grafische Buttons

Fahren Sie mit der Maus über die Buttons. Sie dürfen auch draufdrücken ;-)


Test

 Fehler


Größenänderung überwachen

Text


Formulareingaben überprüfen

Formular

Name:
Wohnort:
E-Mail:
Alter:
Formular:

Zum Absenden muss eine Internet-Verbindung bestehen!


Monatskalender


Seitenanzeige in Frames verhindern

Keine Chance für Schaufenster-Anbieter!


Seitenanzeige in Frames verhindern

Testverweis

rechts eine Seite

Der Verweis oberhalb ist so notiert, dass er sein Verweisziel in das rechte Frame-Fenster lädt. Die Datei, auf die der Verweis führt, weiß dies jedoch zu verhindern...


Seitenanzeige in Frames verhindern

Ich bin ein böser Anbieter, der fremde Seiten ins eigene Frameset lädt


Persönliche Seitenbesuche zählen mit Cookies

Eine Seite, die etwas über Sie weiß...

Benutzen Sie doch mal die Reload-Funktion Ihres Browsers ...


Taschenrechner


ZweiFrames - Jack Nicholson

Jack Nicholson

geboren: 22.04.1937 Neptune, New Jersey (USA)
wichtige Filme: Einer flog über das Kuckucksnest, Wolfsmilch, Chinatown, Shining, Die Hexen von Eastwick.


ZweiFrames - Verweise

zurück | vor

Verweise

Willkommen
Susan Sarandon
Jack Nicholson


ZweiFrames - Susan Sarandon

Susan Sarandon

geboren: 04.10.1946 New York, New York, USA
wichtige Filme: Rocky Horror Picture Show, Die Hexen von Eastwick, Thelma & Louise, Lorenzos Öl.


ZweiFrames - Willkommen

Willkommen


ZweiFrames - Willkommen

Willkommen

Alle Verweise auf der linken Seite bewirken, dass hier auf der rechten Seite sowohl das obere als auch das untere Frame-Fenster gleichzeitig geändert werden!


SELFHTML: JavaScript / Objektreferenz / Hinweise zur JavaScript-Objektreferenz

SELFHTML

Hinweise zur JavaScript-Objektreferenz
Informationsseite

nach unten Objekthierarchie
nach unten Objektreferenz verwenden
nach unten Angaben zur Browserunterstützung

nach unten

Objekthierarchie

Es gibt zwei Gruppen von Seite vordefinierten Objekten im klassischen JavaScript.

Die eine Gruppe ist jene, die das Browser-Fenster - markiert durch das Seite window-Objekt - zum Ausgangspunkt hat. Das Browser-Fenster ist der allgemeine Rahmen für alles, was innerhalb davon angezeigt wird. Das, was innerhalb davon angezeigt wird, gilt als Dokument, markiert durch das Seite document-Objekt. Letzteres ist wiederum für das Document Object Model (DOM) das oberste Ausgangsobjekt. Und ausgehend vom document-Objekt gibt es leider zwei verschiedene "Objekt-Philosophien", die heute nebeneinanderstehen: Im klassischen JavaScript enthält ein Dokument nämlich bestimmte Elemente, auf die mit JavaScript zugegriffen werden kann, zum Beispiel Grafiken - markiert durch das Seite images-Objekt, oder Formulare - markiert durch das Seite forms-Objekt. Formulare wiederum bestehen aus Formularelementen - markiert durch das Seite elements-Objekt. Im neueren Modell des Internet Explorers und auch des DOM ist dagegen nicht nur der Zugriff auf solche bestimmten Elementtypen möglich, sondern der Zugriff auf alle Elemente eines Dokuments - nach Syntax des Internet Explorers markiert durch das Seite all-Objekt, und nach DOM-Syntax markiert durch bestimmte Zugriffsmethoden des document-Objekts, durch die Seite HTML-Elementobjekte und das Seite node-Objekt. Diese beiden widerstreitenden Modelle zwischen klassischem JavaScript und den neueren Modellen sorgen leider für viel Verwirrung. Die neueren Modelle sind zweifellos durchdachter und bieten dem JavaScript-Programmierer viel mehr Möglichkeiten. Doch die "Jugendsünden" von Netscapes klassischem JavaScript sind nun mal nicht so leicht aus der Welt zu schaffen, und so bestehen die Modelle auf unabsehbare Zeit weiter nebeneinander.

Die zweite Gruppe von JavaScript-Objekten sind jene, die nichts direkt mit dem Geschehen im Anzeigefenster zu tun haben, aber wichtige andere Daten liefern oder Funktionen ausüben. Netscape bezeichnet sie als core objects (Kernobjekte). Typische Vertreter dieser zweiten Gruppe sind etwa das Seite Date-Objekt für Datums- und Uhrzeitberechnungen, das Seite navigator-Objekt für Informationen zum verwendeten Browser, oder das Seite Array-Objekt zum Erzeugen von Serienvariablen. Auch bei dieser Gruppe gibt es ein paar hierarchische Beziehungen. So ist beispielsweise das Seite plugins-Objekt ein Unterobjekt des navigator-Objekts.

Objekthierarchien werden in JavaScript stets dadurch ausgedrückt, dass die Objekte aneinandergereiht und durch Punkt getrennt werden. Typisch sind Notationen sehen so aus wie window.document.images.length. Dabei steht window für das Browser-Fenster, in dem das JavaScript läuft, document für das in diesem Fenster angezeigte Dokument, images für die Gesamtheit der in dem Dokument enthaltenen Grafikreferenzen, und length für eine Eigenschaft des images-Objekts.

Abgesehen von dieser einfachen Grundregel haben viele Objekte jedoch ihre Besonderheiten. Bei den Beschreibungen zu den jeweiligen Objekten wird darauf hingewiesen.

Objektreferenz verwenden

Jedes JavaScript-Objekt wird in dieser Referenz nach folgendem Schema beschrieben:

Allgemeines zur Verwendung

In diesem Abschnitt wird beschrieben, welche Voraussetzungen erfüllt sein müssen, damit Sie die Eigenschaften und Methoden des Objekts benutzen können. Lesen Sie diesen Abschnitt genau, wenn Sie mit dem Objekt noch nie gearbeitet haben.

Eigenschaften

In diesem Abschnitt werden die Seite Eigenschaften eines Objekts beschrieben. Eine Eigenschaft eines JavaScript-Objekts ist zum Beispiel window.location.href - den URI der aktuell angezeigten HTML-Datei. Die Werte von solchen Objekteigenschaften können Sie in jedem Fall auslesen. In vielen Fällen können Sie die Werte auch ändern. In der Objektreferenz wird jeweils angegeben, ob Sie eine gespeicherte Objekteigenschaft nur auslesen oder auch ändern können. Dazu werden in dieser Objektreferenz folgende Signalisierungen benutzt:

Symbol | Bedeutung
Lesen | Sie können den Wert der Eigenschaft auslesen, aber nicht ändern. Sie können den Wert zum Beispiel in einer selbst definierten Seite Variablen speichern. So können Sie beispielsweise den URI der angezeigten HTML-Datei durch var Adresse = window.location.href in einer Variablen namens Adresse speichern. Das heißt, Sie weisen einer Variablen den Wert der Objekteigenschaft zu. Die Variable können Sie nach Belieben weiterverarbeiten.
Lesen/Ändern | Sie können die Objekteigenschaft auslesen, ihr aber auch selbst einen neuen Wert zuweisen. So können Sie zum Beispiel den URI der angezeigten HTML-Datei durch window.location.href = "http://de.selfhtml.org/" ändern. Das heißt, Sie weisen der Objekteigenschaft einen Wert zu. Im Beispiel hat das zur Folge, dass der Web-Browser einen Sprung zu dem angegebenen URI ausführt.

Methoden

Seite Methoden eines Objekts sind objektgebundene Funktionen, die eine Aktion ausführen. So können Sie zum Beispiel mit document.write("<b>Ihr Web-Browser: <\/b>" + navigator.userAgent) dynamisch erzeugten, HTML-formatierten Text in das aktuelle Anzeigefenster des Web-Browsers schreiben. Im Beispiel wird auf diese Weise der vom Anwender verwendete Web-Browser-Typ ins Anzeigefenster geschrieben.

Angaben zur Browserunterstützung

Zu jedem Objekt, jeder Eigenschaft und Methode finden sich Angaben dazu, welche Web-Browser das beschriebene Objekt kennen und korrekt unterstützen. Diese Angaben stehen als Seite Symbole neben der jeweiligen Abschnittsüberschrift. Die Nennung eines Symbol bedeutet, dass der mit dem Symbol bezeichnete Browser das JavaScript-Feature mindestens ab der genannte Version unterstützt.

Die Tests der Browser-Unterstützung erfolgen in der Regel mit dem angegebenen Beispiel-Dokument. Es ist möglich, dass das fragliche Feature in anderen Fällen anders unterstützt wird, als durch die Symbole angegeben wird. Vor allem in der Seite Referenz zu den HTML-Elementobjekten werden verschiedene Eigenschaften und Methoden in einem Abschnitt aufgelistet. Die Beispiele demonstrieren jeweils nur eine wichtige Eigenschaft oder Methode eines HTML-Elementobjekts. Die Browser-Symbole beziehen sich jeweils auf dieses Beispiel und sagen zumeist nichts darüber aus, wie die übrigen Eigenschaften und Methoden des Elementobjekts unterstützt werden.

Vor gewissen alten Browser-Versionen wurde nicht getestet. Die ältesten Versionen, mit denen getestet wurde, können Sie der Symbol-Legende entnehmen. Vereinzelt gibt es jedoch Abweichungen davon. Inbesondere konnten nicht alle Features mit Apples Safari 1.0 getestet werden. An diesen Stellen befindet sich zumindest ein Symbol, welches die Unterstützung ab Safari 1.3 anzeigt. Diese Angaben werden in zukünftigen SELFHTML-Versionen korrigiert werden.

Über die Symbole hinaus finden Sie an vielen Stellen Hinweise zur Browserunterstützung im Abschnitt "Beachten Sie".

Verschiedene JavaScript-Methoden und -Eigenschaften ermöglichen Änderungen am Browserfenster des Anwenders, das selbstständige Öffnen neuer Fenster oder ähnliche ärgerliche Manipulationen, die dem Anwender in vielen Fällen unerwünscht sind. Prominente Beispiele sind Seite window.open() und Seite window.status. Aufgrund des umfassenden Missbrauchs dieser JavaScript-Techniken im Web besitzen moderne Browser in ihren Einstellungen die Möglichkeit, die Verwendung dieser Objekte auf Web-Seiten einzuschränken. Sie sollten diese Techniken nur mit Bedacht einsetzen, denn Sie müssen damit rechnen, dass moderne Browser den Zugriff auf manche Objekte völlig sperren oder ihre Benutzung wirkungslos bleibt. Selbst wenn der Browser den Zugriff erlaubt, sollten Sie sich fragen, ob Sie den Anwender z.B. mit dem Öffnen von neuen Fenstern letztlich nur abschrecken.

nach oben
weiter | Seite window
zurück | Seite Event-Handler
Teil von SELFHTML/Navigationshilfen Teil von JavaScript/DOM Teil von Objektreferenz

© 2007 Seite Impressum


Test

eine Überschrift

Aendern


Test

Ein Element mit Text

Mach P zu H


Test

Text


Test

 Verweis 1
Verweis 2


Test

Ein Text

Test


Test

Text

Anderer Text


Test

Ein Absatz

Ein anderer Absatz

Noch ein Absatz

Nummerieren


Test

HTML

Ergänzen


Test

mi chiamo Stefan


Test

Ein Absatz

Noch ein Absatz


Test

Hier etwas Text


Test

 Verweis


Test

Text mit fetter Schrift


Test

 Editieren?


Test

Etwas Text mit
Zeilenumbruch

HTML-Element, aber das wie vielte?

Test


Test

Anfang

Am Anfang war, naja, seien wir ehrlich, wir wissen es nicht.

Weisheit

Wem das Wasser bis zum Halse steht, der darf den Kopf nicht haengen lassen.

Ende


Test

Meine Wahl

Ich liebe mir den heiteren Mann
Am meisten unter meinen Gästen:
Wer sich nicht selbst zum besten haben kann,
der ist gewiss nicht von den Besten.

Der Ankername


Test

Steuer

Der Mensch im gesellschaftlichen Leben kann sein Gut nicht genießen, ohne es mit dem Staat zu teilen.

Einsicht

Das Werk eines Philosophen ist viel leichter zu verbrennen, als - zu widerlegen.

Ende

mittlerer Ankertext


Test

 ein Anker

Position von links


Test

 ein Anker

Position von oben


Test

 Zahl entfernen


Test

 auf Layer checken


Test

Bitte hier klicken.


focus


frames.length


JavaScripts in anderen Frames


target


pageXOffset


Test

 Wie lange noch?


Test

Klicken Sie auf diesen Verweis: millisekundenSetzen()


Test

 anderer Monat


Test

 Uhrzeit


Test

Platzhaltertext


Test

 Fenster schließen


Test

Datei 2


Test

 Verweisfarbe


Test

Hintergrund ändern


Test

ä ö ü iso-8859-5


Test

Eine sehr dynamische Seite


Test

Ein kleiner Text

Textfarbe ändern


Test

Wo gehöre ich eigentlich hin?

links?
zentriert?
rechts?


Test

Salami
Pilze
Oliven


Test

Dynamisch, sehr dynamisch

Ein erster Absatz

Ein zweiter Absatz

Ein dritter Absatz

neue Texte


Test

 viel Text zum Selektieren viel Text zum Selektieren


Test

Verweis

Verweisfarbe ändern


Test

besuchter Verweis

Farbe ändern


Test

mit Frames ohne Frames


Test

In welchem Jahr starb Goethe?


Test

Prima, es stimmt.


Test

Leider falsch!

Erneut versuchen


Test

mit DHTML ohne DHTML


Test

URI:


Test

Besitzen Sie ein Auto?

ja
nein

Falls ja, was für ein Auto?

Kleinwagen
Kombi
Limousine
Sportwagen
Kleinbus
andere Art


Test

Kopieren Sie den folgenden Code in die Adresszeile Ihres Browsers:


Test

Porsche
Mercedes
Name:


Test

Name:


Test

hspace anzeigen!


Test

 Starten


Test

Stoppen


Test

 Eine Multimedia-Element

Vertikalen Abstand anzeigen!


Test

Klicken Sie auf das Dokument


Test

Klicken Sie irgendwo ins Dokument und der Springer bewegt sich zur Mausposition.


Test

Bitte drücken Sie irgendwelche Tasten!


Test

Karte von Südwestdeutschland


Test

Ein Layer

Klicken Sie irgendwo ins Dokument und der Layer folgt der Maus dorthin.


Test

Klicken Sie irgendwo ins Dokument, um die Position auszugeben.


Test

Drücken Sie eine Taste oder klicken Sie irgendwo ins Dokument.


Test

Klicken Sie irgendwo ins Dokument.


Test

Klick mich


Test

Formular leeren


Test

Frame 1


Test

Frame 2


Test

Frame 3


Test

Hier wird einfach nur 10 mal pro Sekunde die Variable c erhöht!


Frameset

Datei News


Test

 Wer ruft Test()?


Test

Meine kleine Homepage


Test

SELFHTML

anderer Link!


Test

Das ist eine Abk.


Test

Das ist ein Acr.


Test

Dies alles ist von
der SELFHTML-Redaktion


Test

 testtext


Test

 Koordinaten


Test

wichtige Aussage!

unwichtig machen!


Test

 News
Links in neues Fenster laden


Test

Text
Text
Text
Text
Text
Text
Text

Text
Text
Text
Text
Text
Text
Text

nicht nur rot, sondern auch gross


Test

 ABCDEFGHIJKLMNOPQRSTUVWXYZ
umkehren!


Test

gross und stark!


Test

Das W3-Konsortium schreibt über das DOM:

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents.


Test

Ein dynamisches Dokument

Ein Link zu den News
Textfarbe:
Linkfarbe:
Linkfarbe (besucht):
Hintergrundfarbe:
Einstellungen:


Test

 Dieser Text fliesst um das Logo herum, weil dies im align-Attribut des Logos so angegeben ist.
Gilt das auch bei diesem Text?


Test

Spielstand:
Hans Moosreiner: | 5 Punkte
Lisa Wohlthu: | 3 Punkte


Test

Das ist zentriert

Das ist zentriert

Das ist zentriert


Test

 Die Krähen behaupten, eine einzige Krähe könne den Himmel zerstören. Das ist zweifellos, beweist aber nichts gegen den Himmel, denn Himmel bedeutet eben: Unmöglichkeit von Krähen.


Test

$Text =~ s/[a-z]| //gi;


Test

1. Zeile, 1. Spalte 1. Zeile, 2. Spalte 1. Zeile, 3. Spalte
Spalten gleich breit machen!


Test

Hansi
Willi
Manni
ausrichten!


Test

*.bmp
Bitmap-Grafiken
*.html
Web-Seiten-Dateien
*.css
Style-Dateien für Web-Seiten
Titel


Test

die aktuelle HTML-Version ist 2.0


Test

Ein Uhu ist ein Vogel und kein Kleber


Test

  • Eigene Dateien
  • Programme
  • Windows
  • temp
    •


Test

Erster Bereich

mit etwas Text

Zweiter Bereich

mit etwas Text

Dritter Bereich

mit etwas Text

ausrichten!


Test

User's Guide
Benutzerhandbuch
User Instructions
Bedienungsanleitung


Test

Das ist Text, der sich vor Herzschmerz kaum retten kann.


Test

Absender
Vorname:
Zuname:


Test

So viel verspielter Text, o Sophie!
So viel verspielter Text, o Sophie!
So viel verspielter Text, o Sophie!
So viel verspielter Text, o Sophie!
So viel verspielter Text, o Sophie!
So viel verspielter Text, o Sophie!
So viel verspielter Text, o Sophie!


Test

Kapitel 1

viel Text

Kapitel 2

viel Text

Kapitel 3

und ein Ausrichtungsverweis


Test

 schiefe Aussage!
gerade machen!


Test

Anzeigefenster erweitern


Test

 Bild 1
neues Bild


Test

Geben Sie Text ein:


Test

Text mit weiterem Text


Test

 Taste drücken:


Test

Absender
Mitteilung


Test

  1. Ein ungerader Listenpunkt
  2. Ein gerader Listenpunkt
  3. Ein ungerader Listenpunkt
  4. Ein gerader Listenpunkt
  5. Ein ungerader Listenpunkt
  6. Ein gerader Listenpunkt
  7. Ein ungerader Listenpunkt
  8. Ein gerader Listenpunkt
gerade Listenpunkte hinterlegen!


Test

Dies und das

anderes Stylesheet!


Test

  • Datei
  • Bearbeiten
  • Ansicht
  • Format
    •


Test

Liste der Meta-Tags anzeigen


Test

Ihr Browser kann keine Frames anzeigen!

weitere Infos


Test

mehr sehen!


Test

  1. eins
  2. zwei
  3. drei
  4. vier
  5. fünf
römisch
normal


Test

Der erste

Der zweite

Der dritte


Test

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Breite auf 15 setzen


Test

Wie sagte Goethe doch? Habe nun, ach! Philosophie, / Juristerei und Medizin, / Und leider auch Theologie / Durchaus studiert, mit heißem Bemühn. / Da steh' ich nun, ich armer Tor, / Und bin so klug als wie zuvor!


Test

Es tut so gut ein Schwein zu sein

deutlicher!


Test

Ich sage zum Beispiel immer zum Beispiel


Test

 englisches Hallo-Welt
deutsches Hallo-Welt


Test

Eintrag:


Test

 winzigweich!


Test

 Das individuelle Format


Test

 Benutzen Sie dieses Element!


Test

ganz stark!


Test

Mit CSS!

ohne CSS!


Test

 Tief und tiefer


Test

 x y


Test

Rahmen Hintergrund
Eine Tabelle


Test

Name | Alter
Hans | 18
Flora | 17
rechts ausrichten


Test

Hans | 18
Flora | 17


Test

Text:


Test

Hans | 18
Flora | 17
Angaben ohne Gewähr!


Test

Name | Alter
Hans | 18
Flora | 17


Ein ganz besonderer Tag


Test

Zelle


Test

 Was bin ich?


Ein ganz besonderer Tag

 das ist der Text


Test

  • ein Punkt
  • und noch ein Punkt
Disc-Symbol Square-Symbol


Test

io senza te


Test

 Datei: dateiname.html
genauer:


Test

 Berthold
Boris
Bernd
Grafiken checken


Test

 Fränzschen und Franz


Test

Boris
Bild auswechseln


Test

 Inhalt des gelben Layers Inhalt des lila Layers Wer liegt über dem gelben Layer?
Und wo beginnt er?


Test

 Inhalt des Layers Anderer Hintergrund


Test

 Inhalt des gelben Layers Inhalt des lila Layers Wer liegt unter dem lila Layer?
Und wo beginnt er?


Test

 Inhalt des Layers Kleiner
Groesser


Test

 Diesen Verweis ueberschreiben


Test

 Links-Wert?


Test

 News laden


Test

 Gelber Layer
nach vorne Lila Layer
nach vorne


Test

 Gelber Layer
nach hinten Lila Layer
nach hinten


Test

Springe um Pixel horizontal
Springe um Pixel vertikal


Test

links oben neu: (von links)
links oben neu: (von oben)


Test

 Wie heisse ich denn?


Test

 Nach links mit diesem Layer


Test

 Nach oben mit diesem Layer


Test

 Super-Name?


Test

 Kleiner
Groesser


Test

neue Breite
neue Hoehe


Test

 Layer-Inhalt L1 Layer-Inhalt L2 Layer-Inhalt L3 Layer-Inhalt L4 L1 siblingAbove
L2 siblingAbove
L3 siblingAbove
L4 siblingAbove


Test

 L2 siblingBelow
L3 siblingBelow
L4 siblingBelow
L5 siblingBelow
 Layer-Inhalt L2 Layer-Inhalt L3 Layer-Inhalt L4 Layer-Inhalt L5


Test

 Oben-Wert?


Test

 anderer Layer ein/aus anderer Layer ein/aus


Test

 z-index?


Test

 Yahoo
Lycos


Test

 SELFHTML


Test

 Yahoo
Google
SELFHTML


Test

 Hier ein Text und dann ein Verweis


Test

Gehe zu a2. Bitte zuerst klicken

Hier a2 - bitte dann klicken


Test

 Wunschverweis


Test

 Reload


Test

 Folgende Plugins sind installiert:


Test

 Folgende MIME-Typen sind dem Browser bekannt:


Test

 Diese Daten sendet Ihr Browser, wenn er Dateien im WWW anfordert:


news


Test

Knoten in der Baumstruktur


Test

  1. Element


Test

Ich bin ja so un

un - was?


Test

Text mit fettem Text und unterstrichenem Text


Test

  • erster Punkt
  • zweiter Punkt
  • erster Punkt
  • zweiter Punkt


Test

 Dolly


Test

 Das ist Text, der einfach so im Dokument steht.


Test

Die Beredtsamkeit an sich ist die Tugend des Redens und die Lust des Schweigens an seinem Gegenteil. Die Beredtsamkeit ist also ... och nee, besser nicht!


Test

  • erster Punkt
  • zweiter Punkt


Test

 Hintergrundfarbe?
Textfarbe?
Linkfarbe noch nicht besuchte Seiten?
Linkfarbe besuchte Seiten?
Linkfarbe aktivierte Links?


Test

Rot und Groß!

ein Absatz

und noch einer

und einer mit einem Link zum Anpassen


Test

Erster Bereich

erster Absatz

zweiter Absatz

Zweiter Bereich

dritter Absatz

vierter Absatz

Dritter Bereich

erster Absatz

zweiter Absatz


Test

mit Inhalt

mit Inhalt


Test

Text und mit kursivem Text


Test

Text mit kursivem Text


Test

2001 = oder zweitausendeins

sag es in italienisch!


Test

ein kleiner Text


Test

Hier steht ein Text


Test

  • ein Punkt
  • ein zweiter


Test

Weg mit der Ausrichtung!


Test

  1. Element 1
  2. Element 2
  3. Element 3

Lösche das erste Element


Test

Darf ich? keine Ahnung!

andere Antwort!


Test

Hintergrundfarbe:
Textfarbe:
Werte:


Test

Element ohne Eigenschaften?


Test

 Folgende Plugin-Dateien sind auf dem Rechner:


Test

Ihre Bildschirmauflösung ist 768 Pixel hoch oder höher!


Test

Ihre Bildschirmauflösung ist in der Höhe schmaler als 768 Pixel!


Test

Ihre Bildschirmauflösung ist 1024 Pixel breit oder breiter!


Test

Ihre Bildschirmauflösung ist in der Breite schmaler als 1024 Pixel!


Test

Das ist der Text

gelb


Test

Absatz

zweiter Absatz

dritter Absatz

Stylesheet-Power!


Test

 Unsere Erfolge


Test

 Fenster nach vorne
Fenster nach hinten


Test

 Drücken Sie irgendwelche Tasten!


Test

 Fenster zu?


Test

Danke, dass Sie diese Seite sehen möchten.


Test

Achten Sie auf die Statuszeile.


Test

Geben Sie einen Suchbegriff ein:


Test

 Neue Seite


Test

 Nach hause


Test

Fenster öffnen


Test

 Diese Seite editieren


Test

 Fenster bewegen


Test

 Name des Fensters


Test

Link mit Fenster


Test

 nach links


Test

 Y-Position


Test

 Persönlichkeitstest


Test

 Diese Seite drucken


Test

 Hier geht's zur Abfrage.


Test

 Druecken Sie 3 mal irgendwelche Tasten!


Test

 Mach kleiner


Test

nach oben scrollen


Test

 Kleiner Scroll-Test


Test

Nettobetrag:
Prozentsatz:

Kommabetrag mit Punkt eingeben!

Ergebnis:


Test

Die Seite, die Sie genau erkennt


Test

 wollen Sie eine Frage beantworten?


Test

Hallo Traumtänzer!

Diese Art von Passwortschutz ist allerdings nicht besonders ernst zu nehmen. Sie wollen wissen, wie man wirklich Web-Seiten mit Passwörtern schützen kann? Zuverlässiger Passwortschutz ist nur server-seitig lösbar. Die im Web übliche Technik dafür ist die so genannte .htaccess-Datei.

In SELFHTML wird ein solcher Passwortschutz auf der Seite Seite .htaccess - Server-Reaktionen kontrollieren beschrieben.
Im Online-Angebot von SELFHTML aktuell finden Sie zudem folgende Artikel:
Online-Seite htaccess-FAQ
Online-Seite htaccess Zugriffskontrolle

Fragen Sie gegebenenfalls Ihren Provider, ob er Verzeichnisschutz via htaccess anbietet!


 Geh hin wo Du herkommst


Geh wo hin!
(dies ist nötig, damit in diesem Fenster eine History im Browser erzeugt wird)


Test

Das eigene Farb-Objekt mit JavaScript

Hintergrundfarbe wechseln


Test

 Letzter Update


Test

 SELFHTML
JavaScript
Sprachelemente


Test

Objekt-Abfrage


Test

Name:
Geben Sie irgendetwas ein und klicken Sie dann woanders hin, um das Eingabefeld zu verlassen!


Test

Wert:


Test

Kurzbeschreibung Ihrer Homepage (max 50 Zeichen):


Test

Seite mit "Fernbedienung"


Test

Klicken Sie auf den Button und lassen Sie die Maustaste einige Zeit heruntergedrückt, um den Event-Handler in Aktion zu sehen:


Test

Hier ein kleiner Text


Test

 News


Test

Ich bin dynamisch


Test

Name:

Idee:


Test

Feld 1:
Feld 2:
Feld 3:


Test

Einen langen Aufenthalt auf dieser Seite!

Und dann aber nix wie weg!


Test

Hier kommen Sie nur mit Passwort rein ;-)


Test

Geben Sie eine Zahl ein. Es wird geprüft, ob es sich um eine Primzahl handelt.


JavaScript-Beispiel


Test

Geben Sie eine Rechenaufgabe (z.B. 8*5) ein:


Test

Der Sinn des Lebens

Was ist der Sinn des Lebens?


Sinn des Lebens zum Quadrat


SELFHTML: Fertige Layouts

SELFHTML

Fertige Layouts
Kapitelseite

Dieser Abschnitt richtet sich an alle, die beim Erstellen einer eigenen Homepage lieber auf einem vorhandenen Layout aufsetzen und dieses nach ihrem Willen verändern, erweitern und ausgestalten wollen. Es werden verschiedene typische, aber individuelle Layouts für Web-Seiten vorgestellt. Die vorgestellten Layouts können Sie für eigene Web-Seiten als Vorlage und veränderbares Rohmaterial frei verwenden. Zu jedem Layout wird kurz beschrieben, welche Besonderheiten dabei zum Einsatz kommen, und welche Dateien dazugehören. Alle Layouts stammen von namhaften Web-Designern. Die Layouts benutzen HTML 4.0 und Stylesheets 1.0. Mit Browsern ab der 4er-Generation sollte es keine Probleme geben bei der Anzeige. Deutlich ältere Browser wie Netscape 3.x können einige Layouts wegen der fehlenden Unterstützung von CSS nicht richtig oder unschön darstellen.

Layout Nummer 1 | Layout Nummer 2 | Layout Nummer 3
Seite Layout Nummer 1 | Seite Layout Nummer 2 | Seite Layout Nummer 3
Layout Nummer 4 | Layout Nummer 5 | Layout Nummer 6
Seite Layout Nummer 4 | Seite Layout Nummer 5 | Seite Layout Nummer 6
Layout Nummer 7 | Layout Nummer 8 | Layout Nummer 9
Seite Layout Nummer 7 | Seite Layout Nummer 8 | Seite Layout Nummer 9
Layout Nummer 10 |  |
Seite Layout Nummer 10 |  |
nach oben

© 2007 Seite Impressum


SELFHTML: Fertige Layouts / Layout Nummer 1

SELFHTML

Layout Nummer 1
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Burkhardt Becker ("becx")
E-Mail: | E-Mail bb@becx.de
WWW: | deutschsprachige Seite http://www.becx.de/

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 1

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (22 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr01/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Das Layout verwendet neben unsichtbaren HTML-Tabellen CSS zur Formatierung von Text. Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x, Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos darstellbar.

Zu dem Layout gehören folgende Projektdateien:

index.htm
HTML-Datei der Einstiegsseite. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML und Kapitel CSS. Besonders wichtig ist Wissen über Kapitel Tabellen in HTML.

thema1.htm
HTML-Datei für eine beliebige Unterseite, die von der Einstiegsseite aus verlinkt wird. Zum Bearbeiten gelten die gleichen Vorkenntnisse wie bei der index.htm.

styles.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung von Text, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

images (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Seite Techniken und Begriffen der Bildbearbeitung.

nach oben
weiter | Seite Layout Nummer 2
zurück | Seite Standard-Farbpaletten
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


Hier kommt der Titel der Seite hinein

T H E M E N Ü B E R S I C H T

THEMA 1
Kurze Inhaltsangabe des Themas. Kurze Inhaltsangabe des Themas.
Kurze Inhaltsangabe des Themas. Kurze Inhaltsangabe des Themas.
Kurze Inhaltsangabe des Themas. Kurze Inhaltsangabe des Themas.
Kurze Inhaltsangabe des Themas.

THEMA 2
Kurze Inhaltsangabe des Themas. Kurze Inhaltsangabe des Themas.
Kurze Inhaltsangabe des Themas. Kurze Inhaltsangabe des Themas.
Kurze Inhaltsangabe des Themas. Kurze Inhaltsangabe des Themas.
THEMA 3
Kurze Inhaltsangabe des Themas. Kurze Inhaltsangabe des Themas.
Kurze Inhaltsangabe des Themas. Kurze Inhaltsangabe des Themas.

Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein.

© 2001 by Ihr Name • beispiel@example.org


thema1.htm

T H E M A 1

Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein.
Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein.
Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier passt jede Menge Text hinein. Hier noch ein Link.
© 2001 by Ihr Name • beispiel@example.org


SELFHTML: Fertige Layouts / Layout Nummer 2

SELFHTML

Layout Nummer 2
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Verena und Ralph Segert
E-Mail: | E-Mail layouts@segert.net
WWW: | deutschsprachige Seite http://segert.net/

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 2

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (17 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr02/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Das Layout verwendet neben unsichtbaren HTML-Tabellen CSS zur Formatierung von Text. Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x, Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos darstellbar.

Zu dem Layout gehören folgende Projektdateien:

index.htm
HTML-Datei der Einstiegsseite. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML und Kapitel CSS. Besonders wichtig ist Wissen über Kapitel Tabellen in HTML.

beispielseite.htm
HTML-Datei für eine beliebige Seite der ersten untergeordneten Ebene, die von der Einstiegsseite aus verlinkt wird. Zum Bearbeiten gelten die gleichen Vorkenntnisse wie bei der index.htm.

beispielseite_sub.htm
HTML-Datei für eine beliebige Seite der zweiten untergeordneten Ebene.

kontakt.htm
HTML-Datei mit einer Seite vom Typ der ersten untergeordneten Ebene, die ein Feedback-Formular in passender Optik enthält.

styles.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung von Text, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

img (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Seite Techniken und Begriffen der Bildbearbeitung.

nach oben
weiter | Seite Layout Nummer 3
zurück | Seite Layout Nummer 1
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


HILFE: BEISPIELSEITE

thema n°1 . untermenü n°1 . untermenü n°2 . untermenü n°3

Beispielseite
Dies ist die Hauptseite zu Thema N°1. Hier könnten Texte zum gewählten Thema, eine Linkliste oder eine Fotogalerie präsentiert werden. Möchten Sie das Thema nochmals unterteilen, können über das Untermenü weitere Seiten angesteuert werden. Sollten Sie kein Untermenü benötigen, löschen Sie es einfach und lassen in der Zeile nur die Seitenbezeichnung stehen, so kann der Besucher sich besser orientieren.

Überschrift
Hier kann mehr Text stehen oder auch eine Grafik platziert werden. Damit das Layout nicht zerstört wird, darf die Grafik eine Breite von 250 Pixeln nicht überschreiten.

© 2001 . Name . email senden


HILFE: BEISPIEL UNTERSEITE

thema n°1 . untermenü n°1 . untermenü n°2 . untermenü n°3

Beispielseite Untermenü
Dies ist eine Unterseite zu Thema N°1. Falls Sie kein Untermenü benötigen, können Sie diese Seite einfach löschen. Nun folgt wieder nur Blindtext, das ist ein beliebiger Text, der als Platzhalter beim Layout dient und später durch Originaltext ersetzt wird. Dies ist nur Blindtext, also ein beliebiger Text, der als Platzhalter beim Layout dient und später durch Originaltext ersetzt wird.

Überschrift
Hier kann mehr Text stehen oder auch eine Grafik platziert werden. Damit das Layout nicht zerstört wird, darf die Grafik eine Breite von 250 Pixeln nicht überschreiten.

© 2001 . Name . email senden


Layout 2 . START

home . untermenü n°1 . untermenü n°2 . untermenü n°3

Überschrift 1
Herzlich Willkommen auf dieser Website. Der Platz auf der Startseite würde sich für News oder eine kurze Beschreibung der Menüpunkte anbieten, damit der Besucher sofort weiss, was ihn erwartet. Dies ist nur Blindtext, also ein beliebiger Text, der als Platzhalter beim Layout dient und später durch Originaltext ersetzt wird. Je mehr Text in den 2 Spalten dieser unsichtbaren Tabelle steht, desto länger wird sie.

Überschrift 2
Hier kann mehr Text stehen oder auch eine Grafik platziert werden. Damit das Layout nicht zerstört wird, darf die Grafik eine Breite von 250 Pixeln nicht überschreiten.

Überschrift 3
Hier kann mehr Text stehen oder auch eine Grafik platziert werden. Damit das Layout nicht zerstört wird, darf die Grafik eine Breite von 250 Pixeln nicht überschreiten.

© 2001 . Name . email senden


HILFE: KONTAKT

kontakt .
Name:

E-Mail:

Text:

© 2001 . Name


SELFHTML: Fertige Layouts / Layout Nummer 3

SELFHTML

Layout Nummer 3
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Burkhardt Becker ("becx")
E-Mail: | E-Mail bb@becx.de
WWW: | deutschsprachige Seite http://www.becx.de/

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 3

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (27 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr03/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Das Layout verwendet neben unsichtbaren HTML-Tabellen CSS zur Formatierung von Text. Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x, Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos darstellbar.

Zu dem Layout gehören folgende Projektdateien:

index.htm
HTML-Datei der Einstiegsseite. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML und Kapitel CSS. Besonders wichtig ist Wissen über Kapitel Tabellen in HTML.

thema1.htm
HTML-Datei für eine beliebige Unterseite, die von der Einstiegsseite aus verlinkt wird. Zum Bearbeiten gelten die gleichen Vorkenntnisse wie bei der index.htm.

styles.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung von Text, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

images (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Seite Techniken und Begriffen der Bildbearbeitung.

nach oben
weiter | Seite Layout Nummer 4
zurück | Seite Layout Nummer 2
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


Hier kommt der Titel der Seite hinein

T I T E L D E R H O M E P A G E ::

thema 1 :: thema 2 :: thema 3 :: thema 4 :: thema 5 ::
thema 6 :: thema 7 :: thema 8 :: thema 9 ::
thema 10 ::

impressum
feedback
guestbook

THEMENÜBERSICHT
Thema 1
Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema.
Thema 2
Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema.
Thema 3
Kurze Vorstellung der Inhalte zu diesem Thema.

© 2001 by Ihr Name • beispiel@example.org


Thema 1

T I T E L D E R H O M E P A G E ::

thema 1 :: thema 2 :: thema 3 :: thema 4 :: thema 5 ::
thema 6 :: thema 7 :: thema 8 :: thema 9 ::
thema 10 ::

impressum
feedback
guestbook

thema 1a :: thema 1b :: thema 1c ::

Thema 1a
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Link Link Link Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.

© 2001 by Ihr Name • beispiel@example.org


SELFHTML: Fertige Layouts / Layout Nummer 4

SELFHTML

Layout Nummer 4
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Verena und Ralph Segert
E-Mail: | E-Mail layouts@segert.net
WWW: | deutschsprachige Seite http://segert.net/

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 4

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (35 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr04/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Das Layout verwendet neben unsichtbaren HTML-Tabellen CSS zur Formatierung von Text und JavaScript für den Mouseover-Effekt bei den Pictogrammen der Menüpunkte. Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x, Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos darstellbar.

Zu dem Layout gehören folgende Projektdateien:

index.htm
HTML-Datei der Einstiegsseite. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML und Kapitel CSS. Besonders wichtig ist Wissen über Kapitel Tabellen in HTML. Beachten Sie die Kommentare im Quelltext der Datei. Dort finden Sie wichtige Anweisungen.

unterseite.htm
HTML-Datei für eine beliebige untergeordnete Seite, die von der Einstiegsseite aus verlinkt wird. Zum Bearbeiten gelten die gleichen Vorkenntnisse wie bei der index.htm.

images (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Seite Techniken und Begriffen der Bildbearbeitung. Besonders die Grafiken mit den Namen name1.gif bis name5.gif sowie projektname.gif müssen Sie selber bearbeiten, um eigene Texte für Menüpunkte und den Text des Projektnamens zu erstellen.

nach oben
weiter | Seite Layout Nummer 5
zurück | Seite Layout Nummer 3
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


Layout 4 von Segert Webpublishing

[Bildbeschreibung]

::: Querweb ·.°.·°.· Es lohnte ein Abstecher zum Linkweltmeister namens Schockwellenreiter. Dort entdeckten wir den Milchpudel, das virtuelle Wau Wau für alle desillusionierten e-Commercer. Nach dem Bellen empfehlen wir dotcomtod mit Bildzitat eines neuen Geschäftsmodells für HTML-Coder. Wer danach ein wenig Erholung braucht, kann sich das Märchen von der bombensicheren Navigation zu Gemüte führen, um dann endlich bei Hal Faber webfreche Gegenwart und Zukunft zu studieren. Ich hoffe nur, dass dieses zeitkritische Gehechel am Ende keinen Kreativinfarkt zur Folge hat. ;-)
::: Querweb ·.°.·°.· Es lohnte ein Abstecher zum Linkweltmeister namens Schockwellenreiter. Dort entdeckten wir den Milchpudel, das virtuelle Wau Wau für alle desillusionierten e-Commercer. Nach dem Bellen empfehlen wir dotcomtod mit Bildzitat eines neuen Geschäftsmodells für HTML-Coder. Wer danach ein wenig Erholung braucht, kann sich das Märchen von der bombensicheren Navigation zu Gemüte führen, um dann endlich bei Hal Faber webfreche Gegenwart und Zukunft zu studieren. Ich hoffe nur, dass dieses zeitkritische Gehechel am Ende keinen Kreativinfarkt zur Folge hat. ;-)


Unterseite von Layout 4

Layout 4 Startseite

::: Headline ·.°.·°.· Fließtext muss nicht immer Blindtext sein. Fließtext muss nicht immer Blindtext sein. Fließtext muss nicht immer Blindtext sein. Fließtext muss nicht immer Blindtext sein. Fließtext muss nicht immer Blindtext sein. Fließtext muss nicht immer Blindtext sein. Oder: Diese Spalte wartet auf Ihren Text oder ein Bild oder beides.


SELFHTML: Fertige Layouts / Layout Nummer 5

SELFHTML

Layout Nummer 5
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Burkhardt Becker ("becx")
E-Mail: | E-Mail bb@becx.de
WWW: | deutschsprachige Seite http://www.becx.de/

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 5

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (33 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr05/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Das Layout verwendet neben unsichtbaren HTML-Tabellen CSS zur Formatierung von Text. Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x, Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos darstellbar.

Zu dem Layout gehören folgende Projektdateien:

index.htm
HTML-Datei der vorgeschalteten Einstiegsseite. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML und Kapitel CSS. Besonders wichtig ist Wissen über Kapitel Tabellen in HTML.

zentrum.htm
HTML-Datei für die eigentliche Einstiegsseite mit den Verweisen zu den Unterseiten. Zum Bearbeiten gelten die gleichen Vorkenntnisse wie bei der index.htm.

thema1.htm
HTML-Datei für eine beliebige Unterseite, die von zentrum.htm aus verlinkt wird.

styles.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung von Text, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

images (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Seite Techniken und Begriffen der Bildbearbeitung. Vor allem die Dateien ani_titel.gif und die bg_pagetitel.gif werden Sie anpassen oder durch eigene Grafiken ersetzen müssen, die das eigene Projekt benennen.

nach oben
weiter | Seite Layout Nummer 6
zurück | Seite Layout Nummer 4
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


Hier kommt der Titel der Seite hinein

© becx


THEMA 1
Thema 1a
Thema 1b
Thema 1c
Thema 1d
Thema 1e

THEMA 1a
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.

© 2001 by Ihr Name • beispiel@example.org


zentrum

N . E . W . S
Das ist neu hier. Text Link Text Text Text Text Te
Das ist neu hier. Text Text Text Text Text Link Te
Das ist neu hier. Link Text Text Text Text Text Te
Das ist neu hier. Text Text Text Text Text Text Li

THEMENÜBERSICHT
Thema 1
Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema.
Thema 2
Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema.
Thema 3
Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema.

Illustrationen
© becx

© 2001 by Ihr Name • beispiel@example.org


SELFHTML: Fertige Layouts / Layout Nummer 6

SELFHTML

Layout Nummer 6
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Burkhardt Becker ("becx")
E-Mail: | E-Mail bb@becx.de
WWW: | deutschsprachige Seite http://www.becx.de/

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 6

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (21 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr06/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Das Layout verwendet neben unsichtbaren HTML-Tabellen CSS zur Formatierung von Text. Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x, Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos darstellbar.

Zu dem Layout gehören folgende Projektdateien:

index.htm
HTML-Datei der Einstiegsseite mit dem Inhaltsverzeichnis. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML und Kapitel CSS. Besonders wichtig ist Wissen über Kapitel Tabellen in HTML.

11.htm
HTML-Datei für Unterseiten der ersten Ebene. Zum Bearbeiten gelten die gleichen Vorkenntnisse wie bei der index.htm.

111.htm
HTML-Datei für Unterseiten der zweiten Ebene.

styles.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung von Text, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

images (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Seite Techniken und Begriffen der Bildbearbeitung.

nach oben
weiter | Seite Layout Nummer 7
zurück | Seite Layout Nummer 5
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


Knochengerüst

 | Der R o h l i n g :: v.1.0 :: 01.09.02
 | impressum :: feedback :: forum :: newsletter ::
LINKWEG ::: inhalt / knochengerüst /

1. Stütz- und Bewegungsorgane

1.1. D A S K N O C H E N G E R Ü S T

1.1.1. Vom Bau der Knochen LINK AKTIV
Knochensubstanz
Aufbau
Veränderung der Knochen im Lauf des Lebens
Der Arm ist gebrochen

1.1.2. Weitere Bestandteile des Skeletts
Knorpel
Bänder
Inhalt

1.1.3. Verbindung der Knochen
Inhalt
Inhalt
Inhalt

1.1.4. Kopfskelett
Inhalt
Inhalt
Inhalt

1.1.5. Rumpfskelett
Inhalt
Inhalt

1.1.6. Skelett der Gliedmaßen

Inhalt
Inhalt

© 2001 by Ihr Name • E-Mail: beispiel@example.org


Vom Bau der Knochen

 | Der R o h l i n g :: v.1.0 :: 01.09.02
 | impressum :: feedback :: forum :: newsletter ::
LINKWEG ::: inhalt / knochengerüst / bau

1. Stütz- und Bewegungsorgane
1.1. Das Knochengerüst

1.1.1 V O M B A U D E R K N O C H E N

Knochensubstanz
Aufbau
Veränderung der Knochen im Lauf des Lebens
Der Arm ist gebrochen

Knochensubstanz

ohne Substanz Die Knochen sind die härtesten Bestandteile des Körpers. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .
Die Knochensubstanz besteht aus einem Gemisch von Knochenerde und Knochenknorpel.
Die chemische Zusammensetzung finden Sie auf auf dieser externer Link externen Seite.*

* Dieses Symbol [image] zeigt einen Link zu einer externen Seite an.

Aufbau

An einem frischen Röhrenknochen... text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex Skelett t text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text. Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text. Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

Veränderung der Knochen im Lauf des Lebens

Vor der Geburt besteht... text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

Der Arm ist gebrochen

Lange Knochen sind der Gefahr eines Bruches mehr... text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
Text text text text text text text text text text text text text text text.

Weiterführende Informationen:

Verweis 1 [Inhaltsbeschreibung]
Verweis 2 [Inhaltsbeschreibung]

Übersicht Knochengerüst
Weitere Bestandteile des Skeletts
© 2001 by Ihr Name • E-Mail: beispiel@example.org


Der Rohling - Inhalt

 | Der R o h l i n g :: v.1.0 :: 01.09.02
 | impressum :: feedback :: forum :: newsletter ::
LINKWEG ::: inhalt /

I N H A L T

Einleitung

1. Stütz- und Bewegungsorgane
1.1 Knochengerüst [LINK AKTIV]
1.2. Muskel

2. Stoffwechsel und seine Organe
2.1. Ernährung
2.2. Blut und Blutkreislauf
2.3. Atmung und ihre Organe
2.4. Nieren
2.5. Haut

3. Steuerung des Körpers
3.1. Nervensystem
3.2. Sinnesorgane
3.3. Hormone

4. Vererbung
4.1. Gang der Vererbung
4.2. Erbgesetze
4.3. Wirkung äußerer Einflüsse

5. Verhalten
5.1. Ererbt oder erlernt
5.2. Auslösemechanismen

6. Mensch und Umwelt
6.1. Biologische Abhängigkeiten
6.2. Eingriffe in die Umwelt

7. Drogenabhängigkeiten
7.1. Rauschmittel
7.2. Arzneimittel
7.3. Genussmittel
7.4. Rechtsfragen
Schlagwortregister
Literatur
Glossar
Legende

© 2001 by Ihr Name • E-Mail: beispiel@example.org


SELFHTML: Fertige Layouts / Layout Nummer 7

SELFHTML

Layout Nummer 7
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Verena und Ralph Segert
E-Mail: | E-Mail layouts@segert.net
WWW: | deutschsprachige Seite http://segert.net/

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 7

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (6 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr07/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Das Layout verwendet neben unsichtbaren HTML-Tabellen CSS zur Formatierung von Text. Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x, Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos darstellbar.

Zu dem Layout gehören folgende Projektdateien:

index.htm
HTML-Datei der Einstiegsseite. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML und Kapitel CSS. Besonders wichtig ist Wissen über Kapitel Tabellen in HTML. Beachten Sie die Kommentare im Quelltext der Datei. Dort finden Sie wichtige Anweisungen.

beispielseite.htm
HTML-Datei für eine beliebige untergeordnete Seite, die von der Einstiegsseite aus verlinkt wird. Zum Bearbeiten gelten die gleichen Vorkenntnisse wie bei der index.htm.

styles.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung von Text, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

images (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Seite Techniken und Begriffen der Bildbearbeitung.

nach oben
weiter | Seite Layout Nummer 8
zurück | Seite Layout Nummer 6
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


HILFE: BEISPIELSEITE

Home
home · menüpunkt 1

  • menüpunkt 1
    ° untermenü 1.1
    ° untermenü 1.2
    ° untermenü 1.3
  • menüpunkt 2
  • menüpunkt 3
  • menüpunkt 4
  • menüpunkt 5
  • menüpunkt 6
  • menüpunkt 7

{Beispielseite} Dies ist die Hauptseite zu Menüpunkt 1. Hier und auf den anderen Seiten könnten Texte zum Thema, über den Autor dieser Website, eine Fotogalerie oder eine kommentierte Linkliste präsentiert werden.

{Anregung} Ist der Platz nicht ausreichend oder soll das Thema unterteilt werden, können Sie problemlos über das Submenü = Untermenü weitere Seiten ansteuern. Falls kein Bedarf besteht, löschen Sie die Punkte einfach :-)

© 2001 · Name · E-Mail email senden


Layout 2 von Segert Webpublishing . START

websitename

  • menüpunkt 1
  • menüpunkt 2
  • menüpunkt 3
  • menüpunkt 4
  • menüpunkt 5
  • menüpunkt 6
  • menüpunkt 7

{Datum oder Überschrift} An Stelle der Grafik absatz.jpg, das ist das Viereck unterhalb dieses Textes, kann auch eine andere Grafik verwendet werden. Wichtig: Die Grafik darf nicht breiter als 370 Pixel sein, damit das Layout nicht zerstört wird. Dieser Text ist nur Blindtext, Blindtext dient dem Layout und wird später durch den Originaltext ersetzt. Dieser Text ist nur Blindtext, Blindtext dient dem Layout und wird später durch den Originaltext ersetzt. Dieser Text ist nur Blindtext, Blindtext dient dem Layout und wird später durch den Originaltext ersetzt.

{Datum oder Überschrift} Der Platz auf der Startseite würde sich für News oder eine kurze Beschreibung der Menüpunkte anbieten, damit der Besucher sofort weiss, was ihn erwartet.

© 2001 · Name · E-Mail email senden


SELFHTML: Fertige Layouts / Layout Nummer 8

SELFHTML

Layout Nummer 8
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Burkhardt Becker ("becx")
E-Mail: | E-Mail bb@becx.de
WWW: | deutschsprachige Seite http://www.becx.de/

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 8

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (35 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr08/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Das Layout verwendet Frames zur Darstellung. Innerhalb der angezeigten Frame-Seiten verwendet es neben unsichtbaren HTML-Tabellen CSS zur Formatierung von Text. Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x, Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos darstellbar.

Zu dem Layout gehören folgende Projektdateien:

index.htm
HTML-Datei der vorgeschalteten Einstiegsseite. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML und Kapitel CSS.

frameset.htm
HTML-Datei für das Frameset der Seiten. Zum Bearbeiten gelten die gleichen Vorkenntnisse wie bei der index.htm. Besonders wichtig ist Wissen über Kapitel Frames.

frame_oben.htm
HTML-Datei für die obere Navigationsleiste. Dort können Sie die Verweise zu Unterseiten bearbeiten.

frame_unten.htm
HTML-Datei für die untere Navigationsleiste.

arena.htm
HTML-Datei für die im zentralen Inhalts-Frame-Fenster angezeigte Startseite.

thema1.htm
HTML-Datei für eine beliebige im zentralen Inhalts-Frame-Fenster angezeigte Unterseite.

thema1a.htm
HTML-Datei für eine beliebige im zentralen Inhalts-Frame-Fenster angezeigte Unterseite zweiter Ordnung.

styles.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung von Text, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

images (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Seite Techniken und Begriffen der Bildbearbeitung.

nach oben
weiter | Seite Layout Nummer 9
zurück | Seite Layout Nummer 7
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


Hier kommt der Titel der Seite hinein

N E U E S
neues1_url Das ist neu hier. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .

neues2_url

Das ist neu hier. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.

© 2001 by Ihr Name • beispiel@example.org

Diese Seite ist Teil eines Framesets [this page is part of a frameset]
 LOAD FRAMESET


Dein Titel_oben

| thema 1 | thema 2 | thema 3 | thema 4 | thema 5 |


Dein Titel_unten

| impressum | feedback | guestbook | home |


Titel deiner Page

 thema 1


Hier kommt der Titel der Seite hinein

T I T E L D E I N E R P A G E
by deinName
0


THEMA 1

thema 1a
thema 1b
thema 1c
thema 1d
thema 1e

T H E M A 1

Hier geht es um... Thema 1a... Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .

Hier geht es um... Thema 1b... Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .

Hier geht es um... Thema 1c... Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .

© 2001 by Ihr Name • beispiel@example.org

Diese Seite ist Teil eines Framesets [this page is part of a frameset]
 LOAD FRAMESET


Thema 1a

THEMA 1

thema 1a
thema 1b
thema 1c
thema 1d
thema 1e

T H E M A 1a

Thema 1a... Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .

© 2001 by Ihr Name • beispiel@example.org

Diese Seite ist Teil eines Framesets [this page is part of a frameset]
 LOAD FRAMESET


SELFHTML: Fertige Layouts / Layout Nummer 9

SELFHTML

Layout Nummer 9
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Burkhardt Becker ("becx")
E-Mail: | E-Mail bb@becx.de
WWW: | deutschsprachige Seite http://www.becx.de/

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 9

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (43 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr09/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Das Layout verwendet neben unsichtbaren HTML-Tabellen CSS zur Formatierung von Text und JavaScript zum Entfernen der Umrandung des aktiven "mailto"-Link. Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x, Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos darstellbar.

Zu dem Layout gehören folgende Projektdateien:

index.htm
HTML-Datei der Einstiegsseite. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML und Kapitel CSS. Besonders wichtig ist Wissen über Kapitel Tabellen in HTML.

thema1.htm
HTML-Datei für eine beliebige untergeordnete Seite, die von der Einstiegsseite aus verlinkt wird. Zum Bearbeiten gelten die gleichen Vorkenntnisse wie bei der index.htm.

styles.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung von Text, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

images (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Seite Techniken und Begriffen der Bildbearbeitung.

nach oben
weiter | Seite Layout Nummer 10
zurück | Seite Layout Nummer 8
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


Hier kommt der Titel der Seite hinein

Thema 1
Thema 2
Thema 3
Thema 4
Thema 5
Thema 6
Thema 7
Thema 8
Thema 9

| impressum | feedback | guestbook | home |

Themenübersicht

Thema 1
Kurze Vorstellung der Inhalte zu diesem Thema.

Thema 2
Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema.

Thema 3
Kurze Vorstellung der Inhalte zu diesem Thema.

Thema 4
Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema.

Thema5
Kurze Vorstellung der Inhalte zu diesem Thema.

Thema 6
Kurze Vorstellung der Inhalte zu diesem Thema.

Thema 7
Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema. Kurze Vorstellung der Inhalte zu diesem Thema.

Thema 8
Kurze Vorstellung der Inhalte zu diesem Thema.

© 2001 by Ihr Name • beispiel@example.org


thema_1
Thema 2
Thema 3
Thema 4
Thema 5
Thema 6
Thema 7
Thema 8
Thema 9

| impressum | feedback | guestbook | home |

Thema 1

Heinrich von Gestern und der Mief
von heute. Text Text Text Text Text
Text Text Text Text Text Text Text T
Text Text Text Text Text Text Text Te
Text Text Text Text Text Text Text
Text Text Text Text Text Text Text.
Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Link

© 2001 by Ihr Name • beispiel@example.org


SELFHTML: Fertige Layouts / Layout Nummer 10

SELFHTML

Layout Nummer 10
Informationsseite

nach unten Impressum zu diesem Layout
nach unten Beispiel mit diesem Layout anzeigen und Layout speichern
nach unten Hinweise zu diesem Layout
nach unten

Impressum zu diesem Layout

Web-Design: | Jeena Paradies
E-Mail: | E-Mail info@jeenaparadies.net
WWW: | deutschsprachige Seite http://jeenaparadies.net/webdesign/leistungen

Beispiel mit diesem Layout anzeigen und Layout speichern

Layout Nummer 10

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, dann haben Sie zwei Möglichkeiten. Möglichkeit 1 müssen Sie benutzen, wenn Sie SELFHTML online im Internet oder in einem Intranet lesen, wo Sie keinen Zugang zu den Dateien von SELFHTML haben. Möglichkeit 2 können Sie benutzen, wenn Sie SELFHTML lokal auf Ihrem Rechner oder in Ihrem Netzwerk gespeichert haben.

Möglichkeit 1

Klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

ZIP-Datei ZIP-Datei mit den Dateien des Layouts speichern (51 KByte).

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei mit einem Unzip-Programm entpacken. Falls Sie kein solches Programm haben, finden Sie im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell eine Produktübersicht mit Links zu Anbietern von solchen Programmen:
Online-Seite SELFHTML-Linkverzeichnis: Pack- und Entpack-Programme.
Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Möglichkeit 2

Wechseln Sie mit einem Dateiverwaltungsprogramm (Windows Explorer oder ähnliches) in das Verzeichnis, wo SELFHTML abgelegt ist. Wechseln Sie von dort aus weiter in das Unterverzeichnis layouts/nr10/vorlage. Kopieren Sie den gesamten Inhalt dieses Unterverzeichnisses in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Kopieren der Datei an.

Hinweise zu diesem Layout

Dieses Layout verwendet standardkonformes XHTML 1.0 Strict und wurde ohne Layouttabellen gestaltet, da diese ja bekanntlich nur für tabellarische Daten gedacht sind.
Das Aussehen wird ganz und gar durch die externe CSS Datei gesteuert. Wir haben hier also eine Trennung von Layout und Struktur. Allein durch das Verändern der CSS Datei können wir somit das Aussehen der ganzen Webpräsenz verändern.

Das Layout wurde in allen modernen Browsern getestet (IE 5.x und 6, Opera 7.x und 8, Mozilla 1.x, Konqueror 3.x.x, Safari 1.x.x) und machte keine Probleme. Netscape 4.x bekommt kein CSS, die Seite bleibt aber dennoch voll benutzbar für diese Besucher.

Zu dem Layout gehören folgende Projektdateien:

index.htm
Die Hauptdatei des Templates. Den Quelltext können Sie mit einem Texteditor oder einem Seite HTML-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in Kapitel HTML.

Diese Datei ist außerdem gleichzeitig das Template für alle Dateien der Webpräsenz.
Wenn Sie eine neue Unterseite erstellen wollen dann kopieren Sie die index.htm Datei und speichern sie unter einem anderen Namen. Dann ersetzen Sie den Inhalt des Containers mit der id="main" durch Ihren. Außerdem entfernen Sie den Link im Menü und lassen nur den Text in der Liste stehen. Dafür fügen Sie aber einen Link beim ersten Menüpunkt zur Startseite ein.

Nähere Informationen finden Sie auch im Quelltext der Datei.

css/screen.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung für Bildschirmdarstellung, die in allen HTML-Dateien des Projekts eingebunden wird und das vollständige Aussehen bestimmt. Wenn Sie etwas am Aussehen der Seite verändern wollen, dann nur hier.
Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

Nähere Informationen und Tipps finden Sie auch im Quelltext der Datei.

css/print.css
Separate CSS-Datei mit globalen Definitionen zur Formatierung für die Druckausgabe, die in allen HTML-Dateien des Projekts eingebunden wird. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich. Tipps können Sie sich auch im Tipps & Tricks Artikel Online-Seite Stylesheet für ein Druck-Layout holen.

css/ielte6.css
Eine Datei, die versucht die Unzulänglichkeiten des mittlerweile etwas in die Jahre geratenen Browsers Internet Explorer bis Version 6 mittels CSS-Hacks auszubügeln. Weitere Informationen dazu finden Sie im Quelltext. Die Datei wird mit Hilfe von englischsprachige Seite Conditional Comments nur dem IE zur Verfügung gestellt, alle anderen Browser ignorieren sie.

img (Verzeichnis)
Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Kapitel Techniken und Begriffen der Bildbearbeitung.

nach oben
weiter | Seite Farbauswähler
zurück | Seite Layout Nummer 9
Teil von SELFHTML/Navigationshilfen Teil von Fertige Layouts

© 2007 Seite Impressum


Homepage - Über uns

Navigation überspringen
homepage
  • Über mich
  • Leistungen
  • Referenzen
  • AGB
  • Impressum
Wilkommen
Passphoto, langhariger Typ Hallo, auf miener Seite hier findet ihr Informationen zu Thema und Thema. Erreichen kann man mich unter max@example.org. Es wäre schön wenn ihr auf meinen Seiten etwas interessantes für euch finden würdet.
Aktuelles
11.03.2005 neues Template
20.02.2005 ich habe eine neue Waschmaschine
15.01.2005 Familienzuwachs, meine Schwiegermutter zieht ein
Informationen
© 2007 Max Mustermann
design by Jeena Paradies

Über mich

Hallo allerseits.

dummy1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam id erat at tellus tincidunt mollis. Praesent mattis tortor eu est. Donec congue sagittis arcu. Etiam viverra erat ut nulla. Donec hendrerit tortor et metus. Maecenas rhoncus dapibus leo. Donec vel ipsum ut felis vestibulum varius. Mauris ipsum nisl, accumsan eget, gravida non, mattis nec, nunc. Pellentesque pellentesque erat a arcu. Nulla semper, metus ac volutpat congue, ipsum felis mattis felis, sed placerat dolor velit ac urna. Nunc convallis. Donec non ligula nec nunc accumsan consequat. Ut in mauris. Vestibulum vitae neque sed eros convallis molestie. Phasellus quis ligula non tortor mattis mollis. Vestibulum sit amet ipsum ut ligula iaculis tincidunt.

dummy2 Quisque molestie lorem vel risus. Sed volutpat. Sed consectetuer pulvinar turpis. Mauris sagittis, orci ut dictum porta, augue augue cursus leo, ut condimentum diam mi eu leo. Nullam lacinia. Vestibulum in urna nec dui suscipit dignissim. Maecenas odio diam, consequat et, bibendum non, ullamcorper a, risus. Nulla condimentum ligula a wisi. In eget risus quis purus ultricies rutrum. Mauris commodo tortor eu felis.

Jetzt noch mal

Aliquam erat volutpat. Aliquam erat volutpat. Nunc massa pede, egestas vel, sodales vitae, fringilla ac, justo. Suspendisse ac sem nec nulla vulputate tincidunt. Praesent eu purus vitae nisl porta ullamcorper. Nullam justo orci, tristique vel, fermentum eget, condimentum in, pede. Integer sed dolor et massa molestie mollis. Sed condimentum. Duis viverra. Proin quis urna. Morbi sodales. Nam vehicula risus cursus justo. Donec vel magna.

Und dann noch mal hier

dummy3 Sed sed wisi vel odio dapibus molestie. Sed aliquet auctor arcu. Morbi nibh. Fusce orci urna, elementum nec, dignissim eget, aliquet non, leo. In sit amet justo in ante nonummy ultricies. Vestibulum congue. Sed quis quam sed orci condimentum tincidunt. Aenean wisi sapien, molestie eu, eleifend at, mattis vitae, lacus. Duis fringilla gravida pede. Duis condimentum cursus tellus. Donec mollis mollis dolor. Nunc a augue. Nulla id leo ut nulla sollicitudin accumsan. Phasellus magna mauris, condimentum id, suscipit vel, sollicitudin quis, nulla. Maecenas vitae nulla. Nam dui nulla, feugiat ac, rutrum in, suscipit et, massa. Morbi malesuada lacinia tellus. Phasellus malesuada velit at purus.


SELFHTML: Navigationshilfen / Kurzreferenz: CSS

SELFHTML

Kurzreferenz: CSS
Informationsseite

nach unten Hinweis
nach unten Maßeinheiten und Farbangaben
nach unten Zentrale Formate
nach unten Direktformatierung von Elementen
nach unten CSS-Eigenschaften: Schriftformatierung
nach unten CSS-Eigenschaften: Ausrichtung/Absatzkontrolle
nach unten CSS-Eigenschaften: Außenrand/Abstand
nach unten CSS-Eigenschaften: Innenabstand
nach unten CSS-Eigenschaften: Rahmen
nach unten CSS-Eigenschaften: Hintergrundfarben und -bilder
nach unten CSS-Eigenschaften: Listenformatierung
nach unten CSS-Eigenschaften: Tabellenformatierung
nach unten CSS-Eigenschaften: Positionierung und Anzeige von Elementen
nach unten CSS-Eigenschaften: Anzeigefenster
nach unten

Hinweis

Die CSS-Kurzreferenz ist nicht für Anfänger geeignet! Die Kurzreferenz richtet sich an Anwender, die sich mit CSS auskennen und eine allgemeine Syntax-Übersicht für wichtige und praxisrelevante Sprachbestandteile haben wollen (die Kurzreferenz erhebt keinen Anspruch auf Vollständigkeit). Die Kurzreferenz eignet sich als Navigationshilfe. Von den Kurzbeschreibungen führen Verweise vom Typ Seite Beschreibung direkt zu den ausführlichen Beschreibungen innerhalb der Dokumentation.

Maßeinheiten und Farbangaben

Numerische Angaben absolut | pt | Punkt. Typografische Maßeinheit. 1 Punkt entspricht 1/72 Inches. | Seite Beschreibung
 | pc | Pica. Typografische Maßeinheit. 1 Pica entspricht 12 Punkt.
 | in | Inch. 1 Inch entspricht 2.54 Zentimetern. Dezimalzeichen für Nachkommazahlen ist der Punkt.
 | mm | Millimeter.
 | cm | Zentimeter. Dezimalzeichen für Nachkommazahlen ist der Punkt.
Numerische Angaben relativ | em | Relativ zur Schriftgröße des Elements. Bei Anwendung auf Schriftgröße relativ zur Schriftgröße des Elternelements. Dezimalzeichen für Nachkommazahlen ist der Punkt. | Seite Beschreibung
 | ex | Relativ zur Höhe des Buchstabens x. Bei Anwendung auf Schriftgröße relativ zur Höhe des Buchstabens x im Elternelement. Dezimalzeichen für Nachkommazahlen ist der Punkt.
 | px | Pixel. Relativ von Ausgabegerät zu Ausgabegerät, absolut an ein und demselben Ausgabegerät.
 | % | Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext.
Farbangaben | #rrggbb | Hexadezimale RGB-Angabe wie bei HTML. | Seite Beschreibung
 | #rgb | Hexadezimale RGB-Angabe - Kurzschreibweise
 | Farbnamen | wie bei HTML
 | rgb(R,G,B) | RGB-Werte dezimal (0-255,0-255,0-255)
 | rgb(%,%,%) | RGB-Anteile prozentual (0-100%,0-100%,0-100%)

Zentrale Formate

Formate für Elemente

 Element { CSS-Eigenschaft:Wert; ...}
Für Element den Namen eines HTML-Elements wie h1 oder td oder * ("alle Elemente") notieren.
Für CSS-Eigenschaft eine Eigenschaft wie font-size oder background-color notieren.
Für Wert einen jeweils erlaubten Wert notieren.
Beliebig viele Notierungen von CSS-Eigenschaft:Wert; innerhalb der geschweiften Klammern möglich.
Seite Beschreibung

Formate für
verschachtelte Elemente

 Element1 Element2 { CSS-Eigenschaft:Wert; ...}
Element1 > Element2 { CSS-Eigenschaft:Wert; ...}
Element1 * Element2 { CSS-Eigenschaft:Wert; ...}
Element1 + Element2 { CSS-Eigenschaft:Wert; ...}
Für Element1 und Element2 so etwas notieren wie h3 und var.
Formatdefinitionen gelten dann für var-Elemente innerhalb von h3-Elementen.
Oder für Element1 oder Element2 Platzhalter * ("alle Elemente") notieren.
Leerzeichen zwischen Element1 und Element2 bedeutet: egal wie viele Ebenen Element2 unterhalb von Element1 in der Elementstruktur liegt.
> bedeutet: nur wenn Element2 eine Ebene unterhalb von Element1 in der Elementstruktur liegt.
* bedeutet: wenn Element2 mindestens zwei Ebenen unterhalb von Element1 in der Elementstruktur liegt.
+ bedeutet: wenn Element2 auf gleicher Ebene liegt wie Element1 und in der Elementstruktur unmittelbar nach Element1 folgt.
Seite Beschreibung

Attributbedingte
Formate

 Element[Attributname] { CSS-Eigenschaft:Wert; ...}
Element[Attributname=Attributwert] { CSS-Eigenschaft:Wert; ...}
Element[Attributname~=Attributwert] { CSS-Eigenschaft:Wert; ...}
Element[Attributname|=Attributwert] { CSS-Eigenschaft:Wert; ...}
Für Element ein HTML-Element wie z.B. a oder td oder * ("alle Elemente") notieren.
Für Attributname so etwas wie href oder align notieren.
a[href=index.htm] trifft z.B. auf Elemente mit <a href="index.htm"> </a> zu.
img[alt~=Hamburg] trifft z.B. auf Elemente mit <img src="bild.jpg" alt="Blick vom Michel auf Hamburg"> zu.
p[lang|=en] trifft z.B. auch auf Elemente mit <p lang="en-US">...</p> zu.
Seite Beschreibung

Formate für
Klassen

 Element.Klassenname { CSS-Eigenschaft:Wert; ...}
*.Klassenname { CSS-Eigenschaft:Wert; ...}
.Klassenname { CSS-Eigenschaft:Wert; ...}
.KlassennameA.KlassennameB { CSS-Eigenschaft:Wert; ...}
Für Element ein HTML-Element wie z.B. strong oder table oder * ("alle Elemente") notieren. Der Stern kann auch entfallen.
Für Klassenname einen Namen notieren.
Trifft auf HTML-Elemente mit <Element class="Klassenname">...</Element> zu.
.gross trifft z.B. auf <p class="gross">...</p> zu.
.KlassennameA.KlassennameB trifft z.B. auf <p class="KlassennameA KlassennameB">...</p> zu.
Seite Beschreibung

Individualformate

 #Name { CSS-Eigenschaft:Wert; ...}
Element#Name { CSS-Eigenschaft:Wert; ...}
Für Name einen Namen notieren.
Trifft auf HTML-Elemente mit <Element id="Name">...</Element> zu.
#Kopf trifft z.B. auf <div id="Kopf">...</div> zu.
Für Element ein HTML-Element wie z.B. h2 oder pre notieren.
p#Kopf trifft z.B. auf <p id="Kopf">...</p> zu, nicht aber auf <div id="Kopf">...</div>.
Seite Beschreibung

Pseudoelemente
Pseudoklassen

 a:link { CSS-Eigenschaft:Wert; ... }    /* noch nicht besuchte Ziele */
a:visited { CSS-Eigenschaft:Wert; ... } /* besuchte Ziele */
a:hover { CSS-Eigenschaft:Wert; ... }   /* Verweise bei "MouseOver" */
a:active { CSS-Eigenschaft:Wert; ... }  /* Angeklickte Verweise */
a:focus { CSS-Eigenschaft:Wert; ... }   /* Verweise, die Fokus erhalten */

Element:hover { CSS-Eigenschaft:Wert; ... }   /* Element bei "MouseOver" */
Element:active { CSS-Eigenschaft:Wert; ... }  /* Angeklickte Elemente */
Element:focus { CSS-Eigenschaft:Wert; ... }   /* Elemente, die Fokus erhalten */

#Name:hover { CSS-Eigenschaft:Wert; ... }   /* Individualformate bei "MouseOver" */
#Name:active { CSS-Eigenschaft:Wert; ... }  /* Angeklickte Individualformate */
#Name:focus { CSS-Eigenschaft:Wert; ... }   /* Individualformate, die Fokus erhalten */

Element:first-line { CSS-Eigenschaft:Wert; ... }   /* erste Zeile */
Element:first-letter { CSS-Eigenschaft:Wert; ... } /* erster Buchstabe */

Element:lang(xy) { CSS-Eigenschaft:Wert; ... } /* Elemente mit Sprachauszeichnung */

Element:before { content:Wert; } /* Vor dem Element einfügen */
Element:after { content:Wert; }  /* nach dem Element einfügen */
:link und :visited sind nur bei a-Elementen (Verweisen) möglich, :hover, :active und :focus auch bei anderen Elementen und Individualformaten.
Seite Beschreibung

Bei content:Wert für Wert in Anführungszeichen einen statischen Text notieren, oder url(URI), wobei URI eine Grafik referenzieren kann, oder open-quote und close-quote für Anführungszeigen, oder eine automatische Nummerierung wie folgt:
content:counter(Name); counter-increment(Name);
Dabei für Name einen Namen für den Zähler notieren.
Seite Beschreibung

Direktformatierung von Elementen

CSS in HTML-Elementen

 <Element style="CSS-Eigenschaft:Wert; ...">...</Element>
Für Element den Namen eines HTML-Elements wie p oder table oder blockquote notieren.
Für CSS-Eigenschaft eine Eigenschaft wie font-size oder background-color notieren.
Für Wert einen jeweils erlaubten Wert notieren.
Beliebig viele Notierungen von CSS-Eigenschaft:Wert; innerhalb des style-Attributs möglich.
Seite Beschreibung

CSS-Eigenschaften: Schriftformatierung

Schriftart | font-family:Schriftart1,Schriftart2,...;
 | Für Schriftart1 den Namen gewünschten Schriftart notieren. Für Schriftart2 und weitere die Namen von Alternativschriftarten notieren. Seite Beschreibung
Schriftstil | font-style:Wert;
 | Für Wert einen der folgenden Werte notieren: italic = Schriftstil kursiv. oblique = Schriftstil kursiv. normal = normaler Schriftstil. Seite Beschreibung
Schriftvariante | font-variant:Wert;
 | Für Wert einen der folgenden Werte notieren: small-caps = Kapitälchen. normal = normale Schriftvariante. Seite Beschreibung
Schriftgröße | font-size:Wert;
 | Für Wert eine numerische Angabe wie 1.2em, 14px oder 12pt notieren oder eine der folgenden Werte: xx-small = winzig. x-small = sehr klein. small = klein. medium = mittel. large = groß. x-large = sehr groß. xx-large = riesig. smaller = sichtbar kleiner als normal. larger = sichtbar größer als normal. Seite Beschreibung
Schriftgewicht | font-weight:Wert;
 | Für Wert einen der folgenden Werte notieren: bold = fett. bolder = extrafett. lighter = dünner. 100,200,300,400,500,600,700,800,900 = extra-dünn (100) bis extrafett (900). normal = normales Schriftgewicht. Seite Beschreibung
Schriftlaufweite | font-stretch:Wert;
 | Für Wert einen der folgenden Werte notieren: wider = weiter als normal. narrower = enger als normal. condensed = gedrängt. semi-condensed = halb gedrängt. extra-condensed = stark gedrängt. ultra-condensed = extrastark gedrängt. expanded = geweitet. semi-expanded = halb geweitet. extra-expanded = stark geweitet. ultra-expanded = extrastark geweitet. normal = normale Laufweite. Seite Beschreibung
Schrift (allgemein) | font:Wert;
 | Für Wert eine Mischung aus erlaubten Werten für font-style, font-variant, font-weight, font-size, line-height und font-family notieren. Einzelwerte durch Leerzeichen trennen, die Reihenfolge ist einzuhalten. z.B. font:italic bold 13px Times; Seite Beschreibung
Wortabstand | word-spacing:Wert;
 | Für Wert eine numerische Angabe wie 0.2em oder 4px notieren, jedoch keine Prozentwerte. Seite Beschreibung
Zeichenabstand | letter-spacing:Wert;
 | Für Wert eine numerische Angabe wie 0.1em oder 2px notieren, jedoch keine Prozentwerte. Seite Beschreibung
Textdekoration | text-decoration:Wert;
 | Für Wert einen der folgenden Werte notieren: underline = unterstrichen. overline = überstrichen. line-through = durchgestrichen. blink = blinkend. none = normal (keine Text-Dekoration). Seite Beschreibung
Text-Transformation | text-transform:Wert;
 | Für Wert einen der folgenden Werte notieren: capitalize = Wortanfänge als Großbuchstaben. uppercase = Nur Großbuchstaben. lowercase = Nur Kleinbuchstaben. none = normal (keine Text-Transformation). Seite Beschreibung
Textfarbe | color:Wert;
 | Für Wert eine Farbangabe wie #FFCC99, red oder rgb(96,255,0) notieren. Seite Beschreibung

CSS-Eigenschaften: Ausrichtung/Absatzkontrolle

Texteinrückung | text-indent:Wert;
 | Für Wert eine numerische Angabe wie z.B. 20px oder 2.5cm notieren. Seite Beschreibung
Zeilenhöhe | line-height:Wert;
 | Für Wert eine numerische Angabe wie z.B. 20px oder 120% notieren. Prozentangaben beziehen sich auf die Schriftgröße. Seite Beschreibung
Vertikale Ausrichtung | vertical-align:Wert;
 | Für Wert einen der folgenden Werte notieren: top = obenbündig ausrichten. middle = mittig ausrichten. bottom = untenbündig ausrichten. baseline = an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie gibt). sub = tieferstellen (ohne die Schriftgröße zu reduzieren). super = höherstellen (ohne die Schriftgröße zu reduzieren). text-top = am oberen Schriftrand ausrichten. text-bottom = am unteren Schriftrand ausrichten. Seite Beschreibung
Horizontale Ausrichtung | text-align:Wert;
 | Für Wert einen der folgenden Werte notieren: left = linksbündig ausrichten (Voreinstellung). center = zentriert ausrichten. right = rechtsbündig ausrichten. justify = als Blocksatz ausrichten. Seite Beschreibung
Textumbruch | white-space:Wert;
 | Für Wert einen der folgenden Werte notieren: normal = automatischer Zeilenumbruch (wie bei allen HTML-Elementen außer pre und nowrap). pre = Zeilenumbruch wie im Editor eingegeben (so wie beim pre-Element). nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags. Seite Beschreibung

CSS-Eigenschaften: Außenrand/Abstand

Außenrand/Abstand oben | margin-top:Wert;
 | Für Wert einen numerischen Wert wie 2.3cm oder 24pt notieren. Seite Beschreibung
Außenrand/Abstand unten | margin-bottom:Wert;
 | Für Wert einen numerischen Wert wie 30px oder 25mm notieren. Seite Beschreibung
Außenrand/Abstand links | margin-left:Wert;
 | Für Wert einen numerischen Wert wie 1.2cm oder 40px notieren. Seite Beschreibung
Außenrand/Abstand rechts | margin-right:Wert;
 | Für Wert einen numerischen Wert wie 1.25cm oder 65px notieren. Seite Beschreibung
Außenrand/Abstand (allgemein) | margin:Wert;
 | Für Wert einen oder mehrere Werte zu margin-top, margin-bottom, margin-left und margin-right notieren. Eine Angabe = alle vier Ränder des Elements erhalten den gleichen Außenabstand. Zwei Angaben = erste für oben/unten, zweite für rechts/links. Drei Angaben = erste für oben, zweite für rechts/links, dritte für unten. Vier Angaben = erste für oben, zweite für rechts, dritte für unten, vierte für links. Seite Beschreibung

CSS-Eigenschaften: Innenabstand

Innenabstand oben | padding-top:Wert;
 | Für Wert einen numerischen Wert wie 3px oder 15pt notieren. Seite Beschreibung
Innenabstand unten | padding-bottom:Wert;
 | Für Wert einen numerischen Wert wie 0.7cm oder 3em notieren. Seite Beschreibung
Innenabstand links | padding-left:Wert;
 | Für Wert einen numerischen Wert wie 30px oder 1.4cm notieren. Seite Beschreibung
Innenabstand rechts | padding-right:Wert;
 | Für Wert einen numerischen Wert wie 25mm oder 0.4in notieren. Seite Beschreibung
Innenabstand (allgemein) | padding:Wert;
 | Für Wert einen numerische Angabe wie 20px oder 0.4cm notieren. Alle vier Seiten des Elements erhalten den gleichen Innenabstand. Seite Beschreibung

CSS-Eigenschaften: Rahmen

Rahmendicke

 border-width:Wert;          /* alle Seiten */
border-top-width:Wert;      /* nur oben */
border-bottom-width:Wert;   /* nur unten */
border-left-width:Wert;     /* nur links */
border-right-width:Wert;    /* nur rechts */
Für Wert einen numerischen Wert wie 2px oder 1mm oder einen der folgenden Werte notieren:
thin = dünn.
medium = mittelstark.
thick = dick.
Seite Beschreibung

Rahmenfarbe

 border-color:Wert;          /* alle Seiten */
border-top-color:Wert;      /* nur oben */
border-bottom-color:Wert;   /* nur unten */
border-left-color:Wert;     /* nur links */
border-right-color:Wert;    /* nur rechts */
Für Wert eine Farbangabe wie #FFCC99, red oder rgb(96,255,0) notieren.
Seite Beschreibung

Rahmentyp

 border-style:Wert;          /* alle Seiten */
border-top-style:Wert;      /* nur oben */
border-bottom-style:Wert;   /* nur unten */
border-left-style:Wert;     /* nur links */
border-right-style:Wert;    /* nur rechts */
Für Wert einen der folgenden Werte notieren:
none = kein Rahmen (bzw. unsichtbarer Rahmen).
hidden = kein Rahmen (bzw. unsichtbarer Rahmen),
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.
Seite Beschreibung

Rahmen

 border:Wert;          /* alle Seiten */
border-top:Wert;      /* nur oben */
border-bottom:Wert;   /* nur unten */
border-left:Wert;     /* nur links */
border-right:Wert;    /* nur rechts */
Für Wert jeweils drei Angaben mit geeigneten Werten für border-style, border-width und border-color mit Leerzeichen dazwischen notieren.
z.B. border:3px solid #FFCC99; oder border-bottom:1cm inset red;.
Seite Beschreibung

CSS-Eigenschaften: Hintergrundfarben und -bilder

Hintergrundfarbe | background-color:Wert;
 | Für Wert eine Farbangabe wie #0000CC, fuchsia oder rgb(50%,60%,80%) notieren. Seite Beschreibung
Hintergrundbild | background-image:url(URI);
 | Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad angeben, wo sich die gewünschte Grafikdatei (GIF oder JPEG) befindet. Seite Beschreibung
Wiederholungs-Effekt | background-image:url(URI); background-repeat:Wert;
 | Für Wert einen der folgenden Werte notieren. repeat = wiederholen (Voreinstellung). repeat-x = nur "eine Zeile lang" waagerecht wiederholen. repeat-y = nur "eine Spalte lang" senkrecht wiederholen. no-repeat = nicht wiederholen, nur als Einzelbild anzeigen. Seite Beschreibung
Wasserzeichen-Effekt | background-image:url(URI); background-attachment:Wert;
 | Für Wert einen der folgenden Werte notieren: scroll = mitscrollen (Voreinstellung). fixed = Hintergrundbild bleibt stehen. Seite Beschreibung
Hintergrundposition | background-image:url(URI); background-position:Wert;
 | Für Wert entweder zwei numerische Angaben zur Bestimmung der linken oberen Startecke bezogen auf die linke obere Elementecke notieren, z.B. 10px 30px. Oder für Wert einen der folgenden Werte notieren: top = vertikal obenbündig. center = horizontal zentriert. center = vertikal mittig. bottom = vertikal untenbündig. left = horizontal linksbündig. right = horizontal rechtsbündig. Seite Beschreibung
Hintergrund (allgemein) | background:Wert;
 | Für Wert eine zusammenfassende Angabe aus background-image, background-repeat, background-attachment und background-position notieren. z.B. background:url(../bilder/background.gif) repeat-x fixed; Seite Beschreibung

Listenformatierung

Darstellungstyp

 list-style-type:Wert;
Für Wert einen der folgenden Werte notieren:
decimal = für ol-Listen: Nummerierung 1.,2.,3.,4. usw.
lower-roman = für ol-Listen: Nummerierung i.,ii.,iii.,iv. usw.
upper-roman = für ol-Listen: Nummerierung I.,II.,III.,IV. usw.
lower-alpha = für ol-Listen: Nummerierung a.,b.,c.,d. usw.
upper-alpha = für ol-Listen: Nummerierung A.,B.,C.,D. usw.
lower-greek = für ol-Listen: Nummerierung griechisch: α., β., γ., δ. usw.
hebrew = für ol-Listen: Nummerierung hebräisch
decimal-leading-zero = für ol-Listen: Nummerierung 01.,02.,03.,04., ... 98.,99. usw.
cjk-ideographic = für ol-Listen: Nummerierung mit ideographischen Zeichen
hiragana = für ol-Listen: Nummerierung in Japanisch (a, i, u, e, o, ka, ki, ... )
katakana = für ol-Listen: Nummerierung in Japanisch (A, I, U, E, O, KA, KI, ... )
hiragana-iroha = für ol-Listen: Nummerierung in Japanisch (i, ro, ha, ni, ho, he, to, ... )
katakana-iroha = für ol-Listen: Nummerierung in Japanisch (I, RO, HA, NI, HO, HE, TO, ... )
disc = für ul-Listen: Dateisymbol als Bullet-Zeichen.
circle = für ul-Listen: rundes Bullet-Zeichen.
square = für ul-Listen: rechteckiges Bullet-Zeichen.
none = kein Bullet-Zeichen, keine Nummerierung.
Seite Beschreibung

Listeneinrückung

 list-style-position:Wert;
Für Wert einen der folgenden Werte notieren:
inside = eingerückt.
outside = ausgerückt (Voreinstellung).
Seite Beschreibung

eigene Bullet-Grafik

 list-style-image:url(URI);
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad angeben, wo sich die gewünschte Grafikdatei (GIF oder JPEG) befindet.
Seite Beschreibung

Listendarstellung
(allgemein)

 list-style:Wert;
Für Wert eine zusammenfassende Angabe aus list-style-type, list-style-position und list-style-image notieren. Angaben durch Leerzeichen trennen.
z.B. list-style:lower-roman inside;
Seite Beschreibung

CSS-Eigenschaften: Tabellenformatierung

Ausrichtung Tabellenüberschrift | caption-side:Wert;
 | Bezieht sich sinnvollerweise auf das caption-Element. Für Wert einen der folgenden Werte notieren: top = oberhalb der Tabelle. bottom = unterhalb der Tabelle. left = links neben der Tabelle. right = rechts neben der Tabelle. Seite Beschreibung
Fixe/variable Breiten | table-layout:Wert;
 | Bezieht sich sinnvollerweise auf das table-Element. Für Wert einen der folgenden Werte notieren. fixed = Breitenangaben haben Vorrang vor dem Zelleninhalt (Inhalt wird zur Not abgeschnitten). auto = Zelleninhalt hat Vorrang vor Breitenangaben (Voreinstellung). Seite Beschreibung
Rahmenmodell | border-collapse:Wert;
 | Bezieht sich sinnvollerweise auf das table-Element. Für Wert einen der folgenden Werte notieren. separate = Zellenrahmen fallen nicht zusammen. collapse = Zellenrahmen fallen zusammen. Seite Beschreibung
Rahmenabstand Gitternetz | border-spacing:Wert;
 | Bezieht sich sinnvollerweise auf das table-Element. Für Wert eine numerische Angabe wie 3mm oder 10px notieren. Seite Beschreibung
Anzeige leerer Zellen | empty-cells:Wert;
 | Bezieht sich sinnvollerweise auf das table-Element. Für Wert einen der folgenden Werte notieren: show = Zellenrahmen leerer Tabellenzellen werden angezeigt. hide = Zellenrahmen leerer Tabellenzellen werden unterdrückt (Voreinstellung). Seite Beschreibung
Sprachausgabeunterstützung | speak-header-cell:Wert;
 | Bezieht sich sinnvollerweise auf das th-Element. Für Wert einen der folgenden Werte notieren: always = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen. once = Kopfzelleninhalt nur einmal wiedergeben (Normaleinstellung). Seite Beschreibung

CSS-Eigenschaften: Positionierung und Anzeige von Elementen

Positionsart

 position:Wert;
Für Wert einen der folgenden Werte notieren.
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit.
fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
Seite Beschreibung

Startposition
von oben

 top:Wert;
In Verbindung mit absoluter oder relativer Positionierung für Wert eine numerische Angabe wie 100px oder 2cm notieren.
Seite Beschreibung

Startposition
von links

 left:Wert;
In Verbindung mit absoluter oder relativer Positionierung für Wert eine numerische Angabe wie 18mm oder 30px notieren.
Seite Beschreibung

Startposition
von unten

 bottom:Wert;
In Verbindung mit absoluter oder relativer Positionierung für Wert eine numerische Angabe wie 150px oder 1in notieren.
Seite Beschreibung

Startposition
von rechts

 right:Wert;
In Verbindung mit absoluter oder relativer Positionierung für Wert eine numerische Angabe wie 4.5cm oder 300px notieren.
Seite Beschreibung

Breite

 width:Wert;
Für Wert eine numerische Angabe wie 120mm oder 580px oder auto (Voreinstellung) notieren.
Seite Beschreibung

Mindestbreite

 min-width:Wert;
Für Wert eine numerische Angabe wie 400px oder 3cm notieren.
Seite Beschreibung

Maximalbreite

 max-width:Wert;
Für Wert eine numerische Angabe wie 600px oder 3.8in notieren. Sinnvoll in Verbindung mit overflow:
Seite Beschreibung

Höhe

 height:Wert;
Für Wert eine numerische Angabe wie 300px oder 4cm oder auto (Voreinstellung) notieren.
Seite Beschreibung

Mindesthöhe

 min-height:Wert;
Für Wert eine numerische Angabe wie 35mm oder 500px notieren.
Seite Beschreibung

Maximalhöhe

 max-height:Wert;
Für Wert eine numerische Angabe wie 250px oder 1cm notieren. Sinnvoll in Verbindung mit overflow:
Seite Beschreibung

Elementbereich
mit übergroßem
Inhalt

 overflow:Wert;
Für Wert einen der folgenden Werte notieren:
visible = Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
hidden = Element wird abgeschnitten, wenn es die Grenzen überschreitet.
scroll = Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie in einem eingebetteten Frame-Fenster.
auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.
Seite Beschreibung

Schriftrichtung

 direction:Wert;
Für Wert einen der folgenden Werte notieren:
ltr = von links nach rechts.
rtl = von rechts nach links.
Seite Beschreibung

Textumfluss

 float:Wert;
Für Wert einen der folgenden Werte notieren:
left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
none = Kein Umfluss (Normaleinstellung).
Seite Beschreibung

Fortsetzung
bei Textumfluss

 clear:Wert;
Für Wert einen der folgenden Werte notieren:
left = Erzwingt bei float:left die Fortsetzung unterhalb.
right = Erzwingt bei float:right die Fortsetzung unterhalb.
both = Erzwingt in jedem Fall die Fortsetzung unterhalb.
none = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).
Seite Beschreibung

Schichtposition
bei Überlappung

 z-index:Wert;
Sinnvoll bei absolut positionierten Elementen, die sich überlappen. Für Wert eine Zahl notieren. Je höher die Zahl, desto weiter vorne das Element, je niedriger, desto weiter hinten das Element.
Seite Beschreibung

Anzeigeart
ohne Platzhalter

 display:Wert;
Für Wert einen der folgenden Werte notieren.
block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor.
marker = deklariert automatisch generierten Text für das Element.
run-in und compact = bewirken, dass das Element kontext-abhängig als Block-Element oder als Inline-Element dargestellt wird.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.

Ferner - für Tabellen aus Nicht-Tabellen-Elementen (z.B. bei XML):
table = Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML.
inline-table = Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline.
table-row = Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML.
table-row-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML.
table-header-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das thead-Element in HTML.
table-footer-group = Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tfoot-Element in HTML.
table-column = Das Element steht für eine Gruppe von Elementen, die eine Spalte der Tabelle bilden. Wirkt wie das col-Element in HTML.
table-column-group = Das Element steht für eine Gruppe von Elementen mit der Eigenschaft table-cell. Wirkt wie das colgroup-Element in HTML.
table-cell = Das Element steht für eine Tabellenzelle. Wirkt wie das td-Element in HTML (auch für th-Elemente).
table-caption = Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML.
Seite Beschreibung

Anzeigeart
mit Platzhalter

 visibility:Wert;
Für Wert einen der folgenden Werte notieren:
hidden = Der Inhalt des Element wird zunächst versteckt (nicht angezeigt).
visible = Der Inhalt des Element wird zunächst angezeigt (Normaleinstellung).
Seite Beschreibung

Anzeigebereich
eingrenzen

 clip:rect(Wert1 Wert2 Wert3 Wert4);
Für Wert1 Wert für "oben", gemessen an der oberen Elementgrenze, notieren, z.B. 0px
Für Wert2 Wert für "rechts", gemessen an der linken Elementgrenze, notieren, z.B. 130px
Für Wert3 Wert für "unten", gemessen an der oberen Elementgrenze, notieren, z.B. 130px
Für Wert4 Wert für "links", gemessen an der linken Elementgrenze, notieren, z.B. 0px
Seite Beschreibung

CSS-Eigenschaften: Anzeigefenster

Cursor

 cursor:Wert;
Zugeordnetes Element erhält beim Überfahren mit der Maus einen anderen Cursor. Für Wert einen der folgenden Werte notieren:
auto = automatischer Cursor (Normaleinstellung).
default = Plattformunabhängiger Standard-Cursor.
crosshair = Cursor in Form eines einfachen Fadenkreuzes.
pointer = Cursor in Form eines Zeigers.
move = Cursor in Form eines Kreuzes, das die Fähigkeit zum Bewegen des Elements signalisiert.
n-resize = Cursor in Form Pfeils, der nach oben zeigt (n = Norden).
ne-resize = Cursor in Form Pfeils, der nach rechts oben zeigt (ne = Nordost).
e-resize = Cursor in Form Pfeils, der nach rechts zeigt (e = Osten).
se-resize = Cursor in Form Pfeils, der nach rechts unten zeigt (se = Südost).
s-resize = Cursor in Form Pfeils, der nach unten zeigt (s = Süden).
sw-resize = Cursor in Form Pfeils, der nach links unten zeigt (sw = Südwest).
w-resize = Cursor in Form Pfeils, der nach links zeigt (w = Westen).
nw-resize = Cursor in Form Pfeils, der nach links oben zeigt (nw = Nordwest).
text = Cursor in einer Form, die normalen Text symbolisiert.
wait = Cursor in Form eines Symbols, das einen Wartezustand signalisiert.
help = Cursor in Form Symbols, das Hilfe zu dem Element signalisiert.
url([URI]) = Beliebiger Cursor, URI sollte eine GIF- oder JPG-Grafik sein.
Seite Beschreibung

Scrollbar
(Internet Explorer,
Konqueror und
Opera)

 scrollbar-base-color:Wert;
scrollbar-3dlight-color:Wert;
scrollbar-arrow-color:Wert;
scrollbar-darkshadow-color:Wert;
scrollbar-face-color:Wert;
scrollbar-highlight-color:Wert;
scrollbar-shadow-color:Wert;
scrollbar-track-color:Wert;
Anwendbar auf die Elemente body und textarea. Für Wert eine Farbangabe wie #0000CC, fuchsia oder rgb(50%,60%,80%) notieren.
Es bedeuten:
scrollbar-base-color = Basisfarbe der Scroll-Leiste
scrollbar-3dlight-color = Farbe für 3D-Effekte
scrollbar-arrow-color = Farbe für Verschiebepfeile
scrollbar-darkshadow-color = Farbe für Schatten
scrollbar-face-color = Farbe für Oberfläche
scrollbar-highlight-color = Farbe für oberen und linken Rand
scrollbar-shadow-color = Farbe für unteren und rechten Rand
scrollbar-track-color = Farbe für freibleibenden Verschiebeweg
Seite Beschreibung

nach oben
weiter | Seite Inhaltsverzeichnis
zurück | Seite Kurzreferenz: HTML
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


SELFHTML: Navigationshilfen / Häufig gestellte Fragen (FAQ)

SELFHTML

Häufig gestellte Fragen (FAQ)
Informationsseite

nach unten Hinweis
nach unten Liste der Fragen
nach unten

Hinweis

Lesen Sie sich diese Seite in Ruhe und ganz durch, wenn Sie bereits erste Erfahrungen beim Erstellen von Web-Seiten gewonnen haben und in jenes Stadium der Entwicklung eingetreten sind, in dem viele kleine und große Wünsche im Kopf entstehen. Solche Wünsche sind nämlich ganz normal. Einige dieser Wünsche und die entsprechenden Fragen sind "typisch" und werden immer wieder gestellt. Solche Fragen werden auf dieser Seite gesammelt. Die Sammlung erhebt keinerlei Anspruch auf Vollständigkeit. Es werden nicht alle erdenklichen Fragen gesammelt (dann wäre diese Seite wohl die umfangreichste der Welt), sondern nur wirklich häufig gestellte. Ob Ihre Fragen dabei sind, ist natürlich ein Glücksspiel.

Die Fragen werden mit kurzen Hinweisen, gegebenenfalls mit Beispielen und so weit wie möglich mit Verweisen auf Stellen innerhalb der vorliegenden Dokumentation beantwortet. Insofern eignet sich diese Seite zur Navigation, nämlich als "problemorientierte" Navigation.

Wenn Sie Fragen haben, die hier nicht aufgelistet sind, dann lesen Sie mal den Abschnitt über Seite Support. Dort erfahren Sie, wo und wie Sie Ihre Fragen im Internet stellen können.

Die Fragen sind bewusst nicht nach Sprachen und Technologien sortiert, sondern nach "Problemzonen". Denn nicht wenige der Antworten verweisen auf mehrere Technologien. Einige Fragen beantworten sich auch einfach dadurch, dass man einfach nicht wusste, dass zur Lösung eine andere Technologie erforderlich ist als die, von der man sich zunächst die Lösung erwartete.

Einige der "Wünsche" sind aus Anfängersicht vielleicht verständlich, doch in der Web-Praxis durchaus unerwünscht, weil Sie die Besucher Ihrer Seiten dadurch aller Wahrscheinlichkeit nach nur verärgern. Da es kaum Ihr Ziel sein kann, Ihre Besucher zu verärgern (die kommen nämlich nie wieder), werden Sie an den entsprechenden Stellen darauf hingewiesen.

Liste der Fragen

Allgemeines
nach unten Wie bekomme ich ein kleines Bild in die Adresszeile und in die Favoriten bzw. Lesezeichen?
nach unten Wie kann ich meinen (Code) Quelltext verstecken / schützen?
nach unten Wie kann ich die rechte Maustaste sperren, damit niemand meine Grafiken klauen kann?
nach unten Wie kann ich einen Passwortschutz für Seiten programmieren?
nach unten Kann ich die E-Mail-Adresse eines Seitenbesuchers irgendwie auslesen?
nach unten Wie kann ich einen Chat auf meiner Homepage anbieten?
nach unten Wie kann ich ein Gästebuch oder ein Forum auf meiner Homepage anbieten?
nach unten Wie kann ich eine automatisch ablaufende Präsentation aus mehreren Seiten erstellen?
nach unten Wie kann ich Besucher automatisch zu einer anderen Seite weiterleiten?
nach unten Wie kann ich Textdaten aus einer externen Datei dynamisch einbinden?
nach unten Wie kann ich erreichen, dass meine Seite im Vollbildmodus angezeigt wird?
nach unten Für welche Bildschirmauflösung/Fenstergröße sollte ich meine Web-Seiten schreiben?
nach unten Wie kann ich die automatischen Werbe-Banner von kostenlosen Homepage-Anbietern unterdrücken?
nach unten Warum funktionieren meine Verweise und Grafikreferenzen nach dem Hochladen auf den Server nicht mehr?
nach unten Wie kann ich erreichen, dass in der Adresszeile des Browsers die Startadresse meiner Seiten stehen bleibt?
Verweise/Links
nach unten Wie kann ich den gepünktelten Rahmen um aktivierte Verweise im Internet Explorer vermeiden?
nach unten Wie kann ich erreichen, dass Verweise nicht unterstrichen werden?
nach unten Wie kann ich ein Verweisziel in einem neuen Fenster öffnen?
nach unten Wie kann ich einen Hover-Effekt auch bei Netscape 4 erreichen?
nach unten Warum funktionieren die Hover-Effekte bei Verweisen nicht wie gewünscht?
nach unten Wie kann ich mit einem Verweis den Inhalt von zwei Frames gleichzeitig ändern?
nach unten Wie kann ich einen Formular-Button als anklickbaren Verweis verwenden?
nach unten Wie kann ich eine Auswahlliste so nutzen, dass sie ausführbare Verweise enthält?
nach unten Wie kann ich erreichen, dass ein Verweis die Back-Funktion im Browser bewirkt?
nach unten Wie kann ich eine Grafik als anklickbaren Verweis verwenden?
nach unten Wie funktioniert eine Navigationsleiste mit anklickbaren grafischen Buttons?
nach unten Wie kann ich für bestimmte Verweise andere als die dateiweiten Verweisfarben definieren?
nach unten Wie kann ich in der Statuszeile bei Verweisen einen eigenen Text anzeigen?
nach unten Wie kann ich mit einem Verweis ein Programm wie Word, Notepad usw. ausführen?
Text und Textformatierung
nach unten Wie kann ich Blocksatz für Text erzwingen?
nach unten Wie kann ich Darstellungsprobleme bei Blocksatz lösen?
nach unten Wie kann ich Text einrücken?
nach unten Wie kann ich Tabulatoren in HTML erzeugen?
nach unten Wie kann ich fremde Schriftzeichen einfügen?
Grafik
nach unten Wie erreiche ich, dass Grafiken beim Überfahren mit der Maus gehighlighted werden?
Positionierung von Inhalten / Seitenaufbau
nach unten Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?
nach unten Wie kann ich ein einzelnes Frame-Fenster in der Mitte des Anzeigefensters positionieren?
nach unten Wie kann ich verhindern, dass Browser meine Breitenangaben in Tabellen missachten?
nach unten Warum stellt Netscape 4 Frames nicht in exakter Größe dar?
nach unten Wie kann ich erreichen, dass Inhalte ohne Seitenrand links oben beginnen?
Anzeigeprobleme
nach unten Warum weicht die Darstellung im Internet Explorer ab?
nach unten Warum geht CSS unter Netscape 4 nicht?
nach unten Meine CSS-Angaben funktionieren nicht richtig - woran kann das liegen?
Fenster
nach unten Wie kann ich das Browser-Fenster auf eine bestimmte Größe ändern?
nach unten Wie kann ich ein Popup-Fenster in bestimmter Größe erzeugen?
nach unten Wie kann ich erreichen, dass ein Fenster immer im Vordergrund bleibt?

Wie bekomme ich ein kleines Bild in die Adresszeile und in die Favoriten bzw. Lesezeichen?

Dies ist ein kleines Extra-Feature, bekannt unter dem Namen Favicon, das mit der Produktversion 5.0 des Internet Explorers eingeführt und mittlerweile von vielen anderen Browserherstellern übernommen wurde. Angezeigt werden kann ein solches Favicon dann, wenn eine Seite mit einem Favicon verknüpft ist - im Internet Explorer jedoch nur dann, wenn ein Anwender die Seite in seine Favoriten mit aufnimmt. Es wird dann im Menü der Favoriten dem Eintrag vorangestellt, und beim Anzeigen der Seite(n) erscheint es in der Adresszeile des Browsers.

Das Favicon selbst ist eine kleine Grafik, die im Windows-Icon-Format (Dateien *.ico) vorliegen und eine Größe von entweder 32x32 oder von 16x16 Pixeln haben sollte. Um solche Grafiken zu erstellen, benötigen Sie ein Seite Grafikprogramm, das Grafiken im ICO-Format abspeichern kann.

Die Verknüpfung zwischen einer Web-Seite und einer Favicon-Grafik kann auf zwei Weisen hergestellt werden: entweder Sie legen die Grafik im Wurzelverzeichnis einer Domain unter dem festen Dateinamen favicon.ico (kleingeschrieben) ab, sodass der URI im Schema lautet: http://www.example.org/favicon.ico. In diesem Fall wird das Favicon automatisch erkannt, sobald Anwender irgendeine Seite des Web-Angebots unterhalb dieser Domain zu ihren Favoriten hinzufügen. Die andere Möglichkeit besteht darin, im Kopf einer HTML-Datei folgendes zu notieren:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Für Angaben im Attribut href gelten die Regeln zum Seite Referenzieren in HTML, der Seite Mime-Typ lautet image/x-icon oder (weniger verbreitet) image/vnd.microsoft.icon. Liegt das Favicon im Wurzelverzeichnis, ist es wie oben angeführt via /favicon.ico zu referenzieren. Der Name der Icon-Datei ist in diesem Fall egal, nur die Dateiendung muss für den Internet Explorer .ico lauten. Andere Browser akzeptieren auch davon abweichende Grafikformate.

Wie kann ich meinen (Code) Quelltext verstecken / schützen?

Das ist eine der Fragen, die gar nicht gerne gesehen werden. Und die Antwort vorab: es gibt keine wirksame Möglichkeit zu verhindern, dass Besucher Ihrer Web-Seite den Quelltext ansehen können.

Der Wunsch ist deshalb verpönt, weil das Web auf offen dokumentierten Klartextsprachen wie HTML, CSS oder XML basiert. Es gibt also nichts, was zu verheimlichen sinnvoll wäre, denn jeder, den es interessiert, kann sich das entsprechende Wissen im Netz aus Seite Dokumenten und Dokumentationen besorgen.

Ferner löst der Wunsch entnervte Reaktionen aus, weil er von Unkenntnis zeugt. Sie müssen nämlich bedenken, dass Ihre im Internet zur Verfügung gestellten Web-Seiten beim Aufrufen an den Rechner des Anwenders übertragen werden. Die Daten landen dort nicht nur im Anzeigefenster des Browsers, sondern der Browser speichert die Daten auch auf der Festplatte des Anwenders in seinem Cache-Speicher ab. Jeder Anwender kann mit etwas Kenntnis oder mit Hilfe spezieller "Cache-Explorer"-Programme die Daten durchforsten, die auf seiner Festplatte gelandet sind, und den darin gespeicherten Quelltext ansehen, kopieren usw.

Verständlich ist der Wunsch, dass Sie nicht von anderen Anwendern "beklaut" werden wollen, indem diese sich einfach Ihre mühsam erstellten nach unten Grafiken oder JavaScripts und dergleichen kopieren und von Ihrer Arbeit profitieren, ohne dass Sie etwas davon haben. Das Kopieren werden Sie wie gesagt kaum verhindern können. Aber Ihr geistiges Eigentum ist Ihr gutes Recht. Zwar sind Ihre Web-Seiten ohnehin durch das geltende Urheberrecht geschützt, doch um der Sache Nachdruck zu verleihen und bei potentiellen Dieben eine höhere Hemmschwelle zu erzeugen, können Sie Hinweise in den Quelltext einfügen. Notieren Sie beispielsweise einen Seite HTML-Kommentar weit oben in der Datei, z.B. direkt nach dem einleitenden <html>-Tag, und weisen Sie im Kommentartext darauf hin, was Sie nicht wünschen.

JavaScript-Quelltext können Sie z.B. in eine Seite externe JavaScript-Datei auslagern. So kommen zumindest unerfahrene Anwender nicht ganz so leicht an den Quelltext.

Wie kann ich die rechte Maustaste sperren, damit niemand meine Grafiken klauen kann?

Dies geht in die gleiche Richtung wie die Frage nach dem Schützen von Quelltext. Wenn der Anwender eine Grafik im Web-Browser sieht, braucht er sie gar nicht mehr mit dem Kontextmenü und "Speichern unter" auf seinen Rechner zu kopieren, weil sie längst dort gespeichert ist - nämlich im Browser-Cache. Die "Speichern-Unter"-Option im Kontextmenü ist für unbedarfte Anwender gedacht, die eine Grafik vielleicht noch mal in Ruhe offline betrachten möchten. Erfahrene Seitenbastler, die wirklich die Absicht haben, eine fremde Grafik für eigene Seiten zu verwenden, benötigen diese Option im Kontextmenü nicht. Machen Sie sich also nicht die Mühe. Auch in diesem Fall gilt: das Kopieren und Klauen können Sie nicht technisch verhindern, aber juristisch haben Sie ein Recht darauf, für Ihre selbst erstellten Grafiken den geistigen Urheberschutz in Anspruch zu nehmen. Ganz einfach ist es allerdings nicht, diesen juristischen Anspruch durchzusetzen. Denn es könnte ja Aussage gegen Aussage stehen, wenn der Gegner behauptet, es sei umgekehrt und Sie hätten von ihm geklaut. Deshalb gibt es die Möglichkeit, so genannte Wasserzeichen in Grafiken einzubauen. Dabei wird nach einem bestimmten Schlüssel ein Text in dem binären Bit-Salat einer Grafikdatei versteckt, z.B. ein Text, der Sie als Urheber der Grafik ausweist (das Verfahren wird als Steganografie bezeichnet). In der Grafik selbst sieht man nichts davon, doch im Zweifelsfall können Sie anhand des Wasserzeichens nachweisen, dass Sie der geistige Urheber der Grafik sind. Wasserzeichen können jedoch bei Grafikformaten, die mit Verlust komprimieren, wie etwa das im Web vielfach eingesetzte Seite JPEG-Format, teilweise verloren gehen bzw. unleserlich werden. Um sich näher über die Technik der Wasserzeichen zu informieren, suchen Sie mal in einer der bekannten großen Suchmaschinen nach Wasserzeichen oder Steganografie.

Wenn Sie das alles nicht befriedigt und Sie doch lieber die rechte Maustaste sperren wollen, dann können Sie Beispiel-Seite dieses Script verwenden. Um die Funktionsweise des Scripts zu verstehen, müssen Sie sich mit Kapitel JavaScript befassen, speziell mit Seite Ereignisüberwachung. Seien Sie sich aber im Klaren darüber, dass Sie den Anwender damit einschränken und sich eine solche Manupulation in modernen Browsern verhindern lässt. Denn das Kontextmenü der rechten Maustaste enthält schließlich noch andere wichtige Befehle, beispielsweise den zum Öffnen eines Verweises in einem neuen Fenster. Kein Anwender möchte in seinem Bewegungsspielraum eingeschränkt werden, Sie doch auch nicht, oder? Und schon gar nicht auf einer Web-Seite, die man freiwillig aufgerufen hat und die man jederzeit auf Nimmerwiedersehen verlassen kann.

Wie kann ich einen Passwortschutz für Seiten programmieren?

Es gibt verschiedene Möglichkeiten, Web-Seiten nur bestimmten, autorisierten Anwendern zugänglich zu machen. Die Lösungen sind unterschiedlich gut und sicher.

Die im Web üblichste und gegen normale Anwender ausreichende Methode, Web-Seiten zu schützen, ist diejenige, die auf HTTP-Ebene funktioniert. Der Mechanismus dazu ist im NCSA-Servermodell festgelegt und wird als HTTP Authentication bezeichnet (wobei diese Technik unter dem Namen htaccess bekannter ist). Viele Web-Server unterstützen diesen Mechanismus, z.B. der verbreitete Apache-Server. Beim ersten Zugriff auf eine Datei, die in einem geschützten Verzeichnis liegt, öffnet der Browser ein Dialogfenster, in dem der Anwender User-ID und Passwort eingeben muss. Nur wenn beide Angaben korrekt sind, kann er auf die Daten in dem Verzeichnis und auf Unterverzeichnisse zugreifen. Wie das funktioniert, wird im Abschnitt Seite Verzeichnisse und Dateien mit Passwort schützen beschrieben.

Ein weiterer, nicht selten gewählter Weg ist es, alle Anwender erst mal mit einem Kapitel Formular zu beglücken, in dem sie ein Seite Passwort eingeben müssen. Beim Seite Absenden des Formulars wird dann ein CGI-Script Kapitel aufgerufen, das Passwörter verwaltet und nachprüfen kann, ob das eingegebene Passwort registriert ist. Das ist zwar auch noch vergleichsweise sicher, aber nicht ganz so wirksam wie der htaccess-Schutz, weil jemand, der erst mal die "geheimen" Adressen kennt, diese jederzeit direkt aufrufen (und beispielsweise Links darauf setzen) kann. Das CGI-Script bekommt davon gar nichts mit. Es gibt Freeware-Scripts im Netz, meist in Perl geschrieben, die so einen Passwortschutz realisieren. Im Online-Angebot von SELFHTML aktuell finden Sie Links zu entsprechenden Quellen im Web:

Online-Kapitel Link-Verzeichnis: CGI/Perl
Online-Kapitel Link-Verzeichnis: PHP
Online-Kapitel Link-Verzeichnis: ASP

Suchen Sie in den Script-Sammlungen nach dem Stichwort Passwort bzw. bei englischsprachigen Sammlungen nach password.

Der dritte Weg zum Seitenschutz ist JavaScript. Auch dabei wird eine Seite mit einem Formular und Eingabemöglichkeit eines Passwortes vorgeschaltet. JavaScript überprüft die Eingabe und weist den Besucher dann entweder ab oder leitet ihn auf die geheimen Seiten. Eine beliebte Methode dabei ist es, einfach den Namen der "geheimen" Datei als Passwort zu verlangen und nach Eingabe des Passworts mit Seite location.href zu der eingegebenen Datei zu springen. Das ist allerdings ein reiner Placebo-Effekt. Es gibt auch JavaScripts, die mit einem richtigen Verschlüsselungs-Algorithmus arbeiten, der nicht ohne weiteres durchschaubar ist. Beispiel-Seite Dieses Script ist ein Beispiel dafür. Verwenden Sie die Beispieldatei zunächst dazu, um Passwörter Ihrer Wahl einzugeben. Das Script leitet Sie dann auf (noch nicht) existierende Dateinamen weiter, die nach seinem Algorithmus auf das eingegebene Passwort passen. Wenn Sie dann Seiten mit dem entsprechenden Dateinamen erstellen, findet das Script die entsprechende Seite, wenn das Passwort korrekt eingegeben wird. Auch in diesem Fall sind also Dateinamen und Passwort aneinander gekoppelt. Solche Verfahren erlauben keine benutzerspezifischen Passwörter. Das ist mit JavaScript auch gar nicht möglich, da JavaScript im Browser des Anwenders abläuft. Eine zentrale Benutzerverwaltung ist aber nur server-seitig möglich.

JavaScript-Lösungen sind also vergleichsweise primitiv und eher eine Notlösung für Anbieter, die ihre Homepages bei Billiganbietern haben, wo kein htaccess und nicht mal CGI zur Verfügung steht. Auch bei den JavaScript-Lösungen gilt: wer die geheimen Dateinamen erst mal kennt, kommt auch auf direktem Wege dorthin.

Eine ganz schlichte Lösung für Leute, die sich keine Probleme machen wollen, wo keine sind, gibt es aber auch: stellen Sie Seiten unverlinkt ins Netz und teilen Sie nur solchen Personen die Adresse mit, die diese Seiten sehen können sollen. Notieren Sie den Pfad nicht in einer Seite robots.txt-Datei, da diese für jedermann sichtbar ist. Verbieten Sie Suchmaschinen besser mittels Seite meta-Element die Aufnahme in den Index. Allerdings bietet auch diese Methode keinen echten Schutz, da sich Besucher, denen die Adresse bekannt ist nicht authentifizieren müssen.

Kann ich die E-Mail-Adresse eines Seitenbesuchers irgendwie auslesen?

Nein, weder mit JavaScript noch mit CGI/Perl oder vergleichbaren Technologien. Jeder moderne Web-Browser verhindert das. Denn wenn so etwas möglich wäre, könnte beispielsweise jedes häufig aufgerufene CGI-Script (Counter, Suchmaschine usw.) nebenbei eine E-Mail-Adressensammlung pflegen. Und E-Mail-Adressen als Massenware lassen sich an Spammer verkaufen, also an jenes Pack von Mensch, das Tag für Tag millionenfach sinnlosen Werbemüll durchs Netz an E-Mail-Adressen schickt und damit das Netz verstopft.

Was Sie ermitteln können, sind die Seite IP-Adressen der Host-Rechner Ihrer Seitenbesucher. Ein aufgerufenes CGI-Script kann beispielsweise mit den Seite CGI-Umgebungsvariablen REMOTE_ADDR und REMOTE_HOST entsprechende Daten ermitteln. Über einen englischsprachige Seite Whois-Service lässt sich dann der Zugangsprovider der entsprechenden Person ermitteln und kontaktieren, z.B. bei begründbarem Verdacht auf einen kriminellen Anwender.

Wie kann ich einen Chat auf meiner Homepage anbieten?

Dabei gibt es zwei verbreitete Möglichkeiten: mit Hilfe eines in Seite HTML eingebundenen Java-Applets, oder in Form eines CGI-basierten Chats.

Bei Java-Applets, die einen Chat realisieren, muss man nochmals unterscheiden zwischen solchen, die ein eigenes, proprietäres Internet-Protokoll zur Datenübertragung verwenden, und solchen, die einfach einen java-basierten Seite IRC-Client darstellen. Java-Anwendungen, die ein proprietäres Protokoll verwenden, bestehen aus zwei Teilen: aus dem Java-Applet, das in HTML eingebunden wird (Client), und aus einem Java-Programm, dass einen zugehörigen Server darstellt. Auf deutschsprachige Seite http://java.seite.net/chat/ finden Sie eine Beschreibung, wie man eine solche Client-Server-Anwendung in Java selber realisieren kann. Wenn Sie sich nicht in der Lage fühlen, so etwas selber zu programmieren, dann können Sie auch auf vorhandene Seite Web-Services zurückgreifen. Der bekannteste Anbieter für java-basierten Chat mit eigenem System ist deutschsprachige Seite SpinChat. Dort können Sie sich auch den HTML-Quelltext zum Einbau eines eigenen Chats holen. Der Chat gehört dann zum Verbundsystem des Anbieters Spin.

Java-Applets, die einen echten IRC-Client darstellen, erlauben dagegen die Teilnahme am weltweiten IRC-Netz. Zigtausende von Chaträumen auf vielen verschiedenen IRC-Servern sind damit erreichbar. Suchen Sie in einer großen Suchmaschine nach java applet irc client, um solche Java-Applets für die eigene Homepage ausfindig zu machen.

CGI-basierte Chats nutzen die Kommunikation zwischen Browser und Server über das HTTP-Protokoll. Das HTTP-Protokoll hat allerdings Eigenschaften, die es nicht unbedingt für Chat-Anwendungen qualifizieren. Im Gegensatz zum IRC-Protokoll halten Client und Server nicht ständig Verbindung. Eine Kommunikation findet nur statt, wenn z.B der Browser vom Server Daten anfordert. Die meisten CGI-basierten Chats bauen daher in den HTML-Code, der an den Browser gesendet wird, die Seite Meta-Angabe zum Automatischen Weiterleiten ein, um das verarbeitende CGI-Script nach ein paar Sekunden erneut aufzurufen, das dann wieder den aktuellen "Zustand" des Chat-Raums an den Browser sendet, inklusive der eingebauten Meta-Angabe für den nächsten Aufruf. Ein Echtzeit-Chat wie bei IRC ist damit aber nicht möglich. Ein Vorteil der CGI-basierten Chats ist dagegen jedoch, dass beim Anwender keine zusätzlichen Voraussetzungen wie aktiviertes Java erforderlich sind. Im Online-Angebot von SELFHTML aktuell finden Sie Links zu CGI-Script-Sammlungen im Web, wo Sie unter anderem auch CGI-basierte Chats finden:

Online-Kapitel Link-Verzeichnis: CGI/Perl

Suchen Sie in den Script-Sammlungen nach dem Stichwort Chat.

Zum Betrieb eines CGI/Perl-basierten Chats benötigen Sie eine CGI-Schnittstelle und den Perl-Interpreter. Fragen Sie gegebenenfalls den Provider, wo Sie Ihre Web-Seiten hosten, danach!

Wie kann ich ein Gästebuch oder ein Forum auf meiner Homepage anbieten?

Gästebücher und Foren sind typische Anwendungen, die mit Hilfe von Seite CGI/Perl oder Seite PHP realisiert werden.

Die reizvollste, aber auch schwierigste Variante ist, sich eine eigene Lösung von Grund auf zu programmieren. Dazu sind jedoch gute bis sehr gute Kenntnisse in Programmiersprachen wie Perl oder PHP erforderlich.

Die zweite Möglichkeit, eine etwas mildere Variante der ersten, ist die, ein vorhandenes Script einzusetzen und anzupassen. Es gibt viele frei verfügbare Scripts, die Sie sich downloaden und für Ihre Zwecke anpassen können. Auch dazu sind jedoch zumindest Grundkenntnisse in den verwendeten Programmiersprachen erforderlich. Im Online-Angebot von SELFHTML aktuell finden Sie Links zu CGI-Script-Sammlungen im Web, wo Sie unter anderem auch CGI-basierte Chats finden:

Online-Kapitel Link-Verzeichnis: CGI/Perl

Suchen Sie in den Script-Sammlungen nach den Stichwörtern Gästebuch (bei englischsprachigen Sammlungen guestbook) bzw. Forum oder message board.

Zum Betrieb von CGI/Perl-basierten Gästebüchern oder Foren benötigen Sie eine CGI-Schnittstelle und den Perl-Interpreter, bei PHP ein auf dem Server installiertes PHP. Fragen Sie gegebenenfalls den Provider, wo Sie Ihre Web-Seiten hosten, danach!

Als dritte Möglichkeit kommen Seite CGI-Services für eigene dynamische Web-Seiten in Frage. Dabei können Sie kostenlos oder gegen geringe Gebühr ein Forum oder Gästebuch von einem Fremdanbieter in Anspruch nehmen. Meistens besteht dabei die Möglichkeit, die Optik der Gästebücher oder Foren an das Layout der eigenen Web-Seiten zumindest grob anzupassen. Die Daten werden auf dem Server des Fremdanbieters gespeichert. Sie selber haben also keinen direkten Zugriff darauf. In der Regel bieten solche Anbieter jedoch einen Service-Bereich an, wo Sie mit Hilfe von Formularen Ihre Daten auf dem fremden Server verwalten können, um z.B. unliebsame Einträge zu löschen usw.

Diese Lösung bietet sich für Homepage-Anbieter an, denen keine CGI-Schnittstelle zur Verfügung steht.

Wie kann ich eine automatisch ablaufende Präsentation aus mehreren Seiten erstellen?

Vorneweg: im Web wird vom Anwender alles, was er nicht selber unter Kontrolle hat, als negativ empfunden. Dort sollten Sie deshalb besser auf solche Dinge verzichten und stattdessen eine Seite Guided Tour anbieten, bei der jede Seite, die zu der Tour gehört, am Ende einen Kapitel Verweis zur nächsten Seite der Tour sowie einen Verweis zur Startseite enthält. Interessant sind automatisch ablaufende Präsentationen dagegen etwa auf Messen. Dabei können Sie auch Endlosschleifen erzeugen, indem einfach die letzte Seite der Präsentation wieder die erste aufruft.

Zum Erstellen einer solchen Präsentation benötigen Sie verschiedene HTML-Dateien, von denen jede einen Mechanismus enthält, mit dessen Hilfe eine bestimmte andere Seite nach Ablauf einer bestimmten Zeit, z.B. nach 5 Sekunden, automatisch aufgerufen wird. Zwei Möglichkeiten stehen dabei zur Verfügung: bei der einen verwenden Sie die Seite Meta-Angabe zum Automatischen Weiterleiten. Diese Angabe wird von den verbreiteten Browser auch lokal, also ohne Server-Kommunikation, interpretiert. Die zweite Möglichkeit verwendet JavaScript. Mit der JavaScript-Methode Seite setTimeout() in Verbindung mit dem Event-Handler Seite onload im einleitenden <body>-Tag können Sie nach Ablauf von z.B. 5000 Millisekunden (= 5 Sekunden) eine selbstgeschriebene Seite Funktion aufrufen, die z.B. in einem JavaScript-Bereich im Dateikopf notiert sein kann. Es genügt, wenn diese Funktion eine einzige Anweisung enthält, nämlich den Aufruf einer anderen Adresse mit der Objekteigenschaft Seite location.href.

Jede an der Präsentation beteiligte HTML-Datei muss die Meta-Angabe oder den entsprechenden JavaScript-Code enthalten. Auf diese Weise wird die Kette der automatischen Aufrufe erzeugt.

Wie kann ich Besucher automatisch zu einer anderen Seite weiterleiten?

Dabei bestehen die gleichen Möglichkeiten wie im Zusammenhang mit der nach oben automatisch ablaufenden Präsentation beschrieben. Der einzige Unterschied ist, dass Sie die Angaben nur auf einer Seite notieren müssen und nicht auf mehreren. Bieten Sie aber auf der Weiterleitungsseite auf jeden Fall auch einen Verweis zu der Zieladresse an, damit auch solche Anwender dorthin finden, bei denen die Meta-Angabe oder das JavaScript zur Weiterleitung nicht funktioniert.

Für die automatische Weiterleitung gibt es daneben allerdings server-seitige Lösungen, die letztlich sauberer sind. Denn erstens erfordern sie keine Browser-Fähigkeiten wie das Interpretieren einer Meta-Angabe oder eines Java-Scripts; und zweitens muss erst gar nicht die Weiterleitungsseite angezeigt werden. Am Bildschirm des Anwenders erscheint ohne Umweg die Zieladresse.

So lassen sich Weiterleitungen innerhalb eines Web-Angebots und auf dem gleichen Server-Rechner beispielsweise durch symbolische Links erreichen. Anstelle der "alten Datei" wird ein gleichnamiger symbolischer Link platziert, der auf Betriebssystemebene zu einer anderen Datei führt. Dazu müssen Sie allerdings auf Betriebssystemebene am Server arbeiten können, beispielsweise mit Seite Telnet/SSH.

Server-seitige Redirects auf andere Domain-Adressen können Sie mit Hilfe einer Seite .htaccess-Datei realisieren. Legen Sie im Web-Seiten-Wurzelverzeichnis der alten Domain eine solche Datei ab, die eine Zeile wie diese enthält (Beispiel):

Redirect   /   http://www.example.org/

Handelt es sich um eine permanente Umleitung, lautet die Direktive wie folgt:

Redirect permanent   /   http://www.example.org/

In den oben angeführten Beispielen werden Anfragen für die aktuelle Domain umgeleitet auf http://www.example.org/ Wenn Sie sich an solche Dinge nicht herantrauen oder die Lösung mit .htaccess bei Ihnen nicht funktioniert, fragen Sie den Provider der alten Adresse. Er kann eine server-seitige Weiterleitung für Sie einrichten.

Wie kann ich Textdaten aus einer externen Datei dynamisch einbinden?

Dazu gibt es verschiedene Möglichkeiten, zum Beispiel Seite Eingebettete Frames. Einbinden können Sie damit neben anderen HTML-Dateien z.B. auch reine Textdateien *.txt, Grafiken oder dynamische Quellen wie den Aufruf eines CGI-Scripts, das aktuelle Daten ausgibt.

Durch die Angabe frameborder="no" im einleitenden <iframe>-Tag können Sie erreichen, dass das Frame-Fenster nahtlos in die Seite eingebettet wird. Mit scrolling="no" können Sie zusätzlich auch noch die Scrollbalken unterdrücken, sofern Sie diese nicht benötigen. Nachteil der eingebetteten Frames ist, dass Netscape 4.x diese noch nicht kennt.

Alternativ können Sie Seite Datendateien als Objekt einbinden. Mit data="datei.htm" oder data="datei.txt" lassen sich auch Textdaten als Objekt einbinden. Im Attribut type ist dann text/html bzw. text/plain anzugeben. Im Grunde genommen ist der Effekt ganz ähnlich wie eingebetteten Frames.

Eine weitere Möglichkeit ist die Seite Datenanbindung (Microsoft). Damit lassen sich Daten kontrolliert einbinden, z.B. datensatzweise aus einer kommabegrenzten Datei. Dies funktioniert allerdings nur im Internet Explorer.

Mit Seite Server Side Includes lassen sich externe Daten server-seitig einbinden. Das hat den Vorteil, dass es mit jedem Browser funktioniert, da die Daten schon eingefügt werden, bevor das Ganze überhaupt beim Browser ankommt. Es funktioniert jedoch nur in HTTP-Umgebung und nur dann, wenn der Web-Server die Technik der Server Side Includes unterstützt.

Mit Seite PHP lassen sich externe Daten sehr einfach einbinden, da PHP ja innerhalb von HTML notiert wird. Ähnlich wie Server Side Includes funktioniert auch PHP mit jedem Browser, da die Daten bereits server-seitig eingefügt werden. Es funktioniert jedoch ebenfalls nur in HTTP-Umgebung und nur dann, wenn PHP installiert ist und vom Web-Server unterstützt wird. Mit einer PHP-Anweisung wie require ('datei.txt'); können Sie eine externe Textdatei einbinden.

Per JavaScript kann man eigentlich keine Dateien lesen. Über die Java-Schnittstelle von JavaScript ist dies über Umwege allerdings doch möglich. Auch so können natürlich keine Dateien vom Rechner des Anwenders gelesen werden, aber zumindest Dateien, die zum Web-Projekt gehören, und darum geht es ja in diesem Fall. Zu diesem Thema gibt es im Online-Angebot von SELFHTML aktuell einen Artikel Online-Seite Auf Dateien mit JavaScript zugreifen von Daniel Thoma.

Wie kann ich erreichen, dass meine Seite im Vollbildmodus angezeigt wird?

Es ist nicht möglich, dass eine Seite eigenständig in den Vollbildmodus wechselt. Bei den gängigen Browsern kann allerdings der Anwender selbstständig in den Vollbild-Modus wechseln, indem er die Taste F11 drückt. Die beste Methode ist letztlich, den Anwender freundlich dazu zu bitten.

Lediglich der Internet Explorer ab Version 5.0 bietet eine Möglichkeit, ein neues Fenster im Vollbildmodus zu öffnen. Dazu öffnen Sie mit der JavaScript-Methode Seite window.open() ein neues Fenster. Um den Popup-Blocker zu umgehen, sollte dies nicht automatisch geschehen, sondern z.B. bei einem Klick auf einen Button. Bei den Fenstereigenschaften geben Sie fullscreen=yes an. Dann wird das Fenster im Vollbildmodus geöffnet.

Was unter dem Vollbildmodus zu verstehen ist, variiert je nach Internet-Explorer-Version. Vor dem Internet Explorer 6 für Windows XP mit dem Service Pack 2 nimmt die Webseite den gesamten Bildschirm ein, ohne dass irgendwelche Fenster-Bedienelemente wie das Menü und die Symbolleisten zu sehen sind. Der Browser bietet dann keine Möglichkeit mehr an, das Fenster zu schließen. Nur die Tastenkombination Alt + F4 funktioniert noch. Bieten Sie daher auf Seiten, die in einem Vollbild-Fenster angezeigt werden, eine Möglichkeit an, das Fenster zu schließen. Das geht beispielsweise so:

<a href="oeffnende_seite.htm" onclick="self.close(); return false;">Fenster schließen</a>

Seit dem besagten Service Pack wird das neue Fenster aus Sicherheitsgründen lediglich maximiert. Die Titel- und die Adressleiste und auch die Statusleiste bleiben sichtbar. Dies wird auch für den kommenden Internet Explorer 7 gelten und ist nicht umgehbar.

Beachten Sie, dass es die meisten Anwender als unangenehm empfinden, wenn eine Web-Seite sich unaufgefordert im Vollbildmodus öffnet.

Für welche Bildschirmauflösung/Fenstergröße sollte ich meine Web-Seiten schreiben?

Die Antwort sollte sich von selbst verstehen: für jede Fenstergröße! Wenn Sie ganz normalen Fließtext mit HTML erstellen und diesen gerne auch mit Stylesheets formatieren, schreiben Sie zunächst einmal für jede beliebige Fenstergröße. Denn der Browser bricht den Text entsprechend der Fenstergröße automatisch um. Die Probleme entstehen erst dann, wenn von vorneherein mit Seite Tabellenlayouts oder Kapitel Frames gearbeitet wird und dabei feste Breiten mit Pixelangaben erzwungen werden.

Bedenken Sie, dass Bildschirmauflösung und Größe des Browser-Fensters nicht unbedingt viel miteinander zu tun haben. Denn Anwender mit großen Bildschirmauflösungen wie 1600 × 1200 fahren kaum eine Anwendung im Vollbildmodus, auch den Browser nicht. Das heißt, das Browser-Fenster hat dort meistens eine sehr zufällige und überhaupt nicht berechenbare Größe. Bei Anwendern mit kleineren Bildschirmauflösungen wie 800 × 600 oder auch 1024 × 768 ist zwar eher damit zu rechnen, dass der Browser im Vollbildmodus gefahren wird. Doch haben viele Anwender Programme offen, die an Randbezirken der Bildschirmfläche fest positioniert sind, wie z.B. der beliebte Instant Messenger ICQ, oder es wird im Browser links z.B. ein Navigationsfenster mit Bookmarks angezeigt.

So gesehen hat es also überhaupt keinen Sinn, das Seiten-Layout von einer bestimmten Bildschirmauflösung abhängig zu machen. Die ganze Frage ist falsch gestellt. Bemühen Sie sich einfach um ein Layout, das sich besonders in der Breite den Gegebenheiten anpasst. Bei Tabellenlayouts ist dies beispielsweise mit Seite Breitenangaben in Prozent statt in Pixeln möglich. Wenn Sie feste Breiten erzwingen wollen, dann möglichst nur für die erste, linke Tabellen- oder Frame-Spalte. Ein paar hundert Pixel Breite dürfen Sie schon erwarten, denn irgendwo ist natürlich auch eine Untergrenze der Praktikabilität. Wenn Sie also links eine gewisse Breite erzwingen und den Rest der gegebenen Breite überlassen, dann ist dagegen nichts einzuwenden. Für links angesiedelte Navigationsleisten sollten allerdings umgerechnet nicht viel mehr als 200 bis 250 Pixel erzwungene Breite spendiert werden, ansonsten könnte der eigentliche Inhalt bei wenig Anzeigebreite bereits zu sehr in eine enge Restspalte gequetscht werden. Bei drei- und mehrspaltigen Layouts sollte auf jeden Fall eine Spalte keine feste Breite haben, sondern flexibel bleiben.

Wie kann ich die automatischen Werbe-Banner von kostenlosen Homepage-Anbietern unterdrücken?

Mit dieser Frage werden Sie Empörung ernten - selbst unter denen, die Werbe-Banner ansonsten selber nur als lästig empfinden. Der Grund ist einfach, dass Sie kein Recht dazu haben. Sie nehmen einen kostenlosen Dienst in Anspruch. Dafür können Sie nun mal nicht das Gleiche haben wie für Geld. Anbieter kostenloser Homepages finanzieren sich nun mal häufig über Werbung, also würden Sie einen solchen Anbieter seiner Ertragsquelle berauben, wenn Sie die Werbe-Banner unterdrücken würden. Es gibt auch gar keine Möglichkeit, solche Banner oder automatischen Popup-Fenster zu unterdrücken, weil sie server-seitig eingefügt werden, bevor die Web-Seite an den Browser übertragen wird. Werbefinanzierte Angebote sind somit nicht kostenlos - den Preis bezahlen Ihre Besucher.

Warum funktionieren meine Verweise und Grafikreferenzen nach dem Hochladen auf den Server nicht mehr?

Vermutlich haben Sie Ihre Web-Seiten und Grafiken unter einem Betriebssystem wie MS Windows erstellt, wo Groß- und Kleinschreibung von Dateinamen keine Rolle spielt. Auf typischen Server-Betriebssystemen wie Linux dagegen wird streng zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie also beispielsweise <a href="datei.htm"> notiert haben und die Datei heißt in Wirklichkeit Datei.htm, dann funktioniert der Verweis unter Windows, aber unter Linux funktioniert er nicht. Ebenso ist es bei Grafik- und anderen Referenzen auf externe Dateien. Achten Sie deshalb schon beim Erstellen der Dateien darauf, die Dateien exakt so abzuspeichern, wie Sie es in den Referenzen darauf angeben. Am sichersten ist es, wenn Sie einfach alles klein schreiben - also sowohl alle vergebenen Dateinamen als auch die entsprechenden Referenzen in HTML, CSS oder JavaScript und auf Leerzeichen in Dateinamen verzichten. Leider gibt es noch einige ältere Windows-Programme, die sich nicht daran halten und beispielsweise immer den ersten Buchstaben des Dateinamens groß machen. Stellen Sie deshalb auf Datei-Ebene nochmals sicher, dass die Dateinamen mit den Referenzen übereinstimmen, und benennen Sie anders geschriebene Dateinamen gegebenenfalls noch mal um. Das Gleiche gilt auch für Verzeichnisnamen, falls Sie innerhalb Ihres Web-Projekts mit Unterverzeichnissen arbeiten.

Wie kann ich erreichen, dass in der Adresszeile des Browsers die Startadresse meiner Seiten stehenbleibt?

Bei diesem Wunsch müssen Sie sich zunächst einmal die Gegenfrage gefallen lassen, was Ihnen so unbehaglich ist an der Vorstellung, dass Anwender Ihre vergebenen Dateinamen sehen? Das ist etwas völlig Normales und jeder Web-Anwender ist daran gewöhnt. Leider ist dies wieder ein typischer Fall, wo um einer Zwangsvorstellung willen eine von vielen Anwendern als nützlich empfundene Browser-Funktion unterdrückt werden soll. Verzichten Sie also lieber auf diese Zwangsvorstellung.

Die sachliche Antwort auf die Frage ist, Kapitel Frames zu verwenden. Wenn Sie als Startseite gleich ein Frameset laden, bleibt während der Navigation innerhalb des Framesets in der Adresszeile des Browsers stets die Adresse der zuerst aufgerufenen Seite stehen. Sie müssen sich allerdings im Klaren darüber sein, dass diese "Lösung" ernstzunehmende Nachteile hat. Während Sie technische versierte Anwender nicht davon abhalten, die Adressen Ihrer Unterseiten in Erfahrung zu bringen, nehmen Sie den Durchschnitsbesuchern die Möglichkeit, Ihre Unterseiten zu verlinken, deren Adressen an Freunde zu senden usw. Dadurch schaden Sie letztlich nur der Bekanntheit und Beliebtheit Ihrer Webseite.

Wie kann ich den gepünktelten Rahmen um aktivierte Verweise im Internet Explorer vermeiden?

Das können Sie verhindern, indem Sie im Verweis notieren:

<a href="ziel.htm" onfocus="if (this.blur) this.blur()">Text</a>

Beachten Sie jedoch, dass Sie dem Anwender damit die Möglichkeit nehmen, mit der Tabulator-Taste auf diesen Verweis zu positionieren und diesen dann mit der Return-Taste auszuführen. Es gibt dagegen kaum einen Anwender, der den gepünktelten Rahmen als unschön oder als Minuspunkt fürs Layout empfindet. Opfern Sie nicht ohne Not die Navigationsmöglichkeiten des Anwenders der Zwangsvorstellung von einem "makellosen" Aussehen Ihrer Web-Seiten!

Wie kann ich erreichen, dass Verweise nicht unterstrichen werden?

Das funktioniert mit Hilfe von Stylesheets und wird im Abschnitt Seite Verweise optisch gestalten mit CSS beschrieben. Beachten Sie jedoch, dass Sie damit ein wichtiges Erkennungsmerkmal von Verweisen verloren geht.

Wie kann ich ein Verweisziel in einem neuen Fenster öffnen?

Dazu notieren Sie im einleitenden Verweis-Tag zusätzlich zum href-Attribut target="_blank". Beschrieben wird dies im Abschnitt Seite Zielfenster für Verweise bestimmen. Die Größe des neuen Fensters können Sie dabei allerdings nicht beeinflussen. Falls Sie das wollen, z.B. weil das neue Fenster als kleines Popup-Fenster erscheinen soll, dann müssen Sie mit JavaScript arbeiten, und zwar mit der Methode Seite window.open(). Dabei können Sie verschiedene Optionen zum Aussehen und zur Größe des Fensters bestimmen.

Beispiel-Seite Anzeigebeispiel: So sieht's aus

Das Beispiel zeigt eine HTML-Datei mit einem Verweis, bei dessen Anklicken sich das Beispiel nochmals in einem ein Popup-Fenster öffnet.

Wie kann ich einen Hover-Effekt auch bei Netscape 4 erreichen?

Für Netscape 4.x lässt sich mit etwas Aufwand eine Lösung in JavaScript programmieren. Im Online-Angebot von SELFHTML aktuell stellt ein Artikel diese Möglichkeit vor: Online-Seite Positionierung von Layern (DHTML) von Andreas Zierhut. Bei Netscape ab Version 6.0 funktioniert der Hover-Effekt mit CSS auf Anhieb problemlos.

Warum funktionieren die Hover-Effekte bei Verweisen nicht wie gewünscht?

Bei den Hover-Effekten kommt es auf die richtige Reihenfolge an, in der die entsprechenden Seite Pseudoklassen für Verweise notiert werden. Probieren Sie folgende Reihenfolge:

a:link    { /* Deklarationen */ }
a:visited { /* Deklarationen */ }
a:focus   { /* Deklarationen */ }
a:hover   { /* Deklarationen */ }
a:active  { /* Deklarationen */ }

Wie kann ich mit einem Verweis den Inhalt von zwei Frames gleichzeitig ändern?

Dies ist mit HTML alleine nur lösbar, wenn Sie für jede mögliche Frame-Kombination jeweils eine Datei mit passenden Frameset-Definitionen erstellen - deshalb suchen Anfänger oft an der falschen Stelle und stellen die entsprechende Frage dann gerne in Foren und Newsgroups, wo die Frage jedoch meistens genervte Reaktionen auslöst. Um mit einem Verweis den Inhalt von zwei anderen Frame-Fenstern zu ändern, ist ein JavaScript erforderlich. Ein solches Script wird im Abschnitt Seite Zwei Frames gleichzeitig ändern vorgestellt.

Wie kann ich einen Formular-Button als anklickbaren Verweis verwenden?

Dazu müssen Sie einen Seite Absende-Button innerhalb eines Formulares definieren. Im action-Attribut des Formulars notieren Sie die URL des Ziels. Das Konstrukt sieht dann beispielsweise so aus:

<form action="../index.htm">
<input type="submit" value="Buttontext">
</form>

Bedenken Sie aber, dass das Aussehen solcher Buttons ziemlich stark vom Browser und dem verwendeten Betriebssystem des Besuchers beeinflusst wird und nur in gewissen Grenzen mit CSS formatiert werden kann. Der Button wird deshalb vielleicht gar nicht mehr in ihre Seitengestaltung passen, wenn er anderswo angezeigt wird. Es ist ratsamer, sich stattdessen einen normalen Link mit CSS passend zu formatieren oder eine Grafik in Form des Buttons zu verwenden. Grafik und normaler Link lassen sich außerdem mit CSS auch kombinieren (die Grafik als Hintergrundbild verwenden).

Wie kann ich eine Auswahlliste so nutzen, dass sie ausführbare Verweise enthält?

Mit Hilfe eines JavaScripts lassen sich Seite Auswahllisten so umfunktionieren, dass sie wie Verweislisten wirken. Die Seite SELFHTML-Quickbar ist so eine Anwendung. Wie das genau funktioniert, wird im Kapitel über JavaScript im Anwendungsbeispiel Seite Verweisliste als Auswahlliste beschrieben.

Wie kann ich erreichen, dass ein Verweis die Back-Funktion im Browser bewirkt?

Dazu ist ein Stückchen JavaScript-Code im Verweis erforderlich. Der Verweis sieht so aus:

<a href="javascript:history.back()">Verweistext</a>

Dazu wird beim href-Attribut das Pseudo-Protokoll Seite javascript: notiert. Daran anschließend kann JavaScript-Code notiert werden. in diesem Fall wird mit Hilfe der Methode Seite history.back() die Back-Funktion im Browser angesprochen.

Wie kann ich eine Grafik als anklickbaren Verweis verwenden?

Dazu notieren Sie einfach einen normalen Seite Verweis. Anstelle des Verweistextes, also als Inhalt zwischen dem einleitenden <a href=> und dem abschließenden </a>, notieren Sie eine Seite Grafikreferenz. Das Ganze ist auch noch mal im Abschnitt Seite Grafiken als Verweise beschrieben.

Wie funktioniert eine Navigationsleiste mit anklickbaren grafischen Buttons?

Dazu benötigen Sie zunächst gleichartige Grafiken, die eine Schaltfläche darstellen. Im Abschnitt Seite Buttons (Schaltflächen) finden Sie Beispiele solcher Grafiken. Die Grafiken können Sie mit einem geeigneten Seite Grafikprogramm so bearbeiten, dass jeder Button eine individuelle Beschriftung erhält, also beispielsweise Home, Infos, Kontakt, Gästebuch usw. Die Grafiken speichern Sie am besten unter Dateinamen ab, welche die Serie erkennen lassen, z.B. btn_home.gif, btn_infos.gif, btn_kontakt.gif, btn_gbuch.gif. Die erzeugten Grafiken binden Sie dann in einer HTML-Datei so ein, dass ein Navigationsleisten-Effekt entsteht. Sehr häufig werden zu diesem Zweck Seite Tabellenlayouts verwendet, die Umsetzung ist jedoch auch problemlos mittels einer per CSS formatierten Seite HTML-Liste möglich (siehe Quelltext-Beispiel). Eine zusätzliche Möglichkeit, solche Navigationsleisten einzusetzen, bieten Kapitel Frames. Ein Frame-Fenster kann dann die Navigationsleiste enthalten, während das andere die Informationen anzeigt.

<ul>
 <li><a href="index.htm"><img src="btn_home.gif" alt="Home"></a></li>
 <li><a href="infos.htm"><img src="btn_infos.gif" alt="Infos"></a></li>
 <li><a href="kontakt.htm"><img src="btn_kontakt.gif" alt="Kontakt"></a></li>
 <li><a href="gbook.htm"><img src="btn_gbook.gif" alt="Gästebuch"></a></li>
</ul>

Wie kann ich für bestimmte Verweise andere als die dateiweiten Verweisfarben definieren?

Das geht mit Stylesheets. Dazu definieren Sie verschiedene zentrale Seite Klassen für Verweise. Das sieht beispielsweise so aus:

<style type="text/css">
a.type1:link { color:#FF0000; }
a.type2:link { color:#FF00FF; }
a.type1:visited { color:#990000; }
a.type2:visited { color:#990099; }
a.type1:active { color:#000000; }
a.type2:active { color:#000000; }
</style>

Dabei sind type1 und type2 die Klassennamen. Die Syntax mit den Doppelpunkten ist die für Seite Pseudoelemente und Pseudoklassen. In HTML können Sie die verschiedenen Klassen dann mit dem class-Attribut ansprechen:

<a class="type1" href="...">Verweis</a>
<a class="type2" href="...">Verweis</a>

Haben Sie Bereiche der Seite in Elementen mit einem ID-Attribut zusammengefasst, lassen sich abweichende Formatierungen auch folgendermaßen erreichen:

<div id="bereich">
  <p><a href="ziel.htm">Verweistext</a></p>
</div>

#bereich a:link { /* Deklaration /* }
#bereich a:visited { /* Deklaration /* }

Wie kann ich in der Statuszeile bei Verweisen einen eigenen Text anzeigen?

Das geht mit JavaScript und der Methode Seite window.status. Dort finden Sie auch ein Beispiel für Verweise, die beim Überfahren mit der Maus einen eigenen Text in der Statuszeile des Browsers erzeugen. Beachten Sie jedoch, dass nicht alle Anwender dieses Feature besonders toll finden. Viele Anwender möchten lieber die übliche Information in der Statuszeile sehen, nämlich den URI des mit dem Verweis verknüpften Ziels.

Wie kann ich mit einem Verweis ein Programm wie Word, Notepad usw. ausführen?

Wenn Sie einen Verweis auf eine ausführbare Datei wie notepad.exe oder winword.exe legen, wird der Browser diese Datei stets zum Download anbieten, aber ganz sicher nicht ausführen. Der Grund ist, dass Web-Browser und auch HTML für den Seite Client-Server-Betrieb im Internet ausgelegt sind, nicht aber für das unbedenkliche lokale PC-Umfeld. Denn wenn die notepad.exe ausführbar wäre, dann wäre auch die format.com ausführbar, und wäre ein Verweis in der Lage, Ihre Festplatte neu zu formatieren.

Sie können jedoch sehr wohl Seite Verweise auf beliebige Dateien setzen. Wenn Sie beispielsweise einen Verweis auf eine .doc-Datei setzen, wird beim Anwender MS Word geöffnet, sofern das Programm dort installiert ist und Dateien mit dieser Endung mit dem Programm verknüpft sind.

Wie kann ich Blocksatz für Text erzwingen?

In HTML können Sie Seite Überschriften ausrichten, Seite Textabsätze ausrichten, Seite Textbereiche ausrichten und Seite Tabellenzellen ausrichten. Dazu verwenden Sie in allen Fällen das Attribut align. Mit align="justify" erzwingen Sie den Blocksatz. Beachten Sie aber, dass das align-Attribut von HTML als deprecated gekennzeichnet ist und künftig aus dem HTML-Standard entfallen soll. Stattdessen gibt es die CSS-Eigenschaft Seite text-align, der Sie ebenfalls den Wert justify für Blocksatz zuweisen können.

Wie kann ich Darstellungsprobleme bei Blocksatz lösen?

Bei Blocksatzausrichtung kann es vor allem bei Netscape zu unschönen Ausdehnungen kurzer Zeilen kommen. Um das zu vermeiden, sollten Sie auf jeden Fall jeden z.B. mit <p> eingeleiteten Textabsatz mit dem abschließenden </p> beenden. Wenn die unerwünschte Ausdehnung der kurzen Zeile bei einem einfachen Zeilenumbruch (<br>) erscheint, hilft vor dem <br> ein einfaches Leerzeichen (jedoch kein &nbsp;).

Da die heute verbreiteten Browser keine automatische Silbentrennung im Fließtext anwenden, kann es bei Blocksatz zu größeren Lücken zwischen Wörtern kommen. Vermeiden Sie Blocksatz deshalb vor allem in schmalen Bereichen. Je breiter der Block ist, desto sauberer sieht der Text aus.

Wie kann ich Text einrücken?

Um nur die erste Zeile eines mehrzeiligen Absatzes einzurücken, können Sie die CSS-Eigenschaft Seite text-indent verwenden. Wenn Sie dagegen den gesamten Absatz einrücken wollen, müssen Sie einen linken Rand dafür definieren. Auch das geht mit CSS - nämlich mit der Eigenschaft Seite margin-left.

Bitte vermeiden Sie, für Einrückungen die HTML-Elemente blockquote oder ul zu verwenden, wie es früher gerne gemacht wurde und manchmal noch immer empfohlen wird. Das ist erstens schlechter Stil, zweitens besteht keine Garantie, dass solche Elemente von jedem Browser eingerückt dargestellt werden, und drittens können Sie dabei gar nicht festlegen, wie weit der Text eingerückt werden soll.

Wie kann ich Tabulatoren in HTML erzeugen?

Im Konzept von HTML sind Tabulatoren nicht vorgesehen. Mittlerweile gibt es mit Hilfe von CSS folgende Möglichkeit - Beispiel:

<p>Text<span style="white-space:pre">&#9;</span>Text</p>

Dabei wird mit Hilfe des Seite allgemeinen Inline-Elements span, der CSS-Eigenschaft Seite white-space mit dem Wert pre und der numerischen Notation &#9; für das Tabulator-Zeichen mitten im Text ein Tabulator erzeugt.

Wie kann ich fremde Schriftzeichen einfügen?

Ab HTML 4.0 können Sie alle Zeichen des Seite Unicode-Systems notieren. Auf diese Weise können Sie praktisch alle bekannten Zeichen der Welt notieren. Um einige wenige fremde Zeichen einzufügen, können Sie solche Zeichen mit ihrer Unicode-Nummer notieren. Wie das funktioniert, wird in der Seite Zeichenreferenz (Abschnitt "Allgemeines") beschrieben. Dort finden Sie aber auch viele benannte Zeichen wie &Pi; oder &euro;, die Sie ebenfalls verwenden können.

Wenn Sie eine komplette HTML-Datei in einer Sprache erstellen, die fremde Schriftzeichen verwendet, dann sollten Sie eine passende Kodierung wählen. Stellen Sie diese Kodierung in dem Programm ein, mit dem Sie die Texte erstellen. In den Kopfdaten der HTML-Datei notieren Sie eine Seite Angabe zur Zeichenkodierung. Der Browser versucht dann, die HTML-Datei gemäß der angegebenen Kodierung zu verarbeiten.

Damit die fremden Schriftzeichen angezeigt werden können, müssen allerdings beim Anwender Schriftarten installiert sein, die solche Zeichen anzeigen können.

Wie erreiche ich, dass Grafiken beim Überfahren mit der Maus gehighlighted werden?

Sie benötigen Sie jeweils zwei Varianten einer Grafik. Der Effekt entsteht dann dadurch, dass beim Überfahren einer Grafik mit der Maus diese Grafik dynamisch durch die "Schwestergrafik" ersetzt wird. Wird die Maus wieder entfernt, wird wieder die normale Grafik an der Stelle angezeigt. Definieren Sie zunächst für das gewünschte Element eine Seite Hintergrundgrafik. Mit der Seite Pseudoklasse :hover definieren Sie nun die zweite Grafik als Hintergrundbild. Dieser Effekt kann auch mit JavaScript realisiert werden. In dem JavaScript-Anwendungsbeispiel Seite Dynamische grafische Buttons wird genau beschrieben, wie Sie so etwas realisieren können.

Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?

Um Blockelemente zu zentrieren, setzen Sie den linken und rechten Seite Außenabstand auf den Wert auto:

margin-left:auto;
margin-right:auto;

Beachten Sie, dass der Internet Explorer 6 diese Angaben nur dann interpretiert, wenn die Seite im Seite standardkonformen Modus dargestellt wird.

Soll ein Element sowohl horizontal als auch vertikal zentriert werden, bietet sich eine Lösung mit absoluter Seite Positionierung an:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

#zentriert {
  position:absolute;
  top:50%;
  left:50%;
  width:30em;
  height:20em;
  margin-left:-15em;
  margin-top:-10em;
}

Das Element mit der Seite ID "zentriert" wird zunächst so positioniert, dass dessen linke obere Ecke sich genau in der Mitte befindet (top:50%; left:50%;). Anschließend wird es mittels negativer Außenabstände um dessen halbe Breite nach links (margin-left:-15em;) und um dessen halbe Höhe nach oben (margin-top:-10em;) verschoben.

Alternativ können Sie eine Seite Tabelle notieren, die sowohl 100% der verfügbaren Breite als auch 100% der verfügbaren Höhe einnimmt und eine einzige Tabellenzelle enthält, deren Inhalt Sie horizontal zentriert und vertikal mittig ausrichten. Das sieht dann so aus:

<body>
<table border="0" cellpadding="0" cellspacing="0"
  width="100%" height="100%">
<tr><td align="center" valign="middle">
<h1>Willkommen in der Mitte!</h1>
</td></tr></table>
</body>

Diese Lösung hat nur einen Schönheitsfehler: bei Seite Breiten- und Höhenangaben zu Tabellen ist das Attribut height dem HTML-Standard zufolge nicht im Zusammenhang mit dem table-Element erlaubt. Genau dies wird jedoch im gezeigten Beispiel angewendet und auch von fast allen Browsern problemlos interpretiert. Das Problem können Sie zwar umgehen, indem Sie statt height="100%" mit CSS arbeiten und style="height:100%" notieren. Doch das interpretiert zumindest Netscape 4.x nicht.

Wie kann ich ein einzelnes Frame-Fenster in der Mitte des Anzeigefensters positionieren?

Dazu müssen Sie eine "Tabelle" aus drei mal drei Frame-Fenstern erstellen, wobei nur das Fenster, das in der zweiten Reihe dasjenige in der zweiten Spalte ist, einen Inhalt erhält. Das Frameset dazu sieht beispielsweise so aus:

<frameset cols="*,66%,*" rows="*,66%,*" frameborder="0" framespacing="0" border="0">
 <frame><frame><frame>
 <frame><frame src="datei.htm" name="Inhalt"><frame>
 <frame><frame><frame>
</frameset>

Beachten Sie jedoch, dass die Attribute zum Erzwingen von Seite unsichtbaren Fensterrahmen, so wie sie in dem Beispiel notiert sind, nach HTML-Standard nicht erlaubt sind, doch erforderlich sind, um in den Browsern die gewünschte Wirkung zu erzielen.

Wie kann ich verhindern, dass Browser meine Breitenangaben in Tabellen missachten?

Wenn die Inhalte der Tabellenzellen sehr unterschiedlich gewichtet sind, oder wenn Inhalte eine Spalte in der angegebenen Breite nicht ausfüllen, kann es je nach Browser zu unschönen Darstellungen durch unterschiedliche Interpretationen des Attributs width bei Seite Breiten- und Höhenangaben zu Tabellen kommen.

Mittlerweile gibt es eine CSS-Eigenschaft, mit der sich bestimmte Spaltenbreiten erzwingen lassen, nämlich die Eigenschaft Seite table-layout. Diese wird zwar auch von den neueren Browsern interpretiert, aber die Browser der 4er-Generation ignorieren sie. Deshalb wird in der Praxis, um Mindestbreiten zu erzwingen, noch immer viel mit dem so genannten Seite blinden Pixel gearbeitet. Das entspricht zwar nicht gerade der Philosophie von HTML, zeigt aber, dass in der Praxis Probleme existieren, die zumindest in den älteren Browser-Generationen nur über solche Tricksereien lösbar waren.

Warum stellt Netscape 4 Frames nicht in exakter Größe dar?

Netscape interpretiert bis zur 4er-Version Pixelangaben zur Breite und Höhe von Frame-Fenstern bei der Seite Frameset-Definition nicht exakt. Erfahrungen von Anwendern berichten von bis zu 10-15 Pixeln Abweichung von der festgelegten Fensterbreite. Einer kursierenden Theorie zufolge verhält sich Netscape folgendermaßen:

Er arbeitet nicht mit absoluten Pixelwerten, sondern teilt den zur Verfügung stehenden Platz horizontal wie vertikal in 100 Teile mit je 1 Prozent auf. Netscape akzeptiert als Framegröße also praktisch nur Prozentwerte und rechnet Pixelangaben intern in Prozent um. Bei einer Bildschirmauflösung von z.B. 800 x 600 Pixeln (dabei muss man ca. 4 Pixel für den Rand abziehen, daher bleiben in der Breite also ca. 796 Pixel), ergibt sich dann beispielsweise:

Frameset 10% = 10 x 7,96 => Framebreite = 79 Pixel
Frameset 11% = 11 x 7,96 => Framebreite = 87 Pixel
Frameset 12% = 12 x 7,96 => Framebreite = 95 Pixel

Die tatsächliche Größe ist dann noch mal ca. 1 Pixel schmaler. Angaben dazwischen, also etwa 90 Pixel, führen dann also zu tatsächlichen Breite von 86 oder 94 Pixel.

Es ist keine Möglichkeit bekannt, dagegen etwas auszurichten. So bleibt nur die Möglichkeit, das Layout von HTML-Dateien, die innerhalb solcher Frame-Fenster angezeigt werden, so zu gestalten, dass ein gewisser Spielraum in Breite und Höhe der Anzeige das Layout nicht gleich durcheinanderbringt. Eigentlich sollte das ja sowieso als Grundsatz beim Web-Design gelten. Inhalte, zum Beispiel Grafiken, sollten auf jeden Fall 10-15 Pixel kleiner sein als die Angaben zur Breite bzw. Höhe des zugehörigen Frame-Fensters. Nur so ist sichergestellt, dass sie vollständig angezeigt werden.

Wie kann ich erreichen, dass Inhalte ohne Seitenrand links oben beginnen?

Dazu werden zwar vielfach Seite Seitenränder in HTML definiert, wobei allen Angaben der Wert 0 zugewiesen wird. Da dies jedoch kein standardkonformes HTML ist, ist es empfehlenswerter, Stylesheets für diese Zwecke einzusetzen. Am einfachsten ist es, wenn Sie einfach den Seite Außenabstand und Seite Innenabstand des body-Elements global auf 0 Pixel setzen. Dazu notieren Sie einfach:

<body style="margin:0px; padding:0px;">

Dies wird von Netscape 4.x noch nicht richtig interpretiert, es handelt sich allerdings um eine zu vernachlässigende Abweichung. Sind Sie dennoch auf eine identische Darstellung angewiesen, können Sie den gesamten sichtbaren Inhalt der HTML-Datei absolut positionieren. Dies ist mit Hilfe eines Seite allgemeinen Block-Elements und CSS-Eigenschaften zur Seite Positionierung möglich. Der Dateikörper sieht dann beispielsweise so aus:

<body>
<div style="position:absolute; top:0px; left:0px;">
Hier den gesamten sichtbaren Inhalt der Seite notieren
</div>
</body>

Warum weicht die Darstellung im Internet Explorer ab?

Führen Breiten- oder Höhenangaben im Internet Explorer im Vergleich zu anderen Browsern zu einer abweichenden Darstellung, liegt dies vermutlich an dessen Seite Box-Modell-Fehler. Zeichnen Sie Ihre Seiten in diesem Fall mit einer Seite Dokumenttyp-Deklaration für den standardkonformen Modus aus.

Warum geht CSS unter Netscape 4 nicht?

Bei Netscape 4.x ist CSS intern an JavaScript gekoppelt, so merkwürdig sich das auch anhören mag. Denn intern setzt Netscape 4.x CSS mit Hilfe einer speziellen JavaScript-Erweiterung namens JSSS (JavaScript StyleSheets) um. Das bedeutet, dass in diesem Browser keine Stylesheets angezeigt werden, wenn in den Browser-Einstellungen JavaScript deaktiviert wird. Wenn also gar keine Stylesheets im Netscape-4.x-Browser interpretiert werden, liegt es normalerweise daran, dass JavaScript ausgeschaltet ist. Leider können Sie als Web-Autor dagegen nichts weiter unternehmen, denn wenn ein Anwender nun mal kein JavaScript möchte, ist es sein gutes Recht, dies zu deaktivieren.

Meine CSS-Angaben funktionieren nicht richtig - woran kann das liegen?

Die wahrscheinlichste Ursache dafür sind Syntaxfehler bei den Kapitel CSS-Formatdefinitionen. Wer HTML gewohnt ist, bei dem schleichen sich leicht Flüchtigkeitsfehler ein. Ein beliebter Fehler ist beispielsweise, bei der Wertzuweisung an eine CSS-Eigenschaft anstelle des Doppelpunktes ein Gleichheitszeichen zu notieren.

Falsch ist also z.B.: h1 { color=red }
Richtig ist dagegen: h1 { color:red }
Auch vergessene Strichpunkte führen zu Fehlinterpretationen.
Falsch ist also z.B.: h1 { color:red background-color:yellow }
Richtig ist dagegen: h1 { color:red; background-color:yellow }

Da die Browser bei Syntaxfehlern in CSS keine Fehlermeldungen erzeugen, bleiben solche Fehler häufig unentdeckt und machen sich nur in Form von Fehlinterpretationen bemerkbar. Überprüfen Sie deshalb stets genau die Syntax Ihrer CSS-Formatdefinitionen.

Sie können Ihre CSS-Formatdefinitionen auch online auf korrekte Syntax überprüfen lassen. Dazu gibt es den englischsprachige Seite / deutschsprachige Seite W3C CSS-Validierungsservice.

Speziell frühe Zwischenversionen von Netscape 4.x haben Probleme mit Leerzeichen zwischen CSS-Eigenschaft und Wertzuweisung. Notieren Sie deshalb - obwohl es erlaubt ist, besser nicht
h1 { color: red }
sondern
h1 { color:red }

Generell hat Netscape 4.x noch massive Probleme mit vielen CSS-Eigenschaften. Einige der Probleme lassen sich durch Trickserei in den Griff bekommen, aber viele auch nicht.

Wie kann ich das Browser-Fenster auf eine bestimmte Größe ändern?

Mit Hilfe der JavaScript-Methode Seite window.resizeTo() können Sie das Browser-Fenster auf eine gewünschte Größe ändern. Im Beispiel zur Methode window.resizeTo() wird beschrieben, wie Sie das Browser-Fenster nach Einlesen der Seite automatisch auf die gewünschte Größe bekommen.

Beachten Sie aber, dass viele Anwender dies als Eingriff in ihre Freiheit empfinden. Ein Web-Projekt, das gleich auf der Startseite automatisch das Browser-Fenster des Anwenders verändert, erzeugt bei Besuchern, die das Projekt zum ersten mal besuchen, sofort einen negativen Eindruck und führt vermutlich in vielen Fällen dazu, dass die Anwender gleich wieder flüchten gehen. In vielen Browsern lässt sich diese Unsitte unterbinden.

Wie kann ich ein Popup-Fenster in bestimmter Größe erzeugen?

Mit Hilfe der JavaScript-Methode Seite window.open() können Sie ein Popup-Fenster erzeugen. Dabei können Sie auch verschiedene Optionen zur Ausstattung, Größe und Position des Fensters mit angeben. Es gibt verschiedene Möglichkeiten, ein solches Popup-Fenster aufzurufen. Eine Möglichkeit ist, das Popup-Fenster gleich beim Einlesen der Seite automatisch zu öffnen, was mittlerweile in vielen Browsern von einem Popup-Blocker auf Wunsch unterbunden wird.. Eine andere Möglichkeit ist, einen nach oben Verweis zum Öffnen des Popup-Fensters anzubieten.

Wie kann ich erreichen, dass ein Fenster immer im Vordergrund bleibt?

Für selbst erzeugte Popup-Fenster können Sie bewirken, dass diese sich nicht vom Hauptfenster überlappen lassen. Es gibt zwar im normalen JavaScript keine Möglichkeit, einem Fenster die Eigenschaft "immer im Vordergrund" beim Öffnen mit auf den Weg zu geben (nur bei Microsoft JScript und signed JavaScript gibt es so etwas), doch mit einem kleinen Umweg lässt sich der gewünschte Effekt erreichen. Dazu wird in Dateien, die in dem Popup-Fenster angezeigt werden sollen, im Dateikopf ein JavaScript wie das folgende notiert:

<script type="text/javascript">
function immervorn() {
  self.focus();
  window.setTimeout("immervorn()",100);
}
</script>

Im einleitenden <body>-Tag wird außerdem notiert:

<body onload="immervorn()">

Die selbstgeschriebene Seite Funktion immervorn() setzt dabei mit der Methode Seite focus() den Fokus auf das eigene Fenster - und zwar alle 100 Millisekunden, also jede zehntel Sekunde. Dazu ruft sich die Funktion mit Seite setTimeout() nach der entsprechenden Zeit selbst wieder auf (Rekursion). Durch den Event-Handler Seite onload wird sie nach dem Laden der Seite erstmals aufgerufen. Derartige Fenstermanipulationen lassen sich in vielen Browsern unterbinden.

nach oben
weiter | Seite Kurzreferenz: HTML
zurück | Seite Wie fange ich an?
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


SELFHTML: Navigationshilfen / Kurzreferenz: HTML

SELFHTML

Kurzreferenz: HTML
Informationsseite

nach unten Hinweis
nach unten HTML-Grundgerüst
nach unten HTML-Kopfdaten
nach unten Dateiweite Einstellungen
nach unten Elemente zur Textstrukturierung
nach unten Tabellen
nach unten Verweise (Links)
nach unten Grafiken
nach unten Formulare
nach unten Frames
nach unten Multimediaobjekte
nach unten Layer (Netscape)
nach unten Weiterführende HTML-Elemente
Kapitel HTML-Referenz
nach unten

Hinweis

Die HTML-Kurzreferenz ist nicht für Anfänger geeignet! Die Kurzreferenz richtet sich an Anwender, die sich mit HTML auskennen und eine allgemeine Syntax-Übersicht für wichtige und praxisrelevante Sprachbestandteile haben wollen (die Kurzreferenz erhebt keinen Anspruch auf Vollständigkeit). Die Kurzreferenz eignet sich als Navigationshilfe. Von den Kurzbeschreibungen führen Verweise vom Typ Seite Beschreibung direkt zu den ausführlichen Beschreibungen innerhalb der Dokumentation.

HTML-Grundgerüst

HTML Grundgerüst

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
 <!-- Inhalt der Datei -->
</body>
</html>
Für Titel einen aussagekräftigen Titel vergeben! Den gesamten sichtbaren Inhalt der Datei zwischen <body> und </body> notieren.
Seite Beschreibung

Dokumenttyp-
Angaben

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
     "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN">
Seite Beschreibung

Kommentare

 <!-- Dies ist ein Kommentar -->
Zum internen Auskommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt.
Seite Beschreibung

HTML-Kopfdaten

Meta-Angabe:
Autor

 <meta name="author" content="Name">
Für Name den Namen des Urhebers notieren.
Seite Beschreibung

Meta-Angabe:
Beschreibung

 <meta name="description" content="Text">
Für Text eine Kurzbeschreibung des Inhalts notieren.
Seite Beschreibung

Meta-Angabe:
Stichwörter

 <meta name="keywords" content="Wort, Wort, Wort">
Für Wort je ein Stichwort zum Inhalt notieren. Anzahl ist flexibel. Stichwörter durch Kommata trennen.
Seite Beschreibung

Meta-Angabe:
Zeitstempel

 <meta name="date" content="yyyy-MM-ddThh:mm:ss+hh:mm">
yyyy = Jahr, MM = Monat, dd = Tag, T = fixer Buchstabe, hh = Stunden, mm = Minuten, ss = Sekunden, +/- = Abweichung gegenüber Greenwich in Stunden und Minuten.
Seite Beschreibung

Meta-Angabe:
Robots

 <meta name="robots" content="index|noindex|follow|nofollow">
Anweisung an Suchmaschinen:
index = Auslesen erlaubt,
noindex = Auslesen nicht erlaubt,
follow = Verweisen folgen erlaubt,
nofollow = Verweisen folgen nicht erlaubt.
Seite Beschreibung

Meta-Angabe:
Zeichenkodierung

 <meta http-equiv="content-type" content="text/html; charset=Kodierung">
Für Kodierung so etwas wie ISO-8859-1 notieren.
Seite Beschreibung

Meta-Angabe:
Stylesprache

 <meta http-equiv="Content-Style-Type" content="MIME-Typ">
Für MIME-Typ so etwas wie text/css notieren.
Seite Beschreibung

Meta-Angabe:
Script-Sprache

 <meta http-equiv="Content-Script-Type" content="MIME-Typ">
Für MIME-Typ so etwas wie text/javascript notieren.
Seite Beschreibung

Meta-Angabe:
Originaladresse

 <meta http-equiv="expires" content="0">
Zeitpunkt angeben, ab dem von Originaladresse geladen werden soll. 0 bedeutet: immer von Originaladresse laden (Proxy-Server ignorieren)
Seite Beschreibung

Meta-Angabe:
Weiterleitung

 <meta http-equiv="refresh" content="0; URL=URI">
Angeben, wann und welche Adresse automatisch geladen werden soll. 0 bedeutet: sofort (Angabe bedeutet Verzögerung in Sekunden).
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad angeben, das nach der angegebenen Zeit automatisch geladen werden soll.
Seite Beschreibung

Adressbasis

 <base href="URI">
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad angeben, das als Basis für relative Adressierung dienen soll.
Seite Beschreibung

Zielfensterbasis

 <base target="Name">
Standardzielfenster für Verweise bei Frames, bei Verweisen selbst ist dann keine Angabe zu target mehr erforderlich. Für Name den gewünschten Fensternamen angeben.
Seite Beschreibung

Logische
Beziehungen

 <link rel="Beziehung" title="Titel" href="URI">
<link rev="Beziehung" title="Titel" href="URI">
rel steht für Beziehung, rev für Rückbeziehung.
Für Beziehung einen der folgenden Werte notieren:
contents = Inhaltsverzeichnis
chapter = Kapitel
section = Abschnitt
subsection = Unterabschnitt
index = Stichwortverzeichnis
glossary = Glossar
appendix = Anhang
copyright = rechtliche Hinweise
next = nächste Seite
prev = vorherige Seite
start = Anfangsseite
help = Hilfeseite
bookmark = allgemeiner Orientierungspunkt
alternate = andere Lesart
stylesheet = externe Stylesheet-Datei einbinden
Für Titel einen Beschriftungstext notieren für den Fall, dass die Angabe visuell erscheint.
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der Datei oder Quelle angeben, die verknüpft werden soll.
Seite Beschreibung

Dateiweite Einstellungen

Farben für Text,
Hintergrund und
Verweise

 <body bgcolor="#XXXXXX" text="#XXXXXX"
   link="#XXXXXX" vlink="#XXXXXX" alink="#XXXXXX">
bgcolor = dateiweite Hintergrundfarbe,
text = dateiweite Schriftfarbe,
link = dateiweite Farbe für Verweise zu noch nicht besuchten Zielen,
vlink = dateiweite Farbe für Verweise zu bereits besuchten Zielen,
alink = dateiweite Farbe für aktivierte Verweise.
Für #XXXXXX eine hexadezimal notierte RGB-Farbe angeben oder einen erlaubten Farbnamen.
Seite Beschreibung

Hintergrundbild
(Wallpaper)

 <body background="URI">
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Grafikdatei angeben.
Seite Beschreibung

Elemente zur Textstrukturierung

Überschriften

 <h[1-6]>Text</h[1-6]>
Sechs Überschriftenebenen sind erlaubt, also z.B. <h1>Text</h1>.
Seite Beschreibung

Überschriften
ausrichten

 <h[1-6] align="Ausrichtung">Text</h[1-6]>
Für Ausrichtung einen der folgenden Werte notieren:
left = linksbündig,
center = zentriert,
right = rechtsbündig,
justify = Blocksatz.
Seite Beschreibung

Textabsätze

 <p>Text</p>
Seite Beschreibung

Textabsätze
ausrichten

 <p align="Ausrichtung">Text</p>
Für Ausrichtung einen der folgenden Werte notieren:
left = linksbündig,
center = zentriert,
right = rechtsbündig,
justify = Blocksatz.
Seite Beschreibung

Zeilenumbruch
erzwingen

 Text alte Zeile<br>Text neue Zeile
Seite Beschreibung

Aufzählungslisten

 <ul>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul>
Seite Beschreibung

Bullet-Typ für
Aufzählungslisten

 <ul type="Typ">
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul>
Für Typ einen der folgenden Werte notieren:
circle = Kreis/Punkt,
disc = Scheibe/Dateisymbol,
square = Quadrat.
Seite Beschreibung

Nummerierte Listen

 <ol>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ol>
Seite Beschreibung

Nummerierte Listen
alphabetisch
oder römisch

 <ol type="Typ">
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ol>
Für Typ einen der folgenden Werte notieren:
a = für klein alphabetisch,
A = für groß alphabetisch,
i = für klein römisch,
I = für groß römisch.
Seite Beschreibung

Nummerierung
beeinflussen

 <ol start="Startwert">
<li>Listeneintrag</li>
<li value="Fortsetzungswert">Listeneintrag</li>
</ol>
Für Startwert die Zahl mit dem gewünschten Startwert notieren,
für Fortsetzungswert die Zahl mit dem gewünschten Fortsetzungswert innerhalb der Liste.
Seite Beschreibung

Definitionslisten
(Glossarlisten)

 <dl>
<dt>Zu definierender Ausdruck</dt>
<dd>Definition des Ausdrucks</dd>
</dl>
Seite Beschreibung

Menülisten

 <menu>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</menu>
Seite Beschreibung

Verzeichnislisten

 <dir>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</dir>
Seite Beschreibung

Listendarstellung
kompakt

 <ul compact> <!-- Listeninhalt --> </ul>
Ebenso bei ol, menu und dir möglich.
Seite Beschreibung

Zitate

 <blockquote>Text</blockquote>
Seite Beschreibung

Zitate mit
URI-Quellenangabe

 <blockquote cite="URL">Text</blockquote>
Für URI eine Web-Adresse oder ein Ziel mit der Quelle angeben.
Seite Beschreibung

Adressen

 <address>Text</address>
Seite Beschreibung

Präformatierter
Text

 <pre>Text</pre>
Seite Beschreibung

Breite eines
präformatierten
Textes

 <pre width="Breite">Text</pre>
Für Breite die gewünschte Zahl der Zeichen pro Zeile angeben.
Seite Beschreibung

Logische
Textauszeichnung
(inline)

 <em>betont</em>
<strong>stark betont</strong>
<code>Quellcode</code>
<samp>Beispiel</samp>
<kbd>Tastatureingabe</kbd>
<var>Variable</var>
<cite>Quelle des Zitats</cite>
<dfn>Definition</dfn>
<abbr>abgekürzte Schreibweise</abbr>
<acronym>Abkürzung</acronym>
<q>Zitat</q>
Seite Beschreibung

Änderungs-
markierungen

 <ins>eingefügter Text</ins>
<del>gelöschter Text</del>
Seite Beschreibung

Änderungs-
markierungen
mit Zeitstempel

 <ins datetime="yyyy-MM-ddThh:mm:ss+hh:mm">eingefügter Text</ins>
<del datetime="yyyy-MM-ddThh:mm:ss+hh:mm">gelöschter Text</del>
yyyy = Jahr, MM = Monat, dd = Tag, T = fixer Buchstabe, hh = Stunden, mm = Minuten, ss = Sekunden, +/- = Abweichung gegenüber Greenwich in Stunden und Minuten.
Seite Beschreibung

Textrichtung

 <bdo dir="Richtung">
Für Richtung einen der folgenden Werte notieren:
rtl = für rechts nach links,
ltr = für links nach rechts.
Seite Beschreibung

Physische
Textauszeichnung
(inline)

 <b>fett</b>
<i>kursiv</i>
<tt>dicktengleich (Teletyper)</tt>
<u>unterstrichen</u>
<strike>durchgestrichen</strike>
<s>durchgestrichen</s>
<big>größer als normal</big>
<small>kleiner als normal</small>
<sup>hochgestellt</sup>
<sub>tiefgestellt</sub>
Seite Beschreibung

Allgemeines
Block-Element

 <div>verschiedene HTML-Elemente</div>
z.B. für CSS-Formatierungen.
Seite Beschreibung

Allgemeines
Block-Element
mit Ausrichtung

 <div align="Ausrichtung">verschiedene HTML-Elemente</div>
Für Ausrichtung einen der folgenden Werte notieren:
left = linksbündig,
center = zentriert,
right = rechtsbündig,
justify = Blocksatz.
Seite Beschreibung

Allgemeines
Block-Element
zentriert

 <center>verschiedene HTML-Elemente</center>
Seite Beschreibung

Allgemeines
Inline-Element

 <span>Text</span>
z.B. für für CSS-Formatierungen.
Seite Beschreibung

Trennlinien

 Text davor
<hr>
Text danach
Seite Beschreibung

Trennlinien-
Eigenschaften

 <hr width="Breite" size="Höhe" align="Ausrichtung">
Für Breite eine Zahl wie z.B. 300 für Anzahl Pixel oder einen Prozentwert wie z.B. 50% angeben.
Für Höhe eine Zahl wie z.B. 5 für Anzahl Pixel angeben.
Für Ausrichtung einen der folgenden Werte notieren:
left = linksbündig,
center = zentriert,
right = rechtsbündig.
Seite Beschreibung

Schriftformatierung

 <font size="Größe">Text</font>
<font color="#XXXXXX">Text</font>
<font face="Schriftart">Text</font>
<basefont size="Größe">
nachfolgender Inhalt
<basefont color="#XXXXXX">
nachfolgender Inhalt
<basefont face="Schriftart">
nachfolgender Inhalt
font für Inline-Auszeichnung verwenden,
basefont als Auszeichnung für alle nachfolgenden Inhalte.
size = Schriftgröße,
color = Schriftfarbe,
face = Schriftart.
Für Größe einen Wert von 1 (sehr klein) bis 7 (sehr groß) notieren - 3 ist normal.
Oder einen relativen Wert wie z.B. +1, +2 usw. für größer, oder -1, -2 usw. für kleiner.
Für #XXXXXX eine hexadezimal notierte RGB-Farbe angeben oder einen erlaubten Farbnamen.
Für Schriftart den Namen einer oder mehrerer (alternativer) Schriftarten angeben, mehrere Schriftarten durch Kommata trennen.
Seite Beschreibung

Tabellen

Tabellenaufbau

 <table border="Dicke">
<tr>
<th>Kopfzelle</th>
<th>Kopfzelle</th>
</tr>
<tr>
<td>Datenzelle</td>
<td>Datenzelle</td>
</tr>
</table>
Tabelle mit sichtbaren Gitternetzlinien durch Angabe von border im einleitenden Tabellen-Tag, durch Weglassen wird die Tabelle eine blinde Tabelle.
Für Dicke eine Zahl wie z.B. 3 für Anzahl Pixel der Dicke des Außenrahmens angeben.
Seite Beschreibung

Spalten
vordefinieren

 <table >
<colgroup>
<col width="Breite" span="Anzahl">
<col>
</colgroup>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
</table>
Mit <col>-Tags so viele Spalten vordefinieren wie die Tabelle hat. Gruppieren mit colgroup-Elementen.
width = Spaltenbreite (optionale Angabe).
Für Breite eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 20%,
oder eine Relation zu anderen Spalten (z.B. 4* = 4 Anteile an der Summe so definierter Anteile in den anderen Spalten).
span = Angabe zur Breite gilt für so viele Spalten in Folge wie angegeben.
Für Anzahl eine Zahl wie z.B. 3 für die Anzahl Spalten angeben, für die die Angaben gelten sollen.
Seite Beschreibung

Kopf, Fuß
und Körper
einer Tabelle

 <table>
<thead>
<!--Tabellenzeilen-->
</thead>
<tfoot>
<!--Tabellenzeilen-->
</tfoot>
<tbody>
<!--Tabellenzeilen-->
</tbody>
</table>
In dieser Reihenfolge notieren.
Seite Beschreibung

Zellenabstand und
Zelleninnenabstand

 <table cellspacing="Abstand" cellpadding="Innenabstand">
<!-- Tabelleninhalt -->
</table>
cellspacing = Abstand der Zellen untereinander,
cellpadding = Innenabstand von Zellenrand zu Zelleninhalt.
Für Abstand und Innenabstand Zahlen wie z.B. 5 und 10 für die Anzahl der gewünschten Pixel angeben.
Seite Beschreibung

Regeln für
Außenrahmen

 <table border="Dicke" frame="Typ">
<!-- Tabelleninhalt -->
</table>
Rahmendicke angeben, damit ein Außenrahmen sichtbar ist.
Für Dicke eine Zahl wie z.B. 3 für Anzahl Pixel der Dicke des Außenrahmens angeben.
Für Typ einen der folgenden Werte notieren:
box = Rahmen rundum,
above = Rahmen nur oben,
below = Rahmen nur unten,
hsides = Rahmen nur oben und unten.
vsides = Rahmen nur links und rechts.
lhs = Rahmen nur links.
rhs = Rahmen nur rechts.
Seite Beschreibung

Regeln für
Gitternetzlinien

 <table border="Dicke" rules="Typ">
<!-- Tabelleninhalt -->
</table>
Rahmendicke angeben, damit Außenrahmen und Gitternetz sichtbar sind.
Für Dicke eine Zahl wie z.B. 3 für Anzahl Pixel der Dicke des Außenrahmens angeben.
Für Typ einen der folgenden Werte notieren:
none = keine Gitternetzlinien,
rows = Linien nur zwischen Tabellenzeilen,
cols = Linien nur zwischen Tabellenspalten,
groups = Linien nur zwischen Kopf, Körper und Fuß,
all = komplettes Gitternetz (Normaleinstellung).
Seite Beschreibung

Breiten- und
Höhenangaben

 <table width="Breite">
<tr>
<th width="Breite" height="Höhe">Kopfzelle</th>
<th>Kopfzelle</th>
</tr>
<tr>
<td>Datenzelle</td>
<td width="Breite" height="Höhe">Datenzelle</td>
</tr>
</table>
width = Breite,
height = Höhe.
Breite der gesamten Tabelle im einleitenden <table>-Tag angeben,
Breite einer Spalte in einem der einleitenden <th>- oder <td>-Tags der Spalte,
und Höhe einer Tabellenzeile in einem der einleitenden <th>- oder <td>-Tags der Zeile.
Für Breite eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 20%.
Für Höhe eine Zahl wie z.B. 50 für Pixel angeben.
Seite Beschreibung

Zeilenumbruch
in Zellen
verhindern

 <th nowrap>Kopfzelle</th>
<td nowrap>Datenzelle</td>
Seite Beschreibung

Zellen horizontal
ausrichten

 <th align="Ausrichtung">Kopfzelle</th>
<td align="Ausrichtung">Datenzelle</td>
Für Ausrichtung einen der folgenden Werte notieren:
left = linksbündig,
center = zentriert,
right = rechtsbündig,
justify = Blocksatz,
char = um Dezimalzeichen. In diesem Fall char als zusätzliches Attribut notieren und als Wert ein Dezimalzeichen wie Komma zuweisen (char=","). Mit einem weiteren Attribut charoff gegebenenfalls angeben, an welcher Position das Dezimalzeichen frühestens vorkommen kann (z.B. charoff="10").
Seite Beschreibung

Zellen vertikal
ausrichten

 <th valign="Ausrichtung">Kopfzelle</th>
<td valign="Ausrichtung">Datenzelle</td>
Für Ausrichtung einen der folgenden Werte notieren:
top = obenbündig,
middle = mittig,
bottom = untenbündig,
baseline = an gemeinsamer Basislinie, sodass erste Textzeile immer auf gleicher Höhe beginnt.
Seite Beschreibung

Hintergrundfarbe

 <table bgcolor="#XXXXXX">
<tr bgcolor="#XXXXXX">
<th bgcolor="#XXXXXX">Kopfzelle</th>
<td bgcolor="#XXXXXX">Datenzelle</td>
</tr>
</table>
Für #XXXXXX eine hexadezimal notierte RGB-Farbe angeben oder einen erlaubten Farbnamen.
Seite Beschreibung

Hintergrundbild
(Wallpaper)

 <table background="URI">
<tr background="URI">
<th background="URI">Kopfzelle</th>
<td background="URI">Datenzelle</td>
</tr>
</table>
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Grafikdatei angeben.
Seite Beschreibung

Zellen
verbinden

 <th rowspan="Zeilen">Kopfzelle</th>
<td rowspan="Zeilen">Datenzelle</td>
<th colspan="Spalten">Kopfzelle</th>
<td colspan="Spalten">Datenzelle</td>
<th rowspan="Zeilen" colspan="Spalten">Kopfzelle</th>
<td rowspan="Zeilen" colspan="Spalten">Datenzelle</td>
Für Zeilen eine Zahl wie z.B. 3 angeben, um festzulegen, über wie viele Zeilen sich die Zelle erstrecken soll.
Für Spalten eine Zahl wie z.B. 3 angeben, um festzulegen, über wie viele Spalten sich die Zelle erstrecken soll.
Seite Beschreibung

Tabellen-
Beschriftung

 <table>
<caption align="Ausrichtung">Text</caption>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
</table>
Das caption-Element unmittelbar hinter dem einleitenden <table>-Tag notieren. Das Attribut zur Ausrichtung (align) ist optional.
Für Ausrichtung einen der folgenden Werte notieren:
left = Tabellenbeschriftung seitlich links der Tabelle,
right = Tabellenbeschriftung seitlich rechts der Tabelle,
bottom = Tabellenbeschriftung unter der Tabelle,
top = Tabellenbeschriftung oberhalb der Tabelle (Normaleinstellung).
Seite Beschreibung

Tabellen
ausrichten

 <table align="Ausrichtung" hspace="LinksRechts" vspace="ObenUnten">
<!-- Tabelleninhalt -->
</table>
Für Ausrichtung einen der folgenden Werte notieren:
left = Tabelle links ausrichten (nachfolgende Inhalte fließen rechts vorbei),
right = Tabelle rechts ausrichten (nachfolgende Inhalte fließen links vorbei),
center = Tabelle zentriert ausrichten.
Für LinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Tabelle zur Umgebung links und rechts zu bestimmen.
Für ObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Tabelle zur Umgebung oben und unten zu bestimmen.
Seite Beschreibung

Zusammenfassung
des
Tabelleninhalts

 <table summary="Text">
<!-- Tabelleninhalt -->
</table>
Seite Beschreibung

Verweise (Links)

Verweis definieren

 <a href="URI">Verweistext</a>
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der Datei oder Quelle angeben, das verlinkt werden soll.
URI kann sein:
Anker in der gleichen Datei (z.B. #Ankername)
Andere Datei (z.B. datei.htm)
Andere Datei in anderem Verzeichnis (z.B. ../verzeichnis/datei.htm)
Anker in der anderer Datei (z.B. datei.htm#Ankername)
WWW-Adresse (http://...)
Gopher-Adresse (gopher://...)
FTP-Adresse (ftp://...)
Telnet-Adresse (telnet://...)
Newsgroup-Adresse (news:...)
Absolute lokale Adresse (file://...)
Seite Beschreibung

Anker definieren

 <a name="Ankername">[Inhalt]</a>
Für Ankername einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Seite Beschreibung

Zielfenster für
Verweise

 <a href="URI" target="Zielfenster">Verweistext</a>
Für Zielfenster den Namen eines definierten Frame-Fensters angeben oder einen der folgenden reservierten Namen:
_blank = Verweis in neuem Fenster öffnen,
_self = Verweis im gleichen Fenster öffnen,
_parent = aktuelles Frameset beim Ausführen des Verweises sprengen,
_top = alle Framesets beim Ausführen des Verweises sprengen.
Seite Beschreibung

E-Mail-Verweise

 <a href="mailto:beispiel@example.org">Verweistext</a>
<a href="mailto:beispiel@example.org?subject=Thema">Verweistext</a>
<a href="mailto:beispiel@example.org?cc=name2@example.net">Verweistext</a>
<a href="mailto:beispiel@example.org?bcc=name2@example.net">Verweistext</a>
<a href="mailto:beispiel@example.org?body=Text">Verweistext</a>
<a href="mailto:beispiel@example.org?Zusatz1&amp;Zusatz2">Verweistext</a>
Auf Wunsch vorbelegtes Thema (subject), sichtbaren Kopienempfänger (cc), unsichtbaren Kopienempfänger (bcc) oder vorbelegten Text (body) angeben. Mehrere solcher Zusatzangaben kombinieren wie im Schema mit ?Zusatz1&amp;Zusatz2.
In den Angaben Zeichen mit Zeichenwerten größer 127 hexadezimal maskieren, z.B. %FC für 252 ("ü"). Ebenso einige Standardzeichen, die in URIs Bedeutung haben können, maskieren.
Seite Beschreibung

Logische
Beziehungen
zum Verweisziel

 <a href="URI" rel="Beziehung">Verweistext</a>
<a href="URI" rev="Beziehung">Verweistext</a>
rel steht für Beziehung, rev für Rückbeziehung.
Für Beziehung einen der folgenden Werte notieren:
contents = Inhaltsverzeichnis
chapter = Kapitel
section = Abschnitt
subsection = Unterabschnitt
index = Stichwortverzeichnis
glossary = Glossar
appendix = Anhang
copyright = rechtliche Hinweise
next = nächste Seite
prev = vorherige Seite
start = Anfangsseite
help = Hilfeseite
bookmark = allgemeiner Orientierungspunkt
alternate = andere Lesart
Seite Beschreibung

Sprache und
Zeichenkodierung
des Verweisziels

 <a href="URI" hreflang="Sprachenkürzel"
charset="Kodierung">Verweistext</a>
Für Sprachenkürzel so etwas wie de, en, fr, und für Kodierung so etwas wie ISO-8859-1 notieren.
Seite Beschreibung

Tabulator-Reihenfolge

 <a href="URI" tabindex="Indexnummer">Verweistext</a>
Bei jedem Verweis für Indexnummer eine Zahl notieren. Die niedrigste Nummer wird zuerst angesprungen, die höchste zuletzt.
Seite Beschreibung

Tastaturkürzel

 <a href="URI" accesskey="Buchstabe">Verweistext</a>
Für Buchstabe so etwas wie h oder m eingeben. Ausführbar meistens mit [Alt]-Taste plus dem angegebenen Buchstaben.
Seite Beschreibung

Grafiken

Grafiken einbinden

 <img src="URI" alt="Alternativtext">
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Grafikdatei angeben.
Für Alternativtext einen Kurztext notieren für den Fall, dass die Grafik nicht angezeigt werden kann.
Seite Beschreibung

Breite und
Höhe der Grafik

 <img src="URI" alt="Alternativtext" width="Breite" height="Höhe">
Für Breite und Höhe eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 60% für Größe in Bezug auf Umgebung.
Seite Beschreibung

Rahmen
um Grafik

 <img src="URI" alt="Alternativtext" border="Dicke">
Für Dicke eine Zahl wie z.B. 3 für die Rahmendicke in Pixeln notieren.
Seite Beschreibung

Namen
für Grafik

 <img src="URI" alt="Alternativtext" name="Name">
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Seite Beschreibung

Langbeschreibung
für Grafik

 <img src="URI" alt="Alternativtext" longdesc="URI">
Für URI bei longdesc eine Web-Adresse oder ein Ziel mit oder ohne Pfad einer Datei (z.B. HTML) mit Beschreibungen zur Grafik angeben.
Seite Beschreibung

Grafiken
im Text
ausrichten

 <img src="URI" alt="Alternativtext" align="Ausrichtung">
Für Ausrichtung einen der folgenden Werte notieren:
top = obenbündig mit Text davor oder danach,
middle = mittig zu Text davor oder danach,
bottom = untenbündig mit Text davor oder danach.
Seite Beschreibung

Text um Grafik
fließen lassen

 <img src="URI" alt="Alternativtext"
   align="Ausrichtung" hspace="LinksRechts" vspace="ObenUnten">
Für Ausrichtung einen der folgenden Werte notieren:
left = Grafik links ausrichten (nachfolgende Inhalte fließen rechts vorbei),
right = Grafik rechts ausrichten (nachfolgende Inhalte fließen links vorbei),
Für LinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Grafik zur Umgebung links und rechts zu bestimmen.
Für ObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Grafik zur Umgebung oben und unten zu bestimmen.
Seite Beschreibung

Verweis-sensitive
Grafik

 <img src="URI" alt="Alternativtext" usemap="#Mapname">
<map name="Mapname">
<area shape="Typ" coords="Koordinaten" href="URI">
</map>
Bei Mapname beim usemap-Attribut des <img>-Tags und beim name-Attribut des <map>-Tags den gleichen Namen vergeben. Beim usemap-Attribut das Gatterzeichen # voranstellen.
Bei Typ einen der folgenden Werte notieren:
rect = viereckiger Bereich innerhalb der Grafik,
circle = Kreisbereich,
poly = vieleckiger Bereich (Polygon).
Bei Koordinaten bei rect so etwas angeben wie 10,20,90,100 (10 ist Anfang Pixel von links, 20 Anfang oben, 90 Ende links, 100 Ende unten),
bei Koordinaten bei circle so etwas angeben wie 100,150,50 (100 ist Kreismittelpunkt in Pixeln von links, 150 Kreismittelpunkt von oben, 50 der Kreisradius),
und bei Koordinaten bei poly so etwas angeben wie 10,20,40,30,300,200 (10 ist erste Ecke links in Pixeln, 20 erste Ecke oben, 40 zweite Ecke links, 30 zweite Ecke oben, 300 dritte Ecke links, 200 dritte Ecke oben). Usw. beliebig viele Ecken.
Bei URI beim href-Attribut das Verweisziel notieren, das mit dem verweis-sensitiven Bereich verknüpft sein soll.
Seite Beschreibung

Formulare

Formular definieren

 <form action="URI" method="Methode" enctype="MIME-Typ">
<!-- Formularelemente und andere Elemente innerhalb des Formulars -->
</form>
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der Datei oder Quelle angeben, das die Daten verarbeiten soll.
URI kann z.B. ein CGI-Script, eine HTML-Datei mit PHP-Code oder eine E-Mail-Adresse (mailto:beispiel@example.org) sein.
Für Methode entweder get oder post notieren (bei mailto-Formularen immer post)
Für MIME-Typ bei mailto-Formularen text/plain angeben.
Seite Beschreibung

Zielfenster für
Server-Antwort

 <form action="URI" method="Methode" target="Zielfenster">
<!-- Formularelemente und andere Elemente innerhalb des Formulars -->
</form>
Für Zielfenster den Namen eines definierten Frame-Fensters angeben oder einen der folgenden reservierten Namen:
_self = Antwort im gleichen Fenster ausgeben wie das Formular,
_parent = aktuelles Frameset für Antwort sprengen,
_top = alle Framesets für Antwort sprengen.
Seite Beschreibung

Zeichenkodierung
der Formulardaten

 <form action="URI" method="Methode" accept-charset="Liste mit Kodierungen">
<!-- Formularelemente und andere Elemente innerhalb des Formulars -->
</form>
Für Liste mit Kodierungen so etwas eingeben wie ISO-8859-1 ISO-8859-2.
Seite Beschreibung

Einzeilige
Eingabefelder

 <input type="text" size="Länge" maxlength="MaxLänge" name="Name">
Für Länge die Anzeigebreite des Feldes in Zeichen notieren (optional).
Für MaxLänge die maximal eingebbare Anzahl Zeichen notieren (optional).
Für Name einen Namen notieren (optional). Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Seite Beschreibung

Einzeilige
Eingabefelder
Textvorbelegung

 <input type="text" value="Wert">
Für Wert den Text der Vorbelegung notieren.
Seite Beschreibung

Eingabefelder
für Passwort

 <input type="password" size="Länge" maxlength="MaxLänge" name="Name">
Seite Beschreibung

Mehrzeilige
Eingabefelder

 <textarea cols="Spalten" rows="Reihen" name="Elementname">
Optionale Textvorbelegung
</textarea>
Für Spalten die Anzeigebreite des in Anzahl Zeichen pro Zeile notieren.
Für Reihen die Anzeigehöhe in Zeilen notieren.
Für Name einen Namen notieren (optional). Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Seite Beschreibung

Mehrzeilige
Eingabefelder
Umbruchkontrolle

 <textarea cols="Spalten" rows="Reihen" wrap="Umbruch">
</textarea>
Kein HTML-Standard!
Für Umbruch einen der folgenden Werte notieren:
soft = automatischer Zeilenumbruch nur bei Eingabe,
hard = automatischer Zeilenumbruch bei Eingabe wird zu Zeilenumbrüchen bei Formularversand,
virtual = wie soft.
physical = wie hard.
off = kein automatischer Zeilenumbruch bei Eingabe.
Seite Beschreibung

Eingabefelder
nur lesen

 <input type="text" readonly value="Text nur lesbar">

<textarea cols="Spalten" rows="Reihen" readonly>
Text nur lesbar
</textarea>
Seite Beschreibung

Auswahlliste

 <select size="Höhe" name="Name">
<option>Eintrag</option>
<option>anderer Eintrag</option>
</select>
Für Höhe eine Zahl wie 1 oder 10 notieren, um die Anzeigehöhe der Liste (Anzahl gleichzeitig angezeigter Einträge) zu bestimmen.
Für Name einen Namen notieren (optional). Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Seite Beschreibung

Auswahlliste
Mehrfachauswahl

 <select multiple size="Höhe">
<option>Eintrag</option>
<option>anderer Eintrag</option>
</select>
Attribut multiple.
Seite Beschreibung

Auswahlliste
mit Vorauswahl

 <select multiple size="Höhe">
<option>Eintrag</option>
<option selected>anderer Eintrag</option>
</select>
Attribut selected,
Seite Beschreibung

Absendewert von
Listeneinträgen

 <select size="Höhe">
<option value="Wert">Eintrag</option>
<option value="Wert">anderer Eintrag</option>
</select>
Für Wert bei jedem Eintrag einen passenden Absendewert notieren.
Seite Beschreibung

Menüstruktur

 <select size="Höhe">
<optgroup label="Menütext">
<option>Eintrag</option>
<option>anderer Eintrag</option>
</optgroup>
<optgroup label="Menütext">
<option>Eintrag</option>
<option>anderer Eintrag</option>
</optgroup>
</select>
Für Menütext jeweils eine Beschriftung für das Untermenü notieren.
Seite Beschreibung

Radio-Buttons

 <input type="radio" name="Name" value="Wert"> Text
Für Name einen Namen notieren. Zusammengehörige Radio-Buttons erhalten den gleichen Namen. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Wert einen Text notieren, der beim Formularversand diesen Button bezeichnet.
Für Text einen sichtbaren Beschriftungstext notieren.
Seite Beschreibung

Checkboxen

 <input type="checkbox" name="Name" value="Wert"> Text
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Wert einen Text notieren, der beim Formularversand diese Checkbox bezeichnet.
Für Text einen sichtbaren Beschriftungstext notieren.
Seite Beschreibung

Einträge
vorselektieren

 <input type="radio" checked name="Name" value="Wert"> Text
<input type="checkbox" checked name="Name" value="Wert"> Text
Attribut checked.
Seite Beschreibung

Klick-Buttons (1)

 <input type="button" name="Name" value="Beschriftung" onclick="Aktion">
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Beschriftung den Text notieren, der als Button-Beschriftung angezeigt wird.
Für Aktion z.B. eine JavaScript-Anweisung notieren.
Seite Beschreibung

Klick-Buttons (2)

 <button type="button" name="Name"
   value="Wert" onclick="...">
Beschriftung
</button>
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Der Wert kann für interne Zwecke genutzt oder weggelassen werden, er wird nicht angezeigt.
Für Beschriftung die Anzeigefläche des Buttons gestalten, z.B. auch mit Grafiken und anderen HTML-Elementen.
Seite Beschreibung

Formularfeld
für Datei-Upload

 <input type="file" name="Name" maxlength="Größe" accept="MIME-Typ">
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Größe die maximale Byte-Größe der Datei angeben, z.B. 100000 (unzuverlässig!).
Für MIME-Typ so etwas notieren wie text/*
Wichtig: im <form>-Tag enctype="multipart/form-data" notieren.
Seite Beschreibung

Versteckte
Elemente

 <input type="hidden" name="Name" value="Wert">
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Wert einen Text notieren, der beim Formularversand mit übertragen, aber nicht angezeigt wird.
Seite Beschreibung

Elemente
gruppieren

 <fieldset>
<legend>Gruppenüberschrift</legend>
<!-- Formularelemente -->
</fieldset>
Seite Beschreibung

Label für
Elemente

 <label for="idName">Beschriftung:</label>
<[Formularelement] id="idName">
idName müssen beim for-Attribut des <label>-Tags und beim id-Attribut des zugehörigen Formularelements übereinstimmen. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Seite Beschreibung

Tabulator-Reihenfolge

 <[Formularelement] tabindex="Indexnummer">
Bei jedem Formularelement für Indexnummer eine Zahl notieren. Die niedrigste Nummer wird zuerst angesprungen, die höchste zuletzt.
Seite Beschreibung

Tastaturkürzel

 <[Formularelement] accesskey="Buchstabe">
Für Buchstabe so etwas wie h oder m eingeben. Ausführbar meistens mit [Alt]-Taste plus dem angegebenen Buchstaben.
Seite Beschreibung

Elemente
ausgrauen

 <[Formularelement] disabled>
Seite Beschreibung

Buttons zum
Absenden/
Abbrechen

 <input type="submit" name="Name" value="Beschriftung">
<input type="reset" name="Name" value="Beschriftung">
Für Name einen Namen notieren.
Für Beschriftung den jeweiligen Beschriftungstext des Buttons notieren.
Seite Beschreibung

Grafischer
Absendebutton

 <input type="image" src="URI">
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Grafikdatei angeben.
Seite Beschreibung

Frames

Framesets und
Frames

 <html><head><title>Titel</title></head>
<frameset cols="Spalten" rows="Reihen">
<frame src="URI" name="Name">
<noframes>
<body>
<p>Alternativ-Inhalt (Zusammenfassung, Sitemap ...)</p>
<p>Wird angezeigt, wenn der Browser keine Frames anzeigen kann</p>
</body>
</noframes>
</frameset>
</html>
Anzeigefenster in Spalten (cols) oder Reihen (rows) aufteilen.
Zwei oder mehrere Teile in Pixeln oder Prozent angeben, durch Kommata getrennt, z.B. rows="60%,40%".
Wildcard * erlaubt, z.B. cols="200,*".
Verschachtelung von Framesets möglich.
Für jedes entstehende Segment ein <frame>-Tag notieren.
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Datei angeben, die im Frame-Fenster angezeigt werden soll.
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Bereich mit noframes-Element notieren wie gezeigt. Inhalt wird nur angezeigt, wenn Browser keine Frames anzeigen kann. Inhalt kann HTML-Elemente enthalten.
Seite Beschreibung

Scrollbars
in Frames

 <frame src="URI" name="Name" scrolling="Option">
Für Option einen der folgenden Werte angeben:
yes = Scrollbars anzeigen,
no = keine Scrollbars anzeigen (kein Scrollen möglich),
auto = Scrollbars bei Bedarf anzeigen (Normaleinstellung).
Seite Beschreibung

Abstand/Rand zu
Fensterinhalt

 <frame src="URI" name="Name"
   marginwidth="LinksRechts" marginheight="ObenUnten">
Für LinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Frame-Rand zum Frame-Inhalt links und rechts zu bestimmen.
Für ObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Frame-Rand zu Frame-Inhalg oben und unten zu bestimmen.
Seite Beschreibung

Unveränderbare
Fenstergröße

 <frame src="URI" name="Name" noresize>
Alle benachbarten Frames sind durch noresize mit betroffen.
Seite Beschreibung

Rahmendicke/
unsichtbare Rahmen

 <frame src="URI" name="Name" frameborder="Dicke">
<frameset [...]
    border="Dicke" frameborder="Dicke" framespacing="Abstand">
HTML-Standard erlaubt nur border-Attribut im <frame>-Tag. Browser interpretieren diese Angaben jedoch anders als HTML-Standard, nämlich im <frameset>-Tag. Für unsichtbare Rahmen alle drei Werte für Dicke auf 0 setzen.
Seite Beschreibung

Eingebettete
Frames

 <iframe src="URI" name="Name"
   width="Breite" height="Höhe">
Inhalt bei Nichtanzeige
</iframe>
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Datei angeben, die im Frame-Fenster angezeigt werden soll.
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Breite und Höhe eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 60% für Größe in Bezug auf Umgebung.
Seite Beschreibung

Eigenschaften
eingebetteter
Frames

 <iframe src="URI" name="Name"
   width="Breite" height="Höhe" scrolling="Option"
   align="Ausrichtung" hspace="LinksRechts" vspace="ObenUnten"
   marginwidth="RandLinksRechts" marginheight="RandObenUnten">
Inhalt bei Nichtanzeige
</iframe>
Für Option einen der folgenden Werte angeben:
yes = Scrollbars anzeigen,
no = keine Scrollbars anzeigen (kein Scrollen möglich),
auto = Scrollbars bei Bedarf anzeigen (Normaleinstellung).
Für Ausrichtung einen der folgenden Werte notieren:
left = Fenster links ausrichten (nachfolgende Inhalte fließen rechts vorbei),
right = Fenster rechts ausrichten (nachfolgende Inhalte fließen links vorbei),
Für LinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Fenster zur Umgebung links und rechts zu bestimmen.
Für ObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Fenster zur Umgebung oben und unten zu bestimmen.
Für RandLinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Fensterrand zum Fensterinhalt links und rechts zu bestimmen.
Für RandObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Fensterrand zum Fensterinhalt oben und unten zu bestimmen.
Seite Beschreibung

Multimediaobjekte

Daten als Objekt
einbinden

 <object data="URI" type="MIME-Typ" width="Breite" height="Höhe">
Alternativer Inhalt
</object>
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Datei angeben, die angezeigt werden soll.
Für MIME-Typ so etwas wie image/svg+xml notieren, je nachdem, welcher Dateityp referenziert wird.
Für Breite und Höhe eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 60% für Größe in Bezug auf Umgebung.
Seite Beschreibung

Java-Applets als
Objekt

 <object width="Breite" height="Höhe"
   classid="java:datei.class" codebase="URI" codetype="application/java-vm">
<param name="Name" value="Wert">
</object>
codebase-Attribut angeben, wenn Applet nicht im aktuellen Verzeichnis liegt. Mit URI die Adresse des Verzeichnisses angeben.
Parameter mit name- und value-Attribut angeben wenn es das Applet erfordert.
Seite Beschreibung

ActiveX als
Objekt

 <object width="Breite" height="Höhe"
   classid="CLSID:XXXXXX-XXXX-XXXXXX">
<param name="Name" value="Wert">
</object>
Für XXXXXX-XXXX-XXXXXX die ID des ActiveX-Controls notieren.
Seite Beschreibung

Flash-Movies
als Objekt

 <object width="Breite" height="Höhe"
   classid="CLSID:CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://active.macromedia.com/flash5/cabs/
       swflash.cab#version=5,0,0,0">
<param name="movie" value="datei.swf">
<param name="Name" value="Wert">
</object>
classid-Attribut erhält immer diesen Wert.
Beim codebase-Attribut Flash-Version angeben.
Beim einem der Parameter name-Attribut movie beim value-Attribut den Dateinamen der swf-Datei angeben.
Parameter mit name- und value-Attribut ansonsten angeben wenn es die Anwendung erfordert.
Seite Beschreibung

Rahmen
um Objekt

 <object data="URI" type="MIME-Typ" border="Dicke"></object>
Für Dicke eine Zahl wie z.B. 3 für die Rahmendicke in Pixeln notieren.
Seite Beschreibung

Namen
für Objekt

 <object data="URI" type="MIME-Typ" name="Name"></object>
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Seite Beschreibung

Objekt
im Text
ausrichten

 <object data="URI" type="MIME-Typ" align="Ausrichtung"></object>
Für Ausrichtung einen der folgenden Werte notieren:
top = obenbündig mit Text davor oder danach,
middle = mittig zu Text davor oder danach,
bottom = untenbündig mit Text davor oder danach.
Seite Beschreibung

Text um Objekt
fließen lassen

 <object data="URI" type="MIME-Typ"
   align="Ausrichtung" hspace="LinksRechts" vspace="ObenUnten">
</object>
Für Ausrichtung einen der folgenden Werte notieren:
left = Objekt links ausrichten (nachfolgende Inhalte fließen rechts vorbei),
right = Objekt rechts ausrichten (nachfolgende Inhalte fließen links vorbei),
Für LinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Objekt zur Umgebung links und rechts zu bestimmen.
Für ObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Objekt zur Umgebung oben und unten zu bestimmen.
Seite Beschreibung

Meldung bei
Ladevorgang

 <object data="URI" type="MIME-Typ" standby="Text"></object>
Für Text einen Meldungstext notieren.
Seite Beschreibung

Objektinstanz
nur auf Wunsch

 <object declare classid="CLSID:XXXXXX-XXXX-XXXXXX">
</object>
Attribut declare.
Seite Beschreibung

Java-Applets
einbinden

 <applet code="datei.class" codebase="URI" alt="Text"
   width="Breite" height="Höhe">
<param name="Name" value="Wert">
</applet>
codebase-Attribut angeben, wenn Applet nicht im aktuellen Verzeichnis liegt. Mit URI die Adresse des Verzeichnisses angeben.
Für Breite und Höhe eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 60% für Größe in Bezug auf Umgebung.
Parameter mit name- und value-Attribut angeben wenn es das Applet erfordert.
Seite Beschreibung

Java-Applets-
Eigenschaften

 <applet code="datei.class" codebase="URI" alt="Text"
   width="Breite" height="Höhe"
   align="Ausrichtung" hspace="LinksRechts" vspace="ObenUnten">
<param name="Name" value="Wert">
</applet>
Für Ausrichtung einen der folgenden Werte notieren:
top = obenbündig mit Text davor oder danach,
middle = mittig zu Text davor oder danach,
bottom = untenbündig mit Text davor oder danach.
left = Applet links ausrichten (nachfolgende Inhalte fließen rechts vorbei),
right = Applet rechts ausrichten (nachfolgende Inhalte fließen links vorbei),
Für LinksRechts eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Applet zur Umgebung links und rechts zu bestimmen.
Für ObenUnten eine Zahl wie z.B. 10 notieren, um den Pixelabstand von Applet zur Umgebung oben und unten zu bestimmen.
Seite Beschreibung

Multimedia
(Netscape)

 <embed src="URI" width="Breite" height="Höhe">
Gehört nicht zum HTML-Standard!
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Datei angeben, die angezeigt werden soll.
Für Breite und Höhe eine Zahl wie z.B. 100 für Pixel angeben,
oder einen Prozentwert wie z.B. 60% für Größe in Bezug auf Umgebung.
Seite Beschreibung

Layer (Netscape)

Layer definieren

 <layer id="Name" top="oben" left="links" width="Breite" height="Höhe">
Inhalt
</layer>
Für Name einen dokumentweit eindeutigen Namen vergeben. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für oben und links Pixel wie z.B. 40 und 150 für die obere linke Startecke angeben. Für Breite und Höhe eine Zahlen wie z.B. 100 und 200 für Pixel angeben.
Seite Beschreibung

Inline-Layer
definieren

 <ilayer>Inhalt</ilayer>
Seite Beschreibung

Anzeigebereich
beschneiden

 <layer top="oben" left="links" clip="x1,x2,x3,x4">Inhalt</layer>

<layer top="oben" left="links" clip="xb,xh">Inhalt</layer>
x1 = Pixel für links.
x2 = Pixel für oben.
x3 = Pixel für rechts.
x4 = Pixel für unten.
xb = Pixel für Breite.
xh = Pixel für Höhe.
Seite Beschreibung

Externe Datei

 <layer top="oben" left="links" src="URI">
Inhalt</layer>
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Datei angeben, die angezeigt werden soll.
Seite Beschreibung

Hintergrundfarbe

 <layer top="oben" left="links" bgcolor="#XXXXXX">
Inhalt</layer>
Für #XXXXXX eine hexadezimal notierte RGB-Farbe angeben oder einen erlaubten Farbnamen.
Seite Beschreibung

Hintergrundbild

 <layer top="oben" left="links" background="#URI">
Inhalt</layer>
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Grafikdatei angeben.
Seite Beschreibung

Schichtposition
mit Namen

 <layer top="oben" left="links" above="Name" below="Name">
Inhalt</layer>
Wenn zuvor definierter Layer über dem aktuellen liegen soll, dessen id-Namen bei above angeben. Wenn zuvor definierter Layer unter dem aktuellen liegen soll, dessen id-Namen bei below angeben.
Seite Beschreibung

Schichtposition
mit Nummern

 <layer top="oben" left="links" z-index="Wert">
Inhalt</layer>
Bei Wert eine Nummer vergeben. Layer mit höchster Nummer überdeckt alle anderen, Layer mit niedrigster Nummer wird von allen anderen überdeckt.
Seite Beschreibung

Sichtbarkeit

 <layer top="oben" left="links" visibility="Option">
Inhalt</layer>
Für Option einen der folgenden Werte notieren:
show = Layer sichtbar,
hide = Layer unsichtbar,
inherit = Layer erbt Sichtbarkeit vom Eltern-Layer.
Seite Beschreibung

Weiterführende HTML-Elemente

Stylesheet-Bereich
für CSS

 <head>
<style type="text/css">
<!--
[ Zentrale Formate ]
-->
</style>
</head>
Seite Beschreibung

CSS-Formatierungen
im Text

 <[Elementname] style="[ CSS -Eigenschaften]">...</[Elementname]>
Seite Beschreibung

Script-Bereich

 <script type="text/javascript">
<!--
/* JavaScript-Code */
//-->
</script>
<noscript>
Inhalt, wenn kein JavaScript möglich ist
</noscript>
Seite Beschreibung

nach oben
weiter | Seite Kurzreferenz: CSS
zurück | Seite Häufig gestellte Fragen
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


SELFHTML: Navigationshilfen

SELFHTML

Navigationshilfen
Kapitelseite

Die Navigationshilfen helfen beim Zugriff auf gewünschte oder gesuchte Information. Es gibt dabei ganz verschiedene Navigationshilfen für unterschiedliche Zielgruppen (Anfänger, Profis) und für unterschiedliche Arbeitsweisen. Machen Sie sich mit den einzelnen Navigationshilfen vertraut, und finden Sie für sich selbst heraus, mit welchen davon Sie gut arbeiten können.

Seite Wie fange ich an?
Seite Häufig gestellte Fragen

Seite Kurzreferenz: HTML
Seite Kurzreferenz: CSS

Seite Inhaltsverzeichnis
Seite Syntaxverzeichnis
Seite Stichwortverzeichnis

Seite Quickbar
Seite Sidebars
Seite Suche

nach oben

© 2007 Seite Impressum


SELFHTML: Navigationshilfen / Inhaltsverzeichnis

SELFHTML

Inhaltsverzeichnis
Informationsseite

nach unten Hinweis
nach unten Verzeichnis
nach unten Editorial
nach unten Einführung
nach unten HTML/XHTML
nach unten CSS (Stylesheets)
nach unten XML/DTDs
nach unten JavaScript/DOM
nach unten Dynamisches HTML
nach unten Perl
nach unten PHP
nach unten Internationalisierung
nach unten Grafik
nach unten Web-Projektverwaltung
nach unten Webserver/CGI
nach unten Diverse technische Ergänzungen
nach unten

Hinweis

Das Inhaltsverzeichnis listet alle Seiten des inhaltlichen Teils von SELFHTML auf.
Teil von solche Verweise führen zu den entsprechenden Kapitelübersichtsseiten.
Seite solche Verweise führen zu Seiten mit Information.
Die Hierarchie ist durch Einrückungen sichtbar gemacht.

Verzeichnis

Teil von Editorial
Seite Wichtige Hinweise zu SELFHTML
Seite Copyright zu SELFHTML
Seite Häufig gestellte Fragen zu SELFHTML
Seite Hinweise zum Arbeiten mit SELFHTML
Seite Fehler in SELFHTML melden
Seite Unterstützung von SELFHTML
Seite Impressum zu SELFHTML
Seite SELFHTML sagt "Danke"

Teil von Einführung
Teil von Internet und WWW
Seite Entstehung des Internet
Seite Basis-Standards im Internet
Seite Dienste im Internet
Seite Entstehung des World Wide Web
Teil von Web-Technologien
Seite HTML
Seite Stylesheets
Seite XML und XML-Derivate
Seite JavaScript/DOM
Seite Perl
Seite PHP
Seite Java
Seite ActiveX
Seite Flash
Teil von Schnittstellen
Seite Die CGI-Schnittstelle
Seite Andere Schnittstellen
Teil von Hilfsmittel
Seite Dokumente und Dokumentationen
Seite Software
Seite Services im Web
Seite Support
Teil von Hypertext
Seite Definitionen zu "Hypertext"
Seite Begriffe rund um Hypertext
Seite Geschichte von Hypertext
Seite Hypertext und menschliches Verstehen

Teil von HTML/XHTML
Teil von Allgemeine Regeln für HTML
Seite Textauszeichnung
Seite Grundgerüst einer HTML-Datei
Seite Regeln beim Editieren von HTML
Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen
Seite Farben definieren in HTML
Seite Referenzieren in HTML
Seite Kommentare und Credits
Seite Konventionen für Dateinamen
Seite Informationsverteilung und Dateiorganisation
Seite Guter HTML-Stil
Teil von HTML-Kopfdaten
Seite Titel einer HTML-Datei
Seite Meta-Angaben zum Inhalt
Seite Adressbasis und Zielfensterbasis
Seite Logische Beziehungen
Seite Durchsuchbarkeit mit Server-Kommunikation
Teil von Dateiweite Einstellungen
Seite Farben für Hintergrund, Text und Verweise
Seite Hintergrundbild (Wallpaper)
Seite Seitenränder
Seite Hintergrundmusik
Teil von Elemente zur Textstrukturierung
Seite Überschriften
Seite Textabsätze
Seite Zeilenumbruch
Seite Listen
Seite Zitate und Adressen
Seite Präformatierter Text (wie im Editor eingegeben)
Seite Logische Auszeichnungen im Text
Seite Physische Auszeichnungen im Text
Seite Allgemeine Elemente für Textbereiche
Seite Trennlinien
Seite Ältere Elemente zur Schriftformatierung
Seite Ältere browser-proprietäre Elemente
Teil von Tabellen
Seite Aufbau einer Tabelle
Seite Gestaltung einer Tabelle
Seite Zellen verbinden
Seite Tabellenbeschriftung und Tabellenausrichtung
Seite Tabellen als Mittel für Web-Seiten-Layouts
Seite Tabellen und nicht-visuelle Medien
Teil von Verweise (Links)
Seite Verweise definieren und gestalten
Seite Projekt-interne Verweise
Seite Projekt-externe Verweise
Seite E-Mail-Verweise
Seite Download-Verweise und Verweise auf beliebige Dateien
Seite Typisierte Verweise
Seite Tabulator-Reihenfolge und Tastaturkürzel für Verweise
Teil von Grafiken
Seite Grafiken einbinden
Seite Grafiken ausrichten
Seite Grafiken als Verweise
Seite Verweis-sensitive Grafiken (Image Maps)
Teil von Formulare
Seite Formulare definieren
Seite Eingabefelder und Eingabebereiche
Seite Auswahllisten, Radio-Buttons und Checkboxen
Seite Felder für Datei-Upload
Seite Versteckte Elemente
Seite Gruppierung von Elementen und Label für Elemente
Seite Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
Seite Klick-Buttons
Seite Buttons zum Absenden oder Abbrechen
Seite Formulare mit CSS formatieren
Seite Formulare verarbeiten
Teil von Frames
Seite Framesets und Frames definieren
Seite Eigenschaften von Frames
Seite Verweise bei Frames
Seite Eingebettete Frames
Seite Frames als Mittel für Seiten-Layouts
Teil von Multimediaobjekte
Seite Objekte einbinden
Seite Eigenschaften von Objekten
Seite Java-Applets einbinden (herkömmlich)
Seite Multimedia einbinden (Netscape herkömmlich)
Teil von Layer (Netscape)
Seite Layer definieren und positionieren
Seite Layer anordnen und kontrollieren
Teil von Weiterführende HTML-Elemente
Seite Stylesheet-Bereiche in HTML
Seite Script-Bereiche in HTML
Teil von Universalattribute
Seite Allgemeine Universalattribute
Seite Event-Handler für Scripts
Teil von XHTML und HTML
Seite Unterschiede zwischen XHTML und HTML
Seite Modularisierung von XHTML und XHTML 1.1
Teil von HTML-Referenz
Seite HTML-Elementreferenz
Seite HTML-Attribut-Referenz
Seite HTML-Zeichenreferenz
Seite HTML-Varianten (Strict, Transitional, Frameset)

Teil von Stylesheets
Seite Stylesheets und HTML
Teil von CSS-Formate definieren
Seite Stylesheets in HTML einbinden
Seite Zentrale Formate definieren
Seite HTML-Elemente direktformatieren
Seite Kaskade - Anwendung von Stylesheets auf Dokumente
Seite Maßeinheiten, Farbangaben und Wertzuweisung
Seite Box-Modell
Teil von CSS-Eigenschaften
Seite Schriftformatierung
Seite Schriftformatierung mit Schriftartendatei
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder
Seite Listenformatierung
Seite Tabellenformatierung
Seite Pseudoelemente und Pseudoklassen
Seite Positionierung und Anzeige von Elementen
Seite Layouts für Printmedien
Seite Sound-Kontrolle für Sprachausgabe
Seite Anzeigefenster
Seite Filter (nur Microsoft)
Teil von CSS-basierte Layouts
Seite Einführung in CSS-basierte Layouts
Seite Mehrspaltige CSS-basierte Layouts
Seite Fixe Bereiche mit CSS-basierten Layouts
Seite CSS-basierte Navigationsleisten
Seite CSS-Browserweichen zum Ausschließen älterer Browser

Teil von XML/DTDs
Seite Einführung in XML
Teil von Regeln für XML-Dateien
Seite XML-Deklaration und Verarbeitungsanweisungen
Seite Die Dokumenttyp-Deklaration
Seite Regeln für Tags, Attribute, Wertzuweisungen und Kommentare
Seite Wohlgeformtheit, Gültigkeit und Vollständigkeit einer XML-Datei
Seite Baumstruktur und Knoten einer XML-Datei
Seite XML-Namensräume
Seite Zeichen, Zeichenkodierungen und nicht interpretierte Abschnitte
Seite Regeln beim Editieren von XML und Dateinamenkonventionen
Teil von Dokumenttyp-Definitionen (DTDs)
Seite Allgemeines zu DTDs
Seite Bearbeitungsregeln für DTDs
Seite Elemente und Verschachtelungsregeln
Seite Attribute und Wertzuweisungen
Seite Entities für Textbausteine und Umschreibungen
Seite Notations für referenzierte Daten
Teil von Darstellung von XML-Daten
Seite XML-Darstellung mit Stylesheets
Seite Grundlagen von XSL/XSLT
Seite Beispiele für XSLT
Seite XSLT-Elemente
Seite XPath-Syntax
Seite XPath-Funktionen

Teil von JavaScript/DOM
Seite Einführung in JavaScript und DOM
Teil von JavaScript-Sprachelemente
Seite Allgemeine Regeln für JavaScript
Seite Variablen und Werte
Seite Objekte, Eigenschaften und Methoden
Seite Funktionen
Seite Steuerzeichen und besondere Notationen
Seite Operatoren
Seite Bedingte Anweisungen (if-else/switch)
Seite Schleifen (while/for/do-while)
Seite Reservierte Wörter
Seite Event-Handler
Teil von Objektreferenz
Seite window
Seite frames
Seite document
Seite HTML-Elementobjekte
Seite node
Seite all
Seite style
Seite anchors
Seite applets
Seite forms
Seite elements
Seite options
Seite images
Seite embeds
Seite layers
Seite links
Seite event
Seite history
Seite location
Seite Array
Seite Boolean
Seite Date
Seite Function
Seite Math
Seite navigator
Seite mimeTypes
Seite plugins
Seite Number
Seite RegExp
Seite Screen
Seite String
Seite Objektunabhängige Funktionen
Teil von Anwendungsbeispiele
Seite Zwei Frames gleichzeitig ändern
Seite Seitenanzeige in Frames verhindern
Seite Taschenrechner
Seite Monatskalender
Seite Persönliche Seitenbesuche zählen mit Cookies
Seite Formulareingaben überprüfen
Seite Dynamische grafische Buttons
Seite Aufenthaltsdauer auf Web-Seite anzeigen
Seite Verweisliste als Auswahlliste
Seite Fehlerbehandlung mit dem Event-Handler onerror
Seite Fehlerbehandlung mit try..catch
Seite Änderungen der Fenstergröße überwachen

Teil von Dynamisches HTML
Seite Allgemeines zu Dynamischem HTML
Teil von Die verschiedenen DHTML-Modelle
Seite Das Document Object Model (DOM)
Seite Das ältere DHTML-Modell von Microsoft
Seite Das ältere DHTML-Modell von Netscape
Seite Datenanbindung (nur Microsoft)
Seite Dynamische Filter (nur Microsoft)
Teil von Beispiele für die Praxis
Seite Allgemeine DHTML-Bibliothek
Seite Dynamische Navigationsleiste
Seite Laufende Datums-/Uhrzeitanzeige
Seite Bilderbuch zum Umblättern

Teil von Perl
Teil von Einführung in Perl
Teil von Perl-Sprachelemente
Seite CGI-notwendige Anweisungen in Perl
Seite Skalare (Variablen)
Seite Listen bzw. Arrays (Variablen)
Seite Hashes (Variablen)
Seite Referenzen bzw. Zeiger (Variablen)
Seite Vordefinierte Variablen in Perl
Seite Zeichenketten (Strings)
Seite Zahlen
Seite Bedingte Anweisungen
Seite Schleifen
Seite Sprungbefehle
Seite Operatoren
Seite Reguläre Ausdrücke
Seite Subroutinen
Seite Tokens
Seite Objektorientiertes Programmieren
Seite CGI-typische Aufgaben in Perl
Teil von Perl-Funktionen
Seite Funktionen für Zeichenketten
Seite Funktionen für Listen bzw. Arrays und Hashes
Seite Funktionen für Berechnungen
Seite Funktionen für die Kontrolle des laufenden Scripts
Seite Funktionen für Datum und Uhrzeit
Seite Funktionen für Ein-/Ausgabe und Lesen/Schreiben von Daten
Seite Funktionen für Datei- und Verzeichnis-Management
Seite Funktionen für Betriebssystemaufrufe
Seite Funktionen für Informationen aus Konfigurationsdateien
Seite Funktionen für Module und Packages
Teil von Perl-Module
Seite Einführung in das Arbeiten mit Modulen
Seite Standardmodule von Perl
Seite CPAN-Module
Seite Modul CGI: Funktionen für die CGI-Programmierung

Teil von PHP

Teil von Internationalisierung
Seite Computer und geschriebene Sprache
Seite Zeichenkodierungen (ISO-8859-Familie und andere)
Seite Das Unicode-System
Seite Downloadbare Schriftarten

Teil von Grafik
Seite Grafikformate für Web-Seiten
Seite Typische Grafiksorten für Web-Seiten
Seite Techniken und Begriffe der Bildbearbeitung
Seite Animierte GIF-Grafiken

Teil von Web-Projektverwaltung
Seite Web-Projekte planen
Seite Web-Projekte publizieren
Seite Web-Projekte bekannt machen
Seite Web-Projekte kontrollieren
Seite Provider wechseln mit Web-Projekten
Seite Rechtliche Aspekte von Web-Projekten

Teil von Webserver/CGI
Teil von Webserver
Seite Webserver lokal auf einem PC einrichten
Seite Der Apache HTTP-Webserver
Seite SSI (Server Side Includes)
Seite .htaccess - Server-Reaktionen kontrollieren
Seite Umleitungen mit mod_rewrite
Seite Andere Server
Seite HTTP-Statuscodes
Teil von CGI
Seite CGI und HTML
Seite CGI-Scripts auf öffentlichem Webserver installieren
Seite CGI-Umgebungsvariablen
Seite HTML-Formulare und CGI

Teil von Diverse technische Ergänzungen
Seite MIME-Typen
Seite Sprachen- und Länderkürzel
Seite Client-Identifikationen
Seite robots.txt - Robots kontrollieren
Seite Standard-Farbpaletten

nach oben
weiter | Seite Syntaxverzeichnis
zurück | Seite Kurzreferenz: CSS
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


SELFHTML: Navigationshilfen / Stichwortverzeichnis

SELFHTML

Stichwortverzeichnis
Informationsseite

nach unten Hinweis

# | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Z
nach unten

Hinweis

Das Stichwortverzeichnis enthält wichtige Begriffe, Ausdrücke und Schlagwörter. Es enthält jedoch keine Sprachbefehle, Elementnamen, Attributnamen und dergleichen. Für solche Zwecke steht das Seite Syntaxverzeichnis zur Verfügung.
Wenn Sie einen gesuchten Begriff oder Ausdruck im Stichwortverzeichnis nicht finden, probieren Sie es mit der Seite Suche.

#

16-Farben-Palette
216-Farben-Palette

A

Abbrechen-Buttons (Formular)
Absatzkontrolle
Absatznummerierung
Absatztypen
Absätze
Abschnitte (HTML)
Absendebuttons
Absendewert (Auswahllisteneinträge)
Absolute Maßangaben (CSS)
Absolute Pfadangaben
Absolute Positionierung
Abstände (zu Nachbar-/Elternelementen)
Abstände (Inhalt zum Elementrand)
Access-Log
Active Server Pages (ASP)
ActiveX
ActiveX-Controls als Objekt
Activities (W3C)
Addition (JavaScript)
Addition (Perl)
Adresse, eigene
Adressen (HTML)
Adressenwechsel
Adressbasis (URI)
Adressleisten-Grafik (Favoriten-Icon)
Änderungsmarkierungen
Alertbox (JavaScript)
Alleinstehende Zeilen (am Seitenende)
Alleinstehende Zeilen (am Seitenanfang)
Alphabetische Nummerierung
Alpha-Effekt (CSS, Microsoft-Filter)
Alphakanal
Alternative Inhalte (.htaccess)
Alternativtext
Andreessen, Marc
Anfänger
Anführungszeichen (CSS)
Animierte GIFs
Anker (HTML)
Anker (JavaScript)
Ankündigung (Web-Projekte)
Anmelden bei Suchmaschinen
Anonymer Hash
Anonymes FTP
Anti-Aliasing
Anweisungen (JavaScript)
Anweisungen (Perl)
Anweisungsblöcke (JavaScript)
Anweisungsblöcke (Perl)
Apache (Web-Server)
Arithmetische Funktionen (JavaScript)
Arithmetische Funktionen (Perl)
ARPA-Net
Array-Funktionen (Perl)
Arrays (JavaScript)
Arrays (Perl)
Assoziative Arrays (JavaScript)
Assoziierte Knoten (XML)
ASP
Attachments (bei Formularen)
Attribut-Definitionen (XML)
Attribute (HTML)
Attributknoten
Auflösung Bildschirm (JavaScript)
Aufzählungsliste
Aufzählungszeichen
Augment
Ausblenden
Ausdrucken (mit JavaScript)
Ausgabemedien, verschiedene
Ausgrauen (Formularelemente)
Auslesen (Formularelemente)
Ausrichten (Bereiche)
Ausrichten (eingebettete Frames)
Ausrichten (Grafiken)
Ausrichten (Java-Applets)
Ausrichten (CSS)
Ausrichten (Objekte)
Ausrichten (Tabellen)
Ausrichten (Textabsätze)
Ausrichten (Überschriften)
Ausschneiden (Elementbereich)
Auswahllisten
Auswahllisten (mit JavaScript)
Auswerten (Web-Statistiken)
Auszeichnung (Markup)
Auszeichnungssprache
Authoring
Automatisch ablaufende Präsentation
Automatische Nummerierung
Automatische Weiterleitung
Autoren-Angabe
Autoren-Stylesheet (CSS)
Außenränder

B

Back-Funktion (mit JavaScript)
Backbone
Backtracking
Bars (Grafiksorte)
Baumstruktur (bei Elementen)
Bedingte Anweisungen (JavaScript)
Bedingte Anweisungen (Perl)
Bekannt machen (Web-Projekte)
Benannte Zeichen
Benutzer-Stylesheet (CSS)
Berechnungen (JavaScript)
Berechnungen (Perl)
Bereiche (HTML)
Berners-Lee, Tim
Beschreibung (für Frames)
Beschreibung (für Grafiken)
Beschreibung (für Seiteninhalt)
Beschriftung (Tabellen)
Bestätigungsfenster (JavaScript)
Besucherstatistik
Betriebssystemaufrufe (Perl)
Bild (in Favoriten und Adresszeile)
Bilder (in HTML)
Bildlaufleisten
Bildschirm-Informationen (JavaScript)
Bildschirmauflösung (JavaScript)
Bildwechsel
Binärdaten (Perl)
Bit-Operatoren (JavaScript)
Bit-Operatoren (Perl)
Bits
Bitstream-Fonts
BlendTrans-Filter (Microsoft)
Blinde Tabellen
Blinder Pixel
Blinkender Text
Block-Element, allgemeines
Block-Elemente
Blocksatz
Body (HTML)
Boole'sche Werte (JavaScript)
Box-Modell (CSS)
Box-Modell-Fehler (CSS)
Breite (CSS)
Breite (eingebettete Frames)
Breite (Grafiken)
Breite (Java-Applets)
Breite (Objekte)
Breite (Tabellen)
Breite (Tabellenspalten)
Browser-Abfrage (JavaScript)
Browser-Fenster (JavaScript)
Browser-Identifikation
Browser-Stylesheet (CSS)
Bullet-Liste
Bullet-Zeichen
Bush, Vannevar
Buttons
Buttons (Grafiksorte)
Bytes

C

Candidate Recommendation (W3C)
Cascading Stylesheets
Cache-Speicher umgehen
CDATA
CDATA (XML)
CGI-Aufrufe (aus HTML)
CGI-Ausgaben in HTML
CGI-Modul (Perl)
CGI-Schnittstelle
CGI-Scripts
CGI-Services
CGI-Umgebungsvariablen
Chat (IRC)
Chat (für eigene Homepage)
Checkboxen
Chroma-Effekt (Microsoft-Filter, CSS)
Client-Identifikation
Client-Server-Technologie
Clip-Region
Cliparts (Grafiksorte)
Code verstecken
Common Gateway Interface (CGI)
Component Object Model (COM)
Conditional Comments
Cookies (JavaScript)
Cookies (Perl/CGI-Modul)
Corporate Design
Counter
Counter (Perl)
CPAN-Module (Perl)
Credits
CSS
CSS-basierte Layouts
CSS-Bereiche
CSS-Browserweichen
CSS-Dateien, separate
CSS-Hacks
CSS-Versionen
Cursor

D

Datei-Handling (Perl)
Datei-Operationen (Perl)
Datei-Upload-Felder
Dateien einbinden
Dateiendungen
Dateinamen
Dateirechte
Datenanbindung (Microsoft)
Datenbank-Front-End (Perl)
Datenformatierung (Perl)
Dateninseln
Datenzellen
Datumsfunktionen (JavaScript)
Datumsfunktionen (Perl)
Daumenkino-Effekte
Deaktivieren (Formularelemente)
Default-Dateinamen
Definitionsliste
Definitionssprache
Deklaration (CSS)
Deklaration (XML)
Dekrementierung (JavaScript)
Dekrementierung (Perl)
DENIC
Dezentrales Netzwerk
DHTML
DHTML-Bibliothek
Dia-Show-Effekte
Dithering
Division (JavaScript)
Division (Perl)
DNS
Document Object Model (DOM)
Dokumentationen
Dokumenttyp-Definition (XML)
Dokumenttyp-Deklaration (HTML/XHTML)
Dokumenttyp-Deklaration (XML)
Dokumenttyp-Weiche (CSS)
Domain Name Service
Domain-Adresse, eigene
Dots (Grafiksorte)
Douglas C. Engelbart
Download
Download-Schriftarten
Download-Verweise
Dropdown-Liste
Druck-Layouts
Drucken (mit JavaScript)
DTDs (XML)
Dublin Core
Durchgestrichen (Text)
Dynamische Buttons
Dynamisches HTML

E

E-Mail
E-Mail-Adresse auslesen
E-Mail-Formulare
E-Mail-Verweise
Ebone
ECMAScript
Eigenschaft (CSS)
Ein-/Ausgabefunktionen (Perl)
Einbinden von Daten (HTML)
Einbinden von Daten (SSI)
Einblenden
Eingabebereiche
Eingabefelder
Eingabefenster (JavaScript)
Eingabeüberprüfung
Eingebettete Frames (HTML)
Einrückung (Text)
Einstiegsseite
Elementdefinitionen (XML)
Elemente (HTML)
Elementinhalt (XML)
Elementknoten (XML)
Elternknoten (XML)
Empfehlungen (W3C)
Engelbart, Douglas C.
Entities (HTML)
Entity-Definitionen (XML)
Environment-Variablen (CGI)
Ereignisse (JavaScript)
Error-Diffusion
Erzwungene Leerzeichen
Euro-Zeichen
Event-Handler
Event-Handling (JavaScript)
Event-Überwachung (JavaScript)
Exporter-Modul (Perl)
Externe DTD
Externe Verweise
Extra-Fenster (JavaScript)

F

Fallunterscheidung (JavaScript)
Favicon (Favoriten-Icon)
Frequently asked questions (FAQs)
Farbauswahl
Farben (CSS)
Farben (dateiweit)
Farben (HTML)
Farbige Scroll-Leisten
Farbkanäle
Farbmodelle
Farbnamen (Grundfarben)
Farbnamen (Netscape)
Farbpaletten
Farbtiefe
Fehler melden (SELFHTML)
Fenster (JavaScript)
Fenstergröße (mit JavaScript)
Fett (Text)
File Transfer
File-Handling (Perl)
File-Upload-Felder
Filter (Microsoft)
Filter-Effekte (Grafiken)
Fish-Eye-Views
Flash
Flash-Anwendungen als Objekt
Fließkommazahlen (JavaScript)
Fließkommazahlen (Perl)
Fokussieren (auf Formularelemente)
Foren
Form-Mailer (Perl)
Formate (CSS)
Formatierung von Text
Formatierung von Zahlen (Perl)
Formatsprache
Formulare
Formulare (mit JavaScript)
Formularelemente (mit JavaScript)
Formularverarbeitung (Perl/CGI-Modul)
Formularüberprüfung
Fortsetzung (bei Textumfluss)
Forwarding
Fotonegativ-Effekt (CSS, Microsoft-Filter)
Fotos (Grafiksorte)
Frame-Layouts
Frames
Frames (mit JavaScript)
Framesets
Fremde Schriftzeichen
Frequently asked questions (FAQs)
FTP
FTP-Programme
Funktionen (JavaScript)
Funktionszeichen (Perl)

G

Gammakorrektur
Gateways
Gästebuch (für eigene Homepage)
Gästebuch (Perl)
Gemischter Inhalt (XML)
Generierter Inhalt
Geschützte Dateien/Verzeichnisse
Geschützte Leerzeichen
GET-Methode
GIF-Format
Gitternetz (Tabelle)
Gleitkommazahlen (JavaScript)
Gleitkommazahlen (Perl)
Gliederung (Web-Projekte)
Gliederungsnummerierung
Glossarliste
Globale Variablen (JavaScript)
Glühender Rand (CSS, Microsoft-Filter)
Glyphen
Gopher
Grafikprogramme
Grafikreferenzen (in HTML)
Grafikreferenzen (mit JavaScript)
Grafische Verweise
Graustufen
Graustufen (CSS, Microsoft-Filter)
Griechische Buchstaben (HTML)
Groß-/Kleinschreibung (HTML/XHTML)
Grundgerüst (HTML)
Grundgerüst (XHTML)
Gruppierung (in Formularen)
Gültigkeit (XML)
Guided tours

H

Hash-Funktionen (Perl)
Hashes (Perl)
Helligkeit
Hexadezimalrechnung
Hidden-Felder
Hilfe bei Problemen
Hintergrund
Hintergrund (bei Tabellen)
Hintergrundbild (dateiweit)
Hintergrundfarbe (dateiweit)
Hintergrundgrafiken
Hintergrundmusik
Histogramm
Hits
Hochgestellt (Text)
Höhe (CSS)
Höhe (eingebettete Frames)
Höhe (Grafiken)
Höhe (Java-Applets)
Höhe (Objekte)
Höhe (Tabellen)
Homepages, kostenlose
Horizontal ausrichten
Horizontal spiegeln (CSS, Microsoft-Filter)
Hostnummer
Hotkeys
Hover-Effekt
HSB-Farben
htaccess-Dateien
HTML
HTML-Attribute
HTML-Editoren
HTML-Elemente
HTML-Elementobjekte (JavaScript/DOM)
HTML-Parser
HTML-Stil
HTML-Varianten
HTML-Versionen
HTML-Zeichen
HTTP-Header senden (Perl/CGI-Modul)
HTTP-Protokoll
HTTP-Status-Codes
Hurenkinder (DTP-Begriff, CSS)
Hyperlinks
Hyperlinks (mit JavaScript)
Hypermedia
Hypertext
Hypertext Abstract Machines (HAM)
Hypertext Markup Language
Hypertext Preprocessor

I

I/O-Funktionen (Perl)
ICANN
Icon (in Favoriten und Adresszeile)
ID-Attribute (XML)
IDREF-Attribute (XML)
Image-Maps
Important-Regel (CSS)
Individualformate (CSS)
Indizierte Farben
Information Retrieval
Informations- und Kommunikationsdienstegesetz (IuKDG)
Informationseinheiten
Inkrementierung (JavaScript)
Inkrementierung (Perl)
Inline-Element, allgemeines
Inline-Elemente
Inline-Frames (HTML)
Innenabstände
Input-Felder
Interest groups (W3C)
Internal Server Error
Interne DTD
Internet
Internet drafts
Internet Explorer (Browser)
Interpunktionszeichen (HTML)
Invertieren (CSS, Microsoft-Filter)
IP-Adressen
IP-Bereiche ausschließen
IRC
ISO 3166 Länderkürzel
ISO 639-1 Sprachenkürzel
ISO 8879 SGML
ISO-8859-Zeichenabstanden

J

Ja/Nein-Fenster (JavaScript)
Java
Java-Applets
Java-Applets (mit JavaScript)
Java-Applets als Objekt
JavaScript
JavaScript-Dateien
JPEG-Format
JScript

K

Kapitelnummerierung
Kaskade (CSS)
Kindknoten (XML)
KindProzess (mit Perl)
Kiosk-Modus (Vollbildmodus)
KK-Antrag
Klasse-A(B/C)-Netze
Klassenformate (CSS)
Klick-Buttons
Knoten / Knoten-Sets
Kodierung, verwendete (HTML)
Kodierung, verwendete (CSS)
Kohäsive Geschlossenheit
Kommazahlen (JavaScript)
Kommazahlen (Perl)
Kommentar (HTML)
Kommentar (HTML, Conditional Comments)
Kommentare(CSS)
Kommentare (JavaScript)
Kommentare (Perl)
Kommentare (XML-DTDs)
Konnektierung (Domain)
Kontakt (SELFHTML)
Kontrast
Kopf (HTML)
Kopfzellen (Tabellen)
Kostenaufwand (Web-Projekte)
Kostenlose Homepages
Kursiv (Text)

L

Label (bei Formularen)
Ladevorgang, Hinweis bei
Länderkürzel
Langbeschreibung (für Frames)
Langbeschreibung (für Grafiken)
Lauftext (Marquee)
Laufweite Schrift (CSS)
Layer (mit JavaScript)
Layer (Netscape)
Layouts
Leere Elemente (XML)
Leerraum erzeugen
Leerzeichen
Lese-Schreib-Funktionen (Perl)
Lesezeichen
Linien (grafisch)
Linien (HTML)
Linkfarben (dateiweit)
Linkhaftung
Links
Links (mit JavaScript)
Linksbündige Ausrichtung
Listen
Listen (Perl)
Listen-Funktionen (Perl)
Listenformatierung
Log-Dateien
Logische Beziehungen
Logische Operatoren (JavaScript)
Logische Operatoren (Perl)
Logische Textauszeichnung
Lokale Variablen (JavaScript)
Lost in hyperspace
LuraWave

M

Mailing-Listen
Mail-Adresse auslesen
Mailto-Formulare
Mailto-Verweise
Marc Andreessen
Markenrecht
Markup
Marquee (Lauftext)
Maske (CSS, Microsoft-Filter)
Maskieren (HTML)
Maskierung (Perl)
Mathematische Funktionen (Perl)
Mathematische Symbole (HTML)
MathML
Mauszeiger
Mausereignisse (JavaScript)
Maximalbreite
Maximalhöhe
Maßeinheiten
Mediendienstestaatsvertrag (MdStV)
Medientypen (CSS)
Mehrspaltiger Textfluss
Mehrzeilige Eingabefelder
Meldungsfenster (JavaScript)
Meldungstext, bei Ladevorgang
Memex
Menüliste (HTML)
Menüstruktur
Meta-Angaben
MIME-Typen
MIME-Typ-Informationen (JavaScript)
Mindestbreite
Mindesthöhe
mod_rewrite (Apache)
Modul-Funktionen (Perl)
Modulare DTDs
Modularisierung (XHTML)
Module (Perl)
Modulo-Division (JavaScript)
Modulo-Division (Perl)
Mosaic (Browser)
Multimedia (Netscape)
Multimediaobjekte (HTML)
Multiplikation (JavaScript)
Multiplikation (Perl)

N

Named entities
Namensadresse, eigene
Namensadressen ausschließen
Namensräume (Perl)
Namensräume (XML)
National Science Foundation (NSF)
Navigation
Navigationsbuttons (Grafiksorte)
NCSA
Nelson, Ted
Netscape (Browser)
Netscape-Farbnamen
Netscape-Palette
Netz der Netze
Netzwerknummer
Newsgroups
Nicht unterstrichene Links
Noframes-Bereich
Notations (XML)
Nummerierte Liste
Nummerierung, automatische
Numerische Maßeinheiten
Numerische Werte (Perl)

O

Objekte (HTML)
Objekte (JavaScript)
Objekthierarchie (JavaScript)
Objektorientiertes Programmieren (Perl)
Operatoren (JavaScript)
Operatoren (Perl)
Originaladresse, laden von

P

Package-Funktionen (Perl)
Packages (Perl)
Page-Impressions
Page-Transition (Microsoft)
Pageviews
Paletten
Panose-1
Parameter (Java-Applets)
Parameter (JavaScript-Funktionen)
Parameter (Perl-Subroutinen)
Parameter-Entities
Parser (HTML)
Parser (XML)
Passermarken
Passwortfelder
Passwortschutz
Patentrecht
PCDATA
Perl
Perl-Bereiche
Perl-Interpreter
Perldoc
Pfadangaben, absolute
Pfadangaben, relative
Pfeil-Symbole (HTML)
PGP
PHP
Physische Textauszeichnung
PICS
Pixelgrafik
Pixeltrick
Plugins (mit JavaScript)
PNG-Format
Pointer-Variablen (Perl)
Popup-Fenster (JavaScript)
Positionierung
POST-Methode
Pretty Good Privacy
Print-Layouts
Produkthaftungsgesetz
Projektplanung
Prompt-Fenster (JavaScript)
Proposed Recommendation (W3C)
Provider-Übersichten
Providerwechsel
Proxy-Server
Proxy-Server umgehen
Prozess-Funktionen (Perl)
Präformatierter Text
Pseudoelemente
Pseudoklassen
Publizieren (Web-Projekte)
Push-Technologie

Q

Quadratwurzel (JavaScript)
Quadratwurzel (Perl)
Qualifizierte Namen (XML)
Quelltext schützen

R

Radio-Buttons
Ränder
Rahmen
Randabstand
Raum erzeugen
RDF
Readonly-Felder
Rechte Maustaste (JavaScript)
Rechte Maustaste sperren
Rechtliche Aspekte
Rechtsbündige Ausrichtung
Recommendations (W3C)
Redaktion (Web-Projekte)
Redirects (Perl/CGI-Modul)
Referenzen (Perl)
Referenzieren (HTML)
Reguläre Ausdrücke (JavaScript)
Reguläre Ausdrücke (Perl)
Rekursion (Perl)
Relative Maßangaben
Relative Pfadangaben
Reload (mit JavaScript)
Requests for comment (RFCs)
Reset-Buttons
Réseaux IP Européens (RIPE)
Return-Wert (JavaScript)
Return-Wert (Perl)
RevealTrans-Filter (Microsoft)
RGB-Farben
robots.txt
Rollover-Effekt (für grafische Verweise)
Rollover-Effekt (für Textlinks)
Routing
Rückgabewert (JavaScript)
Rückgabewert (Perl)

S

Sättigung
Schaltflächen
Schatten (CSS, Microsoft-Filter)
Schattenwurf (CSS, Microsoft-Filter)
Schema für Meta-Angaben
Schichtposition
Schichtposition (Layer)
Schleifen (JavaScript)
Schleifen (Perl)
Schmuckrahmen
Schnittmarken
Schriftart
Schriftart (mit Schriftartendatei)
Schriftfarbe
Schriftformatierung
Schriftformatierung (HTML)
Schriftgewicht
Schriftgröße
Script-Bereiche
Script-Sprache, default
Schriftstil
Schusterjungen (DTP-Begriff, CSS)
Scroll-Leisten, farbige
Scrollen (mit JavaScript)
Seitenanfragen
Seitenbesuche
Seitenränder
Seitenübergänge (Microsoft)
Seitenumbruch (nach Element)
Seitenumbruch (vor Element)
Select-Listen
Selektor (CSS)
SELFHTML
Server Hosting
Server Housing
Server Side Includes (SSI)
Server-Push
Sessions
SGML
Shebang-Zeile
Sidebars
Signatur
Sitzungen
Skalare (Perl)
SMIL
Software
Sonderzeichen (HTML)
Spalten (Tabelle)
Spezifität (CSS)
Spiegeln, horizontal (CSS, Microsoft-Filter)
Spiegeln, vertikal (CSS, Microsoft-Filter)
Sprachausgabe
Sprachenkürzel
Sprungbefehle (Perl)
SSH
Standardmodule (Perl)
Startseite
Statements (JavaScript)
Statements (Perl)
Statistiken (Web-Projekt)
Statuszeilentext (JavaScript)
STDERR-Kanal
STDIN-Kanal
STDOUT-Kanal
Steuerzeichen (JavaScript)
Steuerzeichen (Perl)
Stichwörter
Strafrecht
Strict (HTML-Typ)
String-Funktionen (Perl)
String-Verknüpfung (JavaScript)
String-Verknüpfung (Perl)
Strings (JavaScript)
Strings (Perl)
Struktur (Web-Projekte)
Stylesheet-Bereiche
Stylesheet-Sprache, default
Stylesheets
Sub-Domains
Submit-Buttons
Subroutinen (Perl)
Subscript (Text)
Subtraktion (JavaScript)
Subtraktion (Perl)
Such-Robots
Superscript (Text)
Support
SVG-Format
Symbole (Grafiksorte)
Symbole (HTML)
System calls (Perl)

T

Tabellen
Tabellen nicht-visuell
Tabellenformatierung
Tabellenkopf,-körper,-fuß
Tabellenlayouts
Tabellenrahmen
Tabellenzeilen
Tabellenzellen
Tabellenüberschrift
Tabulator-Reihenfolge
Tags (HTML)
Tastaturereignisse (JavaScript)
Tastaturkürzel
TCP/IP-Protokoll
Technische Dokumentation
Technische Symbole (HTML)
Ted Nelson
Teledienste-Datenschutzgesetz (TDDSG)
Teledienstegesetz (TDG)
Telnet
Terminierung (Web-Projekte)
Textabsätze
Textareas
Textauszeichnung
Textdateien einbinden
Texteingabefelder
Textfarbe
Textfarbe (dateiweit)
Textformatierung
Textknoten
Textrichtung
Textschatten
Textumfluss
Thread
Thumbnails (Grafiksorte)
Tiefgestellt (Text)
Tim Berners-Lee
Titel
Tokens (Perl)
Top-Level-Domains
Transformation (XSLT)
Transitional (HTML-Typ)
Transliteration (Perl)
transparent (CSS)
Transparenz, echte
Transparenz, Palettenfarbe (z.B. GIF)
Transparenz-Effekt (Microsoft-Filter, CSS)
Trennlinien
Trennlinien (grafisch)
Trigonometrische Funktionen (JavaScript)
Trigonometrische Funktionen (Perl)
TrueDoc
Tuning

U

Überlappung
Überschriften
Umbruchkontrolle
Umfluss
Umgebungsvariablen (CGI)
Umkonnektierung (Domain)
Umlaute
Umleitung, automatische
Umleitung (Apache-intern)
Umrandung
Umrechnung (Maßeinheiten)
Unicode
URL
URN
URI
Universalattribute
Unix-Dateirechte
Unsichtbare Elemente
Unterprogramme (Perl)
Unterstrichen (Text)
Upload
Urheberschutz
URI-Encoding (JavaScript)
Usenet
User-Prompt (JavaScript)
User-Statistik

V

Valide (XML)
Vannevar Bush
Variablen (JavaScript)
Variablen, skalare (Perl)
Varianten (HTML)
Verarbeitungsanweisungen (XML)
Verborgener Text
Vergleiche (JavaScript)
Vergleiche (Perl)
Verschachtelung (HTML)
Verschachtelung (XML)
Verschlüsseln (Perl)
Versteckte Elemente (bei Formularen)
Vertikal ausrichten
Vertikal spiegeln (CSS, Microsoft-Filter)
Verweis-sensitive Grafiken
Verweisanker (HTML)
Verweisanker (mit JavaScript)
Verweise
Verweise (mit JavaScript)
Verweisfarben (dateiweit)
Verweisliste als Auswahlliste
Verwischen (CSS, Microsoft-Filter)
Verzeichnis-Browsing
Verzeichnis-Operationen (Perl)
Verzeichnisliste (HTML)
Verzeichnis-Optionen
VGA-Palette
Virtual Hosting
Visits
Vollbildmodus
Vordefinierte Variablen (Perl)
Vordergrundfarbe (CSS)
Vordergrundfarbe (HTML)
Vorschaugrafiken

W

W3-Konsortium (W3C)
Wallpapers (Grafiksorte)
Wasserzeichen-Effekt
Web-Adresse, eigene
Web-Browser
Web-Design
Web-Designer
Web-Ringe
Web-Server (lokal)
Web-Services
Web-Views
Web-Seiten-Layouts
Webspace
WEFT
Weiterleitung, automatische
Wellenverformung (CSS, Microsoft-Filter)
Werbe-Banner
Wert (CSS)
Wertvergleich (JavaScript)
Wertvergleich (Perl)
Wertzuweisung (JavaScript)
Wertzuweisung (Perl)
Wettbewerbsrecht
WML
Wohlgeformtheit (XML)
Working drafts (W3C)
Working groups (W3C)
World Wide Web
Wortabstand
Wurzelknoten
WWW

X

Xanadu
XHTML (und HTML)
XML
XML-Deklaration
XML-Derivate
XML-Namensräume
XML-Parser
XML-Versionen
XML-Werkzeuge
XPath
XPath-Funktionen
XSL
XSLT
XSLT-Elemente
XSLT-Elemente

Z

Zahlen (Perl)
Zahlenformatierung (Perl)
Zeichen
Zeichenabstand
Zeicheninhalt (XML)
Zeichenketten (JavaScript)
Zeichenketten (Perl)
Zeichenketten-Funktionen (Perl)
Zeichenkettenverknüpfung (JavaScript)
Zeichenkettenverknüpfung (Perl)
Zeichenreferenz (HTML)
Zeichenkodierung
Zeichenkodierung, verwendete (HTML)
Zeichenkodierung, verwendete (CSS)
Zeichenvorrat (HTML)
Zeichenvorrat (XML)
Zeigervariablen (Perl)
Zeilen (Tabellen)
Zeilenumbruch
Zeitfunktionen (JavaScript)
Zeitfunktionen (Perl)
Zellen verbinden (bei Tabellen)
Zentrale Formate (CSS)
Zentrieren
Zentrierte Bereiche
Zielfensterbasis
Zielgruppen (Web-Projekte)
Zitate
Zivilrecht
Zufallswerte (JavaScript)
Zufallswerte (Perl)
Zwei Frames gleichzeitig ändern
Zweitfenster (JavaScript)

nach oben
weiter | Seite Quickbar
zurück | Seite Syntaxverzeichnis
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


SELFHTML: Navigationshilfen / Syntaxverzeichnis

SELFHTML

Syntaxverzeichnis
Informationsseite

nach unten Hinweis
nach unten HTML/XHTML
nach unten Stylesheets
nach unten XML/DTDs
nach unten JavaScript/DOM
nach unten Perl
nach unten Webserver/CGI
nach unten

Hinweis

Das Syntaxverzeichnis listet nach Sprachen/Technologien geordnet die zugehörigen Befehle/Elemente/Schlüsselwörter auf. Das Syntaxverzeichnis kann zur gewünschten Information führen, wenn Sie einen Befehl, einen Elementnamen oder dergleichen kennen und dazu Information suchen.

HTML/XHTML

# | A | B | C | D | E | F | G | H | I | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Z

#

!DOCTYPE
#RRGGBB
&lt;
&gt;
&amp;
&quot;
<!-- -->

A

a
abbr
abbr (th,td)
above (layer)
accept (input / file)
accept-charset (form)
accesskey (a)
accesskey (area)
accesskey (button)
accesskey (input)
accesskey (label)
accesskey (legend)
accesskey (textarea)
acronym
action (form)
address
align (caption)
align (col)
align (div)
align (h1-6)
align (hr)
align (iframe)
align (marquee)
align (p)
align (spacer)
align (table)
align (th,td)
align (thead,tbody,tfoot)
align (tr)
align / horizontal (applet)
align / horizontal (embed)
align / horizontal (img)
align / horizontal (object)
align / vertikal (applet)
align / vertikal (embed)
align / vertikal (img)
align / vertikal (object)
alink (body)
alt (applet)
alt (img)
applet
area
axis (th)

B

b
background (body)
background (layer)
background (table)
background (th,td)
base
basefont
bdo
behavior (marquee)
below (layer)
bgcolor (body)
bgcolor (layer)
bgcolor (marquee)
bgcolor (table)
bgcolor (th,td)
bgsound
big
blockquote
body
border (frameset)
border (img)
border (object)
border (table)
bordercolor (frameset)
br
button

C

caption
cellpadding (table)
cellspacing (table)
center
charoff (col)
charoff (th,td)
charoff (thead,tbody,tfoot)
charoff (tr)
charset (a)
charset (script)
cite
cite (blockquote)
cite (ins,del)
cite (q)
class / Attribut
classid (object / ActiveX)
classid (object / Flash)
classid (object / Java)
classid (object / Java)
clear (br)
clip (layer)
code
code (applet)
codebase (object / Flash)
codebase (object / Java)
codetype (object / Java)
col
colgroup
color (basefont)
color (font)
color (hr)
cols (frameset)
cols (textarea)
colspan (th,td)
compact (ul,ol,dl,dir,menu)
coords (area)

D

data (object)
datetime (ins,del)
dd
declare (object)
defer (script)
del
dfn
dir
dir (bdo)
dir / Attribut
direction (marquee)
disabled (button)
disabled (input)
disabled (optgroup)
disabled (option)
disabled (select)
disabled (textarea)
div
dl
dt

E

em
embed
enctype (form)

F

face (basefont)
face (font)
fieldset
font
for (label)
form
frame
frame (table)
frameborder (frame)
frameborder (frameset)
frameborder (iframe)
frameset
framespacing (frameset)

G

gutter (multicol)

H

h1-6
head
headers (td)
height (applet)
height (embed)
height (iframe)
height (img)
height (layer)
height (marquee)
height (object)
height (spacer)
height (table)
height (th,td)
height (tr)
hr
href (a)
href (area)
href (base)
href (link)
hreflang (a)
hspace (applet)
hspace (embed)
hspace (iframe)
hspace (img)
hspace (marquee)
hspace (object)
hspace (table)
html
http-equiv (meta)

I

i
id (layer)
id / Attribut
iframe
ilayer
img
input / button
input / checkbox
input / file
input / hidden
input / image
input (password)
input / radio
input / submit
input (text)
ins
isindex
ismap (img)

K

kbd

L

label
label (optgroup)
label (option)
lang / Attribut
language (script)
layer
left (layer)
leftmargin (body)
leftmargin (body)
legend
li (dir)
li (menu)
li (ol)
li (ul)
link
link (body)
listing
longdesc (frame)
longdesc (img)

M

map
marginheight (body)
marginheight (frame)
marginwidth (body)
marginwidth (frame)
marquee
maxlength (input / file)
maxlength (input / text)
media (style)
menu
meta
method (form)
multicol
multiple (select)

N

name (button)
name (frame)
name (iframe)
name (img)
name (input / button)
name (input / checkbox)
name (input / file)
name (input / hidden)
name (input / radio)
name (input / text)
name (layer)
name (map)
name (meta)
name (object)
name (param)
name (select)
name (textarea)
nobr
noembed
noframes
noresize (frame)
noscript
noshade (hr)
nowrap (th,td)

O

object
ol
onclick / Attribut
ondblclick / Attribut
onkeydown / Attribut
onkeypress / Attribut
onkeyup / Attribut
onmousedown / Attribut
onmousemove / Attribut
onmouseout / Attribut
onmouseover / Attribut
onmouseup / Attribut
optgroup
option

P

p
param
plaintext
pre
profile (meta)
prompt (isindex)

Q

q

R

readonly (input,textarea)
rel (a)
rel (link)
rev (a)
rev (link)
rows (frameset)
rows (textarea)
rowspan (th,td)
rules (table)

S

s
samp
scheme (meta)
script
scrollamount (marquee)
scrolling (frame)
scrolling (iframe)
select
selected (option)
shape (area)
size (basefont)
size (font)
size (hr)
size (input / file)
size (input / text)
size (select)
small
spacer
span
span (col)
src (embed)
src (frame)
src (iframe)
src (img)
src (input / image)
src (layer)
src (script)
standby (object)
strike
strong
style
style / Attribut
sub
summary (table)
sup

T

tabindex (a)
tabindex (area)
tabindex (button)
tabindex (input)
tabindex (select)
tabindex (textarea)
table
target (a)
target (base)
target (form)
tbody
td
text (body)
textarea
tfoot
th
thead
title
title (link)
title / Attribut
top (layer)
topmargin (body)
tr
tt
type (a)
type (button)
type (input / button)
type (input / checkbox)
type (input / image)
type (input / radio)
type (input / submit)
type (input / text)
type (object)
type (ol)
type (script)
type (spacer)
type (style)
type (ul)

U

u
ul
usemap (img)
usemap (object)

V

valign (col)
valign (th,td)
valign (thead,tbody,tfoot)
valign (tr)
value (button)
value (input / button)
value (input / hidden)
value (input / submit)
value (input / text)
value (li)
value (option)
value (param)
var
visibility (layer)
vlink (body)
vspace (applet)
vspace (embed)
vspace (iframe)
vspace (img)
vspace (object)
vspace (table)

W

wbr
width (applet)
width (col)
width (embed)
width (hr)
width (iframe)
width (img)
width (multicol)
width (layer)
width (object)
width (pre)
width (spacer)
width (table)
width (th,td)
width (tr)
wrap (textarea)

X

xmp

Z

z-index (layer)

Stylesheets

# | A | B | C | D | E | F | H | I | K | L | M | O | P | Q | R | S | T | U | V | W | X | Z

#

#
#RGB
% (Maß)
>
*
+
.
!important
/* */
:
:active
:after
:before
:first-child
:first-letter
:first-line
:focus
:hover
:lang
:left
:link
:right
:visited
@charset
@font-face
@import
@media
@page
[ ]

A

ascent (@font)
aural (@media)
azimuth

B

background
background-attachment
background-color
background-image
background-position
background-repeat
baseline (@font)
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
braille (@media)

C

cap-height (@font)
caption-side
centerline
clear
clip
cm (Maß)
color
content
counter-increment
counter-reset
counter
cue
cue-after
cue-before
cursor

D

definition-src:url()
deg (Maß)
descent (@font)
direction
display

E

em (Maß)
embossed (@media)
empty-cells
elevation
ex (Maß)

F

filter:Alpha()
filter:Blur()
filter:Chroma()
filter:DropShadow()
filter:FlipH()
filter:FlipV()
filter:Glow()
filter:Gray()
filter:Invert()
filter:Mask()
filter:Shadow()
filter:Wave()
filter:XRay()
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
format() (@font)

G

grad (Maß)

H

handheld (@media)
height
Hz (Maß)

I

in (Maß)

K

kHz (Maß)

L

left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type

M

margin (@page)
margin
margin-bottom
margin-left
margin-right
margin-top
marks (@page)
mathline (@font)
max-height
max-width
min-height
min-width
mm (Maß)
ms (Maß)

O

orphans
overflow

P

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
panose-1 (@font)
pause
pause-after
pause-before
pc (Maß)
pitch
pitch-range
play-during
position
print (@media)
projection (@media)
pt (Maß)
px (Maß)

Q

quotes

R

rad (Maß)
rgb( )
richness
right

S

s (Maß)
screen (@media)
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
size (@page)
slope (@font)
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
src:url() (@font)
stemh (@font)
stemv (@font)
stress

T

table-layout
text-align
text-decoration
text-indent
text-shadow
text-transform
top
topline (@font)
tty (@media)
tv (@media)

U

unicode-range (@font)
units-per-em (@font)

V

vertical-align
visibility
voice-family
volume

W

white-space
widows
width
word-spacing

X

x-height (@font)

Z

z-index

XML/DTDs

XSLT-Elemente

xsl:apply-imports
xsl:apply-templates
xsl:attribute
xsl:attribute-set
xsl:call-template
xsl:choose
xsl:comment
xsl:copy
xsl:copy-of
xsl:decimal-format
xsl:element
xsl:fallback
xsl:for-each
xsl:if
xsl:import
xsl:include
xsl:key
xsl:message
xsl:namespace-alias
xsl:number
xsl:otherwise
xsl:output
xsl:param
xsl:preserve-space
xsl:processing-instruction
xsl:sort
xsl:strip-space
xsl:stylesheet
xsl:template
xsl:text
xsl:transform
xsl:value-of
xsl:variable
xsl:when
xsl:with-param

XPath-Funktionen

boolean()
ceiling()
concat()
contains()
count()
current()
document()
element-available()
false()
floor()
format-number()
function-available()
generate-id()
id()
key()
lang()
last()
local-name()
name()
namespace-uri()
normalize-space()
not()
number()
position()
round()
starts-with()
string()
string-length()
substring()
substring-after()
substring-before()
sum()
system-property()
translate()
true()
unparsed-entity-uri()

Allgemeines

<?xml ?>
ATTLIST
CDATA
DOCTYPE
ELEMENT
version (<?xml?>)
ENTITY
IGNORE
INCLUDE
NOTATION
standalone (<?xml?>)
version (<?xml?>)
xmlns

JavaScript/DOM

# | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | R | S | T | U | V | W | X | Y | Z

#

!=
$[1..9] (RegExp)
&
&&
>
>>
>=
<
<<
<=
*=
++
+=
--
-=
/* */
/=
=
==
? :
\"
\f
\n
\r
\t
^
{ }
|
||

A

a (HTML-Elementobjekt)
abbr (HTML-Elementobjekt)
above (layers)
abs() (Math)
abstract (reserviertes Wort)
acos() (Math)
acronym (HTML-Elementobjekt)
action (forms)
address (HTML-Elementobjekt)
alert() (window)
alinkColor (document)
all
altKey (event)
anchor() (String)
anchors (document)
appCodeName (navigator)
appendChild() (node)
appendData() (node)
applet (HTML-Elementobjekt)
applets (document)
appName (navigator)
appVersion (navigator)
area (HTML-Elementobjekt)
arguments (Function)
arity (Function)
Array
asin() (Math)
atan() (Math)
attributes (node)
availHeight() (screen)
availWidth() (screen)

B

b (HTML-Elementobjekt)
back() (history)
back() (window)
background (layers)
base (HTML-Elementobjekt)
basefont (HTML-Elementobjekt)
bdo (HTML-Elementobjekt)
below (layers)
bgColor (document)
bgColor (layers)
big (HTML-Elementobjekt)
big() (String)
blink() (String)
blockquote (HTML-Elementobjekt)
blur() (elements)
blur() (window)
body (HTML-Elementobjekt)
bold() (String)
Boolean
boolean (reserviertes Wort)
border (images)
br (HTML-Elementobjekt)
break
button (HTML-Elementobjekt)
byte (reserviertes Wort)

C

caller (Function)
caption (HTML-Elementobjekt)
captureEvents() (window)
case
catch
ceil() (Math)
center (HTML-Elementobjekt)
char (reserviertes Wort)
charAt() (String)
charCodeAt() (String)
charset (document)
checked (elements)
childNodes (node)
cite (HTML-Elementobjekt)
class (reserviertes Wort)
className (all)
className (Universaleigenschaft)
clearInterval() (window)
clearTimeout() (window)
click() (all)
click() (elements)
clientX (event)
clientY (event)
clip (layers)
cloneNode() (node)
close() (document)
close() (window)
closed (window)
code (HTML-Elementobjekt)
col (HTML-Elementobjekt)
colgroup (HTML-Elementobjekt)
colorDepth (screen)
complete (images)
concat() (Array)
concat() (String)
confirm() (window)
const
contains() (all)
continue
cookie (document)
cookieEnabled (navigator)
cos() (Math)
createAttribute() (document)
createElement() (document)
createTextNode() (document)
ctrlKey (event)

D

data (node)
dataFld (all)
dataFormatAs (all)
DataPageSize (all)
dataSrc (all)
Date
dd (HTML-Elementobjekt)
decodeURI()
decodeURIComponent()
default (Schlüsselwort)
defaultCharset (document)
defaultChecked (elements)
defaultSelected (options)
defaultStatus (window)
defaultValue (elements)
delete
del (HTML-Elementobjekt)
deleteData() (node)
description (mimeTypes)
description (plugins)
dfn (HTML-Elementobjekt)
dir (HTML-Elementobjekt)
dir (Universaleigenschaft)
disableExternalCapture() (window)
disabled (elements)
div (HTML-Elementobjekt)
dl (HTML-Elementobjekt)
do
document (window)
document (layers)
double (reserviertes Wort)
dt (HTML-Elementobjekt)

E

E (Math)
elements (forms)
else
em (HTML-Elementobjekt)
embeds (document)
enabledPlugin (mimeTypes)
enableExternalCapture() (window)
encodeURI()
encodeURIComponent()
encoding (forms)
escape()
eval()
event
exec() (RegExp)
exp() (Math)
export (Schlüsselwort)
extends (reserviertes Wort)

F

false (Schlüsselwort)
fgColor (document)
fieldset (HTML-Elementobjekt)
filename (plugins)
final (reserviertes Wort)
finally
find() (window)
firstChild (node)
fixed() (String)
float (reserviertes Wort)
floor() (Math)
focus() (elements)
focus() (window)
font (HTML-Elementobjekt)
fontcolor() (String)
fontsize() (String)
for
form (elements)
form (HTML-Elementobjekt)
forms (document)
forward() (history)
forward() (window)
frame (HTML-Elementobjekt)
frameset (HTML-Elementobjekt)
fromCharCode() (String)
function
Function

G

getAttribute() (all)
getAttribute() (node)
getAttribute() (style)
getAttributeNode() (node)
getDate() (Date)
getDay() (Date)
getElementById() (document)
getElementsByName() (document)
getElementsByTagName() (document)
getFullYear() (Date)
getHours() (Date)
getMilliseconds() (Date)
getMinutes() (Date)
getMonth() (Date)
getSeconds() (Date)
getSelection() (document)
getTime() (Date)
getTimezoneOffset() (Date)
getUTCDate() (Date)
getUTCDay() (Date)
getUTCFullYear() (Date)
getUTCHours() (Date)
getUTCMilliseconds() (Date)
getUTCMinutes() (Date)
getUTCMonth() (Date)
getUTCSeconds() (Date)
getYear() (Date)
go() (history)
goto (reserviertes Wort)

H

h1-h6 (HTML-Elementobjekt)
handleEvent() (window)
hasChildNodes() (node)
hash (location)
head (HTML-Elementobjekt)
height (embeds)
height (images)
height (screen)
history (window)
home() (window)
host (location)
hostname (location)
hr (HTML-Elementobjekt)
href (location)
hspace (embeds)
hspace (images)
html (HTML-Elementobjekt)

I

i (HTML-Elementobjekt)
id (all)
id (Universaleigenschaft)
if
iframe (HTML-Elementobjekt)
images (document)
img (HTML-Elementobjekt)
implements (reserviertes Wort)
in (Schlüsselwort)
indexOf() (String)
innerHeight (window)
innerHTML (all)
innerText (all)
innerWidth (window)
input (HTML-Elementobjekt)
ins (HTML-Elementobjekt)
insertAdjacentHTML() (all)
insertAdjacentText() (all)
insertBefore() (node)
insertData() (node)
instanceof (Schlüsselwort)
int (reserviertes Wort)
isFinite()
isindex (HTML-Elementobjekt)
isNaN()
isTextEdit (all)
italics() (String)

J

javaEnabled() (navigator)
javascript:
join() (Array)

K

kbd (HTML-Elementobjekt)
keyCode (event)

L

label (HTML-Elementobjekt)
lang (all)
lang (Universaleigenschaft)
language (all)
language (navigator)
lastChild (node)
lastIndexOf() (String)
lastModified (document)
layers (document)
layerX (event)
layerY (event)
left (layers)
legend (HTML-Elementobjekt)
length (all)
length (anchors)
length (applets)
length (Array)
length (embeds)
length (forms)
length (frames)
length (history)
length (images)
length (layers)
length (links)
length (mimeTypes)
length (options)
length (plugins)
length (String)
li (HTML-Elementobjekt)
link (HTML-Elementobjekt)
link() (String)
linkColor (document)
links (document)
LN10 (Math)
LN2 (Math)
load() (layers)
location
locationbar (window)
log() (Math)
LOG10E (Math)
LOG2E (Math)
long (reserviertes Wort)
lowsrc (images)

M

map (HTML-Elementobjekt)
match() (String)
Math
max() (Math)
MAX_VALUE (Number)
menu (HTML-Elementobjekt)
menubar (window)
meta (HTML-Elementobjekt)
method (forms)
mimeTypes
min() (Math)
MIN_VALUE (Number)
modifiers (event)
moveAbove() (layers)
moveBelow() (layers)
moveBy() (layers)
moveBy() (window)
moveTo (layers)
moveTo() (window)
moveToAbsolute() (layers)

N

name (anchors)
name (elements)
name (embeds)
name (forms)
name (images)
name (layers)
name (links)
name (plugins)
name (window)
NaN (Number)
native (reserviertes Wort)
navigator (window)
NEGATIVE_INFINITY (Number)
new
nextSibling (node)
nodeName (node)
nodeType (node)
nodeValue (node)
noframes (HTML-Elementobjekt)
noscript (HTML-Elementobjekt)
null (Schlüsselwort)
Number
Number()

O

object (HTML-Elementobjekt)
offsetHeight (all)
offsetLeft (all)
offsetParent (all)
offsetTop (all)
offsetWidth (all)
offsetX (event)
offsetY (event)
ol (HTML-Elementobjekt)
onabort
onblur
onchange
onclick
ondblclick
onerror
onfocus
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onreset
onresize
onselect
onsubmit
onunload
open() (document)
open() (window)
opener (window)
optgroup (HTML-Elementobjekt)
option (HTML-Elementobjekt)
options (elements)
outerHeight (window)
outerHTML (all)
outerText (all)
outerWidth (window)

P

p (HTML-Elementobjekt)
package (reserviertes Wort)
pageX (event)
pageX (layers)
pageXOffset (window)
pageY (event)
pageY (layers)
pageYOffset (window)
param (HTML-Elementobjekt)
parent (frames)
parentElement (all)
parentLayer (layers)
parentNode (node)
parentTextEdit (all)
parse() (Date)
parseFloat()
parseInt()
pathname (location)
personalbar (window)
PI (Math)
pixelDepth (screen)
platform (navigator)
play() (embeds)
plugins (navigator)
pop() (Array)
port (location)
POSITIVE_INFINITY (Number)
pow() (Math)
pre (HTML-Elementobjekt)
previousSibling (node)
print() (window)
private (reserviertes Wort)
prompt() (window)
protected (reserviertes Wort)
protocol (location)
public (reserviertes Wort)
push() (Array)

Q

q (HTML-Elementobjekt)

R

random() (Math)
readOnly (elements)
recordNumber (all)
referrer (document)
releaseEvents() (window)
reload() (location)
removeAttribute() (all)
removeAttribute() (node)
removeAttribute() (style)
removeAttributeNode() (node)
removeChild() (node)
replace() (location)
replace() (String)
replaceChild() (node)
replaceData() (node)
reset() (forms)
resizeBy (layers)
resizeBy() (window)
resizeTo() (layers)
resizeTo() (window)
return
reverse() (Array)
round() (Math)
routeEvent() (window)

S

s (HTML-Elementobjekt)
samp (HTML-Elementobjekt)
screenX (event)
screenY (event)
script (HTML-Elementobjekt)
scrollbars (window)
scrollBy() (window)
scrollIntoView() (all)
scrollLeft (body)
scrollTo() (window)
scrollTop (body)
search (location)
search() (String)
select (HTML-Elementobjekt)
select() (elements)
selected (options)
selectedIndex (options)
self
setAttribute() (all)
setAttribute() (node)
setAttribute() (style)
setAttributeNode() (node)
setDate() (Date)
setFullYear() (Date)
setHours() (Date)
setInterval() (window)
setMilliseconds() (Date)
setMinutes() (Date)
setMonth() (Date)
setSeconds() (Date)
setTime() (Date)
setTimeout() (window)
setUTCDate() (Date)
setUTCFullYear() (Date)
setUTCHours() (Date)
setUTCMilliseconds() (Date)
setUTCMinutes() (Date)
setUTCMonth() (Date)
setUTCSeconds() (Date)
setYear() (Date)
shift() (Array)
shiftKey (event)
short (reserviertes Wort)
siblingAbove (layers)
siblingBelow (layers)
sin() (Math)
slice() (Array)
slice() (String)
small (HTML-Elementobjekt)
small() (String)
sort() (Array)
sourceIndex (all)
span (HTML-Elementobjekt)
splice() (Array)
split() (String)
sqrt() (Math)
SQRT1_2 (Math)
SQRT2 (Math)
src (embeds)
src (images)
src (layers)
static (reserviertes Wort)
status (window)
statusbar (window)
stop() (embeds)
stop() (window)
strike (HTML-Elementobjekt)
strike() (String)
String
String()
strong (HTML-Elementobjekt)
style (all)
style (HTML-Elementobjekt)
sub (HTML-Elementobjekt)
sub() (String)
submit() (forms)
substr() (String)
substring() (String)
suffixes (mimeTypes)
sup (HTML-Elementobjekt)
sup() (String)
super (reserviertes Wort)
switch
synchronized (reserviertes Wort)

T

table (HTML-Elementobjekt)
tagName (all)
tan() (Math)
target (links)
target (forms)
tbody (HTML-Elementobjekt)
td (HTML-Elementobjekt)
test() (RegExp)
text (anchors)
text (links)
text (options)
textarea (HTML-Elementobjekt)
tfoot (HTML-Elementobjekt)
th (HTML-Elementobjekt)
thead (HTML-Elementobjekt)
this
throw (Schlüsselwort)
throws (reserviertes Wort)
title (all)
title (document)
title (HTML-Elementobjekt)
title (Universaleigenschaft)
toExponential() (Number)
toFixed() (Number)
toLocaleString() (Date)
toLowerCase() (String)
toolbar (window)
top (frames)
top (layers)
toPrecision() (Number)
toString() (Number)
toUpperCase() (String)
tr (HTML-Elementobjekt)
transient (reserviertes Wort)
true (Schlüsselwort)
try
tt (HTML-Elementobjekt)
type (elements)
type (embeds)
type (event)
type (mimeTypes)
typeof

U

u (HTML-Elementobjekt)
ul (HTML-Elementobjekt)
unescape()
unshift() (Array)
URL (document)
userAgent (navigator)
UTC() (Date)

V

value (elements)
value (options)
var
var (HTML-Elementobjekt)
visibility (layers)
vlinkColor (document)
void
vspace (embeds)
vspace (images)

W

which (event)
while
width (embeds)
width (images)
width (screen)
window
with
write() (document)
writeln() (document)

X

x (anchors)
x (event)
x (links)

Y

y (anchors)
y (links)
y (event)

Z

zIndex (layers)

Perl

# | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X

#

!
!
!=
# (Kommentar)
#!/usr/bin/perl
$ (Skalar)
$!
$$
$&
$>
$<
$"
$'
$(
$)
$+
$,
$.
$/
$0
$1,$2...
$?
$@
$ARG
$BASETIME
$CHILD_ERROR
$DEBUGGING
$EGID
$EUID
$ERRNO
$EVAL_ERROR
$EXECUTABLE_NAME
$GID
$INPLACE_EDIT
$INPUT_LINE_NR
$LAST_PAREN_MATCH
$LIST_SEPARATOR
$MATCH
$NR
$OFS
$ORS
$OSNAME
$OS_ERROR
$OUTPUT_AUTOFLUSH
$PERLDB
$PERL_VERSION
$PID
$POSTMATCH
$PREMATCH
$PROCESS_ID
$PROGRAM_NAME
$RS
$SYSTEM_FD_MAX
$UID
$WARNING
$\
$]
$^D
$^F
$^H
$^I
$^M
$^O
$^P
$^S
$^T
$^W
$^X
$_
$`
${$ }
$|
% (Hashes)
=~
%ENV
%SIG
@{$ }
&
&&
&{$ }()
>
>>
>=
<
<<
<=
=~
=~
*{$ }
=~
=~
->
=~
=~
-A
-b
-B
-c
-C
-c (perl)
-d
-d (perl)
-e
-f
-g
-h (perl)
-k
-l
-M
-O
-o
-p
-R
-r
-s
-S
-S (perl)
-t
-T
-T (perl)
-u
-v (perl)
-W
-w
-w (perl)
-X
-x
-z
.=
/ /
=~
=
==
=~
@ (Liste/Array)
@ARGV
@EXPORT
@EXPORT_OK
@INC
@ISA
@_
@{$ }
\$
@{$ }
\&
\"
\*
\0
\@
\a
\b
\E
\e
\f
\l
\L
\n
\r
\t
\u
\U
\x
\\
^
__DATA__
__END__
__FILE__
__LINE__
__PACKAGE__
{ }
|
||
~

A

abs
alarm
and
AnyDBM_File
atan2
attrs
Attribute::Handlers
attributes
AutoLoader
AutoSplit
autouse

B

B
B::Asmdata
B::Bblock
B::Bytecode
B::C
B::CC
B::Concise
B::Debug
B::Deparse
B::Disassembler
B::Lint
B::Showlex
B::Stackobj
B::Stash
B::Terse
B::Xref
base
Benchmark
bigint
bignum
bigrat
binmode
bless
blib
bytes

C

caller
Carp
CGI
CGI::Apache
CGI::Carp
CGI::Cookie
CGI::Fast
CGI::Push
CGI::Switch
charnames
chdir
chmod
chomp
chop
chown
chr
chroot
Class::ISA
Class::Struct
close
closedir
Config
constant
Content-type:
continue
cos
CPAN
CPAN::FirstTime
CPAN::Nox
crypt
Cwd

D

Data::Dumper
DB
defined
delete
Devel::DProf
Devel::Peek
Devel::PPPort
Devel::SelfStubber
diagnostics
die
Digest
Digest::MD5
DirHandle
do
Dumpvalue
DynaLoader

E

each
else
elsif
Encode
Encode::Alias
Encode::Byte
Encode::CN
Encode::EBCDIC
Encode::Encoder
Encode::Encoding
Encode::Guess
Encode::JP
Encode::KR
Encode::MIME::Header
Encode::Symbol
Encode::TW
Encode::Unicode
Encode::Unicode::UTF7
encoding
endgrent
endhostent
endnetent
endprotoent
endpwent
endservent
Env
Errno

eof
eq
eval
exec
exists
exit
exp
Exporter
ExtUtils::Command
ExtUtils::Constant
ExtUtils::Embed
ExtUtils::Install
ExtUtils::Installed
ExtUtils::Liblist
ExtUtils::MakeMaker
ExtUtils::Manifest
ExtUtils::Miniperl
ExtUtils::Mkbootstrap
ExtUtils::Mksymlists
ExtUtils::Packlist
ExtUtils::testlib

F

Fatal
Fcntl
fields
File::Basename
File::CheckTree
File::Compare
File::Copy
File::DosGlob
File::Find
File::Path
File::Spec
File::stat
File::Temp
FileCache
FileHandle
fileno
filetest
Filter::Simple
Filter::Util::Call
FindBin
flock
for
foreach
fork
format

G

GDBM_File
ge
getc
getgrent
getgrgid
getgrnam
gethostbyaddr
gethostbyname
gethostent
getlogin
getnetbyaddr
getnetbyname
Getopt::Long
Getopt::Std
getpgrp
getppid
getpriority
getnetent
getprotobynumber
getprotoent
getpwent
getpwnam
getpwuid
getservbyname
getservbyport
getservent
glob
gmtime
goto
grep
gt

H

Hash::Util
hex

I

I18N::Collate
I18N::Langinfo
I18N::LangTags
I18N::LangTags::List
if
if
index
int
integer
IO
IO::Dir
IO::File
IO::Handle
IO::Pipe
IO::Poll
IO::Seekable
IO::Select
IO::Socket
IPC::Msg
IPC::Open2
IPC::Open3
IPC::Semaphore
IPC::SysV

J

join

K

keys
kill

L

last
lc
lcfirst
le
length
lib
link
List::Util
Locale::Constants
Locale::Country
Locale::Currency
Locale::Maketext
Locale::Script
local
local
localtime
log
lstat
lt

M

map
Math::BigFloat
Math::BigFloat
Math::BigInt
Math::BigInt
Math::BigRat
Math::Complex
Math::Trig
Memoize
Memoize::Expire
MIME::Base64
MIME::QuotedPrint
mkdir
my

N

NDBM_File
ne
Net::Cmd
Net::Domain
Net::FTP
Net::hostent
Net::netent
Net::Netrc
Net::NNTP
Net::Ping
Net::POP3
Net::protoent
Net::servent
Net::SMTP
Net::Time
next
NEXT
not

O

O
oct
ODBM_File
Opcode
open
open
opendir
ops
or
ord
overload

P

pack
package
perldoc
PerlIO
PerlIO::encoding
PerlIO::scalar
PerlIO::via
PerlIO::via::QuotedPrint
pipe
Pod::Checker
Pod::Find
Pod::Functions
Pod::Html
Pod::InputObjects
Pod::LaTeX
Pod::Man
Pod::ParseLink
Pod::Parser
Pod::ParseUtils
Pod::Plainer
Pod::PlainText
Pod::Select
Pod::Text
Pod::Usage
pop
pos
POSIX
print
printf
push

Q

q
qq
quotemeta

R

rand
re
read
readdir
readlink
redo
rename
require
return
reverse ($)
reverse (@,%)
rewinddir
rmdir

S

s/ /
Safe
scalar
Scalar::Util
SDBM_File
Search::Dict
seek
seekdir
select
SelfLoader
setgrent
sethostent
setnetent
setpgrp
setpriority
setprotoent
setpwent
setservent
Shell
shift
sigtrap
sin
sleep
Socket
sort
sort
splice
split
sprintf
sqrt
srand
stat
Storable
strict
sub
subs
substr
Switch
Symbol
symlink
Sys::Hostname
Sys::Syslog
sysopen
sysread
sysseek
system
syswrite

T

tell
telldir
Term::ANSIColor
Term::Cap
Term::Complete
Term::ReadLine
Test
Test::Builder
Test::Harness
Test::More
Test::Simple
Text::Abbrev
Text::Balanced
Text::ParseWords
Text::Soundex
Text::Tabs
Text::Wrap
Thread
Thread::Queue
Thread::Semaphore
Thread::Signal
Thread::Specific
threads
threads::shared
Tie::Array
Tie::File
Tie::Handle
Tie::Hash
Tie::Memoize
Tie::RefHash
Tie::Scalar
Tie::SubstrHash
time
Time::gmtime
Time::HiRes
Time::Local
Time::localtime
times
tr/ /

U

uc
ucfirst
umask
undef
Unicode::Collate
Unicode::Normalize
Unicode::UCD
UNIVERSAL
unless
unlink
unpack
unshift
use
use strict
User::grent
User::pwent
utf8
utime

V

values
vars
vmsish

W

wait
waitpid
wantarray
warn
warnings
while
Win32
write

X

xor
XS::APItest
XS::Typemap
XSLoader

Webserver/CGI

# | C | D | G | H | I | P | Q | R | S |

#

#config
#echo
#exec
#flastmod
#fsize
#include
$ENV{'SERVER_NAME'}

C

CONTENT_LENGTH
CONTENT_TYPE

D

DOCUMENT_ROOT

G

GATEWAY_INTERFACE
get (Methode)

H

HTTP_ACCEPT
HTTP_ACCEPT_CHARSET
HTTP_ACCEPT_ENCODING
HTTP_ACCEPT_LANGUAGE
HTTP_CONNECTION
HTTP_COOKIE
HTTP_HOST
HTTP_REFERER
HTTP_USER_AGENT

I

Internal Server Error

P

PATH_INFO
PATH_TRANSLATED
post (Methode)
Premature end...

Q

QUERY_STRING

R

REMOTE_ADDR
REMOTE_HOST
REMOTE_IDENT
REMOTE_PORT
REMOTE_USER
REQUEST_METHOD
REQUEST_URI
RewriteBase
RewriteCond
RewriteEngine
RewriteLog
RewriteLogLevel
RewriteRule

S

SCRIPT_FILENAME
SCRIPT_NAME
SERVER_ADDR
SERVER_ADMIN
SERVER_NAME
SERVER_PORT
SERVER_PROTOCOL
SERVER_SIGNATURE
SERVER_SOFTWARE

nach oben
weiter | Seite Stichwortverzeichnis
zurück | Seite Inhaltsverzeichnis
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


SELFHTML: Navigationshilfen / Wie fange ich an?

SELFHTML

Wie fange ich an?
Informationsseite

nach unten Worum geht es hier eigentlich?
nach unten Was muss ich erst mal wissen?
nach unten In welcher Reihenfolge sollte ich lernen?
nach unten Wie werde ich zum Profi?
nach unten

Worum geht es hier eigentlich?

Was Sie gerade am Bildschirm haben, ist eine ziemlich umfangreiche Dokumentation, in der es darum geht, wie man Seiten für das World Wide Web im Internet oder auch für ein firmeninternes Intranet erstellt. Solche Seiten zu erstellen ist keine Hexerei, die nur ein paar Computer-Freaks beherrschen. Wenn Sie etwas guten Willen und Lust mitbringen, können Sie das "Handwerk" durchaus erlernen. Dabei können Sie erst mal klein anfangen und ein wenig ausprobieren. Wenn Sie dann Gefallen an der Sache finden, können Sie nach und nach mehr dazulernen.

Von dieser Seite aus können Sie geführte "Touren" durch die vorliegende Dokumentation unternehmen. Die Touren wollen Ihnen den Einstieg erleichtern. Bei allen Touren erscheint ein zweigeteiltes Anzeigefenster. Links können Sie Verweise auswählen, die zu der Tour gehören. Rechts werden dann Seiten angezeigt, die Sie durch Anklicken der Verweise im linken Fenster aufrufen. Es handelt sich um normale Seiten, die zu dieser Dokumentation gehören, und die Sie auch ganz normal über die Einstiegsseite von SELFHTML erreichen.

Wenn Sie SELFHTML noch nie vorher besucht oder benutzt haben, sollten Sie sich erst mal mit den "Rahmenbedingungen" dieser Dokumentation vertraut machen. Keine Angst, das sind nur zwei Seiten. Rufen Sie dazu die folgende Tour 1 auf:

Was muss ich erst mal wissen?

SELFHTML ist keine Einführung in die Bedienung Ihres Computers. Es wird auch kein Grundlagenwissen vermittelt. Sie sollten also beispielsweise wissen, was eine Datei und was ein Ordner/Verzeichnis ist, und dass es sehr unterschiedliche Arten von Dateien gibt. Sie sollten schon mal mit verschiedenen Programmen gearbeitet haben, eines oder mehrere davon etwas besser kennen und wissen, dass es unterschiedliche Programme für unterschiedliche Aufgaben gibt.

Ihr Web-Browser, mit dem Sie das hier lesen, ist ebenfalls ein Programm auf Ihrem Rechner oder Ihrem lokalen Netzwerk. Daten, die im Anzeigefenster des Browsers angezeigt werden, sind Dateien, die irgendwo abgespeichert sind. Der Speicherort kann auf einem fernen Rechner im Internet liegen, im Intranet Ihrer Firma oder Organisation, auf einer gerade eingelegten CD-ROM oder auch auf der Festplatte Ihres Rechners.

Zum Verständnis von SELFHTML ist es von Vorteil, wenn Sie schon öfters im Internet "gesurft" sind. Der Vorteil ist, dass Sie dann schon diverse Web-Seiten gesehen haben und mehr Vergleichsmöglichkeiten und Anregungen für eigene Ideen haben. SELFHTML richtet sich jedenfalls an Leute, die den Wunsch haben, selbst Seiten im Web oder im Firmen-Intranet zu publizieren. "Internet-Seiten", "WWW-Seiten", "Web-Seiten" usw. sind übrigens verschiedene Ausdrücke für die gleiche Sache - es handelt sich einfach um bestimmte Datenformate, die ein Web-Browser in seinem Anzeigefenster anzeigen kann.

Bevor Sie so richtig zur Sache schreiten, sollten Sie sich ein wenig einstimmen. Will meinen, Sie sollten erst mal einen Überblick über das Umfeld gewinnen. Um sich einen Überblick über das Internet und das World Wide Web zu verschaffen, rufen Sie die folgende Tour 2 auf:

Als nächstes müssen Sie wissen, welche Technologien beim Erstellen von Web-Seiten zum Einsatz kommen, und was ihre Besonderheiten und Unterschiede sind. Rufen Sie die folgende Tour 3 auf, um einen Überblick über wichtige Technologien zu gewinnen, die beim Erstellen von Web-Seiten eine Rolle spielen.

Bevor Sie loslegen mit dem Erstellen eigener Web-Seiten, werden Sie noch ein paar Fragen zu erforderlicher Software oder Fragen der Art haben, wie denn die erstellten Seiten ins Web kommen. Rufen Sie dazu die folgende Tour 4 auf.

In welcher Reihenfolge sollte ich lernen?

Es gibt immer mehrere Wege, und vor allem ist Lernen häufig etwas Individuelles. Hier wird Ihnen lediglich ein Weg vorgeschlagen, wie Sie Ihre ersten Schritte in HTML machen können. Dazu müssen Sie wissen, wie Sie auf Ihrem Computer zwischen mehreren geöffneten Anwendungen wechseln können. Denn Sie werden öfters zwischen Editor und zwei geöffneten Browser-Fenstern hin und herwechseln.

Für Ihre ersten Schritte in HTML können Sie nun Ihren HTML-Editor aufrufen. Falls Sie noch keinen haben, können Sie auch einen Texteditor aufrufen, möglichst aber keine Textverarbeitungsprogramme. Windows-Anwender können zum Beispiel den Notepad-Editor aufrufen, der zu Windows gehört. Um effizienter arbeiten zu können, sollten Sie sich allerdings auf die Dauer einen richtigen HTML-Editor besorgen.

Lassen Sie den Browser mit dieser Seite hier geöffnet. So haben Sie stets Hilfe parat.

Erzeugen Sie mit dem Editor eine neue, leere Datei und speichern Sie die Datei unter einem Dateinamen (*.htm oder *.html) ab, zum Beispiel erste.htm. Wechseln Sie danach wieder zur Anzeige dieser Seite hier.

Öffnen Sie nun ein neues Browser-Fenster. Den Menübefehl dafür finden Sie normalerweise im File-Menü/Datei-Menü des Browsers. Öffnen Sie in dem neuen Browser-Fenster lokal die zuvor erzeugte und abgespeicherte HTML-Datei. Der Befehl zum lokalen Öffnen von Dateien befindet sich normalerweise ebenfalls im File-Menü/Datei-Menü des Browsers. Wenn die erzeugte HTML-Datei noch leer ist, zeigt der Browser beim Öffnen dieser Datei ein leeres Anzeigefenster an.

Nun haben Sie Ihre Arbeitsumgebung: In dem geöffneten Editor können Sie Ihre erste HTML-Datei erstellen. In dem Browser-Fenster, in dem Sie diese HTML-Datei geöffnet haben, können Sie jederzeit kontrollieren, was Sie im Editor "verbrochen" haben. Um Ihre Eingaben jeweils zu kontrollieren, wählen Sie im Editor den Befehl zum Speichern der HTML-Datei. Dann wechseln Sie zu dem Browser-Fenster, in dem die HTML-Datei angezeigt wird. Zum Anzeigen der geänderten HTML-Datei wählen Sie im Browser den Reload-Befehl zum Aktualisieren der angezeigten Web-Seite.

Zwischendurch sollten Sie dann auch mal zu dieser Browser-Instanz hier wechseln. Denn hier finden Sie die HTML-Elemente beschrieben, die Sie in den Editor eingeben können. Die folgende Tour 5 führt Sie durch die wichtigsten Grundlagen von HTML. Kleiner Tip noch: selektieren Sie HTML-Quelltextbeispiele, die im Verlauf der Tour angezeigt werden, hier im Browser mit der Maus. Kopieren Sie den selektierten Text über die Zwischenablage Ihres Computers in Ihren (HTML-)Editor.

Wie werde ich zum Profi?

Am meisten lernen Sie, wenn Sie an einem richtigen Projekt arbeiten, das Sie auch tatsächlich im Web publizieren wollen. Es kann eine persönliche oder kommerzielle Homepage sein, ein Fan-Projekt für irgendjemanden oder irgendetwas, ein Liebhaberprojekt wie das Präsentieren einer Sammlung, das Vorstellen Ihrer Heimatgemeinde, Ihrer Schule, Ihres Vereins usw. Überlegen Sie sich, welche Inhalte Sie bringen möchten, wie Sie die Inhalte auf mehrere Seiten verteilen und wie Sie die Seiten verlinken, sodass der Anwender gut in dem Projekt navigieren kann.

Lernen Sie bei der Arbeit die übrigen Elemente von Kapitel HTML kennen. Folgen Sie ruhig auch einmal einem der zahlreichen Verweise innerhalb des HTML-Kapitels, die zum Kapitel über Kapitel Stylesheets führen.

Die letzte Tour 6 macht Sie mit ein paar Themen vertraut, die weiterführende Themen behandeln.

Die Seiten, die Sie im Verlauf der sechs Touren kennen lernen oder kennen gelernt haben, sind natürlich nicht die einzigen innerhalb von SELFHTML. Aber da sind Sie sicher schon selbst hintergekommen. Nach den hier angebotenen Touren sind Sie hoffentlich in der Lage, selbständig Web-Seiten zu erstellen und SELFHTML zu Rate zu ziehen, wenn Sie nach der Lösung für ein Problem suchen. Der Weg zum Profi ist lang und nicht in ein paar Stunden, auch nicht in ein paar Tagen zu schaffen. Aber Sie haben sich auf ein Gebiet begeben, auf dem Sie jeden Tag dazulernen können. Viel Erfolg!

nach oben
weiter Seite Häufig gestellte Fragen (FAQ)
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


SELFHTML: Navigationshilfen / Wie fange ich an? / Tour 1

Tour 1 - Navigation zurück zu: "Wie fange ich an?"


SELFHTML: Navigationshilfen / Wie fange ich an?

In dieser Tour können Sie sich mit SELFHTML vertraut machen. Klicken Sie die folgenden beiden Verweise der Reihenfolge nach an und lesen Sie die Seiten, die jeweils rechts angezeigt werden, in Ruhe durch.

Seite Wichtige Hinweise zu SELFHTML
Seite Arbeitshinweise zu SELFHTML

Tipp: Sie können den Trennrahmen zwischen diesem linken und dem rechten Anzeigebereich verschieben, indem Sie mit der Maus auf den Trennrahmen positionieren, dann die Maustaste drücken und die Maus in die gewünschte Richtung (links/rechts ziehen).

Am Ende dieser Tour:
Seite Weiter mit den Touren! oder:
Seite Ich komme nun alleine klar!


SELFHTML: Navigationshilfen / Wie fange ich an? / Tour 2

Tour 2 - Navigation zurück zu: "Wie fange ich an?"


SELFHTML: Navigationshilfen / Wie fange ich an?

In dieser Tour können Sie sich einen Überblick über das Internet und das World Wide Web verschaffen. Klicken Sie die folgenden Verweise der Reihe nach an, um die Seiten der Tour aufzurufen.

Seite Entstehung des Internet
Seite Dienste im Internet
Seite Entstehung des World Wide Web

Am Ende dieser Tour:
Seite Weiter mit den Touren! oder:
Seite Ich komme nun alleine klar!


SELFHTML: Navigationshilfen / Wie fange ich an? / Tour 3

Tour 3 - Navigation zurück zu: "Wie fange ich an?"


SELFHTML: Navigationshilfen / Wie fange ich an?

In dieser Tour können Sie sich einen Überblick über wichtige Technologien verschaffen, die es beim Erstellen von Web-Seiten zu unterscheiden gilt. Klicken Sie die folgenden Verweise der Reihe nach an, um die Seiten der Tour aufzurufen.

Seite HTML
Seite Stylesheets
Seite JavaScript
Seite Perl
Seite PHP

Am Ende dieser Tour:
Seite Weiter mit den Touren! oder:
Seite Ich komme nun alleine klar!


SELFHTML: Navigationshilfen / Wie fange ich an? / Tour 4

Tour 4 - Navigation zurück zu: "Wie fange ich an?"


SELFHTML: Navigationshilfen / Wie fange ich an?

In dieser Tour können Sie sich über Fragen zu erforderlicher Software, Arbeitsbedingungen, Projektplanung und Web-Seiten-Hosting informieren.

Seite Software
Seite Web-Projekte planen
Seite Web-Projekte publizieren
Seite Dokumente und Dokumentationen
Seite Support

Am Ende dieser Tour:
Seite Weiter mit den Touren! oder:
Seite Ich komme nun alleine klar!


SELFHTML: Navigationshilfen / Wie fange ich an? / Tour 5

Tour 5 - Navigation zurück zu: "Wie fange ich an?"


SELFHTML: Navigationshilfen / Wie fange ich an?

In dieser Tour lernen Sie die Grundlagen von HTML kennen.

Seite Textauszeichnung
Seite Grundgerüst einer HTML-Datei
Seite Regeln beim Editieren von HTML
Seite Kommentare und Credits
Seite Überschriften
Seite Textabsätze
Seite Zeilenumbruch
Seite Logische Auszeichnungen im Text
Seite Physische Auszeichnungen im Text
Seite Referenzieren in HTML
Seite Verweise definieren und gestalten
Seite Grafiken einbinden
Seite Farben definieren in HTML
Seite Farben für Hintergrund, Text und Verweise

Am Ende dieser Tour:
Seite Weiter mit den Touren! oder:
Seite Ich komme nun alleine klar!


SELFHTML: Navigationshilfen / Wie fange ich an? / Tour 6

Tour 6 - Navigation zurück zu: "Wie fange ich an?"


SELFHTML: Navigationshilfen / Wie fange ich an?

In dieser Tour lernen Sie weiterführende Themen kennen.

Seite Aufbau einer Tabelle
Seite Tabellen als Mittel für Web-Seiten-Layouts
Seite Framesets und Frames definieren
Seite Verweise bei Frames
Seite Frames als Mittel für Seiten-Layouts
Seite Stylesheets in HTML einbinden
Seite Zentrale Formate definieren
Seite Fertige Layouts
Seite Einführung in XML
Seite Einführung in JavaScript und DOM
Seite Allgemeines zu Dynamischem HTML
Seite Computer und geschriebene Sprache
Seite Zeichenkodierungen
Seite Typische Grafiksorten für Web-Seiten
Seite Techniken und Begriffe der Bildbearbeitung

Am Ende der letzten Tour:
Seite Ich komme nun alleine klar!


Passwortschutz mit JavaScript

<html>
<head>
<script type="text/javascript">
  /* Copyright (c) 1996 nordsoft  */
  function testEncode(form) {
  var dater = new Date();
  Day = dater.getDate();
  dater = null;
  var Ret = encode (form.pwd.value, 12)
  location.href = Ret + ".htm"
  }
  function encode (OrigString, CipherVal) {
  Ref="0123456789abcdefghijklmnopqrstuvwxyz._~ABCDEFGHIJKLMNOPQRSTUVWXYZ"
  CipherVal = parseInt(CipherVal)
  var Temp=""
  for (Count=0; Count < OrigString.length; Count++) {
  var TempChar = OrigString.substring (Count, Count+1)
  var Conv = cton(TempChar)
  var Cipher=Conv^CipherVal
  Cipher=ntoc(Cipher)
  Temp += Cipher
  }
  return (Temp)
  }
  function cton (Char) {
  return (Ref.indexOf(Char));
  }
  function ntoc (Val) {
  return (Ref.substring(Val, Val+1))
  }
</script>
</head>
<body>
<form name="testform" onsubmit="return(false)">
Passwort: <input type="password" name="pwd" value="">
<input type="button" name="button" value=" OK " onclick="testEncode(this.form)">
</form>
</body>
</html>


Popup-Fenster mit JavaScript

<html>
<head>
<title>Popup-Fenster mit JavaScript</title>
<script type="text/javascript">
function popup (url) {
 fenster = window.open(url, "Popupfenster", "width=400,height=300,resizable=yes");
 fenster.focus();
 return false;
}
</script>
</head>
<body>
<p><a href="popupfenster.htm" target="_blank" onclick="return popup(this.href);">Fenster anzeigen</a></p>
</body>
</html>

Fenster anzeigen


Rechte Maustaste sperren

Netscape 4.0 MS IE 4.0 Opera 7.20 Mozilla Firefox 1 Konqueror 3.1 Safari 1.0 Rechte Maustaste sperren

Das folgende Script sperrt die rechte Maustaste, genauer gesagt verhindert es das Aufklappen des Kontextmenüs. Im Mozilla, Opera und Konqueror ist es möglich, das Abfangen von Rechtsklicks durch JavaScript zu unterbinden. In diesen Fällen funktioniert das Script nicht.

Bitte beachten Sie, dass dieses Script einige Techniken benutzt, die momentan nicht in SELFHTML dokumentiert sind, sondern nur hier Verwendung finden.

<script type="text/javascript">
function click (e) {
  if (!e)
    e = window.event;
  if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
    if (window.opera)
      window.alert("Sorry: Diese Funktion ist deaktiviert.");
    return false;
  }
}
if (document.layers)
  document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
</script>

Im Internet Explorer ab Version 5 sowie in Gecko-basierten Browsern (Mozilla, Mozilla Firefox usw.) tritt vor dem Aufklappen des Kontextmenüs das Ereignis contextmenu ein. Dieses ist ursprünglich dazu gedacht, das Browser-Kontextmenü in geschlossenen Webanwendungen durch ein eigenes Kontextmenü zu ersetzen. Es ist aber auch möglich, darüber schlichtweg das Aufklappen des Browser-Kontextmenüs zu verhindern, ohne stattdessen ein eigenes Kontextmenü auf Basis von HTML und CSS erscheinen zu lassen - vorausgesetzt, die Browsereinstellungen lassen dies zu.

Über document.oncontextmenu = click; wird die Funktion click() als Seite Event-Handler für das contextmenu-Ereignis beim Objekt Seite document angegeben. Dadurch wird die Funktion immer dann ausgeführt, wenn der Benutzer irgendwo im Dokument das Kontextmenü aktivieren will, z.B. durch einen Rechtsklick.

In IE 4, Netscape 4, Opera und Konqueror wird bei einem Rechtsklick lediglich ein reguläres Seite mousedown-Ereignis erzeugt, genauso wie bei einem Linksklick. Über document.onmousedown = click; wird ebenfalls die Funktion click() als Event-Handler für alle Mausklicks im Dokument registriert.

Damit im Netscape 4 die Behandlung des mousedown-Ereignisses möglich ist, muss zusätzlich Seite document.captureEvents mit dem Parameter Event.MOUSEDOWN ausgeführt werden. Mit if (document.layers) wird vorher abgefragt, ob es sich um einen Netscape-4-Browser handelt.

Die Funktion click() wird folglich in zwei Fällen ausgeführt: Bei einem contextmenu-Ereignis oder einem mousedown-Ereignis. Im ersten Fall kann das Ereignis sofort abgefangen werden. Im zweiten Fall muss erst geprüft werden, ob es sich um einen Klick mit der rechten Maustaste handelt. Die nötigen Informationen - den Typ des Ereignisses sowie die gedrückte Maustaste - erhält die Funktion über das Seite Event-Objekt. Doch bereits der Zugriff darauf gestaltet sich schwierig. Im Internet Explorer ist das Event-Objekt unter window.event abrufbar. In allen anderen Browsern wird es der Event-Handler-Funktion als Parameter übergeben. Die Funktion click() nimmt daher einen Parameter mit dem Namen e entgegen. Eine if-Anweisung prüft direkt beim Start der Funktion, ob das Event-Objekt auf diese Weise übergeben wurde und somit das Objekt e existiert (siehe Seite Abfragen ob ein Objekt existiert). Wenn dies nicht der Fall ist, wird das Event-Objekt aus window.event in die Variable e kopiert. Durch diese Zuweisung ist das Event-Objekt auf jeden Fall als e ansprechbar.

Im Folgenden prüft die Funktion, ob eine der drei folgenden Bedingungen erfüllt ist: Erstens wird abgefragt, ob der Typ des Ereignisses Seite type gleich contextmenu ist. Zweitens und Drittens wird abgefragt, ob die rechte Maustaste gedrückt wurde. Im Internet Explorer, Opera, Mozilla und Konqueror lässt sich mithilfe der Eigenschaft Seite button des Event-Objekts in Erfahrung bringen, welche Maustaste gedrückt wurde. Die Zahl 2 steht einhellig für die rechte Maustaste. Im Netscape 4 hingegen heißt die Eigenschaft Seite which. In dem Fall steht die Zahl 3 für die rechte Maustaste. Bei allen drei Abfragen wird vorher geprüft, ob die jeweilige verwendete Event-Eigenschaft existiert, sodass das Script mit den zur Verfügung stehenden Objekten arbeitet.

Wenn also eine dieser Bedingungen zutrifft, muss das Ereignis abgefangen werden, um das Erscheinen des Kontextmenüs zu unterbinden. Dies wird mit dem Seite Rückgabewert false bewerkstelligt. Vorher jedoch muss unter gewissen Umständen ein Seite Dialogfenster angezeigt werden, und zwar nur dann, wenn das Script vom Opera-Browser ausgeführt wird. Dies wird über if (window.opera) abgefragt. Genau genommen ist das Dialogfenster für Opera 8 nötig. In früheren Opera-Versionen führt bereits document.onmousedown = click; dazu, dass alle Kontextmenüs deaktiviert werden - ohne dass die Funktion click() bei einem Rechtsklick überhaupt ausgeführt wird. In Version 8 ist dieser Fehler behoben. Zudem reicht ein einfaches return false; nicht mehr aus, um das Aufklappen des Kontextmenüs zu verhindern. Es muss zusätzlich ein Dialogfenster angezeigt werden. Das Dialogfenster kann nicht einfach in allen Browsern angezeigt werden, denn z.B. Mozilla erzeugt bei einem Rechtsklick sowohl ein mousedown- als auch ein contextmenu-Ereignis. Daher würden bei einem Rechtsklick zwei Dialogfenster angezeigt.

Seite zurück


Horizontal und vertikal zentriertes Element


SELFHTML: Navigationshilfen / Quickbar

Damit die Quickbar funktioniert, benötigen Sie einen Frame- und JavaScript-fähigen Browser.

zurück zu Navigationshilfen


SELFHTML: Navigationshilfen / Quickbar

SELFHTML

Quickbar
Informationsseite

nach unten Quickbar verwenden
nach unten

Quickbar verwenden

Die Quickbar ist eine kleine Leiste im oberen Bereich des Anzeigefensters, die dauerhaft eingeblendet bleibt. Über die Quickbar können Sie aus Aufklapplisten schnell einen Sprachbestandteil oder ein Stichwort auswählen, nach dem Sie suchen. Sie springen dann gleich zu dem Dokumentabschnitt, wo der betreffende Listeneintrag beschrieben wird oder von Bedeutung ist.

Die Quickbar ist JavaScript-basiert. Sie funktioniert mit Netscape ab Version 3.x und mit dem Internet Explorer ab Version 4.x. Falls die Quickbar bei Ihnen nicht funktioniert, kann es daran liegen, dass Sie in Ihrem Browser JavaScript nicht aktiviert haben. Wenn die Auswahl aus den Aufklapplisten Fehlermeldungen erzeugt, kommt Ihr Browser mit der Quickbar nicht zurecht. Benutzen Sie in diesem Fall die Verzeichnisse, die über die Einstiegsseite von SELFHTML als normale Seiten aufrufbar sind, das sind hier das Seite Syntaxverzeichnis und das Seite Stichwortverzeichnis.

Wählen Sie aus der links oben angezeigten Aufklappliste zunächst einen Eintrag aus. Je nachdem, was Sie ausgewählt haben, wird rechts davon eine andere Aufklappliste angezeigt. Wenn Sie aus so einer zweiten Aufklappliste einen Eintrag auswählen, springen Sie direkt zu der entsprechenden Stelle im Dokument.

nach oben
weiter | Seite Sidebars für HTML und CSS
zurück | Seite Stichwortverzeichnis
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


SELFHTML: Navigationshilfen / SELFHTML aktuell-Sidebar

  • HTML
  • CSS
  • JS/DOM
  • XSLT/XPath
  • Perl
  • aktuell

SELFHTML
aktuell

  • SELFHTML aktuell
    • Weblog
      • Newsfeed
    • Fachartikel
    • Linkverzeichnis
    • Forum
      • Forums-Hilfe
      • Neue Nachricht
      • Forumsarchiv
    • FAQ
    • Download-Statistik
    • Such-Formular (erweitert)

  • SELFHTML-Community
    • Community-Lounge
    • Chat
    • Visitenkarten
    • Bilder
    • Zitatesammlung
    • SELFspezial Nostalgie
    • Kalender
    • Gästebuch
  • SELFHTML e.V.
    • Satzung
    • Vereins-FAQ
  • Statistik
    • SELFHTML
    • SELFHTML aktuell
    • SELFHTML-Forum
    • Download-Statistik

Seite Installationsanleitung
© 2007 Seite Impressum


SELFHTML: Navigationshilfen / CSS-Sidebar

  • HTML
  • CSS
  • JS/DOM
  • XSLT/XPath
  • Perl
  • aktuell

CSS-
Sidebar

  • B = Beschreibung
  • W = W3C-Spezifikation
  • 3 = CSS3-Arbeitsentwurf beim W3C
  • E = externe Dokumentation
  • X = Hinweis, siehe Tooltip

  • Selektoren, Pseudoelemente und Pseudoklassen

  • B W 3 *
  • B W 3 E
  • B W 3 E F
  • B W 3 E > F
  • B W 3 E + F
  • B W 3 E ~ F
  • B W 3 .klasse
  • B W 3 #id
  • B W 3 [attribut]
  • B W 3 [attribut="wert"]
  • B W 3 [attribut~="wert"]
  • B W 3 [attribut^="wert"]
  • B W 3 [attribut$="wert"]
  • B W 3 [attribut*="wert"]
  • B W 3 [lang|="en"]
  • B W 3 :active
  • B W 3 :after X
  • B W 3 :before X
  • B W 3 :bound-element
  • B W 3 :checked
  • B W 3 ::choices X
  • B W 3 :default
  • B W 3 :disabled
  • B W 3 :empty
  • B W 3 :enabled
  • B W 3 :first-child
  • B W 3 :first-letter X
  • B W 3 :first-line X
  • B W 3 :first-of-type
  • B W 3 :focus
  • B W 3 :hover
  • B W 3 :in-range
  • B W 3 :invalid
  • B W 3 :lang
  • B W 3 :last-child
  • B W 3 :last-of-type
  • B W 3 :link
  • B W 3 :nth-child(n)
  • B W 3 :nth-last-child(n)
  • B W 3 :nth-last-of-type(n)
  • B W 3 :nth-of-type(n)
  • B W 3 :not(s)
  • B W 3 :only-child
  • B W 3 :only-of-type
  • B W 3 :optional
  • B W 3 :out-of-range
  • B W 3 :read-only
  • B W 3 :read-write
  • B W 3 ::repeat-index X
  • B W 3 ::repeat-item X
  • B W 3 :required
  • B W 3 :root
  • B W 3 ::selection X
  • B W 3 :target
  • B W 3 :valid
  • B W 3 ::value X
  • B W 3 :visited

  • @-Regeln

  • B W 3 @charset X
  • B W 3 @color-profile
  • B W 3 @counter-style
  • B W 3 @font-face X
  • B W 3 @import
  • B W 3 @media
  • B W 3 @page

  • Eigenschaften

  • B W 3 alignment-adjust
  • B W 3 alignment-baseline
  • B W 3 appearance
  • B W 3 background
  • B W 3 background-attachment
  • B W 3 background-break
  • B W 3 background-clip
  • B W 3 background-color
  • B W 3 background-image
  • B W 3 background-origin
  • B W 3 background-position
  • B W 3 background-repeat
  • B W 3 background-size
  • B W 3 baseline-shift
  • B W 3 binding
  • B W 3 border
  • B W 3 border-break
  • B W 3 border-collapse
  • B W 3 border-color
  • B W 3 border-image
  • B W 3 border-radius
  • B W 3 border-spacing
  • B W 3 border-style
  • B W 3 border-width
  • B W 3 bottom
  • B W 3 box-height X
  • B W 3 box-shadow
  • B W 3 box-sizing X
  • B W 3 box-width X
  • B W 3 caption-side
  • B W 3 clear
  • B W 3 clear-after
  • B W 3 clip
  • B W 3 color
  • B W 3 color-profile
  • B W 3 columns
  • B W 3 column-break-after
  • B W 3 column-break-before
  • B W 3 column-count
  • B W 3 column-gap
  • B W 3 column-rule
  • B W 3 column-rule-color
  • B W 3 column-rule-style
  • B W 3 column-rule-width
  • B W 3 column-width
  • B W 3 content
  • B W 3 counter
  • B W 3 counter-increment
  • B W 3 counter-reset
  • B W 3 crop
  • B W 3 cursor
  • B W 3 direction
  • B W 3 display
  • B W 3 display-model
  • B W 3 display-role
  • B W 3 dominant-baseline
  • B W 3 drop-initial-after-adjust
  • B W 3 drop-initial-after-align
  • B W 3 drop-initial-before-adjust
  • B W 3 drop-initial-before-align
  • B W 3 drop-initial-size
  • B W 3 drop-initial-value
  • B W 3 empty-cells
  • B W 3 fit
  • B W 3 fit-position
  • B W 3 float
  • B W 3 float-displace
  • B W 3 font
  • B W 3 font-effect
  • B W 3 font-emphasize
  • B W 3 font-emphasize-position
  • B W 3 font-emphasize-style
  • B W 3 font-family
  • B W 3 font-size
  • B W 3 font-size-adjust
  • B W 3 font-smooth
  • B W 3 font-stretch X
  • B W 3 font-style
  • B W 3 font-variant
  • B W 3 font-weight
  • B W 3 height
  • B W 3 hyphenate
  • B W 3 icon
  • B W 3 indent-edge-reset
  • B W 3 inline-box-align
  • B W 3 left
  • B W 3 letter-spacing
  • B W 3 line-height
  • B W 3 line-stacking
  • B W 3 line-stacking-ruby
  • B W 3 line-stacking-shift
  • B W 3 line-stacking-strategy
  • B W 3 list-style
  • B W 3 list-style-image
  • B W 3 list-style-position
  • B W 3 list-style-type
  • B W 3 margin
  • B W 3 margin-top
  • B W 3 margin-right
  • B W 3 margin-bottom
  • B W 3 margin-left
  • B W 3 marquee
  • B W 3 marquee-direction
  • B W 3 marquee-repetition
  • B W 3 marquee-speed
  • B W 3 marquee-style
  • B W 3 max-height
  • B W 3 max-width
  • B W 3 min-height
  • B W 3 min-width
  • B W 3 move-to
  • B W 3 nav-down
  • B W 3 nav-index
  • B W 3 nav-left
  • B W 3 nav-right
  • B W 3 nav-up
  • B W 3 opacity
  • B W 3 outline
  • B W 3 outline-color
  • B W 3 outline-offset
  • B W 3 outline-style
  • B W 3 outline-width
  • B W 3 overflow
  • B W 3 overflow-clip
  • B W 3 overflow-x
  • B W 3 overflow-y
  • B W 3 padding
  • B W 3 padding-top
  • B W 3 padding-right
  • B W 3 padding-bottom
  • B W 3 padding-left
  • B W 3 page-policy
  • B W 3 position
  • B W 3 presentation-level
  • B W 3 quotes
  • B W 3 rendering-intent
  • B W 3 resize
  • B W 3 right
  • B W 3 ruby-align
  • B W 3 ruby-overhang
  • B W 3 ruby-position
  • B W 3 ruby-span
  • B W 3 table-layout
  • B W 3 target
  • B W 3 target-name
  • B W 3 target-new
  • B W 3 target-position
  • B W 3 text-align
  • B W 3 text-align-last
  • B W 3 text-decoration
  • B W 3 text-height
  • B W 3 text-indent
  • B W 3 text-justify
  • B W 3 text-kashida-space
  • B W 3 text-shadow X
  • B W 3 text-transform
  • B W 3 text-wrap
  • B W 3 top
  • B W 3 unicode-bidi
  • B W 3 vertical-align
  • B W 3 visibility
  • B W 3 white-space X
  • B W 3 white-space-collapse
  • B W 3 width
  • B W 3 word-break
  • B W 3 word-spacing
  • B W 3 word-wrap
  • B W 3 z-index

  • Drucklayouts

  • B W 3 @counter-style
  • B W 3 @page
  • B W 3 ::after-break X
  • B W 3 ::before-break X
  • B W 3 :first
  • B W 3 ::footnote-call X
  • B W 3 ::footnote-marker X
  • B W 3 :left
  • B W 3 :right
  • B W 3 bookmark-label
  • B W 3 bookmark-level
  • B W 3 bookmark-target
  • B W 3 border-width
  • B W 3 change-bar
  • B W 3 content X
  • B W 3 hyphenate
  • B W 3 hyphenate-after
  • B W 3 hyphenate-before
  • B W 3 hyphenate-character
  • B W 3 hyphenate-dictionary
  • B W 3 hyphenate-lines
  • B W 3 image-orientation
  • B W 3 margin
  • B W 3 marks X
  • B W 3 orphans
  • B W 3 page X
  • B W 3 page-break-after
  • B W 3 page-break-before
  • B W 3 page-break-inside
  • B W 3 size X
  • B W 3 string-set
  • B W 3 widows

  • Sprachausgabe X

  • B W 3 azimuth X
  • B W 3 cue
  • B W 3 cue-after
  • B W 3 cue-before
  • B W 3 elevation X
  • B W 3 mark
  • B W 3 mark-after
  • B W 3 mark-before
  • B W 3 pause
  • B W 3 pause-after
  • B W 3 pause-before
  • B W 3 pitch X
  • B W 3 pitch-range X
  • B W 3 play-during X
  • B W 3 phonemes
  • B W 3 rest
  • B W 3 rest-after
  • B W 3 rest-before
  • B W 3 richness X
  • B W 3 speak
  • B W 3 speak-header X
  • B W 3 speak-punctuation X
  • B W 3 speek-numeral X
  • B W 3 speech-rate X
  • B W 3 stress X
  • B W 3 voice-balance
  • B W 3 voice-duration
  • B W 3 voice-family
  • B W 3 voice-pitch
  • B W 3 voice-pitch-range
  • B W 3 voice-rate
  • B W 3 voice-stress
  • B W 3 voice-volume
  • B W 3 volume X

  • Proprietäre Eigenschaften
    (herstellerspezifisch)

  • B W E media queries X
  • B W E content X
  • B W E display (zusätzliche Werte) X
  • B W E filter: X
  • B W E filter:Alpha() X
  • B W E filter:Blur() X
  • B W E filter:Chroma() X
  • B W E filter:DropShadow() X
  • B W E filter:FlipH() X
  • B W E filter:FlipV X
  • B W E filter:Glow() X
  • B W E filter:Gray() X
  • B W E filter:Invert() X
  • B W E filter:Mask() X
  • B W E filter:Shadow() X
  • B W E filter:Wave() X
  • B W E filter:XRay() X
  • B W E background-position-x X
  • B W E background-position-y X
  • B W E behavior X
  • B W E ime-mode X
  • B W E layout-flow X
  • B W E layout-grid X
  • B W E layout-grid-char X
  • B W E layout-grid-line X
  • B W E layout-grid-mode X
  • B W E layout-grid-type X
  • B W E line-break X
  • B W E overflow (zusätzliche Werte) X
  • B W E scrollbar-x-color: X
  • B W E set-link-source X
  • B W E text-autospace X
  • B W E text-justify X
  • B W E text-kashida-space X
  • B W E text-underline-position X
  • B W E use-link-source X
  • B W E white-space:-moz-pre-wrap X
  • B W E white-space:-o-pre-wrap X
  • B W E white-space:-pre-wrap X
  • B W E word-break X
  • B W E word-wrap X
  • B W E writing-mode X
  • B W E zoom X
  • B W E -link-set X
  • B W E -link-use X
  • B W E -moz-appearance X
  • B W E -moz-background-clip X
  • B W E -moz-background-inline-policy X
  • B W E -moz-background-origin X
  • B W E -moz-binding X
  • B W E -moz-border-bottom-colors X
  • B W E -moz-border-left-colors X
  • B W E -moz-border-radius X
  • B W E -moz-border-radius-bottomleft X
  • B W E -moz-border-radius-bottomright X
  • B W E -moz-border-radius-topleft X
  • B W E -moz-border-radius-topright X
  • B W E -moz-border-right-colors X
  • B W E -moz-border-top-colors X
  • B W E -moz-box-align X
  • B W E -moz-box-direction X
  • B W E -moz-box-flex X
  • B W E -moz-box-ordinal-group X
  • B W E -moz-box-orient X
  • B W E -moz-box-pack X
  • B W E -moz-box-sizing X
  • B W E -moz-column-count X
  • B W E -moz-column-gap X
  • B W E -moz-column-width X
  • B W E -moz-float-edge X
  • B W E -moz-force-broken-image-icon X
  • B W E -moz-image-region X
  • B W E -moz-key-equivalent X
  • B W E -moz-margin-end X
  • B W E -moz-margin-start X
  • B W E -moz-opacity X
  • B W E -moz-outline X
  • B W E -moz-outline-color X
  • B W E -moz-outline-offset X
  • B W E -moz-outline-radius X
  • B W E -moz-outline-radius-bottomleft X
  • B W E -moz-outline-radius-bottomright X
  • B W E -moz-outline-radius-topleft X
  • B W E -moz-outline-radius-topright X
  • B W E -moz-outline-style X
  • B W E -moz-outline-width X
  • B W E -moz-padding-end X
  • B W E -moz-padding-start X
  • B W E -moz-scrollbars-horizontal X
  • B W E -moz-scrollbars-none X
  • B W E -moz-scrollbars-vertical X
  • B W E -moz-user-focus X
  • B W E -moz-user-input X
  • B W E -moz-user-modify X
  • B W E -moz-user-select X
  • B W E -o-link X
  • B W E -o-link-source X
  • B W E -o-set-link-source X
  • B W E -o-use-link-source X
  • B W E -o-replace X
  • B W E -replace X
  • B W E -set-link-source X
  • B W E -use-link-source X
  • B W E -xv-voice-pitch X
  • B W E -xv-voice-pitch-range X
  • B W E -xv-voice-rate X
  • B W E -xv-voice-volume X

Seite Installationsanleitung
© 2007 Seite Impressum


SELFHTML: Navigationshilfen / (X)HTML-Sidebar

  • HTML
  • CSS
  • JS/DOM
  • XSLT/XPath
  • Perl
  • aktuell

HTML-
Sidebar

  • B = Beschreibung
  • A = Attribute
  • R = Referenz
  • W = W3C-Spezifikation
  • X = Hinweis, siehe Tooltip
  • B A R W <!DOCTYPE>
  • B A R W <!-- … -->
  • B A R W <!--[if IE]> X
  • B A R W <a>
  • B A R W <abbr>
  • B A R W <acronym>
  • B A R W <address>
  • B A R W <applet> X
  • B A R W <area>
  • B A R W <b>
  • B A R W <base>
  • B A R W <basefont> X
  • B A R W <bdo>
  • B A R W <bgsound> X
  • B A R W <big> X
  • B A R W <blink> X
  • B A R W <blockquote>
  • B A R W <body>
  • B A R W <br>
  • B A R W <button>
  • B A R W <caption>
  • B A R W <center> X
  • B A R W <cite>
  • B A R W <code>
  • B A R W <col>
  • B A R W <colgroup>
  • B A R W <dd>
  • B A R W <del>
  • B A R W <dfn>
  • B A R W <dir> X
  • B A R W <div>
  • B A R W <dl>
  • B A R W <dt>
  • B A R W <em>
  • B A R W <embed> X
  • B A R W <fieldset>
  • B A R W <font> X
  • B A R W <form>
  • B A R W <frame>
  • B A R W <frameset>
  • B A R W <h1> bis <h6>
  • B A R W <head>
  • B A R W <hr>
  • B A R W <html>
  • B A R W <i> X
  • B A R W <iframe>
  • B A R W <ilayer> X
  • B A R W <img>
  • B A R W <input>
  • B A R W <ins>
  • B A R W <isindex> X
  • B A R W <kbd>
  • B A R W <label>
  • B A R W <layer> X
  • B A R W <legend>
  • B A R W <li>
  • B A R W <link>
  • B A R W <listing> X
  • B A R W <map>
  • B A R W <marquee> X
  • B A R W <menu> X
  • B A R W <meta>
  • B A R W <multicol> X
  • B A R W <noframes>
  • B A R W <noscript>
  • B A R W <object>
  • B A R W <ol>
  • B A R W <optgroup>
  • B A R W <option>
  • B A R W <p>
  • B A R W <param>
  • B A R W <plaintext> X
  • B A R W <pre>
  • B A R W <q>
  • B A R W <s> X
  • B A R W <samp>
  • B A R W <script>
  • B A R W <select>
  • B A R W <small> X
  • B A R W <spacer> X
  • B A R W <span>
  • B A R W <strike> X
  • B A R W <strong>
  • B A R W <style>
  • B A R W <sub>
  • B A R W <sup>
  • B A R W <table>
  • B A R W <tbody>
  • B A R W <td>
  • B A R W <textarea>
  • B A R W <tfoot>
  • B A R W <th>
  • B A R W <thead>
  • B A R W <title>
  • B A R W <tr>
  • B A R W <tt>
  • B A R W <u> X
  • B A R W <ul>
  • B A R W <var>
  • B A R W <wbr> X
  • B A R W <xmp> X

Seite Installationsanleitung
© 2007 Seite Impressum


SELFHTML: Navigationshilfen / Sidebars für HTML, CSS, JavaScript/DOM, XSLT/XPath, Perl und SELFHTML aktuell

SELFHTML

Sidebars für HTML, CSS, JavaScript/DOM, XSLT/XPath, Perl und SELFHTML aktuell
Informationsseite

nach unten Was sind die SELFHTML-Sidebars?
nach unten Installation der Sidebars
nach unten Sidebars für Netscape ab Version 6 und Mozilla
nach unten Sidebars für den Internet Explorer ab Version 5
nach unten Sidebars für Opera ab Version 6 und Mozilla Firefox
nach unten Sidebar-Adressen für den direkten Aufruf
nach unten

Was sind die SELFHTML-Sidebars?

Die Sidebars sind ein hilfreiches Werkzeug für die Arbeit mit SELFHTML. Sie enthalten in kompakter Form 4.125 Verweise auf SELFHTML, auf Spezifikationen und Entwürfe des W3-Konsortiums, auf Hersteller-Referenzen und externe Dokumentationen sowie ergänzende Informationen. Sie lassen sich bequem per Bookmark in die Seitenleisten moderner Browser integrieren, um so schnellen Zugriff auf alle benötigten Informationen zu gewährleisten. Nach der Einbindung werden Sidebars auf Wunsch – ähnlich einem Frameset – in einem getrennten Browser-Bereich parallel zum Inhalt der Hauptseite angezeigt. Wenn Sie einem Verweis aus der Sidebar folgen, wird das Verweisziel in der Hauptseite geladen.

Vorschau:

Legende:

  • B führt zur Beschreibung in SELFHTML
  • A führt zur Attribut-Referenz in SELFHTML
  • R führt zur Element-Referenz in SELFHTML
  • W führt zur Spezifikation beim W3-Konsortium (Internet-Verbindung erforderlich)
  • 3 führt zur Arbeitsentwürfen der CSS3-Module beim W3-Konsortium (Internet-Verbindung erforderlich)
  • N führt zur Netscape-JavaScript-Spezifikation bei mozilla.org (Internet-Verbindung erforderlich)
  • M führt zur Microsoft-JScript-Spezifikation (Internet-Verbindung erforderlich)
  • P führt zu Perldoc.perl.org (Internet-Verbindung erforderlich)
  • E führt zu einer externen Dokumentation der Beschreibung proprietärer (herstellerspezifischer) Möglichkeiten
  • X enthält ein Tooltip mit weiterführenden Informationen, Basis hierfür sind HTML 4.01 strict und CSS 2.1.
  • bereichsübergreifende Seite führt zum Online-Angebot von SELFHTML (Internet-Verbindung erforderlich)

War kein zugehöriges Verweisziel vorhanden, wurde der Buchstabe ausgegraut.

Installation der Sidebars

Falls Sie mit Netscape ab Version 6, Mozilla 1.x, dem Internet Explorer ab Version 5, Opera ab Version 6 oder Mozilla Firefox surfen, genügen einige Mausklicks, um die Sidebars verfügbar zu machen. Es ist dabei nicht zwingend erforderlich, die Installation aller Sidebars vorzunehmen, da Sie jederzeit mittels der Reiter am Seitenbeginn zwischen diesen wechseln können.

Netscape 6.0 Mozilla 1.x Sidebars für Netscape ab Version 6 und Mozilla

1. Klicken Sie auf die Sidebar, die Sie installieren wollen:

  • Seite HTML
  • Seite CSS
  • Seite JavaScript / DOM
  • Seite XSLT / XPath
  • Seite Perl
  • Seite aktuell

2. Bestätigen Sie mit "OK"

Die Sidebars befinden sich nun in Ihrer Seitenleiste, die Sie mit der Taste [F9] ein- und ausblenden können.

MS IE 5.0 Sidebars für den Internet Explorer ab Version 5

1. Klicken Sie auf die Sidebar, die Sie installieren wollen:

  • Seite HTML
  • Seite CSS
  • Seite JavaScript / DOM
  • Seite XSLT / XPath
  • Seite Perl
  • Seite aktuell

2. Bestätigen Sie den Sicherheitshinweis mit "Ja" und anschließend mit "OK" oder "hinzufügen".

In Ihren Favoriten befinden sich nun Einträge der Form "SELFHTML (Bereich).url", mit denen Sie die Sidebars in die Explorer-Leiste laden können.

Opera 6 Mozilla Firefox 1 Sidebars für Opera ab Version 6 und Mozilla Firefox

Klicken Sie auf die Sidebar, die Sie installieren wollen:

  • Seite HTML
  • Seite CSS
  • Seite JavaScript / DOM
  • Seite XSLT / XPath
  • Seite Perl
  • Seite aktuell

2. Bestätigen Sie mit "OK"

In Opera lassen sich die Sidebars mit der Taste [F4] ein- und ausblenden, in Firefox finden Sie diese in Ihren Lesezeichen.

Sidebar-Adressen für den direkten Aufruf

Sollte Ihr Browser keine Sidebar-Funktionalität bieten, können Sie die Sidebars auch direkt aufrufen und Ihren Bookmarks hinzufügen:

  • Seite HTML
  • Seite CSS
  • Seite JavaScript / DOM
  • Seite XSLT / XPath
  • Seite Perl
  • Seite aktuell
nach oben
weiter | Seite Suche
zurück | Seite Quickbar
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


SELFHTML: Navigationshilfen / JavaScript-Sidebar

  • HTML
  • CSS
  • JS/DOM
  • XSLT/XPath
  • Perl
  • aktuell

JavaScript-
und DOM-
Sidebar

  • B = Beschreibung
  • W = W3C-Spezifikation
  • N = Netscape / Mozilla JavaScript
  • M = Microsoft JScript
  • B W N M !=
  • B W N M $[1..9] (RegExp)
  • B W N M &
  • B W N M &&
  • B W N M >
  • B W N M >>
  • B W N M >=
  • B W N M <
  • B W N M <<
  • B W N M <=
  • B W N M *=
  • B W N M ++
  • B W N M +=
  • B W N M --
  • B W N M -=
  • B W N M /* */
  • B W N M /=
  • B W N M =
  • B W N M ==
  • B W N M ? :
  • B W N M \"
  • B W N M \f
  • B W N M \n
  • B W N M \r
  • B W N M \t
  • B W N M ^
  • B W N M { }
  • B W N M |
  • B W N M ||
  • B W N M a (HTML-Elementobjekt)
  • B W N M abbr (HTML-Elementobjekt)
  • B W N M above (layers)
  • B W N M abs() (Math)
  • B W N M abstract (reserviertes Wort)
  • B W N M acos() (Math)
  • B W N M acronym (HTML-Elementobjekt)
  • B W N M action (forms)
  • B W N M address (HTML-Elementobjekt)
  • B W N M alert() (window)
  • B W N M alinkColor (document)
  • B W N M all
  • B W N M altKey (event)
  • B W N M anchor() (String)
  • B W N M anchors (document)
  • B W N M appCodeName (navigator)
  • B W N M appendChild() (node)
  • B W N M appendData() (node)
  • B W N M applet (HTML-Elementobjekt)
  • B W N M applets (document)
  • B W N M appName (navigator)
  • B W N M appVersion (navigator)
  • B W N M area (HTML-Elementobjekt)
  • B W N M arguments (Function)
  • B W N M arity (Function)
  • B W N M Array
  • B W N M asin() (Math)
  • B W N M atan() (Math)
  • B W N M attributes (node)
  • B W N M availHeight() (screen)
  • B W N M availWidth() (screen)
  • B W N M b (HTML-Elementobjekt)
  • B W N M back() (history)
  • B W N M back() (window)
  • B W N M background (layers)
  • B W N M base (HTML-Elementobjekt)
  • B W N M basefont (HTML-Elementobjekt)
  • B W N M bdo (HTML-Elementobjekt)
  • B W N M below (layers)
  • B W N M bgColor (document)
  • B W N M bgColor (layers)
  • B W N M big (HTML-Elementobjekt)
  • B W N M big() (String)
  • B W N M blink() (String)
  • B W N M blockquote (HTML-Elementobjekt)
  • B W N M blur() (elements)
  • B W N M blur() (window)
  • B W N M body (HTML-Elementobjekt)
  • B W N M bold() (String)
  • B W N M Boolean
  • B W N M boolean (reserviertes Wort)
  • B W N M border (images)
  • B W N M br (HTML-Elementobjekt)
  • B W N M break
  • B W N M button (HTML-Elementobjekt)
  • B W N M byte (reserviertes Wort)
  • B W N M caller (Function)
  • B W N M caption (HTML-Elementobjekt)
  • B W N M captureEvents() (window)
  • B W N M case
  • B W N M catch
  • B W N M ceil() (Math)
  • B W N M center (HTML-Elementobjekt)
  • B W N M char (reserviertes Wort)
  • B W N M charAt() (String)
  • B W N M charCodeAt() (String)
  • B W N M charset (document)
  • B W N M checked (elements)
  • B W N M childNodes (node)
  • B W N M cite (HTML-Elementobjekt)
  • B W N M class (reserviertes Wort)
  • B W N M className (all)
  • B W N M className (Universaleigenschaft)
  • B W N M clearInterval() (window)
  • B W N M clearTimeout() (window)
  • B W N M click() (all)
  • B W N M click() (elements)
  • B W N M clientX (event)
  • B W N M clientY (event)
  • B W N M clip (layers)
  • B W N M cloneNode() (node)
  • B W N M close() (document)
  • B W N M close() (window)
  • B W N M closed (window)
  • B W N M code (HTML-Elementobjekt)
  • B W N M col (HTML-Elementobjekt)
  • B W N M colgroup (HTML-Elementobjekt)
  • B W N M colorDepth (screen)
  • B W N M complete (images)
  • B W N M concat() (Array)
  • B W N M concat() (String)
  • B W N M confirm() (window)
  • B W N M const
  • B W N M contains() (all)
  • B W N M continue
  • B W N M cookie (document)
  • B W N M cookieEnabled (navigator)
  • B W N M cos() (Math)
  • B W N M createAttribute() (document)
  • B W N M createElement() (document)
  • B W N M createTextNode() (document)
  • B W N M ctrlKey (event)
  • B W N M data (node)
  • B W N M dataFld (all)
  • B W N M dataFormatAs (all)
  • B W N M DataPageSize (all)
  • B W N M dataSrc (all)
  • B W N M Date
  • B W N M dd (HTML-Elementobjekt)
  • B W N M decodeURI()
  • B W N M decodeURIComponent()
  • B W N M default (Schlüsselwort)
  • B W N M defaultCharset (document)
  • B W N M defaultChecked (elements)
  • B W N M defaultSelected (options)
  • B W N M defaultStatus (window)
  • B W N M defaultValue (elements)
  • B W N M delete
  • B W N M del (HTML-Elementobjekt)
  • B W N M deleteData() (node)
  • B W N M description (mimeTypes)
  • B W N M description (plugins)
  • B W N M dfn (HTML-Elementobjekt)
  • B W N M dir (HTML-Elementobjekt)
  • B W N M dir (Universaleigenschaft)
  • B W N M disableExternalCapture() (window)
  • B W N M disabled (elements)
  • B W N M div (HTML-Elementobjekt)
  • B W N M dl (HTML-Elementobjekt)
  • B W N M do
  • B W N M document (window)
  • B W N M document (layers)
  • B W N M double (reserviertes Wort)
  • B W N M dt (HTML-Elementobjekt)
  • B W N M E (Math)
  • B W N M elements (forms)
  • B W N M else
  • B W N M em (HTML-Elementobjekt)
  • B W N M embeds (document)
  • B W N M enabledPlugin (mimeTypes)
  • B W N M enableExternalCapture() (window)
  • B W N M encodeURI()
  • B W N M encodeURIComponent()
  • B W N M encoding (forms)
  • B W N M escape()
  • B W N M eval()
  • B W N M event
  • B W N M exec() (RegExp)
  • B W N M exp() (Math)
  • B W N M export (Schlüsselwort)
  • B W N M extends (reserviertes Wort)
  • B W N M false (Schlüsselwort)
  • B W N M fgColor (document)
  • B W N M fieldset (HTML-Elementobjekt)
  • B W N M filename (plugins)
  • B W N M final (reserviertes Wort)
  • B W N M finally
  • B W N M find() (window)
  • B W N M firstChild (node)
  • B W N M fixed() (String)
  • B W N M float (reserviertes Wort)
  • B W N M floor() (Math)
  • B W N M focus() (elements)
  • B W N M focus() (window)
  • B W N M font (HTML-Elementobjekt)
  • B W N M fontcolor() (String)
  • B W N M fontsize() (String)
  • B W N M for
  • B W N M form (elements)
  • B W N M form (HTML-Elementobjekt)
  • B W N M forms (document)
  • B W N M forward() (history)
  • B W N M forward() (window)
  • B W N M frame (HTML-Elementobjekt)
  • B W N M frameset (HTML-Elementobjekt)
  • B W N M fromCharCode() (String)
  • B W N M function
  • B W N M Function
  • B W N M getAttribute() (all)
  • B W N M getAttribute() (node)
  • B W N M getAttribute() (style)
  • B W N M getAttributeNode() (node)
  • B W N M getDate() (Date)
  • B W N M getDay() (Date)
  • B W N M getElementById() (document)
  • B W N M getElementsByName() (document)
  • B W N M getElementsByTagName() (document)
  • B W N M getFullYear() (Date)
  • B W N M getHours() (Date)
  • B W N M getMilliseconds() (Date)
  • B W N M getMinutes() (Date)
  • B W N M getMonth() (Date)
  • B W N M getSeconds() (Date)
  • B W N M getSelection() (document)
  • B W N M getTime() (Date)
  • B W N M getTimezoneOffset() (Date)
  • B W N M getUTCDate() (Date)
  • B W N M getUTCDay() (Date)
  • B W N M getUTCFullYear() (Date)
  • B W N M getUTCHours() (Date)
  • B W N M getUTCMilliseconds() (Date)
  • B W N M getUTCMinutes() (Date)
  • B W N M getUTCMonth() (Date)
  • B W N M getUTCSeconds() (Date)
  • B W N M getYear() (Date)
  • B W N M go() (history)
  • B W N M goto (reserviertes Wort)
  • B W N M h1-h6 (HTML-Elementobjekt)
  • B W N M handleEvent() (window)
  • B W N M hasChildNodes() (node)
  • B W N M hash (location)
  • B W N M head (HTML-Elementobjekt)
  • B W N M height (embeds)
  • B W N M height (images)
  • B W N M height (screen)
  • B W N M history (window)
  • B W N M home() (window)
  • B W N M host (location)
  • B W N M hostname (location)
  • B W N M hr (HTML-Elementobjekt)
  • B W N M href (location)
  • B W N M hspace (embeds)
  • B W N M hspace (images)
  • B W N M html (HTML-Elementobjekt)
  • B W N M i (HTML-Elementobjekt)
  • B W N M id (all)
  • B W N M id (Universaleigenschaft)
  • B W N M if
  • B W N M iframe (HTML-Elementobjekt)
  • B W N M images (document)
  • B W N M img (HTML-Elementobjekt)
  • B W N M implements (reserviertes Wort)
  • B W N M in (Schlüsselwort)
  • B W N M indexOf() (String)
  • B W N M innerHeight (window)
  • B W N M innerHTML (all)
  • B W N M innerText (all)
  • B W N M innerWidth (window)
  • B W N M input (HTML-Elementobjekt)
  • B W N M ins (HTML-Elementobjekt)
  • B W N M insertAdjacentHTML() (all)
  • B W N M insertAdjacentText() (all)
  • B W N M insertBefore() (node)
  • B W N M insertData() (node)
  • B W N M instanceof (Schlüsselwort)
  • B W N M int (reserviertes Wort)
  • B W N M isFinite()
  • B W N M isindex (HTML-Elementobjekt)
  • B W N M isNaN()
  • B W N M isTextEdit (all)
  • B W N M italics() (String)
  • B W N M javaEnabled() (navigator)
  • B W N M javascript:
  • B W N M join() (Array)
  • B W N M kbd (HTML-Elementobjekt)
  • B W N M keyCode (event)
  • B W N M label (HTML-Elementobjekt)
  • B W N M lang (all)
  • B W N M lang (Universaleigenschaft)
  • B W N M language (all)
  • B W N M language (navigator)
  • B W N M lastChild (node)
  • B W N M lastIndexOf() (String)
  • B W N M lastModified (document)
  • B W N M layers (document)
  • B W N M layerX (event)
  • B W N M layerY (event)
  • B W N M left (layers)
  • B W N M legend (HTML-Elementobjekt)
  • B W N M length (all)
  • B W N M length (anchors)
  • B W N M length (applets)
  • B W N M length (Array)
  • B W N M length (embeds)
  • B W N M length (forms)
  • B W N M length (frames)
  • B W N M length (history)
  • B W N M length (images)
  • B W N M length (layers)
  • B W N M length (links)
  • B W N M length (mimeTypes)
  • B W N M length (options)
  • B W N M length (plugins)
  • B W N M length (String)
  • B W N M li (HTML-Elementobjekt)
  • B W N M link (HTML-Elementobjekt)
  • B W N M link() (String)
  • B W N M linkColor (document)
  • B W N M links (document)
  • B W N M LN10 (Math)
  • B W N M LN2 (Math)
  • B W N M load() (layers)
  • B W N M location
  • B W N M locationbar (window)
  • B W N M log() (Math)
  • B W N M LOG10E (Math)
  • B W N M LOG2E (Math)
  • B W N M long (reserviertes Wort)
  • B W N M lowsrc (images)
  • B W N M map (HTML-Elementobjekt)
  • B W N M match() (String)
  • B W N M Math
  • B W N M max() (Math)
  • B W N M MAX_VALUE (Number)
  • B W N M menu (HTML-Elementobjekt)
  • B W N M menubar (window)
  • B W N M meta (HTML-Elementobjekt)
  • B W N M method (forms)
  • B W N M mimeTypes
  • B W N M min() (Math)
  • B W N M MIN_VALUE (Number)
  • B W N M modifiers (event)
  • B W N M moveAbove() (layers)
  • B W N M moveBelow() (layers)
  • B W N M moveBy() (layers)
  • B W N M moveBy() (window)
  • B W N M moveTo (layers)
  • B W N M moveTo() (window)
  • B W N M moveToAbsolute() (layers)
  • B W N M name (anchors)
  • B W N M name (elements)
  • B W N M name (embeds)
  • B W N M name (forms)
  • B W N M name (images)
  • B W N M name (layers)
  • B W N M name (links)
  • B W N M name (plugins)
  • B W N M name (window)
  • B W N M NaN (Number)
  • B W N M native (reserviertes Wort)
  • B W N M navigator (window)
  • B W N M NEGATIVE_INFINITY (Number)
  • B W N M new
  • B W N M nextSibling (node)
  • B W N M nodeName (node)
  • B W N M nodeType (node)
  • B W N M nodeValue (node)
  • B W N M noframes (HTML-Elementobjekt)
  • B W N M noscript (HTML-Elementobjekt)
  • B W N M null (Schlüsselwort)
  • B W N M Number
  • B W N M Number()
  • B W N M object (HTML-Elementobjekt)
  • B W N M offsetHeight (all)
  • B W N M offsetLeft (all)
  • B W N M offsetParent (all)
  • B W N M offsetTop (all)
  • B W N M offsetWidth (all)
  • B W N M offsetX (event)
  • B W N M offsetY (event)
  • B W N M ol (HTML-Elementobjekt)
  • B W N M onabort
  • B W N M onblur
  • B W N M onchange
  • B W N M onclick
  • B W N M ondblclick
  • B W N M onerror
  • B W N M onfocus
  • B W N M onkeydown
  • B W N M onkeypress
  • B W N M onkeyup
  • B W N M onload
  • B W N M onmousedown
  • B W N M onmousemove
  • B W N M onmouseout
  • B W N M onmouseover
  • B W N M onmouseup
  • B W N M onreset
  • B W N M onresize
  • B W N M onselect
  • B W N M onsubmit
  • B W N M onunload
  • B W N M open() (document)
  • B W N M open() (window)
  • B W N M opener (window)
  • B W N M optgroup (HTML-Elementobjekt)
  • B W N M option (HTML-Elementobjekt)
  • B W N M options (elements)
  • B W N M outerHeight (window)
  • B W N M outerHTML (all)
  • B W N M outerText (all)
  • B W N M outerWidth (window)
  • B W N M p (HTML-Elementobjekt)
  • B W N M package (reserviertes Wort)
  • B W N M pageX (event)
  • B W N M pageX (layers)
  • B W N M pageXOffset (window)
  • B W N M pageY (event)
  • B W N M pageY (layers)
  • B W N M pageYOffset (window)
  • B W N M param (HTML-Elementobjekt)
  • B W N M parent (frames)
  • B W N M parentElement (all)
  • B W N M parentLayer (layers)
  • B W N M parentNode (node)
  • B W N M parentTextEdit (all)
  • B W N M parse() (Date)
  • B W N M parseFloat()
  • B W N M parseInt()
  • B W N M pathname (location)
  • B W N M personalbar (window)
  • B W N M PI (Math)
  • B W N M pixelDepth (screen)
  • B W N M platform (navigator)
  • B W N M play() (embeds)
  • B W N M plugins (navigator)
  • B W N M pop() (Array)
  • B W N M port (location)
  • B W N M POSITIVE_INFINITY (Number)
  • B W N M pow() (Math)
  • B W N M pre (HTML-Elementobjekt)
  • B W N M previousSibling (node)
  • B W N M print() (window)
  • B W N M private (reserviertes Wort)
  • B W N M prompt() (window)
  • B W N M protected (reserviertes Wort)
  • B W N M protocol (location)
  • B W N M public (reserviertes Wort)
  • B W N M push() (Array)
  • B W N M q (HTML-Elementobjekt)
  • B W N M random() (Math)
  • B W N M readOnly (elements)
  • B W N M recordNumber (all)
  • B W N M referrer (document)
  • B W N M releaseEvents() (window)
  • B W N M reload() (location)
  • B W N M removeAttribute() (all)
  • B W N M removeAttribute() (node)
  • B W N M removeAttribute() (style)
  • B W N M removeAttributeNode() (node)
  • B W N M removeChild() (node)
  • B W N M replace() (location)
  • B W N M replace() (String)
  • B W N M replaceChild() (node)
  • B W N M replaceData() (node)
  • B W N M reset() (forms)
  • B W N M resizeBy (layers)
  • B W N M resizeBy() (window)
  • B W N M resizeTo() (layers)
  • B W N M resizeTo() (window)
  • B W N M return
  • B W N M reverse() (Array)
  • B W N M round() (Math)
  • B W N M routeEvent() (window)
  • B W N M s (HTML-Elementobjekt)
  • B W N M samp (HTML-Elementobjekt)
  • B W N M screenX (event)
  • B W N M screenY (event)
  • B W N M script (HTML-Elementobjekt)
  • B W N M scrollbars (window)
  • B W N M scrollBy() (window)
  • B W N M scrollIntoView() (all)
  • B W N M scrollLeft (body)
  • B W N M scrollTo() (window)
  • B W N M scrollTop (body)
  • B W N M search (location)
  • B W N M search() (String)
  • B W N M select (HTML-Elementobjekt)
  • B W N M select() (elements)
  • B W N M selected (options)
  • B W N M selectedIndex (options)
  • B W N M self
  • B W N M setAttribute() (all)
  • B W N M setAttribute() (node)
  • B W N M setAttribute() (style)
  • B W N M setAttributeNode() (node)
  • B W N M setDate() (Date)
  • B W N M setFullYear() (Date)
  • B W N M setHours() (Date)
  • B W N M setInterval() (window)
  • B W N M setMilliseconds() (Date)
  • B W N M setMinutes() (Date)
  • B W N M setMonth() (Date)
  • B W N M setSeconds() (Date)
  • B W N M setTime() (Date)
  • B W N M setTimeout() (window)
  • B W N M setUTCDate() (Date)
  • B W N M setUTCFullYear() (Date)
  • B W N M setUTCHours() (Date)
  • B W N M setUTCMilliseconds() (Date)
  • B W N M setUTCMinutes() (Date)
  • B W N M setUTCMonth() (Date)
  • B W N M setUTCSeconds() (Date)
  • B W N M setYear() (Date)
  • B W N M shift() (Array)
  • B W N M shiftKey (event)
  • B W N M short (reserviertes Wort)
  • B W N M siblingAbove (layers)
  • B W N M siblingBelow (layers)
  • B W N M sin() (Math)
  • B W N M slice() (Array)
  • B W N M slice() (String)
  • B W N M small (HTML-Elementobjekt)
  • B W N M small() (String)
  • B W N M sort() (Array)
  • B W N M sourceIndex (all)
  • B W N M span (HTML-Elementobjekt)
  • B W N M splice() (Array)
  • B W N M split() (String)
  • B W N M sqrt() (Math)
  • B W N M SQRT1_2 (Math)
  • B W N M SQRT2 (Math)
  • B W N M src (embeds)
  • B W N M src (images)
  • B W N M src (layers)
  • B W N M static (reserviertes Wort)
  • B W N M status (window)
  • B W N M statusbar (window)
  • B W N M stop() (embeds)
  • B W N M stop() (window)
  • B W N M strike (HTML-Elementobjekt)
  • B W N M strike() (String)
  • B W N M String
  • B W N M String()
  • B W N M strong (HTML-Elementobjekt)
  • B W N M style (all)
  • B W N M style (HTML-Elementobjekt)
  • B W N M sub (HTML-Elementobjekt)
  • B W N M sub() (String)
  • B W N M submit() (forms)
  • B W N M substr() (String)
  • B W N M substring() (String)
  • B W N M suffixes (mimeTypes)
  • B W N M sup (HTML-Elementobjekt)
  • B W N M sup() (String)
  • B W N M super (reserviertes Wort)
  • B W N M switch
  • B W N M synchronized (reserviertes Wort)
  • B W N M table (HTML-Elementobjekt)
  • B W N M tagName (all)
  • B W N M tan() (Math)
  • B W N M target (links)
  • B W N M target (forms)
  • B W N M tbody (HTML-Elementobjekt)
  • B W N M td (HTML-Elementobjekt)
  • B W N M test() (RegExp)
  • B W N M text (anchors)
  • B W N M text (links)
  • B W N M text (options)
  • B W N M textarea (HTML-Elementobjekt)
  • B W N M tfoot (HTML-Elementobjekt)
  • B W N M th (HTML-Elementobjekt)
  • B W N M thead (HTML-Elementobjekt)
  • B W N M this
  • B W N M throw (Schlüsselwort)
  • B W N M throws (reserviertes Wort)
  • B W N M title (all)
  • B W N M title (document)
  • B W N M title (HTML-Elementobjekt)
  • B W N M title (Universaleigenschaft)
  • B W N M toExponential() (Number)
  • B W N M toFixed() (Number)
  • B W N M toLocaleString() (Date)
  • B W N M toLowerCase() (String)
  • B W N M toolbar (window)
  • B W N M top (frames)
  • B W N M top (layers)
  • B W N M toPrecision() (Number)
  • B W N M toString() (Number)
  • B W N M toUpperCase() (String)
  • B W N M tr (HTML-Elementobjekt)
  • B W N M transient (reserviertes Wort)
  • B W N M true (Schlüsselwort)
  • B W N M try
  • B W N M tt (HTML-Elementobjekt)
  • B W N M type (elements)
  • B W N M type (embeds)
  • B W N M type (event)
  • B W N M type (mimeTypes)
  • B W N M typeof
  • B W N M u (HTML-Elementobjekt)
  • B W N M ul (HTML-Elementobjekt)
  • B W N M unescape()
  • B W N M unshift() (Array)
  • B W N M URL (document)
  • B W N M userAgent (navigator)
  • B W N M UTC() (Date)
  • B W N M value (elements)
  • B W N M value (options)
  • B W N M var
  • B W N M var (HTML-Elementobjekt)
  • B W N M visibility (layers)
  • B W N M vlinkColor (document)
  • B W N M void
  • B W N M vspace (embeds)
  • B W N M vspace (images)
  • B W N M which (event)
  • B W N M while
  • B W N M width (embeds)
  • B W N M width (images)
  • B W N M width (screen)
  • B W N M window
  • B W N M with
  • B W N M write() (document)
  • B W N M writeln() (document)
  • B W N M x (anchors)
  • B W N M x (event)
  • B W N M x (links)
  • B W N M y (anchors)
  • B W N M y (links)
  • B W N M y (event)
  • B W N M zIndex (layers)

Seite Installationsanleitung
© 2007 Seite Impressum


SELFHTML: Navigationshilfen / Perl-Sidebar

  • HTML
  • CSS
  • JS/DOM
  • XSLT/XPath
  • Perl
  • aktuell

Perl-
Sidebar

  • B = Beschreibung
  • P = Perldoc-Referenz

  • Einführung

  • B P #
  • B P #!/usr/bin/perl
  • B P -c (perl)
  • B P -d (perl)
  • B P -h (perl)
  • B P -S (perl)
  • B P -T (perl)
  • B P -v (perl)
  • B P -w (perl)
  • B P use strict
  • B P sub { }
  • B P Content-type:

  • Sprache

  • B P and
  • B P continue
  • B P goto
  • B P do
  • B P else
  • B P elsif
  • B P eq
  • B P for
  • B P foreach
  • B P ge
  • B P gt
  • B P if
  • B P last
  • B P le
  • B P lt
  • B P ne
  • B P next
  • B P not
  • B P or
  • B P redo
  • B P sub
  • B P unless
  • B P while
  • B P xor
  • B P ->
  • B P ^
  • B P ~
  • B P !
  • B P !=
  • B P &
  • B P &&
  • B P |
  • B P ||
  • B P >
  • B P >=
  • B P >>
  • B P <
  • B P <=
  • B P <<
  • B P =
  • B P =~
  • B P ==
  • B P .=
  • B P @{$ }
  • B P %{$ }
  • B P \$
  • B P \@
  • B P \&
  • B P \*
  • B P *{$ }
  • B P ${$ }
  • B P &{$ }()
  • B P / /
  • B P s/ / /
  • B P tr/ / /

  • Symbole und Variablen

  • B P __DATA__
  • B P __END__
  • B P __FILE__
  • B P __LINE__
  • B P __PACKAGE__
  • B P % (Hashes)
  • B P %^H
  • B P %ENV
  • B P %SIG
  • B P @ (Liste/Array)
  • B P @_
  • B P @-
  • B P @+
  • B P @ARGV
  • B P @EXPORT
  • B P @EXPORT_OK
  • B P @INC
  • B P @ISA
  • B P $
  • B P $-
  • B P $#
  • B P $%
  • B P $*
  • B P $:
  • B P $;
  • B P $?
  • B P $[
  • B P $]
  • B P $~
  • B P $=
  • B P $'
  • B P $!
  • B P $"
  • B P $$
  • B P $&
  • B P $>
  • B P $<
  • B P $(
  • B P $)
  • B P $,
  • B P $.
  • B P $/
  • B P $?
  • B P $@
  • B P $\
  • B P $^
  • B P $^A
  • B P $^C
  • B P $^D
  • B P $^E
  • B P $^F
  • B P $^H
  • B P $^I
  • B P $^L
  • B P $^M
  • B P $^N
  • B P $^O
  • B P $^P
  • B P $^R
  • B P $^S
  • B P $^T
  • B P $^V
  • B P $^W
  • B P $^X
  • B P $_
  • B P $`
  • B P $|
  • B P $+
  • B P $0
  • B P $1,$2…
  • B P $ARG
  • B P $BASETIME
  • B P $CHILD_ERROR
  • B P $DEBUGGING
  • B P $EGID
  • B P $ERRNO
  • B P $EUID
  • B P $EVAL_ERROR
  • B P $EXECUTABLE_NAME
  • B P $GID
  • B P $INPLACE_EDIT
  • B P $INPUT_LINE_NR
  • B P $LAST_MATCH_END
  • B P $LAST_PAREN_MATCH
  • B P $LIST_SEPARATOR
  • B P $MATCH
  • B P $NR
  • B P $OFS
  • B P $ORS
  • B P $OS_ERROR
  • B P $OSNAME
  • B P $OUTPUT_AUTOFLUSH
  • B P $PERL_VERSION
  • B P $PERLDB
  • B P $PID
  • B P $POSTMATCH
  • B P $PREMATCH
  • B P $PROCESS_ID
  • B P $PROGRAM_NAME
  • B P $RS
  • B P $SYSTEM_FD_MAX
  • B P $UID
  • B P $WARNING

  • Escape-Sequenzen

  • B P \E
  • B P \l
  • B P \L
  • B P \u
  • B P \U
  • B P \"
  • B P \\
  • B P \0
  • B P \x
  • B P \a
  • B P \b
  • B P \e
  • B P \f
  • B P \n
  • B P \r
  • B P \t

  • Datei-Tests

  • B P -A
  • B P -b
  • B P -B
  • B P -c
  • B P -C
  • B P -d
  • B P -e
  • B P -f
  • B P -g
  • B P -k
  • B P -l
  • B P -M
  • B P -O
  • B P -o
  • B P -p
  • B P -R
  • B P -r
  • B P -s
  • B P -S
  • B P -t
  • B P -u
  • B P -W
  • B P -w
  • B P -x
  • B P -X
  • B P -z

  • Funktionen/Sprachkonstrukte

  • B P abs
  • B P alarm
  • B P atan2
  • B P binmode
  • B P bless
  • B P caller
  • B P chdir
  • B P chmod
  • B P chomp
  • B P chop
  • B P chown
  • B P chr
  • B P chroot
  • B P close
  • B P closedir
  • B P cos
  • B P crypt
  • B P defined
  • B P delete
  • B P die
  • B P each
  • B P endgrent
  • B P endhostent
  • B P endnetent
  • B P endprotoent
  • B P endpwent
  • B P endservent
  • B P eof
  • B P eval
  • B P exec
  • B P exists
  • B P exit
  • B P exp
  • B P fileno
  • B P flock
  • B P fork
  • B P format
  • B P getc
  • B P getgrent
  • B P getgrgid
  • B P getgrnam
  • B P gethostbyaddr
  • B P gethostbyname
  • B P gethostent
  • B P getlogin
  • B P getnetbyaddr
  • B P getnetbyname
  • B P getnetent
  • B P getpgrp
  • B P getppid
  • B P getpriority
  • B P getprotobynumber
  • B P getprotoent
  • B P getpwent
  • B P getpwnam
  • B P getpwuid
  • B P getservbyname
  • B P getservbyport
  • B P getservent
  • B P glob
  • B P gmtime
  • B P grep
  • B P hex
  • B P index
  • B P int
  • B P join
  • B P keys
  • B P kill
  • B P lc
  • B P lcfirst
  • B P length
  • B P link
  • B P local
  • B P localtime
  • B P log
  • B P lstat
  • B P map
  • B P mkdir
  • B P my
  • B P oct
  • B P open
  • B P opendir
  • B P ord
  • B P pack
  • B P package
  • B P pipe
  • B P pop
  • B P pos
  • B P print
  • B P printf
  • B P push
  • B P q
  • B P qq
  • B P quotemeta
  • B P rand
  • B P read
  • B P readdir
  • B P readlink
  • B P rename
  • B P require
  • B P reset
  • B P return
  • B P reverse ($)
  • B P reverse (@,%)
  • B P rewinddir
  • B P rmdir
  • B P scalar
  • B P seek
  • B P seekdir
  • B P select
  • B P setgrent
  • B P sethostent
  • B P setnetent
  • B P setpgrp
  • B P setpriority
  • B P setprotoent
  • B P setpwent
  • B P setservent
  • B P shift
  • B P sin
  • B P sleep
  • B P sort
  • B P splice
  • B P split
  • B P sqrt
  • B P srand
  • B P stat
  • B P substr
  • B P symlink
  • B P sysopen
  • B P sysread
  • B P sysseek
  • B P system
  • B P syswrite
  • B P tell
  • B P telldir
  • B P time
  • B P times
  • B P uc
  • B P ucfirst
  • B P umask
  • B P undef
  • B P unlink
  • B P unpack
  • B P unshift
  • B P use
  • B P utime
  • B P values
  • B P wait
  • B P waitpid
  • B P wantarray
  • B P warn
  • B P write

  • Module

  • B P CGI
  • B P AnyDBM_File
  • B P attrs
  • B P AutoLoader
  • B P AutoSplit
  • B P autouse
  • B P B
  • B P B::Asmdata
  • B P B::Bblock
  • B P B::Byte-Code
  • B P B::C
  • B P B::CCr
  • B P B::Debug
  • B P B::Deparse
  • B P B::Disassembler
  • B P B::Lint
  • B P B::Showlex
  • B P B::Stackobj
  • B P B::Terse
  • B P B::Xref
  • B P base
  • B P Benchmark
  • B P blib
  • B P Carp
  • B P CGI::Apache
  • B P CGI::Carp
  • B P CGI::Cookie
  • B P CGI::Fast
  • B P CGI::Push
  • B P CGI::Switch
  • B P Class::Struct
  • B P Config
  • B P constant
  • B P CPAN
  • B P CPAN::FirstTime
  • B P CPAN::Nox
  • B P Cwd
  • B P Devel::SelfStubber
  • B P diagnostics
  • B P DirHandle
  • B P DynaLoader
  • B P Env
  • B P Errno
  • B P Exporter
  • B P ExtUtils::Command
  • B P ExtUtils::Embed
  • B P ExtUtils::Install
  • B P ExtUtils::Installed
  • B P ExtUtils::Liblist
  • B P ExtUtils::MakeMaker
  • B P ExtUtils::Manifest
  • B P ExtUtils::Miniperl
  • B P ExtUtils::Mkbootstrap
  • B P ExtUtils::Mksymlists
  • B P ExtUtils::MM_Unix
  • B P ExtUtils::MM_VMS
  • B P ExtUtils::MM_Win32
  • B P ExtUtils::Packlist
  • B P ExtUtils::testlib
  • B P Fatal
  • B P Fcntl
  • B P fields
  • B P File::Basename
  • B P File::CheckTree
  • B P File::Compare
  • B P File::Copy
  • B P File::DosGlob
  • B P File::Find
  • B P File::Path
  • B P File::Spec
  • B P File::stat
  • B P FileCache
  • B P FileHandle
  • B P FindBin
  • B P GDBM_File
  • B P Getopt::Long
  • B P Getopt::Std
  • B P I18N::Collate
  • B P integer
  • B P IO
  • B P IO::File
  • B P IO::Handle
  • B P IO::Pipe
  • B P IO::Seekable
  • B P IO::Select
  • B P IO::Socket
  • B P IPC::Msg
  • B P IPC::Open2
  • B P IPC::Open3
  • B P IPC::Semaphore
  • B P IPC::SysV
  • B P lib
  • B P locale
  • B P Math::BigFloat
  • B P Math::BigInt
  • B P Math::Complex
  • B P Math::Trig
  • B P NDBM_File
  • B P Net::hostent
  • B P Net::netent
  • B P Net::Ping
  • B P Net::protoent
  • B P Net::servent
  • B P ODBM_File
  • B P Opcode
  • B P ops
  • B P overload
  • B P perldoc
  • B P Pod::Html
  • B P Pod::Text
  • B P POSIX
  • B P re
  • B P Safe
  • B P SDBM_File
  • B P Search::Dict
  • B P SelfLoader
  • B P Shell
  • B P sigtrap
  • B P Socket
  • B P strict
  • B P subs
  • B P Symbol
  • B P Sys::Hostname
  • B P Sys::Syslog
  • B P Term::Cap
  • B P Term::Complete
  • B P Term::ReadLine
  • B P Test
  • B P Test::Harness
  • B P Text::Abbrev
  • B P Text::ParseWords
  • B P Text::Soundex
  • B P Text::Tabs
  • B P Text::Wrap
  • B P Thread
  • B P Thread::Queue
  • B P Thread::Semaphore
  • B P Thread::Signal
  • B P Thread::Specific
  • B P Tie::Array
  • B P Tie::Handle
  • B P Tie::Hash
  • B P Tie::RefHash
  • B P Tie::Scalar
  • B P Tie::SubstrHash
  • B P Time::gmtime
  • B P Time::Local
  • B P Time::localtime
  • B P UNIVERSAL
  • B P User::grent
  • B P User::pwent
  • B P vars

Seite Installationsanleitung
© 2007 Seite Impressum


SELFHTML: Navigationshilfen / XSLT- und XPath-Sidebar

  • HTML
  • CSS
  • JS/DOM
  • XSLT/XPath
  • Perl
  • aktuell

XSLT-/XPath-
Sidebar

  • B = Beschreibung
  • W = W3C-Spezifikation

  • XSLT

  • B W xsl:apply-imports
  • B W xsl:apply-templates
  • B W xsl:attribute
  • B W xsl:attribute-set
  • B W xsl:call-template
  • B W xsl:choose
  • B W xsl:comment
  • B W xsl:copy
  • B W xsl:copy-of
  • B W xsl:decimal-format
  • B W xsl:element
  • B W xsl:fallback
  • B W xsl:for-each
  • B W xsl:if
  • B W xsl:import
  • B W xsl:include
  • B W xsl:key
  • B W xsl:message
  • B W xsl:namespace-alias
  • B W xsl:number
  • B W xsl:otherwise
  • B W xsl:output
  • B W xsl:param
  • B W xsl:preserve-space
  • B W xsl:processing-instruction
  • B W xsl:sort
  • B W xsl:strip-space
  • B W xsl:stylesheet
  • B W xsl:template
  • B W xsl:text
  • B W xsl:transform
  • B W xsl:value-of
  • B W xsl:variable
  • B W xsl:when
  • B W xsl:with-param

  • XPath

  • B W boolean()
  • B W ceiling()
  • B W concat()
  • B W contains()
  • B W count()
  • B W current()
  • B W document()
  • B W element-available()
  • B W false()
  • B W floor()
  • B W format-number()
  • B W function-available()
  • B W generate-id()
  • B W id()
  • B W key()
  • B W lang()
  • B W last()
  • B W local-name()
  • B W name()
  • B W namespace-uri()
  • B W normalize-space()
  • B W not()
  • B W number()
  • B W position()
  • B W round()
  • B W starts-with()
  • B W string()
  • B W string-length()
  • B W substring()
  • B W substring-after()
  • B W substring-before()
  • B W sum()
  • B W system-property()
  • B W translate()
  • B W true()
  • B W unparsed-entity-uri()

Seite Installationsanleitung
© 2007 Seite Impressum


SELFHTML-Suche - Einstellungen

Maximale Trefferzahl pro Seite

Stellen Sie hier ein, wieviele Treffer gleichzeitig pro Seite angezeigt werden sollen. Bedenken Sie, dass einzelne Suchen deutlich länger dauern können, wenn Sie hier "alle" wählen. Der Vorgabewert ist 50.

Treffer

Ausgabeformat

Hier können Sie einstellen, ob bei der "Wortanfang"- und "Oder"-Suche auch die in den Dokumenten vorkommenden zutreffenden Suchbegriffe angezeigt werden sollen (detailliert) oder nicht (einfach).

detailliert
einfach

Gefundene Dateien öffnen...

Hier können Sie einstellen, wo sich die Dokumente öffnen, wenn Sie in der Ergebnisliste auf die Überschrift klicken.

im selben Frame
in einem zweiten Fenster
jedes in einem eigenen Fenster

Hervorhebung der Treffer

Wenn Sie ein gefundenes Dokument geöffnet haben, können Sie darin über die Schaltfläche "Treffer markieren" im oberen Frame die Suchbegriffe farbig hervorheben lassen. Sie können hier einstellen, ob für alle Begriffe dieselbe Farbe verwendet werden soll oder ob mehrere Farben verwendet werden sollen.

gelbe Hervorhebung
mehrfarbige Hervorhebung

Schriftformatierung

Hier können Sie einstellen, ob die Treffer mit fetter oder normaler Schriftstärke ausgegeben werden.

fett
normal

Hinweis: zum Speichern der Einstellungen auf der Festplatte werden Cookies verwendet.


Selfhtml-Suche - Treffer

Seite Hilfe


SELFHTML: Navigationshilfen / SELFHTML-Suche

Und Oder
ganzes Wort Wortanfang


SELFHTML: Suche

Und Oder ganzes Wort Wortanfang Seite Einstellungen Suchleiste schließen


SELFHTML: Navigationshilfen / Suche

SELFHTML

Suche
Informationsseite

nach unten Funktionsweise
nach unten So formulieren Sie Suchanfragen
nach unten Kontakt
nach unten

Funktionsweise

Die vorliegende Suchfunktion ermöglicht eine komfortable Volltext-Suche über das gesamte Dokument. Sie ist vollständig mittels Kapitel JavaScript realisiert.

Die Suchmaschine ist in erster Linie für den lokalen Einsatz konzipiert, also für den Fall, dass Sie SELFHTML von der Festplatte oder von einer CD nutzen. Seit der Version für SELFHTML 8.1 kann sie aber auch direkt im Internet genutzt werden. Auch in diesem Fall erfolgen die Berechnungen für die Ermittlung des Suchergebnisses nicht auf dem Seite Server, auf dem SELFHTML liegt, sondern - dezentral - auf den Rechnern der Nutzer.

Wenn Sie SELFHTML im Internet lesen, haben Sie außerdem die Möglichkeit, die Online-Seite Online-Suche zu verwenden.

So formulieren Sie Suchanfragen

Folgende Suchmöglichkeiten stehen zur Verfügung:

Einfache Suche:

Geben Sie einfach einen oder mehrere Suchbegriffe in das obige Suchfeld ein.
Gefunden werden alle Dokumente, in denen die Suchbegriffe vorkommen (UND-Verknüpfung: alle Begriffe müssen vorkommen; ODER-Verknüpfung: mindestens einer der Begriffe muss vorkommen; geben Sie "und" bzw. "oder" nicht im Suchfeld ein, sondern benutzen Sie zur Auswahl die Schaltflächen). Zwischen Groß- und Kleinschreibung wird nicht unterschieden.

Sie können wählen zwischen

  • Suche nach ganzen Wörtern
  • Suche nach Wortanfängen

Die Auswahl erfolgt mittels der obigen Schaltflächen und wird automatisch auf alle Suchbegriffe angewandt.

Außerdem können Sie bestimmen, dass Seiten, in denen ein bestimmter oder bestimmte Begriffe vorkommen, nicht angezeigt werden. Für diese Ohne-Suche geben Sie ein "-" vor dem Begriff ein.

Phrasensuche:

Geben Sie zwei oder mehr Wörter innerhalb von Gänsefüßchen ein.
Bsp: "zeichen maskieren"
Gefunden werden Textstellen, in denen die angegebenen Wörter genau hintereinander vorkommen.

Diese Art der Suche lässt sich mit der Suche nach Wortanfängen kombinieren:
Wenn Sie mit dieser Option z.B eingeben: "regulär ausdr", werden "regulärer Ausdruck", "reguläre Ausdrücke" usw. gefunden.

Satzzeichen wie Punkt oder Komma werden automatisch ignoriert.

Weitere Funktionen:

Aus der Ergebnisliste können Sie die gefundenen Dokumente direkt zur Ansicht auswählen. Über die Option "Suchleiste schließen" können Sie dann die Frameansicht beenden und das Dokument ins Vollbild nehmen.

Wenn Sie die Suchleiste beibehalten, können Sie nicht nur jederzeit eine neue Suchanfrage formulieren, sondern auch über den Schalter "Treffer markieren" den oder die Suchtreffer im Dokument farbig hervorheben. Das setzt allerdings voraus, dass Sie nicht, wie es mittels der Seite Einstellungen möglich ist, die Dokumente in einem neuen Fenster öffnen lassen.

Mit der Tastenkombination [ALT] + u (für Suchen) können Sie das Eingabefeld der Suchleiste aktivieren. Sie können auch Wörter im Dokument mit der Maus markieren und nach oben in das Eingabefeld ziehen, um mit ihnen eine neue Suche durchzuführen.

Kontakt

Bitte richten Sie alle Fragen, Vorschläge, Fehlermeldungen usw. zu dieser Suchmaschine nicht an die SELFHTML-Redaktion, sondern direkt an den Autor der Suchmaschine: E-Mail Oliver García, selfsuche@ogu.de. Online-Seite Eventuelle neue Versionen der Suchmaschine für Selfhtml 8.x werden vom Autor im Internet zur Verfügung gestellt.

Unter dieser Adresse können Sie sich auch informieren, falls Sie sich für die Lizenzierung einer angepassten Version dieser Suchmaschine für Ihre eigenen Projekte, die z.B. auf CD-ROM veröffentlicht werden sollen, interessieren.

nach oben
zurück Seite Sidebars für HTML und CSS
Teil von SELFHTML Teil von Navigationshilfen

© 2007 Seite Impressum


## /etc/apache2/conf/httpd.conf

## Main Configuration Section
## You really shouldn't change these settings unless you're a guru
##
ServerRoot /usr/lib/apache2
ServerName lokal
LockFile /etc/apache2/apache2.lock
PidFile /var/run/apache2.pid
DocumentRoot /var/www/lokal

## Global Configuration
##
&lt;Directory /&gt;
    Options FollowSymLinks
    AllowOverride None
&lt;/Directory&gt;

&lt;Directory /var/www/lokal&gt;
    Options Indexes FollowSymLinks
    AllowOverride None
    Order allow,deny
    Allow from all
&lt;/Directory&gt;

Listen 80

Include conf/modules.d/*.conf
Include conf/module.conf
Include conf/error.conf
Include conf/alias.conf
Include conf/autoindex.conf
Include conf/mime.conf
Include conf/misc.conf
Include conf/virthost.conf

&lt;IfModule mod_log_config.c&gt;
CustomLog logs/access_log combined env=!VLOG
&lt;/IfModule&gt;

Timeout 300
KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 15

&lt;IfModule prefork.c&gt;
StartServers         5
MinSpareServers      5
MaxSpareServers     10
MaxClients         150
MaxRequestsPerChild  0
&lt;/IfModule&gt;


das ist \
eine Datei mit einer Konvention.
Ein Backslash am Ende \
einer Zeile bedeutet: \
keine neue Zeile!


Quelle: Günther Hornberger

Quelle

Gedicht "Otto's Brief an die Mutter", von Günther Hornberger, Kabarettist
deutschsprachige Seite http://www.hornberger-sonx.de/
E-Mail E-Mail info@hornberger-sonx.de


Quelle: Tilman Hausher

Quelle

Aus "Zaubertricks", von Tilman Hausher
deutschsprachige Seite http://home.snafu.de/tilman/zauber/


Quelle: Günther Hornberger

Quelle

Gedicht "Ottos Brief an die Mutter", von Günther Hornberger, Kabarettist
deutschsprachige Seite http://www.hornberger-sonx.de/


Quelle: Michael Joyce

Quelle

Michael Joyce:
Interview. Discover.
The World of science, November 1989

Zeitschriftenartikel zu einer neuen Dimension: Hyperfiction. Dahinter verbirgt sich eine mehrdimensionale, rezipientenorientierte Erzählkunst. Joyce gilt als einer der Vordenker für Hypertext als kreative Revolution.

Michael Joyce ist einer der ersten und bekanntesten Schriftsteller, welche die Angst vor der EDV abgelegt haben und bewusst auf die Hypertext-Fähigkeiten des Computers setzen. Seine Hypertext-Geschichte "Afternoon, a Story" (1982) wurde in Insider-Kreisen rasch bekannt. Auch als Software-Autor trat Joyce auf den Plan, als er gemeinsam mit Jay Bolter und John Smith das Produkt Storyspace entwickelte.

Weitere Informationen im WWW:
englischsprachige Seite Michael Joyce


Quelle: Rainer Kuhlen

Quelle

Rainer Kuhlen:
Hypertext
Ein nichtlineares Medium zwischen Buch und Wissensbank
Berlin, Heidelberg, New York, 1991

Keine Bestellquelle gefunden (Stand: Sommer 2001)

Sehr ausführlicher Überblick über "Hypertext" in deutscher Sprache. Das Buch behandelt die Geschichte von Hypertext und Begriffe rund um Hypertext, untersucht die Frage des informationellen Mehrwerts von Hypertext gegenüber linearen Medien, und enthält umfangreiche Register für weiterführende Literatur sowie Software-Produkte. Da es jedoch noch vor dem Hereinbrechen des WWW entstand, müssen einige Passagen und Aussagen heute in einem anderen Licht gesehen werden.

Rainer Kuhlen lehrt Informationswissenschaft an der Universität Konstanz:
deutschsprachige Seite Prof. Dr. Rainer Kuhlen

Ein Artikel von Rainer Kuhlen zu dem Themenkomplex findet sich auch in dem Sammelband:
"Grundlagen der praktischen Information und Dokumentation",
herausgegeben von Buder, Rehfeld, Seeger, Strauch.
K.G.Saur-Verlag
ISBN 3-598-11410-2


Quelle: William Rodriguez

Quelle

Das dargebotene Musikstück ist eine Komposition mit lateinamerikanischem Einschlag von E-Mail William Rodriguez (73162.317@compuserve.com)


Quelle: Peter Schnupp

Quelle

Peter Schnupp:
Hypertext.
In der Reihe: Handbuch der Informatik, Band 10.1
München, 1992

Keine Bestellquelle gefunden (Stand: Sommer 2001)

Allgemeinverständliche Einführung in das Gebiet Hypertext. Der Schwerpunkt liegt bei der informatischen Sicht. Die Anforderungen an Hypertext-Software und Hypertext-Anwendungen werden erörtert. Existierende Hypertext-Software und Hypertext-Anwendungen werden vorgestellt. Das Buch ist jedoch vor dem Hereinbrechen des WWW entstanden, weshalb einige Passagen heute in einem neuen Licht gesehen werden müssen.


Quelle: Frederic Vester

Quelle

Frederic Vester:
Neuland des Denkens
Stuttgart 1980

Erhältlich noch über deutschsprachige Seite Amazon-Antiquariat (Stand Sommer 2001)


Kommentarseite

Ihr Kommentar

Name:

Text:


ancestor

Vorfahr (ancestor)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Knoten vom Typ ancestor haben Nummern.


ancestor-or-self

Vorfahr oder der aktuelle Knoten selbst (ancestor-or-self)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Alle betroffenen Knoten haben Nummern.


Der Pinguin ist das Wahrzeichen von Linux


Was du heute kannst besorgen, das verschiebe nicht auf morgen.


Das ist linksbündiger Text

Das ist zentrierter Text

Das ist rechtsbündiger Text


HTML Abkürzung für 'How To Make Love'


Stanislaw Ludowiczy, E-Mail-Adresse: ludo@example.org


child

Kind (child)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Knoten vom Typ child haben Nummern.


Die Zahlen lauten:

69 (eine kleine Zahl)
12345 (eine große Zahl)
743 (eine kleine Zahl)
915743 (eine große Zahl)


Aphorismen

Wenn wir uns für besser halten, sind wir es schon dadurch nicht

Man kann nur Brücken schlagen zwischen Ufern, die man auseinanderhält


Telefon
Telefon | Hans | 069 - 11727349874
Telefon | Sabine | 040 - 116343432094


1.230.348.345,0
17.235.807,0
12.345,0


descendant

Nachkömmling (descendant)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Knoten vom Typ descendant haben Nummern.


descendant-or-self

Nachkömmling oder der aktuelle Knoten selbst (descendant-or-self)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Alle betroffenen Knoten haben Nummern.


Schaukelstuhl | 99,-
Kaffeemaschine | 49,95
Schraubenzieher | 4,95
Sofakissen | 29,95


following

Nachfolgende Knoten (following)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Knoten vom Typ following haben Nummern.


following-sibling

Nachfolgende Geschwisterknoten (following-sibling)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Knoten vom Typ following-sibling haben Nummern.


Klasse 7a

Hans Bentop
Anika Doll
Phillip Kleiber


Begriff | Definition
Avatar | Bezeichnet in der Mythologie einen Gott, der auf Erden wandelt. Im Online-Sprachgebrauch eine grafische Phantasiefigur, mit der ein Teilnehmer an Chats, Rollenspielen usw. teilnimmt.
Award | Im WWW eine Auszeichnung für besonders gut gemachte Web-Seiten. Eine Inflation von selbsternannten Award-Verleihern, deren Awards nur den Zweck haben, Besucher auf die eigenen Seiten zu locken, haben das Award-Wesen im Web jedoch stark beschädigt.


hallo Welt!


Crystol Freak | 453
Ueberflieger | 347


docroot | /usr/local/web
cgibin | /usr/local/bin/cgi


 Unter der Adresse http://www.w3.org/Style/XSL/ finden Interessierte die Einstiegsseite des W3-Konsortiums zu XSL.


Hallo Welt - vom Output-Stylesheet


 1. http://aktuell.de.selfhtml.org/
2. http://alpentouren.at/
3. http://fr.selfhtml.org/


parent

Elternknoten (parent)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Der Elternknoten hat eine Nummer.


preceding

Vorherige Knoten (preceding)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Knoten vom Typ preceding haben Nummern.


preceding-sibling

Vorherige Geschwisterknoten (preceding-sibling)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet. Knoten vom Typ preceding-sibling haben Nummern.


Hannes Breuer, breuer@example.org

Eleonore Bleibtreu, elblei@example.org


 Die neuesten Produktnachrichten:

Die Firma Fridolin Soft hat eine neue Version des beliebten Ballerspiels HitYourStick herausgebracht. Nach Angaben des Herstellers soll die neue Version, die nun auch auf dem Betriebssystem Ganzfix läuft, um die 80 Dollar kosten.

Von Ripfiles Inc. gibt es ein Patch zu der Sammel-CD-ROM Best of other people's ideas. Einige der tollen Web-Seiten-Templates der CD enthielten bekanntlich noch versehentlich nicht gelöschte Angaben der Original-Autoren. Das Patch ist für schlappe 200 Euro zu haben.


self

Der aktuelle Knoten selbst (self)

Der aktuelle Knoten, aus dessen Sicht betrachtet wird, ist blau gekennzeichnet und hat eine Nummer.


Richie | 27
Paolo | 19
Fridolin | 12
Winnie | 10


 1234567890


Dateiendungen

bak: Backup-Datei

bmp: Bitmap-Grafik


  • mein Haus
  • mein Auto
  • mein Boot


Erster Eintrag:
Das ist ein weites Feld

Eintrag:
Morgenstund hat Gold im Mund

Letzter Eintrag:
Stell dir vor es geht und keiner kriegts hin


10 | 100
11 | 121
12 | 144
13 | 169
14 | 196
15 | 225
16 | 256
17 | 289
18 | 324
19 | 361
20 | 400


Die Welt ist ein Dorf


Am 9.11.2000, um 16.00 Uhr MEZ, fand ein Chat mit der SELFHTML-Redaktion statt. Motto: was Sie immer schon ueber SELFHTML wissen wollten. Hintergrund der Aktion war aber auch, ein neues Chatsystem zu demonstrieren, das voll IRC-faehig ist, aber auch in Webseiten integrierbar ist und mit jedem Browser aufgerufen werden kann, da es rein serverseitig mit HTML und ohne Java realisiert wurde. Der Chatlog ist unter der WWW-Adresse http://www.netseek.de/selfhtml-chat/ festgehalten.