In diesem Abschnitt erhalten Sie einen Überblick über weitere interessante XHTML-Elementtypen, die sich nicht in einen der vorherigen Abschnitte einordnen ließen.

Kontaktinformationen: Der Elementtyp address

Das Element address dient Webautoren dazu, Kontaktinformationen für das aktuelle Dokument bereitzustellen.

Es ist nicht dafür gedacht, generelle Kontaktinformationen auszuzeichnen, also etwa Einträge in einem Adressbuch. address ist ein Blockelement und darf nur Inline-Elemente enthalten.

<address>Verantwortlich für den Inhalt:
  <a href="mailto:michael@jendryschik.de">Jendryschik</a>
</address>

Zum Seitenanfang

Präformatierter Text: Der Elementtyp pre

Das Element pre zeichnet seinen Inhalt als präformatiert (vorformatiert) aus. Der Browser lässt Leerraumzeichen (in HTML und XHTML die Zeichen Tabulator, Leerzeichen, Wagenrücklauf und Zeilenvorschub) intakt, verhindert einen automatischen Umbruch und stellt Text im Allgemeinen in einer Nichtproportionalschrift (Festbreitenschrift) dar.

Dieses Verhalten ist vorteilhaft, wenn die flexible Darstellung von XHTML die gewünschte Darstellung Ihres Texts verhindert, zum Beispiel bei Gedichten, ASCII-Zeichnungen oder Quelltextbeispielen.

Beachten Sie, dass Quelltext zusätzlich mit dem Element code ausgezeichnet wird (siehe Kapitel 5.5.1). Da das Element pre Markup enthalten kann, müssen Sonderzeichen durch die entsprechenden Zeichenreferenzen umschrieben werden.

<pre><code>&lt;address>Verantwortlich für den Inhalt:
  &lt;a href="mailto:michael@jendryschik.de">Jendryschik&lt;/a>
&lt;/address></code></pre>

Zum Seitenanfang

Programmcode eines Scripts: Die Elementtypen script und noscript

Ein clientseitiges Script ist ein Programm, das in ein (X)HTML-Dokument eingebettet ist und auf dem Rechner des Nutzers ausgeführt wird, wenn das Dokument geladen oder ein bestimmtes Ereignis ausgelöst wird, etwa wenn der Nutzer auf einen Link klickt oder mit der Maus über einen bestimmten Bereich der Seite fährt. Die am weitesten verbreitete Skriptsprache ist JavaScript.

JavaScript ist eine hauptsächlich clientseitig eingesetzte Skriptsprache, die dazu entwickelt wurde, Webseiten dynamisch zu gestalten. JavaScript ist unabhängig vom Betriebssystem, aber nicht vom verwendeten Browser, der das Script interpretiert. Die Grundlage von JavaScript bildet ECMAScript, das als ECMA-262 standardisiert wurde; JavaScript in der Version 1.5 entspricht ECMA-262, Version 3 [ECMA-262 1999]. Aktuell ist Version 1.8. Über das Document Object Model (siehe Kapitel 4.3) kann JavaScript auf alle Elemente der Webseite zugreifen und ermöglicht, diese Elemente auch dann zu ändern oder sogar neu zu erzeugen, nachdem die Seite vom Browser geladen und dargestellt wurde.

Mit JavaScript ist es unter anderem möglich,

• eine rudimentäre Plausibilitätsprüfung von Formularen vor dem Absenden vorzunehmen,
• Formularfelder vorzubelegen,
• auf Benutzereingaben mit speziellen Aktionen zu reagieren, zum Beispiel Elemente ein- oder auszublenden oder Grafiken auszutauschen,
• Werte von CSS-Eigenschaften und damit die Darstellung von Elementen auf der Seite zu ändern,
• Daten zu empfangen und zu senden, ohne dass der Browser die Seite neu laden muss (Stichwort: AJAX).

Das Element script bindet ein Script innerhalb eines Dokuments ein. Es darf beliebig oft im head und body eines Dokuments stehen. Das Script kann im Inhalt des script-Elements definiert oder in eine externe Datei ausgelagert werden. Das Attribut type gibt in Form eines MIME-Typs an, um welche Skriptsprache es sich handelt.

