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 Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 1723
Sponsored links
👉1 Madrasa kiganjani
👉2 Kitabu cha Afya
👉3 Kitau cha Fiqh
👉4 kitabu cha Simulizi
PHP level 11 somo la kumi na moja (11)
Katika somo hilivutajifunza namna ya kutumia HTML form. Namna ya kuookea taarifa kutoka kwenye madodoso ya html form. Soma Zaidi...
Mafunzo ya database MySQL - DATABASE somo la 6
Huu ni muendelezo wa mafunzo ya database kwa kutumia MySQL na hili ni somo la 6. Katika somo hili tutakwenda kuona jinsi ya kutengeneza table kwa kutumia MySQL na kwa kutuma SQL. Soma Zaidi...
Php level 1 somo la saba (7)
Hili ni somo la saba, mafunzo ya php level 1. Katika somo hili utajifunza jinsi ya kuandika function yako mwenyewe. Soma Zaidi...
Mafunzo ya HTML Level 1 somo la 2 for beginner (html full course for beginners)
Somo la pili katika mafunzo ya HTML level 2. Katika somo hili utajifunza maana ya HTML pamoja na historia yake fupi. 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...
Mafunzo ya HTML Level 2 somo la 6 (HTML FULL COURSE FOR BEGINNERS LESSON 6)
Katika somo hili la 6 mafunzo ya HTML level 2, tutajfunza namna ya kugawa ukurasa wa wavuti wa html. 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 somo la 7
Mafunzo ya database kwa utumia software ya MySQL kwa lugha ya kiswahili na hili ni somo la 7. Soma Zaidi...
Mafunzo ya HTML kwa wenye kuanza (basic level)
Huu ni utangalizi wa mafunzo ya HTML kwa wenye kuanza level ya kwanza kwa lugha ya kiswahili. Haapa utapata msingi wa kuweza kutengeneza tovuti na blog. Soma Zaidi...
Mafunzo ya HTML level 1 somo la 1 (HTML basic level FOR BEGINNERS)
Haya ni mafunzo ya HTML kwa wanaoanza level ya kwanza, na hili ni somo la kwanza katika masomo 8 yatakayokujia katika mtiririko wa course hii. Soma Zaidi...
Mafunzo ya HTML level 1 somo la 3 (HTML basic level FOR BEGINNERS)
Hili ni somo la Tatu katika mfululizo wetu wa mafunzo ya HTML kwa basic level kwa wanaoanza kujifunza. Hapa tutakwenda kujifunza tag za html ambazo huwa zinatumika katika uandishi. Soma Zaidi...
Mafunzo ya HTML Level 2 somo la 4 (HTML FULL COURSE FOR BEGINNERS LESSON 4)
Karibu tena katika somo la nne la mafunzo ya HTML level2 html full course for beginners. Katika somo hili utajifunza kuhusu attributes na namna zinavyofanya kazi Soma Zaidi...