diff --git a/files/uk/web/html/element/area/index.md b/files/uk/web/html/element/area/index.md new file mode 100644 index 0000000000..c6f603b624 --- /dev/null +++ b/files/uk/web/html/element/area/index.md @@ -0,0 +1,161 @@ +--- +title: " – Елемент області на карті зображення" +slug: Web/HTML/Element/area +page-type: html-element +browser-compat: html.elements.area +--- + +{{HTMLSidebar}} + +Елемент [HTML](/uk/docs/Web/HTML) **``** (область) визначає область всередині карти зображення, що має наперед визначені області для клацання. _Карта зображення_ дозволяє зв'язувати геометричні області на зображенні з {{Glossary("Hyperlink", "гіпертекстовими посиланнями")}}. + +Цей елемент використовується лише всередині елемента {{HTMLElement("map")}}. + +{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}} + +## Атрибути + +Серед атрибутів цього елемента присутні [глобальні атрибути](/uk/docs/Web/HTML/Global_attributes). + +- `alt` + - : Альтернативний рядок тексту, для виведення у браузерах, що не виводять зображення. + Цей текст повинен бути виражений так, щоб представляти користувачам вибір такого ж роду, як і зображення, коли воно відображається без альтернативного тексту. + Цей атрибут є обов'язковим лише тоді, коли вжито атрибут [`href`](#href). +- `coords` + + - : Атрибут `coords` визначає координати атрибута [`shape`](#shape) щодо розміру, форми та розташування елемента ``. + Цей атрибут не повинен використовуватися, якщо `shape` має значення `default`. + + - `rect`: значення – `x1,y1,x2,y2`. + Це значення задає координати верхнього лівого та нижнього правого кутів прямокутника. + Наприклад, у `WebDoky` ці координати – `0,0` та `253,27`, що вказує на верхній лівий та нижній правий кути прямокутника відповідно. + - `circle`: значення – `x,y,radius`. Це значення задає координати центру кола та його радіус. + Наприклад: `WebDoky`. + - `poly`: значення – `x1,y1,x2,y2,..,xn,yn`. Це значення визначає координати країв багатокутника. + Якщо перша та остання пари координат не є однаковими, браузер додасть останню пару координат, щоб закрити багатокутник. + + Ці значення – числа пікселів CSS. + +- `download` + - : Цей атрибут, якщо він є, позначає те, що автор має намір використовувати гіперпосилання для завантаження ресурсу. + Дивіться повний опис атрибута [`download`](/uk/docs/Web/HTML/Element/a#download) на сторінці {{HTMLElement("a")}}. +- `href` + - : Ціль гіперпосилання області. + Значення – дійсний URL. + Цей атрибут можна пропустити; якщо він пропущений, то цей елемент `` не представляє гіперпосилання. +- `ping` + - : Вміщає розділений комами список URL, до яких, коли гіперпосилання використано, браузер відправить (в фоновому режимі) запити {{HTTPMethod("POST")}} з тілом `PING`. + Зазвичай використовується для відстеження. +- `referrerpolicy` + + - : Рядок, що позначає те, якого посилача використовувати при отриманні ресурсу: + + - `no-referrer`: Заголовок {{HTTPHeader("Referer")}} не буде надіслано. + - `no-referrer-when-downgrade`: Заголовок {{HTTPHeader("Referer")}} не буде надіслано до {{Glossary("origin", "походжень")}} без {{Glossary("TLS")}} ({{Glossary("HTTPS")}}). + - `origin`: Надісланий посилач буде обмежений до походження сторінки-посилача: її [схеми](/uk/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL), {{Glossary("host", "хоста")}} та {{Glossary("port", "порту")}}. + - `origin-when-cross-origin`: Посилач, надісланий іншим походженням, буде обмежений схемою, хостом і портом. Переходи в межах того ж самого походження включатимуть в посилач увесь шлях. + - `same-origin`: Посилач буде надісланий в межах {{Glossary("Same-origin policy", "того самого походження")}}, а запити до інших походжень не міститимуть інформації про посилача. + - `strict-origin`: Надсилати походження документа як посилача, коли рівень безпеки протоколу залишається таким самим (HTTPS→HTTPS), але не надсилати його менш безпечному призначенню (HTTPS→HTTP). + - `strict-origin-when-cross-origin` (усталене): Надсилати повний URL при виконанні запитів за тим самим походженням, надсилати лише походження, коли рівень протоколу безпеки залишається таким самим (HTTPS→HTTPS), і не надсилати заголовок менш безпечному призначенню (HTTPS→HTTP). + - `unsafe-url`: Посилач уміщатиме походження _та_ шлях (але не [фрагмент](/uk/docs/Web/API/HTMLAnchorElement/hash), не [пароль](/uk/docs/Web/API/HTMLAnchorElement/password) і не [ім'я користувача](/uk/docs/Web/API/HTMLAnchorElement/username)). + **Це значення є небезпечним**, оскільки воно випускає походження та шляхи з ресурсів, захищених TLS, до незахищених походжень. + +- `rel` + - : Для якорів, що вміщають атрибут [`href`](#href), цей атрибут визначає відношення об'єкта-цілі до об'єкта-посилання. + Значення – список типів посилань, розділених пробілами. + Значення та їхня семантика реєструються певним органом, що може мати значення для автора документа. + Усталене відношення, якщо не задано іншого, – пусте. Цей атрибут слід використовувати лише тоді, коли присутній атрибут [`href`](#href). +- `shape` + - : Форма пов'язаної активної ділянки. Специфікації HTML визначають значення `rect`, що визначає прямокутну область; `circle`, що визначає кругову область; `poly`, що визначає багатокутник; та `default`, що позначає всю область поза будь-якими визначеними формами. +- `target` + + - : Ключове слово або визначена автором назва {{Glossary("browsing context", "контексту перегляду")}} для виведення сполученого ресурсу. + Наступні ключові слова мають особливі значення: + + - `_self` (усталене): Показати ресурс у поточному контексті перегляду. + - `_blank`: Показати ресурс у новому, безіменному контексті перегляду. + - `_parent`: Показати ресурс у контексті перегляду, що є батьківським відносно поточного, якщо поточна сторінка знаходиться всередині фрейму. + Якщо батьківського контексту немає, то це значення працює так само, як `_self`. + - `_top`: Показати ресурс у контексті перегляду найвищого рівня (контексті перегляду, що є предком поточного та не має батьківського контексту). + Якщо батьківського контексту немає, то це значення працює так само, як `_self`. + + Цей атрибут слід використовувати лише тоді, коли присутній атрибут [`href`](#href). + + > **Примітка:** Задання на елементах `` `target="_blank"` неявно задає таку ж логіку `rel`, як задання [`rel="noopener"`](/uk/docs/Web/HTML/Attributes/rel/noopener), який не задає `window.opener`. Дивіться статус підтримки у [Сумісності з браузерами](#sumisnist-iz-brauzeramy). + +## Приклади + +```html + + Клацнути, щоб піти ліворуч + Клацнути, щоб піти праворуч + +350 x 150 pic +``` + +### Результат + +{{EmbedLiveSample('pryklady', 360, 160)}} + +## Технічний підсумок + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Категорії вмісту + + Потоковий вміст, + оповідальний вміст. +
Дозволений вмістЖодного; це {{Glossary("void element", "пустий елемент")}}.
Пропуск тегівПовинен мати початковий тег і не мати кінцевого.
Дозволені батьківські елементи + Будь-які елементи, що приймають оповідальний вміст. Елемент <area> повинен мати предка {{HTMLElement("map")}}, але він не обов'язково повинен бути безпосереднім батьком. +
Неявна роль ARIA + link, якщо присутній атрибут href, інакше – generic +
Дозволені ролі ARIAНемає дозволеної ролі
Інтерфейс DOM{{domxref("HTMLAreaElement")}}
+ +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt index 3d4a097ded..b797ec9013 100644 --- a/uk_spelling_additions.txt +++ b/uk_spelling_additions.txt @@ -380,6 +380,7 @@ співпрограми спрайтових стекоподібна +сторінки-посилача сторінці-посилачі сторінці-посилачу субмілісекундною