Código de formatação com imagens nos textos

Hidekee Dom Jan 10, 2010 1:50 pm

Bem, Ichigo estava perguntando a mim como colocar imagens como nos blogs, disse que ia ver mas depois lembrei-me que os blogs usam a princípio html tb, então fui fuçar no meu próprio blog e achei o código cru (mais limpo) para colocar a imagem nos textos de modo a estarem inseridos. Notarão que não há hiperlink nas imagens, já que suponho que para tal o básico já basta. Então vamos ao exemplo:

Testando código... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... como a Villetta é tesuda... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla... blablablabla...

Para isso eu usei este código:

Código:: <img style="margin: 10pt 10px 10px 10pt; float: left; width: 250px; height: 330px;" src="http://farm5.static.flickr.com/4001/4260049434_bd2ccd577d_o.jpg" alt="" border="0" />

Onde podemos ver que coloquei margens ao redor da imagem, afim de que o texto não fique grudado nela. Para isso usei o trecho margin: 10pt 10px 10px 10pt;. A imagem é jogada para a esquerda no trecho float: left;. Pela lógica, para jogar para a direita basta colocar right no lugar de left. Depois ainda tem um trecho que é opcional, onde define-se largura e altura respectivamente com width: 250px; height: 330px;. Isso é importante caso queiram usar uma imagem maior e precise redimensionar. Não incentivo a usarem mto esse recurso, já que se tiverem uma imagem muito grande e ela for reduzida vai continuar com o mesmo peso em kb, fora que vcs podem acabar errando na proporção ou a imagem fique serrilhada na redução. Portanto o código que incentivo a usarem é este:

Código:: <img style="margin: 10pt 10px 10px 10pt; float: left;" src="http://farm5.static.flickr.com/4001/4260049434_bd2ccd577d_o.jpg" alt="" border="0" />

Mudando claro a imagem do meu flickr para o endereço da suas imagens ^^v

Wein Cruz Dom Jan 10, 2010 2:18 pm

Legal!
Gostei da imagem de exemplo hahahah XD

Ledah Dom Jan 10, 2010 3:43 pm

Ficou bacana ;3

bom para os novatos aprenderem algo.

Ichigo Seg Jan 11, 2010 9:03 am

podia escolher uma img mais decente pro exemplo, neh? u_u~ assim vai espantar as menininhs do forum u_u~

Hidekee Seg Jan 11, 2010 10:19 am

Ichigo escreveu:podia escolher uma img mais decente pro exemplo, neh? u_u~ assim vai espantar as menininhs do forum u_u~

De nada xD

Esta era a imagem que estava a esquerda na última postagem do meu blog. Simplesmente a peguei e pronto, nem fiquei escolhendo na verdade xD

Conteúdo patrocinado

Código de formatação com imagens nos textos

Código de formatação com imagens nos textos

Re: Código de formatação com imagens nos textos

Re: Código de formatação com imagens nos textos

Re: Código de formatação com imagens nos textos

Re: Código de formatação com imagens nos textos

Re: Código de formatação com imagens nos textos