Upload
jolvani-morgan
View
154
Download
2
Embed Size (px)
Citation preview
Imagens(X)HTML
Professor Jolvani
Aula 09, 10 e 11
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...
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)
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...
Imagens (X)HTML Como fazer isso align=“right” e
redimensione a imagem...
Encontre outros atributos
Verifique os atributos depreciados no w3scools.
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...
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...
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....
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...
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
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...
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...
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.
Imagens (X)HTML – Aula 11
http://www.photoshoponline.com.br/editor/
http://fotografiatotal.com/os-6-melhores-editores-de-fotografia-gratis
Próxima Aula: Listas