Special Thread to learn HTML, CSS and JAVACRIPT (Web Development) by Binadamu Mtakatifu

Binadamu Mtakatifu

Binadamu Mtakatifu

JF-Expert Member
Jan 6, 2021
4,085
8,442
Habari Wanajamvi baada ya kukaa na kufikiria nilipitia nyuzi nyingi zinazo husiana na web development ila sikupata nilicho hitaji.

Kwenye huu uzi nitafundisha HTML, CSS na JAVASCRIPT kwa lugha isiyo sanifu na fupi kufanya kueleweka sana.

Pia Uzi huu utumike kama mahala pa kuuliza chochote kuhusu webdevelopment iwe error kwenye codes na vingine.

Basi nitaanza na Utangulizi juu ya HTML ,CSS na JAVASCRIPT chapchap kwa lugha nyepesi.

Tukianza kwa HTML kirefu chake ni "Hyper text markup language" Hii sio programming language bali ni Markup Language hii ni kama mifupa ya website inayotengeneza structure nzima ya ukurasa wa tovuti yetu.

Tovuti ni muunganiko wa kurasa tofauti tofauti za HTML ndani ya HTML tunaweza kuingiza codes nyingne kama CSS na JAVASCRIPT.

CSS kirefu chake ni "Cascanding Style steet" Hii tunaweza fananisha na kuweka ngozi na rangi rangi yaani kustylesh page zetu ili kufanya page kupendeza.

Mfano : Binaadamu Mifupa nilisema ni HTML nikaja nikaweka CSS nikama kuweka Ngozi nywele kucha na kumpaka markup ili apendeze yaani ni kuarrage na kuvipa muonekano gat au ellement za HTML.

JAVASCRIPT hii sasa ni programming language hapa tutaweza kutengeneza Functions kwenye page zetu hata pia kuunda cookies
Kwenye Mwili wa Binaadamu ninaweza sema ni kama Misuli.

Mpaka hapo unamwanga ngoja nivute pumzi alafu ninakuja kuanza rasmi na HTML leoleo.

Utangulizi jinsi ya kudownload na kuinstall mahala pa kuandika codes

1.Html Somo la 1

2.Html somo la 2

3Html somo la 3

4 Somo la nne na muendelezo wote, source codes
 
Mwongozo w kwa ajili ya kuandaa mahali kuandika codes zetu SI LAZIMA uwe na computer
Kwa Android phone tumia Acode pro
App hii inauzwa Googleplay japo kuna free version yake Nitakuambia simpletrick ya kupata pro vision buree
1.Ingia Google na usearch Acode pro apk free download
2.Chagua site za matokeo ya kwanza kwanza kabisa na udownload file ya apk
3.Kisha Install kama itakuambia install blocked itabidi uruhusu install apps from unknown sourse kwenye permission settings
4.Fungua App na uanza kufanya mazoezi ya kucode Matokeo unaweza ona kwenye Chrome au ndani ya hiyo app
Bofya kitufe chenye alama kama ya play ili kurun codes

KWA WENYE PC
Download na Install Visual Studio code

Au unaweza kutumia Notepad ambayo inakuja na Os ya Windows kwenye PC
baada ya kuandika code save extansion kama .html kisha ulitafute file kwenye file exploler na ulifungue kupitia chrome au Microsoft Edge
 
Tuanze somo sasa

sehemu yetu ya kwanza kabisa tutajua baadhi ya sheria rahisi za kuandika codes za HTML

Kama nilivyo eleza HTML ni markup language hivyo tutaitumia kuunda page yetu

Kwanza jua hiki Starting tag na Endtag

Startag ni pale tag inapoanzia na Endtag ni tag inapoishia

Tag sina kiswahili fasaha ila ninajaribu kueleza kwa mfano

HTML: 
<html>
</html>

Iyo <html> ni tag ya html

HTML TAG - ni tag ya html inayoonesha kuwa code zilizo ndani yake ni HTML

