XHTML

 

Cómo funciona el XHTML

Etiquetas

XHTML está basado en etiquetas. Una etiqueta tiene la siguiente forma:

<etiqueta>Algo aquí dentro</etiqueta>

Por ejemplo, para marcar el título principal de una página, utilizamos la etiqueta <h1>:

<h1>Un título</h1>

En este ejemplo h1 es el nombre de la etiqueta. <h1> es la etiqueta (o etiqueta de apertura) y </h1> la etiqueta de cierre correspondiente. El elemento h1 (se utiliza el nombre de la etiqueta para referise al elemento) es el conjunto: las etiquetas (de apertura y de cierre) más el contenido.

Etiquetas aisladas

Hay elementos que no pueden albergar contenidos: El elemento se reduce a la etiqueta de apertura y a la etiqueta de cierre. En este caso en vez de escribir:

<etiqueta></etiqueta>

se escribe:

<etiqueta />

Observa el espacio en blanco que hay entre el nombre de la etiqueta y la barra /. Es muy importante para que los navegadores antiguos interpreten correctamente la etiqueta.

Atributos

Las etiquetas pueden ir acompañadas de atributos. Los atributos dan un suplemento de información al navegador y se utilizan de la siguiente manera:

<etiqueta atributo="valor del atributo">Algo aquí dentro</etiqueta>

Observa que el valor del atributo se encuentra encerrado entre comillas dobles (también es posible utilizar comillas simples).

Una etiqueta puede tener varios atributos separados por un espacio en blanco. Por ejemplo, la etiqueta a permite crear un enlace. El atributo href indica la dirección del enlace y el atributo title sirve par dar una pequeña descripción del mismo.

<a href="http://www.google.es" title="Visita Google">Google</a>

Ejercicios

ejercicio 1

En el código que viene a continuación, indica las etiquetas (de apertura y de cierre), los atributos y los valores de atributos:

<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Referencia</th>
<th>Precio</th>
</tr>
<tr>
<td>235</td>
<td>12.00</td>
</tr>
<tr>
<td>236</td>
<td>14.00</td>
</tr>
</table>
<p> <a href="www.visualco.com" title="Diseño y comunicación">Visualco</a> <img src="imagenes.gif" alt="Una imagen de playa" /> </p>
</body>

ejercicio 2

En el código del ejercicio anterior, las etiquetas se "combinan" de una manera nada casual. ¿Puedes encontrar la lógica de esta combinación?

ejercicio 3

Para faciltar la lectura del código XHTML, se indentan con el mismo valor las etiquetas con idéntica jeraquía. Copia el código que viene a continuación e indéntalo de forma adecuada.

<body><p>Significado de algunos smileys:</p><dl><dt>:)</dt><dd>Sonrisa</dd><dt>xD</dt><dd>Carcajada</dd><dt>:P</dt><dd>Sacar la lengua</dd></dl><table border="1" cellpadding="10" cellspacing="30"><caption>Videojuegos</caption><tr><th>Título</th><th>Género</th></tr><tr><td>Sonic</td><td>Plataformas</td></tr></table></body>