Web development for beginners in swahili

Web development for beginners in swahili

Karibuni tena marafiki katika sehemu nyngine ya somo letu la HTML & CSS.Humu tutajifunza css kidogo na kuziangalia baazi ya html element ili tuweze kuzifahamu hatatukikutananazo mbele tusijiulize ni nini.


Sifa za mtindo(style attribute) wa html.

Kuseti mtindo wa kipengele cha HTML / kuset mtindo wa HTML unaweza kufanyika kwa kutumia Mtindo sifa (style attribute).


Mtindo wa sifa ya HTML (html style attribute) una fanywa hivi.

style="property:value;"

mtindo=”mali:thamani;”


Mali ni mali ya css na thamani ni thamani ya css.

Tutajifunza css Zaidi baadae kwenye kozi hii.

Rangi ya nyuma ya HTML (HTML background color).< some syntax has no direct meaning in our native language >


Background-color property inaeleza rangi ya nyuma kwaajiri ya element za HTML.

Mfano.

<!DOCTYPE html>

<html>

<body style="background-color:[HASHTAG]#ffa500[/HASHTAG];">

<h1>Hii ni heading</h1>

<p> Hii ni aya.</p>

</body>

</html>


Mfano hapo juu umebadilisha rangi ya nyuma ya kurasa yetu kuwa orange.



Rangi ya maandishi (HTML Text Color).

Color property inaeleza rangi ya maandishi kwaajiri ya element za HTML.


<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;">Hiki ni Kichwa</h1>

<p style="color:darkblue;">Hii ni aya.</p>

</body>

</html>


Mfano hapo juu umebadirisha rangi ya maandishi yaliokuwemo katika<h1> kuwa blue </h1> na kubadilisha maandishi yaliokuwemo katika <p> kuwa darkblue </p>


HTML Fonts. < some syntax has no direct meaning in our native language >

font-family property inaeleza mfumo/mtindo gani wa maandishi utumike kwaajiri ya element za HTML.

Mfano.

<!DOCTYPE html>

<html>

<body>

<h1 style="font-family:Tahoma;"> Hiki ni Kichwa </h1>

<p style="font-family: Times New Roman;"> Hii ni aya.</p>

</body>

</html>


Ukubwa wa Maandishi(Text size).

Font-size inatumikakueleza ukubwa wa maandishi kwaajiri ya HTML.

Mfano.

<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:400%;"> Hiki ni Kichwa </h1>

<p style="font-size:200%;"> Hii ni aya.</p>

</body>

</html>



Mpangilio wa maandishi ya HTML (HTML Text alignment)

Text-align inatumika kuelezea mpangilio wa maandishi usawa wa element za HTML.( horizontal text alignment).


Mfano.

<!DOCTYPE html>

<html>

<body>

<h1 style="text-align:center;">Haya maandishi yata kaa katikati mwa screen</h1>

<p>Hii ni aya.</p>

</body>

</html>


HTML Formatting Elements.

HTML ina elements maalum kwaajiri ya kueleza maandishi na maana maalum.
HTML inatumia maandishi kama <b> na <i> kwaajiri yak u formatting matokeo, kama bold au maandishi ya italic.

formatting elements ili designiwa kwaajiri ya kuonesha maandishi yenye aina maalum. Kama.

  • Bold text
  • Important text
  • Italic text
  • Emphasized text
  • Marked text
  • Small text
  • Deleted text
  • Inserted text
  • Subscripts
  • Superscripts



Bold and Strong Formatting

<b> element inaeleza maandishi kua ni bold, bila kuingiziwa kitu cha ziada.


Mfano.

<!DOCTYPE html>
<html>
<body>
<p>Haya ni maandishi ya kawaida.</p>
<p><b>haya ni bold.</b></p>
</body>
</html>


<strong> element inaeleza maandishi yenye nguvu(strong text).

Mfano

<!DOCTYPE html>
<html>
<body>
<p> Haya ni maandishi ya kawaida.</p>
<p><strong>Haya ni strong.</strong></p>
</body>
</html>



Italic and Emphasized Formatting.

<i> element inaeleza maandishi ya italic bila kuingiziwa kitu cha ziada.

Mfano.

<!DOCTYPE html>
<html>
<body>
<p> Haya ni maandishi ya kawaida.</p>
<p><i>Haya ni ya italic.</i></p>
</body>
</html>

<em> inaeleza maandishi kuwa emphasized.


Mfano.

<!DOCTYPE html>
<html>
<body>
<p> Haya ni maandishi ya kawaida.</p>
<p><em>Haya ni emphasized.</em></p>
</body>
</html>




Browser inaonesha <strong> kama <b> na <em> kama <i>.
Hata hivyo kuna utofauti wa maana kwa tags hizi.
<b> na <i> inaeleza maandishi kuwa ya bold na italic,
Lakini <strong> na <em> zina maanisha maandishi ni yamuhimu.


Small Formatting

<small> inaeleza maandishi kua madogo.

Mfano.

<!DOCTYPE html>
<html>
<body>
<h3>Maandishi <small>Madogo</small> ya HTML</h3>
</body>
</html>


Marked Formatting

<mark> element inaeleza maandishi yalio wekwa alama/Highlighted text.

Mfano.

<!DOCTYPE html>
<html>
<body>
<h2>Maandishi yaliowekwa <mark>alama</mark> </h2>
</body>
</html>


Deldeleted Formatting
<del> element inaeleza maandishi yalio fututwa au kutolewa.
Mfano.
<!DOCTYPE html>
<html>
<body>
<p> del element inaeleza maandishi yalio fututwa au kutolewa.</p>
<p>chakura nnacho kipenda ni <del>Ugari</del>Wali.</p>
</body>
</html>

Inserted Formatting
<ins> inaeleza maandishi yalio ongezwa au kuingizwa.
Mfano.
<!DOCTYPE html>
<html>
<body>
<p>ins inaeleza maandishi yalio ongezwa au kuingizwa..</p>
<p> chakura nnacho kipenda <ins>ni</ins> Wali.</p>
</body>
</html>

Subscript Formatting
<sub> inaeleza maandishi yaliokua subscripted.

Mfano.
<!DOCTYPE html>
<html>
<body>
<p>Haya ni maandishi yaliokua <sub>subscripted</sub> text.</p>
</body>
</html>

Superscript Formatting.
<sup> element inaeleza maandishi yaliokua superscripted

Mfano.
<!DOCTYPE html>
<html>
<body>
<p> Haya ni maandishi yaliokua <sup>superscripted</sup> </p>
</body>
</html>

> www.jamiiforums.ml/tutorFiles/examples/t4/14.html <



doc file
> www.jamiiforums.ml/tutorFiles/tutor4.docx <

HTML ni kama Kiswahili unapojifunza fasihi.

Tabidi ujue msingi wake ndo uweze kutunga Essay yenye kueleweka.

Yanayo fatia kabla ya kuingia deep css na html.
· Quotations

· Kodi za kompyuta.

· Rangi.

· CSS >>> deep html <<<

.itaendelea....
 
Karibuni marafiki katika darasa letu la html na css.Humu tutaendelea kuangalia vipengele vya html ilituweze kupata ujuzi mkubwa wa html.

Quotations(Nukuu) za HTML


<q>Kwaajiri ya quotation fupi.

<q> ni kipengele kinacho eleza quotation(nukuu) fupi.

Browsers kwa kawaida ina weka alama ya quotation karibu ya kipengele cha <q>.

Mfano.


<!DOCTYPE html>

<html>

<body>

<p> Browsers kwa kawaida ina weka alama ya quotation karibu ya kipengele cha q.</p>

<p>Ukiwa <q> mvumilivu na kutaka kujua hakika </q> utajua tu.</p>

</body>

</html>


<blockquote> Kwaajiri ya quotation ndefu.

<blockquote> Ni kipengele kinacho eleza quotation ndefu.

Browsers kwa kawaida zina acha / kuongeza nafasi (indent) kipengele cha <blockquote>.

Mfano.

<!DOCTYPE html>

<html>

<body>

<p> Browsers kwa kawaida zina acha / kuongeza nafasi (indent) kipengele cha blockquote.</p>

<blockquote>

Tukijifunza angalau tutakuwa nauwezo wa kuwaelekeza wajukuu zetu baadae.Na kuwaonesha kazi zilizo tufikisha tulipo fikia.

</blockquote>

</body>

</html>

<abbr> Kwaajiri ya vifupisho.
Kipengele cha <abbr> kinaeleza vifupisho(abbreviations) au kifupisho (acronym).
Kuweka vifupisho vinaweza kuto taarifa muhimu kwa browsers,mfumo wa kutafsiri(Translation system) na injini ya kutafutia (search engines).

Mfano.
<!DOCTYPE html>
<html>
<body>
<p>Nikijua <abbr title="HTML nitaweza kutengeneza">Website</abbr> zangu mwenyewe.</p>
</body>
</html>


<address> Kwaajiri ya taarifa za mawasiliano.

Kipengele cha <address> kinaeleza taarifa za mawasiliano (Mmiliki/mwandisi) wa nyaraka au Makala.
Kipengele cha <address> kwa kawaida kinaoneshwa kwa mfumo wa italic.Browser nyingi zinaongeza linebreak kabla na baada ya kipengele.

Mfano.

<!DOCTYPE html>
<html>
<body>
<address>
Imeandikwa na Frank Galos.<br>
Tembelea tuvuti yangu:<br>
frankgalos.co.tz<br>
S.L.P 345, Dar es salaam<br>
Tanzania
</address>
</body>
</html>


<cite> kwaajiri ya kazi.

Kipengele cha <cite> kinaeleza jina la kazi.
Browser malanyingi inaonesha cite kwa mfumo wa italic.

Mfano.

