HTML - somo la 11: Jinsi ya kuweka style mbalimbali kwenye html
Katika somo hili utajifunza jinsi ya kuweka style mbalimbali kwenye ukurasa wa html
ATTRIBUTE AU TAG YA STYLE
Katika somo lililotangulia tuliweza kuona namna ambavyo attribute zinavyofanya kazi. Pia tuliona aina mbalimbali za attributes na mifano yake. Katika somo hili tutakwenda kuangalia attribute ya style tu. Hii ni moja kati ya mwanzo mzuri wa kujifunza CSS.
Style inaweza kuwekwa ndani ya element na nje ya element. Stayle ikiwa nje ya element inaweza kutumika kwa element zaidi ya moja. Na ikiwa ndani ya element hutumika kwa element husika tu. Wakati mwingine kama kumetokea ufungaji mbaya wa style inaweza kuathiri element nyingi tofauti na makusudiwa.
STYLE INAYOWEKWA NJE YA ELEMENT:
Style ikiwa nje ya element huwekwa kwa kutumia tag ya CSS ambayo ni <style> kisha tribute zote zinakuwa ndani ya tag hii. Kuna faida kubwa ya kutumia style hii ya nje ya element kuliko ya ndani ya element.
Kwa mfano style ya nje ya element hufanya code ziwe nzuri, hupunguza mrundikano wa code ndani ya element pia huweza kuweka stayle kwenye element zaidi ya moja. Hapo chini nitakuletea mifano ya style za nje:-
1.JINSI YA KUWEKA RANGI
Tume jifunza katika masomo yaliotangulia kuwa unapotaka kuweka rangi utatumia attribute ya color. Kwa mfano: <p style=”color:yellow”>hellow</p> katika mfano huu neno hellow litakuwa na rangi nyekundu. Sasa ninataka kuweka kila element na rangi yake. Chukulia mfano una element tag hizi <b>, <p>, <h1> kila moja uwe na rangi yake. Kwa mfano kama huu wa style ya ndani utafanya hivi:-
<b style=”color:yellow”>hellow</b>
<p style=”color:red”>hellow</p>
<h1 style=”color:blue”>hellow</h1>
Sasa kwa kutumia style ya nche utafanya hivi:-
1.Kwanza utaweka tag ya style
2.Utaandika tag mfano p
3.Utaweka bano hili {}
4.Attribute zote ziwe ndani ya hayo mabano
5.Kama utakuwa na attribute zaidi ya moja tengenisha kwa alama hii ;
6.Usisahau kufunga tag ya style.
7.Kisha andika element zako.
MFANO:
<html>
<style>
b {color: yellow}
p {color: red}
h1 {color: blue}
</style>
<b>hellow i'm yellow</b><br>
<p>hellow i'm red</p>
<h1>hellow I'm blue</h1>
</html>
Katika mfano huo utaona maandishi yaliyo kwenye tag ya b ni ya njano, na ya kwenye <p> ni ya wekundu na ya kwenye <h1> ni ya buluu.
2.KUWEKA BACKGROUND COLOR
Kama tulivyoona kwenye mfano wa hapo juu jinsi ya kuweka rangi kwa kutumia style iliyo nje ya element. Na hapa tutaona jinsi ya kutumia style ya nje ya element kueweka background color.
Katika hali ya kawaida background color kwenye element huwekwa kwa kutumia style= kisha utaweka value ya atribute style. Kwa mfano
<p style=”background-color:green”>Hellow I’m green</p> Katika mfano huu maneno haya yatakuwa na rangi ya kijani. Sasa ikiwaninataka kutumia background color moja kwenye element zaidi ya moja, mfano kwenye tag ya <p>, <b> na <I>. Hapa nitatumia kwanza tag ambayo inaweza kubeba tag zote hizo kw amfano unaweza kutumia tag ya <body> lakini hii itaweka backrond kwenye ukurasamzina. Ama unaweza kutumia tag kama <div> hii inaweza kubeba tag nyingi ndani yake. Katika mfano wa hapo chini nitatumia zote mbili <body> na <div>
<html>
<style>
body {background-color: pink;}
</style>
<body>
<p>hellow i'm paragraph</p>
<b>hrllow I'm bolded text</b>
<i>hellow I'm italic</i>
</body>
</html>
Kwa kutumia <div> mfano:-
<html>
<style>
div {background-color: purple;}
</style>
<div>
<p>hellow i'm paragraph</p>
<b>hrllow I'm bolded text</b>
<i>hellow I'm italic</i>
</div>
</html>
3.KUWEKA MIPANGIL...
Umeionaje Makala hii.. ?
Share On:
👉1 kitabu cha Simulizi 👉2 Madrasa kiganjani 👉3 Bongolite - Game zone - Play free game 👉4 ai web app 👉5 Kitabu cha Afya 👉6 Simulizi za Hadithi Audio
Post zinazofanana:
HTML- somo la 2: Kazi za HTML, code na tag kwenye website.
Katika somo somo hili utajifunza maana ya code, tag na mpangilio wa faili la HTML
Soma Zaidi...HTML - somo la 8: Mgawanyiko wa Tag za HTML na kazi zake
Katika somo hili tunakwenda kugawanya tag za HTML, pia nitakwenda kukuletea tag 70 za HTML
Soma Zaidi...Faida za Screen Protector
Screen Protector ni kifaa chembamba kinachowekwa juu ya skrini ya simu ili kuilinda dhidi ya mikwaruzo, mipasuko na uharibifu mwingine unaoweza kutokea wakati wa matumizi ya kila siku. Watu wengi hununua simu za gharama kubwa lakini husahau kulinda sehemu muhimu zaidi ya simu hiyo, ambayo ni skrini. Makala hii inaelezea kwa kina faida za Screen Protector, aina zake, jinsi ya kuchagua inayofaa, na sababu zinazofanya iwe uwekezaji muhimu kwa kila mwenye simu.
Soma Zaidi...Jinsi ya Kufanya Backup ya Simu
Simu ya mkononi imekuwa sehemu muhimu sana ya maisha yetu ya kila siku. Tunatumia simu kuhifadhi namba za watu tunaowajua, picha za familia, video muhimu, ujumbe, nyaraka, programu na taarifa nyingine nyingi. Lakini tatizo linaweza kutokea wakati wowote. Simu inaweza kupotea, kuharibika, kuibiwa au kufutika taarifa zake kwa bahati mbaya. Hapo ndipo umuhimu wa kufanya backup ya simu unapokuwa mkubwa. Backup ya simu ni njia ya kutengeneza nakala ya taarifa zako muhimu na kuzihifadhi sehemu salama ili uweze kuzirudisha pale unapohitaji. Kwa kufanya backup mara kwa mara, unapunguza hatari ya kupoteza vitu muhimu vilivyokuwa kwenye simu yako. Katika makala hii tutajifunza maana ya backup ya simu, umuhimu wake, njia mbalimbali za kufanya backup kwenye simu za Android na iPhone, vitu vinavyoweza kuhifadhiwa, makosa ya kuepuka na hatua rahisi ambazo kila mtu anaweza kufuata hata kama hana ujuzi mkubwa wa teknolojia.
Soma Zaidi...HTML-somo la 5: Jinsi ya kupangilia munekano wa maudhui kwenye website
Katika somo hili utajifunza Kuweka picha Kuweka rangi Kuweka linki Kupangilia position na alignment ya maandishi Kuongeza ukubwa wa herufi Kukoment
Soma Zaidi...Jinsi ya Kuhifadhi Picha Kwenye Cloud
Picha ni kumbukumbu muhimu zinazohifadhi matukio ya maisha yetu kama vile harusi, sherehe, safari, watoto, familia na kazi mbalimbali. Tatizo kubwa ambalo watu wengi hukutana nalo ni kupoteza picha kutokana na simu kuharibika, kuibiwa, kupotea au kufutwa kimakosa. Njia salama ya kulinda picha zako ni kuzihifadhi kwenye Cloud. Katika makala hii utajifunza cloud ni nini, jinsi inavyofanya kazi, faida za kuhifadhi picha kwenye cloud, hatua za kuhifadhi picha zako kwa usalama pamoja na mambo muhimu ya kuzingatia ili kuhakikisha kumbukumbu zako zinabaki salama kwa muda mrefu.
Soma Zaidi...