# Atributos

Cualquier etiqueta XHTML puede contener uno o más atributos, separados por espacios, que permiten especificar la marca. El código fuente tiene el siguiente aspecto: <etiqueta atributo="valor_de_atributo"> (por ejemplo, <p class="centrado">

En esta lección se comenta:

## Panel de Atributos en la ventana de Herramientas

En la Ventana de Herramientas situada a la izquierda se encuentra el panel de atributos. El panel muestra la lista de atributos que puede tener el elemento seleccionado en cada momento. Para seleccionar un elemento, se debe hacer clic en él y pulsar `F2` hasta que en la barra de estado la primera etiqueta de la lista sea el elemento deseado.

La imagen de la derecha muestra la lista de atributos de la etiqueta <body>, que aparece en la barra de estado.

Volver al índice

## Asignar, modificar y eliminar atributos a etiquetas

Para asignar un atributo a un elemento, hay que realziar los pasos siguientes:

- situar el cursor en cualquier parte del elemento,
- pulsar `F2` para seleccionar el elemento (al seleccionarlo, el elemento puede cambiar de color y además en la barra de estado la primera etiqueta es la del elemento seleccionado),
- marcar la casilla situada a la izquierda del nombre del atributo que se quiera establecer en el panel de Atributos de la ventana de herramientas,
- en su caso, escribir el valor en la caja de texto que se abre bajo el panel de atributos, o seleccionar el valor en el botón radio
- pulsar `Intro` o el icono de confirmación .

En el código fuente de la página se puede ver que a la etiqueta <etiqueta> se le ha añadido un atributo y un valor <etiqueta atributo="valor">

Para eliminar un atributo, hay que seleccionar el elemento con `F2` y desmarcar la casilla situada a la izquierda del atributo que se quiera eliminar en el panel de Atributos de la ventana de herramientas. Si se trata de un atributo obligatorio (por ejemplo, el atributo alt en la etiqueta <img />), Amaya mostrará un aviso.

Para modificar un atributo, hay que seleccionar el elemento con `F2`, hacer clic en el nombre del atributo que se quiera modificar en el panel de Atributos de la ventana de herramientas, modificar el valor del atributo y pulsar `Intro` o el icono de confirmación .

Volver al índice

## Atributos comunes

Comentar los atributos lang, style, title

### Atributo class

El atributo class permite definir clases de elementos. Dad su importancia, se explica en una lección aparte.

### Atributo id

El atributo id permite identificar de forma unívoca un elemento en un documento. Por ello no puede haber dos elementos con el mismo valor en el atributo id.

El nombre de un atributo id tiene que empezar con una letra (mayúscula o minúscula, caracteres latinos) y puede contener dígitos, guiones medios (-), guiones bajos (_), comas y puntos. Si el nombre contiene puntos, a continuación del punto tiene que haber una letra.

Un elemento sólo puede tener un atributo id, es decir, el atributo id no puede contener espacios.

Volver al índice

## Eventos intrínsecos

Comentar los atributos onclick, ondbclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup

Ejemplos:

<p onclick="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo onclick.
<p ondbclick="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo ondbclick.
<p onmouseup="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo onmouseup.
<p onmousedown="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo onmousedown.
<p onmousemove="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo onmousemove.
<p onmouseover="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo onmouseover.
<p onmouseout="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo onmouseout.
<p onkeydown="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo onkeydown.
<p onkeyup="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo onkeyup.
<p onkeypress="this.style.color='red'">Este ... </p> | Este párrafo tiene establecido el atributo onkeypress.

Volver al índice