MAFUNZO YA HTML LEVEL 1

HTML SOMO LA KWANZA
HTML ni ufupisho wa maneno yanayosomeka kama:-
Hypertext
Markup
Language

Ni lugha ya komputa inayotumika katika kutengenezea kurasa za tovuti (website) ama blog.Inaungana na lugha nyingine katika kuboresha kurrasa za tovuti ama blog na kuzifanya ziweze kufanya kazi iliyokusudiwa vyema. Unaweza kutumia HTML tu ukatengeneza website yako bila ya lugha nyingine. Hata hivyo muonekano wake hautakuwa vyema sana kama hutatumia nyinggine.

Je na wewe una ndoto za kuwa na blog ama website uliyoitengeneza wewe mwenyewe. Mafunzo haya ni kwa ajili yako. Katika mafunzo haya utajifunza namna ya kutengeneza website yako kupitia kiganja chako yaani simu yako ya mkononi. Kama utakuwa na kompyuta hatutakuacha pia.

Somo hili la kwanza utajifunza namna ya kuandaa simu yako kwa ajili ya kutengeneza website, ama kwa ajili ya kutumia HTML. Kama tutaenda vyema na mafunzo haya hadi mwisho nakuhakikishia kama Mwenyezi Mungu akitujaalia nguvu, uwezo na uhai, utaweza kutengeneza website yako na kuiweka live.

Muda wa masomo haya kwa hatuwa za Awali (Basics) itakuwa na wiki moja. Kisha baada ya hapo hatuwa ya pili ya mafunzo itaendelea. Tafadhali kuwa tayari kujifunza, kuwa muulizaji na mchangiaji:

VIGEZO VYA KUJIFUNZA:
1.Kuwa na simu ya smartphone
2.Uwe unajuwa kusoma na kuandika
3.Kuwa tayari kujifunza
4.Kuwa mjanja
5.Uwe mwenye kufanyi akazi (fanya mazoezi)

