Katika somo hili utajifunza jinsi ya kugawanya ukurasa wa HTML katika column
KUGAWA UKURASA WA HTML
Kwa kutumia HTML unaweza kugawa ukurasa katia row. Kwa wale ambao wanatumia microsoft word hapa utaweza kunielewaa. Mfano unatye taarifa yako. Kisha ukataka kugawa doc katika sehemu tatu yaani kuli, katu na kushoto. Hiki ndio kitu ninachokizungumzia hapa. Katika kugawa huku tutatumia tag section ambayo ni <div>
Ili kufanikisha lengo letu kwa urahisi tutatumia baadhi ya element za CSS. Tutatumia class. Class itakuwa ndio attribute, div itakuwa tag na value itakuwa ni section tunazokwenda kuweka. Hapa unatakiwa pia ufanye hesabu. Kama ukurasa mzima una upana wa 100%, je nikiugawa sehemu tatu kwa upana kila kisehemu kitakuwa na upana gani? (100/3 = 33.3).
Unaweza kutumia style za nje ama ya ndani.ni vyema kutumia style ya nje ili kupunguza msongamano wa tag. Tunatumia style ili kuweza kupangilia muonekano wa sehemu zetu tutakazogawa.tunatumia class ili kuweza kubeba maudhui ya kila kisehemu, na dutatumia div iwe kama chombo cha kubebea maudhui (tag na content).
Kuweza kufgawa ukurasa fanya hivi:-
1.Tumia stayle ya nje
<style>
</style>
2.Weka alama za kutambulisha visehemu utakavyogawa ndani ya style. Anza na kuweka kidoto kabla ya kuweka hiyo alama. Kidoto ndio kitajulisha kuwa hiyo ni value kwenye attribute ya class. Mfano .left .right .middle
3.Iki kupangilia vigawany hivyo inatakiwa kimoja kiwe kulia, kingine kushoto na kingine kati. Kufanya hivi ndani ya kila kigawanyo unatakiwa ueleze kikae upande gani. Hivyo utatumia float. Hii ni kama vile tulivyoifanyia picha kwenye masomo yaliopita. Tuliona namna ya kuifanya picha ikae upande unaotaka. Mfano utafanya
<style>
.left {float: left; }
.middle {float: left; }
.right {float: right;}
</style>
Hapo utakuwa tayari umegawa ukurasa wako, kushoto, kati na kulia. Sasa ili kufanya kila sehemu ikae sawa mahala pale tunatakiwa tugawanye kihisabu, ili kila kimoja kikae mahala pake bila ya kuathiri vingine.
4.Kwa kuwa contente zote zitakaa ndani ya div section hivyo tutakwenda kuigawa div. Fanya hivi weka style ya div ndani ya tag ya style, kisha width iwe ni 33.3%. kwa maana kuwa 100% ukiigwa sehemu tatu tunapata 33.3%.
<style>
.left {float: left; }
.middle {float: left; }
.right {float: right;}
div { width: 33.3%;}
</style>
5.Baada ya hapo sasa tunakwenda kutumia style zetu kwenye section ya div.badala ya kutumia style attribute sasa tunatumia class. Na kanuni ni ileile ya kuweka alama ya = ikifuatiwa na funga semi na kuweka value kisha funga semi. Kwa sharti kuwa haya yote yafanyike kwenye tag ya kufungulia.
Mfano: <div class="left"> utaweza maudhui yako unayotaka kuweka upande wa kushoto ,kisha kati, kwa ajili ya kuweka maudhui ya kati <div class="middle"> kisha ya kulia ili kuweka maudhui ya upande wa kulia <div class="right">
<div class="left">
<h1>HEADING ONE</h1>
<p>hellow this is paragraph</p>
</div>
<div class="middle">
<h1>HEADING TWO</h1>
<p>hellow this is paragraph</p>
</div>
<div class="right">
<h1>HEADING THREE</h1>
<p>hellow this is paragraph</p>
</div>
Kwa kufanya hivi utakuwa umeweza kuugawa ukurasa wako katika pande tatu zilizo sawa. Kwa kufan">...
Je! umeipenda hii post?
Ndio Hapana Save post
Rajabu 
Tarehe 2024-05-10 14:53:23 Topic: HTML
Main: Masomo
File: Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 395
Sponsored links
👉1 kitabu cha Simulizi
👉2 Kitabu cha Afya
👉3 Madrasa kiganjani
👉4 Simulizi za Hadithi Audio
👉5 Kitau cha Fiqh
👉6 Sira ya Mtume Muhammad (s.a.w)
HATML - somo la 4: Jinsi ya kutumia tag za html
Katka somo hi utakwenda kujifunza jinsi ya kutumia tag za html ili kupangilia muonekano wa maudhui Soma Zaidi...
Jinsi ya kutengeneza cheti kwa kutumia HTML
Katika post hii utakwenda kujifunz ajinsi ya kutengeneza cheti kwa kutumia html na css. Soma Zaidi...
HTML - somo la 7: Vitu vya kuzingatia unapoandika HTML
Katika somo hili utajifunza sehemu muhimu katika faili la HTML kama vile tag, attribute na element Soma Zaidi...
HTML - somo la 11: Jinsi ya kuweka style mbalimbali kwenye html
Katika somo hili utajifunza jinsi ya kuweka style mbalimbali kwenye ukurasa wa html 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...
HTML - somo la 13: Jinsi ya kugawa ukurasa wa HTML
Katika somo hili utajifunza jinsi ya kugawanya ukurasa wa HTML katika column Soma Zaidi...
HTML - somo la 14: Hatua za kutengeneza website
Katika somo hili utakwenda kujifunza jinsi ya kutengeneza website hatuwa kwa hatuwa Soma Zaidi...
haloo word
all haloo Soma Zaidi...
HTML-somo la 5: Jinsi ya kupangilia munekano wa maudhui kwenye website
Katika somo hili utajifunza Kuweka picha Kuweka rangi Kuweka linki Kupangilia position na alignment ya maandishi Kuongeza ukubwa wa herufi Kukoment Soma Zaidi...
HTML - somo la 6: Jinsi ya kuweka menyu kwenye faili la HTML
Katika somo hili utakwenda kujifunza jinsi ya kuweka menyu kwenye faili la html na kuweka rangi ya background. Pia utajifunza kufanya ukurasa uwe responsive yaani uendani na ukubwa wa kifaa. Soma Zaidi...
HTML - somo la 10: Maana ya HTML attribute na jinsi zinavyofanya kazi
Katika somo hili utakwenda kijifunza kuhusu HTML attributes na jinsi ambavyo zinafanya kazi Soma Zaidi...
HTML - somo la 9: Jinsi ya kutumia tag za HTML katika uandishi wa maudhui
Katika somo hili utakwenda kuona jinsi ya kuzitumia tag balimbali za html Soma Zaidi...