Редакторы и инструменты HTML
Из предыдущей главы мы узнали, что HTML — это язык разметки, используемый для создания веб-страниц. При создании веб-страниц вам понадобятся следующие инструменты и программы:
- текстовый или HTML-редактор для написания и редактирования исходного кода,
- браузер для проверки результатов,
- валидатор — специальная программа, проверяющая корректность или синтаксическую правильность исходного кода.
Давайте рассмотрим их подробнее.
Редакторы HTML
Существует несколько профессиональных редакторов, которые веб-разработчики используют для написания кода. Однако не каждый редактор сможет удовлетворить все ваши потребности. Поэтому хороший HTML-редактор должен обладать следующим функционалом:
- подсветка синтаксиса — отображение текста, особенно исходного кода, разными цветами и шрифтами,
- поддержка вкладок — возможность держать открытыми несколько веб-страниц одновременно во вкладках,
- проверка HTML-документа на наличие ошибок,
- сворачивание кода — скрытие больших фрагментов кода для отображения только краткого содержания или первой строки.
Наиболее популярные HTML-редакторы перечислены ниже:
Поскольку вы только начинаете, вы можете использовать Блокнот (Windows) или TextEdit (macOS) для создания своего первого файла. Однако, поскольку эти базовые редакторы не поддерживают подсветку синтаксиса, мы рекомендуем начать с бесплатного редактора, который её поддерживает, например Visual Studio Code или Notepad++. Давайте посмотрим, как создать ваш первый файл.
Шаг 1. Откройте Блокнот на компьютере
Нажмите клавишу Windows, введите Notepad и нажмите Enter.
Шаг 2. Напишите свой код
Напишите или скопируйте какой-нибудь HTML-код.
Пример 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>Результат
Шаг 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), при этом Chrome DevTools наиболее широко используются для проверки и отладки HTML. Для кроссбраузерного тестирования, когда ваш проект вырастет, вы сможете использовать онлайн-сервисы или виртуальные машины.
Валидатор
Важной частью процесса разработки веб-страниц является проверка корректности HTML-кода. Для проверки корректности или синтаксической правильности фрагмента кода или документа можно использовать специальные валидаторы, программы или сервисы.
Наиболее распространенным онлайн-сервисом является validator.w3.org. Введите URL веб-страницы, и сервис проверит код на наличие ошибок или вернет сообщение, подтверждающее корректность вашего документа.
Для проверки корректности локальных файлов вы можете использовать онлайн-валидаторы или встроенные линтеры в современных редакторах, таких как Visual Studio Code. Некоторые редакторы также обеспечивают проверку синтаксиса в реальном времени по мере набора текста.
Практика
Какие из перечисленных ниже являются рекомендуемыми HTML-редакторами согласно содержанию, предоставленному по указанному URL?