Introducción a XHTML

XHTML
1. INTRODUCCIÓN
Para crear páginas web utilizando las tecnologías estándar recomendadas por la W3C
(World Wide Web Consortium) es necesario saber estructurar bien el documento antes de
aplicar el formato con CSS para que todo funcione como corresponde. Este documento debe
tener el formato XHTML. (Después de leer este manual, puedes revisar nuestro manual de
CSS)
Sólo necesitarás un editor de texto plano (como Bloc de Notas, Word no, porque da
formato), también puedes utilizar Dreamweaver siempre que te acostumbres a usarlo en la
vista “Code and Design” o “Código y Diseño” para eliminar el código basura que genera y
poder echar mano al código, y un navegador.
XHTML significa eXtensive HyperText Markup Language y es la versión evolucionada del
HTML. Es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las
cosas, sino lo que significan. Por ejemplo, si tenemos el título de nuestra página, en lugar de
decir “Lo quiero grande en letras rojas”, le indicamos al navegador que “Este es el título
principal de la página”. Luego podemos controlar el aspecto con las hojas de estilo CSS, pero
no del XHTML.
XHTML es un lenguaje que se basa en etiquetas (tags). Una etiqueta sería algo como esto:
<etiqueta>Algo aquí dentro</etiqueta>
La etiqueta que sirve para poner el título principal en la página es <h1>.
<h1>What is the Matrix?</h1>
Entonces, <h1> marca el inicio de la etiqueta y </h1> se encarga de cerrarla. También hay
etiquetas que funcionan con una sola parte, así:
<etiqueta />
Debes tener en cuenta el espacio en blanco que hay entre el nombre de la etiqueta y la barra
/. Es muy importante para que funcione con los navegadores viejos.
Existen algunas etiquetas que se pueden modificar mediante atributos (más adelante veremos
cómo funcionan):
<etiqueta atributo="valor">
Por último debes recordar escribir las etiquetas siempre en minúsculas y los atributos
siempre entre comillas.
2. ESTRUCTURA XHTML
La codificación
La primera línea que debemos tener en un documento XHTML es la que marca la
codificación. El formato en el que se guardan los caracteres en el archivo. La codificación
estándar es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales,
griegos, chinos, árabes, japoneses, coreanos…).

Asegúrate de que el editor de textos que uses te guarda el archivo en formato Unicode
(normalmente es una opción a elegir en el cuadro de diálogo de Guardar como).
Hay que escribir esto:
<?xml version ="1.0" encoding="UTF-8" ?>
La línea anterior tiene que aparecer al principio de todo el documento, antes que ninguna otra.
Si usas PHP, la etiqueta que marca el inicio del script puede ser <?, así que los navegadores
se hacen un lío. Podemos omitir esa línea del principio y declarar la codificación dentro de la
sección head (ahora veremos qué es eso). Si elegimos esto último, la línea a incluir dentro del
head sería:
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
Escoge la opción que quieras, pero sólo una. Por cierto, por motivos de espacio, la línea
aparece cortada. No importa, porque el navegador interpreta los saltos de línea como si fueran
espacios en blanco. En realidad podríamos escribir todo el archivo XHTML en una sola línea.
O cada palabra en una línea diferente.
El DOCTYPE
Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué
contiene el archivo que está abriendo. Nosotros usaremos la especificación XHTML 1.0 Strict,
que es esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas
<html> y </html>.
El elemento raíz (HTML)
El resto de nuestro documento tiene que ir dentro de la etiqueta <html>. Pero en esa etiqueta
debemos indicar una serie de cosas, como que nuestro documento es XHTML y qué lengua
estamos usando. Si escribimos en castellano, nos quedaría así:
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="es" lang="es">
Las letras “es” son el código ISO que representan al idioma "español".
La cabecera (HEAD)
La cabecera contiene información que no forma parte del contenido de la página en sí, como
el título, vínculos a hojas de estilos CSS, información para robots de búsqueda, scripts, etc.
Por ahora nos quedaremos sólo con el título de la página. La cabecera va encerrada entre
<head> y </head>, mientras que para el título usamos la etiqueta <title>. El título de la web
aparece en la barra de título de la ventana del navegador, es el nombre por defecto que
aparece si añadimos a favoritos la página, etc.

Quedaría así:
<head>
<title>Título de la web</title>
</head>
El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código
El cuerpo (BODY)
Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body>, y que contiene
toda la Información que de mostrará en el navegador. Quedaría así:
<body>
Aquí va el cuerpo de la web
</body>
La plantilla
Recopilando todo, nos quedaría algo como esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Título de la web</title>
</head>
<body>
Aquí va el contenido
</body>
</html>
Guarda una copia en un archivito llamado plantilla.html para usos posteriores.

