Wêne di afirandina naveroka malperê de hêmanek bingehîn in ji ber ku ew dikarin agahdarî bi rengek balkêş ragihînin. Dema ku wêneyan di rûpelek HTML-ê de vedihewîne, pêdivî ye ku meriv pê ewle bibe ku ew ji bo pêşandanek hevseng a dîtbarî rast hatine rêzkirin û navend. Di vê gotarê de, em ê bi hûrgulî pêvajoya ku meriv wêneyan di nav HTML-ê de navend bike û nimûneyên pratîkî peyda bike da ku ji we re bibe alîkar ku hûn vê teknîkê serdest bikin. Amade bibin ku xuyangiya wêneyên xwe baştir bikin di projeyên te de tevn!
1. Danasîna lihevkirina wêneyê di HTMLê da
Lihevkirina wêneyan di HTML-ê de di sêwirana rûpelên malperê de aliyek girîng e. Wêneyek bi rêkûpêk rêzkirî dikare xuyang û herikîna dîtbar a rûpelê çêtir bike, ezmûnek bikarhênerek xweştir û profesyonel peyda bike.
Gelek awayên ku di HTML-ê de wêneyan li hev dikin hene. Ya herî gelemperî ev e ku meriv taybetmendiya CSS-a "text-align" bi nirxa "navend", "çep" an "rast" bikar bîne. Ev ê wêneyê li navendê, çepê, an rastê ya nivîsa derdor bi hev bike. Bo nimûne:
«`
«`
Di heman demê de gengaz e ku hûn wêneyan bi karanîna etîketa "align" a HTML-ê hev bikin. Ev etîket nirxên "çep", "rast" û "navend" qebûl dike, lê ji HTML5-ê ve qedîm tê hesibandin. Ji ber vê yekê, tê pêşniyar kirin ku li şûna CSS bikar bînin. Lêbelê, heke hûn hewce ne ku gerokên kevn piştgirî bikin, hûn hîn jî dikarin nîşana align bikar bînin. Bo nimûne:
«`
«`
Bînin bîra xwe ku girîng e ku hûn taybetmendiyên "alt" li ser wêneyên xwe bikar bînin da ku ji bo astengdarên dîtbar şiroveyek alternatîf peyda bikin. Di heman demê de, ji karanîna zêde ya rêzikan dûr bixin, ji ber ku ev dikare bandorek neyînî li xwendin û avahiya rûpela we bike. Vebijarkên cihêreng biceribîne û lihevhatina ku çêtirîn li gorî sêwirana we ye bibînin.
2. Bingehên Rêzkirina Wêne di HTML-ê de
Ew aliyek bingehîn in ku meriv dema sêwiranê li ber çavan bigire malperek. Rêzkirina rast a wêneyan dikare xuyangiya dîtbarî ya rûpelê û ezmûna bikarhêner çêtir bike. Li jêr gavên ku hûn wêneyan di HTML-ê de hevrêz bikin hene:
1. Etîketa ` bikar bînin` ku wêneyê têxe koda HTML-a xwe. Pê bawer bin ku taybetmendiya `src` destnîşan bikin da ku riya wêneyê li ser servera we destnîşan bike. Ji bo eyarkirina mezinahiya wêneyê, hûn dikarin taybetmendiyên `fireh` û `bilindî` bikar bînin. Bo nimûne:
"`html
«`
2. Ji bo xêzkirina wêneyekî bi awayekî horîzontal, hûn dikarin taybetmendiya `align` di `tagê de` bikar bînin`. Ev taybetmendî nirxên `»çep»`, `»rast»`, û «navend»` piştgirî dike. Bo nimûne:
"`html
«`
3. Heke hûn dixwazin wêneyek bi rengek vertîkal rêz bikin, hûn dikarin di nîşana ` de taybetmendiya `vertical-align` bikar bînin.`. Ev taybetmendî nirxên `»jor»`, `»navîn»`, û `»jêr»` piştgirî dike. Bo nimûne:
"`html
«`
Ev tenê hinek ji wan in. Bînin bîra xwe ku hûn dikarin CSS-ê jî ji bo xwerûkirin û kontrolkirina mezintir li ser xuyabûna wêneyan li ser malpera xwe bikar bînin. Bi tevliheviyên cûda yên taybetmendî û şêwazan biceribîne ku encama xwestinê bistînin.
3. Etîketên HTML-ê ku wêneyan li hev bikin
Etîketên HTML ji bo sêwirandin û avahiya rûpelek malperê amûrek sereke ye. Yek ji taybetmendiyên ku ew pêşkêş dikin kapasîteya rasthevkirina wêneyan e. Di vê beşê de, etîketên ku herî zêde têne bikar anîn ji bo bidestxistina vê armancê dê werin lêkolîn kirin.
Yekem taga ku em dikarin bikar bînin ev e . Ev etîket destûrê dide me ku em wêneyek têxin ser malpera xwe. Ji bo ku wêneyê bi rengek horizontî hevrêz bikin, em dikarin taybetmendiya align bi nirxên "çep" an "rast" re bikar bînin. Mînakî, heke em dixwazin wêneyek li milê çepê bixin, em dikarin kodê bikar bînin
. Ger em bixwazin wê li rastê rêz bikin, em nirxa "rast" li şûna "çep" bikar tînin.
Vebijarkek din a hevrêzkirina wêneyan ev e ku meriv tagê bikar bîne
. Bi vî rengî wêne dê li navendê di nav div de were rêz kirin.
Di dawiyê de, em dikarin tagê jî bikar bînin
.
4. Meriv çawa bi karanîna şêwazên CSS-ê wêneyan navend dike
Gelek awayên navendkirina wêneyan bi karanîna şêwazên CSS hene. Li jêr sê awayên ku bi berfirehî têne bikar anîn hene ku bigihîjin vê yekê:
1. Margin Auto: Rêbazek hêsan ji bo navendkirina wêneyek ev e ku meriv marjîneyek otomatîkî li aliyên çep û rast bicîh bike. Ev dikare bi karanîna qaîdeya CSS ya jêrîn were bidestxistin: margin: 0 auto;. Bi vê taybetmendiyê re, wêne dê li navenda horizontî ya konteynera xwe were danîn.
2. Flexbox: Teknîkek din a bi bandor ji bo navendkirina wêneyan karanîna flexbox e. Bi sepandina qaîdeyên CSS-ê yên jêrîn li konteynera dêûbav: display: flex; y justify-content: center;, wêne dê di navenda horizontal ya konteynerê de were danîn. Bala xwe bidinê ku di vê rewşê de konteynir divê xwedan firehiyek sabît be an jî 100% fireh be.
3. Transform: Taybetmendiya veguherîna CSS dikare ji bo navendkirina wêneyan jî were bikar anîn. Ji bo bidestxistina vê, qaîdeya CSS ya jêrîn dikare li ser wêneyê were sepandin: transform: translateX(-50%);. Ev ê wêneyê ji sedî 50 ê firehiya xwe ber bi çepê ve bizivirîne, wê di konteynerê de bike navend. Wekî din, girîng e ku meriv pê ewle bibe ku konteynir xwedî taybetmendî ye position: relative; da ku veguhertin rast were sepandin.
Bînin bîra xwe ku ev tenê ne çend mînak Meriv çawa bi karanîna CSS wêneyan navend dike. Girîng e ku meriv rêbazan li gorî hewcedariyên taybetî yên her projeyê biguhezîne û lihevhatina bi gerokên cihêreng re bihesibîne.
5. Bikaranîna Taybetmendiyên CSS-ê ji bo Navendkirina Wêneyên di HTML-ê de
Ji bo navendkirina wêneyan di HTML-ê de, taybetmendiyên cihêreng ên CSS dikarin werin bikar anîn. Li jêr hin ji yên herî gelemperî hene:
1. Taybetmendiya "nîşandan" ya bi nirxa "flex" dikare li konteynera wêneyê were sepandin da ku ew bi rengek horizontî û verastîkî navend bike. Bo nimûne:
"`html
«`
2. Vebijarkek din jî ew e ku meriv taybetmendiya "text-align" digel nirxa "navend" di konteynera wêneyê de bikar bîne. Vê teknîkê tenê wêneyê horizontî navend dike. Bo nimûne:
"`html
«`
3. Heke hûn dixwazin wêneyê tenê bi horizontî navend bikin, hûn dikarin taybetmendiya "margin" bi nirxên "oto" li milên çep û rast ên konteynera wêneyê bikar bînin. Wiha:
"`html
«`
Vana tenê hin awayên navendkirina wêneyan di HTML-ê de bi karanîna taybetmendiyên CSS-ê ne. Li gorî strukturê ya malper û ji pêdiviyên taybetî, teknîka herî guncaw dikare were hilbijartin. Bînin bîra xwe ku ev çareserî dikarin wekî ku hewce be werin guheztin û guheztin da ku sêwiran û şêwaza her projeyê li hev bikin û ji bo we vebijarka çêtirîn bibînin!
6. Rêbazên Navendiya Wêne ya Pêşketî di HTMLê da
Di HTML-ê de, gelek awayên pêşkeftî hene ku dikarin werin bikar anîn da ku wêneyan bi rengek rastîn û kontrolkirî navend bikin. Van rêbazan dihêlin sêwiranerê malperê bigihîje dîmenek balkêş a dîtbar û piştrast bike ku wêne bi naveroka derdorê re bi rêkûpêk têne hev kirin.
Rêbazek ku bi gelemperî tê bikar anîn karanîna taybetmendiya CSS-ê ya "margin: auto" digel danîna firehiya wêneyê ye. Ji bo ku hûn vê yekê bi dest bixin, tenê ji bo wêneyê firehiyek sabît saz bikin û dûv re taybetmendiya "margin: auto" li wê bicîh bikin. Ev ê wêneyê horizontî di konteynera xwe de navendî bike.
Rêbazek din a pêşkeftî ya navendkirina wêneyan karanîna flexbox e. Flexbox modelek sêwirana maqûl e ku dihêle hêmanên di hundurê konteynerek de bi rengek otomatîk werin rêz kirin û rêz kirin. Ji bo ku hûn wêneyek bi karanîna flexbox-ê navend bikin, divê hûn wêneyê di konteynirekê de bipêçin û taybetmendiyên CSS yên jêrîn li konteynerê bicîh bikin: "nîşandan: flex", "justify-content: navend" û "align-item: navend". Ev ê wêneyê hem vertîkal û hem jî horizontî di navenda konteynerê de rêz bike.
Ji bilî van rêbazan, teknîkên din ên pêşkeftî hene ku dikarin ji bo navendkirina wêneyan di HTML-ê de werin bikar anîn, wek mînak karanîna taybetmendiya "pozîsyon: mutleq" bi hev re digel nirxên "jor: 50%" û "çep: 50%". li dûv veguhertinek CSS-ê da ku wêneyê bi rengek rast veguhezîne. Lêbelê, van rêbazan tevlihevtir in û hewceyê zanînek kûr a CSS-ê hewce dikin. Bi kurtasî, ew di berhevkirina wêneyan de xwerûkirin û rastbûnek mezintir dihêlin, bi girîngî xuyangiya dîtbar a rûpelek malperê baştir dikin.
7. Dema ku navendkirina wêneyan di HTML-ê de pirsgirêkên hevpar çareser bikin
Dema ku navendkirina wêneyan di HTML-ê de gelek pirsgirêkên hevpar hene, lê bi bextewarî, ji bo her yek ji wan çareseriyên hêsan û bi bandor hene. Heke hûn di nav koda xweya HTML-ê de kêşeya we heye ku hûn wêneyek rast bikin, van gavan bişopînin da ku pirsgirêkê çareser bikin:
1. Taybetmendiya CSS-a "text-align" bikar bînin da ku wêneyê di hundurê konteynera xwe de navendî bike. Bawer bikin ku nirxa "navend" li taybetmendiya "text-align" ya di hilbijêra CSS-ê ya ku bi konteynera wêneyê re têkildar e bicîh bikin. Bo nimûne:
"`html
«`
2. Ger wêne hîn jî navendê neke, kontrol bikin ku firehiya wê ji firehiya konteynerê kêmtir an wekhev be. Hûn dikarin firehiya wêneyê bi karanîna taybetmendiya firehiya CSS-ê di hilbijêra têkildar de bicîh bikin. Bo nimûne:
"`html
«`
3. Ger wêne ji konteynerê mezintir be û hûn dixwazin ew bixweber bi cîh bibe, hûn dikarin taybetmendiya CSS "max-width" bi nirxa "100%" bikar bînin. Ev ê dihêle ku wêne were piçûk kirin da ku li konteynerê bê ku rêjeya dîmenê xwe winda bike. Mînak:
"`html
«`
Bi şopandina van gavan, hûn ê bikaribin piraniya pirsgirêkan dema navendkirina wêneyan di HTML-ê de çareser bikin. Ji bîr mekin ku hilbijêr û navên pelan li koda xwe biguncînin. Ger wêne hîn jî rast li hev nakin, koda xwe ji bo xeletiyên gengaz kontrol bikin û pê ewle bibin ku şêwazên CSS rast têne sepandin.
8. Fikrên Gihîştinê Dema Navendkirina Wêne di HTMLê de
Dema ku navendkirina wêneyan di HTML-ê de baldariyek girîng ev e ku meriv pê ewle bike ku rûpel ji hemî kesan re, tevî yên ku kêmasiyên dîtbarî jî hene, bigihîje. Gelek teknîk hene ku dikarin di dema navendkirina wêneyan di HTML-ê de bigihîjin gihîştina rast.
Yek awayê kirina vê yekê bi karanîna taybetmendiyên alternatîf (alt) li ser tagên wêneyê ye. Taybetmendiya alt nivîsa raveker peyda dike ku dema ku wêne têkeve barkirinê an dema ku ew ji hêla xwendevanek ekranê ve were xwendin tê xuyang kirin. Girîng e ku ravekirinek rast a wêneyê were pêşkêş kirin da ku kesên ku wê nabînin karibin naveroka wê fam bikin.
Nîşanek din jî karanîna tagên Semantîk di HTML-ê de ye. Dema ku navendkirina wêneyan, tê pêşniyar kirin ku etîketên guncan ên wekî
Pêdivî ye ku meriv gihîştina rûpelê bi karanîna amûrên gihîştinê û kontrolkeran ceribandin. Van amûran dikarin pirsgirêkên potansiyel tespît bikin û ji bo baştirkirina gihîştinê pêşniyaran peyda bikin. Her weha girîng e ku ji bîr mekin ku rengên ku ji bo navendkirina wêneyan têne bikar anîn divê xwedan berevajîyek têr bin da ku ew ji hemî mirovan re xuya bibin, nemaze yên ku kêmasiyên dîtbarî ne. Bi şopandina van ramanên gihîştinê, hûn dikarin pêşandana rast a wêneyên HTML-navendî yên ku ji hemî bikarhêneran re têne gihîştin û têgihîştin bi dest bixin.
9. Pratîkên çêtirîn ji bo navendkirina wêneyan di nav HTMLê da
Navendkirina wêneyan di HTML-ê de dema sêwirana rûpelên malperê karek hevpar e. Li jêr hin pratîkên çêtirîn ji bo navendkirina bandorker a wêneyên we hene.
1. Labelê bikar bînin HTML-ê da ku wêneyên xwe têxin nav rûpelê. Piştrast bikin ku hûn di taybetmendiya src ya tagê de riya rast ji wêneyê re peyda dikin. Bo nimûne:
.
2. Ji bo navendkirina wêneyek horîzontal, hûn dikarin taybetmendiya CSS ya "margin" bi nirxên "oto" û "nîşandan" wekî "block" bikar bînin. Bi vî awayî wêne dê di navenda konteynera xwe de were danîn. Koda CSS ya jêrîn li pelê şêwaza xwe zêde bikin: img { display: block; margin-left: xwe; margin-right: xwe; }
3. Heke hûn dixwazin wêneyek hem horizontî û hem jî vertîkal bikin navend, hûn dikarin rêbaza flexbox bikar bînin. Rêbazên CSS yên jêrîn li ser konteynerê wêneyê bicîh bikin: .container { display: flex; justify-content: navend; align-item: center; }. Bi vê nêzîkbûnê re, wêne dê hem li navendê hem horizontî hem jî vertîkal di nav konteynera xwe de were danîn.
Bînin bîra xwe ku karanîna wêneyên navend li ser rûpela we dikare bibe alîkar ku xuyang û ezmûna bikarhêner çêtir bikin. Bi şopandina van pratîkan, hûn ê bikaribin ji bo wêneyên xwe yên HTML-ê navendek bi bandor û balkêş bi dest bixin. Dudilî nebin ku hûn rêbazên cûda biceribînin û wan li gorî hewcedariyên xwe yên taybetî rast bikin!
10. Stratejiyên ku wêneyan li ser cîhaz û ekranên cihêreng berhev bikin
Yek ji ramanên sereke dema sêwirana malperek ev e ku meriv pê ewle bibe ku wêne bi rengek rast li hev rêz dibin cîhazên cuda û ekranan. Ev bi taybetî ji ber pîvan û çareseriyên cihêreng ên ku cîhazên ku ji hêla bikarhêneran ve têne bikar anîn hebin girîng e. Li jêr deh stratejiyên ku bigihîjin hevrêziya wêneya rast hene li ser cîhazên cuda û ekranan:
1. Pirsên medyayê bikar bînin: Pirsên medyayê dihêle hûn li gorî taybetmendiyên cîhazê şêwazên taybetî yên CSS bicîh bikin. Ew dikarin werin bikar anîn da ku ji bo wêneyên li ser pîvanên cihêreng ên dîmenderê pîvan, pozîsyon û marjînalên cihêreng bicîh bikin.
2. Ji sedî an yekeyên têkildar bikar bînin: Li şûna ku hûn pîvanên sabît ên wekî pixel bikar bînin da ku mezinahiya wêneyan diyar bikin, tê pêşniyar kirin ku ji sedî an yekîneyên têkildar ên wekî "em" an "rem" bikar bînin. Van yekîneyan dê bixweber li ser bingeha mezinahiya dîmenderê verast bikin, ku lihevhatina wêneyê rast peyda bikin.
3. Wêneyên bersivdar bikar bînin: Wêneyên bersivdar bixweber li gorî mezinahiya ekranê têne guheztin, û piştrast dikin ku ew li ser cîhazên cihêreng rast li hev dikin. Ji bo gihîştina vê yekê, teknîkên wekî karanîna taybetmendiya "srcset" di HTML-ê de an jî karanîna taybetmendiya "paş-size" di CSS-ê de têne bikar anîn.
4. Mezinahî û formata wêneyan xweşbîn bikin: Girîng e ku mezinahî û formata wêneyan xweşbîn bikin da ku ew zû li ser cîhazên cihêreng werin barkirin. Tête pêşniyar kirin ku amûrên berhevkirina wêneyê bikar bînin û formatên wekî JPEG an WebP bikar bînin, ku têkiliyek baş di navbera kalîteyê û mezinahiya pelê de pêşkêş dikin.
5. Li ser cîhaz û gerokên cihê ceribandin: Ji bo ku hûn pê ewle bibin ku wêne bi rêkûpêk li hev dikin li ser hemû cîhazan û gerok, ceribandinek berfireh hewce ye. Tête pêşniyar kirin ku li ser pîvanên cihêreng ên dîmenderê, cîhazên mobîl, û gerokên populer ceribandin bikin da ku pirsgirêkên hevrêziya potansiyel nas bikin.
6. Çarçove an pirtûkxaneyên bersivdar bikar bînin: Çarçove û pirtûkxaneyên bersivdar ên cihêreng hene ku dikarin pêvajoya berhevkirina wêneyan li ser cîhazên cihê hêsantir bikin. Hin vebijarkên populer Bootstrap, Weqf û Bulma ne, ku hêman û şêwazên pêşwext ên ku ji bo pêşandana rast li ser pîvanên cihêreng ên ekranê xweşbînkirî pêşkêş dikin.
7. Piştrast bikin ku wêne têne gihîştin: Girîng e ku meriv dema sêwirana malperek gihîştinê bihesibîne, û ev ji bo wêneyan jî derbas dibe. Tête pêşniyar kirin ku hûn taybetmendiya "alt" di etîketên wêneyê de bikar bînin da ku nivîsa alternatîf a raveker peyda bikin da ku nîşan bidin heke wêne ji hêla xwendevanek ekranê ve neyê barkirin an xwendin.
8. Ji berhevkirina bi zorê ya wêneyan dûr bixin: Tête pêşniyar kirin ku ji şêwazên CSS yên ku bi zorê lihevhatina wêneyan ferz dikin, xwe dûr bixin, ji ber ku ev dibe sedema pirsgirêkan li ser cîhaz û ekranên cihêreng. Vebijêrk e ku meriv pîvandinên têkildar bikar bînin û destûrê bidin ku wêne bi xwezayî li ser bingeha mezinahiya ekranê rast bikin.
9. Cihê neyînî bihesibînin: Cihê negatîf, ku wekî cîhê spî jî tê zanîn, girîng e ku lihevhatina wêneyan rast were peyda kirin. Tête pêşniyar kirin ku li dora wêneyan marjînalek têr bihêlin da ku dema ku li ser cîhazên an ekranên cihêreng têne temaşe kirin nehêlin ku ew qut bibin an xelet nebin.
10. Bi domdarî çavdêrîkirin û sererastkirin: Rêzkirin û rêzkirina wêneyan li ser cîhaz û ekranên cihê pêvajoyek domdar e. Girîng e ku hûn bi domdarî seyrûsefera wêneyên xwe bişopînin û sererast bikin da ku ew li ser hemî cîhazan rast xuya bikin, û li gorî hewcedariyê guhertinan bikin.
Bi van stratejiyan re, gengaz e ku meriv li ser cîhaz û ekranên cihêreng lihevhatina rast a wêneyan bi dest bixe. Li dû van gavan dê ezmûnek bikarhênerek çêtirîn peyda bike bêyî ku mêvanên malpera we çi cîhaz bikar bînin.
11. Amûr û Çavkaniyên Bikêr ji bo Lihevkirina Wêneyên di HTMLê da
Di HTML-ê de, rêzkirina wêneyan bi rastî dikare dijwariyek be, lê gelek amûr û çavkaniyên kêrhatî hene ku dikarin vê pêvajoyê hêsantir bikin. Li jêr çend rêbaz û teknîk hene ku dê ji we re bibin alîkar ku hûn wêneyan di HTML-ê de li hev bikin bi bandor:
1. Bikaranîna taybetmendiya CSS-ê "text-align": Hûn dikarin bi karanîna taybetmendiya CSS-ê "text-align" wêneyan bi nivîsê re li hev bikin. Ji bo vê yekê, wêneyê di hêmanek blokê de, wek div, pêça, û dûv re taybetmendiya "text-align" li konteynerê bicîh bikin. Mînakî, heke hûn dixwazin wêneyek li milê çepê rast bikin, hûn dikarin koda jêrîn bikar bînin:
"`html
«`
2. Taybetmendiya CSS-ê ya "float" bikar bînin: Vebijarkek din jî ew e ku meriv taybetmendiya CSS-ê "float" bikar bîne da ku wêneyan di HTML-ê de rêz bike. Hûn dikarin bi rêzê bi karanîna nirxên "çep" û "rast" wêneyek li çep an rast biherikînin. Bo nimûne:
"`html
«`
3. Wêneyên bi Flexbox re hevûdu bikin: Heke hûn hevrêziyek maqûltir û dînamîkî dixwazin, hûn dikarin Flexbox bikar bînin. Flexbox modelek sêwirana CSS-ê ye ku destûrê dide kontrolek pêşkeftî li ser hevrêzkirin û sêwirana hêmanan. Hûn dikarin bi karanîna taybetmendiyên flexbox CSS-ê hevrêziyê hem bi horizontî û hem jî vertîkal rast bikin. Li vir mînakek bingehîn e ku meriv çawa Flexbox bikar tîne da ku wêneyek bi horizontî bi hev ve girê bide:
"`html
«`
12. Nimûneyên pratîkî yên navendkirina wêneyê di nav HTMLê da
Di vê gotarê de, em ê 12 mînakên pratîkî yên ku meriv wêneyan di nav HTML-ê de navend dike pêşkêşî we bikin. Fêrbûna meriv çawa navendkirina wêneyan di sêwirana rûpelên malperê an blogan de bikêr e, ji ber ku ew xuyangiya dîtbar û xwendina naverokê çêtir dike. Piştre, em ê rêbazên cûda nîşanî we bidin ku hûn vê bandorê bi dest bixin.
1. Navendek wêneyek bi taybetmendiyên HTML: Rêbaza herî bingehîn a ji bo navendkirina wêneyekê, karanîna taybetmendiyên "align" û "style" HTML e. Mînakî, hûn dikarin rêzika kodê ya jêrîn li hêmana img ya di koda HTML-a xwe de zêde bikin: align = "navend". Ev ê navendê wêneyê li ser rûpelê horîzontal bike.
2. Navendek wêneyek bi CSS: Rêyek din a navendkirina wêneyek karanîna CSS ye. Hûn dikarin çînek CSS-ê ya taybetî ya wêneyên ku hûn dixwazin navend bikin biafirînin û dûv re wê li ser hêmana img ya di koda HTML-ê de bicîh bikin. Mînakî, hûn dikarin koda CSS ya jêrîn bikar bînin:
«`
«`
Dûv re, di koda HTML-a xwe de, çîna "navend-wêne" li hêmana img zêde bikin:
«`
«`
3. Navend wêneyek bi karanîna flexbox: Flexbox teknîkek pêşkeftî ye ji bo sêwirana rûpelên malperê ku destûrê dide kontrolek mezintir li ser pozîsyon û sêwirana hêmanan. Ji bo ku hûn wêneyek bi karanîna flexbox-ê navend bikin, hûn hewce ne ku wê di konteynirekê de bipêçin û dûv re hin taybetmendiyên CSS li konteynerê bicîh bikin. Mînakî, hûn dikarin koda CSS ya jêrîn lê zêde bikin:
«`
«`
Dûv re, di koda xweya HTML-ê de, wêneyê xwe di konteynerê de bipêçin:
«`
«`
Ev tenê çend nimûne ne ku meriv wêneyan di nav HTML-ê de navend dike. Hilbijartina rêbazê dê li ser hewce û tercîhên we ve girêdayî ye. Wan biceribînin û biceribînin da ku ya ku çêtirîn li projeya we ye bibînin. Bextê te xweş bî bi sêwirana malpera te!
13. Optimîzekirina performansa dema navendkirina wêneyan di nav HTMLê da
Ji bo xweşkirina performansê dema navendkirina wêneyan di HTML-ê de, çend awayên ku têne bikar anîn hene. Li jêr, em ê hin vebijarkan pêşkêş bikin ku dê ji we re bibin alîkar ku hûn bigihîjin vê yekê bi bandor:
Pêşîn, rêyek hevpar a navendkirina wêneyek bi karanîna etîketa ` ye
Alternatîfek ev e ku meriv şêwazên CSS-ê bikar bîne da ku navendê wêneyê bike. Hûn dikarin taybetmendiya `nîşandan: blok` li ser wêneyê bicîh bikin û dûv re taybetmendiya `margin` bi nirxên otomatîkî bikar bînin da ku wê hem horizontî û hem jî berbi navendê bikin. Bo nimûne:
"`html
«`
Vebijarkek din ev e ku hûn flexbox, teknîkek sêwirana CSS-ê bikar bînin ku dihêle hûn bi nermî hêmanan belav bikin û navend bikin. Ji bo navendkirina wêneyek bi flexbox, hûn dikarin koda jêrîn bikar bînin:
"`html
«`
Ev tenê çend rêbaz in ku navendkirina wêneyan di HTML-ê de rêbazek bi bandor. Bînin bîra xwe ku ew girîng e ku meriv performansa xweş bike malpera te, ji ber vê yekê em pêşniyar dikin ku li gorî hewcedariyên we û daxwazên sêwiranê teknîkên herî maqûl bikar bînin.
14. Encam û pêşniyarên dawîn ji bo navendkirina wêneyan di nav HTMLê da
Ji bo navendkirina wêneyan di HTML-ê de, çend awayên ku hûn dikarin bikar bînin hene. Li jêr hinek encam û pêşniyarên dawîn hene ku ji bo vê armancê bigihîjin.
Pêşîn, vebijarkek ev e ku meriv taybetmendiya "text-align" di CSS de bikar bîne. Hûn dikarin vê taybetmendiyê li hêmana konteynera wêneyê bicîh bikin, nirxa wê li "navendê" saz bikin. Bi vî rengî wêne dê li navendê bi rengek horizontî di hundurê konteynera xwe de were danîn.
Alternatîfek din jî ev e ku meriv nîşana "div" bikar bîne afirandin konteynirek ji bo wêneyê û şêwazên taybetî yên CSS bicîh bikin. Ji bo navendkirina wêneyê horizontî, hûn dikarin marjîna çep û rastê ya konteynerê li ser "oto" destnîşan bikin û pê ewle bin ku firehiya wêneyê ji firehiya konteynerê derbas nebe. Wekî din, ji bo navendkirina wê vertîkal, hûn dikarin taybetmendiya "nîşandan" bi nirxa "flex" û taybetiya "align-item" bi nirxa "navend" bikar bînin.
Di dawiyê de, heke hûn dixwazin wêneyek paşîn di hêmanek HTML-ê de navend bikin, hûn dikarin taybetmendiya paş-pozîsyona di CSS-ê de bikar bînin. Hûn dikarin nirxên "navendê" saz bikin da ku wêneyê hem bi horizontî û hem jî vertîkal navendî bikin. Di heman demê de, heke hûn dixwazin ku wêne li paşperdeyê dubare bibe, hûn dikarin taybetmendiya "paşverû-repeat" bi nirxa "ne-repeat" bikar bînin.
Bi kurtasî, ji bo navendkirina wêneyan di HTML-ê de, hûn dikarin di CSS-ê de taybetmendiya hevrêzkirina nivîsê bikar bînin, bi şêwazên taybetî yên CSS-ê konteynirek biafirînin, an ji bo wêneyên paşîn taybetmendiya pozîsyona paşîn bikar bînin. Van vebijarkan dê bihêlin ku hûn bigihîjin bandora xwestî û xuyangkirina hêmanên dîtbarî yên xwe li ser malpera xwe baştir bikin.
Di encamê de, navendkirina wêneyan di HTML-ê de karekî nisbeten hêsan e ku dikare bi karanîna taybetmendî û taybetmendiyên guncan pêk were. Di seranserê vê gotarê de, me rêbazên cihêreng ên ji bo navendkirina wêneyan di HTML-ê de lêkolîn kir, ji karanîna taybetmendiya align bigire heya karanîna şêwazên CSS.
Pêdivî ye ku ji bîr mekin ku her rêbaz dikare xweya xwe hebe avantaj û dezavantajên li gor rewş û pêdiviyên taybetî yên her projeyê. Wekî din, lihevhatina bi gerokên cihêreng û guhertoyên HTML-ê re divê were hesibandin.
Dema ku wêneyan navend dikin, pêdivî ye ku meriv ji etîket û taybetmendiyên HTML-ê, û hem jî bingehên sêwiran û sêwiranê baş têgihiştinek hebe. Bi heman awayî, girîng e ku pratîkên baş hebin pêşvebirina malperê da ku bandor û performansa malperê misoger bike.
Bînin bîra xwe ku navendkirina wêneyan tenê beşek piçûk e ji jêhatîbûn û teknîkên ku ji bo çêkirin û sêwiranê hewce ne malperên profesyonel. Berdewam fêrbûn û ceribandina bi HTML û CSS re dê bihêle ku hûn van amûran serdest bikin û zanîna xwe di warê pêşkeftina malperê de berfireh bikin.
Em hêvî dikin ku ev gotar di têgihîştina ka meriv çawa navendkirina wêneyan di HTML-ê de dike alîkar bû û bingehek zexm da we ku hûn vê mijarê bêtir lêkolîn bikin. Her gav dilşewat e ku meriv bibîne ka hêmanên dîtbar çawa bi hevrêzî di malperek de yek dibin, û navendkirina wêneyê bê guman jêhatîbûnek hêja ye ku meriv bigihîje. Di projeyên HTML-ê yên pêşerojê de serkeftin û hînbûnê bidomînin!
Ez Sebastián Vidal im, endezyarek komputerê ku ji teknolojiyê û DIY-ê dilşewat e. Wekî din, ez afirînerê wê me tecnobits.com, ku ez dersan parve dikim da ku teknolojiyê ji her kesî re bigihînim û têgihîştî bikim.