Opprette EN HTML 404! Feil Nettside

det kan være mange grunner til at en bruker ikke kan få tilgang til et nettsted. En av disse er kjent som en 404! feil. GANSKE enkelt EN HTML 404! feilmelding er EN HTTP-statuskode (HYPERTEXT Transfer Protocol) som angir at serveren ikke kunne finne det forespurte nettstedet. Med andre ord kan nettleseren din koble til serveren, men den spesifikke siden du prøver å få tilgang til, kan ikke nås. I denne opplæringen vil vi bygge EN HTML 404 feil nettside for å tilpasse hva besøkende ser når de lander der. VI vil også bruke NOEN CSS for å forbedre siden ytterligere.

Den 404! Feil

hvorfor 404? HTML-Feil Vises

når EN HTTP 404 vises på skjermen, betyr det at selv om serveren er tilgjengelig, er den spesifikke siden du leter etter ikke. Nettsiden er enten ødelagt, eller den eksisterer ikke lenger. 404-feilkoden kan vises i alle nettlesere, uavhengig av hvilken type nettleser du bruker.

det er flere grunner til at DU kanskje får EN HTTP 404-kode:

  • en typisk utløser for en feil 404-melding er når siden er slettet fra nettstedet.
  • siden ble flyttet til en ANNEN URL, og omadresseringen ble gjort feil.
  • du har skrevet inn feil URL-adresse.
  • selv om det skjer svært sjelden, virker serveren noen ganger feil.
  • det angitte domenenavnet eksisterer ikke lenger.

dessverre er brutte lenker ofte igjen i lange perioder etter at siden er slettet eller flyttet. Selv når web eiere opprettholde sine nettsider, noen ganger eieren kan slette nettstedet, eller endre navnet på nettstedet. Dette betyr at når noen klikker på en” gammel ” lenke, vil de ikke lenger kunne finne dette nettstedet. Dessverre, på grunn av mange mennesker å sette OPP WEBADRESSER til nettsteder over alt, vil det til slutt være koblinger som faktisk lenker til ingensteds.

det er vanlig at eiere av nettsteder ikke sjekker sine eksterne lenker regelmessig, noe som fører til at brukere prøver å få tilgang til en død lenke. Web vedlikehold er viktig av denne grunn.

Opprett EN HTML-Side “Page Not Found”

hvis en besøkende på nettstedet ditt når en gammel og ikke-eksisterende nettside, vil serveren som er vert for nettstedet, vise en “404” – feil som i utgangspunktet sier at siden ikke kan bli funnet. I stedet for å la serveren vise en blid, standard feilside, kan du lage en av dine egne og bli så kreativ som du vil med den.

La oss hoppe inn i trinn en av vår opplæring.

Trinn 1: Opprett EN HTML-Landingsside

La oss starte med å lage en grunnleggende HTML-side. Dette vil være grunnlaget for å skape en mer spennende og informativ 404! Feil nettside for besøkende å lande på.

Åpne et tekstredigeringsprogram, lagre filen som ” shorelinesurfteam.html ” og legg inn FØLGENDE HTML-kode. Lagre filen igjen når du er ferdig.

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


</style>

</head>

<body>


</body>

</html>

for å hjelpe de som har landet på denne” ikke-eksisterende ” siden, kan du legge til litt nyttig informasjon for å veilede dem på riktig vei. Kanskje legge til litt informasjon om hvorfor siden ikke eksisterer lenger. Legg til noe som dette i HTML. Føl deg fri til å kopiere følgende kode og lagre html-filen.

<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 illustrasjon identifiserer teksten vi har lagt til for å gjøre siden mer informativ.

 HTML-kode bilde

for å slå opp tekstfonten, la oss legge til en stil. Kopier følgende kode og lagre HTML-filen på NYTT.

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

Legg til et bilde og endre tekstfargen til en egendefinert hex-farge hvis du vil også ved å legge TIL HTML for å referere til bildet. Bildet kan også gå i rotkatalogen din.

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

Trinn 2: Fortell Serveren Å Bruke HTML 404! Feil Side

Opprett en”.htaccess ” fil. Denne tekstfilen tjener formålet med å overføre instruksjoner til serveren.

det kan allerede være en .htaccess fil i rotmappen på web hosting plass. Hvis det er, last det ned og endre det. Det kan være en skjult fil. I så fall må du kanskje justere serverinnstillingene slik at du kan se denne filen.

I dette”.htaccess ” fil du må legge til denne linjen:

ErrorDocument 404 / shorelinesurfteam.html

Dette er alt du trenger å legge til. Du trenger ikke å legge TIL NOEN HTML-kode.

hva dette gjør er å fortelle serveren at når den møter en 404-feil, bør den laste shorelinesurfteam.html-fil i rotmappen.

Trinn 3: Lagre .htaccess-Fil Til Rotkatalogen

Lagre “.htaccess ” fil og laste den opp til rotmappen på ditt nettsted. Når serveren møter en ikke funnet feil, vises feilsiden din.

nå når en besøkende finner nettsiden (per koden ovenfor)

I Stedet for å se dette:

eksempel på feilside

De vil se følgende mer informative og vennlige feilside som du har opprettet.

 eksempelfeilside

for å få den grønne teksten til å skille seg ut mer, kan du legge til et div-element med en fargebakgrunn som sådan:

<html>
<hode>
<stiltype=tekst/css>
p {
farge: #0ecc8a;
font-vekt: 900;
font-størrelse: 20px;
font-familie: Helvetica, Arial, sans-serif;
}
div {
bakgrunnsfarge: grå;
}
</stil>
</hode>
< kropp>
< a href=”#”><img src= ” nettsted.jpg”></a>
< div >
< p > Dette var en nettside for en organisasjon som tidligere eksisterte. Denne organisasjonen eksisterer ikke lenger, da den har blitt erstattet med en ny organisasjon for å lære surf kids verdiene og kjærligheten til havet. Det nye nettstedet er: https://www.pleasurepointsurfclub.com/
<br> < br>
hvis du kom over denne siden ved en feil, prøv å sjekke NETTADRESSEN i nettleseren din.</p>
</div>
</body>
</html>

Dette vil gi følgende:

eksempel på feil side

nå kan Du være så kunstnerisk som du vil lage din fancy, informative 404.html-side. Hold alltid besøkende på siden i tankene for å forbedre opplevelsen.

Se HTML Font Familier for å lære hvordan du kan forbedre teksten, og også sjekke UT CSS Bakgrunn Opplæringen for å lære hvordan du kan forbedre bakgrunnen på websiden.

Hvor Skal Neste?

denne introduksjonen til 404-sidefeilen bør gi et utgangspunkt for videre undersøkelse av websidehåndtering og de ubegrensede kreative aspektene SOM HTML tilbyr. I de neste bloggene vil du kunne utforske andre områder AV HTML-design. Fortsett å bli inspirert, utforske videre og dykke dypere inn i verden av webdesign.

Meld deg på Vår Intro Til Programmering Nanodegree program i dag!

Begynn Å Lære

Leave a Reply