# Mradi wa Terrarium Sehemu ya 1: Utangulizi wa HTML
```mermaid
journey
title Safari Yako ya Kujifunza HTML
section Foundation
Create HTML file: 3: Student
Add DOCTYPE: 4: Student
Structure document: 5: Student
section Content
Add metadata: 4: Student
Include images: 5: Student
Organize layout: 5: Student
section Semantics
Use proper tags: 4: Student
Enhance accessibility: 5: Student
Build terrarium: 5: Student
```
> Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, au HyperText Markup Language, ni msingi wa kila tovuti uliyoitembelea. Fikiria HTML kama mfupa wa mifupa unaotoa muundo kwa kurasa za wavuti – inaeleza wapi maudhui yanapaswa kuwekwa, jinsi yanavyopangwa, na kila kipande kinachowakilisha nini. Ingawa CSS baadaye itafunika HTML yako kwa rangi na mpangilio, na JavaScript itakuleta uhai kupitia mwingiliano, HTML hutoa muundo muhimu unaofanya kila kitu kingine kuwa chawezekana.
Katika somo hili, utaunda muundo wa HTML kwa ajili ya kiolesura cha terrarium pepe. Mradi huu wa vitendo utakufundisha dhana za msingi za HTML huku ukijenga kitu kinachovutia kwa macho. Utajifunza jinsi ya kupanga maudhui kwa kutumia vipengele vya maana, kufanya kazi na picha, na kuunda msingi wa programu ya wavuti yenye mwingiliano.
Mwisho wa somo hili, utakuwa na ukurasa wa HTML unaofanya kazi unaoonyesha picha za mimea katika safu zilizopangwa vizuri, tayari kwa urembo katika somo lijalo. Usijali kama inaonekana rahisi mwanzoni – hiyo ndio HTML inavyopaswa kufanya kabla ya CSS kuongeza urembo wa kuona.
```mermaid
mindmap
root((HTML Fundamentals))
Structure
DOCTYPE Declaration
HTML Element
Head Section
Body Content
Elements
Tags & Attributes
Self-closing Tags
Nested Elements
Block vs Inline
Content
Text Elements
Images
Containers (div)
Lists
Semantics
Meaningful Tags
Accessibility
Screen Readers
SEO Benefits
Best Practices
Proper Nesting
Valid Markup
Descriptive Alt Text
Organized Structure
```
## Jaribio la Kabla ya Mhadhara
[Jaribio kabla ya mhadhara](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **Tazama na Jifunze**: Angalia muhtasari huu wa video unaosaidia
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## Kuandaa Mradi Wako
Kabla hatujaingia kwenye msimbo wa HTML, hebu tuandae nafasi iliyofaa ya kazi kwa ajili ya mradi wako wa terrarium. Kuunda muundo wa faili uliopangwa vizuri tangu mwanzo ni tabia muhimu itakayokuhudumia vyema katika safari yako ya maendeleo ya wavuti.
### Kazi: Unda Muundo wa Mradi Wako
Utaunda folda maalum kwa ajili ya mradi wako wa terrarium na kuongeza faili yako ya kwanza ya HTML. Hapa kuna njia mbili unazoweza kutumia:
**Chaguo 1: Kutumia Visual Studio Code**
1. Fungua Visual Studio Code
2. Bofya "File" → "Open Folder" au tumia `Ctrl+K, Ctrl+O` (Windows/Linux) au `Cmd+K, Cmd+O` (Mac)
3. Unda folda mpya iitwayo `terrarium` na uichague
4. Katika dirisha la Explorer, bofya ikoni ya "New File"
5. Panga faili yako `index.html`
**Chaguo 2: Kutumia Amri za Terminal**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**Hivi ndivyo amri hizi zinavyofanikisha:**
- **Unda** saraka mpya iitwayo `terrarium` kwa ajili ya mradi wako
- **Ingiza** saraka ya terrarium
- **Unda** faili tupu `index.html`
- **Fungua** faili hiyo ndani ya Visual Studio Code kwa ajili ya kuhariri
> 💡 **Ushauri wa Pro**: Jina la faili `index.html` ni la kipekee katika maendeleo ya wavuti. Wakati mtu anapotembelea tovuti, vivinjari huangalia moja kwa moja faili `index.html` kama ukurasa wa chaguo msaada kuonyesha. Hii ina maana URL kama `https://mysite.com/projects/` itahudumia faili `index.html` kutoka folda ya `projects` bila hitaji la kuweka jina la faili kwenye URL.
## Kuelewa Muundo wa Hati ya HTML
Kila hati ya HTML hutegemea muundo maalum unaohitajika na vivinjari kuelewa na kuonyesha kwa usahihi. Fikiria muundo huu kama barua rasmi – ina vipengele vinavyohitajika kwa mpangilio maalum vinavyosaidia mpokeaji (hii ni vivinjari) kusindika maudhui ipasavyo.
```mermaid
flowchart TD
A[""] --> B[""]
B --> C[""]
C --> D[""]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> Kichwa"]
G --> I["<div> Makontena"]
G --> J["<img> Picha"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
Tuanze kwa kuongeza msingi muhimu ambao kila hati ya HTML inahitaji.
### Tamko la DOCTYPE na Kipengele cha Mizizi
Mistari miwili ya kwanza ya faili yoyote ya HTML hutoa "utangulizi" wa hati kwa kivinjari:
```html
<!DOCTYPE html>
<html></html>
```
**Kuelewa kinachofanywa na msimbo huu:**
- **Tangaza** aina ya hati kama HTML5 kwa kutumia `<!DOCTYPE html>`
- **Tengeneza** kipengele cha mizizi `<html>` ambacho kitaweka maudhui yote ya ukurasa
- **Weka** viwango vya wavuti vya kisasa kwa ajili ya uonyesho sahii wa kivinjari
- **Hakikisha** uonyesho thabiti kati ya vivinjari na vifaa tofauti
> 💡 **Ushauri wa VS Code**: Weka alama juu ya lebo yoyote ya HTML ndani ya VS Code kuona habari zinazosaidia kutoka MDN Web Docs, ikiwa ni pamoja na mifano ya matumizi na maelezo ya muafaka wa kivinjari.
> 📚 **Jifunze Zaidi**: Tamko la DOCTYPE linazuia vivinjari kuingia "modus wa kasoro," ulio tumika kuunga mkono tovuti za zamani sana. Maendeleo ya wavuti ya kisasa hutumia tamko rahisi la `<!DOCTYPE html>` kuhakikisha [uonyesho unaozingatia viwango](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
### 🔄 **Kukagua Kipengele cha Mafunzo**
**Pumzika na Fikiria**: Kabla ya kuendelea, hakikisha unaelewa:
- ✅ Kwa nini kila hati ya HTML inahitaji tamko la DOCTYPE
- ✅ Kipengele cha mizizi `<html>` kina nini ndani yake
- ✅ Jinsi muundo huu unavyosaidia vivinjari kuonyesha kurasa kwa usahihi
**Jaribio la Haraka la Kujikokotoa**: Je, unaweza kuelezea kwa maneno yako mwenyewe maana ya "uonyesho unaozingatia viwango"?
## Kuongeza Metadata Muhimu za Hati
Sehemu ya `<head>` ya hati ya HTML ina habari muhimu ambayo vivinjari na injini za utafutaji zinahitaji, lakini wageni hawaiioni moja kwa moja kwenye ukurasa. Fikiria kama habari "nyuma ya pazia" inayosaidia ukurasa wako wa wavuti kufanya kazi vizuri na kuonekana kwa usahihi kwenye vifaa na majukwaa tofauti.
Metadata hii inawaambia vivinjari jinsi ya kuonyesha ukurasa wako, ni encoding gani ya herufi itumike, na jinsi ya kushughulikia ukubwa tofauti wa skrini – zote ni muhimu kwa kuunda kurasa za wavuti za kitaalamu na zinazo patikana.
### Kazi: Ongeza Sehemu ya Kichwa cha Hati
Tumia sehemu hii ya `<head>` kati ya lebo yako ya kufungua na kufunga `<html>`:
```html
<head>
<title>Welcome to my Virtual Terrarium
```
**Kuvaa vipengele hivi vinavyofanikisha:**
- **Weka** kichwa cha ukurasa kinachoonekana kwenye tabia za kivinjari na matokeo ya utafutaji
- **Taja** encoding ya herufi UTF-8 kwa uonyesho sahihi wa maandishi dunia nzima
- **Hakikisha** muafaka na matoleo ya kisasa ya Internet Explorer
- **Panga** muundo unaojulikana kwa kuweka viewport ili iendane na upana wa kifaa
- **Dhibiti** kiwango cha mviringo wa kuanzishwa ili kuonyesha maudhui kwa ukubwa wa asili
> 🤔 **Fikiria Hili**: Kutatokea nini kama utaweka meta tag ya viewport kama hii: ``? Hii italazimisha ukurasa daima kuwa na upana wa pixel 600, ikivunja muundo unaopokelewa! Jifunze zaidi kuhusu [mpangilio sahihi wa viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
## Kujenga Mwili wa Hati
Kipengele cha `` kina maudhui yote yanayoonekana ya ukurasa wako wa wavuti – kila kitu watumiaji wataona na kushirikiana nacho. Wakati sehemu ya `` ilitoa maelekezo kwa kivinjari, sehemu ya `` ina maudhui halisi: maandishi, picha, vitufe, na vipengele vingine vinavyounda kiolesura chako cha mtumiaji.
Tuweke muundo wa mwili na kuelewa jinsi lebo za HTML zinavyofanya kazi pamoja kuunda maudhui yenye maana.
### Kuelewa Muundo wa Lebo za HTML
HTML hutumia lebo za jozi kuainisha vipengele. Lebo nyingi zina lebo ya ufunguzi kama `
` na lebo ya kufunga kama `
`, na maudhui kati yao: `
Hello, world!
`. Hii huunda kipengele cha aya chenye maandishi "Hello, world!".
### Kazi: Ongeza Kipengele cha Mwili
Sasisha faili yako ya HTML kujumuisha kipengele cha ``:
```html
Welcome to my Virtual Terrarium
```
**Huu muundo kamili unatoa:**
- **Imeweka** mfumo wa msingi wa hati ya HTML5
- **Inajumuisha** metadata muhimu kwa uonyesho sahihi wa kivinjari
- **Imetengeneza** mwili tupu tayari kwa maudhui yako yanayoonekana
- **Inafuata** mbinu bora za maendeleo ya wavuti za kisasa
Sasa uko tayari kuongeza vipengele vinavyoonekana vya terrarium yako. Tutatumia vipengele vya `
` kama vyombo vya kuandaa sehemu tofauti za maudhui, na vipengele vya `` kuonyesha picha za mimea.
### Kufanya kazi na Picha na Vyombo vya Mpangilio
Picha ni maalum katika HTML kwa sababu hutumia lebo za "kujifunga" yenyewe. Tofauti na vipengele kama `` vinavyozunguka maudhui, lebo `` ina taarifa zote inazohitaji ndani ya lebo yenyewe kwa kutumia sifa kama `src` kwa njia ya faili ya picha na `alt` kwa upatikanaji.
Kabla ya kuongeza picha kwenye HTML yako, utahitaji kupanga faili zako za mradi vizuri kwa kuunda saraka ya picha na kuongeza picha za mimea.
**Kwanza, andaa picha zako:**
1. Unda saraka iitwayo `images` ndani ya folda ya mradi wako wa terrarium
2. Pakua picha za mimea kutoka [saraka ya suluhisho](../../../../3-terrarium/solution/images) (picha 14 za mimea jumla)
3. Nakili picha zote za mimea ndani ya saraka yako mpya ya `images`
### Kazi: Unda Mpangilio wa Onyesho la Mimea
Sasa ongeza picha za mimea zilizopangwa katika safu mbili kati ya lebo zako za ``:
```html
```
**Hatua kwa hatua, hii ndiyo kinachotokea katika msimbo huu:**
- **Unda** chombo kikuu cha ukurasa kwa `id="page"` kushikilia maudhui yote
- **Weka** vyombo viwili vya safu: `left-container` na `right-container`
- **Panga** mimea 7 katika safu ya kushoto na mimea 7 katika safu ya kulia
- **Zungusha** kila picha ya mmea katika div ya `plant-holder` kwa upangaji wa mtu binafsi
- **Tumia** majina ya darasa yanayolingana kwa urembo wa CSS kwenye somo lijalo
- **Pangilia** vitambulisho vya kipekee kwa kila picha ya mmea kwa ajili ya mwingiliano wa JavaScript baadaye
- **Jumuisha** njia sahihi za faili kuelekeza kwenye saraka ya picha
> 🤔 **Fikiria Hili**: Tambua kuwa picha zote kwa sasa zina maandishi sawa ya alt "plant". Hii si bora kwa upatikanaji. Watumiaji wa wasomaji wa skrini wangesikia "plant" zikirudiwa mara 14 bila kujua mmea gani picha kila moja inaonyesha. Je, unaweza kufikiria maandishi bora ya alt ya kuelezea picha hii?
> 📝 **Aina za Vipengele vya HTML**: Vipengele vya `
` ni vya "ngazi ya kugawanyika" na huchukua upana mzima, wakati vipengele vya `` ni vya "ndani" na huchukua upana unaohitajika tu. Unaweza kufikiria kutokee nini kama utabadilisha lebos zote za `
` kuwa ``?
### 🔄 **Kukagua Kipengele cha Mafunzo**
**Kuelewa Muundo**: Chukua muda kuangalia muundo wako wa HTML:
- ✅ Je, unaweza kutambua vyombo vikuu katika mpangilio wako?
- ✅ Je, unaelewa kwa nini kila picha ina kitambulisho cha kipekee?
- ✅ Unaelezaje kusudi la div za `plant-holder`?
**Ukaguzi wa Kuona**: Fungua faili yako ya HTML kwa kivinjari. Unapaswa kuona:
- Orodha rahisi ya picha za mimea
- Picha zilizopangwa katika safu mbili
- Muundo rahisi, usio na urembo
**Kumbuka**: Muonekano huu wa kawaida ndio HTML inavyopaswa kuonekana kabla ya urembo wa CSS!
Kwa alama hii iliyoongezwa, mimea itaonekana kwenye skrini, ingawa haitakuwa imerekebishwa vyema bado – hiyo ni kazi ya CSS katika somo lijalo! Kwa sasa, una msingi thabiti wa HTML unaopanga maudhui yako kwa usahihi na kufuata mbinu bora za upatikanaji.
## Kutumia HTML ya Kimaana kwa Upatikanaji
HTML ya kimaana ina maana ya kuchagua vipengele vya HTML kwa msingi wa maana na kusudi lao, si kwa muonekano tu. Unapojumuisha lebo za maana, unawasilisha muundo na maana ya maudhui yako kwa vivinjari, injini za utafutaji, na teknolojia za msaada kama wasomaji wa skrini.
```mermaid
flowchart TD
A[Unahitaji kuongeza maudhui?] --> B{Ni aina gani?}
B -->|Kichwa kikuu| C["
