Autor publikacji
Virtual Patriot - Administrator

area

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu area

Gdy element area posiada atrybut href, wtedy element area reprezentuje jeden klikalny obszar na mapie klikalnych obszarów reprezentowanej przez element map, do którego należy dany element area.

Gdy element area nie posiada atrybutu href, wtedy element area reprezentuje jeden martwy obszar na mapie klikalnych obszarów reprezentowanej przez element map, do którego należy dany element area.

Dodatkowe artykuły związane z elementem area

Informacje techniczne o elemencie area

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst frazowany, lecz tylko wtedy gdy jednym z elementów przodków danego elementu area jest element map lub element template

Przykładowy Kod HTML

<figure>
  <map name="mapa-1">
    <area href="figura-1.html" shape="rect" coords="0,0,100,50" alt="prostokąt">
    <a href="figura-1.html">zobacz więcej informacji o prostokącie</a>
  </map>

  <img src="figury-geometryczne.png" usemap="#mapa-1" alt="mapa klikalnych obszarów - figury geometryczne">
  <figcaption>Figury geometryczne</figcaption>
</figure>

Kontekstem zewnętrznym przykładowego elementu "area" jest element "map". Wspomniany element "map" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, jak również wspomniany element "map" jest jednym z elementów przodków wspomnianego elementu "area", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "map", jest prawidłowym kontekstem zewnętrznym dla elementu "area".

Przykładowy Kod HTML

<figure>
  <map name="mapa-1">
    <div lang="en">
      <area href="figure-1.html" shape="rect" coords="0,0,100,50" alt="rectangle">
      <area href="figure-2.html" shape="rect" coords="150,150,300,300" alt="square">
      <area href="figure-3.html" shape="circle" coords="500,500,100" alt="circle">
    </div>

    <a href="figury-geometryczne-pl.html">zobacz również wersję w języku polskim</a>
  </map>

  <img src="figury-geometryczne.png" usemap="#mapa-1" alt="mapa klikalnych obszarów - figury geometryczne">
  <figcaption>Figury geometryczne</figcaption>
</figure>

Kontekstem zewnętrznym przykładowych elementów "area" jest element "div". Wspomniany element "div" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany. Ponadto jednym z elementów przodków wspomnianych elementów "area" jest element "map", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "div", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "area".

Przykładowy Kod HTML

<template id="szablon-1">
  <div lang="en">
    <area href="figure-1.html" shape="rect" coords="0,0,100,50" alt="rectangle">
    <area href="figure-2.html" shape="rect" coords="150,150,300,300" alt="square">
    <area href="figure-3.html" shape="circle" coords="500,500,100" alt="circle">
  </div>
</template>

Kontekstem zewnętrznym przykładowych elementów "area" jest element "div". Wspomniany element "div" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany. Ponadto jednym z elementów przodków wspomnianych elementów "area" jest element "template", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "div", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "area".

kontekst wewnętrzny

brak

wymagane elementy dzieci

brak

wymagane atrybuty

atrybut alt, lecz tylko wtedy gdy dany element area posiada atrybut href

zdolność fallback

nie dotyczy

składnia HTML

<area>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

none

Przypuszczalnie domyślne reguły CSS elementu area

area {
  display:none;
}

Interpretacja elementu area

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Nie interpretuje atrybutu download oraz referrerpolicy.

Nie interpretuje wartości noopener atrybutu rel.

Edge

tak

Opis atrybutów elementu area

Atrybut Lokalny

alt

Przeznaczenie atrybutu alt

Atrybut alt wykorzystany wraz z elementem area pozwala nam określić treść alternatywną (zamienną) w postaci tekstu, jaki powinien pełnić rolę opisującą zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Atrybut "alt" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Atrybut "alt" jest atrybutem wymaganym elementu "area", lecz tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu alt

tekst

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas treści alternatywnej w postaci tekstu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="poly" coords="16,69,200,28,180,214" alt="opis elementu - object">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - object mapa z jednym klikalnym obszarem

Treścią alternatywną zasobu internetowego "element-object", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", jest treść alternatywna w postaci tekstu "opis elementu - object", ponieważ do wspomnianego elementu "area" został dodany atrybut "alt" wraz z wartością "opis elementu - object".

Atrybut Lokalny

coords

Przeznaczenie atrybutu coords

Atrybut coords wykorzystany wraz z elementem area pozwala nam określić wartości składników, jakie powinny tworzyć kształt klikalnego obszaru reprezentowanego przez dany element area.

Atrybut "coords" ma sens tylko wtedy gdy wartością atrybutu shape danego elementu "area" jest wartość inna niż wartość default.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu coords

wzór: x1,y1,x2,y2

