English version



 


Tag HTML area


Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de tutoriales HTML.

Tabla de contenidos


Descripción

El tag HTML area define un sector o silueta de un mapa de imagen. Este sector puede estar vinculado a un recurso o marcador (como un tag HTML a normal).

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el documento y puede ser usado para referirse a ese elemento.

Ejemplo:

Comienzo del código <p id="parrafo1">Este es el primer p&aacute;rrafo nombrado parrafo1. Para cambiar din&aacute;micamente las propiedades del mismo usa este identificador.</p>Fin del código

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento está asociado. Una clase provee atributos visuales para los elementos.

Ejemplo:

Comienzo del código <p class="referencias">Este art&iacute;culo est&aacute; basado en el libro "Viento en los &aacute;rboles" por Jhon L. Brooks</p>

<p class="referencias importante">Este art&iacute;culo est&aacute; basado en el libro "Viento en los &aacute;rboles" por Jhon L. Brooks... y es m&aacute;s importante que el anterior.</p>Fin del código

style (style)

Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma.

Si estás escribiendo código XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class").

Ejemplo:

Comienzo del código <p style="color: #0000FF; font-size: 12pt">Este es un p&aacute;rrafo con un estilo definido</p>
<p>Y este es otro texto sin estilo.</p>Fin del código

title (text)

Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento.

Ejemplo:

Código Visualización
<a title="HTMLQuick.com" href="http://www.htmlquick.com">C&oacute;digo HTML</a> Código HTML

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido".

Al escribir código XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").

Ejemplo:

Comienzo del código <p lang="en">This is a paragraph in english.</p>
<p lang="es">Este es un p&aacute;rrafo en espa&ntilde;ol.</p>Fin del código

dir

Especifica la dirección de texto del contenido y atributos del elemento, así como la direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
Ejemplo:

Comienzo del código <q lang="he" dir="rtl">...Una cita en Hebreo...</q>Fin del código

alt (text)

El atributo "alt" define un texto alternativo diseñado para servir como reemplazo textual para objetos que son usualmente no soportados por algunos navegadores. También sirve como información adicional para navegadores que si los soportan (imágenes, formularios y applets). Los navegadores pueden mostrar este texto en forma de "tool tip" cuando el mouse se encuentra sobre el objeto.

Este atributo es requerido al escribir código XHTML.

Ejemplo:

Código Visualización
<img width="88" height="31" src="http://www.htmlquick.com/es/img/links/button.jpg" alt="Bot&oacute;n de v&iacute;nculo de HTMLQuick" /> Botón de vínculo de HTMLQuick

href (uri)

Especifica el recurso de destino para el elemento. Comúnmente usado para referirse a páginas en el mismo dominio o a páginas externas.

Ejemplo:

Código Visualización
V&iacute;nculo a una p&aacute;gina en este sitio: <a href="http://www.htmlquick.com/es/tutorials/links.html">V&iacute;nculos en HTML</a><br />
V&iacute;nculo a un sitio externo: <a href="http://www.w3.org">World Wide Web Consortium</a>
Vínculo a una página en este sitio: Vínculos en HTML
Vínculo a un sitio externo: World Wide Web Consortium

target (frame-target)

Especifica el nombre del marco donde el documento de destino debería ser cargado. Ver la referencia del tipo frame-target para más información.

Comienzo del código Abre en nueva ventana: <a href="http://www.w3c.org" target="_blank">WWW Consortium</a>
Abre en un marco llamado "contenido" (el marco debe estar presente en el set de marcos actual): <a href="http://www.w3c.org" target="contenido">WWW Consortium</a>Fin del código

tabindex (number)

Especifica la posición del elemento en el orden de tabulación. El orden de tabulación define una secuencia con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar dicha secuencia mediante el teclado (usualmente con la tecla "tab").

accesskey (character)

