Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Tutoriales HTML > Tags y atributos HTML > Tags y atributos HTML (página 2)

Bypass main content

Tags y atributos HTML (página 2)

Páginas:<123>
Bypass main content

Eventos

Los eventos son ampliamente utilizados en documentos HTML como una forma de asociar tags HTML a scripts. Dicho de manera simple, los scripts son programas del lado cliente que llevan a cabo una acción y los eventos son aquellas cosas que ocurren que hacen que se ejecuten los scripts (por ejemplo, el puntero del mouse pasando sobre un elemento, la página termminado de cargar su contenido, etc.). Lee más acerca de los eventos en HTML.

La sintaxis usada para definir un evento es muy similar a la sintaxis de un atributo. En este ejemplo mostramos el tag HTML a, con el atributo "href" y los eventos "onmouseover" y "onmouseout".

Código
<a onmouseover="comenzar_funcion()" onmouseout="detener_funcion()" href="reference.html">Referencia</a>
Vista

Nota que las funciones "comenzar_funcion()" y "detener_funcion()" deben ser escritas en algún lenguage del lado cliente, el cual no será tratado en este sitio. Para leer más acerca de los scripts del lado cliente refiérete a este documento acerca del lenguaje JavaScript.

La disponibilidad de eventos depende del tag utilizado, lo que significa que no todos los eventos pueden ser utilizados en todos los elementos. Para ver qué eventos están disponibles para un elemento específico mira la descripción del elemento en esta lista de tags HTML. Para ver una lista completa de todos los eventos en HTML ve al documento de eventos en HTML.

Contenido

El contenido de un elemento es en la mayoría de los casos la parte afectada por el efecto/información del tag (por ejemplo, el texto dentro de un elemento HTML strong es, enla mayoría de los navegadores, representado en negrita y adquiere mayor importancia que el texto regular) y va encerrado por los tags de apertura y cierre.

Por su naturaleza y funcionalidad, no todos los elementos tienen contenido (por ejemplo, el tag HTML img). Estos elementos vacíos deben ser adecuadamente cerrados para que el documento sea compatible con el estándar de código XHTML. Existen dos formas de cerrar un elemento vacío: el primero es utilizando un tag de cierre normal (</nombretag>) y la otra es usando una barra al final del tag de apertura. Mira los ejemplos:

Código
<img onmouseover="comenzar_funcion()" src="logo.jpg" alt="Logo de la compañía"></img>
<img onmouseover="comenzar_funcion()" src="logo.jpg" alt="Logo de la compañía" />

Nota que en el segundo caso, la barra final es considerada por los anvegadores antiguos como un atributo desconocido por lo cual es ignorada. Es por esto que, aún cuando no es requerido por el estándar, un espacio siempre debería separar al último atributo de la barra (sólo por razones de compatibilidad).

El contenido de un elemento puede también ser otro u otros elementos o inclusive trozos de documentos HTML, sin embargo, no todos los elementos pueden ser anidados y algunos de ellos sólo pueden contener a ciertos otros. Como regla general, los elementos de línea no pueden contener elementos de bloque, los elementos de bloque pueden contener elementos de línea y los elementos de bloque pueden contener elementos de bloque. Esta es una regla muy general que puede tener varias excepciones, pero es suficiente para tener una idea general. La aceptación que tienen los elementos para contener a otros varía de elemento en elemento. Observa el siguiente ejemplo:

Código
<p>Este tag contiene a otro <strong>tag de línea</strong>.</p>
<div>
<div>Aquí tenemos a un elemento de bloque que contiene a otro <span>elemento de bloque que a su vez contiene otros <em>elementos de línea</em></span>.</div>
</div>
Vista
Este tag contiene a otro tag de línea.
Aquí tenemos a un elemento de bloque que contiene a otro elemento de bloque que a su vez contiene otros elementos de línea.

Recuerda que para hacer tu código compatible con XHTML debes respetar el órden en que los tags son abiertos y cerrados (es decir, el primer tag abierto es el último en cerrarse).

A medida que continúes con los tutoriales, verás qué tags pueden ser contenidos por otros y cuáles de ellos son de línea y cuáles de bloque.

Ejemplos

Finalmente, veremos algunos ejemplos utilizando tags simples. Primero crearemos un vínculo a otra página (tag HTML a), daremos importancia al texto (tag HTML em y tag HTML strong), insertaremos una imagen (tag HTML img) y separaremos todos los ejemplos con quiebres de línea (tag HTML br)

Código
Lee más acerca del <a href="../reference/tags/br.html">tag HTML br</a>.<br />
Esta página está pensada para presentar los <strong>tags y atributos HTML</strong>.<br />
Deberías aprender a escribir <em>código XHTML</em> también.<br />
<img src="http://www.htmlquick.com/img/p/link-to-us/button.jpg" alt="Logo de HTMLQuick.com" width="88" height="31" />
Vista
Lee más acerca del tag HTML br.
Esta página está pensada para presentar los tags y atributos HTML.
Deberías aprender a escribir código XHTML también.
Logo de HTMLQuick.com
Páginas:<123>

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona