referencia-html/contenido-incrustado.rst

.. 4.7

====================
Contenido incrustado
====================

Se trata de importar otro recurso o inserta el contenido de otro
lenguaje de marcado o elementos en un documento HTML.

El elemento ``picture``
=======================

Es un contenedor que proporciona múltiples formatos al elemento ``<img>``,
contenido que permite a los autores controlar o dar sugerencias al
navegador web sobre qué recurso de imagen utilizar, basado
en la densidad de píxeles de la pantalla, el tamaño de la ventana de la vista,
formato de la imagen y otros factores que representan las características
de una imagen.

El elemento ``<picture>`` es algo diferente de los elementos ``<video>``
y ``<audio>``. Todos ellos contienen elementos de origen, el atributo
``src`` del elemento origen no tiene significado cuando el elemento está
anidado dentro de un elemento ``<picture>`` y el algoritmo de selección de recursos es
diferente. Además, el elemento ``<picture>`` en sí no muestra nada;
Simplemente proporciona un contexto para el contenido del elemento ``<img>`` que le
permite elegir entre múltiples URL.

  .. code-block:: html

     <picture>
       <source media="(min-width: 45em)" srcset="large.jpg">
       <source media="(min-width: 32em)" srcset="med.jpg">
       <img src="small.jpg" alt="El lobo corre sobre la nieve.">
     </picture>

El elemento ``source`` cuando es usado con el elemento ``picture``
==================================================================

Los requisitos de creación de esta sección sólo se aplican si el elemento
``<source>`` tiene un elemento primario que es un elemento ``<picture>``.

El elemento ``<source>`` permite a los autores especificar múltiples conjuntos
de fuentes alternativos para los elementos ``<img>``, por sí solo no representa nada.

El elemento ``img``
===================

Representa una imagen en el documento.

Los navegadores no siempre muestran la imagen a la que el elemento hace referencia.
Es el caso de los navegadores no gráficos (incluyendo aquellos usados por personas
con problemas de visión), si el usuario elige no mostrar la imagen, o si el
navegador es incapaz de mostrarla porque no es válida o no es soportada.
En ese caso, el navegador la reemplazará con el texto definido en el atributo ``alt``.

  .. code-block:: html

     <a href="https://w3.org">
       <img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
     </a>

En ciertas situaciones se recomienda implementar la información de la imagen dentro
del atributo ``alt`` , para asegurarse de que el usuario puede leer la información
en caso de que la imagen no sea cargada por el navegador.

  .. code-block:: html

     <img src="piechart.gif"
       alt="Pie chart: Browser Share - Internet Explorer 25%, Firefox 40%,
       Chrome 25%, Safari 6% and Opera 4%.">

Si la imagen que se va a mostrar es un *banner* del sitio web es posible dejar vacio
el atributo ``alt``

  .. code-block:: html

     <header>
       <div><img src="banner.gif" alt="" width="400" height="30"></div>
       <h1>El Blog de Clara</h1>
     </header>
       <p>Bienvenido a mi Blog...</p>

El elemento ``<img>`` se puede utilizar con los siguientes atributos:

- ``crossorigin``. Este atributo enumerado indica si la búsqueda de la imagen debe ser por **CORS** o no.
  La imagen **CORS** habilitada puede ser usada en el elemento ``<canvas>`` sin ser pintada.

- ``height``. La altura de la imagen en píxeles.

- ``width``. El ancho de la imagen en píxeles

- ``ismap``. Este atributo booleano indica que la imagen es parte de un mapa bit de imagenes
  del lado del servidor. Al pulsar sobre la imagen se envían los datos
  al servidor como una cadena (*Query string*) de tipo URL a la base de datos del servidor.
  Este atributo está permitido solo si el elemento ``<img>`` es descendiente de
  un elemento ``<a>`` con un atributo ``href`` válido.

  .. code-block:: html

     <a href="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png">
       <img src="HTML5_Logo_512.png" alt="HTML5_Logo" width="512" height="500" ismap>
     </a>

- ``sizes``. Se trata de una lista de una o más cadenas de caracteres separadas por comas
  indicando el tamaño de la fuente.

  .. code-block:: html

    <h1>
      <img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
           ssrc="wolf-400.jpg" alt="El lobo blanco">
    </h1>
    
