Olhe para qualquer página da web e você verá uma combinação de conteúdo de texto e imagens. Ambos os elementos são ingredientes essenciais para o sucesso de um website. O conteúdo de texto é o que os visitantes do site irão ler e o que os mecanismos de pesquisa usarão como parte de seus algoritmos de classificação. As imagens adicionarão interesse visual ao site e ajudarão a acentuar o conteúdo do texto.
Tags HTML vs. estilos CSS
Adicionar texto e imagens a sites é fácil. O texto é adicionado com tags HTML padrão como parágrafos, cabeçalhos e listas, enquanto as imagens são colocadas em uma página com o elemento. Depois de adicionar uma imagem à sua página da web, no entanto, você pode querer que o texto flua próximo à imagem, em vez de alinhá-la abaixo (que é a maneira padrão como uma imagem adicionada ao código HTML será processada no navegador). Tecnicamente, existem duas maneiras de obter esse visual, usando CSS (recomendado) ou adicionando as instruções visuais diretamente no HTML (não recomendado, pois você deseja manter a separação de estilo e estrutura do seu site).
Como usar CSS para fazer o texto fluir ao redor de uma imagem
A maneira correta de alterar a forma como o texto de uma página e o layout das imagens e como seus estilos visuais aparecem no navegador é com CSS. Apenas lembre-se, já que estamos falando sobre uma mudança visual na página (fazendo o texto fluir ao redor de uma imagem), isso significa que é o domínio das Folhas de Estilo em Cascata.
-
Primeiro, adicione sua imagem à sua página da web. Lembre-se de excluir quaisquer características visuais (como valores de largura e altura) desse HTML. Isso é importante, especialmente para um site responsivo, em que o tamanho da imagem varia de acordo com o navegador. Certos softwares, como o Adobe Dreamweaver, adicionam informações de largura e altura às imagens inseridas com essa ferramenta, portanto, certifique-se de remover essas informações do código HTML! Certifique-se, entretanto, de incluir o texto alternativo apropriado. Aqui está um exemplo de como pode ser a aparência do seu código HTML:
type = “código”>
-
Para fins de estilo, você também pode adicionar uma classe a uma imagem. Este valor de classe é o que usaremos em nosso arquivo CSS. Observe que o valor que usamos aqui é arbitrário, embora, para este estilo particular, tendamos a usar valores de “esquerda” ou “direita”, dependendo de como queremos que nossa imagem se alinhe. Achamos que essa sintaxe simples funciona bem e é fácil para outras pessoas que talvez tenham que gerenciar um site no futuro entendam, mas você pode dar a isso o valor de classe que desejar.
type = “code”> Por si só, este valor de classe não fará nada. A imagem não será alinhada automaticamente à esquerda do texto. Para isso, agora precisamos nos voltar para nosso arquivo CSS.
-
Em sua folha de estilo, agora você pode adicionar o seguinte estilo: .left {
type = “code”> float: left;
type = “código”> preenchimento: 0 20px 20px 0;
type = “código”>}
type = “code”> O que você fez aqui foi usar a propriedade CSS “float”, que puxará a imagem do fluxo normal do documento (da forma como a imagem seria exibida normalmente, com o texto alinhado abaixo dela) e irá alinhá-la para o lado esquerdo de seu contêiner. O texto que vem depois dele na marcação HTML agora é colocado em volta dele. Também adicionamos alguns valores de preenchimento para que este texto não ficasse diretamente contra a imagem. Em vez disso, terá um bom espaçamento que será visualmente atraente no design da página. Na abreviatura CSS para preenchimento, adicionamos 0 valores às partes superior e esquerda da imagem e 20 pixels à esquerda e à parte inferior. Lembre-se de que você precisa adicionar algum preenchimento ao lado direito de uma imagem alinhada à esquerda. Uma imagem alinhada à direita (que veremos em um momento) teria preenchimento aplicado em seu lado esquerdo.
-
Se você visualizar sua página da web em um navegador, deverá ver agora que sua imagem está alinhada ao lado esquerdo da página e o texto a envolve perfeitamente. Outra maneira de dizer isso é que a imagem “flutua para a esquerda”.
-
Se você quiser mudar esta imagem para ficar alinhada à direita (como no exemplo da foto que acompanha este artigo), seria simples. Primeiro, você deve se certificar de que, além do estilo que acabamos de adicionar ao nosso CSS para o valor de classe “esquerdo”, também temos um para alinhamento à direita. Ficaria assim: .right {
type = “code”> float: right;
type = “código”> preenchimento: 0 0 20px 20px;
type = “código”>}
type = “code”> Você pode ver que isso é quase idêntico ao primeiro CSS que escrevemos. A única diferença é o valor que usamos para a propriedade “float” e os valores de preenchimento que usamos (adicionando alguns ao lado esquerdo de nossa imagem em vez de à direita).
-
Finalmente, você mudaria o valor da classe da imagem de “esquerda” para “direita” em seu HTML:
type = “código”>
-
Olhe para a sua página no navegador agora e sua imagem deve estar alinhada à direita com o texto perfeitamente enrolado ao redor dela. Temos a tendência de adicionar esses dois estilos, “esquerdo” e “direito” a todas as nossas folhas de estilo, para que possamos usar esses estilos visuais conforme necessário quando estamos criando páginas da web. Esses dois estilos tornam-se recursos agradáveis e reutilizáveis aos quais podemos recorrer sempre que precisarmos estilizar imagens com quebra de texto ao redor delas.
Use HTML em vez de CSS (e por que você não deve fazer isso)
Embora seja possível quebrar o texto em torno de uma imagem com HTML, os padrões da web determinam que CSS (e as etapas apresentadas acima) é o caminho a percorrer para que possamos manter uma separação de estrutura (HTML) e estilo (CSS). Isso é especialmente importante quando você considera que, para alguns dispositivos e layouts, esse texto não deve precisa fluir em torno da imagem. Para telas menores, o layout de um site responsivo pode exigir que o texto realmente se alinhe abaixo da imagem e que a imagem se estenda por toda a largura da tela. Isso é feito facilmente com consultas de mídia se seus estilos forem separados de sua marcação HTML. No mundo com vários dispositivos de hoje, onde imagens e texto aparecerão de maneira diferente para diferentes visitantes e em diferentes telas, essa separação é essencial para o sucesso e gerenciamento de uma página da web a longo prazo.
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Como envolver o texto em uma imagem.” ThoughtCo, maio. 14 de 2021, thinkingco.com/wrapping-text-around-image-3466530.
Kyrnin, Jennifer. (2021, 14 de maio). Como envolver o texto em uma imagem. Obtido em https://www.thoughtco.com/wrapping-text-around-image-3466530
Kyrnin, Jennifer. “Como envolver o texto em uma imagem.” ThoughtCo. https://www.thoughtco.com/wrapping-text-around-image-3466530 (acessado em 21 de maio de 2021).
