Mafunzo ya HTML level 1 somo la 2 (HTML basic level FOR BEGINNERS)

Hili ni somo la pili katika mfululizo wa mafunzo ya html level ya 1 na hapa tutakwenda sasa kunanza somo letu rasmi, kwani katika somo la kwanza umejifunza jinsi ya kuandaa kifaa chako kwa ajili ya mafunzo.

HTML SOMO LA PILI
Karibi tena kwenye mafunzo ya HTML na hili ni somo la pili. Kama hujalipata somo la kwanza tumia linki itakayopatikana mwisho wa posti hii ili uweze kulipata somo la kwanza.

HTML ni nini?
HTML ni kifupisho cha maneno Hypertext Markup language. Hii ni moja ya lugha za kikompyuta yaani computer language. Ni moja katka lugha za kikompyuta zilizo rahisi sana na ni rahisi kuelewa. Pia matumizi yake ni mara nyingi tumekuwa tukikutana nayo kwenye mitandao.

 

Je HTML ina kazi gani?
Kazi kuu ya HTML ni kutengeneza kurasa za website (tovuti) na blog. Kwa mfano ukurasa wa facebook wenyewe una mchanganyiko wa code za HT,L na lugha nyingine za kikompyuta. Siku hizi HTML inaweza kutumika hata katika kutengenezea App za simu na software za kompyuta (desktop App).

 

Je code ni nini?
Code ni maandishi yanayobeba maelekezo ambayo hupewa kompyuta maelekezo hayo ili iweze kufanya shughuli fulani. Lugha zote za kikompyuta hutumia code. Hivyo HTML kwa kuwa ni mojaya lugha za kikompyuta nayo hutumia code, kama ulivyoona kwenye somo lililotangulia.

 

Je HTML ni programming language.
Hapana HTML ni Markup Language, haiingii kwenye programming language kwa sababu sio logic.

 

HTML inafanyaje kazi kwenye blog ama website?
1.Inaboresha muonekano wa ukurasa wa blog ama tovuti kwa mfano kutia rangi, kuweka picha na kupangilia maandishi, paragraph na vichwa vya habari
2.HTML inaweka mpangilio wa ukurasa vyema kwa ajili ya kutumika na lugha nyingine kama php na javascript
3.Hutumika kutengenezea font end yaani ukurasa ambao mtembeleaji wa blog ama website (tovuti) atakutana nao
4.Hutumika kutengeneza fomu ya kukusanya taarifa na kujisajili

 

Je naweza kutengeneza blog ama website mwenyewe kwa kutumia HTML pekee?
Ndio unaweza kutengeneza website (tovuti) kwa html tu na ikawa live na watu wakaitembele. Ila kwa blog, sirahisi utahitajika uchanganye na lugha nyingine za kompyuta kama php ilikupata dynamic page yaani kurasa ambazo zinauwezo wa kufanyiwa update kama kupost, kukoment na kulike n.k

 

Ni nni ukomo wa mafunzo haya?
Ukomo wa mafunzo haya ni kukuwezesha kujifunza HTML, kwa simu yako, uweze kutengeneza website ama kurasa za mtandao kwa simu yako na kuziweka live yaani kuhost. Mafunzo haya yote ni bure na yatakuwa katika hatua kwa hatuwa. Hatuwa ya kwanza ndio hii imeanza na itachukuwa wiki moja. Kisha itafata ya pilie

 

Endelea na somo……..

 

TUANZE SOMO LETU HAPA:
Kwa kuwa umeshajifnza mambo adhaa. Pia umeweza kuandaa simu yako ili kuweza kuendana na somo. Sasa somo letu litaanzia pale ulipo ishia kwenye somo lililopita. Kwanza funguwa App yako TrebEdit, ingia menu kisha workplace kisha bofya jina la project uliotengenez jana. Kisha bofya, utakutana na faili lako la index.html. Bofya hilo faili hapo code za HTML zitafunguka. Kama tumekwenda pamoja, code ambazo ulipest katika somo lililotangulia ni hizi hapa chini:-

 

 

Home Page

Mafunzo ya HTML

Jifunze bure

Haya ni mafunzo ya HTML kwa kutumia simu

 

 

 

From
Bongoclass

 

 

 

 

 

Kama unatumia PC kopi hizo code kisha pest kwenye notepad kisha sevu index.html

 

MPANGILIO WA FAILI LA HTML
1.Sehemu kuu mbili za ukurasa wa HTML
Faili la HTML lina sehemu kuu mbili ambazo ni

na. Katika sehemu hii yandipo ambapo panakaa taarifa muhimu kuhusu faili lako, ikiwepo kichwa cha habari ama maudhui au title hii huwakilishwa na, pia katika sehemu hii yakukaa taarifa zingine kama icon, link, icon, muadndishi, muhutasari kuhusu maudhui na nyinginezo.

 

Taarifa hizi mara nyingi hazionekani kwa watumiaji wa mtandao huo, kwani hazibebi maudhui ila zinabeba mpangilio. Katika taarifa hizi chache kuonekana na watumiaji wa mtanda kwa mfano icon na title.

 

Sehemu ya pili ni

. sehemu hii ndio hubeba malengo ya ukurasa huo. Sehemu hii dio ambayo mtumiaji wa mtandao atakutana nayo na kuvinjari. Kama unataka kuandika ukurasa wa website unaohusu faida za hewa, basi maudhui yako utayaweka kwenye sehemu hii.

 

