O documento discute a tag <img> no HTML para inserir imagens em páginas web. Explica como usar os atributos src, alt, width, height e border da tag <img> e como alinhar imagens e texto. Também cobre a tag <audio> para áudio e <video> para vídeo no HTML5, além de como incorporar vídeos do YouTube usando seu código embed.

1. Html e CSS

2. TAG <img>
● Anteriormente havíamos aprendido a inserir imagens
como plano de fundo de nossas página web, através
do atributo background da tag body.
● Agora iremos aprender a inserir imagens na própria
página web, para isso utilizamos a tag img. Vejamos a
estrutura:

3. TAG <img>
● Note que o atributo src indica o local e nome da imagem a
ser inserida. Caso a imagem encontre­se no mesmo
diretório do documento HTML em que ela será inserida,
então basta colocarmos o nome do arquivo de imagem e
sua extensão (ex: <img src= “imagem.jpg”>), no entanto,
caso a imagem encontre­se em outro diretório, será
necessário indicar também o caminho do arquivo de
imagem, como ocorreu no exemplo acima: a
imagem html_logo.jpg encontra­se em um diretório
chamado imagens, esse diretório encontra­se no mesmo
diretório do documento HTML em questão.

4. TAG <img>
● Alguns atributos da tag img são muito importantes e
devemos conhecê­los bem, são eles:
1. Alt: texto que descreve brevemente a
imagem, mostrado em browsers que não
carregam ou carregaram a imagem.
2.Width: dimensiona a largura da imagem em pixeis.
3.Height: dimensiona a altura da imagem em pixeis.
4.Border: dimensiona o tamanho das bordas da
imagem.

5. TAG <img>
● Align: responsável por definir como o texto adjacente a imagem irá se alinhar.
– Align= “Left” → a imagem será alinhada à esquerda e o texto adjacente ao
seu redor, iniciando do topo da imagem.
– Align= “Right” → a imagem será alinhada à direita e o texto adjacente ao
seu redor, iniciando do topo da imagem.
– Align= “Top” → alinha o texto adjacente com o topo da imagem.
– Align= “Bottom” → alinha o texto adjacente com a parte inferior da imagem.
– Align= “Middle” → alinha o texto adjacente com o centro da imagem.

6. TAG <img>

7. EXERCICIO
● Crie um novo documento HTML com o
seguinte nome PaginaHTMLcomImagem.html,
esse documento deverá possuir duas imagens
com o mesmo tamanho, uma alinhada à
esquerda e outra alinhada à direita. Entre as
imagens deve ter um pequeno texto com
alinhamento justificado.

8. Tag <audio>
● O HTML5 introduz o suporte de mídia embutido
por meio dos elementos <audio> e <video>,
oferecendo a possibilidade de incorporar
facilmente mídia em documentos HTML.

9. Atributos da TAG <audio>

10. Formatos de Audios suportados

11. Tag <video>
● Para inserirmos vídeo em uma página HTML
utilizamos a tag <video>. Vejamos o exemplo
abaixo para visualizarmos a estrutura dessa
tag.

12. Formatos de videos suportados

13. Inserindo videos do Youtube
● Após ter criado a página, acesse o site do YouTube e
encontre o vídeo que deseja colocar na página. Quando
você clicar no vídeo para fazer a visualização logo
abaixo aparecerá um campo com o seguinte nome:
COMPARTILHAR,
● Depois de apertar em COMPARTILHAR, você verá um
link chamado INCORPORAR. Neste campo você terá o
código que deve ser copiado. Ainda você pode ajustar os
padrões de tamanhos

14. Inserindo videos do Youtube
● Selecione todo o código que está dentro do
campo e copie-o para a página HTML.

15. Inserindo videos do Youtube

16. Exercicio
● Crie um documento HTML com o
seguinte nome:
PaginaHTMLcomMultimidia.html, esse
documento deverá possuir: imagem, vídeo
e texto.

17. Use a imaginaçãoUse a imaginação