` برای ایجاد عناصر جداگانه در یک صفحه استفاده می‌شود. ما مجموعه‌ای از عناصر `

` ایجاد خواهیم کرد که تصاویر را در خود جای می‌دهند. ### تصاویر یک تگ HTML که نیازی به تگ بسته ندارد، تگ `` است، زیرا دارای یک عنصر `src` است که تمام اطلاعات مورد نیاز صفحه برای رندر کردن آیتم را در خود دارد. یک پوشه در برنامه خود به نام `images` ایجاد کنید و تمام تصاویر موجود در [پوشه کد منبع](../../../../3-terrarium/solution/images) را در آن قرار دهید؛ (۱۴ تصویر از گیاهان وجود دارد). ### وظیفه تصاویر گیاهان را بین تگ‌های `` در دو ستون اضافه کنید: ```html

``` > توجه: Divها در مقابل Spanها. Divها به عنوان عناصر 'بلوک' در نظر گرفته می‌شوند و Spanها 'خطی' هستند. اگر این divها را به span تبدیل کنید، چه اتفاقی می‌افتد؟ با این نشانه‌گذاری، گیاهان اکنون روی صفحه نمایش داده می‌شوند. ظاهر آن خیلی خوب نیست، زیرا هنوز با استفاده از CSS سبک‌دهی نشده‌اند، و این کار را در درس بعدی انجام خواهیم داد. هر تصویر دارای متن جایگزین (alt text) است که حتی اگر نتوانید تصویر را ببینید یا رندر کنید، ظاهر می‌شود. این یک ویژگی مهم برای دسترسی است. در درس‌های آینده درباره دسترسی بیشتر یاد خواهید گرفت؛ فعلاً به یاد داشته باشید که ویژگی alt اطلاعات جایگزین برای یک تصویر ارائه می‌دهد اگر کاربر به دلایلی نتواند آن را مشاهده کند (به دلیل اتصال کند، خطا در ویژگی src، یا اگر کاربر از صفحه‌خوان استفاده کند). ✅ آیا متوجه شدید که هر تصویر دارای همان متن جایگزین است؟ آیا این کار خوب است؟ چرا یا چرا نه؟ آیا می‌توانید این کد را بهبود دهید؟ --- ## نشانه‌گذاری معنایی به طور کلی، بهتر است هنگام نوشتن HTML از 'معنا' استفاده کنید. این به چه معناست؟ یعنی از تگ‌های HTML برای نشان دادن نوع داده یا تعاملی که برای آن طراحی شده‌اند استفاده کنید. به عنوان مثال، متن عنوان اصلی در یک صفحه باید از تگ `

` استفاده کند. این خط را درست زیر تگ باز `` اضافه کنید: ```html

My Terrarium

``` استفاده از نشانه‌گذاری معنایی مانند داشتن هدرها به صورت `

` و لیست‌های نامرتب به صورت `
` به صفحه‌خوان‌ها کمک می‌کند تا در یک صفحه حرکت کنند. به طور کلی، دکمه‌ها باید به صورت `

` اضافه کنید: ```html

``` ✅ حتی اگر این نشانه‌گذاری را به صفحه اضافه کرده‌اید، هیچ چیزی رندر نمی‌شود. چرا؟ --- ## 🚀چالش برخی از تگ‌های 'قدیمی' HTML وجود دارند که هنوز هم بازی با آنها جالب است، اگرچه نباید از تگ‌های منسوخ شده مانند [این تگ‌ها](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) در نشانه‌گذاری خود استفاده کنید. با این حال، آیا می‌توانید از تگ قدیمی `` برای حرکت افقی عنوان h1 استفاده کنید؟ (اگر این کار را انجام دادید، فراموش نکنید که بعداً آن را حذف کنید) ## آزمون پس از درس [آزمون پس از درس](https://ff-quizzes.netlify.app/web/quiz/16) ## مرور و مطالعه شخصی HTML سیستم ساخت بلوک‌های 'آزموده شده و واقعی' است که به ساخت وب به شکل امروزی کمک کرده است. کمی درباره تاریخچه آن با مطالعه برخی تگ‌های قدیمی و جدید یاد بگیرید. آیا می‌توانید بفهمید چرا برخی تگ‌ها منسوخ شده‌اند و برخی اضافه شده‌اند؟ چه تگ‌هایی ممکن است در آینده معرفی شوند؟ درباره ساخت سایت برای وب و دستگاه‌های موبایل بیشتر در [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) یاد بگیرید. ## تکلیف [تمرین HTML: ساخت یک طرح اولیه وبلاگ](assignment.md) **سلب مسئولیت**: این سند با استفاده از سرویس ترجمه هوش مصنوعی [Co-op Translator](https://github.com/Azure/co-op-translator) ترجمه شده است. در حالی که ما تلاش می‌کنیم دقت را حفظ کنیم، لطفاً توجه داشته باشید که ترجمه‌های خودکار ممکن است شامل خطاها یا نادرستی‌ها باشند. سند اصلی به زبان اصلی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، توصیه می‌شود از ترجمه انسانی حرفه‌ای استفاده کنید. ما مسئولیتی در قبال سوء تفاهم‌ها یا تفسیرهای نادرست ناشی از استفاده از این ترجمه نداریم.