HTML: Inserir e Estilizar Imagens - Guia Completo

Introdução

Neste laboratório, você aprenderá como inserir e estilizar imagens em HTML de forma eficaz, utilizando diversas técnicas e atributos. O laboratório cobre habilidades essenciais, como adicionar imagens básicas com fonte (source) e texto alternativo, definir dimensões fixas para imagens, alinhar imagens e criar dicas de ferramentas informativas. Ao seguir as instruções passo a passo, você obterá experiência prática na manipulação de elementos de imagem para aprimorar o design de páginas web e melhorar a experiência do usuário.

Através da prática, você explorará diferentes atributos HTML como src, alt, width, height e title para controlar a apresentação e acessibilidade das imagens. Essas habilidades são fundamentais para desenvolvedores web que buscam criar páginas web visualmente atraentes e responsivas, com imagens devidamente integradas e estilizadas.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-452362{{"Inserir e Estilizar Imagens em HTML"}} html/para_br -.-> lab-452362{{"Inserir e Estilizar Imagens em HTML"}} html/layout -.-> lab-452362{{"Inserir e Estilizar Imagens em HTML"}} html/multimedia -.-> lab-452362{{"Inserir e Estilizar Imagens em HTML"}} html/img_maps -.-> lab-452362{{"Inserir e Estilizar Imagens em HTML"}} html/embed_media -.-> lab-452362{{"Inserir e Estilizar Imagens em HTML"}} html/inter_elems -.-> lab-452362{{"Inserir e Estilizar Imagens em HTML"}} html/custom_attr -.-> lab-452362{{"Inserir e Estilizar Imagens em HTML"}} end

Adicionar Imagem Básica com os Atributos src e alt

Nesta etapa, você aprenderá como adicionar imagens básicas a uma página HTML usando a tag <img> e seus atributos essenciais. Imagens são uma parte crucial do design web, ajudando a tornar as páginas web mais visualmente atraentes e informativas.

Primeiro, vamos criar um arquivo HTML para trabalhar. Abra o WebIDE e crie um novo arquivo chamado images.html no diretório ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Minhas Primeiras Imagens</title>
  </head>
  <body>
    <!-- Adicionaremos nossas imagens aqui -->
  </body>
</html>

A tag <img> é uma tag de fechamento automático usada para incorporar imagens em um documento HTML. Ela possui dois atributos críticos:

src (fonte): Especifica o caminho para o arquivo de imagem
alt (texto alternativo): Fornece uma descrição textual da imagem

Vamos adicionar uma imagem ao nosso arquivo HTML:

<body>
  <img
    src="https://file.labex.io/static/images/labex-logo-dark.png"
    alt="Logotipo LabEx"
  />
</body>

O atributo src aponta para a URL da imagem, e o atributo alt fornece uma descrição que:

É exibida se a imagem não carregar
Ajuda leitores de tela a descrever a imagem para usuários com deficiência visual
Melhora o SEO, fornecendo contexto aos mecanismos de busca

Salve o arquivo e abra-o em um navegador web para ver a imagem.

Notas: Saiba mais sobre Como visualizar arquivos HTML no WebIDE.

Definir Dimensões Fixas de Imagem com Largura e Altura

Nesta etapa, você aprenderá como controlar o tamanho das imagens usando os atributos width (largura) e height (altura) em HTML. Esses atributos permitem que você especifique as dimensões exatas de uma imagem, o que pode ajudar a melhorar o layout da página e o desempenho de carregamento.

Abra o arquivo images.html que você criou na etapa anterior. Vamos modificar a imagem existente e adicionar mais algumas para demonstrar diferentes técnicas de dimensionamento.

HTML fornece dois atributos para definir as dimensões da imagem:

width: Define a largura da imagem em pixels
height: Define a altura da imagem em pixels

Vamos atualizar nossa imagem anterior e adicionar alguns novos exemplos:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Dimensões da Imagem</title>
  </head>
  <body>
    <!-- Imagem original com dimensões fixas -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="Logotipo LabEx"
      width="200"
      height="100"
    />

    <!-- Outra imagem com dimensões diferentes -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="Logotipo LabEx"
      width="300"
      height="150"
    />

    <!-- Imagem com apenas a largura especificada -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="Logotipo LabEx"
      width="250"
    />
  </body>
</html>

Pontos-chave sobre as dimensões da imagem:

