HTML - Hipertext Markup Language
 
5. Multimédia: Som e Imagem
   
 

Toda a manipulação de texto e de cor que vimos pode parecer interessante, mas é raríssima a página na Internet que não contém pelo menos uma imagem.

Podemos começar por ver como se insere um fundo numa página:

<HTML>
<HEAD><TITLE>Página com imagem</TITLE></HEAD>


<BODY BACKGROUND="imagem.jpg">
<FONT FACE="Arial" SIZE="4">Imagem de fundo</FONT>
</BODY>
</HTML>


Teremos como fundo da página a imagem especificada no parametro BACKGROUND, presente na mesma pasta que a nossa página.
 
 

Embora não se veja na imagem acima, a imagem repete-se em padrão. Não é aconselhável a utilização de fundos complexos, visto que podem tornar o texto pouco legível. Também é recomendável a escolha de uma cor suficientemente contrastante para o texto.

No entanto, para colocarmos uma imagem no corpo da nossa página utilizamos o ‘tag’ <IMG>. Este ‘tag’ insere uma imagem no ponto onde é colocado, e não é fechado, visto que não se trata de um ‘tag’ de formatação.

<BODY BGCOLOR="#66CCFF">
<P>Olá, sou o Eduardo</P>
<P><IMG SRC="eduardo.jpg" ALT="Sou eu!"></P>
</BODY>

Tem o resultado seguinte:
 
 
As imagens são objectos inseridos no meio do texto, pelo que a sua colocação requer algum planejamento:

<DIV ALIGN="CENTER">
Olá, sou o Eduardo.<IMG SRC="macaco.jpg" ALT="Sou eu !">

</DIV>

Tem um resultado um pouco infeliz:
 
 
Vamos então analizar o ‘tag’ <IMG>. O parâmetro SRC (SouRCe) indica o arquivo da imagem. Deve ser um arquivo .GIF ou .JPG (ver Dicas para um bom design), e devemos ter atenção às maiusculas e minúsculas do seu nome. O parâmetro ALT indica o texto que irá aparecer enquanto a imagem não é descarregada da Internet, ou que aparece quando passamos com o mouse por cima da Imagem.

Uma conclusão muito importante é que podemos inserir uma imagem numa secção formatada pelo ‘tag’ <A>, de modo a criar uma link nessa imagem:

<P>Clique abaixo para continuar</P>
<P>
<A HREF="paginadois.htm"><IMG SRC="link.gif" BORDER="4"></A>
</P>

Teremos então uma link para ‘paginadois.htm’ na imagem ‘link.gif’:
 
 
O parâmetro BORDER define a largura da borda da imagem. No caso de esta fazer uma hiperlink, a cor desta borda será a cor padrão definida em r <BODY LINK="…">, senão será igual à cor do texto. Podemos ainda utilizar BORDER="0" para suprimir a borda.