AULA 5: Manipulação de imagens

Separadores primários


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

bem fixe

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!


Faça um donativo!

Faça um donativo!

Agora é mais fácil com Paypal!

Com o paypal.me pode contribuir para o site em qualquer moeda e em qualquer valor com a segurança desta plataforma.

Clique aqui para ajudar com o que quiser, com o que poder.