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 encontrese 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 encontrese 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 encontrase em um diretório
chamado imagens, esse diretório encontrase 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.
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.
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.
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.
