Dieser Frage mußten wir uns bei unserem Gästebuch stellen.

Da die Gästebucheinträge automatisch auf mehrere Seiten aufgeteilt werden, hatten wir nun viele Seiten mit dem gleichen Titel und der gleichen Beschreibung. In der Content-Analyse von Google wird so etwas als Spamming ausgewiesen.
Also haben wir uns mit einem dynamischen Titel und einer dynamischen Beschreibung beholfen. Den title-Tag und die description in den META-Tags haben wir deshalb mit einem php-Code erweitert. Die Erweiterung besteht lediglich aus einer Zeile.

Als Beispiel haben wir hier den Code unseres Gästebuchtitels einmal aufgeführt:

XHTML
<title>Gästebuch von Monika und Klaus
<?php if( !empty($_GET['seite']) )
      echo 'Seite'.ucfirst($_GET['seite']);
      else echo 'Seite 1'; ?>
</title>

Um zwischen Beschriftung und Eingabefeld eine logische Verbindung zu schaffen, existiert das label-Tag.

Damit müssen Sie, um ein bestimmtes Eingabefeld im Kantaktformular auszuwählen, nicht zwingend mit der Maus in das Eingabefeld klicken, sondern können auch auf dessen Beschriftung klicken.

Klicken Sie hier zum Beispiel auf den Text "Irgendein Text:", springen Sie automatisch in das zugehörige Feld.

Irgendein Text:


Die zugehörigen XHTML-Zeilen sehen wie folgt aus:

XHTML
<label for="labeltest">Irgendein Text:</label>
<br />
<input type="text" name="q" id="labeltest"
       value="Text" size="13" title="Text hier eingeben"
       onblur="if(this.value=='')this.value='Text';"
       onfocus="if(this.value=='Text')this.value='';" />

Die Button in unserem Menue sind alleine mit CSS-Mitteln erstellt worden.
Durch die Farbgebung des Button-Rahmen erzeugt man den Eindruck, als ob eine Taste gedrückt wird. Hierbei haben der obere und der linke Rahmen im nicht gedrückten Zustand die Farbe "gold" [color: #c93], und der untere und der rechte Rahmen die Farbe "schwarz" [color: #000].
Berührt man nun mit dem Mauszeiger einen Button, wird die Farbe gewechselt. Die Rahmenfarbe des oberen und linken Rahmen wechselt nach "schwarz" und des unteren und rechten Rahmen nach "gold".
Dieser Buttoneffekt wird außerdem noch dadurch verstärkt, daß die Hintergrundfarbe der Button von "schwarz" [color: #000] nach "grau" [color: #373737] wechselt, und die Schrift um 1 Pixel sowohl nach rechts als auch nach unten versetzt wird.
Dies erreicht man durch einen größeren Innenabstand (padding) zum Rahmen. Im Ruhezustand haben wir überall einen Abstand von 3 Pixel gewählt. In dem Moment wo der Mauszeiger den Button berührt, haben wir den oberen und linken Abstand auf 4 Pixel und den unteren und rechten Abstand auf 2 Pixel gesetzt.

CSS
#menue {
    font-size: 80%;
    margin-left: 5px;
    text-align: center;
    width: 118px }

#menue ul {
    list-style-type: none;
    margin: 0;
    padding: 0 }

#menue li {
    border: 2px ridge #373737;
    display: block;
    text-align: center }

#menue li a, #menue li a:link {
    border: 1px solid;
    border-color: #c93 #000 #000 #c93;
    color: #ffe;
    display: block;
    padding: 3px;
    text-decoration: none;
    width: 106px }

#menue li a:hover, #menue li a:active, #menue li a:focus {
    color: #eee;
    background: #373737;
    border: 1px solid;
    border-color: #000 #c93 #c93 #000;
    padding: 4px 2px 2px 4px;
    text-decoration: underline }

XHTML
<div id="menue">
  <br />
  <ul>
    <li>
      <a href="/hilfe.php" title="Wissenswertes"></a>
    </li>
  </ul>
</div>

Für die Datumsanzeige bei den "Neuigkeiten" oder auf unserer Startseite bei "Aktuelles" haben wir uns überlegt, diese ähnlich einem Kalenderblatt zu erstellen.
Die Anzeige ist dabei ausschließlich mit CSS-Mitteln erstellt worden.
Zuerst wird die Anzeige als Block mit einer festen Breite und einem 1 Pixel breiten Rahmen festgelegt und entsprechend in den Text platziert.