NAMNA YA KUANDAA SIMU YAKO:
1.Download App inayoitwa TrebEdit. Tumia link hii https://play.google.com/store/apps/details?id=com.teejay.trebedit
2.Funguwa App yako kisha bofya Menu
3.Bofya palipoandikwa Workplace
4.Bofya kitufe chenye alama ya kujumlisha chini
5.Kisha bofya palipandikwa New Project
6.Andika jina la Project (mimi natumia HTML) kisha bofya save.
7.Ingia kwenye project uliotengeneza kwa kubofya jina lake, ukurasa mpya utafunguka
8.Bofya tena kitufe cha alama ya kujumlisha
9.Bofya palipoandikwa new folder (hapa tunatengeneza folda la kuweka picha tutakazokuja kuzitumia kwenye tovutu tutakayotengeneza)
10.Andika jina la folda tumia image kisha bofya save.
11.Baada ya hapo rudi nyuma hatuwa moja kwenye project yako.
12.Bofya tena jina la project yako
13.Bofya kitufe cha alama ya kujumlisha
14.Bofya palipandika New file (hapa ndipo tutakapoanzia kuweka code za kutengeneza tovuti yetu)
15.Utatkiwa kuandika jina la file hapo andika index.html (hili ndio faili letu la kwanza la tovuti yetu.
16.Bofya faili hilo ulilolitengeneza, utaona limeandika index.html
17.Baada ya kufunguka kuna maneno chini yameandika html snippet, bofya hayo maneno
18.Ukursa wako sasa utaona una code HONGERA SANA KWA KUFIKA HATUWA HII
19.Juu ya ukurasa kuna kibatani cha kusave, kimefanana na kile cha kwenye microsoft office. Bofya hicho kibatani, hapo utakuwa umesave code zilizopo hapo.
20.Kuna kibatani kingni cha kuplay kimefana na kile tunachotumia kwenye media player. Bofya hicho kupreview code zako.
21.Utaona ukurasa mtupu. Vyema sasa fanya hivi rudi nyuma kisha:-
22.Tafuta haya maneno <title>Page title</title> kisha yabadilishe yasomeka <title>Home Page</title>
23.Chini ya maneno haya <body> weka maneno haya
<h1>Mafunzo ya HTML</h1>
<h2><u>Jifunze bure</u></h2>
<p>Haya ni mafunzo ya HTML kwa kutumia simu</p>
<br><br><br>
<i>From <br>Bongoclass</i>
24.Save
25.Bofya kitufe cha kupyay ili kuangalia kilichotokea baada ya kuweka hizo code
26. Hongera sana ukurasa wako wa HTML umekamilika. Unaweza kubadili maneno kwenye hizo code hapo juu kweka yako.

Somo la pili tutaanza kujifunza hizo code ulizoziweka kazi yake na vipi zinafanya kazi. Kama umefanikiwa hatuwa zote hizo tupe maoni yako, ama tutumie screenshot yako.

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.
Somo la kwanza utalipata kwa link hii https://web.facebook.com/groups/androbongo/permalink/568341711186808/

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:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home Page</title>
</head>
<body>
<h1>Mafunzo ya HTML</h1>
<h2><u>Jifunze bure</u></h2>
<p>Haya ni mafunzo ya HTML kwa kutumia simu</p>
<br><br><br><h2>
<i>From <br>Bongoclass</i>
</body>
</html>

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 <head> na <body>. Katika sehemu hii ya <head> ndipo ambapo panakaa taarifa muhimu kuhusu faili lako, ikiwepo kichwa cha habari ama maudhui au title hii huwakilishwa na <title>, pia katika sehemu hii ya <head> kukaa 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 <body>. 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
<!DOCTYPE html> 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 <!DOCTYPE html>

2. Kisha kuna code hizi:-
<html lang="en">
Code hii hutumika kutambulsha lugha itakayotumika kwenye faili hilo. Kma ni kiswanhili badili “en” kuwa “sw” kwa mfano <html lang="sw">

3.Kisha zinafata code hizi
<head> code hii inatambulisha kuwa sasa tupo kwenye sehemu ya kwanza ya HTML ambayo ni <head> na ndani ya sehemu hii utakuta kuna code hii <title>Home Page</title> kazi yake ni kutambulisha title ya faili ama maudhui. Baada yako utaona kuna code hii </head> ukiangalia vyema mwanzo kulikuwa na <head> kwa kuanza na < lakini sasa kuna </head> kwa kuanzwa na </ kazi ya utofauti huu wa < na </ ni kuonyesha kufunga na kufungua, ama mwanzo na mwisho. Hivyo mwanzo tunaanzana <head> na mwisho tunamalina na </head> hivyo hivyo hapo kwenye <title> tulimaliza na </title> baada ya kuandika title yetu ambayo I Home Page kama ilivyo <title>Home Page</title>

4.Kisha inaanza <body>
Code hii kazi yake ni kutueleza kuwa sasa tupo kwenye body, hapa ndipo ambapo tunatakiwa kuweka maudhui ya faili letu. Ndani ya hii <body> utaona code zifuatazo:-

<h1> hii kazi yake ni kwa ajili ya kuandika heading 1 kama ilivyo kwenye microsoft word. Utaona imeanza na <h1> kisha baada ya kuweka maudhui ikamalizwa ana ikafungwa kwa </h1> kama ilvyo
<h1>Mafunzo ya HTML</h1> kwa hiyo kichwa cha habari cha maudhui ya faili hili ni Mafunzo ya HTML kama inavyoonekana hapo. Heading ambayo itaandikwa kwa <h1> sikuzote itakuwa kubwa zaidi kuliko ya <h2>, <h3> hadi <h6> kama inavyoonekana kwenye mfano utaona maandishi ya kwanza makubwa kuliko yanayofata, angalia pic hapo chini

5.Kissha inafata
<h2> kama ilivyo <h1> basi <h2> ni sawa tofauti yao ni ukubwa wa maandishi. Zote ni heading lakini ya <h2> maandishi yako ni madogo kidogo kulinganisha na <h1>

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

6.Kisha utaona code nyingine ya
<p> hii kazi yake ni paragraph. Maudhui yote yatakayokuwa kati ya <p> na </p> yatahesabika kuwa ni paragraph kama vile unavyoandika paragraph kwenye microsoft office. Hivyo <p>Haya ni mafunzo ya HTML kwa kutumia simu</p> 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 <br> yaani unakata msitari na kuanza msitari mpya. Ukiangalia vyema utaona <br> zimejirudia tatu hapo <br><br><br> hii inamaanisha kuna mistari mitatu imekatwa.

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

Baada ya kumalizakuweka maudhui kwenye <body> sasa tunaifunga <body> kwa </body>
Baada ya hapo tunamaliza kufunga faili letu kwa </html>

TAG BA ELEMENT
Katika maelezo hapo juu hizo code <html>, <head>, <title>, <body>, <h1>, <h2>, <u>, <I> na <br> huitwa tag (opening tag) na zile zilizofunga kwa </> huitwa closing tag kwa mfano </title>, </head>, </h1>, </h2>, </u>, </u>, <body> </html> huitwa closing tag kuna tag nyingine hazina closing tag kama <br>

Mkusanyiko wa tag na kilichomo kwenye tag huitwa element. Kwa mfano <title> Home Page</title> hii huitwa element. Kwa ufupi ni kwa element imekusanya opening tag, maudhui na closing tag. Hivyo mkusanyiko wa <title> ambayo ndio opening tag yaani tag ya kanzia, na maudhui ambayo ni “Home Page” na tag ya kumalizia au cloging tag ambayo ni </title> 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: [email protected]

#bongoclass #html

HTML SOMO LA TATU
Karibu tena kwenye mafunzo ya HTML. Na hili ni somo la tatu. Kama bado hujalipata somo la kwanza na la pili, tumia link hapo chini kufunguwa masomo hayo. Katika somo hili la tatu tutakwenda kuelezea baadhi ya tag za HTML ambazo hutumika mara nyingi katika kuandika makala.

Katika somo lililopita tuliona maana ya tag, na namna ambavyo tag hufanya kazi. Tag zipo za kufungua ambazo huanzwa na alama hii < na zipo tag za kufunga ambazo huanzwa na alama hizi </. pia katika somo lililotangulia tuliona maana ya element katika html. Element tuliona kuwa ni mkusanyiko wa tag na maudhui yaliyo ndani ya tag kwa mfano <p> hello </p> katika code hii kuna tag ya kufungua ambayo ni <p> na kuna maudhui ambayo ni “hello” pia kuna tag ya kufunga ambayo ni </p> kwa pamoja tunapata element.

Somo la kwanza:
https://web.facebook.com/groups/androbongo/permalink/568341711186808/
Somo la pili
https://web.facebook.com/groups/androbongo/permalink/568958481125131/

Tag zipo nyingi sana ambazo tunazitumia katika uandishi. Kama unavyotumia microsoft katika kuandika basi kula unachokifanya pale kuna tag yake. Kwa mfano unapopigia msitari, kuna tag ya kufanya hivyo. N.k

TAG 25 MUHIMU KATIKA UANDISHI
1.<h1> kwa ajili ya heading. Tag hizi huanzia <h1> hadi <h6>
2.<p> kwa ajili ya kuandika paragraph
3.<b> kwa ajili ya kubold
4.<u> kwa ajili ya kupigia msitari
5.<hr> kupiga msitari kwenye faili, bila ya kupigia herufi maalumu
6.<i> kwa ajili ya kufanya italic
7.<sup> kwa ajili ya kuandika vipeo na vipeuo
8.<sub> kuandika kama vipeua vile vya chini kama unavyoandika alama za kiemikali
9.<code> kwa ajili ya kuandika code text
10.<tt> kwa ajili ya kuandika tipewriter text
11.<small> kwa ajili ya kuandika maandishi madogo
12.<em> kwa ajili ya kuwekea mkazo maandishi (hufanana na kubold)
13.<strong>Kwa ajili ya kusisitiza zaidi (hufanana na kubold)
14.<mark>Kwa ajili ya kumark maandishi
15.<s>kwa ajili ya kukata maneno
16.<q> kwa ajili ya kunukuu maneno yaani kukata msitari na kuanza mpya
17.<br> kubreak line yaani unakata msitari na kuanza kuandika msitari mpya. Mfan wake ni kama unavyotumia batani ya enter kwenye keyboard za simu ama kompyuta wakati wa kuandika.
18.nbsp kwa ajili ya kuruka nafasi ama
19.<a> kwa ajili ya kuweka link
20.<button> hutumika kuweka batani
21.<pre> hutumika kuandika mashairi ama kuonyesha text kama zilivyo kutoka kwenye faili la html
22.<form> kwa ajili ya kutengeneza fomu
23.<img hutumika katika kuweka image
24.<div> kufanya text block
25.<span> hutumika kugroup maandishi kwenye paragraph.

Unaweza kuanza kuzifanyika kazi tag hizi. Usisahau kufunga tag hizo. Katika somo linalofata tutaona namna ambavyo tag zote hizi zinavyofanya kazi kwenye faili lako. Endelea kufuatilia somo hili. Lengo la tag hizi ni kukusaidia kuandika faili lako la html na likakuletea matokeo kama vile faili limeandikwa kwenye word processor kama microsoft word ama wps n.k

Unawezakuanza kuzifanyia kazi tag hizo hapo juu. Kwa kutumia mifano iliyotangaliak katika somo lililopita, chekilinki hapo juu ya masomo yaliyopita, unaweza kufany amazoezi mwenyewe bila hata ya kusubiri somo lijalo. Ningependa sana kama utashea screenshot za mazoeziyako kupitia koment.

Ndugu msomaji, nikupe siri ya mwanzo wa somo hili. Sababu ya kuanzisha somo hili I baada ya mafunzo ya kutengeneza Android App kwa kutumua simu. Tulishaanza hatuwa ya kwanza na tumetengeza Appp kwa kutumia link. Sasa changamoto ni kuwa somo lililotakiwa kufata ni kutengeneza App yenye ubora. Hapa ndipo ikaja haja ya angalau kujifunza HTML ili tuweze kutengeneza App nzurikwa kutumia data zetu wenyewe na kwa namna tunavyotaka.

Hivyo ni matarajio yangu baada ya mafunzo haya ya siku chache (basic) tutarudi tena kwenye darasa letu la kutengeneza App kwa kutumia simu. Kisha somo hili litaweza kuendelea (advanced) baada ya kuonekana haja zaidi. Kwa wale walio na haja ya kutengeneza website zao ama blog, tutaendelea kuwa pamoja nao katika mafunzo haya.

Mafunzo haya yamekujia kwa hisani ya:-
Bongoclass.com
Web: www.bongoclass.com
Email: [email protected]

#bongoclass #html

HTML SOMO LA NNE
Karibu tena lwenye mafunzo haya ya HTML lugha ya kompyuta inayotumika katika kutengenezea website, blog na web application. Html hutumika na mchanganyiko wa lugha nyingine za kompyuta kutengeneza software na system. Hata hivyo unaweza kutumia html peke yake kutengeneza website (tovuti) na ikawa live watu wakaweza kuitembelea.

Je na kama na wewe ni mmoja kati ya wenye ndoto za kuweza kufanya haya, karibu tena kwenye somo hili. Katika somo la kwanza hadi la tatu tuliona namna ambavyo HTML inavyofanya kazi, pia tuliona mpangilio wa faili lake na tukaona tag na element. Katika somo la tatu tulijifunza code 25 muhimu zinazotumuka katika uandidhi. Unaweza kupata somo la kwanza la pili na tatu kwenye linki hizo hapo chini:-

Somo la kwanza:
https://web.facebook.com/groups/androbongo/permalink/568341711186808/

Somo la pili
https://web.facebook.com/groups/androbongo/permalink/568958481125131/

Somo la tatu
https://www.facebook.com/groups/androbongo/permalink/569707514383561/

Katika somo hili la nne tutaona jinsi ambavyo tag 25 tulizozitaja kwenye somo la tatu zinavyoweza ktumika na kuandikia makala katika ukurasa wa mtandao. Kama utakuwa unatumia kompyuta funguwa note pad kisha fatilia somo hili, tumia notepad kuandikia code kama somo litakavyoonyesha. Kwa wale wanaotumia simu kama mimi, utaratibu umetangulia katika somo la kwanza, unatakiwa utumie App inayojulikana kama TrebEdit ipo playstore, linki utaipata kwenye somo la kwanza.

FILE EXTENTION KATIKA FAILI LA HTML
Tunapozungumzia file extension huwenda likaonekana kama neno gumu, ila kwa ufupi nitolee mifano. Unapotaka kusevu faili katika microsoft office unaweza kusave as document (.doc), extensive document (.docx) portable document file (.pdf). pia katika media kuna (.mp3, .mp4) kwenye web site kuna (.com, .net, .io, .co, .ac). hivyo extension ndio ambayo huiambia kompyuta aina ya faili. Sasa unapoandika faili lako la code za HTML, wakati wa ku save lazima uweke (.html) mfano katika somo la kwanza tulitumia faili tuliloliita “index.html” usisahau kuweka doti.

Sasa funguwa App yako ya Treb editi kisha menu, kisha workplace, kisha click project yako kama tulivyofanya kwenye somo la kwanza na pili. Kisha new file, weka jina mfano “tag.html” kisha save. Click hilo faili, kisha bofya HTML snippet chini, hapo ukurasa mpya wa code utatokea. Kwa watumiaji wa kompyuta kweka code hizi kwenye notepad yako:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tag Muhimu</title>
</head>
<body>

</body>
</html>

Kisa saveas all files kija weka tag.html

Sasa hadi kufikia hapa tupo tayari kuanza somo. Somo
Katika tag zote 25 tulizoziona katika somo la tatu, baadhi yake tutakuja kuziona tena kwenye masomo yajayo kutokana yanahitaji ufafanuzi zaidi. Kwa mgano tag hii <img na <a> hizi tutakuja kuziona zaidi katika somo lijalo. Sasa kama ulishafunguwa TrebEdit yako ama notepad, sasa kopi code hizo hapo chini kisha paste kwenye faili lako ulilolisave kwa jina la tag.html. Kisha previes, kwa kubofya kitufe cha kuplay au click file kwenye komputer litafunguka kama website.

Code zenyewe ni hizi:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tag Muhimu</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading6</h6>
<p>hii ni paragraph</p>
<b>bold</b>
<u>underlined</u>
<hr> msitari<hr>
<i>italic</i> <br>
6<sup>2</sup><br>
H<sub>2</sub>O <br>
<code>code type</code> <br>
<tt>type writer</tt> <br>
<small>small text</small><br>
<em>emphasizing</em> <br>
<strong>strong text</strong> <br>
<mark>marked text</mark> <br>
<s>striked text</s> <br>
<q>quoted text</q> <br>
line<br>break<br>break<br>
wacha nafasi         nafasi <br>
<a href="https://bongoclass.com">link</a><br>
<button>Tabani</button><br>
<pre>
maandishi yatakuwa kama unavyoyaonahapa kwenye cde
mfano:
kama unapoandika mashairi
unataka iwe
kama ilivyo
bila kuharibu mpangilio
wa
vina
</pre> <br>
<form>
<label>Jina kamili</label>
<input type="text" placeholder="enter your name">
</form> <br>
<img src="" alt="picture"> <br>
<div>this is block text</div>
<span>this is inline block text</span>
</body>
</html>

Katika posti ijayo tutakuja kuona namna ya kuweka staili kwenye faili la html, kama kuweka rangi, kupangilia text, kuweka link na kupangilia muonekano wa text. Endelea kufanyia mazoezi tag hizo hapo juu, ili iwe rahisi kuendelea na somo lijalo. Usisite kuuliza swali ambapo hapaposawa.

Mafunzo haya yamekujia kwa hisani ya:
Bongoclass.com
Web: www.bongoclass.com
Email: [email protected]

#bongoclass #html

HTML SOMO LA TANO
Karibu kwa mara nyingine tena katika mafunzo yetu ya HTML na namna ya kutengeneza website (tovuti) na blog. Katika somo lililopita tuliona tag 25 muhimu zinazotumika katika kuandika document na ikawa na muonekano mzuri katika blog ama tovuti yako. Hatika somo hili tutakwenda kuona namna ya kuweka staili kwenye document yako.

Somo hili litakwenda kuangalia yafuatayo:-
1.Kuweka picha
2.Kuweka rangi
3.Kuweka linki
4.Kupangilia position na alignment ya maandishi
5.Kuongeza ukubwa wa herufi
6.Kukoment

Hakikisha umeshapitia masomo yetu manne yaliyotangulia kabla ya kuanza somo hili, hii itakupa uwanja mpana sana wa kuelewa zaidi. Kumbuka masomo haya yanaendeshwa kwa kutumia App inayotambulika kama TrebEdit, link yake utaipata kwenye somo la kwanza ama ingia playstore. Kupata masomo manne yaliyotangulia bofya link za hapo chini.

Somo la kwanza:
https://web.facebook.com/groups/androbongo/permalink/568341711186808/

Somo la pili
https://web.facebook.com/groups/androbongo/permalink/568958481125131/

Somo la tatu
https://www.facebook.com/groups/androbongo/permalink/569707514383561/

somo la nne
https://web.facebook.com/groups/androbongo/permalink/570087814345531/

CODE ZITAKAZOTUMIKA KWENYE SOMO:
Kopi code hizi kisha pestu kwenye faili utakalolipatina staili.html. Maelezo zaidi utayapata hapo chini baada ya hizi code:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>kuweka staili</title>
</head>
<body>
<h1>kuweka picha</h1>
<img src="image/P2.JPEG" WIDTH="100%">

<BR></BR>
<H2>KUWEKA RANGI</H2>
<p style="color:red"> mimi mwekundu</p>

<p style="color:green"> mimi mkijani</p>

<H1>KUWEKA LINK</H1>

<a href="tag.html">tag 25, bofya hapa</a><BR></BR>
<a href="index.html">go to home page</a>

<br><br>
<H1>
Kuongeza ukubwa wa maneno</H1>
<b style="font-size:100">mimi niko kawaida 100%</b>
<br>
<b style="font-size:200%">Ukubwa wa 200%</b>
<br>
<b style="font-size:300%">Ukubwa wa 300%</b>
<br>
<b style="font-size:50%">ukubwa wa 50%</b>

<BR><BR></BR></BR>
<p style="text-align:center;">Nipo kati</p>
<br>
<p style="text-align:left;">Nipo kushoto</p>
<br>
<p style="text-align:right;">Nipo kulia</p>
<br>
<p style="text-align:justify;">Nipo Nimejaa</p>

<h1>KUKOMENT</H1>


</body>
</html>

MAANDALIZI HA SOMO:
Kama tayari App ya Treb Edit unayo:
1.Ingia kwenye App ya Trebedit, nenda menu kisha kwenye project yako bofya kwenye jina hilo, ingia kwenye folda la image, create file, kisha import file, chaguwa picha moja uiclick. Rudi nyuma utaiona picha yako ipo kwenye folda la image.

2.Kwenye folda kuu la project yako create file kkisha lipe jina la “staili.html”. hivyo kwenye folda lako kuu kutakuwa na mafaili matatu moja ni lile na index.html, jingine ni la tag.html na la mwisho litakuwa hili la staili.html. Huwenda ukawa umeweka mafaili mengine ya html. Hakuna shida.

3.Baada ya hapo utakopi code nitakazozileta hapo chini kwenye faili hili la staili.html kisha sevu.

4.Utapreview kwa kubofya kitufe cha kuplay.

5.Endelea na somo sasa kuona namna ambavyo code zinavyofanya kazi

UFAFANUZI WA CODE ZILIZOTUMIKA:
1.Kuweka Picha
Kuweka picha kwenye faili la html tunatumiatag hii <img kisha unaweka source yaani chanzo ambacho hiyopicha itakuwepo. Utafanya hivi kwa kutumia src=” ” ndani ya hizo fungasemi na funguwa semiutaweka jina la faili au picha na jina la folda lilipo kwa mfano picha niliotumiamimi itaitwa P2 na ipokatika fomati ya jpeg, hivyo inasomoka kama P2.jpeg. Ukiweka na jina la folda ilipo utapata image/P2.pjeg. Hivyo tag nzima itasomeka hivi

Hiyo tupu inatosha kuweka icha yako na ikaonekana. Utaona kuna code nimeziongeza kwa ajili ya kupunguza upana wa picha na kuitaka ujae tu kwenye ukurasa bila ya kuzidi. Hivyo nikaongeza width=”100%”> hii kwa ajili ya kuifanya upana wa picha usiwe wa kupitiliza. Hivyo code nzima itasomeka hivi:

<img src=”image/P2.jpeg” width=”100%”> Angalia code na picha nilizoweka.
2.Kuweka rangi
Ili uweke rangi unatakiwa kutumia tag ya <style> ndani ya tag nyingine kwa mfano kwenye tag ya <p> ama <h1> kicha utaweka alama ya = na kutaja rangi unayotaka. Mfano:-
<p style="color:green"> mimi mkijani</p>

Hakikisha unaacha nafasi kutoka tag ya kwanza na tag ya style mfano <p style=” usijefanya <pstyle=” hii haitakupa matokeo mazuri. Unataja jina la rangi ndani ya alama za kufuga na kufunguwa semi mfano “color:green”>. angalia tag ya hapo juu vyema. Unaweza kubadili rangi unayotaka wewe angalia kwenye code hapo chini ama kwenye picha.

3.Kuweka link.
Kuweka linko ni kuunganisha ukurasa mmoja na kurasa nyingine. Mfano ni pale unapoweka linki lika mtu anabofya hiyo linki na inampeleka ukurasa mwingine. Tag inayotumika ni hii<a> kama tulivyoona kwenye rangi hapo juu hapa tunatumia href=”” tunaweka jina la kurasa tunayotaka mtu akiclick aende, jinalikae ndani ya fungua semi izo. Kisha utamaliza na jina la lin, (link text) ni maandishi ambayo mtu atayaona kisha ataclick. Mfano wa code ya kuweka link

< a href=”tag.html”>bofya hapa</a> ukibofya hapa utapelekwa kwenye faili lililozungumzia tag kwenye project yako, kama tulienda sawa toka somo la kwanza. Usisahau kuwacha nafasi kati ya <a na href usijefanya hivi <ahref ni kosa. Jina lazima liandikwe na fmati yake kama .html. Kama faili lopo kwenye folda lake, fanya kama tulivyofanya kwenye picha. Mfano kama faili lipo kwenye folda linaitwa php hivyo link itakuwa <a href=”php/tag.html”>

4.Kuongeza ukubwa wa maneno tunatumia <stayle> kisha font-size. Font-size maana yake ni font size au ukubwa wa maandishi kwa muonekano. Ni rahisi kutumia asilimoa mfano unataka kukuza maandishi kwa asilimia 100% ama 200%, 300%, ama unayapunguza kwa 50% ama 10%. kwa mfano

<b style="font-size:200">Ukubwa wa 200%</b>

5.Kuweka mpangilio
Hapa ni pale tunapoamuwa maandishi yaanzie upande gani ama yakae wapi. Kwa mfano unapoandika unataka baadhi ya maandishi yakae katikati. Na mengine yakae kuanzia kushoto ama yaanzie kulia kama unapoandika kiarabu. Hata hivyo unaweza kutaka yajae kwenye faili. Kwa wale watumiaji wa microsoft office utanipata vyema.

Kufanya hivi tunatumia style kisha text-align kumaanisha text alignment.kisha utaeleza yakae wapi center, ama left ama right ama justify. Mfano:

Maandishi haya tatakuwa kati
<b style="text-align:center">Nipo kati</b>

Maandishi haya yataanzia kushito
<b style="text-align:left">Nipo kushoto</b>

Haya yataanzia kulia
<b style="text-align:right">Nipo kulia</b>

Haya yatajaa kati (justify)
<b style="text-align:justify">Nipo Nimejaa</b>

Kukomenti ni kuandika kumbukumbu ya code kwenye faili. Kumbukumbu hizi hazifanyiwi kazi na kompyuta yaani hazitaonekana na mtumiaji wa ukurasa huo. Katika ukurasa nikiweka komoent hazitaonekana na watumuaji. Katika html comment huwekwa kati ya  hivyo maandishi yeyote yatakayokuwa kati ya tag hizo hayataonekana na mtumiaji wa website ama blog hiyo
Mfano wa koment

Ndugu msomaji wetu, kama umekuwa ukifatilia somo hili toka mwanzo, nikueleze tu bila ya kufanyia mazoezi code hizi ni rahisi lakini hutoweza kuzifahamu. Fanyia mazoezi, pata changamoto uliza maswali, hapo tutaenda pamoja. Mapaka sasa tumebakiwa na masomo matatu kumaliza mafuzno haya (basic). baada ya kumaliza mafunzo haya tutaweka wensite yetu mtandaoni, na kila mshiriki wa somo hili atapata mafuzno hayo ya kuweka webbsite yake mwenyewe mtandaono, bure bila malipo.

Usikose somo la sita, litakaloangaliana namna ya kuweka menyu katika kurasa ya html, backgrounda color, na kufanya failili lakoliwe responsive, yaanilisipoteze muonekano mzuri kulnganna nifaa kitakachotumika.

Mafunzo haya yamekujia kwa hisani ya:
Bongoclass.com
Web: www.bongoclass.com
Emaili: [email protected]

#html #bongoclass

HATML SOMO LA SITA:
Karibu tena ndugu msomaji kwenye mafunzo ya HTML na hili ni somo la sita. Katika somo hili tutajifunza mambo makuu matatu ambayo ni kuweka menyu, kuweka background color na kufanya faili lako liwe responsive. Kumbuka haya ni mafunzo ya HTML na jinsi ya kutengeneza website na blog.

Kama ndio mara ya kwanza kupata mfululizo wa masomo haya, somo hili linaendeshwa kwa kutumia App ya Treb Edit inatatikana playstore. Tunatumia App hii kwa kuwa masomo haya yanaendeshwa kwa kuzingatia zaidi wenye simu. Hata hivyo wenye kompyuta pia hawataachhwa mbali.

Fungua App yako, inga menu, kwenye folda laproject clic (maelekezo utayapata kwenye somo la kwanza link ipo hapo chini. Baada ya ku click hapo nenda new file, utatakiwa kuandika jina la faili lesson6.html kisha sevu. Funguwa hilo faili, kisha click HTML snippet, ukurasa wa code utafunguka, na kuanzia hapo ndipo tutaanzia na somo letu la sita.

Kupata masomo yaliotangulia bofya link za hapo chini:

Somo la kwanza:
https://web.facebook.com/groups/androbongo/permalink/568341711186808/

Somo la pili
https://web.facebook.com/groups/androbongo/permalink/568958481125131/

Somo la tatu
https://www.facebook.com/groups/androbongo/permalink/569707514383561/

somo la nne
https://web.facebook.com/groups/androbongo/permalink/570087814345531/

Somo la tano
https://www.facebook.com/groups/androbongo/permalink/570964870924492/

1.Kuweka background color:
Background color ni rangi ya ukurasa wako. Yaani unaamuwa kama ukurasa wako unataka uwe na rangi nyingine tofauti na nyeupe. Kuweka background unaweza kufanya kwenye ukurasa wote. Kufanya hivi utaweka background kuanzia kwenye <body>. kama tulivyoona kuweka rangi basi hata background inakuwa hivyo huvyo tunatumia <style>. mfano:
<body style=”background-color:blue”> kwa kutumia code hii ukurasa wote utakuwa na rangi ya buluu. Angalia mfano kwenye picha.

Pia unaweza kuweka background kwenye tag ya heading kama <h1> ama kwenye paragraph <p>. kwa mfano kama background ni ya buluu, unaweza kuweka background ya rangi nyingine kwenye baadhi ya paragraph. Uwekaji wake ni kama unavyoweka rangi kwenye paragraph. Mfano:-
<p style=”backround-color:yellow”> kwa kutumia code hii rangi ya hiyo paragraph itakuwa ni ya njano. Angalia kwenye picha.

2.Kuweka menu (menyu)
Kuweka menu n kuweka machaguo ambayo yana mkusanyiko wa taarifa zinazolingana. Yaani unachaguwa chaguo kwa kubofya kicha unaletewa taarifa ama mkusanyiko wa taarifa ziinazo fanana.
Kutengenza menu utatumia tag ya menu ambayo ni <menu> pia utatumia tag ya link ambayo ni <a> tag ya link ni kuwezecha kubofya menyu na kupelekewa matokeo kwenye ukurasa mwingine. Baada ya hapo unaweza kutumia batani, ama ukaacha hivyo hivyo ama ukatumia kivuli.

Hapa tutaona menu yenye batani, link na tag ya menu.
<menu>
<a href=”link”><button>facebook</button></a>
<a href=”link”><button>youtube</button></a>
<a href=”link”><button>twitter</button></a>
<a href=”link”><button>whatsapp</button></a>

Utajifunza kuiwekea mbembe katika muendelezo zaidi wa masomo haya.

3.Kufanya faili liwe responvie.
Hii inamaana kuwa faili lako likifunguliwa na kifaa chochote halitapoteza muonekano. Kwa mfano kuna website ukiingia jinsi ambayo itaonekana kwenye kompyuta ni tofauti na kwenye simu. Mfano bongoclass.com. Hii inamaana mafaili yamesetiwa kulingana na aina ya kifaa kitakachofunguwa. Kama ukurasa wako hautaweza kufanya hivi, inamaana mpangilio wake utakuwa hovyo kwa baadhi ya vifaa.

Kufanya hivi tutaweka tag kwenye <head> tag ya <meta> tag hii inakaa kwenye head ndani, tag hii itafanya ukurasa wako ufunguwe ukubwa pindu ukifunguliwana simu ndogo, nakuongezeka ukifunguliwakwenye screen kubwa, bila yakupoteza muonekano. Code nzima ni hii:-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
CODE NZIMA ZA SOMO HI NHIZI HAPA:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="utf-8">
<title>Somo la sita</title>
</head>
<body style="background-color:blue">
<p> huu ni mfano wa background. ukurasa wote utakuwa na rangi ya buluu</p>
<p style="background-color:yellow;">hellow huu ni mfano wa kuweka background ya kwenye paragraph</p>

<h1>kuweka menu</h1>
<h2>mfano</h2>
<menu>
<a href="www.facebook.com"><button>facebook</button></a>
<a href="www.youtube.com"><button>youtube</button></a>
<a href="www.twitter.com"><button>twitter</button></a>
<a href="www.whatsapp.com"><button>whatsapp</button></a>
</menu>
</body>
</html>

Ndugu msomaji huu no mwisho wa mafunzo yetu kwa basic level. Kuna mengi utatakiwa kujifunza kadri siku zinavokwenda. Usisahau solipata somo la saba ambalo litakuwa na video unakayokuwa inaovyesha namna ambavyo unaweza kutengeneza website toka mwanzo paka mwisho. Somo hili la saba litakuwa n mjumuisho wa masomo yote yaliyopita. Hivyo usikose. Katika somo la saba ndipo tutatengeneza website yetu, na kuiweka tayari ili tuiweke live, ambapo somo la nane utajifunza kuweka website yako live na ikawa inatembelewa na watu.

Mwisho wa mafunzo haya utakuwa ni mwanzo wa mafunzo mengine. Kwani hii ni basic level tu, hata hivyo lengo la mafunzo haya ni kuyatumia katika kutengeneza Android App. Hivyo baada ya somo la nane tutarudi tena kwenye mafunzo yetu ya kutengeneza Android App kwa kutumia simu yako.

Mafunzo haya yameletwa kwa ihsani ya:
Bongoclass.com
Web: www.bongoclass.com
Email: [email protected]

#bongoclass #html

SOMO LA SABA PROJECT
<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<body style="background-color:lightblue">
<menu style="background-color:violet">
<a href="android.html"><button>Android</button></a>

<a href="html.html"><button>Html</button></a>
<a href="video.html"><button>Video</button></a>

<a href="contact.html"><button>Contact</button></a>
</menu>

<img src="image/p4.jpeg" width="100%">

<h1><u>Welcome to our website</u></h1>

<p style="text-align:justify">Hii ni website ambayo ni demo kwa ambao wameshiriki mafunzo ya <b>HTML</b>. Mafunzo haya yameendeshwa kwa njia ya simu kwa kutumia App inayoitwa <mark>TrebEdit</mark></p>
<p>Katika mafunzo haya utajifunza mambo yafuatayo:- <br><br>
HTML:<br>

<b style="color:yellow">M</b>arkup<br>

<b style="color:red">L</b>anguage<br>

<p style="background-color:black">
<i style="color:white">mafunzo haya

yamekujia kwa ihsani ya:</i><br><br>

</p>

<h3 style="text-align:center"><b style="color:black"><a href="bongoclass.com">bongoclass.com</a></b></h3>

</body>
</body>
</html>

SOMO LA NANE:
JINSI YA KUHOST PROJECT YAKO YA TOVUTI.
Baada ya kumaliza kutengeneza project yako saa utahitaji iwe live, iweze kuonekana mtandaoni, watu waweze kuipitia, kusoma na kuhabnarika. Huku ndiko kunaitwa kuhost. Kwa faili la HTML unaweza kulihost bure. Yapo makampuni mengi ambayo utaweza kuhost html bure kabisa kwa mfano:-
1.Infinityfree
2.00webhosting
3.Digitalocean
4.Google cloud
5.Firebase

Katika post hii nitakupa hatuwa kwa hatuwa kuhost project yako ya html. Tafadhali angalia video hii kuona jinsi utakavyofanya hatuwa kwa hatuwa. https://www.youtube.com/watch?v=JyHtRDK7QUI Hapa utajifunza kuhost kwa kutumia infinityfree. Katika masomo yetu mengine tutajifunza kuhost kwa kutumia mitandao mingine iliyotajwa hapo juu.

Je una maswali, maoni ama ushauri, tutumie sms ✉ bodya hapa hapa, ama wasiliana nasi kwa WhatsApp 💧 bofya hapa

Post Nyingine

MAFUNZO YA HTML LEVEL 2

MAFUNZO YA PHP LEVEL 1

MAFUNZO YA HTML LEVEL 1

MAFUNZO YA DATABASE

PROJECT ZA MAFUNZO LEVEL 1

MAFUNZO YA PHP LEVEL 2

MAFUNZO YA PHP LEVEL 3 SOMO LA 1