HTML - Imagens

As imagens são muito iportantes em uma página de web. É por isso que devem ser usadas da maneira certa. Insira imagens usando a tag <img/>.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  />

Demo

HTML - img src

"src" é a forma curta para "source" (fonte). Esse atributo é usado para indicar a localização da imagem. Como explicado no tutorial sobre links você pode usar qualquer URL para mostrar um arquivo.

Você pode colocar o URL inteiro, por exemplo:

htmlscr="http://www.tutorialehtml.com/assets_tutorials/img/image.jpg"

O padrão URL não é recomendado, porque no caso de você mudar o domínio, tere que mudar todas as imagens. ou se as imagens forem guardadas em outro domínio, use apenas scr="http://www.domain.com/image.jpg".

O fato de guardar as imagens em um servidor alternativo apresenta grandes vantagens se o espaço provido pelo seu domínio for limitado.

HTML - Atributo "alternativa" para imagens

O atributo "alt" é usado para apresentar texto ao invez de imagem no caso de por alguma razão o navegador não disponibilizar a imagem ou quando um usuário tem a opção "Mostrar Imagem" não selecionada.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg" />

Demo

HTML - O peso e a dimensão da imagem

Para determinar o peso e a dimensão da imagem é usado os atributos "height" (peso) e "width" (dimensão). Lógico, nâo!?

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  width="120" height="75" />

Demo

HTML - Alinhamento horizontal e vertical de uma imagem

Para isso usaresmos os atributos align e valign. As opções oferecidas por esses atributos são:

1. Align (horizontal)

• right
• left
• center

2. Valign (vertical)

• top
• bottom
• center

html<img alt="" align="right" src="/assets_tutorials/img/image.jpg" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML - Usando imagens como links

Isso é apenas uma introcução, nós falaremos mais sobre isso no próximo tutorial. As imagens são bem úteis como links e podem ser formadas como no seguinte:

html<a href="http://www.tutorialehtml.com/" title="HTML link image example">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

A imagem acima enviará para a página de abertura. VocÇe pode mudar para sua página principal e aqui você tem uma foto com um link para começar sua próxima página.

HTML - Miniaturas

Miniaturas são versões em miniatura (menos kilobytes) de imagens que tem uma qualidade muito superiro. Para criar uma miniatura salve a imagem com uma qualidade inferior a da original. E então linque essa imagem pequena com a original de alta qualidade.

html<a href="/assets_tutorials/img/image.jpg"  title="HTML link image thumbnail example">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo