Web development for beginners in swahili

Web development for beginners in swahili

karibuni marafiki katika sehem nyingine ya HTML, katika sehem hii tutajifunza jinsi video invofanya kazi na zaid tutajifunza tukishajua javascript.

HTML VIDEOs

Kabla ya HTML 5,kulikuwa hakuna standard ya kuonesha video kwenye kurasa ya mtandao.

Kabla ya HTML5,video zilikua zina chezwa kupitia plug-in(kama flash) pake yake.

Kipengele cha <video> kinatoa njia iliyokuwa standard kwaajiri ya ku embed video kwenye kurasa ya mtandao.


Kipengele cha <video>

Ilikuonesha video kwenye html,tumia kipengele cha <video>

Mfano

<!DOCTYPE html>

<html>

<body>


<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Browser yako haisapoti tag ya video

</video>


</body>

</html>

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

Attribute ya controls inaongeza controls za video, kama play,pause na volume.

Nivizuri kama utakuwa una weka width na height attributes kilamala.

Kama width na height haijawekwa, browsers hazitojua ukubwa wa video, athari yake itakuwa kurasa itabadika wakati video iki load.

Maandishi kati ya <video> na </video> yataonekana kwenye browsers ambazo hazi support kipengele cha <video>

Vipengele vingi vya <source> vinaweza kuunganisha mafaili yaliyo kuwemo sehem mbalimbali.lakini browser itatumia link moja ambayo inaitambua.

Video unaweza kuiweka kupitia njia mbalimbali mfano tuseme una website yako

Kuna ma folder kama haya videos/ images nk

Kwavideo njisi ya kuiweka unaiweka kama image vile vile.

Tuseme katika mafolder yako yapo ndani ya folder linaloitwa web/ humu kwenye web kuna faili linaloitwa index.html au .htm zote zina fanyakazi moja. Unataka faili la index lime na videos ambazo zipo kwenye faili la videos unachotakiwa kufanya katika source=”videos/faili la video .mp4 au .ogg au webm” kama lipo nje ya folder la web unachotakiwa kufanya katika source=”../internet/videos/faili ya video.mp4”. hivi vi dot viwili vina hashili au vina iambia browser kwamba hili faili halipo ndani ya folder husika kwaiyo rudi nyuma na uwende ukachukue video ilio kuwepo kwenye folder linalo itwa internet ambapo ndani yake kuna folder linalo itwa videos ndo utalikuta basi browser inakubaliana nahayo na faili linaonekana.

Njia hii inatumika hata kwenye mafaili ya kawaida na yasio ya kawaida kama stylesheets / php nk.


Autoplay

Kuifanya video iwe inaanza moja kwa moja tumia attribute ya autoplay

Mfano

<!DOCTYPE html>

<html>

<body>


<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Browser yako haisapoti tag ya video

</video>


</body>

</html>


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

Autoplay haifanyi kazi kwenye vifaa kama iphone na ipad


Browser <video> support

Kwa sasa kuna formats tatu(3) za video zinazo support kipengele cha <video>.nazo ni:MP4,WebM na Ogg.

ifuatayo ni table ili uweze kuona mpangilio download faili hili

browsers


Internet explorer

Ina support

Hai support

Hai support

Firefox/mozilla

Ina support

Ina support

Ina support

chrome

Ina support

Ina support

Ina support

Safari

Ina support

Hai support

Hai support

Opera(kuanzia ya 25)

Ina support

Ina support

Ina support


Aina za media(media Types)

ifuatayo ni table ili uweze kuona mpangilio download faili hili

Format ya faili

Aina ya media

Mp4

Video/mp4

WebM

Video/webm

Ogg

Video/ogg


Unaweza kutengeneza player yako mwenyewe hiyo itakua inajumuisha , uwezo wa kuplay na kupoz na kuweka duration ya video husika.Ila kwakutumia HTML huwezi kufanya hivyo.kwaiyo tabidi ujue kitukinacho kuwezesha kufanya hivyo kwa wale wanaopenda kuwa na video streaming site.hiyo inawezekana kwa kutumia javascript kwaiyo basi tutajifunza kutengeneza vyakwetu tukijua javascript.

HTML video itaendelea tukijifunza javascript.

<file>

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


Itaendelea …….

<audio> ……..
 
karibuni marafiki katika sehem nyingine ya HTML, katika sehem hii tutajifunza jinsi ya mafaili ya audio kwenye kurasa zetu ili kutengeneza custom player tabidi tumalize javascript kwanza kwaiyo video na audio ni vipolo.

pia ningependekeza ku download(kupakuliwa) wa hili faili kwasababu lina tables ambazo humu azitoonesha kwa mpanglio.




HTML5 audio

HTML5 inatoa standard kwaajiri ya kucheza mafaili ya audio.



Audio kwenye Mtandao

Kabla ya HTML 5 kulikua hakuna standard kwaajiri ya kucheza mafaili ya audio kwenye kurasa za mtandao.

Kabla ya HTML mafaili ya audio yaalikua yana chezwa pekyake na plug-in kama(flash).

Kipengele cha <audio> kinatoa njia iliokuwa standard kwaajiri ya kuweka mafaili ya audio kwenye kurasa ya mtandao.



Kipengele cha <audio>

Ili mafaili ya audio yafanye kazi, tumia kipengele cha <audio>



Mfano

<!DOCTYPE html>

<html>

<body>

<audio controls>

<source src="example.ogg" type="audio/ogg">

<source src="example.mp3" type="audio/mpeg">

Browser yako hai support kipengele cha audio

</audio>

</body>

</html>


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


Audio inafanyaje kazi

Attribute ya controls inaongeza controls za audio, kama play,pause na volume.

Maandishi kati ya tags za <audio> na </ audio > yataonekena kwenye browsers amabazo kipengele cha <audio> hakifanyi kazi.

Vipengele vingi vya <source> vina weza kuunganish mafaili mbali mbali. Lakini browsers zita itumia moja wapo inayo itambua.


Audio Browser Support

