معرفی سرویس های آنلاین ویرایش کد HTML

 

 

 

 

HTML (اچ تی ام ال) مخفف عبارت Hyper Text Markup Language بوده و در زبان فارسی به معنای زبان نشانه گذاری فوق متن می باشد. HTML یک زبان برنامه نویسی استاندارد برای استفاده در طراحی وب سایت می باشد. در واقع خروجی نهایی کار که در مرورگرها نمایش داده می شود همگی به زبان HTML بوده و از این جهت از ارزش بالایی برخوردار می باشد.

 

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

 

در این مقاله می خواهیم به بررسی وب سایت های ویرایش کد HTML بپردازیم. با سرزمین دانلود همراه باشید.

 

 

سرویس CodePen

 

CodePen را می توان یکی از برترین ابزارهای ویرایشگر آنلاین کدهای HTML و CSS نام گذاری نمود. با استفاده از این سرویس می توانید کدهای HTML خود را با زبان های دیگیری همچون JavaScript ترکیب کرده و خروجی مورد نظر را به صورت آنلاین مشاهده نمایید. 

 

در صورت نیاز، برخی از ابزارهای رایگان دیگری نیز درون سایت قرار داده شده است. برای مثال، امکان استفاده از منوهای آماده، خط کشی، تغییرات ویژه متن مانند بولد کردن و تغییر فونت و بسیاری از امکانات دیگر در درون سایت قرار داده شده است که می توانید به صورت رایگان از آنها استفاده نمایید.

 

سرویس CodePen در دو حالت Free و Pro قابل استفاده می باشد که می توانید با پرداخت هزینه 8 دلار در ماه از امکانات پولی این سرویس نیز استفاده نمایید. به منظور دسترسی به وبسایت CodePen می توانید از طریق این لینک اقدام نمایید.

 

 

 

سرویس JSFiddle

 

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

 

در این وب سایت قابلیت های متنوعی به منظور راحتی کار با زبان HTML قرار داده شده است. همچنین امکان ذخیره فایل نهایی در فرمت های مختلف نیز ممکن می باشد که می توانید به صورت رایگان از آنها استفاده نمایید. 

 

استفاده از سرویس های JSFiddle کاملا رایگان بوده و نیاز به پرداخت هیچ هزینه اضافی نخواهید داشت. برای استفاده از این وب سایت می توانید از طریق این لینک اقدام نمایید.

 

 

 

 

سرویس JSBin

 

JSBin نیز یکی دیگر از سرویس های آنلاین ویرایش کدهای HTML می باشد. مانند دو سرویس قبلی، در JSBin نیز می توانید کدهای HTML خود را با زبان جاوا اسکریپت و CSS ترکیب کرده و خروجی را به صورت آنلاین مشاهده نمایید. 

 

از امکانات رایگان این وب سایت می توان به قابلیت استفاده از دکمه های پیش فرض و همچنین منوهای آماده اشاره نمود. در واقع در صورت نیاز می توانید بدون کدنویسی از کدهای آماده سایت در فایل HTML خود استفاده نمایید.

 

سرویس JSBin در دو حالت Free و Pro قابل استفاده می باشد که از ویژگی های سرویس Pro می توان به قابلیت ذخیره در فضاهای ابری، embeds های کاستوم و ... اشاره نمود. به منظور دسترسی به embeds می توانید از طریق این لینک اقدام نمایید.

 

 

 

سرویس Liveweave

 

یکی از سرویس های نوپا در زمینه ویرایش آنلاین فایل های HTML، وب سایت Liveweave می باشد. امکانات و قابلیت های این سرویس بسیار بیشتر از سایر وب سایت های معرفی شده می باشد. در Liveweave می توانید کدهای HTML خود را با زبان های برنامه نویسی دیگری مانند جاوا و PHP ترکیب کرده و خروجی نهایی را به صورت آنلاین مشاهده نمایید.

 

در منوی سمت چپ وب سایت، گزینه هایی به منظور ایجاد تغییرات در بخش رنگ و CSS قرار داده شده است. در واقع شما می توانید بدون یک خط کدنویسی، فایل HTML مورد نظر خود را به شکل دلخواه تغییر دهید.

 