As dimensões são especificadas em pixels
Você pode definir a largura, a altura ou ambos
Se apenas uma dimensão for especificada, a imagem é dimensionada proporcionalmente
Definir dimensões ajuda a evitar mudanças no layout da página à medida que as imagens carregam

A saída de exemplo em um navegador web mostrará três imagens de tamanhos diferentes.

Alinhar Imagens Usando o Atributo align Descontinuado

Nesta etapa, você aprenderá sobre o atributo align (alinhar) descontinuado para posicionar imagens em HTML. Embora o design web moderno use CSS para layout, é importante entender este método histórico de alinhamento de imagens.

Abra o arquivo images.html das etapas anteriores e modifique-o para demonstrar diferentes alinhamentos de imagem:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Alinhamento de Imagem</title>
  </head>
  <body>
    <p>
      <!-- Imagem alinhada à esquerda -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Logotipo LabEx"
        align="left"
        width="150"
        height="75"
      />
      Este texto fluirá ao redor da imagem alinhada à esquerda.
    </p>

    <p>
      <!-- Imagem alinhada à direita -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Logotipo LabEx"
        align="right"
        width="150"
        height="75"
      />
      Este texto fluirá ao redor da imagem alinhada à direita.
    </p>

    <p>
      <!-- Imagem alinhada ao centro -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Logotipo LabEx"
        align="middle"
        width="150"
        height="75"
      />
      Este texto está alinhado com o meio da imagem.
    </p>
  </body>
</html>

O atributo align suporta três valores principais:

left: Alinha a imagem à esquerda, com o texto fluindo ao seu redor
right: Alinha a imagem à direita, com o texto fluindo ao seu redor
middle: Alinha a imagem verticalmente com a linha de base do texto

Notas importantes:

O atributo align está descontinuado no HTML5
O design web moderno usa CSS float (flutuar) ou flexbox para layout
Este atributo é mantido para compreensão histórica

A saída de exemplo mostrará imagens posicionadas de forma diferente dentro dos parágrafos.

Nota: A caixa de diálogo do Labby pode obscurecer a imagem alinhada à direita.

Nesta etapa, você aprenderá como usar o atributo title (título) para adicionar informações de tooltip (dica de ferramenta) às imagens. Tooltips fornecem contexto ou descrição adicional quando um usuário passa o mouse sobre um elemento.

Abra o arquivo images.html das etapas anteriores e modifique-o para demonstrar o uso de tooltips:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tooltips de Imagem</title>
  </head>
  <body>
    <!-- Imagem com um tooltip simples -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="Logotipo LabEx"
      width="200"
      height="100"
      title="Logotipo Oficial LabEx"
    />

    <!-- Imagem com um tooltip mais descritivo -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="Logotipo LabEx"
      width="200"
      height="100"
      title="Logotipo LabEx: Aprenda a programar através de laboratórios práticos"
    />

    <!-- Múltiplas imagens com diferentes tooltips -->
    <div>
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Logotipo de Programação"
        width="150"
        height="75"
        title="Desenvolvimento Web"
      />

      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Logotipo da Nuvem"
        width="150"
        height="75"
        title="Computação em Nuvem"
      />
    </div>
  </body>
</html>

Pontos-chave sobre o atributo title:

Fornece informações adicionais ao passar o mouse sobre uma imagem
Funciona com imagens, texto e a maioria dos elementos HTML
Ajuda a melhorar a experiência do usuário, fornecendo contexto
Exibido em um pequeno popup quando o mouse passa sobre o elemento

Ao passar o mouse sobre essas imagens em um navegador web, você verá o texto do tooltip aparecer.

Resumo

Neste laboratório, os participantes aprenderam a trabalhar efetivamente com imagens em HTML, dominando técnicas-chave para incorporação e estilização de imagens. O laboratório abordou habilidades essenciais, como adicionar imagens usando a tag <img> com atributos críticos como src e alt, que garantem a exibição adequada da imagem e acessibilidade. Os alunos exploraram métodos para controlar as dimensões da imagem através dos atributos width (largura) e height (altura), compreendendo como essas configurações impactam o layout e o desempenho da página.

Os exercícios práticos guiaram os alunos através de várias técnicas de manipulação de imagens, incluindo a definição de tamanhos fixos de imagem, a adição de informações de tooltip com o atributo title e a experimentação com diferentes estratégias de alinhamento de imagem. Ao trabalhar de forma prática com elementos de imagem HTML, os participantes obtiveram informações valiosas sobre a criação de designs de páginas web visualmente envolventes e responsivos.

Inserir e Estilizar Imagens em HTML