03. HTML

Skapa din egen 404 response sida

2010-01-27 20:34 #0 av: johan-ahlback

När en fil inte hittas på en server får webbläsaren tillbaka en så kallad http response code 404. Jag ska visa hur du anpassar din egen 404.

Jag ska börja med att säga att alla webbhotell inte stödjer att man får byta sin 404. Jag har bara provat med one.com och dä fungerar det garanterat.

Så vad är en 404?

Alla har vi tveklöst stött på en sådan någon gång när vi surfat på internet. Filen du söker efter kan tyvär inte hittas. Servern skickar då istället ett speciellt dokument istället för den man letade efter. Det dokumentet är oftast fult och tråkigt, och man klickar sig bort från sidan ganska fort.

Men om man ser en lite annorlunda 404 som kanske följer sidans stilmall eller om man gjort en fyndig 404 så är det större chans att fler kollar på sidan.

Ett bra exempel är moderskeppet.se. om du klickar här, så ser du vad jag menar.

Så vad ska finnas med på en 404?

Först ska det helst vara lite text som förklarar att sidan inte kan hittas. Sen ska man helst ha två länkar. en som backar bakåt i webbläsarens historik, och en som tar en till sidans startsida.

Vad ska inte finnas med?

För mycket bilder och annat är ingen bra idé. sidan ska vara snabb att ladda. så begränsa bilder och annat grafiskt material som inte tillför något. Hade moderskeppet kunnat skippat den kraschade rymdraketen? jag säger nej för den tillför en bra bild över vad som hänt och den passar bra till sidans namn och till texten som står där.

Hur skapar man en 404?

Oftast är det så att om du ser en fil som heter .htaccess så har du chansen att skapa en 404 om du inte ser en sådan på servern så kan du prova att skapa en.

I den filen ska du lägga till: ErrorDocument 404 /notfound.html

först står error koden och sedan vad dokumentet heter. spara filen och lägg upp den på webbservern. Sedan skapar du en fil som heter notfound.html och släpper lös din kreativitet och laddar upp den till servern.

Men hur skapar man en länk som går tillbaka ett steg i historiken?
svaret är javascript. <a href="javascript:history.go(-1);">tillbaka</a>. Då säger den till webbläsaren att backa ett steg.

Så enkelt är det att skapa en 404. testa på ditt webbhotell och berätta gärna om det funkar.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-27 20:40 #1 av: johan-ahlback

Vill tillägga att Här måste man nästan använda intern stilmall då sidan kan vara svår att länka till.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-27 21:42 #2 av: Futurity

Super bra artikel Johan! :)

Anmäl
2010-01-27 21:50 #3 av: Jojaton

Bra artikel :)

Manufrog har en .htaccess-fil som redan är tillagd - så borde ju funka där också :) Dock har jag inte tid att testa själv just nu.

Johanna
@bellasantorino på Instagram

Anmäl
2010-01-28 01:39 #4 av: johan-ahlback

#2 och #3: tackar Glad

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-03-13 12:50 #5 av: emmalindahl

Bra artikel! Men jag får det inte att fungera..


Anmäl
2010-03-13 14:14 #6 av: Futurity

Har du en helt vanlig hemsida eller är det wordpress?

Anmäl
2010-03-13 14:18 #7 av: emmalindahl

Jag har en helt vanlig hemsida som jag har byggd i DW CS4. Har active24 som webbhotell. Har googlat lite på detta med har inte hittat något :/

 

www.nordiclights.se


Anmäl
2010-03-13 14:18 #8 av: emmalindahl

Obs. Hemsidan är inte klar ännu!


Anmäl
2010-03-13 18:06 #9 av: Futurity

Då vet jag tyvärr inte :/

Anmäl
2010-03-14 21:31 #10 av: johan-ahlback

använder du php? eller något annan sorts fil?

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-03-14 22:30 #11 av: emmalindahl

Nej, vanliga html filer använder jag! Glad


