Пробуждение кода: история с двумя исходами

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

Открыть результат в отдельной вкладке

Что понадобится

Компьютер, браузер и редактор обычного текста. Подойдёт уже установленный Блокнот или редактор кода. Текстовый процессор вроде Word для HTML не подходит: он сохраняет документ с дополнительным форматированием. Знать программирование заранее не требуется. Мы учимся на небольших проектах: сначала повторяешь действие, затем меняешь правило и объясняешь результат.

Создай папку и первую страницу

1. Создай папку my-story в удобном месте.
2. В редакторе обычного текста создай новый файл. Сохрани его в этой папке с именем index.html и кодировкой UTF-8. Если диалог предлагает тип файла, выбери «Все файлы», чтобы редактор не дописал .txt.
3. Вставь документ ниже и сохрани. Открой этот файл браузером: можно перетащить его в окно браузера или выбрать «Открыть с помощью».

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Глитч в Сети — Глитч в Сети</title>
  
</head>
<body>
  <main>
    <h1>Глитч в Сети</h1>
    <p>
      На терминале сообщение: «Они нашли тебя». Если войти в сеть, можно узнать, кто
      отправил предупреждение. Если отключить питание, тебя перестанут видеть, но
      сообщение исчезнет.
    </p>

  </main>
</body>
</html>

На экране должны быть заголовок «Глитч в Сети» и сообщение терминала. Это законченный первый этап — пока страница без выбора. Если отредактировал текст, сначала сохрани файл, затем обнови страницу. Браузер не перечитывает изменения в редакторе сам.

Как устроен HTML-документ

HTML размечает содержимое. Тег записан в угловых скобках: <p> начинает абзац, </p> завершает его. Текст между ними увидит игрок. Вложенный элемент заканчивается раньше внешнего: сначала закрываем абзац, затем main, затем body.

• <!doctype html> включает современный режим HTML.
• <html lang="ru"> содержит весь документ. lang="ru" — атрибут, то есть настройка элемента: язык русский.
• head содержит настройки: charset задаёт кодировку, viewport помогает странице использовать ширину устройства, title задаёт название вкладки.
• body содержит видимое содержимое. main отмечает главную часть этой страницы.
• h1 — главный заголовок, p — абзац. У meta нет закрывающего тега: этот элемент не содержит текста.

Не нужно запоминать весь каркас сразу. Но проверь, что название вкладки соответствует title, а изменение текста между <h1> и </h1> меняет заголовок на странице.

Добавь две концовки

В той же папке создай login.html. Это не вход в настоящий аккаунт: так называется сцена, в которой герой читает сообщение. Сохрани в ней этот полный документ:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Сообщение прочитано — Глитч в Сети</title>
  
</head>
<body>
  <main>
    <h1>Сообщение прочитано</h1>
    <p>
      Предупреждение отправила твоя напарница. Ты передал ей координаты и дождался помощи.
      Сеть выдала твоё положение, но теперь ты не один.
    </p>
    <p><a href="index.html">Вернуться к началу и выбрать другой путь</a></p>
  </main>
</body>
</html>

Теперь создай рядом disconnect.html:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Вне сети — Глитч в Сети</title>
  
</head>
<body>
  <main>
    <h1>Вне сети</h1>
    <p>Экран погас. Ты ушёл через служебный выход незамеченным, но так и не узнал, кто хотел помочь. На этот раз ты выбрал безопасность.</p>
    <p><a href="index.html">Вернуться к началу и выбрать другой путь</a></p>
  </main>
</body>
</html>

Открой каждый новый файл отдельно. У каждой концовки должны быть свой заголовок и свой исход. Ссылка внизу обоих исходов должна возвращать на уже существующий index.html. Эти три файла — версия step-02; ссылки на эти концовки с первой страницы мы добавим чуть ниже.

Добавь ссылки на концовки

В index.html после абзаца с сообщением, но перед </main>, добавь:

<p><a href="login.html">Войти в сеть и прочитать сообщение</a></p>
<p><a href="disconnect.html">Выключить питание и уйти</a></p>

a — ссылка. Атрибут href сообщает, какой адрес открыть. Здесь login.html означает соседний файл с таким именем. Текст между тегами — подпись выбора; его можно менять, не меняя адрес. Если переименовал сам файл, нужно обновить и href. Символ # вместо имени не открыл бы нужное окончание.

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

Теперь измени историю сам

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

Если получилось иначе

Когда можно идти дальше

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