آماده سازی محیط طراحی وب و نصب ویرایشگر کد | درس 2

درس 2 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

در درس قبل فهمیدیم HTML ساختار صفحه را مشخص می کند و CSS ظاهر آن را تغییر می دهد. اکنون باید محیطی آماده کنیم که بتوانیم کد را راحت بنویسیم، فایل درست را پیدا کنیم و نتیجه تغییرها را ببینیم. در این درس، نصب ویرایشگر کد را یاد می گیرید و یک چرخه ساده را تمرین می کنید: نوشتن، ذخیره کردن، باز کردن در مرورگر و بررسی نتیجه.

اگر هنوز اولین صفحه خود را نساخته اید، ابتدا درس 1: آشنایی با HTML و CSS و نحوه کار وب را بخوانید. زمان پیشنهادی این درس با تمرین حدود 30 تا 45 دقیقه است؛ دانلود برنامه ممکن است زمان بیشتری بگیرد. هدف امروز تسلط بر ابزارهای زیاد نیست؛ باید بتوانید بدون سردرگمی یک فایل را ویرایش کنید.

در پایان درس دوم چه کاری می توانید انجام دهید؟

• تفاوت ویرایشگر کد و مرورگر را توضیح دهید.
• Visual Studio Code را از منبع رسمی دریافت و نصب کنید.
• پوشه تمرین را باز کنید و فایل HTML بسازید.
• متن فارسی را با رمزگذاری UTF-8 ذخیره کنید.
• تغییر ذخیره شده را در مرورگر ببینید و خطاهای رایج را پیدا کنید.

برای شروع طراحی وب چه ابزارهایی لازم داریم؟

برای تمرین های این مرحله، یک کامپیوتر، یک ویرایشگر متن و یک مرورگر کافی است. ویرایشگر محل نوشتن دستورهاست؛ مرورگر فایل را تفسیر می کند و نتیجه را نشان می دهد. همین تفاوت ساده جلوی یک اشتباه رایج را می گیرد: دکمه اجرای برنامه در ویرایشگر، تنها راه دیدن یک صفحه HTML نیست.

در این دوره از Visual Studio Code، یا به اختصار VS Code، استفاده می کنیم تا مسیر آموزش یکسان باشد. اگر با ویرایشگر دیگری راحت هستید، مثال های HTML و CSS به آن وابسته نیستند. برنامه Word برای ذخیره کد انتخاب مناسبی نیست، چون سند متنی قالب بندی شده می سازد و ممکن است نشانه ها یا نوع فایل را تغییر دهد.

برای مثال های محلی امروز به خرید هاست و دامنه، نصب وردپرس، PHP، Node.js یا پایگاه داده نیاز ندارید. این ابزارها در پروژه های دیگری کاربرد دارند. اگر می خواهید جای این مرحله را در کل مسیر بشناسید، راهنمای جامع طراحی سایت مراحل یک پروژه واقعی را توضیح می دهد.

نصب VS Code در ویندوز، مرحله به مرحله

به صفحه رسمی دانلود Visual Studio Code بروید و بسته متناسب با سیستم عامل و پردازنده دستگاه خود را انتخاب کنید. VS Code با Visual Studio یک محصول یکسان نیست؛ نام برنامه دانلود شده را بررسی کنید. برای بیشتر کاربران ویندوز، نسخه User Installer انتخاب مناسبی است و نصب برای حساب فعلی به دسترسی مدیر نیاز ندارد.

1. فایل نصب رسمی را دانلود و اجرا کنید.
2. شرایط نصب را بخوانید و مراحل نصب را دنبال کنید.
3. پس از پایان، Visual Studio Code را باز کنید.
4. اگر صفحه خوش آمدگویی نمایش داده شد، می توانید آن را ببندید و سراغ پوشه تمرین بروید.

