MAFUNZO YA HTML LEVEL 2

My First Webpage My First Webpage My First Webpage

HTML FULL COURSE FOR BEGINERS

Kaributena katika mafnzo ya HTML na jinsi ya kutengeneza blog na website. Somo hili litakwenda kukupeleka zaidi kwenye ujuzi wa kujuwa kutengeneza website ambayo ipo katika ubora na muonekano mzuri. Uendeshwaji wa masomo yetu haya ni kujifunza kwa vitendo. Kila somo litakujia na video yake. Pia mwisho wa course utashiriki kufanya project kulingana na somo husika. Katika mlolongo huu wa mafunzo haya tutaangalia namna ya kumzawadia ambaye ataleta project iliyo nzuri kuliko wengine. Sharti iendane na masomo yaliyofundishwa.

NITAFAIDIKA VIPI NIKIJIFUNZA HTML?

Kwa kuwa utakuwa umeongeza elimu hiyo pia ni faida. Lakini hzi ni faida tu ambazo utaweza kuzipata:-

1. Utaweza kutengeneza website (wavuti) yako mwenyewe kwa kucode na si kwa kutumia onlineplatform ambapo hutakuwa na umiliki na data zako.

2. Itakuwa rahisi kujifunza lugha nyingine za kikompyuta kama javascript, na php.

3. Html hutumika katika kupangilia muonekano wa blog na website hata kama unatumia onlineplatform kama blogger na wordpress

4. Kwa anayetaka kumanage database HTML itamsaidia katika kupangila muonekano wa taarifa hizo akisaidia na mchanganyiko wa lugha nyingine kama php n.k

5. Html hutumika katika kutengeneza Android App na Web App.

JE HTML PEKEE INATOSHA KWAWEBSITE?

Ndio inatosha kama hutojali kuweka mbwembwe. Angalia website ya kwanza kwenye link hii http://info.cern.ch/hypertext/WWW/TheProject.html ukiangalia kwa uzuri utagunduwa kuwa website ya kwanza imetengenezwa kwa HTML.

KWA NINI UJIFUNZE PAMOJA NASI.

Kuna maeneo mengi ambayo unaweza kujifunza hizi mabo ikiwemo youtube. Lakini kwa nini ninakushauri ujifunze pamoja nasi? Ni kwa sababu:-

1. We work on real project. Mwisho wa kila course tunafanya project ambapo kila mshiriki atashiriki katika kukamilisha project yake akiwa na msaada wa kundi kubwa nyuma yake.

2. Tunajifunza kwa kushirikiana kwa pamoja. Yaani utashiriki mafunzo haya moja kwa moja na wenzio, tauliza swali na kujibiwa ndani ya muda mfupi.

3. Utajifunza kulingana na kifaa chako. Huna ulazima wa kuwa na kompyuta ndio ujifunze code.

MUDA WA COURSE HII

Madomo haya yatakuchuwa muda usiozidi wiki mbili kwa kuskoma. Yaani mwisho ni vipindi 15 huwenda visifike. Inaamaana utajifunza ndani ya wiki 2 utafanya project.

VIGEZO VYA KUSHIRIKI MAFUNZO HAYA:

1. Uwe na simu janja (smartphone) au kompyuta

2. Uwe na uwezo wa kujuwa kusoma na kuandika

3. Uwe mjanja

JE NAHITAJIKA KULIPA?

Hapana, hutahitajika kulipa hata kkidogo katika mafunzo haya. Hata hivyo kama utahitaji kujifunza zaidi nje ya mafunzo haya yes malipo yatafanyika kwa gharama nafuu.

JINSI YA KUANDAA KOMPYUTA YAKO AMA SIMU KWA AJILI YA SOMO:

1. Kwa watumiaji wa simuingia playstore andika TrebEdit itakuja Appkisha download au tumia link hii https://play.google.com/store/apps/details?id=com.teejay.trebedit. Funguwa App, bofya menu, kisha bofya palipoandika workspace kisha bofya alama ya + kutengeneza project mpy. Kisha new project andika jina la folda weka website2, kisha save. Ukiwa ndani ya folda jipa ulilotengeneza bofya alama ya + kisha new folder andika image kisha save.rudi nyima ukiwandani ya folda la websitee bofya alama ya + kisha new file kisha weka jina andiak index.html kisha save. Funguwahilo faili la index.html, futa code ama maandisho yote utakayoyakuta kama yapo, copy code hizo hapochini kisha pest hapo kwenye faili lako. Ukifika hapo upo tayari kuanza somo. Angalia video link yake ipo chini hapoitkusaidia.

2. Kwa watumiaji wa kompyuta funguwa notepad, ama notepadplus ama sublimetext3. unaweza kudowload bure ila kwa notepad haina haja ya kudownload ipo kwenye kompyuta yako. Kwanza tengeneza folder lipe jina website2.kisha ndani ya folder hilo tengeneza folda jingine lipe jina imae. Rudi kwenye folda la website2 Tengeneza faili jipya kisha pest code hizo hapo chini kwenye faili lako.save as andika jina index.html. Lifunguwe faili lako la index.html kwakutumia browser kama chrome litafungukakama website. Angalia video itakusaidia. Unaweza kudownload notepadplus hapa https://notepad-plus-plus.org/downloads/v8.1.4/

CODE ZENYEWE NI HIZI HAPA:

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Welcome to my webpage</h1>

<p>Welcome to my brand new website.</p>

<a href="http://www.google.com">Google</a>

</body>

</html>

HTML NI NINI?

HTML ni katika lugha za kikompyuta iliyopo katika kundi la markup language. Tofauti na watu wengi wanavyodhani kuwa HTML ni programming language. Hii si sahihi, kwa kuwa HTML imekosa sifa ya kuwa logic hivyo haiwezi kuwa programming language. HTML ni kifupisho cha HyperText Markup language. Lugha nyingine zilizo katika kundi hili ni pamoja na css amyao tutakuja kuisoma kwenye muendelezo wa mafunzo haya?

Karibia tovuti zote zinakuwa na HTML. Hivyo HTML ni moja katika lugha zinazotumika kwa wingi katika kutengeneza kurasa za wavuti (web pages). tovuti ya kwanza kuanzishwa duniani ilitoshelezwa na HTML . cheki link hii kufunguwa website ya kwanza duniani World first website http://info.cern.ch/hypertext/WWW/TheProject.html

HISTORIA FUPI YA HTML:

HTML kwa mara ya kwanza ilianzishwa na Tim Berners-Lee, Robert Cailliau na wengineo mwaka 1989. maana halisi ya hypertext ni kuwa faili linaruhusu kuwa na link (kiungo) ambayo unaweza kuhama kutoka ukurasa mmoja kwenda mwengie. Na maana ya Markup Language ni ile hali ya ambayo maandishi kuchakatwa na kuonekana katika mpangilio mzuri. Kufanya hivi unatakiwa utumie tag na attributes. Kutoka miaka hiyo mpaka sasa html imetolewa katika matoleo mengi na sasa tupo katika toleo la 5 yaani html5.

