Wissenswertes und Codeschnipsel für Webdesigner beim Optimieren einer Website

Auf unserer Website befindet sich in der Fußzeile ein Copyright-Hinweis mit dem Datum wann die Seite gestartet ist und dem aktuellen Jahr. Nun müßten wir eigentlich jedes Jahr zum 1. Januar die Jahreszahl des aktuellen Datums in der Fußzeile aktualisieren.

Um das zu vermeiden rufen wir in der Fußzeile eine dynamische Funktion auf, die automatisch das aktuelle Jahr anzeigt:

XHTML
© 2007-<?php echo date ('Y');?>, Monika und Klaus Franz;

Das Ergebnis sieht dann so aus: © 2007-2012, Monika und Klaus Franz;

Die Anzeige, wann die letzte Änderung einer Seite erfolgt ist, wird mit folgendem Code ermittelt:

XHTML
<?php echo "Letzte Änderung: ". date("d.m.Y, H:i.",getlastmod());?>

Und die zugehörige Ausgabe lautet: Letzte Änderung: 11.04.2012, 20:54.

Auf diese Art kann man mit ein wenig Codeschnipsel auch das aktuelle Datum und die Uhrzeit in verschiedenen Formaten anzeigen. Für diese Anzeige:

Friday, 18. May 2012, 0:18:33

reicht der folgende Code:

XHTML
<?php echo date ('l, j. F Y, G:i:s');?>

Für die Ausgabe von Datum und Zeit in Deutsch:

Freitag, 18. Mai 2012, 00:18:33

benötigt man den folgenden Code:

XHTML
<?php
  setlocale (LC_TIME, "de_DE");
  echo strftime("%A, %d. %B %Y, %H:%M:%S");
?>

Weitere Varianten für Datum und Zeit finden Sie im PHP Manual.

Damit ein externer Seitenaufruf sich besser von einem internen Seitenaufruf abhebt, werden diese mit dem folgenden Symbol gekennzeichnet:

Der Code sieht hierfür wie folgt aus:

XHTML
<a class="extern" href="#exlink"
   title="Externer Seitenaufruf: Ein Beispiellink" >
   Beispiellink
</a>

Und im CSS sind dafür die folgenden Zeilen notwendig:

CSS
.extern {
    letter-spacing: 1px;
    padding-right:20px }

a:link.extern {
    background: url(../bilder/external.gif) no-repeat 100% 0 }

a:visited.extern {
    background: url(../bilder/external.gif) no-repeat 100% -100px }

a:hover.extern, a:active.extern, a:focus.extern {
    background: url(../bilder/external.gif) no-repeat 100% -200px }

Es gibt Webseiten die sind so kurz, daß kein Scrollbalken nötig ist um den Inhalt darzustellen. Das ist aber beim Blättern von einer langen auf eine kurze Seite störend, da die neu aufgerufene Unterseite dann um die Breite eines Scrollbalken zur Seite springt. Um das zu Vermeiden wird jede Unterseite auf 100% Höhe gezwungen und damit immer ein Scrollbalken erzeugt.

Hierfür ist nur eine kleine Ergänzung im CSS notwendig:

CSS
html {
    overflow-y: scroll }

Innerhalb einer Webseite werden Anker platziert und, um einen Sprung an solch eine Ankerstelle zu veranlassen, Verweise zu solchen Ankern gesetzt.

In HTML können Sie mit <a href="#ankername"> Verweis <a> einen Verweis zu solch einem Anker schreiben. Der zugehörige Anker sieht dabei wie folgt aus: <a name="ankername">...</a>.

Unsere Seiten sind in XHTML geschrieben, und da benötigt man im Anker noch zusätzlich das Universalattribut id als eindeutige Bezeichnung. Aus diesem Grund sahen unsere Anker bisher wie folgt aus:
<a id="ankername" name="ankername" class="titel">...</a>.

Mit dem class-Element wurde noch zusätzlich per CSS dafür gesorgt, dass kein Unterstrich beim fokussieren eines Ankers entsteht.

Diese Schreibweise war notwendig damit ältere Browser, wie zum Beispiel der Netscape, diese Anker anspringen können. Ältere Browser führen den Verweis nach HTML Logik aus und benötigen dafür das name-Attribut, während die neueren Browser eine eindeutige Bezeichnung, das id-Attribut, benötigen.

Mittlerweile kann man aber davon ausgehen, daß die älteren Browser kaum noch benutzt werden. Und das hat uns veranlaßt, uns von dem zusätzlichen Code auf unseren Seiten zu verabschieden. Außerdem darf in XHTML 1.1 das name-Attribut sowieso nicht mehr verwendet werden.

Damit würde ein Anker wie folgt aussehen: <a id="ankername" class="titel">...</a>

Aber das id-Attribut hat noch den großen Vorteil, daß es vorhandenen Elementen, zum Beispiel Überschriften, zugewiesen werden kann. Und damit konnte auch das class-Element für das nicht Unterstreichen beim Fokussieren eines Ankers entfallen:

<h3 id="ankername">Überschrift</h3>

Das sieht schon wesentlich übersichtlicher aus.