استفاده از امکانات سرویس Liveweave تا این لحظه رایگان بوده و تنها با ساخت یک حساب کاربری می توانید به تمامی ویژگی های آن دسترسی پیدا نمایید. به منظور استفاده از وب سایت Liveweave می توانید از طریق این لینک اقدام نمایید.

 

 

 

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

 

 

آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب

 

 

 

 

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

 

در این میان ممکن است برخی از مدیران و طراحان وب سایت بخواهند از افکت های تصویری برای زیباسازی عکس های درون وب سایت استفاده نمایند. به منظور ادیت عکس در محیط طراحی وب می توانید از ابزارهای مانند فتوشاپ و ... استفاده کنید.

 

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

 

 

معرفی کتابخانه CSSGram

 

CSSGram یک کتابخانه کوچک و بر پایه CSS و SCSS می باشد. با استفاده از این کتابخانه می توانید بدون نیاز به فتوشاپ افکت های تصویری اینستاگرام را از طریق کدهای HTML و CSS بر روی تصاویر وب سایت اعمال کنید. 

 

برای دانلود CSSGram می توانید از تاپیک موجود در سایت GitHub استفاده نمایید.

 

 

روش استفاده از CSSGram

 

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

 

به منظور استفاده از این کتابخانه در ابتدا باید کدهای CSSGram را در صفحه اسناد HTML خود قرار دهید. روش کار این کتابخانه به این صورت است که با استفاده از CSS میزان روشنایی و سایر ویژگی های تصویر را به شکل افکت اینستاگرام تغییر خواهد داد. در ادامه کد یک عکس که با استفاده از این کتابخانه افکت گذاری شده است را می توانید مشاهده کنید:

 

 

 

پس از اضافه کردن افکت 1977 که یکی از افکت های اینستاگرام می باشد. CSS به شکل زیر در خواهد آمد.

 

 

 

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

 

 

آموزش ساخت و ویرایش فایل های اچ تی ام ال، با کمک CofeeCup HTML Edtior

 

 

 

 

CoffeeCup HTML Editor نام نرم افزار طراحی وب پیشرفته و مدرنی است که با استفاده از آن میتوانید صفحات وب عالی و بی نظیری طراحی کنید. این نرم افزار دارای ابزار فراوان و بسیار کارآمدی میباشد که کار طراحی و ساخت صفحات وب HTML را بسیار آسان کرده و کیفیت کار را بهبود میبخشد. صفحات وبی که با استفاده از CoffeeCup HTML Editor طراحی میشوند کاملا "ریسپانسیو" (Responsive) بوده و در صفحات با اندازه های مختلف به خوبی نمایش داده میشوند. در این مقاله میخواهیم شما را با نحوه کار با این نرم افزار آشنا کنیم. با ما همراه باشید.

 

 

کار با نرم افزار CoffeeCup HTML Editor

 

ابتدا آخرین نسخه از نرم افزار CoffeeCup HTML Editor را با استفاده از لینک درج شده در انتهای این مطلب دانلود کرده و سپس آن را در سیستم تان نصب و اجرا کنید. هم اکنون شروع میکنیم به آشنایی با نرم افزار.

 

 

آشنایی با محیط نرم افزار

 

در اولین بخش از مقاله میخواهیم با محیط کلی نرم افزار آشنا شویم:

 

 

 

1. محیط ویرایشگر کد.

 

2. بخش نمایش پیشنمایش نتیجه کار.

 

3. نمایش وبسایت های شما.

 

4. فایل اکسپلورر برای دسترسی به فایل های کامپیوتر.

 

5.  افزودن فایل HTML آماده.

 

6.  بخش نمایش کد ها و کاراکتر ها.

 

 

کار با پروژه های وبسایت ها

 

در این بخش از مقاله میخواهیم شما را با نحوه ساخت و مدیریت پروژه های وبسایت ها آشنا کنیم.

 

 

- ساخت یک پروژه وبسایت

 

به منظور ساخت یک پروژه وبسایت جدید در نرم افزار HTML Editor به مسیر “My Websites > New Website Project” بروید تا پنجره ی “Website Project Settings” باز شود.

 

 

 