<!DOCTYPE html>
<html>
<body>
<p><cite>Ngoswe: penzi kitovu cha uzembe</cite> Edwin Semzaba
. Mwaka 1988.</p>
</body>
</html>

<bdo> kwaajiri ya Bi-Directional Override.

Kipengele cha <bdo> kinaeleza bi-directional override.
Kipengele cha <bdo> kinatumika kubadilisha muelekeo wa maandishi.

Mfano.

<!DOCTYPE html>
<html>
<body>
<p>Kama browser yako ina support <bdo> maandishi yalio kuwepo yata badirisha muelekeo kutoka kulia kwenda kushoto (rtl):</p>
<bdo dir="rtl">Haya maandishi yataandikwa kutoka kuria na kuelekea kushoto</bdo>
</body>
</html>


Itaendelea ….. >

> Vipengele vya kodi za kompyuta(computer code elements) .
 
Karibuni marafiki katika sehemu hii nyingene ya darasa letu la html na css.Humu tutajifunza elements za kompyuta japokua si zamuhimu sana lakini nivuzuri kuzifahamu kwasababu kila mtu baada ya hili darasa atakua na mtazamo wake na njia yake kwaiyo atachagua kitugani kimsaidie na kipi akiache.

Vipengele vya Kodi za Kompyuta.


Formatting ya kodi za kompyuta za html.

Hii haiitajiki unapo onesha mifano ya kodi za kompyuta.

<kbd>,<samp> na <code> hivi vipengele vyote vina support fixed letter size na spacing.


<kbd> kwaajiri ya keyboard input.

<kbd> kinaeleza keyboard input.

Mfano.

<!DOCTYPE html>

<html>

<body>

<p>kipengele cha kbd kina wakirisha keyboard input:</p>

<p><kbd>faili | Fungua...</kbd></p>

</body>

</html>



<samp> For Computer Output.

Kipengele cha <samp> kinaeleza matokeo ya sampuli kutoka kwenye program ya kompyuta.

Mfano.

<!DOCTYPE html>

<html>

<body>

<p> kipengele cha samp kina wakirisha matokeo ya sampuli kutoka kwa program ya kompyuta.</p>

<samp>

www.mysite.com login: March 2 16:10:17

Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

</samp>

</body>

</html>

<code> kwaajiri ya kodi za kompyuta.

Kipengele cha <code> kinaeleza kipande cha kodi ya program.

Mfano

<!DOCTYPE html>
<html>
<body>
<p>mfano wa kodi za programu:</p>
<code>
var x = 15;
var y = 2;
document.getElementById("mfano").innerHTML = x + y;
</code>
</body>
</html>

Mfano hapo juu hauto acha nafasi wala linebreak.

Kwa wale wanaojiuliza ni kodi za aina gani hizo, ni javascript.
Mfano wa linebreak.

<!DOCTYPE html>
<html>
<body>
<p>mfano wa kodi za programu:</p>
<pre>
<code>
var x = 15;
var y = 2;
document.getElementById("mfano").innerHTML = x + y;
</code>
</pre>
</body>
</html>

<var> kwaajiri ya variables.

Kipengele cha <var> kinaeleza variable.
Variable inaweza kuwa inayo eleza hesabu au variable kwaajiri ya mazingira ya programu.

Mfano.
<!DOCTYPE html>
<html>
<body>
<p>Einstein kaandika:
<var>E</var> = <var>m</var> <var>c</var> <sup>2</sup> .</p>
</body>
</html>

Comments(Maoni) ya HTML.

Tag ya comment <!-- na --> inatumika kuweka maoni kwenye HTML.

Tag ya comment
Una weza kuweka maoni kwenye nyaraka yako ya html kwa kufanya hivi.

<!-- Maoni yako hapa -->

Note: kuna exclamation point (!) katika tag ya kufungua na sio yakufunga.

Comments zinatumika kuweka kumbuku ya nyaraka yako.

Mfano ulikua una andika kodi za html na unataka kumkabizi mtumwingine hiyo kazi lazima kila ulipo ishia uweke koment ili atakapokuja ulie mkabizi ajue wapa ataanzia na atakapo ishia.

Pia koment zina kusaidia kuweka kumbukumbu ya kodi zako.

Comments hazi oneshwi na browser.Browser ikiona koment ina acha kusoma maneno yalio kuwemo na kuamia sehem nyingine ya kodi .

Mfano
<!DOCTYPE html>
<html>
<body>
<!—Hii ni comment -->
<p>Hii ni aya.</p>
<!—Comments hazioneshwi na browsers -->
</body>
</html>

Mfano hapo juu browser itaonesha Aya tu.


Comments zina msaada mkubwa mfano pale unapokua na error katika kodi zako unaweza kutafuta kosa hilo kwa kucomment mstari moja hadi mwingine wa nyaraka yako ya html na uka rigundua kosa hilo.

Mfano

<!DOCTYPE html>
<html>
<body>
<!-- Do not display this at the moment
<img border="0" src="picha" alt="logo">
-->
</body>
</html>

Mfano hapo juu browser haito onesha chochote.

Conditional Comments

Comment ya masharti inaeleza tag ya html ambayo itafanya kazi katika internet Explorer tu.
<!--[if IE 8]>
.... HTML ....
<![endif]-->


Itaendelea …..

>color

>css >>>>>
 
Karibuni marafiki katika sehemu nyingine ya html css,Humu tutajifunza rangi za html kwaajiri ya kupendezesha website zetu

Rangi Za HTML

Tv na kompyuta zinaonesha rangi kwa kuchanganya Red,Green,na Blue light.


Majina ya rangi

Red,Orange,Yellow,Cyan,Blue,Black nk,

Mfano

<!DOCTYPE html>

<html>

<body>

<h2 style="background-color:red">

Rangi ya nyuma imewekwa kwa kutumia red .

</h2>

<h2 style="background-color😱range">

Rangi ya nyuma imewekwa kwa kutumia orange.

</h2>

<h2 style="background-color:yellow">

Rangi ya nyuma imewekwa kwa kutumia yellow .

</h2>

<h2 style="background-color:blue;color:white">

Rangi ya nyuma imewekwa kwa kutumia blue na rangi ya maandishi ni nyeupe.

</h2>

<h2 style="background-color:cyan">

Rangi ya nyuma imewekwa kwa kutumia cyan .

</h2>

<h2 style="background-color:black,color:yellowgreen">

Rangi ya nyuma imewekwa kwa kutumia black na rangi ya maandishi ni yellowgreen.

</h2>

</body>

</html>



Mfano hapo juu umetumia mtindo wa ndani(inline style sheets) kuweka rangi.


CSS ina support majina ya rangi 140.


RGB(RED,GREEN,BLUE)

Kwenye HTML thamani ya rangi ya RGB inaweza kuwekwa kwa kutumia njia hii:rgb(red,green,blue).

Kila neno lililo parameter(red,green,na blue) ina eleza kiwango kati ya 0 na 255.

Mfano

Rgb(255,0,0) inaoneshwa kama red(nyekundu) kwasababu nyekundu inawekwa kuanzia thamani(value) kubwa ya (255) na zingine ni 0.


Mfano

<!DOCTYPE html>

<html>

<body>

<h2 style="background-color:rgb(255,0,0)">

Rangi ya nyuma imewekwa kwa kutumia rgb(255,0,0)

</h2>

<h2 style="background-color:rgb(0,255,0)">

Rangi ya nyuma imewekwa kwa kutumia rgb(0,255,0)

</h2>

<h2 style="background-color:rgb(0,0,255)">

Rangi ya nyuma imewekwa kwa kutumia rgb(0,0,255)

</h2>

<h2 style="background-color:rgb(255,255,0)">

Rangi ya nyuma imewekwa kwa kutumia rgb(255,255,0)

</h2>

<h2 style="background-color:rgb(255,0,255)">

Rangi ya nyuma imewekwa kwa kutumia rgb(255,0,255)

</h2>

<h2 style="background-color:rgb(0,255,255)">

Rangi ya nyuma imewekwa kwa kutumia rgb(0,255,255)

</h2>

<h2 style="background-color:rgb(0,0,0);color:white">

Rangi ya nyuma imewekwa kwa kutumia rgb(0,0,0)

</h2>

<h2 style="background-color:rgb(128,128,128);color:white">

Rangi ya nyuma imewekwa kwa kutumia rgb(128,128,128)

</h2>

<h2 style="background-color:rgb(255,255,255);">

Rangi ya nyuma imewekwa kwa kutumia rgb(255,255,255)

</h2>

</body>

</html>


Kuna rangi nyngine nimezielezea lakni nilivyo kua na post kuna error imejitokeza kwaiyo ningependa udownload hili faili katika link hii ili uweze kuzifaham zote.

kwa mifano unaweza kujaribu mifano yote katika link hii.
 
Karibuni marafiki katika sehemu nyingine ya html css, humu tutajifunza css kiundani Zaidi

Na matumizi yake.


Mtindo wa HTML na CSS

CSS inasimama kama cascanding Style Sheets.

Hii ndio lugha inayo fanya website ipendeze,bila hii website yako itakua kama nyumba isiyokua na mpangilio.

Mtindo unaweza kuwekwa kwenye vipengele vya HTML kwa njia Tatu(3).

1. Inline – kwakutumia style attribute kwenye vipengele vya HTML.

2. Internal – kwakutumia kipengele cha <style> kwenye sehemu ya <head> katika HTML.

3. External – kwakutumia faili moja au zaidi la css(external file).


Njia ya kawaida ya kuweka mitindo katika vipengele vya HTML ni kuweka mafaili ya CSS tofauti na vipengele vya HTML.Lakini katika hili somo tutajifunza css kwakutumia INTERNAL style kwasababu ni rahisi kufanya majaribio.

Pia ntaelekeza njia zote kama kuna mtu ata taka kutumia external.


Inline Styling (Inline CSS)

