سرفصل ها

  • persian developer network logo
  • آموزش HTML
    اصول اولیه HTML
    HTML چیست؟
    آناتومی یک عنصر HTML
    ایجاد اولین عنصر HTML شما
    عناصر تودرتو
    عناصر خالی
    ویژگی ها
    افزودن ویژگی‌ها به یک عنصر
    ویژگی های بولی
    حذف علامت نقل قول در اطراف مقادیر ویژگی‌ها
    نقل قول تکی یا دوتایی؟
    آناتومی یک سند HTML
    فضای خالی در HTML
    ارجاعات کاراکتری: اضافه کردن کاراکترهای ویژه در HTML
    کامنت های HTML
    متا دیتای صفحه وب
    سربرگ HTML چیست؟
    افزودن عنوان
    فراداده: عنصر <meta>
    مشخص کردن کدگذاری کاراکتر سند شما
    افزودن نویسنده و توضیحات
    بررسی کاربرد توضیحات در موتورهای جستجو
    انواع دیگر فراداده
    اضافه کردن آیکون‌های شخصی ساز به سایت
    اعمال CSS و جاوا اسکریپت به HTML
    تنظیم زبان اصلی سند
    سرفصل‌ها و پاراگراف‌ها
    سرفصل‌ها و پاراگراف‌ها
    اجرای سلسله مراتب ساختاری
    چرا به ساختار نیاز داریم؟
    چرا به معناشناسی نیاز داریم؟
    تأکید و اهمیت
    تأکید و اهمیت چیست؟
    تأکید
    اهمیت قوی
    ایتالیک، بولد، زیرخط‌دار…
    لیست ها
    لیست های نامرتب
    مرتب
    لیست های تودرتو
    لیست های توضیحات
    مثال لیست توضیحات
    چندین توضیح برای یک آیتم
    ویژگی های پیشرفته‌ی متن
    نقل قول ها
    نقل قول های بلوکی
    نقل قول های درون خطی
    نقل قول ها <cite>
    اختصارات
    علامت‌گذاری اطلاعات تماس
    بالانویس و زیرنویس
    نمایش کد کامپیوتر
    علامت‌گذاری زمان‌ها و تاریخ‌ها
    ساختاردهی اسناد
    بخش‌های اساسی یک سند
    سرصفحه ها
    نوار ناوبری
    محتوای اصلی
    نوار کناری
    پاورقی
    HTML برای ساختاردهی محتوا
    عناصر طرح‌بندی HTML با جزئیات بیشتر
    بسته‌بندی‌های غیرمعنایی
    شکست خطوط و خطکش افقی
    <br>: عنصر شکست خط
    <hr>: عنصر شکست موضوعی
    ساختاردهی یک وب‌سایت پایه
    ایجاد لینک‌ها
    هایپرلینک چیست؟
    آناتومی یک لینک
    لینک‌های سطح بلوک
    لینک‌های تصویر
    افزودن اطلاعات پشتیبانی با ویژگی عنوان
    مقدمه‌ای سریع بر URLها و مسیرها
    همان دایرکتوری
    حرکت به سمت پایین و زیرشاخه‌ها
    بازگشت به دایرکتوری‌های والد
    پیوند دادن نسبت به دایرکتوری ریشه
    لینک دادن با URL های کامل
    لینک‌های داخلی و خارجی
    قطعات سند
    چگونه URL ها به مسیرهای فایل تبدیل می شوند؟
    بهترین شیوه‌های لینک
    از متن لینک واضح استفاده کنید
    لینک دادن به منابع غیر HTML - علائم راهنمایی واضح بگذارید
    هنگام پیوند به یک فایل دانلود، از ویژگی دانلود استفاده کنید
    چه زمانی لینک‌ها را در تب جدید باز کنیم؟
    ایجاد منوی ناوبری
    لینک‌های ایمیل
    مشخص کردن جزئیات
    تصاویر
    چگونه یک تصویر را در صفحه وب قرار دهیم؟
    متن جایگزین
    عرض و ارتفاع
    تغییر اندازه تصاویر
    عنوان‌های تصویر
    دارایی‌های رسانه‌ای و مجوزها
    آشنایی با انواع مجوزها
    مالکیت عمومی/CC0
    جستجوی تصاویر دارای مجوز مجاز
    حاشیه‌نویسی تصاویر با شکل‌ها و زیرنویس شکل‌ها
    تصاویر پس زمینه CSS
    ویدئو و صوت HTML
    ویدئو و صدا در وب
    عنصر <video>
    استفاده از چندین قالب منبع برای بهبود سازگاری
    محتویات یک فایل رسانه‌ای
    پشتیبانی از فایل‌های رسانه‌ای در مرورگرها
    سایر ویژگی‌های <video>
    عنصر <audio>
    نمایش مسیر خطی ویدیوها
    اصول اولیه جدول HTML
    جدول چیست؟
    یک جدول چگونه کار می‌کند؟
    چه زمانی باید از جداول HTML اجتناب کنید؟
    اضافه کردن سرفصل با عناصر <th>
    چرا سرفصل‌ها مفید هستند؟
    اجازه دادن به سلول‌ها برای گسترش در چندین ردیف و ستون
    گروه بندی ستون ها با <colgroup> و <col>
    دسترسی‌پذیری جدول HTML
    استفاده از سرستون‌ها و سر سطرها
    اضافه کردن عنوان به جدول با استفاده از <caption>
    افزودن ساختار با <thead> و <tbody> و <tfoot>
    افزودن ساختار به جدول ثبت هزینه‌ها
    ویژگی scope
    ویژگی‌های id و headers
    فرم‌ها و دکمه‌ها در HTML
    تعامل با کاربران
    دکمه‌ها
    آناتومی یک فرم
    عنصر <form>
    ساختاربندی فرم‌ها
    عناصر <input>
    ویژگی‌های required و value در عمل
    ورودی‌های فیلد متنی تخصصی
    عناصر <label>
    برچسب‌های فرم صریح و ضمنی
    عنصر <button>
    نکته‌ای فرعی در مورد دسترسی‌پذیری
    انواع دیگر کنترل
    دکمه‌های رادیویی
    غیرفعال کردن کنترل‌های فرم
    کادرهای انتخاب
    منوهای کشویی
    فیلدهای ورودی متن چند خطی
    اعتبارسنجی فرم
    اشکال‌زدایی HTML
    اشکال زدایی ترسناک نیست
    HTML و اشکال‌زدایی
    استفاده از بازرس DOM
    نوبت شما: مطالعه HTML با استفاده از DOM inspector
    اعتبارسنجی HTML
    تفسیر پیام‌های خطا
    گنجاندن گرافیک‌های برداری در HTML
    گرافیک برداری چیست؟
    SVG چیست؟
    اضافه کردن SVG به صفحات شما
    راه سریع: عنصر img
    عیب‌یابی و پشتیبانی از مرورگرهای مختلف
    چگونه کد SVG را در HTML خود قرار دهیم
    نحوه جاسازی SVG با iframe
    از object تا iframe - فناوری‌های عمومی جاسازی
    تاریخچه کوتاهی از جاسازی
    iframe ها با جزئیات
    نگرانی‌های امنیتی
    فقط در صورت لزوم جاسازی کنید
    از HTTPS استفاده کنید
    همیشه از ویژگی sandbox استفاده کنید
    پیکربندی دستورالعمل‌های CSP
    عناصر <embed> و <object>
    آموزش CSS مبتدی
    CSS چیست؟
    استایل‌های پیش‌فرض مرورگر
    CSS برای چیست؟
    اصول اولیه سینتکس CSS
    CSS چگونه به HTML اعمال می‌شود؟
    شروع کار با CSS
    شروع با مقداری HTML
    اضافه کردن CSS به سند
    استایل دهی خارجی
    قرار دادن استایل‌شیت‌ها در مکان‌های مختلف
    استایل دهی داخلی
    استایل‌های درون‌خطی
    استفاده از انتخابگرهای رایج
    انتخاب عناصر HTML
    اضافه کردن کلاس
    استایل‌دهی به چیزها بر اساس موقعیت آنها در سند
    استایل‌دهی به چیزها بر اساس حالت (state)
    ترکیب انتخابگرها و ترکیب‌کننده‌ها
    سایر ویژگی‌های سینتکس CSS
    توابع
    تابع calc
    توابع تبدیل
    قوانین @
    ویژگی‌های مختصرنویسی
    کامنت‌های CSS
    فضای خالی در CSS
    انتخابگرهای CSS پایه
    انتخابگر (selector) چیست؟
    انتخابگرهای نوع (Type)
    انتخابگرهای کلاس (Class)
    هدف قرار دادن کلاس‌ها روی عناصر خاص
    انتخاب عنصری که بیش از یک کلاس دارد
    انتخابگرهای شناسه (ID)
    لیست‌های انتخابگر
    انتخابگرهای نامعتبر در فهرست‌های انتخابگر
    انتخابگر جهانی
    استفاده از انتخابگر سراسری برای خواناتر کردن انتخابگرهایتان
    انتخابگرهای ویژگی
    انتخابگرهای حضور و ارزش
    انتخابگرهای تطبیق زیررشته
    شبه کلاس‌ها و شبه عناصر
    شبه کلاس چیست؟
    مثال پایه‌ای از شبه کلاس
    شبه کلاس‌های تعامل کاربر
    شبه عنصر چیست؟
    ترکیب شبه کلاس‌ها و شبه عناصر
    تولید محتوا با before و after
    آیکون‌های محتوای تولید شده
    اشکال تولید شده
    ترکیب‌کننده‌ها
    ترکیب‌کننده‌ی نسلی
    ترکیب‌کننده فرزند
    ترکیب‌کننده‌ی sibling بعدی مستقیم
    ترکیب‌کننده‌ی sibling بعدی غیرمستقیم
    ترکیب ترکیب‌کننده‌ها با انتخاب‌کننده‌ها
    مدل جعبه‌ای
    جعبه‌های بلوکی و درون‌خطی
    انواع نمایشگر داخلی و خارجی
    نمونه‌هایی از انواع مختلف نمایشگر
    مدل جعبه‌ای CSS چیست؟
    قطعات یک جعبه
    مدل جعبه‌ای استاندارد CSS
    مدل جعبه‌ای جایگزین CSS
    استفاده از ابزارهای توسعه مرورگر برای مشاهده مدل جعبه‌ای
    مارجین‌ها، فاصله‌گذاری و حاشیه‌ها
    مارجین margin
    فروپاشی مارجین
    مرزها (حاشیه ها) border
    پدینگ padding
    مدل جعبه‌ای و جعبه‌های درون‌خطی
    استفاده از نمایش: inline-block
    رسیدگی به مغایرت ها
    قوانین متناقض
    آبشاری cascade
    مشخصه specificity
    وراثت inheritance
    درک چگونگی تعامل مفاهیم با یکدیگر
    درک وراثت
    کنترل وراثت
    تنظیم مجدد تمام مقادیر ویژگی‌ها
    درک آبشار
    ترتیب منبع
    مشخصه
    مثالی عمیق‌تر از جزئیات
    شناسه‌ها در مقابل کلاس‌ها
    استایل‌های درون‌خطی
    مهم!
    تأثیر مکان CSS
    ترتیب اعلان‌های برتر
    مقادیر و واحدهای CSS
    مقدار CSS چیست؟
    اعداد، طول‌ها و درصدها
    طول‌ها
    واحدهای طول مطلق
    واحدهای طول نسبی
    بررسی یک مثال
    em و rem
    درصدها
    اعداد
    رنگ color
    کلمات کلیدی رنگی
    مقادیر RGB هگزادسیمال
    مقادیر RGB
    یک مثال RGB با opacity
    استفاده از hue برای مشخص کردن یک رنگ
    HWB
    HSL
    تصاویر image
    موقعیت position
    رشته‌ها string و شناسه‌ها id
    توابع
    توابع ریاضی
    اندازه بندی آیتم ها در CSS
    اندازه طبیعی یا ذاتی آیتم ها
    تنظیم اندازه خاص
    استفاده از درصدها
    مارجین و پدینگ درصدی
    حداقل و حداکثر اندازه‌ها
    حداکثر عرض روی تصاویر max-width
    واحدهای viewport
    پس‌زمینه‌ها و حاشیه‌ها
    رنگ‌های پس‌زمینه
    تصاویر پس زمینه
    کنترل تکرار پس‌زمینه
    اندازه بندی تصویر پس زمینه
    قرار دادن تصویر پس زمینه
    پس‌زمینه‌های گرادیان
    تصاویر پس زمینه چندگانه
    پیوست پس‌زمینه
    استفاده از ویژگی مختصر نویسی background
    ملاحظات دسترسی پس زمینه
    حاشیه ها
    گوشه‌های گرد
    محتوای سرریز شده
    overflow یا سرریز چیست؟
    CSS تلاش می‌کند از «از دست رفتن داده‌ها» جلوگیری کند
    ویژگی overflow
    پنهان کردن محتوای سرریز شده
    اسکرول محتوای سرریز شده
    نمایش دادن اسکرول بار فقط درصورت نیاز
    سرریز ناخواسته در طراحی وب
    تصاویر، رسانه‌ها و عناصر فرم
    عناصر جایگزین شده
    اندازه بندی تصاویر
    مدیریت مشکلات نمایش تصویر با object-fit
    عناصر جایگزین شده در طرح بندی
    عناصر فرم
    استایل‌دهی به عناصر ورودی متن
    نرمال‌سازی رفتار فرم
    وراثت و عناصر فرم
    عناصر فرم و اندازه‌بندی جعبه‌ای
    سایر تنظیمات مفید
    درست کردن همه چیز با "reset"
    استایل‌دهی جداول
    یک جدول HTML معمولی
    شروع استایل‌دهی به جدول
    به‌روزرسانی فونت
    فاصله گذاری
    ترازبندی
    اضافه کردن حاشیه
    نوار گورخری
    استایل دادن به کپشن ها
    نکات ریز استایل‌دهی جداول
    اشکال‌زدایی CSS
    نحوه دسترسی به DevTools مرورگر
    DOM در مقابل منبع نمایش
    بررسی CSS اعمال شده
    ویرایش مقادیر
    افزودن یک ویژگی جدید
    درک مدل جعبه‌ای
    حل مسائل مربوط به مشخصه‌ها
    مشکلات اشکال‌زدایی در CSS
    از مشکل یک قدم عقب بروید
    آیا HTML و CSS معتبری دارید؟
    آیا ویژگی و مقدار توسط مرورگری که در آن آزمایش می‌کنید پشتیبانی می‌شوند؟
    آیا چیز دیگری CSS شما را نادیده گرفته است؟
    یک مورد آزمایشی کوچک‌شده از مشکل ایجاد کنید
    جلوه‌های پیشرفته استایل‌دهی
    سایه Box shadow
    یک box shadow ساده
    box shadow در تعداد
    سایر ویژگی‌های box shadow
    فیلترها
    حالت‌های ترکیبی
    حالت ترکیبی پس‌زمینه background-blend-mode
    حالت ترکیبی mix-blend-mode
    اشکال CSS
    -webkit-background-clip: text
    لایه‌های آبشاری
    بررسی مفهوم آبشار
    منشأ و آبشار
    منشأ و ویژگی
    مروری بر لایه‌های آبشاری
    ترتیب اولویت لایه آبشاری
    مسائلی که لایه‌های آبشاری می‌توانند حل کنند
    مسائلی که لایه‌های آبشاری تو در تو می‌توانند حل کنند
    ایجاد لایه‌های آبشاری
    دستور @layer در قاعده برای لایه‌های نامگذاری شده
    قاعده‌ی بلوک @layer برای لایه‌های نامگذاری شده و ناشناس
    ایجاد لایه و media query
    وارد کردن استایل شیت‌ها به لایه‌های نام‌گذاری شده و ناشناس با استفاده از @import
    مروری بر لایه‌های آبشاری تو در تو
    مزایای لانه سازی لایه ها
    ایجاد لایه‌های آبشاری تو در تو
    تعیین اولویت بر اساس ترتیب لایه‌ها
    ترتیب اولویت لایه‌های آبشاری منظم
    ترتیب اولویت لایه‌های آبشاری تو در تو
    مدیریت جهت‌های مختلف متن
    حالت‌های نوشتاری چیستند؟
    حالت‌های نوشتاری و طرح‌بندی بلوکی و درون‌خطی
    جهت
    ویژگی‌ها و مقادیر منطقی
    ویژگی‌های منطقی حاشیه، مرز و فاصله‌گذاری
    مقادیر منطقی
    آیا باید از ویژگی‌های فیزیکی استفاده کنید یا منطقی؟
    سازماندهی CSS شما
    آیا پروژه شما راهنمای سبک کدنویسی دارد؟
    ثابت قدم باشید
    قالب‌بندی CSS قابل خواندن
    CSS خود را کامنت کنید
    بخش‌های منطقی را در فایل استایل خود ایجاد کنید
    از انتخابگرهای بیش از حد خاص خودداری کنید
    استایل‌شیت‌های بزرگ را به چندین استایل‌شیت کوچک‌تر تقسیم کنید
    ابزارهای دیگری که می‌توانند کمک کنند
    روش‌های CSS
    OOCSS
    BEM
    سایر سیستم‌های رایج
    ساخت سیستم‌هایی برای CSS
    تعریف متغیرها
    کامپایل کردن استایل‌شیت‌های کامپوننت
    آموزش CSS پیشرفته
    استایل‌دهی اولیه متن و فونت
    استایل‌دهی به متن در CSS شامل چه مواردی می‌شود؟
    فونت‌ها
    رنگ
    خانواده‌های فونت
    فونت های در دسترس
    فونت‌های پیش‌فرض
    استک های فونت
    یک مثال از خانواده فونت
    اندازه فونت
    سبک فونت، وزن فونت، تبدیل متن و تزئین متن
    سایه‌های متن
    سایه‌های متعدد
    طرح‌بندی متن
    ترازبندی متن
    ارتفاع خط
    فاصله گذاری حروف و کلمات
    سایر ویژگی هایی که ارزش بررسی دارند
    خلاصه نویسی فونت
    استایل‌دهی به لیست‌ها
    یک مثال ساده از لیست
    مدیریت فاصله‌گذاری لیست‌ها
    سبک‌های خاص لیست
    استایل‌های گلوله‌ای
    موقعیت گلوله
    استفاده از تصویر گلوله شخصی ساز
    خلاصه نویسی به سبک لیست
    کنترل شمارش لیست
    start
    reversed
    value
    استایل‌دهی به لینک‌ها
    حالت‌های یک لینک
    سبک‌های پیش‌فرض
    استایل‌دهی به لینک‌ها
    لینک‌های خودتان را استایل‌دهی کنید
    قرار دادن آیکون روی لینک‌ها
    استایل‌دهی به لینک‌ها به عنوان دکمه
    فونت‌های وب
    خلاصه خانواده‌های فونت
    فونت‌های وب
    افزودن فونت‌های وب خودتان
    پیدا کردن فونت‌ها
    تولید کد مورد نیاز
    پیاده‌سازی کد در نسخه آزمایشی شما
    استفاده از یک سرویس فونت آنلاین
    font-face با جزئیات بیشتر
    مقدمه‌ای بر طرح‌بندی CSS
    جریان طرح‌بندی عادی
    عناصر به طور پیش‌فرض چگونه چیدمان می‌شوند؟
    مثال جریان عادی
    نادیده گرفتن جریان عادی
    سایر تکنیک‌های چیدمان
    float ها
    پس‌زمینه float
    مثالی از نوع float
    شناور کردن جعبه
    تجسم شناور
    پاک کردن شناورها
    جعبه‌های پاکسازی که دور یک شناور پیچیده شده‌اند
    مشکل
    display: flow-root
    موقعیت یابی
    معرفی موقعیت‌یابی position
    موقعیت‌یابی استاتیک static
    موقعیت‌یابی نسبی relative
    معرفی بالا، پایین، چپ و راست
    موقعیت‌یابی مطلق absolute
    زمینه‌های موقعیت‌یابی
    معرفی z-index
    موقعیت‌یابی ثابت fixed
    موقعیت‌یابی چسبنده sticky
    مثال پایه
    فهرست scroll
    فلکس‌باکس
    چرا فلکس باکس؟
    معرفی یک مثال ساده
    مشخص کردن عناصری که باید به عنوان flexbox طرح‌بندی شوند
    The flex model
    ستون‌ها یا ردیف‌ها؟
    بسته بندی
    خلاصه‌سازی جریان flex
    اندازه‌بندی انعطاف‌پذیر آیتم‌های flex
    flex: خلاصه‌نویسی در مقابل طولانی‌نویسی
    تراز افقی و عمودی
    ترتیب دهی به آیتم های فلکس
    flexbox تو در تو
    طرح بندی شبکه ای CSS
    طرح شبکه‌ای چیست؟
    ایجاد شبکه در CSS
    تعریف یک شبکه
    شبکه‌های انعطاف‌پذیر با واحد fr
    شکاف بین خطوط
    تکرار فهرست مسیرها
    شبکه‌های ضمنی و صریح
    تابع minmax
    تعداد ستون‌هایی که جا می‌شوند
    جایگذاری مبتنی بر خط
    موقعیت‌یابی با grid-template-areas
    شبکه‌ها و زیرشبکه‌های تودرتو
    چارچوب‌های شبکه‌ای
    طراحی وب واکنش‌گرا
    پیش درآمدی بر طراحی واکنش‌گرا: طراحی وب موبایل
    معرفی طراحی وب واکنش‌گرا
    media query ها
    فناوری‌های طرح‌بندی واکنش‌گرا
    Flexbox
    شبکه CSS
    تصاویر/رسانه‌های واکنش‌گرا
    تایپوگرافی واکنش‌گرا
    استفاده از مدیا کوئری‌ها برای تایپوگرافی واکنش‌گرا
    استفاده از واحدهای viewport برای تایپوگرافی واکنش‌گرا
    متا تگ viewport
    اصول media query ها
    اصول اولیه مدیا کوئری ها
    انواع رسانه
    قوانین مربوط به ویژگی‌های رسانه‌ای
    عرض و ارتفاع
    جهت گیری
    استفاده از دستگاه‌های اشاره‌گر
    استفاده از سینتکس محدوده‌ای
    مدیا کوئری های پیچیده‌تر
    منطق "and" در کوئری‌های رسانه‌ای
    منطق "or" در کوئری‌های رسانه‌ای
    منطق "not" در کوئری‌های مدیا
    نحوه انتخاب نقاط شکست
    طراحی واکنش‌گرا متناسب با موبایل (mobile-first)
    طراحی موبایل-محور خودتان را بسازید
    شروع به کار
    ایجاد طرح دو ستونه برای عرض‌های متوسط
    اضافه کردن ستون سوم برای صفحات نمایش عریض‌تر
    متای viewport
    آیا واقعاً به یک media query نیاز دارید؟
    طرح‌بندی چند ستونی
    طرح سه ستونه
    تنظیم عرض ستون
    استایل دادن به ستون‌ها
    ستون‌های پوشا
    ستون‌ها و قطعه قطعه شدن
    جعبه‌های تکه‌تکه شده
    تنظیم شکست های درونی
    مثال‌های عملی موقعیت‌یابی
    یک جعبه اطلاعات تب‌بندی‌شده
    تنظیمات عمومی
    استایل‌دهی به تب‌های ما
    استایل دادن به پنل‌ها
    جاوا اسکریپت
    یک جعبه اطلاعات با تب‌های ثابت
    اضافات HTML
    تغییرات در CSS موجود
    استایل‌دهی به محتوای اصلی
    یک پنل مخفی کشویی
    استایل دادن به دکمه
    استایل دادن به پنل
    تنظیم وضعیت بررسی‌شده
    آموزش جاوا اسکریپت مبتدی
    جاوا اسکریپت چیست؟
    تعریف کلی
    خب، واقعاً چه کاری می‌تواند انجام دهد؟
    جاوا اسکریپت در صفحه شما چه کاری انجام می‌دهد؟
    امنیت مرورگر
    ترتیب اجرای جاوا اسکریپت
    کد interpreted در مقابل کد compiled
    کد سمت سرور در مقابل کد سمت کلاینت
    کد پویا (dynamic) در مقابل کد ایستا (static)
    چگونه جاوا اسکریپت را به صفحه خود اضافه کنیم؟
    جاوا اسکریپت داخلی
    جاوا اسکریپت خارجی
    کنترل‌کننده‌های درون‌خطی جاوااسکریپت
    به جای آن از addEventListener استفاده کنید
    استراتژی‌های بارگذاری اسکریپت
    کامنت ها
    اولین نگاه به جاوا اسکریپت
    معرفی مثال «بازی حدس اعداد» ما
    فکر کردن مثل یک برنامه‌نویس
    خلاصه اولیه معماری
    راه اندازی اولیه
    اضافه کردن متغیرها برای ذخیره داده‌هایمان
    توابع Functions
    رشته‌های متنی Strings
    شرط ها Conditionals
    رویدادها Events
    تکمیل قابلیت‌های بازی
    حلقه‌ها Loops
    چه مشکلی پیش آمد؟ عیب‌یابی جاوا اسکریپت
    انواع ارور
    یک مثال ارور
    رفع ارورهای گزارش شده در کنسول
    رفع ارور زمان اجرا
    رفع یک ارور املایی دیگر
    یک ارور منطقی
    طی شدن مسیر منطقی
    سایر ارورهای رایج
    بازی بعد از اولین حدس اشتباه تمام می‌شود
    خطای املایی: وجود نداشتن ) بعد از لیست ورودی های ارزش به تابع
    خطای املایی: وجود نداشتن : بعد از شناسه ویژگی
    خطای املایی: } بعد از بدنه تابع وجود ندارد
    خطای املایی: جای عبارت (expression)، استرینگ است یا خطای املایی: استرینگ شامل یک پرش به خط جدید بدون املای درست است
    ذخیره اطلاعات مورد نیاز - متغیرها
    ابزارهایی که نیاز دارید
    متغیر چیست؟
    مثال متغیر
    بدون متغیر
    تعریف یک متغیر
    مقداردهی اولیه یک متغیر
    نکته‌ای در مورد متغیر var
    به‌روزرسانی یک متغیر
    نگاهی گذرا به قوانین نامگذاری متغیرها
    انواع متغیر
    اعداد numbers
    رشته‌ها string
    بولی‌ها booleans
    آرایه‌ها arrays
    اشیاء objects
    تایپ پویا
    ثابت‌ها در جاوا اسکریپت constants
    چه زمانی از const و چه زمانی از let استفاده کنیم؟
    ریاضیات پایه در جاوا اسکریپت - اعداد و اپراتور ها
    همه عاشق ریاضی هستند
    انواع اعداد
    برای من همه اینها عدد اند
    متدهای مفید اعداد
    تبدیل به انواع داده عددی
    اپراتورهای حسابی
    اولویت اپراتورها
    اپراتورهای افزایش و کاهش
    اپراتورهای انتساب
    اندازه بندی جعبه canvas
    اپراتورهای مقایسه‌ای
    مدیریت متن - رشته‌ها در جاوا اسکریپت
    قدرت کلمات
    تعریف رشته ها string
    علامت نقل قول تکی، علامت نقل قول دوتایی و علامت نقل قول معکوس
    جاسازی جاوا اسکریپت
    اتصال در متن
    اتصال با استفاده از "+"
    گنجاندن عبارات در رشته‌ها
    رشته‌های چندخطی
    گنجاندن نقل قول‌ها در رشته‌ها
    اعداد در مقابل رشته‌ها
    متدهای رشته‌ای مفید
    رشته‌ها به عنوان اشیاء
    پیدا کردن طول یک رشته
    بازیابی یک کاراکتر رشته‌ای خاص
    بررسی اینکه آیا یک رشته حاوی زیررشته است یا خیر
    پیدا کردن موقعیت یک زیر رشته در یک رشته
    استخراج یک زیررشته از یک رشته
    تغییر حالت
    به‌روزرسانی بخش‌هایی از یک رشته
    چالش‌های یادگیری
    فیلتر کردن پیام‌های تبریک
    اصلاح حروف بزرگ
    ساخت رشته‌های جدید از قطعات
    آرایه‌ها
    آرایه چیست؟
    ایجاد آرایه‌ها
    پیدا کردن طول یک آرایه
    دسترسی و تغییر آیتم‌های آرایه
    پیدا کردن شماره آیتم‌ها در یک آرایه
    اضافه کردن آیتم ها
    حذف موارد
    دسترسی به هر مورد
    تبدیل بین رشته‌ها و آرایه‌ها
    تصمیم‌گیری در کد شما - شرط‌ها
    به یه شرط!
    دستورات if...else
    سینتکس پایه if...else
    یک مثال واقعی
    else if
    نکته‌ای در مورد اپراتورهای مقایسه‌ای
    تو در تو سازی if...else
    عملگرهای منطقی: AND، OR و NOT
    دستورات سوئیچ
    یک مثال سوئیچ
    اپراتور سه تکه
    مثال اپراتور سه تکه
    حلقه ها در کد
    چرا حلقه‌ها مفید هستند؟
    مثال کد حلقه
    با حلقه و بدون حلقه
    حلقه زدن روی یک مجموعه
    حلقه for...of
    map و filter
    حلقه for استاندارد
    محاسبه مربع‌ها
    پیمایش مجموعه‌ها با حلقه for
    خروج از حلقه‌ها با break
    رد کردن تکرارها با continue
    while و do...while
    از کدام نوع حلقه باید استفاده کنید؟
    توابع - بلوک‌های کد قابل استفاده مجدد
    توابع رو از کجا پیدا کنم؟
    توابع داخلی مرورگر
    توابع و متدها
    فراخوانی توابع
    پارامترهای تابع
    پارامترهای اختیاری
    پارامترهای پیش‌فرض
    توابع بی نام و توابع پیکانی
    مثال تابع بی نام
    توابع پیکانی arrow functions
    نمونه زنده تابع arrow
    دامنه تابع و تداخلات
    نگاهی گذرا بر حلقه و دامنه شرطی
    تابع خودتان را بسازید
    بیایید یک تابع بسازیم
    تابع پایه
    فراخوانی تابع
    بهبود تابع با پارامترها
    یک پارامتر پیچیده‌تر
    مقادیر برگشتی تابع
    مقادیر بازگشتی چیستند؟
    نحوه برگرداندن یک مقدار
    پیاده‌سازی مقادیر بازگشتی تابع
    چند تا تابع خودت اضافه کن!
    مقدمه‌ای بر رویدادها
    رویداد چیست؟
    یک مثال: مدیریت یک رویداد کلیک
    استفاده از addEventListener
    گوش دادن به رویدادهای دیگر
    حذف شنوندگان رویداد
    اضافه کردن چندین شنونده برای یک رویداد واحد
    سایر مکانیزم‌های شنونده رویداد
    ویژگی‌های کنترل‌کننده رویداد
    کنترل‌کننده‌های رویداد درون‌خطی - از این‌ها استفاده نکنید
    اشیاء رویداد
    ویژگی‌های اضافی اشیاء رویداد
    جلوگیری از رفتار پیش‌فرض
    رویداد ها فقط مختص صفحات وب نیستند
    حباب رویداد
    تنظیم یک شنونده (listener) روی عنصر والد
    مثال حبابی
    مثال پخش کننده ویدیو
    رفع مشکل با stopPropagation
    ثبت رویداد
    نمایندگی رویداد
    target و currentTarget
    اصول اولیه شیء جاوا اسکریپت
    اصول اولیه شیء
    نمادگذاری نقطه‌ای
    اشیاء به عنوان ویژگی‌های اشیاء دیگر
    نمادگذاری با براکت
    تنظیم اعضای شیء
    «this» چیست؟
    معرفی سازنده‌ها
    تمام این مدت داشتید از اشیاء استفاده می‌کردید
    مقدمه‌ای بر اسکریپت‌نویسی DOM
    بخش‌های مهم یک مرورگر وب
    مدل شیء سند
    انجام برخی دستکاری‌های اولیه DOM
    ایجاد و قرار دادن گره‌های جدید
    جابجایی و حذف عناصر
    دستکاری استایل‌ها
    ایجاد درخواست‌های شبکه با جاوا اسکریپت
    مشکل اینجا چیست؟
    Fetch API
    دریافت محتوای متنی
    مثال خود را از یک سرور ارائه دهید
    فروشگاه قوطی
    API مربوط به XMLHttpRequest
    کار با JSON
    json چیست؟
    ساختار JSON
    آرایه‌ها به صورت JSON
    محدودیت‌های سینتکس JSON
    کار با یک مثال JSON
    شروع به کار
    تابع سطح بالا
    پر کردن هدر
    ایجاد کارت‌های اطلاعات قهرمانان
    فراخوانی تابع سطح بالا
    تبدیل بین اشیاء و متن
    اشکال‌زدایی و مدیریت ارور در جاوا اسکریپت
    خلاصه‌ای از انواع خطاهای جاوا اسکریپت
    کد خود را لینت کنید
    افزونه‌های ویرایشگر کد
    مشکلات رایج جاوا اسکریپت
    کنسول جاوا اسکریپت مرورگر
    API کنسول
    console.error و call stack
    رفع ارور
    استفاده از اشکال‌زدای جاوا اسکریپت
    مدیریت ارورهای جاوا اسکریپت در کد شما
    شرطی‌ها
    نمایش خطاهای سفارشی
    try...catch
    تشخیص ویژگی
    پیدا کردن کمک
    آموزش جاوا اسکریپت پیشرفته
    شئ و پروتوتایپ آن
    زنجیره پروتوتایپ
    ویژگی‌های سایه‌ای
    تنظیم پروتوتایپ
    استفاده از Object.create
    با استفاده از سازنده constructor
    ویژگی شخصی
    پروتوتایپ ها و وراثت
    برنامه‌نویسی شیءگرا
    کلاس‌ها و نمونه‌ها
    وراثت
    کپسوله سازی
    OOP و جاوا اسکریپت
    کلاس‌ها در جاوااسکریپت
    کلاس‌ها و سازنده‌ها
    حذف سازنده‌ها
    وراثت
    کپسوله سازی
    متدهای خصوصی
    جاوا اسکریپت ناهمزمان
    برنامه‌نویسی همزمان
    یک تابع همگام با اجرای طولانی مدت
    مشکل توابع همگام با اجرای طولانی مدت
    گرداننده‌های رویداد
    Callback ها
    نحوه استفاده از promise
    استفاده از fetch API
    زنجیر کردن promiseها
    گرفتن ارورها
    اصطلاحات promise
    ترکیب چندین promise
    async و await
    نحوه پیاده‌سازی یک API مبتنی بر promise
    پیاده‌سازی API مربوط به alarm
    بسته‌بندی setTimeout
    سازنده‌ی Promise
    استفاده از API مربوط به alarm
    استفاده از async و await با API مربوط به alarm
    معرفی workerها
    استفاده از web worker
    تولیدکننده‌ی همزمان عدد اول
    تولیدکننده‌ی عدد اول با worker
    انواع دیگر worker
    ابزار و نرم افزارها
    چگونه از گیت‌هاب استفاده کنم؟
    انتشار محتوا
    تنظیمات اولیه گیت‌هاب
    آماده‌سازی کد برای آپلود
    نگاهی گذرا به رابط‌های خط فرمان
    ایجاد یک مخزن (repo) برای کد شما
    آپلود فایل‌های شما در گیت‌هاب
    دانش بیشتر در مورد گیت‌هاب
    چگونه مطمئن شویم که وب‌سایت ما به درستی کار می‌کند؟
    در مرورگر خود تست کنید
    تصویر کجاست؟
    وضعیت‌های HTTP
    رفع خطای ۴۰۴
    ارور های رایج
    غلط املایی در آدرس
    خطاهای ۴۰۴
    خطاهای جاوا اسکریپت
    موارد بیشتر برای بررسی
    سرعت اجرا
    آیا سرور به اندازه کافی پاسخگو است؟
    یک چک لیست ساده
    چگونه یک سرور تست محلی راه‌اندازی کنیم؟
    فایل‌های محلی در مقابل فایل‌های راه دور
    مشکل در آزمایش فایل‌های محلی
    اجرای یک سرور HTTP محلی ساده
    استفاده از یک افزونه در ویرایشگر کد شما
    استفاده از Node.js
    استفاده از پایتون
    اجرای زبان‌های سمت سرور به صورت محلی
    چگونه فایل‌های خود را روی یک سرور وب آپلود کنیم؟
    خلاصه
    SFTP
    ورود به سیستم
    اینجا و آنجا: نمای محلی و از راه دور
    آپلود روی سرور
    آیا واقعاً آنلاین هستند؟
    Rsync
    ابزارهای رابط کاربری گرافیکی Rsync
    GitHub
    روش‌های دیگر برای آپلود فایل‌ها
    ابزارهای توسعه‌دهنده مرورگر چیست؟
    نحوه باز کردن ابزارهای توسعه (devtools) در مرورگر
    بررسی DOM inspector
    بررسی ویرایشگر CSS
    اشکال‌زدای جاوا اسکریپت
    بررسی دیباگر
    فهرست فایل‌ها
    کد منبع
    عبارات و نقاط توقف را تماشا کنید
    اطلاعات بیشتر
    کنسول جاوا اسکریپت
    اطلاعات بیشتر
    راهنمای HTML
    راهنمای HTML برای سینتکس و اعمال رایج
    عناصر درون‌خطی
    عناصر بلوک
    استفاده از اعتبارسنجی فرم HTML و API اعتبارسنجی محدودیت
    محدودیت‌های ذاتی و اساسی
    انواع input معنایی
    ویژگی‌های مرتبط با اعتبارسنجی
    فرآیند اعتبارسنجی محدودیت
    محدودیت‌های پیچیده با استفاده از API اعتبارسنجی محدودیت
    محدودیت ترکیب چندین فیلد: اعتبارسنجی کد پستی
    محدود کردن حجم فایل قبل از آپلود
    استایل‌دهی بصری اعتبارسنجی محدودیت‌ها
    دسته بندی محتوا
    محتوای فراداده metadata
    محتوای جریان flow
    محتوای بخش‌بندی section
    محتوای عنوان heading
    محتوای جمله‌بندی شده phrase
    محتوای جاسازی‌شده embed
    محتوای تعاملی interactive
    محتوای ملموس palpable
    عناصر بدون دسته بندی
    عناصر پشتیبان اسکریپت
    محتوای مرتبط با فرم
    مدل محتوای شفاف
    استفاده از فرمت‌های تاریخ و زمان در HTML
    مثال‌ها
    مبانی
    سال شمارها
    سال‌های کبیسه
    ماه‌های سال
    روزهای ماه
    رشته‌های هفته
    رشته‌های ماه
    رشته‌های تاریخ
    رشته‌های زمانی
    رشته‌های تاریخ و زمان محلی
    رشته‌های تاریخ و زمان سراسری
    رشته اختلاف در منطقه‌های زمانی
    مشکلات مربوط به تاریخ
    مشکل Y2K38 (اغلب سمت سرور)
    مشکل Y10k (اغلب از سمت کلاینت)
    استفاده از میکرودیتا در HTML
    واژگان
    محلی سازی
    ویژگی‌های سراسری
    مثال
    استفاده از میکروفرمت‌ها در HTML
    نحوه کار میکروفرمت‌ها
    موارد استفاده از میکروفرمت‌ها
    پیشوندهای میکروفرمت
    h-card
    مثال h-card تو در تو
    h-entry
    مثال h-entry پاسخ تجزیه‌شده
    h-feed
    h-event
    مثال h-event تجزیه‌شده‌
    مثال‌هایی از ویژگی‌های rel در میکروفرمت‌ها
    rel=author
    rel=license
    rel=nofollow
    درک ویژگی‌ها و حالت‌های استاندارد
    مرورگرها چگونه تشخیص می‌دهند که از کدام حالت استفاده کنند؟
    XHTML
    چطور ببینم از کدام حالت استفاده شده است؟
    استفاده از تصاویر واکنش‌گرا در HTML
    چرا تصاویر واکنش‌گرا؟
    چگونه تصاویر واکنش‌گرا (ریسپانسیو) ایجاد کنیم؟
    تغییر وضوح: اندازه‌های مختلف
    تغییر وضوح: اندازه یکسان، وضوح‌های متفاوت
    جهت هنری
    چرا نمی‌توانیم این کار را فقط با استفاده از CSS یا جاوا اسکریپت انجام دهیم؟
    پیاده‌سازی تصاویر واکنش‌گرای خودتان
    مرجع عناصر HTML
    عنصر <a>
    امتحانش کنید
    ویژگی‌ها
    ویژگی‌های منسوخ‌شده
    متن لینک ضعیف و غیرقابل دسترسی
    متن لینک قوی و قابل دسترسی
    رویدادهای onclick
    لینک‌های خارجی و لینک دادن به منابع غیر HTML
    لینکی که یک برگه/پنجره جدید باز می‌کند
    لینک به یک منبع غیر HTML
    لینک پرش
    سایز
    مجاورت
    لینک دادن به یک URL مطلق
    لینک دادن به URL های نسبی
    لینک دادن به یک عنصر در همان صفحه
    لینک دادن به یک آدرس ایمیل
    لینک دادن به شماره تلفن‌ها
    استفاده از ویژگی دانلود برای ذخیره <canvas> به عنوان PNG
    نمونه برنامه نقاشی با لینک ذخیره
    امنیت و حریم خصوصی
    خلاصه فنی
    نقش‌های مجاز ARIA
    عنصر <abbr>
    امتحانش کنید
    ویژگی‌ها
    موارد استفاده رایج
    ملاحظات دستوری
    استایل پیش‌فرض
    دسترسی‌پذیری
    علامت‌گذاری یک اختصار از نظر معنایی
    اختصارات استایل‌دهی
    فراهم کردن امکان گسترش
    تعریف یک اختصار
    عنصر <acronym> (منسوخ)
    ویژگی‌ها
    رابط DOM
    مثال
    استایل پیش‌فرض
    عنصر <address>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    مثال
    عنصر <area>
    امتحانش کنید
    ویژگی‌ها
    تصویر با نواحی قابل کلیک
    عنصر <article>
    Try it
    ویژگی‌ها
    یادداشت‌های استفاده
    مثال
    عنصر <aside>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    استفاده از <aside>
    عنصر <audio>
    امتحانش کنید
    ویژگی‌ها
    رویدادها
    یادداشت‌های استفاده
    استایل‌دهی با CSS
    تشخیص اضافه شدن و حذف شدن آهنگ‌ها
    دسترسی‌پذیری
    کاربرد اولیه
    عنصر <audio> به همراه عنصر <source>
    <audio> با چندین عنصر <source>
    عنصر <b>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    مثال
    عنصر <base>
    ویژگی‌ها
    چندین عنصر <base>
    لینک های درون صفحه‌ای
    هدف ممکن است شامل خط جدید ASCII، تب یا < نباشد
    Open Graph
    مثال
    عنصر <bdi>
    امتحانش کنید
    ویژگی‌ها
    بدون bdi و فقط با LTR
    بدون bdi با متن RTL
    استفاده از bdi با متن LTR و RTL
    عنصر <bdo>
    امتحانش کنید
    ویژگی‌ها
    مثال
    یادداشت‌ها
    عنصر <big> (منسوخ)
    ویژگی‌ها
    استفاده از big
    استفاده از اندازه فونت در CSS
    رابط DOM
    عنصر <blockquote>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    مثال
    عنصر <body>
    ویژگی‌ها
    ویژگی‌های رویداد
    ویژگی‌های منسوخ‌شده
    مثال
    عنصر <br>
    امتحانش کنید
    ویژگی‌ها
    ویژگی‌های منسوخ‌شده
    استایل‌دهی با CSS
    دسترسی‌پذیری
    br ساده
    عنصر <button>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌ها
    دکمه‌های آیکون
    سایز
    مجاورت
    اطلاعات حالت ARIA
    استایل‌های دکمه
    کلیک و فوکوس
    ایجاد یک دکمه پایه
    استفاده از مقدار request-close برای ویژگی command
    HTML
    عنصر <canvas>
    ویژگی‌ها
    محتوای جایگزین
    تگ پایانی <canvas>
    اندازه‌گذاری canvas با استفاده از CSS در مقابل HTML
    حداکثر اندازه canvas
    استفاده از canvas خارج از صفحه
    دسترسی پذیری:‌ محتوای جایگزین
    مثال
    عنصر <caption>
    امتحانش کنید
    ویژگی‌ها
    ویژگی‌های منسوخ‌شده
    یادداشت‌های استفاده
    مثال
    جدول با عنوان
    HTML
    عنصر <center> (منسوخ)
    رابط DOM
    مثال ۱
    مثال ۲ (جایگزین CSS)
    مثال ۳ (جایگزین CSS)
    عنصر <cite>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    مثال
    عنصر <code>
    امتحانش کنید
    ویژگی‌ها
    مثال
    یادداشت‌ها
    عنصر <col>
    امتحانش کنید
    ویژگی‌ها
    ویژگی‌های منسوخ‌شده
    یادداشت‌های استفاده
    مثال
    عنصر <colgroup>
    امتحانش کنید
    ویژگی‌ها
    ویژگی‌های منسوخ‌شده
    یادداشت‌های استفاده
    مثال
    عنصر <data>
    امتحانش کنید
    ویژگی‌ها
    مثال
    عنصر <datalist>
    امتحانش کنید
    ویژگی‌ها
    دسترسی‌پذیری
    انواع متنی
    انواع تاریخ و زمان
    نوع محدوده
    نوع رنگ
    عنصر <dd>
    امتحانش کنید
    ویژگی‌ها
    مثال
    عنصر <del>
    امتحانش کنید
    ویژگی‌ها
    دسترسی‌پذیری
    مثال
    عنصر <details>
    امتحانش کنید
    ویژگی‌ها
    رویدادها
    یک مثال افشای اطلاعات اولیه
    ایجاد یک جعبه افشای اطلاعات عمومی
    چندین جعبه افشای نام‌گذاری شده
    سفارشی‌سازی ظاهر
    عنصر <dfn>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    مشخص کردن اصطلاح مورد تعریف
    لینک‌ها به عناصر <dfn>
    شناسایی اولیه یک اصطلاح
    پیوند به تعاریف
    استفاده از اختصارات و تعاریف در کنار هم
    عنصر <dialog>
    ویژگی‌ها
    توضیحات
    کنترل دیالوگ‌ها با استفاده از جاوا اسکریپت
    دیالوگ‌های مودال با استفاده از دستورات invoker
    دیالوگ‌های غیرمودال با استفاده از دستورات popover
    بستن dialog
    استایل‌دهی CSS
    یادداشت‌های تکمیلی
    دسترسی‌پذیری
    ویژگی‌های HTML رابط برنامه‌نویسی کاربردی فرمان Invoker
    ویژگی‌های HTML API مربوط به Popover
    استفاده از ویژگی open در dialog
    ایجاد یک دیالوگ modal
    مدیریت مقدار برگشتی از کادر dialog
    بستن یک dialog با ورودی فرم الزامی
    مقایسه رفتارهای مختلف closedby
    انیمیشن در دیالوگ‌ها
    transition برای عنصر dialog
    انیمیشن‌های keyframe دیالوگ
    عنصر <dir> (منسوخ)
    رابط DOM
    ویژگی‌ها
    عنصر <div>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    دسترسی‌پذیری
    یک مثال اساسی
    یک مثال استایل شده
    عنصر <dl>
    امتحانش کنید
    ویژگی‌ها
    دسترسی‌پذیری
    مثال تک‌جمله و توضیح
    مثال چندین اصطلاح، یک توضیح
    مثال یک اصطلاح، چندین توصیف
    مثال اصطلاحات و توضیحات متعدد
    فراداده
    قرار دادن گروه‌های نام-مقدار در عناصر div
    یادداشت‌ها
    عنصر <dt>
    امتحانش کنید
    ویژگی‌ها
    مثال
    عنصر <em>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    <i> در مقابل <em>
    مثال
    عنصر <embed>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    دسترسی‌پذیری
    مثال
    عنصر <fencedframe> (آزمایشی)
    ویژگی‌ها
    سیاست‌های دسترسی موجود برای fencedframe
    فوکوس کردن در fencedframe
    موقعیت‌یابی و مقیاس‌بندی
    دسترسی‌پذیری
    مثال
    عنصر <fieldset>
    امتحانش کنید
    ویژگی‌ها
    استایل‌دهی با CSS
    مثال
    فیلدست غیرفعال
    عنصر <figcaption>
    امتحانش کنید
    ویژگی‌ها
    مثال
    عنصر <figure>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    تصاویر
    قطعه کدها
    نقل قول‌ها
    اشعار
    عنصر <font> (منسوخ)
    ویژگی‌ها
    رابط DOM
    عنصر <footer>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    دسترسی‌پذیری
    مثال
    عنصر <form>
    امتحانش کنید
    ویژگی‌ها
    ویژگی‌های ارسال فرم
    مثال
    عنصر <frame> (منسوخ)
    ویژگی‌ها
    یک سند frameset
    عنصر <frameset> (منسوخ)
    ویژگی‌ها
    مثال
    عنصر <geolocation> (آزمایشی)
    ویژگی‌ها
    توضیحات
    ارتباط با API موقعیت جغرافیایی
    تنظیم زبان دکمه
    محتوای جایگزین
    مسدود کردن <geolocation>
    محدودیت‌های استایل‌دهی
    محدودیت‌های دسترسی
    محدودیت‌های ارزش
    محدودیت‌های پیچیده
    ویژگی‌هایی که می‌توانند به طور معمول تنظیم شوند
    دسترسی‌پذیری
    مثال استفاده اولیه
    عنصر های <h1>-<h6>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    از استفاده از چندین عنصر <h1> در یک صفحه خودداری کنید
    تعیین اندازه فونت یکنواخت برای <h1>
    ناوبری
    برچسب‌گذاری محتوای بخش
    همه سرفصل‌ها
    عنصر <head>
    ویژگی‌ها
    مثال
    عنصر <header>
    امتحانش کنید
    یادداشت‌های استفاده
    کاربرد تاریخی
    ویژگی‌ها
    دسترسی‌پذیری
    سربرگ صفحه
    سربرگ مقاله
    عنصر <hgroup>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    مثال‌ها
    عنصر <hr>
    امتحانش کنید
    ویژگی‌ها
    مثال
    عنصر <html>
    ویژگی‌ها
    دسترسی‌پذیری
    مثال
    عنصر <i>
    امتحانش کنید
    ویژگی‌ها
    یادداشت‌های استفاده
    مثال
    عنصر <iframe>
    امتحانش کنید
    ویژگی‌ها
    ویژگی‌های منسوخ‌شده
    اسکریپت نویسی
    ناوبری بالا در فریم‌های با مبدا متقابل
    موقعیت‌یابی و مقیاس‌بندی
    رفتار رویدادهای error و load
    دسترسی‌پذیری
    یک <iframe> ساده
    جاسازی کد منبع در <iframe>
    عنصر <img>
    امتحانش کنید
    فرمت‌های تصویر پشتیبانی‌شده
    خطاهای بارگذاری تصویر
    ویژگی‌ها
    ویژگی‌های منسوخ‌شده
    استایل‌دهی با CSS
    نوشتن توضیحات جایگزین معنادار
    شناسایی SVG به عنوان تصویر
    ویژگی عنوان
    مثال متن جایگزین
    لینک تصویری
    استفاده از ویژگی srcset
    استفاده از ویژگی‌های srcset و sizes
    نگرانی‌های امنیتی و حریم خصوصی
  • صفحه اصلیتمام مستنداتتست کددرباره سایت
