Onyonyo bụ akụkụ dị mkpa n'ịmepụta ọdịnaya weebụ ka ha nwere ike ibuga ozi n'ụzọ mara mma. Mgbe etinyere onyonyo na ibe HTML, ọ dị mkpa iji hụ na ha na-adakọbara na etiti ya nke ọma maka ngosi ziri ezi nke anya. N'isiokwu a, anyị ga-enyocha n'ụzọ zuru ezu usoro otu esi etinye ihe oyiyi na HTML ma nye ihe atụ bara uru iji nyere gị aka ịmụta usoro a. Jikere iji kwalite ọdịdị onyonyo gị na ọrụ gị webụ!
1. Okwu mmalite maka nhazi onyonyo na HTML
Ịhazi ihe oyiyi na HTML bụ akụkụ dị mkpa mgbe ị na-emepụta ibe weebụ. Onyonyo dabara adaba nke ọma nwere ike imeziwanye ọdịdị na ọhụhụ nke ibe, na-enye ahụmịhe onye ọrụ na-atọ ụtọ na ọkachamara.
Enwere ụzọ dị iche iche iji kwado onyonyo na HTML. Nke a na-ahụkarị bụ iji akụ "ederede-align" CSS nwere uru "center", "ekpe" ma ọ bụ "nri". Nke a ga-ahazi onyonyo n'etiti, aka ekpe ma ọ bụ aka nri nke ederede gbara ya gburugburu. Ọmụmaatụ:
«'
«'
Ọ ga-ekwe omume iji mkpado "aligning" HTML hazie ihe onyonyo. Mkpado a na-anabata ụkpụrụ "aka ekpe", "nri" na "etiti", mana a na-ewere ya dị ka ihe na-adịghị emezigharị kemgbe HTML5. Ya mere, a na-atụ aro ka iji CSS kama. Agbanyeghị, ọ bụrụ na ịchọrọ ịkwado ihe nchọgharị ochie, ị ka nwere ike iji mkpado mezie. Ọmụmaatụ:
«'
«'
Cheta na ọ dị mkpa iji njirimara "alt" na onyonyo gị iji nye nkọwa ọzọ maka ndị na-ahụ ụzọ. Ọzọkwa, zere iji alignment gabiga ókè, n'ihi na nke a nwere ike imetụta agụ na nhazi nke ibe gị n'ụzọ na-adịghị mma. Nyochaa nhọrọ dị iche iche wee chọta nhazi nke dabara na nhazi gị.
2. Ihe ndabere nke nhazi onyonyo na HTML
Ha bụ akụkụ dị mkpa kwesịrị iburu n'uche mgbe ị na-emepụta ihe weebụsaịtị. Ndozi nke ọma nke onyonyo nwere ike imeziwanye ọdịdị anya nke ibe yana ahụmịhe onye ọrụ. N'okpuru bụ usoro iji hazie onyonyo na HTML:
1. Jiri ` mkpado`Itinye onyonyo n'ime koodu HTML gi. Jide n'aka na ezipụta àgwà 'src' iji gosi ụzọ onyonyo dị na sava gị. Ka ịgbanwee nha onyonyo, ị nwere ike iji njirimara 'obosara' na 'ịdị elu'. Ọmụmaatụ:
"html
«'
2. Iji mezie onyonyo n'ụzọ kwụ ọtọ, ịnwere ike iji njirimara 'align' dị na mkpado' Njirimara a na-akwado ụkpụrụ ''aka ekpe'', ''aka nri'' na ''etiti''. Ọmụmaatụ:
"html
«'
3. Ọ bụrụ na ịchọrọ ịhazi onyonyo kwụ ọtọ, ịnwere ike iji njirimara `vertical-align` dị na mkpado `' Àgwà a na-akwado ụkpụrụ `» elu»`, `» etiti»` na `» ala»`. Ọmụmaatụ:
"html
«'
Ndị a bụ naanị ụfọdụ n'ime ha. Cheta na ị nwekwara ike iji CSS maka nhazi ka ukwuu na ịchịkwa ọdịdị oyiyi na ibe weebụ gị. Nnwale na nchikota dị iche iche nke àgwà na ụdị iji nweta nsonaazụ achọrọ.
3. HTML mkpado iji kwado onyonyo
Mkpado HTML bụ ngwa ọrụ dị mkpa maka nhazi na nhazi nke ibe weebụ. Otu n'ime njirimara ha na-enye bụ ikike ịhazi ihe onyonyo nke ọma. N'akụkụ a, a ga-enyocha mkpado kacha eji eme ihe iji mezuo ebumnuche a.
Mkpado mbụ anyị nwere ike iji bụ . Mkpado a na-enye anyị ohere itinye onyonyo na ibe weebụ anyị. Iji kwado ihe onyonyo a n'ụzọ kwụ ọtọ, anyị nwere ike iji n'usoro n'usoro na ụkpụrụ "aka ekpe" ma ọ bụ "nri". Dịka ọmụmaatụ, ọ bụrụ na anyị chọrọ ịhazi onyonyo n'aka ekpe, anyị nwere ike iji koodu ahụ
. Ọ bụrụ na anyị chọrọ ịhazi ya n'aka nri, anyị na-eji uru "nri" kama "aka ekpe".
Nhọrọ ọzọ iji dozie onyonyo bụ iji mkpado
. N'ụzọ dị otu a, onyonyo a ga-adakọ n'etiti n'ime div.
N'ikpeazụ, anyị nwekwara ike iji mkpado
.
4. Otu esi etinye onyonyo etiti site na iji ụdị CSS
Enwere ọtụtụ ụzọ isi tinye onyonyo n'etiti iji ụdị CSS. N'okpuru bụ ụzọ atọ a na-ejikarị eme ihe iji nweta nke a:
1. oke akpaaka: Ụzọ dị mfe isi tinye foto n'etiti bụ itinye akụkụ akpaka n'akụkụ aka ekpe na aka nri. Enwere ike nweta nke a site na iji iwu CSS ndị a: margin: 0 auto;. Site na ihe onwunwe a, a ga-etinye ihe oyiyi ahụ n'etiti etiti nke akpa ya.
2. Flexbox: Usoro ọzọ dị irè maka itinye ihe onyonyo n'etiti bụ iji flexbox. Site n'itinye iwu CSS ndị a na akpa nne na nna: display: flex; y justify-content: center;, a ga-etinye ihe oyiyi ahụ n'etiti etiti nke akpa ahụ. Rịba ama na n'ọnọdụ a, akpa ahụ ga-enwerịrị obosara edozi ma ọ bụ 100% obosara.
3. Gbanwee: Enwere ike iji ihe mgbanwe CSS mee ihe onyonyo etiti. Iji mezuo nke a, enwere ike itinye iwu CSS a na onyonyo a: transform: translateX(-50%);. Nke a ga-atụgharị ihe oyiyi ahụ gaa n'aka ekpe site na 50% nke obosara ya, na-etinye ya n'ime akpa ahụ. Ọzọkwa, ọ dị mkpa iji hụ na akpa ahụ nwere ihe onwunwe ahụ position: relative; nke mere na a na-etinye mgbanwe ahụ n'ụzọ ziri ezi.
Cheta na ndị a bụ naanị Examplesfọdụ ihe atụ otu esi etinye onyonyo etiti site na iji CSS. Ọ dị mkpa ịmegharị usoro ahụ dịka mkpa dị mkpa nke ọrụ ọ bụla si dị ma tụlee ndakọrịta na ihe nchọgharị dị iche iche.
5. Iji CSS Properties to Center Images na HTML
Iji mee ka onyonyo etiti dị na HTML, enwere ike iji akụrụngwa CSS dị iche iche. N'okpuru bụ ụfọdụ n'ime ndị a na-ahụkarị:
1. Enwere ike itinye ihe onwunwe "ngosi" nke nwere uru "flex" na ihe oyiyi ahụ iji mee ka ọ dị n'etiti ya na kwụ ọtọ. Ọmụmaatụ:
"html
«'
2. Nhọrọ ọzọ bụ iji ihe onwunwe "ederede-align" yana uru "etiti" na akpa ihe oyiyi. Usoro a na-etinye naanị ihe oyiyi ahụ n'ihu. Ọmụmaatụ:
"html
«'
3. Ọ bụrụ na ị chọrọ etiti image naanị horizontally, ị nwere ike iji "oke" ihe onwunwe na ụkpụrụ "akpaaka" n'aka ekpe na n'akụkụ aka nri nke ihe oyiyi akpa. Ya mere:
"html
«'
Ndị a bụ ụfọdụ ụzọ isi tinye foto na HTML site na iji akụrụngwa CSS. Dabere na usoro nke mkpokọta na site na ihe ndị a chọrọ, a pụrụ ịhọrọ usoro kachasị mma. Cheta na ngwọta ndị a nwere ike gbanwee ma gbanwee dị ka ọ dị mkpa iji kwado nhazi na ụdị nke ọrụ ọ bụla ma chọta nhọrọ kacha mma maka gị!
6. Advanced Image Centering Ụzọ na HTML
Na HTML, e nwere ọtụtụ ụzọ dị elu enwere ike iji mee ka onyonyo hichaa n'ụzọ ziri ezi na njikwa. Ụzọ ndị a na-ekwe ka onye mmepụta weebụ nweta ọdịdị na-adọrọ adọrọ ma hụ na ihe oyiyi dabara adaba na ọdịnaya gbara ya gburugburu.
Ụzọ a na-ejikarị bụ iji ihe onwunwe CSS "oke: akpaaka" yana ịtọ obosara oyiyi ahụ. Iji mezuo nke a, naanị dozie obosara maka onyonyo a wee tinye ihe “oke: akpaaka” na ya. Nke a ga-etinye ihe onyonyo a n'ụzọ kwụ ọtọ n'ime akpa ya.
Ụzọ ọzọ dị elu maka foto etiti bụ iji flexbox. Flexbox bụ ụdị okirikiri nhọrọ ukwuu nke na-enye ohere ịhazi ihe ndị dị n'ime akpa na ịhazi ya n'ụzọ akpaaka. Iji dobe onyonyo site na iji flexbox, ị ga-ekechie onyonyo a n'ime akpa wee tinye akụrụngwa CSS ndị a n'ime akpa ahụ: "ngosi: flex", "justify-content: center" na "align-items: center". Nke a ga-edozi ihe oyiyi ahụ ma kwụ ọtọ na kwụ n'ahịrị n'etiti akpa ahụ.
Na mgbakwunye na ụzọ ndị a, e nwere usoro ndị ọzọ dị elu nwere ike iji mee ka ihe oyiyi dị na HTML, dị ka iji ihe onwunwe "ọnọdụ: zuru oke" jikọtara ya na "n'elu: 50%" na "aka ekpe: 50%" ụkpụrụ, na-esote mgbanwe CSS iji megharịa onyonyo a nke ọma. Otú ọ dị, ụzọ ndị a dị mgbagwoju anya ma na-achọ ihe ọmụma miri emi nke CSS. Na nkenke, ha na-ekwe ka nhazi na nhazi dị ukwuu na nhazi nke ihe oyiyi, na-eme ka ọdịdị ihu nke ibe weebụ dịkwuo mma.
7. Dozie nsogbu ndị a na-ahụkarị mgbe ị na-etinye ihe oyiyi na HTML
Enwere nsogbu dị iche iche mgbe ị na-etinye ihe oyiyi na HTML, mana ọ dabara nke ọma, enwere ngwọta dị mfe ma dị irè maka nke ọ bụla n'ime ha. Ọ bụrụ na ị na-enwe nsogbu ịnweta onyonyo ka ọ dabara nke ọma na koodu HTML gị, soro usoro ndị a iji dozie esemokwu ahụ:
1. Jiri “text-aligning” CSS akụrụngwa ka etiti onyonyo n'ime akpa ya. Gbaa mbọ hụ na itinye uru "etiti" na akụrụngwa "text-align" dị na nhọrọ CSS kwekọrọ na akpa onyonyo. Ọmụmaatụ:
"html
«'
2. Ọ bụrụ na onyinyo ahụ adịghị n'etiti, lelee na obosara ya erughị ma ọ bụ hà nhata na obosara nke akpa ahụ. Ị nwere ike ịtọ obosara nke onyonyo a site na iji akụrụngwa obosara CSS na nhọpụta kwekọrọ. Ọmụmaatụ:
"html
«'
3. Ọ bụrụ na ihe oyiyi ahụ buru ibu karịa akpa ma ịchọrọ ka ọ dabara na akpaghị aka, ị nwere ike iji ihe onwunwe CSS "max-width" na uru nke "100%". Nke a ga-ekwe ka e wetuo onyonyo a ka ọ dabara na akpa ahụ na-enweghị atụfu akụkụ ya. Ọmụmaatụ:
"html
«'
Site n'ịgbaso usoro ndị a, ị ga-enwe ike idozi ọtụtụ nsogbu mgbe ị na-etinye ihe oyiyi na HTML. Cheta imeghari ndị nhọpụta na aha faịlụ na koodu nke gị. Ọ bụrụ na onyonyo ndị ahụ adabaghị nke ọma, lelee koodu gị maka mmejọ enwere ike wee hụ na etinyere ụdị CSS nke ọma.
8. Nleba anya nnweta mgbe ị na-etinye ihe onyonyo na HTML
Ntụle dị mkpa mgbe ị na-etinye ihe oyiyi na HTML bụ iji hụ na ibe ahụ nwere ike ịnweta mmadụ niile, gụnyere ndị nwere nsogbu anya. Enwere ọtụtụ usoro nwere ike inye aka nweta nnweta kwesịrị ekwesị mgbe ị na-etinye onyonyo na HTML.
Otu ụzọ isi mee nke a bụ site na iji njirimara ọzọ (alt) na mkpado onyonyo. Àgwà alt na-enye ederede nkọwa nke egosiri mgbe ihe onyonyo a naghị ebu ma ọ bụ mgbe onye na-agụ ihuenyo gụrụ ya. Ọ dị mkpa ịnye nkọwa ziri ezi nke onyonyo a ka ndị na-enweghị ike ịhụ ya wee ghọta ọdịnaya ya.
Ntụle ọzọ bụ iji mkpado Semantic na HTML. Mgbe ị na-etinye onyonyo n'etiti, ọ dị mma iji mkpado kwesịrị ekwesị dịka
Ọ dị mkpa iji ngwaọrụ nnweta na checkers nwalee nnweta nke ibe. Ngwa ndị a nwere ike ịchọpụta nsogbu ndị nwere ike ma nye ntụnye iji melite nnweta. Ọ dịkwa mkpa icheta na agba ndị a na-eji na-ese onyinyo etiti ga-enwerịrị ọdịiche zuru oke iji hụ na mmadụ niile na-ahụ ha, karịsịa ndị nwere nsogbu anya. Site n'ịgbaso nleba anya nnweta ndị a, ị nwere ike nweta ihe ngosi kwesịrị ekwesị nke ihe oyiyi HTML-centric nke nwere ike ịnweta na nghọta nye ndị ọrụ niile.
9. Omume kachasị mma maka itinye ihe oyiyi na HTML
Idobe onyonyo na HTML bụ ọrụ a na-ahụkarị mgbe ị na-emepụta ibe weebụ. N'okpuru ebe a bụ ụfọdụ omume kacha mma maka ịtọ ntọala onyonyo gị nke ọma.
1. Jiri akara nke HTML ka ịtinye onyonyo gị n'ime ibe. Jide n'aka na ị nyefere ụzọ ziri ezi na onyonyo a na njirimara src nke mkpado ahụ. Ọmụmaatụ:
.
2. Ka etiti ihe oyiyi kwụ ọtọ, ị nwere ike iji "oke" CSS ihe onwunwe na ụkpụrụ "akpaaka" na "igosi" setịpụrụ ka "mgbochi." N'ụzọ dị otú a, a ga-etinye ihe oyiyi ahụ n'etiti akpa ya. Tinye koodu CSS ndị a na faịlụ ụdị gị: img { display: block; oke-aka ekpe: onwe; oke-nri: onwe; }
3. Ọ bụrụ na ịchọrọ ịtọ ihe oyiyi etiti ma kwụ ọtọ ma kwụ ọtọ, ị nwere ike iji usoro flexbox. Tinye iwu CSS ndị a na akpa onyonyo: .container { display: flex; ziri ezi-ọdịnaya: etiti; mezie ihe: etiti; } Site na usoro a, a ga-edobe ihe onyonyo a n'etiti ma kwụ ọtọ ma kwụ ọtọ n'ime akpa ya.
Cheta na iji onyonyo gbadoro ụkwụ na ibe gị nwere ike inye aka melite ọdịdị na ahụmịhe onye ọrụ. Site n'ịgbaso omume ndị a, ị ga-enwe ike nweta ebe dị mma ma mara mma maka ihe oyiyi HTML gị. Egbula ịnwale ụzọ dị iche iche wee dozie ha dịka mkpa gị siri dị!
10. Strategies iji kwado ihe oyiyi na ngwaọrụ dị iche iche na ihuenyo
Otu n'ime ihe ndị dị mkpa mgbe ị na-emepụta weebụsaịtị bụ ijide n'aka na ihe oyiyi ahụ dabara nke ọma ngwaọrụ dị iche iche na ihuenyo. Nke a dị mkpa karịsịa n'ihi akụkụ na mkpebi dị iche iche nke ngwaọrụ ndị ọrụ na-eji nwere ike inwe. N'okpuru bụ atụmatụ iri iji nweta nzizi onyonyo ziri ezi na ngwaọrụ dị iche iche na ihuenyo:
1. Jiri ajụjụ mgbasa ozi: Ajụjụ mgbasa ozi na-enye gị ohere itinye ụdị CSS akọwapụtara dịka njirimara ngwaọrụ ahụ. Enwere ike iji ha tọọ nha, ọnọdụ na oke dị iche iche maka onyonyo na nha ihuenyo dị iche iche.
2. Jiri pasentị ma ọ bụ nkeji ikwu: Kama iji nlegharị anya dị ka pikselụ kọwaa nha onyonyo, ọ dị mma iji pasentị ma ọ bụ nkeji ikwu dịka "em" ma ọ bụ "rem". Nkeji ndị a ga-agbanwe ozugbo dabere na nha ihuenyo, na-ahụ na nhazi onyonyo kwesịrị ekwesị.
3. Jiri onyogho na-anabata: Onyonyo na-anabata na-akpaghị aka na-agbanwe dabere na nha ihuenyo, na-eme ka ha kwekọọ n'ụzọ ziri ezi na ngwaọrụ dị iche iche. Iji nweta nke a, enwere ike iji usoro dị ka iji njirimara "srcset" na HTML ma ọ bụ iji ihe onwunwe "background-size" dị na CSS.
4. Na-ebuli nha na usoro ihe oyiyi: Ọ dị mkpa ịkwalite nha na usoro ihe oyiyi ka ha na-ebu ngwa ngwa na ngwaọrụ dị iche iche. A na-atụ aro ka iji ngwaọrụ mkpakọ onyonyo wee jiri ụdị dị ka JPEG ma ọ bụ WebP, nke na-enye mmekọrịta dị mma n'etiti ogo na nha faịlụ.
5. Nwalee na ngwaọrụ dị iche iche na ihe nchọgharị: Iji jide n'aka na ihe oyiyi dabara n'ụzọ ziri ezi na ngwaọrụ niile na ihe nchọgharị, a chọrọ nnwale buru ibu. A na-atụ aro ka ị nwalee na nha ihuenyo dị iche iche, ngwaọrụ mkpanaka, na ihe nchọgharị ndị a ma ama iji chọpụta nsogbu ndị nwere ike itinye.
6. Jiri usoro ma ọ bụ ọba akwụkwọ na-anabata: E nwere usoro dị iche iche na-anabata na ụlọ akwụkwọ dịnụ nke nwere ike ịkwado usoro nhazi ihe oyiyi na ngwaọrụ dị iche iche. Ụfọdụ nhọrọ na-ewu ewu bụ Bootstrap, Foundation na Bulma, nke na-enye ihe ndị eburu ụzọ kọwaa na ụdị ahaziri maka ngosipụta ziri ezi na nha ihuenyo dị iche iche.
7. Jide n'aka na enwere ike ịnweta ihe oyiyi: Ọ dị mkpa ịtụle ịnweta mgbe ị na-emepụta weebụsaịtị, nke a na-emetụtakwa ihe oyiyi. A na-atụ aro ka ị jiri njirimara "alt" dị na mkpado onyonyo iji nye ederede nkọwa ọzọ iji gosipụta ma ọ bụrụ na onye na-agụ ihuenyo enweghị ike ibunye ma ọ bụ gụọ ihe onyonyo a.
8. Zere itinye ihe oyiyi mmanye: Ọ dị mma ka ị zere iji ụdị CSS na-amanye nhazi nke onyonyo, n'ihi na nke a nwere ike ịkpata nsogbu na ngwaọrụ dị iche iche na ihuenyo. Ọ ka mma iji nha ndị ikwu ma kwe ka onyonyo gbanwee dabere na nha ihuenyo.
9. Tụlee oghere na-adịghị mma: Oghere na-adịghị mma, nke a makwaara dị ka oghere ọcha, dị mkpa iji hụ na nhazi nke ihe oyiyi kwesịrị ekwesị. Ọ bụ ihe amamihe dị na ya ịhapụ oke oke n'akụkụ ihe onyonyo iji gbochie ka gbutuo ya ma ọ bụ mebie ya mgbe elele ya na ngwaọrụ dị iche iche ma ọ bụ enyo.
10. Na-enyocha ma gbanwee mgbe niile: Nhazi na nhazi nke ihe oyiyi na ngwaọrụ dị iche iche na ihuenyo bụ usoro na-aga n'ihu. Ọ dị mkpa ka ị na-enyocha ma mezie nhazi nke onyonyo gị mgbe niile iji hụ na ọ dị mma na ngwaọrụ niile, wee mee mgbanwe dịka ọ dị mkpa.
Site na usoro ndị a, ọ ga-ekwe omume iji nweta nhazi ziri ezi nke ihe oyiyi na ngwaọrụ dị iche iche na ihuenyo. Ịgbaso usoro ndị a ga-eme ka ahụmịhe ọrụ kachasị mma n'agbanyeghị ngwaọrụ ndị ọbịa webụsaịtị gị na-eji.
11. Ngwa na akụrụngwa bara uru maka ịhazi onyonyo na HTML
Na HTML, ịhazi ihe onyonyo n'ụzọ ziri ezi nwere ike bụrụ ihe ịma aka, mana enwere ọtụtụ ngwaọrụ na akụrụngwa bara uru nke nwere ike ime ka usoro a dị mfe. N'okpuru bụ ụfọdụ ụzọ na usoro ga-enyere gị aka ịhazi onyonyo na HTML n'ụzọ dị irè:
1. Iji "ederede-aligning" CSS onwunwe: Ị nwere ike mezie oyiyi n'ahịrị na ederede site na iji "ederede-aligning" CSS onwunwe. Iji mee nke a, kechie onyonyo a na ihe mgbochi, dị ka div, wee tinye ihe “text-align” n'ime akpa ahụ. Dịka ọmụmaatụ, ọ bụrụ na ịchọrọ ịhazi onyonyo n'aka ekpe, ịnwere ike iji koodu a:
"html
«'
2. Jiri ihe CSS "ese n'elu": Nhọrọ ọzọ bụ iji ihe onwunwe CSS "ese n'elu" iji kwado ihe oyiyi na HTML. Ị nwere ike sere n'elu onyonyo gaa n'aka ekpe ma ọ bụ aka nri na-eji ụkpụrụ "aka ekpe" na "aka nri" n'otu n'otu. Ọmụmaatụ:
"html
«'
3. Tinye ihe oyiyi na Flexbox: Ọ bụrụ na ịchọrọ nhazi mgbanwe na ike dị ike, ị nwere ike iji Flexbox. Flexbox bụ ụdị nhazi CSS nke na-enye ohere njikwa dị elu karịa nhazi na nhazi nke ihe. Ị nwere ike ịhazigharị nhazi ahụ na kwụ ọtọ na kwụ ọtọ site na iji njirimara CSS flexbox. Nke a bụ ihe atụ bụ isi otu esi eji Flexbox kwado onyonyo n'ihu:
"html
«'
12. Ọmụmaatụ bara uru nke ihe onyonyo n'etiti HTML
N'isiokwu a, anyị ga-ewetara gị ihe atụ 12 bara uru nke otu esi etinye ihe oyiyi na HTML. Ịmara ka esi etinye ihe oyiyi n'etiti bara uru ma a bịa n'ichepụta ibe weebụ ma ọ bụ blọọgụ, ebe ọ na-eme ka ọdịdị ahụ dịkwuo mma na ịgụ ihe nke ọdịnaya. Ọzọ, anyị ga-egosi gị ụzọ dị iche iche iji nweta mmetụta a.
1. N'etiti ihe oyiyi nwere àgwà HTML: Ụzọ kachasị mfe isi tinye ihe onyonyo n'etiti bụ iji HTML "aligning" na "style" àgwà. Dịka ọmụmaatụ, ịnwere ike ịgbakwunye akara koodu na-esote na img element na koodu HTML gị: align ="center". Nke a ga-edobe onyonyo a n'ahịrị na ibe.
2. Mechie onyonyo na CSSỤzọ ọzọ isi mee ihe onyonyo bụ iji CSS. Ị nwere ike ịmepụta klaasị CSS kpọmkwem maka onyonyo ịchọrọ itinye n'etiti wee tinye ya na mmemme img na koodu HTML. Dịka ọmụmaatụ, ịnwere ike iji koodu CSS a:
«'
«'
Mgbe ahụ, na koodu HTML gị, tinye klaasị "center-image" na mmemme img:
«'
«'
3. Mechie onyonyo site na iji flexbox: Flexbox bụ usoro dị elu maka ịmepụta ibe weebụ nke na-enye ohere ịchịkwa ọnọdụ na nhazi nke ihe. Iji dobe onyonyo site na iji flexbox, ịkwesịrị kechie ya n'ime akpa wee tinye ụfọdụ ihe CSS n'ime akpa ahụ. Dịka ọmụmaatụ, ịnwere ike ịgbakwunye koodu CSS a:
«'
«'
Mgbe ahụ, na koodu HTML gị, kechie onyonyo gị n'ime akpa:
«'
«'
Ndị a bụ naanị ọmụmaatụ ole na ole maka otu esi etinye onyonyo etiti na HTML. Nhọrọ nke usoro ga-adabere na mkpa na mmasị gị. Gbalịa ha wee nwalee ka ịchọta nke kacha dabara maka ọrụ gị. Jisie na imewe weebụ gị!
13. Na-ebuli arụmọrụ mgbe ị na-etinye ihe oyiyi na HTML
Iji kwalite arụmọrụ mgbe ị na-etinye onyonyo etiti na HTML, enwere ọtụtụ ụzọ enwere ike iji. N'okpuru ebe a, anyị ga-egosi ụfọdụ nhọrọ ga-enyere gị aka imezu nke a rụọ ọrụ nke ọma:
Nke mbụ, ụzọ a na-ejikarị eme ihe n'etiti ihe onyonyo bụ site na iji mkpado `
Nhọrọ ọzọ bụ iji ụdị CSS mee ka onyinyo ahụ dị n'etiti. Ị nwere ike itinye ihe 'ngosi: ngọngọ' n'ihe onyonyo a wee jiri akụ 'oke' nwere ụkpụrụ akpaka ka etiti ya ma kwụ ọtọ na kwụ ọtọ. Ọmụmaatụ:
"html
«'
Nhọrọ ọzọ bụ iji flexbox, usoro nhazi CSS nke na-enye gị ohere ikesa n'ụzọ dị nro na ihe etiti. Iji tinye flexbox n'etiti onyonyo, ị nwere ike iji koodu a:
"html
«'
Ndị a bụ naanị ụzọ ole na ole iji tinye foto n'etiti HTML ụzọ dị mma. Cheta na ọ dị mkpa ka ebuli arụmọrụ nke webụsaịtị gị, Ya mere, anyị na-akwado iji usoro kachasị mma dabere na mkpa gị na ihe nhazi chọrọ.
14. Mkpebi na ndụmọdụ ikpeazụ maka itinye ihe oyiyi na HTML
Iji mee ka onyonyo etiti dị na HTML, enwere ọtụtụ ụzọ ị nwere ike iji. N'okpuru bụ ụfọdụ nkwubi okwu ikpeazụ na ndụmọdụ iji mezuo ebumnuche a.
Nke mbụ, otu nhọrọ bụ iji akụrụngwa “text-align” na CSS. Ị nwere ike itinye ihe onwunwe a na mmewere akpa ihe oyiyi, na-edozi uru ya na "etiti." N'ụzọ dị otú a, a ga-etinye ihe oyiyi ahụ n'etiti etiti n'ime akpa ya.
Nhọrọ ọzọ bụ iji mkpado "div". imeputa akpa maka onyonyo a ma tinye ụdị CSS akọwapụtara. Iji mee ka onyinyo ahụ dị n'etiti etiti, ị nwere ike ịtọ akụkụ aka ekpe na aka nri nke akpa ahụ na "akpaaka", ma hụ na obosara nke ihe oyiyi adịghị agafe obosara nke akpa ahụ. Na mgbakwunye, ka itinye ya n'etiti kwụ ọtọ, ịnwere ike iji akụrụngwa “ngosi” nwere uru “flex” yana akụrụngwa “mmekọrịta-ihe” nwere uru “etiti”.
N'ikpeazụ, ọ bụrụ na ịchọrọ ịtọ ntọala ndabere na ihe HTML, ị nwere ike iji ihe ndabere ndabere na CSS. Ị nwere ike ịtọ ụkpụrụ "center center" ka ọ bụrụ n'etiti onyinyo ahụ ma n'ahịrị na kwụ ọtọ. Ọzọkwa, ọ bụrụ na ịchọrọ ka ihe oyiyi ahụ na-emegharị n'azụ, ị nwere ike iji ihe onwunwe "background-repeat" na uru "enweghị-emegharị."
Na nkenke, iji nweta onyonyo etiti na HTML, ị nwere ike iji akụ na-ahazi ederede na CSS, mepụta akpa nwere ụdị CSS akọwapụtara, ma ọ bụ jiri akụrụngwa ọnọdụ ndabere maka onyonyo ndabere. Nhọrọ ndị a ga-eme ka ị nweta mmetụta a chọrọ ma melite ọdịdị nke ihe ngosi gị na ebe nrụọrụ weebụ gị.
N'ikpeazụ, itinye ihe oyiyi n'etiti HTML bụ ọrụ dị mfe nke nwere ike ịrụzu site na iji njirimara na àgwà kwesịrị ekwesị. N'ime akụkọ a niile, anyị enyochala ụzọ dị iche iche maka itinye ihe onyonyo n'etiti HTML, sitere na iji njirimara alignment na iji ụdị CSS.
Ọ dị mkpa icheta na usoro ọ bụla nwere ike inwe ya uru na ọghọm dabere na ọnọdụ na mkpa kpọmkwem nke ọrụ ọ bụla. Na mgbakwunye, a ga-enyocharịrị ndakọrịta na ihe nchọgharị dị iche iche yana ụdị HTML.
Mgbe ị na-etinye ihe oyiyi n'etiti, ọ dị mkpa inwe ezigbo nghọta nke mkpado HTML na njirimara, yana ihe ndabere nke imewe na nhazi. N'otu aka ahụ, ọ dị oke mkpa inwe omume ọma mmepe weebụ iji hụ na arụmọrụ saịtị na arụmọrụ.
Cheta na ihe onyonyo n'etiti bụ naanị obere akụkụ nke nka na usoro achọrọ iji mepụta na imepụta ebe nrụọrụ weebụ ndị ọkachamara. Ịga n'ihu na-amụta na ịnwale HTML na CSS ga-enye gị ohere ịmụta ngwá ọrụ ndị a ma gbasaa ihe ọmụma gị na ngalaba mmepe weebụ.
Anyị na-atụ anya na isiokwu a enyerela aka ịghọta otu esi etinye ihe oyiyi na HTML ma nye gị ntọala siri ike iji nyochaa isiokwu a n'ihu. Ọ na-atọ ụtọ mgbe niile ịhụ ka ihe ndị a na-ahụ anya si ejikọta ọnụ na webụsaịtị, na itinye ihe onyonyo n'etiti bụ n'ezie nka bara uru iji nweta. Jisie ike na ọrụ HTML gị n'ọdịnihu wee nọgide na-amụ ihe!
Abụ m Sebastián Vidal, onye injinia kọmpụta nwere mmasị na teknụzụ na DIY. Ọzọkwa, abụ m onye okike tecnobits.com, ebe m na-ekerịta nkuzi iji mee ka nkà na ụzụ nwetakwuo ohere na nghọta maka onye ọ bụla.