Misingi ya HTML ina kanuni za msingi za lugha ya HTML, maelezo ya muundo wa ukurasa wa HTML, na uhusiano katika muundo wa hati ya HTML kati ya vipengele vya HTML.
Hati ya HTML ni hati ya maandishi ya kawaida ambayo inaweza kuundwa ama katika kihariri cha maandishi cha kawaida (Notepad) au katika maalum iliyo na mwangaza wa msimbo (Notepad++, Visual Studio Code, n.k.). Hati ya HTML ina kiendelezi cha .html.
Hati ya HTML ina mti wa vipengele vya HTML na maandishi. Kila kipengele kinatambuliwa katika hati chanzo kwa kuanza (kufungua) na tagi ya kumalizia (ya kufunga) (isipokuwa nadra).
Lebo ya kuanza inaonyesha mahali kipengele kinapoanzia, lebo ya mwisho inaonyesha inaishia wapi. Lebo ya kufunga inaundwa kwa kuongeza kufyeka / kabla ya jina la lebo: .... Kati ya vitambulisho vya kuanza na vya kufunga ni yaliyomo kwenye lebo - yaliyomo.
Lebo moja haziwezi kuhifadhi maudhui moja kwa moja; imeandikwa kama thamani ya sifa, kwa mfano, lebo itaunda kitufe chenye Kitufe cha maandishi ndani.
Vitambulisho vinaweza kuwekwa ndani ya kila mmoja, kwa mfano,
Maandishi
. Wakati wa kuwekeza, unapaswa kufuata utaratibu ambao wamefungwa (kanuni ya "matryoshka"), kwa mfano, kiingilio kifuatacho kitakuwa sahihi:Maandishi
.Vipengele vya HTML vinaweza kuwa na sifa (kitandawazi, kutumika kwa vipengele vyote vya HTML, na vyao wenyewe). Sifa zimeandikwa katika tepe ya ufunguzi wa kipengele na zina jina na thamani, iliyobainishwa katika umbizo la sifa name="value" . Sifa hukuruhusu kubadilisha mali na tabia ya kitu ambacho kimewekwa.
Kila kipengele kinaweza kupewa maadili ya darasa nyingi na thamani moja tu ya kitambulisho. Thamani za darasa nyingi zimeandikwa zikitenganishwa na nafasi, . Daraja na thamani za kitambulisho lazima ziwe na herufi, nambari, vistari, na mistari chini pekee, na lazima zianze kwa herufi au nambari pekee.
Kivinjari hutazama (hufasiri) hati ya HTML, kujenga muundo wake (DOM) na kuionyesha kwa mujibu wa maagizo yaliyojumuishwa kwenye faili hii (karatasi za mtindo, hati). Ikiwa markup ni sahihi, dirisha la kivinjari litaonyesha ukurasa wa HTML ulio na vipengele vya HTML - vichwa, meza, picha, nk.
Mchakato wa kutafsiri (kuchanganua) huanza kabla ya ukurasa wa wavuti kupakiwa kikamilifu kwenye kivinjari. Vivinjari huchakata hati za HTML kwa kufuatana, tangu mwanzo, huku vikichakata CSS na kuhusisha laha za mtindo na vipengele vya ukurasa.
Hati ya HTML ina sehemu mbili - kichwa - kati ya lebo ... na sehemu ya yaliyomo - kati ya lebo ....
Muundo wa ukurasa wa wavuti 1. Muundo wa hati ya HTMLHTML hufuata sheria zilizo katika faili ya tamko la aina ya hati (Ufafanuzi wa Aina ya Hati, au DTD). DTD ni hati ya XML inayofafanua ni vitambulisho gani, sifa, na thamani zao ni halali kwa aina fulani ya HTML. Kila toleo la HTML lina DTD yake.
DOCTYPE inawajibika kwa onyesho sahihi la ukurasa wa wavuti na kivinjari. DOCTYPE haibainishi tu toleo la HTML (km html) lakini pia faili inayolingana ya DTD kwenye Mtandao.
...
Vipengele vilivyo ndani ya lebo huunda mti wa hati, kinachojulikana mfano wa kitu cha hati, DOM (mfano wa kitu cha hati). Katika kesi hii, kipengele ni kipengele cha mizizi.
Mchele. 1. Muundo rahisi zaidi wa ukurasa wa wavuti Ili kuelewa mwingiliano wa vipengele vya ukurasa wa wavuti, ni muhimu kuzingatia kile kinachoitwa "mahusiano ya familia" kati ya vipengele. Uhusiano kati ya vipengee vingi vilivyoorodheshwa huainishwa kama mzazi, mtoto na dada.
Babu ni kipengele ambacho kina vipengele vingine. Katika Mchoro 1, babu kwa vipengele vyote ni. Wakati huo huo, kitu hicho ni babu wa vitambulisho vyote vilivyomo: ,
, , na kadhalika.
Kizazi ni kipengele kilicho ndani ya aina moja au zaidi ya kipengele. Kwa mfano, ni kizazi cha , na kipengele
Ni mzao wa wote wawili na.
Kipengele cha mzazi ni kipengele kinachohusiana na vipengele vingine kwenye ngazi ya chini na iko juu yao kwenye mti. Katika Mchoro 1 na. Lebo
Ni mzazi tu.
Kipengele cha mtoto ni kipengele ambacho kiko chini ya kipengele kingine kwa kiwango cha juu. Katika Kielelezo 1 kuna vipengele tu,
Na ni watoto wa.
Kipengele dada ni kipengele ambacho kina kipengele cha mzazi wa kawaida na kile kinachohusika, kinachojulikana vipengele vya kiwango sawa. Katika Mchoro 1 na ni vipengele vya kiwango sawa, pamoja na vipengele , na
Wao ni dada kwa kila mmoja.
1.1. Kipengele 1.2. KipengeleSehemu ... ina maelezo ya kiufundi kuhusu ukurasa: kichwa, maelezo, maneno muhimu kwa injini za utafutaji, encoding, nk. Habari unayoingiza hapo haionyeshwa kwenye dirisha la kivinjari, lakini ina habari inayoambia kivinjari jinsi ya kuchakata ukurasa.
1.2.1. KipengeleLebo ya sehemu inayohitajika ni . Maandishi yaliyowekwa ndani ya lebo hii yanaonekana kwenye upau wa kichwa wa kivinjari cha wavuti. Kichwa hakipaswi kuwa na urefu wa zaidi ya herufi 60 ili kutoshea kabisa kwenye mada. Maandishi ya kichwa yanapaswa kuwa na maelezo kamili zaidi ya yaliyomo kwenye ukurasa wa wavuti.
1.2.2. KipengeleLebo ya sehemu ya hiari ni lebo moja. Kwa msaada wake, unaweza kuweka maelezo ya maudhui ya ukurasa na maneno muhimu kwa injini za utafutaji, mwandishi wa hati ya HTML, na sifa nyingine za metadata. Kipengele kinaweza kuwa na vipengele vingi kwa sababu vinabeba taarifa tofauti kulingana na sifa zinazotumiwa.
Maelezo ya yaliyomo kwenye ukurasa na maneno muhimu yanaweza kubainishwa wakati huo huo katika lugha kadhaa, kwa mfano, kwa Kirusi na Kiingereza:
Kwa kutumia lebo, unaweza kuzuia au kuruhusu kuorodheshwa kwa ukurasa wa wavuti na injini za utafutaji:
Ili kupakia upya ukurasa kiotomatiki baada ya muda maalum, unahitaji kutumia thamani ya kuonyesha upya:
Ukurasa utapakiwa upya baada ya sekunde 30. Ili kuelekeza mgeni kwenye ukurasa mwingine, unahitaji kubainisha URL katika kigezo cha url:
| charset | Inabainisha usimbaji wa herufi kwa hati ya sasa ya HTML: |
| maudhui | Ina maandishi ya kiholela ambayo yanabainisha thamani inayohusishwa na http-equiv au sifa ya jina, kulingana na thamani yake. |
| http-sawa | Hudhibiti vitendo vya kivinjari kwenye ukurasa fulani wa wavuti (sawa na vichwa vya HTTP). Wakati wa kutoa ukurasa, kivinjari kitafuata maagizo yaliyoainishwa katika sifa: mtindo-msingi unabainisha mtindo unaopendelewa wa kutumia kwenye ukurasa. Sifa ya maudhui lazima iwe na kitambulisho cha kipengele kinachorejelea laha ya mtindo wa CSS, au kitambulisho cha kipengele kilicho na laha ya mtindo. kuonyesha upya huonyesha muda katika sekunde kabla ya ukurasa kupakiwa upya au muda kabla ya kuelekeza upya kwa ukurasa mwingine ikiwa sifa ya maudhui ina mstari "url=page_address" baada ya muda. Pakia upya ukurasa kiotomatiki baada ya muda maalum, katika mfano huu, baada ya sekunde 30: Ikiwa unahitaji kuhamisha mgeni mara moja kwa ukurasa mwingine, unaweza kubainisha URL katika kigezo cha url: |
| jina | Inahusishwa na thamani iliyo katika sifa ya maudhui. Haifai kutumika ikiwa kipengele tayari kina http-equiv , charset , au itemprop seti ya sifa. application-name hubainisha jina la programu ya wavuti inayotumika kwenye ukurasa. mwandishi anabainisha jina la mwandishi wa hati katika umbizo la bure. maelezo hufafanua maelezo mafupi ya yaliyomo kwenye ukurasa, kwa mfano: jenereta hubainisha moja ya vifurushi vya programu vinavyotumiwa kuunda hati, kwa mfano: . maneno muhimu yana orodha iliyotenganishwa kwa koma ya maneno muhimu ambayo yanalingana na yaliyomo kwenye ukurasa, kwa mfano: . Pia, sifa ya jina inaweza kuchukua maadili yafuatayo kutoka kwa vipimo vilivyopanuliwa, kama vile muundaji, googlebot, mchapishaji, roboti, slurp, kituo cha kutazama, ingawa hakuna hata moja kati ya hizi ambayo imepitishwa rasmi. |
Ndani ya kipengele hiki, mitindo ambayo hutumiwa kwenye ukurasa imewekwa. CSS hutumiwa kuweka mitindo katika hati ya HTML. Kunaweza kuwa na vipengele kadhaa kwenye ukurasa.
Ndani ya kipengele hiki unaweza kuandika msimbo wa uumbizaji wa vipengele vya ukurasa wa wavuti wenyewe na ukurasa mzima wa wavuti.
.karatasi ( upana: 200px; urefu: 300px; rangi ya mandharinyuma: #ef4444; rangi: #666666; )
Ili kuunganisha mtindo uliopeanwa kwa kitu, unahitaji kupeana jina linalofaa kwa kitu hicho kwa kutumia sifa ya darasa (au kitambulisho):
...
Nambari ya CSS inaweza kupachikwa moja kwa moja kwenye kipengele cha markup kama thamani ya sifa ya mtindo, kwa mfano:
1.2.4. Kipengele
Unaweza pia kuweka mitindo ya hati kwa kutumia njia nyingine - iandike katika faili tofauti na kiendelezi cha .css, kwa mfano, style.css.
Kuna njia mbili za kuunganisha faili na mitindo kwenye ukurasa wa wavuti:
kupitia maagizo ya url ya @import
@ import url(style.css);
kwa kutumia kipengele. Kipengele hakihitaji lebo ya kufunga. Kipengele hiki kinafafanua uhusiano kati ya ukurasa wa sasa na hati zingine. Kunaweza kuwa na vipengele kadhaa kwenye ukurasa. Ingizo litaonekana kama hii:
| asili | Inaonyesha kama CORS (teknolojia ya kivinjari inayoruhusu ukurasa wa wavuti kufikia rasilimali kutoka kwa kikoa kingine) inapaswa kutumika wakati wa kurejesha picha kutoka kwa tovuti. bila kujulikana - kivinjari huongeza kiatomati kichwa cha Asili kwa ombi la kikoa tofauti, kilicho na jina la kikoa ambacho ombi lilifanywa. Ikiwa seva haitajibu kwa kichwa cha CORS Access-Control-Allow-Origin: * (au jina la kikoa badala ya nyota), basi upakiaji wa picha utazuiwa. tumia-vyeti - Ikiwa seva haitoi vitambulisho kwa kutumia Access-Control-Allow-Credentials: true , basi upakiaji wa picha utazuiwa. |
| href | Sifa kuu ya lebo, thamani ni njia ya faili na mitindo. |
| hreflang | Hubainisha lugha ya maandishi katika hati iliyorejelewa. |
| vyombo vya habari | Hubainisha aina ya kifaa ambacho rasilimali ya kiungo inapaswa kutumika. |
| mara moja | Utofauti wa mfuatano uliozalishwa kwa nasibu kwenye seva ambao huweka sheria za kutumia mitindo ya ndani kulinda maudhui. Thamani ya sifa ni mfuatano wa maandishi. |
| rel | Sifa hufafanua uhusiano kati ya hati ya sasa na hati inayorejelewa. mbadala - kiunga cha hati sawa, lakini katika muundo tofauti (kwa mfano, kurasa za uchapishaji, tafsiri, kioo, malisho katika muundo wa RSS au Atom), . kumbukumbu - inaonyesha kwamba hati iliyounganishwa ni ya maslahi ya kihistoria. Kiungo kinaweza kuelekeza kwenye mkusanyiko wa rekodi, hati, au nyenzo zingine. kiungo cha mwandishi kwa ukurasa kuhusu mwandishi wa hati au kwa ukurasa ulio na maelezo ya mawasiliano ya mwandishi. alamisha marejeleo ya babu wa karibu zaidi wa makala ambaye ni kiungo, au kwa sehemu ya makala inayohusiana sana na kipengele ikiwa hakuna babu. external inatumika kuonyesha kuwa ukurasa unaounganishwa sio sehemu ya tovuti hii. kwanza hubainisha kiungo kinachoelekeza kwenye hati ya kwanza katika mlolongo wa hati. kiungo cha usaidizi kwa hati ya usaidizi. ikoni inabainisha njia ya ikoni ambayo itatumika kwa hati ya sasa. mwisho hubainisha kiungo kinachoelekeza kwenye hati ya mwisho katika mlolongo wa hati. leseni Kiungo cha habari ya hakimiliki kwa hati. inayofuata inaonyesha kwamba hati hii ni sehemu ya mfululizo na kwamba kiungo huenda kwenye hati inayofuata katika mfululizo huo. nofollow inaonyesha kuwa kiungo hakijaidhinishwa na mwandishi wa ukurasa au kwamba kiungo ni cha kibiashara. noreferrer inaonyesha kuwa kichwa cha ombi la mteja kilicho na url ya chanzo cha ombi hakipaswi kupitishwa wakati wa kufuata kiungo. pingback inabainisha anwani ya seva ya pingback, ambayo inaruhusu blogu kuarifu kiotomatiki tovuti zinazounganishwa nayo. uletaji awali unabainisha kuwa faili iliyorejelewa inapaswa kuhifadhiwa mapema. prev inaonyesha kwamba hati hii ni sehemu ya mfululizo na kwamba kiungo ni hati ya awali katika mfululizo huo. utafutaji unaonyesha kuwa hati iliyorejelewa ina kiolesura cha utafutaji na rasilimali zinazohusiana. upau wa pembeni unaonyesha kuwa hati iliyounganishwa itaonyeshwa katika muktadha wa ziada wa kivinjari, ikiwezekana, na vivinjari vingine, unapobofya kiungo, fungua dirisha ili kuongeza kiungo kwenye upau wa alamisho. laha ya mtindo ni kiungo cha faili ya nje ambayo itatumika kama laha ya mtindo kwa hati hii. tag inaonyesha kuwa lebo iliyounganishwa inatumika kwa hati hii. up inaonyesha kuwa ukurasa ni sehemu ya muundo wa daraja, na kwamba kiungo kinaelekeza kwenye kiwango cha juu cha rasilimali katika muundo. |
| ukubwa | Hubainisha saizi ya aikoni kwa onyesho la kuona. Sifa ya saizi inatumika tu kwa kushirikiana na rel="icon" na inaweza kuchukua maadili yafuatayo: upana-urefu - inafafanua orodha ya ukubwa uliotenganishwa na nafasi, kila saizi lazima iwe katika umbizo - upana-urefu (vipimo vya ikoni vimebainishwa kwa saizi), kwa mfano: ; yoyote - ikoni inaweza kuongezwa kwa saizi yoyote. |
| kichwa | Inafafanua kichwa cha kiungo au jina la seti ya laha za mtindo mbadala. Thamani ya sifa ni maandishi. |
| aina | Inabainisha aina ya MIME ya hati inayorejelewa. Katika kesi hii inachukua thamani "text/css" . |
| Async | Sifa inaonyesha kuwa hati itaendeshwa kwa usawa na ukurasa wote (hati itaanza kutekeleza wakati huo huo ukurasa unapakia). |
| charset | Inafafanua usimbaji wa herufi |
| asili | Huamua ikiwa CORS itatumika wakati wa kupakia hati za nje (kwa kutumia sifa ya src). bila kujulikana - kabla ya kupakia hati kwenye ombi la kikoa tofauti, kivinjari huongeza otomatiki kichwa cha Asili, bila kupitisha vigezo vya ufikiaji (kidakuzi, cheti cha X.509, kuingia/nenosiri kwa uthibitishaji wa kimsingi kupitia HTTP). Ikiwa jibu la seva halina Ufikiaji-Udhibiti-Ruhusu-Asili: kichwa cha jina la kikoa, hati haitapakiwa. vitambulisho - kabla ya kupakia hati katika ombi la kikoa tofauti, kivinjari huongeza kiotomatiki kichwa cha Asili kinachoonyesha vigezo vya ufikiaji (kidakuzi, cheti cha SSL au jozi za kuingia/nenosiri). Ikiwa jibu la seva halina Kitambulisho cha Ufikiaji-Udhibiti-Ruhusu: kichwa cha kweli, hati haitapakiwa. |
| kuahirisha | Ufafanuzi wa hati umechelewa hadi hati itolewe kwenye kifaa cha mtumiaji. |
| mara moja | Hutoa usalama kwa kulinda dhidi ya mashambulizi ya uandishi wa tovuti mbalimbali (XSS). Inaweka sheria za kutumia maandishi yaliyojengwa ndani kwa kutumia maadili yasiyo ya kawaida na heshi. Wakati wa uwasilishaji wa ukurasa, kivinjari hukokotoa heshi kwa kila hati iliyo ndani ya mstari na kuzilinganisha na zile zilizoorodheshwa katika CSP. Vipakuliwa kutoka kwa rasilimali zisizojumuishwa kwenye "orodha nyeupe" vimezuiwa. |
| src | Inaonyesha eneo la faili iliyo na hati; thamani ya sifa ni url ya faili iliyo na programu ya JavaScript. |
| aina | Hutumika kutangaza lugha ya hati iliyotumika kutunga maudhui ya lebo. |
Sehemu hii ina yaliyomo yote ya hati. Inapatikana kwa kipengele.
| alama za nyuma | Tukio ambalo linawaka baada ya ukurasa kutumwa kwa uchapishaji au baada ya dirisha la uchapishaji kufungwa. |
| onbeprint | Tukio ambalo linawaka kabla ya ukurasa kutumwa kwa uchapishaji. |
| pakua kabla | Tukio hilo huanzishwa wakati mgeni anapoanzisha mpito kwa ukurasa mwingine au kubofya "funga dirisha". Inakuruhusu kuonyesha ujumbe katika kidirisha cha uthibitishaji ili kumjulisha mtumiaji kama anataka kubaki au kuondoka kwenye ukurasa wa sasa. |
| onhashchange | Tukio hili hutupwa wakati sehemu ya heshi ya URL inabadilika, kwa mfano mtumiaji anapotoka example.domain/test.aspx#page1 hadi example.domain/test.aspx#page2 . |
| ujumbe kwenye | Tukio hutokea wakati ujumbe unapopokelewa kupitia chanzo cha tukio. |
| nje ya mtandao | Tukio hilo linasababishwa na kivinjari wakati kivinjari kinaamua kuwa muunganisho wa Intaneti umepotea. |
| mtandaoni | Tukio hilo linaanzishwa na kivinjari wakati muunganisho wa Mtandao umerejeshwa. |
| onpagefide | Tukio hilo hutokea wakati mtumiaji anaondoka kwenye ukurasa kupitia urambazaji, kama vile kubofya kiungo, kuonyesha upya ukurasa, kujaza fomu, nk. |
| onyesho la ukurasa | Tukio hutokea mtumiaji anapoelekea kwenye ukurasa wa wavuti, baada ya tukio la upakiaji. |
| kupakua | Tukio hilo linasababishwa ikiwa ukurasa haupakia kwa sababu fulani, au wakati dirisha la kivinjari limefungwa. |
HTML ni lugha ya alama ya tovuti. Watu wengi wanaifikiria kama programu, lakini sivyo. HTML haina vigeu, hesabu, safu, na vipengele vingine vinavyopatikana katika lugha yoyote ya programu.
Kwa kutumia HTML, msanidi programu anaweza tu kuunda mwonekano wa tovuti. Ni muhimu kuelewa kwamba hakuna tovuti iliyopo bila markup. HTML ndio msingi wa kuunda kurasa za wavuti. Utendaji mwingine wote huongezwa na lugha anuwai za programu.
Kuunda Hati ya HTMLUnaweza kuunda ukurasa rahisi wa tovuti katika kihariri chochote. Hata Notepad itafanya. Kwa msanidi wa novice, inashauriwa kutumia wahariri wengine ambao wana vitendaji vya kubadilisha kiotomatiki na vidokezo vingine. Shukrani kwa hili, unaweza kuunda meza zilizopangwa tayari, viungo, picha na vipengele vingine. Lakini katika Notepad, lazima uandike kila herufi kwa mikono.
Kama sheria, Notepad hutumiwa tu katika hali ambapo hakuna zana zingine karibu. Kwanza, hati ya maandishi huundwa na kisha kuhifadhiwa katika umbizo la html. Kurasa zote za tovuti lazima ziwe na kiendelezi cha html.
Lugha ya HTML ni ya daraja. Hiyo ni, kuna muundo maalum wa hati ya HTML. Ni nini? Hebu itazame hapa chini kwa uwazi.
Muundo wa hati ya HTML. MfanoMuundo daima ni sawa. Ikiwa unataka kubadilisha kitu, kivinjari hakitaweza kukichakata. Matokeo yake, huwezi kupata ulichokusudia.
Kielelezo hapo juu kinaonyesha muundo wa faili yoyote ya html. Kipengee cha kwanza kinaonyesha aina ya faili. Lebo hii imebainishwa mara moja. Ikiwa unatumia wahariri maalum, muundo wote utaundwa moja kwa moja. Utahitaji kurekebisha maadili chaguo-msingi.
Muundo wa hati ya HTML - vitambulisho kuu:
Mfumo wa tovuti nzima una lebo hizi tatu. Makini na picha. Lebo hizi zote zina lebo ya kufunga yenye ishara "/". Ukiandika kwa mkono, zoea kuweka vitambulisho vyote viwili mara moja - kufungua na kufunga.
Ilisemekana hapo juu kuwa kurasa za tovuti zina kiendelezi cha .html. Hiyo ni, ikiwa utaunda hati ya maandishi, lakini andika msimbo sahihi, kivinjari bado kitakuonyesha maandishi tu. Hakutakuwa na ubadilishaji wa msimbo.
sehemu ya kichwaKielelezo chini ya hatua ya 3 kinaonyesha sehemu ya kichwa. Sehemu hii ina maelezo ya huduma. Kwa mfano, unaweza kutaja usimbaji (kipengee 4) na kichwa cha ukurasa (kipengee 5).
Daima kuwe na kichwa. Bila hivyo, hakuna injini ya utafutaji itaweza kuamua jina la maudhui (maandishi) kwenye ukurasa wa wavuti. Na hii ni mbaya kwa kukuza tovuti. Zaidi ya hayo, kivinjari hakitaonyesha kichwa cha ukurasa juu. Huu ni usumbufu kwa mtumiaji.
Muundo wa hati ya html ni kwamba imeonyeshwa tu katika sehemu ya kichwa. Ikiwa lebo imeainishwa katika sehemu ya mwili au baada yake, kidhibiti hakitazingatia.
Kwa kuongeza, sehemu ya kichwa ina maelezo ya kuunganisha maandiko, faili za mtindo, maelekezo ya injini za utafutaji, au data nyingine yoyote ambayo mtumiaji haipaswi kuona, lakini ni muhimu kwa kivinjari au programu.
Mitindo ya kuunganishaMuundo wa hati ya HTML inakuwezesha kuunganisha mitindo kwa njia mbalimbali. Kwa kuongezea, zinaweza kuandikwa kibinafsi katika kila kipengele. Lakini njia hii haipendekezi kwa sababu kanuni inakuwa kubwa sana na haifai.
Faili imeunganishwa kama ifuatavyo.
Sifa ya href inabainisha njia ya faili. Ikiwa kuna hitilafu kwenye njia, mitindo haitapakia. Sifa ya aina pia inahitajika, ambayo inaonyesha kuwa hii ni faili ya css.
Chaguo jingine ni kufafanua mitindo moja kwa moja kwenye sehemu ya kichwa.
Lakini chaguo hili pia haifai sana. Njia hizi ni tofauti sana kwa kuwa faili ya css inaweza kuwa moja kwa tovuti nzima, na mabadiliko yote kwake yatatumika mara moja kwa kurasa zote. Na ikiwa unatumia njia iliyoonyeshwa kwenye takwimu hapo juu, basi itabidi ufanye mabadiliko kwenye kurasa zote zilizopo za tovuti.
Ikiwa darasa unalounda litatumika tu kwenye ukurasa mmoja, basi chaguo hili linafaa kwako.
Kuunganisha hatiMaandishi yameunganishwa kama ifuatavyo.
Sifa mbili zinahitajika hapa: aina na src. Katika kwanza tunaonyesha kuwa hii ni faili ya Javascript, na ya pili - ambapo faili iko. Ukichapa, hakuna kitakachofanya kazi.
sehemu ya mwiliMuundo wa hati ya html ni kwamba unahitaji kuweka maudhui ambayo yataonekana kwa mtumiaji katika sehemu ya mwili pekee. Jina la lebo linajieleza lenyewe.
Nambari kuu kuu ya ukurasa imeonyeshwa hapa, ambayo inaweza kujumuisha idadi isiyo na kikomo ya vitu. Lakini kadiri msimbo ulivyo mrefu, ndivyo itakavyochukua muda mrefu kuchakatwa.
Hebu tuangalie vitambulisho vya msingi zaidi vinavyoweza kutumika katika eneo la mwili. Hakuna nyingi kuu. Mengine yote utajifunza kadri maarifa na mazoezi yako yanavyokua.
Lebo kuuMuundo wa hati ya HTML unahitaji utaratibu wa lazima wa vipengele vya kuandika. Lebo zinapaswa kuzungukwa na mabano kwenye kingo. Bila hii, kivinjari hakitaelewa kuwa hii ni tag. Bracket ya ufunguzi daima inafuatiwa na jina la kipengele (tag). Ukiruhusu nafasi kati< и именем, то браузер посчитает это текстом.
Hebu tuangalie mfano wa lebo ya picha. Tafadhali kumbuka kuwa lebo hii sio lebo ya kufunga, tofauti na viungo, aya na zingine nyingi.
Mpangilio wa sifa haijalishi. Lakini uandishi (design) wao ni muhimu sana. Jina la sifa daima huja kwanza, kisha ishara ya usawa, kisha thamani ya sifa imeandikwa katika quotes. Thamani inaweza kuwa tofauti - dijiti au maandishi.
Sifa ya src katika vitambulisho vyote inaonyesha njia ya faili ambayo inahitaji kupakiwa. Sifa mbadala kwenye vipengele vyote hubainisha maelezo mafupi. Katika kesi hii, picha bird.jpg imejaa maelezo - picha ya ndege.
Kwa kuongeza, unaweza kubainisha vipimo, upana au urefu pekee, kichwa, mpangilio, darasa la mtindo au mpaka.
Wacha tuangalie vitambulisho vingine kuu ambavyo vimeainishwa katika sehemu ya mwili.
Kusudi |
|
Picha |
|
Funga maandishi kwa mstari mpya |
|
… | Kijipicha |
Maandishi yaliyovuka |
|
Maandishi yaliyopigiwa mstari |
|
Watengenezaji wa novice hawawezi kufikiria mara moja haya yote kwa kubahatisha. Angalia mifano michache ya muundo wa ukurasa wa wavuti, na kisha hakika utaelewa.
Utagundua ni muundo gani wa chini wa hati ya HTML unapaswa kuwa. Tutachambua kila moja ya vipengele vyake muhimu kwa undani na kwa mifano. Pia tutazungumza juu ya jinsi ya kuunda vizuri faili na kurasa za tovuti.
Muundo wa Hati ya HTMLWacha tuangalie muundo wa hati ya html ili kuelewa jinsi kila kitu kinavyofanya kazi. Utagundua ni sura gani lazima iwepo kwenye ukurasa ili ichukuliwe kuwa halali ( sahihi).
Ili kuunda ukurasa wowote wa wavuti, lazima iwe na seti ya chini ya lebo. Ziko katika mfano hapa chini.
Jinsi ya kuunda tovuti kwenye mtandao
Kivinjari chenyewe hutafsiri vitambulisho hivi vyote na kuzionyesha kwa namna moja ya habari kwa mtumiaji. Wewe mwenyewe umeona kwamba unapoenda kwenye tovuti, vipengele hivi havionyeshwa kwenye skrini. Unaona tu karatasi nzuri ambayo kivinjari kinaonyesha.
Mfano unaoonekana wa lebo ya DOCTYPE ya ukurasa wa html Lebo ya DOCTYPE huwa inakuja mwanzoni kabisa mwa ukurasa wa wavuti. Inahitajika kuonyesha aina ya hati ya sasa. Na zaidi ya hii, kivinjari kinaelewa ni toleo gani la html linatumika.
Katika toleo la hivi karibuni la 5 inaonekana kama hii:
Lebo ya HTMLNi chombo ambacho kina maudhui yote ya ukurasa wa wavuti. Vipengele vya kufungua na kufunga katika hati ni chaguo. Hata hivyo, mtindo mzuri unahitaji matumizi yao.
Kwa kawaida, tepe ya html ya ufunguzi huja ya pili baada ya kufafanua hati kwa kutumia doctype . Karibu kila wakati huja mwisho kwenye ukurasa.
Lebo hii huambia kivinjari mahali hati yetu ya html inapoanzia na kuishia. Kwa hivyo, vitu vingine vyote ( isipokuwa doctype) lazima iwekwe ndani ya chombo hiki.
alama ya kichwaLebo ya kichwa imeundwa kuhifadhi vipengele vingine ambavyo kusudi lake ni kusaidia kivinjari wakati wa kufanya kazi na data. Pia ndani ya kontena kuna meta tagi ambazo hutumika kuhifadhi habari. Imeundwa kwa ajili ya vivinjari na injini za utafutaji.
Maudhui ya kichwa hayaonyeshwi moja kwa moja kwenye ukurasa wa wavuti, zaidi ya lebo ya kichwa. Anawajibika kwa kichwa cha ukurasa.
Kwa ujumla, kipengele hiki huhifadhi taarifa zote za kiufundi kuhusu ukurasa. Kwa mfano, aina ya usimbaji wa ukurasa wa html. Itaambia kivinjari jinsi bora ya kusimbua hati. Tunaweza pia kuongeza maandishi mbalimbali hapa.
lebo ya kichwakichwa kina sehemu moja inayohitajika. Hii ndio lebo ya kichwa. Inawajibika kwa jinsi kichwa cha ukurasa wa html kitaonekana. Unachoandika hapa kitaonekana kwenye kichupo cha kivinjari.
Chukua hii kwa uzito!
Kwa kipengele hiki, ninapendekeza kutumia kichwa kisichozidi herufi 60 ikijumuisha nafasi. Hii ni muhimu ili isikatishwe katika matokeo ya utafutaji. Na hakikisha unajumuisha maneno yenye maana hapa. Hiyo ni, tunaandika hasa kile ukurasa utakuwa kuhusu.
Uundaji wa kitaalamu wa tovuti kwenye mtandao na mifano
Bila shaka, unahitaji kuingiza maneno na kufanya jina lako kuvutia zaidi. Vinginevyo, una hatari ya kupoteza trafiki ya utafutaji.
meta tagKipengele kingine ni meta tag. Haijaoanishwa na haina thamani mahususi. Hata hivyo, vipengele muhimu zaidi ni sifa zake.
Kwa hivyo, kwa msaada wa vigezo na sifa, lebo inaweza kuhifadhi habari muhimu kuhusu ukurasa wako.
Acha niongeze kigezo cha charset kwenye kipengee na nionyeshe usimbaji wa hati unaopendelea ndani yake.
Uundaji wa kitaalamu wa tovuti kwenye mtandao na mifano
Kumbuka jinsi parameter imeainishwa. Tunaiingiza ndani ya lebo na kabla ya bracket ya kufunga ya kulia. Ifuatayo, tunaweka ishara sawa na kuonyesha encoding ya hati katika quotes.
Hakikisha kuionyesha kwenye hati zako. Vinginevyo, hieroglyphs mbaya zitaonekana kwenye tovuti yako badala ya maandishi ( krakozyabry).
alama ya mwiliChini kidogo ni lebo ya mwili. Hii ndio sehemu kuu ya hati. Ndani yake kuna maudhui ambayo yanaonekana kwa mtumiaji. Hii inaweza kuwa maandishi, picha, viungo, video, na kadhalika.
Kumbuka kwamba mwili daima huja chini ya lebo ya kichwa. Hiyo ni, kwanza kuna habari ya kiufundi kuhusu ukurasa na kisha tu maudhui kuu kwa mtumiaji. Lakini si kinyume chake!
Lazima kuwe na lebo ya h1 ndani ya mwili. Hiki ndicho kichwa cha nyenzo. Hiyo ni, makala yako itaitwaje. Ninapendekeza usifanye jina zaidi ya herufi 55 ikijumuisha nafasi.
syntax ya htmlInafaa kutaja kidogo juu ya syntax ya html. Mara moja jaribu kupanga vitambulisho kwa njia rahisi kama ilivyo kwenye mfano hapo juu. Bila shaka, unaweza kuwapanga kwa utaratibu wa machafuko.
Uundaji wa kitaalamu wa tovuti kwenye mtandao na mifano
Maudhui ya hati iko hapa na yanaonekana kwa watumiaji wote.
Kivinjari hakitajali.
Itaonyesha ukurasa kwa usahihi hata hivyo. Lakini itakuwa vigumu kwako kuhariri msimbo wa html wa ukurasa. Kwa hivyo, ninapendekeza sio kuchonga na kuifanya kwa uangalifu.
Weka vitambulisho vya kibinafsi kila wakati kwenye mistari tofauti. Na ufuate sheria ya kuota. Weka lebo zote zilizowekwa kwenye kichupo kimoja kutoka kwa kipengele kikuu.
Kichwa cha hati Kichwa cha nyenzo
Maandishi kuu
Hiyo ni, lebo ya kichwa inapaswa kuingizwa kwa tabo moja inayohusiana na lebo ya html. Mwili huenda kwa kiwango cha kichwa kwa vile pia umewekwa kwenye chombo cha html.
Kwa ujumla, kufanya kazi kwa haraka na kwa urahisi na msimbo wa chanzo, hakikisha kudumisha indentation kulingana na kiwango cha nesting ya vipengele.
Isipokuwa ni kichwa na mwili pekee. Zinatumika mara moja tu kwa kila ukurasa. Kwa hiyo, ili usiende mbali sana kwa haki wakati kuna viota vingi, vipengele hivi vinaweza kufanywa bila indents.
Jina la hati
Maandishi kuu
Ikiwa kuna viota vingi, njia hii itasaidia kuokoa nafasi na usipoteze katika muundo wa html.
Kama unavyojua, vitambulisho vinaweza kuwekwa ndani ya kila mmoja. Kwa mfano, maandishi na picha ziko katika vitambulisho tofauti. Walakini, bado wana kipengele cha kawaida cha mzazi.
Ikiwa lebo inafungua, lazima ifungwe. Ikiwa ni tupu na bila sehemu ya kuzika, basi hakuna kitu kinachoweza kuingizwa kwenye lebo hiyo.
Ni muhimu kufuata madhubuti utaratibu!
Ikiwa lebo nyingine imewekwa ndani ya lebo, basi sehemu ya ufunguzi ya lebo moja inakuja kwanza. Kisha sehemu ya ufunguzi wa mwingine na kadhalika. Basi tu wanapaswa kufungwa. Lakini hii inahitaji kufanywa kwa utaratibu wa reverse. Hiyo ni, sisi kwanza tunafunga lebo ya pili na tu mwisho tunafikia ya kwanza.
Mfano sahihi:
Maudhui ya hati iko hapa na yanaonekana kwa watumiaji wote.
Mfano usio sahihi:
Maudhui ya hati iko hapa na yanaonekana kwa watumiaji wote.
Kwa kuongeza, vipengele kadhaa vinaweza kuwekwa ndani ya lebo moja. Lakini kanuni hapa ni sawa. Kwanza tunaifungua. Kisha tunaweka vitambulisho hapo na kisha kuifunga.
Kwa urahisi zaidi, unaweza kuongeza maoni ya html kwenye msimbo. Kwa mfano, andika kile kipande hiki cha msimbo kinawajibika. Hii ni muhimu sana wakati wa maendeleo.
Maoni yenyewe yanaweza kuwa ya mstari mmoja au ya mistari mingi.
Jina la hati
Maandishi kuu
Imeandikwa kati ya miundo.
Jinsi ya kuunda faili ya htmlLabda baadhi yenu hamjui jinsi ya kuunda faili ya html. Kuna programu nyingi maalum za kazi hii:
- Mabano
- Daftari
- Notepad++
- Maandishi Matukufu
- Atomu na wengine
Ikiwa una Windows, Notepad tayari itapatikana kwa chaguomsingi. Lakini si rahisi kutumia. Kuanza, ninapendekeza kutumia kihariri cha bure cha ukurasa wa HTML Notepad++. Ina vipengele vingi vya kufanya kazi kwa urahisi na msimbo.
Unapozindua kihariri, tayari utakuwa na faili mpya tupu mbele yako. Andika ndani yake mifupa ya ukurasa wa html ( fremu), ambayo tulijadili hapo juu. Lazima awepo kila wakati.
Uundaji wa kitaalamu wa tovuti kwenye mtandao na mifano Jinsi ya kuunda tovuti kwenye mtandao
Maudhui ya hati iko hapa na yanaonekana kwa watumiaji wote.
Unaweza kubadilisha maandishi ili kukufaa. Kwa ujumla, hii itakuwa ukurasa rahisi zaidi wa html.
usimbaji wa HTMLWakati wa kuunda kurasa, kila wakati jumuisha usimbaji kwenye meta tag. Hii ni lebo ya huduma ambayo imeingizwa kwenye head .
Kwa ujumla, kipengele hiki cha meta kina mambo mengi. Inaweza kuwajibika sio tu kwa encoding, lakini pia kwa mambo mengine mengi. Hata hivyo, tutazungumzia hili katika makala zifuatazo.
Sasa kwa ajili yetu ina jukumu la kiashiria cha usimbaji. Kuna kiingilio maalum hapa. Inaambia kivinjari kuwa hati imeundwa katika usimbaji utf-8.
Kwa nini unahitaji usimbuaji hata kidogo?
Sio siri kuwa lugha tofauti zimeandikwa na kuzungumzwa ulimwenguni kote. Ikiwa tunaunda ukurasa na kuandika kwa Kirusi, basi huko Ujerumani wataunda na kuandika kwa Kijerumani. Nchi zingine tayari zina lugha yao wenyewe.
Hapo awali, wakati wa kuunda ukurasa wa html, ilikuwa ni lazima kutaja encoding, ambayo tunaandika kwa Kirusi. Wajerumani walipaswa kuonyesha kwamba walikuwa wakiandika kwa Kijerumani na kadhalika.
Tunapoingia kwenye ukurasa, kivinjari tayari kinaelewa tovuti imeandikwa kwa lugha gani. Pia inaelewa ni lugha gani inatumika kwa maandishi. Ipasavyo, inajaribu kuonyesha maandishi haya kulingana na usimbaji uliotolewa.
Kwa bahati mbaya, hii haikufanya kazi kila wakati.
Ikiwa tulitembelea tovuti za Kichina, tunaweza kuona miraba nyeusi au alama za maswali badala ya alama zao. Hiyo ni, kivinjari hakikuelewa wahusika hawa ni nini.
Usimbaji wa html umewekwa vibaya Kama suluhisho la tatizo hili, usimbaji wa utf-8 wa ulimwengu wote uliundwa.
Ilipokuwa kiwango, hakukuwa na haja tena ya kubainisha usimbaji mahususi wa lugha mahususi. Ilitosha kubainisha utf-8 kwa wote na tovuti yako ingeonyeshwa kawaida katika vivinjari vyote.
Wakati huo huo, kufanya kazi na hifadhidata pia hurahisishwa. Kwa hivyo, kumbuka hapa kwamba tutataja kila wakati usimbuaji katika utf-8. Lakini hapa unahitaji kulipa kipaumbele kwa jambo moja zaidi.
Hifadhi html utf-8Ili kila kitu kifanye kazi na kivinjari kuonyesha ukurasa, inashauriwa kuhifadhi hati ya HTML yenyewe katika utf-8. Programu ya Notepad++ inatusaidia vizuri sana na hili.
Kuna kipengee cha "Usimbaji" hapa. Ikiwa usimbaji wako sio sahihi sasa ( kama yangu kwenye picha ya chini), kisha bofya kipengee cha "Badilisha hadi UTF-8 bila BOM".
Katika hali hii, faili yako ya html itabadilishwa kuwa utf-8 encoding. Hifadhi mabadiliko yako.
Kona ya chini ya kulia utapata uandishi "Dos\Windows ANSI kama UTF-8". Hii inamaanisha kuwa hati iliundwa katika hali ya utf-8 na onyesho litakuwa la kawaida.
Na mara moja ushauri kama huo!
Nenda kwa "Chaguzi" -> "Mipangilio". Kuna kichupo cha Hati Mpya hapa. Mara moja angalia kisanduku cha "UTF-8 bila lebo ya BOM". Kwa njia hii, hati zote mpya zitaundwa mara moja katika usimbaji huu.
Jina la faili linaweza kuwa chochote. Lakini kwa chaguo-msingi, na haswa ikiwa huu ndio ukurasa kuu wa tovuti, basi uihifadhi kama index.html.
Tunapoandika anwani ya tovuti bila kubainisha ukurasa maalum, hii ina maana kwamba tunaomba ukurasa wa index.html. Hiyo ni, tunapowasiliana na seva, itapanua hasa ukurasa wa index.
Ikiwa tunataja ukurasa maalum, basi mwisho utaonyeshwa. Lakini ikiwa anwani haijabainishwa, basi ukurasa wa index utarejeshwa. Hivyo by default sisi jina ukurasa index.html.
Na kama unapaswa kuona tayari, kiendelezi cha faili lazima kiwe html. Hiyo ni, katika aina ya faili, chagua "Lugha ya Kuweka Maandishi ya Hyper" na ubofye "Hifadhi".
Jinsi ya kufungua faili ya htmlJinsi ya kufungua faili ya html ili kuona uwakilishi wa kuona wa ukurasa. Ili kufanya hivyo, tunatumia kivinjari chochote: Google Chrome, Opera, Edge, Mozilla Firefox, Safari na wengine.
Sio bure kwamba tunahifadhi faili na kiendelezi cha html. Baada ya yote, aina hii tu ya hati inatolewa na vivinjari. Na lugha ya HTML yenyewe ni kiwango cha mpangilio wa ukurasa kwa ajili ya kuzaliana baadae na vivinjari.
Kwa ujumla, bonyeza-click kwenye faili.
Katika menyu, onyesha "Fungua na" na uchague chaguo la kivinjari unachotaka. Ikiwa hazijaonyeshwa, kisha bofya "Chagua programu nyingine". Huko, kutoka kwenye orodha, chagua programu inayotakiwa ya kusoma kurasa za html.
Ikiwa unahitaji kuhariri msimbo, kisha chagua mhariri unaofaa. Ninapendekeza kutumia Notepad ++.
Jinsi ya kutazama msimbo wa html wa ukurasaPia nataka kukuambia jinsi unavyoweza kuona msimbo wa html wa ukurasa moja kwa moja kwenye kivinjari chako. Hii ni muhimu sana katika mazoezi. Kwa mfano, tafuta ni muundo gani wa msimbo wa html tovuti fulani hutumia.
Ni rahisi sana kutazama msimbo. Bonyeza tu mchanganyiko muhimu Ctrl + U. Msimbo wa chanzo wa ukurasa wa tovuti utafunguliwa kwenye kichupo kipya.
Msimbo wa chanzo cha tovuti Unaweza pia kuandika katika upau wa anwani kabla ya anwani ya ukurasa:
Vivinjari pia vina zana iliyojengewa ndani ya msanidi wavuti. Upatikanaji wake katika menyu itakuwa tofauti kwa kila programu. Walakini, kubonyeza F12 kutafungua zana hii kwenye kivinjari chochote.
Zana ya Msanidi wa Kivinjari Katika kichupo cha "Vipengee" kutakuwa na msimbo wa html upande wa kushoto, na . Chombo hiki ni rahisi kwa sababu unaweza kuhariri msimbo na mara moja kuona matokeo. Vidokezo vinaweza pia kuonyeshwa wakati wa kuhariri. Hii pia ni muhimu.
Ni hayo tu!
Sasa unajua jinsi ya kuunda ukurasa wa html. Ili kufanya hivyo, tulichunguza muundo wa hati yenyewe. Pia nilikupa zana kadhaa za kufanya kazi na nambari kwa urahisi. Pia kulikuwa na sheria muhimu za usimbuaji na kufanya kazi na faili. Hakikisha kuwafuata!
Muundo wa hati ya HTML. Hebu tuanze kazi.
HTML inaanza wapi?
Ili faili ya maandishi igeuke kuwa faili ya HTML, kubadilisha kiendelezi chake kutoka ".txt" hadi ".html" haitoshi. Lazima tufuate "kanuni ya mstari wa kwanza":
Kila hati ya HTML inayoafikiana na toleo lolote la vipimo vya HTML lazima ianze na mstari wa tamko la toleo la HTML !DOCTYPE , ambayo kwa kawaida inaonekana kama hii:
Mstari huu utasaidia kivinjari kuamua jinsi ya kutafsiri kwa usahihi hati hii. Katika kesi hii, tunaambia kivinjari kwamba HTML inalingana na toleo la kimataifa la vipimo 3.2, ambalo, ingawa sio jipya, ni tofauti na matoleo ya baadaye, kiwango kamili, kinachokubaliwa na wengi bila utata wowote. Kama unaweza kuona kutoka kwa mfano, hati fupi zaidi ya HTML ina mstari mmoja.
|
Mfano wa hati fupi zaidi ya HTML: |
|
Kazi inaanzia wapi?
Kwa kweli, haiwezi kufanywa kwa mstari mmoja tu. Baada ya kutangaza toleo na aina ya hati, unahitaji kuonyesha mwanzo na mwisho wake. Hii inafanywa kwa kutumia lebo ya chombo. Ikumbukwe kwamba hati yoyote ya HTML inafunguliwa na tag na kufungwa nayo.
Kisha, kati ya na tagi unapaswa kuweka kichwa na mwili wa hati. Ni hayo tu! Mwanzo umefanywa - umepokea maandalizi bora. Hivi ndivyo faili yako ya msingi ya HTML inapaswa kuonekana kabla ya kuanza:
Tafuna?
Ikiwa mfano hapo juu umeelezewa kwa mpangilio, itaonekana kama hii:
Mchoro unaonyesha kuwa hati hiyo ina vizuizi viwili kuu - "kichwa" na "mwili wa hati". Kichwa kinafafanuliwa kwa kutumia kipengele KICHWA, na mwili ni kipengele MWILI.
Kichwa kina maelezo ya "kiufundi" kuhusu hati, ingawa mara nyingi hutumiwa tu kuonyesha kichwa chake (angalia kipengele TITLE).
Mwili wa hati ni patakatifu pa patakatifu. Ina kila kitu kinachoonyeshwa kwenye ukurasa: maandishi, picha, meza. Kwa hivyo, tunahitimisha: majaribio yako mengi ya HTML yatafanywa katika nafasi kati ya lebo na
(HTML 1.0) - Maoni()
Inatumika kuunda maoni katika sehemu yoyote ya hati. Kila kitu kilicho ndani, iwe kipengele au maandishi, kitapuuzwa na kivinjari (haitashughulikiwa na kuonyeshwa kwenye skrini).
Vidokezo:
|
Maoni yaliyo ndani ya kipengele TITLE(kama vile, vitambulisho vingine vyovyote) vinachukuliwa kama maandishi na vitaonekana kwenye kichwa cha hati. Kwa maneno mengine, lebo iliyo ndani ya TITLE haina athari. |
|
|
Usiwe mvivu kutoa maoni yako kwa kila ulichoandika. Sheria hii ya uchawi itakuokoa muda mwingi unapojaribu kujua uumbaji wako mwenyewe miezi michache baadaye. |
Imeundwa kwa kutumia kipengele KICHWA, kati ya vitambulisho ambavyo vipengele vyenye maelezo ya kiufundi kuhusu waraka huwekwa. Kijajuu kawaida huja mbele ya mwili wa hati (tazama muundo wa hati ya HTML).
Vipengele vinavyohusiana na kichwa cha hati:
|
Inafafanua mwanzo na mwisho wa kichwa cha hati |
||
|
Inafafanua jina la hati nzima, ambayo inaonyeshwa kwenye upau wa kichwa wa dirisha la kivinjari |
||
|
Inafafanua anwani ya msingi ambayo viungo vya jamaa ndani ya hati vimehesabiwa |
||
|
Inatumika kuingiza laha za mtindo wa CSS kwenye hati |
||
|
Inaelezea uhusiano wa hati na vitu vingine |
||
|
Inatumika kuingiza metadata |
(HTML 1.0) - Mkuu
Inafafanua mwanzo na mwisho wa kichwa cha hati. Ni chombo cha vipengele vyenye maelezo ya kiufundi kuhusu hati. ( TITLE,MSINGI,MTINDO,KIUNGO,META).
(HTML 2.0) - Kichwa
Inabainisha jina la hati nzima. Jina kawaida huonyeshwa kwenye upau wa kichwa wa dirisha la kivinjari. Kipengee hiki inahitajika kwa hati yoyote ya HTML na inaweza kubainishwa mara moja.
(HTML 3.2) - URL ya Msingi
Hubainisha anwani ya msingi ya hati ya sasa (URL), ambayo itakuwa mahali pa kuanzia kukokotoa URL jamaa ndani ya hati. Kipengele hakina lebo ya mwisho. Angalau moja ya sifa lazima iwepo.
Sifa:
HREF - inabainisha anwani ya msingi (URL) ya hati ya sasa.
TARGET—Inabainisha jina la fremu litakalotumika katika viungo kwa chaguo-msingi. Hii inaweza kuwa muhimu ikiwa unataka kufungua viungo vyote kwenye hati katika fremu tofauti.
(HTML 3.2) - Mtindo
Inatumika kuingiza laha la mtindo (CSS - Laha ya Mtindo wa Kuteleza) kwenye hati.
Sifa:
TYPE ni sifa inayohitajika. Hubainisha aina ya MIME ya uzuiaji wa mtindo unaowekwa. Kwa kawaida, thamani ya sifa hii ni "text/css".
TITLE - inabainisha jina la laha ya mtindo itakayoundwa. Inahitajika ikiwa utatumia vipengele vingi vya STYLE katika hati moja. Katika kesi hii, kivinjari lazima kiulize mtumiaji ni mitindo gani iliyopendekezwa itatumika kwenye hati.
(HTML 2.0) - Kiungo
Kipengele cha LINK kinaelezea uhusiano wa hati na nyaraka zingine kwenye tovuti, ikionyesha nafasi yake katika muundo wa hierarchical wa tovuti. Kipengele hakina lebo ya mwisho. Kijajuu kinaweza kuwa na vipengee vingi vya LINK.
Sifa:
HREF - inafafanua URL ya kitu.
REL - inafafanua aina ya uhusiano kati ya hati ya sasa na kitu kilichoelezwa na sifa ya HREF. Thamani zinazowezekana:
laha ya mtindo - Inaelekeza kwenye faili iliyo na laha ya mtindo (CSS) ya hati ya sasa. Kivinjari kitapakia faili ya css kutoka kwa anwani iliyoainishwa katika sifa ya HREF na kuitumia kwa hati ya sasa (tazama pia kipengele. MTINDO) nyumbani - huelekeza kwenye ukurasa kuu wa toc ya tovuti yako, yaliyomo - huelekeza kwenye faili iliyo na jedwali la yaliyomo kwenye waraka huu. index - inaelekeza kwenye faili iliyo na habari kwa utafutaji wa index wa hati ya sasa. glossary - inaelekeza kwenye faili iliyo na orodha ya maneno yanayohusiana na hati ya sasa. hakimiliki - inaelekeza kwenye ukurasa kwenye tovuti ambayo inazungumza kuhusu waundaji wake, hakimiliki, nk. juu, mzazi - huelekeza kwenye ukurasa wa "mzazi" (hati ambayo ni hatua moja juu katika muundo wa hali ya juu wa tovuti yako). mtoto - huelekeza kwenye ukurasa wa "mtoto" (hati ambayo ni hatua moja chini katika muundo wa kihierarkia wa tovuti yako). inayofuata - inaelekeza kwenye ukurasa unaofuata katika mlolongo wa nyaraka (kwa mfano, ukurasa unaofuata wa orodha ya elektroniki, nyaraka au kamusi). uliopita - pointi kwa ukurasa uliopita katika mlolongo wa hati. mwisho, mwisho - pointi kwa ukurasa wa mwisho katika mlolongo wa hati. kwanza - inaelekeza kwenye ukurasa wa kwanza katika mlolongo wa hati. usaidizi - huelekeza kwenye ukurasa kwa usaidizi (kwa mfano kwa kuvinjari tovuti yako).
TYPE—Hubainisha aina ya MIME kwa kitu kilichobainishwa katika sifa ya HREF.
Vidokezo:
(HTML 2.0) - Meta
Kipengele cha META kinatumika kwa maelezo ya kiufundi ya hati, ambayo ni metadata katika mfumo wa jozi ya thamani ya jina. Kwa usaidizi wa kipengele hiki, maelezo ya ziada yenye manufaa yanaletwa kwenye kichwa cha hati, yasiyoonekana kwa mtumiaji, lakini wakati mwingine hayawezi kubadilishwa kwa uorodheshaji sahihi wa ukurasa wako na roboti za seva ya utafutaji. Kipengele hakina lebo ya mwisho.
Sifa:
NAME - inafafanua jina la chapisho la meta. Kuna majina mengi yaliyofafanuliwa awali, ambayo baadhi yake unaweza kuona katika mfano hapa chini.
HTTP-EQUIV - inafafanua jina la ingizo la meta. Inakaribia kufanana na sifa ya NAME, lakini inatumika tu ikiwa ni muhimu kusambaza maelezo ya ziada katika kichwa cha HTTP.
MAUDHUI - Hutoa thamani kwa ingizo la meta lililofafanuliwa katika sifa ya NAME (au HTTP-EQUIV).
Muafaka hutumiwa kugawanya dirisha la kivinjari katika maeneo kadhaa, ambayo kila moja inawakilisha hati tofauti ya HTML (sura). Kama sheria, muafaka hutumiwa kuwezesha urambazaji wa tovuti na kuunda menyu ya urambazaji. Hata hivyo, watengenezaji wengi huepuka kutumia muafaka, na kwa sababu nzuri. Jaribu kutumia viunzi pale tu inapohitajika.
Vipengele vya kuunda muafaka na kufanya kazi nao:
Vidokezo:
FRAMESET
(HTML 4.0) - Seti ya Fremu
Inafafanua sura (dirisha) muundo wa hati: ukubwa na eneo la muafaka kwenye ukurasa. Imeundwa badala ya hati ya mwili (yaani, kipengele MWILI haitumiki kwenye hati). Hufungua na kufunga orodha ya fremu zilizobainishwa na kipengele FRAM. Kati ya vitambulisho vya mwanzo na mwisho isipokuwa FRAME na NOFRAMES kunaweza kuwa na vipengele vingine vya FRAMESET. Hiyo ni, kipengele cha FRAMESET inasaidia uundaji wa fremu zilizowekwa.
Sifa:
ROWS - huamua idadi na ukubwa wa fremu za mlalo (safu za safu) kwenye dirisha la kivinjari. Thamani ni orodha iliyotenganishwa kwa koma ya ukubwa wa fremu. Njia za kuweka vipimo:
Kama asilimia ya urefu wa eneo la mteja la dirisha la kivinjari. Kwa mfano: "30%,30%,40%"; kwa namna ya ishara ya "*" (asterisk), ikionyesha kwamba sura inachukua nafasi yote ya bure ya dirisha la kivinjari ambalo halijachukuliwa na viunzi vingine vilivyo na ukubwa uliowekwa wazi. Kwa mfano, nyota katika kuingia "25%,25%,"*" ni sawa na 50%; katika saizi. Kwa mfano: "75,"*";
Njia zote tatu zinaweza kuunganishwa. Kwa mfano, "25%,40,"*" itagawanya skrini katika fremu tatu za mlalo, ya kwanza ikiwa robo ya juu ya dirisha la kivinjari, ya pili ya pikseli 40 juu, na ya tatu itachukua eneo lote lililosalia. .
COLS - huamua idadi na ukubwa wa muafaka wima (muafaka wa safu) kwenye dirisha la kivinjari. Thamani ni orodha iliyotenganishwa kwa koma ya ukubwa wa fremu. Vipimo vimewekwa kwa njia sawa na katika sifa ya ROWS iliyotangulia.
MPAKA - hufafanua upana wa mipaka ya sura katika saizi. Sifa hii inafanya kazi katika vivinjari vya Netscape pekee;
FRAMEBORDER - huamua ikiwa fremu zilizo ndani ya FRAMESET zina mipaka. Thamani zinazowezekana:
Ndiyo - muafaka wa kuonyesha; Hapana au 0 - usionyeshe muafaka;
Vivinjari vya Netscape havitumii sifa hii kikamilifu na hutumia sifa ya BORDER kubainisha kimataifa upana wa mpaka.
FRAMESPACING - inafafanua umbali (kinachojulikana kama "eneo la kijivu") kati ya fremu katika saizi. Sifa hii inahitajika ili kuunda fremu zisizo na mipaka.
Kumbuka:
(HTML 4.0) - Fremu Inafafanua fremu na sifa zake ndani ya muundo wa FRAMESET. (angalia kipengee FRAMESET) Sifa:
SRC ni sifa inayohitajika. Inabainisha anwani (URL) ya faili ya HTML inayoonyeshwa kwenye fremu hii.
NAME - inafafanua jina la fremu hii, ambayo itatumiwa baadaye kuiunganisha kutoka kwa hati zingine kwa kutumia sifa TARGET (angalia kipengele A) Thamani lazima iwe jina lolote bila nafasi kwa kutumia herufi na nambari za Kilatini. Jina lazima lisianze na nambari au herufi maalum.
MARGINWIDTH - Inafafanua upana (katika pikseli) wa pambizo za kushoto na kulia za fremu. Ikiwa sifa haijabainishwa, kivinjari kitaamua kiotomati ukubwa bora wa ujongezaji.
MARGINHEIGHT - inafafanua upana (katika pikseli) wa kando ya juu na chini ya fremu. Ikiwa sifa haijabainishwa, kivinjari kitaamua kiotomati ukubwa bora wa ujongezaji.
KUTEMBEZA - huamua uwepo wa baa za kusogeza kwa yaliyomo kwenye fremu. Thamani zinazowezekana:
ndio - onyesha vipau vya kusogeza. hapana - usionyeshe vipau vya kusogeza. otomatiki - onyesha pau za kusogeza ikiwa ni lazima (ikiwa hati iliyobainishwa katika sifa ya SRC haitoshei kwenye fremu).
NORESIZE - hairuhusu kubadilisha ukubwa wa fremu. Sifa hii ni bendera na haihitaji thamani.
FRAMEBORDER - huamua ikiwa fremu ina fremu. Thamani zinazowezekana:
ndiyo - muafaka wa kuonyesha; hapana au 0 - usionyeshe muafaka;
Vivinjari vya Netscape havitumii sifa hii kikamilifu na hutumia sifa ya BORDER ya kipengele cha FRAMESET ili kubainisha upana wa fremu duniani kote.
|
Mfano (faili ya index.html): |
|
|
... Kivinjari chako hakitumii fremu ... |
|
Hii itagawanya dirisha la kivinjari katika viunzi vitatu kama inavyoonyeshwa hapa chini. Zaidi ya hayo, frame1.html itakuwa na upana wa pikseli 265, na frame2.html itakuwa na urefu wa 165.
NOFRAMES
(HTML 4.0) - Hakuna muafaka
Chochote kati ya vitambulisho vya mwanzo na mwisho vya kipengee fulani kitatolewa na kivinjari isipokuwa kama kinatumia fremu. Kipengele cha NOFRAMES hakina sifa na lazima kiwe ndani ya kipengele FRAMESET.
|
Mfano: |
|
|
Kivinjari chako hakitumii fremu. Kawaida, sawa? |
|
Ni wakati wa kuangalia hati rahisi ya HTML kama mfano. Tutaandika msimbo unaosababisha maonyesho ya maneno "Hujambo, ulimwengu!" kwenye dirisha la kivinjari. (ilitafsiriwa kutoka kwa Kiingereza - "Halo, ulimwengu!"). Aina hii ya mazoezi ya uandishi kwa kawaida ndiyo tajriba ya kwanza wakati wa kujifunza lugha mpya. Uundaji huu wa shida huvutia umakini wa mwanafunzi kwa mambo kadhaa muhimu ya lugha ya programu (kwa upande wetu, lugha ya alama), ambayo kuu ni muundo wa msingi wa programu (kwa upande wetu, ukurasa wa wavuti).
doctypeKipengele hiki pia kinaitwa kipengele cha mizizi kwa sababu vipengele vingine vyote vya hati viko ndani yake. Kipengele cha mizizi kinaweza kuwa na watoto wawili tu: na.
kipengele cha kichwaKipengele ni chombo cha vipengele vingine vinavyotoa taarifa kuhusu hati, inayojulikana kama metadata. Metadata hii huambia kivinjari eneo la hati za nje na laha za mtindo, kuanzisha uhusiano kati ya hati ya sasa na rasilimali zingine, na inaweza kutoa maelezo ya ziada yaliyokusudiwa kwa vivinjari. Kando na kipengele kinachohitajika, kilichojadiliwa baadaye katika sura hii, vivinjari havionyeshi metadata yoyote inayopatikana ndani ya kipengele.
Kipengele lazima kiwe mtoto wa kwanza wa kipengele, hakuna maudhui au vipengele lazima vije mbele yake:
kipengele cha kichwa
Kipengele hutoa kichwa cha maandishi kwa hati. Kila hati ya HTML lazima iwe na kipengele kimoja, ambacho lazima kiwe ndani ya kipengele:
Kichwa cha dirisha
Vivinjari huonyesha maudhui ya kipengele kama jina (jina) la hati, ambalo kwa kawaida huonekana juu ya dirisha la kivinjari au katika kichwa cha kichupo:
kipengele cha mwiliKipengele ni chombo cha maudhui yote ya ukurasa wa wavuti. Kila kitu kinachoonyeshwa kwenye dirisha la kivinjari na kuonekana kwa mtumiaji kina ndani yake (kila hati ya HTML inaweza kuwa na kipengele kimoja tu). Kusudi lake kuu ni kutenganisha yaliyomo kwenye hati kutoka kwa metadata:
Kichwa cha dirisha
Ni hayo tu! Mwanzo umefanywa - umepokea maandalizi bora. Hivi ndivyo muundo wa hati iliyokamilishwa utakavyoonekana na maneno "Hujambo, ulimwengu!" inayoonyeshwa kwenye dirisha la kivinjari:
Kichwa cha dirisha Hello, dunia!