تمام مستندات>مرجع عناصر HTML>عنصر <bdo>

آموزش HTML

• اصول اولیه HTML

- HTML چیست؟

- آناتومی یک عنصر HTML

- ایجاد اولین عنصر HTML شما

- عناصر تودرتو

- عناصر خالی

- ویژگی ها

- افزودن ویژگی‌ها به یک عنصر

- ویژگی های بولی

- حذف علامت نقل قول در اطراف مقادیر ویژگی‌ها

- نقل قول تکی یا دوتایی؟

- آناتومی یک سند HTML

- فضای خالی در HTML

- ارجاعات کاراکتری: اضافه کردن کاراکترهای ویژه در HTML

- کامنت های HTML

• متا دیتای صفحه وب

- سربرگ HTML چیست؟

- افزودن عنوان

- فراداده: عنصر <meta>

- مشخص کردن کدگذاری کاراکتر سند شما

- افزودن نویسنده و توضیحات

- بررسی کاربرد توضیحات در موتورهای جستجو

- انواع دیگر فراداده

- اضافه کردن آیکون‌های شخصی ساز به سایت

- اعمال CSS و جاوا اسکریپت به HTML

- تنظیم زبان اصلی سند

• سرفصل‌ها و پاراگراف‌ها

- سرفصل‌ها و پاراگراف‌ها

