TECNOSOLUTION: Tutorial HTML - Multimédia: Som e Imagem

sexta-feira, 2 de novembro de 2012

Tutorial HTML - Multimédia: Som e Imagem - Parte 05

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">
Imagem de fundo
</BODY>
</HTML>

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

Embora não se veja na imagem acima, a imagem repete-se em default (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">
Olá, sou o Carlos Eduardo
<IMG SRC="eduardo.jpg">
</BODY>

Tem o resultado seguinte:

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

<DIV ALIGN="CENTER">
Olá, sou o Carlos Eduardo.<IMG SRC="eduardo.jpg" >
Bem vindos à minha página!
</DIV>

Tem um resultado um pouco infeliz:

Vamos então analizar o ‘tag’ <IMG>. O parâmetro SRC (SouRCe) indica o ficheiro da imagem. Deve ser um ficheiro .GIF ou .JPG, e devemos ter atenção às maiúsculas e minúsculas do seu nome.

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

Clique abaixo para continuar

<A HREF="paginadois.htm"><IMG SRC="link.jpg" BORDER="4"></A>

Teremos então um link para ‘paginadois.htm’ na imagem ‘link.jpg’:

O parâmetro BORDER define a largura da borda da imagem. No caso de esta fazer uma hiper-ligação, a cor desta borda será a cor por default (padrão), aquela que pode ser definida por <BODY LINK="…">, senão será igual à cor do texto. Podemos ainda utilizar BORDER="0" para suprimir a borda.

Além de imagens, também existe a possibilidade de colocar um pequeno reprodutor de som na página. Embora muita gente ache a musica de fundo algo de gosto duvidoso, desta maneira será possível parar a música, através de um pequeno controle tipo aparelhagem.

O aspecto será o seguinte:

Nota-se que foram utilizados dois ‘tags’ para fazer a mesma coisa. Porquê? Os dois browsers mais utilizados, o Internet Explorer da Microsoft e o chrome da Google têm certas diferenças na sua interpretação do HTML. Por isso, por vezes, é necessário incluir dois comandos diferentes para uma mesma função, visto que cada um destes comandos se destina a um dos browsers.

O ‘tag’ <BGSOUND> tem no parâmetro SRC a localização do ficheiro de som a tocar. No exemplo trata-se de um ficheiro .MP3, mas pode perfeitamente ser um som .WAV ou .MID.

De forma similar, o ‘tag’ <EMBED> tem em SRC o ficheiro a tocar. Mas este ‘tag’ é substancialmente diferente. <EMBED> é um ‘tag’ poderosíssimo que tem como função a inserção de ‘plug-ins’ multimédia, que além de som também podem ser programas em Java, filmes ou mesmo visores de mundos em realidade virtual. Os parâmetros de <EMBED> são específicos conforme o conteúdo e é um domínio já bastante avançado da criação de páginas.