PDF de programación - Contenido y estructura de un documento XHTML

Contenido y
estructura de
un documento
XHTML


Pere Barnola Augé

P08/93133/01328

© FUOC • P08/93133/01328

Índice

Contenido y estructura de un documento XHTML


Introducción..........................................................................................

1. Elementos principales...................................................................
1.1. Declaración XML ......................................................................
1.2. Declaración DTD .......................................................................
1.3. Elemento HTML ........................................................................
1.4. Elemento HEAD ........................................................................
1.5. Elemento TITLE .........................................................................
1.6. Elemento BODY ........................................................................
1.7. Un documento XHTML básico .................................................


2. Etiquetas y elementos...................................................................
2.1. Encabezamientos .......................................................................
2.2. Párrafos ......................................................................................
2.3. Enlaces .......................................................................................
2.4. Imágenes ....................................................................................
2.5. Listas ..........................................................................................
2.5.1. Listas numeradas ...........................................................
2.5.2. Listas sin numerar .........................................................
2.5.3. Listas de definición (listas diccionario) .........................
2.6. Tablas .........................................................................................
2.7. Capas .........................................................................................
2.8. Otros ..........................................................................................
2.8.1. Elemento BR ..................................................................
2.8.2. Elemento ACRONYM ....................................................
2.8.3. Elemento ADDRESS .......................................................
2.8.4. Elemento SPAN ..............................................................
2.9. Validaciones ...............................................................................


3. Caso práctico: "nuestra primera web"......................................

5

7
8
9
10
11
12
13
14

16
16
18
21
24
27
27
29
32
32
36
39
39
42
45
48
51

53

© FUOC • P08/93133/01328

Introducción

5

Contenido y estructura de un documento XHTML

El XHTML consiste en diferentes componentes vitales. Veremos a continua-
ción sus elementos, atributos, tipos de fecha y la declaración de tipo de docu-
mento.

Para hacerlo más comprensible, iremos construyendo un documento XHTML
de forma paralela, a modo de ejemplo, en cada uno de los elementos que ex-
plicaremos.

El lenguaje XHTML se puede crear y modificar con cualquier editor de texto
básico, como puede ser el Bloc de Notas de Windows, o cualquier otro editor
que admita texto sin formato GNU Emacs, Microsoft Wordpad, TextPad, Vim,
Note pad++...

Programas WYSIWYG

Hay también otros programas para la realización de sitios web o edición de código
XHTML, como por ejemplo el Dreamweaver de Adobe, el Expression Web de Microsoft
o el CompoZer. A estos programas se los conoce como WYSIWYG o what you see is what
you get ('lo que ves es lo que obtienes'). Esto significa que son editores en los cuales se ve
el resultado de lo que se está editando en tiempo real a medida que se va desarrollando
el documento. Ahora bien, esto no significa una manera diferente de realizar webs, sino
una manera más sencilla, ya que estos programas, además de tener la opción de trabajar
con la vista preliminar, tienen su propia sección XHTML, la cual va generando el código
a medida que se va escribiendo.

Para empezar y tener más claro el concepto, nosotros utilizaremos un editor
de texto simple, en nuestro caso, el Bloc de Notas de Windows.

© FUOC • P08/93133/01328

7

Contenido y estructura de un documento XHTML

1. Elementos principales

Antes de ver los elementos que componen un XHTML diremos, como intro-
ducción, que un archivo XHTML está formado por elementos y contenido.
Los elementos delimitan el contenido y le dan información adicional, que será
interpretada por el navegador. Un elemento está compuesto, normalmente,
por dos etiquetas. Si el elemento es de tipo vacío sólo será necesaria una, como
veremos más adelante.

Aquí tenemos un ejemplo:

<p>este texto quiero que sea un párrafo</p>

El elemento p está definido por dos etiquetas: <p> y </p>.

Estas etiquetas están colocadas al inicio y al final de la frase que queremos de-
limitar como párrafo. La etiqueta <p> estará al inicio, mientras que la etiqueta
</p> estará al final. Es decir, el signo / dentro de la etiqueta quiere decir que
cerramos el elemento.

No todos los elementos se tienen que cerrar de la manera que acabamos de
ver. Por ejemplo, cuando queramos introducir una imagen, lo haremos de la
manera siguiente:

<img src="imgs/imagen1.jpg"/>