Anmäl
2010-03-14 23:30 #12 av: johan-ahlback

då har antar jag att webhotellet har stängt av den funktionen

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-03-15 16:05 #13 av: Niklas

Det här tycker jag är en bra felsida:

http://www.konigi.com/404

Vänliga hälsningar, Niklas
» Värd för iPad for Work, Mobile Photography & How to....

Anmäl
2010-03-15 16:30 #14 av: johan-ahlback

om man vill se en ganska rolig 404 så kan man kolla här:'

http://us.blizzard.com/404

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-04-28 23:27 #15 av: Lynxx

Oh!-Oh!

53 Custom Designed "404 Error" Pages Of Big Sites

http://www.technomoz.com/design/53-custom-designed-404-error-pages-of-big-sites/

/L

Anmäl
2011-05-30 22:10 #16 av: soren-p

Fungerar utmärkt på Surftown. Tack för artikeln Johan.

Anmäl
2011-06-03 23:18 #17 av: [Beavis]

Jag verkar vara trögast på den här sajten? Men jag behöver enkla beskrivningar för jag hajar inte.

Jag listar vad:

  • Ska man skapa en fil som heter 404.html? (verkar som de länkade sidorna heter så?)
  • Ska man skapa en fil som heter .htaccess? i såfall: Vad?.htaccess??
  • Jag skapade en fil som jag döpte till notfound.html enligt instruktionen, och la in texterna ovan i den, det var troligen fel? förklara hur.

Jag bifogar screenshot på min kod.

Jag gjorde radbrytning i body taggen för att få med hela i bilden.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-06-04 23:05 #18 av: soren-p

Du är nog på rätt väg Beavis. Du skall lägga till följande rad i filen .htaccess

ErrorDocument 404 /notfound.html

Om filen .htaccess inte finns så skapa den. Jag fick välja "visa dolda filer" för att se filen. Filen notfound.html skall sedan innehålla den sida du vill skall synas när error 404 uppstår. Lycka till!

Anmäl
2011-06-05 20:08 #19 av: [Beavis]

#18 Tack för svaret

Så man skall alltså inte skapa en sida som heter error404.html eller 404.html?

jag hittade ingen fil på servern som hette .htaccess Men å andra sidan körde jag nog inte "visa dolda filer"....

Jag har nu skapat ;

  • 404.html
  • notfound.html
  • .htaccess

I 404 la jag in java scriptet i en html fil

I notfound.html gjorde jag i princip samma sak

I .htaccess la jag in "ErrorDocument 404 /notfound.html" Men jag la in det i ett html dokument, det kanske ska vara anna dok typ? och inga html koder?

Är jag ännu mer förvirrad nu?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-06-05 20:18 #20 av: soren-p

Du är nog nästan i mål. Raden som läggs in i .htaccess pekar ut sidan notfound.html och denna visas om man försöker navigera till en sida som inte finns. Innehållet på sidan notfound.html kan du själv välja. Jag skippade javascriptet, vill man backa till föregående sida så finns ju den funktionen i browsern (backpilen). Så här ser min 404-sida ut länk.

Jag tror inte du behöver 404.html eller error404.html. Lycka till!

Anmäl
2011-06-05 20:31 #21 av: [Beavis]

Den sidan/texten har jag i både 404.html och i nofound.html? hmm?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-06-05 21:15 #22 av: soren-p

OK, men fungerar det, eller vad händer?

Anmäl
2011-06-05 22:01 #23 av: [Beavis]

Jag har ingen aning? har inte lagt upp dem ännu. Men hu testar man dem? jag har ingen sökfunktion på min sajt

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2011-06-05 22:11 #24 av: soren-p

Du kan prova genom att knappa in adressen till en sida du vet inte finns, tex www.mysite.se/xyz123.html, där mysite.se är din adress. Eftersom sidan xyz123.html inte finns, så visas notfound.html istället som ett felmeddelande. Hoppas det fungerar Glad

 

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.