Ko nga whakaahua tetahi waahanga nui ki te hanga i nga ihirangi paetukutuku na te mea ka taea e raatau te kawe korero ma te ahua ataahua. Ina whakaurua nga whakaahua ki tetahi wharangi HTML, he mea nui ki te whakarite kia noho tika, kia noho tika mo te whakaaturanga tirohanga. I roto i tenei tuhinga, ka tirotirohia e matou te tikanga me pehea te whakauru i nga whakaahua ki roto i te HTML me te whakarato tauira whai kiko hei awhina i a koe ki te mohio ki tenei tikanga. Kia rite ki te whakapai ake i te ahua o o whakaahua i roto i ō kaupapa tukutuku!
1. He kupu whakataki ki te whakatikatika atahanga i roto i te HTML
Ko te whakahāngai i nga whakaahua i roto i te HTML tetahi waahanga nui i te wa e hoahoa ana i nga wharangi paetukutuku. Ka taea e te ahua whakatika tika te whakapai ake i te ahua me te rerenga tirohanga o tetahi wharangi, ka pai ake te wheako kaiwhakamahi me te ngaio.
He maha nga huarahi hei whakatika i nga whakaahua ki te HTML. Ko te mea tino noa ko te whakamahi i te taonga CSS "tuhi-whakaaro" me te uara "pokapū", "maui" ranei "matau". Ma tenei ka whakahāngai i te atahanga ki te pokapū, ki te taha maui, ki te taha matau ranei o te kuputuhi huri noa. Hei tauira:
""
""
Ka taea hoki te whakahāngai i nga whakaahua ma te whakamahi i te tohu "whakaaro" HTML. Ka whakaae tenei tohu ki nga uara "maui", "matau" me "pokapū", engari ka kiia he tawhito mai i te HTML5. Na reira, e tūtohu ana ki te whakamahi i CSS kē. Heoi, ki te hiahia koe ki te tautoko i nga kaitirotiro tawhito, ka taea tonu e koe te whakamahi i te tohu tiro. Hei tauira:
""
""
Kia maumahara he mea nui ki te whakamahi i nga huanga "alt" ki o whakaahua hei whakarato i tetahi whakaahuatanga rereke mo te hunga haua. Me karo atu i te whakamahi nui o nga tirohanga, na te mea ka pa kino tenei ki te panui me te hanganga o to wharangi. Whakamatautau ki nga whiringa rereke ka kimihia te tirohanga e pai ana ki to hoahoa.
2. Ko nga Taketake o te Whakariterite Atahanga i roto i te HTML
He mea tino nui ki te whai whakaaro i te wa e hoahoa ana he paetukutuku. Ko te whakatika tika o nga whakaahua ka pai ake te ahua o te wharangi me te wheako kaiwhakamahi. Kei raro nei nga hikoi ki te whakatika i nga whakaahua ki te HTML:
1. Whakamahia te tohu `` ki te whakauru i te ahua ki to waehere HTML. Me whakapūtā te huanga `src` hei tohu i te ara o te atahanga i runga i to tūmau. Hei whakatika i te rahi o te ahua, ka taea e koe te whakamahi i nga huanga `whanui` me te `teitei`. Hei tauira:
"`html
""
2. Hei tiaaro whakapae i tetahi atahanga, ka taea e koe te whakamahi i te huanga `tiaro` i te `tag`. Ka tautokohia e tenei huanga nga uara `»mauī»`, `»matau»`, me te `»pokapū»`. Hei tauira:
"`html
""
3. Mena kei te pirangi koe ki te tiaaro poutū i tetahi atahanga, ka taea e koe te whakamahi i te huanga `poutū-aroaro` i te tohu ``. Ka tautokohia e tenei huanga nga uara `»runga»`, `»waenganui»`, me te `»raro»`. Hei tauira:
"`html
""
Ko etahi noa enei. Kia mahara ka taea hoki e koe te whakamahi CSS mo te whakarite me te whakahaere i te ahua o nga whakaahua i runga i to wharangi paetukutuku. Whakamātautau ki ngā huinga rerekē o ngā huanga me ngā kāhua kia whiwhi ai i te hua e hiahiatia ana.
3. Ko nga tohu HTML hei whakatika i nga whakaahua
Ko nga tohu HTML he taputapu matua mo te hoahoa me te hanganga o te wharangi paetukutuku. Ko tetahi o nga ahuatanga ka tukuna e ratou ko te kaha ki te whakarite tika i nga whakaahua. I tenei wahanga, ka tirohia nga tohu e tino whakamahia ana hei whakatutuki i tenei whaainga.
Ko te tohu tuatahi ka taea e tatou te whakamahi . Ma tenei tohu ka taea e matou te whakauru i tetahi ahua ki to maatau wharangi paetukutuku. Hei whakahāngai i te ahua whakapae, ka taea e tatou te whakamahi i te huanga align me nga uara "maui" ranei "matau". Hei tauira, ki te hiahia tatou ki te whakahāngai i tetahi ahua ki te taha maui, ka taea e tatou te whakamahi i te waehere
. Mena kei te pirangi matou ki te whakahāngai ki te taha matau, whakamahia te uara "matau" hei utu mo te "maui".
Ko tetahi atu whiringa ki te whakatika i nga whakaahua ko te whakamahi i te tohu
. Ma tenei ka noho te atahanga ki roto i te div.
Ka mutu, ka taea hoki e tatou te whakamahi i te tohu
.
4. Me pehea te whakakotahi i nga whakaahua ma te whakamahi i nga momo CSS
He maha nga huarahi ki te whakauru i nga whakaahua ma te whakamahi i nga momo CSS. Kei raro nei e toru nga tikanga e whakamahia nuitia ana hei whakatutuki i tenei:
1. Tawhē Aunoa: Ko te huarahi ngawari ki te whakakotahi i tetahi ahua ko te tono tawhē aunoa ki te taha maui me te taha matau. Ka taea tenei ma te whakamahi i te ture CSS e whai ake nei: margin: 0 auto;. Ma tenei taonga, ka whakanohohia te ahua ki te pokapū whakapae o tana ipu.
2. Pouaka Whakakorikori: Ko tetahi atu tikanga whai hua mo te whakakotahi i nga whakaahua ko te whakamahi flexbox. Ma te whakamahi i nga ture CSS e whai ake nei ki te ipu matua: display: flex; y justify-content: center;, ka whakanohoia te ahua ki te pokapū whakapae o te ipu. Kia mahara ko tenei ahuatanga me whai whanui te ipu, kia 100% ranei te whanui.
3. Hurihia: Ka taea hoki te whakamahi i te taonga huringa CSS ki te whakakotahi i nga whakaahua. Hei whakatutuki i tenei, ka taea te whakamahi i te ture CSS e whai ake nei ki te ahua: transform: translateX(-50%);. Ma tenei ka huri te ahua ki te taha maui ma te 50% o tona whanui, ka whakatetahi ki roto i te ipu. I tua atu, he mea nui ki te whakarite kei te ipu te taonga position: relative; kia tika ai te tono o te panonitanga.
Kia mahara ko enei anake ētahi tauira me pehea ki te pokapū whakaahua ma te whakamahi CSS. He mea nui ki te urutau i nga tikanga kia rite ki nga hiahia motuhake o ia kaupapa me te whakaaro ki te hototahi ki nga momo tirotiro.
5. Te whakamahi i nga Taonga CSS ki te Pokapū Whakaahua i roto i te HTML
Hei whakauru i nga whakaahua ki roto i te HTML, ka taea te whakamahi i nga momo ahuatanga CSS. Kei raro nei etahi o nga mea tino noa:
1. Ko te taonga "whakaatu" me te uara "flex" ka taea te tono ki te ipu atahanga hei whakakotahi i te taha whakapae me te poutū. Hei tauira:
"`html
""
2. Ko tetahi atu whiringa ko te whakamahi i te taonga "whakaaro-tuhi" me te uara "pokapū" i roto i te ipu whakaahua. Ko tenei tikanga ka whakatetahi i te ahua whakapae. Hei tauira:
"`html
""
3. Ki te hiahia koe ki te whakakotahi i te ahua whakapae anake, ka taea e koe te whakamahi i te taonga "tawhē" me nga uara "aunoa" kei te taha maui me te taha matau o te ipu whakaahua. Na:
"`html
""
Koinei noa etahi o nga huarahi ki te whakauru i nga whakaahua ki te HTML ma te whakamahi i nga taonga CSS. Kei runga i te hanganga o te paetukutuku mai i nga whakaritenga motuhake, ka taea te whiriwhiri i te tikanga tino pai. Kia mahara ka taea te whakarereke me te whakatika i enei otinga kia pai ai te hoahoa me te ahua o ia kaupapa Whakamatau me te kimi i te whiringa pai mo koe!
6. Tikanga Whakawaenga Atahanga Arā i roto i te HTML
I roto i te HTML, he maha nga tikanga matatau ka taea te whakamahi ki te whakauru i nga whakaahua i runga i te tika me te whakahaere. Ko enei tikanga ka taea e te kaihoahoa paetukutuku te whakatutuki i te ahua ataahua me te whakarite kia tika te hono o nga whakaahua ki nga ihirangi a tawhio noa.
Ko te tikanga e whakamahia nuitia ana ko te whakamahi i te taonga CSS "tawhē: auto" me te whakatakoto i te whanui atahanga. Hei whakatutuki i tenei, tautuhi noa i te whanui kua whakaritea mo te ahua katahi ka tono i te taonga "tawhē: auto" ki reira. Ma tenei ka whakakotahi te atahanga ki roto i tana ipu.
Ko tetahi atu tikanga matatau ki te whakakotahi i nga whakaahua ko te flexbox. Ko te Flexbox he tauira tahora ngawari e taea ai e nga huānga o roto o te ipu te whakarite me te whakararangi i runga i te tikanga aunoa. Hei whakakotahi i tetahi atahanga ma te whakamahi i te flexbox, me takai koe i te ahua ki roto i te ipu ka tono i nga ahuatanga CSS e whai ake nei ki te ipu: "whakaatu: flex", "justify-content: centre" me "align-items: center". Ma tenei ka whakatika i te ahua ki te poutū me te whakapae i waenganui o te ipu.
I tua atu i enei tikanga, tera ano etahi atu tikanga matatau ka taea te whakamahi ki te whakauru i nga whakaahua ki roto i te HTML, penei i te whakamahi i te taonga "turanga: tino" me nga uara "runga: 50%" me te "maui: 50%", whai muri i te huringa CSS ki te whakatika tika i te ahua. Engari, he uaua ake enei tikanga me te hiahia kia hohonu ake te mohio ki te CSS. I roto i te poto, ka taea e ratou te whakarite ake me te tika i roto i te whakatikatika o nga whakaahua, ka tino whakapai ake i te ahua tirohanga o te whaarangi paetukutuku.
7. Whakatikahia nga raruraru noa i te wa e whaanui ana nga whakaahua ki te HTML
He maha nga raruraru noa i te wa e whaanui ana nga whakaahua ki te HTML, engari ko te waimarie, he otinga ngawari me te whai hua mo ia mea. Mena kei te raru koe ki te tiki whakaahua kia tika ki to waehere HTML, whai i enei mahi hei whakatau i te take:
1. Whakamahia te taonga CSS "whakaaro-kupu" hei whakakotahi i te ahua ki roto i tana ipu. Me tono te uara "pokapū" ki te taonga "whakaaro-kupu" i roto i te kaiwhiriwhiri CSS e rite ana ki te ipu atahanga. Hei tauira:
"`html
""
2. Ki te kore tonu te atahanga i waenganui, tirohia he iti iho te whanui o te ipu, he rite ranei ki te whanui o te ipu. Ka taea e koe te tautuhi i te whanui o te ahua ma te whakamahi i te taonga whanui CSS i roto i te kaiwhiriwhiri e rite ana. Hei tauira:
"`html
""
3. Mena he nui ake te ahua ki te ipu ka hiahia koe kia uru aunoa, ka taea e koe te whakamahi i te taonga CSS "max-whanui" me te uara "100%". Ma tenei ka taea te whakaheke i te ahua ki raro kia uru ki te ipu me te kore e ngaro tona ahuatanga ōwehenga. Tauira:
"`html
""
Ma te whai i enei mahi, ka taea e koe te whakaoti i te nuinga o nga raru i te wa e whaaia ana nga whakaahua ki te HTML. Kia mahara ki te urutau i nga kaiwhiriwhiri me nga ingoa konae ki to ake waehere. Mena karekau tonu nga whakaahua e tika ana, tirohia to waehere mo nga hapa ka taea, me te mohio kei te tika te whakamahi i nga momo CSS.
8. Nga Whakaaro Whakaaetanga Ina Whakawaengahia nga Whakaahua ki te HTML
Ko tetahi whakaaro nui i te wa e whaanui ana nga whakaahua ki te HTML ko te whakarite kia waatea te wharangi ki nga taangata katoa, tae atu ki te hunga he ngoikore te tirohanga. He maha nga tikanga hei awhina i te urunga tika i te wa e whakakotahi ana nga whakaahua ki te HTML.
Ko tetahi huarahi ki te mahi i tenei ko te whakamahi i etahi atu huanga (alt) ki nga tohu whakaahua. Ko te huanga alt e whakarato ana i nga tuhinga whakamaarama ka whakaatuhia ina kore te ahua e utaina, ka panuihia ranei e te kaipanui mata. He mea nui ki te whakarato i te whakaahuatanga tika o te ahua kia mohio ai nga tangata kaore e kite i te ahua o te ahua.
Ko tetahi atu whakaaro ko te whakamahi i nga tohu Semantic i roto i te HTML. I te wa e whakakotahi ana nga whakaahua, he mea tika kia whakamahia nga tohu tika penei i te
He mea nui ki te whakamatautau i te urunga o te whaarangi ma te whakamahi i nga taputapu uru me nga kaitaki. Ka taea e enei taputapu te kite i nga raru pea me te tuku whakaaro hei whakapai ake i te urunga. He mea nui ano kia maumahara ko nga tae e whakamahia ana ki te whakakoi i nga whakaahua me tino rerekee kia kitea e nga tangata katoa, ina koa ko te hunga he ngoikore te tirohanga. Ma te whai i enei whakaaro whakaurunga, ka taea e koe te whakaatu tika i nga whakaahua HTML-centric e waatea ana, e marama ana hoki ki nga kaiwhakamahi katoa.
9. Ko nga tikanga pai mo te whakakotahi i nga whakaahua ki te HTML
Ko te whakakotahi i nga whakaahua ki te HTML he mahi noa i te wa e hoahoa ana i nga wharangi paetukutuku. Kei raro nei etahi tikanga pai mo te whakakotahi o o whakaahua.
1. Whakamahia te tapanga o HTML hei whakauru i o whakaahua ki te wharangi. Me whakarite e koe te huarahi tika ki te ahua i roto i te huanga src o te tohu. Hei tauira:
.
2. Hei whakakotahi i te ahua whakapae, ka taea e koe te whakamahi i te taonga CSS "tawhwh" me nga uara "aunoa" me te "whakaatu" kua whakaritea ki te "poraka." Ma tenei ka tuu te ahua ki waenganui o tana ipu. Tāpirihia te waehere CSS e whai ake nei ki tō kōnae kāhua: img { display: block; taha-maui: whaiaro; taha-matau: whaiaro; }
3. Mena kei te pirangi koe ki te whakakotahi i tetahi ahua ki te taha whakapae me te poutū, ka taea e koe te whakamahi i te tikanga flexbox. Hoatu nga ture CSS e whai ake nei ki te ipu whakaahua: .container { display: flex; justify-content: pokapū; tīaroaro-tūemi: pokapū; }. Ma tenei huarahi, ka whakanohohia te ahua ki waenganui i te taha whakapae me te poutū ki roto i tana ipu.
Kia maumahara ko te whakamahi i nga whakaahua i waenganui i to wharangi ka taea te whakapai ake i te ahua me te wheako kaiwhakamahi. Ma te whai i enei mahi, ka taea e koe te whakatutuki i te whakateanga whaihua me te ataahua mo o whakaahua HTML. Kaua e whakaroa ki te whakamatau i nga tikanga rereke me te whakatika kia rite ki o hiahia!
10. Rautaki ki te whakahāngai i nga whakaahua ki nga taputapu rereke me nga mata
Ko tetahi o nga whakaaro nui i te wa e hoahoa ana i tetahi paetukutuku ko te whakarite kia tika nga whakaahua ki runga ngā taputapu rerekē me nga mata. He mea tino nui tenei na te rereke o nga rahi me nga whakataunga kei nga taputapu e whakamahia ana e nga kaiwhakamahi. Kei raro nei nga rautaki tekau hei whakatutuki i te tirohanga whakaahua tika i runga i ngā taputapu rerekē me nga mata:
1. Whakamahia nga patai pāpāho: Ka taea e nga patai pāpāho te whakamahi i nga momo CSS motuhake i runga i nga ahuatanga o te taputapu. Ka taea te whakamahi ki te whakarite i nga rahi rereke, nga tuunga me nga tawhē mo nga whakaahua i runga i nga rahi mata rereke.
2. Whakamahihia nga pahekeheke, waeine whanaunga ranei: Engari me whakamahi i nga inenga pumau penei i nga pika hei tohu i te rahi o nga whakaahua, he pai ake te whakamahi i nga ōrau, i nga waeine whanaunga penei i te "em" me te "rem". Ko enei wae ka whakatika aunoa i runga i te rahi o te mata, me te whakarite kia tika te whakatika o nga whakaahua.
3. Whakamahia nga whakaahua urupare: Ka whakatika aunoa nga whakaahua urupare i runga i te rahi o te mata, me te whakarite kia tika te hono ki runga i nga taputapu rereke. Hei whakatutuki i tenei, ka taea te whakamahi i nga tikanga penei i te whakamahi i te huanga "srcset" i roto i te HTML me te whakamahi i te taonga "papamuri-rahi" i roto i te CSS.
4. Arotauhia te rahi me te whakatakotoranga o nga whakaahua: He mea nui kia arotau te rahi me te whakatakotoranga o nga whakaahua kia tere te uta ki runga i nga taputapu rereke. E taunaki ana kia whakamahia nga taputapu taapiri whakaahua me te whakamahi i nga whakatakotoranga penei i te JPEG, i te WebP ranei, he pai te hononga i waenga i te kounga me te rahi o te konae.
5. Whakamatautau ki nga taputapu rereke me nga kaitirotiro: Kia tika ai te hono o nga whakaahua i runga i ngā taputapu katoa me nga kaitirotiro, me nui nga whakamatautau. E taunaki ana kia whakamatau i nga rahi rereke o te mata, nga taputapu pūkoro, me nga kaitirotiro rongonui hei tautuhi i nga take whakatikatika.
6. Whakamahia nga anga urupare, whare pukapuka ranei: He maha nga anga urupare me nga whare pukapuka e waatea ana e taea ai te whakahaere i te hangai o nga whakaahua ki nga taputapu rereke. Ko etahi o nga whiringa rongonui ko Bootstrap, Foundation me Bulma, e tuku ana i nga waahanga kua tautuhia i mua me nga momo kua arotauhia mo te whakaatu tika i runga i nga rahi mata rereke.
7. Me mohio kei te waatea nga whakaahua: He mea nui kia whai whakaaro koe ki te whakaurunga i te wa e hoahoa ana i te paetukutuku, ka pa ano tenei ki nga whakaahua. E taunaki ana kia whakamahia e koe te huanga "alt" ki nga tohu atahanga hei whakaatu i nga tuhinga rereke hei whakaatu mena kaore e taea te utaina te ahua, te panui ranei e te kaipanui mata.
8. A ape i te tirohanga kaha o nga whakaahua: He mea tika kia karohia te whakamahi i nga momo CSS e kaha ana ki te whakatikatika i nga whakaahua, na te mea ka raru pea i runga i nga taputapu rereke me nga mata. He pai ake ki te whakamahi inenga whanaunga me te tuku i nga whakaahua ki te whakatika noa i runga i te rahi o te mata.
9. Whakaarohia te waahi kino: Ko te waahi kino, e mohiotia ana ko te mokowhiti ma, he mea nui hei whakarite i te tika o nga whakaahua. He mea tika kia waiho he tawhē tika huri noa i nga whakaahua kia kore ai e kotia, e kore e tika ana ina tirohia ki runga i nga taputapu rereke, i nga mata rereke ranei.
10. Aroturuki me te whakatika i nga wa katoa: Ko te whakatakotoranga me te whakatikatika o nga whakaahua ki nga taputapu rereke me nga mata he mahi tonu. He mea nui ki te aro turuki me te whakatika i te whakatakotoranga o o whakaahua kia tika te ahua ki runga i nga taputapu katoa, me te whakarereke i nga wa e tika ana.
Ma enei rautaki, ka taea te whakatutuki i te tika o nga whakaahua i runga i nga taputapu rereke me nga mata. Ma te whai i enei mahi ka whakarite he wheako kaiwhakamahi tino pai ahakoa he aha te taputapu e whakamahia ana e to manuhiri paetukutuku.
11. Utauta whaihua me nga Rauemi mo te Whakarite Atahanga ki te HTML
I roto i te HTML, he uaua te whakahāngai i nga whakaahua, engari he maha nga taputapu whaihua me nga rauemi ka ngawari ake te mahi. Kei raro nei etahi tikanga me nga tikanga hei awhina i a koe ki te whakatika i nga whakaahua ki te HTML whai hua:
1. Ma te whakamahi i te taonga CSS "tuuturu-tuuturu": Ka taea e koe te whakahāngai i nga whakaahua ki te raina ki te tuhinga ma te whakamahi i te taonga CSS "tuuturu-tuuturu". Hei mahi i tenei, takai te atahanga ki tetahi huānga paraka, penei i te div, katahi ka hoatu te taonga "whakaaro-kupu" ki te ipu. Hei tauira, ki te hiahia koe ki te whakahāngai i tetahi atahanga ki te taha maui, ka taea e koe te whakamahi i te waehere e whai ake nei:
"`html
""
2. Whakamahia te taonga CSS "maama": Ko tetahi atu whiringa ko te whakamahi i te taonga CSS "float" ki te whakatika i nga whakaahua i roto i te HTML. Ka taea e koe te rewa tetahi ahua ki te taha maui, matau ranei ma te whakamahi i nga uara "maui" me te "matau". Hei tauira:
"`html
""
3. Whakaritehia nga whakaahua ki te Flexbox: Mena kei te hiahia koe ki te hangai ngawari me te hihiri, ka taea e koe te whakamahi i te Flexbox. Ko te Flexbox he tauira tahora CSS e taea ai e ia te mana teitei ake mo te whakatikatika me te whakatakotoranga o nga huānga. Ka taea e koe te whakatika i te tirohanga ma te whakapae me te poutū ma te whakamahi i nga taonga pouaka flexbox CSS. Anei tetahi tauira taketake mo te whakamahi i te Flexbox ki te whakatiaro whakapae i tetahi ahua:
"`html
""
12. He tauira whaitake o te whakatetahi atahanga ki te HTML
I roto i tenei tuhinga, ka hoatu e matou ki a koe nga tauira 12 mo te whakauru i nga whakaahua ki te HTML. Ko te mohio ki te whakakotahi i nga whakaahua ka whai hua ina tae mai ki te hoahoa i nga wharangi paetukutuku, i nga rangitaki ranei, na te mea ka pai ake te ahua o te tirohanga me te panui o nga ihirangi. I muri mai, ka whakaatu atu matou ki a koe i nga tikanga rereke hei whakatutuki i tenei paanga.
1. Whakawaea tetahi ahua me nga huanga HTML: Ko te tikanga matua ki te whakakotahi i te ahua ko te whakamahi i nga huanga HTML "whakaaro" me te "ahua". Hei tauira, ka taea e koe te taapiri i te rarangi waehere e whai ake nei ki te huānga img i roto i to waehere HTML: align="center". Ma tenei ka whakakotahi te atahanga ki runga i te wharangi.
2. Whakawaea tetahi ahua ki te CSS: Ko tetahi atu huarahi ki te whakauru i tetahi ahua ko te whakamahi CSS. Ka taea e koe te hanga i tetahi karaehe CSS motuhake mo nga whakaahua e hiahia ana koe ki te pokapū katahi ka tono ki te huānga img i roto i te waehere HTML. Hei tauira, ka taea e koe te whakamahi i te waehere CSS e whai ake nei:
""
""
Na, i roto i to waehere HTML, taapirihia te akomanga "pokapū-ahua" ki te huānga img:
""
""
3. Whakawaea he atahanga ma te whakamahi i te flexbox: Ko te Flexbox he tikanga matatau mo te hoahoa i nga wharangi paetukutuku e taea ai te whakahaere nui ake mo te tuunga me te whakatakotoranga o nga huānga. Hei whakakotahi i tetahi atahanga ma te whakamahi i te flexbox, me takai koe ki roto i te ipu katahi ka hoatu etahi ahuatanga CSS ki te ipu. Hei tauira, ka taea e koe te taapiri i te waehere CSS e whai ake nei:
""
""
Na, i roto i to waehere HTML, takai to ahua ki roto i te ipu:
""
""
He tauira noa enei mo te whakatakoto i nga whakaahua ki te HTML. Ko te whiriwhiri o te tikanga ka whakawhirinaki ki o hiahia me o hiahia. Whakamātauria, ka whakamātau kia kitea te mea e pai ana ki tō kaupapa. Waimarie ki to hoahoa paetukutuku!
13. Te whakapai ake i te mahi i te wa e whakatetahi ana nga whakaahua ki te HTML
Hei arotau i nga mahi i te wa e whakakotahi ana nga whakaahua ki te HTML, he maha nga tikanga ka taea te whakamahi. Kei raro nei, ka whakaatuhia e matou etahi whiringa hei awhina i a koe ki te whakatutuki i tenei whai hua:
Tuatahi, ko te whakamahi i te tohu ` he huarahi noa ki te whakakotahi i te ahua
Ko tetahi atu ko te whakamahi i nga momo CSS ki te whakauru i te ahua. Ka taea e koe te tono i te taonga `whakaatu: paraka` ki te atahanga katahi ka whakamahi i te taonga `tawh' me nga uara aunoa hei whakakotahi i te taha whakapae me te poutū. Hei tauira:
"`html
""
Ko tetahi atu whiringa ko te whakamahi i te flexbox, he tikanga hoahoa CSS e taea ai e koe te tohatoha ngawari me te whakauru i nga huānga. Hei whakakotahi i tetahi atahanga me te flexbox, ka taea e koe te whakamahi i te waehere e whai ake nei:
"`html
""
He iti noa nga tikanga hei whakakoi i nga whakaahua ki te HTML huarahi whai hua. Kia mahara he mea nui ki te arotau i te mahi o tō paetukutuku, no reira ka tūtohu matou ki te whakamahi i nga tikanga tino tika i runga i o hiahia me o whakaritenga hoahoa.
14. Nga Whakamutunga me nga taunakitanga whakamutunga mo te whakanoho i nga whakaahua ki te HTML
Hei whakauru i nga whakaahua ki te HTML, he maha nga huarahi ka taea e koe te whakamahi. Kei raro nei etahi o nga whakatau whakamutunga me nga taunakitanga hei whakatutuki i tenei whainga.
Tuatahi, ko tetahi waahanga ko te whakamahi i te taonga "whakaaro-tuhi" i roto i te CSS. Ka taea e koe te hoatu i tenei taonga ki te huānga ipu o te ahua, me te whakarite i tona uara ki te "pokapū." Ma tenei ka tuu te ahua ki te pokapu whakapae i roto i tana ipu.
Ko tetahi atu whiringa ko te whakamahi i te tohu "div". ki te waihanga he ipu mo te ahua me te whakamahi i nga momo CSS motuhake. Hei whakakotahi i te ahua whakapae, ka taea e koe te tautuhi i te taha maui me te taha matau o te ipu ki te "aunoa", me te whakarite kia kaua te whanui o te ahua e neke ake i te whanui o te ipu. I tua atu, ki te whakatetahi poutū, ka taea e koe te whakamahi i te taonga "whakaatu" me te uara "flex" me te taonga "tiaro-tuemi" me te uara "pokapū".
Ka mutu, ki te hiahia koe ki te whakakotahi i tetahi ahua papamuri ki tetahi huānga HTML, ka taea e koe te whakamahi i te taonga papamuri-turanga i roto i te CSS. Ka taea e koe te whakarite i nga uara "pokapū" ki te whakakotahi i te ahua ki te whakapae me te poutū. Ano, ki te hiahia koe ki te whakahoki ano i te ahua ki te papamuri, ka taea e koe te whakamahi i te taonga "background-repeat" me te uara "no-repeat."
I roto i te poto, ki te pokapū whakapakoko i roto i te HTML, ka taea e koe te whakamahi i te taonga-whakaaro kuputuhi i roto i te CSS, te hanga ipu me nga momo CSS motuhake, te whakamahi ranei i te waahi-papamuri mo nga whakaahua papamuri. Ko enei whiringa ka taea e koe te whakatutuki i te paanga e hiahiatia ana me te whakapai ake i te ahua o o huānga tirohanga ki to paetukutuku.
Hei mutunga, he mahi ngawari noa te whakakotahi i nga whakaahua ki HTML ka taea te whakatutuki ma te whakamahi i nga ahuatanga me nga huanga e tika ana. I roto i tenei tuhinga, kua tirotirohia e matou nga tikanga rereke mo te whakauru i nga whakaahua i roto i te HTML, mai i te whakamahi i te huanga tiro ki te whakamahi i nga momo CSS.
He mea nui kia mahara ka taea e ia tikanga te whai ngā painga me ngā ngoikoretanga i runga i te ahuatanga me nga hiahia motuhake o ia kaupapa. I tua atu, me whai whakaaro te hototahi ki nga kaitirotiro rereke me nga putanga HTML.
I te wa e arotahi ana nga whakaahua, he mea nui kia mohio pai ki nga tohu HTML me nga huanga, tae atu ki nga kaupapa o te hoahoa me te whakatakotoranga. Waihoki, he mea nui kia whai tikanga pai te whakawhanaketanga tukutuku ki te whakarite i te pai o te waahi me te mahi.
Kia maumahara ko te whakateanga o nga whakaahua he waahanga iti noa iho o nga pukenga me nga tikanga e hiahiatia ana hei hanga me te hoahoa ngā paetukutuku ngaio. Ma te haere tonu ki te ako me te whakamatautau ki te HTML me te CSS ka taea e koe te mohio ki enei taputapu me te whakawhānui ake i to mohiotanga ki te waahi whanaketanga paetukutuku.
Ko te tumanako i awhina tenei tuhinga ki te mohio me pehea te whakauru i nga whakaahua ki roto i te HTML, a kua homai he turanga pakari ki a koe ki te tirotiro i tenei kaupapa. He mea whakaihiihi tonu te kite me pehea te whakakotahitanga o nga huānga tirohanga ki roto i te paetukutuku, a ko te whakatetahi whakaahua he tino pukenga nui hei whakatutuki. Waimarie ki o kaupapa HTML a meake nei me te ako tonu!
Ko Sebastián Vidal ahau, he miihini rorohiko e ngakau nui ana ki te hangarau me te DIY. I tua atu, ko ahau te kaihanga o tecnobits.com, kei reira ahau e tohatoha ai i nga akoranga kia pai ake ai te uru me te maarama ki te katoa.