Durante a criação de nossos sites podemos precisar inserir imagens.

Devemos previamente estar atentos a 3 perguntas básicos:

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5e8f0069-237a-4b6d-b27d-38134de6e23d/1632528620494.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5e8f0069-237a-4b6d-b27d-38134de6e23d/1632528620494.png" width="40px" /> Tudo certo então? Agora vamos aprender a inserir essas imagens em nosso site

</aside>

Para adicionarmos uma imagem usaremos a tag <img>

A tag <img> tem a seguinte estrutura básica:

**<img src="" alt="">**

O atributo src é o caminho da nossa imagem

O atributo alt é o texto alternativo à qual será exibido caso a imagem não carregue. Também é uma forma de auxiliar o acesso à pessoas com deficiência visual.

Colocando em prática

Usaremos esta imagem

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagens</title>  
</head>
<body>
    <h1>Adicionando imagens no HTML</h1>
    <p>Para adicionarmos imagens no HTML usaremos de uma tag específica</p>
    **<img src="natal.jpg" alt="Imagem de natal">**
</body>
</html>

Resultado no navegador

Resultado no navegador

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b57d3996-c6d7-4f88-aa83-79b1ea06227a/1632528620502.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b57d3996-c6d7-4f88-aa83-79b1ea06227a/1632528620502.png" width="40px" /> E se a imagem estiver em outra pasta?

</aside>

Neste caso devemos passar o caminho no atributo alt

Estou usando agora esta imagem