Buscar

Inserindo imagens no HTML e estilizando com CSS

Prof. Angelo F. Gomes
24 de ago. de 2017
3 min de leitura

Conforme discutido em nossas aulas, um bom site deve ser atraente em vários aspectos e, certamente, um deles é o design (visual).

Quando iniciamos o desenvolvimento de uma página, um dos primeiros elementos que definimos é o seu background. Neste momento, normalmente, o desenvolvedor busca uma imagem bonita e que chame a atenção do visitante. É legal, mas devemos prestar atenção aos demais elementos que irão compor a página, pois a imagem escolhida pode comprometer a interpretação dos demais elementos, como por exemplo: textos, tabelas e até mesmo outras imagens.

Lembrando a fase de Design de um site, antes de iniciar o desenvolvimento de uma página, você deve "rascunhar" ou "desenhar" como ela será. Prever todos os elementos que irão compor o projeto e como serão distribuídos no espaço, dão algumas pistas de como estes deverão ser implementados e estilizados.

Neste roteiro, além de demonstramos como estilizar alguns elementos básicos, já conhecidos e outros nem tanto, vamos dar algumas dicas para que o seu projeto fique bem legal.

Lembre-se:

"O equilíbrio entre os elementos é a chave do sucesso!"

De forma geral, para inserirmos uma imagem no HTML, devemos utilizar a tag <img> e definirmos os atributos "src", "alt", "title", "width" e "height".

Sintaxe:

Atenção: uma imagem pode estar localizada no seu computador ou na web. No primeiro caso, o ideal é que a imagem seja colocada em uma subpasta do seu projeto e deve ser distribuída junto com o mesmo. No segundo caso, você deve obter o endereço completo da imagem, não do site onde ela foi publicada. Dê preferência pela primeira opção. É mais seguro e rápido.

Exemplos:

A implementação de uma imagem, normalmente, é realizada através do uso do elemento <div>, possibilitando sua estruturação e estilização com uso do CSS.

Exemplo:

<div>

</div>

Contudo, o uso de vários elementos <div> torna a codificação muito genéria, apesar de ser utilizada em larga escala pelos desenvolvedores.

Para deixar as coisas mais simples e diretas, o HTML5 passou a disponibiliza as tags <figure> e <figcaption> (para legendas). Assim, ao visualizarmos estas tags, sabemos exatamente o significado daquele contêiner.

Exemplo:

<figcaption>Cidade Maravilhosa</figcaption>

</figure>

Para redimensionarmos uma imagem na página HTML, devemos colocá-la dentro de um elemento <div> ou <figure> e referenciarmos uma classe criada no CSS.

<body>

</figure>

</body>

No CSS, dentro da classe "trata-imagem", utilize as combinações de propriedades (width , min-width e min-height) ou (width, max-width e max-height).

.trata-imagem img

{

max-width: 40%;

/*Define a largura máxima que a imagem pode ter em relação ao elemento <figure> do exemplo, onde atribuímos valores em porcentagem (%) ou pixels (px).*/

max-height: 40%;

/*Define a altura máxima que a imagem pode ter em relação ao elemento.*/

width: auto;

/*Quando atribuído o valor auto, as dimensões são adequadas aos valores proporcionais definidos nos atributos anteriores. O que for alcançado primeiro. */

height: auto;

}

Normalmente, quando inserimos um elemento, este se posiciona do lado esquerdo da página ou contêiner. Para reposicionarmos uma imagem na página, de forma fácil, devemos utilizar o atributo "float".

.trata-imagem img

{

float: left;

/*Define que a imagem ficará do lado esquerdo do elemento <figure>. Para posicioná-la à direita, substitua pelo valor "right".*/

}

Observação:

Para centralizar uma imagem primeiro transforme o que seria normalmente um elemento de imagem em linha, em um elemento em nível de bloco.

A seguir, adicione margens à esquerda e à direita da imagem para centralizá-la. O valor adequado para as margens da esquerda e da direita para centralizar algo é automático.

.trata-imagem img

{

display: block;

margin-right: auto;

margin-left: auto;

}

É comum que uma página tenha algum texto posicionado ao lado da imagem. Para que isso ocorra, você deve estilizar a tag <img> utilizando os atributos float e padding em conjunto.

No exemplo abaixo, o texto deve aparecer do lado direito da imagem.

No HTML:

<body>

Este código exemplifica o posicionamento de um texto do lado direito de uma imagem.

<br />Linha 2

<br />Linha 3

<br />Linha 4

</figure>

</body>

No CSS:

.trata-imagem img

{