قسمت ۲ – نصب VS Code و ساخت اولین صفحه HTML

ساخت اولین صفحه html یعنی نوشتن چند خط کد در یک فایل متنی با پسوند .html و باز کردن همان فایل در مرورگر. برای این کار فقط سه چیز لازم دارید: یک مرورگر به‌روز، یک ویرایشگر کد مثل VS Code و ده دقیقه وقت.

نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵

در این قسمت از دوره رایگان کدپرس، VS Code را نصب و تنظیم می‌کنیم، افزونه Live Server را راه می‌اندازیم، اولین صفحه فارسی و راست‌چین را می‌سازیم و دو روش اجرای فایل HTML را با هم مقایسه می‌کنیم. اگر هنوز نمی‌دانید HTML دقیقاً چه کاری انجام می‌دهد، اول قسمت ۱ – HTML چیست؟ شروع آموزش HTML از صفر را بخوانید.

برای ساخت اولین صفحه HTML به چه ابزارهایی نیاز دارید؟

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

• مرورگر: کروم، فایرفاکس، اج یا سافاری؛ هر کدام که نسخه به‌روز داشته باشد. در این دوره بیشتر از ابزارهای توسعه‌دهنده کروم و فایرفاکس استفاده می‌کنیم.
• ویرایشگر کد: برنامه‌ای برای نوشتن کد با رنگ‌بندی، تکمیل خودکار و میانبرهای کاربردی. پیشنهاد ما Visual Studio Code است.
• یک پوشه پروژه: همه فایل‌های سایت (HTML، تصاویر و بعدها CSS) داخل یک پوشه با نام انگلیسی و بدون فاصله نگه داشته می‌شوند.
• افزونه Live Server (اختیاری ولی بسیار مفید): صفحه را روی یک سرور محلی اجرا می‌کند و با هر بار ذخیره، مرورگر را خودکار تازه می‌کند.

ویرایشگر کد HTML چیست و کدام را انتخاب کنیم؟

ویرایشگر کد HTML برنامه‌ای است که متن ساده ذخیره می‌کند و امکاناتی مثل رنگ‌بندی سینتکس، تکمیل خودکار تگ‌ها و مدیریت پوشه پروژه دارد. با Notepad ویندوز هم می‌شود HTML نوشت، اما خطاها دیده نمی‌شوند و سرعت کار پایین است.

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

ویرایشگر	هزینه	مناسب برای	توضیح
Visual Studio Code	رایگان	مبتدی تا حرفه‌ای	محبوب‌ترین انتخاب؛ Emmet داخلی، افزونه‌های فراوان، ترمینال داخلی
Notepad / TextEdit	رایگان (همراه سیستم‌عامل)	آزمایش خیلی کوتاه	بدون رنگ‌بندی و تکمیل خودکار؛ در TextEdit باید حالت Plain Text را فعال کنید
WebStorm	دارای نسخه رایگان برای استفاده غیرتجاری	توسعه‌دهنده حرفه‌ای	محیط کامل و سنگین‌تر؛ برای شروع لازم نیست
Sublime Text	قابل استفاده رایگان با پیام خرید	کسی که ویرایشگر سبک می‌خواهد	بسیار سریع ولی افزونه‌های کمتر برای مبتدی
ویرایشگرهای آنلاین (CodePen، StackBlitz)	رایگان	تست سریع و اشتراک‌گذاری	بدون نصب؛ برای پروژه کامل و کار آفلاین مناسب نیستند

در این دوره همه مثال‌ها با VS Code برای HTML نوشته می‌شوند. دلیلش ساده است: رایگان است، روی ویندوز، مک و لینوکس اجرا می‌شود، Emmet (ابزار تولید سریع کد) را به‌صورت داخلی دارد و همان ابزاری است که بیشتر تیم‌های حرفه‌ای، از جمله تیم siloow، هر روز با آن کار می‌کنند.

