Web development for beginners in swahili

Web development for beginners in swahili

Ralph Digga said:
JaVa Lugha inayotumika katika programming. Ndio lugha Ya mwisho kabisa yaan Latest Baada ya zile za kwanza Kama vile C, C++, OOP. hutumika kutengeza Programs mbali na Systems pia Mfano Apps za simu na system ya simu hata ya computer vilevile.
Click to expand...
Kwahiyo lugha ngapi utatakiwa ujifunze na unaweza kujifunza kwa mfano Java kwa muda gani kwenye makaratasi?
 
Karibuni marafiki katika sehem hii tutajifunza kuhusu form elements na matumizi yake.

Vipengele vya form(form elements)

Kipengele cha <input> ni kipengele cha muhimu sana kwenye form.

Hiki kipengele kinatofautiana kwa njia nyingi,inategemea na aina ya sifa(attribute).


Kipengele cha <select>(Drop-down list) hiki kipengele kinaeleza drop down list(orodha iliyo shuka chini).

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php" method=”post”>

<select name="mbegu">

<option value="maindi">Maindi</option>

<option value="maarage">Maarage</option>

<option value="viazi">Viazi</option>

<option value="njegele">Njegele</option>

</select>

<br><br>

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t17/1.html <

Kipengele cha <option> kinatoa chaguo la kuteuwa.

Kwakawaida orodha itaonesha item ya kwanza kama imekwisha teuliwa.

Unaweza kuongeza attribute ya selected ili kuonesha kuwa item imekusha teuliwa.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php" method=”post”>

<select name="mbegu">

<option value="maindi">Maindi</option>

<option value="maarage">Maarage</option>

<option value="viazi">Viazi</option>

<option value="njegele" selected>Njegele</option>

</select>

<br><br>

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t17/2.html <

Kipengele cha <textarea> Hiki kipengele kinaeleza multi line input field(sehem ya maandish/text area).

Mfano

<!DOCTYPE html>

<html>

<body>


<form action="formHandler.php">

<textarea name="ujumbe" rows="10" cols="30" placeholder=”andika chochote hapa …”></textarea>

<br>

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t17/03.html <


Kipengele cha <button> Hiki kipengele kinaeleza kitufe cha kubonyeza.

Mfano

<!DOCTYPE html>

<html>

<body>

<button type="button" onclick="alert('Aaaaaauuuuuuuuuuuu!')">Bonyeza hapa!</button>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t17/4.html <

Onclick ni event ya javascript tutajifunza Zaidi kuhusu DOM kwenye darasa la javascript.


HTML5 Form Elements

HTML5 imeongeza vipengele vifuatavyo.

1. <datalist>

2. <keygen>

3. <output>


Kipengele cha <datalist> Hiki kipengele kinatoa orodha ya vitu vilivyo kwisha chaguliwa kwaajiri ya kipengele cha <input>

Watumiaji wataona orodha ya vitu ambavyo vilisha chaguliwa kama taarifa za input.

List attribute ya kipengele cha <input> lazima kifanane na id attribute ya kipengele cha <datalist>

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

<h1>chagua browser unayoipenda</h1>

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t17/5.html <


Note: datalist aifanyi kazi kwenye internet explorer 9 na za mwanzo.


Kipengele cha <keygen> zumuni la hiki kipengele ni kutoa njia salama ya kuwathibitisha watumiaji (authenticate users).

Kipengele cha <keygen> kinatoa key-pair generator field ndani ya form.

Wakati form inawasilishwa keys mbili zinakuwa generated, ya kwanza ni private na yapili ni public.

Private key inaifadhiwa kikawaida(locally), na public key inatumwa kwenye server.

Public key inaweza ikatumika ku generate client certificate(certificate ya mtumiaji) in kumthibitisha(authenticate) mtumiaji kwa matumizi ya badae.


Mfano

<!DOCTYPE html>

<html>

<body>


<form action="formHandler.php">

Username: <input type="text" name="user">

<br><br>

Encryption: <keygen name="security">

<br><br>

<input type="submit">

</form>


</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t17/6.html <


Kipengele cha <output>Hiki kipengele kina wakirisha matokeo ya ukokotoaji (kama matokeo yalio fanywa na script).

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php"

oninput="x.value=parseInt(a.value)+parseInt(b.value)">

0

<input type="range" id="a" name="a" value="50">

100 +

<input type="number" id="b" name="b" value="50">

=

<output name="x" for="a b"></output>

<br><br>

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t17/7.html <


HTML <optgroup>tag Hii ni tag inayo tumika kuweka makundi ya machaguo yanayo fanana katika drop-down list.

Hii inatumika kama una orodha ndefu ya machaguo.

Mfano

<!DOCTYPE html>

<html>

<body>

<select>

<optgroup label="Maarage ya mbeya">

<option value="mekundu">Maarage mekundu</option>

<option value="soya">Soya</option>

</optgroup>

<optgroup label=" Maarage ya morogoro ">

<option value="soya">Soya</option>

<option value="njano">Njano</option>

</optgroup>

</select>

</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/t17/8.html <


Øfile <


www.jamiiforums.ml/tutorFiles/tutor18.docx <


Itaendelea …..
 
Konda wa bodaboda said:
Kwahiyo lugha ngapi utatakiwa ujifunze na unaweza kujifunza kwa mfano Java kwa muda gani kwenye makaratasi?
Click to expand...
katika programing unaweza kujifunza lugha moja tu ila inategemea unataka kufanya nini baada ya kujifunza. jinsi unavyo kuwa na matamanio ya kufanya kitu flani ndo language zinavozidi kuongezeka mfano umesoma java na unataka kutengeneza android application tabidi ujifunze android development kupitia java.kwaiyo lugha zinaongezeka kwakutegemea na kitu unacho taka kufanya baada ya kujifunza moja.
 
frankgalos said:
katika programing unaweza kujifunza lugha moja tu ila inategemea unataka kufanya nini baada ya kujifunza. jinsi unavyo kuwa na matamanio ya kufanya kitu flani ndo language zinavozidi kuongezeka mfano umesoma java na unataka kutengeneza android application tabidi ujifunze android development kupitia java.kwaiyo lugha zinaongezeka kwakutegemea na kitu unacho taka kufanya baada ya kujifunza moja.
Click to expand...
Ni programu ndefu?
 
Konda wa bodaboda said:
Ni programu ndefu?
Click to expand...
Nazani umemaanisha ukiisoma itachukua mda mrefu basi kama ivyo, yeah itachukua mdamrefu kwasababu tabidi ujue basic ya java then intermediate to advance, advance ni pale unapo anza kufanya maamuzi ya kutengeneza program base on your knowledge, yani no code snippets
 
frankgalos said:
Nazani umemaanisha ukiisoma itachukua mda mrefu basi kama ivyo, yeah itachukua mdamrefu kwasababu tabidi ujue basic ya java then intermediate to advance, advance ni pale unapo anza kufanya maamuzi ya kutengeneza program base on your knowledge, yani no code snippets
Click to expand...
Nimekuelewa mkuu, shukrani.
 
mickey.T said:
I will walk you through WPdevelopment using your own domain, live server 4 only 10,000 gharama hiyo ni ya hosting pamoja na domain name. By the end of the week. Utakuwa developer.

Hosting ya 1 month na Domain name .ml
Click to expand...
ongea kiswahili bas nawewe............
 
frankgalos said:
Nazani umemaanisha ukiisoma itachukua mda mrefu basi kama ivyo, yeah itachukua mdamrefu kwasababu tabidi ujue basic ya java then intermediate to advance, advance ni pale unapo anza kufanya maamuzi ya kutengeneza program base on your knowledge, yani no code snippets
Click to expand...
Nashukuru kwa darasa nzuri mkuu endelea na moyo huhuu...
Swali langu nikuwa mfano Kwenye kipengele cha style

Unakuta unaweka Background:#fff;
au Background:#888;

Je hizo ndo background colour za kipengele husika na je kwa sisi tunaojifunza hapa tutajuaje kuwa ukitumia code hii #888 inawakilisha rangi flani Naomba ikiwezekana kwasababu umeshagusia mambo ya Css pia utadadavulie matumizi ya rangi kwenye page
 
