HTML - somo la 15: Jinsi ya kutengeneza website kwa kutumia HTML
Katika somo hili tutakwenda kutengeneza website yetu kutoka mwanzo hadi mwisho
PROJECT YETU YA MWISHO KULINGANA NA COURSE:
Huu ni ukurasa wa mbele wa tovuti (landing page) ndio ukurasa mkuu. Ukurasa huu umegawanyika katika sehemu kuu nne. Ukurasa huu umedizaidiwa kulingana na mafunzo ambayo yamefundishwa. Ni matarajio yetu katika muendelezo wa mafunzo haya ukurasa huu utaboreshwa zaidi. Sasa hebu tuone ukurasa huu:-
1.Sehemu ya kwanza ni <head> hapa ndipo amabapi metadata zipi. Kuna jina la mwandishi, na muhutasari, na pia kuna title ya kurasa. Character set iliyotumika ni 8.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Rajabu">
<meta name="description" content="Mafunzo ya HTML, FULL COURES FOR BEGINNERS">
<title>Home Page</title>
</head>
2.Sehemu ya pili ni <header> hapa ndipo ambazo kuna menu. Menu imetengenezwa kwa batani pamoja na hypertext reference kwa ajili ya kuwekea link za kwenye menu. Background color ya menu ni black. Pia ukubwa wa batani ji x-large kwa maana batani zimekuzwa ukubwa.
<style>
menu {background-color: black;}
a {color: blue;
text-decoration: none;
}
button {font-size: x-large;}
.left {float: left; }
.middle {float: left;}
.right {float: right;}
.button {background-color: green;}
div {color: black; width: 33.32%;}
@media screen and (max-width: 600px) {
div {width: 100%;}
}
</style>
<header>
<menu>
<button><a href="#">COURSES</a></button>
<button><a href="#">EXAMS</a></button>
<button><a href="#">PROJECTS</a></button>
<button><a href="#">BLOG</a></button>
<button><a href="#">CONTACTS</a></button>
</menu>
</header>
3.Sehemu ya tatu ni section <div> hii imegawanyika katika row tatu. Kila row imezungushiwa na batani. Rangi ya batani ni ya kijani.ukubwa wa kila row ni 33.32%. rangi ya maandishi ni nyeusi. Style iliyotumika ni ya nje na ndani. Row hizi 3 zitavunjika na kila moja kukaa kivyake endapo ukurasa utafunguliwa kwenye simu. Hivyo kila row itakuwa na upana wa 100%. hii imefanya na @media screen and (max-width: 600px) {
div {width: 100%;}
<div class="left">
<button class="button"><h1>ABOUT US</h1>Sisi ni grupu la Fb tunaotoa mafunzo bure juu ya kutengeneza blog na website pamoja na Android App.</button>
</div>
<div class="middle">
<button class="button"><h1>WHO WE ARE</h1>Sisi ni kundi linalotoa elimu ya Teknolojia bure. Tunafanya hivi kwa kushirikiana na wadau wengine</button>
</div>
<div class="right">
<button class="button"><h1>WHAT WE DO</h1>Tunafundisha jinsi ya kutengeneza Website, Blog na Android App. Tunafanya haya bila ya kudai malipo yoyote yale</button>
</div>
4.Sehemu ya mwisho ni section <main> hii imekusanya maelezo ya kuhusu tovuti hii. Section hii itakuja chini ya section iliyopita. Mpangilio wa text ni center. Style zaidi zilizotumika imechukuwa style ya paragraph zilizotumika huko juu
<main>
<h1 style="text-align: center;">KUHUSU SISI</h1>
<p style="text-align: justify;">Sisi ni wadau wa teknolojia. Tumejitolea kufundishana na kufahamishana zaidi katika teknolojia hususani katika lugha za kikompyuta. Project hii ni project ya pili katika course yetu ya HTML level ya pili. Tunatarajia katika level ya tatu kuboresha project hii kuwa nzuri zaidi. Unaweza kuangalia project yetu ya kwanza kwenye link ya project hapo juu<br><br>
Ni matarajio yetu kuwa project hizi ni mja ya njia za kuonjesha maendeleo yetu katika kujifunza. Hatuta ishia hapa. Malengo yetu ni kujuwa zaidi namna ya kutumia lugha za kikompyuta kuweza kufanya mengi. Lengo letu ni kusaidia jamii katika haya tutakayoyasoma. Tunatarajia kutengeneza project ambazo zina malengo ya Kusaidia jamii kwa ujumla. <br><br>
Tafadhali kama na wewe ni mdau wa teknolojia tunaomba usaidie katika kutuunga mkono kwa mawazo na kifedha kama utakuwa na wasaa.<br>
</p>
<br><br><h1 style="text-align: center; font-size: 100%;">Welcome All</h1><br><br><br>
</main>
5.Section <footer> hii ndio sehemu ya mwisho ya ukurasa huu. Sehemu hii ipo ndani ya <footer> zaidi sehemu hii imeonyesha nyia za kuwasiliana nasi.ba...
Umeionaje Makala hii.. ?
Share On:
👉1 Simulizi za Hadithi Audio 👉2 Kitabu cha Afya 👉3 ai web app 👉4 Bongolite - Game zone - Play free game 👉5 Kitau cha Fiqh 👉6 Madrasa kiganjani
Post zinazofanana:
Jinsi ya Kuzima Matangazo Yanayojitokeza Kwenye Simu
Je, umechoka kuona matangazo yanayojitokeza ghafla (pop-ups) na kukuvuruga unapotumia simu yako ya mkononi? Makala hii inakupa mwongozo rahisi sana, wa hatua kwa hatua, kuhusu jinsi ya kuzima matangazo hayo yote yanayokera kwenye simu za Android na iPhone. Mwongozo huu umeandikwa kwa lugha rahisi sana ya Kiswahili ili kila mtu, hata wale ambao hawana kabisa elimu ya shule au ujuzi mkubwa wa mambo ya teknolojia, aweze kuelewa vizuri na kusafisha simu yake leo bila msaada wa fundi. Ukisoma somo hili, utajifunza mbinu za kufunga matangazo kwenye Google Chrome, kupitia mipangilio ya ndani ya simu (Settings), na jinsi ya kung'oa programu zote za siri zinazoleta usumbufu huu.
Soma Zaidi...Jinsi ya Kurejesha Backup ya Simu
Umewahi kupoteza picha, video, majina ya watu, au mazungumzo muhimu baada ya simu kuharibika, kuibiwa, au kufanya factory reset? Hali hii huwatokea watu wengi, lakini habari njema ni kwamba unaweza kuvirejesha ikiwa uliwahi kutengeneza backup ya simu yako. Katika makala hii utajifunza backup ya simu ni nini, kwa nini ni muhimu, jinsi ya kurejesha backup kwenye simu za Android na iPhone, matatizo yanayoweza kujitokeza wakati wa kurejesha backup, pamoja na njia za kuyatatua. Mwisho wa makala hii utakuwa na uelewa wa kutosha wa jinsi ya kurudisha taarifa zako kwa usalama na kwa urahisi.
Soma Zaidi...Sababu Zinazofanya Betri Iishe Haraka
Betri ni sehemu muhimu sana ya simu, kompyuta mpakato, saa janja na vifaa vingine vya kielektroniki. Hata hivyo, watu wengi hukutana na tatizo la betri kuisha haraka bila kujua chanzo chake. Wakati mwingine tatizo halitokani na ubora wa simu au betri, bali hutokana na namna kifaa kinavyotumika kila siku. Katika makala hii utajifunza sababu kuu zinazofanya betri iishe haraka, jinsi ya kutambua tatizo, pamoja na njia rahisi za kuongeza muda wa matumizi ya betri. Maelezo haya yameandikwa kwa lugha rahisi ili kila mtu ayaelewe, hata kama hana ujuzi wa teknolojia.
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 1: Maana ya HTML na kazi zake
Somo hili linakufundisha maana ya HTML, kwa nini inatumika, na jinsi ya kuandaa simu au kompyuta yako kwa ajili ya kuanza kutengeneza tovuti. Pia tutatengeneza ukurasa wetu wa kwanza wa HTML hatua kwa hatua.
Soma Zaidi...Jinsi ya Kutumia Fingerprint Kwenye Simu
Fingerprint ni teknolojia inayokuwezesha kufungua simu yako kwa kutumia alama ya kidole badala ya kuandika namba ya siri au mchoro (Pattern). Mfumo huu umeifanya matumizi ya simu kuwa rahisi, ya haraka na salama zaidi. Mbali na kufungua simu, fingerprint pia inaweza kutumika kuthibitisha malipo, kufungua programu mbalimbali na kulinda taarifa binafsi zilizopo kwenye simu. Katika makala hii utajifunza fingerprint ni nini, jinsi inavyofanya kazi, namna ya kuiweka kwenye simu, jinsi ya kuitumia kwa usahihi, faida zake, changamoto zinazoweza kujitokeza pamoja na njia za kuzitatua. Pia utapata ukweli muhimu katika sehemu ya "Je! Wajua?" ambao unaweza kukusaidia kutumia fingerprint kwa ufanisi zaidi.
Soma Zaidi...