MPANGILIO WA FAILI LA HTML.

Faili la HTML lina sehemu kuu tatu ambazo ni:-

1. Kutaja aina ya faili.

2. Head

3. Body

Ukiangalia code hizo hapo juu mwanzoni kabisa kumeanza na code hii <!DOCTYPE html> hii ndio sehemu kuu ya kwanza ya faili la HTML na kazi yake ni kutambulisha aina ya faili. Hapo mwanzo ilikuwa inatajwa na toleo la HTML lakini kwa sasa si lazima na huchukuliwa kuwa I html5.

Kisha sehemu ya pili ni head ambayo imeanza na <head> na kumaliziwa na </head>. ndani ya tag hizi mbili ndipo zinakaa taarifa muhimu zinazolihusu faili hilo. Nyingi katika taarifa hizi hazionekani na mtumiaji wa tovuti hiyo. Taarifa hizi ni kama link, icon, na title. Kwa kiasi kikubwa taarifa znazopatikana hapa ni zile zinazoitwa metadata ni taarifa ambazo hazipo kwa ajili ya msomaji ama mtumiaji wa website husika, hizi zipo kwa ajili ya ingini pekuzi na kufanyia SEO. HIVYO KWENYE <head> kuna metadata na taarifa nyingine.

Kisha baada ya head inafata <body na mweisho imemaliziwa na </body>. hapa ndipo ambapo utaweka taarifa zote unazozitakazikae kwenye faili lako. Yaani maudhui ya huo ukurasa yanakaa hapa. Na watumiaji wa website hiyo watasoma maudhui hayo.

VITU VINAVYOUNDA FAILI LA HTML

Faili la HTML linaundwa kwa vitu vikuu viwili ambavyo ni TAG na ATTIBUTE. Hata hivyo unatakiwa ujuwe kuwa tag na attribute kwa pamoja huunda Element. Hivyo kabla hatujaenda mbele zaidi tutaona maa na ya hivi vitu vitatu.

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Welcome to my webpage</h1>

<p>Welcome to my brand new website.</p>

<a href="http://www.google.com">Google</a>

</body>

</html>

TAG

Katika HTML tag hufafanuliwa kama seti ya herufi zinazounda amri iliyoumbizwa kwa ukurasa wa Wavuti. Tag ni kama chombo cha kubebea code za HTML. Code zote huandikwa kwa tag. Hapo zamani code zote katika kutengeneza ukurasa wa wavuti zilitumia tag, ijaokuwa siku hizi baadhi ya sehemu akuna haja ya kutumia tag.

Tag hutumika katika html kwa ajili ya kuanzia kuandika elment, na kawaida tag zinakuwa na za kufungulia ambazo huanzwa na < kisha inakuwa na ya kufungia ambayo huazwa na </. mfano wa tag ni kama huu <h1>hello</h1> hapo <h1> ni tag ya kufungulia na </h1> ni tag ya kufungia.

Katika code zilizoonyeshwa hapo juu mifano ya tag za kufungua ni <html>, <head>, <tittle>, <meta>, <body>, <h1>, <p> na <a>. mifano ya tag za kufunga ni </head>, </title>, </h1>, </p>, </a>, </body> na </jtml>

ATTRIBUTES

Hizi hutumika kwa ajili ya kuongeza taarifa za ziada katika element. Na attribute hupatikana kwenye tag ya kufungia. Attribute inakuwa na value ndani yake. mfano wa attribute ni kama color na value ni pale unapotaja rangi ya yake. Kwa mgano attribute rangi na value ni kijani. Ama attribute ni uzito na value ni 200kg.

Katika code zilizoonyeshwa hapo juu attribute ni charset=”” na value yake ni UTF-8, attribute nyingine ni name=”” na value yake ni description na content=”” na value yake ni this is my first website na attribute nyingine ni href=”” na value yake ni http://www.google.com. tutajifunza zaidi kwenye mwendelezo.

Element:

Element ni muunganiko wa tag na maudhui yaliyomo. Kwa mgano taga ya paragraph <p> hello</p> hapa kuanzia <p> hello</p> kwa pamoja huitwa element. Kwa ufupi element huundwa kwa tag ya kufungulia, attributes. Maudhui na tag ya kufungia.

Katika code zilizopo hapo juu mifano ya Element ni <title>My First Webpage</title> katika element hiii kuna tag ya kufungulia ambayo ni <tittle> kuna maudhui ambayo ni “My first webpage” pia kuna tag ya kufungi ambayo ni </title>. mfano mwengine wa element ni

<a href="http://www.google.com">Google</a> hapa kuna tag ya kufungulia <a kisha inafatiwa na attribute href=” kisha inafatiwa na value http://www.google.com kisha inafatiwa na maudhui ambayo ni Google mwisho ni tag ya kufungia ambayo ni </a>. tutajifunza zaidi kwenye mada zijazo.

UFAFANUZI WA CODE ZILIZOTUMIKA HAPO JUU

Kwa kuwa sasa tunajuwa TAG, ATTRIBUTES na ELEMENTS sasa hapa tutakwenda kuona kila tag ilikuwa na kazi gani katika kutengeneza faili la HTML. Kumbuka hapo juu tulisha jifunza kuwa faili la HTML lina sehemu kuu tatu ambazo ni kutaja jina la faili, head na body.

<!DOCTYPE html> kazi ya hii ni kutambulisha kuwa lugha ya kikompyuta itakayotumika kwenye faili hilo. Katika mfano huu lugha itakayotumikani html5.

<html> hii humaanisha sasa kuanzia hapa ndipo unaanza kuandika code za HTML. Tag hii pia huandikwa hivi <html lang=”en” kumaanisha kuwa maudhui ya faili lako yatakuwa katika lugha ya kiingereza.

<head> Tag hii sasa inatambulisha kuwa zinazofata ni taarifa zametadata na nyinginezo. Katika mfano wetu hapo juu kwenye <head> kuna taarifa hizi:-

1. <title> kwa ajili ya kutambulisha title (kichwa ) cha faili au sema kichwa cha habari

2. <meta> metadata ambazo ni muhiu kwa ajili ya kuhifadhi taarifa muhimu za faili lako kama character encoding, name na description. Katika code zetu utaona kuna <meata charset=”UTF-8”> hii ya 8 inaweza kutumika kuonyesha alama, herufi na namba karibia zote. Ijapokuwa unaweza kutumia kama UTF-16 kwa lugha ya kichina. Tuaona zaidi somo hili mbela. Metadata nyingine iliyotumika ni name na descrription kwa ajli ya kutoa muhtasari wa failili hili kuwa linakwenda kuzungumzia nini. Tagnzima ni hii <meta name="description" content="This is my first website">

<body hii kuonyesha kuwa sasa tunakwenda kuongia kwenye sehemu kuu ambayo ndipo kwenye maudhui ya faili letu. Ukiangalia vyema kwenye body kuna tag zifuatazo:-

1. <h1> hii ni kwa ajili ya kuonyesha heading yaani kichwa cha habari cha maudhui. Heading h1 ni heaing kubwa. Mfano <h1>Welcome to my webpage</h1>

