عملی: تنظیمات اولیه سند و ساختار اصلی

عملی: تنظیمات اولیه سند و ساختار اصلی 🚀

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

بیایید با هم یه صفحه HTML پایه بسازیم که هم استانداردهای لازم رو رعایت کنه و هم برای شروع آماده باشه.

مراحل ساختار اولیه:

شروع با DOCTYPE: اولین خط، همیشه اعلامیه نوع سند هست.
باز کردن تگ html: کل سند رو داخل تگ <html> قرار می‌دیم و زبان رو مشخص می‌کنیم.
بخش head: این قسمت شامل اطلاعاتی مثل کدگذاری کاراکتر، عنوان صفحه و تنظیمات viewport هست.
بخش body: این قسمت، جاییه که تمام محتوای قابل مشاهده صفحه قرار می‌گیره.
پایان دادن به تگ‌ها: مطمئن می‌شیم که تمام تگ‌های باز شده، بسته شدن.

کد کامل سند پایه HTML:

حالا این مراحل رو توی یه فایل HTML واقعی پیاده می‌کنیم. می‌تونین این کد رو توی یه ویرایشگر متن مثل Notepad (در ویندوز) یا TextEdit (در مک) کپی کرده و با پسوند `.html` (مثلاً `index.html`) ذخیره کنین.


<!DOCTYPE html> <!-- ۱. اعلام نوع سند برای HTML5 -->
<html lang="fa"> <!-- ۲. شروع سند HTML و تعیین زبان فارسی -->

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

    <!-- اینجا می‌توانیم لینک به فایل‌های CSS یا اطلاعات دیگر را هم اضافه کنیم -->
  </head>

  <body> <!-- ۴. بخش بدن سند که محتوای قابل نمایش در آن قرار می‌گیرد -->

    <h1>به اولین صفحه HTML من خوش آمدید!</h1> <!-- یک عنوان اصلی -->
    <p>این یک پاراگراف ساده است که در بدنه صفحه قرار گرفته.</p> <lt;p>اینجا می‌توانیم محتوای مختلفی مثل متن، تصویر، لینک و ... اضافه کنیم.</p>

    <!-- اینجا فضای خالی برای اضافه کردن محتواهای بیشتر در آینده -->

  </body> <!-- ۵. پایان بخش بدن -->
</html> <!-- ۵. پایان کل سند HTML -->

توضیحات تکمیلی کد:

<!DOCTYPE html>: به مرورگر می‌گه که این صفحه با HTML5 نوشته شده.
<html lang=”fa”>…</html>: کل صفحه رو در بر می‌گیره و زبانش رو فارسی تعیین می‌کنه.
<head>…</head>: اطلاعات اولیه صفحه مثل کدگذاری کاراکتر (UTF-8)، تنظیمات دستگاه (viewport) و عنوان صفحه (title) رو شامل می‌شه.
<body>…</body>: هر چیزی که کاربر در مرورگر می‌بینه، مثل تیترها (<h1>) و پاراگراف‌ها (<p>)، در این بخش قرار می‌گیره.

این ساختار پایه، مثل یه شالوده محکمه که می‌شه روش هر نوع ساختمون وبی رو بنا کرد. حالا وقتشه که خلاقیت به خرج بدین و بخش <body> رو با محتوای دلخواهتون پر کنین!

با ذخیره کردن این کد به صورت یه فایل `.html` و باز کردنش توی مرورگر، اولین صفحه وب سفارشی خودتون رو می‌بینین! چقدر حس خوبیه، نه؟ 😉