e-mail-Adressen auf Webseiten "maskieren" (1),
um Werbe-Mails (Spam) zu verringern:
Erhalten Sie gerne unerbetene Werbe-Mails? Nein? Dann verhindern Sie, daß
Suchprogramme auf Ihrer Website Ihre e-mail-Adresse ausfindig machen: Verstecken Sie (zumindest) das
@-Zeichen:Schreiben Sie als HTML-Quelltext nicht mehr ...
Post bitte an
<a href="mailto:max.pfiffig@xyz.de">max.pfiffig@xyz.de</a>
sondern ...
Post bitte an
<a href="mailto:max.pfiffig@xyz.de">max.pfiffig@xyz.de</a>
In beiden Fällen wird im Browser angezeigt:
Besonders pfiffig sind Sie, wenn Sie den vollständigen mail-link (also von "mailto" bis zur
top level domain) maskieren (darauf habe ich hier aus Platzgründen verzichtet). Die zur Verschlüsselung
erforderliche ASCII-Tabelle finden Sie etwa bei
Selfhtml unter "Internationalisierung / Zeichensätze". Noch ein Beispiel: ein
m müßten Sie in Ihrem HTML-Code durch die Zeichenfolge
m ersetzen.
e-mail-Adressen auf Webseiten "maskieren" (2):
per Programm oder im Netz:
Wenn es Ihnen zu mühsam ist, Zeichen für Zeichen nach der ASCII-Tabelle zu verschlüsseln, dann
verwenden Sie doch ein Programm, das Ihnen die Arbeit abnimmt:
E_Cloaker (231 KB, kostenlos, englischsprachig, für Windows 95/98/ME, NT4,
2000, XP, mit IE ab Version 4).
Falls Sie nur einmal im Leben eine Website erstellen und dort Ihre verschlüsselte e-mail-Adresse angeben,
lohnt es nicht, hierfür extra ein Programm runterzuladen und zu installieren. Stattdessen können Sie
auch online Ihre
e-mail-Adresse kodieren. (Diese Möglichkeit kommt auch für alle in Betracht, die
unter Linux arbeiten.)
In beiden Fällen müssen Sie anschließend nur noch den verschlüsselten Code über die Zwischenablage an
die gewünschte Stelle in Ihre HTML-Datei einfügen.
Haben Sie im Schweiße Ihres Angesichts eine künstlerisch hochwertige website erstellt, deren
Gesamteindruck durch die grauen Bildlaufleisten erheblich beeinträchtigt wird?
Dann färben Sie sie doch ein! Folgende CSS-Einträge haben sie zur Auswahl:
<style type="text/css">
body {
scrollbar-base-color:#3A5EA5;
scrollbar-arrow-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#......;
scrollbar-face-color:#......;
scrollbar-highlight-color:#......;
scrollbar-3dlight-color:#......;
scrollbar-track-color:#......;
}
</style>
Die ersten drei Angaben
verwende ich hier auf meiner website (auch wenn sie künstlerisch wertlos ist). Und die anderen
Angaben? Bevor ich hier lange erkläre, probieren Sie es doch einfach mal aus: Kopieren Sie die
Codestrecke über die Zwischenablage in den <head> Ihrer Datei und tragen die fehlenden
Farbangaben nach.
wie Sie auf Ihrer Website Dateien zum Runterladen anbieten:
Nichts ist einfacher als das: Laden Sie die Datei, die Sie Ihren Besuchern zum Download anbieten
wollen, mit Ihrem FTP-Programm in gewohnter Weise auf "Ihren" Server hoch (hier im Beispiel
ins Server-Verzeichnis
download) und fügen auf Ihre Webseite den HTML-Code nach folgendem
Muster ein:
... runterladen können:
<a href="download/cd-backup.zip"
target="_blank">
CD-Backup.zip</a> (2 KB, kostenlos, ...)
Und so sieht's dann aus:
Als kleine Hilfestellung biete ich Ihnen eine Muster-Batchdatei an, die Sie hier runterladen können:
CD-Backup.zip (2 KB, kostenlos, deutschsprachig
 dokumentiert).
