کانال تلگرام

5 ویرایشگر آنلاین رایگان برای کار با html

تاریخ : ۷ بهمن ۱۳۹۷
گردآوری و تالیف : حمید رضا ملکی

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

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

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

چرا از ویرایشگر های آنلاین html استفاده کنیم؟

editor

بهترین چیزی که در مورد ویرایشگر های آنلاین html وجود دارد این است که آنها در مرورگر شما اجرا می شوند. مرورگر شما بهترین و موثرترین ابزار برای پردازش و رندر کردن کدهای html است و این بهترین دلیل برای استفاده از مرورگر برای این کار است. استفاده از مرورگر به این معناست که شما می توانید اجرای کدهای خود را در لحظه مشاهده کنید.

اما وقتی شما کدهای html خود را در نرم افزار های مانند Notepad و TextEdit می نویسید، ابتدا باید کدهای خود را ذخیره کرده، سپس فایل مورد نظر را در مرورگر بارگذاری کنید. بعد از این مرحله برای تغییرات باید به ویرایشگر برگردید و همین مراحل را دوباره تکرار کنید. به نظر من این کاری خسته کننده و تکراری است.

یک ویرایشگر آنلاین html به صورت پویا زمانی که کدها را داخل آن می نویسید، خود را  به روزرسانی می کند. لازم نیست بین پنجره ها جابه‌جا شوید و کار ویرایش را انجام دهید. شما کد های html را در یک سمت از مرورگر می نویسید و در قسمتی دیگر خروجی را در لحظه مشاهده می کنید. می توان ویرایشگرهای مستقل را طوری پیکربندی کرد که خروجی لحظه ای داشته باشند ولی این کار آسان نیست.

برای مثال در برخی از ویرایشگر ها قابلیتی وجود دارد که بعد از ذخیره فایل html صفحه مرورگر به صورت خودکار باز شده و خروجی را به شما نشان می‌دهد. اما برای این کار همچنان نیاز دارید به این پنجره ها جابه‌جا شوید.

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

Codepen

online-html-editor-codepen.

Codepen یک محیط توسعه اجتماعی برای توسعه دهندگان وب سایت است. از ویژگی‌های این ویرایشگر قابلیت اشتراک گذاری و همکاری است. خود ویرایشگر بسیار ساده است. برای هر کدام از زبان های html ،css و جاوا اسکریپت یک پنل جداگانه وجود دارد که میتوانید کد های خود را در آن قرار دهید.

پنل دیگری نیز در این ویرایشگر وجود دارد که خروجی را به شما نشان می‌دهد. اندازه پنل ها را با درگ و رها کردن میتوان تغییر داد. برای ایجاد یک پروژه شما باید یک "Pen" ایجاد کنید. چندین "Pen" می‌توانند با هم گروه بندی شده و در یک مجموعه قرار بگیرد. پروژه های خصوصی که نمی‌خواهید دیگران آنها را ببیند نیاز به حساب کاربری پیشرفته دارند که برای هر ماه ۹ دلار در نظر گرفته شده است. این ویرایشگر شامل تم های قابل تعویض و همکاری بلادرنگ است.

JSFiddle

online-html-editor-jsfiddle

ویرایشگر JSFiddle چیزی شبیه به سند باکس است که می توانید کدهای جاوا اسکریپت را در آن ویرایش و دستکاری کنید. در این ویرایشگر می‌توان نحوه کار با html و css و جاوا اسکریپت را با همدیگر مشاهده کرد. مزیت این ویرایشگر این است که می توان فایل های css و جاوا اسکریپ را به کدهای html خود اضافه کنید.

با استفاده از دکمه Collaborate می توانید با افراد دیگری همکاری کنید و به صورت همزمان بر روی یک پروژه کار کنید. برای به‌روزرسانی پنل نمایش باید بر روی دکمه Run کلیک کنید.

JSBin

online-html-editor-jsbin

JSBin جایگزینی ساده تر و بهتر نسبت به ویرایشگر JSFiddle است. می‌توانید هر ترکیبی از html ،css و جاوااسکریپت را ویرایش کنید. می‌توانید با بالاترین قابلیت انعطاف بین پنل نمایش و پنل کنسول جابه‌جا شوید. همانند JSFiddle ویرایشگر JSBin به شما اجازه می دهد به منابع خارجی css و جاوااسکریپت لینک بزنید.

Liveweave

Liveweave ویرایشگری شبیه به ویرایشگر های بالاست. رابط کاربری این ویرایشگر برای چشمها مناسب تر است. این ویرایشگر به شما اجازه می دهد همانند JSFiddle به صورت بلادرنگ با افراد دیگر بر روی پروژه همکاری داشته باشید.

HTMLhouse

htmlhous

اگر میخواهید فقط با کد های html کار کنید ویرایشگر HTMLhouse بهترین گزینه برای شماست. در سمت راست پنل پیش نمایش را خواهید داشت و در سمت چپ پنل ویرایش. از ویژگی‌های جالب این ویرایشگر انتشار و اشتراک گذاری کد های html به صورت عمومی و خصوصی است. 

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید