Cuando escribamos xhtml debemos pensar no en
el aspecto gráfico de la página sino en la estructura y el significado del
texto. El aspecto visual lo trataremos cuando trabajemos con el css.
- Sintaxis
- Definición del
documento
- Cabecera
(head)
- Cuerpo
(body)
- Elementos de
bloque (block)
- Elementos dentro
de los párrafos (inline)
- Listas
- Cierre del
documento
- Validación y
depuración del código
Sintaxis
El xhtml sirve
para estructurar el texto, para indicarle al navegador qué parte del texto es un
párrafo, cuál va en negrita y qué clase de documento es, entre otras cosas. Esto
se concreta en el uso de unas etiquetas delimitadas por los signos
< y >. Estas etiquetas normalmente necesitan una
apertura y un cierre, como en <strong> texto resaltado
</strong>, pero hay unas pocas que empiezan y terminan en sí
mismas, como <img src="imagen.jpg" />. Date cuenta de que en
cualquier caso tienes que escribir la etiqueta en minúsculas, y que los
atributos de la etiqueta tienen que ir entre comillas.
Es muy importante también respetar el orden de las etiquetas o tags. Por
ejemplo, esto estaría mal:
<strong><em>prueba</strong></em>, porque se
cierra la primera etiqueta antes de haber cerrado la segunda. Lo correcto sería:
<strong><em>prueba</em></strong>. Si
abrimos una etiqueta dentro de otra, tenemos que cerrar la que está "dentro"
antes que la "contenedora".
Definición del documento
Lo primero de todo es escribir el encabezado que define qué clase de
documento vamos a escribir. Para nuestra primera página usaremos el formato
xhtml estricto, y
colocaremos estas líneas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
Esta declaración ayuda al navegador a procesar mejor la información que
contiene el documento, además de avisarle de que está escrito en español (es).
Si el texto es en inglés pondremos xml:lang="en" lang="en",
eu para euskera, fr para francés y así sucesivamente.
Cabecera (head)
Ahora definimos la información invisible del documento.
<head>
- Abrimos la etiqueta head, la cabecera.
<title>Título de la página</title>
- Aquí definimos el nombre del documento que se verá en la barra superior
del navegador.
<link rel="stylesheet" href="estilo.css" type="text/css"
media="screen" />
- Con esta línea enlazamos el documento a una hoja de estilo.
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
- Aquí le decimos al navegador que utilice el juego de caracteres adecuado
para que puedan verse bien los acentos, las eñes...
<link rel="shortcut icon" href="icono.ico" />
- Esto sirve por si queremos que el documento esté asociado a un icono, que
aparecerá en la barra de direcciones del navegador y en la lista de favoritos,
si el navegador lo soporta.
</head>
- Con esto cerramos la etiqueta head, la cabecera.
Cuerpo (body)
A la hora de organizar el contenido de la página hay que pensar
semánticamente, jerarquizando y ordenando el texto según su
mayor y menor importancia.
Elementos de bloque (block)
Dividiremos el texto en bloques, y los bloques en párrafos.
Cada bloque tendrá un título, para cuya definición usaremos las etiquetas
<h1></h1>, <h2></h2>... y así
hasta <h6></h6>, según la importancia del bloque.
Cada bloque se divide en párrafos, que se señalan con las etiquetas
<p> al principìo y </p> al final. Si el
párrafo entero es una cita, usaremos la etiqueta <blockquote>
al principio y </blockquote> al final, sin olvidarnos de que
dentro de esto hay que señalar el párrafo con las etiquetas
<p> y </p>, como hacemos normalmente.
A veces nos encontraremos con que hay "unidades lógicas", bloques de
información divididos en varios párrafos pero que queremos agrupar. Entonces
usaremos las etiquetas <div> y </div>.
Elementos dentro de los párrafos (inline)
Una vez dentro de cada párrafo, hay una serie de etiquetas que nos sirven
para marcar el texto y convertirlo, efectivamente, en hipertexto, con todas las
ventajas que esto conlleva.
<br />
- Salto de línea en el mismo párrafo.
<em></em>
- Énfasis del texto que haya entre la primera y la segunda etiqueta, por
ejemplo: énfasis.
<strong></strong>
- Otra clase de énfasis del texto que haya entre la primera y la segunda
etiqueta, más notable. Por ejemplo: énfasis. Esto es un resto
de las antiguas etiquetas que imitaban el comportamiento de las negritas y las
cursivas, por lo que es preferible que uses sólo
<em></em>.
<cite></cite>
- Etiqueta una cita.
<acronym title="eXtended Hyper Text Markup
Language">xhtml</acronym>
- Con esta etiqueta, al pasar el ratón por encima del texto xhtml, aparece el
contenido del atributo
title. Como dice el nombre de la etiqueta,
ésta se usa en el caso de acrónimos.
<abbr title="Presidente">Pte.</abbr>
- Funciona de la misma forma que la etiqueta anterior, aunque en este caso
se usa con abreviaturas: Pte.
<dfn>Definición.</dfn>
- Marca el texto como una definición dentro de un párrafo más amplio. No hay
que confundirlo con las listas de definiciones.
<code>código</code>
- Señala que el texto etiquetado es código de programación o edición. Por
ello hay que convertir los símbolos: por ejemplo,
> en
>, las llamadas entidades de
caracteres. De otra forma, el navegador interpretará ciertos símbolos como
código interpretable y no como texto.
<address>Calle Máximo Izpilicueta, 12</address>
- Señala que el texto etiquetado es una dirección.
<span lang="en" xml:lang="en">My taylor is
rich.</span>
- Marca el texto My taylor is rich, señalando que está escrito en
una lengua distinta a la del resto del documento, en este caso inglés (en). Lista completa de códigos de
idiomas.
<a href="http://pagina.com/">enlace</a>
- Marca el texto enlace con un enlace a http://pagina.com/, de modo
que cuando alguien pulse sobre el texto, el navegador irá a la página
enlazada.
<a href="#x">Ir al epígrafe x</a>
- Hiperenlaza el texto Ir al epígrafe x con una parte de la misma
página (en la que está el hiperenlace) a la que previamente hemos marcado como
"x".
<a name="#x" id="#x">Epígrafe x</a>
- Marca el texto Epígrafe x con el ancla o nombre
"x", permitiendo que luego se pueda enlazar desde el mismo documento.
<img src="imagen.jpg" alt="texto alternativo" />
- Coloca una imagen en el texto, en este caso
imagen.jpg. Si no
se encuentra el gráfico, o el navegador no puede leerlo, colocará como
alternativa el texto "texto alternativo".
<span>uno dos tres</span>
- Esta etiqueta tiene una función parecida a la de la etiqueta
div, contener un grupo de elementos para agruparlos. La
diferencia es que la etiqueta div se usa para elementos de bloque
(párrafos, cabeceras...), mientras que span se usa para elementos
que van dentro de los bloques.
Listas
También existen formas de definir listas ordenadas, con números o letras, sin
un orden concreto, y listados de definiciones.
<ul></ul>
- Abre y cierra una lista sin orden concreto.
<ol></ol>
- Abre y cierra una lista ordenada.
<li></li>
- Abre y cierra un elemento de lista, sea esta ordenada o no.
<dl></dl>
- Lista de definiciones.
<dt></dt>
- Término a definir.
<dd></dd>
- Definición del término anterior en la lista.
Cierre del documento
Al término del documento, lo cerramos con las etiquetas de cierre del cuerpo
y del código: </body></html>
Validación y depuración del código
Una vez que ya tenemos la página terminada, hay que ir al validador de código del W3C para comprobar si está
correctamente codificada y bien formada. Lo mejor para esto es tener la página
ya "colgada" en algún servidor, pero también se puede subir nuestra página al
validador. Veremos cómo se colocan las páginas en internet más adelante, en FTPs, permisos, nombres... poniendo la
página en internet.
También podemos usar el validador del WDG, que nos permite pegar nuestro código
en un un formulario y analizarlo sin subir ficheros.
Si el validador te da error, comprueba que tu código cumple los requisitos
del xhtml, que
recordamos una vez más:
- Tiene que haber un prólogo y un elemento raíz, es decir, hay que colocar
la definición del tipo de documento y las etiquetas <html> y
</html>
- Todas las etiquetas tienen que estar correctamente
anidadas: si una etiqueta se abre antes que otra, y la
contiene, debe cerrarse después de cerrarse esa otra. Por ejemplo,
<blockquote> <p> ejemplo </p>
</blockquote> es correcto, mientras que <blockquote>
<p> ejemplo </blockquote> </p> no lo es.
- Todas las etiquetas tienen que estar correctamente
formadas:
- Todas las etiquetas se abren con
<[etiqueta]> y se
cierran con </[etiqueta]>.
- Todas se escriben con minúsculas.
- Las etiquetas vacías, como
<br /> y
<img />, tendrán el formato <[etiqueta]
/>, dejando un espacio en blanco antes de la barra y el signo de
cierre de etiqueta.
- Si las etiquetas tienen atributos o modificadores, éstos van separados
por espacios, seguidos por un signo igual y los valores entrecomillados (sin
espacios en blanco entre el igual y las comillas). Por ejemplo,
<a
href="http://pagina.com"> </a>
Cualquier Consulta o Aportacion Escribeme a:geo_maravilla@yahoo.com