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 Topic: Tehama
Main: Post
File: Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 1453
Sponsored links
👉1 Sira ya Mtume Muhammad (s.a.w)
👉2 Simulizi za Hadithi Audio
👉3 Kitabu cha Afya
👉4 kitabu cha Simulizi
👉5 Madrasa kiganjani
👉6 Kitau cha Fiqh
Mafunzo ya DATABASE - MySQL database somo la 8
Huuu ni muendeleo wa mafunzo ya database kwa lugha ya kiswahili, na hili ni somo la nane. Katika somo hli utajifunza namna ya kuweka taarifa kwenye database, kuzfuta na kuziediti yaani kuzifanyia marekebisho. Soma Zaidi...
Mafunzo ya HTML level 1 somo la 5 (HTML basic level FOR BEGINNERS)
katika somo hili la tano kwenye mafunzo ya HTML level 1 utajifunza jinsi ya 1.Kuweka picha
2.Kuweka rangi
3.Kuweka linki
4.Kupangilia position na alignment ya maandishi
5.Kuongeza ukubwa wa herufi
6.Kukoment 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...
PHP level 11 somo la kumi na moja (11)
Katika somo hilivutajifunza namna ya kutumia HTML form. Namna ya kuookea taarifa kutoka kwenye madodoso ya html form. Soma Zaidi...
Mafunzo ya HTML level 1 somo la 7 (HTML basic level FOR BEGINNERS)
Hii ni project ya HTML ambayo imetengenezwa kulingana na mafunzo ya HTML level1. Tunatarajia project hii kuboreshwa kadiri mafunzo yanavyozidi kusonga mbele. 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 nane (8)
Hapa utajifunza utofauti kati ya php constant na variable. Na hili ni somo la nane katika mfululizo wa masomo haya ya php level 1. Soma Zaidi...
Mafunzo ya php level 1 somo la pili (2)
hili ni somo la pili katika mfululizo wa mafunzo haya ya php level 1 na hapa utajifunza namna ya kuandika faili klako la kwanza la php. 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...
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 2 (html full course for beginners)
haya ni mafunzo ya HTML level 2 kwa wenye kuanza. Mafunzo haya ni muendelezo wa level 1 html. Katika course hii utajifunza mengi zaidi lu;iko level1 pia tutazidi kuboresha project yetu. Soma Zaidi...
Mafunzo ya HTML Level 1 somo la 2 for beginner (html full course for beginners)
Somo la pili katika mafunzo ya HTML level 2. Katika somo hili utajifunza maana ya HTML pamoja na historia yake fupi. Soma Zaidi...