kleiner HTML-Kurs

Okay, mein Fehler. Hatte einen Zweier vergessen. Doch auch so geht nix
Fix trix, wieder nix

Öhm das ist auch nicht wirklich ein Wunder. Dein speichern_verboten.gif ist nicht der eine transparente pixel den ich hier angehangen hatten sondern ein weißes Quadrat.
Das weiß übermalt das Hintergrundbild natürlich. Das ganze basierte eben daauf, dass das vordere Bild transparent ist.

Okay, danke!! So dumm muss man erst einmal sein
Dann werde ich es bei Gelegenheit gleich mal ausbessern

Su hast es geschafft. Ich bin stolz auf dich.

Danke schön
Jezt habe ich endlich wieder was gelernt
Äh . . . gibt´s noch eine Lektion??

Öhm ja, die wollte Ginome machen. Die is nur faul. LOL

Super detailliert erklärt ich verstehs sogar Hab immer gedacht das wär sauschwer ne Seite zu machen aber hört sich ja ganz einfach an
Werd das irgendwann auch mal versuchen und dann hier reinstellen

So hier kommt sie, die "Lass uns den html-Kurs durch irgendeine Lektion am Leben halten bis Ginome endlich ihren Hintern bewegt und etwas über Divs macht"-Lektion!

Also, wie schütze ich meine Bilder davor dass jemand sie deeplinkt (sie auf seiner Webseite einbaut, aber nicht selbst hochlädt, sondern einfach von meiner Hoepage aus einbindet)?

Vorweg, das was in dieser Lektion beschrieben wird funktioniert nicht bei allen Hostern. Es wird nämlich .htaccess benötigt und gerade Freehoster haben dies oft ausgestellt, oder teilweise ausgestellt. Funpic, z.B. lässt .htaccess nur zu um Verzeichnisse zu schützen, aber lässt einen nicht an Dateirechte ran, was wir hier aber brauchen.

Als erstes erstellt ihr eine Textdatei. Dieser gebt ihr dann den Namen .htaccess (ohne .txt am Ende). Windows lässt euch eine Datei mit diesem Namen vielleicht nicht erstellen. In dem Fall nennt ihr sie z.B. zonk.htaccess und benennt sie nachher auf dem Server um.

In diese Datei schriebt (kopiert) ihr folgendes:

<Files ~ "\.(gif|jpe?g|png)$">
ErrorDocument 403 http://www.ginomegelati.de/basis/verboten.gif

SetEnvIfNoCase Referer "^http://www.ginomegelati.de" local_ref=1
SetEnvIfNoCase Referer "^http://ginomegelati.de" local_ref=1
SetEnvIfNoCase Referer "^$" local_ref=1
SetEnvIfNoCase Referer "^$-" local_ref=1
Order Allow,Deny
Allow from env=local_ref
</Files>

Also dröseln wir das Ganze mal auf. Ganz genau kann ich euch jedes einzelne Zeichen leider nciht erklären, da ich mich mit .htaccess nicht so sonderlich gut auskenne. Nehmt es mal als gegeben.

1. Zeile: hier machen wir <Files> auf und sagen um welche Files es sich handelt. Das wären hier .gif, .jpeg, .jpg, .png. Das $ ist immer eine Wildkart, d.h. dass ".gif, .jpeg, .jpg, .png" Nur in den Dateien vorkommen muss die geschützt werden sollen, z.B. als Dateieindung. Sonst dürften die Dateien nur die Endung haben und keine Namen mehr.

2. Zeile: Da wird das Errordokument angegeben, also das Bild das auf der Seite ausgespuckt wird wenn das was eigentlich verlinkt werden sollte gesperrt wurde.
Als Beispiel versuche ich hier einfach mal ein gif von Ginomes Webseite zu verlinken und ihr werdet sehen was passiert:
Also wir verlinken dieses: http://www.pokemon-adoption.de…9/laschoking-shiny-em.gif

4. - 5. Zeile: Hierzu muss ich euch nochn bissl was erklären. Also wenn man auf einer Webseite ist gibt der Browser an den Webserver zurück auf welcher Webseite ihr euch gerade befindet sich befindet und zwar nicht nur an den der Webseite sondern auch an den auf dem sich z.B. ein Bild das auf dieser Webseite eingebunden ist befindet. Das nennt man Refferer.
Wir wollen jetzt nur erlauben, dass das richtige Bild gesendet wird wenn der Refferer der unserer Seite ist.
Hierzu müssen wir den korrekten Refferer unserer Seite allerdings erstmal dem Script sagen und das machen wir in diesen Zeilen. (in diesem Fall mti und ohne www. Ist eure Seite nur über www. zu erreichen lasst ihr die Zeile ohne einfach weg.)

