HTML (HyperText Markup Language) — це мова розмітки, яка використовується для створення вебсторінок.
Основні можливості HTML:
- створення структури сторінки;
- додавання тексту, зображень, відео;
- створення списків, таблиць, посилань.
Поточною версією є HTML5, яка підтримує відео та аудіо, 2D i 3D графіку; швидше завантажується; зручна для мобільних пристроїв.
Додавання відео в HTML
Тег <video> використовується для вставки відео на сторінку.
Приклад:
<video width="350" height="315" controls>
<source src="video.mp4" type="video/mp4">
</video>
<source src="video.mp4" type="video/mp4">
</video>
Основні атрибути:
- controls — показує кнопки керування;
- autoplay — автоматичне відтворення;
- loop — повтор відео;
- width, height — розміри.
Якщо відео з YouTube: використовується тег <iframe>.
Що таке CSS
Каскадні таблиці стилів CSS (Cascading Style Sheets) — це мова стилів, яка відповідає за зовнішній вигляд вебсторінки.
CSS співпрацює з HTML. CSS дозволяє змінювати кольори; задавати розміри; вирівнювати елементи; оформлювати текст.
Теги <style type='text/css'>... </style> оточують елементи CSS, які застосовуються до вебсторінки, усередині тегів <head>... </head> HTML-коду.
Структура CSS-правила складається з:
- селектора (що змінюємо) властивостей (що саме змінюємо),
- значень (як змінюємо)
Загальний вигляд: селектор { властивість: значення; }
Приклад:
Застосуємо до тегу <р>, що визначає зовнішній вигляд усіх абзаців на вебсторінці.
Рис.1
- color — колір тексту;
- background-color — колір фону;
- width — ширина;
- padding — внутрішні відступи;
- text-align — вирівнювання тексту (left — ліворуч, right — праворуч, center — по центру, justify — по ширині).
Кожен елемент HTML міститься к невидимому прямокутнику. Унаслідок зміни background-color цей прямокутник забарвлюється.
Типи селекторів:
Селектор тегу застосовується до всіх однакових елементів:
Селектор класу застосовується до кількох елементів.
Селектор ідентифікатора застосовується для одного унікального елемента:
Способи підключення стилів
Існує три основні способи додати CSS до вашої сторінки:
Зовнішні стилі (External): Створення окремого файлу з розширенням .css та підключення його в секції <head> за допомогою тегу <link>.
Приклад:
<link rel="stylesheet" href="style.css">
Внутрішні стилі (Internal): Опис стилів безпосередньо в HTML-файлі всередині тегу <head>.
Вбудовані стилі (всередині HTML):
Використання атрибута style безпосередньо в тегу.
Приклад:
<h1 style="color: red;">). Цей спосіб не рекомендується для великих проєктів.
Каскадний ефект CSS
Стилі можуть накладатися один на одного.
Пріоритет:
- Вбудовані стилі (inline)
- Ідентифікатори (#id)
- Класи (.class)
- Теги
Використовується найбільш конкретне правило
Робота з кольорами
- Назва кольору: red, blue, green, transparent.
- HEX-код: шістнадцятковий код, що починається з решітки. Наприклад, #ff0000 (червоний) або #ffffff (білий).
- RGB / RGBA: формат, де вказується інтенсивність червоного, зеленого та синього (від 0 до 255).
- rgb(0, 0, 255) — синій.
- rgba(0, 0, 255, 0.5) — синій з прозорістю 50%.
- rgb(0, 0, 255) — синій.
Основні властивості:
- color — колір тексту.
- background-color — колір фону елемента.
Шрифти та оформлення тексту
Шрифти дозволяють зробити текст читабельним та стильним.
- font-family: Визначає гарнітуру шрифту (наприклад, Arial, Verdana, Times New Roman). Завжди варто вказувати запасний варіант (наприклад, serif або sans-serif).
- font-size: Розмір шрифту. Може бути в пікселях (px), відсотках (%) або відносних одиницях (em, rem).
- font-weight: Накреслення тексту (bold — жирний, normal — звичайний).
- text-align: Вирівнювання тексту (left, right, center, justify).
Зовнішня таблиця стилів
CSS можна винести в окремий файл.
Приклад:
style.css
CSS
body {
background-color: #f4f4f4; /* Світло-сірий фон */
font-family: 'Segoe UI', Tahoma, sans-serif;
color: #333;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: white;
padding: 20px;
}
h1 {
color: darkblue;
text-align: center;
Підключення:
body {
background-color: #f4f4f4; /* Світло-сірий фон */
font-family: 'Segoe UI', Tahoma, sans-serif;
color: #333;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: white;
padding: 20px;
}
h1 {
color: darkblue;
text-align: center;
Підключення:
<link href="style.css" rel="stylesheet">
Переваги:
- зручно змінювати дизайн;
- один файл для всіх сторінок;
- швидша робота сайту.
Кодування сторінки
Щоб український текст відображався правильно, слід у розділі HTML-документа розташувати тег
<meta charset="UTF-8">
UTF-8 підтримує українські символи.
Зверни увагу!
Цей тег повинен йти якомога вище (бажано першим після відкриття), щоб браузер дізнався про кодування ще до того, як почне читати заголовок сторінки чи інший текст.
Приклад:
<head>
<meta charset="UTF-8">
<title>Моя сторінка</title>
</head>
<body>
<h1>Привіт, світе!</h1>
</body>
</html>
Отже, HTML — створює структуру, CSS — відповідає за вигляд. Разом вони створюють повноцінну вебсторінку.
Джерела:
Інформатика: підручник для 8 кл.закл.загальн.середн. освіти/ Джон Ендрю Біос.-К.:видавниутво "Лінгвіст", 2025.