Das bewusst sehr einfach gehaltene Listing 5.21 (schließlich lesen Sie gerade eine Einführung in XHTML, nicht in JavaScript) zeigt die Verwendung des script-Elements. Es enthält eine Funktion, über die Vordergrund-, Hintergrund- und Rahmenfarbe eines Elements einer bestimmten ID geändert werden können. Das Script wird über das Universalattribut onmouseover der im Dokumentkörper aufgeführten Links aufgerufen. Ein style-Element (mehr dazu in Kapitel 6.3.2) enthält die notwendigen CSS-Eigenschaften, deren Werte durch das Script verändert werden.

<!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" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Das Element 'script'</title>
    
    <script type="text/javascript">
      /* <![CDATA[ */
      function changeColors(id, color, backgroundColor, borderColor)
      {
        var current = document.getElementById(id);
      
        if(current)
        {
          current.style.color = color;
          current.style.backgroundColor = backgroundColor;
          current.style.borderColor = borderColor;
          return false;
        }
      }
      /* ]]> */
    </script>
    
    <style type="text/css">
      /* <![CDATA[ */
      #block {
        color: #5F5E5E;
        background-color: #E9EEF1;
        border: 1px solid #A9B7C0;
        width: 400px;
        padding: 5px 10px;
        font-weight: bold;
        text-align: center;
      }
    /* ]]> */
    </style>
  </head>
  
  <body>
    <p>Bitte wählen Sie ein Farbschema:</p>
    
    <ul class="chooser">
      <li>
        <a href="#"onmouseover="return changeColors('block', '#1A1A1A', '#EBE4C3', '#9AA7AE');">Erste Farbkombination</a>
      </li>
      <li>
        <a href="#"onmouseover="return changeColors('block', '#494A8D', '#CCCCFF', '#494A8D');">Zweite Farbkombination</a>
      </li>
      <li>
        <a href="#"onmouseover="return changeColors('block', '#5F5E5E', '#E9EEF1', '#A9B7C0');">Standardwerte</a>
      </li>
    </ul>
    
    <p id="block">Lorem ipsum eos ignota fierent officiis at, vero rebum adolescens eum te. Id erant fabellas eam, ne populo luptatum eleifend est. Pri eu insolens persecuti.</p>
  </body>
</html>

Eine bessere Lösung ist in den meisten Fällen, das Script in eine externe Datei auszulagern. Dabei wird der Inhalt des script-Elements in ein eigenes Textdokument geschrieben und mit der Dateinamenserweiterung js gespeichert. Die Einbindung erfolgt ebenfalls über das script-Element, wobei die Datei im Attribut src über einen URI referenziert wird:

<script type="text/javascript" src="changeColors.js"></script>

Scripts werden häufig für zentrale Funktionen einer Website eingesetzt, etwa zur Realisierung eines dynamischen Navigationsmenüs (ohne an dieser Stelle diskutieren zu wollen, ob ein solches JavaScript-Menü sinnvoll ist oder nicht). Wenn ein Nutzer diese Website mit einem Browser besucht, der die verwendete Skriptsprache nicht kennt, oder wenn der Nutzer die Scriptunterstützung seines Browsers deaktiviert hat, wird er womöglich ein Problem bekommen: Gibt es keine alternative Navigation, ist die Website für ihn nicht vollständig zugänglich, im schlimmsten Fall überhaupt nicht navigierbar. Die Verwendung des Elements noscript kann Abhilfe schaffen.

Das Element noscript erlaubt Autoren, alternativen Inhalt anzubieten, der nur angezeigt wird, wenn ein Script nicht ausführbar ist.

So könnte Listing 5.21 dahingehend erweitert werden, dass über ein noscript-Element eine alternative Navigation bereitgestellt wird, die auf Unterseiten verweist, bei denen das entsprechende Farbschema standardmäßig eingestellt ist. Entwickler sollten dann natürlich darauf achten, dass der JavaScript-Farbwechsler nur dann erscheint, wenn JavaScript aktiviert ist, das heißt diesen also auch per Script ausgeben.

<noscript>
  <ul class="chooser">
    <li>
      <a href="farbschema1.html">Erste Farbkombination</a>
    </li>
    <li>
      <a href="farbschema2.html">Zweite Farbkombination</a>
    </li>
  </ul>
</noscript>