در کادر های موجود در پنجره ی Website Project Settings باید محتوای زیر را وارد نمایید:

 

1. Website Project Name: باید نام پروژه وبسایت تان را در این کادر وارد نمایید. پیشنهاد میدهیم که یک نام ساده برای پروژه بگذارید و نام سایت را برای آن قرار دهید.

 

2. Website  Project Location: در این کادر مکانی که فایل های مربوط به پروژه در آن قرار خواهند گرفتن را تعیین میکنید.

 

 

 

نکته: اگر میخواهید بر روی فایل هایی از پروژه ای قبلی کار کنید، باید پوشه حاوی فایل های پروژه قبلی را در کادر “Website Project Location” وارد نمایید.

 

3. Server: در این بخش میتوانید اطلاعات مربوط به سروری (Server) که میخواهید سایت را در آن پیاده کنید را وارد نمایید.

 

4. Configure Servers: با کلیک بر روی این دکمه پنجره ی “Server Configuration” باز خواهد شد که میتوانید در آن اطلاعات مربوط به سرور را وارد نمایید.

 

 

 

5. Remote Root Folder: پوشه ای که فایل های مربوط به سایت شما در سرور در آن قرار میگیرد و معمولا نام آن “WWW” و یا “Public_HTML” است.

 

6. Server URL: آدرسی که با وارد کردن آن در مرورگر میتوانید شاهد وبسایت خود باشید را باید در این کادر وارد نمایید.

 

7. File Upload: در این تب میتوانید تنظیمات مربوط به آپلود فایل در سایت را تغییر دهید.

 

 

 

افزودن صفحات جدید به پروژه وبسایت شما

 

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

 

به منظور ساخت صفحه ی جدید در سایت ابتدا دکمه ی “File” را کلیک کنید و سپس از داخل منویی که باز میشود گزینه ی “New Blank Page” را انتخاب کنید تا صفحه ای جدید ساخته شود.

 

نکته: اگر صفحه ای که در حال ساخت آن هستید قرار است که صفحه ی خانه ی سایت شما شود، حتما نام آن را “index.html” گذاشته و تمامی حروف نام آن را با حروف کوچک بنویسید.

 

 

 

افزودن تم به پروژه ی وبسایت

 

شما میتوانید به جای ساخت صفحات برای وبسایت خود، یک تم برای آن انتخاب کنید زیرا هر تم به تنهایی دارای چندین صفحه است. هر تم معمولا دارای سه صفحه ی خانه (Home)، درباره (About) و ارتباط (Contact) میباشد که هر کدام دارای ساختاری از پیش آماده میباشند و کار طراحی را برای شما آسان تر میکنند.

 

به منظور افزودن تم به سایت به مسیر “File > New From Theme / Layout” بروید. با این کار پنجره ی “Theme/Layout Chooser” باز خواهد شد و از طریق آن میتوانید تم مورد نظرتان را بر روی سایت اعمال کنید.

 

 

 

پس از انتخاب تم مورد نظر پنجره ای به شکل عکس زیر باز خواهد شد که باید گزینه ی “Current Website Project” را در آن انتخاب کنید.

 

 

 

فایل های مربوط به تمی که اعمال کردید در بخش “My Websites” ظاهر خواهند شد.

 

 

 

مشاهده پیش نمایشی از پروژه وبسایت

 

هم اکنون که تا اینجا پیش رفته ایم، چطور است نگاهی به پیش نمایشی از سایت بیاندازیم. به منظور انجام این کار کلید “F12” را فشار دهید تا بخش نمایش پیش نمایش سایت باز شود.

 

 

 

آپلود کردن پروژه ی وبسایت به سرور

 

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

 

 

- آپلود با استفاده از FTP

 

به منظور انجام این کار یا تنها کلید “F4” را فشار دهید و یا ابتدا دکمه ی “Upload” را کلیک کنید، سپس به مسیر “FTP Upload > Upload Entire Website Project” بروید. با این کار پنجره ی “Upload Files to Server” باز شده و میتوانید میزان پیشرفت انتقال فایلها به سرور را در آن مشاهده کنید.

 

 

 