3. ETIQUETAS BÁSICAS
Párrafos
Los párrafos estructuran el contenido. Contienen una o más frases relacionadas entre sí,
igual que en el mundo real. Si queremos crear un párrafo, metemos el texto entre las etiquetas
<p> y </p>.
Por ejemplo:
<p>
Hola, me llamo Luke Skywalker y soy piloto
de una X- Wing en el Rogue Squadron. También
soy un Jedi del Lado Luminoso de la Fuerza.
Mis maestros han sido Yoda y Obi -Wan Kenobi.
</p>
Si pruebas este ejemplo en el navegador, notarás que pasa por alto los saltos de línea.
Podrías haber puesto todo el párrafo en la misma línea y hubieras obtenido el mismo
resultado.
Saltos de línea
Hay veces que necesitamos forzar un salto de línea dentro de un párrafo. Para ello, usamos
la etiqueta <br />, así:
<p>
Dark Chest of Wonders <br />
Seen trought the eyes <br />
Of the one with pure heart <br />
Once , so long ago.
</p>
Aunque estéticamente podamos obtener el mismo resultado mediante párrafos (con <p>) que
con saltos de línea (<br />) de forma indiscriminada, debemos recordar que un documento
XHTML utiliza un lenguaje semántico, es decir que lo importante para que esté bien
estructurado es el significado de las etiquetas que utilizamos y no el efecto estético que
generan.
Los títulos (headings)
Los títulos agrupan y ordenan información. Imaginemos la sección de enlaces de nuestra
página. El título principal podría ser Mis links favoritos. Luego tendríamos los links clasificados
por secciones, cada una de ellas bajo un subtítulo diferente: Blogs, descargas y videojuegos.
Incluso podríamos tener subcategorías dentro de una misma sección, como por ejemplo
RPG’s, Aventuras Gráficas y Arcades.

Para conseguir esto, tenemos las etiquetas <hx> y </hx>, donde x es un número del 1 al 6.
<h1> corresponde al título más importante y sólo debería haber uno por página. Luego le
siguen <h2>, <h3>, y así sucesivamente. Los elementos de encabezado, deben guardar un
orden lógico y no debemos saltar ninguno de los niveles.
Ejemplo:
<h1>Mis links favoritos</h1>
<h2>Blogs</h2>
<! -- bla bla bla -->
<h2>Videojuegos</h2>
<h3>RPG ’s</h3>
<h3>Arcades</h3>
Si ves el código anterior en un navegador, aparecerán los títulos más importantes de mayor
tamaño que los menos importantes (pero el tamaño de cada título siempre puede cambiarse
con CSS).
Citas
Hay tres etiquetas diferentes para escribir citas: <blockquote>, <q> y <cite>. Con
<blockquote> y <q> escribimos la cita en sí, mientras que con <cite> marcamos su origen
(persona, libro, canción, etc.).
La diferencia entre <blockquote> y <q> es que <blockquote> se emplea para escribir citas
largas, esta etiqueta contiene párrafos, en cambió <q> funciona a la inversa porque está
hecha para escribir citas cortas, entonces va dentro de párrafos. Técnicamente hablando,
<blockquote> es un elemento block, y <q> es inline, los elementos inline no pueden ir “sueltos”
en un documento xhtml.
Para ejemplificar todo lo anterior:
<p>Aquí os dejo un fragmento de la canción
<cite>Die for Rock ’n’ Roll </cite>, de Dover:</p>
<blockquote>
<p>
Everybody danced (while)<br />
I was lying on the floor <br />
I was ready to die <br />
for Rock ’n’ Roll <br />
</p>
</blockquote>
<p>Mi parte preferida es cuando dice lo de
<q>I was ready to die [...] </q>.</p>

Separadores horizontales
Para los separadores horizontales se emplea la etiqueta <hr /> (horizontal rules), pero
actualmente casi no son utilizados gracias a que el empleo de estilos CSS permite crear
bordes delimitadores muy interesantes.
Ejemplo:
<h2>Los videojuegos</h2>
<p>Bla bla bla…</p>
<hr />
<h2>Música</h2>
<p>Bla bla bla…</p>
Comentarios
Los comentarios se utilizan para indicar partes del código de una página a modo de nota, pero
son invisibles para el navegador. Sirven como guía para el desarrollador o como ayuda para
usuarios que utilizan navegadores especiales, como por ejemplo los no videntes.
Para escribir un comentario en el código fuente, lo hacemos entre , recordando
siempre de hacerlo en una sola línea:

