Primer lesson: lugha ya alama ya hypertext

Somo: Lugha ya Alama ya HyperText (HTML)

HTML inasimama kwa Lugha ya Kuweka alama ya HyperText . Ni lugha maalum inayotumika kutengeneza kurasa za wavuti. Unapotembelea tovuti, kompyuta husoma HTML ili kukuonyesha maneno, picha na viungo. Fikiria HTML kama vizuizi vya ujenzi wa tovuti. Kama vile unavyotumia vipande vya Lego kujenga nyumba au gari, sisi hutumia lebo za HTML kuunda ukurasa wa wavuti.

HTML ni nini?

HTML ni msimbo unaoiambia kompyuta jinsi ya kuonyesha maandishi, picha, video na viungo kwenye ukurasa wa wavuti. Ni kama kutoa maagizo kwa rafiki ambaye anakuchorea picha. HTML hutumia maneno ndani ya mabano ya pembe, ambayo huitwa tags , kuashiria mwanzo na mwisho wa sehemu ya ukurasa wa wavuti.

Kwa nini HTML ni Muhimu?

Kila tovuti unayotembelea hutumia HTML kwa njia fulani. Bila HTML, hakungekuwa na kurasa za wavuti kwako kuona. HTML husaidia kupanga maudhui na huiambia kompyuta jinsi ya kuonyesha ukurasa. Ni jambo la kwanza kabisa mtu kujifunza katika ukuzaji wa wavuti kwa sababu hufanya mtandao kufanya kazi!

Muundo wa Msingi wa Hati ya HTML

Hati ya HTML ina muundo maalum. Inaanza na tamko linaloitwa <code><!DOCTYPE html></code> ambalo huiambia kompyuta ukurasa unatumia HTML. Kisha hati imegawanywa katika sehemu kuu mbili: kichwa na mwili.

Hati rahisi sana ya HTML inaonekana kama hii:

<code><!DOCTYPE html>
<html>
<kichwa>
<title>Ukurasa Wangu wa Kwanza wa Wavuti</title>
</ kichwa>
<mwili>
<p>Hujambo, ulimwengu!</p>
</ mwili>
</html> </code>

Katika mfano huu, sehemu ya <head> inatoa kichwa cha ukurasa, na sehemu ya <body> ndipo unapoweka maudhui yanayoonekana kwenye skrini.

Lebo za HTML na Vipengele

HTML hutumia vitambulisho kuashiria sehemu tofauti za ukurasa wa wavuti. Lebo ni neno ndani ya mabano ya pembe. Kwa mfano, <code><p></code> huiambia kompyuta kwamba kinachofuata ni aya. Unapomaliza aya, unatumia lebo ya kufunga, <code></p></code>, ili kuonyesha mwisho.

Kipengele katika HTML kinajumuisha lebo ya ufunguzi, baadhi ya maudhui, na lebo ya kufunga. Kwa mfano:

Kila lebo huelekeza kivinjari cha wavuti jinsi ya kuonyesha yaliyomo.

Lebo za kawaida za HTML

Kuna vitambulisho vingi katika HTML. Baadhi ya zile za kawaida ni:

<html> - Lebo hii inaiambia kompyuta kuwa hii ni hati ya HTML.
<head> - Sehemu hii huhifadhi taarifa kuhusu ukurasa ambayo haijaonyeshwa moja kwa moja kwenye skrini.
<title> - Lebo hii inaweka kichwa cha ukurasa wa wavuti na inaonekana kwenye kichupo cha kivinjari.
<body> - Lebo hii ina maudhui yanayoonekana ya ukurasa wa wavuti.
<p> - Lebo hii inaunda aya, ambayo ni kizuizi cha maandishi.
<h1> hadi <h6> - Lebo hizi huunda vichwa. <h1> ndicho kichwa kikubwa zaidi, huku <h6> ndicho kidogo zaidi.
<a> - Lebo hii inatumika kuunda viungo vya kurasa zingine za wavuti.
<img> - Lebo hii inatumika kuongeza picha kwenye ukurasa.

Sifa za HTML

