HTML, CSS, Bootstrap, PHP, Javascript and Mysql for beginners

[Zero_and_One]

MUENDELEZO.


TABLE
-Table inakuwa na rows na columns.
-Vyumba(cell) ndani ya table zinazotoka kushoto kwenda kulia tunaviita rows na vyumba kutoka juu ndani ya table kwenda chini tunaviita columns

JINSI YA KUANDIKA TABLE KATIKA HTML
-ilikuweza kuweza kuandika table tunatimia <table> elements .
-Ndani ya <table> element kuna kuwa na <tr> tag ambazo zitakuwa na maana ya table row. <td> ndani ya table itakuwa ina maaana ya table data.(Taarifa zinazoandikwa ndani ya table).
-Pia ndani ya table tutatumia <th> element ambayo itakuwa in maana ya table heading.

MFANO WA TABLE KATIKA Html Code.

MATOKEO YA CODE KATIKA BROWSER

SUMMARY:
-Table tuliyoandika kwanza haina muonekano mzuri kwahiyo kuna vitu tunabidi kuviongeza ili iweze kuonekana vizuri.
-Tukijifunza Css na Bootrap basi muonekano table utabadilika
-Katika code hapo za table tunaweza kuongeza width , cellpadding na cellspacing ili table yetu iweze kuonekana vizuri.
-kwenye ndani ya <table> tunaweza kubadilisha na kuongezea <table width="10" border="1" cellpadding="3" cellspacing="4"> <!-- code zinabaki kama zilivyo --> </table>
- width , border ,cellpadding na cellspacing zinakuwa katika pixel .(tukianza css tutaelezea vizuri)


MATOKEO KATIKA BROWSER YATAKUWA.

MFANO MWINGINE WA TABLE

ILI TUWEZE KUANDIKA TABLE NA KUTUMIA COLORS KAMA KWENYE TABLE HAPO JUU.BASI TUNAHITAJIKA KUTUMIA CSS.




SOMO LINALOFUATA NI KUHUSIANA NA FORMS.

 

[Zero_and_One]

TUENDELEE .


FORMS

-Ilikuweza kutengeneza form katika html tunatumia <form> element.
-kulog in JF tumetumia form ,kutafuta kitu chochote google , JF ,other website tunatumia form, kujaza taarifa zako katika mtandao tunatumia form ,kujiregister pia form inatumika n.k.

AINA ZA FORM AMBAZO WEBSITE INAWEZA KUCHUKUA TAARIFA KWA MTUMIAJI.

Adding text.
-Text input(hii huwa ni mstari mmoja)
- <input> element inatumika sana kutengeneza form controls tofauti tofauti ndani ya <form> element .
-html code yake ni <input type="text" >

password input.
-Ikiwa <input> element, type attributes ina dhamani ya password. Mfano <input type="password"> itatengenezwa text box lakini characters hazitoweza kujionesha itakuwa ni single line text input.(maneno ukiandika hatakuwa yanafichwa hayaonekani)
-kuna attributes zinaweza kuongezeka kama name , placeholder , na id . name inakuja kutumika pindi mtumiaji akisubmit taarifa zake kwenda kwenye server ,placeholder ina kazi ya kudisplay maneno yaliyopo ndani yake
- Mfano <input type="password" name="namba-ya-siri" placeholder=" Ingiza neno la siri">


text area
-Inatumika pindi unapokuwa unacomment au kupost mada yenye maneno mengi katika web bage. <textarea> element inatumika kuweza kutengeneza text area .Ina open na closing tag.

Mfano wa html code:

Matokeo ya html code katika Browser

Sumarry
cols katika text area inajulisha ukubwa kwa text area . rows attribute ndani ya text area inajulisha idadi za rows text area iwe nazo.

TUTAENDELEA NA RADIO BUTTONS,CHECKBOX NA DROP DOWN LIST BOX.

 

[tokenring]

Nakufuatilia vizuri mkuu. Kuna swali nataka kuuliza ,Je unawezaje sasa kupangilia Mfano upande wa kushoto yakae maneno ,Kulia zikae links katikati labda picha na maelezo na form chini ? Yani tunapangiliaje pangiliaje ili muonekano uwe mzuri

 

[Zero_and_One]

