Mwongozo wa msingi wa HTML kwa Dummies

Ilisasishwa mwisho mnamo 05 Oktoba 2020


Miaka ishirini iliyopita, hata ikiwa wewe ni blogger wa kupendeza, ilibidi ujue kuweka alama kwenye wavuti ili kujilinda au kuongeza kazi rahisi kwenye wavuti yako. Lakini sasa kuna wahariri na programu-jalizi nyingi ambazo hata kujua misingi ya HTML haihitajiki tena.

Shida na hii ni kwamba ikiwa haujui misingi michache, unaweza kuingia kwa shida kwenye blogi yako na inabidi kuajiri msanidi wa bei ili kurekebisha shida inayoweza kuwa ndogo. Sio hivyo tu, lakini kuunda mabadiliko kwenye blogi yako kama vile kuongeza wijeti ya maandishi maalum inahitaji maarifa kidogo.

"Nambari" za HTML.

Na ikiwa unapata mpangilio wa maudhui hauonekani, maarifa ya HTML yanaweza kurudi kwenye ufuatiliaji.

Hapa ni baadhi ya toleo la HTML ya mwongozo wa wanablogu na wamiliki wasio wa techie wa biashara mtandaoni.

HTML ni uti wa mgongo wa mtandao wa leo. Mamilioni ya tovuti pamoja ziliunda mtandao. Ambapo HTML ni jengo la tovuti hizi zote.

Kabla Hatujaanza…

1. HTML ni nini?

HTML ni ufupisho wa Hyper Text Markup Llugha. Ni lugha ya kawaida ya kuchapisha yaliyomo kwa vivinjari vya wavuti.

HTML inawakilishwa na "Elements". Vipengele vinajulikana pia kama "Vitambulisho".

2. Kwa nini HTML inahitajika?

Vivinjari vya wavuti vinaweza tu kutoa tovuti wakati imeandikwa katika lugha yao ya mkono. HTML ni lugha ya kawaida ya markup na ina kukubalika zaidi kwa vivinjari vya wavuti.

Ndio sababu unahitaji HTML.

3. Je, kesi ya HTML ni nyeti?

HTML sio nyeti nyeti. Lakini mazoezi bora ni kuandika HTML na matukio sahihi.

Hatua za Kuunda Faili Yako ya Kwanza ya HTML

Unaweza kuunda faili ya msingi ya HTML kwa kutumia Notepad kwenye kompyuta yako. Lakini itakuwa chungu kwa kuandika mistari mingi ya kanuni.

Unahitaji Mhariri wa Kanuni. Mhariri mzuri wa kanuni itafanya iwe rahisi kuandika na kuandaa codes kubwa.

Ninatumia na kupendekeza Notepad + + (bure na chanzo cha wazi) kwa kuandika lugha za wavuti. Kuna wahariri wengine ambao unaweza kutumia kama ChinilMaandishi ya ime, Atom nk

Hapa ndio unahitaji kufanya:

  1. Sakinisha mhariri wa msimbo
  2. Fungua
  3. Unda faili mpya
  4. Hifadhi kama faili ya .html

Uko tayari kwenda!

Mhariri wa nambari - Atomu

1. Habari Ulimwengu!

Nakili na ushirike nambari ifuatayo kwenye faili yako mpya ya HTML na uihifadhi. Sasa uikimbie kwenye kivinjari chako cha wavuti.

Kanuni:

Ukurasa wangu wa kwanza wa wavuti Salamu, Dunia!

Matokeo:

Hongera! Umeunda faili yako ya kwanza ya HTML. Sio lazima uifahamu wakati huu. Tutaifunika hivi karibuni.

Kuelewa muundo wa HTML

Kila faili ya HTML ina muundo wa uchi wa kawaida. Hii ndio ambapo kila kitu kinaanza. Na kila ukurasa mkubwa wa codes utakuja kwenye muundo huu baada ya kupungua.

Basi hebu jaribu kuielewa kutoka kwa "Hello World!" msimbo. Vitu vifuatavyo ni sehemu za lazima kwa kila faili ya HTML.

  • = Ni tamko kwa kivinjari kwamba hii ni faili ya HTML. Lazima uieleze kabla ya lebo.
  • = Hiki ni kipengee cha mizizi ya faili ya HTML. Kila kitu unachoandika huenda kati na .
  • = Hii ni sehemu ya habari ya mta kwa kivinjari. Maandishi ndani ya lebo hii hayana pato la kuona.
  • = Hii ndio sehemu ambayo kivinjari cha wavuti hutoa. Kile unachokiona kwenye wavuti ni utoaji wa nambari kati ya na .

2. Vitambulisho vya HTML

HTML ni ushirikiano wa mamia ya vitambulisho tofauti. Unahitaji kujifunza jinsi wanavyofanya kazi. Pia unatakiwa kuhakikisha kwamba wamezitumia kwa njia sahihi.

Lebo za HTML kawaida zina lebo ya kufungua na kufunga. Lebo ya kufungua ina neno kuu likizungukwa na chini ya (<) na ishara kubwa kuliko (>). Lebo ya kufunga ina kila kitu sawa lakini ziada ya mbele mbele (/) baada ya ishara chini ya (<).

(2a) kichwa cha kichwa

Lebo zote za kichwa huenda kati na . Zina habari za meta kwa kivinjari cha wavuti na injini za utaftaji. Kimsingi hazina pato la kuona.

Kitambulisho kinafafanua jina la ukurasa wa wavuti unaoonekana kwenye kichupo cha kivinjari. Taarifa hii hutumiwa na programu za mtandao na injini za utafutaji. Unaweza kuwa na cheo cha juu zaidi kwa faili ya HTML.

Kanuni:

Ukurasa wangu wa kwanza wa wavuti
Lebo ya kichwa inaonekana juu ya kivinjari chako.

Lebo ya kiungo inaunganisha ukurasa wako wa HTML na rasilimali za nje. Matumizi yake makuu ni kuunganisha ukurasa wa HTML na karatasi za mitindo za CSS. Ni lebo ya kujifunga na haiitaji mwisho . Hapa rel inasimama kwa uhusiano na faili na src inamaanisha chanzo.

Kanuni:

Meta ni lebo nyingine ya kufungwa yenyewe ambayo hutoa habari ya meta ya faili html. Injini za utafutaji na huduma zingine za wavuti hutumia maelezo haya. Lebo za meta ni lazima ikiwa unataka kuboresha ukurasa wako kwa injini za utafutaji.

Kanuni:

<meta name="description" content="This is the short description that search engines show"

Kitambulisho cha script kinatumika kwa pamoja na script ya upande wa seva au kufanya kiungo kwenye faili ya script ya nje. Inaweza kuwa na sifa mbili katika lebo ya ufunguzi. Moja ni aina na mwingine ni chanzo (src).

Kanuni:

Lebo ya Noscript inafanya kazi wakati hati zimelemazwa kwenye kivinjari cha wavuti. Inafanya ukurasa kufuata kwao ambao hairuhusu maandishi kwenye vivinjari vyao vya wavuti.

Kanuni:

Ole! Hati zimelemazwa.

(2b) Makala ya Mwili

Lebo zote za mwili huenda kati na . Wana matokeo ya kuona. Hapa ndipo kazi zaidi inafanywa. Lazima utumie vitambulisho hivi kuunda yaliyomo kwenye ukurasa wako kuu.

kwa

Hizi ndizo vitambulisho vya kichwa. Kichwa muhimu zaidi kimetambulishwa na na muhimu zaidi na . Unapaswa kuzitumia katika safu sahihi.

Kanuni:

Huu ni kichwa cha h1 Huu ni kichwa cha h1 Huu ni kichwa cha h1 Huu ni kichwa cha h2 Hii ni kichwa cha h2 Hii ni kichwa cha h2

Matokeo:

Maandishi ya kuunda

Nakala katika faili html inaweza kupangiliwa kwa kutumia vitambulisho vingi vya kupangilia. Itakuwa muhimu wakati unataka kuonyesha neno au mstari kutoka maudhui yako.

Kanuni:

Unaweza kuonyesha maandishi yako kwa njia nyingi. Unaweza ujasiri, kusisitiza, italiki, alama , usajili , maandishi na zaidi!

Matokeo:

Unaweza kuacha nambari fulani kutoka kwa kutafsiri kwa kutumia lebo ya maoni. Nambari itaonekana kwenye msimbo wa chanzo lakini haitafanywa. Matumizi kuu ya lebo hii ni kwa ajili ya kujenga nyaraka za faili za html kwa kutaja baadaye.

Mfano:

You can comment out any code by surrounding them in this way -->

(2c) Nyengine nyingine muhimu za HTML

Anchor ni lebo yenye thamani ambayo hutumiwa karibu kila mahali. Hutaona ukurasa wowote wa wavuti mtandaoni bila angalau kiungo kimoja cha nanga.