2. <p> hii hutumika kuandikia paragraph.<p>Welcome to my brand new website.</p>

3. <a> hii hutumika katika kuweka link (kiungo) kwaajili ya kuunganisha faili moja na jingine. Mfano <a href="http://www.google.com">Google</a> kwa ajili ya kuunga ukurasa na google kama inavyojionyesha kwenye link kuwa ukiclick nenogoogle utakwenda kwenye tovuti ya Google.

KUKAGUWA FAILI LAKO KAMA LIPO SAWA:

Kwa watumiaji wa simu kwenye App yako bofya kitufe cha ku save kinafanan na kile cha kwenye microsoft word. Kisha bofya kitufe cha kupreview kilichofanana na cha kuplay. Hapo faili lako litafunguka kama website.

Kwa watumiaji wa kompyuta save as kisha weka jina index.html. Open with chaguwa browser yeyote kama chrome, ama firefox ama opera.hapo litafunguka kama website.

TAG NA MGAWANYIKO WAKE:

Tga zinawezakugawanywa katika makundi mengi. Kulingana na wavuti ya w3school tag zimegawanyika katika makundi haya:-

1. Basic tag hizi ndio tag msngi znazotumika katika andishi kama vile <html>, <head>, <title> <body>< h1> - <h6> <p> <br>

2. Formating hutumika kwa ajili ya kuweka mipangilio ya maandishi kwenye maandishi

3. Form and input hisi hutumika katika kutengeneza fomu za kuwejaza na kutuma taarifa

4. Frames hizi hutumika katika kutengeneza frame kwa ajili ya kuweka maudhui yaliyo nje ya faili husika

5. Images: hizi ni tag zinazotumika katika picha

6. audio au video tag hizi hutumika katika kuweka video au audio

7. Links hizi ni tag ambazo zinahusika katika kuweka viungo (links)

8. Lists tag hizi huhusika katika kuweka orodha

9. Tables hizi ni tag ambazo huhusika katika kuchora majedwali

10. Style tag hizi hutumika kuweka mbwembwe au stailikwenye maudhui

11. Meta info hutumika kuweka metadata

12. Programming hizi hutumika katika kufanya programming ndani ya html kwa kutumia lugha nyingine kama javascript

Hapo chini nitakuletea orodha ya tag zaidi ya 70.usikose somo la nne ambapo tutakwenda kujifunza namna ambavyo tag hizi zinafanya kazi. Katika somo la nne tutakwenda kupiga code kwa vitendo tuone tag hizo zinabadili vipi muonekano wa faili ;ako.

ORODHA YA TAG ZA HTML:

1. <dt> kuataja jina la vitu ama kitu kwenye orodha ya ufafanuzi

2. <em> kuweka msisitizo kwenye neno ama maneno

3. <html> kuanzisha faili la html katika kuandika code

4. <i> kuweka italics kwenye herufi

5. <iframe> kuweka maudhui ya kutoka nje ya faili husika

6. <img> kuweka picha

7. <ins> kuingiza maneno mengine baada ya kufuta

8. <kbd> kuonyehs keyboard

9. <label> kuandika lebo

10. <li>, <ul> na <ol> katika kuweka orodha ya vitu

11. <link> kuweka maudhui mengine ya yanayohusiana na faili mabayo yapo nje ya faili husika.

12. <main> huweka maudhui makuu ya document

13. <base> kuweka link msingi ya tovuti

14. <bdi> kumadili muelekeo wa maneno katika kikundi cha maneno

15. <bdo> kumadili uelekeo wa herufi

16. <blockquotes> hutumika katikakunukuu kifungu kikubwa cha maneno

17. <body> hutumika kuweka body kwene faili lako.kutamblisha kuwa maudhui ynaanzia hapo

18. <br> kwaajili ya kukata msitari maneno na kuanza kuandika msitari mwingine

19. <button> hutumika kuweka batani

20. <embed> kuweka maudhui kutoka nje ya website faili husika

21. <figure> na <figcaption> hutumika katiaka kuweka kielelezo kwenye picha

22. <footer> na <tfooter>kuweka footer sehemu ya chini ya mwisho ya ukurasa wa wavuti

23. <form> hutumika katika kuweka fomu

24. <h1> hadi <h6> hutumika kuweka heading

25. <head> kuweka sehemu ya <head> kwenye html

26. <header> kuweka sehemu ya juu ya ukurasa wa wavuti

27. <hr> kupoga msitari mlalo

28. <caption> hutumika kuweka caption kwenye picha

29. <cite> kuweka kicha cta hapari kwenye kazi unapoweka reference

30. <code> kuandika code text

31. <dd> kwa ajili ya kuweka ufafanuzi kwenye orodha ya maneno

32. <del> kwa ajili ya kufuta maneno ama herufi

33. <details> huelezea ufafanuzi wa ziada ambao msomaji anaweza kuufich ama kuuona.

34. <dfn> kwa ajili ya kuandika definition

35. <dialog> kuweka dialog box

36. <div> kuweka kifungu cha paragraph

37. <dl> kuweka orodha ya ufafanuzi

38. <map> kutaja ramani ya picha

39. <mark> kwa ajili ya kuhighlite maandishi

40. <meta> kuweka metadata

41. <nav> kuweka navigation bar. Upau wa menyu

42. <optiom> kuweka orodha ya wima ya machaguo

43. <p> kuweka paragraph

44. <picture> kuweka picha

45. <pre> kuonyesha maandishi katika mpangilio uleule wa kwenye code

46. <progress> kuonyesha maendeleo

47. <q> kwa ajili ya kunukuu

48. <s>kwa ajili ya kuonyesha maandishi kuwa sio sawa

49. <section> hutumika kuweka section za maudhui kwenye faili lako

50. <small> kuweka maandishi madogo

51. <source> kuweka chnzo cha video au audio

52. <span> kuweka section ndani ya paragraph

53. <strong> kuonyesha maneno muhimu kwenye maudhui

54. <style> kuweka staili mbalimbali za uandishi

55. <sub> kuweka herufi za kupanana kwa chini

56. <summary> kuweka muhtasari wamaudhui

57. <sup> kuweka herufi za kupandana kwa juu

58. <table> <th>, , <td>, <tr> <thead> na <tbody> kuchora table

59. <textarea> kuweka ukurasa wa kuandikia kwenye fomu

60. <title> kuweka kicha cha habari cha faili

61. <u> kupigia msitari maneno

62. <var> kuweka variable

63. <video> kuweka video

64. <wbr> kuchaguwa wapi maandishi yakate kama msitari umejaa.

65. <-- …--> hii hutumika kukoment

66. <!DOCTYPE> hutumika kutaja aina ya document

67. <a> kwa ajili ya kueka link

68. <abbr> kwa ajili ya kuweka abbreviation

69. <address> kwa ajili ya kuandika anuani

70. <area> kwa ajili ya kuonyesha sehemu ndani ya picha

71. <article> kwa ajili ya kuandikia makala (article)