Kwa sasa kuna formats tatu(3) zinazo support kipengele cha <audio> ambazo ni : MP3,Wav na Ogg.


Ifuatayo ni table yenye orodha ya browsers zinazo support na zisizo support mafaili ya audio.kwaiyo ilikuiona table kwampangilio download hili faili.

Browsers

Mp3

Wav

Ogg

firefox

Ina support

Ina support

Ina support

chrome

Ina support

Ina support

Ina support

Opera

Ina support

Ina support

Ina support

Safari

Ina support

Ina support

Hai support

Internet Explorer

Ina support

Hai support

Hai support


Aina za Media za audio(audio media types)

Ifuatayo ni table yenye orodha ya browsers zinazo support na zisizo support mafaili ya audio.kwaiyo ilikuiona table kwampangilio download hili faili.


Format ya faili

Aina ya Media

Mp3

Audio/mpeg

Wav

Audio/wav

Ogg

Audio/ogg


Tutajifunza kutengeneza audio player yet tukisha maliza javascript

<file>

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


Itaendelea ….

Plug-ins > …
 
karibuni marafiki katika sehem nyingine nzuri kabisa ya HTML,katika sehem hii tutajifunza multimedia lakini tunaangalia zaidi kwenye plug-ins zinavyo tumika.

Plug-ins za HTML

Lengo la plug-ins ni kupanua ufanyajikazi browsers za html.


Visaidizi vya HTML(plug-ins)

Applications zinazotoa misaada ni progamu za kompyuta ambazo zinapanua ufanyajikazi wa browser ya mtandao.

Applications zinazotoa misaada nazo zina itwa plug-ins.

Mfano wa plug-ins ambazo zinajurikana ni java applets.

Plug-ins zinaweza kuwekwa kwenye kurasa kwakutumia tag ya <object> au <embed>.

Plug-ins zinaweza kutumia kwa malengo mengi:kama kuonesha ramani,ku skani virus,kuthibitisha utambulisho wako wa benk nk.

Note: ilikuonesha videos au audios tumia <video> au <audio>.


Kipengele cha <object>

Kipengele cha <object> kinafanya kazi kwenye browsers zote.

Kipengele cha <object> kinaeleza kitu kilichoingizwa au kilichoingia(embedded) kwenye nyaraka ya HTML.

Hiki kipengele kinatumika kiingiza plug-ins kama:java applets,PDF readers,Flash players kwenye kurasa ya mtandao(web page).


Mfano

<!DOCTYPE html>

<html>

<body>

<object width="400" height="70" data="data.swf"></object>

</body>

</html>


www.jamiiforums.ml/tutorFiles/examples/28/1.html


Kipengele cha object pia kinaweza kutumika kuweka HTML ndani ya HTML

Mfano

<!DOCTYPE html>

<html>

<body>

<object width="100%" height="500px" data="page.html"></object>

</body>

</html>


www.jamiiforums.ml/tutorFiles/examples/28/2.html


Au picha kama utapenda


Mfano

<!DOCTYPE html>

<html>

<body>

<object data="picha.jpeg"></object>

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/28/3.html

Kipengele cha <embed>

Hiki kipengele kinafanya kazi kwenye browsers zote.

Pia hiki kipengele kinaeleza kitu kilichoingizwa au kilichoingia(embedded) kwenye nyaraka ya HTML


Mfano

<!DOCTYPE html>

<html>

<body>

<embed width="400" height="50" src="data.swf">

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/28/4.html


Note kipengele cha <embed> hakina tag ya kufungia.pia hakiwezi kuwa na maandishi ya ziada.

Pia hiki kipengele kinaweza kutumika kuweka HTML ndani ya HTML.


Mfano

<!DOCTYPE html>

<html>

<body>


<embed width="100%" height="500px" src="page.html">


</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/28/5.html

Au picha kama unapenda

Mfano

<!DOCTYPE html>

<html>

<body>

<embed src="picha.jpeg">

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/28/6.html


<file>


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


Itaendelea ……

YouTube videos …

CSS 3 ………
 
karibuni marafiki katika sehem yetu ya mwisho ya multimedia.katika sehem hii tutajifunza jinsi ya kuingiza videos za youtube kwenye kurasa zetu.pia hii sehem ni ya mwisho kwa HTML lakini tukijifunza javascript tutailudia hasa kwenye vipengele kama:<audio> na <video> ili kutengeneza custom player.

Youtube Videos

Njia rahisi ya kucheza video kwenye HTML,ni kutumia youtube.

Youtube Video id

youtube wataonesha id kama (XGSy3_Czz8k),wakati uki sevu au uki play video.
Unaweza kutumia hii id na kurejea kwenye video yako kwenye HTML.

Kucheza Video za Youtube kwenye HTML

Ilikuweza kucheza video za Youtube kwenye kurasa yako,Fanya vitu vifuatavyo.
  • upload video kwenye youtube
  • ijue id ya video
  • Weka kipengele cha iframe kwenye kurasa yako
  • weka url ya video kwenye attribute ya src
  • Tumia width na height kuweka ukubwa wa player
  • Ongeza parameters(vigezo) vingine kwenye url

Mfano
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="315"
src="">
</iframe>
</body>
</html>

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

Parameters(Vigezo) za Youtube

autohide

value 0:controls za player zinakuwa zinaonekana
value 1:controls zinajificha moja kwa moja wakati video ikicheza
value 2(default):kama player ina ratio ya 16:9 au 4:3, ni sawa na 1 vinginevyo ni sawa na 0;

autoplay
value 0 (default): video haito cheza moja kwa moja wakati video iki load
value 1:Video itacheza moja kwa moja wakati player iki load.

Controls
value 0 : controls za player hazito onesha, na video na load haraka.
value 1 : (default) controls za player zitaonesha, na video ina load haraka.
value 2 : controls za player zitaonesha lakini video haito load kabla mtumiaji aja initiates playback.

loop
value 0 : video itacheza maramoja tu.
value 0 : video itajirudia daima.

