Criando um HTML 404! Erro página da Web
pode haver muitas razões pelas quais um usuário não pode obter acesso a um site. Um deles é conhecido como um 404! erro. Simplesmente um HTML 404! mensagem de erro é um código de status do Hypertext Transfer Protocol (HTTP) indicando que o servidor não conseguiu encontrar o site solicitado. Em outras palavras, seu navegador da web pode se conectar ao servidor, mas a página específica que você está tentando acessar não pode ser acessada. Neste tutorial, construiremos uma página da web de erro HTML 404 para personalizar o que o visitante vê quando chega lá. Também usaremos alguns CSS para aprimorar ainda mais a página.
o 404! Erro
por que o 404! Erro HTML aparece
quando um HTTP 404 aparece na tela, isso significa que, embora o servidor esteja acessível, a página específica que você está procurando não é. A página da web está quebrada ou não existe mais. O código de erro 404 pode aparecer em qualquer navegador, independentemente do tipo de navegador que você está usando.
existem várias razões pelas quais você pode estar recebendo um código HTTP 404:
- um gatilho típico para uma mensagem de erro 404 é quando a página foi excluída do site.
- a página foi movida para outro URL e o redirecionamento foi feito incorretamente.
- você inseriu um endereço de URL incorreto.
- embora isso aconteça muito raramente, às vezes o servidor funciona mal.
- o nome de domínio inserido não existe mais.
infelizmente, links quebrados são frequentemente deixados por longos períodos de tempo após a Página ter sido excluída ou movida. Mesmo quando os proprietários da web mantêm seus sites, às vezes o proprietário pode excluir o site ou alterar o nome do site. Isso significa que quando alguém clicar em um link “antigo”, ele não poderá mais encontrar esse site. Infelizmente, devido a muitas pessoas colocando URLS para sites em todo o lugar, em última análise, haverá links que realmente se ligam a lugar nenhum.
é comum que os proprietários de sites não verifiquem seus links externos regularmente, o que leva os usuários a tentar acessar um link morto. A manutenção da Web é essencial por esse motivo.
crie uma página da web HTML” página não encontrada ”
se um visitante do seu site atingir uma página da web antiga e inexistente, o servidor que hospeda esse site mostrará um erro “404” que basicamente diz que a página não pode ser encontrada. Em vez de permitir que o servidor mostre uma página de erro sem graça e padrão, você pode criar uma delas e ser tão criativo quanto quiser com ela.
vamos pular para o primeiro passo do nosso tutorial.Passo 1: Crie uma página web de destino HTML
vamos começar simplesmente criando uma página HTML básica. Esta será a base para criar um 404 mais emocionante e informativo! Página da web de erro para os visitantes pousarem.
abra um editor de texto, Salve o arquivo como “shorelinesurfteam.html ” e coloque o seguinte código HTML. Salve seu arquivo novamente quando terminar.
<html><head>
<style type=text/css>
</style></head>
<body>
</body></html>
Para ajudar aqueles que acessaram este “não-existente”, na página, você pode adicionar algumas informações úteis para orientá-los no caminho certo. Talvez adicione algumas informações sobre por que a página não existe mais. Adicione algo assim ao HTML. Sinta-se à vontade para copiar o seguinte código e salvar novamente seu arquivo 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>
a ilustração A seguir identifica o texto adicionado para tornar a página mais informativa.
para perfurar a fonte do texto, vamos adicionar um estilo. Copie o seguinte código e salve novamente seu arquivo 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>
Adicionar uma imagem e mudar a sua cor de texto para um personalizado de cores hexadecimais se você quiser, assim adicionando o código HTML a referência a imagem. A imagem pode ir em seu diretório raiz também.
!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>
Passo 2: Diga o Servidor para Utilizar O HTML 404! Página de erro
criar um “.arquivo “htaccess”. Este arquivo de texto serve para transmitir instruções ao servidor.
pode já haver um .arquivo htaccess na pasta raiz do seu espaço de hospedagem na web. Se houver, faça o download e altere isso. Pode ser um arquivo oculto. Nesse caso, talvez seja necessário ajustar as configurações do servidor para que você possa visualizar este arquivo.
neste”.htaccess” arquivo, você precisará adicionar esta linha:
ErrorDocument 404 /shorelinesurfteam.html
isso é tudo que você precisa adicionar. Você não precisa adicionar nenhum código HTML.
o que isso faz é dizer ao servidor que quando ele encontra um erro 404, ele deve carregar o shorelinesurfteam.arquivo html na pasta raiz.
Passo 3: Salvar .arquivo htaccess para o diretório raiz
Salve seu “.htaccess ” arquivo e enviá-lo para a pasta raiz do seu site. Quando o servidor encontrar um erro não encontrado, sua página de erro será exibida.
Agora, quando um visitante encontra a página da web (por nosso código acima)
em Vez de ver isso:
Eles vão ver a seguir mais informativo e página de erro amigáveis que você criou.
para fazer o texto verde se destacar mais, você pode adicionar um elemento div com um fundo de cor como tal:
<html>
<head>
<style type=text/css>
p {
color: #0ecc8a;
font-weight: 900;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
}
div {
plano de fundo-cor: cinza;
}
</estilo>
</cabeça>
< > corpo>
<a href=”#”><img src=”site.jpg”></a>
<div>
<p>Esta foi uma página da web para uma organização que existia. Essa organização não existe mais, pois foi substituída por uma nova organização para ensinar às crianças do surf os valores e o amor pelo oceano. O novo site é: https://www.pleasurepointsurfclub.com/
<br>< br >
se você encontrou esta página por engano, tente verificar o URL em seu navegador da web.</p>
</div>
</body>
</html>
Isto irá produzir o seguinte:
Agora, você pode ser tão artístico como você gostaria de criar a sua fantasia, informativo 404.página html. Sempre tenha o visitante na página em mente para aprimorar sua experiência.
veja as famílias de fontes HTML para aprender a aprimorar seu texto e também Confira o tutorial de fundo CSS para aprender como aprimorar o plano de fundo da sua página da web.
onde a seguir?
esta introdução ao erro de 404 páginas deve fornecer um ponto de partida para uma investigação mais aprofundada sobre o gerenciamento de páginas da web e os aspectos criativos ilimitados que o HTML oferece. Nos próximos blogs, você poderá explorar outras áreas do design HTML. Continue a se inspirar, explore mais e mergulhe mais fundo no mundo do web design.
Inscreva-se em nossa introdução ao programa Nanodegree de programação hoje!
Começar A Aprender
Leave a Reply