translation(HTML): web/html/element/area

files/uk/web/html/element/area/index.md

@@ -0,0 +1,174 @@
+---
+title: "<area> – Елемент області на карті зображення"
+slug: Web/HTML/Element/area
+page-type: html-element
+browser-compat: html.elements.area
+---
+
+{{HTMLSidebar}}
+
+Елемент [HTML](/uk/docs/Web/HTML) **`<area>`** (область) визначає область всередині карти зображення, що має наперед визначені області для клацання. _Карта зображення_ дозволяє зв'язувати геометричні області на зображенні з {{Glossary("Hyperlink", "гіпертекстовими посиланнями")}}.
+
+Цей елемент використовується лише всередині елемента {{HTMLElement("map")}}.
+
+{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
+
+## Атрибути
+
+Серед атрибутів цього елемента присутні [глобальні атрибути](/uk/docs/Web/HTML/Global_attributes).
+
+- `alt`
+  - : Альтернативний рядок тексту, для виведення у браузерах, що не виводять зображення.
+    Цей текст повинен бути виражений так, щоб представляти користувачам вибір такого ж роду, як і зображення, коли воно відображається без альтернативного тексту.
+    Цей атрибут є обов'язковим лише тоді, коли вжито атрибут [`href`](#href).
+- `coords`
+
+  - : Атрибут `coords` визначає координати атрибута [`shape`](#shape) щодо розміру, форми та розташування елемента `<area>`.
+    Цей атрибут не повинен використовуватися, якщо `shape` має значення `default`.
+
+    - `rect`: значення – `x1,y1,x2,y2`.
+      Це значення задає координати верхнього лівого та нижнього правого кутів прямокутника.
+      Наприклад, у `<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="WebDoky">` ці координати – `0,0` та `253,27`, що вказує на верхній лівий та нижній правий кути прямокутника відповідно.
+    - `circle`: значення – `x,y,radius`. Це значення задає координати центру кола та його радіус.
+      Наприклад: `<area shape="circle" coords="130,136,60" href="#" target="_blank" alt="WebDoky">`.
+    - `poly`: значення – `x1,y1,x2,y2,..,xn,yn`. Це значення визначає координати країв багатокутника.
+      Якщо перша та остання пари координат не є однаковими, браузер додасть останню пару координат, щоб закрити багатокутник.
+
+    Ці значення – числа пікселів CSS.
+
+- `download`
+  - : Цей атрибут, якщо він є, позначає те, що автор має намір використовувати гіперпосилання для завантаження ресурсу.
+    Дивіться повний опис атрибута [`download`](/uk/docs/Web/HTML/Element/a#download) на сторінці {{HTMLElement("a")}}.
+- `href`
+  - : Ціль гіперпосилання області.
+    Значення – дійсний URL.
+    Цей атрибут можна пропустити; якщо він пропущений, то цей елемент `<area>` не представляє гіперпосилання.
+- `hreflang` {{Deprecated_Inline}}
+  - : Позначає мову сполученого ресурсу. Дозволені значення визначені в {{RFC(5646, "Тегах для визначення мов (також відомих як BCP 47)")}}.
+    Цей атрибут слід використовувати лише тоді, коли присутній атрибут [`href`](#href).
+- `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).
+
+    > **Примітка:** Задання на елементах `<area>` `target="_blank"` неявно задає таку ж логіку `rel`, як задання [`rel="noopener"`](/uk/docs/Web/HTML/Attributes/rel/noopener), який не задає `window.opener`. Дивіться статус підтримки у [Сумісності з браузерами](#sumisnist-iz-brauzeramy).
+
+### Нерекомендовані атрибути
+
+- `name` {{deprecated_inline}}
+  - : Визначає назви для області клацання, щоб її могли обробляти сценарії в старих браузерах.
+- `nohref` {{deprecated_inline}}
+
+  - : Позначає, що для пов'язаної області не існує гіперпосилання.
+
+    > **Примітка:** В атрибуті `nohref` немає потреби, адже достатньо пропустити атрибут `href`.
+
+## Приклади
+
+```html
+<map name="primary">
+  <area
+    shape="circle"
+    coords="75,75,75"
+    href="left.html"
+    alt="Клацнути, щоб піти ліворуч" />
+  <area
+    shape="circle"
+    coords="275,75,75"
+    href="right.html"
+    alt="Клацнути, щоб піти праворуч" />
+</map>
+<img
+  usemap="#primary"
+  src="https://via.placeholder.com/350x150"
+  alt="350 x 150 pic" />
+```
+
+### Результат
+
+{{EmbedLiveSample('pryklady', 360, 160)}}
+
+## Технічний підсумок
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/uk/docs/Web/HTML/Content_categories">Категорії вмісту</a>
+      </th>
+      <td>
+        <a href="/uk/docs/Web/HTML/Content_categories#potokovyi-vmist">Потоковий вміст</a>,
+        <a href="/uk/docs/Web/HTML/Content_categories#opovidalnyi-vmist">оповідальний вміст</a>.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Дозволений вміст</th>
+      <td>Жодного; це {{Glossary("void element", "пустий елемент")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Пропуск тегів</th>
+      <td>Повинен мати початковий тег і не мати кінцевого.</td>
+    </tr>
+    <tr>
+      <th scope="row">Дозволені батьківські елементи</th>
+      <td>
+        Будь-які елементи, що приймають <a href="/uk/docs/Web/HTML/Content_categories#opovidalnyi-vmist">оповідальний вміст</a>. Елемент <code>&#x3C;area></code> повинен мати предка {{HTMLElement("map")}}, але він не обов'язково повинен бути безпосереднім батьком.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Неявна роль ARIA</th>
+      <td>
+        <a href="/uk/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a>, коли є атрибут <a href="/uk/docs/Web/HTML/Element/area#href"><code>href</code></a>, інакше – <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">немає відповідної ролі</a>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Дозволені ролі ARIA</th>
+      <td>Немає дозволеної ролі</td>
+    </tr>
+    <tr>
+      <th scope="row">Інтерфейс DOM</th>
+      <td>{{domxref("HTMLAreaElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
+## Специфікації
+
+{{Specifications}}
+
+## Сумісність із браузерами
+
+{{Compat}}

uk_spelling_additions.txt

@@ -335,6 +335,7 @@
 співпрограми
 спрайтових
 стекоподібна
+сторінки-посилача
 субмілісекундною
 тега
 Терлсон