HTML: 404 Not Found - The requested URL was not found on this server.

Wer ist dieser Meldung nicht schon einmal im World Wide Web begegnet? Für die Surfer meist ärgerlich, für den Webdesigner eher peinlich, sollte es sich beispielsweise um einen internen toten Link halten, der den Fehler hervorruft. Als Webdesigner sollte man vom Schlimmsten ausgehen und in weiser Voraussicht eine eigene 404 error-site erstellen. Beispielsweise könnte man eine Umleitung auf die Startseite einbinden oder die Meldung einfach nur in eine eigene, neue Seite integrieren. Wie einfach das funktioniert stelle ich Ihnen nun vor:

1. Schritt
Den Ordner /error auf dem eigenen Webserver anlegen und in diesem Ordner eine eigene error-site mit dem Namen error.htm platzieren.

2. Schritt
Nun die .htaccess-Datei im root-Ordner ausfindig machen und herunterladen oder, wenn noch nicht vorhanden, erstellen.

3. Schritt
Die .htaccess beispielsweise mit einem Texteditor öffnen und folgendes hinzufügen:
ErrorDocument 404 /error/error.htm

4. Schritt
Die neue oder aktualisierte .htaccess auf den Webserver hochladen.


Nun wird jeder Besucher, der einen toten Link aufruft, in den Ordner /error, ausgegangen vom root-Ordner, auf die error.htm weitergeleitet. Es bietet sich an dieser Stelle an, auch für andere Server-Fehler Weiterleitungen zu erstellen. Eine kleine Auflistung möglicher Fehler-Seiten:

400 - Bad request
Fehlerhafte Anfrage

401 - Unauthorized
Zugriffsberechtigung ist erforderlich

403 - Forbidden
Passwortgeschützte Datei

404 - Not Found
Die Datei ist nicht vorhanden

500 - Bad script request
Fehlerhafte Script-Anfrage

Dem entsprechend muss man nur den Error-Code und die gewünschte Error-Site der .htaccess hinzufügen, beispielsweise für 400 - Bad request:
ErrorDocument 400 /index.php

Eine detaillierte Beschreibung aller Server-Errors finden Sie auf wikipedia.de und w3.org.

seitwert: Online-Tool für Webseiten-Analyse

Ich habe gerade ein sehr gutes Analyse-Tool für die Bewertung von Webseiten gefunden. Es nennt sich seitwert und ist unter der URL http://www.seitwert.de zu finden. Nach Angabe der zu prüfenden Webseite ermittelt das kostenlose Onlinetool einen Seitwert und einen Ranking-Wert aus folgenden sechs Faktoren:

1. Gewichtung bei Google
2. Zugriffszahlen (Alexa)
3. Social Bookmarks
4. Technische Details
5. Gweichtung bei Yahoo
6. Sonstige Faktoren

Seitwert spuckt dann unter anderem den Google-Pagerank, den Alexa-Rang und die Anzahl der Einträge in Social Bookmark Diensten wie Mister Wong oder del.icio.us aus. Sogar Backlinks, Validierungs-Fehler, Domainalter und Meta-Angaben werden analysiert und falls nötig Verbesserungsmöglichkeiten vorgeschlagen.

Ohne Registrierung sind zwei Bewertungen pro Tag möglich, registrieren Sie sich erhöht sich die Zahl auf 15.

Meiner Meinung nach ist seitwert Pflicht für alle Webmaster, denen ein SEO wichtig ist.

Cascading Style Sheets: Standard-Einstellungen festlegen

Für die Erstellung einer neuen Webseite sollte man direkt zu Anfang gewisse CSS-Einstellungen vornehmen, um von vornherein Problemen bzw. möglichen Problemen aus dem Weg zu gehen.
Meine Empfehlung sieht folgendermaßen aus:

body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, html, span, a, table, form, image, li {
margin: 0;
padding: 0;
vertical-align: top;
border: none;
outline: none;
}


Mit diesem Code werden die Selektoren normalisiert, d.h. alle Divs, Überschriften, Images usw. werden oben links ausgerichtet und haben keinen Border. Man könnte den selben Effekt mit einem Sternchen erreichen:

