HTML керує сучасним світом. Так, якщо ви запитаєте когось, що потрібно для того, щоб стати веб-розробником, він розповість вам все про веб-інфраструктурах JavaScript, веб-платформи Python, практики веб-програмування. і т. Д. Тим не менш, в основі всього цього лежить HTML.
Немає мережі без HTML, і вам потрібно знати, як її редагувати, якщо ви хочете займатися веб-роботою будь-якого роду. Але налаштування надійного робочого процесу редагування HTML в Sublime Text підвищення або Visual Studio Code може виявитися зайвим, якщо ви не працюєте над повноцінним проектом.
У ті моменти, коли ви просто хочете пограти з невеликим фрагментом HTML, щоб ви могли налаштувати його за своїм смаком, онлайн-редактор HTML буде вам корисніше.
Навіщо використовувати онлайн-редактор HTML?
Найкраще в онлайн-редакторах HTML полягає в тому, що вони запускаються прямо у вашому веб-браузері. Ваш веб-браузер - найкращий і найбільш актуальний інструмент для обробки і рендерінгу HTML-коду. Це, зрештою, вся його мета і причина існування.
Це означає, що ваш веб-браузер найкраще підходить для попереднього перегляду HTML в реальному часі. Коли ви пишете веб-розмітку в окремому редакторі, такому як Блокнот або TextEdit, ви повинні зберегти зміни у файлі, потім завантажити файл у веб-браузер, потім переглянути його, а потім переключитися назад до редактора для додаткових змін, промити і повторити. Це незграбний і громіздкий процес.
Онлайн-редактор HTML може динамічно оновлюватися в міру написання і зміни розмітки. Немає потреби перемикатися між вікнами. Ви налаштовуєте HTML з одного боку, зміни автоматично відбуваються з іншого боку.
Кілька автономних редакторів можуть бути налаштовані з якимось попереднім переглядом у реальному часі, але вони не такі зручні. Наприклад, функція Live Preview у дужках може відкривати окреме вікно Chrome і відправляти HTML-зміни до браузера щоразу, коли ви зберігаєте розмітку. Але для цього все ще потрібен переворот вікна, і це змушує вас використовувати Chrome.
Онлайн-редактори HTML так само портативні, як і приходять. Незалежно від того, на якій машині ви перебуваєте, ви можете отримати доступ до веб-редактора, якщо у вас є підключення до Інтернету. Немає необхідності встановлювати і налаштовувати автономний редактор, який ви можете або не можете використовувати знову.
І ви можете подивитися на ці інші інструменти для підвищення своїх навичок веб-розробки. навички теж.
Тепер, ось деякі з кращих онлайн-редакторів HTML, доступних в даний час.
1. Codepen
Codepen - це «середовище соціальної розробки» для веб-розробників, що в основному означає онлайн-редактор з функціями спільного використання і спільної роботи. Сам редактор простий: панель для HTML, панель CSS і панель для JavaScript, а також панель попереднього перегляду в реальному часі. Всі розміри панелі можна налаштовувати, перетягуючи краї навколо.
Ви можете створити «Ручки», які схожі на окремі ігрові майданчики для налаштування веб-коду. Декілька ручок можна згрупувати у збірці. Для приватних ручок і колекцій потрібен обліковий запис Pro, вартість якого починається від 9 дол. США на місяць і включає в себе інші функції: хостинг ресурсів, вбудовувані теми, спільна робота в режимі реального часу і доступ до повного IDE-середовища розробки веб-додатків CodePen.
2. JSFiddle
JSFiddle - це те, на що це схоже: пісочниця, де ви можете пограти з JavaScript. Але якщо подивитися, як JavaScript йде рука об руку з HTML і CSS, ви можете редагувати всі три за допомогою інтерфейсу редагування JSFiddle - і ви можете взагалі пропустити JavaScript.
Що добре в JSFiddle, так це те, що ви можете додати зовнішні запити в бічну панель, яка дозволяє включати сторонні файли JavaScript і CSS для поліпшення вашого HTML. Також витончена кнопка Tidy, яка автоматично очищає відступи вашого коду, і кнопка Collaborate, яка дозволяє вам працювати над тим же кодом з кимось ще в режимі реального часу.
Єдиним недоліком є те, що ви повинні натиснути кнопку «Виконати», щоб оновити панель попереднього перегляду.
3. JSBin
JSBin схожий на більш просту і чисту альтернативу JSFiddle. Ви можете редагувати будь-яку комбінацію HTML, CSS і JavaScript, просто перемикаючи панелі з верхньою панеллю інструментів, і ви можете перемикати панель попереднього перегляду і панель консолі для максимальної гнучкості.
Але коли JSFiddle дозволяє зв'язувати зовнішні ресурси CSS і JavaScript, JSBin має лише попередньо визначені бібліотеки JavaScript, які ви можете включити. Тим не менш, вибір хороший, від jQuery до React, Angular та інших.
Хоча JSBin є безкоштовним і не потребує облікового запису, вам знадобиться обліковий запис Pro, якщо ви хочете, щоб приватні збірки, користувальницькі вставки, хостинг ресурсів, синхронізація Dropbox і марнославні URL-адреси для сторінок, що публікуються через JSBin.
4. Liveweave
Liveweave схожий на попередній редактор з інтерфейсом, більш приємним для очей (хоча ваші переваги можуть відрізнятися). Як і JSFiddle, Liveweave забезпечує спільну роботу в режимі реального часу, а також, як і JSBin, дозволяє пов'язувати попередньо визначені сторонні ресурси, такі як jQuery.
Але у нього також є кілька унікальних особливостей. Lorem Ipsum Generator створює заповнювач тексту у поточній позиції курсора. CSS Explorer надає інструмент WYSIWYG для створення стилів CSS. Color Explorer допоможе вам вибрати ідеальні кольори для вашої теми. Векторний редактор надає вам змогу створювати векторну графіку для вашого сайта.
5. HTMLhouse
HTMLhouse - це хороший варіант, якщо ви дбаєте тільки про HTML (тобто не використовуєте CSS або JavaScript). Він дуже чистий і мінімальний, розділений по вертикалі з редагуванням ліворуч і попереднім переглядом в реальному часі праворуч. Відмінна особливість - можливість публікувати ваш HTML і ділитися ним в приватному порядку (з наданим URL) або публічно (він додається на сторінку перегляду HTMLhouse). Це просто, але ефективно, і саме тут в гру вступає онлайн-редактор HTML.
Зауважте, що HTMLhouse було створено і підтримується людьми з Write.as, інтерактивного інструменту для письма без відволікань. Якщо ви пишете в блозі або щось в цьому роді, використовуйте Write.as.
Удосконалюйте свої навички HTML ще більше
Якщо ваше єдине знайомство з HTML - це те, що ви дізналися десять років тому, то вам пора надолужити згаяне. HTML5 випущений ще в 2014 році і представив кілька нових стандартів і функцій. Не впевнений, де почати? Перевірте ці важливі нові елементи в HTML5
Крім того, щоб вивчити передові практики в галузі веб-дизайну та розробки HTML5, ви повинні перевірити ці веб-сайти з прикладами якісного HTML-кодування. А коли ваш веб-сайт запрацює, розгляньте можливість стиснення розмітки HTML. для кращої швидкості.