image

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.

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

Kama unahitaji kuuliza maswali Bofya hapa

Mwandhishi Tarehe 2021-10-28     Share On Facebook or Whatsapp Imesomwa mara 647


Download our Apps
👉1 Madrasa kiganjani     👉2 kitabu cha Simulizi     👉3 Kitabu cha Afya     👉4 Kitau cha Fiqh    

Post zifazofanana:-

Mafunzo ya php level 1 somo la tatu (3)
hili ni somo la tatu katika masomo ya php level 1. Hapa utajifunza zaidi kuhusu variable na namna ya kuitengeneza. 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 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. 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 tisa (9).
Somo la nane mafunzo ya php, katika somo hili utajifunza kuhusu array na jinsi ya kutengeneza array. Soma Zaidi...

Mafunzo ya HTML level 1 somo la 2 (HTML basic level FOR BEGINNERS)
Hili ni somo la pili katika mfululizo wa mafunzo ya html level ya 1 na hapa tutakwenda sasa kunanza somo letu rasmi, kwani katika somo la kwanza umejifunza jinsi ya kuandaa kifaa chako kwa ajili ya mafunzo. 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 HTML Level 2 somo la 7 (HTML FULL COURSE FOR BEGINNERS LESSON 7)
Ktika somo hili la 7 utajifunza namna ya kuandaa na kujiandaa kutengeneza website ama blog. Pia utajifunza maandalizi ya kuhost Soma Zaidi...

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

PHP level 1 somo la nane (8)
Hapa utajifunza utofauti kati ya php constant na variable. Na hili ni somo la nane katika mfululizo wa masomo haya ya php level 1. 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...