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

Zero_and_One

Zero_and_One

Member
Jun 4, 2019
43
92
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.

jf.JPG


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

w1.JPG


Mfano wa output ambapo code zake ni

c1.JPG



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.
 

Attachments

  • 1574700524324.png
    1574700524324.png
    5.9 KB · Views: 29
Muendelezo..

mfano wa headings kwa kutumia element za heading.
INAVYOONEKANA KWENYE BROWSER

w2.JPG


code zake ni:
c2.JPG


hapo unaweza kuona utofauti wa kutumia heading element tofauti tofauti.


-->Tukitaka kuandika paragraph mbili na kuendelea basi tutatumia <p> </p>

MFANO WA HTML CODE
c3.JPG



-----.>MATOKEO YA CODE KATIKA BROWSER


w3.JPG







UKITAKA NENO LAKO LIWE BOLD(KUKOREA KWA NENO) NA ITALIC.
Tunatumia element <b> neno letu </b>.au <strong> neno letu </strong> .Na italic tutamia element <i> neno letu </i>


mfano katika html code
c4.JPG





-----.>MATOKEO YA CODE KATIKA BROWSER
w4.JPG




mada itaendelea muda sio mrefu.
 
Muendelezo.

--.TUJIFUNZE KUHUSU SUPERSCRIPT AND SUBSCRIPT , LINE AND DELETE ELEMENTS.

Utamia <sup> </sup> au <sub> </sub> elements pindi utapotaka kuandika maneno. Mfano kipeo cha namba , units , formula mbali mbali kwa mfano water ,H2O sasa namba 2 ili iende chini maana hapo tumeandika sio sahihi basi tutatumia <sub> </sub> kuweza kuifanya namba 2 ishuke chini kidogo.tutaona kwenye mfano wetu wa html code.

-->LINE
Ili tuweze kuchora mstari kwenye web page yetu tutatumia <hr /> ambayo itatuwezesha kuchora. tutaona matumizi yake kwenye html code.

--> <del> </del> .Elements inatumika pindi unapotaka kusahihisha jambo katika maelezo yako mfano mm ni mimi basi tunatumia delete elements.



TUONE HTML CODE ZETU .
c5.JPG




MATOKEO KATIKA BROWSER


w5.JPG
 
TUENDELEE NA SOMO LETU

LISTS,LINKS NA IMAGES
-hii ni moja ya sehemu ambayo inatumika sana pindi ukiwa unataka kutengeneza website.


TUANZE NA LISTS
Lists ni Orodha ya vitu .Kwa mfano bidhaa zinazopatikana dukani, Orodha ya wachezaji, Majina ya vitabu tunaweza kutumia lists, Majina ya mitaa mbali mbali ,Orodha ya vitu vilivyopo kwenye website yako n.k.
Maeneo ni mengi sana ambayo tunaweza kutumia lists.

AINA ZA LISTS
List zipo za aina kuu tatu.
(i)Ordered lists.
(ii)Unordered lists.
(iii)Definition lists.

Ordered lists hutumika kuorodhesha vitu kwa mpangilio (means a number pamoja na item husika). Tutaona kwenye html code.

Unordered lists hutumika kuorodhesha vitu kwa kutumia dots au square n.k.

Definition lists hii hutumika kuorodhesha vitu pamoja na maelezo yake .

note:
tukitaka kuandika code isiweze kutambuliwa na browser tunatumia:
<!-- -->

mfano wa html code

c6.JPG




MATOKEO YAKE KATIKA BROWSER:

w6.JPG




Summary:
(1)Tukianza kuandika ordered lists tunatumia <ol> </ol> , ol ina maana ya ordered list.
ndani ya opening and closing ol. tunaanza kuorodhesha lists ya vitu vyetu <li> </li> .kama inavyoonekana kwenye html code hapo juu. li inamaana ya lists( kumaanisha orodha ya vitu).
(2)Unordered lists hizi zinatumia <ul> </ul> kumaanisha unordered lists.ndani yake tunaandika lists ya vitu kama inavyoonekana kwenye html code hapo juu.
 
TUENDELEE.

katika definition lists :
hii tutamia elements
<dl> </dl> --maana yake ni defition lists
<dt> </dt> ---- maana yake ni definition term (ndani yake tutaandika neno ambalo tunataka tulielezee.)
<dd> </dd> -- maana yake ni definition hapa kutakuwa na maelezo ya term yetu tuliyoiandika katika dt.