- ``srcset``. Una lista de una o más cadenas separadas por comas indicando las posibles fuentes para usar.

  .. code-block:: html

     <h1>
       <picture>
         <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
         <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="Desayuno combinado">
       </picture>
     </h1>

- ``usemap``. La URL parcial (**empezando con '#'**) de un mapa de imagen
  asociado a un elemento. No puedes usar este atributo si el elemento
  ``<img>`` es descendiente de un elemento ``<a>`` o ``<button>``.

  .. code-block:: html
     
     <p>Imagen que se muestra el mapa de Katoomba</p>
     <p><img src="https://www.w3.org/TR/html5/images/imagemap.png" width="209" alt="Mapa de Katoomba" height="249" usemap="#Map">
      
     <map name="Map">
       <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130"
             href="north.html" alt="Casas del Norte de Katoomba">
       <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61"
             alt="Casas del Sur de Katoomba" href="south.html">
     </map>
       
Formatos de imagen soportados
-----------------------------

- JPEG
- GIF, incluyendo animaciones GIFs
- PNG
- APNG
- SVG
- BMP
- BMP ICO
- PNG ICO

El elemento ``iframe``
======================

Elemento HTML ``<iframe>`` representa un contexto de navegación
anidado, que permite incorporar otra página HTML en la página actual.
Cada contexto de navegación tiene su propio historial, sesión y documento activo.

El contexto de navegación que incluye el contenido implícito se llama **contexto
de navegación principal**. El contexto de navegación de nivel superior que no tiene padre
es la ventana del navegador.

Desde el elemento ``<iframe>`` del DOM, los scripts pueden obtener acceso al objeto
**window** de la página HTML incluida a través de la propiedad ``contentWindow``.
La propiedad ``contentDocument`` se refiere al elemento del documento dentro del
``<iframe>`` (esto es equivalente a ``contentWindow.document``).

Los scripts que intentan acceder al contenido de un ``<iframe>`` están sujetos a
la misma reglas de origen del primer ``<iframe>`` y no pueden acceder a la mayoría de las propiedades
del otro objeto ``Window`` si se cargó desde un dominio diferente. Esto también
se aplica a un script dentro de un ``<iframe>`` tratando de acceder a su ventana
principal.

La comunicación entre dominios se puede lograr con ``Window.postMessage``.

  .. code-block:: html

     <script>
       var iframe = window.getElementsByTagName("iframe")[0];
       alert( "Titulo Frame :" + iframe.contentWindow.title);
     </script>


     <iframe src="pagina.html" width="300" height="300">
       <p>Tu navegador no soporta iframe.</p>
     </iframe>

Como elementos del ``<iframe>``, dentro del objeto ``Window.frames`` se comportan como una
pseudo-array.

El elemento ``<iframe>`` puede usarse con los siguientes atributos:

- ``height``. Indica la altura del ``<iframe>``

- ``width``. Indica el ancho del ``<iframe>``

- ``src``. Indica la dirección de una página que debe contener el contexto de navegación anidada.

- ``srcdoc``. Indica el contenido de la página que debe contener el contexto
  de navegación anidada. El valor del atributo es el origen de un documento ``iframe srcdoc``.
  Si está presente, debe tener un valor utilizando la sintaxis HTML que consiste
  en los siguientes componentes sintácticos.

  El siguiente ejemplo utiliza el atributo ``srcdoc`` junto con los atributos de ``sandbox``
  que se describen a continuación para proporcionar a los usuarios que admiten esta
  función una capa adicional de protección contra la inyección de guiones en los
  comentarios del blog:

  .. code-block:: html

     <article>
       <h1>Ya tengo mi propia revista!</h1>
       <p>Despues de mucho esfuerzo,Finalmente he publicado mi articulo,
          Estoy muy feliz por ello!</p>
       <footer>
       <p>Escrito hace<a href="/users/cap">cap</a>, 1 hora.
       </footer>
       <article>
       <footer> Hace 30 minutos, <a href="/users/ch">ch</a> escribió: </footer>
       <iframe sandbox srcdoc="<p>¿ Has cogido la imagen de fondo ?"></iframe>
       </article>
       <article>
       <footer> Hace 9 minutos, <a href="/users/cap">cap</a> escribió: </footer>
       <iframe sandbox srcdoc="<p>Si , tu puedes verlo <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>dentro de la galeria</a>."></iframe>
       </article>
       <article>
       <footer> Hace 5 minutos, <a href="/users/ch">ch</a> escribió: </footer>
       <iframe sandbox srcdoc="<p>Si realmente está,
     <p>debes de avisarme en la proxima revisión."></iframe>
     </article>

