Dicas de Informática: Inserindo imagens em Páginas HTML

É muito fácil inserir uma imagem no corpo de uma Página Web. Para isso, usamos a Tag <img>. Essa Tag não possui conteúdo, ou seja, ela se escreve assim: <img /> (Sem </img>).

Para que a Tag <img> funcione corretamente, devemos usar o parâmetro src. Ele serve para definir qual arquivo de imagem será exibido na página.
Para entender bem os exemplos abaixo, é necessário que você conheça a estrutura básica de um Documento HTML. Se você não conhece, sugiro que leia o post Introdução ao HTML.

O código abaixo considera que temos um arquivo chamado foto.jpg no mesmo diretório do nosso Documento HTML:

<html>

<head>

<title>Inserindo imagem em Páginas HTML</title>

</head>

<body>

Observe a imagem inserida:
<img src="foto.jpg" />

</body>

</html>

Resultado:

Adicionando Texto Alternativo

É possível exibir um texto explicativo sobre as imagens carregadas com a Tag <img>. Esse texto é mostrado assim que os internautas passam o mouse sobre a imagem.

Para adicionar um Texto Alternativo, usamos o parâmetro alt. Observe o exemplo abaixo:

<html>

<head>

<title>Adicionando Texto Alternativo</title>

</head>

<body>

Observe o texto exibido ao passar o mouse sobre a foto:
<img src="foto.jpg" alt="Denecir da Silva Pereira" />

</body>

</html>

Resultado:

Redimensionando imagens

Para alterar o tamanho de exibição de uma imagem dentro de uma Página HTML, devemos utilizar os parâmetros width e height.

O primeiro serve para definir a largura da imagem, e o segundo, a altura.

No exemplo abaixo, definimos que a imagem foto.jpg será exibida com 50 pixels de largura e 100 pixels de altura:

<html>

<head>

<title>Redimensionando imagens</title>

</head>

<body>

Observe a imagem redimensionada:
<img src="foto.jpg" width="50" height="100" />

</body>

</html>

Resultado:

Imagem redimensionada com os parâmetros width e height

Nota 1: Se você alterar apenas a largura da imagem, a altura será ajustada proporcionalmente. O mesmo ocorre se você alterar apenas a altura.

Nota 2: Quando definimos os parâmetros width e height em uma imagem, caso seus valores não sejam proporcionais ao tamanho original da imagem, haverá uma distorção.

Outros Parâmetros da Tag img

align	Alinhamento da imagem
border	Largura da Borda em pixels
hspace	Espaço horizontal que separa a imagem do restante do conteúdo
title	Texto alternativo (funciona em qualquer navegador enquanto o alt, apenas no Internet Explorer)
vspace	Espaço vertical que separa a imagem do restante do conteúdo

Dicas de Informática

Inserindo imagens em Páginas HTML

2 comentários:

Aprenda a receber dados de Formulário com PHP

Seguidores do Blog

Todos os direitos reservados.