Создание своей HTML страницы

Чтобы создать HTML-страницу, достаточно использовать любой текстовый редактор — даже Блокнот. Однако для эффективной разработки рекомендуется использовать современный редактор кода, такой как Visual Studio Code (VS Code).

Как создать HTML-страницу

HTML-страница — это текстовый файл с расширением .html. Минимальная структура HTML-документа выглядит так:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
</body>
</html>

Сохраните этот код в файл с именем, например, index.html. Откройте его в браузере — вы увидите заголовок «Привет, мир!». Это и есть ваша первая веб-страница.

Как создавать файлы с определённым расширением

Как использовать JavaScript на странице

JavaScript можно подключать к HTML-странице двумя основными способами: встроенно (внутри HTML-файла) или через внешний файл. Второй способ — единственно правильный для профессиональной разработки.

В том же HTML файле (не рекомендуется)

JavaScript можно вставить прямо внутрь HTML-документа с помощью тега <script>:

<!DOCTYPE html>
<html>
<head>
    <title>Страница с встроенным JS</title>
</head>
<body>
    <h1>Привет!</h1>
    <script>
        alert("Это встроенный JavaScript!");
        document.write("<p>Текст добавлен скриптом.</p>");
    </script>
</body>
</html>

Почему это не рекомендуется:

  • Нарушает принцип разделения ответственности: структура (HTML), стиль (CSS) и логика (JS) должны быть разделены.
  • Сложно поддерживать и масштабировать код — особенно при росте проекта.
  • Затрудняется повторное использование кода между страницами.
  • Ухудшается читаемость и тестирование.
  • Может замедлять загрузку страницы, если скрипт большой.

Используйте этот способ только для быстрых экспериментов, демонстраций или очень простых примеров.

Подключая внешний файл

Правильный и стандартный способ — создать отдельный файл с расширением .js и подключить его к HTML:

  1. Создайте файл script.js в той же папке, что и index.html.
  2. Напишите в нём JavaScript-код:
// script.js
alert("Это внешний JavaScript-файл!");
document.querySelector('h1').style.color = 'blue';
  1. Подключите его в HTML перед закрывающим тегом </body>:
<!DOCTYPE html>
<html>
<head>
    <title>Страница с внешним JS</title>
</head>
<body>
    <h1>Привет!</h1>
    <script src="script.js"></script>
</body>
</html>

Преимущества:

  • Чистый, организованный код.
  • Возможность переиспользования одного файла на нескольких страницах.
  • Упрощённая отладка и версионный контроль (Git).
  • Лучшая производительность — браузер может кэшировать внешние скрипты.

Где подключать JS — в конце или начале HTML-файла?

JavaScript следует подключать в самом конце тела HTML-документа, перед закрывающим тегом </body>.

Почему именно в конце?

Когда браузер встречает тег <script> во время парсинга HTML, он приостанавливает загрузку и разбор DOM-дерева, чтобы загрузить и выполнить скрипт. Если скрипт подключен в <head> или в начале <body>, а он пытается взаимодействовать с элементами, которые ещё не загружены — возникнет ошибка:

<head>
    <script src="script.js"></script> <!-- ❌ Опасно! -->
</head>
<body>
    <button id="myButton">Нажми меня</button>
</body>

Если в script.js написано:

document.getElementById('myButton').addEventListener('click', () => {
    alert('Клик!');
});

— то скрипт выполнится до того, как кнопка появится в DOM, и getElementById вернёт null. Результат — ошибка в консоли.

Правильный способ:

<body>
    <button id="myButton">Нажми меня</button>

    <script src="script.js"></script> <!-- ✅ Безопасно: DOM уже построен -->
</body>

Теперь браузер сначала полностью загрузит и отрисует все элементы страницы, а только потом выполнит скрипт — и все запросы к DOM будут успешными.

Дополнительные преимущества:

  • Быстрая отрисовка контента: пользователь видит страницу быстрее, без задержек из-за загрузки скриптов.
  • Предсказуемое поведение: код работает только тогда, когда всё, к чему он обращается, уже существует.
  • Совместимость с современными практиками: так делают все крупные фреймворки и библиотеки.

Исключения:

  • Если скрипт не зависит от DOM (например, модуль аналитики, который запускается сразу при загрузке страницы), его можно размещать в <head>.
  • Использование атрибута defer (в <head>) позволяет отложить выполнение скрипта до завершения парсинга HTML — это альтернатива размещению в конце, но требует понимания нюансов.
<head>
    <script src="script.js" defer></script> <!-- ✅ Альтернатива, если нужно в head -->
</head>