- ``name``. Un nombre para el contexto de exploración incrustado ``<iframe>``. Esto se puede
  usar como el valor del atributo de destino de un elemento ``<a>`` o ``<form>``, o el
  atributo ``formtarget`` de un elemento ``<input>`` o ``<button>``.

- ``sandbox``. Si se especifica como una cadena vacía, este atributo permite restricciones
  adicionales en el contenido, que pueden aparecer en el ``<iframe>`` al que se envía los datos.
  El valor del atributo puede ser una lista separada por espacios de palabras clave que
  determinan las restricciones que se van a usar.

  .. code-block:: html

     <iframe title="Maps" sandbox="allow-same-origin allow-forms allow-scripts"
        src="https://maps.example.com/embedded.html"></iframe>

  En este ejemplo, se incrusta un gadget de otro sitio web. El gadget tiene scripts y
  formularios habilitados, y se levantan las restricciones del sandbox de origen,
  permite que el gadget se comunique con su servidor de origen. Sin embargo,
  el atributo ``sandbox`` sigue siendo útil, ya que deshabilita los complementos
  y ventanas emergentes, reduciendo así el riesgo de estar expuesto
  a programas maliciosos.

  Las palabras clave válidas son:

    - ``allow-forms`` Permite que el contexto de exploración incrustado envíe formularios.
      Si no se utiliza esta palabra clave, esta operación no está permitida.

    - ``allow-same-origin``. Permite que el contenido sea tratado como si procediera de su origen.
      Si no se utiliza esta palabra clave, se considera que el contenido incrustado es de origen único.

    - ``allow-top-navigation``. Permite que el contexto de exploración incrustado navegue
      (cargue) el contenido al contexto de navegación de nivel superior. Si
      no se utiliza esta palabra clave, esta operación no está permitida.

    - ``allow-scripts``: Permite que el contexto de exploración incrustado
      ejecute secuencias de comandos (pero no cree ventanas emergentes). Si no se
      utiliza esta palabra clave, esta operación no está permitida.

    - ``allowfullscreen``: Atributo booleano. Cuando se especifica, indica que los objetos ``document``
      en el contexto de exploración del elemento ``<iframe>`` deben poderse utilizar
      ``requestFullscreen()`` (si no está bloqueado por otras razones, por ejemplo,
      existe otro ``<iframe>`` ancestral sin este atributo).

      .. code-block:: html

         <article>
           <header>
           <p><img src="/usericons/1627591962735"> <b>Pedro Picapiedra</b></p>
           <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Mensaje privado</a></p>
           </header>
           <main>
           <p>Mira mi nuevo troncomovil!</p>
           <iframe title="Video" src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
           </main>
         </article>

      En el ejemplo anterior, un ``<iframe>`` se utiliza para incrustar un vídeo desde un sitio web de vídeos.
      El atributo ``allowfullscreen`` es necesario para permitir que el reproductor
      muestre su pantalla completa de vídeo.

El elemento ``embed``
=====================

Proporciona un punto de integración para una aplicación externa (**normalmente no HTML**)
o un contenido interactivo, un *pluging*, etc..

Puede usarse con los siguientes atributos:

- ``src``. Indica la dirección del recurso que se está incrustando.

- ``width``. La anchura del elemento en píxeles.

- ``height``. La altura del elemento en píxeles.

- ``type``. Si está presente, indica el tipo MIME por el cual se selecciona
  el complemento para instanciar. El valor debe ser un tipo MIME válido.
  Si el atributo ``type`` y el atributo ``src`` están presentes, el atributo ``type``
  debe especificar el mismo tipo que los metadatos explícitos **Content-Type**
  del recurso dado por el atributo ``src``.

.. code-block:: html

   <embed src="catgame.swf" quality="high">

El elemento ``object``
======================

El elemento ``<object>`` representa un recurso externo, que puede tratarse
como una imagen, un contexto de navegación anidado o un recurso que debe manejar un complemento.

Puede utilizarse con los siguientes atributos:

- ``data``. Especifica la dirección del recurso.

- ``type``. Si está presente, especifica el tipo del recurso, el atributo
  debe ser un tipo **MIME** válido.