- اجرای سلسله مراتب ساختاری

- چرا به ساختار نیاز داریم؟

- چرا به معناشناسی نیاز داریم؟

• تأکید و اهمیت

- تأکید و اهمیت چیست؟

- تأکید

- اهمیت قوی

- ایتالیک، بولد، زیرخط‌دار…

• لیست ها

- لیست های نامرتب

- مرتب

- لیست های تودرتو

- لیست های توضیحات

- مثال لیست توضیحات

- چندین توضیح برای یک آیتم

• ویژگی های پیشرفته‌ی متن

- نقل قول ها

- نقل قول های بلوکی

- نقل قول های درون خطی

- نقل قول ها <cite>

- اختصارات

- علامت‌گذاری اطلاعات تماس

- بالانویس و زیرنویس

- نمایش کد کامپیوتر

- علامت‌گذاری زمان‌ها و تاریخ‌ها

• ساختاردهی اسناد

- بخش‌های اساسی یک سند

- سرصفحه ها

- نوار ناوبری

- محتوای اصلی

- نوار کناری

- پاورقی

- HTML برای ساختاردهی محتوا

- عناصر طرح‌بندی HTML با جزئیات بیشتر

- بسته‌بندی‌های غیرمعنایی

- شکست خطوط و خطکش افقی

