حالا کدت رو تو مرورگر ببین

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

روش اول: باز کردن مستقیم فایل با دابل‌کلیک

ساده‌ترین راه اینه که فایل index.html رو تو File Explorer یا Finder پیدا کنی و روش دابل‌کلیک کنی. این کار فایل رو مستقیم تو مرورگر پیش‌فرض سیستمت باز می‌کنه. اگه به آدرس بار مرورگر نگاه کنی، می‌بینی آدرس یه‌همچین شکلی داره:

file:///C:/Users/YourName/my-first-project/index.html

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

روش دوم: باز کردن از طریق مرورگر

راه دیگه اینه که مرورگر رو باز کنی، از منوی File گزینه‌ی Open File (یا کلید ترکیبی Ctrl+O) رو بزنی و مسیر فایلت رو انتخاب کنی. نتیجه دقیقاً همون چیزیه که با دابل‌کلیک می‌گرفتی؛ فقط یه مسیر جایگزینه.

روش سوم (پیشنهادی): استفاده از Live Server تو VS Code

تو درس قبل درباره‌ی افزونه‌ی Live Server صحبت کردیم. حالا وقتشه ازش استفاده کنیم. بعد از نصب این افزونه:

  1. فایل index.html رو تو VS Code باز کن.
  2. گوشه‌ی پایین‌راست صفحه، رو دکمه‌ی Go Live کلیک کن.
  3. مرورگر خودش باز میشه و صفحه رو نشون می‌ده، اما این بار آدرسش یه‌همچین شکلیه:
http://127.0.0.1:5500/index.html

می‌بینی که آدرس دیگه با file:// شروع نمیشه، بلکه با http:// شروع میشه. این یعنی الان یه سرور محلی کوچیک رو روی سیستم خودت داری که فایل رو از طریق پروتکل HTTP سرو می‌کنه، دقیقاً شبیه چیزی که یه سایت واقعی روی اینترنت انجام میده.

چرا این تفاوت مهمه؟

وقتی پروژه‌ات فقط یه فایل HTML ساده باشه، فرقی نمی‌کنه از کدوم روش استفاده کنی. اما به‌محض اینکه پروژه بزرگ‌تر بشه (مثلاً بخوای از JavaScript برای خوندن فایل‌های دیگه استفاده کنی، یا از API خارجی داده بگیری)، خیلی از این کارها تو حالت file:// اصلاً کار نمی‌کنن یا با خطا مواجه میشن، چون مرورگرها به دلایل امنیتی محدودیت‌های سختی روی فایل‌های لوکال می‌ذارن. به همین خاطر، استفاده از یه سرور محلی مثل Live Server از همون ابتدا یه عادت درسته.

رفرش خودکار صفحه

یکی از بهترین قابلیت‌های Live Server اینه که هر بار فایلت رو ذخیره می‌کنی (Ctrl+S)، خودش صفحه‌ی مرورگر رو رفرش می‌کنه. یعنی دیگه لازم نیست هر بار خودت بری تو مرورگر دکمه‌ی رفرش رو بزنی؛ فقط کد می‌زنی، ذخیره می‌کنی، و نتیجه رو بلافاصله می‌بینی.

بررسی خروجی با ابزار توسعه‌دهنده (DevTools)

یه قابلیت مهم دیگه‌ی مرورگر اینه که می‌تونی ساختار HTML صفحه رو زنده ببینی و حتی موقتاً تغییرش بدی. برای این کار:

  1. رو هر جای صفحه راست‌کلیک کن.
  2. گزینه‌ی Inspect یا «بازرسی» رو انتخاب کن.
  3. یه پنل باز میشه که تب Elements توش، دقیقاً ساختار HTML صفحه رو نشون می‌ده.

این ابزار خیلی به دردت می‌خوره، چون می‌تونی ببینی مرورگر دقیقاً چطور کد تو رو تفسیر کرده، و اگه جایی اشتباهی پیش اومده باشه، سریع پیداش کنی.

چند اشتباه رایج

  • ذخیره‌نکردن فایل قبل از رفرش مرورگر (فراموش کردن Ctrl+S) و تعجب از اینکه چرا تغییرات دیده نمیشه.
  • باز کردن فایل با پسوند اشتباه (مثلاً .txt به‌جای .html) که باعث میشه مرورگر کد رو به‌جای اجرا، به‌صورت متن ساده نشون بده.
  • گیج شدن بین آدرس file:// و http:// و ندونستن این‌که چرا بعضی کدها تو حالت اول کار نمی‌کنن.

بهترین روش‌ها

  • از همون ابتدا عادت کن با Live Server یا یه سرور محلی مشابه کار کنی، نه با دابل‌کلیک ساده.
  • همیشه بعد از هر تغییر، فایل رو ذخیره کن و نتیجه رو تو مرورگر چک کن؛ این چرخه‌ی «بنویس، ذخیره کن، ببین» رو تا آخر مسیر یادگیریت زیاد تکرار می‌کنی.
  • با ابزار Inspect مرورگر آشنا شو، چون بعداً برای پیدا کردن اشکالات کد خیلی به کارت میاد.

جمع‌بندی

برای دیدن نتیجه‌ی فایل HTML چند راه داری: باز کردن مستقیم فایل (که ساده ولی محدوده)، یا استفاده از یه سرور محلی مثل Live Server (که شبیه‌سازی واقعی‌تری از یه سایت واقعیه). از همین الان بهتره با روش دوم پیش بری تا برای پروژه‌های بزرگ‌تر آماده باشی.