Kumaha Bungkus téks Kira hiji Gambar

Tingali iraha wae kaca web tur anjeun bakal nempo kombinasi eusi téks na imagery. Duanana elemen ieu bahan penting dina kasuksésan ramatloka a. Eusi téks téh naon datang loka bakal maca na naon mesin pencari bakal make salaku bagian tina algoritma ranking maranéhanana. Gambar bakal nambahan interest visual kana situs jeung ngabantu accentuate eusi téks.

Nambahkeun teks jeung gambar ka situs web anu gampang. Téks ieu ditambahkeun ku tag HTML baku kawas ayat, lulugu, jeung béréndélan, bari gambar anu disimpen dina kaca sareng unsur. Sakali geus ditambahkeun hiji gambar ka kaca wéb anjeun, kumaha oge, Anjeun bisa hayang boga aliran téks gigireun gambar, batan align handap eta (nu cara standar hiji gambar ditambahkeun kana kode HTML bakal ngarobah dina browser anu). Téhnisna, aya dua cara nu bisa ngahontal katingal ieu, boh ku ngagunakeun CSS (dianjurkeun) atawa ku nambahkeun parentah visual langsung kana HTML (teu dianjurkeun, saprak rék ngajaga separation tina gaya jeung struktur pikeun ramatloka anjeun).

ngagunakeun CSS

Jalan bener ngaganti jalan teks jeung gambar kaca urang perenah jeung kumaha gaya visual maranéhna muncul dina pangotektak jeung CSS . Ngan inget, saprak urang ngobrol ngeunaan parobahan visual dina kaca (nyieun aliran téks sabudeureun hiji gambar), ieu ngandung harti eta teh domain of Cascading Style cadar.

1. Kahiji, tambahkeun gambar anjeun ka kaca web Anjeun. Inget ngaluarkeun sagala ciri visual (kawas nilai lebar tur jangkungna) ti HTML éta. Ieu penting, hususna keur ramatloka responsif dimana ukuran gambar bakal rupa-rupa dumasar kana panyungsi dina. software nu tangtu, kawas Adobe Dreamweaver, bakal nambahan informasi lebar jeung jangkungna nepi ka gambar nu diselapkeun jeung alat eta, jadi pastikeun ngaleupaskeun inpo ieu ti kode HTML! Ulah pastikeun, kumaha oge, mun ngawengku alt téks luyu . Di handap ieu conto kumaha kode HTML Anjeun bisa kasampak:
2. Keur kaperluan styling, Anjeun ogé bisa nambahan kelas ka hiji gambar. nilai kelas Ieu naon baris kami dipaké dina file CSS urang. Catetan yén nilai kami nganggo didieu nyaeta sawenang, sanajan, pikeun gaya tinangtu ieu, urang condong migunakeun nilai "tinggaleun" atawa "katuhu", gumantung kana cara nu urang hoyong gambar urang pikeun align. Urang neangan nu rumpaka basajan digawekeun ogé sarta jadi gampang pikeun batur anu bisa kudu ngatur situs di mangsa nu bakal datang ka ngarti, tapi anjeun bisa masihan ieu nilai kelas naon rék.
   2. Ku sorangan, nilai kelas ieu moal ngalakukeun nanaon. gambar nu moal otomatis jadi Blok ka kénca téks. Keur kitu, urang ayeuna kedah giliran file CSS urang.

1. Dina stylesheet, anjeun ayeuna tiasa nambah gaya handap:
   1. .left {
   2. ngambang: kénca;
   3. padding: 0 20px 20px 0;
   4. }
   5. Naon tuh di dieu nyaeta nganggo CSS "ngambang" harta , nu bakal narik gambar ti aliran dokumen normal (cara gambar nu ilaharna bakal nembongkeun, kalayan téks Blok handapeun eta) jeung éta bakal align ka sisi kénca wadahna na . Téks nu asalna sanggeus eta di aksara HTML kalawan kiwari mungkus sabudeureun eta. Urang ogé ditambahkeun sababaraha nilai padding ambéh téks teu tapi langsung nepi ngalawan gambar jeng. Gantina, eta kudu sababaraha dipasing nice nu bakal visually pikaresepeun dina rarancang kaca urang. Dina shorthand CSS pikeun padding kami ditambahkeun 0 nilai ka sisi luhur jeung kenca gambar, sarta 20 piksel pikeun anak kénca jeung handap. Inget, maneh kudu nambahan sababaraha padding sisi katuhu hiji gambar kénca Blok. A katuhu Blok gambar (anu urang nempo dina masihan) bakal gaduh padding dilarapkeun ka sisi kénca na.
2. Lamun nempo Kalurahan anjeun dina panyungsi, anjeun ayeuna kudu ningali eta gambar anjeun Blok ka sisi kénca kaca jeung téks nu nicely wraps sabudeureun eta. Cara séjén ngomong ieu téh yén gambar kasebut "floated ka kénca".

1. Lamun hayang ngarobah gambar ieu bisa Blok ka katuhu (kawas dina conto poto nu accompanies artikel ieu), eta bakal basajan. Kahiji, anjeun kudu pastikeun yén, sajaba gaya urang ngan ditambahkeun kana CSS kami keur nilai kelas "tinggaleun", urang ogé kudu hiji keur katuhu-alignment. Ieu bakal kasampak kawas kieu:
   1. .right {
   2. ngambang: katuhu;
   3. padding: 0 0 20px 20px;
   4. }
   5. Anjeun tiasa ningali éta ieu ampir identik jeung CSS munggaran urang wrote. Hijina bédana ngarupakeun nilai kami nganggo keur "ngambang" harta jeung nilai padding kami nganggo (nambahkeun sababaraha ka sisi kénca gambar urang tinimbang katuhu).
2. Tungtungna, anjeun bakal robah nilai kelas gambar urang tina "tinggaleun" pikeun "katuhu" dina HTML anjeun:
3. Tingali dina kaca anjeun dina browser anu kiwari jeung gambar anjeun kudu Blok ka katuhu jeung téks rapih wrapping sabudeureun eta. Urang condong pikeun nambahkeun duanana gaya ieu, "tinggaleun" jeung "bener" ka sadaya stylesheets urang supaya urang bisa ngagunakeun ieu gaya visual salaku diperlukeun nalika kami keur nyieun kaca wéb. Dua gaya jadi nice, fitur reusable nu bisa giliran iraha kami kudu gaya gambar kalawan wrapping téks sabudeureun éta.

Ngagunakeun HTML Gantina CSS (jeung Naha Anjeun Shouldn & # 39; t Naha ieu)

Sanajan kasebut nyaéta dimungkinkeun pikeun ngalakukeun bungkus téks sabudeureun hiji gambar sareng HTML, standar web ngarahkeunnana yén CSS (jeung léngkah dibere luhur) nyaéta jalan mun balik supaya urang bisa ngajaga separation struktur (HTML) jeung gaya (CSS). Ieu hususna penting mun anjeun nganggap yen, sabagian nu lian na layouts, téks nu teu perlu ngalir sabudeureun gambar. Pikeun layar leutik, perenah ramatloka responsif urang bisa merlukeun yén téks teu mang align handap gambar jeung eta gambar teh manjang ka lébar layar. Ieu gampang dipigawé ku queries média lamun gaya Anjeun téh misah ti aksara HTML Anjeun. Di dunya multi-alat dinten ieu, tempat Gambar jeung téks bakal muncul béda pikeun nu datang béda jeung dina layar béda, separation ieu penting pikeun kasuksésan jangka panjang sarta manajemen hiji kaca web.