Makendaa said:
Nashukuru kwa darasa nzuri mkuu endelea na moyo huhuu...
Swali langu nikuwa mfano Kwenye kipengele cha style

Unakuta unaweka Background:#fff;
au Background:#888;

Je hizo ndo background colour za kipengele husika na je kwa sisi tunaojifunza hapa tutajuaje kuwa ukitumia code hii #888 inawakilisha rangi flani Naomba ikiwezekana kwasababu umeshagusia mambo ya Css pia utadadavulie matumizi ya rangi kwenye page
Click to expand...
Nashukuru sana kwa swali lako zuri , kuna aina nyingi za rangi na aina nyingi za uwasilishwaji wake kwa rangi ulizo ziweka hapo juu #fff, inamaanisha ni nyeupe ambayo unaweza ukaiweka kwakutumia background-color/background kwa css3
background:white; zote zinakubalika napia unaweza ukaiweka kwa mtindo huu rgb(255,255,255) nk .
kwasababu kuna rangi kuu na zisizo kuu, kwaiyo ili uweze kupata rangi isiyo kuu unaweza kutumia #ddd iki maanisha gray ambayo kuuyake ni black au #000;

Napia darasa la rangi nisha litoa ila sikusema kama unaweza kujua wap rangi zote hizi

ilikusoma rangi zote tembelea google na usearch adobekuller humo ndo utapata rangizote kwa HEX na RGB

Adobe Color CC

Au unaweza tembelea hapa kupata majina ya kila rangi

147 Colors Grid - CSS Color Names

Asante.
 
frankgalos said:
Nashukuru sana kwa swali lako zuri , kuna aina nyingi za rangi na aina nyingi za uwasilishwaji wake kwa rangi ulizo ziweka hapo juu #fff, inamaanisha ni nyeupe ambayo unaweza ukaiweka kwakutumia background-color/background kwa css3
background:white; zote zinakubalika napia unaweza ukaiweka kwa mtindo huu rgb(255,255,255) nk .
kwasababu kuna rangi kuu na zisizo kuu, kwaiyo ili uweze kupata rangi isiyo kuu unaweza kutumia #ddd iki maanisha gray ambayo kuuyake ni black au #000;

Napia darasa la rangi nisha litoa ila sikusema kama unaweza kujua wap rangi zote hizi

ilikusoma rangi zote tembelea google na usearch adobekuller humo ndo utapata rangizote kwa HEX na RGB

Adobe Color CC

Au unaweza tembelea hapa kupata majina ya kila rangi

147 Colors Grid - CSS Color Names

Asante.
Click to expand...
Nashukuru kwa majibu yako mkuuu nitazipitia rangi zote hizo na je Kwenye uwasilishaji Naweza nikatumia Mfano Background:Grey au nikaamua kutumia kwa mtindo huu wa #ddd
zote zitaleta matokeo sawa?

Hasante.
 
Makendaa said:
Nashukuru kwa majibu yako mkuuu nitazipitia rangi zote hizo na je Kwenye uwasilishaji Naweza nikatumia Mfano Background:Grey au nikaamua kutumia kwa mtindo huu wa #ddd
zote zitaleta matokeo sawa?

Hasante.
Click to expand...
zote zitaleta jibu moja tu ila katika kuwasilisha kwa majina jaribu usi changanye herufi kama Grey baada ya grey tumia herufi ndogo, au kama kubwa weka kubwa zote hata ukitumia kwa mfumo #ddd, #DDD
 
Habari marafiki karibuni tena katika sehemu hii nyingine ya HTM na css,katika sehem hii tutajifunza aina zote za kipengele cha input na matumizi yake.



Aina za Inputs (input types)

Input type = text

<input type=”text”> inaweka mstari mmoja wa uwanja wa input kwaajiri ya maandishi

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Jina la kwanza:<br>

<input type="text" name="jinalakwanza">

<br>

Jina la mwisho:<br>

<input type="text" name="jinalamwisho">

<br><br>

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/1.html <


Kwa kawaida upana wa uwanja wa maandishi ni wa herufi 20 tu.zaidi unaweza kuongeza kwa kutumia css:

Input{

Width:270px;

}


Input type = Password

<input type=”password”> inaweka uwaja wa password(neno la siri)

Mfano

<!DOCTYPE html>

<html>

<body>


<form action="formHandler.php">

Jina:<br>

<input type="text" name="jina">

<br>

Neno la siri:<br>

<input type="password" name="pass">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/2.html <

Herufi zilizo kuwepo katika uwaja wa password(neno la siri) zina wekwa alama ya kiduala.


Input type = submit

<input type=”submit”> inaweka kitufe cha kubonyeza kwaajiri ya kuwasirisha form inputs kwa form handler.

Form handler kwa kawaida ni kurasa ya server ikiwa na script kwaajiri yak u processing taarifa za input.

Form handler inawekwa katika form’s kwakutumia attribute ya action.


Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Jina la kwanza:<br>

<input type="text" name="jinalakwanza" >

<br>

Jina la mwisho:<br>

<input type="text" name="jinalamwisho" >

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/3.html <

Ukibonyeza “submit” taarifa ulizo ziingiza zitatumwa katika faili linaloitwa formHandler.php


Kama ujaweka value attribute kwenye kitufe, kitufe kitakuwa na maandishi ya kawaida “submit query”

Katika value unaweza kuweka neno lolote kama “login” “register”;


Input type = radio

<input type=”radio”> inaweka kitufe(button) cha radio

Radio button(kitufe cha radio) kinamfanya mtumiaje achague chaguo moja kati ya mchaguo mengi.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

<input type="radio" name="gender" value="male" checked> Male<br>

<input type="radio" name="gender" value="female"> Female<br>

<input type="submit" value=”Jinsia”>

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/4.html <

Input type = checkbox

Checkbox inamfanya mtumiaji achague moja au Zaidi kati ya machaguo aliopewa au asichague chochote.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

<h4>Do I need to learn hard in order to be expert or aware of something ?</h4>

<input type="checkbox" name="ans1" >Yes

<br>

<input type="checkbox" name="ans2" >No

<br><br>

<input type="submit" value="Answers">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/5.html <

Input type = button

<input type=”button”> inaweka kitufe cha kubonyeza

Mfano

<!DOCTYPE html>

<html>

<body>

<input type="button" onclick="alert('Habari Rafiki!')" value="Bonyeza!">

</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/t18/6.html

Aina za Inputs za HTML5

· Color

· Search

· Date

· Datetime

· Datetime-local

· Email

· Month

· Number

· Range

· Tel

· Time

· url

· week

Hizi inputs hazi fanyi kazi kwenye browsers za zamani.


Input type = number

<input type=”number”> inatumika kwaajiri ya uwanja wa input ambao una thamani za namba tu.

Unaweza kuweka vikwazo(restrictions) kwenye namba.

Inategemea na browser kama ina support,na vikwazo vinaweza kuwekwa katika uwanja wa input.


Mfano

<!DOCTYPE html>

<html>

<body>


<form action="formHandler.php">

Bidhaa kati(1 hadi 10)

<input type="number" name="bidhaa" min="1" max="10">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/7.html <

Vikwazo vya input(input restrictions)

· Disabled – inaeleza kuwa input tabidi iwe disabled

· Max – inaeleza thamani ya mwisho(maximum value) kwaajiri ya uwanja wa input

· Maxlength – inaeleza idadi ya mwisho ya herufi kwaajiri ya uwanja wa input

· Min – inaeleza idadi ndogo ya thamani kwaajiri ya uwanja wa input

· Pattern – inaeleza regular expression ya kuangalia zidi ya thamani za input

· Readonly – inaeleza kuwa uwanja wa input hauwezi kubadilishwa.

· Required – inaeleza kuwa uwanja wa input tabidi ujazwe(usiwe mtupu)

· Size – inaeleza upana(kwenye herufi) kwaajiri ya uwanja wa input

· Step – inaeleza vipindi vya namba za kisheria kwaajiri (legal number intervals) ya uwanja wa input./hatua kutoka namba moja na nyingine

· Value – inaeleza thamani kwaajiri ya uwanja wa input

Tutajifunza Zaidi kuhusu vikwazo vya input kwenye masomo yajayo.


