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. для лучшей скорости.
Какой твой любимый способ редактирования разметки HTML? Над каким сайтом вы сейчас работаете? Поделитесь с нами в комментариях ниже!