HTML-редакторы и инструменты
Сравнение популярных HTML-редакторов (VS Code, Sublime Text, Notepad++, WebStorm), создание первого HTML-файла, DevTools и валидатор W3C.
Из предыдущей главы мы узнали, что HTML — это язык разметки, используемый для создания веб-страниц. При создании веб-страниц вам понадобятся следующие инструменты и программы:
- текстовый или HTML-редактор для написания и редактирования исходного кода,
- браузер для проверки результатов,
- валидатор — специальная программа, проверяющая корректность или синтаксическую правильность исходного кода.
Рассмотрим их подробнее.
HTML-редакторы
Веб-разработчики используют несколько профессиональных редакторов для написания кода. Однако не каждый редактор способен удовлетворить все потребности. Хороший HTML-редактор должен обладать следующими возможностями:
- подсветка синтаксиса — отображение текста, особенно исходного кода, разными цветами и шрифтами,
- поддержка вкладок — одновременное открытие нескольких веб-страниц во вкладках,
- проверка HTML-документа на наличие ошибок,
- сворачивание кода — скрытие больших фрагментов кода для отображения только краткого содержания или первой строки.
Наиболее популярны следующие HTML-редакторы:
- Visual Studio Code — бесплатный редактор с открытым исходным кодом и наиболее распространённый выбор по умолчанию. Работает на Windows, macOS и Linux. Его сильная сторона — экосистема расширений: добавьте Prettier для автоматического форматирования кода, Live Preview (или Live Server) для мгновенного отображения изменений в браузере, а встроенный IntelliSense обеспечивает автодополнение тегов и атрибутов.
- Sublime Text — выбирайте его за высокую скорость работы. Он запускается мгновенно и остаётся отзывчивым даже с очень большими файлами, что делает его популярным для быстрого редактирования. Это платная программа, но её можно бесплатно оценить; работает на всех трёх основных платформах.
- Notepad++ — бесплатный лёгкий редактор только для Windows. На macOS или Linux в качестве сопоставимого лёгкого варианта можно использовать встроенный редактор (TextEdit на macOS, gedit/nano на Linux) или просто кроссплатформенный VS Code.
- WebStorm — полноценная IDE от JetBrains. Это платная программа (по подписке), более требовательная к ресурсам, чем редакторы выше, однако в ней встроены глубокий рефакторинг, отладка и поддержка фреймворков, что подходит для крупных проектов.
Если вы только начинаете и хотите обойтись без настройки, можно воспользоваться Блокнотом (Windows) или TextEdit (macOS), чтобы написать первый файл. Однако эти базовые редакторы не поддерживают подсветку синтаксиса, поэтому мы рекомендуем начать с бесплатного редактора, который её поддерживает, — например Visual Studio Code (любая платформа) или Notepad++ (Windows). Выбрав редактор, изучите базовую структуру HTML-документа, прежде чем двигаться дальше.
Ваш первый HTML-файл
В шагах ниже используется Блокнот Windows, поскольку он установлен на каждом компьютере с Windows и не требует настройки. Та же идея применима к любому редактору: напишите код, сохраните файл с расширением .html, затем откройте его в браузере.
Шаг 1. Откройте Блокнот
Нажмите клавишу Windows, введите Notepad и нажмите Enter. (На macOS откройте TextEdit и переключитесь в режим обычного текста через Формат → Преобразовать в обычный текст.)
Шаг 2. Напишите код
Напишите или скопируйте приведённый ниже HTML-код.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Simple example</h1>
<p>Some text you want to show here</p>
</body>
</html>При открытии в браузере этот код отображает страницу с заголовком «Simple example» крупным жирным текстом, за которым следует абзац «Some text you want to show here».
Шаг 3. Сохраните HTML-документ
В меню Блокнота выберите File и нажмите Save As. Дайте документу имя с расширением .htm или .html. (Рекомендуем использовать расширение .html.) Убедитесь, что кодировка установлена как UTF-8, а в выпадающем списке Save as type выбрано All Files, чтобы Windows не добавляла расширение .txt. Сохраните файл в специальную папку, созданную заранее для хранения всех HTML-документов.
Шаг 4. Проверьте HTML-файл в браузере
Откройте HTML-файл в браузере (щёлкните по файлу правой кнопкой мыши и выберите Open with). Вы должны увидеть заголовок и абзац из приведённого выше кода.
Браузер
Для проверки HTML-файлов вам понадобится браузер. Для начала подойдёт любой браузер — Google Chrome, Opera или Firefox — но впоследствии вам понадобятся все они. Дело в том, что каждый браузер имеет собственный движок рендеринга, и вам нужно будет проверять код в каждом из них. Современные браузеры также включают встроенные инструменты разработчика (нажмите F12 или щёлкните правой кнопкой мыши по элементу и выберите Просмотр кода). DevTools позволяют просматривать живой HTML и CSS любого элемента, изменять стили и сразу видеть результат, а также читать Консоль, в которой браузер сообщает об ошибках и предупреждениях JavaScript. Это самый быстрый способ понять, почему страница выглядит или ведёт себя не так, как ожидалось. Для кроссбраузерного тестирования можно использовать онлайн-сервисы или виртуальные машины по мере роста проекта.
Валидатор
Неотъемлемой частью процесса разработки веб-страниц является проверка корректности HTML-кода. Для проверки корректности или синтаксической правильности фрагмента кода или документа можно использовать специальные валидаторы, программы или сервисы.
Наиболее распространённый онлайн-сервис — validator.w3.org. Введите URL веб-страницы (или вставьте код напрямую), и сервис проверит его на соответствие стандарту HTML. В результате выводится список сообщений: Ошибки (красный цвет) указывают на код, нарушающий стандарт, — например, незакрытый тег или неверно написанное имя элемента; Предупреждения (жёлтый цвет) указывают на вещи, которые технически допустимы, но не рекомендуются. Если проблем нет, вы получаете зелёное сообщение, подтверждающее корректность документа. Исправление ошибок валидатора — хорошая привычка, поскольку некорректная разметка может по-разному отображаться в разных браузерах.
Для проверки корректности локальных файлов можно использовать онлайн-валидаторы или встроенные линтеры в современных редакторах, таких как Visual Studio Code. Некоторые редакторы также обеспечивают проверку синтаксиса в режиме реального времени по мере ввода.