Como Redirecionar uma Página HTML Automaticamente (Meta Refresh)
Conforme avançamos em nosso curso online de HTML, é hora de sair um pouco da teoria pura e começar a ver a mágica acontecer na tela.
Criar sites não precisa ser uma leitura chata e cansativa. Por isso, vamos começar a introduzir efeitos úteis e dinâmicos, como já fizemos no tutorial sobre como fazer um texto deslizar pela tela (efeito marquee).
Neste tutorial curto e prático, você vai aprender como redirecionar automaticamente o usuário de uma página para outra. Para isso, vamos utilizar os conhecimentos que acabamos de adquirir sobre o "cérebro" do site: as poderosas <meta> tags.
O que é o Redirecionamento de Sites?
Certamente você já acessou um link antigo e, de repente, a tela piscou e você foi levado para um endereço completamente novo, certo? Ou talvez tenha visto aquela clássica mensagem: "Se você não for redirecionado em 5 segundos, clique aqui."
Isso é o que chamamos de Redirecionamento. É uma técnica incrivelmente comum na internet, utilizada para:
- Enviar usuários para o novo endereço de um site que mudou de domínio.
- Exibir uma página de carregamento ou propaganda temporária.
- Atualizar páginas de notícias em tempo real (fazendo a página recarregar a si mesma).
Quer Entrar no Mercado de Trabalho?
Torne-se um Webmaster Profissional. Estude no seu ritmo, aprenda truques avançados de front-end e conquiste seu certificado.
Como redirecionar usando a meta tag "Refresh"
A palavra Refresh, em inglês, significa "atualizar" ou "recarregar". Através do atributo http-equiv da nossa meta tag, podemos dar uma ordem direta ao navegador do usuário.
A sintaxe HTML é simples e vai direto dentro da tag <head>:
Entendendo o código:
http-equiv="refresh": Avisa ao navegador que uma ação de recarregamento/redirecionamento vai acontecer.content="5; url=...": O número "5" é o tempo de espera em segundos. O link após o `url=` é o destino final.
Exemplo Prático: Código HTML de Redirecionamento
Vamos criar uma página de espera que, após 5 segundos, envia o usuário automaticamente para a página inicial do HTML Progressivo.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Redirecionando...</title>
<!-- A Mágica Acontece Aqui: -->
<meta http-equiv="refresh" content="5; url=http://www.htmlprogressivo.net">
</head>
<body style="text-align: center; font-family: Arial, sans-serif; margin-top: 50px;">
<h2>Aguarde um momento...</h2>
<p>Você será redirecionado ao site HTML Progressivo em 5 segundos.</p>
<p>Se nada acontecer, <a href="http://www.htmlprogressivo.net">clique aqui</a>.</p>
</body>
</html>Salve esse código no seu editor (Bloco de Notas, VS Code) com a extensão .html e abra no seu navegador. Conte até 5 e veja você mesmo viajando pela internet!
🤡 Exercício Prático: A Pegadinha do Redirecionamento
Hora de testar seus conhecimentos e pregar uma peça em um amigo(a) ou parente!
- Clique com o botão direito na imagem abaixo e selecione "Copiar endereço da imagem".
- Crie um arquivo HTML novo usando a estrutura básica que aprendemos (html, head, body).
- No corpo (body) do site, escreva uma mensagem curiosa, como: "Preciso te contar um segredo... espere 3 segundos."
- Use a tag
<meta refresh>para redirecionar a página exatamente para a URL da imagem que você copiou, após 3 segundos. - Mande o arquivo para sua vítima e espere a reação!
"Rá! Pegadinha do Webmaster!"
