Web development for beginners in swahili

[Francis Mawere]

Haya watu wasome bhana hakuna haja yakukomaa na vitu visivyo na maana, Na ningetamani baada ya HTML na CSS ije JAVA

 

[frankgalos]

Haya watu wasome bhana hakuna haja yakukomaa na vitu visivyo na maana, Na ningetamani baada ya HTML na CSS ije JAVA

Nikiwa na mda nikimaliza hii nitaweza kufundisha javascript kiundani zaidi kwasababu sio kubwa kivile.Na ntaweze kutumia baazi ya project ambazo ntaweza kuzifanya humu ziwe zinatumia javascript yani html css na js

 

[mediapix]

Java and javascript ain't the same, ... heads up

 

[frankgalos]

Java and javascript ain't the same, ... heads up

Shukran sana mickey.T kwa kuonesha ushirikiano. Pia java misconception sikutaka kuielezea humu. Mbaka kwenye somo husika. Ila shukran sana kwa kuwaeleza hili.pia mimi ntaelekeza javascript na sio java.

 

[mediapix]

Kwa kuchangia somo hili.. Natoa free hosting kwa ajili ya mazoezi.

TAFADHALI USIBADILISHE PASSWORD YA CPANEL


Domain name: www.jamiiforums.ml
cpanel: jamiiforums.ml/cpanel
username: jamiiforums
password:mwanafunzi2016

 

[frankgalos]

Kwa kuchangia somo hili.. Natoa free hosting kwa ajili ya mazoezi.

TAFADHALI USIBADILISHE PASSWORD YA CPANEL


Domain name: www.jamiiforums.ml
cpanel:www.jamiiforums/cpanel
username: jamiiforums
password:mwanafunzi2016

Shukran sana mickey.T kwa huu msaada ulio uto ntalitumia hii domain kwa kila live testing ntakayo itoa.

 

[mediapix]

welcome!!
for support upande wa hosting call 0676953511

 

[frankgalos]

welcome!!
for support upande wa hosting call 0676953511

Shukrani sana kwa support yako.kama ntakua na tatizo ntatumia hiyo namba.

 

[Konda wa bodaboda]

CSS ni kifupi cha CASCANDING STYLE SHEETS.

yani ni style ambazo zinatumika kuipendezesha website kama jamii forum unavoiyona ivi haikusimama na html pekeyake imetumia css ili kuipendezesha KATIKA hii kozi kama utaendela kufatilia nitaizungumzia kiundani. Hope utafatilia.

Nitafuatilia hili darasa hadi nione mwisho wake, pia jitahidi kuongeza kasi ili kuwapa nafasi watakaoukuwa hawajaelewa. Hivi CSS ni programu unayotakiwa kuidownload au vipi? Je kuisoma ni ndefu na inahitaji mtu wa kukusimamia au hata online tu kunatosha kujifunza?

 

[Konda wa bodaboda]

Haya watu wasome bhana hakuna haja yakukomaa na vitu visivyo na maana, Na ningetamani baada ya HTML na CSS ije JAVA

Hivi JAVA ni nini na ina kazi gani?

 

[Freelancer Wakala]

Nimewapata wakuu.thanks a lot.

 

[mtembea kwa miguu]

Nitafuatilia hili darasa hadi nione mwisho wake, pia jitahidi kuongeza kasi ili kuwapa nafasi watakaoukuwa hawajaelewa. Hivi CSS ni programu unayotakiwa kuidownload au vipi? Je kuisoma ni ndefu na inahitaji mtu wa kukusimamia au hata online tu kunatosha kujifunza?

Daah natamani kuchangia hapa ili nimpunguzie mleta mada maswari ila nasubiri ruhusa yake.

 

[frankgalos]

Daah natamani kuchangia hapa ili nimpunguzie mleta mada maswari ila nasubiri ruhusa yake.

Nitafuatilia hili darasa hadi nione mwisho wake, pia jitahidi kuongeza kasi ili kuwapa nafasi watakaoukuwa hawajaelewa. Hivi CSS ni programu unayotakiwa kuidownload au vipi? Je kuisoma ni ndefu na inahitaji mtu wa kukusimamia au hata online tu kunatosha kujifunza?

CSS sio programu ni file ambalo unalolitengeneza na kulipa instructions za kuipendezesha website yako.Tutaangalia css inavo fanyakazi later

 

[Konda wa bodaboda]

CSS sio programu ni file ambalo unalolitengeneza na kulipa instructions za kuipendezesha website yako.Tutaangalia css inavo fanyakazi later

Nimekupata, je file hilo unalitengeneza kwa kutumia program gani?

 