- ``form``. Elemento de formulario, si existe, estará asociado al elemento ``<objeto>``
  (propietario del formulario). El valor del atributo debe ser un ``id`` de un
  elemento ``<form>`` del mismo documento.

- ``height``. La altura del recurso visualizado, en píxeles.

- ``width``. El ancho del recurso de visualización, en píxeles.

- ``name``. El nombre del contexto de exploración válido en HTML 5.

- ``type``. El tipo de contenido del recurso especificado por los datos. Debe definirse al
  menos uno de los datos y del tipo.

- ``typemustmatch``. Este atributo **booleano** indica si el tipo y el recurso de tipo de contenido
  real deben coincidir en el orden de éste cuando se vaya a utilizar.

- ``usemap``. Una referencia al nombre **hash** de un elemento ``<map>``;
  Esto es **#** seguido por el valor de un nombre de un elemento ``<map>``.

  .. code-block:: html

     <!-- Embeber un video FLASH-->
     <object data="movie.swf"
       type="application/x-shockwave-flash"></object>

     <!-- Embeber una pelicula FLASH con parametros-->
     <object data="movie.swf" type="application/x-shockwave-flash">
       <param name="foo" value="bar">
     </object>

  .. code-block:: html

     <p>Mira mi vídeo:
       <object type="application/x-shockwave-flash">
       <param name=movie value="https://video.example.com/library/watch.swf">
       <param name=allowfullscreen value=true>
       <param name=flashvars value="https://video.example.com/vids/315981">
       <video controls src="https://video.example.com/vids/315981">
         <a href="https://video.example.com/vids/315981">Ver vídeo</a>.
       </video>
       </object>
     </p>

El siguiente ejemplo muestra cómo se puede utilizar un complemento en HTML 5
(en este caso, un complemento de Flash, para mostrar un archivo de vídeo).
El respaldo **'fallback'** se proporciona para los usuarios que no tienen habilitado Flash,
en este caso usando el elemento ``<video>`` para mostrar el vídeo para aquellos que
usan agentes de usuario que soportan vídeo y proporcionar un enlace
al vídeo para aquellos que no tienen Flash ni vídeo en el navegador

El elemento ``param``
=====================

El elemento ``<param>`` define parámetros para complementos invocados por
elementos de tipo ``<object>``. No representa nada por sí solo.

Puede usarse con los siguientes atributos:

- ``name``. El nombre del parámetro.

- ``value``. El valor del parámetro

  .. code-block:: html

   <!DOCTYPE HTML>
   <html lang="en">
     <head>
       <title>Tetera en O3D </title>
     </head>
     <body>
       <p>
       <object type="application/vnd.o3d.auto">
         <param name="o3d_features" value="FloatingPointTextures">
         <img src="o3d-teapot.png"
             title="Tetera en 3D desde Ilustraciones Utah utilizando O3D.."
             alt="Cuando O3D rinde la tetera de Utah, aparece como una tetera squat
                  con un acabado metálico brillante en el que se reflejan los alrededores,
                  con una leve sombra causada por la iluminación">
         <p>Para ver la tetera realmente renderizada por O3D en su computadora
            , descargue e instale <a href="https://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
       </object>
       <script src="o3d-teapot.js"></script>
       </p>
     </body>
   </html>

El elemento ``video``
=====================

El elemento ``<video>`` se utiliza para incrustar vídeos en un documento HTML.
Aquí_ puedes encontrar la lista de formatos compatibles para los
elementos ``<audio>`` y ``<video>``.

Puede usarse con los siguientes atributos:

- ``autoplay``. Un atributo booleano; si se especifica, el vídeo comenzará a reproducirse
  automáticamente tan pronto como sea posible, sin detenerse.

- ``controls``. Si está presente este atributo, el navegador ofrecerá controles
  para permitir que el usuario controle la reproducción de vídeo, incluyendo
  volumen, búsqueda y pausar/reanudar reproducción.

- ``height``. La altura del área de visualización del vídeo en píxeles.

- ``loop``. Un atributo **booleano**; si se especifica, al alcanzar el final del vídeo,
  volverá a reproducirse automáticamente desde el principio.

