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

Kama unahitaji kuuliza maswali Bofya hapa

Mwandhishi Tarehe 2021-10-28 Download PDF     Share On Facebook or Whatsapp Imesomwa mara 1270


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

Post zifazofanana:-

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 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 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 yz database MySQL database somo la 12 (final)
Huu ni muendelezowa mafunzo ya database kwa kutumia MySQl na hili ni somo la 12. katika somo hili tutajifunza namna ya kufanya mahesabu kwa kutumia SQl katika database Soma Zaidi...

Mafunzo ya database MySQL database somo la 9
haya ni mafunzo ya database kwa kutumia MySQl na hili ni somo la 9. katika soo hili utajifunza namna ya kusoma ama kutumia taarifa zilizomo kwenye DATABASE. Soma Zaidi...

Mafunzo ya HTML Level 2 somo la 3 (HTML FULL COURSE FOR BEGINNERS LESSON 3)
Hili n somo la tatu katka muendelezo wa mafunzo ya HTML LEVEL 2 kwa lugha ya kiswahili. Mafunzo haya yanakujia kwa Ihsani ya bongoclass 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...

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

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

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