Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як HTML пов'язаний з CSS та JavaScript?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**HTML, CSS і JavaScript** - це **три ключові мови**, які разом створюють будь-яку сучасну вебсторінку.
Вони працюють як **команда**, де у кожного своя роль:

---

### 1. **HTML - структура (скелет сторінки)**

HTML задає **що є на сторінці**: заголовки, абзаци, зображення, кнопки, посилання тощо.
Він визначає **вміст і порядок елементів**, але не керує зовнішнім виглядом чи поведінкою.

Приклад:

```html
<button>Натисни мене</button>
```

Ця кнопка існує, але без CSS і JavaScript вона - просто прямокутник із текстом.

---

### 2. **CSS - оформлення (зовнішній вигляд)**

CSS (Cascading Style Sheets) керує **тим, як виглядає** HTML-код:
кольори, шрифти, відступи, вирівнювання, фони, анімації тощо.

Приклад:

```css
button {
  background-color: blue;
  color: white;
  border-radius: 10px;
}
```

Тепер кнопка стала **гарною**: синьою, із заокругленими кутами і білим текстом.

---

### 3. **JavaScript - поведінка (логіка та інтерактивність)**

JavaScript відповідає за **реакції на дії користувача**:
натискання, введення тексту, завантаження даних із сервера, анімацію, роботу форм і багато іншого.

Приклад:

```javascript
document.querySelector("button").addEventListener("click", () => {
  alert("Ти натиснув кнопку!");
});
```

Тепер кнопка **оживає**: при натисканні з'являється повідомлення.

---

### Як вони взаємодіють:

- **HTML** створює структуру сторінки.
- **CSS** підключається до HTML через тег `<link>` і робить сторінку стильною.
- **JavaScript** підключається через тег `<script>` і робить її динамічною.

Приклад об'єднання:

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
  <button>Натисни мене</button>
  <script src="script.js"></script> 
</body>
</html>
```

---

### Підсумок:

| Мова | Роль | Приклад |
|---|---|---|
| **HTML** | Структура | `<h1>Заголовок</h1>` |
| **CSS** | Стиль | `h1 { color: red; }` |
| **JavaScript** | Логіка | `alert('Привіт!')` |

Вони працюють **разом**:
**HTML** - це тіло, **CSS** - одяг, а **JavaScript** - мозок вебсторінки.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати280 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.