Muundo ni sawa. Inayo sehemu ya kufungua na ya kufunga . Maandishi unayotaka kutia nanga huenda kati na .

Kuna baadhi ya sifa zinazofafanua wapi na jinsi mtumiaji anavyofuata baada ya kubonyeza.

  • ahref = "" = Inafafanua kiungo cha marudio. Kiungo huenda kati ya quotes mbili.
  • shabaha = "" = Inafafanua ikiwa URL itafungua kwenye kichupo kipya cha kivinjari au kwenye kichupo hicho hicho. lengo = "_ tupu" ni kwa kichupo kipya na lengo = "_ ubinafsi" ni kwa kufungua kwenye kichupo kimoja.
  • rel = "" = Inafafanua uhusiano wa ukurasa wa sasa na ukurasa uliounganishwa. Ikiwa hauamini ukurasa uliounganishwa, unaweza kufafanua rel = "nofollow".

Kanuni:

Bonyeza hapa kwenda kwa Google. Itafungua kwenye tabo mpya. Bonyeza hapa . Pia itakupeleka kwa Google lakini itafungua kwenye kichupo cha sasa.

Matokeo:

Lebo ya picha ni lebo nyingine muhimu ambayo huwezi kufikiri tovuti nyingi za msingi.

ni lebo ya kujifunga. Haihitaji kufungwa kwa jadi kama . Kuna sifa ambazo unahitaji kujua kabla ya kuzitumia kwa usahihi.

  • src = "" = Hii ni kwa kufafanua kiungo cha chanzo cha picha. Weka kiungo haki kati ya quotes mbili.
  • alt = "" = Inasimama kwa maandishi mbadala. Wakati picha yako haipakia, maandishi haya ataupa watumiaji wazo juu ya picha iliyopotea.
  • upana = "" = Inafafanua upana wa picha katika saizi.
  • Urefu = "" = Inafafanua urefu wa picha katika saizi.

Mfano:

Hii ndio Googleplex mnamo Agosti 2014. Picha hii ina upana wa saizi 500 na urefu wa saizi 375.

Matokeo:

Vidokezo: Unataka kuingiza picha inayoweza kubofyeka? Funga nambari ya picha na lebo. Angalia jinsi inavyokwenda.

au

Lebo ya orodha ni kuunda orodha ya vitu. inasimama kwa orodha zilizoamriwa (orodha iliyohesabiwa) na inasimama kwa orodha ambazo hazijadhibitiwa (alama za risasi).

Orodha ya vitu ndani ya au imewekwa na . li inasimama kwa orodha. Unaweza kuwa na nyingi unavyotaka ndani ya mzazi au lebo.

Kanuni:

Hii ni orodha iliyoamriwa: Bidhaa 1 Kipengee 2 Kipengee 3 Hii ni orodha isiyodhibitiwa: Bidhaa 1 Kipengee 2 Kipengee 3

Matokeo:

Lebo ya meza ni kwa ajili ya kujenga meza ya data. Kuna wachache vitambulisho vya kiwango ambavyo hufafanua vichwa vya meza, safu na safu.

ni nambari ya mzazi wa nje. Katika lebo hii, anasimama kwa safu ya meza, inasimama kwa safu ya meza na inasimama kwa kichwa cha meza.

Kanuni:

Jina Umri Taaluma Jo 27 Mfanyabiashara Carol 26 Muuguzi Simone 39 Profesa

Matokeo:

Kumbuka: Maadili ndani ya kwanza ni vichwa. Kwa hivyo, tulitumia ambayo inatumika kwa maandishi ya maandishi kwa maandishi.

Jumuiya ya Jedwali

Unaweza kupanua utendaji wa meza kwa kutumia vipengee vya kikundi cha meza. Kutakuwa na wakati unahitaji kujenga meza kubwa ambazo zimegawanyika kwenye kurasa nyingi.

Kuunganisha data yako ya meza kwenye kichwa, mwili na mchezaji, unaweza kuruhusu kupiga kura kwa kujitegemea. Sehemu ya kichwa na sehemu itashusha kila ukurasa ambapo meza yako imewekwa.

Vitambulisho vya makundi ya meza ni:

  • = Kwa kuifunga vichwa vya meza. Inabadilisha kila ukurasa wa mgawanyiko wa meza.
  • = Kwa kufunika data kuu ya meza. Unaweza kuwa na nyingi kama unahitaji. A lebo inamaanisha kikundi tofauti cha data.
  • = Kwa kuifunga maelezo ya mguu wa meza. Inabadilisha kila ukurasa wa mgawanyiko wa meza.

