Como engadir texto ao redor dunha imaxe

Mire calquera páxina web e verá unha combinación de contido de texto e imaxes. Ambos elementos son ingredientes esenciais para o éxito dun sitio web. O contido do texto é o que os visitantes do sitio lerán e os motores de busca utilizarán como parte dos seus algoritmos de clasificación. As imaxes engadirán interese visual ao sitio e axudarán a acentuar o contido do texto.

Engadir texto e imaxes a sitios web é sinxelo. O texto engádese con etiquetas HTML estándar como parágrafos, títulos e listas, mentres que as imaxes son colocadas nunha páxina co elemento . Unha vez que engadiu unha imaxe á súa páxina web, con todo, quizais queira que flúa o texto á beira da imaxe, en vez de aliñar debaixo dela (que é o xeito predeterminado de que unha imaxe engadida ao código HTML mostrará no navegador). Técnicamente, hai dúas maneiras de lograr este aspecto, xa sexa mediante CSS (recomendado) ou engadindo as instrucións visual directamente no HTML (non se recomenda, xa que desexa manter a separación do estilo e a estrutura do seu sitio web).

Usando CSS

A forma correcta de cambiar o xeito no que o texto e o deseño das imaxes dunha páxina e a forma en que os seus estilos visuais aparecen no navegador é con CSS . Basta lembrar, xa que estamos a falar dun cambio visual na páxina (facendo fluír o texto nunha imaxe), isto significa que é o dominio das Follas de estilo en cascada.

1. En primeiro lugar, engade a súa imaxe á súa páxina web. Lembre eliminar as características visuais (como os valores de ancho e alto) a partir dese HTML. Isto é importante, especialmente para un sitio onde o tamaño da imaxe varíe de acordo co navegador. Certos programas, como Adobe Dreamweaver, engadirán información de ancho e alto ás imaxes que se insiren con esa ferramenta, así que asegúrese de eliminar esta información do código HTML. Non se esqueza, con todo, incluír o texto de alto apropiado . Aquí tes un exemplo de como se pode ver o teu código HTML:
2. Para fins de estilo, tamén pode engadir unha clase a unha imaxe. Este valor de clase é o que usaremos no noso ficheiro CSS. Teña en conta que o valor que usamos aquí é arbitrario, aínda que, para este estilo particular, tendemos a usar valores de "esquerda" ou "dereita", dependendo do xeito en que queremos que a nosa imaxe se alinee. Atopamos esa sintaxe simple para que funcione ben e sexa doado para os demais que poidan ter que xestionar un sitio no futuro para comprender, pero pode darlle calquera valor de clase que desexe.
   2. Por si só, este valor de clase non fará nada. A imaxe non estará aliñada automaticamente á esquerda do texto. Para iso, agora necesitamos recorrer ao noso arquivo CSS.

1. Na súa folla de estilo, agora pode engadir o seguinte estilo:
   1. .left {
   2. flotar: esquerda;
   3. padding: 0 20px 20px 0;
   4. }
   5. O que fixeches aquí é usar a propiedade CSS "flotante" , que tirará a imaxe do fluxo normal de documentos (a forma na que a imaxe veríase normalmente, co texto aliñado debaixo dela) e alíñalo no lado esquerdo do seu contedor . O texto que vén despois no marcador HTML agora envolve. Tamén engadimos algúns valores de acolchado para que este texto non estivese directamente en contra da imaxe. En vez diso, terá un bo espazamento que será visualmente atractivo no deseño da páxina. Na taquigrafia CSS para padding, engadimos 0 valores ao lado superior e esquerdo da imaxe e 20 píxeles á esquerda e ao fondo. Teña en conta que, cómpre engadir algo de recheo no lado dereito dunha imaxe aliñada á esquerda. Unha imaxe aliñada á dereita (que veremos nun intre) tería que aplicar o acolchado ao seu lado esquerdo.
2. Se ves a túa páxina web nun navegador, agora debes ver que a túa imaxe está aliñada ao lado esquerdo da páxina e o texto está ben envolto. Outra forma de dicir isto é que a imaxe está "flotando á esquerda".

1. Se quería cambiar esta imaxe para que estivese aliñada á dereita (como no exemplo da foto que acompaña este artigo), sería sinxelo. En primeiro lugar, debes asegurarte de que, ademais do estilo que acabamos de agregar á nosa CSS para o valor da clase de "esquerda", tamén temos un para o aliñamento dereito. Parecería así:
   1. .right {
   2. flotar: certo;
   3. padding: 0 0 20px 20px;
   4. }
   5. Podes ver que isto é case idéntico ao primeiro CSS que escribimos. A única diferenza é o valor que usamos para a propiedade "flotante" e os valores de recheo que usamos (engadindo algúns ao lado esquerdo da nosa imaxe en vez da dereita).
2. Finalmente, cambiarías o valor da clase da imaxe de "esquerda" a "dereita" no teu HTML:
3. Mire a túa páxina no navegador agora e a túa imaxe debe estar aliñada á dereita con texto que se envolve rotundamente. Tendemos a engadir estes dous estilos, "esquerda" e "dereita" a todos os nosos estilos de estilo para que poidamos usar estes estilos visuais cando sexa necesario cando creemos páxinas web. Estes dous estilos convértense en recursos agradables e reutilizables aos que podemos acudir sempre que necesitamos imaxes de estilo con envoltorio de texto ao seu redor.

Usando HTML en vez de CSS (e por que non debes facer isto)

Aínda que se pode facer envolver texto ao redor dunha imaxe con HTML, os estándares web dicían que CSS (e os pasos presentados anteriormente) é o camiño a seguir para que poidamos manter unha separación da estrutura (HTML) e do estilo (CSS). Isto é especialmente importante cando consideras que, para algúns dispositivos e esquemas, o texto pode non ter que fluír pola imaxe. Para pantallas menores, o deseño dun sitio web sensible pode esixir que o texto se axuste por debaixo da imaxe e que a imaxe estende o ancho total da pantalla. Isto faise fácilmente con consultas multimedia se os seus estilos están separados do seu marcado HTML. No mundo de dispositivos múltiples de hoxe, onde as imaxes e o texto aparecen de forma diferente para diferentes visitantes e en diferentes pantallas, esta separación é esencial para o éxito ea xestión dunha páxina web a longo prazo.