Mfano wa step

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Quantity:

<input type="number" name="points"

min="0" max="100" step="10" value="20">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/8.html <

Input type = date

<input type= “date”> inatumika kwenye uwanja wa input ambao una kuwa na tarehe.

Inategemea na browser kibox ya tarehe kitaonekana kwaajiri ya kuchagua tarehe wakati ukibonyeza kwenye wanja wa input


Mfano

<!DOCTYPE html>

<html>

<body>


<p>

Inategemea na browser kibox ya tarehe kitaonekana kwaajiri ya kuchagua tarehe wakati ukibonyeza kwenye wanja wa input

</p>


<form action="formHandler.php">

Birthday:

<input type="date" name="birthday">

<input type="submit">

</form>

</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/t18/9.html <


Internet explorer 9 kushuka chini date haifanyi kazi.


Unaweza kuweka restrictions kwenye input

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Ingiza kabla ya 2009-01-01:<br>

<input type="date" name="bday" max="2009-01-01"><br><br>

Ingiza baada ya 2016-01-01:<br>

<input type="date" name="bday" min="2016-01-01"><br><br>

<input type="submit">

</form>

</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/t18/10.html <


Input type = color

<input type= “color”> inatumika kwenye uwanja wa input ambao una kuwa na rangi

Inategemea na browser kibox cha rangi kitaonekana ukibonyeza wanja wa input.


Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Chaguwa rangi uipendayo:<br />

<input type="color" name="rangi" value="#ffa500">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/11.html <


Input type = range

<input type=”range”> inatumika katika uwanja wa input ambao una kuwa na thamani ndani ya range.

Inategemea na browser uwanja wa input unaweza kuoneshwa kama slider controller.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php" method="get">

Points:

<input type="range" name="points" min="0" max="100">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/12.html


Unaweza kutumia attributes min,step,max na value kuweka vikwazo(restrictions)


Input type = month

<input type=”month”> ina muezesha mtumiaji kuchagua mwezi na mwaka.

Inategemea na browser support,kibox cha tarehe kitaoneshwa ukibonyeza kwenye uwanja wa input.


Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Birthday [mwezi na mwaka]:

<input type="month" name="month">

<input type="submit">

</form>

</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/t18/13.html <


Input type = week

<input type=”week”> ina muezesha mtumiaji kuchagua wiki na mwaka.

Inategemea na browser kibox cha kuchagua tarehe kitaoneshwa.


Mfano

<!DOCTYPE html>

<html>

<body>


<form action="formHandler.php">

Chagua wiki na mwaka:

<input type="week" name="week">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/15.html <


Input type = time

<input type=”time”> ina muezesha mtumiaji kuchagua mda.

Inategemea na browser kibox cha kuchagua tarehe kitaoneshwa.


Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Chagua mda:

<input type="time" name="time">

<input type="submit">

</form>

</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/t18/16.html <


Aina hii ya input aifanyi kazi katika firefox/Mozilla na internet explorer


Input type = datetime

<input type=”datetime”> inamuezesha mtumiaji kuchagua tarehe na mda

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Siku ya kuzariwa(tarehe na mda)

<input type="datetime" name="dtime">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/17.html <

Aina hii ya input haifanyi kazi katika firefox,chrome,Explorer


Input type = datetime-local

<input type=”datetime-local”> ina muezesha mtumiaji kuchagua tarehe na mda bila time zone(mda wa eneo husika).

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Siku ya kuzariwa(tarehe na mda):<br>

<input type="datetime-local" name="dtime">

<input type="submit" value="Send">

</form>

</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/t18/18.html


Input type = email

<input type=”email”> inatumika kwaajiri ya uwanja wa input ambao una aunuani.

Inategemea na browser support anuani inaweza kuhalalishwa moja kwa moja wakati iki wasilishwa.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

E-mail:

<input type="email" name="email">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/19.html

Input type = search

<input type = “search”> inatumika kwaajiri ya uwanja wa kutafutia(upo kama uwanja wa kawaida wa maandishi)

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Tafuta:

<input type="search" name="tafuta">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/20.html

Input type = tel

<input type=”tel”> inatumika kwaajiri ya uwanja wa input ambao unakuwa na namba za simu.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="formHandler.php">

Telephone:

<input type="tel" name="tel">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/21.html

Aina hii ya input haifanyi kazi kwenye safari.


Input type = url

<input type=”url”> inatumika kwaajiri ya uwanja wa input ambao unakuwa na url address.

Inategemea na browser support url itakuwa ina halalishwa moja kwa moja wakati wa kuwasilishwa.


Mfano

<!DOCTYPE html>

<html>

<body>


<form action="formHandler.php">

url:

<input type="url" name="url">

<input type="submit">

</form>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/t18/22.html

< File >

www.jamiiforums.ml/tutorFiles/tutor18.docx <

Itaendelea ……>
 
karibuni sana marafiki, katika sehemu hii tutajifunza kuhusu Input Attributes na jinsi zinavo fanya kazi.

Pia naomba radhi kwakuwa somo hili halitokuwa na live testing kwaiyo natumaini mtakuwa mnatest kupitia browser zenu baada ya kusoma.

Input Attributes(sifa za input)​

Value attribute hii attribute inatoa thamani ya awali kwaajiri ya uwanja wa input.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="">

Jina la kwanza:<br>

<input type="text" name="jinalakwanza" value="Frank">

<br>

Jina la mwisho:<br>

<input type="text" name="jinalamwisho">

</form>

</body>

</html>


Readonly attribute

Hii attribute inaeleza kuwa uwanja wa input hauwezi kubadilishwa(read only).

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="">

Jina la kwanza:<br>

<input type="text" name="jinalakwanza" value="Frank" readonly>

<br>

Jina la mwisho:<br>

<input type="text" name="jinalamwisho">

</form>

</body>

</html>

Readonly attribute haiitaji thamani(value) ni sawa sawa na ukiandika readonly = “readonly”


Disabled attribute

Hii attribute inaeleza kuwa uwanja wa input uwe disable.

Kipengele kilichokuwa disabled hakina matumizi na hakiwezi kubonyezeka.

Kipengle kilichokuwa disabled hakiwezi kuwasilishwa(submitted)


Mfano

<!DOCTYPE html>

<html>

<body>

<form action="">

Jina la kwanza:<br>

<input type="text" name="jinalakwanza" >

<br>

Jina la mwisho:<br>

<input type="text" name="jinalamwisho" value="Galos" disabled >

</form>

</body>

</html>


Disabled attribute haiitaji thamani(value) ni sawa sawa na ukiandika disabled = “disabled”


Size Attribute

Hii attribute inaeleza ukubwa(kwenye uwanja wa input) kwaajiri ya uwanja wa input.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="">

Jina la kwanza:<br>

<input type="text" name="jinalakwanza" >

<br>

Jina la mwisho:<br>

<input type="text" name="jinalamwisho" size=”50” >

</form>

</body>

</html>


Maxlength attribute

Hii attribute inaeleza idadi ya herufi zinazo ruhusiwa kwenye uwanja wa input.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action="">

Jina la kwanza:<br>

<input type="text" name="jinalakwanza" >

<br>

Jina la mwisho:<br>

<input type="text" name="jinalamwisho" maxlength=”6” >

</form>

</body>

</html>


Attribute za HTML5

HTML5 imeongeza attribute zifuatazo kwaajiri ya input

· Autocomplete

· Autofocus

· Form

· Formaction

· Formenctype

· Formmethod

· Formnovalidate

· Formtarget

· Height na width

· List

· Min na max

· Multiple

· Pattern(regexp)

· Placeholder

· Required

· Step


Autocomple na novalidate kwaajiri ya form


Autocomple attribute

Hii attribute inaeleza kuwa eidha form au uwanja wa input uwe na autocomple on au off.

Pindi autocomple ikiwa on, browser moja kwa moja inamalizia thamani ambazo alishawai kuziingiza mwanzo.

Inawezekana kuwa na autocomple “on” au “off” kwaajiri ya form au kwaajiri ya uwanja wa input.

Autocomple inafanya kazi kwenye <form> na aina zifuatazo za <input>:text,search,url,tel,email,password,datepickers,range na color.

Mfano

<!DOCTYPE html>

