Com embolicar text al voltant d'una imatge

Mireu qualsevol pàgina web i veureu una combinació de contingut i imatges de text. Tots dos elements són ingredients essencials en l'èxit d'un lloc web. El contingut del text és el que els visitants del lloc llegiran i els motors de cerca utilitzaran com a part dels algoritmes de classificació. Les imatges afegiran un interès visual al lloc i ajuden a accentuar el contingut del text.

L'addició de text i imatges als llocs web és fàcil. El text s'afegeix amb etiquetes HTML estàndard com ara paràgrafs, encapçalaments i llistes, mentre que les imatges es col·loquen en una pàgina amb l'element . Una vegada que hàgiu afegit una imatge a la vostra pàgina web, és possible que vulgueu que el text flueix al costat de la imatge, en comptes d'alinear-se a sota (que és la forma predeterminada que es mostrarà al navegador en una imatge afegida al codi HTML). Tècnicament, hi ha dues maneres d'aconseguir aquest aspecte, ja sigui utilitzant CSS (recomanat) o afegint les instruccions visuals directament a l' HTML (no es recomana, ja que voleu mantenir la separació d'estil i estructura del vostre lloc web).

Ús de CSS

La forma correcta de canviar la manera en què el text i el disseny d'imatges d'una pàgina i com apareixen els seus estils visuals al navegador és amb CSS . Recordeu, ja que estem parlant d'un canvi visual a la pàgina (fent que el flux de text sigui al voltant d'una imatge), això significa que és el domini de Fulls d'estil en cascada.

1. Primer, afegiu la vostra imatge a la vostra pàgina web. Recordeu excloure'n les característiques visuals (com ara els valors d'amplada i alçada) d'aquest HTML. Això és important, especialment per a un lloc web sensible on la mida de la imatge variarà en funció del navegador. Alguns programes, com Adobe Dreamweaver, afegiran informació d'amplada i alçada a les imatges que s'insereixen amb aquesta eina, així que assegureu-vos d'eliminar aquesta informació del codi HTML. Tanmateix, assegureu-vos d'incloure el text alt adequat . Aquest és un exemple de com es pot veure el vostre codi HTML:
2. Per a finalitats d'estil, també podeu afegir una classe a una imatge. Aquest valor de classe és el que utilitzarem al nostre fitxer CSS. Tingueu en compte que el valor que utilitzem aquí és arbitrari, encara que, per a aquest estil particular, tendim a utilitzar valors de "esquerra" o "dreta", depenent de quina manera volem que la nostra imatge s'alinei. Trobem que la senzilla sintaxi funciona bé i que els altres que puguin haver de gestionar un lloc en el futur per ser entesos siguin fàcils, però podeu donar-li qualsevol valor de classe que vulgueu.
   2. Per si mateix, aquest valor de classe no farà res. La imatge no s'alinearà automàticament a l'esquerra del text. Per a això, ara hem de recórrer al nostre fitxer CSS.

1. Al full d'estils, ara podeu afegir el següent estil:
   1. .left {
   2. flota: esquerra;
   3. padding: 0 20px 20px 0;
   4. }
   5. El que heu fet aquí és utilitzar la propietat CSS "flotant" , que mostrarà la imatge del flux normal del document (la manera que normalment es mostrarà, amb el text alineat per sota d'ell) i el alinearà al costat esquerre del contenidor . El text que ve després en el marcat HTML ara s'introdueix al voltant d'ell. També vam afegir alguns valors de farcit perquè aquest text no estigués directament en contra de la imatge. En lloc d'això, tindrà un bon espai que serà visualment atractiu en el disseny de la pàgina. A la taquigrafia CSS per al farciment, hem afegit 0 valors al costat superior i esquerre de la imatge, i 20 píxels a la seva esquerra i inferior. Recordeu, heu d'afegir una mica de farcit al costat dret d'una imatge alineada a l'esquerra. Una imatge alineada a la dreta (que veurem en un moment) tindria aplicat el farciment al seu costat esquerre.
2. Si veieu la vostra pàgina web en un navegador, ara haureu de veure que la vostra imatge està alineada al costat esquerre de la pàgina i el text s'adapta bé al voltant. Una altra manera de dir això és que la imatge està "flotant cap a l'esquerra".

1. Si voleu canviar aquesta imatge per alinear-se a la dreta (com en l'exemple de foto que acompanya aquest article), seria senzill. En primer lloc, heu d'assegurar-vos que, a més de l'estil que acabem d'afegir al nostre CSS per al valor de classe de "esquerra", també tenim un per a l'alineament de la dreta. Es veuria així:
   1. .dret {
   2. flota: a la dreta;
   3. padding: 0 0 20px 20px;
   4. }
   5. Podeu veure que és gairebé idèntic al primer CSS que vam escriure. L'única diferència és el valor que fem servir per a la propietat "flotant" i els valors d'emplenament que fem servir (afegint-ne un a la part esquerra de la nostra imatge en comptes de la dreta).
2. Finalment, canviaríeu el valor de la classe d'imatge de "esquerra" a "dreta" al vostre HTML:
3. Mireu ara la vostra pàgina al navegador i la vostra imatge s'ha d'alinear a la dreta amb un text que s'adapta perfectament al voltant. Tendim a afegir aquests dos estils, "left" i "right" a tots els nostres fulls d'estil perquè puguem utilitzar aquests estils visuals quan sigui necessari quan estiguem creant pàgines web. Aquests dos estils es converteixen en funcions simpàtiques i reutilitzables que podem recórrer sempre que necessitem imatges d'estil amb text envoltant-les.

Ús d'HTML en lloc de CSS (i per què no haureu de fer això)

Encara que es pot fer envoltar text al voltant d'una imatge amb HTML, els estàndards web dicten que CSS (i els passos presentats anteriorment) és el camí a seguir perquè puguem mantenir una separació de l'estructura (HTML) i l'estil (CSS). Això és especialment important quan es considera que, per a alguns dispositius i dissenys, és possible que el text no sigui necessari fluir per la imatge. Per a pantalles més petites, un disseny web sensible pot requerir que el text s'ajusti de forma predeterminada per sota de la imatge i que la imatge estigui completa l'amplada de la pantalla. Això es fa fàcilment amb consultes de mitjans si els vostres estils són separats del vostre marcat HTML. En el món dels múltiples dispositius actuals, on les imatges i el text apareixeran de manera diferent per a diferents visitants i en diferents pantalles, aquesta separació és fonamental per a l'èxit a llarg termini i la gestió d'una pàgina web.