چطور VS Code را نصب کنیم؟

VS Code را فقط از سایت رسمی code.visualstudio.com دانلود کنید و نسخه مخصوص سیستم‌عامل خود را نصب کنید؛ کل فرایند کمتر از پنج دقیقه طول می‌کشد.

1. ویندوز: فایل نصب (User Installer) را اجرا کنید. در مرحله Select Additional Tasks تیک دو گزینه Add “Open with Code” action را بزنید تا با راست‌کلیک روی هر پوشه بتوانید آن را مستقیم در VS Code باز کنید. گزینه Add to PATH هم معمولاً به‌صورت پیش‌فرض فعال است.
2. مک: فایل zip را باز کنید و برنامه Visual Studio Code را به پوشه Applications بکشید.
3. لینوکس: بسته .deb (اوبونتو و دبیان) یا .rpm (فدورا) را نصب کنید؛ نسخه Snap هم وجود دارد.
4. برنامه را باز کنید. صفحه Welcome را می‌توانید ببندید؛ تنظیمات اولیه را در ادامه انجام می‌دهیم.

رابط VS Code را انگلیسی نگه دارید. بسته زبان فارسی وجود دارد، اما همه آموزش‌ها، پیام‌های خطا و مستندات به انگلیسی هستند و با رابط انگلیسی راحت‌تر جواب سؤال‌هایتان را پیدا می‌کنید.

چه افزونه‌ها و تنظیماتی برای VS Code لازم است؟

برای شروع آموزش HTML فقط یک افزونه واقعاً لازم است: Live Server. بقیه نیازها با تنظیمات داخلی خود VS Code برطرف می‌شود و نصب ده‌ها افزونه فقط برنامه را کند می‌کند.

نصب افزونه Live Server

در نوار کناری روی آیکون Extensions کلیک کنید (یا Ctrl+Shift+X)، عبارت Live Server را جست‌وجو کنید و نسخه منتشرشده توسط Ritwick Dey را نصب کنید. پس از نصب، دکمه Go Live در نوار پایین (Status Bar) ظاهر می‌شود. اگر به هر دلیل این افزونه کار نکرد، افزونه Live Preview مایکروسافت جایگزین خوبی است که پیش‌نمایش را داخل خود ویرایشگر نشان می‌دهد.

تنظیمات پیشنهادی

با Ctrl+Shift+P پنل فرمان‌ها را باز کنید، عبارت Open User Settings (JSON) را بنویسید و این چند خط را اضافه کنید:

{
  "files.autoSave": "afterDelay",
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.linkedEditing": true,
  "editor.tabSize": 2
}

• files.autoSave: فایل را چند لحظه بعد از تایپ خودکار ذخیره می‌کند تا فراموش کردن Ctrl+S باعث سردرگمی نشود.
• editor.wordWrap: خطوط بلند (مخصوصاً متن‌های فارسی) را در عرض پنجره می‌شکند تا اسکرول افقی لازم نباشد.
• editor.formatOnSave: با فرمت‌کننده داخلی HTML، تورفتگی‌ها را هنگام ذخیره مرتب می‌کند.
• editor.linkedEditing: وقتی نام تگ باز را عوض کنید، تگ بسته هم هم‌زمان عوض می‌شود؛ دیگر به افزونه Auto Rename Tag نیازی نیست.

ساخت اولین صفحه HTML قدم‌به‌قدم

برای ساخت اولین صفحه HTML یک پوشه بسازید، آن را در VS Code باز کنید، فایلی به نام index.html ایجاد کنید و ساختار پایه را با Emmet بنویسید. مراحل دقیق این است:

