image

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



           

Je! umeipenda hii post?
Ndio            Hapana            Save post

Kama unahitaji kuuliza maswali Bofya hapa

Mwandhishi Tarehe 2021-10-27 Download PDF     Share On Facebook or Whatsapp Imesomwa mara 850


Sponsored links
👉1 Madrasa kiganjani     👉2 Kitabu cha Afya     👉3 kitabu cha Simulizi     👉4 Kitau cha Fiqh    

Post zifazofanana:-

Mafunzo ya HTML Level 2 somo la 1 (HTML FULL COURSE FOR BEGINNERS LESSON 1)
hili ni somo la pili katika mafunzo ya HTML level 2 html full course for beginners. Katika somo hili tutaangalia utangulizi juu ya HTML na pia utajifunza faida za HTML. 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...

PHP level 1 somo la tano (5)
Haya ni mafunzo ya php na hili ni somo la tano. Katika somovhili utajifunza namna ya kutengeneza functions. 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...

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

Mafunzo ya html level 2 (html full course for beginners)
haya ni mafunzo ya HTML level 2 kwa wenye kuanza. Mafunzo haya ni muendelezo wa level 1 html. Katika course hii utajifunza mengi zaidi lu;iko level1 pia tutazidi kuboresha project yetu. 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 php level 1 somo la nne (4)
somo hili la 4 katika mafunzo ya PHP level 1 utajifunza aina za data mabazo php inakwenda kuzitumia. Soma Zaidi...

Mafunzo ya DATABASE - MySQL somo la 7
Mafunzo ya database kwa utumia software ya MySQL kwa lugha ya kiswahili na hili ni somo la 7. Soma Zaidi...

Mafunzo ya HTML Level 2 somo la 6 (HTML FULL COURSE FOR BEGINNERS LESSON 6)
Katika somo hili la 6 mafunzo ya HTML level 2, tutajfunza namna ya kugawa ukurasa wa wavuti wa html. Soma Zaidi...

Mafunzo ya HTML level 1 somo la 5 (HTML basic level FOR BEGINNERS)
katika somo hili la tano kwenye mafunzo ya HTML level 1 utajifunza jinsi ya 1.Kuweka picha 2.Kuweka rangi 3.Kuweka linki 4.Kupangilia position na alignment ya maandishi 5.Kuongeza ukubwa wa herufi 6.Kukoment Soma Zaidi...

Mafunzo ya HTML level 1 somo la 3 (HTML basic level FOR BEGINNERS)
Hili ni somo la Tatu katika mfululizo wetu wa mafunzo ya HTML kwa basic level kwa wanaoanza kujifunza. Hapa tutakwenda kujifunza tag za html ambazo huwa zinatumika katika uandishi. Soma Zaidi...