html5/contenido-incrustado.rst

.. 4.7

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

El contenido incrustado importa otro recurso o inserta el contenido de otro
lenguaje de marcado o espacio de nombres en el documento. Los elementos que
pertenecen a esta categoría son: ``audio``, ``canvas``, ``embed``, ``iframe``
, ``img``, ``object``, ``svg``, ``video``.


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

El elemento de imagen HTML ``<img>`` representa una imagen en el documento.
La etiqueta ``<img>`` no debe de usarse para mostrar imágenes transparentes.

Tiene dos atributos principales llamados ``src`` y ``alt``. 
- ``src``: El atributo ``src`` es la URL de la imagen, este atributo es obligatorio para el elemento <img>. 
- ``alt``: Define el texto alternativo que describe la imagen. Los usuarios lo verán si la URL de 
la imagen es errónea, la imagen tiene un formato no soportado, o si la imagen aún no se ha descargado.

  .. code-block:: html

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


  .. 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="border.gif" alt="" width="400" height="30"></div>
     <h1>Clara’s Blog</h1>
     </header>
     <p>Welcome to my 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.
  Imagen hablidata **CORS** 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 boleano indica que la imagen es parte del mapa del lado del servidor.
  Así que, se envían las coordenadas precisas de un clic.
  Este atributo está permitido solo si el elemento ``<img>`` es descendiente de
  un elemento ``<a>`` con un atributo ``href`` válido.

- ``sizes`` El atributo ``sizes`` depende del atributo ``srcset``, sin este no funciona. El valor del tamaño de la fuente especifica el tamaño de la imagen incrustada. Se usa el tamaño actual de la fuente para seleccionar las fuentes soportadas por el atributo srcset, cuando esas fuentes son descritas usando el ancho (width). Cada tamaño de la fuente consiste en:
    1. Codición de medios, debe omitirse en el último **ítem**.
    2. Valor del tamaño.

- ``srcset``: El atributo ``srcset`` permite indicar diferentes URL para una misma imagen y que serán usadas dependiendo del tamaño de la pantalla del usuario o sus preferencias. Opcionalmente se puede especificar un ancho (numero entero positivo) seguido directamente por **w**. El ancho se dividirá por el tamaño de 
la fuente dada en el atributo sizes para calcular la densidad del píxel.

- ``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>``.

Formatos de imagen soportados
-----------------------------

- JPEG
- GIF, including animated GIFs
- PNG
- APNG
- SVG
- BMP
- BMP ICO
- PNG ICO


  .. code-block:: html

     <h2>El artículo destacado de hoy</h2>
       <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
       <p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
             Fue una inglesa <a href="/wiki/Music_hall">cantante </a> teatro de variedades..



  .. code-block:: html

     <h2>El artículo destacado de hoy</h2>
       <img src="/uploads/100-marie-lloyd.jpg"
           srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
           alt="" width="100" height="150">
       <p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
              Fue una inglesa <a href="/wiki/Music_hall">cantante</a> teatro de variedades..

  .. code-block:: html

     <img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">

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

El elemento HTML ``<picture>`` es un contenedor utilizado para especificar 
múltiples elementos ``<source>`` de un elemento ``<img>`` específico contenido en él. 
El navegador elegirá la fuente más adecuada según el diseño actual de 
la página (las restricciones del cuadro en el que aparecerá la imagen) 
y el dispositivo en el que se mostrará (por ejemplo, un dispositivo normal
 o un dispositivo hiDPI).

El elemento ``<picture>`` en sí no muestra nada. Simplemente proporciona un 
contexto para el contenido ``<img>`` elemento 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="The wolf runs through the snow.">
     </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 de
``<source>`` tiene un elemento primario que es un elemento de ``<picture>``.

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

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

