این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.

ادیتور آنلاین زبان HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. در ادامه میخوایم با ادیتور آنلاین زبان HTML – فری لرن آشنا شویم، لطفا با من همراه باشید.

ادیتور آنلاین زبان HTML

Free-Learn

ادیتور آنلاین زبان HTML

ادیتور به نرم افزار یا محیطی که بتوان در آن کدنویسی کرد گفته میشود، بطور کلی میتونیم بگیم زبان های برنامه نویسی همچون ( PHP , JavaScript یا سی شارپ و دیگر زبان های برنامه نویسی ) همگی باید درون همچین نرم افزارهایی کدنویسی شوند.

خب یک ادیتور میتونه خیلی خیلی ساده باشه مثه نرم افزار NotePad موجود در سیستم عامل های ویندوز و یا نرم افزار TextEdit موجود در سیستم عامل های مک ( Mac ) و هم میتونه خیلی پیشرفته و با امکانات زیادی باشه.

امروزه نرم افزار یا ادیتورهای زیادی برای نوشتن کدهای زبان های مثه HTML , CSS و … وجود دارد که هر کدام نیز برای خودشان امکانات و شرایط خاصی دارند.

ولی خب در مجموع بخوایم حساب کنیم، بنظره شخصی خودم ادیتور زیاد مهم نیست ، مهم خوده شما و میزان دانش شما نسبت به دستورات برنامه نویسی یک زبان می باشد.

درسته که یک نرم افزار حرفه ای میتونه خیلی تو سرعت کدنویسی کمکمون کنه ولی وابستگی زیاد به این نرم افزارها یعنی ضعیف شدن شما در یادگیری دستورات اون زبان برنامه نویسی از ریشه، به گونه ای که وقتی اون نرم افزار رو از شما بگیرن شما دیگه انگار هیچی بلد نیستید.

Free-Learn

ادیتور آنلاین زبان های HTML , CSS , JavaScript

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

ادیتور در یک نگاه

در ابتدا یک تصویر از ادیتور را مشاهده نمایید ( برای بزرگنمایی لطفا بروی تصویر کلیک کنید )

برای مشاهده در اندازه اصلی لطفا کلیک کنید

Free-Learn

حالت های نمایش

ادیتور دارای ۳ حالت نمایش می باشد، که میتوانید به راحتی هر یک از این حالت ها را انتخاب و سپس شروع به کدنویسی کنید.

Free-Learn

با سرعت بالا کدنویسی کنید

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

حتی مقادیر برخی از دستورات نیز بصورت ذخیره شده وجود دارد، مثلا در تگ iframe بصورت خودکار مقدار صفت src آدرس سایت فری لرن می باشد که کافیه با یک کلیک اضافش کنید.

Free-Learn

ذخیره سازی کدها در مرورگر

ادیتور از فناوری ذخیره سازی تحت وب یا local storage یا web storage استفاده میکند ، این یعنی ذخیره سازی دادها بروی مرورگر شما.

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

ولی یادتون باشه اگه کدهای یکی از بخش ها (html,css,js) بطور کامل پاک شود و بعد صفحه رو رفرش کنید صفحه پیش فرض ادیتور به شما نمایش داده خواهد شد، در نتیجه در این حالت کدی از شما ذخیره نخواهد شد.

Free-Learn

کامل کننده کد – ادیتور آنلاین زبان HTML

کافیه یک کلمه از یک دستور را بنویسید، سپس دکمه های Ctrl+E را فشار دهید، بصورت خودکار کلمه مورد نظر تاجایی که امکانش باشد تشخیص و ایجاد میشود.

Free-Learn

اجرای خودکار کدها

بصورت پیش فرض ادیتور در حالت اجرای خودکار قرار دارد، این یعنی کدهای شما درجا و بلافاصله با تایپ شدن در خروجی هم نمایش داده میشوند.

با کلیک بروی منوی اجرای خودکار میتوانید آن را غیرفعال نمایید، سپس باید بروی دکمه ( اجرای کدها ) کلیک نمایید تا کدهای شما اجرا شوند.

همچنین میتوانید از کلیدهای ترکیبی Ctrl+R برای اجرای کدها استفاده نمایید. ( این کلید میانبر فقط در حالتی عمل میکند که اجرای خودکار غیرفعال باشد )

Free-Learn

دانلود کدها

به راحتی با کلیک بروی دکمه دنلود کدها میتوانید تمامی کدهای هر ۳ بخش html,css,js را در قالب یک فایل فشرده zip دانلود نمایید. همچنین میتوانید از کلیدهای ترکیبی Ctrl+D برای دانلود کردن کدها استفاده نمایید.

Free-Learn

مرتب سازی کدها

در حین کدنویسی نگران مرتب بودن کدها نباشید، شما در هرحالتی کدهاتون رو بنویسید و در آخر کار بروی دکمه مرتب سازی کدها کلیک نمایید و کدهای مرتب و تمیز شده تحویل بگیرید.

Free-Learn

کتابخانه های محبوب css و js

از منوی ابزار ، میتوانید کتابخانه های محبوب css و js را مشاهده و در صورت تمایل تنها با یک کلیک آنها را به صفحه اضافه نمایید.

Free-Learn

تگ های پراستفاده از پیش تعریف شده

تعدادی از تگ های پراستفاده HTML را براتون آماده کردم که با یک کلیک میتونید اون تگ رو به صفحه اضافه کنید، فقط قبل از اینکه بروی تگ مورد نظرتون کلیک کنید در قسمت body و اونجایی که میخواید تا اضافه شه کلیک کرده باشید.

Free-Learn

مشاهده ادیتور آنلاین زبان HTML سایت فری لرن

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

برای مشاهده ادیتور آنلاین زبان HTML و CSS و JS لطفا اینجا کلیک نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب