Imagens no HTML - Tag <img> e o atributo src

Em HTML, imagens são definidas com a tag <img>.

A tag <img> é vazia, o que significa que ele contém apenas atributos, e não tem tag de fechamento.

Para exibir uma imagem em uma página, você precisa usar o atributo src. Src significa source, em português fonte. O valor do atributo src é o URL da imagem que você deseja exibir.

Sintaxe para definição de uma imagem:

<img src="url" alt="algum texto">

O URL aponta para o local onde a imagem é armazenada. Uma imagem chamado "vintage-age-1970s.jpg", localizado no diretório "images" em "agentewebmaster.ucoz.com.br" tem o URL: http://agentewebmaster.ucoz.com.br/images/vintage-age-1970s.jpg.

O navegador apresenta a imagem, onde a marca <img> ocorre no documento. Se você colocar uma tag de imagem entre dois parágrafos, o navegador mostra o primeiro parágrafo, em seguida, a imagem e, em seguida, o segundo parágrafo.

Imagens no HTML - o atributo alt

O atributo alt necessário especifica um texto alternativo para uma imagem, se a imagem não pode ser exibida.

O valor do atributo alt é um texto definido pelo autor:

Imagens HTML - o atributo Alt O atributo alt necessário especifica um texto alternativo para uma imagem, se a imagem não pode ser exibida. O valor do atributo alt é um texto definido pelo autor:

<img src="sorriso.gif" alt="Rosto sorrindo">

O atributo alt fornece informações alternativa para uma imagem se um usuário por algum motivo não pode vê-lo (por causa da conexão lenta, um erro no atributo src, ou se o usuário usa um leitor de tela).

Imagens HTML - Definir altura e largura de uma imagem

A height e width atributos são usados ​​para especificar a altura e a largura de uma imagem.

Os valores dos atributos são especificados em pixels por padrão:

<img src="sorriso.gif" alt="Rosto sorrindo" width="42" height="42">

Dica: É uma boa prática para especificar a altura ea largura de atributos de uma imagem. Se esses atributos são definidos, o espaço necessário para a imagem é reservado quando a página é carregada. No entanto, sem estes atributos, o navegador não sabe o tamanho da imagem. O efeito será que o layout da página vai mudar durante o carregamento (enquanto as imagens carregar).

Observações Básicas - Dicas Úteis

Nota: Não use muitas imagens em uma mesma página, pois de demorar para carregar a página

Nota: Quando uma página é carregada, é o navegador, naquele momento, que realmente fica a imagem de um servidor web e insere-o na página. Portanto, certifique-se de que as imagens realmente ficar no mesmo lugar em relação à página da web, caso contrário, os visitantes vão receber um ícone de link quebrado. O ícone de link quebrado é exibido se o navegador não consegue encontrar a imagem.

HTML tags de imagem

Em caso de dúvida, você pode tirar nos comentários.