Według zdefiniowanego wzorca wartości możemy określić prostokątny kształt dla klikalnego obszaru reprezentowanego przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-2">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-video" shape="rect" coords="172,23,279,130" alt="opis elementu - video">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-2" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - video mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" został utworzony na podstawie wartości "172,23,279,130", ponieważ do wspomnianego elementu "area" został dodany atrybut "coords" wraz z wartością "172,23,279,130".

Docelowy wzorzec wartości ma sens tylko wtedy gdy wartością atrybutu shape danego elementu "area" jest wartość rect.

Wyjaśnienie wzorca wartości

Przykładowe zapisy
  • 20,40,120,140
  • 0,0,150,150
  • 150,200,500,400
x1

Składnik x1 danego wzorca wartości określa, względem poziomu oraz względem lewej krawędzi obrazka, wartość pierwszej współrzędnej pierwszego punktu kontrolnego, na podstawie którego ma powstać prostokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

y1

Składnik y1 danego wzorca wartości określa, względem pionu oraz względem górnej krawędzi obrazka, wartość drugiej współrzędnej pierwszego punktu kontrolnego, na podstawie którego ma powstać prostokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

x2

Składnik x2 danego wzorca wartości określa, względem poziomu oraz względem lewej krawędzi obrazka, wartość pierwszej współrzędnej drugiego punktu kontrolnego, na podstawie którego ma powstać prostokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

y2

Składnik y2 danego wzorca wartości określa, względem pionu oraz względem górnej krawędzi obrazka, wartość drugiej współrzędnej drugiego punktu kontrolnego, na podstawie którego ma powstać prostokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

wzorzec graficzny - kształt prostokąta

Na grafice - prostokątny kształt klikalnego obszaru w praktyce.
wzór: x,y,r

Według zdefiniowanego wzorca wartości możemy określić okrągły kształt dla klikalnego obszaru reprezentowanego przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-3">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="circle" coords="74,227,56" alt="opis elementu - object">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-3" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - object mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" został utworzony na podstawie wartości "74,227,56", ponieważ do wspomnianego elementu "area" został dodany atrybut "coords" wraz z wartością "74,227,56".

Docelowy wzorzec wartości ma sens tylko wtedy gdy wartością atrybutu shape danego elementu "area" jest wartość circle.

Wyjaśnienie wzorca wartości

Przykładowe zapisy
  • 50,100,75
  • 0,0,100
  • -25,-25,150
x

Składnik x danego wzorca wartości określa, względem poziomu oraz względem lewej krawędzi obrazka, wartość pierwszej współrzędnej punktu środka koła, na podstawie którego ma powstać okrągły kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

y

Składnik y danego wzorca wartości określa, względem pionu oraz względem górnej krawędzi obrazka, wartość drugiej współrzędnej punktu środka koła, na podstawie którego ma powstać okrągły kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

r

Składnik r danego wzorca wartości określa długość promienia koła, na podstawie którego ma powstać okrągły kształt klikalnego obszaru.

Dostępne wartości

dowolna nieujemna liczba całkowita

Wartość domyślna

brak

wzorzec graficzny - kształt koła

Na grafice - okrągły kształt klikalnego obszaru w praktyce.
wzór: x1,y1,x2,y2,x3,y3

Według zdefiniowanego wzorca wartości możemy określić wielokątny kształt dla klikalnego obszaru reprezentowanego przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-4">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-audio" shape="poly" coords="19,26,19,130,129,130" alt="opis elementu - audio">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-4" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - audio mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" został utworzony na podstawie wartości "19,26,19,130,129,130", ponieważ do wspomnianego elementu "area" został dodany atrybut "coords" wraz z wartością "19,26,19,130,129,130".

Docelowy wzorzec wartości ma sens tylko wtedy gdy wartością atrybutu shape danego elementu "area" jest wartość poly.

Wyjaśnienie wzorca wartości

Informacje dodatkowe

możemy podać więcej niż trzy pary współrzędnych, dzięki czemu możemy definiować bardziej skomplikowane wielokąty

Przykładowe zapisy
  • 10,20,20,120,140,130
  • -30,30,120,-50,50,150
  • 10,20,20,120,140,130,150,200
  • 10,20,20,120,140,130,150,200,100,220
x1

Składnik x1 danego wzorca wartości określa, względem poziomu oraz względem lewej krawędzi obrazka, wartość pierwszej współrzędnej pierwszego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

y1

Składnik y1 danego wzorca wartości określa, względem pionu oraz względem górnej krawędzi obrazka, wartość drugiej współrzędnej pierwszego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

x2

Składnik x2 danego wzorca wartości określa, względem poziomu oraz względem lewej krawędzi obrazka, wartość pierwszej współrzędnej drugiego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

