# Terrarium Project Part 1: HTML പരിചയം
```mermaid
journey
title നിങ്ങളുടെ HTML പഠന യാത്ര
section അടിസ്ഥാനപരമായ ഘടന
Create HTML file: 3: Student
Add DOCTYPE: 4: Student
Structure document: 5: Student
section ഉള്ളടക്കം
Add metadata: 4: Student
Include images: 5: Student
Organize layout: 5: Student
section അർത്ഥം പ്രദാനം ചെയ്യുന്ന മാർക്കപ്പ്
Use proper tags: 4: Student
Enhance accessibility: 5: Student
Build terrarium: 5: Student
```
> സ്കെച്ച്നോട്ട് [Tomomi Imura](https://twitter.com/girlie_mac) tarafından
HTML, അല്ലെങ്കിൽ HyperText Markup Language, നിങ്ങൾ എപ്പോഴും സന്ദർശിച്ചിട്ടുള്ള എല്ലാ വെബ്സൈറ്റുകളുടെ അടിസ്ഥാനമാണ്. HTML-നെ വെബ് പേജുകൾക്ക് ഘടന നൽകുന്ന അറസ്റ്റിൽ വെള്ളം പോലെ കരുതുക - ഇത് ചെയ്യുന്നുണ്ട് സമവായം എവിടെയാണ് പോകേണ്ടത്, അത് എങ്ങനെ ക്രമീകരിക്കപ്പെടുന്നു, ഓരോ ഭാഗവും എന്താണ് പ്രതിനിധീകരിക്കുന്നത്. CSS പിന്നീട് നിങ്ങളുടെ HTML നിറങ്ങൾ, ലേയൗട്ടുകൾ എന്നിവ കൊണ്ട് "അലങ്കരിക്കും" ഒപ്പം ജാവാസ്ക്രിപ്റ്റ് ഇത് ജീവിക്കാൻ ഇന്റർമൂഹമായ ഇടപെടൽ നൽകും, HTML അതെല്ലാം കഴിഞ്ഞ് മറ്റ് എല്ലാം ഗുണം നേടുന്ന അടിസ്ഥാന ഘടന നൽകുന്നു.
ഈ പാഠത്തിൽ, നിങ്ങൾ ഒരു വെർച്വൽ ടെറാറിയം ഇൻറർഫേസ് HTML ഘടന സൃഷ്ടിക്കും. ഈ പ്രായോഗിക പ്രോജക്ട് അടിസ്ഥാനം HTML ആശയങ്ങൾ പഠിക്കാനാകും, ഒരുപാട് ആകര്ഷകമായ ഒന്നും നിർമ്മിക്കുന്നു. നിങ്ങൾ സെമാന്റിക് ഘടകങ്ങൾ ഉപയോഗിച്ച് ഉള്ളടക്കം എങ്ങനെ ക്രമീകരിക്കാമെന്ന്, ചിത്രങ്ങൾ ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കാമെന്ന് പഠിക്കും, ഒരു ഇന്റർമൂഹമായ വെബ് അപ്ലിക്കേഷൻ സൃഷ്ടിക്കാനുള്ള അടിസ്ഥാനമാണ് സൃഷ്ടിക്കുന്നു.
ഈ പാഠം അവസാനിക്കുന്നത്, നിങ്ങൾ സജ്ജീകരിച്ച HTML പേജ് ഉപയോഗിച്ച് സജ്ജമായ സ്തംഭങ്ങളിൽ ക്രമീകരിച്ച സസ്യ ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കും, അടുത്തപാഠത്തിൽ സ്റ്റൈലിംഗിനും തയ്യാറാകും. ആദ്യം ഇത് അടിസ്ഥാനമാക്കി കാണിച്ചാലും പേടിക്കേണ്ടതില്ല – CSS ദൃശ്യ അലങ്കാരങ്ങൾ നൽകുന്നതിനു മുൻപ് HTML ചെയ്യേണ്ടത് അതാണ്.
```mermaid
mindmap
root((HTML അടിസ്ഥാനങ്ങൾ))
Structure
DOCTYPE പ്രഖ്യാപനം
HTML ഘടകങ്ങൾ
തലക്കെട്ട് വിഭാഗം
ശരീരം ഉള്ളടക്കം
Elements
ടാഗുകളും ഗുണലക്ഷണങ്ങളും
സ്വയം-അവസാനിക്കുന്ന ടാഗുകൾ
നെസ്റ്റഡ് ഘടകങ്ങൾ
ബ്ലോക്ക് vs ഇൻലൈൻ
Content
ടেক্স്റ്റ് ഘടകങ്ങൾ
ചിത്രങ്ങൾ
കണ്ടെയ്ൻറുകൾ (div)
ലിസ്റ്റുകൾ
Semantics
അർത്ഥപൂർണ്ണ ടാഗുകൾ
ആക്സസിബിലിറ്റി
സ്ക്രീൻ റീഡറുകൾ
SEO ഗുണങ്ങൾ
Best Practices
ശരിയായ നെസ്റ്റിംഗ്
സാധുവായ മാർക്കപ്പ്
വിവരണാത്മക അല്റ്റ് ടെക്സ്റ്റ്
ക്രമീകരിച്ച ഘടന
```
## പ്രിലക്ചർ ക്വിസ്
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **കാണുക കൂടാതെ പഠിക്കൂ**: സഹായകമായ ഒരു വീഡിയോ അവലോകനം പരിശോധിക്കുക
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## നിങ്ങളുടെ പ്രോജക്ട് സജ്ജമാക്കൽ
HTML കോഡിലേക്ക് പ്രവേശിക്കുന്നതിന് മുമ്പ്, നിങ്ങളുടെ ടെറാറിയം പ്രോജക്ടിനായി ഒരു ശരിയായ വർക്ക്സ്പേസ് സജ്ജമാക്കാം. ആരംഭത്തിൽ മുതൽ ക്രമീകരിച്ച ഫയൽ ഘടന സൃഷ്ടിക്കൽ ഒരു പ്രധാന ശീലമാണ്, ഇത് നിങ്ങളുടെ വെബ് വികസന യാത്രയിൽ നല്ല സേവനം നൽകും.
### ടാസ്ക്: നിങ്ങളുടെ പ്രോജക്ട് ഘടന സൃഷ്ടിക്കുക
നിങ്ങൾക്ക് ടെറാറിയം പ്രോജക്ടിനായി സമർപ്പിത ഫോൾഡർ സൃഷ്ടിച്ച് നിങ്ങളുടെ ആദ്യ HTML ഫയൽ ചേർക്കാം. ഇത്രയും ഉപയോഗിക്കാൻ കഴിയുന്ന രണ്ടു ആപ്രോച്ചുകൾ:
**ഓപ്ഷൻ 1: Visual Studio Code ഉപയോഗിച്ച്**
1. Visual Studio Code തുറക്കുക
2. "ഫയൽ" → "ഫോൾഡർ തുറക്കുക" അല്ലെങ്കിൽ `Ctrl+K, Ctrl+O` (Windows/Linux) അല്ലെങ്കിൽ `Cmd+K, Cmd+O` (Mac) ഉപയോഗിക്കുക
3. `terrarium` എന്ന പുതിയ ഫോൾഡർ സൃഷ്ടിച്ച് അത് തിരഞ്ഞെടുക്കുക
4. Explorer പാനലിൽ "ന്യൂ ഫയൽ" ഐക്കൺ ക്ലിക്കുചെയ്യുക
5. നിങ്ങളുടെ ഫയലിന് `index.html` എന്ന പേര് നൽകുക
**ഓപ്ഷൻ 2: ടെർമിനൽ കമാൻഡുകൾ ഉപയോഗിച്ച്**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**ഈ കമാൻഡുകൾ എന്ത് ചെയ്യുന്നു:**
- **പുതിയ ഡയറക്ടറി** `terrarium` എന്ന പേരിൽ നിങ്ങളുടെ പ്രോജക്ടിനായി സൃഷ്ടിക്കുന്നു
- **`terrarium` ഡയറക്ടറിയിലേക്ക്** നീങ്ങുന്നു
- **ശൂന്യമായ** `index.html` ഫയൽ സൃഷ്ടിക്കുന്നു
- **ഫയൽ** എഡിറ്റിങ്ങിന് Visual Studio Code-ൽ തുറക്കുന്നു
> 💡 **പ്രോ ടിപ്പ്**: വെബ് ഡെവലപ്പ്മെന്റിൽ `index.html` ഫയൽനാമം പ്രത്യേകമാണ്. ആരെങ്കിലും ഒരു വെബ്സൈറ്റ് സന്ദർശിക്കുമ്പോൾ, ബ്രൗസറുകൾ സ്വയം `index.html` ഫയൽ പേജ് ഡിസ്പ്ലേ ചെയ്യാൻ നോക്കുന്നു. അതുകൊണ്ടുതന്നെ `https://mysite.com/projects/` പോലുള്ള URL-ൽ `index.html` ഫയൽ നേരിട്ട് കാണിക്കേണ്ടതില്ല.
## HTML ഡോക്യുമെന്റ് ഘടന മനസിലാക്കൽ
പ്രതിയൊരു HTML ഡോക്യുമെന്റും ബ്രൗസറുകൾ മനസിലാക്കി ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന് പ്രത്യേകം ഘടന പാലിക്കുന്നു. ഈ ഘടിതന്നെയാണ് ഒരു ഔദ്യോഗിക കത്ത് പോലെയാണ് – അത് നിർദ്ദേശിച്ച വ്യവസ്ഥകളിൽ നിർബന്ധമായ ഘടകങ്ങൾ ഉള്ളതാണ്, ഇത് പ്രേക്ഷകനെ (ഇവിടെ ബ്രൗസർ) ഉള്ളടക്കം ശരിയായി പ്രോസസ്സ് ചെയ്യാൻ സഹായിക്കുന്നു.
```mermaid
flowchart TD
A[""] --> B[""]
B --> C[""]
C --> D[" തലക്കെട്ട്"]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> തലക്കെട്ട്"]
G --> I["<div> കണ്ടെയ്നറുകൾ"]
G --> J["<img> ചിത്രങ്ങൾ"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
ഓരോ HTML ഡോക്യുമെന്റിനും ആവശ്യമുള്ള അടിസ്ഥാന ഘടന ചേർക്കലോടെ തുടങ്ങാം.
### DOCTYPE പ്രഖ്യാപനവും റൂട്ട് എലിമെന്റും
ഏതൊരു HTML ഫയലിന്റെ ആദ്യ രണ്ട് വരികളും ബ്രൗസർക്ക് ഡോക്യുമെന്റിന്റെ "പരിചയപത്രം" ആയാണ് സേവനം ചെയ്യുന്നത്:
```html
<!DOCTYPE html>
<html></html>
```
**ഈ കോഡ് എന്ത് ചെയ്യുന്നു മനസിലാക്കുക:**
- `<!DOCTYPE html>` ഉപയോഗിച്ച് ഡോക്യുമെന്റ് ടൈപ്പ് HTML5 ആയി പ്രഖ്യാപിക്കുന്നു
- എല്ലാ പേജ് ഉള്ളടക്കം ഉൾക്കുന്ന റൂട്ട് `<html>` എലിമെന്റ്സ് സൃഷ്ടിക്കുന്നു
- പ്രായോഗിക ബ്രൗസർ റീണ്ടറിംഗിനായി ആധുനിക വെബ് സ്റ്റാൻഡേർഡുകൾ സ്ഥാപിക്കുന്നു
- വ്യത്യസ്ത ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലുമുള്ള സ്ഥിരത ഉറപ്പാക്കുന്നു
> 💡 **VS Code ടിപ്പ്**: VS Codeൽ ഏതൊരു HTML ടാഗിന്റെയും മേൽ ഹോവർ ചെയ്യുക MDN വെബ് ഡോക്സ് നൽകുന്ന സഹായകരമായ വിവരങ്ങൾ കാണാൻ, ഉപയോഗഉദാഹരണങ്ങളും ബ്രൗസർ കംപാറ്റിബിലിറ്റി വിവരങ്ങളും ഉൾപ്പെടെ.
> 📚 **കൂടുതൽ പഠിക്കുക**: DOCTYPE പ്രഖ്യാപനം ബ്രൗസറുകളെ "quirks mode"-ൽ പ്രവേശിക്കുന്നത് തടയുന്നു, അത് പഴയ വെബ്സൈറ്റുകൾ പിന്തുണയ്ക്കാൻ ഉപയോഗിച്ചിരുന്നത്. ആധുനിക വെബ് ഡെവലപ്പ്മെന്റ് ലളിതമായ `<!DOCTYPE html>` പ്രഖ്യാപനം ഉപയോഗിക്കുന്നു [സ്റ്റാൻഡേർഡുകൾ-അനുസരിച്ചുള്ള റീണ്ടറിംഗിന്](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
### 🔄 **പാഠപരമായ ചുവയൽ**
**താൽക്കാലികം നിർത്തി ആലോചിക്കുക**: മുന്നോട്ട് പോകുന്നതിനു മുന്പ് ഉറപ്പാക്കുക:
- ✅ എന്തുകൊണ്ട് ഓരോ HTML ഡോക്യുമെന്റും DOCTYPE പ്രഖ്യാപനം ആവശ്യമാണ്
- ✅ `<html>` റൂട്ട് എലിമെന്റിൽ എന്തുണ്ട്
- ✅ ഈ ഘടന ബ്രൗസറുകൾക്ക് പേജുകൾ ശരിയായി പ്രദർശിപ്പിക്കാൻ എങ്ങനെ സഹായിക്കുന്നു
**വേഗം സ്വയം പരിശോധന**: നിങ്ങൾക്ക് നിങ്ങളുടെ സ്വന്തം വാക്കുകളിൽ "സ്റ്റാൻഡേർഡ് അനുസൃത റീണ്ടറിംഗ്" എന്നത് എന്തിനെയാണ് അർത്ഥമെന്ന് വിശദീകരിക്കാമോ?
## അത്യാവശ്യ ഡോക്യുമെന്റ് മെടാഡേറ്റ ചേർക്കൽ
HTML ഡോക്യുമെന്റിലെ `<head>` വിഭാഗം ബ്രൗസറുകൾക്കും സെർച്ച് എഞ്ചിനുകൾക്കും ആവശ്യമായ പ്രധാന വിവരങ്ങൾ ഉൾക്കൊള്ളുന്നു, പക്ഷേ സന്ദർശകർക്ക് പേജിൽ നേരിട്ട് കാണപ്പെടണമെന്നാണ് കാണാതിരിക്കുന്നത്. ഇത് നിങ്ങളുടെ വെബ് പേജ് ശരിയായി പ്രവർത്തിക്കാനും വിവിധ ഉപകരണങ്ങളിലും പ്ലാറ്റ്ഫോമുകളിലും ശരിയായി കാണാനും സഹായിക്കുന്ന "പിന്നിലെ" വിവരമായി കരുതാം.
ഈ മെടാഡേറ്റ ബ്രൗസറുകൾക്ക് പേജ് എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്ന്, ഉപയോഗിക്കേണ്ട ചാരക്റ്റർ എൻകോഡിംഗ്, വിവിധ സ്ക്രീൻ വലിപ്പങ്ങൾ കൈകാര്യം ചെയ്യേണ്ടത് എന്നിവ പറയുന്നു – അതെല്ലാം പ്രൊഫഷണൽ, ആക്സസിബിൾ വെബ് പേജുകൾ സൃഷ്ടിക്കാൻ അവശ്യമാണ്.
### ടാസ്ക്: ഡോക്യുമെന്റ് ഹെഡ് ചേർക്കുക
താഴെ കാണിച്ച `<head>` സെക്ഷൻ നിങ്ങളുടെ തുറക്കുന്ന, അട Closing `</html>` ടാഗുകൾക്കിടയിൽ ചേർക്കുക:
```html
<head>
<title>Welcome to my Virtual Terrarium
```
**ഏറ്റവും അടിസ്ഥാന ഘടകങ്ങളുടെ വിശദീകരണം:**
- ബ്രൗസർ ടാബിലും സെർച്ച് ഫലങ്ങളിലും പ്രദർശിപ്പിക്കുന്ന പേജ് ടൈറ്റിൽ സജ്ജീകരിക്കുന്നു
- സവിശേഷമായി UTF-8 ചാരക്റ്റർ എൻകോഡിംഗ് ഉപയോഗിച്ച് ലോകമാകെയുള്ള ശരിയായ ടെക്സ്റ്റ് പ്രദർശനത്തിന്
- ആധുനിക Internet Explorer പതിപ്പുകളുമായി പൊരുത്തം ഉറപ്പാക്കുന്നു
- ഉപകരണത്തിന്റെ വീതി അനുസരിച്ച് viewport സജ്ജീകരിച്ച് പ്രതികരണശേഷിയുള്ള ഡിസൈൻ നടത്തി
- ആരംഭാപരമായ സൂം ലെവൽ നിയന്ത്രിച്ചു ഉള്ളടക്കം സ്വാഭാവിക വലുപ്പത്തിൽ പ്രദർശിപ്പിക്കുന്നു
> 🤔 **ഈതെ കുറിച്ച് ആലോചിക്കൂ**: കൂടാതെ ഇങ്ങനെ viewport മെടാ ടാഗ് സജ്ജമാക്കിയാൽ എന്ത് സംഭവിക്കും: ``? ഇത് പേജ് എപ്പോഴും 600 പിക്സലുകൾ വീതി ആയിരിക്കണമെന്നു നിർബന്ധികരിക്കും, പ്രതികരണശേഷിയുള്ള ഡിസൈന് തകരാർ! [രീതിയുള്ള viewport ക്രമീകരണത്തെക്കുറിച്ച് കൂടുതൽ വായിക്കുക](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
## ഡോക്യുമെന്റ് ബോഡി നിർമ്മാണം
`` എലിമെന്റ് നിങ്ങളുടെ വെബ്പേജിലെ ആകർഷകമായ എല്ലാ ഉള്ളടക്കവും ഉൾക്കൊള്ളുന്നു - ഉപയോക്താക്കൾ കാണുകയും ഇടപെടുകയും ചെയ്യുന്ന എല്ലാം. `` വിഭാഗം ബ്രൗസർക്ക് നിർദ്ദേശങ്ങൾ നൽകി, `` വിഭാഗം ആകർഷകമായ ഉള്ളടക്കമാണ്: ടെക്സ്റ്റ്, ചിത്രങ്ങൾ, ബട്ടണുകൾ, മറ്റ് UI ഘടകങ്ങൾ എന്നിവ.
നാം ബോഡി ഘടനം ചേർക്കാം, HTML ടാഗുകൾ എങ്ങനെ ചേർന്ന് അറിയപ്പെടുന്ന ഉള്ളടക്കം സൃഷ്ടിക്കുന്നു എന്ന് മനസിലാക്കാം.
### HTML ടാഗ് ഘടന മനസിലാക്കുക
HTML ഘടകങ്ങൾ നിർവ്വചിക്കാനായി ജോഡി ടാഗുകൾ ഉപയോഗിക്കുന്നു. അധികം ടാഗുകള്ക്ക് ആരംഭ ടാഗ് `
` പോലെയാണ്, തുടർന്ന് അട Closing ടാഗ് `
` ഉണ്ട്, ഇരു ടാഗുകളുടെ ഇടയിൽ ഉള്ളടക്കം: `
Hello, world!
`. ഇതൊരു പാരഗ്രാഫ് എലിമെന്റ് സൃഷ്ടിക്കുന്നു, അകത്ത് "Hello, world!" എന്ന ടെക്സ്റ്റ് ഉണ്ട്.
### ടാസ്ക്: ബോഡി എലിമെന്റ് ചേർക്കുക
നിങ്ങളുടെ HTML ഫയൽ പുതുക്കി `` എലിമെന്റ് ഉൾപ്പെടുത്തുക:
```html
Welcome to my Virtual Terrarium
```
**ഈ പൂർണ്ണ ഘടന എന്താണ് നൽകുന്നത്:**
- അടിസ്ഥാന HTML5 ഡോക്യുമെന്റ് ഫ്രെയിംവർക്ക് സ്ഥാപിക്കുന്നു
- ശരിയായ ബ്രൗസർ റീണ്ടറിംഗിനായി അവശ്യ മെടാഡേറ്റ ഉൾക്കൊള്ളുന്നു
- ദൃശ്യമാകുന്ന ഉള്ളടക്കത്തിന് ശൂന്യമായ ബോഡി സജ്ജമാക്കുന്നു
- ആധുനിക വെബ് ഡെവലപ്പ്മെന്റ് മെച്ചപ്പെട്ട പ്രാക്ടീസുകൾ പിന്തുടരുന്നു
ഇപ്പോൾ നിങ്ങളുടെ ടെറാറിയത്തിനുള്ള ദൃശ്യമാകുന്ന ഘടകങ്ങൾ ചേർക്കാൻ തയ്യാറാണ്. ഉള്ളടക്കത്തിന്റെ വിവിധ വിഭാഗങ്ങൾ ക്രമീകരിക്കാൻ കൺടെയ്നർസായി `
` എലിമെന്റുകൾ ഉപയോഗിക്കും, സസ്യ ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കാൻ `` എലിമെന്റുകൾ ഉപയോഗിക്കും.
### ചിത്രങ്ങളുമായി പ്രവർത്തിക്കൽ, ലേയൗട്ട് കൺടെയ്നറുകൾ
HTML-ൽ ചിത്രങ്ങൾ പ്രത്യേകമാണ്, കാരണം അവ "സ്വയം അട Closing" ടാഗുകളാണ് ഉപയോഗിക്കുന്നത്. `` പോലുള്ള ഉള്ളടക്കം ചുറ്റിപ്പറ്റാൻ ടാഗുകളിൽ നിന്ന് വ്യത്യസ്തമായി, `` ടാഗ് മാത്രമാകുന്നതിനു വേണ്ട എല്ലാ വിവരങ്ങളും അതിന്റെ അറ്റ്രിബ്യൂട്ടുകളിലൂടെ (ഉദാ., `src` ചിത്ര ഫയൽ പാത്തിനും, `alt` ആക്സസിബിലിറ്റിക്കും) ഉള്ളടക്കത്തോടൊപ്പം തന്നെയാണ്.
HTML-ിൽ ചിത്രങ്ങൾ ചേർക്കുന്നതിന് മുമ്പ്, നിങ്ങൾ പ്രോജക്ട് ഫയലുകൾ ശരിയായി ക്രമീകരിക്കണം, അതായത് images ഫോൾഡർ സൃഷ്ടിച്ച് സസ്യ ഗ്രാഫിക്സ് ചേർക്കുക.
**ആദ്യമേ, നിങ്ങളുടെ ചിത്രങ്ങൾ സജ്ജമാക്കുക:**
1. നിങ്ങളുടെ ടെറാറിയം പ്രോജക്ട് ഫോൾഡറിൽ `images` എന്നൊരു ഫോൾഡർ സൃഷ്ടിക്കുക
2. [solution folder](../../../../3-terrarium/solution/images) ല്നിന്ന് സസ്യ ചിത്രങ്ങൾ ഡൗൺലോഡ് ചെയ്യുക (മൊത്തം 14 സസ്യ ചിത്രങ്ങൾ)
3. എല്ലാ സസ്യ ചിത്രങ്ങളും പുതിയ `images` ഫോൾഡറിൽ പകർത്തുക
### ടാസ്ക്: സസ്യ പ്രദർശന ലേയൗട്ട് സൃഷ്ടിക്കുക
ഇപ്പോൾ `` ടാഗുകള്ക്കിടയിൽ ക്രമീകരിച്ച രണ്ടൊറ്റ സ്തംഭങ്ങളായി സസ്യ ചിത്രങ്ങൾ ചേർക്കുക:
```html
```
**നടപടിയായി, ഈ കോഡിൽ എന്ത് സംഭവിക്കുന്നു:**
- എല്ലാ ഉള്ളടക്കവും ഉൾക്കൊള്ളാൻ `id="page"` ഉള്ള പ്രധാന പേജ് കൺടെയ്നർ സൃഷ്ടിക്കുന്നു
- രണ്ട് സ്തംഭ കൺടെയ്നറുകൾ സൃഷ്ടിക്കുന്നു: `left-container` കൂടും `right-container` കൂടും
- ഇടത് സ്തംഭത്തിൽ 7 സസ്യങ്ങളും വലത് സ്തംഭത്തിൽ 7 സസ്യങ്ങളും ക്രമീകരിക്കുന്നു
- ഓരോ സസ്യ ചിത്രവും `plant-holder` ഡിവിൽ ചുറ്റിപ്പറ്റയുന്നു, വ്യക്തിഗത സ്ഥാനീകരണത്തിനായി
- CSS സ്റ്റൈലിംഗിനായി സ്ഥിരതയുള്ള ക്ലാസ് നാമങ്ങൾ ഉപയോക്തൃപഠനത്തിലേക്ക്
- JavaScript ഇടപെടലിനായി ഓരോ സസ്യ ചിത്രത്തിനും പ്രത്യേക ഐഡികൾക്ക് നൽകുന്നു
- ചിത്രങ്ങളുടെ ഫയൽ പാത്തുകൾ ശരിയായി `images` ഫോൾഡറിലേക്ക് കാണിക്കുന്നു
> 🤔 **ഇത് പരിഗണിക്കുക**: ഇപ്പോൾ എല്ലാ ചിത്രങ്ങൾക്കും ഒരുപോലെയുള്ള alt ടെക്സ്റ്റ് "plant" മാത്രമാണ്. ആക്സസിബിലിറ്റിക്കായി ഇത് ശരിയല്ല. സ്ക്രീൻ റീഡർ ഉപയോക്താക്കൾക്ക് 14 സാരവും "plant" എന്നെഴുതിയ തരത്തിലുള്ള ഫലമാണ് ലഭിക്കുന്നത്, ഓരോ സസ്യത്തിന്റെ പ്രത്യേക വിവരണമില്ല. ഓരോ ചിത്രത്തിനും കൂടുതൽ വിവരണാത്മകമായ alt ടെക്സ്റ്റുകൾ നൽകാമോ?
> 📝 **HTML എലിമെന്റ് തരം**: `
` എലിമെന്റുകൾ "block-level" ആണ്, മുഴുവൻ വീതിയും എടുക്കുന്നു, `` എലിമെന്റുകൾ "inline" ആണ്, ആവശ്യമായ വീതിയേ മാത്രം എടുക്കുന്നു. ഈ `
` ടാഗുകൾക്ക് എല്ലാം `` ആയി മാറ്റിയാൽ എന്ത് സംഭവിക്കും എന്നു നിങ്ങൾക്ക് തോന്നുന്നുണ്ടോ?
### 🔄 **പാഠപരമായ ചുവയൽ**
**ഘടന മനസിലാക്കൽ**: നിങ്ങളുടെ HTML ഘടന ഒരു നിമിഷം പരിശോധിക്കുക:
- ✅ നിങ്ങളുടെ ലേയൗട്ടിലെ പ്രധാന കൺടെയ്നറുകൾ തിരിച്ചറിഞ്ഞു കഴിഞ്ഞോ?
- ✅ ഓരോ ചിത്രത്തിനും പ്രത്യേക ഐഡി നൽകാനുള്ള കാരണം മനസ്സിലാക്കിയോ?
- ✅ `plant-holder` ഡിവുകളുടെ ലക്ഷ്യം എന്താണെന്ന് വിവരിക്കാമോ?
**ദൃശ്യ പരിശോധന**: നിങ്ങളുടെ HTML ഫയൽ ബ്രൗസറിൽ തുറക്കുക. നിങ്ങൾക്കാണേണ്ടത്:
- അടിസ്ഥാന സസ്യ ചിത്രങ്ങളുടെ പട്ടിക
- രണ്ടു സ്തംഭങ്ങളായി ക്രമീകരിച്ച ചിത്രങ്ങൾ
- ലളിതമായ, സ്റ്റൈൽ ചെയ്യാത്ത ലേയൗട്ട്
**ഓർമ്മിക്കുക**: സ്റ്റൈലിൾ CSS ഏപ്രസ്റ്റു വരയ്ക്കുന്നതിന് മുമ്പ് HTML ഇങ്ങനെ ലളിതമായിരിക്കും!
ഈ മാർക്കപ്പ് ചേർത്തതിനാൽ സസ്യങ്ങൾ സ്ക്രീനിൽ പ്രത്യക്ഷപ്പെടും, എങ്കിലും അവ ഇനി വരെ അലങ്കരിക്കപ്പെടാത്തതാണ് – അതിന് CSS അടുത്ത പാഠത്തിൽ! ഇപ്പോൾ നിങ്ങൾക്കുണ്ട് ഒരു ശക്തമായ HTML മാത്ര, പ്രസക്തമായ ഓർഗനൈസേഷൻ കൂടാതെ ആക്സസിബിലിറ്റി മികച്ച രീതിയിൽ പിന്തുടരുന്നു.
## ആക്സസിബിലിറ്റിക്ക് സെമാന്റിക് HTML ഉപയോഗിക്കൽ
സെമാന്റിക് HTML എന്ന് അർത്ഥം ഉള്ളടക്കത്തിന്റെ അർത്ഥവും ഉദ്ദേശ്യവും അടിസ്ഥാനമാക്കി HTML ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുക, വെറും ദൃശ്യം മാത്രം നോക്കിയുള്ളവയല്ല. നിങ്ങൾ സെമാന്റിക് മാർക്കപ്പ് ഉപയോഗിക്കുമ്പോൾ ബ്രൗസറുകൾ, സെർച്ച് എഞ്ചിനുകൾ, സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായക സാങ്കേതിക വിദ്യകൾ എന്നിവയ്ക്ക് നിങ്ങളുടെ ഉള്ളടക്ക ഘടനയും അർത്ഥവും ഭാഗവാക്കുന്നു.
```mermaid
flowchart TD
A[ഉള്ളടക്കം ചേർക്കേണ്ടതുണ്ടോ?] --> B{എന്ത് തരം?}
B -->|പ്രധാന തലക്കെട്ട്| C["