- <br>: عنصر شکست خط

- <hr>: عنصر شکست موضوعی

- ساختاردهی یک وب‌سایت پایه

• ایجاد لینک‌ها

- هایپرلینک چیست؟

- آناتومی یک لینک

- لینک‌های سطح بلوک

- لینک‌های تصویر

- افزودن اطلاعات پشتیبانی با ویژگی عنوان

- مقدمه‌ای سریع بر URLها و مسیرها

- همان دایرکتوری

- حرکت به سمت پایین و زیرشاخه‌ها

- بازگشت به دایرکتوری‌های والد

- پیوند دادن نسبت به دایرکتوری ریشه

- لینک دادن با URL های کامل

- لینک‌های داخلی و خارجی

- قطعات سند

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

- بهترین شیوه‌های لینک

- از متن لینک واضح استفاده کنید

- لینک دادن به منابع غیر HTML - علائم راهنمایی واضح بگذارید

- هنگام پیوند به یک فایل دانلود، از ویژگی دانلود استفاده کنید

- چه زمانی لینک‌ها را در تب جدید باز کنیم؟

- ایجاد منوی ناوبری

- لینک‌های ایمیل

- مشخص کردن جزئیات

• تصاویر

- چگونه یک تصویر را در صفحه وب قرار دهیم؟