- ``preload``. El objetivo de este atributo es proporcionar una precarga del archivo de vídeo
  dentro de nuestro navegador antes de que se inicié la reproducción para que no se trabe
  durante su reproducción de este.

  Puede tener uno de los siguientes valores:

  - ``none``. El autor sugiere que el usuario no tendrá que
      consultar este vídeo, porque el servidor desea minimizar su tráfico;
      es decir, esta sugerencia indica que no se debe almacenar en caché este vídeo.

  - ``metadata``. Indica que solo carga los metadatos del vídeo (por ejemplo,
      longitud del vídeo).

  - ``auto``. Indica que el vídeo entero puede ser descargado, incluso
      si no se espera que el usuario vaya a usarlo.

  - ``cadena vacía``. Sinónimo del valor **auto**.


- ``poster``. Una imagen pretederminada mediante una URL o una imagen añadida
     que se muestra antes de reproducir el vídeo.

- ``src``. La URL del vídeo que se va a insertar,es opcional; podrás optar, en su lugar,
  por el elemento ``<source>`` dentro del bloque de vídeo para especificar el
  vídeo que se va a incrustar.
  
    .. code-block:: html

     <video src="video.webm" autoplay controls></video>

- ``width``. La anchura del área de visualización del vídeo en píxeles.

Este ejemplo muestra un mensaje cuando el vídeo no se puede reproducir
correctamente:

  .. code-block:: html

     <video src="videofile.ogg" autoplay poster="posterimage.jpg">
       Tu navegador no admite el elemento <code>vídeo</code>.
     </video>

El elemento ``audio``
=====================

Representa un sonido o un flujo de audio.

Se puede proporcionar contenido dentro del elemento ``<audio>`` para los navegadores
que no pueden reproducir audio.

Se puede utilizar con los siguientes atributos:

- ``autoplay``. Un atributo booleano; si se especifica incluso aunque el valor sea **false**,
  el sonido comenzará a reproducirse automáticamente en cuanto sea posible,
  sin detenerse para terminar de cargar los datos.

- ``controls``. Si está presente este atributo, el navegador ofrecerá controles
  para permitir que el usuario controle la reproducción de audio, incluyendo
  volumen, búsqueda y pausar/reanudar reproducción.

- ``preload``. El objetivo de este atributo es proporcionar una pequeña precarga
  del contenido audio que se almacena en el buffer del navegador

  - ``none``. Se utiliza cuando el autor del sitio web considera que el usuario no
    tendrá que consultar ese recurso de audio posteriormente y asi minimizar el
    tráfico del servidor, indica que no se debe almacenar en caché este audio;

  - ``metadata``. Sugiere que aunque el autor piense que el usuario no tendrá que
    consultar ese audio, es razonable capturar los metadatos (p. ej. longitud);

  - ``auto``. Indica que si es necesario, se puede descargar el vídeo completo, incluso
    aunque el usuario no vaya a usarlo;

  - *Una cadena vacía*. Realiza la misma función que el valor **auto**.

- ``loop``. Un atributo **booleano**; si se especifica, al alcanzar el final del audio,
  este vuelve a reproducirse desde el principio.

  .. code-block:: html

     <audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
            autoplay>
       Tu navegador no soporta el elemento <code>audio</code>.
     </audio>

El elemento ``source``
======================

El uso del elemento ``<source>`` permite a los autores de un sitio web especificar múltiples
recursos alternativos de tipo multimedia. Por sí solo no representa nada.

Puede usarse con los siguientes atributos:

- ``src``. Indica la dirección del recurso multimedia a reproducir. Este atributo debe
  estar presente.

- ``type``. Este atributo indica el tipo del recurso multimedia,
  para ayudar al navegador a determinar si puede reproducir este recurso multimedia
  antes de buscarlo. Si se especifica, su valor debe ser un tipo MIME válido.

  .. code-block:: html

     <video controls>
       <source src="foo.ogg" type="video/ogg"> <!-- Soportado por Firefox -->
       <source src="foo.mov" type="video/quicktime"> <!-- Soportado por Safari -->
       Lo siento, tu navegador no soporta vídeos de HTML 5.
     </video>

