Articles /

Créant un HTML 404! Page Web d’erreur

Il peut y avoir plusieurs raisons pour lesquelles un utilisateur ne peut pas accéder à un site Web. L’un d’eux est connu sous le nom de 404! erreur. Tout simplement un HTML 404! le message d’erreur est un code d’état HTTP (Hypertext Transfer Protocol) indiquant que le serveur n’a pas pu trouver le site Web demandé. En d’autres termes, votre navigateur Web peut se connecter au serveur, mais la page spécifique à laquelle vous essayez d’accéder ne peut pas être atteinte. Dans ce tutoriel, nous allons créer une page Web d’erreur HTML 404 pour personnaliser ce que le visiteur voit lorsqu’il y atterrit. Nous utiliserons également du CSS pour améliorer encore la page.

Le 404! Erreur

Pourquoi le 404! Une erreur HTML Apparaît

Lorsqu’un HTTP 404 apparaît sur votre écran, cela signifie que bien que le serveur soit accessible, la page spécifique que vous recherchez ne l’est pas. La page Web est soit cassée, soit elle n’existe plus. Le code d’erreur 404 peut apparaître dans n’importe quel navigateur, quel que soit le type de navigateur que vous utilisez.

Il y a plusieurs raisons pour lesquelles vous pourriez obtenir un code HTTP 404:

  • Un déclencheur typique d’un message d’erreur 404 est lorsque la page a été supprimée du site Web.
  • La page a été déplacée vers une autre URL et la redirection a été effectuée de manière incorrecte.
  • Vous avez saisi une adresse URL incorrecte.
  • Bien que cela arrive très rarement, le serveur fonctionne parfois mal.
  • Le nom de domaine saisi n’existe plus.

Malheureusement, les liens rompus sont souvent laissés pendant de longues périodes après la suppression ou le déplacement de la page. Même lorsque les propriétaires de sites Web maintiennent leurs sites Web, le propriétaire peut parfois supprimer le site ou modifier le nom du site. Cela signifie que lorsque quelqu’un clique sur un “ancien” lien, il ne pourra plus trouver ce site. Malheureusement, en raison de nombreuses personnes qui mettent en place des URL vers des sites Web partout, il y aura finalement des liens qui ne mènent nulle part.

Il est courant que les propriétaires de sites Web ne vérifient pas régulièrement leurs liens externes, ce qui conduit les utilisateurs à essayer d’accéder à un lien mort. La maintenance Web est essentielle pour cette raison.

Créez une page Web HTML “Page introuvable”

Si un visiteur de votre site Web atteint une page Web ancienne et inexistante, le serveur qui héberge ce site Web affichera une erreur “404” qui indique essentiellement que la page est introuvable. Au lieu de permettre au serveur d’afficher une page d’erreur fade et par défaut, vous pouvez en créer une et faire preuve d’autant de créativité que vous le souhaitez.

Passons à la première étape de notre tutoriel.

Étape 1: Créer une page Web de destination HTML

Commençons par créer simplement une page HTML de base. Ce sera la base pour créer un 404 plus excitant et informatif! Page Web d’erreur sur laquelle les visiteurs peuvent atterrir.

Ouvrez un éditeur de texte, enregistrez le fichier sous “shorelinesurfteam.html” et mettez le code HTML suivant. Enregistrez à nouveau votre fichier lorsque vous avez terminé.

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

</style>
</head>

<body>

</body>
</html>

Pour aider ceux qui ont atterri sur cette page “inexistante”, vous pouvez ajouter des informations utiles pour les guider sur le bon chemin. Ajoutez peut-être des informations sur les raisons pour lesquelles la page n’existe plus. Ajoutez quelque chose comme ça dans le code HTML. N’hésitez pas à copier le code suivant et à réenregistrer votre fichier html.

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

L’illustration suivante identifie le texte que nous avons ajouté pour rendre la page plus informative.

Image de code HTML

Pour perforer la police de texte, ajoutons un style. Copiez le code suivant et enregistrez à nouveau votre fichier HTML.

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

Ajoutez une image et changez la couleur de votre texte en une couleur hexadécimale personnalisée si vous le souhaitez également en ajoutant le code HTML pour référencer l’image. L’image peut également aller dans votre répertoire racine.

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

Étape 2: Dites au Serveur d’utiliser Votre HTML 404 ! Page d’erreur

Créer un “.fichier “htaccess”. Ce fichier texte sert à transmettre des instructions au serveur.

Il y a peut-être déjà un.fichier htaccess dans le dossier racine de votre espace d’hébergement Web. S’il y en a, téléchargez-le et modifiez-le. Il peut s’agir d’un fichier caché. Si c’est le cas, vous devrez peut-être ajuster les paramètres de votre serveur afin de pouvoir afficher ce fichier.

Dans ce “.fichier “htaccess” dont vous aurez besoin pour ajouter cette ligne:

ErrorDocument 404 / shorelinesurfteam.html

C’est tout ce que vous devez ajouter. Vous n’avez pas besoin d’ajouter de code HTML.

Cela indique au serveur que lorsqu’il rencontre une erreur 404, il doit charger la shorelinesurfteam.fichier html dans le dossier racine.

Étape 3: Enregistrer.fichier htaccess dans le répertoire racine

Enregistrez votre “.fichier “htaccess” et téléchargez-le dans le dossier racine de votre site Web. Lorsque le serveur rencontre une erreur introuvable, votre page d’erreur s’affiche.

Maintenant, lorsqu’un visiteur trouve la page Web (selon notre code ci-dessus)

Au lieu de voir ceci:

exemple de page d'erreur

Ils verront la page d’erreur suivante plus informative et conviviale que vous avez créée.

exemple de page d'erreur

Pour que le texte vert se démarque davantage, vous pouvez ajouter un élément div avec un arrière-plan de couleur en tant que tel:

< html >
< head >
< style type=text/css >
p {
color: #0ecc8a;
font-weight: 900;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
}
div {
couleur de fond: gris;
}
</ style>
</ tête >
< corps >
< a href=”#”>< img src = “site.jpg”> < /a >
< div>
<p > Il s’agissait d’une page Web pour une organisation qui existait auparavant. Cette organisation n’existe plus car elle a été remplacée par une nouvelle organisation pour enseigner aux surf kids les valeurs et l’amour de l’océan. Le nouveau site est: https://www.pleasurepointsurfclub.com/
< br> < br>
Si vous êtes tombé sur cette page par erreur, essayez de vérifier l’URL dans votre navigateur Web.</p>
</div>
</body>
</html>

Cela donnera les résultats suivants:

exemple de page d'erreur

Maintenant, vous pouvez être aussi artistique que vous le souhaitez pour créer votre fantaisie, informative 404.page html. Gardez toujours à l’esprit le visiteur de la page pour améliorer son expérience.

Consultez les familles de polices HTML pour apprendre à améliorer votre texte, et consultez également le tutoriel d’arrière-plan CSS pour apprendre à améliorer l’arrière-plan de votre page Web.

Où aller ensuite?

Cette introduction à l’erreur de page 404 devrait fournir un point de départ pour une enquête plus approfondie sur la gestion des pages Web et les aspects créatifs illimités offerts par HTML. Dans les prochains blogs, vous pourrez explorer d’autres domaines de la conception HTML. Continuez à être inspiré, explorez plus loin et plongez plus profondément dans le monde de la conception Web.

Inscrivez-vous à notre programme d’introduction à la programmation Nanodegree dès aujourd’hui!

Commencer à apprendre

Leave a Reply