HTML: Trabalhando com imagens

Nem só de texto uma página da internet é feita. Bom, na verdade tem varias páginas por ai, algumas lindas, que só possuem texto ou ícones feitos incrivelmente somente com CSS3. Mas, dá pra entender que uma imagem vale por mais de mil palavras, e as vezes você vai sentir a necessidade de adicionar uma imagem a usa página.

É para esse propósito que existe a tag . Ela é usada para inserir uma imagem, ela contém somente atributos e não possui uma tag de fechamento. O local onde a imagem esta salva (URL) deve ser definido dentro do atributo src. A sintaxe vai se parecer com isso:

Neste exemplo estamos definindo que a imagem a ser mostrada é a possui o nome imagem.jpg que está na mesma pasta/diretório que o arquivo HTML.

Caso uma imagem não possa ser exibida, o atributo alt especifica um texto alternativo para descrever a imagem em palavras.

Dimensionamento

Para definir o tamanho de uma imagem, use os atributos de largura ou altura (width e height). O valor pode ser em pixels ou em porcentagem. Como no exemplo a baixo:

Vale lembrar que carregar imagens demanda tempo, e usar imagens grandes pode fazer com que a sua página não carregue na melhor velocidade possível. É por isso que existem ferramentas para comprimir imagens, mas este já é um assunto um pouco mais avançado.

Borda

Por padrão uma imagem não tem bordas, mas você pode adicionar bordas dentro de uma tag de imagem para criar uma ao redor dela, como no exemplo abaixo:

Por padrão o Internet Explorer 9, e versões anteriores, mostram uma borda ao redor da imagem, a menos que uma atributo de borda seja definido.

Vítor Norton

I don't dream, I do a lot of things. Sou desenvolvedor Windows e Web, tenho o título de Windows Insider MVP (Anteriormente Microsoft MVP: Windows Experience), tenho uma empresa (Y'APP) e uma startup (M!xer). Sou escritor, programador, artista, mágico e inventor.