Este ejemplo muestra cómo ofrecer un vídeo en formato **Ogg** para los usuarios cuyos
navegadores son compatibles con formato **Ogg** y un vídeo en formato **QuickTime** para
los usuarios cuyos navegadores son compatibles con él. Si el elemento audio o
vídeo no es compatible con el navegador, se muestra un aviso en su lugar.
Si el navegador es compatible con el elemento, pero no es compatible con
cualquiera de los formatos especificados, se produce un evento de tipo "error" y los
controles multimedia (si están activados) indicarán el error.

  .. code-block:: html

     <script>
       function fallback(video) {
         // reemplaza <video> dentro del contenido
         while (video.hasChildNodes()) {
           if (video.firstChild instanceof HTMLSourceElement)
             video.removeChild(video.firstChild);
           else
             video.parentNode.insertBefore(video.firstChild, video);
         }
         video.parentNode.removeChild(video);
       }
     </script>
     <video controls autoplay>
       <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
       <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
               onerror="fallback(parentNode)">
     </video>

Si el autor del sitio web no está seguro de si los navegadores podrán procesar los
recursos multimedia proporcionados, podrá usar un escuchador de eventos de tipo "error"
en el último elemento de origen y activar el comportamiento de **fallback**.

El elemento ``track``
=====================

Permite a los autores especificar recursos explícitos de texto externo
para elementos multimedia. No representa nada por sí solo.

Puede utilizarse con los siguientes atributos:

- ``default``. Este atributo indica que ``<track>`` debe estar habilitado a
  menos que las preferencias del usuario indiquen que otro ``<track>`` es más
  apropiado. Esto sólo puede utilizarse en un elemento ``<track>`` para los elementos
  multimedia.

- ``kind``. Especifica el tipo de texto que puede tener el elemento ``<track>``. Puede tener 
  los siguientes valores:

  - ``subtitles``. Transcripción o traducción del diálogo, adecuada para cuando el sonido está
    disponible pero no se entiende (por ejemplo, porque el usuario no entiende
    el idioma de la pista de audio del recurso multimedia). Sobrepuesto en el vídeo.
  - ``captions``. Transcripción o traducción del diálogo, efectos de sonido, pistas musicales
    relevantes y otra información de audio relevante, adecuada para cuando el
    sonido no está disponible o no es claramente audible. Por ejemplo, porque
    está silenciado, ahogado por el ruido ambiental o porque la persona es sorda.
  - ``description``. Descripciones textuales del componente de vídeo del recurso de medios, destinado
    a la síntesis de audio cuando el componente visual está oscurecido, no disponible
    o no utilizable, por ejemplo, porque el usuario está interactuando con la
    aplicación sin pantalla durante la conducción o porque el usuario es invidente).
    Sintetizado como audio.
  - ``chapters``. Títulos de capítulos, destinados a ser utilizados por los navegadores
    por el recurso multimedia. Se muestra como una lista interactiva (potencialmente anidada)
    en la interfaz del navegador.
  - ``metadata``. Pistas destinadas para su uso desde el script. No se muestra en el agente de usuario.

- ``label``. Título legible para el ``<track>`` que utiliza el navegador
  para listar los ``<track>`` de textos disponibles.

- ``src``. URL o dirección del recurso. Este atributo debe de ser indicado siempre.

- ``srclang``. Idioma de los datos del texto del ``<track>``.

  .. code-block:: html

     <video controls poster="/images/sample.gif">
        <source src="sample.mp4" type="video/mp4">
        <source src="sample.ogv" type="video/ogv">
        <track kind="captions" src="sampleCaptions.vtt" srclang="en">
        <track kind="descriptions"
          src="sampleDescriptions.vtt" srclang="en">
        <track kind="chapters" src="sampleChapters.vtt" srclang="en">
        <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
        <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
        <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
        <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
        <track kind="metadata" src="keyStage1.vtt" srclang="en"
          label="Key Stage 1">
        <track kind="metadata" src="keyStage2.vtt" srclang="en"
          label="Key Stage 2">
        <track kind="metadata" src="keyStage3.vtt" srclang="en"
          label="Key Stage 3">
        <!-- Fallback -->
        Tu navegador no puede reproducir el vídeo. Actualízalo, por favor.
     </video>

El elemento ``map``
===================

El elemento ``<map>``, junto con un elemento ``<img>`` y cualquier descendiente
de elemento ``<area>``, define el mapa de imagen.

