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 Bongolite - Game zone - Play free game 👉2 ai web app 👉3 Kitau cha Fiqh 👉4 Dua za Mitume na Manabii 👉5 Sira ya Mtume Muhammad (s.a.w) 👉6 Tafasiri ya Riyadh Swalihina
Post zinazofanana:
Jinsi ya Kufanya Backup ya Simu
Simu ya mkononi imekuwa sehemu muhimu sana ya maisha yetu ya kila siku. Tunatumia simu kuhifadhi namba za watu tunaowajua, picha za familia, video muhimu, ujumbe, nyaraka, programu na taarifa nyingine nyingi. Lakini tatizo linaweza kutokea wakati wowote. Simu inaweza kupotea, kuharibika, kuibiwa au kufutika taarifa zake kwa bahati mbaya. Hapo ndipo umuhimu wa kufanya backup ya simu unapokuwa mkubwa. Backup ya simu ni njia ya kutengeneza nakala ya taarifa zako muhimu na kuzihifadhi sehemu salama ili uweze kuzirudisha pale unapohitaji. Kwa kufanya backup mara kwa mara, unapunguza hatari ya kupoteza vitu muhimu vilivyokuwa kwenye simu yako. Katika makala hii tutajifunza maana ya backup ya simu, umuhimu wake, njia mbalimbali za kufanya backup kwenye simu za Android na iPhone, vitu vinavyoweza kuhifadhiwa, makosa ya kuepuka na hatua rahisi ambazo kila mtu anaweza kufuata hata kama hana ujuzi mkubwa wa teknolojia.
Soma Zaidi...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...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...Jinsi ya Kutumia Face Unlock kwa Usalama
Teknolojia ya Face Unlock imekuwa sehemu muhimu katika simu nyingi za kisasa. Kipengele hiki humwezesha mtumiaji kufungua simu yake kwa kutumia uso badala ya kutumia nenosiri, mchoro wa kufungua simu au alama ya kidole. Ingawa Face Unlock hurahisisha matumizi ya simu na kuongeza kasi ya kufungua kifaa, ni muhimu kujua namna ya kuitumia kwa usalama ili kulinda taarifa binafsi. Katika dunia ya sasa ambapo simu huhifadhi taarifa nyingi kama picha, ujumbe, akaunti za mitandao ya kijamii, taarifa za benki na nyaraka muhimu, usalama wa simu ni jambo la msingi. Kutumia Face Unlock bila kuelewa mipangilio yake kunaweza kuweka taarifa zako katika hatari. Makala hii inaelezea maana ya Face Unlock, jinsi inavyofanya kazi, faida zake, changamoto zake na hatua muhimu za kuitumia kwa usalama zaidi.
Soma Zaidi...Jinsi ya Kuhamisha Mawasiliano (Contacts)
Mawasiliano (Contacts) ni sehemu muhimu sana katika simu zetu kwa sababu huhifadhi majina na namba za simu za watu tunaowasiliana nao kama vile familia, marafiki, wateja na wafanyakazi wenzetu. Watu wengi hubadilisha simu mpya au hupoteza simu zao bila kujua namna ya kuhifadhi na kuhamisha mawasiliano yao. Hali hii inaweza kusababisha kupoteza namba muhimu na kuleta usumbufu mkubwa. Katika makala hii tutajifunza jinsi ya kuhamisha mawasiliano kutoka simu moja kwenda nyingine kwa njia rahisi. Tutaeleza njia mbalimbali zinazoweza kutumiwa kama vile kutumia akaunti ya Google, kuhifadhi kwenye SIM kadi, kutumia Bluetooth, programu maalum na njia nyingine salama. Maelezo haya yameandikwa kwa lugha rahisi ili hata mtu asiye na ujuzi mkubwa wa teknolojia aweze kuelewa na kufuata hatua bila shida.
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...