El elemento HTML ``<iframe>`` representa un contexto de navegación
anidada, que permite incorporar **otra página HTML** en la **página actual**.
Cada ``iframe`` tiene su historial de sesión y su propio objeto Document.
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 típicamente la ventana del navegador.

  .. code-block:: html

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


     <iframe src="page.html" width="300" height="300">
       <p>Your browser does not support iframes.</p>
     </iframe>

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

- ``height``. Indica la altura del ``frame``

- ``width``. Indica el ancho del ``frame``

- ``src``. Indica la dirección de una página que debe contener una página web.

- ``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 **document** ``iframe srcdoc``.
  Si está presente, debe tener un valor utilizando la sintaxis ``HTML`` que consiste
  en los siguientes componentes sintácticos, en el orden dado:

  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> escribio: </footer>
       <iframe sandbox srcdoc="<p>¿ Has cogido la imagen de fondo ?"></iframe>
       </article>
       <article>
       <footer> Hace 9 minutos , <a href="/users/cap">cap</a> escribio: </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> escribio: </footer>
       <iframe sandbox srcdoc="<p>Si realmente esta ,
     <p>debes de avisarme en la proxima revisions."></iframe>
     </article>

- ``name``. Un nombre para el contexto de exploración incrustado (marco o *frame*). 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 puede aparecer en el marco en línea.
  El valor del atributo puede ser una lista separada por espacios de fichas que
  levantan determinadas restricciones.

  .. 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. El gadget tiene scripts y
  formularios habilitados, y se levantan las restricciones de sandbox de origen,
  permitiendo 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 que el usuario esté expuesto
  a programas maliciosos y otras molestias.

  Los **tokens** válidos 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 siendo de su origen normal.
      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 poder 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 paseo!</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 video 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, **pluging**.

Puede usarse con los siguientes atributos:

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

- ``width``. La anchura del elemento.

- ``height``. La altura del elemento.

- ``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 HTML ``<object>`` representa un recurso externo, que puede tratarse
como una imagen, un iframe o un recurso que debe manejar un complemento(plugin).

Puede utilizarse con los siguientes atributos:

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

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

- ``form``.El elemento de formulario, si existe, al que está asociado el elemento de objeto
  (su propietario de formulario). El valor del atributo debe ser un ID de un
  elemento ``<form>`` en el mismo documento.

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

- ``width``. El ancho del recurso mostrado, 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 orden de éste que se va a utilizar.

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

  .. 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 video:
       <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 video</a>.
       </video>
       </object>
     </p>