<html>

<style>

form > input{

width:250px;

display:block;

padding:8px;

margin:5px 0 0 0;

border-radius:2px;

border:1px solid #099999;

color:#099;

}


form > input#sub{

width:auto;

margin:0 0 0 10%;

cursor😛ointer;

}


form > input#sub:hover{

border-color:#ffa500;

transition:0.6s linear 0s;

color:#ffa500;

}


</style>

<body>

<form action=" " autocomplete="on">

Jina la kwanza:<br /><input type="text" name="f">

Jina la mwisho: <br /><input type="text" name="l">

Barua pepe: <input type="email" name="e" autocomplete="off"><br>

<input id="sub" type="submit">

</form>

</body>

</html>


Form hapo juu ipo autocomplete “on” isipokuwa email tu.ipo autocomplete “off”


Novalidate Attribute

Novalidate ni attribute ya <form>

Hii attribute inaeleza kuwa form isihalalishwe wakati waa uwasilishwaji.

Mfano

<!DOCTYPE html>

<html>

<style>

form > input{

width:250px;

padding:8px;

margin:5px 0 0 0;

border-radius:2px;

border:1px solid #ffa500;

color:#ffa500;

display:block;

}


form > input.sub{

width:auto;

margin:10px 0 0 10%;

}


form > input.sub:hover{

border-color:#099999;

color:#099999;

transition:0.5s linear 0s;

cursor😛ointer;

}

</style>

<body>


<form action=" " novalidate>

Barua pepe: <input type="email" name="e">

<input class = "sub" type="submit">

</form>

</body>

</html>


Autofocus Attribute

Hii attribute ni Boolean(true or false,1 or 0 ndio maana ya boolean) attribute;

Ikiwekwa hii inaeleza kuwa kipengele cha input kiwe moja kwa moja focus wakati kurasa ina load.

Mfano

<!DOCTYPE html>

<html>

<style>

form > input{

width:250px;

padding:8px;

margin:5px 0 0 0;

border-radius:2px;

border:1px solid cornflowerblue;

color:cornflowerblue;

display:block;

}


form > input#sub{

width:auto;

margin:10px 0 0 10%;

}


form > input#sub:hover{

border-color:#099999;

color:#099999;

transition:0.5s linear 0s;

cursor😛ointer;

}

</style>

<body>

<form action=" ">

Jina la mwisho:<input type="text" name="f" autofocus><br>

Jina la mwisho: <input type="text" name="l"><br>

<input id = "sub" type="submit">

</form>

</body>

</html>


Form Attribute

Hii attribute inaelezakuwa form moja au zaid kipengele cha input kina milikiwa(ningumu kuielezea but hope utapata idea kwenye mfano)

Ili kurejea form moja au zaid tumia aina tofauti tofauti ya ids

Mfano

<!DOCTYPE html>

<html>

<style>

#form1 > input{

width:250px;

padding:8px;

border-radius:2px;

margin:5px 0 0 0;

display:block;

border:1px solid #d3a;

}

#form1 > input#sub{

width:auto;

margin:10px 0 5px 10%;

}


#form1 > input#sub:hover{

transition:0.7s linear 0s;

border-color:#2fd;

cursor😛ointer;

color:#2fd;

}


#l{

width:250px;

padding:8px;

border-radius:2px;

margin:5px 0 0 0;

display:block;

border:1px solid #d3a;

}

</style>

<body>

<form action=" " id="form1">

First name: <input type="text" name="f">

<input type="submit" id = "sub" value="Submit">

</form>

Jina la mwisho: <input type="text" id = "l" name="l" form="form1">

</body>

</html>


Note: uwanja wa jina la mwisho upo nnje lakini bado ni sehem ya form.


Formaction Attribute

Hii attribute inaeleza url ya faili ambalo litakuwa liki pokea taarifa za input wakati form ime wasilishwa.

Formaction attribute ina ioverrides action ya kipengele cha <form>.

Formaction attribute inatumika na type = “submit” na type = “image”.


Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" ">

Jina la kwanza: <input type="text" name="f"><br>

Jina la mwisho: <input type="text" name="l"><br>

<input type="submit" value="Submit"><br>

<input type="submit" formaction="formHandler2.php" value="Wasilisha kama Mmilik">

</form>

</body>

</html>


Formenctype Attribute

Hii attribute inaeleza jinsi ya taarifa zinazo tolewa na form ziwe encoded kivipi wakati wa kuwasilishwa kwenye server na inafanya kazi kwenye form yenye method ya post method = “post”

Formenctype ina override enctype attribute ya kipengele cha form.

Formenctype ina tumika kwenye input yenye type = “submit” na type = “image”.


Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" ">

Jina la kwanza: <input type="text" name="f"><br>

Jina la mwisho: <input type="text" name="l"><br>

<input type="submit" value="Submit"><br>

<input type="submit" formenctype=”multipart/form-data” value="Wasilisha kama Multipart/form-data">

</form>

</body>

</html>


Formnovalidate Attribute

Hii attribute ni boolen attribute.

Ikiwepo inaeleza kuwa kipengele cha <input> kisihalalishwe wakati wa kuwasilishwa.

Formnovalidate ina override novalidate attribute ya kipengele cha <form>

Form novalidate inwezakutumika na input yenye type= “submit”


Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" ">

Barua pepe: <input type="email" name="e"><br>

<input type="submit" value="Submit"><br>

<input type="submit" formnovalidate value="Wasilisha bila kuhalalishwa">

</form>

</body>

</html>


Formmethod Attribute

Hii attribute inaeleza njia ya HTTP kwaajiri ya kutuma taarifa za form kupitia action URL.

Hii attribute ina override method attribute ya kipengele cha <form>

Hii attribute inaweza kutumika kwenye input yenye type = “submit” na type = “image”.


Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" " method = “get”>

Jina la kwanza: <input type="text" name="f"><br>

Jina la mwisho: <input type="text" name="l"><br>

<input type="submit" value="Submit"><br>

<input type="submit" formmethod = “post” formaction=”formHandler2.php” value=”Wasilisha kwa kutumia post ">

</form>

</body>

</html>


Formtarget Attribute

Hii attribute inaeleza jina au neno kuwashilia kuwa wapi kwa kuonesha majibu yaliopatikana baada ya kuwasilisha form.

Hii attribute ina override target attribute ya kipengele cha <form>

Hii attribute inaweza kutumika kwenye input yenye type = “image” na type = “submit”

Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" " >

Jina la kwanza: <input type="text" name="f"><br>

Jina la mwisho: <input type="text" name="l"><br>

<input type="submit" value="Submit"><br>

<input type="submit" formtarget = “_blank” value=”Wasilisha katika window mpya">

</form>

</body>

</html>


Height na Width Attributes

Height na width zinaeleza urefu na upana wa kipengele cha <input>

Hizi attribute zinatumika kwenye input yenye type = “image” tu.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" " >

<input type = “image” width=”50” height = “50” src=”logo.png”>

</form>

</body>

</html>


List Attribute

Hii attribute inarejea kwenye kipengele cha <datalist> amacho kina machaguo yalio kwisha chaguliwa kwaajiri ya kipengele cha <input>

Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" " >

<input list = “browsers” >

<datalist>

<option value=”firefox”>

<option value=”chrome”>

<option value=”safari”>

</datalist>

</form>

</body>

</html>


Min na Max Attributes

Hizi attributes zinaeleza idadi ndogo na kubwa kwaajiri ya kipengele cha <input>

Hizi attributes zinafanyakazi kwenye aina za input zifuatazo:number,range,datetime,datetime-local,month,time na week.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" " >

<input type = “number” min = “10” max = “40”>

<input type = “date” min = “2010”>

<input type = “date” max = “1991”>

</form>

</body>

</html>


Multiple Attribute

Hii attribute ni boolen attribute.

Ikiwepo inaeleza kuwa mtumiaji anaruhusiwa kuweka thamani moja au zaid kwenye kipengele cha <input>

Hii attribute inafanya kazi kwenye aina za input zifuatazo:file na email.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" " >

Chagua picha <input type = “file” name = “picha” multiple>

</form>

</body>

</html>


Pattern Attribute

