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>

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>

Download app yetu

Jifunze zaidi, na wasiliana nasi ukiw ana App yetu. Bofya liln hapo chini kuweza ku download

Download Now

Nyuma Endelea

Je! umeipenda hii post?
Ndio Hapana Save post

Rajabu Tarehe 2024-05-10 14:53:23 Topic: Tehama Main: Post File: Download PDF Share On Facebook or Whatsapp Views 968

Sponsored links
👉1 Madrasa kiganjani 👉2 Sira ya Mtume Muhammad (s.a.w) 👉3 Kitabu cha Afya 👉4 kitabu cha Simulizi 👉5 Kitau cha Fiqh 👉6 Simulizi za Hadithi Audio

Post zifazofanana:-

Mafunzo ya HTML Level 2 somo la 6 (HTML FULL COURSE FOR BEGINNERS LESSON 6)
Katika somo hili la 6 mafunzo ya HTML level 2, tutajfunza namna ya kugawa ukurasa wa wavuti wa html. Soma Zaidi...

Mafunzo ya database MySQL - DATABASE somo la 6
Huu ni muendelezo wa mafunzo ya database kwa kutumia MySQL na hili ni somo la 6. Katika somo hili tutakwenda kuona jinsi ya kutengeneza table kwa kutumia MySQL na kwa kutuma SQL. 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 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 database somo la 9
haya ni mafunzo ya database kwa kutumia MySQl na hili ni somo la 9. katika soo hili utajifunza namna ya kusoma ama kutumia taarifa zilizomo kwenye DATABASE. 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 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 1 somo la 8 (HTML basic level FOR BEGINNERS)
Katika somo hili la 8 mafunzo ya html level 8 utajifunza jinsi ya kuhost project ya html na kuwa live, watu wakaipitia na kusoma maudhui yake. Soma Zaidi...

PHP level 1 somo la kumi na mbili (12) final
Mafunzo ya php level 1 somo ka 12 mwisho wa mafunzo. Hapa utaona project ambazo unaweza kufanya kutokana na mafunzo haya. 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...