Links internos e Páginas em um mesmo diretório

No decorrer de nosso curso de HTML, sempre que aprendermos algo vamos colocar esses conhecimentos em prática para criar sites interessantes e realmente úteis, afinal, ninguém gosta só de teoria.
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.

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ório
Uma 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".

4 comentários:

luciano disse...

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?

Venda Direta disse...

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.

Anônimo disse...

No mac so funcionou colocando o endereco completo dos 2 arquivos. Os 2 exercícios funcionaram.

Anônimo disse...

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.