HTML

مبانی وب و آشنایی با HTML5

ساختار یک فایل HTML5
نحوه اجرای فایل HTML در مرورگر
تاریخچه وب و جایگاه HTML در آن
معرفی HTML5 و تفاوت اون با نسخه‌های قبلی
ابزارهای مورد نیاز برای نوشتن HTML
آشنایی با DOCTYPE و استاندارد HTML Living Standard
آزمون فصل ۱: مبانی وب و آشنایی با HTML5

ساختار سند HTML5

عنصر head و کاربردهای آن
عنصر meta و انواع آن
عنصر title
عنصر html و ساختار کلی سند
عنصر body
نظرات (Comments) در HTML
قوانین نگارش صحیح تگ‌ها (Syntax Rules)
آزمون: ساختار سند HTML5

متن و قالب‌بندی محتوا

عنوان‌ها (Headings) از h1 تا h6
پاراگراف‌ها
خط جدید و خط افقی
عناصر تاکید متنی (strong، em، b، i)
نقل‌قول‌ها (blockquote و q)
لیست‌های مرتب و نامرتب
لیست‌های تعریفی (dl، dt، dd)
عناصر متنی پیشرفته (mark، small، sub، sup، abbr و...)
آزمون فصل: متن و قالب‌بندی محتوا

لینک‌ها و ناوبری

عنصر a و لینک‌های پایه
لینک‌های داخلی و خارجی
لینک به بخش‌های مشخص یک صفحه (Anchor)
ویژگی target و کاربردهای آن
لینک‌های ایمیل و تلفن
عنصر nav و ساختار منوها
آزمون فصل: لینک‌ها و ناوبری

تصاویر و رسانه‌های پایه

عنصر figure و figcaption
عنصر img و ویژگی‌های آن
فرمت‌های تصویری پشتیبانی‌شده
ویژگی alt و اهمیت آن
تصاویر واکنش‌گرا (srcset و sizes)
نقشه‌های تصویری (Image Maps)
آزمون فصل: تصاویر و رسانه‌های پایه

جدول‌ها

ساختار پایه جدول (table، tr، td، th)
سربرگ، بدنه و پابرگ جدول (thead، tbody، tfoot)
ادغام سلول‌ها (colspan و rowspan)
عنصر caption
گروه‌بندی ستون‌ها (colgroup و col)
ملاحظات دسترسی‌پذیری در جدول‌ها
آزمون فصل: جدول‌ها

فرم‌ها و ورودی‌های کاربر

عنصر form و ساختار پایه
عنصر input و انواع type در HTML5
عنصر label و ارتباط آن با ورودی‌ها
textarea، select و option
دکمه‌ها (button و انواع آن)
ویژگی‌های اعتبارسنجی HTML5 (required، pattern، min، max و...)
عناصر fieldset و legend
عنصر datalist و output
آزمون فصل: فرم‌ها و ورودی‌های کاربر

عناصر معنایی HTML5 (Semantic Elements)

عناصر section و article
عنصر aside
مفهوم HTML معنایی و اهمیت آن
عناصر header و footer
عنصر main
عناصر details و summary
عنصر time
مقایسه ساختار معنایی با ساختار مبتنی بر div
آزمون فصل: عناصر معنایی HTML5 (Semantic Elements)

چندرسانه‌ای پیشرفته

عنصر audio و ویژگی‌های آن
عنصر video و ویژگی‌های آن
عنصر source برای منابع چندگانه
عنصر track و زیرنویس‌ها
آشنایی با عنصر canvas
آشنایی با SVG در HTML5
تفاوت canvas و SVG
آزمون فصل: چندرسانه‌ای پیشرفته در HTML5

ویژگی‌ها و APIهای HTML5

ویژگی‌های Data (data-*)
ویژگی contenteditable
ویژگی draggable و Drag and Drop API
عنصر progress و meter
۱۰-۵ Web Storage (localStorage و sessionStorage)
آشنایی مفهومی با Geolocation API
آزمون فصل ۱۰: ویژگی‌ها و APIهای HTML5

متادیتا، سئو و دسترسی‌پذیری

تگ‌های meta برای سئو
Open Graph و اشتراک‌گذاری در شبکه‌های اجتماعی
ساختار URL و لینک‌های استاندارد (rel canonical)