* {
margin: 0;
padding:0;
vertical-align: top;
border: none;
outline: none;
}


Ein Sternchen spricht alle Selektoren eines Projektes an und gibt ihnen die angegebene Deklaration. Ich empfehle jedoch die erste Schreibweise, da sie deutlich flexibler ist.

PHP: 3 Möglichkeiten, einen PHP-Include in HTML einzubinden

Im Folgenden stelle ich drei Möglichkeiten vor, wie man Includes in seine Webseite einbinden kann. Dazu verwende ich zum einen die Datei navigation.inc.php, die die Daten, die includiert werden sollen enthält, und die index.php, in die der Include erscheinen soll. Die zwei Dateien stellen jeweils natürlich nur Beispiele dar.


1. Möglichkeit
navigation.inc.php
<?php

function testfunktion(){
return '<div class="test"><a href="test1.php">Teststeite 1</a></div>
<div class="test2"><a href="../test2.htm">Teststeite 2</a></div>
<div class="test3"><a href="../../test3.htm ">Teststeite 3</a></div>';
}

?>

index.php
<?php

require ('navigation.inc.php');

?>

<!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>3 Möglichkeiten, einen PHP-Include in HTML einzubinden</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>

<?php include navigation.inc.php"); ?>

</div>
</body>
</html>


2. Möglichkeit
navigation.inc.php
<div class="test"><a href="test1.php">Teststeite 1</a></div>
<div class="test2"><a href="../test2.htm">Teststeite 2</a></div>
<div class="test3"><a href="../../test3.htm ">Teststeite 3</a></div>

index.php
<!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>3 Möglichkeiten, einen PHP-Include in HTML einzubinden</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>

<?php

include("navigation.inc.php");

?>

</div>
</body>
</html>


3. Möglichkeit
navigation.inc.php
<?php

$test1 = 'Text zum';
$test2 = 'testen';

?>

index.php
<!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>3 Möglichkeiten, einen PHP-Include in HTML einzubinden</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>

<?php

echo "Dies ist ein $test1 $test2";
include 'navigation.inc.php';

?>

</div>
</body>
</html>

Auskommentieren - wo wie?

Hier ist eine kleine Übersicht, wie man richtig auskommentiert:

CSS
/* Kommentare Ein- oder Mehrzeilig */

HTML, XML
<!-- Kommentare Ein- oder Mehrzeilig -->

PHP, Javascript, ActionScript
// Einzeiliger Kommentar
/* Mehrzeiliger Kommentar */

Illustrator: Spiegelungseffekte erstellen

Dies ist ein Flash-Tutorial zur Erstellung von Spiegelungseffekten in Adobe Illustrator:

Ihr Browser unterstützt diesen Flash-Film leider nicht, bitte folgen Sie dem Link.

Javascript: Email-Adresse gegen Spam-Roboter schützen

Ich möchte in diesem Beitrag Möglichkeiten beschreiben, mit denen man seine Email-Adresse auf einer Website relativ sicher angeben kann, ohne Gefahr zu laufen, dass man mit Spam zugemüllt wird. Dazu kombiniere ich zwei Verfahren:

1. Eine JavaScript-Verschlüsselung
2. Eine Unicode-Verschlüsselung

1. JavaScript-Verschlüsselung
Zum einen benutze ich dazu ein JavaScript, dass die Email-Adresse an einer beliebigen Stelle im HTML-Projekt Stück für Stück zusammensetzt:

<span>
<!--
<script type="text/javascript">
var emailname = "HierEmailAdresse";
var at = "@";
var emaildomain = "HierDomainName";
var punkt = ".";
var emaildomainendung = "HierDomainEndung";
document.write('<a href=\"mailto:' + emailname + at + emaildomain + punkt + emaildomainendung + '\">');
document.write('eine Email schicken' + '</' + 'a' + '>');
</script>
// -->
<span>

Anstelle von HierEmailAdresse setzt Ihr den ersten Teil Eurer Email-Adresse ein, also alles was vor dem @ steht. HierDomainName tauscht Ihr mit dem Namen Eurer Domain aus und schreibt dann anstelle von HierDomainEndung die entsprechende Endung rein.

