تنظیمات مهم در 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> قرار بدین تا از دردسرهای بعدی جلوگیری کنین و یه تجربه عالی برای کاربرهاتون رقم بزنین! 👍