HTML / عناصر معنایی HTML5 (Semantic Elements)

آزمون فصل: عناصر معنایی HTML5 (Semantic Elements)

این آزمون شامل ۶ سؤال چهارگزینه‌ای است که مهم‌ترین نکات فصل ۸ (درس‌های ۸-۱ تا ۸-۸) را پوشش می‌دهد.

تمرین‌ها

تمرین 1

کدام گزینه به‌درستی تفاوت اصلی بین یک div با class="main" و تگ استاندارد main را بیان می‌کند؟

هیچ تفاوتی وجود ندارد و این دو کاملاً معادل هم هستند.تگ main دارای رنگ پس‌زمینه‌ی پیش‌فرض متفاوتی نسبت به div است.تگ main هیچ کاربردی برای دسترسی‌پذیری ندارد.مرورگر و صفحه‌خوان از خود تگ main معنای ساختاری «محتوای اصلی صفحه» را می‌فهمند، در حالی‌که کلاس روی div فقط برای انسان قابل‌فهم است.

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

تمرین 2

کدام گزینه درباره‌ی تعداد مجاز تگ header، footer و main در یک صفحه صحیح است؟

هیچ‌کدام از این سه تگ محدودیت خاصی در تعداد تکرار ندارندهر سه تگ (header، footer، main) فقط می‌توانند یک‌بار در کل صفحه استفاده شوندmain می‌تواند به تعداد دلخواه در بخش‌های مختلف صفحه تکرار شود، درست مثل headerheader و footer می‌توانند چندین بار (برای بخش‌های مختلف) تکرار شوند، اما main باید دقیقاً یک‌بار در کل صفحه استفاده شود

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

تمرین 3

برای تشخیص اینکه یک بخش از محتوا باید article باشد یا section، مهم‌ترین معیار کدام است؟

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

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

تمرین 4

کدام گزینه به‌درستی معیار استفاده از تگ aside را توصیف می‌کند؟

aside باید فقط برای محتوایی استفاده شود که در ستون کناری (راست یا چپ) صفحه قرار دارد، فارغ از رابطه‌ی معنایی آن با محتوای اصلیمعیار اصلی استفاده از aside، رابطه‌ی معنایی محتوا با متن اصلی است؛ اگر حذف آن بخش آسیبی به فهم محتوای اصلی نرساند، aside مناسب استفرم‌های ورود و ثبت‌نام، صرف نظر از موقعیتشان، همیشه باید داخل aside نوشته شوندaside همیشه باید بیرون از main قرار بگیرد و هرگز نمی‌تواند داخل article باشد

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

تمرین 5

کدام گزینه درباره‌ی تگ‌های details و summary صحیح است؟

تگ summary باید آخرین فرزند details باشد تا به‌درستی نمایش داده شودبدون نوشتن ویژگی open، محتوای details هرگز قابل‌مشاهده نخواهد شد، حتی با کلیک کاربرتگ summary همیشه به‌صورت قابل‌مشاهده باقی می‌ماند و به‌عنوان بخش کلیک‌پذیر برای باز و بسته‌کردن details عمل می‌کنداستفاده از details و summary همیشه نیازمند نوشتن کد جاوااسکریپت اضافی است

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

تمرین 6

اگر تاریخ انتشار یک مقاله به‌صورت <time datetime="2024-04-03">۱۵ فروردین ۱۴۰۳</time> نوشته شود، کدام گزینه صحیح است؟

ویژگی datetime نسخه‌ی استاندارد و ماشین‌خوان تاریخ را ارائه می‌دهد، در حالی‌که متن قابل‌مشاهده می‌تواند به هر فرمت مناسب برای کاربر (مثل تاریخ شمسی) نوشته شود.تگ time بدون ویژگی datetime اصلاً قابل‌استفاده نیست و خطای اجرایی ایجاد می‌کند.موتورهای جستجو فقط متن قابل‌مشاهده را می‌خوانند و به ویژگی datetime توجهی ندارند.مقدار قابل‌مشاهده برای کاربر باید دقیقاً همان فرمت استاندارد datetime (یعنی 2024-04-03) باشد.

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