تنظیمات مهم در head (Charset و Viewport)

تنظیمات مهم در <head>: Charset و Viewport – آماده‌سازی صفحه! ⚙️

سلام به همه همراهان عزیز! توی فصل‌های قبلی با ساختار کلی HTML و تگ‌های اصلی مثل <html>، <head> و <body> آشنا شدیم. فهمیدیم که بخش <head> چقدر مهمه، چون اطلاعات حیاتی رو برای مرورگر و موتورهای جستجو فراهم می‌کنه. امروز می‌خوایم روی دو تا از مهم‌ترین تگ‌های متا که توی <head> قرار می‌گیرن تمرکز کنیم: Charset (کدگذاری کاراکتر) و Viewport (نمایش در دستگاه‌های مختلف).

این تنظیمات مثل آماده‌سازی پیش‌زمینه برای نمایش درست و بدون نقص صفحه وب شما هستن.

۱. تنظیم کدگذاری کاراکتر (<meta charset=”UTF-8″>) 🅰️🅱️

فکر کنید یه متنی رو به یه زبانی نوشتین، ولی کسی که می‌خونه، الفباش رو بلد نیست و همه چیز براش مثل یه سری علامت نامفهوم به نظر می‌رسه! این دقیقاً مشکلیه که اگه کدگذاری کاراکتر درست نباشه، پیش میاد.

نقش <meta charset=”UTF-8″>:

این تگ به مرورگر می‌گه که متن‌های صفحه با چه استانداردی کدگذاری شدن.
استفاده از UTF-8 (Unicode Transformation Format-8) استاندارد جهانیه و از تمام زبان‌های دنیا، از جمله فارسی، پشتیبانی می‌کنه.
اگه این تگ رو نذارین یا درست تنظیم نکنین، ممکنه حروف فارسی به صورت “؟؟؟” یا “�” نمایش داده بشن.
این تگ باید یکی از اولین تگ‌ها در بخش <head> باشه تا مرورگر از همون اول بدونه چطور متن‌ها رو بخونه.

نحوه نوشتن:


<head>
  <meta charset="UTF-8">
  <title>صفحه من</title>
  <!-- بقیه تگ‌های head -->
</head>

۲. تنظیم Viewport (<meta name=”viewport” …>) 📱💻

این روزها همه از موبایل، تبلت و کامپیوتر برای دیدن وب‌سایت‌ها استفاده می‌کنن. تگ viewport به مرورگر می‌گه که چطور صفحه رو توی اندازه‌های مختلف صفحه نمایش (مثل صفحه موبایل) تنظیم کنه تا همه چیز خوانا و درست دیده بشه.

نقش <meta name=”viewport” …>:

کنترل عرض صفحه: `width=device-width` به مرورگر می‌گه که عرض صفحه نمایش رو برابر با عرض خود دستگاه (مثلاً عرض موبایل) در نظر بگیره.
مقیاس‌بندی اولیه: `initial-scale=1.0` تعیین می‌کنه که وقتی صفحه برای اولین بار بارگذاری می‌شه، چه مقیاسی داشته باشه (عدد ۱ یعنی بدون زوم اولیه).
بدون این تگ، مرورگرهای موبایل سعی می‌کنن صفحه رو به اندازه صفحه دسکتاپ نشون بدن و بعد کاربر مجبور می‌شه زوم کنه تا متن‌ها رو بخونه، که تجربه کاربری خوبی نیست.
این تگ برای ساخت صفحات ریسپانسیو (Responsive) که در همه دستگاه‌ها خوب دیده می‌شن، ضروریه.

نحوه نوشتن:


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- تنظیمات نمایش در دستگاه‌های مختلف -->
  <title>صفحه من</title>
</head>

این دو تگ متا، مثل دو تنظیمات حیاتی برای شروع هستن که مطمئن می‌شن صفحه شما هم متن‌ها رو درست نشون می‌ده و هم در دستگاه‌های مختلف قابل استفاده است.

پس یادتون باشه، هر بار که یه صفحه HTML جدید می‌سازین، حتماً این دو تگ رو توی بخش <head> قرار بدین تا از دردسرهای بعدی جلوگیری کنین و یه تجربه عالی برای کاربرهاتون رقم بزنین! 👍