Глава 19: "Создаём свой мини-сайт"

На следующий день Алиса пришла к Профессору Биту с горящими глазами.

— Профессор, я придумала историю с разветвлениями о путешествии во времени! — воскликнула она. — Но как мне поделиться ею с друзьями? Не всем понравится набирать команды в консоли.

Профессор улыбнулся:
— Отличный вопрос, Алиса! И у меня есть прекрасное решение — мы создадим веб-страницу с твоей историей. Это будет твой первый мини-сайт!

Байт радостно закружился:
— Веб-разработка — это одно из самых популярных направлений программирования! Можно создавать сайты, которые увидит весь мир!

— С чего нам начать? — спросила Алиса.

— Веб-сайты создаются с помощью трёх основных языков, — объяснил Профессор, открывая ноутбук. — HTML отвечает за структуру и содержание, CSS — за внешний вид, а JavaScript — за интерактивность.

Три языка — три верных друга:
Один кладёт каркас и свод,
Другой раскрашивает стены,
А третий оживляет ход.

HTML — и кости, и основа,
CSS — наряд, палитра, свет,
JavaScript — живое слово,
Что отвечает «да» и «нет».

Страница — дом в большом просторе,
Где код становится окном.
Ты строишь сайт — и в этом доме
Друзьям найдётся тёплый дом.

Профессор открыл простой текстовый редактор и начал писать:

html
html Copy


  
    
    
  
  
    

      
Путешествие во времени

      

        

          Ты обнаруживаешь странное устройство в подвале старого дома. Оно
          похоже на карманные часы, но с множеством кнопок и циферблатов.
          Внезапно устройство начинает светиться!
        

        
Что ты сделаешь?

        
          Нажать на центральную кнопку
        
        
          Отложить устройство и уйти
        
      

    
    
  

— Ого! — воскликнула Алиса, глядя на экран. — Этот код выглядит сложнее, чем то, что мы делали раньше.

— Не волнуйся, — успокоил её Профессор. — Давай разберём его по частям. В начале у нас идёт структура HTML — это как скелет нашей страницы:

html
html Copy


  
    
    
  
  
    
  

— HTML состоит из тегов, которые обозначаются угловыми скобками, — продолжил Профессор. — Например,

обозначает заголовок первого уровня,

— абзац текста, — кнопку.

— А что такое CSS? — спросила Алиса, указывая на раздел стилей.

— CSS — это каскадные таблицы стилей, — объяснил Профессор. — Они определяют, как элементы будут выглядеть: их цвет, размер, положение на странице и т.д. Вот часть CSS из нашего примера:

css
css Copy body {
  font-family: Arial, sans-serif;
  margin: 40px;
  line-height: 1.6;
  background-color: #f5f5f5;
}
h1 {
  color: #333;
  text-align: center;
}

— Здесь мы указываем, что текст на всей странице (body) должен использовать шрифт Arial, иметь отступы в 40 пикселей и светло-серый фон. А заголовки первого уровня (h1) должны быть тёмно-серыми и выровнены по центру.

Логик добавила:
— CSS работает по принципу селекторов. Мы выбираем элемент (например, все абзацы p или все заголовки h1) и определяем для него стили.

— А что значит .container и .choice-button? — поинтересовалась Алиса.

— Это классы, — пояснил Профессор. — Мы можем присвоить любому элементу класс с помощью атрибута class и затем применять стили ко всем элементам с этим классом. Например:

html
html Copy

  

css
css Copy .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

— Понятно! — кивнула Алиса. — А как работает интерактивность? Я вижу, что кнопки как-то связаны с JavaScript.

— Верно подмечено! — похвалил Профессор. — JavaScript — это язык программирования, который выполняется в браузере и позволяет делать страницы интерактивными. В нашем примере мы используем функции JavaScript, чтобы менять содержимое страницы при нажатии на кнопки:

jsx
javascript;
Copy;
function makeChoice(choice) {
  if (choice === 'нажать') {
    document.getElementById('story-container').innerHTML = `
            
Ты нажимаешь на кнопку, и вокруг тебя появляется яркое свечение...

            
        `;
  } else if (choice === 'отложить') {
    document.getElementById('story-container').innerHTML = `
            
Ты решаешь не рисковать и кладёшь устройство обратно...

            
        `;
  }
}

— Эта функция вызывается при нажатии на кнопку с помощью атрибута onclick="makeChoice('нажать')". Она проверяет, какой выбор сделал пользователь, и обновляет содержимое контейнера с историей, вставляя новый текст и новые кнопки.

— А как связаны HTML, CSS и JavaScript? — спросила Алиса.

Байт показал на своём экране схему:

Copy
HTML (структура) → Что есть на странице
CSS (стили) → Как оно выглядит
JavaScript (скрипты) → Как оно себя ведёт

— Можно провести аналогию с человеком, — предложил Профессор. — HTML — это как скелет и органы, определяющие, из чего состоит тело. CSS — это внешний вид: цвет волос, рост, одежда. А JavaScript — это поведение: как человек двигается, говорит, реагирует на окружающих.

— Теперь давай посмотрим, как выглядит наша страница, — предложил Профессор и открыл HTML-файл в браузере.

На экране появилась красивая страница с заголовком "Путешествие во времени", текстом истории и двумя зелёными кнопками для выбора. Алиса нажала на первую кнопку, и содержимое страницы изменилось — появился новый текст и новые варианты выбора.

— Это потрясающе! — воскликнула она. — Моя история оживает прямо на глазах!

— А теперь давай улучшим наш сайт, — предложил Профессор. — Например, добавим изображения и звуковые эффекты.

Он дописал несколько строк кода:

html
html Copy

  
  


  
  

— Мы добавили стиль для изображений и код для воспроизведения звука при перемещении во времени, — объяснил Профессор. — Теперь история стала более атмосферной.

— А можно добавить музыкальный фон? — спросила Алиса.

— Конечно! — кивнул Профессор и добавил ещё несколько строк:

html
html Copy

  
  


🔊






— Теперь у нас есть кнопка включения/выключения фоновой музыки, — пояснил Профессор. — Это важно, так как не все пользователи хотят слышать музыку при посещении сайта.

— Как здорово! — восхитилась Алиса. — А можно добавить инвентарь, как в нашей текстовой игре?

— Отличная идея! — улыбнулся Профессор. — Давай создадим отдельный блок для инвентаря и переменные в JavaScript для хранения предметов:

html
html Copy

  

    
Путешествие во времени

          id="inventory"
      style="background-color: #f0f0f0; padding: 10px; margin-bottom: 15px; border-radius: 5px;"
    >
      
Инвентарь:

      
Пусто