Navigation Menu



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

Rajabu Tarehe 2024-05-10 14:53:23 Topic: Tehama Main: Post File: Download PDF     Share On Facebook or Whatsapp Imesomwa mara 1981


Sponsored links
👉1 Kitau cha Fiqh     👉2 Madrasa kiganjani     👉3 Sira ya Mtume Muhammad (s.a.w)     👉4 Kitabu cha Afya     👉5 Simulizi za Hadithi Audio     👉6 kitabu cha Simulizi    

Post zifazofanana:-

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 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 Level 2 somo la 8 (HTML FULL COURSE FOR BEGINNERS LESSON 8)
Hili ni somo la mwisho mafunzo ya HTML level 2 (html full course for beginners) 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 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...

PHP level 1 somo la sita (6)
Katika somo hili la php level 1 somo la 6 utajifunza namna ya kutumia tarehe yaani function date() kwenye PHP 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...

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

PHP level 1 somo la tano (5)
Haya ni mafunzo ya php na hili ni somo la tano. Katika somovhili utajifunza namna ya kutengeneza functions. 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...

Mafunzo ya HTML Level 2 somo la 5 (HTML FULL COURSE FOR BEGINNERS LESSON 5)
Karibu tena katika mafunzo haya ya html level 2 na hili ni somo la 5. Katika somo hili utajifunza zaidi kuhusu kuweka style kwenye html file. Soma Zaidi...

Mafunzo ya database MySQL database somo la 9
haya ni mafunzo ya database kwa kutumia MySQl na hili ni somo la 9. katika soo hili utajifunza namna ya kusoma ama kutumia taarifa zilizomo kwenye DATABASE. Soma Zaidi...