diff options
Diffstat (limited to 'files/es/web/html')
189 files changed, 29891 insertions, 0 deletions
diff --git a/files/es/web/html/anipular_video_por_medio_de_canvas/index.html b/files/es/web/html/anipular_video_por_medio_de_canvas/index.html new file mode 100644 index 0000000000..a3ae61673d --- /dev/null +++ b/files/es/web/html/anipular_video_por_medio_de_canvas/index.html @@ -0,0 +1,126 @@ +--- +title: Manipular video por medio de canvas +slug: Web/HTML/anipular_video_por_medio_de_canvas +tags: + - Canvas + - Firefox 3.5 + - Video + - para_revisar +translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +--- +<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">{{ fx_minversion_header (3.5) }}</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al combinar las capacidades del elemento </span></span><a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""> introducido en Firefox 3.5 con un elemento </span></span><a class="internal" href="/en/HTML/Canvas" title="En/Canvas"><code>canvas</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""> , puedes manipular los datos de video en tiempo real para incorporar una variedad de efectos visuales que se mostrarán en el video.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este artículo, adaptado de <a class="external" href="http://blog.mozbox.org/post/2009/02/25/video-canvas%3A-special-effects" title="http://blog.mozbox.org/post/2009/02/25/video-canvas:-special-effects">esta entrada del blog</a> de Paul Rouget, muestra cómo realizar una inserción croma (también conocida como el "efecto pantalla verde") utilizando el código JavaScript.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a href="/samples/video/chroma-key/index.xhtml" title="samples/video/chroma-key/index.xhtml">Ver este ejemplo en vivo</a> .</span></span></p> +<h2 id="El_contenido_del_documento"><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El contenido del documento</span></span></h2> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El documento XHTML que se utiliza para representar este contenido se muestra a continuación.</span></span></p> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + body { + background: black; + color:#CCCCCC; + } + #c2 { + background-image: url(foo.png); + background-repeat: no-repeat; + } + div { + float: left; + border :1px solid #444444; + padding:10px; + margin: 10px; + background:#3B3B3B; + } + </style> + <script type="text/javascript;version=1.8" src="main.js"></script> + </head> + + <body onload="processor.doLoad()"> + <div> + <video id="video" src="video.ogv" controls="true"/> + </div> + <div> + <canvas id="c1" width="160" height="96"/> + <canvas id="c2" width="160" height="96"/> + </div> + </body> +</html> +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los puntos clave a tener en cuenta son:</span></span></p> +<ol> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este documento establece dos elemento <a class="internal"><code>canvas</code></a> , con los identificadores de <code>c1</code> y <code>c2</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Canvas <code>c1</code> se utiliza para mostrar la imagen actual del video original, mientras que <code>c2</code> se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; <code>c2</code> se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El código JavaScript es importado de un script llamado <code>main.js</code> ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cuando se carga el documento, se ejecuta el método <code>processor.doLoad()</code> de <code>main.js</code>.</span></span></li> +</ol> +<h2 id="El_código_JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El código JavaScript</span></span></h2> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El código JavaScript en <code>main.js</code> consta de tres métodos.</span></span></p> +<h3 id="Inicializar_el_reproductor_de_croma"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Inicializar el reproductor de croma</span></span></h3> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El método <code>doLoad()</code> se llama cuando el documento XHTML se carga inicialmente.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La función de este método es preparar las variables necesarias para el código de procesamiento del croma y la creación de un detector de eventos para que podamos detectar cuándo inicia el usuario la reproducción del video.</span></span></p> +<pre class="brush: js"> doLoad: function() { + this.video = document.getElementById("video"); + this.c1 = document.getElementById("c1"); + this.ctx1 = this.c1.getContext("2d"); + this.c2 = document.getElementById("c2"); + this.ctx2 = this.c2.getContext("2d"); + let self = this; + this.video.addEventListener("play", function() { + self.width = self.video.videoWidth / 2; + self.height = self.video.videoHeight / 2; + self.timerCallback(); + }, false); + }, +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este código obtiene referencias a los elementos del documento XHTML que son de particular interés, a saber, el elemento <code>video</code> y los dos elementos <code>canvas</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">También recupera las referencias a los contextos gráficos para cada uno de los dos elementos canvas.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Estos serán utilizados cuando estamos haciendo de verdad el efecto croma.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Luego <code>addEventListener()</code> es llamado para empezar a ver el elemento <code>video</code> de forma que podamos obtener una notificación cuando el usuario presione el botón de reproducción en el video.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En respuesta al usuario que inicia la reproducción, el código obtiene la anchura y la altura de video, reduciendo a la mitad cada uno (vamos a reducir a la mitad el tamaño del video, cuando llevamos a cabo la manipulación efecto croma). A continuación, llama al método <code>timerCallback()</code> para iniciar el visionado del video y la computación del efecto visual.</span></span></p> +<h3 id="La_devolución_de_llamada_del_temporizador"><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La devolución de llamada del temporizador</span></span></h3> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La devolución de llamada del temporizador se llama inicialmente cuando el video comienza a reproducirse (cuando tiene lugar el evento "reproducir"), a continuación, toma la responsabilidad por la que se establece a sí mismo para ser llamado periódicamente, a fin de poner en marcha el efecto croma para cada imagen.</span></span></p> +<pre class="brush: js"> timerCallback: function() { + if (this.video.paused || this.video.ended) { + return; + } + this.computeFrame(); + let self = this; + setTimeout(function () { + self.timerCallback(); + }, 0); + }, +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo primero que la devolución de llamada hace es comprobar si el video se está aún reproduciendo, y si no lo está, la devolución de llamada regresa inmediatamente sin hacer nada.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A continuación, llama al método <code>computeFrame()</code>, que lleva a cabo la manipulación del efecto croma en la imagen de video actual.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo último que la devolución de llamada hace es llamar a <code>setTimeout()</code> para programarse para ser llamado lo más pronto posible.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el mundo real, es probable que programes esto en función de la velocidad de fotogramas del video.</span></span></p> +<h3 id="Manipulación_de_los_datos_de_la_imagen_del_video"><span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Manipulación de los datos de la imagen del video</span></span></h3> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El método <code>computeFrame()</code>, que se muestra a continuación, se encarga de ir a buscar realmente un fotograma de datos y realizar el efecto croma.</span></span></p> +<pre class="brush: js"> computeFrame: function() { + this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); + let frame = this.ctx1.getImageData(0, 0, this.width, this.height); + let l = frame.data.length / 4; + + for (let i = 0; i < l; i++) { + let r = frame.data[i * 4 + 0]; + let g = frame.data[i * 4 + 1]; + let b = frame.data[i * 4 + 2]; + if (g > 100 && r > 100 && b < 43) + frame.data[i * 4 + 3] = 0; + } + this.ctx2.putImageData(frame, 0, 0); + return; + } +</pre> +<p>Cuando esta rutina es llamada, el elemento video muestra el fotograma de datos de video más reciente, que tiene este aspecto:</p> +<p><img alt="video.png" class="internal default" src="/@api/deki/files/3282/=video.png" style="width: 320px; height: 192px;"></p> +<p>En la línea 2, ese fotograma de video se copia al contexto gráfico <code>ctx1</code> del primer lienzo, especificando como alto y ancho los valores que previamente guardamos para dibujar el fotograma a mitad de tamaño. <span class="goog-gtc-unit" id="goog-gtc-unit-104"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Ten en cuenta que puedes pasar simplemente el elemento de video al método <code>drawImage()</code> del contexto para dibujar el fotograma de video actual en dicho contexto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-105"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El resultado es:</span></span></p> +<p><img alt="sourcectx.png" class="internal default" src="/@api/deki/files/3284/=sourcectx.png" style="width: 160px; height: 96px;"></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-106"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Línea 3 obtiene una copia de los datos gráficos del actual fotograma de video llamando al método <code>getImageData()</code> en el primer contexto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-107"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto proporciona los datos de imagen en píxeles de 32 bits sin procesar que podemos después manipular.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-108"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Línea 4 calcula el número de píxeles de la imagen al dividir entre cuatro el tamaño total de los datos de la imagen del fotograma.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-109"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El bucle <code>for</code> que comienza en la línea 6 explora a través de los píxeles del fotograma, extrayendo los valores rojo, verde y azul para cada píxel, y compara los valores frente a números predeterminados que se utilizan para detectar la pantalla verde que se reemplazará por la imagen de fondo fija importada de <code>foo.png</code> .</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-110"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cada píxel de datos de imagen del fotograma que se encuentra que está dentro de los parámetros que se consideran parte de la pantalla verde tiene su valor alfa reemplazado por un cero, lo que indica que el píxel es totalmente transparente.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-111"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Como resultado, la imagen final tiene toda el área de pantalla verde 100% transparente, de modo que cuando se dibuja en el contexto de destino en la línea 13, el resultado es una superposición sobre el fondo estático.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-112"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La imagen resultante tiene este aspecto:</span></span></p> +<p><img alt="output.png" class="internal default" src="/@api/deki/files/3283/=output.png" style="width: 161px; height: 96px;"></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto se hace en varias ocasiones mientras el video se reproduce, de manera que fotograma tras fotograma se procesa y se muestra con el efecto de croma.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a href="/samples/video/chroma-key/index.xhtml" title="samples/video/chroma-key/index.xhtml">Ver este ejemplo en vivo</a> .</span></span></p> +<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-115"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Consulta también</span></span></h2> +<ul> + <li><a class="internal" href="/es/Usando_audio_y_video_en_Firefox" title="es/Usando audio y video en Firefox"><span class="goog-gtc-unit" id="goog-gtc-unit-116"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Usar audio y video en Firefox</span></span></a></li> +</ul> +<p>{{ languages ( { "en": "En/Manipulating_video_using_canvas" } ) }}</p> diff --git a/files/es/web/html/atributos/accept/index.html b/files/es/web/html/atributos/accept/index.html new file mode 100644 index 0000000000..b98ff8b644 --- /dev/null +++ b/files/es/web/html/atributos/accept/index.html @@ -0,0 +1,169 @@ +--- +title: 'HTML el atributo: accept' +slug: Web/HTML/Atributos/accept +tags: + - Accept + - Archivo + - Entrada + - Input + - Referencia + - atributo +translation_of: Web/HTML/Attributes/accept +--- +<p class="summary"><span class="seoSummary">El atributo <strong><code>accept</code></strong> toma como valor una lista separada por comas de uno o más tipos de archivos, o {{anch("Especificadores de tipo de archivo únicos","especificadores de tipo de archivo únicos")}}, que describen qué tipos de archivo permitir. </span>La propiedad «<em>accept</em>» es un atributo del tipo {{HTMLElement("input/file", "file")}} {{HTMLElement("input")}}. Se admitía en el elemento {{HTMLElement("form")}}, pero se eliminó a favor de {{HTMLElement("input/file", "file")}} en HTML5.</p> + +<p>Debido a que un determinado tipo de archivo se puede identificar de más de una manera, es útil proporcionar un conjunto completo de especificadores de tipo cuando necesiten archivos de un tipo específico, o usar el comodín para indicar que un tipo de cualquier formato es aceptable.</p> + +<p>Por ejemplo, hay varias formas de identificar los archivos de Microsoft Word, por lo que un sitio que acepta archivos de Word puede usar un <code><input></code> como este:</p> + +<pre class="brush: html notranslate"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<p>Mientras que si aceptas un archivo multimedia, es posible que desees incluir cualquier formato de ese tipo de medio:</p> + +<pre class="brush: html notranslate"><input type="file" id="soundFile" accept="audio/*"> +<input type="file" id="videoFile" accept="video/*"> +<input type="file" id="imageFile" accept="image/*"></pre> + +<p>El atributo <code>accept</code> no valida los tipos de archivos seleccionados; simplemente proporciona sugerencias para los navegadores para guiar a los usuarios hacia la selección de los tipos de archivo correctos. Todavía es posible (en la mayoría de los casos) que los usuarios cambien una opción en el selector de archivos que hace posible anular esto y seleccionar cualquier archivo que deseen, y luego elegir tipos de archivo incorrectos.</p> + +<p>Debido a esto, te debes asegurar de que el requisito esperado esté validado en el lado del servidor.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Cuando se configura en un tipo de entrada de archivo, el selector de archivos nativo que se abre solo debe permitir seleccionar archivos del tipo de archivo correcto. La mayoría de los sistemas operativos aligeran los archivos que no coinciden con los criterios y no se pueden seleccionar.</p> + +<div id="ejemplo_sencillo"> +<pre class="brush: html notranslate"><p> + <label for="soundFile">Selecciona un archivo de audio:</label> + <input type="file" id="soundFile" accept="audio/*"> + </p> + <p> + <label for="videoFile">Selecciona un archivo de video:</label> + <input type="file" id="videoFile" accept="video/*"> + </p> + <p> + <label for="imageFile">Selecciona algunas imágenes:</label> + <input type="file" id="imageFile" accept="image/*" multiple> + </p></pre> + +<p>{{EmbedLiveSample('ejemplo_sencillo', '100%', 200)}}</p> + +<p>Ten en cuenta que el último ejemplo te permite seleccionar varias imágenes. Consulta el atributo <code><a href="multiple">multiple</a></code> para obtener más información.</p> +</div> + +<h2 id="Especificadores_de_tipo_de_archivo_únicos">Especificadores de tipo de archivo únicos</h2> + +<p>Un <strong>especificador de tipo de archivo único</strong> es una cadena que describe un tipo de archivo que el usuario puede seleccionar en un elemento {{HTMLElement("input")}} de tipo <code>file</code>. Cada especificador de tipo de archivo único puede adoptar una de las siguientes formas:</p> + +<ul> + <li>Una extensión de nombre de archivo válida que no distingue entre mayúsculas y minúsculas, que comienza con un punto ("."). Por ejemplo: <code>.jpg</code>, <code>.pdf</code>, o <code>.doc</code>.</li> + <li>Una cadena de tipo MIME válida, sin extensiones.</li> + <li>La cadena <code>audio/*</code> significa "cualquier archivo de audio".</li> + <li>La cadena <code>video/*</code> significa "cualquier archivo de video".</li> + <li>La cadena <code>image/*</code> significa "cualquier archivo de imagen".</li> +</ul> + +<p>El atributo <code>accept</code> toma como valor una cadena que contiene uno o más de estos especificadores de tipo de archivo únicos, separados por comas. Por ejemplo, un selector de archivos que necesita contenido que se puede presentar como una imagen, incluidos los formatos de imagen estándar y los archivos PDF, podría verse así:</p> + +<pre class="brush: html notranslate"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="Usar_inputs_de_archivo">Usar <em>input</em>s de archivo</h2> + +<h3 id="Un_ejemplo_básico">Un ejemplo básico</h3> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Elige el archivo a cargar</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Esto produce la siguiente salida:</p> + +<p>{{EmbedLiveSample('Un_ejemplo_básico', 650, 60)}}</p> + +<div class="note"> +<p><strong>Nota</strong>: También puedes encontrar este ejemplo en GitHub; consulta <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">código fuente</a> y también puedes <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">verlo funcionando en vivo</a>.</p> +</div> + +<p>Independientemente del dispositivo o sistema operativo del usuario, el <code><input></code> de archivo proporciona un botón que abre un cuadro de diálogo selector de archivos que permite al usuario elegir un archivo.</p> + +<p>La inclusión del atributo <code><a href="multiple">multiple</a></code>, como se muestra arriba, especifica que se pueden elegir varios archivos a la vez. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla <kbd>Mayús</kbd> o <kbd>Control</kbd> y luego haciendo clic). Si solo deseas que el usuario elija un único archivo por <code><input></code>, omite el atributo <code>multiple</code>.</p> + +<h3 id="Limitar_los_tipos_de_archivo_aceptados">Limitar los tipos de archivo aceptados</h3> + +<p>A menudo, no querrás que el usuario pueda elegir cualquier tipo de archivo arbitrario; en su lugar, quieres que seleccionen archivos de un tipo o tipos específicos. Por ejemplo, si la entrada de tu archivo permite a los usuarios cargar una imagen de perfil, probablemente desees que seleccionen formatos de imagen compatibles con la web, como {{Glossary("JPEG")}} o {{Glossary("PNG")}}.</p> + +<p>Los tipos de archivo aceptables se pueden especificar con el atributo {{HTMLAttrxRef("accept", "input/file")}}, que toma una lista separada por comas de extensiones de archivo permitidas o tipos MIME. Algunos ejemplos:</p> + +<ul> + <li><code>accept="image/png"</code> o <code>accept=".png"</code> — Acepta archivos PNG.</li> + <li><code>accept="image/png, image/jpeg"</code> o <code>accept=".png, .jpg, .jpeg"</code> — Acepta archivos PNG o JPEG.</li> + <li><code>accept="image/*"</code> — Acepta cualquier archivo con un tipo MIME de <code>image/*</code>. (Muchos dispositivos móviles también permiten que el usuario tome una foto con la cámara cuando se usa).</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — Acepta cualquier cosa que huela a un documento de MS Word.</li> +</ul> + +<p>Veamos un ejemplo más completo:</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Elige el archivo para cargar</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>{{EmbedLiveSample('Limitar_los_tipos_de_archivo_aceptados', 650, 60)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'atributo accept')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'Atributo accept')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.attribute.accept")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Using_files_from_web_applications", "Uso de archivos de aplicaciones web")}}</li> + <li>{{web.link("/es/docs/Web/API/File", "API de File")}}</li> +</ul> diff --git a/files/es/web/html/atributos/autocomplete/index.html b/files/es/web/html/atributos/autocomplete/index.html new file mode 100644 index 0000000000..b8546e368d --- /dev/null +++ b/files/es/web/html/atributos/autocomplete/index.html @@ -0,0 +1,180 @@ +--- +title: The HTML autocomplete attribute +slug: Web/HTML/Atributos/autocomplete +translation_of: Web/HTML/Attributes/autocomplete +--- +<p>El atributo <code>autocomplete</code> está disponible en varios tipos de {{HTMLElement("input")}} aquellos que toman un texto o valor numérico como entrada. <span class="seoSummary"><code>autocomplete</code> </span> permite a los desarrolladores web especificar qué permisos si los hay <span class="seoSummary">{{Glossary("user agent")}} </span> debe proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como una guía para el navegador en cuanto al tipo de información que se espera en el campo.</p> + +<p> </p> + +<p>Los valores sugeridos generalmente depende del navegador. Normalmente, provienen de valores ingresados por el usuario, pero también pueden provenir de valores preconfigurados. Por ejemplo, un navegador puede permitir que el usuario guarde su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar así como también datos de tarjetas de crédito.</p> + +<p>Si un elemento {{HTMLElement("input")}} no tiene el atributo <code>autocomplete</code> , entonces los navegadores usan el atributo <code>autocomplete</code> del {{HTMLElement("form")}} que lo contiene. En otras palabras, el {{HTMLElement("form")}} del que el {{HTMLElement("input")}} desciende. También puede ser especificado en el atributo {{htmlattrxref("form", "input")}} del {{HTMLElement("input")}} en cuestión.</p> + +<p>Para más información vea el atributo {{htmlattrxref("autocomplete", "form")}} del elemento {{HTMLElement("form")}}</p> + +<div class="blockIndicator note"> +<p>Para proveer el autocompletado, el navegador necesita del los elementos <code><input></code>:</p> + +<ol> + <li>Que tengan <code>name</code> y/o <code>id</code></li> + <li>Pertenezcan a un elemento <code><form></code></li> + <li>Que el formulario tenga un botón {{HTMLElement("input/submit", "submit")}}</li> +</ol> +</div> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><code>"off"</code></dt> + <dd>The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered. + <div class="note"><strong>Note:</strong> In most modern browsers, setting <code>autocomplete</code> to <code>"off"</code> will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</div> + </dd> + <dt><code>"on"</code></dt> + <dd>The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.</dd> + <dt><code>"name"</code></dt> + <dd>The field expects the value to be a person's full name. Using <code>"name"</code> rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following <code>autocomplete</code> values if you do need to break the name down into its components: + <dl> + <dt><code>"honorific-prefix"</code></dt> + <dd>The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".</dd> + <dt><code>"given-name"</code></dt> + <dd>The given (or "first") name.</dd> + <dt><code>"additional-name"</code></dt> + <dd>The middle name.</dd> + <dt><code>"family-name"</code></dt> + <dd>The family (or "last") name.</dd> + <dt><code>"honorific-suffix"</code></dt> + <dd>The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".</dd> + <dt><code>"nickname"</code></dt> + <dd>A nickname or handle.</dd> + </dl> + </dd> + <dt><code>"email"</code></dt> + <dd>An email address.</dd> + <dt><code>"username"</code></dt> + <dd>A username or account name.</dd> + <dt><code>"new-password"</code></dt> + <dd>A new password. When creating a new account or changing passwords, this is the "Enter your new password" field, as opposed to any "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password.</dd> + <dt><code>"current-password"</code></dt> + <dd>The user's current password.</dd> + <dt><code>"organization-title"</code></dt> + <dd>A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".</dd> + <dt><code>"organization"</code></dt> + <dd>A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".</dd> + <dt><code>"street-address"</code></dt> + <dd>A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.</dd> + <dt><code>"address-line1"</code>, <code>"address-line2"</code>, <code>"address-line3"</code></dt> + <dd>Each individual line of the street address. These should only be present if the <code>"street-address"</code> is also present.</dd> + <dt><code>"address-level4"</code></dt> + <dd>The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.</dd> + <dt><code>"address-level3"</code></dt> + <dd>The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.</dd> + <dt><code>"address-level2"</code></dt> + <dd>The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.</dd> + <dt><code>"address-level1"</code></dt> + <dd>The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.</dd> + <dt><code>"country"</code></dt> + <dd>A country code.</dd> + <dt><code>"country-name"</code></dt> + <dd>A country name.</dd> + <dt><code>"postal-code"</code></dt> + <dd>A postal code (in the United States, this is the ZIP code).</dd> + <dt><code>"cc-name"</code></dt> + <dd>The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.</dd> + <dt><code>"cc-given-name"</code></dt> + <dd>A given (first) name as given on a payment instrument like a credit card.</dd> + <dt><code>"cc-additional-name"</code></dt> + <dd>A middle name as given on a payment instrument or credit card.</dd> + <dt><code>"cc-family-name"</code></dt> + <dd>A family name, as given on a credit card.</dd> + <dt><code>"cc-number"</code></dt> + <dd>A credit card number or other number identifying a payment method, such as an account number.</dd> + <dt><code>"cc-exp"</code></dt> + <dd>A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".</dd> + <dt><code>"cc-exp-month"</code></dt> + <dd>The month in which the payment method expires.</dd> + <dt><code>"cc-exp-year"</code></dt> + <dd>The year in which the payment method expires.</dd> + <dt><code>"cc-csc"</code></dt> + <dd>The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.</dd> + <dt><code>"cc-type"</code></dt> + <dd>The type of payment instrument (such as "Visa" or "Master Card").</dd> + <dt><code>"transaction-currency"</code></dt> + <dd>The currency in which the transaction is to take place.</dd> + <dt><code>"transaction-amount"</code></dt> + <dd>The amount, given in the currency specified by <code>"transaction-currency"</code>, of the transaction, for a payment form.</dd> + <dt><code>"language"</code></dt> + <dd>A preferred language, given as a valid <a href="https://en.wikipedia.org/wiki/IETF_language_tag">BCP 47 language tag</a>.</dd> + <dt><code>"bday"</code></dt> + <dd>A birth date, as a full date.</dd> + <dt><code>"bday-day"</code></dt> + <dd>The day of the month of a birth date.</dd> + <dt><code>"bday-month"</code></dt> + <dd>The month of the year of a birth date.</dd> + <dt><code>"bday-year"</code></dt> + <dd>The year of a birth date.</dd> + <dt><code>"sex"</code></dt> + <dd>A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.</dd> + <dt><code>"tel"</code></dt> + <dd>A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields: + <dl> + <dt><code>"tel-country-code"</code></dt> + <dd>The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.</dd> + <dt><code>"tel-national"</code></dt> + <dd>The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".</dd> + <dt><code>"tel-area-code"</code></dt> + <dd>The area code, with any country-internal prefix applied if appropriate.</dd> + <dt><code>"tel-local"</code></dt> + <dd>The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use <code>"tel-local-prefix"</code> for "555" and <code>"tel-local-suffix"</code> for "6502".</dd> + </dl> + </dd> + <dt><code>"tel-extension"</code></dt> + <dd>A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.</dd> + <dt><code>"impp"</code></dt> + <dd>A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".</dd> + <dt><code>"url"</code></dt> + <dd>A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.</dd> + <dt><code>"photo"</code></dt> + <dd>The URL of an image representing the person, company, or contact information given in the other fields in the form.</dd> +</dl> + +<p>See the <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> for more detailed information.</p> + +<div class="note"> +<p><strong>Note:</strong> The <code>autocomplete</code> attribute also controls whether Firefox will — unlike other browsers — <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an <code><input></code> across page loads. The persistence feature is enabled by default. Setting the value of the <code>autocomplete</code> attribute to <code>off</code> disables this feature. This works even when the <code>autocomplete</code> attribute would normally not apply to the <code><input></code> by virtue of its <code>type</code>. See {{bug(654072)}}.</p> +</div> + +<h2 id="Administrative_levels_in_addresses">Administrative levels in addresses</h2> + +<p>The four administrative level fields (<code>"address-level1"</code> through <code>"address-level4"</code>) describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.</p> + +<p><code>"address-level1"</code> always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.</p> + +<h3 id="Form_layout_flexibility">Form layout flexibility</h3> + +<p>Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.</p> + +<h3 id="Variations">Variations</h3> + +<p>The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.</p> + +<h4 id="United_States">United States</h4> + +<p>A typical home address within the United States looks like this:</p> + +<p>432 Anywhere St<br> + Exampleville CA 95555</p> + +<p>In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus <code>"address-level1"</code> is the state, or "CA" in this case.</p> + +<p>The second-least specific portion of the address is the city or town name, so <code>"address-level2"</code> is "Exampleville" in this example address.</p> + +<p>United States addresses do not use levels 3 and up.</p> + +<h4 id="United_Kingdom">United Kingdom</h4> + +<p>The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.</p> + +<h4 id="China">China</h4> + +<p>China can use as many as three administrative levels: the province, the city, and the district.</p> diff --git a/files/es/web/html/atributos/index.html b/files/es/web/html/atributos/index.html new file mode 100644 index 0000000000..03e7d8baee --- /dev/null +++ b/files/es/web/html/atributos/index.html @@ -0,0 +1,677 @@ +--- +title: Referencia de Atributos HTML +slug: Web/HTML/Atributos +tags: + - HTML + - Referencia + - Web + - atributo +translation_of: Web/HTML/Attributes +--- +<p>Los elementos en HTML tienen <strong>atributos</strong>; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.</p> + +<h2 id="Lista_de_Atributos">Lista de Atributos</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Nombre del Atributo</th> + <th>Elementos</th> + <th>Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>accept</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Lista de tipos aceptados por el servidor, usualmente un tipo de archivo.</td> + </tr> + <tr> + <td><code>accept-charset</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Lista de juegos de caracteres soportados.</td> + </tr> + <tr> + <td><code>accesskey</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_Globales" title="/es/docs/Web/HTML/Atributos_Globales">Atributos Globales</a></td> + <td>Define una tecla que activa o agrega un foco al elemento.</td> + </tr> + <tr> + <td><code>action</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>La URL del programa que procesa la información enviada en el formulario.</td> + </tr> + <tr> + <td><code>align</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> + <td>Especifica el alineamiento horizontal del elemento.</td> + </tr> + <tr> + <td><code>alt</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> + <td>Texto alternativo en caso de que la imagen no se pueda mostrar.</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Indica que el script debería ejecutarse asincrónicamente.</td> + </tr> + <tr> + <td><code>autocomplete</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>El elemento debería recibir foco automáticamente después de haberse cargado la página.</td> + </tr> + <tr> + <td><code>autoplay</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>El audio o video debería empezar lo antes posible.</td> + </tr> + <tr> + <td><code>autosave</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Previous values should persist dropdowns of selectable values across page loads.</td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>Color de fondo del elemento.</p> + + <div class="note"> + <p><strong>Nota:</strong> Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("background-color") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>border</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>El ancho del borde.</p> + + <div class="note"> + <p><strong>Nota:</strong> Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("border") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>buffered</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Contiene un rango de tiempo multimedia almacenado.</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Cadena de desafío que se envía junto con la clave pública.</td> + </tr> + <tr> + <td><code>charset</code></td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>Declara la codificación de caracteres de la página o del script.</td> + </tr> + <tr> + <td><code>checked</code></td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>Indica que el elemento debería estar marcado al cargar la página.</td> + </tr> + <tr> + <td><code>cite</code></td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>Contiene una URL que apunta a la fuente de la cita o cambio.</td> + </tr> + <tr> + <td><code>class</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Usualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.</td> + </tr> + <tr> + <td><code>code</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>Especifica la URL del archivo de tipo applet a ser cargado y ejecutado.</td> + </tr> + <tr> + <td><code>codebase</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>Este atributo contiene la URL absoluta o relativa del directorio donde los archivos de applets (.class) referenciados en el codigo se encuentran almacenados.</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB.</p> + + <div class="note"> + <p><strong>Nota:</strong> Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("color") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Define el número de columnas en un área de texto.</td> + </tr> + <tr> + <td><code>colspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Define el número de columnas que una celda debe contener.</td> + </tr> + <tr> + <td><code>content</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>Un valor asociado con <code>http-equiv</code> o <code>name</code> dependiendo del contexto.</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Indica si el contenido del elemento es editable.</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define el ID del elemento {{ HTMLElement("menu") }} que servira como menú de contexto para otro elemento.</td> + </tr> + <tr> + <td><code>controls</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indica si el navegador debe mostrar controles de reproduccion al usuario.</td> + </tr> + <tr> + <td><code>coords</code></td> + <td>{{ HTMLElement("area") }}</td> + <td>Un conjunto de valores que especifican las coordenadas del area.</td> + </tr> + <tr> + <td><code>data</code></td> + <td>{{ HTMLElement("object") }}</td> + <td>Especifica la URL del recurso.</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Permite asociar atributos presonalizados a un elemento HTML.</td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>Indica la fecha y hora asociadas con el elemento.</td> + </tr> + <tr> + <td><code>default</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Indica que la pista debe estar habilitada a menos que las preferencias del usuario indiquen algo diferente.</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Indica que el código debe ser ejecutado despues de que la página este cargada.</td> + </tr> + <tr> + <td><code>dir</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define la dirección del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).</td> + </tr> + <tr> + <td><code>dirname</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.</td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica si el usuario puede interactuar con el elemento.</td> + </tr> + <tr> + <td><code>download</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Indica que el hipervínculo es utilizado para descargar un recurso.</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define si el elemento puede ser arrastrado.</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Indica que el elemento acepta contenido soltado en el mismo.</td> + </tr> + <tr> + <td><code>enctype</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Define el tipo de contenido del formulario cuando el <code>método</code> del mismo es POST.</td> + </tr> + <tr> + <td><code>for</code></td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describe elementos que pertenecen a éste.</td> + </tr> + <tr> + <td><code>form</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica el formulario al que pertenece el elemento.</td> + </tr> + <tr> + <td><code>formaction</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> + <td>Indica la acción del elemento, anulando la acción definida en {{ HTMLElement("form") }}.</td> + </tr> + <tr> + <td><code>headers</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>IDs de los elementos <code><th></code> que aplican a este elemento.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>Especifica la altura de los elementos enumerados aquí. Para todos los demás elementos, usa la propiedad CSS {{cssxref("height")}} en su lugar.</p> + + <div class="note"> + <p><strong>Nota:</strong> En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>hidden</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Evita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script</td> + </tr> + <tr> + <td><code>high</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica el menor valor del rango alto.</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td>La URL de un recurso asociado.</td> + </tr> + <tr> + <td><code>hreflang</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Especifica el lenguaje del recurso asociado.</td> + </tr> + <tr> + <td><code>http-equiv</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>Indica una directiva que puede alterar el comportamiento de la pagina y como es leida por los exploradores.</td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{ HTMLElement("command") }}</td> + <td> + <p>Especifica una imagen relacionada con el comando.</p> + + <div class="note"> + <p><strong>Note:</strong> El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.</p> + </div> + </td> + </tr> + <tr> + <td><code>id</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Identificador el elemento para acceder al mismo desde CSS o Javascript, este indicador debe ser unico para cada elemento.</td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{ HTMLElement("img") }}</td> + <td>Indica que la imagen es parte de un mapa de imagen del servidor.</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Indica que el elemento contiene el valor de la propiedad especificada de un conjunto.</td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td> + <p>Especifica el tipo de clave generada.</p> + + <div class="note"> + <p><strong>Nota:</strong> RSA es el valor por defecto.</p> + </div> + </td> + </tr> + <tr> + <td><code>kind</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Specifies the kind of text track.</td> + </tr> + <tr> + <td><code>label</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Especifica el título de la pista con un formato legible por el usuario.</td> + </tr> + <tr> + <td><code>lang</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define el lenguaje utilizado en el elemento.</td> + </tr> + <tr> + <td><code>language</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Define el lenguage (de programación) utilizado en el elemento.</td> + </tr> + <tr> + <td><code>list</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifica una serie de valores predefinidos para ser sugeridos al usuario.</td> + </tr> + <tr> + <td><code>loop</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>Indica si el medio debe volver a ser reproducido desde el principio al llegar al final.</td> + </tr> + <tr> + <td><code>low</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica el valor mas alto del rango bajo.</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{ HTMLElement("html") }}</td> + <td>Especifica la URL del manifiesto de cache para el documento.</td> + </tr> + <tr> + <td><code>max</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indica el máximo valor aceptado.</td> + </tr> + <tr> + <td><code>maxlength</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Define el mayor número de caracteres aceptados.</td> + </tr> + <tr> + <td><code>media</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>Da un indicio del tipo de medio para el cual el recurso vinculado fue creado.</td> + </tr> + <tr> + <td><code>method</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Define el método <a href="/es/docs/Web/HTTP">HTTP</a> a emplear para enviar el formulario. Puede ser <code>GET</code> (predeterminado) o <code>POST</code>.</td> + </tr> + <tr> + <td><code>min</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Indica el valor mínimo aceptado.</td> + </tr> + <tr> + <td><code>multiple</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indica si múltiples valores pueden ser ingresados.</td> + </tr> + <tr> + <td><code>muted</code></td> + <td>{{ HTMLElement("video") }}</td> + <td>Indica si el audio será silenciado inicialmente al cargar la página.</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> + <td>Nombre del elemento. Por ejemplo utilizado por el servidor para identificar los campos en el envio de formularios.</td> + </tr> + <tr> + <td><code>novalidate</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Este atributo indica que el formulario no debe ser validado cuando se envíe.</td> + </tr> + <tr> + <td><code>open</code></td> + <td>{{ HTMLElement("details") }}</td> + <td>Indica si los detalles de la página seran mostrados cuando cargue la misma.</td> + </tr> + <tr> + <td><code>optimum</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica el valor numérico óptimo.</td> + </tr> + <tr> + <td><code>pattern</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Define una expresion regular con la cual el valor del elemento debe ser validado.</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.</td> + </tr> + <tr> + <td><code>placeholder</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo.</td> + </tr> + <tr> + <td><code>poster</code></td> + <td>{{ HTMLElement("video") }}</td> + <td>Una URL que indica un cuadro a mostrar hasta que el usuario reproduzca o navegue en el video.</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indica si el recurso o partes del mismo deben ser precargadas.</td> + </tr> + <tr> + <td>pubdate</td> + <td>{{ HTMLElement("time") }}</td> + <td>Indica si esta fecha y tiempo concuerda con la fecha y tiempo del {{ HTMLElement("article") }} mas cercano (ancestro).</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{ HTMLElement("command") }}</td> + <td> + <p>Indica los nombres de los comandos de tipo radio, que seran alternados si el comando en si es alternado. Este atributo debe ser omitido si el tipo de comando no es radio.</p> + + <div class="note"> + <p><strong>Note:</strong> El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.</p> + </div> + </td> + </tr> + <tr> + <td><code>readonly</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica si el elemento puede ser editado por el usuario.</td> + </tr> + <tr> + <td><code>rel</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Especifica la relación entre el objeto destino y el objeto enlace.</td> + </tr> + <tr> + <td><code>required</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica si se requiere rellenar o no este elemento.</td> + </tr> + <tr> + <td><code>reversed</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Indica si la lista debe ser mostrada en orden descendente en vez de ascendente.</td> + </tr> + <tr> + <td><code>rows</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Define el número de filas en un área de texto.</td> + </tr> + <tr> + <td><code>rowspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Define el número de filas que una celda de una tabla debe abarcar.</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Lista de restricciones a ser desactivadas en el iframe.</td> + </tr> + <tr> + <td><code>scope</code></td> + <td>{{ HTMLElement("th") }}</td> + <td>Define las celdas que la cabecera definió en este elemento.</td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>{{ HTMLElement("style") }}</td> + <td>Indica si el estilo será aplicado sólo al elemento inmediato superior (padre). de no ser definido, el estilo se aplicara de forma global.</td> + </tr> + <tr> + <td><code>seamless</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Indica si el iframe debe ser cargado como parte del mismo documento.</td> + </tr> + <tr> + <td><code>selected</code></td> + <td>{{ HTMLElement("option") }}</td> + <td>Define un valor que será seleccionado al cargar la página.</td> + </tr> + <tr> + <td><code>shape</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Define una región seleccionable para hacer hipervínculos asociados con una forma asociada a una figura para crear un mapa. Los valores para este atributo son: <code>circle</code>, <code>defaul</code>, <code>plygon</code> y <code>rect</code>.</td> + </tr> + <tr> + <td><code>size</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Define el ancho del elemento (en píxeles). Si el atributo del elemento es del <code>tipo</code> <code>text</code> o <code>password</code> entonces es el número de caracteres.</td> + </tr> + <tr> + <td><code>sizes</code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td> + <td>Define los tamaños en los que el icono puede ser cargado.</td> + </tr> + <tr> + <td><code>span</code></td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td>Indica el número de columnas que se agrupan.</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Indica si se permite la corrección ortográfica para el elemento.</td> + </tr> + <tr> + <td><code>src</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>La URL del contenido integrable.</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Especifica el contenido de la página incluida.</td> + </tr> + <tr> + <td><code>srclang</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Especifica el lenguaje del contenido de la pista.</td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{ HTMLElement("img") }}</td> + <td> </td> + </tr> + <tr> + <td><code>start</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Define el número inicial de la lista (si es diferente a 1).</td> + </tr> + <tr> + <td><code>step</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Indica el valor del incremento para un valor numerico o de fecha.</td> + </tr> + <tr> + <td><code>style</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define los estilos CSS que anulan los estilos establecidos previamente.</td> + </tr> + <tr> + <td><code>summary</code></td> + <td>{{ HTMLElement("table") }}</td> + <td> + <p>Contiene una descripción del contenido de la tabla.</p> + + <p>Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento {{ HTMLElement("caption") }} en la tabla.</p> + </td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Sobrescribe el orden de tabulacion del navegador y usa el especificado.</td> + </tr> + <tr> + <td><code>target</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td> + <p>Especifica el marco destino en un vínculo.</p> + + <p>Valores especiales: "_blank" indica una nueva ventana, "_parent" indica el marco padre del marco que contiene el código fuente, "_self" indica el marco donde está el código fuente y "_top" indica la ventana completa del navegador.</p> + </td> + </tr> + <tr> + <td><code>title</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Texto a ser mostrado cuando el cursor esté sobre el elemento.</td> + </tr> + <tr> + <td><code>type</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>Define el tipo de elemento.</td> + </tr> + <tr> + <td><code>usemap</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td> + <p>Indica la URL parcial de un image map asociado con el elemento.</p> + + <div class="note"> + <p><strong>Note:</strong> Este atributo no puede ser usado si el elemento {{ HTMLElement("img") }} desciende de un {{ HTMLElement("button") }} o {{ HTMLElement("a") }}</p> + </div> + </td> + </tr> + <tr> + <td><code>value</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>Define el valor predeterminado a ser mostrado al cargar la página.</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>Para los elementos enumerados aquí, esto establece el ancho del elemento.</p> + + <div class="note"> + <p><strong>Nota:</strong> En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indica la forma en la cual el texto debe ser envuelto.</td> + </tr> + </tbody> +</table> + +<h2 id="Contenido_versus_atributos_IDL">Contenido versus atributos IDL</h2> + +<p>En HTML, la mayoria de los atributos tiene dos caras: el <strong>atributo de contenido</strong> y el <strong>atributo IDL</strong></p> + +<p>El atributo de contenido es aquel que se define desde el contenido (Codigo HTML) y puedes definirlo u obtenerlo con {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. El atributo de contenido es siempre un string incluso cuando el valor esperado en un integer. Por ejemplo, para definir el maxlength de un {{HTMLElement("input")}} a 42 usando el atributo de contenido, se debe llamar a <code>setAttribute("maxlength", "42") en ese elemento.</code></p> + +<p>El atributo IDL, tambien conocido como propiedad JavaScript. Estos son atributos que se pueden leer o definir usando JavaScript como <code>element.foo.</code>. El atributo IDL siempre va a usar (pero puede transformarse) en el atributo de contenido subyacente para retornar un valor cuando lo obtiene y lo guarda en el atributo de contenido cuando es definido. En otras palabras el atributo IDL, en esencia, refleja los atributos de contenido.</p> + +<p>La mayoria del tiempo, los atributos IDL pueden retornar sus valores como realmente son usados. Por ejemplo, el <code>type</code> por defecto para los elementos {{HTMLElement("input")}} es "texto", entonces si defines <code>input.type="foobar",</code> el elemento <code><input></code> sera de tipo texto (en apariencia y comportamiento) pero el valor del Atributo de contenido "type" sera "foobat". De cualquier manera, el <code>type</code> del atributo IDL retornara el string "text".</p> + +<p>Los atributos IDL no son siempre strings; por ejemplo, <code>input.maxlength</code> es un numero (marcado como long). Cuando se usan atributos IDL, lees o defines valores del tipo deseado, entonces <code>input.maxlength </code>siempre retornara un numero y cuando definas <code>input,maxlength</code>, esperara un numero. Si se le entrega otro tipo, se convierte antomaticamente a numero como se especifica en las reglas del estandar de JavaScript para conversiones de tipo.</p> + +<p>Los atributos IDL pueden <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflejar otros tipos</a> como un long sin asignacion, URL's, booleanos, etc. Desafortunadamente no hay reglas claras y el comportamiento que los atributos IDL en conjunto con sus respectivos atributos de contenido depende del mismo atributo. La mayoria del tiempo, siguen <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">las reglas de diseño en la especificacion</a>, pero algunas veces no lo hacen. Las especificaciones HTML tratan de ser lo mas amigables para el dasarrollador como es posible, pero por varias razones (mayormente historicas), algunos aributos se comportan de forma extraña (<code>select.size</code>, por ejemplo) y debes leer las especificaciones para comprender como éste se comporta exactamente.</p> + +<h2 id="Ver_Tambien">Ver Tambien</h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Elemento" title="/es/docs/Web/HTML/Elemento">Elementos</a></li> +</ul> diff --git a/files/es/web/html/atributos/min/index.html b/files/es/web/html/atributos/min/index.html new file mode 100644 index 0000000000..4060bd81f4 --- /dev/null +++ b/files/es/web/html/atributos/min/index.html @@ -0,0 +1,162 @@ +--- +title: 'HTML el atributo: min' +slug: Web/HTML/Atributos/min +tags: + - Atributos + - Restricción de validación + - atributo + - min +translation_of: Web/HTML/Attributes/min +--- +<div id="step-include"> +<p><span class="seoSummary">El atributo {{HTMLAttrxRef("min", "input")}} define el valor mínimo que es aceptable y válido para el {{HTMLElement("input")}} que contiene el atributo. Si el {{web.link("/es/docs/Web/HTML/Element/input#attr-value", "value")}} del elemento es menor que esto, el elemento falla la {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}}. Este valor debe ser menor o igual que el valor del atributo {{HTMLAttrxRef("max", "input")}}. Si se especifica un valor para {{HTMLAttrxRef("min", "input")}} que no es un número válido, la entrada no tiene un valor mínimo.</span></p> + +<p>Válido para los tipos de entrada numérica, incluidos los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} y {{HTMLElement("input/range", "range")}}, y el elemento {{htmlelement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} es un número que especifica el valor mínimo de un control de formulario para ser considerado válido.</p> + +<h3 id="Sintaxis">Sintaxis</h3> + +<div id="step-include"> +<p>Si <code>any</code> no se establece explícitamente, los valores válidos para el <code>número</code>, los tipos de entrada de fecha/hora y los tipos de entrada de <code>range</code> son iguales a la base de paso a paso: el valor {{HTMLAttrxRef("min", "input")}} y los incrementos del valor del paso, hasta el valor {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}, si se especifica. Por ejemplo, si tienes <code><input type="number" min="10" step="2"></code>, cualquier entero par, 10 o mayor, es válido. Si se omite, <code><input type="number"></code>, cualquier número entero es válido, pero los flotantes, como 4.2, no son válidos, ya que el <code>step</code> predeterminado es 1. Para que 4.2 sea válido, <code>step</code> se debería haber configurado en <code>any</code>, 0.1, 0.2, o cualquiera, el valor mínimo tendría que ser un número terminado en 0.2 , como <code><input type="number" min="-5.2"></code></p> + +<table class="standard-table"> + <caption>Sintaxis para valores {{HTMLAttrxRef("min", "input")}} por <code><input type="" /></code></caption> + <thead> + <tr> + <th>Tipo del <code>input</code></th> + <th>Ejemplo</th> + <th>Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td><code class="brush: html">yyyy-mm-dd</code></td> + <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td><code class="brush: html">yyyy-mm</code></td> + <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td><code class="brush: html">yyyy-W##</code></td> + <td><code class="brush: html"><input type="week" min="2019-W23" step=""></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td><code class="brush: html">hh:mm</code></td> + <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td><code>yyyy-mm-ddThh:mm</code></td> + <td><code class="brush: html"><input type="datetime-local" min="2019-12-25T19:30"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td> + <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td> + <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase <code>:invalid</code></p> +</div> +</div> + +<p>Consulta {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Validación del lado del cliente")}} y {{DOMxRef("ValidityState.rangeUnderflow", "rangeUnderflow")}} para más información.</p> + +<p>Para el elemento {{HTMLElement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} define el límite numérico inferior del rango medido. Debe ser menor que el valor mínimo (atributo {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}), si se especifica. En ambos casos, si se omite, el valor predeterminado es 1.</p> + +<table class="standard-table"> + <caption>Sintaxis para valores {{HTMLAttrxRef("min", "input")}} para otros elementos</caption> + <thead> + <tr> + <th>Tipo del <code>input</code></th> + <th>Sintaxis</th> + <th>Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td> + <td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter></code></td> + </tr> + </tbody> +</table> + +<h3 id="Impacto_en_step">Impacto en <code>step</code></h3> + +<p>Los valores de {{HTMLAttrxRef("min", "input")}} y <code>step</code> definen cuáles son los valores válidos, incluso si el atributo <code>step</code> no está incluido, como el <code>step</code> predeterminado de <code>0</code>.</p> + +<p>Agrega un gran borde rojo alrededor de los {{HTMLElement("input")}}s no válidos:</p> + +<pre class="brush: css notranslate">input:invalid { + border: solid red 3px; +}</pre> + +<p>Luego define un {{HTMLElement("input")}} con un valor mínimo de 7.2, omitiendo el atributo <code>step</code>, en donde el valor predeterminado es 1.</p> + +<pre class="brush: html notranslate"><input id="myNumber" name="myNumber" type="number" min="7.2" value="8"></pre> + +<p>Dado que <code>step</code> tiene el valor predeterminado de 1, los valores válidos incluyen <code>7.2</code>, <code>8.2</code>, <code>9.2</code> y así sucesivamente. El valor 8 no es válido. Dado que incluye un valor no válido, los navegadores compatibles mostrarán el valor como no válido.</p> + +<p>{{EmbedLiveSample("Impacto_en_step",200,55)}}</p> + +<p>Si no se incluye explícitamente, <code>step</code> tiene como valor predeterminado 1 para <code>número</code> y <code>range</code>, y 1 tipo de unidad (segundo, semana, mes, día) para los {{HTMLElement("input")}}s de tipo fecha/hora.</p> +</div> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.attributes.min")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<p>Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("min", "input")}}, asegúrate de que el usuario comprenda este requisito mínimo. Posiblemente sea suficiente proporcionar instrucciones dentro de un {{HTMLElement('label')}}. Si proporcionas instrucciones fuera de las etiquetas, lo cual permite un posicionamiento y un diseño más flexibles, considera usar {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute", "aria-labelledby")}} o {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute", "aria-describedby")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Web/HTML/Attributes/step", "step")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}</li> + <li>{{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}</li> + <li>{{DOMxRef('Constraint_validation')}}</li> + <li>{{DOMxRef('validityState.rangeUnderflow')}}</li> + <li>{{CSSxRef(':out-of-range')}}</li> + <li>{{HTMLElement('input')}}</li> + <li>Los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} y {{htmlelement('meter')}}</li> +</ul> diff --git a/files/es/web/html/atributos/minlength/index.html b/files/es/web/html/atributos/minlength/index.html new file mode 100644 index 0000000000..23056673e2 --- /dev/null +++ b/files/es/web/html/atributos/minlength/index.html @@ -0,0 +1,71 @@ +--- +title: 'HTML el atributo: minlength' +slug: Web/HTML/Atributos/minlength +tags: + - Entrada + - Input + - Referencia + - atributo + - minlength + - textarea +translation_of: Web/HTML/Attributes/minlength +--- +<p class="summary">El atributo <strong><code>minlength</code></strong> define el número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un {{HTMLElement('input')}} o {{HTMLElement('textarea')}}. Debe ser un valor entero 0 o superior. Si no se especifica una longitud mínima o se especifica un número no válido, el <strong><code><input></code></strong> no tiene una longitud mínima. Este valor debe ser menor o igual que el valor de {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}; de lo contrario, el valor nunca será válido, puesto que es imposible cumplir con ambos criterios.</p> + +<p>El <strong><code><input></code></strong> fallará la restricción de validación si la longitud del valor de texto del campo es menor que la longitud mínima de unidades de código UTF-16, con {{DOMxRef('validityState.tooShort')}} devolviendo <code>true</code>. La validación de la restricción solo se aplica cuando el usuario cambia el valor. Una vez que el envío falla, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Al agregar <code>minlength="5"</code>, el valor debe estar vacío o tener cinco caracteres o más para ser válido.</p> + +<pre class="brush: html notranslate"><label for="fruit">Ingresa un nombre de fruta que tenga al menos 5 letras</label> <input type="text" minlength="5" id="fruit"></pre> + +<p>Podemos usar pseudoclases para estilizar el elemento en función de si el valor es válido. El valor será válido siempre que sea <code>null</code> (vacío) o tenga cinco o más caracteres. <em>Lima</em> no es válido, <em>limón es válido</em>.</p> + +<pre class="brush: css notranslate">input { + border: 2px solid currentcolor; +} +input:invalid { + border: 2px dashed red; +} +input:invalid:focus { + background-image: linear-gradient(pink, lightgreen); +}</pre> + +<p>{{EmbedLiveSample('Ejemplos', '100%', 200)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'atributo minlength')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'atributo minlength')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.attribute.minlength")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}</li> + <li>{{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Restricción de validación")}}</li> +</ul> diff --git a/files/es/web/html/atributos/multiple/index.html b/files/es/web/html/atributos/multiple/index.html new file mode 100644 index 0000000000..cbf465b0b8 --- /dev/null +++ b/files/es/web/html/atributos/multiple/index.html @@ -0,0 +1,182 @@ +--- +title: 'HTML el atributo: multiple' +slug: Web/HTML/Atributos/multiple +tags: + - Atributos + - Resticción de validación + - atributo +translation_of: Web/HTML/Attributes/multiple +--- +<p>El atributo booleano {{HTMLAttrxRef("multiple", "input")}}, si se establece, significa que el control del formulario acepta uno o más valores. Válido para los {{HTMLElement("input")}}s de tipo {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/file", "file")}} y {{HTMLElement("select")}}, la forma en que el usuario opta por valores múltiples depende del control del formulario.</p> + +<p>Dependiendo del tipo, el control de formulario puede tener una apariencia diferente si se establece el atributo {{HTMLAttrxRef("multiple", "input")}}. Para el {{HTMLElement("input")}} de tipo <code>file</code>, la mensajería nativa que proporciona el navegador es diferente. En Firefox, el {{HTMLElement("input")}} de tipo <code>file</code> dice "Ningún archivo seleccionado" cuando el atributo está presente y "Ningún archivo seleccionado", cuando no hay archivo seleccionado. La mayoría de los navegadores muestran un cuadro de lista de desplazamiento para un control {{HTMLElement("select")}} con el atributo {{HTMLAttrxRef("multiple", "input")}} establecido frente a un menú desplegable de una sola línea cuando se omite el atributo. El {{HTMLElement("input")}} {{HTMLElement("input/email", "email")}} muestra lo mismo, pero coincidirá con la pseudoclase {{CSSxRef(':invalid')}} si hay más de una dirección de correo electrónico separada por comas incluido si el atributo no está presente.</p> + +<p>Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/email", "email")}}, el usuario puede incluir cero (si no es {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} también), una o más direcciones de correo electrónico separadas por comas.</p> + +<pre class="brush: html notranslate"><code class="brush: html"><input type="email" <strong>multiple</strong> name="emails" id="emails"></code></pre> + +<p>Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.</p> + +<p>Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla <kbd>Mayús</kbd> o <kbd>Control</kbd> y luego haciendo clic).</p> + +<pre class="brush: html notranslate"><code class="brush: html"><input type="file" <strong>multiple</strong> name="uploads" id="uploads"></code></pre> + +<p>Cuando se omite el atributo, el usuario solo puede seleccionar un único archivo por {{HTMLElement("input")}}.</p> + +<p>El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones.</p> + +<pre class="brush: html notranslate"><select multiple name="drawfs" id="drawfs"> + <option>Gruñón</option> + <option>Feliz</option> + <option>Dormilón</option> + <option>Tímido</option> + <option>Estornudo</option> + <option>Tontín</option> + <option>Doc</option> +</select></pre> + +<p>Cuando se especifica {{HTMLAttrxRef("multiple", "input")}}, la mayoría de los navegadores mostrarán un cuadro de lista de desplazamiento en lugar de un menú desplegable de una sola línea.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="input_para_correoᵉ"><code>input</code> para correoᵉ</h3> + +<pre class="brush: html notranslate"><label for="emails">¿A quién deseas enviar un correo electrónico?</label> +<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64"> + +<datalist id="drawfemails"> + <option value="gruñón@woodworkers.com">Gruñón</option> + <option value="feliz@woodworkers.com">Feliz</option> + <option value="dormilón@woodworkers.com">Dormilón</option> + <option value="tímido@woodworkers.com">Tímido</option> + <option value="estornudo@woodworkers.com">Estornudo</option> + <option value="tontín@woodworkers.com">Tontín</option> + <option value="doc@woodworkers.com">Doc</option> +</datalist></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid {border: red solid 3px;}</pre> +</div> + +<p>Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista. Si el atributo {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} está presente, se requiere al menos una dirección de correo electrónico.</p> + +<p>Algunos navegadores admiten la aparición de la {{web.link("/es/docs/Web/HTML/Attributes/list", "lista")}} de opciones del {{HTMLElement('datalist')}} para direcciones de correo electrónico posteriores cuando haya varias. Otros no lo hacen.</p> + +<p>{{EmbedLiveSample("input_para_correoᵉ", 600, 80) }}</p> + +<h3 id="input_de_tipo_file"><code>input</code> de tipo <code>file</code></h3> + +<p>Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el {{HTMLElement("input")}} de tipo {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos:</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <p> + <label for="uploads"> + Elige las imágenes que deseas cargar: + </label> + <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple> + </p> + <p> + <label for="text">Elige un archivo de texto para cargar: </label> + <input type="file" id="text" name="text" accept=".txt"> + </p> + <p> + <input type="submit" value="Enviar"> + </p> +</form></pre> + +<p>{{EmbedLiveSample("input_de_tipo_file", 600, 80) }}</p> + +<p>Nota la diferencia en la apariencia entre el ejemplo con {{HTMLAttrxRef("multiple", "input")}} establecido y el otro {{HTMLElement("input")}} sin <code>file</code>.</p> + +<p>Cuando se envía el formulario, utilizas el {{web.link("/es/docs/Web/HTML/Element/form", "method='get'")}} el nombre de cada archivo seleccionado se habría agregado a los parámetros de la URL como <code>?uploads=img1.jpg&uploads=img2.svg</code>. Sin embargo, dado que estamos asumiendo datos de formularios de {{web.link("/es/docs/Web/API/XMLHttpRequest/multipart", "multipart")}}, usamos mucho el <code>post</code>. Consulta el elemento {{HTMLElement('form')}} y {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_method_attribute", "envío de datos del formulario")}} para obtener más información.</p> + +<h3 id="select"><code>select</code></h3> + +<p>El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones. El control generalmente tiene una apariencia diferente en función de la presencia del atributo {{HTMLAttrxRef("multiple", "input")}}, y la mayoría de los navegadores muestran un cuadro de lista de desplazamiento en lugar de una lista desplegable de una sola línea cuando el atributo está presente.</p> + +<pre class="brush: html notranslate"><form method="get" action="#"> +<p> + <label for="dwarfs">Selecciona los leñadores que te gusten:</label> + <select multiple name="drawfs" id="drawfs"> + <option>gruñón@woodworkers.com</option> + <option>feliz@woodworkers.com</option> + <option>dormilón@woodworkers.com</option> + <option>tímido@woodworkers.com</option> + <option>estornudo@woodworkers.com</option> + <option>tontín@woodworkers.com</option> + <option>doc@woodworkers.com</option> + </select> +</p> +<p> + <label for="favoriteOnly">Selecciona tu favorito:</label> + <select name="favoriteOnly" id="favoriteOnly"> + <option>gruñón@woodworkers.com</option> + <option>feliz@woodworkers.com</option> + <option>dormilón@woodworkers.com</option> + <option>tímido@woodworkers.com</option> + <option>estornudo@woodworkers.com</option> + <option>tontín@woodworkers.com</option> + <option>doc@woodworkers.com</option> + </select> +</p> +<p> + <input type="submit" value="Enviar"> +</p> +</form></pre> + +<p>{{EmbedLiveSample("select", 600, 120) }}</p> + +<p>Ten en cuenta la diferencia de apariencia entre los dos controles de formulario.</p> + +<pre class="brush: css notranslate">/* descomenta este CSS para que el multiple tenga la misma altura que single */ + +/* +select[multiple] { + height: 1.5em; + vertical-align: top; +} +select[multiple]:focus, +select[multiple]:active { + height: auto; +} +*/</pre> + +<p>Hay varias formas de seleccionar varias opciones en un elemento <code><select></code> con un atributo {{HTMLAttrxRef("multiple", "input")}}. Dependiendo del sistema operativo, los usuarios del ratón pueden mantener presionadas las teclas <kbd>Ctrl</kbd>, <kbd>Comando</kbd> o <kbd>Mayús</kbd> y luego hacer clic en varias opciones para seleccionarlas o deseleccionarlas. Los usuarios de teclado pueden seleccionar varios elementos contiguos centrándose en el elemento <code><select></code>, seleccionando un elemento en la parte superior o inferior del rango que desean seleccionar usando <kbd>Arriba</kbd> y <kbd>Teclas del cursor hacia abajo</kbd> para subir y bajar las opciones. La selección de elementos no contiguos no es tan compatible: los elementos se deben poder seleccionar y deseleccionar presionando <kbd>Espacio</kbd>, pero el soporte varía entre los navegadores.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'Atributo multiple')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'Atributo multiple')}}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<p>Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("multiple", "input")}}, informa al usuario que se permiten múltiples valores y proporciona instrucciones sobre cómo proveer más valores, como "direcciones de correo electrónico separadas con una coma".</p> + +<p>Configurar {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}<code>="1"</code> en una selección múltiple puedes hacer que aparezca como una única selección en algunos navegadores, pero luego no se expande en el enfoque, lo que perjudica la usabilidad. No hagas eso. Si cambias la apariencia de un <code>select</code>, e incluso si no lo haces, asegúrate de informar al usuario que se puede seleccionar más de una opción mediante otro método.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{HTMLElement('input')}}</li> + <li>{{htmlelement('select')}}</li> + <li>{{web.link("/es/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses", "Permitir varias direcciones de correo electrónico")}}</li> +</ul> diff --git a/files/es/web/html/atributos_de_configuracion_cors/index.html b/files/es/web/html/atributos_de_configuracion_cors/index.html new file mode 100644 index 0000000000..f7453daa96 --- /dev/null +++ b/files/es/web/html/atributos_de_configuracion_cors/index.html @@ -0,0 +1,123 @@ +--- +title: Atributos de configuración CORS +slug: Web/HTML/Atributos_de_configuracion_CORS +translation_of: Web/HTML/Attributes/crossorigin +--- +<p><span class="seoSummary">En HTML5, algunos elementos HTML que dan soporte para <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a>, tales como {{ HTMLElement("img") }} o {{ HTMLElement("video") }}, tienen un atributo <code>crossorigin</code> (propiedad <code>crossOrigin</code>), que les permite configurar las peticiones CORS de los datos que se cargan.</span> Estos atributos están enumerados, y tienen los siguientes valores posibles:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Palabra clave</td> + <td class="header">Descripción</td> + </tr> + <tr> + <td><code>anonymous</code></td> + <td>CORS, las solicitudes de este elemento no tendrán establecido el indicador de credenciales.</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>CORS, las solicitudes de este elemento tendrán marcado el indicador de credenciales; esto significa que la solicitud proporcionará credenciales.</td> + </tr> + </tbody> +</table> + +<p>Por defecto, es decir cuando el atributo no es específicado, CORS no se usa. La palabra clave "anonymous" indica que no habrá intercambio de credenciales de usuario a través de las cookies, ni por parte del cliente con certificados SSL o autenticación HTTP como se describe en la sección de terminología de la especificación CORS.</p> + +<p>Una clave inválida y un string vacío serán gestionados como una clave anónima.</p> + +<p>Especificaciones</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>13</td> + <td>{{ CompatGeckoDesktop("8.0") }}</td> + <td>11</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>{{ HTMLElement("video")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("12.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>{{ HTMLElement("video")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("12.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/En/HTTP_access_control" title="en/HTTP access control">HTTP access control</a></li> +</ul> diff --git a/files/es/web/html/atributos_globales/accesskey/index.html b/files/es/web/html/atributos_globales/accesskey/index.html new file mode 100644 index 0000000000..cb8bbcc16c --- /dev/null +++ b/files/es/web/html/atributos_globales/accesskey/index.html @@ -0,0 +1,143 @@ +--- +title: accesskey +slug: Web/HTML/Atributos_Globales/accesskey +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/accesskey +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a> <strong>accesskey</strong> provee un indicio para generar un atajo de teclado para el elemento actual . Este atributo consiste en una lista de caracteres separada por espacios (un único punto de código Unicode). El explorador usa el primero que existe en la distribución del teclado de la computadora .</p> + +<p>La operación para activar el accesskey depende del explorador y su plataforma .</p> + +<table class="standard-table"> + <tbody> + <tr> + <th> </th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>tecla</em></kbd></td> + <td>En Firefox 14 o posteriores, <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>tecla</em></kbd><br> + En Firefox 13 o anteriores, <kbd>Control</kbd> + <kbd><em>tecla</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td> + <td>N/A</td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>tecla</em></kbd></td> + </tr> + <tr> + <th>Opera</th> + <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> abre una lista de contenidos , los cuales son accesibles a través de accesskey , después se puede elegir un item presionando <kbd><em>tecla</em></kbd></td> + </tr> + </tbody> +</table> + +<p>Notar que Firefox puede personalizar la tecla de modificación requerida por las preferencias del usuario .</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el útlimo snapshot {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}. De {{SpecName('HTML4.01')}}, varios caracteres pueden se pueden establecer como el accesskey . Tambien puede establecerse sobre cualquier elemento.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Solo soportado en {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} y {{ HTMLElement("textarea") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li> <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li> +</ul> diff --git a/files/es/web/html/atributos_globales/autocapitalize/index.html b/files/es/web/html/atributos_globales/autocapitalize/index.html new file mode 100644 index 0000000000..d1f8fc446c --- /dev/null +++ b/files/es/web/html/atributos_globales/autocapitalize/index.html @@ -0,0 +1,50 @@ +--- +title: autocapitalización +slug: Web/HTML/Atributos_Globales/autocapitalize +tags: + - Atributos globales + - HTML + - Reference + - Referencia + - autocapitalización +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary">El {{web.link("/es/docs/Web/HTML/Global_attributes", "atributo global")}} {{HTMLAttrxRef("autocapitalize", "input")}} es un atributo enumerado que controla si la entrada de texto se escribe en mayúsculas automáticamente a medida que el usuario la introduce/edita.</span> El atributo debe tomar uno de los siguientes valores:</p> + +<ul> + <li><code>off</code> o <code>none</code>, no se aplica capitalización automática (todas las letras están predeterminadas en minúsculas)</li> + <li><code>on</code> o <code>sentences</code>, la primera letra de cada oración de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas</li> + <li><code>words</code>, la primera letra de cada palabra de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas</li> + <li><code>characters</code>, todas las letras de manera predeterminada deben estar en mayúsculas</li> +</ul> + +<p>El atributo {{HTMLAttrDef("autocapitalize")}} no afecta el comportamiento al escribir en un teclado físico. En cambio, afecta el comportamiento de otros mecanismos de entrada, como teclados virtuales en dispositivos móviles y entrada de voz. El comportamiento de tales mecanismos es que a menudo ayudan a los usuarios escribiendo en mayúscula automáticamente la primera letra de las oraciones. El atributo {{HTMLAttrDef("autocapitalize")}} permite a los autores redefinir ese comportamiento por elemento.</p> + +<p>El atributo {{HTMLAttrDef("autocapitalize")}} nunca hace que se habilite la autocapitalización para un elemento {{HTMLElement("input")}} con un atributo {{HTMLAttrxRef("type", "input")}} cuyo valor es {{HTMLAttrDef("url")}}, {{HTMLAttrDef("email")}} o {{HTMLAttrDef("password")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/es/web/html/atributos_globales/class/index.html b/files/es/web/html/atributos_globales/class/index.html new file mode 100644 index 0000000000..ba82c66e65 --- /dev/null +++ b/files/es/web/html/atributos_globales/class/index.html @@ -0,0 +1,105 @@ +--- +title: class +slug: Web/HTML/Atributos_Globales/class +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/class +--- +<p>{{HTMLSidebar("Global_attributes")}}<br> + El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>class</strong> es una lista de las clases del elemento separada por espacios . Las clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de los <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors">selectores de clase</a> o funciones como el método {{domxref("document.getElementsByClassName")}} del DOM.</p> + +<p>Aunque la especificación no define los requerimientos para el nombre de las clases , se alienta a los desarrolladores web a usar nombres que describan el propósito semántico del elemento, en lugar de la presentación del elemento (e.g., <em>atributo </em>para describir un atributo en lugar de <em>itálica, </em>aunque un elemento de esta clase puesde ser presentado por <em>itálica</em>). Los nombres semanticos permanecen lógicos incluso si la presentación de la página cambia .</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName('HTML4.01')}}, <code>class</code> es ahora un verdadero atributo global .</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Soportado en todos los elementos pero {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitca</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <strong>class</strong> es un atributo global verdadero solo desde Firefox 32.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li> +</ul> diff --git a/files/es/web/html/atributos_globales/contenteditable/index.html b/files/es/web/html/atributos_globales/contenteditable/index.html new file mode 100644 index 0000000000..9db8119af2 --- /dev/null +++ b/files/es/web/html/atributos_globales/contenteditable/index.html @@ -0,0 +1,107 @@ +--- +title: contenteditable +slug: Web/HTML/Atributos_Globales/contenteditable +tags: + - Atributos globales + - HTM + - Referencia +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global</a> <strong>contenteditable</strong> es un atributo enumerado que indica si el elemento debe de ser editable por el usuario . Si es así, el explorador modifca su widget para permitir la edición . El atributo debe de tener alguno de los siguientes valores :</p> + +<ul> + <li><span><code>true</code> </span> o una string vacia , que indica que el elemento debe de ser editable .</li> + <li><span><code>false</code> </span> , que indica que el elemento no debe ser editable.</li> +</ul> + +<p>Si este atributo no se establece , el valor de default es <em>heredado </em>de su elemento padre .</p> + +<p>Este es un atributo enumerado y no uno <em>booleano .</em> Esto significa que el uso explicito de uno de los valores <code>true , false </code>o la cadena vacía es obligatorio y que una código como <code><label contenteditable>Example Label</label></code> no esta permitido . El uso correcto es <code><label contenteditable="true">Example Label</label></code>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidad_en_exploradores">Compatiblidad en exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li> <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} and {{domxref("HTMLElement.isContentEditable")}}</li> +</ul> diff --git a/files/es/web/html/atributos_globales/contextmenu/index.html b/files/es/web/html/atributos_globales/contextmenu/index.html new file mode 100644 index 0000000000..9cc32f7ace --- /dev/null +++ b/files/es/web/html/atributos_globales/contextmenu/index.html @@ -0,0 +1,139 @@ +--- +title: contextmenu +slug: Web/HTML/Atributos_Globales/contextmenu +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global</a> <strong>contextmenu </strong>es el <a href="/es/docs/Web/HTML/Atributos_Globales/id"><strong>id</strong></a> de un {{HTMLElement("menu")}} para nosotros como el menu contextual para este elemento .</p> + +<p>Un <em>menu contextual </em>es un menu que aparece sobre la interacción del usuario , como por ejemplo un click derecho . HTML5 ahora permite modificar este menú . Aquí hay unos ejemplos de implementación , incluyendo menús anidados .</p> + +<div id="ContextMenu_Example"> +<h2 id="Ejemplo">Ejemplo</h2> + +<p> </p> + +<pre class="brush:html; highlight:[1,10,15]"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="share"> + <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurra! Estos aprendiendo sobre ContextMenuI en MDN a través de Mozilla ');"></menuitem> + <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></menuitem> + </menu> + </menu> + <ol> + <li>En cualquier parte del ejemplo puedes compartir la página en twitter y Facebook usando el menú de compartir de tu menú contextual.</li> + <li><pre contextmenu="changeFont" id="fontSizing">En este elemento específico de la lista , puedes cambiar el tamaño del texto usando las acciones "Incremenrar/Decrementar" de tu menú contextual ./pre></li> + <menu type="context" id="changeFont"> + <menuitem label="Increase Font" onclick="incFont()"></menuitem> + <menuitem label="Decrease Font" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage">En la imagen de abajo , puedes accionar la accion "Cambio de Imagen " en tu menú contextual .</li><br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Change Image" onclick="changeImage()"></menuitem> + </menu> + </ol> +</body> +</pre> + +<p>en conjunto con este Javascript</p> + +<pre class="brush:js">function incFont(){ + document.getElementById("fontSizing").style.fontSize="larger"; +} +function decFont(){ + document.getElementById("fontSizing").style.fontSize="smaller"; +} +function changeImage(){ + var j = Math.ceil((Math.random()*39)+1); + document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png"; +}</pre> + +<p>resulta en :</p> + +<div>{{EmbedLiveSample("ContextMenu_Example",550,200)}}</div> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoDesktop(9) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoDesktop(20) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li> <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li> +</ul> diff --git a/files/es/web/html/atributos_globales/data-_star_/index.html b/files/es/web/html/atributos_globales/data-_star_/index.html new file mode 100644 index 0000000000..436b156299 --- /dev/null +++ b/files/es/web/html/atributos_globales/data-_star_/index.html @@ -0,0 +1,108 @@ +--- +title: data-* +slug: Web/HTML/Atributos_Globales/data-* +translation_of: Web/HTML/Global_attributes/data-* +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>Los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> <strong>data-* </strong>forman una clase de atributos , llamados atributos de datos modificables , permite a la información propietaria ser intercambiada entre el <a href="/es/docs/Web/HTML">HTML</a> y su representación en el <a href="/es/docs/Referencia_DOM_de_Gecko">DOM</a> que puede ser usada por scripts . Todos esos datos modificables están disponibles a través de la interface del elemento {{domxref("HTMLElement")}} , el atributo se establece encendido . La propiedad {{domxref("HTMLElement.dataset")}} otorga acceso a ellos . </p> + +<p>El * puede ser remplazado por cualquier nombre siguiedo las<a href="http://www.w3.org/TR/REC-xml/#NT-Name"> reglas de producción de nombres xml</a> con las siguientes restricciones :</p> + +<ul> + <li>el nombre no debe de empezar con <code>xml</code> , cualquiera sea el caso usado para estas letras.</li> + <li>el nombre no debe de contener algún punto y coma (<code>U+003A</code>) .</li> + <li>el nombre no debe de contener letras mayúsculas de la A a la Z .</li> +</ul> + +<p>Notar que la propiedad {{domxref("HTMLElement.dataset")}} es un {{domxref("StringMap")}} y que el nombre del atributo de datos modificable<em>data-test-value </em>será accesible a través de <code>HTMLElement.dataset.testValue </code>como cualquier guión (<code>U+002D</code>) es reemplazado por la versión en mayúscula de la siguiente letra (camelcase) . </p> + + + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table" style="line-height: 1.5;"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop(6) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile(6) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"></h2> + +<h2 id="Ver_también">Ver también </h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</li> + <li>La propiedad {{domxref("HTMLElement.dataset")}} que permite el acceso y modifica estos valores .</li> +</ul> diff --git a/files/es/web/html/atributos_globales/dir/index.html b/files/es/web/html/atributos_globales/dir/index.html new file mode 100644 index 0000000000..4bcd43eb40 --- /dev/null +++ b/files/es/web/html/atributos_globales/dir/index.html @@ -0,0 +1,122 @@ +--- +title: dir +slug: Web/HTML/Atributos_Globales/dir +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/dir +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a>dir es un atributo enumerado que indica la direccionalidad del texto de los elementos . Puede tener los siguientes valores : </p> + +<ul> + <li><code>ltr ,</code> significa <em>izquierda</em> a <em>derecha</em> y es usado para los lenguajes que son escritos de izquierda a derecha ( como el Inglés ) .</li> + <li><code>rtl , </code>significa <em>derecha</em> a <em>izquierda</em> y es usado para los lenguajes que son escritos de la derecha a la izquierda (como el árabe ) .</li> + <li><code>auto , </code>permite al agente usuario decidir . Usa un algoritmo básico mientras parsea los caracteres dentro de un elemento hasta que encuentra un elemento con una direccionalidad fuerte , después aplica esa direccionalidad a todo el elemento .</li> +</ul> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>Notas de uso</strong></span></p> + +<p>Este atributo es obligatorio para el elemento {{ HTMLElement("bdo") }} donde este tiene un significado semántico diferente.</p> + +<ul> + <li>Este atributo no es heredado por el elemento {{ HTMLElement("bdi") }} . Si no se establece , su valor es <code>auto</code> .</li> + <li>Este atributo puede ser anulado por las propiedades de CSS {{ cssxref("direction") }} y {{ cssxref("unicode-bidi") }} , si una página CSS está activa y el elemento soporta estas propiedades.</li> + <li>Mientras la direccionalidad del texto esté semánticamente relacionada con su contenido y no con su presentación , se recomienda que los desarrolladores web usen este atributo en lugar de propiedades de CSS relacionadas , cuando sea posible . De esta forma , el texto se mostrará correctamente incluso en un explorador que no soporte CSS o que tenga CSS desactivado .</li> + <li>El valor <code>auto</code> debe de ser usada para datos con una direccionalidad desconocida , com datos procedentes de la entrada de usuario , eventualmente almacenados en una base de datos .</li> +</ul> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, desde {{SpecName('HTML4.01')}} añadió el valor auto y ahora es un verdadero atributo global .</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Soportado en todos los elementos pero no en {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, y {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<h2 id="CompatibilityTable()"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{ CompatibilityTable() }}</span></h2> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a></li> + <li>{{domxref("HTMLElement.dir")}} que refleja este atributo .</li> +</ul> diff --git a/files/es/web/html/atributos_globales/draggable/index.html b/files/es/web/html/atributos_globales/draggable/index.html new file mode 100644 index 0000000000..2aee2d8443 --- /dev/null +++ b/files/es/web/html/atributos_globales/draggable/index.html @@ -0,0 +1,108 @@ +--- +title: draggable +slug: Web/HTML/Atributos_Globales/draggable +tags: + - Atributos globales + - Experimental + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/draggable +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a>draggable es un atributo enumerado que indica si el elemento puede ser arrastrado , usando el {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}} . Puede tener los siguientes valores :</p> + +<ul> + <li><code>true</code> , indica que el elemento puede ser arrastrado.</li> + <li><code>false</code>, indica que el elemento no puede ser arrastrado .</li> +</ul> + +<p>Si este atriuto no se establece , su valor por default es <code>auto</code> , significando que el comportamiento debe de ser el definido por default en el explorador .</p> + +<p>Este es un atributo <em>enumerado </em> y no uno <em>booleano</em> . Esto signigica que el uso explícito de uno de los valores <em>true </em>o <em>false </em>es obligatorio y que una declaración como <code><label draggable>Example Label</label> </code>no está permitida . El uso correcto es <code><label draggable="true">Example Label</label></code>.</p> + +<p>Por default , unicamente el texto , las imagenes y los vínculos pueden ser arrastrados . Para todos los demás elementos el evento <strong>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</strong> debe de ser establecido para el mecanismo de arrastrar y soltar para que funcione , como se muestra en este <a href="/en-US/docs/DragDrop/Drag_Operations" title="https://developer.mozilla.org/En/DragDrop/Drag_Operations">ejempl</a>o .</p> + +<p> </p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial .</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<h2 id="CompatibilityTable()"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{ CompatibilityTable() }}</span></h2> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p><span style="font-size: 30.002px; letter-spacing: -1px; line-height: 30.002px;"><strong>Ver también</strong></span></p> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales </a></li> +</ul> diff --git a/files/es/web/html/atributos_globales/dropzone/index.html b/files/es/web/html/atributos_globales/dropzone/index.html new file mode 100644 index 0000000000..27abb8f133 --- /dev/null +++ b/files/es/web/html/atributos_globales/dropzone/index.html @@ -0,0 +1,99 @@ +--- +title: dropzone +slug: Web/HTML/Atributos_Globales/dropzone +tags: + - Atributos globales + - Experimental + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/dropzone +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p>El atributo global <strong>dropzone </strong>es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la <a href="/es/docs/DragDrop/Drag_and_Drop">API Drag and Drop</a> . Pueden tener los siguientes valores :</p> + +<ul> + <li>copy , indica que el soltado creará una copia del elemento que fue arrastrado .</li> + <li>move , indica que el elemento que fue arrastrado será movido a su nueva localización .</li> + <li>link, indica que creara un link para el dato arrastrado.</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial .</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico </td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cataracterística</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown}}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también </h2> + +<ul> + <li>Tos los atributos globales </li> +</ul> diff --git a/files/es/web/html/atributos_globales/hidden/index.html b/files/es/web/html/atributos_globales/hidden/index.html new file mode 100644 index 0000000000..bc29d88b5a --- /dev/null +++ b/files/es/web/html/atributos_globales/hidden/index.html @@ -0,0 +1,107 @@ +--- +title: hidden +slug: Web/HTML/Atributos_Globales/hidden +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/hidden +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales/">atributo global</a> <strong>hidden</strong> es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante . Por ejemplo , puede ser usado para ocultar elelementos de la página que no pueden ser usados hasta que el proceso de login se haya completado . El explorador no dibujará dichos elementos .</p> + +<p>Esta atributo no debe de usarse para ocultar contenido que pudera ser legítimamente mostrado . Por ejemplo , no debe de ser usado para ocultar paneles de pestañas o una interfaz con pestañas , ya que esta es una decisión de estilo y otro estilo mostrandolos lo llevaría a una página perfectamente mostrada .</p> + +<p>Los elementos ocultos no deben de ser vinculados desde elementos no ocultos y elementos que son descendientes de un elemento oculto todavía activo ; lo que significa que los elementos del script pueden todavía ejecutarse y los elementos de formulario pueden todavía enviarse .</p> + +<div class="note"> +<p><strong>Nota:</strong> Cambiando el valor de la propiedad CSS {{cssxref("display")}} de un elemento con el atributo <code>hidden</code> sobrecarga el comportamiento . For ejemplo , un elemeneto diseñado <code>display : flex </code>será mostrado en la pantalla independientemente de que el atributo <code>hidden </code>esté presente .</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p>Define el dibujado por default sugerido del atributo hidden usando CSS</p> + </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>11</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>11</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también </h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales/">atributos globales</a></li> +</ul> diff --git a/files/es/web/html/atributos_globales/id/index.html b/files/es/web/html/atributos_globales/id/index.html new file mode 100644 index 0000000000..3dd947cf27 --- /dev/null +++ b/files/es/web/html/atributos_globales/id/index.html @@ -0,0 +1,113 @@ +--- +title: id +slug: Web/HTML/Atributos_Globales/id +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/id +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>El <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong>id</strong> define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS).</p> + +<p>El valor de este atributo es una cadena de caracteres opaca: es decir, el autor del sitio no debe usarlo para proporcionar información. De forma particular, en sentido semántico por ejemplo, no debe ser derivado de la misma cadena.</p> + +<p>El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el atributo <strong>class</strong>, el cual permite valores separados por espacios, los elementos pueden tener sólo un ID definido mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID, pero los demás deben ser definidos de otra forma, como por medio de un script interactuando con el DOM.</p> + +<div class="note"> +<p><strong>Nota:</strong> El uso de caracteres a excepción de letras en ASCII, dígitos, '_', <code>'-'</code> y <code>'.'</code> pueden ocasionar problemas de compatibilidad, por no ser permitidos en HTML 4. A pesar de que esta limitación ha sido removida en HTML 5, un ID debe iniciar con una letra para asegurar la compatibilidad.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambios desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambios de {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, ahora acepta <code>'_'</code>, <code>'-'</code> and <code>'.'</code> si no se encuentra al principio del id. También es un atributo global verdadero.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Soportado en todos los elementos a excepción de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Atributo</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}[1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Atributo</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}[1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <strong>class</strong> es un atributo global verdadero desde Firefox 32.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Todos los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</li> + <li>{{domxref("Element.id")}} que se asemeja a este atributo.</li> +</ul> diff --git a/files/es/web/html/atributos_globales/index.html b/files/es/web/html/atributos_globales/index.html new file mode 100644 index 0000000000..86769245c6 --- /dev/null +++ b/files/es/web/html/atributos_globales/index.html @@ -0,0 +1,199 @@ +--- +title: Atributos globales +slug: Web/HTML/Atributos_Globales +tags: + - Atributos globales + - HTML + - Referencia + - Web +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Atributos_globales")}}</div> + +<p class="summary"><span class="seoSummary">Los <strong>atributos globales</strong> son atributos comunes a todos los elementos HTML; se pueden usar en todos los elementos, aunque es posible que no tengan ningún efecto en algunos elementos.</span></p> + +<p>Los atributos globales se pueden especificar en todos los {{web.link("/es/docs/Web/HTML/Element", "elementos HTML")}}, <em>incluso aquellos no especificados en el estándar</em>. Eso significa que cualquier elemento no estándar debe permitir estos atributos, aunque el uso de esos elementos significa que el documento ya no es compatible con HTML5. Por ejemplo, los navegadores compatibles con HTML5 ocultan el contenido marcado como <code><foo hidden>...</foo></code>, aunque <code><foo></code> no sea un elemento HTML válido.</p> + +<p>Además de los atributos globales HTML básicos, también existen los siguientes atributos globales:</p> + +<ul> + <li>{{HTMLAttrDef("xml:lang")}} y {{HTMLAttrDef("xml:base")}} — estos se heredan de las especificaciones XHTML y están en desuso, pero se mantienen por motivos de compatibilidad.</li> + <li>Los múltiples atributos <code><strong>{{web.link("/es/docs/Web/Accessibility/ARIA", "aria-*")}}</strong></code>, utilizados para mejorar la accesibilidad.</li> + <li>Los atributos de {{web.link("/es/docs/Web/Guide/Events/Event_handlers", "control de eventos")}}: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Lista_de_atributos_globales">Lista de atributos globales</h2> + +<dl> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/accesskey", "accesskey")}}</code></strong></dt> + <dd>Proporciona una pista para generar un atajo de teclado para el elemento actual. Este atributo consta de una lista de caracteres separados por espacios. El navegador debe utilizar el primero que exista en la distribución del teclado del ordenador.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/autocapitalize", "autocapitalize")}}</code></strong></dt> + <dd>Controla si la entrada de texto se pone en mayúsculas automáticamente a medida que el usuario la introduce o edita. Puede tener los siguientes valores: + <ul> + <li><code>off</code> o <code>none</code>, no se aplica capitalización automática (todas las letras están predeterminadas en minúsculas)</li> + <li><code>on</code> o <code>sentences</code>, la primera letra de cada oración de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas</li> + <li><code>words</code>, la primera letra de cada palabra de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas</li> + <li><code>characters</code>, todas las letras de manera predeterminada deben estar en mayúsculas</li> + </ul> + </dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/class", "class")}}</code></strong></dt> + <dd>Una lista separada por espacios de las clases del elemento. Las clases permiten que CSS y JavaScript seleccionen y accedan a elementos específicos a través de los {{web.link("/es/docs/Web/CSS/Class_selectors", "selectores de clase")}} o funciones como el método {{DOMxRef("document.getElementsByClassName()")}}.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/contenteditable", "contenteditable")}}</code></strong></dt> + <dd>Un atributo enumerado que indica si el usuario debe poder editar el elemento. Si es así, el navegador modifica su «<em>widget</em>» para permitir la edición. El atributo debe tomar uno de los siguientes valores: + <ul> + <li><code>true</code> o la <em>cadena vacía</em>, la cual indica que el elemento debe ser editable;</li> + <li><code>false</code>, el cual indica que el elemento no debe ser editable.</li> + </ul> + </dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/contextmenu", "contextmenu")}}</code></strong> {{Obsolete_Inline}}</dt> + <dd>El {{anch("attr-id", "id")}} de un {{HTMLElement ("menu")}} para usar como el menú contextual para este elemento.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/data-*", "data-*")}}</code></strong></dt> + <dd>Forma una clase de atributos, denominados atributos de datos personalizados, que permiten el intercambio de información de propiedad entre el {{web.link("/es/docs/Web/HTML", "HTML")}} y su representación {{Glossary("DOM")}} que pueden utilizar los scripts. Todos estos datos personalizados están disponibles a través de la interfaz {{DOMxRef("HTMLElement")}} del elemento en el que está configurado el atributo. La propiedad {{DOMxRef("HTMLElement.dataset")}} les da acceso.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/dir", "dir")}}</code></strong></dt> + <dd>Un atributo enumerado que indica la direccionalidad del texto del elemento. Puede tener los siguientes valores: + <ul> + <li><code>ltr</code>, que significa <em>de izquierda a derecha</em> y s debe usar para idiomas que se escriben de izquierda a derecha (tal como el Español);</li> + <li><code>rtl</code>, que significa <em>de derecha a izquierda</em> y se utiliza para idiomas que se escriben de derecha a izquierda (tal como el Árabe);</li> + <li><code>auto</code>, permite que el agente de usuario decida. Utiliza un algoritmo básico ya que analiza los caracteres dentro del elemento hasta que encuentra un carácter con una direccionalidad fuerte, luego aplica esa direccionalidad a todo el elemento.</li> + </ul> + </dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/draggable", "draggable")}}</code></strong></dt> + <dd>Un atributo enumerado que indica si el elemento se puede arrastrar mediante la {{web.link("/es/docs/DragDrop/Drag_and_Drop", "API de arrastrar y soltar")}}. Puede tener los siguientes valores: + <ul> + <li><code>true</code>, indica que el elemento se puede arrastrar</li> + <li><code>false</code>, indica que el elemento <strong>no</strong> se puede arrastrar.</li> + </ul> + </dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/dropzone", "dropzone")}}</code></strong> {{deprecated_inline}}</dt> + <dd>Un atributo enumerado que indica qué tipos de contenido se pueden colocar en un elemento, utilizando la {{web.link("/es/docs/DragDrop/Drag_and_Drop", "API de arrastrar y soltar")}}. Puede tener los siguientes valores: + <ul> + <li><code>copy</code>, indica que soltar creará una copia del elemento que se arrastró</li> + <li><code>move</code>, indica que el elemento que se arrastró se moverá a esta nueva ubicación.</li> + <li><code>link</code>, creará un enlace a los datos arrastrados.</li> + </ul> + </dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/exportparts", "exportparts")}}</code></strong> {{Experimental_Inline}}</dt> + <dd>Se utiliza para exportar de forma transitiva partes de sombras de un árbol de sombras anidado a un árbol contenedor de luz.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/hidden", "hidden")}}</code></strong></dt> + <dd>Un atributo booleano indica que el elemento aún no es o ya no es <em>relevante</em>. Por ejemplo, se puede utilizar para ocultar elementos de la página que no se pueden utilizar hasta que se haya completado el proceso de inicio de sesión. El navegador no representará tales elementos. Este atributo no se debe utilizar para ocultar contenido que se podría mostrar legítimamente.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/id", "id")}}</code></strong></dt> + <dd>Define un identificador (ID) único que debe ser único en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), al escribir un script o al aplicarle estilo (con CSS).</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/inputmode", "inputmode")}}</code></strong></dt> + <dd>Proporciona una pista a los navegadores sobre el tipo de configuración de teclado virtual que se debe utilizar al editar este elemento o su contenido. Se usa principalmente en elementos {{HTMLElement("input")}}, pero se puede usar en cualquier elemento mientras esté en modo {{HTMLAttrxRef("contenteditable")}}.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/is", "is")}}</code></strong></dt> + <dd>Te permite especificar que un elemento HTML estándar se debe comportar como un elemento integrado personalizado registrado (consulta {{web.link("/es/docs/Web/Web_Components/Using_custom_elements", "Uso de elementos personalizados")}} para obtener más detalles).</dd> +</dl> + +<div class="note"> +<p><strong>Nota</strong>: Los atributos <code>item*</code> son parte de <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">Función de microdatos HTML de WHATWG</a>.</p> +</div> + +<dl> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemid", "itemid")}}</code></strong></dt> + <dd>El identificador único y global de un artículo.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemprop", "itemprop")}}</code></strong></dt> + <dd>Se usa para agregar propiedades a un elemento. Se puede especificar a cada elemento HTML un atributo <code>itemprop</code>, donde un <code>itemprop</code> consiste en un par de nombre y valor.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemref", "itemref")}}</code></strong></dt> + <dd>Las propiedades que no son descendientes de un elemento con el atributo <code>itemscope</code> se pueden asociar con el elemento usando un <code>itemref</code>. Proporciona una lista de IDs de elementos (no <code>itemid</code>s) con propiedades adicionales en otras partes del documento.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemscope", "itemscope")}}</code></strong></dt> + <dd><code>itemscope</code> (normalmente) funciona junto con {{HTMLAttrxRef("itemtype")}} para especificar que el HTML contenido en un bloque es sobre un elemento en particular. <code>itemscope</code> crea el «<em>Item</em>» y define el alcance del <code>itemtype</code> asociado con él. <code>itemtype</code> es una URL válida de un vocabulario (tal como <a class="external external-icon" href="https://schema.org/">schema.org</a>) que describe el elemento y las propiedades de su contexto.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/itemtype", "itemtype")}}</code></strong></dt> + <dd>Especifica la URL del vocabulario que se utilizará para definir <code>itemprop</code>s (propiedades del elemento) en la estructura de datos. {{HTMLAttrxRef("itemscope")}} se utiliza para establecer el alcance de la estructura de datos en la que estará activo el vocabulario establecido por <code>itemtype</code>.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}}</code></strong></dt> + <dd>Ayuda a definir el idioma de un elemento: el idioma en el que se encuentran los elementos no editables o el idioma en el que el usuario debe escribir los elementos editables. El atributo contiene una “etiqueta de idioma” (compuesta de “subetiquetas de idioma” separadas por guiones) en el formato definido en <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Etiquetas para identificar idiomas (BCP47)</em></a>. {{anch("attr-xml:lang", "xml:lang")}} tiene prioridad sobre él.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/part", "part")}}</code></strong></dt> + <dd>Una lista separada por espacios de los nombres de las partes del elemento. Los nombres de las partes permiten que CSS seleccione y aplique estilo a elementos específicos en la sombra de un árbol mediante el pseudoelemento {{CSSxRef("::part")}}.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/slot", "slot")}}</code></strong></dt> + <dd>Asigna un espacio en la sombra de un árbol {{web.link("/es/docs/Web/Web_Components/Shadow_DOM", "DOM de sombra")}} a un elemento: Un elemento con un atributo <code>slot</code> es asignado al espacio creado por el elemento {{HTMLElement("slot")}} cuyo valor del atributo {{HTMLAttrxRef("name", "slot")}} coincide con el valor del atributo <code>slot</code>.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/spellcheck", "spellcheck")}}</code></strong></dt> + <dd>Un atributo enumerado define si se puede verificar el elemento para detectar errores ortográficos. Puede tener los siguientes valores: + <ul> + <li><code>true</code>, el cual indica que, si es posible, el elemento se debe revisar para detectar errores ortográficos;</li> + <li><code>false</code>, indica que el elemento <strong>no</strong> se debe revisar para detectar errores ortográficos.</li> + </ul> + </dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/style", "style")}}</code></strong></dt> + <dd>Contiene declaraciones de estilo {{web.link("/en-US/docs/Web/CSS", "CSS")}} que se aplicarán al elemento. Ten en cuenta que se recomienda que los estilos se definan en un archivo o archivos separados. Este atributo y el elemento {{HTMLElement("style")}} principalmente tienen el propósito de permitir un estilo rápido, por ejemplo, con fines de prueba.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/tabindex", "tabindex")}}</code></strong></dt> + <dd>Un atributo entero que indica si el elemento puede tomar el foco de entrada (es <em>enfocable</em>), si debe participar en la navegación secuencial del teclado y, de ser así, en qué posición. Puede tomar varios valores: + <ul> + <li>un <em>valor negativo</em> significa que el elemento se debe poder enfocar, pero no debe ser accesible mediante la navegación secuencial del teclado;</li> + <li><code>0</code> significa que el elemento se debe poder enfocar y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo está definido por la convención de la plataforma;</li> + <li>un <em>valor positivo</em> significa que el elemento se debe poder enfocar y ser accesible mediante la navegación secuencial del teclado; el orden en el que se enfocan los elementos es el valor creciente del {{anch("attr-tabindex", "tabindex")}}. Si varios elementos comparten el mismo <code>tabindex</code>, su orden relativo sigue sus posiciones relativas en el documento.</li> + </ul> + </dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/title", "title")}}</code></strong></dt> + <dd>Contiene un texto que representa información de advertencia relacionada con el elemento al que pertenece. Normalmente, pero no necesariamente, dicha información se puede presentar al usuario como información sobre herramientas.</dd> + <dt><strong><code>{{web.link("/es/docs/Web/HTML/Global_attributes/translate", "translate")}}</code></strong> {{Experimental_Inline}}</dt> + <dd>Un atributo enumerado que se utiliza para especificar si los valores de atributo de un elemento y los valores de sus hijos de nodo {{DOMxRef("Text")}} se deben traducir cuando la página está localizada, o si se deben dejar sin cambios. Puede tener los siguientes valores: + <ul> + <li>la cadena vacía y <code>yes</code>, indican que el elemento se traducirá.</li> + <li><code>no</code>, lo cual indica que el elemento <strong>no</strong> se traducirá.</li> + </ul> + </dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Atributos globales")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow Parts")}}</td> + <td>Se agregaron los atributos globales <code>part</code> y <code>exportparts</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Atributos globales")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML5.1")}}, se han añadido <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code> y <code>itemtype</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Atributos globales")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML5 W3C")}}, ha sido añadido <code>contextmenu</code>, <code>draggable</code>, <code>dropzone</code> y <code>spellcheck</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Atributos globales")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML4.01")}}, se introduce el concepto de atributos globales y <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, y <code>title</code> ahora son verdaderos atributos globales.<br> + <code>xml:lang</code> que inicialmente formaba parte de XHTML, ahora también forma parte de HTML.<br> + Se han agregado <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code> y <code>translate</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>No hay atributos globales definidos. Varios atributos que se convertirán en atributos globales en especificaciones posteriores se definen en un subconjunto de elementos.<br> + <code>class</code> y <code>style</code> son compatibles con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.<br> + <code>dir</code> es compatible con todos los elementos excepto {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} y {{HTMLElement("script")}}.<br> + <code>id</code> es compatible con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.<br> + <code>lang</code> es compatible con todos los elementos excepto {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} y {{HTMLElement("script")}}.<br> + <code>tabindex</code> solo es compatible con {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> solo es compatible con {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} t {{HTMLElement("textarea")}}.<br> + <code>title</code> es compatibles con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} y {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.global_attributes")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>Las interfaces {{DOMxRef("Element")}} y {{DOMxRef("GlobalEventHandlers")}} que permiten consultar la mayoría de los atributos globales.</li> +</ul> diff --git a/files/es/web/html/atributos_globales/is/index.html b/files/es/web/html/atributos_globales/is/index.html new file mode 100644 index 0000000000..aa57cab27d --- /dev/null +++ b/files/es/web/html/atributos_globales/is/index.html @@ -0,0 +1,67 @@ +--- +title: is +slug: Web/HTML/Atributos_Globales/is +tags: + - Atributos globales + - HTML + - Referencia + - is +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">La construcción is <a href="/es/docs/Web/HTML/Atributos_Globales">global attribute</a> permite especificar que un elemento HTML estándar se debería comportar como un elemento personalizado provisto originalmente por el lenguaje (para más detalles, vea <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Utilizando elementos personalizados</a>).</span></p> + +<p>Este atributo puede ser utilizado sólo si nombre del elemento personalizado especificado ha sido <a href="/en-US/docs/Web/API/CustomElementRegistry/define">definido</a> extósamente en el documento actual, y extiende el tipo de elemento al que está siendo aplicado.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente código fue tomado de nuestro ejemplo <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">véalo también en vivo</a>).</p> + +<pre class="brush: js">// Crea una clase para el elemento +class WordCount extends HTMLParagraphElement { + constructor() { + // Siempre llamar a super al comienzo del constructor + super(); + + // Contenido del constructor omitido para mayor brevedad + ... + + } +} + +// Define el nuevo elemento +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html"><<span class="pl-ent">p</span> <span class="pl-e">is</span>=<span class="pl-s"><span class="pl-pds">"</span>word-count<span class="pl-pds">"</span></span>></<span class="pl-ent">p</span>></pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si desea contribuir a estos datos, por favor clone el repositorio <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div> + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>Todos los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</li> +</ul> + +<p> </p> diff --git a/files/es/web/html/atributos_globales/itemid/index.html b/files/es/web/html/atributos_globales/itemid/index.html new file mode 100644 index 0000000000..72ce64456e --- /dev/null +++ b/files/es/web/html/atributos_globales/itemid/index.html @@ -0,0 +1,78 @@ +--- +title: itemid +slug: Web/HTML/Atributos_Globales/itemid +translation_of: Web/HTML/Global_attributes/itemid +--- +<h2 id="Resumen">Resumen</h2> + +<p>El atributo <strong>Itemid </strong>es un identificador global y único de un item.</p> + +<p>Los atributos Itemid attributes sólo se pueden especificar en elmentos que tiene atributos tanto de <strong>itemscope </strong>como <strong>itemtype</strong>. Además, el itemid sólo puede ser especficiado en elemento con un atributo itemscope cuyo correspondiente itemtype hace referencia o define un vocabulario que soporte identificadores globales.</p> + +<p>Un vocabulario de itemtype nos proporcionará el significado exacto de un identificador global definido dentro del vocabulario. El vocabulario definirá si varios item con el mismo identificador global puede co-existir y, si están permitidos, cómo item con el mismo identificador son gestionados.</p> + +<p class="note"><strong>Nota:</strong> La definición de itemid hecha por Whatwg.org dice que debe ser una URL. No parece que sea el caso de el ejemplo que se muestra más abajo. Sin embargo la definición de facto es que un itemid es un identificador único, así que los apropiado es URB. Esta inconsistencia refleja sin dudarlo la naturaleza incompleta de la espeficicación Microdata.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> +<dt>Título <dd itemprop="titulo">The Reality Dysfunction +<dt>Autor <dd itemprop="autor">Peter F. Hamilton +<dt>Fecha de publicación +<dd><time itemprop="fechapublicacion" datetime="26-01-1996">26 Enero 1996</time> </dl></pre> + +<h3 id="Datos_estructurados">Datos estructurados</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1"> + <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d"><span>http://vocab.example.net/book</span>: urn:isbn:0-330-34032-8</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td><span>titulo</span></td> + <td><span>The Reality Dysfunction</span></td> + </tr> + <tr> + <td>itemprop</td> + <td><span>autor</span></td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb"><span>Peter F. Hamilton</span></div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td><span>fechapublicacion</span></td> + <td><span>26-01-1996</span></td> + </tr> + </tbody> +</table> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('HTML', '', '', '', 'Web/HTML/Global_attributes/itemid') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table" style="height: 105px; width: 490px;"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estad</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://html.spec.whatwg.org/multipage/microdata.html#attr-itemid">itemid</a></td> + <td>Nota WG - No está siendo ya activamente desarrollado.</td> + </tr> + </tbody> +</table> diff --git a/files/es/web/html/atributos_globales/itemprop/index.html b/files/es/web/html/atributos_globales/itemprop/index.html new file mode 100644 index 0000000000..232af938aa --- /dev/null +++ b/files/es/web/html/atributos_globales/itemprop/index.html @@ -0,0 +1,22 @@ +--- +title: itemprop +slug: Web/HTML/Atributos_Globales/itemprop +tags: + - atributo + - metatag +translation_of: Web/HTML/Global_attributes/itemprop +--- +<p style="margin: 0.5em 0px 0px 50px; padding-top: 0px; padding-bottom: 2px; color: rgb(58, 73, 86); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Tahoma, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;">Podemos dar más información al motor de búsqueda acerca de imágenes o datos adentro de cualquier tipo de etiquetas , como las propiedades : actores , clasificación ,genero . Para etiquetar las propiedades de un elemento , usa el atributo itemprop . Por ejemplo , para identificar al actor de una película añadir itemprop="director" al elemento que encierra el nombre del director.</p> + +<p style="margin: 0.5em 0px 0px 50px; padding-top: 0px; padding-bottom: 2px; color: rgb(58, 73, 86); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Tahoma, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal;">Aquí hay un ejemplo .</p> + +<pre style="font-family: Courier, monospace; font-size: 14.4px; width: auto; padding: 0px 5px 2px 10px; margin: 0.5em 0px 0px 50px; text-align: left; overflow: auto; color: rgb(58, 73, 86); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.2px; text-indent: 0px; text-transform: none; background: rgb(225, 225, 225);"><div itemscope itemtype="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: <span <strong>itemprop="director"</strong>>James Cameron</span> (born August 16, 1954)</span> + <span <strong>itemprop="genre"</strong>>Ciencia ficcion</span> + <a href="../movies/avatar-theatrical-trailer.html" <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<p> </p> + +<p> Para más información acerca de los atributos relacionados consultar https://schema.org/docs/gs.html</p> diff --git a/files/es/web/html/atributos_globales/itemref/index.html b/files/es/web/html/atributos_globales/itemref/index.html new file mode 100644 index 0000000000..9dac55140b --- /dev/null +++ b/files/es/web/html/atributos_globales/itemref/index.html @@ -0,0 +1,106 @@ +--- +title: itemref +slug: Web/HTML/Atributos_Globales/itemref +translation_of: Web/HTML/Global_attributes/itemref +--- +<h2 id="Resumen">Resumen</h2> + +<p>Las propiedades que no son descendientes de un elemento con el atributo <code>itemscope</code> pueden ser asociadas con el elemento usando un <strong>itemref</strong> . <strong>Itemref</strong> provee una lista de ids de los elementos (no <code>itemids</code>) con propiedades adicionales en otras partes dentro del documento .</p> + +<p>El atributo itemref puede ser solo especificado en elementos que tienen un atributo itemscope especificado .</p> + +<p class="note"><strong>Nota: </strong>el atributo itemref no es parte del modelo de micro datos . Es solamente un constructor sintáctico que ayuda a los autores en el ingreso de anotaciones a las páginas donde los datos que se van a anotar no siguen una estructura de arbol conveniente . Por ejemplo , permite a los autores marcar los datos en una tabla para que cada columna defina un item separado mientras se mantienen las propiedades en las celdas .</p> + +<div class="syntaxbox"> +<h2 class="syntaxbox" id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<div class="syntaxbox"> +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span> </p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span> </p> + <p>Size: <span itemprop="size">12</span> players</p> +</div> +</pre> +</div> + +<article id="wikiArticle"> +<h3 id="Datos_estructurados">Datos estructurados </h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>id's</th> + <th>itemscope</th> + <th>itemref</th> + <th> </th> + <th>(nombre de itemprop )</th> + <th>(valor de itemprop)</th> + </tr> + <tr> + <td>id=amanda</td> + <td>itemscope</td> + <td>itemref=a,b</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>id=a</td> + <td> </td> + <td> </td> + <td>itemprop</td> + <td>name</td> + <td><span>Amanda</span></td> + </tr> + <tr> + <td>id=b</td> + <td>itemscope</td> + <td>itemref=c</td> + <td> </td> + <td>band</td> + <td> </td> + </tr> + <tr> + <td colspan="1" rowspan="2">id=c</td> + <td> </td> + <td> </td> + <td>itemprop</td> + <td>Band</td> + <td><span>Jazz Band</span></td> + </tr> + <tr> + <td> </td> + <td> </td> + <td>itemprop</td> + <td>Size</td> + <td><span>12</span></td> + </tr> + </tbody> +</table> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/HTML/Global_attributes/itemref') }}</p> + +<h2 id="EspecificaciónEditEdit">Especificación<a class="only-icon button section-edit new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates$edit#Specifications"><span>Edit</span></a><a class="only-icon button section-edit new" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid$edit#SpecificationsEdit"><span>Edit</span></a></h2> + +<table class="standard-table" style="height: 105px; width: 490px;"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + </tr> + </thead> + <tbody> + <tr> + <td style="text-align: left; vertical-align: middle;"><a class="external-icon external" href="https://html.spec.whatwg.org/multipage/microdata.html#items">itemref</a></td> + <td style="text-align: left; vertical-align: middle; white-space: nowrap;">Nota WG - No se encuentra activamente en desarrollo</td> + </tr> + </tbody> +</table> +</article> +</div> diff --git a/files/es/web/html/atributos_globales/itemscope/index.html b/files/es/web/html/atributos_globales/itemscope/index.html new file mode 100644 index 0000000000..b57fc1c6bc --- /dev/null +++ b/files/es/web/html/atributos_globales/itemscope/index.html @@ -0,0 +1,284 @@ +--- +title: itemscope +slug: Web/HTML/Atributos_Globales/itemscope +tags: + - Ejemplo + - itemscope + - itemtype +translation_of: Web/HTML/Global_attributes/itemscope +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemscope</strong></code> es un <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> booleano que define el scope asociado del metadata. Especificando el atributo <code><strong>itemscope</strong></code> en un elemento crea un nuevo item, cuyos resultados estan en los numeros de pares name-value asociados con el elemento. Un atributo relativo, {{htmlattrxref("itemtype")}}, es usado para especificar el URL valido de un medio/recipe (como lo es <a href="http://schema.org/">schema.org</a>) que describe que el item es de propiedad contextual. En cada uno de los siguientes ejemplos, el medio/recipe es de <a href="https://schema.org/">schema.org</a>.</p> + +<p>Todos los elementos HTML pueden tener un atributo <code>itemscope</code> especifico. Un elemento <code>itemscope</code> no tiene un asociado <code>itemtype</code> pero tiene un sociado <code>itemref</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> Encuentra mas acerca del atributo <code>itemtype</code> en <a href="http://schema.org/Thing">http://schema.org/Thing</a></p> +</div> + +<h3 id="Ejemplo_simple">Ejemplo simple</h3> + +<h4 id="HTML">HTML</h4> + +<p>El siguiente ejemplo especifica que el atributo <code>itemscope</code>. El ejemplo especificado en el <code>itemtype</code> es "http://schema.org/Movie", y especifica tres atributos <code>itemprop</code> relativos.</p> + +<pre class="brush:html"><div itemscope itemtype="http://schema.org/Movie"> + <h1 itemprop="nombre">Avatar</h1> + <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> + <span itemprop="genero">Ciencia ficcion</span> + <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a> +</div> +</pre> + +<h4 id="sect1"> </h4> + +<h4 id="Esctructura_de_informacion">Esctructura de informacion</h4> + +<p>La siguiente tabla muestran los datos esctructurados mostrados en el anterior ejemplo.</p> + +<p> </p> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="6">itemscope</td> + <td>Itemtype</td> + <td colspan="2">Movie</td> + </tr> + <tr> + <td>itemprop</td> + <td>(itemprop name)</td> + <td>(itemprop value)</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genero</td> + <td>Ciencia Ficcion</td> + </tr> + <tr> + <td>itemprop</td> + <td>nombre</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>https://youtu.be/0AY1XIkX7bY</td> + <td>Trailer</td> + </tr> + </tbody> +</table> + +<h3 id="itemscope_Atributos_ID"><code>itemscope</code> Atributos ID</h3> + +<p>Cuando especificas el atributo <code>itemscope</code> para un elemento, un nuevo item es creado. El item consiste de un grupo de pares de name-value. Para elementos con un atributo <code>itemscope</code> y un atributo <code>itemtype</code>, podrias tambien especificar un {{htmlattrxref("id")}} attribute. Puedes usar el atributo <code>id</code> para establecer un identificador global para el nuevo item. Un identificador global permite que los items relativos a otros items encuentren paginas atraves de la Web.</p> + +<h3 id="Ejemplo">Ejemplo</h3> + +<p>Hay 4 atributos <code>itemscope</code> en el siguiente ejemplo. Cada atributo <code>itemscope</code> establecen el scope correspondiente a sus atributos <code>itemtype</code>. El <code>itemtype</code>s, <code>Recipe</code>, <code>AggregateRating</code>, y <code>NutritionInformation</code> en el siguiente ejemplo son parte de la informacion estructura por medio de <a href="www.schema.org">schema.org</a>, se especifico el primer <code>itemtype</code>, http://schema.org/Recipe.</p> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Recipe"> +<h2 itemprop="name">Grandma's Holiday Apple Pie</h2> +<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/> +<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person"> +<span itemprop="name">Carol Smith</p></span> +</span> +<p>Published: <time datetime="2009-11-05" itemprop="datePublished"> +November 5, 2009</p></time> +<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span> + <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span> +Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time> + Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time> + Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time> + Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span> + <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> + Serving size: <span itemprop="servingSize">1 medium slice<br></span> + Calories per serving: <span itemprop="calories">250 cal<br></span> + Fat per serving: <span itemprop="fatContent">12 g<br></span> +</span> +<p>Ingredients:<br> + <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span> + <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> + ... </p> + +Directions: <br> + <div itemprop="recipeInstructions"> + 1. Cut and peel apples<br> + 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br> + ... + </div> +</div> </pre> + +<h3 id="Resultados">Resultados</h3> + +<h4 id="HTML_2">HTML</h4> + +<p>Los siguientes son un ejemplo renderizado resultado del codigo del anterior ejemplo.</p> + +<p>{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}</p> + +<h4 id="Structured_data">Structured data</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Medio/Recipe</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Grandma's Holiday Apple Pie</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td> + </tr> + <tr> + <td>itemprop</td> + <td>datePublished</td> + <td>2009-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> + </tr> + <tr> + <td>itemprop</td> + <td>prepTime</td> + <td>PT30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>cookTime</td> + <td>PT1H</td> + </tr> + <tr> + <td>itemprop</td> + <td>totalTime</td> + <td>PT1H30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeYield</td> + <td>1 9" pie (8 servings)</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>Thinly-sliced apples: 6 cups</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>White sugar: 3/4 cup</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeInstructions</td> + <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">author [Person]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Carol Smith</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.0</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>35</td> + </tr> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td> + </tr> + <tr> + <td>itemprop</td> + <td>servingSize</td> + <td>1 medium slice</td> + </tr> + <tr> + <td>itemprop</td> + <td>calories</td> + <td>250 cal</td> + </tr> + <tr> + <td>itemprop</td> + <td>fatContent</td> + <td>12 g</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Una herramienta practica para extraer estructuras microdata del HTML es<a href="https://developers.google.com/structured-data/testing-tool/"> Structured Data Testing Tool</a> de Google. Pruebalo en el HTML del ejemplo anterior.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estados</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatibles">Navegadores compatibles</h2> + + + +<p>{{Compat("html.global_attributes.itemscope")}}</p> + +<h2 id="Ver_tambien">Ver tambien</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes">Otros atributos globales diferentes</a></li> + <li>Otro, microdata relativo, atributos globales: + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/es/web/html/atributos_globales/lang/index.html b/files/es/web/html/atributos_globales/lang/index.html new file mode 100644 index 0000000000..dcea33a66f --- /dev/null +++ b/files/es/web/html/atributos_globales/lang/index.html @@ -0,0 +1,108 @@ +--- +title: lang +slug: Web/HTML/Atributos_Globales/lang +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/lang +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>lang</strong> participa en la definición del lenguaje del elemento , el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos . La etiqueta contiene un valor sencillo de entrada en el formato que define el documento <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">tags para identificar lenguajes </a><em><a href="http://www.ietf.org/rfc/bcp/bcp47.txt"> </a>(BCP47)</em> de la IETF . Si el contenido de la etiqueta es la <em>cadena vacía </em>, el lenguaje se establece como <em>desconocido</em> , si el contenido de la etiqueta no es válido respecto al documento BCP47 , se establece como <em>inválido . </em></p> + +<p>Incluso si el atributo <strong>lang </strong>está establecido , puede que no se tome en cuenta , ya que el atributo <strong>xml:lang </strong>tiene prioridad . Leer el algoritmo para determinar el lenguaje de el contenido de un elemento para ver como es determinado el lenguaje en todos los casos.</p> + +<p>Para la pseudo clase { cssxref(":lang") }} de CSS, dos nombres invalidos de lenguaje son diferentes si sus nombres son diferentes .</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, comportandose con <strong>xml:lang</strong> y el algoritmo de determinación del lenguaje . También es un verdadero atributo global .</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Soportado en todos los elementos menos en {HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, y {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a></li> +</ul> diff --git a/files/es/web/html/atributos_globales/slot/index.html b/files/es/web/html/atributos_globales/slot/index.html new file mode 100644 index 0000000000..ed2b8688db --- /dev/null +++ b/files/es/web/html/atributos_globales/slot/index.html @@ -0,0 +1,46 @@ +--- +title: slot +slug: Web/HTML/Atributos_Globales/slot +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/slot +--- +<div>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</div> + +<p>El <a href="/en-US/docs/Web/HTML/Global_attributes">atributo global</a> <strong>slot</strong> asigna un espacio en un <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> árbol shadow a un elemento: Un elemento con un atributo <code>slot</code> es asignado al espacio creado por el elemento {{HTMLElement("slot")}} cuyo valor de atributo {{htmlattrxref("name", "slot")}} coincide con el valor de ese atributo <code>slot</code>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si le gustaría contribuir con estos datos, por favor clone el repositorio <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div> + +<p>{{Compat("html.global_attributes.slot")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>Todos los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</li> +</ul> diff --git a/files/es/web/html/atributos_globales/spellcheck/index.html b/files/es/web/html/atributos_globales/spellcheck/index.html new file mode 100644 index 0000000000..c6ced2de46 --- /dev/null +++ b/files/es/web/html/atributos_globales/spellcheck/index.html @@ -0,0 +1,218 @@ +--- +title: spellcheck +slug: Web/HTML/Atributos_Globales/spellcheck +tags: + - Atributos globales + - Experimental + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>spellcheck</strong> es un atributo enumerado que define si el elemento debe de ser verificado por errores de deletreado. Puede tener los siguientes valores :</p> + +<ul> + <li><code>true , </code>que indica que elemento debe de ser checado para errores de deletreado si es posible .</li> + <li><code>false </code>, que indica que el elemento no debe de ser checado para errores de deletreado .</li> +</ul> + +<p>Si este atributo no está establecido , su valor por default es de tipo elemento y definido por el explorador . El valor por default puede der <em>heredado , </em>lo que significa que el contenido del elemento será checado para errores de deletreado solo si el ancestro más cercano tiene un estado de <em>spellcheck </em>con valor <code>true .</code></p> + +<p>Puedes consultar <a href="/es/docs/Control_de_la_corrección_ortográfica_en_formularios_HTML">este artículo</a> para ver un ejemplo comprensivo del uso de este atributo. <br> + </p> + +<p>Este es un atributo <em>enumerado </em>y no uno<em>Booleano </em>. Esto significa que el uso explícito de uno de los valores <code>true </code>o <code>false </code>es obligatorio y que una escritura como <code><label spellcheck>Example Label</label> </code>no está permitida . El uso correcto es <code><label spellcheck="true">Example Label</label></code>.</p> + +<p>Este atributo es meramente un indicio para el explorador : los exploradores no son obligados a tener disponibilidad para verificar los errores de deletreado , incluso si el atributo <strong>spellcheck</strong> es establecido como <code>true </code>y el explorador soporta verificación de deletreado .</p> + +<p>El valor por default de este atributo es dependiente del explorador y del elemento :</p> + +<table class="fullwidth-table" style="line-height: 1.5;"> + <tbody> + <tr> + <th>Explorador</th> + <th>{{ HTMLElement("html") }}</th> + <th>{{ HTMLElement("textarea") }}</th> + <th>{{ HTMLElement("input") }}</th> + <th>others</th> + <th>Comment</th> + </tr> + <tr> + <td rowspan="3">Firefox</td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><em>inherited</em></td> + <td>When <code>layout.spellcheckDefault</code> is <code>0</code></td> + </tr> + <tr> + <td><strong><code>false</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong>When <code>layout.spellcheckDefault</code> is <code>1</code> (default value)</strong></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>true</code></td> + <td><code>true</code></td> + <td><em>inherited</em></td> + <td>When <code>layout.spellcheckDefault</code> is <code>2</code></td> + </tr> + <tr> + <td rowspan="3">Seamonkey</td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><em>inherited</em></td> + <td>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;"><code>0</code></span></td> + </tr> + <tr> + <td><strong><code>false</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;">1</span> (default value)</strong></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>true</code></td> + <td><code>true</code></td> + <td><em>inherited</em></td> + <td>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;"><code>2</code></span></td> + </tr> + <tr> + <td rowspan="3">Camino</td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><em>inherited</em></td> + <td>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;"><code>0</code></span></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>true</code></td> + <td><em>inherited</em></td> + <td><em>inherited</em></td> + <td>When <code>layout.spellcheckDefault</code> is <span style="font-family: courier new;"><code>1</code></span></td> + </tr> + <tr> + <td><strong><code>false</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><em>inherited</em></strong></td> + <td><strong>When <span style="font-family: courier new;">layout.spellcheckDefault</span> is <span style="font-family: courier new;"><code>2</code> </span><strong>(default value)</strong></strong></td> + </tr> + <tr> + <td>Chrome</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>inherited</em></td> + </tr> + <tr> + <td>Internet Explorer</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>inherited</em></td> + </tr> + <tr> + <td>Opera</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>inherited</em></td> + </tr> + <tr> + <td>Safari</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>inherited</em></td> + </tr> + </tbody> +</table> + +<h2 id="Espeficicaciones">Espeficicaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Espeficifación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, declaración inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_exploradores">Compatibilidad con exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales">Atributos globales</a></li> +</ul> diff --git a/files/es/web/html/atributos_globales/style/index.html b/files/es/web/html/atributos_globales/style/index.html new file mode 100644 index 0000000000..1da99e039b --- /dev/null +++ b/files/es/web/html/atributos_globales/style/index.html @@ -0,0 +1,111 @@ +--- +title: style +slug: Web/HTML/Atributos_Globales/style +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/style +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>style</strong> contiene declaraciones de estilo <a href="/es/docs/Web/CSS">CSS</a> a ser aplicados a un elemento . Notar que es recomandado para los estilos ser definidos en archivo o archivos separados . Este atributo y el elemento {{ HTMLElement("style") }} tienen principalmente el propósito de permitir el estilizamiento rápido , por ejemplo para propósitos de pruebas .</p> + +<p><strong>Nota de uso : </strong>Este atributo no debe de ser usado para comunicar información semántica . Incluso si todo el estilo es removido , una página debería mantenerse semánticamente correcta . Típicamente no debe de ser usado para ocultar información irrelevante ; esto debe de hacerse usando el atributo <a href="/en-US/docs/Web/HTML/Global_attributes/style$translate?tolocale=es#attr-hidden">hidden</a> .</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, es ahora un verdadero atributo global .</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Soportado en todos los elementos menos en {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{ SpecName("CSS3 Style", "", "") }}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Define el contenido del atributo <strong>style </strong>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales.</a></li> +</ul> diff --git a/files/es/web/html/atributos_globales/tabindex/index.html b/files/es/web/html/atributos_globales/tabindex/index.html new file mode 100644 index 0000000000..2159639208 --- /dev/null +++ b/files/es/web/html/atributos_globales/tabindex/index.html @@ -0,0 +1,118 @@ +--- +title: tabindex +slug: Web/HTML/Atributos_Globales/tabindex +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/tabindex +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p class="note">Nota: El valor máximo para tabindex no debe de exceder 32767 (<a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.11.1">sección 17.11.1 del W3C</a>). Si no se especifica, el valor asignado por defecto es -1.</p> + +<p><a href="https://www.w3.org/TR/html401/interact/forms.html#h-17.11.1">El </a><a href="/es/docs/Web/HTML/Atributos_Globales">atributo global</a> <strong>tabindex </strong>indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla <em>Tab</em>, de ahí el nombre). Acepta un entero como valor, con diferentes resultados que dependen de dicho valor:</p> + +<ul> + <li>un <em>valor negativo </em>(usualmente tabindex="-1")<em> </em>significa que el elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación secuencial del teclado. Es útil para crear widgets accesibles con JavaScript.</li> + <li>tabindex="0" significa que el elemento debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma.</li> + <li>un <em>valor positivo</em> significa que debe poder recoger el foco y alcanzable a través de la navegación secuencial del teclado; su orden relativo es definido por el valor del atributo: la secuencia sigue el aumento del número de <strong>tabindex</strong>. Si varios elementos comparten el mismo tabindex, su orden relativo sigue la posición relativa en el documento.</li> + <li>Un elemento con valor 0, un valor inválido o sin valor de <strong>tabindex</strong>, debe de ser posicionado después de elementos con un <strong>tabindex </strong>postivo en el orden de navegación secuencial del teclado.</li> +</ul> + +<p>Puede consultar <a href="/en/Focus_management_in_HTML">este artículo </a>para ver una explicación compresiva de la administración de la recepción de foco.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + + + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, el atributo es ahora soportado en todos los elementos (atributos globales).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Solo soportado en {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, y {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + + + +<p><span style="font-size: 30.002px; letter-spacing: -1px; line-height: 30.002px;"><strong>Ver también </strong></span></p> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</li> + <li>{{domxref("HTMLElement.tabindex")}} que refleja este atributo .</li> +</ul> diff --git a/files/es/web/html/atributos_globales/title/index.html b/files/es/web/html/atributos_globales/title/index.html new file mode 100644 index 0000000000..ab8e0dd92f --- /dev/null +++ b/files/es/web/html/atributos_globales/title/index.html @@ -0,0 +1,138 @@ +--- +title: title +slug: Web/HTML/Atributos_Globales/title +tags: + - Atributos globales + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/title +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global </a><strong>title </strong>contiene un texto representado información relacionada al elemento al cual pertenece . Tal información puede típicamente , pero no necesariamente , ser presentada al usuario como un tip . Aquí hay algunos usos típicos para este atributo :</p> + +<ul> + <li>Vínculo : el título o la descripción del documento vinculado </li> + <li>Elemento mediático como una imagen : una descripción o créditos asociados</li> + <li>Párrafo : una nota de pié de página o comentario acerca de este </li> + <li>Cita : alguna información sobre el autor y otros datos .</li> +</ul> + +<p>Si este atributo es omitido , significa que el título del ancestro más cercano de este elemento es todavía relevante para este (puede usarse legítimamente como un tip para ese elemento ) . Si el atributo es establecido como la <em>cadena vacía </em>, significa explícitamente que el título de su ancestro más cercano no es relevante para este elemento ( y no debería de usarse en el tip para ese elemento )</p> + +<p>Semánticas adicionales se adjuntan a los atributos de <strong>title </strong>de los elementos {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} y {{ HTMLElement("menuitem") }} </p> + +<p>El atributo <strong>title </strong>puede contener varias líneas . Cada <code>U+000A LINE FEED</code> (<code>LF</code>) insertada representa una línea nueva . Se debe tener precaución ya que esto significa que :</p> + +<pre class="brush: html"><p>Líneas nuevas en title deben de tomarse en cuenta , como esta <abbr title="Este es un título multilínea">ejemplo </abbr>.</p> +</pre> + +<p>define un título de dos líneas .</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, es ahora un verdadero atributo global.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Soportado en todos los elementos pero no en {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, y {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Soporte multi línea</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(12)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Soporte multi línea</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(12)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</li> + <li>{{domxref("HTMLElement.title")}} que refleja a este atributo .</li> +</ul> diff --git a/files/es/web/html/atributos_globales/translate/index.html b/files/es/web/html/atributos_globales/translate/index.html new file mode 100644 index 0000000000..5182acec3c --- /dev/null +++ b/files/es/web/html/atributos_globales/translate/index.html @@ -0,0 +1,103 @@ +--- +title: translate +slug: Web/HTML/Atributos_Globales/translate +tags: + - Atributos globales + - Experimental + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/translate +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p>El <a href="/es/docs/Web/HTML/Atributos_Globales">atributo global</a> <strong>translate </strong> es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#text">Texto</a> serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio . Puede tener los siguientes valores : </p> + +<ul> + <li>Cadena vacía y "yes" , que indica que el elemento debe de ser traducido cuando la página es localizada .</li> + <li>"no", que indica que el elemento no debe de ser traducido .</li> +</ul> + +<p> </p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales </a></li> + <li>La propiedad {{domxref("HTMLElement.translate")}} que refleja a este atributo </li> +</ul> diff --git a/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html b/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html new file mode 100644 index 0000000000..26cf4a2599 --- /dev/null +++ b/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html @@ -0,0 +1,32 @@ +--- +title: x-ms-acceleratorkey +slug: Web/HTML/Atributos_Globales/x-ms-acceleratorkey +translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey +--- +<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div> + +<p> </p> + +<p><font><font>La </font></font><code><strong>x-ms-acceleratorkey</strong></code><font><font>propiedad proporciona una forma de declarar que una tecla de aceleración se ha asignado a un elemento.</font></font></p> + +<p><font><font>Esta propiedad propietaria es específica de Internet Explorer y Microsoft Edge.</font></font></p> + +<p><font><font>La </font></font><code>x-ms-acceleratorkey</code><font><font>propiedad le permite exponer una notificación en el árbol de accesibilidad a los lectores de pantalla y otras tecnologías de asistencia de que existe una clave de aceleración. </font><font>Este atributo no proporciona el comportamiento de la clave del acelerador. </font><font>Debe proporcionar controladores de eventos de teclado, como por ejemplo </font></font><code>onkeypress</code><font><font>, </font></font><code>onkeydown</code><font><font>o </font></font><code>onkeyup</code><font><font>, para procesar las teclas de aceleración en el documento.</font></font></p> + +<p> </p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: html"><button x-ms-acceleratorkey="string">...</button></pre> + +<h2 id="Valor">Valor</h2> + +<p>Tipo: <strong>String</strong></p> + +<p>Nombre de la tecla de aceleración, por ejemplo: <code><em>Ctrl+B</em> or <em>Ctrl+S</em></code>.</p> + +<h2 id="See_Also" name="See_Also">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Microsoft_API_extensions">Microsoft API extensions </a></li> +</ul> diff --git a/files/es/web/html/block-level_elements/index.html b/files/es/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..763c105213 --- /dev/null +++ b/files/es/web/html/block-level_elements/index.html @@ -0,0 +1,130 @@ +--- +title: Elementos en bloque +slug: Web/HTML/Block-level_elements +tags: + - Guía + - HTML + - HTML5 + - Principiante + - Web + - desarrollo +translation_of: Web/HTML/Block-level_elements +--- +<p><span class="seoSummary">Los elementos, en HTML (lenguaje de marcas de hipertexto - <strong>Hypertext Markup Language</strong>) usualmente son elementos "en bloque" o <a href="/es/docs/Web/HTML/Elementos_en_línea" title="/es/docs/Web/HTML/Elementos_en_línea">elementos "en línea"</a>. Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque". Este artículo ayuda a explicar lo que esto significa.</span></p> + +<p>Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después del elemento. El siguiente ejemplo demuestra la influencia elementos en bloque:</p> + +<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: #333333; margin-left: -3px; text-transform: none;">Ejemplo en bloque</span></h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar elemento principal (o padre) del párrafo.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { background-color: #8ABB55; } +</pre> + +<p>{{ EmbedLiveSample('Block-level_Example') }}</p> + +<h2 id="Uso">Uso</h2> + +<ul> + <li>Los elementos de bloque sólo deben aparecer dentro del elemento {{ HTMLElement("body") }}.</li> +</ul> + +<h2 id="Elmentos_en_bloque_vs._en_línea">Elmentos en bloque vs. en línea</h2> + +<p>Hay un par de diferencias clave entre los elementos en bloque y elementos en línea:</p> + +<dl> + <dt>Formateo</dt> + <dd>De forma predeterminada, los elementos de bloque comienzan en una nueva línea, pero los elementos en línea pueden comenzar en cualquier parte de una línea.</dd> + <dt>Modelo de contenido</dt> + <dd>En general, los elementos en bloque pueden contener elementos en línea y otros elementos en bloque. Inherente a esta distinción estructural es la idea de que los elementos en bloque crean estructuras "más grandes" que los elementos en línea.</dd> +</dl> + +<p>La distinción entre elementos en bloque frente a elementos en línea se utiliza en las especificaciones de HTML hasta la 4.01. En HTML5, esta distinción dual se sustituye por un conjunto más complejo de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="/es/docs/Web/Guide/HTML/categorias_de_contenido">categorías de contenido</a>. La categoría "en bloque" corresponde aproximadamente a la categoría de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico" title="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido dinámico</a> en HTML 5, mientras que "en línea" se corresponde con <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_est%C3%A1tico" title="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_est%C3%A1tico">contenido estático</a>, pero hay categorías adicionales.</p> + +<h2 id="Elementos">Elementos</h2> + +<p>La siguiente es una lista completa de todos los elementos en bloque de HTML (aunque "en bloque" no se define técnicamente para los elementos que son nuevos en HTML5).</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("address") }}</dt> + <dd>Información de contacto.</dd> + <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Contenido de Articulo.</dd> + <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Contenido adicional.</dd> + <dt>{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Reproductor de audio</dd> + <dt>{{ HTMLElement("blockquote") }}</dt> + <dd>Bloque de "cita".</dd> + <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Dibujo canvas.</dd> + <dt>{{ HTMLElement("dd") }}</dt> + <dd>Descripción de definición.</dd> + <dt>{{ HTMLElement("div") }}</dt> + <dd>División de documento.</dd> + <dt>{{ HTMLElement("dl") }}</dt> + <dd>Lista de definición.</dd> + <dt>{{ HTMLElement("fieldset") }}</dt> + <dd>Etiqueta de conjunto de campos.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Leyenda de figura.</dd> + <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Grupos contenido multimedia con una leyenda (ver {{ HTMLElement("figcaption") }}).</dd> + <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Sección o pie de página.</dd> + <dt>{{ HTMLElement("form") }}</dt> + <dd>Formulario de entrada.</dd> + <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> + <dd>Niveles de cabecera 1-6.</dd> + <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Sección o cabecera de página.</dd> + <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Grupos información de encabezado.</dd> + <dt>{{ HTMLElement("hr") }}</dt> + <dd>Regla Horizontal (línea divisoria).</dd> + <dt>{{ HTMLElement("li") }}</dt> + <dd>Elemento de lista.</dd> + <dt>{{ HTMLElement("main") }}</dt> + <dd>Engloba el único contenido central del documento.</dd> + <dt>{{ HTMLElement("nav") }}</dt> + <dd>Contiene enlaces de navegación.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("noscript") }}</dt> + <dd>Contenido para ser usado si los scripts no son soportados o permitidos.</dd> + <dt>{{ HTMLElement("ol") }}</dt> + <dd>Lista ordenada.</dd> + <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Formulario de salida.</dd> + <dt>{{ HTMLElement("p") }}</dt> + <dd>Párrafo.</dd> + <dt>{{ HTMLElement("pre") }}</dt> + <dd>Texto preformateado.</dd> + <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Sección de una página web.</dd> + <dt>{{ HTMLElement("table") }}</dt> + <dd>Tabla.</dd> + <dt>{{ HTMLElement("tfoot") }}</dt> + <dd>Pie de tabla.</dd> + <dt>{{ HTMLElement("ul") }}</dt> + <dd>Lista no ordenada.</dd> + <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Reproductor de vídeo.</dd> +</dl> +</div> + +<h3 id="Ver_también" name="Ver_también">Ver también</h3> + +<ul> + <li><a href="/es/docs/Web/HTML/Elementos_en_línea" title="/es/docs/Web/HTML/Elementos_en_línea">Elementos en línea</a></li> +</ul> diff --git a/files/es/web/html/canvas/a_basic_ray-caster/index.html b/files/es/web/html/canvas/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..7917541554 --- /dev/null +++ b/files/es/web/html/canvas/a_basic_ray-caster/index.html @@ -0,0 +1,59 @@ +--- +title: A basic ray-caster +slug: Web/HTML/Canvas/A_basic_ray-caster +tags: + - Avanzado + - Canvas + - Ejemplo + - Espanol(2) + - Gráficos(2) + - HTML + - Necesita traducción + - Web +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +<div>{{CanvasSidebar}}</div> + +<div class="summary"> +<p>Este artículo proporciona un interesante ejemplo de la vida real usando el elemento {{HTMLElement("canvas")}} para renderizar un sencillo entorno 3D usando una técnica de render llamada ray-casting.</p> +</div> + +<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p> + +<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Abrir en una nueva ventana</a></strong></p> + +<h2 id="Why.3F" name="Why.3F">¿Por qué?</h2> + +<p> </p> + +<p>Después de darme cuenta, para mi satisfacción, de que el ingenioso elemento <canvas> sobre el que había estado leyendo, no sólo iba a recibir soporte por parte de Firefox, sino que <strong>ya estaba</strong> soportado por la versión actual de Safari, así que tenía que ponerme manos a la obra y hacer un pequeño experimento.</p> + +<p>El <a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">tutorial</a> y el <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">resumen</a> que encontré en la MDN son geniales, pero nadie había escrito nada (todavía) sobre animación, así que pensé que sería una buena oportunidad para portar un sencillo raycaster en el que había trabajado hacía tiempo y comprobar qué tipo de rendimiento podía esperar de un buffer de pixeles controlado por JavaScript.</p> + +<h2 id="How.3F" name="How.3F">¿Cómo?</h2> + +<p>La idea es sencilla, usar {{domxref("WindowTimers.setInterval","setInterval()")}} con un retraso arbitrario que se corresponde con la velocidad de fotogramas deseada. Por cada llamada al intervalo se ejecutará una función que volverá a pintar el elemento <canvas> en el que se muestra la vista actual del usuario. Sé que podría haber empezado con un ejemplo más simple, pero creo que el <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">tutorial</a> sobre <canvas> vale para eso, y quería ver si podía hacer esto.</p> + +<p>Continuemos, por cada actualización, el raycaster comprueba si has presionado alguna tecla, si no has presionado ninguna se mantendrán los cálculos para ahorrar tiempo de ejecución. Si se ha presionado alguna tecla, el <canvas> es borrado, el suelo y el cielo son pintados, la posición y la orientación de la cámara son actualizados, y los rayos son lanzados. Según van intersectando los rayos con las paredes se van pintando líneas verticales de pared del color de la pared con la que han colisionado, mezcladas con una versión más oscura del color en función de la distancia a la que se encuentra la pared. La altura de la línea vertical depende directamente de la distancia a la que el rayo es interesectado, dibujándose centrada con respecto la línea del horizonte.</p> + +<p>El código que he terminado usando es una amalgama regurgitada del código que aparece en los capítulos sobre raycasting del libro de André LaMothe <em>Tricks of the Game Programming Gurus</em> y una <a class="external" href="http://www.shinelife.co.uk/java-maze/">versión en java de un raycaster</a> que encontré online, a su vez pasado por el filtro de mi pulsión a renombrar todo para que tenga sentido para mí y todo el chapuceo necesario para que las cosas funcionen bien.</p> + +<h2 id="Results" name="Results">Resultados</h2> + +<p>El <canvas> en Safari 2.0.1 rindió sorprendentemente bien. Renderizando columnas de 8 pixeles de ancho, puedo correr una ventana de 320 x 240 a 24 FPS en mi Apple Mini. Firefox 1.5 Beta 1 es incluso más rápido; puedo correr una ventana de 320 x 240 a 24 FPS con columnas de 4 píxeles de ancho. No es exactamente un nuevo miembro de la familia de ID Software, pero es bastante decente teniendo en cuenta que es un entorno completamente interpretado, y que no me he tenido que preocupar de reservar memoria, ni modos de vídeo o escribir rutinas en ensamblador. Aún así el código intenta ser lo más eficiente posible, usando tablas de acceso rápido para valores precalculados, pero no soy ningún gurú de la optimización, así que seguramente haya varias cosas que se puedan escribir más rápido.</p> + +<p>Además, deja bastante que desear en términos de intentar convertir esto en un motor de juego - no hay texturas en las paredes, no hay sprites, no hay puertas, ni siquiera hay teletransportadores que te permitan ir a otro nivel. Pero tengo bastante confianza en que todas esas cosas se podrían añadir con el suficiente tiempo disponible. La API de canvas soporta copiado de píxeles de imágenes, así que tener texturas parece bastante factible. Dejaré esto para otro artículo, seguramente para otra persona. =)</p> + +<h2 id="The_RayCaster" name="The_RayCaster">El ray-caster</h2> + +<p>El gente tan maravillosa que hay aquí han copiado manualmente mis archivos así vosotros podéis echarle un <a href="http://mdn.github.io/canvas-raycaster/">vistazo</a>, y para vuestro disfrute he puesto los archivos individuales como listados de código (ver abajo).</p> + +<p>¡Así que aquí lo tenéis, arrancad Safari 1.3+ o Firefox 1.5+ o cualquier otro navegador que soporte el elemento <code><canvas></code> y a disfrutar!<br> + <br> + <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial de canvas</a></li> +</ul> diff --git a/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html new file mode 100644 index 0000000000..9331174e6d --- /dev/null +++ b/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html @@ -0,0 +1,161 @@ +--- +title: Dibujando gráficos con canvas +slug: Web/HTML/Canvas/Drawing_graphics_with_canvas +translation_of: Web/API/Canvas_API/Tutorial +--- +<div class="note"> + <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p> +</div> +<h2 id="Introduction" name="Introduction">Introduction</h2> +<p>Firefox 1.5, incluye un nuevo elemento HTML para gráficos programables. <canvas> está basado en la especificación de canvas WHATWG, la que a su vez está basada en el <canvas> de Apple, implementado en Safari. Puede ser usado para la renderización de gráficos, elementos de Interfaz de usuarios, y otros gráficos personalizados en el cliente.</p> +<p>La etiqueta <canvas> crea una superficie de dibujo de tamaño fijo que expone uno o más contextos de renderizado. Nos enfocaremos en la representación del contexto 2D Para gráficos 3D, podrías usar la <a href="/es-ES/docs/WebGL">representación del contexto WebGL</a></p> +<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">El contexto de representación 2D</h2> +<h3 id="A_Simple_Example" name="A_Simple_Example">Un ejemplo sencillo</h3> +<p>Para comenzar, aquí un sencillo ejemplo que dibuja dos rectángulos interesándose, uno de los cuales tiene transparencia alfa.</p> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> +<p>La funcion draw obtiene el elemento canvas, entonces obtiene el contexto 2D. El objeto ctx puede entonces actualmente ser renderizado para el canvas El ejemplo simplemente llena dos rectangulos, configurando fillStyle a dos diferentes colores utilizando las especificaciones de color de CSS y llamando a fillRect El segundo FillStyle usa rgba() para especificar un valor alpha junto con el color.</p> +<p>El fillRect, strokeRect, y clearRect llama a render a ser llenado, bosquejado o limpiar rectangulo. Para representar formas más complejas, se usan trayectorias. </p> +<h3 id="Using_Paths" name="Using_Paths">Usando trayectorias</h3> +<p>La funcion Path inicia un nuevo trazo, y move to, line to, arc to, arc, y metodos similares son usados para agregar segmentos al trazo. La trayectoria puede ser cerrada usando closePath Una vez la trayectoria es creada, puedes usar fill o stroke para representar la trayectoria en el canvas.</p> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.fillStyle = "red"; + + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(150, 150); + // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. + ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> + ctx.lineTo(30, 30); + ctx.fill(); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> +<p>Llamando fill() o stroke() causa que el trazo sea usado. Para ser llenado o juntado otra vez, el trazo debe ser recreado.</p> +<h3 id="Graphics_State" name="Graphics_State">Estado de gráficos</h3> +<p>Los atributos del contexto como fillStyle, strokeStyle, lineWidth, y lineJoin son parte de actual estado de graficos El contexto provee dos metodos, save() y restore(), que pueden ser usados para mover el actual estado y desde estado stack.</p> +<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">Un ejemplo más complicado</h3> +<p>Hay aquì un ejemplo más complicado, que usa rutas,estado y tambien introduce la actual matriz de transformación. Los metodos de contexto translate(), scale(), y rotate() todos transforman la matriz actual. Todos los puntos renderizados son primero transformados por esta matriz.</p> +<pre class="brush: js">function drawBowtie(ctx, fillStyle) { + + ctx.fillStyle = "rgba(200,200,200,0.3)"; + ctx.fillRect(-30, -30, 60, 60); + + ctx.fillStyle = fillStyle; + ctx.globalAlpha = 1.0; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(-25, -25); + ctx.lineTo(25, -25); + ctx.lineTo(-25, 25); + ctx.closePath(); + ctx.fill(); +} + +function dot(ctx) { + ctx.save(); + ctx.fillStyle = "yellow"; + ctx.fillRect(-2, -2, 4, 4); + ctx.restore(); +} + +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // note that all other translates are relative to this one + ctx.translate(45, 45); + + ctx.save(); + //ctx.translate(0, 0); // unnecessary + drawBowtie(ctx, "red"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 0); + ctx.rotate(45 * Math.PI / 180); + drawBowtie(ctx, "green"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(0, 85); + ctx.rotate(135 * Math.PI / 180); + drawBowtie(ctx, "blue"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 85); + ctx.rotate(90 * Math.PI / 180); + drawBowtie(ctx, "yellow"); + dot(ctx); + ctx.restore(); +} +</pre> +<div class="hidden"> + <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> + <pre class="brush: js">draw();</pre> +</div> +<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> +<p>Esto define dos métodos, lazo y punto, que son llamados 4 veces. Antes de cada llamada, los metodos translate() y rotate() son utilizados para la matriz de transformación actual, que a su vez posicionara el punto y el lazo. el punto presenta un pequeño cuadrado negro centrado a (0,0). Ese punto se mueve alrededor de la matriz de transformación. El lazo presenta un simple ruta de lazo usando el estillo de llenado pasado.</p> +<p>Como las operaciones de la matriz son acumulativas, save() y restore() son utilizados para cada conjunto de llamadas para restaurar el estado de canvas original. Una cosa a tener en cuenta es que la rotación siempre se produce en torno al origen actual, por lo que a traducir () rotate () translate () secuencia producirá resultados diferentes a traducir () translate () serie de llamadas rotate ().</p> +<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibilidad con Apple <canvas></h2> +<p>En su mayor parte, <canvas> es compatible con Apple y otras implementaciones. Hay, sin embargo, algunas cuestiones a tener en cuenta, que se describen aquí.</p> +<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Etiqueta </canvas> requerida </h3> +<p>En la aplicación de Apple Safari, <canvas> es un elemento ejecutado de la misma manera <img> es, sino que no tiene una etiqueta de cierre. Sin embargo, para <canvas> tener uso generalizado en la web, se debe proporcionar alguna facilidad para contenido de reserva. Por lo tanto, la implementación de Mozilla tiene una etiqueta de cierre requerida.</p> +<p>Si no se necesita contenido de reserva, un simple <canvas id="foo" ...> </ canvas> será totalmente compatible con Safari y Mozilla - Safari simplemente ignorar la etiqueta de cierre.</p> +<p>Si se desea contenido de reserva, algunos trucos CSS se deben emplear para enmascarar el contenido de reserva desde Safari (las cuales deben emitir sólo la tela), y también para enmascarar los propios trucos CSS de IE (que debería hacer que el contenido de reserva).</p> +<pre>canvas { + font-size: 0.00001px !ie; +}</pre> +<h2 id="Additional_Features" name="Additional_Features">Caracteristicas adicionales </h2> +<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Renderizando el contenido we dentro de un Canvas.</h3> +<div class="note"> + Esta caracteristica esta solo disponible para codigo ejecutado con privilegios de Chrome. No esta permitido en paginas HTML normales. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Porqué leer</a>.</div> +<p>El canvas de Mozilla se extendio con el metodo drawWindow(). Este metodo dibuja una instantanea de los contenidos de una ventana DOM dentro del canvas. Por ejemplo:</p> +<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); +</pre> +<p>atraería el contenido de la ventana actual, en el rectángulo (0,0,100,200) en píxeles con respecto a la parte superior izquierda de la ventana, sobre un fondo blanco, en el lienzo. Mediante la especificación de "rgba (255,255,255,0)" como el color, el contenido no se dibujan con un fondo transparente (lo que sería más lenta).</p> +<p>Normalmente es una mala idea usar un fondo distinto de blanco "rgb(255, 255, 255)" o transparente, esto es lo que hacen todos los navegadores, y muchos sitios web esperan que esas partes transparentes de su interfaz serán puestas en fondo blanco.</p> +<p>Con este metodo, es posible ocupar un IFRAME oculto con contenido arbitrario (por ejemplo, texto HTML con estilo CSS, o SVG) y dibujarlo dentro de un canvas. sera escalado, rotado y sucesivamente de acuerdo a la transformación actual.</p> +<p>Extensión de previsualización pestaña de Ted Mielczarek utiliza esta técnica en cromo para proporcionar imágenes en miniatura de las páginas web, y la fuente está disponible para su referencia. </p> +<div class="note"> + Nota: usar canvas.drawWindow() mientras manejamos un evento de carga de documento, no trabaja En Firefox 3.5 o superior, puedes hacer esto en un manejador para el evento MozAfterPaint para dibujr satisfactoriamente un contenido HTML dentro de un canvas al cargar la pagina </div> +<h2 id="See_also" name="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> + <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> + <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> + <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: + <ul> + <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> + <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> + <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> + <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> + <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> + </ul> + </li> + <li><a href="/en-US/docs/tag/canvas">And more...</a></li> +</ul> diff --git a/files/es/web/html/canvas/index.html b/files/es/web/html/canvas/index.html new file mode 100644 index 0000000000..dfdde2bf63 --- /dev/null +++ b/files/es/web/html/canvas/index.html @@ -0,0 +1,170 @@ +--- +title: API Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - JavaScript + - Referencia + - introducción +translation_of: Web/API/Canvas_API +--- +<div>{{CanvasSidebar}}</div> + +<p class="summary">Añadido en <a href="/es/docs/HTML/HTML5">HTML5</a>, el <strong>elemento HTML {{HTMLElement("canvas")}}</strong> se puede usar para dibujar gráficos mediante scripting en <a href="/es/docs/Web/JavaScript">JavaScript</a>. Por ejemplo, se puede usar para hacer gráficas, composiciones fotográficas, crear animaciones, o incluso procesado o renderizado de vídeo en tiempo real.</p> + +<p>Las aplicaciones de Mozilla soportan <code><canvas></code> desde Gecko 1.8 (es decir, <a href="/es/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). El elemento fue inicialmenmte presentado por Apple para el Dashboard de OS X y Safari. Internet Explorer soporta <code><canvas></code> desde la versión 9 en adelante; para versiones anteriores de IE, se puede añadir soporte para <code><canvas></code> a una página incluyendo un script del proyecto de Google <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a>. Google Chrome y Opera 9 también soportan <code><canvas></code>.</p> + +<p>El elemento <code><canvas></code> también se usa en <a href="/es/docs/Web/WebGL">WebGL</a> para dibujar gráficos 3D con aceleración por hardware en páginas web.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>Edita este código para ver tus cambios en tiempo real en este canvas:</p> + +<div class="hidden"> +<h6 id="Código_editable">Código editable</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Código_editable', 700, 360) }}</p> + +<h2 id="Referencia">Referencia</h2> + +<div class="index"> +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasImageSource")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("RenderingContext")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li> +</ul> +</div> + +<p>Las interfaces relacionadas con <code>WebGLRenderingContext</code> están en <a href="/es/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> + +<p>{{domxref("CanvasCaptureMediaStream")}} está relacionado..</p> + +<h2 id="Guías_y_tutoriales">Guías y tutoriales</h2> + +<dl> + <dt><a href="/es/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt> + <dd>Tutorial exhaustivo que cubre tanto el uso básico de <code><canvas></code> como sus características avanzadas.</dd> + <dt><a href="/es/Add-ons/Code_snippets/Canvas">Fragmentos de código: Canvas</a></dt> + <dd>Algunos fragmentos de código orientados al desarrollador de extensiones usando <code><canvas></code>.</dd> + <dt><a href="/es/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: Un laberinto básico</a></dt> + <dd>Una demo de una animación de laberinto usando canvas.</dd> + <dt><a href="/es/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Dibujar objetos DOM en un canvas</a></dt> + <dd>Cómo dibujar contenido DOM, como elementos HTML, en un canvas.</dd> + <dt><a href="/es/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulación de vídeo usando canvas</a></dt> + <dd>Combinando {{HTMLElement("video")}} y {{HTMLElement("canvas")}} para manipular datos de vídeo en tiempo real.</dd> +</dl> + +<h2 id="Recursos">Recursos</h2> + +<h3 id="Genéricos">Genéricos</h3> + +<ul> + <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Profundizando en HTML5 Canvas</a></li> + <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Manual de Canvas</a></li> +</ul> + +<h3 id="Librerías">Librerías</h3> + +<ul> + <li><a href="http://fabricjs.com">Fabric.js</a> es una librería open-source para canvas con capacidad de parsear SVG.</li> + <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> es una librería open-source de canvas enfocada en la interactividad para aplicaciones móviles y de escritorio.</li> + <li><a href="http://paperjs.org/">Paper.js</a> es un framework para gráficos vectoriales open source que funciona sobre Canvas HTML5.</li> + <li><a href="http://origamijs.com/docs/">Origami.js</a> es una librería ligera open-source para canvas.</li> + <li><a href="http://libcanvas.github.com/">libCanvas</a> es un framework ligero y potente para canvas.</li> + <li><a href="http://processingjs.org">Processing.js</a> es un port de PVL (Processing visualization language).</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a> es un motor open source de juegos.</li> + <li><a href="http://www.pixijs.com/">Pixi.js</a> es un motor open source de juegos.</li> + <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> es una librería para hacer gráficas.</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> es una API para animación por frames para Canvas.</li> + <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> es un framework WebGL para visualización de datos, programación creativa y desarrollo de juegos.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualizaciones de datos 2D interactivas para Web.</li> + <li><a href="http://www.createjs.com/easeljs">EaselJS</a> es una librería open source/libre que facilita el uso de canvas para arte y juegos</li> + <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> es otra librería open-source javascript para crear y manipular elementos canvas en 2D</li> + <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> es una librería open-source para crear mapas (heatmaps)</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/WebGL">WebGL</a></li> +</ul> diff --git a/files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/index.html b/files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/index.html new file mode 100644 index 0000000000..b44128e05d --- /dev/null +++ b/files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/index.html @@ -0,0 +1,53 @@ +--- +title: Consejos para la creación de páginas HTML de carga rápida +slug: Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida +tags: + - Consejos + - HTML + - Rapido + - Tips +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +<h2 id="Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida">Consejos para la creación de páginas HTML de carga rápida</h2> + +<p>Estos consejos estan basados en conocimiento común y experimentación.</p> + +<p>Una página web optimizada no solo provee una mayor respuesta a su sitio por parte de los visitantes, sino que también reduce la carga en su servidores web y en su conexión de internet. Esto puede ser crucial para sitios con alto volumen o sitios que tienen un pico de trafico debido a circunstancias inucuales como noticias de ultima hora.</p> + +<p>Optimizar la carga de páginas no es solo para el contenido que será visto atraves de una estrecha conexión telefónica o dispositivos móviles. <span id="result_box" lang="es"><span class="hps">Es</span> <span class="hps">tan importante</span> <span class="hps">para el contenido</span> <span class="hps">de banda ancha</span> <span class="hps">y puede conducir a</span> <span class="hps">mejoras espectaculares</span> <span class="hps">incluso</span> <span class="hps">para sus</span> <span class="hps">visitantes con</span> <span class="hps">las conexiones más rápidas</span><span>.</span></span></p> + +<h3 id="Consejos">Consejos</h3> + +<h4 id="Reducir_el_peso_de_las_páginas_web">Reducir el peso de las páginas web</h4> + +<p>El peso de las páginas web es por mucho el factor más importante en el rendimiento de carga de una página.</p> + +<p>Reducir el peso de la página mediante la eliminación de espacios en blanco innecesarios y comentarios, comunmente se coonoce como minimalización, y al mover "inline-script" y "CSS" a un archivo externo, puede mejorar el rendimiento de la descarga con minimas necesidades de otros cambios en la estructura de la página.</p> + +<p>Herramientas como <a class="external external-icon" href="http://tidy.sourceforge.net/">HTML Tidy</a> pueden <span id="result_box" lang="es"><span class="hps">quitar</span> <span class="hps">automáticamente</span> <span class="hps">espacios en blanco</span> <span class="hps">y las líneas</span> <span class="hps">en blanco adicionales</span> <span class="hps">de</span> <span class="hps">código fuente HTML valido</span><span class="hps">. Otras herramientas pueden "comprimir"</span></span> JavaScript al reformatear el codigo fuente o <span id="result_box" lang="es"><span class="hps">por</span> <span class="alt-edited hps">ofuscación</span> <span class="hps">la fuente</span> <span class="hps">y la sustitución de</span> <span class="hps">los identificadores largos con versiones mas cortas.</span></span></p> + +<h3 id="Minimizar_el_número_de_archivos">Minimizar el número de archivos</h3> + +<p>Reducir el número de archivos referentes en una pagina web baja el número de conexiones <a href="https://developer.mozilla.org/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> requeridas para bajar la página.</p> + +<p>Dependiendo de la configuración de cache de un navegador, puede enviar una petición <span id="result_box" lang="es"><span class="hps">"If</span><span>-Modified-Since"</span></span> al servidor web para cada "CSS", JavaScript o archivo de imágen, preguntando si el archivo ha sido modificado desde la ultima vez que fué descargado.</p> + +<p>Al reducir el número de archivos que son refereciados dentro de una página web, <span id="result_box" lang="es"><span class="hps">se reduce el</span> <span class="hps">tiempo necesario para que</span> <span class="hps">estas solicitudes</span> <span class="hps">se envíen</span><span>,</span> <span class="hps">y</span> <span class="hps">para que sus</span> <span class="hps">respuestas</span> <span class="hps">que se reciban</span><span>.</span></span></p> + +<p>Si se usan muchas imágenes de fondo en sus "CSS", puedes reducir la cantidad de busquedas HTTP necesarias al combinar las imagenes en una, conocido como "image sprite". Luego solamente <span id="result_box" lang="es"><span class="hps">se aplica la</span> <span class="hps">misma imagen</span> <span class="hps">cada</span> <span class="hps">vez que lo necesite</span> <span class="hps">para un fondo,</span> <span class="hps">ajustando las coordenadas el eje (X / Y</span></span>) adecuadamente. Estas técnica trabaja mejor con elementos que tendrán dimensiones limitadas, no funcionará para todos los usos de imagenes de fondo, sin embargo, la menor cantidad de pedidos HTTP y el uso de una única imágen en caché puede reducir el timepo de carga de una página.</p> + +<p>Demasiado tiempo gastado en consultar la ultima modificación de los archivos referenciados puede demorar la pantalla inicial de una página web, <span id="result_box" lang="es"><span class="hps">ya que el</span> <span class="hps">explorador debe</span> <span class="hps">comprobar</span> <span class="hps">la fecha de modificación</span> <span class="hps">de cada</span> <span class="hps">archivo</span> <span class="hps">CSS o</span> <span class="hps">JavaScript</span><span>, antes de pintar la página.</span></span></p> + +<h3 id="Reducir_la_busqueda_de_dominios">Reducir la busqueda de dominios</h3> + +<p>Debido a que cada dominio separado cuesta tiempo en una busqeuda DNS, el tiempo de carga de la página crecerá junto con el número de dominios <span id="result_box" lang="es"><span class="hps">que aparecen en</span> <span class="hps">enlace</span> <span class="hps">CSS</span> <span class="atn hps">(</span><span>s</span><span>)</span>, <span class="hps"> JavaScript</span> <span class="hps">y</span> <span class="hps">recursos de</span> <span class="hps">imagen.</span></span></p> + +<p>Esto no puede ser siempre práctico; sin embargo <span id="result_box" lang="es"><span class="hps">siempre se debe</span> <span class="hps">tener cuidado de usar</span> <span class="hps">sólo el número</span> <span class="hps">mínimo necesario</span> <span class="hps">de los diferentes dominios</span> <span class="hps">en</span> <span class="hps">sus páginas</span></span>.</p> + +<h3 id="Reutilización_de_contenido_de_cache">Reutilización de contenido de cache</h3> + +<p><span id="result_box" lang="es"><span class="hps">Asegúrese de que cualquier</span> <span class="hps">contenido que se pueden</span> <span class="hps">almacenar en caché</span><span>,</span> <span class="hps">se almacena en caché</span><span>,</span> <span class="hps">y</span> <span class="hps">con</span> <span class="hps">fechas de caducidad</span> <span class="hps">correspondientes.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">En particular</span><span>,</span> <span class="hps">prestar atención a la</span> <span class="hps">cabecera</span></span> "<code>Last-Modified</code>". Permite el eficiente almacenamiento en cache de la página; <span id="result_box" lang="es"><span class="hps">por medio de</span> <span class="hps">esta cabecera</span><span>, la información</span> <span class="hps">se transmite al</span> <span class="hps">agente de usuario</span> <span class="hps">sobre el archivo</span> <span class="hps">que quiere</span> <span class="hps">cargar</span><span>,</span> <span class="hps">por ejemplo, </span></span><span id="result_box" lang="es"><span class="hps">como cuando</span> <span class="hps">fue</span> <span class="hps">modificada por última vez</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">servidores web</span> <span class="hps">añadirá automáticamente</span> <span class="hps">la</span> <span class="hps">cabecera Last-Modified</span> <span class="hps">para</span> <span class="hps">páginas estáticas</span> <span class="hps">(por ejemplo</span> <span class="hps">.html</span><span>,</span> <span class="hps">.css</span><span>)</span><span>,</span></span> <span id="result_box" lang="es"><span class="hps">basado en</span> <span class="hps">la</span> <span class="hps">fecha de última modificación</span> <span class="hps">almacenada en</span> <span class="hps">el sistema de archivos</span><span>.</span> <span class="hps">Con</span> <span class="hps">páginas dinámicas</span> <span class="hps">(por ejemplo,</span> <span class="hps">.php</span><span>,</span> <span class="hps">.aspx</span><span>)</span><span>,</span> <span class="hps">esto, por supuesto</span><span>,</span> <span class="hps">no se puede hacer</span><span>, y</span> <span class="hps">la cabecera</span> <span class="hps">no se envía</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Así</span><span>,</span> <span class="hps">en particular</span> <span class="hps">para las páginas</span> <span class="hps">que se generan</span> <span class="hps">de forma dinámica</span><span>,</span> <span class="hps">un poco de investigación</span> <span class="hps">sobre este tema es</span> <span class="hps">beneficioso.</span> <span class="hps">Puede ser</span> <span class="hps">un poco</span> <span class="hps">complicada, pero</span> <span class="hps">se ahorrará mucho</span> <span class="hps">en</span> <span class="hps">las solicitudes de página</span> <span class="hps">en las páginas</span> <span class="hps">que</span> <span class="hps">normalmente no serían</span> <span class="hps">cacheable</span><span>.</span></span></p> diff --git a/files/es/web/html/elemento/a/index.html b/files/es/web/html/elemento/a/index.html new file mode 100644 index 0000000000..e35402f7a5 --- /dev/null +++ b/files/es/web/html/elemento/a/index.html @@ -0,0 +1,321 @@ +--- +title: <a> +slug: Web/HTML/Elemento/a +tags: + - Contenido + - Ejemplo + - Elemento + - HTML + - Principiante + - Referencia + - Web +translation_of: Web/HTML/Element/a +--- +<div>{{HTMLRef}}</div> + +<p>El <em>Elemento HTML <code>Anchor</code></em> <strong><code><a></code></strong> crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Categorías de contenido</th> + <td>Contenido de flujo, contenido de párrafo, contenido interactivo, contenido palpable</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">Transparente, que contiene contenido de flujo (excluyendo contenido interactivo) o contenido de párrafo.</a></td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos principales permitidos</th> + <td>Cualquier elemento que acepte contenido de párrafo o cualquier elemento que acepte contenido de flujo, sin embargo simpre excluyendo los elementos <a> (de acuerdo con el principio lógico de simetría, si una etiqueta <a> como padre, no puede contener contenido interactivo, entonces el mismo contenido de <a> no puede tener una etiqueta <a> como su padre).</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> + <dd>Este atributo, indica descargar a los navegadores una URL en lugar de navegar hacia ella, por lo que el usuario será dirigido para salvarla como un archivo local. Si el atributo tiene un valor, éste se utilizará como nombre de archivo por defecto en el mensaje Guardar que se abre cuando el usuario hace clic en el enlace (sin embargo, el usuario puede cambiar el nombre antes de guardar el archivo). No hay restricciones sobre los valores permitidos, aunque: / y: \ se convertirán en guiones bajos (<em>underscores</em>), lo que evitará sugerencias de ruta específicas. Se debe tener en cuenta que la mayoría de los sistemas de archivos tienen limitaciones con respecto a los símbolos de puntuación admitidos en los nombres de archivo, por lo que los navegadores ajustarán los nombres de los archivos en consecuencia. + <div class="note"><strong>Notas:</strong> + <ul> + <li>Este atributo sólo funciona para las <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">políticas de mismo origen (same-origin URLs)</a>.</li> + <li>Este atributo puede ser utilizado con <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code> URLs</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a> para descargar contenido generado por JavaScript, tales como fotografías creadas por una aplicación web de edición de imágenes.</li> + <li>Si el encabezado (<em>header</em>) HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition:</code></a> proporciona un nombre de archivo diferente al de este atributo, el encabezado HTTP tiene prioridad sobre este atributo.</li> + <li>Si <code>Content-Disposition:</code> está ajustado a <code>inline</code>, Firefox prioriza <code>Content-Disposition</code>, como en el caso del nombre de archivo, mientras que Chrome prioriza el atributo <code>download</code>.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Contiene una URL o un fragmento de URL al cual apunta el enlace.</dd> + <dd>Un fragmento de URL es un nombre ("name") precedido por el símbolo de número (<code>#</code>), el cual especifíca una ubicación interna objetivo (un <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes#attr-id">ID</a> de un elemento HTML) dentro del actual documento. Las URLs no están restringidas sólo a documentos de internet basados en HTTP, sin embargo pueden utilizar cualquier protocolo soportado por el navegador. Por ejemplo, <a class="external external-icon" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>, <code>ftp:</code>, and <code>mailto:</code> funcionan en la mayoría de los navegadores.</dd> + <dd>Este atributo puede ser omitido (a partir de HTML5) para crear un enlace de marcador de posición. Un enlace de marcador de posición se parece a un enlace tradicional, pero que no dirige a algún lugar. + <div class="note"> + <p><strong>Nota:</strong> Puede ser utilizado <code>href="#top"</code> o un fragmento vacío <code>href="#"</code> para enlazar a la parte superior de la página actual. <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid">Este comportamiento está especficado en HTML5</a>.</p> + </div> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>Este atributo indica el lenguaje humano del recurso al que se enlaza. Este es únicamente informativo, sin ninguna funcionalidad incorporada. Los valores permitidos están determinados por <a class="external external-icon" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Indica que <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referencia (<em>referer</em>)</a> enviar cuado la URL es recuperada: + <ul> + <li><code>'no-referrer'</code> significa <code>Referer:</code> el encabezado no será enviado.</li> + <li><code>'no-referrer-when-downgrade'</code> significa sin <code>Referer:</code> el encabezado será enviado cuando se navega a un origen (<code>origin</code>) sin HTTPS. Este es un comportamiento por defecto.</li> + <li><code>'origin'</code> significa que el "referrer" estará en el <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origen</a> (<code>origin</code>) de la página, no incluye la información posterior al dominio.</li> + <li><code>'origin-when-cross-origin'</code> significa que la navegación a otros orígenes (<em>origins</em>) será limitada al esquema (<em>scheme</em>), el host y el puerto, mientras que la navegación en el mismo origen (origin) incuirá la trayectoria de referencia (<em>referrer's path</em>).</li> + <li><code>'unsafe-url'</code> significa que la referencia (<em>referrer</em>) incuirá el origen(<code>origin</code>) y la trayectoria (<em>path</em>), pero no el fragmento, contraseña o nombre de usuario. Esto es inseguro, ya que puede filtrar datos desde una URL segura hacia URLs inseguras.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Especifica la relación del objeto de destino con el objeto de enlace. El valor es una lista separada por espacios de tipos de enlace<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types"> tipos de enlace (link types)</a>.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>Especifica en donde desplegar la URL enlazada. Es un nombre (<em>name of</em>), o palabra clave (<em>keyword for</em>), un contexto de navegación <em>(browsing context)</em>: una pestaña, ventana, o <code><iframe></code>. Las siguientes palabras clave (<em>keywords</em>) tienen significado especial: + <ul> + <li><code>_self</code>: Carga la URL en el mismo contexto de navegación que el actual. Este es el comportamiento por defecto.</li> + <li><code>_blank</code>: Carga la URL en un nuevo contexto de navegación. Usualmente es una pestaña, sin embargo, los usuarios pueden configurar los navegadores para utilizar una ventana nueva en lugar de la pestaña.</li> + <li><code>_parent</code>: Carga la URL en el contexto de navegación padre (<em>parent</em>) del actual. Si no existe el padre, este se comporta del mismo modo que <code>_self</code>.</li> + <li><code>_top</code>: Carga la URL en le contexto más alto de navegación (el cual es un ancestro del actual, y no tiene padre (<em>parent</em>)). Si no hay padre (<em>parent</em>), este se comporta del mismo modo que <code>_self</code>.</li> + </ul> + + <div class="note"> + <p><strong>Nota:</strong> Cuando se utiliza <code>target</code>, considera agregar <code>rel="noopener noreferrer"</code> para evitar el uso de la API <code>window.opener</code>.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Especifica el tipo de medio (<em>media type</em>) en la forma de {{Glossary("MIME type")}} para la URL enlazada. Esto es únicamente informativo, sin ninguna funcionalidad incorporada.</dd> + <dt> + <h3 id="Obsoleto">Obsoleto</h3> + </dt> + <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Este atributo define la <a href="https://developer.mozilla.org/en-US/docs/Glossary/character_encoding">codificación de caracteres (character encoding)</a> de la URL enlazada. El valor debe de ser una lista delimitada por espacio y/o coma de caracteres definidos en <a class="external external-icon" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>. El valor por defecto es <code>ISO-8859-1</code>. + <div class="note"> + <p><strong>Nota de uso:</strong> Este atributo es obsoleto en HTML5 y <strong>no debe ser utilizado por autores</strong>. Para lograr su efecto, se debe utilzar el encabezado HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> en la URL enlazada.</p> + </div> + </dd> + <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Para utilizar con el siguiente atributo <code>shape</code>, este atributo utiliza una lista de números separada por comas para definir las coordenadas del enlace en la página.</dd> + <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Este atributo era requerido para anclas (<em>anchors</em>) que definían una posible ubicación dentro de la página. En HTML 4.01, <code>id</code> y <code>name</code> podían ser utilizados simultáneamente en un elemento <code><a></code> simpre y cuando tuvieran valores idénticos. + <div class="note"> + <p><strong>Nota de uso:</strong> Este atributo es obsoleto en HTML5, se utiliza el <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes#attr-id">atributo global <code>id</code></a> en su lugar.</p> + </div> + </dd> + <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Este atributo especifica un enlace inverso, la relación inversa del atributo <strong>rel</strong>. Fue desechado por ser muy confuso.</dd> + <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt> + <dd>Este atributo era utilizado para definir una región de enlaces para crear un mapa de imagen. El valore es <code>circle</code>, <code>default</code>, <code>polygon</code>, y <code>rect</code>. El formato del atributo <code>coords</code> depende del valor de la forma geométrica. Para <code>circle</code>, el valor es <code>x,y,r</code> donde <code>x</code> y <code>y</code> son las coordenadas en pixel para el centro del círculo y <code>r</code> es el valor del radio en pixeles. Para <code>rect</code>, el atributo <code>coords</code> debe ser <code>x,y,w,h</code>. Los valores <code>x y y</code> definen la esquina superior izquierda del rectángulo, mientras que <code>w</code> y <code>h</code> definen el ancho y el alto respectivamente. Un valor del <code>polygon</code> para <code>shape</code> requiere los valores <code>x1,y1,x2,y2,...</code>para <code>coords</code>. Cada uno de los pares <code>x,y</code> definen un punto en el polígono, con puntos sucesivos que son unidos por líneas rectas y el útlimo punto se une al primer punto. El valor <code>default</code> para <code>shape</code> Requiere que el área encerrada, típicamente una imágen, sea utilizada. + <div class="note"><strong>Nota:</strong> Utilice el <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-usemap">atributo <code>usemap</code></a> para el elemento {{HTMLElement("img")}} y el elemento asociado {{HTMLElement("map")}} para definir puntos de acceso (<em>hotspots</em>) en lugar del atributo <code>shape</code>.</div> + </dd> +</dl> + +<div> +<h2 id="sect1"></h2> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Enlazando_a_una_ubicación_externa">Enlazando a una ubicación externa</h3> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><!-- anclaje a un archivo externo --> +<a href="https://www.mozilla.com/"> +Enlace externo +</a></code></pre> + +<h4 id="Resultado">Resultado</h4> + +<p><a class="external external-icon" href="https://www.mozilla.com/">Enlace externo</a></p> + +<h3 id="Enlazando_a_otra_sección_de_la_misma_página">Enlazando a otra sección de la misma página</h3> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><!-- enlace a un elemento en esta página con id="attr-href" --> +<a href="#attr-href"> +Descripción de enlaces de la misma página +</a></code></pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p><a href="#attr-href">Descripción de enlaces de la misma página</a></p> + +<h3 id="Creando_una_imagen_clicable">Creando una imagen clicable</h3> + +<p>Este ejemplo utiliza una imagen que enlaza a la página de inicio de MDN. La página de inicio se abrirá en un contexto de navegación nuevo, esto es, en una nueva página o nueva ventana.</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><a href="https://developer.mozilla.org/en-US/" target="_blank"> + <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" + alt="MDN logo" /> +</a></code></pre> + +<h4 id="Resulta">Resulta</h4> + +<figure> +<p>{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}</p> +</figure> + +<h3 id="Creando_un_enlace_de_correo">Creando un enlace de correo</h3> + +<p>Es común crear enlaces que abren el programa de correo del usuario para permitir enviar un nuevo mensaje. Esto se hace con un enlace <code>mailto:</code>. Aquí tenemos un ejemplo:</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><a href="mailto:nowhere@mozilla.org">Enviar correo a nowhere</a></code></pre> + +<h4 id="Resultado_3">Resultado</h4> + +<p><a href="mailto:nowhere@mozilla.org">Envia un correo a: nowhere</a></p> + +<p>Para detalles adicionales acerca del esquema de la URL <code>mailto</code>, tales como incluir el asunto, el cuerpo u otros contenidos predeterminados, consultar <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Email_links">Enlaces de correo (Email links)</a> o {{RFC(6068)}}.</p> + +<h3 id="Creando_un_enlace_a_un_número_de_teléfono">Creando un enlace a un número de teléfono</h3> + +<p>Ofrecer enlaces a números de teléfono es muy útil para los ususarios que observan documentos de internet desde computadoras portátiles conectadas a teléfonos o desde teléfonos celulares (móviles)</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><a href="tel:+491570156">+49 157 0156</a></code></pre> + +<p>Para detalles adicionales acerca del esquema de la URL <code>tel</code>, consultar {{RFC(2806)}} y {{RFC(2396)}}.</p> + +<h3 id="Utilizando_el_atributo_download_para_guardar_un_<canvas>_como_PNG">Utilizando el atributo <code>download</code> para guardar un <code><canvas></code> como PNG</h3> + +<p>Si deseas permitir a los usurios descargar una elemento HTML {{HTMLElement("canvas")}} como una imagen, puedes crear un enlace con una atributo <code>download</code> y la información canvas como un archivo URL:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">var link = document.createElement('a'); +link.innerHTML = 'download image'; + +link.addEventListener('click', function(ev) { + link.href = canvas.toDataURL(); + link.download = "mypainting.png"; +}, false); + +document.body.appendChild(link);</code></pre> + +<p>Puedes ver como funciona en: <a href="https://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p> + +<h2 id="Notas">Notas</h2> + +<p>HTML 3.2 define sólo los atributos <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code>, y <code>title</code>.</p> + +<h3 id="Recomendaciones_de_accesibilidad">Recomendaciones de accesibilidad</h3> + +<p>Se abusa frecuntemente de las etiquetas de ancla (<em>anchor tags</em>) con el uso de los eventos <code>onclick</code> para crear pseudo-botones ajustando <strong>href</strong> a <code>"#"</code> o <code>"javascript:void(0)"</code> para prevenir la recarga de la página. Estos valores provocan comportamientos inesperados con los enlaces de copiado/dibujado, la apertura de enlaces en nuevas pestañas/ventanas, el guardado de enlaces (<em>bookmarking</em>), y cuando JavaScript está aún descargando, esto arroja errores, o es deshabilitado. Esto tambíen lleva a semánticas (<em>semantics</em>) incorrectas para tecnologías de asistencia (p.ej., lectores de pantalla). En estos casos, se recomienda utilizar un {{HTMLElement("button")}} en su lugar. En general, sólo se debe utilizar una ancla (<em>anchor</em>) para navegación utilizando una URL adecuada.</p> + +<h3 id="Cliceo_y_enfoque">Cliceo y enfoque</h3> + +<p>Cuando se clicea sobre un {{HTMLElement("a")}} las consecuencias varían de acuerdo al navegador y el sistema operativo.</p> + +<table> + <caption>¿Al hacer clic en un {{HTMLElement("a")}} se enfoca?</caption> + <tbody> + <tr> + <td>Navegadores de escritorio</td> + <th>Windows 8.1</th> + <th>OS X 10.9</th> + </tr> + <tr> + <th>Firefox 30.0</th> + <td style="background-color: LawnGreen;">Si</td> + <td style="background-color: LawnGreen;">Si</td> + </tr> + <tr> + <th>Chrome ≥39<br> + (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th> + <td style="background-color: LawnGreen;">Si</td> + <td style="background-color: LawnGreen;">Si</td> + </tr> + <tr> + <th>Safari 7.0.5</th> + <td style="background-color: silver;">N/A</td> + <td style="background-color: yellow;">Sólo cuando tiene un <code>tabindex</code></td> + </tr> + <tr> + <th>Internet Explorer 11</th> + <td style="background-color: LawnGreen;">Si</td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Presto (Opera 12)</th> + <td style="background-color: LawnGreen;">Si</td> + <td style="background-color: LawnGreen;">Si</td> + </tr> + </tbody> +</table> + +<table> + <caption>¿Al hacer un clic en un {{HTMLElement("a")}} se enfoca?</caption> + <tbody> + <tr> + <td>Navegadores móviles</td> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + <tr> + <th>Safari Mobile</th> + <td style="background-color: yellow;">Sólo cuando tiene un <code>tabindex</code></td> + <td style="background-color: silver;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td>???</td> + <td style="background-color: yellow;">Sólo cuando tiene un <code>tabindex</code></td> + </tr> + </tbody> +</table> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td> + <td>{{Spec2("Referrer Policy")}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="Consultar_también">Consultar también</h2> + +<ul> + <li>Otros elementos comunicando a nivel semántico de texto <a href="https://developer.mozilla.org/en-US/docs/HTML/Text_level_semantics_conveying_elements">(text-level semantics)</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul></div> diff --git a/files/es/web/html/elemento/abbr/index.html b/files/es/web/html/elemento/abbr/index.html new file mode 100644 index 0000000000..8646722071 --- /dev/null +++ b/files/es/web/html/elemento/abbr/index.html @@ -0,0 +1,147 @@ +--- +title: <abbr> +slug: Web/HTML/Elemento/abbr +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/abbr +--- +<p id="Summary">{{HTMLRef}}</p> + +<p>El <strong>elemento HTML <code><abbr></code></strong> (<em>o Elemento de Abreviación HTML</em>) representa una abreviación o acrónimo; el atributo opcional {{htmlattrxref("title")}} puede ampliar o describir la abreviatura. Si está presente, el atributo <code>title</code> debe contener la descripción completa y nada más.</p> + +<pre class="brush: html"><p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p></pre> + +<p style="margin-top: -1.5em;"><small>El artículo <a href="/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Cómo marcar abreviaciones y hacerlas entendibles</a> es una guía para aprender a usar <code><abbr></code> y elementos relacionados.</small></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_estático_o_de_texto">contenido estático o de texto</a>, contenido palpable</td> + </tr> + <tr> + <th scope="row">Conteido permitido</th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_estático_o_de_texto">Contenido de estático o de texto</a></td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_estático_o_de_texto">contenido estático o de texto</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento sólo incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>. El atributo {{htmlattrxref("title")}} tiene un sentido específicamente semántico cuando es usado con el elemento <code><abbr></code>; <em>debe </em>contener una completa descripción o ampliación de la abreviación. Este texto es usualmente presentado por los navegadores como tooltip cuando se pasa el mouse sobre el elemento.</p> + +<p>Cada elemento <code><abbr></code> usado es independiente de todos los otros; dar un <code><title></code> a uno no hace que automáticamente todos los demás adquieran la misma descripción.</p> + +<div class="note"> +<p><strong>Nota: </strong>En lenguajes con números gramaticales (especialmente lenguajes con más de dos números, como el Árabe), utiliza el mismo número gramatical en el atributo <code>title</code> como dentro del elemento <code><abbr></code>.</p> +</div> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}} [1]</td> + <td>7.0</td> + <td>1.3</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Hasta Gecko 1.9.2 (Firefox 3.6), Firefox implementó la interfaz {{domxref("HTMLSpanElement")}} para este elemento en lugar de la interfaz {{domxref("HTMLElement")}}.</p> + +<h2 id="Estilo_por_defecto">Estilo por defecto</h2> + +<p>El propósito de este elemento es puramente para la conveniencia del autor y por defecto todos los navegadores lo muestran en línea ({{cssxref('display')}}<code>: inline</code>), sin embargo su estilo por defecto varía de un navegador a otro:</p> + +<ul> + <li>Algunos navegadores, como Internet Exlorer, no lo diseñan de manera diferente que el elemento {{HTMLElement("span")}}.</li> + <li>Opera, Firefox, y algunos otros añaden un subrayado de puntos al contenido del elemento.</li> + <li>Algunos navegadores no sólo añaden un subrayado de puntos, sino que también lo ponen en minúsculas; para evitar este estilo, añadir algo como {{cssxref('font-variant')}}<code>: none</code> en CSS se hace cargo de este caso.</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Utilizando el elemento <abbr></a></li> + <li>Otros elementos de nivel semántico de texto: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> +</ul> + +<div> </div> diff --git a/files/es/web/html/elemento/acronym/index.html b/files/es/web/html/elemento/acronym/index.html new file mode 100644 index 0000000000..94581489a3 --- /dev/null +++ b/files/es/web/html/elemento/acronym/index.html @@ -0,0 +1,160 @@ +--- +title: acronym +slug: Web/HTML/Elemento/acronym +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/acronym +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>acromym</strong> de acromyn=acrónimo</p> + +<p>Es el encargado para marcar estas formas abreviadas (modem, AJAX...). Además, gracias al atributo <code style="color: green;">title</code> podemos indicar la versión extendida del término.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <abbr> y </abbr> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<pre class="eval"><span class="nowiki"> + <p> + El acrónimo de moda es: + <acronym lang="en" title="Asynchronous JavaScript and XML">Ajax</acronym>. + </p> + </span> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<p>En Firefox se resalta con un "subrayado" punteado fino. vea el ejemplo:</p> + +<pre class="eval"><span class="nowiki"> + <p> + el <abbr lang="en" title="Mocilla developer center">MDC</abbr> toma el + <span style='border-bottom: dotted thin;' + title='esto no es ni una abreviatura ni un acrónimo'>relevo</span> de lo que fue el + <acronym lang="en" title="DEVeloper.Mozilla.Org">Devmo</acronym>. + </p> + </span> +</pre> + +<p>Cabe destacar que <a href="es/HTML/Elemento/abbr">abbr</a> y <a href="es/HTML/Elemento/acronym">acronym</a> comparten estilo predeterminado.</p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-acronym">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>El tema de las abreviaturas y acrónimos puede ser un tanto lioso. En castellano a veces cuesta saber si tal 'palabra' es una <a class="external" href="http://es.wikipedia.org/wiki/Abreviatura">abreviatura</a>, un <a class="external" href="http://es.wikipedia.org/wiki/Acr%C3%B3nimo">acrónimo</a> una sigla o un símbolo. Para complicarlo un poco más, resulta que el estándar html está en inglés y parece ser que las gramáticas castellana e inglesa no definen exactamente igual conceptos como <a href="es/HTML/Elemento/abbr">abreviatura</a> o <a href="es/HTML/Elemento/acronym">acrónimo</a>.</p> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <strong>acronym</strong> en el estándar <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-ACRONYM">HTML 4.01</a></li> +</ul> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber como hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/address/index.html b/files/es/web/html/elemento/address/index.html new file mode 100644 index 0000000000..fdfacfeba1 --- /dev/null +++ b/files/es/web/html/elemento/address/index.html @@ -0,0 +1,163 @@ +--- +title: <address> +slug: Web/HTML/Elemento/address +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/address +--- +<p id="Summary">{{HTMLRef}}</p> + +<p>El <strong>elemento HTML <code><address></code></strong> aporta información de contacto para su {{HTMLElement("article")}} más cercano o ancestro {{HTMLElement("body")}}; en el último caso lo aplica a todo el documento.</p> + +<div class="note"> +<p><strong>Notas de uso:</strong></p> + +<ul> + <li>Para representar una dirección arbitraria, una que no esté relacionada con la información de contacto, utiliza un elemento {{HTMLElement("p")}} en lugar del elemento <code><address></code>.</li> + <li>Este elemento no debe contener más información que la información de contacto, como una fecha de publicación (que pertenece al elemento {{HTMLElement("time")}}).</li> + <li>Normalmente un elemento <code><address></code> puede ser colocado dentro del elemento {{HTMLElement("footer")}} de la sección actual, si lo hay.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, contenido palpable</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td> + <p><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, pero no con elementos <code><address></code> anidados, no contenidos de cabecera ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no contenido de sección ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), y no elemento {{HTMLElement("header")}} o {{HTMLElement("footer")}}.</p> + </td> + </tr> + <tr> + <th scope="row">Etiqueta de omisión</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido dinámico</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td> + <p>{{domxref("HTMLElement")}} antes de Gecko 2.0 (Firefox 4), Gecko implementó este elemento usando la interfaz {{domxref("HTMLSpanElement")}}.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento solo incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"> <address> + You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br> + If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br> + You may also want to visit us:<br> + Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA + </address> +</pre> + +<p>Above HTML will output:</p> + +<p><img alt="Image:HTML-address.png" src="/@api/deki/files/238/=HTML-address.png"></p> + +<p>Aunque el elemento de dirección representa el texto con el mismo estilo predeterminado de los elementos {{HTMLElement("i")}} o {{HTMLElement("em")}}, es más apropiado utilizarlo cuando se trata información de contacto, ya que transmite la información semántica adicional.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>1.0</td> + <td>5.12</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otras elementos de sección relacionados: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};</li> + <li class="last"><a href="/es/docs/Sections_and_Outlines_of_an_HTML5_document">Secciones y línea generales de un documento HTML5</a>.</li> +</ul> diff --git a/files/es/web/html/elemento/applet/index.html b/files/es/web/html/elemento/applet/index.html new file mode 100644 index 0000000000..51282989af --- /dev/null +++ b/files/es/web/html/elemento/applet/index.html @@ -0,0 +1,236 @@ +--- +title: applet +slug: Web/HTML/Elemento/applet +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/applet +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Permite añadir un applet Java en un documento HTML. Es un elemento <a href="es/HTML/Elemento/Tipos_de_elementos#Desaprobado">Desaprobado</a> En su lugar debe usarse el elemento <a href="es/HTML/Elemento/object">object</a>, su uso solo es válido declarando el dtd transicional.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <applet> y </applet> (ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#Especiales">Elemento especial</a>. <a href="es/HTML/Elemento/Tipos_de_elementos#Desaprobado">Desaprobado</a></dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong> cero o más elementos param o del tipo 'en flujo'.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genericos</th> + </tr> + <tr> + <td><code style="color: green;">title </code></td> + <td>Texto</td> + <td>Implícito</td> + <td>Título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style </code></td> + <td>Reglas de estilo CSS</td> + <td>Implícito</td> + <td>Información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id </code></td> + <td>Un 'nombre'</td> + <td>Implícito</td> + <td>Identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class </code></td> + <td>Lista de clases CSS</td> + <td>implícito</td> + <td>Identificador a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">dir </code></td> + <td>Uno de los siguientes: "ltr" o "rtl"</td> + <td>Implícito</td> + <td>Dirección del texto.</td> + </tr> + <tr> + <td><code style="color: green;">lang </code></td> + <td>Código de idioma</td> + <td>Implícito</td> + <td>Información sobre el idioma.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td><code style="color: green;">declare </code></td> + <td>(declare)</td> + <td>Implícito</td> + <td>Información sobre el idioma.</td> + </tr> + <tr> + <td><code style="color: green;">classid </code></td> + <td>Una dirección</td> + <td>Implícito</td> + <td>Identifica una implementación.</td> + </tr> + <tr> + <td><code style="color: green;">codebase </code></td> + <td>Una dirección</td> + <td>Implícito</td> + <td>URI base para classid, datos, archivo.</td> + </tr> + <tr> + <td><code style="color: green;">data </code></td> + <td>Una dirección</td> + <td>Implícito</td> + <td>Referencia a los datos del objeto.</td> + </tr> + <tr> + <td><code style="color: green;">type </code></td> + <td>Tipo MIME</td> + <td>Implícito</td> + <td>Tipo de contenido de los datos.</td> + </tr> + <tr> + <td><code style="color: green;">codetype </code></td> + <td>Tipo MIME</td> + <td>Implícito</td> + <td>Tipo de contenido del código.</td> + </tr> + <tr> + <td><code style="color: green;">archive </code></td> + <td>Direcciones</td> + <td>Implícito</td> + <td>Lista de URIs separados por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">standby </code></td> + <td>Texto</td> + <td>Implícito</td> + <td>Mensaje a mostrar durente la carga.</td> + </tr> + <tr> + <td><code style="color: green;">height </code></td> + <td>Tamaño</td> + <td>Implícito</td> + <td>Especificar nueva altura.</td> + </tr> + <tr> + <td><code style="color: green;">width </code></td> + <td>Tamaño</td> + <td>Implícito</td> + <td>Especificar nueva anchura.</td> + </tr> + <tr> + <td><code style="color: green;">usemap </code></td> + <td>Una dirección</td> + <td>Implícito</td> + <td>Usar mapa de imágenes en el cliente.</td> + </tr> + <tr> + <td><code style="color: green;">name </code></td> + <td>CDATA</td> + <td>Implícito</td> + <td>Enviar como parte de un formulario.</td> + </tr> + <tr> + <td><code style="color: green;">tabindex </code></td> + <td>Número</td> + <td>Implícito</td> + <td>Posición en el orden de tabulación.</td> + </tr> + <tr> + <td><code style="color: green;">align </code></td> + <td>Uno de los siguientes: "top", "middle", "bottom", "left", "right".</td> + <td>Implícito</td> + <td>Alineación vertical u horizontal.</td> + </tr> + <tr> + <td><code style="color: green;">border </code></td> + <td>Píxeles</td> + <td>Implícito</td> + <td>Grosor del borde del vínculo.</td> + </tr> + <tr> + <td><code style="color: green;">hspace </code></td> + <td>Píxeles</td> + <td>Implícito</td> + <td>espacio horizontal.</td> + </tr> + <tr> + <td><code style="color: green;">vspace </code></td> + <td>Píxeles</td> + <td>Implícito</td> + <td>Espacio vertical.</td> + </tr> + <tr> + <td><code style="color: green;"> %reserved; </code></td> + <td> </td> + <td> </td> + <td>Reservado para posibles usos futuros.</td> + </tr> + <tr> + <th>atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"><span class="nowiki"> Ejemplo con applet: + + <applet code="loquesea.class" + width="500" height="500"> + <!-- Aquí los contenidos alternativos por si falla el applet. --> + </applet> + + Lo mismo pero usando el elemento object: + + <object codetype="application/java" + classid="java:loquesea.class" + width="500" height="500"> + <!-- Aquí los contenidos alternativos por si falla el applet. --> + </object></span> +</pre> + +<p> </p> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p><span class="comment">El contenido de applet actúa como información alternativa para agentes de usuario que no soporten este elemento o que estén configurados para no soportar applets. En cualquier otro caso los agentes de usuario deben ignorar el contenido.</span></p> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#edef-APPLET"><strong>applet</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p><span class="comment">secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==</span></p> diff --git a/files/es/web/html/elemento/area/index.html b/files/es/web/html/elemento/area/index.html new file mode 100644 index 0000000000..201e8745a2 --- /dev/null +++ b/files/es/web/html/elemento/area/index.html @@ -0,0 +1,212 @@ +--- +title: area +slug: Web/HTML/Elemento/area +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/area +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>area</strong> de area=área</p> + +<p>Sirve para crear las distintas secciones en las que se puede dividir un <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#include-maps">mapas de imágenes</a> en el cliente.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <area> (solo tiene una).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: No.</dd> +</dl> + +<dl> + <dd><strong>Es un</strong>: Elemento para mapas de imágenes.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Nada.</dd> +</dl> + +<dl> + <dd><strong>Solo puede ser hijo de</strong>: Elementos <a href="es/HTML/Elemento/map">map</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-shape"><span style="color: green;">shape </span></a></td> + <td>Indica la forma del área del mapa.</td> + <td>Uno de los siguientes: <code>'rect'</code>, <code>'circle'</code>, <code>'poly'</code>, o <code>'default'</code>.</td> + <td><abbr title="Por defecto">PD.</abbr>: <code>'rect'</code></td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-coords"><span style="color: green;">coords </span></a></td> + <td>Indica las coordenadas (x,y) del área del mapa.</td> + <td>Lista de: cantidades de píxeles, o porcentajes de espacio disponible. Separadas por comas.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/links.html#adef-href"><span style="color: green;">href </span></a></td> + <td>La dirección del recurso vínculado.</td> + <td>Una dirección <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.4">URI</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> (o no).</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-nohref"><span style="color: green;">nohref </span></a></td> + <td>Indica que el área no es activa, no tiene enlace.</td> + <td>Uno: 'nohref'</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-alt"><span style="color: green;">alt </span></a></td> + <td>Describe el área o su vínculo, es necesario por que <strong>area</strong> no tiene contenido.</td> + <td>Texto legible. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td> + <td><abbr title="El autor debe indicarlo">Requerido</abbr></td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-accesskey"><span style="color: green;">accesskey </span></a></td> + <td>Define una tecla de acceso rápido. Importante para la <a href="es/Accesibilidad">Accesibilidad</a>.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-character">carácter</a> o letra.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-tabindex"><span style="color: green;">tabindex </span></a></td> + <td>Asigna un número de posición en el orden de tabulación.</td> + <td>Un número entre 0 y 32767.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onfocus, onblur.</code></td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td><code style="color: green;">target </code></td> + <td>Indica el <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#h-16.1">marco</a> en el que se cargará el recurso.</td> + <td>Puede ser el nombre de un marco existente, o un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-frame-target">nombre reservado</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Un_mapa_de_im.C3.A1genes_dividido_en_dos" name="Un_mapa_de_im.C3.A1genes_dividido_en_dos">Un mapa de imágenes dividido en dos</h4> + +<pre class="eval"><span class="nowiki"> + <object data="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png" + usemap="#map1" type="image/png" + width="135" height="155"> + + <map name="map1"> + <area href="http://www.mozilla.com/firefox/" + alt="El navegador" + shape="rect" + coords="0,0,60,155"> + + <area href="http://www.mozilla.com/thunderbird/" + alt="El gestor de correo" + shape="rect" + coords="75,0,135,155"> + </map> + </object> + </span> +</pre> +</div> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-area">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li><strong>area</strong> es un elemento antiguo con el que pueden hacerse mapas simples y poco accesibles. No se recomienda su uso, es preferible diseñar los mapas con elementos en bloque y <a href="es/HTML/Elemento/a">anclas</a>.</li> +</ul> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>Los mapas de imágenes y el elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#h-13.6"><strong>area</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras! Disculpen las molestias.</p> + +<p>¿Quieres participar en su ampliación? Para saber como hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/article/index.html b/files/es/web/html/elemento/article/index.html new file mode 100644 index 0000000000..8df680ad6b --- /dev/null +++ b/files/es/web/html/elemento/article/index.html @@ -0,0 +1,60 @@ +--- +title: article +slug: Web/HTML/Elemento/article +translation_of: Web/HTML/Element/article +--- +<p>El <em>Elemento article de HTML</em> <span style="font-family: Courier New;">(<article>)</span> representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la indicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.</p> + +<div class="note"> +<p><em>Notas de uso: </em></p> + +<ul> + <li>Cuando los elementos <code><article></code> están anidados, los internos representan artículos relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <code><article></code> anidados al que representa la entrada del blog.</li> + <li>Los datos del autor de un elemento <code><article></code> pueden ser proporcionados a través del elemento {{ HTMLElement ("address") }}, pero no se aplica a los elementos <code><article></code> anidados.</li> + <li>La fecha de publicación y el tiempo de un elemento <code><article></code> pueden ser descritos con el atributo {{ htmlattrxref ("pubdate", "time") }} atributo de un elemento {{ HTMLElement("time") }}.</li> +</ul> +</div> + +<h3 id="Contexto_de_uso">Contexto de uso</h3> + +<table class="fullwidth-table" style="height: 117px; width: 1125px;"> + <tbody> + <tr> + <td>Contenido permitido</td> + <td><a title="es / RSS / módulo / categorías de contenido de flujo de contenido #">Contenido dinámico</a></td> + </tr> + <tr> + <td>Omisión de etiquetas</td> + <td>Ninguna, tanto la etiqueta inicial como la etiqueta de cierre son obligatorias</td> + </tr> + <tr> + <td>Elementos padres permitidos</td> + <td> + <p>Cualquier elemento que acepte <a title="https: / / developer.mozilla.org / es / HTML / Content_categories flow_content #">el contenido dinámico</a> . Tenga en cuenta que un elemento <code><article></code> no debe ser un descendiente de un elemento {{ HTMLElement ("address") }}.</p> + </td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html # el-artículo-elemento">HTML 5, sección 4.4.4</a></td> + </tr> + </tbody> +</table> + +<h3 id="Atributos">Atributos</h3> + +<p>Este elemento no tiene atributos que no sean los atributos globales, comunes a todos los elementos.</p> + +<div id="section_3"> +<div id="section_3"> +<h3 class="editable" id="Interfaz_DOM">Interfaz DOM</h3> + +<p>Este elemento implementa la interfaz HTMLElement.</p> + +<h3 id="Consulta_también">Consulta también</h3> + +<ul> + <li>Otros elementos relacionados con secciones: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }}</li> + <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> +</div> +</div> diff --git a/files/es/web/html/elemento/aside/index.html b/files/es/web/html/elemento/aside/index.html new file mode 100644 index 0000000000..1032e47e9c --- /dev/null +++ b/files/es/web/html/elemento/aside/index.html @@ -0,0 +1,68 @@ +--- +title: aside +slug: Web/HTML/Elemento/aside +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - 'HTML:Referencia_de_elementos' + - para_revisar +translation_of: Web/HTML/Element/aside +--- +<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El <strong>elemento HTML <code><aside></code></strong> representa una sección de una página que consiste en contenido que está indirectamente relacionado con el contenido principal del documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.</span></span></p> + +<div class="note"> +<p><em><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Notas de uso:</span></span></em></p> + +<ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">No utilices el elemento <code><aside></code> para etiquetar texto entre paréntesis, ya que este tipo de texto se considera parte del flujo principal.</span></span></li> +</ul> +</div> + +<h3 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td> + <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido dinámico</span></span></a></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Ninguna, tanto la etiqueta inicial y la etiqueta de cierre son obligatorias</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td> + <td> + <p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-97 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte contenido dinámico.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Ten en cuenta que un elemento <aside> no debe ser un descendiente de un elemento {{ HTMLElement ("address") }}.</span></span></p> + </td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element"><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.4.5</span></span></a></td> + </tr> + </tbody> +</table> + +<h3 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h3> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Este elemento no tiene atributos que no sean los <a href="/en/HTML/Global_attributes" title="../../../../en/HTML/global attributes">atributos globales</a>, comunes a todos los elementos.</span></span></p> + +<div id="section_3"> +<div id="section_3"> +<h3 class="editable" id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h3> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Este elemento implementa la interfaz </span></span><code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">.</span></span></p> + +<h3 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h3> + +<ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Otros elementos relacionados con esta sección: {{ HTMLElement("body") }}, {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};</span></span></li> + <li class="last"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Secciones y líneas generales de un documento HTML 5</a> .</span></span></li> +</ul> +</div> +</div> + +<p> </p> + +<p>{{ languages ( { "en": "en/HTML/Element/aside","es":"es/docs/HTML/Elemento/aside" } ) }}</p> diff --git a/files/es/web/html/elemento/audio/index.html b/files/es/web/html/elemento/audio/index.html new file mode 100644 index 0000000000..02c621f421 --- /dev/null +++ b/files/es/web/html/elemento/audio/index.html @@ -0,0 +1,105 @@ +--- +title: Audio +slug: Web/HTML/Elemento/audio +translation_of: Web/HTML/Element/audio +--- +<p>El elemento <code>audio</code> se usa para insertar contenido de audio en un documento HTML o XHTML. El elemento <code>audio</code> se agregó como parte de HTML 5.</p> + +<div class="note"><strong>Nota:</strong> actualmente Gecko admite solamente Vorbis, en contenedores Ogg, así como formato WAV. Asimismo, el servidor debe servir el archivo mediante el tipo MIME correcto con el fin de que Gecko lo reproduzca correctamente.</div> + +<p>Puedes usar las características API de audio mejoradas - que son específicas de Gecko - para generar y manipular directamente secuencias de audio a partir de código JavaScript. Consulta <a href="/en/Manipulating_audio_using_the_enhanced_audio_API" title="en/Manipulating audio using the enhanced audio API">Manipular sonido a través de la API de audio mejorada</a> para tener más detalles.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Contenido permitido</td> + <td><a href="/en/HTML/Content_categories#transparent_content" title="en/HTML/Content categories#transparent content">Contenido transparente</a>, que contiene bien un atributo<strong> src</strong>, bien uno o más elementos {{ HTMLElement("source") }}, seguido de <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a> o <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">contenido estático</a> , sin ningún elemento de {{ HTMLElement("video") }} o <code><audio></code>.</td> + </tr> + <tr> + <td>Omisión de etiquetas</td> + <td>Ninguna, deben estar presentes tanto las etiquetas de inicio como las de cierre.</td> + </tr> + <tr> + <td>Elementos primarios permitidos</td> + <td>Cualquier elemento que acepte <a href="../../../../en/HTML/Content_categories#flow_content" rel="internal">contenido dinámico</a> o cualquier elemento que acepte <a href="../../../../en/HTML/Content_categories#phrasing_content" rel="internal">contenido estático</a>.</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.w3.org/TR/html5/video.html#audio" title="http://www.w3.org/TR/html5/video.html#audio">HTML5, sección 4.8.7</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<dl> + <dt>autoplay</dt> + <dd>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.</dd> + <dt>autobuffer {{ obsolete_inline("2.0") }}</dt> + <dd>Un atributo booleano; si se especifica, el sonido comenzará a reproducirse automáticamente, incluso aunque no se haya configurado para la reproducción automática. Esto continuará hasta que la caché de medios esté llena o se haya descargado el archivo de audio completo, lo que suceda primero. Debería usarse sólo si se espera que el usuario elija reproducir el audio; por ejemplo si el usuario ha navegado hasta una página usando un vínculo de "Reproducir este audio". Este atributo se eliminó de Gecko 2.0 {{ geckoRelease("2.0") }} en favor del atributo preload.</dd> + <dt><a name="attr-buffered">buffered</a> {{ gecko_minversion_inline("2.0") }}</dt> + <dd>Un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer. Este atributo contiene un objeto {{ domxref("TimeRanges") }}.</dd> + <dt>controls</dt> + <dd>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.</dd> + <dt>loop {{ unimplemented_inline() }} {{ bug(449157) }}</dt> + <dd>Un atributo booleano; si se especifica, al alcanzar el final del audio, realizaremos la búsqueda automáticamente hasta el principio.</dd> + <dt>mozCurrentSampleOffset {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</dt> + <dd>La posición de desplazamiento, que se especifica como el número de muestras desde el comienzo de la secuencia de audio, en la cual el audio se está reproduciendo actualmente.</dd> + <dt><a name="attr-preload">preload</a> {{ gecko_minversion_inline("2.0") }} {{ bug(548523) }}</dt> + <dd>El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el autor que proporcionará la mejor experiencia para el usuario . Puede tener uno de los siguientes valores: + <ul> + <li><span style="font-family: Courier New;">none: </span>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;</li> + <li><span style="font-family: Courier New;">metadata</span>: sugiere que aunque el autor piensa que el usuario no tendrá que consultar ese video, es razonable capturar los metadatos (p. ej. longitud);</li> + <li><span style="font-family: Courier New;">auto</span>: 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;</li> + <li>the <em>empty string</em>: que es sinónimo del valor <span style="font-family: Courier New;">auto</span>.</li> + </ul> + + <p>Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a <span style="font-family: Courier New;">metadatos</span>.</p> + + <div class="note"><strong>Observaciones sobre uso:</strong> + + <ul> + <li>El atributo <strong>autoplay </strong> tiene prioridad sobre éste puesto que si se desea reproducir automáticamente un video, el navegador obviamente tendrá que descargarlo. La especificación permite establecer los atributos<strong> autoplay</strong> y <strong>preload</strong>.</li> + <li>La especificación no fuerza al navegador a seguir el valor de este atributo; es tan sólo una sugerencia.</li> + </ul> + </div> + </dd> + <dt>src</dt> + <dd>La URL del audio que se va a insertar. Está sujeta a los <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">Controles de acceso HTTP</a>. Es opcional; en su lugar puedes usar el elemento <a class="internal" href="/en/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> dentro del bloque de audio para especificar el audio que se va a insertar.</dd> +</dl> + +<p>Las compensaciones de tiempo se especifican como valores float que indican el número de segundos que se va a compensar.</p> + +<div class="note"><strong>Nota:</strong> la definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: 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> +</pre> + +<p>Reproduce el fichero de audio adjunto a este artículo.</p> + +<h2 id="Interfaz_DOM">Interfaz DOM</h2> + +<ul> + <li><a href="/en/DOM/HTMLAudioElement" title="en/DOM/HTMLAudioElement">HTMLAudioElement</a></li> +</ul> + +<h2 id="Consulta_también">Consulta también</h2> + +<ul> + <li><a href="/es/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio" title="es/Formatos multimedia admitidos por los elementos de video y audio"><u>Formatos multimedia admitidos por los elementos de audio y video</u></a></li> + <li><a href="/en/Manipulating_audio_using_the_enhanced_audio_API" title="en/Manipulating audio using the enhanced audio API">Manipulating audio using the enhanced audio API</a></li> + <li><a href="/en/DOM/HTMLAudioElement" title="en/DOM/HTMLAudioElement"><code>HTMLAudioElement</code></a></li> + <li><a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="En/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a></li> + <li><a class="internal" href="/es/Using_audio_and_video_in_Firefox" title="Es/Usar audio y video en Firefox">Usar audio y video en Firefox</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#audio" title="http://www.whatwg.org/specs/web-apps/current-work/#audio">The <code>audio</code> element</a> (HTML 5 specification)</li> +</ul> + +<p>{{ languages( { "en": "en/HTML/Element/Audio" , "fr": "fr/HTML/Element/audio" } ) }}</p> diff --git a/files/es/web/html/elemento/b/index.html b/files/es/web/html/elemento/b/index.html new file mode 100644 index 0000000000..e4281a9296 --- /dev/null +++ b/files/es/web/html/elemento/b/index.html @@ -0,0 +1,168 @@ +--- +title: b +slug: Web/HTML/Elemento/b +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/b +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>b</strong> de bold=negrita.</p> + +<p>Indica que el texto debe ser representado con una variable <strong>bold</strong>, o <strong>negrita,</strong><strong> </strong>de la tipografía que se esté usando.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><b></code> y <code></b></code> (Ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: en línea.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">de estilo de fuente</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd> +</dl> + +<h5 id="Atributos" name="Atributos">Atributos</h5> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Palabras_pesadas" name="Palabras_pesadas">Palabras pesadas</h4> + +<pre class="eval"><p> + Texto normal y... <b>Texto en negrita</b> +</p> +</pre> + +<p><br> + Se visualiza así:</p> + +<div style="border: solid silver 1px;"> +<p style="font-family: ,serif; font-size: larger;">Texto normal y... <strong>Texto en negrita</strong></p> +</div> +</div> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-b">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<p>El inherente a su condición: <strong>negrita.</strong> Prueba el siguiente ejemplo:</p> + +<pre class="eval"><span class="nowiki"> + <style> + span { font-weight: bolder; } + </style> + + <p> Esto es: <b> un elemento b </b> y esto es: <span>un span con estilo</span> </p> + </span> +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li>El <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">W3C</a> (y nosotros) desaconseja el uso de este elemento, para manejar el estilo del texto es mejor usar <a href="es/CSS">CSS</a>.</li> +</ul> + +<p> </p> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-B"><strong>b</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/base/index.html b/files/es/web/html/elemento/base/index.html new file mode 100644 index 0000000000..4912e33f0b --- /dev/null +++ b/files/es/web/html/elemento/base/index.html @@ -0,0 +1,158 @@ +--- +title: <base> +slug: Web/HTML/Elemento/base +tags: + - Elemento + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/base +--- +<p id="Summary">{{HTMLRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El <strong>elemento HTML <code><base></code></strong> <span id="result_box" lang="es"><span>especifica la dirección URL</span> <span>base que se utilizará</span> <span>para todas las</span> <span>direcciones URL relativas</span> <span>contenidas</span> <span>dentro de un documento</span><span>.</span> </span> <span id="result_box" lang="es"><span>Sólo puede haber un</span></span> <span lang="es"><span>elemento <base></span> <span>en un documento</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span>La</span> <span>dirección URL base</span> <span>de un documento</span> <span>puede ser consultado</span> <span>a partir de una</span> <span>secuencia de comandos con</span></span> {{domxref('document.baseURI')}}.</p> + +<div class="note"><strong>Nota de uso:</strong> Si se especifican varios elementos <base>, se utilizá sólo la primera sección <strong>href</strong> y el primer valor <strong>target</strong>; los demás son ignorados.</div> + +<table class="properties"> + <tbody> + <tr> + <th><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de Contenido</a></th> + <td><span class="short_text" id="result_box" lang="es"><span>Contenido de Metadatos</span></span></td> + </tr> + <tr> + <th>Contenido permitido</th> + <td><span class="short_text" id="result_box" lang="es"><span>Ninguno</span><span>, es un</span></span> {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Omisión de etiqueta</th> + <td><span class="short_text" id="result_box" lang="es"><span>No debe haber ninguna</span> <span>etiqueta de cierre</span><span>.</span></span></td> + </tr> + <tr> + <th>Elementos padres permitidos</th> + <td><span id="result_box" lang="es"><span>Cualquier</span></span> {{HTMLElement("head")}} <span id="result_box" lang="es"><span>que</span> <span>no contenga ningún</span> <span>elemento </span></span>{{HTMLElement("base")}}</td> + </tr> + <tr> + <th>Interfaz DOM</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributos">Attributos</h2> + +<p><span style="line-height: 21px;">Este elemento incluye los </span><a href="https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales" style="line-height: 21px;" title="HTML/Global attributes">atributos globales</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd><span id="result_box" lang="es"><span>La dirección URL</span> <span>base que se usa</span> <span>en todo el documento</span> <span>para las direcciones</span> <span>URL</span> <span>relativas.</span> <span>Si no se especifica</span> <span>este atributo</span><span>,</span> <span>este elemento</span> <span>debe venir antes de</span> <span>cualesquiera otros elementos</span> <span>con</span> <span>atributos cuyos valores son</span> <span>direcciones URL</span><span>.</span> <span>Se permiten</span> <span>las direcciones URL absolutas</span> <span>y relativas.</span></span></dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd><span id="result_box" lang="es"><span>Un nombre</span> <span>o una palabra clave</span> <span>que indica</span> <span>la ubicación predeterminada</span> <span>para navegar por</span> <span>el resultado de</span> <span>hipervínculos</span> <span>o</span> <span>formas</span></span>, <span id="result_box" lang="es"><span>para los elementos</span> <span>que no tienen</span> <span>una referencia</span></span> <span id="result_box" lang="es"> <span>explícita</span> <span>del objetivo</span></span> <span id="result_box" lang="es"><span>.</span> <span>Es un</span> <span>nombre</span> <span>o una palabra clave</span> <span>para</span> <span>un</span> <span>contexto de navegación</span> <span>(</span><span>por ejemplo</span><span>:</span> <span>pestaña</span><span>, ventana o</span> <span>marco en línea</span><span>)</span><span>.</span> <span>Las</span> <span>siguientes</span> <span>palabras clave</span> <span>tienen un significado especial</span><span>:</span></span> tab, window, o inline frame).Las siguientes palabras clave tienen un significado especial: + <ul> + <li><code>_self</code>: <span id="result_box" lang="es"><span>Carga el resultado</span> <span>en el mismo</span> <span>contexto de navegación</span> que<span> el actual</span><span>.</span> <span>Este valor</span> <span>es</span> <span>el valor por defecto</span> <span>si no se especifica</span> <span>el atributo</span><span>.</span></span></li> + <li><code>_blank</code>: <span id="result_box" lang="es"><span>Carga el resultado</span> <span>en un nuevo</span> <span>contexto de navegación</span> <span>sin nombre</span></span> .</li> + <li><code>_parent</code>: <span id="result_box" lang="es"><span>Cargar</span> <span>el resultado en el</span> <span>contexto de navegación</span> <span>padre</span> <span>de</span><span>l actual.</span> <span>Si no hay</span> <span>padre</span><span>, esta opción</span> <span>se comporta de la</span> <span>misma manera que</span> <span>_self</span><span>.</span></span></li> + <li><code>_top</code>: <span id="result_box" lang="es"><span>Carga el resultado</span> <span>en</span> <span>el contexto</span> <span>de nivel superior</span> <span>de navegación</span> <span>(</span><span>es decir, el</span> <span>contexto de navegación</span> <span>que</span> <span>es</span> <span>un ancestro de</span> <span>la actual,</span> <span>y no tiene</span> <span>padre)</span><span>.</span> <span>Si no hay</span> <span>padre</span><span>, esta opción</span> <span>se comporta de la</span> <span>misma manera que</span> <span>_self</span><span>.</span></span></li> + </ul> + </dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>base</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.example.com/page.html<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>base</span> <span class="attr-name token">target</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>_blank<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.example.com/page.html<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<article class="approved text-content"> +<div class="boxed translate-rendered"> +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><span class="short_text" id="result_box" lang="es"><span>Sin cambios</span> <span>desde la última</span> <span>instantánea</span></span>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><span class="short_text" id="result_box" lang="es"><span>Especifica el</span> <span>comportamiento de</span></span> <code>target</code></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Añadido el atributo <code>target</code></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A<span id="result_box" lang="es"><span>ñadido soporte</span> <span>de las URL</span> <span>relativas para</span></span> <code>href</code> <span id="result_box" lang="es"><span>en</span></span> Gecko 2.0 (Firefox 4.0)</p> + +<p>[2] Antes de Internet Explorer 7, <base> podría ser colocado en cualquier lugar del documento y se usaba el valor más cercano de <base>. El apoyo a las URL relativas se ha eliminado en Internet Explorer 8</p> +</div> +</article> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/basefont/index.html b/files/es/web/html/elemento/basefont/index.html new file mode 100644 index 0000000000..5b86ea16a3 --- /dev/null +++ b/files/es/web/html/elemento/basefont/index.html @@ -0,0 +1,124 @@ +--- +title: basefont +slug: Web/HTML/Elemento/basefont +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/basefont +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>basefont</strong> -<em>fuente base</em> . Permite cambiar algunas propiedades del texto.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <basefont> (solo tiene una).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">desaprobado</a>. + <dl> + <dd>En un doctype transicional está definido como un elemento <a href="es/HTML/Elemento/Tipos_de_elementos#especial">especial</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: No.</dd> + <dd><strong>Puede contener</strong>: Nada.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-size-FONT"><span style="color: green;">size</span></a></td> + <td>Tamaño de la fuente. Según una tabla del 1 al 7.</td> + <td>Un número entero (ej. 1), o un valor incremental (ej. +1). <s>Por defecto:</s> debe indicarlo el autor.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-color-FONT"><span style="color: green;">color</span></a></td> + <td>El color del texto.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.5">color RGB</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-face-FONT"><span style="color: green;">face</span></a></td> + <td>Especifica la/s fuentes para el texto.</td> + <td>Lista de nombres de fuentes separadas por coma. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Un_ejemplo_simple" name="Un_ejemplo_simple">Un ejemplo simple</h4> + +<p>Código:</p> + +<pre class="eval"><p> + Texto normal y ... + <<strong>basefont</strong> size="5" color="#0000ff"> + Texto distinto. +</p> +</pre> + +<p><span class="comment">Resultado: <div style='border: solid silver 1px;'> <p> Texto normal y ... <basefont size="5" color="#0000ff"> Texto distinto. </p> </div></span></p> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-BASEFONT"><strong>basefont</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-basefont">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/bdi/index.html b/files/es/web/html/elemento/bdi/index.html new file mode 100644 index 0000000000..075afa13a6 --- /dev/null +++ b/files/es/web/html/elemento/bdi/index.html @@ -0,0 +1,140 @@ +--- +title: <bdi> +slug: Web/HTML/Elemento/bdi +tags: + - BiDi + - Elemento + - HTML + - Referencia + - Semántica HTML a nivel de texto + - Web +translation_of: Web/HTML/Element/bdi +--- +<h2 id="Resumen">Resumen</h2> + +<p>El elemento <em>HTML <code><bdi></code> </em>(o elemento de aislamiento Bi-Direccional) aisla un trozo de texto para que pueda ser formateado con una dirección diferente al texto que hay fuera de él.</p> + +<p>Es útil al embeber o incrustart texto del que se desconoce la direccionalidad, por ejemplo proveniente de una base de datos, dentro de un texto con una direccionalidad fija.</p> + +<p class="note">Aunque el mismo efecto visual se puede conseguir usando la regla CSS {{cssxref("unicode-bidi")}}<code>: isolate</code> en un elemento {{HTMLElement("span")}} u otro elemento de formateado de texto, el significado semántico sólo se consigue usando el elemento<code> <bdi></code>. En especial los navegadores permiten ignorar los estilos CSS. En tal caso el texto se mostrará correctamente usando el elemento HTML pero será basura usando CSS para fijar la semántica.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>, contenido palpable.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Flow_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como los demás elementos HTML , este elemento tiene los <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>, pero con una pequeña diferencia semántica: el atributo <strong>dir </strong>no se hereda. Si no está definidio, su valor por defecto es <code>auto</code> y permitirá a los navegadores decidir la dirección basándose en el contexto del elemento.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><p dir="ltr">Esta palabara arábica<bdi>ARABIC_PLACEHOLDER</bdi> se muestra automáticamente de derecha a izquierda.</p> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p dir="ltr">Esta palabra arábica REDLOHECALP_CIBARA se muestra automáticamente de derecha a izquierda.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>16</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="ltr" id="Ver_además">Ver además</h2> + +<ul> + <li>Elementos HTML relacionados: {{HTMLElement("bdo")}}</li> + <li>Propiedades HTML relacionadas: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/bdo/index.html b/files/es/web/html/elemento/bdo/index.html new file mode 100644 index 0000000000..0a4af7fe92 --- /dev/null +++ b/files/es/web/html/elemento/bdo/index.html @@ -0,0 +1,144 @@ +--- +title: bdo +slug: Web/HTML/Elemento/bdo +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/bdo +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>bdo</strong> Bi-Directional Overriding=Anulación de bidireccionalidad.</p> + +<p>La dirección de escritura del texto está relacionada con el idioma y se declara con el atributo dir. Pero en ocasiones esto no es suficiente, entonces entra en juego el elemento <a href="es/HTML/Elemento/bdo">bdo</a> (anulación del algoritmo bidireccional) que al anular el algoritmo permite un control total de la direccionalidad.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <bdo> y </bdo> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: En línea.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#especial">Elemento especial</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<p> </p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir-BDO"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td> + <td>Debe indicarlo el autor</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Cambios_de_direcci.C3.B3n" name="Cambios_de_direcci.C3.B3n">Cambios de dirección</h4> + +<pre><p> cero(0) +<bdo dir="rtl"> +<em> uno(1) dos(2) </em> tres(3) cuatro(4) +<em dir="ltr"> cinco(5) seis(6) </em> siete(7) ocho(8) +</bdo> nueve(9) +</p> +</pre> +</div> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-bdo">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#edef-BDO"><strong>bdo</strong> en la especificación</a> de html 4.01</li> +</ul> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/bgsound/index.html b/files/es/web/html/elemento/bgsound/index.html new file mode 100644 index 0000000000..81b73a1e30 --- /dev/null +++ b/files/es/web/html/elemento/bgsound/index.html @@ -0,0 +1,106 @@ +--- +title: <bgsound> +slug: Web/HTML/Elemento/bgsound +tags: + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/bgsound +--- +<div>{{non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El elemento HTML de sonido de fondo (<bgsound>) es un elemento de Internet Explorer que asocia un sonido de fondo con un página .</p> + +<div class="note"> +<p><strong>No usar esto ! </strong>Para incrustar un elemento en una página web , se debe de usar el elemento {{HTMLElement("audio")}}</p> +</div> + +<h2 id="Atributos">Atributos</h2> + +<dl> + <dt>{{htmlattrdef("balance")}}</dt> + <dd>Este atributo define un número entre -10,000 y + 10,000 que determina como el volumen será dividido entre los altavoces .</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Este atributo indica el número de veces que un soinido será reproducido ya sea como un valor numérico o la palabra clave <em>infinite</em> .</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Este atributo especifica la URL del archivo de sonido que será reproducido , el cual debe ser uno de los siguientes tipos : wav, .au, o .mid.</dd> + <dt>{{htmlattrdef("volume")}}</dt> + <dd>Este atributo define un número entre -10,000 y 0 que determina la fuerza del sonido de fondo de una página .</dd> + <dd> </dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:html"><bgsound src="sound1.mid"> + +<bgsound src="sound2.au" loop="infinite"> +</pre> + +<h2 id="Notas">Notas</h2> + +<p>Funcionalidad similar puede ser lograda en algunas versiones de Netscape usando la etiqueta <embed> para invocar un reproductor de audio .</p> + +<p>Puedes escribir bgsound con una etiqueta de cierre automático <bgsound /> . Ahora bien , desde que este elemento no es parte de un estándar , haciendolo como XHTML no lo hará valido. </p> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Hasta Firefox 22 , incluso si no se soportaba este elemento , Gecko lo asociaba a un elemento {{domxref("HTMLSpanElement")}}. Esto fue corregido después y ahora el elemento asociado es un {{domxref("HTMLUnknownElement")}} como es requerido por la especificación . </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li> {{htmlelement("audio")}}, el cual es el elemento estándar para incrustar audio en un documento.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/big/index.html b/files/es/web/html/elemento/big/index.html new file mode 100644 index 0000000000..a15f1b5da9 --- /dev/null +++ b/files/es/web/html/elemento/big/index.html @@ -0,0 +1,191 @@ +--- +title: big +slug: Web/HTML/Elemento/big +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/big +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>big</strong> de big=grande</p> + +<p>Muestra el texto marcado con un tamaño de fuente más grande. El tamaño de la fuente puede definirse en una escala del 1 al 7, <strong>big</strong> aumenta este valor en un punto.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><big></code> y <code></big></code> (Ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: En línea.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">de estilo de fuente</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Simple" name="Simple">Simple</h4> + +<pre class="eval"><span class="nowiki"> + <p> + + Texto normal y... <big>Texto más grande</big> + + </p> + </span> +</pre> +</div> + +<div class="highlight"> +<h4 id="Recursivo" name="Recursivo">Recursivo</h4> + +<p><strong>big</strong> puede contener otros elementos en línea, por ejemplo... <strong>big</strong>:</p> + +<pre class="eval"><span class="nowiki"> + <p> + + Texto normal y texto <big> cada <big> vez <big> más <big> grande. </big></big></big></big> + + </p> + </span> +</pre> + +<p>Se visualiza así:</p> + +<div style="border: solid silver 1px;"> +<p>Texto normal y texto cada vez más grande.</p> +</div> +</div> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-big">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<p>Observa el siguiente ejemplo:</p> + +<pre class="eval"><span class="nowiki"> + <style> + span { font-size: larger; } + </style> + + <h2> Con big </h2> + <p> Texto normal y texto ... + + <big> cada <big> vez <big> más <big> grande. </big></big></big></big> </p> + + <h2> Con CSS </h2> + <p> Texto normal y texto ... + + <span> cada <span> vez <span> más <span> grande. </span></span></span></span> </p> + </span> +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li><strong>big</strong> tiene un elemento opuesto, <a href="es/HTML/Elemento/small">small</a>. Si <strong>big</strong> aumenta el tamaño de la fuente <a href="es/HTML/Elemento/small">small</a> lo disminuye. Sin embargo en su funcionamiento son idénticos.</li> + <li>El W3C (y nosotros) desaconseja el uso de este elemento, para manejar el tamaño del texto es mejor usar CSS.</li> +</ul> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-BIG"><strong>big</strong> en la especificación</a> de html 4.01</li> +</ul> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/blink/index.html b/files/es/web/html/elemento/blink/index.html new file mode 100644 index 0000000000..f63821708a --- /dev/null +++ b/files/es/web/html/elemento/blink/index.html @@ -0,0 +1,100 @@ +--- +title: <blink> +slug: Web/HTML/Elemento/blink +tags: + - Elemento + - HTML + - Obsoleto + - Referencia + - Web +translation_of: Web/HTML/Element/blink +--- +<div>{{Deprecated_header}} {{Non-standard_header}}</div> + +<p>El elemento HTML blink (<code><blink></code>) no es un elemento estándar que causa que el texto encerrado parpadee lentamente .</p> + +<div class="warning"> +<p class="note"><strong>Precaución :</strong> No usar este elemento ya que no es un elemento estándar y está <strong>obsoleto</strong>. El texto parpadeante es mal visto por diversos estándares de accesibilidad y la especificación de CSS permite a los exploradores ingnorar el valor del parpadeo . .</p> +</div> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento no es soportado y por lo tanto implementa la interface {domxref("HTMLUnknownElement")}} .</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:html"><blink>Why would somebody use this?</blink> +</pre> + +<h3 id="Resultado">Resultado </h3> + +<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p> + +<h2 id="Especificación">Especificación</h2> + +<p>Este elemento no es parte del estándar ni de alguna espeficación . Si no nos crees puedes verlo por ti mismo en la <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">espeficicación de HTML</a>.</p> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Soportado hasta la versión 22. Removido en la versión 23.</p> + +<p>[2] Soportado hasta la versión 12.1. Removido en la versión 15.0.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">Historia de la creación del elemento</a> <blink></li> + <li>{{cssxref("text-decoration")}}, donde un valor de parpadeo existe , aunque los exploradores no son obligados a hacer parpadear el texto efectivamente.</li> + <li>{{htmlelement("marquee")}}, otro elemento similar que no pertenece a un estándar.</li> + <li>Las <a href="/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS">animaciones CSS</a> son la forma correcta de crear tal efecto .</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/blockquote/index.html b/files/es/web/html/elemento/blockquote/index.html new file mode 100644 index 0000000000..d8f71a7ed4 --- /dev/null +++ b/files/es/web/html/elemento/blockquote/index.html @@ -0,0 +1,153 @@ +--- +title: blockquote +slug: Web/HTML/Elemento/blockquote +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/blockquote +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>blockquote</strong> -<em>cita en bloque</em> . Crea citas en bloque, marca las citas a otros autores o documentos.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><blockquote></code> y <code></blockquote></code> (ambas obligatorias).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#enbloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: En bloque.</dd> + <dd><strong>Puede y debe contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enbloque">en bloque</a> o <a href="es/HTML/Elemento/script">script</a></dd> + <dd>Con un doctype transicional <strong>Puede contener</strong>: texto, y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enbloque">en bloque</a> o <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td><code style="color: green;">cite </code></td> + <td>Proporciona un enlace al documento original o fuente</td> + <td>Una dirección <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.4">URI</a>. Por defecto: lo fija el navegador</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Un_blockquote_estricto" name="Un_blockquote_estricto">Un <strong>blockquote</strong> estricto</h4> + +<pre class="eval"><<strong>blockquote</strong> cite='<a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-BLOCKQUOTE" rel="freelink">http://html.conclase.net/w3c/html401...def-BLOCKQUOTE</a>'> + <p> + <strong>Nota.</strong> Recomendamos que las implementaciones de hojas + de estilo porporcionen un mecanismo para insertar signos de puntuación de citas + antes y después de una cita delimitada por un BLOCKQUOTE de un modo apropiado según + el contexto del idioma actual y el grado de anidamiento de las citas. + </p> +</<strong>blockquote</strong>> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li>Conviene tener cuidado con las divergencias en el tipo de contenido dependiendo del doctype. El siguiente ejemplo es válido con un doctype transicional, pero no lo es con el estricto:</li> +</ul> + +<pre class="eval"><<strong>blockquote</strong>> + Bla, bla, bla... +</<strong>blockquote</strong>> +</pre> + +<ul> + <li><strong>blockquote</strong> tiene un hermano menor: <a href="es/HTML/Elemento/q">q</a>. <strong>blockquote</strong> sirve para citas en bloque y <a href="es/HTML/Elemento/q">q</a> para citas en línea.</li> +</ul> + +<ul> + <li>A diferencia de <a href="es/HTML/Elemento/q">q</a>, <strong>blockquote</strong> no entrecomilla los contenidos, debe hacerlo el autor (con CSS).</li> +</ul> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-BLOCKQUOTE"><strong>blockquote</strong> en la especificación</a> de html 4.01</li> +</ul> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-blockquote">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/body/index.html b/files/es/web/html/elemento/body/index.html new file mode 100644 index 0000000000..32b0a64328 --- /dev/null +++ b/files/es/web/html/elemento/body/index.html @@ -0,0 +1,170 @@ +--- +title: '<body>: El elemento body del documento' +slug: Web/HTML/Elemento/body +tags: + - Elemento + - HTML + - Referencia + - Seleccionar el elemento raíz + - Web + - secciones +translation_of: Web/HTML/Element/body +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">El <strong>elemento <code><body></code> de HTML</strong> representa el contenido de un documento HTML. Solo puede haber un elemento <code><body></code> en un documento.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">{{web.link("/es/docs/Web/HTML/Content_categories", "Categorías de contenido")}}</th> + <td>{{web.link("/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Section_Elements_in_HTML5", "Secciones en HTML5")}}</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>{{web.link("/es/docs/Web/HTML/Content_categories#Flow_content", "Flujo de contenido")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>La etiqueta de inicio se puede omitir si lo primero que hay dentro no es un carácter de espacio, comentario, elemento {{HTMLElement("script")}} o elemento {{HTMLElement("style")}}. La etiqueta final se puede omitir si el elemento <code><body></code> tiene contenido o tiene una etiqueta de inicio y no va seguido inmediatamente de un comentario.</td> + </tr> + <tr> + <th scope="row">Contenedores autorizados</th> + <td>Debe ser el segundo elemento de un elemento {{HTMLElement("html")}}.</td> + </tr> + <tr> + <th scope="row">Rol de ARIA implícito</th> + <td>{{web.link("/es/docs/Web/Accessibility/ARIA/Roles/Document_Role", "document")}}</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>No se permite <code>role</code></td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{DOMxRef("HTMLBodyElement")}} + <ul> + <li>El elemento <code><body></code> expone la interfaz {{DOMxRef("HTMLBodyElement")}}.</li> + <li>Puedes acceder al elemento <code><body></code> a través de la propiedad {{DOMxRef("document.body")}}.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los {{web.link("/es/docs/Web/HTML/Global_attributes", "atributos globales")}}.</p> + +<dl> + <dt>{{HTMLAttrDef("alink")}} {{obsolete_inline}}</dt> + <dd>Color del texto de los hipervínculos cuando se selecciona. <em>Este método no es conforme a la especificación, utiliza la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":active")}} en su lugar. </em></dd> + <dt>{{HTMLAttrDef("background")}} {{obsolete_inline}}</dt> + <dd>URI de una imagen para usar como fondo. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("background")}} en el elemento</em>.</dd> + <dt>{{HTMLAttrDef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>Color de fondo del documento. <em>Este método no es conforme, utiliza la propiedad CSS {{CSSxRef("background-color")}} en el elemento</em>.</dd> + <dt>{{HTMLAttrDef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>El margen de la parte inferior del <em><body></em>. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-bottom")}} en el elemento</em>.</dd> + <dt>{{HTMLAttrDef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>El margen de la izquierda del <em><body></em>. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-left")}} en el elemento en su lugar</em>.</dd> + <dt>{{HTMLAttrDef("link")}} {{obsolete_inline}}</dt> + <dd>Color del texto de los enlaces de hipertexto no visitados. <em>Este método no es conforme, usa la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":link")}} en su lugar</em>.</dd> + <dt>{{HTMLAttrDef("onafterprint")}}</dt> + <dd>Función para llamar después de que el usuario haya impreso el documento.</dd> + <dt>{{HTMLAttrDef("onbeforeprint")}}</dt> + <dd>Función para llamar cuando el usuario solicita la impresión del documento.</dd> + <dt>{{HTMLAttrDef("onbeforeunload")}}</dt> + <dd>Función para llamar cuando se está a punto de descargar el documento.</dd> + <dt>{{HTMLAttrDef("onblur")}}</dt> + <dd>Función para llamar cuando el documento pierde el foco.</dd> + <dt>{{HTMLAttrDef("onerror")}}</dt> + <dd>Función para llamar cuando el documento no se carga correctamente.</dd> + <dt>{{HTMLAttrDef("onfocus")}}</dt> + <dd>Función para llamar cuando el documento recibe el foco.</dd> + <dt>{{HTMLAttrDef("onhashchange")}}</dt> + <dd>Función para llamar cuando la parte del identificador del fragmento (comenzando con el carácter de almohadilla (<code>'#'</code> también conocido como numeral)) de la dirección actual del documento ha cambiado.</dd> + <dt>{{HTMLAttrDef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>Función para llamar cuando cambiaron los idiomas preferidos.</dd> + <dt>{{HTMLAttrDef("onload")}}</dt> + <dd>Función a llamar cuando se haya terminado de cargar el documento.</dd> + <dt>{{HTMLAttrDef("onmessage")}}</dt> + <dd>Función para llamar cuando el documento ha recibido un mensaje.</dd> + <dt>{{HTMLAttrDef("onoffline")}}</dt> + <dd>Función para llamar cuando falla la comunicación de la red.</dd> + <dt>{{HTMLAttrDef("ononline")}}</dt> + <dd>Función para llamar cuando se restablece la comunicación de la red.</dd> + <dt>{{HTMLAttrDef("onpopstate")}}</dt> + <dd>Función para llamar cuando el usuario ha navegado el historial de sesiones.</dd> + <dt>{{HTMLAttrDef("onredo")}}</dt> + <dd>Función para llamar cuando el usuario ha avanzado en el historial de deshacer transacciones.</dd> + <dt>{{HTMLAttrDef("onresize")}}</dt> + <dd>Función para llamar cuando el documento ha cambiado de tamaño.</dd> + <dt>{{HTMLAttrDef("onstorage")}}</dt> + <dd>Función para llamar cuando el área de almacenamiento ha cambiado.</dd> + <dt>{{HTMLAttrDef("onundo")}}</dt> + <dd>Función para llamar cuando el usuario ha retrocedido en el historial de deshacer transacciones.</dd> + <dt>{{HTMLAttrDef("onunload")}}</dt> + <dd>Función para llamar cuando el documento se vaya.</dd> + <dt>{{HTMLAttrDef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>El margen de la derecha del <em><body></em>. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-right")}} en el elemento</em>.</dd> + <dt>{{HTMLAttrDef("text")}} {{obsolete_inline}}</dt> + <dd>Color de primer plano del texto. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("color")}} en el elemento</em>.</dd> + <dt>{{HTMLAttrDef("topmargin")}} {{obsolete_inline}}</dt> + <dd>El margen de la parte superior del <em><body></em>. <em>Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-top")}} en el elemento</em>.</dd> + <dt>{{HTMLAttrDef("vlink")}} {{obsolete_inline}}</dt> + <dd>Color del texto de los enlaces de hipertexto visitados. <em>Este método no es conforme, utiliza la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":visited")}} en su lugar</em>.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html notranslate"><html> + <head> + <title>Título del documento</title> + </head> + <body> + <p>Este es un párrafo</p> + </body> +</html> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Cambió la lista de características no conformes.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Los atributos anteriormente obsoletos. Definieron el comportamiento de <code>topmargin</code>, <code>leftmargin</code>, <code>rightmargin</code> y <code>bottommargin</code> no conforme y nunca estandarizado. Se agregaron los atributos <code>on*</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{ Spec2('HTML4.01') }}</td> + <td>En desuso el <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> y atributos <code>vlink</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat- datos </a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.body")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/es/web/html/elemento/br/index.html b/files/es/web/html/elemento/br/index.html new file mode 100644 index 0000000000..1e9cff3b58 --- /dev/null +++ b/files/es/web/html/elemento/br/index.html @@ -0,0 +1,157 @@ +--- +title: <br> +slug: Web/HTML/Elemento/br +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/br +--- +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El elemento HTML<em> l</em><em>ine break </em><code><br></code> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es significante.</p> + +<p>No utilices <code><br></code> para incrementar el espacio entre líneas de texto; para ello utiliza la propiedad {{cssxref('margin')}} de <a href="/en-US/docs/CSS" title="CSS">CSS</a> o el elemento {{HTMLElement("p")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno, es {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>Debe tener etiqueta de inicio y no debe tener etiqueta de cierre. En documentos XHTML este elemento se escribe como <code><br /></code>.</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLBRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento incluye los </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globales</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Indica donde empieza la siguiente línea después del salto. + <div class="note"> + <p><strong>Nota de uso: </strong>Este atributo está obsoleot en {{HTMLVersionInline(5)}} y <strong>no debe utilizarse por los autores</strong>. En su lugar utiliza la propiedad {{CSSxref('clear')}} de CSS.</p> + </div> + </dd> +</dl> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: html">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>El HTML de arriba muestra:</p> + +<p>Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>Elemento {{HTMLElement("address")}}</li> + <li>Elemento {{HTMLElement("p")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/button/index.html b/files/es/web/html/elemento/button/index.html new file mode 100644 index 0000000000..abcab78469 --- /dev/null +++ b/files/es/web/html/elemento/button/index.html @@ -0,0 +1,198 @@ +--- +title: button +slug: Web/HTML/Elemento/button +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/button +--- +<h2 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h2> + +<p><strong>button</strong> = botón.</p> + +<p>Es el elemento crea botones marcadores.</p> + +<p><span class="seoSummary">La etiqueta de<strong> HTML <code><button></code> </strong>representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar.</span> De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, estos estilos se pueden cambiar utilizando <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <button> y </button> (ambas obligatorias).</dd> + <dd><strong>Crea una caja</strong>: en linea.</dd> + <dd><strong>Está definido como</strong>: <a href="/es/docs/HTML/Elemento/Tipos_de_elementos#de_frase" title="HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de control para formulario</a>.</dd> + <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="/es/docs/HTML/Elemento/Tipos_de_elementos#en_linea" title="HTML/Elemento/Tipos_de_elementos#en_linea">en Bloque</a> o <a href="/es/docs/HTML/Elemento/Tipos_de_elementos#en_linea" title="HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>, con las siguientes excepciones: (A|%formctrl;|FORM|FIELDSET)</dd> +</dl> + +<h2 id="Atributos" name="Atributos">Atributos</h2> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">name </span></a></td> + <td>Asigna un <a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#control-name">nombre de control</a>.</td> + <td>Texto <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">con limitaciones</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">value </span></a></td> + <td>Asigna un valor inicial que será enviado con el formulario.</td> + <td>Texto</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">type </span></a></td> + <td>Indica el tipo de botón.</td> + <td>Uno de los siguientes: (button|submit|reset)</td> + <td><abbr title="Por defecto">PD.</abbr>: submit.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">disabled </span></a></td> + <td>Indica que el control está desabilitado.</td> + <td>disabled.</td> + <td>Lo fija el navegador. disabled.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-accesskey"><span style="color: green;">accesskey </span></a></td> + <td>Define una tecla de acceso rápido. Importante para la <a href="/es/docs/Accesibilidad" title="Accesibilidad">Accesibilidad</a>.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-character">carácter</a> o letra.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#adef-tabindex"><span style="color: green;">tabindex </span></a></td> + <td>Asigna un número de posición en el orden de tabulación.</td> + <td>Un número entre 0 y 32767.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">reserved </span></a></td> + <td>Reservado para un uso futuro que nunca tubo. Inútil</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;"> onfocus onblur </code></td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h2> + +<pre class="brush:html"><button name="button">Click me</button> +</pre> + +<h2 id="Soporte" name="Soporte">Sobre Accesibilidad</h2> + +<h3 id="Botones_con_íconos">Botones con íconos</h3> + +<p>Los botones que solamente utilizan un ícono para representar una funcionalidad no tienen un nombre accesible para los lectores de no-videntes. Para arreglar esto debemos proveer un nombre para el botón que describa la funcionalidad de este.</p> + +<h4 id="Ejemplo">Ejemplo</h4> + +<pre><button name="favorito" type="button"> + <svg aria-hidden="true" viewBox="0 0 10 10"><path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg> + Agregar a favoritos +</button> +</pre> + +<p>Esto también ayudará a los usuarios videntes que no estén familiarizados con el significado del ícono ya que podrán entender su significado pasando el cursor por encima del elemento.</p> + +<p>Para más información (en inglés):</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">What is an accessible name? | The Paciello Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN Understanding WCAG, Guideline 4.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Proximidad">Proximidad</h3> + +<p>Si el sitio tiene una gran cantidad de elementos interactivos muy cercanos entre ellos esto puede generar una dificultad en los usuarios con discapacidades motrices. Es ideal que estos elementos tengan una separación para evitar que el usuario cliquee el incorrecto. Puedes utilizar la propiedad <code>margin</code> para separarlos.</p> + +<p>Más información (en inglés):</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> +</ul> + +<h2 id="Soporte" name="Soporte">Soporte</h2> + +<div class="hidden">La tabla de compatibilidad se genera automáticamente con datos estructurados. Si te gustaría colaborar puedes encontrar más información por <a href="https://github.com/mdn/browser-compat-data">acá y enviarnos un pull request</a>.</div> + +<p>{{Compat("html.elements.button")}}</p> + +<h2 id="Referencia" name="Referencia">Referencia</h2> + +<ul> + <li>El elemento <a href="/es/docs/HTML/Elemento/button" title="HTML/Elemento/button">button</a> en el estándar <a class="external" href="http://html.conclase.net/w3c/html401-es/interact/forms.html#h-17.5">HTML 4.01</a></li> +</ul> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a href="/es/docs/Project:Como_ayudar" title="Project:Como_ayudar">MDC:Como ayudar</a>.</p> +</div> + +<p> </p> diff --git a/files/es/web/html/elemento/canvas/index.html b/files/es/web/html/elemento/canvas/index.html new file mode 100644 index 0000000000..63e3e260a3 --- /dev/null +++ b/files/es/web/html/elemento/canvas/index.html @@ -0,0 +1,88 @@ +--- +title: canvas +slug: Web/HTML/Elemento/canvas +tags: + - Canvas + - HTML + - 'HTML:Elemento' + - para_revisar +translation_of: Web/HTML/Element/canvas +--- +<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El elemento HTML <em>canvas</em> (<canvas>) se puede utilizar para dibujar gráficos a través de secuencias de comandos (por lo general <a href="/../../../../en/JavaScript" rel="internal" title="../../../../en/JavaScript">JavaScript</a> ).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.</span></span></p> + +<p> + </p><p><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las aplicaciones de Mozilla adquirieron la compatibilidad con <code><canvas></code> a partir de Gecko 1.8 (es decir, <a href="/../../../../en/Firefox_1.5_for_developers" rel="internal" title="../../../../en/Firefox 1.5 for developers">Firefox 1.5</a> ).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El elemento fue originalmente introducido por Apple en el OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/" rel="external nofollow" title="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> y Safari.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Internet Explorer, antes de la versión 9.0 beta, no admite de forma nativa <code><canvas></code> , pero una página puede de hecho añadir la compatibilidad mediante la inclusión de un script del proyecto <a class="external" href="http://excanvas.sourceforge.net/" rel="external nofollow" title="http://excanvas.sourceforge.net/">Explorer Canvas</a> de Google.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Opera 9 también es compatible con <code><canvas></code> .</span></span></p> +<p></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para más artículos sobre canvas, consulta la <a href="/es/HTML/Canvas" title="es/HTML/Canvas">página del tema canvas</a> .</span></span></p> + +<h2 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Transparente, ya sea <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">contenido estático</a> o <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a> .</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ninguna, deben estar presentes tanto las etiquetas de inicio como las de cierre</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte contenido dinámico o cualquier otro elemento que acepte contenido estático .</span></span> </td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td> + <td><a class="external" href="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element" title="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.8.10</span></span></a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h2> + +<dl> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("width") }}</span></span></dt> + <dd> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La anchura del espacio de coordenadas en píxeles CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El valor predeterminado es 300.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("height") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La altura del espacio de coordenadas en píxeles CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El valor predeterminado es 150.</span></span></dd> +</dl> + +<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Nota: el tamaño del lienzo mostrado se puede cambiar con una hoja de estilo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La imagen se escala durante la representación para adaptarse al tamaño que se le ha aplicado estilo .</span></span></div> + +<h2 id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h2> + +<ul> + <li><a href="/en/DOM/HTMLCanvasElement" title="en/DOM/HTMLCanvasElement"><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTMLCanvasElement</span></span></a></li> +</ul> + +<h2 id="Ejemplo"><span class="goog-gtc-unit"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Ejemplo</span></span></h2> + +<pre class="brush: html"><<span class="start-tag">canvas</span><span class="attribute-name"> id</span>=<span class="attribute-value">"canvas" </span><span class="attribute-name">width</span>=<span class="attribute-value">"300" </span><span class="attribute-name">height</span>=<span class="attribute-value">"300"</span>> + Tu navegador no admite el elemento &<span class="entity">lt;</span>canvas&<span class="entity">gt;</span>. +</<span class="end-tag">canvas</span>> +</pre> + +<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2> + +<p>El elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="Use the HTML <canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><code><canvas></code></a> es simplemente un bitman que no provee ninguna información adicional sobre los elementos que tiene dibujados. El contenido de la etiqueta <code>canvas</code> no se muestra a los lectores de pantalla como otras etiquetas semánticas. Como regla general, deberías evitar utilizar canvas en un sitio accesible.</p> + +<p>Para mejorar la accesibilidad de la etiquetas puedes leer los siguientes artículos (en inglés):</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li> + <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li> + <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li> + <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li> +</ul> + +<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h2> + +<ul> + <li><a href="/es/HTML/Canvas" title="es/HTML/Canvas"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Tema sobre canvas</span></span></a></li> +</ul> + +<p> </p> + +<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="color: #000000; font-family: 'Ubuntu'; font-size: 9pt;">{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}</span></p> diff --git a/files/es/web/html/elemento/caption/index.html b/files/es/web/html/elemento/caption/index.html new file mode 100644 index 0000000000..84d06cffaa --- /dev/null +++ b/files/es/web/html/elemento/caption/index.html @@ -0,0 +1,167 @@ +--- +title: caption +slug: Web/HTML/Elemento/caption +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/caption +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Es el encargado de darle un título descriptivo a las tablas.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><caption></code> y <code></caption></code> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: .</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#para_tablas">para tablas</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">align </span></a></td> + <td>Indica la alineación en relación a la tabla.</td> + <td>Uno de los siguientes: 'top', 'bottom', 'left', 'right'.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Ejemplo_simple" name="Ejemplo_simple">Ejemplo simple</h4> + +<p>El siguiente código:</p> + +<pre class="eval"><span class="nowiki"> + <table border='1'> + <caption>Tabla con caption</caption> + <tr> <td> tabla de una celda. </td> </tr> + </table> + </span> +</pre> + +<p>Se visualiza así:</p> + +<div style="border: solid silver 1px;"> +<table> + <caption>Tabla con caption</caption> + <tbody> + <tr> + <td>tabla de una celda.</td> + </tr> + </tbody> +</table> +</div> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li>Debe ser el primer hijo del elemento table. una tabla solo puede tener uno.</li> +</ul> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#h-11.2.2"><strong>caption</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-caption">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/center/index.html b/files/es/web/html/elemento/center/index.html new file mode 100644 index 0000000000..1a24bbaf4b --- /dev/null +++ b/files/es/web/html/elemento/center/index.html @@ -0,0 +1,116 @@ +--- +title: <center> (obsoleto) +slug: Web/HTML/Elemento/center +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/center +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>{{obsolete_header()}}<br> + El elemento obsoleto <a href="es/HTML/Elemento/center">center</a> (centro) crea una caja en bloque con el contenido centrado. En realidad es equivalente a un <a href="es/HTML/Elemento/div">div</a> con <code>align="center"</code></p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <center> y </center> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">Elemento desaprobado</a>.</dd> +</dl> + +<blockquote> +<dl> + <dt>Actualmente la mejor <a href="https://juanmcastro.es/tutoriales/como-centrar-texto-en-html/">forma de centrar texto no es con html</a>, con css tenemos infinidad de posibilidales para centrar el texto vertical, horizontal, izquierda, dercha, justificado y todo lo que necesitemos.</dt> +</dl> +</blockquote> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a> y <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td colspan="4">Ver atributos de transición.</td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición (Solo tiene los genéricos)</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>lista de clases separadas por espacios</td> + <td>implícito</td> + <td>identificador a nivel de documento, .</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>uno de los siguientes:"ltr" o "rtl"</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre><center> + elemento center +</center> +<div align='center'> + elemento div con: align='center' +</div> +</pre> diff --git a/files/es/web/html/elemento/cite/index.html b/files/es/web/html/elemento/cite/index.html new file mode 100644 index 0000000000..237934b396 --- /dev/null +++ b/files/es/web/html/elemento/cite/index.html @@ -0,0 +1,147 @@ +--- +title: cite +slug: Web/HTML/Elemento/cite +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/cite +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>cite</strong> -<em>cita</em> . Marca una referencia a una fuente, o el autor de un texto citado.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <cite> y </cite> (ambas obligatorias)</dd> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#defrase">Elemento de frase</a>, y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: En línea.</dd> + <dd><strong>Puede contener</strong>: Text y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id=".C2.BFQui.C3.A9n_lo_dijo.3F" name=".C2.BFQui.C3.A9n_lo_dijo.3F">¿Quién lo dijo?</h4> + +<p>código:</p> + +<pre class="eval"><p> <cite>Galileo</cite> dijo: "... y sin embargo, se mueve." </p> +</pre> + +<p><br> + Resultado:</p> + +<div style="border: solid silver 1px; margin-left: 1em;"> +<p><cite>Galileo</cite> dijo: "...y sin embargo, se mueve."</p> +</div> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<p>En los navegadores basados en Mozilla (y en otros) el contenido de cite es mostrado con un estilo de texto en cursiva.</p> + +<pre class="eval"><p> <cite>Galileo</cite> dijo: "... y sin embargo, se mueve." </p> +<p> <span style='font-style: italic;'>Galileo</span> dijo: "... y sin embargo, se mueve." </p> +</pre> + +<p> </p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li>Está bastante estendido el mal uso de este elemento, mucha gente lo usa para marcar el texto de las citas en vez del autor, para marcar el texto están los elementos <a href="es/HTML/Elemento/q">q</a> (en línea) y <a href="es/HTML/Elemento/blockquote">blockquote</a> (en bloque).</li> +</ul> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>Los elementos de frase <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-CITE">en la especificación</a> de html 4.01</li> +</ul> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-cite">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/code/index.html b/files/es/web/html/elemento/code/index.html new file mode 100644 index 0000000000..dfcac59bfd --- /dev/null +++ b/files/es/web/html/elemento/code/index.html @@ -0,0 +1,110 @@ +--- +title: code +slug: Web/HTML/Elemento/code +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/code +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Es el apropiado para marcar el código de un programa.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code> y </code> (ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>lista de clases separadas por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"><code> +<span class="nowiki"> #include main() { for(;;) { printf ("Hello World!\n"); } } </span> +</code> +</pre> diff --git a/files/es/web/html/elemento/col/index.html b/files/es/web/html/elemento/col/index.html new file mode 100644 index 0000000000..4f8c415f87 --- /dev/null +++ b/files/es/web/html/elemento/col/index.html @@ -0,0 +1,177 @@ +--- +title: col +slug: Web/HTML/Elemento/col +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/col +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Permite especificar propiedades para una columna o un grupo de ellas.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><col></code> (solo tiene una).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: No.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#para_tablas">para tablas.</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Nada.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a></td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>.</td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: "desconocido".</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr></td> + <td>Lo fija el navegador. <abbr title="Por defecto">PD.</abbr>: En castellano 'ltr'.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-span-COL"><span style="color: green;">span </span></a></td> + <td>Indica el número de columnas afectadas.</td> + <td>Un número.</td> + <td><abbr title="Por defecto">PD.</abbr>: 1.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-width-COL"><span style="color: green;">width </span></a></td> + <td>Indica la anchura de las columnas.</td> + <td>Una longitud expresada en píxeles, porcentaje o relativa.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-align-TD"><span style="color: green;">align </span></a></td> + <td>Indica la alineación horizontal.</td> + <td>Uno de los siguientes: (left|center|right|justify|char).</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-char"><span style="color: green;">char </span></a></td> + <td>Carácter que se usará como punto de alineación.</td> + <td>Un carácter, Uno de estos: {{ mediawiki.external('ISO10646') }}.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-charoff"><span style="color: green;">charoff </span></a></td> + <td>offset del carácter de alineación.</td> + <td>Una longitud expresada en píxeles o porcentaje.</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-valign"><span style="color: green;">valign </span></a></td> + <td>Indica la alineación vertical de los contenidos de las celdas.</td> + <td>Uno de los siguientes: (top|middle|bottom|baseline).</td> + <td>Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + <th>por omisión</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="bla_bla" name="bla_bla">bla bla</h4> + +<pre class="eval"><span class="nowiki"> + + </span> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#edef-COL."><strong>col</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-col">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/colgroup/index.html b/files/es/web/html/elemento/colgroup/index.html new file mode 100644 index 0000000000..da87284232 --- /dev/null +++ b/files/es/web/html/elemento/colgroup/index.html @@ -0,0 +1,163 @@ +--- +title: colgroup +slug: Web/HTML/Elemento/colgroup +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/colgroup +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>colgroup</strong> de column group = Grupo de columnas. Permite crear <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#h-11.2.4">grupos de columnas</a>.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><colgroup></code> y <code></colgroup></code> (la de cierre es opcional).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: No.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#para_tablas">para tablas</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Cero o más elementos <a href="es/HTML/Elemento/col">col</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.3">Texto legible</a>. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-cdata">cdata</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="3"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-span-COLGROUP"><span style="color: green;">span </span></a></td> + <td>Indica el número de columnas que se agrupan.</td> + <td>Un número entero mayor que cero. Por defecto: 1.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-width-COLGROUP"><span style="color: green;">width </span></a></td> + <td>Indica la anchura de las columnas del grupo.</td> + <td>Una longitud expresada en píxeles, porcentaje o relativa. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-align-TD"><span style="color: green;">align </span></a></td> + <td>Indica la alineación horizontal.</td> + <td>Uno de los siguientes: <code>'left' 'center' 'right' 'justify' y 'char'</code>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-char"><span style="color: green;">char </span></a></td> + <td>Carácter que se usará como punto de alineación.</td> + <td>Un carácter. Por defecto: el carácter de punto decimal (puede variar según el idioma). Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-charoff"><span style="color: green;">charoff </span></a></td> + <td>Indica la distancia entre el borde y el carácter de alineación.</td> + <td>Una longitud expresada en píxeles o porcentaje. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#adef-valign"><span style="color: green;">valign </span></a></td> + <td>Indica la alineación vertical de los contenidos de las celdas.</td> + <td>Uno de los siguientes: <code>'top' 'middle' 'bottom' y 'baseline'</code>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="bla_bla" name="bla_bla">bla bla</h4> + +<pre class="eval"><span class="nowiki"> + + </span> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/tables.html#edef-COLGROUP."><strong>colgroup</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-colgroup">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/command/index.html b/files/es/web/html/elemento/command/index.html new file mode 100644 index 0000000000..eaaeb3118c --- /dev/null +++ b/files/es/web/html/elemento/command/index.html @@ -0,0 +1,152 @@ +--- +title: <command> +slug: Web/HTML/Elemento/command +tags: + - HTML + - Obsoleto +translation_of: Web/HTML/Element/command +--- +<div>{{obsolete_header()}}</div> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>Nota: </strong>El elemento <code>command</code> ha sido removido de </span>{{Gecko("24.0")}} en favor del elemento {{HTMLElement("menuitem")}} . Firefox nunca ha soportado este elemento <code>command , </code>y la implementación existente de la interface DOM {{domxref("HTMLCommandElement")}} ha sido removida de <a href="/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a>.</p> +</div> + +<h2 id="Resumen_de_el_catalogo">Resumen de el catalogo</h2> + +<pre><command function="About live stream"></pre> + +<h3 class="brush: html" id="sect1"></h3> + +<h4 id="El_elemento_command_representa_un_comando_que_el_usuario_puede_invocar_.">El elemento <code>command </code>representa un comando que el usuario puede invocar .</h4> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td>Contenido dinámico , contenido estático de texto, contenido de metadata .</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno , es un {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>La etiqueta de inicio es obligatoria , pero como es un elemento vacío , el uso de una etiqueta de cierre está prohibido . </td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos </th> + <td>Solamente {{HTMLElement("colgroup")}} ,aunque puede ser definido implícitamente ya que su etiqueta de inicio no es obligatoria .El {{HTMLElement("colgroup")}} no debe de tener un {{HTMLElement("span")}} como hijo .</td> + </tr> + <tr> + <th scope="row">Interface DOM </th> + <td>{{domxref("HTMLCommandElement")}} {{ obsolete_inline(24) }}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p> + +<ul> + <li><code>command</code> o <code>empty</code> el cual es el estado por default e indica que este es un comando normal.</li> + <li><code>checkbox</code> indica que el comando puede ser alternado usando un checkbox.</li> + <li><code>radio</code> indica que el comando puede ser alternado usando un radiobutton.</li> +</ul> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>Indica si el comando es seleccionado . Debe de ser omitido al menos que el atributo <code>type </code>sea <code>checkbox </code>o <code>radio.</code></dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Indica que el comando no está disponible .</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd>Proporciona una imagen que representa el comando.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>El nombre del comando como se muestra al usuario .</dd> + <dt>{{htmlattrdef("radiogroup")}}</dt> + <dd>Este atributo proporciona el nombre del grupo de comandos , con un atributo <code>type </code>de<code> tipo radio ,</code>que será alternado cuando el comando en sí mismo sea alternado . Este atributo debe de ser omitido al menos que el atributo <code>type </code>sea del tipo <code>radio .</code></dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Este atributo indica el tipo de comando . Este puede ser uno de los siguientes tres valores :</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'commands.html', '<command>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>{{ HTMLRef }}</p> diff --git a/files/es/web/html/elemento/content/index.html b/files/es/web/html/elemento/content/index.html new file mode 100644 index 0000000000..0e380c1cd9 --- /dev/null +++ b/files/es/web/html/elemento/content/index.html @@ -0,0 +1,167 @@ +--- +title: <content> +slug: Web/HTML/Elemento/content +tags: + - Deprecado + - Elemento + - HTML + - Referencia + - Web + - Web Components +translation_of: Web/HTML/Element/content +--- +<p>{{Deprecated_header}}</p> + +<p>El elemento <a href="/en-US/docs/Web/HTML">HTML</a> <code><content> es usado dentro de un </code> <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> como un {{glossary("insertion point")}} . No está pensado para ser usado en HTML ordinario . Es usado con <a href="/en-US/docs/Web/Web_Components">Web Components</a>.</p> + +<div class="note"> +<p><strong>Nota: </strong>Aunque está presente en un draft inicial de las especificaciones e implementado en varios exploradores , este elemento ha sido removido en versiones posteriores a la especificación .</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="HTML/Content_categories">Categorías de contenido</a></th> + <td>Modelo de contenido transpatente</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Contenido dinámico</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Any element that accepts flow content.</td> + </tr> + <tr> + <th scope="row">Interfase DOM</th> + <td>{{domxref("HTMLContentElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales </a>.</p> + +<dl> + <dt>select</dt> + <dd>Una lista de selectores separada por comas . Estos tienen la misma sintaxis que los selectores de CSS . Seleccionan el contenido a insertar en lugar del elemento <content> .</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Aquí hay un ejemplo simple del uso del elemento <content> . Es un archivo HTML con todo lo necesario en el .</p> + +<div class="note"> +<p><strong>Nota: </strong>Para que este código funcione , el explorador en el que se muestre debe de soportar Web Components . Ver <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a> .</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + <!-- The original content accessed by <content> --> + <div> + <h4>My Content Heading</h4> + <p>My content text</p> + </div> + + <script> + // Get the <div> above. + var myContent = document.querySelector('div'); + // Create a shadow DOM on the <div> + var shadowroot = myContent.createShadowRoot(); + // Insert into the shadow DOM a new heading and + // part of the original content: the <p> tag. + shadowroot.innerHTML = + '<h2>Inserted Heading</h2> <content select="p"></content>'; + </script> + + </body> +</html> +</pre> + +<p>Si muestras esto en un explorador web , debe de verse como lo siguiente .</p> + +<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="spec-table standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('Shadow DOM', "#the-content-element", "content")}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con exploradores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterísitica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>35</td> + <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td> + <td>{{CompatNo}}</td> + <td>26</td> + <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Catacterística</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico </td> + <td>37</td> + <td>{{CompatGeckoMobile("28")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Si el Shadow DOM no está habilidado en Firefox , los elementos de <content> se comportarán como {{domxref("HTMLUnknownElement")}} . Shadow DOM fue implementado por primera vez en Firefox33 y está detras de una preferencia , <code>dom.webcomponents.enabled</code>, el cual está deshabilitado por default .</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li> + <li>{{HTMLElement("shadow")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/data/index.html b/files/es/web/html/elemento/data/index.html new file mode 100644 index 0000000000..8f202fa334 --- /dev/null +++ b/files/es/web/html/elemento/data/index.html @@ -0,0 +1,141 @@ +--- +title: <data> +slug: Web/HTML/Elemento/data +tags: + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/data +--- +<h2 id="Resúmen">Resúmen</h2> + +<p>El <strong>Elemento HTML <code><data></code></strong> vincula un contenido dado con una traducción legible por una máquina. Si el contenido está relacionado con <code>time-</code> o <code>date-</code>, debe usarse el elemento {{HTMLElement("time")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorías de contenido</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos permitidos</th> + <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">interfaz DOM</th> + <td>{{domxref("HTMLDataElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento incluye </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">Atributos globales </a></p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>This attribute specifies the machine-readable translation of the content of the element.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>El siguiente ejemplo muestra nombres de productos pero también asocia a cada uno con su código UPC.</p> + +<pre class="brush: html"><p>New Products</p> +<ul> + <li><data value="3967381398">Mini Ketchup</data></li> + <li><data value="3967381399">Jumbo Ketchup</data></li> + <li><data value="3967381400">Mega Jumbo Ketchup</data></li> +</ul> +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22.0")}} {{bug("839371")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>The HTML {{HTMLElement("time")}} element.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/datalist/index.html b/files/es/web/html/elemento/datalist/index.html new file mode 100644 index 0000000000..40049a9734 --- /dev/null +++ b/files/es/web/html/elemento/datalist/index.html @@ -0,0 +1,106 @@ +--- +title: datalist +slug: Web/HTML/Elemento/datalist +tags: + - HTML5 + - datalist +translation_of: Web/HTML/Element/datalist +--- +<p>El <strong>elemento HTML <code><datalist></code> </strong>contiene un conjunto de elementos {{HTMLElement("option")}} que representan los valores disponibles para otros controles.</p> + +<p><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, copia https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.</span></span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Contenido de las categorías</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>O bien <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a> o, cero o más elementos {{HTMLElement("option")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>Ninguno</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLDataListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento no tiene otros atributos mas que los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a>, comunes a todos los elementos.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><label>Choose a browser from this list: +<input list="browsers" name="myBrowser" /></label> +<datalist id="browsers"> + <option value="Chrome"> + <option value="Firefox"> + <option value="Internet Explorer"> + <option value="Opera"> + <option value="Safari"> + <option value="Microsoft Edge"> +</datalist> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadoresEdit">Compatibilidad con los distintos navegadores<a class="button section-edit only-icon" href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/option$edit#Compatibilidad_con_los_distintos_navegadores" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite https://github.com/mdn/browser-compat-data y envíenos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.datalist")}}</p> + +<h2 id="sección_de_relleno">sección de relleno</h2> + +<p>Incluya este polyfill para proporcionar soporte para navegadores antiguos y actualmente incompatibles:<br> + <a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li class="last">El elemento {{HTMLElement("input")}}, y más especificamente este atributo {{htmlattrxref("list", "input")}};</li> + <li class="last">El elemento {{HTMLElement("option")}}.</li> +</ul> + +<p class="last">{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/dd/index.html b/files/es/web/html/elemento/dd/index.html new file mode 100644 index 0000000000..3296e7758b --- /dev/null +++ b/files/es/web/html/elemento/dd/index.html @@ -0,0 +1,111 @@ +--- +title: dd +slug: Web/HTML/Elemento/dd +tags: + - Contenido agrupado HTML + - Definición + - Detalles + - Detalles de descripción + - Elemento + - HTML + - Lista de descripciones + - Referencia + - Web + - dd +translation_of: Web/HTML/Element/dd +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">El <strong>elemento HTML <code><dd></code> </strong>provee detalles acerca de o la definición de un término precedente ({{HTMLElement("dt")}}) en una lista de descripciones ({{HTMLElement("dl")}}).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dd.html", "tabbed-standard")}}</div> + +<p class="hidden">La fuente para este ejemplo interactivo esta almacenado en un repositorio GitHub. Si desea contribuir al poryecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíe una petición de extracción (pull request).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td>Ninguna</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido de flujo</a></td> + </tr> + <tr> + <th scope="row">Omisión de Tag</th> + <td>El tag inicial es requerido. El tag final puede ser omitido si el elemento {{HTMLElement("dd")}} se encuentra inmediatamente seguido por otro elemento <code><dd></code>, o si no hay más contenido en el elemento padre.</td> + </tr> + <tr> + <th scope="row">Padres permitidos</th> + <td>{{HTMLElement("dl")}} o (en <a href="/es/docs/Glossary/WHATWG">WHATWG</a> HTML) un {{HTMLElement("div")}} que se encuentra dentro de un {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Hermano previo</th> + <td>{{HTMLElement("dt")}} u otro elemento {{HTMLElement("dd")}}.</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>Ninguno</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Los atributos de este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt> + <dd>Si el valor de este atributo es definido como <code>yes</code>, el texto de la definición no se encapsulará. El valor por defecto es <code>no</code>.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Para un ejemplo, ver <a href="/es/docs/Web/HTML/Elemento/dl#Examples">ejemplos <dl></a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página es generada desde datos estructurados. Si desea contribuir, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe una solicitud de extracción (pull request).</div> + +<p>{{Compat("html.elements.dd")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{HTMLELement("dl")}}</li> + <li>{{HTMLElement("dt")}}</li> +</ul> diff --git a/files/es/web/html/elemento/del/index.html b/files/es/web/html/elemento/del/index.html new file mode 100644 index 0000000000..b38c85a532 --- /dev/null +++ b/files/es/web/html/elemento/del/index.html @@ -0,0 +1,155 @@ +--- +title: del +slug: Web/HTML/Elemento/del +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/del +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <code style="color: darkblue;">del</code> (deleted-borrado) marca las partes de un texto o documento que han sido suprimidas o sustituidas.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <del> y </del> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: a veces <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a> a veces <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>:</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: depende, si actua como un elemento en bloque puede contener elementos en bloque y en linea. Pero si actua como un elemento en linea solo podrá contener elementos en linea.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genericos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>identificador a nivel de documento, lista de clases separadas por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td><code style="color: green;">cite</code></td> + <td>URI</td> + <td>implícito</td> + <td>información sobre el cambio</td> + </tr> + <tr> + <td><code style="color: green;">datetime</code></td> + <td>fecha</td> + <td>implícito</td> + <td>fecha y hora del cambio</td> + </tr> + <tr> + <th colspan="4">de transición</th> + </tr> + <tr> + <td colspan="4">No tiene, o dicho de otra manera, tiene los mismos que en el doctype estricto</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>El siguiente código:</p> + +<pre> Ejemplo de ins en linea: + + <p> + El agua es insípida <del>y húmeda.</del> <ins>inodora e incolora.</ins> + </p> + + Ejemplo de ins en bloque: + + <p> + El agua es insípida. + </p> + + <del> + <p> + y húmeda. + </p> + </del> +</pre> + +<p><br> + Se visualiza así:</p> + +<div class="highlight"> +<p>Ejemplo de ins en linea:</p> + +<p>El agua es insípida</p> +<del>y húmeda.</del> <ins>inodora e incolora.</ins> + +<p>Ejemplo de ins en bloque:</p> + +<p>El agua es insípida.</p> + +<p> </p> + +<p> </p> +<del>y húmeda. </del></div> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p>El elemento <a href="es/HTML/Elemento/del">del</a> del tiene un opuesto, el elemento <a href="es/HTML/Elemento/ins">ins</a>. <a href="es/HTML/Elemento/del">del</a>, marca las partes descartadas e <a href="es/HTML/Elemento/ins">ins</a> las insertadas.</p> diff --git a/files/es/web/html/elemento/details/index.html b/files/es/web/html/elemento/details/index.html new file mode 100644 index 0000000000..cd8b0c5abb --- /dev/null +++ b/files/es/web/html/elemento/details/index.html @@ -0,0 +1,152 @@ +--- +title: <details> +slug: Web/HTML/Elemento/details +tags: + - Elemento + - Elementos HTML interactivos + - HTML + - HTML5 + - Referencia + - Web +translation_of: Web/HTML/Element/details +--- +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El elemento HTML Details<strong> <details> </strong>es usado como un widget de revelación a través del cual el usuario puede obtener información adicional .</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Contenido dinámico</a> , contenido de seccionamiento, contenido interactivo, contenido palpable .</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Un elemento {{HTMLElement("summary")}} seguido de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">contenido dinámico</a> </td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padres permitidos</th> + <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">contenido dinámico</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLDetailsElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Este atributo Booleano indica si los detalles serán mostrados al usuario cuando la página se cargue . Por default el valor es <code>false </code>y por lo tanto los detalles estarán ocultos.</dd> + <dd></dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><details> + <summary>Some details</summary> + <p>More info about the details.</p> +</details> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<div class="note"> +<p><strong>Nota:</strong> Si el el ejemplo de arriba no funciona , ver {{anch("Compatibilidad con navegadores")}} para determinar si el navegador soporta esta característica .</p> +</div> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>12</td> + <td>{{CompatNo}} {{bug(591737)}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.0</td> + <td>{{CompatNo}} {{bug(591737)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"></h2> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{HTMLElement("summary")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/dfn/index.html b/files/es/web/html/elemento/dfn/index.html new file mode 100644 index 0000000000..03242c90bd --- /dev/null +++ b/files/es/web/html/elemento/dfn/index.html @@ -0,0 +1,112 @@ +--- +title: dfn +slug: Web/HTML/Elemento/dfn +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/dfn +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Sirve para marcar el término que se quiere definir.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <dfn> y </dfn> (ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>identificador a nivel de documento, lista de clases separadas por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"><p> + El <dfn>HTML</dfn> es un lenguaje de marcado para hipertextos. +</p> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> diff --git a/files/es/web/html/elemento/dialog/index.html b/files/es/web/html/elemento/dialog/index.html new file mode 100644 index 0000000000..e44363c003 --- /dev/null +++ b/files/es/web/html/elemento/dialog/index.html @@ -0,0 +1,152 @@ +--- +title: <dialog> +slug: Web/HTML/Elemento/dialog +translation_of: Web/HTML/Element/dialog +--- +<div>{{HTMLRef}}</div> + +<p>El <strong>elemento</strong> <strong>HTML <code><dialog></code> </strong>representa una caja de diálogo u otro componente interactivo, como inspector o ventana.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">sectioning root</a></td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parent elements</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a></td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>. El atributo <code>tabindex</code> no debe utilizarse en el elemento <code><dialog></code>.</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>Indica que el diálogo está activo y disponible para interactuar. Cuando el atributo open no está asignado, no debe mostrarse al usuario.</dd> +</dl> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p> </p> + +<ul> + <li>Los elementos <code><form></code> pueden integrarse dentro de un diálogo especificándolos con el atributo <code>method="dialog"</code>. Cuando se envía un formulario, el diálogo se cierra con un atributo {{domxref("HTMLDialogElement.returnValue", "returnValue")}} asignado con el <code>value</code> del botón utilizado.</li> + <li>El pseudo-elemento {{cssxref('::backdrop')}} de CSS puede utilizarse para dar estilos al elemento <code><dialog></code>, por ejemplo para atenuar contenido inaccesible mientras el diálogo modal esté activo.</li> +</ul> + +<p> </p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_1">Ejemplo 1</h3> + +<pre class="brush: html"><dialog open> + <p>Greetings, one and all!</p> +</dialog> +</pre> + +<h3 id="Ejemplo_2">Ejemplo 2</h3> + +<pre class="brush: html"><!-- Simple pop-up dialog box, containing a form --> +<dialog id="favDialog"> + <form method="dialog"> + <section> + <p><label for="favAnimal">Favorite animal:</label> + <select id="favAnimal"> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select></p> + </section> + <menu> + <button id="cancel" type="reset">Cancel</button> + <button type="submit">Confirm</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Update details</button> +</menu> + +<script> + (function() { + var updateButton = document.getElementById('updateDetails'); + var cancelButton = document.getElementById('cancel'); + var favDialog = document.getElementById('favDialog'); + + // Update button opens a modal dialog + updateButton.addEventListener('click', function() { + favDialog.showModal(); + }); + + // Form cancel button closes the dialog box + cancelButton.addEventListener('click', function() { + favDialog.close(); + }); + + })(); +</script> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'semantics.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("html.elements.dialog")}}</p> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms">Formularios HTML</a>.</li> + <li>El evento {{event("close")}}</li> + <li>El evento {{event("cancel")}}</li> + <li>El pseudo-elemento {{cssxref("::backdrop")}}</li> +</ul> diff --git a/files/es/web/html/elemento/dir/index.html b/files/es/web/html/elemento/dir/index.html new file mode 100644 index 0000000000..6c95601436 --- /dev/null +++ b/files/es/web/html/elemento/dir/index.html @@ -0,0 +1,121 @@ +--- +title: dir +slug: Web/HTML/Elemento/dir +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/dir +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <code style="color: darkblue;">dir</code> (directorio) es un elemento desaprobado. En su origen fue pensado para crear directorios en multicolumna, en la actualidad es inutil.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <dir> y </dir> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">Elemento DESAPROBADO</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: uno o más elementos <a href="es/HTML/Elemento/li">li</a></dd> + <dd><strong>NO puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">Elementos en bloque</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th colspan="4">Genericos</th> + </tr> + <tr> + <th colspan="4">Genericos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>identificador a nivel de documento, lista de clases separadas por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">de transición</th> + </tr> + <tr> + <td><code style="color: green;">compact</code></td> + <td>compact</td> + <td>implícito</td> + <td>espacio entre objetos reducido</td> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>El siguiente código:</p> + +<pre class="eval"> <dir> + <li>primer elemento </li> + <li>segundo elemento </li> + <li>tercer elemento </li> + </dir> +</pre> + +<div class="highlight"> +<p>Se visualiza así:</p> + +<ul> + <li>primer elemento</li> + <li>segundo elemento</li> + <li>tercer elemento</li> +</ul> +</div> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> diff --git a/files/es/web/html/elemento/div/index.html b/files/es/web/html/elemento/div/index.html new file mode 100644 index 0000000000..5421099e45 --- /dev/null +++ b/files/es/web/html/elemento/div/index.html @@ -0,0 +1,152 @@ +--- +title: div +slug: Web/HTML/Elemento/div +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/div +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>div</strong> de "division" -<em>división</em> . Sirve para crear secciones o agrupar contenidos.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><div></code> y <code></div></code> (ambas obligatorias).</dd> + <dd><strong>Está definido como</strong>: <a href="https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements">Elemento en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: En bloque.</dd> + <dd><strong>Puede contener</strong>: Texto, y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enbloque">en bloque</a> o <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en linea</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events">Eventos:</a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td><code style="color: green;">datasrc </code></td> + <td>Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros.</td> + <td>Una dirección URI. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><code style="color: green;">datafld </code></td> + <td>El nombre de una propiedad o columna de <code style="color: green;">datasrc</code>. Reservado para posibles usos futuros.</td> + <td>Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><code style="color: green;">dataformatas </code></td> + <td>Indica como deben ser tratados los datos obtenidos de <code style="color: green;">datasrc</code>. Reservado para posibles usos futuros.</td> + <td>Uno de los siguientes: <code>'paintext'</code> o <code>'html</code>'. Por defecto: <code>'plaintext'</code></td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td><code style="color: green;">align </code></td> + <td>Alineación del texto.</td> + <td>Uno de los siguientes: <code>"left", "center", "right",</code> o "justify". Por defecto: <code>'left'</code>, lo fija el navegador</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Div_y_span" name="Div_y_span">Div y span</h4> + +<p>código:</p> + +<pre class="eval"><<strong>div</strong> style="color: blue;"> + <h2> Ejemplo de div y span </h2> + <p> + Esto es un párrafo dentro de un div, + <span style="color: red;"> y esto un span dentro de un párrafo.</span> + </p> +</<strong>div</strong>> +</pre> + +<p><span class="comment">el wiki causa interferencias Resultado: <div style='border: solid silver 1px;'> <div style="color: blue;"> <h2> Ejemplo de div y span </h2> <p> Esto es un párrafo dentro de un div, <span style="color: red;"> y esto un span dentro de un párrafo.</span> </p> </div> </div></span></p> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#edef-DIV"><strong>div</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-div">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/dl/index.html b/files/es/web/html/elemento/dl/index.html new file mode 100644 index 0000000000..9bea9588ce --- /dev/null +++ b/files/es/web/html/elemento/dl/index.html @@ -0,0 +1,219 @@ +--- +title: dl +slug: Web/HTML/Elemento/dl +tags: + - Agrupando contenido HTML + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/dl +--- +<div>{{HTMLRef}}</div> + +<p>El elemento <strong>HTML <code><dl></code> </strong>representa una lista descriptiva. El elemento encierra una lista de grupos de términos (especificados con el uso del elemento {{HTMLElement("dt")}}) y de descripciones (proveídas con elementos {{HTMLElement("dd")}}). Algunos usos comunes para este elemento son implementar un glosario o para desplegar metadatos (lista de pares llave-valor).</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div> + +<p class="hidden">El contenido para este ejemplo interactivo se encuentra almacenado en un repositorio GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envía la petición de extración (pull request).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido de flujo</a>, y si los elementos hijos de <code><dl></code> incluyen un grupo nombre-valor, contenido palpable.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td> + <p>Ya sea: Cero o más grupos cada uno consistiendo en uno o más elementos {{HTMLElement("dt")}} seguidos por uno o más elementos {{HTMLElement("dd")}}, opcionalmente intercalados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.<br> + O: Uno o más elementos {{HTMLElement("div")}}, opcionalmente entremezclados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.</p> + </td> + </tr> + <tr> + <th scope="row">Omisión de Tag</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Padres permitidos</th> + <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido de flujo</a>.</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLDListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Los atributos de este elemento incluyen los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Término_sencillo_y_descripción">Término sencillo y descripción</h3> + +<pre class="brush: html notranslate"><dl> + <dt>Firefox</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>Salida:</p> + +<p><img alt="Image:HTML-dl1.png" src="/@api/deki/files/241/=HTML-dl1.png"></p> + +<h3 id="Múltiples_términos_descripción_sencilla">Múltiples términos, descripción sencilla</h3> + +<pre class="brush: html notranslate"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>Salida:</p> + +<p><img alt="Image:HTML-dl2.png" src="/@api/deki/files/242/=HTML-dl2.png"></p> + +<h3 id="Término_sencillo_múltiples_descripciones">Término sencillo, múltiples descripciones</h3> + +<pre class="brush: html notranslate"><dl> + <dt>Firefox</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + <dd> + The Red Panda also known as the Lesser + Panda, Wah, Bear Cat or Firefox, is a + mostly herbivorous mammal, slightly larger + than a domestic cat (60 cm long). + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>Output:</p> + +<p><img alt="Image:HTML-dl3.png" src="/@api/deki/files/243/=HTML-dl3.png"></p> + +<h3 id="Múltiples_términos_y_descripciones">Múltiples términos y descripciones</h3> + +<p>También es posible definir múltiples términos con múltiples descripciones correspondientes, combinando los ejemplos de arriba.</p> + +<h3 id="Metadatos">Metadatos</h3> + +<p>Las listas descriptivas son útiles para desplegar metadatos como una lista de pares llave-valor.</p> + +<pre class="brush: html notranslate"><dl> + <dt>Name</dt> + <dd>Godzilla</dd> + <dt>Born</dt> + <dd>1952</dd> + <dt>Birthplace</dt> + <dd>Japan</dd> + <dt>Color</dt> + <dd>Green</dd> +</dl> +</pre> + +<p>Tip: Puede ser útil definir un separador llave-valor en el CSS, como:</p> + +<pre class="brush: css notranslate">dt::after { + content: ": "; +}</pre> + +<h3 id="Encapsulado_de_grupos_nombre-valor_en_elementos_HTMLElementdiv">Encapsulado de grupos nombre-valor en elementos {{HTMLElement("div")}}</h3> + +<p><a href="/es/docs/Glossary/WHATWG">WHATWG</a> HTML permite encapsular cada grupo nombre-valor de un elemento {{HTMLElement("dl")}} en un elemento {{HTMLElement("div")}}. Esto puede ser útil cuando se utilizan <a href="/es/docs/Web/HTML/Microdata">microdatos</a>, o cuando <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> apliquen a todo el grupo, o por motivos de estilo.</p> + +<pre class="brush: html notranslate"><dl> + <div> + <dt>Name</dt> + <dd>Godzilla</dd> + </div> + <div> + <dt>Born</dt> + <dd>1952</dd> + </div> + <div> + <dt>Birthplace</dt> + <dd>Japan</dd> + </div> + <div> + <dt>Color</dt> + <dd>Green</dd> + </div> +</dl> +</pre> + +<h2 id="Notas">Notas</h2> + +<p>No use este elemento (ni elementos {{HTMLElement("ul")}}) solo para crear sangría en una página. Si bien funciona, es una mala práctica y obscurece el signinifcado de las listas descriptivas.</p> + +<p>Para cambiar la indentación de un término, usa la propiedad {{cssxref("margin")}} de <a href="/es/docs/Web/CSS">CSS</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_Web">Compatibilidad Web</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada con datos estructurados. Si desea contribuir a la información, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envie una petición de extración (pull request).</div> + +<p>{{Compat("html.elements.dl")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("dt")}} element</li> + <li>{{HTMLElement("dd")}} element</li> +</ul> diff --git a/files/es/web/html/elemento/dt/index.html b/files/es/web/html/elemento/dt/index.html new file mode 100644 index 0000000000..7cbf0c3182 --- /dev/null +++ b/files/es/web/html/elemento/dt/index.html @@ -0,0 +1,103 @@ +--- +title: dt +slug: Web/HTML/Elemento/dt +tags: + - Contenido agrupado HTML + - Definición + - Elemento + - HTML + - Lista de definiciones + - Referencia + - Término + - Término de definición + - dt + - listas +translation_of: Web/HTML/Element/dt +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">El <strong>elemento HTML <code><dt></code> </strong>especifica un término en una descripción o lista de definiciones, y como tal debe utilizarse dentro de un elemento {{HTMLElement("dl")}}</span> Es usualmente seguido por un elemento {{HTMLElement("dd")}}; sin embargo, múltiples elementos <code><dt></code> en un renglón indican diferentes términos los cuales todos son definidos por el siguiente elemento {{HTMLElement("dd")}}.</p> + +<p>El subsecuente elemento {{HTMLElement("dd")}} (<strong>Detalles de la descripción</strong>) provee la definición u otro texto relacionado asociado con el término especificado utilizando <code><dt></code>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div> + +<p class="hidden">La fuente para este ejemplo interactivo se encuetra almacenado en un repositorio GitHub. Si desea contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>y envíe una petición de extración (pull request).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td>Ninguno.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido de flujo</a>, pero sin {{HTMLElement("header")}}, {{HTMLElement("footer")}}, contenido seccionado o encabezados descendientes de contenido.</td> + </tr> + <tr> + <th scope="row">Omisión de Tag</th> + <td>Debe tener un tag inicial. El tag final puede ser omitido si este elemento es seguido inmediatamente después por otro elemento <code><dd></code>, o si no hay más contenido en el elemento padre.</td> + </tr> + <tr> + <th scope="row">Padres permitidos</th> + <td>Antes de un elemento {{HTMLElement("dt")}} o elemento {{HTMLElement("dd")}}, dentro de un {{HTMLElement("dl")}} o (en <a href="/es/docs/Glossary/WHATWG">WHATWG</a> HTML) un {{HTMLElement("div")}} que esta dentro de un {{HTMLElement("dl")}}.</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>Ninguno</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/es/docs/DOM/span"><code>HTMLSpanElement</code></a> interface for this element.</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento solo incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Para ver un ejemplo, vea el <a href="/es/docs/Web/HTML/Elemento/dl#Examples">proveído por el elemento <code><dl></code></a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatiblidad es esta página es generada desde estructuras de datos. Si desea contribuir a la información, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe su petición de extracción (pull request).</div> + +<p>{{Compat("html.elements.dt")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li> +</ul> diff --git a/files/es/web/html/elemento/element/index.html b/files/es/web/html/elemento/element/index.html new file mode 100644 index 0000000000..814711131f --- /dev/null +++ b/files/es/web/html/elemento/element/index.html @@ -0,0 +1,110 @@ +--- +title: <element> +slug: Web/HTML/Elemento/element +translation_of: Web/HTML/Element/element +--- +<div class="note"> +<p><strong>Nota:</strong> Este elemento ha sido borrado de la especificación. Mira <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">esto</a> para obtener más información desde el editor de la espeficicación.</p> +</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El <strong>elemento <a href="/es/docs/Web/HTML">HTML</a> <code><element></code></strong> es utilizado para personalizar los elementos DOM.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="HTML/Categorias_de_contenido">Categorias de contenido</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Modelo_de_contenido_transparente">Contenido transparente</a>.</td> + </tr> + <tr> + <th scope="row">Contenido Permitido</th> + <td>???</td> + </tr> + <tr> + <th scope="row">Etiquetas omitidas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>???</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos" name="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p>El texto va aquí</p> + +<pre class="brush: html">Más texto va aquí. +</pre> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<p>El elemento <code><element></code> fue formulado en un borrador de la especificación de <a href="http://w3c.github.io/webcomponents/spec/custom/">elementos personalizados</a>, que se ha eliminado.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad dee navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver También" name="Ver También">Ver También</h2> + +<ul> + <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/elementos_títulos/index.html b/files/es/web/html/elemento/elementos_títulos/index.html new file mode 100644 index 0000000000..be0dd6801b --- /dev/null +++ b/files/es/web/html/elemento/elementos_títulos/index.html @@ -0,0 +1,240 @@ +--- +title: Elementos títulos +slug: Web/HTML/Elemento/Elementos_títulos +tags: + - HTML + - 'HTML:Elemento' + - Referencia + - Secciones HTML + - Todas_las_Categorías + - Web +translation_of: Web/HTML/Element/Heading_Elements +--- +<p id="Summary">Los elementos de <strong>encabezado</strong> implementan seis niveles de encabezado del documento, <code><h1></code> es el más importante, y <code><h6></code>, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.</p> + +<div class="note"> +<p><strong>Notas de uso:</strong></p> + +<ul> + <li>No se deben usar niveles inferiores para reducir el tamaño de la fuente: use la propiedad <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font-size")}} para eso.</li> + <li>Evite omitir niveles de encabezado: siempre comience con <code><h1></code>, después use <code><h2></code> y así sucesivamente.</li> + <li>Con el elemento {{HTMLElement("section")}}, debe considerar evitar usar <h1> más de una vez en una página; por costumbre, se usa para mostrar el título de la página, con todos los encabezados debajo de éste comenzando con <code><h2></code>. Cuando se usan secciones, debe usarse un <code><h1></code> por sección. Véase <a href="/es/docs/Sections_and_Outlines_of_an_HTML5_document#Definiendo_secciones_en_HTML5">Definiendo secciones</a> en <a href="/es/docs/Sections_and_Outlines_of_an_HTML5_document">Secciones y esquema de un documento HTML5</a> para más información.</li> +</ul> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, contenido de encabezados, contenido palpable.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">Contenido textual o estático</a>.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padres permitidos</th> + <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido dinámico</a>; no debe usarse como hijo del elemento {{HTMLElement("hgroup")}}, pues éste es obsoleto</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Estos elementos incluyen los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<p>El atributo <code>align</code> es obsoleto; no debe usarse.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Todos_los_encabezados">Todos los encabezados</h3> + +<p>El siguiente código muestra todos los niveles de encabezado.</p> + +<pre class="brush: html"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p>Aquí está el resultado de este código:</p> + +<p>{{ EmbedLiveSample('Todos_los_encabezados', '280', '300', '') }}</p> + +<h3 id="Página_de_ejemplo">Página de ejemplo</h3> + +<p>El código siguiente muestra unos pocos encabezados con algo de contenido debajo de ellos.</p> + +<pre class="brush: html"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p>Aquí está el resultado de este código:</p> + +<p>{{ EmbedLiveSample('Página_de_ejemplo', '280', '480', '') }}</p> + +<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2> + +<h3 id="Navegación">Navegación</h3> + +<p>Una forma típica de navegación que utilizan las personas no videntes es moverse a través de la pantalla con las etiquetas de encabezado. De esta forma, pueden conocer rápidamente el contenido de la página en poco tiempo; por esta razón es importante prestar mucha atención a nuestras etiquetas de encabezado y no saltearse ningún nivel o podríamos confundir a este usuario.</p> + +<h4 id="No_hacer">No hacer</h4> + +<pre class="brush: html example-bad"><h1>Cabecera nivel 1</h1> +<h3>Cabecera nivel 3</h3> +<h4>Cabecera nivel 4</h4> +</pre> + +<h4 id="Sí_hacer">Sí hacer</h4> + +<pre class="brush: html example-good"><h1>Cabecera nivel 1</h1> +<h2>Cabecera nivel 2</h2> +<h3>Cabecera nivel 3</h3> +</pre> + +<h4 id="Anidar">Anidar</h4> + +<p>Las etiquetas de cabecera pueden anidarse para generar sub-secciones en nuestros documentos. Esto beneficia la organización de la información y también ayuda a los usuarios de lectores de pantalla a conocer mejor la jerarquía de los contenidos.</p> + +<ol> + <li><code>h1</code> Harry Potter + + <ol> + <li><code>h2</code> Sinopsis</li> + <li><code>h2</code> Novelas + <ol> + <li><code>h3</code> Harry Potter y la Piedra Filosofal</li> + <li><code>h3</code> Harry Potter y la Cámara de los Secretos</li> + <li><code>h3</code> Harry Potter y el Prisionero de Azkaban</li> + <li><code>h3</code> Harry Potter y el Cáliz de Fuego</li> + <li><code>h3</code> Harry Potter y la Orden del Fenix</li> + <li><code>h3</code> Harry Potter y el Príncipe Mestizo</li> + <li><code>h3</code> Harry Potter y las Reliquias de la Muerte</li> + </ol> + </li> + <li><code>h2</code> Películas + <ol> + <li><code>h3</code> Harry Potter y la Piedra Filosofal</li> + <li><code>h3</code> Harry Potter y la Cámara de los Secretos</li> + <li><code>h3</code> Harry Potter y el Prisionero de Azkaban</li> + <li><code>h3</code> Harry Potter y el Cáliz de Fuego</li> + <li><code>h3</code> Harry Potter y la Orden del Fenix</li> + <li><code>h3</code> Harry Potter y el Príncipe Mestizo</li> + <li><code>h3</code> Harry Potter y las Reliquias de la Muerte (Parte 1)</li> + <li><code>h3</code> Harry Potter y las Reliquias de la Muerte (Parte 2)</li> + </ol> + </li> + </ol> + </li> +</ol> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/em/index.html b/files/es/web/html/elemento/em/index.html new file mode 100644 index 0000000000..d24fa05f81 --- /dev/null +++ b/files/es/web/html/elemento/em/index.html @@ -0,0 +1,60 @@ +--- +title: em +slug: Web/HTML/Elemento/em +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/em +--- +<div>{{HTMLRef}}</div> + +<p>El <strong>elemento HTML <code><em></code></strong> es el apropiado para marcar con énfasis las partes importantes de un texto. El elemento <code><em></code> puede ser anidado, con cada nivel de anidamiento indicando un mayor grado de énfasis.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div> + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual o estático</a>, contenido palpable</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">Contenido textual o estático</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>Any</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td> + </tr> + </tbody> +</table> + +<h3 id="Atributos" name="Atributos">Atributos</h3> + +<p>Este elemento solo incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"> <p> + <em>El dinero</em> es importante pero <strong>la salud</strong> lo es más. + </p> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p><a href="es/HTML/Elemento/em">em</a> tiene un hermano mayor: <a href="es/HTML/Elemento/strong">strong</a>. <a href="es/HTML/Elemento/em">em</a> sirve para dar énfasis y <a href="es/HTML/Elemento/strong">strong</a> para dar mucho énfasis</p> diff --git a/files/es/web/html/elemento/embed/index.html b/files/es/web/html/elemento/embed/index.html new file mode 100644 index 0000000000..d489014613 --- /dev/null +++ b/files/es/web/html/elemento/embed/index.html @@ -0,0 +1,69 @@ +--- +title: embed +slug: Web/HTML/Elemento/embed +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - para_revisar +translation_of: Web/HTML/Element/embed +--- +<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Nota: este tema documenta sólo el elemento <embed> que se define como parte de HTML5.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">No trata las implementaciones anteriores no estandarizadas del elemento <code><embed></code>.</span></span></div> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El <em>Elemento HTML Embed </em> ( <code><embed></code> ) representa un punto de integración para una aplicación externa o de contenido interactivo (en otras palabras, un plug-in).</span></span></p> + +<h2 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Ninguno; es un elemento vacío.</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Debe tener una etiqueta de inicio, pero no debe tener una etiqueta de cierre.</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte <a href="/en/HTML/Content_categories#phrasing_content" title="../../../../en/HTML/Content categories#phrasing content">contenido estático</a> .</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td> + <td><a class="external" href="http://www.w3.org/TR/html5/the-iframe-element.html#the-embed-element" title="http://www.w3.org/TR/html5/the-iframe-element.html#the-embed-element"><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.8.3</span></span></a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este elemento admite los siguientes atributos además de los <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">atributos globales</a> .</span></span></p> + +<dl> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("height") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La altura del recurso mostrada en píxeles CSS.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("src") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La dirección URL del recurso que se está incrustado.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("type") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El tipo MIME que se va a usar para la selección del plug-in para crear una instancia.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("width") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El ancho del recurso mostrado en píxeles CSS.</span></span></dd> +</dl> + +<h2 id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h2> + +<ul> + <li><a href="/en/DOM/HTMLEmbedElement" title="en/DOM/HTMLEmbedElement"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTMLEmbedElement</span></span></a></li> +</ul> + +<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Otros elementos que se utilizan para incrustar el contenido de varios tipos incluyen {{ HTMLElement("audio") }}, {{ HTMLElement("canvas") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("math") }}, {{ HTMLElement("object") }}, {{ HTMLElement("svg") }} y {{ HTMLElement("video") }}. </span></span></p> + +<p> </p> + +<p> </p> + +<p>{{ languages ( { "en": "en/HTML/Element/embed" } ) }}</p> + +<p> </p> diff --git a/files/es/web/html/elemento/etiqueta_personalizada_html5/index.html b/files/es/web/html/elemento/etiqueta_personalizada_html5/index.html new file mode 100644 index 0000000000..e18dd89f0d --- /dev/null +++ b/files/es/web/html/elemento/etiqueta_personalizada_html5/index.html @@ -0,0 +1,46 @@ +--- +title: Etiqueta Personalizada HTML5 +slug: Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 +--- +<p>Una etiqueta personalizada sencilla, es crear una plantilla de elementos.</p> + +<p>Un sencillo ejemplo donde con poner la etiqueta <corazon> nos muetra un corazon en el documento:</p> + +<h2 id="corazon.js" name="corazon.js">corazon.js</h2> + +<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> + +<pre class="brush: js">function ini(){ +document.createElement('corazon');//creamos el elemento corazon +var corazon = document.getElementsByTagName('corazon');//llamamos todos los elemento corazon del documento + var i; + for (i = 0; i < corazon.length; i++) {//ejecuta acciones para esos elementos +//creamos estilos para nuetras etiquetas + corazon[i].style.backgroundImage= "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACaElEQVR4nO2by7WCMBCGKYECyJgSLIESLCEnwT0l0IElWIIlWIIlsAxhkxLuXZh45YrKI+QF/zmznvn+TAYYj0myadOmTSMkMUl5VuQN0JIDrVooTmLHLhxoxRElPCtyjgk2nZdjgnlW5BxRcs/Lzi2wMwdaNUBLnhW56ZzdArIib4GdBTApgP0MiBtHlMzJKTFJBWIHAew2MOdPC+wsEDsYwlbgiF2HFtBfVHEaC95CcRphdu8BtPi4nwz+VMRk8H9RDymoxcf9mBMf0hGT4MWOXQzCP6IBWr7L2wAtZ576226QmKSD4DkmWACrl4D/dCocaLVkTgFMfh3OEpN07n0fHE+DiiNKrOQEVn80QE15G4XcOwEf9+rOL9H2/TkRu/bCq8eNNXgVUhgceEPj5fEsMUldFOIwZMcANX1dF2W3C4BWf3ff1uDzK+5doIaQ62LcdAEmeJXtr6MBWiZLvfEFETt2Wev911EnYuHXXs9DJsLiW5iPsfYOqNc+A27WP4B8ihaxa2J46xNUtFCc9IeQ82JcxGOTLNY5CG9Pi5D1XYPO16C6BmvqAvmyJLW4l3MendPvrMXWsRV6vyJXVyHmV2P59ccZ9btAjCZ8h388FeLbEsnRP5hGZMJ4+IhMmA4fgQnz4QM2wRx8gCaYhw/IhOXgAzBheXiPTbAH76EJ9uE9MsEdvAcmuIfXcmCCP/BaFk3wD17Lggn+wmstaIL/8FoLmBAOvJZBE8KD1zJgQrjwWjNMCB9ea4IJ8cBrjTAhPnitASbEC6/1wYT44bV6TFgPvBbHBHOgFQdazfpz06ZNmzbN0C97EM/d8hW+4gAAAABJRU5ErkJggg==')"; + corazon[i].style.position="relative"; + corazon[i].style.display="block"; + corazon[i].style.width="64px"; + corazon[i].style.height="64px"; + } +} +window.addEventListener('load',ini,false);//ejecuta la funcion ini al cargar el documento</pre> + +<p>Ahora solo llamamos a nuestro archivo corazon.js desde nuetro html y podremos usar libremente nuetra etiqueta <corazon> con la cual nos mostrara un corazon.</p> + +<h2 id="index.html" name="index.html">index.html</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<p><!DOCTYPE html><br> + <html><br> + <head><br> + <meta charset="utf-8"><br> + <title>Mi Etiqueta</title><br> + <script src="corazon.js" type="text/javascript"></script><br> + </head><br> + <body><br> + <corazon></corazon><br> + </body><br> + </html></p> + +<p> </p> diff --git a/files/es/web/html/elemento/fieldset/index.html b/files/es/web/html/elemento/fieldset/index.html new file mode 100644 index 0000000000..bb29878206 --- /dev/null +++ b/files/es/web/html/elemento/fieldset/index.html @@ -0,0 +1,124 @@ +--- +title: fieldset +slug: Web/HTML/Elemento/fieldset +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/fieldset +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <a href="/es/HTML/Elemento/fieldset" title="es/HTML/Elemento/fieldset">fieldset</a> (grupo de campos) permite organizar en grupos los campos de un formulario.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <fieldset> y </fieldset> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">Elemento en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: un elemento <a href="/es/HTML/Elemento/legend" title="es/HTML/Elemento/legend">legend</a> (opcional), y despues cero o más elementos <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a> o <a href="/es/HTML/Elemento/Tipos_de_elementos#en_linea" title="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>lista de clases separadas por espacios</td> + <td>implícito</td> + <td>identificador a nivel de documento</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>uno de los siguientes:"ltr" o "rtl"</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">de transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>El siguiente código:</p> + +<pre><form> + + <fieldset> + <legend>Información Personal</legend> + Nombre: <input name='nombre' type='text' tabindex='1'> + Apellidos: <input name='apellidos' type='text' tabindex='2'> + </fieldset> + + <fieldset> + <legend>edad</legend> + <input type='checkbox' tabindex='20' + name='edad' value='20-39' > 20-39 + <input type='checkbox' tabindex='21' + name='edad' value='40-59' > 40-59 + <input type='checkbox' tabindex='22' + name='edad' value='60-79' > 60-79 + </fieldset> + +</form> +</pre> diff --git a/files/es/web/html/elemento/figcaption/index.html b/files/es/web/html/elemento/figcaption/index.html new file mode 100644 index 0000000000..b212c17632 --- /dev/null +++ b/files/es/web/html/elemento/figcaption/index.html @@ -0,0 +1,90 @@ +--- +title: <figcaption> +slug: Web/HTML/Elemento/figcaption +tags: + - Elemento + - Elementos de agrupación de contenido en HTML + - HTML + - Referencia +translation_of: Web/HTML/Element/figcaption +--- +<p>{{HTMLRef}}</p> + +<p>El elemento <strong>HTML <code><figcaption></code> </strong>representa un subtítulo o leyenda asociado al contenido del elemento padre {{HTMLElement("figure")}}, pudiendo ser colocado como primer o último hijo. Es importante destacar que el elemento <strong><code><figcaption></code></strong> es opcional.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td>Ninguna</td> + </tr> + <tr> + <th scope="row">Contenido Permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>En un elemento {{HTMLElement("figure")}} el elemento <code><figcaption></code> debe ser el primero o el último hijo.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + <tr> + <th scope="row">Contento en el que puede ser usado</th> + <td>Como the first o last child de un <strong><figure></strong> element</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento sólo incluye los </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Para ejemplos con <code><figcaption></code>, por favor ver la página {{HTMLElement("figure")}}.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<div class="hidden"> +<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("html.elements.figcaption")}}</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>El elemento {{HTMLElement("figure")}}.</li> +</ul> diff --git a/files/es/web/html/elemento/figure/index.html b/files/es/web/html/elemento/figure/index.html new file mode 100644 index 0000000000..1ad3d12a07 --- /dev/null +++ b/files/es/web/html/elemento/figure/index.html @@ -0,0 +1,60 @@ +--- +title: figure +slug: Web/HTML/Elemento/figure +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - figure + - para_revisar +translation_of: Web/HTML/Element/figure +--- +<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El <em> elemento HTML</em> <span style="font-family: Courier New;"><figure></span> representa contenido independiente, a menudo con un título.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si bien se relaciona con el flujo principal, su posición es independiente de éste.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.</span></span></p> + +<div class="note"> +<p><em><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Notas de uso:</span></span> </em></p> + +<ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Al ser una <a href="/es/Secciones_y_esquema_de_un_documento_HTML_5#Seccionador_ra.c3.adz" title="https://developer.mozilla.org/es/Secciones_y_esquema_de_un_documento_HTML_5#Seccionador_ra.c3.adz">seccionador raíz</a>, el esbozo del contenido del elemento <span style="font-family: Courier New;"><figure></span> está excluido del esbozo principal del documento.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Un título puede estar asociado con el elemento <span style="font-family: Courier New;"><figure></span> mediante la inserción de un {{ HTMLElement ("figcaption") }} en su interior (como el primero o el último hijo).</span></span></li> +</ul> +</div> + +<h3 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h3> + +<table class="standard-table" style="height: 117px; width: 1125px;"> + <tbody> + <tr> + <th><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Tipo</span></span></th> + <th><a><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Seccionador raíz</span></span></a></th> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un elemento {{ HTMLElement ("figcaption") }}, seguido por <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content"> contenido dinámico</a> , o contenido dinámico seguido por un elemento{{ HTMLElement ("figcaption") }}.</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Ninguna, tanto la etiqueta inicial como la etiqueta de cierre son obligatorias</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte elementos dinámicos.</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element"><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.5.11</span></span></a></td> + </tr> + </tbody> +</table> + +<h3 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h3> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Este elemento no tiene atributos que no sean los <a href="/en/HTML/Global_attributes" title="../../../../en/HTML/global attributes">atributos globales</a>, comunes a todos los elementos.</span></span></p> + +<h3 class="editable" id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h3> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">Este elemento implementa la interfaz </span></span><code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">.</span></span></p> + +<h3 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h3> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El elemento {{ HTMLElement ("figcaption") }}.</span></span></p> diff --git a/files/es/web/html/elemento/font/index.html b/files/es/web/html/elemento/font/index.html new file mode 100644 index 0000000000..e1020b3d95 --- /dev/null +++ b/files/es/web/html/elemento/font/index.html @@ -0,0 +1,152 @@ +--- +title: font +slug: Web/HTML/Elemento/font +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/font +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>font</strong> -<em>fuente</em> . Indica el tamaño, color, o fuente del texto que contiene.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <font> y </font> (ambas obligatorias).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">desaprobado</a>. + <dl> + <dd>En un doctype transicional está definido como un elemento <a href="es/HTML/Elemento/Tipos_de_elementos#especial">especial</a> y por lo tanto <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: En línea.</dd> + <dd><strong>Puede contener</strong>: Texto, y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea </a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-size-FONT"><span style="color: green;">size</span></a></td> + <td>Tamaño de la fuente. Según una tabla del 1 al 7.</td> + <td>Un número entero (ej. 1), o un valor incremental (ej. +1). <s>Por defecto:</s> debe indicarlo el autor.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-color-FONT"><span style="color: green;">color</span></a></td> + <td>El color del texto.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.5">color RGB</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#adef-face-FONT"><span style="color: green;">face</span></a></td> + <td>Especifica la/s fuentes para el texto.</td> + <td>Lista de nombres de fuentes separadas por coma. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Un_ejemplo_simple" name="Un_ejemplo_simple">Un ejemplo simple</h4> + +<p>código:</p> + +<pre class="eval"><p> + Texto normal y ... + <<strong>font</strong> size="5" color="#0000ff"> Texto distinto. </<strong>font</strong>> +</p> +</pre> + +<p>Resultado:</p> + +<div style="border: solid silver 1px;"> +<p>Texto normal y ... <font color="#0000ff" size="5"> Texto distinto. </font></p> +</div> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-FONT"><strong>font</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-font">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/footer/index.html b/files/es/web/html/elemento/footer/index.html new file mode 100644 index 0000000000..fb29106abc --- /dev/null +++ b/files/es/web/html/elemento/footer/index.html @@ -0,0 +1,71 @@ +--- +title: footer +slug: Web/HTML/Elemento/footer +tags: + - HTML5 + - footer + - para_revisar +translation_of: Web/HTML/Element/footer +--- +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">El <em>Elemento </em><em>HTML Footer</em> (<span style="font-family: 'Courier New';"><footer></span>) representa un pie de página para el contenido de sección más cercano o el elemento <a href="/en/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">raíz de sección</a> (p.e, su ancestro mas cercano <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/article" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><article></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/aside" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><aside></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/nav" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><nav></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/section" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><section></a></code>,<code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/blockquote" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><blockquote></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/body" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><body></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/details" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><details></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/fieldset" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><fieldset></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/figure" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><figure></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/td" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><td></a></code>). Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.</p> +<p><meta http-equiv="content-type" content="text/html; charset=utf-8"/></p> +<div class="note" style="margin-bottom: 1.286em; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-width: initial; border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; padding-top: 0.75em; padding-right: 15px; padding-bottom: 0.75em; padding-left: 15px; background-clip: initial; background-color: rgb(250, 249, 226); color: rgb(93, 86, 54);"> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.75em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><strong>Notas de uso:</strong></p> + <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;"> + <li>Encierra la información acerca del autor en un elemento <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/address" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><address></a></code> que puede ser incluido dentro del elemento <span style="font-family: 'Courier New';"><footer>.</span></li> + <li>El elemento <span style="font-family: 'Courier New';"><footer></span> no es contenido de sección y en consecuencia no introduce una nueva sección en el <a href="/en/Sections_and_Outlines_of_an_HTML5_document" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">esquema</a>.</li> + </ul> +</div> +<div id="section_1"> + <h3 class="editable" id="Contexto_de_uso" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.396em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid;"><span>Contexto de uso</span></h3> + <div class="editIcon" style="display: inline; margin-left: 4px; font-size: inherit; font-weight: normal; position: relative;"> + <a href="/es/HTML/Elemento/footer#" style="color: rgb(51, 102, 153); text-decoration: none;" title="Editar sección"><span class="icon" style="height: 16px;"><img alt="Editar sección" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></div> + <table class="fullwidth-table" style="border-collapse: collapse; margin-top: 0px; margin-right: 0px; margin-bottom: 1.5em; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 1125px; background-clip: initial; background-color: rgb(255, 255, 255); height: 117px;"> + <tbody> + <tr> + <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Contenido Permitido</td> + <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;"><a href="/en/HTML/Content_categories#flow_content" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">Contenido de flujo</a>, pero sin descendientes <span style="font-family: 'Courier New';"><footer></span> o <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/header" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><header></a></code>.</td> + </tr> + <tr> + <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Omisión de Etiqueta</td> + <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Ninguna, tanto la etiqueta de inicio como la de cierre son obligatorias.</td> + </tr> + <tr> + <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Elementos ancestros permitidos</td> + <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;"> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Cualquier elemento que acepte <a href="/en/HTML/Content_categories#flow_content" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">contenido de flujo</a>. Note que un elemento <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><footer></code> no debe ser un descendiente de los elementos <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/address" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><address></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/header" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><header></a></code> o de otro elemento <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><footer></code>.</p> + </td> + </tr> + <tr> + <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;">Documento normativo</td> + <td style="padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; text-align: left; vertical-align: top;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element">HTML5, sección 4.4.9</a></td> + </tr> + </tbody> + </table> +</div> +<div id="section_2"> + <h3 class="editable" id="Atributos" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.396em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid;"><span>Atributos</span></h3> + <div class="editIcon" style="display: inline; margin-left: 4px; font-size: inherit; font-weight: normal; position: relative;"> + <a href="/es/HTML/Elemento/footer#" style="color: rgb(51, 102, 153); text-decoration: none;" title="Editar sección"><span class="icon" style="height: 16px;"><img alt="Editar sección" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></div> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Este elemento no tiene otros atributos adicionales a los <a class="new " href="/en/HTML/global_attributes" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;">atributos globales</a>, comunes a todos los elementos.</p> + <div id="section_3"> + <div id="section_3"> + <div id="section_3"> + <h3 class="editable" id="Interfaz_DOM" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.396em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid;"><span>Interfaz DOM</span></h3> + <div class="editIcon" style="display: inline; margin-left: 4px; font-size: inherit; font-weight: normal; position: relative;"> + <a href="/es/HTML/Elemento/footer#" style="color: rgb(51, 102, 153); text-decoration: none;" title="Editar sección"><span class="icon" style="height: 16px;"><img alt="Editar sección" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></div> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Este elemento implementa la interfaz <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a href="/en/DOM/element" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">HTMLElement</a></code>.</p> + </div> + <div id="section_4"> + <h3 class="editable" id="Vea_también" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.396em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid;"><span>Vea también</span></h3> + <div class="editIcon" style="display: inline; margin-left: 4px; font-size: inherit; font-weight: normal; position: relative;"> + <a href="/es/HTML/Elemento/footer#" style="color: rgb(51, 102, 153); text-decoration: none;" title="Editar sección"><span class="icon" style="height: 16px;"><img alt="Editar sección" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></div> + <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;"> + <li>Otros elementos relacionados con secciones: <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/body" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><body></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/nav" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><nav></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/article" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><article></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/aside" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><aside></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h1" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><h1></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h2" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><h2></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h3" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><h3></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h4" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><h4></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h5" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><h5></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/h6" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><h6></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/hgroup" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><hgroup></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/header" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><header></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/section" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><section></a></code>, <code style="font-style: inherit; font-weight: inherit; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><a class="new" href="/es/HTML/Element/address" rel="internal" style="color: rgb(153, 0, 0); text-decoration: none;"><address></a></code>;</li> + <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" rel="internal" style="color: rgb(51, 102, 153); text-decoration: none;">Secciones y esquemas de un documento HTML5</a>.</li> + </ul> + </div> + </div> + </div> +</div> +<p> </p> diff --git a/files/es/web/html/elemento/form/index.html b/files/es/web/html/elemento/form/index.html new file mode 100644 index 0000000000..d0ade4348c --- /dev/null +++ b/files/es/web/html/elemento/form/index.html @@ -0,0 +1,198 @@ +--- +title: form +slug: Web/HTML/Elemento/form +translation_of: Web/HTML/Element/form +--- +<h2 id="Resumen">Resumen</h2> +<p>El elemento HTML form (<code><form></code>) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.</p> +<p>Es posible usar las pseudo-clasess de CSS <code><a href="/es/CSS/%3Avalid" rel="custom">:valid</a></code> e <code><a href="/es/CSS/%3Ainvalid" rel="custom">:invalid</a></code> para darle estilos a un elemento form.</p> +<h2 id="Contexto_de_uso">Contexto de uso</h2> +<table class="standard-table"> + <tbody> + <tr> + <td>Categorías de contenido</td> + <td><a href="/en/HTML/Content_categories#flow_content" title="/en/HTML/Content_categories#flow_content">Contenido dinámico</a></td> + </tr> + <tr> + <td>Contenido permitido</td> + <td><a href="/en/HTML/Content_categories#flow_content" title="/en/HTML/Content_categories#flow_content">Contenido dinámico</a>, pero sin contener elementos <code><form></code></td> + </tr> + <tr> + <td>Omisión de etiquetas</td> + <td>Ninguna, ambas, la etiqueta de apertura y cierre deben estar presentes</td> + </tr> + <tr> + <td>Normative document</td> + <td><a class="external" href="http://www.w3.org/TR/html5/forms.html#the-form-element" title="http://www.w3.org/TR/html5/forms.html#the-form-element">HTML5, section 4.10.3</a> (<a class="external" href="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3" title="http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.3">HTML4.01, section 17.3</a>)</td> + </tr> + </tbody> +</table> +<h2 id="Atributos">Atributos</h2> +<p>Como cualquier otro elemento HTML, este elemento soporta <a href="/en/HTML/Global_attributes" title="/en/HTML/Global_attributes">atributos globales</a></p> +<dl> + <dt> + {{ htmlattrdef("accept") }} {{ HTMLVersionInline(4) }} {{ obsolete_inline() }}</dt> + <dd> + Una lista separada por comas de los tipos de contenido que el servidor acepta.<br> + <div class="note"> + <p><strong>Nota de uso: </strong>este atributo ha sido removido en HTML5 y no debe ser usado. En su lugar, usar el atributo <strong><a href="/es/HTML/Element/Input#attr-accept" title="/en/HTML/Element/Input#attr-accept">accept</a></strong> del elemento específico {{ HTMLElement("input") }}.</p> + </div> + </dd> + <dt> + {{ htmlattrdef("accept-charset") }}</dt> + <dd> + Una lista de codificación de caracteres que el servidor acepta. La lista puede ser delimitada por espacios o comas. El navegador los usa en el orden en que cada uno son listados. Los valores por defecto es la cadena reservada "UNKNOWN", en tal caso la codificación corresponde a la codificación del documento conteniendo el elemento form.<br> + <p>HTML 4: En versiones anteriores de HTML, las diferentes codificaciones de caracteres pueden ser delimitadas por espacios o comas. Este no es más el caso en HTML5, donde sólo los espacios son correctos.</p> + </dd> + <dt> + {{ htmlattrdef("action") }}</dt> + <dd> + La URI de un programa que procesa la información enviada por medio del formulario. Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formaction", "button") }} en un {{ HTMLElement("button") }} o en el elemento{{ HTMLElement("input") }}.</dd> + <dt> + {{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline(5) }}</dt> + <dd> + Indica cuales de los controles en este formulario puede tener sus valores automáticamente completados por el navegador. Esta configuración puede ser sobreescrita por un atributo <code>autocomplete</code> en un elemento que pertenezca al formulario: + <ul> + <li><span style="font-family: Courier New;">off</span>: El usuario debe ingresar explicitamente cada valor dentro de cada campo por cada uso, o el documento provee su propio método de autocompletado; el navegador no autocompleta las entradas.</li> + <li><span style="font-family: Courier New;">on</span>: El navegador puede completar automáticamente valores basados en lo que el usuario ha ingresado durante entradas previas al formulario.</li> + </ul> + <div class="note"> + <p><strong>Nota:</strong> si se establece <code>autocomplete</code> a un valor de <code>off</code> en un formulario porque el documento provee su propio auto-completado entonces también se debería establecer <code>autocomplete</code> al valor <code>off</code> para cada uno de los elementos de formulario <code>input</code> que el documento pueda autocompletar {{ anch("Notas para Google Chrome") }}.</p> + </div> + </dd> + <dt> + {{ htmlattrdef("enctype") }}</dt> + <dd> + Cuando el valor del atributo <code>method</code> es <span style="font-family: Courier New;">post</span>, este atributo es el <a href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">tipo MIME</a> del contenido que es usado para enviar el formulario al servidor.</dd> + <dd> + Los posibles valores son: + <ul> + <li><span style="font-family: Courier New;">application/x-www-form-urlencoded</span>: El valor por defecto si un atributo no está especificado.</li> + <li><span style="font-family: Courier New;">multipart/form-data</span>: Usar este valor si se está usando el elemento {{ HTMLElement("input") }} con el atributo <code>type</code> ajustado a "file".</li> + <li><span style="font-family: Courier New;">text/plain (HTML5)</span></li> + </ul> + <p>Este valor puede ser sobreescrito por un atributo{{ htmlattrxref("formenctype", "button") }}en un {{ HTMLElement("button") }} o un elemento {{ HTMLElement("input") }}.</p> + </dd> + <dt> + {{ htmlattrdef("method") }}</dt> + <dd> + El método <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616.html" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> que el navegador usa para enviar el formulario. Valores posibles son: + <ul> + <li><span style="font-family: Courier New;">post</span>: Corresponde al <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">método POST</a> HTTP ; los datos del formulario son incluidos en el cuerpo del formulario y son enviados al servidor.</li> + <li><span style="font-family: Courier New;">get</span>: Corresponde al <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">método GET</a> HTTP; los datos del formulario son adjuntados a la URI del atributo <code>action</code> , con un '?' como separador, y la URI resultante es enviada al servidor. Use este método cuando el formulario no tiene efectos secundarios y contiene solo caracteres ASCII.</li> + </ul> + <p>Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formmethod", "button") }} en un {{ HTMLElement("button") }} o elemento {{ HTMLElement("input") }}.</p> + </dd> + <dt> + {{ htmlattrdef("name") }}</dt> + <dd> + El nombre del formulario. En HTML4 ha quedado en desuso (debe usarse un <span style="font-family: Courier New;">id</span> en su lugar). Debe ser único entre los formularios en un documento y no una cadena vacia en HTML5.</dd> + <dt> + {{ htmlattrdef("novalidate") }} {{ HTMLVersionInline(5) }}</dt> + <dd> + Este atributo booleano indica que el formulario no es validado cuando es enviado. Si el atributo no existe {{ htmlattrxref("formnovalidate", "button") }} en un {{ HTMLElement("button") }} o en un elemento {{ HTMLElement("input") }} que pertenece al formulario.</dd> + <dt> + {{ htmlattrdef("target") }}</dt> + <dd> + Un nombre o keyword indicando donde mostrar la respuesta que es recibida después de enviar el formulario. En HTML 4, este es el nombre de, o una palabra clave, para un marco. En HTML5, es un nombre de, o palabra clave para, un contexto de navegación (por ejemplo, tab, window o marco en línea). Las siguientes palabras clave tienen significados especiales: + <ul> + <li><span style="font-family: Courier New;">_self</span>: Carga la respuesta dentro del mismo frame HTML 4 (o en HTML5, contexto de navegación) como el marco actual. Este valor es por defecto si el atributo no es especificado.</li> + <li><span style="font-family: Courier New;">_blank</span>: Carga la respuesta dentro de una nueva ventana sin nombre en HTML 4 o un contexto de navegación en HTML5.</li> + <li><span style="font-family: Courier New;">_parent</span>: Carga la respuesta en el marco padre del marco actual en HTML 4 o en el contexto de navegación padre del marco actual en HTML5. Si no hay marco padre, esta opción se comporta de la misma manera que <span style="font-family: Courier New;">_self</span>.</li> + <li><span style="font-family: Courier New;">_top</span>: HTML 4: Carga la respuesta en toda la ventana original, cancelando otros marcos. HTML5: Carga la respuesta en el contexto de navegación de más alto nivel (esto es, el contexto de navegación que es ancestro del actual, y no tiene padre). Si no hay padre, esta opción se comporta igual que <span style="font-family: Courier New;">_self</span>.</li> + </ul> + <p>HTML5: Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formtarget", "button") }} en un elemento {{ HTMLElement("button") }} o{{ HTMLElement("input") }}.</p> + </dd> +</dl> +<h2 id="Interfaz_DOM">Interfaz DOM</h2> +<p>Este elemento implementa la interfaz <code><a href="/es/DOM/HTMLFormElement" title="en/DOM/form">HTMLFormElement</a></code>.</p> +<h2 id="Ejemplos">Ejemplos</h2> +<pre class="brush: html"><!-- Formulario simple que enviará una petición GET --> +<form action=""> + <label for="GET-name">Nombre:</label> + <input id="GET-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Formulario simple que enviará una petición POST --> +<form action="" method="post"> + <label for="POST-name">Nombre:</label> + <input id="POST-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- Formulario con conjunto de campos, leyenda y etiqueta --> +<form action="" method="post"> + <fieldset> + <legend>Título</legend> + <input type="radio" name="radio" id="radio"> <label for="radio">Clic aquí</label> + </fieldset> +</form> +</pre> +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>atributo <code>novalidate</code></td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>atributo <code>novalidate</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<p>Notas para Google Chrome</p> +<p>La interfaz de usuario para peticiones auto-complete en Google Chrome varía dependiendo de si <code>autocomplete</code> está establecido en <code>off</code> en elementos <code>input</code> así como su formulario. Específicamente, cuando un formulario tiene <code>autocomplete</code> establecido en <code>off</code> y sus campos <code>autocomplete</code> de sus elementos input <strong>no</strong> están establecidos, entonces si el usuario pregunta por sugerencias de autocompletado para el elemento input, Chrome podrá mostrar un mensaje diciendo "El autocompletado ha sido desactivado para este formulario." Por otro lado, si el formulario y el elemento input tienen <code>autocomplete</code> establecido como <code>off</code>, el navegador no mostrará este mensaje. Por esta razón, debe establecer <code>autocomplete</code> en <code>off</code> para cada input que tiene autocompletado personalizado.</p> +<h2 id="Consulte_también">Consulte también</h2> +<p>Otros elementos que son usados para crear formularios: {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }},{{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}.</p> +<p>{{ languages( { "fr": "fr/HTML/Element/Form" } ) }}</p> diff --git a/files/es/web/html/elemento/frame/index.html b/files/es/web/html/elemento/frame/index.html new file mode 100644 index 0000000000..21df468c42 --- /dev/null +++ b/files/es/web/html/elemento/frame/index.html @@ -0,0 +1,167 @@ +--- +title: frame +slug: Web/HTML/Elemento/frame +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/frame +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>frame</strong> -<em>marcos</em> . Define la organización de los marcos dentro de la ventana del usuario.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><frame></code> (solo tiene una).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#paramarcos">para marcos</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: .</dd> + <dd><strong>Puede contener</strong>: Nada.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-longdesc-FRAME"><span style="color: green;">longdesc </span></a></td> + <td>Permite especificar un enlace a una descripción detallada del marco. Inportante para la <a href="es/Accesibilidad">accesibilidad</a>.</td> + <td>Una dirección <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.4">URI</a>. Por defecto: lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-name-FRAME"><span style="color: green;">name </span></a></td> + <td>Especifica un nombre para el marco, Esto permite usarlo <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#h-16.3">como destino</a> de los enlaces.</td> + <td>. Por defecto: . lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-src-FRAME"><span style="color: green;">src </span></a></td> + <td>Especifica la localización de los contenidos iniciales del marco.</td> + <td>Una dirección <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.4">URI</a>. Por defecto: lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-frameborder"><span style="color: green;">frameborder </span></a></td> + <td>Indica si el marco tendrá o no borde.</td> + <td>Uno de los siguientes: '1' o '0'. Por defecto: '1'.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-marginwidth"><span style="color: green;">marginwidth </span></a></td> + <td>Indica el margen izquierdo y derecho entre contenido y borde.</td> + <td>Una cantidad de píxeles (cero o más). Por defecto: lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-marginheight"><span style="color: green;">marginheight </span></a></td> + <td>Indica el margen superior e inferior entre contenido y borde.</td> + <td>Una cantidad de píxeles (cero o más). Por defecto: lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-noresize"><span style="color: green;">noresize </span></a></td> + <td>Hace que la ventana del marco no sea redimensionable.</td> + <td>'noresize'. Por defecto: lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-scrolling"><span style="color: green;">scrolling </span></a></td> + <td>Indica si el marco debe tener o no barra de desplazamiento (scroll).</td> + <td>Uno de los sigientes: 'yes', 'no', o 'auto'. Por defecto: 'auto'.</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Un_documento_con_marcos" name="Un_documento_con_marcos">Un documento con marcos</h4> + +<p>código:</p> + +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" + "<a class="external" href="http://www.w3.org/TR/html4/frameset.dtd" rel="freelink">http://www.w3.org/TR/html4/frameset.dtd</a>"> +<html> +<head> +<title>Un documento simple con marcos</title> +</head> +<frameset rows="20%,80%"> + <frameset cols="20%, 80%"> + <<strong>frame</strong> src="<a class="external" href="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png" rel="freelink">http://developer.mozilla.org/wiki-im...irefoxlogo.png</a>"> + <<strong>frame</strong> src="<a class="external" href="http://html.conclase.net/w3c/html401-es/sgml/loosedtd.html#frame" rel="freelink">http://html.conclase.net/w3c/html401...dtd.html#frame</a>"> + </frameset> + <<strong>frame</strong> src="<a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAME" rel="freelink">http://html.conclase.net/w3c/html401...tml#edef-FRAME</a>"> +</frameset> +</html> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAME"><strong>frame</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-frame">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/frameset/index.html b/files/es/web/html/elemento/frameset/index.html new file mode 100644 index 0000000000..cf90335bc6 --- /dev/null +++ b/files/es/web/html/elemento/frameset/index.html @@ -0,0 +1,157 @@ +--- +title: frameset +slug: Web/HTML/Elemento/frameset +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/frameset +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>frameset</strong> -<em>conjunto de marcos</em> . Define la organización de los marcos dentro de la ventana del usuario.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><frameset></code> y <code></frameset></code> (ambas obligatorias).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#paramarcos">para marcos</a>. + <dl> + <dd>Con un doctype para marcos está definido como contenido de html.</dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: .</dd> + <dd><strong>Puede y debe contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/frameset">frameset</a> y <a href="es/HTML/Elemento/frame">frame</a>. además puede contener un elemento <a href="es/HTML/Elemento/noframes">noframes</a>.</dd> + <dd><strong>Debe ser contenido por</strong>: Elementos <a href="es/HTML/Elemento/html">html</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-rows-FRAMESET"><span style="color: green;">rows </span></a></td> + <td>Asigna la disposición horizontal de los marcos.</td> + <td>Lista de <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.6">longitudes</a> separadas por coma, pueden espresarse en píxeles, porcentajes o de forma relativa. Por defecto: 100% (una fila), lo fija el navegador..</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#adef-cols-FRAMESET"><span style="color: green;">cols </span></a></td> + <td>Asigna la disposición horizontal de los marcos.</td> + <td>Lista de <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#h-6.6">longitudes</a> separadas por coma, pueden espresarse en píxeles, porcentajes o de forma relativa. Por defecto: 100% (una columna). lo fija el navegador.</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Un_documento_con_marcos" name="Un_documento_con_marcos">Un documento con marcos</h4> + +<p>código:</p> + +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" + "<a class="external" href="http://www.w3.org/TR/html4/frameset.dtd" rel="freelink">http://www.w3.org/TR/html4/frameset.dtd</a>"> +<html> +<head> +<title>Un documento simple con marcos</title> +</head> +<<strong>frameset</strong> rows="20%,80%"> + <<strong>frameset</strong> cols="20%, 80%"> + <frame src="<a class="external" href="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png" rel="freelink">http://developer.mozilla.org/wiki-im...irefoxlogo.png</a>"> + <frame src="<a class="external" href="http://html.conclase.net/w3c/html401-es/sgml/loosedtd.html#frameset" rel="freelink">http://html.conclase.net/w3c/html401....html#frameset</a>"> + </<strong>frameset</strong>> + <frame src="<a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAMESET" rel="freelink">http://html.conclase.net/w3c/html401...#edef-FRAMESET</a>"> + <noframes> + <p> este documento contiene los siguientes recursos: </p> + <ul> + <li> <img src="<a class="external" href="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png" rel="freelink">http://developer.mozilla.org/wiki-im...irefoxlogo.png</a>" alt="el logo de Firefox"> + </li> + <li> La definición de frameset en el + <a href="<a class="external" href="http://html.conclase.net/w3c/html401-es/sgml/loosedtd.html#frameset" rel="freelink">http://html.conclase.net/w3c/html401....html#frameset</a>"> + dtd de html 4.01 trans.</a> + </li> + <li> La definición de frameset en la + <a href="<a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAMESET" rel="freelink">http://html.conclase.net/w3c/html401...#edef-FRAMESET</a>"> + especificación de html 4.01</a> + </li> + </ul> + </noframes> +</<strong>frameset</strong>> +</html> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-FRAMESET"><strong>frameset</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-frameset">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/head/index.html b/files/es/web/html/elemento/head/index.html new file mode 100644 index 0000000000..e0e6e13fe1 --- /dev/null +++ b/files/es/web/html/elemento/head/index.html @@ -0,0 +1,147 @@ +--- +title: head +slug: Web/HTML/Elemento/head +tags: + - HTML + - 'HTML:Elemento' + - Metadatos de documento HTML + - Todas_las_Categorías +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p>El <strong>elemento HTML <code><head></code></strong> provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td>Ninguna.</td> + </tr> + <tr> + <th>Contenido permitido</th> + <td>Si el elemento es un {{htmlattrxref("srcdoc", "iframe")}} de un {{HTMLElement("iframe")}} , o si la información de título está disponible desde un protocolo de nivel superior, cero o más elementos de metadatos.<br> + De otro modo, uno o más elementos de metadatos donde exactamente uno es {{HTMLElement("title")}}.</td> + </tr> + <tr> + <th>Omisión de etiqueta</th> + <td>La etiqueta de inicio puede ser omitida si lo primero dentro del elemento head es un elemento.<br> + La etiqueta de cierre puede ser omitida si lo primero después del elemento head no es un espacio o un comentario.</td> + </tr> + <tr> + <th>Elementos padre permitidos</th> + <td>Un elemento {{HTMLElement("html")}}, pues éste es su primer hijo.</td> + </tr> + <tr> + <th>Interfaz DOM</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Global_attributes">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> + <dd>Los URIs de uno o más perfiles de metadatos, separados por un espacio en blanco.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><html> + <head> + <title>Document title</title> + </head> +</html> +</pre> + +<h2 id="Notas">Notas</h2> + +<p>Navegadores modernos que cumplen con el estándar HTML5 construyen automáticamente un elemento <code><head></code> si las etiquetas son omitidas en el código. <a class="external" href="http://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Este comportamiento no puede ser garantizado en navegadores antiguos</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambios desde la última versión</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Atributo <code>profile</code> obsoleto</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>Elementos que pueden ser usados dentro de un elemento <code><head>:</code> {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}</li> +</ul> diff --git a/files/es/web/html/elemento/header/index.html b/files/es/web/html/elemento/header/index.html new file mode 100644 index 0000000000..f4bdcd9a75 --- /dev/null +++ b/files/es/web/html/elemento/header/index.html @@ -0,0 +1,74 @@ +--- +title: header +slug: Web/HTML/Elemento/header +tags: + - HTML5 + - header + - para_revisar +translation_of: Web/HTML/Element/header +--- +<p>El <em>elemento de HTML Header</em> (<span style="font-family: Courier New;"><header></span>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.</p> + +<div class="note"> +<p><strong>Nota de uso:</strong></p> + +<ul> + <li>El elemento <span style="font-family: Courier New;"><header></span> no es contenido de sección y, por lo tanto, no introduce una nueva sección en <a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">descripción</a>.</li> +</ul> +</div> + +<h3 id="Contexto_de_uso">Contexto de uso</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td>Contenido permitido</td> + <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">Contenido dinámico</a>, pero sin un <span style="font-family: Courier New;"><header></span> o {{ HTMLElement("footer") }} descendente</td> + </tr> + <tr> + <td>Omisión de la etiqueta</td> + <td>No está permitido, tanto la <span title="syntax-start-tag">etiqueta de inicio</span> como la de <span title="syntax-end-tag">final</span> son obligatorias</td> + </tr> + <tr> + <td> + <p>Elementos padres permitidos</p> + + <p>Roles ARIA permitidos</p> + + <p>Inreface DOM</p> + </td> + <td> + <p>Cualquier elemento que acepte <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a>. Ten en cuenta que un elemento <code><header></code> no debe ser descendiente de un elemento {{ HTMLElement("address") }}, {{ HTMLElement("footer") }} o cualquier otro elemento {{ HTMLElement("header") }}.</p> + + <p>{{ARIARole("group")}}, {{ARIARole("presentation")}}</p> + + <p>{{domxref("HTMLElement")}}</p> + </td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element">HTML5, sección 4.4.8</a></td> + </tr> + </tbody> +</table> + +<h3 id="Atributos">Atributos</h3> + +<p>Este elemento no tiene otros atributos que no sean los <a class="new " href="../../../../en/HTML/global_attributes" rel="internal">atributos generales</a>, comunes a todos los elementos.</p> + +<div id="section_3"> +<div id="section_3"> +<h3 class="editable" id="Interfaz_DOM">Interfaz DOM</h3> + +<p>Este elemento implementa la interfaz <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p> + +<h3 id="Mira_también">Mira también</h3> + +<ul> + <li>Otros elementos relacionados con secciones: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("section") }}, {{ HTMLElement("address") }};</li> + <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li> +</ul> + +<p>{{ languages( { "en": "en/HTML/Element/header" } ) }}</p> +</div> +</div> diff --git a/files/es/web/html/elemento/hgroup/index.html b/files/es/web/html/elemento/hgroup/index.html new file mode 100644 index 0000000000..18aa804ac2 --- /dev/null +++ b/files/es/web/html/elemento/hgroup/index.html @@ -0,0 +1,120 @@ +--- +title: hgroup +slug: Web/HTML/Elemento/hgroup +translation_of: Web/HTML/Element/hgroup +--- +<h2 id="Resumen">Resumen</h2> + +<p>El <em>elemento de grupo de cabeceras HTML</em> (<span style="font-family: Courier New;"><hgroup></span>) representa el encabezado de una sección. Define un solo título que participa de <a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">la estructura del documento </a>como el encabezado de la sección implícita o explícita a la que pertenece.</p> + +<p>Su <em>text</em>o para el algoritmo de estructura es el texto del primer elemento de encabezado HTML de más alto rango (ip.ej., el primer {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }} o {{ HTMLElement("h6") }} con el número más pequeño entre sus descendientes) y el <em>rango</em> es el rango del mismo elemento de encabezado HTML.</p> + +<p>Por tanto, este elemento agrupa varios encabezados, pero solo el primero contribuye a la estructura del documento. Permite asociar títulos secundarios, como subencabezados, títulos alternativos, e incluso lemas, con el encabezado principal, sin contaminar la estructura del documento.</p> + +<p>Este elemento se fue removido de la especificacion HTML5 (W3C), por favor no usar mas.</p> + +<h3 id="Contexto_de_uso">Contexto de uso</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td>Contenido permitido</td> + <td>Cero o más elementos HTML de encabezado ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }})</td> + </tr> + <tr> + <td>Omisión de etiqueta</td> + <td>Ninguna, ambas, la etiqueta de inicio y fin son obligatorias</td> + </tr> + <tr> + <td>Elementos padre permitidos</td> + <td> + <p>Cualquier elemento que acepte <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flujo de contenido</a>.</p> + </td> + </tr> + <tr> + <td>Documento nomativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element">HTML5, section 4.4.7</a></td> + </tr> + </tbody> +</table> + +<h3 id="Atributos">Atributos</h3> + +<p>Este elemento no tiene más atributos que los <a href="/en/HTML/Global_attributes" rel="internal">atributos globales</a>, común a todos los elementos.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<div class="note"> +<p>Si bien el elemento <code><hgroup></code> se eliminó de la especificación HTML5 (W3C), todavía se mantiene en la versión WHATWG de HTML. De todos modos, está parcialmente implementado en la mayoría de los navegadores, por lo que es improbable que desaparezca.<br> + Sin embargo, dado que el propósito principal del elemento <code><hgroup></code> es afectar cómo <a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">el algoritmo de generación de esquemas de documento</a> muestra los encabezados, pero <strong>dicho algoritmo no ha sido implementado por ningún navegador</strong>, la semántica de <code><hgroup></code> es por el momento solo teórica.<br> + La especificación HTML5 (W3C) aconseja entonces cómo maquetar <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">subtítulos, títulos alternativos y lemas</a> sin utilizar <code><hgroup></code>.</p> +</div> + +<h3 class="editable" id="Interfaz_DOM">Interfaz DOM</h3> + +<p>Este elemento implementa la interfaz<code> <a href="/es/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p> + +<h3 id="Ejemplos">Ejemplos</h3> + +<pre class="brush: html"><hgroup> + <h1>Main title</h1> + <h2>Secondary title</h2> +</hgroup> +</pre> + +<h3 id="Compatibilidad">Compatibilidad</h3> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>5</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.2</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Ver_también">Ver también</h3> + +<ul> + <li>Otros elementos relacionados a sección: {{ HTMLElement("body") }}, {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};</li> + <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Secciones y estructuras de un documento HTML5</a>.</li> +</ul> diff --git a/files/es/web/html/elemento/hr/index.html b/files/es/web/html/elemento/hr/index.html new file mode 100644 index 0000000000..22b569e245 --- /dev/null +++ b/files/es/web/html/elemento/hr/index.html @@ -0,0 +1,156 @@ +--- +title: <hr> +slug: Web/HTML/Elemento/hr +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/hr +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><span class="comment">descripción de uno o dos párrafos</span>El <strong>elemento HTML <hr> </strong>representa un cambio de tema entre párrafos (por ejemplo, un cambio de escena en una historia, un cambio de tema en una sección). En versiones previas de HTML representaba una línea horizontal. Aún puede ser representada como una línea horizontal en los navegadores visuales, pero ahora es definida en términos semánticos y no tanto en términos representativos, por tanto para dibujar una línea horizontal se debería usar el CSS apropiado.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><hr/></code> (solo tiene una).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Nada, es un "elemento vacío" del un Glosario.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">Valor</th> + <th>Descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title </code></td> + <td>Texto</td> + <td>Implícito</td> + <td>Título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style </code></td> + <td>Declaraciones de estilo</td> + <td>Implícito</td> + <td>Información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id </code></td> + <td>Un 'nombre'</td> + <td>Implícito</td> + <td>Identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class </code></td> + <td>Lista de clases CSS</td> + <td>implícito</td> + <td>Identificador a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">dir </code></td> + <td>Uno de los siguientes: <code>"ltr"</code> o <code>"rtl"</code></td> + <td>Implícito</td> + <td>Dirección del texto.</td> + </tr> + <tr> + <td><code style="color: green;">lang </code></td> + <td>Código de idioma</td> + <td>Implícito</td> + <td>Información sobre el idioma.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td><code style="color: green;">align </code></td> + <td>uno de los siguientes: <code>"left", "center", "right".</code></td> + <td>Implícito. Por defecto: <code>"center"</code></td> + <td>Indica la alineación horizontal.</td> + </tr> + <tr> + <td><code style="color: green;">noshade </code></td> + <td><code>"noshade"</code></td> + <td>Implícito</td> + <td>Elimina el relieve.</td> + </tr> + <tr> + <td><code style="color: green;">size </code></td> + <td>Una cantidad, de píxeles</td> + <td>Implícito</td> + <td>Indica la altura de la linea.</td> + </tr> + <tr> + <td><code style="color: green;">width </code></td> + <td>Una cantidad, de píxeles, o un porcentaje.</td> + <td>Implícito. por defecto: 100%</td> + <td>Indica la anchura.</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">Valor</th> + <th>Descripción</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"> <p>Este es un parrafo unicamente visual para ver el uso de + la etiqueta hr</p> + <hr/> + <p>Este es el segundo parrafo, separado del primero por la etiqueta hr, que puede +representarse mediante una línea horizontal.</p> +</pre> + +<h3 id="Muestra">Muestra</h3> + +<p>Este es un parrafo unicamente visual para ver el uso de la etiqueta hr</p> + +<hr> +<p>Este es el segundo parrafo, separado del primero por una linea horizontal</p> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p> </p> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/graphics.html#edef-HR"><strong>hr</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p><span class="comment">secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==</span></p> + +<div class="note"> +<p>Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en la elaboración de este documento? Para saber como hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p> </p> diff --git a/files/es/web/html/elemento/html/index.html b/files/es/web/html/elemento/html/index.html new file mode 100644 index 0000000000..48fd5f469e --- /dev/null +++ b/files/es/web/html/elemento/html/index.html @@ -0,0 +1,176 @@ +--- +title: <html> +slug: Web/HTML/Elemento/html +tags: + - Element + - Elemento + - HTML + - HTML Root Element + - HTML elemento raiz + - 'HTML:Elemento' + - Reference + - Referencia + - Todas_las_Categorías + - Web +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p>El <strong>elemento HTML <code><html></code></strong> (o <em>elemento HTML raiz</em>) representa la raiz de un documento HTML. El resto de elementos descienden de este elemento.</p> + +<p>Dado que el elemento <code><html></code> es el primero en un documento, aparte de los comentarios, se llama el elemento raíz. A pesar de que esta etiqueta puede ser implicita, o no requerida en {{glossary("HTML")}}, sí es requerida para abrir y cerrar en {{glossary("XHTML")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de Contenido</a></th> + <td>Ninguna.</td> + </tr> + <tr> + <th>Contenido permitido</th> + <td>Un elemento {{HTMLElement("head")}} seguido de un elemento {{HTMLElement("body")}}.</td> + </tr> + <tr> + <th>Omisión de etiqueta</th> + <td> + <p>La etiqueta de inicio puede omitirse si lo primero que hay en el interior del elemento <html> no es un comentario.<br> + La etiqueta final puede omitirse si el elemento <html> no está inmediatamente seguido por un comentario y contiene un elemento {{HTMLElement("body")}}, o bien que no esté vacío, o cuya etiqueta de inicio está presente.</p> + </td> + </tr> + <tr> + <th>Elementos padres permitidos</th> + <td>Como elemento raiz de un documento, o donde se permite un fragmento de subdocumento en un documento compuesto.</td> + </tr> + <tr> + <th>Interfaz DOM</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento incluye los </span><a href="/es/docs/Web/HTML/Atributos_Globales" style="line-height: 21px;" title="HTML/Global attributes">atributos globales</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>Especifica la dirección URL de un manifiesto de recursos que indica los recursos que deben ser almacenados en la caché local. Consulte <a href="https://developer.mozilla.org/es/docs/Web/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Uso de la cache de la aplicación</a> para obtener más información.</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>Especifica la versión {{glossary("DTD", "Document Type Definition")}} de HTML del documento actual. Este atributo no es necesario, porque es redundante con la información de versión en la declaración de tipo de documento.</dd> + <dt>{{htmlattrdef("xmlns")}} </dt> + <dd>Especifica el Espacio de nombres XML del documento. El valor por defecto es <code>"http://www.w3.org/1999/xhtml"</code>. En XHTML es requerido y en HTML es opcional.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>El DOCTYPE usado en el siguiente ejemplo indica que es un documento HTML5.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambios desde la última instantánea.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Añadido soporte para el atributo <code>manifest</code> (en desuso después).<br> + El Atributo <code>version</code> es obsoleto.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>El Atributo <code>version</code> está en desuso</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>MathML top-level element: {{MathMLElement("math")}}</li> + <li>SVG top-level element: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/es/web/html/elemento/i/index.html b/files/es/web/html/elemento/i/index.html new file mode 100644 index 0000000000..e3b318e367 --- /dev/null +++ b/files/es/web/html/elemento/i/index.html @@ -0,0 +1,112 @@ +--- +title: i +slug: Web/HTML/Elemento/i +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/i +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Muestra el texto marcado con un estilo en cursiva o italica.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <i> y </i> (Ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">Elemento de estilo de fuente</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>lista de clases separadas por espacios en blanco.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"> <p> + Texto normal y... <i>Texto 'inclinado'</i> + </p> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> diff --git a/files/es/web/html/elemento/iframe/index.html b/files/es/web/html/elemento/iframe/index.html new file mode 100644 index 0000000000..23d58f54e8 --- /dev/null +++ b/files/es/web/html/elemento/iframe/index.html @@ -0,0 +1,304 @@ +--- +title: '<iframe>: el elemento Inline Frame' +slug: Web/HTML/Elemento/iframe +tags: + - Contenido + - Contenido incrustado + - Elemento + - Embebido + - HTML + - Incrustado + - Marcos + - Web + - iframe +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p class="seoSummary">El <strong>elemento HTML <code><iframe></code></strong> (de inline frame) representa un {{Glossary("contexto de navegación")}} anidado, el cual permite incrustrar otra página HTML en la página actual.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> + +<p>Cada elemento <code><iframe></code> tiene su propio <a href="/es/docs/Web/API/History">historial de sesión</a> y su propio objeto <a href="/es/docs/Web/API/Document">Documento</a>. El contexto de navegación que incluye el contenido implícito se llama <em>contexto de navegación principal</em>. El contexto de navegación de nivel superior (que no tiene padre) es típicamente la ventana del navegador, representado por el objeto {{domxref("Window")}}.</p> + +<div class="blockIndicator warning"> +<p>Debido a que cada contexto de navegación es un entorno de documento completo, cada <code><iframe></code> en una página requiere más memoria y otros recursos informáticos. Aunque teóricamente puede utilizar tantos <code><iframe></code> como desee, compruebe si hay problemas de rendimiento.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenidos</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual o estático</a>, contenido incrustado, contenido interactivo, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_tangible">contenido tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Contenido alternativo que normalmente no se renderiza para los navegadores que no son compatibles con el elemento <code><iframe></code>.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padres permitidos</th> + <td>Cualquier elemento que acepte contenido incrustado.</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td> + </tr> + <tr> + <th scope="row">Interfaz DOM </th> + <td>{{domxref("HTMLIFrameElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento admite <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<ul> + <li>En el atributo <code>target</code> de los elementos {{HTMLElement("a")}}, {{HTMLElement("from")}} y {{HTMLElement("base")}}.</li> + <li>En el atributo <code>formtarget</code> de los elementos {{HTMLElement("input")}} y {{HTMLElement("button")}}</li> + <li>En el parámetro <code>windowName</code> en el método {{domxref("Window.open()","window.open()")}}.</li> +</ul> + +<dl> + <dt>{{htmlattrdef("allow")}}</dt> + <dd>Especifíca una <a href="/en-US/docs/Web/HTTP/Feature_Policy">política de características</a> para el <code><iframe></code>. Vea el articulo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a> para detalles en temas de seguridad y como <code><iframe></code> funciona con las Politicas de Herramientas para mantener los sistemas seguros.</dd> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>Definido como <code>true</code> si el <code><iframe></code> puede activar el modo a pantalla completa llamando al método {{domxref("Element.requestFullscreen", "requestFullscreen()")}}.</dd> + <dd> + <div class="blockIndicator note"> + <p>Se considera un atributo heredado y se redefine como <code>allow="fullscreen"</code>.</p> + </div> + </dd> + <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> + <dd>Definido como <code>true</code> si se debe permitir que un <code><iframe></code> de origen cruzado pueda invocar el <a href="/en-US/docs/Web/API/Payment_Request_API">API de solicitud de pago</a>. </dd> + <dd> + <div class="blockIndicator note"> + <p>Se considera un atributo heredado y se redefine como <code>allow="payment"</code>.</p> + </div> + </dd> + <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> + <dd>Una <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Politica de Seguridad del Contenido</a> aplicada para el recurso incrustado. Vea {{domxref("HTMLIFrameElement.csp")}} para detalles.</dd> + <dt>{{ htmlattrdef("height") }}</dt> + <dd>Indica la altura del frame {{ HTMLVersionInline(5) }}en píxeles CSS, o {{ HTMLVersionInline(4.01) }} en píxeles o como un porcentaje.</dd> + <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> + <dd>La prioridad de descarga en el recurso para el atributo <code>src</code> del <code><iframe></code>. Valores permitidos: + <ul> + <li><code>auto</code>: (default) Sin preferencia. El buscador utiliza sus propias heurísticas para decidir la prioridad del recurso.</li> + <li><code>high</code>: El recurso debe ser descargado antes que otros recursos de baja-prioridad de los recursos de la página.</li> + <li><code>low</code>: El recurso debe ser descargado después de otros recursos de alta-prioridad de los recursos de la página.</li> + </ul> + + <dl> + </dl> + </dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>Nombre objetivo para el contexto de navegación incrustado. Se puede utilizar: + <ul> + <li>En el atributo target de los elementos {{HTMLElement("a")}}, {{HTMLElement("from")}} y {{HTMLElement("base")}}.</li> + <li>En el atributo formtarget de los elementos {{HTMLElement("input")}} y {{HTMLElement("button")}}</li> + <li>En el parámetro windowName en el método {{domxref("Window.open()","window.open()")}}.</li> + </ul> + </dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>Indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the frame's resource: + <ul> + <li><code>no-referrer</code>: The {{HTTPHeader("Referer")}} header will not be sent.</li> + <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li> + <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li> + <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> + <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li> + <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> + <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> + </ul> + </dd> + <dd> + <ul> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}}</dt> + <dd>Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions: + <ul> + <li><code>allow-forms</code>: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.</li> + <li><code>allow-modals</code>: Lets the resource <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">open modal windows</a>.</li> + <li><code>allow-orientation-lock</code>: Lets the resource <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li> + <li><code>allow-pointer-lock</code>: Lets the resource use the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li> + <li><code>allow-popups</code>: Allows popups (such as <code>window.open()</code>, <code>target="_blank"</code>, or <code>showModalDialog()</code>). If this keyword is not used, the popup will silently fail to open.</li> + <li><code>allow-popups-to-escape-sandbox</code>: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.</li> + <li><code>allow-presentation</code>: Lets the resource start a <a href="https://developer.mozilla.org/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li> + <li><code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the {{Glossary("same-origin policy")}}.</li> + <li><code>allow-scripts</code>: Lets the resource run scripts (but not create popup windows).</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Lets the resource request access to the parent's storage capabilities with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li> + <li><code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li> + <li><code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li> + </ul> + + <div class="note"><strong>Notes about sandboxing:</strong> + + <ul> + <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li> + <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li> + <li>The <code>sandbox</code> attribute is unsupported in Internet Explorer 9 and earlier.</li> + </ul> + </div> + </dd> + <dt>{{ htmlattrdef("seamless") }} </dt> + <dd>This Boolean attribute indicates that the browser should render the inline frame in a way that makes it appear to be part of the containing document, for example by applying CSS styles that apply to the <code><iframe></code> to the contained document before styles specified in that document, and by opening links in the contained documents in the parent browsing context (unless another setting prevents this).</dd> + <dt>{{ htmlattrdef("src") }}</dt> + <dd>The URL of the page to embed.</dd> + <dt>{{ htmlattrdef("srcdoc") }} </dt> + <dd>The content of the page that the embedded context is to contain.</dd> + <dt>{{ htmlattrdef("width") }}</dt> + <dd>Indicates the width of the frame {{ HTMLVersionInline(5) }} in CSS pixels, or {{ HTMLVersionInline(4.01) }} in pixels or as a percentage.</dd> +</dl> + +<h3 id="Atributos_obsoletos">Atributos obsoletos</h3> + +<p>Estos atributos están obsoletos y es posible que ya no sean compatibles con todos los agentes de usuario. No debe utilizarlos en contenido nuevo y tratar de eliminarlos del contenido existente.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> + <dd><span id="result_box" lang="es"><span class="hps">La alineación</span> <span class="hps">de este elemento</span> <span class="hps">con respecto al</span> <span class="hps">contexto que lo rodea.</span></span></dd> + <dt>{{ htmlattrdef("frameborder") }} {{ obsolete_inline("html5")}} </dt> + <dd>El valor 1 (por defecto) indica al navegador establecer una frontera entre este marco y todo otro marco. <span class="long_text" id="result_box" lang="es"><span class="gt-trans-draggable hps">El valor 0</span> <span class="gt-trans-draggable hps">indica</span> <span class="gt-trans-draggable hps">que el navegador no</span> establece<span class="gt-trans-draggable hps"> una</span> <span class="gt-trans-draggable hps">frontera</span> <span class="gt-trans-draggable hps">entre este marco y</span> <span class="gt-trans-draggable hps">otros marcos.</span></span></dd> + <dt>{{ htmlattrdef("longdesc") }} {{ obsolete_inline("html5")}} </dt> + <dd>Una URI de una descripción larga del marco. Debido al mal uso generalizado, esto no es útil para navegadores no visuales.</dd> + <dt>{{ htmlattrdef("marginheight") }} {{ obsolete_inline("html5") }} </dt> + <dd>La cantidad de espacio en píxeles entre el contenido del marco y sus márgenes superior e inferior.</dd> + <dt>{{ htmlattrdef("marginwidth") }} {{ obsolete_inline("html5") }} </dt> + <dd>La cantidad de espacio en píxeles entre el contenido del marco y sus márgenes izquierdo y derecho.</dd> + <dt>{{ htmlattrdef("scrolling") }} {{ obsolete_inline("html5") }} </dt> + <dd>Indica cuándo el navegador debe proporcionar una barra de desplazamiento para el marco: + <ul> + <li><code>auto</code>: Sólo cuando el contenido del marco es mayor que sus dimensiones.</li> + <li><code>yes</code>: Muestra siempre una barra de desplazamiento.</li> + <li><code>no</code>: No muestr la barra de desplazamiento nunca.</li> + </ul> + </dd> +</dl> + +<h3 id="Atributos_no_estándar">Atributos no estándar</h3> + +<dl> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd> + <div class="blockIndicator note"> + <p>See {{bug(1318532)}} for exposing this to WebExtensions in Firefox.</p> + </div> + Makes the <code><iframe></code> act like a top-level browser window. See <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> for details.<br> + <strong>Available only to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> + <dt>{{ htmlattrdef("mozallowfullscreen") }} {{ non-standard_inline() }}</dt> + <dd>In Gecko 9.0 or later, this attribute can be set to <code>true</code> if the frame is allowed to be placed into full screen mode by calling its {{ domxref("element.mozRequestFullScreen()") }} method. If this isn't set, the element can't be placed into full screen mode.</dd> + <dt>{{ htmlattrdef("webkitallowfullscreen") }} {{ non-standard_inline() }}</dt> + <dd>In Chrome 17 or later (and maybe earlier), this attribute can be set to <code>true</code> if the frame is allowed to be placed into full screen mode by calling its {{ domxref("element.webkitRequestFullScreen()") }} method. If this isn't set, the element can't be placed into full screen mode.</dd> + <dt>{{ htmlattrdef("mozapp") }} {{ non-standard_inline() }}</dt> + <dd>For frames hosting an <a href="/en/Apps" title="https://developer.mozilla.org/en/OpenWebApps">open web app</a>, this specifies the URL of the <a href="/en/Apps/Manifest" title="https://developer.mozilla.org/en/Apps/Manifest">app manifest</a>. This ensures that the app is loaded with the right permissions. See <a href="/en/DOM/Using_the_Browser_API" title="https://developer.mozilla.org/en/DOM/Using_the_Browser_API">Using the Browser API</a> for details. Available in Gecko 13.0 and later.</dd> + <dt>{{ htmlattrdef("remote") }} {{ non-standard_inline() }}</dt> + <dd>Load the frame's page in a separate content process.</dd> +</dl> + +<h2 id="Secuencia_de_comandos">Secuencia de comandos</h2> + +<p>Inline frames, like {{HTMLElement("frame")}} elements, are included in the {{domxref("window.frames")}} pseudo-array.</p> + +<p>With the DOM {{domxref("HTMLIFrameElement")}} object, scripts can access the {{domxref("window")}} object of the framed resource via the {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} property. The {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} property refers to the <code>document</code> inside the <code><iframe></code>, same as <code>contentWindow.document</code>.</p> + +<p>From the inside of a frame, a script can get a reference to its parent window with {{domxref("window.parent")}}.</p> + +<p>Script access to a frame's content is subject to the {{Glossary("same-origin policy")}}. Scripts cannot access most properties in other <code>window</code> objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using {{domxref("Window.postMessage()")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Example1" name="Example1">Un <iframe> simple</h3> + +<p>Un <code><iframe></code> en acción. Después de crear el marco, cuando el usuario hace clic en un botón, su título se muestra en una alerta.</p> + +<h4 id="HTML">HTML</h4> + +<pre><code><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe Example 1" width="400" height="300"> + <p>Your browser does not support iframes.</p> +</iframe></code></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{ EmbedLiveSample('Example1', 640,400)}}</p> + +<h3 id="Example2" name="Example2">Abrir un enlace en un <iframe> en otra pestaña</h3> + +<p>En este ejemplo, se muestra un mapa de Google en un marco.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre><code><iframe id="Example2" + title="iframe Example 2" + width="400" height="300" + style="border:none" + src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"> +</iframe></code></pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{ EmbedLiveSample('Example2', 640, 400)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Screen Orientation')}}</td> + <td>{{Spec2('Screen Orientation')}}</td> + <td>Adds <code>allow-orientation-lock</code> to the <code>sandbox</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td> + <td>{{Spec2('Presentation')}}</td> + <td>Adds <code>allow-presentation</code> to the <code>sandbox</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="Notes">Notes</h2> + +<div class="geckoVersionNote"> +<p>{{ gecko_callout_heading("6.0") }}</p> + +<p>Starting in Gecko 6.0 {{ geckoRelease("6.0") }}, rendering of inline frames correctly respects the borders of their containing element when they're rounded using {{ cssxref("border-radius") }}.</p> +</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.iframe", 3)}}</p> diff --git a/files/es/web/html/elemento/image/index.html b/files/es/web/html/elemento/image/index.html new file mode 100644 index 0000000000..e48d44488f --- /dev/null +++ b/files/es/web/html/elemento/image/index.html @@ -0,0 +1,18 @@ +--- +title: <image> +slug: Web/HTML/Elemento/image +tags: + - HTML +translation_of: Web/HTML/Element/image +--- +<div>{{non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El elemento HTML <font face="Consolas, Liberation Mono, Courier, monospace"><code><image></code> fue </font>un elemento experimental diseñado para mostrar imágenes . Nuca fue implementado y el elemento estándar {{HTMLElement("img")}} debe de ser usado .</p> + +<div class="note"> +<p><strong>No usar esto ! </strong>Para mostrar imagenes , usar el elemento estándar {{HTMLElement("img")}} .</p> +</div> + +<p>Notar que hasta Firefox 22 , aunque no era soportado , un elemento <code><image></code> era asociado a un {{domxref("HTMLSpanElement")}} . Después fue arreglado y ahora es asociado a {{domxref("HTMLElement")}} , como es solicitado por la especificación .</p> diff --git a/files/es/web/html/elemento/img/index.html b/files/es/web/html/elemento/img/index.html new file mode 100644 index 0000000000..6345af1848 --- /dev/null +++ b/files/es/web/html/elemento/img/index.html @@ -0,0 +1,339 @@ +--- +title: img +slug: Web/HTML/Elemento/img +tags: + - Contenido + - Elemento + - HTML + - Incrustado +translation_of: Web/HTML/Element/img +--- +<p>El elemento de imagen HTML <span class="seoSummary"><code><strong><img></strong></code></span> representa una imagen en el documento.</p> + +<div class="note"> +<p><strong>Nota:</strong><br> + 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), sí el usuario elige no mostrar la imagen, o sí el navegador es incapaz de mostrarla porque no es válida o <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/img#Supported_image_formats">soportada</a>. En ese caso, el navegador la reemplazará con el texto definido en el atributo {{htmlattrdef("alt", "img")}}.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories">Cotenido de las categorias</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">Contenido dinámico</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">contenido estático</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Embedded_content">contenido incrustado</a>, contenido palpable. Si el elemento tiene un atributo {{htmlattrdef("usemap", "img")}}, it also is a part of the interactive content category.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno, es {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>Debe tener etiqueta de de inicio pero no tiene por qué haber de cierre.</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte contenido incrustado.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLImageElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye atributos globales.</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}} Use the {{cssxref('vertical-align')}} CSS property</dt> + <dd>Alineamiento de la texto respecto al contexto que la rodea.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>Este atributo define el texto alternativo que describe la imagen, texto que los usuarios verán si la URL de la imagen es errónea o la imagen tiene un <a href="/es/docs/Web/HTML/Elemento/img$edit#Supported_image_formats">formato no soportado</a> o si la imagen aún no se ha descargado.</dd> + <dt> + <div class="note"> + <p><strong>Nota: </strong>Omitir este atributo indica que la imagen es una parte clave del contenido, y no tiene equivalencia textual. Establecer este atributo como cadena vacía indica que la imagen no es una parte clave del contenido; los navegadores no gráficos pueden omitirlo.</p> + </div> + </dt> + <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Anchura del borde alrededor de la imagen.</dd> + <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt> + <dd>Este atributo enumerado indica si la búsqueda de la imagen debe ser por CORS o no. <a href="https://developer.mozilla.org/es/docs/Web/HTML/Imagen_con_CORS_habilitado">Imagen hablidata CORS</a> puede ser usada en el elemento {{HTMLElement("canvas")}} sin ser pintada. Los valores permitidos son: + <dl> + <dt><code>"anonymous"</code></dt> + <dd>Una petición cross-origin (i.e., with <code>Origin:</code> HTTP header) es realizada. Sin embargo, no fueron enviadas credenciales "<em>(i.e., no cookie, no X.509 certificate, and no HTTP Basic authentication is sent)</em>". Sí el servidor no emite credenciales al sitio de origen (no ajustando el <code>Access-Control-Allow-Origin:</code> HTTP header), la imagen será pintada y su uso restringido.</dd> + <dt><code>"use-credentials"</code></dt> + <dd>Una petición cross-origin (i.e., with <code>Origin:</code> HTTP header) es realizada con credenciales (i.e., a cookie, a certificate, and HTTP Basic authentication is performed). Sí el servidor no emite credenciales al sitio de origen (a través del <code>Access-Control-Allow-Credentials:</code> HTTP header), la imagen será pintada y su uso restringido.</dd> + </dl> + + <p>Cuando no existe, el recurso es buscado sin petición CORS (i.e., <code>sin enviar el Origen:</code> HTTP header) , previniendo el uso no pintado del elemento {{HTMLElement('canvas')}}. Si es inválido, se maneja como si se hubiese usado <strong>anonymous</strong>. Ver <a href="https://developer.mozilla.org/es/docs/HTML/CORS_settings_attributes">atributos de configuración CORS</a> para más información.</p> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>La altura de la imagen en píxeles CSS {{HTMLVersionInline(5)}} o píxeles o como porcentaje en {{HTMLVersionInline(4)}}.</dd> + <dt>{{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>El número de píxeles de espaciado a la izquierda y la derecha de la imagen.</dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd>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. + <div class="note"> + <p><strong>Nota: </strong>Este atributo está permitido solo si el elemento<code> <img></code> es descendiente de un elemento {{htmlelement("a")}} con un atributo {{htmlattrxref("href","a")}} válido.</p> + </div> + </dd> + <dt>{{htmlattrdef("longdesc")}}</dt> + <dd>La URL como descripción de una imagen mostrada, complementa al texto de {{htmlattrdef("alt", "img")}}.</dd> + <dt>{{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>El nombre para el elemento. Soportado en {{HTMLVersionInline(4)}} solo para compatibilidad con versiones anteriores. En su lugar, usa el atributo <code><strong>id</strong></code>.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Una cadena indicando que referencia usar cuando buscas un recurso: + <ul> + <li><code>"no-referrer"</code>: la cabecera no se envia.</li> + <li>"<code>no-referrer-when-downgrade</code>": la cabecera no será enviada cuando navegas hacia un origen sin TLS (HTTPS). <span id="result_box" lang="es"><span class="hps">E</span>s<span class="hps"> el comportamiento</span> <span class="hps">predeterminado</span><span class="hps">, si no se especifica en ninguna política.</span></span></li> + <li><code>"origin"</code>: el referente será el origen de la página; lo que sería el esquema, el anfitrión (host) y el puerto.</li> + <li>"origin-when-cross-origin": navega hacia otro origen limitado por el esquema, el anfitrión y el puerto, mientras navegas en el mismo origen incluirá el camino del referente.</li> + <li><code>"unsafe-url"</code>: el referente incluirá el origen y el camino (pero no el fragment, contraseña, o nombre de usuario). Este caso es arriegasdo porque puede haber una fuga del origen o el camino desde los recursos protegidos por TLS desde orígenes inseguros.</li> + </ul> + </dd> + <dt>{{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}</dt> + <dd>Una lista de una o más cadenas separadas por comas indicando el tamaño de la fuente. Cada tamaño de la fuente consiste en: + <ol> + <li>Codición de medios. Debe omitirse en el último ítem.</li> + <li>Valor del tamaño.</li> + </ol> + + <p>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 <code>srcset</code>, cuando esas fuentes son descritas usando el ancho (width). El tamaño de la fuente afecta al tamaño de la imagen (la imagen muestra tamaño si no se aplican estilos CSS). Si no hay atributo <code>srcset</code>, o no contiene valores con el ancho definido, entonces el atributo sizes no funciona.</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>La URL de la imagen. Este atributo es obligatorio para el elemento <img>. En navegadores que soportan <code>srcset</code>, <code>src</code> es tratado como imagen candidata con una densidad del píxel <code>1x</code> sino una imagen estará definida en <code>srcset</code> o <code>srcset</code> contiene ancho.</dd> + <dt></dt> + <dt>{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}</dt> + <dd>Una lista de una o más cadenas separadas por comas indicando las posibles fuentes para usar. Cada cadena está compuesta por: + <ol> + <li>URL de la imagen</li> + <li>Opcionalmente, espacios en blanco seguidos de: + <ul> + <li>Un ancho, que es un entero positivo seguido directamente por <code>'w'</code>. El ancho está dividido por el tamaño de la fuente dada en el atributo <code>sizes</code> para calcular la densidad del píxel.</li> + <li>Densidad del píxel, un positivo decimal seguido directamente de <code>'x'</code>.</li> + </ul> + </li> + </ol> + + <p>Si no hay descriptores especificados, la fuente es asignada por defecto a <code>1x</code>.</p> + + <p>Es inválido mezclar ancho y densidad del píxel en el mismo atributo <code>srcset</code>. Descriptores duplicados (por ejemplo, dos fuentes en el mismo <code>srcset</code> definidos ambos con '<code>2x</code>') son inválidos, también.</p> + + <p>Los agentes de usuario son discretos al elegir cualquiera de las fuentes disponibles. <span id="result_box" lang="es"><span class="hps">Esto les proporciona</span> <span class="hps">un margen</span> <span class="hps">significativo para</span> <span class="hps">adaptar su</span> <span class="hps">selección basada en</span> <span class="hps">cosas como</span> <span class="hps">las preferencias del usuario</span> <span class="hps">o las condiciones</span> <span class="hps">de ancho de banda</span><span>.</span></span></p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>El ancho de la imagen en píxeles CSS {{HTMLVersionInline(5)}}, o píxeles o porcentaje en {{HTMLVersionInline(4)}}.</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>La URL parcial (empezando con '#') de un <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/map">mapa de imagea</a> asociado a un elemento. + <div class="note"> + <p><strong>Nota: </strong>No puedes usar este atributo si el elemento <code><img></code> es descendiente de un elemento {{htmlelement("a")}} o {{HTMLElement("button")}}.</p> + </div> + </dd> + <dt>{{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>El número de píxeles de espacio blanco insertado sobre y bajo la imagen.</dd> +</dl> + +<h2 id="Formatos_de_imagen_soportada">Formatos de imagen soportada</h2> + +<p>El estándar de HTML no ofrece una lista de formatos de imagen soportados, de modo que cada agente de usuario soporta diferentes conjuntos de formatos. Gecko soporta:</p> + +<ul> + <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/JPEG">JPEG</a></li> + <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/Graphics_Interchange_Format">GIF</a>, including animated GIFs</li> + <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Animated_PNG_graphics">APNG</a> {{gecko_minversion_inline("1.9.2")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/SVG">SVG</a> {{gecko_minversion_inline("2.0")}}</li> + <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/BMP_file_format">BMP</a></li> + <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29">BMP ICO</a></li> + <li><a class="external external-icon" href="http://en.wikipedia.org/wiki/ICO_%28file_format%29">PNG ICO</a> {{gecko_minversion_inline("9.0")}}</li> +</ul> + +<div class="note"> +<p><strong>Nota:</strong><br> + Soporte para formato <a class="external external-icon" href="http://en.wikipedia.org/wiki/X_BitMap">XBM</a> fue eliminado en Gecko 1.9.2.</p> +</div> + +<h2 id="Interacción_con_CSS">Interacción con CSS</h2> + +<p>Respecto a CSS, <code>una <img></code> es un <a href="https://developer.mozilla.org/es/docs/Web/CSS/Elemento_reemplazo">elemento de reemplazo</a>. No tiene base, asi que cuando las imágenes se usan en un contexto de formato en línea con {{cssxref("vertical-align")}}: <code>baseline</code>, el bajo de la imagen se posa sobre la base del contenedor.</p> + +<p>Dependiendo de su tipo, una imagen puede tener ancho y alto intrínseco, pero no necesariamente. Por ejempo, las imagenes SVG no tienen dimensiones intrínsecas.</p> + +<h2 id="Ejemplo_1">Ejemplo 1</h2> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mdn-logo-sm.png<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>MDN<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"></p> + +<h2 id="Ejemplo_2_Enlace_con_imagen">Ejemplo 2: Enlace con imagen</h2> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://developer.mozilla.org/<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mdn-logo-sm.png<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>MDN<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<p><a href="https://developer.mozilla.org/"><img alt="MDN" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"> </a></p> + +<h2 id="Ejemplo_3_Uso_del_atributo_srcset">Ejemplo 3: Uso del atributo <code>srcset</code></h2> + +<p>El atributo <code>src</code> es un candidato en agentes de usuario <code>1x</code> que soporta <code>srcset.</code></p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mdn-logo-sm.png<span class="punctuation token">"</span></span> + <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>MDN<span class="punctuation token">"</span></span> + <span class="attr-name token">srcset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>mdn-logo-HD.png 2x<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Ejemplo_4_Uso_de_atributos_srcset_y_sizes">Ejemplo 4: Uso de atributos <code>srcset</code> y <code>sizes</code></h2> + +<p>El atributo<code> src</code> es ignorado en agentes de usuario que soportan <code>srcset</code> cuando usan descriptores <code>'w'</code>. Cuando la condición de media <code>(min-width: 600px)</code> encaja, la imagen será 200px de ancho, de otra manera será 50vw de ancho (50% del ancho del dispositivo).</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clock-demo-thumb-200.png<span class="punctuation token">"</span></span> + <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Clock<span class="punctuation token">"</span></span> + <span class="attr-name token">srcset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w<span class="punctuation token">"</span></span> + <span class="attr-name token">sizes</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>(min-width: 600px) 200px, 50vw<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<article class="approved text-content"> +<div class="boxed translate-rendered"> +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Añadida la política del atributo<code> referrer</code></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{CompatChrome(34.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(21)}}</td> + <td>{{CompatSafari(7.1)}}</td> + </tr> + <tr> + <td><code>referrerpolicy</code></td> + <td>{{CompatChrome(46.0)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("42.0")}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(34.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>21</td> + <td>iOS 8</td> + <td>{{CompatChrome(34.0)}}</td> + </tr> + <tr> + <td><code>referrerpolicy</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatGeckoMobile("42.0")}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementado como <code>referrerpolicy</code> y tras una bandera.</p> + +<p>[2] Implementado tras una preferencia.</p> + +<p>[3] Desde Firefox 42 a Firefox 44, el atributo se llamó <code>referrer</code>.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{HTMLElement("picture")}}, {{HTMLElement("object")}} and {{HTMLElement("embed")}} elements</li> +</ul> +</div> +</article> diff --git a/files/es/web/html/elemento/index.html b/files/es/web/html/elemento/index.html new file mode 100644 index 0000000000..537ca3cd41 --- /dev/null +++ b/files/es/web/html/elemento/index.html @@ -0,0 +1,106 @@ +--- +title: Referencia de Elementos HTML +slug: Web/HTML/Elemento +tags: + - Elemento + - HTML + - Referencia + - Web + - básico +translation_of: Web/HTML/Element +--- +<div>{{HTMLSidebar("Elements")}}</div> + +<p><span class="seoSummary">Esta página lista todos los {{Glossary("Element","elementos")}} {{Glossary("HTML")}}</span>. Están agrupados por funciones para ayudarte a encontrar lo que tienes en mente con facilidad. Aunque esta guía está escrita para aquellos que son nuevos escribiendo código, se pretende que sea una referencia útil para cualquiera.</p> + +<div class="note"> +<p>Para más información básica acerca de los elementos y atributos HTML, vea <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">la sección sobre elementos en el artículo 'Introducción a HTML'</a>.</p> +</div> + +<h2 id="Raíz_principal">Raíz principal</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Metadatos_del_documento">Metadatos del documento</h2> + +<p>Los metadatos contienen información sobre la página. Esto incluye información sobre estilos, <em>scripts</em> y datos que ayudan al <em>software</em> ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) a usar y generar la página. Los metadatos de estilos y <em>scripts</em> pueden estar definidos en la página o estar enlazados a otro fichero que contiene la información.</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Seccionamiento_básico">Seccionamiento básico</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Seccionamiento_del_contenido">Seccionamiento del contenido</h2> + +<p>Los elementos de seccionamiento del contenido te permiten organizar los contenidos del documento en partes lógicas. Usa los elementos de seccionado para crear una descripción amplia de los contenidos de tu página, incluyendo el encabezado y pie de página y elementos para identificar secciones.</p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Contenido_del_texto">Contenido del texto</h2> + +<p>Utiliza los elementos HTML de contenido del texto para organizar bloques o secciones de contenido colocados entre los tags de apertura{{HTMLElement("body")}} y cierre. Es importante para la {{Glossary("accessibility")}} y el {{Glossary("SEO")}}, que estos elementos se identifiquen con el objetivo o la estructura de ese contenido.</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Semántica_del_texto_en_línea">Semántica del texto en línea</h2> + +<p>Utilice la semántica del texto en línea HTML para definir el significado, estructura, o el estilo de una palabra, una línea o cualquier pieza arbitraria de texto.</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Imagen_y_multimedia">Imagen y multimedia</h2> + +<p>HTML soporta varios recursos multimedia como imágenes, audio, y video.</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Contenido_incrustado">Contenido incrustado</h2> + +<p>Además de los contenidos multimedia habituales, HTML puede incluir otra variedad de contenidos, aunque no siempre es fácil de interactuar con ellos.</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripting">Scripting</h2> + +<p>Con el fin de crear contenido dinámico y aplicaciones Web, HTML soporta el uso de lenguajes de scripting, el más prominente es JavaScript. Ciertos elementos soportan esta capacidad.</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Ediciones_demarcadas">Ediciones demarcadas</h2> + +<p>Estos elementos permiten proporcionar indicios de que determinadas partes del texto han sido alteradas.</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Tablas">Tablas</h2> + +<p>Estos elementos son usados para crear y manejar datos tabulados.</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Formularios">Formularios</h2> + +<p>HTML provee un número de elementos que pueden usarse conjuntamente para crear formularios los cuales el usuario puede completar y enviar al sitio Web o a una aplicación. Hay una gran cantidad de información acerca de ésto disponible en la <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Elementos_Interactivos">Elementos Interactivos</h2> + +<p>HTML ofrece una selección de elementos que pueden ayudar a crear objetos de interfaz de usuario interactivos.</p> + +<p>{{HTMLRefTable("HTML interactive elements")}}</p> + +<h2 id="Componentes_Web">Componentes Web</h2> + +<p>Los Componentes Web son una tecnología relacionada con HTML que hacen que sea posible, en esencia, crear y personalizar elementos como si fueran HTML normal. Además, pueden crear versiones personalizadas de los elementos HTML estándar.</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Elementos_obsoletos_y_en_desuso">Elementos obsoletos y en desuso</h2> + +<div class="warning" style="font-size: 14px;"> +<p><strong>Advertencia:</strong> Estos son elementos HTML viejos los cuales están obsoletos y no deben usarse. <strong>Nunca debería usarlos en un nuevo proyecto y debería reemplazarlos en proyectos viejos tan pronto como sea posible.</strong> Se listan aquí solo con propósitos informativos.</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/es/web/html/elemento/input/botón/index.html b/files/es/web/html/elemento/input/botón/index.html new file mode 100644 index 0000000000..7fbe354405 --- /dev/null +++ b/files/es/web/html/elemento/input/botón/index.html @@ -0,0 +1,254 @@ +--- +title: <input type ="button"> +slug: Web/HTML/Elemento/input/Botón +tags: + - Elemento + - Elemento Input + - HTML + - Referencia +translation_of: Web/HTML/Element/input/button +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary">El elemento HTML <code><strong><input type="button"></strong></code> es una versión específica del elemento <strong><code><input></code></strong><code>,</code> que se usa para crear un botón en el que se puede hacer click sin ningún valor por defecto, es decir, <strong>no tiene un comportamiento predeterminado</strong> como por ejemplo <span class="seoSummary"><code><strong><input type="reset"></strong></code></span> <span class="seoSummary">. En HTML5 ha sido sustituido por el elemento <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong>.</span></span></p> + +<p>Los navegadores generan un controlador para un botón clickable sin valor por defecto. El botón puede contener cualquier texto. El controlador puede varíar de un navegador a otro.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorías de contenido</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenido de flujo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenido de fraseo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">contenido interactivo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listado</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">etiquetable</a>, y elementos <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">entregables</a> con <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">contenido asociado a los formularios</a>, contenido evidente.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>Ninguna, las etiquetas de inicio y cierre son obligatorias.</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" title="The HTMLButtonElement interface provides properties and methods (beyond the <button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements."><code>HTMLButtonElement</code></a></td> + </tr> + <tr> + <th scope="row">Tipo de elemento</th> + <td>Inline</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento puede tener cualquiera de los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a> además de los siguientes:</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Este atributo booleano indica que el usuario no puede interactuar con el botón. Si este atributo no está especificado, el botón hereda su configuración del elemento contenedor, por ejemplo, {{HTMLElement("fieldset")}}; si no hay elemento contenedor con el atributo <code><strong>disabled</strong></code> establecido, el botón estará habilitado. El valor de control desactivado no es enviado con el formulario y el evento <code>click</code> <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">no será enviado</a> en los controles desactivados.</p> + </dd> + <dd> + <p>Firefox, al contrario que otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">mantiene por defecto el estado de desactivación dinámico</a> de un {{HTMLElement("button")}} a lo largo de las cargas de la página. Use el atributo {{htmlattrxref("autocomplete","button")}} para controlar esta característica.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>Este atributo booleano le permite especificar que el botón deba tener el foco cuando la página se cargue, a no ser que el usuario lo anule, por ejemplo, escribiendo en otro cuadro de texto. Únicamente un elemento asociado con los formularios en un documento puede tener este atributo especificado.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>El uso de este atributo en un {{HTMLElement("button")}} es algo fuera de lo común, y específico de Firefox. Firefox, por defecto y al contrario de otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">mantiene por defecto el estado de desactivación dinámico</a> de un {{HTMLElement("button")}} a lo largo de las cargas de la página. Establecer el valor de este atributo a <code>off</code> (<code>autocomplete="off"</code>) desactiva esta característica.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>El elemento del formulario con el que el botón está asociado (es <em>dueño del formulario</em>). El valor del atributo debe ser el atributo <strong>id</strong> de un elemento {{HTMLElement("form")}} en el mismo documento. Si este atributo no está especificado, el elemento <code><button> </code>debe ser hijo de un elemento "formulario". Este atributo le permite colocar elementos <code><button></code> en cualquier lugar de un documento, y no únicamento como hijos del elemento {{HTMLElement("form")}}.</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formenctype</strong></code> especifica el tipo de contenido que se usa para enviar el formulario al servidor. Los valores posibles son: + <ul> + <li><code>application/x-www-form-urlencoded</code>: Valor por defecto si el atributo no se especifica.</li> + <li><code>multipart/form-data</code>: Este valor se usa si un elemento {{HTMLElement("input")}} es usado con el atributo {{htmlattrxref("type","input")}} fijado a <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>Si este atributo se especifica, ignora el atributo {{htmlattrxref("enctype","form")}} del formulario dueño del botón.</p> + </dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>La URI de la aplicación que procesa la información enviada por le botón. Si se especifica se anula el atributo {{htmlattrxref("action","form")}} del formulario dueño del botón.</dd> + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd>Debido a que el elemento input es un botón de envío, el atributo <code><strong>formmethod</strong></code> especifica el método HTTP que el navegador utilizará para enviar el formulario. Los valores posibles son: + <ul> + <li><code>post</code>: Los datos del formulario son incluidos en su cuerpo y son enviados al servidor.</li> + <li><code>get</code>: Los datos del formulario son agregados a la URI del formulario, utilizando un símbolo '?' como separador, la URI resultante es enviada al servidor. Use este método cuando el formulario no tenga efectos secundarios y contenga solo caracteres ASCII.</li> + </ul> + + <p>Si se especifica, este atributo anula el atributo {{htmlattrxref("method","form")}} del formulario dueño del elemento.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formnovalidate </strong></code> especifica que el formulario no debe ser validado cuando sea enviado. Si este atributo es especificado, se anula el atributo {{htmlattrxref("novalidate","form")}} del formulario dueño del elemento. Este atributo es Booleano.</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formtarget</strong></code> es un nombre o palabra clave que indica donde mostrar la respuesta recibida después de enviar el formulario. Este es un nombre de, o palabra clave para, un <em>contexto navegable</em> (por ejemplo, pestaña, ventana, o inline frame). Si este atributo es especificado, se sobreescribirá el atributo {{htmlattrxref("target", "form")}} del formulario dueño del elemento. Las siguientes palabras claves tienen significados especiales: + <ul> + <li>_<code>self</code>: Carga la respuesta en el mismo contexto navegable<em> </em>que el actual. Este valor es el predeterminado si el atributo no es especificado.</li> + <li><code>_blank</code>: Carga la respuesta en un nuevo contexto navegable sin nombre.</li> + <li><code>_parent</code>: Carga la respuesta en el contexto navegable padre del actual. Si no hay padre, esta opción se comporta igual que <code>_self</code>.</li> + <li><code>_top</code>: Carga la respuesta en el contexto navegable superior (es el contexto navegable que es un ancestro del actual y no tiene padre). Si no hay padre, esta opción se comporta igual que <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>El nombre del botón que será enviado con los datos del formulario.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>El tipo dle botón. Los valores posibles son: + <ul> + <li><code>submit</code>: El botón envía los datos del formulario al servidor. Este es el valor predeterminado si no se especifica el atributo, o si el atributo es cambiado dinámicamente a un valor inválido o vacío.</li> + <li><code>reset</code>: El botón reinicia todos los controles a sus valores iniciales.</li> + <li><code>button</code>: El botón no tiene comportamiento predeterminado. Puede haber scripts de la parte del cliente asociados a los eventos del elemento, que serán lanzados cuando el evento ocurra.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>El valor inicial del botón.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Se crea un nuevo input tipo botón con el valor 'Click me'. </p> + +<pre class="brush: html"><input type="button" value="Click me"></pre> + +<h2 id="Especificaciónes">Especificaciónes</h2> + +<table class="standard-table" style="height: 137px; width: 1065px;"> + <tbody> + <tr> + <td>Especificación</td> + <td>Status</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>autofocus</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<p> </p> + +<ul> + <li>El elemento genérico {{HTMLElement("input")}} y la interface usada para manipularlo, {{domxref("HTMLInputElement")}}</li> + <li>El reemplazo en HTML5 para <strong><input type="button"></strong>, el elemento <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong>.</li> +</ul> diff --git a/files/es/web/html/elemento/input/checkbox/index.html b/files/es/web/html/elemento/input/checkbox/index.html new file mode 100644 index 0000000000..1798198434 --- /dev/null +++ b/files/es/web/html/elemento/input/checkbox/index.html @@ -0,0 +1,130 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Elemento/input/checkbox +translation_of: Web/HTML/Element/input/checkbox +--- +<p><span class="seoSummary">El elemento HTML <strong><code><input type="checkbox"></code></strong> es un elemento de entrada que te permite insertar un vector o array de valores. El atributo <strong>value</strong> es usado para definr el valor enviado por el <strong>checkbox</strong>. El atributo <strong>checked</strong> se usa para indicar que el elemento está seleccionado. El atributo <strong>indeterminate</strong> se usa para indicar que el <strong>checkbox</strong> esta en un estado indeterminado (en la mayoria de las plataformas, esto dibuja una linea horizontal que atraviesa el <strong>checkbox</strong>).</span></p> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento posee los "<a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributos globales</a>".</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>Cuando el valor del atributo <strong>type</strong> es <strong><code>checkbox</code></strong>, la presencia de este atributo booleano indica que el control se selecciona de forma predeterminada; de lo contrario, se ignora.</p> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>El valor inicial de control. Si se omite la propiedad <strong>value</strong>, el resultado<strong> </strong>devuelto al leer esta propiedad será la cadena <strong>on.</strong></dd> + <dd>Tenga en cuenta que al volver a cargar la pagina, Gecko y IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">ignorarán el valor especificado en el código HTML</a>, si el valor se cambió antes de la recarga.</dd> + <dt>{{htmlattrdef("indeterminate")}}</dt> + <dd>Indica que la casilla de verificación está en un estado indeterminado (en la mayoría de las plataformas, dibuja una línea horizontal a través del checkbox).</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><label><input type="checkbox" id="cbox1" value="first_checkbox"> Este es mi primer checkbox</label><br> + +<input type="checkbox" id="cbox2" value="second_checkbox"> <label for="cbox2">Este es mi segundo checkbox</label> +</pre> + +<p>Esto crea dos casillas de verificación, que se ven así:</p> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Especificación</td> + <td>Estatus</td> + </tr> + <tr> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '<checkbox>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<checkbox>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#checkbox', '<checkbox>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop">Caracteristicas +<table class="compat-table"> + <tbody> + <tr> + <th> </th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 or earlier</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristicas </th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p id="See_also"> </p> diff --git a/files/es/web/html/elemento/input/color/index.html b/files/es/web/html/elemento/input/color/index.html new file mode 100644 index 0000000000..09773888f0 --- /dev/null +++ b/files/es/web/html/elemento/input/color/index.html @@ -0,0 +1,308 @@ +--- +title: <input type="color"> +slug: Web/HTML/Elemento/input/color +tags: + - Elemento + - Entrada + - Formulários HTML + - HTML + - Referencia + - Selector de colores + - color + - formulários +translation_of: Web/HTML/Element/input/color +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} del tipo «<code><strong>color</strong></code>» proporciona un elemento de interfaz de usuario que permite a los usuarios especificar un color, bien mediante una interfaz visual de selección, bien a través de un cuadro de texto donde ingresar un valor hexadecimal en el formato «<code>#rrggbb</code>».</span> Solo se permiten colores simples (sin canal alfa). Los valores son compatibles con CSS.</p> + +<p>La presentación del elemento puede variar considerablamente entre navegadores y plataformas: podría ser un campo de entrada sencillo que valida automáticamente que la entrada esté en el formato adecuado, o podría lanzar un selector de colores estándar de la plataforma, o incluso podría abrir una ventana de colores personalizada.</p> + +<div id="summary_example1"> +<pre class="brush: html"><input type="color"></pre> +</div> + +<p>{{EmbedLiveSample("summary_example1", 700, 30)}}</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Una {{domxref("DOMString")}} de siete caracteres que especifica un {{cssxref("<color>")}} en notación hexadecimal en minúsculas</td> + </tr> + <tr> + <td><strong>Sucesos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes admitidos</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}} y {{htmlattrxref("list", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>list</code> y <code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>El {{htmlattrxref("value", "input")}} de un elemento {{HTMLElement("input")}} del tipo «<code>color</code>» es siempre una {{domxref("DOMString")}} que contiene una cadena de siete caracteres en la que se especifica un color RGB de manera hexadecimal. Aunque es posible introducir el color tanto en mayúsculas como en minúsculas, este se almacena en minúsculas. El valor nunca presenta otra forma y nunca está vacío.</p> + +<div class="note"> +<p><strong>Nota</strong>: definir el valor a cualquier cosa que no sea un color válido, totalmente opaco y contenido dentro del espacio RGB <em>en notación hexadecimal</em> causará que el valor se establezca a «<code>#000000</code>». En particular, no es posible utilizar los nombres de colores estandarizados de CSS ni cualquier sintaxis de función CSS para definir el valor. Esto tiene sentido si se tiene en cuenta que HTML y CSS son lenguajes y especificaciones independientes. Por otra parte, no se admiten los colores que incluyan un canal alfa; definir un color en la notación hexadecimal de nueve caracteres (p. ej., <code>#009900aa</code>) también provocará que el valor se establezca a «<code>#000000</code>».</p> +</div> + +<h2 id="Uso_de_las_entradas_de_color">Uso de las entradas de color</h2> + +<p>Las entradas del tipo «<code>color</code>» son sencillas debido al número limitado de atributos que admiten.</p> + +<h3 id="Proporcionar_un_color_predeterminado">Proporcionar un color predeterminado</h3> + +<p>Puede actualizar el ejemplo simple anterior para definir un valor predeterminado, de manera que el botón muestrario de colores tenga precargado ese color y el selector de colores (si lo hay) se abra con ese color preseleccionado también:</p> + +<pre class="brush: html"><input type="color" value="#ff0000"></pre> + +<p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p> + +<p>Si no especifica un valor, se utilizará «<code>#000000</code>», negro, de manera predeterminada. El valor debe especificarse en la notación hexadecimal de siete caracteres; esto es, el carácter «#» seguido de dos dígitos para representar el rojo, el verde y el azul: «<code>#rrggbb</code>». Si utiliza colores especificados en cualquier otro formato (como los nombres de colores CSS o las funciones cromáticas de CSS como <code>rgb()</code> o <code>rgba()</code>), deberá convertirlos en valores hexadecimales antes de definir <code>value</code>.</p> + +<h3 id="Llevar_un_seguimiento_de_los_cambios_de_color">Llevar un seguimiento de los cambios de color</h3> + +<p>Como sucede con otros tipos de {{HTMLElement("input")}}, existen dos sucesos que pueden emplearse para detectar cambios en el valor de color: {{event("input")}} y {{event("change")}}. El suceso <code>input</code> se desencadena en el elemento <code><input></code> siempre que cambia el color. El suceso <code>change</code> se desencadena cuando el usuario cierra el selector de colores. En ambos casos, puede determinar el valor nuevo del elemento al examinar su {{domxref("HTMLInputElement.value", "value")}}.</p> + +<p>Este ejemplo vigila los cambios del valor de color en el tiempo:</p> + +<pre class="brush: js">colorPicker.addEventListener("input", actualizarPrimero, false); +colorPicker.addEventListener("change", watchColorPicker, false); + +function watchColorPicker(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<h3 id="Seleccionar_el_valor">Seleccionar el valor</h3> + +<p>Si la implementación del elemento {{HTMLElement("input")}} del tipo «<code>color</code>» en el navegador del usuario no admite un botón muestrario, y es en cambio un campo de texto para escribir directamente la cadena de color, podrá utilizar el método {{domxref("HTMLInputElement.select", "select()")}} para seleccionar el texto actualmente presente en el campo editable. Si el navegador utiliza en su lugar un botón muestrario, <code>select()</code> no hace nada. Debe tener presente este comportamiento para que su código pueda responder adecuadamente en cada caso.</p> + +<pre class="brush: js">muestrario.select();</pre> + +<h3 id="Variaciones_de_apariencia">Variaciones de apariencia</h3> + +<p>Como se mencionó anteriormente, cuando un navegador no admite una interfaz de selección de colores, su implementación de las entradas de color viene en forma de un cuadro de texto que valida su contenido automáticamente para garantizar que el valor esté en el formato adecuado. Por ejemplo, en Safari 10.1 verá algo como esto:</p> + +<p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>El mismo contenido luce así en Firefox 55:</p> + +<p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>En este caso, al pulsar en el muestrario de colores aparecerá el selector de la plataforma desde el cual elegir un color (en el ejemplo, el selector de macOS):</p> + +<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> + +<h2 id="Validación">Validación</h2> + +<p>El valor de una entrada de colores se considera no válido si el {{Glossary("user agent")}} no es capaz de convertir la entrada del usuario en la notación hexadecimal de siete caracteres minúsculos. Cuando se da esta situación, se aplica la pseudoclase {{cssxref(":invalid")}} al elemento.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Creemos un ejemplo que realice algo más con la entrada de color a través de la monitorización de los sucesos {{event("change")}} y {{event("input")}} para tomar el color nuevo y aplicarlo a cada uno de los elementos {{HTMLElement("p")}} del documento.</p> + +<h3 id="HTML">HTML</h3> + +<p>El código HTML es bastante sencillo: un par de párrafos de material descriptivo con un {{HTMLElement("input")}} del tipo «<code>color</code>» con el identificador «<code>muestrario</code>», el cual utilizaremos para modificar el color del texto de los párrafos.</p> + +<pre class="brush: html"><p>Este ejemplo demuestra la utilización del control <code>&lt;input type="color"&gt;</code>.</p> + +<label for="muestrario">Color:</label> +<input type="color" value="#ff0000" id="muestrario"> + +<p>Observe cómo el color de los párrafos cambia cuando manipula el selector de colores. + A medida que realiza cambios en el selector, el color del primer párrafo cambia, + a manera de previsualización (esto usa el suceso <code>input</code>). + Cuando cierra el selector, se desencadena el suceso <code>change</code> + y podemos detectarlo para cambiar todos los párrafos al color elegido.</p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Primero hay que realizar un poco de configuración. Aquí estableceremos algunas variables, una de las cuales contendrá el color que definiremos en el botón muestrario durante la primera carga y, a continuación, configurará un manejador para {{event("load")}} para realizar el trabajo de inicialización cuando termine de cargarse la página.</p> + +<pre class="brush: js">var muestrario; +var colorPredeterminado = "#0000ff"; + +window.addEventListener("load", startup, false); +</pre> + +<h4 id="Inicialización">Inicialización</h4> + +<p>Una vez que se haya cargado la página, se realizará una llamada a nuestro manejador del suceso <code>load</code>, <code>startup()</code>:</p> + +<pre class="brush: js">function startup() { + muestrario = document.querySelector("#muestrario"); + muestrario.value = colorPredeterminado; + muestrario.addEventListener("input", actualizarPrimero, false); + muestrario.addEventListener("change", actualizarTodo, false); + muestrario.select(); +} +</pre> + +<p>Esto obtiene una referencia al elemento de color <code><input></code> en una variable denominada <code>muestrario</code> y, acto seguido, define el valor de la entrada de color al valor de <code>colorPredeterminado</code>. Después, el suceso {{event("input")}} de la entrada de color se configura para llamar a nuestra función <code>actualizarPrimero()</code> y el suceso {{event("change")}} se configura para llamar <code>actualizarTodo()</code>. Ambos pueden apreciarse a continuación.</p> + +<p>Por último, llamamos {{domxref("HTMLInputElement.select", "select()")}} para seleccionar el contenido de texto de la entrada de color input en caso de que el control se haya implementado como un cuadro de texto (lo cual no producirá ningún efecto si se ha brindado una interfaz de selección de colores en su lugar).</p> + +<h4 id="Reaccionar_a_cambios_de_color">Reaccionar a cambios de color</h4> + +<p>Proveemos dos funciones que se ocupan de los cambios de color. La función <code>actualizarPrimero()</code> se llama en respuesta al suceso <code>input</code>. Esta modifica el color del primer elemento de párrafo del documento para que corresponda con el nuevo valor de la entrada de color. Como los sucesos <code>input</code> se desencadenan cada vez que se realiza un ajuste al valor (por ejemplo, si se aumenta el brillo del color), estos se producirán repetidamente mientras se manipule el selector de colores.</p> + +<pre class="brush: js">function actualizarPrimero(event) { + var p = document.querySelector("p"); + + if (p) { + p.style.color = event.target.value; + } +}</pre> + +<p>Cuando se cierre el selector de colores, señalando que el valor dejará de cambiar (a menos que el usuario vuelva a abrir el selector), se envía el suceso <code>change</code> al elemento. Manejamos ese suceso a través de la función <code>actualizarTodo()</code>, sirviéndonos de {{domxref("HTMLInputElement.value", "Event.target.value")}} para obtener el color final seleccionado:</p> + +<pre class="brush: js">function actualizarTodo(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<p>Esto define el color de cada uno de los bloques {{HTMLElement("p")}} de manera que sus atributos {{cssxref("color")}} coincidan con el valor actual de la entrada de color, a la cual se hace referencia con {{domxref("Event.target", "event.target")}}.</p> + +<h3 id="Resultado">Resultado</h3> + +<p>El resultado final es el siguiente:</p> + +<p>{{EmbedLiveSample("Example", 700, 200)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Compatibilidad básica</td> + <td>20.0</td> + <td>38</td> + <td>{{CompatGeckoDesktop(29)}} <sup><a href="#footnote_1">[1]</a></sup></td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>10</td> + </tr> + <tr> + <td>{{htmlattrxref("list", "input")}}</td> + <td>20.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{htmlattrxref("autocomplete", "input")}}</td> + <td>20.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Firefox móvil (Gecko)</th> + <th>IE móvil</th> + <th>Opera móvil</th> + <th>Safari móvil</th> + </tr> + <tr> + <td>Compatibilidad básica</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{htmlattrxref("list", "input")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{htmlattrxref("autocomplete", "input")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p id="footnote_1">[1] Firefox no admite aún las entradas del tipo «<code>color</code>» en Windows Touch.</p> + +<p>[2] Consulte {{bug(960984)}} para conocer el estado de compatibilidad del atributo <code>list</code> en Firefox.</p> + +<p>[3] Consulte {{bug(960989)}} para conocer el estado de compatibilidad del atributo <code>autocomplete</code> en Firefox. Puede modificar y obtener el valor del atributo, pero este no surte ningún efecto.</p> diff --git a/files/es/web/html/elemento/input/date/index.html b/files/es/web/html/elemento/input/date/index.html new file mode 100644 index 0000000000..a1c36c5530 --- /dev/null +++ b/files/es/web/html/elemento/input/date/index.html @@ -0,0 +1,567 @@ +--- +title: <input type="date"> +slug: Web/HTML/Elemento/input/date +tags: + - Elemento + - Fecha + - Formulários HTML + - Inputs en formularios + - tipo Input +translation_of: Web/HTML/Element/input/date +--- +<p>{{HTMLRef}}</p> + +<p>Los elementos de <span class="seoSummary">{{htmlelement("input")}} del tipo <strong><code>date</code></strong> crean campos de entrada que permiten a los usuarios proporcionar una fecha, bien a través de un cuadro de texto que valida automáticamente el contenido, o bien mediante una interfaz especial de selección de fechas.</span> El valor resultante incluye el año, el mes y el día, pero no la hora. Los tipos de entrada <a href="/en-US/docs/Web/HTML/Element/input/time">time</a> y <code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> admiten entradas de hora y de hora y fecha.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>La IU del control varía en función del navegador. Por el momento, la compatibilidad es dispersa; consulte {{anch("Compatibilidad entre navegadores")}} para obtener más detalles. En los navegadores no compatibles, el control se degrada sin problemas a un sencillo <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text">.</a></code></p> + +<pre><input id="date" type="date"></pre> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> + +<p>Entre los navegadores que admiten una interfaz personalizada para seleccionar fechas se encuentran Chrome y Opera, cuyo control luce así:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png"></p> + +<p>El control de fecha de Edge luce así:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png"></p> + +<p>El control de Firefox luce así:</p> + +<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valor")}}</strong></td> + <td>Una {{domxref("DOMString")}} que representa una fecha en el formato AAAA-MM-DD, o nada</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes admitidos</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} y {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>Una {{domxref("DOMString")}} que representa el valor de la fecha proporcionada en la entrada. Es posible establecer un valor predeterminado para la entrada al incluir una fecha en el atributo {{htmlattrxref("value", "input")}}, de esta manera:</p> + +<pre><input id="date" type="date" value="2017-06-01"></pre> + +<p>{{EmbedLiveSample('Value', 600, 40)}}</p> + +<p>Cabe destacar que el formato de fecha mostrado difiere del <code>value</code> en sí: el formato de fecha mostrado se escogerá en función de la configuración regional del navegador del usuario, aunque el <code>value</code> de fecha siempre se formatee como <code>aaaa-mm-dd</code>.</p> + +<p>Es posible asimismo recuperar y establecer el valor de fecha en JavaScript mediante la propiedad {{domxref("HTMLInputElement.value", "value")}} del elemento de entrada; por ejemplo:</p> + +<pre>var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01';</pre> + +<p>Este código localiza el primer elemento {{HTMLElement("input")}} cuyo <code>type</code> sea <code>date</code> y define su valor a la fecha 2017-06-01 (1 de junio de 2017).</p> + +<h2 id="Atributos_adicionales">Atributos adicionales</h2> + +<p>Tenemos atributos adicionales tales como:</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>La fecha máxima aceptada.</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>La fecha minima aceptada.</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>El intervalo a usar, como cuando das click en las flechas, de cuanto en cuanto va avanzar o retroceder.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<p>La ultima fecha a aceptar. Si el{{htmlattrxref("value", "input")}} ingresado en el elemento esta después de esta fecha, el elemento cae <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Si el valor del <code>max</code> no es un valor valido, sigue el formato <code>yyyy-MM-dd</code>, donde el elemento no tiene máximo valor.</p> + +<p>Este valor debe ser especificado mayor o igual especificado por <code>min</code> attribute.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<p>La minima fecha aceptada; Una fecha menor que esta caera <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Si el valor es <code>min</code> el atributo no es valido y esa el formato <code>yyyy-MM-dd</code>, entonces el elemento no tiene valor minimo.</p> + +<p>Este valor debe especificarse como menor o igual<code>max</code> attribute.</p> + + + + + + + + + + + + + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>Para <code>date</code> input, el valor de <code>step</code> se da en dias, con una escala en factor de 86,400,000 (desde el valor numerico en millisegundos). El valor por defecto es <code>step</code> 1, indicando de un día a día.</p> + +<div class="blockIndicator note"> +<p>Specifying <code>any</code> as a value for the <code>step</code> attribute makes the same effect as it were equal to <code>1</code> for <code>date</code> inputs.</p> +</div> + +<h2 id="Uso_de_las_entradas_de_fecha">Uso de las entradas de fecha</h2> + +<p>Las entradas de fecha suenan prácticas en un primer vistazo, ya que proveen una IU fácil de usar para seleccionar fechas y normalizan el formato de datos que se envía al servidor, sin importar la configuración regional del usuario. Sin embargo, existen problemas con <code><input type="date"></code> a causa de la compatibilidad limitada entre navegadores.</p> + +<p>Estudiaremos usos básicos y complejos de <code><input type="date"></code> y, posteriormente, brindaremos consejos para mitigar el problema de compatibilidad entre navegadores (consulte {{anch("Manejo de compatibilidad entre navegadores")}}). Evidentemente, con el tiempo es esperable que la compatibilidad entre navegadores se amplíe, lo que hará desaparecer este problema.</p> + +<h3 id="Usos_básicos_de_date">Usos básicos de <code>date</code></h3> + +<p>El uso más sencillo de <code><input type="date"></code> supone una combinación de un <code><input></code> básico y el elemento {{htmlelement("label")}}, como se indica a continuación:</p> + +<pre><form> + <div> + <label for="bday">Escriba su cumpleaños:</label> + <input type="date" id="bday" name="bday"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p> + +<h3 id="Definir_los_límites_superior_e_inferior_de_la_fecha">Definir los límites superior e inferior de la fecha</h3> + +<p>Puede utilizar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir las fechas que el usuario puede seleccionar. En el ejemplo siguiente, definiremos como la fecha mínima <code>2017-04-01</code> y <code>2017-04-30</code> como la fecha máxima:</p> + +<pre><form> + <div> + <label for="party">Elija la fecha de festejo que prefiera:</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p> + +<p>Como resultado, solo es posible seleccionar los días del mes de abril de 2017; solo la parte de los días del valor de texto es modificable, y no se puede desplazar a ninguna fecha que caiga fuera de abril en la interfaz de selección de fechas.</p> + +<p><strong>Nota</strong>: debería ser capaz de utilizar el atributo {{htmlattrxref("step", "input")}} para variar el número de días que se recorren con cada incremento de fecha (p. ej., puede que desee que solo se puedan seleccionar los sábados). No obstante, esto no parece funcionar en ninguna implementación en el momento en que se redactó esta página.</p> + +<h3 id="Controlar_el_tamaño_de_la_entrada">Controlar el tamaño de la entrada</h3> + +<p><code><input type="date"></code> no admite los atributos de dimensionamiento de formularios como {{htmlattrxref("size", "input")}}. Deberá recurrir al <a href="/en-US/docs/Web/CSS">CSS</a> para satisfacer sus necesidades de dimensionamiento.</p> + +<h2 id="Validación">Validación</h2> + +<p>De manera predeterminada, <code><input type="date"></code> no aplica a ninguna validación a los valores introducidos. Las implementaciones de IU generalmente no le permiten escribir algo que no sea una fecha (lo cual es útil) pero aun así podrá dejar el campo vacío o incluso (en los navegadores que recurren al tipo <code>text</code>) escribir una fecha no válida (p. ej., el 32 de abril).</p> + +<p>Si utiliza {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir las fechas disponibles (consulte {{anch("Definir los límites superior e inferior de la fecha")}}), los navegadores compatibles mostrarán un error si intenta enviar una fecha que se salga de los límites impuestos. No obstante, tendrá que comprobar los resultados para cerciorarse de que el valor esté dentro de los límites, ya que esta condición solo se hace cumplir si el dispositivo del usuario incluye compatibilidad completa con el selector de fecha.</p> + +<p>Además, puede emplear el atributo {{htmlattrxref("required", "input")}} para que proporcionar la fecha sea obligatorio: de nuevo, se mostrará un error si intenta enviar un campo de fecha vacío. Esto, cuando menos, debería funcionar en la mayoría de los navegadores.</p> + +<p>Estudie este ejemplo. Aquí hemos establecido las fechas mínima y máxima y convertimos el campo en obligatorio:</p> + +<pre><form> + <div> + <label for="party">Elija la fecha de festejo que prefiera (obligatorio, del 1.º al 20 de abril):</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>Si intenta enviar el formulario sin una fecha (o con una fecha fuera de los límites definidos), el navegador muestra un error. Pruebe a manipular el ejemplo:</p> + +<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> + +<p>Esta captura de pantalla ayudará a aquellos que no utilicen un navegador compatible:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png"></p> + +<p>Aqui un codigo CSS usado en el siguiente ejemplo. Donde se hace uso de {{cssxref(":valid")}} e {{cssxref(":invalid")}} Las propiedades en el estilo del "input" según el valor actual es o no valido. Se ponen iconos sobre el {{htmlelement("span")}} al costado del input, no en el mismo cuadro del input, porque en Chrome el contenido generado se remplaza dentro del formulario de control, y este no puede ser personalizado o no se mostraria efectivamente.</p> + +<pre>div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="blockIndicator warning"> +<p><strong>Importante</strong>: El formulario de validación en HTML no es un sustituto para los scripts que se aseguran que los datos esten ingresados en la forma correcta. Esto es demasiado facil para alguien que realiza ajustes en HTML que le permite pasar la validación, o quitarla de lleno. Es tambien posible para alguien simplificar el proceso de paso del formulario HTML enteramente y pasar la fecha directamente al servidor. Pero si en el lado de tu servidor fallase la validación al recibir la fecha, podria ocurrir un desastre cuando se envien los datos en el formato incorrecto (que la fecha sea muy larga, del tipo incorrecto, entre otras cosas más).</p> +</div> + +<h2 id="Manejo_de_compatibilidad_entre_navegadores">Manejo de compatibilidad entre navegadores</h2> + +<p>Como ya se menciono, el mayor problema al usar el "input" tipo date, es al momento de usar un <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Browser_compatibility">navegador compatible</a>. Ejemplo, el date picker en Firefox para Android luciria de la siguiente manera:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png"></p> + +<p>Pero los navegadores que no soportan lo remplazarian como un input del tipo texto, esto crea problemas en terminos de consistencia en relacion a la interfaz del usuario (El presente control seria diferente), y el manejo de datos también.</p> + +<p>El segundo problema es más serio; como ya se menciono, con un input tipo date, el valor actual siempre se normaliza en el siguiente formato <code>yyyy-mm-dd</code>. Con un input tipo texto, por default el navegador no reconoce el formato en el que deberia estar, y hay muchisimas formas en las que las personas escriben el formato de fecha, Por ejemplo:</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>Month dd yyyy</code></li> +</ul> + +<p>Una forma de evitar esto es usar un {{htmlattrxref("pattern", "input")}}, atributo que se pone en un input tipo date. A pesar de que la entrada tipo date no se usa, el input tipo text si lo hará, gracias a este {{htmlattrxref("pattern", "input")}}.Mira el siguiente ejemplo en un navegador que no soporta entradas de tipo date:</p> + +<pre><form> + <div> + <label for="bday">Enter your birthday:</label> + <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p> + +<p>Si Ud. trata de enviar la fecha, verá que el navegador no despliega un mensaje de error (y considera el valor del input como valido) Si tu entrada en el input no concuerda con el patron establecido <code>nnnn-nn-nn</code>, donde <code>n</code> es un numero del 0 al 9. De seguro, que esto no frenara a las personas de ingresar valores incorrectos de tipo fecha, o formatos incorrectos, como <code>yyyy-dd-mm</code> (mientras que nosotros necesitamos: <code>yyyy-mm-dd</code>). por lo que aún seria un problema...</p> + +<pre>div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> + +<p>La mejor forma de lidiar con fechas en formularios en un navegador cruzado, es pedir al usuario que ingrese el mes, el año y el dia en inputs separados o en formatos de control separados, ({{htmlelement("select")}} elementos que se han hecho populares; Mira abajo para ver la implementación), o usa una libreria de JavaScript como <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En este ejemplo creamos dos sets de elementos tipo UI para elegir fechas: uno nativo <code><input type="date"></code> y otro en un conjunto de tres {{htmlelement("select")}} elementos para elegir la fecha en navegadores antiguos que no soportan un input nativo.</p> + +<p>{{EmbedLiveSample('Examples', 600, 100)}}</p> + +<h3 id="HTML">HTML</h3> + +<p>El codigo HTML se ve como:</p> + +<pre><form> + <div class="nativeDatePicker"> + <label for="bday">Enter your birthday:</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Enter your birthday:</p> + <div class="fallbackDatePicker"> + <span> + <label for="day">Day:</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Month:</label> + <select id="month" name="month"> + <option selected>January</option> + <option>February</option> + <option>March</option> + <option>April</option> + <option>May</option> + <option>June</option> + <option>July</option> + <option>August</option> + <option>September</option> + <option>October</option> + <option>November</option> + <option>December</option> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + </select> + </span> + </div> +</form></pre> + +<p>Los meses son codificados (como son siempre), mientras que el dia y el año son generados dinamicamente dependiendo del mes y el año seleccionado, y el presente año (mira el codigo comentado para ver los detalles de la explicacion y como este funciona.)</p> + +<pre>input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>La otra parte del codigo que podria ser interesante es una caracteristica de detección de codigo— para detectar si el navegador soporta o no <code><input type="date"></code>, creamos un nuevo {{htmlelement("input")}}, seteado de <code>type</code> a <code>date</code>, inmediatamente verifica a que tipo corresponde— para navegadores que no soportan retornara un tipo <code>text</code>, porque el tipo <code>date</code> se volveria en tipo <code>text</code>. Si <code><input type="date"></code> no es soportado, escondemos el control nativo (datepicker nativo) y mostramos el selector tipo UI ({{htmlelement("select")}}) en vez de este.</p> + +<pre class="brush: js">// define variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'date'; + +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the days and years dynamically + // (the months are always the same, therefore hardcoded) + populateDays(monthSelect.value); + populateYears(); +} + +function populateDays(month) { + // delete the current set of <option> elements out of the + // day <select>, ready for the next set to be injected + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // Create variable to hold new number of days to inject + var dayNum; + + // 31 or 30 days? + if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') { + dayNum = 31; + } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') { + dayNum = 30; + } else { + // If month is February, calculate whether it is a leap year or not + var year = yearSelect.value; + (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28; + } + + // inject the right number of new <option> elements into the day <select> + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // if previous day has already been set, set daySelect's value + // to that day, to avoid the day jumping back to 1 when you + // change the year + if(previousDay) { + daySelect.value = previousDay; + + // If the previous day was set to a high number, say 31, and then + // you chose a month with less total days in it (e.g. February), + // this part of the code ensures that the highest day available + // is selected, rather than showing a blank daySelect + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // get this year as a number + var date = new Date(); + var year = date.getFullYear(); + + // Make this year, and the 100 years before it available in the year <select> + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +// when the month or year <select> values are changed, rerun populateDays() +// in case the change affected the number of available days +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +//preserve day selection +var previousDay; + +// update what day has been set to previously +// see end of populateDays() for usage +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Recuerda que algunos años tienen 53 semanas (año bisiesto) (Mira <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Semanas por año</a>)! Tendras que tener esto en consideración cuando desarrolles apps o funciones.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>20</td> + <td>12</td> + <td>{{CompatGeckoDesktop(57)}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5</td> + </tr> + </tbody> +</table> + +<p>[1] Reconoce pero no tiene UI.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li> +</ul> diff --git a/files/es/web/html/elemento/input/datetime/index.html b/files/es/web/html/elemento/input/datetime/index.html new file mode 100644 index 0000000000..f1f4aeac25 --- /dev/null +++ b/files/es/web/html/elemento/input/datetime/index.html @@ -0,0 +1,147 @@ +--- +title: <input type="datetime"> +slug: Web/HTML/Elemento/input/datetime +tags: + - Elemento + - HTML + - Referencia +translation_of: Web/HTML/Element/input/datetime +--- +<p><span class="seoSummary"><dfn>El HTML</dfn><code> <input type="datetime"> </code>es un control para ingresar tiempo y fecha (hora, minuto, segundo y fracción de segundo) basado en la zona horaria UTC . <dfn> </dfn></span></p> + +<ul> + <li><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a> : Contenido dinámico , listed , submittable , resettable , contenido asociado a un formulario , contenido estático o de texto . Si <code>type</code> no tiene el valor <code>hidden </code>, elemenento labelable , contenido palpable .</li> +</ul> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno , es un elemento vacío.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>Debe de tener una etiqueta de inicio y no debe de tener una etiqueta final .</td> + </tr> + <tr> + <th scope="row">Elementos padres permitidos</th> + <td>Cualquier elemento que acepte contenido estático o de texto .</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" title="The HTMLInputElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of input elements."><code>HTMLInputElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>El siguiente elemento tiene los siguientes<a href="/es/docs/Web/HTML/Atributos_Globales"> atributos globales</a> .</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<div class="geckoVersionNote"> +<p><code><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"datetime"</span> <span class="highATT">name=</span><span class="highVAL">"new_year"</span><span class="highGT"> </span></code></p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "forms.html#date-and-time-state-(type=datetime)", "<input type=\"datetime\">")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "semantics.html#date-and-time-state-(type=datetime)", "<input type=\"datetime\">")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] El tipo <code>daytime</code> es reconocido, pero no hay una IU para este.</p> + +<p>[2] Actualmente Gecko no implementa el tipo <code>datetime.</code>Ver {{bug("825294")}}</p> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El elemento {{HTMLElement("input")}}</li> +</ul> diff --git a/files/es/web/html/elemento/input/email/index.html b/files/es/web/html/elemento/input/email/index.html new file mode 100644 index 0000000000..f07953bb29 --- /dev/null +++ b/files/es/web/html/elemento/input/email/index.html @@ -0,0 +1,423 @@ +--- +title: <input type="email"> +slug: Web/HTML/Elemento/input/email +tags: + - Email + - Forms + - Formulários HTML + - HTML + - Input Type + - Referencia + - correoᵉ + - formulários +translation_of: Web/HTML/Element/input/email +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("email")}} se utilizan para permitir que el usuario ingrese y edite una dirección de correoᵉ o, si se especifica el atributo {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, una lista de direcciones de correoᵉ.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div> + +<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div> + +<p>El valor de {{HTMLElement("input")}} se valida automáticamente para garantizar que esté vacío o sea una dirección de correoᵉ con el formato adecuado (o una lista de direcciones) antes de que se pueda enviar el formulario. Las pseudoclases {{CSSxRef(":valid")}} e {{CSSxRef(":invalid")}} de CSS se aplican automáticamente según corresponda para indicar visualmente si el valor actual del campo es una dirección de correoᵉ válida o no.</p> + +<p>En los navegadores que no admiten entradas de tipo <code>email</code>, una entrada de <code>email</code> vuelve a ser un {{HTMLElement("input")}} {{HTMLElement("input/text", "text")}} estándar.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Un {{DOMxRef("DOMString")}} que representa una dirección de correo electrónico o vacío</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{DOMxRef("HTMLElement/change_event", "change")}} y {{DOMxRef("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes admitidos</strong></td> + <td>{{HTMLAttrxRef("autocomplete", "input")}}, {{HTMLAttrxRef("list", "input")}}, {{HTMLAttrxRef("maxlength", "input")}}, {{HTMLAttrxRef("minlength", "input")}}, {{HTMLAttrxRef("multiple", "input")}}, {{HTMLAttrxRef("name", "input")}}, {{HTMLAttrxRef("pattern", "input")}}, {{HTMLAttrxRef("placeholder", "input")}}, {{HTMLAttrxRef("readonly", "input")}}, {{HTMLAttrxRef("required", "input")}}, {{HTMLAttrxRef("size", "input")}} y {{HTMLAttrxRef("type", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code> y <code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value"><code>Value</code></h2> + +<p>El atributo {{HTMLAttrxRef("value", "input")}} del elemento {{HTMLElement("input")}} contiene un {{DOMxRef("DOMString")}} que se valida automáticamente conforme a la sintaxis del correoᵉ. Específicamente, hay tres posibles formatos de valor que pasarán la validación:</p> + +<ol> + <li>Una cadena vacía ("") — indica que el usuario no ingresó un valor o que el valor fue eliminado.</li> + <li>Una única dirección de correoᵉ debidamente formada. Esto no necesariamente significa que exista la dirección de correo electrónico, pero al menos tiene el formato correcto. En términos simples, esto significa <code>nombreusuario@dominio</code> o <code>nombreusuario@dominio.tld</code>. Hay más que eso, por supuesto; consulta {{anch("Validación")}} para obtener una {{Glossary("expresión regular")}} que coincida con el algoritmo de validación de la dirección de correoᵉ.</li> + <li>Si y solo se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correoᵉ correctamente formadas separadas por comas. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.</li> +</ol> + +<p>Consulta {{anch("Validación")}} para obtener detalles sobre cómo se validan las direcciones de correoᵉ para asegurarte de que tengan el formato correcto.</p> + +<h2 id="Atributos_adicionales">Atributos adicionales</h2> + +<p>Además de los atributos que operan en todos los elementos {{HTMLElement("input")}} independientemente de su tipo, las entradas de <code> email </code> admiten los siguientes atributos:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>El id del elemento {{HTMLElement("datalist")}} que contiene las opciones de autocompletar predefinidas</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>El número máximo de caracteres que debe aceptar la entrada</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>El número mínimo de caracteres que la entrada puede tener y aún se considera válida</td> + </tr> + <tr> + <td><code>{{anch("multiple")}}</code></td> + <td>Si se permite o no la introducción de varias direcciones de correoᵉ separadas por comas.</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Una expresión regular que el contenido de la entrada debe coincidir para que sea válida</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Un valor de ejemplo para mostrar en el campo de entrada siempre y cuando esté vacío</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un atributo booleano que indica si el contenido de la entrada debe ser de solo lectura.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un número que indica cuántos caracteres de ancho debe tener el campo de entrada.</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/es/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="HTMLAttrDefmaxlength">{{HTMLAttrDef("maxlength")}}</h3> + +<p>El número máximo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrxRef("email", "input")}}. Debe ser un valor entero 0 o superior. Si no se especifica {{HTMLAttrxRef("maxlength", "input")}}, o se especifica un valor no válido, la entrada de {{HTMLAttrxRef("email", "input")}} no tiene una longitud máxima. Este valor también debe ser mayor o igual que el valor de {{HTMLAttrxRef("minlength", "input")}}.</p> + +<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del valor de texto del campo es mayor que {{HTMLAttrxRef("maxlength", "input")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p> + +<h3 id="HTMLAttrDefminlength">{{HTMLAttrDef("minlength")}}</h3> + +<p>El número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrxRef("email", "input")}}. Debe ser un valor entero no negativo menor o igual al valor especificado por {{HTMLAttrxRef("maxlength", "input")}}. Si no se especifica {{HTMLAttrxRef("minlength", "input")}} o se especifica un valor no válido, la entrada de {{HTMLAttrDef("email")}} no tiene una longitud mínima.</p> + +<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del texto ingresado en el campo es menor que {{HTMLAttrDef("minlength")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p> + +<h3 id="HTMLAttrDefmultiple">{{HTMLAttrDef("multiple")}}</h3> + +<p>Un atributo booleano que, si está presente, indica que el usuario puede ingresar una lista de múltiples direcciones de correoᵉ, separadas por comas y, opcionalmente, espacios en blanco. Consulta {{anch("Permitir varias direcciones de correoᵉ")}} para ver un ejemplo, o {{web.link("/es/docs/Web/HTML/Attributes/multiple", "HTML el atributo: multiple")}} para más detalles.</p> + +<div class="note"> +<p><strong>Nota</strong>: Normalmente, si especificas el atributo {{HTMLAttrxRef("required", "input")}}, el usuario debe ingresar una dirección de correoᵉ válida para que el campo se considere válido. Sin embargo, si agregas el atributo {{HTMLAttrDef("multiple")}}, una lista de cero direcciones de correo electrónico (una cadena vacía o una que sea completamente en blanco) es un valor válido. En otras palabras, el usuario no tiene que ingresar ni siquiera una dirección de correo electrónico cuando se especifica {{HTMLAttrDef("multiple")}}, independientemente del valor de {{HTMLAttrDef("required")}}.</p> +</div> + +<h3 id="HTMLAttrDefpattern">{{HTMLAttrDef("pattern")}}</h3> + +<p>{{page("/es/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Consulta la sección {{anch("Patrón de validación")}} para obtener detalles y ver un ejemplo.</p> + +<p>{{page("/es/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/es/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/es/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Usar_inputs_de_tipo_email">Usar <code>input</code>s de tipo <code>email</code></h2> + +<p>Las direcciones de correoᵉ se encuentran entre los formularios de datos textuales que se ingresan con mayor frecuencia en la web; se utilizan al iniciar sesión en sitios web, al solicitar información, para permitir la confirmación de pedidos, para correo web, etc. Por lo tanto, el tipo de entrada {{HTMLAttrDef("email")}} puede hacer que tu trabajo como desarrollador web sea mucho más fácil, ya que puede ayudar a simplificar la tarea al crear la interfaz de usuario y la lógica para las direcciones de correoᵉ. Cuando creas una entrada de correoᵉ con el valor de {{HTMLAttrDef("type")}} adecuado, {{HTMLAttrDef("email")}}, obtienes validación automática de que el texto ingresado esté por lo menos en la forma correcta para potencialmente ser una dirección de correoᵉ legítima. Esto puede ayudar a evitar casos en los que el usuario escribe mal su dirección o proporciona una dirección no válida.</p> + +<p>Sin embargo, es importante tener en cuenta que esto no es suficiente para garantizar que el texto especificado sea una dirección de correoᵉ que realmente exista, que corresponda al usuario del sitio o que sea aceptable de cualquier otra manera. Simplemente garantiza que el valor del campo tenga el formato adecuado para ser una dirección de correoᵉ.</p> + +<div class="note"> +<p><strong>Nota</strong>: También es crucial recordar que un usuario puede jugar con tu HTML detrás de la escena, por lo que tu sitio <em>no debe</em> utilizar esta validación por motivos de seguridad. <em>Debes</em> verificar la dirección de correoᵉ en el lado del servidor de cualquier transacción en la que el texto proporcionado pueda tener implicaciones de seguridad de cualquier tipo.</p> +</div> + +<h3 id="Una_sencilla_entrada_de_correoᵉ">Una sencilla entrada de correoᵉ</h3> + +<p>Actualmente, todos los navegadores que admiten este elemento lo implementan como un campo de entrada de texto estándar con características básicas de validación. Sin embargo, la especificación permite a los navegadores cierta libertad en esto. Por ejemplo, el elemento se podría integrar con la libreta de direcciones incorporada del dispositivo del usuario para permitir seleccionar direcciones de correoᵉ de esa lista. En su forma más básica, una entrada de tipo {{HTMLAttrDef("email")}} se puede implementar así:</p> + +<pre class="brush: html notranslate"><input id="emailAddress" type="email"></pre> + +<p>{{ EmbedLiveSample('Una_sencilla_entrada_de_correoᵉ', 600, 40) }}</p> + +<p>Ten en cuenta que se considera válido cuando está vacío y cuando se ingresa una única dirección de correoᵉ con formato válido, pero por lo demás no se considera válido. Al agregar el atributo {{HTMLAttrxRef("required", "input")}}, solo se permiten direcciones de correoᵉ con formato válido; la entrada ya no se considera válida cuando está vacía.</p> + +<h3 id="Permitir_varias_direcciones_de_correoᵉ">Permitir varias direcciones de correoᵉ</h3> + +<p>Al agregar el atributo booleano {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, la entrada se puede configurar para aceptar varias direcciones de correoᵉ.</p> + +<pre class="brush: html notranslate"><input id="emailAddress" type="email" multiple></pre> + +<p>{{ EmbedLiveSample('permitir_varias_direcciones_de_correoᵉ', 600, 40) }}</p> + +<p>La entrada ahora se considera válida cuando se ingresa una sola dirección de correoᵉ, o cuando cualquier número de direcciones de correo electrónico separadas por comas y, opcionalmente, algún número de espacios en blanco están presentes.</p> + +<div class="note"> +<p><strong>Nota</strong>: Cuando se utiliza {{HTMLAttrDef("multiple")}}, el valor <em>puede</em> estar vacío.</p> +</div> + +<p>Algunos ejemplos de cadenas válidas cuando se especifica {{HTMLAttrDef("multiple")}}:</p> + +<ul> + <li><code>""</code></li> + <li><code>"yo@ejemplo"</code></li> + <li><code>"yo@ejemplo.org"</code></li> + <li><code>"yo@ejemplo.org,tu@ejemplo.org"</code></li> + <li><code>"yo@ejemplo.org, tu@ejemplo.org"</code></li> + <li><code>"yo@ejemplo.org,tu@example.org, su@ejemplo.org"</code></li> +</ul> + +<p>Algunos ejemplos de cadenas no válidas:</p> + +<ul> + <li><code>","</code></li> + <li><code>"me"</code></li> + <li><code>"me@example.org you@example.org"</code></li> +</ul> + +<h3 id="Marcadores_de_posición">Marcadores de posición</h3> + +<p>A veces es útil ofrecer una pista en contexto sobre qué forma deben tomar los datos de entrada. Esto puede ser importante especialmente si el diseño de la página no ofrece etiquetas descriptivas para cada {{HTMLElement("input")}}. Aquí es donde entran los marcadores de posición ({{HTMLAttrDef("placeholder")}}s). Un marcador de posición es un valor que demuestra la forma que debe tomar el {{HTMLAttrDef("value")}} al presentar un ejemplo de un valor válido, que se muestra dentro del cuadro de edición cuando el valor del elemento es "". Una vez que se ingresan datos en el cuadro, el marcador de posición desaparece; si se vacía la caja, vuelve a aparecer el marcador de posición.</p> + +<p>Aquí, tenemos una entrada de {{HTMLAttrDef("email")}} con el marcador de posición <code>chofy@ejemplo.com</code>. Observa cómo el marcador de posición desaparece y reaparece a medida que manipulas el contenido del campo de edición.</p> + +<pre class="brush: html notranslate"><input type="email" placeholder="chofy@ejemplo.com"></pre> + +<p>{{ EmbedLiveSample('Marcadores_de_posición', 600, 40) }}</p> + +<h3 id="Controlar_el_tamaño_del_valor_ingresado">Controlar el tamaño del valor ingresado</h3> + +<p>Puedes controlar no solo la longitud física del cuadro de entrada, sino también las longitudes mínima y máxima permitidas para el texto de entrada en sí mismo.</p> + +<h4 id="Tamaño_físico_del_elemento_de_entrada">Tamaño físico del elemento de entrada</h4> + +<p>El tamaño físico del cuadro de entrada se puede controlar mediante el atributo {{HTMLAttrxRef("size", "input")}}. Con él, puedes especificar el número de caracteres que el cuadro de entrada puede mostrar a la vez. En este ejemplo, el cuadro de edición {{HTMLAttrDef("email")}} tiene 15 caracteres de ancho:</p> + +<pre class="brush: html notranslate"><input type="email" size="15"></pre> + +<p>{{ EmbedLiveSample('Tamaño_físico_del_elemento_de_entrada', 600, 40) }}</p> + +<h4 id="Longitud_del_valor_del_elemento">Longitud del valor del elemento</h4> + +<p>El {{HTMLAttrDef("size")}} es independiente de la limitación de longitud de la dirección de correoᵉ ingresada, por lo que puedes hacer que los campos quepan en un espacio pequeño y, al mismo tiempo, permitir que se ingresen cadenas de direcciones de correoᵉ más largas. Puedes especificar una longitud mínima, en caracteres, para la dirección de correoᵉ ingresada usando el atributo {{HTMLAttrxRef("minlength", "input")}}; de manera similar, usa {{HTMLAttrxRef("maxlength", "input")}} para establecer la longitud máxima de la dirección de correoᵉ ingresada.</p> + +<p>El siguiente ejemplo crea un cuadro de entrada de dirección de correoᵉ de 32 caracteres de ancho, que requiere que el contenido tenga no menos de 3 caracteres y no más de 64 caracteres.</p> + +<pre class="brush: html notranslate"><input type="email" size="32" minlength="3" maxlength="64"></pre> + +<p>{{EmbedLiveSample("Longitud_del_valor_del_elemento", 600, 40) }}</p> + +<h3 id="Proporcionar_opciones_predeterminadas">Proporcionar opciones predeterminadas</h3> + +<p>Como siempre, puedes proporcionar un valor predeterminado para un cuadro de entrada de tipo <code>email</code> configurando su atributo {{HTMLAttrxRef("value", "input")}}:</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><input type="email" value="usuario@ejemplo.com"></pre> +</div> + +<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p> + +<h4 id="Ofreciendo_valores_sugeridos">Ofreciendo valores sugeridos</h4> + +<p>Yendo un paso más allá, puedes proporcionar una lista de opciones predeterminadas entre las que el usuario puede seleccionar especificando el atributo {{HTMLAttrxRef("list", "input")}}. Esto no limita al usuario a esas opciones, pero le permite seleccionar rápidamente las direcciones de correoᵉ de uso común. Esto también ofrece sugerencias para {{HTMLAttrxRef("autocomplete", "input")}}. El atributo {{HTMLAttrDef("list")}} especifica el ID de un {{HTMLElement("datalist")}}, que a su vez contiene un elemento {{HTMLElement("option")}} por valor sugerido; El valor de cada opción es el valor sugerido correspondiente para el cuadro de entrada de correoᵉ.</p> + +<pre class="brush: html notranslate"><input type="email" size="40" list="defaultEmails"> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample("Ofreciendo_valores_sugeridos", 600, 40)}}</p> + +<p>Con el elemento {{HTMLElement("datalist")}} y sus {{HTMLElement("option")}}es en su lugar, el navegador ofrecerá los valores especificados como valores potenciales para la dirección de correoᵉ; normalmente se presenta como un menú emergente o desplegable que contiene las sugerencias. Si bien la experiencia del usuario específico puede variar de un navegador a otro, normalmente al hacer clic en el cuadro de edición se muestra un menú desplegable con las direcciones de correoᵉ sugeridas. Luego, a medida que el usuario escribe, la lista se filtra para mostrar solo los valores coincidentes. Cada carácter escrito reduce la lista hasta que el usuario realiza una selección o escribe un valor personalizado.</p> + +<p><img alt="Animación: usa la entrada del teclado para filtrar la lista de direcciones de correo electrónico sugeridas" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p> + +<h2 id="Validación">Validación</h2> + +<p>Hay dos niveles de validación de contenido disponibles para las entradas de {{HTMLAttrDef("email")}}. Primero, está el nivel de validación estándar que se ofrece a todos los {{HTMLElement("input")}}s, que automáticamente asegura que el contenido cumple con los requisitos para ser una dirección de correoᵉ válida. Pero también existe la opción de agregar filtros adicionales para garantizar que se satisfagan tus propias necesidades especializadas, si las tienes.</p> + +<div class="warning"> +<p><strong>Importante</strong>: La validación del formulario HTML <em>no</em> sustituye a los scripts que garantizan que los datos ingresados tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).</p> +</div> + +<h3 id="Validación_básica">Validación básica</h3> + +<p>Los navegadores que admiten el tipo de entrada {{HTMLAttrDef("email")}} automáticamente proporcionan una validación para garantizar que solo se introduzca en el cuadro de entrada el texto que coincida con el formato estándar para las direcciones de correoᵉ de Internet. Los navegadores que implementan la especificación deben utilizar un algoritmo equivalente a la siguiente expresión regular:</p> + +<pre class="brush: js notranslate">/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61} + [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ +</pre> + +<p>Para obtener más información sobre cómo funciona la validación de formularios y cómo aprovechar las propiedades de CSS {{CSSxRef(":valid")}} e {{CSSxRef(":invalid")}} para estilizar la entrada en función de si el el valor actual es válido, consulta {{web.link("/es/docs/Learn/HTML/Forms/Form_validation", "Validación de datos de formulario")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Existen problemas de especificación conocidos relacionados con los nombres de dominio internacionales y la validación de direcciones de correo electrónico en HTML. Consulta el <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">error 15489 en W3C</a> para obtener más detalles.</p> +</div> + +<h3 id="Patrón_de_validación">Patrón de validación</h3> + +<p>Si necesitas restringir la dirección de correo electrónico ingresada más allá de "cualquier cadena que parezca una dirección de correo electrónico", puedes usar el atributo {{HTMLAttrxRef("pattern", "input")}} para especificar una {{Glossary("expresión regular")}} con la cual el valor debe coincidir para que sea válido. Si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, cada elemento individual en la lista de valores delimitados por comas debe coincidir con la {{Glossary("expresión regular")}}.</p> + +<p>Por ejemplo, supón que estás creando una página para los empleados de "Best Startup Ever, Inc". lo que les permitirá ponerse en contacto con su departamento de TI para obtener ayuda. En nuestro formulario simplificado, el usuario debe ingresar su dirección de correoᵉ y un mensaje que describa el problema con el que necesita ayuda. Queremos asegurarnos de que el usuario no solo proporcione una dirección de correoᵉ válida, sino que, por motivos de seguridad, requerimos que la dirección sea una dirección de correo electrónico corporativa interna.</p> + +<p>Dado que las entradas de tipo {{HTMLAttrDef("email")}} se comprueban con la validación de la dirección de correoᵉ estándar <em>y</em> el {{HTMLAttrxRef("pattern", "input")}} especificado, se puede implementar así de fácil. Observa cómo:</p> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + font: 16px sans-serif; +} + +.emailBox { + padding-bottom: 20px; +} + +.messageBox { + padding-bottom: 20px; +} + +[parcial]label : + [parcial]line-height: 1.5; +} + +label::after { + content: ":"; +}</pre> +</div> + +<pre class="brush: html notranslate"><form> + <div class="emailBox"> + <label for="emailAddress">Tu dirección de correoᵉ</label><br> + <input id="emailAddress" type="email" size="64" maxLength="64" required + placeholder="nombreusuario@beststartupever.com" pattern=".+@beststartupever.com" + title="Por favor, solo proporciona una dirección de correoᵉ corporativa que te haya proporcionado Best Startup Ever"> + </div> + + <div class="messageBox"> + <label for="message">Solicitud</label><br> + <textarea id="message" cols="80" rows="8" required + placeholder="Mis zapatos están demasiado apretados y he olvidado cómo bailar."></textarea> + </div> + <input type="submit" value="Envía solicitud"> +</form> +</pre> + +<p>{{EmbedLiveSample("Patrón_de_validación", 700, 275)}}</p> + +<p>El {{HTMLElement("form")}} contiene un {{HTMLElement("input")}} de tipo {{HTMLAttrxRef("email", "input")}} para la dirección de correoᵉ del usuario, un {{HTMLElement("textarea")}} para ingresar su mensaje y un {{HTMLElement("input")}} de tipo {{web.link("/es/docs/Web/HTML/Element/input/submit", "submit")}}, que crea un botón para enviar el formulario. Cada cuadro de entrada de texto tiene una {{HTMLElement("label")}} asociada para que el usuario sepa lo que se espera de ellos.</p> + +<p>Échale un vistazo más de cerca al cuadro de entrada de la dirección de correoᵉ. Sus atributos {{HTMLAttrxRef("size", "input")}} y {{HTMLAttrxRef("maxlength", "input")}} se establecen en 64 para mostrar espacio para 64 caracteres en direcciones de correoᵉ y limitar la cantidad de caracteres ingresados realmente a un máximo de 64. Se especifica el atributo {{HTMLAttrxRef("required", "input")}}, lo cual hace obligatorio que se proporcione una dirección de correoᵉ válida.</p> + +<p>Se proporciona un {{HTMLAttrxRef("placeholder", "input")}} apropiado, <code>nombreusuario@beststartupever.com</code>, para demostrar lo que constituye una entrada válida. Esta cadena demuestra que se debe ingresar una dirección de correoᵉ y sugiere que debe ser una cuenta corporativa de "beststartupever.com". Esto se suma al hecho de que el uso del tipo {{HTMLAttrDef("email")}} validará el texto para garantizar que tenga el formato de una dirección de correoᵉ. Si el texto en el cuadro de entrada no es una dirección de correoᵉ, recibirá un mensaje de error similar a este:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p> + +<p>Si dejas las cosas así, al menos estarías validando direcciones de correoᵉ legítimas. Pero quieres ir un paso más allá: quieres asegurarte de que la dirección de correoᵉ tenga el formato "<em>nombreusuario</em>@beststartupever.com". Aquí es donde usarás el {{HTMLAttrxRef("pattern", "input")}}. Establece el {{HTMLAttrDef("pattern")}} en <code>.+@beststartupever.com</code>. Esta simple expresión regular solicita una cadena que consta de al menos un carácter de cualquier tipo, luego una "@" seguida por el nombre de dominio "beststartupever.com".</p> + +<p>Ten en cuenta que esto ni siquiera se acerca a un filtro adecuado para direcciones de correo electrónico válidas; permitiría cosas como "@ beststartupever.com" (tenga en cuenta el espacio inicial) o "@@ beststartupever.com", ninguna de las cuales es válida. Sin embargo, el navegador ejecuta tanto el filtro de dirección de correoᵉ estándar <em>como</em> nuestro patrón personalizado contra el texto especificado. Como resultado, terminamos con una validación que dice "asegúrate de que se asemeje a una dirección de correoᵉ válida, y si lo es, asegúrate de que también sea una dirección beststartupever.com".</p> + +<p>Es recomendable utilizar el atributo {{HTMLAttrxRef("title")}} junto con {{HTMLAttrDef("pattern")}}. Si lo haces, el {{HTMLAttrDef("title")}} <em>debe</em> describir el patrón. Es decir, debe explicar qué formato deben adoptar los datos, en lugar de cualquier otra información. Esto se debe a que el {{HTMLAttrDef("title")}} se puede mostrar o pronunciar como parte de un mensaje de error de validación. Por ejemplo, el navegador puede presentar el mensaje "El texto ingresado no coincide con el patrón requerido". seguido de su {{HTMLAttrDef("title")}} especificado. Si tu {{HTMLAttrDef("title")}} es algo así como "Dirección de correoᵉ", el resultado sería el mensaje "El texto ingresado no coincide con el patrón requerido. Dirección de correoᵉ", no es muy buena.</p> + +<p>Es por eso que, en cambio, especificamos la cadena "Por favor, proporciona solo una dirección de correoᵉ corporativo de Best Startup Ever", Al hacerlo, el mensaje de error completo resultante podría ser algo como "El texto ingresado no coincide con el patrón requerido. Proporciona solo una dirección de correoᵉ corporativo de Best Startup Ever."</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Si tienes problemas al escribir tus expresiones regulares de validación y no funcionan correctamente, consulta la consola de tu navegador; posiblemente haya útiles mensajes de error que te ayudarán a resolver el problema.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Aquí tenemos una entrada de correoᵉ con el ID <code>emailAddress</code> que puede tener un máximo de 256 caracteres. El cuadro de entrada en sí mismo, físicamente tiene 64 caracteres de ancho y muestra el texto <code>usuario@ejemplo.gov</code> como marcador de posición cada vez que el campo está vacío. Además, al utilizar el atributo {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, el cuadro se configura para permitir al usuario ingresar cero o más direcciones de correoᵉ, separadas por comas, como se describe en {{anch("Permitir varias direcciones de correoᵉ")}}. Como toque final, el atributo {{web.link("/es/docs/Web/HTML/Attributes/list", "list")}} contiene el ID de un {{HTMLElement("datalist")}} cuyas {{HTMLElement("option")}}es especifican un conjunto de valores sugeridos que el usuario puede elegir.</p> + +<p>Como toque adicional, el elemento {{HTMLElement("label")}} se utiliza para establecer una etiqueta para el cuadro de entrada de Correoᵉ, con su atributo {{HTMLAttrxRef("for", "label")}} que hace referencia al ID <code>emailAddress</code> del elemento {{HTMLElement("input")}}. Al asociar los dos elementos de esta manera, entonces al hacer clic en la etiqueta se enfocará el elemento de entrada.</p> + +<pre class="brush: html notranslate"><label for="emailAddress">Correoᵉ</label><br/> +<input id="emailAddress" type="email" placeholder="usuario@ejemplo.gov" + list="defaultEmails" size="64" maxlength="256" multiple> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample('Ejemplos', 600, 50)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '<input type="email">')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.input.input-email")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Learn/HTML/Forms", "Guía de formularios HTML")}}</li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/es/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> + <li><code><a href="/es/docs/Web/HTML/Element/input/url"><input type="url"></a></code></li> + <li>Atributos: + <ul> + <li>{{web.link("/es/docs/Web/HTML/Attributes/list", "list")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/minlength", "minlength")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/placeholder", "placeholder")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/readonly", "readonly")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}</li> + </ul> + </li> + <li>{{web.link("/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Compatibilidad de propiedades CSS")}}</li> +</ul> diff --git a/files/es/web/html/elemento/input/hidden/index.html b/files/es/web/html/elemento/input/hidden/index.html new file mode 100644 index 0000000000..b7c1c42126 --- /dev/null +++ b/files/es/web/html/elemento/input/hidden/index.html @@ -0,0 +1,201 @@ +--- +title: <input type="hidden"> +slug: Web/HTML/Elemento/input/hidden +tags: + - Element + - Forms + - HTML + - HTML Form + - Input + - Tipos de Input + - formulários + - hidden +translation_of: Web/HTML/Element/input/hidden +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} elements of type <code><strong>"hidden"</strong></code> let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.</span></p> + +<div class="note"> +<p><strong>Note</strong>: Hay un ejemplo en vivo debajo de las siguientes líneas de código — si esta funcionando correctamente no debería ver algo.</p> +</div> + +<div id="Basic_example"> +<pre class="brush: html"><input id="prodId" name="prodId" type="hidden" value="xm234jq"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>{{domxref("DOMString")}} representando el valor de un campo oculto que se espetra pasar al servidor.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>Ninguno.</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>Ninguno.</td> + </tr> + </tbody> +</table> + +<h2 id="Valor_(Value)">Valor (Value)</h2> + +<p>El atributo {{htmlattrxref("value", "input")}} del elemento {{HTMLElement("input")}} tiene un {{domxref("DOMString")}} que contiene la información oculta que se desea incluir en el formulario cuando sea remitido al servidor. Específicamente no puede ser editado por el usuario o mostrado a éste por medio la interfaz de usuario, aunque puede ser editado por medio de las herramientas para desarrolladores del navegador.</p> + +<div class="warning"> +<p>Mientras que el valor no es desplegado al usuario en el contenido de la página, si es visible —y puede ser modificado—usando las herramientas para desarrolladores de cualquier navegador o la funcionalidad "Ver código fuente" (View Source). No confíe en <code>hidden</code> inputs como una forma de seguridad.</p> +</div> + +<h2 id="Utilizando_hidden_inputs">Utilizando hidden inputs</h2> + +<p>Como se menciono anteriormente, las hidden inputs pueden ser utilizadas donde sea que se quiera incluir información del formulario que el usuario no pueda ver o modificar cuando sea enviado al servidor. Se mostrarán algunos ejemplos que ilustran su uso.</p> + +<h3 id="Seguimiento_de_contenido_editado">Seguimiento de contenido editado</h3> + +<p>Uno de los usos más comunes para los hidden inputs es mantener un seguimiento de que registros de la base de datos necesitan actualizarse cuando un formulario de actualización es remitido. Un flujo de trabajo tipico se ve como:</p> + +<ol> + <li>El usuario decide editar algún contenido sobre el cual tiene control, como una entrada de blog o la entrada de un producto. Comienza cuando se presiona el botón de editar.</li> + <li>El contenido ha ser editado es tomado de la base de datos y cargados en un formulario HTML para permitir al usuario hacer cambios.</li> + <li>Después de editar, el usuario remite el formulario y la información actualizada es envíada de vuelta al servidor para ser actualizada en el servidor.</li> +</ol> + +<p>La idea es que durante el paso 2, el ID del registro que se actualiza se mantenga en un hidden input. Cuando se envía el formulario en el paso 3, el ID se envía automáticamente al servidor con el contenido del registro. El ID permite que el componente de servidor del sitio sepa exactamente qué registro necesita ser actualizado con los datos enviados.</p> + +<p>Puede ver un ejemplo completo de como podría ser en la sección {{anch("Examples")}} de abajo.</p> + +<h3 id="Mejorando_la_seguridad_del_sitio_web">Mejorando la seguridad del sitio web</h3> + +<p>Hidden inputs también son usados para almacenar y enviar token de seguirdad o secretos (<em>secrets)</em>, con el propósito de mejorar la seguridad del sitio web. La idea básica es que si un usuario esta rellenando un formulario con información sensible, como un formulario en un sitio web bancario para transferir dinero a otra cuenta, el secreto que proporciona demostraría que son quienes dicen ser y que estan usando el formulario correcto para enviar la solicitud de transferencia.</p> + +<p>Esto evitaría que un usuario malicioso creara un formulario falso, fingiendo ser un banco y enviando el formulario por correo electrónico a usuarios desprevenidos para engañarlos y que transfieran dinero al lugar equivocado. Este tipo de ataque es llamado como <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security#Cross_Site_Request_Forgery_(CSRF)">Cross Site Request Forgery (CSRF)</a>; prácticamente cualquier marco de trabajo que goce de buena reputación utiliza secretos ocultos para evitar tales ataques.</p> + +<div class="note"> +<p>Como se menciono anteriormenre, colocando el secreto en un hidden input no lo hace inherentemente seguro. La composición y codificación de la llave haría eso. El valor del hidden input es que mantiene el secreto asociado con la información y automáticamente lo incluye cuando el formulario es enviado al servidor. Se necesita usar secretos bien diseñados para realmente mantener seguro el sitio web.</p> +</div> + +<h2 id="Validación">Validación</h2> + +<p>Hidden inputs no participan en la validación de restricciones; no son un valor real que deba ser restringido.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En el código de abajo se muestra como se puede implementar una versión simple de un formulario de actualización descrito anteriomente (ver {{anch("Tracking edited content")}}), utilizando un hidden input para recordar el ID del registro ha ser editado.</p> + +<p>El formulario HTML puede verse un como como este:</p> + +<pre class="brush: html"><form> + <div> + <label for="title">Título del artículo:</label> + <input type="text" id="titulo" name="titulo" value="Mi excelente artículo del blog"> + </div> + <div> + <label for="content">Contenido del artículo:</label> + <textarea id="contenido" name="contenido" cols="60" rows="5"> +Este es el contenido de mi excelente actículo del blog. ¡Espero lo disfrutes! + </textarea> + </div> + <div> + <button type="submit">Actualizar artículo</button> + </div> + <input type="hidden" id="acticuloId" name="articuloId" value="34657"> +</form></pre> + +<p>Añadiendo también unas líneas simples de CSS:</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 500px; +} + +div { + display: flex; + margin-bottom: 10px; +} + +label { + flex: 2; + line-height: 2; + text-align: right; + padding-right: 20px; +} + +input, textarea { + flex: 7; + font-family: sans-serif; + font-size: 1.1rem; + padding: 5px; +} + +textarea { + height: 60px; +}</pre> + +<p>El servidor establecerá el valor del hidden input con el ID <code>"articuloID"</code> al ID del artículo en la base de datos antes de enviar el formulario al navegador del usuario, y se usará esa información cuando el formulario sea devuelto para saber que registro de la base de datos actualizar con la información modificada. No se necesitan scripts en el contenido para manejar esto.</p> + +<p>La salida se vería como:</p> + +<p>{{ EmbedLiveSample('Examples', '100%', 200) }}</p> + +<div class="note"> +<p><strong>Nota:</strong> Puede encontrar el ejemplo en GitHub (vea el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">código fuente</a>, y también <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">veálo corriendo en vivo</a>).</p> +</div> + +<p>Cuando se envían, los datos del formulario enviados al servidor tendrán un aspecto parecido a este:</p> + +<p><code>title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657</code></p> + +<p>A pesar de que los hiden input no se pueden ver en absoluto, sus datos se siguen enviando.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2> + + + +<p>{{Compat("html.elements.input.input-hidden")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li> + <li>{{HTMLElement("input")}} y la interfaz {{domxref("HTMLInputElement")}} en la que se basa</li> +</ul> diff --git a/files/es/web/html/elemento/input/index.html b/files/es/web/html/elemento/input/index.html new file mode 100644 index 0000000000..7af5101141 --- /dev/null +++ b/files/es/web/html/elemento/input/index.html @@ -0,0 +1,1529 @@ +--- +title: input +slug: Web/HTML/Elemento/input +tags: + - Elemento + - Etiqueta HTML input + - Formularios(2) + - HTML + - Referencia + - Web + - formularios html(2) +translation_of: Web/HTML/Element/input +--- +<h2 id="Resumen">Resumen</h2> + +<p>El elemento HTML <code><input></code> se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario.<span class="tlid-translation translation" lang="es"><span title="">Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que dependen del dispositivo y el agente de usuario (<a href="/en-US/docs/Glossary/user_agent">user agent</a>).El elemento </span></span><code><input></code><span class="tlid-translation translation" lang="es"><span title=""> es uno de los más potentes y complejos en todo HTML debido a la gran cantidad de combinaciones de tipos y atributos de entrada.</span></span></p> + +<p> </p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, enlistado, presentable, reajustable, elemento asociado a formulario, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual</a>. Si su atributo {{htmlattrxref("type", "input")}} no es <code>hidden</code>, entonces contenido etiquetable, contenido palpable.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno, pues es un {{Glossary("empty element", "elemento vacío")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>Debe tener una etiqueta de apertura y no debe tener etiqueta de cierre.</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales" rel="internal" title="en/HTML/Global attributes">atributos globales</a>, y los indicados a continuación.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>El tipo de control a mostrar. Su valor predeterminado es <code>text</code>, si no se especifica este atributo. Los posibles valores son: + <ul> + <li><code>button</code>: Botón sin un comportamiento específico.</li> + <li><code>checkbox</code>: Casilla de selección. Se debe usar el atributo <strong>value</strong> para definir el valor que se enviará por este elemento. Se usa el atributo <strong>checked</strong> para indicar si el elemento está seleccionado. También se puede usar el atributo <strong>indeterminate</strong> (el cual solo se puede establecer programaticamente) para indicar que la casilla está en un estado indeterminado (en la mayoría de las plataformas, se dibuja una línea horizontal a través de la casilla).</li> + <li><code>color</code>: {{HTMLVersionInline("5")}} Control para espicificar un color. Una interfaz de selección de color no requiere más funcionalidad que la de aceptar colores simples como texto (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">más información</a>).</li> + <li><code>date</code>: {{HTMLVersionInline("5")}} Control para introducir una fecha (año, mes y día, sin tiempo).</li> + <li><code>datetime</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} Control para introducir una fecha y hora (horas, minutos, segundos y fracción de segundo), basado en la zona horaria UTC. <strong>Esta característica ha sido <a href="https://github.com/whatwg/html/issues/336">removida de WHATWG HTML.</a></strong></li> + <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} Control para introducir fecha y hora, sin zona horaria específica.</li> + <li><code>email</code>: {{HTMLVersionInline("5")}} Campo para introducir una dirección de correo electrónico. El valor introducido se valida para que contenga una cadena vacía o una dirección de correo válida antes de enviarse. Las pseudo-clases {{cssxref(":valid")}} y {{cssxref(":invalid")}} son aplicadas segun corresponda.</li> + <li><code>file</code>: Control que permite al usuario seleccionar un archivo. Se puede usar el atributo <strong>accept</strong> para definir los tipos de archivo que el control podrá seleccionar.</li> + <li><code>hidden</code>: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.</li> + <li><code>image</code>: Botón de envío de formulario con gráfico. Se debe usar el atributo <strong>src</strong> para definir el origen de la imagen y el atributo <strong>alt</strong> para definir un texto alternativo. Se puede usar los atributos <strong>height</strong> y <strong>width</strong> para definir el tamaño de la imagen en píxeles.</li> + <li><code>month</code>: {{HTMLVersionInline("5")}} Control para introducir un mes y año, sin zona horaria específica.</li> + <li><code>number</code>: {{HTMLVersionInline("5")}} Control para introducir un número de punto flotante.</li> + <li><code>password</code>: Control de línea simple cuyo valor permanece oculto. Se puede usar el atributo <strong>maxlength</strong> para especificar la longitud máxima del valor que se puede introducir.</li> + <li><code>radio</code>: Botón radio. Se debe usar el atributo <strong>value</strong> para definir el valor que se enviará por este elemento. Se usa el atributo <strong>checked</strong> para indicar si el elemento está seleccionado de forma predeterminada. Los botones radio que tengan el mismo valor para su atributo <strong>name</strong> están dentro del mismo "grupo de botones radio". Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.</li> + <li><code>range</code>: {{HTMLVersionInline("5")}} Control para introducir un número cuyo valor exacto no es importante. Este control usa los siguientes valores predeterminados si no se especifica cada atributo: + <ul> + <li><code>min</code>: 0</li> + <li><code>max</code>: 100</li> + <li><code>value</code>: <code>min</code> + (<code>max -</code> <code>min</code>) / 2, o <code>min</code> si <code>max</code> es menor que <code>min</code></li> + <li><code>step</code>: 1</li> + </ul> + </li> + <li><code>reset</code>: Botón que restaura los contenidos de un formulario a sus valores predeterminados.</li> + <li><code>search</code>: {{HTMLVersionInline("5")}} Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos de línea son eliminados automáticamente del valor introducido.</li> + <li><code>submit</code>: Botón que envía el formulario.</li> + <li><code>tel</code>: {{HTMLVersionInline("5")}} Control para introducir un número telefónico. Los saltos de línea son eliminados automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos como <strong>pattern</strong> y <strong>maxlength</strong> para restringir los valores introducidos en este control. Las pseudo-clases CSS {{cssxref(":valid")}} y {{cssxref(":invalid")}} son aplicadas segun corresponda.</li> + <li><code>text</code>: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.</li> + <li><code>time</code>: {{HTMLVersionInline("5")}} Control para introducir un valor de tiempo sin zona horaria específica.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} Campo para editar una URL. El valor introducido se valida para que contenga una cadena vacía o una ruta URL absoluta antes de enviarse. Los saltos de línea y espacios en blanco al principio o al final del valor son eliminados automáticamente. Se pueden usar atributos como <strong>pattern</strong> y <strong>maxlength</strong> para restringir los valores introducidos en el control. Las pseudo-clases {{cssxref(":valid")}} y {{cssxref(":invalid")}} son aplicadas segun corresponda.</li> + <li><code>week</code>: {{HTMLVersionInline("5")}} Control para introducir una fecha que consiste en número de semana del año y número de semana sin zona horaria específica.</li> + </ul> + </dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>Si el valor del atributo <strong>type</strong> es <code>file</code>, este atributo indica los tipos de archivo que el servidor acepta, de otra manera será ignorado. El valor debe ser una lista de tipos de contenido únicos, separados por coma: + <ul> + <li>Una extensión de archivo, comenzando por el caracter STOP (U+002E). (Ejemplos: ".jpg,.png,.doc")</li> + <li>Un tipo MIME válido sin extensiones</li> + <li><code>audio/*</code>, que representa archivos de audio {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code>, que representa archivos de vídeo {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code>, que representa archivos de imagen {{HTMLVersionInline("5")}}</li> + </ul> + </dd> + <dt>{{htmlattrdef("accesskey")}} sólo {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>Un caracter que el usuario puede presionar para establecer el cursor en el control. Este atributo es global en HTML5.</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Especifica una "pista de acción" usada para determinar cómo etiquetar la tecla "enter" en dispositivos móviles con teclados virtuales. Los valores soportados son <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, y <code>send</code>. Esto queda automáticamente mapeado al texto apropiado y no son sensibles al uso de mayúsculas.</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Atributo no estándar usado por <a href="https://developers.google.com/web/updates/2015/04/autocapitalize">Chrome</a> e iOS Safari Mobile, el cual controla si se deben cambiar los textos a mayúsculas automáticamente mientras son introducidos/editados por el usuario, y la forma en que esto se hará. Los valores no obsoletos están disponibles en iOS5 y superior. Los valores posibles son: + <ul> + <li><code>none</code>: Deshabilita completamente las mayúsculas automáticas.</li> + <li><code>sentences</code>: Cambia automáticamente a mayúscula la primera letra de la sentencia.</li> + <li><code>words</code>: Cambia automáticamente a mayúscula la primera letra de cada palabra.</li> + <li><code>characters</code>: Cambia automáticamente a mayúscula todos los caracteres.</li> + <li><code>on</code>: {{deprecated_inline}} Obsoleto desde iOS 5.</li> + <li><code>off</code>: {{deprecated_inline}} Obsoleto desde iOS 5.</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize">Documentation sobre <code>autocapitalize</code> en la Referencia HTML de Safari</a></dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo indica si el valor del control puede ser completado automáticamente por el navegador.</dd> + <dd>Los valores posibles son: + <ul> + <li><code>off</code>: El usuario debe explícitamente introducir un valor en este campo para cualquier uso, o el documento provee su propio método de auto-completado. El navegador no completa automáticamente lo introducido.</li> + <li><code>on</code>: Se permite al navegador completar automáticamente el valor basado en los valores que se han introducido previamente. Sin embargo, <code>on</code> no provee mayor información sobre qué clase de datos podría esperar el usuario introducir.</li> + <li><code>name</code>: Nombre completo.</li> + <li><code>honorific-prefix</code>: Prefixo o título (Ejemplos: "Sr.", "Sra.", "Dr.", "Srita.").</li> + <li><code>given-name</code>: Nombre de pila.</li> + <li><code>additional-name</code>: Segundo nombre.</li> + <li><code>family-name</code>: Apellido.</li> + <li><code>honorific-suffix</code>: Sufijo (Ejemplos: "Hijo", "Señor", "II").</li> + <li><code>nickname</code>: Apodo.</li> + <li><code>email</code>: Correo electrónico.</li> + <li><code>username</code>: Nombre de usuario.</li> + <li><code>new-password</code>: Nueva contraseña (por ejemplo, al crear una cuenta o cambiar la contraseña).</li> + <li><code>current-password</code>: Contraseña actual.</li> + <li><code>organization-title</code>: Título de organización (Ejemplos: "Ingeniero de Software", "Vicepresidente", "Director General Adjunto").</li> + <li><code>organization</code>: Organización.</li> + <li><code>street-address</code>: Calle (en dirección).</li> + <li><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code>, <code>address-level4</code>, <code>address-level3</code>, <code>address-level2</code>, <code>address-level1</code>: Valores para dirección.</li> + <li><code>country</code>: País.</li> + <li><code>country-name</code>: Nombre del país.</li> + <li><code>postal-code</code>: Código postal.</li> + <li><code>cc-name</code>: Nombre completo en un instrumento de pago.</li> + <li><code>cc-given-name</code>: Nombre de pila en un instrumento de pago.</li> + <li><code>cc-additional-name</code>: Segundo nombre en un instrumento de pago.</li> + <li><code>cc-family-name</code>: Apellido en un instrumento de pago.</li> + <li><code>cc-number</code>: Código de identificación de un instrumento de pago(por ejemplo, el número de tarjeta de crédito).</li> + <li><code>cc-exp:</code> Fecha de expiración de un instrumento de pago.</li> + <li><code>cc-exp-month</code>: Mes de expiración en un instrumento de pago.</li> + <li><code>cc-exp-year</code>: Año de expiración en un instrumento de pago.</li> + <li><code>cc-csc</code>: Código de seguridad en un instrumento de pago.</li> + <li><code>cc-type</code>: Tipo de instrumento de pago (por ejemplo, Visa).</li> + <li><code>transaction-currency</code>: Tipo de moneda de la transacción.</li> + <li><code>transaction-amount</code>: Monto de la transacción.</li> + <li><code>language</code>: Idioma preferido, etiqueta BCP 47 válida.</li> + <li><code>bday</code>: Fecha de cumpleaños.</li> + <li><code>bday-day</code>: Día de cumpleaños.</li> + <li><code>bday-month</code>: Mes de cumpleaños.</li> + <li><code>bday-year</code>: Año de cumpleaños.</li> + <li><code>sex</code>: Sexo (ejemplos, Femenino, Female, Fa'afafine), texto libre, sin líneas nuevas.</li> + <li><code>tel</code>: Teléfono.</li> + <li><code>url</code>: Dirección web correspondiente a la compañía, persona, dirección o información de contacto en los demás campos asociados a éste.</li> + <li><code>photo</code>: Fotografía, ícono u otra imagen correspondiente a la compañía, persona, dirección o información de contacto en los otros campos asociados a éste.</li> + </ul> + + <p>Véase el <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">Estándar WHATWG</a> para információn más detallada.</p> + + <p>Si el atributo <strong>autocomplete</strong> no está especificado en un elemento input, el navegador usa el atributo <strong>autocomplete</strong> del formulario al que pertenece el elemento <code><input></code>, es decir, el elemento <code>form</code> del cual es descendiente el elemento <code><input></code>, o aquél cuyo <strong>id</strong> está especificado en el atributo <strong>form</strong> del elemento input. Para mayor información, véase el atributo {{htmlattrxref("autocomplete", "form")}} en {{HTMLElement("form")}}.</p> + + <p>El atributo <strong>autocomplete</strong> también controla si Firefox, a diferencia de otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistirá el estado deshabilitado dinámico, y (si aplica) la selección dinámica</a> de un <code><input></code> a través de las cargas de la página. La característica de persistencia está habilitada de forma predeterminada. Estableciendo el valor de <strong>autocomplete</strong> como <code>off</code> se deshabilita esta característica. Esto funciona aún cuando el atributo <strong>autocomplete</strong> no se aplicaría normalmente al <code><input></code> en virtud de su atributo <strong>type</strong>. Véase {{bug(654072)}}.</p> + + <p>Para navegadores más modernos (incluyendo Firefox 38+, Google Chrome 34+, IE 11+), establecer el atributo <strong>autocomplete</strong> <em>no</em> previene que el administrador de contraseñas del navegador le pregunte al usuario si desea guardar la información de inicio de sesión (usuario y contraseña), ni tampoco, de permitirlo el usuario, que se autocompleten estos campos la próxima vez que el usuario visite la página. Véase <a href="/es/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">El atributo autocomplete y campos de inicio de sesión</a>.</p> + </dd> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>Es un atributo no estándar, soportado por Safari, que es usado para controlar si la autocorrección debe estar habilitada cuando el usuario está introduciendo/editando el texto de un <code><input></code>. Los valores posibles de este atributo son: + <ul> + <li><code>on</code>: Habilita la autocorrección</li> + <li><code>off</code>: Deshabilita la autocorrección</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect">Documentación de <code>autocorrect</code> en la Referencia HTML de Safari</a></dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo Booleano permite especificar que un control de formulario tenga el cursor cuando la página se carga, a menos que el usuario lo reemplace, por ejemplo, escribiendo en un control diferente. Solo un elemento de formulario en un mismo documento puede tener el atributo <strong>autofocus</strong>, el cual es Booleano. No puede ser aplicado si el atributo <strong>type</strong> tiene valor <code>hidden</code> (es decir, no se puede establecer automáticamente el cursor en un control oculto). Nótese que el cursor se podría establecer en el control antes de disparar el evento <a href="/es/docs/Web/Events/DOMContentLoaded"><code>DOMContentLoaded</code>.</a></dd> + <dt>{{htmlattrdef("capture")}}</dt> + <dd> + <p>Cuando el valor del atributo <strong>type</strong> es <code>file</code>, la presencia de este atributo Booleano indica que se le dará preferencia a la captura del medio directamente del ambiente del dispositivo, usando algún <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">mecanismo de captura de medios</a>.</p> + </dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>Cuando el valor del atributo <strong>type</strong> es <code>radio</code> o <code>checkbox</code>, la presencia de este atributo Booleano indica que el control está seleccionado de forma predeterminada. De lo contrario, será ignorado.</p> + + <p>En Firefox, a diferencia de otros navegadores, de forma predeterminada, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">se persiste el estado de selección dinámico</a> en un <code><input></code> a través de las cargas de la página. Para controlar esta característica se usa el atributo {{htmlattrxref("autocomplete","input")}}.</p> + </dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Este atributo Booleano indica que el control no está disponible para interacción. En particular, el evento <code>click</code> <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">no será invocado</a> en controles deshabilitados. De igual forma, el valor de un control deshabilitado no es enviado con el formulario.</p> + + <p>En Firefox, a diferencia de otros navegadores, de forma predeterminada, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">se persiste el estado de selección dinámico</a> en un <code><input></code> a través de las cargas de la página. Para controlar esta característica se usa el atributo {{htmlattrxref("autocomplete","input")}}.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>El elemento form al que está asociado el elemento (su <em>formulario propietario</em>). El valor del atributo debe ser el <strong>id</strong> de un elemento {{HTMLElement("form")}} en el mismo documento. Si el atributo no es especificado, este elemento <code><input></code> deberá ser descendiente de un elemento {{HTMLElement("form")}}. Este atributo permite poner elementos <code><input></code> en cualquier parte dentro de un documento, no solamente como descendientes de su formulario. Un input puede ser asociado sólo con un formulario.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>El URI de un programa que procesa la información enviada por el elemento input, cuando es un botón de tipo <code>submit</code> o <code>image</code>. Si se especifica, reemplaza al atributo {{htmlattrxref("action","form")}} del formulario al que pertenece el elemento.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el elemento es de tipo <code>submit</code> o <code>image</code>, este atributo especifica el tipo de contenido que es usado para enviar el formulario al servidor. Los valores posibles son: + <ul> + <li><code>application/x-www-form-urlencoded</code>: El valor predeterminado si el atributo no es especificado.</li> + <li><code>multipart/form-data</code>: Se usa este valor cuando se tiene un elemento <code><input></code> con atributo {{htmlattrxref("type","input")}} de valor <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("enctype","form")}} del formulario al que pertenece el elemento.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el elemento input es un botón de tipo <code>submit</code> o <code>image</code>, este atributo especifica el método HTTP que el navegador usará para enviar el formulario. Los valores posibles son: + <ul> + <li><code>post</code>: Los datos del formulario son incluidos en el cuerpo del formulario, y enviados al servidor.</li> + <li><code>get</code>: Los datos del formulario son añadidos al URI del <strong>form</strong> con un símbolo '?' como separador, y el URI resultante es enviado al servidor. Se usa este método cuando el formulario no tiene efectos secundarios y contiene solamente caracteres ASCII.</li> + </ul> + + <p>Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("method","form")}} del formulario al que pertenece el elemento.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el elemento input es de tipo <code>submit</code> o <code>image</code>, este atributo Booleano especifica que el formulario no será validado cuando se envíe. Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("novalidate","form")}} del formulario al que pertenece el elemento.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el elemento input es de tipo <code>submit</code> o <code>image</code>, este atributo es el nombre o palabra clave que indica dónde mostrar la respuesta que se recibe después de enviar el formulario. Este es el nombre, o palabra clave, de un <em>contexto de navegación</em> (por ejemplo, pestaña, ventana o frame incrustado). Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("target", "form")}} del formulario al que pertenece el elemento. Las siguientes palabras clave tienen significado especial: + <ul> + <li>_<code>self</code>: Carga la respuesta en el mismo contexto de navegación actual. Este valor es el predeterminado cuando no se especifica el atributo.</li> + <li><code>_blank</code>: Carga la respuesta en un contexto de navegación nuevo.</li> + <li><code>_parent</code>: Carga la respuesta en el contexto de navegación padre del actual. Si no hay contexto padre, se comporta de la misma forma que <code>_self</code>.</li> + <li><code>_top</code>: Carga la respuesta en el contexto de navegación principal (es decir, el contexto que es ancestro del actual y que no tenga padre). Si no hay contexto padre, se comporta de la misma forma que <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el valor del atributo <strong>type</strong> es <code>image</code>, este atributo define la altura de la imagen mostrada para el botón.</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>Es un atributo no estándar, soportado por WebKit (Safari) y Blink (Chrome), que solo aplica cuando el atributo <strong>type</strong> es <code>search</code>. Si el atributo está presente, sin importar su valor, el <code><input></code> dispara eventos <a href="/en-US/docs/Web/Events/search"><code>search</code></a> conforme el usuario edita el valor. El evento solo es disparado después de que un tiempo definido en implementación haya pasado desde la última vez que se presionó una tecla. Si el atributo está ausente, el evento <a href="/en-US/docs/Web/Events/search"><code>search</code></a> solo se disparará cuando el usuario explícitamente inicie una búsqueda (por ejemplo, presionando la tecla Enter dentro del control). <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-incremental"> Documentación de <code>incremental en la Referencia HTML de Safari</code></a></dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>Una pista para el navegador sobre qué teclado mostrar. Este atributo aplica cuando el valor del atributo <strong>type</strong> es text, password, email, o url. Los valores posibles son: + <ul> + <li><code>verbatim</code>: Alfanumérico, sin contenido con significado, como nombres de usuario o contraseñas.</li> + <li><code>latin</code>: Escritura en caracteres de latín, en el lenguaje de elección del usuario, con ayuda de escritura, como predicción de texto. Para comunicación humano-computadora, como en cuadros de búsqueda.</li> + <li><code>latin-name</code>: Como <em>latin</em>, pero con nombres de personas.</li> + <li><code>latin-prose</code>: Como <em>latin</em>, pero con ayuda de escritura más agresiva. Para comunicación humano-humano, como mensajería instantánea o correo electrónico.</li> + <li><code>full-width-latin</code>: Como <em>latin-prose</em>, pero para idiomas secundarios del usuario.</li> + <li><code>kana</code>: Escritura en kana o romaji, típicamente escritura en hiragana, usando caracteres de anchura completa, con soporte para conversión a kanji. Usado para escritura en japonés.</li> + <li><code>katakana</code>: Escritura en katakana, usando caracteres de anchura completa, con soporte para conversión a kanji. Usado para escritura en japonés.</li> + <li><code>numeric</code>: Escritura en caracteres numéricos, incluyendo teclas para los dígitos de 0 a 9, el separador de miles segun las preferencias del usuario, y el caracter para indicar números negativos. Destinado a códigos numéricos, por ejemplo, números de tarjeta de crédito. Para valores numéricos reales, es preferible usar <input type="number"> en lugar de este atributo.</li> + <li><code>tel</code>: Escritura de teléfonos, incluído las teclas de asterisco y gato. Es preferible el uso de <input type="tel"> en lugar de este atributo.</li> + <li><code>email</code>: Escritura de correo electrónico. Es preferible el uso de <input type="email"> en lugar de este atributo.</li> + <li><code>url</code>: Escritura de URL. Es preferible el uso de <input type="url"> en lugar de este atributo.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>Identifica una lista de opciones predefinidas como sugerencias al usuario. El valor debe ser el <strong>id</strong> de un elemento {{HTMLElement("datalist")}} en el mismo documento. El navegador muestra solamente las opciones que son válidas para el elemento. Este atributo es ignorado cuando el atributo <strong>type</strong> tiene valor <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, o algun tipo de botón.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>El valor máximo (numérico o fecha-hora) para este elemento, el cual no debe ser menor que su valor mínimo (atributo <strong>min</strong>).</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd> + <p>Si el valor del atributo <strong>type</strong> es <code>text</code>, <code>email</code>, <code>search</code>, <code>password</code>, <code>tel</code>, o <code>url</code>, este atributo especifica el número máximo de caracteres (en puntos de código Unicode) que el usuario puede introducir. Para los otros tipos de control, es ignorado. Puede exceder el valor del atributo <strong>size</strong>. Si no se especifica, el usuario puede introducir una cantidad ilimitada de caracteres. Especificar un número negativo resulta en el comportamiento predeterminado (es decir, el usuario puede introducir una cantidad ilimitada de caracteres). La restricción es evaluada sólo cuando el valor del atributo ha sido modificado.</p> + </dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>El valor mínimo (numérico o fecha-hora) para este elemento, el cual no debe ser mayor a su valor máximo (atributo <strong>max</strong>).</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el valor del atributo <strong>type</strong> es <code>text</code>, <code>email</code>, <code>search</code>, <code>password</code>, <code>tel</code>, o <code>url</code>, este atributo especifica la longitud mínima de caracteres (en puntos de código Unicode) que el usuario puede introducir. Para los otros tipos de control, es ignorado.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo Booleano indica si el usuario puede introducir más de un valor. Este atributo aplica cuando el atributo <strong>type</strong> es <code>email</code> o <code>file</code>, y en caso contrario es ignorado.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>El nombre del control, el cual es enviado con los datos del formulario.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>Una expresión regular contra la que el valor es evaluado. El patrón debe coincidir con el valor completo, no solo una parte. Se puede usar el atributo <strong>title</strong> para describir el patrón como ayuda al usuario. Este atributo aplica cuando el atributo <strong>type</strong> es <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, o <code>password</code>, y en caso contrario es ignorado. El lenguaje de expresión regular es el mismo que el algoritmo {{jsxref("RegExp")}} de JavaScript, con el parámetro <code>'u'</code> que permite tratar al patrón como una secuencia de código Unicode. El patrón no va rodeado por diagonales.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>Una pista para el usuario sobre lo que puede introducir en el control. El texto no debe contener saltos de línea. + <div class="note"><strong>Nota:</strong> No se debe usar el atributo <code>placeholder</code> en lugar de un elemento {{HTMLElement("label")}}, pues sus propósitos son diferentes. El elemento {{HTMLElement("label")}} describe el rol del elemento en el formulario (es decir, indica qué tipo de información se espera), y el atributo <code>placeholder</code> es una pista sobre el formato que debe tener el contenido. Hay casos en los que el atributo <code>placeholder</code> no es visible para el usuario, por lo que el formulario debe ser comprensible para el usuario aunque este atributo no esté presente.</div> + </dd> + <dt>{{htmlattrdef("readonly")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo indica que el usuario no puede modificar el valor del control. El valor del atributo es irrelevante. De ser necesario el acceso lectura-escritura al valor, <em>no</em> se debe agregar el atributo "<strong>readonly</strong>". Es ignorado si el atributo <strong>type</strong> es <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, o de tipo botón (como <code>button</code> o <code>submit</code>).</dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo especifica que el usuario debe llenar el control antes de enviarlo al formulario. No puede ser usado cuando el atributo <strong>type</strong> es <code>hidden</code>, <code>image</code>, o de tipo botón (<code>submit</code>, <code>reset</code>, o <code>button</code>). Las pseudo-clases {{cssxref(":optional")}} y {{cssxref(":required")}} se aplicarán al campo según sea apropiado.</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>Este es un atributo no estándar, soportado por Safari, que sólo aplica cuando el atributo <strong>type</strong> es <code>search</code>. Es usado para controlar el máximo número de entradas que se deben mostrar en el listado nativo del <code><input></code> de búsquedas pasadas. Este valor debe ser un número entero no negativo.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>La dirección en la que ocurre la selección. Esto es "forward" (hacia adelante) si la selección fue hecha de izquierda a derecha en una escritura LTR o izquierda a derecha en una escritura RTL, o "backward" (hacia atrás) si la selección fue hecha de forma opuesta. Puede ser "none" si la dirección de selección es desconocida.</dd> + <dt>{{htmlattrdef("selectionEnd")}}</dt> + <dd>La separación dentro del contenido de texto del último caracter seleccionado. Si no hay selección, este valor indica la separación para el caracter que sigue a la posición actual del cursor (es decir, la posición que el siguiente caracter que se escriba ocupará).</dd> + <dt>{{htmlattrdef("selectionStart")}}</dt> + <dd>La separación dentro del contenido del primer caracter seleccionado. Si no hay selección, este valor indica la separación para el caracter que sigue a la posición actual del cursor (es decir, la posición que el siguiente caracter que se escriba ocupará).</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>El tamaño inicial del control. Este valor es en píxeles, a menos que el atributo <strong>type</strong> sea <code>text</code> o <code>password</code>, en cuyo caso será el número entero de caracteres. A partir de HTML5, este atributo aplica sólo cuando el atributo <strong>type</strong> es <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, o <code>password</code>, de otro modo es ignorado. Además, el tamaño debe ser mayor a cero. Si no se especifica un tamaño, se usa un valor predeterminado de 20. HTML5 simplemente establece que "el agente usuario debe asegurarse que al menos esa cantidad de caracteres sea visible", pero los caracteres pueden tener anchuras diferentes en ciertas fuentes. En algunos navegadores, una cadena con <em>x</em> caracteres no será completamente visible aunque su tamaño esté definido con un mínimo de <em>x</em>.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si se establece este atributo con valor <code>true</code>, se está indicando que se debe revisar la ortografía y gramática del elemento. El valor <code>default</code> indica que el elemento va a actuar acorde al comportamiento predeterminado del navegador, posiblemente basado en el valor del atributo <code>spellcheck</code> de su elemento padre. El valor <code>false</code> indica que el elemento no debe ser revisado.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Si el atributo <strong>type</strong> es <code>image</code>, este atributo especifica el URI para la ubicación de la imagen a mostrar en el botón de envío gráfico. En caso contrario, es ignorado.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Trabaja con los atributos <strong>min</strong> y <strong>max</strong>, para limitar el incremento de valores numéricos o de fecha-hora. Puede ser el valor <code>any</code> o un número positivo de punto flotante. Si no se establece este atributo como <code>any</code>, el control acepta solamente valores múltiplos del valor del atributo, mayores al mínimo.</dd> + <dt>{{htmlattrdef("tabindex")}} específico para el elemento en {{HTMLVersionInline(4)}}, global en {{HTMLVersionInline("5")}}</dt> + <dd>La posición del elemento en el orden de navegación por la tecla Tab dentro del documento.</dd> + <dt>{{htmlattrdef("usemap")}} solo para {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>El nombre de un elemento {{HTMLElement("map")}} usado como mapa de imagen.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>El valor inicial del control. Este atributo es opcional, excepto cuando el atributo <strong>type</strong> es <code>radio</code> o <code>checkbox</code>.<br> + Nótese que cuando se recarga la página, Gecko e IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">ignorarán el valor especificado en el código fuente HTML</a>, si el valor fue modificado antes de recargar.</dd> + <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt> + <dd>Este atributo Booleano indica si el selector usado cuando el atributo <strong>type</strong> es <code>file</code> debe permitir la selección de directorios solamente.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el valor del atributo <strong>type</strong> es <code>image</code>, este atributo define la anchura de la imagen mostrada en el botón.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>Esta extensión de Mozilla permite especificar el mensaje de error cuando un campo no es validado exitosamente.</dd> +</dl> + +<h2 id="Notas">Notas</h2> + +<h3 id="Introducción_de_archivos">Introducción de archivos</h3> + +<div class="note"> +<p><strong>Nota:</strong> A partir de {{Gecko("2.0")}}, llamar al método <code>click()</code> en un elemento <code><input></code> de tipo "file" abre el selector de archivos y permite al usuario seleccionar archivos. Véase <a href="/es/docs/Using_files_from_web_applications">Utilizar ficheros desde aplicaciones web</a> para ejemplos y más detalles.</p> +</div> + +<p>No se puede establecer el valor de un selector de archivos desde un script. Hacer algo como lo siguiente no tiene efecto alguno:</p> + +<pre class="brush: js notranslate">var e = getElementById("someFileInputElement"); +e.value = "foo"; +</pre> + +<h3 id="Mensajes_de_error">Mensajes de error</h3> + +<p>Para que Firefox presente un mensaje de error personalizado cuando la validación de un campo falla, se puede usar el atributo <code>x-moz-errormessage</code>:</p> + +<pre class="brush: html notranslate"><input type="email" x-moz-errormessage="Por favor, especifique una dirección de correo válida."> +</pre> + +<p>Nótese, sin embargo, que esto no es estándar, y no tendrá efecto en otros navegadores.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h2 id="Ejemplo_1_Cuadro_de_texto_simple">Ejemplo 1: Cuadro de texto simple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Simple input box</p> +<input type="text" value="Type here"> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example_1_Simple_input_box', '', '100', '', 'Web/HTML/Element/input') }}</p> + +<h2 id="Ejemplo_2_Escenario_de_uso_común">Ejemplo 2: Escenario de uso común</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html notranslate"><p>A common form that includes input tags</p> +<form action="getform.php" method="get"> + <label>First name: <input type="text"></label><br> + <label>Last name: <input type="text"></label><br> + <label>E-mail: <input type="email"></label><br> +<input type="submit" value="Submit"> +</form> +</pre> + +<h3 id="Resultado_2">Resultado</h3> + +<p>{{ EmbedLiveSample('Example_2_Common_use-case_scenario', '', '200', '', 'Web/HTML/Element/input') }}</p> + +<h3 id="Usando_mozactionhint_en_Firefox_mobile">Usando mozactionhint en Firefox mobile</h3> + +<p>Se puede usar el atributo {{htmlattrxref("mozactionhint", "input")}} para especificar el texto para la etiqueta de la tecla Enter en el teclado virtual cuando el formulario es mostrado en Firefox mobile. Por ejemplo, para mostrar una etiqueta "Next", se puede hacer esto:</p> + +<pre class="brush: html notranslate"><input type="text" mozactionhint="next"> +</pre> + +<p>El resultado es:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p> + +<h2 id="Regionalización">Regionalización</h2> + +<p>Los valores permitidos para ciertos tipos de <input> dependen de la región. En algunos casos, 1,000.00 is a valid number, mientras en otros la manera válida de escribir un número es 1.000,00.</p> + +<p>Firefox usa la siguiente heurística para determinar la región con la cual validar los datos introducidos por el usuario (por lo menos para <code>type="number"</code>):</p> + +<ul> + <li>Intenta con el lenguaje especificado por el atributo <code>lang</code>/<code>xml:lang</code> del elemento o de sus elementos ascendentes.</li> + <li>Intenta con el lenguaje especificado en algun encabezado HTTP Content-Language o</li> + <li>Si ninguno está especificado, usa la región definida en el navegador.</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','<input capture>')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>Añade el elemento <code>capture</code></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)<sup>[28]</sup></th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=button</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<br> + {{CompatGeckoDesktop("1.9.2")}}<sup>[2]</sup></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=color</td> + <td>21.0</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>type=date</td> + <td>5.0<sup>[24]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=datetime-local</td> + <td>5.0</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=email</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=file</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=hidden</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=image</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<sup>[5]</sup></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=month</td> + <td>5.0</td> + <td>{{CompatNo}}<sup>[6]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=number</td> + <td>6.0<sup>[7]</sup></td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>10<sup>[4]</sup></td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=password</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=radio</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<br> + {{CompatGeckoDesktop("1.9.2")}}<sup>[2]</sup></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=range</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>10</td> + <td>10.62<sup>[8]</sup></td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=reset</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=search</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=submit</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=tel</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=text</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=time</td> + <td>5.0</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=url</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=week</td> + <td>5.0</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>accept=[file extension]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>8.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[9]</sup></td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[10]</sup></td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[11]</sup></td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=[. + ext]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>mozactionhint</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>autocapitalize</td> + <td>43</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>17.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>5</td> + <td>9.6</td> + <td>5.2</td> + </tr> + <tr> + <td>autofocus</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>capture</td> + <td>Chrome for Android (0.16)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>checked</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>disabled</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<sup>[25]</sup></td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>form</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formenctype</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>5.0<sup>[12]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>height</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>incremental</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>list</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>max</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>min</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>40.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>1.0<sup>[13]</sup></td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[14]</sup><br> + {{CompatVersionUnknown}}<sup>[15]</sup></td> + <td>10</td> + <td>1.0<br> + 10.62<sup>[14]</sup><br> + 11.01<sup>[15]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.00</td> + <td>5.0</td> + </tr> + <tr> + <td>readonly</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>6<sup>[16] </sup></td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>required</td> + <td>5.0<br> + 10<sup>[17]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>size</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>spellcheck</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + <tr> + <td>src</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>step</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>tabindex</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>6<sup>[18]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>webkitdirectory</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=button</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[27]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=color</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=date</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>5.0<sup>[23]</sup></td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> + </tr> + <tr> + <td>type=datetime-local</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> + </tr> + <tr> + <td>type=email</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1<sup>[19]</sup></td> + </tr> + <tr> + <td>type=file</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<sup>[27]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[21]</sup></td> + </tr> + <tr> + <td>type=hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=image</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=month</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> + </tr> + <tr> + <td>type=number</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0<sup>[19]</sup></td> + </tr> + <tr> + <td>type=password</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[22]</sup></td> + </tr> + <tr> + <td>type=radio</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=range</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0</td> + </tr> + <tr> + <td>type=reset</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=search</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>4.0<sup>[22]</sup></td> + </tr> + <tr> + <td>type=submit</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[27]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=tel</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1<sup>[22]</sup></td> + </tr> + <tr> + <td>type=text</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[27]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[22]</sup></td> + </tr> + <tr> + <td>type=time</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> + </tr> + <tr> + <td>type=url</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1<sup>[19]</sup></td> + </tr> + <tr> + <td>type=week</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<sup>[26]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=[. + ext]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autofocus</td> + <td>3.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>capture</td> + <td>3.0</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>6.0</td> + </tr> + <tr> + <td>checked</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>disabled</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>form</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formenctype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>height</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>list</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>max</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}<sup>[20]</sup></td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>min</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}<sup>[20]</sup></td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>27.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>readonly</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>src</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>step</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}<sup>[20]</sup></td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>webkitdirectory</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Fue implementado en la versión 2 o inferior.</p> + +<p>[2] Implementado para valor <code>indeterminate</code>.</p> + +<p>[3] Esta característica todavía no está implementada. Véase {{bug("888320")}}.</p> + +<p>[4] Es reconocido, pero no tiene UI.</p> + +<p>[5] Gecko 2.0 {{geckoRelease("2.0")}} solo envía las coordenadas X e Y cuando se presiona, sin enviar nombre/valor del elemento.</p> + +<p>[6] Esta característica todavía no está implementada. Véase {{bug("888320")}}.</p> + +<p>[7] Regionalización en Chrome 11.</p> + +<p>[8] Opera 11.01 añadió soporte para un valor predeterminado.</p> + +<p>[9] Filtros para estas extensiones de archivo de audio: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma.</p> + +<p>[10] Filtros para estas extensiones de archivo de video: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</p> + +<p>[11] Filtros para estas extensiones de archivo de imagen: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</p> + +<p>[12] En 6.0 solo funciona con el tipo de documento HTML5, el soporte para validación en 7.0 fue deshabilitado, y rehabilitado en 10.0.</p> + +<p>[13] Soportado para <code>type="file"</code> y <code>type="email"</code> desde la versión 5.0.</p> + +<p>[14] Soportado para <code>type="file"</code>.</p> + +<p>[15] Supported for <code>type="email"</code>.</p> + +<p>[16] No está presente para <code>type="checkbox"</code> y <code>type="radio"</code>.</p> + +<p>[17] Soportado para el elemento {{HTMLElement("select")}}.</p> + +<p>[18] Elementos con <code>tabindex</code> > <code>0</code> no son navegables.</p> + +<p>[19] Sin validación, pero provee un teclado específico. Safari Mobile para iOS aplica un estilo predeterminado de <code>{{cssxref("opacity")}}: 0.4</code> para deshabilitar los elementos <code><input></code> textuales. Los demás navegadores mayores no comparten este estilo particular actualmente.</p> + +<p>[20] La interfaz podría permanecer sin implementarse.</p> + +<p>[21] <a href="http://blog.uploadcare.com/post/97884147203/you-cannot-upload-files-to-a-server-using-mobile-safari">La carga de archivos no funcionaba</a> en Mobile Safari para iOS 8.0 y 8.0.1. Este bug fue corregido en iOs 8.0.2.</p> + +<p>[22] Safari Mobile para iOS aplicaba un estilo predeterminado de <code>{{cssxref("opacity")}}: 0.4</code> para deshabilitar los elementos <code><input></code> textuales. Los demás navegadores mayores no comparten este estilo particular actualmente.</p> + +<p>[23] En Safari Mobile para iOS, la configuración <code>{{cssxref("display")}}: block</code> en un <code><input></code> con <code>type="date"</code>, <code>type="time"</code>, <code>type="datetime"</code>, <code>type="datetime-local"</code>, o <code>type="month"</code> causa que el texto dentro del <code><input></code> se desalinee verticalmente. Véase {{webkitbug("139848")}}.</p> + +<p>[24] Desde Chrome 39, un <code><input></code> con <code>type="date"</code> estilizado con <code>{{cssxref("display")}}: table-cell; {{cssxref("width")}}: 100%;</code> tendrá un valor para {{cssxref("min-width")}} impuesto por Chrome, y no puede reducirse a un valor inferior a esa anchura mínima. Véase <a href="https://code.google.com/p/chromium/issues/detail?id=346051">Chromium bug #346051</a>.</p> + +<p>[25] De forma predeterminada, Firefox, a diferencia de otros navegadores, <a href="http://stackoverflow.com/q/5985839/432681">persistirá el estado de deshabilitado dinámico y (si aplica), la selección de elementos dinámica</a> de un <code><input></code> a través de las cargas de páginas. Estableciedo el valor del atributo {{htmlattrxref("autocomplete","input")}} como <code>off</code> deshabilita esta característica. Esto funciona aun cuando el atributo {{htmlattrxref("autocomplete","input")}} no aplicaría normalmente al <code><input></code> debido a su atributo {{htmlattrxref("type","input")}}. Véase {{bug(654072)}}.</p> + +<p>[26] A partir de Gecko 9.0 {{geckoRelease("9.0")}}, Firefox para Android permite capturar imágenes usando la cámara para posteriormente cargarlas, sin necesidad de dejar el navegador. Los desarrolladores Web pueden implementar estar característica simplemente estableciendo el valor del atributo <code>accept</code> como <code>image/*</code> en el elemento <code><input></code> con <code>type="file"</code>.</p> + +<p>[27] Firefox para Android establece un gradiente predeterminado en {{cssxref("background-image")}} para todos los inputs con <code>type="file"</code>. Esto puede ser deshabilitado usando <code>background-image: none;</code>. También establece un valor para {{cssxref("border")}} en los mismos.</p> + +<p>[28] Previo a Firefox 51, <code>selectionStart</code> y <code>selectionEnd</code> devolvían <code>0</code> cuando no había selección. Ahora devuelven correctamente la separación del caracter siguiente a la posición actual del cursor, donde se insertará el siguiente caracter.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>Otros elementos relacionados con formularios: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> diff --git a/files/es/web/html/elemento/input/number/index.html b/files/es/web/html/elemento/input/number/index.html new file mode 100644 index 0000000000..102e540f7e --- /dev/null +++ b/files/es/web/html/elemento/input/number/index.html @@ -0,0 +1,450 @@ +--- +title: <input type="number"> +slug: Web/HTML/Elemento/input/number +tags: + - Elemento + - Elemento de entrada + - Formulários HTML + - HTML + - Número + - Referencia + - Tipo de entrada + - formulários +translation_of: Web/HTML/Element/input/number +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Elementos {{HTMLElement("input")}} del tipo <strong><code>number</code></strong> son usados para permitir al usuario ingresar un número. Éstos incluyen validación incorporada para rechazar entradas no numéricas.</span> El navegador puede optar por proveer flechas de pasos para permitir al usuario incrementar y decrementar el valor usando su ratón o símplemente pulsando con la punta del dedo.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>En navegadores que no soportan entradas de tipo <code>number</code>, una entrada <code>number</code> recurre al tipo <code>text</code>.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Un {{jsxref("Number")}} representando un número, o vacío.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} e {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes que soporta</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>Un {{jsxref("Number")}} representando el valor del número ingresado en la entrada. Tú puedes colocar el valor por omisión para la entrada incluyendo un número dentro del atributo {{htmlattrxref("value", "input")}}, de esta manera:</p> + +<pre class="brush: html"><input id="number" type="number" value="42"></pre> + +<p>{{EmbedLiveSample('Value', 600, 40)}}</p> + +<h2 id="Atributos_adicionales">Atributos adicionales</h2> + +<p>Además de los atributos comúnmente soportados por todos los tipos de {{HTMLElement("input")}}, las entradas de tipo <code>number</code> soportan estos atributos:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>El <code>id</code> del elemento {{HTMLElement("datalist")}} que contiene las opciones predefinidas de autocompletado.</td> + </tr> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>El valor máximo a aceptar para esta entrada</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>El valor mínimo a aceptar para esta entrada</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Un valor de ejemplo para mostrar dentro del campo cuando esté vacío</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un atributo Booleano indicando si el valor es de solo lectura</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>El intervalo de paso a usar cuando se usen las flechas arriba y abajo para ajustar el valor, así como para su validación</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>El valor máximo a aceptar para esta entrada. Si el {{htmlattrxref("value", "input")}} ingresado en el elemento excede éste, el elemento falla la <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Validacion_de_restricciones">validación de restricciones</a>. Si el valor del atributo <code>max</code> no es un número, entonces el elemento no tiene un valor máximo.</p> + +<p>Este valor debe ser mayor que o igual al valor del atributo <code>min</code>.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>El valor mínimo a aceptap para esta entrada. Si el {{htmlattrxref("value", "input")}} del elemento es menor que éste, el elemento falla la <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Validacion_de_restricciones">validación de restricciones</a>. Si un valor es especificado para <code>min</code> que no sea un número valido, la entrada no tiene un valor mínimo.</p> + +<p>Este valor debe ser menor que o igual al valor del atributo <code>max</code>.</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<div id="step-include"> +<p>El atributo <code>step</code> es un número que especifica la granularidad a la que debe adherirse el valor, o el valor especial <code>any</code>, el cual es descrito abajo. Solo valores que sean iguales a la base del escalonado (<code>{{anch("min")}}</code> si es especificado, si no {{htmlattrxref("value", "input")}}, y un valor por omisión apropiado si ninguno de esos es provisto) son válidos.</p> + +<p>Una valor de cadena <code>any</code> significa que ningún escalonado es implicado, y cualquier valor es permitido (salvo otras restricciones, tales como <code>{{anch("min")}}</code> y <code>{{anch("max")}}</code>).</p> + +<div class="note"> +<p><strong>Nota:</strong> Cuando los datos ingresados por el usuario no se adhieran a la configuración de escalonado, el {{Glossary("user agent")}} puede redondear al valor válido más cercano, prefiriendo numeros en la dirección positiva cuando hayan dos opciones igualmente cercanas.</p> +</div> +</div> + +<p>El valor por omisión de paso para entradas <code>number</code> es <code>1</code>, permitiendo solo enteros ser ingresados—<em>a menos que</em> la base del escalonado no sea un entero.</p> + +<h2 id="Usar_entradas_numéricas">Usar entradas numéricas</h2> + +<p>Elementos <code><input type="number"></code> pueden ayudar a simplificar tu trabajo al construir la interfaz de usuario y la lógica para ingresar números en un formulario. Cuando creas una entrada numérica con el valor apropiado para <code>type</code>, <code>number</code>, obtienes validación automática para que el texto sea un número, y usualmente un juego de botones arriba y abajo para subir y bajar el valor.</p> + +<div class="warning"> +<p><strong>Importante</strong>: Ten en mente que, lógicamente, no deberías poder ingresar otros caracteres que no sean números dentro de una entrada numérica. Parece haber algo de desacuerdo acerca de esto entre navegadores; ver {{bug(1398528)}}.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Es crucial recordar que un usuario puede jugar con tu HTML tras bambalinas, así que tu sitio<em> no debe</em> usar validación simple del lado del cliente para ningún fin de seguridad. Tú <em>debes</em> verificar en el lado del servidor cualquier transacción en la cual el valor provisto pueda tener alguna implicación de seguridad de cualquier tipo.</p> +</div> + +<p>Los navegadores de móviles ayudan más con la experiencia de usuario mostrando un teclado especial mejor adaptado para ingresar números cuando el usuario intente ingresar un valor. La siguiente captura de pantalla es tomada de Firefox para Android:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Una_entrada_numérica_simple">Una entrada numérica simple</h3> + +<p>En su forma más básica, una entrada numérica puede ser implementada así:</p> + +<pre class="brush: html"><label for="ticketNum">Number of tickets you would like to buy:</label> +<input id="ticketNum" type="number" name="ticketNum" value="0"></pre> + +<p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p> + +<p>Una entrada numérica es considerada válida cuando está vacía y cuando un único número es ingresado, pero por lo demás es inválida. Si el atributo xxxx es usado, la entrada ya no es considerada válida cuando esté vacía.</p> + +<div class="note"> +<p><strong>Nota</strong>: Cualquier número es un valor aceptable, mientras que sea un <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">número de punto flotante válido</a> (eso es, no <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> o <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity">Infinity</a>).</p> +</div> + +<h3 id="Marcas_de_lugar_Placeholders">Marcas de lugar (Placeholders)</h3> + +<p>Algunas veces es de ayuda ofrecer una indicación en contexto en cuanto a qué forma deben tomar los datos de entrada. Esto puede ser especialmente importante si el diseño de la página no ofrece etiquetas descriptivas para cada {{HTMLElement("input")}}. Es aquí donde entran las <strong>marcas de lugar</strong>. Una marca de lugar es un valor comúnmente usado para proveer un indicio en cuanto al formato que la entrada debe tomar por <code>value</code>. Este es mostrado dentro de la caja de edición cuando el <code>value</code> del elemento es <code>""</code>. Una vez que los datos son ingresados dentro de la caja, la marca de lugar desaparece; si la caja es vaciada, la marca de lugar reaparece.</p> + +<p>Aquí, tenemos una entrada <code>number</code> con la marca de lugar "<code>Multiple of 10</code>". Nota cómo la marca de lugar desaparece y reaparece conforme manipulas el contenido del campo de edición.</p> + +<pre class="brush: html"><input type="number" placeholder="Multiple of 10"></pre> + +<p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p> + +<h3 id="Controlar_el_tamaño_del_escalón">Controlar el tamaño del escalón</h3> + +<p>Por omisión, los botones arriba y abajo provistos para que pases el número de arriba a abajo pasarán por 1 el valor arriba y abajo. Puedes cambiar esto proveyendo un atributo {{htmlattrxref("step", "input")}}, el cual toma como valor un número que especifica la cantidad de escalones. Nuestro ejemplo arriba contiene una marca de lugar diciendo que el valor debe ser un múltiplo de 10, por lo tanto tiene sentido agregar un valor a <code>step</code> de <code>10</code>:</p> + +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10"></pre> + +<p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p> + +<p>En este ejemplo, debes hallar que las flechas de subir y bajar escalón incrementan y decrementan el valor por 10 cada vez, y no por 1. Aún puedes ingresar manualmente un número que no sea múltiplo de 10, pero este será considerado inválido.</p> + +<h3 id="Especificar_valores_máximo_y_mínimo">Especificar valores máximo y mínimo</h3> + +<p>Puedes usar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para especificar un valor mínimo y máximo que pueda tener el campo. Por ejemplo, demos a nuestro ejemplo un mínimo de <code>0</code>, y un máximo de <code>100</code>:</p> + +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> + +<p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p> + +<p>En esta versión actualizada, debes hallar que los botones para subir y bajar escalón no te permitirán ir bajo 0 o sobre 100. Tú aún puedes ingresar manualmente un número fuera de estos límites, pero este será considerado inválido.</p> + +<h3 id="Permitir_valores_decimales">Permitir valores decimales</h3> + +<p>Un problema con las entradas numéricas es que su tamaño de escalón por omisión es 1. Si tratas de ingresar un número con un decimal (tal como "1.0"), este será considerado como inválido. Si quieres ingresar un valor que requiere decimales, necesitarás reflejar esto en el valor <code>step</code> (p.ej. <code>step="0.01"</code> para permitir hasta dos dígitos en la parte decimal). Aquí hay un ejemplo simple:</p> + +<pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> + +<p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p> + +<p>Note que este ejemplo permite cualquier valor entre <code>0.0</code> y <code>10.0</code>, con decimales a dos cifras. Por ejemplo, "9.52" es válido, pero "9.521" no lo es.</p> + +<h3 id="Controlar_el_tamaño_de_la_entrada">Controlar el tamaño de la entrada</h3> + +<p>Los elementos {{HTMLElement("input")}} de tipo <code>number</code> no soportan atributos de dimensión tales como {{htmlattrxref("size", "input")}}. Necesitarás recurrir a <a href="/en-US/docs/Web/CSS">CSS</a> para cambiar el tamaño de estos controles.</p> + +<p>Por ejemplo, para ajustar el ancho de la entrada para que sea tan ancho como se necesita para ingresar un número de tres dígitos, podemos cambiar nuestro HTML para incluir un xxxx y acortar nuestra marca de lugar (placeholder) ya que el campo estará demasiado angosto para el texto que hemos estado usando hasta ahora:</p> + +<pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> + +<p>Entonces agregamos algo de CSS para reducir el ancho del elemento con el selector de <code>id</code>, <code>#number</code>:</p> + +<pre class="brush: css">#number { + width: 3em; +}</pre> + +<p>El resultado se ve así:</p> + +<p>{{EmbedLiveSample('Controlling_input_size', 600, 40)}}</p> + +<h3 id="Ofrecer_valores_sugeridos">Ofrecer valores sugeridos</h3> + +<p>Tú puedes proveer una lista de las opciones por defecto de las cuales el usuario puede seleccionar especificando el atributo {{htmlattrxref("list", "input")}}, el cual contiene como su valor el {{htmlattrxref("id")}} de un {{HTMLElement("datalist")}}, el cual a su vez contiene un elemento {{HTMLElement("option")}} por valor sugerido. El <code>value</code> de cada <code>option</code> es el valor sugerido correspondiente para la caja de entrada numérica.</p> + +<pre class="brush: html"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<span class="validity"></span> + +<datalist id="defaultNumbers"> + <option value="10045678"> + <option value="103421"> + <option value="11111111"> + <option value="12345678"> + <option value="12999922"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<div class="note"> +<p>El uso del atributo {{htmlattrxref("list", "input")}} con entradas <code>number</code> no está soportado en todos los navegadores. Funciona en Chrome y Opera, por ejemplo, pero no en Firefox.</p> +</div> + +<h2 id="Validación">Validación</h2> + +<p>Ya hemos mencionado una serie de características de validación para entradas <code>number</code>, pero revisémoslas ahora:</p> + +<ul> + <li>Elementos <code><input type="number"></code> automáticamente invalidan cualquier entrada que no sea un número (o vacío, a menos que se especifique <code>required</code> ).</li> + <li>Puedes usar el atributo {{htmlattrxref("required", "input")}} para invalidar una entrada vacía. (En otras palabras, la entrada <em>debe</em> ser llenada).</li> + <li>Puedes usar el atributo {{htmlattrxref("step", "input")}} para restringir valores válidos a cierto conjunto de escalones (p.ej. múltiplos de 10).</li> + <li>Puedes usar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir los límites inferior y superior de los valores válidos.</li> +</ul> + +<p>El siguiente ejemplo presenta todas las características anteriores, así como el uso de CSS para mostrar íconos de validez o invalidez, dependiendo del valor del <code>input</code>:</p> + +<pre class="brush: html"><form> + <div> + <label for="balloons">Number of balloons to order (multiples of 10):</label> + <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Validation", 600, 80)}}</p> + +<p>Intenta enviar el formulario con diferentes valores inválidos ingresados — p.ej., siv valor; un valor abajo de 0 o arriba de 100; un valor que no sea múltiplo de 10; o un valor no numérico — y mira cómo los mensajes de error que te da el navegador difieren con estos.</p> + +<p>El CSS aplicado a este ejemplo es el siguiente:</p> + +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Aquí utilizamos las pseudo clases {{cssxref(":invalid")}} y {{cssxref(":valid")}} para mostrar un ícono apropiado de invalidez o validez como contenido generado en el elemento adyacente {{htmlelement("span")}}, como un indicador visual.</p> + +<p>Lo colocamos en un elemento separado <code><span></code> para mayor flexibilidad. Algunos navegadores no muestran contenido generado muy eficientemente en algunos tipos o entradas de formulario. (Lee, por ejemplo, la sección sobre <a href="/es/docs/Web/HTML/Element/input/date#Validation">validación de <code><input type="date"></code></a>).</p> + +<div class="warning"> +<p><strong>Importante</strong>: ¡La validación de formularios HTML <em>no</em> es un substituto de scripts del lado del servidor que asegure que los datos estén en el formato apropiado!</p> + +<p>Es demasiado fácil para alguien hacer ajustes al HTML que le prmita evitar la validación, o removerla completamente. También es posible para alguien evadir tu HTML y enviar los datos directamente a tu servidor.</p> + +<p>Si tu código del lado del servidor falla el validar los datos que recibe, el desastre podría azotar cuando datos que no están formateados apropiadamente sean enviados (o cuando los datos son demasiado grandes, o son del tipo incorrecto, y así sucesivamente).</p> +</div> + +<h3 id="Validación_de_patron">Validación de patron</h3> + +<p>Elementos <code><input type="number"></code> no soportan el uso del atributo {{htmlattrxref("pattern", "input")}} para hacer que los valores ingresados se ajusten a un patrón de expresión regular específico.</p> + +<p>La fundamentación para esto es que las entradas numéricas no serán válidas si contienen cualquier cosa excepto números, y tú puedes restringir el número mínimo y máximo de dígitos válidos usando los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} (a como se explica arriba).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ya hemos cubierto el hecho de que por defecto, el incremento es <code>1</code>, y tú puedes usar el atributo {{htmlattrxref("step", "input")}} para permitir entradas decimales. Echemos un vistazo más de cerca.</p> + +<p>En el siguiente ejemplo hay un formulario para ingresar la estatura del usuario. Por defecto acepta la estatura en metros, pero puedes hacer click en el botón apropiado para cambiar el formulario a que acepte pies y pulgadas. La entrada para la estatura en metros acepta decimales a dos posiciones.</p> + +<p>{{EmbedLiveSample("Examples", 600, 100)}}</p> + +<p>El HTML se ve así:</p> + +<pre class="brush: html"><form> + <div class="metersInputGroup"> + <label for="meters">Enter your height — meters:</label> + <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> + <span class="validity"></span> + </div> + <div class="feetInputGroup" style="display: none;"> + <span>Enter your height — </span> + <label for="feet">feet:</label> + <input id="feet" type="number" name="feet" min="0" step="1"> + <span class="validity"></span> + <label for="inches">inches:</label> + <input id="inches" type="number" name="inches" min="0" max="11" step="1"> + <span class="validity"></span> + </div> + <div> + <input type="button" class="meters" value="Enter height in feet and inches"> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>Verás que estamos usando muchos de los atributos que ya hemos visto antes en el artículo. Como queremos que acepte un valor de medida en centímetros, hemos colocado el valor de <code>step</code> a <code>0.01</code>, de manera que valores como <em>1.78</em> no sean vistos como inválidos. También hemos provisto una marca de lugar (placeholder) para esa entrada.</p> + +<p>Hemos escondido las entradas de pies y pulgadas inicialmente usando <code>style="display: none;"</code>, de manera que metros sea el tipo de entrada preseleccionado.</p> + +<p>Ahora, al CSS. Este se ve muy similar al estilo de validación que vimos antes; nada extraordinario aquí.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Y finalmente, el JavaScript:</p> + +<pre class="brush: js">let metersInputGroup = document.querySelector('.metersInputGroup') +let feetInputGroup = document.querySelector('.feetInputGroup') +let metersInput = document.querySelector('#meters') +let feetInput = document.querySelector('#feet') +let inchesInput = document.querySelector('#inches') +let switchBtn = document.querySelector('input[type="button"]') + +switchBtn.addEventListener('click', function() { + if(switchBtn.getAttribute('class') === 'meters') { + switchBtn.setAttribute('class', 'feet') + switchBtn.value = 'Enter height in meters' + + metersInputGroup.style.display = 'none' + feetInputGroup.style.display = 'block' + + feetInput.setAttribute('required', '') + inchesInput.setAttribute('required', '') + metersInput.removeAttribute('required') + + metersInput.value = '' + } else { + switchBtn.setAttribute('class', 'meters') + switchBtn.value = 'Enter height in feet and inches' + + metersInputGroup.style.display = 'block' + feetInputGroup.style.display = 'none' + + feetInput.removeAttribute('required') + inchesInput.removeAttribute('required') + metersInput.setAttribute('required', '') + + feetInput.value = '' + inchesInput.value = '' + } +});</pre> + +<p>Después de declarar unas pocas variables, un manejador de eventos s agredgado al <code>button</code> para controlar el mecanismo interruptor. Esto es bastante simple, principalmente involucra cambiar las {{HTMLElement("label")}} y <code>class</code> del botón, y actualizar los valores de muestra de los dos conjuntos de entradas cuando el botón sea presionado.</p> + +<p>(Nota que aquí no estamos convirtiendo de aquí para allá entre metros y pies/pulgadas, lo que probablemente haría una aplicación web en la vida real.)</p> + +<div class="note"> +<p><strong>Nota:</strong> Cuando el usuario haga click en el botón, el(los) atributo(s) <code>required</code> de la(s) entradas que estemos ocultando son removidos, y vaciará el <code>value</code> del(los) atributo(s). Esto es de manera que el formulario pueda ser enviado si ambos conjuntos de entradas no están llenas. También asegura que el formulario no enviará datos que el usuario no quiera.</p> + +<p>¡Si no hicieras eso, tendrías que llenar ambos pies/pulgadas <strong>y</strong> metros para enviar el formulario!</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '<input type="number">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '<input type="number">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + + + +<p>{{Compat("html.elements.input.input-number")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Learn/HTML/Forms">Guía de formularios HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/es/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> + <li><a href="/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibilidad de propiedades CSS</a></li> +</ul> diff --git a/files/es/web/html/elemento/input/password/index.html b/files/es/web/html/elemento/input/password/index.html new file mode 100644 index 0000000000..2fd6cd5cb2 --- /dev/null +++ b/files/es/web/html/elemento/input/password/index.html @@ -0,0 +1,132 @@ +--- +title: <input type="password"> +slug: Web/HTML/Elemento/input/password +tags: + - Element + - HTML + - Reference +translation_of: Web/HTML/Element/input/password +--- +<p> </p> + +<p>{{HTMLRef}}</p> + +<p>Los elementos <code><input></code> de tipo <strong><code>"password"</code></strong> proporcionan una forma para que el usuario ingrese una contraseña de forma segura. El elemento se presenta como un control de editor de texto, sin formato, de una línea, en el que el texto está oculto para que no pueda leerse, generalmente reemplazando cada carácter con un símbolo como el asterisco ("*") o un punto ("•"). Este carácter variará dependiendo del {{Glossary("user agent")}} y del {{Glossary("OS")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listado, tabla enviable, reseteable, elementos de forma asociada, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, elementos etiquetables, contenido palpable.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno, es un {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>Tiene que tener una etiqueta al inicio y no tener una etiqueta final.</td> + </tr> + <tr> + <th scope="row">Elementos de parentescos</th> + <td>Cualquier elemento que accepta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Además de los atributos listados abajo, este elemento puede tener cualquier <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("autocomplete")}}{{HTMLVersionInline("5")}}</dt> + <dd>Establece el valor del atributo de autocompletado en el campo de una contraseña. En caso de ser cierto, automaticamente se rellena con el valor previamente almacenado.</dd> + <dt>{{htmlattrdef("autofocus")}}{{HTMLVersionInline("5")}}</dt> + <dd>Este atributo Booleano te permite especificar que la página ponga el foco en un campo a menos que el usuario lo revoque, por ejemplo, escribir en un campo diferente. Solo un elemento en el documento puede tener el atributo Booleano <strong>autofocus</strong>.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Este atributo Booleano indica que el campo de la contraseña no está disponible. Además, deshabilita los valores que no son enviados por el campo.</p> + </dd> + <dt>{{htmlattrdef("defaultvalue")}}</dt> + <dd>Define un valor predeterminado en el campo de la contraseña.</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>Le da proporciona información al buscador sobre que teclado mostrar. Los valores posibles son: + <ul> + <li><code>verbatim</code>: Alfanumérico, contenido no verbla tales como usuarios y contraseñas.</li> + <li><code>latin</code>: Introducción de texto en el lenguaje preferido del usuario con ayudas de escritura, como predicción de texto. Se usa para comunicación de usuario a ordenador en, por ejemplo, campos de búsqueda.</li> + <li><code>latin-name</code>: Como <em>latin</em>, pero para nombres de personas.</li> + <li><code>latin-prose</code>: Como <em>latin</em>, pero con unas ayudas de escritura más activas. Para comunicación de usuario a usuario como por ejemplo, mensajería instantanea o emails.</li> + <li><code>full-width-latin</code>: Como <em>latin-prose</em>, pero para lenguajes secundarios del usuario.</li> + <li><code>kana</code>: Entrada de texto Kana o romaji, normalmente entrada hiragana, usa carácteres con ancho completo, con soporte para converstirse a kanji. Establecido para la entrada de texto Japonés.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + </ul> + </dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>Establece el valor del atributo maxlength en el campo de una contraseña.</dd> + <dt>{{htmlattrdef("minlength")}}</dt> + <dd>Establece el valor del atributo minlength en el campo de una contraseña.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Nombre del campo, usado para datos enviados desde formulario.</dd> + <dt>{{htmlattrdef("pattern")}}{{HTMLVersionInline("5")}}</dt> + <dd> Establece el valor del atributo pattern del campo de una contraseña.</dd> + <dt>{{htmlattrdef("placeholder")}}{{HTMLVersionInline("5")}}</dt> + <dd>Establece el valor del atributo placeholder del campo de una contraseña.</dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>Este atributo Booleano indica que el usuario no puede modificar el valor del campo de una contraseña.</dd> + <dt>{{htmlattrdef("required")}}{{HTMLVersionInline("5")}}</dt> + <dd>Este atributo Booleano especifica que el usuario debe rellenar con un valor antes de enviar un formulario.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Establece el valor del atributo size del campo de una contraseña.</dd> + <dt> </dt> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Para crear un widget que muestre una constraseña, use:</p> + +<pre class="brush: html"><input type="password"></pre> + +<p>Para crear un widget que muestre una contraseña con un patrón o diseño, use:</p> + +<pre class="brush: html"><input type="password" pattern=".{6,}"></pre> + +<p>El ejemplo de arriba creará un elemento password que deberá contener 6 o más carácteres.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Fix me:</strong> Insert Browser Compatibility table here.</p> +</div> + +<h2 id="sect1"> </h2> diff --git a/files/es/web/html/elemento/input/range/index.html b/files/es/web/html/elemento/input/range/index.html new file mode 100644 index 0000000000..e0cf92d55a --- /dev/null +++ b/files/es/web/html/elemento/input/range/index.html @@ -0,0 +1,416 @@ +--- +title: <input type="range"> +slug: Web/HTML/Elemento/input/range +tags: + - Elementos + - Formulários HTML + - HTML etiqueta input + - Input + - Range + - Rango + - Referencia + - Web + - deslizador + - formulários + - slider +translation_of: Web/HTML/Element/input/range +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">El elemento {{HTMLElement("input")}} del tipo <code><strong>"range"</strong></code> permite que el usuario especifique un valor numérico comprendido entre un valor mínimo y máximo. El valor exacto, sin embargo, no se considera importante. Se repesenta típicamente como un "tirador" o un control deslizante en lugar de un campo de texto como otros tipos de {{HTMLElement("input")}}.</span> Como este tipo de widget es bastante inmpreciso, no debe utilizarse normalmente a menos que el valor exacto del control no sea importante.</p> + +<div id="summary_sample1"> +<pre class="brush: html"><input type="range"></pre> +</div> + +<p>{{EmbedLiveSample("summary_sample1", 600, 40)}}</p> + +<p>Si el navegador del usuario no soporta el tipo <code>"range"</code>, será tratado como un input de tipo <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code>.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Un {{domxref("DOMString")}} que contiene la cadena que representa el valor numérico seleccionado; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} to get the value as a {{jsxref("Number")}}.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes soportados</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}} y {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL </strong></td> + <td><code>list</code>, <code>value</code> y <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Metodos</strong></td> + <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} y {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>El atributo {{htmlattrxref("value", "input")}} contiene un {{domxref("DOMString")}} que es la representación de tipo cadena del número seleccionado. El valor nunca es una cadena vacía (<code>""</code>). El valor por defecto es el punto intermedio entre los valores mínimo y máximo especificados, a menos que el valor máximo sea menor que el valor mínimo, en cuyo caso el valor por defecto será el valor del atributo <code>min</code>. El algoritmo de determina el valor por defecto es:</p> + +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<p><span id="result_box" lang="es"><span>Si se intenta establecer un valor inferior al mínimo definido, el valor será igual al mínimo.</span> <span>De manera similar, un intento de establecer un valor superior al máximo da como resultado el valor máximo.</span></span></p> + +<h2 id="Usando_inputs_range">Usando inputs range</h2> + +<p>El input de tipo <code>"number"</code> permite al usuario introducir un número y, opcionalmente, forzarle a que dicho valor se encuentre entre un mínimo y un máximo, pero le obliga a introducir un valor específico. El input de tipo <code>"range"</code> pide al usuario que indique el valor en un rango numérico sin que tenga que preocuparse qué valor numérico específico está seleccionado.</p> + +<p>Los ejemplos títpicos de situaciones en las que se pueden usar inputs de tipo rango suelen ser:</p> + +<ul> + <li>Controles de audio (volumen o balance) o controles de filtro.</li> + <li>Configuración de color, como canales, transparencia, brillo, etc.</li> + <li>Controles de configuración de juegos, como dificultad, distancia de visibilidad, tamaño del nunodGame configuration controls such as difficulty, visibility distance, world size, etc.</li> + <li>Longitud de contraseñas para un gestor de contraseñas generadas.</li> +</ul> + +<p>Como regla general, si el usuario está más interesado en la distancia entre un mínimo y un máximo más que en el propio valor en sí mismo, el input de tipo rango es el candidato perfecto. Por ejemplo, en el caso del control del volumen de un equipo estéreo, el usuario normalmente piensa "pon el volumen a la midad" en lugar de "pon el volumen al 0,5".</p> + +<h3 id="Especificar_los_valores_mínimo_y_máximo">Especificar los valores mínimo y máximo</h3> + +<p>Por defecto, el valor mínimo es 0 y el máximo es 100. Si es necesario modificar dichos valores, podemos usar los atributos {{htmlattrxref("min", "input")}} y/o {{htmlattrxref("max", "input")}}. Podemos usar cualquier valor de coma flotante.</p> + +<p>Por ejemplo, para usar un rango entre -10 y 10, usaremos:</p> + +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> + +<h3 id="Definir_el_tamaño_de_los_saltos">Definir el tamaño de los saltos</h3> + +<p>Por defecto, cada salto tiene valor 1, es decir el valor será siempre un número entero. Podemos cambiarlo mediante el atributo {{htmlattrxref("step")}}. Si necesitas, por ejemplo, un valor entre 5 y 10 con una precisión de dos decimales, debes indicar que el valor de <code>step</code> es 0.01:</p> + +<div id="Granularity_sample1"> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<p><span id="result_box" lang="es"><span>Si quieres aceptar cualquier valor independientemente de la cantidad de decimales, puede especificar un valor de </span></span><code>"any"</code> al atrtibuto {{htmlattrxref("step", "input")}}:</p> + +<div id="Granularity_sample2"> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<p>En el ejemplo, permitimos al usuario seleccionar cualquier valor entre 0 y π sin restricciones en la parte decimal del número seleccionado.</p> +</div> + +<h3 id="Añadir_marcas_y_etiquetas">Añadir marcas y etiquetas</h3> + +<p>La especificación HTML permite a los navegadores cierta flexibilidad sobre cómo presentar el control range. En ningún sitio es más notoria dicha flexibilidad como a la hora de representar las marcas y las etiquetas de un rango. La especificación describe cómo añadir puntos personalizados al control range usando el atributo {{htmlattrxref("list", "input")}} y el elemento {{HTMLElement("datalist")}}, pero no hay requisitos o recomendaciones de estandarizar las marcas a lo largo del control.</p> + +<h4 id="Mockups_del_control_range">Mockups del control range</h4> + +<p>Como los navegadores tienen esta flexibilidad, y hasta la fecha ninguno admite todas las funciones que HTML define para los controles range, a continuación mostramos algunas maquetas que permiten conocer lo que puede visualizarse en macOS en un navegador que las admita.</p> + +<h5 id="El_control_rango_sin_adornos">El control rango sin adornos</h5> + +<p>Cuando no especificas un atributo {{htmlattrxref("list", "input")}} al input range, un navegador que lo soporte mostrará lo siguie.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Captura de pantalla</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range"></pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Un_control_rango_con_marcas">Un control rango con marcas</h5> + +<p>El siguiente rango utiliza el atributo <code>list</code> (al cual le especificamos el ID del elemento {{HTMLElement("datalist")}}) para definir la serie de marcas del rango. Hay once marcas, cada una de ellas mide un 10%, representadas por el {{htmlattrxref("value", "option")}} de cada elemento {{HTMLElement("option")}}.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Captura de pantalla</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Un_control_rango_con_marcas_y_etiquetas">Un control rango con marcas y etiquetas</h5> + +<p>Puedes añadir etiquetas a tu control range usando el atributo {{htmlattrxref("label", "option")}} al elemento {{HTMLElement("option")}} correspondiente a cada marca que desees etiquetar.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Captura de pantalla</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0" label="0%"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50" label="50%"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100" label="100%"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Actualmente, ningún navegador soporta todas estas características. Firefox no soporta ni marcas ni etiquetas, mientras que Chrome soporta las marcas pero no las etiquetas.</p> +</div> + +<h3 id="Cambiar_la_orientación">Cambiar la orientación</h3> + +<div class="hidden"> +<p>Por defecto, si un navegador renderiza un input range, lo mostrará como un "slider" (deslizador) que se desliza hacia la izquierda y hacia la derecha. By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. Sin embargo puedes cambiar esto fácilmente para que se deslice hacia arriba y hacia abajo simplemente usando CSS</p> + +<div class="note"> +<p><strong>Nota</strong>: Esto aún no está implementado por los principales navegadores. This is not actually implemented yet by any of the major browsers. See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>.</p> +</div> + +<p>Si tenemos el siguiente control range:</p> + +<div id="Orientation_sample1"> +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +</div> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<p>Dicho control se muestra en horizontal (al menos en los principales navegadores, o otros puede variar). Presentarlo en vertical es tan simple como añadir CSS para cambiar las dimensiones del control, de la siguiente manera:</p> + +<div id="Orientation_sample2"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> + +<p><strong>En la actualidad, ninguno de los navegadores principales soporta la creación de inputs range usando este CSS, incluso a perar de que la especificación recomienda que lo hagan.</strong></p> +</div> +</div> + +<p>La especificación HTML recomienda que los navegadores cambien la orientación del range si el ancho especificado es menor que el alto. Desafortunadamente, ninguno de los principales navegadores soportar controles range verticales directamente. Para conseguir un range vertical, la forma más fácil es usar CSS, aplicando {{cssxref("transform")}} para rotar el elemento y mostrarlo en vertical. Veamos cómo.</p> + +<div id="Orientation_sample3"> +<h4 id="HTML_2">HTML</h4> + +<p>El HTML necesita que el elemento {{HTMLElement("input")}} esté dentro de un elemento {{HTMLElement("div")}} :</p> + +<pre class="brush: html"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>Ahora necesitamos un poco de CSS. Primero escribimos el CSS del div contenedor; especificamos el modo de display y el tamaño que queremos que tenga, reservando un área en la página para el "slider" que vamos a rotar.</p> + +<pre class="brush: css">.slider-wrapper { + display: inline-block; + width: 20px; + height: 150px; + padding: 0; +} +</pre> +Después ponemos la información para el elemento <code><input></code>: + +<pre class="brush: css">.slider-wrapper input { + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); +}</pre> + +<p>El tamaño del range es 150 pixeles de ancho por 20 pixeles de alto. Ponemos los márgenes a 0 y con {{cssxref("transform-origin")}} cambiamos centro que usaremos para rotar el range. Como el input mide 150 pixeles de ancho y largo, girará en una cuadrado de 150 pixeles de lado. Colocamos el centro de giro a 75px horizontal y verticalmente y, finalmente, rotamos 90º en sentido contrario a las agujas del reloj. El resultado final es un input range que ha girado y cuyo valor máximo está en la parte superior y el valor mínimo en la parte inferior.</p> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> +</div> + +<h2 id="Validación">Validación</h2> + +<div class="g-unit" id="gt-res-c"> +<div id="gt-res-p"> +<div id="gt-res-data"> +<div id="gt-res-wrap"> +<div id="gt-res-content"> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"> +<div id="tts_button"> </div> +<span id="result_box" lang="es"><span>No hay un patrón de validación</span></span><span lang="es"><span> disponible;</span> <span>sin embargo, se realizan las siguientes formas de validación automática:</span></span></div> +</div> +</div> +</div> +</div> +</div> + +<p> </p> + +<ul> + <li>Si el {{htmlattrxref("value", "input")}} <span id="result_box" lang="es"><span>está configurado con un valor que no se puede convertir en un número de coma flotante válido, la validación falla porque recibe una entrada incorrecta.</span></span></li> + <li>El valor no puede ser menor que el valor de {{htmlattrxref("min", "input")}}. Por defecto es 0.</li> + <li>El valor no puede ser mayor que el {{htmlattrxref("max", "input")}}. Por defecto es 100.</li> + <li>El valor será un múltiplo del valor de {{htmlattrxref("step", "input")}}. Por defecto es 1.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Además de los ejemplos anteriores, encontrarás más ejemplos en los siguientes artículos:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0<sup>[2]</sup></td> + <td>12</td> + <td>{{CompatGeckoDesktop(23)}}<sup>[1][4]</sup></td> + <td>10</td> + <td>10.1</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1<sup>[3]</sup></td> + <td>57<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A pesar de que la especificación dice que el input range debe mostrarse verticalmente si el alto es mayor que el ancho, este comportamiento no está implementado actualmente. Mira los siguientes bugs para conocer más información: {{bug(840820)}} y {{bug(981916)}}.</p> + +<p>[2] Chrome implementa el valor <code>slider-vertical</code> con la propiedad no estandard {{cssxref("-webkit-appearance")}}. <em>No deberías usarla ya que es propietaria, a menos que incluyas fallbacks para usuarios de otros navegadores</em>.</p> + +<p>[3] El navegador de Android reconoce el tipo <code>"range"</code> desde la versión 2.1, pero no está totalmente implementada hasta la versión 4.3.</p> + +<p>[4] Dibujar marcas y etiquetas no está aún implementado. Ver {{bug(841942)}} para conocer más información.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> +</ul> diff --git a/files/es/web/html/elemento/input/text/index.html b/files/es/web/html/elemento/input/text/index.html new file mode 100644 index 0000000000..b98f985679 --- /dev/null +++ b/files/es/web/html/elemento/input/text/index.html @@ -0,0 +1,472 @@ +--- +title: <input type="text"> +slug: Web/HTML/Elemento/input/text +tags: + - Entrada de texto + - Form input + - Formulários HTML + - HTML + - Input + - Input Type + - Referencia + - Text + - Texto + - formulários + - text input +translation_of: Web/HTML/Element/input/text +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} crean campos de texto básicos de una sola línea.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + +<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Un {{DOMxRef("DOMString")}} que representa el texto contenido en el campo de texto.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} y {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes admitidos</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} y {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td>{{htmlattrxref("list", "input")}}, {{HTMLAttrDef("value")}}</td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{DOMxRef("HTMLInputElement.select", "select()")}}, {{DOMxRef("HTMLInputElement.setRangeText", "setRangeText()")}} y {{DOMxRef("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Value"><code>Value</code></h2> + +<p>El atributo {{HTMLAttrxRef("value", "input")}} es un {{DOMxRef("DOMString")}} que contiene el valor actual del texto ingresado en el campo de texto. Puedes recuperar esto usando la propiedad {{DOMxRef("HTMLInputElement.value", "value")}} en JavaScript.</p> + +<pre class="brush: js notranslate">let theText = myTextInput.value; +</pre> + +<p>Si no existen restricciones de validación para la entrada (consulta {{anch("Validación")}} para obtener más detalles), el valor puede ser una cadena vacía ("").</p> + +<h2 id="Atributos_adicionales">Atributos adicionales</h2> + +<p>Además de los atributos que operan en todos los elementos {{HTMLElement("input")}} independientemente de su tipo, las entradas de texto admiten los siguientes atributos:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>El id del elemento {{HTMLElement("datalist")}} que contiene las opciones de autocompletar predefinidas</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>El número máximo de caracteres que debe aceptar la entrada</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>El número mínimo de caracteres que la entrada puede tener y aún se considera válida</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Una expresión regular que el contenido de la entrada debe coincidir para que sea válida</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Un valor de ejemplo para mostrar en el campo de entrada siempre y cuando esté vacío</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un atributo booleano que indica si el contenido de la entrada debe ser de solo lectura.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un número que indica cuántos caracteres de ancho debe tener el campo de entrada.</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>Controla si se habilita o no la revisión ortográfica para el campo de entrada, o si se debe usar la configuración de revisión ortográfica predeterminada</td> + </tr> + </tbody> +</table> + +<h3 id="HTMLAttrDeflist">{{HTMLAttrDef("list")}}</h3> + +<p>Los valores del atributo {{HTMLAttrDef("list")}} son el {{DOMxRef("Element.id", "id")}} de un elemento {{HTMLElement("datalist")}} ubicado en el mismo documento. El {{HTMLElement("datalist")}} proporciona una lista de valores predefinidos para sugerir al usuario para esta entrada. Cualquier valor de la lista que no sea compatible con {{HTMLAttrxRef("type", "input")}} no se incluye en las opciones sugeridas. Los valores proporcionados son sugerencias, no requisitos: los usuarios pueden seleccionar de esta lista predefinida o proporcionar un valor diferente.</p> + +<h3 id="HTMLAttrDefmaxlength">{{HTMLAttrDef("maxlength")}}</h3> + +<p>El número máximo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrDef("text")}}. Debe ser un valor entero 0 o superior. Si no se especifica {{HTMLAttrDef("maxlength")}}, o se especifica un valor no válido, el {{HTMLAttrDef("text")}} de la entrada no tiene una longitud máxima. Este valor también debe ser mayor o igual que el valor de {{HTMLAttrxRef("minlength", "input")}}.</p> + +<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del valor de texto del campo es mayor que {{HTMLAttrxRef("maxlength", "input")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p> + +<h3 id="HTMLAttrDefminlength">{{HTMLAttrDef("minlength")}}</h3> + +<p>El número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrDef("texto")}}. Debe ser un valor entero no negativo menor o igual al valor especificado por {{HTMLAttrxRef("maxlength", "input")}}. Si no se especifica {{HTMLAttrDef("minlength")}}, o se especifica un valor no válido, la entrada de {{HTMLAttrDef("text")}} no tiene una longitud mínima.</p> + +<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del texto ingresado en el campo es menor que {{HTMLAttrDef("minlength")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p> + +<h3 id="HTMLAttrDefpattern">{{HTMLAttrDef("pattern")}}</h3> + +<div id="pattern-include"> +<p>El atributo {{HTMLAttrDef("pattern")}}, cuando se especifica, es una expresión regular que el {{HTMLAttrxRef("value")}} de la entrada debe coincidir para que el valor pase {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}. Debe ser una expresión regular de JavaScript válida, como la usada por el tipo {{JSxRef("RegExp")}} y como se documenta en la {{web.link("/es/docs/Web/JavaScript/Guide/Regular_Expressions", "guía sobre expresiones regulares")}}; el indicador <code>'u'</code> se especifica al compilar la expresión regular, de modo que el patrón se trata como una secuencia de puntos de código Unicode, en lugar de ASCII. No se deben especificar barras diagonales alrededor del texto del patrón.</p> + +<p>Si el patrón especificado no se especifica o no es válido, no se aplica ninguna expresión regular y este atributo se ignora por completo.</p> + +<div class="note"> +<p><strong>Consejo</strong>:: Utiliza el atributo {{HTMLAttrxRef("title", "input")}} para especificar el texto que la mayoría de los navegadores mostrarán como información sobre herramientas para explicar cuáles son los requisitos para coincidir con el patrón. También debes incluir otro texto explicativo cercano.</p> +</div> +</div> + +<p>Consulta {{anch("Especificación de un patrón")}} para obtener más detalles y un ejemplo.</p> + +<h3 id="HTMLAttrDefplaceholder">{{HTMLAttrDef("placeholder")}}</h3> + +<p>El atributo {{HTMLAttrDef("placeholder")}} es una cadena que proporciona una breve pista al usuario sobre el tipo de información que se espera en el campo. Debe ser una palabra o frase corta que demuestre el tipo de datos esperado, en lugar de un mensaje explicativo. El texto <em>no debe</em> incluir retornos de carro o saltos de línea.</p> + +<p>Si el contenido del control tiene una direccionalidad ({{Glossary("LTR")}} o {{Glossary("RTL")}}) pero necesitas presentar el marcador de posición en la direccionalidad opuesta, puedes usar caracteres de formato de algoritmo bidireccional Unicode para anular la direccionalidad dentro del marcador de posición; consulta {{SectionOnPage("/es/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Anulación de BiDi mediante caracteres de control Unicode")}} para esos caracteres.</p> + +<div class="note"> +<p><strong>Nota</strong>: Evita utilizar el atributo {{HTMLAttrDef("placeholder")}} si puedes. No es tan útil semánticamente como otras formas de explicar tu formulario y puede causar problemas técnicos inesperados con tu contenido. Consulta {{SectionOnPage("/es/docs/Web/HTML/Element/input", "Etiquetas y marcadores de posición")}} para obtener más información.</p> +</div> + +<h3 id="HTMLAttrDefreadonly">{{HTMLAttrDef("readonly")}}</h3> + +<p>Un atributo booleano que, si está presente, significa que el usuario no puede editar este campo. Su {{HTMLAttrDef("value")}}, sin embargo, aún se puede cambiar mediante el código JavaScript configurando directamente la propiedad {{DOMxRef("HTMLInputElement.value")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Debido a que un campo de solo lectura no puede tener un valor, {{HTMLAttrDef("required")}} no tiene ningún efecto en las entradas con el atributo {{HTMLAttrDef("readonly")}} también especificado.</p> +</div> + +<h3 id="HTMLAttrDefsize">{{HTMLAttrDef("size")}}</h3> + +<p>El atributo {{HTMLAttrDef("size")}} es un valor numérico que indica cuántos caracteres de ancho debe tener el campo de entrada. El valor debe ser un número mayor que cero, y el valor predeterminado es 20. Dado que el ancho de los caracteres varía, esto puede ser exacto o no y no se debe confiar en que lo sea; la entrada resultante puede ser más estrecha o más ancha que el número especificado de caracteres, dependiendo de los caracteres y la fuente (configuración de {{CSSxRef("fuente")}} en uso).</p> + +<p>Esto <em>no</em> establece un límite en la cantidad de caracteres que el usuario puede ingresar en el campo. Solo especifica aproximadamente cuántos se pueden ver a la vez. Para establecer un límite superior en la longitud de los datos de entrada, utiliza el atributo {{anch("maxlength")}}.</p> + +<h3 id="HTMLAttrDefspellcheck">{{HTMLAttrDef("spellcheck")}}</h3> + +<p>{{HTMLAttrDef("spellcheck")}} es un atributo global que se utiliza para indicar si se habilita o no la revisión ortográfica de un elemento. Se puede usar en cualquier contenido editable, pero aquí consideramos los detalles relacionados con el uso del corrector ortográfico ({{HTMLAttrxRef("spellcheck")}} en elementos {{HTMLElement("input")}}. Los valores permitidos para el corrección ortográfica son:</p> + +<dl> + <dt><code>false</code></dt> + <dd>Desactive la corrección ortográfica de este elemento.</dd> + <dt><code>true</code></dt> + <dd>Habilita la revisión ortográfica de este elemento.</dd> + <dt>"" (cadena vacía) o sin valor</dt> + <dd>Sigue el comportamiento predeterminado del elemento para la revisión ortográfica. Esto se puede basar en la configuración de la corrección ortográfica de los padres u otros factores.</dd> +</dl> + +<p>Un campo de entrada puede tener habilitado el corrector ortográfico si no tiene el atributo {{anch("readonly")}} configurado y no está deshabilitado.</p> + +<p>Es posible que el valor devuelto al leer el corrector ortográfico puede no reflejar el estado real del corrector ortográfico dentro de un control, si las preferencias de {{Glossary("agente de usuario", "agentes de usuario")}} anulan la configuración.</p> + +<h2 id="Atributos_no_estándar">Atributos no estándar</h2> + +<p>Los siguientes atributos no estándar también están disponibles en algunos navegadores. Como regla general, debes evitar usarlos a menos que no puedas evitarlo.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Una cadena que indica si la autocorrección está activa (<code>on</code>) o (<code>off</code>). <strong>Solo Safari.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>Una cadena que indica el tipo de acción que se realizará cuando el usuario presione la tecla <kbd>Intro</kbd> o <kbd>Retorno</kbd> mientras editas el campo; esto se usa para determinar una etiqueta apropiada para esa tecla en un teclado virtual. <strong>Solo Firefox para Android.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="HTMLAttrDefautocorrect_non-standard_inline">{{HTMLAttrDef("autocorrect")}} {{non-standard_inline}}</h3> + +<div id="autocorrect-include"> +<p>Una extensión de Safari, el atributo {{HTMLAttrDef("autocorrect")}} es una cadena que indica si activar o no la corrección automática mientras el usuario está editando este campo. Los valores permitidos son:</p> + +<dl> + <dt><code>on</code></dt> + <dd>Habilita la corrección automática de errores tipográficos, así como el procesamiento de sustituciones de texto, si los hay.</dd> + <dt><code>off</code></dt> + <dd>Desactiva la corrección automática y las sustituciones de texto.</dd> +</dl> +</div> + +<h3 id="HTMLAttrDefmozactionhint_non-standard_inline">{{HTMLAttrDef("mozactionhint")}} {{non-standard_inline}}</h3> + +<div id="mozactionhint-include"> +<p>Una extensión de Mozilla, compatible con Firefox para Android, que proporciona una pista sobre qué tipo de acción se realizará si el usuario presiona la tecla <kbd>Intro</kbd> o <kbd>Retorno</kbd> mientras edita el campo. Esta información se usa para decidir qué tipo de etiqueta usar en la tecla <kbd>Intro</kbd> del teclado virtual.</p> + +<div class="note"> +<p><strong>Nota</strong>: Este <a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">se ha estandarizado</a> como el atributo global {{HTMLAttrxRef("enterkeyhint")}}, pero aún no está ampliamente implementado. Para ver el estado del cambio que se está implementando en Firefox, consulta {{bug(1490661)}}.</p> +</div> + +<p>Los valores permitidos son: <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> y <code>send</code>. El navegador decide, utilizando esta sugerencia, qué etiqueta poner en la tecla Intro.</p> +</div> + +<h2 id="Usar_entradas_de_texto">Usar entradas de texto</h2> + +<p>Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} crean entradas básicas de una sola línea. Los debes usar en cualquier lugar donde desees que el usuario ingrese un valor de una sola línea y no hay un tipo de entrada más específico disponible para recopilar ese valor (por ejemplo, si es un {{web.link("/es/docs/Web/HTML/Element/input/datetime-local", "date")}}, {{web.link("/es/docs/Web/HTML/Element/input/url", "URL")}}, {{web.link("/es/docs/Web/HTML/Element/input/email", "email")}}, o {{web.link("/es/docs/Web/HTML/Element/input/search", "término de búsqueda")}}, tiene mejores opciones disponibles).</p> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name"> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<p>Esto se renderiza así:</p> + +<p>{{EmbedLiveSample("Ejemplo_básico", 600, 50)}}</p> + +<p>Cuando se envía, el par de nombre/valor de datos enviado al servidor será <code>uname=Chris</code> (si se ingresó "Chris" como valor de entrada antes del envío). Debes recordar incluir el atributo {{HTMLAttrxRef("name", "input")}} en el elemento {{HTMLElement("input")}}; de lo contrario, el valor del campo de texto no se incluirá con los datos enviados.</p> + +<h3 id="Establecer_marcadores_de_posición">Establecer marcadores de posición</h3> + +<p>Puedes proporcionar un marcador de posición útil dentro de tu entrada de texto que puede proporcionar una pista sobre qué ingresar al incluir el uso del atributo {{HTMLAttrxRef("placeholder", "input")}}. Mira el siguiente ejemplo:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" + placeholder="Una sola palabra, en minúsculas"> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<p>Puedes ver cómo se representa el marcador de posición a continuación:</p> + +<p>{{EmbedLiveSample("Establecer_marcadores_de_posición", 600, 50)}}</p> + +<p>El marcador de posición generalmente se representa en un color más claro que el color de primer plano del elemento y desaparece automáticamente cuando el usuario comienza a ingresar texto en el campo (o siempre que el campo tiene un valor establecido programáticamente al establecer su atributo {{HTMLAttrDef("value")}}.</p> + +<h3 id="Tamaño_físico_del_elemento_de_entrada">Tamaño físico del elemento de entrada</h3> + +<p>El tamaño físico del cuadro de entrada se puede controlar mediante el atributo {{HTMLAttrxRef("size", "input")}}. Con él, puedes especificar el número de caracteres que la entrada de texto puede mostrar a la vez. Esto afecta el ancho del elemento, lo cual te permite especificar el ancho en términos de caracteres en lugar de píxeles. En este ejemplo, por ejemplo, la entrada tiene 30 caracteres de ancho:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" + placeholder="Una sola palabra, en minúsculas" + size="30"> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Tamaño_físico_del_elemento_de_entrada', 600, 50) }}</p> + +<h2 id="Validación">Validación</h2> + +<p>Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} no tienen validación automática aplicada (ya que una entrada de texto básica debe ser capaz de aceptar cualquier cadena arbitraria), pero hay algunas opciones de validación de lado del cliente disponibles, que verás a continuación.</p> + +<div class="note"> +<p><strong>Nota</strong>: La validación del formulario HTML <em>no</em> sustituye a la de los scripts del servidor que garantizan que los datos introducidos tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).</p> +</div> + +<h3 id="Una_nota_sobre_estilizado">Una nota sobre estilizado</h3> + +<p>Hay pseudoclases útiles disponibles para diseñar elementos de formulario para ayudar al usuario a ver cuándo sus valores son válidos o no. Estos son {{CSSxRef(": valid")}} e {{CSSxRef(":invalid")}}. En esta sección, usaremos el siguiente CSS, que colocará una marca de verificación (tilde) junto a las entradas que contienen valores válidos y una cruz (X) junto a las entradas que contienen valores no válidos.</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>La técnica también requiere que se coloque un elemento {{HTMLElement("span")}} después del elemento {{HTMLElement("form")}}, que actúa como contenedor de los iconos. Esto era necesario porque algunos tipos de entrada en algunos navegadores no muestran muy bien los iconos colocados directamente después de ellos.</p> + +<h3 id="Hacer_entrada_requerida">Hacer entrada requerida</h3> + +<p>Puedes usar el atributo {{HTMLAttrxRef("required", "input")}} como una manera fácil de hacer que se requiera ingresar un valor antes de que se permita el envío del formulario:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" required> + <span class="validity"></span> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>Esto se renderiza así:</p> + +<p>{{ EmbedLiveSample('Hacer_entrada_requerida', 600, 70) }}</p> + +<p>Si intentas enviar el formulario sin ningún término de búsqueda ingresado, el navegador mostrará un mensaje de error.</p> + +<h3 id="Longitud_del_valor_de_entrada">Longitud del valor de entrada</h3> + +<p>Puedes especificar una longitud mínima (en caracteres) para el valor ingresado usando el atributo {{HTMLAttrxRef("minlength", "input")}}; de manera similar, usa {{HTMLAttrxRef("maxlength", "input")}} para establecer la longitud máxima del valor ingresado, en caracteres.</p> + +<p>El siguiente ejemplo requiere que el valor ingresado tenga entre 4 y 8 caracteres de longitud.</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" required size="10" + placeholder="nombreusuario" + minlength="4" maxlength="8"> + <span class="validity"></span> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>Esto se renderiza así:</p> + +<p>{{ EmbedLiveSample('Longitud_del_valor_de_entrada', 600, 70) }}</p> + +<p>Si intentas enviar el formulario con menos de 4 caracteres, se te dará un mensaje de error apropiado (que difiere entre los navegadores). Si intentas ingresar más de 8 caracteres, el navegador no te lo permitirá.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si especificas un {{HTMLAttrDef("minlength")}} pero no especificas {{HTMLAttrDef("required")}}, la entrada se considera válida, ya que no se requiere que el usuario especifique un valor.</p> +</div> + +<h3 id="Especificación_de_un_patrón">Especificación de un patrón</h3> + +<p>Puedes utilizar el atributo {{HTMLAttrxRef("pattern", "input")}} para especificar una expresión regular con la que el valor ingresado debe coincidir para que se considere válido (ve un curso intensivo simple en {{web.link("/es/docs/Learn/HTML/Forms/Form_validation#Validación_con_una_expresión_regular", "Validación con una expresión regular")}} sobre el uso de expresiones regulares para validar entradas).</p> + +<p>El siguiente ejemplo restringe el valor a 4-8 caracteres y requiere que contenga solo letras minúsculas.</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" required size="45" + pattern="[a-z]{4,8}"> + <span class="validity"></span> + <p>Los nombres de usuario deben estar en minúsculas y tener entre 4 y 8 caracteres de longitud.</p> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>Esto se renderiza así:</p> + +<p>{{ EmbedLiveSample('Especificación_de_un_patrón', 600, 110) }}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Puedes ver buenos ejemplos de entradas de texto utilizadas en contexto en los artículos {{web.link("/es/docs/Learn/HTML/Forms/Your_first_HTML_form", "Mi primer formulario HTML")}} y {{web.link("/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form", "Cómo estructurar un formulario HTML")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="text">')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="text">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.input.input-text")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}</li> + <li>{{HTMLElement("input")}} y la interfaz {{DOMxRef("HTMLInputElement")}} en que se basa.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> + <li>{{HTMLElement("textarea")}}: Campo de entrada de texto multilínea</li> + <li>{{web.link("/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Compatibilidad de propiedades CSS")}}</li> +</ul> diff --git a/files/es/web/html/elemento/ins/index.html b/files/es/web/html/elemento/ins/index.html new file mode 100644 index 0000000000..8201603d48 --- /dev/null +++ b/files/es/web/html/elemento/ins/index.html @@ -0,0 +1,137 @@ +--- +title: ins +slug: Web/HTML/Elemento/ins +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/ins +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <code style="color: darkblue;">ins</code> (insertado) marca las partes de un texto que han sido añadidos al documento.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <ins> e </ins> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: a veces <a href="/es/HTML/Elemento/Tipos_de_elementos#en_linea" title="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a> a veces <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>:</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: depende, si actua como un elemento en bloque puede contener elementos en bloque. Pero si actua como un elemento en linea solo podrá contener elementos en linea.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genericos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>identificador a nivel de documento, lista de clases separadas por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td><code style="color: green;">cite</code></td> + <td>URI</td> + <td>implícito</td> + <td>información sobre el cambio</td> + </tr> + <tr> + <td><code style="color: green;">datetime</code></td> + <td>fecha</td> + <td>implícito</td> + <td>fecha y hora del cambio</td> + </tr> + <tr> + <th colspan="4">de transición</th> + </tr> + <tr> + <td colspan="4">No tiene, o dicho de otra manera, tiene los mismos que en el doctype estricto</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>El siguiente código:</p> + +<pre> Ejemplo de ins en linea: + <p> El agua es insipida, <ins>inodora e incolora.</ins> </p> + + Ejemplo de ins en bloque: + <p> El agua es insipida. </p> + <ins> <p> Y además inodora e incolora. </p> </ins> +</pre> + +<p><br> + Se visualiza así:</p> + +<div class="highlight"> +<p>Ejemplo de ins en linea:</p> + +<p>El agua es insipida, <ins>inodora e incolora.</ins></p> + +<p>Ejemplo de ins en bloque:</p> + +<p>El agua es insipida.</p> + +<p><ins>y además inodora e incolora.</ins></p> +</div> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> diff --git a/files/es/web/html/elemento/isindex/index.html b/files/es/web/html/elemento/isindex/index.html new file mode 100644 index 0000000000..520c286c08 --- /dev/null +++ b/files/es/web/html/elemento/isindex/index.html @@ -0,0 +1,44 @@ +--- +title: <isindex> +slug: Web/HTML/Elemento/isindex +tags: + - Deprecado + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/isindex +--- +<div>{{Deprecated_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><code><isindex> </code>es un elemento HTML obsoleto que posiciona un campo de texto en una página para buscar en el documento . <code><isindex></code> fue pensado por el W3C para ser usado dentro del elemento {{HTMLElement("head")}} , pero los exploradores lo soportaban sin importar donde se usaba .</p> + +<p><<font face="Consolas, Liberation Mono, Courier, monospace">isindex> </font>fue deprecado en HTML 4.01 , debido a que el mismo comportamiento puede ser logrado con un form de HTML. </p> + +<h2 id="Atributos">Atributos </h2> + +<p>Como todos los otros elementos HTML , este elemento acepta los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p> + +<dl> + <dt>{{htmlattrdef("prompt")}}</dt> + <dd>Este atributo añade su valor como una ventana para un campo de texto.</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>Este atributo puede ser usado para mandar una busqueda a una URL diferente . La acción no está definida por el W3C .</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><head> + <isindex prompt="Search Document... " /> +</head></pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("form")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/kbd/index.html b/files/es/web/html/elemento/kbd/index.html new file mode 100644 index 0000000000..1f29dead64 --- /dev/null +++ b/files/es/web/html/elemento/kbd/index.html @@ -0,0 +1,120 @@ +--- +title: kbd +slug: Web/HTML/Elemento/kbd +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/kbd +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Marca el texto que debe introducir el usuario.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <kbd> y </kbd> (ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>lista de clases separadas por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"><p> +Si está conforme escriba <kbd>sí</kbd>. Si no, pulse <kbd>esc</kbd> +</p> +</pre> + +<p>Se visualiza asi</p> + +<p class="eval">Si esta conforme escriba <kbd>si</kbd>. Si no, pulse <kbd>esc</kbd></p> + +<h3 id="Comentarios" name="Comentarios"> </h3> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p>La visualizacion puede cambiar segun el navegador debido a los estilos preestablecidos por cada uno.</p> diff --git a/files/es/web/html/elemento/keygen/index.html b/files/es/web/html/elemento/keygen/index.html new file mode 100644 index 0000000000..0370a780cd --- /dev/null +++ b/files/es/web/html/elemento/keygen/index.html @@ -0,0 +1,128 @@ +--- +title: keygen +slug: Web/HTML/Elemento/keygen +tags: + - para_revisar +translation_of: Web/HTML/Element/keygen +--- +<p>El elemento <code>keygen</code> de HTML existe para facilitar la generación de llaves, y el envío de la clave pública como parte de un formulario HTML. Este mecanismo está diseñado para utilizarse con sistemas de gestión de certificados basados en la Web. Se espera que el elemento <code>keygen</code> se utilice en un formulario HTML, junto con otra información necesaria para la construcción de una solicitud de certificado, y que el resultado del proceso será un certificado firmado.</p> + +<h3 id="Usage_context" name="Usage_context">Contexto de uso</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td>Las categorías de contenido</td> + <td><a title="es / HTML / categorías de contenido # flujo de contenido">contenido dinámico</a> , <a title="es / HTML / Las categorías de contenido # Enunciado contenido">el contenido de redacción</a> , contenido interactivo, <a title="es / HTML / categorías de contenido # formulario de lista">lista</a> , <a title="es / HTML / categorías de contenido # forma labelable">labelable</a> , <a title="es / HTML / categorías de contenido # forma submittable">submittable</a> , <a title="es / HTML / categorías de contenido # forma reajustable">reajustable</a> <a title="es / HTML / categorías de contenido # contenido del formulario asociado">asociada elemento de formulario.</a></td> + </tr> + <tr> + <td>Contenido permitido</td> + <td>ninguno</td> + </tr> + <tr> + <td>Omisión de etiquetas</td> + <td>elemento vacío, sólo tiene una etiqueta de inicio</td> + </tr> + <tr> + <td>Elementos padres permitidos</td> + <td>donde se espere <a title="es / HTML / Las categorías de contenido # Enunciado contenido">contenido de frases</a></td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.w3.org/TR/html5/the-button-element.html#the-keygen-element" title="http://www.w3.org/TR/html5/the-button-element.html # el-keygen-elemento">HTML 5, la sección 4.10.5</a></td> + </tr> + </tbody> +</table> + +<h3 id="Atributos">Atributos</h3> + +<h3 id="Uso">Uso</h3> + +<dl> + <dt><a name="attr-autofocus">autofocus</a></dt> + <dd>Este atributo booleano permite especificar que el control debe tener el foco de entrada cuando se cargue la página, a menos que el usuario lo anule, por ejemplo, al escribir en un control diferente. Sólo un elemento de formulario en un documento puede tener el atributo <strong>autofocus,</strong> que es un valor booleano.</dd> + <dt>{{ Htmlattrdef ("challenge") }}</dt> + <dd>Una cadena de desafío que se presenta junto con la clave pública. El valor predeterminado es una cadena vacía si no se especifica.</dd> + <dt>{{ Htmlattrdef ("disabled") }}</dt> + <dd>Este atributo booleano indica que el control del formulario no está disponible para la interacción.</dd> + <dt><a name="attr-form">form</a></dt> + <dd>El elemento form al que este elemento está asociado (el <em>propietario del formulario).</em> El valor del atributo debe ser un <strong>id</strong> de un elemento {{ HTMLElement ("form") }} en el mismo documento. Si este atributo no se especifica, este elemento debe ser un descendiente de un elemento {{ HTMLElement ("form") }}. Este atributo le permite colocar elementos <span style="font-family: Courier New;"><keygen></span> en cualquier lugar dentro de un documento, no sólo como descendientes del formulario.</dd> + <dt>{{ Htmlattrdef ("keytype") }}</dt> + <dd>El tipo de clave generada. El valor por defecto es <code>RSA</code> .</dd> + <dt><a name="attr-name">name</a></dt> + <dd>El nombre del control, que se envía con los datos del formulario.</dd> +</dl> + +<p>El elemento se escribe como sigue:</p> + +<pre><code><keygen name="<var>name</var>" challenge="<var>challenge string</var>" keytype="<var>type</var>" keyparams="<var>pqg-params</var>"></code></pre> + +<p>El parámetro <code>keytype</code> se utiliza para especificar qué tipo de clave se generará. Los valores válidos son " <code>RSA</code> ", que es el valor predeterminado," <code>DSA</code> "y" <code>EC</code> ". Los atributos <code>name</code> y <code>challenge</code> son necesarios en todos los casos. El atributo <code>keytype</code> es opcional para la generación de claves RSA y obligatorio para la generación de claves DSA y CE. El atributo <code>keyparams</code> es necesario para la generación de claves DSA y CE e ignorado para la generación de claves RSA. <code>PQG</code> es sinónimo de <code>keyparams</code> . Es decir, usted puede especificar <code>keyparams="pqg-params"</code> o <code>pqg="pqg-params"</code> .</p> + +<p>Para las claves RSA, el parámetro <code>keyparams</code> no se utiliza (se ignora si está presente). El usuario puede tener una selección de la fuerza de la clave RSA. En la actualidad, el usuario tiene que elegir entre los grados "alto" (2048 bits) y "medio" (1024 bits).</p> + +<p>Para las claves DSA, el parámetro <code>keyparams</code> especifica los parámetros DSA PQG que se van a utilizar en el proceso de creación de llaves. El valor del parámetro <code>pqg</code> es en BASE64, DER codificado Dss-Parms como se especifica en el IETF <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a> . El usuario puede tener una variedad de tamaños de claves DSA, lo que permite al usuario elegir una de las dimensiones definidas en el estándar DSA.</p> + +<p>Para las claves CE, el parámetro <code>keyparams</code> especifica el nombre de la curva elíptica en la que será generada la clave. Normalmente es una cadena de la tabla en <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177" title="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185 ,187-206 ,208-227 ,229-256 # 177">nsKeygenHandler.cpp</a> . (Tenga en cuenta que sólo un subconjunto de las curvas nombradas puede ser compatible con un navegador en particular.) Si la cadena parámetro <code>keyparams</code> no es el nombre de una curva reconocible, entonces una curva se elige de acuerdo a la fortaleza elegida por el usuario (bajo, medio, alto), utilizando la curva llamada " <code>secp384r1</code> " para alto, y la curva llamada" <code>secp256r1</code> " para claves de fuerza mediana. (Nota: la elección de la cantidad de fortalezas, los valores por defecto para cada fuerza, y la interfaz de usuario que el usuario se ofrece una opción, están fuera del alcance de esta especificación.)</p> + +<p>El elemento <code>keygen</code> sólo es válido dentro de un formulario HTML. Esto causará que algún tipo de selección se presentará al usuario para la selección del tamaño de la clave. La interfaz de usuario para la selección puede ser un menú, botones de radio, o posiblemente algo más. El navegador presentará varias fuerzas posibles. Actualmente, se ofrecen dos fuerzas, alta y media. Si el navegador del usuario está configurado para el soporte de hardware de cifrado (por ejemplo, "tarjetas inteligentes"), también puede dársele la opción al usuario de dónde generar la clave, es decir, si en una tarjeta inteligente o en el software y si se almacenan en el disco.</p> + +<p>Cuando el botón de enviar es pulsado, un par de claves del tamaño seleccionado se genera. La clave privada se cifra y se almacena en la base de datos de claves local.</p> + +<pre> PublicKeyAndChallenge:: SEQUENCE { + SPKI SubjectPublicKeyInfo, + challenge IA5String + } + SignedPublicKeyAndChallenge:: SEQUENCE { + publicKeyAndChallenge PublicKeyAndChallenge, + signatureAlgorithm AlgorithmIdentifier, + firma BIT STRING + }</pre> + +<p>La clave pública y la cadena de desafío son codificadas con DER como PublicKeyAndChallenge, a continuación, firmados digitalmente con la clave privada para producir una SignedPublicKeyAndChallenge. El SignedPublicKeyAndChallenge es base64, y los datos ASCII finalmente se envía al servidor como un par de nombre/valor de formulario, donde el nombre es <var>name</var> especificado por el atributo <code>name</code> del elemento <code>keygen</code>. Si no hay cadena de desafío se proporciona, entonces será codificada como IA5String de longitud cero.</p> + +<p>He aquí un ejemplo de envío de formularios, como sería entregado a un programa CGI en el servidor HTTP:</p> + +<pre> CommonName = John Doe + y e-mail = doe@foo.com y org = Foobar + + Informática Corp. y + orgunit = Oficina + de + la burocracia y la localidad Ciudad X = y = estado de California y en el país = EE.UU. y + key = MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue% 2BPtwBRE6XfV% 0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID% 0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n% 2FS% 0Ar 2F7iJNroWlSzSMtTiQTEB%%%% 2BADWHGj9u1xrUrOilq 2Fo2cuQxIfZcNZkYAkWP4DubqW 0Ai0% 2F% 3D% 2FrgBvmco</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380749" title="https://bugzilla.mozilla.org/attachment.cgi?id=380749">Sample form with RSA KEYGEN element</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380750" title="https://bugzilla.mozilla.org/attachment.cgi?id=380750">Sample form with DSA KEYGEN element and PQG Parameters</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380751" title="https://bugzilla.mozilla.org/attachment.cgi?id=380751">Sample form with DSA KEYGEN element but no PQG Parameters</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=380752" title="https://bugzilla.mozilla.org/attachment.cgi?id=380752">Sample form with EC KEYGEN element</a></li> +</ul> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión más baja</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>---</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>3.0</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.2 (125)</td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>{{ languages ({"fr": "fr/HTML/Element/Keygen","en": "en/HTML/Element/Keygen"}) }}</p> diff --git a/files/es/web/html/elemento/label/index.html b/files/es/web/html/elemento/label/index.html new file mode 100644 index 0000000000..3017c1ba36 --- /dev/null +++ b/files/es/web/html/elemento/label/index.html @@ -0,0 +1,138 @@ +--- +title: <label> +slug: Web/HTML/Elemento/label +translation_of: Web/HTML/Element/label +--- +<h2 id="Resumen">Resumen</h2> + +<p>El<em> </em><strong>Elemento </strong><strong style="line-height: 1.5;">HTML </strong><strong style="line-height: 1.5;"><code style="font-size: 14px;"><label> </code></strong><span style="line-height: 1.5;">representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">for</span><span style="line-height: 1.5;">, o ubicando el control dentro del elemento </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">label</span><span style="line-height: 1.5;">. Tal control es llamado "el control etiquetado" del elemento </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">label</span><span style="line-height: 1.5;">.</span></p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorias</a></dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">contenido interactivo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">elemento de formulario asociado</a>, contenido palpable.</li> + <li><dfn>Contenido permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>, pero no otros componentes <code>label</code> ni otros elementos etiquetables a parte del de control ya etiquetado.</li> + <li><dfn>Omision del Tag</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos padre permitidos</dfn> Cualquier elemento que acepte el <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLLabelElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} {{HTMLVersionInline("5")}}</dt> + <dd>Una tecla de atajo para acceder a este elemento desde el teclado.</dd> + <dt>{{htmlattrdef("for")}}</dt> + <dd>El ID del elemento de formulario etiquetable relacionado en el mismo documento que el elemento <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">label</span><span style="line-height: 1.5;">. El primer elemento en el documento con tal ID que coincida con el dispuesto en el atributo </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">for</span><span style="line-height: 1.5;"> será el control etiquetado para este elemento.</span></dd> + <dd> + <div class="note"><strong>Nota:</strong> Un elemento label puede contener ambos; El atributo for y el elemento de control anidado, siempre y cuando el atributo for <span style="line-height: 1.5em;">apunte al mismo elemento. </span></div> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>El formulario con el cual el label está asociado (su formulario dueño). El valor de este atributo debe ser un ID del elemento {{HTMLElement("form")}} en el mismo documento. Si este atributo no es especificado, este elemento <code><label></code> deberia ser descendiente de un elemento {{HTMLElement("form")}}. Este atributo permite ubicar el elemento label en cualquier lugar dentro del documento y no solo como descendiente de su respectivo formulario.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><!-- Un simple ejemplo de un label con el atributo for --> +<label for="Name">Click me</label> +<input type="text" id="Name" name="Name" /> + +<!-- Aun mas simple --> +<label>Click me <input type="text" id="Name" name="Name" /></label></pre> + +<h3 id="Resultado">Resultado</h3> + +<p><label>Click me <input></label></p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notes">Notes</h3> + +<h4 id="Click_events_in_nested_<label>_elements">Click events in nested <code><label></code> elements</h4> + +<p>Starting with Gecko 8.0 {{geckoRelease("8.0")}}, a bubbling click event triggers at most one <code><label></code>, and the synthetic click event cannot trigger additional <code><label></code>s. In Gecko, a click event will still bubble up past a <code><label></code>, while in WebKit or Internet Explorer the click event will stop at the <code><label></code>. The behavior prior to Gecko 8.0 (triggering multiple <code><label></code>s) caused Firefox to stop responding (see {{bug(646157)}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/legend/index.html b/files/es/web/html/elemento/legend/index.html new file mode 100644 index 0000000000..1aaaecced4 --- /dev/null +++ b/files/es/web/html/elemento/legend/index.html @@ -0,0 +1,125 @@ +--- +title: legend +slug: Web/HTML/Elemento/legend +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/legend +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <span style="font-family: courier new;"><legend></span> (leyenda) crea un título para un grupos los campos ({{ HTMLElement("fieldset") }}) de un formulario.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <span style="font-family: courier new;"><legend></span> y <span style="font-family: courier new;"></legend></span> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="/es/HTML/Elemento/Tipos_de_elementos#en_bloque" title="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a></dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>:</dd> +</dl> + +<dl> + <dd><strong>Debe contener</strong>: cero o más elementos <a href="/es/HTML/Elemento/Tipos_de_elementos#en_linea" title="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> + <dd><strong>Debe estar contenido por</strong>: debe ser el primer hijo de un elemento {{ HTMLElement("fieldset") }}</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>lista de clases separadas por espacios</td> + <td>implícito</td> + <td>identificador a nivel de documento</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>uno de los siguientes:"ltr" o "rtl"</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td><code style="color: green;">accesskey</code></td> + <td>un caracter</td> + <td>implícito</td> + <td>carácter de la tecla de acceso rápido</td> + </tr> + <tr> + <th colspan="4">de transición</th> + </tr> + <tr> + <td><code style="color: green;">align</code></td> + <td>uno de los siguientes: "top", "bottom", "left" o "right"</td> + <td>implícito</td> + <td>alineación con relación al fieldset</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre><form> + <fieldset> + <legend>Información Personal</legend> + <label for="nombre">Nombre:</label> + <input name="nombre" id="nombre" type="text" tabindex="1" /> + <label for="apellidos">Apellidos:</label> + <input name="apellidos" id="apellidos" type="text" tabindex="2" /> + </fieldset> + + <fieldset> + <legend>Edad</legend> + <label><input type="checkbox" tabindex="20" name="edad" value="20-39" /> 20-39</label> + <label><input type="checkbox" tabindex="21" name="edad" value="40-59" /> 40-59</label> + <label><input type="checkbox" tabindex="22" name="edad" value="60-79" /> 60-79</label> + </fieldset> +</form></pre> diff --git a/files/es/web/html/elemento/li/index.html b/files/es/web/html/elemento/li/index.html new file mode 100644 index 0000000000..5c9755e528 --- /dev/null +++ b/files/es/web/html/elemento/li/index.html @@ -0,0 +1,123 @@ +--- +title: li +slug: Web/HTML/Elemento/li +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/li +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <code style="color: darkblue;">li</code> del ingles <em>item list</em> o<em> elemento de lista</em> declara cada uno de los elementos de una lista.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <li> y </li> (la de cierre es opcional).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>:</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a> o en <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th colspan="4">Genericos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>identificador a nivel de documento, lista de clases separadas por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">de transición</th> + </tr> + <tr> + <td><code style="color: green;">type</code></td> + <td>(disc|square|circle) (1|a|A|i|I)</td> + <td>implícito</td> + <td>estilo de numeración</td> + </tr> + <tr> + <td><code style="color: green;">value</code></td> + <td>'un número'</td> + <td>implícito</td> + <td>reinicializar número de secuencia</td> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>El siguiente código:</p> + +<pre class="eval"><ul> + <li>punto uno</li> + <li>punto dos</li> + <li>punto tres</li> +</ul> +</pre> + +<div class="highlight"> +<p>Se visualiza así:</p> + +<ul> + <li>punto uno</li> + <li>punto dos</li> + <li>punto tres</li> +</ul> +</div> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> diff --git a/files/es/web/html/elemento/link/index.html b/files/es/web/html/elemento/link/index.html new file mode 100644 index 0000000000..e604bf0f30 --- /dev/null +++ b/files/es/web/html/elemento/link/index.html @@ -0,0 +1,425 @@ +--- +title: link +slug: Web/HTML/Elemento/link +tags: + - HTML + - 'HTML:Elemento' + - Metadatos + - Metadatos de documento HTML + - Referencia + - Todas_las_Categorías + - Web +translation_of: Web/HTML/Element/link +--- +<p id="Summary">{{HTMLRef}}</p> + +<p>El <strong>elemento HTML <code><link></code></strong> especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos.</p> + +<div class="note"> +<p>El atributo {{htmlattrxref("rel", "link")}} puede ser establecido con muchos valores diferentes. Estos se encuentran <a href="/es/docs/Web/HTML/Tipos_de_enlaces">listados</a> en una página separada.</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td>Contenido en metadatos. Si {{htmlattrxref("itemprop", "link")}} está presente: <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">contenido dinámico</a> y <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual o estático</a></td> + </tr> + <tr> + <th>Contenido permitido</th> + <td>Ninguno, es un {{Glossary("empty element", "elemento vacío")}}.</td> + </tr> + <tr> + <th>Omisión de etiqueta</th> + <td>Siendo un elemento vacío, la etiqueta de inicio debe estar presente y la etiqueta de cierre no debe estarlo</td> + </tr> + <tr> + <th>Elementos padre permitidos</th> + <td>Cualquier elemento que acepte elementos de metadatos. Si está presente el atributo {{htmlattrxref("itemprop", "link")}}: cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual o estático</a>.</td> + </tr> + <tr> + <th>Interfaz DOM</th> + <td>{{domxref("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt> + <dd>Este atributo define la codificación de caracteres del recurso enlazado. El valor es un espacio y/o una lista de grupos de caracteres según se define en {{rfc(2045)}}, separados por coma. El valor predeterminado es <code>iso-8859-1</code>. + <div class="note"><strong>Nota de uso:</strong> Este atributo es obsoleto y <strong>no debe ser usado por autores</strong>. Para conseguir su mismo efecto, se recomienda usar el encabezado HTTP <span style="font-family: courier new;">Content-Type</span> en el recurso enlazado.</div> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>Este atributo enumerado indica si se debe usar CORS cuando se solicite una imagen relacionada. Las <a href="/es/docs/Web/HTML/Imagen_con_CORS_habilitado">imágenes con CORS habilitado</a> pueden ser reutilizadas en el elemento {{HTMLElement("canvas")}} sin que estén <em>corruptas</em>.Los valores permitidos son: + <dl> + <dt><code>"anonymous"</code></dt> + <dd>Una solicitud a un origen cruzado (esto es, con el encabezado HTTP <code>Origin:</code>) es realizada, pero no se envían credenciales (es decir, no se envían cookies, ni certificado X.509, ni datos de autenticación básica HTTP). Si el servidor no otorga credenciales al sitio de origen (por no enviar el encabezado HTTP <code>Access-Control-Allow-Origin:</code>) la imagen estará <em>corrupta</em>, y su uso estará restringido.</dd> + <dt><code>"use-credentials"</code></dt> + <dd>Una solicitud a un origen cruzado (esto es, con el encabezado HTTP <code>Origin:</code>) es realizada, enviando credenciales (es decir, se envían cookies, certificado y autenticación básica HTTP). Si el servidor no otorga credenciales al sitio de origen (a través del encabezado HTTP <code>Access-Control-Allow-Credentials:</code>), la imagen estará <em>corrupta</em>, y su uso estará restringido.</dd> + </dl> + Si no está presente, el recurso es obtenido sin una solicitud CORS (sin enviar el encabezado HTTP <code>Origin:</code>), previniendo así su uso no corrupto en elementos {{HTMLElement('canvas')}}. Si se introduce un valor no permitido, se maneja como si usara el valor <strong>anonymous</strong>. Véase <a href="/es/docs/Web/HTML/Atributos_de_configuracion_CORS">atributos de configuración CORS</a> para más información.</dd> + <dt>{{htmlattrdef("disabled")}} {{Non-standard_inline}}</dt> + <dd>Este atributo es usado para deshabilitar una relación de enlace. Agregando programación, este atributo puede ser usado para habilitar o deshabilitar la relación con distintas hojas de estilos. + <div class="note"> + <p><strong>Nota:</strong> Aunque no hay atributo <code>disabled</code> en el estándar de HTML, <strong>sí</strong> hay un atributo <code>disabled</code> en el objeto DOM <code>HTMLLinkElement</code>.</p> + + <p>El uso de <code>disabled</code> como atributo HTML no es estándar, y solo puede ser usado en algunos navegadores (<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=27677">W3 #27677</a>). <strong style="font-weight: bold;">No debe usarse</strong>. Para lograr un efecto similar, se puede usar una de las siguientes técnicas:</p> + + <ul> + <li>Si el atributo <code>disabled</code> fue añadido directamente al elemento en la página, no incluya el elemento {{HTMLElement("link")}} en vez de eso;</li> + <li>Establezca la <strong>propiedad</strong> <code>disabled</code> del objeto DOM <code>StyleSheet</code> vía programación.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>Este atributo especifica la {{glossary("URL")}} del recurso enlazado. La URL debe ser absoluta o relativa.</dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>Este atributo indica el idioma del recurso enlazado. Es meramente informativo. Los valores permitidos son determinados por la <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Se recomienda usar este atributo solamente si el atributo {{htmlattrxref("href", "a")}} está presente.</dd> + <dt>{{htmlattrdef("integrity")}} {{experimental_inline}}</dt> + <dd>Contiene metadatos en línea, el valor criptográfico codificado a base 64 de un recurso (archivo) que se le está indicando al navegador que obtenga, el cual puede ser utilizado por el agente usuario para verificar si el recurso obtenido ha sido entregado libre de manipulaciones inesperadas. Véase <a href="/es/docs/Web/Security/Subresource_Integrity">Integridad de subrecursos</a>.</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>Este atributo especifica el tipo de medio al que aplica el recurso enlazado. Su valor debe ser un <a href="/en-US/docs/CSS/Media_queries">media query</a>. Este atributo es usado principalmente cuando se enlaza a una hoja de esetilos externa en la que se le permita al agenete usuario seleccionar la que mejor se adapte al dispositivo sobre el que se ejecuta. + <div class="note"><strong>Notas de uso: </strong> + <ul> + <li>En HTML 4, esto puede ser solamente una lista simple de literales de medios separadas por espacio, es decir, <a href="/es/docs/Web/CSS/@media">tipos de medios y grupos</a>, donde se definían valores para este atributo, tales como <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 extiende esto a cualquier clase de <a href="/es/docs/CSS/Media_queries">media queries</a>, los cuales son un superconjunto de los valores permitidos de HTML 4.</li> + <li>Los navegadores que no soporten los <a href="/es/docs/CSS/Media_queries">Media Queries de CSS3</a> no necesariamente reconocerán el enlace adecuado; no olvide establecer enlaces de <em>fallback</em>, usando los conjuntos de media queriese definidos en HTML 4.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt> + <dd>El valor de este atributo provee información acerca de las funciones que podrían ser ejecutadas en un objeto. Los valores son generalmente indicados por el protocolo HTTP cuando se usa, pero podrían (por razones similares a las del atributo <strong>title</strong>) ser usados para incluir información de ayuda por adelantado en el enlace. Por ejemplo, el navegador podría elegir una representación diferente de un enlace como una función de los métodos especificados; algo que es buscable podría tener un ícono diferente, o un enlace externo podría dibujar una indicación de que se dejará el sitio actual. Este atributo no está bien comprendido, ni soportado, aun por el navegador en el que se definió, Internet Explorer 4. Véase <a href="http://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx" rel="external nofollow">Propiedades de métodos (MSDN)</a>.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>Una cadena de texto que indica el referente a usar cuando se obtenga el recurso: + <ul> + <li><code>'no-referrer'</code> significa que el encabezado {{HTTPHeader("Referer")}} no será enviado.</li> + <li><code>'no-referrer-when-downgrade'</code> significa que no se enviará el encabezado {{HTTPHeader("Referer")}} cuando se navegue a un origen sin TLS (HTTPS). Este es el comportamiento predeterminado del agente usuario, si no se especifica una política distinta.</li> + <li><code>'origin'</code> significa que el referente será el origen de la página, qué es básicamente el esquema, host y puerto.</li> + <li><code>'origin-when-cross-origin'</code> significa que la navegación a otros orígenes estará limitada por el esquema, el host y el puerto, mientras que navegar dentro del mismo origen incluirá la ruta del referente </li> + <li><code>'unsafe-url'</code> significa que el referente incluirá el origen y ruta (sin el fragmento, contraseña o nombre de usuario). Este caso es inseguro porque permite filtrar orígenes y rutas desde recursos protegidos por TLS a orígenes inseguros.</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>Este atributo indica la relación del documento enlazado con el actual. El atributo debe ser una lista de <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipos de enlaces</a> separados por espacio. El uso más común para este atributo es especificar el enlace a una hoja de estilos externa: el atributo <strong>rel</strong> se establece con valor <code>stylesheet</code>, y el atributo <strong>href</strong> se establece con la URL de la hoja de estilos externa para dar formato a la página. WebTV también soporta el uso del valor <code>next</code> en <strong>rel</strong> para precargar la siguiente página en una serie de documentos.</dd> + <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt> + <dd>El valor de este atributo muestra la relación del documento actual al documento enlazado, como se define en el atributo {{htmlattrxref("href", "link")}}. En consecuencia, este atributo define la relación inversa, en comparación al valor del atributo <strong>rel</strong>. Los <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipos de enlace</a> para este atributo son similares a los disponibles para {{htmlattrxref("rel", "link")}}. + <div class="note"><strong>Notas de uso:</strong> Este atributo es obsoleto en HTML5. <strong>No debe usarse</strong>. Para lograr este efecto, use el atributo {{htmlattrxref("rel", "link")}} con el <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipo de enlace</a> contrario, por ejemplo, <span style="font-family: courier new;">made</span> debe reemplazar a <span style="font-family: courier new;">author</span>. Además, este atributo no significa <em>revision</em> y no debe ser usado con un número de versión, que es desafortunadamente el caso de muchos sitios.</div> + </dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd>Este atributo define los tamaños de los íconos para medios visuales contenidos en el recurso. Debe estar presente solo si el atributo {{htmlattrxref("rel","link")}} contiene el <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipo de enlace</a> <span style="font-family: courier new;">icon</span>. Puede tener los siguientes valores: + <ul> + <li><code>any</code>, significa que el ícono puede ser escalado a cualquier tamaño, ya que está en un formato vectorial, como <code>image/svg+xml</code>.</li> + <li>una lista de tamaños separados por espacios en blanco, cada uno en formato <span style="font-family: courier new;"><em><anchura en píxeles></em>x<em><altura en píxeles></em></span> or <span style="font-family: courier new;"><em><anchura en píxeles></em>X<em><altura en píxeles></em></span>. Cada uno de estos tamaños debe estar contenido en el recurso.</li> + </ul> + + <div class="note"><strong>Notas de uso: </strong> + + <ul> + <li>La mayoría de los formatos de ícono solo permiten almacenar un ícono; por lo que la mayoría de las ocasiones, el atributo {{htmlattrxref("sizes")}} contiene solamente una entrada. El formato ICO de Microsoft lo hace, así como el formato ICN de Apple. Siendo ICO más común, es el que se recomienda usar.</li> + <li>iOS de Apple no soporta este atributo, por lo que iPhone y iPad de Apple usan <a href="/es/docs/Web/HTML/Tipos_de_enlaces">tipos de enlaces</a> especiales, no estándares, para definir los íconos a usar como Web Clip o contenedor de inicio: <span style="font-family: courier new;">apple-touch-icon</span> y <span style="font-family: courier new;">apple-touch-startup-icon</span>.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt> + <dd>Define el nombre del frame o ventana que tendrá la relación de enlace o que mostrará la representación de algun recurso enlazado.</dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>El atributo <code>title</code> tiene semántica particular para el elemento <code><link></code>. Cuando se usa en una etiqueta <code><link rel="stylesheet"></code>, define una <a href="/es/docs/Web/CSS/Alternative_style_sheets">hoja de estilos preferida o alternativa</a>. El uso incorrecto de este atributo podría <a href="/es/docs/Correctly_Using_Titles_With_External_Stylesheets">provocar que la hoja de estilos sea ignorada</a>.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Este atributo es usado para definir el tipo de contenido al que se enlaza. El valor del atributo debe ser un tipo MIME, como <strong>text/html</strong>, <strong>text/css</strong>. El uso común de este atributo es para definir el tipo de hoja de estilos enlazada, y el valor más común es <strong>text/css</strong>, el cual indica un formato de Hoja de Estilos en Cascada.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Incluyendo_una_hoja_de_estilos">Incluyendo una hoja de estilos</h3> + +<p>Para incluir una hoja de estilos en una página, use la siguiente sintaxis:</p> + +<pre class="brush: html"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Proporcionando_hojas_de_estilos_alternativas">Proporcionando hojas de estilos alternativas</h3> + +<p>También se pueden especificar <a href="/es/docs/Web/CSS/Alternative_style_sheets">hojas de estilos alternativas</a>.</p> + +<p>El usuario puede elegir cuál hoja de estilos usar, seleccionándola desde el menú Ver > Estilo de Página. Esto proporciona una manera en que los usuarios pueden ver múltiples versiones de una misma página.</p> + +<pre class="brush: html"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="Eventos_de_carga_de_hojas_de_estilos">Eventos de carga de hojas de estilos</h3> + +<p>Se puede determinar cuando una hoja de estilos fue cargada estableciendo la ejecución de un evento <code>load</code> en el elemento; de forma similar, se puede detectar si ocurrió un error al procesar una hoja de estilos, observando el evento <code>error</code>:</p> + +<pre class="brush: html"><script> +function sheetLoaded() { + // Hacer algo interesante; la hoja de estilos ha sido cargada +} + +function sheetError() { + alert("¡Ocurrió un error al cargar la hoja de estilos!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"> +</pre> + +<div class="note"><strong>Nota:</strong> El evento <code>load</code> se dispara una vez que la hoja de estilos y todo su contenido importado ha sido cargado y procesado, e inmediatamente antes de que los estilos sean aplicados al contenido.</div> + +<h2 id="Notas">Notas</h2> + +<ul> + <li>Una etiqueta <code><link></code> puede ocurrir solo en el elemento head; sin embargo, pueden haber múltiples ocurrencias de <code><link></code>.</li> + <li>HTML 3.2 define solamente los atributos <strong>href</strong>, <strong>rel</strong>, <strong>rev</strong>, y <strong>title</strong> para el elemento link.</li> + <li>HTML 2 define los atributos <strong>href</strong>, <strong>methods</strong>, <strong>rel</strong>, <strong>rev</strong>, <strong>title</strong>, y <strong>urn</strong> para el elemento <code><link></code>. Los atributos <strong>methods</strong> y <strong>urn</strong> fueron eliminados más adelante de las especificaciones.</li> + <li>Las especificaciones HTML y XHTML definen controladores de evento para el elemento <code><link></code>, pero no está claro cómo serían usados.</li> + <li>En XHTML 1.0, elementos vacíos como <code><link></code> requieren una diagonal de cierre: <code><link /></code>.</li> +</ul> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '<script>')}}</td> + <td>{{Spec2('Subresource Integrity')}}</td> + <td>Se añade el atributo <code>integrity</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No hay cambios desde la versión anterior</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Se añaden los atributos <code>crossorigin</code> y <code>sizes</code>; valores extendidos para <code>media</code> para cualquier media query; se añaden numerosos valores para <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Hojas de estilos alternativas</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>disabled</code> {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Atributo <code>methods</code> {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Atributo <code>sizes</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} {{bug("441770")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Eventos <code>load</code> y <code>error</code></td> + <td> + <p>19 (Webkit: 535.23)</p> + + <p>({{webkitbug(38995)}})</p> + </td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.60</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>crossorigin</code></td> + <td>{{CompatChrome("25")}}</td> + <td>{{CompatGeckoDesktop("18.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera("15")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>integrity</code></td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Atributo <code>referrerpolicy</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("50.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Hojas de estilos alternativas</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>disabled</code> {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>methods</code> {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>sizes</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} {{bug("441770")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Eventos <code>load</code> y <code>error</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>crossorigin</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("18.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Atributo <code>integrity</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(45.0)}}</td> + </tr> + <tr> + <td>Atributo <code>referrerpolicy</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("50.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<p>[1] {{WebKitBug(148363)}} da seguimiento a la implementación en Webkit de Integridad de Subrecursos (lo cual incluye el atributo <code>integrity</code>).</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="http://pieisgood.org/test/script-link-events/">Tabla de compatibilidad de eventos en <script> y <link>, por Ryan Grove</a></li> +</ul> diff --git a/files/es/web/html/elemento/main/index.html b/files/es/web/html/elemento/main/index.html new file mode 100644 index 0000000000..fd3fd6c917 --- /dev/null +++ b/files/es/web/html/elemento/main/index.html @@ -0,0 +1,151 @@ +--- +title: <main> +slug: Web/HTML/Elemento/main +translation_of: Web/HTML/Element/main +--- +<h2 id="Resumen">Resumen</h2> + +<p>El <strong>elemento</strong> <strong>HTML <code><main></code> </strong>representa el contenido principal del {{HTMLElement("body")}} de un documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación. Este contenido debe ser único al documento, excluyendo cualquier contenido que se repita a través de un conjunto de documentos como barras laterales, enlaces de navegación, información de derechos de autor, logos del sitio y formularios de búsqueda (a menos, claro, que la función principal del documento sea un formulario de búsqueda).</p> + +<div class="note"> +<p><strong>Nota:</strong> <strong>no debe haber</strong> más de un elemento <code><main></code> en un documento, y este <strong>no debe ser</strong> descendiente de un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</p> +</div> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</li> + <li><dfn>Contenido permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li> + <li><dfn>Omisión de etiquetas</dfn> Ninguna; ambas etiqueta inical y de fin son obligatorias.</li> + <li><dfn>Elementos padres permitidos</dfn> Cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>, pero no debe ser un descendiente de un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</li> + <li><dfn>Interfaz DOM</dfn> {{domxref("HTMLElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento solo incluye </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globales.</a></p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><!-- other content --> + +<span class="highlight"><main></span> + <h1>Apples</h1> + <p>The apple is the pomaceous fruit of the apple tree.</p> + + <article> + <h2>Red Delicious</h2> + <p>These bright red apples are the most common found in many + supermarkets.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Granny Smith</h2> + <p>These juicy, green apples make a great filling for + apple pies.</p> + <p>... </p> + <p>... </p> + </article> + +<span class="highlight"></main></span> + +<!-- other content --></pre> + +<h2 id="Specifications" name="Specifications">Sobre Accesibilidad</h2> + +<p>Algunos lectores de pantalla reconocen la etiqueta <code>main</code> y proveen un atajo para que el usuario pueda saltar directamente al contenido de esta etiqueta sin tener que pasar por el resto.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Eliminada la restricción acerca de usar <code><main></code> como un descendente del elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Sin cambios desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores</h2> + +<p>Como una caracterisca nueva propuesta para HTML, el elemento <code><main></code> no está todavía ampliamente soportado. Es sumamente recomendable añadir el rol ARIA <code>"main"</code> a cualquier elemento <code><main></code>:</p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th> + <p>Característica</p> + </th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>Chrome 26</td> + <td>{{ CompatGeckoDesktop("21.0") }}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} but in tests builds since WebKit r140374</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo()}}</td> + <td>{{ CompatGeckoMobile("21.0") }}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Basic structural elements: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li> + <li>Section-related elements: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li> +</ul> diff --git a/files/es/web/html/elemento/map/index.html b/files/es/web/html/elemento/map/index.html new file mode 100644 index 0000000000..1a87193ffc --- /dev/null +++ b/files/es/web/html/elemento/map/index.html @@ -0,0 +1,133 @@ +--- +title: map +slug: Web/HTML/Elemento/map +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/map +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><span class="comment">descripción de uno o dos párrafos</span></p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <map> y </map> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque"> En bloque </a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#especial"> Elemento especial</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque </a>, o elementos <a href="es/HTML/Elemento/area">area</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">Valor</th> + <th>Descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title </code></td> + <td>Texto</td> + <td>Implícito</td> + <td>Título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style </code></td> + <td>Declaraciones de estilo</td> + <td>Implícito</td> + <td>Información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id </code></td> + <td>Un 'nombre'</td> + <td>Implícito</td> + <td>Identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class </code></td> + <td>Lista de clases CSS</td> + <td>implícito</td> + <td>Identificador a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">dir </code></td> + <td>Uno de los siguientes: "ltr" o "rtl"</td> + <td>Implícito</td> + <td>Dirección del texto.</td> + </tr> + <tr> + <td><code style="color: green;">lang </code></td> + <td>Código de idioma</td> + <td>Implícito</td> + <td>Información sobre el idioma.</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td><code style="color: green;">name </code></td> + <td>Un 'nombre'</td> + <td>Necesario</td> + <td>Sirve de referencia al atributo usemap</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">Valor</th> + <th>Descripción</th> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"> <> + + + + </> +</pre> + +<p> </p> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#edef-MAP"><strong>map</strong> en la especificación</a> de html 4.01.</li> +</ul> + +<p><span class="comment">secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==</span></p> + +<div class="note"> +<p>Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en la elaboración de este documento? Para saber como hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p> </p> diff --git a/files/es/web/html/elemento/mark/index.html b/files/es/web/html/elemento/mark/index.html new file mode 100644 index 0000000000..38ed980e3a --- /dev/null +++ b/files/es/web/html/elemento/mark/index.html @@ -0,0 +1,142 @@ +--- +title: '<mark>: el elemento de resaltado de texto' +slug: Web/HTML/Elemento/mark +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - mark + - para_revisar +translation_of: Web/HTML/Element/mark +--- +<div>{{HTMLRef}}</div> + +<p>El <strong> Elemento HTML Mark <code><mark></code></strong> representa un texto <strong>marcado</strong> o <strong>resaltado</strong> como referencia o anotación, debido a su relevancia o importancia en un contexto particular.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Categorías de contenido</th> + <td>Contenido de flujo, contenido de párrafo, contenido palpable</td> + </tr> + <tr> + <th>Contenido permitido</th> + <td><a href="/en/Dom/Content_categories#Phrasing_content" title="en/Dom/Content categories#Phrasing content">Contenido estático</a></td> + </tr> + <tr> + <th>Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th>Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="/en/Dom/Content_categories#Phrasing_content" title="en/Dom/Content categories#Phrasing content">contenido estático</a></td> + </tr> + <tr> + <th>Roles ARIA permitidos</th> + <td>Cualquiera</td> + </tr> + <tr> + <th>Documento normativo</th> + <td><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.whatwg.org%2Fspecs%2Fweb-apps%2Fcurrent-work%2Fmultipage%2Ftext-level-semantics.html%23the-mark-element&sa=D&sntz=1&usg=AFQjCNFWrrJ-Y17m5GxNva7WqE-i6zuWcA" rel="external nofollow">HTML 5, sección 4.6.17</a></td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento no tiene atributos que no sean los <a class="new " href="https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales" rel="internal">atributos globales</a>, comunes a todos los elementos.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<ul> + <li>En una cita ({{HTMLElement("q")}}) o en otro bloque ({{HTMLElement("blockquote")}}), generalmente indica texto que es de especial interés pero que no está destacado en el material de origen, o material que necesita especial escrutinio, aunque el autor original no lo considerase importante.</li> + <li>Por otro lado, <code><mark></code> indica una parte del contenido del documento que probablemente sea relevante para el usuario. Por ejemplo, se puede utilizar en una página que muestra los resultados de búsqueda para resaltar cada uno de estos por palabra.</li> + <li>No uses el elemento <code><mark></code> para resaltado de sintaxis; usa el elemento {{ HTMLElement("span") }} para este fin.</li> +</ul> + +<div class="blockIndicator note"> +<p>No se debe confundir el elemento <code><span style="font-family: Courier New;"><mark></span></code> con el elemento {{ HTMLElement("strong") }}. El elemento {{ HTMLElement("strong") }} se utiliza para denotar intervalos de texto de especial <em>importancia,</em> mientras que el elemento <code><mark></code> se utiliza para denotar intervalos de texto de especial <em>relevancia.</em></p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Marcar_texto_de_interés">Marcar texto de interés</h3> + +<p>En este ejemplo, <mark> se utiliza para resaltar texto en una cita que es de particular insterés para el usuario.</p> + +<pre class="brush: html"><blockquote> + It is a period of civil war. Rebel spaceships, striking from a + hidden base, have won their first victory against the evil + Galactic Empire. During the battle, <mark>Rebel spies managed + to steal secret plans</mark> to the Empire’s ultimate weapon, + the DEATH STAR, an armored space station with enough power to + destroy an entire planet. +</blockquote></pre> + +<p>El resultado sería:</p> + +<p>{{EmbedLiveSample("Marking_text_of_interest", 650, 130)}}</p> + +<h3 id="Identificando_fragmentos_sensibles_al_contexto">Identificando fragmentos sensibles al contexto</h3> + +<p>Este ejemplo demuestra el uso de <code><mark></code> para marcar resultados de búsqueda en el fragmento.</p> + +<pre class="brush: html"><p>It is a dark time for the Rebellion. Although the Death +Star has been destroyed, <mark class="match">Imperial</mark> +troops have driven the Rebel forces from their hidden base and +pursued them across the galaxy.</p> + +<p>Evading the dreaded <mark class="match">Imperial</mark> +Starfleet, a group of freedom fighters led by Luke Skywalker +has established a new secret base on the remote ice world of +Hoth.</p></pre> + +<p>Para ayudar a distinguir el uso de <code><mark></code> en los resultados de búsqueda de otro uso potencial, este ejemplo aplica la clase "match" a cada coincidencia.</p> + +<p>El resultado se vería:</p> + +<p>{{EmbedLiveSample("Identifying_context-sensitive_passages", 650, 130)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + + + +<p>{{Compat("html.elements.mark")}}</p> + +<h2 id="Consulta_también">Consulta también</h2> + +<ul> + <li>Otros <a href="/en/HTML/Text-level_semantics_elements" title="en/HTML/Text-level semantics elements">elementos de la semántica a nivel de texto</a> : {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("cite") }} , {{ HTMLElement("q") }} , {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }} , {{ HTMLElement("code") }} ,{{ HTMLElement("var") }}, {{ HTMLElement("samp") }} ,{{ HTMLElement("kbd") }} ,{{ HTMLElement("sub") }} , {{ HTMLElement("sup") }} ,{{ HTMLElement("i") }} , {{ HTMLElement("b") }}, {{ HTMLElement("mark") }} , {{ HTMLElement("ruby") }} , {{ HTMLElement("rp") }} , {{ HTMLElement("rt") }} , {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }} , {{ HTMLElement("br") }} , {{ HTMLElement("wbr") }}.</li> +</ul> diff --git a/files/es/web/html/elemento/marquee/index.html b/files/es/web/html/elemento/marquee/index.html new file mode 100644 index 0000000000..5eeeec12bf --- /dev/null +++ b/files/es/web/html/elemento/marquee/index.html @@ -0,0 +1,207 @@ +--- +title: <marquee> +slug: Web/HTML/Elemento/marquee +tags: + - Elemento + - HTML + - Referencia + - Web + - etiqueta + - marquee + - marquesina + - obsoleta +translation_of: Web/HTML/Element/marquee +--- +<div>{{HTMLRef}}</div> + +<div>{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La etiqueta html <code><marquee></code> se utiliza para insertar un area de texto en movimiento. También se la conoce como marquesina.</p> + +<h2 id="Atributos">Atributos</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>Establece cómo se desplazará el texto en la etiqueta marquee. Los valores posibles son scroll, slide, y alternate. Si no hay un valor especificado, el valor por defecto establecido es scroll.</dd> + <dd>Scroll: Hara que lo que este en la marquesina se mueva de derecha a izquierda, de manera ininterrumpida.<br> + Slide: Una vez que completa el recorrido de derecha a izquierda(por defecto) se detiene.<br> + Alternate: Se movera de una esquina a la otra, dando el efecto de rebote.</dd> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>Establece el color de fondo, puede utilizarse el nombre, o su valor hexadecimal.</dd> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>Establece la dirección en la que el texto contenido se desplazará. Los valores posibles son left (para moverse hacia la izquierda), right (para moverse a la derecha), up (hacia arriba) y down (hacia abajo). Si no se especifica un valor, por defecto será left.</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>Establece la altura de la etiqueta en pixeles, o en un valor porcentual.</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>Establece el margen horizontal.</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>Establece el número de veces que la marquesina realizará el desplazamiento. Sino se especifica esta propiedad, por defecto es -1, lo que quiere decir que la marquesina se desplazará continuamente.</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>Establece el valor de movimiento para cada intervalo en pixeles. Por defecto su valor es 6.</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd>Establece el intervalo entre cada desplazamiento, en milisegundos. El valor por defecto es 85. Nota: Cualquier valor inferior a 60 será ignorado, (puesto que el valor minimo es 60) y se establecerá 60 en su lugar. Salvo que se especifique<code> truespeed.</code></dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd>Por defecto, si los valores de <code>scrolldelay son inferiores a 60 serán ignorados. Pero si truespeed está presente, esos valores inferiores a 60 serán aceptados.</code></dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>Establece el margen vertical en pixeles o en un valor porcentual.</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>Establece el ancho de la etiqueta en pixeles o un valor porcentual.</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">Controladores de eventos</h2> + +<dl> + <dt>{{htmlattrdef("onbounce")}}</dt> + <dd>Este evento se lanza cuando la marquesina llegó al final del desplazamiento. Ésto solo se activa cuando el atributo <code>behavior </code>está establecido en <code>alternate</code>.</dd> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>Este evento se lanza cuando la marquesina repitió el desplazamiento la cantidad de veces establecidas en el atributo <code>loop</code>. El evento se lanza solo si el atributo <code>loop</code> tiene un valor mayor a 0.</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>Este evento se lanza cuando la marquesina comienza su desplazamiento.</dd> +</dl> + +<h2 id="Methods" name="Methods">Métodos</h2> + +<dl> + <dt>start</dt> + <dd>Comienza el desplazamiento de la marquesina.</dd> + <dt>stop</dt> + <dd>Para el desplazamiento de la marquesina</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><marquee>Este texto se mueve de derecha a izquierda</marquee> + +<marquee direction="up">Este texto se mueve de abajo hacia arriba</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + Este texto rebotará dentro de la marquesina. + </marquee> +</marquee></pre> + +<p>{{EmbedLiveSample("Examples", 600, 450)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '<marquee>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Marcada como obsoleta en favor de CSS. Comportamiento esperado definido por razones de retrocompatibilidad.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '<marquee>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Marcada como obsoleta en favor de CSS. Comportamiento esperado definido por razones de retrocompatibilidad.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatibles">Navegadores compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>2.0</td> + <td>7.2</td> + <td>1.2</td> + </tr> + <tr> + <td><code>atributo truespeed</code> </td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>4.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>atributos hspace/vspace</code> </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>atributo loop</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Atributo truespeed</code> </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Atributo hspace/vspace</code> </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Atributo loop</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/html/elemento/menu/index.html b/files/es/web/html/elemento/menu/index.html new file mode 100644 index 0000000000..887e230f1b --- /dev/null +++ b/files/es/web/html/elemento/menu/index.html @@ -0,0 +1,130 @@ +--- +title: menu +slug: Web/HTML/Elemento/menu +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/menu +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <code style="color: darkblue;">menu</code> (directorio) es un elemento desaprobado. En su origen fue pensado para crear menús, en la actualidad es inutil.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <menu> y </menu> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#desaprobado">Elemento DESAPROBADO</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: uno o más elementos <a href="es/HTML/Elemento/li">li</a></dd> + <dd><strong>NO puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">Elementos en bloque</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genericos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>identificador a nivel de documento, lista de clases separadas por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">de transición</th> + </tr> + <tr> + <td><code style="color: green;">compact</code></td> + <td>compact</td> + <td>implícito</td> + <td>espacio entre objetos reducido</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>El siguiente código:</p> + +<pre class="eval"> <menu> + <li>primer elemento </li> + <li>segundo elemento </li> + <li>tercer elemento </li> + </menu> +</pre> + +<div class="highlight"> +<p>Se visualiza así:</p> + +<ul> + <li>primer elemento</li> + <li>segundo elemento</li> + <li>tercer elemento</li> +</ul> +</div> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p>En el navegador se visualiza (o deberia) igual que una lista desordenada (<a href="es/HTML/Elemento/ul">ul</a>)</p> diff --git a/files/es/web/html/elemento/meta/index.html b/files/es/web/html/elemento/meta/index.html new file mode 100644 index 0000000000..c2fa5ce5a5 --- /dev/null +++ b/files/es/web/html/elemento/meta/index.html @@ -0,0 +1,134 @@ +--- +title: meta +slug: Web/HTML/Elemento/meta +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/meta +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>meta</strong> de "metainformation" - metainformación. Sirve para aportar información sobre el documento..</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><meta></code> (solo tiene una).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#de_cabecera">de cabecera</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: No.</dd> + <dd><strong>Puede contener</strong>: Nada.</dd> + <dd><strong>Puede ser contenido por</strong>: Elementos <a href="es/HTML/Elemento/head">head</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<p><del>Por defecto</del>: Debe indicarlo el autor.</p> + +<p><span class="comment">name = name {{ mediawiki.external('CS') }} Este atributo identifica un nombre de propiedad. Esta especificación no enumera los valores legales para este atributo. content = cdata {{ mediawiki.external('CS') }} Este atributo especifica el valor de una propiedad. Esta especificación no enumera los valores legales para este atributo. scheme = cdata {{ mediawiki.external('CS') }} Este atributo especifica un esquema que se usará para interpretar el valor de la propiedad (véase la sección sobre perfiles para más detalles). http-equiv = name {{ mediawiki.external('CI') }} Este atributo puede utilizarse en lugar del atributo name. Los servidores HTTP utilizan este atributo para obtener información sobre los encabezados del mensaje de respuesta HTTP.</span></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-name-META"><span style="color: green;">name </span></a></td> + <td>Nombre al que se asocia la metainformación</td> + <td>Un 'nombre'. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-content"><span style="color: green;">content </span></a></td> + <td>Los datos que se quieren asociar a <code style="color: green;">name</code>.</td> + <td>Texto. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-http-equiv"><span style="color: green;">http-equiv </span></a></td> + <td>Aporta información sobre los encabezado de respuesta HTTP, puede usarse en lugar de <code style="color: green;">name</code>.</td> + <td>Un 'nombre'. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-scheme"><span style="color: green;">scheme </span></a></td> + <td>Indica un esquema de interpretación para los metadatos.</td> + <td>Texto. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Con_name_y_content" name="Con_name_y_content">Con name y content</h4> + +<pre class="eval"><m<strong>eta</strong> name="copyright" content="© 2006 MDC"> +</pre> + +<h4 id="Con_http-equiv" name="Con_http-equiv">Con http-equiv</h4> + +<pre class="eval"><<strong>meta</strong> http-equiv="Content-Type" content="text/html; charset=UTF-8"> +</pre> + +<p> </p> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#edef-META"><strong>meta</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-meta">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/multicol/index.html b/files/es/web/html/elemento/multicol/index.html new file mode 100644 index 0000000000..e03e9ae580 --- /dev/null +++ b/files/es/web/html/elemento/multicol/index.html @@ -0,0 +1,20 @@ +--- +title: <multicol> +slug: Web/HTML/Elemento/multicol +tags: + - HTML +translation_of: Web/HTML/Element/multicol +--- +<div>{{non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El elemento HTML <code><multicol> </code>fue un elemento experimental diseñado para permitir diseños multi columna . Nunca tuvo una recepción significante y no es implementado en alguno de los principales exploradores .</p> + +<div class="note"> +<p><strong>No usar esto ! </strong>Para implementar un diseño multi columna , debería de usar los elementos HTML regulares como {{HTMLElement("div")}} en conjunto con la característica de CSS <a href="/es/docs/Columnas_con_CSS-3">Column</a> ,</p> +</div> + +<p>Notar que hasta Firefox 22 , aunque no se soportaba , un elemento <code><multicol> </code>fue asociado con un {{domxref("HTMLSpanElement")}}. Después fue arreglado y ahora esta asociado con un {{domxref("HTMLUnknownElement")}} como se solocita en la especificación .</p> + +<p> </p> diff --git a/files/es/web/html/elemento/nav/index.html b/files/es/web/html/elemento/nav/index.html new file mode 100644 index 0000000000..1e88157775 --- /dev/null +++ b/files/es/web/html/elemento/nav/index.html @@ -0,0 +1,108 @@ +--- +title: '<nav>: El elemento de sección de navegación' +slug: Web/HTML/Elemento/nav +tags: + - Elemento + - HTML5 + - menu + - nav + - navegación + - programacion + - sección +translation_of: Web/HTML/Element/nav +--- +<p>{{HTMLRef}}</p> + +<p>El <strong>elemento</strong> <strong>HTML <code><nav></code> </strong>representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o a otros documentos. Ejemplos comunes de secciones de navegación son menús, tablas de contenido e índices.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Content categories</a></th> + <td><a href="/es/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Sectioning_content">sectioning content</a>, palpable content.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padres permitidos</th> + <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>Ninguno</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento sólo incluye <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<ul> + <li>No es necesario que todos los enlaces estén contenidos en un elemento <code><nav></code>. <code><nav></code> está destinado sólo para el bloque principal de enlaces de navegación; por lo general, el elemento {{HTMLElement("footer")}} a menudo tiene una lista de enlaces que no necesitan estar en un elemento {{HTMLElement("nav")}}.</li> + <li>Un documento puede tener varios elementos {{HTMLElement("nav")}}, por ejemplo, uno para la navegación del sitio y otro para la navegación dentro de la página. <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> puede ser utilizado en tal caso para promover la accesibilidad, ver <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Labeling_section_content">ejemplo</a>.</li> + <li>Los agentes de usuario, como los lectores de pantalla dirigidos a usuarios con discapacidades, pueden usar este elemento para determinar si se omite la representación inicial del contenido de solo navegación.</li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>In this example, a <code><nav></code> block is used to contain an unordered list ({{HTMLElement("ul")}}) of links. With appropriate CSS, this can be presented as a sidebar, navigation bar, or drop-down menu.</p> + +<pre class="brush: html"><nav class="menu"> + <ul> + <li><a href="#">Inicio</a></li> + <li><a href="#">Sobre nosotros</a></li> + <li><a href="#">Contacto</a></li> + </ul> +</nav> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambios desde la última instantánea del W3C</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definicion inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.nav")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otros elementos relacionados con la sección: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li> + <li class="last"><a class="deki-ns current" href="/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Secciones y esquema de un documento HTML5 </a>.</li> + <li class="last"><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA: Rol de navegación</a></li> +</ul> diff --git a/files/es/web/html/elemento/nobr/index.html b/files/es/web/html/elemento/nobr/index.html new file mode 100644 index 0000000000..2585c6c084 --- /dev/null +++ b/files/es/web/html/elemento/nobr/index.html @@ -0,0 +1,29 @@ +--- +title: <nobr> +slug: Web/HTML/Elemento/nobr +tags: + - Elemento + - HTML + - No-estándar + - Obsoleto + - Referencia + - Web + - nobr +translation_of: Web/HTML/Element/nobr +--- +<div>{{non-standard_header}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p><span class="seoSummary">El elemento HTML <code><nobr></code> previene que una línea de texto se divida en una nueva línea, así, se presentará en una línea larga por lo que puede ser necesario hacer un desplazamiento de pantalla. Esta etiqueta no es un estándar HTML y no debería ser usada, en su lugar use la propiedad CSS </span>{{Cssxref("white-space")}} como en este ejemplo:</p> + +<pre class="brush:css"><span style="white-space: nowrap">Línea larga sin saltos</span></pre> + +<h2 id="See_also" name="See_also">Vea también</h2> + +<ul> + <li>{{Cssxref("white-space")}}</li> + <li>{{Cssxref("overflow")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/noframes/index.html b/files/es/web/html/elemento/noframes/index.html new file mode 100644 index 0000000000..97f1c8e234 --- /dev/null +++ b/files/es/web/html/elemento/noframes/index.html @@ -0,0 +1,143 @@ +--- +title: noframes +slug: Web/HTML/Elemento/noframes +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/noframes +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>noframes</strong> de -<em>sin marcos</em> . Aporta contenidos alternativos a los marcos. Las aplicaciones de usuario que no soporten <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html">marcos</a>, o que estén configuradas para no mostrarlos, deben mostrar en su lugar el contenido de este elemento.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><noframes></code> y <code></noframes></code> (ambas obligatorias).</dd> + <dd><strong>Está definido como</strong>: En un doctype transicional está definido como elemento <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: en bloque.</dd> + <dd>En un documento transicional <strong>puede contener</strong>: texto y/o cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a> o <a href="es/HTML/Elemento/Tipos_de_elementos#en_l.C3.ADnea">en línea</a>.</dd> + <dd>En un documento de marcos <strong>puede y debe contener</strong>: Un elementos <a href="es/HTML/Elemento/body">body</a> y no puede contener <a href="es/HTML/Elemento/noframes">noframes</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Un_frameset_y_su_alternativa" name="Un_frameset_y_su_alternativa">Un frameset y su alternativa</h4> + +<pre class="eval"><frameset cols="20%, 80%"> + + <frame src="menu.html"> + <frame src="capitulo1.html"> + + <<strong>noframes</strong>> + <p> Esta guia se compone de los siguientes capítulos: </p> + <ul> + <li> <a href="capitulo1.html"> Introducción </a> </li> + <li> <a href="capitulo2.html"> Desarrollo </a> </li> + <li> <a href="capitulo3.html"> Conclusión </a> </li> + </ul> + </<strong>noframes</strong>> + +</frameset> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/frames.html#edef-NOFRAMES"><strong>noframes</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-noframes">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/noscript/index.html b/files/es/web/html/elemento/noscript/index.html new file mode 100644 index 0000000000..c90b056c7b --- /dev/null +++ b/files/es/web/html/elemento/noscript/index.html @@ -0,0 +1,138 @@ +--- +title: noscript +slug: Web/HTML/Elemento/noscript +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/noscript +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>noscript</strong> de -<em>no script</em> . Aporta contenidos alternativos al elemento <a href="es/HTML/Elemento/script">script</a>. las aplicaciones de usuario que no soporten scripts deben mostrar en su lugar el contenido de este elemento.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><noscript></code> y <code></noscript></code> (ambas obligatorias).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: en bloque.</dd> + <dd><strong>Puede (y debe) contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>. + <dl> + <dd>Con un doctype transicional puede contener cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> + </dl> + </dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Un_script_y_su_alternativa" name="Un_script_y_su_alternativa">Un script y su alternativa</h4> + +<pre class="eval"><script type="text/javascript"> + Aquí un script que genera un listado +</script> + +<<strong>noscript</strong>> +<p> Aquí un enlace a un <a href="/datos/listado.html">listado</a> alternativo </p> +</<strong>noscript</strong>> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#edef-NOSCRIPT"><strong>noscript</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-noscript">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/object/index.html b/files/es/web/html/elemento/object/index.html new file mode 100644 index 0000000000..d859ea1b66 --- /dev/null +++ b/files/es/web/html/elemento/object/index.html @@ -0,0 +1,144 @@ +--- +title: <object> +slug: Web/HTML/Elemento/object +tags: + - Contenido incrustado + - Elemento + - HTML + - Referencia + - Web + - incrustar +translation_of: Web/HTML/Element/object +--- +<p>{{HTMLRef}}</p> + +<p>El <strong>elemento HTML <code><object></code> </strong> representa un recurso externo, que puede ser tratado como una imagen, un contexto de navegación anidado, o como un recurso que debe ser manejado por un plugin.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</div> + +<p class="hidden">La fuente original de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíanos un pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>; <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>; <a href="/en-US/docs/Web/HTML/Content_categories#Embedded_content">embedded content</a>, palpable content; if the element has a {{htmlattrxref("usemap","object")}} attribute, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>; <a href="/en-US/docs/Web/HTML/Content_categories#Form_listed">listed</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_submittable">submittable</a> <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">form-associated</a> element.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>cero o más elementos {{HTMLElement("param")}} , luego <a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">transparent</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Padres permitidos</th> + <td>Cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Embedded_content">embedded content</a> (contenido incrustado).</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("image")}}</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLObjectElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("archive")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt> + <dd>Una lista separada por espacios de las URl's de archivos o recursos para el objeto.</dd> + <dt>{{HTMLAttrDef("border")}}{{Deprecated_Inline("HTML4.01")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>El grosor de una línea de margen alrededor del control, en pixeles.</dd> + <dt>{{HTMLAttrDef("classid")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt> + <dd>The URI of the object's implementation. It can be used together with, or in place of, the <strong>data</strong> attribute.</dd> + <dt>{{HTMLAttrDef("codebase")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt> + <dd>The base path used to resolve relative URIs specified by <strong>classid</strong>, <strong>data</strong>, or <strong>archive</strong>. If not specified, the default is the base URI of the current document.</dd> + <dt>{{HTMLAttrDef("codetype")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt> + <dd>The content type of the data specified by <strong>classid</strong>.</dd> + <dt>{{HTMLAttrDef("data")}}</dt> + <dd>La dirección de la fuente, escrita como una URL válida. Al menos uno de los dos atributos, <strong>data</strong> o <strong>type</strong>, deben estar definidos. </dd> + <dt>{{HTMLAttrDef("declare")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt> + <dd>The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent <code><object></code> element. In HTML5, repeat the <object> element completely each that that the resource is reused.</dd> + <dt>{{HTMLAttrDef("form")}}{{HTMLVersionInline(5)}}</dt> + <dd>El elemento form, si es que hay alguno, al que el objeto está asociado (su <em>form propietario</em>). El valor de este atributo debe ser el ID de un elemento {{HTMLElement("form")}} del mismo documento.</dd> + <dt>{{HTMLAttrDef("height")}}</dt> + <dd>La altura del recurso mostrado, en <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. -- (Valores absolutos unicamente. <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">NO percentages</a>)</dd> + <dt>{{HTMLAttrDef("name")}}</dt> + <dd>El nombre de un contexto de navegación válido (HTML5), o el nombre del control (HTML4).</dd> + <dt>{{HTMLAttrDef("standby")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt> + <dd>A message that the browser can show while loading the object's implementation and data.</dd> + <dt>{{HTMLAttrDef("tabindex")}}{{HTMLVersionInline(4)}} only{{Obsolete_Inline("HTML5")}}</dt> + <dd>The position of the element in the tabbing navigation order for the current document.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>El <a href="/en-US/docs/Glossary/Content_type">content type</a> del recurso especificado mediante <strong>data</strong>. Al menos uno de los dos atributos, <strong>data</strong> o <strong>type</strong>, deben estar definidos. </dd> + <dt>{{HTMLAttrDef("typemustmatch")}}{{HTMLVersionInline(5)}}</dt> + <dd>Este valor booleano indica si el atributo <strong>type</strong> y el <a href="/en-US/docs/Glossary/Content_type">content type</a> real del recurso deben coincidir para porder ser usados.</dd> + <dt>{{HTMLAttrDef("usemap")}}</dt> + <dd>Una refercia hash-name a un elemento <span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{HTMLElement("map")}}; es decir un '#' seguido del valor de un {{htmlattrxref("name", "map")}} de un elemento map.</span></dd> + <dt>{{HTMLAttrDef("width")}}</dt> + <dd>El ancho del recurso mostrado, en <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. -- (Valores absolutos unicamente. <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">NO percentages</a>)</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Incrustar_una_película_flash">Incrustar una película flash</h3> + +<pre class="brush: html"><!-- Incrustar una película flash --> +<object data="movie.swf" + type="application/x-shockwave-flash"></object> + +<!-- Incrustar una película flash con parámetros --> +<object data="movie.swf" type="application/x-shockwave-flash"> + <param name="foo" value="bar"> +</object> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "embedded-content.html#the-object-element", "<object>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-object-element", "<object>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/objects.html#h-13.3", "<object>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + + + +<p>{{Compat("html.elements.object")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("applet")}} {{Obsolete_Inline}}</li> + <li>{{HTMLElement("embed")}}</li> + <li>{{HTMLElement("param")}}</li> +</ul> diff --git a/files/es/web/html/elemento/ol/index.html b/files/es/web/html/elemento/ol/index.html new file mode 100644 index 0000000000..f62713c92b --- /dev/null +++ b/files/es/web/html/elemento/ol/index.html @@ -0,0 +1,132 @@ +--- +title: ol +slug: Web/HTML/Elemento/ol +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/ol +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <code style="color: darkblue;">ol</code> permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <ol> y </ol> (ambas obligatorias).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_lista">Elemento de lista</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: uno o más elementos <a href="es/HTML/Elemento/li">li</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th colspan="4">Genericos</th> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td></td> + <td></td> + <td>título del elemento</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td></td> + <td></td> + <td>información de estilo en línea</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td></td> + <td></td> + <td>identificador a nivel de documento</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td></td> + <td></td> + <td>identificador a nivel de documento</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td></td> + <td></td> + <td>dirección del texto</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td></td> + <td></td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">de transición</th> + </tr> + <tr> + <td><code style="color: green;">type</code></td> + <td>(1|a|A|i|I)</td> + <td>implícito</td> + <td>estilo de numeración</td> + </tr> + <tr> + <td><code style="color: green;">compact</code></td> + <td>compact</td> + <td>implícito</td> + <td>espacio entre objetos reducido</td> + </tr> + <tr> + <td><code style="color: green;">start</code></td> + <td>'un número'</td> + <td>implícito</td> + <td>número inicial de la secuencia</td> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>El siguiente código:</p> + +<pre class="eval"><ol> + <li>punto uno</li> + <li>punto dos</li> + <li>punto tres</li> +</ol> +</pre> + +<div class="highlight"> +<p>Se visualiza así:</p> + +<ol> + <li>punto uno</li> + <li>punto dos</li> + <li>punto tres</li> +</ol> +</div> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> diff --git a/files/es/web/html/elemento/option/index.html b/files/es/web/html/elemento/option/index.html new file mode 100644 index 0000000000..3b97475475 --- /dev/null +++ b/files/es/web/html/elemento/option/index.html @@ -0,0 +1,150 @@ +--- +title: <option> +slug: Web/HTML/Elemento/option +tags: + - Elemento + - Formulários HTML + - Referencia + - Web + - formulários + - htmls +translation_of: Web/HTML/Element/option +--- +<div>{{HTMLRef}}</div> + +<p>En un formulario Web , el <strong>elemento</strong> <strong>HTML<em> </em><code><option></code><em> </em></strong>se usa para representar un item dentro de un {{HTMLElement("select")}}, un {{HTMLElement("optgroup")}} o un elemento HTML5 {{HTMLElement("datalist")}} .</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Contenido de las categorías</a></th> + <td>Ninguna</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Texto con, eventualmente, caracteres especiales (como <code>&eacute;</code>).</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>La etiqueta de inicio es obligatoria. La etiqueta de finalización es opcional siempre que el elemento esté inmediatamente seguido por otro elemento<code> <option></code> , por un {{HTMLElement("optgroup")}}, o si el elemento padre tiene no tiene más contenido</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td> {{HTMLElement("select")}}, o {{HTMLElement("optgroup")}} o un elemento {{HTMLElement("datalist")}} element.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLOptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento posee los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>Si está establecido el elemento no se puede seleccionar. A menudo los navegadores ponen en gris el elemento y de esa manera no recibirá ningún evento de navegación como clicks de ratón o eventos relacionados con la obtención del foco. Si este atributo no está definido el elemento puede ser aún deshabilitado si uno de sus ancestros es un elemento {{HTMLElement("optgroup")}} deshabilitado.</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Este atributo es el texto para la etiqueta que determina el significado de la opción. Si el atributo <code><strong>label</strong></code> no está definidio su valor será el texto del contenido del elemento + <div class="note"><em>Nota de Uso: </em>El atributo <strong>label</strong> está diseñado para contener una etiqueta corta que se usará típicamente en un menú jerárquico. El <strong><code>atributo value</code></strong> describe una etiqueta más larga para ser usada, por ejemplo, cerca de un radio button</div> + </dd> + <dt>{{htmlattrdef("selected")}}</dt> + <dd>Si está presente, este atributo booleano indica si esta opción es la inicialmente seleccionada. Si el elemento <code><option> es descendiente de un elemento </code>{{HTMLElement("select")}} cuyo atributo {{htmlattrxref("multiple", "select")}} no esté definidio únicamente un sólo <code><option></code> de este elemento {{HTMLElement("select")}} puede tener este atributo <strong>selected</strong> attribute.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>El contenido de este atributo representa el valor que será enviado al enviar el formulario si una determinada opción está seleccionada. Si se omite el atributo el valor se tomará del texto del contenido del elemento option.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver los ejemplos {{HTMLElement("select")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> + <p>Definición inicial</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko no muestra el valor del atributo label como texto de la opción en caso de que el contenido del elemento esté vacío. Ver {{bug("1205213")}}.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otro elemento relacionados con formularios: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> diff --git a/files/es/web/html/elemento/p/index.html b/files/es/web/html/elemento/p/index.html new file mode 100644 index 0000000000..5e9216b1f5 --- /dev/null +++ b/files/es/web/html/elemento/p/index.html @@ -0,0 +1,131 @@ +--- +title: p +slug: Web/HTML/Elemento/p +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/p +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <a href="es/HTML/Elemento/p">p</a> (párrafo) es el apropiado para distribuir el texto en párrafos.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <p> y </p> (la de cierre es opcional).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_bloque">en bloque</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>lista de clases separadas por espacios</td> + <td>implícito</td> + <td>identificador a nivel de documento</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>uno de los siguientes:"ltr" o "rtl"</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td><code style="color: green;">align</code></td> + <td>uno de los siguientes: "left", "center", "right", o "justify"</td> + <td>implícito</td> + <td>Indica la alineación horizontal con relación al contexto</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre><p> +Esto +es un +párrafo +</p> + +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/text.html#edef-P">En la especificación del estándar</a></li> +</ul> + +<p> </p> + +<div class="note"> +<p>¡Estamos en obras!... disculpen las molestias.<br> + Este documento está siendo editado, posiblemente contenga carencias y defectos.</p> + +<p>¿Quieres participar en la elaboración de este documento? Para más información sobre como ayudar o como empezar a hacerlo, consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p> </p> diff --git a/files/es/web/html/elemento/param/index.html b/files/es/web/html/elemento/param/index.html new file mode 100644 index 0000000000..b9314fa0c1 --- /dev/null +++ b/files/es/web/html/elemento/param/index.html @@ -0,0 +1,131 @@ +--- +title: param +slug: Web/HTML/Elemento/param +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/param +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>param</strong> de "parameter" = parámetro. Permite especificar parámetros de ejecución para un objeto.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><param></code> (solo tiene una).</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: No.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: .</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: Nada. + + <dl> + <dd><strong>Puede ser contenido por</strong>: El elemento <a href="es/HTML/Elemento/object">object</a>, y el desaprobado <a href="es/HTML/Elemento/applet">applet</a>.</dd> + </dl> + </dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="3"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-name-PARAM"><span style="color: green;">name </span></a></td> + <td>Referencia un nombre de parámetro de ejecución conocido por el objeto insertado.</td> + <td>Un nombre de parámetro de ejecución. Puede ser sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> (o no). <s>Por defecto</s>: Debe indicarlo el autor.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-value-PARAM"><span style="color: green;">value </span></a></td> + <td>Especifica un valor para el parámetro referenciado por name</td> + <td>Los valores de este atributo dependen del objeto a insertar</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-valuetype"><span style="color: green;">valuetype </span></a></td> + <td>especifica el tipo de atributo value.</td> + <td>Uno de los siguientes: <code>'data', 'ref' o 'object'</code>. Por defecto: <code>'data'</code>.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#adef-type-PARAM"><span style="color: green;">type </span></a></td> + <td>Si el <code>valuetype</code> es 'ref', <code>type</code> sirve para indicar el tipo MIME del recurso referenciado.</td> + <td>Un tipo MIME. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="bla_bla" name="bla_bla">bla bla</h4> + +<pre class="eval"><span class="nowiki"> + + </span> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/objects.html#h-13.3.2."><strong>param</strong> en la especificación</a> de html 4.01</li> +</ul> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-param">comparativa</a>: IE6 vs IE7 vs FF1.5 vs OP9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/picture/index.html b/files/es/web/html/elemento/picture/index.html new file mode 100644 index 0000000000..99d681da97 --- /dev/null +++ b/files/es/web/html/elemento/picture/index.html @@ -0,0 +1,161 @@ +--- +title: <picture> +slug: Web/HTML/Elemento/picture +tags: + - Elemento + - Fotografía + - Imagen + - graficos +translation_of: Web/HTML/Element/picture +--- +<div>{{HTMLRef}}{{SeeCompatTable}}</div> + +<p>El <strong>elemento HTML <code><picture></code> </strong>es un contenedor usado para especificar múltiples elementos {{HTMLElement("source")}} y un elemento {{HTMLElement("img")}} contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. Si no hay coincidencias con los elementos <code><source></code>, el archivo especificado en los atributos {{htmlattrxref("src", "img")}} del elemento <code><img></code> es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento <code><img></code>.</p> + +<p>Para seleccionar la imagen óptima, el {{Glossary("user agent")}} examina cada atributo {{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, y {{htmlattrxref("type", "source")}} de la fuente para seleccionar la imagen compatible.</p> + +<p>El navegador escogerá la fuente más apropiada de acuerdo al diseño de la página (las limitaciones de la caja donde aparecerá la imagen) y el dispositivo que se utilize para visualizarla (p.ej. pantalla normal o hiDPI).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es-ES/docs/Web/HTML/Content_categories">Categorías de contenido</a></th> + <td><a href="/es-ES/docs/Web/HTML/Content_categories#flow_content">Flujo de contenido</a>, contenido textual o estático, contenido incrustado</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Cero o más elementos {{HTMLElement("source")}}, seguidos por un elemento {{HTMLElement("img")}}, mezclados opcionalmente con elementos script-supporting.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Padres permitidos</th> + <td>Cualquier elemento que permita embeber contenido.</td> + </tr> + <tr> + <th scope="row">ARIA roles permitidos</th> + <td>Ninguno.</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLPictureElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento sólo incluye <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales.</a></p> + + + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p>Se puede usar la propiedad {{cssxref("object-position")}} para ajustar la posición de la imagen dentro del marco del elemento, y la propiedad {{cssxref("object-fit")}} para controlar como el tamaño de la imagen se ajusta para adaptarse al marco.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Estos ejemplos demuestran los efectos que tienen diferentes atributos del atributo {{HTMLElement("source")}} en la selección de la imagen a desplegar cuando se usa dentro de <code><picture></code>.</p> + +<h3 id="El_atributo_media">El atributo <code>media</code></h3> + +<p>El atributo <code>media</code> permite especificar una media query que el agente de usuario evaluará para seleccionar un elemento {{HTMLElement("source")}}. Si la media query evalua a <code>false</code>, el elemento {{HTMLElement("source")}} es omitido.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<h3 id="El_atributo_type">El atributo <code>type</code></h3> + +<p>El atributo <code>type</code> permite especificar un tipo MIME para los recursos dados en el atributo srcset del elemento {{HTMLElement("source")}}. Si el agente de usuario no soporta dicho tipo, el elemento {{HTMLElement("source")}} es omitido.</p> + +<pre class="brush: html"><picture> + <source srcset="mdn-logo.svg" type="image/svg+xml"> + <img src="mdn-logo.png" alt="MDN"> +</picture> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '<picture>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>38</td> + <td>13</td> + <td>{{CompatGeckoDesktop("38")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>38</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("38")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>iOS 9.3</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Elemento {{HTMLElement("img")}}</li> + <li>Elemento {{HTMLElement("source")}}</li> + <li>Posicionando y redimensionando la imagen dentro de su marco: {{cssxref("object-position")}} y {{cssxref("object-fit")}}</li> +</ul> diff --git a/files/es/web/html/elemento/pre/index.html b/files/es/web/html/elemento/pre/index.html new file mode 100644 index 0000000000..2ec0cf56dc --- /dev/null +++ b/files/es/web/html/elemento/pre/index.html @@ -0,0 +1,128 @@ +--- +title: <pre> +slug: Web/HTML/Elemento/pre +translation_of: Web/HTML/Element/pre +--- +<h2 id="Sumario">Sumario</h2> + +<p>El <strong>Elemento</strong> <strong>HTML <pre></strong> (o <em>Texto HTML Preformateado</em>) representa texto preformateado. El texto en este elemento típicamente se muestra en una fuente fija, no proporcional, exactamente como es mostrado en el archivo. Los espacios dentro de este elemento también son mostrados como están escritos.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> {{todo}}<a href="/en-US/docs/HTML/Content_categories#Flowing_content" title="HTML/Content_categories#Phrasing_content">Flow content</a>, palpable content.</li> + <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li> + <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li> + <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#flow_content" title="HTML/Content categories#flow content">flow content</a>.</li> + <li><dfn>DOM interface</dfn> {{domxref("HTMLPreElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento solo incluye los <a href="/en-US/docs/HTML/Global_attributes" title="/en-US/docs/">atributos globales</a>.</span></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><!-- Un poco de codigo CSS --> +<pre> +body{ + color: red; +} +a { + color:green; +} +</pre> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<pre>body{ + color: red; +} +a { + color:green; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Epecificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-pre-element.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'text.html#h-9.3.4', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con exploradores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>CSS: {{ Cssxref('white-space') }}, {{ Cssxref('word-break') }}</li> +</ul> diff --git a/files/es/web/html/elemento/progress/index.html b/files/es/web/html/elemento/progress/index.html new file mode 100644 index 0000000000..581c0da783 --- /dev/null +++ b/files/es/web/html/elemento/progress/index.html @@ -0,0 +1,97 @@ +--- +title: '<progress>: Elemento indicador de progreso' +slug: Web/HTML/Elemento/progress +translation_of: Web/HTML/Element/progress +--- +<div>{{HTMLRef}}</div> + +<p>La etiqueta <strong>HTML<em> </em><code><progress></code></strong> se utiliza para visualizar el progreso de una tarea. Aunque los detalles de como se muestran depende directamente del navegador que utiliza el cliente, aunque básicamente aparece una barra de progreso.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<ul class="htmlelt"> + <li><dfn><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Flujo_de_contenido" title="HTML/Content_categories">Categorias de contenido </a></dfn><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Flujo_de_contenido" title="HTML/Content_categories">Flujo de contenido</a><span>, </span><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_de_redacci%C3%B3n">contenido de redacción</a><span style="font-style: normal; line-height: 1.5em;">, contenido etiquetable, contenido palpable.</span></li> + <li><dfn>Contenido permitido</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenido de redacción</a>, pero no debe haber ningún elemento de progreso entre sus descendientes</li> + <li><dfn>Etiquetas por omisión</dfn> {{no_tag_omission}}</li> + <li><dfn>Elementos padres permitidos</dfn> Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenido de redacción</a>.</li> + <li><dfn>DOM interfaz</dfn> {{domxref("HTMLProgressElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento incluye <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">Atributos Globales</a></span><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{ htmlattrdef("max") }}</dt> + <dd>Este atributo indica la cantidad de trabajo que demorá la carga, se define en el elemento <code>progress</code>. Por ejemplo max="100".</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dt></dt> + <dd><span style="font-weight: normal; line-height: inherit;">Este atributo indica que parte de la tarea ya se ha completado o cargado. Debe especificarse un valor entre 0 y </span><code style="font-size: 14px; line-height: inherit;">max</code><span style="font-weight: normal; line-height: inherit;">, o entre 0 y 1.0 si </span><code style="font-size: 14px; line-height: inherit;">max</code><span style="font-weight: normal; line-height: inherit;"> está omitido. Si al atributo </span><code style="font-size: 14px; line-height: inherit;">value</code><span style="font-weight: normal; line-height: inherit;"> no se le especifica ningún valor, se estara llevando a cabo la tarea sin que el elemento mueste funcionamiento alguno. Por ejemplo si la carga está al 50% será de 0.5 el valor, en el caso de no especificar max. </span></dd> +</dl> + +<p>Puedes usar la propiedad CSS {{ cssxref("orient") }} permite especificar la orientacion de la barra de progreso (horizontal o vertical) con horizontal por defecto. La pseudo-clase {{ cssxref(":indeterminate") }} se puede utiliza para hacer que coincida con las barras de progreso indeterminadas.</p> + +<dl> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html notranslate"><progress value="70" max="100">70 %</progress> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</p> + +<p>En Mac OS X, Se vería como esto:</p> + +<p><img alt="progress-1.png" class="default internal" src="/@api/deki/files/4946/=progress-1.png"></p> + +<p>En Windows, el resultante sería este:</p> + +<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2> + + + +<p>{{Compat("html.elements.progress")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>{{htmlelement("meter")}}</li> + <li>{{ cssxref(":indeterminate") }}</li> + <li>{{ cssxref("-moz-orient") }}</li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> diff --git a/files/es/web/html/elemento/q/index.html b/files/es/web/html/elemento/q/index.html new file mode 100644 index 0000000000..edcc4076e6 --- /dev/null +++ b/files/es/web/html/elemento/q/index.html @@ -0,0 +1,121 @@ +--- +title: '<q>: El elemento de cita en línea' +slug: Web/HTML/Elemento/q +tags: + - Cita de bloque independiente + - Citación + - Elemento + - HTML + - Marca de cita + - Q + - Referencia + - Semántica HTML a nivel de texto + - Web + - cita +translation_of: Web/HTML/Element/q +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">El <strong>elemento HTML <code><q></code></strong> indica que el texto adjunto es una cita corta en línea. La mayoría de los navegadores modernos implementan esto rodeando el texto entre comillas. </span> Este elemento está destinado a citas breves que no requieren saltos de párrafo; para citas de bloque independiente, utiliza el elemento {{HTMLElement("blockquote")}}.</p> + +<div>{{ EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter") }}</div> + +<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">{{web.link("/es/docs/Web/HTML/Content_categories", "Categorías de contenido")}}</th> + <td>{{web.link("/es/docs/Web/HTML/Content_categories#Flow_content", "Flujo de contenido")}}, {{web.link("/es/docs/Web/HTML/Content_categories#Phrasing_content", "redacción de contenido")}}, contenido palpable.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>{{web.link("/es/docs/Web/HTML/Content_categories#Phrasing_content", "Redacción de contenido")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Padres autorizados</th> + <td>Cualquier elemento que acepte {{web.link("/es/docs/Web/HTML/Content_categories#Phrasing_content", "redacción de contenido")}}.</td> + </tr> + <tr> + <th scope="row">Rol de ARIA implícito</th> + <td>{{web.link("https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role", "Rol no correspondiente")}}</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>Algunos</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{DOMxRef("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota de uso</strong>: La mayoría de los navegadores modernos automáticamente agregarán comillas alrededor del texto dentro de un elemento <code><q></code>. Es posible que se necesite una regla de estilo para agregar comillas en navegadores antiguos.</p> +</div> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los {{web.link("/es/docs/Web/HTML/Global_attributes", "atributos globales")}}.</p> + +<dl> + <dt>{{HTMLAttrDef("cite")}}</dt> + <dd>El valor de este atributo es una URL que designa un documento o mensaje fuente para la información citada. Este atributo está destinado a señalar información que explica el contexto o la referencia de la cita.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html notranslate"><p>Conforme al sitio web de Mozilla, + <q + cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 + fue lanzado en 2004 y se convirtió en un gran éxito.</q></p> +</pre> + +<p>{{EmbedLiveSample('Ejemplo')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'semantics.html#the-q-element', '<q>') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'textlevel-semantics.html#the-q-element', '<q>') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>') }}</td> + <td>{{ Spec2('HTML4.01') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{ Compat("html.elements.q") }}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>El elemento {{HTMLElement("blockquote")}} para citas de bloque independiente.</li> + <li>El elemento {{HTMLElement("cite")}} para citas de fuentes.</li> +</ul> diff --git a/files/es/web/html/elemento/s/index.html b/files/es/web/html/elemento/s/index.html new file mode 100644 index 0000000000..e515a0257f --- /dev/null +++ b/files/es/web/html/elemento/s/index.html @@ -0,0 +1,114 @@ +--- +title: s +slug: Web/HTML/Elemento/s +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/s +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Muestra el texto tachado con una linea horizontal.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <s> y </s> (Ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>:<a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">Elemento de estilo de fuente</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + <tr> + <th colspan="4">Genéricos</th> + </tr> + <tr> + <td><code style="color: green;">title</code></td> + <td>texto</td> + <td>implícito</td> + <td>título consultivo del elemento.</td> + </tr> + <tr> + <td><code style="color: green;">style</code></td> + <td>reglas de estilo</td> + <td>implícito</td> + <td>información de estilo en línea.</td> + </tr> + <tr> + <td><code style="color: green;">id</code></td> + <td>ID</td> + <td>implícito</td> + <td>identificador único a nivel de documento.</td> + </tr> + <tr> + <td><code style="color: green;">class</code></td> + <td>CDATA</td> + <td>implícito</td> + <td>identificador a nivel de documento, lista de clases separadas por espacios.</td> + </tr> + <tr> + <td><code style="color: green;">dir</code></td> + <td>(ltr|rtl)</td> + <td>implícito</td> + <td>dirección del texto débil/neutral</td> + </tr> + <tr> + <td><code style="color: green;">lang</code></td> + <td>código de idioma</td> + <td>implícito</td> + <td>información sobre el idioma</td> + </tr> + <tr> + <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</code></td> + </tr> + <tr> + <th colspan="4">Específicos</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th colspan="4">De transición</th> + </tr> + <tr> + <td colspan="4">No tiene</td> + </tr> + <tr> + <th>Atributo</th> + <th colspan="2">valor</th> + <th>descripción</th> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"> <p> + Texto normal y... <s>Texto tachado</s> + </p> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<div class="warning">DESAPROBADO</div> diff --git a/files/es/web/html/elemento/samp/index.html b/files/es/web/html/elemento/samp/index.html new file mode 100644 index 0000000000..2957372979 --- /dev/null +++ b/files/es/web/html/elemento/samp/index.html @@ -0,0 +1,63 @@ +--- +title: samp +slug: Web/HTML/Elemento/samp +tags: + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/samp +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">El elemento HTML Sample (<strong><code><samp></code></strong>) se utiliza para incluir texto en línea que representa una muestra (o cita) de la salida de un programa de ordenador. El contenido de esta etiqueta es renderizado generalmente usando la tipografía monoespaciada por defecto del navegador.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Señala lo que es una salida de un programa.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <samp> y </samp> (ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5> + +<ul> + <li>title (título del elemento)</li> + <li>style (información de estilo en línea)</li> +</ul> + +<dl> + <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd> + <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd> + <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd> +</dl> + +<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene." name="Atributos_Espec.C3.ADficos_-_No_tiene.">Atributos Específicos - No tiene.</h5> + +<h5 id="Atributos_Transicionales_-_No_tiene." name="Atributos_Transicionales_-_No_tiene.">Atributos Transicionales - No tiene.</h5> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"><p> +... entonces aparecerá una ventana con el mensaje: <samp>Hola mundo</samp> +</p> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> diff --git a/files/es/web/html/elemento/script/index.html b/files/es/web/html/elemento/script/index.html new file mode 100644 index 0000000000..d1b744f192 --- /dev/null +++ b/files/es/web/html/elemento/script/index.html @@ -0,0 +1,255 @@ +--- +title: <script> +slug: Web/HTML/Elemento/script +tags: + - Elemento + - HTML + - HTML scripting + - Referencia + - Scripting + - Web + - etiqueta +translation_of: Web/SVG/Element/script +--- +<h2 id="Resumen">Resumen</h2> + +<p>El <em>elemento HTML Script</em> (<strong><code><script></code></strong>) se utiliza para insertar o hacer referencia a un script ejecutable dentro de un documento HTML o XHTML.</p> + +<p>Los scripts sin atributo <code>async</code> o <code>defer</code>, así como las secuencias de comandos en línea, son interpretados y ejecutados inmediatamente, antes de que el navegador continúe procesando la página.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Script dinámico tal como <code>text/javascript</code>.</td> + </tr> + <tr> + <th scope="row">Omision de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">metadata content</a>, o cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento contiene los <a href="es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt> + <dd>Establece este atributo booleano para indicar al navegador, si es posible, ejecutar el código asincrónicamente. Esto no afecta a los scripts escritos dentro de la etiqueta (es decir a aquellos que no tienen el atributo <strong>src</strong>).</dd> + <dd>Ver {{anch("Browser compatibility")}} para notas acerca de compatibilidad. Ver tambien <a href="/en-US/docs/Games/Techniques/Async_scripts">Scripts asincrónicos para asm.js</a>.</dd> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>Contiene información de metadatos que es usada por el user agent del navegador para verificar el recurso captado fue entregado libre de manipulación inesperada. Ver <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Este atributo especifica la URI del script externo; este puede ser usado como alternativa a scripts embebidos directamente en el documento. Si el script tiene el atributo src, no debería tener código dentro de la etiqueta.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>Este atributo identifica el lenguaje de scripting en que está escrito el código embebido dentro de la etiqueta script, o referenciada utilizando el atributo src. Los valores posibles están especificados como un MIME type (tipo MIME). <br> + Algunos ejemplos de tipos MIME que pueden ser utilizados son: <code>text/javascript</code>, <code>text/ecmascript</code>, <code>application/javascript</code>, y <code>application/ecmascript. </code>Si el atributo se encuentra ausente, el valor por defecto será un script JavaScript.</dd> + <dd>Si el tipo MIME especificado no es un tipo JavaScript, el contenido embebido dentro de la etiqueta script es tratado como un bloque de datos que no será procesado por el navegador.</dd> + <dd>Si el tipo especificado es module, el código es tratado como un módulo JavaScript {{experimental_inline}}. Ver <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>.</dd> + <dd>Nota: en Firefox puedes usar características avanzadas tales como let statements y otras características de la última versión de JS, usando type=application/javascript;version=1.8 {{Non-standard_inline}}. Ten cuidado!, esto no es una característica estándar, es decir, probablemente genere conflictos con otros navegadores, en particular aquellos basados en Chromium.</dd> + <dd>Para incluir lenguajes de programación exóticos, lee acerca de <a href="/en-US/Add-ons/Code_snippets/Rosetta">Rosetta</a>.</dd> + <dt>{{htmlattrdef("text")}}</dt> + <dd>Este atributo actúa como el atributo <code>textContent</code>, establece el texto contenido del elemento. Pero a diferencia de <code>textContent</code>, este atributo se evalúa como ejecutable luego de ser insertado como nodo en el DOM.</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd>Este atributo actúa como el atributo <code>type</code>, identifica el tipo de lenguaje que se utiliza. A diferencia del atributo <code>type</code>, los posibles valores de este atributo nunca fueron estandarizados. El atributo <code>type</code> debe ser utilizado en lugar de <code>language</code>.</dd> + <dt>{{htmlattrdef("defer")}}</dt> + <dd>Este atributo establece si el script debe ser ejecutado luego de que el documento entero sea analizado. Dado que esta función aún no fue implementada por todos los navegadores relevantes, los autores no deberían asumir que el script realmente será ejecutado luego de la carga y analisis del documento. Desde Gecko 1.9.2 el atributo defer es ignorado en los scripts que no tienen el atributo src. Sin embargo, en Gecko 1.9.1 incluso se difieren los scripts escritos dentro de la etiqueta.</dd> + <dt>{{htmlattrdef("crossorigin")}} {{Non-standard_inline}}</dt> + <dd>Elementos normales script pasan información mínima al {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} para scripts que no pasan las revisiones del estándar <a href="/es/docs/Web/HTTP/Access_control_CORS">CORS</a>. Para permitir registrar errores en los sitios que usan dominios separados para recursos estáticos, usar este atributo.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><!-- HTML4 y (x)HTML --> +<script type="text/javascript" src="javascript.js"></script> + +<!-- HTML5 --> +<script src="javascript.js"></script> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Agrega el tipo module.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '<script>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '<script>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '<script>')}}</td> + <td>{{Spec2('Subresource Integrity')}}</td> + <td>Agrega el atributo integrity.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>async attribute</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td> + <td>10<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>defer attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td> + <p>4[3]<br> + 10</p> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>crossorigin attribute</td> + <td>{{CompatChrome(30.0)}}</td> + <td>{{CompatGeckoDesktop("13")}}</td> + <td>{{CompatNo}}</td> + <td>12.50</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>integrity attribute</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatGeckoDesktop("43")}}</td> + <td> </td> + <td> </td> + <td>{{CompatNo}}<sup>[5]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>async attribute</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>defer attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>integrity attribute</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatGeckoDesktop("43")}}</td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(45.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox. In Firefox 4.0, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behavior matches the behavior of IE and WebKit. To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4.0), set <code>.async=false</code> on the scripts you want to maintain order. Never call <code>document.write()</code> from an <code>async</code> script. In Gecko 1.9.2, calling <code>document.write()</code> has an unpredictable effect. In Gecko 2.0, calling <code>document.write()</code> from an <code>async</code> script has no effect (other than printing a warning to the error console).</p> + +<p>[2] Starting in Gecko 2.0 {{geckoRelease("2.0")}}, inserting script elements that have been created by calling <code>document.createElement("script")</code> into the DOM no longer enforces execution in insertion order. This change lets Gecko properly abide by the HTML5 specification. To make script-inserted external scripts execute in their insertion order, set <code>.async=false</code> on them.</p> + +<p>Also, {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}} and {{HTMLElement("noframes")}} elements are now executed, for the same reasons.</p> + +<p>[3] In versions prior to Internet Explorer 10 Trident implemented <code><script></code> by a proprietary specification. Since version 10 it conforms to the W3C specification.</p> + +<p>[4] The <code>crossorigin</code> attribute was implemented in WebKit in {{WebKitBug(81438)}}.</p> + +<p>[5] {{WebKitBug(148363)}} tracks WebKit implementation of Subresource Integrity (which includes the <code>integrity</code> attribute).</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/section/index.html b/files/es/web/html/elemento/section/index.html new file mode 100644 index 0000000000..3a68adbae3 --- /dev/null +++ b/files/es/web/html/elemento/section/index.html @@ -0,0 +1,143 @@ +--- +title: section +slug: Web/HTML/Elemento/section +translation_of: Web/HTML/Element/section +--- +<h2 id="Resumen">Resumen</h2> + +<p>El elemento de <em>HTML section</em> (<code><section></code>) representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema. Piensa en el esquema como en el índice de contenido de un libro; un tema común y subsecciones relacionadas. Es, por lo tanto, una etiquéta semántica. Su funcionalidad principal es estructurar semánticamente un documento a la hora de ser representado por parte de un agente usuario. Por ejemplo, un agente de usuario que represente el documento en voz, podría exponer al usuario el índice de contenido por niveles para navegar rápidamente por las distintas partes.</p> + +<div class="note"> +<p><em>Notas de uso:</em></p> + +<ul> + <li>Si la intención es indicar el contenido de un elemento {{HTMLElement("section")}} , es mejor usar el elemento {{HTMLElement("article")}} en su lugar, a modo de artículos independientes como en las revistas. {{HTMLElement("section")}} está diseñado para contenidos dependientes, pero diferenciados.</li> + <li>No se debe usar el elemento {{HTMLElement("section")}} como un mero contenedor genérico; para esto ya existe {{HTMLElement("div")}}, especialmente si el objetivo solamente es aplicar un estilo (CSS) a la sección. Como regla general, el título de una sección debería aparecer en el esquema del documento.</li> +</ul> +</div> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Contenido permitido</td> + <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content Categories#Flow content">Contenido dinámico</a></td> + </tr> + <tr> + <td>Omisión de etiquetas</td> + <td>Ninguna, tanto la etiqueta de apertura como la de cierre son obligatorias.</td> + </tr> + <tr> + <td>Elementos padres permitidos</td> + <td> + <p>Todo elemento que acepte <a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content Categories#Flow content">contenido dinámico</a>. Nótese que un elemento {{ HTMLElement("section") }} no debe ser descendiente de un elemento {{ HTMLElement("address") }}.</p> + </td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element">HTML5, sección 4.4.2</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento carece de otros atributos fuera de los <a href="/en/HTML/Global_attributes" rel="internal">atributos globales</a>, que son comunes a todos los elementos.</p> + +<h2 id="Interfaz_del_DOM">Interfaz del DOM</h2> + +<p>Este elemento implementa la interfaz <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p> + +<h2 id="Ejemplo_1">Ejemplo 1</h2> + +<h3 id="Antes_de_HTML5">Antes de HTML5</h3> + +<pre class="line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">>Encabezado</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span></code>Un montón de contenido impresionante.<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="con_HTML5">con HTML5</h3> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>section</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span></code><code>Encabezado</code><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span></code>Un montón de contenido impresionante.<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>section</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Ejemplo_2">Ejemplo 2</h2> + +<h3 id="Antes_de_HTML5_2">Antes de HTML5</h3> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">>Encabezado</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"roble</span>.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"un roble</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="con_HTML5_2">con HTML5</h3> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>section</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Encabezado<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"roble</span>.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"un roble</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>section</span><span class="punctuation token">></span></span></code></pre> + + + +<h2 id="Compatibilidad">Compatibilidad</h2> + + + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>5</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0</td> + <td>11.10</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Móvil (Gecko)</th> + <th>IE Móvil</th> + <th>Opera Móvil</th> + <th>Safari Móvil</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.2</td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0 (iOS 4.2)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>Otros elementos relacionados: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};</li> + <li class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Secciones y esquemas de un documento en HTML5</a>.</li> +</ul> diff --git a/files/es/web/html/elemento/select/index.html b/files/es/web/html/elemento/select/index.html new file mode 100644 index 0000000000..edaf0488ab --- /dev/null +++ b/files/es/web/html/elemento/select/index.html @@ -0,0 +1,198 @@ +--- +title: <select> +slug: Web/HTML/Elemento/select +tags: + - Elemento + - Formulario(2) + - HTML + - Referencia + - Web + - formularios html(2) +translation_of: Web/HTML/Element/select +--- +<h2 id="Resumen">Resumen</h2> + +<p>El elemento select (<code><select></code>) de HTML representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos {{HTMLElement("option")}}, los cuales pueden ser agrupados por elementos {{HTMLElement("optgroup")}}. La opcion puede estar preseleccionada por el usuario.</p> + +<h2 id="Contenido">Contenido</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td> + <td>Elementos <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">interactive content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable" title="HTML/Content categories#Form resettable">resettable</a>, y <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a>.</td> + </tr> + <tr> + <td>Contenido permitido</td> + <td>Uno o mas elementos {{HTMLElement("option")}} o {{HTMLElement("optgroup")}}.</td> + </tr> + <tr> + <td>Omisión de etiquetas</td> + <td>Ninguna, ambas etiquetas son obligatorias</td> + </tr> + <tr> + <td>Elementos padre permitidos</td> + <td>Cualquier elemento que permita phrasing content.</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento incluye </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo permite especificar un formulario de control que debería tener enfoque de entrada cuando se carga la página, a no ser que el usuario lo sobreescriba, por ejemplo, escribiendo un control diferente. Solo un elemento formulario puede tener el elemento de enfoque de entrada por documento, por lo cual es un atributo booleano.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>El atributo booleano especifica que el usuario no puede interactuar con el control. Si este atributo no está especificado, el control hereda los ajustes del campo que lo contiene, por ejemplo del fielset; si no hay elemento contenido con el atributo disabled, entonces el control se considera enable (activado).</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>El elemento formulario al cual el select está asociado (su propietario del formulario). Si este atributo está especificado, su valor deberá ser el ID de un formulario en el mismo documento. Esto te permite situar elementos en cualquier parte del documento, no solo de manera descendiente con respecto a su elemento formulario.</dd> + <dt>{{htmlattrdef("multiple")}}</dt> + <dd>Este elemento booleano indica que se pueden seleccionar múltiples opciones de la lista. Si no está especificado, solo se podrá seleccionar una opción cada vez.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>El nombre del elemento de control.</dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>Es un elemento boooleano que indica si la opcion puede quedar sin seleccionar o si es requerida.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Si el control se presenta como una lista con scroll en caja, este atributo representa el numero de filas que la list tendrá visible la primera vez. Los navegadores no están requeridos a presentar un elemento select como una lista con escroll en caja. El valor por defecto es cero.</dd> +</dl> + +<div class="note"><strong>Nota de Firefox: </strong>De acuerdo con las especificaciones de HTML5, el tamaño por defecto debe ser 1; sin embargo, en la práctica, esto hace que se rompan algunas páginas webs, y ningun otro navegador actualmente hace esto, así que Mozilla ha optado por continuar usando 0 desde que empezó con Firefox.</div> + +<dl> +</dl> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Este elemento implementa la interfaz <code><a href="/en-US/docs/DOM/HTMLSelectElement" title="DOM/select">HTMLSelectElement</a>.</code></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><!-- The second value will be selected initially --> +<select name="select"> + <option value="value1">Value 1</option> + <option value="value2" selected>Value 2</option> + <option value="value3">Value 3</option> +</select> +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p><select name="select"><option value="value1">Value 1</option><option selected value="value2">Value 2</option><option value="value3">Value 3</option></select></p> + +<h3 id="Notas">Notas</h3> + +<p>El contenido de este elemento es estático y no <a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content_Editable">editable</a>.</p> + +<p>El siguiente ejemplo muestra como simular una lista con opciones editables, pero ten cuidado ya que algunos lectores de pantallas y dispositivos de ayuda no lo interpretarán de forma correcta; este ejemplo sería html inválido si usas los elementos correctos:</p> + +<p><a href="/files/4563/editable_select.html" style="line-height: 1.5;" title="Simulating an editable select through a fieldset of radioboxes and textboxes">This is an example</a> de un select editable mediante un<span style="line-height: 1.5;"> {{HTMLElement("fieldset")}} de </span><a href="/en-US/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">radioboxes</a><span style="line-height: 1.5;"> y </span><a href="/en-US/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">textboxes</a><span style="line-height: 1.5;"> (<strong>escrito en CSS puro</strong></span><span style="line-height: 1.5;">, sin JavaScript), </span></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>required</code> attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatGeckoMobile("1.0")}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>required</code> attribute</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p>[1] En la aplicación navegador para Android 4.1 (y posiblemente en versiones posteriores), hay un error cuando el menu triangulo indicador al lado de un elemento {{HTMLElement("select")}} no se muestra si {{ cssxref("background") }}, {{ cssxref("border") }}, o {{ cssxref("border-radius") }} estilos están aplicados al {{HTMLElement("select")}}.</p> + +<p>[2] Firefox para Android, por defecto, establece un {{ cssxref("background-image") }} gradiente en todos los elementos <code><select multiple></code>. Esto puede desactivarse usando <code>background-image: none</code>.</p> + +<p>[3] Históricamente, Firefox ha permitido eventos de teclado y ratón para mostrar desde el elemento <code><option> al elemento padre </code>{{HTMLElement("select")}}. Esto no ocurre en Chrome, sin embargo, aunque este comportamiento sigue apareciendo de manera incosciente en muchos navegadores. Para una mayor compatibilidad Web (y por razones técnicas), cuando Firefox está en modo multitarea el elemento <code><select></code> se muestra como una lista descendente. Este comportamiento se produce sin cambios si <code><select></code>se presenta como elemento en línea y tiene multipleas atributos definidos o tiene un atributo de tamaño cuyo valor sea mayor que uno. Mejor que ver el elemento <code><option></code> para eventos, debería mirar el elemento de enventos {event("change")}} en {{HTMLElement("select")}}. Ver {{bug(1090602)}} para detalles.</p> + +<p>Tanto Chrome como Safari ignoran {{cssxref("border-radius")}} en los elementos {{HTMLElement("select")}} a no ser que {{cssxref("-webkit-appearance")}} esté invalidado a un valor apropiado.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otros elementos relacionados de formularios: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/shadow/index.html b/files/es/web/html/elemento/shadow/index.html new file mode 100644 index 0000000000..bd3cc37616 --- /dev/null +++ b/files/es/web/html/elemento/shadow/index.html @@ -0,0 +1,152 @@ +--- +title: <shadow> +slug: Web/HTML/Elemento/Shadow +translation_of: Web/HTML/Element/shadow +--- +<p>{{obsolete_header}}</p> + +<p><span class="seoSummary">El <strong>HTML <code><shadow></code> element</strong>—es una parte absoluta de la suite tecnológica de <a href="/en-US/docs/Web/Web_Components">Web Components</a> —estaba destinado a ser utilizado como un shadow DOM {{glossary("insertion point")}}. Es posible que lo hayas usado si has creado varias root shadow bajo un shadow host. No es útil en HTML ordinario.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>Any element that accepts flow content.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLShadowElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes">Attributes</h2> + +<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> + +<h2 id="Example">Example</h2> + +<p>Aquí está un ejemplo simple usando el <code><shadow></code> element. Es un archivo HTML con todo lo necesario en él.</p> + +<div class="note"> +<p><strong>Note:</strong> This is an experimental technology. For this code to work, the browser you display it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + + <!-- This <div> will hold the shadow roots. --> + <div> + <!-- This heading will not be displayed --> + <h4>My Original Heading</h4> + </div> + + <script> + // Get the <div> above with its content + var origContent = document.querySelector('div'); + // Create the first shadow root + var shadowroot1 = origContent.createShadowRoot(); + // Create the second shadow root + var shadowroot2 = origContent.createShadowRoot(); + + // Insert something into the older shadow root + shadowroot1.innerHTML = + '<p>Older shadow root inserted by + &lt;shadow&gt;</p>'; + // Insert into younger shadow root, including <shadow>. + // The previous markup will not be displayed unless + // <shadow> is used below. + shadowroot2.innerHTML = + '<shadow></shadow> <p>Younger shadow + root, displayed because it is the youngest.</p>'; + </script> + + </body> +</html> +</pre> + +<p>If you display this in a web browser it should look like the following.</p> + +<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p> + +<h2 id="Specifications">Specifications</h2> + +<p>This element is no longer defined by any specifications.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>35</td> + <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] If Shadow DOM is not enabled in Firefox, <code><shadow></code> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 33 and is behind a preference, <code>dom.webcomponents.enabled</code>, which is disabled by default.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li> + <li>{{HTMLElement("content")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/slot/index.html b/files/es/web/html/elemento/slot/index.html new file mode 100644 index 0000000000..b7a7407d83 --- /dev/null +++ b/files/es/web/html/elemento/slot/index.html @@ -0,0 +1,126 @@ +--- +title: <slot> +slug: Web/HTML/Elemento/slot +tags: + - Componentes Web + - Componentes Web HTML + - Elemento + - HTML + - Referencia + - slot + - sombra dom +translation_of: Web/HTML/Element/slot +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>El elemento HTML <code><slot></code> </strong>—parte de la suite tecnologica <a href="/en-US/docs/Web/Web_Components">Web Components</a> — es un placeholder en un componente que tu puedes llenar con tu propio marcado, que te permite crear árboles DOM por separado y presentarlos juntos. </span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de contenido</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">contenido de fraseo</a></td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">Transparente</a></td> + </tr> + <tr> + <th scope="row">Eventos</th> + <td>{{event("slotchange")}}</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parentes permitidos</th> + <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a></td> + </tr> + <tr> + <th scope="row">Rol ARIA implícito</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Roles ARIA Permitidos</th> + <td>No se permite <code>role</code></td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLSlotElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p> + +<dl> + <dt> {{htmlattrdef("name")}}</dt> + <dd>El nombre del slot.</dd> + <dd><dfn>Un<strong> </strong></dfn><strong><dfn>slot nombrado</dfn></strong> es un elemento <code><slot></code> con el atributo <code>name</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><template id="element-details-template"> + <style> + details {font-family: "Open Sans Light",Helvetica,Arial} + .name {font-weight: bold; color: #217ac0; font-size: 120%} + h4 { margin: 10px 0 -8px 0; } + h4 span { background: #217ac0; padding: 2px 6px 2px 6px } + h4 span { border: 1px solid #cee9f9; border-radius: 4px } + h4 span { color: white } + .attributes { margin-left: 22px; font-size: 90% } + .attributes p { margin-left: 16px; font-style: italic } + </style> + <details> + <summary> + <span> + <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code> + <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> + </span> + </summary> + <div class="attributes"> + <h4><span>Attributes</span></h4> + <slot name="attributes"><p>None</p></slot> + </div> + </details> + <hr> +</template></pre> + +<div class="note"> +<p><strong>Nota</strong>: Puedes ver este ejemplo en accion en <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a> (velo <a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">running live</a>). Además, puedes encontrar una explicación en <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>.</p> +</div> + +<ul> +</ul> + +<h2 id="Especificaciónes">Especificaciónes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','<slot>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + + + +<p>{{Compat("html.elements.slot")}}</p> diff --git a/files/es/web/html/elemento/small/index.html b/files/es/web/html/elemento/small/index.html new file mode 100644 index 0000000000..21f0cb4331 --- /dev/null +++ b/files/es/web/html/elemento/small/index.html @@ -0,0 +1,20 @@ +--- +title: small +slug: Web/HTML/Elemento/small +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/small +--- +<p>El <strong>elemento HTML <small></strong> hace el tamaño del texto una talla más pequeña (por ejemplo, de largo a mediano, o de pequeño a extra pequeño) que el tamaño mínimo de fuente del navegador. En HTML5, este elemento es reutilizado para representar comentarios laterales y letra pequeña, incluyendo derechos de autor y texto legal, independientemente de su estilo de presentación.</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> diff --git a/files/es/web/html/elemento/source/index.html b/files/es/web/html/elemento/source/index.html new file mode 100644 index 0000000000..c116ef3464 --- /dev/null +++ b/files/es/web/html/elemento/source/index.html @@ -0,0 +1,129 @@ +--- +title: <source> +slug: Web/HTML/Elemento/source +tags: + - Elemento + - HTML + - Media + - Referencia + - Web +translation_of: Web/HTML/Element/source +--- +<p>El <strong>elemento HTML <code><source></code> </strong> especifica recursos de medios múltiples para los elementos {{HTMLElement("picture")}}, {{HTMLElement("audio")}}, o {{HTMLElement("video")}}. Es un elemento vacío. Normalmente se utiliza para servir el mismo contenido multimedia en <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">varios formatos soportados por diferentes navegadores</a>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div> + +<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíenos una solicitud de pull.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías de contenido</a></th> + <td>Ninguna.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno, esto es un {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de Etiqueta</th> + <td>Debe tener una etiqueta inicial, pero no debe tener una etiqueta final.</td> + </tr> + <tr> + <th scope="row"><dfn>Padres permitidos</dfn></th> + <td> + <div>Un elemento multimedia—{{HTMLElement("audio")}} o {{HTMLelement("video")}}—y se debe colocar antes que cualquier <a href="/en-US/docs/HTML/Content_categories#Flow_content">contenido de flujo</a> o elemento {{HTMLElement("track")}}.</div> + + <div>Un elemento {{HTMLElement("picture")}}, y se debe colocar antes del elemento {{HTMLElement("img")}}.</div> + </td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>Ninguno</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <th> </th> + <td>{{domxref("HTMLSourceElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("sizes")}} {{experimental_inline}}</dt> + <dd>Es una lista de tamaños del origen que describe el ancho renderizado final de la imagen representada por el origen. Cada tamaño de origen consiste de una lista separada por comas de pares de longitud de condición de medios. Esta información es utilizada por el navegador para determinar, antes de distribuir la página, qué imagen definida en {{htmlattrxref("srcset", "source")}} se utilizará.<br> + El atributo <code>sizes</code> tiene un efecto solo cuando el elemento {{HTMLElement("source")}} es hijo directo de un elemento {{HTMLElement("picture")}}.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Es la ubicación del recurso multimedia, requerido por los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}}. El valor de este atributo es ignorado cuando el elemento <code><source></code> se coloca dentro de un elemento {{HTMLElement("picture")}}.</dd> + <dt>{{htmlattrdef("srcset")}} {{experimental_inline}}</dt> + <dd>Una lista de una o más cadenas separadas por comas que indican un conjunto de posibles imágenes representadas por la fuente para que las utilice el navegador. Cada cadena se compone de: + <ol> + <li>una URL a una imagen,</li> + <li>un descriptor de ancho, que es un entero positivo seguido directamente por <code>'w'</code>. El valor predeterminado, si falta, es el infinito.</li> + <li>un descriptor de densidad de píxeles, que es un número flotante positivo seguido directamente por <code>'x'</code>. El valor predeterminado, si falta, es <code>1x</code>.</li> + </ol> + + <p>Cada cadena en la lista debe tener al menos un descriptor de ancho o un descriptor de densidad de píxeles para que sea válido. Entre los elementos de la lista, solo debe haber una cadena que contenga la misma tupla de descriptor de ancho y descriptor de densidad de píxeles.<br> + El navegador elige la imagen más adecuada para mostrar en un momento determinado.<br> + El atributo <code>srcset</code> solo tiene efecto cuando el elemento {{HTMLElement("source")}} es hijo directo de un elemento {{HTMLElement("picture")}}.</p> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>El tipo MIME del recurso, opcionalmente con un parámetro <code>codecs</code>. Consultar <a class="external" href="https://tools.ietf.org/html/rfc4281"> RFC 4281 </a> para obtener información sobre cómo especificar los códecs.</dd> + <dt>{{htmlattrdef("media")}} {{experimental_inline}}</dt> + <dd><a class="internal" href="/en-US/docs/CSS/Media_queries">Consulta multimedia</a> de los medios destinados al recurso; esto solo debe usarse en un elemento {{HTMLElement("picture")}}.</dd> +</dl> + +<p>Si el atributo <code>type</code> no se especifica, el tipo de medio se recupera del servidor y se verifica para ver si el agente de usuario puede manejarlo; si no se puede procesar, se comprueba el siguiente <code><source></code>. Si se especifica el atributo <code>type</code>, se compara con los tipos que puede presentar el agente de usuario y, si no se reconoce, el servidor ni siquiera recibe consultas; en su lugar, el siguiente elemento <code><source></code> se comprueba a la vez.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Este ejemplo muestra cómo ofrecer un video en formato Ogg para usuarios cuyos navegadores admiten el formato Ogg, y un video en formato QuickTime para usuarios cuyos navegadores lo admiten. Si el navegador no admite los elementos <code>audio</code> o <code>video</code>, se muestra un aviso. Si el navegador admite los elementos pero no admite ninguno de los formatos especificados, se genera un evento <code>error</code> y los controles de medios predeterminados (si están habilitados) indicarán un error. Consulte también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">formatos de medios compatibles con los elementos de audio y video</a> en varios navegadores.</p> + +<pre class="brush: html"><video controls> + <source src="foo.webm" type="video/webm"> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mov" type="video/quicktime"> + Lo lamento; su navegador no soporta video HTML5. +</video> +</pre> + +<p>Para obtener más ejemplos, consulte <a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Uso de audio y video en Firefox</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '<source>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compaibilidad_entre_navegadores">Compaibilidad entre navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de pull.</div> + +<p>{{Compat("html.elements.source")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Elemento {{HTMLElement("picture")}}</li> + <li>Elemento {{HTMLElement("audio")}}</li> + <li>Elemento {{HTMLElement("video")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/span/index.html b/files/es/web/html/elemento/span/index.html new file mode 100644 index 0000000000..38a79bda5c --- /dev/null +++ b/files/es/web/html/elemento/span/index.html @@ -0,0 +1,166 @@ +--- +title: span +slug: Web/HTML/Elemento/span +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/span +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>span</strong> - <em>abarcar</em>. Es un contenedor en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><span></code> y <code></span></code> (ambas obligatorias).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="/es/HTML/Elemento/Tipos_de_elementos#especial" title="es/HTML/Elemento/Tipos_de_elementos#especial">especial</a>, y por lo tanto <a href="/es/HTML/Elemento/Tipos_de_elementos#enlinea" title="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: En línea.</dd> + <dd><strong>Puede contener</strong>: Texto, y/o Elementos <a href="/es/HTML/Elemento/Tipos_de_elementos#enlinea" title="es/HTML/Elemento/Tipos_de_elementos#enlinea">en línea</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td><code style="color: green;">datasrc </code></td> + <td>Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros.</td> + <td>Una dirección URI. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><code style="color: green;">datafld </code></td> + <td>El nombre de una propiedad o columna de <code style="color: green;">datasrc</code>. Reservado para posibles usos futuros.</td> + <td>Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><code style="color: green;">dataformatas </code></td> + <td>Indica como deben ser tratados los datos obtenidos de <code style="color: green;">datasrc</code>. Reservado para posibles usos futuros.</td> + <td>Uno de los siguientes: <code>'paintext'</code> o <code>'html</code>'. Por defecto: <code>'plaintext'</code></td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="div_y_span" name="div_y_span">div y span</h4> + +<p>código:</p> + +<pre class="eval"><div style="border: 1px dotted blue;"> + <h4>Ejemplo de div y span </h4> + <p> + Esto es un párrafo dentro de un div, + <span style="color: red;"> y esto un span dentro de un párrafo. </span> + </p> + </div> +</pre> + +<p>Resultado:</p> + +<div style="border: solid silver 1px;"> +<div style="border: 1px dotted blue;"> +<h5 id="Ejemplo_de_div_y_span" name="Ejemplo_de_div_y_span">Ejemplo de div y span</h5> + +<p>Esto es un párrafo dentro de un div, <span style="color: red;"> y esto un span dentro de un párrafo.</span></p> +</div> +</div> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<p>Por definición span no debe tener ningún estilo predefinido. Estos dos párrafos deben verse igual:</p> + +<pre class="eval"><p> Esto es un párrafo, bla, bla, bla. </p> +<p> Esto es un párrafo, <span>bla, bla, bla.</span> </p> +</pre> + +<p> </p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#edef-SPAN"><strong>span</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-span">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/strike/index.html b/files/es/web/html/elemento/strike/index.html new file mode 100644 index 0000000000..cb33cc0fe7 --- /dev/null +++ b/files/es/web/html/elemento/strike/index.html @@ -0,0 +1,60 @@ +--- +title: strike +slug: Web/HTML/Elemento/strike +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/strike +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Muestra el texto tachado con una linea horizontal.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <strike> y </strike> (Ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>:<a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>:<a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">Elemento de estilo de fuente</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5> + +<ul> + <li>title (título del elemento)</li> + <li>style (información de estilo en línea)</li> +</ul> + +<dl> + <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd> + <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd> + <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd> +</dl> + +<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene" name="Atributos_Espec.C3.ADficos_-_No_tiene">Atributos Específicos - No tiene</h5> + +<h5 id="Atributos_Transicionales_-_No_tiene" name="Atributos_Transicionales_-_No_tiene">Atributos Transicionales - No tiene</h5> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"> <p> + Texto normal y... <strike>Texto tachado</strike> + </p> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<div class="warning">DESAPROBADO</div> + +<p><span class="comment">de momento no funciona </span></p> diff --git a/files/es/web/html/elemento/strong/index.html b/files/es/web/html/elemento/strong/index.html new file mode 100644 index 0000000000..e04ea0a0e7 --- /dev/null +++ b/files/es/web/html/elemento/strong/index.html @@ -0,0 +1,58 @@ +--- +title: strong +slug: Web/HTML/Elemento/strong +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/strong +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>El elemento <strong>strong</strong> es el apropiado para marcar con especial énfasis las partes más importantes de un texto.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <strong> y </strong> (ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5> + +<ul> + <li>title (título del elemento)</li> + <li>style (información de estilo en línea)</li> +</ul> + +<dl> + <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd> + <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd> + <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd> +</dl> + +<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene" name="Atributos_Espec.C3.ADficos_-_No_tiene">Atributos Específicos - No tiene</h5> + +<h5 id="Atributos_Transicionales_-_No_tiene" name="Atributos_Transicionales_-_No_tiene">Atributos Transicionales - No tiene</h5> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"> <p> + <em>El dinero</em> es importante pero <strong>la salud</strong> lo es más. + </p> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p><strong>strong</strong> tiene un hermano menor: <strong>em</strong>. <strong>em</strong> sirve para dar énfasis y <strong>strong</strong> para dar mucho énfasis</p> diff --git a/files/es/web/html/elemento/style/index.html b/files/es/web/html/elemento/style/index.html new file mode 100644 index 0000000000..c298d810ad --- /dev/null +++ b/files/es/web/html/elemento/style/index.html @@ -0,0 +1,122 @@ +--- +title: style +slug: Web/HTML/Elemento/style +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/style +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>style</strong> - estilo. Es el elemento encargado de indicar la información de estilo.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><style></code> y <code></style></code> (ambas obligatorias).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#decabecera">de cabecera</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: No.</dd> + <dd><strong>Puede contener</strong>: Declaraciones de estilo.</dd> + <dd><strong>Debe ser contenido por</strong>: Elementos <a href="es/HTML/Elemento/Tipos_de_elementos#head">head</a>.</dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<p><del>Por defecto:</del> Debe indicarlo el autor.</p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-type-STYLE"><code style="color: green;">type </code></a></td> + <td>Indica el lenguaje de hojas de estilo usado.</td> + <td>Un tipo <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-content-type">MIME</a>. Para CSS es: "text/css".</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-media"><code style="color: green;">media </code></a></td> + <td>Indica el/los medios a los que está destinada la información de estilo.</td> + <td>Uno o más <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-media-descriptors">descriptores de medio</a> separados por coma. Por defecto: 'screen'. Lo fija el navegador</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h4 id="Ejemplo_simple" name="Ejemplo_simple">Ejemplo simple</h4> + +<pre class="eval"><<strong>style</strong> type="text/css"> + p { color: red; } +</<strong>style</strong>> +<p> Texto en rojo </p> +</pre> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#edef-STYLE"><strong>style</strong> en la especificación</a> de html 4.01</li> + <li>Especificación de <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/cover.html">CSS 2</a></li> +</ul> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-style">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/sub/index.html b/files/es/web/html/elemento/sub/index.html new file mode 100644 index 0000000000..4140eaa5cf --- /dev/null +++ b/files/es/web/html/elemento/sub/index.html @@ -0,0 +1,101 @@ +--- +title: sub +slug: Web/HTML/Elemento/sub +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/sub +--- +<p>{{HTMLRef}}</p> + +<p>El <strong>elemento HTML</strong> <sub> define un fragmento de texto que se debe mostrar, por razones tipográficas, más bajo, y generalmente más pequeño, que el tramo principal del texto, es decir, en subíndice.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categorías de contenido</a></th> + <td><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_din%C3%A1mico">Contenido dinamíco</a>(Flow content) y <a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_est%C3%A1tico_o_de_texto">contenido estático o de texto</a>(phrasing content)</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_est%C3%A1tico_o_de_texto">contenido estático o de texto</a></td> + </tr> + <tr> + <th scope="row">Omission de etiquetas</th> + <td><font><font>Ninguna, tanto la etiqueta de apertura y cierre deben estar presentes</font></font></td> + </tr> + <tr> + <th scope="row">Elementos padres permitidos</th> + <td><font><font>Cualquier elemento que acepte contenido estático o de texto</font></font></td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>Cualquiera</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento sólo incluye los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a>.</p> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<ul> + <li><font><font>Este elemento debe ser utilizado sólo por razones tipográficas, es decir, cambiar la posición del texto cambia su significado como en matemática</font></font> (por ejemplo la fórmula matemática <var>t<sub>2</sub></var>, aunque se debe considerar el uso de <a href="/en-US/docs/MathML">MathML</a>) <font><font>o fórmulas químicas</font></font> (por ejemplo <code>H<sub>2</sub>O</code>).</li> + <li>Este elemento no debe ser utilizado para propósitos meramente visuales, como el estilo del logo del software<a class="external external-icon" href="https://es.wikipedia.org/wiki/LaTeX"> LaTeX</a> <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaTeX_logo.svg/1200px-LaTeX_logo.svg.png"><img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaTeX_logo.svg/1200px-LaTeX_logo.svg.png" style="height: 23px; vertical-align: bottom; width: 56px;"></a>. En ese caso debe usarse la propiedad de <a href="https://developer.mozilla.org/en-US/docs/CSS" title="en/CSS">CSS</a> <code>vertical-align</code> para lograr el mismo efecto.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><p>La fórmula química de agua: H<sub>2</sub>O</p> +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>La fórmula química de agua: H<sub>2</sub>O</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2> + + + +<p>{{Compat("html.elements.sub")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El elemento HTML <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/sup"><sup></a> produce superíndice. Tenga en cuenta que no puedes usar <sup> y <sub> ambos al mismo tiempo y necesita usar <a href="https://developer.mozilla.org/en-US/docs/MathML" title="en/MathML">MathML</a> para producir un superíndice y un subíndice al lado del símbolo químico de un elemento, que representa su número atómico y su número nuclear. + + <p><img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Element_identity.png/220px-Element_identity.png" style="height: 63px; width: 63px;"></p> + </li> + <li>Los elementos MathML<a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msub" title="en/MathML/Element/msub"><code><msub></code></a>, <a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msup" title="en/MathML/Element/msup"><code><msup></code></a>, y <a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msubsup" title="en/MathML/Element/msubsup"><code><msubsup></code></a> .</li> +</ul> diff --git a/files/es/web/html/elemento/sup/index.html b/files/es/web/html/elemento/sup/index.html new file mode 100644 index 0000000000..51f98765f1 --- /dev/null +++ b/files/es/web/html/elemento/sup/index.html @@ -0,0 +1,110 @@ +--- +title: sup +slug: Web/HTML/Elemento/sup +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/sup +--- +<p>El <strong>elemento HTML</strong> <sup> define un fragmento de texto que se debe mostrar, por razones tipográficas, más alto, y generalmente más pequeño, que el tramo principal del texto, es decir, en superíndice.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="en/HTML/Content categories">Categorías de contenido</a></th> + <td><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_din%C3%A1mico">Contenido dinamíco</a>(Flow content) y <a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_est%C3%A1tico_o_de_texto">contenido estático o de texto</a>(phrasing content)</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="https://developer.mozilla.org/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_est%C3%A1tico_o_de_texto">contenido estático o de texto</a></td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td><font><font>Ninguna, tanto la etiqueta de apertura y cierre deben estar presentes</font></font></td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td><font><font>Cualquier elemento que acepte contenido estático o de texto</font></font></td> + </tr> + <tr> + <th scope="row"><font><font>Roles ARIA permitidos</font></font></th> + <td><font><font>Cualquiera</font></font></td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td><font><font><a href="https://developer.mozilla.org/es/docs/Web/API/HTMLElement" title="The HTMLElement interface represents any HTML element. Some elements directly implement this interface, others implement it via an interface that inherits it."><code>HTMLElement</code></a></font></font></td> + </tr> + </tbody> +</table> + +<h2 class="highlight-spanned" id="Atributos"><span class="highlight-span">Atributos</span></h2> + +<p>Este elemento sólo incluye los <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributos globales</a>.</p> + +<h2 class="highlight-spanned" id="Notas_de_uso"><span class="highlight-span">Notas de uso</span></h2> + +<ul> + <li><font><font>Este elemento debe ser utilizado sólo por razones tipográficas, es decir, cambiar la posición del texto cambia su significado como en matemática </font></font> (por ejemplo la fórmula matemática <var>f<sup>4</sup></var>, aunque se debe considerar el uso de <a href="https://developer.mozilla.org/en-US/docs/Web/MathML">MathML</a>) <font><font>o en las abreviaturas francesas </font></font>(por ejemplo M<sup>lle</sup>, M<sup>me</sup> or C<sup>ie</sup>).</li> + <li>Este elemento también se puede encontrar siguiendo palabras o frases. Estas anotaciones indican una entrada bibliográfica y se conocen como "notas al pie."</li> + <li>Este elemento no debe ser utilizado para propósitos meramente visuales, como el estilo del logo del software<a class="external external-icon" href="https://es.wikipedia.org/wiki/LaTeX"> LaTeX</a> <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaTeX_logo.svg/1200px-LaTeX_logo.svg.png"><img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LaTeX_logo.svg/1200px-LaTeX_logo.svg.png" style="height: 23px; vertical-align: bottom; width: 56px;"></a>. En ese caso debe usarse la propiedad de <a href="https://developer.mozilla.org/en-US/docs/CSS" title="en/CSS">CSS</a> <code>vertical-align</code> para lograr el mismo efecto.</li> +</ul> + +<h2 class="highlight-spanned" id="Ejemplos"><span class="highlight-span">Ejemplos</span></h2> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Este texto es <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>sup</span><span class="punctuation token">></span></span>superíndice<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>sup</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>Este texto es <sup>superíndice</sup></p> + +<pre class="brush: html"><p>Notas al pie<sup><sup>1</sup></sup></p> +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>Notas al pie<sup>1</sup></p> + +<h2 class="highlight-spanned" id="Especificaciones"><span class="highlight-span">Especificaciones</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td><a class="external external-icon" href="https://html.spec.whatwg.org/multipage/semantics.html#the-sub-and-sup-elements" hreflang="en" lang="en">HTML Living Standard<br> + <small lang="es">The definition of '<sub> and <sup>' in that specification.</small></a></td> + <td><span class="spec-Living">Living Standard</span></td> + <td> </td> + </tr> + <tr> + <td><a class="external external-icon" href="http://www.w3.org/TR/html5/textlevel-semantics.html#the-sub-and-sup-elements" hreflang="en" lang="en">HTML5<br> + <small lang="es">The definition of '<sub> and <sup>;' in that specification.</small></a></td> + <td><span class="spec-REC">Recommendation</span></td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2> + + + +<p>{{Compat("html.elements.sup")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El elemento HTML <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/sub"><sub></a> produce subíndices. Tenga en cuenta que no puedes usar <sup> y <sub> ambos al mismo tiempo y necesita usar <a href="https://developer.mozilla.org/en-US/docs/MathML" title="en/MathML">MathML</a> para producir un superíndice y un subíndice al lado del símbolo químico de un elemento, que representa su número atómico y su número nuclear. + + <p><img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Element_identity.png/220px-Element_identity.png" style="height: 63px; width: 63px;"></p> + </li> + <li>Los elementos MathML<a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msub" title="en/MathML/Element/msub"><code><msub></code></a>, <a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msup" title="en/MathML/Element/msup"><code><msup></code></a>, y <a href="https://developer.mozilla.org/en-US/docs/MathML/Element/msubsup" title="en/MathML/Element/msubsup"><code><msubsup></code></a> .</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/table/index.html b/files/es/web/html/elemento/table/index.html new file mode 100644 index 0000000000..1dffe0d7c2 --- /dev/null +++ b/files/es/web/html/elemento/table/index.html @@ -0,0 +1,525 @@ +--- +title: tabla +slug: Web/HTML/Elemento/table +translation_of: Web/HTML/Element/table +--- +<h2 id="Resumen">Resumen</h2> +<p>El <em>Elemento de Tabla HTML</em> (<code><table></code>) representa datos en dos o mas dimensiones.</p> +<div class="note"> + <strong>Nota: </strong>Antes de la creación de <a href="/es/docs/CSS" title="CSS">CSS</a>, los elementos HTML {{HTMLElement("table")}} eran frecuentemente utilizados para la disposición (posicionamiento) de una página. Este uso ha sido desalentado desde HTML 4, y el elemento <span style="font-weight: bold;">no debe</span> ser usado para dichos fines.</div> +<h2 id="Contexto_de_uso">Contexto de uso</h2> +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/es/docs/HTML/Content_categories" title="HTML/Content categories">Categoria del contenido</a></td> + <td><a href="/es/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flujo del contenido</a></td> + </tr> + <tr> + <td>Contenido permitido</td> + <td> + <div class="content-models"> + <div id="table-mdls"> + En este orden: + <ul> + <li>un elemento opcional {{HTMLElement("caption")}},</li> + <li>cero o mas elementos {{HTMLElement("colgroup")}},</li> + <li>un elemento opcional {{HTMLElement("thead")}},</li> + <li>una de las dos alternativas: + <ul> + <li>un elemento {{HTMLElement("tfoot")}}, seguido por: + <ul> + <li>cero o mas elementos {{HTMLElement("tbody")}},</li> + <li>o uno o mas elementos {{HTMLElement("tr")}},</li> + </ul> + </li> + <li>una segunda alternativa seguida por un elemento opcional {{HTMLElement("tfoot")}}: + <ul> + <li>cualquier cero o mas elementos {{HTMLElement("tbody")}},</li> + <li>uno o mas elementos {{HTMLElement("tr")}}</li> + </ul> + </li> + </ul> + </li> + </ul> + </div> + </div> + </td> + </tr> + <tr> + <td>Omisión de etiqueta</td> + <td>Ninguna, ambas la <span title="syntax-start-tag">etiqueta de inicio</span> y <span title="syntax-end-tag">de fin</span> son obligatorias</td> + </tr> + <tr> + <td>Elementos padre permitidos</td> + <td>cualquier elemento que acepte elementos de flujo</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, section 4.9.1</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, section 11.2.1</a>)</td> + </tr> + </tbody> +</table> +<h3 id="Atributos">Atributos</h3> +<p>Al igual que otros elementos HTML, este elemento también soporta <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">atributos globales</a>.</p> +<dl> + <dt> + {{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo enumerativo indica como va a encontrarse alineada la tabla respecto al contenido del documento en cuestión, pudiendo tener los siguientes valores: + <ul> + <li><span>left</span>,significa que la tabla será mostrada a la izquierda del documento;</li> + <li><span>center</span>, significa que la tabla será mostrada al centro del documento;</li> + <li><span>right</span>, significa que la tabla será mostrada a la derecha del documento.</li> + </ul> + <div class="note"> + <strong>Nota: </strong> + <ul> + <li><strong>No usar este atributo</strong>, ya que ha sido declarado obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. A fin de dar un efecto similar al atributo <span>align</span>, las propiedades {{cssxref("text-align")}} y {{cssxref("vertical-align")}} deben ser usadas.</li> + <li>Antes de la version 4 de Firefox, este ya soportaba sólo en el modo quirks (compatibilidad con navegadores antiguos) los valores <code>middle</code>, <code>absmiddle</code>, and <code>abscenter</code> como sinónimos de <code>center</code><em>. </em></li> + </ul> + </div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo define el color de fondo de la tabla . Es un código hexadecimal como el dado en el formato <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a> (bajo el prefijo '#'). Uno de los 16 colores predefinidos podía ser usado: + <table> + <tbody> + <tr> + <td style="width: 24px; background-color: black;"> </td> + <td><span>black (negro)</span> = "#000000"</td> + <td style="width: 24px; background-color: green;"> </td> + <td><span>green (verde)</span> = "#008000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: silver;"> </td> + <td><span>silver (plata)</span> = "#C0C0C0"</td> + <td style="width: 24px; background-color: lime;"> </td> + <td><span>lime (lima)</span> = "#00FF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: gray;"> </td> + <td><span>gray (gris)</span> = "#808080"</td> + <td style="width: 24px; background-color: olive;"> </td> + <td><span>olive (oliva)</span> = "#808000"</td> + </tr> + <tr> + <td style="width: 24px; background-color: white;"> </td> + <td><span>white (blanco)</span> = "#FFFFFF"</td> + <td style="width: 24px; background-color: yellow;"> </td> + <td><span>yellow (amarillo)</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="width: 24px; background-color: maroon;"> </td> + <td><span>maroon (marrón)</span> = "#800000"</td> + <td style="width: 24px; background-color: navy;"> </td> + <td><span>navy (azul marino)</span> = "#000080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: red;"> </td> + <td><span>red (rojo)</span> = "#FF0000"</td> + <td style="width: 24px; background-color: blue;"> </td> + <td><span>blue (azul)</span> = "#0000FF"</td> + </tr> + <tr> + <td style="width: 24px; background-color: purple;"> </td> + <td><span>purple (púrpura)</span> = "#800080"</td> + <td style="width: 24px; background-color: teal;"> </td> + <td><span>teal (verde esmeralda)</span> = "#008080"</td> + </tr> + <tr> + <td style="width: 24px; background-color: fuchsia;"> </td> + <td><span>fuchsia (fucsia)</span> = "#FF00FF"</td> + <td style="width: 24px; background-color: aqua;"> </td> + <td><span>aqua (verde agua)</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo, dado que ha sido declarado obsoleto. El elemento {{HTMLElement("table")}} debe ser estilizado utilizando <a href="/es/docs/CSS" title="CSS">CSS</a>. A fin de dar un efecto similar al atributo <span>bgcolor</span>, la propiedad <a href="/es/docs/CSS" title="CSS">CSS</a> {{cssxref("background-color")}} debe ser usada.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo entero define el tamaño del cuadro alrededor de la tabla . Si estuviese puesta en <span>0</span>, implicaría que dicho atributo sería <span>nulo</span>. + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. A fin de dar un efecto similar al atributo, las propiedades CSS nativas {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} y {{cssxref("border-style")}} deben ser usadas.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo define el espacio entre el contenido de una celda y su borde (mostrado o no), si fuese la longitud de un pixel, dicho espacio será aplicado en los 4 costados, caso que fuese un porcentaje, el contenido será centrado y todo el espacio vertical representará a este porcentaje. Lo mismo será válido para todo el espacio horizontal + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>border</span>, use la propiedad CSS {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("padding")}} en el elemento {{HTMLElement("td")}}.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo define el espacio entre el contenido de una celda y su borde (mostrado o no), si fuese la longitud de un pixel, dicho espacio será aplicado en los 4 costados, caso que fuese un porcentaje, el contenido será centrado y todo el espacio vertical representará a este porcentaje. Lo mismo será válido para todo el espacio horizontal. + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>border</span>, use la propiedad {{cssxref("border-collapse")}} con el valor collapse en el mismo elemento {{HTMLElement("table")}}, y la propiedad {{cssxref("margin")}} en el elemento {{HTMLElement("td")}}.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo enumerativo define cual lado del cuadro alrededor de la tabla será mostrada. Puede tener los siguientes valores: + <table style="width: 668px;"> + <tbody> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>above</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>below</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>hsides</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>vsides</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>lhs</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>rhs</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>border</span></td> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>box</span></td> + </tr> + <tr> + <td style="width: 24px; background-color: rgb(224, 224, 224);"> </td> + <td><span>void</span></td> + </tr> + </tbody> + </table> + <div class="note"> + <strong>Nota de uso: </strong>No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>frame</span> use las propiedades CSS {{cssxref("border-style")}} y {{cssxref("border-width")}}.</div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo enumerativo define donde aparecen las reglas en la tabla, por ejemplo líneas. Puede tener los siguientes valores: + <ul> + <li><span>none</span>, indica que ninguna regla se mostrará, es el valor por defecto;</li> + <li><span>groups</span>, mostrará el número de reglas a mostrarse entre grupos de filas (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} y {{HTMLElement("tfoot")}} elements) y entre grupos de columnas (defined by the {{HTMLElement("col")}} y {{HTMLElement("colgroup")}} elements) solamente;</li> + <li><span>rows</span>, que mostrará las reglas entre filas;</li> + <li><span>columns</span>, que mostrará las reglas entre columnas;</li> + <li><span>all</span>, que mostrará las reglas entre filas y columnas.</li> + </ul> + <div class="note"> + <strong>Nota</strong>: + <ul> + <li>El estilo de las reglas depende del navegador usado y no puede ser modificado.</li> + <li>Nota de uso: No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Use la propiedad {{cssxref("border")}} en los elementos adecuados {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} o {{HTMLElement("colgroup")}}.</li> + </ul> + </div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo define un texto alternativo para describir una tabla en un usuario incapaz de mostrarlo, corrientemente contiene una descripcion de él que posibilita a discapacitaos visulaes (como invidentes navegando en pantallas braile) a obtener la información que necesitan.Si la información añadida en este atributo puede ser útil a otras personas, considere el utilizar el elemento {{HTMLElement("caption")}} en vez de este. instead. El atributo de resumen no es obligatorio usuarlo, pudiendo ser omitido si un elemento {{HTMLElement("caption")}} realiza similar labor.<br> + <div class="note"> + <strong>Nota de uso: </strong>No use este atributo, dado que ha sido declarado obsoleto. En su lugar, use alguna de estas formas de describir una tabla: + <ul> + <li>En prosa, rodeando la tabla (esta es la forma menos semántica de lograrlo).</li> + <li>En el elemento {{HTMLElement("caption")}} de la tabla.</li> + <li>En un elemento {{HTMLElement("details")}}, dentro del elemento {{HTMLElement("caption")}} de la tabla.</li> + <li>Incluye el elemento {{HTMLElement("table")}} en un elemento {{HTMLElement("figure")}} y añada la descripción en prosa al lado de él.</li> + <li>Incluya el elemento {{HTMLElement("table")}} en un elemento {{HTMLElement("figure")}} y añada la descripción en prosa dentro de un elemento {{HTMLElement("figcaption")}}.</li> + <li>Ajuste la tabla de manera que la descripción no sea necesaria, usando los elementos {{HTMLElement("th")}} y {{HTMLElement("thead")}} por ejemplo.</li> + </ul> + </div> + </dd> +</dl> +<dl> + <dt> + {{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd> + Este atributo define el ancho de una tabla, pudiendo contener una longitud de píxeles o un porcentaje, que representa un porcentaje de anchura del contenedor que la tabla debiera usar. + <div class="note"> + No usar este atributo en CSS dado que es obsoleto: el elemento {{HTMLElement("table")}} debe ser estilizado usando <a href="/es/docs/CSS" title="CSS">CSS</a>. Para dar un efecto similar al atributo <span>frame</span> use la propiedad CSS {{cssxref("width")}} en su lugar.</div> + </dd> +</dl> +<h3 id="Interfaz_DOM">Interfaz DOM</h3> +<p>Este elemento implementa la interfaz <code><a href="/es/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement">HTMLTableElement</a></code>.</p> +<h3 id="Ejemplos">Ejemplos</h3> +<pre class="brush: html"><!-- Simple table --> +<table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<!-- Simple table with header --> +<table> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<!-- Table with thead, tfoot, and tbody --> +<table> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> +</table> + +<!-- Table with colgroup --> +<table> + <colgroup span="4" class="columns"></colgroup> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> +</table> + +<!-- Table with colgroup and col --> +<table> + <colgroup> + <col class="column1"> + <col class="columns2plus3" span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<!-- Simple table with caption --> +<table> + <caption>Awesome caption</caption> + <tr> + <td>Awesome data</td> + </tr> +</table> +</pre> +<h4 id="Resultado">Resultado</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <tbody> + <tr> + <th>First name</th> + <th>Last name</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <thead> + <tr> + <th>Header content 1</th> + <th>Header content 2</th> + </tr> + </thead> + <tfoot> + <tr> + <td>Footer content 1</td> + <td>Footer content 2</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Body content 1</td> + <td>Body content 2</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <colgroup> + </colgroup> + <tbody> + <tr> + <th>Countries</th> + <th>Capitals</th> + <th>Population</th> + <th>Language</th> + </tr> + <tr> + <td>USA</td> + <td>Washington D.C.</td> + <td>309 million</td> + <td>English</td> + </tr> + <tr> + <td>Sweden</td> + <td>Stockholm</td> + <td>9 million</td> + <td>Swedish</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <colgroup> + <col class="column1"> + <col class="columns2plus3"> + </colgroup> + <tbody> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + Awesome caption</caption> + <tbody> + <tr> + <td>Awesome data</td> + </tr> + </tbody> +</table> +<h3 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3> +<p>{{CompatibilityTable}}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Consulte_también">Consulte también</h3> +<ul> + <li>Otros elementos HTML relacionados a tablas: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li> + <li>Propiedades CSS que pueden ser especialmente útiles para estilizar el elemento <span style="font-family: Courier New;"><table></span>: + <ul> + <li>{{cssxref("width")}} para controlar el ancho de la tabla;</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} para controlar el aspecto de los bordes de las celdas, reglas y marco;</li> + <li>{{cssxref("margin")}} y {{cssxref("padding")}} para estilizar el contenido individual de las celdas;</li> + <li>{{cssxref("text-align")}} y {{cssxref("vertical-align")}} para definir la alineación del contenido y del texto de las celdas.</li> + </ul> + </li> +</ul> diff --git a/files/es/web/html/elemento/td/index.html b/files/es/web/html/elemento/td/index.html new file mode 100644 index 0000000000..dc8867d87f --- /dev/null +++ b/files/es/web/html/elemento/td/index.html @@ -0,0 +1,310 @@ +--- +title: <td> +slug: Web/HTML/Elemento/td +translation_of: Web/HTML/Element/td +--- +<h2 id="Resumen">Resumen</h2> + +<p>El elemento <a href="/es/docs/Web/HTML">HTML</a> <em>Celda de tabla</em> (<strong><code><td></code></strong>) define la celda de una tabla que contiene datos. Esta participa en el <em>modelo de tablas</em>.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td>Ninguna.</td> + </tr> + <tr> + <th>Contenido permitido</th> + <td>Contenido dinámico.</td> + </tr> + <tr> + <th>Omision de Etiquetas</th> + <td>La <span title="syntax-etiqueta-de-inicio">etiqueta de inicio</span> es obligatoria.<br> + La etiqueta final puede ser omitida, si esta inmediatamente seguida por un elemento {{HTMLElement("th")}} o un {{HTMLElement("td")}} o si no hay más datos en el elemento padre.</td> + </tr> + <tr> + <th>Elementos padre permitidos</th> + <td>Un elemento {{HTMLElement("tr")}}.</td> + </tr> + <tr> + <th>Documento normativo</th> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element" rel="external">HTML5, section 4.9.9</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsoleteGeneric('inline','HTML5')}}</dt> + <dd>Este atributo contiene un pequeña descripción abreviada del contenido de la celda. Algunos agentes de usuario, como los lectores de voz, pueden presentar esta descripción antes que el propio contenido. + <div class="note"><strong>Nota:</strong> No usar este atributo ya que esta obsoleto en la ultima version del estandar. Como alternativa, puedes poner una descripción abreviada dentro de la celda y colocar el contenido largo en el atributo <strong>title</strong>.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd>Este atributo especifíca la posición horizontal del contenido de la celda, los valores de la misma pueden ser: + <ul> + <li><font face="Consolas, Liberation Mono, Courier, monospace">Izquierda</font>, alínea el contenido de la celda a la izquierda</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">Centro</font>, centra el contenido de una celda</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">Derecha</font>, alínea el contenido de la celda a la derecha</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">Justificado</font>, inserta espacios en el texto para que el contenido se ajuste a la celda</li> + <li><code>char</code>, alinear el contenido a un caracter especial definido por los atributos {{htmlattrxref("char", "td")}} y {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li> + </ul> + + <p>Si este atributo no se define, se selecciona por defecto <code>left</code></p> + + <div class="note"><strong>Nota:</strong> No usar este atributo ya que esta obsoleto en la ultima version. + + <ul> + <li>Para lograr el mismo efecto de los valores <code>left</code>, <code>center</code>, <code>right</code>, o <code>justify</code> , usa la propiedad CSS {{cssxref("text-align")}} en el.</li> + <li>Para lograr el mismo efecto que el valor <code>char</code> , en CSS3,puedes usar el valor de la {{htmlattrxref("char", "td")}} como el valor de la propiedad {{cssxref("text-align")}} {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt> + <dd> + <pre dir="ltr" id="tw-target-text">Este atributo contiene una lista de cadenas separadas por espacios . Cada cadena es el ID de un grupo de celdas a las que esta cabecera se aplica.</pre> + + <div class="note"><strong>Nota: </strong>No usar este atributo ya que esta obsoleto en la ultima version. En su lugar use el atributo {{htmlattrxref("scope", "td")}} .</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd> + <pre dir="ltr" id="tw-target-text">Este atributo define el color de fondo de cada celda de la columna. Es uno de los códigos de 6 dígitos hexadecimales como se definen en sRGB , prefijado por un '# ' . Una de las cadenas de color predefinidos dieciséis se pueden utilizar :</pre> + + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>Negro</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td>Verde = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><font face="Consolas, Liberation Mono, Courier, monospace">Plata</font> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>Lima</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><font face="Consolas, Liberation Mono, Courier, monospace">Gris</font> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><font face="Consolas, Liberation Mono, Courier, monospace">Oliva</font> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><font face="Consolas, Liberation Mono, Courier, monospace">Blanco</font> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><font face="Consolas, Liberation Mono, Courier, monospace">Amarillo</font> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>Marrón</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><font face="Consolas, Liberation Mono, Courier, monospace">Marino</font> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>Rojo</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>Azul</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>Purpura</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>Verde Azulado</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>Fucsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td> + <td><code>agua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note">Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar y solo implementado en algunas versiones de Microsoft Internet Explorer: El elemento {{HTMLElement("td")}} debe ser estilizado en CSS. <br> + Para crear un efecto similar en CSS en su lugar use la propiedad {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd> + <pre dir="ltr" id="tw-target-text">Este atributo se utiliza para establecer el carácter para alinear las celdas de una columna . Los valores típicos de esto incluyen un punto (. ) al intentar alinear los números o valores monetarios . Si { { htmlattrxref ( " align " , " td " ) } } no está ajustado a char, este atributo se ignora.</pre> + + <div class="note"><strong>Note: </strong>No usar este atributo ya que está obsoleto (y no soportado) en las últimas versiones estándares). Para lograr el mismo que el {{htmlattrxref("char", "thead")}}, en CSS3, puedes usar el character set usando el atributo {{htmlattrxref("char", "th")}} como el valor de la propiedad {{cssxref("text-align")}} {{unimplemented_inline}}.</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd><br> + Este atributo se utiliza para indicar el número de caracteres para compensar los datos de la columna de los personajes de alineación especificado por el atributo de carbón . + <div class="note">Nota: No usar este atributo ya que esta obsoleto en la ultima version del estandar,</div> + </dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd> + <pre dir="ltr" id="tw-target-text">Este atributo contiene un valor entero no negativo que indica por el número de columnas se extiende la célula. Su valor por defecto es 1 ; si su valor se establece en 0 , se extiende hasta el final de la { { HTMLElement ( " colgroup " ) } } , aunque implícitamente definido , que la célula pertenece. Los valores superiores a 1000 serán consideradas como incorrectas y se establecen en el valor predeterminado ( 1 ) .</pre> + + <div class="note"><strong>Nota: En</strong> {{HTMLVersionInline(5)}} este atributo solo acepta valores mayores que 0 this attribute only accepts values greater than zero since it <a href="http://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">must not be used to overlap cells</a>. Además, Firefox is the only browser to support the 0 value as defined in the {{HTMLVersionInline(4.01)}} specification.</div> + </dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd><br> + Este atributo contiene una lista de cadenas separadas por espacios , cada uno correspondiente al atributo ID de la { { HTMLElement ( "th" ) } } elementos que se aplican a este elemento.</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd><br> + Este atributo contiene un valor entero no negativo que indica a cuántas filas se extiende la célula. Su valor por defecto es 1 ; si su valor se establece en 0 , se extiende hasta el final de la sección de la tabla ( { { HTMLElement ( " culata en T " ) } } , { { HTMLElement ( " tbody " ) } } , { { HTMLElement ( " tfoot " ) } } , incluso si define implícitamente , que la célula pertenece. los valores superiores a 65534 se recortan hasta 65534 .</dd> + <dt>{{htmlattrdef("scope")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd> </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt> + <dd><br> + Este atributo especifica la alineación vertical del texto dentro de cada fila de células de la cabecera de la tabla . Los valores posibles para este atributo son : + <ul> + <li><code>baseline</code>,<span style="background-color: #fafbfc; font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;"> pondrá el texto tan cerca del fondo de la celda , ya que es posible, pero alinearlo en la línea de base de los caracteres en lugar de la parte inferior de ellos. Si los caracteres son todos del mismo tamaño , esto tiene el mismo efecto que la parte inferior.</span></li> + <li><code>bottom</code>, pondrá el texto tan cerca del fondo de la celda , ya que es posible</li> + <li><code>middle</code>, centra el texto de la celda</li> + <li>and <code>top</code>, pone el texto como cerca de la parte superior de la celda como es posible .</li> + </ul> + + <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt> + <dd><br> + Este atributo se utiliza para definir una anchura de celda recomendada. Propiedades CELLSPACING y cellpadding pueden añadir espacio adicional, y el elemento { { HTMLElement ( "col " ) } } anchura pueden también tener algún efecto . En general, si el ancho de una columna es demasiado estrecha para mostrar una célula particular correctamente, y por lo tanto las células en el mismo, se puede ensanchar cuando se muestra .</dd> + <dd> + <div class="note"><strong>Note: </strong>Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.</div> + </dd> +</dl> + +<h2 id="DOM_interfaz">DOM interfaz</h2> + +<p> </p> + +<p>Este elemento implementa el interfaz {{domxref("HTMLTableDataCellElement")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p> </p> + +<p>Por favor, ver la página {{HTMLElement("table")}} para ejemplos de <code><td></code>.</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>1.0</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>1.0</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>colspan</code> attribute with value 0 (extend to the end of the colgroup)</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otros Elementos HTML relacionados con tablas: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/template/index.html b/files/es/web/html/elemento/template/index.html new file mode 100644 index 0000000000..b6fe0ca924 --- /dev/null +++ b/files/es/web/html/elemento/template/index.html @@ -0,0 +1,155 @@ +--- +title: <template> +slug: Web/HTML/Elemento/template +tags: + - Plantilla +translation_of: Web/HTML/Element/template +--- +<p><span class="seoSummary">El <strong>elemento</strong> <strong>HTML <code><template></code></strong> es un mecanismo para mantener el contenido </span> <span class="seoSummary">{{Glossary("HTML")}}</span> <span class="seoSummary">del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.</span></p> + +<p>Piensa en la plantilla como un fragmento de contenido que está siendo almacenado para un uso posterior en el documento. El analizador procesa el contenido del elemento <strong><code><template></code> </strong>durante la carga de la página, pero sólo lo hace para asegurar que esos contenidos son válidos; sin embargo, estos contenidos del elemento no se renderizan.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías de Contenido</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, script-supporting element</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Sin restricciones</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Padres permitidos</th> + <td>Cualquier elemento que acepte <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">metadata content</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting elements</a>. También se permiten como hijos de un elemento {{HTMLElement("colgroup")}} que no tenga un atributo {{htmlattrxref("span", "colgroup")}} .</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>No <code>role</code> permitted</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento sólo incluye <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<p>SInembargo, {{domxref("HTMLTemplateElement")}} tiene una propiedad {{domxref("HTMLTemplateElement.content", "content")}}, que es solo-lectura cuyo {{domxref("DocumentFragment")}} contiene el subárbol DOM que representa a la plantilla.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Primero empezamos con la parte HTML del ejemplo.</p> + +<pre class="brush: html"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- datos opcionales pueden incluirse aquí opcionalmente --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>Inicialmente tenemos una tabla en la cual insertaremos más tarde contenido usando código JavaScript. Más abajo viene el template, el cual describe la estructura de un fragmento HTML representando la fila de una tabla.</p> + +<p>Ahora que la tabla ha sido creada y el template definido, usamos JavaScript para insertar filas en la tabla, con cada fila siendo construida usando el template como su base.</p> + +<pre class="brush:js;">// Comprobar si el navegador soporta el elemento HTML template element chequeando +// si tiene el atributo 'content' +if ('content' in document.createElement('template')) { + + // Instanciar la tabla con el tbody existente + // y la fila con el template + var t = document.querySelector('#productrow'), + td = t.content.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + // Clonar la nueva fila e insertarla en la tabla + var tb = document.querySelector("tbody"); + var clone = document.importNode(t.content, true); + tb.appendChild(clone); + + // Crear una nueva fila + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans"; + + // Clonar la nueva fila e insertarla en la tabla + var clone2 = document.importNode(t.content, true); + tb.appendChild(clone2); + +} else { + // Buscar otra manera de añadir filas a la tabla porque el + // elemento template no está soportado. +} +</pre> + +<p>El resultado es la tabla HTML original HTML , con dos nuevas filas adjuntadas via JavaScript:</p> + +<div class="hidden"> +<pre class="brush: css">table { + background: #000; +} +table td { + background: #fff; +}</pre> +</div> + +<p>{{EmbedLiveSample("Examples", 500, 120)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_navegadores">Compatibilidad navegadores</h2> + + + +<p>{{Compat("html.elements.template")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Web components: {{HTMLElement("slot")}} (e históríco: {{HTMLElement("shadow")}})</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots">Usando templates y slots</a></li> +</ul> diff --git a/files/es/web/html/elemento/textarea/index.html b/files/es/web/html/elemento/textarea/index.html new file mode 100644 index 0000000000..f062f6e1c6 --- /dev/null +++ b/files/es/web/html/elemento/textarea/index.html @@ -0,0 +1,181 @@ +--- +title: <textarea> +slug: Web/HTML/Elemento/textarea +tags: + - Elemento + - Formularios(2) + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/textarea +--- +<h2 id="Resumen">Resumen</h2> + +<p>El <strong>elemento</strong> <strong>HTML <code><textarea> </code></strong>representa un control para la edición mutilínea de texto sin formato.</p> + +<h2 id="Contenido_de_Uso">Contenido de Uso</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Interactive content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a>, y <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> elemento</td> + </tr> + <tr> + <th scope="row">Contenido Permitido</th> + <td>Datos carácter</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que soporta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz Dom</th> + <td>{{domxref("HTMLTextAreaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento contiene </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Este es un atributo no estándar utilizado por iOS Safari Mobile (y, por lo tanto, también por casi todos los navegadores de iOS, incluyendo Safari, Firefox y Chrome). Controla cuándo y cómo el texto debe ponerse automáticamente en mayúsculas mientras es ingresado/editado por el usuario. Los valores no obsoletos están disponible en iOs 5 y en versiones posteriores. Sus valores posibles son: + <ul> + <li><code>none</code>: Deshabilita la capitalización automática</li> + <li><code>sentences</code>: Escribe automáticamente con mayúscula la primera letra de cada frase.</li> + <li><code>words</code>: Automáticamente escribe con mayúsculas la primera letra de las palabras.</li> + <li><code>characters</code>: Automáticamente escribe con mayúscula todos los caracteres.</li> + <li><code>on</code>: {{deprecated_inline()}} En desuso desde la versión 5 de iOS.</li> + <li><code>off</code>: {{deprecated_inline()}} En desuso desde la versión 5 de iOS.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo indica si el valor del control puede ser completado automáticamente por el navegador. Los posibles valores son: + <ul> + <li><code>off</code>: El usuario debe explícitamente introducir el valor del campo para cada uso, o el documento proporciona su propio método de auto-completado; el navegador no completa automáticamente.</li> + <li><code>on</code>: El navegador puede completar automáticamente el valor basándose en valores que el usuario haya insertado durante usos previos.</li> + </ul> + + <p>Si el atributo <strong>autocomplete</strong> no está definidio en el elemento textarea, entonces el navegador usa el valor del atributo <strong>autocomplete </strong>del propietario del elemento <code><textarea></code> . El propietario del formulario es o bien el elemento form del cual el <textarea> es descendiente o el elemento form cuyo id está especificado en el atributo form del elemento. Para más información, ver el atributo {{htmlattrxref("autocomplete", "form")}} en {{HTMLElement("form")}}.</p> + </dd> + <dt>{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}</dt> + <dd>Este atributo booleano te permite especificar que un control de un formulario adquiera el foco cuando se carga la página, salvo que el usuario anule esto , por ejemplo tecleando en un control diferente. Sólo se puede especificar este atributo en los elementos asociados a formularios.</dd> + <dt>{{ htmlattrdef("cols") }}</dt> + <dd>La anchura visible del control de texto, en caracteres de anchura media. Si está definido debe ser positivo. Si no, por defecto, el valor es 20 (HTML 5).</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>Este atributo booleano indica que el usuario no puede interactuar con el control. Si el atributo no está definido se hereda su valor del elemento en el que está contenido, por ejemplo {{ HTMLElement("fieldset") }}; Si no está dentro de un elemento contenedor con el atributo disable establecido, entonces el control estará habilitado.</dd> + <dt>{{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}</dt> + <dd>El formulario al cual el elemento textarea está asociado (el propietario del formulario). El valor del atributo debe ser un ID de un elemento formulario del mismo documento. Si no se especifica este atributo, el textarea debe ser un descendiente de un elemento formulario. Permite colocar elementos textarea en cualquier lugar dentro de un documento, no sólo como descendientes de formularios.</dd> + <dt>{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline("5") }}</dt> + <dd>Indica el número máximo de caracteres (Unicode code points) que el usuario puede insertar. Si no está especificado entonces el usuario puede insertar un número ilimitado de caracteres.</dd> + <dt>{{ htmlattrdef("minlength") }} {{ HTMLVersionInline("5") }}</dt> + <dd>El mínimo número de caracteres (Unicode code points) que el usuaurio debe insertar.</dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>El nombre del control</dd> + <dt>{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline("5") }}</dt> + <dd>Se puede añadir un indicación para el usuario que defina que se debe insertar en el control. Los retornos de carro y las nuevas líneas dentro lso marcadores de posición deben ser tratado como nuevas líneas al representar dicha indicación.</dd> + <dt>{{ htmlattrdef("readonly") }}</dt> + <dd>Este atributo booleano indica que el usuario no puede modificar el valor del control. Al contrario que el atributo<code> disable</code>, el atributo <code>readonly </code>no evita que el usuario haga click o seleccione el control. El valor del control read-only si que se envía con el formulario.</dd> + <dt>{{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}</dt> + <dd>Este atributo indica que el usuario debe rellenar el contro con un valor antes de poder enviar el formulario.</dd> + <dt>{{ htmlattrdef("rows") }}</dt> + <dd>El número de líneas visibles en el control</dd> + <dt>{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline("5") }}</dt> + <dd>La dirección en la que la selección ocurre dentro del control. Es "forward" si la selección ocurre de izquierda a derecha en una localización LTR, o "backward" si la selección fue hecha en sentido contrario. Puede ser "none" si se desconoce la dirección.</dd> + <dt>{{ htmlattrdef("selectionEnd") }}</dt> + <dd>El índice del último caracter de la selección actual.</dd> + <dt>{{ htmlattrdef("selectionStart") }}</dt> + <dd>El índice del primer caracter de la selección actual.</dd> + <dt>{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Un valor <code>true</code> en este atributo indica que el elemento necesita tener <code>checked</code> el corrector ortográfico y gramatical. El caloor <code>default</code> indica que el elemento va a comportarse de acuerdo al comportamiento por defecto, basado en el <code>spellcheck</code> del padre. El valor <code>false</code> indica que no se deben hacer esas comprobaciones.</dd> + <dt>{{ htmlattrdef("wrap") }} {{ HTMLVersionInline("5") }}</dt> + <dd>Indica como el control envuelve al texto. Los posibles valores son: + <ul> + <li><span style="font-family: courier new;">hard</span>: El navegador insertar automáticamente caracteres de nueva línea (CR+LF) para que ninguna línea tenga más anchura que la del control; el atributo <code>cols</code> debe estar espeficicado.</li> + <li><span style="font-family: courier new;">soft</span>: El navegador asegura que todas las nuevas líneas constan de la pareja de caracteres CR+LF , pero no insertar nuevas líneas adicionales.</li> + </ul> + + <p><span style="font-family: courier new;">Soft</span> es el valor por defecto si no se especifica nada.</p> + </dd> +</dl> + +<h2 id="Interfaz_DOM">Interfaz DOM</h2> + +<p>Este elemento implementa el interfaz <code><a href="/en/DOM/HTMLTextAreaElement" title="en/DOM/textarea">HTMLTextAreaElement</a></code> .</p> + +<p>{{ h1_gecko_minversion("Resizable textareas", "2.0") }}</p> + +<p>{{ gecko("2.0") }} introduce el soporte para textareas redimensionable. Esto se controla con la propiedad CSS {{ cssxref("resize") }} . Por defecto la posibilidad de redimiensionar el control está habilitada, pero puede ser explícitamente deshabilitada mediante el uso del siguiente CSS:</p> + +<pre>textarea { + resize: none; +} +</pre> + +<h2 id="Interacción_con_CSS">Interacción con CSS</h2> + +<p>En relación a CSS, un <code><textarea></code> es un <a href="https://developer.mozilla.org/en-US/docs/CSS/Replaced_element" title="/en-US/docs/CSS/Replaced_element">replaced element</a>. La especificación HTML no define dónde está el punto de referencia de un <code><textarea></code>. Así que los diferentes navegadores lo sitúan en diferentes posiciones. En los navegadores basados en Gecko, ese punto de referencia del <code><textarea></code> se sitúa en el punto de referencia de la primera línea del <code><textarea></code>, en otro navegadores puede estár situado al final de la caja del <code><textarea></code> . Se recomienda no usar {{cssxref("vertical-align")}}<code>: baseline</code> , ya que obtendríamos un comportamiento no impredecible.</p> + +<p>Un <em>textarea</em> tiene dimensiones intrínsecas, como una imagen agrandada.</p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><textarea name="textarea" rows="10" cols="50">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Example','600','200') }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<div> + + +<p>{{Compat("html.elements.textarea")}}</p> +</div> + + + +<h2 id="Ver_además">Ver además</h2> + +<p>Otros elementos relacionados con formularios: {{ HTMLElement("form") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</p> + +<p>{{ languages( { "fr": "fr/HTML/Element/textarea" } ) }}</p> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/th/index.html b/files/es/web/html/elemento/th/index.html new file mode 100644 index 0000000000..dae17481e0 --- /dev/null +++ b/files/es/web/html/elemento/th/index.html @@ -0,0 +1,328 @@ +--- +title: <th> +slug: Web/HTML/Elemento/th +translation_of: Web/HTML/Element/th +--- +<p><span class="seoSummary">El elemento <strong>HTML <code><th></code> </strong>define una celda como encabezado de un grupo de celdas en una tabla. La naturaleza exacta de este grupo está definida por los atributos {{htmlattrxref("scope", "th")}} y {{htmlattrxref("headers", "th")}}.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categorías de contenido</a></th> + <td>Ninguno</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td> + <div class="content-models"> + <div id="table-mdls">Contenido de flujo, pero sin encabezado, pie de página, contenido de seccionamiento, o contenido descendiente de encabezados</div> + </div> + </td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>La etiqueta de inicio es obligatoria.<br> + La etiqueta de cierre puede ser omitida si es inmediatamente seguida por el elemento {{HTMLElement("th")}} o {{HTMLElement("td")}} o si no hay más datos en su elemento padre.</td> + </tr> + <tr> + <th scope="row">Parents permítidos</th> + <td>Un elemento {{HTMLElement("tr")}}</td> + </tr> + <tr> + <th scope="row">Roles permítdos de ARIA</th> + <td>Cualquiera</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLTableHeaderCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo contiene una breve descripción del contenido de las celdas. Algunos agentes de usuario (e.g., a speech reader) pueden presentar esta descripción antes que el propio contenido.</dd> + <dd> + <div class="note"><strong>Nota de uso: </strong>No uses este atributo, ya que se ha vuelto obsoleto en el último estandar. Alternativamente, puedes poner la descripción abreviada dentro de la celda y colocarla el largo contenido en el atributo de <strong>title</strong>.</div> + </dd> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo enumerado especifica cómo se tratará el alineado horizontal de la celda. Los valores posibles son: + <ul> + <li><code>left</code>: El contenido se alinea a la izquierda de la celda.</li> + <li><code>center</code>: El contenido se centra en la celda.</li> + <li><code>right</code>: El contenido se alinea a la derecha de la celda.</li> + <li><code>justify</code> (solo con texto): El contenido se alarga para ocupar todo el ancho de la celda.</li> + <li><code>char</code> (solo con texto): El contenido es alineado a un caracter dentro de <code><th></code> con el offset mínimo. Este caracter esta definido por los atributos {{htmlattrxref("char", "th")}} y {{htmlattrxref("charoff", "th")}}.</li> + </ul> + + <p>El valor por defecto cuando no se especifica este atributo es <code>left</code>.</p> + + <div class="note"> + <p><strong>Nota: </strong>No usar este atributo, ya que está obsoleto en el último estándar.</p> + + <ul> + <li>Para lograr el mismo efecto que con los valores <code>left</code>, <code>center</code>, <code>right </code>o <code>justify</code>, aplicar la propiedad CSS {{cssxref("text-align")}} al elemento.</li> + <li>Para lograr el mismo efecto que con el valor <code>char</code>, dar a la propiedad {{cssxref("text-align")}} el mismo valor que usarías para {{htmlattrxref("char", "th")}}. {{unimplemented_inline}} in CSS3.</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo contiene una lista de cadenas separadas por espacios. Cada cadena es el <code>id</code> de un grupo de celdas a las que se les aplica esta cabecera. + <div class="note"><strong>Nota: </strong>Este atributo está obsoleto en el último estándar y no debe usarse. Puedes sustituirlo por {{htmlattrxref("scope", "th")}}.</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>Este atributo define el color de fondo de cada celda en una columna. Consiste en una código hexadecimal de 6 digitos, con un prefijo '#'. Este atributo puede usarse con uno de los 16 colores predefinidos: + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Nota:</strong> No usar este atributo, ya que no es un estándar y sólo esta implementado en algunas versiones de Microsoft Internet Explorer. El elemento {{HTMLElement("th")}} debe estilizarse usando <a href="/en-US/docs/CSS">CSS</a>. Para crear un efecto similar usa la propiedad {{cssxref("background-color")}}. </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>El contenido de la celda se alinea con un caracter en el elemento <code><th></code>. Los valores típicos incluyen un punto (.) para alinear números o valores monetarios. Si no se establece {{htmlattrxref("align", "th")}} como char, el atributo es ignorado. + <div class="note"><strong>Nota: </strong>No usar este atributo, ya que no está soportado por el último estándar. Para lograr el mismo efecto, puedes especificar el caracter como el primer valor de la propiedad {{cssxref("text-align")}}, {{unimplemented_inline}} en CSS3.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>This attribute is used to shift column data to the right of the character specified by the <strong>char</strong> attribute. Its value specifies the length of this shift. + <div class="note"><strong>Nota: </strong>No usar este atributo, ya que no está soportado por el último estándar.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>This attribute contains a positive integer value that indicates over how many columns a cell is extended. Its default value is <code>1.</code> If its value is set to <code>0</code>, the cell is extended to the last element of the {{HTMLElement("colgroup")}}. Values higher than 1000 are clipped down to 1000.</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>This attribute contains a list of space-separated strings, each corresponding to the <code>id</code> attributes of other {{HTMLElement("th")}} elements that relate to this element.</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>This attribute contains a positive integer value that indicates over how many rows a cells is extended. Its default value is <code>1.</code> If its value is set to <code>0</code>, the cell is extended to the last element of the table sections ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}}). Values higher than 65534 are clipped down to 65534.</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>This enumerated attribute defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. It may have the following values: + <ul> + <li><code>row</code>: The header relates to all cells of the row it belongs to.</li> + <li><code>col</code>: The header relates to all cells of the column it belongs to.</li> + <li><code>rowgroup</code>: The header belongs to a rowgroup and relates to all of its cells. These cells can be placed to the right or the left of the header, depending on the value of the <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute in the {{HTMLElement("table")}} element.</li> + <li><code>colgroup</code>: The header belongs to a colgroup and relates to all of its cells.</li> + <li><code>auto</code></li> + </ul> + </dd> + <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> + <dd>This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are: + <ul> + <li><code>baseline</code>: Positions the text near the bottom of the cell and aligns it with the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as <code>bottom</code>.</li> + <li><code>bottom</code>: Positions the text near the bottom of the cell.</li> + <li><code>middle</code>: Centers the text in the cell.</li> + <li>and <code>top</code>: Positions the text near the top of the cell.</li> + </ul> + + <div class="note"><strong>Usage Note: </strong>Do not use this attribute as it is no longer supported by the latest standard: use the CSS {{cssxref("vertical-align")}} property instead.</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt> + <dd>This attribute is used to define a recommended cell width. Additional space can be added with the <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> properties and the width of the {{HTMLElement("col")}} element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed. + <div class="note"><strong>Usage Note: </strong>Do not use this attribute in the latest standard: use the CSS {{cssxref("width")}} property instead.</div> + </dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>See {{HTMLElement("table")}} for examples on <code><th></code>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See {{bug(915)}}.</p> + +<p>[2] See {{bug(2212)}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/time/index.html b/files/es/web/html/elemento/time/index.html new file mode 100644 index 0000000000..8216d3b167 --- /dev/null +++ b/files/es/web/html/elemento/time/index.html @@ -0,0 +1,170 @@ +--- +title: time +slug: Web/HTML/Elemento/time +tags: + - Elemento + - Fecha + - HTML + - HTML5 + - Hora + - Referencia + - Web +translation_of: Web/HTML/Element/time +--- +<p>El <strong>elemento HTML <code><time></code></strong> representa un periodo específico en el tiempo. Puede incluir el atributo <code>datetime</code> para convertir las fechas en un formato interno legible por un ordenador, permitiendo mejores resultados en los motores de búsqueda o características personalizadas como recordatorios.</p> + +<p>Puede representar uno de los contenidos siguientes:</p> + +<ul> + <li>Una hora en formato de 24 horas</li> + <li>Una fecha precisa en el <a class="external" href="https://es.wikipedia.org/wiki/Calendario_gregoriano">Calendario Gregoriano</a> (con hora y zona horaria opcionales)</li> + <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">Un periodo de tiempo válido</a></li> +</ul> + +<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-standard")}}</div> + +<p class="hidden">La fuente de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si desea contribuir al projecto, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíe su solicitud de extracción (pull request).</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías de contenido</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>, contenido palpable.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>Ninguna; tanto la etiqueta de inicio como de fin son obligatorias.</td> + </tr> + <tr> + <th scope="row">Padres permitidos</th> + <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td> + </tr> + <tr> + <th scope="row">Roles permitidos en ARIA</th> + <td>Cualquiera</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLTimeElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Como todos los elementos de HTML, este elemento soporta los <a href="https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>Este atributo indica la hora y/o fecha del elemento y debe estar escrito en uno de los formatos que se muestran posteriomente.</dd> +</dl> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<p>Este elemento es para presentar fechas y horas en un formato legible por el equipo. Por ejemplo, este puede ayudar a un agente de usuario ofrecer añadir un evento al calendario del usuario.</p> + +<p>Este elemento no debe ser usado para fechas anteriores a la introducción del calendario Gregoriano (debido a complicaciones en el cálculo de dichas fechas).</p> + +<p>El valor de fecha y hora (el valor legible por el equipo) es el valor del atributo del elemento <code>datetime</code>, que debe estar en el formato correcto (vea más adelante). Si el elemento no tiene un atributo <code>datetime</code>, <strong>no debe tener ningún elemento descendiente</strong>, y el valor datetime es el contenido de texto del hijo del elemento.</p> + +<h3 id="Valores_datetime_válidos">Valores datetime válidos</h3> + +<dl> + <dt>una cadena válida de año</dt> + <dd><code>2011</code></dd> + <dd><code>0001</code></dd> + <dt>una cadena válida de mes</dt> + <dd><code>2011-11</code></dd> + <dt>una cadena válida de fecha</dt> + <dd><code>2011-11-18</code></dd> + <dt>una cadena de fecha sin año válida</dt> + <dd><code>11-18</code></dd> + <dt>una cadena de semana válida</dt> + <dd><code>2011-W47</code></dd> + <dt>una cadena de hora válida</dt> + <dd><code>14:54</code></dd> + <dd><code>14:54:39</code></dd> + <dd><code>14:54:39.929</code></dd> + <dt>una cadena de fecha y hora local válida</dt> + <dd><code>2011-11-18T14:54:39.929</code></dd> + <dd><code>2011-11-18 14:54:39.929</code></dd> + <dt>una cadena de fecha y hora global válida</dt> + <dd><code>2011-11-18T14:54:39.929Z</code></dd> + <dd><code>2011-11-18T14:54:39.929-0400</code></dd> + <dd><code>2011-11-18T14:54:39.929-04:00</code></dd> + <dd><code>2011-11-18 14:54:39.929Z</code></dd> + <dd><code>2011-11-18 14:54:39.929-0400</code></dd> + <dd><code>2011-11-18 14:54:39.929-04:00</code></dd> + <dt>una cadena valida de duración</dt> + <dd><code>PT4H18M3S</code></dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Simple">Ejemplo Simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>El concierto empieza a las <time>20:00</time>.</p> +</pre> + +<h4 id="Output">Output</h4> + +<p>{{ EmbedLiveSample('Simple_example', 250, 60) }}</p> + +<h3 id="Datetime_example" name="Datetime_example">Ejemplo con <code>datetime</code></h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>El concierto fué el <time + datetime="2001-05-15T19:00">15 de Mayo</time>.</p> +</pre> + +<h4 id="Output_2">Output</h4> + +<p>{{ EmbedLiveSample('Datetime_example', 250, 60) }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Sin cambios desde {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Sin cambios desde {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada con información estructurada. Si desea contribuir, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe su pull request.</div> + +<p>{{Compat("html.elements.time")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El elemento {{HTMLElement("data")}}, permite señalizar otro tipo de valores.</li> +</ul> diff --git a/files/es/web/html/elemento/tipos_de_elementos/index.html b/files/es/web/html/elemento/tipos_de_elementos/index.html new file mode 100644 index 0000000000..e93752b734 --- /dev/null +++ b/files/es/web/html/elemento/tipos_de_elementos/index.html @@ -0,0 +1,119 @@ +--- +title: Tipos de elementos +slug: Web/HTML/Elemento/Tipos_de_elementos +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +--- +<p>Los elementos se pueden agrupan de varias manera, aquí ofrecenos las siguientes: formal, estructural y funcional.</p> + +<h2 id="Seg.C3.BAn_el_doctype" name="Seg.C3.BAn_el_doctype">Según el doctype</h2> + +<p>Todo documento HTML debe tener un doctype, en el doctype se indica la dtd que se aplica al documento. La dtd es un archivo que, entre otras cosas, indica qué elementos pueden usarse en el documento, o cuales son sus atributos.</p> + +<p>Los doctypes válidos en HTML 4.01 son tres:</p> + +<h3 id="Para_marcos" name="Para_marcos">Para marcos</h3> + +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" + "<a class="external" href="http://www.w3.org/TR/html4/frameset.dtd" rel="freelink">http://www.w3.org/TR/html4/frameset.dtd</a>"> +</pre> + +<p>Con este doctype pueden usarse todos los elementos del html.</p> + +<h3 id="De_transici.C3.B3n" name="De_transici.C3.B3n">De transición</h3> + +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "<a class="external" href="http://www.w3.org/TR/html4/loose.dtd" rel="freelink">http://www.w3.org/TR/html4/loose.dtd</a>"> +</pre> + +<p>Pueden usarse todos los elementos <strong>menos</strong> los especificos de marcos que son: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a></p> + +<h3 id="Estrictos" name="Estrictos">Estrictos</h3> + +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "<a class="external" href="http://www.w3.org/TR/html4/strict.dtd" rel="freelink">http://www.w3.org/TR/html4/strict.dtd</a>"> +</pre> + +<p>Con este doctype pueden usarse todos los elementos <strong>menos</strong> los específicos de los marcos: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a> <a href="/es/docs/HTML/Elemento/menu">menu</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a> <a href="/es/docs/HTML/Elemento/u">u</a></p> + +<h2 id="Seg.C3.BAn_su_estructura" name="Seg.C3.BAn_su_estructura">Según su estructura</h2> + +<p>Se dividen en tres grupos: básicos, de cabecera y de cuerpo.</p> + +<h3 id="Los_elementos_b.C3.A1sicos" name="Los_elementos_b.C3.A1sicos">Los elementos básicos</h3> + +<p>Son los elemento que conforman la columna vertebral de un documento html:</p> + +<dl> + <dt>Para un documento normal</dt> + <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/body">body</a></dd> +</dl> + +<dl> + <dt>para uno de marcos</dt> + <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> <a href="/es/docs/HTML/Elemento/frame">frame</a></dd> +</dl> + +<h3 id="De_cabecera" name="De_cabecera">De cabecera</h3> + +<p>Los de cabecera contienen la información necesaria para el correcto funcionamiento del documento.</p> + +<dl> + <dt>Elementos de cabecera son</dt> + <dd> </dd> + <dd>El obligatorio: <a href="/es/docs/HTML/Elemento/title">title</a></dd> + <dd>Los opcionales: <a href="/es/docs/HTML/Elemento/base">base</a> <a href="/es/docs/HTML/Elemento/meta">meta</a> <a href="/es/docs/HTML/Elemento/link">link</a></dd> + <dd>Los mixtos: <a href="/es/docs/HTML/Elemento/style">style</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/object">object</a> y el transicional: <a href="/es/docs/HTML/Elemento/isindex">isindex</a>. Estos elementos pueden actuar como elementos de cabecera y de cuerpo.</dd> +</dl> + +<h3 id="De_cuerpo" name="De_cuerpo">De cuerpo</h3> + +<p>Son los que estructuran el contenido del documento, pueden clasificarse en dos o tres grupos, los que forman parte del flujo del documento, estos son los elementos en bloque y los elementos en línea; y los que no forman parte directa del flujo.</p> + +<h4 id="En_bloque" name="En_bloque">En bloque</h4> + +<dl> + <dt>Elementos en bloque son</dt> + <dd> </dd> + <dd><a href="/es/docs/HTML/Elemento/p">p</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> <a href="/es/docs/HTML/Elemento/div">div</a> <a href="/es/docs/HTML/Elemento/address">address</a> <a href="/es/docs/HTML/Elemento/hr">hr</a> <a href="/es/docs/HTML/Elemento/blockquote">blockquote</a> <a href="/es/docs/HTML/Elemento/form">form</a> <a href="/es/docs/HTML/Elemento/table">table</a> <a href="/es/docs/HTML/Elemento/fieldset">fieldset</a> <a href="/es/docs/HTML/Elemento/pre">pre</a> <a href="/es/docs/HTML/Elemento/noscript">noscript</a> <a href="/es/docs/HTML/Elemento/noframes">noframes</a> Y los transicionales: <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a></dd> + <dd>Los elementos de encabezados: <a href="/es/docs/HTML/Elemento/h1">h1</a> <a href="/es/docs/HTML/Elemento/h2">h2</a> <a href="/es/docs/HTML/Elemento/h3">h3</a> <a href="/es/docs/HTML/Elemento/h4">h4</a> <a href="/es/docs/HTML/Elemento/h5">h5</a> <a href="/es/docs/HTML/Elemento/h6">h6</a></dd> + <dd>los elementos para listas: <a href="/es/docs/HTML/Elemento/ul">ul</a> y <a href="/es/docs/HTML/Elemento/ol">ol</a>. Y los transicionales: <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/menu">menu</a></dd> +</dl> + +<h4 id="En_l.C3.ADnea" name="En_l.C3.ADnea">En línea</h4> + +<dl> + <dt>Elementos en línea son</dt> + <dd> </dd> + <dd>Los elementos de frase: <a href="/es/docs/HTML/Elemento/abbr">abbr</a> <a href="/es/docs/HTML/Elemento/acronym">acronym</a> <a href="/es/docs/HTML/Elemento/cite">cite</a> <a href="/es/docs/HTML/Elemento/code">code</a> <a href="/es/docs/HTML/Elemento/em">em</a> <a href="/es/docs/HTML/Elemento/strong">strong</a> <a href="/es/docs/HTML/Elemento/dfn">dfn</a> <a href="/es/docs/HTML/Elemento/kbd">kbd</a> <a href="/es/docs/HTML/Elemento/samp">samp</a> <a href="/es/docs/HTML/Elemento/var">var</a></dd> + <dd>Los elementos de estilo de fuente: <a href="/es/docs/HTML/Elemento/b">b</a> <a href="/es/docs/HTML/Elemento/big">big</a> <a href="/es/docs/HTML/Elemento/i">i</a> <a href="/es/docs/HTML/Elemento/small">small</a> <a href="/es/docs/HTML/Elemento/tt">tt</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/u">u</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a></dd> + <dd>Los elementos especiales: <a href="/es/docs/HTML/Elemento/a">a</a> <a href="/es/docs/HTML/Elemento/bdo">bdo</a> <a href="/es/docs/HTML/Elemento/br">br</a> <a href="/es/docs/HTML/Elemento/img">img</a> <a href="/es/docs/HTML/Elemento/map">map</a> <a href="/es/docs/HTML/Elemento/object">object</a> <a href="/es/docs/HTML/Elemento/q">q</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/span">span</a> <a href="/es/docs/HTML/Elemento/sub">sub</a> <a href="/es/docs/HTML/Elemento/sup">sup</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/iframe">iframe</a></dd> + <dd>Los elementos de controles de formulario: <a href="/es/docs/HTML/Elemento/button">button</a> <a href="/es/docs/HTML/Elemento/input">input</a> <a href="/es/docs/HTML/Elemento/label">label</a> <a href="/es/docs/HTML/Elemento/select">select</a> <a href="/es/docs/HTML/Elemento/textarea">textarea</a></dd> +</dl> + +<h4 id="Ni_en_bloque_ni_en_l.C3.ADnea" name="Ni_en_bloque_ni_en_l.C3.ADnea">Ni en bloque ni en línea</h4> + +<p>Son los elementos que no forman parte del flujo por que son elementos subordinados a otros elementos.</p> + +<dl> + <dt>Elementos subordinados son</dt> + <dd> </dd> + <dd>Subordinados a table: <a href="/es/docs/HTML/Elemento/caption">caption</a> <a href="/es/docs/HTML/Elemento/tr">tr</a> <a href="/es/docs/HTML/Elemento/th">th</a> <a href="/es/docs/HTML/Elemento/td">td</a> <a href="/es/docs/HTML/Elemento/thead">thead</a> <a href="/es/docs/HTML/Elemento/tbody">tbody</a> <a href="/es/docs/HTML/Elemento/tfoot">tfoot</a> <a href="/es/docs/HTML/Elemento/col">col</a> <a href="/es/docs/HTML/Elemento/colgroup">colgroup</a></dd> + <dd>Subordinados de listas: <a href="/es/docs/HTML/Elemento/li">li</a> <a href="/es/docs/HTML/Elemento/dd">dd</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> Subordinados a select son: <a href="/es/docs/HTML/Elemento/optgroup">optgroup</a> <a href="/es/docs/HTML/Elemento/option">option</a></dd> + <dd>Por último, <a href="/es/docs/HTML/Elemento/area">area</a> subordinado a map. <a href="/es/docs/HTML/Elemento/param">param</a> subordinado a object. y <a href="/es/docs/HTML/Elemento/legend">legend</a> subordinado a fieldset.</dd> +</dl> + +<h4 id="En_bloque_y_en_l.C3.ADnea" name="En_bloque_y_en_l.C3.ADnea">En bloque y en línea</h4> + +<p>Los elementos <a href="/es/docs/HTML/Elemento/ins">ins</a> y <a href="/es/docs/HTML/Elemento/del">del</a> pueden ser elementos en línea o en bloque según convenga.</p> + +<h2 id="Seg.C3.BAn_su_funci.C3.B3n" name="Seg.C3.BAn_su_funci.C3.B3n">Según su función</h2> + + +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>Cómo ayudar</a>.</p> +</div> diff --git a/files/es/web/html/elemento/title/index.html b/files/es/web/html/elemento/title/index.html new file mode 100644 index 0000000000..978149f8a6 --- /dev/null +++ b/files/es/web/html/elemento/title/index.html @@ -0,0 +1,54 @@ +--- +title: title +slug: Web/HTML/Elemento/title +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/title +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Indica el título del documento.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <title> y </title> (ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>:</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#contenido_de_cabecera">Elemento de contenido de cabecera</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: texto y entidades de caracteres, pero no puede contener código.</dd> +</dl> + +<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5> + +<dl> + <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd> +</dl> + +<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene." name="Atributos_Espec.C3.ADficos_-_No_tiene.">Atributos Específicos - No tiene.</h5> + +<h5 id="Atributos_Transicionales_-_No_tiene." name="Atributos_Transicionales_-_No_tiene.">Atributos Transicionales - No tiene.</h5> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre><head> +<title>Ejemplo de uso del elemento title</title> +... otros elementos de cabecera... +</head> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p>Todos los documentos deben tener un título, por lo tanto este elemento <strong>es obligarorio</strong> y debe estar ubicado dentro del elemento head.</p> + +<p>El contenido de title suele ser mostrado en la barra de título de la ventana del navegador </p> diff --git a/files/es/web/html/elemento/tr/index.html b/files/es/web/html/elemento/tr/index.html new file mode 100644 index 0000000000..6e57c8d5e0 --- /dev/null +++ b/files/es/web/html/elemento/tr/index.html @@ -0,0 +1,232 @@ +--- +title: <tr> +slug: Web/HTML/Elemento/tr +tags: + - Element + - Elemento + - HTML + - Reference + - Referencia + - Tabla + - Tablas + - Web +translation_of: Web/HTML/Element/tr +--- +<h2 id="Resumen">Resumen</h2> + +<p>El elemento HTML <em>fila de tabla</em> (<em>table row</em>) <code><tr></code> define una fila de celdas en una tabla. Estas pueden ser una mezcla de elementos {{HTMLElement("td")}} y {{HTMLElement("th")}}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td> + <td>Ninguno</td> + </tr> + <tr> + <td>Contenido permitido</td> + <td>Cero o más {{HTMLElement("td")}} o elementos {{HTMLElement("th")}}, o una mezcla de ellos</td> + </tr> + <tr> + <td> + <p>Omisión de Etiqueta </p> + </td> + <td>La etiqueta de inicio es obligatoria. La etiqueta final puede ser omitida si el elemento {{HTMLElement("tr")}} va inmediatamente seguido por un elemento {{HTMLElement("tr")}}, o si el grupo de tabla pariente ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} o el elemento {{HTMLElement("tfoot")}}) no tiene mas contenido</td> + </tr> + <tr> + <td>Elementos padres permitidos</td> + <td>{{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} o el elemento {{HTMLElement("tfoot")}}</td> + </tr> + <tr> + <td>Documento de normativa</td> + <td><a class="external" href="http://www.whatwg.org/html/#the-tr-element">HTML, "The <code>tr</code> element"</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p><span style="line-height: 21px;">Este elemento incluye los </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo enumerado especifica como será gestionado el alineamiento horizontal del contenido de cada celda. Hay varios valores: + <ul> + <li><font face="Consolas, Liberation Mono, Courier, monospace">left</font>, alinea el contenidoa la izquierda de las celdas</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">center</font>, centra el contenido en las celdas</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">right</font>, alinea el contenido a la derecha de las celdas</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">justify</font>, amplia los espacios en el contenido textual de hecho el contenido es justificado in las celdas</li> + <li><code>char</code>, alinea el contenido textual en un carácter especial con una mínima inclinación definida por el {{htmlattrxref("char", "tr")}} y {{htmlattrxref("charoff", "tr")}} atributos {{unimplemented_inline("2212")}}</li> + </ul> + + <p>Si este atributo no está establecido, se hereda el valor del nodo principal.</p> + + <div class="note"><strong>Nota: No utilice este atributo, ya que es obsoleta (no soportado) en el último estándar</strong>. + + <ul> + <li>Para lograr el mismo efecto que los valores <code>left</code>, <code>center</code>, <code>right</code> o <code>justify</code>, utilice la propiedad CSS {{cssxref("text-align")}}.</li> + <li>Para lograr el mismo efecto que el valor char, en CSS3, puede utilizar el valor de la {{htmlattrxref("char", "tr")}} como el valor de la {{cssxref("text-align")}} propiedad {{unimplemented_inline}}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo define el color de fondo de cada celda de la fila. Puede ser un código de #RRGGBB o una palabra clave de color de SVG. + <div class="note"><strong>Nota de uso:</strong> el elemento {{HTMLElement("tr")}} debe ser de estilo con CSS. Para dar un efecto similar al atributo bgcolor, utilice la propiedad CSS {{cssxref("background-color")}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo es utilizado para establecer el caracter para alinear las celdas de una columna. Los valores típicos para éste incluyen un punto (.) al intentar alinear los números o valores monetarios. Si {{htmlattrxref("align", "tr")}} no se ha ajustado a char, este atributo se ignora. + <div class="note"><strong>Nota:</strong> No utilice este atributo, ya que es obsoleta (y no es compatible) en el último estándar<strong>.</strong> Para lograr el mismo efecto que el {{htmlattrxref("char", "tr")}}, en CSS3, puedes utilizar el juego de carácteres utilizando el atributo {{htmlattrxref("char", "tr")}} como el valor de la referencia externa {{cssxref("text-align")}} propiedad {{unimplemented_inline}}.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo se utiliza para indicar el número de caracteres para compensar los datos de la columna de los carácteres de alineación especificado por el atributo char. + <div class="note"><strong>Nota:</strong> No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar.</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt> + <dd>Este atributo especifica la alineación vertical del texto dentro de cada fila de las celdas de la cabecera de la tabla. Los valores posibles para este atributo son: + <ul> + <li><code>baseline</code>, que pondrá el texto tan cerca del fondo de la celda, ya que es posible, pero corresponda con el <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> de los caráctere en lugar de la parte inferior de ellos. Si los carácteres son todos del tamaño, esto tiene el mismo efecto que la parte inferior.</li> + <li><code>bottom</code>,que pondrá el texto tan cerca de la parte inferior de la célula como sae posible;</li> + <li><code>middle</code>,que centrará el texto en la celda;</li> + <li>y <code>top</code>, que pondrá el texto como cerca de la parte superior de la célula como es posible.</li> + </ul> + + <div class="note"><strong>Nota:</strong> No utilice este atributo, ya que está obsoleto (y no es compatible) en el último estándar: {{cssxref("vertical-align")}} en su lugar establecer la propiedad CSS en él.</div> + </dd> +</dl> + +<h2 id="Interfaz_DOM">Interfaz DOM</h2> + +<p>Este elemento implementa el interfaz{{domxref("HTMLTableRowElement")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver {{HTMLElement("table")}} para ejemplos de <code><tr></code>.</p> + +<h2 id="Compatibilidad_con_Navegador">Compatibilidad con Navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>1.0</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>1.0</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>align/valign</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>char/charoff</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See {{bug(915)}}.</p> + +<p>[2] See {{bug(2212)}}.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otros elementos relacionados con tablas HTML: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li> + <li>Las propiedades CSS y pseudo-clases que pueden ser especialmente útiles para el estilo del elemento <tr>: + <ul> + <li>El {{cssxref(":nth-child")}} pseudo-clase para establecer la alineación en las células de la columna;</li> + <li>El {{cssxref("text-align")}} propiedad para alinear todas las células contenidos en el mismo carácter, como '.'. <</li> + </ul> + </li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/es/web/html/elemento/track/index.html b/files/es/web/html/elemento/track/index.html new file mode 100644 index 0000000000..e05d9f0a9e --- /dev/null +++ b/files/es/web/html/elemento/track/index.html @@ -0,0 +1,179 @@ +--- +title: '<track>: El elemento para pistas de texto incrustado' +slug: Web/HTML/Elemento/track +tags: + - Accessibility + - Contenido HTML insertado + - Elemento + - HTML + - HTML5 + - Multimedia + - Pistas de texto + - Reference + - Web + - a11y + - anotaciones + - track +translation_of: Web/HTML/Element/track +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">El <strong>elmento HTML <code><track></code></strong> es usado como hijo de los elementos multimedia, {{HTMLElement("audio")}} y {{HTMLElement("video")}}. Este te deja especificar pistas de texto temporizadas (o datos basados en el tiempo), por ejemplo para manejar automáticamente los subtítulos.</span> Las pistas de texto usan el <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">formato WebVTT</a> (archivos <code>.vtt</code>) o de pistas de texto para la web.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div> + +<div class="hidden">La fuente para este ejemplo interactivo esta alojada en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una pull request.</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías del contenido</a></th> + <td>Ninguna</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno, es un {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Omision de etiquetas</th> + <td>Como es un elemento vacío, la etiqueta de inicio debe estar presente y la etiqueta de cierre no debe estar presente.</td> + </tr> + <tr> + <th scope="row">Padres permitidos</th> + <td>Un elemento multimedia, {{HTMLElement("audio")}} o {{HTMLElement("video")}}.</td> + </tr> + <tr> + <th scope="row">Rol ARIA implícito</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No hay rol correspondiente</a>.</td> + </tr> + <tr> + <th scope="row">Roles ARIA permitidos</th> + <td>No hay <code>role</code>s permitidos.</td> + </tr> + <tr> + <th scope="row">Intefaz DOM</th> + <td>{{domxref("HTMLTrackElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p> + +<dl> + <dt>{{htmlattrdef("default")}}</dt> + <dd>Este atributo indica que esta pista de texto debe estar activada salvo que las preferencias del usuario indiquen que otra pista de texto es más apropiada. Este atributo solo puede ser usado en un elemento <code>track</code> por cada elemento multimedia.</dd> + <dt>{{htmlattrdef("kind")}}</dt> + <dd>Este atributo indica como esta pensada para usarse la pista de texto. Si lo omites el valor por defecto es <code>subtitles</code>. If the attribute contiene un valor invalido usará el valor <code>metadata</code> (Las versiones de Chrome anteriores a la 52 tratan un valor inválido como <code>subtitles</code>). Las siguientes palabras clave están permitidas: + <ul> + <li><code>subtitles</code> + <ul> + <li>Los subtítulos proporciona la traducción de contenido que no puede ser entendido por el espéctador. Por ejemplo diálogos o texto que no está en español en una película en español.</li> + <li>Los subtítulos puede contener información adicional, normalmente información extra sobre el escenario. Por ejemplo el texto al principio de las películas de Stars Wars, o la fecha, el tiempo, y la ubicación de una escena.</li> + </ul> + </li> + <li><code>captions</code> + <ul> + <li>Este valor provee una transcripción y posiblemente una traducción del audio.</li> + <li>Puede incluir información no verbal importante como anotaciones sobre la música o efectos de sonido. Tambien puede indicar la fuente de la anotación (por ejemplo: música, texto, caracteres).</li> + <li>Es adecuado para usuarios sordos o cuando el sonido está apagado.</li> + </ul> + </li> + <li><code>descriptions</code> + <ul> + <li>Descripción textual del conenido del video.</li> + <li>Adecuado para usuarios ciegos o cuando el video no se puede ver.</li> + </ul> + </li> + <li><code>chapters</code> + <ul> + <li>Los títulos de los capítulos estan pensados para ser usados cuando el usuario esta navegando a través del recurso multimedia.</li> + </ul> + </li> + <li><code>metadata</code> + <ul> + <li>Pistas de texto usadas por programas. No visibles para el usuario.</li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>Da un título a la pista de texto que puedan entender los usuarios y que es usado por el navegador cuando esta mostrando la lista de pistas de texto disponibles.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Señala la dirección de la pista de texto (archivo <code>.vtt</code>). Debe ser una URL valida. Este atributo debe ser especificado y su URL debe tener el mismo origen que el documento, salvo que el elemento {{HTMLElement("audio")}} o {{HTMLElement("video")}} que sea padre del elemento <code>track</code> tenga un atributo <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>.</dd> + <dt>{{htmlattrdef("srclang")}}</dt> + <dd>Señala el idioma de los datos de la pista de texto. Debe ser una etiqueta de idioma <a href="https://r12a.github.io/app-subtags/">BCP 47</a> valida. Si al atributo <code>kind</code> se le da el valor de <code>subtitles</code>, entonces <code>srclang</code> debe ser definido.</dd> +</dl> + +<h2 id="Notas_de_uso">Notas de uso</h2> + +<h3 id="Tipos_de_datos_para_pistas_de_texto">Tipos de datos para pistas de texto</h3> + +<p>El tipo de dato que el elemento <code>track</code> añade al elemento multimedia es fijado en el atributo <code>kind</code>, que puede tener los valores de <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> or <code>metadata</code>. El elemento apunta a un archivo fuente que contiene texto temporizado que el navegador muestra cuando el usuario solicita datos adicionales.</p> + +<p>Un elemento <code>media</code> no puede tener mas de un elemento <code>track</code> con el mismo valor en los atributos <code>kind</code>, <code>srclang</code>, y <code>label</code> a la vez.</p> + +<h3 id="Detectando_cambios_en_las_anotaciones">Detectando cambios en las anotaciones</h3> + +<p>{{page("/es/docs/Web/API/TextTrack/cuechange_event", "En el elemento track")}}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html notranslate"><video controls poster="/imagenes/ejemplo.gif"> + <source src="ejemplo.mp4" type="video/mp4"> + <source src="ejemplo.ogv" type="video/ogv"> + <track kind="captions" src="captionsDeEjemplo.vtt" srclang="en"> + <track kind="descriptions" src="descripciónDeEjemplo.vtt" srclang="en"> + <track kind="chapters" src="capítulosDeEjemplo.vtt" srclang="en"> + <track kind="subtitles" src="subtítulosDeEjemplo_de.vtt" srclang="de"> + <track kind="subtitles" src="subtítulosDeEjemplo_en.vtt" srclang="en"> + <track kind="subtitles" src="subtítulosDeEjemplo_ja.vtt" srclang="ja"> + <track kind="subtitles" src="subtítulosDeEjemplo_oz.vtt" srclang="oz"> + <track kind="metadata" src="etapaClave1.vtt" srclang="en" + label="Etapa clave 1"> + <track kind="metadata" src="etapaClave2.vtt" srclang="en" + label="Etapa clave 2"> + <track kind="metadata" src="etapaClave3.vtt" srclang="en" + label="Etapa clave 3"> + <!-- Fallback --> + ... +</video> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página está generada desde datos estructurados. Si quieres contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div> + +<p>{{Compat("html.elements.track")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/HTML/WebVTT">El formato WebVTT para pistas de texto</a></li> + <li>{{domxref("HTMLMediaElement.textTracks")}}</li> +</ul> diff --git a/files/es/web/html/elemento/tt/index.html b/files/es/web/html/elemento/tt/index.html new file mode 100644 index 0000000000..3bdd50de49 --- /dev/null +++ b/files/es/web/html/elemento/tt/index.html @@ -0,0 +1,58 @@ +--- +title: tt +slug: Web/HTML/Elemento/tt +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/tt +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Muestra el texto marcado con una fuente de ancho fijo.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <tt> y </tt> (Ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">Elemento de estilo de fuente</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5> + +<ul> + <li>title (título del elemento)</li> + <li>style (información de estilo en línea)</li> +</ul> + +<dl> + <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd> + <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd> + <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd> +</dl> + +<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene" name="Atributos_Espec.C3.ADficos_-_No_tiene">Atributos Específicos - No tiene</h5> + +<h5 id="Atributos_Transicionales_-_No_tiene" name="Atributos_Transicionales_-_No_tiene">Atributos Transicionales - No tiene</h5> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"> <p> + Texto normal y... <tt>Texto con formato teletipo</tt> + </p> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p><span class="comment">de momento no funciona </span></p> diff --git a/files/es/web/html/elemento/u/index.html b/files/es/web/html/elemento/u/index.html new file mode 100644 index 0000000000..1a355b443d --- /dev/null +++ b/files/es/web/html/elemento/u/index.html @@ -0,0 +1,79 @@ +--- +title: u +slug: Web/HTML/Elemento/u +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/u +--- +<p> </p> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Muestra el texto subrayado.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <u> y </u> (Ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong> + + <dl> + <dd><a href="es/HTML/Elemento/Tipos_de_elementos#de_estilo_de_fuente">de estilo de fuente</a>.</dd> + <dd><a href="es/HTML/Elemento/Tipos_de_elementos#Desaprobado">Desaprobado</a></dd> + </dl> + </dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5> + +<ul> + <li>title (título del elemento)</li> + <li>style (información de estilo en línea)</li> +</ul> + +<dl> + <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd> + <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd> + <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd> +</dl> + +<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene" name="Atributos_Espec.C3.ADficos_-_No_tiene">Atributos Específicos - No tiene</h5> + +<h5 id="Atributos_Transicionales_-_No_tiene" name="Atributos_Transicionales_-_No_tiene">Atributos Transicionales - No tiene</h5> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>Uso de u:</p> + +<pre class="eval"> <p> + Texto normal y... <u>Texto subrayado</u> + </p> +</pre> + +<p>Uso de CSS:</p> + +<pre class="eval"> <p> + Texto normal y... <span style='text-decoration: underline'>Texto subrayado</span> + </p> +</pre> + +<h3 id="Comentarios" name="Comentarios">Comentarios</h3> + +<p>Para obtener el mismo resultado puede usarse La propiedad CSS text-decoration: underline;</p> + +<p>Si por algún motivo necesita usar elementos desaprobados como u, recuerde que debe declarar un DOCTYPE transicional.</p> + +<div class="warning">DESAPROBADO</div> + +<p><span class="comment">de momento no funciona </span></p> diff --git a/files/es/web/html/elemento/ul/index.html b/files/es/web/html/elemento/ul/index.html new file mode 100644 index 0000000000..6279c722bc --- /dev/null +++ b/files/es/web/html/elemento/ul/index.html @@ -0,0 +1,151 @@ +--- +title: ul +slug: Web/HTML/Elemento/ul +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/ul +--- +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p><strong>ul</strong> de "unordered list" -<em>lista no ordenada</em> . crea una lista no ordenada.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <code><ul> y </ul></code> (ambas obligatorias).</dd> + <dd><strong>Está definido como</strong>: Elemento <a href="es/HTML/Elemento/Tipos_de_elementos#delista">para listas</a>.</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: En bloque.</dd> + <dd><strong>Puede contener</strong>: Uno o más elementos <a href="es/HTML/Elemento/li">li</a></dd> +</dl> + +<h4 id="Atributos" name="Atributos">Atributos</h4> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + <tr> + <th colspan="3">Genéricos</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-title"><span style="color: green;">title </span></a></td> + <td>Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".</td> + <td>Texto legible por personas. Sensible a <abbr title="diferencia entre Mayúsculas y minúsculas">M/m.</abbr>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-id"><span style="color: green;">id </span></a></td> + <td>Le da un nombre al elemento que lo diferencia de todos los demás del documento.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-id">nombre único</a>. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/global.html#adef-class"><span style="color: green;">class </span></a></td> + <td>Asigna nombres de clases al elemento. Por defecto, clases CSS.</td> + <td>Lista de clases separadas por espacio en blanco. Sensible a <abbr title="diferencia entre Máyusculas y minúsculas">M/m.</abbr> Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html#adef-style"><span style="color: green;">style </span></a></td> + <td>Permite especificar <a class="external" href="http://html.conclase.net/w3c/html401-es/present/styles.html">información de estilo</a>. Por defecto, estilos CSS.</td> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-style">Declaraciones de estilo</a>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-lang"><span style="color: green;">lang </span></a></td> + <td>Información sobre el <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">idioma del contenido</a> del elemento y del valor de sus atributos.</td> + <td>Un <a class="external" href="http://html.conclase.net/w3c/html401-es/types.html#type-langcode">código de idioma</a>. Por defecto: "desconocido". Lo fija el navegador.</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html#adef-dir"><span style="color: green;">dir </span></a></td> + <td>Indica la <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/dirlang.html">dirección de texto</a> y tablas.</td> + <td>Uno de los siguientes: <abbr title="Left-to-right"> 'ltr' </abbr> o <abbr title="Right-to-left"> 'rtl'. </abbr> Por defecto: En castellano 'ltr'. Lo fija el navegador.</td> + </tr> + <tr> + <td colspan="3"><a class="external" href="http://html.conclase.net/w3c/html401-es/interact/scripts.html#events"><span style="color: green;">Eventos:</span></a> <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> + </tr> + <tr> + <th colspan="3">Específicos</th> + </tr> + <tr> + <td colspan="3">No tiene</td> + </tr> + <tr> + <th colspan="3">De transición</th> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/lists.html#adef-type-UL"><code style="color: green;">type</code></a></td> + <td>Indica el estilo de los items de la lista.</td> + <td>Uno de los siguientes: <code>'disc', 'square', o 'circle'</code>. Por defecto: depende del anidamiento, lo fija el navegador</td> + </tr> + <tr> + <td><a class="external" href="http://html.conclase.net/w3c/html401-es/struct/lists.html#adef-compact"><code style="color: green;">compact</code></a></td> + <td>Indica que la lista debe mostrase conpactada.</td> + <td>Solo puede ser: <code>'compact'</code>. Por defecto: Lo fija el navegador.</td> + </tr> + <tr> + <th>atributo</th> + <th>descripción</th> + <th>valor</th> + </tr> + </tbody> +</table> + +<h3 id="Ejemplos_de_uso" name="Ejemplos_de_uso">Ejemplos de uso</h3> + +<div class="highlight"> +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>El siguiente código:</p> + +<pre class="eval"><ul> + <li>Esto</li> + <li>Lo otro</li> + <li>Lo de más allá</li> +</ul> +</pre> + +<p>Se visualiza así:</p> + +<div style="border: solid silver 1px;"> +<ul> + <li>Esto</li> + <li>Lo otro</li> + <li>Lo de más allá</li> +</ul> +</div> +</div> + +<h3 id="Estilo_predeterminado" name="Estilo_predeterminado">Estilo predeterminado</h3> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Referencia" name="Referencia">Referencia</h3> + +<ul> + <li>El elemento <a class="external" href="http://html.conclase.net/w3c/html401-es/struct/lists.html#edef-UL"><strong>ul</strong> en la especificación</a> de html 4.01</li> +</ul> + +<p> </p> + +<h3 id="Soporte" name="Soporte">Soporte</h3> + +<p>Puede consultar esta <a class="external" href="http://www.webdevout.net/browser_support_html.php#support-html401-ul">comparativa</a>: IE 6 - IE 7 - FF 1.5 - OP 9.</p> + +<p> </p> + +<hr> +<div class="note"> +<p>Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.</p> + +<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>MDC:Como ayudar</a>.</p> +</div> + +<p><br> + <span class="comment">Categoría</span></p> + +<p><span class="comment">interwiki links</span></p> + +<p><span class="comment">automatismos</span></p> diff --git a/files/es/web/html/elemento/var/index.html b/files/es/web/html/elemento/var/index.html new file mode 100644 index 0000000000..dd29c31159 --- /dev/null +++ b/files/es/web/html/elemento/var/index.html @@ -0,0 +1,54 @@ +--- +title: var +slug: Web/HTML/Elemento/var +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/var +--- +<div>{{HTMLRef}}</div> + +<h3 id="Definici.C3.B3n" name="Definici.C3.B3n">Definición</h3> + +<p>Marca variables de programas y similares.</p> + +<dl> + <dd><strong>Sus etiquetas son</strong>: <var> y </var> (ambas obligatorias)</dd> +</dl> + +<dl> + <dd><strong>Crea una caja</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a>.</dd> +</dl> + +<dl> + <dd><strong>Está definido como</strong>: <a href="es/HTML/Elemento/Tipos_de_elementos#de_frase">Elemento de frase</a>.</dd> +</dl> + +<dl> + <dd><strong>Puede contener</strong>: cero o más elementos<a href="es/HTML/Elemento/Tipos_de_elementos#en_linea">en linea</a></dd> +</dl> + +<h5 id="Atributos_Gen.C3.A9ricos" name="Atributos_Gen.C3.A9ricos">Atributos Genéricos</h5> + +<ul> + <li>title (título del elemento)</li> + <li>style (información de estilo en línea)</li> +</ul> + +<dl> + <dd><strong>Identificadores</strong>: id, class (identificadores a nivel de documento)</dd> + <dd><strong>Idioma</strong>: lang (información sobre el idioma), dir (dirección del texto)</dd> + <dd><strong>Eventos</strong>: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.</dd> +</dl> + +<h5 id="Atributos_Espec.C3.ADficos_-_No_tiene." name="Atributos_Espec.C3.ADficos_-_No_tiene.">Atributos Específicos - No tiene.</h5> + +<h5 id="Atributos_Transicionales_-_No_tiene." name="Atributos_Transicionales_-_No_tiene.">Atributos Transicionales - No tiene.</h5> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval"><p> +el bucle no se detendrá hasta que <var>Faltan</var> sea igual a 0. +</p> +</pre> diff --git a/files/es/web/html/elemento/video/index.html b/files/es/web/html/elemento/video/index.html new file mode 100644 index 0000000000..e816c5db91 --- /dev/null +++ b/files/es/web/html/elemento/video/index.html @@ -0,0 +1,128 @@ +--- +title: video +slug: Web/HTML/Elemento/video +tags: + - HTML + - HTML5 + - Multimedia + - para_revisar +translation_of: Web/HTML/Element/video +--- +<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El elemento <code>video</code> se utiliza para incrustar vídeos en un documento HTML o XHTML.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para obtener una lista de formatos compatibles, consulta <a href="/es/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio" title="es/Formatos multimedia admitidos por los elementos de video y audio">Formatos multimedia admitidos por los elementos de audio y vídeo</a> .</span></span></p> + +<h2 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contexto de uso</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><a href="/en/HTML/Content_categories#transparent_content" title="en/HTML/Content categories#transparent content">Contenido transparente</a> , que contiene un atributo <strong>src</strong> o uno o más elementos {{ HTMLElement ("source") }}, seguidos por <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a> o <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">el contenido estático</a> , sin elementos <code> <video></code> ni {{ HTMLElement ("audio") }}.</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ninguna, deben estar presentes tanto las etiquetas de inicio como las de cierre</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cualquier elemento que acepte <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a> o cualquier otro elemento que acepte <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">contenido estático</a> .</span></span></td> + </tr> + <tr> + <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td> + <td><a class="external" href="http://www.w3.org/TR/html5/video.html#video" title="http://www.w3.org/TR/html5/video.html#video"><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.8.6</span></span></a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h2> + +<dl> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("autoplay") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">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.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("autobuffer") }} {{ Non-standard_inline() }} {{ obsolete_inline() }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un atributo booleano; si se especifica, el video comenzará automáticamente a almacenarse en el búfer, incluso si no está listo para reproducirse de forma automática.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se debe utilizar para los casos en los que se considera probable que el video se reproduzca (por ejemplo, si el usuario accedió a esa página específica para reproducir el video, no si hay un video insertado junto con otros contenidos). </span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El video se almacena en el búfer hasta que el caché de medios esté lleno.</span></span> + <div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota de implementación:</strong> aunque forma parte de los primeros borradores de la especificación HTML 5, el atributo <strong>autobuffer</strong> se ha eliminado en versiones posteriores.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Se ha quitado de Gecko 2.0 y otros navegadores, y en algunos nunca llegó a implementarse.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La especificación define un nuevo atributo enumerado, <strong>preload,</strong> para sustituir el atributo <strong>autobuffer,</strong> con una sintaxis diferente. {{ bug (548523) }}</span></span></div> + </dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("buffered") }} {{ gecko_minversion_inline("2.0") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este atributo contiene un objeto </span></span>{{ domxref("TimeRanges") }}<span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"> .</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("controls") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si está presente este atributo, Gecko ofrecerá controles para permitir que el usuario controle la reproducción de video, incluyendo volumen, búsqueda y pausar/reanudar reproducción.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("height") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La altura del área de visualización del vídeo en píxeles CSS.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("loop") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Un atributo booleano; si se especifica, al alcanzar el final del video, buscaremos automáticamente hasta el principio.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("preload") }} {{ gecko_minversion_inline("2.0") }} {{ bug(548523) }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">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 .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Puede tener uno de los siguientes valores:</span></span> + <ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><span style="font-family: courier new;">none</span>: 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.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><span style="font-family: courier new;">metadatos:</span> sugiere que aunque el autor piensa que el usuario no tendrá que consultar este video, es razonable capturar los metadatos (p. ej. longitud).</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><span style="font-family: courier new;">auto:</span> 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.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">la <em>cadena vacía:</em> que es un sinónimo del valor <span style="font-family: courier new;">auto</span>.</span></span></li> + </ul> + + <p><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a <span style="font-family: courier new;">metadata</span>.</span></span></p> + + <div class="note"><strong><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Notas de uso:</span></span></strong> + + <ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">El atributo <strong>autoplay</strong> tiene prioridad sobre éste si se desea reproducir automáticamente un video, el navegador obviamente tendrá que descargarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">La especificación permite establecer los atributos <strong>autoplay</strong> y <strong>preload</strong>.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La especificación no fuerza al navegador a seguir el valor de este atributo; es tan sólo una sugerencia.</span></span></li> + </ul> + </div> + </dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("poster") }} {{ gecko_minversion_inline("1.9.2") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una URL que indica un marco de póster para mostrar el resultado hasta que el usuario reproduzca o busque.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si este atributo no se especifica, no se muestra nada hasta que el primer cuadro está disponible, entonces se muestra el primer marco como el marco de póster.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("src") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La URL del vídeo que se va a insertar.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Es opcional; podrás optar, en su lugar, por el elemento {{ HTMLElement("source") }} dentro del bloque de vídeo para especificar el video que se va a incrustar.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ htmlattrdef("width") }}</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La anchura del área de visualización del vídeo en píxeles CSS.</span></span></dd> +</dl> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las compensaciones de tiempo se especifican actualmente como valores float que representan el número de segundos que se va a compensar.</span></span></p> + +<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> la definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.</span></span></div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><video src="videofile.ogg" autoplay poster="posterimage.jpg"> + Tu navegador no admite el elemento <code>video</code>. +</video> +</pre> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Reproduce un vídeo, comenzando tan pronto como la recepción de video sea suficiente para permitir la reproducción sin pausas para descargar más.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Mientras que el video comienza a reproducirse, se mostrará la imagen "posterimage.jpg" en su lugar.</span></span></p> + +<h2 id="Compatibilidad_con_servidores"><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Compatibilidad con servidores</span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Vale la pena volver a hacer hincapié, por el momento, en que si los tipos MIME para vídeo Theora no se establecen en el servidor, tal vez el vídeo no se muestre o muestre un cuadro gris con una X (si JavaScript está activado).</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Puedes solucionar este problema para el servidor Web Apache añadiendo la extensión utilizada por tus archivos de vídeo Theora (".ogm", ".ogv", o ".ogg" son los más comunes) al tipo MIME "video / ogg" a través del archivo "mime.types" en "/ etc / apache" o por medio de la directiva de configuración "AddType" en httpd.conf.</span></span></p> + +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-64-goog-gtc-unit-65-goog-gtc-unit-66"><span class="goog-gtc-from-human goog-gtc-translatable">AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</span></span> +</pre> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Su proveedor de alojamiento web puede proporcionar una interfaz fácil para los cambios de configuración de tipo MIME que presentan las nuevas tecnologías hasta que tenga lugar una actualización global de forma natural.</span></span></p> + +<h2 id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Interfaz DOM</span></span></h2> + +<ul> + <li><a href="/en/DOM/HTMLVideoElement" title="en/DOM/HTMLVideoElement"><span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">HTMLVideoElement</span></span></a></li> +</ul> + +<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Consulta también</span></span></h2> + +<ul> + <li><a class="internal" href="/es/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio" title="es/Formatos multimedia admitidos por los elementos de video y audio"><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Formatos multimedia admitidos por los elementos de audio y video</span></span></a></li> + <li><a class="internal" href="/es/HTML/Elemento/Audio" title="es/HTML/Elemento/Audio"><code>audio</code></a></li> + <li><a class="internal" href="/Es/Usar_audio_y_vídeo_en_Firefox" title="es/Usar audio y video en Firefox"><span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Usar audio y vídeo en Firefox</span></span></a></li> + <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas"><span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Manipular vídeo por medio de canvas</span></span></a></li> + <li><a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="En/XPCOM Interface Reference/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a>:ejemplos de uso de ogg en HTML 5.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">El elemento <code>video</code></a> (especificación de HTML 5)</span></span></li> + <li><a class="internal" href="/en/Configuring_servers_for_Ogg_media" title="en/Configuring servers for Ogg media"><span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Configuración de servidores para medios Ogg</span></span></a></li> +</ul> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">{{ languages( { "fr": "fr/HTML/Element/video","en": "en/HTML/Element/video" } ) }}</span></span></p> diff --git a/files/es/web/html/elemento/wbr/index.html b/files/es/web/html/elemento/wbr/index.html new file mode 100644 index 0000000000..2cee9077c4 --- /dev/null +++ b/files/es/web/html/elemento/wbr/index.html @@ -0,0 +1,115 @@ +--- +title: <wbr> +slug: Web/HTML/Elemento/wbr +tags: + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/wbr +--- +<div>{{HTMLRef}}</div> + +<div>El elemento HTML <em>word break opportunity </em><font face="Consolas, Liberation Mono, Courier, monospace"><code><wbr</code></font><em><font face="Consolas, Liberation Mono, Courier, monospace"><code>></code></font></em> representa una posición dentro del texto donde el explorador puede opcionalmente saltar una línea , aunque sus reglas de salto de línea de otra manera no crearían un salto en esa posición .</div> + +<div> </div> + +<div>En páginas codificadas en UTF-8 , <font face="Consolas, Liberation Mono, Courier, monospace"><wbr> </font>se comporta como el punto de código <code>U+200B</code><code> ZERO-WIDTH SPACE </code>. En particular se comporta como un punto de código unicode bidi BN , significando esto que no tiene efecto en ordenamiento bidi : <code><div dir=rtl>123,<wbr>456</div> </code>muestra , cuando no se rompa en dos líneas , 123, 456 y no 456 , 123 .</div> + +<div> </div> + +<p>Por la misma razón el elemento <code><wbr></code> no introduce un guión en el salto de línea . Para hacer aparecer un guión solo al final de la línea , usar la entidad de caracter del guión de separación (<code>&shy;</code>) en su lugar.</p> + +<p>Este elemento fue implementado por primera vez en Internet Explorer 5.5 y fue oficialmente definido en HTML5 .</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table" style="font-size: 14px; font-weight: normal; line-height: 1.5;"> + <tbody> + <tr> + <td>Contenido permitido</td> + <td>Vacío</td> + </tr> + <tr> + <td>Omisión de etiquetas</td> + <td>Es un {{Glossary("empty element")}}; debe de tener una etiqueta de inicio pero no debe de tener una de cierre .</td> + </tr> + <tr> + <td>Elementos padre permitidos</td> + <td>Cualquier elemento que permita contenido estático de texto.</td> + </tr> + <tr> + <td>Documento normativo</td> + <td><a class="external" href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-wbr-element">HTML 5, section 4.6.24</a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento solo incluye los<a href="/es/docs/Web/HTML/Atributos_Globales"> atributos globales</a> .</p> + +<h2 id="Interfase_DOM">Interfase DOM</h2> + +<h2 id="Este_elemento_implementa_la_interface_HTMLElement_."><span style="font-size: 14px; font-weight: normal; line-height: 21px;">Este elemento implementa la interface <a href="/es/docs/Web/API/HTMLElement">HTMLElement </a>. </span></h2> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>La <a href="http://styleguide.yahoo.com/">guia de estilo de Yahoo </a>recomienda <a href="https://shopping.yahoo.com/9780312569846-yahoo-style-guide/">romper una URL antes de la puntuación</a> , para evitar dejar una marca de puntuación en el final de la línea , lo cual el lector podría confundir con el final de la URL .</p> + +<pre class="brush: html"><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> +</pre> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>1.0</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>11.7</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.5</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]El soporte para la etiqueta <code><wbr></code> fue introducido en Internet Explorer 5.5 , aunque removido hasta la versión 7 .</p> diff --git a/files/es/web/html/elemento/xmp/index.html b/files/es/web/html/elemento/xmp/index.html new file mode 100644 index 0000000000..88ab19b65e --- /dev/null +++ b/files/es/web/html/elemento/xmp/index.html @@ -0,0 +1,47 @@ +--- +title: <xmp> +slug: Web/HTML/Elemento/xmp +tags: + - Elemento + - HTML + - Obsoleto + - Referencia + - Web +translation_of: Web/HTML/Element/xmp +--- +<div>{{Obsolete_header}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El elemento HTML example element <font face="Consolas, Liberation Mono, Courier, monospace"><xmp> </font>dibuja texto entre las etiquetas de inicio y fin sin interpretar el HTML que se encuentra en medio y lo muestra usando un tipo de letra monoespaciada . La especificación de HTML2 recomendaba que que esta debería de ser dibujada suficientemente amplia para permitir 80 caracteres por línea .</p> + +<div class="note"> +<p><strong>Nota: </strong>No usar este elemento .</p> + +<ul> + <li>Ha sido declarado obsoleto desde HTML3.2 y no fue implementado en una manera consistente . Fue completamente removido del lenguaje en HTML5 .</li> + <li>Usar el elemento {{HTMLElement("pre")}} , o si es semánticamente adecuado , el elemento {{HTMLElement("code")}} en su lugar . Notar que necesitarás escapar los caracteres '<' como '&lt' para asegurarse que no se interprete como marcado .</li> + <li>Una letra monoespaciada también puede ser obtenida en algún elemento , aplicando el estilo <a href="/es/docs/Web/CSS">CSS</a> adecuado usando <code>monospace </code>como el valor genérico de la fuente para la propiedad {{cssxref("font-family")}}</li> +</ul> +</div> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<p>Este elemento no tiene otros atributos que los<a href="/es/docs/Web/HTML/Atributos_Globales"> atributos globales </a> comunes a todos los elementos .</p> + +<h2 id="DOM_interface" name="DOM_interface">Interfaz DOM</h2> + +<p>Este elemento implementa la interface {{domxref('HTMLElement')}} .</p> + +<div class="note"> +<p><strong>Nota de implementación: </strong>hasta Gecko 1.9.2 inclusivamente , Firefox implemente la interface {{domxref('HTMLSpanElement')}} para este elemento . </p> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>Los elementos {{HTMLElement("pre")}} y {{HTMLElement("code")}} que se usan en su lugar .</li> + <li>Los elementos {{HTMLElement("plaintext")}} y {{HTMLElement("listing")}} , similares a {{HTMLElement("xmp")}} pero también obsoletos .</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elementos_en_línea/index.html b/files/es/web/html/elementos_en_línea/index.html new file mode 100644 index 0000000000..192715aef3 --- /dev/null +++ b/files/es/web/html/elementos_en_línea/index.html @@ -0,0 +1,52 @@ +--- +title: Elementos en línea +slug: Web/HTML/Elementos_en_línea +tags: + - Guía + - HTML + - HTML5 + - Principiante + - Web + - desarrollo +translation_of: Web/HTML/Inline_elements +--- +<p><span class="seoSummary">Los elementos en HTML (lenguaje de marcas de hipertexto - <strong>Hypertext Markup Language</strong>) usualmente son elementos "en línea" o <a href="/es/docs/Web/HTML/Block-level_elements" title="/es/docs/Web/HTML/Block-level_elements">elementos "en bloque"</a>. Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea. El siguiente ejemplo demuestra la influencia de los elementos en línea:</span></p> + +<h2 id="Inline_example" name="Inline_example">Ejemplo en línea</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Este <span>span</span> es un elemento en línea; este fondo se ha coloreado para mostrar el principio y fin de la influencia del elemento en línea</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { background-color: #8ABB55; } +</pre> + +<p>{{ EmbedLiveSample('Inline_example') }}</p> + +<h2 id="Elmentos_en_línea_vs._en_bloque">Elmentos en línea vs. en bloque</h2> + +<dl> + <dt>Formateo</dt> + <dd>De forma predeterminada, los elementos en línea no comienzan con la nueva línea.</dd> + <dt>Modelo de contenido</dt> + <dd>En general, los elementos en línea pueden contener únicamente los datos y otros elementos en línea.</dd> +</dl> + +<h2 id="Elementos">Elementos</h2> + +<p>Los siguientes elementos son "en línea":</p> + +<ul id="inline-elements"> + <li><a href="/es/docs/Web/HTML/Elemento/b" title="/es/docs/Web/HTML/Elemento/b">b</a>, <a href="/es/docs/Web/HTML/Elemento/big" title="/es/docs/Web/HTML/Elemento/big">big</a>, <a href="/es/docs/Web/HTML/Elemento/i" title="/es/docs/Web/HTML/Elemento/i">i</a>, <a href="/es/docs/Web/HTML/Elemento/small" title="/es/docs/Web/HTML/Elemento/small">small</a>, <a href="/es/docs/Web/HTML/Elemento/tt" title="/es/docs/Web/HTML/Elemento/tt">tt</a></li> + <li><a href="/es/docs/Web/HTML/Elemento/abbr" title="/es/docs/Web/HTML/Elemento/abbr">abbr</a>, <a href="/es/docs/Web/HTML/Elemento/acronym" title="/es/docs/Web/HTML/Elemento/acronym">acronym</a>, <a href="/es/docs/Web/HTML/Elemento/cite" title="/es/docs/Web/HTML/Elemento/cite">cite</a>, <a href="/es/docs/Web/HTML/Elemento/code" title="/es/docs/Web/HTML/Elemento/code">code</a>, <a href="/es/docs/Web/HTML/Elemento/dfn" title="/es/docs/Web/HTML/Elemento/dfn">dfn</a>, <a href="/es/docs/Web/HTML/Elemento/em" title="/es/docs/Web/HTML/Elemento/em">em</a>, <a href="/es/docs/Web/HTML/Elemento/kbd" title="/es/docs/Web/HTML/Elemento/kbd">kbd</a>, <a href="/es/docs/Web/HTML/Elemento/strong" title="/es/docs/Web/HTML/Elemento/strong">strong</a>, <a href="/es/docs/Web/HTML/Elemento/samp" title="/es/docs/Web/HTML/Elemento/samp">samp</a>, <a href="/es/docs/Web/HTML/Elemento/time" title="/es/docs/Web/HTML/Elemento/time">time</a>, <a href="/es/docs/Web/HTML/Elemento/var" title="/es/docs/Web/HTML/Elemento/var">var</a></li> + <li><a href="/es/docs/Web/HTML/Elemento/a" title="/es/docs/Web/HTML/Elemento/a">a</a>, <a href="/es/docs/Web/HTML/Elemento/bdo" title="/es/docs/Web/HTML/Elemento/bdo">bdo</a>, <a href="/es/docs/Web/HTML/Elemento/br" title="/es/docs/Web/HTML/Elemento/br">br</a>, <a href="/es/docs/Web/HTML/Elemento/Img" title="/es/docs/Web/HTML/Elemento/Img">img</a>, <a href="/es/docs/Web/HTML/Elemento/map" title="/es/docs/Web/HTML/Elemento/map">map</a>, <a href="/es/docs/Web/HTML/Elemento/object" title="/es/docs/Web/HTML/Elemento/object">object</a>, <a href="/es/docs/Web/HTML/Elemento/q" title="/es/docs/Web/HTML/Elemento/q">q</a>, <a href="/es/docs/Web/HTML/Elemento/Script" title="/es/docs/Web/HTML/Elemento/Script">script</a>, <a href="/es/docs/Web/HTML/Elemento/span" title="/es/docs/Web/HTML/Elemento/span">span</a>, <a href="/es/docs/Web/HTML/Elemento/sub" title="/es/docs/Web/HTML/Elemento/sub">sub</a>, <a href="/es/docs/Web/HTML/Elemento/sup" title="/es/docs/Web/HTML/Elemento/sup">sup</a></li> + <li><a href="/es/docs/Web/HTML/Elemento/button" title="/es/docs/Web/HTML/Elemento/button">button</a>, <a href="/es/docs/Web/HTML/Elemento/Input" title="/es/docs/Web/HTML/Elemento/Input">input</a>, <a href="/es/docs/Web/HTML/Elemento/label" title="/es/docs/Web/HTML/Elemento/label">label</a>, <a href="/es/docs/Web/HTML/Elemento/select" title="/es/docs/Web/HTML/Elemento/select">select</a>, <a href="/es/docs/Web/HTML/Elemento/textarea" title="/es/docs/Web/HTML/Elemento/textarea">textarea</a></li> +</ul> + +<h3 id="Ver_también" name="Ver_también">Ver también</h3> + +<ul> + <li><a href="/es/docs/Web/HTML/Block-level_elements" title="/es/docs/Web/HTML/Block-level_elements">Elementos en bloque</a></li> +</ul> diff --git a/files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html b/files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html new file mode 100644 index 0000000000..086aee4e7b --- /dev/null +++ b/files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html @@ -0,0 +1,280 @@ +--- +title: Formatos de medios admitidos por los elementos HTML audio y video +slug: Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 +translation_of: Web/Media/Formats +--- +<p>Las etiquetas {{ HTMLElement("audio") }} y {{ HTMLElement("video") }} <span id="result_box" lang="es"><span class="hps">proporcionan apoyo</span> <span class="hps">para la reproducción de</span> <span class="hps">audio</span> <span class="hps">y video</span> <span class="hps">sin necesidad de</span> <span class="atn hps">plug-</span><span>ins.</span> <span class="hps">Codecs</span> <span class="hps">de vídeo</span> <span class="hps">y codecs</span> <span class="hps">de audio</span> <span class="hps">se utilizan para manejar</span> <span class="hps">vídeo y</span> <span class="hps">audio,</span> <span class="hps">y los diferentes</span> <span class="hps">codecs</span> <span class="hps">ofrecen diferentes</span> <span class="hps">niveles de compresión</span> <span class="hps">y calidad.</span> <span class="hps">Un</span> <span class="hps">formato de contenedor</span> <span class="hps">se utiliza para</span> <span class="hps">almacenar y transmitir</span> <span class="hps">el vídeo</span> <span class="hps">y el audio</span> <span class="hps">codificado</span> <span class="hps">juntos.</span> <span class="hps">Muchos</span> <span class="hps">codecs</span> <span class="hps">y formatos</span> <span class="hps">de contenedor</span> <span class="hps">existe</span><span>,</span> <span class="hps">e incluso hay</span> <span class="hps">más combinaciones de</span> <span class="hps">ellos.</span> <span class="hps">Para su uso</span> <span class="hps">en la web,</span> <span class="hps">sólo un puñado de</span> <span class="hps">combinaciones</span> <span class="hps">son relevantes.</span></span></p> + +<p>Diferentes navegadores no soportan los mismos formatos para audio y video en HTML5, principalmente debido a problemas de patentes. El área de formatos de medios en la web ha sufrido mucho por la ley de patentes en muchos paises, incluyendo EE.UU y la UE (La memoria de las patentes en este articulo se proporciona tal cual y sin ningun tipo de garantia.)</p> + +<p><span id="result_box" lang="es"><span class="hps">Para hacer</span> <span class="hps">un vídeo de</span> <span class="hps">HTML5</span><span>, que</span> <span class="hps">trabaja en</span> <span class="hps">las nuevas versiones de</span> <span class="hps">los principales navegadores</span><span>, puede</span> <span class="hps">usar el elemento {{HTMLElement("source")}} para reproducir</span> <span class="hps">en formatos WebM</span> o el formato <span class="hps">AAC</span> <span class="hps">MPEG</span> <span class="hps">H.264,</span> <span class="hps">usando el</span> <span class="hps">elemento de origen</span> <span class="hps">de esta manera:</span></span></p> + +<pre class="brush: html"><video controls> + <source src="somevideo.webm" type="video/webm"> + <source src="somevideo.mp4" type="video/mp4"> + I'm sorry; your browser doesn't support HTML5 video. + <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> +</video> +</pre> + +<h3 id="WebM">WebM</h3> + +<p><span id="result_box" lang="es"><span class="hps">El formato</span> <a href="http://www.webmproject.org/" title="http://www.webmproject.org/"><span class="hps">WebM</span></a> <span class="hps">se basa en</span> <span class="hps">una versión restringida</span> <span class="hps">del</span> <span class="hps">formato contenedor</span> <span class="hps">Matroska</span><span>.</span> <span class="hps">Siempre</span> <span class="hps">utiliza</span> <span class="hps">el códec de vídeo</span> <span class="hps">VP8</span> <span class="hps">y</span> <span class="hps">el códec de audio</span> <span class="hps">Vorbis</span><span>.</span> <span class="hps">WebM</span> <span class="hps">es</span> <span class="hps">soportado nativamente</span> <span class="hps">en</span> <span class="hps">Gecko</span> <span class="atn hps">(</span><span>Firefox)</span><span>, Chrome</span> <span class="hps">y</span> <span class="hps">Opera,</span> <span class="hps">y el</span> <span class="hps">soporte para el formato</span> <span class="hps">se puede agregar a</span> <span class="hps">Internet</span> <span class="hps">Explorer y</span> <span class="hps">Safari</span> <span class="hps">mediante la instalación de</span> <span class="hps">un add</span><span>-on</span><span>.</span></span></p> + +<p><a href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx"><span id="result_box" lang="es"><span class="hps">Declaración</span> <span class="hps">de</span> <span class="hps">Microsoft</span> <span class="hps">sobre por qué</span> <span class="hps">IE9</span> <span class="hps">no tiene soporte</span> <span class="hps">WebM</span> <span class="hps">nativo.</span></span></a></p> + +<p><span id="result_box" lang="es"><span class="hps">El formato</span> <span class="hps">WebM</span><span>,</span> <span class="hps">específicamente</span> <span class="hps">el códec de vídeo</span> <span class="hps">VP8</span><span>,</span> <span class="alt-edited hps">habría</span> sido <span class="alt-edited hps">acusado</span> <span class="hps">de</span> <span class="hps">infracción de derechos de</span> <span class="hps">patente</span> <span class="hps">por un grupo de</span> <span class="hps">empresas de</span> <span class="hps">responder a una llamada</span> <span class="hps">por la</span> <span class="hps">MPEG</span> <span class="hps">LA</span> <span class="hps">para la formación de</span> <span class="hps">un consorcio de patentes</span><span>, pero</span> <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8"><span class="hps">MPEG</span> <span class="hps">LA</span> <span class="hps">se ha comprometido a</span> <span class="hps">licenciar</span> <span class="hps">las patentes</span> <span class="hps">de</span> <span class="hps">Google</span></a> <span class="hps">bajo</span> <span class="atn hps">"</span><a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8"><span class="hps">transferible y de licencia gratuita</span></a><span class="atn hps">"</span><span>.</span> <span class="hps">Esto significa,</span> <span class="hps">efectivamente</span><span>,</span> <span class="hps">que todas las patentes</span> <span class="hps">conocidas en</span> <span class="hps">el formato</span> <span class="hps">WebM</span> <span class="hps">tienen licencia</span> <span class="hps">para todo el mundo</span> <span class="hps">de forma gratuita.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Gecko</span> <span class="hps">reconoce los siguientes</span> <span class="hps">tipos MIME</span> <span class="hps">para los archivos WebM:</span></span></p> + +<dl> + <dt><code>video/webm</code></dt> + <dd>Un archivo WebM que es capaz de reproducir video (y es posible audio también)</dd> + <dt><code>audio/webm</code></dt> + <dd>Un archivo WebM que contiene audio unicamente.</dd> +</dl> + +<h3 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h3> + +<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">formato contenedor</span> <span class="hps">Ogg</span> <span class="hps">con</span> <span class="hps">el códec de vídeo</span> <span class="hps">Theora</span> <span class="hps">y</span> <span class="hps">el códec de audio</span> <span class="hps">Vorbis</span> <span class="hps">es compatible con</span> <span class="hps">Gecko</span> <span class="atn hps">(</span><span>Firefox)</span><span>, Chrome</span> <span class="hps">y</span> <span class="hps">Opera,</span> <span class="hps">y el</span> <span class="hps">soporte para el formato</span> <span class="hps">se puede agregar a</span> <span class="hps">Safari</span> <span class="hps">mediante la instalación de</span> <span class="hps">un add</span><span>-on</span><span>.</span> <span class="hps">El formato no</span> <span class="hps">es compatible en Internet</span> <span class="hps">Explorer.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">WebM</span> <span class="alt-edited hps">es preferente</span>, <span class="hps">generalmente sobre</span> <span class="hps">Theora</span> <span class="hps">Ogg</span> <span class="hps">Vorbis</span> <span class="hps">cuando esté disponible</span></span><span id="result_box" lang="es"><span>,</span> <span class="hps">ya que proporciona</span> <span class="hps">una mejor</span> <span class="hps">relación de</span> <span class="hps">compresión para</span> <span class="hps">la calidad</span> <span class="hps">y</span> <span class="hps">se apoya</span> <span class="hps">en</span> <span class="hps">más navegadores</span><span>.</span> <span class="hps">El formato</span> <span class="hps">Ogg</span> <span class="hps">sin embargo, puede</span> <span class="hps">ser utilizado para apoyar</span> <span class="hps">versiones de los navegadores</span> <span class="hps">más antiguos</span><span>, en los que</span> <span class="hps">aún no</span> <span class="hps">se dispone de</span> <span class="hps">soporte para</span> <span class="hps">WebM</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">situación de las patentes</span> <span class="hps">de</span> <span class="hps">Theora</span> <span class="hps">es</span> <span class="hps">similar a la de</span> <span class="hps">WebM</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Usted puede aprender</span> <span class="hps">más sobre la creación</span> <span class="hps">de medios</span> <span class="hps">Ogg</span> <span class="hps">leyendo </span></span><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">the Theora Cookbook</a>.</p> + +<p>Gecko reconoce los siguientes tipos de MIME para el archivo Ogg:</p> + +<dl> + <dt><code>audio/ogg</code></dt> + <dd><span class="short_text" id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">Ogg</span> <span class="hps">que contiene sólo</span> <span class="hps">audio.</span></span></dd> + <dt><code>video/ogg</code></dt> + <dd><span id="result_box" lang="es"><span class="hps">Un video</span> <span class="hps">que contiene</span> <span class="hps">el archivo</span> <span class="hps">ogg</span> <span class="hps">(y posiblemente </span><span class="hps">audio también)</span><span>.</span></span></dd> + <dt><code>application/ogg</code></dt> + <dd><span id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">Ogg</span> <span class="hps">con el contenido</span> <span class="hps">especificado.</span> <span class="hps">Utilizando uno de</span> <span class="hps">los otros dos tipos</span> <span class="hps">MIME</span> <span class="hps">es</span> <span class="hps">preferido</span><span>,</span> <span class="hps">pero se puede usar</span> <span class="hps">esta opción si</span> <span class="hps">usted no sabe</span> <span class="hps">lo que</span> <span class="hps">el contenido</span> <span class="hps">del fichero es</span></span>.</dd> +</dl> + +<h3 id="Ogg_Opus">Ogg Opus</h3> + +<p><span id="result_box" lang="es"><span class="hps">El contenedor</span> <span class="hps">Ogg</span> <span class="hps">también puede contener</span> <span class="hps">audio codificado</span> <span class="hps">con el <a href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">códec</a></span><a href="http://www.opus-codec.org/" title="http://www.opus-codec.org/"> <span class="hps">Opus</span><span>.</span></a> <span class="hps">El apoyo a esta</span> <span class="hps">disponible en</span></span> Gecko 15.0 {{ geckoRelease("15.0") }} y superior.</p> + +<h3 id="MP4_H.264_(AAC_o_MP3)">MP4 H.264 (AAC o MP3)</h3> + +<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">formato contenedor</span> <span class="hps">MP4</span> <span class="hps">con</span> <span class="hps">el códec de vídeo</span> <span class="hps">H.264</span> <span class="hps">y, o bien</span> <span class="hps">el códec de audio</span> <span class="hps">AAC</span> <span class="hps">o</span> <span class="hps">el códec de audio</span> <span class="hps">MP3</span> <span class="alt-edited hps">es</span> <span class="alt-edited hps">nativamente</span> <span class="hps">compatible con</span> <span class="hps">Internet</span> <span class="hps">Explorer,</span> <span class="hps">Safari</span> <span class="hps">y</span> <span class="hps">Chrome,</span> pero <span class="hps">Chromium y</span> <span class="hps">Opera</span> <span class="hps">no son compatibles con</span> <span class="hps">el formato</span><span>.</span> <span class="hps">Firefox</span> <span class="hps">pronto</span> <span class="hps">admite el formato</span><span>, pero sólo cuando</span> <span class="hps">un decodificador</span> <span class="hps">de terceros</span> <span class="hps">esté disponible.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">formatos</span> <span class="hps">MPEG</span> <span class="hps">están cubiertos por</span> <span class="hps">patentes, que</span> <span class="hps">no tienen licencia</span> <span class="hps">libre</span><span>.</span> <span class="hps">Todas</span> <span class="hps">las licencias necesarias</span> <span class="hps">se pueden comprar de</span> <span class="hps">MPEG</span> <span class="hps">LA.</span> <span class="hps">Desde</span> <span class="hps">H.264</span> <span class="hps">no está en</span> <span class="hps">un formato</span> <span class="hps">libre de</span> <span class="hps">regalías,</span> <span class="hps">no es apto</span> <span class="hps">para la plataforma</span> <span class="hps">web de código abierto</span><span>, de acuerdo con</span> <span class="hps">Mozilla</span> <span class="atn hps">[</span><a href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/"><span>1</span></a><span>,</span> <a href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html"><span class="hps">2</span></a><span>]</span><span>,</span> <span class="hps">Google</span> <span class="atn hps">[</span><a href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html"><span>1</span></a><span>,</span> <a href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html"><span class="hps">2</span></a><span>]</span> <span class="hps">y Opera.</span> <span class="hps">Sin embargo, los</span> <span class="hps">formatos libres</span> <span class="hps">no son compatibles con</span> <span class="hps">Internet</span> <span class="hps">Explorer y</span> <span class="hps">Safari</span><span>, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla</a></span><a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/"> <span class="hps">ha decidido apoyar</span> <span class="hps">el formato de</span> </a><span class="hps"><a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">todos modos</a>, y</span> <span class="hps">Google</span> <span class="hps">no</span> <span class="hps">cumplió</span> <span class="hps">su promesa de</span> <span class="hps">eliminar el soporte</span> <span class="hps">para él en</span> <span class="hps">Chrome.</span></span></p> + +<h3 id="WAVE_PCM">WAVE PCM</h3> + +<p>El formato contenedor WAVE, con el códec de audio PCM (WAVE codec "1") con el apoyo de Gecko (Firefox), y Safari. Archivos en el formato contenedor WAVE normalmente terminan con la extensión ". wav".</p> + +<div class="note"><strong>Nota: </strong><span class="short_text" id="result_box" lang="es"><span class="hps">Consulte</span> <a href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt"><span class="hps">RFC</span> <span class="hps">2361</span></a> <span class="hps">para</span> <span class="hps">el registro</span> <span class="hps">códec</span> <span class="hps">WAVE</span><span>.</span></span></div> + +<p><span id="result_box" lang="es"><span class="hps">Gecko</span> <span class="hps">reconoce los siguientes</span> <span class="hps">tipos MIME</span> <span class="alt-edited hps">en archivos de audio</span> <span class="hps">WAVE</span><span>:</span></span></p> + +<ul> + <li><code>audio/wave</code> (preferido)</li> + <li><code>audio/wav</code></li> + <li><code>audio/x-wav</code></li> + <li><code>audio/x-pn-wav</code></li> +</ul> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>9.0</td> + <td>10.50</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: WAVE, PCM</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: WebM, Vorbis</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.60</td> + <td>3.1 (must be installed separately)</td> + </tr> + <tr> + <td><code><audio></code>: Ogg, Vorbis</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><code><audio></code>: MP4, MP3</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td> + <p>Partial (see below)</p> + </td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: MP4, AAC</td> + <td> + <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p> + </td> + <td> + <p>Partial (see below)</p> + </td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><audio></code>: Ogg, Opus</td> + <td>27.0</td> + <td>{{ CompatGeckoDesktop("15.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code><video></code>: WebM, VP8, Vorbis</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> + <td>10.60</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td> + </tr> + <tr> + <td><code><video></code>: Ogg, Theora, Vorbis</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatNo() }}</td> + <td>10.50</td> + <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> + </tr> + <tr> + <td><code><video></code>: MP4, H.264, MP3</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td><code><video></code>: MP4, H.264, AAC</td> + <td> + <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> + </td> + <td>Partial (see below)</td> + <td>9.0</td> + <td>{{ CompatNo() }}</td> + <td>3.1</td> + </tr> + <tr> + <td>any other format</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.1 (plays all formats available via QuickTime)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p><span id="result_box" lang="es"><span class="hps">Para evitar</span> <span class="hps">problemas de patentes</span><span>, el apoyo a</span> <span class="hps">MPEG</span> <span class="hps">4</span><span>, H.264</span><span>, MP3</span> <span class="hps">y</span> <span class="hps">AAC</span> <span class="hps">no</span> <span class="hps">está integrado directamente en</span> <span class="hps">Firefox.</span> <span class="hps">En su lugar,</span> <span class="hps">se basa en</span> <span class="hps">el apoyo del</span> <span class="hps">sistema operativo o</span> <span class="hps">hardware.</span> <span class="hps">Firefox</span> <span class="hps">soporta</span> <span class="hps">estos formatos</span> <span class="hps">en las siguientes plataformas</span><span>:</span></span></p> + +<table class="standard-table" style="height: 159px; width: 285px;"> + <thead> + <tr> + <th scope="col">Plataforma</th> + <th scope="col">Versión de Firefox</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799315" title="https://bugzilla.mozilla.org/show_bug.cgi?id=799315">Windows 7+</a></td> + <td>21.0</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a></td> + <td>22.0</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td> + <td>20.0</td> + </tr> + <tr> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td> + <td>15.0</td> + </tr> + <tr> + <td>OS X 10.7</td> + <td>22.0</td> + </tr> + </tbody> +</table> + +<ul> + <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> + <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> +</ul> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> + <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> + <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> +</ul> diff --git a/files/es/web/html/imagen_con_cors_habilitado/index.html b/files/es/web/html/imagen_con_cors_habilitado/index.html new file mode 100644 index 0000000000..4de4e94617 --- /dev/null +++ b/files/es/web/html/imagen_con_cors_habilitado/index.html @@ -0,0 +1,115 @@ +--- +title: Imagen con CORS habilitado +slug: Web/HTML/Imagen_con_CORS_habilitado +tags: + - Avanzado + - CORS + - Canvas + - HTML + - Referencia + - Seguridad +translation_of: Web/HTML/CORS_enabled_image +--- +<p><span class="seoSummary">La especificación HTML introduce un atributo {{ htmlattrxref("crossorigin", "img") }} para imágenes que, en conjunto con el encabezado {{Glossary("CORS")}} apropiado, permite definir imágenes con el elemento {{ HTMLElement("img") }} que se carguen de orígenes externos dentro de un lienzo (<em>canvas</em>) como si estas fuesen cargadas del origen actual.</span></p> + +<p>Vea el artículo <a href="/en/HTML/CORS_settings_attributes" title="Atributos de configuración CORS">"Atributos de configuración CORS"</a> para mas detalles de como el atributo "crossorigin" es usado.</p> + +<h2 id="¿Qué_es_un_tainted_canvas">¿Qué es un "tainted" canvas? </h2> + +<p>Aunque puedes usar imágenes sin la aprobación del CORS en el elemento canvas, hacerlo puede "manchar" el canvas. Por ejemplo, no puedes usar los métodos canvas <code>toBlob()</code>, <code>toDataURL()</code>, or <code>getImageData(). Si los usas se lanzará un mensaje de seguridad.</code></p> + +<p>Esto protegerá a los usuarios de tener información privada usada por medio de imágenes que cogen información desde otras web sin permiso.</p> + +<h2 id="Ejemplo_Almacenando_una_imagen_desde_un_origen_externo">Ejemplo: Almacenando una imagen desde un origen externo</h2> + +<p>Debes de tener un servidor de hosting de imágenes con el apropiado <code>Access-Control-Allow-Origin</code> header. Añadiendo el atributo crossOrigin crea un request header.</p> + +<p>Puedes utilizar este fragemto de la configuración del servidor Apache del Boilerplate HTML5 para responder apropiadamente con este encabezado de respuesta.</p> + +<pre class="brush:xml"><IfModule mod_setenvif.c> + <IfModule mod_headers.c> + <span class="nt"><FilesMatch</span> <span class="s">"\.(cur|gif|ico|jpe?g|png|svgz?|webp)$"</span><span class="nt">></span> + SetEnvIf Origin ":" IS_CORS + Header set Access-Control-Allow-Origin "*" env=IS_CORS + </FilesMatch> + </IfModule> +</IfModule></pre> + +<p>Dado que está todo ordenado, serás capás de guardar esas imagenes en el almacenamiento del DOM, así como si fueran solicitados de tu dominio.</p> + +<pre class="brush: js">var img = new Image, + canvas = document.createElement("canvas"), + ctx = canvas.getContext("2d"), + src = "http://example.com/image"; // insert image url here + +img.crossOrigin = "Anonymous"; + +img.onload = function() { + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage( img, 0, 0 ); + localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") ); +} +img.src = src; +// make sure the load event fires for cached images too +if ( img.complete || img.complete === undefined ) { + img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; + img.src = src; +}</pre> + +<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>13</td> + <td>8</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="También_puede_ver">También puede ver</h2> + +<ul> + <li><a class="external" href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Using Cross-domain images in WebGL and Chrome 13</a></li> + <li><a class="external" href="http://whatwg.org/html#attr-img-crossorigin">HTML Specification - the <code>crossorigin</code> attribute</a></li> +</ul> diff --git a/files/es/web/html/index.html b/files/es/web/html/index.html new file mode 100644 index 0000000000..6e9ece746c --- /dev/null +++ b/files/es/web/html/index.html @@ -0,0 +1,113 @@ +--- +title: 'HTML: Lenguaje de etiquetas de hipertexto' +slug: Web/HTML +tags: + - Avanzado + - Guía + - HTML + - HTML5 + - Hipertexto + - Intermedio + - Principiante + - Referencia + - Web +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (Lenguaje de marcado de hipertexto) es el más básico componente de la Web. Define el significado y la estructura del contenido web. Además de HTML, se utilizan otras tecnologías generalmente para describir la apariencia/presentación de una página web ({{web.link("/es/docs/Web/CSS", "CSS")}}) o la funcionalidad/comportamiento ({{web.link("/es/docs/Web/JavaScript", "JavaScript")}}.</span></p> + +<p>"Hipertexto" se refiere a enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al cargar contenido en Internet y vincularlo a páginas creadas por otras personas, te conviertes en un participante activo en la «<em>World Wide Web</em>».</p> + +<p>HTML utiliza "marcado" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador web. El marcado HTML incluye "elementos" especiales como {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} y muchos otros.</p> + +<p>Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consisten en el nombre del elemento rodeadas por "<code><</code>" y "<code>></code>". El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta <code><title></code> se puede escribir como <code><Title></code>, <code><TITLE></code> o de cualquier otra forma.</p> + +<p>Los siguientes artículos pueden ayudarte a obtener más información sobre HTML.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>Introducción a HTML</span> + + <p>Si eres nuevo en el desarrollo web, asegúrate de leer el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "Conceptos básicos de HTML")}} para aprender qué es HTML y cómo usarlo.</p> + </li> + <li><span>Tutoriales HTML</span> + <p>Para ver los artículos sobre cómo usar HTML, así como tutoriales y ejemplos completos, consulta el {{web.link("/es/docs/Learn/HTML", "Área de aprendizaje de HTML")}}.</p> + </li> + <li><span>Referencia HTML</span> + <p>En nuestra extensa sección {{web.link("/es/docs/Web/HTML/Reference", "referencia HTML")}}, encontrarás los detalles sobre cada elemento y atributo en HTML.</p> + </li> +</ul> + +<div class="in-page-callout webdev"> +<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3> + +<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Tutoriales_para_principiantes">Tutoriales para principiantes</h2> + +<p>El {{web.link("/es/docs/Learn/HTML", "Área de aprendizaje de HTML")}} incluye varios módulos que enseñan HTML desde cero, sin necesidad de conocimientos previos.</p> + +<dl> + <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}}</dt> + <dd>Este módulo prepara el escenario para que te acostumbres a conceptos y sintaxis importantes, tal como la aplicación de HTML al texto, cómo crear hipervínculos y cómo utilizar HTML para estructurar una página web.</dd> + <dt>{{web.link("/es/docs/Learn/HTML/Multimedia_and_embedding", "Multimedia e inserción")}}</dt> + <dd>Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo insertar video, audio e incluso otras páginas web completas.</dd> + <dt>{{web.link("/es/docs/Learn/HTML/Tables", "tablas HTML")}}</dt> + <dd>Representar datos tabulares en una página web de una manera comprensible y accesible puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con características más complejas como la implementación de subtítulos y resúmenes.</dd> + <dt>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}</dt> + <dd>Los formularios son una parte muy importante de la Web — proporcionan gran parte de la funcionalidad que necesitas para interactuar con sitios web, p. ej. registrarte e iniciar sesión, enviar comentarios, comprar productos y más. Este módulo te ayuda a comenzar a crear las partes de formularios del lado del cliente/Interfaz de usuario.</dd> + <dt>{{web.link("/es/docs/Learn/HTML/Howto", "Utilizar HTML para resolver problemas comunes")}}</dt> + <dd>Proporciona enlaces a secciones de contenido que explican cómo usar HTML para resolver muchos problemas comunes al crear una página web: tratar con títulos, agregar imágenes o videos, enfatizar el contenido, crear un formulario básico, etc.</dd> +</dl> + +<h2 id="Temas_avanzados">Temas avanzados</h2> + +<dl> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/CORS_enabled_image", "Imagen compatible con CORS")}}</dt> + <dd class="landingPageList">El atributo {{HTMLAttrxRef("crossorigin", "img")}}, en combinación con un encabezado {{Glossary("CORS")}} apropiado, permite imágenes definidas por el elemento {{HTMLElement("img")}} que se cargarán desde orígenes externos y se utilizarán en un elemento {{HTMLElement("canvas")}} como si se estuvieran cargando desde el origen actual.</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/CORS_settings_attributes", "Atributos de configuración de CORS")}}</dt> + <dd class="landingPageList">Algunos elementos HTML que brindan soporte para {{web.link("/es/docs/Web/HTTP/CORS", "CORS")}}, como {{HTMLElement("img")}} o {{HTMLElement("video")}}, tienen un atributo <code>crossorigin</code> (propiedad <code>crossOrigin</code>), que te permite configurar las solicitudes CORS para los datos extraídos del elemento.</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Preloading_content", "Precarga de contenido con rel='preload'")}}</dt> + <dd class="landingPageList">El valor de <code>preload</code> del atributo {{HTMLElement("link")}} del elemento {{HTMLAttrxRef("rel", "link")}} te permite escribir solicitudes de recuperación declarativas en tu HTML {{HTMLElement("head")}}, que especifican los recursos que tus páginas necesitarán muy pronto después de la carga, que por lo tanto deseas comenzar a precargar al principio del ciclo de vida de la carga de una página, antes de la representación principal del navegador la maquinaria entra en acción. Esto asegura que estén disponibles antes y es menos probable que bloqueen el primer procesamiento de la página, lo que lleva a mejoras de rendimiento. Este artículo proporciona una guía básica sobre cómo funciona <code>preload</code>.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Referencias">Referencias</h2> + +<dl> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Reference", "Referencia HTML")}}</dt> + <dd class="landingPageList">HTML consta de <strong>elementos</strong>, cada uno de los cuales se puede modificar por medio de algunos <strong>atributos</strong>. Los documentos HTML están conectados entre sí mediante {{web.link("/es/docs/Web/HTML/Link_types", "enlaces")}}.</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Element", "Referencia del elemento HTML")}}</dt> + <dd class="landingPageList">Examina una lista de todos los {{Glossary("Elemento", "elementos")}} {{Glossary("HTML")}}.</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Attributes", "Referencia de atributos HTML")}}</dt> + <dd class="landingPageList">Los elementos en HTML tienen <strong>atributos</strong>. Se trata de valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas.</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Global_attributes", "Atributos globales")}}</dt> + <dd class="landingPageList">Los atributos globales se pueden especificar en todos los {{web.link("/es/docs/Web/HTML/Element", "elementos HTML")}}, <em>incluso aquellos no especificados en el estándar</em>. Esto significa que cualquier elemento no estándar debe permitir esos atributos, aunque esos elementos hagan que el documento no sea compatible con HTML5.</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Inline_elements", "Elementos en línea")}} y {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos a nivel de bloque")}}</dt> + <dd class="landingPageList">Los elementos HTML suelen ser elementos "en línea" o "a nivel de bloque". Un elemento en línea ocupa solo el espacio delimitado por las etiquetas que lo definen. Un elemento a nivel de bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque".</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Link_types", "Tipos de enlaces")}}</dt> + <dd class="landingPageList">En HTML, se pueden usar varios tipos de enlaces para establecer y definir la relación entre dos documentos. Los elementos de enlace en los que se pueden configurar tipos incluyen {{HTMLElement("a")}}, {{HTMLElement("area")}} y {{HTMLElement("link")}}.</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/Media/Formats", "Guía de tipos y formatos de medios en la web")}}</dt> + <dd class="landingPageList">Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} te permiten reproducir audio y video de forma nativa dentro de tu contenido sin la necesidad de soporte de software externo.</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/Guide/HTML/Content_categories", "Categorías de contenido HTML")}}</dt> + <dd class="landingPageList">HTML se compone de varios tipos de contenido, cada uno de los cuales se puede usar en ciertos contextos y no está permitido en otros. De manera similar, cada uno tiene un conjunto de otras categorías de contenido que pueden recibir y elementos que pueden o no se pueden usar en ellos. Esta es una guía para estas categorías.</dd> + <dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Quirks_Mode_and_Standards_Mode", "Modo Quirks y modo estándar")}}</dt> + <dd class="landingPageList">Información histórica sobre el modo peculiar («<em>Quirks</em>» en inglés) y el modo estándar.</dd> +</dl> + +<h2 class="landingPageList" id="Temas_relacionados">Temas relacionados</h2> + +<dl> + <dt>{{web.link("/es/docs/Web/HTML/Applying_color", "Aplicación de color a elementos HTML mediante CSS")}}</dt> + <dd>Este artículo cubre la mayoría de las formas en que usas CSS para agregar color al contenido HTML, enumerando qué partes de los documentos HTML se pueden colorear y qué propiedades CSS usar al hacerlo. Incluye ejemplos, enlaces a herramientas de creación de paletas de colores y más.</dd> +</dl> +</div> +</div> +<span class="alllinks">{{web.link("/es/docs/tag/HTML", "Ver todo...")}}</span></section> diff --git a/files/es/web/html/la_importancia_de_comentar_correctamente/index.html b/files/es/web/html/la_importancia_de_comentar_correctamente/index.html new file mode 100644 index 0000000000..a28f32851a --- /dev/null +++ b/files/es/web/html/la_importancia_de_comentar_correctamente/index.html @@ -0,0 +1,65 @@ +--- +title: La importancia de comentar correctamente +slug: Web/HTML/La_importancia_de_comentar_correctamente +tags: + - HTML + - Todas_las_Categorías + - XHTML + - XML +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments +--- +<p> </p> +<p><br> + Cuando escribimos HTML en <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/doctypes.html">modo estándar</a>, los comentarios mal formados pueden romper las páginas, causando que los contenidos del documento sean parcial o totalmente comentados. Al escribir XHTML o XML, los comentarios incorrectos darán lugar a que sus documentos no puedan ser mostrados.</p> +<h3 id="HTML_4.01" name="HTML_4.01">HTML 4.01</h3> +<p> + <i> + De la <a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación del W3C HTML 4.01 Sección 3.2.4 - Comentarios</a>:</i> +</p> +<blockquote> + No se permite espacio en blanco entre el delimitador de apertura de declaración de etiqueta ("<!") y el delimitador de apertura de comentario ("--"), pero sí se permite entre el delimitador de cierre de comentario ("--" y el delimitador de cierre de declaración de etiqueta (">"). Un error común es incluir una cadena de guiones ("---") dentro de un comentario. Los autores deberían evitar *poner dos o más guiones adyacentes dentro de un comentario.</blockquote> +<h4 id="Ejemplos" name="Ejemplos">Ejemplos</h4> +<p>Los siguientes son comentarios válidos en HTML.</p> +<pre class="eval"><!-- comentario html válido --> +<!-- comentario html válido -- > +</pre> +<p>El siguiente no es un comentario válido en HTML.</p> +<pre class="eval"><!-- comentario html -- no válido --> +</pre> +<h3 id="XML" name="XML">XML</h3> +<p> + <i> + De la <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación del W3C XML 1.0 Sección 2.5 - Comentarios</a>:</i> +</p> +<blockquote> + {{ mediawiki.external('Definición: Los comentarios pueden aparecer en cualquier lugar de un documento fuera de otras marcas; Adicionalmente pueden aparecer en lugares permitidos por la gramática. No son parte de los datos de caracter de un documento; un procesador de XML puede, pero no tiene que, hacer posible que la aplicación recupere el texto de comentarios.') }} Por compatibilidad, la cadena "--" (doble guión) no debe ocurrir dentro de comentarios. + <pre>[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->' +</pre> +</blockquote> +<p>Según lo descrito en la gramática de XML sobre comentarios, un comentario tiene la siguiente forma:</p> +<pre class="eval"><!-- cualquier letra o signo, menos guiones seguidos --> +</pre> +<h4 id="Ejemplos_2" name="Ejemplos_2">Ejemplos</h4> +<p>El siguiente es un comentario válido en XML y XHTML.</p> +<pre class="eval"><!-- comentario xml/xhtml válido --> +</pre> +<p>Los siguientes son comentarios no válidos en XML y XHTML.</p> +<pre class="eval"><!-- comentario xml -- no válido --> +<!-- comentario xml no válido ---> +<!-- comentario xml no válido -- > +</pre> +<h3 id="Otras_lecturas" name="Otras_lecturas">Otras lecturas</h3> +<ul> + <li><a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación HTML 4.01: 3.2.4 - Comentarios</a></li> + <li><a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación XML: 2.5 - Comentarios</a></li> + <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=144432">Bugzilla bug 144432</a></li> + <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=102127">Bugzilla bug 102127</a></li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Last Updated Date: May 19th, 2003</li> + <li>Copyright © 2001-2003 Netscape. All rights reserved.</li> + </ul> +</div> +<p> </p> diff --git a/files/es/web/html/microdatos/index.html b/files/es/web/html/microdatos/index.html new file mode 100644 index 0000000000..33e73cdb0d --- /dev/null +++ b/files/es/web/html/microdatos/index.html @@ -0,0 +1,207 @@ +--- +title: Microdatos +slug: Web/HTML/Microdatos +tags: + - HTML + - Microdatos + - Referencia + - busquedas +translation_of: Web/HTML/Microdata +--- +<h2 id="Resumen">Resumen</h2> + +<p>Los microdatos son una especificación HTML de <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> que se emplea para anidar metadatos en el contenido existente de las páginas web.[1] Buscadores, arañas web y navegadores pueden extraer y procesar los microdatos a partir de una página y utilizarlos para proveer una experiencia más enriquecida para los usuarios. Los buscadores se benefician considerablemente del acceso directo a estos datos estructurados, ya que les permite entender la información contenida en las páginas y ofrecer mejores resultados a sus usuarios. Los microdatos utilizan un vocabulario de apoyo para describir tanto los elementos como conjuntos de nombre y valor y así asignar valores a sus propiedades. Los microdatos representan un intento de brindar una manera más sencilla de anotar elementos HTML con etiquetas legibles por máquinas que los métodos similares consistentes en usar RDFa y microformatos.</p> + +<p>El Grupo de Trabajo de HTML del W3C no pudo encontrar un editor que se encargase de la especificación y, por ende, puso término a su desarrollo en 2013 con una «nota».</p> + +<p>En un nivel elevado, los microdatos consisten de un grupo de conjuntos nombre-valor. Tales grupos se denominan elementos, y cada conjunto nombre-valor es una propiedad. Los elementos y las propiedades los representan elementos ordinarios.</p> + +<ul> + <li>Para crear un elemento, se utiliza el atributo <strong>itemscope </strong>(‘alcance de elemento’).</li> + <li>Para añadir una propiedad a un elemento, el atributo <strong>itemprop</strong> (‘propiedad de elemento’)<strong> </strong>se emplea en uno de los descendientes del elemento.</li> +</ul> + +<h2 id="Vocabularios"><span class="mw-headline" id="Vocabularies">Vocabularios</span></h2> + +<p>Google, así como otros de los principales buscadores, admiten el vocabulario para datos estructurados de <a href="schema.org">Schema.org</a>. Este vocabulario define un conjunto estandarizado de nombres de tipos y de propiedades: por ejemplo, <a href="http://schema.org/MusicEvent">Evento musical de Schema.org</a> señala conciertos, e incluye las propiedades <em><a href="http://schema.org/startDate">startDate</a></em> (‘fecha inicial’) y <em><a href="http://schema.org/location">location</a></em> (‘ubicación’) para definir los detalles clave del acontecimiento. En este caso, <a href="http://schema.org/MusicEvent">Evento musical de Schema.org</a> es el URL usado por <em>itemtype</em> y <em>startDate</em>, y la ubicación corresponde a las <em>itemprop</em> que defina <a href="http://schema.org/MusicEvent">Evento musical de Schema.org</a>.</p> + +<div class="note"> +<p><strong>Nota:</strong> para obtener más información sobre los atributos <em>itemtype</em>, véase <a href="http://schema.org/Thing">http://schema.org/Thing</a> (en inglés)</p> +</div> + +<p>Los vocabularios de microdatos brindan la semántica, o el significado, de los elementos. Los programadores web pueden diseñar un vocabulario personalizado o servirse de los que existen disponibles en la web, como el ampliamente utilizado vocabulario de <a href="http://schema.org">Schema.org</a>. Schema.org ofrece una colección de vocabularios de etiquetado usados frecuentemente.</p> + +<p>Vocabularios usados frecuentemente:</p> + +<ul> + <li>Obras creativas: <em><a href="http://schema.org/CreativeWork">CreativeWork</a></em> (‘obra creativa’),<em> <a href="http://schema.org/Book">Book</a></em> (‘libro’), <em><a href="http://schema.org/Movie">Movie</a></em> (película),<em> <a href="http://schema.org/MusicRecording">MusicRecording</a></em> (‘grabación musical’),<em> <a href="http://schema.org/Recipe">Recipe</a></em> (‘receta’),<em> <a href="http://schema.org/TVSeries">TVSeries</a></em> (‘serie de televisión’)</li> + <li>Objetos distintos del texto incrustados: <em><a href="http://schema.org/AudioObject">AudioObject</a></em> (‘objeto de audio’), <em><a href="http://schema.org/ImageObject">ImageObject</a></em> (‘objeto de imagen’),<em> <a href="http://schema.org/VideoObject">VideoObject</a></em> (‘objeto de vídeo’)</li> + <li><em><a href="http://schema.org/Event">Event</a></em> (‘acontecimiento’)</li> + <li><a href="http://schema.org/docs/meddocs.html">Tipos relativos a la salud y la medicina</a>: las notas sobre los tipos relativos a la salud y la medicina se encuentran bajo <em><a href="http://schema.org/MedicalEntity">MedicalEntity</a></em> (‘entidad médica’)</li> + <li><em><a href="http://schema.org/Organization">Organization</a></em> (‘organización’)</li> + <li><em><a href="http://schema.org/Person">Person</a></em> (‘persona’)</li> + <li><em><a href="http://schema.org/Place">Place</a></em> (‘sitio’), <em><a href="http://schema.org/LocalBusiness">LocalBusiness</a></em> (‘negocio local’), <em><a href="http://schema.org/Restaurant">Restaurant</a></em> (‘restaurante’)</li> + <li><em><a href="http://schema.org/Product">Product</a></em> (‘producto’), <em><a href="http://schema.org/Offer">Offer</a></em> (‘oferta’), <em><a href="http://schema.org/AggregateOffer">AggregateOffer</a></em> (‘oferta general’)</li> + <li><em><a href="http://schema.org/Review">Review</a></em> (‘reseña’), <em><a href="http://schema.org/AggregateRating">AggregateRating</a></em> (‘valoración totalizada’)</li> + <li><em><a href="http://schema.org/Action">Action</a></em> (‘acción’)</li> + <li><em><a href="http://schema.org/Thing">Thing</a></em> (‘cosa’)</li> + <li><em><a href="http://schema.org/Intangible">Intangible</a></em></li> +</ul> + +<p>Con el objeto de mejorar los resultados de las búsquedas, las empresas operarias de los principales buscadores, como Google, Microsoft y Yahoo!, dependen del vocabulario de <a href="http://schema.org/">Schema.org</a>. Para algunos propósitos específicos, es necesario diseñar un vocabulario especializado. Siempre que resulta posible, se anima a los autores a servirse de vocabularios existentes, dado que esto facilita la reutilización del contenido.</p> + +<h2 id="Regionalización"><span class="mw-headline" id="Localization">Regionalización</span></h2> + +<p><span class="mw-headline">En algunos casos, los buscadores que dan servicio a determinadas regiones pueden ofrecer ampliaciones de los microdatos específicas para tales regiones. Por ejemplo, <a href="https://www.yandex.com/">Yandex</a>, un buscador importante en Rusia, admite microformatos como <em>hCard</em> (datos de contacto de empresas), <em>hRecipe</em> (recetas de cocina), <em>hReview</em> (reseñas de mercado) y <em>hProduct</em> (datos de productos) y proporciona su propio formato para definir términos y mostrar artículos enciclopédicos. Se creó esta ampliación para solucionar problemas relativos a la transliteración entre los alfabetos cirílico y latino. Como consecuencia de la aplicación de parámetros de marcado adicionales del vocabulario de Schema, la indización de la información de sitios web en lengua rusa se hizo considerablemente más satisfactoria.</span></p> + +<h2 id="Atributos_globales"><span class="mw-headline" id="Global_attributes">Atributos globales</span></h2> + +<p><span class="mw-headline"><em><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></em>: el identificador unívoco y global de un elemento</span>.</p> + +<p><span class="mw-headline"><em><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></em>: utilizado para añadir propiedades a un elemento. Cualquier elemento </span>HTML puede contener un atributo <em>itemprop</em> definido, y tal <em>itemprop</em> consiste de un nombre y un valor.</p> + +<p><span class="mw-headline"><em><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></em>: las </span>propiedades que no desciendan de un elemento y contengan el atributo <code>itemscope</code> pueden asociarse con el elemento a través de una <em><strong>itemref</strong></em>. <em>Itemref</em> proporciona una lista de identificadores de elementos (distintos de los <code>itemid</code>s) con propiedades adicionales en otras partes del documento.</p> + +<p><span class="mw-headline"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope"><em>itemscope</em></a>: </span><em>Itemscope</em> (por lo general) funciona en conjunto con <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype"><em>itemtype</em> </a>para especificar que el HTML contenido en un bloque se refiere a un término concreto. <em>itemscope</em> crea el elemento y define el alcance del <em>itemtype</em> asociado con él. <em>itemtype</em> es un URL válido de un vocabulario (como <a class="external external-icon" href="http://schema.org/">Schema.org</a>) que describe el elemento y el contexto de sus propiedades.</p> + +<p><span class="mw-headline"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype"><em>itemtype</em></a>: Es</span>pecifica el URL del vocabulario que se empleará para definir <em>itemprops</em> (‘propiedades de elementos’) en la estructura de datos. Se emplea <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a></em> para establecer el alcance del área de funcionamiento del vocabulario establecido por <em>itemtype</em> dentro de la estructura de datos.</p> + +<h2 id="Ejemplo"><span class="mw-headline" id="Example">Ejemplo</span></h2> + +<h3 id="HTML"><span class="mw-headline">HTML</span></h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/SoftwareApplication"> + <span itemprop="name">Angry Birds</span> - + + REQUIRES <span itemprop="operatingSystem">ANDROID</span><br> + <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/> + + <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + RATING: + <span itemprop="ratingValue">4.6</span> ( + <span itemprop="ratingCount">8864</span> ratings ) + </div> + + <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> + Price: $<span itemprop="price">1.00</span> + <meta itemprop="priceCurrency" content="MXN" /> + </div> +</div></pre> + +<h3 id="Datos_estructurados">Datos estructurados</h3> + +<div class="VIpgJd-VgwJlc-bN97Pc"> +<div class="ibnC6b-sM5MNb"> +<div class="NbYDle"> +<div class="SmKAyb-jyrRxf IQ5j-oKdM2c" style="padding-left: 0px;"> +<div class="jyrRxf-eEDwDf l5asRc"> +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1"><span>SoftwareApplication (</span>http://schema.org/SoftwareApplication)</td> + </tr> + <tr> + <td>itemprop</td> + <td><span>name</span></td> + <td><span>Angry Birds</span></td> + </tr> + <tr> + <td>itemprop</td> + <td><span>operatingSystem</span></td> + <td><span>ANDROID</span></td> + </tr> + <tr> + <td>itemprop</td> + <td><span>applicationCategory</span></td> + <td><span>GameApplication (http://schema.org/GameApplication)</span></td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1"><span>aggregateRating</span> [<span>AggregateRating</span>]</td> + </tr> + <tr> + <td>itemprop</td> + <td><span>ratingValue</span></td> + <td><span>4.6</span></td> + </tr> + <tr> + <td>itemprop</td> + <td><span>ratingCount</span></td> + <td><span>8864</span></td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1"><span>offers</span> [<span>Offer</span>]</td> + </tr> + <tr> + <td>itemprop</td> + <td><span>price</span></td> + <td><span>1.00</span></td> + </tr> + <tr> + <td>itemprop</td> + <td><span>priceCurrency</span></td> + <td><span>USD</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> +</div> +</div> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('HTML', '', '100', '', 'Web/HTML/Microdata') }}</p> + +<div class="note"> +<p><strong>Nota</strong>: una útil herramienta para extraer estructuras de microdatos a partir de HTML es la <a href="https://developers.google.com/structured-data/testing-tool/ Structured Data Testing Tool">Herramienta de pruebas de datos estructurados</a> de Google. Ponla a prueba en el HTML mostrado más arriba.</p> +</div> + +<h2 id="Compatibilidad_con_navegadores"><span class="mw-headline"><strong>Compatibilidad con navegadores</strong></span></h2> + +<div class="htab"><a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a> + +<ul> + <li class="selected"><a>Escritorio</a></li> + <li><a>Móvil</a></li> +</ul> + +<div id="compat-desktop" style="display: block;"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td> + <p>Compatibilidad<br> + básica</p> + </td> + <td>No</td> + <td>16<br> + Eliminada en 49.</td> + <td>No</td> + <td>No</td> + <td>No</td> + </tr> + </tbody> +</table> +</div> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">Atributos globales</a></li> +</ul> diff --git a/files/es/web/html/microformatos/index.html b/files/es/web/html/microformatos/index.html new file mode 100644 index 0000000000..6dd963a227 --- /dev/null +++ b/files/es/web/html/microformatos/index.html @@ -0,0 +1,29 @@ +--- +title: Microformatos +slug: Web/HTML/microformatos +translation_of: Web/HTML/microformats +--- +<p><span class="seoSummary"><span class="p-summary"><dfn>Los <a href="http://microformats.org">Microformatos</a></dfn> (en ocasiones abreviados como <strong>μF) </strong>son convenciones simples para incrustar semántica en HTML y para brindar rápidamente un API utilizable por los motores de búsqueda, agregadores y otras herramientas</span></span> Estos pequeños patrones de HTML son usados para marcar entidades que varían entre fundamentales hasta información específica de un dominio, tales como personas, organizaciones, eventos y ubicaciones.</p> + +<p>Su formato simple busca ser útil para máquinas y también legible para humanos.</p> + +<p>Muchas librerías en existencia se han desarrollado para estos microformatos incluyendo pero sin limitarse a hCard y hCalendar.</p> + +<p>Los microformatos son soportados por la mayoría de motores de búsqueda.</p> + +<h2 id="Microformats_microdata_and_RDFa">Microformats, microdata and RDFa</h2> + +<p><strong>Microdata</strong> are a WHATWG HTML specification also used to nest metadata within existing content on web pages.<br> + <strong>RDFa</strong> is a W3C standard, applying RDF to web pages.<br> + <strong>Microformats</strong> are no standard, although hCard and hCalendar conventions are widely used.</p> + +<p> They all aim at adding semantics to web documents.</p> + +<h2 id="See_also" style="line-height: 30px; font-size: 2.14285714285714rem;">See also</h2> + +<ul> + <li>{{Interwiki("wikipedia", "Microformat")}} on Wikipedia</li> + <li><a href="http://www.microformats.org">Microformats official website</a></li> + <li><a href="http://microformats.org/wiki/search_engines">Search engines support</a> on Microformats official website</li> + <li><a href="https://indiewebcamp.com/microformats">IndieWebCamp</a></li> +</ul> diff --git a/files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html new file mode 100644 index 0000000000..6509450cf9 --- /dev/null +++ b/files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html @@ -0,0 +1,34 @@ +--- +title: Optimizar sus páginas para análisis especulativo +slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +tags: + - Avanzado + - Desarrollo web + - HTML + - HTML5 +translation_of: Glossary/speculative_parsing +--- +<p><span class="seoSummary">Tradicionalmente en los navegadores el analizador de HTML corre en el hilo de ejecución principal y se queda bloqueado después de una etiqueta </script> hasta que el código se haya recuperado y ejecutado. El analizador de HTML de Firefox 4 y posteriores soporta análisis especulativo fuera del hilo de ejecución principal. Este analiza anticipadamente mientras el codigo está siendo descargado y ejecutado. Como en Firefox 3.5 y 3.6, el analizador de HTML es el que inicia la carga especulativa de código, las hojas de estilos y las imagenes que va encontrando en el flujo de la página. Sin embargo en Firefox 4 y posteriores el analizador de HTML también ejecuta el algoritmo especulativo de la construcción del árbol HTML. La ventaja es que cuando lo especulado tiene exito, no hay necesidad de reanalizar la parte del archivo de entrada que ya fue analizada junto la descarga de código, hojas de estilo y las imágenes. La desventaja es que se ha realizado un trabajo inútil cuando la especulación fracasa.</span></p> + +<p>Este documento le ayuda a evitar este tipo de situaciones que hacen que la especulación falle y ralentize la carga de la página.</p> + +<h2 id="Haciendo_cargas_especulativas_exitosas">Haciendo cargas especulativas exitosas</h2> + +<p>Hay solo una regla para hacer cargas especulativas exitosas en scripts enlazados, hojas de estilo e imagenes:</p> + +<ul> + <li>Si usted usa el elemento <base> para anular la base URI de su pagina, ponga el elemento en la parte no-escrita de el documento. No la añada via document.write() o document.createElement().</li> +</ul> + +<h2 id="Evitando_perder_la_salida_del_generador_de_arbol">Evitando perder la salida del generador de arbol</h2> + +<p>La generación de árbol especulativo falla cuando <code>document.write()</code> cambia el estado del generador de árbol de tal manera que el estado especulativo después del tag <code></script></code> no se mantiene cuando todo el contenido es inertado por <code>document.write()</code> ha sido analizado. Sin embargo, sólo usos inusuales de <code>document.write()</code> causa problemas. Aquí están las cosas a evitar:</p> + +<ul> + <li>No escriba árboles desbalanceados. <code><script>document.write("<div>");</script></code> está mal. <code><script>document.write("<div></div>");</script></code> es correcto.</li> + <li>No escriba un token sin finalizar. <code><script>document.write("<div></div");</script></code> esta mal.</li> + <li>No termine con un carater de retorno de carro. <code><script>document.write("Hello World!\r");</script></code> está mal. <code><script>document.write("Hello World!\n");</script></code> es correcto.</li> + <li>Note que escribiendo etiquetas balanceadas pueden causarse que se creen otras etiquetas desbalanceadas. Ej. <code><script>document.write("<div></div>");</script></code> dentro del elemento <code>head</code> será interpretado como <code><script>document.write("</head><body><div></div>");</script></code> el cual está desbalanceado.</li> + <li>No formatee parte de una tabla. <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> está mal. Sin embargo, <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code> está correcto.</li> + <li>HAGA: document.write dentro de otro elemento de formateo.</li> +</ul> diff --git a/files/es/web/html/quirks_mode_and_standards_mode/index.html b/files/es/web/html/quirks_mode_and_standards_mode/index.html new file mode 100644 index 0000000000..47877baa4f --- /dev/null +++ b/files/es/web/html/quirks_mode_and_standards_mode/index.html @@ -0,0 +1,53 @@ +--- +title: Modo Quirks y Modo Estándar +slug: Web/HTML/Quirks_Mode_and_Standards_Mode +tags: + - Desarrollo web + - Estándar Web + - Gecko + - Guía + - HTML + - XHTML +translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode +--- +<p>En los viejos días de la web, las páginas eran comúnmente escritas de dos formas: Una para navegador Netscape y otra para Microsoft Internet Explorer. Cuando los estándares de la web fueron creador por W3C, los navegadores no sólo empezaron a utilizarlos, tan pronto lo hicieron romperían los más existentes sitios en la Web. Sin embargo los navegadores introdujeron dos modos para tratar los nuevos estándares que cumplan que los sitios diferentemente de los viejos legados de sitios.</p> + +<p>Ahora hay tres modos usados por los motores de diseño en los navegadores web: modo quirks (<em>caprichoso</em>), modo casi estándar, y modo estándar completo. En el modo quirks, el diseño emula el comportamiento no estandar de Navigator 4 e Internet Explorer 5 para Windows que es lo requerido para no romper contenido ya existente en la Web. En modo estándar completo, el comportamiento es (o debería ser) el descrito en las especificaciones HTML y CSS. En modo casi estándar, hay implementados sólo algunos ajustes (quirks) pero no todos.</p> + +<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">¿Cómo determinan los navegadores qué modo usar?</h2> + +<p>Para documentos <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, los navegadores usan un DOCTYPE al principio del documento para decidir cómo manejarlo y si deben hacerl en modo quirks o estándar. Para asegurarse de que las página usa el modo estándar completo, debes poner el DOCTYPE como en este ejemplo:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset=UTF-8> + <title>Hello World!</title> + </head> + <body> + </body> +</html></pre> + +<p>El DOCTYPE mostrado en el ejemplo, <code><!DOCTYPE html></code>, es el más simple posible y el recomendado para usar en documentos HTML5. Las versiones anteriores del estándar HTML recomendaban otras variantes, pero todos los navegadores modernos usan ese DOCTYPE para el modo estándar completo, incluso las versiones antiguas de Internet Explorer (a partir de la 6). No hay motivos reales para usar un DOCTYPE más complicado, te arriesgas a elegir uno incorrecto o cometer un fallo y pasar al modo quirks en lugar del estándar.</p> + +<p>Asegúrate de poner el DOCTYPE justo al principio del documento HTML. Si pones cualquier cosa antes del DOCTYPE, como un comentario o una declaración XML, hará que versiones antiguas de Internet Explorer (9 y anteriores) interpreten la página en modo quirks.</p> + +<p>En HTML5, el único objetico del DOCTYPE es activar el modo estándar completo. Las versiones anteriores del estándar HTML daban información adicional en el DOCTYPE, pero ningún navegador usaba dicha información y sólo la usaba para cambiar entre el modo quirks o el estándar.</p> + +<p>Más información y detalles en <a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">cuándo eligen los navegadores entre los diferentes modos</a>.</p> + +<h3 id="XHTML">XHTML</h3> + +<p>Si sirves la página como <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> usando el MIME <code>application/xhtml+xml</code> en el <code>Content-Type</code> de la cabecera HTTP, no necesitas especificar un DOCTYPE para habilitar el modo estándar, porque esos documentos siempre usan el modo estándar completo. Aunque hay que aclarar que servir páginas como <code>application/xhtml+xml</code> hará que Internet Explorer 8 <a href="/en-US/docs/XHTML#Support" title="XHTML">muestre el diálogo de descarga</a> para contenido desconocido en lugar de mostrar la página, porque la primera versión de Internet Explorer que soporta XHTML es IE9.</p> + +<p>Si sirves contenido XHTML usando el MIME <code>text/html</code>, los navegadores lo leeran como HTML, y necesitarás poner un DOCTYPE para que usen el modo estándar.</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">¿Cómo puedo ver qué modo está siendo usado?</h2> + +<p>En Firefox, selecciona <em>Ver Información de Página</em> en el menú contextual, y selecciona la opción <em>Modo de Renderizado</em> (Render Mode).</p> + +<p>En Internet Explorer, pulsa <em>F12</em>, y buscar <em>Modo de Documento</em> (Document Mode)</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">¿Cuáles son las diferencias entre los modos?</h2> + +<p>Lee la <a href="/en-US/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">lista de quirks</a> y <a href="/en-US/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko%27s_%22Almost_Standards%22_Mode">modo casi estándar</a> para ver las diferencias entre los modos.</p> diff --git a/files/es/web/html/recursos_offline_en_firefox/index.html b/files/es/web/html/recursos_offline_en_firefox/index.html new file mode 100644 index 0000000000..dfed8fe0d5 --- /dev/null +++ b/files/es/web/html/recursos_offline_en_firefox/index.html @@ -0,0 +1,382 @@ +--- +title: Usar el caché de aplicaciones +slug: Web/HTML/Recursos_offline_en_firefox +tags: + - Firefox 3.5 + - HTML5 + - aplicaciones web sin conexión + - para_revisar +translation_of: Web/HTML/Using_the_application_cache +--- +<h2 id="Introducción">Introducción</h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a> proporciona un mecanismo de <em>caché de aplicación</em> que permite que las aplicaciones basadas en la web se ejecuten sin conexión. Los desarrolladores pueden usar la interface de <strong>Caché de aplicaciones</strong> (<em>AppCache</em>) para especificar los recursos que el navegador debería guardar en caché y tener disponibles para los usuarios cuando no estén conectados. Las aplicaciones que están en caché se cargan y funcionan correctamente aunque los usuarios hagan clic en el botón recargar cuando no están conectados.</p> + +<p>Usar el caché de aplicaciones le da a la aplicación los siguientes beneficios:</p> + +<ul> + <li>Navegación sin conexión: los usuarios pueden navegar un sitio aún cuando no estén conectados.</li> + <li>Velocidad: los recursos en caché son locales, y por lo tanto, se cargan más rápido.</li> + <li>Carga al servidor reducida: el navegador solamente descarga desde el servidor recursos que han cambiado..</li> +</ul> + +<h3 id="¿Cómo_funciona_el_caché_de_aplicaciones">¿Cómo funciona el caché de aplicaciones?</h3> + +<h3 id="Habilitando_caché_de_aplicaciones">Habilitando caché de aplicaciones</h3> + +<p>Para habilitar el caché de aplicaciones, debe incluir el atributo {{htmlattrxref("manifest", "html")}} en el elemento {{HTMLElement("html")}} en las páginas de sus aplicaciones, como se muestra en el siguiente ejemplo:</p> + +<div> +<pre class="brush: html"><span class="brush: html"><html manifest="ejemplo.appcache"> </span> + ... +</html> +</pre> +</div> + +<p>El atributo manifest referencia un archivo <strong>manifest de caché</strong>, que es un archivo de texto que lista los recursos (archivos) que el navegador deberá guardar en caché para la aplicación.</p> + +<p>Debería incluir el atributo <code>manifest</code> en cada página de la aplicación que quiera guardar en caché. El navegador no guardará páginas que no contengan el atributo <code>manifest</code>, a menos que esas páginas estén específicamente listadas en el archivo manifest en sí mismo. No es necesario listar todas las páginas que se quieran guardar en caché en el archivo de manfifesto, el navegador implícitamente agrega cada página que el usuario visite y tenga el atributo <code>manifest</code> establecido para caché de aplicación.</p> + +<p>Algunos navegadores (ej. Firefox) muestran una notificación la primera vez que un usuario carga una aplicación que usa caché de aplicaciones La barra de notificaciones muestra un mensaje parecido a :</p> + +<p style="margin-left: 40px;">Este sitio web (<code>www.ejemplo.com</code>) está pidiendo guardar datos en su equipo para usar sin conexión. [Permitir] [Nunca para este sitio] [No por ahora]</p> + +<p>El término "offline(-enabled) applications" a veces se refiere específicamente a aplicaciones a las que el usuario ha permitido que usen capacidades sin conexión.</p> + +<h3 id="Cargando_documentos">Cargando documentos</h3> + +<div> +<p>Es uso de caché de aplicaciones modifica el proceso normal de la carga de un documento:</p> + +<ul> + <li>Si existe caché de aplicaciones, el navegador carga el documento y sus recursos asociados directamente desde ahí, sin acceder a la red. Esto acelera el tiempo de carga del documento.</li> + <li>El navegador entonces verifíca si hubo actualizaciones al manifest de caché en el servidor.</li> + <li>Si el manifest de caché fue actualizado, el navegador descarga la nueva versión del archivo y de los recursos listados en él. Esto se realiza en segundo plano y no afecta el rendimiento de forma significativa.</li> +</ul> + +<p>El proceso para cargar documentos y actualizar el caché de aplicaciones está especificado con gran detalle aquí debajo:</p> +</div> + +<ol> + <li>Cuando el navegador visita un documento que incluye el atributo <code>manifest</code>, si no existe caché de aplicaciones, el navegador carga el documento y baja todas las entradas listadas en el archivo del manifest, creando la primera versón de caché de aplicaciones. </li> + <li>Posteriores visitas a ese documento causan que el navegador cargue el documento y otros archivos especificados en el manifest desde el caché de aplicaciones (no desde el servidor). Además, el navegador envía un evento <code>checking</code> al objeto <code><a href="https://developer.mozilla.org/en/DOM/window.applicationCache" title="en/DOM/window.applicationCache">window.applicationCache</a></code> y descarga el archivo de manifest, siguiendo las reglas de caché HTTP apropiadas.</li> + <li>Si la copia del manifest actualmente en caché está actualizada, el navegador envía un evento <code>noupdate</code> al objeto <code>applicationCache</code> y el proceso de actualización está completo. Hay que tener en cuenta que si se cambia en el servidor cualquier recurso en caché, se deberá cambiar también el archivo de manifest, para que el navegador sepa que deberá descargar los recursos nuevamente.</li> + <li>Si el archivo de manifest <em>ha</em> cambiado, todos los archivos listados en el manifest—así como los que se agregaron al caché llamando <code><a href="https://developer.mozilla.org/en/nsIDOMOfflineResourceList#add.28.29" title="en/nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>—se descargarán en un caché temporario, siguiendo las reglas de caché HTTP apropiadas. Para cada archivo descargado en este caché temporario, el navegador envía un evento <code>progress</code> al objeto <code>applicationCache</code>. Si ocurre cualquier error, el navegador envía un evento <code>error</code> y la actualización se detiene.</li> + <li>Una vez que todos los archivos han sido recuperados exitosamente, son movidos al caché sin conexión real automáticamente y un evento <code>cached</code> es enviado al objeto <code>applicationCache</code>. Como el documento ya ha sido cargado en el navegador desde caché, la actualización no se mostrará hasta que el documento sea re-cargado (ya sea manualmente o por programa).</li> +</ol> + +<h2 id="Ubicación_del_almacenamiento_y_limpiando_el_caché_sin_conexión">Ubicación del almacenamiento y limpiando el caché sin conexión</h2> + +<p>En Chrome se puede limpiar el caché sin conexión seleccionando "Clear browsing data..." en las preferencias o visitando <a class="external" title="chrome://appcache-internals/">chrome://appcache-internals/</a>. Safari tiene una configuración similar"Vaciar cache" en sus preferencias, pero se requiere el reinicio del navegador.</p> + +<p>En Firefox, el caché sin conexión se guarda en un lugar separado del perfil de Firefox profile—cerca del caché de disco regular:</p> + +<ul> + <li>Windows Vista/7: <code>C:\Users\<usuario>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<nombre de perfil>\OfflineCache</code></li> + <li>Mac/Linux: <code>/Users/<usuario>/Library/Caches/Firefox/Profiles/<salt>.<nombre de perfil>/OfflineCache</code></li> +</ul> + +<p>En Firefox el estado actual del caché de aplicaciones puede ser inspeccionado en la página the <code>about:cache</code> (debajo del encabezado "Offline cache device"). El caché sin conexión pude limpiarse para cada sitio por separado usando el botón "Eliminar..." Herramientas -> Opciones -> Avanzadas -> Red -> Datos sin conexión.</p> + +<p>Antes de Firefox 11, ni Herramientas -> Limpiar historial reciente ni Herramientas -> Opciones -> Avanzadas -> Red -> Datos sin conexión -> Limpiar ahora borraban el caché sin conexión. Esto ha sido solucionado.</p> + +<p>Véase también <a href="https://developer.mozilla.org/en/DOM/Storage#Storage_location_and_clearing_the_data" title="en/DOM/Storage#Storage location and clearing the data">limpiar los datos de almacenamiento de DOM</a>.</p> + +<div> +<p>Los cachés de aplicaciones también pueden quedar obsoletos. Si el archivo de manifest de una aplicación es eliminado del servidor, el navegador elimina todo caché de la aplicación que use aquel manifest y envía un evento "obsoleted" al objeto <code>applicationCache</code>. Esto cambia el estado de caché de la aplicación a <code>OBSOLETE</code>.</p> +</div> + +<h2 id="El_archivo_de_manifest_de_caché">El archivo de manifest de caché</h2> + +<h3 id="Referenciando_un_archivo_de_manifest_de_caché">Referenciando un archivo de manifest de caché</h3> + +<p>El atributo <code>manifest</code> en una aplicación web puede especificar ya sea la ruta relativa de un archivo de manifest de caché o una URL absoluta (URLs absolutas deben estar en el mismo origen que la aplicación). Un archivo de manifest de caché puede tener cualquier extensión de archivo, pero debe ser enviada con el tipo MIME <code>text/cache-manifest</code>.</p> + +<div class="note"><strong>Nota: </strong>En servidores Apache, el tipo MIME para los archivos de manifest (.appcache) puede establecerse agregando <code>AddType text/cache-manifest .appcache</code> a un archivo .htaccess dentro del directorio raíz o del mismo directorio que la aplicación.</div> + +<h3 id="Entradas_en_el_archivo_de_manifest_de_caché">Entradas en el archivo de manifest de caché</h3> + +<p>El archivo de manifest de caché es un archivo de texto simple que lista los recursos que el navegador debería guardar en caché para acceder sin conexión. Los recursos son identificados por URI. Las entradas listadas en el manifest de caché deben tener el mismo esquema, servidor y puerto que el manifest. </p> + +<h3 id="Ejemplo_1_un_archivo_de_manifest_de_caché_simple">Ejemplo 1: un archivo de manifest de caché simple</h3> + +<div> +<p>El siguiente es un archivo de manifest de caché simple, <code>ejemplo.appcache</code>, para un sitio web imaginario en <span class="nowiki">www.ejemplo.com</span>.</p> + +<pre class="eval">CACHE MANIFEST +# v1 - 2011-08-13 +# Esto es un comentario. +<span class="nowiki">http://www.ejemplo.com/index.html</span> +<span class="nowiki">http://www.ejemplo.com/encabezado.png</span> +<span class="nowiki">http://www.ejemplo.com/blah/blah</span> +</pre> + +<p>Un archivo de manifest de caché puede incluir tres secciones (<code>CACHE</code>, <code>NETWORK</code> y <code>FALLBACK</code>, discutidas debajo). En el ejemplo mencionado, no hay encabezado de sección, así que todoas las líneas de datos se asumen como si estuvieran en la sección explícita (<code>CACHE</code>), lo que significa que el navegador deberá guardar en caché todos los recursos listados en el caché de aplicación. Los recursos pueden ser especificados como URLs absolutas o relativas (ej. <code>index.html</code>).</p> + +<p>El comentario "v1" en el ejemplo está ahí por una buena razón. Los navegadores solamente actualizan el caché de aplicación cuando el archivo de manifest cambia byte por byte. Si se cambia un recurso en caché (por ejemplo, si se actualiza la imagen <code>header.png</code> con nuevo contenido), se debe cambiar el contenido del archivo de manifest para que los navegadores sepan que se necesita actualizar el caché. Se puede hacer cualquier cambio al archivo de manifest, pero cambiar el número de versión es una práctica recomendada.</p> + +<div class="warning"><strong>Importante:</strong> No hay que especificar el manifest en el mismo archivo de manifest Do not specify the manifest, porque sería casi imposible informar al navegador que hay un nuevo manifest disponible.</div> + +<h3 id="Secciones_en_un_archivo_de_manifest_de_caché_CACHE_NETWORK_y_FALLBACK">Secciones en un archivo de manifest de caché: <code>CACHE</code>, <code>NETWORK</code> y <code>FALLBACK</code></h3> + +<p>Un manifest puede tener tres secciones distintas: <code>CACHE</code>, <code>NETWORK</code> y <code>FALLBACK</code>.</p> + +<dl> + <dt><code>CACHE:</code></dt> + <dd>Esta es la sección predeterminada para las entradas en el archivo de manifest de caché. Los archivos listados bajo el encabezado de sección <code>CACHE:</code> (o inmediatamente después de la línea <code>CACHE MANIFEST</code>) son guardados en caché explícitamente después de ser descargados la primera vez.</dd> + <dt><code>NETWORK:</code></dt> + <dd>Los archivos listados bajo el encabezado de sección <code>NETWORK:</code> en el archivo de manifest de caché son recursos en <em>lista blanca</em> que requieren una conexión al servidor. Todos los pedidos a esos recursos evitan el caché aunque el usuario esté desconectado. Se pueden usar comodines.</dd> + <dt><code>FALLBACK:</code></dt> + <dd>La sección <code>FALLBACK:</code> especifica las páginas que el navegador debería usar si un recurso no es accesible. Cada entrada en esta sección lista dos URIs—lla primera es el recurso, la seguda es el fallback. Ambas URIs deben ser relativas y del mismo origen que el archivo de manifest. Se pueden usar comodines.</dd> +</dl> + +<p>Las secciones <code>CACHE</code>, <code>NETWORK</code> y <code>FALLBACK </code>pueden lsitarse en cualquier orden en el archivo de manifest y cada sección puede aparecer más de una vez en un manifest.</p> + +<h3 id="Ejemplo_2_un_archivo_de_manifest_de_caché_más_completo">Ejemplo 2: un archivo de manifest de caché más completo</h3> + +<p>El siguiente es un archivo de manifest de caché para el sitio web imaginario en <span class="nowiki">www.ejemplo.com</span>:</p> + +<pre class="eval">CACHE MANIFEST +# v1 2011-08-14 +# Este es otro comentario +index.html +cache.html +style.css +image1.png + +# Usar desde la red si está disponible +NETWORK: +network.html + +# Contenido de fallback +FALLBACK: +/ fallback.html +</pre> + +<p>Este ejemplo usa las secciones <code>NETWORK</code> y <code>FALLBACK</code> para especificar la página <code>network.html</code> que deber ser recuperada desde la red y que la página <code>fallback.html</code> servirá como fallback (ej. en caso que una conexión al servidor no pueda establecerse).</p> + +<h3 id="Estructura_de_un_archivo_de_manifest_de_caché">Estructura de un archivo de manifest de caché</h3> + +<p>Los archivos de manifest de caché deben enviarse con el tipo MIME <code>text/cache-manifest</code>. Todos los recursos servidos usando este tipo MIME deben seguir la sintaxis para un manifest de caché de aplicación, como se define en esta sección.</p> + +<p>Los manifests de caché son archivos de texto en formato UTF-8 y pueden incluír opcionalmente un caracter BOM. Las nuevas líneas pueden ser representadas por salto de línea (<code>U+000A</code>), retorno de carro (<code>U+000D</code>) o ambos retorno de carro y salto de línea.</p> + +<p>La primera línea del manifest de caché debe consistir en la cadena <code>CACHE MANIFEST</code> (con un solo espacio <code>U+0020</code> entre ambas palabras), seguido de cero o más espacios con caracteres de tabulación. Cualquier otro texto en la línea es ignorado.</p> + +<p>El resto del manifest de caché debe estar compuesto por cero o más de las siguientes líneas:</p> + +<dl> + <dt>Línea en blanco</dt> + <dd>Se pueden usar líneas en blanco compuestas por cero o más espacios y caracteres de tabulación.</dd> + <dt>Comentario</dt> + <dd>Los comentarios consisten en cero o más tabulaciones o espacios seguidos por un caracter <code>#</code> seguido de cero o más caracteres del texto del comentario. Los comentarios pueden usarse solamente en sus propias líneas y no pueden agregarse a otras líneas. Esto signifíca que no puede espcificar identificadores de fragmento.</dd> + <dt>Encabezado de sección</dt> + <dd>Los encabezados de sección especifican qué sección del manifest de caché está siendo manipulada. Hay tres encabezados de sección posibles:</dd> +</dl> + +<blockquote> +<table class="standard-table"> + <tbody> + <tr> + <th>Encabezado de sección</th> + <th>Descripción</th> + </tr> + <tr> + <td><code>CACHE:</code></td> + <td>Cambia a la sección explícita del manifest de caché (esta es la sección predeterminada).</td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td>Cambia a la sección de lista blanca del manifest de caché.</td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td>Cambia a la sección fallback del manifest de caché.</td> + </tr> + </tbody> +</table> +</blockquote> + +<dl> + <dd>La línea de encabezado de sección puede incluir espacios en blanco, pero debe incluir los dos puntos (<code>:</code>) en el nombre de sección.</dd> + <dt>Datos de sección</dt> + <dd>El formato de las líneas de datos varía de sección a sección. En la sección explícita (<code>CACHE:</code>), cada línea es una URI o referencia IRI a un recurso a guardar en caché (no se permiten caracteres comodines en esta sección). El espacio en blanco se permite antes y después de la URI o IRI en cada línea. En la sección Fallback cada línea es una URI o referencia IRI válida a un recurso, seguida por un recurso de fallback que será enviado cuando la comunicación con el servidor no pueda establecerse. En la sección Network, cada línea es una URI o referencia IRI válida a un recurso a obtener desde la red (se permite el caracter comodín * en esta sección). + <div class="note"><strong>Nota: </strong>URIs relativas son relativas a la URI del manifest de caché, no a la URI del documento que hace referencia al manifest.</div> + </dd> +</dl> + +<p>Los archivos de manifest de caché pueden cambiar de sección a sección a voluntad (cada encabezado de sección puede usarse más de una vez) y se permite que las secciones estén vacías.</p> + +<h2 id="Recursos_en_un_caché_de_aplicación">Recursos en un caché de aplicación</h2> + +<p>Un caché de aplicación siempre incluye al menos un recurso, identificado por URI. Todos los recursos entran en una de las siguientes categorías:</p> + +<dl> + <dt>Entradas maestras</dt> + <dd>Estos son recursos adicionados al caché porque un contexto de navegación visitado por el usuario incluyó un documento que indicó que estaba en caché usando el atributo <code>manifest</code>.</dd> + <dt>Entradas explícitas</dt> + <dd>Estos recursos están listados explícitamente en el archivo de manifest de caché de la aplicación.</dd> + <dt>Entradas de red</dt> + <dd>Estos son recursos listados en el archivo de manifest de caché de la aplicación como entradas de red.</dd> + <dt>Entradas de fallback</dt> + <dd>Estos son recursos listados en el archivo de manifest de caché de la aplicación como entradas de fallback.</dd> +</dl> + +<div class="note"><strong>Nota:</strong> Los recursos pueden estar etiquetados en múltiples categorías y por lo tanto ser categorizados como entradas múltiples. Por ejemplo, una entrada puede ser explícita y fallback a la vez.</div> + +<p>Las categorías de recursos se describen con más detalle debajo.</p> + +<h3 id="Entradas_principales">Entradas principales</h3> + +<p>Una entrada maestra es cualquier archivo HTML que incluya un atributo {{ htmlattrxref("manifest","html") }} en su elemento {{ HTMLElement("html") }}. Por ejemplo, digamos que tenemos el archivo <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.ejemplo.com/entrada.html</a></code>, que incluye el siguiente texto:</p> + +<pre class="brush: html"><html manifest="ejemplo.appcache"> + <h1>Ejemplo de cache de aplicacion</h1> +</html> +</pre> + +<p>Si <code>entrada.html</code> no está listado en el archivo de manifest de caché <code>ejemplo.appcache</code>, visitar la pagina <code>entrada.html</code> causa que se agregue al caché de aplicación el archivo <code>entrada.html</code> como entrada maestra.</p> + +<h3 id="Entradas_explícitas">Entradas explícitas</h3> + +<p>Las entradas explícitas son recursos que están listados explicitamente en la seccion <code>CACHE </code>de un archivo de manifest de caché.</p> + +<h3 id="Entradas_de_red">Entradas de red</h3> + +<p>La sección <code>NETWORK</code> de un archivo de manifest de caché especifíca recurso para los cuales una aplicacion web requiere acceso a internet. Las entradas de red en el caché de aplicación son escencialmente una "lista blanca online"—URIs especificadas en la sección <code>NETWORK</code> se cargarán desde el servidor en lugar del caché. Esto permite que el modelo de seguridad del navegador proteja al usuario de problemas de seguridad potenciales al limitar el acceso a recursos aprobados.</p> + +<p>Como ejemplo, puedes usar entradas en la seccion red para cargar y ejecutar scripts y otro código desde el servidor en lugar del caché:</p> + +<pre>CACHE MANIFEST +NETWORK: +/api +</pre> + +<p>La sección de caché de manifest listada debajo asegura que las peticiones para cargar los recursos contenidos en <code><a class="external" href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> siempre van a la red sin intentar acceder a la caché.</p> + +<div class="note"><strong>Nota</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">Simplemente</span> <span class="hps">omitiendo</span> <span class="hps">las entradas</span> principales</span> (archivos que tienen el atributo <code>manifest</code> en el elemento <code>html</code>) del archivo manifest no tendrá el mismo resultado, porque las entradas principales serán agregadas—y posteriormente servida por—la aplicación de caché. </div> + +<h3 id="Entradas_fallback">Entradas fallback</h3> + +<p>Las entradas fallback son usadas cuando un intento de cargar los recursos falla. Por ejemplo, digamos que el archivo de anifest de caché <code><a class="external" href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> incluye el siguiente contenido:</p> + +<pre>CACHE MANIFEST +FALLBACK: +example/bar/ example.html +</pre> + +<p>Cualquier petición a <code><a class="external" href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> o cualquiera de sus directorios <span id="result_box" lang="es"><span class="hps">y</span> <span class="hps">su contenido</span> hace que <span class="hps">el explorador</span> <span class="hps">emita</span> <span class="hps">una solicitud de red</span> <span class="hps">al</span> <span class="hps">intentar cargar el</span> <span class="hps">recurso solicitado</span></span>. Si la petición falla, debido a una falla de la red o un error de servidor de cualquier tipo, el navegador carga el archivo <code>example.html</code> en su lugar.</p> + +<h2 id="Estados_de_caché">Estados de caché</h2> + +<p>Cada aplicación de caché tiene un <strong>estado</strong>, que indica el estado actual del caché. Cachés que comparten el mismo manifest URI comparten el mismo estado de caché, el cual puede ser uno de los siguientes:</p> + +<dl> + <dt><code>UNCACHED</code></dt> + <dd><span id="result_box" lang="es"><span class="hps">Un valor</span> <span class="hps">especial que indica</span> <span class="hps">que un objeto</span> <span class="hps">caché de la aplicación</span></span> no está inicializado en su totalidad.</dd> + <dt><code>IDLE</code></dt> + <dd>La caché de aplicación no está actualmente en el proceso de actualización.</dd> + <dt><code>CHECKING</code></dt> + <dd>El manifest se ha obtenido y revisado para actualizaciones.</dd> + <dt><code>DOWNLOADING</code></dt> + <dd>Recursos han sido descargados para ser añadidos al caché, debido a un cambio de recursos de manifest.</dd> + <dt><code>UPDATEREADY</code></dt> + <dd>Hay una nueva versión de la aplicación de caché disponible. Hay un correspondiente evento <code>updateready</code>, que es lanzado en lugar del evento <code>cached</code> cuando una nueva actualización acaba de ser descargada pero aún no ah sido activado el método <code>swapCache()</code>.</dd> + <dt><code>OBSOLETE</code></dt> + <dd>La aplicación de caché de grupo es ahora obsoleta.</dd> +</dl> + +<h2 id="Probando_para_actualizaciones_para_el_manifest_de_caché">Probando para actualizaciones para el manifest de caché</h2> + +<p>Puedes programar para ver si una aplicación tiene un archivo de actualización del manifest de caché, usando JavaScript. Desde que un archio de manifest de caché tiene que ser actualizado antes de que un script adjunte eventos escuchas para probar para actualizaciones, los scripts siempre deben probar <code>window.applicationCache.status</code>.</p> + +<pre class="brush: js">function onUpdateReady() { + alert('found new version!'); +} +window.applicationCache.addEventListener('updateready', onUpdateReady); +if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { + onUpdateReady(); +}</pre> + +<p> Para comenzar a probar manualmente para un nuevo archivo manifest, puedes usar <code>window.applicationCache.update()</code>.</p> + +<h2 id="Contra_indicaciones">Contra indicaciones</h2> + +<ul> + <li>Nunca accesar aplicacines de caché usando los parámetros tradicionales de GET (como <code>other-cached-page.html?parameterName=value</code>). Esto hará que el navegador omita el caché y trate de obtenerlo mediante la red. <span class="short_text" id="result_box" lang="es"><span class="hps">Para enlazar</span> <span class="hps">a los recursos</span> <span class="hps">almacenados en caché</span></span> que tienen parámetros cambiados a JavaScript usa parámetros en la parte del hash del enlace, como <code>other-cached-page.html#whatever?parameterName=value</code>.</li> + <li>Cuando las aplicaciones son almacenadas en caché, simplemente actualizando los recursos (archivos) que son usados en una página web no son suficientes para actualizar los archivos que han sido almacenados en caché. Debes actualizar el archivo de manifest de caché a sí mismo antes de que el navegador recupere y use los archivos actualizados. Puedes hacer esto programadamente usando <code>window.applicationCache.swapCache()</code>, <span id="result_box" lang="es"><span class="hps">aunque</span> <span class="hps">los recursos</span> <span class="hps">que</span> <span class="hps">ya han sido cargados</span> <span class="hps">no se verán afectados</span></span>. <span id="result_box" lang="es"><span class="hps">Para asegurarse de</span> <span class="hps">que los recursos</span> <span class="hps">se cargan desde</span> <span class="hps">una nueva</span> <span class="hps">versión de la</span> <span class="hps">caché de la aplicación</span><span>,</span> <span class="hps">la actualización de la</span> <span class="hps">página</span> <span class="hps">es ideal</span></span>.</li> + <li>Es una buena idea colocar cabeceras expiradas en tu sitio para los archivos <code>*.appcache</code> para que caduquen inmediatamente. Esto previene el riesgo de almacenar en caché archivos de manifest. Por ejemplo, en Apache puedes especificar <span id="result_box" lang="es"><span class="hps">una</span> <span class="hps">configuración de este tipo</span> <span class="hps">de la siguiente manera</span></span>:<br> + <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> +</ul> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.0</td> + <td>3.5</td> + <td>10.0</td> + <td>10.6</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.1</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>Nota: Versiones de Firefox anteriores a la 3.5 ignoran las secciones <code>NETWORK y</code> <code>FALLBACK del archivo manifest de caché</code>.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> + <li><a class="external" href="http://appcachefacts.info/" title="http://appcachefacts.info/">appcachefacts.info</a> - información detallada en AppCache idiosyncrasies</li> + <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> en hacks.mozilla.org - muestras de una aplicacón offline en demo y explica como funciona.</li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li> + <li><a class="external" href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li> + <li>{{ interface("nsIApplicationCache") }}</li> + <li>{{ interface("nsIApplicationCacheNamespace") }}</li> + <li>{{ interface("nsIApplicationCacheContainer") }}</li> + <li>{{ interface("nsIApplicationCacheChannel") }}</li> + <li>{{ interface("nsIApplicationCacheService") }}</li> + <li>{{ interface("nsIDOMOfflineResourceList") }}</li> + <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Prepárate para Firefox 3.0 - Una guía para desarrolladores web para las muchas nuevas características en este navegador tan popular, específicamente las características offline</a> (IBM developerWorks)</li> +</ul> + +<p>{{ HTML5ArticleTOC() }}</p> +</div> diff --git a/files/es/web/html/referencia/index.html b/files/es/web/html/referencia/index.html new file mode 100644 index 0000000000..25534cd46f --- /dev/null +++ b/files/es/web/html/referencia/index.html @@ -0,0 +1,26 @@ +--- +title: Referencia HTML +slug: Web/HTML/Referencia +tags: + - HTML + - Referencia + - Web +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p>Esta referencia <a href="/es/docs/Web/HTML">HTML</a> describe todos los <strong>elementos</strong> y <strong>atributos</strong> de HTML, incluyendo los <strong>atributos globales</strong> que se aplican a todos los elementos.</p> + +<dl> + <dd></dd> + <dt><a href="/es/docs/Web/HTML/Elemento">Referencia de Elementos HTML</a></dt> + <dd>Esta página lista todos los elementos HTML</dd> + <dt><a href="/es/docs/Web/HTML/Atributos">Referencia de Atributos HTML</a></dt> + <dd>Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.</dd> + <dt><a href="/es/docs/Web/HTML/Atributos_Globales">Atributos Globales</a></dt> + <dd>Los atributos globales son atributos comunes a todos los elementos HTML; pueden usarse en todos los elementos, aunque pueden no tener efecto en algunos de ellos.</dd> + <dt><a href="/es/docs/Web/HTML/Tipos_de_enlaces">Tipos de enlaces</a></dt> + <dd>En HTML, los siguientes tipos de enlaces indican la relación entre dos documentos, de los cuales uno enlaza al otro usando un elemento <a> o bien <area>, o bien <link>.</dd> +</dl> + +<p><span class="alllinks"><a href="/es/docs/tag/HTML" title="Artículos etiquetados con: HTML">Ver todas las páginas etiquetadas con "HTML"...</a></span></p> diff --git a/files/es/web/html/tipos_de_enlaces/index.html b/files/es/web/html/tipos_de_enlaces/index.html new file mode 100644 index 0000000000..9cfc5089d5 --- /dev/null +++ b/files/es/web/html/tipos_de_enlaces/index.html @@ -0,0 +1,381 @@ +--- +title: Tipos de enlaces +slug: Web/HTML/Tipos_de_enlaces +translation_of: Web/HTML/Link_types +--- +<p>{{HTMLSidebar}}</p> + +<p><span class="seoSummary">En HTML, los siguientes tipos de enlaces indican la relación entre dos documentos, de los cuales uno enlaza al otro usando un elemento {{HTMLElement("a")}} o bien {{HTMLElement("area")}}, o bien {{HTMLElement("link")}}.</span></p> + +<table class="standard-table"> + <caption>Lista de tipos de link y su significado en HTML</caption> + <thead> + <tr> + <th scope="col">Tipo de Link</th> + <th scope="col">Descripción</th> + <th scope="col" style="width: 12em;">Permitido en estos elementos</th> + <th scope="col">No permitido en estos elementos</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>alternate</code></td> + <td> + <ul> + <li>Si el elemento es {{HTMLElement("link")}} y el atributo {{htmlattrxref("rel", "link")}} tambien contiene el tipo <code>stylesheet</code>, el enlace define una <a href="/en-US/docs/Alternative_style_sheets">hoja de estilo alternativa</a>; en ese caso el atributo {{htmlattrxref("title", "link")}} deberá estar presente y no ser una cadena vacia.</li> + <li>Si el atributo {{htmlattrxref("type","link")}} es puesto a <code>application/rss+xml</code> o <code>application/atom+xml</code>, el enlace define un <a href="/en-US/docs/RSS/Getting_Started/Syndicating">feed de distribución</a>. El primero de ellos definido en la pagina es el tomado por default.</li> + <li>De otra forma, el enlace define una pagina alternativa, de uno de los siguientes tipos: + <ul> + <li>para otros medios, como un dispositivo portatil (si el atributo {{htmlattrxref("media","link")}} esta indicado)</li> + <li>en otro lenguaje (si el atributo {{htmlattrxref("hreflang","link")}} esta indicado),</li> + <li>en otro formato, como un PDF (si el atributo {{htmlattrxref("type","link")}} esta indicado)</li> + <li>una combinacion de los anteriores.</li> + </ul> + </li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None</em>.</td> + </tr> + <tr> + <td><code>archives</code></td> + <td>Define un hipervínculo a un documento que contiene un enlace de archivo a este. Por ejemplo, la entrada de un blog podria enlazar a una página de indice mensual de esta forma.<br> + <br> + <strong>Nota:</strong> Aunque se reconoce, el singular <code>archive</code> es incorrecto y debe ser evitado.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>author</code></td> + <td>Define un hipervinculo a una página describiendo el autor o proporcionando una forma de contactar al autor.<br> + <br> + <strong>Nota:</strong> Este puede ser un hipervinculo <code>mailto:</code>, pero esto no es recomendable en paginas públicas por que robots cosechadores podrian rápidamente llevar una gran cantidad de span a esa dirección. En ese caso, es mejor mandarlos a una página con un formulario de contacto.<br> + <br> + Aunque reconocido, el atributo {{htmlattrxref("rev", "link")}} en elementos {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} con un enlace de tipo <code>made</code> es incorrecto y debiera ser reemplazado por el atributo {{htmlattrxref("rel", "link")}} con este tipo de enlace.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>bookmark</code></td> + <td>Indica que el hipervínculo es un <a href="/en-US/docs/Permalink">permalink</a> al ancestro más cercano del elemento {{HTMLElement("article")}}. Si no hay ninguno, entonces es un permalink para la <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">sección</a> con la que el elemento está más estrechamente asociado.<br> + <br> + Esto permite crear marcadores a un artículo en particular dentro de una página con múltiples artículos, como por ejemplo una página con un resumen mensual de un blog, o un agregador de blog.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>external</code></td> + <td>Indica que el hipervínculo llevará a una fuente externa al sitio en el que se encuentra la página actual; o lo que es lo mismo, seguir el enlace hará que el usuario abandone el sitio.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>first</code></td> + <td> + <p>Indica que el hipervínculo conduce al primer recurso de la <em>secuencia</em> en la que se encuentra la página actual.<br> + </p> + + <p><strong>Nota:</strong> Otros tipos de enlaces relacionados con los recursos en secuencia son <code>last</code>, <code>prev</code>, <code>next</code>.</p> + + <p>Aunque parezca evidente, los sinónimos <code>being</code> y <code>start</code> son incorrectos y deben evitarse.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>help</code><br> + {{HTMLVersionInline("5")}}</td> + <td> + <ul> + <li>If the element is {{HTMLElement("a")}} or {{HTMLElement("area")}}, it indicates that the hyperlink leads to a resource giving further help about the parent of the element, and its descendants.</li> + <li>If the element is {{HTMLElement("link")}} it indicates that the hyperlink leads to a resource giving further help about the page as a whole.</li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>icon</code></td> + <td>Defines a resource for representing the page in the user interface, usually an icon (auditory or visual).<br> + <br> + The {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} and {{htmlattrxref("sizes","link")}} attributes allow the browser to select the most appropriate icon for its context. If several resources match, the browser will select the last one declared, in tree order. As these attributes are merely hints, and the resources may be inappropriate upon further inspection, the browser will then select another one, if appropriate.<br> + <br> + <strong>Note:</strong> Apple's iOS does not use this link type, nor the {{htmlattrxref("sizes","link")}} attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard <a href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> and <a href="http://edr.euro.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respectively.<br> + <br> + The <code>shortcut</code> link type is often seen before <code>icon</code>, but this link type is non-conforming, ignored and <strong>web authors must not use it anymore</strong>.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>index</code></td> + <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the top level resource of that structure.<br> + <br> + If one or several <code>up</code> link types are also present, the number of these <code>up</code> indicates the depth of the current page in the hierarchy.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>last</code></td> + <td>Indicates that the hyperlink leads to the <em>last</em> resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>next</code>.<br> + <br> + Although recognized, the synomyn <code>end</code> is incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>license</code></td> + <td>Indicates that the hyperlink leads to a document describing the licensing information. If not inside the {{HTMLElement("head")}} element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.<br> + <br> + <strong>Note: </strong>Although recognized, the synonym <code>copyright</code> is incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>next</code></td> + <td>Indicates that the hyperlink leads to the <em>next</em> resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>last</code>.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>Indica que el documento enlazado no cuenta con el aval o aprobación del autor de este documento, por ejemplo si no tiene control sobre el mismo, si es un mal ejemplo o si hay una relación comercial entre los dos (un enlace de pago). Este enlace puede ser usado por algunos motores de búsqueda que usan técnicas de clasificación de popularidad.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>noreferrer</code></td> + <td> + <p>Prevents the browser, when navigating to another page, to send this page name, or any other value, as referrer via the <code>Referer:</code> HTTP header.<br> + (In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, doesn't abide for this value)</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>pingback</code></td> + <td>Defines an external resource URI to call if one make a comment or a citation about the webpage. The protocol used to make such a call is defined in the <a href="http://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a> specification.<br> + <br> + <strong>Note:</strong> if the <code>X-Pingback:</code> HTTP header is also present, this header has precedence over the {{HTMLElement("link")}} element with this link type</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>preconnect</code> {{experimental_inline}}</td> + <td>Hints the browser to open in advance the connection to the linked web site, without disclosing any private information.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>prefetch</code></td> + <td>Hints the browser to fetch in advance the linked resource, as it will likely be requested by the user.<br> + <br> + <strong>Note:</strong> the <a href="/en-US/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> has details on which links can be prefetched and on alternative methods.</td> + <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br> + {{HTMLElement("area")}} {{unimplemented_inline}},<br> + {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>preload</code></td> + <td>Tells the browser to download a resource because this resource will be needed later during the current navigation.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>prerender</code> {{experimental_inline}}</td> + <td>Comunica al navegador que carge en segundo plano el recurso suministrado (Pagina Web).</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>prev</code></td> + <td>Indicates that the hyperlink leads to the <em>preceding</em> resource of the <em>sequence</em> the current page is in.<br> + <br> + <strong>Note:</strong> other link types related to linking resources in the same sequence are <code>first</code>, <code>last</code>, <code>next</code>.<br> + <br> + Although recognized, the synomyn <code>previous</code> is incorrect and must be avoided.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>search</code></td> + <td>Indicates that the hyperlink reference a document whose interface is specially designing for searching in this document, or site, and its resources.<br> + <br> + If the {{htmlattrxref("type","link")}} attribute is set to <code>application/opensearchdescription+xml </code>the resource is an <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">OpenSearch plugin</a> that can be easily added to the interface of some browsers like Firefox or Internet Explorer.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>stylesheet</code></td> + <td>Defines an external resource to be used as a stylesheet. If the <code>type</code> is not set, the browser should assume it is a <code>text/css</code> stylesheet until further inspection.<br> + <br> + If used in combination with the <code>alternate</code> keyword, it defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + </tr> + <tr> + <td><code>sidebar</code></td> + <td>Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a <em>sidebar</em>. Browsers, that don't have such a context will ignore this keyword.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>tag</code></td> + <td>Indicates that the hyperlink refers to a document describing a <em>tag</em> that applies to this document.<br> + <br> + <strong>Note:</strong> this link type should not be set on links to a member of a tag cloud as these do not apply to a single document but to a set of pages.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + <tr> + <td><code>up</code></td> + <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the higher level resource of that structure.<br> + <br> + The number of <code>up</code> link types indicates the depth difference between the current page and the linked resource.</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td><em>None.</em></td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td> + <td>{{Spec2('Resource Hints')}}</td> + <td>Added <code>dns-prefetch</code>, <code>preconnect</code>, and <code>prerender</code> values.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since last snapshot ({{SpecName('HTML WHATWG')}})</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '<link>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added <code>tag</code>, <code>stylesheet</code>, <code>search</code>, <code>prev</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>next</code>, <code>license</code>, <code>icon</code>, <code>help</code>, <code>bookmark</code>, <code>author</code>, and <code>alternate</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '<link>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Alternative stylesheets</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>prefetch</code></td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><code>prerender</code></td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><code>preconnect</code></td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><code>dns-prefetch</code></td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Alternative stylesheets</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/html/transision_adaptativa_dash/index.html b/files/es/web/html/transision_adaptativa_dash/index.html new file mode 100644 index 0000000000..da3e0892e4 --- /dev/null +++ b/files/es/web/html/transision_adaptativa_dash/index.html @@ -0,0 +1,77 @@ +--- +title: Transmisión Adaptativa DASH para Video en HTML 5 +slug: Web/HTML/Transision_adaptativa_DASH +translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video +--- +<p><span class="seoSummary">La Transmisión Adaptable y Dinámica sobre HTTP (DASH - <em>Dynamic Adaptive Streaming over HTTP</em>) es un protocolo de transmisión adaptable. Esto signfica que le permite a un flujo de vídeo cambiar entre diversas tazas de bits con base en el desempeño de la red, para mantener la reproducción de un vídeo.</span></p> + +<h2 id="Soporte_de_Navegadores">Soporte de Navegadores</h2> + +<p>Firefox 21 incluye una implementación de DASH para video WebM con HTML5 que está desactivada por defecto. Se puede activar a través de "about:config" activando la opción "media.dash.enabled".</p> + +<p>Firefox 23 eliminó el soporte para DASH para WebM con HTML 5. Ésta será reemplazada por una implementación de la <a href="http://www.w3.org/TR/media-source/">Media Source Extensions API </a>que de soporte a DASH a través de javascript usando librerías como dash.js. Ver el bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778617">778617</a> para más detalles.</p> + +<h2 id="Usando_DASH_del_lado_del_servidor">Usando DASH del lado del servidor</h2> + +<p>Lo primero que necesitas es convertir tu video WebM en un manifiesto DASH con todos los archivos en los diferentes bitrates. Para comenzar necesitas:</p> + +<ul> + <li>ffpmeg - con libvpx y libvorbis activado para dar soporte al audio y video de WebM (<a href="http://www.ffmpeg.org/" title="http://www.ffmpeg.org/">ffmpeg.org</a>).</li> + <li>libwebm - concretamente para la herramienta samplemuxer (<span style="text-align: -webkit-auto;"><span style="white-space: pre-wrap;">git clone <a href="https://gerrit.chromium.org/gerrit/p/webm/libwebm.git">https://gerrit.chromium.org/gerrit/p/webm/libwebm.git</a>)</span></span>.</li> + <li>webm-tools - concretamente para la herramienta de creación de manifiestos, webm_dash_manifest (<span style="text-align: -webkit-auto;"><span style="white-space: pre-wrap;">git clone <a href="https://gerrit.chromium.org/gerrit/p/webm/webm-tools.git">https://gerrit.chromium.org/gerrit/p/webm/webm-tools.git</a>)</span></span>.</li> +</ul> + +<h3 id="1._Use_your_existing_WebM_file_to_create_one_audio_file_and_multiple_video_files.">1. Use your existing WebM file to create one audio file and multiple video files.</h3> + +<p>Por ejemplo:</p> + +<p>Creamos el archivo de audio usando:</p> + +<pre><code>ffmpeg -i my_master_file.webm -vn -acodec libvorbis -ab 128k my_audio.webm</code></pre> + +<p>Creamos los archivos de vídeo usando:</p> + +<pre><code>ffmpeg -i my_master_file.webm -vcodec libvpx -vb 250k -keyint_min 150 -g 150 -an my_video-250kbps.webm +ffmpeg -i my_master_file.webm -vcodec libvpx -vb 100k -keyint_min 150 -g 150 -an my_video-100kbps.webm +ffmpeg -i my_master_file.webm -vcodec libvpx -vb 50k -keyint_min 150 -g 150 -an my_video-50kbps.webm</code></pre> + +<h3 id="2._Align_the_clusters_to_enable_switching_at_cluster_boundaries.">2. Align the clusters to enable switching at cluster boundaries.</h3> + +<p>For video:</p> + +<pre><code>samplemuxer -i my_video-250kbps.webm -o my_video-250kbps-final.webm</code> +<code>etc.</code></pre> + +<p>Although we don't switch audio streams, it's still necessary to run it through samplemuxer to ensure a cues element is added. Note: to be compatible with playing on Chrome, it is suggested to change the track number to something other than the one in the video files, most likely 0.</p> + +<pre><code>samplemuxer -i my_audio.webm -o my_audio-final.webm -output_cues 1 -cues_on_audio_track 1 -max_cluster_duration 2 -audio_track_number</code></pre> + +<h3 id="3._Create_the_manifest_file">3. Create the manifest file:</h3> + +<pre><code>webm_dash_manifest -o my_video_manifest.mpd \ + -as id=0,lang=eng \ + -r id=0,file=my_video-250kbps-final.webm \ + -r id=1,file=my_video-100kbps-final.webm \ + -r id=2,file=my_video-50kbps-final.webm \ + -as id=1,lang=eng \ + -r id=4,file=my_audio-final.webm</code></pre> + +<p>Put the manifest and the associated video files on your web server or CDN. DASH works via HTTP, so as long as your HTTP server supports byte range requests, and it's set up to serve .mpd files with mimetype="application/dash+xml", then you're all set.</p> + +<h2 id="Using_DASH_-_Client_Side">Using DASH - Client Side</h2> + +<p>You'll want to modify your web page to point to the DASH manifest first, instead of directly to a particular video file:</p> + +<pre class="brush: html"><video> + <source src="movie.<span class="ZmSearchResult" id="DWT648"><span class="ZmSearchResult" id="DWT650">mpd</span></span>"> + <source src="movie.webm"> + Your browser does not support the video tag. +</video></pre> + +<p>That's it! If DASH is supported by the browser, your video will now stream adaptively.</p> + +<h2 id="Links">Links</h2> + +<p><a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification" title="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">WebM DASH Specification at The WebM Project</a></p> + +<p><a href="http://dashif.org/" title="http://dashif.org/">DASH Industry Forum</a></p> diff --git a/files/es/web/html/usando_audio_y_video_con_html5/index.html b/files/es/web/html/usando_audio_y_video_con_html5/index.html new file mode 100644 index 0000000000..b81bc17141 --- /dev/null +++ b/files/es/web/html/usando_audio_y_video_con_html5/index.html @@ -0,0 +1,286 @@ +--- +title: Usando audio y video con HTML5 +slug: Web/HTML/Usando_audio_y_video_con_HTML5 +tags: + - Flash + - Ogg + - applet + - busqueda + - errores + - especificacion + - gestion + - opciones + - reproduccion + - reserva +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<p>HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos {{ HTMLElement("audio") }} y {{ HTMLElement("video") }}, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.</p> + +<h2 id="Insertando_contenido_multimedia">Insertando contenido multimedia</h2> + +<p>Insertar contenido multimedia en tus documentos HTML es muy sencillo:</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> + Tu navegador no implementa el elemento <code>video</code>. +</video></pre> + +<p>Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.</p> + +<p>Este es un ejemplo para insertar <em>audio</em> en tu documento HTML</p> + +<pre class="brush: html"><audio src="/test/audio.ogg"> +<p>Tu navegador no implementa el elemento audio.</p> +</audio></pre> +</div> + +<p>El atributo <code>src</code> puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.</p> + +<div style="overflow: hidden;"> +<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> +<p>Tu navegador no implementa el elemento audio</p> +</audio></pre> +</div> + +<p>Este código de ejemplo usa los atributos del elemento {{ HTMLElement("audio") }}:</p> + +<ul> + <li><code>controls</code> : muestra los controles estándar de HTML5 para audio en una página web.</li> + <li><code>autoplay</code> : hace que el audio se reproduzca automáticamente.</li> + <li><code>loop</code> : hace que el audio se repita automáticamente.</li> +</ul> + +<div style="overflow: hidden;"> +<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> +</div> + +<p>El atributo <code>preload</code> es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:</p> + +<ul> + <li><code>"none"</code> no almacena temporalmente el archivo</li> + <li><code>"auto"</code> almacena temporalmente el archivo multimedia</li> + <li><code>"metadata"</code> almacena temporalmente sólo los metadatos del archivo</li> +</ul> + +<p>Se pueden especificar múltiples fuentes de archivos usando el elemento {{ HTMLElement("source") }} <span id="result_box" lang="es"><span class="hps">con el fin de</span> <span class="hps">proporcionar vídeo</span> <span class="hps">o</span> <span class="hps">audio</span> <span class="hps">codificados en formatos</span> <span class="hps">diferentes</span> <span class="hps">para</span> <span class="hps">diferentes navegadores</span></span>. Por ejemplo:</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mp4" type="video/mp4"> + Tu navegador no implementa el elemento <code>video</code>. +</video> +</pre> + +<p>Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia admitidos por los elementos audio y video</a> en los diferentes navegadores.</p> + +<p>También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> + Tu navegador no implementa el elemento <code>video</code>. +</video></pre> + +<p>Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.</p> + +<p>Si el atributo <code>type</code> no está especificado, el tipo de contenido multimedia se obtiene del servidor <span id="result_box" lang="es"><span class="hps">y</span> se <span class="hps">comprueba para</span> <span class="hps">ver</span> <span class="hps">si el navegador</span> <span class="hps">lo puede manejar</span></span>; si no puede ser mostrado, se comprueba el siguiente <code>source</code> , si ninguno de los elementos <code>source</code> especificados pueden ser usados, un evento de <code>error</code> es enviado al elemento <code>video</code>. Si el atributo <code>type</code> está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente <code>source</code> se comprueba una vez.</p> + +<p>Mira <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">los eventos del contenido multimedia</a> para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia sportados por los elementos audio y video</a>.</p> + +<h2 id="Controlando_la_reproducción_multimedia">Controlando la reproducción multimedia</h2> + +<p>Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, puedes controlarlos mediante programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:</p> + +<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; +v.play(); +</pre> + +<p>La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> del elemento, como está definido en la interfaz {{ interface("nsIDOMHTMLMediaElement") }} que es usada para implementar los elementos multimedia.</p> + +<p>Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy sencillo.</p> + +<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> +<div> + <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button> + <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button> + <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button> + <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button> +</div> +</pre> + +<h2 id="Deteniendo_la_descarga_de_contenido_multimedia">Deteniendo la descarga de contenido multimedia</h2> + +<p>Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado <span id="result_box" lang="es"><span class="hps">a través de</span> <span class="hps">la recolección de basura</span></span>.</p> + +<p>Aquí un truco para detener la descarga de una sola vez:</p> + +<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); +mediaElement.pause(); +mediaElement.src = ""; +</pre> + +<p>Estableciendo una cadena vacía al atributo <code>src</code> del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.</p> + +<h2 id="Buscando_a_través_de_los_medios" style="margin: 0px 0px 0.8em; padding: 0px;">Buscando a través de los medios</h2> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Los elementos de los medios proporcionan apoyo para mover la posición de reproducción actual a puntos específicos en el contenido de los medios. </font>Esto se hace estableciendo el valor de la propiedad <code style="font-size: 14px;">horaActual</code> en el elemento; ver <a class="new" href="https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement" title="/ Es / docs / Web / API / HTMLMediaElement"><code style="font-size: 14px;">HTMLMediaElement</code></a> para más detalles sobre las propiedades del elemento. Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.</p> + +<p><span style="line-height: 1.5em;">Usted puede utilizar el elemento </span><code style="font-size: 14px;">seekable</code><span style="line-height: 1.5em;"> propiedad para determinar los rangos de los medios de comunicación que están disponibles para la búsqueda de la actualidad. Esto devuelve un objeto </span><a class="new" href="https://developer.mozilla.org/es/docs/Web/API/TimeRanges" style="line-height: 1.5em;" title="/ Es / docs / Web / API / TimeRanges"><code style="font-size: 14px;">TimeRanges</code></a><span style="line-height: 1.5em;"> que enumera los rangos de veces que se puede tratar de:</span></p> + +<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); +mediaElement.seekable.start(); // Returns the starting time (in seconds) +mediaElement.seekable.end(); // Returns the ending time (in seconds) +mediaElement.currentTime = 122; // Seek to 122 seconds +mediaElement.played.end(); // Returns the number of seconds the browser has played +</pre> + +<h2 id="Especificación_del_rango_de_reproducción" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Especificación del rango de reproducción</font></h2> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Al especificar el URI de los medios de comunicación para un elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> o <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , puede incluir opcionalmente información adicional para especificar la parte de los medios a reproducir. Para ello, añada una almohadilla ("#"), seguida de la descripción del fragmento de medios.</p> + +<p><span style="line-height: 1.5em;">Un intervalo de tiempo se especifica mediante la sintaxis:</span></p> + +<pre>#t=[starttime][,endtime]</pre> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>El tiempo se puede especificar como un número de segundos (como un valor de punto flotante) o como una hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y 1 segundo).</font></p> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Algunos ejemplos:</p> + +<dl> +</dl> + +<dl> + <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 10,20</span></dt> + <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.</dd> + <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 10.5</span></dt> + <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.</dd> + <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 02:00:00</span></dt> + <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de dos horas.</dd> + <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 60</span></dt> + <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se debe reproducir desde los 60 segundos hasta el final.</dd> +</dl> + +<div class="geckoVersionNote" style=""> +<p>{{ gecko_callout_heading("9.0") }}</p> +<font><font>La porción rango de reproducción del elemento de la especificación URI media esta en Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6). </font><font>En este momento, esta es la única parte de la </font></font><a class="external" href="http://www.w3.org/TR/media-frags/" style="padding-right: 16px; line-height: 21px;" title="http://www.w3.org/TR/media-frags/"><font>especificación de los medios de comunicación Fragmentos URI</font></a><font><font>implementado por el Gecko, y sólo se puede utilizar cuando se especifica la fuente para los elementos de los medios de comunicación, y no en la barra de direcciones.</font></font> + +<p> </p> +</div> + +<h2 id="Opciones_de_reserva" style="margin: 0px 0px 0.8em; padding: 0px;">Opciones de reserva</h2> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">HTML incluido entre, por ejemplo, las etiquetas de apertura y cierre de los elementos de los medios de comunicación son procesados por los navegadores que no admitan medios de HTML5. Usted puede tomar ventaja de este hecho para proporcionar medios alternativos de reserva para esos navegadores.</p> + +<p><span style="line-height: 1.5em;">Esta sección proporciona dos opciones de reserva para video. </span><font>En cada caso, si el navegador soporta vídeo HTML5, que se utiliza, de lo contrario, se utiliza la opción de reserva.</font></p> + +<h3 id="Utilización_de_Flash" style="margin: 0px 0px 0.8em; padding: 0px;">Utilización de Flash</h3> + +<p><span style="line-height: 1.5em;">Puede usar Flash para reproducir una película formato Flash si el </span><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video" style="line-height: 1.5em;"><code style="font-size: 14px;"><video></code></a><span style="line-height: 1.5em;"> no se admite elemento</span><span style="line-height: inherit;">:</span></p> + +<pre class="brush: html"><video src="video.ogv" controls> + <object data="flvplayer.swf" type="application/x-shockwave-flash"> + <param value="flvplayer.swf" name="movie"/> + </object> +</video></pre> + +<p><font>Tenga en cuenta que no se debe incluir </font><code style="font-size: 14px;">classid</code><font> en el </font><code style="font-size: 14px;">objeto</code><font> tag con el fin de ser compatible con los navegadores que no sean Internet Explorer.</font></p> + +<p> </p> + +<p> </p> + +<p> </p> + +<h3 id="Reproducción_de_vídeos_Ogg_utilizando_un_applet_de_Java" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Reproducción de vídeos Ogg utilizando un applet de Java</font></h3> + +<p><span style="line-height: 1.5em;">Hay un applet de Java llamada </span><a class="external" href="http://maikmerten.livejournal.com/2256.html" style="line-height: 1.5em; padding-right: 16px; background-color: transparent;" title="http://maikmerten.livejournal.com/2256.html">Cortado</a><span style="line-height: 1.5em;"> que se puede utilizar como reserva para reproducir vídeos Ogg en los navegadores que no tienen soporte para Java, pero no es compatible con vídeo HTML5</span><span style="line-height: inherit;">:</span></p> + +<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> + <object type="application/x-java-applet" width="320" height="240"> + <param name="archive" value="cortado.jar"> + <param name="code" value="com.fluendo.player.Cortado.class"> + <param name="url" value="my_ogg_video.ogg"> + <p>You need to install Java to play this file.</p> + </object> +</video></pre> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Si no se crea un elemento secundario alternativa del elemento de objeto cortado, como el </font><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/p"><code style="font-size: 14px;"><font><p></font></code></a><font> elemento superior, Firefox 3.5 instalaciones que manejan el video de forma nativa, pero no tienen Java instalado incorrectamente informarán al usuario de que es necesario instalar un plugin para ver el contenido en la página.</font></p> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> + +<div style="line-height: 22px;"><span class="geckoMinVerMethod indicatorInHeadline minVer">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</span> + +<h1 id="Gestión_de_errores" style="margin: 0px 0px 0.8em; padding: 0px; font-size: 1.857em;">Gestión de errores</h1> +</div> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">A partir de Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), el tratamiento de errores se ha revisado para que coincida con la última versión de la especificación HTML5. En lugar de que el <code style="font-size: 14px;">error sea</code> enviado al elemento en sí, ahora se entrega a los elementos "hijos" <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> correspondientes a las fuentes que resultan en el error.</p> + +<p><span style="line-height: 1.5em;">Esto permite detectar las fuentes no pudieron cargar, que puede ser útil. Considere este HTML</span><span style="line-height: inherit;">:</span></p> + +<pre class="brush: html"><video> +<source id="mp4_src" + src="video.mp4" + type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> +</source> +<source id="3gp_src" + src="video.3gp" + type='video/3gpp; codecs="mp4v.20.8, samr"'> +</source> +<source id="ogg_src" + src="video.ogv" + type='video/ogg; codecs="theora, vorbis"'> +</source> +</video></pre> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Dado que Firefox no es compatible con MP4 y 3GP, debido a su naturaleza de patente gravado, los <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> elementos con el ID "mp4_src" y "3gp_src" recibirán <code style="font-size: 14px;">error</code> eventos antes de cargar el recurso Ogg. Las fuentes son juzgados en el orden en el que aparecen, y una vez que uno carga con éxito, las fuentes restantes no se trataron en absoluto.</p> + +<h3 id="Detectar_si_las_fuentes_no_han_cargado" style="margin: 0px 0px 0.8em; padding: 0px;">Detectar si las fuentes no han cargado</h3> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><code>Para detectar qué todos los elementos </code><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> no han podido cargarse, se debe comprobar el valor de la propiedad <code style="font-size: 14px;">NetworkState</code> qué poseen todos los elementos de tipo multimedia. Si el valor es <code style="font-size: 14px;">HTMLMediaElement.NETWORK_NO_SOURCE</code>, se sabrá que las fuentes no se cargaron correctamente.</p> + +<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Si en ese momento se agrega otra fuente mediante la inserción de un nuevo elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> como hijo del elemento multimedia, Gecko intenta cargar el recurso especificado.</p> + +<h3 id="Mostrando_contenido_fallback_cuando_la_fuente_no_puede_ser_cargada">Mostrando contenido <em>fallback</em> cuando la fuente no puede ser cargada</h3> + +<p>Otra forma de mostrar el contenido <em>fallback</em> de un vídeo cuando ninguna de sus fuentes pudieron ser cargadas, es añadir un manejador de excepciones o errores en el último elemento {{ HTMLElement("source") }}. Así usted podrá reemplazar el vídeo con el contenido <em>fallback</em>:</p> + +<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">controls</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>source</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>App de b&uaacute;squeda din&aacute;mica en Firefox OS<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Clic en la im&aacute;gen para reproducir un v&iacute;deo demo de la app de b&uaacute;squeda din&aacute;mica<<span class="tag token"><span class="tag token"><span class="punctuation token">/</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> v <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector<span class="punctuation token">(</span></span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + sources <span class="operator token">=</span> v<span class="punctuation token">.</span><span class="function token">querySelectorAll<span class="punctuation token">(</span></span><span class="string token">'source'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + lastsource <span class="operator token">=</span> sources<span class="punctuation token">[</span>sources<span class="punctuation token">.</span>length<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +lastsource<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'error'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + d<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> v<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span> + v<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">replaceChild<span class="punctuation token">(</span></span>d<span class="punctuation token">,</span> v<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="sect1" style="margin: 0px 0px 0.8em; padding: 0px;"> </h2> + +<h2 id="Véase_también" style="margin: 0px 0px 0.8em; padding: 0px;">Véase también</h2> + +<ul style="margin: 0px 0px 1.286em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;"> + <li>Los elementos relacionados con los medios HTML: <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> ;</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Manipulating_video_using_canvas" title="Vídeo Manipular con tela">Vídeo Manipular con canvas</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Introducing_the_Audio_API_Extension" title="Presentación de la extensión de API Audio">Presentación de la extensión de API Audio</a></li> + <li><code style="font-size: 14px;"><a class="external" href="http://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIDOMHTMLMediaElement" style="padding-right: 16px; background-color: transparent;">nsIDOMHTMLMediaElement</a></code></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Formatos de los medios admitidos por los elementos de audio y vídeo">Formatos de los medios admitidos por los elementos de audio y vídeo</a></li> + <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" style="padding-right: 16px; background-color: transparent;" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> + <li><a class="external" href="http://popcornjs.org/" style="padding-right: 16px; background-color: transparent;" title="http://popcornjs.org/">Popcorn.js - Media Framework HTML5</a></li> + <li><a class="external" href="http://www.html5video.org/kaltura-html5/" style="padding-right: 16px; background-color: transparent;" title="http://www.html5video.org/kaltura-html5/">Kaltura Solución videoteca</a> , una biblioteca de JavaScript (mwEmbed) que soporta un retorno sin problemas con HTML5, VLC Player, Java Cortado y OMTK Vorbis reproductor de Flash. (Es utilizado por Wikimedia)</li> + <li><a class="external" href="http://omtk.org/flash/index.html" style="padding-right: 16px; background-color: transparent;" title="http://omtk.org/flash/index.html">OMTK - flash</a> , una biblioteca de Flash que implementa un decodificador Vorbis</li> + <li><a class="external" href="http://www.projekktor.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.projekktor.com">Projekktor jugador</a> , un contenedor de JavaScript para audio vídeo-tags con fallback flash, de código abierto, GPL</li> + <li><a class="external" href="http://www.theora.org/cortado/" style="padding-right: 16px; background-color: transparent;" title="http://www.theora.org/cortado/">Applet Cortado</a> , una solución de reproducción de audio / vídeo en Java que mantiene Xiph.org</li> + <li><a class="external" href="http://videojs.com/" style="padding-right: 16px; background-color: transparent;" title="Video.js HTML5 Video Player">Video.JS</a> , un reproductor de vídeo HTML5 de código abierto y un marco.</li> + <li><a class="external" href="http://mediaelementjs.com/" style="padding-right: 16px; background-color: transparent;" title="http://mediaelementjs.com/">MediaElement.js</a> - marco audio / video HTML5 de código abierto con una cuña de Flash personalizada que imitan API multimedia HTML5 para exploradores más antiguos.</li> + <li><a class="external" href="http://www.hdwebplayer.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.hdwebplayer.com">FLV Player</a> - HTML5 reserva soporte del reproductor de vídeo</li> +</ul> + +<p><span style="line-height: inherit;">{{ HTML5ArticleTOC() }}</span></p> diff --git a/files/es/web/html/índice/index.html b/files/es/web/html/índice/index.html new file mode 100644 index 0000000000..5beb1776d4 --- /dev/null +++ b/files/es/web/html/índice/index.html @@ -0,0 +1,8 @@ +--- +title: Índice de la documentación HTML +slug: Web/HTML/Índice +tags: + - HTML +translation_of: Web/HTML/Index +--- +<p>{{Index("/es/docs/Web/HTML")}}</p> |