HTML і CSS
Практичний посібник з HTML і CSS для початківців: структура вебсторінки, теги, посилання, списки, якорі, рамки, роздільники та сучасні приклади оформлення.
- Деталі
- Час читання: 4 хв
- Перегляди: 24
Колір посилання сьогодні задають через CSS, а не через застарілі атрибути HTML. При цьому важливо оформити не лише звичайний стан, а й взаємодію: відвідане посилання, наведення миші, клавіатурний фокус і момент активації. Хороше посилання має залишатися впізнаваним і водночас відповідати дизайну сайту. Самого лише кольору не завжди достатньо, тому після видалення стандартного підкреслення потрібно дати користувачеві іншу зрозумілу візуальну…
- Деталі
- Час читання: 4 хв
- Перегляди: 25
Щоб попросити браузер відкрити посилання в новому контексті перегляду, в HTML використовують target="_blank". На практиці браузер найчастіше створює нову вкладку, хоча налаштування користувача можуть змінити цю поведінку. Технічно додати атрибут просто. Значно важливіше вирішити, коли нова вкладка справді допомагає читачеві, що відбувається з window.opener і чому не варто змушувати всі внутрішні посилання відкриватися окремо. Читати далі...…
- Деталі
- Час читання: 6 хв
- Перегляди: 118
Ефект, за якого поруч із посиланням з’являється зображення, можна реалізувати без JavaScript — через CSS-позиціювання та стани :hover і :focus. Такий прийом підходить для необов’язкового прев’ю: наприклад, мініатюри товару, ілюстрації терміна або додаткової підказки. Але сучасний варіант має працювати не лише з мишею. Клавіатурний фокус, сенсорні екрани, межі viewport і доступність важливі не менше, ніж сам ефект появи. Нижче — робочий приклад і…
- Деталі
- Час читання: 4 хв
- Перегляди: 37
HTML — основа структури вебсторінки. Він описує, де знаходиться заголовок, абзац, посилання, зображення, список, форма або інший елемент, а браузер на основі цієї розмітки будує документ, який потім оформлюється CSS і за потреби отримує інтерактивну поведінку за допомогою JavaScript. HTML не є мовою програмування: у ньому немає звичайної моделі обчислень, умов і циклів. Це мова розмітки, завдання якої — описувати структуру та зміст контенту так,…
- Деталі
- Час читання: 5 хв
- Перегляди: 21
HTML будується з елементів, які задають структуру та зміст документа. У розмовній мові їх часто називають «тегами», хоча технічно тег — це лише частина запису елемента: наприклад, <p> і </p> є тегами, а весь фрагмент разом із вмістом — HTML-елементом. Для початківця ця різниця не критична, але важливо розуміти сучасну модель: одні елементи містять текст або інші елементи, інші є void-елементами без вмісту, а семантичний тег потрібно вибирати за…
- Деталі
- Час читання: 4 хв
- Перегляди: 17
Горизонтальний роздільник можна зробити кількома способами, але вибір залежить від змісту. Тег <hr> у сучасному HTML позначає тематичний перехід між фрагментами контенту, а суто декоративну лінію частіше зручніше малювати засобами CSS — наприклад, через border-top або псевдоелемент. Старі атрибути align, color, noshade, size і width для hr належать до застарілого презентаційного підходу. Зовнішній вигляд роздільника сьогодні задають CSS. Читати…