Imagens

Uma maneira de enriquecer uma páginas HTML é inserir imagens, afinal, dependendo da situação, uma imagem pode ter muito mais significado do que uma página inteira só com textos.

 

Devemos tomar o cuidado para  não exagerar na quantidade de imagens em uma página, pois quanto mais imagens colocarmos na página, mais tempo a página demorará para ser carregada por completado.

 

Os pontos importantes são: o tamanho e a qualidade da imagem, ou seja, quanto maior a imagem e quanto melhor a qualidade, maior será o tempo para que ela seja carregada por completo na janela do navegador. Alguns usuários, principalmente aqueles que acessam a internet utilizando um modem, 3G ou 4G, podem perder a paciência e desistir de olhar a sua página.

 

Para inserir uma imagem em uma página HTML, devemos conhecer os formatos aceitos por essa linguagem. Existem vários tipos de formatos de arquivos gráficos, mais dois destes formatos são os mais utilizados nas páginas da web, são eles: GIF e JPEG.

 

Extensões de imagens - explicação

 

.GIF - É o mais conhecido na web desde o seu início. Tem resolução máxima de até 256 cores e pode ser animado ou não.

​

.JPEG - Apresenta ótima qualidade de imagem (16 milhões de cores) e possui a vantagem de o seu tamanho ser bem menor do que os outros arquivos de imagem como TIFF, pois trata-se de um arquivo de imagem compactado. É um dos mais utilizados nas páginas da web.

​

Inserindo uma imagem

​

Utilizamos a tag <img> para inseri as imagens. Junto com essa tag, devemos utilizar o parâmetro src para identificar o nome e o local onde o arquivo de imagem se encontra. 

Se a imagem estiver na mesma pasta que a página HTML, basta digitar o nome do arquivo, caso contrário devemos especificar o endereço completo de sua localização:

Exemplo:

<img src="paisagem.jpg"> (caso a imagem esteja na mesma pasta do arquivo HTML) ou <img src="imagens/paisagem.jpeg"> (caso a imagem esteja em outra pasta do computador) ou <img src="http://www.objetivo.br/images/outdoor2.jpg"> (neste caso a imagem está em uma página da internet).  Observe que, nesse último exemplo, a imagem está armazenada em um outro site da internet.

​

Siga os procedimentos abaixo para criar uma página HTML com algumas imagens:

​

1 - Crie uma pasta dentro dos "Documentos" com o seguinte nome: aula 6

​

2 - Procure uma imagem da internet sobre o tema "Paisagens" e salve dentro da pasta aula 6 com o seguinte nome: paisagem1.jpg. Repita o mesmo processo para salvar mais duas imagens: paisagem2.jpg e paisagem3.jpg. 

​

Conforme explicado, insira as imagens em HTML e salve o arquivo como aula6.html

​