Unsaon Pagbungkag sa Text sa Usa ka Imahe

Tan-awa ang bisan unsang panid sa web ug imong makita ang usa ka kombinasyon sa sulod sa sulod ug hulagway. Ang duha niini nga mga elemento kinahanglan nga mga sangkap sa kalampusan sa usa ka website. Ang sulod sa text mao ang gibasa sa mga bisita ug unsa nga mga search engine ang magamit isip kabahin sa ilang mga ranking algorithm. Ang mga imahe makadugang sa makita nga interes sa site ug makatabang sa pagpasabut sa sulod sa teksto.

Ang pagdugang og teksto ug mga hulagway sa mga website sayon. Ang teksto gidugang uban sa mga standard nga tag sa tag sama sa mga parapo, mga ulohan, ug mga lista, samtang ang mga imahe gibutang sa usa ka panid nga may elemento . Sa higayon nga nakadugang ka og usa ka hulagway sa imong web page, hinoon, gusto nimo nga ang teksto moagi sa daplin sa hulagway, imbis nga ibutang sa ubos niini (nga ang default nga paagi nga ang usa ka imahe nga idugang sa HTML code maghatag sa browser). Sa teknikal, adunay duha ka mga paagi nga mahimo nimo kini nga hitsura, pinaagi sa paggamit sa CSS (girekomenda) o pinaagi sa pagdugang sa visual instructions direkta ngadto sa HTML (dili girekomenda, tungod kay gusto nimo nga ipabilin ang panagbulag sa estilo ug estraktura sa imong website).

Paggamit sa CSS

