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.
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 nje 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>hellow 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 MIPANGILIO YA MAANDISHI
1.Kuongoza ukubwa wa maneno kwenye element
2.Kupangilia maandihi yakae upandegani
Kuongeza ukubwa wa herufi tunatumia attribute ya font-size. Mfano unataka maandishi ya kweye e;ement p yawe na ukuwa sanna kwa asilimia 200 utafanya:-
<p style=”font-size:200%”>hellow</p>
Ikiwa ninataka maandishi atika hiyo element p yajipange kwa kati nitasema <p style=”text-align:center><hellow</p>
Hali zote mbili hizi unaweza kuzifanya kwa kutumia style moja , kwa sababu zote zipo kwenye tag moja ya <p> kufanya hivi utatakiwa kuzitengganisha kwa kutuia alama hii ;. Ingelikuwa zote ni za tag tofauti tungefanya kwa kutumia dag nyingine inayobeba vitu vingi kama <div> kama tulivyoona katika mfano liotangulia.:-
<p style=”font-size:200%; text-align:center”><hellow</p> hata hivyo tokeo kma ahili tunaweza kulipata kwa kutumia tag ya style ya nje kwa kufanya hivi:-
<html>
<style>
p {font-size: 200%; text-align: center;}
<p>hellow I'm paragraph</p>
</style>
</html>
ATRIBUTE YA TEXT-ALIGN NA FONT SITZE
Hiz mbili huweza kutumika kwenye tag moja na kuleta mbadiliko tofauti. Kwa mfano text-align hii inaweza kupanga maandishi yakae katika mpangilio gani. Kama unahitaji maandishi yako yajipange kati yaani yaanzie katikati utatumia text-align:center. Na kama unahitaji yajae ndani ya ukurasa utatumia text-align:justify. Na kama unahitaji yajipange kwa kuanzia upande wa kulia utatumia text-align-right na kama unataka yajipange kwa kuanzia kushoto utatumia text-align-left. Angalia mifano ya hapo juu ufanyie mazoezi.
Kwa upande mwingine font-size yayewe ni kwa ajili ya kukuza ama kudogodisha maandishi. Katika hali ya kawaida maandishi yapo katika 100% ila uktaka kuyapunguza kubwa utapunguza hapo. Kwa mfano unaweza sema font-size:40% hapo yatakuwa madogo kwa asilimia 40 na kama unataka kuyakuza zaidi utatongeza kutoka 100 kwenda juu. Kwa mfano font-size:300% hapa maandishi yatakuwa makubwa sana.
Somo lijalo tutakujaona namna ambavyo <STYLE> inaweza kutumika kwenye tag ya <a> na <img> na kuleta mabadiliko katika muonekana wa ukurasa wako.
MATUMIZI YA STYLE KWENYE TAG YA <a>, na <img>
Unaweza kuweka style kwenye link na kbadili muonekano wa kawaida. Kwa mfano katika hali ya kawaida link inakuwa na rangi ya buluu na hupigiwa m,sitari pindi unapobofya. Lakini hali hizi unaweza kuziondoa kwa kuondoa decoration. Kwa mfano
<a href=”www.bongoclass.com”>link</a> hii unaweza kiwekea style kwa
<a style="text-decoration: none;" href="https://www.bongoclass.com">hellow</a> pia unaweza kutumia style ya nje ya element kwa kufanya hivi:-
<html>
<style>
a {color: red;
text-decoration: none;}
</style>
<a href="https://google.com">hellow</a>
</html>
Katika mfano hapo juu link itakuwa na rangi nyekundu na haitapigiwa msitari
MATUMIZI YA STYLE KWENYE PICHA
Kama ilivyo maeneo mengine picha inaweza kutumia style ya ndani ya element na nche. Kwa mfano unataka kuiweka picha kati ama upange wa kulia ama wa kushoto utatumia float. Kwa mfano
<img rsc=”#” float=”left” width=”100%”> katika mfano huu picha itakaa upande wa kushoto na itakuwa na upana wa kulingana na ukubwa wa ukurasa ukrasa yaani 100%. matokeo haya unaweza kuyapata kwa kutumia style ya nje kwa kufanya hivi:-
<html>
<style>
img {float: left;
width: 100%;}
</style>
<img src="image/p4.png">
</html>
Katika somo linalofata utajifunza namna ya kuweka taarifa kwenye <head>, kuweka menu na footer.kwenye <body>. somo linalokuja ni katika hatuwa muhimu za kujifunza kutengeneza website kwani kila website inakuwa na menu, footer na lazima ujuwe namna ya kuweka taarifa vyema kwenye <head>
Je! umeipenda hii post?
Ndio Hapana Save post
Rajabu 
Tarehe 2024-05-10 14:53:23 Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 725
Sponsored links
👉1 Madrasa kiganjani
👉2 kitabu cha Simulizi
👉3 Kitabu cha Afya
👉4 Kitau cha Fiqh
Mafunzo ya HTML level 1 somo la 1 (HTML basic level FOR BEGINNERS)
Haya ni mafunzo ya HTML kwa wanaoanza level ya kwanza, na hili ni somo la kwanza katika masomo 8 yatakayokujia katika mtiririko wa course hii. Soma Zaidi...
PHP level 1 somo la sita (6)
Katika somo hili la php level 1 somo la 6 utajifunza namna ya kutumia tarehe yaani function date() kwenye PHP 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 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...
PHP level 1 somo la kumi (10)
Somo la 10 mafunzo ya php level 1. Katika somo hili utajifunza kuhusu condition statement. Soma Zaidi...
Mafunzo ya Database MySQL database somo la 10
Huu ni muendelezo wa mafunzo ya Database kwa kutumia MySQL na hili ni somo la 10. katika somo hili tutakwenda kuendelea namna ya kupangilia muonekano wa data zako kwenye database. 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 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...
Mafunzo ya HTML Level 2 somo la 8 (HTML FULL COURSE FOR BEGINNERS LESSON 8)
Hili ni somo la mwisho mafunzo ya HTML level 2 (html full course for beginners) Soma Zaidi...
Mafunzo ya Database MySQL DATABASE somo la 2
Huu ni mwendelezo wa mafunzo ya DATABASE kwa kutumia MySQL na hili ni somo la pili. Hapa tutakwenda kuona kwa ufupi ni nini DATABASE Soma Zaidi...
Utangulizi wa Android App Development
Haya ni mafunzo ya muda mfupi katika kujifunza hasa ujuzi wa kutengeneza Android App hata kama haujui kitu kuhusiana na Android Development Soma Zaidi...
Mafunzo ya HTML Level 1 somo la 2 for beginner (html full course for beginners)
Somo la pili katika mafunzo ya HTML level 2. Katika somo hili utajifunza maana ya HTML pamoja na historia yake fupi. Soma Zaidi...