Mafunzo ya HTML Level 2 somo la 8 (HTML FULL COURSE FOR BEGINNERS LESSON 8)
Hili ni somo la mwisho mafunzo ya HTML level 2 (html full course for beginners)
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.background color ni gray, hivyo maandishi nimeyaweka kuwa meupeiki kuendana na rangi. Rangi ya link haikubadilishwa.
CODE ZAOTE NI HIZI
<html>
<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>
<body>
<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>
<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>
<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>
<style>
footer {background-color: grey;}
b {color: darkblue;}
p {text-align: center;}
</style>
<footer>
<p style="color: white;">Masomo haya yamedhaminiwa na bongoclass.com. Tunatarajia kila tutakapomaliza course kuifanyia project. Hivyo project itakayofata baada ya hii tunatarajia iwe na ubora zaidi.
<h1 style="text-align: center;">WASILIANA NASI </h1>
<p>
<a href="mailto:hege@example.com"><b>Email</b></a>
<a href="#"><b>Youtube</b></a>
<a href="#"><b>Facebook</b></a>
<a href="#"><b>Twitter</b></a>
<a href="#"><b>instra</b></a></p><br><br><br>
<h1 style="text-align: center; font-size: 100%;">@bongoclass.com</h1>
</footer>
</body>
</html>
Kama utataka kuhost code hizi pitia masomo yetu yaliyopita utajifunza jinsi ya kuhost bure. Cheki video hii https://www.youtube.com/watch?v=JyHtRDK7QUI
MWISHO WA COURSE:
Huu ndio mwisho wa course hii. Itafuatiwa na HTML ADVANCED COURSE FOR BEGINNERS. Pia tunatarajia course hii itakwenda pamoja na CSS na JAVASCRIPT. Endelea kuwa na si kupata masomo mengine ya PHP na SQL.
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Tarehe: 1970-01-01 03:33:44
Topic: Tehama
Main: Jifunze
File: Download PDF
Views 1049 👉1 Sira ya Mtume Muhammad (s.a.w) 👉2 Madrasa kiganjani 👉3 Simulizi za Hadithi Audio 👉4 Kitabu cha Afya 👉5 Kitau cha Fiqh 👉6 Bongolite - Game zone - Play free game
Post zinazofanana:
Mafunzo ya DATABASE kwa kutumia MySQL DATABASE kwa kiswahili somo la 4
Huu ni mwendelezo wa mafunzo ya database kwa kutumia MySQL na hili ni somo la nne katika mlolongo wa masomo haya. Katika somo hili utajifuza jinsi ya kubadili jina la database na kufuta database. Pia tutajifunza kutumia SQL kufanya hayo.
Soma Zaidi...Mafunzo ya HTML level 1 somo la 4 (HTML basic level FOR BEGINNERS)
Hili ni somo la nne katika mafunzo ya html basic level. Hapa tutakwenda kuona jinsi ya kuzifanyia kazi tag ambazo umejifunza katika somo lililotangulia.
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 DATABASE - MySQL somo la 7
Mafunzo ya database kwa utumia software ya MySQL kwa lugha ya kiswahili na hili ni somo la 7.
Soma Zaidi...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 HTML level 1 somo la 1 (HTML basic level FOR BEGINNERS)
Haya ni mafunzo ya HTML kwa wanaoanza level ya kwanza, na hili ni somo la kwanza katika masomo 8 yatakayokujia katika mtiririko wa course hii.
Soma Zaidi...Mafunzo ya HTML Level 2 somo la 4 (HTML FULL COURSE FOR BEGINNERS LESSON 4)
Karibu tena katika somo la nne la mafunzo ya HTML level2 html full course for beginners. Katika somo hili utajifunza kuhusu attributes na namna zinavyofanya kazi
Soma Zaidi...Utangulizi wa Android App Development
Haya ni mafunzo ya muda mfupi katika kujifunza hasa ujuzi wa kutengeneza Android App hata kama haujui kitu kuhusiana na Android Development
Soma Zaidi...PHP level 1 somo la tano (5)
Haya ni mafunzo ya php na hili ni somo la tano. Katika somovhili utajifunza namna ya kutengeneza functions.
Soma Zaidi...Mafunzo ya database mySQl database somo la 11
huu ni muendelezo wa mafunzo ya Database klwa kutumia MySQL na hili ni somo la 11. katika somo hili tutaendelea kujifunza mpangilio wa muonekano wa data kwenye database.
Soma Zaidi...