Hii attribute inatoa regular expression ambayo thamani ya vipengele vya <input> vinaangaliwa zidi(input element’s value is checked against)

Hii attribute inafanya kazi kwenye aina za input zifuatazo:text,search,url,tel,email na password.

Tumia title attribute ili kuielezea pattern kwaajiri ya kumsaidia mtumiaji


Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" " >

Code za nchi <input type = “text” name = “c” pattern=”[a-Za-z0-9]{3}” “herufi tatu za code ya nchi”>

</form>

</body>

</html>


Placeholder Attribute

Hii attribute inatoa hint ambayo inaelezea thamani ilio kusudiwa kwenye uwanja wa input.

Hint inaoneshwa kwenye uwanja wa input kabla mtumiaji aja ingiza thamani.

Hii attribute inafanya kazi kwenye aina za input zifuatazo: text,search,tel,url,email na password.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" ">

Barua pepe: <input type="email" name="e" placeholder = “Barua pepe”><br>

<input type="submit" value="Wasilisha">

</form>

</body>

</html>


Required Attribute

Hii attribute ni boolen attribute.

Ambayo inayo eleza kuwa uwanja wa input lazima uwe ume jazwa/andikwa kabla ya kuwasilisha form.

Hii attribute inafanya kazi katika aina za input zifuatazo:tel,text,email,password,file,date pickers,number,checkbox,radio,search na url.

Mfano

<!DOCTYPE html>

<html>

<body>

<form action=" ">

Barua pepe: <input type="email" name="e" placeholder = “Barua pepe” required><br>

<input type="submit" value="Wasilisha">

</form>

</body>

</html>


Step Attribute

Hii attribute inaeleza legal number intervals kwaajiri ya kipengele cha <input>.

Mfano kama step = “4”,legal number zitakuwa -4,0,4,8 nk.

Hii attribute inaweza kutumika pamoja na min na max attribute kutengeneza range ya legal values.

Hii attribute inafanya kazi katika aina za input zifuatazo: range,number,date,datetime,datetime-local,month,week na time.


Mfano

<!DOCTYPE html>

<html>

<body>

<form>

Points: <input type="number" step=”5”>

</form>

</body>

</html>


< File >

www.jamiiforums.ml/tutorFiles/tutor20.docx <

Mwisho wa HTML4


Itaendelea …….>

HTML5
 
karibuni marafiki katika sehem hii ya HTML5 tutaangalia hitoria fupi ya HTML na HTML5 na vipengele vilivyo ongezeka na vilivyo tolewa.

UTANGULIZI WA HTML5​

Nini kipya kwenye HTML5 ?

Uwekaji wa DOCTYPE ni rahisi sana.

<!DOCTYPE html>


Pia uwekaji wa character encoding(charset) nao ni rahisi sana.

<meta charset=”UTF-8”>

Mfano

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8”>

<title>Jina la nyaraka au website</title>

</head>

<body>

Yaliyomo yana andikwa hapa …

</body>

</html>


Kwakawaida character encoding ya HTML5 ni UTF-8.


Vipengele vipya vya HTML5

HTML5 imeleta vipengele vipya kama.

<header>,<footer>,<article> na <section>.

Attributes mpya kwaajiri ya form kama.

Number,date,time,calender na range.


Vipengele vipya vya Graphics kama :

<svg> na <canvas>.


Vipengele vipya vya multimedia kama:

<audio> na <video>


API’S(Application Programming Interfaces) mpya za HTML5

· Geolocation

· Drag and Drop

· Local storage

· Application cache

· Web workers

· SSE


Vipengele vilivyotolewa kwenye HTML5

Vipengele vifuatavyo vya HTML4 vimetolewa kwenye HTML5.

1. <acronym> tumia <abbr>

2. <applet> tumia <object>

3. <basefont> tumia CSS

4. <big> tumia CSS

5. <center> tumia CSS

6. <dir> tumia <ul>

7. <font> tumia CSS

8. <frame>

9. <frameset>

10. <noframes>

11. <Strike> tumia CSS

12. <tt> tumia CSS


Historia ya HTML

Tangu siku za mwanzo za web, kulikua na matoleo mengi ya HTML:

Hifuatayo ni orodha ya matoleo na mwaka.

1989 – Tim Berners-lee aliinvent WWW.

1991 – Tim Berners-lee kaiinvent HTML.

1993 – Dave Ragget aliiandaa HTML+.

1995 – HTML working group wameielezea HTML 2.0.

1997 – W3C waliipendekeza HTML 3.3.

1999 – W3C waliipendekeza HTML 4.01.

2000 – W3C waliipendekeza XHTML 1.0.

2008 – HTML5 WHATWG walitoa rasimu ya uma ya kwanza.

2012 – HTML WHATWG Living standard.

2014 – W3C walitoa pendekezo la mwisho.


Mwaka 1989 Tim Berners-Lee aliinvent “world Wide Web” na internet ndani ya miaka ya 1990.

Kutoka 1991 hadi 1998, HTML ilitengenezwa kuanzia toleo la kwanza(1) hadi toleo la nne(4).

Mwaka wa 2000 , World Wide Web Consortium(W3C) waliipendekeza XHTML 1.0.

Code za XHTML zilikua ni strict sana na watengenezaji wa websites walilazimishwa kuandika code halali na zilizokua kwenye mpangilio mzuri .

Inamaanisha kuwa kama vile vipengele kama <p> lazima iwena tag ya kufungia na ziliezisizokuwa na tag ya kufungia lazima ziwe zimeandikwa hivi <hr />,<br /> nk.

Kwamana hiyo kila tag lazima iwe na yakufungia na thamani zake lazima ziwe ndani ya “” quotation marks.

Mwaka 2004,WHATWG (Web Hypertext Application Technology Working Group) ili patikana kwamajibu ya kupunguza uendelezwaji wa (w3c), na uwamuzi wa (w3c) ni kusimamisha uendelezwaji wa HTML, na kuipa nafasi XHTMl.

WHATWG walitaka kuiendeleza HTML thabiti na jinsi ya web ilivokuwa inatumika , wakati wakiwa nyuma ya usambamba wa matoleo ya nyuma ya HTML.

Kipindi cha 2004-2006 mpango wa WHATWG uliungwa mkono na wachuuzi kuu wa browsers.

Mwaka wa 2006 W3C walitangaza kuwa wata waunga mkono WHATWG.

Na mwaka wa 2008 rasimu ya kwanza ya uma ya HTML5 ilitolewa.

Mwaka wa 2012 WHATWG na W3C walipanga kuachana, yani kila mmoja afanye kazi kivyake.

WHATWG wata iendeleza HTML kama “Living Standard”.

Living Standard haitokuwa kamili daima,ila itakuwa updated na kuboreshwa.Vitu vipya vinaweza kuwekwa lakini functions za zamani hazito weza kutolewa.


<file>

www.jamiiforums.ml/tutorFiles/21.docx


Itaendelea .....
 
HTML5 BROWSER SUPPORT

HTML5 ina supportiwa na kila browsers za kisasa.Pia browsers zote zakisasa na zazamani zote moja kwa moja zina zikabiri vipengele ambavyo havijurikani, kama inline elements.

Kwasababu ya hii,unaweza kuifundisha browser ya zamani kukabiriana na vipengele ambavyo haviitambui.

Jinsi ya kuifundisha Browser

1. Kuviweka vipengele vya HTML5 kama blocks elements

2. Kuongeza vipengele vipya kwenye HTML


Kuviweka vipengele vya HTML5 kama blocks elements

HTML5 inaelezea sementic nane mpya za vipengele vya HTML.Vyote hivi ni vipengele vya Block-level.

Kama:

Header,footer,section,aside,nav,main,article,figure{

Display:block;

}


Kuongeza vipengele vipya kwenye HTML

Unaweza kuongeza kipengele kipya kwenye html kwakutumia trick ya browser.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Uongezaji wa vipengele kwenye HTML</title>

<script>document.createElement("frank")</script>

<style>

frank{

display:block;

background-color:#099;

padding: 50px;

font-size: 30px;

}

</style>

</head>

<body>


<h1>HIKI NI KICHWA</h1>

<frank>huyu ni frank</frank>


</body>

</html>