playlist
alama ya comma inatenganisha orodha ya videos za kucheza(katika uongezaji kwenye URL)

<object> Embeds

Youtube wali itoa hii njia ya kuingiza video katika HTML tangu mwezi wakwanza 2015, kwaiyo hawaitumii tena.
pia sio kwambwa video ukiiweka kwa njia hii haitofanya kazi,itafanya kazi.
na unatakiwa kutumia <iframe> mbadala ya hii.

Mfano wa kutumia <object> embeds
<!DOCTYPE html>
<html>
<body>
<object width="420" height="315"
data="">
</object>
</body>
</html>

http://www.jamiiforums.ml/tutorFiles/examples/29/2.html

<file>
www.jamiiforums.ml/tutorFiles/29.docx <

itaendelea .....
CSS3 ....
 
karibuni marafiki kwenye sehem nyingine ya HTML na CSS kwaanzia hii sehem tutajifunza baazi ya CSS properties hadi kwenye CSS3,na ni kwasababu css3 ni fupi kwaiyo nimeona vizizuri tuka zijua property muhimu ambazo zitatusaidia kutengeneza kurasa nzuri.kwaiyo tunaanza na ::

CSS Background

Mali(property) za background zinatumika kuweka background effects kwenye vipengele.

Kuna aina tano za background property kwenye css.

1. Background-color

2. Background-image

3. Background-repeat

4. Background-attachment

5. Background-position


Background-color

Background-color inaweka rangi ya nyuma ya kipengele au vipengele.

Rangi ya nyuma ya kurasa inawekwa hivi:

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: orange;

}

</style>

</head>

<body>

<h1>Habari dunia!</h1>

<p>Hii page ina rangi ya nyuma </p>

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/30/1.html

Kwakutumia CSS rangi mala nyingi inawekwa kwa mtindo huu.

· Jina kamili la rangi kama:”brown”

· Kwakutumia thamani za HEX kama :” #f4a460”

· Kwa kutumia thamani za RGB kama:”rgb(244, 164,96)”


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

background-color: green;

}


div {

background-color: lightblue;

}


p {

background-color: yellow;

}

</style>

</head>

<body>

<h1>Mfano wa CSS background-color !</h1>

<div>

Hiki ni kipengele cha div ndani

<p>Hii aya ina rangi ya nyuma yake.</p>

</div>

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/30/2.html

Background Image

Background image property inaeleza picha ya kutumia kama background kwenye kipengele.

Kwa kawaida picha inajirudia jirudia kwaiyo ina chujua sehem nzima ya kipengele.

Jina la picha lazima lifanane na jina halisi, likikosewa picha haito onekana.

Picha ya nyuma inawekwa kwa mtindo huu:


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("picha.jpg");

}

</style>

</head>

<body>

<h1>Habari dunia </h1>

<p>Hii kurasa ina picha ya nyuma </p>

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/30/3.html

Note: url tabidi iwena na njia kamiri ya picha. Kama picha ipo kwenye folder linaloitwa images alafu faili la css lipo kwenye folder la style ili picha iweze kuoneka tabidi ufanye hivi.

background-image: url("../images/picha.jpg");

kwa maana browser iki iitaji iyo picha inarudi nyuma kutoka kwenye faili la css na inaingia kwenye folder linaloitwa images ndio kuna picha yenyewe.

Kama faili la css lipo kwenye root folder au sehem ambayo mafaili yako ya index na css na mengineyo alafu picha yako ipo kwenye folder la images uta faanya hivi.

background-image: url("images/picha.jpg");


Background image – repeat

Kwa kawaida picha ya nyuma huwa ina jirudia pande zote wina na usawa(vertically na horizontally).

Kuna picha zingine tabidi zijirudie pekiyake wima au usawa.au zita onekana vibaya kama hii.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("picha.jpg");

}

</style>

</head>

<body>

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/30/4.html

Kama picha ya juu hapo ingejirudia usawa pekiyake ingeonekana vizuri.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("picha.jpg");

background-repeat: repeat-x;

}

</style>

</head>

<body>

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/30/5.html


background-repeat: repeat-x; inaweka picha ijirudie usawa tu.

Unaweza kuweka picha ijirudie wima kwakufanya hivi.

background-repeat: repeat-y;

unaweza kuifanya picha ioneshe maramoja tu.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

}

</style>

</head>

<body>

<h1> Habari dunia!</h1>

<p>bla blaa bla blaa bla blaa bla blaa</p>

<p>bla blaa bla blaa bla blaa bla blaa</p>

<p>bla blaa bla blaa bla blaa bla blaa</p>

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/30/6.html


background-repeat: no-repeat; imeifanya picha isijirudie.

Mfano hapo juu picha imeonesha sehem moja na maandishi, kwaiyo tabidi tuifanye ikae vizuri ili maandishi nayo yajisikie raha kuonekana.

Tutafanya hivyo kwakutumia background-position property:

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("images/picha.png");

background-repeat: no-repeat;

background-position: right top;

margin-right: 160px;

}

</style>

</head>

<body>

<h1> Habari dunia!</h1>

<p>bla blaa bla blaa bla blaa bla blaa</p>

<p>bla blaa bla blaa bla blaa bla blaa</p>

<p>bla blaa bla blaa bla blaa bla blaa</p>

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/30/7.html


Background Image – fixed position

Ili kuweka picha ya nyuma iwe fixed tumia background-attachment propert

Kwakufanya hivi picha haitokuwa ina scroll na vituvingene vilivyo kuwemo kwenye kurasa.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image: url("picha.png");

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: fixed;

}

</style>

</head>

<body>


<h1>Habari dunia!</h1>

<p>punguza ukubwa wa browser ili kuona fixed position inavofanya kazi kwa ku scroll.</p>

<p>bla blaa bla blaa bla blaa bla blaa</p>

<p>bla blaa bla blaa bla blaa bla blaa</p>

<p>bla blaa bla blaa bla blaa bla blaa</p>


</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/30/8.html

punguza ukubwa wa browser ili kuona fixed position inavofanya kazi kwa ku scroll.


