Kòman ou ka mete tèks sou yon imaj

Gade nan nenpòt paj entènèt epi ou pral wè yon konbinezon de kontni tèks ak simagri. Tou de nan eleman sa yo se engredyan esansyèl nan siksè nan yon sit entènèt. Kontni tèks se sa ki vizitè sit pral li ak sa ki motè rechèch pral itilize kòm yon pati nan algoritm plase yo. Imaj yo pral ajoute vizyèl enterè nan sit la epi ede aksantué kontni an tèks.

Ajoute tèks ak imaj sou sit entènèt se fasil. Tèks se ajoute ak estanda HTML Tags tankou paragraf, tit, ak lis, pandan y ap imaj yo mete sou yon paj ak eleman nan . Yon fwa ou te ajoute yon imaj nan paj wèb ou a, sepandan, ou ta ka vle gen tèks la koule akote imaj la, olye ke aliman anba a li (ki se wout la default yon imaj te ajoute nan kòd HTML ap rann nan navigatè a). Teknikman, gen de fason ou ka reyalize sa a gade, swa lè l sèvi avèk CSS (rekòmande) oswa lè yo ajoute enstriksyon yo vizyèl dirèkteman nan HTML la (pa rekòmande, depi ou vle kenbe separasyon an nan style ak estrikti pou sit entènèt ou).

Sèvi ak CSS

Fason ki kòrèk la chanje fason yon paj tèks ak layout imaj ak ki jan estil vizyèl yo parèt nan navigatè a se ak CSS . Senpleman sonje, depi nou ap pale de yon chanjman vizyèl nan paj la (fè koule tèks alantou yon imaj), sa vle di li se domèn Cascading Style Sheets.

1. Premyèman, ajoute imaj ou nan paj entènèt ou an. Sonje pou eskli nenpòt karakteristik vizyèl (tankou valè lajè ak wotè) ki soti nan HTML sa a. Sa a enpòtan, sitou pou yon sit entènèt reponn kote gwosè a imaj ap varye ki baze sou navigatè a. Sèten lojisyèl, tankou Adobe Dreamweaver, pral ajoute lajè ak wotè enfòmasyon nan imaj ke yo se eleman ak zouti sa, kidonk asire ou retire enfòmasyon sa a nan kòd HTML la! Fè sèten, sepandan, genyen ladan yo tèks altènatif ki apwopriye . Isit la se yon egzanp ki jan kòd HTML ou ka gade:
2. Pou rezon manier, ou ka ajoute tou yon klas nan yon imaj. Valè sa a se sa nou pral itilize nan dosye CSS nou an. Remake byen ke valè nou itilize isit la se abitrè, byenke, pou style sa a an patikilye, nou gen tandans itilize valè nan "kite" oswa "dwa", tou depann de ki fason nou vle imaj nou yo aliman. Nou jwenn ke senptaks senp nan travay byen epi yo dwe fasil pou lòt moun ki ka gen nan jere yon sit nan tan kap vini an yo konprann, men ou ta ka bay sa a nenpòt klas valè ou vle.
   2. Pou kont li, valè klas sa a pa pral fè anyen. Imaj la pa pral otomatikman dwe aliyen sou bò gòch la nan tèks la. Pou sa, nou kounye a bezwen ale nan dosye CSS nou an.

1. Nan style ou, ou kapab kounye a ajoute style sa a:
   1. .left {
   2. flote: agoch;
   3. padding: 0 20px 20px 0;
   4. }}
   5. Ki sa ou te fè isit la se itilize CSS "flote" pwopriyete a , ki pral rale imaj la soti nan koule dokiman nòmal (wout la ke imaj ta nòmalman montre, ak tèks la ki aliyen anba li) epi li pral aliman li nan bò gòch la nan veso li yo . Tèks la ki vini apre li nan makèt la HTML ak kounye a vlope toutotou li. Nou menm tou nou te ajoute kèk valè padding pou ke tèks sa a pa ta men dirèkteman moute kont imaj la. Olye de sa, li pral gen kèk espas bèl ki pral vizyèlman atire nan konsepsyon paj la. Nan estati CSS la pou padding, nou te ajoute 0 valè sou tèt ak bò gòch nan imaj la, ak 20 piksèl sou bò gòch li yo ak anba yo. Sonje byen, ou bezwen ajoute kèk padding bò dwat la nan yon imaj agòch gòch. Yon imaj dwa aliyen (ki nou pral gade nan yon moman) ta gen padding aplike nan bò gòch li yo.
2. Si ou wè Paj Web ou a nan yon navigatè, ou ta dwe kounye a wè ke imaj ou a aliyen sou bò gòch nan paj la ak tèks la joliman fini ak li. Yon lòt fason yo di sa a se ke se imaj la "flote sou bò gòch la".

1. Si ou te vle chanje imaj sa a yo dwe aliyen sou bò dwat la (tankou nan egzanp nan foto ki akonpaye atik sa a), li ta senp. Premyèman, ou dwe asire w ke, anplis style la nou jis ajoute nan CSS nou an pou valè klas la nan "kite", nou menm tou nou gen yon sèl pou aliyman dwat. Li ta sanble tankou sa a:
   1. .right {
   2. flote: dwa;
   3. padding: 0 20px 20px;
   4. }}
   5. Ou ka wè ke sa a se prèske ki idantik ak CSS an premye nou te ekri. Diferans lan sèlman se valè nou itilize pou pwopriyete a "flote" ak valè yo padding nou itilize (ajoute kèk nan bò gòch la nan imaj nou an olye pou yo dwa a).
2. Finalman, ou ta chanje valè a nan klas imaj la soti nan "kite" nan "dwa" nan HTML ou:
3. Gade nan paj ou a nan navigatè a kounye a epi yo ta dwe imaj ou dwe aliyen sou bò dwat la ak tèks nètman vlope toutotou li. Nou gen tandans ajoute tou de nan estil sa yo, "kite" ak "dwa" nan tout stil nou yo pou nou ka itilize sa yo estil vizyèl jan sa nesesè lè nou ap kreye paj wèb. Sa yo estil de vin bèl, karakteristik ki kapab itilize ankò ke nou ka ale nan nenpòt lè nou bezwen imaj style ak tèks anbalaj alantou yo.

Sèvi ak HTML Olye pou yo CSS (ak Poukisa ou ta dwe fè)

Menm si li posib fè vlope tèks alantou yon imaj ak HTML, estanda entènèt dikte ke CSS (ak etap yo prezante anwo a) se yon fason a ale pou ke nou ka kenbe yon separasyon nan estrikti (HTML) ak style (CSS). Sa a se espesyalman enpòtan lè ou konsidere ke, pou kèk aparèy ak kouman, tèks sa a pa ka bezwen koule alantou imaj la. Pou pi piti ekran, Layout sit entènèt ki reponn a ka mande ke tèks la fè tout bagay aliman anba a imaj la ak ke imaj la lonje lajè a plen nan ekran an. Sa a se fasil fè ak queries medya si estil ou yo separe de markup HTML ou. Nan mond milti-aparèy jodi a, kote imaj ak tèks ap parèt yon fason diferan pou vizitè diferan ak sou ekran diferan, separasyon sa a se esansyèl nan siksè nan long tèm ak jesyon nan yon paj entènèt.