Mfano hapo juu umeongeza kipengele kipya cha frank kwaajiri ya kuiridhisha internet explorer .

document.createElement("frank") hii ni javascript method ambayo inatumika kuunda kipengele kwa jina lililotolewa.


Tatizo na internet Explorer

Unaweza ukatumia masuluhisho yalio kuwepo hapo juu, kwa vipengele vipya vya HTML5 lakini internet explorer 8 na zamwanzo,haziruhusu kuweka mtindo kwa vipengele ambavo havijulikani.

Lakini kuna njia mbadala “the shiv”:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Hizo code hapo juu ni comment lakini matoleo yazamani hadi IE9 zitasoma na kuelewa hizo code.


Jinsi ya kuweka katika html

<!DOCTYPE html>

<html>

<head>

<title>Styling HTML5</title>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]-->

</head>

<body>

<h1>Makala yangu ya kwanza</h1>

<article>

Dar es Salaam, a major city and commercial port on Tanzania’s Indian Ocean coast, grew from a fishing village. The open-air Village Museum has re-created the traditional homes of local and other Tanzanian tribes and hosts tribal dancing. It’s part of the National Museum, which offers Tanzanian history exhibits, including the fossils of human ancestors found by anthropologist Louis Leakey.

</article>

</body>

</html>

Link ya shiv lazima iwekwe kwenye kipengele cha <head>,kwasababu internet explorer inaitaji kujua kuhusu vipengele vipya vyote kabla ya kuvisoma.


Mpangilio wa HTML 5

<!DOCTYPE html>

<html lang="en">

<head>

<title>HTML5</title>

<meta charset="utf-8">


<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

<![endif]-->


<style>

body {font-family: Verdana, sans-serif; font-size:0.8em;}

header, nav, section, article, footer

{border:1px solid grey; margin:5px; padding:8px;}

nav{

padding:0px;

border:none;

background:rgba(1,1,1,0.80);

}

nav > ul {margin:0; padding:0;}

nav > ul > li {display:inline-block; margin:0px;padding:10px}

nav > ul > li > a{

text-decoration:none;

color:#fff;

}


nav > ul > li:first-child{

background:#099;

}


nav > ul > li:hover{

background:#ffa500;

transition:0.6s linear 0s;

}


nav > ul > li:hover > a{

color:#fff;

}


header > h1{

color:#099;

}


section > h2{

color:cornflowerblue;

}


article > h2{

color:rgba(1,1,1,0.50);

}

</style>

</head>


<body>


<header>

<h1>MIKOA YA TANZANIA</h1>

</header>


<nav>

<ul>

<li><a href="#">Dar es salaam</a></li>

<li><a href="#">Morogoro</a></li>

<li><a href=#">Arusha</a></li>

<li><a href=#">Zanzibar</a></li>

</ul>

</nav>


<section>


<h2>MIKOA MAARUFU</h2>


<article>

<h2>Dar es salaam</h2>

<p>Dar es Salaam, a major city and commercial port on Tanzania’s Indian Ocean coast, grew from a fishing village. The open-air Village Museum has re-created the traditional homes of local and other Tanzanian tribes and hosts tribal dancing. It’s part of the National Museum, which offers Tanzanian history exhibits, including the fossils of human ancestors found by anthropologist Louis Leakey.</p>

</article>


<article>

<h2>Morogoro</h2>

<p>Morogoro is a city with a population of 315,866 in the eastern part of Tanzania, 169 kilometres west of Dar es Salaam, the country's largest city and commercial centre, and 223 kilometres east of Dodoma, the country's capital city</p>

</article>


<article>

<h2>Arusha</h2>

<p>Arusha is a city in East Africa's Tanzania, located at the base of volcanic Mt. Meru. It's a gateway to safari destinations and to Africa's highest peak, 5,895m Mt. Kilimanjaro, lying some 100 kilometers northeast. To the west lies Serengeti National Park, home to wildlife including lions, rhinoceros, giraffes and leopards</p>

</article>


<article>

<h2>Zanzibar</h2>

<p>Zanzibar is a Tanzanian archipelago off the coast of East Africa. On its main island, Unguja, familiarly called Zanzibar, is Stone Town, a historic trade center with Swahili and Islamic influences. Its winding lanes present minarets, carved doorways and 19th-century landmarks such as the House of Wonders, a former sultan’s palace.</p>

</article>


</section>


<footer>

<p>&copy; 2016 Tanzania. All rights reserved.</p>

</footer>


</body>

</html>


www.jamiiforums.ml/tutorFiles/examples/t22/1.html <


© = copyright -> html = &copy; au &#169;

® = registered trademark -> html = &reg; au &#174;

Copyright na registered trademark kwenye html zinaitwa htmlentities.

Note: nivizuri kutunia herufi ndogo kwenye attributes kama

<p id = “nyama”>

<p class = “nyama”>

Kuliko

<p CLASS = “”> au <p Class = “”>

Hizo zote zinakubalika ila ilikusomeka vizuri nivizuri ukatumia herufi ndogo.


<file>

www.jamiiforums.ml/tutorFiles/22.docx <


Itaendelea …..

HTML5 …

Multimedia

CSS3

<final project design>

Javascript

Graphics

HTML API’S


<final project design javascript edition>

<hosting>
 
Habari marafiki katika sehem hii tuta angalia vipengele na attributes zilizo ongezwa na baazi ya vipengele tutajifuza katika darasa husika.karibuni.



Vipengele vipya vya HTML5

HTML5 imeongeza vipengele vipya kwaajiri ya kuweka muundo mzuri wa nyaraka.

Ambavyo ni:

· <article> - kwaajiri ya Makala kwenye nyaraka

· <aside> - inaeleza yariomo pembeni kutoka kwenye kurasa ya yaliomo.

· <bdi> - inaeleza sehem ya maandishi ambayo yanaweza kuwekwa muongozo mwingine kutoka kwa maandishi mengine.

· <details> - inaeleza maelezo ya ziada ambayo mtumiaji anaweza kuyaona au kuyaficha.

· <dialog> - inaeleza kibox cha mdahalo au window.

· <figcaption> - inaeleza caption kwaajiri ya kipengele cha <figure>

· <figure> - inaeleza self contained content,kama illustrations,michoro,picha,orodha ya code,nk.

· <footer> - inaeleza mwisho wa nyaraka au sehem.

· <header> - inaeleza (header) kwaajiri ya nyaraka au sehem

· <main> - inaeleza lengo kuu la nyara

· <mark> - inaeleza alama au maandishi yaliyo wekwa alama.

· <menuitem> - inaeleza amri au orodha ambayo mtumiaji anaweza kuiona invoke kutoka kwenye popup menu.

· <meter> - inaeleza kipimo ndani ya range

· <nav> - inaeleza navigation links kwenye nyaraka

· <progress> - inaeleza muendeleo wa kazi.

· <rp> - inaeleza kitu cha kuoneshwa kwenye browsers ambazo azi support ruby annotations.

· <rt> - inaeleza maelezo/jinsi ya utamkwaji wa herufi(kwaajiri ya Asi mashariki typography)

· <ruby> - inaeleza ruby annotations kwaajiri ya Asia mashariki typography.

· <section> - inaeleza sehem(section) kwenye nyaraka.

· <summary> - inaeleza vichwa vinavyoonekana kwaajiri ya kipengele cha <details>

· <time> - inaeleza tarehe/wakati.

· <wbr> - inaeleza possible line-break

Vipengele vipya kwaajiri ya FORM

· <keygen> - inaeleza wanja key-pair generator kwaajiri ya form.

· <datalist> - inaeleza machaguo ambayo tayari yametolewa kwaajiri input.

· <output> - inatoa matokeo ya ukokotoaji.


Aina mpya za input

· Color

· Date

· Datetime

· Datetime-local

· Email

· Month

· Number

· Range

· Search

· Tel

· Time

· url

· week

· autocomplete

· autofocus

· form

· formaction

· formenctype

· formnovalidate

· formmethod

· formtarget

· width na height

· list

· min na max

· multiple

· pattern

· step

· required

· placeholder


Attributes mpya

HTML 5 inaruhusu syntaxes nne kwaajiri ya attributes(sifa).

Aina na mfano wake

· empty = <input type=”text” value=”frank” disabled>