Sifa hutoa maelezo ya ziada kuhusu kipengele cha HTML. Zinaongezwa kwa lebo ya ufunguzi ndani ya mabano ya pembe ya lebo. Sifa zinazojulikana zaidi ni src na alt zinazotumiwa na tagi ya picha.

Kwa mfano, ili kuongeza picha, unaweza kuandika:

Hapa, src huambia kivinjari faili ya picha iko wapi, na alt hutoa maelezo ya picha ikiwa haiwezi kuonyeshwa.

Sehemu za kichwa na mwili

Hati ya HTML imegawanywa katika sehemu mbili:

Sehemu ya Kichwa: Hii ina taarifa kama kichwa cha ukurasa na viungo vya laha za mitindo. Ni kama kituo cha udhibiti ambacho kinashikilia maagizo ya ukurasa.
Sehemu ya Mwili: Sehemu hii inaonekana kwenye ukurasa wa wavuti. Maandishi, picha, na viungo vyote unavyoona kwenye ukurasa vimeandikwa ndani ya mwili.

Kuunda Viungo katika HTML

Viungo hukuruhusu kuruka kutoka ukurasa mmoja hadi mwingine. Katika HTML, tunaunda viungo kwa kutumia lebo ya <a> . Sifa href iliyo ndani ya tepe huambia kivinjari mahali kiungo kilipo.

Kwa mfano:

<code><a href="https://www.example.com">Tembelea Example.com</a></code>

Unapobofya kiungo hiki, kivinjari chako kitafungua tovuti example.com .

Kuongeza Picha kwenye Ukurasa wa Wavuti

Picha huchangamsha ukurasa wa wavuti na kuufanya kuvutia zaidi. Ili kuongeza picha, unatumia lebo ya <img> . Kumbuka, lebo ya <img> haina lebo ya kufunga.

Hivi ndivyo unavyoongeza picha:

Nambari hii inaambia kivinjari kuonyesha picha ya alizeti. Sifa ya src inaelekeza eneo la picha, na sifa ya alt inatoa maelezo ya picha.

Kutumia Orodha katika HTML

Orodha hupanga habari katika muundo nadhifu. Kuna aina mbili kuu za orodha katika HTML:

Orodha Iliyoagizwa: Orodha hii imehesabiwa. Inatumia <ol> tag.
Orodha Isiyopangwa: Orodha hii hutumia vidokezo. Inatumia <ul> tag.

Hapa kuna mfano wa orodha isiyopangwa:

<code><ul>
<li>Apple</li>
<li>Ndizi</li>
<li>Cherry</li>
</ul> </code>

Na hapa kuna mfano wa orodha iliyoagizwa:

<code><ol>
<li>Kwanza</li>
<li>Pili</li>
<li>Tatu</li>
</ol> </code>

Majedwali katika HTML

Majedwali husaidia kuonyesha maelezo katika safu mlalo na safu wima. Ni muhimu unapohitaji kulinganisha data au orodha ya vipengee kwenye gridi ya taifa.

Hapa kuna mfano rahisi wa jedwali la HTML:

<code><table border="1">
<tr>
<th>Jina</th>
<th>Umri</th>
</ tr>
<tr>
<td>Alice</td>
<td>10</td>
</ tr>
</meza> </code>

Katika jedwali hili, <tr> inafafanua safu mlalo ya jedwali, <th> inatumika kwa kichwa cha jedwali (maandishi ya ujasiri), na <td> inatumika kwa data ya jedwali (seli).

Kufanya kazi na Multimedia: Sauti na Video

HTML pia hukuruhusu kuongeza media titika kama sauti na video. Ukiwa na lebo ya <audio> , unaweza kujumuisha faili za sauti. Ukiwa na lebo ya <video> , unaweza kupachika vicheza video kwenye ukurasa wako wa wavuti.

Huu hapa ni mfano wa msimbo wa kupachika video:

Msimbo huu huunda kicheza video chenye vitufe vya kucheza, kusitisha au kubadilisha sauti. Sifa ya udhibiti huambia kivinjari kuonyesha vitufe hivi.

HTML katika Maisha ya Kila Siku