Inline styling inatumika kuweka mtindo wa kipekee katika kipengele kimoja cha HTML.

Inline style inatumia style attribute(mtindo sifa).

Mfano

<!DOCTYPE html>

<html>

<body>

<h1 style="color:green;">Haya ni maandishi ya kijani </h1>

</body>

</html>

Mfano hapo juu umebadilisha rangi ya maandishi kuwa kijani.


Internal Styling (Internal CSS)

Mtindo wa ndani unatumika kuelezea mtindo kwaajiri ya kurasa moja ya HTML.
Mtindo wa ndani(internal style) una wekwa katika sehemu ya <head> ya kurasa ya HTML,Ndani ya kipengele(element) cha <style>

Mfano
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:range;}
h1 {color:white;}
p {color:black;}
</style>
</head>
<body>
<h1>Hiki ni kichwa</h1>
<p>Hii ni aya.</p>
</body>
</html>

External Styling (External CSS)

Mtindo wa nje unatumika unatumika kuweka mtindo kwaajiri ya kurasa nyingi za HTML.
Kwakutumia huu mtindo unaweza kubadilisha muonekano wa website nzima kwakubadilisha faili moja tu.
Ili uweze kutumia mtindo huu, Ongeza link katika sehemu ya <head> ya kurasa ya HTML.
Mfano
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Hiki ni kichwa </h1>
<p> Hii ni aya.</p>
</body>
</html>

External style sheet inaweza kuandikwa kwakutumia editor yoyote ile,Ila faili husika alitakiwi kuwa na tag yoyote ya HTML.
Style sheet lazima liseviwena extension ya .css bila hivi faili halito tambulika kama ni la css.
Jinsi faili litakavyo onekana na kuseviwa.
Faili “style.css”
Ndani ya faili “
body {
background-color:range;
}

h1 {
color:white;
}

p {
color:black;
}

Njia nzuri ya kutengeza website ni kutoweka mafaili ya css na js pamoja na mafaili ya html .kilakitu lazima kikae sehemu yake.Sisemi kuwa lazima ufate sharia hii lakini nivizuri kuyapanga mafaili yako vizuri.
Mfano kama website yako ipo katika folder linalo itwa root/www
Ndani yake kutakua na index.html na mafaili mengine ya website yako ambayo ni ya HTML. Unacho takiwa kufanya mafaili ya CSS uya tengenezee folder yake.
Mfano css “folder” nadni ya folder hili kutakuwa na style.css
Kuli link hili faili niraisi sana unachotakiwa kuongeza katika linki yako ni css
<link rel="stylesheet" href="css/styles.css">
Hivyo utakuwa umeyapanga mafaili yako inavyo takiwa.pia hii njia inatumika hata kwa mafaili ya javascript ,php nakuendelea.
Pia kunanjia nyingine kimfano folder lako la css lipo nje ya mafaili ya HTML yani nje ya www unaweza kulinki kwakuongeza ../ kwa maana unarudi hatua moja nyuma. Na …/ hatua mbili
Mfano

<link rel="stylesheet" href="../css/styles.css">

Pia iyo njia inatumika na mafaili yoyote hatakama folder la css lipo ndani ya www na unataka utumie style katika folder linguine ndani ya website yako. Namaanisha.
Una folder CSS/ na una floder headers/ ndani ya headers/ kuna faili linalo itwa head una weza kua na access na faili la style kwa kufanya hivi.

<link rel="stylesheet" href="../css/styles.css">

CSS Fonts

CSS color property inaeleza rangi ya maandishi itakayo tumika katika vipengele vya HTML.
CSS font-family property inaeleza font ikayotumika katika vipengele vya HTML.
CSS font-size property inaeleza kubwa wa maandishi utakao tumika katika vipengele vya HTML.

Mfano
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1> Hiki ni kichwa </h1>
<p> Hii ni aya.</p>
</body>
</html>


CSS Box Model

Kila kipengele cha HTML kimezunguukwa na box, Hatakama ulioni.
CSS border property inaeleza box linalo onekana lililo zunguuka kipengele.

Mfano

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid grey;
}
</style>
</head>
<body>
<h1> Hiki ni kichwa </h1>
<p> Hii ni aya.</p>
<p> Hii ni aya.</p>
<p> Hii ni aya.</p>
</body>
</htm>


CSS margin property inaeleza margin(nafasi) nje ya box(border).

Mfano

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid grey;
padding: 10px;
margin: 30px;
}
</style>
</head>
<body>
<h1> Hiki ni kichwa </h1>
<p> Hii ni aya.</p>
<p> Hii ni aya.</p>
<p> Hii ni aya.</p>
</body>
</html>

CSS padding property inaeleza padding (nafasi) ndani ya box(border).

Mfano
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid grey;
}
</style>
</head>
<body>
<h1> Hiki ni kichwa </h1>
<p> Hii ni aya.</p>
<p> Hii ni aya.</p>
<p> Hii ni aya.</p>
</body>
</html>

Mifano ya juu hapo imetumia px kueleza ukubwa.

id Attribute

Mifano hapo juu imetumia css kuweka mtindo katika vipengele vya HTML kiujumla.
Ili kuweka mtindo maalum katika kipengele maalum,chakwanza ongeza id attribute kwenye kipengele. Kama
<p id="p1">Mimi ni tofauti</p>


Alafu weka mtindo kwenye kipengele hicho kwakutumia id maalum.

Ili kutumia id kwenye css faili una weka # ikifatiwa na jina la id kama id=”first”

Jina ni “first”


Mfano


<!DOCTYPE html>

<html>

<head>

<style>


#p1 {

color: blue;

}

</style>

</head>

<body>


<p> Hii ni aya.</p>
<p> Hii ni aya.</p>
<p id="p1">Mimi ni tofauti</p>


</body>

</html>


class Attribute

Kuweka mtindo katika aina maalum(special class) ya kipengele ongeza class attribute kwenye kipengele. kama
<p class="p1">Mimi ni tofauti</p>
Kuweka mtindo katika kipengele chochote cha HTML kwakutumia class, unatumia . ikifatiwa na jina la class mfano .first kwakufanya hivi utaweza mtindo wowote kwenye vipengele vyako kwakutumia class maalum.
Mfano
<!DOCTYPE html>
<html>
<head>
<style>
p.p1 {
color: cornflowerblue;
}
</style>
</head>
<body>
<p> Hii ni aya.</p>
<p class="p1">Mimi ni tofauti</p>

<p> Hii ni aya.</p>
<p class="p1">Mimi ni tofauti</p>

</body>
</html>

Unaweza kutumia class kwa vipengele vingi au kimoja na id kwa kipengele kimoja.
CSS ina vitu vingi sana kama unataka kuimaster tembelea katika google na tafuta css utapata muuongozo wa kila kitu. katika project yetu tutaangalia most ya ivyo vitu.

kama position,display,align,float,inline-block,media queries,animation,shadow nk.

Itaendelea …..
 
karibuni marafiki katika sehemu hii nyingine ya html css, Humu tutajifunza kuhusu viunganishi(links) na jinsi ya matumizi yake.


HTML links

Links(viunganishi) zina patikana karini kira kurasa yakimtandao,Links zina wawezesha watumiaji kubonyeza njia yao kutoka kurasa hadi kurasa.

Links(viunganishi) vya HTML ni Hyperlinks

Hyperlinks ni maandishi au picha ambayo unaweza kubonyeza ikakupeleka kwenye nyaraka nyingine.

Katika HTML links zinaelezwa na <a>tag.

<a href=”url”> maandishi ya kiunganishi </a>

Mfano

<!DOCTYPE html>

<html>

<body>

<p>

<a href=”#”> Tembelea masomo yetu ya HTML </a>

</p>

</body>

</html>




href inaeleza mwisho wa anuani (www.mysite.ml/tutorFiles).

Link text nisehemu inayo onekana (Tembelea masomo yetu ya HTML).

Ukibonyeza kwenye maandishi utapelekwa kwenye anuani iliowekwa.


Link text sio lazima yawe maandishi unaweza kuweka chochote,ambacho kinaweza kuwa picha au kipengele chochote cha HTML.


Local Links

Mfano juu hapo umetumia URL harisi(full web address).

Local link ni link zinazo unganisha anuani moja yani ni anuani moja ile ile ila hii aiwekwi maalezo yote lakini ukiibonyeza inakupeleka sehemu moja,na ile full address.

Mfano

<!DOCTYPE html>

<html>

<body>

<p><a href="jamiiforums.ml/tutorFiles">tutorial files folder</a> ni link kwenye kurasa ya website hii.</p>

<p><a href="Hébergement Internet, Cloud, et Serveurs dédiés - OVH. jamiiforums.ml/">WBD</a> ni link inayo elekea kwenye web development for beginners in swahili .</p>

</body>

</html>



Rangi za viunganishi vya HTML (HTML links colors)

Ukipeleka mouse yako kwenye link kwa kawaida kuna vitu viwili vina fanyika:

· Mshare wa mouse unabadilika na kuwa mkono.

· Rangi ya kipengele cha kiunganishi(link) itabadilika.


Kwa kawida kiunganishi kitaonekana kama ivi kwenye browser zote.

· Link inakua haija tembelewa (unvisited) na kuwa na mstari chini ya maandishi na rangi ni ya blue.

· Link inakuwa imetembelewa na kuwa na mstari chini ya maandishi na rangi ni ya purple

· Link inakuwa active na mstari chini na rangi ni nyekundu.

Unaweza kubadilisha rangi ya viunganishi kwa kutumia mitindo(styles):

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

color: green;

background-color: transparent;

text-decoration: none;

}

a:visited {

color: pink;

background-color: transparent;

text-decoration: none;

}

a:hover {

color: red;

background-color: transparent;

text-decoration: underline;

}

a:active {

color: yellow;

background-color: transparent;

text-decoration: underline;

}

