Minicursos - HTML

Links


Links são as ligações entre as páginas da Internet. Quando se clica em algum texto ou imagem e uma nova página é aberta, isso só foi possível por existir, no local do clique, um link. Os links em HTML são criados a partir da tag <a> e seu par </a>, mas assim como a tag <img>, ela precisa de outros parâmetros. Vamos ver na prática como isso é feito. Vamos criar um pequeno parágrafo e, dentro dele um link para o site www.contembits.com.br.

<p> Para visitar o site Contém Bits, clique <a href="http://www.contembits.com"> aqui </a></p>

Criei um parágrafo simples e dentro dele inseri um texto, porém, entre a palavra ‘aqui’, eu inseri as tags <a> e </a> para criar o link. O parâmetro href está identificando para onde o navegador será levado quando o usuário clicar sobre o link, e a palavra aqui será o elo entre a página atual e o site www.contembits.com.

Parece complicado, mas não é. Basta pensar que o navegador precisa saber para onde ir, e isso é definido como valor do atributo href, dentro da tag <a>. Depois é preciso que se defina o que é que será exibido na página e que, quando clicado, levará o usuário até esse endereço. No caso acima é a palavra “aqui”. Vejamos na prática como ficaria esse parágrafo.

Tags HTML <a>

Vejam que somente a palavra “aqui” é um link para o endereço http://www.contembits.com.br.

É mais simples do que parece! Nesse caso criamos um link com uma página externa, mas poderíamos ter criado para outro arquivo interno. Vejam o código abaixo:

<h2> Sejam bem vindos, visitantes! </h2>

<p> Caso queiram visitar nossa página de produtos, basta que vocês cliquem <a href="produtos.html"> aqui </a></p>

Essa página é exibida assim:

Tags HTML <a>

Notem o destaque para o endereço do link no canto direito inferior. Ele leva para o arquivo produtos.html, conforme definimos no valor do atributo href.

Aproveitando este exemplo, vale ressaltar que na tag acima estou supondo que o arquivo produtos.html está na mesma pasta (diretório) que o arquivo HTML que estou editando. Se por acaso quisesse que o link abrisse um arquivo de outro diretório, devo especifica-lo dentro da tag. Vamos imaginar que o arquivo produtos.html estivesse no diretório “vendas”. Nossa tag ficaria da seguinte forma:

<p> Caso queiram visitar nossa página de produtos, basta que vocês cliquem <a href="vendas/produtos.html"> aqui </a></p>

Agora o navegador sabe que deve procurar o arquivo produtos.html dentro do diretório “vendas” e não mais no mesmo diretório do arquivo onde esse link está contido.

Muito bem, com isso aprendemos a chamar uma página contida em um diretório, que é, na verdade, um subdiretório de onde nossa página está, mas imaginemos a seguinte estrutura:

Tags HTML <a>

Aqui temos uma pasta chamada Teste, que contém um arquivo chamado Inicial.html e um subdiretório chamado Vendas que contém um arquivo chamado produtos.html. E se nós quisermos criar um link do arquivo produtos.html para chamar o Inicial.html, como podemos fazer isso, já que teríamos que “voltar” um diretório? Bem, é fácil, vejam como ficaria nossa tag:

<p> Caso queiram retornar à página inicial, basta clicarem <a href="../produtos.html"> aqui </a></p>

Percebam que inseri o trecho “../”, que significa retornar um diretório. Ou seja, agora o navegador sabe que o arquivo produtos.html está no diretório-pai em relação ao atual, portanto ele precisa voltar um diretório para encontrar o arquivo. E se quiséssemos voltar dois diretórios? Fácil também!

<p> Caso queiram retornar à página inicial, basta clicarem <a href="../../produtos.html"> aqui </a></p>

Inseri o trecho “../” duas vezes, para dizer ao navegador que deve voltar dois diretórios. É bastante simples!

Vamos tornar as coisas mais interessantes: Vamos imaginar a situação onde estejamos dentro da página produtos e vamos criar um link para a página Inicial.html, que está um diretório acima, porém queremos que o link para isso seja uma imagem (chamada de home.png) e não mais o texto “aqui”.

Nossa tag ficará da seguinte forma:

<p> Caso queiram retornar à página inicial, basta clicarem na imagem: <a href="../Inicial.html"><img src="Home.png" width="119" height="121" alt="Página Inicial" /> </a></p>

Nossa página ficará assim:

Tags HTML <a>

Percebam que o que aciona o link agora é a imagem home.png e não mais uma palavra. Isso foi possível graças a inserção da tag <img> dentro da tag <a>, dessa forma:

<a href="../Inicial.html"><img src="Home.png" width="119" height="121" alt="Página Inicial" /> </a>

E reparem, no canto direito inferior, que o link está, de fato, chamando a página Inicial.htm, que está no diretório-pai em relação ao diretório “Vendas”. Isso foi possível devido ao trecho “../” inserido antes do nome do arquivo que estamos chamando.