|
Größere Dateien und mehrere zusammengehörende Dateien packen Sie vor dem Hochladen am besten in ein
ZIP-Archiv, um auf "Ihrem" Server Platz zu sparen und Ihren Besuchern ein schnelleres und
einfacheres Runterladen zu ermöglichen. Und geben Sie bitte für die Dateien, die Sie zum Download
anbieten, die Größe an. Ihre Besucher werden es Ihnen danken.
Wenn Sie eine PDF-Datei verlinken,
ist die Wirkung eines Klicks Ihrer Besucher auf diesen Link nicht vorhersehbar, weil Sie nicht wissen, ob bei Ihren Besuchern ein PDF-Plugin oder ein PDF-Anzeige-Programm wie etwa Acrobat Reader oder Foxit Reader installiert ist:
- Ist im Besucher-Browser ein PDF-Plugin (Zusatzprogramm) vorhanden?
wenn ja:
die PDF-Datei wird runtergeladen und vom PDF-Plugin im Browser-Fenster angezeigt
wenn nein:
siehe nächster Punkt
- Ist auf dem Besucher-Rechner ein PDF-Anzeige-Programm installiert?
wenn ja:
die PDF-Datei wird runtergeladen, das PDF-Anzeige-Programm wird gestartet, die PDF-Datei wird darin angezeigt
wenn nein:
es erscheint das übliche Fenster "Dateidownload", mit dem der Besucher die PDF-Datei runterladen und in einem Verzeichnis seiner Wahl auf seiner Festplatte speichern kann
Wie Sie ohne den teueren Adobe Acrobat
kostenlos PDF-Dateien erstellen, habe ich an anderer Stelle beschrieben. Ohne Zusatzkosten geht's auch, wenn Sie als Textverarbeitung WordPerfect oder OpenOffice einsetzen.
Falls Sie als
Anbieter das automatische Öffnen von PDF-Dateien auf den Rechnern Ihrer Besucher unbedingt vermeiden wollen, sollten Sie Ihre PDF-Datei als ZIP-Datei zum Download anbieten.
Besucher, deren Browser mit einem PDF-Plugin ausgerüstet ist, oder die ein PDF-Anzeige-Programm wie etwa Foxit oder Acrobat Reader installiert haben, die aber trotzdem die sofortige Anzeige einer runtergeladenen PDF-Datei verhindern wollen, öffnen durch einen Rechtsklick auf den PDF-Link das Browser-Kontextmenü und wählen "Ziel speichern unter", um die PDF-Datei runterzuladen und in einem Verzeichnis ihrer Wahl zu speichern.
Wollen Sie einen link einsetzen, mit dem Ihre Besucher (wie mit der "Zurück"-Schaltfläche
des Browsers)
zur zuletzt aufgerufenen Seite blättern können?
Das erledigen Sie mit Javascript:
<table bgcolor="#E0E0E0"
width="20%"><tr><td align="center">
<a
href="javascript:history.back()"><b>zurück</b></a>
</td></tr></table>Und so sieht's dann aus:
Sie arbeiten mit frames (im linken frame befindet sich Ihre Navigation, im rechten werden Ihre Inhalts-Seiten
angezeigt) und wollen erreichen,
daß mit einem Klick auf einen "Sammel"-Link
gleichzeitig im linken frame ein Menü mit "Unter"-Links (enthalten in Datei steuer2.htm)
und auch im rechten frame eine neue Seite angezeigt wird?
Mit reinen HTML-Mitteln könnten Sie das Problem lösen, indem Sie mit Aktivierung des Links ein zweites
frameset aufrufen, das die gewünschten Dateien enthält. Wenn Sie aber mehrere derartige "Sammel"-Links
mit zugehörigen Menüs verwenden wollen, müßten Sie mehrere framesets verwenden, was die Sache schnell
unübersichtlich werden läßt.
Es geht aber auch einfacher, indem Sie die Javascript-Objekthierarchie verwenden und Ihren frames, so
wie sie im frameset mit
name="..." benannt sind, im EventHandler
onClick neue
HTML-Dateien zuweisen:
Bei der frameset-Definition ...
<frameset cols="236,*" frameborder="0" border="0">
<frame src="steuer1.htm" name="steuer" scrolling="auto">
<frame src="inhalt.htm" name="inhalt" scrolling="auto">
</frameset>
würde der Link-Code in der Navigations-Datei
steuer1.htm folgendermaßen aussehen:
<a href="steuer2.htm" target="steuer"
onClick="parent.steuer.location='steuer2.htm';
parent.inhalt.location='inhalt2.htm';"><b>Link-Text</b>
</a>
Versorgen Sie auf jeden Fall zusätzlich die HTML-Attribute
href="..." und
target="steuer" des
<a>-tags, damit Ihre Navigation auch dann funktioniert,
wenn Javascript ausgeschaltet ist.
Und so sieht's dann aus (klicken Sie anschließend auf den Link
"Wanderung an der Wiesent ..."):
Suchmaschinen haben manchmal Probleme, Webseiten mit framesets richtig zu erfassen.
Führen Sie deswegen folgende Maßnahmen durch:
- Legen Sie auf der Seite, die den frameset enthält, einen noframes-Bereich
fest ...
- ... und bringen Sie hier als Text alle wichtigen Begriffe unter,
die Suchmaschinen von Ihnen wissen sollen. Auf den früher (für nicht frame-fähige Browser)
verwendeten Text "Leider unterstützt Ihr Browser keine frames" sollten Sie verzichten.
- Nehmen Sie in den noframes-Bereich auch alle wesentlichen (internen)
Verweise Ihrer Website auf.
An welcher Stelle Ihrer frameset-Datei Sie den
noframes-Bereich einfügen, sehen Sie hier.
Vorsicht: Für Suchmaschinen Texte und Links anzuzeigen, die nicht auch für Besucher sichtbar sind,
verstößt gegen die Google-Richtlinien. Wenn Sie dies tun, und jemand Sie bei Google über einen
"Spam report" meldet, könnte das bei Google zum Ausschluß führen.
Die meisten kennen ihn, die meisten verwenden ihn auf ihrer website: den "mailto:..."-link
an sich selbst.
Aber wußten Sie, daß Sie den "mailto:..."-link mit Zusatz-Angaben
wie Betreff, Text, Kopie an ... oder zweitem Empfänger ausstatten können?
- Betreff vorbelegen:
<a href="mailto:info@edv-beratung-thomas.de?subject=Ihre Tips">
Mail an mich
mit Betreff "Ihre Tips"</a>
Und so sieht's dann aus:
- (einleitenden) Text vorbelegen:
<a href="mailto:info@edv-beratung-thomas.de?body=Hallo
Herr Thomas,%0D%0A%0D%0Azu Ihren
Tips möchte ich folgendes
anmerken:%0D%0A%0D%0A">Mail an mich mit einleitendem Text
"Hallo
Herr Thomas ..."</a>
Und so sieht's dann aus:
- Kopie an ... vorbelegen:
<a href="mailto:info@edv-beratung-thomas.de?
cc=max.pfiffig@web.de">Mail an
mich mit Kopie an
Max Pfiffig</a>
Und so sieht's dann aus:
- Nachricht an zwei Empfänger senden:
<a href="mailto:info@edv-beratung-thomas.de,max.pfiffig@web.de">
Mail an
Max Pfiffig und an mich</a>
Und so sieht's dann aus:
- Betreff und (einleitenden) Text vorbelegen:
<a href="mailto:info@edv-beratung-thomas.de
?subject=Ihre Tips&body=Hallo Herr Thomas,
%0D%0A%0D%0A
zu Ihren Tips möchte ich folgendes anmerken:%0D%0A%0D%0A">
Mail an mich mit Betreff
"Ihre Tips" und einleitendem
Text "Hallo Herr Thomas ..."</a>
Und so sieht's dann aus:
Beachten Sie, daß der "mailto:..."-link nur ausgeführt werden kann, wenn der Anwender einen
Browser und ein e-mail-Programm verwendet, die "zusammenpassen" (also etwa den Internet
Explorer und Outlook oder Outlook Express).
Wollen Sie Überschriften oder bestimmte Wörter in Ihrem Fließtext farblich besonders hervorheben?
Das erledigen Sie mit dem span-Tag, dem Attribut style= und CSS-Angaben:
<span style="background-color:#FFFF99;">So erzeugen Sie den
"Textmarker-Effekt".</span>
Und so sieht's dann aus:
So erzeugen Sie den "Textmarker-Effekt".
Bunt statt Einheits-Grau: Formular-Schaltflächen einfärben:
Ödet Sie das Einheits-Grau der Formular-buttons auch so an? Mit geringem Aufwand bringen Sie Farbe ins
Spiel: Fügen Sie zunächst in Ihrem
<head> CSS-Angaben nach folgendem Muster ein ...
<style type="text/css">
.gelb { width:130px; text-align:center;
font-family:System,Arial,Helvetica; font-size:100%; color:navy;
background-color:#FFFF99; border-color:navy; border-width:1px; }
</style>
... und weisen Sie Ihrer Schaltfläche die soeben erzeugte Klasse (im Beispiel "gelb") zu:
<form action=""><table cellpadding="12"><tr>
<td bgcolor="#DDEEFF"><input type="submit" class="gelb"
value="klick mich nicht"></td></tr></table>
</form>
Und so sieht's dann aus (das Formular ist zwar recht klein, aber für den Zweck reicht es):
Wenn Sie prüfen wollen, ob Ihre HTML-Dateien den Regeln des
W3C entsprechen, haben Sie mehrere Möglichkeiten: Entweder Sie rufen online den
HTML-Validator des W3C auf oder Sie verwenden das Programm
HTML Tidy (160 KB, kostenlos, für die Kommandozeile unter Windows 95/98/ME, NT4, 2000, XP, Anzeige der Parameter zur Programmsteuerung mit:
tidy -h | more) und sparen damit Online-Kosten. Die Adresse zum Runterladen des Programms ändert sich leider öfter (was ich gar nicht immer mitbekomme, denn ich hab's ja schon).
Für HTML Tidy gibt's auch eine grafische Benutzeroberfläche:
TidyGUI (332 KB, kostenlos, deutschsprachig
, für Windows 95/98/ME, NT4, 2000, XP).
HTMLTidy überprüft nicht nur auf Einhaltung der W3C-Regeln, sondern kann zum Teil auch Fehler beheben, HTML-Attribute in CSS-Regeln umwandeln und die "DOCTYPE"-Zeile in HTML-Dateien einfügen. Das Programmfenster von TidyGUI ist zweigeteilt: oben erhalten Sie Hinweise zu Ihrer HTML-Datei, im unteren Teil werden die Fehler angezeigt, die von HTMLTidy nicht behoben werden können. In einem Zusatzfenster kann der vom Programm geänderte HTML-Code angezeigt werden. Ihre eigenen Programm-Einstellungen sollten Sie in einer Konfigurations-Datei abspeichern und diese nach jedem Programm-Aufruf neu laden (sonst werden die Standard-Einstellungen verwendet).
Die meisten Browser sind recht geduldig und können auch "ungültigen" HTML-Code auswerten und die Seiten so anzeigen, wie vom Entwickler beabsichtigt. Wer aber Wert darauf legt, daß seine Seiten mit allen ausgebrachten Links von Google & Co erfaßt werden, sollte regelgerechtes HTML verwenden.
Auch für CSS-Angaben gibt's beim W3C eine Prüfung, den
CSS-Validator. Hiermit können CSS-Vorlagendateien und HTML-Dateien mit CSS-Code geprüft werden. Berichtigter CSS-Code wird angezeigt und kann in die Zwischenablage übernommen werden. Die
Einfärbung der Bildlaufleisten (wie auch auf meiner Website) gehört übrigens nicht zum CSS-Standard.
Oft sperren stolze Freizeit-Webentwickler mit Javascript die rechte Maustaste in der Überzeugung, ihre Besucher damit am Einblick in ihr "geistiges Eigentum", den HTML-Quellcode, zu hindern.
Folgen Sie dem schlechten Beispiel nicht! Denn damit vergraulen Sie die Besucher Ihrer Website, denen die Nutzung aller Funktionen des Browser-Kontextmenüs (link "in neuem Fenster öffnen" und andere) verwehrt wird, ohne daß Sie Ihr beabsichtigtes Ziel erreichen:
Denn Ihre Besucher können trotz gesperrter rechter Maustaste die am Bildschirm angezeigte Seite aus dem Browser-Cache über den Menüeintrag "Datei/Speichern unter ..." in einem Verzeichnis ihrer Wahl speichern und dann alle Dateien (HTML-, JPG-, GIF-Dateien, einfach alles) mit einem geeigneten Programm öffnen. Und der Quelltext einer Seite kann in den meisten Browsern auch mit der Tastenkombination STRG + U eingesehen werden.
Wenn Sie sich durch noch so gute Argumente nicht davon abhalten lassen wollen, die rechte Maustaste auf Ihren Seiten zu sperren, dann verzichten Sie wenigstens auf Hinweise wie "der Quellcode ist mein geistiges Eigentum" oder "bitte linke Maustaste verwenden". Ganz ohne Hinweis sperren Sie die rechte Maustaste mit Javascript so (klappt mit IE, Mozilla, Netscape, aber nicht mit Opera):
<body onContextmenu="return false";>
Navigation zu verschiedenen Stellen der gleichen Seite: Anker und
Verweise zu Ankern festlegen:
Sie haben eine längere Seite und wollen Ihren Besuchern die Möglichkeit bieten, ohne zu scrollen an den Seitenanfang, zu einer bestimmten Stelle der Seite oder ans Seitenende zu gelangen? Oder Sie wollen (wie ich es hier gemacht habe) Ihren Besuchern am Anfang der Seite ein Inhaltsverzeichnis als "link-Liste" anbieten?
Dann legen Sie "Anker" (Sprungmarken) fest für die Stellen, die für Ihre Besucher per Mausklick erreichbar sein sollen, und setzen Verweise zu diesen "Ankern":
- Anker für "oben" festlegen:
<a name="oben">
<table bgcolor="#22DDFF" width="100%"><tr>
<td align="left">Internet services</td>
<td align="right">www.edv-beratung-thomas.de</td>
</tr></table></a>
- Verweis setzen für Anker "oben":
<table bgcolor="#E0E0E0" width="40%"><tr><td align="center">
<a href="#oben"><b>nach oben</b></a>
</td></tr></table>
Beachten Sie im link das Zeichen # vor dem Anker-Namen.
- Anker für "irgendwo mittendrin" festlegen:
<a name="a10">
<b><span style="background-color:#CCFFFF;">
... Formular-Schaltflächen einfärben ...
</span></b>
</a>
Sie können Ihre Anker bequem von a1 bis a20 oder a30 durchnummerieren.
Natürlich können Sie auch andere Namen für Ihre Anker verwenden.
- Verweis setzen für Anker "irgendwo mittendrin":
<table bgcolor="#E0E0E0" width="40%"><tr><td align="center">
<a href="#a10"><b>Formular-Schaltflächen einfärben</b></a>
</td></tr></table>
Beachten Sie im link das Zeichen # vor dem Anker-Namen.
- Anker für "unten" festlegen:
<a name="unten">
<table bgcolor="#22DDFF" width="100%">
<colgroup> ... </colgroup>
<tr>
<td align="left">Stand: 01. 01. 2004</td>
<td align="center"><a href="#oben">nach oben</a></td>
<td align="right">©2003-2004 Gösta Thomas</td>
</tr></table></a>
- Verweis setzen für Anker "unten":
<table bgcolor="#E0E0E0" width="40%"><tr><td align="center">
<a href="#unten"><b>nach unten</b></a>
</td></tr></table>
Beachten Sie im link das Zeichen # vor dem Anker-Namen.
Und so sieht's dann aus:
Wenn Sie Ihren Besuchern einen Verweis zu einer bestimmten Stelle einer anderen Seite anbieten wollen,
erledigen Sie das auf folgende Weise:
- Anker für eine bestimmte Stelle einer anderen Seite festlegen
(im Beispiel in der Datei des Verweis-Ziels is-internet-webdesign.htm):
<a name="a12">Einrichtung maßgeschneiderter
Content Management Systeme</a>
Sie können Ihre Anker bequem von a1 bis a20 oder a30 durchnummerieren.
Natürlich können Sie auch andere Namen für Ihre Anker verwenden.
- Verweis setzen für Anker in einer anderen Seite:
<table bgcolor="#E0E0E0" width="40%"><tr><td align="center">
<a href="is-internet-webdesign.htm#a12">
<b>was ist CMS?</b></a>
</td></tr></table>
Beachten Sie im link das Zeichen # vor dem Anker-Namen. Statt is-internet-webdesign.htm#a12
hätte ich auch vollqualifiziert www.edv-beratung-thomas.de/is-internet-webdesign.htm#a12 eintragen
können.
Sind Sie Vereinsvorsitzender, der monatlich die neuen Termine auf der Vereins-Website veröffentlicht, oder Immobilien-Makler, der täglich für seine Kunden das Angebot aktualisiert, oder Restaurant-Besitzer, der seine täglich wechselnde Speisekarte ins Internet stellt?
Ihnen fehlt aber die Zeit, jedesmal die neuen Termine bzw. Angebote in HTML zu formatieren? Und ein
Content Management System (CMS) wollen Sie auch nicht verwenden, weil Sie nicht "mit Kanonen auf Spatzen schießen" wollen?
Dann kommt für Sie, wenn Sie nicht allzu hohe gestalterische Ansprüche stellen, folgende ganz einfache Lösung in Betracht:
- Sie binden einmalig auf Ihrer Seite eine Textdatei mit folgendem HTML-Code ein:
<object id="TXT" data="inhalt.txt" type="text/plain"
width="600" height="300"></object>
- Wenn Sie Änderungen vornehmen wollen, ändern Sie einfach den Inhalt der Textdatei (im Beispiel hat sie den Namen inhalt.txt) mit einem x-beliebigen Editor und laden anschließend nur diese Textdatei neu auf Ihren Server. Fertig!
Und so sieht's dann aus, dargestellt am Beispiel der Mietangebote von "Immobilien-Muster" (eine Namensgleichheit mit einer bestehenden Firma wäre rein zufällig):
Zugegeben, das Layout macht einen etwas hausbackenen Eindruck, aber diese Lösung ist schnell, einfach und vor allem billig!
Sicherheitsbewußte Surfer werden die Textdatei allerdings nicht sehen, denn die IE-Einstellung "ActiveX-Steuerelemente und Plugins ausführen" muß über "Extras / Internetoptionen / Sicherheit / Internet / Stufe anpassen" aktiviert sein.
Tabellenzellen sollen ihre Farbe ändern, wenn Sie mit der Maus drüber gehen? Das erledigen Sie mit den Javascript-Eventhandlern onMouseover und onMouseout nach folgendem Muster:
<table width="16%">
<tr><td align="left" bgcolor="#DDEEFF"
onMouseover="this.bgColor='#CCFFCC'"
onMouseout="this.bgColor='#DDEEFF'">
<a href="xyz.htm"><b>XYZ-Link</b></a>
</td></tr>
</table>
Ein vollständiges Beispiel finden Sie in der Steuerleiste der
Bilder aus der Fränkischen Schweiz.
Internet Explorer, Mozilla und Netscape ziehen bei angeklickten, aktiven Links standardmäßig einen "gepunkteten Rahmen" um den Link. Wenn Sie glauben, daß diese Rahmen das ästhetische Empfinden Ihrer Besucher erheblich beeinträchtigen, können Sie sie mit dem Javascript-Eventhandler onFocus entfernen:
<a href="xyz.htm" onFocus="if (this.blur) this.blur();">
<b>XYZ-Link</b></a>
Wenn "gepunktete Rahmen" auf diese Art entfernt werden, funktioniert aber die Zuweisung einer anderen Textfarbe für aktive Links nicht mehr. Sie müssen sich also entscheiden, was Ihnen wichtiger ist.
Das Entfernen der Rahmen klappt nicht nur mit Text-, sondern auch mit Grafik-Links.
Service für Suchmaschinen: wichtige keywords in Überschriften unterbringen:
Webseiten sollten je zur Hälfte für die Augen der Besucher und für Suchmaschinen entwickelt werden. Für manche Suchmaschinen ist es sinnvoll, wichtige keywords in Überschriften, also in <h1>- oder <h2>-tags "unterzubringen".
Aber was tun, wenn die automatisch erzeugte "Leerzeile" in der Überschrift das Auge stört: Mit CSS-Angaben können Sie die zwangsweise Leerzeile nach der Überschrift "unterdrücken". Ergänzen Sie einfach Ihren <h1>-
oder <h2>-tag nach folgendem Muster:
<h1 style="display:inline;">Überschrift 1. Ordnung</h1>
<h2 style="display:inline;">Überschrift 2. Ordnung</h2>
Text und Links auf Webseiten für Besucher unsichtbar machen:
Sie wollen auf Ihren Seiten Text und Links unterbringen, die von Suchmaschinen erfaßt werden sollen, aber für die Augen Ihrer Besucher nicht sichtbar sind, weil sie das Layout grob verunstalten würden. Beachten Sie bitte, daß Suchmaschinen dieses Vorgehen zunehmend als "Spam" werten, was zum Ausschluß aus dem Index führen kann.
Verwenden Sie als Schriftfarbe keinesfalls die Hintergrundfarbe, sondern legen Sie Text und Links in einen div-Container, der auf Ihrer Seite keinen Platz in Anspruch nimmt. Das erledigen Sie mit CSS-Angaben nach folgendem Muster:
<div style="position:absolute; width:0px; height:0px;
overflow:hidden; visibility:hidden;">
Suchmaschinen können das sehen, Besucher nicht:
<a href="http://www.max-pfiffig.de/" target="_blank">
<h1>Das tolle Web-Angebot von Max Pfiffig</h1>
<h2>Ansehen Aussuchen Bestellen</h2>
</a>
</div>
Besonders elegant und für allzu neugierige Quellcode-Gaffer schwierig nachvollziehbar wird die Sache, wenn Sie für die CSS-Regeln eine Klasse oder eine ID in Ihrer zentralen CSS-Vorlagendatei hinterlegen und dem div-Container die definierte Klasse oder ID zuweisen.
automatische Zeilenumbrüche verhindern:
Wenn sie aus stilistischen Gründen (auch bei schmal eingestellten Browserfenstern) für bestimmte Texte automatische Zeilenumbrüche verhindern wollen, erledigen Sie das mit CSS-Angaben nach folgendem Muster (allerdings müssen Ihre Besucher je nach eingestellter Fensterbreite dann nach rechts scrollen, um den Text vollständig zu lesen):
<h1 style="white-space:nowrap;">
Diese Überschrift soll auf gar keinen Fall umgebrochen werden.
</h1>
Die gleiche Wirkung erzielen Sie mit dem HTML-tag nobr, der aber nicht dem W3C-Standard
entspricht.
Farbwerte von beliebigen Bildschirmpunkten ermitteln:
Geht es Ihnen auch manchmal so: Sie sehen eine Webseite mit einer tollen Farbe, deren Farbwert Sie gerne wüßten, ohne mühsam im Quellcode zu suchen.
PiX der Farbengrabscher (350 KB, kostenlos, englisch- oder deutschsprachig
einstellbar, für Windows 95/98/ME, NT4, 2000, XP) ermittelt systemweit den Farbwert von Bildschirmpunkten an der Mauszeiger-Stelle als HTML(Hexa)-, RGB-, Long-, VB- und TColor-Wert, übernimmt den Farbwert mit den Tasten
ALT+F1 in die Zwischenablage und zeigt auch den Farbwert der ähnlichsten
websicheren Farbe an.
Wenn Sie das Speichern eines Bildes über das Kontextmenü verhindern wollen,
legen Sie es als Hintergrundbild einer Tabellenzelle fest. In die gleiche Tabellenzelle nehmen Sie einen
img-tag auf und setzen als Bildquelle eine transparente 1-Pixel-GIF mit den gleichen Größenangaben wie für das Hintergrundbild ein:
<table align="center">
<tr>
<td width="640" height="480"
style="background-image:url(bilder/spreewald.jpg)">
<img src="bilder/1pixel.gif" width="640" height="480"
alt="Spreewald">
</td>
</tr>
</table>
Ein Besucher, der nach Rechtsklick über "Bild speichern unter ..." Ihr tolles Foto vom Spreewald speichern will, speichert dann nur die 1-Pixel-GIF. Zugegeben, der Trick ist schon uralt. Neu ist aber, daß Sie die transparente
1-Pixel-GIF (43 Bytes, kostenlos) hier runterladen können und sich somit Arbeit sparen.
Einen völlig sicheren Schutz gegen Bilder-Diebstahl gibt es aber nicht, denn auch die Hintergrundbilder landen im Browser-Cache Ihrer Besucher. Wenn Sie also 100%ig auf Nummer Sicher gehen wollen, verzichten Sie darauf, Bilder ins Internet zu stellen, und veranstalten Sie stattdessen einen Dia-Abend in Ihrem Wohnzimmer.
Von vielen CMS werden dynamische URLs erzeugt, erkennbar am enthaltenen Fragezeichen. Diese Webseiten dürfen oder können von manchen Suchmaschinen nicht erfaßt werden. Besonders peinlich, wenn es sich um Seiten mit Links handelt, und Sie somit Ihre Linktausch-Partner bis in alle Ewigkeit vergeblich auf die Erfassung der Links durch Google warten lassen.
Wer einen Apache-Webserver mit mod_rewrite-Modul einsetzt (leider bieten nicht alle Webhoster dieses Modul an), kann
dynamische URLs als statische Webadressen "tarnen", und alle Suchmaschinen können diese Seiten ohne Schwierigkeiten in den Index aufnehmen. Legen Sie in jedem Verzeichnis auf Ihrem Server ein Datei
.htaccess mit folgendem Inhalt an:
RewriteEngine On
RewriteRule ^([0-9]+)_([A-z]+)\.htm$ show.php?id=$1&template=$2
Wessen Webserver kein mod_rewrite-Modul bietet, findet Infos für eine Ersatzlösung in der
PHP-Welt.
Aktualisierung: Diese Tipp-Seite ist schon einige Jahre alt, einige Tipps & Tricks entsprechen nicht mehr dem aktuellen Stand. Ich verzichte auf die Korrektur der veralteten Punkte, weil ich eine vollständige Neufassung der Tipp-Seite vorbereite.
e-mail-Adressen auf Webseiten "maskieren" (1), um Werbe-Mails (Spam) zu verringern