Background shortend-property

Inawezekana kuweka property zote za background kwenye property moja. Hii inaitwa shortend property.

Kifupi property ya background ni background.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

background: #ffffff url("picha.png") no-repeat right top;

margin-right: 200px;

}

</style>

</head>

<body>

<h1>Habari dunia!</h1>

<p>punguza ukubwa wa browser ili kuona fixed position inavofanya kazi kwa ku scroll.</p>

<p>asaivi background imeonekana mara moja tu na picha imepelekwa mbali na maandishi.</p>

<p>bla blaa bla blaa bla blaa bla blaa</p>

<p>bla blaa bla blaa bla blaa bla blaa</p>


</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/30/9.html


<file>

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


Itaendelea …….


CSS->(CSS3)..
 
Naomba radhi kwakua Leo hatuto soma mbaka kesho. Napia nawatakia sikukuu njema marafiki
 
karibuni marafiki katika sehem nyingine ya htmlna css, katika sehem hii tutajifunza jinsi ya uwekaji wa border kwenye vipengele vyetu.


CSS Borders

Properties za border za CSS zina kuruhusu kuweka mtindo, upana na rangi kwenye kipengele chenye border.

Boder in properties tatu :

1. Boder-style

2. Border- width

3. Border-color


Border Style

Border-style property inaeleza mtindo wa aina gani wa kuonesha.

Thamani zifuatazo zina ruhusiwa:

· Dotted – inaifanya border iwe na vidoti

· Dashed – inaifanya border iwe desh

· Solid – inaweka border iwe solid

· Double – inaweka border mbili

· Groove – inaweka 3D grooved border – effect inategemea na rangi ya border

· Ridge – inaweka 3D ridge border - effect inategemea na rangi ya border

· Insert – inaweka 3D insert border - effect inategemea na rangi ya border

· Outset – inaweka 3D outset border - effect inategemea na rangi ya border

· None – inaeleza kuwa border lisiwepo

· Hidden – inaeleza border liwe lime jificha


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

<p class="dotted">dotted border.</p>

<p class="dashed">dashed border.</p>

<p class="solid"> solid border.</p>

<p class="double"> double border.</p>

<p class="groove"> groove border.</p>

<p class="ridge"> ridge border.</p>

<p class="inset"> inset border.</p>

<p class="outset"> outset border.</p>

<p class="none">No border.</p>

<p class="hidden"> hidden border.</p>

<p class="mix"> mixed border.</p>


</body>

</html>


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


Note : kama umeweka border bila kuweka mtindo basi border halito fanya kazi


Border Width

Property ya border width ina toa upana wa border nne.

Width ina weza kuwekwa kwa njia zifuatazo(px,em,cm,pt nk). Au kwakutumia thamani ambazo zipo:thin,medium, au thick.

Border width property inaweza kuwa na thamani kuanzia moja hadi nne(kwaajiri ya top border,right border,bottom border na left border).


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p.moja {

border-style: solid;

border-width: 5px;

}


p.mbili {

border-style: solid;

border-width: medium;

}


p.tatu {

border-style: dotted;

border-width: 2px;

}


p.nne {

border-style: dotted;

border-width: thick;

}


p.tano {

border-style: double;

border-width: 15px;

}


p.sita {

border-style: double;

border-width: thick;

}


p.saba {

border-style: solid;

border-width: 2px 10px 4px 20px;

}

</style>

</head>

<body>

<p class="moja">blabla.</p>

<p class="mbili"> blabla.</p>

<p class="tatu"> blabla.</p>

<p class="nne"> blabla.</p>

<p class="tano"> blabla.</p>

<p class="sita"> blabla.</p>

<p class="saba"> blabla.</p>

</body>

</html>

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


Border Color

Border color property inatumika kuweka rangi ya border nne.

Rangi inaweza kuwekwa kwa njia ya:

· Jina la rangi kama “blue”

· Kwa kutumia HEX kama “#ffa500”

· Kwa njia ya RGB kama (255,10,0)

· Transparent (haionekani)


Property ya border color inaweza kuwa na thamani kuanzia moja hadi nne (kwa top border,right border,left border ,bottom border);

Kama border-color haija wekwa ina rithi rangi ya kipengele


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p.moja {

border-style: solid;

border-color: red;

}


p.mbili {

border-style: solid;

border-color: green;

}


p.tatu {

border-style: solid;

border-color: red green blue yellow;

}

</style>

</head>

<body>

<p class="moja"> solid red border</p>

<p class="mbili"> solid green border</p>

<p class="tatu"> solid border yenye rangi nyingi</p>

</body>

</html>

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


Inawezekana kuweka border mbali mbali kwa kila upande.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p {

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: dotted;

border-left-style: solid;

}

</style>

</head>

<body>

<p>border mbili tofauti.</p>

</body>

</html>

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


Ufafanuzi wa border


Kama border-style property ina thamani nne:kama

· Border-style:dotted solid double dashed;

Ufafanuzi:

· Border top ni dotted

· Border right ni solid

· Border bottom ni double

· Border left ni dashed


Kama border style property ina thamani tatu. Kama:

· Border-style:dotted solid double;

o Border top ni dotted

o Border left na right ni solid

o Border bottom ni double


Kama border style property in thamani mbili.kama:

· Border-style:dotted solid;

o Border top na bottom ni dotted

o Border right na left ni solid


Kama border style property in thamani moja.kama:

· Border-style:dotted;

o Border zote nne zitakuwa dotted


Kama unavoona mifano yote hapo juu ina properties nyingi za kuzingatia wakati ukiwa una dili na borders.

Kwa baati nzuri hauitaji kuandika vyote hivo, kuna uwezekana wa kuandika properties zote kwakutumia mstari mmoja tu.

Note property ya border inaweza kufupishwa kwa properties zifuatazo tu.

· Border-width

· Border-style

· Border-color


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 5px solid orange;

}

</style>

</head>

<body>

<div>Blab la bla.</div>

</body>

</html>

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