Tag hii ndio tag ya mwanzo kueleza aina ya code zilizopo katika page

Ufuatao ni muundo wa Msingi wa page ya HTML
HTML: 
 <!DOCTYPE html>
<html>
 <head>
      <title></title>
 </head>
 <body>
 </body>
</html>

Ngoja nifafanue kidogo kuhusu codes hapo juu

<!DOCTYPE html>

Inaeleza ni version ya 5 ya muundo wa Html (Yaani HTML5)
Kulikua na version za nyuma kidogo kama HTML 4 au HTML 3
Hii tag haina closing tag

<html>

Hii hueleza kuwa code zilizopo ndani ni HTML tag hii ina starttag
<html> : Hapa ni Mwanzo wa tag (tag inapoanzia au code inapoanzia
Pia ina closing tag </html>: Ambapo huelezea Mwisho wa tag

NOTE: CLOSING TAG INA SLASH MFANO </ html>
Naukiwa Muangalifu utaona tag zote katika codes hapo juu zina closing tag zenye slash /

<head>
Tag hii huelezea yaliomo katika <body> tag Pia hubeba title ya page ,description link za CSS na JAVASCRIPT

<body>
Tag hii ndio hubeba tag zote ambazo zitaweza kuunda muonekano kwenye body ndipo tutakapo anza kuunda content za page na kuonekana Mfano

-Kichwa cha page
-Mahala pa kutafuta(Search field)
-Fomu za kujaza
-Maandishi
-picha
-video
N.k

Mfumo rahisi kuelewa ni huu kuwa

<> : NISTART TAG
</>: NI ENDTAG

NJOO KWA MIFANO MIFUPI HAPO CHINI
HTML: 
<head> 
</head>
Kwenye Mfano tunaona kuwa <head> ni start tag kuwa head inaanzia hapa
NA
</head> ni closing tag nandio Mwisho wa hio tag

HAPO NADHANI MPAKA NOW UNAJUA MAANA YA STARTING TAG NA ENDTAG NA JINSI ZILIVYO

NA HUO MFANO NAOMBA UNIANDIKIE START TAG NA ENDTAG YA <BODY> NA KUFAFANUA ILI NIJUE MPO SAWA

ITAENDELEA
 
Sawa Basii Leo twende hatua nyingine ya kujifunza html katika hatua hii nitakueleza kutumia baadhi ya tag na kuunda page yetu yenye kichwa na maelezo na katika kipengele hiki ndio tutaanza kutumia tool ulizodownload kwa ajili ya coding na kuona matikeo

Katika nafasi iliopita siku elezea vizuri kuhusu tag ya title nilioweka katikati ya head tag <title>: Hii nitag ya kueleza kichwa cha mahudhui yaliopo katika page

Mfano katika codes hizi
HTML: 
 <!DOCTYPE html>
<html>
  <head>
      <title>Kichwa cha Mahudhui(Maelezo yangu binafsi)</title>
  </head>
</html>

Ndugu hapo kwenye title unaona nimeeandika kichwa kuelezea mahudhui yatakayokuwepo ndani ya page

Hapo nilipoandika "Kichwa cha Mahudhui" Nimejaribu kukuelezea wewe kuhusu dhumuni la title tag ila hapo kwenye mabano ndio title yangu kuwa "Maelezo yangu binafsi"
yaani nitaeleza kuhusu maelezo yangu mwenyewe

Hivyo codes hizi zinaweza kuonekana kama hivi
HTML: 
 <!DOCTYPE html>
<html>
  <head>
      <title>Maelezo yangu binafsi</title>
  </head>
</html>

Yaah jaribu kucopy hizi codes na kuzipaste kwenye code editor yako na urun
Utagundua kwamba hayo maneno hayajaonekana kwenye browser bali juu hapo kwenye tab

Hii pia usaidia kwenye SEO kusaidia search engine kufikia page zako

Oukey Sasa tujifunze tag Mpyyaaa

Tuanze na HEADING TAG-- hizi ni tag zinazo eleza kuwa kinachoandikwa ni heading na sikuzote tag hizi hua maandishi yake ni yamekoza (bold)
Tagi zahead hupungua kulingana na tag yenyewe ,Angalia hapo chini
<h1>Hua na Maandishi Makubwa
<h2>Hua na maandishi Madogo kushinda h1
<h3>Hua na Maandishi Madogo kushinda h2
<h4>Hua na Maandishi madogo kushinda h3
<h5>Hua na Maandishi madogo kushinda h4
<h6>Hua na maandishi madogo kushinda h5

Hakuna h7 au h8 na Kuendelea yote yataonekana sawa na h6
Pia apo iyo "h" inamaanisha heading na namba inayofuta ni kama cheo

Tag hizi huwekwa ndani ya <body> kumbuka kuwa nilikwambia kwenye body tag ndipo tunapoandaa content yaani kila tag iliyo kwenye body itaonekana tofauti na zilizo kwenye head hua ni za kueleza yaliomo

Tazama copy code hizi na uziweke kwenye editor yako uone kitakachotokea kupishana kwa heading tag

HTML: 
 <!DOCTYPE html>
<html>
  <head>
      <title>Kichwa cha Mahudhui(Maelezo yangu binafsi)</title>
  </head>
  <body>
       <h1>Hua na Maandishi Makubwa</h1>
<h2>Hua na maandishi Madogo kushinda h1</h2>
<h3>Hua na Maandishi Madogo kushinda h2</h3>
<h4>Hua na Maandishi madogo kushinda h3<h4>
<h5>Hua na Maandishi madogo kushinda h4</h5>
<h6>Hua na maandishi madogo kushinda h5</h6>
  <body>
</html>

Najua utaona mabadiliko kutoka katika browser yako

Tuangalie tag nyingine inayoitwa paragraph <p>: Tag hii hutumika kuandika maandishi/sentensi

KUMBUKA KUWEKA CLOSING TAG KWENYE KILA TAG

Mfano
HTML: 
<p>Hii ni sentensi yangu hahahaha 😂😂😂</p>

Nadhani hapo Umenipata sasa Tuunde page kamili ya html kutumia tag tulizo jifunza soma codes hapo chini

HTML: 
<!DOCTYPE html>
<html>
  <head>
     <title>Maelezo yangu binafsi</title>
  </head>
  <body>
      <h1>Haya ni Maelezo yanihusuyo Mimi</h1>
      <h2> Jina langu na tabia</h2>
       <p>Jina Langu ninaitwa Binadamu Mtakatifu<br>Mimi simtu mbaya na mtu mwema na Mwenye maarifa.</p>
 <h3>Kazi yangu ni ipi?</h3>
      <p> Mimi ni Software developer na blogger</br>
  </body>
</html>

Copy codes hizo na uzipaste kwenye editor kuona matokeo yake

Hapo najua mnajiuliza kuhusu jambo jipya yaani tag mpya ya </br>: TAG hii haina closing tag yaani inaweza kusimama yenyewe kama yenyewe pia inatumika kuruka na kuanza mstari mpya chini yake

Mfano unapoandika paragraph ukaamua kukata kwa kuruka chini Mfano

HTML: 
<p>Hii ni sentensi yangu hahahaha,

 hapa ngoja nikate😂😂😂</p>

Itaonekana katika mstari mmoja sababu computer itapuuza mstari ulioruka
Ili kufanya hivyo tutatumia</br>
Mfano

HTML: 
<p>Hii ni sentensi yangu hahahaha,</br> hapa ngoja nikate😂😂😂</p>

Matokeo utayaona copycode kisha paste na urun kwenye editor yako

Ahsante kwa kufuatilia weka screenshot tushare wate matokeo

Itaendelea
 
You must log in or register to reply here.

Similar Discussions

Back
Top Bottom
Forums
New posts
Post thread
Back