2.Mpangilio wa code katika ukurasa wa HTML
Ukiangalia kwa ukaribu code hizo hapo juu utajifunza kuwa:-
1.Ukurasa wa HTML mwanzoni kabisa unaanza na code hizi
kazi ya code hizi ni kutambulisha aina ya faili hili, ambapo aina yenyewe ni HTML. Kuna aina nyingi za mafaili, kwa mfano microsoft word kuna doc na docx, pia kuna pdf kwenye adobe, kuna .apk kwenye android, kuna php kwenye faili la php. Sasa tunapozungumzia HTML aina ya faili lake ni html. Hivyo lazima useme kuiambia kompyuta ama kivinjari cha simu kuwa faili linalokwenda kuunguliwa ni aina ya html na hii ndio maana ya hii code

 

2. Kisha kuna code hizi:-

 

Code hii hutumika kutambulsha lugha itakayotumika kwenye faili hilo. Kma ni kiswanhili badili “en” kuwa “sw” kwa mfano

 

3.Kisha zinafata code hizi

code hii inatambulisha kuwa sasa tupo kwenye sehemu ya kwanza ya HTML ambayo nina ndani ya sehemu hii utakuta kuna code hiiHome Page kazi yake ni kutambulisha title ya faili ama maudhui. Baada yako utaona kuna code hiiukiangalia vyema mwanzo kulikuwa nakwa kuanza na < lakini sasa kuna kwa kuanzwa na na mwisho tunamalina na hivyo hivyo hapo kwenyetulimaliza na baada ya kuandika title yetu ambayo I Home Page kama ilivyoHome Page

 

4.Kisha inaanza

Code hii kazi yake ni kutueleza kuwa sasa tupo kwenye body, hapa ndipo ambapo tunatakiwa kuweka maudhui ya faili letu. Ndani ya hiiutaona code zifuatazo:-

 

 

hii kazi yake ni kwa ajili ya kuandika heading 1 kama ilivyo kwenye microsoft word. Utaona imeanza na

kisha baada ya kuweka maudhui ikamalizwa ana ikafungwa kwa

kama ilvyo

Mafunzo ya HTML

kwa hiyo kichwa cha habari cha maudhui ya faili hili ni Mafunzo ya HTML kama inavyoonekana hapo. Heading ambayo itaandikwa kwa

sikuzote itakuwa kubwa zaidi kuliko ya

,

hadi

kama inavyoonekana kwenye mfano utaona maandishi ya kwanza makubwa kuliko yanayofata, angalia pic hapo chini

 

 

5.Kissha inafata

kama ilivyo

basi

ni sawa tofauti yao ni ukubwa wa maandishi. Zote ni heading lakini ya

maandishi yako ni madogo kidogo kulinganisha na

 

 

 

Baada ya code ya

utaona kuna code nyingine ya hii hazi yake ni kupigia maandishi msitari yaani ku underline. Hivyo maandishi yote yaliyo ndani ya na yatakuwa yamepigiwa msitari. Angalia kwenye pic utaona maneno “Jifunze bure” yamepigiwa msitari

 

 

6.Kisha utaona code nyingine ya

hii kazi yake ni paragraph. Maudhui yote yatakayokuwa kati ya

na

yatahesabika kuwa ni paragraph kama vile unavyoandika paragraph kwenye microsoft office. Hivyo

Haya ni mafunzo ya HTML kwa kutumia simu

hutambulika kama paragraph.

 

 

7.Baada ya hapo utaona kuna nafasi kama tatu zimerukwa. Hapo pametumiwa code ya ku break line kama ilivyo kwenye microsoft office. Kwenye html code ya ku break line ni
yaani unakata msitari na kuanza msitari mpya. Ukiangalia vyema utaona
zimejirudia tatu hapo


hii inamaanisha kuna mistari mitatu imekatwa.

 

8.Utaona maneno ya mwisho yamelala ama yamefanyiwa italic. Kwenye html code inayotumika kufanya italic ni hivyo maneno yote yaliyo kati ya na yatalala kidogo tofauti na mengine. Kama ilivyo kwenye pic utaona maneno From
Bongoclass yamelala kidogo.

 

Baada ya kumalizakuweka maudhui kwenye

sasa tunaifunga kwa
Baada ya hapo tunamaliza kufunga faili letu kwa

 

TAG ZA ELEMENT
Katika maelezo hapo juu hizo code

, ,,,

,

, , na
huitwa tag (opening tag) na zile zilizofunga kwa huitwa closing tag kwa mfano , ,

, , , , huitwa closing tag kuna tag nyingine hazina closing tag kama

 

 

Mkusanyiko wa tag na kilichomo kwenye tag huitwa element. Kwa mfano

Home Page hii huitwa element. Kwa ufupi ni kwa element imekusanya opening tag, maudhui na closing tag. Hivyo mkusanyiko wa ambayo ndio opening tag yaani tag ya kanzia, na maudhui ambayo ni “Home Page” na tag ya kumalizia au cloging tag ambayo ni kwa pamoja hutwa element.

 

Tukutane somolinalofata tutakapojifunza taga muhimu 20 kwenye faili la HTML ambazo hutumika kwenye maandishi ya kila siku.

 

Mafuzo haya yamekujia kwa hisani ya
bongoclass.com
Web: www.bongoclass.com
Email: mafunzo@bongoclass.com

 

 

Nyuma Endelea

Umeionaje Makala hii.. ?