[frankgalos]

Nimekupata, je file hilo unalitengeneza kwa kutumia program gani?

Hilo file unalitengeneza kwakutumia notepad ya kompyuta yako au unaweza kudownload notepad ++ kupitia google na ukalitengeza. utalipa jina lolote ila mwisho wajina lazima uweke .css kumaanisha hili file au kitakacho andikwa kwenye hilo file ni styles za css

 

[frankgalos]

Karibuni tena marafiki katika sehemu nyingine ya HTML.Humu nimeendelea kuongelea kiundani html .Ili kumfanya biginner aelewe jinsi ya kuzitumia hizi elements na attributes.



HTML Atributes(sifa).

Attribute inatoa taarifa za ziada.

· HTMl elements(mambo) yanaweza kuwa na Attribute.

· Attribute inatoa taarifa zaziada kuhusu element.

· Attribute inaelewa na tag ya kuuanzia(kitambulisho cha kuanzia).

· Attribute inakuja na jina/thamani jozi(pair) kama: jina=”Thamani”.

Attribute ya lugha.

Nyaraka ya lugha (document language) inaweza kuitwa ndani ya <html> tag.

Lugha inawekwa ndani ya lang Attribute.

Uitwaji wa lugha ni muhimu sana kwa upatikanaji wa application(screen leaders) na search engines(injini ya utafutaji).


MFANO.

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>jina langu ni</h1>
<p>Haya yangu ya kwanza.</p>

</body>
</html>


Maelezo kuhusu mfano.


Herufi mbili za mwanzo zinataja lugha kuwa ni (en).kama kuna ( dialect ).tumia herufi mbili zaidi (us).


Sifa za kichwa (Title attribute).


Aya za HTML zina elezwa na <p>tag.


Mfano.

<p title="Swahili kozi">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>


Maelezo kuhusu mfano.


<p>element ina title attribute.Na thamani yake ni “Swahili kozi”.

Ukipeleka mouse yako hadi kwenye haya maandishi kichwa kitajitokeza kama tooltip.


Sifa za href (href attribute).


Links za HTML zinaelezwa na <a>tag.Anuani ya link utolewa ndani ya href attribute.


Mfano.


<a href=" www.jamiiforums.ml"> Hii ni link</a>


Tutajifunza Zaidi kuhusu links na <a>tag baadae kwenye hii kozi..


Sifa za ukubwa (Size Attribute)


Picha za HTML zinaelezwa na <img>tag.


Chanzo cha jina la file (src).na ukubwa wa picha (width na height) vyote vinatolewa kama attributes.


Mfano.


<img src="www.jamiiforums.ml/images/wd_03.png " width="154" height="47">


Ukubwa wa picha unaelezwa na pixels: width = “154” inamaanisha picha upana wake ni 154.


Tutajifunza Zaidi kuhusu picha na <img>tag mbele mwa hii kozi.


Sifa Mbadala (Alt attribute).

Alt attribute inatoa maandishi ya ziada yakutumia,Pindi element za HTML haziwezi kuonekana (HTML element canot displayed).


Thamani ya attribute inasomwa na “Screen readers”.Kwanjia hii mtu ambaye anasikiliza kupitia webpage, kipofu anaweza kusikia element.


Mfano.


<img src="www.jamiiforums.ml/images/wd_03.png " width="154" height="47" alt=” www.jamiiforums.ml”>


Napendekeza sikuzote weka quote kwenye thamani ya attribute (attribute value) jina“ qoute”.
HTML 5 haiitaji “qoute” pembeni mwake. Mfano wa href hapo juu.
Unaweza kufanywa kama ivi.
<a href= www.jamiiforums.ml >

Katika HTML 4 inaitaji kutumia “qoute” na nyaraka kali kama XHTML.
Mda mwingine ni muhimu kutumia “qoute”.huu mfano hauto unesha vizuri kwasababu kuna nafasi:
<p title=kuhusu webdevelopment>

Kutumia “qoute” ni kawaida sana.kuto tumia kuna weza kuzarisha Makosa.
Single na Double quotes ?
Double aina ya “qoute” ndo inayotumika sana ndani ya HTML,
Lakini sigle aina ya ‘qoute’ inaweza kutumika pia.
Mfano.


<p title=”webdevelopment”>


<p title=’webdevelopment’>


Unaweza kutumia quote ndani ya quote yani single quote inaweza kutumika ndani ya double quote au kinyume.


<p title=’ “webdevelopment“ ’>


Au


<p title=” ’webdevelopment’ “>


Summary.


· Element zote za HTML zinaweza kuwa na attributes(sifa).

