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 especificá-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.



Notícias - Games

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa

Phil Spencer aprovou o Steam Deck rodando o xCloud

O chefe da divisão XBOX e vice presidente da divisão de jogos da Microsoft, Phil Spencer, recebeu um Steam Deck e passou uma semana testando o dispositivo da Valve. Nas palavras dele: “trata-se de um dispositivo muito legal. É interessante ter os jogos disponíveis em qualquer lu...

Ler Notícia Completa

Conheça o Playstation 2 portátil criado por um brasileiro

Claudio Adriano decidiu criar uma versão portátil do console Playstation 2, da Sony. Inspirado no Nintendo Switch, o console ficou pronto depois de 2 anos de trabalho e algumas interessantes adaptações. Partindo de uma placa-mãe de um PS2 Slim, Claudio fez os encaixes necessários para que a pla...

Ler Notícia Completa

Playstation 4 já vendeu mais de 116 milhões de unidades

Embora a nova geração de consoles já tenha chegado definitivamente, o PS4 ainda vem registrando bons números e ultrapassou a marca dos 116 milhões de aparelhos vendidos ao redor do mundo. Possivelmente a confirmação da Sony de que títulos bastante esperados, como o novo God Of War e Horizon Forb...

Ler Notícia Completa

Nintendo Switch supera Xbox 360 e PS3 em número de unidades vendidas

Em números divulgados nesta quinta-feira (05) a Nintendo confirmou a quantia de 89 milhões de unidades vendidas do seu console Switch, deixando para trás o Playstation 3, com 87 milhões de unidades e o Xbox 360, com 80 milhões. O próximo console na lista para ser ultrapassado é o Wii, também da...

Ler Notícia Completa

Far Cry 5 está de graça para todas as plataformas por tempo limitado

A Ubisoft liberou o game Far Cry 5 entre os dias 5 e 9 de agosto para todas as plataformas (PS4, PS5, Xbox One, Series X e Series S, Google Stadia e PC). A notícia é ótima, claro, mas ao contrário do que normalmente acontece, o jogo só poderá ser jogado gratuitamente até o dia 9 de agos...

Ler Notícia Completa

PS5 com SSDs não originais apresentam ótimo resultado

A última atualização do PS5 permite que se faça a expansão do armazenamento do console. Embora o aparelho exija características específicas para os dispositivos de expansão, como taxa de leitura de 5Gb/s, ele funciona surpreendentemente bem com SSDs de velocidades inferi...

Ler Notícia Completa

Tudo sobre o Luna, o novo serviço de streaming de jogos da Apple

Na última terça-feira a Amazon deu detalhes sobre seu serviço de streaming de jogos, o Luna. Trata-se de um serviço por assinatura, semelhante ao que faz o Netflix com filmes e séries. Com ele os jogos são trazidos para o seu dispositivo, seja uma TV, computador ou mesmo o iPhone, através da Int...

Ler Notícia Completa

The Last of Us Part II já é o maior lançamento do ano dentre todos os consoles

[sem spoilers] The Last of Us Part II agradou a muitos e desagradou a poucos, mas o fato é que a expectativa pelo lançamento do jogo era gigante! A primeira versão do jogo ganhou todos os prêmios possíveis e é considerada por quem o jogou como, no mínimo, um excelente título. Era inevitável, por...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!