4. ETIQUETAS DE FORMATO
En este capítulo veremos cómo marcar ciertas partes del contenido para destacarlas y hacer
más clara la lectura. Recuerda que siempre nos referimos a destacar semánticamente, el
aspecto de todos los formatos se controla con CSS.
Acerca de <b> y sus secuaces
Si eres de la vieja escuela de webmasters, probablemente estés acostumbrado a usar
etiquetas como <b>, <i> y compañía para poner negrita, cursiva, subrayado, monoespaciado,
etc. ¡Olvídalo!
El HTML 4 nos permitía controlar el aspecto con el que se iba a mostrar el texto con etiquetas
como <font> con la que cambiábamos tamaño, fuente y color del texto. Con XHTML nos
limitamos a estructurar el contenido y a asegurarnos de que sea semántico.
¿Qué es esto de la semántica? Sería algo así como lograr que una máquina pueda entender
un texto. Por ejemplo, un ordenador no sabe qué significa el que algo esté en negrita. Pero sí
entiende que algo que tiene énfasis es “importante”, y debe ser destacado de alguna manera.
Puede parecer una tontería, pero a la hora de trabajar con navegadores aurales (para ciegos),
de texto, o desde móviles, la cosa cobra importancia.

Énfasis
Para dar énfasis a un texto o parte de texto usaremos la etiqueta <em> y si queremos marcar
un texto en negritas utilizaremos <strong>.
Por ejemplo, este código:
<p>
<em>Far</em> is not the word because I'm never far
<strong>enough</strong>.
</p>
Se vería en el navegador así:
Far is not the word because I'm never far enough.
Es importante que sepas que estas dos etiquetas van dentro de elementos block, como
párrafos.
Preformato
Si has practicado algo de los capítulos anteriores, te habrás dado cuenta de que cuando el
navegador interpreta el código XHTML, ignora múltiples espacios en blanco, saltos de línea,
tabuladores, etc. del código. Hay ocasiones en las que necesitamos mantener este “formato”,
por ejemplo cuando queremos mostrar código fuente. Para eso existe la etiqueta <pre>, que
tampoco se utiliza mucho actualmente.
Un ¡Hola mundo! en C nos quedaría así:
<pre>#include <stdio.h>
int main() {
printf("Hello World!n");
return(0);
}</pre>
Acrónimos y abreviaturas
Para utilizar acrónimos y abreviaturas tenemos las etiquetas <acronym> y <abbr>
respectivamente. En el navegador se genera el mismo efecto; se muestra su significado al
pasar el mouse por encima.
Para que funcionen, estas etiquetas necesitan el atributo title donde colocamos su significado.