y2

Składnik y2 danego wzorca wartości określa, względem pionu oraz względem górnej krawędzi obrazka, wartość drugiej współrzędnej drugiego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

x3

Składnik x3 danego wzorca wartości określa, względem poziomu oraz względem lewej krawędzi obrazka, wartość pierwszej współrzędnej trzeciego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

y3

Składnik y3 danego wzorca wartości określa, względem pionu oraz względem górnej krawędzi obrazka, wartość drugiej współrzędnej trzeciego punktu kontrolnego, na podstawie którego ma powstać wielokątny kształt klikalnego obszaru.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

brak

wzorzec graficzny - kształt wielokąta w postaci trójkąta

Na grafice - wielokątny kształt klikalnego obszaru (w postaci trójkąta) w praktyce.

wzorzec graficzny - kształt wielokąta

Na grafice - wielokątny kształt klikalnego obszaru (w postaci pięciokąta) w praktyce.

Atrybut Lokalny

download

Przeznaczenie atrybutu download

Atrybut download wykorzystany wraz z elementem area pozwala nam określić nazwę, jaką powinien posiadać zasób internetowy, który od tej pory może zostać pobrany na nasze urządzenie końcowe za pośrednictwem klikalnego obszaru reprezentowanego przez dany element area.

Atrybut "download" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu download

nazwa

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-5">
      <area href="https://webkod.pl/files/html/plik-01.rar" download="plik rar - zdjęcie lwa.rar" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby pobrać zdjęcie lwa na własne urządzenie końcowe">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-5" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby pobrać zdjęcie lwa na własne urządzenie końcowe mapa z jednym klikalnym obszarem

Ponieważ do przykładowego elementu "area" został dodany atrybut "download" wraz z wartością "plik rar - zdjęcie lwa.rar", zasób internetowy "plik-01.rar", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", od tej pory może zostać pobrany na nasze urządzenie końcowe za pośrednictwem klikalnego obszaru reprezentowanego przez wspomniany element "area", dodatkowo po pobraniu na nasze urządzenie końcowe zasób internetowy "plik-01.rar" będzie posiadał nazwę "plik rar - zdjęcie lwa.rar".

Atrybut Lokalny

href

Przeznaczenie atrybutu href

Atrybut href wykorzystany wraz z elementem area pozwala nam określić adres zasobu internetowego, do którego chcemy, aby prowadził klikalny obszar reprezentowany przez dany element area.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu href

URL

Należy podać ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-6">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="poly" coords="16,69,200,28,180,214" alt="opis elementu - object">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-6" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - object mapa z jednym klikalnym obszarem

Zasobem internetowym, do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", jest zasób internetowy "element-object" znajdujący się pod adresem "https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object", ponieważ do wspomnianego elementu "area" został dodany atrybut "href" wraz z wartością "https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object".

Atrybut Lokalny

hreflang

Przeznaczenie atrybutu hreflang

Atrybut hreflang wykorzystany wraz z elementem area pozwala nam określić informację o języku, jaki posiada zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Atrybut "hreflang" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu hreflang

symbol języka

Należy podać ciąg znaków w formie symbolu języka (Norma ISO 639-1).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-7">
      <area href="https://www.w3.org/TR/html52/tabular-data.html" hreflang="en" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć listę elementów HTML tworzących tabelę HTML - wersja angielska">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-7" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby zobaczyć listę elementów HTML tworzących tabelę HTML - wersja angielska mapa z jednym klikalnym obszarem

Ponieważ do przykładowego elementu "area" został dodany atrybut "hreflang" wraz z wartością "en", przykładowy element "area" reprezentujący klikalny obszar prowadzący do zasobu internetowego "tabular-data.html" zawiera dodatkową informację dla przeglądarki internetowej o tym, że językiem, jaki posiada zasób internetowy "tabular-data.html", jest język angielski.

Atrybut Lokalny

referrerpolicy

Przeznaczenie atrybutu referrerpolicy

Atrybut referrerpolicy wykorzystany wraz z elementem area pozwala nam określić, jakie składniki adresu danego dokumentu HTML może posiadać informacja, która zostanie przekazana przez przeglądarkę internetową do serwera, na którym znajduje się zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Mowa tu o takich składnikach adresu danego dokumentu HTML jak:

  • typ protokołu (np. https)
  • nazwa serwera (np. www.webkod.pl)
  • numer portu (np. 8080)
  • ścieżka do pliku (np. pliki/obrazki/lew.png)
  • zapytanie (np. ?imie=jan&nazwisko=kowalski)

Docelowe przekazanie informacji o adresie danego dokumentu HTML odbywa się za pomocą nagłówka referer w momencie gdy użytkownik kliknie na klikalny obszar reprezentowany przez dany element area.

