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".
5 comentários:
não consegui fazer o segundo exercício. quando a página vai para o pong o navegador tenta encontrar a página ping na pasta teste e ai fala que a página não foi encontrada. tentei de "tudo", até colocar o endereço completo no código da pagina pong ,mas não funcionou. Alguma ideia do que pode estar errado?
Luciano,
Você alterou os 2 arquivos HTML?
No Ping.html, na linha da meta tag:
... "Teste\Pong.html">"
...
** Muda a chamada do Pong.html
No Pong.html, na linha da meta tag:
... "..\Ping.html">"
...
** Também tem de alterar a "volta" porque o Ping.html já não esta mais no mesmo direitório do Pong.html.
No mac so funcionou colocando o endereco completo dos 2 arquivos. Os 2 exercícios funcionaram.
Façam assim: criem uma pasta com o nome tarefa
Coloquem a sua tarefa atual que já esta salva com o nome ping.html na pasta 'tarefa', criem um outro documento html e salvem como pong.html dentro da pasta tarefa. Elas ja estão na mesma pasta, então basta ir na ping.html e editar colocando o endereço do documento pong.html seguindo todas as regrinhas que estão escritas aqui. Não usem endereço completo tipo C:/usuario/documentos/... porque pode até funcionar, mas quando colocar o site no ar isso já nao vai mais funcionar, a nao ser que voces sigam a raiz de onde o documento se inicia até achar o caminho exato da outra página.
Olá, eu gostaria de saber como usar uma URL sem o ".html" para abrir uma página como por exemplo "www.meusite.com.br/url-para-abrir-uma-pagina/" sem ter que criar um "index.html" lá dentro saberia me dizer se isso é possível ou é uma "convenção" da web e "browser´s".
Postar um comentário