123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794 |
- .. 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="/gallery?mode=cover&amp;page=1">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 <map></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
|