Oficina da Net

Fonte de ícones - Confira o novo ÍCONES BR.

Curso de HTML - Aula 6

Publicado em: 18/07/2008 | HTML | Visualizações: 646 | 0 Comentário(s)

Como sabemos, os documentos HTML precisam trabalhar rapidamente. Por esse motivo um documento HTML não pode conter muitas imagens e nem imagens muito grande, por exemplo, os BMP (bitmap) tornam a visualização das imagens muito lenta.

As imagens que aparecem na Internet podem estar nos formatos GIF e JPG, que são os mais utilizados. Nessa aula tomaremos por base esses dois tipos de imagens.

IMG

A Tag <img> é a responsável por inserir uma imagem em um documento HTML.

Sintaxe:

<img    src=”url_imagem”
             align=”alinhamento”
             alt=”texto_de_identificação”
             border=”espessura_da_borda”
             width=”largura”
             height=”altura”
             lowsrc=”url_imagem2”>

Src: indica o nome da imagem ou o endereço onde a imagem está localizada.

Align: define o alinhamento da imagem, podendo trabalhar tanto no alinhamento vertical da imagem quanto no alinhamento vertical da primeira linha de texto em relação à imagem. Pode ser: left (esquerda), center (centralizado), right (direita).

Alt: define um nome alternativo, que é mostrado enquanto a imagem não é carregada. Após o carregamento da imagem esse texto passa a ser mostrado quando a imagem recebe o foco do ponteiro do mouse.

Border: define a espessura da borda da imagem, caso se deseje inserir uma. Essa espessura é dada através de números inteiros.

Width/Height: definem, respectivamente, largura e altura da imagem e devem ser passadas em pixel. Se apenas um desses parâmetros for inserido, o outro será ajustado de forma automática, sem distorcer a imagem.

Lowsrc: define uma figura de apresentação inicial, útil em páginas que contém muitas imagens ou imagens muito pesadas.

Exemplo:

<html>

<head>

	<title>Curso de HTML – Aula 6</title>

</head>

<body>



<img    src=”tux.jpg”

             align=”center”

             alt=”Meu Amigo Tux”

             border=”2”

             width=”100”

             height=”100”

             lowsrc=”tux2.jpg”>



</body>

</html>

OBS: Troque a imagem tux.jpg e tux2.jpg por uma imagem existente em seu computador.

DICA:

Para inserir um GIF Animado na página o procedimento é mesmo utilizado para inserir uma imagem estática.

Bons Estudos!

Links patrocinados