O documento discute como trabalhar com imagens em HTML, explicando quando usar os formatos JPG e GIF, como inserir imagens usando a tag <img> e definir seu tamanho, e transformar imagens em links.

1. HTML 4.1 - Aula 7
Canal Effeccinco

2. Revisão da Aula Anterior
 Na ultima aula nós aprendemos:
 Como colocar sua página na internet.
 Como registrar um domínio.
 Como escolher um site de hospedagem.
 Como deixar seus links ainda mais personalizados e profissionais.

3. Conteúdo dessa Aula
 Nessa aula nós vamos falar um pouco mais sobre a tag <img>, afinal o que mais vemos nas páginas de
sites hoje em dia são imagens que complementam o seu conteúdo.
 Porém há um grande problema em utilizar imagens, para que elas carreguem no seu site, o Html deve
ficar buscando cada uma das suas imagens no servidor aonde seu site está hospedado, isso leva um
tempo, é claro que com a velocidade da internet nos dias atuais isso ocorre de forma fácil, mas isso é
uma realidade que nós vivenciamos no Brasil e em grandes cidades.
 Vamos imaginar que a sua página vai ser exibida no interior de um estado, onde mal chega a conexão
com a internet ou melhor em um país, que ainda possui uma dificuldade com uma conexão, imagens
são arquivos pesados e isso pode fazer com que demore a carregar.

4. Como trabalhar com imagens!
Existem muitos tipos de padrões de imagens que nós podemos utilizar, por exemplo, Jpeg, Gif, Png e etc,
então qual é o melhor tipo de imagem para carregar no seu site?
A maioria dos sites utilizam os padrões Jpeg e Gif, mas quando usar um ou quando usar o outro?

5. Quando usar o tipo Jpeg?
 Esse padrão de imagem é ótimo para fotos e gráficos mais complexos
 Ele funciona melhor para fotos
 Pode apresentar imagens até 16 milhões de cores diferentes.
 Você pode perder pois quando você transforma nesse tipo de imagem se o tamanho arquivo original
for maior então para reduzir ele vai ter que jogar algumas cores fora.
 Ele não suporta transparência.

6. Quando usar o tipo Gif?
Nós usamos o tipo Gif quando a imagem for simples com cores sólidas ou quando a imagem for de logos
ou possuir apenas formas geométricas.
Funciona melhor com logos, ou Clip Arts pois tem linhas simples e cores sólidas.
Pode apresentar imagens com no máximo 256 cores diferentes.
O gif também comprime os arquivos, porém sem perdas.
Permite deixar a imagem com transparência isso é útil em alguns casos pois pode mostrar o que tem
por trás daquela imagem.

7. Utilizando a Tag <img>
 Essa tag não é nada nova para nos já que trabalhos com ela a algumas aulas atrás para inserir uma
imagem na nossa página html.
 Você sabia que o a tag <img> é uma tag de linha isso mesmo, aquela que discutimos a diferença em uma
aula anterior.
 Se você definir a tag <img> dessa forma você esta dizendo que ela é vazia
 <img></img>
 O que define uma imagem nessa tag é o src (source) que definimos dentro da tag
 <img src=“caminhoDaImagem.gif”></img>

8. Aprendendo a usar o src(Source):
Você sabia que o source pode buscar imagens dentro do seu diretório, ou buscar direto de uma página, isso
mesmo você pode colocar direto o caminho da imagem na internet, porém você tem que estar ciente de
que não é muito seguro, pois se você referencia um site e ele de repente deixa de existir sua imagem
deixará de ser exibida ao seu leitor.
<img src=“www.google.com.br.gif”></img>
Ainda na sua imagem você pode definir uma largura e uma altura para a sua imagem usando dentro da
imagem o width e o Heigh.
<img src=“www.google.com.br.gif” width=“200” Height =“200” ></img>
Você sabia que o width e o height são baseados nos pixels da sua página então quando você define um
tamanho ele se resume em pixels.

9. Você pode transformar suas imagens em
links
 Além dessas opções você pode transformar sua imagem em um link e como
fazer isso é simples é só colocar a imagem dentro de uma ancora veja:
 <a href=“www.google.com.br”>
 <img src=“google.jpg”></img>
 </a>
 Dessa forma sua imagem se torna um link, que direcionará para outra página
sua ou de outro site.

10. Quer saber mais sobre html?
 Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no
youtube:
 https://www.youtube.com/watch?v=VuWxdteK0hQ
 Quer aulas sobre HTML, veja nosso Canal no Youtube, nos assista, curta e
compartilhe:
 https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A/feed
 Acesse o nosso Blog, e confira matérias mais completas.
 www.effeccinco.wix.com/effeccinco

11. Referências
 Livro: Use a Cabeça HTML, CSS e XHTML, 2º
Edição, Editora Alta Books, Elisabeth Freeman &
Eric Freeman. Capítulo 1 – Comece a entender o
HTML.
 SHARMA, Vivek. SHARMA, Rajiv. Desenvolvendo
Sites de e-Commerce. São Paulo: Makron Books,
2001, 598 p.