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 web hosting 👉2 kitabu cha Simulizi 👉3 Sira ya Mtume Muhammad (s.a.w) 👉4 Tafasiri ya Riyadh Swalihina 👉5 Kitau cha Fiqh 👉6 Madrasa kiganjani
Post zinazofanana:
Jinsi ya Kutatua Simu Isiyochaji
Simu yako ikikataa kuingiza umeme (kuchaji), usipaniki. Tatizo hili mara nyingi husababishwa na vitu vidogo kama uchafu kwenye tundu la chaji, kebo mbovu, au mfumo wa simu kukwama. Makala hii inakupa hatua rahisi na za haraka unazoweza kufanya nyumbani ili kutatua tatizo hili bila kulipia fundi. Utafiti unaonyesha kuwa asilimia kubwa ya simu zinazodhaniwa zimekufa, hufufuliwa kwa kusafisha tundu la chaji au kubadili kifaa cha kuchajia.
Soma Zaidi...Faida za Screen Protector
Screen Protector ni kifaa chembamba kinachowekwa juu ya skrini ya simu ili kuilinda dhidi ya mikwaruzo, mipasuko na uharibifu mwingine unaoweza kutokea wakati wa matumizi ya kila siku. Watu wengi hununua simu za gharama kubwa lakini husahau kulinda sehemu muhimu zaidi ya simu hiyo, ambayo ni skrini. Makala hii inaelezea kwa kina faida za Screen Protector, aina zake, jinsi ya kuchagua inayofaa, na sababu zinazofanya iwe uwekezaji muhimu kwa kila mwenye simu.
Soma Zaidi...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 Kuhamisha Data Kati ya Simu Mbili
Kubadilisha simu mpya ni jambo la kufurahisha, lakini watu wengi hupata changamoto wanapofikiria jinsi ya kuhamisha taarifa zao kutoka simu ya zamani kwenda simu mpya. Data muhimu kama picha, video, namba za simu, ujumbe, nyaraka, programu na mipangilio inaweza kuonekana kuwa ngumu kuhamisha, hasa kwa mtu ambaye hajawahi kufanya zoezi hilo. Habari njema ni kwamba leo kuna njia rahisi na salama za kuhamisha data kati ya simu mbili bila kupoteza taarifa muhimu. Unaweza kutumia intaneti, huduma za kuhifadhi taarifa mtandaoni, kebo maalumu, Bluetooth au programu zinazosaidia kufanya uhamishaji huo kwa haraka. Makala hii inaelezea hatua kwa hatua jinsi ya kuhamisha data kati ya simu mbili kwa njia rahisi ambayo kila mtu anaweza kuelewa, hata kama hana elimu kubwa ya teknolojia.
Soma Zaidi...Jinsi ya Kusafisha Simu Isifanye Kazi Polepole
Je, simu yako imekuwa ikifungua programu kwa kuchelewa, kuganda mara kwa mara au kufanya kazi polepole kuliko ilivyokuwa mwanzo? Tatizo hili ni la kawaida kwa watumiaji wengi wa simu za Android na hata iPhone. Mara nyingi watu hudhani kuwa simu imeharibika au imezeeka, wakati ukweli ni kwamba kuna uchafu wa kidijitali unaokusanyika ndani ya simu na kuifanya ishindwe kufanya kazi kwa kasi. Katika makala hii utajifunza jinsi ya kusafisha simu ili irudi kufanya kazi vizuri. Utaelewa sababu zinazofanya simu iwe polepole, namna ya kufuta faili zisizo muhimu, kusafisha kumbukumbu ya programu, kuondoa programu zisizotumika, kusasisha mfumo wa simu pamoja na mbinu nyingine zinazoweza kuongeza kasi ya simu bila kutumia fedha.
Soma Zaidi...Jinsi ya Kutuma Faili Bila Intaneti
Kutuma faili bila kutumia intaneti ni njia rahisi ya kuhamisha picha, video, nyaraka, programu au aina nyingine za taarifa kutoka kifaa kimoja kwenda kingine bila kutumia data ya simu au Wi-Fi. Watu wengi wanafikiri kuwa lazima uwe na intaneti ili kutuma faili, lakini ukweli ni kwamba kuna njia mbalimbali zinazokuwezesha kufanya hivyo kwa kutumia teknolojia zilizopo kwenye simu, kompyuta au vifaa vingine. Njia hizi zinaweza kusaidia sana pale ambapo hakuna mtandao, data imeisha, au unataka kutuma faili kwa haraka bila kusubiri kupakua kupitia huduma za mtandaoni. Katika makala hii tutajifunza njia mbalimbali za kutuma faili bila intaneti, jinsi zinavyofanya kazi, faida zake, changamoto zake, na mambo muhimu ya kuzingatia ili kuhakikisha faili zako zinatumwa salama.
Soma Zaidi...