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.
Los tags o etiquetas representan el principal elemento en un documento HTML y brindan información especial que es utilizada para calcular la representación final del documento. Esto significa que donde se define un tag en el código, algo sucederá en la representación del documento, algunas veces visualmente y otras de manera oculta.
Cada uno de los 93 tags produce un resultado específico cuando el documento es representado (por ejemplo, el tag HTML b produce texto en negrita) permitiendo a los autores dar formato y/o agregar información a los documentos. Cada tag puede tener atributos, eventos y contenido. Toda esta información debe ser declarada (en forma genérica) de la siguiente manera:
Dado que el estándar XHTML fuerza el cierre de tags, un tag debe ser cerrado siempre (</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.
Finalmente, mostraremos algunos ejemplos utilizando tags simples. Antes que nada haremos vínculos hacia otras páginas (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="https://www.htmlquick.com/es/reference/tags/br.html">tag HTML br</a>.<br /><br /> Encuentra una completa lista de tags en <a href="https://www.htmlquick.com/es/reference/tags.html">tags HTML</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="https://www.htmlquick.com/es/img/links/button.jpg" width="88" height="31" alt="logo HTMLQuick.com" /> |
Lee más acerca del tag HTML br. Encuentra una completa lista de tags en tags HTML. Esta página está pensada para introducir los tags y atributos HTML. Deberías aprender a escribir código XHTML también. 
|