Atrybut "referrerpolicy" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

no-referrer-when-downgrade (w każdej sytuacji) lub wartość atrybutu content elementu meta posiadającego atrybut name o wartości referrer, jeżeli taki element meta znajduje się w zawartości danego dokumentu HTML

Wartości atrybutu referrerpolicy

no-referrer

Wartość no-referrer oznacza, że informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl -
http://abc.pl/plik-strony http://abc.pl/inny-plik -
http://abc.pl/plik-strony?x=8 http://xyz.pl -
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl -
https://abc.pl/plik-strony https://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 https://xyz.pl -
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik -
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl -
http://abc.pl/plik-strony https://abc.pl/inny-plik -
http://abc.pl/plik-strony?x=8 https://xyz.pl -
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik -
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="http://inna-strona.pl" referrerpolicy="no-referrer" shape="poly" coords="16,69,200,28,180,214" alt="klikalny obszar">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area" znajdujący się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony", do serwera o nazwie "http://inna-strona.pl", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", nie zostanie przekazana żadna informacja o adresie "http://moja-strona.pl/plik-strony" dokumentu HTML, ponieważ do wspomnianego elementu "area" został dodany atrybut "referrerpolicy" wraz z wartością "no-referrer".

no-referrer-when-downgrade

Wartość no-referrer-when-downgrade oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

W sytuacji gdy adres danego dokumentu HTML posiada bardziej bezpieczny typ protokołu (np. https), a adres zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area, posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/plik-strony
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="http://inna-strona.pl" referrerpolicy="no-referrer-when-downgrade" shape="poly" coords="16,69,200,28,180,214" alt="klikalny obszar">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area" znajdujący się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", nie zostanie przekazana żadna informacja o adresie "https://moja-strona.pl/plik-strony?x=8" dokumentu HTML, ponieważ do wspomnianego elementu "area" został dodany atrybut "referrerpolicy" wraz z wartością "no-referrer-when-downgrade".

origin

Wartość origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony http://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik https://abc.pl/

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="http://inna-strona.pl" referrerpolicy="origin" shape="poly" coords="16,69,200,28,180,214" alt="klikalny obszar">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area" znajdujący się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "area" został dodany atrybut "referrerpolicy" wraz z wartością "origin".

origin-when-cross-origin

Wartość origin-when-cross-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie, lecz tylko wtedy gdy adres danego dokumentu HTML oraz adres zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area, będą posiadały ten sam typ protokołu, nazwę serwera oraz numer portu, w przeciwnym przypadku informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony http://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik https://abc.pl/

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="https://moja-strona.pl" referrerpolicy="origin-when-cross-origin" shape="poly" coords="16,69,200,28,180,214" alt="klikalny obszar">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area" znajdujący się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "https://moja-strona.pl", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "area" został dodany atrybut "referrerpolicy" wraz z wartością "origin-when-cross-origin".

same-origin

Wartość same-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

W sytuacji gdy adres danego dokumentu HTML oraz adres zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area, nie będą posiadały tego samego typu protokołu, nazwy serwera oraz numeru portu, wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl -
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl -
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl -
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl -
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl -
http://abc.pl/plik-strony https://abc.pl/inny-plik -
http://abc.pl/plik-strony?x=8 https://xyz.pl -
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik -
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="https://moja-strona.pl" referrerpolicy="same-origin" shape="poly" coords="16,69,200,28,180,214" alt="klikalny obszar">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area" znajdujący się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "https://moja-strona.pl", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "area" został dodany atrybut "referrerpolicy" wraz z wartością "same-origin".

strict-origin

Wartość strict-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

W sytuacji gdy adres danego dokumentu HTML posiada bezpieczny typ protokołu (np. https), a adres zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area, posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="http://inna-strona.pl" referrerpolicy="strict-origin" shape="poly" coords="16,69,200,28,180,214" alt="klikalny obszar">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area" znajdujący się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "area" został dodany atrybut "referrerpolicy" wraz z wartością "strict-origin".

strict-origin-when-cross-origin

Wartość strict-origin-when-cross-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie, lecz tylko wtedy gdy adres danego dokumentu HTML oraz adres zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area, będą posiadały ten sam typ protokołu, nazwę serwera oraz numer portu, w przeciwnym przypadku informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

W sytuacji gdy adres danego dokumentu HTML posiada bezpieczny typ protokołu (np. https), a adres zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area, posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="http://moja-strona.pl" referrerpolicy="strict-origin-when-cross-origin" shape="poly" coords="16,69,200,28,180,214" alt="klikalny obszar">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area" znajdujący się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://moja-strona.pl", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "area" został dodany atrybut "referrerpolicy" wraz z wartością "strict-origin-when-cross-origin".