Ejemplo:
<p>
Mi ordenador tiene 512 <abbr title="Megabytes">MB</abbr>
de memoria <acronym title="Random Access Memory">RAM</acronym>.
</p>
Si no conoces la diferencia entre acrónimo y abreviatura, en nuestro manual de accesibilidad
encontrarás una ayuda.
5. ENLACES
Los enlaces, una de las características más importantes de la web, se implementan con la
etiqueta <a>.
Enlace a una página externa
Para enlazar a una página o archivo que se encuentra en otro servidor utilizamos <a> de esta
manera:
<a href=http://www.algo.com title="Descripción">
Texto del enlace
</a>
El atributo href contiene la URL a la que queremos enlazar. Es importante no olvidar el
protocolo (en esta caso http://) al escribir la URL para que funcione.
En title se escribe una descripción de la página que enlazamos, que se verá en la mayoría de
los navegadores al pasar el mouse por encima del link. El texto del enlace es independiente
del título y se deben confundir.
Por ejemplo:
<a href="http://www.barrapunto.com" title="La información que te interesa">Barrapunto</a>
Enlace a una página local
Si queremos enlazar a una página que está dentro de nuestro servidor, necesitamos conocer
la ruta (o path) desde la página donde está el enlace hasta el documento al que queremos
enlazar.
Si el origen está en el mismo directorio que el destino, solamente escribimos el nombre del
archivo así:
<a href="profile.html" title="Información sobre mí">Ficha personal</a>
En cambio, si el destino de encuentra en un subdirectorio, utilizamos la barra / para indicar el
camino:
<a href="galeria/color.html" title="Galería color">Ver dibujos a color</a>
Y si el destino está ubicado en un directorio por encima, ponemos dos puntos y la barra ../ de
esta manera:
<a href="../index.html" title="Página principal">Volver al inicio</a>

Enlace a una dirección de e-mail
Si colocamos mailto: en el atributo href, seguido de una dirección de correo electrónico,
crearemos un enlace que, al hacer clic sobre él, abrirá automáticamente una ventana del
cliente de correo que tenga el usuario para que escriba un mensaje a esa dirección.
Por ejemplo:
<a href="mailto:leia@alianza.net" title="E-mail de la Princesa Leia">Leia</a>
Anclas
Con las anclas (anchor) podemos hacer un enlace a una posición concreta de la página.
Funcionan así:
Primero tenemos que crear el ancla. Esto se hace agregando el atributo id, que se puede
utilizar en prácticamente cualquier etiqueta.
Por ejemplo:
<h3 id="comentarios">Lista de comentarios</h3>
Después tenemos que crear un link que no lleve a esa ancla. Para esto, ponemos en href el ID
precedido de una almohadilla o numeral #, así:
<a href="#comentarios" title="Lista de comentarios">Leer comentarios</a>
También se puede enlazar a un ancla que esté en otra página:
<a href="post005.html#comentarios" title="Lista de comentarios">Comentarios del post nº
5</a>
Las anclas son útiles para páginas muy extensas, como las FAQs que tienen un índice de
preguntas con enlace al ancla correspondiente de su respuesta. También es habitual otro
enlace en la respuesta que lleva a un ancla ubicada en el índice, para facilitar la navegación.
6. LISTAS
Listas ordenadas
Las listas ordenadas se crean con la etiqueta <ol> y muestran sus elementos numerados:
<p>Mis escritores favoritos (en orden de preferencia):</p>
<ol>
<li>R. A. Salvatore</li>
<li>George R. R. Martin</li>
<li>Isabel Allende</li>
</ol>
Tengamos presente que con CSS podremos modificar el número por el que empieza a contar,
también elegir el tipo de numeración (números romanos, arábigos, letras, mayúsculas, etc…).

Listas sin ordenar
Este tipo de listas sin orden se crean con la etiqueta <ul> y marcan cada elemento con una
viñeta:
<p>El helado perfecto (¡ñam!):</p>
<ul>
<li>1 bola de helado de chocolate</li>
<li>1 bola de helado de limón</li>
<li>Trocitos de piña y melocotón en almíbar</li>
<li>Sirope de chocolate</li>
</ul>
De la misma manera que con las listas ordenadas, es posible cambiar su aspecto con hojas
de estilo y elegir la clase de viñetas e incluso cambiar las viñetas por una imagen.
Listas de definición
Estas listas son diferentes a las anteriores porque cada ítem se compone de dos elementos;
un término y su definición. Las etiquetas que se utilizan son: <dl> para crear la lista, <dt>
para cada término y <dd> para las definiciones.
Por ejemplo:
<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>
Las palabras término y definición no sólo se refieren a una palabra y a su significado. También
podemos usar una lista de definición para crear un perfil (por ejemplo), relacionando los pares
Nombre-Leia, Ciudad-Coruscant y Profesión-Senadora.
También podemos cambiar su aspecto con CSS.
Listas anidadas
Anidar significa meter una lista dentro de otra. Las listas anidadas son sólo una combinación
de las anteriores.

Por ejemplo:
<p>Algunos libros de Salvatore:</p>
<ul>
<li>I Trilogía de El Elfo Oscuro
<ol>
<li>La Morada</li>
<li>El Exilio</li>
<li>El Refugio</li>
</ol>
</li>
<li>Trilogía de El Valle del Viento Helado
<ol>
<li>La Piedra de Cristal</li>
<li>Ríos de Plata</li>
<li>La Gema del Halfling</li>
</ol>
</li>
</ul>
La precaución que debemos tener es cerrar la etiqueta que corresponda. Cerraremos primero
las etiquetas interiores y luego las de afuera. Como se trata de insertar una lista dentro de un
ítem de otra lista, debemos cerrar primero la lista interior y después el ítem de la lista exterior.
Para esto no podemos ayudar visualmente con un buen tabulado.

7. IMÁGENES
Las imágenes nos ayudan a hacer una web más atractiva y a aportar más información. Pero
no es recomendable su uso indiscriminado y debemos saber cuándo usarlas.
Hay tres formatos de imagen que podemos utilizar: JPEG, GIF y PNG. El JPEG es el más
adecuado para imágenes con muchos colores o gradientes, como fotografías. El formato GIF
es más adecuado para imágenes con colores planos, sólo pueden almacenar hasta 256
colores diferentes, pero permite que uno de ellos sea transparente. Las imágenes en PNG
son el estándar y permiten elegir varias profundidades de paleta (número de colores).
También tenemos la posibilidad de agregarle un canal alfa y crear efectos con transparencias
de distinta opacidad. Pero hay que tener cuidado porque el navegador Ya-Sabes-Cuál en su
versión 6 y anteriores no implementa correctamente el formato PNG.
Insertar una imagen
La etiqueta mediante la cual insertamos una imagen es <img>, a la que se le agregan unos
cuantos atributos más:
<img src="image.gif" width="ancho" height="alto" alt="descripción" />
En src ponemos qué imagen queremos mostrar, teniendo en cuenta, al igual que con los links,
la ruta hacia la imagen. Generalmente, por razones de organización las imágenes se colocan
en un subdirectorio llamado images, así que tendríamos que escribir src=“images/algo.gif”.
Con los atributos width y height establecemos el ancho y el alto de la imagen. Aunque su valor
lo podemos indicar tanto en unidades relativas como absolutas, es recomendable utilizar
píxeles y hacerlo con las dimensiones reales de la imagen para ahorrar trabajo al navegador a
la hora de maquetar la página. Con dimensiones reales me refiero a que si la imagen tiene
200 píxeles de ancho, coloquemos width="200".
El atributo alt contiene una descripción de la imagen que se mostrará cuando ésta no se
haya podido mostrar en el navegador por algún motivo. También se muestra en la mayoría de
los navegadores al pasar el mouse por encima de la imagen. Por cuestiones de accesibilidad,
este atributo es obligatorio: hay personas que utilizan navegadores de texto como Lynx, o
usuarios que deshabilitan las imágenes para ahorrar tiempo y hay usuarios que sencillamente
son ciegos.
Ejemplo:
<img src="images/banner.gif" width="200" height="40" alt="BenKo’s Art" />
Imágenes como links
Las imágenes también pueden funcionar como enlaces. Esto lo podemos hacer colocando una
imagen dentro de la etiqueta <a>, así:
<a href="http://art.ladybenko.net" title="Mi portafolio">
<img src="images/banner.gif" width="200" height="40" alt="BenKo’s Art" />
</a>

Los navegadores suelen agregarle un borde azul para indicar que se trata de un link. ¡¡¡No
uses el nefasto border=0!!! con CSS se puede cambiar el aspecto.
Hay una técnica para implementar galerías de imágenes que consiste en la utilización de
thumbnails. Un Thumbnail es una imagen más pequeña que la original, que al pulsar sobre
ella se carga la imagen a tamaño completo. A algunos se les ocurre esto:
<a href="matrix.jpg" title="Wallpaper">
<img src="matrix.jpg "width="100" height="50"
alt="Wallpaper de Trinity" />
</a>
Esto está mal. Si la imagen Trinity pesa 100 KB, tendremos esos 100 KB ¡como thumbnail!
Escalar una imagen con width y height no modifica su peso. Justamente si hacemos una
galería de imágenes pequeñas, lo que queremos evitar es el peso de las imágenes grandes.
Lo que tenemos que hacer es una copia pequeña de la imagen original que ocupe, por
ejemplo, 5 KB:
<a href="matrix.jpg" title="Wallpaper">
<img src="matrix_thumb.jpg" width="100" height="50" alt="Wallpaper de Trinity" />
</a>
Sobre el uso y abuso de imágenes
Se dice que una imagen vale más que mil palabras. Pero en web, la sobrecarga de imágenes
o la utilización de pocas mal empleadas, son desesperantes. ¿Te ha pasado de entrar en un
sitio web con fondo de color estridente, letras fluorescentes, una plaga de GIF’s animados,
applets Java, marquesinas, etc? ¿Cuánto tiempo demoras antes de cerrarla? Yo lo hago
instantáneamente, temo un ataque de epilepsia.
Debemos limitar el uso de GIF’s animados y no poner imágenes indiscriminadamente.
Recuerda poner sólo las que sean necesarias, las que aporten, las que sumen, y por otro
lado ahorrarás en ancho de banda de tu servidor.
8. TABLAS
Las tablas nos sirven para presentar información tabulada, como horarios o resultados de la
lotería. Son un poco complicadas de utilizar, pero algunas veces son necesarias.
Una tabla básica
Las etiquetas principales que tenemos para crear una tabla son:
 <table>: crea la tabla
 <caption>: pone título a la tabla
 <tr>: crea una fila
 <td>: crea una celda
 <th>: crea una celda de encabezamiento

Hay que tener precaución de cerrar bien las etiquetas <tr>, <td> y <th>, un buen sangrado
servirá de ayuda para eso. En el ejemplo tenemos una tabla de 2x2:
<table>
<caption>Videojuegos</ caption>
<tr>
<th>Título</th>
<th>Género</th>
</tr>
<tr>
<td>Sonic</td>
<td>Plataformas</td>
</tr>
</table>
Daría como resultado algo parecido a esto:
Videojuegos
TítuloGénero
Sonic Plataformas
El método es el siguiente: Abrir una etiqueta <tr> por cada fila e insertar allí dentro las celdas
que correspondan.
Atributos de table
La etiqueta <table> dispone de una serie de atributos, aunque la mayoría de éstos se
controlan mediante CSS (borde, dimensiones, colores, etc.). Podemos modificar la distancia
entre celdas con cellspacing y el espacio entre el borde de la celda y su contenido con
cellpadding (aunque este último también es preferible manejarlo con hojas de estilo).

A continuación un ejemplo:
<table 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>
Expandir filas y columnas
A veces necesitamos que una celda ocupe más de un espacio. El atributo colspan permite
expandir una celda por varias columnas.
Por ejemplo:
<table>
<tr>
<th>Título</th>
<th colspan="2">Género</th>

</tr>
<tr>
<td>Sim City</td>
<td>Simulación</td>
<td>Estrategia</td>
</tr>
</table>
Nos quedaría así:
Videojuegos
Título Género
Sim CitySimulaciónEstrategia
También podemos hacer los mismo con las filas, para eso utilizamos el atributo rowspan.
<table>
<tr>
<th>Título</th>
<td>Sim City</td>
</tr>
<tr>
<th rowspan ="2">Géneros</th>
<td>Simulación</td>

</tr>
<tr>
<td>Estrategia</td>
</tr>
</table>
Videojuegos
Título Sim City
Géneros
Simulación
Estrategia
¿Tablas para layouts? Ni lo pienses
A pesar de que CSS está disponible desde 1994, la mayoría de los sitios web en la actualidad
están maquetados con tablas. Antes de la llegada del CSS era imposible maquetar páginas
sin tablas. CSS implementa capas (divs) con lo que podemos controlar totalmente la
colocación de cada elemento, además de su apariencia. Esto nos permite dejar el código
XHTML limpio y simple.
Muchos piensan que esto de las capas es demasiado complicado, pero no es así, sólo que
aprender algo nuevo puede dar pereza. Nuestro manual de CSS puede ser el puntapié inicial.
¿Por qué no debes diseñar con tablas? Porque no se crearon para maquetar y la W3C lo
desaconseja. Porque su resultado es completamente imprevisible en navegadores no visuales
(para ciegos, de texto o cualquier dispositivo que no sea un monitor). Además, las tablas dan
más trabajo, para renovar el diseño de nuestro sitio debemos modificar el código de cada
página casi en su totalidad, cuando utilizando layout por capas sólo debemos modificar el
archivo CSS. El código de una página maquetada con tablas es más complicado, y por lo
tanto más pesado, esto consume más ancho de banda y hace que la página demore más en
cargarse en el navegador.
El futuro es XHTML. Anímate a cumplir los estándares y no uses tablas para maquetar.

9. FORMULARIOS
Los formularios nos sirven para recavar información que el usuario introduce en nuestra
web. Esta información puede ser enviada por correo electrónico o procesada mediante un
script.
Es importante tener en cuenta que la información que se manda por correo electrónico no
está cifrada y podría ser interceptada, entonces no debería contener información importante o
confidencial. Puede servir para pedir intercambio de links o enviar comentarios sobre nuestra
página.
Los servidores que disponen de tecnología como PHP o CGI, nos permiten guardar esa
información en una base de datos o generar una página dinámicamente, por ejemplo.
La etiqueta FORM
Todos los formularios están encerrados por <form> y </form>. Dentro de estas etiquetas se
colocan los campos del formulario, y párrafos y saltos de línea para organizarlos. En el
ejemplo hay una etiqueta <form> para un formulario que se enviará por correo electrónico:
<form action="mailto:leia@alianza.net" method="post" enctype="text/plain">
En el atributo action se especifica qué es lo que se hará al pulsar el botón de enviar (submit).
En el caso del ejemplo, el formulario se enviaría a la dirección leia@alianza.net. Si, en cambio,
procesáramos el formulario con un script pondríamos action=“enviar_info.php".
Con method establecemos la manera en que se enviará la información. Cuando usamos
correo electrónico, le damos el valor post. Para scripts se suele utilizar get, que pone el valor
de las variables en la query string (URL).
Con enctype=“text/plain” logramos que el formulario llegue a nuestra bandeja de entrada en
forma de texto plano, sin caracteres extraños.
Campos de texto
Casi todos los campos de un formulario se crean con la etiqueta <input>, especificando en su
parámetro type el tipo de campo que necesitamos. Un tipo de campo de texto básico sería así:
<input type="text" id="nombre" name="nombre" size="20" />
Con el atributo type=“type” indicamos que se trata de una campo de texto. Con size,
establecemos el ancho del campo, medido en caracteres.
id es un identificador, lo que implica que es un elemento único y no puede haber otro
elemento en el documento que se llame igual. Este parámetro sirve para CSS y para usarlo
con la etiqueta <label> (que veremos más adelante), entre otras cosas.
Con name le damos un nombre a la variable del campo. Por ejemplo, si el visitante escribe
“Morpheo” en el formulario que hemos puesto de ejemplo, recibiríamos un e-mail que
contendría algo así:
nombre = Morpheo

Poner el mismo valor tanto en id como en name simplifica las cosas.
Existen otros atributos para los campos de texto. Podemos indicar el ancho, en número
máximo de caracteres, que puede introducir el usuario con maxsize. Para que aparezca un
valor por defecto, como por ejemplo pedir la dirección de la página web del visitante,
utilizamos value=“algo”.
<input type="text" name="url" id="url" size="30" maxsize="255" value="http://" />
Por último, no olvidemos el atributo title, que en formularios funciona igual que con la etiqueta
<a>.
Campos de contraseña
Los campos de contraseña son iguales a los de texto. La única diferencia es que en el campo
de texto el usuario ve caracteres y en el de contraseña ve puntos. La información no va
cifrada, la diferencia es, entonces, puramente estética.
Los atributos que utiliza son los mismos que los del campo de texto, lo único que cambia es el
valor de type, en el que escribimos password.
<input type="password" name="pass" id="pass" />
Etiquetar campos
Cuando debemos indicarle al usuario qué es lo que tiene que escribir en cada campo
podríamos hacer esto:
<p>Nombre:<br />
<input type="text" name="nombre" id="nombre" />
</p>
Mal. Los navegadores no visuales pueden tener problemas con esto. Para indicar que la
palabra “Nombre” hace referencia al campo con el atributo id=“nombre” utilizamos la etiqueta
<label>.
Esta etiqueta asocia texto con su campo correspondiente. Tiene un solo atributo; for, en el
que tenemos que indicar el id del campo con el que queremos asociar el texto. La manera
correcta de hacer lo del ejemplo anterior sería:
<p>
<label for="nombre">Nombre:</ label><br />
<input type="text" name="nombre" id="nombre" />
</p>
Áreas de texto
Las áreas de texto permiten al visitante introducir varias líneas de texto. La etiqueta que
utilizaremos es <textarea>.

La etiqueta <textarea> dispone de los atributos id, name y title, que funcionan como en el resto
de campos de formulario. Además, disponemos de otros dos para indicar las dimensiones del
área de texto: cols se encarga de establecer el ancho (medido en caracteres) y rows el alto,
medido en líneas.
Como ejemplo, imaginemos que en una parte del formulario queremos poner un campo para
que el visitante deje un comentario. Como probablemente sea largo, utilizamos un textarea:
<p>
<label for="comentario">¿Algún comentario ?</ label><br />
<textarea name="comentario" id="comentario" cols="30" rows="5">
Bla bla bla
</ textarea>
Fíjate en que <textarea> tiene etiqueta de cierre. El texto que hay entre la etiqueta de
apertura y la de cierre es el valor por defecto que contendrá el campo; en este caso “Bla bla
bla”.
Casillas de verificación
Las casillas de verificación (o checkbox) tienen forma de cuadradito, y el usuario las puede
activar o desactivar haciendo clic sobre él. Se crean con la etiqueta <input> y
type=“checkbox”. Sus atributos id, name y title funcionan de forma regular, pero value es
diferente. En value se escribe lo que aparecerá luego en el e-mail que recibamos como valor
de la variable (indicada en name) si la casilla se activa.
Por ejemplo:
<p>Has jugado a…<br />
<input type="checkbox" name="monkey1" id="monkey1" value="si" />
<label for="monkey1">Monkey Island I</ label>
</p>
Si el usuario activa la casilla, recibiremos esto en el mail:
monkey1=si
Añadiendo el atributo checked=“checked” haremos que la casilla aparezca activada por
defecto.
Por ejemplo:
<p>Has jugado a…<br />
<input type="checkbox" name="monkey1" id="monkey1" value="si" checked="checked" />
<label for="monkey1">Monkey Island I</ label>
<input type="checkbox" name="xwing" id="xwing" value="si" />
<label for="xwing">X- Wing Alliance</ label>
</p>
Según este ejemplo “Monkey Island” quedaría activada por defecto y “X-Wing Alliance”
desactivada.

Botones de selección
Más conocidos por su nombre en inglés radio buttons, son casillas con forma circular,
agrupadas, donde sólo una en el grupo puede estar activada a la vez. Se utilizan cuando
necesitamos que el visitante seleccione sólo una de las opciones que se le dan.
Se crean con la etiqueta <input> y su parámetro type=“radio”, pero tienen algunas cosas
especiales.
Supongamos que queremos que el usuario cuál es su película favorita de la trilogía de Star
Wars. Como sólo puede elegir una, emplearemos radio buttons en lugar de casillas de
verificación. Necesitaremos entonces tres botones, uno por cada película. Primero debemos
agruparlos, y lo hacemos dándole a todos los botones el mismo nombre de variable, es decir
que todos tendrán el mismo valor en el atributo name. Respecto al id, como no puede haber
dos iguales, pondremos identificadores distintos. Resumiendo: los radio buttons son los únicos
campos que tienen diferente id y name. También disponemos del atributo checked para activar
por defecto alguna de las opciones.
Ejemplo:
<p>Peli preferida:</br >
<input type="radio" name="peli" id="sw_hope" value="hope" checked="checked" />
<label for="sw_hope">A New Hope</ label>
<input type="radio" name="peli" id="sw_empire" value="empire" />
<label for="sw_empire">The Empire Strikes Back</ label>
<input type="radio" name="peli" id="sw_jedi" value="jedi" />
<label for="sw_jedi">The Return of the Jedi</ label>
</p>
Aquí utilizamos la palabra “peli” para los tres nombres de variable (name). Luego cada botón
tiene asignado su propio id indicando la película (A New Hope tiene asignada la id
“peli_hope”). El atributo value contiene el texto que tendrá la variable en caso de ser
seleccionado ese botón. Por ejemplo, si el usuario seleccione The Return of the Jedi,
recibiremos lo siguiente en el e-mail:
peli=jedi
Listas de selección
Las listas de selección se presentan en forma de lista replegada con múltiples opciones
agrupadas (un concepto similar al de los radio buttons). Son útiles cuando necesitamos
presentar muchas opciones a elegir

Se crean con la etiqueta <select> que tiene etiqueta de cierre. Entre las cuales agregamos las
opciones con la etiqueta <option>. Si el mismo ejemplo anterior lo hiciéramos en forma de lista
de selección lo haríamos así:
<p>
<label for="peli">Película preferida:</ label><br />
<select name="peli" id="peli">
<option value="hope">A New Hope</ option>
<option value="empire">The Empire Strikes Back</ option>
<option value="jedi" selected="selected">The Return of the Jedi</ option>
</ select>
</p>
Para indicar la opción por defecto lo hacemos con selected=“selected”. (Como ves, aquí no
tenemos el lío aquel con id y name).
Botones de enviar y restablecer
Los últimos elementos de los que debemos hablar son dos botones especiales: el de enviar
(submit) y el de reestablecer (reset).
El botón de enviar manda la información del formulario y el botón de reestablecer se encarga
de borrar el formulario, pone todos los valores por defecto, se utiliza más para el caso de
formularios extensos.
Ambos se crean con <input>. En este caso, a menos que queramos cambiar su aspecto de
manera especial con CSS, el atributo id no será necesario. Tampoco name, si enviamos el
formulario por correo no lo necesitaremos, porque no implementaremos ningún script para
tratar la información. En el atributo value escribimos el texto que aparecerá en el botón.
Para crear el botón de enviar indicamos type=“submit”:
<input type="submit" value="Enviar" />
El botón de reestablecer lo conseguimos con type=“reset”:
<input type="reset" value="Borrar" />
De más está decirte que debes diferenciar bien cuál botón es cual. Éste no es precisamente el
mejor lugar para innovar, no pongas textos extraños como título de los botones.

Consultoría y Desarrollo
Serviweb S.L.
Calle Tierno Galván 11, 11, izq.
C.P. 30203 - Cartagena (Murcia)
Tels.: 902 929 442 / 968 086 993
Fax: 968 086 934
info@serviweb.es
www.serviweb.es

Introducción a XHTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Introducción a XHTML

Similaire à Introducción a XHTML (20)

Plus de Serviweb.com.es

Plus de Serviweb.com.es (20)

Dernier

Dernier (20)

Introducción a XHTML