Establece una relación entre este elemento y una tecla de carácter, permitiendo al usuario activarlo mediante esa tecla (usualmente cuando es utilizada junto con la tecla "alt"). El resultado de la activación depende de la naturaleza del elemento actual. Para vínculos, esta acción automáticamente sigue el vínculo, y para otros elementos simplemente recibe el enfoque.

shape

Especifica la forma de la figura usada para definir un área. Los valores no son sensibles a mayúsculas/minúsculas y pueden ser uno de estos:

coords

Define las coordenadas y posición de una forma. Es utilizada junto con el atributo "shape" y las coordinadas dependen del valor de este último:
Las coordinadas son relativas a la esquina superior izquierda del objeto asociado. Cada coordenada es del tipo length yestán separadas por comas.

nohref

Cuando está definido, este atributo booleano especifica que la región no tiene ningún vínculo asociado. El valor es insensible a mayúsculas/minúsculas.

Recuerda que los atributos booleanos deben ser definidos en la forma nombre_atributo="nombre_atributo" para ser compatibles con el código XHTML.

Ejemplo:

Comienzo del código <area nohref shape="rect" coords="55,137,155,163">Fin del código


Eventos

Lista completa e información acerca de eventos en HTML


Ejemplos

Ejemplo de cómo las áreas son definidas para un mapa de imagen.
Código Visualización
<!-- En esta imagen definimos las areas que estaran vinculadas. Las areas 1 y 2 se vincularan a la referencia de tags HTML, las areas 3 y 4 se vincularan a la referencia de eventos HTML y las areas 5 y 6 se vincularan a la referencia de tipos. -->
<img src="../../img/examples/nav1exp.jpg" alt="Explicaci&oacute;n del men&uacute; de navegaci&oacute;n" />
Explicación del menú de navegación

Un mapa de imágen con vínculos hechos con el tag HTML area.
Código Visualización
<map name="nav1" id="nav1">
<area alt="Tags HTML" href="../tags.html" shape="circle" coords="50,50,39" />
<area href="../tags.html" alt="Tags HTML" shape="rect" coords="31,49,189,81" />
<area alt="Eventos HTML" href="../events.html" shape="circle" coords="155,165,39" />
<area href="../events.html" alt="Eventos HTML" shape="rect" coords="55,137,155,163" />
<area alt="Tipos HTML" href="../types.html" shape="circle" coords="75,250,39" />
<area href="../types.html" alt="Tipos HTML" shape="rect" coords="107,240,153,260" />
</map>
<img src="../../img/examples/nav1.jpg" usemap="#nav1" alt="Men&uacute; de navegaci&oacute;n" />
Tags HTML Tags HTML Eventos HTML Eventos HTML Tipos HTML Tipos HTML Menú de navegación



Saltar opciones al pie  |   Send to a friend Enviar a un amigo  |  Publicar en del.icio.us Publicar en del.icio.us

Publicar en Digg.com Publicar en Digg.com  |  Archivar en Furl Archivar en Furl  |  Agregar a Yahoo! MyWeb Agregar a Yahoo! MyWeb

Saltar declaraciones W3C | 

XHTML 1.0 Strict Válido  |  CSS Válido ¿Por qué confiar en nosotros? Haz click en las imágenes de la izquierda para ver que tan seriamente escribimos nuestras propias páginas, luego haz tu elección.

Icono de conformidad con el Nivel Triple-A, de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI Este sitio web da su mejor esfuerzo por lograr el nivel de conformidad Tiple-A, de las Directrices de Accesibilidad para el Contenido Web 1.0 del W3C-WAI. Si encuentras algún detalle o error que hayamos pasado por alto, no dudes en comunicárnoslo.

El poder de la Web se encuentra en su universalidad. El acceso por parte de todos más allá de la discapacidad es un aspecto esencial. -- Tim Berners-Lee, Director del W3C e inventor de la World Wide Web

 Enlázanos  |  Contáctanos  |  Más allá de HTML  |  Herramientas y recursos  |  Mapa del sitio  |  Webmaster