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 ukiw ana App yetu. Bofya liln hapo chini kuweza ku download

Download Now

Nyuma Endelea

Je! umeipenda hii post?
Ndio Hapana Save post

Rajabu Tarehe 2024-05-10 14:53:23 Topic: Tehama Main: Post File: Download PDF Share On Facebook or Whatsapp Views 1043

Sponsored links
👉1 Kitau cha Fiqh 👉2 Madrasa kiganjani 👉3 Sira ya Mtume Muhammad (s.a.w) 👉4 Simulizi za Hadithi Audio 👉5 kitabu cha Simulizi 👉6 Kitabu cha Afya

Post zifazofanana:-

Mafunzo ya database MySQL somo la 3
Huu ni mwendelezo wa mafunzo ya database na jinsi ya kutengeneza bloga na website na hili ni somo la tatu. hapa utajifunza jinsiya kutengeneza database yako kwa mara ya kwanza. Soma Zaidi...

Mafunzo yz database MySQL database somo la 12 (final)
Huu ni muendelezowa mafunzo ya database kwa kutumia MySQl na hili ni somo la 12. katika somo hili tutajifunza namna ya kufanya mahesabu kwa kutumia SQl katika database Soma Zaidi...

Mafunzo ya HTML kwa wenye kuanza (basic level)
Huu ni utangalizi wa mafunzo ya HTML kwa wenye kuanza level ya kwanza kwa lugha ya kiswahili. Haapa utapata msingi wa kuweza kutengeneza tovuti na blog. Soma Zaidi...

Mafunzo ya php level 1 somo la pili (2)
hili ni somo la pili katika mfululizo wa mafunzo haya ya php level 1 na hapa utajifunza namna ya kuandika faili klako la kwanza la php. 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 DATABASE - MySQL database somo la 5
Huu ni muendelezo wa mafunzo ya DATABASE kwa kutumia software ya MySQL na hili ni somo la tano. katika somo hili utajifunza type of data yaani aina ya taarifa ambazo unaweza kuzihifadhi kwenye database yako. Soma Zaidi...

PHP level 11 somo la kumi na moja (11)
Katika somo hilivutajifunza namna ya kutumia HTML form. Namna ya kuookea taarifa kutoka kwenye madodoso ya html form. Soma Zaidi...

Mafunzo ya database mySQl database somo la 11
huu ni muendelezo wa mafunzo ya Database klwa kutumia MySQL na hili ni somo la 11. katika somo hili tutaendelea kujifunza mpangilio wa muonekano wa data kwenye database. Soma Zaidi...

PHP level 1 somo la kumi (10)
Somo la 10 mafunzo ya php level 1. Katika somo hili utajifunza kuhusu condition statement. Soma Zaidi...

PHP level 1 somo la tisa (9).
Somo la nane mafunzo ya php, katika somo hili utajifunza kuhusu array na jinsi ya kutengeneza array. Soma Zaidi...