Nimekuandikia somo lote upya, kwa mpangilio mzuri, lugha safi, maelezo yaliyonyooka na mtiririko unaoeleweka. Sauti yake ni rafiki, ya ufundishaji na inaendelea na mtiririko wa somo la kwanza. Hakuna herufi kubwa tupu kwenye vichwa (kama ulivyotaka).
Unaweza kubandika moja kwa moja kwenye Facebook Group yako au blog.

Somo la pili: utangulizi wa HTML na mpangilio wa faili

Karibu tena kwenye mafunzo ya HTML.
Hili ni somo letu la pili katika mfululizo wetu wa kutengeneza tovuti kwa kutumia simu au kompyuta.
Kama hukupata somo la kwanza, unaweza kulisoma kupitia link hii:
https://web.facebook.com/groups/androbongo/permalink/568341711186808/

HTML ni nini?

HTML ni kifupisho cha maneno Hypertext Markup Language.
Hii ni lugha maalum ya kompyuta inayotumiwa kutengeneza kurasa za tovuti (web pages) na blog. Ni rahisi kujifunza, ndiyo maana hutumiwa hata na wanaoanza safari ya web development.

HTML ndiyo msingi wa kila ukurasa unaouona mtandaoni. Facebook, Google, blogs mbalimbali — zote zinatumia HTML pamoja na lugha nyingine.

HTML inafanya kazi gani?

  1. Kutengeneza muonekano wa ukurasa wa tovuti.

  2. Kupangilia maandishi, vichwa vya habari, picha na vipengele mbalimbali.

  3. Kutengeneza sehemu ya mbele ya tovuti (front-end) ambayo mtumiaji anaiona.

  4. Kutengeneza fomu za kujisajili na kukusanya taarifa.

  5. Kufanya kazi pamoja na lugha nyingine kama CSS, JavaScript, na PHP.

Je HTML ni programming language?

Hapana.
HTML ni markup language — haina logic kama if/else au loops.
Kazi yake ni kupangilia maudhui, si kufanya mahesabu au maamuzi.

HTML inafanyaje kazi kwenye blog au tovuti?

Je, unaweza kutengeneza tovuti kwa HTML pekee?

Ndiyo, unaweza kutengeneza tovuti ya kawaida kwa HTML pekee.
Lakini kama unataka blog yenye uwezo wa kupost, kucomment, kulike n.k., utahitaji HTML pamoja na PHP, CSS, na database kama MySQL.

Lengo la mafunzo haya

Tuanze somo letu la leo

Kwa kuwa kwenye somo la kwanza uliandaa kifaa chako na ukaweza kutengeneza faili la kwanza la index.html, sasa tunaendelea kutoka pale ulipoishia.

Kama unatumia simu (TrebEdit)

Fungua:
Menu → Workspace → Project → index.html

Kama unatumia kompyuta

Tumia:

Code tulizotumia kwenye somo la kwanza

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home Page</title>
</head>

<body>
<h1>Mafunzo ya HTML</h1>
<h2><u>Jifunze bure</u></h2>

<p>Haya ni mafunzo ya HTML kwa kutumia simu</p>

<br><br><br>

<i>From <br>Bongoclass</i>
</body>
</html>

Mpangilio wa faili la HTML

Kila faili la HTML huwa na sehemu kuu mbili:

1. Sehemu ya <head>

Sehemu hii haionyeshi maudhui kwenye ukurasa wa tovuti.
Huweka taarifa muhimu kama:

Mfano:

<head>
<title>Home Page</title>
</head>

2. Sehemu ya <body>

Hapa ndipo maudhui yote ya ukurasa huwekwa.
Mtumiaji wa blog au tovuti ataona kila kitu kilichomo humu:

Mfano:

<body>
<h1>Mafunzo ya HTML</h1>
<p>Karibu kwenye somo letu.</p>
</body>

Ufafanuzi wa code tulizoandika

1. <!DOCTYPE html>

Hii humwambia browser kuwa faili tunalofungua ni HTML5.

2. <html lang="en">

Hutambulisha lugha ya maudhui.
Ukidai Kiswahili tumia:

<html lang="sw">

3. <head> na </head>

Sehemu ya taarifa za faili.

4. <title>Home Page</title>

Hii ndio jina linaloonekana juu ya browser.

5. <body> na </body>

Sehemu kuu ya maudhui.

6. <h1> hadi <h6>

Vichwa vya habari.
h1 ni kubwa zaidi, h6 ni ndogo zaidi.

7. <u>

Hupigia maandishi mstari (underline).

8. <p>

Hutengeneza paragraph.

9. <br>

Huvunja mstari (new line).
Haina closing tag.

10. <i>

Hufanya maandishi yalale (italic).

Tag na Element

Tag

Ni mabano haya:

<h1>  ,  </h1>
<p>   ,  </p>

Tag za kufungua → <h1>
Tag za kufunga → </h1>

Element

Ni mkusanyiko wa:

opening tag + content + closing tag

Mfano:

<p>Haya ni mafunzo ya HTML</p>

Hii yote inaitwa element.

Mwisho wa somo

Katika somo lijalo tutajifunza tag muhimu 20 zinazotumika kila siku kwenye HTML, kama vile:

Umefika mbali sana — endelea kufanya mazoezi.

Ukitaka niendelee kuandika kwa mtiririko huu, nijulishe tu.