Links e imagens

Bem-vindo ao seu próximo passo no desenvolvimento web! Até agora, suas páginas web podem ter parecido simples documentos de texto. Hoje, vamos mudar isso. Os links são os recursos essenciais que de fato fazem da World Wide Web uma "web" (teia). Nesta lição, vamos aprender a conectar páginas umas às outras e a dar vida a elas com imagens.

Vamos lá!

Criando hyperlinks (a tag <a>)

Para criar um link em HTML, usamos o que chamamos de tag "âncora" (anchor), escrita como <a>. Sozinha, uma tag âncora não faz muita coisa, porque você precisa dizer ao navegador exatamente para onde o link deve levar.

Fazemos isso usando um atributo. Pense em um atributo como uma instrução especial dada dentro de uma tag HTML. Para links, o atributo obrigatório é o href, que significa hypertext reference (referência de hipertexto). O atributo href guarda o endereço web de destino.

Veja como você escreve um link de texto simples:

<a href="https://www.example.com">Visite o nosso site!</a>

Neste exemplo, o texto "Visite o nosso site!" se torna clicável, e o href diz ao navegador para onde levar o usuário.

Adicionando imagens (a tag <img>)

Os sites seriam bem chatos sem imagens. Para adicionar uma imagem, usamos a tag de imagem, escrita como <img>.

Diferentemente da tag âncora, a tag de imagem é "autofechável" (self-closing), o que também é conhecido como elemento vazio (void element). Isso significa que ela não envolve um texto, então não precisa de uma tag de fechamento </img>. Ela simplesmente coloca a imagem diretamente na página.

A tag <img> precisa de dois atributos muito importantes para funcionar corretamente:

• src (Source, ou origem): Isso diz ao navegador exatamente onde o arquivo de imagem está localizado.
• alt (texto alternativo): Esta é uma descrição escrita da imagem.

Por que o alt é tão incrivelmente importante? Você deve sempre incluir o atributo alt! Se a imagem quebrar ou demorar muito para carregar, o navegador vai exibir esse texto no lugar dela. Mais importante ainda, ele fornece acessibilidade essencial para o seu site. Usuários com deficiência visual dependem de softwares leitores de tela para ler as páginas web em voz alta, e o texto alt descreve a imagem para eles com segurança.

Veja como fica uma tag de imagem completa:

<img src="filhote.jpg" alt="Um filhote de golden retriever fofo brincando na grama.">

O grande conceito: caminhos absolutos vs. relativos

Quando você usa um atributo href ou src, está dando ao navegador um "caminho" para encontrar um arquivo específico. Existem dois tipos principais de caminhos, e entender a diferença é um grande marco para iniciantes!

Caminhos absolutos Pense em um caminho absoluto como um endereço postal completo. Um endereço postal real inclui o país, o estado, a cidade, a rua e o número da casa para localizar um ponto exato na Terra. Na web, um caminho absoluto sempre começa com um protocolo como https:// e inclui o nome de domínio completo do site. Você usa caminhos absolutos quando quer criar um link para sites completamente diferentes.

Caminhos relativos Pense em um caminho relativo como dar a alguém instruções a pé com base em onde você está parado no momento. Em vez de um endereço completo, você poderia apenas dizer: "vá para a sala ao lado" ou "suba um andar". Na web, os caminhos relativos são usados para criar links para arquivos ou imagens que ficam dentro da pasta do seu próprio projeto.

Por exemplo, se você tem uma imagem salva em uma pasta "images" bem ao lado da sua página web atual, você pode usar um caminho relativo assim:

<img src="./images/foto.jpg" alt="Um lindo pôr do sol.">

O ./ simplesmente diz ao navegador para começar a procurar na pasta atual em que você está.

Imagens clicáveis

Agora que você sabe como criar links e imagens, pode combiná-los! Se você quer que uma imagem funcione como um botão que leva o usuário a uma nova página, basta envolver a sua tag autofechável <img> dentro de uma tag <a>.

Aqui está um exemplo rápido de uma imagem clicável:

<a href="https://www.example.com">
  <img src="./images/botao.png" alt="Clique aqui para visitar nosso patrocinador.">
</a>

Resumo

Ótimo trabalho! Você desbloqueou a capacidade de conectar páginas web e exibir mídia. Vamos revisar os principais aprendizados:

• Hyperlinks: Use a tag <a> com um atributo href para criar links de texto.
• Imagens: Use a tag autofechável <img> com um atributo src para exibir imagens.
• Acessibilidade: Sempre inclua um texto alt descritivo nas suas imagens, por segurança e para os leitores de tela.
• Caminhos absolutos: Use endereços completos (https://...) para apontar para outros sites.
• Caminhos relativos: Use instruções locais (./...) para apontar para arquivos dentro da pasta do seu próprio projeto.
• Imagens clicáveis: Você pode tornar imagens clicáveis colocando um elemento <img> dentro de um elemento <a>.