درس دوم: ساختار اصلی یک صفحه HTML
یادتونه در درس قبل گفتیم هر صفحه HTML یک اسکلت‌بندی مشخص داره؟ دقیقاً مثل بدن ما که استخوان‌ها ساختار اصلیش رو تشکیل میدن، صفحات وب هم یک سری تگ‌های اصلی دارن که چارچوبشون رو می‌سازن.
1. مروری بر ساختار کلی سند HTML
بذارید یک بار دیگه اون تصویر کلی رو ببینیم:
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه من</title>
<!-- اطلاعات دیگه مثل تنظیمات و لینک به فایل‌های CSS و JavaScript اینجا میان -->
</head>
<body>
<!-- تمام محتوای صفحه (متن، تصویر، ویدئو و...) اینجا قرار می‌گیره -->
</body>
</html>این چهارچوب اصلی، تمام صفحات HTML رو تشکیل میده. حالا می‌خوایم جزء به جزء این تگ‌ها رو بررسی کنیم و ببینیم هر کدوم چه نقشی دارن.
2. تگ <!DOCTYPE html>: اعلام نوع سند!
شاید این یکی یکم عجیب به نظر برسه، چون شبیه بقیه تگ‌ها نیست (علامت تعجب داره!). این خط در واقع به مرورگر میگه “هی مرورگر! این سندی که داری می‌خونی از نوع HTML5 هست”.
چرا مهمه؟ چون نسخه‌های قبلی HTML هم وجود داشتن و این خط به مرورگر کمک می‌کنه تا بفهمه با چه نسخه‌ای از HTML سر و کار داره و صفحه رو به درستی نمایش بده. مثل این می‌مونه که اول کتاب بهت بگن این کتاب راهنمای استفاده از فلان مدل موبایله، نه مدل دیگه!
کجا قرار می‌گیره؟ همیشه اولین خط کد در هر صفحه HTML باید همین باشه.
3. تگ <html>: ریشه درخت HTML!
این تگ، ریشه یا به عبارت دیگه، پدر تمام تگ‌های دیگه در صفحه HTML شماست. هر چیزی که مربوط به صفحه وب شماست، باید داخل این تگ قرار بگیره.
مثل این می‌مونه که یک جعبه اصلی داشته باشی و تمام وسایلت رو داخل اون جعبه بذاری. تگ <html> همون جعبه اصلی ماست.
تگ <html> یک تگ باز (<html>) و یک تگ بسته (</html>) داره و تمام کدهای دیگه بین این دو تگ قرار می‌گیرن.
4. تگ <head>: کلاه نامرئی صفحه!
بخش <head> حاوی اطلاعاتی درباره صفحه شماست که مستقیماً برای کاربر در پنجره مرورگر نمایش داده نمیشه. این اطلاعات بیشتر برای خود مرورگر، موتورهای جستجو یا تنظیمات صفحه هستن.
فکر کن داری یک نامه می‌نویسی. بخش <head> مثل اطلاعات روی پاکت نامه می‌مونه (آدرس فرستنده و گیرنده، تمبر) که محتوای اصلی نامه نیست، اما برای ارسالش لازمه.
چه چیزهایی در <head> قرار می‌گیرن؟
- عنوان صفحه (
<title>): که در بخش بعدی توضیحش میدیم. - تنظیمات کاراکتر (Charset): برای اینکه مرورگر بفهمه چطور حروف و کلمات صفحه رو نمایش بده (مثلاً برای پشتیبانی از زبان فارسی از
UTF-8استفاده می‌کنیم). - توضیحات صفحه (Meta Description): متنی کوتاه که در نتایج جستجوی گوگل زیر عنوان صفحه نمایش داده میشه.
- کلمات کلیدی (Meta Keywords): (البته در حال حاضر اهمیت این تگ برای سئو خیلی کم شده).
- لینک به فایل‌های CSS: برای طراحی و ظاهر صفحه.
- لینک به فایل‌های JavaScript: برای اضافه کردن قابلیت‌های تعاملی به صفحه.
بخش <head> هم تگ باز (<head>) و تگ بسته (</head>) داره.
5. تگ <title>: عنوان تب مرورگر!
این تگ یکی از مهم‌ترین تگ‌هاییه که داخل <head> قرار می‌گیره. متنی که داخل این تگ می‌نویسی، به عنوان عنوان صفحه در تب مرورگر نمایش داده میشه.
همونطور که در مثال اول دیدیم: <title>عنوان صفحه من</title> باعث میشه که در تب مرورگر شما نوشته بشه “عنوان صفحه من”.
این عنوان هم برای کاربر مهمه (چون در بین تب‌های باز مرورگرش می‌تونه صفحه‌ی شما رو تشخیص بده) و هم برای سئو (موتورهای جستجو به این عنوان اهمیت میدن).
6. تگ <body>: قلب تپنده صفحه!
و بالاخره رسیدیم به مهم‌ترین بخش! تگ <body> جاییه که تمام محتوای قابل دیدن صفحه وب شما قرار می‌گیره. هر چیزی که کاربر در پنجره مرورگر می‌بینه، از متن و تصویر گرفته تا ویدئو و دکمه، همگی باید داخل تگ <body> باشن.
مثل این می‌مونه که در همون نامه مثال قبل، بخش <body> متن اصلی نامه شماست.
تگ <body> هم تگ باز (<body>) و تگ بسته (</body>) داره و تمام تگ‌های مربوط به محتوا بین این دو تگ قرار می‌گیرن.
خلاصه:
<!DOCTYPE html>: به مرورگر میگه نوع سند چیه.<html>: جعبه اصلی و ریشه سند.<head>: حاوی اطلاعاتی برای مرورگر و تنظیمات صفحه (نامرئی برای کاربر).<title>: عنوان صفحه در تب مرورگر (داخل<head>).<body>: حاوی تمام محتوای قابل دیدن کاربر.
