Transição de Páginas HTML

Hoje falaremos de algo simples, porém essencial para páginas Web, que são as transições entre páginas.

Hoje iremos aprender a fazer transições entre páginas, pois em um post mais a frente iremos necessitar desta função para que possamos deixar a página mais dinâmica e organizada.

Como sabemos há varias formas com que podemos fazer transições entre páginas, onde podemos fazer essa transições clicando em textos, botões e até imagens

Para iniciarmos primeiramente devemos criar dois arquivos HTML, para que fique mais organizado vamos criar os arquivos com nome: "pagina1.html" e "pagina2.html". Estou informando nomes para que fique mais organizado entre o meu exemplo e o que vocês estarão fazendo, porém caso queiram nomes diferentes, podem ficar a vontade para troca-ló.

Todos os dois arquivos devem receber a estrutura básica do HTML, que já foi informado em outro post, você pode conferir clicando aqui.

Após adicionar a estrutura básica, vamos da inicio ao link entre as duas páginas, para isso devemos saber onde se encontra os dois arquivos. Eles podem se encontrarem na mesma pasta, assim como pode está em paginas diferentes, isso não é um problema já que podemos direcionar para pastas diferentes.

Para que possamos fazer link entre duas páginas pelo texto, devemos utilizar a tag "<a>", ela nos serve para essa exata função que é passar um link para outra página.

Podemos fazer isso desta forma:

 <a href="[arquivo]">[text]</a>

Vamos fazer o seguinte, vamos adicionar a cada página um titulo para que possamos identificar cada uma delas.

Para isso devemos utilizar o tag "<h[número]>", esse "número" vai de 1 há 7, quanto maior o número, menor será o tamanho da fonte do texto que estará envolvido na tag.

O código HTML ficará assim:

Obs: Esse código é do arquivo "página1.html" o que difere ele do do outro é apenas que a numeração é 2(dois), então onde tiver o número 1(um), você deverá colocar 2(dois).

Eu estou usando a tag "<a>", nesse caso eu indico que o arquivo "pagina2.html" se encontra na mesma pasta que o "pagina1.html". Posso observar isso no lindo do "href", onde eu passo apenas o nome do arquivo, caso o ele tivesse em outra pasta eu deveria informar qual a pasta.

Essa especificação fica da seguinte forma:

<a href="[pasta]/[nomearquivo]">[texto]<a>

Algo importando que se deve ter atenção é que você deverá informar a extensão do arquivo juntamente com o nome nele.

Você pode esta abrindo a página pelo arquivo HTML e fazendo as transições clicando nos textos com links.

A página ficará desta forma:

Para colocar link em imagem devemos primeiro ter uma imagem a qual iremos colocar na página, escolha qualquer uma do seu gosto.

Agora devemos primeiro colocar a tag "<a>" e colocar o endereço para onde você quer que ela te direcione, por exemplo o Google. para direcionar para o Google, basta colocar o link do site no "href".

Ficará da seguinte forma:

<a href="http://www.google.com.br"><a>

Logo após, no meu da tag "<a>" devemos colocar a tag "<img>" ela é a tag responsável por colocar a imagem em sua página.

Para isso vamos buscar uma imagem do google.

Após ter a imagem coloque ela onde quiser, lembrando que você deverá informar onde ela deve está, de preferencia coloque-a na mesma pasta onde se encontram os arquivos HTML.

Com isso vamos colocar da seguinte forma:

<a href="http://www.google.com.br" target="_blank">

<img  alt="Google" src="google.jpg" width="300" height="200">

</a>

O que podemos ver de novo é o "target", ele tem duas função a "_blank" e a "_self", a "_blank" é uma função que faz com que ao clicar no lugar indicado, ela irá abrir sua página em outra aba, já o  "_self" é o oposto, ele fará com que a página atual seja atualizada para a nova página. O "alt" diz que quando o mouse estiver posicionado em cima da imagem, será exibido no nome "Google", já o "src" é o responsável nesse caso em informar onde se encontra a sua imagem, ele que irá pegar sua imagem, e o "width" e "height" são responsáveis respectivamente pela largura e altura que a imagem terá, com eles você terá controle sobre a redimencionação da imagem, caso não coloque-os a imagem terá a sua redimencionação padrão.

E após isso você terá por exemplo a seguinte tela:

Clicando na imagem você irá ser direcionado a página do Google.

Esses são exemplos de como podemos direcionar de uma página para outra em HTML. E assim finalizamos a parte de transições de páginas em HTML. Continuem ligados no TURIMLAB para mais posts sobre HTML e tudo sobre tecnologia.

Dicas, sugestões e dúvidas podem colocar nos comentários!