UFAFANUZI WA TAG ZILIZOTAJWA KATIKA SOMO LA TATU.
Katika somo lililotangulia tumejifunza code tag mbalimbali, sasa katika somo hili tunakwenda kuzifanyia kazitag hizo. Kuna nyingine hatutazigusa katika somo hili. Hivyo taga nyinginezo ambazo hazitatumika katika somo hili tutaziona katika masomo yajayo.
Kwa wale wa simu Endelea kutumia App ya TrebEdit na kwa wale wa kompyuta tumia text Editor ulio nayo kama notepad, notepad plus, sublimetext na nyinginezo. Katika video hapo nimetumia text Editor ya phpstorm ili kuokoa muda zaidi.
Endelea kuzifanyia mazoezi tag hizi. Somo linalofata tutaanglia attributes na namna zinavyoweza kufanya kazi katika uandishi na utengenezaji wa website.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kicha cha faili</title>
</head>
<body> <!-- <body> inaanza hapa -->
<!-- BASIC TAG ------>
<h1>Heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading5</h5>
<h6>heading 6</h6>
<p>paragraph ya kwanza ya maudhui yako
<br>hapa nimekata msitari<br>nimeanza mpya
<br><br><br>Nimeruka nafasi 3
</p>
<hr>nimepiga msitari,<hr>
<BR><BR><BR>
<!-- FORMATIN TAG --->
<abbr title="TAasisis ya Kupambana na Kuzuia Rushwa"> TAKUKURU </abbr>
<BR><BR><BR>
<!-- ANUANI-->
<address>
IT MANAGER<BR>
BONGOCLASS.COM<BR>
P.O.BOX 30<br>
PANGANI
</address>
<BR><BR><BR>
<!-- BOLD -->
fano wa ku<B>bold</B>maandishi
<BR><BR><BR>
<!-- badili mwelekeo wa maandishi -->
<p>www.bongoclass.com</p>
<bdo dir="rtl">www.bongoclass.com</bdo>
<BR><BR><BR>
<!-- kunukuu kifungu cha habari -->
<p>Mwalimu Nyerere alisema</p>
<blockquote>
Madam Speaker and, I think I may say, Comrade President and Comrade Vice President, ladies
and gentlemen. I have told you already how I felt when you asked me to come and talk here. And
then I got the message that you were coming.
</blockquote>
<!-- kunukuu kifungu kidogo -->
Mwalimu alisema <q>Madam Speaker and, I think I may say, Comrade President and Comrade Vice President, ladies
and gentlemen.</q>
<BR><BR><BR>
<!-- maandishi yaliyokatwa -->
<p>maandih haya <del>yamekatwa</del> pia haya nayo <s>yamekatwa</s> na haya <ins>yameingizwa</ins>
na haya <u>yapo underline, yamepigiwa msitari</u> na haya <mark>yamechaguliwa (highlite)</mark>
na haya <strong>yamekolezwa</strong>na haya <em>yamewekewa msisitizo</em> na haya yamefanyiwa <i>italics</i>
na haya ni <small>madogo</small> yaani small</p>
<BR><BR><BR>
<!-- progress -->
<progress>32</progress><br>
<label>Inapakuwa</label>
<progress id="file" value="70" max="100">90%</progress>
<BR><BR><BR>
<!-- kutoa muonekano kama unaouona kwenye code-->
<pre>
sungura afahamika ujanja kajijazia
wenzake ana wacheka sungura kuwazomea
</pre>
Ayo maandishi hapo juu kama ningetumia tag ya p muonekano wake ungekuwa hivi:-
<p>
sungura afahamika ujanja kajijazia
wenzake ana wacheka sungura kuwazomea
</p>
<br><br>
<!-- kutumia herufi za kupandana-->
<span>Maji hutambulika kama H</span><sub>2</sub>O na mbili kioeo cha tatu huandikwa 2<sup>3</sup>
<BR><BR><BR>
<!--- kutumia variable -->
<p>kanuni ya mraba ni <var>Urefu</var> X <var>upana</var> au <var>Ur</var> X <var>Up</var></p>
<br><br><br>
<!-- kuweka list Orodha hii hina namba-->
tumejifunza yafuatayo:-
<ul>
<li>HTMK</li>
<LI>PHP</LI>
<li>Java</li>
<li>python</li>
</ul>
<!-- orodha hii ina namba -->
Pia tutajifunza na haya:-
<ol>
<li>database</li>
<li>blog</li>
<li>marketing</li>
<li>affiliate programs</li>
</ol>
<!--- orodha ya ufafanuzi --->
tumejifunza vifuatavyo:-
<dl>
<dt>HTML</dt><dd>HyperText markup language</dd>
<dt>CSS</dt><dd>Cascading Style Sheet</dd>
<dt>PHP</dt><dd>Hypertext Preprocessor</dd>
</dl>
<!-- kuchora jedwali -->
<br><br><br>
<h1>kuchora majedwali</h1>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>mafunzo</th>
<th>Muda</th>
</tr>
<tr>
<td>HTML</td>
<td>2 week</td>
</tr>
<tr>
<td>database</td>
<td>2 weeks</td>
</tr>
</table>
<br><br><br>
<!-- kuficha taarifa za ziada-->
<h1>Kuweka taarifa za zida</h1>
<details>
<summary>IT manager kutoka bongoclass ametangaza zawadi nono kwawashiriki wa shindano</summary>
<p>Hayo ameyasema jana katika somo la tatu la mafunzozo ya HTML. washindi wanatarajiwa kupewa zawadi nino
ikiwepo fedha taslim</p>
</details>
<br><br>
<!-- kujaza fomu-->
<form>
<label>Name</label>
<input type="text" placeholder="Enter your name"><br>
<label>Email</label>
<input type="email" placeholder="Ente your Email"><br>
<button>submit</button>
</form>
<br><br>
<!-- kutumia image -->
<img src="name.png" alt="image">
</body>
</html>
Unaweza kuangalia video ya somo hili hapa chini namna ambavyo unaweza kucode kwa kutumia tag hizi:-
https://youtu.be/xNK2uMbwizU
