Tags y atributos HTML

Tutorial pensado para introducir las bases del código HTML (lenguaje de marcas hipertextual) a usuarios que nunca han escrito un sitio web manualmente. Escribir código HTML es casi como escribir tags, atributos y contenidos. Por esta razón nos enfocaremos en explicar cómo se definen los tags, sus atributos y su contenido. Nota que también estableceremos las reglas para escribir código XHTML (lenguaje de marcas hipertextual extensible).

Es posible que encuentres muchos tags, atributos y códigos JavaScript en este tutorial pero ninguno de ellos está debidamente descrito. Esto se debe a que el objetivo del tutorial es enfocarse en la sintaxis general, no en las características de cada tag. Para ver una lista de tags refiérete a esta lista de tags HTML, donde puedes encontrar vínculos a recursos descriptivos acerca de cada tag en HTML, con su respectiva lista de atributos y eventos.

Elementos y tags (etiquetas)

HTML está compuesto por un conjunto de elementos que son la base de su estructura. Los elementos están diseñados para proveer herramientas a los autores y proporcionar información especial que será usada para computar la representación final del mismo. Esto significa que donde un tag es definido en el código HTML, sucederá algo en la representación de ese documento, que puede ser visual o no.

Los elementos están compuestos por dos tags: el tag de apertura y el tag de cierre (a excepción de los elementos vacíos cuando el tag de cierre es omitido). Elementos no son tags, elementos son representados por tags en el código, pero son usualmente considerados, de manera errónea, la misma cosa. Aquí tienes un ejemplo básico de un elemento HTML b con ambos tags de apertura y de cierre, y el contenido en el medio:



Nota como el tag de apertura está compuesto por el nombre del tag encerrado por los símbolos "<" y ">". Por otra parte, el tag de cierre es declarado exactamente como el tag de apertura pero con una barra antes del nombre del tag. Lo que sea que caiga en el medio es llamado contenido, pero ten en cuenta que no todos los elementos aceptan contenido (elementos vacíos).

Cada uno de los 93 tags estándares produce un resultado específico cuando el documento es representado (por ejemplo, el tag HTML b produce texto en negrita) permitiendo a los autores formatear y/o introducir información en los documentos. Cada tag puede tener atributos y eventos que deben ser declarados dentro del tag de apertura separados del nombre y de otros atributos o eventos por un espacio. Su contenido es emplazado entre el tag de apertura y el de cierre. Mira este ejemplo genérico:



Este código puede resultar dificil de comprender, de modo que reemplazaremos los valores genéricos por algunos ejemplos comunes para hacerlo amistoso (ver la presentación a la derecha):



Ahora podemos ver claramente el nombre del tag (a), el atributo y su valor (href), los dos eventos y sus funciones (onmouseover y onmouseout), el contenido (Lista de tags HTML) y el tag de cierre ([/url]). Nota que los eventos así como los atributos comparten una sintaxis común: el nombre del atributo/evento es seguido por un signo igual y el valor encerrado entre comillas.

Como nosotros recomendamos imperativamente que escribas documentos compatibles con el estándar de código XHTML, deberías siempre usar minúsculas para los nombres de tags y atributos (<nombre_tag> en lugar de <NOMBRE_TAG>).

Atributos

Los atributos pueden proporcionar ciertas características a un tag (por ejemplo, altura, ancho, color, etc.), algunas veces muy importantes, que finalmente definirán cómo debe ser interpretado el tag. Por ejemplo, el tag HTML a inserta un vínculo en el documento HTML (una forma de ir desde el documento actual hacia otro recurso, usualmente con un click), pero el atributo "rel" establece qué tipo de relación existe entre el documento actual y el recurso de destino.

Aún cuando muchos atributos son compartidos por muchos elementos, cada elemento tiene un conjunto predeterminado de atributos de acuerdo al estándar que se esté utilizando. Para ver los atributos que acepta un elemento, verifica la descrpción de dicho elemento en nuestra lista de Tags HTML

Como vimos en el ejemplo genérico, todo atributo debe tener un valor y debe estar definido en el tag de apertura. En este ejemplo insertaremos una definición completa (con contenido y tag de cierre) de un tag HTML a con dos atributos: "href" y "rel".



Observa como el nombre de atributo es seguido por un signo de igualdad y el valor encerrado por comillas. Así es como todo atributo debe definirse para se compatible con código XHTML.

También existe un tipo de atributo cuyo valor es booleano (Verdadero o Falso). Esto significa que puede definirse este tipo de atributos con solo escribir su nombre (sin el signo de igualdad ni su valor), pero como estamos escribiendo código XHTML, la forma correcta de definir este tipo de atributos es asignando su mismo nombre en el lugar del valor.

En el siguiente ejemplo mostramos una definición del tag HTML button, compatible con código XHTML, con los atributos: "id", "disabled" (booleano) y "tabindex".



Eventos

Los eventos son ampliamente usados en documentos HTML como una forma de asociar tags HTML a scripts. De manera simple, los scripts son programas del lado cliente que cumplen una cierta tarea y los eventos son las cosas que ocurren y ejecutan los scripts (por ejemplo, el puntero del mouse pasa sobre un elemento, la página termina de cargarse, etc.). Lee más acerca de eventos en HTML.

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



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