unsafe-url

Wartość unsafe-url oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/plik-strony
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl https://abc.pl/plik-strony
https://abc.pl/plik-strony http://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 http://xyz.pl https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik https://abc.pl/plik-strony?x=8

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="http://inna-strona.pl" referrerpolicy="unsafe-url" shape="poly" coords="16,69,200,28,180,214" alt="klikalny obszar">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area" znajdujący się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "area" został dodany atrybut "referrerpolicy" wraz z wartością "unsafe-url".

Wartość "unsafe-url" obniża bezpieczeństwo naszej strony internetowej w sytuacji gdy nasza strona internetowa korzysta z zabezpieczenia TLS.

Atrybut Lokalny

rel

Przeznaczenie atrybutu rel

Atrybut rel wykorzystany wraz z elementem area pozwala nam określić relację pomiędzy dokumentem HTML, w którego zawartości znajduje się dany element area, a zasobem internetowym, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Atrybut "rel" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu rel

alternate

Wartość alternate oznacza, że dany dokument HTML posiada swój alternatywny odpowiednik w postaci zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </article>

    <footer>
      <map name="mapa-1">
        <area href="owoce.pdf" rel="alternate" shape="poly" coords="0,0,200,0,300,300" alt="owoce - wersja pdf">
      </map>

      Wersja PDF: <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="owoce - wersja pdf">.
    </footer>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "alternate", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "owoce.pdf", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area", jest alternatywnym zasobem internetowym danego dokumentu HTML.

author

Wartość author oznacza, że treść reprezentowana przez zawartość najbliższego elementu przodka będącego elementem article danego elementu area posiada swojego autora, o którym można dowiedzieć się więcej z zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Jeżeli element area nie posiada elementu przodka będącego elementem article, wtedy mowa tu o autorze danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

      <footer>
        <map name="mapa-1">
          <area href="wydawca-jan-kowalski.html" rel="author" shape="poly" coords="0,0,200,0,300,300" alt="informacje o wydawcy - Jan Kowalski">
        </map>

        Autor artykułu: <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="Jan Kowalski">.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "author", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść reprezentowana przez zawartość najbliższego elementu przodka będącego elementem "article" przykładowego elementu "area" posiada swojego autora, o którym można dowiedzieć się więcej z zasobu internetowego "wydawca-jan-kowalski.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area".

bookmark

Wartość bookmark oznacza, że treść reprezentowana przez zawartość najbliższego elementu przodka będącego elementem article danego elementu area jest treścią, do której odnosi się niezmienny oraz bezpośredni klikalny odnośnik (tzw. permalink) znajdujący się w zawartości zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Jeżeli element area nie posiada elementu przodka będącego elementem article, wtedy mowa tu o najbliższym elemencie przodku będącym elementem HTML tworzącym dowolną sekcję zawartości.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article id="ulubiony-owoc">
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

      <footer>
        <map name="mapa-1">
          <area href="ulubione-rosliny.html" rel="bookmark" shape="poly" coords="0,0,200,0,300,300" alt="moje ulubione rośliny">
        </map>

        Poznaj moje pozostałe <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="ulubione rośliny">.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "bookmark", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść reprezentowana przez zawartość najbliższego elementu przodka będącego elementem "article" przykładowego elementu "area" jest treścią, do której odnosi się niezmienny oraz bezpośredni klikalny odnośnik znajdujący się w zawartości zasobu internetowego "ulubione-rosliny.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area".

external

Wartość external oznacza, że dany dokument HTML nie należy do tej samej strony internetowej, co zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

      <footer>
        <map name="mapa-1">
          <area href="https://wikipedia.org/czeresnia.html" rel="external" shape="poly" coords="0,0,200,0,300,300" alt="charakterystyka czereśni">
        </map>

        Zobacz więcej informacji o <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="czereśni">.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "external", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML nie należy do strony internetowej "https://wikipedia.org", na której znajduje się zasób internetowy "czeresnia.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area".

help

Wartość help oznacza, że dla treści reprezentowanej przez zawartość elementu rodzica danego elementu area istnieją dodatkowe informacje pomocnicze, o których można dowiedzieć się więcej z zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>
        <map name="mapa-1">
          <area href="https://wikipedia.org/czeresnia.html" rel="help" shape="poly" coords="0,0,200,0,300,300" alt="charakterystyka czereśni">
        </map>

        Moim ulubionym owocem jest <b>czereśnia</b> (<img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="czereśnia?">).
      </p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "help", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dla treści reprezentowanej przez zawartość elementu rodzica przykładowego elementu "area" istnieją dodatkowe informacje pomocnicze, o których można dowiedzieć się więcej z zasobu internetowego "czeresnia.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area".

