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 724
Sponsored links
👉1 Kitau cha Fiqh
👉2 kitabu cha Simulizi
👉3 Kitabu cha Afya
👉4 Madrasa kiganjani
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...
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 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 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 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...
Mafunzo ya DATABASE - MySQL database somo la 8
Huuu ni muendeleo wa mafunzo ya database kwa lugha ya kiswahili, na hili ni somo la nane. Katika somo hli utajifunza namna ya kuweka taarifa kwenye database, kuzfuta na kuziediti yaani kuzifanyia marekebisho. Soma Zaidi...
Mafunzo ya DATABASE MYSQL na SQL somo la 1
Karibu tena katika mafunzo yetu, na huu ni mwanzo wa mafunzoya DATABASE kwa kutumia MYSQL kwa lugha ya kiswahili. Na hili ni somo la kwanza, katka somo hili utajifunza jinsi ya kuandaa kifaa chako kwa ajili ya mafunzo. Soma Zaidi...
Mafunzo ya HTML Level 2 somo la 3 (HTML FULL COURSE FOR BEGINNERS LESSON 3)
Hili n somo la tatu katka muendelezo wa mafunzo ya HTML LEVEL 2 kwa lugha ya kiswahili. Mafunzo haya yanakujia kwa Ihsani ya bongoclass 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 saba (7)
Hili ni somo la saba, mafunzo ya php level 1. Katika somo hili utajifunza jinsi ya kuandika function yako mwenyewe. 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 kwa kutumia MySQL DATABASE kwa kiswahili somo la 4
Huu ni mwendelezo wa mafunzo ya database kwa kutumia MySQL na hili ni somo la nne katika mlolongo wa masomo haya. Katika somo hili utajifuza jinsi ya kubadili jina la database na kufuta database. Pia tutajifunza kutumia SQL kufanya hayo. Soma Zaidi...