HTML Editor: Code & Preview

Превратите свою веб-идею в работающую страницу с помощью HTML-редактора. Пишите HTML-код с использованием встроенных CSS и JavaScript, просматривайте результат и используйте короткие уроки, чтобы понять, какой код вы изменяете. Это практичное рабочее пространство для студентов, начинающих и разработчиков, экспериментирующих с небольшими веб-страницами на мобильных устройствах.

ПИШИТЕ И ПРОВЕРЯЙТЕ СВОЙ КОД

Работайте в редакторе кода с подсветкой синтаксиса, сопоставлением скобок, автоматическим закрытием, а также отменой и повтором действий. Отображайте номера строк, находите текст или переходите к строке по мере увеличения фрагмента кода. Дополнительная панель инструментов символов позволяет легко находить распространенные символы кода, поэтому ввод тегов и выражений требует меньшего переключения между раскладками клавиатуры.

Перемещайтесь между вкладками «Код», «Вывод» и «Консоль». В окне вывода ваш документ отображается внутри приложения, включая стили и скрипты. Используйте автоматическое обновление предварительного просмотра во время редактирования или отключите его, если хотите контролировать время обновления результата. Сообщения консоли помогут вам проверить, что делает JavaScript вашей страницы.

ИЗУЧИТЕ РАЗЛИЧНЫЕ ШИРИНЫ ПРЕДПРОСМОТРА

Выберите режимы предварительного просмотра для телефона, планшета или компьютера, чтобы изучить, как ведет себя макет при разной ширине. Это представления внутри приложения, полезные для проверки отступов и расположения при работе над адаптивным дизайном. Попробуйте заголовок, настройте правило стиля, а затем вернитесь к результату, чтобы увидеть эффект.

ИЗУЧИТЕ КОНЦЕПЦИЮ, А ЗАТЕМ ПРИМЕНИТЕ ЕЕ НА ПРАКТИКЕ

Режим обучения объединяет темы HTML, CSS и JavaScript. Фильтруйте по теме или ищите концепцию вместо того, чтобы читать все по порядку. Каждый урок включает объяснение, краткую подсказку, практическое применение, распространенные ошибки, пример и разбор кода.

После урока выполните два коротких задания по программированию. Сначала восстановите пример, а затем напишите новый фрагмент кода, используя эту концепцию. Проверьте свой ответ, прочитайте отзыв и сбросьте начальный этап, когда захотите попробовать еще раз. Второе задание разблокируется после завершения первого. Прогресс чтения и практики записывается локально, поэтому вы можете вернуться к темам, которые начали.

СОХРАНЯЙТЕ И ДЕЛИТЕСЬ СВОЕЙ РАБОТОЙ

Создайте документ, откройте сохраненный HTML-файл или используйте «Сохранить как», чтобы сохранить свою работу в виде HTML-файла. Поделитесь файлом, если хотите отправить сам документ. Для онлайн-передачи сгенерируйте код передачи или ссылку для обмена и используйте сопутствующий веб-редактор, чтобы продолжить работу с фрагментом кода. Онлайн-передача отправляет текущий код в сервис и требует подключения к интернету.

СДЕЛАЙТЕ РАБОЧЕЕ ПРОСТРАНСТВО КОМФОРТНЫМ

Выберите светлый, темный или системный стиль оформления и настройте размер шрифта редактора. Настройки позволяют управлять нумерацией строк, режимом специальных возможностей, автосохранением, резервным копированием при выходе и восстановлением сессии. Черновики и копии рабочей области являются локальными данными приложения; сохраняйте важную работу как файлы, а не рассматривайте локальную сессию как постоянную резервную копию.

Страница «Данные и конфиденциальность» позволяет просмотреть настройки, очистить временные данные редактора или сбросить локальные данные приложения. Центр наград также предоставляет дополнительные ежедневные награды и рекламные акции с монетами. Монеты — это внутриигровые предметы, а не наличные деньги.

Для редактирования отдельных страниц и чтения объединенных уроков не требуется подключение к интернету. Для удаленных изображений, внешних скриптов, онлайн-трансляций и рекламы необходимо подключение к сети. Используйте HTML-редактор, чтобы изучить концепцию, попробовать внести изменения, проверить результат и сохранить код, который вы хотите использовать в дальнейшем.