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>
<p>Observe a imagem inserida:</p>
<img src="foto.jpg" />
</body>
</html>

Resultado:
Inserindo Imagem em uma Página HTML

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>
<p>Observe o texto exibido ao passar o mouse sobre a foto:</p>
<img src="foto.jpg" alt="Denecir da Silva Pereira" />
</body>
</html>
Resultado:
Adicionando Texto Alternativo a uma imagem em HTML

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>
<p>Observe a imagem redimensionada:</p>
<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


Leia mais:

2 comentários:

O que você achou do post? Faça um comentário.

Aprenda a receber dados de Formulário com PHP

Existem três arrays associativos que podemos usar para receber dados de Formulários HTML em PHP. São eles: $_GET , $_POST e $_REQUEST . O...