1. روی دسکتاپ پوشه‌ای به نام my-first-site بسازید (نام انگلیسی، حروف کوچک و بدون فاصله).
2. در VS Code از منوی File گزینه Open Folder را بزنید و همین پوشه را انتخاب کنید. اگر پیام اعتماد به نویسنده فایل‌ها (Trust) نمایش داده شد، گزینه تأیید را بزنید؛ این پوشه را خودتان ساخته‌اید.
3. در بخش Explorer روی آیکون New File کلیک کنید و نام index.html را وارد کنید.
4. داخل فایل خالی علامت ! را تایپ کنید و کلید Tab یا Enter را بزنید. Emmet ساختار کامل یک سند HTML را می‌نویسد.

خروجی Emmet تقریباً این است:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

این قالب برای سایت انگلیسی تنظیم شده است. برای صفحه فارسی دو تغییر لازم است: مقدار lang را به fa تغییر دهید و اتریبیوت dir="rtl" را اضافه کنید تا جهت کل صفحه راست‌به‌چپ شود. سپس عنوان و محتوای فارسی را بنویسید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>اولین صفحه من</title>
</head>
<body>
  <h1>سلام دنیا!</h1>
  <p>این اولین صفحه‌ای است که با HTML ساختم.</p>
  <p>امروز VS Code را نصب کردم و کدنویسی را شروع کردم.</p>
</body>
</html>

فایل را ذخیره کنید. همین چند خط یک صفحه وب کامل و استاندارد است. معنی دقیق هر خط (doctype، head، meta و body) را در قسمت بعد خط‌به‌خط توضیح می‌دهیم؛ فعلاً کافی است بدانید متن داخل <title> روی تب مرورگر نمایش داده می‌شود و همان عنوانی است که گوگل در نتایج جست‌وجو نشان می‌دهد. اهمیت این عنوان برای گوگل را در مقاله سئو چیست؟ راهنمای کامل سئو سایت مفصل توضیح داده‌ایم.

چرا نام فایل اصلی index.html است؟

وب‌سرورها وقتی کاربر فقط آدرس پوشه یا دامنه را وارد می‌کند، به‌طور پیش‌فرض دنبال فایلی به نام index.html می‌گردند. پس صفحه اصلی هر پوشه را همیشه index.html بنامید و صفحه‌های دیگر را با نام‌های توصیفی مثل about.html یا contact.html بسازید. ساختار ساده یک پروژه این شکلی است:

my-first-site/
├── index.html
├── about.html
└── images/
    └── logo.png

قواعد نام‌گذاری فایل‌ها

نام فایل‌ها بخشی از آدرس صفحه می‌شود؛ پس از حروف کوچک انگلیسی، عدد و خط تیره استفاده کنید. فاصله در آدرس به %20 تبدیل می‌شود و حروف بزرگ روی سرورهای لینوکسی باعث خطای ۴۰۴ می‌شود، چون About.html و about.html دو فایل متفاوت‌اند.

اجرای فایل HTML در مرورگر چطور انجام می‌شود؟

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

روش اول: دوبار کلیک روی فایل

در File Explorer روی index.html دوبار کلیک کنید یا فایل را داخل پنجره مرورگر بکشید. نوار آدرس چیزی شبیه خط اول نمونه زیر نشان می‌دهد. بعد از هر تغییر باید فایل را ذخیره و صفحه مرورگر را با F5 تازه کنید.

روش دوم: اجرا با Live Server

فایل HTML را در VS Code باز نگه دارید و روی Go Live در نوار پایین کلیک کنید (یا روی فایل راست‌کلیک و Open with Live Server را بزنید). مرورگر با آدرسی شبیه خط دوم باز می‌شود و از این به بعد با هر ذخیره، صفحه خودکار به‌روز می‌شود.

file:///C:/Users/User/Desktop/my-first-site/index.html
http://127.0.0.1:5500/index.html

عدد ۵۵۰۰ پورت پیش‌فرض Live Server است و 127.0.0.1 یعنی همین کامپیوتر خودتان؛ صفحه فقط روی سیستم شما دیده می‌شود و هنوز روی اینترنت منتشر نشده است.