Parece complicado em um primeiro contato, mas depois fica tudo muito intuitivo, não se preocupe se esse for o seu primeiro contato com links HTML e as coisas ainda estiverem confusas. Logo vai ficar muito claro!

Outro parâmetro interessante para ser comentado é o “target”, que também é inserido na tag <a>. Na verdade esse parâmetro comporta alguns valores, mas com exceção de um deles, o restante está ultrapassado e não são mais utilizados. Sendo assim, vou falar somente do que ainda tem utilidade, que é o target=”_blank”. Se inserirmos esse trecho de código em nossa tag, o link será aberto em uma nova janela, preservando a janela atual aberta. Por padrão os links são abertos sempre na janela atual.

Portanto, se por alguma razão você quiser abrir determinada página em outra janela, basta se lembrar do target=”_blank”.

No nosso último exemplo o tag, caso quiséssemos abrir em nova janela, ficaria:

<p> Caso queiram retornar à página inicial, basta clicarem na imagem: <a href="../Inicial.html"><img src="Home.png" width="119" height="121" alt="Página Inicial" target=”_blank”/> </a></p>

Desse modo, ao clicar sobre a imagem Home.png, uma nova janela seria aberta com o conteúdo de Inicial.html.

E, por fim, vamos ver o último tipo de link existente, que é o link para dentro da própria página. Esse tipo de link não parece, mas é muito útil. Você já deve ter navegado em alguma página extensa e, ao chegar ao seu final encontrou um link como “Retornar ao topo”. Isso é um link interno, ou seja, você não é direcionado para uma nova página, mas para outro local dentro da página em que já está. É bastante fácil fazê-lo. No início de sua página, insira a seguinte tag onde quer definir como sendo o topo.

<a name="Topo">Topo</a>

Depois, no final da página, insira a tag:

<a href="#Topo">Retornar ao topo</a>

A tag <a name=”Topo”> está apenas efetuando a marcação de onde será o ponto chamado de "Topo", ou seja, está nomeando determinada região com esse nome. Já a tag <a href=#> faz a ligação, praticamente da mesma forma como já fizemos chamando outras páginas. A única diferença está na presença do sinal de #, que diz para o navegador que esse link é interno. Esse tipo de recurso é muito útil caso queira criar um índice para capítulos presentes na página.

No próximo tópico falarei sobre os elementos DIV e SPAN, fundamentais na criação de qualquer site.



Algumas notícias

As memórias DDR5 estão chegando e trarão muitas melhorias

A próxima geração de memórias RAM já possui especificações definidas e promete grande melhoria em relação às atuais DDR4. E o mais importante: mesmo com desempenho bastante superior, elas consumirão menos energia. A tensão de trabalho das memórias DDR5 será de apenas 1.1V contra os 1.2V das atu...

Ler Notícia Completa

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

Ler Notícia Completa

Sites e vídeos sem propagandas? Sim, é possível através da exploração de uma falha!

Seguramente você já se deparou com sites que bloqueiam o conteúdo da página e te obrigam a assinar determinado serviço para ler o conteúdo, certo? Ou foi tentar assistir aquele vídeo e as propagandas em tela cheia não pararam de surgir. Bem, todos já nos deparamos com isso, no entanto, um bug de...

Ler Notícia Completa

Inteligência Artificial cria antibiótico super potente

Pesquisadores do MIT (EUA) identificaram um novo e poderoso composto antibiótico usando um algoritmo de aprendizado de máquina, uma técnica de inteligência artificial. Em testes de laboratório, a droga matou algumas das bactérias causadoras de doenças mais problemáticas do mundo, incluindo algu...

Ler Notícia Completa

Google lança programa para capacitar profissionais brasileiros e com direito a bolsas

O Google iniciou nesta terça-feira (17) o Certificado Profissional de Suporte em TI para brasileiros. Trata-se de um curso desenvolvido pela gigante de tecnologia em parceria com a Coursera. Inicialmente, o módulo de ensino foi anunciado a um valor de US$ 39 por mês. Entretanto, sofreu uma redu...

Ler Notícia Completa

Intel Core i9-9900KS é um monstro com frequência de 5GHz em todos os núcleos

A Intel é uma das empresas presentes na Computex 2019, a maior feira de hardware da Ásia. E a empresa começou a esquentar os motores antes mesmo do início das conferências, exibindo um processador que não está para brincadeira: o Intel Core i9-9900KS, uma edição especial e ainda mais turbinada do...

Ler Notícia Completa

Como conversar com alguém no WhatsApp sem adicionar o número aos contatos

Este processo pode, à primeira vista, parecer um pouco confuso para usuários que não são muito experientes usando seu smartphone. Mas uma vez que você conclua o processo , vai entender o método e parecerá mais fácil. 1. Abra o seu navegador preferido no seu smartphone e digite o seguinte link na...

Ler Notícia Completa
Você gostará destes vídeos!