✅ Рекомендация: Всегда подключайте JavaScript-файлы перед закрывающим тегом </body>, если только вы точно не знаете, что делаете и почему используете defer или async. Это — базовое правило надёжной и предсказуемой работы JavaScript на веб-странице.

Подключение логики обработки в кнопки

Чтобы реагировать на действия пользователя (например, нажатие кнопки), можно назначить обработчик события двумя способами: через атрибуты HTML или через JavaScript. Второй способ — единственный корректный для профессиональной разработки.

Через атрибут в кнопках (не рекомендуется)

Можно напрямую вписать JavaScript-код в атрибут onclick элемента:

<button onclick="alert('Кнопка нажата!')">Нажми меня</button>

Или вызвать функцию:

<script>
function handleClick() {
    alert('Функция вызвана через атрибут!');
}
</script>

<button onclick="handleClick()">Нажми меня</button>

Почему это не рекомендуется:

  • Смешивание ответственности: логика (JS) и структура (HTML) сливаются — нарушает принцип разделения.
  • Сложность поддержки: сложно отлаживать, тестировать и рефакторить код, особенно при росте проекта.
  • Уязвимость к ошибкам: если имя функции опечатано — ошибка не будет заметна до момента клика.
  • Не масштабируемо: невозможно динамически добавлять/удалять обработчики, работать с несколькими элементами, использовать замыкания.
  • Проблемы с безопасностью: в некоторых контекстах (CSP) использование onclick может быть заблокировано.

⚠️ Используйте этот способ только для быстрых экспериментов или учебных примеров — никогда в продакшене.

Через назначения обработчиков событий

Правильный и стандартный способ — назначать обработчики событий из JavaScript, после того как DOM загружен:

<button id="myButton">Нажми меня</button>

<script src="script.js"></script>

// script.js
const button = document.getElementById('myButton');

button.addEventListener('click', function() {
    alert('Кнопка нажата через addEventListener!');
});

Преимущества:

  • Полное разделение логики и разметки.
  • Возможность назначать несколько обработчиков на один элемент.
  • Легко удалять обработчики через removeEventListener.
  • Поддержка современных возможностей JS: стрелочные функции, async/await, замыкания.
  • Удобно работать с динамически создаваемыми элементами.
  • Совместимость с системами сборки, тестирования и фреймворками.

Дополнительно — лучшая практика:

document.addEventListener('DOMContentLoaded', () => {
    const button = document.getElementById('myButton');
    if (button) {
        button.addEventListener('click', () => {
            console.log('Клик обработан надёжно');
        });
    }
});

Это гарантирует, что скрипт выполнится только после полной загрузки DOM, даже если он подключён в <head>.

Добавление обработчика на кнопку — простой пример

Представим, что у нас есть кнопка в HTML:

<button id="myButton">Нажми меня</button>

Мы хотим, чтобы при нажатии на неё в консоль браузера выводилось сообщение:

"Кнопка была нажата!"

Шаг 1: Подключите внешний JavaScript-файл

Убедитесь, что у вас есть файл script.js, и он подключен в конце <body>:

<body>
    <button id="myButton">Нажми меня</button>

    <script src="script.js"></script>
</body>

Шаг 2: Найдите кнопку в JavaScript

В script.js напишите:

const button = document.getElementById('myButton');

Эта строка говорит браузеру:
👉 «Найди элемент на странице, у которого атрибут id="myButton"» — и сохрани его в переменную button.

Шаг 3: Назначьте обработчик события

Теперь добавьте эту строку:

button.addEventListener('click', () => {
    console.log('Кнопка была нажата!');
});

Что здесь происходит (без функций):

  • addEventListener — это встроенная команда, которая привязывает действие к элементу.
  • 'click' — это тип события, которое мы хотим отслеживать (нажатие).
  • () — это просто способ сказать: «здесь будет код, который выполнится при событии».
  • console.log(...) — это команда, которая выводит текст в окно разработчика (не на экран).

✅ Всё, что внутри { } — это просто набор команд, которые должны сработать, когда пользователь кликнет.

Результат:

Когда пользователь кликает по кнопке — в консоли браузера появляется сообщение:

Кнопка была нажата!

Этот шаблон — основа всего дальнейшего взаимодействия с пользователем. Его нужно запомнить как фиксированную формулу:

элемент.addEventListener('событие', () => { ... });

И заменять:

  • элемент — на нужный вам (button, input, div и т.д.)
  • 'событие' — на нужное (click, mouseover, keydown и т.д.)
  • { ... } — на то, что вы хотите сделать (вывести сообщение, изменить цвет, отправить данные)