# بخش اول پروژه تراریوم: مقدمهای بر 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
```
> اسکچنوت توسط [Tomomi Imura](https://twitter.com/girlie_mac)
HTML یا زبان نشانهگذاری ابرمتن، پایه و اساس هر وبسایتی است که تا به حال بازدید کردهاید. HTML را مانند اسکلت در نظر بگیرید که ساختار صفحات وب را میسازد – مشخص میکند محتوای چیست، چگونه سازماندهی شده و هر بخش چه نمایندگی دارد. در حالی که CSS بعداً «لباس» به HTML شما با رنگها و چیدمان میپوشاند و جاوااسکریپت با تعامل آن را زنده میکند، HTML ساختار اساسی را فراهم میکند که همه چیز را ممکن میسازد.
در این درس، شما ساختار HTML یک رابط تراریوم مجازی را ایجاد خواهید کرد. این پروژه عملی مفاهیم پایهای HTML را به شما آموزش میدهد و در عین حال چیزی جذاب از نظر بصری میسازد. شما خواهید آموخت چگونه محتوا را با استفاده از اجزای معنایی سازمان دهید، با تصاویر کار کنید و پایهای برای یک برنامه وب تعاملی بسازید.
تا پایان این درس، شما یک صفحه HTML فعال همراه با نمایش تصاویر گیاهان در ستونهای مرتب خواهید داشت که آماده است تا در درس بعدی آن را به صورت استایلدهی شده مشاهده کنید. نگران نباشید اگر در ابتدا ساده به نظر برسد – این دقیقاً کاری است که HTML باید انجام دهد قبل از اینکه CSS جلوه بصری اضافه کند.
```mermaid
mindmap
root((مبانی HTML))
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
```
## آزمون پیش از درس
[آزمون پیش از درس](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **تماشا و یادگیری**: این ویدیو مروری مفید را ببینید
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## راهاندازی پروژه شما
قبل از اینکه وارد نوشتن کد HTML شویم، اجازه دهید یک فضای کاری مناسب برای پروژه تراریوم شما آماده کنیم. ایجاد ساختار فایل سازمانیافته از همان ابتدا عادت مهمی است که در طول مسیر توسعه وب به شما کمک خواهد کرد.
### وظیفه: ایجاد ساختار پروژه شما
شما یک پوشه اختصاصی برای پروژه تراریوم خود خواهید ساخت و اولین فایل HTML خود را اضافه خواهید کرد. در اینجا دو روش وجود دارد که میتوانید استفاده کنید:
**گزینه ۱: استفاده از Visual Studio Code**
1. Visual Studio Code را باز کنید
2. روی "File" کلیک کرده و سپس "Open Folder" را انتخاب کنید یا از `Ctrl+K, Ctrl+O` (ویندوز/لینوکس) یا `Cmd+K, Cmd+O` (مک) استفاده کنید
3. یک پوشه جدید به نام `terrarium` بسازید و آن را انتخاب کنید
4. در پنل اکسپلورر روی آیکون "New File" کلیک کنید
5. فایل خود را به نام `index.html` نامگذاری کنید
**گزینه ۲: استفاده از دستورات ترمینال**
```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/` به طور خودکار فایل `index.html` را از پوشه `projects` نمایش میدهد بدون نیاز به مشخص کردن نام فایل در آدرس.
## درک ساختار سند HTML
هر سند HTML دارای ساختاری مشخص است که مرورگرها باید آن را بفهمند و به درستی نمایش دهند. ساختار آن را مانند یک نامه رسمی در نظر بگیرید – این نامه دارای اجزای ضروری در ترتیب مشخصی است که به گیرنده (در اینجا مرورگر) کمک میکند محتوا را به درستی پردازش کند.
```mermaid
flowchart TD
A[""] --> B[""]
B --> C[""]
C --> D[""]
C --> E["<متا charset>"]
C --> F["<متا viewport>"]
B --> G["<بدنه>"]
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>
```
**درک اینکه این کد چه میکند:**
- **اعلان** نوع سند به صورت HTML5 با استفاده از `<!DOCTYPE html>`
- **ایجاد** عنصر ریشه `<html>` که تمام محتوای صفحه را در بر میگیرد
- **برقراری** استانداردهای وب مدرن برای نمایش صحیح در مرورگر
- **اطمینان** از نمایش یکنواخت در مرورگرها و دستگاههای مختلف
> 💡 **نکته VS Code**: نشانگر موس را روی هر تگ HTML در VS Code نگه دارید تا اطلاعات مفید از مستندات MDN باز شود، شامل مثالهای استفاده و جزئیات سازگاری مرورگر.
> 📚 **مطالعه بیشتر**: اعلان DOCTYPE مانع از وارد شدن مرورگرها به "حالت عجیب و غریب" میشود که برای پشتیبانی از وبسایتهای بسیار قدیمی استفاده میشد. توسعه وب مدرن از اعلان ساده `<!DOCTYPE html>` استفاده میکند تا [نمایش مطابق استانداردها](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) را تضمین کند.
### 🔄 **بررسی آموزشی**
**ایستادن و تأمل کردن**: قبل از ادامه مطمئن شوید که درک کردهاید:
- ✅ چرا هر سند HTML به اعلان DOCTYPE نیاز دارد
- ✅ عنصر ریشه `<html>` چه محتوایی دارد
- ✅ چگونه این ساختار به مرورگرها کمک میکند صفحات را به درستی نمایش دهند
**آزمون سریع خودی**: آیا میتوانید به زبان خودتان توضیح دهید «نمایش مطابق استانداردها» یعنی چه؟
## افزودن متادیتای ضروری سند
قسمت `<head>` در سند HTML شامل اطلاعات حیاتی است که مرورگرها و موتورهای جستجو نیاز دارند ولی بازدیدکنندگان مستقیماً روی صفحه نمیبینند. این قسمت مانند اطلاعات «پشت صحنه» است که به صفحه وب کمک میکند به درستی کار کند و در دستگاهها و پلتفرمهای مختلف به درستی نمایش داده شود.
این متادیتا به مرورگرها میگوید چگونه صفحه را نمایش دهند، از چه کدگذاری کاراکتری استفاده کنند، و چگونه با اندازههای مختلف صفحه برخورد کنند – همه اینها برای ایجاد صفحات وب حرفهای و قابل دسترس ضروری است.
### وظیفه: افزودن بخش Head سند
این قسمت `<head>` را بین تگهای باز و بسته `<html>` قرار دهید:
```html
<head>
<title>Welcome to my Virtual Terrarium
```
**تحلیل آنچه هر عنصر انجام میدهد:**
- **تنظیم** عنوان صفحه که در تب مرورگر و نتایج جستجو نمایش مییابد
- **مشخص کردن** کدگذاری UTF-8 برای نمایش صحیح متن در سراسر جهان
- **اطمینان** از سازگاری با نسخههای مدرن Internet Explorer
- **تنظیم** طراحی واکنشگرا با تنظیم ناحیه نما (viewport) برای تطبیق با عرض دستگاه
- **کنترل** سطح بزرگنمایی اولیه برای نمایش محتوا در اندازه طبیعی
> 🤔 **به این فکر کنید**: چه اتفاقی میافتد اگر متاتگ viewport را اینگونه تنظیم کنید: ``؟ این باعث میشود صفحه همیشه ۶۰۰ پیکسل پهنا داشته باشد که طراحی واکنشگرا را خراب میکند! برای یادگیری بیشتر درباره [تنظیم صحیح ناحیه نما](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) مطالعه کنید.
## ساختار بخش Body سند
عنصر `` حاوی تمام محتوای قابل مشاهده صفحه وب شماست – همه چیزهایی که کاربران میبینند و با آنها تعامل دارند. در حالی که قسمت `` به مرورگر دستورالعمل میدهد، قسمت `` محتوای واقعی را شامل میشود: متنها، تصاویر، دکمهها و سایر عناصری که رابط کاربری شما را میسازند.
بیایید ساختار بخش body را اضافه کنیم و بفهمیم چگونه تگهای HTML با هم کار میکنند تا محتوای معنادار بسازند.
### درک ساختار تگهای HTML
HTML از تگهای جفتی برای تعریف عناصر استفاده میکند. اکثر تگها یک تگ باز مانند `
` و یک تگ بسته مانند `
` دارند که محتوا بین آنها قرار میگیرد: `
سلام دنیا!
`. این یک پاراگراف میسازد که متن "سلام دنیا!" را در بر دارد.
### وظیفه: افزودن عنصر Body
فایل HTML خود را بهروزرسانی کنید تا عنصر `` را شامل شود:
```html
Welcome to my Virtual Terrarium
```
**این ساختار کامل چه مزایایی دارد:**
- **برقرار کردن** چارچوب پایه سند HTML5
- **شامل کردن** متادیتای ضروری برای نمایش صحیح مرورگر
- **ایجاد** یک بخش body خالی آماده برای محتوای قابل مشاهده
- **پیروی** از بهترین شیوههای توسعه وب مدرن
اکنون آمادهاید عناصر قابل دید تراریوم را اضافه کنید. از عناصر `
` به عنوان کانتینر برای سازماندهی بخشهای مختلف محتوا استفاده خواهیم کرد و از عناصر `` برای نمایش تصاویر گیاهان.
### کار با تصاویر و کانتینرهای چیدمان
تصاویر در HTML خاص هستند چون از تگهای خودپایان (self-closing) استفاده میکنند. برخلاف عناصری مثل `` که محتوا را در بر میگیرند، تگ `` تمام اطلاعات لازم را با استفاده از ویژگیهایی مانند `src` برای مسیر فایل تصویر و `alt` برای دسترسپذیری، درون خود تگ دارد.
قبل از اینکه تصاویر را به HTML خود اضافه کنید، باید فایلهای پروژه را به درستی سازماندهی کنید و پوشه `images` را بسازید و گرافیکهای گیاهان را اضافه کنید.
**ابتدا تصاویر خود را آماده کنید:**
1. در پوشه پروژه تراریوم، یک پوشه به نام `images` بسازید
2. تصاویر گیاهان را از [پوشه راهحل](../../../../3-terrarium/solution/images) دانلود کنید (جمعاً ۱۴ تصویر گیاه)
3. همه تصاویر گیاهان را در پوشه جدید `images` کپی کنید
### وظیفه: ایجاد چیدمان نمایش گیاهان
اکنون تصاویر گیاهان را بین تگهای `` به صورت دو ستون سازماندهی شده اضافه کنید:
```html
```
**گامبهگام، این کد چه کاری انجام میدهد:**
- **ساختن** یک کانتینر اصلی صفحه با `id="page"` برای نگهداری همه محتوا
- **ایجاد** دو کانتینر ستونی: `left-container` و `right-container`
- **سازماندهی** ۷ گیاه در ستون چپ و ۷ گیاه در ستون راست
- **محصور کردن** هر تصویر گیاه در یک `
` با کلاس `plant-holder` برای موقعیتدهی جداگانه
- **استفاده** از نام کلاسهای یکنواخت برای استایلدهی CSS در درس بعد
- **اختصاص** شناسههای یکتا به هر تصویر گیاه برای تعامل با جاوااسکریپت بعدی
- **شامل کردن** مسیر فایل صحیح که به پوشه تصاویر اشاره میکند
> 🤔 **به این فکر کنید**: توجه کنید که همه تصاویر در حال حاضر متن جایگزین (alt) یکسان «plant» دارند. این برای دسترسپذیری ایدهآل نیست. کاربران صفحهخوان ۱۴ بار "plant" را میشنوند بدون اینکه بدانند هر تصویر مربوط به کدام گیاه خاص است. آیا میتوانید متن جایگزین بهتر و توصیفیتری برای هر تصویر پیشنهاد دهید؟
> 📝 **انواع عناصر HTML**: عناصر `
` بلوکسطح هستند و عرض کامل را اشغال میکنند، در حالی که عناصر `` خطی بوده و فقط به اندازه لازم عرض میگیرند. فکر میکنید اگر همه این تگهای `
` را به `` تغییر دهید چه اتفاقی میافتد؟
### 🔄 **بررسی آموزشی**
**درک ساختار**: کمی زمان بگذارید و ساختار HTML خود را مرور کنید:
- ✅ آیا میتوانید کانتینرهای اصلی در چیدمان خود را شناسایی کنید؟
- ✅ آیا میدانید چرا هر تصویر شناسه یکتا دارد؟
- ✅ هدف `
`های `plant-holder` را چگونه توصیف میکنید؟
**بازبینی بصری**: فایل HTML خود را در مرورگر باز کنید. باید مشاهده کنید:
- فهرست سادهای از تصاویر گیاهان
- تصاویر در دو ستون سازماندهی شدهاند
- چیدمانی ساده و بدون استایل
**به یاد داشته باشید**: این ظاهر ساده دقیقاً همان چیزی است که HTML باید قبل از استایلدهی CSS باشد!
با افزودن این نشانهها، گیاهان روی صفحه نمایش داده میشوند، اگرچه هنوز به زیبایی استایل داده نشدهاند – این کار CSS در درس بعدی است! فعلاً شما یک پایه قوی HTML دارید که محتوای شما را به درستی سازمان میدهد و بهترین روشهای دسترسپذیری را رعایت میکند.
## استفاده از HTML معنایی برای دسترسپذیری
HTML معنایی یعنی انتخاب عناصر HTML بر اساس معنی و هدف آنها، نه فقط ظاهرشان. وقتی نشانهگذاری معنایی استفاده میکنید، ساختار و معنی محتوای خود را به مرورگرها، موتورهای جستجو و فناوریهای کمکی مانند صفحهخوانها منتقل میکنید.
```mermaid
flowchart TD
A[نیاز به افزودن محتوا؟] --> B{چه نوعی؟}
B -->|عنوان اصلی| C["