Kila tovuti kwenye mtandao imejengwa kwa HTML. Fikiria kuwa unatembelea tovuti ya shule yako, tovuti ya mchezo wa kufurahisha au kusoma hadithi mtandaoni. HTML inafanya kazi nyuma ya pazia ili kupanga maandishi, picha na maudhui mengine ili uweze kuyaona vizuri.

Kwa mfano, unapoona picha ya mhusika wako wa katuni unayempenda mtandaoni au ubofye kiungo ili kusoma zaidi kuhusu mada ya kufurahisha, HTML ipo ili kufanya kazi hiyo.

Mfano Rahisi wa Mradi wa HTML

Hebu tuangalie mradi rahisi. Fikiria unataka kutengeneza ukurasa mdogo wa wavuti kuhusu mnyama unayempenda, kama paka. Unaweza kujumuisha kichwa, aya kuhusu paka, picha, na hata kiungo cha tovuti yenye ukweli wa kufurahisha wa paka.

Nambari yako ya HTML inaweza kuonekana kama hii:

<code><!DOCTYPE html>
<html>
<kichwa>
<title>Mnyama Nimpendaye</title>
</ kichwa>
<mwili>
<h1>Yote Kuhusu Paka</h1>
<p>Paka wanacheza na laini. Wanapenda kulala na kuonja. Watu wengi hupenda kuwa na paka kama kipenzi.</p>
<img src="cat.jpg" alt="A cute cat">
<a href="https://www.catfacts.com">Pata maelezo zaidi kuhusu paka</a>
</ mwili>
</html> </code>

Mradi huu unatumia vichwa, aya, picha na viungo. Inaonyesha jinsi HTML inatumiwa kuunda ukurasa kamili wa wavuti na sehemu nyingi.

HTML, CSS, na JavaScript

Ingawa HTML inaunda muundo wa ukurasa wa wavuti, kuna zana zingine zinazofanya tovuti kuonekana na kuishi kwa njia za kufurahisha.

CSS (Laha za Mtindo wa Kuachia) hutumiwa kuongeza rangi, kubadilisha fonti, na kurekebisha mpangilio wa ukurasa wa wavuti. Inafanya ukurasa kuwa mzuri.
JavaScript ni lugha ya programu inayoongeza mwingiliano kwenye ukurasa. Inaweza kufanya mambo kusonga au kujibu unapobofya kitufe.

Ingawa leo tunajifunza kuhusu HTML, kujua kuhusu CSS na JavaScript hutusaidia kuelewa jinsi tovuti zinatengenezwa.

Lebo zaidi za HTML na Matumizi Yake

Unapochunguza HTML, utapata vitambulisho vingine vingi. Hapa kuna machache zaidi ya kujua:

<div> - Lebo hii inatumika kugawanya ukurasa katika sehemu tofauti. Inasaidia kuweka maudhui yakiwa yamepangwa.
<span> - Lebo hii inakusanya vipande vidogo vya maandishi au vipengele vingine. Ni sawa na <div> lakini inafanya kazi na vitu vidogo.
<br> - Lebo hii inaongeza mapumziko ya mstari. Ni kama kubonyeza kitufe cha Ingiza katika kichakataji maneno.
<strong> - Lebo hii hufanya maandishi kuwa ya ujasiri kuonyesha ni muhimu.
<em> - Lebo hii hufanya maandishi kuwa ya italiki ili kuongeza msisitizo.

Lebo hizi hukupa udhibiti zaidi wa jinsi maudhui yako yanavyoonekana kwenye ukurasa wa wavuti.

Maendeleo ya HTML

HTML imebadilika sana tangu ilipoundwa mara ya kwanza. Lebo nyingi mpya na vipengele vimeongezwa kwa muda. Kila toleo jipya la HTML hurahisisha kuunda tovuti changamano na nzuri. Leo, HTML hufanya kazi pamoja na CSS na JavaScript ili kuunda tovuti za kisasa ambazo zinafurahisha kutumia na kuonekana bora.

