ویرایشگر HTML

ویرایشگر HTML مقاله‎‌ای است که در آن بررسی می‌کنیم که آیا برای نوشتن کد HTML به ادیتور یا ویرایشگر خاصی نیاز داریم یا خیر؟ در پاسخ باید بگوییم که خیر، برای نوشتن کد HTML به ویرایشگر خاصی نیاز ندارید! HTML یک زبان نشانه گذاری است که می‌توانید کدهای آن را با هر ویرایشگر متنی، حتی با یک ویرایشگر ساده متنی (مثل Notepad در ویندوز یا TextEdit در مک) ایجاد کنید.

بهترین ویرایشگر HTML

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

به همین منظور برخی ویرایشگرها و IDEها (محیط توسعه یکپارچه) ممکن است به شما کمک کنند تا بهترین عملکرد و تجربه توسعه را داشته باشید.

ویرایشگرهایی مثل Visual Studio Code، Sublime Text، Atom و… از جمله ویرایشگرهای محبوب برای توسعه وب هستند که قابلیت‌های مفیدی برای نوشتن کد HTML و دیگر زبان‌های وب دارند؛ در ادامه برخی از این ادیتورهای محبوب را به همراه ویژگی خاصشان معرفی می‌کنیم:

1. PhpStorm:
   یک محیط توسعه یکپارچه (IDE) برای زبان PHP است اما امکانات خوبی برای توسعه وب به زبان‌های دیگر ارائه می‌دهد، از جمله HTML ،CSS و JavaScript.
2. Eclipse:
   یک IDE معروف که به طور خاص برای زبان‌هایی مثل جاوا استفاده می‌شود اما با افزونه‌هایی که دارد قابلیت پشتیبانی از زبان‌های دیگر را نیز دارد.
3. Visual Studio Code (ویژوال استودیو کد):
   یک ویرایشگر متنی رایگان و قدرتمند از مایکروسافت که افزونه‌های زیادی برای توسعه در زبان‌های مختلف را فراهم می‌کند.
4. Atom:
   یک ویرایشگر متنی متن باز و سبک از GitHub با امکانات سفارشی سازی زیاد و افزونه‌های فراوان.
5. Notepad++:
   یک ویرایشگر متنی قدرتمند برای ویندوز با امکانات متنوع که یک ادیتور متنی ساده است.
6. Brackets:
   یک ویرایشگر متنی با تمرکز بر توسعه وب و گرافیک، که توسط Adobe ایجاد شده است.
7. NetBeans:
   یک IDE متن باز که از زبان‌های مختلف از جمله جاوا، PHP و C++ پشتیبانی می‌کند.
8. Sublime Text:
   یک ویرایشگر متنی سریع و سبک با امکانات متنوع و افزونه‌های فراوان.

به یاد داشته باشید که انتخاب ویرایشگر یا IDE بستگی به سلیقه شما، نیازهای پروژه و راحتی شما در استفاده از ابزارهای خاص دارد.

در ادامه مقاله، آموزش استفاده از ویرایشگر Notepad (برای ویندوز) و ویرایشگر TextEdit (برای مک) که ساده‌ترین نوع ادیتور متنی هستند را آورده‌ایم.

نحوه استفاده از ویرایشگر Notepad در ویندوز

برای ایجاد یک فایل با Notepad در ویندوز، مراحل زیر را دنبال کنید:

1. ساخت یک فایل:
   روی صفحه دسکتاپ کلیک راست کنید، موس را روی گزینه New ببرید و روی New Text Document کلیک کنید.
2. نام دهی به فایل:
   می‌بینید که یک فایل با پسوند .text ایجاد می‌شود، یک نام دلخواه برای فایل انتخاب کرده و پسوند فایل را از .text به .html تغییر دهید.
   • نکته 1: اگر پسوند فایل را نمی‌بینید باید با توجه به نسخه ویندوزتان گزینه file name extensions را فعال کنید (آموزش این کار را در گوگل سرچ کنید).
   • نکته 2: بعد از تغییر پسوند، یک اعلان برای شما ایجاد می‌شود که باید روی Yes کلیک کنید.
3. نوشتن کد:
   حالا روی فایل ایجاد شده کلیک راست کنید، موس را روی Open With ببرید و Notepad را انتخاب کنید و کدهای خود را بنویسید.
4. ذخیره کردن فایل:
   با فشردن کلیدهای Ctrl + S یا انتخاب گزینه Save از منو File (که در نوار بالای Notepad قرار دارد) فایل خود را ذخیره کنید.

از این پس، شما می‌توانید این فایل را با Notepad باز کرده (روی آن کلیک راست کنید، موس را روی Open With ببرید و Notepad را انتخاب کنید) و کدهای خود را ویرایش نمایید.

نحوه استفاده از ویرایشگر TextEditدر مک

برای باز کردن ویرایشگر TextEdit در مک مراحل زیر را دنبال کنید:

1. باز کردن یک فایل:
   از قسمت Dock یا Spotlight (برای دسترسی سریع کلیدهای Cmd + Space را فشار دهید و سپس تایپ کنید “TextEdit”)، TextEdit را باز کنید.
2. تنظیم TextEdit به حالت “Plain Text”:
   از منوی “Format” در بالای صفحه، گزینه “Make Plain Text” را انتخاب کنید؛ این کار TextEdit را روی حالت متن ساده (plain text) تنظیم می‌کند.
3. نوشتن کد:
   حالا می‌توانید کد HTML خود را بنویسید.
4. ذخیره کردن فایل:
   از منوی “File” در بالا، گزینه “Save” را انتخاب کنید، سپس یک نام برای فایل خود انتخاب کنید.
5. انتخاب فرمت “HTML”:
   در پنجره ذخیره، در قسمت “Format”، گزینه “HTML” را برای فرمت فایل خود انتخاب کنید؛ با کلیک بر روی “Save”، فایل HTML شما ذخیره می‌شود.

حالا می‌توانید این فایل را باز کنید و آن را در مرورگر وب مورد نظر خود باز کنید تا نتیجه را ببینید.

مشاهده فایل HTML در مرورگر

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

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.