Aula Dois de HTML

Como Adicionar uma Imagem em HTML?

Para adicionar uma imagem a uma página HTML, você pode usar a tag <img>. A tag <img> permite incorporar uma imagem em um site. Abaixo está um guia detalhado de como adicionar uma imagem à sua página HTML.

1. Estrutura Básica da Tag `<img>`

A tag <img> não precisa de uma tag de fechamento e possui dois atributos principais:

src: Especifica o caminho da imagem. Este pode ser um caminho relativo (em relação à página HTML) ou um URL completo.
alt: Fornece um texto alternativo que é exibido caso a imagem não possa ser carregada. Também é importante para acessibilidade, pois ajuda as pessoas com deficiência visual que usam leitores de tela.

Exemplo básico:

<img src="caminho/da/imagem.jpg" alt="Descrição da imagem">

Passos para adicionar uma imagem:

Coloque a imagem na pasta do seu projeto: Você pode armazenar a imagem em uma pasta dentro do seu diretório de trabalho, como imagens/, ou pode usar uma URL diretamente de um site.
Especifique o caminho correto para o arquivo de imagem:
- Se a imagem estiver no mesmo diretório que o arquivo HTML, basta usar o nome do arquivo, como imagem.jpg.
- Se a imagem estiver em uma pasta específica, como imagens, use um caminho relativo, como imagens/imagem.jpg.
- Você também pode usar uma URL externa, como https://www.exemplo.com/imagem.jpg.
Incorpore a imagem na página HTML: Insira a tag <img> no corpo do seu código HTML.

Exemplo completo de uma página HTML com uma imagem:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Imagem</title>
</head>
<body>
    <h1>Bem-vindo à minha página!</h1>
    <p>Abaixo está uma imagem:</p>
    <img src="imagens/minha-imagem.jpg" alt="Descrição da imagem">
    <p>Essa imagem foi adicionada à minha página HTML.</p>
</body>
</html>

2. Atributos Opcionais

Além de src e alt, a tag <img> possui alguns atributos que podem ser usados para ajustar a exibição da imagem.

width e height: Para definir a largura e altura da imagem. Esses valores podem ser dados em pixels (px) ou em porcentagem (%).

<img src="imagens/minha-imagem.jpg" alt="Descrição da imagem" width="300" height="200">

title: Exibe um texto quando o usuário passa o mouse sobre a imagem.

<img src="imagens/minha-imagem.jpg" alt="Descrição da imagem" title="Texto exibido ao passar o mouse">

3. Usando um Caminho Absoluto

Se a imagem estiver hospedada em um servidor ou em um URL externo, você pode usar um caminho absoluto. Por exemplo:

<img src="https://www.exemplo.com/imagens/minha-imagem.jpg" alt="Descrição da imagem">

4. Exemplo de Código Completo com Imagem e Estilo

Aqui está um exemplo mais detalhado, incluindo o uso de CSS para controlar o tamanho da imagem:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Imagem com Estilo</title>
    <style>
        img {
            width: 50%;  /* Definindo a largura da imagem como 50% do tamanho do contêiner */
            border-radius: 10px;  /* Bordas arredondadas */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);  /* Sombra na imagem */
        }
    </style>
</head>
<body>
    <h1>Minha Página com Imagem</h1>
    <img src="imagens/minha-imagem.jpg" alt="Uma imagem incrível">
</body>
</html>

5. Tipos de Imagens Comuns

Alguns dos formatos de imagem mais comuns que você pode usar são:

JPEG (.jpg, .jpeg): Boa para fotos e imagens com muitos detalhes.
PNG (.png): Bom para imagens com fundo transparente ou que exigem alta qualidade.
GIF (.gif): Ideal para animações curtas.

Se você precisar de mais ajuda ou um exemplo diferente, é só avisar!

Voltar à página inicial

Voltar à Tecnologia

Aula 3 de HTML

Aula 2 de HTML