Utangulizi
HTML ni lugha ya msingi inayotumika kutengenezea kurasa za tovuti na blogu. Bila HTML hakuna website inayoonekana duniani. Unaweza kutengeneza tovuti kwa kutumia HTML pekee, kisha ukaboresha baadaye kwa kutumia CSS na JavaScript.
Katika somo hili, tunaanza kwa kukuweka tayari ili uweze kuandika code zako bila shida—iwe unatumia simu au kompyuta.
Sasa tuingie kwenye somo letu…
1. HTML ni nini?
HTML ni ufupisho wa:
-
Hypertext
-
Markup
-
Language
Ni lugha ya kimataifa inayotumiwa kutengeneza kurasa za tovuti (website pages). HTML haihitaji umiliki wa vifaa ghali; unaweza kuanza hata kwa kutumia simu yako ya mkononi.
Ikiwa una ndoto za kuanzisha blog, tovuti ya biashara au portfolio, basi uko mahali sahihi. Mafunzo haya yatakufundisha kuanzia hatua ya mwanzo kabisa hadi kutengeneza tovuti inayoweza kwenda live.
2. Vigezo vya kuanza kujifunza
Ili uweze kufanikiwa kwenye kozi hii, unahitaji:
-
Simu ya smartphone au kompyuta
-
Uwezo wa kusoma na kuandika
-
Utayari wa kujifunza
-
Umakini na ujanja
-
Kufanya mazoezi kila baada ya somo
Kozi ya msingi (Basics) itachukua wiki moja, kisha tutaendelea na hatua ya pili.
3. Namna ya kuandaa kifaa chako (Simu)
Kwa watumiaji wa simu, utatumia app inayoitwa Acode (badala ya TrebEdit kwa sababu Acode ni nyepesi na ya kisasa).
Hatua za kuandaa Acode
-
Pakua app ya Acode kwenye Play Store:
https://play.google.com/store/apps/details?id=com.foxdebug.acodefree -
Fungua Acode
-
Bofya icon ya “folder” kisha tengeneza folder jipya
-
Lipe jina mfano: html-project
-
Ndani ya hilo folder, tengeneza folder lingine liitwe images
-
Rudi kwenye folder la html-project
-
Bonyeza alama ya “+” kutengeneza faili jipya
-
Lipe jina: index.html
-
Lifungue faili hilo
-
Andika au kopia code zifuatazo:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<meta charset="UTF-8">
</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>
-
Bonyeza save
-
Bofya preview kuona matokeo
Hongera! Huo ndio ukurasa wako wa kwanza wa HTML.
4. Namna ya kuandaa kifaa chako (Kompyuta)
Kwa watumiaji wa kompyuta tunashauri kutumia:
-
WebStorm (professional, advanced)
-
Sublime Text (rahisi, nyepesi)
Unaweza pia kutumia Notepad++ au hata Notepad ya kawaida.
Hatua za kuandaa mazingira
-
Tengeneza folder kwenye desktop, lipe jina: website2
-
Ndani ya hilo folder tengeneza folder lingine: images
-
Rudi kwenye folder la website2
-
Tengeneza faili jipya (New File)
-
Paste code hizi hapa chini
-
Save kwa jina: index.html
-
Fungua faili hilo kwa kutumia browser mfano: Chrome
Code ya mwanzo
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This is my first website">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Welcome to my brand new website.</p>
<a href="http://www.google.com">Google</a>
</body>
</html>
Ukilifungua kwenye browser utaona ukurasa wako wa kwanza ukiwa tayari.
Hitimisho
-
HTML ni lugha ya msingi ya kutengeneza tovuti
-
Unaweza kuandika HTML kwa kutumia simu au kompyuta
-
Simu tumia Acode, kompyuta tumia WebStorm au Sublime Text
-
Leo umefanikiwa kutengeneza ukurasa wako wa kwanza wa HTML
-
Somo linalofuata tutajifunza maelezo ya kila code tulizotumia