72. <aside> kuweka maudhui mengine kwenye ukurasa

73. <audio> kuweka saudi

74. <b> kubold

Cheki video hii

https://youtu.be/6BbmHd2y19I

TAG Zipo nying ila kwa uchache tutakwenda kuzungumzia hizo 75. Hakikisha unalipata somo la nne ambalo litakwenda kuangalia kila tag katika ambazo zipo hapo juu na namna ambavyo inafanya kazi. Litakuwa ni somo refu hivyo hakikisha unaangalia video yake kwa umakin.

Mafunzo haya yanakujia kwa ihsani ya:-

Bongoclass.com

Web: www.bongoclass.com’

Email: [email protected]

#bongoclass #html

UFAFANUZI WA TAG ZILIZOTAJWA KATIKA SOMO LA TATU.

Katika somo lililotangulia tumejifunza code tag mbalimbali, sasa katika somo hili tunakwenda kuzifanyia kazitag hizo. Kuna nyingine hatutazigusa katika somo hili. Hivyo taga nyinginezo ambazo hazitatumika katika somo hili tutaziona katika masomo yajayo.

Kwa wale wa simu Endelea kutumia App ya TrebEdit na kwa wale wa kompyuta tumia text Editor ulio nayo kama notepad, notepad plus, sublimetext na nyinginezo. Katika video hapo nimetumia text Editor ya phpstorm ili kuokoa muda zaidi.

Endelea kuzifanyia mazoezi tag hizi. Somo linalofata tutaanglia attributes na namna zinavyoweza kufanya kazi katika uandishi na utengenezaji wa website.

<!DOCTYPE html>

<head>

<title>Kicha cha faili</title>

</head>

<body>

<h1>Heading 1</h1>

<h2>heading 2</h2>

<h3>heading 3</h3>

<h4>heading 4</h4>

<h5>heading5</h5>

<h6>heading 6</h6>

<p>paragraph ya kwanza ya maudhui yako

<br>hapa nimekata msitari<br>nimeanza mpya

<br><br><br>Nimeruka nafasi 3

</p>

<hr>nimepiga msitari,<hr>

<abbr title="TAasisis ya Kupambana na Kuzuia Rushwa"> TAKUKURU </abbr>

IT MANAGER<BR>

BONGOCLASS.COM<BR>

P.O.BOX 30<br>

PANGANI

</address>

fano wa ku<B>bold</B>maandishi

<p>www.bongoclass.com</p>

<bdo dir="rtl">www.bongoclass.com</bdo>

<p>Mwalimu Nyerere alisema</p>

Madam Speaker and, I think I may say, Comrade President and Comrade Vice President, ladies

and gentlemen. I have told you already how I felt when you asked me to come and talk here. And

then I got the message that you were coming.

</blockquote>

Mwalimu alisema <q>Madam Speaker and, I think I may say, Comrade President and Comrade Vice President, ladies

and gentlemen.</q>

<p>maandih haya <del>yamekatwa</del> pia haya nayo <s>yamekatwa</s> na haya <ins>yameingizwa</ins>

na haya <u>yapo underline, yamepigiwa msitari</u> na haya <mark>yamechaguliwa (highlite)</mark>

na haya <strong>yamekolezwa</strong>na haya <em>yamewekewa msisitizo</em> na haya yamefanyiwa <i>italics</i>

na haya ni <small>madogo</small> yaani small</p>

<label>Inapakuwa</label>

<pre>

sungura afahamika ujanja kajijazia

wenzake ana wacheka sungura kuwazomea

</pre>

Ayo maandishi hapo juu kama ningetumia tag ya p muonekano wake ungekuwa hivi:-

<p>

sungura afahamika ujanja kajijazia

wenzake ana wacheka sungura kuwazomea

</p>

<span>Maji hutambulika kama H</span><sub>2</sub>O na mbili kioeo cha tatu huandikwa 2<sup>3</sup>

<p>kanuni ya mraba ni <var>Urefu</var> X <var>upana</var> au <var>Ur</var> X <var>Up</var></p>

tumejifunza yafuatayo:-

<ul>

<li>python</li>

</ul>

Pia tutajifunza na haya:-

<ol>

<li>database</li>

<li>marketing</li>

<li>affiliate programs</li>

</ol>

tumejifunza vifuatavyo:-

<dl>

<dt>HTML</dt><dd>HyperText markup language</dd>

<dt>CSS</dt><dd>Cascading Style Sheet</dd>

<dt>PHP</dt><dd>Hypertext Preprocessor</dd>

</dl>

<h1>kuchora majedwali</h1>

<style>

table, th, td {

border: 1px solid black;

}

</style>

<table>

<tr>

<th>mafunzo</th>

</tr>

<tr>

</tr>

<tr>

<td>database</td>

<td>2 weeks</td>

</tr>

</table>

<h1>Kuweka taarifa za zida</h1>

<summary>IT manager kutoka bongoclass ametangaza zawadi nono kwawashiriki wa shindano</summary>

<p>Hayo ameyasema jana katika somo la tatu la mafunzozo ya HTML. washindi wanatarajiwa kupewa zawadi nino

ikiwepo fedha taslim</p>

</details>

<form>

<label>Email</label>

<button>submit</button>

</form>

</body>

</html>

Unaweza kuangalia video ya somo hili hapa chini namna ambavyo unaweza kucode kwa kutumia tag hizi:-

https://youtu.be/xNK2uMbwizU

Mafunzo haya yamekujia kwa ihsani ya:-

bongoclass.com

Web: www.bongoclass.com

Email: [email protected]

ATTRIBUTES NA NAMNA AMBAVYO ZINAFANYA KAZI:

Kama tulivyoona katika somo lililopita tulijifunzakuwa Attributes zina kazi ya kuongeza taarifa nyinginezo kwenye tag. Katika somo hili tutakwenda kujifunza zaidi kluhusu attributes, sifa zake, kanuni zake na zinavyofanya kazi. Kwa ufupi attributes zinawza:-

1. Kuwa katika element yoyote ya HTML

2. ATTRIBUE HUPATIKANA KWENYE TAG YA KUANZIA NA SI YA KUFUNGIA

3. HUONGEZA TAARIFA ZA ZIADA KWENYE ELEMENT

4. Attributes zinakuwa katika kanuni hii jina=”” naani unaanza kutaja jina la attribute kisha unaweka alama ya sawasawa kisha thamani ya attribute inawekwa ndani ya alama za funga semi.

MIFANO YA ATTRIBUTES

1. Attribute wakati wa kuweka link. Hii hukaa kwenye tag ya <a> pale unapotaka kuweka link ya ukurasa mwingine wa wavuti.

Kwanza utaweka tag ya <a kisha itafatiwa na jina la attribute href (hhypertext referrence) kisha itafatiwa na alama ya = na thamani ya attribute itawekwa kwenye alama za “”.

Mfano

<a href=”www.bongoclass.com”>weka jina la link hapa</a> katika mfano huu <a ndio tag na href ni jina la attribute na “www.bongoclass.com” ndio thamani ya attribute.

2. ATTRIBUTE ZINAZOTUMIKA KUWEKA PICHA

Attribute hizi hukaa kwenye tag ya <img lengo la attribute hii ni kuweka chanzo cha picha na jina la picha. Chanzo cha picha huwekwa kwa src=” ” na jina la picha huwekwa kwa alt=” ”

Mfano:

<img src=”bongo.png” alt=”picha”> katika mfano huu <img ndio tag na src ndio jina la attribute na “bongo.png” ndio thamani ya attribute. Pia katika mfano huu una attribute mbili. Attribute nyingine jina lake ni alt na thamani yake ni “picha”. attribute hii hutumika kuonyesha jina la picha hiyo. Endapo picha haita onekana kwa mfano mtandao ukawa low basi jina ndio huonekana.

3. Attribute zinazotumika kuonyesha ukubwa kama urefu na upana. Attribute hii ni height kuonyesha urefuwa kimo na width kuonyesha upana wa kitu.

Mfano

<img src=”picha.png” width=”100%” alt=”picha”> katika mfano huu attribute nyingine hapo ni width kuonyesha upana wa picha na thamani yake ni 100%.

4. Attribute ya kuweka style

Atribute hii hutumika katika shughuli nyingi. Kwa mfano ukitaka kuweka rangi kwenye maandishi, ama kubadili muelekeo, na mpangilio wa herufi atribute hii hutumika. Kwa mfano:-

<p style=”color:yellow”>maandishi haya yatakuwa na rangi ya njano</p> katika mfano huu attribute ni style na thamani yake ni color:red yaani rangi nyekundu.

5. Attribute ya title yaani ya kuwekea kicha cha habari cha faili. Mfano <h1 title=”HTML”> SOMO LA HTML</title> katika mfano huu tumeweka jina kwenye tag ya <h1> hivyo attribute ni title na thamani yake ni “HTML”.

Attribute nyingine kama ile ya lang tuliotumia kuweka lugha inayotumika katika faili la html.pia atribute za metadata na nyinginezo tutaziona katika masomo yajayo. Katika kutumia attribute unashauriwa kutumia herufi ndogo na funga na funguwa semi mbilimbili yaani “ kama ilivyo kwenye mifano hapo juu.

Hivyo katika mifano hiyo tumetumia attributes zifuatazo:-

1. href

2. src

3. width

4. alt

5. style

6. Title

Tukutane somo lijalo tutakapokuja kujuwa zaidi jinsi ya kuweka stayle mbalimbali katika uandishi katika html. Somo hili litaanza kutumia tag na attributes kwa pamoja katika ufanisi wa kufanikisha uandishi.

ATTRIBUTE AU TAG YA STYLE

Katika somo lililotangulia tuliweza kuona namna ambavyo attribute zinavyofanya kazi. Pia tuliona aina mbalimbali za attributes na mifano yake. Katika somo hili tutakwenda kuangalia attribute ya style tu. Hii ni moja kati ya mwanzo mzuri wa kujifunza CSS.

Style inaweza kuwekwa ndani ya element na nje ya element. Stayle ikiwa nje ya element inaweza kutumika kwa element zaidi ya moja. Na ikiwa ndani ya element hutumika kwa element husika tu. Wakati mwingine kama kumetokea ufungaji mbaya wa style inaweza kuathiri element nyingi tofauti na makusudiwa.

STYLE INAYOWEKWA NJE YA ELEMENT:

Style ikiwa nje ya element huwekwa kwa kutumia tag ya CSS ambayo ni <style> kisha tribute zote zinakuwa ndani ya tag hii. Kuna faida kubwa ya kutumia style hii ya nje ya element kuliko ya ndani ya element.

Kwa mfano style ya nje ya element hufanya code ziwe nzuri, hupunguza mrundikano wa code ndani ya element pia huweza kuweka stayle kwenye element zaidi ya moja. Hapo chini nitakuletea mifano ya style za nje:-

1. JINSI YA KUWEKA RANGI

Tume jifunza katika masomo yaliotangulia kuwa unapotaka kuweka rangi utatumia attribute ya color. Kwa mfano: <p style=”color:yellow”>hellow</p> katika mfano huu neno hellow litakuwa na rangi nyekundu. Sasa ninataka kuweka kila element na rangi yake. Chukulia mfano una element tag hizi <b>, <p>, <h1> kila moja uwe na rangi yake. Kwa mfano kama huu wa style ya ndani utafanya hivi:-

<b style=”color:yellow”>hellow</b>

<p style=”color:red”>hellow</p>

<h1 style=”color:blue”>hellow</h1>

Sasa kwa kutumia style ya nche utafanya hivi:-

1. Kwanza utaweka tag ya style

2. Utaandika tag mfano p

3. Utaweka bano hili {}

4. Attribute zote ziwe ndani ya hayo mabano

5. Kama utakuwa na attribute zaidi ya moja tengenisha kwa alama hii ;

6. Usisahau kufunga tag ya style.

7. Kisha andika element zako.

MFANO:

<html>

<style>

b {color: yellow}

p {color: red}

h1 {color: blue}

</style>

<b>hellow i'm yellow</b><br>

<p>hellow i'm red</p>

<h1>hellow I'm blue</h1>

</html>

Katika mfano huo utaona maandishi yaliyo kwenye tag ya b ni ya njano, na ya kwenye <p> ni ya wekundu na ya kwenye <h1> ni ya buluu.

2. KUWEKA BACKGROUND COLOR

Kama tulivyoona kwenye mfano wa hapo juu jinsi ya kuweka rangi kwa kutumia style iliyo nje ya element. Na hapa tutaona jinsi ya kutumia style ya nje ya element kueweka background color.

Katika hali ya kawaida background color kwenye element huwekwa kwa kutumia style= kisha utaweka value ya atribute style. Kwa mfano

<p style=”background-color:green”>Hellow I’m green</p> Katika mfano huu maneno haya yatakuwa na rangi ya kijani. Sasa ikiwaninataka kutumia background color moja kwenye element zaidi ya moja, mfano kwenye tag ya <p>, <b> na <I>. Hapa nitatumia kwanza tag ambayo inaweza kubeba tag zote hizo kw amfano unaweza kutumia tag ya <body> lakini hii itaweka backrond kwenye ukurasamzina. Ama unaweza kutumia tag kama <div> hii inaweza kubeba tag nyingi ndani yake. Katika mfano wa hapo chini nitatumia zote mbili <body> na <div>

<html>

<style>

body {background-color: pink;}

</style>

<body>

<p>hellow i'm paragraph</p>

<b>hrllow I'm bolded text</b>

<i>hellow I'm italic</i>

</body>

</html>

Kwa kutumia <div> mfano:-

<html>

<style>

div {background-color: purple;}

</style>

<div>

<p>hellow i'm paragraph</p>

<b>hrllow I'm bolded text</b>

<i>hellow I'm italic</i>

</div>

</html>

3. KUWEKA MIPANGILIO YA MAANDISHI

1. Kuongoza ukubwa wa maneno kwenye element

2. Kupangilia maandihi yakae upandegani

Kuongeza ukubwa wa herufi tunatumia attribute ya font-size. Mfano unataka maandishi ya kweye e;ement p yawe na ukuwa sanna kwa asilimia 200 utafanya:-

<p style=”font-size:200%”>hellow</p>

Ikiwa ninataka maandishi atika hiyo element p yajipange kwa kati nitasema <p style=”text-align:center><hellow</p>

Hali zote mbili hizi unaweza kuzifanya kwa kutumia style moja , kwa sababu zote zipo kwenye tag moja ya <p> kufanya hivi utatakiwa kuzitengganisha kwa kutuia alama hii ;. Ingelikuwa zote ni za tag tofauti tungefanya kwa kutumia dag nyingine inayobeba vitu vingi kama <div> kama tulivyoona katika mfano liotangulia.:-

<p style=”font-size:200%; text-align:center”><hellow</p> hata hivyo tokeo kma ahili tunaweza kulipata kwa kutumia tag ya style ya nje kwa kufanya hivi:-

<html>

<style>

p {font-size: 200%; text-align: center;}

<p>hellow I'm paragraph</p>

</style>

</html>

ATRIBUTE YA TEXT-ALIGN NA FONT SITZE

Hiz mbili huweza kutumika kwenye tag moja na kuleta mbadiliko tofauti. Kwa mfano text-align hii inaweza kupanga maandishi yakae katika mpangilio gani. Kama unahitaji maandishi yako yajipange kati yaani yaanzie katikati utatumia text-align:center. Na kama unahitaji yajae ndani ya ukurasa utatumia text-align:justify. Na kama unahitaji yajipange kwa kuanzia upande wa kulia utatumia text-align-right na kama unataka yajipange kwa kuanzia kushoto utatumia text-align-left. Angalia mifano ya hapo juu ufanyie mazoezi.

Kwa upande mwingine font-size yayewe ni kwa ajili ya kukuza ama kudogodisha maandishi. Katika hali ya kawaida maandishi yapo katika 100% ila uktaka kuyapunguza kubwa utapunguza hapo. Kwa mfano unaweza sema font-size:40% hapo yatakuwa madogo kwa asilimia 40 na kama unataka kuyakuza zaidi utatongeza kutoka 100 kwenda juu. Kwa mfano font-size:300% hapa maandishi yatakuwa makubwa sana.

Somo lijalo tutakujaona namna ambavyo <STYLE> inaweza kutumika kwenye tag ya <a> na <img> na kuleta mabadiliko katika muonekana wa ukurasa wako.

MATUMIZI YA STYLE KWENYE TAG YA <a>, na <img>

Unaweza kuweka style kwenye link na kbadili muonekano wa kawaida. Kwa mfano katika hali ya kawaida link inakuwa na rangi ya buluu na hupigiwa m,sitari pindi unapobofya. Lakini hali hizi unaweza kuziondoa kwa kuondoa decoration. Kwa mfano

<a href=”www.bongoclass.com”>link</a> hii unaweza kiwekea style kwa

<a style="text-decoration: none;" href="https://www.bongoclass.com">hellow</a> pia unaweza kutumia style ya nje ya element kwa kufanya hivi:-

<html>

<style>

a {color: red;

text-decoration: none;}

</style>

<a href="https://google.com">hellow</a>

</html>

Katika mfano hapo juu link itakuwa na rangi nyekundu na haitapigiwa msitari

MATUMIZI YA STYLE KWENYE PICHA

Kama ilivyo maeneo mengine picha inaweza kutumia style ya ndani ya element na nche. Kwa mfano unataka kuiweka picha kati ama upange wa kulia ama wa kushoto utatumia float. Kwa mfano

<img rsc=”#” float=”left” width=”100%”> katika mfano huu picha itakaa upande wa kushoto na itakuwa na upana wa kulingana na ukubwa wa ukurasa ukrasa yaani 100%. matokeo haya unaweza kuyapata kwa kutumia style ya nje kwa kufanya hivi:-

<html>

<style>

img {float: left;

width: 100%;}

</style>

</html>

Katika somo linalofata utajifunza namna ya kuweka taarifa kwenye <head>, kuweka menu na footer.kwenye <body>. somo linalokuja ni katika hatuwa muhimu za kujifunza kutengeneza website kwani kila website inakuwa na menu, footer na lazima ujuwe namna ya kuweka taarifa vyema kwenye <head>

Katika website sehemu hizi zina kazi ya kuweza kutambulisha zaidi website na mahusiano kati ya ukurasa na ukurasa. Sehemu hizi ni muhimu kwa SEO na wanaotaka kuichunguza blog ama website. Katika somo hili tutakwenda kuangalia sehemu hizi, na jinsi ya kuzitengeneza ama kuziwekea maudhui.

1. <head>

Shemehu hii inakaa taarifa muhimu kuhusu ukurasa. Taarifa hizi unawezakuziita metadata. Kwa mfano hapa unaweza kuweka taarifa hizi:-

A. Jina la faili kulingana na maudhui

B. Jina la mwandishi

C. Muhtasari kuhusu maudui

D. Character set

E. Viungo vingine muhimu kama link za style za nje

F. Taarifa kuhusu ukubwa wa kifaa kitakachofunguwa faili husika.

G. Icon n.k

Kwa mfano unaweza kuweka taarifa hizo

<head>

<title>weka Title hapa</title>

</head>

2. <header> hii ni sehemu ya juu kabisa ama ya mwanzo. Sehemu hii ndio ambapo menu hukaa. Sehemu hii ndio inatakiwa ikae mwanza tu ndani ya tag ya <body> . tag ya <menu> inatakiwa ikae hapa ndani ya <header>. kwa ufupi <header> ni kama section ambazo hubeba tag nyingine ndani ake. Kama tulivyoona matumizi ya <div> katika masomo yaliyotangulia.

Kuweka menu tunatumia tag ya <menu> tag hii tutaiweka kwenye section ya <header> tunaweza kutumia style ili kubresha muonekano wa menu yetu. Tunaweza kutumia batanina link ili kuunganisha ukurasa mmoja na mwingine. Kwa mfano:-

<html>

<style>

menu {background-color: black;}

a {color: red;

text-decoration: none;

}

button {font-size: x-large;}

</style>

<heade>

<menu>

</menu>

</heade>

</html>

Katika mfano huo hapo juu tumetumia style ya nje. Rejea somo lililotangulia kwa ufafanuzi zaidi jinsi ya kuweka style za nje. Hapo tumeweka tag ya <menu> ndani ya tag ya <header> hivyo tunaweza kuweka taarifa nyingine kwenye tag ya <header> baada ya menu. Kama utakuwa na taarifa nyingine utaziweka.

Baada ya kumaliza menu itafata maudhui ya ukurasa wako. Unaweza kutumia <div>, na <article> kama section za kuweka tag nyingine ili kuandika maudhui bora. Baada yakumaliza kuandika maudhui utamaliza ukurasa wako kwa kuweka <footer>

3. <footer>

