برای اینکه بتوانید HTML را بهصورت عملی یاد بگیرید و اولین صفحات وب خود را ایجاد کنید، ابتدا باید یک پروژه جدید در یک ویرایشگر کد (Code Editor) راهاندازی کنید. در این مجموعه آموزشی از Visual Studio Code (VS Code) استفاده میکنیم؛ یک ویرایشگر رایگان که برای سیستمعاملهای Windows، macOS و Linux در دسترس است. البته اگر از ویرایشگر دیگری استفاده میکنید، میتوانید آموزش را با همان ادامه دهید.
ایجاد پوشه پروژه
پس از اجرای Visual Studio Code، یک پوشه جدید برای پروژه خود ایجاد کنید و نام آن را html-practice قرار دهید. در طول این مجموعه آموزشی، تمام فایلها و پوشههای پروژه را داخل این پوشه ذخیره خواهیم کرد.
برای ایجاد پوشه پروژه در VS Code:
- از منوی File گزینه Add Folder to Workspace را انتخاب کنید.
- در پنجره باز شده روی New Folder کلیک کنید.
- پوشهای با نام html-practice ایجاد کنید.
ایجاد فایل HTML
اکنون داخل پوشه html-practice یک فایل جدید با نام index.html بسازید. این فایل در تمام آموزشهای بعدی برای تمرین و نوشتن کدهای HTML مورد استفاده قرار خواهد گرفت.
در Visual Studio Code میتوانید با انجام مراحل زیر این فایل را ایجاد کنید:
- روی پوشه html-practice راستکلیک کنید.
- گزینه New File را انتخاب کنید.
- فایل را با نام index.html ذخیره کنید.
اکنون پروژه HTML شما آماده است و در ادامه آموزشها روی همین فایل کار خواهید کرد.
رفع خطاها و اشکالیابی HTML
هنگام نوشتن کدهای HTML، دقت بسیار مهم است. حتی یک فاصله اضافی، یک کاراکتر اشتباه یا یک تگ ناقص میتواند باعث شود صفحه آنطور که انتظار دارید نمایش داده نشود.
اگر کد HTML شما در مرورگر بهدرستی اجرا نشد، موارد زیر را بررسی کنید:
- وجود فاصلههای اضافی یا حذفشده
- باز و بسته شدن صحیح تگها
- اشتباه تایپی در نام تگها
- استفاده صحیح از علائم نگارشی مانند
<،>،"و/
همچنین هر بار که تغییری در فایل ایجاد میکنید، ابتدا آن را ذخیره (Save) کنید و سپس صفحه مرورگر را Refresh نمایید تا تغییرات نمایش داده شوند.
قابلیتهای هوشمند Visual Studio Code
بسیاری از ویرایشگرهای کد، از جمله Visual Studio Code، امکاناتی برای سادهتر کردن نوشتن HTML ارائه میدهند. برخی از این قابلیتها عبارتاند از:
- پیشنهاد هوشمند کد (IntelliSense)
- تکمیل خودکار تگها (Auto Completion)
- بستن خودکار تگها
- پیشنهاد ویژگیها (Attributes)
این قابلیتها معمولاً سرعت برنامهنویسی را افزایش میدهند، اما اگر هنوز تازهکار هستید، ممکن است گاهی باعث تولید کدهای اضافی شوند که درک آنها برایتان دشوار باشد.
در صورت تمایل میتوانید این امکانات را از بخش Settings در Visual Studio Code غیرفعال کنید.
مرحله بعد
اکنون پروژه HTML شما آماده است و میتوانید نوشتن اولین کدهای HTML را آغاز کنید.
در آموزش بعدی یاد خواهید گرفت چگونه کد منبع (Source Code) صفحات HTML را مشاهده کنید و با ساختار اولیه یک سند HTML بیشتر آشنا شوید.
جمعبندی
در این آموزش یاد گرفتید چگونه یک پروژه HTML در Visual Studio Code ایجاد کنید، فایل index.html را بسازید و با نکات مهم مربوط به اشکالیابی و قابلیتهای هوشمند ویرایشگر آشنا شوید.
با آماده شدن محیط توسعه، اکنون میتوانید آموزش HTML را بهصورت عملی آغاز کرده و اولین صفحات وب خود را ایجاد کنید.
از همراهی شما با پارمین کلود سپاسگزاریم.
نظرات کاربران