<file>

http://www.jamiiforums.ml/tutorFiles/31.docx



Itaendelea …

Outline na display

Position na float

Inline-block

Pseudo-class

Pseudo-element

…………………………………….

Simple design

· Dropdown menus

· Image gallery

· Counters


CSS3
 
karibuni sana marafiki katika sehem hii tutajifunza jinsi ya kuchora mstari wa nnje na jinsi ya kuimiriki layout kwa kutumia display property.


CSS OUTLINE

Outline ni mstari unaochorwa kwenye kipengele au nnje ya border.
properties za outline zinatoa mtindo,rangi na upana wa outline.

Hatahivyo hii property ni tofauti na border property.Outline siyo sehem ya ukubwa wa vipengele, kwani upana na urefu wa vipengele havito hasirika na upana wa mstari ambao utakao chorwa..


Outline in properties zifuatazo

· Outline-style

· Outline-width

· Outline-color


Outline Style

Hii property inatoa mitindo ya outline.

Pia ina thamani zifuatazo :

· Dotted - inaweka dotted outline

· Dashed – inaweka dashed outline

· Solid – inaweka solid outline

· Double – inaweka double outline

· Groove – inaweka 3D groove outline

· Ridge – inaweka 3D ridge outline

· Inset – inaweka 3D inset outline

· Outset – inaweka 3D outset outline

· None – haiweki mstari wan je

· Hidden – inaweka mstari lakin unakua hauonekani


Kuanzia double – outset ili 3D ionekane inategemea na rangi ulioiweka.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 1px solid black;

outline-color:red;

}

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}

p.solid {outline-style: solid;}

p.double {outline-style: double;}

p.groove {outline-style: groove;}

p.ridge {outline-style: ridge;}

p.inset {outline-style: inset;}

p.outset {outline-style: outset;}

</style>

</head>

<body>

<p class="dotted">dotted outline</p>

<p class="dashed">dashed outline</p>

<p class="solid">solid outline</p>

<p class="double">double outline</p>

<p class="groove">groove outline</p>

<p class="ridge">ridge outline</p>

<p class="inset">inset outline</p>

<p class="outset">outset outline</p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/32/1.html


Note : property zingine hazito fanya kazi endapo hakutokua na outline-style


Outline Color

Hii property inatumika kuweka rangi ya outline

Rangi inaweza kuwekwa kwa:

· Kwa kuweka jina la rangi : “red”

· Kwa kuweka thamani za RGB : “rgb(255,0,0)”

· Kwa kutumia HEX : “#ff0000”

· Kwa kutumia color inversion(invert) ambayo inahakikisha kwamba outline inaonekana,bila kujari rangi ya nyuma.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 1px solid black;

outline-style: double;

outline-color: red;

}

</style>

</head>

<body>


<p>outline-color Property</p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/32/2.html


Outline Width

Hii property inaweka upana wa outline

Upana unaweza kuwekwa kwa ukubwa maalum(px,pt,cm,em nk) au kwakutumia thamani tatu ambazo zimesha wekwa kama:thin,medium au thick.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p {border: 1px solid black;}


p. moja {

outline-style: double;

outline-color: red;

outline-width: thick;

}


p. mbili {

outline-style: double;

outline-color: green;

outline-width: 3px;

}

</style>

</head>

<body>


<h2>outline-width Property</h2>


<p class="moja"> Blaaa blaaaaa.</p>

<p class="mbili">Blaaa blaaaaa.</p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/32/3.html


Tumeangalia njia zote za kuweka mstari nje lakini tatizo linakuja pale unapotaka kutumia njia zoteizo na uka sahau.hilo lisikupe shida kwani kuna baadhi ya property zina weza kutumika kufupisha uwingi wa mstari na mda wa kukumbuka.zifuatazo ni property ambazo zinaweza kuwekwa kama vifupisho:

· Outline-width

· Outline-style

· Outline-color


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 1px solid black;

outline: 5px dotted red;

}

</style>

</head>

<body>


<p> Blaa blaa blaaaaaaaaa blaaaaaaaaaa</p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/32/4.html


CSS DISPLAY PROPERTY

Hii ni property ya muhimu sana katika CSS kwani ndiyo inayo miliki muonekano wa kurasa na vipengele.

Hii property inaeleza kama au jinsi ya kipengele kioneshwe.kila kipengele cha HTML kina thamani yake ya kuonesha ambayo kimewekewa ,inategemea na aina ya kipengele chenyewe. Muonekano wa kawaida kwa kila kipengele ni block na inline

Hii property inaweza kuwekwa kwa kila kipengele iwe ni block elements au inline elements


Hii property ina thamani zifuatazo:

· None

· Inline

· Block

· Hidden


Display none;

Display:none; inatumika sana na javascript kuficha au kuonesha bila kufuta na kuvitengeneza.


Overriding Default display Values

Kila kipengele kina default display value.hatahivyo una weza kuvi override.

Kubadilisha kipengele kilichokuwa inline na kuwa block au block kuwa inline,inaweza ikawa na manufaa kufanya mtandao kuonekana kwaaina yake.


Kama mnavyo jua inline elements huwa zina chukua sehem halisi ya kipengele na huwa haianzagi mstari mwingine , block elements huwa zina chukua upana wote wa browser na huwa zinaanza mstari mpya.


Njia ya kawaida kukifanya kipengele kiwe inline ni kutumia kipengele cha <li> kufanya orodha usawa (horizontal menu)


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

li {

display: inline;

}

</style>

</head>

<body>


<p>kuonesha orodha usawa:</p>

<ul>

<li><a href="#" target="_blank">Kiswahili</a></li>

<li><a href="#" target="_blank">Kiingereza</a></li>

<li><a href="#" target="_blank">kichina</a></li>

</ul>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/32/5.html


Note:kuweka display property ya kipengele ina badilisha jinsi ya kipengele kinavo onekana tu. Na sio kipengele cha aina gani. Kwaiyo kipengele kilichokuwa inline na display:block; hakiruhusiwi kuwa na vipengele vilivyo kuwa block ndani yake.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

