Tutor Designer: Acrescentando imagem

terça-feira, 20 de julho de 2010

Acrescentando imagem

Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não poderá usar o formato BMP.

A tag para inserir uma imagem em sua página é a seguinte:

< img src=" endereço da imagem com extensão" />


Atributos de Imagem



-

Width e Height


São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas você pode alterar o tamanho original da imagem.

- Alt
Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.

- Border
Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribuído é zero.

< img src="http://sistematiqueiros.files.wordpress.com/2009/08/html.jpg" alt="texto" border=0 width="50" height="60"/>

O resultado sera:
texto


Alinhando as imagens


Você pode usar muitos recursos para fazer o alinhamento de textos e imagens em sua página, e dar uma organização e visual diferentes. Para fazer os alinhamentos, você inclui parâmetros do alinhamento dentro da tag de imagem.



< img src="nome da imagem " align="top"/>
Repare que só incluímos o align="top" na tag de imagem.



Este é um exemplo de alinhamento no meio da imagem. Para este efeito a tag de imagem deve ficar assim:

< img src="nome da imagem" align="middle"/>
Repare que só incluímos o align="middle" na tag de imagem.

Veja que agora você tem um efeito onde o texto fica ao redor da imagem, igual ao texto em jornais. Trata-se de um ótimo recurso para quando você deseja colocar um texto ao lado de uma foto que destaque mais o assunto do texto.



A tag para este alinhamento é: Esquerda
< img src="nome da imagem" align="left">




Veja que agora a imagem está alinhada do lado direito e o texto fica ao redor. É exatamente o oposto do alinhamento à esquerda.

A tag para este alinhamento é: Direita
< img src="nome da imagem" align="right">




- Para se ter uma imagem centralizada:

< CENTER>< img src="nome da imagem">< /CENTER>