Tags y atributos HTML (página 3)

Práctica

Construiremos un bonito párrafo con un vínculo dentro de él, de modo que más tarde podamos ir cambiando sus propiedades.

El primer paso es construir el párrafo con su contenido. Los párrafos son insertados en los documentos HTML a través del tag HTML p. Podemos hacerlo de la siguiente manera:

Ahora pongamos el vínculo dentro de él a través del tag HTML a. Al comienzo, simplemente emplazaremos el elemento con su contenido ("bonito vínculo") y ningún atributo o evento:

Como puedes ver, todavía no hay ningún vínculo, de modo que deberíamos considerar que agregar un tag HTML a no significa que el vínculo ha sido establecido (el atributo "href" sí). Lo seguiremos llamando así porque sabemos que será un vínculo tarde o temprano.

Este es el momento en el que comenzamos a utilizar atributos. El primer atributo que usaremos será "lang". Con este atributo particular informamos al agente de usuario (navegador, robot de motor de búsqueda, etc.) en qué lenguaje está escrito el párrafo. Los valores para este atributo pueden ser conseguidos de la lista de Códigos de lenguaje.

Ahí está. Ahora estamos mostrando un trozo de texto y dando una pista extra acerca del mismo. Este tipo de atributos son la mayoría de las veces ocultos, porque no somos capaces de verlos en navegadores tradicionales. Sin embargo, muchos agentes de usuario usan esta información de alguna manera (por ejemplo, los navegadores hablados, comúnmente usados por las personas ciegas, dicen este texto en español en lugar de hacerlo en el lenguaje del documento, por ejemplo, inglés).

Otros atributos, como el que usaremos a continuación, son claramente visibles. El atributo "href" se aplica en el tag HTML a y especifica un recurso al cual este documento está haciendo referencia. Su valor debe ser la dirección del recurso referenciado, en este caso, la página del tag HTML a.

Hasta aquí hemos aprendido a usar tags y atributos en documentos HTML. Para terminar con esta práctica, agregaremos un evento.

Los ejentos son un salto a más allá de HTML, dado que son inútiles sin un lenguaje del lado cliente. Básicamente, lo que hace un evento es lanzar un programa en un lenguaje del lado cliente. Así que, como este es un tutorial de HTML, nos limitaremos a mostrar cómo lanzar el script, no a counstruirlo.

In este ejemplo, lanzaremos dos scrips llamados "do_something_click()" y "do_something_mouse_over()", en el mismo párrafo que hemos estado usando  El argunmento "this" le dirá al script, qué elemento debe afectar.

Los eventos que hemos elegido "onclick" y "onmouseover". Estos eventos son lanzados cuando el visitante hace click o pasa el mouse sobre el contenido del elemento. Para ver que otras acciones pueden activar eventos, mira esta lista de eventos en HTML.

Como usaremos este evento en el párrafo, los mismos lanzarán el script cuando el visitante hace click o pasa el mouse sobr el párrafo. Para hacerlo visible, usaremos scripts básicos para cambiar el color del texto: rojo cuando el mouse pasa por encima del texto y verde cuando se hace click sobre él.

Felicitaciones! la práctica ha terminado. Prepárate para comenzar el próximo tutorial.