Hii ni sehemu ya chini ya website ama blog. Sehemu hii mara nyingi iakaa contact, link, na taarifa za ziada. Katika sehemu hii hatuweki maudhui ya ukurasa. Mara nyingi sehemu hii huwa na rangi nyeusi, ila sio sheria unaweza kuweka rangi yeyote unayoona inafaa.

Ili kuweza kuweka footer utatumia tag ya <footer> kisha utachaguwa ni taarifa zipi unataka kuweka. Unaweza pia kutumia style ili kuboresha muonekano. Mfano:-

<html>

<style>

footer {background-color: grey;}

b {color: darkblue;}

</style>

<h1>WASILIANA NASI </h1>

<a href="mailto:[email protected]"><b>Email</b></a>

<a href="youtube.com"><b>Youtube</b></a>

<a href="facebook.com"><b>Facebook</b></a>

<a href="twitter.com"><b>Twitter</b></a>

<a href="instagram.com"><b>instra</b></a>

</footer>

</html>

Kwa ufupi hizi ndio sehemu kuu tatu za ukurasa wa wavuti ambazo hubeba taarifa za ziada za ukurasa. Nasema taarifa za ziada kwa sababu maudhui ya ukurasa hayakai kwenye sehemu hizi. Chukulia mfano unataka kufundisha jinsi ya kuandaa shamba la mipapai. Maudhui yako hayatakaa kwenye menu, ama footer ama header ama head.

Tukutane somo linalofata tutakaloangalia jinsi ya kugawa ukurasawako wa HTML.

KUGAWA UKURASA WA HTML

Kwa kutumia HTML unaweza kugawa ukurasa katia row. Kwa wale ambao wanatumia microsoft word hapa utaweza kunielewaa. Mfano unatye taarifa yako. Kisha ukataka kugawa doc katika sehemu tatu yaani kuli, katu na kushoto. Hiki ndio kitu ninachokizungumzia hapa. Katika kugawa huku tutatumia tag section ambayo ni <div>

Ili kufanikisha lengo letu kwa urahisi tutatumia baadhi ya element za CSS. Tutatumia class. Class itakuwa ndio attribute, div itakuwa tag na value itakuwa ni section tunazokwenda kuweka. Hapa unatakiwa pia ufanye hesabu. Kama ukurasa mzima una upana wa 100%, je nikiugawa sehemu tatu kwa upana kila kisehemu kitakuwa na upana gani? (100/3 = 33.3).

Unaweza kutumia style za nje ama ya ndani.ni vyema kutumia style ya nje ili kupunguza msongamano wa tag. Tunatumia style ili kuweza kupangilia muonekano wa sehemu zetu tutakazogawa.tunatumia class ili kuweza kubeba maudhui ya kila kisehemu, na dutatumia div iwe kama chombo cha kubebea maudhui (tag na content).

Kuweza kufgawa ukurasa fanya hivi:-

1. Tumia stayle ya nje

<style>

</style>

2. Weka alama za kutambulisha visehemu utakavyogawa ndani ya style. Anza na kuweka kidoto kabla ya kuweka hiyo alama. Kidoto ndio kitajulisha kuwa hiyo ni value kwenye attribute ya class. Mfano .left .right .middle

3. Iki kupangilia vigawany hivyo inatakiwa kimoja kiwe kulia, kingine kushoto na kingine kati. Kufanya hivi ndani ya kila kigawanyo unatakiwa ueleze kikae upande gani. Hivyo utatumia float. Hii ni kama vile tulivyoifanyia picha kwenye masomo yaliopita. Tuliona namna ya kuifanya picha ikae upande unaotaka. Mfano utafanya

<style>

.left {float: left; }

.middle {float: left; }

.right {float: right;}

</style>

Hapo utakuwa tayari umegawa ukurasa wako, kushoto, kati na kulia. Sasa ili kufanya kila sehemu ikae sawa mahala pale tunatakiwa tugawanye kihisabu, ili kila kimoja kikae mahala pake bila ya kuathiri vingine.

4. Kwa kuwa contente zote zitakaa ndani ya div section hivyo tutakwenda kuigawa div. Fanya hivi weka style ya div ndani ya tag ya style, kisha width iwe ni 33.3%. kwa maana kuwa 100% ukiigwa sehemu tatu tunapata 33.3%.

<style>

.left {float: left; }

.middle {float: left; }

.right {float: right;}

div { width: 33.3%;}

</style>

5. Baada ya hapo sasa tunakwenda kutumia style zetu kwenye section ya div.badala ya kutumia style attribute sasa tunatumia class. Na kanuni ni ileile ya kuweka alama ya = ikifuatiwa na funga semi na kuweka value kisha funga semi. Kwa sharti kuwa haya yote yafanyike kwenye tag ya kufungulia.

Mfano: <div class="left"> utaweza maudhui yako unayotaka kuweka upande wa kushoto ,kisha kati, kwa ajili ya kuweka maudhui ya kati <div class="middle"> kisha ya kulia ili kuweka maudhui ya upande wa kulia <div class="right">

<h1>HEADING ONE</h1>

<p>hellow this is paragraph</p>

</div>

<h1>HEADING TWO</h1>

<p>hellow this is paragraph</p>

</div>

<h1>HEADING THREE</h1>

<p>hellow this is paragraph</p>

</div>

Kwa kufanya hivi utakuwa umeweza kuugawa ukurasa wako katika pande tatu zilizo sawa. Kwa kufanya hivi kama unataka pande nyingine ziwe kubwa zaidi ya nyingine utaweza style ya width kwa kila kisehemu na kueleza kiwe na upana gani.

Kode zilizotumika hapo juu

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<style>

.left {float: left; }

.middle {float: left; }

.right {float: right;}

div { width: 33.3%;}

</style>

<h1>HEADING ONE</h1>

<p>hellow this is paragraph</p>

</div>

<h1>HEADING TWO</h1>

<p>hellow this is paragraph</p>

</div>

<h1>HEADING THREE</h1>

<p>hellow this is paragraph</p>

</div>

</body>

</html>

Pia unaweza kuweka rangi, tofauti tofauti na staili nyngine ili kuboresha. Tatizo kubwa ambalo linazikumba code hizo hapo juu ni kuwa ukurasa wko utakuwa sehemu tatu hata kama utafunguliwa kwenye simu. Hii haiwi nzuri kama kuna taarifa nyingi maana zitakuwa ngmu kusoma kwenye screen ndogo halafu uigawe sehemu tatu.

Tatizo hili litatatuliwa kama tukiweka kuwa endapo ukurasa wetu utafunguliwa na kifaa cheye screen ndogo kama simu basi ugawanyike sehemu tatu ila kwa kwenda chini. Hii ina maana kuwa sehemu zako tatu kila moja itakaa kifyake. Ya kwanza utaanza juu, kisha ya kati itafata chini ya ya kwanza na ya tatu itakaa chini ya ya pili.

