WEB PROGRAMMING HTML SOMO LA SITA: KUWEKA PICHA KWA WEBSITE YAKO




web programming Swahili
Utakapomaliza Somo Hili, Website yako Ionekane Kama Hivi
Mpaka sasa unafahamu vema kupitia masomo yaliyopita jinsi HTML tags zinavyofanya, na muundo mzima wa website. Tupo katikati sehemu ya <body>....</body> ambapo ndio hujazwa codes za kuleta muonekano wa website.
Katika body, ndipo pia utaweka picha au video kadri upendavyo. Katika hili la sita tunaangalia kwa undani sio tuu jinsi ya kuingiza picha bali kuziweka katika muonekano bora ili kupendezesha website yako.

1. Kuweka Picha
Tuliona katika somo la nne , HTML tag inayotumika kuingiza picha ni <img src="">. Tag hii haina cha kufungia, yaani hatutumii </img>. Mfano ili kuingiza picha katika website (zoezi la somo la tano), tuliona kuwa tulitumia code hii <img src="rainbow.jpg">.
Neno img linamaanisha Image (yaani picha), halafu neno src linamaanisha Source (Chanzo/wapi picha ilipo) hivyo src huwakilisha anuani ya wapi picha ilipo.
Kuna namna mbili za picha unazoweza kutumia kwa website yako:-
  • Picha iliyopo katika mtandao: Kutumia picha iliyopo katika mtandao ni muhimu kuandika address yote kamili ya wapi picha ilipo. Mfano: http://www.nationalgeographic.com/adventure/images/0611/tanzania.jpg
Ili kusoma anuani ya picha iliyopo internet, unachotakiwa kufanya ni kuenda mpaka kwenye picha husika, kisha right click picha husika, na chagua (click) copy image location.
Ukisha bofya copy image location, nenda sehemu yako ya img tag yako kisha right click mouse, na kubofya Paste. Matokeo yake ni kuwa na code kama hii:-
<img src="http://www.nationalgeographic.com/adventure/images/0611/tanzania.jpg">

  • Picha iliyopo katika computer yako: Kwa picha iliyopo katika computer yako, hakikisha kuwa ipo katika folder moja ambalo text document unayotumia kuandika code ya website yako pia imo. Mfano kama umetengeneza folder na kulipa jina NewWeb, basi hakikisha picha na text file vimo humo vyote. Kisha nenda kwa hilo folder na kusoma jina la picha. Hakikisha umetambua jina kamili pamoja na 'extension' ya file husika. Yaani kama jina ni rainbow.jpg, basi utatakiwa uandike jina hilo lote kama lilivyo. 
Extension ni vifupi vya maneno vinavyotambulisha aina ya picha - mfano gif, jpg na png
Hivyo kwa picha yetu yenye jina rainbow.jpg, tutaiingiza kwa code ifuatayo:-
<img src="rainbow.jpg">

2. Jinsi ya kubadili urefu na upana wa picha:
Ni rahisi sana kubadili urefu na upana wa picha yako, unachotakiwa kufanya ni kuingiza katika img tag, maneno height (Urefu) na width (Upana)  kama hivi:
<img src="rainbow.jpg" height="200" width="300">

3. Jinsi ya Kubadili Mahali picha ilipo:
 Matoleo yaliyopita ya HTML mfano HTML 4.1 iliruhusu kubadili muelekeo kwa kutumia Attribute ya Align. Mfano tungeandika code yetu hivi ili kufanya picha yetu ikae katikati ya website yetu:
 <img src="rainbow.jpg" height="200" width="300" align="center"> 

Hata hivyo kwakuwa tunajifunza HTML programming kwa ngazi ya juu kabisa kwa sasa yaani HTML 5,  hatutakiwi kutumia hiyo attribute ya align. Badala yake tunatakiwa kutumia CSS, kama hivi:-
<img src="rainbow.jpg" height="300" width="300" style="float:right" >

Maelezo zaidi kuhusu HTML 5, na CSS yatakujia katika masomo yatakayofuata. Lengo la somo hili lilikuwa ni kukuwezesha kuingiza picha vema, kubadili ukubwa wake, na kuhakikisha unaiweka picha katika sehemu uliyokusudia kama ni kati kati,ama kulia.

Somo la saba, litahusu jinsi ya kuingiza video katika website yako.
SourceCodeSwahili
Posted by Unknown
TOA MAONI YAKO HAPA CHINI

2 comments:

Subscribe to: Post Comments (Atom)