image

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

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

Kama unahitaji kuuliza maswali Bofya hapa

Mwandhishi Tarehe 2021-10-27 Download PDF     Share On Facebook or Whatsapp Imesomwa mara 1678


Sponsored links
👉1 Kitabu cha Afya     👉2 Kitau cha Fiqh     👉3 kitabu cha Simulizi     👉4 Madrasa kiganjani    

Post zifazofanana:-

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 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 2 somo la 1 (HTML FULL COURSE FOR BEGINNERS LESSON 1)
hili ni somo la pili katika mafunzo ya HTML level 2 html full course for beginners. Katika somo hili tutaangalia utangulizi juu ya HTML na pia utajifunza faida za HTML. Soma Zaidi...

Mafunzo ya HTML level 1 somo la 7 (HTML basic level FOR BEGINNERS)
Hii ni project ya HTML ambayo imetengenezwa kulingana na mafunzo ya HTML level1. Tunatarajia project hii kuboreshwa kadiri mafunzo yanavyozidi kusonga mbele. Soma Zaidi...

PHP level 1 somo la kumi (10)
Somo la 10 mafunzo ya php level 1. Katika somo hili utajifunza kuhusu condition statement. Soma Zaidi...

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 11
huu ni muendelezo wa mafunzo ya Database klwa kutumia MySQL na hili ni somo la 11. katika somo hili tutaendelea kujifunza mpangilio wa muonekano wa data kwenye database. 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...

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

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