Imagens em HTML: Aprenda a incorporar e estilizar com src, alt e tamanho

Introdução

As imagens são uma parte fundamental das páginas da web modernas, tornando o conteúdo mais envolvente e visualmente atraente. Em HTML, as imagens são incorporadas a um documento usando a tag <img>. Esta tag é poderosa e vem com vários atributos para controlar a origem, o tamanho e a acessibilidade da imagem.

Neste laboratório, você aprenderá como exibir uma imagem em uma página da web. Você começará inserindo uma imagem básica e, progressivamente, adicionará atributos para fornecer texto alternativo, definir suas dimensões, adicionar uma dica de ferramenta (tooltip) e, finalmente, transformá-la em um link clicável.

O ambiente foi pré-configurado com um arquivo index.html e um arquivo de imagem chamado labex.svg no diretório ~/project. Um servidor web também está em execução, para que você possa visualizar suas alterações em tempo real na aba "Web 8080".

Inserir a tag img com o atributo src para a origem da imagem

Nesta etapa, você aprenderá como adicionar uma imagem à sua página HTML. A tag <img> é usada para incorporar uma imagem. Ela é uma tag vazia, o que significa que não possui uma tag de fechamento. O atributo mais importante da tag <img> é o src, que especifica o caminho para a imagem que você deseja exibir.

Primeiro, abra o arquivo index.html localizado no diretório ~/project usando o explorador de arquivos à esquerda.

Agora, adicione a tag <img> dentro da seção <body>, logo abaixo do comentário . Defina o atributo src como labex.svg, que é o arquivo de imagem fornecido no diretório do seu projeto.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" />
  </body>
</html>

Após adicionar o código, salve o arquivo. Para ver o resultado, mude para a aba Web 8080 na barra superior do ambiente de laboratório. Você deverá ver o logotipo da LabEx exibido na página.

img tag

Adicionar o atributo alt para descrição da imagem

Nesta etapa, você adicionará o atributo alt à sua tag <img>. O atributo alt fornece um texto alternativo para uma imagem. Esse texto é exibido caso a imagem não possa ser carregada por algum motivo. Mais importante ainda, ele é usado por leitores de tela para descrever a imagem para usuários com deficiência visual, tornando seu site mais acessível.

Modifique a tag <img> no seu arquivo index.html para incluir um atributo alt. Um bom texto alt deve ser uma descrição concisa da imagem.

<img src="labex.svg" alt="LabEx Logo" />

Seu arquivo index.html completo agora deve ficar assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" />
  </body>
</html>

Salve o arquivo. Você não verá nenhuma alteração visual na aba Web 8080 porque a imagem está carregando corretamente. No entanto, adicionar o atributo alt é uma prática recomendada crucial para o desenvolvimento web.

Definir os atributos width e height para o tamanho da imagem

Nesta etapa, você aprenderá a controlar o tamanho da sua imagem usando os atributos width e height. Por padrão, um navegador exibe uma imagem em suas dimensões originais. Especificar width e height permite que você redimensione a imagem e ajuda o navegador a reservar a quantidade correta de espaço para ela antes que seja carregada, evitando que o layout da página sofra alterações bruscas.

Vamos definir a largura da nossa imagem como 200 pixels e a altura como 50 pixels. Adicione os atributos width e height à sua tag <img> no index.html.

<img src="labex.svg" alt="LabEx Logo" width="200" height="50" />

O arquivo index.html completo agora será:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" width="200" height="50" />
  </body>
</html>

Salve o arquivo e mude para a aba Web 8080. Você notará que a imagem foi redimensionada para as dimensões que você especificou.

Usar o atributo title para dica de ferramenta da imagem

Nesta etapa, você adicionará um atributo title à tag <img>. O atributo title fornece informações extras sobre um elemento. Para imagens, essas informações geralmente são exibidas como uma dica de ferramenta (tooltip) quando um usuário passa o mouse sobre a imagem.

Vamos adicionar um título à nossa imagem para dar aos usuários uma dica sobre o que acontecerá se eles clicarem nela (o que implementaremos na próxima etapa). Adicione o atributo title à sua tag <img> no index.html.

<img
  src="labex.svg"
  alt="LabEx Logo"
  width="200"
  height="50"
  title="Go to LabEx Homepage"
/>

Seu arquivo index.html agora deve conter o seguinte código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img
      src="labex.svg"
      alt="LabEx Logo"
      width="200"
      height="50"
      title="Go to LabEx Homepage"
    />
  </body>
</html>

Salve o arquivo e atualize a aba Web 8080. Agora, mova o cursor do mouse sobre a imagem. Uma pequena caixa com o texto "Go to LabEx Homepage" deverá aparecer.

title attribute

Envolver a tag img em uma tag a para link de imagem clicável

Nesta etapa final, você tornará a imagem um link clicável. Para fazer isso, você precisa envolver a tag <img> dentro de uma tag de âncora <a>. A tag <a> define um hiperlink, e seu atributo href especifica a URL da página para a qual o link aponta.

Envolva sua tag <img> existente com uma tag <a>. Defina o atributo href da tag <a> como https://labex.io.

<a href="https://labex.io">
  <img
    src="labex.svg"
    alt="LabEx Logo"
    width="200"
    height="50"
    title="Go to LabEx Homepage"
  />
</a>

Seu arquivo index.html final ficará assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <a href="https://labex.io">
      <img
        src="labex.svg"
        alt="LabEx Logo"
        width="200"
        height="50"
        title="Go to LabEx Homepage"
      />
    </a>
  </body>
</html>

Salve o arquivo e vá para a aba Web 8080. Você notará que o cursor do mouse muda para um ponteiro quando você passa o mouse sobre a imagem, indicando que é um link. Clicar na imagem tentará navegar para a página inicial da LabEx.

Resumo

Parabéns por concluir o laboratório! Você aprendeu com sucesso como trabalhar com imagens em HTML.

Neste laboratório, você cobriu os seguintes conceitos principais:

Incorporar uma imagem usando a tag <img>.
Especificar a origem da imagem com o atributo src.
Fornecer texto alternativo para acessibilidade com o atributo alt.
Controlar as dimensões da imagem com os atributos width e height.
Adicionar uma dica de ferramenta com o atributo title.
Tornar uma imagem um link clicável envolvendo-a em uma tag <a>.

Essas são habilidades essenciais para criar páginas da web ricas e interativas. Agora você pode adicionar e gerenciar imagens com confiança em seus futuros projetos HTML.