span {

display: block;

}

</style>

</head>

<body>

<span>display property na thamani ya "block" matokeo</span> <span>a line break kati ya hivi vipengele.</span>

</body>

</html>

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


Display none

Ufichaji wa kipengle/vipengele unaweza kufanyika kwa kuweka display property kuwa none.kipengele kitafichwa na kurasa itaonekana kama vile hakuna kipengele kilicho wekwa.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

h1.hidden {

display: none;

}

</style>

</head>

<body>

<h1>This is a visible heading</h1>

<h1 class="hidden">Hiki kipengele kitafichwa</h1>

<p>hiki kipengele hakito chukua hata upana wa urefu wa browser au kurasa.</p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/32/7.html

Visibility hidden

Hii nayo ni njia nyingine ya kuficha vipengele.lakini ukitumia hii njia vipengle/kipengele kitachukua nafasi hile hile iliopewa japo kuwa haionekani la kini kutakua na nafasi inayo juulisha kuna kitu.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

h1.hidden {

visibility: hidden;

}

</style>

</head>

<body>


<h1> Hiki kitaoneshwa</h1>

<h1 class="hidden">Hiki kitafichwa </h1>

<p>umeona kuwa kipengele kilivo fichwa bado kimechukua nafasi.</p>


</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/32/8.html


<file>

http://www.jamiiforums.ml/tutorFiles/32.docx



Itaendelea ………………………


Position na float
 
karibuni marafiki katika sehem nyingine ya HTML na CSS, katika sehem hii tutajifunza jinsi ya ku zi position elements.


CSS POSITION PROPERTY


Hii property inaweka bayana njia za nafasi zinazo tumika kwenye kipengele.

Kuna thamani nne tofauti za position

· Static


· Relative


· Fixed


· Absolute


Vipengele vina kuwa positioned kwakutumia top,left,right,bottom properties.Hatahivyo hizi properties hazitofanya kazi mbaka uweke property ya position . pia hizi properties zinafanya kazi tofauti tofauti inategemea na thamani ya position.


Position:static

Vipengele vya html vinakuwa static by default.

Vipengele vilivyo kuwa static havi hasiriki na top,left,right na bottom properties.

Kipengele kilichokuwa position:static; hakiwekwi kwanjia maalum yoyote, daima vitakuwa kawaida vikifata uenendo wa kurasa.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div.static {

position: static;

border: 3px solid #ffa500;

}

</style>

</head>

<body>

<h2>position: static;</h2>

<div class="static">

Hiki kipengele cha div kina position: static;

</div>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/33/1.html


Position:relative

Kipengele kilicho kuwa na position:relative kinawekwa relative kutoka kwenye position yake ya kawaida.

Kuweka top,left,right, na bottom properties zita kifanya kipengele kirekebishike/kisogee kutoka sehem yake ya kawaida.

Contents zingine hazito sogea kuziba pengo lolote lililo achwa na kipengele.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div.relative {

position: relative;

left: 30px;

border: 3px solid #73AD21;

}

</style>

</head>

<body>


<h2>position: relative;</h2>

<div class="relative">

Hiki kipengele chadiv kina position: relative;

</div>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/33/2.html


Position:fixed

Kipengele chenye position:fixed; kina wekwa relative kwa viewport, ambayo inayo maanisha hiko kipengele kita kaa pale pale kilipo wekwa hatakama kurasa ikiwa ina scrolled. Properties za top,right,left na bottom zinatumika ku position kipengele.

Kipengele kilichokuwa fixed haki achi pengo kwenye kurasa ambapo kwakawaida kinapo patikana.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 300px;

border: 10px solid #73AD21;

}

</style>

</head>

<body>


<h2>position: fixed;</h2>

<div class="fixed">

Hiki kipengele cha div kina position: fixed;

</div>


</body>

</html>

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


Position:absolute;

Kipengele chenye position:absolute; kinawekwa relative kwa kipengele kilicho kuwa karibu / ancestor zidi ya kuwekwa relative kwa viewport , kama fixed).

Hatahivi kama kipengele kilicho wekwa position:absolute hakina mkubwa wake, kita tumia body ya nyaraka na kita sogea kuringana na kurasa invo kuwa scrolled.

Note: kipengele kinachokuwa “positioned” ni kipengele ambacho position yake ni chochote isipokuwa “static”;


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div.relative {

position: relative;

width: 400px;

height: 200px;

border: 3px solid #73AD21;

}


div.absolute {

position: absolute;

top: 80px;

right: 0;

width: 200px;

height: 100px;

border: 3px solid #73AD21;

}

</style>

</head>

<body>


<h2>position: absolute;</h2>

<div class="relative">hii div ina position: relative;

<div class="absolute">hii div ina position: absolute;</div>

</div>


</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/33/4.html


Ku Overlapping Vipengele

Wakati vipengele vikiwa positioned, vinaweza ku overlap vipengele vingine.

Property ya z-index ina toa stack order ya kipengele(kipengele kipi cha kuwa mbele ya kingine au kuwa nyuwa ya vingine).

Kipengele kinaweza kuwa na chanya au hasi stack order.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

img {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

}

</style>

</head>

<body>

<h1>Hiki ni kichwa</h1>

<img src="picha.png" width="100" height="140">

<p>kwasababu picha ina z-index ya -1 inawekwa nyuma.</p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/33/5.html

<file>

www.jamiiforums.ml/tutorFiles/33.docx


Itaendelea ………………………………………..


float na Inline-block
 
katika sehem hii nyingine ya HTML na CSS tutajifunza properties zinazo fanya website ionekane vizuri.


Float na clear

Property ya float inaeleza eidha kipengele ki float au kisi float.

Property ya clear inatumika kudhibiti tabiya ya kipengele kinacho float.


Float in thamani zifuatazo

· Left

· Right


Float property

Matumizi ya kawaida ya float inaweza kutumika ku wrap maandishi yalio kuwepo kwenye picha.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