A esto lo llamaremos, como ya hemos adelantado, elementos vacíos, ya que
no tienen contenido dentro de las etiquetas. De hecho, sería lo mismo escribir

<img src="imgs/imagen1.jpg"></img>

Una vez hemos visto cómo funcionan los elementos HTML, otro aspecto im-
portante que hay que tener en cuenta es que los elementos HTML se pueden
"imbricar" los unos con los otros de la manera siguiente:

<div> <p>Este texto es un párrafo dentro de una capa</p></div>

Aquí vemos cómo el elemento p está dentro del elemento <div>; por lo tanto,
el texto estará afectado por las dos etiquetas. A la hora de cerrar los elementos,
se tiene que tener una precaución especial, ya que el primer elemento en ser
cerrado será el último elemento que hemos abierto.

© FUOC • P08/93133/01328

8

Contenido y estructura de un documento XHTML

Otro aspecto importante que hay que conocer de los elementos es que éstos
pueden tener atributos. Los atributos especifican características particulares
del elemento. Los atributos se componen del nombre del atributo seguido de
un signo = y entre comillas el valor del atributo.

<a href="http://www.example.com">Link en un web</a>

En este ejemplo, el atributo href tiene como valor "http://www.example.com"
y especifica cuál es la dirección a la que queramos enlazar.

Separación de atributos en documentos CSS

Más adelante, cuando profundicemos en el estudio de las hojas de estilo, veremos que
es mejor tener separados ciertos atributos de los elementos en documentos CSS, tanto
para la comprensión global del documento como para conseguir, al mismo tiempo, una
mejor valoración de nuestra web por parte de los motores de búsqueda (Google, Yahoo).

Una vez hemos visto cómo funciona el sistema de etiquetado del XHTML,
veremos cuáles son sus elementos principales.

1.1. Declaración XML

El primer elemento que escribiremos en nuestro documento XHTML es el de
declaración de XML. Veremos un ejemplo y lo comentaremos.

Comenzaremos, pues, a construir nuestro documento. Abriremos nuestro edi-
tor de texto y escribiremos la línea siguiente.

<?xml version="1.0" encoding="UTF-8"?>

Guardaremos el documento que acabamos de crear con el nombre de
"index.html". Para comprobar cómo interpreta nuestro código un navegador,
es decir, cómo se visualiza en un navegador, tendremos que ir hasta el archivo
"index.html", hacer clic con el botón derecho y, de las opciones que nos salgan,
escoger un navegador (Internet Explorer o Firefox son los más habituales). En
caso de que no nos saliera un navegador para escoger, lo podremos hacer de
la manera siguiente: abriendo primero el navegador y, después, arrastrándolo
adentro de nuestro archivo "index.html".

© FUOC • P08/93133/01328

9

Contenido y estructura de un documento XHTML

La declaración XML es un tipo especial de elemento. Como excepción, no
cerraremos el elemento de la forma usual, y sirve para indicar al navegador qué
versión de XML queremos utilizar. En el atributo "encoding" especificaremos
la codificación de caracteres que necesitaremos en nuestro documento. En
principio, el valor "UTF-8" sería suficiente para la mayoría de los casos.

Enlace recomendado

No profundizaremos en el asunto de las codificaciones, ya que puede ser muy ex-
tenso y, en principio, se escapa de los objetivos de este curso. Para conocer más
sobre codificaciones, podéis ir a la siguiente dirección: http://es.wikipedia.org/wiki/
Codificaci%C3%B3n_de_caracteres

1.2. Declaración DTD

Con este elemento, se indica el documento público que contiene las reglas
de sintaxis y gramática con las cuales se determina si el documento actual es
válido o no con respecto a la versión del lenguaje indicada.

Mediante este documento, las aplicaciones de validación verifican que todos
los elementos estén correctamente imbricados y que las etiquetas y atributos
que contienen son válidos.

Hay distintos DTD (definición de tipo de documento) que establecen los dife-
rentes grados con los cuales un documento XHTML tiene que ajustarse a las
reglas de gramática y sintaxis del XML. En concreto, hay tres tipos de DTD
que podemos especificar en nuestro documento. A continuación, veremos los
más significativos, ya que hay uno que es sólo para cuando utilizamos frames
y, por lo tanto, lo obviaremos.

Así pues, veremos qué forma tienen los más significativos, de menos a más
restrictivos:

• Transicional. El DTD transicional permite el uso de algunos elementos y

atributos antiguos del HTML que, actualmente, están en desuso.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://