CSS
p.datum {
    background: #000;
    font-family: Constantia, Georgia, "Bitstream Vera Serif", Palatino Linotype", serif;
    font-size: 1.2em;
    line-height: 1.2em;
    color: #ffe;
    float: left;
    display: block;
    width: 50px;
    margin: 20px 40px;
    border: 1px #ccc solid }

Für die Tages-, Monats- und Jahresanzeige haben wir dann unterschiedliche Farben und Schriftgrößen eingesetzt.
Mit dem "margin-Befehl" werden die einzelnen Anzeigen im Block entsprechend ausgerichtet.

CSS
.tag, .monat, .jahr {
    display: block;
    padding: 0 2px;
    text-align:center }

.tag {
    font-size: 1.3em;
    padding: 2px 0 0;
    color: #ffd;
    position: relative }

.monat {
    font-size: .9em;
    margin: -0.3em 0 0;
    color: #c93 }

.jahr {
    font-size: .7em;
    margin: -0.8em 0 0;
    color: #999 }

Auf der Seite "Neuigkeiten" sieht der zugehörige XHTML-Code, zum Beispiel für den 07.01.2009, wie folgt aus:

07Jan2009

XHTML
<p class="datum">
  <span class="tag">07</span>
  <span class="monat" title="Januar">Jan</span>
  <span class="jahr">2009</span>
</p>

Einige Elemente besitzen in HTML den Status "deprecated" (veraltet) und sind somit durch andere Methoden zu ersetzen, die die gleiche Aufgabe erfüllen. Dazu gehört auch das "applet"-Element (applet = application snippet = Anwendungsschnipsel).
Damit aber nun das Flash-Panorama in allen Browsern richtig angezeigt wird, ist für die Einbindung etwas mehr Aufwand nötig als beim Java-"Applet". Und die Lösung dazu möchten wir hier etwas detaillierter aufzeigen.
Mit dem "applet"-Element wurde bisher der PanoramaStudio Viewer auf unseren Seiten wie folgt eingebunden:

XHTML
<applet archive="galerie/bilder/panorama/panoStudioViewer.jar"
        code="panoStudioViewer.PanoStudioViewer.class"
        name="panorama01"
        height="500"
        width="700"
        alt="Sonnenuntergang auf Ibiza">
            <param name="file" value="galerie/bilder/panorama/panorama01.JPG" />
            <param name="pano" value="globales/panorama01.xml" />
</applet>

Alle benötigten Parameter zur Beschreibung und Konfiguration des Panoramas liegen dabei in einer XML-Datei vor, die über den Parameter param name="pano" dem Applet zugewiesen wird.


Als Nachfolger zum "applet"-Element wurde von den Entwicklern das "object"-Element eingeführt.
Damit wird nun die Flash-Komponente des PanoramaStudio Viewer in unsere Panoramaseiten eingebunden.
Mit Microsoft funktioniert die Einbindung durch das "object-Tag" auch wunderbar, aber leider nicht mit Netscape oder Mozilla. Das Problem ist hierbei das "CLSID Attribut". Dieses Attribut verhindert im Netscape oder Mozilla jegliche Anzeige.
Die Entwickler führten deshalb den "embed-Tag" ein. Mit diesem Element wird ein Bereich definiert, der nur von Browsern angezeigt wird, die das "embed-Tag" kennen.
Das folgende Beispiel zeigt die Einbindung dieser Flash-Variante, die auch im Handbuch von PanoramaStudio beschrieben wird:

XHTML
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
   width="800"
   height="500"
   id="MeinPanorama"
   codebase="http://active.macromedia.com/flash9/cabs/swflash.cab#version=9,0,28,0">
       <param name="movie" value="globales/panoStudioViewer.swf" />
       <param name="allowScriptAccess" value="always" />
       <param name="allowNetworking" value="all" />
       <param name="allowFullScreen" value="true" />
       <param name="FlashVars" value="pano=globales/panorama01.xml" />
       <embed src="globales/panoStudioViewer.swf"
              width="800"
              height="500"
              type="application/x-shockwave-flash"
              name="MeinPanorama"
              allowScriptAccess="always"
              allowNetworking="all"
              allowFullScreen="true"
              FlashVars="pano=globales/panorama01.xml"
              pluginspage="http://www.macromedia.com/go/getflashplayer" >
       </embed>
</object>

Soweit so gut! Die beiden Tags werden hier miteinander verknüpft, und weil der Internet Explorer den "embed-Tag" ignoriert, gibt es auch eigentlich keine Probleme.
Nur mit dem Validator vom W3C Konsortium, denn der "embed-Tag" ist leider nicht im HTML-Standard vorhanden. Das ist der Grund, warum wir noch einen Schritt weiter gegangen sind.
Wir stellen deshalb die beiden unterschiedlichen Varianten den Browsern anders zur Verfügung. Der erst Teil mit dem "CLSID Attribut" für den Internet Explorer und der zweite Teil ohne "CLSID Attribut" für den Mozilla. Das Ganze sieht dann wie folgt aus:

XHTML
<object
   data="globales/panoStudioViewer.swf"
   width="100%"
   height="500"
   type="application/x-shockwave-flash"
   name="pano"
   class="ieaus">
       <param name="allowScriptAccess" value="always" />
       <param name="allowNetworking" value="all" />
       <param name="allowFullScreen" value="true" />
       <param name="FlashVars" value="pano=globales/panorama01.xml" />
</object>
<!--[if IE]>
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
   width="100%"
   height="500"
   id="pano"
   codebase="http://active.macromedia.com/flash9/cabs/swflash.cab#version=9,0,28,0">
       <param name="movie" value="globales/panoStudioViewer.swf" />
       <param name="allowScriptAccess" value="always" />
       <param name="allowNetworking" value="all" />
       <param name="allowFullScreen" value="true" />
       <param name="FlashVars" value="pano=globales/panorama01.xml" />
</object>
<![endif]-->

Und das zugehörige CSS Schnipsel:

CSS
.ieaus {
    text-align: center }
* html .ieaus {
    display: none }

Was passiert hier? Zuerst lesen alle Browser den ersten "object-Tag" und stellen das Panorama entsprechend dar. Damit aber der Internet Explorer diese für ihn untaugliche Variante ausblendet, wird mit class="ieaus" und dem CSS-Befehl (display:none) dieser "object-Tag" für den Internet Explorer ausgeblendet.
Mit dem bedingten Kommentar (englisch: Conditional Comment), eingeleitet mit: <!--[if IE]> und beendet mit: <![endif]-->, wird nun erreicht, daß zum Beispiel der Mozilla diesen Kommentar und auch die darin enthaltenen XHTML Anweisungen als syntaktisch korrekten Kommentar erkennt und folglich diesen "object-Tag" ignoriert.

Die Abkürzung "ges." wird zum Beispiel wie folgt geschrieben:

HTML
<abbr title="gesamt">ges.</abbr>

In den Texten haben wir bestimmte Akronyme (Kurzwörter) mit einem Hilfstext versehen und mit einer gestrichelten Linie gekennzeichnet.
Damit aber der Inhaltsbereich einer Seite durch zu viele Unterstreichungen nicht zu unruhig und unübersichtlich aussieht, haben wir uns für die folgende Vorgehensweise entschieden:

Akronyauszeichnung

• Alle entsprechenden Kurzwörter werden ausgezeichnet
• Das erste Auftreten in einem Abschnitt wird mit einer gestrichelten Linie gekennzeichnet
• Alle weiteren Akronyme die kurz hintereinander in dem Textabschnitt vorkommen, werden nur ausgezeichnet, aber nicht mit einer Linie versehen

Ein Beispiel, wie das für HTML programmiert wird, ist hier aufgeführt:

HTML
<acronym title="HyperText Markup Language">HTML</acronym>

Hier wird der entsprechende Hilfstext beim drüberfahren mit der Maus eingeblendet.
Beim nächsten Beispiel ist er zwar auch vorhanden, aber nicht mit einer Linie versehen. Trotzdem wird er angezeigt, wenn man mit der Maus auf HTML geht.

HTML
<acronym title="HyperText Markup Language" class="standard">HTML</acronym>

Der Unterschied zwischen diesen beiden Auszeichnungen besteht nur in der zugefügten Klasse und wird in CSS wie folgt programmiert.

CSS
acronym {
    cursor: help;
    text-decoration: none;
    border-bottom: 1px dotted #c93 }

acronym.standard {
    cursor: help;
    border: none;
    background: transparent }

Textpassagen oder Wörter in Fremdsprachen werden bei jedem Auftreten im Text entsprechend in XHTML ausgezeichnet.
Das Wort "Browser" wird zum Beispiel so ausgezeichnet:

XHTML
<span lang="en" xml:lang="en">Browser</span>

Um Quellcode bei Programmlistings richtig und übersichtlich darzustellen, sollte jeder Buchstabe oder jede Zahl die gleiche Breite beanspruchen. Dafür bietet der HTML-Standard das <pre>-Element an. Dieses Element leitet einen Textabschnitt mit vorformatiertem Text ein. "Vorformatiert" bedeutet, daß der Text vom Browser exakt in der gleichen Weise dargestellt wird, wie er innerhalb des öffnenden und schließenden <pre>-Element steht. Auch Leerzeichen, Tabulatoren, Zeilenumbrüche, Zeilen und Spalten werden korrekt wiedergegeben.
Das <code>-Element zeichnet wiederum einen Text mit der Bedeutung "Quelltext" aus und ist dafür gedacht, Computercode innerhalb eines Textes dazustellen.
Den Quellcode aus dem vorherigen Abschnitt haben wir nachfolgend dargestellt:

XHTML
<pre>
    <code>
    <span lang="en" xml:lang="en">Browser</span>
    </code>
</pre>

Um mögliche Probleme bei der Verarbeitung von bestimmten Zeichen und Umlauten zu vermeiden, sollte man diese durch ASCII-Zeichen ersetzen. Wir haben an dieser Stelle einmal die aufgeführt, die wir auf unseren Seiten verwendet haben:

HTML
Zeichen - Ersetzung
   ä    -   ä
   Ä    -   Ä
   ö    -   ö
   Ö    -   Ö
   ü    -   ü
   Ü    -   Ü
   ß    -   ß
   &    -   &
   <    -   &lt;
   >    -   &gt;
   "    -   &quot;
   '    -   &#39;