Модуль 9

Статичні файли: CSS, JS, зображення

Ось готовий урок, створений спеціально для тебе в стилі енергійних та надихаючих лекцій CS50. Поїхали!

🎓 Урок: Статичні файли (CSS, JS, зображення)

Привіт, друзі! Радий бачити вас знову.

Давайте почнемо з простого питання. Уявіть, що ви збудували будинок. Ви поставили стіни, дах, вікна. Це — ваш HTML. Він стоїть, він міцний, він виконує свою функцію. Але... він сірий. У ньому немає меблів. Немає світла. Немає води в крані. Чи захочете ви жити в такому будинку? Навряд чи.

HTML — це лише скелет. Але сьогодні ми навчимося "одягати" цей скелет, розфарбовувати його і змушувати рухатися. Сьогодні ми говоримо про статичні файли.

1. 🔥 Вступ: проблема та мотивація

Уявіть ситуацію: ви написали свій перший веб-сервер. Він віддає сторінку з текстом "Привіт, світ!". Ви відкриваєте її в браузері, і вона виглядає так, ніби ми повернулися в 1995 рік. Чорний текст, білий фон, Times New Roman. Нудно? Жахливо нудно!

А тепер ви хочете додати туди свій логотип. Або зробити фон приємного синього кольору. Або щоб при натисканні кнопки вискакувало повідомлення "Ви підписалися!".

Ви пробуєте вставити картинку, але браузер показує "розбиту іконку". Ви пишете стилі, але вони не підтягуються. Чому?

Риторичне питання: Чому ваш сервер розуміє, як віддати HTML-код, але губиться, коли ви просите його показати картинку котика?

Відповідь: Тому що сервер за замовчуванням думає, що все — це код або текст. Він не знає, де лежать ваші "картинки" і "фарби", якщо ви чітко не вкажете йому це місце. Без статичних файлів веб — це просто нудні документи. З ними — це Netflix, Instagram та YouTube.

Сьогодні ми перетворимо ваші "документи" на повноцінні додатки.

2. 🧠 Теоретична база (під капотом)

Давайте розберемося, що таке "Статичний файл".

Це файл, який не змінюється в процесі роботи програми. * Коли ви заходите на Facebook, ваша стрічка новин генерується динамічно (для кожного різна). * Але логотип Facebook (синя літера "f"), шрифти та код, який відповідає за лайки — однакові для всіх. Це і є статика.

Як це працює? (Аналогія з рестораном) 🍔

Уявіть, що Браузер — це клієнт у ресторані, а Сервер — це кухня.

  1. Клієнт (Браузер): "Дайте мені головну сторінку!" (Запит на index.html).
  2. Кухня (Сервер): "Ось ваша страва (HTML)".
  3. Клієнт отримує страву, дивиться на неї і бачить записку: «Ця страва смакує краще з соусом (style.css) та серветкою (logo.png)».
  4. Клієнт (Браузер): "Ой, а дайте ще соус!" (Новий запит на style.css).
  5. Кухня: "Тримайте соус".
  6. Клієнт: "А ще серветку!" (Новий запит на logo.png).
  7. Кухня: "Тримайте серветку".

Що треба запам’ятати залізно:

HTML-сторінка сама по собі не містить картинок чи стилів. Вона містить лише посилання на них. Браузер повинен зробити окремий запит для кожного файлу!

Тому, якщо ваш сервер не вміє віддавати "соус" і "серветки" (статику), браузер отримає помилку 404 (Not Found), і ваш сайт буде виглядати "голим".

3. 🧪 Приклади (від простого до реального)

Припустимо, ми працюємо з типовою структурою веб-проєкту (наприклад, на Flask, Django або просто HTML).

Приклад 1: Структура тек

Зазвичай усі "незмінні" файли ми складаємо в папку static.

my_project/
├── index.html        <-- Наш скелет
└── static/           <-- Наша комора зі статикою
    ├── style.css     <-- Одяг (CSS)
    ├── script.js     <-- Поведінка (JS)
    └── cat.jpg       <-- Картинка

Приклад 2: Як це виглядає в коді (HTML)

Ви, мабуть, очікуєте, що ми просто напишемо ім'я файлу, так?

<!-- ПОГАНИЙ ПРИКЛАД -->
<link rel="stylesheet" href="style.css">
<img src="cat.jpg">