Mageuzi haya yanamaanisha kuwa HTML ni rahisi kujifunza na ina nguvu ya kutosha kuunda kila kitu kutoka kwa kurasa rahisi za wavuti hadi programu changamano za wavuti.

Kukaa Salama Mtandaoni

Ingawa kujifunza HTML ni jambo la kufurahisha, ni muhimu kukaa salama kwenye mtandao kila wakati. Unapotembelea tovuti au kuchunguza maudhui ya mtandaoni, kumbuka kuuliza kila mara usaidizi kwa mtu mzima ikiwa huna uhakika kuhusu jambo fulani. Usalama wako huja kwanza, na kujifunza HTML kunapaswa kuwa jambo la kufurahisha na salama kila wakati.

Mapitio: Masharti Muhimu ya HTML

Hebu tuangalie baadhi ya maneno muhimu ambayo umejifunza leo:

HTML: Lugha ya Alama ya HyperText, lugha inayotumika kuunda kurasa za wavuti.
Lebo: Neno katika mabano ya pembe ambayo huiambia kompyuta ni sehemu gani ya ukurasa ionyeshe. Kwa mfano, <code><p></code> hutengeneza aya.
Kipengele: Seti kamili inayojumuisha lebo ya ufunguzi, maudhui na lebo ya kufunga.
Sifa: Maelezo ya ziada yameongezwa ndani ya lebo, kama vile <code>src</code> au <code>alt</code> katika tagi ya picha.
Kiungo: Kimeundwa kwa <code><a></code> tagi kuunganisha ukurasa mmoja hadi mwingine.

Maombi ya Ulimwengu Halisi

HTML inatumika katika mipangilio mingi ya ulimwengu halisi. Hapa kuna baadhi ya mifano:

Tovuti za Shule: Shule hutumia HTML kushiriki ratiba, kazi ya nyumbani na habari na wanafunzi na wazazi.
Hadithi na Michezo ya Mtandaoni: Tovuti zilizo na hadithi za kufurahisha au michezo hutumia HTML kuonyesha picha, maandishi na video.
Tovuti za Biashara: Maduka na makampuni mengi ya ndani yana tovuti zilizojengwa kwa HTML ili kuonyesha bidhaa na huduma zao.
Kujifunza kwa Mwingiliano: Tovuti za elimu zinazokusaidia kujifunza mambo mapya zinatengenezwa kwa HTML pamoja na zana zingine kama vile CSS na JavaScript.

Mifano hii inaonyesha jinsi HTML ni chombo muhimu sana katika sehemu nyingi za maisha ya kila siku.

Muhtasari wa Mambo Muhimu

Leo, tulijifunza kuwa HTML ni fupi kwa Lugha ya Kuweka Matini ya Hypertext . Ni lugha ya msingi inayotumiwa kuunda kurasa za wavuti. Hapa kuna mambo muhimu ya kukumbuka:

HTML huunda muundo wa ukurasa wa wavuti kwa kutumia vitambulisho.
Muundo msingi ni pamoja na tamko la aina ya hati, na html , head , na lebo za mwili .
Lebo huja kwa jozi: lebo ya ufunguzi na lebo ya kufunga, na yaliyomo katikati.
Sifa kama vile src na alt hutoa maelezo ya ziada kuhusu vipengele.
Lebo za kawaida ni pamoja na <p> kwa aya, <a> kwa viungo, <img> kwa picha, na lebo za vichwa kama <h1> hadi <h6> .
Orodha na majedwali husaidia kupanga taarifa kwenye ukurasa wa wavuti.
Kurasa za kisasa za wavuti hutumia HTML pamoja na CSS kwa mtindo na JavaScript kwa mwingiliano.

HTML ndio msingi wa kila tovuti unayoona kwenye mtandao. Ukiwa na vizuizi rahisi vya ujenzi kama vile vitambulisho na sifa, unaweza kuunda kurasa za kufurahisha na shirikishi. Unapoendelea kujifunza, utaona jinsi HTML inavyosaidia kuleta uhai wa kurasa za wavuti, na kufanya mtandao kuwa mahali muhimu na kusisimua pa kuchunguza.

lugha ya alama ya hypertext