# Terrarium Project Part 1: HTML కు పరిచయం
```mermaid
journey
title మీ HTML అభ్యసన ప్రయాణం
section స్థాపన
HTML ఫైల్ సృష్టించండి: 3: Student
DOCTYPE జోడించండి: 4: Student
డాక్యుమెంట్ నిర్మాణం: 5: Student
section విషయము
మెటాడేటా జోడించండి: 4: Student
చిత్రాలు చేర్చండి: 5: Student
లేఅవుట్ని సజావుగా చేయండి: 5: Student
section సేమాంటిక్స్
సరైన ట్యాగ్లను ఉపయోగించండి: 4: Student
접근성 పెంపొందించండి: 5: Student
టెరేరియం నిర్మించండి: 5: Student
```
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, లేదా HyperText Markup Language, మీరు ఎప్పుడైనా సందర్శించిన ప్రతి వెబ్సైట్ యొక్క మూలాధారం. HTMLని వెబ్ పేజీలకు నిర్మాణాన్ని ఇచ్చే ఎముకల యాడుగా భావించండి – అది ఎక్కడ విషయం ఉండాలి, ఎలా అవి ఏర్పాటు చేయబడ్డాయి, ప్రతి భాగం ఏమిటి అని నిర్వచిస్తుంది. CSS తరువాత మీ HTMLను రంగులు మరియు లేఅవుట్లు తో "డ్రెస్ అప్" చేస్తుంది, మరియు JavaScript ఇంటరాక్టివిటీతో జీవంతం చేస్తుంది, HTML అన్ని ఇతర విషయాలను సాధ్యాన్ని చేసే ప్రాథమిక నిర్మాణాన్ని అందిస్తుంది.
ఈ పాఠంలో, మీరు ఒక వర్చ్యువల్ టెరేరియం ఇంటర్ఫేస్ కోసం HTML నిర్మాణం సృష్టించబోతున్నారు. ఈ హ్యాండ్స్-ఆన్ ప్రాజెక్టు ద్వారా మీరు ప్రాథమిక HTML కాన్సెప్ట్స్ నేర్చుకుంటారు మరియు దృశ్యంగా ఆకట్టుకునే దాన్ని నిర్మించబోతున్నారు. మీరు సెమెంటిక్ ఎలిమెంట్స్ ఉపయోగించి విషయం ఎలా ఏర్పాటు చేయాలో, చిత్రాలతో ఎలా పనిచేయాలో, మరియు ఇంటరాక్టివ్ వెబ్ అనువర్తనం కోసం ప్రాథమికాన్ని ఎలా సృష్టించాలో నేర్చుకుంటారు.
ఈ పాఠం ముగింపులో, మీరు ఒక పని చేసే HTML పేజీ చేయబోతారు, ఇది సజీవమైన కాలములలో మొక్కల చిత్రాలను ప్రదర్శిస్తుంది, తదుపరి పాఠంలో స్టైలింగ్ కోసం సిద్ధంగా ఉంటుంది. ఇది మొదట్లో బేసిక్ గా కనపడితే బాగోలేదు – అదే HTML పని చేసేది CSS దృష్టి సౌందర్యాన్ని జోడించడానికి ముందు.
```mermaid
mindmap
root((HTML మూలాధారాలు))
Structure
DOCTYPE ప్రకటన
HTML మూలకం
తల శీర్షిక
శరీర కంటెంట్
Elements
ట్యాగ్లు & లక్షణాలు
స్వీయ ముగింపు ట్యాగ్లు
అంతర్భాగం మూలకాలు
బ్లాక్ వర్సెస్ ఇన్లైన్
Content
టెక్స్ట్ మూలకాలు
చిత్రాలు
కంటైనర్లు (div)
జాబితాలు
Semantics
అర్థమయిన ట్యాగ్లు
సులభ ప్రయోజనాత్మకత
స్క్రీన్ రీడర్లు
SEO ప్రయోజనాలు
Best Practices
సరైన అంతర్భాగం
చెల్లుబాటు మార్కప్
వివరణాత్మక Alt టెక్స్ట్
సవ్యంగా ఆగశ్రేణి
```
## లెక్చర్ కు ముందు క్విజ్
[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. "File" → "Open Folder" ను క్లిక్ చేయండి లేదా `Ctrl+K, Ctrl+O` (Windows/Linux) లేదా `Cmd+K, Cmd+O` (Mac) ఉపయోగించండి
3. `terrarium` అనే కొత్త ఫోల్డర్ సృష్టించి దానిని ఎంచుకోండి
4. ఎక్స్ప్లోరర్ ప్యానెలులో, "New File" ఐకాన్ పై క్లిక్ చేయండి
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 లో స్పష్టంగా ఫైల్ పేరును ఇవ్వకుండా కూడా `projects` ఫోల్డర్ నుండి `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>` విభాగం బ్రౌజర్లు మరియు సెర్చ్ ఇంజిన్లు అవసరమయ్యే ముఖ్య సమాచారం కలిగి ఉంటుంది, కానీ సందర్శకులు పేజీ పై నేరుగా చూడరారు. ఇది ఒక "వెనుకగడ్డ సమాచారం" లాంటిదిగా భావించండి, ఇది మీ వెబ్ పేజీ యొక్క సరిగ్గా పనిచేయడం మరియు వాడే డివైస్ లకు సరైన ప్రదర్శన అందించడానికి సహాయపడుతుంది.
ఈ మెటాడేటా బ్రౌజర్లకు మీ పేజీ ఎలా ప్రదర్శించాలో, ఎటువంటి క్యారెక్టర్ ఎంకోడింగ్ ఉపయోగించాలో, వివిధ స్క్రీన్ పరిమాణాలను ఎలా నిర్వహించాలో చెప్పుతుంది – ఇవన్నీ ప్రొఫెషనల్, యాక్సెసిబుల్ వెబ్ పేజీలను సృష్టించడానికి అవసరం.
### టాస్క్: డాక్యుమెంట్ హెడ్ను చేర్చండి
మీ ప్రారంభ మరియు ముగింపు `<html>` ట్యాగుల మధ్య ఈ `<head>` విభాగాన్ని చొప్పించండి:
```html
<head>
<title>Welcome to my Virtual Terrarium
```
**ప్రతి ఎలిమెంట్ ఏమి accomplish చేస్తుందో విభజన:**
- బ్రౌజర్ ట్యాబ్స్ మరియు సెర్చ్ ఫలితాలలో కనిపించే పేజీ శీర్షికను సెట్స్ చేస్తుంది
- ప్రపంచవ్యాప్తంగా సరైన టెక్ట్స్ ప్రదర్శన కోసం UTF-8 క్యారెక్టర్ ఎంకోడింగ్ను స్పెసిఫై చేస్తుంది
- ఆధునిక Internet Explorer వెర్షన్లతో అనుకూలతను నిర్ధారిస్తుంది
- డివైస్ వెడల్పుకు తగ్గట్టుగా viewport ను సెట్ చేసి స్పందించే డిజైన్ను కంఫిగర్ చేస్తుంది
- విషయాన్ని సహజ పరిమాణంలో చూపించేందుకు ప్రారంభ జూమ్ స్థాయిని నియంత్రిస్తుంది
> 🤔 **ఇది గురించి ఆలోచించండి**: మీరు ఇలా ఒక viewport meta ట్యాగ్ సెట్ చేస్తే: `` ఏం జరుగుతుంది? ఇది పేజీని ఎప్పుడూ 600 పిక్సెల్ల వెడల్పుగా బలం చేస్తుంది, ఇది స్పందించే డిజైన్ ను తెగతీస్తుంది! [సరైన viewport కాన్ఫిగరేషన్](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) గురించి మరింత తెలుసుకోండి.
## డాక్యుమెంట్ బాడీని నిర్మించడం
`` ఎలిమెంట్ మీ వెబ్ పేజీ యొక్క అన్ని కనిపించే కంటెంట్ ను కలిగి ఉంటుంది – యూజర్లు చూసే మరియు ఇంటరాక్ట్ చేసే ప్రతిదీ. `` విభాగం బ్రౌజర్ కి సూచనలు అందించినా, `` విభాగంలో అసలు విషయాలు ఉంటాయి: టెక్ట్స్, చిత్రాలు, బటన్లు మరియు ఇతర UI ఎలిమెంట్లు.
బాడీ నిర్మాణాన్ని జోడించి, HTML ట్యాగ్లు ఎలా కలిసి అర్థవంతమైన విషయం సృష్టిస్తాయో అర్థం చేసుకుందాం.
### HTML ట్యాగ్ నిర్మాణం అర్థం చేసుకోవడం
HTMLలో ఎలిమెంట్లను నిర్వచించడానికి స్టాండర్డ్ జోడు ట్యాగ్స్ ఉపయోగిస్తారు. చాలా ట్యాగ్స్ వద్ద ఓపెనింగ్ `
` మరియు క్లోజింగ్ `
` ట్యాగ్ ఉంటాయి, మధ్యలో విషయముంటుంది: `
Hello, world!
`. ఇది "Hello, world!" టెక్ట్స్ తో ఒక ప్యారాగ్రాఫ్ ఎలిమెంట్ సృష్టిస్తుంది.
### టాస్క్: బాడీ ఎలిమెంట్ చేర్చండి
మీ HTML ఫైల్ను `` ఎలిమెంట్ తో అప్డేట్ చేయండి:
```html
Welcome to my Virtual Terrarium
```
**ఈ సంపూర్ణ నిర్మాణం ఏమి అందిస్తుంది:**
- ప్రాథమిక HTML5 డాక్యుమెంట్ ఫ్రేమ్వర్క్ను ఏర్పాటు చేస్తుంది
- సరైన బ్రౌజర్ రేండరింగ్ కోసం అవసరమైన మెటాడేటాను కలిగిస్తుంది
- కనిపించే కంటెంట్ కోసం ఖాళీ బాడీని సృష్టిస్తుంది
- ఆధునిక వెబ్ అభివృద్ధి మంచిపనులని అనుసరిస్తుంది
ఇప్పుడు మీరు మీ టెరేరియం కనిపించే అంశాలు జోడించేందుకు సిద్ధంగా ఉన్నారు. విభిన్న భాగాలను ఏర్పాటుచేయడానికి కంటైనర్లుగా `
` ఎలిమెంట్లను, మొక్కల చిత్రాలను ప్రదర్శించడానికి `` ఎలిమెంట్లను ఉపయోగిస్తాము.
### చిత్రాలతో మరియు లేఅవుట్ కంటైనర్లతో పని చేయడం
HTMLలో చిత్రాలు ప్రత్యేకం, ఎందుకంటే అవి "సెల్ఫ్-క్లోజింగ్" ట్యాగ్స్ ఉపయోగిస్తాయి. కంటెంట్ చుట్టూ కూర్చుకునే `` లాంటి ఎలిమెంట్లకు భిన్నంగా, `` ట్యాగ్ లో అవసరమైన సమాచారం ట్యాగ్ లోనేని `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` div లో చుట్టడం
- తదుపరి పాఠంలో CSS స్టైలింగ్ కోసం సమానమైన క్లాస్ పేర్లను అప్లై చేయడం
- JavaScript ఇంటరాక్షన్ కోసం ప్రతి మొక్క చిత్రానికి ప్రత్యేక ID కేటాయించడం
- చిత్రాల ఫోల్డర్ వైపు సరిగా ఉన్న ఫైల్ పథాలను ఉపయోగించడం
> 🤔 **దీన్ని పరిశీలించండి**: ప్రస్తుతం అన్ని చిత్రాలకు ఒకే `alt` టెక్స్ "plant" ఇవ్వబడింది. ఇది యాక్సెసిబిలిటీ కోసం సరియైనది కాదు. స్క్రీన్ రీడర్ వినియోగదారులు అదే "plant" పదాన్ని 14 సార్లు వినిపించుకునే Gelegenheit వారు ఏ మొక్క చూపబడుతున్నదో తెలియదు. ప్రతి చిత్రానికి ఉత్తమంగా వివరించే `alt` టెక్స్ ఎలాంటిదిగా ఉండాలి?
> 📝 **HTML ఎలిమెంట్ రకాలు**: `
` ఎలిమెంట్లు "బ్లాక్-లెవల్"వి, పూర్తి వెడల్పు తీసుకుంటాయి, `` ఎలిమెంట్లు "ఇన్లైన్" మరియు అవసరమైన వెడల్పు మాత్రమే తీసుకుంటాయి. మీరు ఈ `
` ట్యాగ్స్ అన్నింటిని `` ట్యాగ్స్ గా మార్చితే ఏమి జరుగుతుందని మీరు అనుకుంటారు?
### 🔄 **శిక్షణాత్మక తనిఖీ**
**నిర్మాణం అర్థం చేసుకోవడం**: మీ HTML నిర్మాణాన్ని ఒక నిమిషం సమీక్షించండి:
- ✅ మీ లేఅవుట్ లో ప్రధాన కంటైనర్ లను గుర్తించగలరా?
- ✅ ప్రతి చిత్రానికి ప్రత్యేక ID ఉండటం ఎందుకు తెలుసా?
- ✅ `plant-holder` divs ఉద్దేశ్యాన్ని మీరు ఎలా వివరిస్తారు?
**దృశ్య పరీక్ష**: మీ HTML ఫైల్ను బ్రౌజర్లో ఓపెన్ చేయండి. మీరు చూడగలిగేది:
- ఒక సాధారణ మొక్కల జాబితా
- రెండు కాలములలో ఏర్పాటు చేసిన చిత్రాలు
- సింపుల్, స్టైల్ చేయబడని లేఅవుట్
**గమనిక**: ఈ సాధారణ రూపం నేరుగా CSS స్టైలింగ్ వరకు HTML ఎలా కనిపించాలో చూపిస్తుంది!
ఈ మార్కప్ తో, మొక్కలు స్క్రీన్ పై కనపడతారు, అయితే అవి ఇంకా అద్భుతంగా కనిపించవు – తదుపరి పాఠంలో CSS అలాగే చేస్తుంది! ఇప్పటి కోసం మీరు ఒక బలమైన HTML పునాది కలిగి ఉన్నారు, ఇది సక్రమంగా విషయాన్ని ఏర్పాటు చేస్తుంది మరియు యాక్సెసిబిలిటీ యొక్క ఉత్తమ పద్ధతులను పాటిస్తుంది.
## యాక్సెసిబిలిటీ కోసం సెమెంటిక్ HTML ఉపయోగించడం
సెమెంటిక్ HTML అంటే HTML ఎలిమెంట్లను వాటి అర్థం మరియు ఉద్దేశ్యానికి అనుగుణంగా ఎంచుకోవడం, కేవలం ఆ కంటెంట్ ఎలా కనిపిస్తుందో కాని కాదు. మీరు సెమెంటిక్ మార్కప్ ఉపయోగించినప్పుడు, మీరు మీ విషయం నిర్మాణం మరియు అర్థం పై బ్రౌజర్లు, సెర్చ్ ఇంజిన్లు మరియు సహాయక సాంకేతికతలు (ఉదా: స్క్రీన్ రీడర్స్) కు కమ్యూనికేట్ చేస్తారు.
```mermaid
flowchart TD
A[విషయం జోడించాలా?] --> B{ఏ విధమైనది?}
B -->|ప్రధాన శీర్షిక| C["