Ang husto nga paagi sa pag-usab sa paagi sa usa ka teksto sa pahina ug mga hulagway sa mga hulagway ug sa unsang paagi ang ilang mga estilo sa biswal nga makita sa browser anaa sa CSS . Hinumdomi, tungod kay kita naghisgot bahin sa usa ka kausaban sa panid sa panid (nga naghimo sa teksto nga nagaagos sa usa ka hulagway), kini nagpasabot kini ang dominyo sa Cascading Style Sheets.

  1. Una, idugang ang imong larawan sa imong web page. Hinumdomi nga dili iapil ang bisan unsa nga mga kinaiya sa panan-aw (sama sa gilapdon ug taas nga mga sukdanan) gikan sa HTML. Importante kini, ilabi na alang sa usa ka responsive nga website diin ang gidak-on sa dagway mag-usab-usab base sa browser. Ang pila nga software, sama sa Adobe Dreamweaver, makadugang sa kalapad ug taas nga kasayuran ngadto sa mga larawan nga gisal-ut sa maong himan, busa siguroha nga kuhaon kining kasayuran gikan sa HTML code! Hinuon, siguroha nga iapil ang angay nga teksto sa alt . Ania ang usa ka pananglitan kung unsa ang imong hitsura sa HTML:
  2. Alang sa mga katuyoan sa styling, mahimo ka usab makadugang usa ka klase sa usa ka imahen. Kini nga klase nga bili mao ang atong gamiton sa atong CSS file. Hinumdumi nga ang bili nga atong gigamit dinhi dili mabuot, bisan pa, alang niining partikular nga estilo, kita adunay mga gamit nga mga mithi sa "wala" o "tuo", depende kung asa nga gusto naton nga ang atong hulagway magkahiusa. Nakita namon nga yano nga syntax nga maayo ang pagtrabaho ug sayon ​​alang sa uban nga tingali adunay pagdumala sa usa ka site sa umaabut nga masabtan, apan mahimo nimo kini nga bisan unsa nga klase nga gusto nimo.
    1. Pinaagi sa iyang kaugalingon, kini nga bili sa klase wala'y mahimo. Ang larawan dili awtomatik nga ilaray sa wala sa teksto. Tungod niini, kita karon kinahanglan nga mobalik sa atong CSS file.
  1. Sa imong stylesheet, mahimo nimong idugang ang mosunod nga estilo:
    1. .sa wala {
    2. float: left;
    3. padding: 0 20px 20px 0;
    4. }
    5. Ang imong gihimo dinhi mao ang paggamit sa CSS "float" nga propyedad , nga magguyod sa imahen gikan sa normal nga agianan sa dokumento (ang paagi nga makita sa kasagaran nga hulagway, uban ang teksto nga nahiangay sa ilalum niini) ug kini makaangay niini sa wala nga bahin sa sudlanan niini . Ang teksto nga nagsunod niini diha sa HTML markup nga karon giputos kini. Nagdugang usab kami og pipila ka mga padding nga mga hiyas aron kini nga teksto dili apan direkta nga batok sa hulagway. Hinoon, kini adunay usa ka nindot nga gilay-on nga makita nga madanihon sa panid sa panid. Diha sa CSS shorthand for padding, nagdugang kami og 0 nga mga bili sa ibabaw ug sa wala nga bahin sa imahe, ug 20 ka pixel sa iyang wala ug ubos. Hinumdomi, kinahanglan nimo nga idugang ang pipila ka padding sa tuo nga kilid sa usa ka wala nga giparis nga larawan. Ang usa ka tuo nga giparis nga larawan (nga atong tan-awon sa usa ka gutlo) adunay padding nga gigamit sa wala nga bahin.
  2. Kon imong tan-awon ang imong webpage sa usa ka browser, imong makita karon nga ang imong hulagway nahisubay sa wala nga bahin sa panid ug ang teksto maayo nga naglibot niini. Ang laing paagi sa pagsulti niini mao nga ang hulagway "naglutaw sa wala".
  1. Kung gusto nimo nga usbon kining hulagway aron ma-align sa husto (sama sa panig-ingnan sa litrato nga nag-uban niini nga artikulo), kini sayon ​​ra. Una, kinahanglan nga imong sigurohon nga, dugang sa estilo nga among gidugang sa among CSS alang sa klase nga bili sa "wala", adunay usa usab alang sa pag-align sa husto. Kini ingon niini:
    1. .right {
    2. naglutaw: husto;
    3. padding: 0 0 20px 20px;
    4. }
    5. Imong makita nga kini halos susama sa unang CSS nga among gisulat. Ang bugtong kalainan mao ang bili nga atong gigamit alang sa "float" property ug ang padding values ​​nga atong gigamit (pagdugang sa uban sa wala nga bahin sa atong hulagway kay sa husto).
  2. Sa katapusan, imong usbon ang bili sa klase sa imahen gikan sa "wala" ngadto sa "tuo" sa imong HTML:
  3. Tan-awa ang imong panid sa browser karon ug ang imong hulagway kinahanglan nga ilaragway sa tuo nga teksto nga hapsay nga gibutang sa palibot niini. Gidugangan namo ang pagdugang niining duha ka estilo, "left" ug "right" sa tanan namong estilohehe aron mahimo namong gamiton kining mga biswal nga estilo kung gikinahanglan sa paghimo sa mga panid sa web. Kining duha ka mga estilo nahimong maayo, us aka mga bahin nga mahimo natong mabag-o sa matag higayon nga kinahanglan kita mag-istilo og mga hulagway nga adunay pagbutang sa mga teksto sa palibot niini.

Paggamit sa HTML Imbis sa CSS (ug Nganong Dili Nimo buhaton)

Bisan tuod posible nga buhaton ang mga teksto sa pagputos sa usa ka hulagway nga may HTML, ang mga sumbanan sa web nagdiktar nga ang CSS (ug ang mga lakang nga gipakita sa ibabaw) mao ang paagi sa pag-adto aron mapabilin ang usa ka panagbulag (HTML) ug estilo (CSS). Importante kini ilabi na kon imong hunahunaon nga, alang sa pipila ka mga lalang ug mga lut-od, nga ang teksto dili kinahanglan nga moagos sa hulagway. Alang sa mas gamay nga mga screen, ang layout sa usa ka responsive nga website nagkinahanglan nga ang teksto sa tinuud maka-align sa ubos sa hulagway ug nga ang hulagway nagpalapad sa tibuok gilapdon sa screen. Kini dali buhaton pinaagi sa mga pangutana sa media kon ang imong mga estilo lahi sa imong markup sa HTML. Sa karon nga multi-device world, diin ang mga imahe ug teksto magkalahi alang sa nagkalainlaing mga bisita ug sa lainlaing mga screen, kini nga panagbulag hinungdanon sa dugay nga kalampusan ug pagdumala sa usa ka web page.