Tafadhali kumbuka kuwa si lazima kutumia makundi. Unaweza kutumia ili kufanya meza kubwa zaidi inavyoonekana. Wakati waendelezaji maalum walitumia alama hizi kama CSS Selectors.

Hivi ndivyo tunaweza kugawanya meza yetu ya mfano kuwa , na :

Kanuni:

Jina Umri Taaluma John 27 Mfanyabiashara Carol 26 Muuguzi Simone 39 Profesa Jumla ya Watu: 3

Matokeo:

Kipengele cha fomu hutumiwa kwa kuunda fomu za maingiliano kwa kurasa za wavuti. Fomu ya HTML ina vitu kadhaa mfululizo. Kwa mfano:, , na kadhalika.

Tabia ya hatua katika fomu ni muhimu sana. Inasoma kwa upande wa seva au ukurasa wa tatu kwa usindikaji habari. Kwa usindikaji, unahitaji kufafanua njia kwanza.

Unaweza kutumia njia mbili au kupata au baada. Pata kutuma maelezo yote kwenye muundo wa URL ambapo Post inatuma habari katika mwili wa ujumbe.

Kuna aina nyingi za kuingiza fomu. Aina ya pembejeo ya msingi sana ni maandishi. Imeandikwa kama . Aina zinaweza pia kuwa redio, kisanduku cha kuangalia, barua pepe na kadhalika. Lazima kuwe na uwasilishaji wa aina ya kuwasilisha chini kwa kuunda kitufe cha kuwasilisha.

lebo hutumiwa kwa kuunda lebo na kuwahusisha na pembejeo. Utawala wa kuhusisha lebo na pembejeo ni kwamba zina thamani sawa kwa = "sifa ya lebo na id =" sifa ya pembejeo.

Kanuni:

Jina la kwanza: Jina la familia: Bio fupi: Jinsia: Mwanaume Mwanamke

Matokeo:

Kumbuka: Nimesema hatua kwa thamani ya null kwa sababu haikuunganishwa na seva yoyote ili kuondokana na habari.

3. Sifa za HTML

Tabia ni aina moja ya modifiers kwa vitambulisho vya HTML. Wanaongeza mageuzi mapya kwenye vitambulisho vya HTML.

Sifa inaonekana kama sifa = "" na inakaa kwenye lebo ya kufungua ya HTML. Thamani ya sifa huenda kati ya nukuu mbili.

id = "" na darasa = ""

id na darasa ni vitambulisho vya vitambulisho vya HTML. Majina tofauti huteuliwa kwa vipengele tofauti vya HTML kwa kutumia vitambulisho. Unaweza kutumia kitambulisho cha darasa moja kwa vipengele vingi. Lakini huwezi kutumia kitambulisho cha id moja kwa vipengele vingi.

Kanuni:

Hiki ndicho kichwa kuu

href = ””

href inasimama Rejea ya Hypertext. Wanaelekeza watumiaji kwa viungo vya kumbukumbu. Lebo ya nanga hutumia href kupeleka watumiaji kwa URL ya marudio.

Kanuni:

Google

src = ””

src inasimama kwa chanzo. Inafafanua chanzo cha vyombo vya habari au rasilimali unazozitumia kwenye faili la HTML. Chanzo kinaweza kuwa URL ya ndani au ya tatu.

Kanuni:

alt = ""

alt anasimama mbadala. Ni maandishi ya salama ambayo inatumika wakati kipengele cha HTML hawezi kupakia.

Kanuni:

mtindo = ””

sifa ya mtindo mara nyingi hutumiwa katika vitambulisho vya HTML. Inafanya kazi ya CSS ndani ya lebo ya HTML. Malipo yako ya kupendeza huenda kati ya quotes mbili.

Kanuni:

Hii ni jina lingine

4. Onyesho la Nambari: Zuia vs Inline

Vitu vingine huanza kila wakati kwenye laini mpya na chukua upana kamili unaopatikana. Hizi ni vitu vya "Zuia".

Ex: , , - , fomu nk.

Vitu vingine huchukua nafasi inayohitajika tu na usianze kwenye laini mpya. Hizi ni vitu vya "Inline".

Ex: ,, ,, na kadhalika.

Utahitaji kutenganisha vipengele vya kuzuia kutoka kwa inline wakati unatumia mitindo ya CSS. Katika mwongozo huu wa HTML, sio muhimu sana.