</style>

</head>

<body>

<p>Unaweza kubadilisha rangi za viunganishi</p>

<a href="jamiiforums.ml" target="_blank">WDS</a>

</body>

</html>


Unaweza kutoa mstari wa link kwakuweka “text-decoration:none” na kuuweka katika element yoyote kwakutumia “text-decoration:underline”


Links za HTML – target attribute ]

Target attribute inaeleza wapi kwakufungu nyaraka ilio unganishwa.

Mfano huu utafungua nyaraka ilio unganishwa katika window mpya ya browser au tab mpya.

Mfano

<!DOCTYPE html>

<html>

<body>

<a href=" Hébergement Internet, Cloud, et Serveurs dédiés - OVH. jamiiforums.ml/final_project_htmlcss+js/" target="_blank">Tembelea project tutakayo ifanya tuki maliza></a>

<p>kama ukiweka target kuwa “_blank” browser itafungua window mpya au tab.</p>

</body>

</html>


Maelezo ya Target Attribute

_blank inafungua nyaraka iliounganishwa katika window mpya ya browser au tab

_self inafungua nyaraka iliounganishwa katika frame moja ambapo ilipo bonyezwa.

_parent inafungua nyaraka iliounganishwa katika parent frame.

_top inafungua nyaraka iliounganishwa kwenye sehem nzima ya browser au full body of the window.

Framename inafungua nyaraka iliounganishwa katika frame ya jina iliopewa.


Kuifanya picha iwe link

Nikwaida kutumia picha kama kama link.

Mfano


<!DOCTYPE html>

<html>

<body>

<p>Hii picha ni link unaweza kubonyeza.</p>

<a href="#">

<img src=" http://www.mysites.ml/final_project_htmlcss+js/images/socials/fb.png" alt="facebook" style="width:42px;height:42px;border:0">

</a>

<p>Nimeweka "border:0" ku Kuzuiya IE9 (and earlier) kuonesha border katika picha.</p>

</body>

</html>


Link za HTML kutengeneza bookmark

Bookmark inatumika kuwa ruhusu wasomaji kwenda katika sehemu husika ya kurasa ya mtandao.

Bookmark ni partical kama website yako ina kurasa nyingi.

Kuweka Bookmark kwanza tabidi utengeneze bookmark kisha uiwekee link.

Pindi link itakapobonyezwa kurasa ita scroll sehemu husika ya bookmark.


Mfano.

Tengeneza bookmark kwakutumia id attribute.

<h2 id=”maujanja”> maujanja muhimu </h2>


Kisha iwekee link kwenye bookmark(“maujanja muhimu”) kwenye kurasa moja.


<a href=”#maujanja”> Tembelea maujanja muhimu </a>


Au weka link kwenye bookmark(“maujanja muhimu”) kutoka kwenyekurasa nyingine.


Mfano


<a href=”maujanja.html#maujanja”>Tembelea maujanja muhimu </a>


<!DOCTYPE html>

<html>

<body>


<p><a href="[HASHTAG]#C10[/HASHTAG]">Ruka kwenya Chapter 5</a></p>


<h2>Chapter 1</h2>

<p>Lorem Ipsum</p>


<h2>Chapter 2</h2>

<p> is simply dummy text of the printing and typesetting industry.</p>

<h2>Chapter 3</h2>

<p> is simply dummy text of the printing and typesetting industry </p>


<h2> Chapter 4</h2>

<p> is simply dummy text of the printing and typesetting industry </p>


<h2 ">Chapter 5</h2>

<p> is simply dummy text of the printing and typesetting industry </p>


<h2>Chapter 6</h2>

<p> is simply dummy text of the printing and typesetting industry </p>


<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>


<h2>Chapter 8</h2>

<p> is simply dummy text of the printing and typesetting industry </p>


<h2>Chapter 9</h2>

<p> is simply dummy text of the printing and typesetting industry </p>


<h2 id="C10>Chapter 10</h2>

<p> is simply dummy text of the printing and typesetting industry </p>


</body>

</html>


Itaendelea …….
 
karibuni tena marafiki katika sehemu nyingine ya HTML na CSS,Humu tutajifunza kiundani picha za html na matumizi yake ikiwemo kuziwekea mitindo ya kila aina.

Picha za HTML

Katika HTML picha zinaelezwa na <img>tag.

<img>tag ni tupu. Ina attributes pekiyake na haina tag ya kufungia.

src attribute inaeleza anuani ya picha (url|web address).


<img src=”url’ alt=”maandishi”>

Alt Attribute

alt attribute inatoa maandishi ya ziada kwaajiri ya picha kama picha haiwezi kuonekana/kuoneshwa.

Kama browser haiwezi kuipata picha ,itaonesha maandishi ya ziada.


Mfano

<!DOCTYPE html>

<html>

<body>


<p>kama browser haiwezi kuipata picha inaonesha maandishi ya ziada:</p>


<img src=”../images/wd_03.png” alt=”logo” style=” width:48px; height:48px;”>

</body>

</html>



Alt attribute inaitajika bila hii browser haito halalisha sawa.

Note usisahau kuweka semi-colon kwa kila mwisho wa values;

Width na height zinaitajika bila hizi picha inawezakuwa isionekane au kuonekana lakini ikachukua ukubwa wote wa kurasa kama itakua kubwa na kama ndogo itachukua ukubwa wake.


Screen readers

Screen reader ni programu ambayo inaweza kusoma kitu kilicho oneshwa kwenye screen.

Screen reader niya muhimu kwa watu ambao hawana uwezo wakuona,vipofu na watu wasiokuwa na uwezo wakusoma.

Screen reader inaweza kusoma alt attribute.


Ukubwa wa picha – upana na urefu

Unaweza kutumia style attribute kuweka width na height ya picha.

Thamani(values) zina wekwa kwanjia ya px (tumia px baada ya thamani )


Mfano

<!DOCTYPE html>

<html>

<body>

<img src=”www.mysite.ml/images/wd_03.png” alt=”logo” style=” width:120px; height:48px;”>

</body>

</html>


Alternative unaweza kutumia width na height attribute,values zinakua specified kwanjia ya px by default.


Mfano

<!DOCTYPE html>

<html>

<body>

<img src=" www.mysite.ml/images/wd_03.png" alt="logo" width="120" height="48">

</body>

</html>

Unaweza kuistyle picha kwakutumia njia zote za css

Mfano

<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>

<img src=” www.mysite.ml/images/wd_03.png” alt=”logo” style=” width:120px; height:48px;”>

<img src=" www.mysite.ml/images/wd_03.png" alt="logo" width="120" height="48">

</body>
</html>



Picha katika folder linguine

Ni kawaida kifadhi picha zako katika folder tofauti na mafaili ya code.

Browser kama haiwezi kuipata picha,browser inategemea kuipata picha katika folder moja na code za html au code za css nk.

Mfano

Jinsi ya kuilocate picha iliokuwepo ndani ya folder lingine kama tutorial/ ni folder kuu,basi kutakuwa na folder linaloitwa images/ kwaajiri ya picha


<!DOCTYPE html>

<html>

<body>

<img src=" www.mysite.ml/images/wd_03.png" alt="logo" style="width:128px;height:128px;">

</body>

</html>


Kama picha itakuwa kwenye folder kuu

<img src="wd_03.png" alt="logo" style="width:128px;height:128px;">

Kama picha itakuwa nje ya folder kuu.

<img src="../images/wd_03.png" alt="logo" width="120" height="48">


Picha ilio kuwepo kwenye server nyingine

Kuna baazi ya website zina ifadhi picha zao katika server za picha.

Unaweza

Unaweza kupata picha katika anuani yoyote duniani.

Mfano

<!DOCTYPE html>

<html>

<body>

<img src="http://www.mysite.ml/images/wd_03.png " alt="wdb" style="width:104px;height:48px;">

</body>

</html>


Image floating

Float ni property ya css ambayo kazi yake si ku float picha tu hata element zingine ina float.

Picha au element yoyote ya html inaweza ku float kushoto na kuria tu.

Mfano

<!DOCTYPE html>

<html>

<body>


<p><strong>picha ime float kuria:</strong></p>

<p>

<img src="http://www.mysite.ml/images/wd_03.png " alt="wdb" style="float:right;width:42px;height:42px;">

Aya na picha iliokua floated

</p>


<p><strong>picha ime float kushoto:</strong></p>

<p>

<img src="http://www.mysite.ml/images/wd_03.png " alt="wdb" style="float:left;width:42px;height:42px;">

Aya na picha iliokuwa floated

</p>


</body>

</html>



Itaendelea …..
 
Sehemu hii tutajifunza kuusu table za html na matumizi yake



Table za HTML

Table inawekwa kwakutumia <table>tag.

Table zinagawanywa katika table rows(safu) na <tr>tag.

Table rows zinagawanya katika table data(taarifa) na <td>tag.

Table rows pia zinaweza kugawanywa katika table headings(vichwa) na <th>tag.

Mfano.

<!DOCTYPE html>

<html>

<body>


<table style="width:100%">

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>

</body>

</html>



Note: table data <td> ni data containers ya table.

Hizo data zinaweza kuwa zozote zile za html ambazo kama picha,maandishi,table zingine nk.


Table za html na border attribute

Kama uja weka border kwaajiri ya table,table itaonekana bila border.

Border inaweza kuwekwa kwakutumia border attribute.

Mfano

<!DOCTYPE html>

<html>

<body>


<table border="1" style="width:100%">

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>


</table>


</body>

</html>



Note:nivizuri kuweka border kwakutumia css kwasababu border attribute haipo standard bado.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

}

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<table>

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>

</body>

</html>

Note: kumbuka kuweka border kwenye table na table cells.


Table na collapse border

Kama unataka table zako zi collapse nakuwa border moja , katika css weka collapse-border

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse:collapse;

}

