Mafunzo ya HTML level 1 somo la 6 (HTML basic level FOR BEGINNERS)
hili ni somo la sita katika mfululizo wa mafunzo ya HTML level 1. Katika somo hili tutajifunza mambo makuu matatu ambayo ni kuweka menyu, kuweka background color na kufanya faili lako liwe responsive.
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.
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> <br><br> <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: mafunzo@bongoclass.com
Download App Yetu
Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya hapa chini kuipakua sasa!
Umeionaje Makala hii.. ?
Tarehe: 1970-01-01 03:33:44
Topic: Tehama
Main: Jifunze
File: Download PDF
Views 1207 👉1 Bongolite - Game zone - Play free game 👉2 Madrasa kiganjani 👉3 Kitau cha Fiqh 👉4 Simulizi za Hadithi Audio 👉5 Kitabu cha Afya 👉6 Sira ya Mtume Muhammad (s.a.w)
Post zinazofanana:
PHP level 1 somo la nane (8)
Hapa utajifunza utofauti kati ya php constant na variable. Na hili ni somo la nane katika mfululizo wa masomo haya ya php level 1.
Soma Zaidi...
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.
Soma Zaidi...
Mafunzo ya HTML level 1 somo la 4 (HTML basic level FOR BEGINNERS)
Hili ni somo la nne katika mafunzo ya html basic level. Hapa tutakwenda kuona jinsi ya kuzifanyia kazi tag ambazo umejifunza katika somo lililotangulia.
Soma Zaidi...
Mafunzo ya DATABASE - MySQL database somo la 8
Huuu ni muendeleo wa mafunzo ya database kwa lugha ya kiswahili, na hili ni somo la nane. Katika somo hli utajifunza namna ya kuweka taarifa kwenye database, kuzfuta na kuziediti yaani kuzifanyia marekebisho.
Soma Zaidi...
Mafunzo ya HTML Level 2 somo la 3 (HTML FULL COURSE FOR BEGINNERS LESSON 3)
Hili n somo la tatu katka muendelezo wa mafunzo ya HTML LEVEL 2 kwa lugha ya kiswahili. Mafunzo haya yanakujia kwa Ihsani ya bongoclass
Soma Zaidi...
Mafunzo ya HTML Level 2 somo la 5 (HTML FULL COURSE FOR BEGINNERS LESSON 5)
Karibu tena katika mafunzo haya ya html level 2 na hili ni somo la 5. Katika somo hili utajifunza zaidi kuhusu kuweka style kwenye html file.
Soma Zaidi...
Mafunzo ya HTML level 1 somo la 8 (HTML basic level FOR BEGINNERS)
Katika somo hili la 8 mafunzo ya html level 8 utajifunza jinsi ya kuhost project ya html na kuwa live, watu wakaipitia na kusoma maudhui yake.
Soma Zaidi...
Mafunzo ya HTML Level 2 somo la 8 (HTML FULL COURSE FOR BEGINNERS LESSON 8)
Hili ni somo la mwisho mafunzo ya HTML level 2 (html full course for beginners)
Soma Zaidi...
Utangulizi wa Android App Development
Haya ni mafunzo ya muda mfupi katika kujifunza hasa ujuzi wa kutengeneza Android App hata kama haujui kitu kuhusiana na Android Development
Soma Zaidi...
Mafunzo ya php level 1 somo la kwanza (1)
Karibu kwenye mafunzo ya PHP level 1 na hili ni somo la kwanza. Hapa utajifunza maana ya php, inavyofanya kazi pamoja na historia yake kwa ufupi
Soma Zaidi...