СереднійІнформатика

Веб-розробка

HTML, CSS та JavaScript — основи створення веб-сайтів та веб-додатків.

Три кити веб-розробки

Будь-яка веб-сторінка складається з трьох технологій:

🦴 HTML (HyperText Markup Language) — СТРУКТУРА сторінки (скелет)
👗 CSS (Cascading Style Sheets) — СТИЛІ та зовнішній вигляд (одяг)
🧠 JavaScript — ПОВЕДІНКА та інтерактивність (мозок)

HTML — структура

Приклад

📄 Базова структура HTML-документа: <!DOCTYPE html> <html> <head> <title>Моя сторінка</title> </head> <body> <h1>Заголовок</h1> <p>Це параграф тексту.</p> <a href="https://google.com">Посилання</a> <img src="photo.jpg" alt="Фото"> </body> </html> 🏷️ Теги: <h1>-<h6> заголовки, <p> параграф, <a> посилання, <img> зображення.

CSS — стилі

Приклад

🎨 CSS змінює вигляд елементів: h1 { color: blue; font-size: 32px; text-align: center; } p { color: gray; line-height: 1.5; } .button { background: #3b82f6; color: white; padding: 10px 20px; border-radius: 8px; }

💡 Історія: Перший веб-сайт

💡

🌐 Перший у світі веб-сайт створив Тім Бернерс-Лі в 1991 році в ЦЕРНі (Швейцарія). Адреса: info.cern.ch — він досі працює! 📊 Цікаві факти: • 1991: 1 сайт • 2000: 17 мільйонів сайтів • 2024: понад 1.9 мільярда сайтів! 🏆 Тім Бернерс-Лі не запатентував WWW, а подарував його людству безкоштовно!

JavaScript — інтерактивність

Приклад

⚡ JavaScript оживляє сторінку: // Вивести повідомлення alert("Привіт!"); // Змінити текст на сторінці document.getElementById("demo").innerHTML = "Новий текст"; // Реагувати на клік button.addEventListener("click", function() { alert("Кнопку натиснуто!"); }); 🎮 JS використовується для ігор, анімацій, форм, чатів.

Frontend vs Backend

Веб-розробка поділяється на:

🎨 Frontend — те, що бачить користувач (HTML, CSS, JS, React, Angular)
⚙️ Backend — серверна частина (Python, Node.js, PHP, бази даних)
🔗 Fullstack — розробник, який знає і frontend, і backend

Еволюція вебу: Від 1.0 до 3.0

Інтернет змінювався протягом десятиліть:

Web 1.0 (90-ті): Тільки читання. Статичні сторінки, форуми, користувачі лише споживали контент.
Web 2.0 (2000-ні): Читання і запис. Соціальні мережі, блоги, YouTube. Користувачі створюють контент.
Web 3.0 (Майбутнє): Розподілений веб, семантичні мережі, блокчейн, власність на дані, AR/VR.

📱 Mobile-First підхід

💡

У 2016 році мобільний трафік вперше перевищив десктопний (з комп'ютерів). Тому сьогодні розробники керуються правилом "Mobile First" — сайти спочатку проектуються і оптимізуються під маленькі екрани смартфонів, а вже потім адаптуються під великі монітори.

🌐 Перший в історії вебсайт

Перший у світі вебсайт був створений у 1991 році Тімом Бернерсом-Лі в Європейській організації ядерних досліджень (CERN). Він був присвячений проекту "World Wide Web" і містив інформацію про те, що таке гіпертекст та як створити свою веб-сторінку. Ви досі можете його відвідати за адресою info.cern.ch!

Створено за 10 днів: Історія JavaScript

💡

Брендан Ейх написав першу версію мови JavaScript у травні 1995 року всього за 10 ДНІВ! Її створили просто для того, щоб зробити сторінку в браузері Netscape трохи інтерактивною. Ніхто й не підозрював, що через 30 років ця мова керуватиме абсолютно всім вебом і стане найпопулярнішою мовою у світі.

📦 Блокова модель CSS (Box Model)

У веб-дизайні абсолютно ВСЕ є прямокутником (навіть круглі кнопки). Кожен елемент на сторінці складається з 4 шарів:

Content (Контент): сам текст або зображення.
Padding (Внутрішній відступ): простір між текстом і його рамкою.
Border (Рамка): межа навколо елемента.
Margin (Зовнішній відступ): відстань від цього прямокутника до сусідніх.