Nakufuatilia vizuri mkuu. Kuna swali nataka kuuliza ,Je unawezaje sasa kupangilia Mfano upande wa kushoto yakae maneno ,Kulia zikae links katikati labda picha na maelezo na form chini ? Yani tunapangiliaje pangiliaje ili muonekano uwe mzuri

Asante kwa swali zuri.
ukitaka kupangilia vitu katika website .Mfano kushoto kuwa na hichi ,juu ya website kuwa na hichi ,chini kuwe na hichi n.k.
ITAKUBIDI KUJIFUNZA CSS NA BOOTSTRAP. Html peke yake haiwezekani .Ndo maana mara nyingi tunasema Html and Css.

 

[Bittah]

Asante kwa swali zuri.
ukitaka kupangilia vitu katika website .Mfano kushoto kuwa na hichi ,juu ya website kuwa na hichi ,chini kuwe na hichi n.k.
ITAKUBIDI KUJIFUNZA CSS NA BOOTSTRAP. Html peke yake haiwezekani .Ndo maana mara nyingi tunasema Html and Css.

Sawa kaka tu akufatilia vyema ingependeza utundie group la whatsap

 

[Zero_and_One]

TUENDELEE.


RADIO BUTTON

- <input> element ya type="radio" inatumika ili kuweza kudisplay radio button.

<input type="radio">

-MUHIMU CHA KUZINGATIA KATIKA RADIO BUTTON MTUMIAJI ATACHAGUA KITU KIMOJA TU KATIKA OPTION NYINGI ALIZONAZO.


Mfano wa html code.

MATOKEO KATIKA BROWSER

summary :
-katika radio button tunatumia name na value attributes.
-name inabidi iwe ni moja kwa option zote utakazo andika,pindi user atakapo submit name itaenda kwenye server.value zinakuwa tofauti katika kila option ulizoandika,na pia itajulisha ni ipi mtumiaji(user) amechagua.
(refer the html code above.)



--------------------------------------------------------------------------------------------------------------------------------------------------------------------



CHECKBOX


-<input> element inakuwa ya type="checkbox" .Checkbox mtumiaji ana uwezo wa kuchangua zaidi ya kitu kimoja tofauti na radio button.

<input type="checkbox">

-name attribute inabidi iwe moja ya value tofauti tofauti.


Mfano wa html code.

MATOKEO KATIKA BROWSER

SUMMARY.
--Checkbox inatumika ikiwa mtumiaji atachagua kitu zaidi ya kimoja.
--inakuwa na name attribute moja sehemu zote lakini yenye value attribute tofauti tofauti kama radio button.


-----------------------------------------------------------------------------------------------------------------------------------------------------------


FILE INPUT BOX
-File input box inatumika ikiwa unahitaji user aweze kuappload file( for example image,video, mp3 , or PDF ) ,utatumia file input.
- Itakuwa na <input> element ya type="file" .

-kushoto ni html code za file kulia ni matokeo katika browser.

-----------------------------------------------------------------------------------------------------------------------------------------------------

 

[tokenring]

Nakufuatilia sana kiongozi unaandika vitu vinaeleweka hata kama hujawahi kusoma IT. Nakusubiri uendelee na darasa.

 

[de98]

Mkuu ubarikiwe sana kwa kutenga muda wako kufundisha taaluma yako kwa wengine
Niko nafatilia sanaa mkuu! Japo niko vizuri ktk programming, ila niko kwa ajili ya kuongeza maalifa zaidi mkuu

 

[tokenring]

Mkuu vipi upo likizo? Maana bado hujashusha madini kitambo sasa au ndo unaziandaa nondo?

 

[Mahmetkid]

Tupo pamoja Mkuu

 

[rommy shabby]

Mkuu mie nilisoma IT ila mwalimu wa hili somo nae alikua mbababishaji sn so hapa unavyofundisha ndo nazidi pata nondo zaidi

 

[HARAKATI ZOTE]

nice sana for beginner

 

[Kimwerymdodo5]

Nimeipenda hii kitu mkuu...keep it up dude..🙏🏿🙏🏿💪🏿💪🏿💪🏿

 

[Super Villain]

shukurani kwa somo pal.

 

