Ostatnio edytowany:

object

Autor: Virtual Patriot

Przeznaczenie elementu object

Element object reprezentuje zasób internetowy określonego przez nas typu. Zazwyczaj element object może reprezentować ten sam zasób internetowy, który może być reprezentowany przez element iframe lub element embed.

Dodatkowe techniczne informacje o elemencie object

kategoria ogólna
kontekst zewnętrzny
  • element HTML, który tworzy wewnętrzny kontekst wbudowany

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowe wideo</figcaption>
    
      <object data="wideo-01.swf" width="300" height="200">
        <p>
          wystąpił błąd podczas próby wyświetlenia przykładowego wideo
        </p>
      </object>
    </figure>

    Kontekstem zewnętrznym przykładowego elementu "object" jest element "figure". Wspomniany element "figure" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst wbudowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "figure", jest prawidłowym kontekstem zewnętrznym dla elementu "object".

kontekst wewnętrzny
  • ewentualnie elementy param, a następnie ewentualnie kontekst wewnętrzny elementu rodzica

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowe wideo</figcaption>
    
      <object data="wideo-01.swf" width="300" height="200">
        <param name="bgcolor" value="#FDD700">
      </object>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "object" jest wyłącznie element "param", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "param", jest prawidłowym kontekstem wewnętrznym dla elementu "object".

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowe wideo</figcaption>
    
      <object data="wideo-01.swf">
        <param name="width" value="300">
        <param name="height" value="200">
        <param name="bgcolor" value="#FDD700">
    
        <p>
          wystąpił błąd podczas próby wyświetlenia przykładowego wideo
        </p>
      </object>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "object" są wyłącznie elementy "param", po których znajduje się element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "object", którym to elementem rodzicem w tym wypadku jest element "figure", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "param", element "param", element "param" oraz element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "object".

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowe wideo</figcaption>
    
      <object data="wideo-01.swf" width="300" height="200">
        <p>
          wystąpił błąd podczas próby wyświetlenia przykładowego wideo
        </p>
      </object>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "object" jest wyłącznie element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "object", którym to elementem rodzicem w tym wypadku jest element "figure", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "object".

Element object posiada zdolność fallback. Zdolność fallback elementu object uaktywnia się w momencie gdy zasób internetowy, który z założenia miał być reprezentowany przez element object, nie mógł zostać z różnych przyczyn obsłużony przez przeglądarkę internetową.

wymagane elementy dzieci
  • brak
wymagane atrybuty
  • jeden atrybut data lub jeden atrybut type lub oba naraz
składnia HTML
  • <object> ... </object>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • inline-block (jeżeli zasób internetowy reprezentowany przez dany element object został poprawnie dołączony do danego dokumentu HTML)
  • inline (jeżeli zasób internetowy reprezentowany przez dany element object nie został poprawnie dołączony do danego dokumentu HTML)

Dodatkowe domyślne reguły CSS elementu object

/* jeżeli element "object" posiada atrybut "usemap" */
object[usemap] {
  color:#00F;
}

/* jeżeli zasób internetowy reprezentowany przez element "object" został poprawnie dołączony do dokumentu HTML */
object {
  display:inline-block;
}

Interpretacja elementu object

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Nie interpretuje atrybutu typemustmatch.

Edge

tak

Nie interpretuje atrybutu typemustmatch.

Opis atrybutów elementu object

data

Przeznaczenie atrybutu data

Atrybut data wykorzystany wraz z elementem object określa adres zasobu internetowego, który powinien być reprezentowany przez dany element object.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu data

URI

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

Przykładowy Kod HTML

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

    <object data="http://webkod.pl/files/html/strona-01.html"></object>

  </body>
</html>

Rezultat

Zasobem internetowym, który powinien być reprezentowany przez przykładowy element "object" jest zasób internetowy "strona-01.html" znajdujący się pod adresem "http://webkod.pl/files/html/strona-01.html", dlatego do wspomnianego elementu "object" został dodany atrybut "data" wraz z wartością "http://webkod.pl/files/html/strona-01.html".

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem object określa, z którym elementem form powinien zostać powiązany dany element object.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu form

form id

Należy podać wartość atrybutu id interesującego nas elementu form.

Przykładowy Kod HTML

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

    <form action="http://webkod.pl/php/submit-result.php" id="formularz-1">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <button type="submit">zatwierdź</button>
    </form>

    <object data="http://webkod.pl/files/html/zwierze-01.png" form="formularz-1"></object>

  </body>
</html>

Rezultat

Przykładowy element "object" został powiązany z formularzem HTML reprezentowanym przez element "form" posiadający atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "object" został dodany atrybut "form" wraz z wartością "formularz-1".

height

Przeznaczenie atrybutu height