mfano katika html code:
c7.JPG






matokeo katika browser:


w7.JPG



TUTAENDELEA KESHO NA SEHEMU ZINGINE..
 
Zero_and_One said:
Ordered lists hutumika kuorodhesha vitu kwa mpangilio (means a number pamoja na item husika). Tutaona kwenye html code.

Unordered lists hutumika kuorodhesha vitu kwa kutumia dots au square n.k.
Click to expand...
Jaribu kuelezea vizuri hapa na utoe tofauti zao kwani ukitumia ordered lists hizo dots hazitaonekana?!
tofauti ya ordered lists na unordered lists ni nini?!

maelezo yako mengi hayako vizuri Ila unajitahidi pia jaribu kutumia text editor au ide ambayo inapanga code zako vizuri.
 
mathsjery said:
Jaribu kuelezea vizuri hapa na utoe tofauti zao kwani ukitumia ordered lists hizo dots hazitaonekana?!
tofauti ya ordered lists na unordered lists ni nini?!

maelezo yako mengi hayako vizuri Ila unajitahidi pia jaribu kutumia text editor au ide ambayo inapanga code zako vizuri.
Click to expand...

Niliwa na kazi kidogo.Shukrani kwa swali lako zuri .
Kwanza natumia Visual Studio code na notepad++ kuandika html code zangu ntajitahidi kuzipangilia vizuri .Kwanza bado tupo basic concept za html kwahiyo mambo yatakuwa mazuri muda sio mrefu.

Ordered lists na unordered lists nimejaribu kuelezea kidogo katika posts namba 9.
ukitumia ordered lists basi lists zako zitajipanga kwa namba kuanzia 1,2,3,4.... nakuendelea automatically pasina ya wewe kuandika hizo namba katika lists zako na tunatumia <ol> elements refer posts namba 9 lakini kwa upande wa unordered lists ni kwamba ukitumia <ul> elements ambapo tuna maanisha unordered lists basi kwenye browser itaonekana dots (ukiangalia posts namba tisa utaona tofauti ) lakini sio lazima dots zitokee hapo baadae tukianza kusoma css tutaona kuna style mbali mbali tunaweza kutumia katika lists zetu. (tunaweza kuondoa dots na kuweka style nyingine) .
 
TUENDELEE.

NESTED LISTS
Tunaweza kuweka list za vitu mbali mbali katika <li> ili kuweza kutengeneza sub-list au nested list.Mfano tukaandika lists ya mikoa minne ARUSHA,DAR ES SALAAM ,MWANZA NA DODOMA hizi zitakuwa ni lists zetu ,ndani ya hiyo mikoa tukaandika wilaya zake basi hizo wilaya zitakuwa ni sub-list au nested list kumaanisha ni lists ambazo zipo ndani ya lists zingine.

Html code

c8.JPG




MATOKEO KATIKA BROWSER


w8.JPG



Sumarry
-->Sijaweza kuiweka mikoa yote na wilaya zake.
-->Lakini unaweza ukaona tofauti na kuna dots hizo hapo juu zinaonekana kutujulisha kwamba ni unordered lists ambapo ndani yake kuna unordered list zingine zinazojulikana kama sub-lists au nested lists


SOMO LINALOKUJA NI KUHUSIANA NA LINKS.
 
LINKS
-Ni moja ya vipengele muhimu sana katika html kwani katika web page moja unaweza ukakuta links hata zaidi ya 10.
-Links huweza kumfanya mtumiaji kutoka katika sehemu moja ya web page kwenda sehemu nyingine.Mfano upo hapa JF unaweza ukaponyeza links ukajikuta umeingia website nyingine kama Telegram AU page nyingine katika website moja hiyo hiyo ( hii hutokana na links).

AINA ZA LINKS
--->links ya kutoka website moja kwenda nyingine ( tutaona mifano katika html code).
--->Links kutoka page moja kwenda nyingine ndani ya website moja ( mfano JF Siasa kwenda JF Habari Mchanganyiko)
--->Links ya kutoka sehemu moja kwenda nyingine ndani ya page hiyo hiyo mfano upo juu ya web page unaclick sehemu unajikata umefika chini ya web page hiyo hiyo .
---->Links ambayo unafungua browser window nyingine.
(Zote hizi nitazielezea jinsi ya kuandika)

JINSI YA KUANDIKA LINKS
Ili tuweze kuandika links tutatumia <a> elements( tunavyozungumzia <a> element ni neno litakalo tufanya tuweze kuandika links)
kwahiyo kuna <h> element inayotuwezesha kuandika heading , <p> element inayotuwezesha kuandika paragraph , <ul> element kwa unordered list items n.k. elements zipo nyingi kwa vitu mbali mbali. Na maneno yanayokuwa ndani ya element yanayokuwa na kazi maalumu yanaitwa attribute .

-kwahiyo links tunatumia <a> element ambapo ndani yake tutatumia href attribute .

mfano wa links katika html code



c9.JPG



MUONEKANO WAKE KATIKA WE BROWSER




w9.JPG




SUMMARY
-->namba moja ni href attribute kirefu chake ni hypertext reference .hii inatuwezesha kutupa muongozo ni wapi hizo taarifa tutazipata mfano links kwenda Jf itakuwa ni <a href="JamiiForums">JF</a> ndani ya website yetu.
-->namba mbili ni maneno ambayo mtumiaji wa website yako anayaona. unaweza kuziangalia vizuri html code na matokeo katika browser hapo juu.
-->Pia unaweza kuandikiwa maneno tofauti na links ikawa inaenda sehemu nyingine ,ndo maana hushauriwi kubonyeza links ovyo ovyo.(muhimu sana) .
-->link kwa kutumia <a> element ina kufungua na kufunga kwa hiyo element.
-->Ukibonyeza hapa utaenda kwenye home page ya google utaenda moja kwa moja www.google.com katika code za hapo juu.




LINKS KUTOKA PAGE MOJA KWENDA NYINGINE NDANI YA WEBSITE

-->Hapa tutatengeneza page tatu za html tutazipa jina home.html , About.html,Forms.html na Contact.html katika Desktop na tutalipa jina la folder wasiojulikana na tutaweza kulink hizo page nne za html kwa pamoja.

-->Pia tutatumia unordered lists .Ili tuweze kuziorodhesha hizo page zetu .




Muonekano wake
f.JPG





Katika home page Html code zetu zitaonekana:



c10.JPG



MATOKEO YAKE KATIKA BROWSER.


w10.JPG




SUMMARY :

--->Ukiwa umeandika html page zako katika folder moja huitaji kuandika jina la hilo folder kwenye link zako .Unaweza kuangalia vizuri html code hapo juu.Hamna sehemu yeyote tuliyoandika wasiojulikana katika code zetu ni kwasababu page zote hizo zinapatikana katika folder moja.

-->Ikitokea ndani ya wasiojulikana kuna folder jingine, kwa mfano folder la mawasiliano(litakuwa ndani ya wasiojulikana ) na tukasave Contact.html ndani yake .
c11.JPG




code za kulink hili file(contact.html) ndani ya home.html page zitabadilika na kuwa :

<a href="mawasiliano/Contact.html">Contact</a>




KUFUNGUA LINKS KATIKA WINDOW MPYA
-->Hii ni rahisi cha kufanya ni kuongeza attribute ya target katika <a> tag mwazo wake kabla hujaifunga .Katika target attribute tutaandika target="_blank" basi tutakuwa tumemaliza.

mfano link wa link ya hapo juu tukitaka ifunguje katika window mpya itasomeka.
<a href="mawasiliano/Contact.html" target="_blank" > Contact </a>

TUAENDELEA NA SEHEMU YA MWISHO YA LINKS .IKIWA TUNATAKA KULINK KATIKA PAGE HIYO HIYO MOJA BILA YA KUSHIFT KATIKA PAGE NYINGINE(INATUMIKA SANA IKIWA TUNA PAGE MOJA YENYE MANENO MENGI ).
 
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 .

c12.JPG



Muonekano wa html code katika browser.

w11.JPG





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

c14.JPG






MATOKEO KATIKA BROWSER



w14.JPG





TUNAENDELEA NA TABLE MUDA SIO MREFU
 
You must log in or register to reply here.

Similar Discussions

Back
Top Bottom
Forums
New posts
Post thread
Back