- متن جایگزین

- عرض و ارتفاع

- تغییر اندازه تصاویر

- عنوان‌های تصویر

- دارایی‌های رسانه‌ای و مجوزها

- آشنایی با انواع مجوزها

- مالکیت عمومی/CC0

- جستجوی تصاویر دارای مجوز مجاز

- حاشیه‌نویسی تصاویر با شکل‌ها و زیرنویس شکل‌ها

- تصاویر پس زمینه CSS

• ویدئو و صوت HTML

- ویدئو و صدا در وب

- عنصر <video>

- استفاده از چندین قالب منبع برای بهبود سازگاری

- محتویات یک فایل رسانه‌ای

- پشتیبانی از فایل‌های رسانه‌ای در مرورگرها

- سایر ویژگی‌های <video>

- عنصر <audio>

- نمایش مسیر خطی ویدیوها

• اصول اولیه جدول HTML

- جدول چیست؟

- یک جدول چگونه کار می‌کند؟

- چه زمانی باید از جداول HTML اجتناب کنید؟

- اضافه کردن سرفصل با عناصر <th>

- چرا سرفصل‌ها مفید هستند؟

- اجازه دادن به سلول‌ها برای گسترش در چندین ردیف و ستون

- گروه بندی ستون ها با <colgroup> و <col>

• دسترسی‌پذیری جدول HTML

- استفاده از سرستون‌ها و سر سطرها

- اضافه کردن عنوان به جدول با استفاده از <caption>

- افزودن ساختار با <thead> و <tbody> و <tfoot>

- افزودن ساختار به جدول ثبت هزینه‌ها

- ویژگی scope

- ویژگی‌های id و headers

• فرم‌ها و دکمه‌ها در HTML

- تعامل با کاربران

- دکمه‌ها

- آناتومی یک فرم

- عنصر <form>

- ساختاربندی فرم‌ها

- عناصر <input>

- ویژگی‌های required و value در عمل

- ورودی‌های فیلد متنی تخصصی

- عناصر <label>

- برچسب‌های فرم صریح و ضمنی

- عنصر <button>

- نکته‌ای فرعی در مورد دسترسی‌پذیری

- انواع دیگر کنترل

- دکمه‌های رادیویی

- غیرفعال کردن کنترل‌های فرم

- کادرهای انتخاب

- منوهای کشویی

- فیلدهای ورودی متن چند خطی

- اعتبارسنجی فرم

• اشکال‌زدایی HTML

- اشکال زدایی ترسناک نیست

- HTML و اشکال‌زدایی

- استفاده از بازرس DOM

- نوبت شما: مطالعه HTML با استفاده از DOM inspector

- اعتبارسنجی HTML

- تفسیر پیام‌های خطا

• گنجاندن گرافیک‌های برداری در HTML

- گرافیک برداری چیست؟

- SVG چیست؟

- اضافه کردن SVG به صفحات شما

- راه سریع: عنصر img

- عیب‌یابی و پشتیبانی از مرورگرهای مختلف

- چگونه کد SVG را در HTML خود قرار دهیم

- نحوه جاسازی SVG با iframe

• از object تا iframe - فناوری‌های عمومی جاسازی

- تاریخچه کوتاهی از جاسازی

- iframe ها با جزئیات

- نگرانی‌های امنیتی

- فقط در صورت لزوم جاسازی کنید

- از HTTPS استفاده کنید

- همیشه از ویژگی sandbox استفاده کنید

- پیکربندی دستورالعمل‌های CSP

- عناصر <embed> و <object>

آموزش CSS مبتدی

• CSS چیست؟

- استایل‌های پیش‌فرض مرورگر

- CSS برای چیست؟

- اصول اولیه سینتکس CSS

- CSS چگونه به HTML اعمال می‌شود؟

• شروع کار با CSS

- شروع با مقداری HTML

- اضافه کردن CSS به سند

- استایل دهی خارجی

- قرار دادن استایل‌شیت‌ها در مکان‌های مختلف

- استایل دهی داخلی

- استایل‌های درون‌خطی

- استفاده از انتخابگرهای رایج

- انتخاب عناصر HTML

- اضافه کردن کلاس

- استایل‌دهی به چیزها بر اساس موقعیت آنها در سند

- استایل‌دهی به چیزها بر اساس حالت (state)

- ترکیب انتخابگرها و ترکیب‌کننده‌ها

- سایر ویژگی‌های سینتکس CSS

- توابع

- تابع calc

- توابع تبدیل

- قوانین @

- ویژگی‌های مختصرنویسی

- کامنت‌های CSS

- فضای خالی در CSS

• انتخابگرهای CSS پایه

- انتخابگر (selector) چیست؟

- انتخابگرهای نوع (Type)

- انتخابگرهای کلاس (Class)

- هدف قرار دادن کلاس‌ها روی عناصر خاص

- انتخاب عنصری که بیش از یک کلاس دارد

- انتخابگرهای شناسه (ID)

- لیست‌های انتخابگر

- انتخابگرهای نامعتبر در فهرست‌های انتخابگر

- انتخابگر جهانی

- استفاده از انتخابگر سراسری برای خواناتر کردن انتخابگرهایتان

• انتخابگرهای ویژگی

- انتخابگرهای حضور و ارزش

- انتخابگرهای تطبیق زیررشته

• شبه کلاس‌ها و شبه عناصر

- شبه کلاس چیست؟

- مثال پایه‌ای از شبه کلاس

- شبه کلاس‌های تعامل کاربر

- شبه عنصر چیست؟

- ترکیب شبه کلاس‌ها و شبه عناصر

- تولید محتوا با before و after

- آیکون‌های محتوای تولید شده

- اشکال تولید شده

• ترکیب‌کننده‌ها

- ترکیب‌کننده‌ی نسلی

- ترکیب‌کننده فرزند

- ترکیب‌کننده‌ی sibling بعدی مستقیم

- ترکیب‌کننده‌ی sibling بعدی غیرمستقیم

- ترکیب ترکیب‌کننده‌ها با انتخاب‌کننده‌ها

• مدل جعبه‌ای

- جعبه‌های بلوکی و درون‌خطی

- انواع نمایشگر داخلی و خارجی

- نمونه‌هایی از انواع مختلف نمایشگر

- مدل جعبه‌ای CSS چیست؟

- قطعات یک جعبه

- مدل جعبه‌ای استاندارد CSS

- مدل جعبه‌ای جایگزین CSS

- استفاده از ابزارهای توسعه مرورگر برای مشاهده مدل جعبه‌ای

- مارجین‌ها، فاصله‌گذاری و حاشیه‌ها

- مارجین margin

- فروپاشی مارجین

- مرزها (حاشیه ها) border

- پدینگ padding

- مدل جعبه‌ای و جعبه‌های درون‌خطی

- استفاده از نمایش: inline-block

• رسیدگی به مغایرت ها

- قوانین متناقض

- آبشاری cascade

- مشخصه specificity

- وراثت inheritance

- درک چگونگی تعامل مفاهیم با یکدیگر

- درک وراثت

- کنترل وراثت

- تنظیم مجدد تمام مقادیر ویژگی‌ها

- درک آبشار

- ترتیب منبع

- مشخصه

- مثالی عمیق‌تر از جزئیات

- شناسه‌ها در مقابل کلاس‌ها

- استایل‌های درون‌خطی

- مهم!

- تأثیر مکان CSS

- ترتیب اعلان‌های برتر

• مقادیر و واحدهای CSS

- مقدار CSS چیست؟

- اعداد، طول‌ها و درصدها

- طول‌ها

- واحدهای طول مطلق

- واحدهای طول نسبی

- بررسی یک مثال

- em و rem

- درصدها

- اعداد

- رنگ color

- کلمات کلیدی رنگی

- مقادیر RGB هگزادسیمال

- مقادیر RGB

- یک مثال RGB با opacity

- استفاده از hue برای مشخص کردن یک رنگ

- HWB

- HSL

- تصاویر image

- موقعیت position

- رشته‌ها string و شناسه‌ها id

- توابع

- توابع ریاضی

• اندازه بندی آیتم ها در CSS

- اندازه طبیعی یا ذاتی آیتم ها

- تنظیم اندازه خاص

- استفاده از درصدها

- مارجین و پدینگ درصدی

- حداقل و حداکثر اندازه‌ها

- حداکثر عرض روی تصاویر max-width

- واحدهای viewport

• پس‌زمینه‌ها و حاشیه‌ها

- رنگ‌های پس‌زمینه

- تصاویر پس زمینه

- کنترل تکرار پس‌زمینه

- اندازه بندی تصویر پس زمینه

- قرار دادن تصویر پس زمینه

- پس‌زمینه‌های گرادیان

- تصاویر پس زمینه چندگانه

- پیوست پس‌زمینه

- استفاده از ویژگی مختصر نویسی background

- ملاحظات دسترسی پس زمینه

- حاشیه ها

- گوشه‌های گرد

• محتوای سرریز شده

- overflow یا سرریز چیست؟

- CSS تلاش می‌کند از «از دست رفتن داده‌ها» جلوگیری کند

- ویژگی overflow

- پنهان کردن محتوای سرریز شده

- اسکرول محتوای سرریز شده

- نمایش دادن اسکرول بار فقط درصورت نیاز

- سرریز ناخواسته در طراحی وب

• تصاویر، رسانه‌ها و عناصر فرم

- عناصر جایگزین شده

- اندازه بندی تصاویر

- مدیریت مشکلات نمایش تصویر با object-fit

- عناصر جایگزین شده در طرح بندی

- عناصر فرم

- استایل‌دهی به عناصر ورودی متن

- نرمال‌سازی رفتار فرم

- وراثت و عناصر فرم

- عناصر فرم و اندازه‌بندی جعبه‌ای

- سایر تنظیمات مفید

- درست کردن همه چیز با "reset"

• استایل‌دهی جداول

- یک جدول HTML معمولی

- شروع استایل‌دهی به جدول

- به‌روزرسانی فونت

- فاصله گذاری

- ترازبندی

- اضافه کردن حاشیه

- نوار گورخری

- استایل دادن به کپشن ها

- نکات ریز استایل‌دهی جداول

• اشکال‌زدایی CSS

- نحوه دسترسی به DevTools مرورگر

- DOM در مقابل منبع نمایش