</style>

</head>

<body>

<table>

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>

</body>

</html>


Table na cell padding

Cell padding inaweka na fasi kati ya yaliyomo kwenye cell na border zake.

Kama ujaweka padding cell table zinaoneshwa bill padding(nafasi);

Kuweka padding katika cell, tumia css padding property.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse:collapse;

}

th, td{

padding:14px;

}

</style>

</head>

<body>

<table>

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>

</body>

</html>



Vichwa vya table(Table headings)

Vichwa vya table vina wekwa na <th>tag

Kwa kawaida browsers zote zina onesha vichwa vya table kama bold na vinawekwa kati kati.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

}

</style>

</head>

<body>


<table >

<tr>

<th>jina la kwanza</th>

<th>jina la pili</th>

<th>alama</th>

</tr>

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>


</body>

</html>



Kuweza kufanya vichwa vya table vielekee kushoto tumia CSS text-align:left.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

}

th{

text-align:left;

}

</style>

</head>

<body>


<table >

<tr>

<th>jina la kwanza</th>

<th>jina la pili</th>

<th>alama</th>

</tr>

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>


</body>

</html>


Table za HTML na border-spacing

Border-spacing inaweka nafasi kati ya border cells.

Kuweka border spacing katika cells tumia CSS border-spacing property.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

border-spacing:5px;

}

table, th, td {

border: 1px solid black;

}

th, td{

padding:14px;

}

</style>

</head>

<body>

<table>

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>

</body>

</html>



Note:Kama table ina ina collapse borders, border-spacing haito fanyakazi.


Table cells ambayo ina span columns nyingi

Kufanya cell I span column Zaidi ya moja tumia colspan attribute.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>


<h2>Cell ambayo ime spans column mbili:</h2>

<table >

<tr>

<th>Jina</th>

<th colspan="2">Number ya sim</th>

</tr>

<tr>

<td>Frank Galos</td>

<td>+255 788-574-446</td>

<td>+255 719-804-666</td>

</tr>

</table>


</body>

</html>


Table ambayo ina span rows nyingi

Kuifanya cell I span rows nyingi tumia rowspan attribute.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

Table{

Width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>


<h2>Cell ambayo ina spans rows mbili:</h2>

<table>

<tr>

<th>Jina:</th>

<td>Frank Galos</td>

</tr>

<tr>

<th rowspan="2">Number ya sim:</th>

<td>+255 719-804-666</td>

</tr>

<tr>

<td>+255 788-574-446</td>

</tr>

</table>


</body>

</html>



Table na caption

Kuweka caption kwenye table tumia <caption>tag

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>


<table >

<caption>Akiba ya Mwezi</caption>

<tr>

<th>Miezi</th>

<th>Akiba</th>

</tr>

<tr>

<td>mwezi wa kwanza</td>

<td>1000Tsh</td>

</tr>

<tr>

<td>mwezi wapili</td>

<td>5000Tsh</td>

</tr>

</table>


</body>

</html>



Note:<caption>tag lazima iwekwe baada ya <table>tag


Kuweka mtindo maalum kwaajiri ya table moja.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

border-collapse:collapse;

}

table, th, td {

border: 1px solid black;

}

th, td{

padding:14px;

}


table#t1{

background:#ffa;

color:#098;

margin-top:5px;

}

</style>

</head>

<body>

<table>

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>


<table id="t1">

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>


</body>

</html>

Mtindo maalum umewakwa katika table yenye id=”t1”

table#t1{

background:#ffa;

color:#098;

margin-top:5px;

}


Weka Mtindo Zaidi


<!DOCTYPE html>

<html>

<head>

<style>

table{

width:100%;

border-collapse:collapse;

}

table, th, td {

border: 1px solid cornflowerblue;

text-align:left;

}

th, td{

padding:14px;

}


table#t1{

background:#ffa;

color:#098;

margin-top:10px;

}

table#t1 tr:nth-child(even) {

background-color: #eee;

}

table#t1 tr:nth-child(odd) {

background-color:#fff;

}

table#t1 th {

background-color: black;

color: white;

}

</style>

</head>

<body>

<table>

<tr>

<th>jina la kwanza</th>

<th>jina la pili</th>

<th>alama</th>

</tr>

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>


<table id="t1">

<tr>

<th>jina la kwanza</th>

<th>jina la pili</th>

<th>alama</th>

</tr>

<tr>

<td>frank</td>

<td>route</td>

<td>50</td>

</tr>

<tr>

<td>galos</td>

<td>Jack</td>

<td>94</td>

</tr>

<tr>

<td>kijira</td>

<td>kijanga</td>

<td>80</td>

</tr>

</table>


</body>

</html>


Itaendelea ….
 
karibuni marafiki katika sehemu hii tutajifunza ordha kiundani zaid ili kwa wale wanaotaka kubadilisha muonekano wa website zao na wabadilishe kwani orodha zinatumika kila sehemu ya website.

ORODHA ZA HTML(HTML LISTS)

Unorderd list(orodha isiokua na mpangilio)

Niorodha ambayo yaliyomo katika hiyo orodha yanakuwa na kiduara cheusi nyuma yake.

Orodha isiyokua na mpangilio huwa inaanza na <ul>tag.Na kila yaliyomo kwenye orodha yanaanza na <li>tag.

Mfano

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List </h2>

<ul>

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ul>

</body>

</html>



Unordered HTML List na sifa mtindo (style attribute)

Sifa mtindo inaweza kuwekwa katika orodha isiyo na mpangilio ili kubadilisha mtindo wa alama iliokuwepo.

Maelzo ya mitindo ya unordered list

list-style-type:disc

Ukiweka hii na orodha itawekwa alama ya kawaida ambayo imeundwa nayo.

list-style-type:circle

Ukiweka mtindo huu orodha itawekwa alama ya duara.

list-style-type:square

Ukiweka mtindo huu orodha itawekwa alama ya mraba.

list-style-type:none

Ukiweka mtindo huu orodha haitokuwa na alama.



Mfano wa Disc

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc">

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ul>

</body>

</html>



Mfano wa Circle

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List na circle Bullets</h2>

<ul style="list-style-type:circle">

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ul>

</body>

</html>


Mfano wa square

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with square Bullets</h2>

<ul style="list-style-type:square">

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ul>

</body>

</html>


Mfano wa none

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with square Bullets</h2>

<ul style="list-style-type:none">

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ul>

</body>

</html>


Ordered list(orodha iliokuwa na mpangilio)

Ni orodha ambazo yaliyomo yanaorozeshwa kwa namba.

Orodha iliokuwa na mpangilio huwa inaanza na <ol>tag.Na kila yaliyomo kwenye orodha yanaanza na <li>tag

Mfano

<!DOCTYPE html>

<html>

<body>

<h2>Orodha yenye mpangilio</h2>

<ol>

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ol>


</body>

</html>


Ordered List na Type attribute

Type

type =”1” Hii orodha yaliyomo yatakuwa na namba.

type = “A” Hii orodha yaliyomo yatakuwa na mpangilio wa herufi kubwa.

type = “a” Hii orodha yaliyomo yatakuwa na mpangilio wa herufi ndogo.

type = “I” Hii orodha yaliyomo yatakuwa na mpanglio wa herufi kubwa za namba za kirumi.

type = “i” Hii orodha yaliomo yatakuwa na mpangilio wa herufi ndogo za namba za kirumi.


Mfano wa namba

<!DOCTYPE html>

<html>

<body>


<h2>Orodha yenye mpangilio na namba</h2>


<ol type="1">

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ol>


</body>

</html>


Mfano wa Herufi Kuwa

<!DOCTYPE html>

<html>

<body>


<h2>Orodha yenye mpangilio na herufi </h2>


<ol type="A">

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ol>


</body>

</html>

Mfano wa Herufi Ndogo

<!DOCTYPE html>

<html>

<body>


<h2>Orodha yenye mpangilio na herufi</h2>


<ol type="a">

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ol>


</body>

</html>

Mfano wa Namba za kirumi

<!DOCTYPE html>

<html>

<body>


<h2>Orodha yenye mpangilio na namba za kirumi</h2>


<ol type="I">

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ol>


</body>

</html>



Mfano wa Namba za kirumi

<!DOCTYPE html>

<html>

<body>


<h2>Orodha yenye mpangilio na namba za kirumi</h2>


<ol type="i">

<li>Maarage</li>

<li>Maindi</li>

<li>Mchele</li>

</ol>


</body>

</html>



Maelezo katika Orodha(description list)

Maelezo katika orodha ni orodha ya yaliyomo,na maelezo katika kila orodha.

HTML pia ina support maelezo katika orodha.

Unaweza kuweka maelezo katika orodha kwa kutumia <dl> tag, na tag ya <dt> inaeleza majina ya yaliomo,tag ya <dd> inaeleza kila kilichomo.

Mfano

<!DOCTYPE html>

<html>

<body>


<h2>Maelezo katika orodha</h2>


<dl>

<dt>Maarage</dt>

<dd>- Ukipika ni Mboga nzuri sana</dd>

<dt>Maindi</dt>

<dd>- Ukipika ni mazuri sana</dd>

</dl>


</body>

</html>



Orodha iliokua ndani ya orodha(nested lists)

Orodha inawezakuwa ndani ya orodha nyingine.

Mfano

<!DOCTYPE html>

<html>

<body>


<h2>Nested List</h2>


<ul>

<li>Maarage</li>

<li>Maindi

<ul>

<li>miogo</li>

<li>korosho</li>

</ul>

</li>

<li>Mchele</li>

</ul>


</body>

</html>



Note: Orodha inaweza kuwa na kitu chochote kile kama picha,link nk.


Orodha usawa