license

Wartość license oznacza, że treść główna danego dokumentu HTML reprezentowana przez zawartość elementu main opiera się na licencji, o której można dowiedzieć się więcej z zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
      </article>

      <p>
        <map name="mapa-1">
          <area href="licencja-mit.html" rel="license" shape="poly" coords="0,0,200,0,300,300" alt="szczegóły Licencji Mit">
        </map>

        <small>Artykuł znajdujący się na tej stronie internetowej opiera się na <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="Licencji Mit">.</small>
      </p>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "license", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść główna danego dokumentu HTML reprezentowana przez zawartość elementu "main" opiera się na licencji, o której można dowiedzieć się więcej z zasobu internetowego "licencja-mit.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area".

next

Wartość next oznacza, że dany dokument HTML jest częścią serii, natomiast zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area, jest następnym w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </article>

    <nav>
      <map name="mapa-1">
        <area href="warzywa.html" rel="prev" shape="poly" coords="0,0,200,0,300,300" alt="artykuł o warzywach">
        <area href="kwiaty.html" rel="next" shape="poly" coords="0,0,0,200,300,300" alt="artykuł o kwiatach">
      </map>

      <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="dodatkowa nawigacja">
    </nav>

  </body>
</html>

Ponieważ do drugiego przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "next", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML jest częścią serii, natomiast zasób internetowy "kwiaty.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area", jest następnym w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML.

nofollow

Wartość nofollow oznacza, że autor danego dokumentu HTML nie gwarantuje tego, że zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area, jest potwierdzonym, zaufanym, sprawdzonym zasobem internetowym.

Wartość nofollow może również oznaczać, że prowadzący do zasobu internetowego klikalny obszar reprezentowany przez dany element area został dodany do zawartości danego dokumentu HTML, ponieważ wynika to głównie z różnych komercyjnych umów pomiędzy przynajmniej dwoma osobami lub organizacjami.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

      <footer>
        <map name="mapa-1">
          <area href="https://wikipedia.org/czeresnia.html" rel="nofollow" shape="poly" coords="0,0,200,0,300,300" alt="charakterystyka czereśni">
        </map>

        Zobacz więcej informacji o <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="czereśni">.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "nofollow", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że autor danego dokumentu HTML nie gwarantuje tego, że zasób internetowy "czeresnia.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area", jest potwierdzonym, zaufanym, sprawdzonym zasobem internetowym.

noopener

Wartość noopener oznacza, że w momencie kliknięcia na klikalny obszar reprezentowany przez dany element area informacje o oknie przeglądarki internetowej, do którego został wczytany dany dokument HTML, nie będą zapamiętywane jako wartość właściwości opener obiektu window nowo utworzonego okna przeglądarki internetowej, do którego zostanie wczytany zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Mowa tu wyłącznie o elemencie area, którego wartością atrybutu target jest wartość _blank.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

      <footer>
        <map name="mapa-1">
          <area href="https://wikipedia.org/czeresnia.html" target="_blank" rel="noopener" shape="poly" coords="0,0,200,0,300,300" alt="charakterystyka czereśni">
        </map>

        Zobacz więcej informacji o <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="czereśni">.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "area" posiadającego atrybut "target" o wartości "_blank" został dodany atrybut "rel" wraz z wartością "noopener", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że w momencie kliknięcia na klikalny obszar reprezentowany przez przykładowy element "area" informacje o oknie przeglądarki internetowej, do którego został wczytany dany dokument HTML, nie powinny być zapamiętywane jako wartość właściwości "opener" obiektu "window" nowo utworzonego okna przeglądarki internetowej, do którego zostanie wczytany zasób internetowy "czeresnia.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area".

noreferrer

Wartość noreferrer oznacza, że w momencie kliknięcia na klikalny obszar reprezentowany przez dany element area informacja o adresie danego dokumentu HTML (tzw. informacja HTTP REFERER) nie będzie przekazywana przez przeglądarkę internetową do serwera, na którym znajduje się zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

      <footer>
        <map name="mapa-1">
          <area href="https://wikipedia.org/czeresnia.html" rel="noreferrer" shape="poly" coords="0,0,200,0,300,300" alt="charakterystyka czereśni">
        </map>

        Zobacz więcej informacji o <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="czereśni">.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "noreferrer", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że w momencie kliknięcia na klikalny obszar reprezentowany przez przykładowy element "area" informacja o adresie danego dokumentu HTML nie powinna być przekazywana przez przeglądarkę internetową do serwera o nazwie "https://wikipedia.org", na którym znajduje się zasób internetowy "czeresnia.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area".