- بررسی CSS اعمال شده

- ویرایش مقادیر

- افزودن یک ویژگی جدید

- درک مدل جعبه‌ای

- حل مسائل مربوط به مشخصه‌ها

- مشکلات اشکال‌زدایی در CSS

- از مشکل یک قدم عقب بروید

- آیا HTML و CSS معتبری دارید؟

- آیا ویژگی و مقدار توسط مرورگری که در آن آزمایش می‌کنید پشتیبانی می‌شوند؟

- آیا چیز دیگری CSS شما را نادیده گرفته است؟

- یک مورد آزمایشی کوچک‌شده از مشکل ایجاد کنید

• جلوه‌های پیشرفته استایل‌دهی

- سایه Box shadow

- یک box shadow ساده

- box shadow در تعداد

- سایر ویژگی‌های box shadow

- فیلترها

- حالت‌های ترکیبی

- حالت ترکیبی پس‌زمینه background-blend-mode

- حالت ترکیبی mix-blend-mode

- اشکال CSS

- -webkit-background-clip: text

• لایه‌های آبشاری

- بررسی مفهوم آبشار

- منشأ و آبشار

- منشأ و ویژگی

- مروری بر لایه‌های آبشاری

- ترتیب اولویت لایه آبشاری

- مسائلی که لایه‌های آبشاری می‌توانند حل کنند

- مسائلی که لایه‌های آبشاری تو در تو می‌توانند حل کنند

- ایجاد لایه‌های آبشاری

- دستور @layer در قاعده برای لایه‌های نامگذاری شده

- قاعده‌ی بلوک @layer برای لایه‌های نامگذاری شده و ناشناس

- ایجاد لایه و media query

- وارد کردن استایل شیت‌ها به لایه‌های نام‌گذاری شده و ناشناس با استفاده از @import

- مروری بر لایه‌های آبشاری تو در تو

- مزایای لانه سازی لایه ها

- ایجاد لایه‌های آبشاری تو در تو

- تعیین اولویت بر اساس ترتیب لایه‌ها

- ترتیب اولویت لایه‌های آبشاری منظم

- ترتیب اولویت لایه‌های آبشاری تو در تو

• مدیریت جهت‌های مختلف متن

- حالت‌های نوشتاری چیستند؟

- حالت‌های نوشتاری و طرح‌بندی بلوکی و درون‌خطی

- جهت

- ویژگی‌ها و مقادیر منطقی

- ویژگی‌های منطقی حاشیه، مرز و فاصله‌گذاری

- مقادیر منطقی

- آیا باید از ویژگی‌های فیزیکی استفاده کنید یا منطقی؟

• سازماندهی CSS شما

- آیا پروژه شما راهنمای سبک کدنویسی دارد؟

- ثابت قدم باشید

- قالب‌بندی CSS قابل خواندن

- CSS خود را کامنت کنید

- بخش‌های منطقی را در فایل استایل خود ایجاد کنید

- از انتخابگرهای بیش از حد خاص خودداری کنید

- استایل‌شیت‌های بزرگ را به چندین استایل‌شیت کوچک‌تر تقسیم کنید

- ابزارهای دیگری که می‌توانند کمک کنند

- روش‌های CSS

- OOCSS

- BEM

- سایر سیستم‌های رایج

- ساخت سیستم‌هایی برای CSS

- تعریف متغیرها

- کامپایل کردن استایل‌شیت‌های کامپوننت

آموزش CSS پیشرفته

• استایل‌دهی اولیه متن و فونت

- استایل‌دهی به متن در CSS شامل چه مواردی می‌شود؟

- فونت‌ها

- رنگ

- خانواده‌های فونت

- فونت های در دسترس

- فونت‌های پیش‌فرض

- استک های فونت

- یک مثال از خانواده فونت

- اندازه فونت

- سبک فونت، وزن فونت، تبدیل متن و تزئین متن

- سایه‌های متن

- سایه‌های متعدد

- طرح‌بندی متن

- ترازبندی متن

- ارتفاع خط

- فاصله گذاری حروف و کلمات

- سایر ویژگی هایی که ارزش بررسی دارند

- خلاصه نویسی فونت

• استایل‌دهی به لیست‌ها

- یک مثال ساده از لیست

- مدیریت فاصله‌گذاری لیست‌ها

- سبک‌های خاص لیست

- استایل‌های گلوله‌ای

- موقعیت گلوله

- استفاده از تصویر گلوله شخصی ساز

- خلاصه نویسی به سبک لیست

- کنترل شمارش لیست

- start

- reversed

- value

• استایل‌دهی به لینک‌ها

- حالت‌های یک لینک

- سبک‌های پیش‌فرض

- استایل‌دهی به لینک‌ها

- لینک‌های خودتان را استایل‌دهی کنید

- قرار دادن آیکون روی لینک‌ها

- استایل‌دهی به لینک‌ها به عنوان دکمه

• فونت‌های وب

- خلاصه خانواده‌های فونت

- فونت‌های وب

- افزودن فونت‌های وب خودتان

- پیدا کردن فونت‌ها

- تولید کد مورد نیاز

- پیاده‌سازی کد در نسخه آزمایشی شما

- استفاده از یک سرویس فونت آنلاین

- font-face با جزئیات بیشتر

• مقدمه‌ای بر طرح‌بندی CSS

- جریان طرح‌بندی عادی

- عناصر به طور پیش‌فرض چگونه چیدمان می‌شوند؟

- مثال جریان عادی

- نادیده گرفتن جریان عادی

- سایر تکنیک‌های چیدمان

• float ها

- پس‌زمینه float

- مثالی از نوع float

- شناور کردن جعبه

- تجسم شناور

- پاک کردن شناورها

- جعبه‌های پاکسازی که دور یک شناور پیچیده شده‌اند

- مشکل

- display: flow-root

• موقعیت یابی

- معرفی موقعیت‌یابی position

- موقعیت‌یابی استاتیک static

- موقعیت‌یابی نسبی relative

- معرفی بالا، پایین، چپ و راست

- موقعیت‌یابی مطلق absolute

- زمینه‌های موقعیت‌یابی

- معرفی z-index

- موقعیت‌یابی ثابت fixed

- موقعیت‌یابی چسبنده sticky

- مثال پایه

- فهرست scroll

• فلکس‌باکس

- چرا فلکس باکس؟

- معرفی یک مثال ساده

- مشخص کردن عناصری که باید به عنوان flexbox طرح‌بندی شوند

- The flex model

- ستون‌ها یا ردیف‌ها؟

- بسته بندی

- خلاصه‌سازی جریان flex

- اندازه‌بندی انعطاف‌پذیر آیتم‌های flex

- flex: خلاصه‌نویسی در مقابل طولانی‌نویسی

- تراز افقی و عمودی

- ترتیب دهی به آیتم های فلکس

- flexbox تو در تو

• طرح بندی شبکه ای CSS

- طرح شبکه‌ای چیست؟

- ایجاد شبکه در CSS

- تعریف یک شبکه

- شبکه‌های انعطاف‌پذیر با واحد fr

- شکاف بین خطوط

- تکرار فهرست مسیرها

- شبکه‌های ضمنی و صریح

- تابع minmax

- تعداد ستون‌هایی که جا می‌شوند

- جایگذاری مبتنی بر خط

- موقعیت‌یابی با grid-template-areas

- شبکه‌ها و زیرشبکه‌های تودرتو

- چارچوب‌های شبکه‌ای

• طراحی وب واکنش‌گرا

- پیش درآمدی بر طراحی واکنش‌گرا: طراحی وب موبایل

- معرفی طراحی وب واکنش‌گرا

- media query ها

- فناوری‌های طرح‌بندی واکنش‌گرا

- Flexbox

- شبکه CSS

- تصاویر/رسانه‌های واکنش‌گرا

- تایپوگرافی واکنش‌گرا

- استفاده از مدیا کوئری‌ها برای تایپوگرافی واکنش‌گرا

- استفاده از واحدهای viewport برای تایپوگرافی واکنش‌گرا

- متا تگ viewport

• اصول media query ها

- اصول اولیه مدیا کوئری ها

- انواع رسانه

- قوانین مربوط به ویژگی‌های رسانه‌ای

- عرض و ارتفاع

- جهت گیری

- استفاده از دستگاه‌های اشاره‌گر

- استفاده از سینتکس محدوده‌ای

- مدیا کوئری های پیچیده‌تر

- منطق "and" در کوئری‌های رسانه‌ای

- منطق "or" در کوئری‌های رسانه‌ای

- منطق "not" در کوئری‌های مدیا

- نحوه انتخاب نقاط شکست

- طراحی واکنش‌گرا متناسب با موبایل (mobile-first)

- طراحی موبایل-محور خودتان را بسازید

- شروع به کار

- ایجاد طرح دو ستونه برای عرض‌های متوسط

- اضافه کردن ستون سوم برای صفحات نمایش عریض‌تر

- متای viewport

- آیا واقعاً به یک media query نیاز دارید؟

• طرح‌بندی چند ستونی

- طرح سه ستونه

- تنظیم عرض ستون

- استایل دادن به ستون‌ها

- ستون‌های پوشا

- ستون‌ها و قطعه قطعه شدن

- جعبه‌های تکه‌تکه شده

- تنظیم شکست های درونی

• مثال‌های عملی موقعیت‌یابی

- یک جعبه اطلاعات تب‌بندی‌شده

- تنظیمات عمومی

- استایل‌دهی به تب‌های ما

- استایل دادن به پنل‌ها

- جاوا اسکریپت

- یک جعبه اطلاعات با تب‌های ثابت

- اضافات HTML

- تغییرات در CSS موجود

- استایل‌دهی به محتوای اصلی

- یک پنل مخفی کشویی

- استایل دادن به دکمه

- استایل دادن به پنل

- تنظیم وضعیت بررسی‌شده

آموزش جاوا اسکریپت مبتدی

• جاوا اسکریپت چیست؟

- تعریف کلی

- خب، واقعاً چه کاری می‌تواند انجام دهد؟

- جاوا اسکریپت در صفحه شما چه کاری انجام می‌دهد؟

- امنیت مرورگر

- ترتیب اجرای جاوا اسکریپت

- کد interpreted در مقابل کد compiled

- کد سمت سرور در مقابل کد سمت کلاینت

- کد پویا (dynamic) در مقابل کد ایستا (static)

- چگونه جاوا اسکریپت را به صفحه خود اضافه کنیم؟

- جاوا اسکریپت داخلی

- جاوا اسکریپت خارجی

- کنترل‌کننده‌های درون‌خطی جاوااسکریپت

- به جای آن از addEventListener استفاده کنید

- استراتژی‌های بارگذاری اسکریپت

- کامنت ها

• اولین نگاه به جاوا اسکریپت

- معرفی مثال «بازی حدس اعداد» ما

- فکر کردن مثل یک برنامه‌نویس

- خلاصه اولیه معماری

- راه اندازی اولیه

- اضافه کردن متغیرها برای ذخیره داده‌هایمان

- توابع Functions

- رشته‌های متنی Strings

- شرط ها Conditionals

- رویدادها Events

- تکمیل قابلیت‌های بازی

- حلقه‌ها Loops

• چه مشکلی پیش آمد؟ عیب‌یابی جاوا اسکریپت

- انواع ارور

- یک مثال ارور

- رفع ارورهای گزارش شده در کنسول

- رفع ارور زمان اجرا

- رفع یک ارور املایی دیگر

- یک ارور منطقی

- طی شدن مسیر منطقی

- سایر ارورهای رایج

- بازی بعد از اولین حدس اشتباه تمام می‌شود

- خطای املایی: وجود نداشتن ) بعد از لیست ورودی های ارزش به تابع

- خطای املایی: وجود نداشتن : بعد از شناسه ویژگی

- خطای املایی: } بعد از بدنه تابع وجود ندارد

- خطای املایی: جای عبارت (expression)، استرینگ است یا خطای املایی: استرینگ شامل یک پرش به خط جدید بدون املای درست است

• ذخیره اطلاعات مورد نیاز - متغیرها

- ابزارهایی که نیاز دارید

- متغیر چیست؟

- مثال متغیر

- بدون متغیر

- تعریف یک متغیر

- مقداردهی اولیه یک متغیر

- نکته‌ای در مورد متغیر var

- به‌روزرسانی یک متغیر

- نگاهی گذرا به قوانین نامگذاری متغیرها

- انواع متغیر

- اعداد numbers

- رشته‌ها string

- بولی‌ها booleans

- آرایه‌ها arrays

- اشیاء objects

- تایپ پویا

- ثابت‌ها در جاوا اسکریپت constants

- چه زمانی از const و چه زمانی از let استفاده کنیم؟

• ریاضیات پایه در جاوا اسکریپت - اعداد و اپراتور ها

- همه عاشق ریاضی هستند

- انواع اعداد

- برای من همه اینها عدد اند

- متدهای مفید اعداد

- تبدیل به انواع داده عددی

- اپراتورهای حسابی

- اولویت اپراتورها

- اپراتورهای افزایش و کاهش

- اپراتورهای انتساب

- اندازه بندی جعبه canvas

- اپراتورهای مقایسه‌ای

• مدیریت متن - رشته‌ها در جاوا اسکریپت

- قدرت کلمات