· unquoted = <input type=”text” value=frank>

· double-quoted = <input type=”text” value=”frank”>

· single-quoted = <input type=”text” value=’frank’>


Vipengele vipya vya Media

· <audio> - inaleza sauti au muziki

· <embed> - inaeleza container kwaajiri ya applications za nje kama plug-ins

· <source> - inaleza vyanzo kwaajiri ya <video> na <audio>

· <track> - inaeleza track kwaajiri ya <audio> na <video>

· <video> - inaeleza video au movie content.


HTML5 GRAPHICS

<canvas> - naeleza graphic drawing kwakutumia javascript

<svg> - inaeleza graphics drawing kwakutumia SVG


Itaendelea …..
 
karibuni marafiki katika sehem hii tutajifunza kuhusu semantic elements na ufanyajikazi wake



HTML5 Semantic Elements

Semantics ni utafiti wa maana ya maneno kwenye lugha.

Vipengele vya semantic ni vipengele na maana.


Hivyo vipengele vya Semantics ni vipi ?.

Kipengele cha semantic uwazi kina eleza maana kwa wote katiki ya developer na browser.

Mfano wa vipengele ambavyo sio semantic:<div> na <span> hivi havi semi chochote kuusu yaliyomo.maana developer hawezi kujua maana halisi ya hivi.

Mfano wa vipengele ambavyo ni semantic:<form>, <table> na <img> hivi moja kwa moja mtu anajua vina maanisha nini.


Vipengele vipya vilivyo kuwa semantic kwenye HTML5

Website nyingi zimekuwa na code za HTML kama:<div id=”nav”>,<div id=”header”> <div id=”footer”> kuwashiria kuwa ni navigation,header na footer.

HTML5 inatoa vipengele vipya vilivyokuwa semantic ili kuelezea sehem tofauti tofauti za kurasa.

Kama:

· <aside>

· <article>

· <details>

· <figcaption>

· <figure>

· <footer>

· <header>

· <main>

· <mark>

· <nav>

· <section>

· <time>

· <summary>


Kipengele cha <section>

Kipengele cha <section> kinaeleza section ya nyaraka.

Kwa mujibu wa W3C’s HTML5 documentation:”section ni thematic(ufadhili) grouping of content,kwa kawaida na kichwa”.

Website inaweza kugawanya katika sections kwaajiri ya utangurizi,yaliyomo, na taarifa za mawasiriano.


Mfano

<!DOCTYPE html>

<html>

<body>


<section>

<h1> Tanzania </h1>

<p>Tanzania is an East African country known for its vast wilderness areas. They include the plains of Serengeti National Park, a safari mecca populated by the “big five” game (elephant, lion, leopard, buffalo, rhino), and Kilimanjaro National Park, home to Africa’s highest mountain. Offshore lie the tropical islands of Zanzibar and Mafia Marine Park, where whale sharks swim through reefs.</p>

</section>


<section>

<h1> Baba wa taifa</h1>

<p> Born in Tanganyika to Nyerere Burito (1860–1942), Chief of the Zanaki,[3] Nyerere was known by the Swahili honorific Mwalimu or 'teacher', his profession prior to politics.[4] He was also referred to as Baba wa Taifa (Father of the Nation).[5] Nyerere received his higher education at Makerere University in Kampala and the University of Edinburgh. After he returned to Tanganyika, he worked as a teacher. In 1954, he helped form the Tanganyika African National Union.</p>

</section>


</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/24/1.html <

Kipengele cha <article>

Kipengele cha <article> kinatoa uhuru,self-contained content.

Article(makala) inaeleta maana yenyewe, napia inawezekana kusomwa kiuhuru kati ya zingine kwenye website.

Article inaweza kutumia kwenye:

· Posts za forum

· Posts za blog

· Makala ya magazeti


Mfano

<!DOCTYPE html>

<html>

<body>


<article>

<h1>Baba wa taifa</h1>

<p> Born in Tanganyika to Nyerere Burito (1860–1942), Chief of the Zanaki,[3] Nyerere was known by the Swahili honorific Mwalimu or 'teacher', his profession prior to politics.[4] He was also referred to as Baba wa Taifa (Father of the Nation).[5] Nyerere received his higher education at Makerere University in Kampala and the University of Edinburgh. After he returned to Tanganyika, he worked as a teacher. In 1954, he helped form the Tanganyika African National Union.</p>

</article>


</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/24/2.html <

Kuweka vipengele ndani ya vipengele

Kwenye HTML5 article inajieleza kamili,self contained block ya vipengele vinavo husiana.

Kipengele cha <section> kinaelezwa kama ni block ya vipengele vinavo husiana.


Kipengele cha <header>

Kipengele cha <header> kina eleza header kwaajiri ya nyaraka.

Kipengele cha <header> kingetumika kama container kwaajiri ya utangurizi wa yaliyomo.

Unaweza kuwa na vipengele vingi vya header kwenye nyaraka moja.


Mfano

<!DOCTYPE html>

<html>

<body>

<article>

<header>

<h1>Baba wa taifa?</h1>

<p>Lengo lake:</p>

</header>

<p> Born in Tanganyika to Nyerere Burito (1860–1942), Chief of the Zanaki,[3] Nyerere was known by the Swahili honorific Mwalimu or 'teacher', his profession prior to politics.[4] He was also referred to as Baba wa Taifa (Father of the Nation).[5] Nyerere received his higher education at Makerere University in Kampala and the University of Edinburgh. After he returned to Tanganyika, he worked as a teacher. In 1954, he helped form the Tanganyika African National Union.</p>

</article>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/24/3.html <

Kipengele cha <footer>

Kipengele cha <footer> kinaeleza footer(mwisho) kwaajiri ya nyaraka au section

Kipengele cha <footer> tabidi kiwe na taarifa ambazo zina husu kipengele cha footer.

Unaweza kuwa na vipengele vya <footer> vingi kwenye nyaraka.

Mfano

<!DOCTYPE html>

<html>

<body>

<footer>

<p>Posted by: Frank galos</p>

<p>Contact information: <a href="mailto:frankgalos@ymail.com">

frankgalos@ymail.com</a>.</p>

</footer>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/24/4.html <

Kipengele cha <nav>

Kipengele cha <nav> kinaeleza seti ya viunganishi.

Kipengele cha <nav> ni kwaajiri ya blocks kubwa ya viunganishi,hata hivyo sio viunganishi vyote vilivyo kuwepo ndani ya nyaraka vikae ndani ya kipengele cha <nav>.

Mfano

<!DOCTYPE html>

<html>

<body>

<style>

body{

margin:0px;

padding:0px;

}


nav{

width:auto;

margin:10px 0 0 20px;

padding:0px;

border:1px solid #ffa500;

float:left;

border-radius:5px;

}


nav > a{

width:auto;

height:auto;

margin:0px;

padding:10px;

float:left;

border-right:1px solid #ffa500;

text-decoration:none;

color:rgba(1,1,1,0.50)

}


nav > a:first-child{

background:#ffa500;

}


nav > a:last-child{

border:none;

}



nav > a:first-child:hover{

background:rgba(1,1,1,0.10);

transition:0.7s linear 0s;

}

nav > a:hover{

background:#ffa500;

transition:0.7s linear 0s;

}


</style>

<nav>

<a href="#" title="Tanzania Business area">Dar es salaam</a>

<a href="#">Morogoro</a>

<a href="#">Arusha</a>

<a href="#">Dodoma</a>

</nav>


</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/24/5.html <

Kipengele cha <aside>

Kipengele cha <aside> kinaeleza yaliomo pembeni kutoka kwa yaliyomo inawekwa kama sidebar.

Mfano

<!DOCTYPE html>

<html>

<body>

<p>Dar es salaam.</p>

<aside>

<h4>Dar es salaam</h4>

<p>Dar es Salaam, a major city and commercial port on Tanzania’s Indian Ocean coast, grew from a fishing village. The open-air Village Museum has re-created the traditional homes of local and other Tanzanian tribes and hosts tribal dancing. It’s part of the National Museum, which offers Tanzanian history exhibits, including the fossils of human ancestors found by anthropologist Louis Leakey.</p>

</aside>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/24/6.html <