Atrybut height wykorzystany wraz z elementem object określa wartość wysokości, jaką powinien posiadać dany element object.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu height

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

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

    <object data="http://webkod.pl/files/html/strona-01.html" height="300"></object>

  </body>
</html>

Rezultat

Wartość wysokości przykładowego elementu "object" wynosi "300" pikseli, ponieważ do wspomnianego elementu "object" został dodany atrybut "height" wraz z wartością "300".

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem object określa nazwę, jaka powinna zostać przypisana do danego elementu object, dzięki czemu wspomniany element object może stać się zagnieżdżonym kontekstem przeglądarki internetowej.

Atrybut "name" ma sens tylko wtedy gdy dany element "object" reprezentuje zasób internetowy w postaci dokumentu HTML.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu name

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>

    <object data="http://webkod.pl/files/html/strona-01.html" name="kontekst-1"></object>

    <p>
      <a href="http://webkod.pl/files/html/zwierze-01.png" target="kontekst-1">zobacz przykładowy obrazek w elemencie object</a>
    </p>

  </body>
</html>

Rezultat

Nazwą zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez przykładowy element "object" jest nazwa "kontekst-1", ponieważ do wspomnianego elementu "object" został dodany atrybut "name" wraz z wartością "kontekst-1".

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem object określa informację o typie MIME, jaki posiada zasób internetowy reprezentowany przez dany element object.

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>

    <object data="http://webkod.pl/files/html/animacja-01.swf" width="150" height="150" type="application/x-shockwave-flash"></object>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "object" został dodany atrybut "type" wraz z wartością "application/x-shockwave-flash" wspomniany element "object" reprezentujący zasób internetowy znajdujący się pod adresem "http://webkod.pl/files/html/animacja-01.swf" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada wspomniany zasób internetowy jest typ wskazujący na plik typu SWF.

typemustmatch

Przeznaczenie atrybutu typemustmatch

Atrybut typemustmatch wykorzystany wraz z elementem object określa czy zasób internetowy reprezentowany przez dany element object powinien być traktowany przez przeglądarkę internetową jako zasób nieistniejący w przypadku gdy typ MIME wspomnianego zasobu internetowego nie będzie zgadzał się z typem MIME, który określiliśmy za pomocą wartości atrybutu type danego elementu object.

Atrybut "typemustmatch" ma sens tylko wtedy gdy dany element "object" posiada atrybut data oraz atrybut type.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu typemustmatch

typemustmatch

Atrybut typemustmatch jest atrybutem logicznym elementu object.

Przykładowy Kod HTML

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

    <object data="http://webkod.pl/files/html/animacja-01.swf" width="150" height="150" type="application/x-shockwave-flash" typemustmatch></object>

  </body>
</html>

Rezultat

W sytuacji gdy zasób internetowy reprezentowany przez przykładowy element "object" byłby innego typu, niż typ, który został wskazany przez wartość atrybutu "type" wspomnianego elementu "object", wspomniany zasób internetowy nie zostałby dołączony przez przeglądarkę internetową do treści reprezentowanej przez zawartość danego dokumentu HTML, ponieważ do wspomnianego elementu "object" został dodany atrybut "typemustmatch".

usemap

Przeznaczenie atrybutu usemap

Atrybut usemap wykorzystany wraz z elementem object określa, która mapa klikalnych obszarów powinna zostać powiązana z danym elementem object.

Atrybut "usemap" ma sens tylko wtedy gdy dany element "object" reprezentuje zasób internetowy w postaci obrazka.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu usemap

map name

Należy podać (bezpośrednio po znaku # (HASH)) wartość atrybutu name interesującego nas elementu map.

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://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-audio" shape="poly" coords="19,26,19,130,129,130" alt="opis elementu - audio">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-video" shape="rect" coords="172,23,279,130" alt="opis elementu - video">
      <area href="http://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-iframe" shape="circle" coords="74,227,56" alt="opis elementu - iframe">
      <area href="http://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>

    <object data="http://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-1"></object>

  </body>
</html>

Rezultat

opis elementu - audio opis elementu - video opis elementu - iframe opis elementu - embed

Mapa klikalnych obszarów reprezentowana przez element "map" posiadający atrybut "name" o wartości "mapa-1" została powiązana z przykładowym elementem "object", ponieważ do wspomnianego elementu "object" został dodany atrybut "usemap" wraz z wartością "#mapa-1".

width

Przeznaczenie atrybutu width

Atrybut width wykorzystany wraz z elementem object określa wartość szerokości, jaką powinien posiadać dany element object.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu width

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

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

    <object data="http://webkod.pl/files/html/strona-01.html" width="400"></object>

  </body>
</html>

Rezultat

Wartość szerokości przykładowego elementu "object" wynosi "400" pikseli, ponieważ do wspomnianego elementu "object" został dodany atrybut "width" wraz z wartością "400".