Curso de HTML5, CSS e JavaScript

Aqui, você irá aprender 3 linguagens essenciais para criar páginas Web: HTML5, CSS e JavaScript.

Se você está começando, vou explicar de uma maneira bem grosseira: HTML5 é para colocar as coisas na página, CSS é para deixar bonito.
Ou seja, HTML5 separa os elementos da interface em seções, tabelas, formulários, parágrafos, etc., enquanto a linguagem CSS formata esses elementos com cores, bordas, espaçamento, etc.
A linguagem JavaScript detecta a interação do usuário e permite manipular os elementos da interface, aprimorando a experiência do usuário.

HTML5 - (hyper)links

Um hyperlink é usado para carregar uma nova página ou disparar uma ação (com JavaScript).
Inicialmente, vamos aprender a chamar outras páginas.

Tag <a>

Os principais atributos da tag <a> são:

  • href: indica a URL da página que será carregada.
  • target:opcional. Define onde a página será carregada (na mesma janela ou em uma nova janela, por exemplo).
  • name: usado para definir uma âncora em uma página (ver exemplo a seguir).

Para treinarmos, vamos a alguns exemplos passo-a-passo.

Exemplo 1: links entre páginas diferentes

Passo 1

Crie uma pasta em qualquer lugar do seu computador.
Se estiver usando uma IDE como o NetBeans, você pode criar um novo projeto e a IDE criará uma pasta para o seu projeto.

Passo 2

Crie um novo arquivo chamado index.html dentro da pasta (ou do projeto).

Passo 3

Dentro da tag <body> do seu arquivo index.html, insira o seguinte código:


<a href="novapagina.html">Link para a nova página</a>

Esse código criará um link dentro da página index.html, e esse link chamará a página novapagina.html.

Passo 4

Crie um novo arquivo chamado novapagina.html dentro da pasta (ou do projeto).

Passo 5

Dentro da tag <body> do seu arquivo novapagina.html, insira o seguinte código:


<p>Óia, não é que funciona mesmo?</p>
Passo 6

Para testar, localize o arquivo index.html na sua pasta e dê um duplo-clique para abri-lo com um navegador Web.
Em seguida, clique no link que será exibido na página. Ao clicar no link, a nova página será carregada

Exemplo 2: link na mesma página (âncora)

Passo 1

Crie uma pasta em qualquer lugar do seu computador.
Se estiver usando uma IDE como o NetBeans, você pode criar um novo projeto e a IDE criará uma pasta para o seu projeto.

Passo 2

Crie um novo arquivo chamado index.html dentro da pasta (ou do projeto).

Passo 3

Dentro da tag <body> do seu arquivo index.html, insira o seguinte código:


<a href="#rodape">Vai para o rodapé da página</a> <!--Link que chama a âncora "rodape"ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssz-->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="rodape"></a> <!--Define uma âncora-->
<p>Este texto está lá pra baixo</p>                

Esse código criará uma âncora com o nome rodape e criará um link dentro da página que chamará a âncora.
Isso é útil quando se deseja exibir uma parte específica da tela, sem que o usuário tenha que usar a barra de rolagem.
Observe que, para chamar uma âncora, deve usar o caracter # no atributo href do link.

Passo 4

Para testar, localize o arquivo index.html na sua pasta e dê um duplo-clique para abri-lo com um navegador Web.
Em seguida, clique no link que será exibido na página. Ao clicar no link, o texto do rodapé será exibido.

Exemplo 3: link para abrir uma nova janela

Para abrir uma nova janela, basta definir o atributo target com a opção _blank na tag <a>, como no exemplo abaixo:


<a href="novapagina.html" target="_blank">Link que abre uma nova aba ou janela do navegador</a>
Voltar ao Índice