SdevLab – Tutorial | Imagem em HTML

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

Imagem em HTML

Trabalhar com imagens em html é bastante simples, existem poucas tags e podemos interagir pouco com elas.

Para inserir uma imagem em um arquivo, faça como no trecho de código abaixo:


<img src="minha_imagem.jpg">
<img src="www.site.com.br/imagens/imagem.jpg">

As duas maneiras estão corretas, porém na primeira, se sua imagem estiver em um diretório diferente do diretório de sua página, ela não será exibida.

Alinhando imagens

Para alinhar uma imagem, utilize o atributo align com o argumento bottom, middle ou top, e sua imagem ficará alinhada nas respectivas posições em relação ao texto. Segue abaixo trechos de código para exemplificar:

<img src="minha_imagem.jpg" align="bottom">
<img src="minha_imagem.jpg" align="middle">
<img src="minha_imagem.jpg" align="top">

Atributo Alt

O atributo alt é utilizado para colocar uma “legenda” interna na foto. Interna porque ela só será exibida se o usuário passar o mouse sobre a imagem (existem alguns navegadores que não suportam).
Os sites validadores de código, ou seja, que verificam se você escreveu seu site com a semântica correta avaliam uma imagem sem o atributo alt como não correta, isto é, ela não está errada, mas vale uma advertência, pois alguns sistemas de navegação para deficientes se valem da legenda da imagem.
Segue trecho de codigo exemplificando o atributo:

<img src="imagem.jpeg" alt="Minha Imagem é legal">

Ajustando as dimensões da imagem

Para ajustar as dimensões de uma imagem, basta usar os atributos width e height como no exemplo abaixo:

<img src="imagem.jpg" width="50" height-"50">

Tome cuidado com este atributo, pois dependendo das alterações que você fizer, a imagem pode sair distorcida.

Colocando um link na imagem

Para inserir um link em uma imagem, faça como no exemplo abaixo:

<a href="http://www.site.com.br">
     <img src="imagem.jpg" alt="Clique na imagem para seguir para o site." border="0">
</a>

Note que foi inserido outro atribudo dentro da tag <img>, que é o atributo border. Este atributo define (assim como nas tabelas) a expessura da borda da imagem. No exemplo escolhemos uma imagem sem borda, colocando para isso border=”0″.

Este foi o tutorial de imagens, até a próxima!
😉

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

2 comentários sobre “SdevLab – Tutorial | Imagem em HTML

  1. Pingback: SdevLab – Tutoriais | Caracteres Especiais em HTML « Sanoj's devLab
  2. Pingback: SdevLab – Curso| Aprenda HTML 4.1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s