Como colocar imagem em
uma página HTML





Em HTML, imagens são o que trazem vida e movimento à nossa página, mas não é só jogar a imagem sem apropria-la a página, na maioria das vezes ela precisa ser trabalha para se encaixar as características visuais de nossa página.
Mas tomem cuidado, elas também são as principais responsáveis por tornarem nosso site pesado e consequentemente esgotar a paciência de quem espera o carregamento.



Comando e propriedades Função e Exemplos

<img src="bnd28.jpg">

A esquerda temos o comando de inserção de imagens simplismente. Entre aspas ("") se encontram o nome da imagem juntamente com sua extenção. Assim, podemos inserir qualquer imagem no formato ("Imagem.jpg") ou ("Imagem.gif").

Para inserirmos uma imagem, bata que ela esteja na mesma pasta que está a página que a suportará. Se não estiver, seu endereço, nome e extenção devem estar respectivamente informados e intercalados por barras invertidas. Tudo isso entre aspas ("") (Exemplo: <img src="SiteHTML\
Imagens\bnd28.jpg">)

Abaixo segue o exemplo do simples código à esquerda:

<img src="bnd28.jpg" align=center>

A propriedade align nos permite alinhar nossa imagem em vários ângulos distintios.

Para se alinhar imagens a esquerda, atribui-se o valor left à propriedade align ( Exemplo: <img src="bnd28.jpg" align=left> ).

Para se alinhar imagens ao centro, atribui-se o valor center à propriedade align ( Exemplo: <img src="bnd28.jpg" align=center> ).

Para se alinhar imagens a direita, atribui-se o valor right à propriedade align ( Exemplo: <img src="bnd28.jpg" align=right> ).

Exemplo do código à esquerda:

<img src="bnd28.jpg" border=3>

A propriedade border permite-nos colocarmos bordas em imagens.

A grossura da borda é dada pelo número (em pixels) atribuido a propriedade border.

Exemplo do código à esquerda:

<img src="bnd28.jpg" width=200 height=100>

Não muito aconselhável, as propriedades width e height, são usadas para redimensionar uma imagem na página.

Usando apenas a propriedade width ou apenas height, redimensionamos largura e altura na mesma proporção. ( Exemplo: <img
src="bnd28.jpg" width=200>
)

Exemplo mensionado acima:



Usando a propriedade width e heigth ao mesmo tempo, podemos redimensionar separadamente cada dimensão da imagem. ( Exemplo:
<img src="bnd28.jpg" width=50px height=75px>
)

Exemplo da descrição acima:


Para redimensionarmos apenas uma dimensão devemos atribuir a dimenção oposta a ser redimensionada o mesmo valo da sua dimenção real, e atribuir a dimensão desejada o valor desejado ( Exemplo:
<img src="bnd28.jpg" width="150px" height="100px">
)

No exemplo acima, a largura (width=150) foi mantida e a altura (height=59) foi aumentada para 100 (height=100).






Visite o Apostilando.com, O maior site de apostilas do Brasil!
Muitas dicas! Visite um dos melhores site para iniciantes!