Lautet die Adresse also beispielsweise "Max.Mustermann@web.de", muss das Script folgendermaßen angepasst werden:

<span>
<!--
<script type="text/javascript">
var emailname = "Max.Mustermann";
var at = "@";
var emaildomain = "web";
var punkt = ".";
var emaildomainendung = "de";
document.write('<a href=\"mailto:' + emailname + at + emaildomain + punkt + emaildomainendung + '\">');
document.write('eine Email schicken' + '</' + 'a' + '>');
</script>
// -->
<span>

Ihr Internetbrowser wird eine normale Email-Adresse anzeigen, die jedoch für die Spider unsichtbar ist.

2. Unicode-Verschlüsselung
Aber um das Ganze noch sicherer zu machen, wird das Script mit einer Unicode-Verschlüsselung kombiniert. Der Unicode ist eine Zeichentabelle, in dem Schriftzeichen in einem Code versehen werden. Statt der Buchstaben verwende ich also eine bestimmte Zeichenfolge, die jeder Internetbrowser ohne Probleme interpretieren kann, ein Spyder in der Regel nicht. Diese Unicode-Tabelle findet Ihr im Beitrag Email-Adressen codieren bei Dr. Web. Man nimmt einfach jeden einzelnen Buchstaben seiner Email-Adresse und trägt nun stattdessen den entsprechenden Wert aus der Tabelle ein. Das Beispiel Max Mustermann sähe dann folgendermaßen aus:

"Max.Mustermann" wird zu:
&#77;&#97;&#120;&#46;&#77;&#117;&#115;&#116;&#101;&#114;&#109;&#97;&#110;&#110;
"@" wird verschlüsselt in: &#64;
für "web" wird folgendes eingesetzt: &#119;&#101;&#98;
der "." sollte später so aussehen: &#46;
und das "de" wie folgt: &#100;&#101;

Alternativ könnt ihr auch über das Tool auf http://tools.freecity.de/crypt.phtml eure Adresse direkt online codieren lassen. Das Ergebnis ist zwar das selbe, geht aber etwas flotter ;-).

Das Ergebnis
Diese Zeichenfolge ersetzen Sie dann im JavaScript mit den normalen Angaben, das Ergebnis sollte dann folgendermaßen aussehen:

<span>
<!--
<script type="text/javascript">
var emailname =
"&#77;&#97;&#120;&#46;&#77;&#117;&#115;&#116;&#101;&#114;&#109;&#97;&#110;&#110;";
var at = "&#64;";
var emaildomain = "&#119;&#101;&#98;";
var punkt = "&#46;";
var emaildomainendung = "de";
document.write('<a href=\"mailto:' + emailname + at + emaildomain + punkt + emaildomainendung + '\">');
document.write('eine Email schicken' + '</' + 'a' + '>');
</script>
// -->
</span>

Im Browser erscheint nun ganz normal Ihre Email-Adresse und der Besucher bemerkt keinen Unterschied.

Der Vorteil gegenüber Varianten wie "emailname at domain.de" ist, dass für den User keine Nachteile entstehen, er muss nicht etwa noch die Email-Adresse wegen einem fehlenden @-Zeichen zusammensetzen oder ähnliches.

Und so schaut das Ergebnis aus:

Cascading Style Sheets: Methoden zur Angabe von Farben

Mit CSS gibt es vier Möglichkeiten, Text- oder Hintergrundfarben eines Projektes zu bestimmen. Als Beispiel sollen die folgenden Klassen dienen:

1. Möglichkeit: Angabe eines Hexadezimal-Wertes #rrggbb
.roter_text { 
color: #ff0000;
}
bzw. falls möglich als optimierte Fassung (#rgb)
.roter_text { 
color: #f00;
}
2. Möglichkeit: Farbwert-Angabe über den integer range rgb(rrr,ggg,bbb)
.gruener_hintergrund { 
background-color: rgb(0,255,0)
}
3. Möglichkeit: Prozentuale Angabe durch float range rgb(rrr%,ggg%,bbb%)
.blauer_hintergrund { 
background-color: rgb(0%, 0%, 100%)
}

4. Möglichkeit: Angabe eines Farbnames der VGA-Farbpalette
.gelber_hintergrund { 
background-color: yellow
}