HTML Tutorial

As imagens são muito importantes para embelezar, bem como para representar muitos conceitos complexos de forma simples em sua página da web. Este tutorial o guiará por etapas simples para usar imagens em suas páginas da web.
Inserir Imagem

Você pode inserir qualquer imagem em sua página da web usando a tag <img>. A seguir está a sintaxe simples para usar essa tag.

 <img src="URL da imagem" ... lista de atributos />

A tag <img> é uma tag vazia, o que significa que pode conter apenas uma lista de atributos e não possui tag de fechamento.

Exemplo



Para tentar o exemplo a seguir, vamos manter nosso arquivo HTML index.html e o arquivo de imagem index.png no mesmo diretorio.

See the Pen
HTML – Inserindo Imagem by John Pires (@johnpiresBR)
on CodePen.

Você pode usar o arquivo de imagem PNG, JPEG ou GIF com base no seu conforto, mas certifique-se de especificar o nome do arquivo de imagem correto no atributo src. O nome da imagem sempre diferencia maiúsculas de minúsculas.

O atributo alt é um atributo obrigatório que especifica um texto alternativo para uma imagem, se a imagem não puder ser exibida.

Definir localização da imagem

Normalmente, mantemos todas as imagens em um diretório separado. Portanto, vamos manter o arquivo HTML test.htm em nosso diretório inicial e criar um subdiretório images dentro do diretório inicial, onde manteremos nossa imagem test.png.

Exemplo

Supondo que a localização da nossa imagem seja “image / test.png”, tente o seguinte exemplo:

See the Pen
HTML – Localizacao de imagem by John Pires (@johnpiresBR)
on CodePen.

Definir largura / altura da imagem:


Você pode definir a largura e altura da imagem com base em seus requisitos usando atributos de largura e altura. Você pode especificar a largura e a altura da imagem em termos de pixels ou porcentagem de seu tamanho real.

See the Pen
HTML – Definir largura / altura da imagem by John Pires (@johnpiresBR)
on CodePen.

Definir borda da imagem:

Por padrão, a imagem terá uma borda ao redor, você pode especificar a espessura da borda em termos de pixels usando o atributo de borda. Uma espessura de 0 significa que não há borda ao redor da imagem.

See the Pen
HTML – Definir borda da imagem by John Pires (@johnpiresBR)
on CodePen.

Definir alinhamento de imagem:



Por padrão, a imagem será alinhada no lado esquerdo da página, mas você pode usar o atributo de alinhamento para defini-lo no centro ou à direita.

See the Pen
HTML – Definir alinhamento de imagem by John Pires (@johnpiresBR)
on CodePen.