Ushawai kufikiri kuwa navigation menu zina tengenezwaje.Basi katika html na css inawezekana kuwa naorodha ya kila aina mfano iliokuwa usawa(horizontal) au wima(vertical).

Mfano wa orodha usawa.

<!DOCTYPE html>

<html>

<head>

<style>

ul{

padding:5px;

background:#098;

}

ul#orodha li {

display:inline;

color:#fff;

}


ul:hover{

background:cornflowerblue;

}

</style>

</head>

<body>


<h2>Orodha usawa</h2>

<ul id="orodha">

<li>Maindi</li>

<li>Maarage</li>

<li>Mchele</li>

<li>Sukari</li>

</ul>


</body>

</html>




Mfano mwingine wa orodha na css


<!DOCTYPE html>

<html>

<head>

<style>

ul#orodha {

padding: 0;

}


ul#orodha li {

display: inline;

}


ul#orodha li a {

background-color: cornflowerblue;

color: white;

padding: 10px 20px;

text-decoration: none;

border-radius: 4px 4px 0 0;

}


ul#orodha li a:hover {

background-color: orange;

}

</style>

</head>

<body>


<h2>Orodha usawa</h2>


<ul id="orodha">

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

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

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

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

</ul>


</body>

</html>

Note: mimi sio muuza duka maana kuna mtu atajiuliza tuu, jamaa muuza duka nini kila mfano mchele maindi.Sikupata kitu kingine cha kukitolea mfano,kwaiyo natumaini wote mtaelewa.



Itaendelea ……>
 
karibuni marafiki katika sehemu hii tutajifunzi blocks na inline elements kiundani na jinsi yakuweka mtindo katika vipengele ivyo.


HTML Block and Inline Elements

Kila element(kipengele) ya HTML ina aina yake ya kuonesha hiyo inategemea na aina gani ya kipengele(element).Kwa kawaida muonekano wa thamani kwa kila vipengele(elements) ni block au inline.

Block level elements

Block level elements ni elements ambazo zinaanza na mstari mpya hizi zina tukua upana wote uliokuwepo(huwa zina jitanua kushoto na kuria ili zi fit kila sehemu).

Mfano wa block elements

1. <div>

2. <h1> …..<h6>

3. <form>

4. <p>


Inline Elements

Hizi ni elements ambazo azianzi na mstari mpya na huwa zina chukua upana sana kama zina itaji.

Mfano wa Inline elements

1. <span>

2. <img>

3. <a>


<div> element

Div element ni block level element ambayo inatumika kama container kwa elements zingine.

<div> element haiitaji attribute yoyote,lakini style,class na id ni zakawaida.

Endapo itatumika na CSS <div> element inaweza kutumika kuweka mitindo ya yaliyomo.

Mfano

<!DOCTYPE html>

<html>

<body>


<div style=" background-color:cornflowerblue; color:#fff; padding:20px;">


<h2 style="color:#ff0;">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.</p>

<p> It’s part of the National Museum, which offers Tanzanian history exhibits, including the fossils of human ancestors found by anthropologist Louis Leakey.</p>

</div>

</body>

</html>




<span> Element

span ni inline element mbayo inatumika kama container kwaajiri ya maandishi.

<div>element haiitaji attribute yoyote,lakini style,class na id ni zakawaida.

Endapo itatumiwa na CSS inaweza kuweka mitindo katika baadhi ya sehemu ya maandishi.

Mfano

<!DOCTYPE html>

<html>

<body>

<h1>My name is <span style="color:red">Important</span> To be remembered</h1

</body>

</html>




Classing Block Elements

Class attribute inaweza elements(vipengele) kuwekewa mitindo sawa.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div.mikoa {

background-color:cornflowerblue;

color:white;

margin:20px;

padding:20px;

}

.mikoa h2{

color:#ff0;

}

</style>

</head>


<body>


<div class="mikoa">

<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.</p>

<p> It’s part of the National Museum, which offers Tanzanian history exhibits, including the fossils of human ancestors found by anthropologist Louis Leakey.</p>

</div>


<div class="mikoa">

<h2>Morogoro</h2>


<p> Morogoro is a city with a population of 315,866 in the eastern part of Tanzania.</p>


<p> 169 kilometres west of Dar es Salaam, the country's largest city and commercial centre.</p>


<p> and 223 kilometres east of Dodoma, the country's capital city.</p>

</div>


<div class="mikoa">

<h2>Dodoma</h2>


<p> Dodoma, officially Dodoma Urban District, is the national capital of Tanzania and the capital of Dodoma Region, with a population of 410,956.</p>


<p> Dodoma was founded in 1907 by German colonists during construction of the Tanzanian central railway. In 1973, the Tanzanian government announced that the capital would be moved from Dar es Salaam to a more central location to better serve the needs of the people.</p>


<p> Dodoma was selected for this purpose, as it was an already established town at a major crossroads with an agreeable climate, impressive landscape, and room for development.[4] American architect James Rossant developed a master plan for the new capital in 1986, sponsored by the United Nations.[5] Tanzania's National Assembly moved there in February 1996, but many government offices remain in Dar es Salaam, which remains the commercial capital.</p>

</div>


</body>

</html>



Classing Inline Elements

Class attribute inaweza elements(vipengele) kuwekewa mitindo sawa.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

span.nyama{font-size:120%;color:red;}

</style>

</head>

<body>

<h1>My name is <span class="nyama">Important</span> To be remebered</h1>

<p>Majaribio ya <span class=" nyama">Maandishi</span> Muhimu.</p>

</body>

</html>



Itaenelea …..
 
Karibuni marafiki katika sehem nyingine ya HTML na CSS,katika sehem hii tutajifunza jinsi ya kuweka mapangilio katika nyaraka zetu za html pia tutajifunza kidogo kuhusu responsive design.


Mipangilio ya HTML(Layout)


Kuweka mpangilio wa html kwakutumia kipengele cha <div>

<div> inatumika Zaidi kama njia ya kuweka mpangilio wa html,kwasababu inaweza kuwa raisi kuiwekea mitindo ya CSS.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

#header {

background-color:#888;

color:white;

text-align:center;

padding:5px;

}

#nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:100px;

float:left;

padding:5px;

}

#section {

width:350px;

float:left;

padding:10px;

}

#footer {

background-color:#888;

color:white;

clear:both;

text-align:center;

padding:5px;

}

</style>

</head>

<body>


<div id="header">

<h1>Historia Ya Mikoa</h1>

</div>


<div id="nav">

Dar es salaam<br>

Morogoro<br>

Arusha

</div>


<div id="section">

<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.</p>

<p> It’s part of the National Museum, which offers Tanzanian history exhibits, including the fossils of human ancestors found by anthropologist Louis Leakey.</p>

</div>


<div id="footer">

Copyright © Web Developmet for Beginners in Swahili

</div>


</body>

</html>


Quiz: tengeneza huwo mfano kwakutumia akiri yako na navigation area iwe na clickable links yani hiyo mikoa iwe na kurasa zake mtu akibonyeza impeleke katika page husika.


Kuweka mpangilio katika website kwakutumia HTML5(HTML5 Layout)


HTML5 inatoa haina mpya ya vipengele ambavyo unaweza kuvitumia katika kutengeza website yako na kutumika katika sehemu mbali mbali ya hiyo kurasa yako.

Vipengele vya HTML5

  • <header> - inaeleza header kwaajiri ya nyaraka.
  • <nav> - inaeleza container kwaajiri ya navigation links
  • <section> - inaeleza section(container) kwaajiri ya nyaraka
  • <article> - inaeleza Makala ya kipekee
  • <aside> - inaeleza yaliyomo kando/pembeni
  • <footer> - inaeleza footer(mwisho) wa nyaraka au sehemu husika
  • <details> - inaeleza maelezo ya ziada
  • <summary> - inaeleza heading kwaajiri ya kipengele cha<details>

Mfano wa HTML5

<!DOCTYPE html>

<html>

<head>

<style>

header {

background-color:#888;

color:white;

text-align:center;

padding:5px;

}

nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:100px;

float:left;

padding:5px;

}

section {

width:350px;

float:left;

padding:10px;

}

footer {

background-color:#888;

color:white;

clear:both;

text-align:center;

padding:5px;

}

</style>

</head>

<body>


<header>

<h1>Mikoa</h1>

</header>


<nav>

Morogoro<br>

Dar es salaam<br>

Dodoma

</nav>


<section>

<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.</p>

<p> It’s part of the National Museum, which offers Tanzanian history exhibits, including the fossils of human ancestors found by anthropologist Louis Leakey.</p>


</section>


<footer>

Copyright © Web Developmet for Beginners in Swahili

</footer>


</body>

</html>


Mpangilio kwakutumia Table

Kipengele cha <table> haki kutengenezwa kwaajiri ya layout tool.

Lengo lake kuu lilikua kwaajiri ya kuonesha tabular data

Layout inaweza kuwekwa kwakutumia kipengele cha <table> kwasababu kinaweza kuwekewa mtindo wa css.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

table.lamp {

width:100%;

border:1px solid #d4d4d4;

}

table.lamp th, td {

padding:10px;

}

table.lamp th {

width:40px;

}

</style>

</head>

<body>


<table class="lamp">

<tr>

<th>

<img src=" http://www.w3schools.com/images/lamp.jpg" alt="Note" style="height:32px;width:32px">

</th>

<td>

The table element was not designed to be a layout tool.

</td>

</tr>

</table>


</body>

</html>



Responsive Web Design

Nini maana ya responsive design ?

Responsive web design ni design ambayo inaifanya website yako ionekane vizuri kwakila kifaa kama(kompyuta,simu na tablet);

Responsive design inahusu utumiaji wa css na html ili kuiresize,kuficha baadhi ya vitu,kupunguza,kuongeza au kusogeza yaliyomo(contents) kufanya yaonekane vizuri katika kifaa chochote.


Mfano