6. - 7. Zeile: Nun kommt es vor, dass Firewalls oder sonstiger Kram blockiert, dass der Browser einen Refferer zurück sendet. Damit ihr nicht bald das Postfach mit Mails, dass eure Bilder nicht gehen voll habt müsst ihr also auch zulassen, dass die richtigen Bilder gesendet werden wenn der Webserver keinen Refferer empfängt, das geschieht hier.

4. - 7. Zeile: Am Ende der Zeilen steht immer local_ref=1 hier werden diese Angegebenen Refferer praktisch als Variable local_ref definiert, was gleich wichtig wird.

8. - 9. Zeile: Hier kommen wir jetzt zur eigentlichen Abfrage:
"Order Allow,Deny" drückt aus, dass wir jetzt eine Regel aufstellen für wen etwas erlaubt ist, da es immernoch im Bereich <Files> </Files> ist gilt es natürlich nur für die oben angegebenen Dateitypen.
So nun kommen wir dazu wems erlaubt wird: "Allow from env=local_ref"
Env drückt den Refferer aus. Und wenn der gleich einem der oben als "local_ref" angegebenen ist kriegt man das richtige Bild zugeschickt. Wenn nciht das Fehlerbild.

10. Zeile: tja, <Files> muss halt auch geschlossen werden, also machen wir </Files>.

Nun ladet ihr die Datei noch in euer Hauptverzeichnis hoch und benennt sie ggf. um.

Soderle fertig.

Nur noch ein paar Kleinigkeiten. Wenn ihr die Zeile mit dem Fehlerbild einfach weglasst bekommt jemand der euer Bild auf seiner Seite einbindet nur ein rotes Kreuz als ob es das Bild nicht geben würde.
Das spart ein bischen Traffic. Allerdings ist so ein Fehler- png oder gif nur ein paar kb groß und es macht einen Heiden Spaß mails von erschreckten Beepworldwebmastern zu bekommen. XD

Wollt ihr in einem Verzeichnis allerdings zulassen, dass fremde Webseiten eure Bilder einbinden, wie z.B. bei Ginomes Pokemonadoption dann erstellt ihr einfach noch eine .htaccess-Datei mit diesem Code:

Order Allow,Deny
allow from all

Dadurch wird dieses Verzeichnis wieder auf die Grundeinstellung, nämlich allen die Dateien darin zu geben zurück gesetzt. Also muss diese natürlich in das Bilderverzeichnis das ihr freigeben wollt.

So das wars fürs Erste, euer Slowi.

Da bin ich schon wieder.

Ihr habt doch sicher schon viele Seiten mit einem kleinen Bildchen in der Browserzeile und wenn man sie zu den Favoriten addet gesehen. Diese Bildchen nennt man Favicons. Die Startseite vom Anime-Power hat z.B. auch so eins.

Als erstes müssen wir eins erstellen und zwar in der größe 16x16. Dafür nehmt ihr euer bevorzugtes Bildbearbeitungsprogramm. Ist das Bild erstellt müsst ihr es im Iconformat (.ico) als favicon.ico speichern. Für Photoshop hab ich ein Plugin für dieses Dateiformat hier. Sollte euer Programm das nicht unterstützen speichert das Bild zuerst als bmp (wenn ihr Transparenz drin habt als png) und benutzt dann irfanview um es als Icon zu speichern.

Dieses favicon.ico ladet ihr nun in das Verzeichnis hoch in dem sich eure html-dateien befinden und schon ist das Icon in der Browserzeile und den Favoriten zu sehen. (Im IE erscheint es erst in der Browserzeile wenn man die Seite zu den Favoriten hinzugefügt hat.)

Allerdings müsst ihr nun noch eins überprüfen und zwar ob der Server diese Datei auch als Bilddatei erkennt, wenn nicht kann es zu Anzeigeproblemen kommen. Im Firefox geht das einfach indem ihr die URL des Icons aufruft. Wird das Icon angezeigt kennt der Server die Datei als Bild, versucht Firefox es runterzuladen kenn der Webserver es wohl nicht.

