Summary  
This chapter explains how to embed images in HTML using the `<img>` tag and its key attributes (`src`, `alt`, `width`, `height`), including best practices for accessible alt text and using absolute versus relative paths.  

General domain of usage  
Web page content design

Imagens tornam as páginas da web mais envolventes. É possível inserir uma imagem usando a tag `<img>`.

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL21vdW50YWlucy5hdmlmIgogIGFsdD0iTW91bnRhaW5zIGluIHNub3cgYW5kIGNsZWFuIHNreSIKICB3aWR0aD0iNTAwIgogIGhlaWdodD0iMzMzIgovPg==

### Atributos principais:
- `src`: obrigatório. Caminho para o arquivo de imagem (absoluto ou relativo);
- `alt`: obrigatório. Texto exibido caso a imagem não possa ser carregada, também utilizado por leitores de tela;
- `width` / `height`: tamanho em pixels. Sem esses atributos, a imagem é exibida no tamanho original.

## Atributo alt
O texto `alt` deve descrever claramente a imagem e fornecer um contexto útil.

Vamos imaginar o seguinte exemplo. Você tem uma fonte sobre corridas de cavalos. Você deseja mostrar como os competidores se preparam para a corrida.

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgaHVtYW4gb24gYSBob3JzZSIKLz4=

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgam9ja2V5IHJpZGVzIGEgaG9yc2UgdGhyb3VnaCBhIHRyYWluaW5nIGFyZWEgc3Vycm91bmRlZCBieSB0cmVlcyIKLz4=

A versão aprimorada fornece contexto real e ajuda usuários com deficiência visual a entender o que a imagem mostra.

## Atributo src
O atributo `src` pode usar caminhos absolutos e relativos para especificar a localização do arquivo de imagem.

### Caminho Absoluto
Uma URL completa apontando para uma imagem online.

PGltZyBzcmM9Imh0dHBzOi8vZXhhbXBsZS5jb20vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

Qualquer pessoa pode acessar a imagem através deste link completo.

Por favor, confira o exemplo real a seguir.
- [View the Code](https://github.com/olreyplay/adding-images-in-html/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html/)

### Caminho Relativo
Indica uma imagem dentro da pasta do seu projeto.

PGltZyBzcmM9Ii4vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

Isso significa que `image.jpg` está armazenado no diretório images próximo ao seu arquivo HTML.

Por favor, analise o exemplo real fornecido abaixo. Você encontrará a pasta `images`, que contém o arquivo `sun.png`.

- [View the Code](https://github.com/olreyplay/adding-images-in-html-v2/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html-v2/)

Caminhos absolutos: URLs completas que funcionam de qualquer lugar da internet.

Caminhos relativos: caminhos locais do projeto usados dentro da sua própria estrutura de pastas.

Resumo

Qual tag pode ser usada para colocar uma imagem em um site?

Qual atributo é obrigatório especificar em uma tag `<img/>`?

Aprenda os conceitos essenciais de HTML (HyperText Markup Language), a base do desenvolvimento web. Este curso para iniciantes aborda tags, atributos, elementos e a estruturação de páginas web. Adquira habilidades práticas na criação de títulos, parágrafos, listas, imagens, links, formulários e tabelas. Explore boas práticas, otimização e acessibilidade na web. Inicie sua jornada no desenvolvimento web com HTML.

Explore o funcionamento interno da web. Entenda como os dados trafegam pelas redes, descubra o papel dos protocolos e desvende os mistérios dos endereços IP e nomes de domínio. Obtenha uma compreensão geral de como navegadores e servidores se comunicam para entregar conteúdo web.

Descubra o poder das tags para estruturar o conteúdo, desde títulos e parágrafos até listas e tabelas. Aprenda como aprimorar os elementos com atributos.

O núcleo da estrutura de documentos HTML. Aprenda os componentes de um documento HTML, incluindo a declaração do doctype, head e body. Compreenda o propósito de cada elemento e como eles contribuem para a estrutura geral de uma página web.

Torne uma página web mais atraente com o uso de mídias como imagens, áudio e vídeo. Trabalhe com dados tabulares estruturados na forma de tabelas.

Explore a versatilidade dos formulários HTML. Aprenda a projetar formulários intuitivos e fáceis de usar aproveitando conceitos e técnicas essenciais. Descubra como os formulários possibilitam a interação do usuário e o envio de dados em sites.

Adicionando Imagens em HTML

Atributos principais:

Atributo alt

Atributo src

Caminho Absoluto

Caminho Relativo

1. Qual tag pode ser usada para colocar uma imagem em um site?

2. Qual atributo é obrigatório especificar em uma tag `<img/>`?