katika somo hili la tano kwenye mafunzo ya HTML level 1 utajifunza jinsi ya 1.Kuweka picha 2.Kuweka rangi 3.Kuweka linki 4.Kupangilia position na alignment ya maandishi 5.Kuongeza ukubwa wa herufi 6.Kukoment
HTML SOMO LA TANO
Karibu kwa mara nyingine tena katika mafunzo yetu ya HTML na namna ya kutengeneza website (tovuti) na blog. Katika somo lililopita tuliona tag 25 muhimu zinazotumika katika kuandika document na ikawa na muonekano mzuri katika blog ama tovuti yako. Hatika somo hili tutakwenda kuona namna ya kuweka staili kwenye document yako.
Somo hili litakwenda kuangalia yafuatayo:-
1.Kuweka picha
2.Kuweka rangi
3.Kuweka linki
4.Kupangilia position na alignment ya maandishi
5.Kuongeza ukubwa wa herufi
6.Kukoment
Hakikisha umeshapitia masomo yetu manne yaliyotangulia kabla ya kuanza somo hili, hii itakupa uwanja mpana sana wa kuelewa zaidi. Kumbuka masomo haya yanaendeshwa kwa kutumia App inayotambulika kama TrebEdit, link yake utaipata kwenye somo la kwanza ama ingia playstore. Kupata masomo manne yaliyotangulia bofya link za hapo chini.
CODE ZITAKAZOTUMIKA KWENYE SOMO:
Kopi code hizi kisha pestu kwenye faili utakalolipatina staili.html. Maelezo zaidi utayapata hapo chini baada ya hizi code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>kuweka staili</title>
</head>
<body>
<h1>kuweka picha</h1>
<img src="image/P2.JPEG" WIDTH="100%">
<BR></BR>
<H2>KUWEKA RANGI</H2>
<p style="color:red"> mimi mwekundu</p>
<p style="color:green"> mimi mkijani</p>
<H1>KUWEKA LINK</H1>
<a href="tag.html">tag 25, bofya hapa</a><BR></BR>
<a href="index.html">go to home page</a>
<br><br>
<H1>
Kuongeza ukubwa wa maneno</H1>
<b style="font-size:100">mimi niko kawaida 100%</b>
<br>
<b style="font-size:200%">Ukubwa wa 200%</b>
<br>
<b style="font-size:300%">Ukubwa wa 300%</b>
<br>
<b style="font-size:50%">ukubwa wa 50%</b>
<BR><BR></BR></BR>
<p style="text-align:center;">Nipo kati</p>
<br>
<p style="text-align:left;">Nipo kushoto</p>
<br>
<p style="text-align:right;">Nipo kulia</p>
<br>
<p style="text-align:justify;">Nipo Nimejaa</p>
<br><br>
<h1>KUKOMENT</H1>
<!--- WEKA KOMENT HAPA -->
</body>
</html>
MAANDALIZI HA SOMO:
Kama tayari App ya Treb Edit unayo:
1.Ingia kwenye App ya Trebedit, nenda menu kisha kwenye project yako bofya kwenye jina hilo, ingia kwenye folda la image, create file, kisha import file, chaguwa picha moja uiclick. Rudi nyuma utaiona picha yako ipo kwenye folda la image.
2.Kwenye folda kuu la project yako create file kkisha lipe jina la “staili.html”. hivyo kwenye folda lako kuu kutakuwa na mafaili matatu moja ni lile na index.html, jingine ni la tag.html na la mwisho litakuwa hili la staili.html. Huwenda ukawa umeweka mafaili mengine ya html. Hakuna shida.
3.Baada ya hapo utakopi code nitakazozileta hapo chini kwenye faili hili la staili.html kisha sevu.
4.Utapreview kwa kubofya kitufe cha kuplay.
5.Endelea na somo sasa kuona namna ambavyo code zinavyofanya kazi
UFAFANUZI WA CODE ZILIZOTUMIKA:
1.Kuweka Picha
Kuweka picha kwenye faili la html tunatumiatag hii <img kisha unaweka source yaani chanzo ambacho hiyopicha itakuwepo. Utafanya hivi kwa kutumia src=” ” ndani ya hizo fungasemi na funguwa semiutaweka jina la faili au picha na jina la folda lilipo kwa mfano picha niliotumiamimi itaitwa P2 na ipokatika fomati ya jpeg, hivyo inasomoka kama P2.jpeg. Ukiweka na jina la folda ilipo utapata image/P2.pjeg. Hivyo tag nzima itasomeka hivi
<img src=”image/P2.jpeg”>
Hiyo tupu inatosha kuweka icha yako na ikaonekana. Utaona kuna code nimeziongeza kwa ajili ya kupunguza upana wa picha na kuitaka ujae tu kwenye ukurasa bila ya kuzidi. Hivyo nikaongeza width=”100%”> hii kwa ajili ya kuifanya upana wa picha usiwe wa kupitiliza. Hivyo code nzima itasomeka hivi:
<img src=”image/P2.jpeg” width=”100%”> Angalia code na picha nilizoweka.
2.Kuweka rangi
Ili uweke rangi unatakiwa kutumia tag ya <style> ndani ya tag nyingine kwa mfano kwenye tag ya <p> ama <h1> kicha utaweka alama ya = na kutaja rangi unayotaka. Mfano:-
<p style="color:green"> mimi mkijani</p>
Hakikisha unaacha nafasi kutoka tag ya kwanza na tag ya style mfano <p style=” usijefanya <pstyle=” hii haitakupa matokeo mazuri. Unataja jina la rangi ndani ya alama za kufuga na kufunguwa semi mfano “color:green”>. angalia tag ya hapo juu vyema. Unaweza kubadili rangi unayotaka wewe angalia kwenye code hapo chini ama kwenye picha.
3.Kuweka link.
Kuweka linko ni kuunganisha ukurasa mmoja na kurasa nyingine. Mfano ni pale unapoweka linki lika mtu anabofya hiyo linki na inampeleka ukurasa mwingine. Tag inayotumika ni hii<a> kama tulivyoona kwenye rangi hapo juu hapa tunatumia href=”” tunaweka jina la kurasa tunayotaka mtu akiclick aende, jinalikae ndani ya fungua semi izo. Kisha utamaliza na jina la lin, (link text) ni maandishi ambayo mtu atayaona kisha ataclick. Mfano wa code ya kuweka link
< a href=”tag.html”>bofya hapa</a> ukibofya hapa utapelekwa kwenye faili lililozungumzia tag kwenye project yako, kama tulienda sawa toka somo la kwanza. Usisahau kuwacha nafasi kati ya <a na href usijefanya hivi <ahref ni kosa. Jina lazima liandikwe na fmati yake kama .html. Kama faili lopo kwenye folda lake, fanya kama tulivyofanya kwenye picha. Mfano kama faili lipo kwenye folda linaitwa php hivyo link itakuwa <a href=”php/tag.html”>
4.Kuongeza ukubwa wa maneno tunatumia <stayle> kisha font-size. Font-size maana yake ni font size au ukubwa wa maandishi kwa muonekano. Ni rahisi kutumia asilimoa mfano unataka kukuza maandishi kwa asilimia 100% ama 200%, 300%, ama unayapunguza kwa 50% ama 10%. kwa mfano
<b style="font-size:200">Ukubwa wa 200%</b>
5.Kuweka mpangilio
Hapa ni pale tunapoamuwa maandishi yaanzie upande gani ama yakae wapi. Kwa mfano unapoandika unataka baadhi ya maandishi yakae katikati. Na mengine yakae kuanzia kushoto ama yaanzie kulia kama unapoandika kiarabu. Hata hivyo unaweza kutaka yajae kwenye faili. Kwa wale watumiaji wa microsoft office utanipata vyema.
Kufanya hivi tunatumia style kisha text-align kumaanisha text alignment.kisha utaeleza yakae wapi center, ama left ama right ama justify. Mfano:
Maandishi haya tatakuwa kati
<b style="text-align:center">Nipo kati</b>
Maandishi haya yataanzia kushito
<b style="text-align:left">Nipo kushoto</b>
Haya yataanzia kulia
<b style="text-align:right">Nipo kulia</b>
Haya yatajaa kati (justify)
<b style="text-align:justify">Nipo Nimejaa</b>
Kukomenti ni kuandika kumbukumbu ya code kwenye faili. Kumbukumbu hizi hazifanyiwi kazi na kompyuta yaani hazitaonekana na mtumiaji wa ukurasa huo. Katika ukurasa nikiweka komoent hazitaonekana na watumuaji. Katika html comment huwekwa kati ya <!-- na --> hivyo maandishi yeyote yatakayokuwa kati ya tag hizo hayataonekana na mtumiaji wa website ama blog hiyo
Mfano wa koment
<!-- weka koment hapa -->
Ndugu msomaji wetu, kama umekuwa ukifatilia somo hili toka mwanzo, nikueleze tu bila ya kufanyia mazoezi code hizi ni rahisi lakini hutoweza kuzifahamu. Fanyia mazoezi, pata changamoto uliza maswali, hapo tutaenda pamoja. Mapaka sasa tumebakiwa na masomo matatu kumaliza mafuzno haya (basic). baada ya kumaliza mafunzo haya tutaweka wensite yetu mtandaoni, na kila mshiriki wa somo hili atapata mafuzno hayo ya kuweka webbsite yake mwenyewe mtandaono, bure bila malipo.
Usikose somo la sita, litakaloangaliana namna ya kuweka menyu katika kurasa ya html, backgrounda color, na kufanya failili lakoliwe responsive, yaanilisipoteze muonekano mzuri kulnganna nifaa kitakachotumika.
Mafunzo haya yamekujia kwa hisani ya:
Bongoclass.com
Web: www.bongoclass.com
Emaili: mafunzo@bongoclass.com
Je! umeipenda hii post?
Ndio Hapana Save post
Rajabu 
Tarehe 2024-05-10 14:53:23 Topic: Tehama
Main: Post
File: Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 2013
Sponsored links
👉1 kitabu cha Simulizi
👉2 Simulizi za Hadithi Audio
👉3 Kitau cha Fiqh
👉4 Madrasa kiganjani
👉5 Kitabu cha Afya
👉6 Sira ya Mtume Muhammad (s.a.w)
Mafunzo ya php level 1 somo la kwanza (1)
Karibu kwenye mafunzo ya PHP level 1 na hili ni somo la kwanza. Hapa utajifunza maana ya php, inavyofanya kazi pamoja na historia yake kwa ufupi Soma Zaidi...
Mafunzo ya Database MySQL database somo la 10
Huu ni muendelezo wa mafunzo ya Database kwa kutumia MySQL na hili ni somo la 10. katika somo hili tutakwenda kuendelea namna ya kupangilia muonekano wa data zako kwenye database. Soma Zaidi...
Mafunzo ya HTML level 1 somo la 5 (HTML basic level FOR BEGINNERS)
katika somo hili la tano kwenye mafunzo ya HTML level 1 utajifunza jinsi ya 1.Kuweka picha
2.Kuweka rangi
3.Kuweka linki
4.Kupangilia position na alignment ya maandishi
5.Kuongeza ukubwa wa herufi
6.Kukoment Soma Zaidi...
Mafunzo ya DATABASE MYSQL na SQL somo la 1
Karibu tena katika mafunzo yetu, na huu ni mwanzo wa mafunzoya DATABASE kwa kutumia MYSQL kwa lugha ya kiswahili. Na hili ni somo la kwanza, katka somo hili utajifunza jinsi ya kuandaa kifaa chako kwa ajili ya mafunzo. Soma Zaidi...
PHP level 1 somo la nane (8)
Hapa utajifunza utofauti kati ya php constant na variable. Na hili ni somo la nane katika mfululizo wa masomo haya ya php level 1. Soma Zaidi...
Mafunzo ya DATABASE - MySQL database somo la 8
Huuu ni muendeleo wa mafunzo ya database kwa lugha ya kiswahili, na hili ni somo la nane. Katika somo hli utajifunza namna ya kuweka taarifa kwenye database, kuzfuta na kuziediti yaani kuzifanyia marekebisho. Soma Zaidi...
Mafunzo ya HTML level 1 somo la 4 (HTML basic level FOR BEGINNERS)
Hili ni somo la nne katika mafunzo ya html basic level. Hapa tutakwenda kuona jinsi ya kuzifanyia kazi tag ambazo umejifunza katika somo lililotangulia. Soma Zaidi...
PHP level 1 somo la tisa (9).
Somo la nane mafunzo ya php, katika somo hili utajifunza kuhusu array na jinsi ya kutengeneza array. Soma Zaidi...
Mafunzo ya php level 1 somo la tatu (3)
hili ni somo la tatu katika masomo ya php level 1. Hapa utajifunza zaidi kuhusu variable na namna ya kuitengeneza. Soma Zaidi...
PHP level 1 somo la kumi na mbili (12) final
Mafunzo ya php level 1 somo ka 12 mwisho wa mafunzo. Hapa utaona project ambazo unaweza kufanya kutokana na mafunzo haya. Soma Zaidi...
Mafunzo ya html level 2 (html full course for beginners)
haya ni mafunzo ya HTML level 2 kwa wenye kuanza. Mafunzo haya ni muendelezo wa level 1 html. Katika course hii utajifunza mengi zaidi lu;iko level1 pia tutazidi kuboresha project yetu. Soma Zaidi...
Mafunzo ya HTML Level 2 somo la 7 (HTML FULL COURSE FOR BEGINNERS LESSON 7)
Ktika somo hili la 7 utajifunza namna ya kuandaa na kujiandaa kutengeneza website ama blog. Pia utajifunza maandalizi ya kuhost Soma Zaidi...