</>مدرسه زیب‌موجیاد بگیر، تمرین کن، بساز
مدرسهHTMLدرس 1
درس 1 از 8 · ۱۵ دقیقه

محیط، اولین خروجی و مدل اجرا

ساختار صفحه‌های وب را از اولین تگ تا یک صفحه کامل و دسترس‌پذیر یاد بگیر.

۰امتیاز شما
نقشه این درس

بعد از این درس چه کاری می‌توانی انجام بدهی؟

  • بدانی کد کجا و چگونه اجرا می‌شود
  • یک نمونه کوچک را اجرا یا بررسی کنی
  • خطای نحوی ساده را تشخیص بدهی
به زبان زندگی واقعی

HTML را ساده بفهم

HTML مثل اسکلت و برچسب‌های یک فروشگاه است؛ مشخص می‌کند هر بخش عنوان، توضیح، تصویر یا دکمه است.

نکته مهم برای شروع HTML

اولین هدف، اجرای یک نمونه کوچک و قابل توضیح است؛ نصب ابزارهای زیاد یا ساخت پروژه بزرگ یادگیری را سریع‌تر نمی‌کند.

چرا مهم است؟ داده‌ای که نمونه دریافت می‌کند.

اولین تمرین تو: یک مقدار نمونه را تغییر بده، خروجی تازه را پیش‌بینی کن و نام فایل یا نقطه شروع اجرای HTML را در یک جمله توضیح بده.

توضیح ساده و قدم‌به‌قدم

از یک مثال کوچک شروع کن

پیش از حفظ دستورهای HTML، مدل اجرای آن را بفهم: فایل یا محیط از کجا آغاز می‌شود، ورودی چگونه وارد می‌شود و خروجی کجا دیده می‌شود. یک برنامه بسیار کوچک بهترین آزمایشگاه برای ساختن این تصویر ذهنی است.

1

۱. نقطه شروع را پیدا کن

فایل، تابع یا محیطی را که اجرای نمونه از آن آغاز می‌شود مشخص کن.

2

۲. خروجی را پیش‌بینی کن

قبل از بررسی، نتیجه هر خط را با زبان خودت بنویس.

3

۳. فقط یک مقدار را عوض کن

علت تغییر خروجی را از روی همان تغییر کوچک توضیح بده.

نکته مهم

اولین هدف، اجرای یک نمونه کوچک و قابل توضیح است؛ نصب ابزارهای زیاد یا ساخت پروژه بزرگ یادگیری را سریع‌تر نمی‌کند.

مفهوم‌های اصلی

سه قطعه‌ای که باید بفهمی

ورودی

داده‌ای که نمونه دریافت می‌کند.

اجرا

مراحلی که ابزار یا موتور زبان انجام می‌دهد.

خروجی

نتیجه‌ای که باید قبل از اجرا پیش‌بینی کنی.

سناریوی واقعی

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

در این درس، بخشی واقعی از پروژه «صفحه معرفی یک محصول واقعی» را می‌سازیم. قبل از کد یا پرامپت، ورودی، قانون و خروجی مورد انتظار را روی کاغذ مشخص می‌کنیم.

ورودی روشنیک تغییر کوچکنتیجه قابل سنجش
بازی ساختن کد

قطعه‌ها را به ترتیب درست بچین

روی هر قطعه بزن تا وارد پاسخ شود؛ برای برگرداندن دوباره روی آن بزن. با دکمه‌های جابه‌جایی هم می‌توانی بدون کشیدن و رهاکردن ترتیب را اصلاح کنی.

مرحله ۲ از ۳ · مرتب‌کردن کد
بانک قطعه‌هاقطعه مناسب را انتخاب کن
ترتیب پاسخ تواز بالا به پایین اجرا می‌شود

    هنوز پاسخی بررسی نشده است.

    کارگاه تعاملی

    اجرا و پیش‌نمایش

    این نمونه واقعاً داخل محیط جدا و امن مرورگر اجرا می‌شود؛ مقدار را تغییر بده و نتیجه را مستقیم ببین.

    html-start
    خروجیآماده
    یک بخش را تغییر بده و دکمه بررسی را بزن.
    بعد از هر تغییر، نتیجه را دوباره بررسی کن.
    تمرین هدایت‌شده

    یک مقدار نمونه را تغییر بده، خروجی تازه را پیش‌بینی کن و نام فایل یا نقطه شروع اجرای HTML را در یک جمله توضیح بده.

    دام‌های رایج

    این سه اشتباه را انجام نده

    1

    شروع با پروژه بزرگ پیش از اولین خروجی

    2

    کپی نمونه بدون پیش‌بینی

    3

    نادیده‌گرفتن اولین خطای ابزار یا کامپایلر

    سنجش چندمرحله‌ای

    با 5 سؤال مطمئن شو که مفهوم را گرفته‌ای

    سؤال 1 از 5

    بهترین روش استفاده از نمونه این درس چیست؟

    سؤال 2 از 5

    پیش از اجرای اولین نمونه چه کاری مفیدتر است؟

    سؤال 3 از 5

    نسخه اول تمرین باید چگونه باشد؟

    سؤال 4 از 5

    کدام روش نشان می‌دهد این درس را واقعاً فهمیده‌ای؟

    سؤال 5 از 5

    کدام رفتار احتمال خطا را در همین موضوع بیشتر می‌کند؟

    پایان درس 1

    فهمیدی، تغییر دادی، نتیجه را توضیح دادی؟

    فقط در این صورت درس را کامل کن و سراغ مرحله بعد برو.