< meta > tag refresh - Como redirecionar ou recarregar um site em HTML

Conforme vamos avançando em nosso curso de HTML, vamos ensinando algumas coisas bacanas e úteis, para que vocês possam aprender não só de maneira teórica (somente lendo), pois é chato e cansativo. Vamos mostrando, aos poucos, como fazer alguns efeitos e sites interessantes, como o efeito marquee, que mostra um texto deslizando em um site.

Nesse simples e curto tutorial, vamos ensinar como redirecionar uma página para outra, somente para você ver como criar sites é algo simples e bacana de se fazer.
Para isso, vamos usar nossos conhecimentos sobre as <meta> tags.




O redirecionamento de sites em HTML

Certamente você já entrou em algum site que, automaticamente, te levou pra outro.
Isso pode acontecer quando um site muda de endereço, para exibir propaganda enquanto o usuário espera ou mesmo pra enganar os usuários, mas é uma coisa bem comum.

O nome disso é redirecionamento, e há várias maneiras de se fazer.
Porém, aqui em nosso curso online de HTML, embora ainda estejamos na seção básica, vamos ensinar como fazer isso de uma maneira bem simples, e usando os conhecimentos que estudamos até agora.
Especificamente, os conhecimentos sobre <meta> tags.

Como redirecionar usando a meta tag refresh

Refresh, em inglês, quer dizer recarregar.
É uma técnica muito usada em HTML, principalmente por sites que ficam recarregando seu conteúdo de tempos em tempos, como é o caso de sites de notícias, como o da globo.com, pois por ser um site de notícia, seu conteúdo é atualizado à todo instante.

Isso é possível através do parâmetro http-equiv, da <meta> tag e pode ser usado para redirecionar também.
A sintaxe HTML é bem simples, e é a seguinte:

<meta http-equiv="refresh" content="TEMPOEM_SEGUNDOS; http://site_para_onde_a_pagina_vai">

(PS: Caso não funcione, experimente substituir ";" por ",")

Ou seja, usamos http-equiv="refresh" para dizer ao navegador que vamos recarregar a página, ou redirecionar.
E através do atributo 'content', informamos o tempo que o navegador deve esperar até efetuar o carregamento/redirecionamento e dizemos a URL destino, ou seja, para onde o navegador deve levar a pessoa.

Exemplo de redirecionamento em HTML:
Vamos criar um site, baseado em tudo que estudamos até o momento em nosso curso de HTML, que redireciona o usuário para o site HTML Progressivo, após 5 segundos. Lembrando que as meta tags ficam aninhadas dentro da tag head, que está dentro da tag HTML, nosso código é o seguinte:
<!DOCTYPE html>
 
<html>
   <head>
      <meta name="description" content="Curso de HTML, CSS, SEO e Monetização! Online completo e gratuito">
      <title> Redirecionando para o site HTML Progressivo - Curso de HTML completo, online e gratuito </title>
      <meta http-equiv="refresh" content="5; http://www.htmlprogressivo.net">
   </head>
 
Voce sera redirecionado ao site HTML Progressivo dentro de 5 segundos...
</html>
Salve esse código no seu editor de texto/ editor HTML com a extensão .html e execute.
Irá aparecer a mensagem "Você será redirecionado...", e dentro de 5 segundos você verá que realmente foi redirecionado para o nosso site.

Simples, não?
Para fazer o recarregamento de uma página, basta você colocar o endereço desse próprio arquivo .html
Por exemplo, se ele está na pasta "C:\" e se chama "site.html", sua URL será: "C:\site.html"

Exercício de HTML:
Clique com o botão direito em cima da foto do Sérgio Malandro e copie sua url.
Escolha algum amigo(a), namorado(a) ou parente seu.
Em seguida crie um site que deve mostrar uma mensagem para essa pessoa, algo como "preciso te contar um segredo...eu te amo".

Em seguida, esse site deve redirecionar a pessoa para a foto do Sérgio Malandro.
Crie um título, use as tags head, html e faça a indentação correta de seu código.

Curso HTML Progressivo - completo, online e grátis

4 comentários:

Gleison Elias disse...

Ótimo!

Usei em uma página minha que precisa ser atualizada constantemente....

Só que..... tive que usar virgula ( , ) em vez de ponto-virgula ( ; )....

Anônimo disse...

Olá, eu queria saber se tem como colocar este link, corretamente no editor de sites wix, sei que é meio difícil, mas, a wix, tem um botão apropriado para html, mas eu já testei e deu corretamente quando teste pelo .html, mas, o que eu não entendo é que no editor, só depois de vários "segundos" Eu não sei quantos", ele redireciona, sozinho. '-'
Me ajude! ^ ^ Agradeço.

Anônimo disse...

o correto é usar assim url=http://www.htmlprogressivo.net"

Anônimo disse...

eu posso usar meta para redirecionar para uma pagina mobile ao identificar que o usuário esta acessando a página através do celular? obrigado