Sie sind hier: edv-beratung-thomas.de / HTML, CSS & Co: Tipps & Tricks (alt)


Optimieren Sie Ihre Website mit den ultimativen Profi-Tipps!

HTML CSS & Co: alte Tipps & Tricks für Ihre Internetseiten:

neu 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:

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&#64;xyz.de">max.pfiffig&#64;xyz.de</a>


In beiden Fällen wird im Browser angezeigt:

Post bitte an max.pfiffig@xyz.de

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 &#109; 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.


Bildlaufleisten und -pfeile einfärben (nur im Internet Explorer ab Version 5.5 wirksam):

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 deutsch 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.


Besonderheiten bei der Verlinkung und beim Runterladen von PDF-Dateien:

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:
  1. Ist im Besucher-Browser ein PDF-Plugin (Zusatzprogramm) vorhanden?

    wenn ja:
    Pfeil  die PDF-Datei wird runtergeladen und vom PDF-Plugin im Browser-Fenster angezeigt

    wenn nein:
    Pfeil  siehe nächster Punkt

  2. Ist auf dem Besucher-Rechner ein PDF-Anzeige-Programm installiert?

    wenn ja:
    Pfeil  die PDF-Datei wird runtergeladen, das PDF-Anzeige-Programm wird gestartet, die PDF-Datei wird darin angezeigt

    wenn nein:
    Pfeil  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.


"Zurück"-Schaltfläche auf Webseite einbauen:

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:

zurück


durch Aktivierung eines Links gleichzeitig die Inhalte von 2 frames ändern:

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 ..."):

Die Wiesent - Wandern in der Fränkischen Schweiz


Website mit frames und Suchmaschinen: noframes-Bereich für Text und links festlegen:

Suchmaschinen haben manchmal Probleme, Webseiten mit framesets richtig zu erfassen.

Führen Sie deswegen folgende Maßnahmen durch:
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.


"mailto:..."-link: Angaben ergänzen (Betreff, Text, Kopie an ..., zweiter Empfänger):

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?
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).


Schrift zur Hervorhebung mit Hintergrundfarbe unterlegen ("Textmarker-Effekt"):

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
&quot;Textmarker-Effekt&quot;.</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):


HTML-Dateien nach den Regeln des "World Wide Web Consortium" prüfen:

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 deutsch, 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.


rechte Maustaste mit Javascript sperren? tun Sie's nicht!

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":

Und so sieht's dann aus:

nach oben

irgendwo mittendrin

nach unten


Navigation zu einer bestimmten Stelle einer anderen Seite: Anker und Verweis zum Anker festlegen:

Wenn Sie Ihren Besuchern einen Verweis zu einer bestimmten Stelle einer anderen Seite anbieten wollen, erledigen Sie das auf folgende Weise:
Webseiten-Inhalt ändern ohne Änderung des HTML-Code: Textdateien einbinden mit object-tag:

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:
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):

Mietangebote von Immobilien-Muster

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 bei Mausberührung anders färben:

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.


bei aktiven Links den "gepunkteten Rahmen" entfernen:

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 deutsch 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.


So schützen Sie Ihre wertvollen Fotos vor Rechtsklick-Speicherung:

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.


Dynamisch erzeugte URLs: Erfassung durch Suchmaschinen - Abhilfe mit mod_rewrite:

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.


Links zum Thema:

Pfeil  Selfhtml - HTML-Dateien selbst erstellen (Referenz und Anleitung)
Pfeil  CSS 4 You - CSS-Referenz, Workshops, Tipps und Tricks
Pfeil  Workshop Bildbearbeitung für Internetseiten
Pfeil  Suchmaschinenoptimierung - SEO Tipps und Tricks
Pfeil  CMSimple - Content-Management-System ohne Datenbank
Pfeil  Apache Webserver - Testumgebung für PHP und MySQL
Pfeil  World Wide Web Consortium (W3C)
Pfeil  HTML-Validator des W3C
Pfeil  CSS-Validator des W3C
Pfeil  HTML Tidy (Offline-Programm zur HTML-Synthaxprüfung)
Zur Startseite
Stand: 01.05.2013 nach oben ©2003-2016 Gösta Thomas