prev

Wartość prev oznacza, że dany dokument HTML jest częścią serii, natomiast zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area, jest poprzednim w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </article>

    <nav>
      <map name="mapa-1">
        <area href="warzywa.html" rel="prev" shape="poly" coords="0,0,200,0,300,300" alt="artykuł o warzywach">
        <area href="kwiaty.html" rel="next" shape="poly" coords="0,0,0,200,300,300" alt="artykuł o kwiatach">
      </map>

      <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="dodatkowa nawigacja">
    </nav>

  </body>
</html>

Ponieważ do pierwszego przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "prev", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML jest częścią serii, natomiast zasób internetowy "warzywa.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area", jest poprzednim w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML.

tag

Wartość tag oznacza, że dla treści reprezentowanej przez zawartość danego dokumentu HTML istnieją dodatkowe informacje, o których można dowiedzieć się więcej z zasobu internetowego, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

      <footer>
        <map name="mapa-1">
          <area href="https://wikipedia.org/czeresnia.html" rel="tag" shape="poly" coords="0,0,200,0,300,300" alt="charakterystyka czereśni">
        </map>

        Zobacz więcej informacji o <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="czereśni">.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z wartością "tag", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dla treści reprezentowanej przez zawartość danego dokumentu HTML istnieją dodatkowe informacje, o których można dowiedzieć się więcej z zasobu internetowego "czeresnia.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area".

wartość niestandardowa

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas niestandardowej wartości atrybutu rel elementu area.

kombinacja wartości

Możemy podać kilka wartości, oddzielonych od siebie przynajmniej jednym znakiem spacji, dzięki czemu dany atrybut rel będzie mógł określać kilka docelowych relacji jednocześnie.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </article>

    <nav>
      <map name="mapa-1">
        <area href="warzywa.html" rel="prev" shape="poly" coords="0,0,200,0,300,300" alt="artykuł o warzywach">
        <area href="kwiaty.html" rel="next nofollow" shape="poly" coords="0,0,0,200,300,300" alt="artykuł o kwiatach">
      </map>

      <img src="klikalna-mapa-01.png" usemap="#mapa-1" alt="dodatkowa nawigacja">
    </nav>

  </body>
</html>

Ponieważ do przykładowego elementu "area" został dodany atrybut "rel" wraz z następującą kombinacją wartości: "next nofollow", przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML jest częścią serii, natomiast zasób internetowy "kwiaty.html", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", jest następnym w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML, dodatkowo przykładowy element "area" zawiera dodatkową informację dla przeglądarki internetowej o tym, że autor danego dokumentu HTML nie gwarantuje tego, że zasób internetowy "kwiaty.html", do którego prowadzi klikalny obszar reprezentowany przez wspomniany element "area", jest potwierdzonym, zaufanym, sprawdzonym zasobem internetowym.

Atrybut Lokalny

shape

Przeznaczenie atrybutu shape

Atrybut shape wykorzystany wraz z elementem area pozwala nam określić informację o kształcie, jaki może posiadać klikalny obszar reprezentowany przez dany element area.

Wartość domyślna

rect (w każdej sytuacji)

Wartości atrybutu shape

rect

Wartość rect oznacza kształt prostokąta.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-9">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-video" shape="rect" coords="172,23,279,130" alt="opis elementu - video">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-9" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - video mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" może posiadać kształt prostokąta, ponieważ do wspomnianego elementu "area" został dodany atrybut "shape" wraz z wartością "rect".

circle

Wartość circle oznacza kształt koła.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-10">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="circle" coords="74,227,56" alt="opis elementu - object">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-10" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - object mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" może posiadać kształt koła, ponieważ do wspomnianego elementu "area" został dodany atrybut "shape" wraz z wartością "circle".

poly

Wartość poly oznacza kształt wielokąta.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-11">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-embed" shape="poly" coords="175,171,253,163,209,207,269,188,265,278,231,238,192,278" alt="opis elementu - embed">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-11" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - embed mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" może posiadać kształt wielokąta, ponieważ do wspomnianego elementu "area" został dodany atrybut "shape" wraz z wartością "poly".

default

Wartość default oznacza kształt całego obrazka.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-12">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-audio" shape="default" alt="opis elementu - audio">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-12" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

opis elementu - audio mapa z jednym klikalnym obszarem

Klikalny obszar reprezentowany przez przykładowy element "area" na mapie klikalnych obszarów reprezentowanej przez element "map" posiada kształt całego obrazka "klikalna-mapa-02.png", ponieważ do wspomnianego elementu "area" został dodany atrybut "shape" wraz z wartością "default".

Atrybut Lokalny

target

Przeznaczenie atrybutu target