- تعریف رشته ها string

- علامت نقل قول تکی، علامت نقل قول دوتایی و علامت نقل قول معکوس

- جاسازی جاوا اسکریپت

- اتصال در متن

- اتصال با استفاده از "+"

- گنجاندن عبارات در رشته‌ها

- رشته‌های چندخطی

- گنجاندن نقل قول‌ها در رشته‌ها

- اعداد در مقابل رشته‌ها

• متدهای رشته‌ای مفید

- رشته‌ها به عنوان اشیاء

- پیدا کردن طول یک رشته

- بازیابی یک کاراکتر رشته‌ای خاص

- بررسی اینکه آیا یک رشته حاوی زیررشته است یا خیر

- پیدا کردن موقعیت یک زیر رشته در یک رشته

- استخراج یک زیررشته از یک رشته

- تغییر حالت

- به‌روزرسانی بخش‌هایی از یک رشته

- چالش‌های یادگیری

- فیلتر کردن پیام‌های تبریک

- اصلاح حروف بزرگ

- ساخت رشته‌های جدید از قطعات

• آرایه‌ها

- آرایه چیست؟

- ایجاد آرایه‌ها

- پیدا کردن طول یک آرایه

- دسترسی و تغییر آیتم‌های آرایه

- پیدا کردن شماره آیتم‌ها در یک آرایه

- اضافه کردن آیتم ها

- حذف موارد

- دسترسی به هر مورد

- تبدیل بین رشته‌ها و آرایه‌ها

• تصمیم‌گیری در کد شما - شرط‌ها

- به یه شرط!

- دستورات if...else

- سینتکس پایه if...else

- یک مثال واقعی

- else if

- نکته‌ای در مورد اپراتورهای مقایسه‌ای

- تو در تو سازی if...else

- عملگرهای منطقی: AND، OR و NOT

- دستورات سوئیچ

- یک مثال سوئیچ

- اپراتور سه تکه

- مثال اپراتور سه تکه

• حلقه ها در کد

- چرا حلقه‌ها مفید هستند؟

- مثال کد حلقه

- با حلقه و بدون حلقه

- حلقه زدن روی یک مجموعه

- حلقه for...of

- map و filter

- حلقه for استاندارد

- محاسبه مربع‌ها

- پیمایش مجموعه‌ها با حلقه for

- خروج از حلقه‌ها با break

- رد کردن تکرارها با continue

- while و do...while

- از کدام نوع حلقه باید استفاده کنید؟

• توابع - بلوک‌های کد قابل استفاده مجدد

- توابع رو از کجا پیدا کنم؟

- توابع داخلی مرورگر

- توابع و متدها

- فراخوانی توابع

- پارامترهای تابع

- پارامترهای اختیاری

- پارامترهای پیش‌فرض

- توابع بی نام و توابع پیکانی

- مثال تابع بی نام

- توابع پیکانی arrow functions

- نمونه زنده تابع arrow

- دامنه تابع و تداخلات

- نگاهی گذرا بر حلقه و دامنه شرطی

• تابع خودتان را بسازید

- بیایید یک تابع بسازیم

- تابع پایه

- فراخوانی تابع

- بهبود تابع با پارامترها

- یک پارامتر پیچیده‌تر

• مقادیر برگشتی تابع

- مقادیر بازگشتی چیستند؟

- نحوه برگرداندن یک مقدار

- پیاده‌سازی مقادیر بازگشتی تابع

- چند تا تابع خودت اضافه کن!

• مقدمه‌ای بر رویدادها

- رویداد چیست؟

- یک مثال: مدیریت یک رویداد کلیک

- استفاده از addEventListener

- گوش دادن به رویدادهای دیگر

- حذف شنوندگان رویداد

- اضافه کردن چندین شنونده برای یک رویداد واحد

- سایر مکانیزم‌های شنونده رویداد

- ویژگی‌های کنترل‌کننده رویداد

- کنترل‌کننده‌های رویداد درون‌خطی - از این‌ها استفاده نکنید

- اشیاء رویداد

- ویژگی‌های اضافی اشیاء رویداد

- جلوگیری از رفتار پیش‌فرض

- رویداد ها فقط مختص صفحات وب نیستند

• حباب رویداد

- تنظیم یک شنونده (listener) روی عنصر والد

- مثال حبابی

- مثال پخش کننده ویدیو

- رفع مشکل با stopPropagation

- ثبت رویداد

- نمایندگی رویداد

- target و currentTarget

• اصول اولیه شیء جاوا اسکریپت

- اصول اولیه شیء

- نمادگذاری نقطه‌ای

- اشیاء به عنوان ویژگی‌های اشیاء دیگر

- نمادگذاری با براکت

- تنظیم اعضای شیء

- «this» چیست؟

- معرفی سازنده‌ها

- تمام این مدت داشتید از اشیاء استفاده می‌کردید

• مقدمه‌ای بر اسکریپت‌نویسی DOM

- بخش‌های مهم یک مرورگر وب

- مدل شیء سند

- انجام برخی دستکاری‌های اولیه DOM

- ایجاد و قرار دادن گره‌های جدید

- جابجایی و حذف عناصر

- دستکاری استایل‌ها

• ایجاد درخواست‌های شبکه با جاوا اسکریپت

- مشکل اینجا چیست؟

- Fetch API

- دریافت محتوای متنی

- مثال خود را از یک سرور ارائه دهید

- فروشگاه قوطی

- API مربوط به XMLHttpRequest

• کار با JSON

- json چیست؟

- ساختار JSON

- آرایه‌ها به صورت JSON

- محدودیت‌های سینتکس JSON

- کار با یک مثال JSON

- شروع به کار

- تابع سطح بالا

- پر کردن هدر

- ایجاد کارت‌های اطلاعات قهرمانان

- فراخوانی تابع سطح بالا

- تبدیل بین اشیاء و متن

• اشکال‌زدایی و مدیریت ارور در جاوا اسکریپت

- خلاصه‌ای از انواع خطاهای جاوا اسکریپت

- کد خود را لینت کنید

- افزونه‌های ویرایشگر کد

- مشکلات رایج جاوا اسکریپت

- کنسول جاوا اسکریپت مرورگر

- API کنسول

- console.error و call stack

- رفع ارور

- استفاده از اشکال‌زدای جاوا اسکریپت

- مدیریت ارورهای جاوا اسکریپت در کد شما

- شرطی‌ها

- نمایش خطاهای سفارشی

- try...catch

- تشخیص ویژگی

- پیدا کردن کمک

آموزش جاوا اسکریپت پیشرفته

• شئ و پروتوتایپ آن

- زنجیره پروتوتایپ

- ویژگی‌های سایه‌ای

- تنظیم پروتوتایپ

- استفاده از Object.create

- با استفاده از سازنده constructor

- ویژگی شخصی

- پروتوتایپ ها و وراثت

• برنامه‌نویسی شیءگرا

- کلاس‌ها و نمونه‌ها

- وراثت

- کپسوله سازی

- OOP و جاوا اسکریپت

• کلاس‌ها در جاوااسکریپت

- کلاس‌ها و سازنده‌ها

- حذف سازنده‌ها

- وراثت

- کپسوله سازی

- متدهای خصوصی

• جاوا اسکریپت ناهمزمان

- برنامه‌نویسی همزمان

- یک تابع همگام با اجرای طولانی مدت

- مشکل توابع همگام با اجرای طولانی مدت

- گرداننده‌های رویداد

- Callback ها

• نحوه استفاده از promise

- استفاده از fetch API

- زنجیر کردن promiseها

- گرفتن ارورها

- اصطلاحات promise

- ترکیب چندین promise

- async و await

• نحوه پیاده‌سازی یک API مبتنی بر promise

- پیاده‌سازی API مربوط به alarm

- بسته‌بندی setTimeout

- سازنده‌ی Promise

- استفاده از API مربوط به alarm

- استفاده از async و await با API مربوط به alarm

• معرفی workerها

- استفاده از web worker

- تولیدکننده‌ی همزمان عدد اول

- تولیدکننده‌ی عدد اول با worker

- انواع دیگر worker

ابزار و نرم افزارها

• چگونه از گیت‌هاب استفاده کنم؟

- انتشار محتوا

- تنظیمات اولیه گیت‌هاب

- آماده‌سازی کد برای آپلود

- نگاهی گذرا به رابط‌های خط فرمان

- ایجاد یک مخزن (repo) برای کد شما

- آپلود فایل‌های شما در گیت‌هاب

- دانش بیشتر در مورد گیت‌هاب

• چگونه مطمئن شویم که وب‌سایت ما به درستی کار می‌کند؟

- در مرورگر خود تست کنید

- تصویر کجاست؟

- وضعیت‌های HTTP

- رفع خطای ۴۰۴

- ارور های رایج

- غلط املایی در آدرس

- خطاهای ۴۰۴

- خطاهای جاوا اسکریپت

- موارد بیشتر برای بررسی

- سرعت اجرا

- آیا سرور به اندازه کافی پاسخگو است؟

- یک چک لیست ساده

• چگونه یک سرور تست محلی راه‌اندازی کنیم؟

- فایل‌های محلی در مقابل فایل‌های راه دور

- مشکل در آزمایش فایل‌های محلی

- اجرای یک سرور HTTP محلی ساده

- استفاده از یک افزونه در ویرایشگر کد شما

- استفاده از Node.js

- استفاده از پایتون

- اجرای زبان‌های سمت سرور به صورت محلی

• چگونه فایل‌های خود را روی یک سرور وب آپلود کنیم؟

- خلاصه

- SFTP

- ورود به سیستم

- اینجا و آنجا: نمای محلی و از راه دور

- آپلود روی سرور

- آیا واقعاً آنلاین هستند؟

- Rsync

- ابزارهای رابط کاربری گرافیکی Rsync

- GitHub

- روش‌های دیگر برای آپلود فایل‌ها

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

- نحوه باز کردن ابزارهای توسعه (devtools) در مرورگر

- بررسی DOM inspector

- بررسی ویرایشگر CSS

- اشکال‌زدای جاوا اسکریپت

- بررسی دیباگر

- فهرست فایل‌ها

- کد منبع

- عبارات و نقاط توقف را تماشا کنید

- اطلاعات بیشتر

- کنسول جاوا اسکریپت

- اطلاعات بیشتر

راهنمای HTML

• راهنمای HTML برای سینتکس و اعمال رایج

- عناصر درون‌خطی

- عناصر بلوک

• استفاده از اعتبارسنجی فرم HTML و API اعتبارسنجی محدودیت

- محدودیت‌های ذاتی و اساسی

- انواع input معنایی

- ویژگی‌های مرتبط با اعتبارسنجی

- فرآیند اعتبارسنجی محدودیت

- محدودیت‌های پیچیده با استفاده از API اعتبارسنجی محدودیت

- محدودیت ترکیب چندین فیلد: اعتبارسنجی کد پستی

- محدود کردن حجم فایل قبل از آپلود

- استایل‌دهی بصری اعتبارسنجی محدودیت‌ها

• دسته بندی محتوا

- محتوای فراداده metadata

- محتوای جریان flow

- محتوای بخش‌بندی section

- محتوای عنوان heading

- محتوای جمله‌بندی شده phrase

- محتوای جاسازی‌شده embed

- محتوای تعاملی interactive

- محتوای ملموس palpable

- عناصر بدون دسته بندی

- عناصر پشتیبان اسکریپت

- محتوای مرتبط با فرم

- مدل محتوای شفاف

• استفاده از فرمت‌های تاریخ و زمان در HTML

- مثال‌ها

- مبانی

- سال شمارها

- سال‌های کبیسه

- ماه‌های سال

- روزهای ماه

- رشته‌های هفته

- رشته‌های ماه

- رشته‌های تاریخ

- رشته‌های زمانی

- رشته‌های تاریخ و زمان محلی

- رشته‌های تاریخ و زمان سراسری

- رشته اختلاف در منطقه‌های زمانی

- مشکلات مربوط به تاریخ

- مشکل Y2K38 (اغلب سمت سرور)

- مشکل Y10k (اغلب از سمت کلاینت)

• استفاده از میکرودیتا در HTML

- واژگان

- محلی سازی

- ویژگی‌های سراسری

- مثال

• استفاده از میکروفرمت‌ها در HTML

- نحوه کار میکروفرمت‌ها

- موارد استفاده از میکروفرمت‌ها

- پیشوندهای میکروفرمت

- h-card

- مثال h-card تو در تو

- h-entry

- مثال h-entry پاسخ تجزیه‌شده

- h-feed

- h-event

- مثال h-event تجزیه‌شده‌

- مثال‌هایی از ویژگی‌های rel در میکروفرمت‌ها

- rel=author

- rel=license

- rel=nofollow

• درک ویژگی‌ها و حالت‌های استاندارد

- مرورگرها چگونه تشخیص می‌دهند که از کدام حالت استفاده کنند؟

- XHTML

- چطور ببینم از کدام حالت استفاده شده است؟

• استفاده از تصاویر واکنش‌گرا در HTML

- چرا تصاویر واکنش‌گرا؟

- چگونه تصاویر واکنش‌گرا (ریسپانسیو) ایجاد کنیم؟

- تغییر وضوح: اندازه‌های مختلف

- تغییر وضوح: اندازه یکسان، وضوح‌های متفاوت