Kennt er es ist alles in Ordnung. Kennt er es nicht müsst ihr noch etwas machen. Ihr erstellt eine txt-datei und nennt diese .htaccess (siehe letzte Lektion). In diese schreibt ihr AddType image/x-icon .ico . Dadurch kennt der Webserver .ico-Dateien dann auch als Bilder.
Solltet ihr bereits eine .htaccess-Datei haben fügt das einfach unten hinzu.

Für die Beispielseite habe ich auch noch ein Favicon angehangen.

edit: Beispielseite

Ich habe mich schon lange gefragt, wie die das machen. DANKE!!

Ha das ist ja ein Ding !
Genau diese Frage wollte ich gerade stellen. Vielen Dank Slowi
*gleich mal ausprobier*

Edit: Prima hat funktioniert

Tai, kannst du mal einen Link zu deiner Seite geben? Würde mich mal interessieren was du für ein Favicon hast.

Ist nicht meine Seite ich verwalte die nur in gewisser Weise.
Von daher muss ich erst fragen ob ich einen Link posten darf... nicht das der Klabautermann wieder schimpft O_o''

Und ja es kann sein dass bei Arcor die Dinge anders laufen.
Ist sogar sehr gut möglich. Gut zu wissen wenn ich mal wieder an meinem Wald rumbasteln will. Der liegt ja auch auf Arcor XD

Hatte bei der Lektion etwas vergessen was möglicherweise das problem verursacht hatte. Also sollte jemand Probleme wie Ginome bei Arcor haben soltle er oben noch einmal nachlesen.

Solltet ihr aber doch Ginomes Link oben nehmen wollen empfehle ich erstens das Icon anders zu nennen, da es sosnt zu Konflikten kommen kann und zweitens diesen Link zu nehmen:
<link rel="shortcut icon" href="sonic.ico" type="image/x-icon" />

Ganz einfach weil etwas ältere Versionen des IE die Kurzform rel="icon" nicht kennen.

Ja, ich mal wieder

Ich habe ´ne Page jetzt bei Funpic registriert, nur funktioniert dort die .htaccess - Dateien nicht. Welche Alternativen habe ich jetzt??
Ich will ja, dass erst durch Klick auf ein kleines Bild zur Großansicht gewechselt wird. Wollte erst 4images nehmen, aber damit kenne ich mich noch weniger aus

Funpic erlaubt .htaccess nur als Verzeichnisschutz. D.h. das einzige was dort funktioniert ist ein Passwortschutz der Verzeichnisse, Zugriff auf Verzeichnisse generell verbieten und generell erlauben.

Das macht aber nicht wirklich was. Funpic hat sein eigenes Bilder-auf-fremder-seite-einbind-verhinderungsscript. Zudem werden ICOs richtig erkannt, also gibt es eigentlich keine Veranlassung .htacess zu benutzen.

Und öhm deine letzte Frage versteh ich net.

Zitat

Original von Monkey D. Videl
Ja, ich mal wieder

Ich habe ´ne Page jetzt bei Funpic registriert, nur funktioniert dort die .htaccess - Dateien nicht. Welche Alternativen habe ich jetzt??
Ich will ja, dass erst durch Klick auf ein kleines Bild zur Großansicht gewechselt wird. Wollte erst 4images nehmen, aber damit kenne ich mich noch weniger aus

Es gibt afaik nen richtigen code dafür aber mir fällt nur einer ein. Und zwar würde das so aussehen das man ein Bild verlinkt und stadt einen Text zum drauf klicken ein Bild dort hin setzt das allerdings verkleinert ist.

also z.B.: <a href="http://dein.bild.wusch"><img src="http://dein.bild.wusch" width="50" height="50" border="0"></a>

so könnte ich mir das vorstellen o.o. Mit width und height legst du dann eben fest wie groß das "preview" bild sein soll und mit "border" stellst du den rand ein x>

Okay, dann DANKE für´s Erste!!

Also, ich will eine Gallerie machen, wo man durch Klick auf einem kleinen Bild, zur Großansicht kommt. Nur würde da der Trick mit dem speichern_verboten nicht gehen <.<´

Nuja, der is ja auch net so wichtig... nur die Bilder durch html/css (ich hab gnaz am Anfang schon erklärt wie man die größe von Bildern eisntellt. :D) verkleinern ist keine wirklich gute Möglichkeit, da sie dann von der Dateigröße immernoch riesig sind und es ewig dauert alle auf einmal zu laden.
Öhm auf funpic könntest du auch eine Coppermine isntallieren:

http://coppermine.sourceforge.net/