Somo la pili katika mafunzo ya HTML level 2. Katika somo hili utajifunza maana ya HTML pamoja na historia yake fupi.
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>
<meta charset="UTF-8">
<meta name="description" content="This is my first website">
</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><pre>
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.
Je! umeipenda hii post?
Ndio Hapana Save post
Rajabu 
Tarehe 2024-05-10 14:53:23 Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 1344
Sponsored links
👉1 Madrasa kiganjani
👉2 Kitabu cha Afya
👉3 Kitau cha Fiqh
👉4 kitabu cha Simulizi
Mafunzo ya HTML level 1 somo la 8 (HTML basic level FOR BEGINNERS)
Katika somo hili la 8 mafunzo ya html level 8 utajifunza jinsi ya kuhost project ya html na kuwa live, watu wakaipitia na kusoma maudhui yake. Soma Zaidi...
Mafunzo ya database MySQL somo la 3
Huu ni mwendelezo wa mafunzo ya database na jinsi ya kutengeneza bloga na website na hili ni somo la tatu. hapa utajifunza jinsiya kutengeneza database yako kwa mara ya kwanza. Soma Zaidi...
PHP level 1 somo la tisa (9).
Somo la nane mafunzo ya php, katika somo hili utajifunza kuhusu array na jinsi ya kutengeneza array. 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...
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 kumi (10)
Somo la 10 mafunzo ya php level 1. Katika somo hili utajifunza kuhusu condition statement. Soma Zaidi...
Mafunzo ya Database MySQL DATABASE somo la 2
Huu ni mwendelezo wa mafunzo ya DATABASE kwa kutumia MySQL na hili ni somo la pili. Hapa tutakwenda kuona kwa ufupi ni nini DATABASE Soma Zaidi...
Mafunzo ya HTML Level 2 somo la 5 (HTML FULL COURSE FOR BEGINNERS LESSON 5)
Karibu tena katika mafunzo haya ya html level 2 na hili ni somo la 5. Katika somo hili utajifunza zaidi kuhusu kuweka style kwenye html file. 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 level 1 somo la 3 (HTML basic level FOR BEGINNERS)
Hili ni somo la Tatu katika mfululizo wetu wa mafunzo ya HTML kwa basic level kwa wanaoanza kujifunza. Hapa tutakwenda kujifunza tag za html ambazo huwa zinatumika katika uandishi. Soma Zaidi...
Mafunzo ya HTML level 1 somo la 6 (HTML basic level FOR BEGINNERS)
hili ni somo la sita katika mfululizo wa mafunzo ya HTML level 1. Katika somo hili tutajifunza mambo makuu matatu ambayo ni kuweka menyu, kuweka background color na kufanya faili lako liwe responsive. Soma Zaidi...
PHP level 1 somo la sita (6)
Katika somo hili la php level 1 somo la 6 utajifunza namna ya kutumia tarehe yaani function date() kwenye PHP Soma Zaidi...