Як HTML пов'язаний з CSS та JavaScript?
HTML, CSS і JavaScript - це три ключові мови, які разом створюють будь-яку сучасну вебсторінку. Вони працюють як команда, де у кожного своя роль:
1. HTML - структура (скелет сторінки)
HTML задає що є на сторінці: заголовки, абзаци, зображення, кнопки, посилання тощо. Він визначає вміст і порядок елементів, але не керує зовнішнім виглядом чи поведінкою.
Приклад:
<button>Натисни мене</button>Ця кнопка існує, але без CSS і JavaScript вона - просто прямокутник із текстом.
2. CSS - оформлення (зовнішній вигляд)
CSS (Cascading Style Sheets) керує тим, як виглядає HTML-код: кольори, шрифти, відступи, вирівнювання, фони, анімації тощо.
Приклад:
button {
background-color: blue;
color: white;
border-radius: 10px;
}Тепер кнопка стала гарною: синьою, із заокругленими кутами і білим текстом.
3. JavaScript - поведінка (логіка та інтерактивність)
JavaScript відповідає за реакції на дії користувача: натискання, введення тексту, завантаження даних із сервера, анімацію, роботу форм і багато іншого.
Приклад:
document.querySelector("button").addEventListener("click", () => {
alert("Ти натиснув кнопку!");
});Тепер кнопка оживає: при натисканні з'являється повідомлення.
Як вони взаємодіють:
- HTML створює структуру сторінки.
- CSS підключається до HTML через тег
<link>і робить сторінку стильною. - JavaScript підключається через тег
<script>і робить її динамічною.
Приклад об'єднання:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- підключаємо CSS -->
</head>
<body>
<button>Натисни мене</button>
<script src="script.js"></script> <!-- підключаємо JavaScript -->
</body>
</html>Підсумок:
| Мова | Роль | Приклад |
|---|---|---|
| HTML | Структура | <h1>Заголовок</h1> |
| CSS | Стиль | h1 { color: red; } |
| JavaScript | Логіка | alert('Привіт!') |
Вони працюють разом: HTML - це тіло, CSS - одяг, а JavaScript - мозок вебсторінки.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.