بعد از آشنایی با مبانی HTML، نوبت آن رسیده است که اولین صفحه وب خود را به صورت عملی ایجاد کنیم. برای نوشتن کدهای HTML به یک ویرایشگر کد نیاز داریم و Visual Studio Code یکی از ابزارهای محبوب و مناسب برای شروع طراحی وب است. در این آموزش قدم‌به‌قدم یاد می‌گیریم چگونه Visual Studio Code را آماده کنیم، یک پروژه ساده ایجاد کنیم، فایل index.html بسازیم، اولین کد HTML خود را بنویسیم و نتیجه را در مرورگر مشاهده کنیم.

Visual Studio Code چیست؟

Visual Studio Code که معمولاً آن را با نام VS Code می‌شناسیم، یک ویرایشگر کد است که توسط شرکت Microsoft توسعه داده شده است.

از VS Code می‌توان برای نوشتن زبان‌ها و فناوری‌های مختلف برنامه‌نویسی و طراحی وب استفاده کرد.

برای مثال:

• HTML

• CSS

• JavaScript

• TypeScript

• C#

• Python

• و بسیاری از زبان‌های دیگر

در مسیر یادگیری طراحی وب، VS Code می‌تواند محیط اصلی ما برای نوشتن فایل‌های HTML، CSS و JavaScript باشد.

چرا از Visual Studio Code استفاده کنیم؟

برای نوشتن HTML حتی به یک نرم‌افزار بسیار پیچیده نیاز نداریم.

حتی می‌توانیم یک فایل HTML را با ویرایشگرهای متن ساده ایجاد کنیم.

اما VS Code امکانات بیشتری در اختیار ما قرار می‌دهد.

برخی از امکانات مهم آن عبارت‌اند از:

• نمایش بهتر کدها

• رنگ‌بندی دستورات

• تکمیل خودکار کد

• پیشنهاد تگ‌ها و ویژگی‌ها

• مدیریت فایل‌ها و پوشه‌های پروژه

• امکان نصب افزونه‌های مختلف

• پشتیبانی مناسب از HTML، CSS و JavaScript

بنابراین می‌توانیم از همان ابتدای مسیر، با یک ابزار مناسب کار کنیم.

نصب Visual Studio Code

اگر Visual Studio Code را روی سیستم خود ندارید، ابتدا باید آن را نصب کنید.

پس از نصب، برنامه را اجرا کنید.

در اولین اجرا ممکن است محیطی شبیه یک ویرایشگر ساده مشاهده کنید.

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

در این آموزش فعلاً با قسمت‌های پیچیده VS Code کاری نداریم.

هدف ما این است که فقط امکانات موردنیاز برای ساخت اولین صفحه HTML را یاد بگیریم.

ایجاد پوشه پروژه

قبل از ساخت فایل HTML بهتر است برای پروژه خود یک پوشه در درایو دلخواه مانند درایو D ایجاد کنیم.

برای مثال می‌توانیم پوشه‌ای با نام زیر ایجاد کنیم:

MyFirstWebsite

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

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

MyFirstWebsite

فعلاً فقط همین یک پوشه را داریم.

در ادامه فایل HTML را داخل آن ایجاد خواهیم کرد.

باز کردن پوشه در Visual Studio Code

حالا Visual Studio Code را باز کنید.

از منوی برنامه گزینه:

File

و سپس:

Open Folder

را انتخاب کنید.

حالا در پنجره باز شده وارد درایو D شوید و پوشه MyFirstWebsite را انتخاب کنید.

پس از باز شدن پوشه، نام آن را در بخش Explorer در سمت چپ VS Code مشاهده خواهید کرد.

ممکن است در ابتدا پوشه خالی باشد.

این کاملاً طبیعی است.

چون هنوز هیچ فایلی ایجاد نکرده‌ایم.

ساخت اولین فایل HTML

حالا باید اولین فایل HTML خود را ایجاد کنیم.

در بخش Explorer روی نام پوشه پروژه کلیک کنید.

سپس گزینه ایجاد فایل جدید را انتخاب کنید.

نام فایل را به صورت زیر وارد کنید:

index.html

و کلید Enter را بزنید.

اکنون باید ساختاری شبیه این داشته باشیم:

MyFirstWebsite
│
└── index.html

فایل index.html اولین صفحه وب ما خواهد بود.

چرا نام فایل را index.html انتخاب می‌کنیم؟

ممکن است برایتان سؤال باشد که چرا از نام index.html استفاده می‌کنیم.

در بسیاری از پروژه‌های وب، فایل index به عنوان صفحه اصلی یا نقطه شروع سایت استفاده می‌شود.

برای مثال:

index.html

می‌تواند صفحه اصلی یک سایت ساده باشد.

البته HTML اجازه می‌دهد فایل‌های دیگری نیز ایجاد کنیم.

مثلاً:

about.html
contact.html
products.html

اما برای اولین پروژه بهتر است با:

index.html

شروع کنیم.

نوشتن اولین کد HTML

حالا فایل index.html را باز کنید.

سپس کد زیر را داخل آن قرار دهید:

<!DOCTYPE html>

<html>

<head>

    <title>اولین صفحه من</title>

</head>

<body>

    <h1>سلام دنیا!</h1>

    <p>این اولین صفحه HTML من است.</p>

</body>

</html>

تبریک می‌گویم!

شما اولین صفحه HTML خود را ایجاد کرده‌اید.

اما هنوز باید آن را در مرورگر مشاهده کنیم.

ذخیره کردن فایل

بعد از نوشتن کد باید فایل را ذخیره کنیم.

می‌توانید از میانبر زیر استفاده کنید:

Ctrl + S

یا از منوی:

File → Save

استفاده کنید.

پس از ذخیره فایل، تغییرات شما داخل index.html ثبت می‌شوند.

باز کردن صفحه HTML در مرورگر

حالا به پوشه پروژه بروید.

برای مثال:

MyFirstWebsite

درون آن باید فایل زیر را مشاهده کنید:

index.html

روی فایل دوبار کلیک کنید.

فایل با مرورگر پیش‌فرض سیستم باز خواهد شد.

صفحه‌ای مشابه این مشاهده می‌کنید:

سلام دنیا!

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

اولین صفحه وب شما ساخته شد.

افزونه مشاهده وبسایت در Visual Studio Code

VS Code امکانات بسیار خوبی برای HTML دارد و اگر قصد داشته باشید صفحات وبسایت خود را بصورت مستقیم (بدون مراجعه به پوشه پروژه) مشاهده کنید می توانید پلاگین open in broswer را نصب کنید. برای نصب این پلاگین مراحل زیر را دنبال کنید:

از قسمت سمت چپ برنامه VS Code گزینه Extensions را انتخاب کنید.

در کادر Search عبارت open in browser را وارد کنید.

از لیست ظاهر شده گزینه open in browser را انتخاب کنید.

در پنجره وسط گزینه install را بزنید و منتظر بمانید تا نصب پلاگین تکمیل شود.

از قسمت سمت چپ برنامه VS Code گزینه Explorer را انتخاب کنید تا مجددا فایل های وبسایت خود را مشاهده کنید.

روی صفحه index.html راست کلیک کنید و گزینه open in default browser یا گزینه مشابه را انتخاب کنید.

به این ترتیب صفحه مورد نظر شما در مرورگر نمایش داده می‌شود.

جمع‌بندی

در این مقاله با استفاده از Visual Studio Code اولین صفحه HTML خود را ایجاد کردیم. یاد گرفتیم چگونه یک پوشه برای پروژه بسازیم، آن را در VS Code باز کنیم، فایل index.html ایجاد کنیم و یک ساختار ساده HTML داخل آن قرار دهیم. سپس فایل را ذخیره کردیم و نتیجه را در مرورگر مشاهده کردیم. همچنین با بخش‌های ابتدایی یک سند HTML، تگ‌های html، head، title، body، h1 و p آشنا شدیم و قابلیت ساده Emmet را نیز بررسی کردیم.

در مقاله بعدی به سراغ یکی از مفاهیم مهم HTML می‌رویم و دقیق‌تر بررسی می‌کنیم که تگ، عنصر (Element) و ویژگی (Attribute) چیستند و چه تفاوتی با یکدیگر دارند.