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. Conteúdo de texto é o que os visitantes do site irão ler e quais 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.
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. Uma vez que você tenha adicionado uma imagem à sua página da web, você pode querer ter o fluxo de texto próximo à imagem, em vez de alinhar abaixo dela (que é a maneira padrão como uma imagem adicionada ao código HTML será renderizada no navegador). Tecnicamente, há duas maneiras de se conseguir essa aparência, seja usando CSS (recomendado) ou adicionando as instruções visuais diretamente no HTML (não recomendado, pois você deseja manter a separação entre estilo e estrutura do site).
Usando CSS
A maneira correta de alterar a forma como o layout de texto e imagens de uma página e como seus estilos visuais aparecem no navegador é com CSS. Basta lembrar, uma vez que estamos falando de uma mudança visual na página (fazendo o fluxo de texto em torno de uma imagem), isso significa que é o domínio de 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, adicionarão informações de largura e altura às imagens inseridas com essa ferramenta, portanto, remova essas informações do código HTML! No entanto, certifique-se de incluir o texto alternativo apropriado. Aqui está um exemplo de como seu código HTML pode parecer:
-
Para fins de estilo, você também pode adicionar uma classe a uma imagem. Este valor de classe é o que vamos usar no nosso arquivo CSS. Observe que o valor que usamos aqui é arbitrário, embora, para esse estilo específico, tenhamos a tendência de usar valores de "esquerda" ou "direita", dependendo de como queremos que nossa imagem se alinhe. Nós achamos que a sintaxe simples funciona bem e é fácil para os outros que podem ter que gerenciar um site no futuro para entender, mas você poderia dar a ela qualquer valor de classe que desejar.
Por si só, esse valor de classe não fará nada. A imagem não será alinhada automaticamente à esquerda do texto. Para isso, agora precisamos recorrer ao nosso arquivo CSS.
-
Na sua folha de estilo, agora você pode adicionar o seguinte estilo:
.esquerda {
float: esquerda;
preenchimento: 0 20px 20px 0;
}
O que você fez aqui é usar a propriedade "float" do CSS, que puxará a imagem do fluxo normal do documento (a maneira que a imagem normalmente seria exibida, com o texto alinhado abaixo dela) e alinhará a imagem ao lado esquerdo do contêiner. . O texto que vem depois dele na marcação HTML agora envolve o texto. Também adicionamos alguns valores de preenchimento para que esse texto não ficasse diretamente na imagem. Em vez disso, ele terá um bom espaçamento que será visualmente atraente no design da página. Na abreviação de CSS para preenchimento, adicionamos 0 valores ao lado superior e esquerdo da imagem e 20 pixels à esquerda e à parte inferior. Lembre-se, você precisa adicionar um pouco de preenchimento no lado direito de uma imagem alinhada à esquerda. Uma imagem alinhada à direita (que veremos daqui a pouco) teria preenchimento aplicado ao 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 é bem envolvente. Outra maneira de dizer isso é que a imagem é "flutuada para a esquerda".
-
Se você quisesse alterar essa imagem para ser alinhado à 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 da classe "left", também temos um para o alinhamento à direita. Ficaria assim:
.certo {
flutuar: certo;
preenchimento: 0 0 20px 20px;
}
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 (adicionamos alguns ao lado esquerdo de nossa imagem, e não à direita).
-
Por fim, você alteraria o valor da classe da imagem de "esquerda" para "direita" no seu HTML:
-
Olhe para a sua página no navegador agora e sua imagem deve estar alinhada à direita com o texto contornando-a nitidamente. Nós tendemos a adicionar ambos os estilos, "esquerda" e "direita" a todas as nossas folhas de estilo, para que possamos usar esses estilos visuais quando 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 texto ao redor delas.
Usando HTML em vez de CSS (e por que você não deve fazer isso)
Embora seja possível encapsular o texto em torno de uma imagem com HTML, os padrões da Web determinam que o 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 ao redor 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 estique por toda a largura da tela. Isso é feito facilmente com consultas de mídia se seus estilos forem separados da marcação HTML.No mundo atual de vários dispositivos, onde as imagens e o texto aparecerão de maneira diferente para diferentes visitantes e em diferentes telas, essa separação é essencial para o sucesso e o gerenciamento a longo prazo de uma página da web.