img {

float: right;

margin: 0 0 10px 10px;

}

</style>

</head>

<body>

<p><img src="picha.gif" alt="picha" width="100" height="140">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.</p>


</body>

</html>


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


Clear property

Hii property inatumika kudhibiti tabia ya vipengele vinavyo float.

Vipengele baada ya kipengele kilicho float vita fatia karibu ya hiko kipengele.

Ili kuepuka hili tumia clear property.

Property ya clear inaeleza kuwa upande upi wa kipengele kilicho float na vipengele vingine haviruhusiwi ku float.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

.div1 {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid #73AD21;

}


.div2 {

border: 1px solid red;

}



.div3 {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid #73AD21;

}


.div4 {

border: 1px solid red;

clear: left;

}

</style>

</head>

<body>


<h2>bila clear</h2>

<div class="div1">div1</div>

<div class="div2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.</div>


<h2>kutumia clear</h2>

<div class="div3">div3</div>

<div class="div4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor </div>


</body>

</html>


www.jamiiforums.ml/tutorFiles/examples/34/2.html <


Kama kipengele ni kirefu Zaidi ya kipengele kilicho kimiliki, na kimekuwa floated,kita overflow nje ya kipengele. Ili kuweza kuidhibiti hali hii tumia

Overflow:auto; kuficha lakini uki scroll utaweza kuone kilichopo ndani.

Overflow:hidden; - kuficha urefu usionekane;

Overflow-x: - ku scroll kwenda kuria.

Overflow-y – ku scroll wima.

Overflow-x:hidden - kuficha kuscroll kuria.

Overflow-y:hidden – kuficha kuscroll wima.kurasa/kipengele hakitokuwa na uwezo wa kushuka – kita ganda sehem usika.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 3px solid #73AD21;

}


.img1 {

float: right;

}


.clearfix {

overflow: auto;

}


.img2 {

float: right;

}

</style>

</head>

<body>


<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>


<div><img class="img1" src="picha" alt="picha" width="100" height="140">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>


<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this problem:</p>


<div class="clearfix"><img class="img2" src="picha.png" alt="picha" width="100" height="140">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

</body>

</html>


www.jamiiforums.ml/tutorFiles/examples/34/3.html <


Mfano wa muonekano wa website

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 3px solid blue;

}


.clearfix {

overflow: auto;

}


nav {

float: left;

width: 200px;

border: 3px solid #73AD21;

}


section {

margin-left: 206px;

border: 3px solid red;

}

</style>

</head>

<body>


<div class="clearfix">


<nav>

<span>nav</span>

<ul>

<li><a target="_blank" href="# ">Home</a></li>

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

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

<li><a target="_blank" href="#">Mwanza</a></li>

</ul>

</nav>


<section>

<span>section</span>

<p>Notice we have put a clearfix on the div container. It is not needed in this example, but it would be if the nav element was longer than the non-floated section content.</p>

</section>


<section>

<span>section</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p>

</section>


</div>


</body>

</html>


www.jamiiforums.ml/tutorFiles/examples/34/4.html <


Thamani ya inline-block

Hii thamani inafanya kazi sawa na float,kupanga vipengele vikae kimpangilio.

Vipengele vya Inline-block vinafanana na vipengele vya inline lakini hivi vina upana na urefu.


Mfano

Ukitumia float unaitaji ku clear kipengele ukisha float.


<!DOCTYPE html>

<html>

<head>

<style>

.floating-box {

float: left;

width: 150px;

height: 75px;

margin: 10px;

border: 3px solid #73AD21;

}


.after-box {

clear: left;

border: 3px solid red;

}

</style>

</head>

<body>


<h2>njia ya zamani float</h2>


<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>


<div class="after-box">box lingine,baada floating boxes...</div>


</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/34/5.html <


Muonekano sawa utapatikana ukitumia thamani ya inline-block.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

.floating-box {

display: inline-block;

width: 150px;

height: 75px;

margin: 10px;

border: 3px solid #73AD21;

}


.after-box {

border: 3px solid red;

}

</style>

</head>

<body>


<h2>njia mpya ya kutumia inline-block</h2>


<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>


<div class="after-box">box lingine,baada floating boxes...</div>


</body>

</html>


www.jamiiforums.ml/tutorFiles/examples/34/6.html <


<file>


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


Itaendelea……………….


Pseudo-class
 
karibuni marafiki sehem hii tutajifunza classes za CSS na jinsi ya kuzitumia.


Pseudo-classes

Pseudo-classes inatumika kueleza hali maalum ya kipengele.

Mfano

· Inaweza kutumika kuweka mtindo wa kipengele wakati mouse iki over kwenye iko kipengele.

· Ku weka mtindo katika links zilizo kuwa visited na zisizokuwa visited tofauti.

· Kuweka mtindo kwenye kipengele endapo ipo focus.


Jinsi inavo wekwa.

selector😛seudo-class {
property:value;
}


anchor Pseudo-classes

links zinaweza kuoneshwa kwanjia tofauti.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

/* unvisited link */

a:link {

color: red;

}


/* visited link */

a:visited {

color: green;

}


/* mouse over link */

a:hover {

color: hotpink;

}


/* selected link */

a:active {

color: blue;

}

</style>

</head>

<body>


<p><b><a href="#" target="_blank">hii ni link</a></b></p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/35/1.html


Note:a:hover lazima ije baada ya a:link na a:visited kwenye uwekaji mtindo kwenye css ili ifanye kazi.

Note: a:active lazima iwekwe baada ya a:hover kwenye uwekwaji wa mtindo kwenye CSS ili ifanye kazi.


Pseudo-classes na CSS classes

Pseudo-classes inaweza kuunganishwa na CSS classes.

ukipeleka mouse yako kwenye link itabadilika rangi

mfano

<!DOCTYPE html>

<html>

<head>

<style>

a.highlight:hover {

color: #ff0000;

}

</style>

</head>

<body>


<p><a class="highlight" href="#">jinsi ya uwekaji </a></p>

