image

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.

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 1326


Sponsored links
👉1 Madrasa kiganjani     👉2 Kitau cha Fiqh     👉3 kitabu cha Simulizi     👉4 Kitabu cha Afya    

Post zifazofanana:-

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 DATABASE - MySQL database somo la 5
Huu ni muendelezo wa mafunzo ya DATABASE kwa kutumia software ya MySQL na hili ni somo la tano. katika somo hili utajifunza type of data yaani aina ya taarifa ambazo unaweza kuzihifadhi kwenye database yako. Soma Zaidi...

Mafunzo ya php level 1 somo la nne (4)
somo hili la 4 katika mafunzo ya PHP level 1 utajifunza aina za data mabazo php inakwenda kuzitumia. Soma Zaidi...

Mafunzo ya HTML Level 2 somo la 7 (HTML FULL COURSE FOR BEGINNERS LESSON 7)
Ktika somo hili la 7 utajifunza namna ya kuandaa na kujiandaa kutengeneza website ama blog. Pia utajifunza maandalizi ya kuhost Soma Zaidi...

Mafunzo ya HTML level 1 somo la 2 (HTML basic level FOR BEGINNERS)
Hili ni somo la pili katika mfululizo wa mafunzo ya html level ya 1 na hapa tutakwenda sasa kunanza somo letu rasmi, kwani katika somo la kwanza umejifunza jinsi ya kuandaa kifaa chako kwa ajili ya mafunzo. 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 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 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 database MySQL - DATABASE somo la 6
Huu ni muendelezo wa mafunzo ya database kwa kutumia MySQL na hili ni somo la 6. Katika somo hili tutakwenda kuona jinsi ya kutengeneza table kwa kutumia MySQL na kwa kutuma SQL. 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...

Mafunzo ya HTML Level 2 somo la 6 (HTML FULL COURSE FOR BEGINNERS LESSON 6)
Katika somo hili la 6 mafunzo ya HTML level 2, tutajfunza namna ya kugawa ukurasa wa wavuti wa html. Soma Zaidi...

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