<!DOCTYPE html>

<html lang="en-us">

<head>

<style>

.mikoa {

float: left;

margin: 10px;

padding: 10px;

width: 300px;

height: auto;

border: 1px solid black;

}


.mikoa > p{

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

font-weight:lighter;

}

</style>

</head>

<body>

<h2>Punguza ukubwa wa nyaraka yako na uone <h2>


<div class="mikoa">

<h2>Morogoro</h2>


<p> Morogoro is a city with a population of 315,866 in the eastern part of Tanzania.</p>


<p> 169 kilometres west of Dar es Salaam, the country's largest city and commercial centre.</p>


<p> and 223 kilometres east of Dodoma, the country's capital city.</p>

</div>


<div class="mikoa">

<h2>Dodoma</h2>


<p> Dodoma, officially Dodoma Urban District, is the national capital of Tanzania and the capital of Dodoma Region, with a population of 410,956.</p>



</div>


</body>

</html>


Tutajifunza Zaidi responsive design katika darasa la media query


Itaenelea ………
 
Karibuni marafiki katika sehem hii tutajifunza iframes za HTML na matumizi yake.



HTML IFRAME

Iframe intumika kuonesha kurasa ndani ya kurasa.

Jinsi ya kuweka iframe.

<iframe src=”url”></iframe>


src attribute inaeleza url (anuani ya kimtandao) kwaajiri ya kurasa ya iframe.


Jinsi ya kuweka ukubwa katika iframe

Tumia width na height attribute kuweka ukubwa katika kurasa ya iframe.

Thamani ya attribute inawekwa kwa mfumo wa pixel kwa kawaida,lakini unaweza kutumia athirimia kama(90%) nk.

Mfano

<!DOCTYPE html>

<html>

<body>

<iframe src="iframe.html" width="200" height="200"></iframe>

</body>

</html>


Jinsi ya kutoa border kwenye iframe

Kwa kawaida unapotumia iframe katika kurasa inakua na border nyeusi ilio izunguuka.

Ili kuweza kuiondoa weka style attribute na tumia CSS border property:

Mfano

<!DOCTYPE html>

<html>

<body>

<iframe src=" iframe.html" style="border:none"></iframe>

</body>

</html>



Jinsi ya kubadilisha ukubwa , mtindo na rangi katika iframe border.


<!DOCTYPE html>

<html>

<body>

<iframe src="iframe.htm" style="border:5px dotted red"></iframe>

</body>

</html>



Kuna aina 10 za mtindo wa border.




    • dotted – inaeleza border iliokuwa na vidoti doti
    • dashed – inaeleza border iliokuwa dashed
    • solid – inaeleza border iliokuwa solid
    • double – inaeleza border iliokuwa malambili
    • groove - inaeleza 3D grooved border. Effect yake inategemea na thamani ya rangi ya border.
    • ridge - inaeleza 3D ridged border. Effect yake inategemea na thamani ya rangi ya border
    • inset - inaeleza 3D inset border. Effect yake inategemea na thamani ya rangi ya border
    • outset – inaeleza 3D outset border. Effect yake inategemea na thamani ya rangi ya border
    • none – inaeleza kuwa border haipo/isiwepo
    • hidden – inaeleza kuwa border iliojificha
jinsi ya kuzitumia katika css

border:1px solid black;

border:1px dotted green;

kuweka unaanza na border property kisha thamani ambayo ni 1px au Zaidi na kisha unaweka aina ya border kama groove/solid/dashed ….. inafata na rangi. Rangi unaweza kuweka kwa aina yoyote kama kwa maneno > white, #fff,rgb(255,255,255),rgba(255,255,255,1.0) nk.

Pia unaweza kuweka aina mbili za border katika element moja.

Mfano

border-style: dotted dashed solid double;


jinsi ya kutumia iframe kama target kwaajiri ya links.

Iframe inaweza kutumika kama target frame kwaajiri ya link

Target attribute ya link lazima irejee kwenye name attribute ya iframe.inamaanisha kuwa jina lililo wekwa katika target link liwe sawa na lililotumika katika name attribute.

Mfano

<!DOCTYPE html>

<html>

<body>


<iframe width="100%" height="500px" src="iframe.htm" name="iframe "></iframe>

<p><a href="JamiiForums | The Home of Great Thinkers" target="iframe ">W3Schools.com</a></p>

<p>pindi target link ikifanana na jina la iframe linki itafunguka katika iframe.</p>

</body>

</html>


Itaendelea ……>
 
Karibuni marafiki katika sehem hii tutajifunza kuhusu web address na charset.Ili kujua zinavo fanya kazi ziliko anzia na zilipo fikia.

HTML Encoding (Character Sets)

Ili kurasa kuweza kuonekana vizuri,browsers lazima zijue character set(character encoding) yakutumia.

Nini maana ya Character Encoding ?

ASCII ilikua ya kwanza character encoding. Inaeleza alphanumeric characters 127 tofauti tofauti ambazo zinaweza kutumika katika internet.

ASCII ina support namba(0-9) hrufi za kiingereza (A-Z) na baazi ya characters maalumu kama !$+-()@<>.

ISO-8859-1 ilikua ni default character set kwaajiri ya HTML 4. Ina support character codes 256 tofautii tofauti.


ANSI (Windows-1252) ilikua ni character set ya awali kwenye windows. Hii pia nayo ina support character codes 256 tofauti tofauti.

Kwasababu ASCII na ISO zilikua limited(ndogo).default character encoding ikabadilishwa kwenda UTF-8 kwenye HTML5.

UTF-8 ina characters na alama(symbols) zote duniani.

HTML 4 processers nazo zina support UTF-8;



Charset Atrribute

Ili kurasa ya HTML iweze kuoneshwa vizuri, browser lazima ijue character set iliotumika kwenye kurasa.

Naiyo inawekwa kwenye <meta> tag kwenye <head>

Mfano HTML 4

<head>

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1>

</head>

HTML 5

<head>

<meta charset=”UTF-8”>

</head>


HTML Uniform Resource Locators

URL ni jinalingine la web address.

URL inaweza kuwandikwa kwa naneno(jamiiforums.ml) au kwa internet protocol(Ip)
address(255.55.55.10).

Watu wengi wanapenda kutumia jina wakati wa kuperuzi,kwasababu majina ni maraisi kuliko kutumia namba.

URL – Uniform Resource Locator

Browser inaomba kurasa kutoka kwenye server kwakutumia URL.

Web address,kama Web development for beginners in swahili inafata sharia hizi.

scheme://prefix.domain.port/path/filename


Maelezo

· Schem: inaeleza aina ya huduma ya internet(inayo tumika Zaidi ni htttp).

· Prefix : inaeleza domain prefix(ya kawaida kwa http ni www)

· Domain: inaeleza domain name ya internet (jamiiforum.ml)

· Port: inaeleza namba ya port ya host (ya kawaida kwa http ni 80)

· Path: inaeleza njia ya kwenye server

· Filename: inaeleza jina la faili


URL za kawaida

http:HyperText Transfer Protocol – not encrypted

https: Secure HyperText Transfer Protocol – encrypted

ftp:File Transfer Protocol – kwaajiri ya downloading au upload

file - file la kwenye kompyuta yako.


URL inaweza kutumwa kwenye internet kwakutumia ASCII character set kama url ina character nyingine Zaidi ya ASCII set tabidi ibadilishwe.

URL Encoding inabadilisha characters zisizo kuwa za ASCII kwenda kwenye format ambayo inaweza kusafilishwa kwenye internet.

URL encoding inaondoa characters ambazo sio ASCII kwakuweka “%” ikifatiwa na namba za hexadecimal.

URL haiwezi kuwa na nafasi, URL encoding kwa kawaida inaondosha nafasi(space) kwakuweka (+) alama ya kujumlisha au %20.


Itaendelea ………..


Intermediate HTML Developer.

Form za html.
 
Karibuni sana marafiki katika sehemu hii tutajifunza kidogo kuhusu vipengele na sifa za form za html.


FORM ZA HTML

Form za html zinatumika kukusanya user inputs.

Kipengele cha <form>

Kipengle cha <form> kinaeleza form ya HTML.

Mfano

<form>
.
vipengele vya form

.
</form>

Form za HTML zina vipengele vya form.

Vipengele vya form vina aina tofauti tofauti ya vipengele vya input, checkboxes, radio buttons,text, submit nk.


Kipengele cha <input>

Kipengele cha <input> ni cha muhimu sana katika form.

Kipengele cha <input> kina tofauti nyingi, inategemea na aina ya attribute(sifa).

Hizi ni baadhi ya aina.

Text: inaeleza maandishi ya kawaida ya input.

Radio: inaeleza radio button ya input(kwaajiri ya chaguo moja kati ya mengi).

Submit: inaeleza submit button(kwaajiri ya kuwasirisha form).


Text input

<input type=”text”> inaeleza mstari mmoja wa uwanja wa input kwaajiri ya input text;

Mfano

<!DOCTYPE html>

<html>

<body>

<form>

Jina la kwanza:<br>

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

<br>

Jina la mwisho:<br>

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

</form>

</body>

</html>


Note : form yenyewe haionekani.

Note: upana wa kawaida wa uwanja wa maandishi ya input ni herufi 20.

Radio Button input

<input type=”radio”> inaeleza radio button.

Radio button inamfanya mtumiaji achague chaguo moja katika ya machaguo yalio kuwepo.


Mfano

<!DOCTYPE html>

<html>

<body>


<form>

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

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

<input type="radio" name="gender" value="other"> Mengine

</form>

</body>

</html>


Note: jina(name attribute) la chaguo lakwanza hadi la mwisho tabidi liwe sawa kama halipo sawa itakubali machaguo yote yalio kuwepo.

Mfano

<!DOCTYPE html>

<html>

<body>


<form>

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

