Imagens HTML: Aprenda a Incorporar e Estilizar com src, alt e tamanho

Introdução

As imagens são uma parte fundamental das páginas web modernas, tornando o conteúdo mais envolvente e visualmente apelativo. Em HTML, as imagens são incorporadas num documento utilizando 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, aprenderá a exibir uma imagem numa página web. Começará por inserir uma imagem básica e, em seguida, adicionará progressivamente atributos para fornecer texto alternativo, definir as suas dimensões, adicionar uma tooltip (dica de ferramenta) e, finalmente, transformá-la num link clicável.

O ambiente foi pré-configurado com um ficheiro index.html e um ficheiro de imagem chamado labex.svg no diretório ~/project. Um servidor web também está a ser executado, para que possa pré-visualizar as suas alterações em tempo real no separador "Web 8080".

Inserir tag img com atributo src para a origem da imagem

Nesta etapa, aprenderá a adicionar uma imagem à sua página HTML. A tag <img> é utilizada para incorporar uma imagem. É uma tag vazia, o que significa que não tem uma tag de fecho. O atributo mais importante da tag <img> é src, que especifica o caminho para a imagem que pretende exibir.

Primeiro, abra o ficheiro index.html localizado no diretório ~/project utilizando o explorador de ficheiros à esquerda.

Agora, adicione a tag <img> dentro da secção <body>, logo abaixo do comentário . Defina o atributo src para labex.svg, que é o ficheiro de imagem fornecido no seu diretório de 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, guarde o ficheiro. Para ver o resultado, mude para o separador Web 8080 na barra superior do ambiente de laboratório. Deverá ver o logótipo LabEx exibido na página.

Adicionar atributo alt para descrição da imagem

Nesta etapa, adicionará o atributo alt à sua tag <img>. O atributo alt fornece texto alternativo para uma imagem. Este texto é exibido se a imagem não puder ser carregada por algum motivo. Mais importante ainda, é utilizado por leitores de ecrã para descrever a imagem a utilizadores com deficiência visual, tornando o seu website mais acessível.

Modifique a tag <img> no seu ficheiro 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" />

O seu ficheiro index.html completo deverá agora parecer-se com isto:

<!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>

Guarde o ficheiro. Não verá quaisquer alterações visuais no separador Web 8080 porque a imagem está a ser carregada corretamente. No entanto, adicionar o atributo alt é uma prática recomendada crucial para o desenvolvimento web.

Definir atributos width e height para o tamanho da imagem

Nesta etapa, aprenderá a controlar o tamanho da sua imagem utilizando os atributos width e height. Por defeito, um navegador exibe uma imagem nas suas dimensões originais. Especificar a width e a height permite redimensionar a imagem e ajuda o navegador a reservar a quantidade correta de espaço para ela antes de carregar, evitando que o layout da página mude.

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

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

O ficheiro index.html completo será agora:

<!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>

Guarde o ficheiro e mude para o separador Web 8080. Notará que a imagem foi redimensionada para as dimensões que especificou.

Nesta etapa, adicionará um atributo title à tag <img>. O atributo title fornece informações adicionais sobre um elemento. Para imagens, esta informação é tipicamente mostrada como um tooltip quando um utilizador passa o rato sobre a imagem.

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

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

O seu ficheiro index.html deverá agora 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>

Guarde o ficheiro e atualize o separador Web 8080. Agora, mova o cursor do rato sobre a imagem. Deverá aparecer uma pequena caixa com o texto "Go to LabEx Homepage".

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

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

Envolva a sua tag <img> existente com uma tag <a>. Defina o atributo href da tag <a> para 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>

O seu ficheiro 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>

Guarde o ficheiro e vá para o separador Web 8080. Notará que o cursor do rato muda para um ponteiro quando passa sobre a imagem, indicando que é um link. Clicar na imagem tentará navegar para a página inicial do LabEx.

Resumo

Parabéns por completar o laboratório! Aprendeu com sucesso a trabalhar com imagens em HTML.

Neste laboratório, cobriu os seguintes conceitos chave:

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 um tooltip com o atributo title.
Tornar uma imagem num link clicável envolvendo-a numa tag <a>.

Estas são competências essenciais para criar páginas web ricas e interativas. Agora pode adicionar e gerir imagens com confiança nos seus futuros projetos HTML.

Imagens HTML