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:
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>