ساخت یک صفحه ی وب جدید

 

سه راه برای ساخت صفحات وب جدید در CoffeeCup HTML Editor وجود دارند که هر کدام به ترتیب زیر میباشند و در ادامه نحوه ساخت صفحه با هر کدام را شرح میدهیم:

 

1. ساخت یک صفحه خالی.

 

2. استفاده از یک طرح از پیش آماده.

 

3. استفاده از یک تم. 

 

 

1. ساخت صفحه ی خالی

 

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

 

 

قدم یک:

 

نرم افزار CoffeeCup HTML Editor را اجرا کرده و در اولین صفحه از آن گزینه ی “New Blank Page” را انتخاب کنید.

 

 

 

قدم دو:

 

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

 

دقت داشته باشید که بنا به گزینه هایی که انتخاب میکنید نرم افزار کد های HTML به صفحه اضافه خواهد کرد و این به آن معناست که صفحه از اول کاملا هم خالی نیست!

 

 

قدم سه:

 

در بخش بعدی پنجره ای با عنوان “Quick Start” باز خواهد شد که میتوانید تنظیمات دلخواه تان را در آن اعمال کنید.

 

 

 

در ادامه مقاله میخواهیم گزینه های موجود در پنجره ی “Quick Start” را برای شما شرح دهیم:

 

- Page Title: متنی که در صفحات و یا همان تب های مرورگر های وب برای هر سایت مشاهده میکنید.

 

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

 

- Page Background: اگر نمیخواهید که پس زمینه ی این صفحه سفدی و ساده باشد و میخواهید آن را رنگی کنید و یا یک عکس برای پس زمینه انتخاب کنید، میتوانید از این گزینه استفاده کنید.

 

- DOCTYPE: از طریق این منوی میتوانید “DOCTYPE” مورد نظرتان را برای صفحه انتخاب کنید. DOCTYPE نوع و زبان صفحه را برای مرورگری که در حال مشاهده ی آن است ذکر میکند.

 

- Charset: به وسیله ی این منو نیز میتوانید ست کاراکتری که در صفحه قابل استفاده خواهد بود را انتخاب نمایید.

 

- Meta Description: توضیحی کوتاه برای سایت تان که قرار است گاهی اوقات در موتور های جستجو نمایش داده شود را در این کارد وارد نمایید.

 

- Meta Keywords: کلماتی که مربوط به این صفحه هستند را در این کارد نوشته و آن ها را با استفاده از کاما و فاصله از هم جدا کنید.

 

 

قدم چهار:

 

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

 

 

 

2. ساخت صفحه با استفاده از طرح های از پیش آماده

 

میتوانید از یک طرح از پیش آماده شده شروع کنید و یک صفحه ی وب بسازید. یک طرح از پیش آماده دارای یک ساختار HTML برای یک صفحه ی ساده میباشد.

 

 

قدم یک:

 

نرم افزار HTML Editor را اجرا کرده و پنجره ی “Welcome” که باز میشود را ببندید تا وارد پنجره اصلی نرم افزار شوید.

 

 

 

قدم دو:

 

به مسیر “File > New From Theme/Layout” بروید تا پنجره ی “Theme/Layout Chooser” باز شود.

 

 

قدم سه:

 

طرح از پیش آماده مورد نظرتان را در پنجره ی Theme/Layout Chooser انتخاب کنید.

 

 

 

قدم چهار:

 

پس از انتخاب طرح مورد نظر OK را کلیک کنید تا انتخاب شود.

 

 

3. ساخت صفحه با استفاده از تم

 

قدم یک:

 

نرم افزار HTML Editor را اجرا کرده و سپس در پنجره ی “Welcome” گزینه ی “Start With a Theme” را انتخاب کنید.

 

 

 

قدم دو:

 

تم مورد نظر را از پنجره ی “Theme/Layout Chooser” انتخاب نمایید.

 

 

 

قدم سه:

 

OK را کلیک کنید تا تم ساخته شده و شروع به کار با آن کنید.

 

موفق باشید.

 

 

دانلود آخرین نسخه نرم افزار CoffeeCup HTML Editor

 

سایر مقالات مربوط به CoffeeCup HTML Editor