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

قواعد پایه و نام‌گذاری خوانا

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

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

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

  • ساختار اصلی کد را بخوانی
  • نام‌های قابل فهم انتخاب کنی
  • نوع داده مناسب را تشخیص بدهی
به زبان زندگی واقعی

HTML را ساده بفهم

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

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

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

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

اولین تمرین تو: سه نام مبهم نمونه را به نام‌های دامنه «صفحه معرفی یک محصول واقعی» تبدیل کن و نوع هرکدام را با یک دلیل انتخاب کن.

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

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

قواعد پایه را به‌عنوان قرارداد خوانایی ببین، نه فهرستی برای حفظ‌کردن. نام، نوع و محدوده هر مقدار باید به نفر بعدی بگوید این داده چیست و تا کجا معتبر می‌ماند. کدی که فقط اجرا می‌شود اما منظورش روشن نیست هنوز کامل نیست.

1

۱. داده را نام‌گذاری کن

نام باید نقش واقعی مقدار را بیان کند.

2

۲. نوع مناسب را انتخاب کن

متن، عدد، وضعیت و نبودن مقدار رفتار متفاوت دارند.

3

۳. مرز اعتبار را آزمایش کن

خالی، صفر و مقدار نامعتبر را جدا بررسی کن.

نکته مهم

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

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

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

نحو

قواعدی که کد را برای موتور قابل فهم می‌کند.

نام‌گذاری

نام باید هدف داده یا کار را توضیح دهد.

نوع داده

متن، عدد و وضعیت رفتار متفاوت دارند.

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

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

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

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

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

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

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

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

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

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

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

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

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

    دام‌های رایج

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

    1

    نام‌های تک‌حرفی خارج از حلقه کوچک

    2

    ترکیب متن و عدد بدون تبدیل روشن

    3

    پذیرفتن مقدار خالی بدون تصمیم

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

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

    سؤال 1 از 5

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

    سؤال 2 از 5

    نام خوب متغیر چه چیزی را روشن می‌کند؟

    سؤال 3 از 5

    چرا نوع مناسب مهم است؟

    سؤال 4 از 5

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

    سؤال 5 از 5

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

    پایان درس 2

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

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