Cara Nyunting Teks Ngubengi Gambar

Deleng ing kaca web lan sampeyan bakal weruh kombinasi isi teks lan citra. Loro unsur kasebut minangka bahan penting ing sukses situs web. Konten teks yaiku apa sing bakal ditelusuri pengunjung situs lan mesin telusur sing bakal digunakake minangka bagean saka algoritma peringkat. Gambar bakal nambah kapentingan visual menyang situs kasebut lan mbantu ngetrapake isi teks kasebut.

Nambahake teks lan gambar menyang situs web gampang. Teks ditambah karo tandha-tandha standar HTML kaya paragraf, judul, lan dhaptar, dene gambar disimpen ing kaca kanthi unsur . Yen sampeyan wis nambahake gambar menyang kaca web sampeyan, sampeyan uga pengin duwe aliran teks ing jejere gambar, tinimbang kempal ing ngisor iki (kang minangka cara sing asale gambar sing ditambahake marang kode HTML bakal nerjemahake ing browser). Secara teknis, ana rong cara sing bisa digoleki, kanthi nggunakake CSS (disaranake) utawa nambah instruksi visual langsung menyang HTML (ora disaranake, amarga sampeyan pengin njaga pemisahan gaya lan struktur situs web panjenengan).

Nggunakake CSS

Cara sing bener kanggo ngganti cara tata letak teks lan gambar kaca lan cara gaya visual sing katon ing browser nganggo CSS . Mung eling, amarga kita ngomong bab owah-owahan visual ing kaca (nggawe tulisan teks ing sekitar gambar), iki tegese dadi domain Cascading Style Sheets.

1. Pisanan, nambah gambar menyang kaca web. Elinga ngilangi apa wae ciri visual (kayata lebar lan nilai dhuwur) saka HTML kasebut. Iki penting, utamane kanggo situs web responsif ing ngendi ukuran gambar bakal beda-beda adhedhasar browser. Piranti lunak tartamtu, kayata Adobe Dreamweaver, bakal nambah informasi jembar lan dhuwur kanggo gambar sing dipasang karo alat kasebut, dadi manawa kanggo mbusak informasi kasebut saka kode HTML! Nanging, manawa kanggo nyakup teks alt cocok . Punika conto carane kode HTML sampeyan bisa katon:
2. Kanggo tujuan gaya, sampeyan uga bisa nambah kelas menyang gambar. Nilai kelas iki yaiku apa sing bakal kita gunakake ing file CSS kita. Wigati manawa Nilai sing digunakake ing kene arbitrer, senadyan, kanggo gaya tartamtu iki, kita cenderung migunakake nilai-nilai "kiwa" utawa "tengen", gumantung ing cara kita pengin gambar kita diselehake. Kita nemokake sintaks sing prasaja supaya bisa becik lan gampang kanggo wong liya sing kudu ngelola situs ing mangsa ngarep kanggo mangerteni, nanging sampeyan bisa menehi nilai kelas apa wae sing dikarepake.
   2. Dadi, nilai kelas iki ora bakal rampung. Gambar ora bakal didhelikake kanthi otomatis ing sisih tengen teks. Kanggo iki, kita saiki kudu nguripake file CSS kita.

1. Ing stylesheet sampeyan, saiki sampeyan bisa nambah gaya ing ngisor iki:
   1. .left {
   2. ngambang: kiwa;
   3. padding: 0 20px 20px 0;
   4. }
   5. Apa sampeyan nggoleki ing kene nggunakake property "float" CSS , sing bakal narik gambar saka aliran dokumen normal (cara sing bakal nampilake gambar, kanthi teks sing didhampingake ing ngisor) lan bakal dipasang ing sisih kiwa wadhah . Tèks sing kasedhiya ing markup HTML saiki bisa dibalèkaké. Kita uga tambah sawetara nilai padding supaya teks iki ora nanging langsung munggah marang gambar. Nanging, bakal ana sawetara sing apik sing bakal katon apik ing desain kaca. Ing cendhek CSS kanggo padding, kita nambahake 0 angka menyang sisih ndhuwur lan kiwa gambar, lan 20 piksel ing kiwa lan ngisor. Elingi, sampeyan kudu nambah sawetara padding ing sisih tengen gambar sing adhedhasar kiwa. Gambar sejajar tengen (sing bakal katon ing sawijining wayahe) bakal duwe padding sing ditrapake ing sisih kiwa.
2. Yen sampeyan ndeleng kaca web sampeyan ing browser, sampeyan saiki bakal weruh gambar sampeyan didadekake siji menyang sisih kiwa lan teks sing apik ing babagan kasebut. Cara liya kanggo ngucap iki yaiku yen gambar "ngambang ing sisih kiwa".

1. Yen sampeyan pengin ngganti gambar iki supaya bisa didadekake nengen (kaya ing conto foto sing nyedhiyakake artikel iki), bakal gampang. Pisanan, sampeyan kudu nggawe manawa, ing salebeting gaya kita mung ditambahake kanggo CSS kanggo nilai kelas "kiwa", kita uga duwe siji kanggo alignment tengen. Iku bakal katon kaya iki:
   1. .right {
   2. ngambang: tengen;
   3. padding: 0 0 20px 20px;
   4. }
   5. Sampeyan bisa ndeleng manawa iki meh padha karo CSS pisanan sing ditulis. Bentenipun mung angka sing kita gunakake kanggo "float" property lan nilai padding sing digunakake (nambah sawetara menyang sisih kiwa gambar kita tinimbang tengen).
2. Pungkasan, sampeyan bakal ngganti nilai kelas gambar saka "kiwa" dadi "tengen" ing HTML:
3. Deleng ing kaca sampeyan ing browser saiki lan gambar sampeyan kudu didadekake siji ing sisih tengen kanthi teks kanthi apik ing babagan iki. Kita cenderung nambah gaya, "kiwa" lan "tengen" ing kabeh gaya gaya kita supaya kita bisa nggunakake gaya visual iki kaya nalika kita nggawe kaca web. Iki gaya loro dadi becik, fitur sing bisa dienggo maneh sing bisa diuripake manawa kita kudu nggambarake gambar kanthi teks sing mbungkus alune.

Nggunakake HTML tinimbang CSS (lan Ngapa Sampeyan Ora Nindakake Iki)

Sanajan ana kemungkinan kanggo mbungkus teks ing sekitar gambar kanthi HTML, standar web ndhikte sing CSS (lan langkah-langkah sing diwenehi ing ndhuwur) iku cara kanggo mbukak supaya bisa njaga pemisahan struktur (HTML) lan gaya (CSS). Iki penting banget yen sampeyan nganggep, kanggo sawetara piranti lan tata letak, teks kasebut mboten perlu mili ngubengi gambar. Kanggo layar sing luwih cilik, tata letak situs web sing responsif bisa mbutuhake yen teks kasebut pancen selaras ing ngisor gambar kasebut lan gambar kasebut ngluwihi lebar layar. Iki gampang dilakoni karo pitakon media yen gaya sampeyan kapisah saka markup HTML. Ing donya multi piranti, ing ngendi gambar lan teks bakal katon beda kanggo pengunjung sing beda lan ing layar sing beda, pamisahan iki penting banget kanggo sukses lan ngatur kaca web.