O HTML Progressivo agora faz parte do Programação Progressiva!
Este conteúdo foi atualizado e movido para o nosso novo endereço.
Redirecionando para: Clique aqui se não for redirecionado
Vamos fazer, e ensinar você a fazer, e ver com seus próprios olhos os resultados de seus estudos em HTML.
Nessa aula, vamos usar o que aprendemos sobre links em HTML e sobre redirecionamento de sites, para criar duas páginas e fazer elas ficarem redirecionando uma para outra, indefinidamente.
Vamos ver que links não se resumem somente a endereços de internet e aprenderemos uma importante lição sobre arquivos que estão em um mesmo diretório.
Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:
Curso de Webmaster (criação de sites HTML) online com certificado
Links são endereços, não só de sites da internet
Quando falamos em links, sempre associamos a sites existentes na internet.Mas na verdade, os links tem um sentido mais geral, eles se referem a endereços. Como exemplo disto, neste tutorial de nosso curso, vamos usar endereços internos de seu computador na <meta> tag refresh, ao invés de endereços de internet, como havíamos feito na aula sobre essa meta tag.
Se você usa o Windows, o endereço de seu disco HD é C:\
E a o endereço da pasta principal é C:\Windows
Se você usa Linux, o endereço de sua pasta é: /home/nome
E o endereço de sua pasta de downloads é: /home/nome/Download
Esses são endereços, como outro qualquer, como http://www.htmlprogressivo.net também é um endereço.
Páginas HTML em um mesmo diretório
Vamos usar endereços internos, de seu computador, para fazer o exemplo deste tutorial de HTML.No caso, vamos criar duas páginas de em HTML, e vamos deixar elas na mesma pasta, ou seja, no mesmo diretório.
Quando dois elementos (imagem, som, vídeo, página) estão em um mesmo diretório, não precisamos escrever toda a URL, só o nome do arquivo.
Por exemplo, vamos supor que as páginas HTML.html e Progressivo.html estejam na pasta C:\ de seu computador.
Uma pode ser referir a outra com os endereços "HTML.hml" e "Progressivo.html", ao invés de "C:\HTML.html" e "C:\Progressivo.html".
Suponha que existam duas páginas:
www.htmlprogressivo.net/curso.html
www.htmlprogressivo.net/tutorial.html
Se quisermos linkar uma página a outra, podemos usar somente os endereços "curso.html" e "tutorial.html", pois ambos arquivos de HTML estão no mesmo diretório (htprogressivo.net/).
Exemplos de sites em HTML
Tendo estudado essa teoria, vamos criar duas páginas para exercitar esses conceitos de links como endereços internos de sua máquina e sobre o uso de páginas de HTML em um mesmo diretórioUma página se chamará "Ping.html" e a outra se chamará "Pong.html".
O conteúdo delas é bem simples, elas vão aguardar 1 segundo e vão, automaticamente, redirecionar para a outra página.
Vamos usar a meta tag refresh para isso.
Os códigos HTML das páginas são:
Ping.html
<!DOCTYPE html> <html> <head> <title> Ping </title> <meta http-equiv="refresh" content="1; Pong.html"> </head> Ping... </html>
Pong.html
<!DOCTYPE html> <html> <head> <title> Pong </title> <meta http-equiv="refresh" content="1; Ping.html"> </head> ...Pong </html>Note que a url da meta tag refresh é somente o nome do arquivo .html, pois eles estão no mesmo diretório.
Rode qualquer um dos arquivos que você verá o resultado:
Um ping-pong, onde uma página fica jogando pra outra, infinitamente...
Exercício sobre páginas de um mesmo diretório:
Substitua "Ping.html" e "Pong.html" pelo seus endereços completos da localização deles em seu computador (por exemplo, C:\Curso_de_HTML\Basico\Ping.html)Exercício 2 de HTML:
Dentro do diretório onde esses dois sites estão, crie um diretório chamado teste.Agora cole o site Pong.html dentro desta pasta 'teste'.
Agora altere o código HTML de modo a continuar o Ping-Pong infinito. Você não precisa colocar o endereço completo dos arquivos, use "Ping.html" e "teste/Pong.html".