Atrybut target wykorzystany wraz z elementem area pozwala nam określić docelowy kontekst (miejsce), gdzie powinien zostać wczytany zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Docelowe wczytanie się zasobu internetowego nastąpi w momencie gdy użytkownik kliknie na klikalny obszar reprezentowany przez dany element area.

Atrybut "target" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

_self (gdy pominęliśmy atrybut)

_blank (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu target

_blank

Wartość _blank wskazuje na nowy kontekst przeglądarki internetowej, na nowe miejsce, np. na nowe okno przeglądarki internetowej (nową zakładkę).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-13">
      <area href="https://webkod.pl/files/html/zwierze-01.png" target="_blank" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-13" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby zobaczyć zdjęcie lwa mapa z jednym klikalnym obszarem

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie wczytany do nowego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "_blank".

_parent

Wartość _parent wskazuje na kontekst rodzica kontekstu przeglądarki internetowej, do którego należy dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/area-target-parent.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: area-target-parent.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut target - wartość _parent</title>
      </head>
      <body>

        <map name="mapa-1">
          <area href="https://webkod.pl/files/html/zwierze-01.png" target="_parent" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
        </map>

        <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "area", jest element "iframe", którego kontekstem rodzicem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "_parent".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "area", nie posiada kontekstu rodzica, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

_self

Wartość _self wskazuje na kontekst przeglądarki internetowej, do którego należy dany element area, np. na aktualne okno przeglądarki internetowej (aktualną zakładkę) lub na aktualny element iframe.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/area-target-self.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: area-target-self.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut target - wartość _self</title>
      </head>
      <body>

        <map name="mapa-1">
          <area href="https://webkod.pl/files/html/zwierze-01.png" target="_self" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
        </map>

        <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "area", jest element "iframe", dlatego w momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie wczytany do elementu "iframe", ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "_self".

_top

Wartość _top wskazuje na kontekst najdalszego przodka kontekstu przeglądarki internetowej, do którego należy dany element area.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/area-target-top.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: area-target-top.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut target - wartość _top</title>
      </head>
      <body>

        <map name="mapa-1">
          <area href="https://webkod.pl/files/html/zwierze-01.png" target="_top" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
        </map>

        <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-1" alt="mapa z jednym klikalnym obszarem">

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "area", jest element "iframe", którego najdalszym kontekstem przodkiem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "_top".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "area", nie posiada kontekstu najdalszego przodka, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

iframe name

Należy podać wartość atrybutu name interesującego nas elementu iframe, dzięki czemu interesujący nas element iframe stanie się docelowym kontekstem.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe name="ramka-1"></iframe>

    <map name="mapa-14">
      <area href="https://webkod.pl/files/html/zwierze-01.png" target="ramka-1" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-14" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby zobaczyć zdjęcie lwa mapa z jednym klikalnym obszarem

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny obszar reprezentowany przez przykładowy element "area", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny obszar reprezentowany przez przykładowy element "area", zostanie wczytany do elementu "iframe", który posiada atrybut "name" o wartości "ramka-1", ponieważ do wspomnianego elementu "area" został dodany atrybut "target" wraz z wartością "ramka-1".

Jeżeli w kontekście przeglądarki internetowej, do którego należy dany element "area" lub w kontekście rodzicu lub w kontekście przodku, nie znajduje się element iframe o wartości atrybutu name, którą podaliśmy, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _blank.

Możemy podać również wartość atrybutu name interesującego nas elementu object, lecz tylko wtedy gdy interesujący nas element object reprezentuje zasób internetowy pochodzący z technologii HTML.

Atrybut Lokalny

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem area pozwala nam określić informację o typie MIME, jaki posiada zasób internetowy, do którego prowadzi klikalny obszar reprezentowany przez dany element area.

Atrybut "type" ma sens tylko wtedy gdy dany element "area" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu type

typ MIME

Należy podać ciąg znaków w formie typu MIME.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-8">
      <area href="https://webkod.pl/files/html/zwierze-01.png" type="image/png" shape="poly" coords="16,69,200,28,180,214" alt="kliknij, aby zobaczyć zdjęcie lwa">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-01.png" usemap="#mapa-8" alt="mapa z jednym klikalnym obszarem">

  </body>
</html>

Rezultat

kliknij, aby zobaczyć zdjęcie lwa mapa z jednym klikalnym obszarem

Ponieważ do przykładowego elementu "area" został dodany atrybut "type" wraz z wartością "image/png", przykładowy element "area" reprezentujący klikalny obszar prowadzący do zasobu internetowego "zwierze-01.png" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada zasób internetowy "zwierze-01.png", jest typ wskazujący na plik typu PNG.