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 Kitau cha Fiqh 👉2 Madrasa kiganjani 👉3 kitabu cha Simulizi 👉4 Sira ya Mtume Muhammad (s.a.w) 👉5 Bongolite - Game zone - Play free game 👉6 ai web app
Post zinazofanana:
Dalili Zinazoonyesha Simu Ina Virusi
Virusi vya simu ni mojawapo ya matatizo yanayoweza kuathiri utendaji wa simu yako bila wewe kutambua mapema. Watu wengi hudhani kuwa ni kompyuta pekee zinazoshambuliwa na virusi, lakini ukweli ni kwamba simu za Android na hata baadhi ya simu nyingine zinaweza pia kuathirika na programu hatari zinazojulikana kama virusi au malware. Makala hii inaeleza kwa kina dalili zinazoonyesha simu ina virusi, sababu zinazofanya simu ipate virusi, namna ya kujilinda, pamoja na hatua unazoweza kuchukua ili kuondoa tatizo hilo. Ikiwa simu yako imeanza kufanya mambo yasiyo ya kawaida, makala hii itakusaidia kutambua tatizo kabla halijawa kubwa
Soma Zaidi...Jinsi ya Kutatua Tatizo la Kamera Kutofanya Kazi
Kamera ya simu au kompyuta yako imegoma kufanya kazi? Usipaniki. Tatizo hili hutokea mara kwa mara na mara nyingi halihitaji ufundi mkubwa. Makala hii inakupa suluhisho la haraka na rahisi kuanzia kusafisha lenzi, kuwasha upya vifaa, hadi kuangalia mipangilio ya ndani (permissions). Utafanya kamera yako ianze kazi tena ndani ya dakika chache bila kutumia gharama yoyote.
Soma Zaidi...Jinsi ya Kutambua Kama Memory Card Imeharibika
Memory card (kadi ya kumbukumbu) ni kifaa kidogo kinachotunza vitu vyetu vya thamani kama picha, video, nyimbo na nyaraka muhimu katika simu au kamera. Hata hivyo, vifaa hivi mara nyingi huharibika bila kutoa taarifa. Makala hii imelenga kukusaidia wewe mtumiaji wa kawaida utambue kirahisi dalili za memory card iliyokufa au inayoelekea kuharibika. Utajifunza ishara za wazi kama faili kupotea, simu kuwa nzito, au ujumbe wa makosa (errors). Pia, tumekuwekea hatua rahisi za kufanya ili kulinda data zako zisipotee kabisa na jinsi ya kuepuka kununua kadi feki. Kila kitu kimeelekezwa kwa lugha rahisi ya Kiswahili isiyo na maneno magumu ya kiteknolojia.
Soma Zaidi...Jinsi ya Kutafuta Simu Iliyopotea
Kupoteza simu ni jambo linaloweza kumpata mtu yeyote wakati wowote. Simu ya kisasa si kifaa cha kupigia simu tu, bali pia huhifadhi picha, namba za watu unaowasiliana nao, ujumbe, taarifa za benki, akaunti za mitandao ya kijamii na taarifa nyingine muhimu. Ndiyo maana kupoteza simu kunaweza kusababisha usumbufu mkubwa na hata hatari ya taarifa binafsi kuibiwa. Habari njema ni kwamba kuna njia mbalimbali zinazoweza kukusaidia kuitafuta simu iliyopotea. Unaweza kutumia huduma zilizopo ndani ya simu kama vile programu za kuitafuta simu, kutumia namba ya simu, kuwasiliana na kampuni ya mtandao, au kutumia taarifa za mwisho zilipoonekana. Makala hii inaeleza hatua kwa hatua jinsi ya kutafuta simu iliyopotea kwa njia rahisi ambayo kila mtu anaweza kuelewa.
Soma Zaidi...Jinsi ya Kuhifadhi Namba za Simu
Kuhifadhi namba za simu ni hatua muhimu inayomsaidia mtu kulinda mawasiliano yake na kuepuka usumbufu unaoweza kutokea wakati simu inapopotea, kuharibika au kubadilishwa. Namba za simu za familia, marafiki, wateja na watu muhimu zina thamani kubwa kwa sababu zinatusaidia kuendelea kuwasiliana na kufanya shughuli zetu za kila siku. Katika makala hii tutajifunza njia mbalimbali za kuhifadhi namba za simu kwa usalama, jinsi ya kupanga majina ya watu kwenye simu, namna ya kuhamisha namba kwenda kwenye simu mpya, pamoja na makosa ambayo watu wengi hufanya wakati wa kuhifadhi mawasiliano yao. Maelezo haya yameandikwa kwa lugha rahisi ili kila mtu aweze kuelewa na kutumia njia hizi bila kuwa na ujuzi mkubwa wa teknolojia.
Soma Zaidi...Jinsi ya Kusakinisha (Install) App kwa Usalama
Siku hizi simu za mkononi zimekuwa sehemu muhimu ya maisha ya kila siku. Tunazitumia kuwasiliana, kufanya biashara, kusoma, kulipa bili, kutazama video, kusikiliza muziki na hata kuhifadhi taarifa muhimu. Ili simu iweze kufanya kazi hizi, tunahitaji kusakinisha (install) programu mbalimbali zinazojulikana kama app. Lakini si kila app ni salama. Baadhi ya app zinaweza kuiba taarifa zako binafsi, kuharibu simu, kuonyesha matangazo mengi yasiyofaa au hata kusababisha akaunti zako kuporwa. Ndiyo maana ni muhimu kujifunza jinsi ya kusakinisha app kwa usalama. Katika makala hii utajifunza hatua zote muhimu za kusakinisha app kwa usalama, namna ya kutambua app halisi, mambo ya kuzingatia kabla na baada ya kusakinisha app, pamoja na makosa ambayo watu wengi hufanya bila kujua.
Soma Zaidi...