2. Imagens (X)HTML
Bem vindos a mais uma aula de xhtml, nesta aula vamos trabalhar com imagens
Então vamos preparar duas imagens para executarmos as atividades...
Copiamos e renomeamos a última aula, aula05 para aula06.html
Então vamos inserir uma imagem... Usa-se a tag <img>, esta é uma tag in-line,
não dá quebra de linha
Se usarmos uma tag onde não encontramos a imagem ...
Então usamos o atributo src... + o atributo obrigatório alt... Será
apresentado se a imagem não for encontrada...
3. Imagens (X)HTML
Porém a imagem ficou muito grande, mas nos temos como redimensionar a
imagem...
Outra maneira é usar o atributo style... (do css) com a propriedade width...
Definido a largura em pixels
Ao definir a largura em pixel ela fica fixa, quando minimizamos
ou maximizamos o browser ela fica do mesmo tamanho, mas se
definíssemos a propriedade width 50% por exemplo a imagem
seria redimensionada quando max – min o browser ..... Teste.
Eu gostaria que essa imagem fosse um parágrafo... Podendo fazer
o alinhamento ao centro. Usando align este também esta
depreciado... Então, agora usaremos o atributo style...
<p> </p> é um box (uma caixa)
4. Imagens (X)HTML
Cabe uma revisão para alterar o código align para style ....
Faça isso em todo o código...
Colocando a outra imagem... Já sabemos qual a tag usar e os
atributos obrigatório: <img src=“” alt=“” /> lembre-se de dar um
espaço antes de fechar a tag...
A imagem ficou abaixo do texto, porém,
Gostaria que ficasse alinhada a direita...
5. Imagens (X)HTML
Como fazer isso align=“right” e redimensione
a imagem...
Encontre outros atributos
Verifique os atributos depreciados no
w3scools.
6. Imagens (X)HTML – Aula 10
Edição de Imagens
Performance das Imagens
Photoshop – ferramenta profissional para edição de imagens
Criamos um novo arquivo html – aula07.html...
As tags img funcionam de forma diferente...
Primeiro o browser carrega o arquivo html,
formata o arquivo e quando ele chega na tag img
ele faz uma nova requisição ao servidor solicitando
as imagens...
E a cada imagem ele faz uma requisição ao
servidor... Enquanto ele não encontrar a imagem
ele fica requisitando....
Após conseguir carregar ele para de “atualizar”,
fazer a requisição...
7. Imagens (X)HTML – Aula 10
Em caso de carregarmos imagens de extensões diferentes, imagens com ou sem fundo,
ou fundo transparente Ex: JPG e GIF é que:
O JPG funciona melhor com imagens continuas como fotografias, e os GIFs funcionam
melhores para imagens com algumas cores sólidas imagens com linhas, cliparts ou
pequenos texto de imagens, logos ... Imagens menos “complexas”
Em JPG vc pode representar uma imagem com 16 milhões de
cores, e o GIF com até 256 cores diferentes
O JPG é um formato com perdas.... Para poder reduzir o tamanho
do arquivo algumas informações são perdidas... O GIF também
reduz o arquivo mas não perde nenhuma informação... Formato
sem perdas
O JPG não suporta transparências enquanto o GIF pode-se definir
cor de fundo e transparência...
Então se eu alterar a cor de fundo observamos o que acontece
com as imagens...
8. Imagens (X)HTML – Aula 10
Carregar a imagem, colocar cor de fundo e verificar a diferença...
Com as imagens transparentes conseguimos colocar cor atrás da imagem...
No nosso projeto html temos que tomar o cuidado com o tamanho das imagens....
A imagem usada possui 1280 x 720 e estamos definido ela com uma dimensão de 450px. Com
136 kb, (geralmente são maiores). Quando nos fazemos uma requisição ao servidor ele vai
carregar esse arquivo. E nossa ave com 300 x 211 e 80 kb....
9. Imagens (X)HTML – Aula 10
Como as imagens são maiores então o tamanho da página fica maior.
Demora + para carregar. Então seria necessário usar um editor de imagem
para deixa-las + “enxutas”
Para isso possuímos vários editores, tais como:
Photoshop
Gimp
Image Magic
Todos gratuitos...
10. Imagens (X)HTML – Aula 11
Então vamos editar nossas imagens para deixar o projeto mais pequeno...
Pode ser no photoshop...
No nosso caso a imagem deve ter 450px (pixels)
Alterar o nível de qualidade
11. Imagens (X)HTML – Aula 11
Salvar como figura da web (Gif x JPG)
Vamos editar num editor que vc possui - paint
Observe que a imagem já está
reduzida...
12. Imagens (X)HTML – Aula 11
No Paint - Redimensionar
Altere as dimensões para 450 pixel e
A outra imagem para 150 px.
No paint a transparência foi perdida...
13. Imagens (X)HTML – Aula 11
Fazer ajustes finos ...
Endereço relativo...
Copiamos a imagem para outra pasta e testamos...
Altere o endereço e saia um nível ...
Mais um nível = ../../img/fotos.jpg; no mesmo nível
E se ela estivesse fora do meu computador, na web por
exemplo...
Ai temos o endereço absoluto...
Encontre uma imagem de um determinado site e teste...
Finalizamos então com endereço relativo X absoluto.