بعضی وقت ها می خواهیم کدهای HTML رو ویرایش کنیم اما به دلیل نداشتن ابزارهای مورد نیاز نمی توانیم این کار رو انجام دهیم یا اصلا روی سیستم شخص دیگری کار می کنیم یا می خواهیم روی گوشی موبایل این کار رو انجام دهیم اما چون نرم افزارهای مورد نیاز رو نداریم کار مقداری سخت میشه و دچار مشکل می شویم در اینجا باید از ویرایشگر آنلاین کدهای HTML استفاده کنیم. با استفاده از این ویرایشگرها یا بهتره بگویم ادیتورها، بدون نیاز به چیز خاصی می توانید کدهای HTML رو ویرایش کنیم. پس اگر شما هم به دنبال سایت های ویرایشگر آنلاین کدهای HTML هستید این مقاله به شما کمک می کند.
شاید از خودتون بپرسید ما که به صورت تکی از HTML استفاده نمی کنیم خب این ویرایشگر آنلاین کدهای HTML به چه درد من میخورد. باید این رو هم اضافه کنم در این ادیتور آنلاین HTML امکان نوشتن جاواسکریپت و CSS هم به صورت همزمان وجود دارد. که این موضوع خیلی خیلی جذاب و کاربردی هستش، پس همراه ما باشید تا این ۵ سایت یا بهتر بگویم ۵ ویرایشگر آنلاین کدهای HTML را مورد بررسی قرار دهیم.
بعضی از برنامه نویس ها رو میبینم وقتی می خواهند کدنویسی HTML انجام دهند باز هم از این ویرایشگر آنلاین کدها استفاده می کنند دلیلش هم اینه که شما کدهای نوشته شده را مستقیم روی مرورگر خود استفاده می کنید و می توانید نتیجه آن را ببینید. با اجرای کد HTML روی یک ادیتور آنلاین HTML شما به صورت لحظه ای تغییرات را می بینید ولی اگر در یک پلتفرم دیگر کد را بنویسید باید هر سری آن را ذخیره کنید و دوباره روی مرورگرتان اجرا کنید.
یک نکته مهم که باید به آن توجه ویژه شود اینست که شما می توانید در هر لحظه یا روی هر سیستم یا گجتی که به اینترنت دسترسی دارد از ادیتور آنلاین HTML استفاده کنید. ادیتور آنلاین HTML بخصوص برای کسانی که تازه کار هستند و می خواهند به کدهای HTML مسلط شوند بسیار مفید هستش و به نظرم از این ادیتورهای آنلاین استفاده کنید. چون سریعتر خروجی رو میبینید و نیاز نیست پشت سر هم ذخیره کنید و بعد خروجی رو مورد بررسی قرار دهید.
۵ ویرایشگر آنلاین کدهای HTML
خب تا این لحظه متوجه شدیم اگر از ویرایشگر آنلاین کدهای HTML استفاده کنیم چه خوبی دارد حال در بخش زیر ۵ ویرایشگر دوست داشتنی در این حوزه رو مورد بررسی قرار میدهیم تا بر اساس ویژگی هایی که برای هر کدام معرفی می کنیم یکی رو انتخاب کنیم.
- ویرایشگر آنلاین Codepen
- ویرایشگر آنلاین HTMLhouse
- ویرایشگر آنلاین Liveweave
- ویرایشگر آنلاین JSFiddle
- ویرایشگر آنلاین JSBin
۱- ویرایشگر آنلاین Codepen
اولین ویرایشگر آنلاین کدهای HTML که می خواهیم معرفی کنیم سایت Codepen می باشد سایتی که به نظرم فوق العاده خوب طراحی و پیاده سازی شده است. Codepen محیطی برای توسعه کدهایتان به ساده ترین شکل ممکن است. یکی از خوبی هایی که ویرایشگر Codepen دارد قابلیت به اشتراک گذاری و ذخیره کدهایتان می باشد که به نظرم خیلی کاربردی و به درد بخور هستش.
ویرایشگر Codepen فضای ساده و جذابی دارد و یک پلتفرم برای HTML، CSS و جاواسکریپت ارائه میدهد و سایز هر صفحه را می توانید خودتان تغییر دهید. یکی از خوبی هایی این ادیتور تعریف کردن قلم هستش تا بتوانید کدهایتان را بهبود ببخشید. البته برخی از این قلم ها رایگان نیستند و برای آنها باید هزینه پرداخت کنید که البته نیاز نیست و کارتون با همین قلم های رایگان جلو میرود.
نکته مهم: در ویرایشگر آنلاین Codepen شما می توانید با اشخاص دیگری در نوشتن کدهایتان به صورت همزمان همکاری کنید که به نظرم فوق العاده کاربردی و جذاب است.
برای ورود به سایت کافیه روی اسم Codepen کلیک کنید تا وارد محیط و سایت این ویرایشگر شوید.
۲- ویرایشگر آنلاین HTMLhouse
اگر شما فقط دنبال ویرایشگر آنلاین کدهای HTML هستید به نظرم باید از ویرایشگر HTMLhouse استفاده کنید این ادیتور برای کسانی که فقط به ادیت کدهای HTML نیاز دارند مناسب هستش اما اگر شما به دنبال ادیت کدهای CSS یا جاواسکریپت هستید این ویرایشگر اصلا به کار شما نمیاد و نیاز شما رو برطرف نمی کند. این ادیتور آنلاین HTML فضایی به شدت خلوت و جمع و جور دارد و به صورت عمودی تقسیم بنده شده و شما کد را در سمت چپ می نویسید و نتیجه را به صورت لحظه ای در سمت راست این ادیتور مشاهده می کنید.
یکی از ویژگی های بارز ادیتور HTMLhouse این است که شما می توانید کدهایتان را به صورت خصوصی منتشر کنید و یک URL برای آن دریافت کنید. شما می توانید کدهایتان را در معرض دید عموم هم قرار دهید که در این صورت کدها در قسمت HTMLhouse’s Browse page به نمایش در می آید. این ویژگی ساده اما کاربردی است و شما می توانید کدهایتان را به صورت واقعی و در یک URL تماشا کنید.
مثل بقیه ادیتورها، برای دسترسی به HTMLhouse کافیه روی اسم آن کلیک کنید تا وارد محیط ساده آن شوید.
۳- ویرایشگر آنلاین JSFiddle
اگر کد نویس جاوااسکریپت هستید به نظرم ویرایشگر آنلاین JSFiddle برای شما مناسب باشد. JSFiddle یک نوع سندباکس است که شما می توانید در آن با زبان جاواسکریپت کدنویسی کنید. اما چرا در مقاله ویرایشگر آنلاین کدهای HTML اسم آن را در لیست قرار دادیم چون این ادیتور، قابلیت اجرا کردن کدهای HTML و CSS رو دارد.
یکی از خوبی ها یا بهتر بگویم ویژگی های ادیتور JSFiddle اینست که می توانید کدهای جاواسکریپت یا CSS را از جایی دیگر در آن وارد کنید. که اگر مقدار حرفه ای تر شوید خیلی به دردتون می خورد. این ادیتور دو دکمه کاربردی دارد که یکی Tidy نام دارد که با زدن آن خطوط خالی کد شما، پاک می شود و دکمه دیگر Collaborate است که با زدن آن می توانید به صورت همزمان با شخص دیگری روی کد کار کنید. که این قابلیت در یک کلمه فوق العاده هستش و اگر دوستی دارید که می خواهید با هم روی یک کد کار کنید می توانید از این ادیتور استفاده کنید.
ویرایشگر آنلاین JSFiddle یک نقطه ضعف بد دارد که خودم اصلا پیشنهاد استفاده از آن را ندهم شما باید هر سری برای اجرا شدن آن دکمه Run را بزنید و کد شما به صورت پویا تغییرات را اعمال نمی کند. برای دسترسی به JSFiddle کافیه روی اسم آن کلیک کنید تا وارد صفحه ویرایشگر شوید.
۴- ویرایشگر آنلاین JSBin
به ادیتور JSBin رسیدیم JSBin مانند یک نسخه جمع و جورتر JSFiddle است. با استفاده از این ویرایشگر آنلاین می توانید کدهایی با فرمت جاواسکریپت، HTML و یا CSS را ویرایش کنید. برای استفاده از فرمت های مختلف کد، کافیه از گزینه های بالای صفحه فرمت کد مورد نظر رو انتخاب کنید. یکی از ویژگی های این ادیتور اینست که شما می توانید از دو صفحه نمایش و کنسول به صورت همزمان استفاده کنید تا تسلط بیشتری روی کد داشته باشید که با علاوه بر تسلط، کار شما رو سریعتر می کند.
JSFiddle به شما اجازه می دهد تا از منابع خارجی هم به کدهایتان ادیتور آنلاین HTML اضافه کنید اما در JSBin تنها کتابخانه هایی از پیش تعریف شده از جاواسکریپت وجود دارد و شما آن ها را می توانید اضافه کنید. اما این کتابخانه به اندازه کافی گستردگی دارد که کار شما را راه بندازند. از کتابخانه های jQuery تا React و Angular در این ادیتور آنلاین HTML وجود دارد.
برای دسترسی به ویرایشگر آنلاین JSBin کافیه روی اسم آن کلیک کنید تا وارد سایت مورد نظر شوید. محیط این ادیتور به نظرم خیلی ساده و جداب است و کار کردن با آن بسیار ساده است پیشنهاد میکنم نگاهی به آن بندازید.
۵- ویرایشگر آنلاین Liveweave
اگر از من بپرسن از بین ویرایشگرهای آنلاین کدهای HTML کدام یک رو از لحاظ ظاهر انتخاب می کنی بدون شک ادیتور Liveweave رو بر می گزینم. پیشنهاد میکنم حتما نگاهی به این ادیتور جذاب بندازید. ادیتور آنلاین Liveweave تقریبا مشابه ادیتور JSBin می باشد اما ظاهر و دیزاین بهتری دارد. همانند JSFiddle، این ادیتور هم به شما اجازه می دهد تا به صورت پویا کد خود را اجرا کنید. همچنان مانند ادیتور آنلاین JSFiddle در اینجا هم شما می توانید از منابع خارجی مانند jQuery به کدتان اضافه کنید. اما این ادیتور آنلاین تعدادی ویژگی منحصر به فرد هم دارد.
اگر بخواهیم در مورد ادیتور آنلاین Liveweave بیشتر صحبت کنیم باید بگم Lorem Ipsum Generator به شما امکانی می دهد تا کد را روی جایی که نشانگر قرار دارد نگه دارید. همچنین ویژگی CSS Explorer به شما امکان این را می دهد که یک ابزار WYSIWYG برای ساخت استایل های CSS داشته باشید. Color Explorer به شما امکان این را می دهد که تم مورد علاقه خود را با رنگ دلخواه داشته باشید. Vector Editor هم به شما امکان ساخت تصاویر گرافیکی وکتور برای سایتتان را می دهد.
برای دسترسی به این ویرایشگر دوست داشتنی کافیه روی اسم Liveweave کلیک کنید تا وارد محیط آن شوید. به نظرم ux و ui این ادیتور بسیار زیبا درست شده است و خیلی راحت می توانید با آن ارتباط برقرار کنید. ادیتور Liveweave هم قابلیت روز دارد هم شب، و اگر دکمه Live Mode رو بزنید به صورت آنلاین کدها رو تبدیل می کند اما اگر Live Mode رو روی off قرار دهید باید دکمه Run رو بزنید تا کدها اجرا شوند.
صحبت پایانی
در این مقاله ۵ ویرایشگر آنلاین کدهای HTML رو معرفی کردیم که بیشتر مورد استفاده عموم قرار می گیرند و همانطور که خودتون میدونید ویرایشگرهای زیادی برای این کار وجود دارد اما این ۵ گزینه به نظرم از بقیه بهتر هستند و نیاز شما رو به صورت کامل برطرف می کنند. اگر از من بپرسید که بین این ۵ تا کدوم رو انتخاب کنیم باید بگم هر ۵ گزینه، امکانات خوبی رو به ما ارائه میدهد که نیاز ما رو برطرف می کند اما اگر نظر شخصی من رو بخواهید من ویرایشگر آنلاین Liveweave رو بیشتر دوست دارم چون خیلی با این ویرایشگر راحت هستم و به نظرم امکانات قابل قبولی رو در اختیار ما قرار میدهد. ولی اگر شما می خواهید انتخاب کنید پیشنهاد می کنم به هر ۵ سایت مراجعه کنید و باهاشون کار کنید و ببینید با کدام یک بیشتر راحت هستید و بعد انتخاب کنید.
اگر شما از ویرایشگرهای آنلاین کدهای HTML استفاده کردید حتما تجربیاتتون رو با ما در میون بذارید.
