Введение в HTML: создаём первую страницу игры.

Ты сейчас сидишь перед монитором. Ничего не открыто: ни редакторов с ошибками, ни сложных движков. Только ты — и вдохновение. И, знаешь, это уже большой шаг.

Ты будешь писать текст, который будет превращаться во что-то настоящее. Можно сказать, он будет оживать — и это выглядит как волшебство. Я тебе даже немного завидую. Мне уже не испытать этого «первого впечатления» заново, потому что я давно пишу программы. Но даже сейчас, спустя много лет опыта, я всё ещё не теряю азарта от этой магии и полон восхищения от проделанной работы.

Желаю и тебе того же в процессе.

Скоро ты окунёшься в мир, который создашь сам.

На этом курсе ты не просто выучишь HTML и CSS — ты станешь автором интерактивной истории. Ты — архитектор киберпанковской реальности.

И прямо сейчас ты напишешь первую сцену своей игры.

Пора пробудить первую строку кода.

Цель этого урока: создать первую HTML-страницу с элементами игры — заголовком, текстом и выбором действий.

Что ты изучишь: теги html, body, h1, p, a + подключишь стили прямо в HTML.

На выходе: первая сцена интерактивной новеллы в киберпанк-сеттинге.

Как начать: создаём HTML-файл

Чтобы не утонуть в хаосе, сначала создадим отдельную папку для обучения. В ней будет храниться всё: HTML-файлы, картинки, стили. Эта папка как база данных твоей новеллы.

  1. Создай папку на рабочем столе (или где тебе удобно). Назови её:

visual-novel-cyberpunk

  1. Открой эту папку. Внутри создай новый текстовый файл.

Переименуй его в: index.html (Важно: не .txt, а .html)

  1. Если не получается сменить расширение:
  • Открой файл в любом редакторе (например, Блокнот или Notepad++)
  • Нажми «Сохранить как»
  • В «Имя файла» напиши: index.html
  • В «Тип файла» выбери: Все файлы
  • Нажми Сохранить
  1. Открой index.html в текстовом редакторе.

Вставь код ниже в свой html файл и сохрани. Это будет твоя первая веб-страница. С неё начнётся твоя киберпанк-новелла.

<html lang="ru">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<h1>Глитч в Сети</h1>
<div>
<p>
Твоё сознание возвращается медленно. Комната полна глухого гула серверов и мерцающего неона за окном.
Экран терминала пульсирует алым: <strong>"ОНИ НАШЛИ ТЕБЯ"</strong>.
</p>
</div>
<div>
<a href='#'>Войти в систему и прочитать сообщение</a>
<a href='#'>Срочно выключить питание и исчезнуть</a>
</div>
</div>
</body>
</html>

Что значат эти странные слова в коде?

Поздравляю, ты только что написал свой первый HTML-код. Давай разберёмся, что здесь вообще происходит — без занудства. Не волнуйся, если что-то пока не запомнится. Ты будешь видеть эти теги снова и снова — и скоро будешь использовать их, не задумываясь.

HTML-тег — это особым образом оформленное сокращение от английского слова. Оно пишется в треугольных скобках, например: <p>. У каждого тега есть своя задача — помочь браузеру правильно разметить содержимое страницы.

HTML-теги обычно работают в парах: открывающий и закрывающий. Между ними — текст или другие элементы. Например: <h1>Привет!</h1>. Это как контейнер для содержимого.

Некоторые теги — такие как <img> (изображение) или <br> (перенос строки) — самодостаточные. Они не обрамляют контент, а просто вставляют элемент или действие.

  • <!DOCTYPE html> — говорит браузеру: "Эй, это современный HTML5-документ".
  • <html lang="ru"> — всё, что внутри — это веб-страница. А lang="ru" — язык контента (русский).
  • <head> — "мозг" страницы: сюда мы будем добавлять настройки, шрифты, стили.
  • <meta charset="UTF-8"> — это чтобы русские буквы отображались правильно.
  • <title> — название вкладки в браузере. Сейчас она называется "Глитч в Сети".
  • <body> — а вот это уже "тело" страницы — всё, что ты видишь на экране.
  • <h1> — заголовок. Мы используем его для названия новеллы.
  • <p> — абзац текста. Им мы пишем основное повествование.
  • <a href="#"> — это ссылка. Пока она не ведёт никуда (#), но скоро мы добавим настоящие переходы.

Проверка: как открыть файл в браузере

Чтобы увидеть результат:

  • Просто перетащи файл index.html в окно браузера
  • Или нажми на файле правой кнопкой мыши → "Открыть с помощью" → выбери браузер (например, Chrome или Firefox)

Отлично! Первая сцена готова

Ты только что написал свою первую страницу игры. Пока она простая — но это только начало. Впереди — стили, атмосфера, а потом мы добавим анимацию и выборы, чтобы оживить всё как настоящую новеллу.

Перед тем как двигаться дальше, давай добавим щепотку магии стилей. Просто вставь этот код перед строкой с тегом </body>:

<style>
body {
background-color: black;
color: #00ffcc;
font-family: monospace;
padding: 40px;
}
a {
display: block;
margin-top: 20px;
color: #ff00cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>

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

Обложка книги JavaScript с нуля: учимся программировать, создавая игры

Книга по JavaScript для начинающих

«JavaScript с нуля: учимся программировать, создавая игры»

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

Читать книгу на ЛитРес →