skapa en HTML 404! Fel webbsida
det kan finnas många anledningar till att en användare inte kan få tillgång till en webbplats. En av dessa är känd som en 404! fel. Helt enkelt en HTML 404! felmeddelande är en Hypertext Transfer Protocol (HTTP) statuskod som indikerar att servern inte kunde hitta den begärda webbplatsen. Med andra ord kan din webbläsare ansluta till servern, men den specifika sidan du försöker komma åt kan inte nås. I den här handledningen kommer vi att bygga en HTML 404-felwebbsida för att anpassa vad besökaren ser när de landar där. Vi kommer också att använda lite CSS för att ytterligare förbättra sidan.
den 404! Fel
varför 404! HTML-fel visas
när en HTTP 404 visas på skärmen betyder det att även om servern kan nås är den specifika sidan du letar efter inte. Webbsidan är antingen trasig eller så finns den inte längre. 404-felkoden kan visas i vilken webbläsare som helst, oavsett vilken typ av webbläsare du använder.
det finns flera anledningar till varför du kanske får en HTTP 404-kod:
- en typisk utlösare för ett fel 404-meddelande är när sidan har tagits bort från webbplatsen.
- sidan flyttades till en annan URL och omdirigeringen gjordes felaktigt.
- du har angett en felaktig URL-adress.
- även om det händer mycket sällan, ibland fungerar servern.
- det angivna domännamnet finns inte längre.
tyvärr lämnas ofta trasiga länkar under långa perioder efter att sidan har tagits bort eller flyttats. Även när webbägare behålla sina webbplatser, ibland ägaren kan ta bort webbplatsen, eller ändra namnet på webbplatsen. Det betyder att när någon klickar på en “gammal” länk kommer de inte längre att kunna hitta den webbplatsen. Tyvärr, på grund av att många människor sätter upp webbadresser till webbplatser överallt, kommer det i slutändan att finnas länkar som faktiskt länkar till ingenstans.
det är vanligt att ägare av webbplatser inte kontrollerar sina externa länkar regelbundet vilket leder till att användare försöker komma åt en död länk. Webbunderhåll är viktigt av denna anledning.
skapa en HTML-webbsida för “Sidan hittades inte”
om en besökare på din webbplats når en gammal och obefintlig webbsida kommer servern som är värd för den Webbplatsen att visa ett “404” – fel som i princip säger att sidan inte kan hittas. Istället för att låta servern visa en intetsägande, standardfelsida kan du skapa en egen och bli så kreativ som du vill med den.
Låt oss hoppa in i steg ett av vår handledning.
Steg 1: Skapa en HTML-landningssida
Låt oss börja med att helt enkelt skapa en grundläggande HTML-sida. Detta kommer att ligga till grund för att skapa en mer spännande och informativ 404! Fel webbsida för besökare att landa på.
öppna en textredigerare, spara filen som “shorelinesurfteam.html ” och lägg i följande HTML-kod. Spara filen igen när du är klar.
<html><head>
<style type=text/css>
</style></head>
<body>
</body></html>
för att hjälpa dem som har landat på denna “obefintliga” sida kan du lägga till lite användbar information för att vägleda dem på rätt väg. Kanske lägga till lite information om varför sidan inte finns längre. Lägg till något liknande i HTML. Kopiera gärna följande kod och spara om din html-fil.
<html>
<head>
<style type=text/css>
</style></head>
<body><p>This was a web page for an organization that used to exist. This organization no longer exists as it has been replaced with a new organization to teach surf kids the values and love of the ocean. The new site is: https://www.pleasurepointsurfclub.com/
<br><br>
If you came upon this page by mistake, try checking the URL in your web browser.</p>
</body>
</html>
följande illustration identifierar texten vi lagt till för att göra sidan mer informativ.
för att stansa upp teckensnitt, låt oss lägga till en stil. Kopiera följande kod och spara om din HTML-fil.
!DOCTYPE html><html><head>
<style type=text/css>p { color: blue; font-weight: 900; font-size: 20px; font-family: Helvetica, Arial, sans-serif; }
</style></head>
<body><p>This was a web page for an organization that used to exist. This organization no longer exists as it has been replaced with a new organization to teach surf kids the values and love of the ocean. The new site is: https://www.pleasurepointsurfclub.com/
<br><br>
If you came upon this page by mistake, try checking the URL in your web browser.</p>
</body></html>
Lägg till en bild och ändra din textfärg till en anpassad hex-färg om du vill också genom att lägga till HTML för att referera till bilden. Bilden kan också gå i din rotkatalog.
!DOCTYPE html><html><head>
<style type=text/css>
p { color: #0ecc8a; font-weight: 900; font-size: 20px; font-family: Helvetica, Arial, sans-serif; }
</style></head>
<body>
<a href="#"><img src="site.jpg"></a>
<p>This was a web page for an organization that used to exist. This organization no longer exists as it has been replaced with a new organization to teach surf kids the values and love of the ocean. The new site is: https://www.pleasurepointsurfclub.com/
<br><br>
If you came upon this page by mistake, try checking the URL in your web browser.</p>
</body></html>
steg 2: berätta för servern att använda din HTML 404! Fel sida
skapa en “.htaccess ” – fil. Denna textfil tjänar syftet att vidarebefordra instruktioner till servern.
det kan redan finnas en .htaccess-fil i rotmappen på ditt webbhotell utrymme. Om det finns, Ladda ner det och ändra det. Det kan vara en dold fil. Om så är fallet kan du behöva justera serverinställningarna så att du kan se den här filen.
i detta”.htaccess ” – fil måste du lägga till den här raden:
ErrorDocument 404 / shorelinesurfteam.html
det här är allt du behöver lägga till. Du behöver inte lägga till någon HTML-kod.
vad detta gör är att berätta för servern att när den stöter på ett 404-fel bör den ladda shorelinesurfteam.html-fil i rotmappen.
Steg 3: Spara .htaccess-fil till rotkatalogen
spara din “.htaccess ” fil och ladda upp den till rotmappen på din webbplats. När servern stöter på ett fel som inte hittats visas din felsida.
nu när en besökare hittar webbsidan (enligt vår kod ovan)
istället för att se detta:
de kommer att se följande mer informativa och vänliga felsida som du har skapat.
för att få den gröna texten att sticka ut mer kan du lägga till ett div-element med en färgbakgrund som sådan:
<html>
<Huvud>
<stil typ=text/css>
p {
färg: #0ecc8a;
font-vikt: 900;
font-storlek: 20px;
font-familj: Helvetica, Arial, sans-serif;
}
div {
bakgrundsfärg: grå;
}
</stil>
</Huvud>
< kropp>
< a href=”#”><img src= ” webbplats.jpg ” ></a>
<div>
<p>detta var en webbsida för en organisation som brukade existera. Denna organisation finns inte längre eftersom den har ersatts med en ny organisation för att lära surfbarnen värdena och kärleken till havet. Den nya webbplatsen är: https://www.pleasurepointsurfclub.com/
<br><br>
om du kom på den här sidan av misstag, försök kontrollera webbadressen i din webbläsare.</p>
</div>
</body>
</html>
detta kommer att ge följande:
nu kan du vara så konstnärlig som du vill skapa din snygga, informativa 404.html-sida. Håll alltid besökaren på sidan i åtanke för att förbättra deras upplevelse.
se HTML-Typsnittsfamiljerna för att lära dig hur du förbättrar din text och kolla även CSS-Bakgrundshandledningen för att lära dig hur du förbättrar bakgrunden på din webbsida.
var till nästa?
denna introduktion till 404-sidfelet bör ge en utgångspunkt för ytterligare undersökning av webbsidans hantering och de obegränsade kreativa aspekterna som HTML erbjuder. I nästa blogg kommer du att kunna utforska andra områden av HTML-design. Fortsätt att inspireras, utforska vidare och dyka djupare in i webbdesignens Värld.
Anmäl dig till vårt Intro till programmering Nanodegree program idag!
Börja Lära
Leave a Reply