bij het aanmaken van een HTML 404! Fout webpagina
er kunnen vele redenen zijn waarom een gebruiker geen toegang tot een website kan krijgen. Een van deze staat bekend als een 404! fout. Gewoon een HTML 404! foutmelding is een Hypertext Transfer Protocol (HTTP) statuscode die aangeeft dat de server de gevraagde website niet kon vinden. Met andere woorden, uw webbrowser kan verbinding maken met de server, maar de specifieke pagina die u probeert te openen kan niet worden bereikt. In deze tutorial bouwen we een HTML 404 error webpagina om aan te passen wat de bezoeker ziet wanneer hij daar landt. We zullen ook wat CSS gebruiken om de pagina verder te verbeteren.
de 404! Fout
waarom de 404! HTML-fout verschijnt
wanneer een HTTP 404 op uw scherm verschijnt, betekent dit dat, hoewel de server bereikbaar is, de specifieke pagina die u zoekt dat niet is. De webpagina is gebroken of bestaat niet meer. De 404-foutcode kan in elke browser worden weergegeven, ongeacht het type browser dat u gebruikt.
er zijn verschillende redenen waarom u een HTTP 404-code krijgt:
- een typische trigger voor een foutmelding 404 is wanneer de pagina is verwijderd van de website.
- de pagina is verplaatst naar een andere URL en de omleiding is onjuist uitgevoerd.
- u hebt een onjuist URL-adres ingevoerd.
- hoewel dit zeer zelden gebeurt, is de server soms defect.
- de ingevoerde domeinnaam bestaat niet meer.
helaas blijven verbroken links vaak lange tijd achter nadat de pagina is verwijderd of verplaatst. Zelfs wanneer webeigenaren hun websites onderhouden, kan de eigenaar soms de site verwijderen of de naam van de site wijzigen. Dit betekent dat wanneer iemand klikt op een” oude ” link, ze niet meer in staat zijn om die site te vinden. Helaas, als gevolg van veel mensen het opzetten van URL ‘ s naar websites over de plaats, zal er uiteindelijk links die eigenlijk verwijzen naar nergens.
het is gebruikelijk dat eigenaren van websites hun externe links niet regelmatig controleren, waardoor gebruikers proberen toegang te krijgen tot een dode link. Web onderhoud is essentieel om deze reden.
Create a” Page Not Found ” HTML Web Page
als een bezoeker van uw website een oude en niet-bestaande webpagina bereikt, zal de server die de website host een “404” fout tonen die in principe zegt dat de pagina niet gevonden kan worden. In plaats van de server toe te staan om een saaie, standaard foutpagina te tonen, kunt u een van uw eigen te maken en zo creatief als je wilt met het.
laten we in stap één van onze tutorial springen.
Stap 1: Maak een HTML-Landing-webpagina
laten we beginnen met het maken van een eenvoudige HTML-pagina. Dit zal de basis zijn voor het creëren van een meer spannende en informatieve 404! Fout webpagina voor bezoekers om op te landen.
Open een teksteditor, sla het bestand op als ” shorelinesurfteam.html” en zet in de volgende HTML-code. Sla uw bestand opnieuw op als u klaar bent.
<html><head>
<style type=text/css>
</style></head>
<body>
</body></html>
om degenen die zijn geland op deze “niet-bestaande” pagina te helpen, kunt u een aantal nuttige informatie toe te voegen om hen te begeleiden op het juiste pad. Voeg misschien wat informatie toe over waarom de pagina niet meer bestaat. Voeg iets als dit toe aan de HTML. Voel je vrij om de volgende code te kopiëren en uw html-bestand opnieuw op te slaan.
<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>
de volgende illustratie geeft de tekst aan die we hebben toegevoegd om de pagina informatief te maken.
om het lettertype op te sommen, voegen we een stijl toe. Kopieer de volgende code en sla uw HTML-bestand opnieuw op.
!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>
voeg een afbeelding toe en wijzig uw tekstkleur naar een aangepaste hexadecimale Kleur Als u ook wilt door de HTML toe te voegen om de afbeelding te verwijzen. De afbeelding kan ook in je root directory gaan.
!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>
Stap 2: Vertel De Server om uw HTML 404 te gebruiken! Foutpagina
Maak een “.htaccess ” bestand. Dit tekstbestand dient om instructies door te geven aan de server.
er zou al een kunnen zijn .htaccess bestand in de hoofdmap van uw web hosting ruimte. Als die er is, download het en verander dat. Het kan een verborgen bestand zijn. Als dat zo is, moet u mogelijk uw serverinstellingen aanpassen zodat u dit bestand kunt bekijken.
In deze rubriek.htaccess ” bestand dat u nodig hebt om deze regel toe te voegen:
ErrorDocument 404 /shorelinesurfteam.html
Dit is alles wat je moet toevoegen. U hoeft geen HTML-code toe te voegen.
wat dit doet is de server vertellen dat wanneer het een 404-fout tegenkomt, het shorelinesurfteam moet laden.html-bestand in de hoofdmap.
Stap 3: Opslaan .htaccess bestand naar de Root Directory
Sla uw “.htaccess ” bestand en upload het naar de hoofdmap van uw website. Wanneer de server een niet-gevonden fout tegenkomt, wordt uw foutpagina weergegeven.
nu wanneer een bezoeker de webpagina vindt (volgens onze code hierboven)
in plaats van dit te zien:
zij zullen de volgende meer informatieve en vriendelijke foutpagina zien die u hebt gemaakt.
om de groene tekst beter te laten opvallen, kunt u een div-element met een achtergrondkleur als zodanig toevoegen:
<html>
<kop>
<style type=text/css>
p {
kleur: #0ecc8a;
font-weight: 900;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
}
div {
background-color: grijs;
}
</stijl>
</hoofd>
<inhoud>
<a href=”#”><img src=”site.jpg ” >< / a>
<div>
<p>dit was een webpagina voor een organisatie die vroeger bestond. Deze organisatie bestaat niet meer omdat het is vervangen door een nieuwe organisatie om surf kids de waarden en liefde van de oceaan te leren. De nieuwe site is: https://www.pleasurepointsurfclub.com/
<br><br>
als u per ongeluk op deze pagina bent gekomen, probeer dan de URL in uw webbrowser te controleren.</p>
</div>
</body>
</html>
dit levert het volgende op::
nu kunt u zo artistiek zijn als u wilt om uw fancy, informatieve 404 te maken.html-pagina. Houd altijd de bezoeker van de pagina in gedachten om hun ervaring te verbeteren.
zie de html-lettertypefamilies om te leren hoe u uw tekst kunt verbeteren, en bekijk ook de CSS Achtergrond Tutorial om te leren hoe u de achtergrond van uw webpagina kunt verbeteren.
waarheen nu?
deze inleiding tot de 404-paginafout zou een uitgangspunt moeten zijn voor verder onderzoek naar het beheer van webpagina ‘ s en de onbeperkte creatieve aspecten die HTML biedt. In de volgende blogs, zult u in staat om andere gebieden van HTML design te verkennen. Blijf geïnspireerd, verken verder en duik dieper in de wereld van webdesign.
schrijf je vandaag nog in voor onze introductie tot het programmeren van Nanodegree programma!
Begin Met Leren
Leave a Reply