<input type="radio" name="female" value="female"> Mke<br>

<input type="radio" name="gender" value="other"> Mengine

</form>

</body>

</html>


Submit button

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

Form handler kwa kawaida ni kurasa ya server ikiwa na script(codes) kwaajiri ya kuprocess taarifa zilizo ingizwa kwenye input field.

Form handler au faili ambalo lina process input data inaelezwa katika form’s action attribute

Mfano

<!DOCTYPE html>

<html>

<body>


<form action="formHanler.php" >

<h4>Andika jina lolote na ubonyeze submit uwone kinacho tokea</h4>

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>

<p>Taarifa zitatumwa katika faili formHanlder.php </p>

</body>

</html>

Action Attribute

Action attribute inaeleza action ambayo itakayo fanyika endapo form itakuwa imewasirishwa(submitted)

Njia ya kawaida ya kuwasirisha form kwenye server ni kwa kutumia submit button.

Kwa kwaida form inawasirishwa kwenye kurasa ambayo ipo kwenye server.

Kama action haijawekwa basi action itawekwa by default kwenye kurasa ile ile iliyo kuwepo form.


Method Attribute

Method attribute inaeleza njia ya HTTP(GET,POST) itakayo tumika endapo form itakuwa inawasirishwa.


Mfano

<form action=”formHandler.php” method=”GET”></form>

Au

<form action=”formHandler.php” method=”POST”></form>


Kipindi Gani Cha kutumia GET ?

Unaweza kutumia GET kama uwasirishwaji wa form ni wakawaida yani hauna taarifa nyeti kama (query za injini tafutaji)

Ukitumia GET,Taarifa za form zitakuwa zinaonekana kwenye address bar ya browser yako.

Kama

formHandler.php?firstname=frank&lastname=galos

Note tumia GET kama una taarifa chache zinazoitajika kuwasirishwa.

Kipindi Gani Cha Kutumia POST ?

Tumia POST kama form yako ina update taarifa, au inataarifa nyeti kama(password).

POST inatoa urinzi wakutosha kwani taarifa zinazo wasilishwa hazionekani kwenye address bar ya browser.


Name Attributte

Ili form iweze kuwasirishwa vizuri lazima kila uwanja wa input uwe na name attribute.

Unaweza usiweke name na badala yake unaweka id kwaajiri ya javascript ajax library kuweza kutuma / kupokea taarifa kwenye server.

Mfano

<!DOCTYPE html>

<html>

<body>


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

jina la kwanza:<br>

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

<br>

jina la mwisho:<br>

<input type="text" >

<br><br>

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

</form>

</body>

</html>


Mfano hapo juu uta wasirisha taarifa za jina la kwanza tu. Kwasababu thamani ya uwanja wa jina la mwisho haina name attribute.

Kama utabonyeza submit taarifa zako zitatumwa katika faili linaloitwa


Kuweka Taarifa za Form kwenye makundi na <fieldset>

Kipengele cha <fieldset> kinaweka taarifa za form zinazofana kwenye makundi.

Kipengele cha <legend> kinaweka maelezo(caption) kwaajiri ya kipengele cha <fieldset>


Mfano

<!DOCTYPE html>

<html>

<body>


<form action="formHandler.php" method = “POST”>

<fieldset>

<legend>Taarifa za kibinafsi:</legend>

First name:<br>

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

<br>

Last name:<br>

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

<br><br>

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

</fieldset>

</form>


</body>

</html>

Sifa za FORM (form attributes)

Form ikiwana sifa zote itaonekana ivi.

<form action="formHandler.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
vipengele vya form
.
</form>


Orodha ya attributes za Form

accept-charset : inaeleza charset itakayotumika wakati wa kuwasirisha form.

Action : inaeleza anuani ambayo form itakuwa inawasirishwa .

Autocomplete: inaelaza kama form iwe autocomplete (default ni on);

Enctype: inaeleza encoding ya taarifa zilizo wasilishwa(default ni url-encoded).

Method: inaeleza njia ya HTTP iliyotumika wakati wa kuwasirisha form(default ni GET).

Name: inaeleza jina lililotumika kuitambua form.

Novalidate: inaeleza kuwa browser haitahi kuihalisha form.

Target: inaeleza lengo la anuani kwenye sifa ya action(action attribute) default ni _self.

Note : Tutajifunza Zaidi kuhusu Attribute na input types baadae.


Mfano Zaidi Tuma mail kupitia form na kuweka mtindo wa css

<!DOCTYPE html>

<html>

<style>

body{

background:#fff;

margin:0px;

padding:0px;

font-family:Tahoma,sans-serif;

}

h2{

background:cornflowerblue;

padding:10px;

margin:0px;

}

form{

width:100%;

height:350px;

color:#099;

margin:10px 0 0 20px;

padding:0px;

display:inline-block;

}

form > input#name{

padding:8px;

height:auto;

width:270px;

margin:5px 0 0 0;

display:block;

border:1px solid #ffa500;

border-radius:2px;

}

form > input#mail{

padding:8px;

height:auto;

width:270px;

margin:5px 0 0 0;

display:block;

border:1px solid #ffa500;

border-radius:2px;

}


form > textarea{

border:1px solid #ffa500;

border-radius:2px;

width:270px;

height:90px;

margin:10px 0 0 0;

padding:0px;

display:block;

resize:none;

overflow:none;

}

form > #submit{

padding:10px;

margin:10px 0 0 20px;

border:1px solid #ffa500;

border-radius:2px;

display:inline-block;

background:#fff;

}

form > #reset{

padding:10px;

margin:10px 0 0 20px;

border:1px solid #ffa500;

border-radius:2px;

background:#fff;

display:inline-block;

}

form > #reset:hover{

border-color:cornflowerblue;

color:#ffa500;

cursor😛ointer;

transition:0.5s linear 0s;

}

form > #submit:hover{

border-color:cornflowerblue;

color:#ffa500;

cursor😛ointer;

transition:0.5s linear 0s;

}


</style>

<body>


<h2>Tuma Email kwa frankgalos@ymail.com:</h2>

<form action="MAILTO: frankgalos@ ymail.com" method="post" enctype="text/plain">

jina:<br>

<input type="text" id="name" name="name" placeholder ="jina lako">

Barua pepe:<br>

<input type="text" id = "mail" name="mail" placeholder="Barua pepe">

Maoni:<br>

<textarea type="text" name="comment" placeholder="Maoni yako" size="50"></textarea>

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

<input id ="reset" type="reset" value="Reset">

</form>

</body>

</html>


Alama ya > ni css combinatory ambayo ina hashiria kuwa kuna husiano kati ya selector na selector.

Kuna aina tatu ya CSS3 combinator nazo.

· Descendant selector(space);

· Child selector(>)

· Adjacent sibling selector(+)

· General sibling selector(~)


Niki pata nafasi tutazijua kuindani.


Margin:0px 0px 0px 0px;

Inaeleza :

Margin-top:0px;

Margin-left:0px;

Margin-bottom:0px;

Margin-right:0px;

Kwa ujumla ili kuwepuka kuweka code nyingi katika kurasa zetu ni vizuri tukatumia huu mfumo,

Margin:0px 0px 0px 0px;

Ilikuweka left,right,top,bottom = 0px; unajua kuweka

Margin:0px;

Kama unataka kuweka margin sehem moja au mbili ndo una apply hii kitu.

Margin:10px 0px 0px 10px;

Pia padding inafata sharia hii

padding:10px 0px 0px 10px;

padding:10px;

left,right,bottom,top = 10px;

padding:0px;

left,right,bottom,top = 0px;


transition ni CSS3 transition ambayo inakupa uwezo kubadilisha thamani ya kitu vizuri (kutoka thamani moja hadi nyingine) kwa mda uliopewa.

Kwakutumia CSS3 transition unaweza kubadilisha kitu chochote cha HTML kama div,span,h1 …h6,a, nk.

Kwakuweka tu hivi vitu.

Transition:0.5s linear 0s;

0.5s ni sekunde za duration na 0s ni sekunde za ku delay

Linear ni transition timing function

Zipo aina sita za timing function ambazo zina weka spidi curve.

· ease – inaweka effect ya transition kwa kuanza pole pole, pia halaka na mwisho pole pole.

· linear – inaweka effect ya transition kwa spidi sawa ya kuanzia na ya kuishia.

· ease-in – inaweka effect ya transition kwa kuanza pole pole.

· ease-out – inaweka effect ya transition kwa kuishia pole pole.

· easein-out – inaweka effect ya transition kwa kuanza pole pole na kuisha pole pole

· cubic-bezier(n,n,n,n) - inakupa nafasi ya kuweka thamani zakwako mwenyewe kwenye cubic-bezie function

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;

}


/* kwaajiri ya Safari 3.1 to 6.0 */

#div1 {-webkit-transition-timing-function: linear;}

#div2 {-webkit-transition-timing-function: ease;}

#div3 {-webkit-transition-timing-function: ease-in;}

#div4 {-webkit-transition-timing-function: ease-out;}

#div5 {-webkit-transition-timing-function: ease-in-out;}


/* Standard syntax */

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

div:hover {

width: 300px;

}

</style>

</head>

<body>

<p><b>Note:</b> Huu mfano haufanyi kazi kwenye internet explorer 9 na za mwanzo .</p>

<div id="div1">linear</div><br>

<div id="div2">ease</div><br>

<div id="div3">ease-in</div><br>

<div id="div4">ease-out</div><br>

<div id="div5">ease-in-out</div><br>

<p>peleka mouse yako kwenye div. kuona spidi ya curves</p>

</body>

</html>



Richa ya kuweka transition: width 2s linear 0s unaweza kuweka ikiwa moja moja kama.

transition-property: width;

transition-duration: 2s;

transition-timing-function: linear;

transition-delay: 1s;



Itaendelea ….
 
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