picha

HTML-somo la 5: Jinsi ya kupangilia munekano wa maudhui kwenye website

Katika somo hili utajifunza Kuweka picha Kuweka rangi Kuweka linki Kupangilia position na alignment ya maandishi Kuongeza ukubwa wa herufi Kukoment

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. Kama unatumia kompyuta tumia notepad ama text editor yoyote unayotumia kuandika code.
  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...

Ingia sasa ili uweze kusoma makala hii yote.

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

       
Author: Rajabu image Tarehe: 2024-05-10 14:53:23 Topic: HTML Main: Masomo File: Download PDF Views 1469

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Simulizi za Hadithi Audio     👉2 Bongolite - Game zone - Play free game     👉3 Dua za Mitume na Manabii     👉4 kitabu cha Simulizi     👉5 Tafasiri ya Riyadh Swalihina     👉6 web hosting    

Post zinazofanana:

Je, Kuchaji Simu Usiku Kucha Ni Salama?

Je, ni salama kuacha simu kwenye chaji usiku kucha unapolala? Watu wengi wanaamini kuwa tabia hii inalipua simu au kuharibu betri kabisa. Katika makala hii, utajifunza ukweli wa kisayansi kuhusu simu za kisasa, jinsi mifumo ya usalama inavyofanya kazi, na mbinu rahisi za kurefusha maisha ya betri yako bila hofu. Soma ujue jinsi ya kulinda simu yako leo!

Soma Zaidi...
Jinsi ya Kutambua Kama Memory Card Imeharibika

Memory card (kadi ya kumbukumbu) ni kifaa kidogo kinachotunza vitu vyetu vya thamani kama picha, video, nyimbo na nyaraka muhimu katika simu au kamera. Hata hivyo, vifaa hivi mara nyingi huharibika bila kutoa taarifa. Makala hii imelenga kukusaidia wewe mtumiaji wa kawaida utambue kirahisi dalili za memory card iliyokufa au inayoelekea kuharibika. Utajifunza ishara za wazi kama faili kupotea, simu kuwa nzito, au ujumbe wa makosa (errors). Pia, tumekuwekea hatua rahisi za kufanya ili kulinda data zako zisipotee kabisa na jinsi ya kuepuka kununua kadi feki. Kila kitu kimeelekezwa kwa lugha rahisi ya Kiswahili isiyo na maneno magumu ya kiteknolojia.

Soma Zaidi...
Jinsi ya Kutatua Tatizo la Mtandao wa Simu

Posti hii inatoa mwongozo rahisi na wa hatua kwa hatua kuhusu jinsi ya kurekebisha matatizo ya mtandao kwenye simu yako ya mkononi. Umejifunza njia za haraka kama kuwasha ‘Upepo’ (Flight Mode), kuwasha upya simu, na kuangalia kadi ya SIM ili kurudisha mawasiliano haraka bila kuhitaji fundi.

Soma Zaidi...
HTML - somo la 8: Mgawanyiko wa Tag za HTML na kazi zake

Katika somo hili tunakwenda kugawanya tag za HTML, pia nitakwenda kukuletea tag 70 za HTML

Soma Zaidi...
Jinsi ya Kuweka Password Imara

Katika maisha ya kisasa, matumizi ya simu janja na intaneti yamekuwa sehemu muhimu ya shughuli zetu za kila siku. Watu hutumia akaunti za mtandaoni kwa mawasiliano, biashara, masomo, huduma za kifedha na kuhifadhi taarifa binafsi. Kila akaunti inahitaji ulinzi, na njia ya kwanza ya ulinzi ni kutumia password au nenosiri imara. Password imara husaidia kuzuia watu wasio na ruhusa kuingia kwenye akaunti zako na kutumia taarifa zako vibaya. Hata hivyo, watu wengi bado hutumia password rahisi kama majina yao, tarehe za kuzaliwa au namba zinazofuatana kama 123456. Aina hii ya password ni rahisi kugunduliwa na inaweza kuweka taarifa zako katika hatari. Makala hii inaeleza kwa lugha rahisi jinsi ya kuweka password imara, umuhimu wa kuwa na nenosiri salama, makosa ya kuepuka na njia bora za kulinda akaunti zako mtandaoni. Lengo ni kumsaidia kila mtu, hata asiye na ujuzi mkubwa wa teknolojia, kuelewa na kutumia njia rahisi za kuongeza usalama wa taarifa zake

Soma Zaidi...
HTML - somo la 15: Jinsi ya kutengeneza website kwa kutumia HTML

Katika somo hili tutakwenda kutengeneza website yetu kutoka mwanzo hadi mwisho

Soma Zaidi...