· Kichwa(title) cha HTML attribute kinatoa taarifa ya nyongeza.

· HTML href attribute inatoa taarifa ya anunani kwajiri ya links(viungo).

· Width na Height attribute zinatoa taarifa za ukubwa wa picha.

Alt attribute inatoa maandishi kwaajiri ya screen readers(wasomaji screen).

Attribute zilizokuwepo chini zina tumika sana.
alt Inatoa maandishi ya ziada kwaajiri ya picha

disabled Inaeleza kwamba input element tabidi iwe disabled

href Inaeleza URL (web address) kwaajrli ya link(kiungo)

id inaeleza id ya kipekee kwaajiri ya element

src inaeleza URL (web address) kwaajiri ya image

style Inaeleza style ya ndani ya mstari kwaajiri ya element

title Inaeleza taarifa ya ziada kuhusu element(displayed as a tool tip)

<div> inaeleza section ndani ya nyaraka

<footer> inaeleza footer(mwisho wa page/taarifa za ziada zinazo onekana chini ya webpage) kwaajiri ya nyaraka au section

<nav> inaeleza link za urambazaji(navigation link)

<header> inaeleza header kwaajiri ya nyaraka(document) au section

<menu> inaeleza list/menu kwaajiri ya commands

<meta> inaeleza metadata kuhusu nyaraka ya HTML.

Anaruhusiwa mtu yeyote kuchangia..

Itaendelea ….

 

[frankgalos]

Baada ya hii kozi utaweza ku design template kama hii na full functionality tutazitengeneza tukijifunza javascript

kuna baazi ya devices sija i test ila kwa wale wenye device hasa android 4.4 au zaid ntashukuru mkinipa feed back kama ina display vizuri

>> frankgalos <<

 

[TheDek]

Baada ya hii kozi utaweza ku design template kama hii na full functionality tutazitengeneza tukijifunza javascript

kuna baazi ya devices sija i test ila kwa wale wenye device hasa android 4.4 au zaid ntashukuru mkinipa feed back kama ina display vizuri

>> frankgalos <<

Nimeipitia nimeifurahia sana inaweza kuchukua mda gan hadi kumaliza hii course?

 

[frankgalos]

Nimeipitia nimeifurahia sana inaweza kuchukua mda gan hadi kumaliza hii course?

Nnacho jaribu kukwambia ni kuamvumilivu na ujue kwanza alafu utajitengenezea web ya aina yoyote hile.Kwaiyo jibu langu ili kua web expert inachukua mda.kwaiyo sina tathimini maalum ila haito chukua week nyingi.

 

[frankgalos]

Karibuni marafiki katika sehemu nyingine ya HTML.Humu tutajifunza baazi ya tag na kuziangalia kiundani zaid.
Pia kwa wale wa css tutaanza kuiangalia kesho.


Vichwa vya HTML (HTML Headings).

<h1> inaeleza kua heading(vichwa) ya muhimu sana.<h6> inaeleza kua ni angalau ya muhimu.


Mfano.

<!DOCTYPE html>

<html>

<body>

<h1>Hii ni heading 1</h1>

<h2> Hii ni heading 2</h2>

<h3> Hii ni heading 3</h3>

<h4> Hii ni heading 4</h4>

<h5> Hii ni heading 5</h5>

<h6> Hii ni heading 6</h6>

</body>

</html>


Browsers itakavyo onesha.

Hii ni heading 1

Hii ni heading 2

Hii ni heading 3

Hii ni heading 4

Hii ni heading 5

Hii ni heading 6


Kumbuka : Browser moja kwa moja inaongeza nafasi (margin) baada na kabla ya kila heading(kichwa).

Vichwa vya muhimu.

Tumia vichwa kwaajiri ya vichwa pekiyake.Usitumie vichwa kwaajili ya kufanya maandishi yawe makubwa au bold.

Injini za tafutaji(search engines) zinatumia headings(vichwa) zako ili kuashiria muundo na yaliyomo kwenye kurasa ya kimtandao(web page) yako.

Watumiaji wana engua(skim) kurasa yako kwa vichwa(headings) vyake.Nimuhimu kutumia vichwa(headings) kwaajiri ya kuonesha muundo(structure) wa nyaraka(document).

Vichwa vya <h1> tabidi ndo viwe vichwa vikuu.vikifatiwa na <h2>.na ndo yake ni <h3> nakuendelea <h6>.


Kanuni usawa za HTML (HTML Horizontal rules).

<hr>tag inatengeneza mstari usawa katika kurasa ya HTML.

Element ya hr inaweza kutumika kuachanisha yaliyomo(content).

Mfano.