El siguiente ejemplo muestra cómo se puede utilizar un complemento en **HTML**
(en este caso, el 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 de video para mostrar el video para aquellos que
usan agentes de usuario que soportan video y finalmente proporcionar un enlace
al video para aquellos que no tienen Flash ni video en el navegador

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

El elemento ``<param>`` define parámetros para complementos invocados por
elementos de ``<objet>``. 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>O3D Utah Teapot</title>
     </head>
     <body>
       <p>
       <object type="application/vnd.o3d.auto">
         <param name="o3d_features" value="FloatingPointTextures">
         <img src="o3d-teapot.png"
             title="3D Utah Teapot ilustración prestados 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 instalee <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.
Puedes consultar la `lista siguiente de formatos<https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats>`_. admitidos por los elementos de audio y vídeo.

Puede usarse con los siguientes atributos:

- ``autoplay``. Un atributo booleano; si se especifica, el video comenzará a reproducirse
  automáticamente tan pronto como 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 video, incluyendo
  volumen, búsqueda y pausar/reanudar reproducción.

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

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

- ``preload``. El objetivo de este atributo enumerado es proporcionar una
  sugerencia al navegador sobre qué cree el autor que llevará a la mejor
  experiencia para el usuario.

  Puede tener uno de los siguientes valores:

    - ``none``. Sugiere bien que el autor cree que el usuario no tendrá que
      consultar ese video, bien que el servidor desea minimizar su tráfico;
      es decir, esta sugerencia indica que no se debe almacenar en caché este video.

    - ``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``. Que es un sinónimo del valor **auto**.

- ``poster``. La URL de la imagene que se muestra antes de reproducir el
  vídeo.

  .. code-block:: html

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


- ``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
  video que se va a incrustar.

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

Este ejemplo muestra un mensage 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>video</code>.
     </video>


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

Un elemento ``<audio>`` sirve para incrustar audios.

Se puede proporcionar contenido dentro del elemento de 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 enumerado es proporcionar una sugerencia al navegad  or sobre qué cree el autor que proporcionará la mejor experiencia para el usuario .
  Puede tener uno de los siguientes valores:

- ``none``. Sugiere bien que el autor cree que el usuario no tendrá que consultar ese
    video, bien que el servidor desea minimizar su tráfico; es decir, esta
    sugerencia indica que no se debe almacenar en caché este video;

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

- ``auto``. Sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia
    indica que, si es necesario, se puede descargar el video completo, incluso
    aunque el usuario no vaya a usarlo;

- cadena vacía. Hace lo mismo 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>
       Your browser does not support the <code>audio</code> element.
     </audio>

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

El elemento ``<source>`` permite a los autores especificar múltiples recursos
de medios alternativos para elementos de medios. No representa nada por sí solo.

Se usa para especificar los recursos de medios múltiples para los elementos
``<audio>`` y ``<video>`` en HTML 5. Se trata de un elemento vacío.

Puede usarse con los siguientes atributos:

- ``src``. Da la dirección del recurso de medios. El valor debe ser una URL no vacía válida
  potencialmente rodeada de espacios. Este atributo debe estar presente.

- ``type``. El contenido de este atributo indica el tipo del recurso multimedia,
  para ayudar al navegador a determinar si puede reproducir este recurso multimedia
  medios 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"> <!-- Picked by Firefox -->
       <source src="foo.mov" type="video/quicktime"> <!-- Picked by Safari -->
       I'm sorry; your browser doesn't support HTML 5 video.
     </video>

Este ejemplo muestra cómo ofrecer un video en formato **Ogg** para los usuarios cuyos
navegadores son compatibles con formato **Ogg** y un video en formato **QuickTime** para
los usuarios cuyos navegadores son compatibles con él. Si el elemento audio o
video 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 error y los
controles multimedia (si están activados) indicarán un error.

  .. code-block:: html

     <script>
       function fallback(video) {
         // replace <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 no está seguro de si los navegadores podrán procesar los
recursos de medios proporcionados, podrá escuchar el evento de 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 de ``<track>`` para los elementos
  multimedia.

- ``kind``. 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 video.
  - ``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 el usuario está sordo.
  - ``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 ``ejemplo``, porque el usuario está interactuando con la
    aplicación sin pantalla durante la conducción o porque el usuario está ciego).
    Sintetizado como audio.
  - ``chapters``. Títulos de capítulos, destinados a ser utilizados para navegar 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 por el usuario del ``<track>`` de texto que utiliza el navegador
  al listar los ``<track>`` de texto disponibles.

- ``src``. URL de la pista **(archivo .vtt)**. Debe ser una URL válida.
  Este atributo debe 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 de ``<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>
     <TITLE>Tienda Online</TITLE>
     <HEADER>
       <h1>Juguetes</h1>
       <IMG SRC="/images/menu.gif"
           ALT="Navegacion del menu Tienda Online . Seleccion el departamento al que quiere ir."
           USEMAP="#NAV">
     </HEADER>
       ...
     <FOOTER>
       <MAP NAME="NAV">
       <P>
         <A HREF="/clothes/">Ropa</A>
         <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
         <A HREF="/toys/">Juguetes</A>
         <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
         <A HREF="/food/">Comida</A>
         <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
         <A HREF="/books/">Libros</A>
         <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
       </P>
       </MAP>
     </FOOTER>

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 creada 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>