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

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa

EUA aprovam 'droga viva', 1ª terapia contra câncer que reestrutura sistema imunológico do paciente

Os Estados Unidos aprovaram o primeiro tratamento que reestrutura o sistema imunológico do paciente para atacar o câncer. A agência reguladora de medicamentos do país - a FDA - diz que a decisão foi um momento "histórico" e que a medicina agora "entra em uma nova fronteira". A companhia Novar...

Ler Notícia Completa

Cientistas norte-americanos criaram anticorpo capaz de atacar 99% das variações de HIV

Um grupo formado por pesquisadores do Instituto Nacional de Saúde (NIH), dos Estados Unidos, e da empresa farmacêutica Sanofi criaram em laboratório anticorpos superdesenvolvidos capazes de atacar 99% das cepas de HIV. O feito é ainda mais significativo por ser capaz até mesmo de prevenir a infec...

Ler Notícia Completa

Facebook investirá mais de US$ 1 bilhão em conteúdo original em 2018

Anunciada em agosto, a plataforma original de vídeos do Facebook, Watch, parece ser a grande aposta de Mark Zuckerberg para o ano que vem. De acordo com o TechCrunch, a empresa deve investir US$ 1 bilhão para criar e incentivar iniciativas voltadas para a produção de conteúdo audiovisual exclu...

Ler Notícia Completa

Software da Adobe é capaz de manipular gravações de voz e criar frases com perfeição

O software se chama Voco, foi desenvolvido pela Adobe (a mesma criadora do Photoshop) e permite manipular gravações de voz com uma precisão inédita, inclusive criando frases que a pessoa não disse. Na demonstração do app, um técnico forjou uma gravação em que um homem dizia “eu beijei a Jordan...

Ler Notícia Completa

Games nos Jogos Olímpicos de 2024. Será?

Sabe aquela discussão sobre os jogos eletrônicos poderem ou não ser considerados esportes? Pois o comitê responsável pela realização dos Jogos Olímpicos de 2024 acaba de colocar mais um pouco de lenha nesta fogueira. Isso aconteceu através da divulgação de que eles gostariam de incorporar torne...

Ler Notícia Completa