Se utiliza con el atributo ``name``. Este le da al mapa un nombre para que
pueda ser referenciado. El atributo debe estar presente y debe tener un
valor no vacío sin caracteres de espacio.

  .. code-block:: html

   <!DOCTYPE html>
   <html>
     <head>
       <title>Ejemplo del elemento &lt;map&gt;</title>
     </head>
     <body>
         <img src ="http://www.htmlcodes.ws/images/examples/australia-nz-map.gif"
          width="200" height="142"
          alt="Map of Australia and New Zealand"
          usemap ="#aus-nz">
         <map name="aus-nz">
           <area shape ="poly" coords ="3,47,45,12,105,7,140,60,120,125,12,90"
              href ="https://es.wikipedia.org/wiki/Australia" target="_blank"
              alt="Australia">
           <area shape ="poly" coords ="180,85,200,98,167,142,157,138"
              href ="https://es.wikipedia.org/wiki/Nueva_Zelanda" target="_blank"
              alt="New Zealand">
         </map>
     </body>
   </html>


El elemento ``area``
====================

Sirve para crear las distintas secciones en las que se puede dividir un mapas
de imágenes en el cliente.

Representa un hipervínculo con algún texto y un área correspondiente en un mapa
de imagen, o un área muerta en un mapa de imagen.

El elemento ``<area>`` debe tener un elemento ``<map>`` o ``<template>``
como padre.

Los atributos ``shape`` y ``coords`` especifican el area.

Puede ser utilizado con los siguientes atributos:

- ``alt``. Texto que se muestra cuando las imágenes no pueden ser cargadas.
- ``coords``. Coordenadas para las formas que se crean en un mapa de imagen.
- ``download``. Si está presente, el navegador descarga el elemento en vez
  de mostrarlo.
- ``href``. La dirección del recurso.
- ``hreflang``. El idioma del recurso enlazado.
- ``rel``. La relación del documento actual con el recurso enlazado.
- ``shape``. Tipo de forma a ser creado en un mapa de imagen. Puede tener los
  siguientes valores:

    - ``circle``. Forma de círculo.
    - ``default``. Forma predeterminada (por defecto rectángulo).
    - ``poly``. Forma de polígolo.
    - ``rect``. Forma de rectángulo.

- ``target``. El contexto de navegación.
- ``type``. El tipo de recurso referenciado.

  .. image:: imagenes/sample-usemap.png

  .. code-block:: html

     <p>
       Por favor, selecciona una forma:
       <img src="shapes.png" usemap="#shapes"
           alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
       <map name="shapes">
       <area shape=rect coords="50,50,100,100"> <!-- El agujero de la caja roja -->
       <area shape=rect coords="25,25,125,125" href="red.html" alt="Caja roja.">
       <area shape=circle coords="200,75,50" href="green.html" alt="Círculo verde.">
       <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Triángulo azul.">
       <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
             href="yellow.html" alt="Estrella amarilla.">
       </map>
     </p>

MathML
======

MathML es una especificación para representar contenido matemático y
científico que se puede usar en páginas web. La especificación oficial
se encuentra en la siguiente dirección: https://www.w3.org/Math/.

El elemento ``<math>`` se utiliza para hacer uso de esta tecnología.
El siguiente ejemplo muestra cómo se representa en HTML la fórmula del
teorema de Pitágoras.

  .. code-block:: html

     <!DOCTYPE html>
     <html>
       <head>
         <title>Fórmula del teorema de Pitágoras</title>
       </head>
       <body>

       <math>
         <mrow>
           <mrow>
             <msup>
               <mi>a</mi>
               <mn>2</mn>
             </msup>
             <mo>+</mo>
             <msup>
               <mi>b</mi>
               <mn>2</mn>
             </msup>
           </mrow>
           <mo>=</mo>
           <msup>
             <mi>c</mi>
             <mn>2</mn>
           </msup>
         </mrow>
       </math>

       </body>
     </html>

SVG
===

SVG (*Scalable Vector Graphics*) es un formato de gráficos vectoriales
bidimensionales, tanto estáticos como animados, en formato XML, cuya
especificación es un estándar abierto desarrollado por el W3C desde
el año 1999. La especificación oficial se encuentra en https://www.w3.org/TR/SVG/.

El elemento ``<svg>`` se utiliza para hacer uso de esta tecnología.
A continuación, se muestra un ejemplo que dibuja un círculo.

  .. code-block:: html

     <!DOCTYPE HTML>
     <html lang="es">
       <head>
         <meta charset="UTF-8">
         <title>Círculo</title>
       </head>
       <body>
         <svg width="100" height="100">
           <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
         </svg>
       </body>
     </html>

.. _Aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats