Noznet.ruСодержание:
Способ 1: HTML CSS JS Editor
Из названия онлайн-сервиса HTML CSS JS Editor уже понятно, какие именно языки программирования он поддерживает, однако сейчас нас интересует исключительно HTML-код. Давайте разберемся с возможностями данного редактора, ознакомимся с подсветкой синтаксиса и покажем, как на экране отображается результат компилирования.
- Перейдите по ссылке выше, чтобы оказаться на главной странице сайта. Ею представлена сразу форма редактора, поэтому в блоке слева вы можете начать ввод кода или вставить его из буфера обмена.
- Как видно на следующем скриншоте, теги, их содержимое и комментарии подсвечиваются отдельными цветами, что и позволяет не запутаться в синтаксисе.
- Редактируйте код как желаете, после чего запустите его обработку. Перед этим можете изменить положение второго блока, щелкнув по соответствующей кнопке на верхней панели. Это нужно в том случае, если текущее его отображение справа вас не устраивает и есть желание поместить его вниз.
- По завершении нажмите «Run», запустив тем самым компилирование.
- Вы увидите, как данная веб-страница отображается в браузере, обратив внимание на вывод во втором блоке. Сейчас можно вернуться к первому, чтобы изменить любые строчки кода. Затем повторно нажмите «Run», скомпилировав уже новый результат.
- Обратите внимание на строку «Result Size»: она соответствует размеру браузерного окна, но присутствует и значение в пикселях, что пригодится для формирования картины об отображении содержимого.
Способ 2: Be1
Вкратце рассмотрим и онлайн-сервис под названием Be1, хоть его функциональность преимущественно сосредоточена на визуальном редактировании HTML-кода. Вы можете взаимодействовать и с исходником, проверив результат и сохранив его как отдельный файл на компьютере, что осуществляется так:
- Откройте страницу редактора и переключите внешний вид на «Источник», чтобы убрать элементы визуального оформления и получить доступ к работе с кодом.
- Вставьте в поле ниже ваш исходник или начните ручную запись кода. К сожалению, Be1 не поддерживает подсветку синтаксиса, что в некоторых случаях будет значительным недостатком.
- Снова нажмите «Источник», чтобы посмотреть, как код отображается в скомпилированном виде.
- Если вдруг вам понадобится изменить его визуально, обращайтесь к инструментам Be1, расположенным на панели редактора.
- По завершении поделитесь ссылкой на данный фрагмент кода или скачайте его как HTML-файл, чтобы использовать в своих целях.
- Готовый файл открывается через браузер для просмотра или для редактирования через соответствующий софт либо любые текстовые редакторы.
Способ 3: GuruWeba
Редактор GuruWeba имеет сходства с первым онлайн-сервисом, однако обладает уникальными инструментами для работы с кодом, о которых вы и узнаете в следующей инструкции. Никаких опций, связанных с визуальным редактированием, у GuruWeba нет, что необходимо учитывать еще до начала работы с сайтом.
- Кликните по ссылке выше, чтобы начать взаимодействие с редактором. В первую очередь отметим особенность, которой является наличие шаблонов. Щелкните по кнопке с соответствующим названием для отображения списка заготовок.
- Так добавляется таблица в виде кода, список, форма, картинки и переключатели. Это пригодится, чтобы усовершенствовать свой HTML-код без самостоятельного его написания.
- На следующем изображении вы видите, как осуществилось добавление шаблона. Конечно, данные в таблицах и списках тоже заполнены по умолчанию, поэтому вам придется редактировать их под себя.
- После редактирования кликните по «Запустить код», отправив его на компилирование.
- Результат отобразится в блоке справа. Это своеобразное представление браузерной страницы, поэтому вы увидите как кнопки, картинки, так и другие элементы, включенные в ваш код.
Способ 4: JSFiddle
JSFiddle — комплексный онлайн-редактор кода, поддерживающий оформление как в HTML, так и в CSS + JS. То есть вы можете задать каркас веб-страницы, настроить отображение его графических элементов и реализовать JavaScript в рамках одного сайта, что очень удобно при работе с небольшими проектами.
- На странице редактора сначала предлагается добавить название проекту и описание. Сделать его приватным или поместить в группу могут только зарегистрированные пользователи.
- В первом блоке с названием «HTML» добавьте свой код, который хотите отредактировать, или напишите его с нуля.
- Как видно на следующем изображении, JSFiddle поддерживает подсветку синтаксиса и корректно отображает структуру кода.
- Активируйте параметр «Tidy», чтобы реализовать сворачивание блоков, если строчек кода в одном документе слишком много.
- Точно так же редактируйте CSS и JS, используя для этого два других блока на странице сайта.
- Для отправки на компилирование используйте кнопку «Run», расположенную на панели сверху.
- В последнем блоке справа снизу появится сам результат обработки веб-страницы со всеми графическими элементами.
- Нажмите «Save», если хотите сохранить проект для публичного доступа и иметь возможность в любой момент вернуться к его редактированию.
- Разработчики показывают дополнительное сообщение, предупреждающее о том, как именно происходит сохранение документов.
- В завершение отметим, что в JSFiddle есть ряд настроек, предназначенных для изменения расположения плиток и управления их отображением. Используйте их на свое усмотрение.
Способ 5: LiveWeave
Завершающий онлайн-сервис имеет много схожего с предыдущим, поскольку точно так же позволяет взаимодействовать одновременно как с HTML-кодом, так и с JS и CSS. Сейчас рассмотрим только основные этапы редактирования и компилирования, чтобы вы могли понять, как начать работу с собственным кодом, вставив его или написав с нуля.
- Оказавшись на странице редактора, можете сразу переключить режим отображения окон и поставить светлую тему, если текущий внешний вид сайта вас не устраивает.
- Далее вставьте свой код или напишите его в редакторе слева, который и предназначен для HTML. Присутствует стандартная подсветка синтаксиса, поэтому в тегах и другом содержимом вы не запутаетесь.
- Используйте панель ниже, если хотите добавить стили CSS для своего кода.
- То же самое сделайте и справа, применяя JavaScript.
- Запускать компилирование не нужно, поскольку этот процесс на сайте LiveWeave происходит автоматически после внесения любых изменений, а результат показывается справа снизу.
- Разверните меню «Tools», чтобы загрузить шаблоны, скачать готовый документ или перейти к изменениям параметров редактора.
- По завершении сохраните результат в профиле или скачайте файл через упомянутое выше меню.