<!DOCTYPE html>

<html>

<body>

<p> hr tag enaeleza kanuni usawa:</p>

<hr>

<p>Hii ni aya.</p>

<hr>

<p> Hii ni aya.</p>

<hr>

<p> Hii ni aya.</p>

</body>

</html>

Muonekano wake.


hr tag enaeleza kanuni usawa:


Hii ni aya.


Hii ni aya.


Hii ni aya.


Kipengere cha <head>(kichwa).

Kipengele cha <head> akina maana sawa na vichwa vya HTML (HTML headings).

Kipengele cha <head> kina meta data(taarifa kuhusu nyaraka ya HTML).Meta data Hazioneshwi.

Kipengele cha <head> kinawekwa kati ya <html> tag na <body>tag.


Mfano.

<!DOCTYPE html>

<html>

<head>

<title>ni html yangu ya kwanza</title>

<meta charset="UTF-8">

</head>

<body>


<p>kichwa kina meta data.</p>

<p>Meta data ni taarifa kuhusu nyaraka ya HTML</p>


</body>

</html>

Tip: Meta data inamaanisha ni data kuhusu data (taarifa kuhusu taarifa).HTML meta data ni taarifa kuhusu nyaraka ya HTML.


Kipengele cha <title>.

Kipengele cha jina ni meta data ambacho kinacho eleza kichwa cha nyaraka za HTML (HTML document’s title).

Title haito oneshwa kwenye nyaraka(document),ila inaweza kuonekana kwenye tab ya browser yako.


Kipengele cha <meta>.

Kipengele cha <meta> nacho ni meta data.

Inaweza kutumika kuelezea character set(ni characters zinazo weza kutambulika na kompyuta au programu),na taarifa zingine kuhusu HTML.


Vipengele meta vya Zaidi tuta vigundua kwenye muundo wa HTML.

Kipengele meta <style> kinatumika kuaelezea style ya ndani ya css.

Kipengele <link> kinatumika kuelezea style ya nje ya css.


Tip:Ushawai kuiona website na ukawa unajiuliza wameitengenezaje. ?

Kujua bonyeza kitufe cha kulia katika mouse yako na chagua "View Page Source".

Hii itafungua window iliokua na code za HTML za page husika.


Aya za HTML.

Kipengele(element) <p> kinaeleza Aya.

Mfano.

<!DOCTYPE html>

<html>

<body>

<p>Hii ni aya.</p>

<p> Hii ni aya.</p>

<p> Hii ni aya.</p>

</body>

</html>


Browsers moja kwa moja ina ongeza nafasi kabla na baada ya Aya.


Muonekano wa HTML.

Huwezi kuwa na uhakika jinsi HTML inavonekana.

Screens kubwa au ndogo na resized windows zitatengeneza muonekano tofauti.

Kwa kutumia HTML huwezi kubadilisha au kuongeza nafasi zaziada au mistari ya ziada kwenye code zako.Browser itaondoa nafasi zaziada na mistari ya ziada wakati page inapo onekana.Hata uweke nafasi au mistari mingapi browser itaichukulia kama ni nafasi moja tu.


Mfano.

<!DOCTYPE html>

<html>

<body>


<p>

Hii aya

Ina

Mistari

mingi

</p>


<p>

Hii aya ina nafasi nyingi.

</p>


</body>

</html>


Mistari mingi inategemea na screen husika kama screen ndogo basi mistari nayo inaongezeka.lakin kama ni screen kubwa mistari ina tegemea na maneno kama yatakua machache basi utakua mstari mmoja tu.


HTML Line Breaks.


Kipengele <br> kinaeleza line break.

Tumia <br> kama unataka kuanza mstari mpya,bila kuanza Aya mpya.


Mfano.

<!DOCTYPE html>

<html>

<body>


<p>Hii ni<br>Ay<br>a na line breaks</p>


</body>

</html>


Kipengele <br> ni kitupu.Hakina tag ya kufungia</br>


Kipengele <pre> cha HTML.

Kipengele <pre> kinaeleza preformatted text.


Mfano.

<!DOCTYPE html>

<html>

<body>


<p>pre tag inabakisha vyote kati ya nafasi na line breaks:</p>


<pre>

Contrary to popular belief,.

Lorem Ipsum is not simply random text.

roots in a piece of classical Latin literature from 45 BC.

making it over 2000 years old. Richard McClintock.

</pre>

</body>

</html>


Muonekano.

Contrary to popular belief,.

Lorem Ipsum is not simply random text.

roots in a piece of classical Latin literature from 45 BC.

making it over 2000 years old. Richard McClintock.

itaendelea .....