ویژگی	باز کردن مستقیم (file://)	Live Server (http://)
نیاز به نصب	ندارد	یک افزونه VS Code
به‌روزرسانی بعد از ذخیره	دستی با F5	خودکار
شباهت به سایت واقعی	کم	زیاد (سرور HTTP)
آدرس‌های شروع‌شده با / (ریشه سایت)	درست کار نمی‌کنند	درست کار می‌کنند
درخواست fetch و ماژول‌های جاوااسکریپت	معمولاً به خطای امنیتی می‌خورند	کار می‌کنند

نکته: اگر بعد از ذخیره تغییری در مرورگر نمی‌بینید، اول نقطه سفید کنار نام تب در VS Code را بررسی کنید؛ این نقطه یعنی فایل ذخیره نشده است. سپس مطمئن شوید همان فایلی را باز کرده‌اید که در حال ویرایش آن هستید.

کد HTML صفحه را در مرورگر چطور ببینیم؟

با کلید Ctrl+U (در مک Cmd+Option+U) کد منبع هر صفحه را می‌بینید و با F12 ابزارهای توسعه‌دهنده (DevTools) باز می‌شود. این دو ابزار از امروز بهترین دوست شما هستند.

تفاوت مهمی وجود دارد: View Source همان متنی را نشان می‌دهد که در فایل نوشته‌اید، اما زبانه Elements در DevTools درخت DOM را نشان می‌دهد؛ یعنی چیزی که مرورگر بعد از خواندن و اصلاح کد ساخته است. مثلاً اگر تگی را نبندید، در Elements می‌بینید که مرورگر خودش آن را بسته است. روی هر متن صفحه راست‌کلیک و Inspect را بزنید تا مستقیم به کد همان بخش بروید. این مهارت را در طول دوره بارها به کار می‌گیریم؛ در پروژه‌های واقعی تیم ما هم اولین قدم رفع هر باگ ظاهری همین Inspect است.

چرا متن فارسی در صفحه HTML به‌هم‌ریخته نمایش داده می‌شود؟

به‌هم‌ریختگی حروف فارسی (نمایش علامت‌هایی مثل سلام) تقریباً همیشه به‌خاطر نبودن <meta charset="UTF-8"> یا ذخیره فایل با انکدینگ دیگری است. VS Code فایل‌ها را به‌طور پیش‌فرض با UTF-۸ ذخیره می‌کند و نام انکدینگ را در نوار پایین نشان می‌دهد.

اگر فایلی را از جای دیگری کپی کرده‌اید و انکدینگ آن چیز دیگری است، روی نام انکدینگ در نوار پایین کلیک کنید، Save with Encoding را بزنید و UTF-۸ را انتخاب کنید. مشکل دوم چپ‌چین شدن متن است که با dir="rtl" روی تگ <html> حل می‌شود.

میانبرهای ضروری VS Code برای کدنویسی HTML

یادگرفتن ده میانبر زیر سرعت شما را چند برابر می‌کند. در مک به جای Ctrl از Cmd و به جای Alt از Option استفاده کنید.

میانبر (ویندوز)	کاربرد
! + Tab	تولید ساختار کامل سند HTML با Emmet
Ctrl+S	ذخیره فایل
Ctrl+/	کامنت کردن یا برداشتن کامنت خط انتخاب‌شده
Shift+Alt+F	مرتب کردن (Format) کل سند؛ در لینوکس Ctrl+Shift+I
Alt+Z	روشن و خاموش کردن شکستن خطوط بلند
Alt+↑ / Alt+↓	جابه‌جا کردن خط به بالا یا پایین
Shift+Alt+↓	کپی کردن خط در زیر همان خط
Ctrl+D	انتخاب مورد بعدی مشابه برای ویرایش چندگانه
Ctrl+P	باز کردن سریع فایل با تایپ نام آن
Ctrl+Shift+P	پنل فرمان‌ها (دسترسی به همه دستورها)
Ctrl+B	نمایش یا پنهان کردن نوار کناری

اشتباهات رایج در ساخت اولین صفحه HTML

• ذخیره فایل با پسوند اشتباه: در ویندوز اگر پسوند فایل‌ها پنهان باشد، ممکن است فایل شما index.html.txt شده باشد. از تب View گزینه File name extensions را فعال کنید.
• باز کردن فایل به‌جای پوشه: وقتی فقط یک فایل را باز می‌کنید، Live Server و مسیرهای نسبی درست کار نمی‌کنند. همیشه Open Folder را بزنید.
• نام پوشه فارسی یا دارای فاصله: در آدرس‌ها مشکل‌ساز می‌شود؛ my-first-site بهتر از «سایت من» است.
• فراموش کردن dir=”rtl”: متن فارسی چپ‌چین می‌شود و علامت‌های نگارشی مثل «!» در جای اشتباه قرار می‌گیرند.
• کپی کد از فایل Word: نقل‌قول‌های هوشمند (“ ”) جایگزین کوتیشن معمولی می‌شوند و اتریبیوت‌ها خراب می‌شوند.
• نصب ده‌ها افزونه از روز اول: افزونه‌های تکراری با هم تداخل دارند؛ فعلاً Live Server کافی است.

تمرین این قسمت

1. VS Code را نصب کنید، تنظیمات JSON بالا را وارد کنید و افزونه Live Server را فعال کنید.
2. پوشه my-first-site را بسازید و فایل index.html را با Emmet ایجاد کنید؛ سپس lang و dir را برای فارسی اصلاح کنید.
3. یک فایل دوم به نام about.html مطابق نمونه زیر بسازید و هر دو صفحه را با Live Server اجرا کنید.
4. یک بار dir="rtl" را حذف و ذخیره کنید و تغییر جهت متن را در مرورگر ببینید؛ سپس آن را برگردانید.
5. با Ctrl+U و F12 کد صفحه خودتان را در مرورگر بررسی کنید و تفاوت View Source و Elements را یادداشت کنید.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>درباره من</title>
</head>
<body>
  <h1>درباره من</h1>
  <p>من در حال یادگیری HTML در دوره رایگان کدپرس هستم.</p>
  <p>هدفم این است که تا پایان دوره یک لندینگ پیج کامل بسازم.</p>
</body>
</html>

جمع‌بندی

• برای ساخت اولین صفحه HTML فقط یک ویرایشگر کد و یک مرورگر لازم است؛ VS Code بهترین نقطه شروع است.
• همیشه یک پوشه پروژه با نام انگلیسی بسازید و صفحه اصلی را index.html بنامید.
• تایپ ! و Tab ساختار پایه را می‌سازد؛ برای فارسی lang="fa" و dir="rtl" را تنظیم کنید.
• Live Server صفحه را روی سرور محلی اجرا و با هر ذخیره خودکار تازه می‌کند.
• مشکل حروف فارسی را با UTF-۸ و مشکل جهت متن را با dir="rtl" حل کنید.

محیط کار شما آماده است. در قسمت بعد، یعنی «قسمت ۳ – ساختار صفحه HTML؛ doctype، head، body و راست‌چین کردن»، معنی تک‌تک خطوطی را که امروز نوشتید یاد می‌گیرید. اگر می‌خواهید ببینید همین HTML در یک پروژه واقعی چه جایگاهی دارد، راهنمای طراحی سایت از صفر تا تحویل را بخوانید، فهرست کامل قسمت‌ها را در صفحه آموزش‌های کدپرس دنبال کنید و برای مرجع رسمی تگ‌ها به مستندات HTML در MDN سر بزنید.

منابع

• HTML Living Standard — استاندارد رسمی HTML (WHATWG)
• MDN Web Docs — مرجع عناصر HTML
• web.dev — دوره Learn HTML گوگل

سوالات متداول ساخت اولین صفحه HTML