- جهت هنری

- چرا نمی‌توانیم این کار را فقط با استفاده از CSS یا جاوا اسکریپت انجام دهیم؟

- پیاده‌سازی تصاویر واکنش‌گرای خودتان

مرجع عناصر HTML

• عنصر <a>

- امتحانش کنید

- ویژگی‌ها

- ویژگی‌های منسوخ‌شده

- متن لینک ضعیف و غیرقابل دسترسی

- متن لینک قوی و قابل دسترسی

- رویدادهای onclick

- لینک‌های خارجی و لینک دادن به منابع غیر HTML

- لینکی که یک برگه/پنجره جدید باز می‌کند

- لینک به یک منبع غیر HTML

- لینک پرش

- سایز

- مجاورت

- لینک دادن به یک URL مطلق

- لینک دادن به URL های نسبی

- لینک دادن به یک عنصر در همان صفحه

- لینک دادن به یک آدرس ایمیل

- لینک دادن به شماره تلفن‌ها

- استفاده از ویژگی دانلود برای ذخیره <canvas> به عنوان PNG

- نمونه برنامه نقاشی با لینک ذخیره

- امنیت و حریم خصوصی

- خلاصه فنی

- نقش‌های مجاز ARIA

• عنصر <abbr>

- امتحانش کنید

- ویژگی‌ها

- موارد استفاده رایج

- ملاحظات دستوری

- استایل پیش‌فرض

- دسترسی‌پذیری

- علامت‌گذاری یک اختصار از نظر معنایی

- اختصارات استایل‌دهی

- فراهم کردن امکان گسترش

- تعریف یک اختصار

• عنصر <acronym> (منسوخ)

- ویژگی‌ها

- رابط DOM

- مثال

- استایل پیش‌فرض

• عنصر <address>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- مثال

• عنصر <area>

- امتحانش کنید

- ویژگی‌ها

- تصویر با نواحی قابل کلیک

• عنصر <article>

- Try it

- ویژگی‌ها

- یادداشت‌های استفاده

- مثال

• عنصر <aside>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- استفاده از <aside>

• عنصر <audio>

- امتحانش کنید

- ویژگی‌ها

- رویدادها

- یادداشت‌های استفاده

- استایل‌دهی با CSS

- تشخیص اضافه شدن و حذف شدن آهنگ‌ها

- دسترسی‌پذیری

- کاربرد اولیه

- عنصر <audio> به همراه عنصر <source>

- <audio> با چندین عنصر <source>

• عنصر <b>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- مثال

• عنصر <base>

- ویژگی‌ها

- چندین عنصر <base>

- لینک های درون صفحه‌ای

- هدف ممکن است شامل خط جدید ASCII، تب یا < نباشد

- Open Graph

- مثال

• عنصر <bdi>

- امتحانش کنید

- ویژگی‌ها

- بدون bdi و فقط با LTR

- بدون bdi با متن RTL

- استفاده از bdi با متن LTR و RTL

• عنصر <bdo>

- امتحانش کنید

- ویژگی‌ها

- مثال

- یادداشت‌ها

• عنصر <big> (منسوخ)

- ویژگی‌ها

- استفاده از big

- استفاده از اندازه فونت در CSS

- رابط DOM

• عنصر <blockquote>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- مثال

• عنصر <body>

- ویژگی‌ها

- ویژگی‌های رویداد

- ویژگی‌های منسوخ‌شده

- مثال

• عنصر <br>

- امتحانش کنید

- ویژگی‌ها

- ویژگی‌های منسوخ‌شده

- استایل‌دهی با CSS

- دسترسی‌پذیری

- br ساده

• عنصر <button>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌ها

- دکمه‌های آیکون

- سایز

- مجاورت

- اطلاعات حالت ARIA

- استایل‌های دکمه

- کلیک و فوکوس

- ایجاد یک دکمه پایه

- استفاده از مقدار request-close برای ویژگی command

- HTML

• عنصر <canvas>

- ویژگی‌ها

- محتوای جایگزین

- تگ پایانی <canvas>

- اندازه‌گذاری canvas با استفاده از CSS در مقابل HTML

- حداکثر اندازه canvas

- استفاده از canvas خارج از صفحه

- دسترسی پذیری:‌ محتوای جایگزین

- مثال

• عنصر <caption>

- امتحانش کنید

- ویژگی‌ها

- ویژگی‌های منسوخ‌شده

- یادداشت‌های استفاده

- مثال

- جدول با عنوان

- HTML

• عنصر <center> (منسوخ)

- رابط DOM

- مثال ۱

- مثال ۲ (جایگزین CSS)

- مثال ۳ (جایگزین CSS)

• عنصر <cite>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- مثال

• عنصر <code>

- امتحانش کنید

- ویژگی‌ها

- مثال

- یادداشت‌ها

• عنصر <col>

- امتحانش کنید

- ویژگی‌ها

- ویژگی‌های منسوخ‌شده

- یادداشت‌های استفاده

- مثال

• عنصر <colgroup>

- امتحانش کنید

- ویژگی‌ها

- ویژگی‌های منسوخ‌شده

- یادداشت‌های استفاده

- مثال

• عنصر <data>

- امتحانش کنید

- ویژگی‌ها

- مثال

• عنصر <datalist>

- امتحانش کنید

- ویژگی‌ها

- دسترسی‌پذیری

- انواع متنی

- انواع تاریخ و زمان

- نوع محدوده

- نوع رنگ

• عنصر <dd>

- امتحانش کنید

- ویژگی‌ها

- مثال

• عنصر <del>

- امتحانش کنید

- ویژگی‌ها

- دسترسی‌پذیری

- مثال

• عنصر <details>

- امتحانش کنید

- ویژگی‌ها

- رویدادها

- یک مثال افشای اطلاعات اولیه

- ایجاد یک جعبه افشای اطلاعات عمومی

- چندین جعبه افشای نام‌گذاری شده

- سفارشی‌سازی ظاهر

• عنصر <dfn>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- مشخص کردن اصطلاح مورد تعریف

- لینک‌ها به عناصر <dfn>

- شناسایی اولیه یک اصطلاح

- پیوند به تعاریف

- استفاده از اختصارات و تعاریف در کنار هم

• عنصر <dialog>

- ویژگی‌ها

- توضیحات

- کنترل دیالوگ‌ها با استفاده از جاوا اسکریپت

- دیالوگ‌های مودال با استفاده از دستورات invoker

- دیالوگ‌های غیرمودال با استفاده از دستورات popover

- بستن dialog

- استایل‌دهی CSS

- یادداشت‌های تکمیلی

- دسترسی‌پذیری

- ویژگی‌های HTML رابط برنامه‌نویسی کاربردی فرمان Invoker

- ویژگی‌های HTML API مربوط به Popover

- استفاده از ویژگی open در dialog

- ایجاد یک دیالوگ modal

- مدیریت مقدار برگشتی از کادر dialog

- بستن یک dialog با ورودی فرم الزامی

- مقایسه رفتارهای مختلف closedby

- انیمیشن در دیالوگ‌ها

- transition برای عنصر dialog

- انیمیشن‌های keyframe دیالوگ

• عنصر <dir> (منسوخ)

- رابط DOM

- ویژگی‌ها

• عنصر <div>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- دسترسی‌پذیری

- یک مثال اساسی

- یک مثال استایل شده

• عنصر <dl>

- امتحانش کنید

- ویژگی‌ها

- دسترسی‌پذیری

- مثال تک‌جمله و توضیح

- مثال چندین اصطلاح، یک توضیح

- مثال یک اصطلاح، چندین توصیف

- مثال اصطلاحات و توضیحات متعدد

- فراداده

- قرار دادن گروه‌های نام-مقدار در عناصر div

- یادداشت‌ها

• عنصر <dt>

- امتحانش کنید

- ویژگی‌ها

- مثال

• عنصر <em>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- <i> در مقابل <em>

- مثال

• عنصر <embed>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- دسترسی‌پذیری

- مثال

• عنصر <fencedframe> (آزمایشی)

- ویژگی‌ها

- سیاست‌های دسترسی موجود برای fencedframe

- فوکوس کردن در fencedframe

- موقعیت‌یابی و مقیاس‌بندی

- دسترسی‌پذیری

- مثال

• عنصر <fieldset>

- امتحانش کنید

- ویژگی‌ها

- استایل‌دهی با CSS

- مثال

- فیلدست غیرفعال

• عنصر <figcaption>

- امتحانش کنید

- ویژگی‌ها

- مثال

• عنصر <figure>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- تصاویر

- قطعه کدها

- نقل قول‌ها

- اشعار

• عنصر <font> (منسوخ)

- ویژگی‌ها

- رابط DOM

• عنصر <footer>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- دسترسی‌پذیری

- مثال

• عنصر <form>

- امتحانش کنید

- ویژگی‌ها

- ویژگی‌های ارسال فرم

- مثال

• عنصر <frame> (منسوخ)

- ویژگی‌ها

- یک سند frameset

• عنصر <frameset> (منسوخ)

- ویژگی‌ها

- مثال

• عنصر <geolocation> (آزمایشی)

- ویژگی‌ها

- توضیحات

- ارتباط با API موقعیت جغرافیایی

- تنظیم زبان دکمه

- محتوای جایگزین

- مسدود کردن <geolocation>

- محدودیت‌های استایل‌دهی

- محدودیت‌های دسترسی

- محدودیت‌های ارزش

- محدودیت‌های پیچیده

- ویژگی‌هایی که می‌توانند به طور معمول تنظیم شوند

- دسترسی‌پذیری

- مثال استفاده اولیه

• عنصر های <h1>-<h6>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- از استفاده از چندین عنصر <h1> در یک صفحه خودداری کنید

- تعیین اندازه فونت یکنواخت برای <h1>

- ناوبری

- برچسب‌گذاری محتوای بخش

- همه سرفصل‌ها

• عنصر <head>

- ویژگی‌ها

- مثال

• عنصر <header>

- امتحانش کنید

- یادداشت‌های استفاده

- کاربرد تاریخی

- ویژگی‌ها

- دسترسی‌پذیری

- سربرگ صفحه

- سربرگ مقاله

• عنصر <hgroup>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- مثال‌ها

• عنصر <hr>

- امتحانش کنید

- ویژگی‌ها

- مثال

• عنصر <html>

- ویژگی‌ها

- دسترسی‌پذیری

- مثال

• عنصر <i>

- امتحانش کنید

- ویژگی‌ها

- یادداشت‌های استفاده

- مثال

• عنصر <iframe>

- امتحانش کنید

- ویژگی‌ها

- ویژگی‌های منسوخ‌شده

- اسکریپت نویسی

- ناوبری بالا در فریم‌های با مبدا متقابل

- موقعیت‌یابی و مقیاس‌بندی

- رفتار رویدادهای error و load

- دسترسی‌پذیری

- یک <iframe> ساده

- جاسازی کد منبع در <iframe>

• عنصر <img>

- امتحانش کنید

- فرمت‌های تصویر پشتیبانی‌شده

- خطاهای بارگذاری تصویر

- ویژگی‌ها

- ویژگی‌های منسوخ‌شده

- استایل‌دهی با CSS

- نوشتن توضیحات جایگزین معنادار

- شناسایی SVG به عنوان تصویر

- ویژگی عنوان

- مثال متن جایگزین

- لینک تصویری

- استفاده از ویژگی srcset

- استفاده از ویژگی‌های srcset و sizes

- نگرانی‌های امنیتی و حریم خصوصی

مرجع عناصر HTML : عنصر <bdo>

عنصر HTML <bdo> جهت‌گیری فعلی متن را لغو می‌کند، به طوری که متن درون آن در جهت متفاوتی رندر می‌شود.

امتحانش کنید

HTML

   کاراکترهای متن از نقطه شروع و در جهت مشخص شده رسم می‌شوند؛ جهت‌گیری تک تک کاراکترها تحت تأثیر قرار نمی‌گیرد (بنابراین، برای مثال، کاراکترها به عقب کشیده نمی‌شوند).

ویژگی‌ها

   ویژگی‌های این عنصر شامل ویژگی‌های سراسری است. dir جهتی که متن باید در محتوای این عنصر نمایش داده شود. مقادیر ممکن عبارتند از: ltr: نشان می‌دهد که متن باید در جهت چپ به راست باشد. rtl: نشان می‌دهد که متن باید در جهت راست به چپ باشد.

مثال

HTML

یادداشت‌ها

   مشخصات HTML 4 رویدادهایی را برای این عنصر مشخص نکرده است؛ آنها در XHTML اضافه شده‌اند. این به احتمال زیاد یک سهل‌انگاری است.

مشخصهتوضیحات
دسته بندی محتوا Flow content, phrasing content, palpable content.
محتوای مجاز Phrasing content.
حذف برچسبهیچکدام، هر دو تگ شروع و پایان اجباری هستند.
والدین مجازهر عنصری که محتوای عبارت‌بندی‌شده را می‌پذیرد.
نقش ضمنی ARIAgeneric
نقش‌های مجاز ARIAAny
رابط DOMHTMLElement تا نسخه Gecko 1.9.2 (فایرفاکس ۴)، فایرفاکس رابط HTMLSpanElement را برای این عنصر پیاده‌سازی می‌کند.