HTML & CSS - Parágrafos e imagens

A tag p é muito comum, ela representa um parágrafo e, obviamente, acomoda textos.

<p>Isto é um parágrafo</p>

A tag img representa uma imagem. A propriedade src diz aonde a imagem se encontra gravada (no hard disk).

Já a propriedade alt é um texto alternativo que será exibido caso o caminho para a imagem seja inválido.

<img src="imagem.png" alt="texto alternativo" />

Abaixo, apresento as duas tag's juntas para ilustrar como elas (podem) interagem.

<p>
    Este parágrafo contém uma imagem
    <img src="imagem.png" alt="texto alternativo" />
</p>

Estilizando

As duas tag's sozinhas não fazem muita coisa, mas se adicionarmos ao tempero a propriedade CSS float a brincadeira ficará mais interessante.

Podemos dizer para a imagem flutuar à esquerda, então o texto fluirá para o lado inverso (direita), veja o código e o resultado abaixo.

See the Pen Tom jobim - float left by Flávio Micheletti (@flaviomicheletti) on CodePen.

Ou podemos dizer para a imagem flutuar à direita e então o texto fluirá a esquerda, veja o resultado:

See the Pen Tom jobim - float right by Flávio Micheletti (@flaviomicheletti) on CodePen.

Comentários

comments powered by Disqus