Katika somo hili la 6 mafunzo ya HTML level 2, tutajfunza namna ya kugawa ukurasa wa wavuti wa html.
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 kufanya hivi kama unataka pande nyingine ziwe kubwa zaidi ya nyingine utaweza style ya width kwa kila kisehemu na kueleza kiwe na upana gani.
Kode zilizotumika hapo juu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
</head>
<body>
<style>
.left {float: left; }
.middle {float: left; }
.right {float: right;}
div { width: 33.3%;}
</style>
<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>
</body>
</html>
Pia unaweza kuweka rangi, tofauti tofauti na staili nyngine ili kuboresha. Tatizo kubwa ambalo linazikumba code hizo hapo juu ni kuwa ukurasa wko utakuwa sehemu tatu hata kama utafunguliwa kwenye simu. Hii haiwi nzuri kama kuna taarifa nyingi maana zitakuwa ngmu kusoma kwenye screen ndogo halafu uigawe sehemu tatu.
Tatizo hili litatatuliwa kama tukiweka kuwa endapo ukurasa wetu utafunguliwa na kifaa cheye screen ndogo kama simu basi ugawanyike sehemu tatu ila kwa kwenda chini. Hii ina maana kuwa sehemu zako tatu kila moja itakaa kifyake. Ya kwanza utaanza juu, kisha ya kati itafata chini ya ya kwanza na ya tatu itakaa chini ya ya pili.
Kifanya hivi tunatakiwa tutumie @media screen ndani ya <div> kwa nini ni kwa sababu <div ndio section ambayo inakuwa kama chombo cha kunbebea sehemu zote tatu. Hii media scree ndio ambayo itaangalia ukubwa wa screen ya kifaa. Kama ni ndogo basi visehemu vyetu kila kimoja kiwe na upana wa 100% hivyo kijitegemee. Hivyo utafanya hivi
@media screen and (max-width: 600px) {
div {
width: 100%;
}
}
CHEKI CODE HIZI
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
</head>
<body>
<style>
.left {float: left; background-color: violet;}
.middle {float: left; background-color: purple;}
.right {float: right;background-color: green;}
div {color: black; width: 33.32%;}
@media screen and (max-width: 600px) {
div {
width: 100%;
}
}
</style>
<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>
</body>
</html>
Mpaka kufikia hapa utakuwa umeweza kugawa ukurasa wako kadiri unavyotaka. Hata ukitaka uwe na sehemu 8 unaweza ni mahesabu yako tu. Katika somo lijalo tutakwenda kuona jinsi ya kudizaidi website ma blog yako kabla ya kuitengeneza.
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 1100
Sponsored links
👉1 Kitabu cha Afya
👉2 Kitau cha Fiqh
👉3 kitabu cha Simulizi
👉4 Madrasa kiganjani
Mafunzo ya HTML kwa wenye kuanza (basic level)
Huu ni utangalizi wa mafunzo ya HTML kwa wenye kuanza level ya kwanza kwa lugha ya kiswahili. Haapa utapata msingi wa kuweza kutengeneza tovuti na blog. 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 html level 2 (html full course for beginners)
haya ni mafunzo ya HTML level 2 kwa wenye kuanza. Mafunzo haya ni muendelezo wa level 1 html. Katika course hii utajifunza mengi zaidi lu;iko level1 pia tutazidi kuboresha project yetu. Soma Zaidi...
Mafunzo ya HTML level 1 somo la 7 (HTML basic level FOR BEGINNERS)
Hii ni project ya HTML ambayo imetengenezwa kulingana na mafunzo ya HTML level1. Tunatarajia project hii kuboreshwa kadiri mafunzo yanavyozidi kusonga mbele. 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 2 somo la 1 (HTML FULL COURSE FOR BEGINNERS LESSON 1)
hili ni somo la pili katika mafunzo ya HTML level 2 html full course for beginners. Katika somo hili tutaangalia utangulizi juu ya HTML na pia utajifunza faida za HTML. 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 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...
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 yz database MySQL database somo la 12 (final)
Huu ni muendelezowa mafunzo ya database kwa kutumia MySQl na hili ni somo la 12. katika somo hili tutajifunza namna ya kufanya mahesabu kwa kutumia SQl katika database Soma Zaidi...
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...
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...