Kifanya hivi tunatakiwa tutumie @media screen ndani ya <div> kwa nini ni kwa sababu <div ndio section ambayo inakuwa kama chombo cha kunbebea sehemu zote tatu. Hii media scree ndio ambayo itaangalia ukubwa wa screen ya kifaa. Kama ni ndogo basi visehemu vyetu kila kimoja kiwe na upana wa 100% hivyo kijitegemee. Hivyo utafanya hivi

@media screen and (max-width: 600px) {

div {

width: 100%;

}

CHEKI CODE HIZI

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<style>

.left {float: left; background-color: violet;}

.middle {float: left; background-color: purple;}

.right {float: right;background-color: green;}

div {color: black; width: 33.32%;}

@media screen and (max-width: 600px) {

div {

width: 100%;

}

</style>

<h1>HEADING ONE</h1>

<p>hellow this is paragraph</p>

</div>

<h1>HEADING TWO</h1>

<p>hellow this is paragraph</p>

</div>

<h1>HEADING THREE</h1>

<p>hellow this is paragraph</p>

</div>

</body>

</html>

Mpaka kufikia hapa utakuwa umeweza kugawa ukurasa wako kadiri unavyotaka. Hata ukitaka uwe na sehemu 8 unaweza ni mahesabu yako tu. Katika somo lijalo tutakwenda kuona jinsi ya kudizaidi website ma blog yako kabla ya kuitengeneza.

HATUWA ZA KUTENGENEZA WEBSITE AMA BLOG

Unapotaka kutengeneza website ama blog kuna mambo mengi unatakiwa uyawaze hata kabla ya kuanza. Blog ama website ni kitambulisho cha biashara ama kampuni ama taasisi husika. Ni kitambulisho ambacho kitawafikia watu dunia nzima, watu wa jinsia zote kwa malengo tofauti tofauti. Hivyo basi unatakiwa ufikiri kwa makini.

Haya ni mawazo unatakiwa ujiulize kabla ya kudizaidi tovuti yako:

1. Itahusu nini

2. Kina nani watakuwa wateja wako

3. Ni aina gani tovuti yako

4. Kwa nini watu watembelee tovuti yako na si nyinginezo

5. Nini wanufaika kwako ambacho kwa wengine hawatakipata.

6. Kwa nini unahitaji tovuti

7. Je ni gharama kiasi gani itahitajika

Kisha baada ya kuyapata majibu ya maswali hayo unatakiwa uwaze kabisa jinsi watu watakavyokupata kwenye hito tovuti yako. Tambuwa kuwa kuna zaidi ya tovuti bilioni tatau. Na karibia tovuti milioni 400 zipo active. Hivyo unatakiwa ufikiri vyema vipi watu watakupata.

1. Tafuta jina la tofuti yako liendane na malengo yako

2. Jina liwe fupi na lennye maana

3. Jinaliwe lenye kukaririka vyema

4. Lisiwe lipo wazi

5. Jina liwe la kipekee

6. Lugha yako iendane na watu uliowatageti

Baada ya kuwaza namna ambavyo watu watakavyokupata sasa ni wakati wa wewe kuanza kunihusisha moja kwa moja katika utengenezaji. Haijalishi uwe unatengenezewa ama unatengeneza wewe mwenyewe, kuna mambo unatakiwa uyafanye:-

1. Gharama kiasi gani nitatumia

2. Muda gani utahitajika

3. Chanzo cha maudhui ya tovuti yako.

4. Je web yako itakuwa static ama dynamic

5. Nani anatengeneza ni wewe ama unatengenezewa.

Kuna aina kuu mbili za tovutii ambzo ni static ana dynamic. Static ni ile ambayo inatumia html, css na javascript. Yaani static inakuwa haibadiliki. Dynamic ni zile ambazo taarifa zake hubadilika badilika. Yaani admin anaweza kuedit makala hata kamakuna mtu anaisoma. Dynamic ni kama ambazo zimetengenezwa na php na database. Blog zote zinaingia kwenye kundi hili.

Kwa ufupi ststic ni tovuti ambazo zenyewe taarifa zake hazina mabadilikobadiliko. Na inachukuwa muda mrefu kubadili taarifa moja, mpaka uingie kwenye system nzima.ststic website zenyewe zinahitaji html na css . Lakini dynamic zenyewe muda wowote unaweza kuongeza taarifa na kutoa ama kuediti ama kukoment.

Hatua inayofata ni kuingia kazini sasa kuitengeneza tovuti yako. Hapa ndipo panahitaji umakini, kwani ukiharibu kwenye muonekano unaweza kukosa watu. Kumbuka uzuri we muonekano wa tovuti kwenye kompyuta sio sawa na kwenye simu. Katika hatuwa hii fanya haya:-

1. Chora mchoro wa kuonyesha tovuti yako itakavyofanya kazi

2. Chaguwa text editor kulingana na level ya ujuzi wako unaweza piakutumia WYSIWYG

3. CODE tovvuti yako kwakufuata mchoro wako

4. Zingatia mabadiliko ya screen, kuna wengine watatembelea tovuti yako kwa kompyuta na wengine simu, hivyo uzingatie na ubora

5. Fanya iwe simple, usitumie sana rangi

Baada ya kuikamilisha website yako utahitaji kuihost. Kuihost ni kuifanya ipatikane kwenye internet. Cheki somo la nane katika course iliyopita tumetoa maelekezo ya video jinsi a kuhost kwa free. Kuna mitandao mingi inatoa huduma ya kuhost code zako free. Hapa ntakuorodheshea tovuti chake

1. Google cloud

2. Google firebase

3. 00webhosting

4. Infinityfree

5. Digitalocean

Zipo kampuni nyingine nyingi tuu zitakupa huduma hii ure. Nimetaja hizo chache kwa sababu nina uzoefu nazo. Kama utakuwa na code za php nakusauri tumia 00webhosting ama infinityfree. Ila kama ni html css na javascript google firebase ni nzuri japo ni ngumu kuielewa mwanzo, hivyo vyema kutumia hizo mbili nilizozitaja hapo juu.

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>

</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>

<menu>

<button><a href="#">COURSES</a></button>

<button><a href="#">EXAMS</a></button>

<button><a href="#">PROJECTS</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%;}

<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>

<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>

<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 ZA PROJECT NI HIZI

<html>

<head>

</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>

<menu>

<button><a href="#">COURSES</a></button>

<button><a href="#">EXAMS</a></button>

<button><a href="#">PROJECTS</a></button>

<button><a href="#">CONTACTS</a></button>

</menu>

</header>

<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>

<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>

<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>

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>

<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:[email protected]"><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.

Je una maswali, maoni ama ushauri, tutumie sms ✉ bodya hapa hapa, ama wasiliana nasi kwa WhatsApp 💧 bofya hapa

Post Nyingine

MAFUNZO YA HTML LEVEL 2

MAFUNZO YA PHP LEVEL 1

MAFUNZO YA HTML LEVEL 1

MAFUNZO YA DATABASE

PROJECT ZA MAFUNZO LEVEL 1

MAFUNZO YA PHP LEVEL 2

MAFUNZO YA PHP LEVEL 3 SOMO LA 1