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

Kama unahitaji kuuliza maswali Bofya hapa

Mwandhishi Tarehe 2021-10-27     Share On Facebook or Whatsapp Imesomwa mara 769

Post zifazofanana:-

Namna ya kutoa huduma ya kwanza
Huduma ya kwanza ni huduma anayopewa mgonjwa au mtu yeyote aliyepata ajali kabla ya kumpeleka hospitalini Soma Zaidi...

Dawa ya Panadol au paracetamol katika kutuliza maumivu
Posti hii inahusu zaidi kazi ya paracetamol katika kutuliza maumivu, ni Aina ya dawa ambayo utumiwa sana katika kutuliza maumivu kwa wagonjwa. Soma Zaidi...

Fahamu Mambo yanayosababisha Ugonjwa wa kipindupindu
Kipindupindu ni ugonjwa wa bakteria ambao kawaida huenezwa kupitia maji machafu. Kipindupindu husababisha'Kuhara'na'Upungufu wa maji mwilini. Ikiachwa bila kutibiwa, Kipindupindu kinaweza kusababisha kifo kwa muda wa saa chache, hata kwa watu walioku Soma Zaidi...

Athari za Ugonjwa wa herpes simplex kwa wajawazito
Post inahusu zaidi athari za Ugonjwa wa herpes simplex kwa wajawazito au ugonjwa wa vipele kwenye midomo na sehemu za siri.ugonjwa huu uleta madhara kwa wajawazito kama tutakavyoona Soma Zaidi...

Mgawanyo wa Elimu Usiokubalika katika uislamu.
Kipengele hichi kinahusu mgawanyiko wa elimu usiokubalika katika uislamu.sababu za mgawanyiko wa elimu udio sahihi katika uislamu. Soma Zaidi...

WAKATI WA KUFUMBUKA SEHEMU YA 1
Post hii inahusu zaidi hadithi mpya na nzuri inayoitwa wakati wa Kufumbuka, ni hadithi inayohusu maisha ya kawaida ambapo watu ushindwa kudhamini watu wa karibu nao na kuona watu wa mbali ndio wenye maana ila shida zikifika ndipo wanaona umuhimu wao. Soma Zaidi...

Umuhimu wa uterusi
Post hii inahusu zaidi umuhimu wa uterusi, ni mfuko unayosaidia kumtunza mtoto akiwa tumboni mwa mama yake. Soma Zaidi...

Sababu za makafiri wa kiqureish kuupinga ujumbe wa uislamu
Bara arabu zama za jahiliyyah (EDK form 2 dhana ya elimu ya uislamu) Soma Zaidi...

Hivi kipimo cha mimba cha mkojo baada ya kutumika Mara 1 ,hakiruhusiw tena kutumika au
Je ni kweli kupima kimoja cha mloka kinaweza kupima mimba zaidi ya mara moka? Soma Zaidi...

Ratiba ya chanjo ya polio
Posti hii inahusu zaidi namna chanjo ya polio inavyotolewa na ratiba zake yaani kuanzia siku ya kwanza mpaka pale mtoto anapomaliza chanjo hii kwa hiyo tuone ratiba ya chanjo ya polio. Soma Zaidi...

Je siku ya kwanza kabisa ya ovulation mimba inakuwa ni uhakika kupata mimba?
Watu wengi wanadhania kuwa kufanya tendo la ndoa katika siku hatari ni lazima kuwa utapata ujauzito. Hili sio sahihi kabisa. Post hii itakwenda kuangalia jambo hili zaidi. Soma Zaidi...

Mda wa kufanya tendo la ndoa baada ya kujifungua
Posti hii inahusu zaidi mda ambao mama anapaswa kukaa bila kufanya tendo la ndoa mara tu baada ya kujifungua. Soma Zaidi...