La disponibilidad de los eventos depende del tag utilizado, lo que significa que no todos los eventos pueden ser usados en cualquier tag. Para ver qué eventos están disponibles para un tag específico refiérete a la página de descripción del tag desde esta lista de tags HTML. Para ver una completa lista de todos los eventos en HTML refiérete a este documento sobre los eventos en HTML.

Contenido

El contenido de un tag es en la mayoría de los casos la parte afectada por el efecto del tag (por ejemplo, el texto mostrado en negrita para el tag HTML b), y va en medio de los tags de apertura y cierre.

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



Nota que en el segundo caso, la última barra es considerada por los navegadores antiguos como un atributo desconocido por lo cual es simplemente ignorado. Por esta razón se debe separar el último atributo de la barra.

El contenido de un tag puede ser otro tag o hasta trozos de documentos HTML, aunque no todos los tags pueden contener a otros tags y algunos de ellos pueden contener solo ciertos tags. Como regla general, elementos de línea no pueden contener elementos de bloque, elementos de bloque pueden contener elementos de línea, y elementos de bloque pueden contener elementos de bloque. Esta es una regla muy general que tiene muchas excepciones pero es suficiente para obtener una idea general. La aceptación de tags que pueden ser contenidos varían de tag en tag. Observa este ejemplo:



Recuerda que para hacer tu código compatible con el estándar de código XHTML deberías respetar el orden en que los tags son abiertos y cerrados (esto significa, el primer tag en abrirse es el último en cerrarse).

A medida que continues con los tutoriales verás que tags pueden ser contenidos por otros y cuales de ellos son de línea y cuáles de bloque.

Ejemplos

Finalmente, mostraremos algunos ejemplos utilizando tags simples. Antes que nada haremos un vínculo hacia otra página (tag HTML a), mostraremos texto en diferentes estilos (tag HTML b y tag HTML i), insertaremos una imagen (tag HTML img) y separaremos todos los ejemplos con saltos de línea (tag HTML br)



Práctica

Construiremos un párrafo con un vínculo en su interior, de modo que más tarde podamos cambiar sus propiedades.

El primer paso es construir el párrafo con su contenido. Los párrafos se insertan en los documentos HTML mediante el tag HTML p. Podemos hacerlo como a continuación:



Ahora pongamos el vínculo en su interior, mediante la inserción del tag HTML a. Al principio, simplemente colocaremos el tag y su contenido ("lindo vínculo") y ningún atributo o evento:



Como puedes ver, todavía no hay ningún vínculo, por lo cual debemos considerar que agregar un tag HTML a no significa que un vínculo ha sido establecido (el atributo "href" lo hace). Seguiremos llamándolo así debido a que sabemos que tarde o temprano se convertirá en un vinculo.

Este es el momento cuando empezamos a utilizar atributos. El primer atributo que agregaremos es "lang". Con este atributo en particular indicamos al agente procesador (navegador, robot de los motores de búsqueda, etc.) en qué lenguaje está escrito este párrafo. El valor para este atributo puede ser obtenido de la lista de Códigos de lenguaje



Ahí vamos. Ahora estamos mostrando un trozo de texto y dando una clave extra acerca del mismo. Este tipo de atributos son la mayoría de las veces atributos ocultos, debido a que no somos capaces de verlos en navegadores tradicionales. De todos modos, muchos agentes de usuario utilizan esta información en algún nivel (por ejemplo, los navegadores hablados, comúnmente usados por personas ciegas, hablan este texto en español en lugar de hacerlo en el lenguaje del documento, por ejemplo, inglés).

Otros atributos, como el que utilizaremos a continuación, son claramente visibles. El atributo "href" funciona solo 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 referido, en este caso, la URL del tag HTML a.



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

Los eventos sin un salto más allá de HTML, dado que son inútiles sin un lenguaje del lado servidor. Básicamente, lo que un evento hace, es llamar o ejecutar un programa escrito en un lenguaje del lado servidor. De modo que, al ser este un tutorial sobre HTML, nos limitaremos a mostrar como llamar al programa, no a construirlo.

En este ejemplo, llamaremos a dos programas denominados "do_something_click()" y "do_something_mouse_over()", en el mismo párrafo que hemos estado usando. El argumento "this" le dirá al programa, a qué elemento deberá afectar.

Los eventos que hemos elegido son "onclick" y "onmouseover". Estos eventos son disparados cuando el visitante hace click o pasa el mouse por encima del contenido del elemento. Para ver qué otras acciones pueden disparar eventos, refiérete a esta lista de eventos en HTML.

Como usaremos estos eventos en el párrafo, los mismos llamarán a los programas cuando el visitante haga click o pase el mouse por encima del párrafo. Para hacerlo visible, usaremos programas básicos para cambiar los colores del texto: rojo cuando el mouse pasa por encima y verde cuando se hace un click.



Felicitaciones! la práctica ha terminado.
Tags y atributos HTML
0 Puntos Score: 0/10
Visitas: 1055 Favoritos: 1
3 Comentarios Tags y atributos HTML
jajaja lo dices como si fuera muy facil  
Cita: Mostrar
pero no es tan dificil la verdad.
<video width="1280" height="720" controls  poster="">
   <source src="http://xrs.hostingsiteforfree.com/Archivos/VID/Garo%20-%20Honoo%20no%20Kokuin/Garo%20-%20Honoo%20no%20Kokuin%20-%2001.mp4" type="video/mp4">
   <source src="" type="video/ogg">
   <source src="" type="video/webm">
   Your browser does not support the video tag or the file format of this video. http://www.webestools.com/
</video>
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!