Редакторы HTML

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

Что такое HTML-редактор?

HTML-редактор — любая программа, в которой можно писать обычный текст и сохранять его как файл .html. Браузеру всё равно, какая марка. Ему нужна корректная разметка и файл, который он может открыть. Редакторы бывают от простых блокнотов до редакторов кода с подсветкой и деревом файлов.

Прямой ответ: чем пользоваться новичкам?

Начните с бесплатного редактора кода вроде Visual Studio Code или даже встроенного Блокнота в Windows / TextEdit в режиме обычного текста на macOS. Избегайте Microsoft Word, Google Docs и похожих текстовых процессоров для уроков HTML. Эти приложения созданы для печатных документов и часто добавляют скрытое форматирование, которое ломает веб-страницы.

Обычный текстовый редактор и редактор кода

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

• подсветка синтаксиса, чтобы теги и текст легче читать
• номера строк для поиска ошибок
• папки и несколько файлов в одном окне
• опциональные расширения позже (для этого курса не нужны)
  Платный IDE для изучения HTML не обязателен.

Для чего этот учебный файл

Скопируйте пример в редактор, сохраните как editor-practice.html и откройте в Chrome, Firefox, Edge или Safari. Если видны заголовок и абзац, редактор и сохранение настроены верно.

Как создать первый HTML-файл

1. Откройте редактор и создайте новый файл
2. Вставьте или наберите простой HTML-документ
3. Сохраните файл с именем, заканчивающимся на .html (например index.html)
4. Если редактор спросит кодировку, по возможности выберите UTF-8
5. Откройте сохранённый файл в браузере (двойной щелчок или перетащите файл в окно браузера)
   В Блокноте Windows используйте «Сохранить как», тип «Все файлы» и сами допишите расширение .html, чтобы файл не стал .txt.

Онлайн-редакторы и блоки Try-it на этом сайте

Онлайн-песочницы позволяют править HTML в браузере без установки программ. Они удобны для быстрых опытов. В этом курсе также практикуйтесь с локальным файлом .html, чтобы освоить настоящий цикл «сохранить и открыть». Когда урок показывает блок Try-it, можно запустить его там и повторить ту же разметку в своём редакторе.

Рекомендуемые бесплатные варианты

Это распространённые удобные для новичков варианты (достаточно одного):

• Visual Studio Code — популярный бесплатный редактор кода
• Notepad++ (Windows) — лёгкий с подсветкой
• Sublime Text — быстрый редактор (бесплатная оценка)
• Встроенный Блокнот / TextEdit в режиме текста — хватает для первых уроков
  Выберите один инструмент и пользуйтесь им какое-то время, чтобы процесс стал автоматическим.

Частые ошибки

• Писать HTML в Word или Docs и экспортировать, не понимая лишнюю разметку этих программ
• Случайно сохранить как .txt и удивляться сырым тегам в браузере
• Править файл и забыть сохранить перед обновлением браузера
• Режим форматированного текста, который меняет кавычки или вставляет «умные» знаки в атрибуты
• Ожидать, что редактор сам «запустит» HTML — страницу показывает браузер; редактор только хранит исходник

Кратко

• HTML пишут обычным текстом в редакторе и сохраняют как .html
• Редакторы кода помогают подсветкой; инструменты вроде Блокнота тоже работают
• Избегайте текстовых процессоров при изучении HTML-разметки
• Сохраните, затем откройте или обновите браузер, чтобы увидеть изменения
• Онлайн-редакторы удобны; локальные файлы учат реальному процессу
• Один постоянный редактор лучше, чем смена инструментов на каждом уроке