Nola testu bat inguratu irudi baten inguruan

Web orri bat begiratzea eta testu-edukia eta irudiak konbinatzea ikusiko duzu. Elementu horiek oinarrizko osagaiak dira webgune baten arrakastan. Testu-edukia zer gune bisitari irakurri egingo da eta bilaketa-motorrak beren ranking algoritmoen zati gisa erabiliko du. Irudiak gune bisuala gehituko die eta testuaren edukia areagotu.

Webguneetako testuak eta irudiak erraz gehitzea erraza da. Testua HTML etiketak estandarekin gehitzen da, paragrafoekin, izenburuekin eta zerrendekin, irudiak elementuan agertzen diren bitartean. Irudi bat zure webgunera gehitu ondoren, hala ere, irudiaren ondoan dagoen testu fluxua eduki nahi duzu behean lerrokatu beharrean (hau da, HTML kodean gehitutako irudia nabigatzailean errendatuko den modu lehenetsian). Teknikoki, begirada hori lortzeko bi modu daude: CSS (gomendatua) erabiltzea edo HTML argibide bisualak zuzenean eranstea (ez da gomendagarria, zure webgunearen estilo eta egitura bereiztea nahi duzu).

CSS erabiltzea

Orrialde baten testua eta irudien diseinua aldatzeko modu egokia eta arakatzailean ikusizko estiloak nola CSS dituzten. Gogoan izan, orrialdeko aldaketa bisual bati buruz ari garenez (irudi baten inguruan testu-fluxua eginez), Cascading Style Sheets domeinuaren domeinua da.

1. Lehenik eta behin, gehitu irudia zure webgunera. Gogoratu HTML-ren edozein ikusizko ezaugarri (adibidez, zabalera eta altuera balioak). Garrantzitsua da, bereziki, webgune baten sentikorrena, non irudiaren tamaina aldatu egingo den nabigatzailean oinarrituta. Zenbait software, Adobe Dreamweaver bezala, zabalera eta altuera informazioa gehitzen zaizkio tresna horrekin sartzen diren irudiei, beraz, ziurtatu HTML kodeetatik informazio hau ezabatu nahi duzula. Ziur, ordea, alt testu egokia sartzea. Hona hemen zure HTML kodea nola begiratu dezaketen adibide bat:
2. Diseinatzeko helburuetarako, klase bat irudi batera ere gehi dezakezu. Klase-balioa hau da CSS fitxategian erabiliko dugun. Kontuan izan hemen erabiltzen dugun balioa arbitrarioa dela, nahiz eta estilo zehatz honetan "ezker" edo "eskuineko" balioak erabil ditzagun, gure irudia lerrokatzeko moduaren arabera. Sintaxia sinplea ondo funtzionatzen duela eta etorkizunean etorkizunean gunea kudeatu beharko luketen beste batzuk errazak izango dira, baina nahi duzuna nahi duzun edozein klase eman ahal izango duzu.
   2. Berez, klase-balioak ez du ezer egingo. Irudia ez da automatikoki lerrokatuko testuaren ezkerrean. Horretarako, gure CSS fitxategira bueltatu behar dugu.

1. Zure estilo-orrian, honako estilo hau gehi dezakezu:
   1. .left {
   2. flotatzen: utzi;
   3. betegarria: 0 20px 20px 0;
   4. }
   5. Hemen zer egin zenuen CSS "mugikorra" propietatearekin? Erabili CSS "float" propietatea , irudiaren dokumentu normalaren fluxua (irudia modu normalean bistaratuko lukeen moduan), eta haren edukiontziaren ezkerraldean lerrokatuko da . HTML markupean ondoren datorren testua orain itzulbiratu ezazu. Betegarriko balio batzuk ere gehitu ditugu, testua zuzenean irudiaren kontrakoa izan ez dadin. Horren ordez, orrialde baten diseinu erakargarria izango den tarte atsegina izango du. Atzeko estalkien CSS atalean 0 balio gehitu ditugu irudiaren goialdean eta ezkerrean, eta 20 pixel ezkerreko eta beheko aldean. Gogoratu ezkerreko lerrokatutako irudiaren eskuinaldean batzuk gehitu behar dituzula. Lerrokatu eskuineko irudia (une batez begiratuko duguna) ezkerreko aldean aplikatuko litzateke betegarria.
2. Zure webgunea arakatzailean ikusten baduzu, zure irudia orrialdearen ezkerraldean lerrokatuta dagoela ikusiko duzu eta testua ondo biltzen du inguruan. Horra hor beste modu bat irudia "ezkerrera mugitu" dela.

1. Irudi hau eskuinera lerrokatzeko (artikulu honekin batera doan argazkiaren adibidean bezala) aldatu nahi baduzu, erraza izango litzateke. Lehenik eta behin, ziur egon behar dugu, gure CSS-era gehitu dugun estiloa ez ezik, "ezkerrera" klase-balioa ere badugu bat lerrokatzeko eskubidea. Honen itxura izango litzateke:
   1. .right {
   2. float: right;
   3. betegarria: 0 0 20px 20px;
   4. }
   5. Ikusten duguna ia idatzi dugun CSS lehenengoa da. Ezberdintasun bakarra "flotatzen" dugun eta erabiltzen dugun betegarrien balioak erabiltzen ditugun balioa da (ezkerreko irudia ezkerreko aldean gehituz).
2. Azkenean, irudiaren klasearen balioa aldatuko zenuke "ezkerrean" eta "eskuinera" zure HTMLan:
3. Arakatu zure orria nabigatzailean orain eta zure irudia eskuinerantz lerrokatu behar da testuarekin ondo biltzeko. Estilo horietako bi, "ezker" eta "eskuinera" gehitzen zaizkio estilo-orri guztiei, web orrialdeak sortzen ari garenean beharrezkoak diren estilo bisualak erabil ditzagun. Bi estilo horiek estilo atseginak eta berrerabilgarriak bihurtzen dira. Horrela, estilo-irudiak behar ditugu testu inguruan biltzeko.

CSSren ordez HTML erabiltzea (eta zergatik ez zenuke hau egin)

Nahiz eta itzulbiratu testu bat HTMLren irudi baten inguruan egin daitekeen, web estandarrak CSS (eta goian aurkezten diren urratsak) bidea da, beraz, egitura (HTML) eta estilo (CSS) bereizketa mantendu ahal izango dugu. Hau bereziki garrantzitsua da kontuan hartuta, gailu eta diseinu batzuetarako, agian testu hori ez dela irudian zehar behar duen fluxua. Pantaila txikiagoetarako, web orriaren diseinu sentikorrek testua irudia azpitik lerrokatu eta irudia pantailaren zabalera osoa luzatzen duela eska dezake. Komunikabideen kontsultak erraz egiten dira zure estiloak zure HTML markatzeaz bereizten badira. Egungo gailu anitzeko munduan, irudiak eta testuak modu ezberdinean agertuko dira bisitari eta pantaila desberdinetan, bereizketa hau funtsezkoa izango da epe luzerako arrakasta eta web orri baten kudeaketarako.