<p><a href="#">Somo la CSS</a></p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/35/2.html

Hover kwenye <div>

Mfano wa kutumia :hover pseudo-class kwenye kipengele cha <div>.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: green;

color: white;

padding: 25px;

text-align: center;

}

div:hover {

background-color: blue;

}

</style>

</head>

<body>

<div class="mouseover">weka mouse yako hapa ntabadilika</div>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/35/3.html


:first-child Pseudo-class

:first-child ina matche kipengele kilicho wekwa chakwanza zidi ya kipengele kingine.

Mfano ufuatao una fananisha kipengele cha <p> chakwanza kati ya vipengele vingine.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p:first-child {

color: #ffa500;

}

</style>

</head>

<body>


<p>Mimi wa kwanza.</p>

<p>Mimi wa pili.</p>

</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/35/4.html


Mfano unaofatia una fananisha kipengele cha <i> cha kwanza kwenye vipengele vya <p> vyote.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p i:first-child {

color: blue;

}

</style>

</head>

<body>


<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/35/5.html


Mfano unaofatia unafananisha kipengele cha <i> kwenye vipengele vyote vya kwanza vya <p>.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p:first-child i {

color: blue;

}

</style>

</head>

<body>


<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>

</html>

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


:lang pseudo class

Pseudo-class hii inaruhusu kuweka sharia maalum kwaajiri ya lugha tofauti.

Mfano


<!DOCTYPE html>

<html>

<head>

<style>

q:lang(no) {

quotes: "~" "~";

}

</style>

</head>

<body>

<p>blaaa blaaa <q lang="no">paragraph ilio wekewa quote</q> blaaa blaaa.</p>

</body>

</html>


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


Mfano hapo juu :lang imeweka quotation marks kwenye kipengele cha q ikiwa na lang=”no’.


<file>


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


Itaendelea …………..


Pseudo-element

……………………………………………………………………………………………………….

Simple design
 
mickey.T said:
Kama wewe ni mgeni kabisa na web designing ningependekeza ujifunze WordPress kwanza utachukua only 7 days kuwa perfect katika maswala ya web designing. HTML,CSS,JavaScript, aise it will take you months or even years to be perfect.
Click to expand...
Asante kaka kwa ; ushauri
 
frankgalos said:
Karibuni marafiki katika sehemu nyingine ya HTML.Humu tutajifunza baazi ya tag na kuziangalia kiundani zaid.
Pia kwa wale wa css tutaanza kuiangalia kesho.


Vichwa vya HTML (HTML Headings).

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


Mfano.

<!DOCTYPE html>

<html>

<body>

<h1>Hii ni heading 1</h1>

<h2> Hii ni heading 2</h2>

<h3> Hii ni heading 3</h3>

<h4> Hii ni heading 4</h4>

<h5> Hii ni heading 5</h5>

<h6> Hii ni heading 6</h6>

</body>

</html>


Browsers itakavyo onesha.

Hii ni heading 1

Hii ni heading 2

Hii ni heading 3

Hii ni heading 4

Hii ni heading 5

Hii ni heading 6

> jaribu mwenyewe <


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

Vichwa vya muhimu.

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

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

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

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


Kanuni usawa za HTML (HTML Horizontal rules).

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

Element ya hr inaweza kutumika kuachanisha yaliyomo(content).

Mfano.

<!DOCTYPE html>

<html>

<body>

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

<hr>

<p>Hii ni aya.</p>

<hr>

<p> Hii ni aya.</p>

<hr>

<p> Hii ni aya.</p>

</body>

</html>

Muonekano wake.


hr tag enaeleza kanuni usawa:


Hii ni aya.


Hii ni aya.


Hii ni aya.

> jaribu mwenyewe <

Kipengere cha <head>(kichwa).

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

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

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


Mfano.

<!DOCTYPE html>

<html>

<head>

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

<meta charset="UTF-8">

</head>

<body>


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

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


</body>

</html>

> jaribu mwenyewe <

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


Kipengele cha <title>.

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

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


Kipengele cha <meta>.

Kipengele cha <meta> nacho ni meta data.

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


Vipengele meta vya Zaidi tuta vigundua kwenye muundo wa HTML.

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

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


Tip:Ushawai kuiona website na ukawa unajiuliza wameitengenezaje. ?

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

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


Aya za HTML.

Kipengele(element) <p> kinaeleza Aya.

Mfano.

<!DOCTYPE html>

<html>

<body>

<p>Hii ni aya.</p>

<p> Hii ni aya.</p>

<p> Hii ni aya.</p>

</body>

</html>

> www.jamiiforums.ml/tutorFiles/examples/t3/4.html <

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


Muonekano wa HTML.

Huwezi kuwa na uhakika jinsi HTML inavonekana.

Screens kubwa au ndogo na resized windows zitatengeneza muonekano tofauti.

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


Mfano.

<!DOCTYPE html>

<html>

<body>


<p>

Hii aya

Ina

Mistari

mingi

</p>


<p>

Hii aya ina nafasi nyingi.

</p>


</body>

</html>

> www.jamiiforums.ml/tutorFiles/examples/t3/5.html <


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


HTML Line Breaks.


Kipengele <br> kinaeleza line break.

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


Mfano.

<!DOCTYPE html>

<html>

<body>


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


</body>

</html>
> www.jamiiforums.ml/tutorFiles/examples/t3/7.html <

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


Kipengele <pre> cha HTML.

Kipengele <pre> kinaeleza preformatted text.


Mfano.

<!DOCTYPE html>

<html>

<body>


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


<pre>

Contrary to popular belief,.

Lorem Ipsum is not simply random text.

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

making it over 2000 years old. Richard McClintock.

</pre>

</body>

</html>


Muonekano.

Contrary to popular belief,.

Lorem Ipsum is not simply random text.

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

making it over 2000 years old. Richard McClintock.

> www.jamiiforums.ml/tutorFiles/examples/t3/6.html <
Click to expand...
Mkuu tupo sambamba mambo yanaenda bigup to you endelea kutupa skills
 
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