Tabla de contenidos
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.
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:
| Código | Visualización |
|---|---|
|
<b>Texto remarcado</b> |
Texto remarcado |
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):
| Código | Visualización |
|---|---|
|
<a href="http://www.htmlquick.com/es/reference/tags.html" onmouseover="this.style.color='#FFFFFF'" onmouseout="this.style.color='#000000'">Lista de tags HTML</a> |
Lista de tags HTML |
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 (</a>). 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>).
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.
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".
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.
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:
| Código | Visualización |
|---|---|
|
<p>Este tag contiene un <b>tag de línea</b>.</p> <div> <div>Aquí tenemos un elemento de bloque conteniendo a otro elemento de bloque <span>que está conteniendo otros <i>elementos de línea</i></span>.</div> </div> |
Este tag contiene un tag de línea. Aquí tenemos un elemento de bloque conteniendo a otro elemento de bloque que está conteniendo otros elementos de línea.
|
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.
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)
| Código | Visualización |
|---|---|
|
Lee más acerca del <a href="http://www.htmlquick.com/es/reference/tags/br.html">tag HTML br</a>.<br /><br /> Esta página está pensada para introducir los <b>tags y atributos HTML</b>.<br /><br /> Deberías aprender a escribir <i>código XHTML</i> también.<br /><br /> <img src="http://www.htmlquick.com/es/img/links/button.jpg" width="88" height="31" alt="logo HTMLQuick.com" /> |
Lee más acerca del tag HTML br. Esta página está pensada para introducir los tags y atributos HTML. Deberías aprender a escribir código XHTML también. 
|