jorgesumle
/
referencia-html


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
							==================
Atributos globales
==================

Los atributos globales de HTML pueden ser utilizados con cualquier elemento.

``accesskey``
=============

El atributo ``accesskey`` es usado por el navegador para crear un atajo de
teclado que active o se centre en el elemento.

Los valores permitidos son caracteres imprimibles, excepto " " y caracteres que
normalmente requieren pulsar varias teclas para escribirse.

La operación para activar el ``accesskey`` depende del navegador y del sistema
operativo en el que se ejecute:
https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales/accesskey.

El siguiente ejemplo nos permite acceder a las secciones numeradas de un
documento usando atajos de teclado...

  .. code-block:: html

     <ul>
       <li><a accesskey="1" href="#1">Sección 1</a></li>
       <li><a accesskey="2" href="#2">Sección 2</a></li>
       <li><a accesskey="3" href="#3">Sección 3</a></li>
     </ul>


``class``
=========

Las clases permiten a CSS y JavaScript seleccionar y acceder a elementos
específicos a través de selectores de clases o funciones DOM.
Sus valores son una lista de separada por espacios de las clases del elemento.

  .. code-block:: html

     <head>
       <title>Importante</title>
       <style>
       h1.intro {
         color: blue;
       }

       .importante {
         font-size: large;
       }
     </style>
     </head>
     <body>
       <h1 class="intro importante">Encabezado importante</h1>
       <p class="importante">Atención: este párrafo es importante</p>
     </body>

``contenteditable``
===================

Si se añade este atributo a un elemento, este puede ser modificado por el
usuario. Por ejemplo, podemos hacer que el usuario pueda modificar un
párrafo de un texto.

  .. code-block:: html

     <h2>Ejercicios de preposiciónes</h2>
     <p contenteditable>Me llamó ____ ir al cine</p>
     <p contenteditable>Esto servirá ____ dormir</p>
     <h2>Escribe una redacción usando las preposiciones que has aprendido</h2>
     <p contenteditable>El otro día fuimos... (continúa escribiendo)</p>

``contextmenu``
===============

Permite crear un menú contextual. Puede contener menús con varios niveles de
anidamiento. En la siguiente imagen se muestra la apariencia de este menú en
el navegador Abrowser, el correspondiente código fuente se encuentra debajo
de la imagen.

  .. image:: imagenes/contextmenu.png

  .. code-block:: html

     <div contextmenu="mymenu">
       <p>Usa el botón izquierdo del ratón aquí para ver el menú contextual</p>
       <menu type="context" id="mymenu">
         <menuitem label="Recargar" onclick="window.location.reload();"></menuitem>
         <menu label="Otro menú">
           <menu label="Submenú">
             <menuitem label="Un elemento de un submenú"></menuitem>
           </menu>
           <menuitem label="Elemento cualquiera 1"></menuitem>
           <menuitem label="Elemento cualquiera 2"></menuitem>
           <menuitem label="Elemento cualquiera 3"></menuitem>
           <menuitem label="Elemento cualquiera 4"></menuitem>
           <menuitem label="Elemento cualquiera 5"></menuitem>
         </menu>
         <menuitem label="Envía esta página por correo electrónico" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
       </menu>
     </div>

``dir``
=======

Establece la dirección del texto. Su valor debe ser ``ltr`` (izquierda a
derecha, *left to right*), ``rtl`` (de derecha a izquierda, *right to left*)
o ``auto`` (la dirección debe ser determinada mirando el contenido). Este
atributo es muy útil para idiomas que se escriben de derecha a izquierda.

  .. code-block:: html

     <p dir="rtl" lang="ar">للسيارات تابعة لمطار لودريدل بولاية فلوريدا الأميركية.</p>

``draggable``
=============

Sirve para indicar si el elemento puede ser arrastrado mediante la acción del
usuario (por ejemplo usando el ratón). Puede tener tres estados: ``true``,
``false`` y ``auto``.

  .. code-block:: html

     <!DOCTYPE HTML>
     <html lang="es">
     <head>
         <meta charset="UTF-8">
         <style>
         #div1 {
             width: 350px;
             height: 70px;
             padding: 10px;
             border: 1px solid #aaaaaa;
         }
         </style>
         <script>
         function allowDrop(ev) {
             ev.preventDefault();
         }

         function drag(ev) {
             ev.dataTransfer.setData("Text", ev.target.id);
         }

         function drop(ev) {
             var data = ev.dataTransfer.getData("Text");
             ev.target.appendChild(document.getElementById(data));
             ev.preventDefault();
         }
         </script>
     </head>
     <body>
         <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
         <br>
         <p id="drag1" draggable="true" ondragstart="drag(event)">Este párrafo
         puede ser arrastrado. Ponlo dentro del rectángulo.</p>
     </body>
     </html>

``dropzone``
============

Indica qué tipos de contenido pueden ser soltados en un elemento, usando la
`API drag and drop <https://developer.mozilla.org/es/docs/DragDrop/Drag_and_Drop>`__.
Puede tener los siguientes valores:

- ``copy``. Indica que el soltado creará una copia del elemento que fue arrastrado.
- ``move``. Indica que el elemento que fue arrastrado será movido a su nueva localización.

``hidden``
==========

El elemento al que se añade este atributo no es visible por el usuario.

  .. code-block:: html

     <p hidden>Este párrafo está oculto</p>

``id``
======

Es un identificador único para un elemento. Permite diferenciar un elemento
de otros de forma única y precisa.

  .. code-block:: html

     <p id="documento-de-identidad-de-alguien">21312312P</p>


``lang``
========

Indica el idioma del contenido de un elemento.

  .. code-block:: html

     <p><div lang="de">Ich spreche kein Russisch</div>, aunque sí puedo hablar
     castellano, alemán e inglés.</p>

``spellcheck``
==============

Indica si se debe comprobar si el elemento contiene errores de sintaxis.
Puede tener los siguientes valores:

- ``true``. Indica que, si es posible, el elemento debería ser analizado para
  detectar errores de sintaxis.
- ``false``. Indica que el elemento no debe ser analizado para encontrar
  errores de sintaxis.

  .. code-block:: html

     <input spellcheck="true">

``style``
=========

Permite especificar reglas de estilo para cambiar la apariencia del documento.
Se recomienda evitar su uso, pues es mejor usar los
atributos ``id`` y ``class`` y los selectores CSS para lograr indenpendencia
entre el diseño y el contenido.

  .. code-block:: html

     <p style="text-align: center;">Párrafo centrado</p>

``tabindex``
============

Indica el orden en el que obtienen el foco los elementos.

  .. code-block:: html

     <a href="https://searx.me/" tabindex="2">searX</a><br>
     <a href="https://trisquel.info/" tabindex="1">Trisquel</a><br>
     <a href="https://www.gnu.org/" tabindex="3">GNU</a>

     <p>Intenta elegir un enlace pulsando <kbd>Tabulador</kbd></p>

``title``
=========

Se usa para añadir información consultiva a un elemento, que pueda ser útil
para mostrar texto de ayuda para el usuario. En un enlace, esto podría ser
el título o la descripción del recurso enlazado; en una imagen, podría ser
la atribución o la descripción de la imagen; en un cita, podría ser más
información sobre la fuente...

  .. code-block:: html

     <p>Estoy interesado en aprender a usar el sistema operativo
     <abbr title="GNU's Not Unix">GNU</abbr>. Como núcleo usaré Linux-libre.</p>

``translate``
=============

Puede tener dos valores: ``yes`` y ``no``.
Si se establece el valor ``yes``, el contenido del elemento debe ser
traducido a otros idiomas.