آموزش 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
نگرانی‌های امنیتی و حریم خصوصی
صفحه اصلی تمام مستندات تست کد درباره سایت

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

در ابتدا برای شناور کردن تصاویر درون بلوک‌های متن، ویژگی float به یکی از رایج‌ترین ابزارها برای ایجاد طرح‌بندی‌های چند ستونی در صفحات وب تبدیل شد. با ظهور flexbox و grid، اکنون به هدف اصلی خود بازگشته است، همانطور که در این مقاله توضیح داده شده است.

پس‌زمینه float

ویژگی float معرفی شد تا به توسعه‌دهندگان وب اجازه دهد طرح‌بندی‌هایی را پیاده‌سازی کنند که شامل یک تصویر شناور درون یک ستون متن است و متن در سمت چپ یا راست آن قرار می‌گیرد. چیزی شبیه به آنچه در طرح‌بندی یک روزنامه می‌بینید. اما توسعه‌دهندگان وب به سرعت متوجه شدند که می‌توانند هر چیزی را شناور کنند، نه فقط تصاویر، بنابراین استفاده از float گسترش یافت، به عنوان مثال، به جلوه‌های طرح‌بندی سرگرم‌کننده‌ای مانند drop-caps. floatها معمولاً برای ایجاد طرح‌بندی‌های کامل وب‌سایت با چندین ستون اطلاعات شناور استفاده شده‌اند تا در کنار یکدیگر قرار گیرند (رفتار پیش‌فرض این است که ستون‌ها به همان ترتیبی که در منبع ظاهر می‌شوند، زیر یکدیگر قرار گیرند). تکنیک‌های طرح‌بندی جدیدتر و بهتری نیز موجود است. استفاده از floatها به این روش باید به عنوان یک تکنیک قدیمی در نظر گرفته شود. در این مقاله، ما فقط بر کاربردهای صحیح floatها تمرکز خواهیم کرد.

مثالی از نوع float

بیایید کاربرد floatها را بررسی کنیم. با مثالی شروع می‌کنیم که شامل float کردن یک بلوک متن در اطراف یک عنصر است. می‌توانید با ایجاد یک فایل جدید در رایانه خود، پر کردن آن با یک الگوی HTML و قرار دادن کد زیر در آن در مکان‌های مناسب، ادامه دهید. در پایین بخش، می‌توانید یک مثال زنده از کد نهایی را مشاهده کنید. ابتدا، با مقداری HTML شروع می‌کنیم. موارد زیر را به بدنه HTML خود اضافه کنید و هر چیزی را که قبلاً در آنجا بوده است، حذف کنید:

HTML

حالا CSS زیر را به HTML خود اعمال کنید (با استفاده از یک عنصر یا یک در یک فایل جداگانه - انتخاب با شماست):

CSS

اگر ذخیره و رفرش کنید، چیزی بسیار شبیه به آنچه انتظار داشتید را خواهید دید: کادر بالای متن، با جریان عادی، قرار گرفته است.

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

برای شناور کردن کادر، ویژگی‌های float و margin-right را به قانون ‎ اضافه کنید:

CSS

بیایید در مورد نحوه‌ی کار float فکر کنیم. عنصری که float روی آن تنظیم شده است (در این مورد عنصر ) از جریان چیدمان عادی سند خارج شده و به سمت چپ کانتینر والد خود (در این مورد ) می‌چسبد. هر محتوایی که در جریان چیدمان عادی زیر عنصر float شده قرار می‌گرفت، اکنون به جای آن، دور آن می‌پیچد و فضای سمت راست آن را تا بالای عنصر float شده پر می‌کند. در آنجا متوقف می‌شود. floating کردن محتوا به سمت راست دقیقاً همان اثر را دارد، اما به صورت معکوس: عنصر float شده به سمت راست می‌چسبد و محتوا به سمت چپ آن را می‌پوشاند. سعی کنید مقدار float را به right تغییر دهید و margin-right را با margin-left در آخرین مجموعه قوانین جایگزین کنید تا نتیجه را ببینید.

تجسم شناور

در حالی که می‌توانیم برای کنار زدن متن، حاشیه‌ای به float اضافه کنیم، نمی‌توانیم برای دور کردن آن از float، حاشیه‌ای به متن اضافه کنیم. دلیل این امر این است که یک عنصر float شده از جریان عادی خارج می‌شود و کادرهای موارد بعدی در واقع پشت float قرار می‌گیرند. می‌توانید با ایجاد تغییراتی در مثال خود، این موضوع را مشاهده کنید. یک کلاس special به پاراگراف اول متن، پاراگرافی که بلافاصله پس از کادر float شده قرار دارد، اضافه کنید، سپس در CSS خود قوانین زیر را اضافه کنید. این‌ها به پاراگراف بعدی ما رنگ پس‌زمینه می‌دهند.

CSS

برای اینکه این افکت راحت‌تر دیده شود، margin-right را در float به margin تغییر دهید تا در اطراف float فضای خالی داشته باشید. می‌توانید پس‌زمینه پاراگراف را که درست زیر کادر float شده قرار دارد، ببینید. کادرهای خط عنصر بعدی ما کوتاه شده‌اند، بنابراین متن در اطراف float قرار می‌گیرد، اما به دلیل حذف float از جریان عادی، کادر اطراف پاراگراف همچنان در عرض کامل باقی می‌ماند.

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

دیدیم که یک float از جریان عادی حذف می‌شود و عناصر دیگر در کنار آن نمایش داده می‌شوند. اگر بخواهیم از حرکت عنصر بعدی به سمت بالا جلوگیری کنیم، باید آن را پاک کنیم؛ این کار با ویژگی clear انجام می‌شود. در HTML خود از مثال قبلی، کلاس cleared را به پاراگراف دوم زیر عنصر float شده اضافه کنید. سپس موارد زیر را به CSS خود اضافه کنید:

CSS

باید ببینید که پاراگراف دوم اکنون عنصر float شده را پاک می‌کند و دیگر در کنار آن ظاهر نمی‌شود. ویژگی clear مقادیر زیر را می‌پذیرد: left: موارد float شده در سمت چپ را پاک می‌کند. right: موارد float شده در سمت راست را پاک می‌کند. bottom: هر مورد float شده، چپ یا راست را پاک می‌کند.

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

حالا می‌دانید که چگونه چیزی را که بعد از یک عنصر float شده قرار دارد پاک کنید، اما بیایید ببینیم اگر یک float بلند و یک پاراگراف کوتاه داشته باشید، با یک کادر حاوی هر دو عنصر، چه اتفاقی می‌افتد.

مشکل

سند خود را طوری تغییر دهید که پاراگراف اول و کادر شناور به طور مشترک با یک که دارای کلاس wrapper است، محصور شوند.

HTML

در CSS خود، قانون زیر را برای کلاس اضافه کنید و سپس صفحه را مجدداً بارگذاری کنید:

CSS

علاوه بر این، کلاس اصلی را حذف کنید:

CSS

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

display: flow-root

برای حل این مشکل، باید از مقدار flow-root مربوط به ویژگی display استفاده کنید. این فقط برای حل این مشکل خاص و بدون استفاده از راهکار های غیرعادی وجود دارد - هنگام استفاده از آن هیچ عواقب ناخواسته‌ای وجود نخواهد داشت.

CSS