Precisa do código para quebrar o texto em torno de uma imagem? Normalmente, quando você cria uma página HTML , tudo flui de forma linear, ou seja, um bloco diretamente após o outro. Todos os meus posts anteriores são um exemplo disso, ou seja, texto, depois imagem, depois texto, etc.

Às vezes, você pode querer incluir texto ao lado de uma imagem em vez de abaixo dela. Isso é chamado de quebra de texto ao redor da imagem. Na verdade, é bastante fácil quebrar o texto usando HTML . Observe que você não precisa usar CSS para quebrar o texto.

No entanto, atualmente, o W3C recomenda o uso de CSS em vez de HTML para esse tipo de tarefa. Mencionarei os dois métodos abaixo, mas se puder, é melhor usar CSS , pois é mais adaptável a designs de sites responsivos.

Enrole o texto ao redor da imagem usando HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pelentesque nunc in lorem egestas non imperdiet enim congue.

Para que o texto seja quebrado no lado direito da imagem, você deve alinhar a imagem à esquerda:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

Se você quiser que o texto apareça à esquerda e a imagem à direita, basta alterar o parâmetro align para “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pelentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

É isso! Bem^(Pretty) fácil né? A única vez que você deseja usar CSS é se quiser adicionar margens às imagens, para que haja algum espaço entre o texto e a imagem.

Você pode adicionar margens a uma imagem usando o seguinte código de estilo CSS :

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

O código acima usa o elemento CSS MARGIN^{(MARGIN CSS)} para adicionar 10 pixels de espaço em branco no lado direito da imagem. Como alinhamos a imagem à esquerda, queremos adicionar o espaço em branco à direita.

Basicamente, os quatro números representam TOP RIGHT BOTTOM LEFT . Então, se você quiser adicionar o espaço em branco a uma imagem alinhada à direita, faça o seguinte:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Portanto, é bastante simples usar HTML para realizar essa tarefa, mas, mais uma vez, pode não funcionar bem para sites responsivos.

Enrole o texto ao redor da imagem usando CSS

A melhor maneira de quebrar o texto em torno de uma imagem é usar CSS . Ele oferece um controle de granulação mais fino sobre o posicionamento dos elementos e funciona melhor com os padrões de codificação modernos.

<img src="IMAGE URL" alt="A photo" class="left" />

Mesmo que eu tenha incluído CSS diretamente na tag de imagem no exemplo de HTML , você realmente nunca mais deveria fazer isso. Em vez disso, você deve ter um arquivo separado chamado folha de estilo que contém todo o seu código CSS .

Na tag IMG , você simplesmente atribui uma classe à tag e dá um nome a ela. No meu exemplo, nomeei a classe left . Na minha folha de estilo, tudo o que tenho que fazer é adicionar o seguinte código:

.left {
 float: left;
 padding: 0 10px 0 0;}

Como você pode ver, adicionei 10px de preenchimento ao lado direito da imagem alinhada à esquerda. Também usei a propriedade float para tirar a imagem do fluxo normal do documento e colocá-la no lado esquerdo do container pai.

Como você pode ver, é muito mais limpo do que adicionar todo esse código à própria tag IMG . Também é mais fácil de gerenciar e você pode usar muito mais propriedades CSS para personalizar a aparência da sua página da web. Se você tiver alguma dúvida, sinta-se à vontade para comentar. Aproveitar!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you create an HTML page, everything flows linеarly, meaning onе block directly aftеr another. All of my previoυs posts are an example of thіs, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Como digitalizar um código QR no iPhone e Android

• Como imprimir mensagens de texto do Android

• Salvar uma lista de processos em execução em um arquivo de texto no Windows

• Como baixar arquivos e visualizar o código do GitHub

• Pesquise dentro de vários arquivos de texto de uma só vez

• Como transferir mensagens de texto do iPhone para o Android

• Como manter seu PC com Windows acordado sem tocar no mouse

• Como baixar o instalador offline do Google Chrome (autônomo)

• Como atualizar o Raspberry Pi

• Como criar e digitalizar um código Spotify

• Como adicionar Shadow a Text or Image em GIMP

• Corrigir “O dispositivo não pode iniciar. (Código 10)” Erro

• Como construir seu próprio laptop

• Como pin Text and Image a Clipboard History em Windows 10

• Como realizar um teste de estresse da CPU

• Livre Online OCR sites e serviços para extrair Text de Image

• Como girar texto e imagens no Photoshop

• Remova os rótulos de texto dos ícones da área de trabalho no Windows 7/8/10

• Como manter o software do seu PC atualizado automaticamente

• Como abrir arquivos de imagem EPS no Windows