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 ai web app 👉2 Tafasiri ya Riyadh Swalihina 👉3 Bongolite - Game zone - Play free game 👉4 web hosting 👉5 Dua za Mitume na Manabii 👉6 Sira ya Mtume Muhammad (s.a.w)
Post zinazofanana:
Sababu Zinazofanya Betri Iishe Haraka
Betri ni sehemu muhimu sana ya simu, kompyuta mpakato, saa janja na vifaa vingine vya kielektroniki. Hata hivyo, watu wengi hukutana na tatizo la betri kuisha haraka bila kujua chanzo chake. Wakati mwingine tatizo halitokani na ubora wa simu au betri, bali hutokana na namna kifaa kinavyotumika kila siku. Katika makala hii utajifunza sababu kuu zinazofanya betri iishe haraka, jinsi ya kutambua tatizo, pamoja na njia rahisi za kuongeza muda wa matumizi ya betri. Maelezo haya yameandikwa kwa lugha rahisi ili kila mtu ayaelewe, hata kama hana ujuzi wa teknolojia.
Soma Zaidi...Jinsi ya Kuunganisha Simu na Wi-Fi
Wi-Fi ni njia rahisi inayowezesha simu kuunganishwa na intaneti bila kutumia bando la kawaida la simu. Kwa kutumia Wi-Fi, mtu anaweza kutumia intaneti kwa gharama ndogo au wakati mwingine bila gharama yoyote, hasa anapokuwa sehemu yenye mtandao wa Wi-Fi kama nyumbani, kazini, shuleni, hotelini au sehemu nyingine za umma. Kuunganisha simu na Wi-Fi ni jambo rahisi ambalo mtu yeyote anaweza kufanya hata kama hajawahi kutumia teknolojia sana. Unachohitaji ni simu yenye uwezo wa kutumia Wi-Fi, jina la mtandao wa Wi-Fi, na nenosiri kama mtandao huo umefungwa. Makala hii inaelezea hatua kwa hatua jinsi ya kuunganisha simu na Wi-Fi, mambo ya kuzingatia wakati wa kutumia Wi-Fi, sababu zinazoweza kufanya simu ishindwe kuunganishwa, pamoja na faida za kutumia mtandao wa Wi-Fi.
Soma Zaidi...Jinsi ya Kuzima Matangazo Yanayojitokeza Kwenye Simu
Je, umechoka kuona matangazo yanayojitokeza ghafla (pop-ups) na kukuvuruga unapotumia simu yako ya mkononi? Makala hii inakupa mwongozo rahisi sana, wa hatua kwa hatua, kuhusu jinsi ya kuzima matangazo hayo yote yanayokera kwenye simu za Android na iPhone. Mwongozo huu umeandikwa kwa lugha rahisi sana ya Kiswahili ili kila mtu, hata wale ambao hawana kabisa elimu ya shule au ujuzi mkubwa wa mambo ya teknolojia, aweze kuelewa vizuri na kusafisha simu yake leo bila msaada wa fundi. Ukisoma somo hili, utajifunza mbinu za kufunga matangazo kwenye Google Chrome, kupitia mipangilio ya ndani ya simu (Settings), na jinsi ya kung'oa programu zote za siri zinazoleta usumbufu huu.
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...HTML - somo la 3: Tags za HTML zinazotumiwa katika uandishi
Katika somo hili nitakuletea orodhabya tag 25 za html ambazo hugumiwa katikabuandishi.
Soma Zaidi...Jinsi ya Kuweka Password Imara
Katika maisha ya kisasa, matumizi ya simu janja na intaneti yamekuwa sehemu muhimu ya shughuli zetu za kila siku. Watu hutumia akaunti za mtandaoni kwa mawasiliano, biashara, masomo, huduma za kifedha na kuhifadhi taarifa binafsi. Kila akaunti inahitaji ulinzi, na njia ya kwanza ya ulinzi ni kutumia password au nenosiri imara. Password imara husaidia kuzuia watu wasio na ruhusa kuingia kwenye akaunti zako na kutumia taarifa zako vibaya. Hata hivyo, watu wengi bado hutumia password rahisi kama majina yao, tarehe za kuzaliwa au namba zinazofuatana kama 123456. Aina hii ya password ni rahisi kugunduliwa na inaweza kuweka taarifa zako katika hatari. Makala hii inaeleza kwa lugha rahisi jinsi ya kuweka password imara, umuhimu wa kuwa na nenosiri salama, makosa ya kuepuka na njia bora za kulinda akaunti zako mtandaoni. Lengo ni kumsaidia kila mtu, hata asiye na ujuzi mkubwa wa teknolojia, kuelewa na kutumia njia rahisi za kuongeza usalama wa taarifa zake
Soma Zaidi...