Crear un HTML 404! Error Página web
Puede haber muchas razones por las que un usuario no puede acceder a un sitio web. ¡Uno de ellos se conoce como 404! error. Simplemente un HTML 404! el mensaje de error es un código de estado del Protocolo de Transferencia de Hipertexto (HTTP) que indica que el servidor no pudo encontrar el sitio web solicitado. En otras palabras, su navegador web puede conectarse con el servidor, pero no se puede acceder a la página específica a la que intenta acceder. En este tutorial, construiremos una página web de error HTML 404 para personalizar lo que ve el visitante cuando aterriza allí. También usaremos algunos CSS para mejorar aún más la página.
El 404! Error
¿por Qué el 404! Aparece un error HTML
Cuando aparece un HTTP 404 en su pantalla, significa que, aunque el servidor está accesible, la página específica que está buscando no lo está. La página web está rota o ya no existe. El código de error 404 puede aparecer en cualquier navegador, independientemente del tipo de navegador que esté utilizando.
Hay varias razones por las que podría estar obteniendo un código HTTP 404:
- Un desencadenador típico de un mensaje de error 404 es cuando la página se ha eliminado del sitio web.
- La página se movió a otra URL y la redirección se realizó incorrectamente.
- Ha introducido una dirección URL incorrecta.
- Aunque sucede muy raramente, a veces el servidor funciona mal.
- El nombre de dominio introducido ya no existe.
Desafortunadamente, los enlaces rotos a menudo se dejan durante largos períodos de tiempo después de que la página se ha eliminado o movido. Incluso cuando los propietarios de sitios web mantienen sus sitios web, a veces el propietario puede eliminar el sitio o cambiar el nombre del sitio. Esto significa que cuando alguien hace clic en un enlace” antiguo”, ya no podrá encontrar ese sitio. Desafortunadamente, debido a que muchas personas colocan URL a sitios web por todas partes, en última instancia, habrá enlaces que en realidad enlazan a ninguna parte.
Es común que los propietarios de sitios web no revisen sus enlaces externos regularmente, lo que lleva a que los usuarios intenten acceder a un enlace muerto. El mantenimiento web es esencial por esta razón.
Crear una página Web HTML “Página no encontrada”
Si un visitante de su sitio web llega a una página web antigua e inexistente, el servidor que aloja ese sitio web mostrará un error “404” que básicamente dice que la página no se puede encontrar. En lugar de permitir que el servidor muestre una página de error blanda y predeterminada, puede crear una propia y obtener la creatividad que desee con ella.
Pasemos al primer paso de nuestro tutorial.
Paso 1: Crear una página web de destino HTML
Comencemos simplemente creando una página HTML básica. ¡Esta será la base para crear un 404 más emocionante e informativo! Error en la página web para que los visitantes aterricen.
Abra un editor de texto, guarde el archivo como “shorelinesurfteam”.html ” e introduce el siguiente código HTML. Guarde el archivo de nuevo cuando haya terminado.
<html><head>
<style type=text/css>
</style></head>
<body>
</body></html>
para ayudar A aquellos que han aterrizado en este “inexistente” de la página, usted puede agregar un poco de información útil para guiarlos en el camino correcto. Quizás agregue alguna información sobre por qué la página ya no existe. Agregue algo como esto en el HTML. No dude en copiar el siguiente código y volver a guardar su archivo 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>
La siguiente ilustración identifica el texto que agregamos para que la página sea más informativa.
Para perforar la fuente de texto, agreguemos un estilo. Copie el siguiente código y vuelva a guardar su archivo 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>
Añadir una imagen y cambiar su color de texto personalizado para un hex de color si desea así añadiendo el código HTML para hacer referencia a la imagen. La imagen también puede ir a su directorio raíz.
!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>
Paso 2: indicar al Servidor para Uso HTML 404! Página de error
Crear un “.archivo htaccess. Este archivo de texto sirve para transmitir instrucciones al servidor.
Puede que ya haya un .archivo htaccess en la carpeta raíz de su espacio de alojamiento web. Si lo hay, descárguelo y enmiéndelo. Puede ser un archivo oculto. Si es así, es posible que deba ajustar la configuración de su servidor para que pueda ver este archivo.
En este “.archivo htaccess ” necesitará agregar esta línea:
ErrorDocument 404 / equipo de transporte de líneas costeras.html
Esto es todo lo que necesitas añadir. No es necesario añadir ningún código HTML.
Lo que esto hace es decirle al servidor que cuando encuentre un error 404, debe cargar el equipo de shorelinesurfteam.archivo html en la carpeta raíz.
Paso 3: Guardar .Archivo htaccess al directorio raíz
Guarde su “.archivo htaccess ” y subirlo a la carpeta raíz de su sitio web. Cuando el servidor encuentre un error no encontrado, se mostrará su página de error.
Ahora, cuando un visitante encuentra la página web (según nuestro código anterior)
En lugar de ver esto:
Verán la siguiente página de error más informativa y amigable que ha creado.
Para que el texto verde destaque más, puede agregar un elemento div con un fondo de color como tal:
<html>
<cabeza>
<style type=text/css>
p {
color: #0ecc8a;
font-weight: 900;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
}
div {
background-color: gris;
}
</estilo>
</la cabeza>
<cuerpo>
<a href=”#”><img src=”sitio.jpg”></a>
<div>
<p>Esta era una página web para una organización que solía existir. Esta organización ya no existe, ya que ha sido reemplazada por una nueva organización para enseñar a los niños surfistas los valores y el amor por el océano. El nuevo sitio es: https://www.pleasurepointsurfclub.com/
<br><br>
Si usted llegó a esta página por error, intente comprobar la URL en su navegador web.</p>
</div>
</body>
</html>
Esto producirá lo siguiente:
Ahora, puede ser tan artístico como desee para crear su 404 elegante e informativo.página html. Siempre tenga en cuenta al visitante de la página para mejorar su experiencia.
Consulte las Familias de fuentes HTML para aprender a mejorar su texto, y también consulte el Tutorial de fondo CSS para aprender a mejorar el fondo de su página web.
¿A dónde seguir?
Esta introducción al error de página 404 debería proporcionar un punto de partida para una mayor investigación sobre la administración de páginas web y los ilimitados aspectos creativos que ofrece HTML. En los próximos blogs, podrás explorar otras áreas del diseño HTML. Siga inspirándose, explore más y profundice en el mundo del diseño web.
Inscríbase en nuestro programa de Introducción a la programación de Nanodegree hoy mismo!
Empezar A Aprender
Leave a Reply