Kipengele cha <caption> na <figcaption>

Kwenye vitabu na magazeti , ni kawaida kuwa na caption na picha.

Lengo la caption ni kuongeza maelezo yanayo onekana kwenye picha.

Kwenye HTML5 picha na captions vinaweza kuwekwa kwenye kundi moja ndani ya kipengele cha <figure>

Mfano

<!DOCTYPE html>

<html>

<body>


<figure>

<img src="https://www.awesomestories.com/images/user/343e4b5272794dcb70e457233652511a.jpg" alt="Mount kilimanjaro" width="304" height="228">

<figcaption>Fig.1 - Mount Kilimanjaro with its three volcanic cones, "Kibo", "Mawenzi", and "Shira", is a dormant volcano in Tanzania.</figcaption>

</figure>


</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/24/7.html <


Kipengele cha <img> kinaeleza picha(image) na kipengele cha <figcaption> kinaeleza caption.


<file>

http://www.jamiiforums.ml/tutorFiles/examples/24/7.html <


Itaendelea ….
 
Habari marafiki, karibuni katika sehem nyingime ya HTML katika sehem hii tutajifunza kuhusu multimedia.

HTML MULTIMEDIA

Multimedia za kwenye web ni music,sound,movies, videos na animations.

Multimedia ni nini ?

Multimedia inakuja kwaa aina tofauti tofauti, inaweza kuwa chochote ambacho unaweza kusikia au kukiona.

Mfano : picha,miziki,video,sauti,rekodi,filamu,animations nk.

Kurasa za web nazo zina vipengele vya multimedia vya aina na formats mbalimbali.

Katika hili somo tutajifunza kuhusu formats mbalimbali za multimedia.


Browser Support

Mwanzoni browsers zilikua zina support maandishi peki yake,na zilikua limited kwa font moja yenye rangi moja.

Baadae zikaja browsers zikiwa zina support rangi na fonts,na hata picha nazo zilikua zina support.

Support kwaajiri ya sounds,animations na videos zina dhibitiwa tofauti kwenye browsers mbali mbali.aina tofauti tofauti na formats zina supportiwa,na baadhi ya formats zinaitaji program kwaajiri ya msaada Zaidi ili kuweza kufanya kazi.

Lakini kwenye HTML5 hii imekua kama historia kwani,formats zote zinafanya kazi.


Multimedia formats

Vipengele vya multimedia kama(sounds na video) vina hifadhiwa kwenye mafaili ya media.

Njia raisi ya kugundua aina ya faili, ni kuangalia extension ya faili. Wakati browser ikiona extension ya faili .htm au html, itaichukulia kama faili la html. .xml inaashiria faili la xml na .css inaashiria faili la style sheet.

Picha zina tambulika kwa extensions kama: .gif, .png, .jpg.

Mafaili ya multimedia nayo pia yana formats zao na extensions tofauti kama : .swf , .wav, .mp3, .mp4, .mpg, .wmv na .avi.


Formats za kawaida za video

MP4 ni format mpya kwaajiri ya video za mtandaoni.

MP4 ni inapendekezwa na YouTube.

MP4 ina supportiwa na flash player.

Mp4 ina suppotiwa na HTML5.


Yafuatayo ni maelezo na formats ya mafaili ya multimedia.


Formats – faili – maelezo

MPEG - .mpg/.mpeg – MPEG. Imetengenezwa na Moving pictures Expert Group.ni format ya kwanza maarufu kwenye web.ina supportiwa na kila browser ila haifanyi kazi kwenye HTML5.

AVI - .avi – AVI(Audio Video Interleave).imetengenezwa na Microsoft.kwa kawaida inatumika kwenye video cameras na vifaa vya TV.inafanya kazi vizuri kwenye kompyuta zenye window lakini haifanyi vizuri kwenye browsers.

WMV - .wmv – WMV(Window Media Video). Imetengenezwa na Microsoft.kwa kawaida inatumika kwenye video cameras na vifaa vya TV. inafanya kazi vizuri kwenye kompyuta zenye window lakini haifanyi vizuri kwenye browsers.

QuickTime - .mov – QuickTime.imetengenezwa na Apple. kawaida inatumika kwenye video cameras na vifaa vya TV. inafanya kazi vizuri kwenye kompyuta zenye window lakini haifanyi vizuri kwenye browsers.

RealVideo - .rm/ram – RealVideo. Imetengenezwa na Real Media kwa kuruhusu usafirishaji/na upokeaji wa video kwakutumia bandwiths ndogo.Bado inatumika kwaajiri ya Video za online na internet TV.Lakini haifanyi kazi vizuri kwenye browsers.

Flash - .swf/.flv – Flash. imetengenezwa na macromedia.maranyingi inaitaji vitu vya ziada(plug-ins) ili kufanya kazi.

Ogg - .ogg – Theora ogg. Imetengenezwa na xiph.Org foundation. Inafanya kazi kwenye HTML5.

WebM - .webm – WebM. Imetengenezwa na Web giants, Mozilla,Opera,Adobe na Google.inafanya kazi kwenye HTML5.

MPEG-4/MP4 - .mp4 – MP4.imetengenezwa na Moving Pictures Expert Group.ime base kwenye QuickTime.kawaida inatumika kwenye video cameras zakisasa na vifaa vya TV.inafanya kazi kwenye browsers zote na imependekezwa na YouTube.


Note:MP4,WebM na Ogg video ndo zina supportiwa standard mpya ya HTML5.


Sound Formats

MP3 ni format mpya kwaajiri ya ku compress miziki iliyo rekodiwa,neno mp3 limekuwa sawa na miziki ya kidigitali.

Kama website yako nikwaajiri ya miziki iriyo lekodiwa,basi mp3 ni chaguo sahii.


Formats – faili – maelezo

MIDI - .mid/.midi – MIDI(Musical Instrument Digital Interface) ni format kuu kwa vifaa vyote vya kielektroniki kama sythesizers na sound cards za PC.Mafaili ya MIDI hayana sauti. Lakini ya notes za kidigitali amabazo zinaweza kuchezwa na vifaa vya kielektroniki,yana cheza vizuri kwenye kompyuta na vifaa vya kimziki.

Lakini sio kwenye browsers.

RealAudio – .rm/.ram – RealAudio.imetengenezwa na RealAudio. Kwaajiri ya usafirishaji na upokeaji wa audio kwa kutumia bandwidths ndogo.haifanyi kazi kwenye browser.

WMA – .wma – WMA(Window Media Audio).Imetengenezwa na Microsoft,kawaida inatumika kwenye music players.inafanya kazi vizuri kwenye kompya yenye window lakni sio kwenye web browsers.

AAC - .aac –AAC(Advance Audio Coding).imetengenezwa na Apple kama default format kwaajiri ya iTunes.Inafanya kazi vizuri kwenye kompyuta za apple lakini sio kwenye web browsers.

WAV - .wav – WAV.imetengenezwa na IBM na Microsoft. Inafanyakazi vizuri kwenye Window,Macintosh na linux operating system. Inafanya kazi kwenye HTML5.

Ogg - .ogg – Ogg. Imetengenezwa na xiph.Org Foundation,inafanya kazi kwenye HTML5.

MP3 - .mp3 – Mafaili ya MP3 hakika ni sehemu ya sauti ya mafaili ya MPEG.MP3 ni format maarufu kwaajiri ya music players.inajumuhisha na compression(mafaili madogo) nzuri na ubola wa hali ya juu. Inafanya kazi kwenye browsers zote.

MP4 - .mp4 – MP4 ni format ya video lakini nayo inatumika kwaajiri ya audio.Mp4 video ni upcoming format ya video kwenye internet.Hii imepelekea usupportiji wa moja kwamoja kwaajiri ya MP4 audio na browsers zote.


Note:mp3,wav na Ogg audio ndo zina supportiwa na standard mpya ya HTML5.


<file>

http://www.jamiiforums.ml/tutorFiles/25.docx <


Itaendelea ……

<video> …

<audio> …

Plug-ins …

Youtube …


Css3
 
You must log in or register to reply here.

Similar Discussions

Our Community

Coming Soon

Regional Communities

Coming Soon
Back
Top Bottom
Menu
Forums
New posts
Log in
Register