تگ‌های اصلی: html، head، body
تگ‌های اصلی: <html>، <head>، <body> – ستون‌های اصلی صفحه وب! 🏛️
سلام به همگی! توی فصل‌های قبلی با ساختار کلی یه سند HTML آشنا شدیم و اون خط مهم <!DOCTYPE html> رو شناختیم. حالا می‌خوایم عمیق‌تر بشیم و سه تا از مهم‌ترین و اساسی‌ترین تگ‌ها رو بررسی کنیم که هر سند HTML بدون اون‌ها کامل نیست: <html>، <head> و <body>. این‌ها مثل سه بخش اصلی یه خونه هستن: اسکلت کلی، قسمتی که اطلاعات خونه رو نگهداری می‌کنه و جایی که ما زندگی می‌کنیم!
این سه تگ، ساختار بنیادی هر صفحه وب رو تشکیل می‌دن و برای مرورگرها حیاتی هستن.
۱. تگ <html>: پادشاه کل صفحه! 👑
تگ <html>، ریشه‌ی اصلی تمام تگ‌های دیگه توی یه صفحه HTML هست. هر چیزی که در مورد صفحه وب می‌نویسیم، چه اطلاعات مربوط به صفحه (توی <head>) و چه محتوای قابل مشاهده (توی <body>)، باید داخل این تگ قرار بگیره.
کاربرد اصلی:
- تعریف کل محتوای صفحه به عنوان یه سند HTML.
- معمولاً شامل خصوصیت `lang` برای مشخص کردن زبان صفحه است (مثلاً `lang=”fa”` یا `lang=”en”`).
مثال:
<!DOCTYPE html>
<html lang="fa"> <!-- تمام صفحه داخل این تگ قرار می‌گیره -->
<!-- اینجا محتوای و قرار می‌گیره -->
</html>
۲. تگ <head>: مغز متفکر صفحه! 🧠
تگ <head>، درست بعد از تگ <html> باز می‌شه و اطلاعات مربوط به صفحه رو در خودش نگه می‌داره. این اطلاعات مستقیماً در صفحه نمایش داده نمی‌شن، اما برای مرورگر، موتورهای جستجو و سئو خیلی مهم هستن.
محتویات رایج در <head>:
- <meta charset=”UTF-8″>: برای تعیین کدگذاری حروف.
- <title>: عنوان صفحه که در تب مرورگر یا بوک‌مارک‌ها دیده می‌شه.
- <meta name=”viewport” …>: برای تنظیمات نمایش در دستگاه‌های مختلف.
- لینک به فایل‌های CSS خارجی (برای استایل‌دهی).
- لینک به فایل‌های JavaScript.
- تگ‌های متا برای توضیحات صفحه، کلمات کلیدی و…
مثال:
<html lang="fa">
<head> <!-- اطلاعات صفحه اینجا قرار می‌گیره -->
<meta charset="UTF-8">
<title>صفحه آموزشی من</title>
<link rel="stylesheet" href="style.css"> <!-- لینک به فایل CSS -->
</head>
<body>
<!-- محتوای قابل مشاهده -->
</body>
</html>
۳. تگ <body>: جایی که همه چیز اتفاق می‌افته! 🤩
تگ <body>، قلب تپنده صفحه وب شماست! هر چیزی که کاربر در مرورگر می‌بینه و باهاش تعامل داره، باید داخل این تگ قرار بگیره. متن‌ها، پاراگراف‌ها، عکس‌ها، لینک‌ها، جداول، ویدیوها، همه و همه!
کاربرد اصلی:
- نگهداری تمام محتوای قابل مشاهده و تعاملی صفحه.
- مرورگر این قسمت رو پردازش می‌کنه و به کاربر نمایش می‌ده.
مثال:
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>صفحه آموزشی من</title>
</head>
<body> <!-- محتوای قابل مشاهده صفحه -->
<h1>به دنیای HTML خوش آمدید!</h1>
<p>این یه پاراگراف ساده است.</p>
<img src="image.jpg" alt="یه عکس زیبا"> <!-- یه عکس -->
</body>
</html>
تگ‌های <html>، <head> و <body> پایه‌های اصلی ساختار هر صفحه HTML هستن. مثل پایه‌های یک ساختمان که استحکامش رو تضمین می‌کنن.
با این سه تگ کلیدی، دیگه یه دید کلی و خیلی خوب نسبت به ساختار صفحات وب پیدا کردیم. توی قسمت‌های بعدی، شروع می‌کنیم به پر کردن تگ <body> با انواع مختلف محتوا! پس آماده باشین که خلاقیتمون رو به کار بندازیم! ✨