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:-
- Kuweka picha
- Kuweka rangi
- Kuweka linki
- Kupangilia position na alignment ya maandishi
- Kuongeza ukubwa wa herufi
- 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:
- 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.
- 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.
- Baada ya hapo utakopi code nitakazozileta hapo chini kwenye faili hili la staili.html kisha sevu.
- Utapreview kwa kubofya kitufe cha kuplay.
- Endelea na somo sasa kuona namna ambavyo code zinavyofanya kazi
UFAFANUZI WA CODE ZILIZOTUMIKA:
- 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...
Umeionaje Makala hii.. ?
Share On:
👉1 Kitau cha Fiqh 👉2 Kitabu cha Afya 👉3 Madrasa kiganjani 👉4 web hosting 👉5 kitabu cha Simulizi 👉6 Bongolite - Game zone - Play free game
Post zinazofanana:
HTML somo la 17: Jinsi ya kuunganisha HTML na CSS au JavaScript
Katika somo hili utakwend akujifunz ahatuwa kwa hatuwa jinsi ya Kuunganisha HTML na CSS au JavaScript
Soma Zaidi...HTML - somo la 1: Maana ya HTML na kazi zake
Somo hili linakufundisha maana ya HTML, kwa nini inatumika, na jinsi ya kuandaa simu au kompyuta yako kwa ajili ya kuanza kutengeneza tovuti. Pia tutatengeneza ukurasa wetu wa kwanza wa HTML hatua kwa hatua.
Soma Zaidi...HTML - somo la 13: Jinsi ya kugawa ukurasa wa HTML
Katika somo hili utajifunza jinsi ya kugawanya ukurasa wa HTML katika column
Soma Zaidi...HTML - somo la 16: Jinsi ya ku host website bure
Katika somo hili utakwenda kujifunza jinsi ya ku host website yako bila malipo
Soma Zaidi...HTML - somo la 10: Maana ya HTML attribute na jinsi zinavyofanya kazi
Katika somo hili utakwenda kijifunza kuhusu HTML attributes na jinsi ambavyo zinafanya kazi
Soma Zaidi...