Чому це може не спрацювати? Тому що браузер буде шукати cat.jpg там же, де лежить index.html. Але ми ж порядні розробники, ми сховали все в папку static!

Правильний шлях:

<!-- ДОБРИЙ ПРИКЛАД -->
<!DOCTYPE html>
<html>
<head>
    <title>Мій сайт</title>
    <!-- Вказуємо шлях до папки static -->
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <h1>Привіт! Дивись на мого кота:</h1>
    <img src="/static/cat.jpg" alt="Рудий кіт">

    <!-- Скрипти зазвичай внизу -->
    <script src="/static/script.js"></script>
</body>
</html>

Що відбувається?

Коли браузер читає рядок <img src="/static/cat.jpg">, він відправляє запит на сервер: GET /static/cat.jpg. Сервер бачить цей шлях, заглядає в папку static, бере файл і віддає його браузеру. Вуаля! Кіт на екрані.

4. 🛠 Практична частина

Прийшов час забруднити руки кодом. Відкрийте свій редактор.

Завдання 1: Створення бази Створіть папку lab_static. Всередині створіть index.html і папку assets (іноді її називають так замість static).

Завдання 2: "Маляр" У папці assets створіть файл main.css. Напишіть там:

body { background-color: lightblue; }
h1 { color: white; }

Тепер підключіть цей файл до вашого index.html. Відкрийте в браузері. Питання: Фон став блакитним? Якщо ні — перевірте шлях у href.

Завдання 3: "Детектив" (Виправляємо помилку) Спробуйте змінити шлях у HTML на href="css/main.css" (без папки assets). Оновіть сторінку. Відкрийте Console розробника (F12) -> вкладка Network. Що ви бачите? Ви маєте побачити червоний рядок з помилкою 404. Це означає "Я шукав, але не знайшов". Поверніть як було.

Завдання 4: Міні-кейс Знайдіть в інтернеті будь-яку картинку, збережіть її в папку assets. Виведіть її на сторінку, але зробіть так, щоб її ширина була 300 пікселів (через CSS!).

Завдання 5: А що, якщо... Що, якщо ми перейменуємо папку assets в public? Що саме перестане працювати і що треба змінити в HTML коді?

5. 💡 Мислення як у розробника

Ви тепер знаєте синтаксис. Але як думає профі?

1. Кешування — твій друг і ворог. Ви помітите таку річ: ви змінили колір у CSS з синього на червоний, оновили сторінку, а вона... досі синя! Чому?! Браузер — ледачий (або економний). Він зберіг старий файл у себе в пам'яті (кеші), щоб не качати його знову. * Порада новачка: Тисніть Ctrl + F5 (або Cmd + Shift + R), щоб примусово перезавантажити все з нуля. * Як думає профі: "Треба налаштувати сервер так, щоб при оновленні файлу браузер точно про це дізнався".

2. Абсолютні vs Відносні шляхи. Початківці часто плутаються: писати static/style.css чи /static/style.css (зі слешем на початку). * Слеш на початку (/) означає "від кореня сайту". Це найнадійніший спосіб для новачків. * Без слешу — це "від поточної папки". Це може призвести до проблем, якщо у вас складна структура URL.

3. Розділяй і володарюй. Ніколи, чуєте, ніколи не пишіть CSS-стилі прямо всередині HTML (в тегах <style>), якщо це великий проєкт. Винесіть це в окремий файл. Чому? Тому що цей файл можна підключити до 10 різних сторінок. Якщо ви захочете змінити шрифт, ви зміните його в одному файлі, а не в десяти. Це називається DRY (Don't Repeat Yourself).

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми взяли нудний HTML-скелет і навчилися: 1. Одягати його в CSS. 2. Вчити його трюкам з JavaScript. 3. Давати йому обличчя через Зображення. 4. Ми зрозуміли, що браузер робить багато окремих запитів, щоб зібрати одну сторінку.

Тепер ви вмієте: створювати повноцінні, красиві веб-сторінки, які не соромно показати друзям.

Що далі? Зараз наші сторінки красиві, але вони дурні. Вони показують одне й те саме всім. На наступному уроці ми поговоримо про Шаблони (Templates) — як зробити так, щоб сторінка віталася з вами на ім'я і показувала саме ваш баланс на рахунку.

Це було CS50... тобто, наш урок. Побачимось! 👋

← До списку уроків Наступний урок →