Jinsi ya Kujifunza HTML Hatua kwa Hatua kwa Full Code
HTML ni lugha inayotumika kutengeneza muundo wa kurasa za website. Kifupi cha HTML ni HyperText Markup Language.
HTML huonyesha browser sehemu mbalimbali za ukurasa, kama:
- Kichwa cha website
- Navigation menu
- Paragraph
- Picha
- Links
- Orodha
- Table
- Form
- Footer
Katika somo hili tutajifunza HTML hatua kwa hatua, halafu tutatengeneza website kamili ndani ya faili moja.
Hatua ya 1: Vifaa vinavyohitajika
Unahitaji:
- Kompyuta
- Browser kama Google Chrome
- Visual Studio Code au Notepad
- Folder la kuhifadhi project
Tengeneza folder lenye jina:
html_projectNdani yake tengeneza faili:
index.htmlHatua ya 2: Muundo wa msingi wa HTML
Kila ukurasa wa HTML huanza na muundo huu:
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Yangu</title>
</head>
<body>
<h1>Karibu kwenye website yangu</h1>
</body>
</html>Maana ya kila sehemu
<!DOCTYPE html>
Inaieleza browser kuwa ukurasa unatumia HTML5.
<html lang="sw">
Hii ndiyo sehemu kuu inayobeba code yote ya HTML. lang="sw" inaonyesha kuwa lugha ya ukurasa ni Kiswahili.
<head>
Hubeba taarifa za ukurasa ambazo kwa kawaida hazionekani moja kwa moja ndani ya page.
<title>
Ni jina linaloonekana kwenye tab ya browser.
<body>
Hubeba vitu vyote vinavyoonekana kwenye website.
Hatua ya 3: Headings
HTML ina headings sita:
<h1>Heading ya Kwanza</h1>
<h2>Heading ya Pili</h2>
<h3>Heading ya Tatu</h3>
<h4>Heading ya Nne</h4>
<h5>Heading ya Tano</h5>
<h6>Heading ya Sita</h6><h1> ndiyo heading muhimu zaidi. Ni vizuri ukurasa uwe na <h1> moja inayowakilisha mada kuu.
Hatua ya 4: Paragraph
Paragraph huandikwa kwa tag ya <p>:
<p>
Hii ni paragraph inayoeleza huduma zinazopatikana kwenye website yetu.
</p>Unaweza kuweka maandishi mazito kwa kutumia <strong>:
<p>
Tunatoa huduma za <strong>kutengeneza website</strong>.
</p>Hatua ya 5: Link
Link hutumia tag ya <a>:
<a href="https://www.google.com">
Fungua Google
</a>Ili link ifunguke kwenye tab mpya:
<a
href="https://www.google.com"
target="_blank"
rel="noopener noreferrer"
>
Fungua Google
</a>Mfano wa link ya WhatsApp:
<a
href="https://wa.me/255693118509"
target="_blank"
rel="noopener noreferrer"
>
Wasiliana nasi kupitia WhatsApp
</a>Hatua ya 6: Picha
Tag ya <img> hutumika kuonyesha picha:
<img
src="images/student.jpg"
alt="Mwanafunzi akisoma"
width="500"
>src ni mahali picha ilipo.
alt ni maelezo ya picha. Maelezo haya ni muhimu kwa accessibility na SEO.
Hatua ya 7: Orodha
Orodha yenye namba
<ol>
<li>Fungua account</li>
<li>Jaza taarifa</li>
<li>Tuma maombi</li>
</ol>Orodha isiyo na namba
<ul>
<li>Website development</li>
<li>System development</li>
<li>Business registration assistance</li>
</ul>Hatua ya 8: Table
Table hutumika kuonyesha taarifa kwa mistari na columns:
<table>
<thead>
<tr>
<th>Namba</th>
<th>Jina</th>
<th>Darasa</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Asha Ally</td>
<td>Form One</td>
</tr>
<tr>
<td>2</td>
<td>John Peter</td>
<td>Form Two</td>
</tr>
</tbody>
</table>Tag muhimu za table ni:
<table>— table nzima<thead>— heading za table<tbody>— taarifa za table<tr>— mstari<th>— kichwa cha column<td>— taarifa ya kawaida
Hatua ya 9: Form
Form hutumika kukusanya taarifa kutoka kwa mtumiaji:
<form>
<label>Jina Kamili</label>
<input type="text" name="name" required>
<label>Barua Pepe</label>
<input type="email" name="email" required>
<label>Ujumbe</label>
<textarea name="message"></textarea>
<button type="submit">
Tuma
</button>
</form>HTML peke yake haiwezi kuhifadhi taarifa kwenye database. Ili kuhifadhi taarifa utahitaji PHP, MySQL au teknolojia nyingine ya upande wa server.
Full Code ya Website ya HTML
Code ifuatayo inatengeneza website kamili ya Faulink ndani ya faili moja. Ina HTML na CSS.
Nakili code yote na kuiweka ndani ya index.html.
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<meta
name="description"
content="Faulink inatoa huduma za website, mifumo ya shule na usaidizi wa usajili wa biashara Tanzania."
>
<meta
name="keywords"
content="Faulink, website Tanzania, mfumo wa shule, PHP, HTML, BRELA"
>
<title>Faulink | Teknolojia na Huduma za Biashara</title>
<style>
:root {
--primary: #1d4ed8;
--primary-dark: #0f2f75;
--secondary: #0f172a;
--success: #16a34a;
--background: #f8fafc;
--white: #ffffff;
--text: #1e293b;
--muted: #64748b;
--border: #e2e8f0;
--shadow: 0 15px 40px rgba(15, 23, 42, 0.10);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--background);
color: var(--text);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
.container {
width: min(1120px, 92%);
margin: auto;
}
header {
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(
135deg,
var(--secondary),
var(--primary)
);
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.20);
}
nav {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.logo {
color: var(--white);
font-size: 24px;
font-weight: 800;
text-decoration: none;
}
.navigation {
display: flex;
align-items: center;
gap: 20px;
list-style: none;
}
.navigation a {
color: var(--white);
font-weight: 700;
text-decoration: none;
}
.navigation a:hover {
color: #bfdbfe;
}
.hero {
min-height: 520px;
display: flex;
align-items: center;
color: var(--white);
background:
linear-gradient(
rgba(15, 23, 42, 0.80),
rgba(29, 78, 216, 0.76)
),
url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=80")
center/cover;
}
.hero-content {
max-width: 720px;
padding: 70px 0;
}
.hero-label {
display: inline-block;
margin-bottom: 16px;
padding: 7px 14px;
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
font-weight: 700;
}
.hero h1 {
margin-bottom: 18px;
font-size: clamp(36px, 6vw, 64px);
line-height: 1.1;
}
.hero p {
max-width: 650px;
margin-bottom: 28px;
color: #e2e8f0;
font-size: 18px;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.button {
display: inline-block;
padding: 13px 22px;
border: 2px solid transparent;
border-radius: 12px;
font-weight: 800;
text-decoration: none;
transition: 0.2s;
}
.button:hover {
transform: translateY(-2px);
}
.button-primary {
background: var(--white);
color: var(--primary);
}
.button-outline {
border-color: rgba(255, 255, 255, 0.65);
color: var(--white);
}
.button-whatsapp {
background: var(--success);
color: var(--white);
}
section {
padding: 80px 0;
}
.section-heading {
max-width: 720px;
margin: 0 auto 40px;
text-align: center;
}
.section-heading span {
color: var(--primary);
font-weight: 800;
}
.section-heading h2 {
margin: 8px 0 12px;
color: var(--secondary);
font-size: clamp(28px, 4vw, 42px);
}
.section-heading p {
color: var(--muted);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
padding: 28px;
border: 1px solid var(--border);
border-radius: 20px;
background: var(--white);
box-shadow: var(--shadow);
transition: 0.2s;
}
.service-card:hover {
transform: translateY(-6px);
}
.service-icon {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin-bottom: 20px;
border-radius: 17px;
background: #dbeafe;
color: var(--primary);
font-size: 28px;
}
.service-card h3 {
margin-bottom: 10px;
color: var(--secondary);
}
.service-card p {
color: var(--muted);
}
.about {
background: var(--white);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 50px;
}
.about-image {
width: 100%;
min-height: 380px;
border-radius: 24px;
object-fit: cover;
box-shadow: var(--shadow);
}
.about-content h2 {
margin-bottom: 18px;
color: var(--secondary);
font-size: 38px;
}
.about-content p {
margin-bottom: 18px;
color: var(--muted);
}
.feature-list {
margin: 20px 0;
list-style: none;
}
.feature-list li {
margin-bottom: 12px;
font-weight: 700;
}
.feature-list li::before {
content: "✓";
display: inline-grid;
place-items: center;
width: 25px;
height: 25px;
margin-right: 9px;
border-radius: 50%;
background: #dcfce7;
color: var(--success);
}
.contact {
color: var(--white);
background: linear-gradient(
135deg,
var(--secondary),
var(--primary-dark)
);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.contact h2 {
margin-bottom: 15px;
font-size: 38px;
}
.contact p {
color: #cbd5e1;
}
.contact-form {
padding: 28px;
border-radius: 20px;
background: var(--white);
box-shadow: var(--shadow);
}
.form-group {
margin-bottom: 16px;
}
.contact-form label {
display: block;
margin-bottom: 6px;
color: var(--text);
font-weight: 700;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 13px 14px;
border: 1px solid var(--border);
border-radius: 11px;
font: inherit;
}
.contact-form textarea {
min-height: 120px;
resize: vertical;
}
.submit-button {
width: 100%;
padding: 14px;
border: 0;
border-radius: 11px;
background: var(--primary);
color: var(--white);
cursor: pointer;
font-size: 16px;
font-weight: 800;
}
footer {
padding: 28px 0;
background: #020617;
color: #94a3b8;
text-align: center;
}
@media (max-width: 800px) {
nav {
padding: 18px 0;
flex-direction: column;
}
.navigation {
flex-wrap: wrap;
justify-content: center;
}
.services-grid,
.about-grid,
.contact-grid {
grid-template-columns: 1fr;
}
.hero {
min-height: 460px;
}
}
@media (max-width: 500px) {
.navigation {
gap: 10px;
font-size: 14px;
}
section {
padding: 60px 0;
}
.button {
width: 100%;
text-align: center;
}
}
</style>
</head>
<body>
<header>
<nav class="container">
<a href="#mwanzo" class="logo">
FAULINK
</a>
<ul class="navigation">
<li><a href="#mwanzo">Mwanzo</a></li>
<li><a href="#huduma">Huduma</a></li>
<li><a href="#kuhusu">Kuhusu</a></li>
<li><a href="#mawasiliano">Mawasiliano</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero" id="mwanzo">
<div class="container">
<div class="hero-content">
<span class="hero-label">
Teknolojia • Elimu • Biashara
</span>
<h1>
Tunakusaidia kukuza biashara kwa teknolojia
</h1>
<p>
Faulink inatengeneza website na mifumo ya kisasa,
pamoja na kutoa usaidizi wa huduma mbalimbali za
biashara Tanzania.
</p>
<div class="button-group">
<a href="#huduma" class="button button-primary">
Angalia Huduma
</a>
<a
href="https://wa.me/255693118509?text=Habari%20Faulink%2C%20nahitaji%20maelezo%20kuhusu%20huduma%20zenu."
class="button button-whatsapp"
target="_blank"
rel="noopener noreferrer"
>
WhatsApp: 0693 118 509
</a>
</div>
</div>
</div>
</section>
<section id="huduma">
<div class="container">
<div class="section-heading">
<span>HUDUMA ZETU</span>
<h2>
Suluhisho za teknolojia na biashara
</h2>
<p>
Tunatoa huduma zenye lengo la kurahisisha kazi
na kuongeza ufanisi.
</p>
</div>
<div class="services-grid">
<article class="service-card">
<div class="service-icon">🌐</div>
<h3>Website Development</h3>
<p>
Tunatengeneza website za biashara, shule,
taasisi, blog na maduka ya mtandaoni.
</p>
</article>
<article class="service-card">
<div class="service-icon">💻</div>
<h3>System Development</h3>
<p>
Tunatengeneza mifumo ya matokeo, uhasibu,
mauzo, mikopo na usimamizi wa taarifa.
</p>
</article>
<article class="service-card">
<div class="service-icon">🏢</div>
<h3>Huduma za Biashara</h3>
<p>
Tunatoa usaidizi wa hatua za usajili wa jina
la biashara au kampuni kupitia BRELA.
</p>
</article>
</div>
</div>
</section>
<section class="about" id="kuhusu">
<div class="container about-grid">
<img
class="about-image"
src="https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1000&q=80"
alt="Wataalamu wakifanya kazi pamoja"
>
<div class="about-content">
<h2>Kuhusu Faulink</h2>
<p>
Faulink inalenga kuwasaidia watu binafsi, shule
na biashara kutumia teknolojia kuboresha huduma
zao.
</p>
<p>
Tunazingatia ubora, usalama, urahisi wa matumizi
na mahitaji halisi ya kila mteja.
</p>
<ul class="feature-list">
<li>Huduma za kitaalamu</li>
<li>Mifumo inayofanya kazi kwenye simu</li>
<li>Usaidizi baada ya kukamilisha kazi</li>
<li>Mawasiliano rahisi kupitia WhatsApp</li>
</ul>
<a
href="https://wa.me/255693118509"
class="button button-whatsapp"
target="_blank"
rel="noopener noreferrer"
>
Wasiliana Nasi
</a>
</div>
</div>
</section>
<section class="contact" id="mawasiliano">
<div class="container contact-grid">
<div>
<h2>Wasiliana na Faulink</h2>
<p>
Unaweza kutuma maelezo ya huduma unayohitaji.
Tutawasiliana nawe kwa mwongozo zaidi.
</p>
<div class="button-group" style="margin-top: 25px;">
<a
href="https://wa.me/255693118509?text=Habari%20Faulink%2C%20nahitaji%20msaada."
class="button button-whatsapp"
target="_blank"
rel="noopener noreferrer"
>
Fungua WhatsApp
</a>
</div>
</div>
<form class="contact-form">
<div class="form-group">
<label for="name">
Jina kamili
</label>
<input
type="text"
id="name"
name="name"
placeholder="Andika jina lako"
required
>
</div>
<div class="form-group">
<label for="phone">
Namba ya simu
</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="Mfano: 0712345678"
required
>
</div>
<div class="form-group">
<label for="service">
Huduma
</label>
<select id="service" name="service" required>
<option value="">Chagua huduma</option>
<option value="website">
Website Development
</option>
<option value="system">
System Development
</option>
<option value="business">
Huduma za Biashara
</option>
</select>
</div>
<div class="form-group">
<label for="message">
Ujumbe
</label>
<textarea
id="message"
name="message"
placeholder="Eleza huduma unayohitaji"
></textarea>
</div>
<button type="submit" class="submit-button">
Tuma Ujumbe
</button>
</form>
</div>
</section>
</main>
<footer>
<div class="container">
<p>
© 2026 Faulink. Haki zote zimehifadhiwa.
</p>
</div>
</footer>
</body>
</html>Jinsi ya kuendesha code
- Hifadhi code kwa jina la
index.html. - Fungua folder lilipo.
- Bonyeza mara mbili faili la
index.html. - Website itafunguka kwenye browser.
HTML haihitaji XAMPP ili kuonyesha ukurasa wa kawaida. XAMPP itahitajika utakapoanza kutumia PHP na MySQL.
Kuelewa sections za website
Header na navigation
<header>
<nav>
<a href="#">Logo</a>
<ul>
<li><a href="#huduma">Huduma</a></li>
</ul>
</nav>
</header>Header hubeba logo na navigation menu.
Main
<main>
<!-- Maudhui makuu yanawekwa hapa -->
</main><main> hubeba maudhui makuu ya ukurasa.
Section
<section id="huduma">
<h2>Huduma Zetu</h2>
</section><section> hugawanya website katika sehemu tofauti.
Article
<article>
<h3>Website Development</h3>
<p>Tunatengeneza website.</p>
</article><article> hutumika kwa maudhui yanayoweza kusimama yenyewe, kama huduma au blog post.
Footer
<footer>
<p>© 2026 Faulink</p>
</footer>Footer huwekwa chini ya ukurasa.
Tofauti kati ya HTML, CSS na JavaScript
- HTML hutengeneza muundo wa website.
- CSS hupamba website na kupanga layout.
- JavaScript huongeza vitendo na interactivity.
- PHP hushughulikia taarifa upande wa server.
- MySQL huhifadhi taarifa kwenye database.
Makosa ya kawaida ya HTML
Kusahau kufunga tag
Si sahihi:
<p>Karibu kwenye websiteSahihi:
<p>Karibu kwenye website</p>Kutumia link bila href
Si sahihi:
<a>WhatsApp</a>Sahihi:
<a href="https://wa.me/255693118509">
WhatsApp
</a>Kutoweka alt kwenye picha
Si vizuri:
<img src="student.jpg">Bora zaidi:
<img
src="student.jpg"
alt="Mwanafunzi akisoma darasani"
>Hitimisho
Baada ya somo hili umejifunza:
- Muundo wa HTML
- Headings na paragraphs
- Links na picha
- Orodha
- Tables
- Forms
- Navigation menu
- Sections
- Footer
- Responsive website
- Kuunganisha HTML na CSS
Hatua inayofuata ni kujifunza CSS kwa undani, JavaScript na baadaye PHP pamoja na MySQL.
SEO Title: Jinsi ya Kujifunza HTML Hatua kwa Hatua – Full Code kwa Beginner
Meta Description: Jifunze HTML hatua kwa hatua kwa Kiswahili. Somo linaeleza tags muhimu na kutoa full code ya website professional ndani ya faili moja.
Keywords: kujifunza HTML, HTML kwa Kiswahili, HTML step by step, full HTML code, website development Tanzania, HTML beginner tutorial, Faulink
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.