Dominando a Incorporação de Imagens em HTML - Guia Completo

Introdução

A tag HTML <img> é usada para incorporar imagens em páginas web. É uma tag vazia, o que significa que não possui uma tag de fechamento. O atributo src é obrigatório e especifica o caminho ou URL para a imagem. Outros atributos opcionais incluem alt, title, height, width, etc. Neste laboratório, você aprenderá como usar a tag HTML <img> para inserir imagens em páginas web.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

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.

Configure seu projeto

O primeiro passo é criar um novo diretório chamado "html-img-tag-lab" e, dentro dele, criar um arquivo chamado "index.html". Abra o arquivo no seu editor de código e adicione o seguinte código à seção <head>:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Img Tag Lab</title>
  </head>
  <body></body>
</html>

Adicione uma imagem à sua página web

Para adicionar uma imagem à sua página web, você precisará de um arquivo de imagem. Para este exemplo, vamos supor que você tenha uma imagem chamada "logo.png" em uma pasta chamada "images" no seu diretório raiz. Para adicionar esta imagem à sua página web usando a tag <img>, adicione o seguinte código à seção <body>:

<img src="images/logo.png" alt="Logo" />

Neste código, o atributo src especifica o caminho para o arquivo de imagem. O atributo alt fornece texto alternativo que é exibido se a imagem não puder ser carregada por algum motivo.

Adicionar atributos adicionais à sua imagem

Você pode adicionar vários atributos adicionais à sua imagem para controlar sua aparência e comportamento. Aqui está um exemplo que mostra como usar alguns dos atributos mais comuns:

<img
  src="images/logo.png"
  alt="Logo"
  width="200"
  height="100"
  title="My Website Logo"
/>

Neste código, os atributos width e height controlam o tamanho da imagem. O atributo title fornece uma dica de ferramenta (tooltip) quando o usuário passa o mouse sobre a imagem.

Usar um mapa de imagem

Um mapa de imagem (image map) é uma imagem que possui áreas clicáveis definidas, ou "hotspots", que linkam para diferentes destinos. Para criar um mapa de imagem, você precisa definir as coordenadas de cada hotspot e a URL para a qual ele linka. Aqui está um exemplo de um mapa de imagem:

<img src="images/worldmap.gif" alt="World map" usemap="#worldmap" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="https://www.northamerica.com"
    alt="North America"
  />
  <area
    shape="rect"
    coords="100,0,200,100"
    href="https://www.southamerica.com"
    alt="South America"
  />
  <area
    shape="rect"
    coords="200,0,300,100"
    href="https://www.europa.com"
    alt="Europe"
  />
  <area
    shape="rect"
    coords="300,0,400,100"
    href="https://www.asia.com"
    alt="Asia"
  />
  <area
    shape="rect"
    coords="400,0,500,100"
    href="https://www.africa.com"
    alt="Africa"
  />
</map>

Neste código, o atributo usemap especifica o nome do mapa, que é definido usando a tag <map>. Cada tag <area> define um hotspot especificando sua forma (por exemplo, "rect" para retangular), suas coordenadas e a URL para a qual ele linka.

Adicionar uma imagem como fundo

Você também pode usar uma imagem como fundo de um elemento HTML, como o corpo da sua página web. Aqui está um exemplo:

<style>
  body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

Neste código, a propriedade background-image especifica o caminho para o arquivo de imagem, e a propriedade background-repeat define que ele não se repita. A propriedade background-size dimensiona a imagem para cobrir todo o fundo.

Resumo

Parabéns! Você aprendeu com sucesso como usar a tag HTML <img> para adicionar imagens às suas páginas web. Você também aprendeu como usar vários atributos comuns para controlar o tamanho e a aparência de suas imagens, e como criar um mapa de imagem e usar uma imagem como fundo.