اگر چند گزینه مانند x64 و Arm64 می بینید، نوع سیستم را در اطلاعات دستگاه بررسی کنید؛ گزینه را صرفا بر اساس نام ویندوز انتخاب نکنید. جزئیات بسته های نصب در راهنمای رسمی نصب در ویندوز آمده است. ظاهر پنجره نصب ممکن است در نسخه های مختلف تغییر کند.

اگر مک یا لینوکس دارید

از همان صفحه رسمی، بسته مخصوص دستگاه خود را بگیرید. در macOS نسخه مناسب پردازنده را انتخاب کنید و برنامه را طبق راهنمای نصب به Applications منتقل کنید. در لینوکس بسته باید با توزیع شما سازگار باشد؛ برای مراحل دقیق از راهنمای شروع VS Code استفاده کنید. ادامه تمرین به سیستم عامل وابسته نیست، اما بعضی میانبرها تفاوت دارند.

پوشه تمرین را داخل ویرایشگر باز کنید

اگر پوشه web-course را در درس قبل ساخته اید، همان را نگه دارید. داخل آن پوشه ای با نام lesson-02 بسازید تا تمرین جدید، فایل قبلی را تغییر ندهد. در این درس تنها یک فایل داریم؛ ساختار کامل پروژه و شیوه نام گذاری پوشه ها موضوع درس بعد است.

1. در VS Code منوی File و سپس Open Folder را انتخاب کنید.
2. پوشه lesson-02 را انتخاب و باز کنید.
3. در بخش Explorer ویرایشگر، یک فایل جدید با نام index.html بسازید.
4. نام فایل را بررسی کنید: باید دقیقا index.html باشد، نه index.html.txt.

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

کدام بخش های محیط را باید بشناسیم؟

Explorer فایل ها و پوشه های پروژه را نشان می دهد. ناحیه میانی محل نوشتن کد است. زبانه بالای آن نام فایل باز را نشان می دهد و نوار وضعیت پایین، اطلاعاتی مانند زبان فایل و رمزگذاری را در اختیار شما می گذارد. برای توضیح تصویری این قسمت ها، راهنمای رابط ویرایشگر را ببینید. فعلا لازم نیست همه آیکون ها را یاد بگیرید.

اولین فایل را در محیط جدید بسازید

کد زیر را کامل داخل index.html قرار دهید. این نمونه به فایل خارجی وابسته نیست. اگر بخش کد دکمه Copy دارد، از آن استفاده کنید؛ سپس بررسی کنید خط اول و خط آخر هم منتقل شده باشند. در صورت کار نکردن دکمه، متن کد را انتخاب و دستی کپی کنید.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>تمرین درس دوم</title>
  <style>
    body {
      font-family: Tahoma, sans-serif;
      margin: 24px;
      line-height: 1.8;
      background-color: #f8fafc;
      color: #1e293b;
    }
    h1 {
      color: #1d4ed8;
    }
  </style>
</head>
<body>
  <h1>محیط کار من آماده است</h1>
  <p>این صفحه را با ویرایشگر کد ساخته ام.</p>
</body>
</html>

با File > Save فایل را ذخیره کنید. در ویندوز و لینوکس معمولا Ctrl+S و در مک Cmd+S همین کار را انجام می دهد. در نوار وضعیت، زبان فایل باید HTML باشد. اگر Plain Text می بینید، اول نام و پسوند فایل را بررسی کنید؛ تغییر دستی زبان ویرایشگر به تنهایی پسوند اشتباه را اصلاح نمی کند.

چرا UTF-8 را بررسی می کنیم؟

رمزگذاری به برنامه می گوید داده های متنی را چگونه به حروف تبدیل کند. برای این تمرین، فایل را با UTF-8 ذخیره کنید و خط meta charset را هم نگه دارید. اگر نوار وضعیت رمزگذاری دیگری نشان می دهد، روی آن بزنید و گزینه Save with Encoding و سپس UTF-8 را انتخاب کنید. اگر متن از قبل خراب شده، فقط تغییر این گزینه لزوما حروف قبلی را برنمی گرداند؛ متن سالم را دوباره وارد کنید.

