Certamente, os sites na internet seria muito difíceis de trabalhar se não fosse possível adicionar imagens ao conteúdo das páginas. Inserir imagens em páginas Web é simples; necessita-se ter a imagem desejada e fazer uma referência a ela com o tag <img src>,onde o src é o atributo. O valor do atributo src (source = origem).
Aponta para o endereço da imagem. O valor do atributo pode ser o caminho absoluto ou relativo de uma imagem, Temos que estar atentos também ao tamanho das imagens; se ocupam muito espaço, isso implicará tempo para aparecer as imagens na tela, o que faz o usuário perder a paciência, o que jamais seria nosso objetivo.
A sintaxe do tag Imagem é:
<img src =" Nome da figura.extensão.>
Formato dos arquivos de imagem
Em geral, a página de Html aceita arquivos de imagem em formatos JPEG e GIF, pois esses formatos comprimem as imagens, deixando o arquivo pequeno. Cada formato tem seus objetivos, então deve-se escolher a forma mais adequada.
GIF
A extensão GIF, do inglês ''Graphics Interchange Format" , é o formato usado para todos tipos de grafismo e logotipos, animados ou não. O processamento de leitura é rápido,pode ser gravado em disco e recarregado diversas vezes sem perder a qualidade, e utiliza até 256 cores.
JPEG
A extensão JPEG, do inglês "Joint interchange format" , é o formato usado para fotos ou desenhos detalhados. O processamento de leitura é rápido; cada vez que esse arquivo foi gravado e regravado ele perde aos poucos a qualidade se tornando, após repetidas utilizações, inapropriado para uso. Utiliza os tons de cinza ou ainda sistema de cores RGB, 200 dpi.
Comparando GIF e JPEG
A taxa de compressão da extensão JPEG é melhor que a da extensão GIF. A taxa de descompressão da extensão JPEG é mais demorada que a da extensão GIF, fazendo com que os GIF apareçam mais rápido na tela. A extensão GIF é mais pobre em cores, porém podem-se fazer imagens transparentes, devemos transformar a extensão BMP em GIF ou JPEG para melhor trabalhamos em nossa página HTML.
Conheça os atributos tag imagem.
Src : este atributo nos indica onde está a imagem;
Alt : este atributo nos indica um texto alternativo ou legenda - texto que normalmente os navegadores mostram quando paramos o mouse sobre a imagem;
Border : este atributo nos configura uma borda ou moldura na imagem.Seus valores indica 0 se não houver borda e infinito para borda;
Width: este atributo nos configura a largura da imagem. Seu valor é medido em pixels;
Height: este atributo nos configura a altura da imagem. Seu valor é medido em pixels;
Align: atribui valores para o alinhamento horizontal. que podem ser à esquerda ao centro, à direita
(Left , center, right) ou alinhamento vertical (Top middle , baseline e bottom);
Align = Left : a imagem fica à esquerda;
Align = Right: a imagem fica à direita;
Align = Center: a imagem fica ao centro;
Align = Top : alinha o top da imagem com o top do elemento mais alto da linha;
Align = Middle: alinha a base do texto com o centro da imagem;
Align = Botton : alinha a imagem com a base dos outros elemento das lista;
Align = Texttop: alinha o topo da imagem com o topo do texto;
Align = Absmiddle: alinha o centro do texto com centro da imagem;
Align = Baseline: alinha a imagem com a base dos outros elementos da linha;
Align = Absbotttom: alinha a imagem com base dos outros elementos da linha;
Vspace: especifica o espaço acima e abaixo da imagem, Seu valor é dado em pixels;
Hspace: especifica o espaço à direita e à esquerda. Seu valor é dado em pixels;
Espero que tenha entendido os atributos citados!!
