HTML Elements za Kusoma Step by Step
1. Msingi wa HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<body></body>
</html>
Soma hizi kwanza:
<!DOCTYPE html>
<html>
<head>
<title>
<meta>
<link>
<body>
2. Text Elements
<h1> mpaka <h6>
<p>
<br>
<hr>
<strong>
<b>
<em>
<i>
<u>
<mark>
<small>
<sub>
<sup>
<blockquote>
<q>
<code>
<pre>
<span>
Mfano:
<h1>Kichwa Kikuu</h1>
<p>Hii ni paragraph.</p>
<strong>Maandishi mazito</strong>
3. Links
<a>
Attributes muhimu:
href
target
title
download
rel
Mfano:
<a href="https://faulink.com" target="_blank">Tembelea Faulink</a>
4. Images
<img>
<picture>
<figure>
<figcaption>
Attributes muhimu:
src
alt
width
height
loading
title
Mfano:
<img src="logo.png" alt="Logo ya Faulink" width="200">
5. Lists
<ul>
<ol>
<li>
<dl>
<dt>
<dd>
Mfano:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
6. Tables
<table>
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>
<caption>
<colgroup>
<col>
Attributes muhimu:
border
colspan
rowspan
scope
Mfano:
<table border="1">
<tr>
<th>Jina</th>
<th>Alama</th>
</tr>
<tr>
<td>Juma</td>
<td>90</td>
</tr>
</table>
7. Forms
<form>
<label>
<input>
<textarea>
<select>
<option>
<button>
<fieldset>
<legend>
<datalist>
<optgroup>
Input types za muhimu:
text
email
password
number
date
time
file
radio
checkbox
submit
reset
hidden
tel
url
search
color
range
Attributes muhimu za forms:
action
method
name
id
class
type
value
placeholder
required
readonly
disabled
checked
selected
min
max
maxlength
pattern
autocomplete
multiple
accept
Mfano:
<form action="save.php" method="POST">
<label>Jina:</label>
<input type="text" name="jina" required>
<label>Email:</label>
<input type="email" name="email">
<button type="submit">Tuma</button>
</form>
8. Page Layout / Semantic Elements
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<div>
Mfano:
<header>Logo na Menu</header>
<nav>Links za Menu</nav>
<main>Content kuu</main>
<footer>Copyright</footer>
9. Media Elements
<audio>
<video>
<source>
<track>
<iframe>
<embed>
<object>
Attributes muhimu:
src
controls
autoplay
muted
loop
poster
width
height
allowfullscreen
Mfano:
<video src="lesson.mp4" controls width="400"></video>
10. Special Elements
details>
<summary>
<dialog>
<progress>
<meter>
<time>
<data>
<template>
Mfano:
<details>
<summary>Bonyeza kuona maelezo</summary>
<p>Haya ni maelezo zaidi.</p>
</details>
B. Attributes Muhimu za Kusoma
1. Global Attributes
Hizi zinaweza kutumika karibu kwenye element nyingi:
id
class
style
title
hidden
lang
dir
data-*
tabindex
contenteditable
draggable
spellcheck
Mfano:
<p id="intro" class="text-blue" title="Maelezo">Karibu</p>
2. Link Attributes
href
target
download
rel
title
3. Image Attributes
src
alt
width
height
loading
srcset
sizes
4. Form Attributes
action
method
name
type
value
placeholder
required
readonly
disabled
checked
selected
min
max
step
maxlength
minlength
pattern
autocomplete
autofocus
multiple
accept
5. Media Attributes
controls
autoplay
muted
loop
poster
preload
width
height
C. Mpangilio wa Kujifunza HTML
Week 1
Soma:
html
head
title
body
h1-h6
p
br
hr
strong
em
a
img
ul
ol
li
Project: Personal Profile Page
Week 2
Soma:
table
tr
th
td
form
label
input
textarea
select
option
button
Project: Registration Form
Week 3
Soma:
header
nav
main
section
article
aside
footer
div
span
Project: School Website Homepage
Week 4
Soma:
audio
video
iframe
details
summary
progress
meter
Project: Blog Page with Video and Contact Form
D. Baada ya HTML Utasoma Nini?
Mpangilio kamili wa Web Development:
1. HTML
2. CSS
3. Bootstrap
4. JavaScript
5. Git & GitHub
6. PHP
7. MySQL
8. PHP + MySQL CRUD
9. AJAX
10. REST API
11. Security
12. Laravel
13. Deployment
Kazi yako ya kwanza
Anza na hizi leo:
<h1>
<p>
<a>
<img>
<ul>
<ol>
<li>
🚀 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.