Kanuni:

Ukurasa wangu wa kwanza wa wavuti Huu ni kichwa cha H2. Ina Kizuizi cha kuonyesha. Hii ni kichwa kingine cha H2. Hapa lebo ya msisitizo ina Inline display.

Matokeo:

5. Nukuu mara mbili dhidi ya nukuu moja katika HTML

Swali hili ni dhahiri sana. Unapaswa kutumia nini katika HTML? Nukuu moja au quote mara mbili? Watu wanaonekana kutumia wote wawili lakini ni moja sahihi?

Kwenye HTML, nukuu moja na nukuu mara mbili ni sawa. Hawafanyi tofauti yoyote katika matokeo.

Unaweza kutumia mtu yeyote unayopenda. Lakini kuchanganya wote katika ukurasa wa nambari huchukuliwa kuwa ni mazoea mabaya. Unapaswa kuwa thabiti na yeyote kati yao.

6. Semantic HTML vs HTML isiyo ya semantic

HTML ya Semantic ni toleo la hivi karibuni la HTML, ambayo pia huitwa HTML5. Ni toleo la maendeleo ya HTML yasiyo ya semantic na XHTML.

Kwa nini HTML5 ni bora? Katika matoleo ya hapo awali, vitu vya HTML viligunduliwa na majina ya id / darasa. Kwa mfano: ilizingatiwa nakala.

Katika HTML5, lebo inawakilisha yenyewe kama nakala bila kuhitaji kitambulisho chochote cha kitambulisho.

Kwa ajili ya HTML5, sasa injini za utafutaji na programu nyingine za mtandao zinaweza kuelewa vizuri ukurasa wa wavuti. Tovuti za Semantic zimefunuliwa kufanya vizuri kwa SEO.

Hapa kuna orodha ya vitambulisho vingi vya HTML5:

  • = Hii ni kwa kufunika maudhui kuu ambayo unataka kuonyesha watazamaji wako.
  • = Hii ni kwa kuandika sehemu ya kichwa cha maudhui kama kichwa au meta wa mwandishi.
  • = Inasema maudhui yaliyoelezwa na mtumiaji au ya kujitegemea kwa watazamaji wako.
  • = Inaweza kuunganisha msimbo wowote kama kichwa, footer au sidebar. Unaweza kusema, ni aina ya semantic ya div.
  • = Hii ndio maudhui yako ya mchezaji, hati ya kukataa au hati miliki.
  • = Inakuwezesha kuingiza faili za sauti bila kuwa na tatizo lolote la programu.
  • = Penda , unaweza kuingiza video ukitumia lebo hii bila shida za programu-jalizi.

Mfumo rahisi HTML5 utaonekana kama hii:

Ukurasa wangu wa kwanza wa wavuti Menyu 8 Menyu 1 Hii ndio kichwa cha nakala Iliyotumwa na John Doe Yaliyomo kwenye kifungu hiki huenda hapa Hakimiliki 2 John Doe

7. Uthibitishaji wa HTML

Wataalamu wengi wa wavuti huthibitisha msimbo wao baada ya kumaliza. Kwa nini ni muhimu kuthibitisha msimbo wakati unafanya kazi nzuri?

Kuna sababu mbili zinazowezekana za kuthibitisha codes zako:

  1. Itasaidia kufanya kivinjari chako cha msalaba-msalaba na jukwaa msalaba sambamba. Msimbo hauwezi kuonyesha hitilafu yoyote katika kivinjari chako cha sasa, lakini huenda kwa mwingine. Uthibitisho wa Kanuni utatayarisha.
  2. Injini za utaftaji na programu zingine za wavuti zinaweza kuacha kutambaa kwenye ukurasa wako ikiwa una makosa ndani yake. Unaweza kudhibitisha kupitia uthibitisho kwamba hauna kosa kubwa yoyote.

Validator ya W3C ni huduma maarufu zaidi ya kuthibitisha msimbo. Wana njia kadhaa za kuthibitisha codes. Unaweza ama kupakia faili au kuingiza moja kwa moja msimbo katika injini yao ya kuthibitisha.

8. Rasilimali Nyingine Zinazosaidia

HTML ni mada ya kujifunza milele. Matoleo zaidi ya updated ya HTML yanaweza kuja mapema. Kwa hiyo unapaswa kukaa updated na kuendelea kufanya. Mazoezi ni nini aces HTML.

Hapa ni baadhi ya rasilimali za manufaa kwako: