آموزش HTML - ویرایشگرها

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

ویرایشگرهای HTML چیستند؟

ویرایشگرهای HTML ابزارها/نرم‌افزارهایی برای ایجاد، ویرایش، مدیریت و اجرای (در برخی موارد) اسناد HTML هستند. ویرایشگرهای HTML ویژگی‌های متعددی مانند تورفتگی خودکار، برجسته‌سازی نحو (Syntax Highlighting)، تکمیل خودکار و غیره را ارائه می‌دهند.

شما می‌توانید از هر یک از ویرایشگرهای HTML ذکر شده در زیر برای نوشتن و مدیریت کدهای HTML خود استفاده کنید. باید فایل را با پسوند .htm یا .html ذخیره کنید.

انواع ویرایشگرهای HTML

انواع مختلف ویرایشگرهای HTML به شرح زیر است:

• ویرایشگرهای متنی (Text Editors):
  ویرایشگرهای متنی ویرایشگرهای پایه HTML هستند که در آن‌ها باید کد را به صورت دستی بنویسید. این نوع ویرایشگرها تمام ویژگی‌های لازم برای نوشتن و مدیریت کدهای HTML را ارائه نمی‌دهند. برخی از ویرایشگرهای متنی ممکن است شامل ویژگی‌هایی مانند برجسته‌سازی نحو و ابزارهای پایه ویرایش کد باشند.
  مثال: Notepad، Notepad++ و غیره.
• ویرایشگرهای دیداری (WYSIWYG Editors):
  ویرایشگرهای WYSIWYG به شما امکان می‌دهند صفحات وب را به صورت بصری ایجاد کنید، جایی که نیازی به نوشتن کامل کد به صورت دستی ندارید. این نوع ویرایشگرهای HTML امکان طراحی صفحات را بدون نیاز به کدنویسی فراهم می‌کنند.
  مثال‌ها: Adobe Dreamweaver، BlueGriffon و غیره.
• ویرایشگرهای آنلاین HTML:
  ویرایشگرهای آنلاین HTML ابزارهای مبتنی بر وب هستند که در آن‌ها می‌توانید کدهای HTML خود را مستقیماً در مرورگر خود بنویسید، مدیریت کنید و اجرا نمایید. این ویرایشگرها اغلب پیش‌نمایش زنده از اسناد HTML ارائه می‌دهند. ما یک ویرایشگر آنلاین HTML ارائه می‌دهیم که از برجسته‌سازی نحو، تراز‌بندی، مرتب‌سازی کد (Beautification) و بسیاری ویژگی‌های دیگر پشتیبانی می‌کند. می‌توانید از ویرایشگر آنلاین HTML ما برای نوشتن، ویرایش و مدیریت کد HTML خود استفاده کنید.
• محیط‌های یکپارچه توسعه (IDEs):
  محیط‌های IDE یک محیط توسعه یکپارچه را فراهم می‌کنند که در آن می‌توانید پروژه‌های کامل یا بزرگ‌تر را بنویسید، مدیریت کنید و اشکال‌زدایی نمایید. برخی از IDEها عبارتند از JetBrains، WebStorm، Eclipse و غیره.

ویرایشگرهای محبوب HTML در سال ۲۰۲۵

ویرایشگرهای HTML متعددی در دسترس کاربر قرار دارد (هم رایگان و هم غیررایگان). در ادامه فهرستی از برخی از ویرایشگرهای محبوب آمده است:

1. Notepad
2. TextEdit
3. Notepad++
4. Sublime
5. Visual Studio Code
6. Atom
7. Brackets
8. Adobe Dreamweaver CC
9. CoffeeCup

۱. Notepad

برنامه Notepad یک ویرایشگر متنی پایه و رایگان است که به صورت پیش‌فرض در سیستم‌های ویندوز نصب شده است. از Notepad می‌توان به عنوان یک ویرایشگر HTML استفاده کرد.

مراحل ایجاد و اجرای کد HTML در Notepad

مراحل زیر برای ایجاد و اجرای یک سند HTML در Notepad آمده است:

• برنامه Notepad را باز کنید.
• کد HTML خود را بنویسید.
• فایل را با پسوند ".htm" یا ".html" ذخیره کرده و کدگذاری (Encoding) آن را روی UTF-8 قرار دهید.
• اکنون می‌توانید این سند HTML را در هر مرورگر وبی باز کنید.

۲. TextEdit

برنامه TextEdit یک ویرایشگر متنی پیش‌فرض و یک پردازشگر متن متن‌باز است که همراه با macOS ارائه می‌شود. می‌توانید از TextEdit به عنوان یک ویرایشگر HTML برای ایجاد، ویرایش و مدیریت کد HTML خود استفاده کنید. همچنین می‌توانید از آن برای نمایش اسناد HTML به همان شکلی که در مرورگر یا در حالت ویرایش کد می‌بینید، استفاده کنید.

تنها محدودیت TextEdit این است که وقتی از آن برای مرور صفحات وب استفاده می‌کنید، تصاویر را نشان نمی‌دهد.

مراحل ایجاد و اجرای کد HTML در TextEdit

مراحل زیر برای ایجاد و اجرای یک سند HTML در TextEdit آمده است:

• TextEdit را باز کنید
• یک فایل جدید ایجاد کنید
• به مسیر "Format" و سپس Make Plain Text بروید
• کد HTML خود را بنویسید
• فایل را با پسوند ".htm" یا ".html" ذخیره کنید

۳. Notepad++

برنامه Notepad++ یک ویرایشگر سورس‌کد رایگان است. این برنامه به زبان ++C نوشته شده و از ویژگی‌هایی مانند برجسته‌سازی نحو، تکمیل خودکار محدود برای برنامه‌نویسی، اسکریپت‌نویسی و غیره پشتیبانی می‌کند. برنامه Notepad++ یکی از بهترین ویرایشگرهای کد HTML است که می‌توانید در آن اسناد HTML را ایجاد و مدیریت کنید.

برنامه Notepad++ به صورت پیش‌فرض نصب نیست و باید آن را به صورت دستی برای دستگاه‌های مختلف از وب‌سایت رسمی آن دانلود کنید: notepad-plus-plus.org

مراحل ایجاد و اجرای کد HTML در Notepad++

برای ایجاد یک سند HTML در Notepad++:

• Notepad++ را باز کنید
• یک فایل جدید باز کنید، کد HTML خود را بنویسید و فایل را با پسوند ".html" یا ".htm" ذخیره کنید
• روی فایل کلیک کرده و مرورگری را که می‌خواهید نتایج را در آن مشاهده کنید، انتخاب نمایید.

۴. ویرایشگر Sublime

ویرایشگر Sublime یک ویرایشگر سورس‌کد چندسکویی (Cross-platform) است. از این برنامه برای نوشتن کدها، زبان‌های نشانه گذاری و متون ساده استفاده می‌شود. این ویرایشگر به زبان‌های ++C و Python نوشته شده است.

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

ویرایشگر Sublime را می‌توان از این لینک دانلود کرد: Sublime Text

۵. Visual Studio Code

برنامه Visual Studio Code (یا VS Code) نیز یک ویرایشگر سورس‌کد است که توسط مایکروسافت توسعه یافته است. این برنامه از ویندوز، لینوکس و macOS پشتیبانی می‌کند. VS Code به دلیل ویژگی‌های فوق‌العاده‌اش مانند پشتیبانی از اشکال‌زدایی (Debugging)، برجسته‌سازی نحو، بازسازی کد (Code Refactoring)، تکمیل هوشمند کد و غیره، به طور گسترده برای ایجاد و مدیریت اسناد HTML استفاده می‌شود.

برنامه VS Code یک نرم‌افزار پیش‌نصب‌شده نیست؛ باید آن را از code.visualstudio.com/download دانلود کنید.

۶. ویرایشگر Atom

برنامه Atom یک ویرایشگر متن و سورس‌کد متن‌باز برای macOS است. Atom را می‌توان پس از دانلود و نصب، در سیستم‌های ویندوز نیز استفاده کرد. Atom همچنین یک ویرایشگر رایگان است و می‌توان از آن به عنوان ویرایشگر HTML برای ایجاد و مدیریت اسناد HTML استفاده کرد. این برنامه ویژگی‌های مختلفی مانند برجسته‌سازی نحو، تکمیل کد، جستجو و جایگزینی، تشخیص خودکار تورفتگی و پوسته (Theme)های مختلف را ارائه می‌دهد.

مراحل نوشتن و اجرای HTML در ویرایشگر Atom عبارتند از:

مراحل ایجاد و اجرای کد HTML در Atom

• یک فایل ایجاد/باز کنید.
• کد HTML را بنویسید یا جای‌گذاری کنید.
• فایل را با پسوند ".htm" یا ".html" ذخیره کنید.
• و کلیدهای "CTRL + Shift + B" (در ویندوز) را فشار دهید تا اجرا شود و پیش‌نمایش را ببینید.

۷. ویرایشگر Brackets

ویرایشگر Brackets یک ویرایشگر سورس‌کد است که می‌توان از آن برای ایجاد و مدیریت اسناد HTML استفاده کرد. Brackets توسط Adobe ساخته شده و برای توسعه وب بسیار مفید است. ویژگی‌های Brackets شامل ذخیره خودکار، مرتب‌سازی کد (Beautification)، پیش‌نمایش زنده و موارد دیگر است.

مراحل ایجاد و اجرای کد HTML در Brackets

مراحل ایجاد سند HTML در ویرایشگر Brackets عبارتند از:

• ویرایشگر Bracket را دانلود و نصب کنید
• یک فایل جدید ایجاد کنید.
• کد HTML را بنویسید و فایل‌ها را با پسوند ".htm" یا ".html" ذخیره کنید.

۸. Adobe Dreamweaver CC

برنامه Adobe Dreamweaver CC یک برنامه IDE حرفه‌ای (پولی) برای توسعه وب و ویرایش سورس‌کد، مانند ویرایشگرهای HTML است. این برنامه مجموعه ابزارهایی را برای طراحی و ایجاد وب‌سایت ارائه می‌دهد که رابط طراحی بصری را با ویرایشگر کد ترکیب می‌کند.

این برنامه از زبان‌های برنامه‌نویسی متعددی مانند پایتون و HTML پشتیبانی می‌کند و کدنویسی کارآمد را هم برای کاربران مبتدی و هم پیشرفته امکان‌پذیر می‌سازد، و همچنین پشتیبانی از Git را فراهم می‌کند. این برنامه بر اساس مدل اشتراکی است زیرا دسترسی به به‌روزرسانی‌های منظم و پشتیبانی مشتریان را تضمین می‌کند.

۹. CoffeeCup

برنامه CoffeeCup یک نرم‌افزار ویرایشگر تجاری (پولی) HTML است که به دلیل رابط کاربری آسان و ویژگی‌های قدرتمندش شناخته شده است. این برنامه مجموعه‌ای از ابزارها را برای توسعه وب از جمله ویرایش کد، مدیریت سایت و پشتیبانی از طراحی واکنش‌گرا (Responsive) ارائه می‌دهد.

با CoffeeCup، کاربران می‌توانند کدهای HTML، CSS و JavaScript را به طور کارآمد ایجاد و ویرایش کنند. این برنامه پیش‌نمایش زنده، اعتبارسنجی کد و یک کلاینت FTP داخلی را برای مدیریت یکپارچه وب‌سایت فراهم می‌کند.

ویرایشگرهای HTML چگونه می‌توانند به شما کمک کنند؟

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

• کاهش خطاها: ویرایشگرهای HTML برای شناسایی و تصحیح خطاهای نحوی در طول نوشتن کدهای HTML مفید هستند.
• برجسته‌سازی نحو (Syntax Highlighting): اکثر ویرایشگرهای HTML دارای ویژگی برجسته‌سازی نحو هستند که رنگ‌بندی کدها را برای تمایز تگ‌های HTML، ویژگی‌ها (Attributes) و محتوا امکان‌پذیر می‌سازد تا کد شفاف و خوانا شود.
• تکمیل خودکار کد: اکثر ویرایشگرهای HTML هنگام نوشتن کد، تگ‌ها یا ویژگی‌ها را به طور خودکار کامل می‌کنند. به عنوان مثال، اگر شروع به نوشتن یک پاراگراف کنید و <p> را تایپ کنید، ویرایشگرها به طور خودکار تگ بسته </p> را وارد می‌کنند. ویرایشگرها همچنین نحو عناصر را پیشنهاد می‌دهند.
• اعتبارسنجی کد (Code Validation): اکثر ویرایشگرهای HTML دارای ویژگی اعتبارسنجی کد هستند؛ شما برای اعتبارسنجی کد خود به ابزار دیگری نیاز ندارید. این ویژگی به اعتبارسنجی و شناسایی خطاها کمک می‌کند.
• ابزارهای همکاری گروهی: برخی از ویرایشگرهای HTML با سیستم‌های کنترل نسخه همراه هستند که همکاری تیم‌ها و پیگیری تغییرات را آسان‌تر می‌کند.

خلاصه فصل

• ویرایشگرهای HTML برای نوشتن، ویرایش و مدیریت کدهای HTML استفاده می‌شوند.
• انواع مختلفی از ویرایشگرهای HTML وجود دارد، مانند ویرایشگرهای متنی، ویرایشگرهای WYSIWYG، ویرایشگرهای آنلاین HTML و محیط‌های یکپارچه توسعه (IDEs).
• ویرایشگرهای محبوب و پرکاربرد HTML عبارتند از Notepad، TextEdit، Notepad++، Sublime، Visual Studio Code، Atom، Brackets، Adobe Dreamweaver CC و CoffeeCup.
• این ویرایشگرهای HTML ویژگی‌های متعددی مانند کاهش خطا، برجسته‌سازی نحو، تکمیل کد، اعتبارسنجی کد، ابزارهای همکاری و موارد دیگر را ارائه می‌دهند.