AULA 5: Manipulação de imagens
Vamos aprender como inserir imagens, como podemos mudar o seu tamanho no HTML. Vamos ainda aprender a linkar imagens e a alterar o 'border'.
Inserção de imagens
Que formatos de imagem existem:
Até agora temos uma página bem simpática, mas ainda muito pobre. As imagens são
fundamentais para enriquecer o nosso conteúdo.
As imagens utilizadas na web deverão ter um dos dois formatos: GIF ou JPG.
O GIF é mais apropriado para imagens simples, gráficas, sem muita informação nem
muitas côres. Uma imagem GIF tem no máximo 256 côres, que pode não funcionar bem
para uma fotografia.
O JPG, pelo contrário, já suporta milhões de côres e funciona bem para imagens
mais complexas com mais informação, mais detalhe ou textura. O JPG é indicado
para fotografias e imagens realistas.
(mais tarde irá aprender como optimizar as suas imagens).
As Imagens que vamos inserir na nossa página terão que estar gravadas na mesma
directoria do ficheiro html que as contém. É possível guardá-las noutros sítios,
mas isso complica um pouco o processo e não é de todo necessário neste caso.
Apenas se usam sub-directorias em sites mais complexos, com muitos ficheiros de
imagem e html. Servem as sub-directorias para organizar melhor todos os
ficheiros.
Adiante, na nossa página vamos apenas ter algumas imagens e para as inserir
usamos o tag <IMG SCR>. Grave então a imagem para a sua directoria (pasta ou folder)
de trabalho, e no html em que tem vindo a trabalhar insira o tag:
<img src="imagem.jpg">
Não se esqueça que os tags que inserir no seu HTML deverão ficar entre <body> e
</body>.
Este tag é mais um dos que não precisa da terminação, não existe o tag </img>.
Assim terá apenas a imagem, no entanto existem vários atributos que
podemos (e devemos) aplicar a essa mesma imagem:
>> width="" - Indica em pixeis a largura da imagem
>> height="" - Indica em pixeis a altura da imagem
>> alt="" - Texto alternativo (aparece quando passamos o rato por cima da imagem
ou quando a imagem ainda não carregou)
O tag completo com estes três parâmetros será:
<img src="imagem.jpg" width="75" height="100" alt="A minha foto">
O Width e o height forçam a imagem a ter um determinado tamanho. Pode não os
usar se a imagem já estiver no tamanho desejado. A única coisa desagradável que
acontece se não especificar as dimensões é aquele efeito de página a saltar à
medida que vai carregando. O browser como não sabe o tamanho original das
imagens, mostra o espaço delas como um quadrado, apenas com tamanho suficiente
para o texto alternativo. À medida que as imagens vão chegando, esses quadrados
vão assumindo o seu tamanho real, o que provoca uma dança de imagens durante o
carregamento do html. De certeza que já assistiu a casos destes.
Um truque:
Um truque que às vezes pode resultar numa maior rapidez de transferência da página para o visitante é, em vez de usar imagens grandes, usar pequenas e forçar o seu tamanho nos atributos do <IMG SCR>, no width e no height. Isto permite tornar as páginas mais fáceis de carregar (assunto que será abordado com maior profundidade, mais tarde), uma vez que utilizador só necessita de carregar uma imagem.
Alinhar a imagem
Se quer ter a imagem inserida no texto, e não alternada com este, pode alinhá-la
e desta forma melhorar o aspecto da sua página. Utilize, para isso, tal como no
tag <FONT>, o parâmetro align="".
Imaginemos que quer a imagem à esquerda do texto, faça:
<img src="imagem.jpg" align="left"> E aqui terá o seu texto
Imaginemos que quer a imagem à direita do texto, faça:
<img src="imagem.jpg" align="right"> E aqui terá o seu texto
Como vê, o tag de imagem é posto antes do texto, para ficar alinhada (num eixo
vertical) com a primeira linha deste. Se trocar a posição do texto em relação ao
tag da imagem, o seu texto irá ficar alinhado com a ultima linha, mas sempre
(num eixo horizontal) na posição (esquerda ou direita) que definiu no tag align.
A melhor maneira é mesmo testar. Experimente inserir a imagem num texto e use
todas as variantes que se lembrar.
Não se esqueça que os tags que inserir no seu HTML deverão ficar entre <body> e
</body>.
A Imagem com 'link':
Para 'linkar' uma imagem, fazemo-lo da mesma forma do que fizemos com o texto.
Aplicamos o TAG <A HREF> à sua volta. Do tipo:
<a href="html de destino"><img src="imagem.jpg"></a>
A única coisa aqui diferente é que todas as imagens linkadas ficam com uma
borda, uma espécie de caixilho com a mesma côr que se definiu para os links.
Isto pode tornar a imagem um pouco menos vistosa, mas não se preocupe. Pode
sempre retirar (ou aumentar) esse 'caixilho', utilizando para isso o parâmetro
border="".
O Border indica que grossura deverá ter esse 'caixilho' e pode também indicar
que não tem caixilho nenhum. Este parâmetro só será necessário se realmente a
imagem fôr linkada. Assim:
<a href="html de destino"><img src="imagem.jpg" border="0"></a>
A imagem fica simples e sem bordas aparatosas. Experimente mudar o '0' do border
para outros números superiores e veja com os seus próprios olhos o quão feio se
pode tornar. Mas claro está isto é uma opinião pessoal.
Vejamos agora o estado possível da sua página pessoal, transposto para HTML, não
se esqueça que este é apenas uma das possibilidades.
----------------------------------------------------
<HTML>
<TITLE>A minha primeira página</TITLE>
<BODY bgcolor="#FFFF00" text="#0000FF" link="#FF0000" vlink="#808000">
<center>
<h1>A minha primeira página</h1>
</center>
<img src="imagem.jpg" width="75" height="100" border="0" align="left"
alt="A minha fotografia">
<b>
<font face="arial, helvetica" size="3" color="#000000">
Viva, esta é a minha primeira página.<br>
Estou ainda a aprender como construir
uma página html.
Nesta ultima aula aprendi como inserir uma imagem,
também aprendi a mudar o seu tamanho no HTML.
<br>
Sei também que se quiser posso
linkar esta imagem para outra página.
<br>
Na aula anterior compilei
alguns dos meus sites preferidos, que poderá visitar.
<br><br>
</font>
</b>
<font face="arial, helvetica" size="3" color="#000000">
<UL>
<LI>
<a href="http://www.aminharadio.com">
<b>AMINHARADIO</b>
</a> - O site português dedicado à rádio, restauro,
Sons, fotos, música antiga, etc.
<LI>
<a href="http://www.sapo.pt">
<b>Sapo</b>
</a> - O mais famoso dos índices de sites portugueses.
<LI>
<a href="http://www.negocios.pt">
<b>Canal de Negócios</b>
</a> - Onde eu vou para saber como estão as minhas acções da bolsa.
<LI>
<a href="autor.html">
<b>Acerca de mim</b>
</a> - Um pouco sobre o autor desta página.
</UL>
<p align="right">
Envie-me um
<b>
<a href="mailto:a.silva@xpto.pt">e-mail</a>
</b>
</p>
</font>
</BODY>
</HTML>
----------------------------------------------------
Mais uma vez lembramos que a melhor amiga da perfeição é a prática, por isso
não se canse de experimentar tudo o que lhe explicamos.
Comentários
Anónimo (não verificado)
Sex, 2008-05-16 15:04
Ligação permanente
Re: AULA 5: Manipulação de imagens
bem fixe
Camila Oliveira (não verificado)
Qua, 2011-07-13 14:56
Ligação permanente
Re: AULA 5: Manipulação de imagens
Oi!
As imagens realmente dão outra cara a página, além de chamar mais atenção para o próprio texto. Essa é uma ótima dica. Se tem interesse de tratá-las também no Photoshop, o http://www.buzzero.com/cursos-online disponibiliza cursos online que ensinam sobre o programa. Uma boa opção de curso online para quem quer uma imagem ainda mais bonita e profissional.
Espero que goste.
Abraços!