جلسه سوم: آشنایی با ساختار اصلی HTML

باز هم درود! توی جلسه قبلی قالب اولیه یک فایل HTML رو دیدیم. توی این جلسه می‌خوایم همون قالب رو خط‌به‌خط باز کنیم تا ببینید هر بخش چه کاری انجام می‌ده و کدهای صفحه رو باید کجا بنویسید.

اول یک ساختار ساده و امروزی رو می‌بینیم. بعد با doctype و تگ‌های html، head و body آشنا می‌شیم. در آخر هم یاد می‌گیریم چطور بین کدهامون کامنت یا همون یادداشت بنویسیم. لازم نیست چیزی رو حفظ کنید؛ چند بار نوشتن این ساختار خیلی بیشتر از حفظ‌کردنش بهتون کمک می‌کنه.

ساختار اصلی یک فایل HTML

<!doctype html><html lang="fa" dir="rtl"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>عنوان صفحه</title></head><body>  <h1>سلام دنیا!</h1>  <p>این اولین صفحه من هست.</p></body></html>

حالا از خط اول شروع کنیم و قدم‌به‌قدم پایین بیایم.

۱. عبارت doctype

عبارت <!doctype html> به مرورگر می‌گه این یک سند HTML امروزیه و باید صفحه رو در حالت استاندارد پردازش کنه. doctype یک تگ معمولی HTML نیست، پس تگ پایانی هم نداره.

۲. تگ html و زبان صفحه

تگ <html> ریشه سنده؛ یعنی بقیه بخش‌های صفحه داخل اون قرار می‌گیرن. ویژگی lang="fa" به مرورگر، موتور جست‌وجو و ابزارهای صفحه‌خوان می‌گه زبان اصلی محتوا فارسیه. ویژگی dir="rtl" هم جهت نوشته‌ها رو روی راست‌به‌چپ می‌ذاره.

توی بعضی سندهای HTML می‌شه تعدادی از تگ‌های پایانی رو ننوشت، ولی وقتی تازه شروع کردید بهتره همه تگ‌ها رو کامل ببندید. با این کار کدتون واضح‌تر می‌مونه و احتمال اشتباه هم کمتر می‌شه.

۳. بخش head

بخش <head> اطلاعات مربوط به صفحه رو نگه می‌داره؛ اطلاعاتی که معمولاً جزو محتوای اصلی و قابل‌دیدن صفحه نیستن. عنوان صفحه، اطلاعات متا، فایل‌های CSS و بعضی فایل‌های JavaScript می‌تونن داخل این بخش قرار بگیرن.

«متا» یعنی اطلاعاتی درباره خود صفحه که در اختیار مرورگر یا سرویس‌های دیگه قرار می‌گیره. مثلاً متای charset نوع رمزگذاری متن رو مشخص می‌کنه و متای viewport کمک می‌کنه صفحه روی موبایل درست نمایش داده بشه.

۴. تعیین UTF-8 با charset

خط <meta charset="utf-8"> نوع رمزگذاری نویسه‌ها رو مشخص می‌کنه. نویسه همون حرف، عدد یا علامتیه که توی متن می‌بینید. UTF-8 فقط مخصوص فارسی نیست و تقریباً همه زبان‌های رایج رو پوشش می‌ده. بهتره این خط رو نزدیک ابتدای بخش head بذارید.

۵. تنظیم viewport برای موبایل

متای viewport به مرورگر موبایل می‌گه عرض صفحه رو با عرض نمایشگر هماهنگ کنه. اگه این تنظیم رو نداشته باشید، ممکنه صفحه روی گوشی خیلی کوچک یا نامناسب دیده بشه. برای یک صفحه ساده می‌تونید خط زیر رو بنویسید:

<meta name="viewport" content="width=device-width, initial-scale=1">

۶. عنوان صفحه با title

متنی که داخل <title> می‌نویسید معمولاً روی تب مرورگر دیده می‌شه. این متن یکی از منابع مهم برای ساخت عنوان نتیجه جست‌وجو هم هست. البته گوگل همیشه دقیقاً همین عنوان رو نشون نمی‌ده و ممکنه با کمک تیتر صفحه یا اطلاعات دیگه، عنوان متفاوتی بسازه.

تگ <title> با تیتری که داخل خود صفحه می‌بینید فرق داره. عنوان تب مرورگر داخل head نوشته می‌شه، ولی تیتر اصلی و قابل‌دیدن صفحه معمولاً با تگ <h1> داخل body ساخته می‌شه.

۷. بخش body

محتوای اصلی صفحه داخل <body> قرار می‌گیره؛ چیزهایی مثل عنوان‌ها، متن‌ها، تصویرها، دکمه‌ها و فرم‌ها. البته هر چیزی که داخل body نوشته می‌شه، لزوماً روی صفحه دیده نمی‌شه. مثلاً CSS می‌تونه یک عنصر رو مخفی کنه و بعضی کدها هم فقط رفتار صفحه رو کنترل می‌کنن.

برای تمرین، نمونه بالا رو توی یک فایل با پسوند .html ذخیره کنید و بعد فایل رو با مرورگرتون باز کنید. حالا متن داخل title، h1 و p رو تغییر بدید. با همین تمرین ساده، تفاوت این بخش‌ها رو خیلی راحت می‌بینید.

کامنت‌گذاری در HTML

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

برای نوشتن کامنت در HTML، کافیه متن دلخواهتون رو بین <!-- و --> بذارید:

<!-- کدهای مربوط به فوتر سایت --><footer>  <p>تمام حقوق محفوظ هست.</p></footer>

داخل متن کامنت نباید عبارت --> رو بنویسید، چون مرورگر اون رو نشانه پایان کامنت می‌دونه. یادتون نره رمز عبور، کلید API یا اطلاعات محرمانه رو هم داخل کامنت نذارید. دیده‌نشدن کامنت روی صفحه به این معنی نیست که کسی نمی‌تونه اون رو پیدا کنه.

توی تصویر زیر یک نمونه دیگه از کامنت‌گذاری رو می‌بینید:

بهتره متن کامنت کوتاه و روشن باشه. فرقی نمی‌کنه اون رو فارسی بنویسید یا انگلیسی؛ مهم اینه که بعداً با یک نگاه بفهمید کد به کدوم بخش مربوطه.

برای این جلسه همین مقدار کافیه. یک بار کل ساختار رو خودتون بنویسید. بعد هر بخش رو حذف کنید و دوباره برگردونید تا نقش اون بهتر توی ذهنتون جا بیفته. توی جلسه‌های بعدی از همین پایه برای ساخت صفحه‌های کامل‌تر کمک می‌گیریم.

جمع‌بندی

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

همچنین یاد گرفتید که با کامنت می‌تونید بین کدهاتون یادداشت بذارید، بدون اینکه متن اون روی صفحه نمایش داده بشه. حالا بهتره ساختار کامل رو چند بار از اول بنویسید و متن‌های داخل title، h1 و p رو تغییر بدید. همین تمرین کوتاه کمک می‌کنه جای هر بخش رو خیلی سریع یاد بگیرید.

سوالات متداول درباره ساختار اصلی HTML

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.