Повторення 1
Тема 1 "Веб-сторінка".
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | Базова структура сайту | | Кожна сторінка має основу (html, head, body). |
| 2 | Назва сторінки | | <title> задає назву у вкладці браузера. |
| 3 | Абзаци | | Кожен <p> — окремий блок тексту з відступом. |
| 4 | Перенесення рядка | | <br> переносить текст, але не створює відступів. |
| 5 | Рухомий текст (застарілий) | | <marquee> більше не використовується, замінюється CSS-анімаціями. |
| 6 | Заголовки | | <h1> — головний, найбільший заголовок (назва сторінки). <h2> — підзаголовки другого рівня. <h3> – <h6> — дрібніші заголовки, для деталізації структури. |
Тема 2 "Форматування тексу".
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | Вирівнювання тексту | | Атрибут align дозволяє розташувати текст: зліва (left), справа (right) або по центру (center). |
| 2 | Жирний і курсив | | <b> робить текст жирним, <i> — курсивним. |
| 3 | Підкреслений та перекреслений текст | | <u> підкреслює, <s> перекреслює текст. |
| 4 | Верхні та нижні індекси | | <sub> робить індекс знизу, <sup> робить індекс зверху. |
| 5 | Базова структура сайту зі style | | Щоб задати певному елементу стиль, потрібно використати тег <style> всередині тегу <head>. |
| 6 | Зміна кольору абзацу | | За допомогою CSS можна змінювати зовнішній вигляд елементів. В даному випадку для всіх <p> у стилях задано властивість color: red;, тому абзаци відображаються червоним. |
Тема 3 "Введення в CSS".
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | Використання class | | Атрибут class дає ім’я елементу (наприклад, game). У CSS через крапку .game ми описуємо, як цей клас буде виглядати. |
| 2 | Сімейство шрифтів | | Властивість font-family змінює шрифт. Якщо першого немає, браузер вибирає запасний. |
| 3 | Розмір тексту | | font-size задає розмір тексту (наприклад px, em, %, rem). |
| 4 | Насиченість шрифтів | | font-weight робить текст жирним (bold) або задає ступінь насиченості. Значення встановлюється від 100 до 900 з кроком по 100. |
Тема 4 "Списки та лінії".
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | Марковані та нумеровані списки (ol, ul, li) | | ul створює маркований список, ol – нумерований. Кожен пункт у списку записується через li. |
| 2 | Типи маркерів у списках (type) (Марковані списки) | | Для маркованих списків (ul) атрибут type задає форму маркера: – disc – заповнене коло (●, стандартний варіант); – circle – порожнє коло (○); – square – квадрат (■). |
| 3 | Типи маркерів у списках (type) (Нумеровані списки) | | Для нумерованих списків (ol) атрибут type визначає стиль нумерації: – 1 – числа (1, 2, 3...); – A – великі літери (A, B, C...); – a – маленькі літери (a, b, c...); – I – римські цифри великі (I, II, III...); – i – римські цифри малі (i, ii, iii...). |
| 4 | Властивість list-style | | Властивість list-style визначає вигляд маркерів у списку. Можна задати значення none, щоб видалити маркери повністю. |
| 5 | Фон елементу (background-color, background) | | background-color задає колір фону. background може одночасно задавати колір, картинку та інші параметри.background-color задає колір фону елемента. Можна застосовувати до будь-якого тегу - наприклад, до body, h1, p і т.п.. background дозволяє одночасно задавати колір, зображення, позицію й повторення. |
| 6 | Ширина і висота (width, height) | | width задає ширину, height – висоту елемента. Можна використовувати px, %, em тощо. |
| 7 | Горизонтальна лінія (hr) | | Тег hr створює горизонтальну лінію. Її можна змінювати: задати height (товщину), background / background-color (колір). |
Тема 5 "Розміщення зображень".
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | Вставка зображення за допомогою тегу <img> | | <img> вставляє зображення в HTML. Атрибути: src – шлях до картинки, alt – опис |
| 2 | Розмір зображення (width, height) | | width і height задають ширину і висоту картинки. Якщо вказати один – інший масштабується автоматично. |
| 3 | Вирівнювання зображення (align) | | left – вирівнювання по лівому краю, текст обтікає з правої; right – вирівнювання по правому краю, текст обтікає з лівої; middle – по вертикалі по середині тексту; top – верхній край картинки вирівнюється з верхнім краєм тексту; bottom – нижній край картинки вирівнюється з базовою лінією тексту. |
| 4 | Використання зображення як фон (background-image) | | background-image задає фон для елемента. |
| 5 | Повторення фонового зображення (background-repeat) | | repeat – повторюється по горизонталі і вертикалі; no-repeat – не повторюється; repeat-x – тільки горизонтально; repeat-y – тільки вертикально; space – повторюється стільки разів, скільки вміститься, з рівномірним простором; round – зменшується або збільшується для цілих копій без обрізання. |
| 6 | Рамка зображення (border) | | border задає товщину, стиль і колір рамки. |
| 7 | Заокруглення кутів зображення (border-radius) | | border-radius заокруглює кути у px або % для створення округлих кутів. |
| 8 | Перенос рядка та скидання обтікання (<br clear="all">) | | <br clear="all"> використовується для примусового перенесення тексту нижче елементів, що вирівняні зліва або справа (знімає обтікання). |
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC
WebUniverse