فایل HTML را در مرورگر باز کنید

1. پوشه lesson-02 را در فایل منیجر سیستم عامل باز کنید.
2. روی index.html دوبار کلیک کنید؛ اگر برنامه دیگری باز شد، از Open with مرورگر خود را انتخاب کنید.
3. عنوان زبانه مرورگر باید «تمرین درس دوم» باشد.
4. داخل صفحه باید عنوان آبی «محیط کار من آماده است» و یک پاراگراف فارسی روی زمینه روشن ببینید.

آدرس این صفحه محلی معمولا با file:/// شروع می شود. این یعنی فایل روی دستگاه شما باز شده و هنوز در اینترنت منتشر نشده است. برای نمایش همین HTML و CSS ساده، این روش کافی است. بعضی امکانات پیشرفته وب در فایل محلی محدودیت دارند؛ وقتی تمرین به آنها نیاز پیدا کند، سرور محلی را معرفی می کنیم.

چرخه اصلی تمرین: تغییر، ذخیره، تازه سازی

به ویرایشگر برگردید و متن داخل پاراگراف را به «من امروز ویرایشگر کد را آماده کردم.» تغییر دهید. فایل را ذخیره کنید، سپس در مرورگر صفحه را تازه کنید. باید جمله جدید را ببینید. اگر تغییری رخ نداد، پیش از دستکاری کد، نام پوشه و فایل باز در هر دو برنامه را مقایسه کنید. دو فایل هم نام در دو پوشه متفاوت، یک فایل نیستند.

حالا رنگ عنوان را از #1d4ed8 به #166534 تغییر دهید و همان چرخه را تکرار کنید. عنوان باید سبز تیره شود. با این دو تغییر می فهمید هم ویرایش متن HTML و هم تغییر مقدار CSS در محیط شما اثر می گذارد. کدها، نام ویژگی ها و اعداد را با صفحه کلید انگلیسی بنویسید.

تنظیم های ساده برای تمرین راحت تر

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

اگر یک خط طولانی از کادر بیرون می رود، Word Wrap را فعال کنید؛ میانبر پیش فرض در ویندوز و لینوکس Alt+Z و در مک Option+Z است. این تنظیم فقط نمایش خط را می شکند و به معنی افزودن خط جدید به کد نیست. جزئیات در راهنمای ویرایش متن در VS Code آمده است.

همچنین می توانید Command Palette را باز کنید و نام دستور دلخواه را جستجو کنید؛ میانبر پیش فرض آن در ویندوز و لینوکس Ctrl+Shift+P و در مک Cmd+Shift+P است. برای شناخت زبان فایل و تنظیم های ویرایشگر، راهنمای نکته ها و میانبرهای رسمی مرجع خوبی است. میانبرهای شخصی سازی شده ممکن است با این موارد فرق داشته باشند.

آیا امروز افزونه هم نصب کنیم؟

برای این تمرین لازم نیست افزونه اضافی نصب کنید. ابتدا مطمئن شوید چرخه ذخیره و مشاهده نتیجه را بلد هستید. ابزار پیش نمایش خودکار می تواند بعدا تعداد تازه سازی های دستی را کم کند، اما مشکل پسوند اشتباه یا ویرایش فایل دیگر را خودبه خود حل نمی کند. هر افزونه را برای یک نیاز مشخص اضافه کنید.

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

اشتباه های رایج و راه پیدا کردن علت

• به جای صفحه، کد خام می بینم: پسوند واقعی فایل و برنامه ای را که آن را باز کرده بررسی کنید. فایل باید HTML باشد و در مرورگر باز شود.
• صفحه سفید است: مطمئن شوید فایل خالی نیست، ذخیره شده و محتوای body را حذف نکرده اید. نمونه کامل را با فایل خود مقایسه کنید.
• تغییرها ظاهر نمی شوند: ذخیره، تازه سازی و مسیر فایل را به همین ترتیب بررسی کنید.
• عنوان رنگ ندارد: نام h1، علامت # و مقدار رنگ را کنترل کنید. مقدار عددی با رقم فارسی ننویسید.
• حروف فارسی به هم ریخته اند: UTF-8 بودن فایل و وجود meta charset را بررسی کنید. جهت راست به چپ مسئله دیگری است که dir=”rtl” آن را مشخص می کند.
• فایل در Explorer پیدا نیست: بررسی کنید پوشه درست را باز کرده باشید و فایل را جای دیگری ذخیره نکرده باشید.

از همین ابتدا عادت کنید برای هر ایراد، یک تغییر مشخص انجام دهید و نتیجه را ببینید. این عادت بعدها هنگام ارزیابی کیفیت سایت وردپرسی هم مفید است: ظاهر درست، تنها معیار نیست و باید رفتار واقعی صفحه را بررسی کرد.

تمرین درس 2: آماده بودن محیط را ثابت کنید

بدون ساخت فایل جدید، عنوان زبانه را «دفتر تمرین من» بگذارید. عنوان داخل صفحه را به نام خودتان تغییر دهید. پاراگراف دوم اضافه کنید و بنویسید «هدف من ساخت یک سایت خدماتی است.» رنگ عنوان را سبز تیره کنید. فایل را ذخیره کنید، ویرایشگر را ببندید و دوباره از همان پوشه باز کنید؛ تغییرها باید باقی مانده باشند.

<h1>من سارا هستم</h1>
<p>من امروز ویرایشگر کد را آماده کردم.</p>
<p>هدف من ساخت یک سایت خدماتی است.</p>

h1 {
  color: #166534;
}

این درس چه ارتباطی با پروژه نهایی دارد؟

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

این تمرین ها پایه ساخت صفحه هستند. اگر همزمان برای کسب و کار واقعی خود به اجرای پروژه نیاز دارید، جزئیات خدمات طراحی سایت در ارومیه در دسترس است؛ شرکت در این دوره به سفارش خدمات وابسته نیست.

پرسش های متداول نصب ویرایشگر کد

آیا باید برای تمرین HTML حساب کاربری بسازم؟

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

آیا پس از نصب به اینترنت نیاز دارم؟

این نمونه هیچ تصویر، فونت یا کتابخانه اینترنتی ندارد؛ پس از نصب ابزار و ذخیره کد، می توانید آن را بدون اینترنت ویرایش و مشاهده کنید. دانلود برنامه، دریافت به روزرسانی و مطالعه سایت دوره به اتصال نیاز دارند.

می توانم با موبایل ادامه بدهم؟

مطالعه درس با موبایل ممکن است، اما مسیر عملی این درس برای کامپیوتر نوشته شده است. انتخاب فایل، مقایسه پنجره ها و نوشتن نشانه های کد با صفحه کلید، تمرین را ساده تر می کند.

آیا نمایش صحیح صفحه یعنی کد کاملا بی ایراد است؟

خیر. مرورگر بعضی خطاهای HTML را جبران می کند. دیدن خروجی، یک مرحله بررسی است؛ در درس های بعد ساختار درست سند، اعتبارسنجی و دسترس پذیری را هم تمرین می کنیم.

قبل از رفتن به درس بعد

اگر می توانید پوشه درست را باز کنید، index.html را ذخیره کنید و تغییر متن و رنگ را در مرورگر ببینید، هدف امروز را انجام داده اید. پوشه lesson-02 را نگه دارید و تمرین را با فایل درس قبل جایگزین نکنید.

درس قبلی: وب چگونه کار می کند؟ آشنایی با HTML و CSS

درس بعد: ساختار پوشه ها و اولین پروژه وب