Articles / januar 21, 2022

oprettelse af en HTML 404! Fejl side

der kan være mange grunde til, at en bruger ikke kan få adgang til en hjemmeside. En af disse er kendt som en 404! fejl. Helt enkelt en HTML 404! fejlmeddelelse er en hypertekst Transfer Protocol (HTTP) statuskode angiver serveren ikke kunne finde den ønskede hjemmeside. Med andre ord kan din internetsøgemaskine oprette forbindelse til serveren, men den specifikke side, du prøver at få adgang til, kan ikke nås. I denne vejledning bygger vi en HTML 404-fejlside for at tilpasse, hvad den besøgende ser, når de lander der. Vi vil også bruge nogle CSS til yderligere at forbedre siden.

404! Fejl

hvorfor 404! HTML-fejl vises

når en HTTP 404 vises på din skærm, betyder det, at selvom serveren kan nås, er den specifikke side, du leder efter, ikke. Hjemmesiden er enten ødelagt, eller den findes ikke længere. 404-fejlkoden kan vises i enhver bro.ser, uanset hvilken type bro. ser du bruger.

der er flere grunde til, at du muligvis får en HTTP 404-kode:

en typisk udløser for en fejl 404 besked er, når siden er blevet slettet fra hjemmesiden.
siden blev flyttet til en anden URL, og omdirigeringen blev udført forkert.
du indtastede en forkert URL-adresse.
selvom det sker meget sjældent, fungerer serveren nogle gange.
det indtastede domænenavn findes ikke længere.

desværre efterlades brudte links ofte i lange perioder, efter at siden er blevet slettet eller flyttet. Selv når internetejere opretholder deres hjemmesider, kan ejeren undertiden slette hjemmesiden eller ændre navnet på hjemmesiden. Dette betyder, at når nogen klikker på et “gammelt” link, vil de ikke længere kunne finde det sted. Desværre, på grund af mange mennesker at sætte URL ‘ er til hjemmesider overalt, vil der i sidste ende være links, der faktisk linker til ingen steder.

det er almindeligt, at ejere af hjemmesider ikke kontrollerer deres eksterne links regelmæssigt, hvilket fører til, at brugere forsøger at få adgang til et dødt link. Vedligeholdelse af internettet er afgørende af denne grund.

Opret en “side ikke fundet” HTML-side

hvis en besøgende på din hjemmeside når en gammel og ikke-eksisterende hjemmeside, vil serveren, der er vært for denne hjemmeside, vise en “404” – fejl, der grundlæggende siger, at siden ikke kan findes. I stedet for at lade serveren vise en kedelig standardfejlside, kan du oprette en af dine egne og blive så kreativ som du vil med den.

lad os hoppe ind i trin et af vores tutorial.

Trin 1: Opret en HTML-landingsside

lad os starte med blot at oprette en grundlæggende HTML-side. Dette vil være grundlaget for at skabe en mere spændende og informativ 404! Fejl hjemmeside for besøgende at lande på.

Åbn en teksteditor, gem filen som “shorelinesurfteam.html ” og indsæt følgende HTML-kode. Gem din fil igen, når du er færdig.

<html>
<head> <style type=text/css>
</style>
</head>
<body>
</body>
</html>

for at hjælpe dem, der er landet på denne “ikke-eksisterende” side, kan du tilføje nogle nyttige oplysninger for at guide dem på den rigtige vej. Måske tilføje nogle oplysninger om, hvorfor siden ikke findes længere. Tilføj noget som dette i HTML. Du er velkommen til at kopiere følgende kode og gemme din html-fil igen.

<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ølgende illustration identificerer den tekst, vi tilføjede for at gøre siden mere informativ.

for at slå tekstskriften op, lad os tilføje en stil. Kopier følgende kode, og gem din HTML-fil igen.

!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>

Tilføj et billede, og skift din tekstfarve til en brugerdefineret sekskantfarve, hvis du også vil ved at tilføje HTML for at henvise til billedet. Billedet kan også gå i din rodmappe.

!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>

Trin 2: Bed serveren om at bruge din HTML 404! Fejlside

Opret en “.htaccess ” fil. Denne tekstfil tjener formålet med at videregive instruktioner til serveren.

der kan allerede være en .htaccess-fil i rodmappen på dit hostingrum. Hvis der er, hente det og ændre det. Det kan være en skjult fil. I så fald skal du muligvis justere dine serverindstillinger, så du kan se denne fil.

i dette “.htaccess ” fil du skal tilføje denne linje:

ErrorDocument 404 / shorelinesurfteam.html

dette er alt hvad du behøver at tilføje. Du behøver ikke at tilføje nogen HTML-kode.

hvad dette gør er at fortælle serveren, at når den støder på en 404-fejl, skal den indlæse shorelinesurfteam.html-fil i rodmappen.

Trin 3: Gemme .htaccess-fil til rodmappen

Gem din “.htaccess ” fil og uploade den til rodmappen på din hjemmeside. Når serveren støder på en ikke-fundet fejl, vises din fejlside.

nu når en besøgende finder hjemmesiden (pr vores kode ovenfor)

i stedet for at se dette:

de vil se følgende mere informative og venlige fejlside, som du har oprettet.

for at få den grønne tekst til at skille sig ud mere, kan du tilføje et div-element med en farvebaggrund som sådan:

<html >
<hoved>
<style type=tekst/css>
p {
farve: #0ecc8a;
font-Vægt: 900;
font-størrelse: 20ph;
font-familie: Helvetica, Arial, sans-serif;
}
div {
baggrund-farve: grå;
}
</stil>
</hoved>
< krop >
< a href=”#”><img src=”side.jpg ” ></a>
<div>
<p > dette var en hjemmeside for en organisation, der plejede at eksistere. Denne organisation eksisterer ikke længere, da den er blevet erstattet med en ny organisation for at lære surfbørn havets værdier og kærlighed. Det nye site er: https://www.pleasurepointsurfclub.com/
<br>< br >
hvis du kom på denne side ved en fejltagelse, kan du prøve at kontrollere URL ‘ en i din netsøgemaskine.</p>
</div>
</body>
</html>

dette vil give følgende:

nu kan du være så kunstnerisk, som du vil, for at oprette din smarte, informative 404.html-side. Husk altid den besøgende på siden for at forbedre deres oplevelse.

se HTML-Skrifttypefamilierne for at lære, hvordan du forbedrer din tekst, og tjek også CSS-Baggrundsvejledningen for at lære, hvordan du forbedrer baggrunden på din hjemmeside.

hvor skal vi hen?

denne introduktion til 404-sidefejlen skal give et udgangspunkt for yderligere undersøgelse af hjemmesidestyring og de ubegrænsede kreative aspekter, som HTML tilbyder. I de næste blogs vil du være i stand til at udforske andre områder af HTML-design. Bliv ved med at blive inspireret, Udforsk videre og dyk dybere ned i en verden af internetdesign.

Tilmeld dig vores Intro til programmering Nanodegree program i dag!

Begynd At Lære

International Blogging Network