Розділ 19: "Створюємо свій міні-сайт"

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

— Професоре, я вигадала історію з розгалуженнями про подорож у часі! — вигукнула вона. — Але як мені поділитися нею з друзями? Не всім сподобається набирати команди в консолі.

Професор посміхнувся:
— Відмінне питання, Алісо! І в мене є чудове рішення — ми створимо веб-сторінку з твоєю історією. Це буде твій перший міні-сайт!

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

— З чого нам почати? — запитала Аліса.

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

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

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

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

Професор відкрив простий текстовий редактор і почав писати:

html


  
    
    
  
  
    

      
Подорож у часі

      

        

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

        
Що ти зробиш?

        
          Натиснути на центральну кнопку
        
        
          Відкласти пристрій і піти
        
      

    
    
  

— Вау! — вигукнула Аліса, дивлячись на екран. — Цей код виглядає складніше, ніж те, що ми робили раніше.

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

html


  
    
    
  
  
    
  

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

позначає заголовок першого рівня,

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

— А що таке CSS? — запитала Аліса, вказуючи на розділ стилів.

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

css
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

  

css
.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, щоб змінювати вміст сторінки при натисканні на кнопки:

javascript
function makeChoice(choice) {
  if (choice === 'натиснути') {
    document.getElementById('story-container').innerHTML = `
            
Ти натискаєш на кнопку, і навколо тебе з'являється яскраве світіння...

            
        `;
  } else if (choice === 'відкласти') {
    document.getElementById('story-container').innerHTML = `
            
Ти вирішуєш не ризикувати і кладеш пристрій назад...

            
        `;
  }
}

— Ця функція викликається при натисканні на кнопку за допомогою атрибута onclick="makeChoice('натиснути')". Вона перевіряє, який вибір зробив користувач, і оновлює вміст контейнера з історією, вставляючи новий текст і нові кнопки.

— А як пов'язані HTML, CSS і JavaScript? — запитала Аліса.

Байт показав на своєму екрані схему:

HTML (структура) → Що є на сторінці
CSS (стилі) → Як воно виглядає
JavaScript (скрипти) → Як воно себе веде

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

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

На екрані з'явилась красива сторінка з заголовком "Подорож у часі", текстом історії і двома зеленими кнопками для вибору. Аліса натиснула на першу кнопку, і вміст сторінки змінився — з'явився новий текст і нові варіанти вибору.

— Це приголомшливо! — вигукнула вона. — Моя історія оживає прямо на очах!

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

Він дописав кілька рядків коду:

html

  
  


  
  

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

— А чи можна додати музичний фон? — запитала Аліса.

— Звичайно! — кивнув Професор і додав ще кілька рядків:

html

  
  


🔊






— Тепер у нас є кнопка вмикання/вимикання фонової музики, — пояснив Професор. — Це важливо, адже не всі користувачі хочуть чути музику під час відвідування сайту.

— Як чудово! — захопилась Аліса. — А чи можна додати інвентар, як у нашій текстовій грі?

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

html

  

    
Подорож у часі

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

      
Порожньо