[Da'Vinci]

Pdf zake zibandike mkuu..

 

[mr hyper]

TUENDELEE .NA SOMO



LINKING TO A SPECIFIC PART ON THE SAME PAGE.

-->Page ikiwa na maelezo mengi sana tutakuwa tunaweka link ili kuweza kuspecify katika eneo husika ndani ya page hiyo hiyo moja.
-->Tunatumia id attribute . Value ambao ipo ndani ya id attribute inatakiwa ianze na herufi au underscore .(usianze kuandika id yako kwa namba) .Tutaona katika mfano wa html code .

View attachment 1273540


Muonekano wa html code katika browser.

View attachment 1273543




SUMMARY:
-->katika href attribute ndani ya <a> element ina andikwa #ikifuatiwa na jina la id yako. id attribute inawekwa katika different elements na inapidi kila element iwe na jina lake tofauti.

-->mtu akiclick Top atapelekwa mpaka juu kabisa ya website kwasababu top ni link itakayo mpeleke kwenye heading .User akiclick kwenye Operating System atapelekwa moja kwa moja sehemu ilipo id yenye Operating.



IMAGES
Jinsi ya kuweka picha katika web page .Picha inaweza kuwa logo au picha ndani ya paragraph au mchoro pamoja na maelezeko yake.

JINSI YA KUWEKA PICHA KATIKA WEB PAGE.
-->Ili kuweka picha tunatumia <img> element (special element for image) .
-->Ndani ya <img> tutakuwa na src attribute.Mfano <img src="jinalapicha.jpg" />
-->Sio lazima iwe .jpg inategemea na properties za picha husika.
-->Unaweza pia kuweka picha ambayo ndani yake kuna link.
Mfano : <a href="http:// #"> <img src="jinalapicha.jpg" /> </a>
-->Ikiwapicha inapatikana katika folder nyingine basi tutaongezea na jina la hiyo folder ikifatiwa na jina la image.
Mfano:
<img src="jina-la-folder/jina-la-picha.jpg" />

-->Ndani ya <img> element kuna alt attribute pia hutumika .Ikitokea picha katika browser haionekani pasi maneno yaliyopo kwenye alt attribute yatakuwa display.
Mfano : <img src="jinalapicha.jpg" alt="tv" />



MFANO WA HTML CODE

View attachment 1273634





MATOKEO KATIKA BROWSER



View attachment 1273640




TUNAENDELEA NA TABLE MUDA SIO MREFU

Uweke na mawasiliano yako ili iwe simple kukupata

 

[mr hyper]

Najua kuna maelezo mengi sana kuhusu hivi vitu ila naomba kuchukua muda wangu na kuweza kuelezea kwa wale ambao wanataka kuanza kuvijua hivi vitu.(beginners)

Html ni nini?
Html ni Hypertext Markup Language. Ukitaka kuandika maneno ambayo pindi ukifungua Website yako unataka kuyaona basi utatumia Html kwa mfano Kichwa cha habari, paragraph,maandishi mengine n.k.
Html sio programming language.

Tutahitaji vitu gani ili tuweze kuandika Html code?
Kuna tools nyingi ambazo unaweza kutumia kuandikia html.Mfano Notepad++, Visual Studio Code,Sublime Text n.k.
Napendelea tutumia Visual Studio Code kwasababu ina support Emmet (tutaelezea vizuri baadae)

Je naweza kuziona html code katika Firefox, Internet Explorer, Safari, Chrome and Opera?
Ndio,unaweza kuziona code zote za html katika website yoyote,unatakiwa kubonyeza ctrl+u katika web browser nilizotaja hapo juu mfano Chrome , Internet Explorer.

View attachment 1272402

Hizi ni baadhi ya JF html code.Usijali tutazielewa baadhi ya code zilizoandikwa humu. Inahitaji muda kwa wale Beginners.

Vitu ambavyo tutaanza navyo
- Structure
- Text
- Links
- Images
- Tables
- Forms nk.

1. Tuanze na Structure
Fikiria katika habari ambazo umewahi kuzisoma katika magazeti. Katika magazeti utakutana na:
-Kichwa cha habari
-utakutana na subheading
-utakutana na picha
-utakutana na maandishi(text)

Vyote huvu hutumika pia pindi unapotaka kutengeneza web page katika website yako.

Simple structure ya Html.

<html>
<head>
</head>

<body>
</body>
</html>

Hivi ni vitu vya msingi ambavyo tutakuwa tunaandika mara kwa mara. Pindi tukiwa tunaandika Html code.

ANGALIZO: Hizo structure za html hazijakamalika .Tutakuwa tunaongezea vitu pindi tutakavyoendelea.

-->katika html cha kuzingatia tutakuwa tunafungua na kufunga element muhimu sana.Mfano <html> </html>,
<body> </body>, <head> </head> n.k. kumaanisha mwanzo wa hicho kitu na mwisho wake.

Ni jinsi gani naweza kusave Html code?
-Tunatakiwa tusave file zetu zote jinalafilelolote.html

View attachment 1272422

Mfano wa output ambapo code zake ni

View attachment 1272424


Maelezo:
Ukitaka kuandika heading , tunatumia <h1> </h1> ndani ya element h1 ndipo heading yako inapoandikwa.refer html code above.

Kama kutakuwa kuna heading (sub heading) zingine basi utatumia <h2> </h2> au <h3> </h3> au <h4> </h4> au <h5> </h5> au <h6> </h6>

Ukitaka kuandika maelezo ya kichwa cha habari basi tunatumia <p> hapa ndani tunaandika maelezo ya kichwa cha habari </p>

Ukitaka kuanza mstari mwingine browser itautambua kwa <br> .lakini sio wewe mwenyewe kuanza mstari mwingine hiyo haitambuliki.

Nitaendelea muda sio mrefu, likes zenu muhimu jamani.

bro Weka # zako za simu

 

[King snr]

Ndo nimeanza kujifunza hapa utashusha tena Lini vitu maana darasa tamu sana

 

[King snr]

TUENDELEE .NA SOMO



LINKING TO A SPECIFIC PART ON THE SAME PAGE.

-->Page ikiwa na maelezo mengi sana tutakuwa tunaweka link ili kuweza kuspecify katika eneo husika ndani ya page hiyo hiyo moja.
-->Tunatumia id attribute . Value ambao ipo ndani ya id attribute inatakiwa ianze na herufi au underscore .(usianze kuandika id yako kwa namba) .Tutaona katika mfano wa html code .

View attachment 1273540


Muonekano wa html code katika browser.

View attachment 1273543




SUMMARY:
-->katika href attribute ndani ya <a> element ina andikwa #ikifuatiwa na jina la id yako. id attribute inawekwa katika different elements na inapidi kila element iwe na jina lake tofauti.

-->mtu akiclick Top atapelekwa mpaka juu kabisa ya website kwasababu top ni link itakayo mpeleke kwenye heading .User akiclick kwenye Operating System atapelekwa moja kwa moja sehemu ilipo id yenye Operating.



IMAGES
Jinsi ya kuweka picha katika web page .Picha inaweza kuwa logo au picha ndani ya paragraph au mchoro pamoja na maelezeko yake.

JINSI YA KUWEKA PICHA KATIKA WEB PAGE.
-->Ili kuweka picha tunatumia <img> element (special element for image) .
-->Ndani ya <img> tutakuwa na src attribute.Mfano <img src="jinalapicha.jpg" />
-->Sio lazima iwe .jpg inategemea na properties za picha husika.
-->Unaweza pia kuweka picha ambayo ndani yake kuna link.
Mfano : <a href="http:// #"> <img src="jinalapicha.jpg" /> </a>
-->Ikiwapicha inapatikana katika folder nyingine basi tutaongezea na jina la hiyo folder ikifatiwa na jina la image.
Mfano:
<img src="jina-la-folder/jina-la-picha.jpg" />

-->Ndani ya <img> element kuna alt attribute pia hutumika .Ikitokea picha katika browser haionekani pasi maneno yaliyopo kwenye alt attribute yatakuwa display.
Mfano : <img src="jinalapicha.jpg" alt="tv" />



MFANO WA HTML CODE

View attachment 1273634





MATOKEO KATIKA BROWSER



View attachment 1273640




TUNAENDELEA NA TABLE MUDA SIO MREFU

Images zimegoma Ku display nifanyeje?

 

[dronedrake]

Images zimegoma Ku display nifanyeje?

weka script uliyotumia hapa

na je extension ( jpg , png ,bmp) zinafanana?